/* ============================================================================
   neo-tokens.css — Neo 三页共享层（token + 通用基元）
   在 index.html / api.html / contact.html 各自的页面样式**之前**用 <link> 引入。
   ----------------------------------------------------------------------------
   ★ token 层是从 landing.css **逐字搬运**（只移动、零值变化）。
   页面专属（Hero 舞台/卡/能力动画/模块栅格/价格/API 引子 + --card-edge /
   --focal-ring / --plate / --plate-ink）留在 landing.css，不在这里。
   ============================================================================ */

/* ---------- 0 · 重置 ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 84px; }
body { margin: 0; }
h1, h2, h3, h4, p, figure, blockquote, dl, dd { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
button { font: inherit; color: inherit; background: none; border: 0; }
a { color: inherit; text-decoration: none; }
svg { display: block; }
/* 工程正确性：display:grid/flex 会盖掉 [hidden]，必须显式兜住 */
[hidden] { display: none !important; }
mark { background: transparent; color: inherit; }

/* ---------- 1 · Token（逐字搬运自 landing.css） ---------- */
:root {
  --font-display: "Songti SC", "Source Han Serif SC", "Noto Serif SC", "STSong", SimSun, Georgia, serif;
  --font-body: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-soft: cubic-bezier(.22, 1, .36, 1);
  --ease-inout: cubic-bezier(.65, 0, .35, 1);

  --r-xs: 4px; --r-sm: 10px; --r-lg: 16px; --r-xl: 22px; --r-pill: 999px;

  --nav-h: 64px;
}

/* 浅色 · 画廊白墙 */
:root, html[data-theme="light"] {
  --bg: #F5F5F3;
  --surface: #FCFCFB;
  --surface-2: #EFEFED;
  --well: #E8E8E6;
  --ink: #17181B;
  --ink-2: #3A3D42;
  --ink-3: #565A61;
  --ink-4: #5F6369;
  --line: rgba(23, 24, 27, .14);
  --line-soft: rgba(23, 24, 27, .07);

  --accent: #E09A2E;
  --accent-hover: #C9861D;
  --on-accent: #1A1206;
  --accent-ink: #8A5A0A;
  --accent-soft: rgba(224, 154, 46, .14);
  --accent-line: rgba(224, 154, 46, .42);

  --ok: #0B7A45; --ok-soft: rgba(11, 122, 69, .10);
  --danger: #B32E19; --danger-soft: rgba(179, 46, 25, .10);

  --code-bg: #1A1B1F; --code-ink: #EDEDF2; --code-dim: #8E8EA6;

  --sh-1: 0 1px 2px rgba(20, 24, 32, .06), 0 6px 16px rgba(20, 24, 32, .06);
  --sh-2: 0 2px 6px rgba(20, 24, 32, .08), 0 14px 34px rgba(20, 24, 32, .10);
  --sh-3: 0 8px 20px rgba(20, 24, 32, .12), 0 28px 56px rgba(20, 24, 32, .16);
  --sh-4: 0 24px 60px rgba(20, 24, 32, .22), 0 6px 16px rgba(20, 24, 32, .14);
  --glow: 0 0 90px rgba(224, 154, 46, .20);
}

/* 深色 · 暗房 */
html[data-theme="dark"] {
  --bg: #0E1216;
  --surface: #151A20;
  --surface-2: #1C222A;
  --well: #0A0D10;
  --ink: #ECEEF1;
  --ink-2: #C3C9D1;
  --ink-3: #9AA3AE;
  --ink-4: #7E8894;
  --line: rgba(255, 255, 255, .12);
  --line-soft: rgba(255, 255, 255, .06);

  --accent: #EFA83C;
  --accent-hover: #F7BC63;
  --on-accent: #1A1206;
  --accent-ink: #F3BC6A;
  --accent-soft: rgba(239, 168, 60, .14);
  --accent-line: rgba(239, 168, 60, .45);

  --ok: #46CE86; --ok-soft: rgba(70, 206, 134, .14);
  --danger: #FF7A5E; --danger-soft: rgba(255, 122, 94, .14);

  --code-bg: #0A0D10; --code-ink: #EDEDF2; --code-dim: #8E8EA6;

  --sh-1: 0 1px 2px rgba(0, 0, 0, .40), 0 6px 16px rgba(0, 0, 0, .40);
  --sh-2: 0 2px 6px rgba(0, 0, 0, .50), 0 14px 34px rgba(0, 0, 0, .45);
  --sh-3: 0 8px 20px rgba(0, 0, 0, .55), 0 28px 56px rgba(0, 0, 0, .50);
  --sh-4: 0 24px 60px rgba(0, 0, 0, .60), 0 6px 16px rgba(0, 0, 0, .50);
  --glow: 0 0 90px rgba(239, 168, 60, .18);
}

