/* ═══════════════════════════════════════════════════════════════════
   AEBoost Design System  ·  v1.0
   ───────────────────────────────────────────────────────────────────
   从 r27-dark.html 提炼，供全站共用：首页 / 结账页 / 内容页 / 法律页 /
   订单查询 / 运营后台。所有页面引用本文件，改一处全局生效。

   设计语言：新粗野主义（Neo-Brutalism）
     · 硬边阴影 box-shadow:N N 0 —— 不用模糊，偏移即体积
     · 2.5px 描边 + 高对比色块
     · 柠檬黄（lime）作唯一强调色，橙（ac）作行动色
     · 无圆角（圆角会削弱粗野感）

   ⚠ 主题反转的三类变量（改主题时务必遵守）：
     1. 跟随反转    --paper / --ink / --ink2 / --ink3 / --surf / --ac
     2. 亮底深字专用 --on-lime / --on-lime-dim      （不反转，永远深字）
     3. 墨底浅字专用 --ink-block / --on-ink-block   （不反转，永远墨底浅字）
   详见文件末尾「使用守则」。
   ═══════════════════════════════════════════════════════════════════ */

/* ── 1. 颜色变量 ──────────────────────────────────────────── */
:root {
  /* 基础色板（跟随主题反转） */
  --paper: #F3F3EF;   --ink: #0B0B0B;
  --ink2: #3D3D39;    --ink3: #6A6A63;
  --ac: #D34200;      --lime: #D8FF3E;   --blue: #2B44FF;
  --surf: #FFFFFF;    --surf2: #FAFAF7;

  /* 交互态 */
  --ink-hi: #262626;
  --ac-hi: #FF631F;   --ac-lo: #B83A00;

  /* 墨底上的文字与分隔（--on-ink 系列 = 墨色容器内的内容） */
  --on-ink: #F3F3EF;
  --on-ink-dim: rgba(255, 255, 255, .62);
  --on-ink-dim2: rgba(255, 255, 255, .78);
  --on-ink-dim3: rgba(255, 255, 255, .48);
  --on-ink-line: rgba(255, 255, 255, .18);
  --on-ink-line2: rgba(255, 255, 255, .25);
  --on-ink-hair: rgba(255, 255, 255, .045);
  --on-ink-hair2: rgba(255, 255, 255, .10);
  --on-ink-sh: rgba(11, 11, 11, .35);

  /* 浅底上的描边 */
  --hair: rgba(11, 11, 11, .14);
  --hair2: rgba(11, 11, 11, .22);

  /* 背景动效：方格/斜纹图案 + mask 透明渐变（与主页 index.html 同一套手法） */
  --stripe: rgba(11, 11, 11, .09);

  /* 状态色 */
  --err: #C2260A;     --ok: #1F6B2E;

  /* 橙底上的文字（亮色主题橙较深，用白字） */
  --on-ac: #FFFFFF;

  /* ── 不反转 · 亮底深字专用 ──
     lime 是设计里唯一的「亮底」，上面必须永远深色字。
     若用 --ink，深色主题下 ink 变近白 → 黄底白字直接糊。 */
  --on-lime: #0B0B0B;
  --on-lime-dim: rgba(11, 11, 11, .68);

  /* ── 不反转 · 墨底浅字专用 ──
     粗野风格的「墨色强调块」语义。若用 --ink 作底，深色主题下
     会翻成近白块，强调语义丢失。 */
  --ink-block: #0B0B0B;
  --on-ink-block: #F3F3EF;

  /* 字体 */
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI Variable Display",
          "Segoe UI Variable Text", "Segoe UI", "PingFang SC",
          "HarmonyOS Sans SC", "Source Han Sans SC", "Hiragino Sans GB",
          "Microsoft YaHei UI", "Microsoft YaHei", "Noto Sans SC",
          "Noto Sans CJK SC", sans-serif;
  --mono: ui-monospace, "SF Mono", "JetBrains Mono", "Cascadia Mono",
          Menlo, Consolas, monospace;

  /* 尺度 */
  --wrap: 1180px;
  --bd: 2.5px;                 /* 标准描边 */
  --bd-thin: 2px;              /* 小元件描边 */
  --sh: 5px 5px 0;             /* 标准硬阴影（配 var(--ink) 使用） */
  --sh-lg: 7px 7px 0;
  --sh-sm: 3px 3px 0;
}

