/* jefurry-ui.css — 公司内部应用统一样式底座
   ----------------------------------------------------------------------------
   v2（2026-09-21，PROD-64 设计体系令牌层定稿 Seabert 认可后升版）：
   纯增量加入——字号阶 --fs-* 十档、间距阶 --sp-* 九档（2x 网格 8px 基准）、
   品牌三色 --brand-*（值源 PROD-39 §3.3，亮态暗值/暗态亮值双值制）。
   不改任何既有变量值——存量 178 页零影响。
   v2.1（同日·Seabert 批）：纯增量加入图表系列色 --chart-1~3＋--chart-track/--chart-grid，亮暗各一套。设计稿与逐档用场见
   02-产品体系/PROD-64-公司设计体系-现状盘点与设计范围.html 分区 03。
   v2.2（2026-09-21·Seabert 拍板四项）：纯增量加入——小件圆角 --radius-xs 4px（复选框/图表条端/小标签/气泡）、
   实底上的反白字 --on-fill、弹层遮罩 --scrim（两者亮暗各一套）、衬线字体栈 --font-serif（金融时报风用；
   Newsreader 待下载——自托管字体库还没有它，下载落 fonts.css 后在栈首加 "Newsreader"）。
   不改任何既有变量值；改前后两页基准截图逐字节一致。胶囊 999px 与 980px 同视为胶囊（规范承认，不改）。
   v2.3（2026-09-21·Seabert 拍板配色四项）：纯增量加入产品线识别色 --line-insight/axis/master/conversion/wiki，亮暗各一套
   （R15 五条线；值以销售站服务配置页现用值为底，Master 亮暗、Conversion 暗、Wiki 暗为解色弱/撞警示色调过）。
   四层各管一件事（PROD-64 分区 03「颜色四层」）：--accent 只管可点/选中；状态色只管好坏；产品线色只上产线标签、
   3px 色条、图例点，不做大面积、不做按钮、不表好坏；图表色只给「不是产品线」的类别。改前后三页基准截图逐字节一致。
   v2.4（同日·Seabert 令补无障碍）：**改值**（不是纯增量，存量页会有轻微变化，已截图核对）——
   ① 亮态 --muted #6b7280→#666d7b（在沉面 #f5f6f7 上 4.47→4.81:1，过 WCAG AA 4.5）；
   ② 暗态 --muted 由 --night-muted #7d818b 改为 #8a8e98（在暗态主色浅底 #16213a 上 4.10→4.88:1；--night-muted 本身不动）；
   ③ 暗态新增 --accent-strong #7FA3EE（原沿用亮值 #315aa5，暗面上仅 2.67:1→7.14:1）；
   ④ --focus 由 3px 14% 黑晕改为「2px 面色隔圈＋2px 主色环」双环（亮 4.87:1、暗 3.67:1，WCAG 2.2 焦点可见 ≥3:1）。
   v2.5（同日·Seabert 拍板文档六问）：纯增量加入「减少动效」一段（系统开了减少动效时，动画与过渡压到 0.01ms、
   平滑滚动改瞬跳；细则见 PROD-64 附3 §2.3）。不改任何既有变量值，改前后三页基准截图逐字节一致。
   v2.6（2026-09-22·Seabert 拍板）：自托管衬线 Newsreader（Google Fonts 官方 OFL 版，fonts/ 下 4 个 woff2＋许可），
   接进 --font-serif 栈首；只影响写了 var(--font-serif) 的地方，改前后三页基准截图逐字节一致。
   v2.9（2026-10-03·Seabert「你自己卷的标准高一点儿」，PROD-64 附12 1.5）：纯增量加入「手机兜底」一段（只在 ≤760 生效，桌面零变化）——
     表格在框内横滑、图片视频与表单控件不超出容器、长代码与长串换行；svg 不动（无 viewBox 的会变形）。
     起因：check-mobile 全量扫 206 页，43 页在手机上被撑宽，多数是表格与控件；各页逐个补是打地鼠，兜底放底座一处管全站。
   v2.8（2026-09-29·Seabert 拍板，售中四件提炼规范第 2 条）：纯增量加入渠道识别色 --ch-*（8 个投放渠道，只回答「这是哪个平台」，
   用法同产品线色：标签、3px 色条、图例点、渠道类图表系列；不做大块底、不表好坏）。只给亮态——对客看板只亮。
   值取投放报告／启动会技能包 rc.py 原值，Meta、自然流量两处撞色改过；技能包今后以本件为准。不改任何既有变量值。
   v2.7（2026-09-23·PROD-64 第十五批）：纯增量加入表现档动效令牌 --ease-expo、--dur-reveal（只给对外网站；
   来源＝AI 视频站 video.jefurryaxis.com 实测值）。不改任何既有变量值，没写这两个变量的页零影响。

   取值来源：线上系统 https://insights.jefurryaxis.com/ 的真实 CSS 变量与基础组件
   （2026-09-04 抓取核对，非目测仿色）。内部应用一律引本件，不再各写一套调色板。

   为什么放外链文件而不内联进每页：页面还是零依赖单文件（不装 npm、不引 CDN），
   但调色板与基础组件收在一处——改一次全体生效，避免再长出第五套风格。

   字体：已于 2026-09-04 自托管落地——从线上取下其实际在用的 woff2（拉丁字形 8 个文件
   约 160KB），声明在 fonts.css，本件开头 @import 引入。中文仍走系统字体，线上也是如此。
   不引外部字体链接：页面要能离线打开，引外链会让断网环境下字形回退、与线上不一致。 */