/* ---------- 2 · 基础排版 ---------- */
body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.8;
  -webkit-font-smoothing: antialiased;
}
html.theme-switching *, html.theme-switching *::before, html.theme-switching *::after { transition: none !important; }
.display1, .display2, .display3 { font-family: var(--font-display); font-weight: 500; letter-spacing: 0; }
.display1 { font-size: clamp(40px, 5.2vw, 72px); line-height: 1.04; }
.display2 { font-size: clamp(30px, 3.6vw, 44px); line-height: 1.12; }
.display3 { font-size: clamp(24px, 2.4vw, 30px); line-height: 1.2; }
.lead { font-size: clamp(17px, 1.4vw, 18px); line-height: 1.7; color: var(--ink-2); }
p { color: var(--ink-2); }
.meta {
  font-family: var(--font-mono); font-size: 12px; line-height: 1.4;
  letter-spacing: .08em; text-transform: uppercase; font-weight: 600;
  color: var(--ink-3);
}
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.note { font-size: 13px; line-height: 1.6; color: var(--ink-3); letter-spacing: .01em; }
.mono { font-family: var(--font-mono); }
.num { font-variant-numeric: tabular-nums; }

/* ---------- 3 · 布局基元 ---------- */
.wrap { width: 100%; max-width: 1280px; margin-inline: auto; padding-inline: 24px; }
@media (min-width: 768px) { .wrap { padding-inline: 40px; } }
@media (min-width: 1200px) { .wrap { padding-inline: 64px; } }

.sec { padding-block: 72px; }
@media (min-width: 768px) { .sec { padding-block: 96px; } }
@media (min-width: 1200px) { .sec { padding-block: 160px; } }
.sec__head { max-width: 66ch; margin-bottom: 40px; }
.sec__head .meta { margin-top: 16px; }

/* 焦点环：门禁断言 outline-style === 'solid'，绝不可去 */
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---------- 4 · skip-link ---------- */
.skip-link {
  position: fixed; inset-block-start: -100px; inset-inline-start: 12px; z-index: 999;
  padding: 10px 16px; border-radius: var(--r-sm);
  background: var(--accent); color: var(--on-accent); font-weight: 600; font-size: 14px;
  transition: inset-block-start .18s var(--ease-out);
}
.skip-link:focus-visible { inset-block-start: 12px; }

