/* ============================================================
   知序软件 · 工程交付档案
   版式：非对称栅格 / 细分栏 / 表格清单 / 编号系统
   配色：纸白 + 墨黑 + 单一赭红，无渐变、无阴影、无圆角卡片
   ============================================================ */

:root {
  --paper: #f4f3ef;
  --paper-2: #fbfaf7;
  --paper-3: #ebe9e2;
  --ink: #15171a;
  --ink-2: #42474c;
  --muted: #787c79;
  --line: #d8d6cf;
  --line-2: #a9aaa2;
  --accent: #a63b24;
  --accent-ink: #832c19;
  --ok: #226046;
  --w: 1140px;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.8;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}
body.no-scroll { overflow: hidden; }
a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; color: inherit; border-radius: 0; }
button { background: none; border: 0; cursor: pointer; }
img { display: block; max-width: 100%; }
ul, ol { list-style: none; }
h1, h2, h3, h4, p { margin: 0; }
svg.ic { flex: 0 0 auto; }
::selection { background: var(--ink); color: var(--paper); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.shell { width: 100%; max-width: var(--w); margin: 0 auto; padding: 0 20px; }
.mono { font-family: var(--mono); }
.label,
.eyebrow {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--mono); font-size: 9.5px; font-weight: 500;
  letter-spacing: .15em; text-transform: uppercase; color: var(--muted);
}
.label::before { content: ""; width: 18px; height: 1px; background: var(--accent); flex: none; }
.skip {
  position: absolute; left: -9999px; top: 0; z-index: 120;
  background: var(--ink); color: var(--paper); padding: 10px 16px; font-size: 12px;
}
.skip:focus { left: 12px; top: 12px; }

/* ---------- 按钮与链接 ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  min-height: 48px; padding: 0 20px;
  background: var(--ink); color: var(--paper); border: 1px solid var(--ink);
  font-size: 13.5px; font-weight: 600; letter-spacing: .02em;
  transition: background .16s ease, border-color .16s ease, color .16s ease;
}
.btn:hover { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn.sm { min-height: 38px; padding: 0 13px; font-size: 12px; }
.btn.block { width: 100%; }
.btn.ghost { background: transparent; color: var(--ink); border-color: var(--line-2); }
.btn.ghost:hover { background: transparent; color: var(--accent); border-color: var(--accent); }
.btn:disabled { opacity: .6; cursor: default; }
.link {
  display: inline-flex; align-items: center; gap: 5px;
  color: var(--accent); font-size: 12px;
  border-bottom: 1px solid currentColor; padding-bottom: 1px;
}
.link:hover { color: var(--accent-ink); }

/* ---------- 顶部 ---------- */
.top {
  position: sticky; top: 0; z-index: 50;
  background: var(--paper); border-bottom: 1px solid var(--line-2);
}
.top-in { display: flex; align-items: center; height: 58px; gap: 22px; }
.brand { display: flex; align-items: center; gap: 9px; flex: none; color: var(--ink); }
.brand-mark { display: block; line-height: 0; }
.brand-mark svg { display: block; }
.brand-name {
  display: block; font-size: 14px; font-weight: 700;
  letter-spacing: -.005em; line-height: 1.15;
}
.brand-name em {
  display: block; font-family: var(--mono); font-style: normal;
  font-size: 7px; letter-spacing: .14em; color: var(--muted); margin-top: 3px;
}
.mainnav { display: none; align-items: center; gap: 24px; }
.mainnav a {
  position: relative; display: inline-flex; align-items: baseline; gap: 5px;
  font-size: 12.5px; color: var(--ink-2); padding: 18px 0;
}
.mainnav a i { font-family: var(--mono); font-style: normal; font-size: 8.5px; color: var(--muted); letter-spacing: .04em; }
.mainnav a.on { color: var(--ink); }
.mainnav a.on i { color: var(--accent); }
.mainnav a::after {
  content: ""; position: absolute; left: 0; right: 100%; bottom: 12px;
  height: 2px; background: var(--accent); transition: right .18s ease;
}
.mainnav a:hover::after, .mainnav a.on::after { right: 0; }
.top-tools { margin-left: auto; display: flex; align-items: center; gap: 14px; }
.tool-link { font-size: 11.5px; color: var(--ink-2); white-space: nowrap; }
.tool-link.on, .tool-link:hover { color: var(--accent); }
.tool-bag { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; color: var(--ink-2); white-space: nowrap; }
.tool-bag b {
  display: inline-grid; place-items: center; min-width: 17px; height: 17px; padding: 0 2px;
  border: 1px solid var(--line-2); font-family: var(--mono); font-size: 9px; line-height: 1;
  color: var(--ink);
}
.tool-bag.on b { border-color: var(--accent); color: var(--accent); }
.menu-btn {
  display: grid; place-items: center; width: 42px; height: 42px;
  border: 1px solid var(--line-2); color: var(--ink);
}
.menu-btn:hover { border-color: var(--ink); }