@import url("fonts.css");

/* 衬线 Newsreader（v2.6 增·2026-09-22·总账决 2 拍板 A：下载、只落 F2 报告流＋F3 纸面）
   取自 Google Fonts 官方（fonts.gstatic.com v26，可变字体 opsz 6–72、wght 400–700），SIL OFL 1.1，许可见 fonts/newsreader-OFL.txt。
   只拉丁＋拉丁扩展，正体／斜体各两个文件共约 450KB；按 unicode-range 分片、用到才下载。只有写了 var(--font-serif) 的地方会用到。 */
@font-face{font-family:"Newsreader";font-style:normal;font-weight:400 700;font-display:swap;src:url("fonts/newsreader-normal-latin.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Newsreader";font-style:normal;font-weight:400 700;font-display:swap;src:url("fonts/newsreader-normal-latin-ext.woff2") format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Newsreader";font-style:italic;font-weight:400 700;font-display:swap;src:url("fonts/newsreader-italic-latin.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Newsreader";font-style:italic;font-weight:400 700;font-display:swap;src:url("fonts/newsreader-italic-latin-ext.woff2") format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

:root{
  /* —— 中性色（亮） —— */
  --canvas:#fff;
  --app:#f8f9fa;
  --surface:#fff;
  --surface-sunk:#f5f6f7;
  --ink:#111;
  --body:#374151;
  --muted:#666d7b;    /* v2.4 改：原 #6b7280，沉面上 4.47:1 未过 AA */
  --faint:#9ca3af;
  --hair:#e5e7eb;
  --hair-strong:#d1d5db;

  /* —— 主色 —— */
  --accent:#3f6fc7;
  --accent-strong:#315aa5;
  --accent-soft:#eef3fb;

  /* —— 语义色 —— */
  --success:#167c5a;  --success-soft:#e9f7f1;
  --warning:#a15c00;  --warning-soft:#fff4df;
  --error:#b4232f;    --error-soft:#fff0f1;

  /* —— 夜间（线上 night 系，用于深色态） —— */
  --night:#0d0d0f;
  --night-2:#17171a;
  --night-ink:#fafafa;
  --night-body:#b9bcc4;
  --night-muted:#7d818b;
  --night-line:#ffffff1c;

  /* —— 洞察/报告阅读视图的暖色纸张系（线上 demo dashboard 在用） —— */
  --ins-paper:#faf8f3;
  --ins-card:#fdfcf9;
  --ins-ink:#221f1a;
  --ins-ink-2:#4a443b;
  --ins-ink-3:#8a8274;
  --ins-rule:#e6e0d3;
  --ins-rule-2:#d6cdb9;
  --ins-seal:#8c3a1e;

  /* —— 形状与动效 —— */
  --radius:12px;
  --radius-sm:8px;
  --radius-xs:4px;   /* v2.2 增：小件（复选框、图表条端、小标签、气泡） */
  --on-fill:#fff;    /* v2.2 增：反白字——墨色/主色/语义色/品牌色实底上的字；暗态随底色变亮转深 */
  --scrim:#00000066; /* v2.2 增：弹层遮罩（=rgba(0,0,0,.4)）；暗态加深 */
  --shadow:0 1px 2px #0000000d, 0 4px 12px #0000000a;
  --shadow-lift:0 1px 1px #1111110d, 0 4px 10px #1111110f, 0 20px 44px -12px #1113;
  --ease:cubic-bezier(.2,.8,.2,1);
  /* v2.7 增（PROD-64 第十五批·学 AI 视频站 video.jefurryaxis.com）：表现档动效两枚——只给对外网站（data-page-type="site"）用；
     工作应用／看板／文档页仍只用 --ease 与附3 三档时长（0.16/0.2/0.3s），不许借这两枚做进场动画；
     唯一例外：小工牌 kb-idcard 的悬停轻摆（0.3s）用 --ease-expo（Seabert 09-23 拍板） */
  --ease-expo:cubic-bezier(.22,1,.36,1);  /* 快起慢收：进场、悬停放大、圆点扩散 */
  --dur-reveal:.8s;                      /* 滚动进场一段的时长（整块淡入＋微缩放） */
  --focus:0 0 0 2px var(--surface), 0 0 0 4px var(--accent);  /* v2.4 改：原 0 0 0 3px #11111124（亮态太淡、暗态看不见） */
  --shell:1160px;

  /* —— 品牌三色（v2 增·值源 PROD-39 §3.3·亮态用暗值，暗态用亮值见下方暗态块） —— */
  --brand-gold:#B45309;   /* 金：与语义 warning 同值——品牌与语义一体，不二色 */
  --brand-teal:#0F9D8F;   /* 青：与 success 相近但独立命名，供活泼档与品牌件 */
  --brand-blue:#3B82F6;   /* 蓝：品牌件专用（F4/VI），界面主色仍是 --accent */

  /* —— 字号阶（v2 增·十档·用场见 PROD-64 分区 03） —— */
  --fs-3xl:clamp(28px,4vw,44px);  /* 页面主标题 */
  --fs-2xl:24px;                  /* 分区标题 */
  --fs-xl:20px;                   /* 小节标题 */
  --fs-lg:17px;                   /* 卡片标题 */
  --fs-md:15px;                   /* 导语与强调正文 */
  --fs-body:14px;                 /* 正文默认（与 body 同值） */
  --fs-sm:12.5px;                 /* 表格正文·列表一句 */
  --fs-xs:11px;                   /* 标签·KPI 标注·眉题小注 */
  --fs-mono:11.5px;               /* 等宽＝正文 ×0.86 */
  --fs-num:clamp(26px,2.8vw,38px);/* KPI 数字（display 字体＋tabular-nums 配合使用） */

  /* —— 间距阶（v2 增·九档·2x 网格 8px 基准） —— */
  --sp-1:4px;    /* 图标与文字间、微距 */
  --sp-2:8px;    /* 紧凑内距·网格基准 */
  --sp-3:12px;   /* 列表行上下、表单字段间 */
  --sp-4:16px;   /* 卡内距常规、组件间常规 */
  --sp-5:24px;   /* 卡内距大、组间 */
  --sp-6:32px;   /* 分区内距 */
  --sp-7:48px;   /* 分区之间 */
  --sp-8:64px;   /* 幕与幕之间 */
  --sp-9:96px;   /* 宣传页场景幕上下 */

  /* —— 图表系列色（v2.1 增·2026-09-21 Seabert 批·固定顺序不轮换；暗态另一套见暗态块） —— */
  /* 校验器 light 五项全过（相邻色盲区分度 14.3）；文字永远用墨色，不用系列色；第 4 个系列起并入「其他」 */
  --chart-1:#3f6fc7;   /* ＝主色 */
  --chart-2:#0F9D8F;   /* ＝品牌青 */
  --chart-3:#B45309;   /* ＝品牌金 */
  --chart-track:var(--accent-soft);  /* 仪表条/排名条底轨 */
  --chart-grid:var(--hair);          /* 图内刻度线 */

  /* —— 产品线识别色（v2.3 增·R15·只上标签/3px 色条/图例点；五线同图必须在图上直接标名——校验器五色同框不过，见 PROD-64 分区 03） —— */
  --line-insight:#0E8FA6;     /* 青 */
  --line-axis:#2A63C4;        /* 蓝（与 --accent 同族，靠「只上标签/色条」隔开） */
  --line-master:#9762fd;      /* 紫（比销售站原 #6B41C4 调亮，解与 Axis 的色弱撞色 1.5→9.5） */
  --line-conversion:#D96F19;  /* 橙 */
  --line-wiki:#0F2C47;        /* 深藏青（底座实心带；亮度低于图表带，不作图表系列） */

  /* —— 渠道识别色（v2.8 增·只上标签/3px 色条/图例点/渠道类图表系列；同图 ≥4 个渠道须在图上直接标名） —— */
  --ch-tencent:#3B82F6;       /* 腾讯广告 */
  --ch-xhs:#F97C4E;           /* 小红书广告 */
  --ch-oceanengine:#1F2937;   /* 巨量广告 */
  --ch-meta:#7C3AED;          /* Meta 广告（原 #2563EB 与腾讯同为亮蓝，改紫） */
  --ch-linkedin:#0A66C2;      /* LinkedIn 广告（保留原值（深蓝，与腾讯亮蓝靠明暗分开）） */
  --ch-tiktok:#DB2777;        /* TikTok 广告 */
  --ch-wechat-oa:#10B981;     /* 微信公众号 */
  --ch-organic:#64748B;       /* 自然流量（原 #10B981 与公众号同色且像「达标」绿，改灰） */

  /* —— 字体 —— */
  --font-cjk:"PingFang SC","HarmonyOS Sans SC","Source Han Sans SC","Noto Sans CJK SC","Microsoft YaHei","Hiragino Sans GB",sans-serif;
  --font-sans-latin:"IBM Plex Sans","Segoe UI",system-ui,-apple-system,sans-serif;
  --font-sans:var(--font-sans-latin),var(--font-cjk);
  --font-display:"Manrope",var(--font-sans-latin),var(--font-cjk);
  --font-mono:"IBM Plex Mono",Consolas,"SF Mono",Menlo,monospace;
  /* v2.2 增：衬线（金融时报风标题/长文，只落 F2 报告流＋F3 纸面） */
  --font-serif:"Newsreader",Georgia,"Times New Roman","Songti SC","STSong","SimSun",serif;  /* v2.6：Newsreader 已自托管，放栈首；中文走宋体回退 */
}

/* 深色态：跟随系统，或由 data-theme 显式指定（与既有页面的主题开关兼容） */
/* 2026-09-08 补三组语义 soft：原来深色态**只重定义了 --accent-soft**，
   success/warning/error 的 soft 底仍是亮色（#e9f7f1 / #fff4df / #fff0f1），
   而 --ink/--body 已翻成亮字 —— 于是「浅底＋浅字」，深色态下整块看不见。
   实测在任务看板的新鲜度条与缺口盒上复现；全仓库 21 页用到这三个变量，
   底座自己的 .tag--ok/--warn/--err 也在其中，所以修在这儿而不是各页各补一遍。
   前景色一并提亮：#167c5a 这类深色在深底上同样读不出来。 */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --canvas:var(--night); --app:var(--night); --surface:var(--night-2); --surface-sunk:#101013;
    --ink:var(--night-ink); --body:var(--night-body); --muted:#8a8e98; --faint:#6b6f78;
    --hair:var(--night-line); --hair-strong:#ffffff2e;
    --accent-soft:#16213a;
    --success:#5ec99b; --success-soft:#11251d;
    --warning:#e0a44a; --warning-soft:#271c0e;
    --error:#e8737d;   --error-soft:#2a1418;
    --brand-gold:#F5B301; --brand-teal:#00E0CC; --brand-blue:#6F8CFF; /* v2 增：暗态品牌亮值 */
  --chart-1:#6687F5; --chart-2:#10A698; --chart-3:#BA820C; /* v2.1 增：暗态图表系列色（品牌霓虹亮值超暗态亮度带，不做数据色；校验器 dark 五项全过 14.5） */
  --on-fill:var(--night); --scrim:#00000099; /* v2.2 增：暗态反白字转深（实底在暗态变亮）、遮罩加深 */
  --line-insight:#3EC0D6; --line-axis:#6294EF; --line-master:#DDA0F5; --line-conversion:#F2743F; --line-wiki:#C5D3E0; /* v2.3 增：暗态产品线色（Conversion 偏红避开暗态警示色；Wiki 转浅色实心带） */
  --accent-strong:#7FA3EE; /* v2.4 增：暗态强调字（链接/选中字），原沿用亮值只有 2.67:1 */
  }
}
:root[data-theme="dark"]{
  --canvas:var(--night); --app:var(--night); --surface:var(--night-2); --surface-sunk:#101013;
  --ink:var(--night-ink); --body:var(--night-body); --muted:#8a8e98; --faint:#6b6f78;
  --hair:var(--night-line); --hair-strong:#ffffff2e;
  --accent-soft:#16213a;
  --success:#5ec99b; --success-soft:#11251d;
  --warning:#e0a44a; --warning-soft:#271c0e;
  --error:#e8737d;   --error-soft:#2a1418;
  --brand-gold:#F5B301; --brand-teal:#00E0CC; --brand-blue:#6F8CFF; /* v2 增：暗态品牌亮值 */
  --chart-1:#6687F5; --chart-2:#10A698; --chart-3:#BA820C; /* v2.1 增：暗态图表系列色（品牌霓虹亮值超暗态亮度带，不做数据色；校验器 dark 五项全过 14.5） */
  --on-fill:var(--night); --scrim:#00000099; /* v2.2 增：暗态反白字转深（实底在暗态变亮）、遮罩加深 */
  --line-insight:#3EC0D6; --line-axis:#6294EF; --line-master:#DDA0F5; --line-conversion:#F2743F; --line-wiki:#C5D3E0; /* v2.3 增：暗态产品线色（Conversion 偏红避开暗态警示色；Wiki 转浅色实心带） */
  --accent-strong:#7FA3EE; /* v2.4 增：暗态强调字（链接/选中字），原沿用亮值只有 2.67:1 */
}

