/* ── 开放平台演示页样式 · 蓝晒接线台（2026-10-07 视觉方向，产品负责人选定 web-round-02 #01）──
   方向：与已发布落地页「蓝晒接线图」同一份图纸的两个面——落地页是图纸（怎么接），
   本页是通电面（接上以后一笔钱怎么跑）。纸面打底、铜橙讲「钱怎么走」、白线讲「系统怎么接」。
   设计稿：docs/UI/previews/web-round-02/demo/（candidate-01-wiring.html + 设计说明.md）。

   色值纪律：以下 --bp-* 组是设计令牌主链 `colors.blueprint` 的**手工镜像**
   （与 site.css `.op-body` 段逐字同值；官网静态包不在令牌生成链上）。
   改一边必须同批改另一边。半透明值（线/底/网格点）是 base 与 white 的 alpha 派生；
   铜橙底板上的字用 --bp-deep（同族深色），不新造色值。

   动效纪律（产品负责人 2026-10-07）：**无滚动驱动动效**，加载即完成态。
   只保留用户自己触发的三处：主按钮按下压印、状态推进通电（工序完成/信号灯亮起）、
   建单响应打字机。prefers-reduced-motion 下全部直出。

   演示标识红线：设备框内「演示」水印规则（content: "演示"）由源码守卫 fail-closed 钉住，
   不得删除或改名。 */
:root {
  --bp: #0e2a47;
  --bp-deep: #08182b;
  --bp-white: #eaf2fa;
  --bp-copper: #e1904a;
  --bp-copper-2: #f0ae74;
  --bp-sub: #93aac6;
  --bp-line: rgba(226, 238, 250, 0.52);
  --bp-dim: rgba(226, 238, 250, 0.3);
  --bp-grid: rgba(255, 255, 255, 0.055);
  --bp-stage: rgba(8, 24, 43, 0.42);
  --bp-plate: rgba(255, 255, 255, 0.04);
  --bp-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;
  --bp-font: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
  --dm-radius: 2px;
  /* 「产品真身」色：只在设备框内作通道标识（通道点、通道按钮），不外溢成页面主题色。 */
  --dm-wechat: #07c160;
  --dm-alipay: #1677ff;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background-color: var(--bp);
  background-image: radial-gradient(var(--bp-grid) 0.8px, transparent 0.8px);
  background-size: 3px 3px;
  color: var(--bp-white);
  font-family: var(--bp-font);
  font-size: 15px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  color-scheme: dark;
}

a { color: var(--bp-copper); }
a:hover { color: var(--bp-copper-2); }

:focus-visible {
  outline: 2px solid var(--bp-copper);
  outline-offset: 2px;
}

/* 路线可见性：HTML 默认不带 data-route（无 JS 时全部可读）；demo.js 初始化时
   按拍板默认置 a，此后随切换改写。 */
body[data-route='a'] .dm-b-only { display: none !important; }
body[data-route='b'] .dm-a-only { display: none !important; }

/* ── 顶栏：图纸签栏 + 线路开关 + 端子排 ─────────────────────────── */
.dm-topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  width: min(100% - 32px, 960px);
  margin: 0 auto;
  padding: 8px 0;
  background: rgba(14, 42, 71, 0.94);
  border-bottom: 1px solid var(--bp-line);
}

.dm-topbar-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  padding-bottom: 6px;
}

.dm-badge {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 10px;
  border: 1px solid var(--bp-copper);
  border-radius: var(--dm-radius);
  background: var(--bp-copper);
  color: var(--bp-deep);
  font-family: var(--bp-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  white-space: nowrap;
}

/* 线路开关（选路线 = 合闸）：on = 铜橙边 + 通电亮底 */
.dm-routebar {
  display: flex;
  gap: 6px;
  margin-left: auto;
}

.dm-routebtn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 36px;
  padding: 0 14px;
  border: 1px solid var(--bp-line);
  border-radius: var(--dm-radius);
  background: transparent;
  color: var(--bp-sub);
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: border-color 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}

.dm-routebtn::before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: 1px solid var(--bp-sub);
  transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.dm-routebtn[aria-pressed='true'] {
  border-color: var(--bp-copper);
  background: rgba(225, 144, 74, 0.14);
  color: var(--bp-white);
}

.dm-routebtn[aria-pressed='true']::before {
  background: var(--bp-copper);
  border-color: var(--bp-copper);
  box-shadow: 0 0 7px rgba(225, 144, 74, 0.85);
}

