/* ==========================================================================
   NERVpay Design System v2.0
   语言来源：knocket.trtc.io（tokens.css v3 + hero-refresh 最新版）
   性格：奶油纸底 × 墨绿 × 柠檬高亮 × 胶囊几何 × 柔和大投影（v6：新标为单色，统一映射为站点墨绿）
   v2 相对 v1 的变化：
     1. 硬阴影（2–4px）→ 柔和大扩散投影（纸片感，不再是新粗野）
     2. 半径整体放大：12/20/32/48，按钮与标签一律 pill
     3. 页面底更亮（cream-0），卡片更白（paper）
     4. 新增荧光笔高亮 .hl、手写体 --font-hand、缓动令牌
   ⚠️ 变量名一个都没删、没改名 —— console.css / site.css 有 200+ 处引用。
   ========================================================================== */

:root {
  /* ---------- 品牌大色 ---------- */
  /* v6：配色 = v2 的墨绿 + 柠檬；商标换成新版**单色**徽标并统一为墨绿。
     商标原稿是深藏青 #081130，抠图时映射到 #0D4A24（--forest）。
     单色标的风险与双色标不同：不怕"两色挤在一起"，怕**残留第二种墨**
     （漏上色时 logo 仍是深藏青，而所有"加载成功"的断言照样全绿）。
     ⇒ 判据 tools_brand_check.mjs 里专门有一条：实心像素里主色族必须 ≥95%，
        且退役色（含源色 #081130）出现次数必须为 0。
     结构（变量名、层级关系）沿用 v2 —— 只换值，不动名，
     因为 console.css / site.css 有 200+ 处按名引用。 */
  --hero-green: #0D7A4A;
  --hero-green-2: #0F8A54;
  --hero-deep: #072F1E;     /* 深绿卡 / 页脚 */
  --magenta: #FF0084;       /* knocket 的 CTA 强调色，只点状使用 */
  --section-green-1: #EEF7E8;
  --section-green-2: #E3F2DF;

  /* ---------- 深色面上的文字（实测对比度，不是拍脑袋） ----------
     衬底对比（cream-0 #FAF7EE 叠加后）：
       alpha   hero #0D7A4A   forest #0D4A24   deep #072F1E
       .66       3.09           5.18            6.73
       .78       3.70           6.57            8.83
       .95       4.70           8.92           12.45
     结论：**hero 上用 .95 以下必然不达标**，只有 forest/deep 才能用 .78/.66。
     所以分两个名字，不共用一个变量 —— 名字本身就把"能不能用在这"写清楚了。 */
  --dk-1: #FAF7EE;                          /* 标题：任何深色面都可用 */
  --dk-2: rgba(250, 247, 238, .95);         /* 正文：hero 4.7 ✓ / forest 8.9 ✓ */
  --dk-3: rgba(250, 247, 238, .78);         /* 次级文字：仅 forest/deep（6.6 / 8.8）；hero 3.7 ⛔ */
  --dk-4: rgba(250, 247, 238, .66);         /* 最小可用：仅 forest/deep（5.2）；hero 3.1 ⛔ */
  --dk-faint: rgba(250, 247, 238, .5);      /* ⛔ 不给正文，只给分隔线/水印/装饰 */
  --deep-code: #07281B;                     /* 代码块底（比 forest 更深，专供等宽字） */
  --code-c: #8FB39C;                        /* 代码注释：在 #07281B 上 7.6:1 */

  /* ---------- 底色 ---------- */
  --cream-0: #FAF7EE;   /* 区段亮底 / 悬浮导航 */
  --cream: #F5EFE0;     /* 页面主底（knocket 真值） */
  --cream-2: #EBE4D1;   /* 次级面 / 表头 / 轨道 */
  --paper: #FFFCF3;     /* 卡片纸白 */
  --white: #FFFFFF;

  /* ---------- 墨与绿 ---------- */
  --ink: #0A1A0F;
  --ink-2: #14251A;
  --ink-soft: #22362A;
  --forest: #0D4A24;    /* 深绿主色（knocket green-dark） */
  --forest-2: #12602F;
  --forest-3: #0E7C45;  /* 强调绿：比 knocket #16A34A 深一档，文字仍达标 */
  --muted: #566A5C;     /* 辅助文字：压在 4.5:1 之上（双底陷阱：白卡与奶油壳底都要过） */
  --muted-2: #8A9A8D;

  /* ---------- 高亮 ---------- */
  --lime: #DFF362;
  --lime-2: #EEF9A6;
  --lime-deep: #C7DF3D;
  --mint: #BDF6D5;
  --mint-2: #E7F8EC;
  --mint-3: #C9F0D8;    /* knocket 的 hover 薄荷 */
  --green: #16A34A;

  /* ---------- 语义 ---------- */
  --coral: #FF5638;
  --coral-soft: #FFE3DC;
  --pink: #FF3D82;
  --lilac: #C9B8FF;
  --lilac-soft: #EDE6FF;
  --sky: #A8DBFF;
  --sky-soft: #E3F4FF;
  --peach: #FFC7A8;
  --amber: #E2A63B;
  --amber-soft: #FFF0D2;

  /* ---------- 线 ---------- */
  --line: #E6DFCB;
  --line-2: #D5CBAF;
  --line-3: rgba(10, 26, 15, .13);
  --line-dark: rgba(255, 255, 255, .14);

  /* ---------- 圆角（v2：整体放大，按钮走 pill） ---------- */
  --r-xs: 10px;
  --r-sm: 14px;
  --r-md: 20px;
  --r-lg: 32px;
  --r-xl: 48px;
  --r-pill: 999px;

  /* ---------- 阴影 ---------- */
  /* 硬阴影：只给"强调物"（柠檬按钮、贴纸、编号徽章），不再是默认 */
  --sh-hard: 4px 4px 0 var(--ink);
  --sh-hard-sm: 3px 3px 0 var(--ink);
  --sh-hard-lg: 6px 6px 0 var(--ink);
  /* 柔和投影：v2 的默认。墨绿色调，绝不发灰 */
  --sh-card: 0 1px 0 rgba(10, 26, 15, .03), 0 18px 44px -30px rgba(7, 61, 40, .45);
  --sh-lift: 0 28px 70px -28px rgba(7, 61, 40, .38);
  --sh-pop: 0 40px 90px -30px rgba(7, 61, 40, .45);
  --sh-float: 0 14px 40px rgba(7, 61, 40, .12);

  /* ---------- 字体 ---------- */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', 'Noto Sans SC', sans-serif;
  --font-display: 'Space Grotesk', 'Inter', 'PingFang SC', 'Microsoft YaHei', sans-serif;
  --font-serif: 'Instrument Serif', 'Songti SC', Georgia, serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Consolas, monospace;
  --font-hand: 'Caveat', 'Instrument Serif', cursive;

  /* ---------- 动效 ---------- */
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-pop: cubic-bezier(.34, 1.56, .64, 1);

  /* ---------- 尺寸 ---------- */
  --nav-h: 64px;
  --side-w: 244px;
  --maxw: 1240px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
/* ⛔ overflow-x: clip 而不是 hidden：hidden 会把 html 变成滚动容器，破坏 position:sticky 的吸顶 */
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: clip; }
body {
  background: var(--cream);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: none; }