/* ---------- 移动菜单 ---------- */
.scrim {
  position: fixed; inset: 0; z-index: 60; background: rgba(15, 17, 20, .5);
  opacity: 0; transition: opacity .2s ease;
}
.scrim.show { opacity: 1; }
.drawer {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 70;
  width: min(90vw, 380px); background: var(--paper);
  border-left: 1px solid var(--line-2);
  transform: translateX(101%); visibility: hidden;
  transition: transform .24s ease, visibility .24s ease;
  display: flex; flex-direction: column;
  padding: 16px 20px calc(20px + env(safe-area-inset-bottom));
  overflow-y: auto;
}
.drawer.open { transform: translateX(0); visibility: visible; }
.drawer-top {
  display: flex; align-items: center; justify-content: space-between;
  padding-bottom: 14px; border-bottom: 1px solid var(--line-2);
}
.drawer-close { width: 42px; height: 42px; display: grid; place-items: center; border: 1px solid var(--line); }
.drawer-nav { padding: 4px 0 16px; }
.drawer-nav a {
  display: flex; align-items: center; justify-content: space-between;
  min-height: 52px; padding: 10px 0; border-bottom: 1px solid var(--line);
  font-size: 16px; font-weight: 700; letter-spacing: -.01em;
}
.drawer-nav a i { font-family: var(--mono); font-style: normal; font-size: 9px; font-weight: 400; color: var(--muted); }
.drawer-foot { margin-top: auto; border-top: 1px solid var(--line-2); padding-top: 14px; }
.drawer-meta { margin-bottom: 14px; }
.drawer-meta p { font-size: 12px; color: var(--ink-2); margin-bottom: 8px; }
.drawer-meta em {
  display: block; font-family: var(--mono); font-style: normal;
  font-size: 9px; letter-spacing: .12em; color: var(--muted); margin-bottom: 1px;
}

/* ---------- 档案头 ---------- */
.rec-head { padding: 26px 0 30px; }
.rec-inner { display: grid; gap: 26px; }
.rec-main .label { margin-bottom: 16px; }
.rec-title {
  font-size: clamp(27px, 6vw, 44px); line-height: 1.14;
  letter-spacing: -.025em; font-weight: 800;
}
.rec-lead {
  margin-top: 14px; max-width: 39em;
  font-size: 13.5px; line-height: 1.95; color: var(--ink-2);
}
.rec-actions { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 22px; }
.rec-meta {
  display: flex; flex-wrap: wrap; gap: 5px 18px; margin-top: 18px;
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .04em; color: var(--muted);
}
.rec-meta span { display: inline-flex; align-items: center; gap: 7px; }
.rec-meta span::before { content: ""; width: 4px; height: 4px; background: var(--accent); flex: none; }
.rec-side { min-width: 0; }
.rec-side-note { margin-top: 8px; font-size: 11px; line-height: 1.8; color: var(--muted); }

/* 档案字段表 */
.spec { border-top: 1px solid var(--line-2); }
.spec-row {
  display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 12px;
  padding: 9px 0; border-bottom: 1px solid var(--line); align-items: baseline;
}
.spec-row span {
  font-family: var(--mono); font-size: 9px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--muted);
}
.spec-row b { font-size: 12.5px; font-weight: 600; line-height: 1.65; min-width: 0; word-break: break-word; }

/* ---------- 区块 ---------- */
.sec { border-top: 1px solid var(--line-2); }
.sec-in { display: grid; gap: 14px; padding-top: 30px; padding-bottom: 34px; }
.rail { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; }
.rail b {
  font-family: var(--mono); font-size: 10px; font-weight: 500;
  letter-spacing: .06em; color: var(--accent);
}
.rail span {
  font-family: var(--mono); font-size: 9px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--muted);
}
.sec-title {
  font-size: 21px; line-height: 1.35; letter-spacing: -.02em; font-weight: 700;
}
.sec-note { margin-top: 7px; max-width: 46em; font-size: 12px; line-height: 1.9; color: var(--muted); }
.sec-body { min-width: 0; }
.sec-foot { margin-top: 18px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }

/* ---------- 表格 ---------- */
.tbl { width: 100%; border-collapse: collapse; margin-top: 12px; }
.tbl th {
  text-align: left; vertical-align: bottom;
  padding: 0 10px 8px 0; border-bottom: 1px solid var(--line-2);
  font-family: var(--mono); font-size: 9px; font-weight: 500;
  letter-spacing: .1em; text-transform: uppercase; color: var(--muted);
}
.tbl th:last-child, .tbl td:last-child { padding-right: 0; }
.tbl td {
  padding: 11px 10px 11px 0; border-bottom: 1px solid var(--line);
  font-size: 12.5px; line-height: 1.75; color: var(--ink-2);
  vertical-align: top;
}
.tbl td b { color: var(--ink); font-weight: 600; }
.tbl td small { display: block; font-size: 10.5px; color: var(--muted); line-height: 1.6; }
.tbl .num { font-family: var(--mono); font-size: 11px; white-space: nowrap; }
.tbl .accent { color: var(--accent); }
.tbl-wrap { overflow: visible; }

/* ---------- 案例档案 ---------- */
.case { display: grid; gap: 6px; padding: 15px 0; border-bottom: 1px solid var(--line); }
.case-no {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--mono); font-size: 9px; letter-spacing: .08em; color: var(--accent);
}
.case-no i {
  font-style: normal; font-family: var(--mono); font-size: 8px; letter-spacing: .04em;
  color: var(--muted); border: 1px solid var(--line-2); padding: 0 4px; line-height: 1.5;
}
.case-title { font-size: 14.5px; font-weight: 700; letter-spacing: -.01em; line-height: 1.5; }
.case-lines { display: grid; gap: 5px; margin-top: 7px; }
.case-line { display: grid; grid-template-columns: 58px minmax(0, 1fr); gap: 10px; }
.case-line span {
  font-family: var(--mono); font-size: 8.5px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--muted); padding-top: 2px;
}
.case-line b { font-size: 11.5px; font-weight: 500; line-height: 1.7; color: var(--ink-2); }

