/* ── 开放平台演示页样式（2026-10-05）─────────────────────────────────
   规划：docs/server/开放平台Demo演示页_规划_v1.0.0.md §四。
   - 令牌全部复用 /assets/site.css 的品牌变量（--brand/--bg/--surface/…），
     不新增色板；「产品真身」色（微信绿 #07C160 / 支付宝蓝）只作设备框内通道标识。
   - 视觉语言与开放平台落地页 r2 同族：品牌短标 + 克制浅投影 + 语义浅底。
   - 语义色沿用官网既有族：#16794c（成功）/ #b54708（注意）—— site.css fit-card 同源。
   - 动效只表达状态推进；prefers-reduced-motion 下全部降为静态。
   - 类名统一 dm- 前缀，避免与 site.css 全局类冲突。 */

:root {
  --dm-radius: 6px;      /* 规划钉的站内圆角口径 */
  --dm-radius-lg: 10px;  /* 大卡片/设备框 */
  --dm-ok: #16794c;
  --dm-ok-soft: #edf7f1;
  --dm-warn: #b54708;
  --dm-warn-soft: #fdf4ea;
  --dm-accent-soft: #eaf1ff;
  --dm-card-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
  --dm-wechat: #07c160;
  --dm-alipay: #1677ff;
}

/* 路线可见性：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(246, 248, 251, 0.94);
  border-bottom: 1px solid var(--border, #d7dee8);
}

.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(--brand, #1168d8);
  border-radius: var(--dm-radius);
  background: var(--dm-accent-soft);
  color: var(--brand, #1168d8);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.dm-routebar {
  display: flex;
  gap: 6px;
  margin-left: auto;
}

.dm-routebtn {
  min-height: 36px;
  padding: 0 14px;
  border: 1px solid var(--border, #d7dee8);
  border-radius: var(--dm-radius);
  background: var(--surface, #ffffff);
  color: var(--text, #151922);
  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[aria-pressed="true"] {
  border-color: var(--brand, #1168d8);
  background: var(--brand, #1168d8);
  color: #fff;
}

.dm-routebtn:not([aria-pressed="true"]):hover {
  border-color: var(--brand, #1168d8);
  color: var(--brand, #1168d8);
}

.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;
  min-height: 32px;
  padding: 0 10px;
  border-radius: var(--dm-radius);
  color: var(--muted, #667085);
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.2s ease, background-color 0.2s ease;
}

.dm-progress a:hover {
  color: var(--brand, #1168d8);
}

.dm-progress a[aria-current="step"] {
  background: var(--dm-accent-soft);
  color: var(--brand, #1168d8);
}

/* ── 页面骨架 ─────────────────────────────────────────────────── */
.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(--surface, #ffffff);
}

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

.dm-chapter-head h2,
.dm-explain h3 {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  letter-spacing: -0.01em;
}

.dm-chapter-head h2 {
  font-size: 24px;
  font-weight: 800;
}