.dm-routebtn:not([aria-pressed='true']):hover {
  border-color: var(--bp-copper);
  color: var(--bp-copper-2);
}

/* 章节进度 = 线路端子排：每个节点是线路上的一个端子，当前端子通电 */
.dm-progress {
  display: flex;
  gap: 4px;
  margin: 0;
  padding: 0 0 2px;
  list-style: none;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.dm-progress a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 32px;
  padding: 0 10px;
  border-radius: var(--dm-radius);
  color: var(--bp-sub);
  font-family: var(--bp-mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.2s ease, background-color 0.2s ease;
}

.dm-progress a::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  border: 1px solid var(--bp-dim);
  transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.dm-progress a:hover { color: var(--bp-copper-2); }

.dm-progress a[aria-current='step'] {
  background: rgba(225, 144, 74, 0.12);
  color: var(--bp-copper-2);
}

.dm-progress a[aria-current='step']::before {
  background: var(--bp-copper);
  border-color: var(--bp-copper);
  box-shadow: 0 0 7px rgba(225, 144, 74, 0.85);
}

/* ── 页面骨架 ─────────────────────────────────────────────────── */
.dm-page {
  width: min(100% - 32px, 960px);
  margin: 0 auto;
  padding: 24px 0 8px;
}

.dm-skip {
  position: absolute;
  left: -9999px;
}

.dm-skip:focus-visible {
  left: 12px;
  top: 8px;
  z-index: 40;
  padding: 8px 12px;
  border-radius: var(--dm-radius);
  background: var(--bp-deep);
  color: var(--bp-white);
}

.dm-chapter {
  padding: 40px 0 8px;
}

/* ── 首屏（通栏上下堆叠：大标题 → 铭牌 → 总控图 → 线路开关）────── */
.dm-hero {
  padding-top: 48px;
}

.dm-hero h1 {
  margin: 0;
  font-size: min(4vw, 36px);
  line-height: 1.3;
  font-weight: 700;
  letter-spacing: 0.005em;
  text-wrap: balance;
}

.dm-trio {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 22px 0 0;
  padding: 0;
  list-style: none;
}

.dm-trio li {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 9px 15px;
  border: 1px solid var(--bp-line);
  border-radius: var(--dm-radius);
  font-size: 14px;
  font-weight: 700;
}

.dm-trio li::before {
  font-family: var(--bp-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  color: var(--bp-deep);
  background: var(--bp-copper);
  padding: 2px 7px;
  border-radius: var(--dm-radius);
  font-weight: 700;
}

.dm-trio li:nth-child(1)::before { content: 'PLATE 01'; }
.dm-trio li:nth-child(2)::before { content: 'PLATE 02'; }
.dm-trio li:nth-child(3)::before { content: 'PLATE 03'; }

.dm-trio-note {
  margin: 12px 0 0;
  font-size: 13px;
  color: var(--bp-sub);
}

/* 总控图：图纸框 + 签栏（caption），里面是分账示意 SVG */
.dm-flow-figure {
  margin: 30px 0 0;
  padding: 20px 22px 14px;
  border: 1px solid var(--bp-line);
  border-radius: var(--dm-radius);
  background: var(--bp-stage);
}

.dm-flow-figure::before {
  content: '总控图 · 一笔钱的旅程　SCALE 1:1 / 单位：元';
  display: block;
  padding-bottom: 10px;
  margin-bottom: 12px;
  border-bottom: 1px solid var(--bp-dim);
  font-family: var(--bp-mono);
  font-size: 10.5px;
  letter-spacing: 0.16em;
  color: var(--bp-sub);
}

.dm-flow {
  display: block;
  width: 100%;
  height: auto;
}

/* 流向图元素（第 0 章与第 6 章共用）：铜橙 = 资金流，白线 = 其余 */
.dm-fx-card {
  fill: var(--bp-plate);
  stroke: var(--bp-line);
}

.dm-fx-you {
  fill: rgba(225, 144, 74, 0.1);
  stroke: var(--bp-copper);
}

.dm-fx-you-label { fill: var(--bp-copper-2); }

.dm-fx-fee {
  fill: var(--bp-plate);
  stroke: var(--bp-line);
}

.dm-fx-label {
  fill: var(--bp-white);
  font-family: var(--bp-font);
  font-size: 13px;
}

.dm-fx-amount {
  fill: var(--bp-white);
  font-family: var(--bp-mono);
  font-size: 17px;
  font-weight: 700;
}

.dm-fx-you-amount { fill: var(--bp-copper-2); }

.dm-fx-note {
  fill: var(--bp-sub);
  font-family: var(--bp-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
}

.dm-fx-line {
  stroke: var(--bp-line);
  stroke-width: 1.1;
  fill: none;
}

/* 资金流主线：铜橙（第 6 章流向图里「卖出 → 分账 → 你实收」一段用） */
.dm-flow-figure .dm-fxseg:first-child .dm-fx-line,
#dm-settle-flow .dm-fx-line[data-dm-money] {
  stroke: var(--bp-copper);
}

.dm-fx-arrow { fill: var(--bp-line); }

/* 结算流分段：加载即完成态（无滚动触发点亮；is-lit 保留为兼容类） */
.dm-fxseg.is-lit .dm-fx-card { stroke: var(--bp-copper); }
.dm-fxseg.is-lit .dm-fx-label { fill: var(--bp-copper-2); }

/* 首屏入口按钮组 */
.dm-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 26px;
  align-items: center;
}

.dm-browse {
  margin: 14px 0 0;
  font-size: 13px;
  color: var(--bp-sub);
}

.dm-quiet-link {
  color: var(--bp-sub);
  border-bottom: 1px dotted var(--bp-sub);
  text-decoration: none;
}

.dm-quiet-link:hover { color: var(--bp-copper-2); border-bottom-color: var(--bp-copper); }

/* ── 章节头：工序号 + 问句标题 + 引言 ─────────────────────────── */
.dm-chapter-head {
  position: relative;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--bp-line);
}