/* ── 深色主题 ────────────────────────────────────────────────
   硬阴影风格反转：--ink 变近白，box-shadow:N N 0 var(--ink)
   会变成浅色实心偏移块 —— 这是「反转粗野主义」的标志效果，刻意保留。
   但墨色强调块走 --ink-block，不参与反转。                      */
:root[data-theme="dark"] {
  --paper: #16150F;   --ink: #EDEDE4;
  --ink2: #A8A69A;    --ink3: #7C7B70;
  --ac: #FF6A2A;      --lime: #D8FF3E;   --blue: #8B9BFF;
  --surf: #1E1D16;    --surf2: #252318;

  --ink-hi: #FFFFFF;
  --ac-hi: #FF8A55;   --ac-lo: #E0551A;

  /* 橙底上的文字：深色主题的橙更亮，用深字保证对比度 */
  --on-ac: #1A1206;

  /* ── on-ink 系列 = 墨色块（--ink-block，不随主题反转）内部的文字与分隔 ──
     块底永远近黑，所以本系列在亮/暗主题下都必须是浅色。
     不要在深色主题里把它们翻成深字——块底不翻，翻了就是黑底黑字。 */
  --on-ink: #F3F3EF;
  --on-ink-dim: rgba(255, 255, 255, .62);
  --on-ink-dim2: rgba(255, 255, 255, .78);
  --on-ink-dim3: rgba(255, 255, 255, .48);
  --on-ink-line: rgba(255, 255, 255, .18);
  --on-ink-line2: rgba(255, 255, 255, .25);
  --on-ink-hair: rgba(255, 255, 255, .045);
  --on-ink-hair2: rgba(255, 255, 255, .10);
  --on-ink-sh: rgba(0, 0, 0, .45);

  --hair: rgba(255, 255, 255, .16);
  --hair2: rgba(255, 255, 255, .24);

  --grid-line: rgba(255, 255, 255, .06);
  --stripe: rgba(255, 255, 255, .09);

  --err: #FF7A5C;     --ok: #5FD47A;

  /* 不反转 —— 深色下同样保持「亮底深字」「墨底浅字」 */
  --on-lime: #16150F;
  --on-lime-dim: rgba(22, 21, 15, .68);
  --ink-block: #0A0905;
  --on-ink-block: #F3F3EF;

  color-scheme: dark;
}

/* ── 2. 基础 ──────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }

/* hidden 属性必须永远生效：.field/.code-box 等设置了 display 的
   作者样式会盖过 UA 的 [hidden]{display:none}，导致该藏的元素常显 */
[hidden] { display: none !important; }

/* ── 2b. 全站背景动效：图案 + 透明度渐变（mask 淡出，与主页一致）──
   ① 方格：视口顶部最密、向下淡出；② 斜纹：右下角最密、向左上淡出。
   两层都是固定层，蒙版随视口，任何滚动位置观感一致。
   底色放 html、body 透明，负 z-index 的固定层才画得出来——
   新页面背景若全白，先检查是否覆盖了这对 html/body 背景规则。
   reduced-motion 由第 15 节全局冻结。 */
html { background: var(--paper); }
body { background: transparent; }