/* ---------- 5 · NAV 外壳 + 按钮 ---------- */
.nav {
  position: sticky; inset-block-start: 0; z-index: 200;
  border-bottom: 1px solid transparent;
  transition: background-color .18s var(--ease-out), backdrop-filter .18s var(--ease-out), border-color .18s var(--ease-out);
}
.nav.is-scrolled {
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  border-bottom-color: var(--line);
}
.nav__in { display: flex; align-items: center; gap: 20px; height: var(--nav-h); }
.logo { display: inline-flex; align-items: center; gap: 9px; font-weight: 700; letter-spacing: .12em; font-size: 15px; color: var(--ink); }
.logo__mark { width: 11px; height: 11px; border-radius: 3px; background: var(--accent); }
.nav__links { display: flex; gap: 6px; margin-inline-start: 8px; }
.nav__links a {
  position: relative; padding: 8px 12px; border-radius: var(--r-sm);
  font-size: 14px; color: var(--ink-3); transition: color .14s var(--ease-out), background-color .14s var(--ease-out);
}
.nav__links a:hover { color: var(--ink); background: var(--line-soft); }
.nav__links a[aria-current="page"] { color: var(--ink); font-weight: 600; }
.nav__links a[aria-current="page"]::after {
  content: ""; position: absolute; inset-inline: 12px; inset-block-end: 2px;
  height: 2px; background: var(--accent); border-radius: 2px;
}
.nav__right { display: flex; align-items: center; gap: 12px; margin-inline-start: auto; }
.iconbtn {
  display: grid; place-items: center; width: 38px; height: 38px; border-radius: var(--r-pill);
  color: var(--ink-2); border: 1px solid var(--line); transition: color .14s var(--ease-out), border-color .14s var(--ease-out), transform .14s var(--ease-out);
}
.iconbtn:hover { color: var(--ink); border-color: var(--accent-line); }
.iconbtn:active { transform: scale(.96); }
.iconbtn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; }

.btn {
  display: inline-flex; align-items: center; gap: 8px; justify-content: center;
  padding: 11px 22px; border-radius: var(--r-pill); font-size: 14px; font-weight: 600;
  transition: background-color .18s var(--ease-out), color .18s var(--ease-out), border-color .18s var(--ease-out), transform .18s var(--ease-out);
}
.btn:active { transform: scale(.96); }
.btn:disabled { opacity: .45; cursor: default; }
.btn--pill { padding: 9px 18px; }
.btn--primary, .btn--pill { background: var(--accent); color: var(--on-accent); }
.btn--primary:hover, .btn--pill:hover { background: var(--accent-hover); }
.btn--ghost { border: 1px solid var(--line); color: var(--ink); }
.btn--ghost:hover { border-color: var(--ink-3); background: var(--line-soft); }
/* 小态 + api.js 生成的行内动作按钮（.btn.sm.primary / .btn.ghost.sm） */
.btn.sm, .btn--sm { padding: 6px 12px; font-size: 13px; }
.btn.block { width: 100%; }

/* 移动端 <details> 菜单 */
.nav-menu { position: relative; }
.nav-menu > summary {
  display: grid; place-items: center; width: 38px; height: 38px; border-radius: var(--r-sm);
  border: 1px solid var(--line); color: var(--ink-2); cursor: pointer; list-style: none;
}
.nav-menu > summary::-webkit-details-marker { display: none; }
.nav-menu > summary svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.nav-menu[open] > summary { color: var(--accent-ink); border-color: var(--accent-line); }
.nav-menu > nav {
  position: absolute; inset-block-start: calc(100% + 10px); inset-inline-end: 0; min-width: 200px;
  display: flex; flex-direction: column; padding: 8px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--sh-3);
}
.nav-menu > nav a { padding: 11px 14px; border-radius: var(--r-sm); font-size: 15px; color: var(--ink-2); }
.nav-menu > nav a:hover { background: var(--line-soft); color: var(--ink); }

@media (min-width: 861px) { .nav-menu { display: none; } }
@media (max-width: 860px) {
  .nav__links { display: none; }
  :root { --nav-h: 56px; }
  html { scroll-padding-top: 72px; }
}

/* ★ 锚点偏移只由 html 的 scroll-padding-top 负责（84 / 窄屏 72）。
   不要再加 section[id] { scroll-margin-top } —— 两者是**叠加**的，会多留一段空隙。 */