.dm-chapter-head::before {
  display: block;
  margin-bottom: 10px;
  font-family: var(--bp-mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  color: var(--bp-copper);
}

#ch1 .dm-chapter-head::before { content: 'STEP 01 · 登记台'; }
#ch2a .dm-chapter-head::before { content: 'STEP 02A · 装配台'; }
#ch2b .dm-chapter-head::before { content: 'STEP 02B · 钥匙柜'; }
#ch3 .dm-chapter-head::before { content: 'STEP 03 · 测试台'; }
#ch4 .dm-chapter-head::before { content: 'STEP 04 · 闸门'; }
#ch6 .dm-chapter-head::before { content: 'STEP 05 · 终点'; }
#ch7 .dm-chapter-head::before { content: 'EXIT · 出口'; }

.dm-chapter-head h2 {
  margin: 0;
  font-size: 26px;
  font-weight: 700;
}

.dm-chapter-lead {
  margin: 8px 0 0;
  font-size: 14px;
  color: var(--bp-sub);
}

/* ── 每章两栏：模拟界面（主） + 图纸规格栏（从属） ─────────────── */
.dm-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 18px;
  margin-top: 22px;
  align-items: start;
}

.dm-explain {
  order: 2;
  border: 1px solid var(--bp-line);
  border-radius: var(--dm-radius);
  background: var(--bp-stage);
}

.dm-explain h3 {
  margin: 0;
  padding: 11px 16px;
  border-bottom: 1px solid var(--bp-line);
  font-family: var(--bp-mono);
  font-size: 10.5px;
  font-weight: 400;
  letter-spacing: 0.16em;
  color: var(--bp-sub);
}

.dm-explain h3::after { content: ' · SPEC'; }

.dm-facts {
  margin: 0;
  padding: 4px 16px 12px;
}

.dm-facts > div { margin-top: 12px; }

.dm-facts dt {
  font-family: var(--bp-mono);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  color: var(--bp-copper);
}

.dm-facts dd {
  margin: 4px 0 0;
  font-size: 13.5px;
  color: #c3d3e6;
}

.dm-explain-note {
  margin: 0 16px 14px;
  padding-top: 10px;
  border-top: 1px dashed var(--bp-dim);
  font-size: 12.5px;
  color: var(--bp-sub);
}

.dm-stage { order: 1; }

/* ── 模拟界面（图纸框里的「工序记录卡 / 剖面」）────────────────── */
.dm-panel-card {
  border: 1px solid var(--bp-line);
  border-radius: var(--dm-radius);
  background: var(--bp-stage);
  padding: 20px 20px 16px;
}

.dm-panel-card > h4 {
  margin: 0 0 16px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--bp-dim);
  font-family: var(--bp-mono);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.12em;
  color: var(--bp-sub);
}

/* 步骤块（第 1 章）：完成推进 = 左侧「通电条」点亮 */
.dm-step-block {
  position: relative;
  padding: 14px 0 6px 16px;
  border-bottom: 1px dashed var(--bp-dim);
}

.dm-step-block:last-child { border-bottom: 0; }