/* ---------- 方案目录行 ---------- */
.list-hd {
  display: flex; justify-content: space-between; gap: 14px;
  padding: 9px 0; border-top: 1px solid var(--line-2); border-bottom: 1px solid var(--line-2);
  font-family: var(--mono); font-size: 9px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--muted);
}
.pkg {
  display: grid; align-items: start; gap: 8px 12px;
  grid-template-columns: 30px minmax(0, 1fr) auto;
  grid-template-areas: "no name price" "no cycle go";
  padding: 15px 0; border-bottom: 1px solid var(--line);
  transition: background .15s ease;
}
.pkg:hover { background: var(--paper-2); }
.pkg-no {
  grid-area: no; font-family: var(--mono); font-size: 9.5px;
  letter-spacing: .04em; color: var(--muted); padding-top: 3px;
}
.pkg-name { grid-area: name; min-width: 0; }
.pkg-name b { display: block; font-size: 15px; line-height: 1.4; letter-spacing: -.01em; font-weight: 700; }
.pkg-name small { display: block; margin-top: 3px; font-size: 11.5px; line-height: 1.7; color: var(--ink-2); }
.pkg-name em {
  display: block; margin-top: 4px; font-style: normal;
  font-family: var(--mono); font-size: 9px; letter-spacing: .03em; color: var(--muted);
  word-break: break-word;
}
.pkg-badge {
  display: inline-block; margin-left: 8px; vertical-align: 1px;
  font-style: normal; font-family: var(--mono); font-size: 8.5px; font-weight: 400;
  letter-spacing: .04em; color: var(--accent);
}
.pkg-cycle {
  grid-area: cycle; font-size: 10.5px; color: var(--muted);
  font-family: var(--mono); letter-spacing: .02em; align-self: end;
}
.pkg-cycle em { font-style: normal; color: var(--line-2); margin-right: 5px; }
.pkg-price { grid-area: price; text-align: right; align-self: start; }
.pkg-price b {
  display: block; font-family: var(--mono); font-size: 14px;
  font-weight: 600; letter-spacing: -.02em; line-height: 1.4;
}
.pkg-price b small { font-size: 9px; font-weight: 400; margin-right: 1px; }
.pkg-price em { display: block; font-style: normal; font-size: 9px; color: var(--muted); margin-top: 2px; }
.pkg-go { grid-area: go; justify-self: end; align-self: end; color: var(--muted); line-height: 0; }
.pkg:hover .pkg-go { color: var(--accent); }

/* ---------- 详情 ---------- */
.detail { display: grid; grid-template-columns: 1fr; gap: 0; padding-bottom: 40px; }
.detail-main { min-width: 0; }
.buy { min-width: 0; padding-top: 14px; border-top: 2px solid var(--ink); margin-top: 22px; }
.buy-label {
  font-family: var(--mono); font-size: 9px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--muted);
}
.buy-price {
  margin-top: 8px; font-family: var(--mono); font-size: 30px;
  font-weight: 600; letter-spacing: -.03em; line-height: 1.2;
}
.buy-price small { font-size: 13px; font-weight: 400; margin-right: 2px; }
.buy-ref { margin-top: 4px; font-size: 10.5px; color: var(--muted); }
.buy-ref s { color: var(--line-2); }
.buy-spec { margin-top: 16px; }
.buy-actions { margin-top: 18px; display: grid; gap: 8px; }
.buy-note { margin-top: 12px; font-size: 10.5px; line-height: 1.8; color: var(--muted); }
.buy-links { margin-top: 14px; display: flex; flex-direction: column; gap: 6px; }
.buy-links a { font-size: 11px; color: var(--ink-2); border-bottom: 1px solid var(--line); padding-bottom: 5px; display: flex; justify-content: space-between; }
.buy-links a:hover { color: var(--accent); border-color: var(--accent); }

.dsec { border-top: 1px solid var(--line); padding: 22px 0 4px; }
.dsec:first-child { border-top: 0; }
.dsec-head { display: flex; align-items: baseline; gap: 11px; margin-bottom: 10px; }
.dsec-head b {
  font-family: var(--mono); font-size: 9.5px; font-weight: 500;
  letter-spacing: .06em; color: var(--accent);
}
.dsec-head h2 { font-size: 18px; font-weight: 700; letter-spacing: -.015em; line-height: 1.4; }
.dsec-lead { font-size: 12.5px; line-height: 1.9; color: var(--ink-2); margin-bottom: 10px; }
.dsec-text { font-size: 12px; line-height: 1.9; color: var(--muted); margin-top: 10px; }

.dl { border-top: 1px solid var(--line-2); margin-top: 12px; }
.dl li {
  display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 8px;
  padding: 10px 0; border-bottom: 1px solid var(--line);
  font-size: 12.5px; line-height: 1.75; color: var(--ink-2);
}
.dl li span:first-child { font-family: var(--mono); font-size: 9px; color: var(--muted); padding-top: 3px; }