img, svg { display: block; max-width: 100%; }
table { border-collapse: collapse; width: 100%; }
input, select, textarea { outline: none; }
::selection { background: var(--lime); color: var(--ink); }

/* ⛔ 必须写在所有组件之前：.btn/.chip 等自带 display，会盖掉 UA 的 [hidden] */
[hidden] { display: none !important; }

h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 700; letter-spacing: -.035em; line-height: 1.05; }
.serif { font-family: var(--font-serif); font-style: italic; font-weight: 400; letter-spacing: -.02em; }
.hand { font-family: var(--font-hand); font-weight: 700; letter-spacing: 0; }
.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; letter-spacing: -.02em; }

/* ---------- 荧光笔高亮（v2 新增，营销面专用） ---------- */
/* 用 background 渐变而不是 ::after —— ::after 跨行会断，标题换行时下半句就没有色块了 */
.hl {
  background: var(--lime); padding: 0 .1em; box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}
.hl-line {
  background-image: linear-gradient(180deg, transparent 40%, var(--lime) 40%, var(--lime) 90%, transparent 90%);
  padding: 0 .06em; margin: 0 -.02em;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}

/* ---------- 按钮（v2：胶囊 + 抬升，不再默认硬阴影） ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  height: 46px; padding: 0 22px; border-radius: var(--r-pill);
  border: 1.5px solid var(--ink);
  background: var(--paper); color: var(--ink);
  font-weight: 700; font-size: 14.5px; letter-spacing: -.005em;
  transition: transform .2s var(--ease-pop), box-shadow .2s, background .18s, color .18s, border-color .18s;
  white-space: nowrap; line-height: 1;
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 10px 22px -12px rgba(7, 61, 40, .55); }
.btn:active { transform: translateY(0); box-shadow: none; }
.btn:focus-visible { outline: 2.5px solid var(--forest-3); outline-offset: 2px; }
.btn-primary { background: var(--forest); color: var(--cream-0); border-color: var(--forest); }
.btn-primary:hover { background: var(--ink); border-color: var(--ink); box-shadow: 0 12px 26px -12px rgba(10, 26, 15, .6); }
.btn-lime { background: var(--lime); color: var(--ink); border-color: var(--ink); box-shadow: var(--sh-hard-sm); }
.btn-lime:hover { background: var(--lime-2); box-shadow: var(--sh-hard); }
.btn-lime:active { box-shadow: 1px 1px 0 var(--ink); }
.btn-coral { background: var(--coral); color: #fff; border-color: var(--coral); }
.btn-coral:hover { box-shadow: 0 12px 26px -12px rgba(255, 86, 56, .6); }
.btn-ghost { background: transparent; border-color: transparent; color: var(--muted); }
.btn-ghost:hover { background: var(--mint-3); color: var(--ink); box-shadow: none; transform: none; }
.btn-sm { height: 36px; padding: 0 15px; font-size: 13px; gap: 7px; }
.btn-lg { height: 54px; padding: 0 28px; font-size: 16px; }
.btn-block { width: 100%; }
.btn[disabled] { opacity: .45; pointer-events: none; }
/* 控制台内的按钮更矮一些，密集区不做抬升 */
body.console .btn { height: 38px; padding: 0 16px; font-size: 13.5px; }
body.console .btn:hover { transform: none; box-shadow: 0 6px 16px -10px rgba(7, 61, 40, .5); }
body.console .btn-sm { height: 32px; padding: 0 13px; font-size: 12.5px; }