.dm-step-block::before {
  content: '';
  position: absolute;
  left: 0;
  top: 16px;
  bottom: 12px;
  width: 3px;
  border-radius: 2px;
  background: var(--bp-dim);
  transition: background-color 0.25s ease, box-shadow 0.25s ease;
}

.dm-step-block[data-dm-done='1']::before {
  background: var(--bp-copper);
  box-shadow: 0 0 8px rgba(225, 144, 74, 0.7);
}

.dm-step-block h4 {
  margin: 0 0 6px;
  font-size: 16px;
  font-weight: 700;
}

.dm-step-chip {
  display: inline-block;
  margin-right: 9px;
  padding: 3px 9px;
  border: 1px solid var(--bp-copper);
  border-radius: var(--dm-radius);
  font-family: var(--bp-mono);
  font-size: 10.5px;
  font-weight: 400;
  letter-spacing: 0.1em;
  color: var(--bp-copper);
  vertical-align: 2px;
}

.dm-step-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-top: 14px;
}

/* ── 表单域：白线方角框 ───────────────────────────────────────── */
.dm-field { margin-top: 14px; }

.dm-field label {
  display: block;
  margin-bottom: 6px;
  font-family: var(--bp-mono);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  color: var(--bp-sub);
}

.dm-field input[type='text'],
.dm-field input[type='tel'],
.dm-field textarea {
  width: 100%;
  min-height: 42px;
  padding: 9px 12px;
  border: 1px solid var(--bp-line);
  border-radius: var(--dm-radius);
  background: rgba(255, 255, 255, 0.03);
  color: var(--bp-white);
  font-family: var(--bp-mono);
  font-size: 13.5px;
  line-height: 1.5;
  outline: none;
  transition: border-color 0.2s ease;
}

.dm-field textarea { resize: vertical; }

.dm-field input::placeholder { color: rgba(147, 170, 198, 0.6); }

.dm-field input:focus, .dm-field textarea:focus { border-color: var(--bp-copper); }

.dm-field-row {
  display: flex;
  align-items: flex-end;
  gap: 10px;
}

.dm-field-row .dm-field { flex: 1; margin-top: 14px; }

.dm-field-price { max-width: 220px; }

.dm-hint {
  margin: 7px 0 0;
  font-size: 12.5px;
  color: var(--bp-sub);
}

/* ── 按钮：方角、铜橙实底主按钮、按下压印（用户触发动效之一）───── */
.dm-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 20px;
  border: 1px solid var(--bp-line);
  border-radius: var(--dm-radius);
  background: transparent;
  color: var(--bp-white);
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: border-color 0.2s ease, background-color 0.2s ease, color 0.2s ease, transform 0.06s ease;
}

.dm-btn:hover { border-color: var(--bp-copper); color: var(--bp-copper-2); }

.dm-btn:active:not(:disabled) { transform: translateY(1px); }

.dm-btn:disabled {
  cursor: default;
  border-color: var(--bp-dim);
  color: var(--bp-sub);
  opacity: 0.85;
}

.dm-btn-primary {
  border-color: var(--bp-copper);
  background: var(--bp-copper);
  color: var(--bp-deep);
}

.dm-btn-primary:hover { background: var(--bp-copper-2); border-color: var(--bp-copper-2); color: var(--bp-deep); }

.dm-btn-primary:disabled {
  border-color: var(--bp-copper);
  background: rgba(225, 144, 74, 0.35);
  color: var(--bp-deep);
}

.dm-btn-ghost { color: var(--bp-sub); }

/* 通道按钮：底色用「产品真身」色（微信绿 / 支付宝蓝），仅设备框语境使用 */
.dm-btn-channel {
  min-height: 46px;
  width: 100%;
  font-size: 15px;
}