/* ---------- 6 · 表单基元 ---------- */
.form { display: grid; gap: 20px; max-width: 620px; }
.field { display: grid; gap: 8px; }
.field label { font-size: 14px; font-weight: 600; color: var(--ink); }
.field input, .field select, .field textarea {
  width: 100%; min-inline-size: 0; padding: 12px 14px;
  background: var(--well); color: var(--ink); font: inherit; font-size: 15px;
  border: 1px solid var(--line); border-radius: var(--r-sm); overflow-wrap: anywhere;
}
.field textarea { min-height: 110px; resize: vertical; }
.field input::placeholder, .field textarea::placeholder { color: var(--ink-4); opacity: 1; }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }
.field.is-invalid input, .field.is-invalid textarea { border-color: var(--danger); }
.field__err { font-size: 13px; line-height: 1.5; color: var(--danger); }
.hint { font-weight: 400; font-size: 12px; color: var(--ink-3); }
.caption { font-size: 13px; line-height: 1.5; color: var(--ink-3); }
.form__alert { padding: 12px 14px; border-radius: var(--r-sm); background: var(--danger-soft); color: var(--danger); font-size: 14px; }
.form > .btn { justify-self: start; }
/* 中性信息盘（不是"成功"）：校验通过但未发送 —— 绿=已送达，会误导。两页一致。 */
.form__ok { max-width: 620px; padding: 24px; border-radius: var(--r-lg); }
.form__ok--info { background: var(--accent-soft); border: 1px solid var(--accent-line); }
.form__ok-hd { display: flex; align-items: center; gap: 10px; }
.form__ok-ico { flex: none; width: 22px; height: 22px; color: var(--accent-ink); }
.form__ok-t { font-size: 16px; font-weight: 600; color: var(--ink); }
.form__ok-d { margin-top: 8px; font-size: 14px; line-height: 1.7; color: var(--ink-2); }
.form__ok-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 18px; }

/* ---------- 7 · 表格基元 ---------- */
.table-scroll { overflow-x: auto; scrollbar-width: thin; }
.tbl { width: 100%; border-collapse: collapse; font-size: 14px; }
.tbl th, .tbl td { padding: 12px 16px; text-align: start; border-bottom: 1px solid var(--line); color: var(--ink-2); }
.tbl thead th { font-family: var(--font-mono); font-size: 12px; letter-spacing: .04em; color: var(--ink-3); font-weight: 600; }
.tbl tbody th[scope="row"] { font-family: var(--font-mono); color: var(--ink); font-weight: 500; }
.tbl caption { text-align: start; padding-bottom: 12px; font-family: var(--font-mono); font-size: 12px; letter-spacing: .06em; color: var(--ink-3); }