/* ---------- 标签 / 徽章（v2：胶囊 + 描边） ---------- */
.chip {
  display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 11px;
  border-radius: var(--r-pill); font-size: 12px; font-weight: 700; white-space: nowrap;
  background: var(--cream-2); color: var(--ink-soft); border: 1px solid transparent;
}
.chip .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.chip-ok { background: var(--mint-2); color: #0A6B41; border-color: #CDEBD9; }
.chip-wait { background: var(--amber-soft); color: #8A5A00; border-color: #F3DCA9; }
.chip-bad { background: var(--coral-soft); color: #B32A15; border-color: #F7C9BF; }
.chip-info { background: var(--sky-soft); color: #0B5B86; border-color: #CBE8FA; }
.chip-neutral { background: var(--cream-2); color: var(--muted); border-color: var(--line); }
.chip-lilac { background: var(--lilac-soft); color: #5533A8; border-color: #DCD0FF; }
.chip-lime { background: var(--lime-2); color: #4A5A00; border-color: var(--lime-deep); }
.tag { font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); font-weight: 600; }

/* ---------- 表单 ---------- */
.field { display: flex; flex-direction: column; gap: 7px; }
.field > label { font-size: 13px; font-weight: 650; color: var(--ink-soft); }
.field .hint { font-size: 12px; color: var(--muted); }
.input, .select, .textarea {
  height: 44px; padding: 0 14px; border-radius: var(--r-sm); border: 1.5px solid var(--line-2);
  background: var(--white); font-size: 14px; transition: border-color .15s, box-shadow .15s;
}
.textarea { height: auto; padding: 12px 14px; resize: vertical; min-height: 94px; line-height: 1.55; }
.input:focus, .select:focus, .textarea:focus { border-color: var(--forest); box-shadow: 0 0 0 4px rgba(201, 240, 216, .7); }
.input::placeholder, .textarea::placeholder { color: var(--muted-2); }
.input-err { border-color: var(--coral) !important; }
.err-msg { color: #B32A15; font-size: 12px; }
.select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%230A1A0F' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 36px; }

/* ---------- 卡片 ---------- */
.card {
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-md);
  box-shadow: var(--sh-card);
}
.card-pad { padding: 22px; }
.card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 17px 22px; border-bottom: 1px solid var(--line); }
.card-head h3 { font-size: 15px; font-weight: 700; letter-spacing: -.02em; }
.card-head .sub { font-size: 12px; color: var(--muted); }

/* ---------- 表格 ---------- */
.tbl { width: 100%; font-size: 13.5px; }
.tbl thead th {
  text-align: left; font-size: 11px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  color: var(--muted); padding: 11px 14px; border-bottom: 1px solid var(--line); white-space: nowrap;
  background: var(--paper); position: sticky; top: 0; z-index: 1;
}
.tbl tbody td { padding: 13px 14px; border-bottom: 1px solid rgba(230, 223, 203, .7); vertical-align: middle; }
.tbl tbody tr:last-child td { border-bottom: none; }
.tbl tbody tr { transition: background .12s; }
.tbl tbody tr:hover { background: rgba(201, 240, 216, .38); cursor: pointer; }
.tbl .r { text-align: right; }
.tbl .amount { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-weight: 600; }
.tbl .neg { color: #B32A15; }
.tbl .pos { color: #0A6B41; }
.tbl .ref { font-family: var(--font-mono); font-size: 11.5px; color: var(--muted); }

/* ---------- 语言开关 ---------- */
/* 两段式胶囊：当前语言实心，另一侧弱化。放在顶栏右侧，尺寸与 tb-btn 对齐 */
.lang-switch {
  display: inline-flex; align-items: center; gap: 2px;
  padding: 2px; border-radius: var(--r-pill);
  background: var(--cream-2); border: 1px solid var(--line);
}
.lang-switch button {
  appearance: none; border: 0; cursor: pointer;
  min-width: 30px; height: 24px; padding: 0 8px;
  border-radius: var(--r-pill); background: transparent;
  font-family: inherit; font-size: 11.5px; font-weight: 700; letter-spacing: .02em;
  color: var(--muted); line-height: 1; transition: background .16s, color .16s;
}
.lang-switch button:hover { color: var(--ink); }
.lang-switch button.on { background: var(--forest); color: #fff; }
.lang-switch button:focus-visible { outline: 2px solid var(--forest); outline-offset: 1px; }

/* 英文版式：中文靠字距区分层次，英文需要更紧的字距与更小的字号补偿 */
html.lang-en body { font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; }
html.lang-en .display,
html.lang-en h1, html.lang-en h2, html.lang-en h3 { letter-spacing: -.04em; }
html.lang-en .side-link, html.lang-en .nav-links a { letter-spacing: 0; }

/* ---------- 工具类 ---------- */
.row { display: flex; align-items: center; gap: 10px; }
.row-between { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.col { display: flex; flex-direction: column; }
.grow { flex: 1; min-width: 0; }
.muted { color: var(--muted); }
.small { font-size: 12.5px; }
.tiny { font-size: 11.5px; }
.bold { font-weight: 700; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.divider { height: 1px; background: var(--line); margin: 16px 0; }
.hidden { display: none !important; }
.grid { display: grid; gap: 16px; }
.mt-8 { margin-top: 8px; } .mt-16 { margin-top: 16px; } .mt-24 { margin-top: 24px; }
.mb-8 { margin-bottom: 8px; } .mb-16 { margin-bottom: 16px; }

/* ---------- 滚动条 ---------- */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: rgba(10, 26, 15, .18); border-radius: 10px; border: 3px solid var(--cream); }
::-webkit-scrollbar-track { background: transparent; }

/* ---------- 动效 ---------- */
@keyframes fadeUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .4; } }
.reveal { opacity: 0; transform: translateY(22px); }
.reveal.in { animation: fadeUp .7s var(--ease-out) forwards; }

.spinner {
  width: 18px; height: 18px; border-radius: 50%;
  border: 2px solid rgba(10, 26, 15, .15); border-top-color: var(--forest);
  animation: spin .7s linear infinite;
}
.skeleton {
  background: linear-gradient(90deg, rgba(10,26,15,.06) 25%, rgba(10,26,15,.11) 37%, rgba(10,26,15,.06) 63%);
  background-size: 400% 100%; animation: shimmer 1.4s ease infinite; border-radius: 10px;
}
@keyframes shimmer { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}