.dm-btn-wechat { background: var(--dm-wechat); border-color: var(--dm-wechat); color: #052e16; }
.dm-btn-wechat:hover { background: #06ad56; border-color: #06ad56; color: #052e16; }
.dm-btn-wechat:disabled { background: rgba(7, 193, 96, 0.4); border-color: rgba(7, 193, 96, 0.4); color: #052e16; }

.dm-btn-alipay { background: var(--dm-alipay); border-color: var(--dm-alipay); color: #fff; }
.dm-btn-alipay:hover { background: #3b8cff; border-color: #3b8cff; color: #fff; }
.dm-btn-alipay:disabled { background: rgba(22, 119, 255, 0.45); border-color: rgba(22, 119, 255, 0.45); color: #fff; }

/* ── 状态端子（未签署 → 签署中 → 已签署）──────────────────────── */
.dm-state-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 11px;
  border: 1px solid var(--bp-dim);
  border-radius: var(--dm-radius);
  font-family: var(--bp-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--bp-sub);
  transition: color 0.2s ease, border-color 0.2s ease, background-color 0.2s ease;
}

.dm-state-chip::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--bp-dim);
  transition: background-color 0.2s ease, box-shadow 0.2s ease;
}

.dm-state-chip[data-state='doing'] {
  border-color: var(--bp-copper);
  color: var(--bp-copper-2);
}

.dm-state-chip[data-state='doing']::before {
  background: var(--bp-copper);
  animation: dm-blink 0.8s ease-in-out infinite;
}

.dm-state-chip[data-state='done'] {
  border-color: var(--bp-copper);
  background: rgba(225, 144, 74, 0.14);
  color: var(--bp-copper-2);
}

.dm-state-chip[data-state='done']::before {
  background: var(--bp-copper);
  box-shadow: 0 0 7px rgba(225, 144, 74, 0.85);
}

@keyframes dm-blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}

/* ── 勾选与单选：方角 ─────────────────────────────────────────── */
.dm-check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 12px 0 0;
  font-size: 14px;
  cursor: pointer;
}

.dm-check input {
  width: 17px;
  height: 17px;
  margin: 4px 0 0;
  accent-color: var(--bp-copper);
  flex: none;
}

.dm-subject {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  margin: 12px 0 0;
  padding: 12px 14px;
  border: 1px solid var(--bp-line);
  border-radius: var(--dm-radius);
}

.dm-subject legend {
  padding: 0 8px;
  font-family: var(--bp-mono);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  color: var(--bp-sub);
}

.dm-radio {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 14px;
  cursor: pointer;
}

.dm-radio input { accent-color: var(--bp-copper); }

/* 身份证占位卡：虚线框 → 放入后铜橙实线 */
.dm-idcards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 14px;
}

.dm-idcard {
  padding: 16px 14px;
  border: 1px dashed var(--bp-line);
  border-radius: var(--dm-radius);
  background: transparent;
  color: var(--bp-white);
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}

.dm-idcard:hover { border-color: var(--bp-copper); }

.dm-idcard[data-dm-filled='1'] {
  border-style: solid;
  border-color: var(--bp-copper);
  background: rgba(225, 144, 74, 0.1);
}

.dm-idcard[data-dm-filled='1'] .dm-idcard-state { color: var(--bp-copper-2); }

.dm-idcard-state {
  display: block;
  margin-top: 5px;
  font-family: var(--bp-mono);
  font-size: 10.5px;
  font-weight: 400;
  color: var(--bp-sub);
}

.dm-idcard[data-dm-filled='1'] .dm-idcard-state::before { content: '已放入（演示） · '; }

.dm-privacy {
  display: flex;
  gap: 10px;
  margin: 14px 0 0;
  font-size: 12.5px;
  color: var(--bp-sub);
  line-height: 1.6;
}

.dm-icon {
  flex: none;
  width: 17px;
  height: 17px;
  margin-top: 3px;
  color: var(--bp-sub);
}

/* ── 代码块：墨底白字，铜橙高亮 ───────────────────────────────── */
.dm-code {
  margin: 12px 0 0;
  padding: 14px 16px;
  border: 1px solid var(--bp-line);
  border-radius: var(--dm-radius);
  background: var(--bp-deep);
  color: var(--bp-white);
  font-family: var(--bp-mono);
  font-size: 12px;
  line-height: 1.75;
  overflow-x: auto;
  white-space: pre;
}

.dm-resp-wrap { margin-top: 18px; }

.dm-resp-wrap[data-dm-sent='0'] {
  min-height: 264px;
  border: 1px dashed var(--bp-dim);
  border-radius: var(--dm-radius);
  padding: 14px 16px 8px;
}

.dm-resp-wrap[data-dm-sent='0']::before {
  content: '未发送 —— 点上方「发送请求」看响应';
  display: block;
  font-family: var(--bp-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--bp-sub);
}

.dm-resp-wrap h4 {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
}

/* ── 应用凭证：钥匙牌 ─────────────────────────────────────────── */
.dm-credential {
  margin-top: 16px;
  padding: 14px 16px;
  border: 1px solid var(--bp-line);
  border-radius: var(--dm-radius);
  background: rgba(255, 255, 255, 0.03);
}