.check-list { border-top: 1px solid var(--line-2); margin-top: 12px; }
.check-list li {
  display: grid; grid-template-columns: 16px minmax(0, 1fr); gap: 9px;
  padding: 10px 0; border-bottom: 1px solid var(--line);
  font-size: 12.5px; line-height: 1.75; color: var(--ink-2);
}
.check-list li i {
  display: block; width: 10px; height: 10px; margin-top: 5px;
  border: 1px solid var(--line-2);
}

.mile { display: grid; gap: 0; margin-top: 12px; border-top: 1px solid var(--line-2); }
.mile-row { display: grid; gap: 3px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.mile-when {
  font-family: var(--mono); font-size: 9px; letter-spacing: .06em;
  color: var(--accent); text-transform: uppercase;
}
.mile-phase { font-size: 13.5px; font-weight: 700; line-height: 1.5; }
.mile-out, .mile-check { font-size: 11.5px; line-height: 1.7; color: var(--ink-2); }
.mile-out em, .mile-check em {
  font-style: normal; font-family: var(--mono); font-size: 8.5px;
  letter-spacing: .08em; color: var(--muted); margin-right: 6px;
}
.mile-check { color: var(--muted); }

.evidence { margin-top: 12px; border-top: 1px solid var(--line-2); padding-top: 12px; }
.evidence-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.evidence-head b { font-family: var(--mono); font-size: 9px; letter-spacing: .08em; color: var(--accent); }
.evidence-head i {
  font-style: normal; font-family: var(--mono); font-size: 8px;
  letter-spacing: .04em; color: var(--muted); border: 1px solid var(--line-2); padding: 0 4px;
}
.evidence-grid { display: grid; gap: 4px; margin-top: 8px; }
.evidence-line { display: grid; grid-template-columns: 58px minmax(0, 1fr); gap: 10px; }
.evidence-line span { font-family: var(--mono); font-size: 8.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); padding-top: 2px; }
.evidence-line b { font-size: 11.5px; font-weight: 500; line-height: 1.7; color: var(--ink-2); }

/* ---------- 目录页 ---------- */
.catalog-head { padding-bottom: 4px; }
.searchbar { display: flex; gap: 0; margin-top: 16px; max-width: 560px; }
.searchbar input {
  flex: 1; min-width: 0; height: 46px; padding: 0 12px;
  border: 1px solid var(--line-2); border-right: 0; background: var(--paper-2);
  font-size: 13px;
}
.searchbar input::placeholder { color: var(--muted); }
.searchbar button { height: 46px; padding: 0 18px; background: var(--ink); color: var(--paper); font-size: 12px; border: 1px solid var(--ink); }
.filters { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-top: 16px; }
.filter {
  display: inline-flex; align-items: baseline; gap: 5px;
  padding: 4px 0; font-size: 12px; color: var(--ink-2);
  border-bottom: 1px solid transparent;
}
.filter em { font-style: normal; font-family: var(--mono); font-size: 8.5px; color: var(--muted); }
.filter.on { color: var(--accent); border-color: var(--accent); }
.filter:hover { color: var(--accent); }
.toolbar {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px;
  margin-top: 18px; padding: 9px 0;
  border-top: 1px solid var(--line-2);
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .03em; color: var(--muted);
}
.sorts { display: flex; flex-wrap: wrap; gap: 12px; }
.sorts a { color: var(--muted); }
.sorts a.on { color: var(--accent); }
.catalog-note { margin: 22px 0 48px; font-size: 11.5px; line-height: 1.9; color: var(--muted); max-width: 60em; }

/* ---------- 清单 / 结算 ---------- */
.bag-layout { display: grid; gap: 26px; padding: 6px 0 48px; }
.bag-items { border-top: 1px solid var(--line-2); }
.bag-item {
  display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: 10px;
  padding: 14px 0; border-bottom: 1px solid var(--line);
}
.bag-item-no { font-family: var(--mono); font-size: 9px; color: var(--muted); padding-top: 3px; }
.bag-item-name { font-size: 14px; font-weight: 700; line-height: 1.5; }
.bag-item-name a:hover { color: var(--accent); }
.bag-item-meta { margin-top: 3px; font-family: var(--mono); font-size: 9px; color: var(--muted); word-break: break-word; }
.bag-item-rm { margin-top: 6px; font-size: 10.5px; color: var(--muted); border-bottom: 1px solid var(--line-2); padding-bottom: 1px; }
.bag-item-rm:hover { color: var(--accent); border-color: var(--accent); }
.bag-item-amt { font-family: var(--mono); font-size: 13px; white-space: nowrap; }
.bag-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }

.sum { border-top: 2px solid var(--ink); padding-top: 12px; }
.sum h2 { font-size: 14px; font-weight: 700; margin-bottom: 8px; }
.sum-row { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; border-bottom: 1px solid var(--line); font-size: 11.5px; color: var(--ink-2); }
.sum-row b { font-family: var(--mono); font-size: 10.5px; color: var(--ink); font-weight: 500; }
.sum-total { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line-2); }
.sum-total span { font-size: 12px; }
.sum-total strong { font-family: var(--mono); font-size: 22px; font-weight: 600; letter-spacing: -.02em; }
.sum-actions { margin-top: 14px; display: grid; gap: 8px; }
.sum-note { margin-top: 10px; font-size: 10.5px; line-height: 1.8; color: var(--muted); }
.sum-note a { color: var(--ink-2); border-bottom: 1px solid var(--line-2); }