/* ---------- 8 · 状态词汇 ---------- */
.chip {
  display: inline-flex; align-items: center;
  font-family: var(--font-mono); font-size: 12px; line-height: 1.3;
  border-radius: var(--r-xs); padding: 4px 10px;
  background: var(--surface-2); border: 1px solid var(--line-soft); color: var(--ink-3);
}
.chip.ok { background: var(--ok-soft); color: var(--ok); }
.chip.err { background: var(--danger-soft); color: var(--danger); }
.chip.wait { background: var(--accent-soft); color: var(--accent-ink); }
.meta-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.tag { display: inline-block; font-family: var(--font-mono); font-size: 11px; border-radius: var(--r-xs); padding: 2px 7px; background: var(--accent-soft); color: var(--accent-ink); }
.tag.ok { background: var(--ok-soft); color: var(--ok); }
.tag.bad { background: var(--danger-soft); color: var(--danger); }
/* 锁定块：不靠颜色单独表意（图标 + 粗体标题 + 说明） */
.locked {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 20px 24px; background: var(--surface-2); border: 1px dashed var(--line);
  border-radius: var(--r-lg); color: var(--ink-2);
}
.locked svg { flex: none; width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.locked b { color: var(--ink); }
/* 额度不足引导条：--danger-soft 底 + 左竖线 + 三角线稿（不靠颜色单独表意） */
.need-topup {
  display: flex; align-items: center; flex-wrap: wrap; gap: 12px;
  margin-top: 12px; padding: 14px 16px;
  background: var(--danger-soft); border-inline-start: 3px solid var(--danger);
  border-radius: var(--r-sm); color: var(--ink-2); font-size: 14px;
}
.need-topup::before {
  content: ""; flex: none; width: 0; height: 0;
  border-inline: 7px solid transparent; border-block-end: 12px solid var(--danger);
}
.need-topup a { margin-inline-start: auto; }

/* ---------- 9 · 代码块基元 ---------- */
.code-scroll { overflow-x: auto; scrollbar-width: thin; border-radius: var(--r-lg); }
.code {
  margin: 0; padding: 20px 22px; background: var(--code-bg); color: var(--code-ink);
  font-family: var(--font-mono); font-size: 13px; line-height: 1.75; white-space: pre; border-radius: var(--r-lg);
  counter-reset: ln;
}
.code .cl { display: block; counter-increment: ln; padding-left: 2.4em; position: relative; }
.code .cl::before { content: counter(ln); position: absolute; left: 0; width: 1.6em; text-align: right; color: var(--code-dim); }
.code .cm { color: var(--code-dim); }
.code .cs { color: var(--accent); }
.code .ck { color: var(--accent); }
.code .cj { color: var(--code-ink); }
.code .cn { color: var(--code-ink); }
.code-tabs { display: flex; gap: 4px; padding: 8px 8px 0; }
.code-tabs button { padding: 6px 12px; font-size: 12px; border-radius: var(--r-xs); color: var(--ink-3); cursor: pointer; }
.code-tabs button[aria-selected="true"] { background: var(--code-bg); color: var(--code-ink); }
.copy-row { display: flex; justify-content: flex-end; margin-top: 8px; }
.copy-btn { font-size: 12px; padding: 5px 10px; border: 1px solid var(--line); background: var(--surface-2); border-radius: var(--r-xs); color: var(--ink-2); cursor: pointer; }
.copy-btn:hover { border-color: var(--ink-3); }

/* ---------- 10 · 面板 / 卡 ---------- */
.pane { background: var(--surface); border: 1px solid var(--line-soft); border-radius: var(--r-lg); box-shadow: var(--sh-1); }
.pane-hd { padding: 14px 18px; border-bottom: 1px solid var(--line-soft); font-weight: 600; color: var(--ink); }

/* ---------- 11 · FOOTER ---------- */
.foot { margin-top: 40px; padding-block: 64px 40px; background: var(--well); border-top: 1px solid var(--line); }
.foot__in { display: grid; grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr)); gap: 32px; }
@media (max-width: 767px) { .foot__in { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .foot__brand { grid-column: 1 / -1; } }
.foot__desc { margin-top: 12px; max-width: 34ch; font-size: 14px; line-height: 1.7; color: var(--ink-3); }
.foot__h { font-family: var(--font-mono); font-size: 12px; letter-spacing: .06em; color: var(--ink-3); margin-bottom: 12px; }
.foot__col ul { display: flex; flex-direction: column; gap: 8px; }
.foot__col a { font-size: 14px; color: var(--ink-2); }
.foot__col a:hover { color: var(--accent-ink); }
.foot__col span { font-size: 14px; color: var(--ink-3); }
.foot__bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; margin-top: 48px; padding-top: 20px; border-top: 1px solid var(--line); font-size: 13px; color: var(--ink-3); }

/* ---------- 12 · Toast（site.js 的 NEO.toast 依赖它） ---------- */
#toast {
  position: fixed; inset-block-end: 24px; inset-inline-end: 24px; z-index: 999;
  max-width: min(340px, calc(100vw - 48px)); padding: 12px 16px;
  background: var(--surface); color: var(--ink); border: 1px solid var(--line);
  border-radius: var(--r-sm); box-shadow: var(--sh-3); font-size: 14px;
  opacity: 0; transform: translateY(8px); pointer-events: none;
  transition: opacity .18s var(--ease-out), transform .18s var(--ease-out);
}
#toast.show { opacity: 1; transform: none; }

/* ---------- 13 · 入场淡入（.js 由 site.js 添加；JS 未加载 ⇒ 内容直接可见） ---------- */
.js .rv { opacity: 0; transform: translateY(16px); transition: opacity .6s var(--ease-out), transform .6s var(--ease-out); }
.js .rv.in { opacity: 1; transform: none; }

/* ---------- 14 · reduced-motion（共用部分） ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .rv { opacity: 1; transform: none; transition: none; }
}