.dm-cred-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 14px;
  padding: 9px 0;
  border-bottom: 1px dashed var(--bp-dim);
}

.dm-cred-row:last-of-type { border-bottom: 0; }

.dm-cred-key {
  min-width: 150px;
  font-family: var(--bp-mono);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  color: var(--bp-sub);
}

.dm-cred-value {
  font-family: var(--bp-mono);
  font-size: 13px;
  color: var(--bp-copper-2);
  word-break: break-all;
}

/* ── 买家预览（第 2A 章）：图纸里贴的一张「样张」──────────────── */
.dm-preview {
  margin-top: 18px;
  padding: 14px 16px;
  border: 1px dashed var(--bp-dim);
  border-radius: var(--dm-radius);
  transition: border-color 0.25s ease;
}

.dm-preview[data-state='done'] { border-color: var(--bp-copper); border-style: solid; }

.dm-preview-title {
  margin: 0 0 10px;
  font-family: var(--bp-mono);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  color: var(--bp-sub);
}

.dm-preview-card {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 12px;
  border: 1px solid var(--bp-line);
  border-radius: var(--dm-radius);
  background: #f6f8fb;
  color: #151922;
  max-width: 380px;
}

.dm-preview-thumb {
  flex: none;
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border-radius: 4px;
  background: #e6ebf2;
  color: #667085;
  font-size: 18px;
}

.dm-preview-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.dm-preview-body strong { font-size: 14px; }
.dm-preview-price { font-family: var(--bp-mono); font-size: 15px; font-weight: 700; color: #b54708; }
.dm-preview-shop { font-size: 12px; color: #667085; }

/* ── 第 4 章：闸门（终端 × 通道）─────────────────────────────── */
.dm-switcher { margin-bottom: 16px; }

.dm-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.dm-tab {
  min-height: 38px;
  padding: 0 15px;
  border: 1px solid var(--bp-line);
  border-radius: var(--dm-radius);
  background: transparent;
  color: var(--bp-sub);
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 700;
  cursor: pointer;
  transition: border-color 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}

.dm-tab[aria-selected='true'] {
  border-color: var(--bp-copper);
  background: rgba(225, 144, 74, 0.14);
  color: var(--bp-white);
}

.dm-channel {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

.dm-channelbtn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 38px;
  padding: 0 15px;
  border: 1px solid var(--bp-line);
  border-radius: var(--dm-radius);
  background: transparent;
  color: var(--bp-sub);
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 700;
  cursor: pointer;
  transition: border-color 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}

.dm-channelbtn[aria-pressed='true'] {
  border-color: var(--bp-copper);
  background: rgba(225, 144, 74, 0.14);
  color: var(--bp-white);
}

.dm-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex: none;
}

.dm-dot-wechat { background: var(--dm-wechat); }
.dm-dot-alipay { background: var(--dm-alipay); }

/* 设备框 = 剖面示意：白线细框 + 剖面标号 + 「演示」水印（守卫钉住）*/
.dm-cashier { position: relative; }

.dm-cashier[data-combo] {
  border: 1px solid var(--bp-line);
  border-radius: var(--dm-radius);
  background: var(--bp-deep);
  padding: 18px;
}

.dm-cashier[data-combo]::before {
  content: '剖面 A-A · 收银页示意';
  display: block;
  font-family: var(--bp-mono);
  font-size: 10.5px;
  letter-spacing: 0.16em;
  color: var(--bp-sub);
  margin-bottom: 14px;
}

.dm-cashier-body { position: relative; }

.dm-cashier-body::after {
  content: '演示';
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: var(--bp-mono);
  font-size: 44px;
  letter-spacing: 0.5em;
  color: rgba(226, 238, 250, 0.07);
  transform: rotate(-18deg);
  pointer-events: none;
}

.dm-browser {
  max-width: 560px;
  margin: 0 auto;
  border: 1px solid var(--bp-line);
  border-radius: var(--dm-radius);
}

.dm-browser-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 10px;
  border-bottom: 1px solid var(--bp-dim);
}

.dm-browser-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: 1px solid var(--bp-line);
  display: inline-block;
}

.dm-browser-url {
  margin-left: 8px;
  font-family: var(--bp-mono);
  font-size: 11px;
  color: var(--bp-sub);
}

.dm-phone {
  max-width: 320px;
  margin: 0 auto;
  border: 1px solid var(--bp-line);
  border-radius: 10px;
  padding: 14px 10px;
}

.dm-cashier-body {
  padding: 18px 16px;
  text-align: center;
}