.checkout-wrap { padding-bottom: 26px; }
.steps { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; padding: 14px 0; border-bottom: 1px solid var(--line-2); font-family: var(--mono); font-size: 9px; letter-spacing: .08em; text-transform: uppercase; }
.steps span { color: var(--muted); }
.steps span i { font-style: normal; color: var(--line-2); margin-right: 5px; }
.steps span.done { color: var(--ink-2); }
.steps span.done i { color: var(--ok); }
.steps span.curr { color: var(--accent); }
.steps span.curr i { color: var(--accent); }
.steps s { flex: 1; min-width: 12px; height: 1px; background: var(--line); }

.ct-section { border-top: 1px solid var(--line); padding: 20px 0 6px; }
.ct-title { display: flex; align-items: baseline; gap: 10px; margin-bottom: 10px; }
.ct-title b { font-family: var(--mono); font-size: 9.5px; font-weight: 500; color: var(--accent); }
.ct-title h2 { font-size: 16px; font-weight: 700; letter-spacing: -.01em; }
.ct-items { border-top: 1px solid var(--line-2); }
.ct-item { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; gap: 10px; padding: 11px 0; border-bottom: 1px solid var(--line); }
.ct-item-no { font-family: var(--mono); font-size: 9px; color: var(--muted); padding-top: 3px; }
.ct-item h3 { font-size: 13.5px; font-weight: 700; line-height: 1.5; }
.ct-item-meta { font-family: var(--mono); font-size: 9px; color: var(--muted); margin-top: 2px; word-break: break-word; }
.ct-item-price { font-family: var(--mono); font-size: 12.5px; white-space: nowrap; }
.ct-form-rows { display: grid; gap: 12px; margin-top: 4px; }
.field { display: grid; gap: 5px; }
.field label { font-family: var(--mono); font-size: 9.5px; letter-spacing: .06em; color: var(--ink-2); }
.field label .req { color: var(--accent); }
.field input, .field textarea {
  width: 100%; height: 48px; padding: 0 12px;
  border: 1px solid var(--line-2); background: var(--paper-2);
  font-size: 14px; color: var(--ink);
}
.field input::placeholder { color: var(--muted); font-size: 12px; }
.field input:focus, .field textarea:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }
.field-row { display: grid; gap: 12px; }
.ct-rows { margin-top: 4px; border-top: 1px solid var(--line-2); }
.ct-row { display: flex; justify-content: space-between; gap: 14px; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 11.5px; color: var(--ink-2); }
.ct-row b { font-family: var(--mono); font-size: 10.5px; font-weight: 500; color: var(--ink); text-align: right; }
.ct-grand { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line-2); }
.ct-grand strong { font-family: var(--mono); font-size: 24px; font-weight: 600; letter-spacing: -.02em; }
.ct-note { margin-top: 8px; font-size: 10.5px; line-height: 1.8; color: var(--muted); }
.checkline { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 10px; align-items: start; font-size: 11.5px; line-height: 1.85; color: var(--ink-2); }
.checkline input { width: 16px; height: 16px; margin-top: 4px; accent-color: var(--accent); }
.checkline a { color: var(--accent); border-bottom: 1px solid currentColor; }
.ct-submit { margin-top: 16px; display: grid; gap: 8px; }
.ct-sticky {
  position: sticky; bottom: 0; z-index: 20;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin-top: 18px; padding: 10px 0 calc(10px + env(safe-area-inset-bottom));
  background: var(--paper); border-top: 1px solid var(--line-2);
}
.ct-sticky p { font-size: 11px; color: var(--muted); }
.ct-sticky b { font-family: var(--mono); font-size: 18px; color: var(--ink); margin-left: 4px; }