@keyframes gridPan { to { background-position: 52px 0; } }
body::before {
  content: ""; position: fixed; inset: 0; z-index: -1;
  pointer-events: none;
  background-image:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 52px 52px;
  -webkit-mask-image: radial-gradient(125% 95% at 50% -5%, #000 35%, transparent 80%);
          mask-image: radial-gradient(125% 95% at 50% -5%, #000 35%, transparent 80%);
  animation: gridPan 30s linear infinite;
}

@keyframes stripePan { to { background-position: 9.19px 9.19px; } }
body::after {
  content: ""; position: fixed; inset: 0; z-index: -1;
  pointer-events: none;
  background-image: repeating-linear-gradient(45deg, var(--stripe) 0 1.5px, transparent 1.5px 13px);
  -webkit-mask-image: radial-gradient(115% 95% at 108% 108%, #000 22%, transparent 74%);
          mask-image: radial-gradient(115% 95% at 108% 108%, #000 22%, transparent 74%);
  animation: stripePan 13s linear infinite;
}

html { scroll-behavior: smooth; }

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.74;
  letter-spacing: .012em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  /* CJK 排版：语义断行 + 悬挂标点 */
  word-break: normal;
  overflow-wrap: break-word;
  line-break: strict;
  text-spacing-trim: space-first;
  hanging-punctuation: allow-end;
}

h1, h2, h3, h4 { font-weight: 900; line-height: 1.15; text-wrap: balance; letter-spacing: -.03em; }
h1 { font-size: clamp(34px, 4.6vw, 56px); }
h2 { font-size: clamp(26px, 3.2vw, 40px); }
h3 { font-size: clamp(19px, 2vw, 24px); }
p  { text-wrap: pretty; }

a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; }
::selection { background: var(--lime); color: var(--on-lime); }

/* 键盘可达性：所有可聚焦元素统一焦点环 */
:focus-visible {
  outline: var(--bd) solid var(--ac);
  outline-offset: 2px;
}

/* 跳转到内容（无障碍） */
.skip {
  position: absolute; left: -9999px;
}
.skip:focus {
  position: fixed; left: 14px; top: 14px; z-index: 200;
  padding: 10px 16px;
  background: var(--lime); color: var(--on-lime);
  border: var(--bd) solid var(--ink);
  font: 700 13px/1 var(--sans);
  box-shadow: var(--sh) var(--ink);
}

/* ── 3. 布局 ──────────────────────────────────────────────── */
.wrap {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 clamp(20px, 3.2vw, 52px);
}
.wrap-narrow { max-width: 760px; }        /* 内容页正文 */
.wrap-mid    { max-width: 980px; }        /* 结账页 */

@media (min-width: 1400px) { .wrap { max-width: 1360px; } }
@media (min-width: 1720px) { .wrap { max-width: 1560px; } }
@media (min-width: 2200px) { .wrap { max-width: 1840px; } }
@media (min-width: 3000px) { .wrap { max-width: 2160px; } }

/* ── 4. 按钮 ──────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 46px; padding: 0 22px;
  font: 700 14px/1 var(--sans);
  border: var(--bd) solid var(--ink);
  background: var(--paper); color: var(--ink);
  box-shadow: var(--sh) var(--ink);
  cursor: pointer; white-space: nowrap;
  transition: transform .14s, box-shadow .14s, background .16s;
}
.btn:hover  { transform: translate(-2px, -2px); box-shadow: 7px 7px 0 var(--ink); }
.btn:active { transform: translate(3px, 3px);  box-shadow: 1px 1px 0 var(--ink); }

/* 主行动：橙底 */
.btn-p { background: var(--ac); color: var(--on-ac); }
.btn-p:hover { background: var(--ac-hi); }

/* 次要行动：墨底（用 ink-block 保持粗野语义） */
.btn-d { background: var(--ink-block); color: var(--on-ink-block); }
.btn-d:hover { background: var(--ink-hi); }

.btn-sm { height: 36px; padding: 0 15px; font-size: 12.5px; box-shadow: var(--sh-sm) var(--ink); }
.btn-lg { height: 56px; padding: 0 32px; font-size: 16px;   box-shadow: 6px 6px 0 var(--ink); }

.btn[disabled], .btn[aria-disabled="true"] {
  opacity: .45; cursor: not-allowed;
  transform: none !important; box-shadow: var(--sh) var(--ink) !important;
}

/* ── 5. 卡片 ──────────────────────────────────────────────── */
.card {
  border: var(--bd) solid var(--ink);
  background: var(--surf);
  padding: 24px;
  box-shadow: var(--sh) var(--ink);
}
.card-flat { box-shadow: none; }          /* 列表型，不抢视觉 */

/* 墨色强调块（nav / footer / 推荐卡 / 抽屉） */
.block-ink {
  background: var(--ink-block);
  color: var(--on-ink-block);
  border: var(--bd) solid var(--ink);
}

/* 强强调：lime 双装饰（深色下墨块与普通卡反差过弱时用） */
.block-hot {
  background: var(--ink-block);
  color: var(--on-ink-block);
  border: 3px solid var(--lime);
  box-shadow: 10px 10px 0 var(--lime);
}

/* ── 6. 表单 ──────────────────────────────────────────────── */
.field { display: block; margin-bottom: 18px; }
.field > .lb {
  display: block;
  font: 700 11px/1 var(--mono);
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--ink3); margin-bottom: 9px;
}
.input, .select, .textarea {
  width: 100%;
  height: 52px; padding: 0 16px;
  border: var(--bd) solid var(--ink);
  background: var(--surf);
  color: var(--ink);
  font: 600 14px/1 var(--sans);
  outline: none;
  transition: box-shadow .14s, border-color .14s;
}
.textarea { height: auto; min-height: 96px; padding: 14px 16px; line-height: 1.6; }
.input:focus, .select:focus, .textarea:focus { box-shadow: 4px 4px 0 var(--ink); }
.input[aria-invalid="true"], .input.bad { border-color: var(--err); box-shadow: 4px 4px 0 var(--err); }

.hint { margin-top: 8px; font-size: 12.5px; color: var(--ink3); line-height: 1.6; }

/* 表单反馈消息条 */
.msg {
  font: 700 12.5px/1.5 var(--sans);
  padding: 10px 14px;
  border: var(--bd-thin) solid var(--ink);
  background: var(--surf);
  margin-top: 12px;
}
.msg[hidden] { display: none; }
.msg.err   { color: var(--err); border-color: var(--err); }
.msg.ok    { color: var(--ok);  border-color: var(--ok); }
.msg.doing { color: var(--ink3); }

/* ── 7. 表格（后台 / 订单列表）────────────────────────────── */
.tbl-wrap { border: var(--bd) solid var(--ink); background: var(--surf); overflow-x: auto; }
.tbl { width: 100%; border-collapse: collapse; font-size: 14px; }
.tbl th, .tbl td {
  padding: 13px 16px;
  text-align: left;
  border-bottom: var(--bd-thin) solid var(--hair);
}
.tbl th {
  font: 700 10.5px/1 var(--mono);
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink3); background: var(--surf2);
  white-space: nowrap;
}
.tbl tbody tr:last-child td { border-bottom: 0; }
.tbl tbody tr:hover { background: var(--surf2); }
.tbl .num { font-family: var(--mono); font-variant-numeric: tabular-nums; }