/* ===== 基础版式 ===== */
*,:before,:after{box-sizing:border-box}
html{background:var(--canvas)}
body{
  margin:0; background:var(--app); color:var(--body);
  font:14px/1.6 var(--font-sans);
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{color:var(--ink); font-family:var(--font-display); letter-spacing:-.018em; margin:0}
h1{font-size:clamp(28px,3.4vw,44px); line-height:1.12; font-weight:700}
h2{font-size:clamp(20px,2.1vw,28px); line-height:1.2; font-weight:700}
h3{font-size:17px; line-height:1.3; font-weight:650}
a{color:inherit}

/* 版心 */
.shell{width:100%; max-width:var(--shell); margin:0 auto; padding:0 24px}

/* 小标签（线上 eyebrow：等宽、全大写、宽字距） */
.eyebrow{
  font-family:var(--font-mono); letter-spacing:.16em; text-transform:uppercase;
  color:var(--muted); font-size:10.5px;
}

/* 分节 */
.section{padding:68px 0}
.sectionHead{max-width:640px; margin-bottom:44px}

/* 按钮 */
.btn{
  border-radius:var(--radius-sm); border:1px solid var(--hair-strong); background:var(--surface);
  min-height:42px; color:var(--ink); letter-spacing:-.005em;
  display:inline-flex; justify-content:center; align-items:center; gap:8px;
  padding:0 18px; font:600 13.5px/1 var(--font-sans); cursor:pointer;
  transition:border-color .16s var(--ease), background .16s var(--ease),
             transform .16s var(--ease), color .16s var(--ease);
}
.btn:hover{border-color:var(--ink)}
.btn:focus-visible{outline:none; box-shadow:var(--focus)}
.btn:disabled{opacity:.45; cursor:not-allowed}
.btn--primary{background:var(--ink); border-color:var(--ink); color:var(--canvas)}
.btn--primary:hover{background:#242424}
.btn--onNight{color:var(--ink); background:#fff; border-color:#fff}
.btn--onNight:hover{background:#ededed}
.btn--ghostNight{border-color:var(--night-line); color:var(--night-ink); background:transparent}
.btn--ghostNight:hover{background:#ffffff0a}

/* 卡片与细线 */
.card{
  background:var(--surface); border:1px solid var(--hair); border-radius:var(--radius);
  padding:18px 20px; box-shadow:var(--shadow);
}
.hair{border:0; border-top:1px solid var(--hair); margin:0}

/* 表格：细线、等宽数字 */
.tbl{width:100%; border-collapse:collapse; font-size:12.5px; background:var(--surface)}
.tbl th{
  background:var(--surface-sunk); text-align:left; padding:8px 10px;
  border:1px solid var(--hair); font-weight:600; color:var(--ink);
}
.tbl td{padding:7px 10px; border:1px solid var(--hair); font-variant-numeric:tabular-nums}

/* 状态点与徽标 */
.dot{width:8px; height:8px; border-radius:50%; background:var(--hair-strong); display:inline-block}
.dot--ok{background:var(--success)} .dot--warn{background:var(--warning)} .dot--err{background:var(--error)}
.tag{
  display:inline-flex; align-items:center; gap:5px; padding:2px 9px; border-radius:999px;
  font:600 11px/1.7 var(--font-sans); border:1px solid var(--hair-strong); color:var(--muted);
  background:var(--surface);
}
.tag--ok{color:var(--success); border-color:var(--success); background:var(--success-soft)}
.tag--warn{color:var(--warning); border-color:var(--warning); background:var(--warning-soft)}
.tag--err{color:var(--error); border-color:var(--error); background:var(--error-soft)}
.tag--accent{color:var(--accent-strong); border-color:var(--accent); background:var(--accent-soft)}

/* 等宽数字与代码 */
.mono{font-family:var(--font-mono); font-size:11.5px}

/* ===== 统一顶栏（2026-09-11 加）=====
   由来：此前各页各写一套顶栏（.tb / .ms-top / .bt-top / .tk-top / .topbar …），
   回链指向五花八门（有的指汇报总目录、有的压根没有），主题开关的 localStorage key
   也有三套（sale_theme / perf_theme / ja_lang）。这一套是**唯一写法**：

     <header class="jf-top">
       <a class="jf-home" href="…">← 门厅</a>
       <b class="jf-t">页面名</b>
       <nav class="jf-nav"><a href="#锚">…</a></nav>
       <span class="jf-r">
         <a href="…">服务中台</a><a href="…">支撑后台</a><a href="…">应用总目录</a>
         <button class="jf-btn" data-jf-theme>暗</button>
       </span>
     </header>

   主题开关由 assets/jf-theme.js 提供（key＝jf_theme，全站一套）。
   ⚠ 门厅（智慧大脑.html）是深色宇宙，用 .jf-top--night 变体。 */
.jf-top{position:sticky;top:0;z-index:50;display:flex;align-items:center;gap:14px;
  min-height:48px;padding:0 24px;font-size:13px;flex-wrap:wrap;row-gap:2px;
  background:color-mix(in srgb,var(--surface) 84%,transparent);backdrop-filter:blur(20px);
  border-bottom:1px solid var(--hair)}
.jf-home{font-family:var(--font-display);font-weight:600;letter-spacing:-.03em;color:var(--ink);white-space:nowrap}
.jf-t{color:var(--muted);font-weight:400;white-space:nowrap}
.jf-nav{display:flex;gap:13px;color:var(--muted);flex-wrap:wrap}
.jf-nav a:hover{color:var(--ink)}
.jf-r{margin-left:auto;display:flex;gap:10px;align-items:center;color:var(--muted);white-space:nowrap}
.jf-r a:hover{color:var(--ink)}
.jf-btn{border:1px solid var(--hair-strong);background:var(--surface);color:var(--ink);
  border-radius:999px;padding:5px 13px;font:600 12px/1 var(--font-sans);cursor:pointer;min-height:28px}
.jf-btn:hover{border-color:var(--ink)}
/* 深色变体：给深色宇宙的页（门厅、图形导览页） */
.jf-top--night{background:color-mix(in srgb,var(--night) 82%,transparent);border-bottom-color:var(--night-line)}
.jf-top--night,.jf-top--night .jf-home{color:var(--night-ink)}
.jf-top--night .jf-t,.jf-top--night .jf-nav,.jf-top--night .jf-r{color:var(--night-muted)}
.jf-top--night .jf-nav a:hover,.jf-top--night .jf-r a:hover{color:var(--night-ink)}
.jf-top--night .jf-btn{border-color:var(--night-line);background:transparent;color:var(--night-ink)}
.jf-top--night .jf-btn:hover{border-color:var(--night-ink)}
@media(max-width:900px){.jf-nav{order:9;flex-basis:100%;padding-bottom:6px}}

/* ===== 减少动效（v2.5 增·PROD-64 附3 §2.3·Seabert 09-21 拍板进底座）=====
   有人在系统里关掉了动效（晕动症、注意力原因）：引底座的页一律照办，页面不必各写一份。 */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}
  html{scroll-behavior:auto}
}

@media print{
  body{background:#fff}
  .btn,.noprint{display:none !important}
}

/* ── v2.9 手机兜底（≤760；PROD-64 附12 1.5；机检 应用/assets/check-mobile.js）──
   只兜「撑出屏幕」这一件事，不改桌面任何样子。页面自己写了更好的手机布局的，以页面为准（这里优先级最低）。 */
@media (max-width:760px){
  :where(table){display:block;max-width:100%;overflow-x:auto}
  :where(img,video,canvas,iframe){max-width:100%}
  :where(img,video){height:auto}
  :where(input,select,textarea){max-width:100%}
  :where(pre){white-space:pre-wrap;overflow-wrap:anywhere}
  :where(code,kbd){overflow-wrap:anywhere}
}