.dm-cashier-merchant {
  margin: 0;
  font-size: 13.5px;
  color: var(--bp-sub);
}

.dm-cashier-title {
  margin: 0 0 8px;
  font-size: 16px;
  font-weight: 700;
}

.dm-cashier-amount {
  margin: 10px 0 4px;
  font-family: var(--bp-mono);
  font-size: 34px;
  font-weight: 700;
}

.dm-qr {
  display: block;
  width: 132px;
  height: 132px;
  margin: 12px auto;
  color: rgba(226, 238, 250, 0.88);
}

.dm-qr-small { width: 104px; height: 104px; }

.dm-cashier-note {
  margin: 10px 0 0;
  font-size: 12px;
  color: var(--bp-sub);
  line-height: 1.6;
}

.dm-cashier-fallback {
  margin: 12px 0 0;
  font-size: 12px;
  color: var(--bp-sub);
  line-height: 1.6;
  text-align: left;
}

.dm-cashier-steps {
  margin: 12px 0 0;
  padding: 0 0 0 20px;
  font-size: 13px;
  color: var(--bp-sub);
  text-align: left;
}

.dm-cashier-guide {
  margin-top: 12px;
  padding: 12px 14px;
  border: 1px dashed var(--bp-copper);
  border-radius: var(--dm-radius);
  font-size: 13.5px;
  color: var(--bp-copper-2);
}

.dm-zeroclick {
  display: inline-block;
  margin-bottom: 10px;
  padding: 3px 9px;
  border: 1px solid var(--bp-copper);
  border-radius: var(--dm-radius);
  font-family: var(--bp-mono);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  color: var(--bp-copper);
}

.dm-paypanel {
  margin-top: 14px;
  padding: 14px;
  border: 1px solid var(--bp-line);
  border-radius: var(--dm-radius);
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: stretch;
  font-size: 13.5px;
  color: var(--bp-sub);
}

.dm-paypanel .dm-state-chip { align-self: center; }

/* ── 第 3 章：测试台（实时签名），五步 = 五盏信号灯 ───────────── */
.dm-live-card { margin-top: 18px; }

.dm-live-steps {
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
  counter-reset: lv;
}

.dm-live-steps li {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 0;
  border-bottom: 1px dashed var(--bp-dim);
  font-size: 14px;
}

.dm-live-steps li:last-child { border-bottom: 0; }

.dm-live-steps li::before {
  counter-increment: lv;
  content: '0' counter(lv);
  font-family: var(--bp-mono);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  color: var(--bp-sub);
  min-width: 20px;
}

.dm-live-name { flex: 1; }

.dm-live-state {
  font-family: var(--bp-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--bp-sub);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.dm-live-state::before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--bp-dim);
  transition: background-color 0.2s ease, box-shadow 0.2s ease;
}

.dm-live-steps li[data-dm-live-state='doing'] .dm-live-state { color: var(--bp-copper-2); }

.dm-live-steps li[data-dm-live-state='doing'] .dm-live-state::before {
  background: var(--bp-copper);
  animation: dm-blink 0.8s ease-in-out infinite;
}

.dm-live-steps li[data-dm-live-state='done'] .dm-live-state { color: var(--bp-copper-2); }

.dm-live-steps li[data-dm-live-state='done'] .dm-live-state::before {
  background: var(--bp-copper);
  box-shadow: 0 0 7px rgba(225, 144, 74, 0.85);
}