/* ── 8. 徽章 ──────────────────────────────────────────────── */
.badge {
  display: inline-flex; align-items: center; gap: 6px;
  font: 700 10px/1 var(--mono);
  letter-spacing: .12em; text-transform: uppercase;
  padding: 5px 9px;
  border: var(--bd-thin) solid var(--ink);
  background: var(--surf);
}
.badge-lime { background: var(--lime); color: var(--on-lime); }
.badge-ac   { background: var(--ac);   color: var(--on-ac); }
.badge-ok   { background: var(--ok);   color: var(--paper); }
.badge-err  { background: var(--err);  color: var(--paper); }

/* ── 9. 提示框（内容页注意事项）───────────────────────────── */
.note {
  border-left: 6px solid var(--ac);
  background: var(--surf2);
  padding: 18px 22px;
  margin: 22px 0;
  font-size: 14.5px; line-height: 1.75;
}
.note > .nt {
  display: block;
  font: 700 10.5px/1 var(--mono);
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--ac); margin-bottom: 9px;
}

/* ── 10. 内容页排版（文章式）──────────────────────────────── */
.prose { max-width: 760px; }
.prose > * + * { margin-top: 1.1em; }
.prose h3 { margin-top: 2em; }
.prose ul, .prose ol { padding-left: 1.4em; }
.prose li { margin-bottom: .5em; line-height: 1.75; }
.prose a { border-bottom: 2px solid var(--ac); }

/* 章节编号（.prose 内 h3 前缀） */
.prose h3 .no {
  display: inline-block; min-width: 2.2em;
  font: 900 12px/1 var(--mono);
  color: var(--ac);
}

/* ── 11. 主题切换按钮 ─────────────────────────────────────── */
.tbtn {
  display: flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; padding: 0; flex: none;
  background: var(--paper);
  border: var(--bd-thin) solid var(--ink);
  color: var(--ink);
  cursor: pointer;
  transition: background .14s, transform .14s;
}
.tbtn:hover {
  background: var(--lime); color: var(--on-lime);
  transform: translate(-1px, -1px);
  box-shadow: var(--sh-sm) var(--ink);
}
.tbtn svg { width: 16px; height: 16px; display: block; }
.tbtn .i-moon { display: none; }
:root[data-theme="dark"] .tbtn .i-sun  { display: none; }
:root[data-theme="dark"] .tbtn .i-moon { display: block; }