/* ---------- 订单 ---------- */
.page-head-slim { padding: 24px 0 26px; }
.order-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; padding: 4px 0 18px; border-bottom: 1px solid var(--line-2); }
.order-head h1 { font-size: clamp(22px, 5vw, 34px); letter-spacing: -.02em; line-height: 1.3; font-weight: 800; }
.state {
  font-family: var(--mono); font-size: 9px; letter-spacing: .08em;
  border: 1px solid var(--line-2); padding: 1px 5px; color: var(--ink-2);
}
.state.pending { color: var(--accent); border-color: var(--accent); }
.state.paid { color: var(--ok); border-color: var(--ok); }
.state.closed { color: var(--muted); }
.order-grid { display: grid; gap: 26px; padding: 8px 0 46px; }
.order-block { border-top: 1px solid var(--line-2); padding-top: 12px; margin-top: 20px; }
.order-block:first-child { margin-top: 0; }
.order-block h2 { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; margin-bottom: 6px; }
.order-item { display: flex; justify-content: space-between; gap: 14px; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 12px; }
.order-item b { font-size: 13px; font-weight: 600; }
.order-item em { font-style: normal; font-family: var(--mono); font-size: 9px; color: var(--muted); display: block; margin-top: 2px; }
.order-item span:last-child { font-family: var(--mono); font-size: 12px; white-space: nowrap; }
.kv { border-top: 1px solid var(--line-2); margin-top: 8px; }
.kv > div { display: flex; justify-content: space-between; gap: 14px; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 11.5px; }
.kv span { color: var(--muted); flex: none; }
.kv b { font-weight: 500; text-align: right; word-break: break-word; }
.kv b.strong { font-family: var(--mono); font-size: 14px; font-weight: 600; }
.deliver { border-top: 2px solid var(--ok); padding: 14px 0 4px; margin-top: 18px; }
.deliver-head { display: flex; gap: 9px; align-items: flex-start; margin-bottom: 8px; }
.deliver-head h3 { font-size: 14px; font-weight: 700; }
.deliver-head p { font-size: 11.5px; line-height: 1.8; color: var(--ink-2); margin-top: 2px; }
.deliver-label { font-family: var(--mono); font-size: 9px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin: 10px 0 2px; }
.deliver-item { border-top: 1px solid var(--line); padding: 9px 0; }
.deliver-item p { font-size: 12px; line-height: 1.7; }
.deliver-item .link { font-size: 11px; word-break: break-all; }
.deliver-item .pwd { font-family: var(--mono); font-size: 9.5px; color: var(--muted); margin-top: 3px; }
.deliver-foot { margin-top: 10px; font-size: 10.5px; line-height: 1.8; color: var(--muted); }
.order-list { border-top: 1px solid var(--line-2); margin-top: 6px; }
.order-line { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 14px; padding: 13px 0; border-bottom: 1px solid var(--line); }
.order-line-no { font-family: var(--mono); font-size: 9.5px; color: var(--muted); grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.order-line-title { font-size: 13px; font-weight: 600; line-height: 1.6; }
.order-line-meta { font-size: 10px; color: var(--muted); font-family: var(--mono); }
.order-line-side { text-align: right; }
.order-line-amt { font-family: var(--mono); font-size: 13px; }
.order-line-acts { display: flex; justify-content: flex-end; gap: 6px; margin-top: 6px; flex-wrap: wrap; }

/* ---------- 支付 ---------- */
.pay-doc { padding: 26px 0 46px; max-width: 520px; }
.pay-doc .label { margin-bottom: 14px; }
.pay-no { font-family: var(--mono); font-size: 10px; color: var(--muted); margin-bottom: 4px; word-break: break-all; }
.pay-amount { font-family: var(--mono); font-size: 34px; font-weight: 600; letter-spacing: -.04em; line-height: 1.2; }
.pay-subject { font-size: 12.5px; color: var(--ink-2); margin-top: 4px; }
.pay-body { border-top: 1px solid var(--line-2); margin-top: 16px; padding-top: 14px; }
.pay-actions { display: grid; gap: 8px; margin-top: 16px; }
.pay-result { padding: 26px 0 46px; max-width: 520px; }
.pay-result h1 { font-size: 22px; font-weight: 700; letter-spacing: -.02em; margin-top: 10px; }
.pay-result .lead { font-size: 12.5px; line-height: 1.9; color: var(--ink-2); margin-top: 6px; }

/* ---------- 关于 / 联系 ---------- */
.about-grid, .contact-grid { display: grid; gap: 26px; padding: 8px 0 46px; }
.about-main, .contact-main { min-width: 0; }
.about-side, .contact-side { min-width: 0; }
.qual { border-top: 2px solid var(--ink); padding-top: 10px; }
.qual h3 { font-size: 12px; font-weight: 700; margin-bottom: 6px; }
.qual > div { display: grid; grid-template-columns: 74px minmax(0, 1fr); gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--line); font-size: 10.5px; line-height: 1.7; }
.qual span { color: var(--muted); }
.qual b { font-weight: 500; word-break: break-word; }
.points { border-top: 1px solid var(--line-2); margin-top: 10px; }
.points li { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 8px; padding: 11px 0; border-bottom: 1px solid var(--line); }
.points li b { display: block; font-size: 12.5px; font-weight: 700; line-height: 1.6; }
.points li span:first-child { font-family: var(--mono); font-size: 9px; color: var(--muted); padding-top: 2px; }
.points li p { font-size: 11px; line-height: 1.8; color: var(--ink-2); margin-top: 2px; }
.side-note { margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--line-2); }
.side-note p { font-size: 11px; line-height: 1.85; color: var(--muted); margin-bottom: 10px; }
.channels { border-top: 1px solid var(--line-2); }
.channel { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 10px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.channel-icon { color: var(--muted); line-height: 0; padding-top: 1px; }
.channel-label { font-family: var(--mono); font-size: 9px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.channel-value { font-family: var(--mono); font-size: 13.5px; color: var(--ink); word-break: break-all; margin-top: 2px; }
.channel-hint { font-size: 10.5px; color: var(--muted); margin-top: 2px; }

/* ---------- 问答 ---------- */
.qa { width: 100%; border-collapse: collapse; margin-top: 12px; }
.qa tr { border-bottom: 1px solid var(--line); }
.qa tr:hover { background: var(--paper-2); }
.qa td { padding: 12px 10px 12px 0; vertical-align: top; font-size: 12px; line-height: 1.85; color: var(--ink-2); }
.qa .qa-no { width: 34px; font-family: var(--mono); font-size: 9px; color: var(--muted); }
.qa .qa-q { width: 34%; font-size: 12.5px; font-weight: 600; color: var(--ink); }

/* ---------- 规则文档 ---------- */
.doc-layout { display: grid; gap: 22px; padding: 4px 0 46px; }
.doc-toc { border-top: 2px solid var(--ink); padding-top: 10px; }
.doc-toc h3 { font-size: 10px; font-family: var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); font-weight: 500; margin-bottom: 8px; }
.doc-toc a { display: block; padding: 6px 0; border-bottom: 1px solid var(--line); font-size: 11.5px; color: var(--ink-2); }
.doc-toc a:hover { color: var(--accent); }
.doc-meta { margin-top: 10px; font-family: var(--mono); font-size: 9px; color: var(--muted); line-height: 1.8; }
.prose { min-width: 0; }
.prose .updated { font-family: var(--mono); font-size: 9px; letter-spacing: .05em; color: var(--muted); margin-bottom: 4px; }
.prose h2 {
  font-size: 15px; font-weight: 700; letter-spacing: -.005em;
  margin: 24px 0 7px; padding-top: 14px; border-top: 1px solid var(--line);
}
.prose h2:first-of-type { border-top: 0; padding-top: 0; margin-top: 16px; }
.prose p { font-size: 12.5px; line-height: 2; color: var(--ink-2); margin-bottom: 9px; }
.prose ol { list-style: decimal; padding-left: 1.4em; margin: 4px 0 12px; }
.prose ol li { font-size: 12.5px; line-height: 2; color: var(--ink-2); margin-bottom: 4px; }
.prose a { color: var(--accent); border-bottom: 1px solid currentColor; }

/* ---------- 通用提示 ---------- */
.empty {
  border-top: 1px solid var(--line-2); border-bottom: 1px solid var(--line);
  padding: 34px 0; margin: 18px 0;
}
.empty p { font-size: 12.5px; color: var(--muted); margin: 8px 0 14px; max-width: 34em; }
.notebox {
  display: flex; gap: 9px; align-items: flex-start;
  margin-top: 14px; padding: 12px 0; border-top: 1px solid var(--line-2); border-bottom: 1px solid var(--line);
  font-size: 11.5px; line-height: 1.85; color: var(--ink-2);
}
.notebox svg { margin-top: 2px; color: var(--muted); }
.notebox b { color: var(--ink); }
.notebox.warn { border-top-color: var(--accent); }
.notebox.warn svg { color: var(--accent); }
.alert { border-top: 2px solid var(--accent); border-bottom: 1px solid var(--line); padding: 10px 0; margin-top: 14px; }
.alert b { display: block; font-size: 12px; color: var(--accent); margin-bottom: 4px; }
.alert span { display: block; font-size: 11.5px; line-height: 1.8; color: var(--ink-2); }
.panel { border-top: 1px solid var(--line-2); padding-top: 12px; }
.panel h2 { font-size: 13px; font-weight: 700; display: flex; align-items: center; gap: 7px; }
.panel-lead { font-size: 11.5px; color: var(--muted); margin: 4px 0 6px; }

/* ---------- 页脚 ---------- */
.foot { background: var(--paper-2); border-top: 1px solid var(--line-2); }
.foot-rule {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 16px;
  padding: 11px 0; border-bottom: 1px solid var(--line);
  font-family: var(--mono); font-size: 8.5px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--muted);
}
.foot-grid { display: grid; gap: 22px; padding: 26px 0 24px; }
.foot-brand { min-width: 0; }
.foot-intro { margin-top: 10px; font-size: 11px; line-height: 1.85; color: var(--ink-2); max-width: 26em; }
.foot-contact { margin-top: 12px; }
.foot-contact p { font-size: 10.5px; color: var(--ink-2); margin-bottom: 5px; }
.foot-contact em { font-style: normal; font-family: var(--mono); font-size: 8.5px; color: var(--muted); margin-right: 6px; }
.foot-col h4 { font-family: var(--mono); font-size: 9px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; }
.foot-col a { display: block; font-size: 11px; line-height: 2.1; color: var(--ink-2); }
.foot-col a:hover { color: var(--accent); }
.foot-org p { font-size: 10px; line-height: 1.8; color: var(--ink-2); margin-bottom: 5px; word-break: break-word; }
.foot-org em { display: block; font-style: normal; font-family: var(--mono); font-size: 8px; letter-spacing: .08em; color: var(--muted); }
.foot-org a { color: var(--accent); }
.foot-btm {
  display: flex; flex-direction: column; gap: 4px;
  padding: 12px 0 22px; border-top: 1px solid var(--line);
  font-family: var(--mono); font-size: 8.5px; line-height: 1.8; color: var(--muted);
}
.devbar { background: var(--paper-3); border-top: 1px solid var(--line); padding: 8px 20px; font-family: var(--mono); font-size: 9px; color: var(--ink-2); }
.devbar b { color: var(--accent); margin-right: 6px; letter-spacing: .06em; }
.toast {
  position: fixed; left: 50%; bottom: 22px; transform: translate(-50%, 12px);
  z-index: 110; max-width: calc(100vw - 32px);
  background: var(--ink); color: var(--paper); padding: 10px 16px;
  font-size: 12px; line-height: 1.5; opacity: 0; visibility: hidden;
  transition: opacity .2s ease, transform .2s ease, visibility .2s ease;
}
.toast.show { opacity: 1; visibility: visible; transform: translate(-50%, 0); }