.dm-chapter-head h2::before,
.dm-explain h3::before {
  content: "";
  flex: none;
  width: 6px;
  height: 22px;
  border-radius: 3px;
  background: var(--brand, #1168d8);
}

.dm-explain h3 {
  font-size: 15px;
  font-weight: 700;
}

.dm-explain h3::before {
  height: 14px;
}

.dm-chapter-lead {
  margin: 10px 0 0;
  color: var(--muted, #667085);
  line-height: 1.8;
}

.dm-grid {
  display: grid;
  grid-template-columns: minmax(230px, 320px) minmax(0, 1fr);
  gap: 18px;
  align-items: start;
  margin-top: 18px;
}

/* ── 说明卡（四件套） ─────────────────────────────────────────── */
.dm-explain {
  position: sticky;
  top: 108px;
  padding: 16px 18px;
  border: 1px solid var(--border, #d7dee8);
  border-radius: var(--dm-radius-lg);
  background: var(--surface, #ffffff);
  box-shadow: var(--dm-card-shadow);
}

.dm-facts {
  display: grid;
  gap: 10px;
  margin: 12px 0 0;
}

.dm-facts dt {
  color: var(--muted, #667085);
  font-size: 12px;
  font-weight: 700;
}

.dm-facts dd {
  margin: 2px 0 0;
  font-size: 14px;
  line-height: 1.7;
}

.dm-explain-note {
  margin: 14px 0 0;
  padding-top: 12px;
  border-top: 1px dashed var(--border, #d7dee8);
  color: var(--muted, #667085);
  font-size: 13px;
  line-height: 1.7;
}

/* ── 模拟界面容器 ─────────────────────────────────────────────── */
.dm-stage {
  min-width: 0;
}

.dm-panel-card {
  padding: 18px;
  border: 1px solid var(--border, #d7dee8);
  border-radius: var(--dm-radius-lg);
  background: var(--surface, #ffffff);
  box-shadow: var(--dm-card-shadow);
}

.dm-panel-card h4 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 18px 0 8px;
  font-size: 15px;
}

.dm-panel-card h4:first-child {
  margin-top: 0;
}

.dm-step-block {
  padding: 14px 0;
  border-top: 1px dashed var(--border, #d7dee8);
  transition: opacity 0.25s ease;
}

.dm-step-block:first-of-type {
  border-top: 0;
  padding-top: 0;
}

.dm-step-block[data-dm-done="1"] {
  opacity: 0.62;
}

.dm-step-block[data-dm-done="1"] .dm-step-chip::after {
  content: " ✓";
}

.dm-step-chip {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 0 8px;
  border-radius: var(--dm-radius);
  background: var(--dm-accent-soft);
  color: var(--brand, #1168d8);
  font-size: 12px;
  font-weight: 800;
}

/* 表单（零报错纪律：永不出现红色错误态） */
.dm-field {
  display: grid;
  gap: 6px;
  margin-top: 12px;
}

.dm-field label {
  font-size: 13px;
  font-weight: 700;
}

.dm-field input,
.dm-field textarea {
  width: 100%;
  min-height: 44px;
  padding: 9px 12px;
  border: 1px solid var(--border, #d7dee8);
  border-radius: var(--dm-radius);
  background: var(--surface, #ffffff);
  color: var(--text, #151922);
  font: inherit;
  font-size: 14px;
}

.dm-field textarea {
  resize: vertical;
}

.dm-field-row {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
}

.dm-hint {
  margin: 8px 0 0;
  color: var(--muted, #667085);
  font-size: 13px;
  line-height: 1.7;
}

.dm-hint code {
  padding: 1px 5px;
  border-radius: 4px;
  background: var(--surface-muted, #eef3f8);
  font-size: 12px;
}

/* 按钮：44px 触达、150–250ms 过渡、主按钮对比度 ≥4.5:1 */
.dm-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 18px;
  border: 1px solid var(--border, #d7dee8);
  border-radius: var(--dm-radius);
  background: var(--surface, #ffffff);
  color: var(--text, #151922);
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

.dm-btn:hover {
  border-color: var(--brand, #1168d8);
  color: var(--brand, #1168d8);
}

.dm-btn-primary {
  border-color: var(--brand, #1168d8);
  background: var(--brand, #1168d8);
  color: #fff;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.08), 0 8px 18px -10px rgba(17, 104, 216, 0.6);
}

.dm-btn-primary:hover {
  border-color: var(--brand-strong, #0c4fa8);
  background: var(--brand-strong, #0c4fa8);
  color: #fff;
}

.dm-btn-ghost {
  border-color: var(--border, #d7dee8);
  background: var(--surface-muted, #eef3f8);
}

/* 通道按钮：真身色只作圆点标识（规划 §四 约束） */
.dm-btn-channel {
  justify-self: center;
  min-width: 180px;
}

.dm-btn-alipay:hover {
  border-color: var(--dm-alipay);
  color: var(--dm-alipay);
}

.dm-btn-wechat:hover {
  border-color: var(--dm-wechat);
  color: var(--dm-wechat);
}

.dm-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 6px;
  border-radius: 50%;
}

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

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

/* 状态徽标（语义浅底，不用红） */
.dm-state-chip {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 0 12px;
  border-radius: var(--dm-radius);
  background: var(--surface-muted, #eef3f8);
  color: var(--muted, #667085);
  font-size: 13px;
  font-weight: 700;
  transition: background-color 0.25s ease, color 0.25s ease;
}

.dm-state-chip[data-state="done"] {
  background: var(--dm-ok-soft);
  color: var(--dm-ok);
}

.dm-state-chip[data-state="doing"] {
  background: var(--dm-accent-soft);
  color: var(--brand, #1168d8);
}

/* ── 第 0 屏 ─────────────────────────────────────────────────── */
.dm-hero {
  padding-top: 28px;
}

.dm-hero h1 {
  margin: 0;
  font-size: clamp(28px, 5.2vw, 38px);
  line-height: 1.16;
  font-weight: 800;
  letter-spacing: -0.015em;
}

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

.dm-trio li {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 0 12px;
  border: 1px solid var(--border, #d7dee8);
  border-radius: var(--dm-radius);
  background: var(--surface, #ffffff);
  color: var(--text, #151922);
  font-size: 13px;
  font-weight: 700;
}

.dm-trio-note {
  margin: 10px 0 0;
  color: var(--muted, #667085);
  font-size: 13px;
}

.dm-icon {
  flex: none;
  width: 20px;
  height: 20px;
  color: var(--brand, #1168d8);
}

.dm-flow-figure {
  margin: 20px 0 0;
}

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

.dm-fx-card {
  fill: var(--surface, #ffffff);
  stroke: var(--border, #d7dee8);
  stroke-width: 1.5;
}

.dm-fx-you { fill: var(--dm-accent-soft); stroke: var(--brand, #1168d8); }
.dm-fx-fee { fill: var(--surface-muted, #eef3f8); }

.dm-fx-label {
  fill: var(--muted, #667085);
  font-size: 13px;
  font-weight: 700;
}

.dm-fx-amount {
  fill: var(--text, #151922);
  font-size: 17px;
  font-weight: 800;
}

.dm-fx-you-label { fill: var(--brand, #1168d8); }
.dm-fx-you-amount { fill: var(--brand-strong, #0c4fa8); }

.dm-fx-note {
  fill: var(--muted, #667085);
  font-size: 12px;
}

.dm-fx-line {
  fill: none;
  stroke: var(--border, #d7dee8);
  stroke-width: 2;
}

.dm-fx-arrow {
  fill: var(--muted, #667085);
}

/* 流向图分段点亮：只表达「推进」；无 JS / 降级时全量可见 */
#dm-settle-flow .dm-fxseg {
  opacity: 1;
  transition: opacity 0.4s ease;
}

#dm-settle-flow.is-armed .dm-fxseg {
  opacity: 0.32;
}

#dm-settle-flow.is-armed .dm-fxseg.is-lit {
  opacity: 1;
}

.dm-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 20px;
}

.dm-browse {
  margin: 12px 0 0;
  color: var(--muted, #667085);
  font-size: 13px;
}

.dm-quiet-link {
  color: var(--muted, #667085);
  text-underline-offset: 3px;
}

.dm-quiet-link:hover {
  color: var(--brand, #1168d8);
}

/* ── 第 1 章：实名资料 ─────────────────────────────────────────── */
.dm-subject {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 12px 0 0;
  padding: 0;
  border: 0;
}

.dm-subject legend {
  padding: 0;
  font-size: 13px;
  font-weight: 700;
}

.dm-radio {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 36px;
  padding: 0 12px;
  border: 1px solid var(--border, #d7dee8);
  border-radius: var(--dm-radius);
  background: var(--surface, #ffffff);
  font-size: 13px;
  cursor: pointer;
  transition: border-color 0.2s ease;
}

.dm-radio:has(input:checked) {
  border-color: var(--brand, #1168d8);
  background: var(--dm-accent-soft);
}

.dm-idcards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px;
  margin-top: 12px;
}

.dm-idcard {
  display: grid;
  gap: 4px;
  justify-items: center;
  min-height: 88px;
  padding: 14px 8px;
  border: 1.5px dashed var(--border, #d7dee8);
  border-radius: var(--dm-radius);
  background: var(--surface-muted, #eef3f8);
  color: var(--text, #151922);
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}

.dm-idcard[data-dm-filled="1"] {
  border-style: solid;
  border-color: var(--dm-ok);
  background: var(--dm-ok-soft);
}

.dm-idcard-state {
  color: var(--muted, #667085);
  font-size: 12px;
  font-weight: 400;
}

.dm-idcard[data-dm-filled="1"] .dm-idcard-state {
  color: var(--dm-ok);
}

.dm-idcard[data-dm-filled="1"] .dm-idcard-state::before {
  content: "✓ 已放入（演示占位图）";
}

.dm-idcard:not([data-dm-filled="1"]) .dm-idcard-state {
  font-size: 0;
}

.dm-idcard:not([data-dm-filled="1"]) .dm-idcard-state::before {
  content: "点击放入演示占位图";
  font-size: 12px;
}

.dm-privacy {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 14px 0 0;
  padding: 10px 14px;
  border: 1px solid var(--border, #d7dee8);
  border-left: 4px solid var(--brand, #1168d8);
  border-radius: var(--dm-radius);
  background: var(--surface-muted, #eef3f8);
  color: var(--text, #151922);
  font-size: 13px;
  line-height: 1.7;
}

.dm-check {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-top: 10px;
  font-size: 14px;
  line-height: 1.7;
  cursor: pointer;
}

.dm-check input {
  margin-top: 4px;
  width: 16px;
  height: 16px;
}

/* ── 第 2A 章：预览 ───────────────────────────────────────────── */
.dm-preview {
  margin-top: 18px;
  padding: 14px;
  border: 1px dashed var(--border, #d7dee8);
  border-radius: var(--dm-radius);
  background: var(--surface-muted, #eef3f8);
  transition: opacity 0.25s ease, border-color 0.25s ease;
}

.dm-preview-title {
  margin: 0 0 10px;
  color: var(--muted, #667085);
  font-size: 12px;
  font-weight: 700;
}

.dm-preview[data-state="pending"] {
  opacity: 0.55;
}

.dm-preview[data-state="done"] {
  border-style: solid;
  border-color: var(--dm-ok);
  background: var(--dm-ok-soft);
}

.dm-preview-card {
  display: flex;
  gap: 12px;
  padding: 12px;
  border: 1px solid var(--border, #d7dee8);
  border-radius: var(--dm-radius);
  background: var(--surface, #ffffff);
}

.dm-preview-thumb {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 56px;
  height: 56px;
  border-radius: var(--dm-radius);
  background: var(--surface-muted, #eef3f8);
  color: var(--muted, #667085);
  font-size: 13px;
}

.dm-preview-body {
  display: grid;
  gap: 2px;
  font-size: 14px;
}

.dm-preview-price {
  color: var(--brand-strong, #0c4fa8);
  font-weight: 800;
}

.dm-preview-shop {
  color: var(--muted, #667085);
  font-size: 12px;
}

/* ── 第 2B 章：凭证 ───────────────────────────────────────────── */
.dm-cred-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 12px;
  margin-top: 10px;
}

.dm-cred-key {
  flex: none;
  min-width: 96px;
  color: var(--muted, #667085);
  font-size: 13px;
  font-weight: 700;
}

.dm-cred-value {
  padding: 4px 8px;
  border-radius: 4px;
  background: var(--surface-muted, #eef3f8);
  font-size: 13px;
  overflow-wrap: anywhere;
}

/* ── 第 3 章：请求与响应 ───────────────────────────────────── */
.dm-code {
  margin: 10px 0 0;
  padding: 14px;
  border: 1px solid var(--border, #d7dee8);
  border-radius: var(--dm-radius);
  background: var(--surface-muted, #eef3f8);
  overflow-x: auto;
}

.dm-code code {
  font-size: 12.5px;
  line-height: 1.7;
}

/* CLS：响应区固定最小高度，打字机推进不引起下方内容跳动（规划 §4.0） */
.dm-resp-wrap {
  min-height: 480px;
}

/* ── 第 4 章：终端切换器与设备框 ───────────────────────────────── */
.dm-switcher {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
  margin-bottom: 14px;
}

.dm-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 4px;
  border: 1px solid var(--border, #d7dee8);
  border-radius: var(--dm-radius);
  background: var(--surface, #ffffff);
}

.dm-tab {
  min-height: 36px;
  padding: 0 12px;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: var(--muted, #667085);
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.dm-tab[aria-selected="true"] {
  background: var(--brand, #1168d8);
  color: #fff;
}

.dm-tab:not([aria-selected="true"]):hover {
  color: var(--brand, #1168d8);
}

.dm-channel {
  display: flex;
  gap: 6px;
}

.dm-channelbtn {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 0 12px;
  border: 1px solid var(--border, #d7dee8);
  border-radius: var(--dm-radius);
  background: var(--surface, #ffffff);
  color: var(--text, #151922);
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}

.dm-channelbtn[aria-pressed="true"] {
  border-color: var(--brand, #1168d8);
  background: var(--dm-accent-soft);
}

.dm-cashier-panels {
  min-height: 380px;
}

.dm-cashier {
  animation: dm-panel-in 0.2s ease;
}

@keyframes dm-panel-in {
  from { opacity: 0.4; }
  to { opacity: 1; }
}

/* 设备框：浏览器 */
.dm-browser {
  max-width: 480px;
  border: 1px solid var(--border, #d7dee8);
  border-radius: var(--dm-radius-lg);
  background: var(--surface, #ffffff);
  overflow: hidden;
  box-shadow: var(--dm-card-shadow);
}

.dm-browser-bar {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 8px 12px;
  background: var(--surface-muted, #eef3f8);
  border-bottom: 1px solid var(--border, #d7dee8);
}

.dm-browser-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--border, #d7dee8);
}

.dm-browser-url {
  margin-left: 8px;
  padding: 2px 10px;
  border-radius: 999px;
  background: var(--surface, #ffffff);
  border: 1px solid var(--border, #d7dee8);
  color: var(--muted, #667085);
  font-size: 11px;
}

/* 设备框：手机（内常驻「演示」水印，红线 2） */
.dm-phone {
  position: relative;
  width: min(300px, 100%);
  min-height: 380px;
  margin: 0 auto;
  border: 1px solid var(--border, #d7dee8);
  border-radius: 24px;
  background: var(--surface, #ffffff);
  overflow: hidden;
  box-shadow: var(--dm-card-shadow);
}

.dm-phone::before {
  content: "";
  position: absolute;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  width: 72px;
  height: 6px;
  border-radius: 3px;
  background: var(--border, #d7dee8);
}

/* 「演示」水印：居中斜置、不拦截交互 */
.dm-phone::after,
.dm-browser::after {
  content: "演示";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-18deg);
  color: rgba(17, 104, 216, 0.08);
  font-size: 56px;
  font-weight: 800;
  pointer-events: none;
}

.dm-browser {
  position: relative;
}

.dm-cashier-body {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 8px;
  padding: 28px 20px 22px;
  text-align: center;
}

.dm-cashier-merchant {
  margin: 0;
  color: var(--muted, #667085);
  font-size: 13px;
}

.dm-cashier-amount {
  margin: 0;
  font-size: 28px;
  font-weight: 800;
}

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

.dm-cashier-note {
  margin: 0;
  color: var(--muted, #667085);
  font-size: 12px;
  line-height: 1.7;
}

.dm-cashier-fallback {
  margin: 2px 0 0;
  color: var(--muted, #667085);
  font-size: 11.5px;
  line-height: 1.7;
}

.dm-cashier-steps {
  margin: 4px 0 0;
  padding-left: 18px;
  text-align: left;
  color: var(--text, #151922);
  font-size: 13px;
  line-height: 1.9;
}

.dm-cashier-guide {
  padding: 10px 14px;
  border: 1px dashed var(--border, #d7dee8);
  border-radius: var(--dm-radius);
  background: var(--surface-muted, #eef3f8);
  color: var(--text, #151922);
  font-size: 13px;
}

.dm-zeroclick {
  padding: 2px 10px;
  border-radius: 999px;
  background: var(--dm-ok-soft);
  color: var(--dm-ok);
  font-size: 11px;
  font-weight: 800;
}

.dm-paypanel {
  display: grid;
  justify-items: center;
  gap: 8px;
  width: 100%;
  padding: 12px;
  border: 1px solid var(--border, #d7dee8);
  border-radius: var(--dm-radius);
  background: var(--surface-muted, #eef3f8);
  font-size: 13px;
}

/* 演示二维码：固定尺寸、确定性图案（不可扫描） */
.dm-qr {
  width: 148px;
  height: 148px;
  padding: 6px;
  border: 1px solid var(--border, #d7dee8);
  border-radius: var(--dm-radius);
  background: #fff;
  color: var(--text, #151922);
}

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

/* ── 钱到卡 / 现在开始：出口 ─────────────────────────────────── */
.dm-settle-points {
  margin: 14px 0 0;
  padding-left: 20px;
  color: var(--muted, #667085);
  font-size: 14px;
  line-height: 1.8;
}

.dm-settle-points li {
  margin: 6px 0;
}

.dm-chapter-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 18px;
  margin-top: 22px;
  padding-top: 16px;
  border-top: 1px dashed var(--border, #d7dee8);
}

.dm-next {
  color: var(--brand, #1168d8);
  font-weight: 800;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}

.dm-next:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.dm-soft-exit {
  color: var(--muted, #667085);
  font-size: 13px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}

.dm-soft-exit:hover {
  color: var(--brand, #1168d8);
}

.dm-foot-main {
  border-top: 0;
  padding-top: 4px;
}

.dm-main-exit {
  min-width: 180px;
}

.dm-exits {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 14px;
  margin-top: 18px;
}

.dm-exit-card {
  display: grid;
  gap: 6px;
  padding: 18px;
  border: 1px solid var(--border, #d7dee8);
  border-radius: var(--dm-radius-lg);
  background: var(--surface, #ffffff);
  color: inherit;
  text-decoration: none;
  box-shadow: var(--dm-card-shadow);
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.dm-exit-card:hover {
  transform: translateY(-2px);
  border-color: var(--brand, #1168d8);
  box-shadow: 0 6px 18px rgba(21, 25, 34, 0.06);
}

.dm-exit-card strong {
  font-size: 16px;
}

.dm-exit-card span {
  color: var(--muted, #667085);
  font-size: 13px;
  line-height: 1.7;
}

.dm-endnote {
  margin: 18px 0 0;
  color: var(--muted, #667085);
  font-size: 13px;
}

/* ── 焦点环与动效降级 ─────────────────────────────────────────── */
.dm-page :focus-visible,
.dm-topbar :focus-visible {
  outline: 2px solid var(--brand, #1168d8);
  outline-offset: 2px;
  border-radius: 4px;
}

@media (max-width: 1024px) {
  .dm-grid {
    grid-template-columns: 1fr;
  }

  .dm-explain {
    position: static;
  }
}

@media (max-width: 430px) {
  .dm-topbar {
    width: min(100% - 24px, 960px);
  }

  .dm-page {
    width: min(100% - 24px, 960px);
    padding-top: 16px;
  }

  .dm-chapter {
    padding-top: 28px;
  }

  .dm-chapter-head h2 {
    font-size: 21px;
  }

  .dm-field-row {
    grid-template-columns: 1fr;
    align-items: stretch;
  }

  .dm-resp-wrap {
    min-height: 520px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .dm-btn,
  .dm-routebtn,
  .dm-tab,
  .dm-channelbtn,
  .dm-progress a,
  .dm-state-chip,
  .dm-exit-card,
  .dm-idcard,
  .dm-preview,
  .dm-step-block,
  #dm-settle-flow .dm-fxseg {
    transition: none;
  }

  .dm-exit-card:hover {
    transform: none;
  }

  .dm-cashier {
    animation: none;
  }

  /* 打字机降级：demo.js 读同一媒体查询，直接完整呈现 */
}