.dm-live-steps li[data-dm-live-state='fail'] .dm-live-state { color: #ffb4a8; }

.dm-live-steps li[data-dm-live-state='fail'] .dm-live-state::before {
  background: #e5735f;
  box-shadow: 0 0 7px rgba(229, 115, 95, 0.8);
}

.dm-live-status {
  margin: 14px 0 0;
  padding: 11px 14px;
  border: 1px solid var(--bp-line);
  border-radius: var(--dm-radius);
  background: rgba(255, 255, 255, 0.03);
  font-size: 13px;
  color: #c3d3e6;
}

.dm-live-result { margin-top: 14px; }

/* 结果区预留高度只在 JS 就绪时生效（规划 §4.0 CLS） */
.dm-live-card[data-dm-live-ready='1'] .dm-live-result { min-height: 118px; }

.dm-live-label {
  margin: 0 0 8px;
  font-family: var(--bp-mono);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  color: var(--bp-sub);
}

.dm-live-sigcode {
  margin: 0;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}

.dm-live-verdict {
  margin: 12px 0 0;
  font-family: var(--bp-mono);
  font-size: 12.5px;
  letter-spacing: 0.04em;
}

.dm-live-verdict[data-dm-verdict='ok'] { color: #8fd6a8; }
.dm-live-verdict[data-dm-verdict='bad'] { color: var(--bp-copper-2); }

/* ── 第 6 章：终点（到账清单）───────────────────────────────── */
.dm-settle-points {
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
  counter-reset: pt;
}

.dm-settle-points li {
  position: relative;
  padding: 13px 0 13px 46px;
  border-bottom: 1px dashed var(--bp-dim);
  font-size: 14px;
  color: #c3d3e6;
}

.dm-settle-points li:last-child { border-bottom: 0; }

.dm-settle-points li::before {
  counter-increment: pt;
  content: '0' counter(pt);
  position: absolute;
  left: 0;
  top: 13px;
  font-family: var(--bp-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--bp-copper);
}

/* ── 章末动线 ─────────────────────────────────────────────────── */
.dm-chapter-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  margin-top: 26px;
  padding-top: 16px;
  border-top: 1px solid var(--bp-line);
}

.dm-next {
  font-size: 15px;
  font-weight: 700;
  color: var(--bp-white);
  text-decoration: none;
  border-bottom: 1px solid var(--bp-copper);
  padding-bottom: 2px;
}

.dm-next::after { content: ' →'; color: var(--bp-copper); }

.dm-soft-exit {
  margin-left: auto;
  font-size: 13px;
  color: var(--bp-sub);
  border-bottom: 1px dotted var(--bp-sub);
  text-decoration: none;
}

.dm-soft-exit:hover { color: var(--bp-copper-2); }

.dm-foot-main { justify-content: flex-start; }

.dm-main-exit { text-decoration: none; }

.dm-foot-main .dm-next {
  font-size: 14px;
  font-weight: 400;
  color: var(--bp-sub);
  border-bottom-color: var(--bp-sub);
}

/* ── 第 7 章：出口登记牌 ──────────────────────────────────────── */
.dm-exits {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 22px;
}

.dm-exit-card {
  display: block;
  padding: 20px 22px;
  border: 1px solid var(--bp-line);
  border-radius: var(--dm-radius);
  text-decoration: none;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}

.dm-exit-card:hover { border-color: var(--bp-copper); background: rgba(225, 144, 74, 0.06); }

.dm-exit-card strong {
  display: block;
  font-size: 17px;
  color: var(--bp-white);
}

.dm-exit-card span {
  display: block;
  margin-top: 6px;
  font-size: 13px;
  color: var(--bp-sub);
}

.dm-endnote {
  margin: 20px 0 0;
  font-size: 13px;
  color: var(--bp-sub);
}

/* ── 页脚（复用落地页同款内容，蓝晒底）────────────────────────── */
/* 宽度与主列对齐：site.css 默认页脚是 720px 窄容器（官网浅色页口径），
   落地页在 .op-body 下已覆盖为 1180；demo 页同样覆盖为 960。 */
body .site-footer {
  width: min(100% - 32px, 960px);
  margin: 60px auto 0;
  border-top: 1px solid var(--bp-line);
  padding: 22px 0 44px;
  font-size: 12.5px;
  color: var(--bp-sub);
}

.site-footer a { color: var(--bp-sub); }
.site-footer a:hover { color: var(--bp-copper-2); }

.footer-records {
  display: grid;
  grid-template-columns: 1fr 1.4fr 1.4fr;
  gap: 24px;
}

.footer-group { display: flex; flex-direction: column; gap: 7px; }

.filing-badge { display: inline-flex; align-items: center; gap: 6px; }

/* ── 响应式 ───────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .dm-grid { grid-template-columns: 1fr; }
  .dm-explain { order: 0; }
  .dm-stage { order: 0; }
}

@media (max-width: 768px) {
  .dm-hero h1 { font-size: 27px; }
  .dm-idcards { grid-template-columns: 1fr; }
  .dm-exits { grid-template-columns: 1fr; }
  .footer-records { grid-template-columns: 1fr; }
  .dm-cred-key { min-width: 0; }
}

@media (max-width: 560px) {
  .dm-topbar { width: calc(100% - 24px); }
  .dm-page { width: calc(100% - 24px); }
  .dm-cashier-amount { font-size: 28px; }
  .dm-field-row { flex-direction: column; align-items: stretch; }
  .dm-field-row .dm-btn { width: 100%; }
}

/* ── 降级：prefers-reduced-motion 下所有过渡/动画直出 ─────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001s !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001s !important;
  }
}