/* ============================================================================
   AmberVouch 琥珀印 · 全站设计系统  theme.css
   ----------------------------------------------------------------------------
   定稿 2026-09-26（二版）。取代「琥珀金 · 深墨底」深色方案，整体翻为
   「暖蜜桃米 · 浅色」—— 用户要求全站（含所有子页面）浅色、暖调、字体可读。

   设计主张：把品牌印章的暖金放大成整个网站的暖色基调。
   印章本身是「深底 #101826 + 朱红框 #C0392B + 琥珀金 #F5B942」，翻浅色后：
     页面 = 暖粉杏底 #FDF6EE，区块 = 暖米 #F8ECDF，卡片 = 近白 #FFFDFA，
     文字 = 暖墨黑 #33271D（绝不用浅色，保证可读），
     琥珀金 #EFB23A 只在四处用力（主 CTA / 品牌印记 / 关键数字 / 已固化·已验证），
     且金只做「填充 + 深字」—— 浅底上当文字/链接会对比度不足，
     所以文字链接改用压深一档的金 #A9680F。
   其余一律安静。朱红只留给印章与警示，绝不拿来做装饰。

   引入方式：放在页面自己 <style> 之后，作为统一覆盖层。
   注意：本文件不碰 SVG 内的 fill —— 品牌印章色值不随主题变化（深底印章在浅底上
   像盖在纸上的印，反而更好看）。
   ============================================================================ */

:root{
  /* ---------- 层（暖粉杏浅色系） ---------- */
  --bg:        #FDF6EE;   /* 页面底：暖粉杏白 */
  --bg-2:      #F8ECDF;   /* 次级底：区块交替、页脚、顶栏 */
  --surface:   #FFFDFA;   /* 卡片面：近白，浮在暖底上 */
  --surface-2: #FBF2E9;   /* 悬停 / 嵌套面 */
  --surface-3: #F4E7DA;   /* 输入框 / 选中态 */

  /* ---------- 墨（暖墨黑，绝不用浅色；纯黑会与暖底打架，用暖褐黑） ---------- */
  --ink:   #33271D;
  --ink-2: #6F5E4D;
  --ink-3: #8C7A66;
  --ink-4: #B0A08C;

  /* ---------- 金（琥珀金 = 品牌主色） ----------
     浅底上亮金当文字看不清，所以分两种：
       --gold   仅用于「填充 + 深字」（按钮、印章、徽章底）
       --link   压深一档的金，专给文字链接 / 强调字，浅底上对比度足够 */
  --gold:      #EFB23A;
  --gold-2:    #E0A02A;
  --gold-3:    #F4C95A;
  --gold-soft: rgba(224,160,42,.16);
  --gold-line: rgba(224,160,42,.32);
  --link:      #A9680F;   /* 文字链接用压深金 */
  --link-2:    #7A540C;   /* 链接 hover 更深 */

  /* ---------- 印（朱红，仅印章与警示，保持不变） ---------- */
  --seal: #C0392B;

  /* ---------- 线（暖米棕描边） ---------- */
  --line:   #EAD9C8;
  --line-2: #DCC7B0;

  /* ---------- 状态（浅底适配；红涨绿跌遵循中国市场习惯） ---------- */
  --ok:   #2E9E6B;
  --warn: #E0A02A;
  --err:  #C0392B;
  --up:   #C0392B;
  --down: #2E9E6B;

  /* ---------- 形 ---------- */
  --r-sm: 8px;  --r: 10px;  --r-md: 12px;  --r-lg: 16px;  --r-xl: 24px;
  --nav-h: 60px;
  --sh-1: 0 1px 2px rgba(51,39,29,.06);
  --sh-2: 0 8px 24px rgba(51,39,29,.10);
  --sh-3: 0 18px 48px rgba(51,39,29,.14);

  /* ---------- 字体 ---------- */
  --font: "PingFang SC", "HarmonyOS Sans SC", "Source Han Sans SC",
          "Microsoft YaHei", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: ui-monospace, "SFMono-Regular", "JetBrains Mono", Consolas,
               "Liberation Mono", Menlo, monospace;

  /* ==========================================================================
     旧变量名兜底别名
     --------------------------------------------------------------------------
     全站 43 个页面历史上用过 52 个变量名、四套命名体系。下面的别名把
     它们全部指向新体系 —— 只要页面是用 var() 写的，引用本文件后自动换肤，
     不必逐页改样式。浅色化的本质仍是「反相」：
       深面阶 → 浅底阶      浅字阶 → 深字阶      橙色阶 → 金色阶
     ========================================================================== */

  /* 通用三件套（工具页 / 场景页 / 内容页） */
  --panel:      var(--surface);
  --panel2:     var(--surface-2);
  --card:       var(--surface);
  --txt:        var(--ink);
  --txt-2:      var(--ink-2);
  --sub:        var(--ink-2);
  --muted:      var(--ink-2);
  --dim:        var(--ink-3);
  --chip:       var(--surface-2);
  --border:     var(--line);
  --line2:      var(--line-2);

  /* 品牌 / 强调（琥珀 → 金） */
  --brand:       var(--gold);
  --brand-2:     var(--gold-2);
  --brand-light: var(--gold-soft);
  --amber:       var(--gold);
  --amber-2:     var(--gold);
  --amber-deep:  var(--gold-2);
  --amber-soft:  var(--gold-soft);
  --amber-50:    rgba(224,160,42,.10);
  --amber-100:   rgba(224,160,42,.16);
  --amber-300:   var(--gold);
  --amber-500:   var(--gold);
  --amber-600:   var(--gold-2);
  --amber-700:   var(--gold-2);
  --gold-strong: var(--gold-2);

  /* 层级阶（浅色下：由浅到深的自然梯度） */
  --ink-50:  var(--surface);
  --ink-100: var(--surface-2);
  --ink-200: var(--surface-3);
  --ink-300: var(--line);
  --ink-400: var(--line-2);
  --ink-500: var(--ink-4);
  --ink-600: var(--ink-3);
  --ink-700: var(--ink-2);
  --ink-800: #5A4B3C;
  --ink-900: var(--ink);

  --blue:      #6EA8FE;
  --seal-red:  var(--seal);
  --radius:    var(--r-md);
  --r-sm-alt:  var(--r-sm);
}

/* ============================================================================
   基础
   ============================================================================ */