/* ── 12. 顶栏（全站共用）──────────────────────────────────── */
.nav {
  position: sticky; top: 0; z-index: 60;
  background: var(--paper);
  border-bottom: var(--bd) solid var(--ink);
}
.nav-in {
  display: flex; align-items: center; gap: 18px;
  padding: 14px 0;
}
.logo {
  display: flex; align-items: center; gap: 10px;
  font: 900 18px/1 var(--sans);
  letter-spacing: -.045em;
}
.logo .mk {
  background: var(--ink-block); color: var(--lime);
  padding: 5px 8px;
  font: 900 12px/1 var(--mono); letter-spacing: .02em;
}
.nav-links { display: flex; gap: 22px; margin-left: auto; font: 600 13px/1 var(--sans); }
.nav-links a { padding: 5px 2px; border-bottom: var(--bd) solid transparent; }
.nav-links a:hover { border-bottom-color: var(--ac); }
.nav-cta { display: flex; gap: 10px; align-items: center; }
@media (max-width: 860px) { .nav-links { display: none; } }

/* ── 13. 页脚（全站共用）──────────────────────────────────── */
.footer {
  background: var(--ink-block);
  color: var(--on-ink-block);
  margin-top: clamp(64px, 7vw, 120px);
  padding: 52px 0 40px;
}
.footer a { color: var(--lime); }
.footer a:hover { text-decoration: underline; }
.footer .fl {
  font: 700 10.5px/1 var(--mono);
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--on-ink-dim); margin-bottom: 14px;
}
/* footer 四列布局（对齐原站结构：产品/资源/支持 + 品牌列） */
.footer .f-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1.1fr 1fr;
  gap: 36px 32px;
}
.footer .fc h5 {
  font: 700 10.5px/1 var(--mono);
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--on-ink-dim); margin: 0 0 14px;
}
.footer .fc a {
  display: block;
  margin-bottom: .62em;
  font-size: 13.5px; line-height: 1.5;
  color: var(--on-ink-dim2);
}
.footer .fc a:hover { color: var(--lime); text-decoration: underline; }
.footer .f-legal {
  margin-top: 36px; padding-top: 18px;
  border-top: 1px solid var(--on-ink-hair);
  font-size: 12px; line-height: 2;
  color: var(--on-ink-dim2);
  display: flex; gap: 6px 16px; flex-wrap: wrap;
}
.footer .f-legal a { color: var(--on-ink-dim2); }
.footer .f-legal a:hover { color: var(--lime); }
.footer .f-brand p {
  font-size: 13px; line-height: 1.75;
  color: var(--on-ink-dim);
  margin: 0;
}
@media (max-width: 900px) {
  .footer .f-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 520px) {
  .footer .f-grid { grid-template-columns: 1fr; }
}

/* ── 14. RTL（阿拉伯语）───────────────────────────────────── */
/* 硬阴影是物理方向，RTL 下必须镜像，否则阴影压在错误一侧 */
[dir="rtl"] .btn:hover,
[dir="rtl"] .card:hover,
[dir="rtl"] .tbtn:hover { box-shadow: -3px 3px 0 var(--ink); transform: translate(2px, -2px); }
[dir="rtl"] .note { border-left: 0; border-right: 6px solid var(--ac); }
[dir="rtl"] .tbl th, [dir="rtl"] .tbl td { text-align: right; }

/* ── 15. 降低动效偏好 ─────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   使用守则（给后续维护者）
   ───────────────────────────────────────────────────────────────────
   1. 亮色作底 → 文字用 --on-lime，绝不用 --ink
      （深色主题下 --ink 变近白，黄底白字糊）
   2. 墨色作底 → 背景 --ink-block，文字 --on-ink-block，绝不用 --ink/--paper
      （深色主题下 --ink 翻成近白，强调语义丢失）
   3. 硬阴影写 box-shadow:N N 0 var(--ink)，不要加模糊半径
   4. RTL 页面记得检查阴影镜像（[dir="rtl"] 已内置常见场景）
   5. 新增组件优先用现有变量，不要硬编码色值
   ═══════════════════════════════════════════════════════════════════ */

.download-dialog{color:var(--ink);background:var(--paper);border:2.5px solid var(--ink);box-shadow:6px 6px 0 var(--ink);width:min(92vw,540px);padding:28px;margin:auto}.download-dialog::backdrop{background:#0009}.download-dialog form{text-align:right}.download-dialog h2{margin:18px 0}.download-content{display:flex;flex-direction:column;gap:14px}.download-content .btn{white-space:normal;height:auto;min-height:44px;padding:12px}