/* ============================================================================
   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{
  background: var(--bg) !important;
  color: var(--ink);
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
/* 文字链接：浅底上用压深金，保证对比度；绝不用亮金当文字 */
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;
}
.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;
}
.top-in, .nav-in, .hd{ 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: 1340px){
  .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); }
.brand .cn{ font-size: 12px; color: var(--ink-3) !important;
            border-left: 1px solid rgba(51,39,29,.14);
            padding-left: 10px; margin-left: 2px; white-space: nowrap; }

/* 顶栏主 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); }