/* ============================================================
   断点
   ============================================================ */
@media (min-width: 640px) {
  .shell { padding: 0 26px; }
  body { font-size: 14px; }
  .rec-lead { font-size: 14px; }
  .ct-form-rows { grid-template-columns: 1fr 1fr; }
  .field-row { grid-template-columns: 1fr 1fr; }
  .case-lines { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .evidence-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mile-row { grid-template-columns: 118px 160px minmax(0, 1fr) minmax(0, 1fr); align-items: baseline; gap: 12px; }
  .foot-grid { grid-template-columns: 1.4fr 1fr 1fr; }
  .foot-btm { flex-direction: row; justify-content: space-between; gap: 20px; }
}

@media (min-width: 960px) {
  .mainnav { display: flex; }
  .menu-btn { display: none; }
  .drawer { display: none; }
  .rec-inner { grid-template-columns: minmax(0, 1.4fr) minmax(270px, .72fr); gap: 52px; align-items: start; }
  .rec-head { padding-top: 36px; padding-bottom: 34px; }
  .sec-in { grid-template-columns: 116px minmax(0, 1fr); gap: 40px; padding-top: 38px; padding-bottom: 42px; }
  .sec-title { font-size: 23px; }
  .case { grid-template-columns: 104px minmax(0, 1fr); gap: 22px; }
  .case-lines { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
  .pkg {
    grid-template-columns: 40px minmax(0, 1fr) 138px 148px 22px;
    grid-template-areas: "no name cycle price go";
    align-items: center;
    padding: 14px 0;
  }
  .pkg-cycle { align-self: center; }
  .pkg-price { align-self: center; }
  .pkg-go { align-self: center; }
  .detail { grid-template-columns: minmax(0, 1fr) 296px; grid-template-areas: "main buy"; gap: 52px; }
  .detail-main { grid-area: main; }
  .buy { grid-area: buy; position: sticky; top: 78px; margin-top: 0; }
  .dsec { padding-top: 26px; }
  .dsec-head h2 { font-size: 19px; }
  .bag-layout, .order-grid { grid-template-columns: minmax(0, 1fr) 300px; gap: 52px; align-items: start; }
  .about-grid, .contact-grid { grid-template-columns: minmax(0, 1fr) 300px; gap: 52px; align-items: start; }
  .doc-layout { grid-template-columns: 208px minmax(0, 1fr); gap: 52px; align-items: start; }
  .doc-toc { position: sticky; top: 78px; }
  .foot-grid { grid-template-columns: 1.5fr 1fr 1fr 1.35fr; gap: 34px; padding: 30px 0 28px; }
  .ct-section { padding-top: 24px; }
  .qa .qa-q { width: 30%; }
  .prose { max-width: 52em; }
  .prose h2 { font-size: 16px; margin-top: 28px; }
  .prose p, .prose ol li { font-size: 13px; }
}

@media (min-width: 1200px) {
  .shell { padding: 0 30px; }
  .top-in { height: 62px; }
  .rec-title { font-size: 46px; }
  .buy-price { font-size: 32px; }
}

@media (max-width: 520px) {
  .top-in { gap: 12px; }
  .tool-link { display: none; }
  .top-tools { gap: 10px; }
}

/* 数据表在手机端改为“字段—值”堆叠，避免五列挤压 */
@media (max-width: 720px) {
  .pkg { grid-template-columns: 26px minmax(0, 1fr) auto; gap: 6px 8px; }
  .pkg-price em { font-size: 8.5px; white-space: nowrap; letter-spacing: -.02em; }
  .tbl { display: block; width: 100%; }
  .tbl thead { display: none; }
  .tbl tbody, .tbl tr { display: block; width: 100%; }
  .tbl tr { padding: 12px 0 10px; border-top: 1px solid var(--line); }
  .tbl tr:first-child { border-top: 1px solid var(--line-2); }
  .tbl td {
    display: grid; grid-template-columns: 70px minmax(0, 1fr); gap: 8px;
    width: auto; padding: 2px 0; border: 0;
    font-size: 12.5px; line-height: 1.7;
  }
  .tbl td::before {
    content: attr(data-l); font-family: var(--mono); font-size: 9px;
    letter-spacing: .06em; color: var(--muted); padding-top: 3px;
  }
  .tbl td:first-child { margin-bottom: 5px; }
  .tbl td:first-child::before { display: none; }
  .tbl td:first-child b { font-size: 14px; }
  .tbl .num { white-space: normal; }
}

/* 问答表在手机端改为堆叠，避免三列挤压 */
@media (max-width: 760px) {
  .qa, .qa tbody, .qa tr, .qa td { display: block; width: 100%; }
  .qa tr { padding: 12px 0; border-bottom: 1px solid var(--line); }
  .qa td { padding: 0; border: 0; }
  .qa .qa-no { font-size: 9px; margin-bottom: 2px; }
  .qa .qa-q { width: auto; margin-bottom: 3px; }
}

/* 375px 及以下的收口：不允许横向滚动 */
@media (max-width: 380px) {
  .shell { padding: 0 16px; }
  .rec-title { font-size: 26px; }
  .pkg-name b { font-size: 14px; }
  .pkg-price b { font-size: 13px; }
  .buy-price { font-size: 26px; }
  .pay-amount, .ct-grand strong { font-size: 22px; }
  .mainnav { display: none; }
}