html{ scroll-behavior:smooth; }
body{
  /* 【2026-10-06 顶栏归零兜底】浏览器 UA 默认给 body 留 8px 外边距，页面若忘了
     重置，整页（含吸顶导航）会整体下移 8px —— 表现为「这页的顶栏比别的页低一截」。
     实测 AI 创作存证 /ai、语料授权中心 /data、创作者入驻 /creator 三页曾中招。
     这里收进公共样式表当唯一兜底：各页自己的 reset 若存在会先清零，这里只是保险，
     对已重置的页面零影响（值同为 0）。新增页面不必再记得抄这行。 */
  margin: 0;
  background: var(--bg) !important;
  color: var(--ink);
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* 【2026-10-01 移动端安全区域】iPhone 的 Home Indicator / 圆角会压住页面最底部
     的按钮与版权行。env() 在桌面浏览器与安卓上恒为 0px，零副作用；
     生效前提是 <meta name="viewport"> 带 viewport-fit=cover
     （由 _build-seo.js 全站统一注入，见该文件 viewport 归一化段）。 */
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
/* 文字链接：浅底上用压深金，保证对比度；绝不用亮金当文字 */
a{ color: var(--link); text-decoration: none; }
a:hover{ color: var(--link-2); }

/* 数字与编号：存证产品满屏指纹、凭证号、金额，等宽 + 表格数字才对齐得整齐 */
.mono, code, kbd, samp, pre{ font-family: var(--font-mono); }
.mono{ font-variant-numeric: tabular-nums; }

::selection{ background: rgba(224,160,42,.22); color: var(--ink); }

/* 焦点环：键盘用户必须看得见（浅底上深金描边最清晰） */
:focus-visible{
  outline: 2px solid var(--link);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

/* 滚动条：浅底上用暖棕，与页面协调 */
*{ scrollbar-color: var(--line-2) var(--bg); scrollbar-width: thin; }
*::-webkit-scrollbar{ width: 10px; height: 10px; }
*::-webkit-scrollbar-track{ background: var(--bg); }
*::-webkit-scrollbar-thumb{ background: var(--line-2); border-radius: 6px;
                            border: 2px solid var(--bg); }
*::-webkit-scrollbar-thumb:hover{ background: var(--ink-4); }

/* ============================================================================
   排版 —— 浅底上可用正常字重：标题 600 拉层级，靠字号与颜色，不靠浅灰。
   ============================================================================ */
h1, h2, h3, h4{ color: var(--ink); font-weight: 600; letter-spacing: -.01em; }
h1{ font-size: 34px; line-height: 1.25; margin: 0 0 12px; }
h2{ font-size: 24px; line-height: 1.3;  margin: 0 0 10px; }
h3{ font-size: 18px; line-height: 1.4;  margin: 0 0 8px; }
h4{ font-size: 15px; line-height: 1.45; margin: 0 0 6px; }
p{ line-height: 1.7; }
strong, b{ font-weight: 600; color: var(--ink); }
hr{ border: 0; border-top: 1px solid var(--line); margin: 24px 0; }

/* ============================================================================
   通用组件
   ============================================================================ */

/* 按钮：金只在主 CTA 用力（金底 + 深字），次级一律描边 */
.g-btn{
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 9px 18px; border-radius: var(--r-sm); border: 1px solid var(--line-2);
  background: transparent; color: var(--ink);
  font-family: inherit; font-size: 14px; font-weight: 500;
  cursor: pointer; transition: background .15s, border-color .15s, color .15s;
  text-decoration: none; white-space: nowrap;
}
.g-btn:hover{ background: var(--surface-2); border-color: var(--ink-4); color: var(--ink); }
.g-btn--primary{
  background: var(--gold); border-color: var(--gold); color: #1A1204;
}
.g-btn--primary:hover{ background: var(--gold-3); border-color: var(--gold-3); color: #1A1204; }
.g-btn--ghost{ border-color: transparent; color: var(--ink-2); }
.g-btn--ghost:hover{ background: var(--surface-2); color: var(--ink); }

/* 卡片 */
.g-card{
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-md); padding: 20px;
}

/* 标签 */
.g-chip{
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 10px; border-radius: 999px; font-size: 12px;
  background: var(--surface-2); color: var(--ink-2);
  border: 1px solid var(--line);
}
.g-chip--gold{
  background: var(--gold-soft); color: var(--link);
  border-color: var(--gold-line);
}

/* 表单控件：浅底上默认白输入框是最常见的「没改干净」破绽，这里统一暖米底深字 */
input, select, textarea{
  font-family: inherit; color: var(--ink);
  background: var(--surface-3); border: 1px solid var(--line-2);
  border-radius: var(--r-sm); padding: 9px 12px;
}
input::placeholder, textarea::placeholder{ color: var(--ink-3); }
input:focus, select:focus, textarea:focus{
  outline: none; border-color: var(--gold-2);
  box-shadow: 0 0 0 3px rgba(224,160,42,.16);
}
input[type=checkbox], input[type=radio]{ accent-color: var(--gold-2); }
select option{ background: var(--surface-3); color: var(--ink); }
button{ font-family: inherit; }

/* ============================================================================
   覆盖旧组件 —— 各页历史类名的浅色适配。
   只做「配色与形态」，不动布局尺寸，避免影响已通过冒烟测试的交互。
   ============================================================================ */

/* 旧门户条（_add-portal-nav.js 注入的那条深蓝金渐变条）：
   并入统一金色体系，浅色版 */
.portal-bar{
  background: var(--bg-2) !important;
  border-bottom: 1px solid var(--line) !important;
}
/* 【2026-09-26 全站导航统一吸顶】工具枢纽页的顶栏是 portal-bar */
.portal-bar{ position: sticky; top: 0; z-index: 60; }

/* ==================================================================
   【2026-09-26 全站导航统一】子页顶栏 = 主页同款
   章面品牌(→/) + 菜单 + 「开始固化」CTA + 语言切换位。
   作用域 .u-nav：只作用于 _nav-unify.js 注入的导航，绝不触碰
   home.html 自带的导航样式（theme.css 在内联样式之后加载，
   不加作用域会反向覆盖主页调好的导航）。
   ================================================================== */
.u-nav{ display: block; }   /* 部分页面自己的 .nav 是 display:flex，会让导航内层不撑满 */
/* 【2026-09-28】钉死顶栏字体栈：各页 body 字体栈不一样（tool.css / me.html / amber.html
   各写各的）， fallback 命中的字不同会让「AmberVouch」「琥珀印」宽度差出 2~3px，
   整排按钮就跟着挪。顶栏自己带一份固定字体，跟页面怎么写无关。 */
.u-nav{
  font-family: "PingFang SC", "HarmonyOS Sans SC", "Source Han Sans SC",
               "Microsoft YaHei", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  /* 【2026-10-18】行高也钉死，和字体栈同理。
     各页 body 行高各写各的（实测：首页 1.65 / ai.html normal / amber 25.5px /
     bloggers 28px / 工作台 19.5px），行高会被导航项继承：
       .nav-links a 高度 = 6×2 padding + 2px 下划线 + 13.5×行高
    于是同一条顶栏在首页是 36.3px、ai 是 32px、bloggers 是 37.6px，
    CTA 跟着差 4px，视觉上就是「二级页导航比首页矮一截/字更挤」。
     行高用无单位数字（1.65）而不是 26.4px：无单位值会按各元素自己的
     font-size 重算（13.5×1.65=22.275px），与首页逐像素一致；
     写成固定长度则会把 13.5px 的导航项撑成 26.4px 行盒。 */
  line-height: 1.65;
  /* 2026-10-18：字号/颜色也钉死。
     首页 body 16px/#33271D；二级页 body 有 15px、13px，颜色有 #2A211B，
     导航容器/语言选择器/品牌文字会跟着继承，实测差一档。
     导航是跨页共享件，不吃页面 body 的排版令牌。 */
  font-size: 16px;
  color: #33271D;
}
/* 法律页曾自带 .brand{font-weight:700} / .nav-links{font-size:13.5px}，
   视觉上品牌字重与菜单容器字号仍与首页不同；导航内部统一回首页基准。 */
.u-nav .brand{ font-weight: 400; }
.u-nav .nav-links{ font-size: 16px; }
.u-nav .nav-in{
  display: flex; align-items: center; gap: 8px 18px; flex-wrap: wrap;
  /* 【2026-10-18】顶栏内层高度钉死 60px，不再吃 --nav-h。
     24 个工具/内容页底部有一段 syncH()：量 .u-nav 的外高（含 1px 下边框=61）
     写回 html 的 --nav-h；而 .nav-in 的 min-height 又读 --nav-h
     → 61 写进去，外高变 62，再写 62…… 实测在 63px 处才收敛。
     首页没有这段脚本，所以首页 61px、这些页 63px，正好差用户看到的「矮一截」。
     内层固定 60 后，外高恒为 61，syncH 写回 61 也不会再自增；
     窄屏内容变多时 min-height 不封顶，仍会自然撑高。 */
  min-height: 60px;
  max-width: 1400px; margin: 0 auto; padding: 0 20px;
  box-sizing: border-box;
}
/* 【2026-10-10｜导航统一：这里曾按页设导航宽度，已撤销 —— 记下为什么】
   2026-10-08 我在这一带加过 `[data-nav-w="<正文宽度>"] .nav-in{max-width:...}`，思路是
   "让导航与正文同宽、左右对齐"（因为 /pricing 等页的导航比正文宽 400~520px、logo 与正文
   左边缘差最多 250px）。但落地后用户**两次**反馈"首页和其他页导航不一样"，实测发现：

     · 首页导航缺 `u-nav` 类，吃不到 `.u-nav .nav-links{margin-left:0}`，
       菜单被基础规则 `margin-left:auto` 推到最右 → 与全站排布不同；
     · 导航容器一按页变窄，`.nav-cta` 的 `margin-left:auto` 分到的剩余空间就变，
       于是「菜单 → CTA」的间距在 1400 容器上是 236px、在 960 容器上只有 21px。

   两件事互斥：导航内容本身约 894px，容器一窄，间距必然变。
   用户要的是"导航看起来一样"，所以最终选择**统一容器宽度 1400 + 给首页补 u-nav**，
   并撤销本处所有按页宽度规则（`data-nav-w` 属性也已从 7 个页面移除）。
   代价：窄正文页的导航比正文宽、不与其左右对齐 —— 有意取舍，见 _audit/verify-nav-all.js
   顶部的口径说明。若要两者兼得，只能改导航内容本身（缩品牌/菜单字号，见遗留项 ②）。 */

/* 【2026-09-28 修「按钮坐标各页不一致」】
   原来只有 margin-left:auto 把菜单推右，而 .u-nav .nav-cta 也是 margin-left:auto ——
   两个 auto 平分剩余空间，菜单组的位置就随「CTA 文字长短 / 语言选择器是否渲染」漂移，
   实测各页首项 x 从 311 到 516 不等（差 205px），切页时按钮整排跳动。
   改成：菜单锚定在 logo 右侧固定位置（margin-left 归零、左对齐），
   只有 CTA 与语言选择器靠右 —— 菜单按钮在哪个页面都落在同一个 x 上。 */
.u-nav .nav-links{ display: flex; align-items: center; gap: 2px 16px; flex-wrap: wrap;
  margin-left: 0; justify-content: flex-start; }
.u-nav .nav-links .mk{
  font-size: 13.5px; color: var(--ink-2); text-decoration: none;
  padding: 6px 2px; border-bottom: 2px solid transparent; white-space: nowrap;
}
.u-nav .nav-links .mk:hover{ color: var(--ink); }
/* 【2026-09-28】当前页高亮：金色底片 + 下划线已足够醒目，**不再加粗** ——
   font-weight 600 会让那一项变宽 2~3px，把它后面的按钮整体挤过去，
   正是用户反馈的"切页时按钮轻微跳动"。 */
.u-nav .nav-links .mk.on{ color: var(--ink); border-bottom-color: var(--gold); }
.u-nav .nav-cta{
  margin-left: auto; padding: 8px 16px; border-radius: 9px;
  font-size: 13.5px; font-weight: 600; background: var(--gold);
  color: #1A1204; text-decoration: none; white-space: nowrap;
}
.u-nav .nav-cta:hover{ filter: brightness(1.06); }
/* 【2026-09-28】品牌区在 u-nav 作用域里**再钉一遍**：
   me.html / edu.html 等页面自己写了 .nav .brand .xxx（特异性 (0,2,1)/(0,2,0)），
   压过上面 .brand .xxx 的 (0,1,0)/(0,2,0)，导致 logo 宽度各页差 2~3px、
   整排按钮跟着挪。加 .u-nav 前缀拉到 (0,3,0) 就稳了。
   home.html 的导航不是 u-nav，不受这里影响，保留它自己调好的样式。 */
.u-nav .brand{ display: inline-flex; align-items: center; gap: 9px; text-decoration: none; }
.u-nav .brand .mark{ width: 30px; height: 30px; flex: 0 0 30px; display: inline-flex; }
.u-nav .brand .mark svg{ width: 100%; height: 100%; display: block; }
.u-nav .brand .nm{ font-size: 16px; font-weight: 600; letter-spacing: -.01em; white-space: nowrap; }
.u-nav .brand .nm i{ font-style: normal; color: var(--link); }
.u-nav .brand .cn{ display: inline-block; font-family: "KaiTi","STKaiti","楷体",serif;
  font-weight: 700; font-size: 22px; letter-spacing: 4px; line-height: 1.25;
  color: #FFFFFF !important; white-space: nowrap;
  background: linear-gradient(160deg,#D64A37,#C0392B 60%,#A93226);
  padding: 6px 12px; border-radius: 7px; transform: rotate(-2deg);
  box-shadow: 0 3px 12px rgba(192,57,43,.38), inset 0 0 0 1.5px rgba(255,244,214,.55); }
.u-nav .brand .cn em{ font-style: normal; color: #F5B942 !important; }
@media (max-width: 760px){
  .u-nav .nav-in{ padding: 10px 16px; }
  .u-nav .nav-cta{ margin-left: 0; }
}
.portal-bar .pb-brand{ color: var(--ink); }
.portal-bar .pb-nm i{ color: var(--link); }
.portal-bar .pb-sep{ color: var(--ink-4); }
.portal-bar .pb-cur{ color: var(--ink-3); }
.portal-bar .pb-links a{ color: var(--ink-2); }
.portal-bar .pb-links a:hover{ background: var(--surface-2); color: var(--ink); }
.portal-bar .pb-links a.pb-cta{
  background: var(--gold) !important; color: #1A1204 !important;
}
.portal-bar .pb-mark{ background: transparent !important; }

/* 顶栏与导航 */
header{
  background: var(--bg-2) !important; color: var(--ink) !important;
  border-bottom: 1px solid var(--line) !important; box-shadow: none !important;
}
nav{
  background: var(--bg-2) !important;
  border-bottom: 1px solid var(--line) !important;
}
.tab{ color: var(--ink-2) !important; }
.tab:hover{ background: var(--surface-2) !important; color: var(--ink) !important; }
.tab.on{ background: var(--gold) !important; color: #1A1204 !important;
         border-color: var(--gold) !important; }
.tabout{ border-color: var(--line-2) !important; color: var(--ink-3) !important; }
.tabout:hover{ background: var(--surface-2) !important; color: var(--ink) !important;
               border-color: var(--gold-2) !important; }
.cn-top{ color: var(--ink) !important; }
.cn-top:hover, .cn-item.open .cn-top{ background: var(--gold-soft) !important;
                                      border-color: var(--line-2) !important; }
.cn-menu{ background: var(--surface) !important; border-color: var(--line) !important;
          box-shadow: var(--sh-2) !important; }
.cn-menu .tab, .cn-menu a{ color: var(--ink-2) !important; }
.cn-menu .tab:hover, .cn-menu a:hover{ background: var(--gold) !important;
                                       color: #1A1204 !important; }
.cn-menu .tab.on{ background: var(--gold) !important; color: #1A1204 !important; }
.tabs .tcat{ color: var(--ink-3) !important; }
.tabs .tcat::after{ background: var(--line-2) !important; }

/* 面板 / 卡片 / 拖拽区 */
.card{
  background: var(--surface) !important; border-color: var(--line) !important;
  border-radius: var(--r-md) !important;
}
.card h2{ color: var(--ink) !important; }
.card .desc{ color: var(--ink-2) !important; }
.drop{
  background: var(--surface-2) !important; border-color: var(--line-2) !important;
  border-radius: var(--r-md) !important;
}
.drop:hover, .drop.active{
  border-color: var(--gold-2) !important; background: var(--gold-soft) !important;
}
.drop .big{ color: var(--ink) !important; }
.drop .small{ color: var(--ink-2) !important; }

/* 页脚：统一为暖一档的收束，不用刺眼的白 */
footer{
  background: var(--bg-2) !important; color: var(--ink-2) !important;
  border-top: 1px solid var(--line) !important;
}
footer a{ color: var(--ink-2) !important; }
footer a:hover{ color: var(--link) !important; }

/* 表格 */
table{ border-color: var(--line) !important; }
th{ background: var(--surface-2) !important; color: var(--ink) !important; }
td{ border-color: var(--line) !important; color: var(--ink-2); }

/* ============================================================================
   统一顶栏组件
   ----------------------------------------------------------------------------
   全站曾并存五种顶栏：完整菜单 / 印章+Vouch / 「返回首页」孤链 /
   工具页门户条 / 内容页双层面包屑。这里把顶栏收敛成一套组件：
     .top / .nav / header  → 同一个暖底、同一条金线、同一个高度
     .nav-links            → 同一套菜单（各页历史类名不同，统一到这里）
   新页面直接复用这几个类即可，不要再自己写一份。
   ============================================================================ */
.top, .nav, header{
  background: var(--bg-2) !important;
  border-bottom: 1px solid var(--line) !important;
  box-shadow: none !important;
}
/* 【2026-09-26 全站导航统一吸顶】用户要求：顶栏固定，首页入口恒在最左。
   此前只有 home/analytics/me/verify/edu 有 sticky，market/amber/services 等 10+ 页
   顶栏是 static，滚动即丢导航。z-index 60 低于各页弹窗（90+），不遮模态。 */
.top, .nav, header{
  position: sticky;
  top: 0;
  z-index: 60;
}
/* 【2026-09-27 修复「顶栏被自己的标题栏压住」】
   全站统一顶栏 .u-nav 之后，很多页还保留着自己的一条 <header>（工具名 + 分类 tabs）。
   上面那条通用规则把 header 也设成了 sticky top:0 —— 于是两条都吸在视口顶部同一位置，
   后出现的 <header> 把导航整个盖住。实测 /tools/ 及 19 个工具/内容页都中招，
   表现就是「往下滚一下，顶部导航突然没了」。
   这些页的 <header> 无一例外都是 .u-nav 的紧随兄弟（已逐页核对），所以这里按结构判定：
   凡是排在统一顶栏之后的页级标题栏，一律不再吸顶，随页面滚走 —— 吸顶只留给全站导航。
   与琥珀市场（只有一条顶栏）的行为对齐。 */
.u-nav ~ header{ position: static !important; }
/* 【2026-10-05 修「页头说明文字被分类横条遮挡」】
   原为 height: var(--nav-h, 60px) —— 把工具页 .hd 钉死在 60px。
   但 .hd 里是「主标题 + 说明副标题」两行（17px + 12px，行高 1.75 → 实测 53px），
   加上容器自带的上下 padding（14+14 或 18+14），内容总高 81~84px，
   被 60px 的框子压出容器外 —— 溢出的那部分正好落进紧随其后的分类横条
   （.hub-catnav-bar，z-index:40）底下，表现为「说明文字下半截被挡掉」。
   实测 9 个页面中招（严重 19px ×4 / 轻微 4px ×5）。
   改 min-height：内容不足 60px 时行为与原来完全一致（首页顶栏等不受影响），
   内容超出的页面则自动撑高，不再溢出。 */
.top-in, .nav-in, .hd{ min-height: var(--nav-h, 60px); }
@media (max-width: 640px){
  .top-in, .nav-in, .hd{ height: auto; min-height: var(--nav-h, 60px); padding: 10px 0; }
}

.nav-links{
  display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end;
  gap: 2px 4px; margin-left: auto; min-width: 0;
}
.nav-links a{
  padding: 7px 13px; border-radius: 8px; font-size: 14px;
  color: var(--ink-2) !important; text-decoration: none;
  transition: .15s; white-space: nowrap;
}
.nav-links a:hover{
  color: var(--ink) !important; background: rgba(51,39,29,.05) !important;
}
.nav-links a.on, .nav-links a[aria-current="page"]{
  color: var(--link) !important; background: var(--gold-soft) !important;
}
@media (max-width: 900px){
  .nav-links{ justify-content: flex-start; }
  .nav-links a{ padding: 6px 9px; font-size: 13px; }
}
/* 中间档：这些页面顶栏元素多（品牌 + 菜单 + 语言选择器 + 返回上级），
   1280 下刚好差一点放不下，菜单会自己折成两行 —— 视觉上像导航坏了。
   收紧内边距比砍菜单项好：入口一个都不少。
   注意别顺手把品牌的中文名藏掉 —— 冒烟测试会断言「琥珀印」这三字单行可见。 */
@media (max-width: 1460px){
  .nav-links a{ padding: 6px 9px; font-size: 13.5px; }
}

/* 品牌区：印章 + 中英文名，全站同一套排布 */
.brand{ display: inline-flex; align-items: center; gap: 9px; text-decoration: none;
        color: var(--ink) !important; }
.brand:hover{ color: var(--ink) !important; }
.brand .mark{ width: 30px; height: 30px; flex: 0 0 30px; display: inline-flex; }
.brand .mark svg{ width: 100%; height: 100%; display: block; }
.brand .nm{ font-size: 16px; font-weight: 600; letter-spacing: -.01em; white-space: nowrap; }
.brand .nm i{ font-style: normal; color: var(--link); }
/* 品牌字标「琥珀印」：朱红章面（方案 B）——「琥珀」琥珀金字、「印」反白。
   注意：这里必须用章面完整样式，theme.css 在各页内联样式之后加载，会覆盖页面里的同名规则。 */
.brand .cn{ display: inline-block; font-family: "KaiTi","STKaiti","楷体",serif;
  font-weight: 700; font-size: 22px; letter-spacing: 4px; line-height: 1.25;
  color: #FFFFFF !important; white-space: nowrap;
  background: linear-gradient(160deg,#D64A37,#C0392B 60%,#A93226);
  padding: 6px 12px; border-radius: 7px; transform: rotate(-2deg);
  box-shadow: 0 3px 12px rgba(192,57,43,.38), inset 0 0 0 1.5px rgba(255,244,214,.55); }
.brand .cn em{ font-style: normal; color: #F5B942 !important; }
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .brand .cn em{ background: linear-gradient(180deg,#FFE9B8,#F5B942 50%,#E0A02A);
    -webkit-background-clip: text; background-clip: text; color: transparent !important; } }

/* 语言切换按钮统一排到顶栏最右：各页的 #langPicker 都在 flex 容器里
   （琥珀市场/版权中心等的右侧按钮组是 inline-flex），order:99 让它永远排到同组最后，
   不需要逐页挪 DOM（顺序变了也不影响 bindPicker 的 JS 绑定）。
   margin-left:auto 兜底：若在窄屏下被挤到单独一行，也能自动贴住右侧边缘。 */
/* 【2026-09-28】给语言选择器一个**固定宽度**的槽位：
   ① 有的页（如琥珀课堂）没接 i18n.js，选择器是空的、宽度为 0，会把 CTA 顶到最右；
   ② 有的页自己写了 #langSel{max-width:130px}（琥珀市场），宽度又不一样。
   固定宽度后 CTA 的 x 在所有页面都一样；里面那个 select 也钉死宽度，
   免得被 tool.css 等页面级样式改了内边距又差出几像素。 */
#langPicker{ order: 99; margin-left: auto; width: 100px; min-width: 100px; }
#langPicker select, #langPicker #langSel{ width: 100%; max-width: 100%; }

/* 顶栏主 CTA：金底配深字（浅底上金底深字最稳） */
.nav-cta{
  background: var(--gold) !important; border-color: var(--gold) !important;
  color: #1A1204 !important; font-weight: 600 !important;
}
.nav-cta:hover{
  background: var(--gold-3) !important; border-color: var(--gold-3) !important;
  color: #1A1204 !important; filter: none !important;
}

/* 点击态下划线（各页历史做法不一：有的用 border-bottom，有的用伪元素） */
.nav-links a.on, .nav-links a.active{ border-bottom-color: var(--gold-2) !important; }

/* 徽章与状态：金色只给「已验证 / 已固化」这类真正重要的状态 */
.pill{ background: var(--surface-2) !important; color: var(--ink-2) !important; }

/* ============================================================================
   主按钮统一 —— 金底必须配深字
   ----------------------------------------------------------------------------
   各页历史类名不同（.btn-p / .btn.pri / .btn-buy / .btn-primary），但语义相同：
   页面最重要的那一个动作。统一成「琥珀金底 + 深字」，落实「金只在主 CTA 用力」。
   ============================================================================ */
.btn-p, .btn-pri, .btn-buy, .btn-primary, .btn.pri, button.buy,
a.btn-p, button.btn-p{
  background: var(--gold) !important;
  border-color: var(--gold) !important;
  color: #1A1204 !important;
}
.btn-p:hover, .btn-pri:hover, .btn-buy:hover, .btn-primary:hover,
.btn.pri:hover, button.buy:hover{
  background: var(--gold-3) !important;
  border-color: var(--gold-3) !important;
  color: #1A1204 !important;
}
.btn-p:disabled, .btn-pri:disabled, .btn-buy:disabled,
.btn.pri:disabled, button.buy:disabled{
  opacity: .55; cursor: not-allowed;
}

/* 次级按钮：描边式，与主按钮拉开层级 */
.btn-sec, .btn.sec, .btn-ghost{
  background: transparent !important;
  border-color: var(--line-2) !important;
  color: var(--ink) !important;
}
.btn-sec:hover, .btn.sec:hover, .btn-ghost:hover{
  background: var(--surface-2) !important;
  border-color: var(--ink-4) !important;
}

/* 尊重系统的减少动效设置 */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important; scroll-behavior: auto !important;
  }
}

/* ============================================================================
   页脚法律条款导航（暖蜜桃米 · 浅色）
   ----------------------------------------------------------------------------
   挂在全站页脚，统一法律入口。链接用压深金 --link 保证浅底可读；
   即便旧 theme.css 缓存未刷新，footer a 仍有 --ink-2 兜底，链接始终可读。
   ============================================================================ */
.legal-nav{
  display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: center;
  margin-top: 12px; font-size: 13px; line-height: 1.8;
}
.legal-nav .ln-t{ font-weight: 600; color: var(--ink-2) !important; }
.legal-nav a{
  color: var(--link) !important; text-decoration: none; padding: 1px 0;
}
.legal-nav a:hover{ text-decoration: underline; }

/* 条款费率表（trade-rules 等分档费率展示，浅色暖调） */
.rate{
  width: 100%; border-collapse: collapse; margin: 14px 0 8px;
  font-size: 14px; background: var(--surface); border: 1px solid var(--line);
  border-radius: 12px; overflow: hidden;
}
.rate th, .rate td{
  padding: 11px 14px; text-align: left; border-bottom: 1px solid var(--line);
}
.rate thead th{ background: var(--bg-2); color: var(--ink); font-weight: 600; }
.rate tbody tr:nth-child(even){ background: var(--surface-2); }
.rate tbody tr:last-child td{ border-bottom: none; }
.rate td b{ color: var(--ink); }

/* ============================================================================
   【2026-10-01 移动端可达性】触屏点击区 ≥ 44px
   实测（390×844 Chromium）：首页 127 个可点元素里 91 个高度 < 44px，
   统一导航的菜单项只有 72×34 —— 低于 Apple HIG / WCAG 2.5.8 的 44×44 下限，
   拇指点按容易误触到相邻项。

   实现方式：**用绝对定位的伪元素撑热区，不动元素自身的盒模型**。
   原因是 .u-nav .nav-links .mk.on 的金色下划线靠 border-bottom 画在盒子底边，
   一旦给元素本体加 min-height:44px，下划线会往下掉约 14px、与文字脱开，
   视觉上就不是"当前页"了。伪元素方案下划线位置分毫不动。

   作用域：只挂在 .u-nav 作用域内。home.html / legal.html / evidence-intl.html
   用的是另一套 .nav-links（不在 u-nav 体系内），其中 home.html 已把
   .nav-links a.mk::after 用作下划线本体，全局加 ::after 会覆盖它。

   生效条件：pointer:coarse —— 只有触屏设备吃这套，桌面端（含窄窗口）
   布局与视觉零变化，不引入任何回归面。 */
@media (pointer: coarse){
  .u-nav .nav-links .mk,
  .u-nav .nav-links a,
  .u-nav .nav-cta{
    position: relative;
  }
  /* 高度撑到 44px；水平方向左右各外扩 8px，保证短菜单项（如「教育」）宽度也够。
     u-nav 菜单项间距 16px，各外扩 8px 后仍留 0px 空隙但不重叠。 */
  .u-nav .nav-links .mk::after,
  .u-nav .nav-links a::after,
  .u-nav .nav-cta::after{
    content: "";
    position: absolute;
    left: -8px; right: -8px;
    top: 50%; height: 44px;
    transform: translateY(-50%);
  }
}

/* ==== 板块页轮播宣传栏（2026-10-01）==== */
.ad-carousel{ position:relative; text-align:center; overflow:hidden; min-height:196px;
  background:var(--gold-soft,#faf3e2); border-bottom:1px solid var(--line,#e8e2d4); padding:40px 0 34px; }
.ac-slide{ display:none; max-width:860px; margin:0 auto; padding:0 64px; }
.ac-slide.is-active{ display:block; animation:acIn .45s ease; }
@keyframes acIn{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:none; } }
.ac-chip{ display:inline-flex; align-items:center; gap:8px; font-size:13px; color:var(--gold-text,#8a5a00);
  border:1px solid var(--gold-2,#e0c070); border-radius:999px; padding:3px 14px; background:var(--surface,#fff); }
.ac-chip::before{ content:''; width:7px; height:7px; border-radius:50%; background:var(--gold,#d99a1b); }
.ac-h1{ font-size:clamp(20px,3.4vw,28px); line-height:1.35; margin:14px 0 8px; color:var(--ink,#2b2113); font-weight:650; }
.ac-lede{ font-size:15px; color:var(--ink-2,#6b5a3e); margin:0; }
.ac-more{ color:var(--gold-text,#8a5a00); font-weight:600; text-decoration:none; white-space:nowrap; }
.ac-more:hover{ text-decoration:underline; }
.ac-arrow{ position:absolute; top:46%; transform:translateY(-50%); width:34px; height:34px; border-radius:50%;
  border:1px solid var(--line,#ddd); background:var(--surface,#fff); cursor:pointer; font-size:18px;
  color:var(--gold-text,#8a5a00); line-height:1; z-index:2; }
.ac-arrow:hover{ background:var(--gold-soft,#f5e9c9); }
.ac-arrow.prev{ left:16px; } .ac-arrow.next{ right:16px; }
.ac-dots{ position:absolute; bottom:12px; left:0; right:0; display:flex; gap:6px; justify-content:center; }
.ac-dots i{ width:7px; height:7px; border-radius:50%; background:var(--line-2,#dcc48f); cursor:pointer; transition:background .2s; }
.ac-dots i.on{ background:var(--gold-2,#b47f0e); }
@media (max-width:720px){ .ac-arrow{ display:none; } .ac-slide{ padding:0 22px; } }
/* ================================================================
   【2026-10-02 全站导航升级】二级页下拉菜单样式
   从 home.html 内联样式同步。两份副本当前逐字等值 —— theme.css 在
   内联样式之后加载，等值覆盖无视觉差异；改首页导航样式后必须同步
   这里，否则会反向覆盖首页。只服务 i18n.js 注入的完整导航
   （home.html 导航不带 .u-nav，下拉规则对其等值无害）。
   ================================================================ */
/* —— 导航二级下拉菜单（hover / 键盘 focus 自动弹出，参考 Element UI popup 结构）—— */
.nav-item{position:relative}
.nav-top{display:inline-flex;align-items:center;gap:5px;cursor:pointer}
.caret{width:0;height:0;border-left:4px solid transparent;border-right:4px solid transparent;
  border-top:5px solid currentColor;opacity:.5;transition:transform .2s ease}
.nav-item:hover .caret,.nav-item:focus-within .caret,.nav-item.is-open .caret{transform:rotate(180deg);opacity:.85}

.submenu{position:absolute;top:calc(100% + 6px);left:50%;min-width:300px;
  transform:translateX(-50%) translateY(-6px);
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  box-shadow:var(--sh-3);padding:10px;
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .18s ease,transform .18s ease,visibility .18s;
  z-index:80}
/* 热区桥接：鼠标从按钮斜移到菜单时不会闪断 */
.submenu::before{content:"";position:absolute;left:0;right:0;top:-10px;height:10px}
.nav-item:hover .submenu,.nav-item:focus-within .submenu,.nav-item.is-open .submenu{
  opacity:1;visibility:visible;transform:translateX(-50%) translateY(0);pointer-events:auto}

.submenu-in{display:grid;gap:2px}
.submenu.wide{min-width:700px}
.submenu.wide .submenu-in{grid-template-columns:1fr 1fr}
/* 六大分类分组：每类一个带框的方块 */
.submenu.wide .submenu-in.cats{grid-template-columns:repeat(3,1fr);gap:10px}
.catbox{border:1px solid var(--line);border-radius:10px;padding:6px 8px 8px;background:var(--surface)}
.catbox .cb-hd{display:flex;align-items:center;gap:6px;padding:4px 6px 7px;margin-bottom:4px;
  border-bottom:1px solid var(--line);border-radius:6px}
.catbox .cb-hd b{font-size:13px;font-weight:700;color:var(--ink-900)}
.catbox .cb-ic{font-size:15px;line-height:1}
.catbox a[role=menuitem]{padding:5px 8px;font-size:13px;color:var(--ink-700);border-radius:6px;
  display:block;text-decoration:none;transition:background .16s ease;line-height:1.5}
.catbox a[role=menuitem]:hover,.catbox a[role=menuitem]:focus-visible{background:var(--amber-50);color:var(--amber-700)}
.submenu-foot{display:grid;grid-template-columns:1fr auto;gap:6px;align-items:center;
  border-top:1px solid var(--line);margin-top:10px;padding-top:6px}
.submenu-foot a{border-top:0!important;margin-top:0!important;padding-top:9px!important}
.submenu a{display:block;padding:9px 12px;border-radius:var(--r-sm);text-decoration:none;
  transition:background .16s ease}
.submenu a b{display:block;font-size:14px;font-weight:600;color:var(--ink-900);line-height:1.4}
.submenu a span{display:block;font-size:12px;color:var(--ink-500);margin-top:2px;line-height:1.5}
.submenu a:hover,.submenu a:focus-visible{background:var(--amber-50)}
.submenu a:hover b,.submenu a:focus-visible b{color:var(--amber-700)}
.submenu a.sub-all{border-top:1px solid var(--line);margin-top:4px;padding-top:10px;border-radius:0 0 var(--r-sm) var(--r-sm)}
.submenu a.sub-all b{color:var(--amber-700)}
.nav-top.plain{padding-left:4px}

/* 小屏：下拉改为「本项下方的全幅抽屉」（2026-10-03 修）
   【原缺陷】这里原来是 .submenu{display:none!important}，
   把 i18n.js bindInteractions 已经写好的触屏展开逻辑整个干掉了：
   类加上了（is-open），菜单高度 0，0 个入口可见 —— 手机上导航等于没有。
   实测桌面 hover 高 437px / 7 项可见，手机 tap 后 display:none / 高 0 / 0 项。
   【现在】小屏把 submenu 改成「贴在触发项正下方、左右铺满」的抽屉：
   点一级项展开、再点或点别处收起（JS 逻辑没动，只把 CSS 放行）。
   · top:100% 而不是写死 top:60px —— 手机上顶栏会换行，实测 nav-in 高 184px
     （--nav-h 变量仍是 60px），写死值会让抽屉盖住下面几排按钮，点不到。
     贴着 .nav-item（position:relative）的底边展开，永远正好在按钮下面。
   · left/right 铺满 —— 桌面态是 700px 宽的居中气泡，小屏横向放不下会溢出屏幕。
   · max-height + overflow auto —— 工具组有 30 个项，不限高会把整页撑到底。
   · 收起态用 opacity/visibility（display 保持 block，否则量不到高度、也测不了）。
   桌面端（>860px）完全不受这段影响。 */
/* 桌面端：汉堡与抽屉不出现（只在小屏媒体查询里显示） */
.nav-burger,.nav-drawer,.nav-scrim{display:none}

/* —— 移动端导航（2026-10-08 方案 A：汉堡抽屉）——
   改动前 390px 实测：顶栏 185–191px（≈视口 22%）、导航折 4 行。
   根因不是"少了汉堡"，而是品牌约占 250px，390px 放不下"完整品牌 + 6 个入口"。
   现在小屏只留 品牌 + 汉堡，入口全进抽屉 → 顶栏约 61px。桌面端不受影响。
   注意：这里必须带 !important —— `.u-nav .nav-in` 这类多类选择器优先级更高。 */
@media (max-width:860px){
  .nav-links{display:none!important}
  #langPicker{display:none!important}
  .nav-in,.u-nav .nav-in{flex-wrap:nowrap!important;gap:10px!important;padding:10px 14px!important}
  /* 小屏品牌瘦身：不瘦身的话"品牌 250px + 汉堡"在 390px 里放不下 */
  .brand,.u-nav .brand{gap:7px!important}
  .brand .mark,.u-nav .brand .mark{width:30px!important;height:30px!important;flex-basis:30px!important}
  .brand .nm,.u-nav .brand .nm{font-size:15px!important}
  .brand .cn,.u-nav .brand .cn{font-size:17px!important;letter-spacing:2.5px!important;
    padding:4px 8px!important;border-radius:6px!important}
  .nav-cta,.u-nav .nav-cta{display:none!important}

  .nav-burger{display:inline-flex!important;flex-direction:column;justify-content:center;gap:4px;
    width:38px;height:38px;margin-left:auto;flex:0 0 38px;padding:0 8px;cursor:pointer;
    /* z-index 必须高于遮罩（80）：否则抽屉打开后遮罩会盖住汉堡，用户无法再点它关闭
       （实测：Playwright 点汉堡时报 "nav-scrim intercepts pointer events"）。 */
    position:relative;z-index:95;
    background:var(--surface,#FFFDFA);border:1px solid var(--line,#EAD9C8);border-radius:10px}
  .nav-burger .bar{display:block;height:2px;background:var(--ink,#2E2016);border-radius:2px}
  .nav-burger[aria-expanded="true"]{background:var(--surface,#FFFDFA);border-color:var(--amber,#C08A2E)}
  #mobileLangPicker select{width:100%;max-width:100%}

  .nav-drawer{display:block!important;position:absolute;left:0;right:0;top:100%;z-index:90;
    background:var(--surface,#FFFDFA);border-top:1px solid var(--line,#EAD9C8);
    box-shadow:0 16px 34px rgba(0,0,0,.24);padding:8px 0 14px;
    max-height:72vh;overflow-y:auto;-webkit-overflow-scrolling:touch}
  .nav-drawer[hidden]{display:none!important}
  .nav-drawer .nd-cap{padding:10px 18px 4px;font-size:12px;letter-spacing:.08em;color:var(--ink-2,#6F5E4D)}
  .nav-drawer a{display:block;padding:10px 18px;border-bottom:1px solid var(--line,#EAD9C8);
    text-decoration:none;color:var(--ink,#33271D)}
  .nav-drawer a:last-child{border-bottom:0}
  .nav-drawer a b{display:block;font-size:14.5px;font-weight:650}
  .nav-drawer a span{display:block;font-size:12.5px;color:var(--ink-2,#6F5E4D);margin-top:1px}
  .nav-drawer .nd-acts{padding:10px 18px 0;display:flex;flex-direction:column;gap:8px}
  .nav-drawer .nd-acts .nd-act{border:1px solid var(--line,#EAD9C8);border-radius:10px;padding:10px 14px;
    font-size:14px;font-weight:600;text-align:center}
  .nav-drawer .nd-acts .pri{background:linear-gradient(135deg,var(--gold,#EFB23A),var(--gold-2,#E0A02A));
    border-color:transparent;color:#1A1204}

  .nav-scrim{display:block!important;position:fixed;left:0;right:0;top:0;bottom:0;
    background:rgba(16,24,38,.4);z-index:80}
  .nav-scrim[hidden]{display:none!important}
}

@media (max-width:860px){
  /* 抽屉相对**顶栏容器**定位（.nav 是 position:sticky，本来就建立定位上下文），
     而不是相对 .nav-item —— 后者宽度只有按钮那么点（实测 44~85px），
     left:0;right:0 会被它裁成窄条，菜单项全挤成一列。
     .nav-item 保持 position:relative 不变（桌面态下拉要靠它定位）。 */
  .nav{ position:sticky; }
  .submenu{
    display:block;
    position:fixed; left:0; right:0;
    top:var(--nav-real-h, 184px);
    width:auto; min-width:0; max-width:none;
    transform:none;
    max-height:72vh; overflow-y:auto; -webkit-overflow-scrolling:touch;
    border-radius:0 0 12px 12px; border-left:none; border-right:none;
    box-shadow:0 14px 30px rgba(0,0,0,.18);
    padding:12px 16px 16px;
  }
  .submenu.wide{ min-width:0; }
  .submenu.wide .submenu-in{ grid-template-columns:1fr; }
  .submenu.wide .submenu-in.cats{ grid-template-columns:1fr; }
  .submenu-in{ grid-template-columns:1fr; }
  .submenu::before{ display:none; }
  .nav-item .submenu{ opacity:0; visibility:hidden; pointer-events:none;
    transform:translateY(-6px); transition:opacity .18s ease,transform .18s ease,visibility .18s; }
  .nav-item.is-open .submenu,
  .nav-item:focus-within .submenu{
    opacity:1; visibility:visible; pointer-events:auto; transform:translateY(0); }
  .caret{ display:inline-block; }
  .nav-item.is-open .caret{ transform:rotate(180deg); }
  .nav-top.plain{ padding-left:0; }
}
@media (prefers-reduced-motion:reduce){
  .submenu{transition:none}
  .caret{transition:none}
}

/* u-nav 作用域补齐：注入导航的一级按钮与扁平项 .mk 同规格
   （13.5px / padding 6px 2px / 2px 透明下边框；.on 金色下划线、不加粗防跳动） */
.u-nav .nav-links .nav-top{
  font-size: 13.5px; color: var(--ink-2); text-decoration: none;
  padding: 6px 2px; border-bottom: 2px solid transparent; white-space: nowrap;
}
.u-nav .nav-links .nav-top:hover{ color: var(--ink); }
.u-nav .nav-links .nav-top.on{ color: var(--ink); border-bottom-color: var(--gold); }
/* 【2026-10-18】当前栏目色固定为站点标准 --link(#A9680F)。
   market.html / finance.html 为了正文 AA 对比度把 :root 的 --link 改成 #8A5A0D，
   这条页面级令牌会连带把顶栏当前项也染深一档（实测这两页 138,90,13，
   其余 55 页 169,104,15）。顶栏是跨页共享件，不应吃页面级调色；
   这里用标准值钉死，页面正文的 --link 仍保持它自己的对比度优化。 */
.u-nav .nav-links a.on,
.u-nav .nav-links a[aria-current="page"]{ color: #A9680F !important; }

/* ================================================================
   【2026-10-02 UX 收敛层】全站视觉规范统一（体验审计产出，详见当日工作日志）
   页面内联样式各自覆盖跑偏的共享元素，在此收敛回全站档位。
   本文件在页面内联样式之后加载：同特异性时后加载者胜。
   只收「跨页共享的规范件」；单页特有排版不在此管。
   ================================================================ */
/* 眉题小帽：全站原有 11/12/12.5px、字距 0.88~1.44px、两档金色混用
   → 统一 12px / 0.12em / 600 / --gold-2（深金做小字对比更稳，符合
   「--gold 仅用于填充+深字」用色规则）；英文小帽统一大写。 */
.kicker.kicker{ font-size:12px; letter-spacing:.12em; font-weight:600; color:var(--gold-2); text-transform:uppercase; }
/* 紧凑页头 .hd（版权指南 / 固证路线 / 工具大全页共用）：主标题 17px → 24px 档
   （与全站 h2 同档），副题 12px → 13px。同特异性后加载覆盖各页内联规则。
   【2026-10-05 补 margin】原先只收字号字重，margin 交给各页内联决定 ——
   结果 4 个页写成 4px、其余写成 0，同族出现两派。这里一并收口为 margin:0，
   使本规则成为 .hd 标题的**唯一真源**（tool.css 的同名规则已删，不再双份）。
   全站基准：.hd h1 → 24px/650/margin 0。 */
.hd h1{ font-size:24px; font-weight:650; margin:0; }
.hd .sub{ font-size:13px; }
/* 字体渲染质感（高分屏抗锯齿；不支持的浏览器无副作用） */
body{ -webkit-font-smoothing:antialiased; }

/* ============================================================================
 * 2026-10-17｜吸顶栏与锚点跳转的配合
 * ----------------------------------------------------------------------------
 * 顶栏 .u-nav 是 sticky top:0（约 60px），有分类横条的页面还要再加一层。
 * 页内锚点（#xxx）跳转时，浏览器默认把目标顶到**视口顶端**，于是标题正好
 * 钻到吸顶栏底下 —— 用户点目录跳过去，看到的是一片空白，以为链接坏了。
 *
 * scroll-margin-top 告诉浏览器「滚动时把目标上方也留出这么多」，
 * 跳转后标题正好落在吸顶栏下面。这里直接用已有的 --nav-h / --catbar-h 变量，
 * 不新写死数值 —— 顶栏高度改了这里自动跟随。
 * ========================================================================== */
h1[id], h2[id], h3[id], h4[id], section[id], article[id], dt[id], [id].card {
  scroll-margin-top: calc(var(--nav-h, 60px) + 18px);
}
body.has-catbar h1[id], body.has-catbar h2[id], body.has-catbar h3[id],
body.has-catbar h4[id], body.has-catbar section[id], body.has-catbar article[id] {
  scroll-margin-top: calc(var(--nav-h, 60px) + var(--catbar-h, 52px) + 18px);
}

/* ============================================================================
 * 2026-10-18 工作台内嵌工具面板（?embed=1）
 * 工具页被工作台用 iframe 打开时，只保留工具本体：隐藏全站顶栏、分类条、页脚、
 * 浮动栏、广告位和页内工具切换条。正常访问不带 embed=1，不受影响。
 * ========================================================================== */
html.embed .u-nav,
html.embed .hub-catnav-bar,
html.embed footer,
html.embed .fb,
html.embed .ad-slot,
html.embed #langPicker,
html.embed .legal-nav,
html.embed #tabs,
html.embed .catnav { display: none !important; }
html.embed body { padding-top: 0 !important; }
html.embed .wrap { max-width: none; padding-left: 12px; padding-right: 12px; }
html.embed .panel { margin-top: 0 !important; }

/* 登录后导航显示账号名：避免长邮箱把顶栏挤爆 */
.nav-account{max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media (max-width:520px){.nav-account{max-width:92px}}

/* 登录态导航首帧占位：有本地账号缓存时先隐藏“登录/注册”，等账号名写入后再显示，避免旧文案闪一下 */
html.av-nav-pending a[data-i18n="nav.login"]{visibility:hidden}


/* ============================================================================
   苹果式交互层（2026-10-31）
   ----------------------------------------------------------------------------
   参考 Apple 设计理念 + rareui 组件质感，给全站补一层「被感知但不打扰」的动效：
   - 平滑滚动 + 弹性缓动（cubic-bezier 苹果曲线）
   - 按钮按压缩放（像真的按下去）+ 主 CTA hover 抬升柔光
   - 卡片悬停阴影加深，可点击卡片轻抬
   - 工作台卡片图标回弹（趣味）
   - 主 CTA 微光扫过（克制版）
   - 输入框 / 导航 / 链接顺滑过渡
   全部尊重 prefers-reduced-motion（已有全局块会禁用）。
   ============================================================================ */

html{ scroll-behavior: smooth; }

:root{
  --ease-out: cubic-bezier(.22,1,.36,1);     /* 苹果弹性出 */
  --ease-soft: cubic-bezier(.4,0,.2,1);      /* 柔和 */
  --ease-spring: cubic-bezier(.34,1.56,.64,1); /* 轻微回弹 */
}

/* 链接：平滑变色 */
a{ transition: color .2s var(--ease-soft); }

/* 按钮统一过渡 + 按压手感 */
button, [role="button"], .btn, .g-btn, .btn-p, .btn-pri, .btn-buy, .btn-primary,
.btn-sec, .btn-ghost, .btn.pri, .btn.sec, button.buy, a.btn, a.btn-p, .nav-cta{
  transition: transform .16s var(--ease-out), background-color .2s var(--ease-soft),
              border-color .2s var(--ease-soft), color .2s var(--ease-soft),
              box-shadow .24s var(--ease-soft), filter .2s var(--ease-soft);
  -webkit-tap-highlight-color: transparent;
}
button:active, [role="button"]:active, .btn:active, .g-btn:active,
.btn-p:active, .btn-pri:active, .btn-buy:active, .btn-primary:active,
.btn-sec:active, .btn-ghost:active, a.btn:active, a.btn-p:active, .nav-cta:active{
  transform: scale(.965);
}

/* 主 CTA（金底）：hover 轻抬 + 柔光扩散 */
.btn-p, .btn-pri, .btn-buy, .btn-primary, .g-btn--primary, button.buy{
  position: relative; overflow: hidden;
  box-shadow: 0 1px 3px rgba(224,160,42,.20);
}
.btn-p:hover, .btn-pri:hover, .btn-buy:hover, .btn-primary:hover,
.g-btn--primary:hover, button.buy:hover{
  transform: translateY(-1px);
  box-shadow: 0 10px 24px rgba(224,160,42,.32);
}
.btn-p:active, .btn-pri:active, .btn-buy:active, .btn-primary:active,
.g-btn--primary:active, button.buy:active{
  transform: translateY(0) scale(.965);
  box-shadow: 0 2px 8px rgba(224,160,42,.22);
}
/* 微光扫过（克制：半透明白光扫一次） */
.btn-p::after, .btn-pri::after, .btn-buy::after, .btn-primary::after,
.g-btn--primary::after, button.buy::after{
  content: ""; position: absolute; top: 0; left: -130%;
  width: 55%; height: 100%; pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.28), transparent);
  transform: skewX(-20deg);
  transition: left .55s var(--ease-soft);
}
.btn-p:hover::after, .btn-pri:hover::after, .btn-buy:hover::after,
.btn-primary:hover::after, .g-btn--primary:hover::after, button.buy:hover::after{
  left: 135%;
}

/* 卡片：悬停阴影加深（不位移，避免布局抖动） */
.g-card, .card{
  transition: box-shadow .28s var(--ease-out), border-color .28s var(--ease-soft),
              transform .28s var(--ease-out), background-color .28s var(--ease-soft);
}
.g-card:hover, .card:hover{
  box-shadow: var(--sh-2);
  border-color: var(--gold-line);
}
/* 可点击卡片：轻抬 */
.g-card:has(a):hover, .card:has(a):hover{ transform: translateY(-3px); }

/* 工作台卡片（首页 hub）+ 图标回弹 */
.h3-card{
  transition: transform .28s var(--ease-out), box-shadow .28s var(--ease-out),
              border-color .28s var(--ease-soft);
}
.h3-card:hover{ transform: translateY(-4px); box-shadow: var(--sh-3); border-color: var(--gold-line); }
.h3-card .h3-ico{ transition: transform .34s var(--ease-spring); }
.h3-card:hover .h3-ico{ transform: scale(1.12) rotate(-4deg); }

/* 输入框聚焦更顺滑 */
input, select, textarea{
  transition: border-color .2s var(--ease-soft), box-shadow .2s var(--ease-soft),
              background-color .2s var(--ease-soft);
}

/* 导航链接 / 顶栏：平滑 */
.nav-links a, .nav-top, .nav-item > a, .nav-cta{
  transition: color .2s var(--ease-soft), border-color .2s var(--ease-soft), opacity .2s var(--ease-soft);
}

/* 品牌 logo / 印章：hover 轻旋（趣味但不喧宾夺主） */
.logo, .brand-mark, .seal-mark{ transition: transform .4s var(--ease-spring); }
.logo:hover, .brand-mark:hover, .seal-mark:hover{ transform: scale(1.06); }

/* 表格行 hover 轻微高亮 */
.rate tbody tr, table tbody tr{ transition: background-color .18s var(--ease-soft); }
.rate tbody tr:hover, table tbody tr:hover{ background-color: var(--gold-soft); }

/* 工具页顶部标签（tabs）平滑 */
#tabs .tab, .tabs .tab, [data-t]{ transition: color .2s var(--ease-soft), background-color .2s var(--ease-soft),
                              border-color .2s var(--ease-soft), transform .16s var(--ease-out); }
#tabs .tab:hover, .tabs .tab:hover, [data-t]:hover{ transform: translateY(-1px); }


/* ---------- 苹果式交互增强（motion.js 配套） ---------- */
/* 滚动入场 */
.av-reveal{ opacity:0; transform:translateY(16px);
  transition:opacity .55s var(--ease-out, cubic-bezier(.22,1,.36,1)),
             transform .55s var(--ease-out, cubic-bezier(.22,1,.36,1)); }
.av-reveal.av-in{ opacity:1; transform:none; }
/* 按钮涟漪 */
.av-ripple{ position:absolute; border-radius:50%; background:currentColor; opacity:.16;
  transform:scale(0); animation:av-ripple .6s var(--ease-out, cubic-bezier(.22,1,.36,1));
  pointer-events:none; z-index:1; }
@keyframes av-ripple{ to{ transform:scale(1); opacity:0; } }