/**
 * 换卡服务（exchange.vtd.best）客户页样式：MythosX 暗色单主题。
 *
 * 业务定位：老 ForgeX 旧卡密客户在这里把旧卡换成 MythosX 新验证服务的授权，存量客户换完后整站下架。
 * 为什么单独一份：换卡站是独立域名、独立 ASP.NET 程序，生产 CSP 为 style-src 'self'，不能跨站引用官网的 mx/mx.css；
 * 这里复制了 mx.css 里用到的令牌（颜色、字体、版心、缓动）和顶栏、按钮、标签的写法，取值保持一致，
 * 顶栏高度、字标位置、页面底色与官网逐像素相同，站间跳转看不出接缝。官网令牌改了，这里要同步。
 *
 * 适用范围：只给客户页 index 用。运维页、错误页仍引用旧的 site.css / forgex-tokens.css，本文件不覆盖它们。
 *
 * 取舍：
 *   - 只有一个强调色 --accent（刀口暖光），只出现在三处：退役提示左侧细线、流程轨当前步骤的序号、键盘焦点框；
 *     状态色（--ok / --down）只进状态标签和错误标记；
 *   - 动效只有透明度淡入和处理中的细扫描线，不用位移、不用弹性曲线，切换没有弹跳；
 *   - site.js 会按浅色系统偏好往 <html> 写 data-theme 和内联 color-scheme：这里用 !important 固定暗色，
 *     不改 site.js 的主题逻辑（它与运维页共用）；
 *   - 版式用 12 列网格：首屏提示占 1–6 列，「迁移说明」与工作区都按「左 3 列 + 右 9 列」切，
 *     三条说明各占 3 列，所以提示块右边、第一条说明右边、工具卡左边都落在同一组竖线上。
 */

/* 字体 ------------------------------------------------------------------- */
/* Inter / JetBrains Mono 与旧版同一份文件；标题字是思源宋（Noto Serif SC，OFL）按本页标题裁的子集，
   取字清单见 ZCODE-EXCHANGE.md，新增或改动 --display 元素的文字后要重裁 */
@font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("../fonts/inter-normal-latin.woff2") format("woff2"); }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 100 800; font-display: swap; src: url("../fonts/jetbrains-mono-normal-latin.woff2") format("woff2"); }
@font-face { font-family: "MythosX Display"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/display-500.woff2") format("woff2"); }

/* 令牌（取值与 package/site/mx/mx.css 一致） ------------------------------ */
:root {
  --bg: #060607;
  --surface: #0d0d0f;
  --surface-2: #141417;
  --field: #09090b;
  --line: rgba(240, 238, 233, .085);
  --line-2: rgba(240, 238, 233, .17);
  --text: #f0eee9;
  --text-2: #a7a59e;
  --text-3: #74726c;
  --accent: #e8c493;          /* 刀口暖光，全站唯一强调色 */
  --accent-rgb: 232, 196, 147;
  --ink-rgb: 240, 238, 233;
  --ok: #63c08f;
  --down: #de6b5e;
  --bar-h: 64px;
  --gutter: clamp(20px, 4vw, 56px);
  --wrap: clamp(1280px, 62vw, 1520px);
  --col-gap: clamp(20px, 2.4vw, 40px);
  --ease: cubic-bezier(.2, 0, 0, 1);
  --sans: "Inter", "PingFang SC", "HarmonyOS Sans SC", "MiSans", "Microsoft YaHei", system-ui, sans-serif;
  --display: "MythosX Display", "Noto Serif SC", "Songti SC", "STSong", serif;
  --mono: "JetBrains Mono", "PingFang SC", "HarmonyOS Sans SC", "MiSans", "Microsoft YaHei", ui-monospace, monospace;
  --control-h: 56px;          /* 输入框、校验块、核对按钮同一行，一律这个高度 */
  --action-h: 52px;           /* 其余动作按钮 */
}

/* 基础 ------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
/* 暗色单主题：压过 site.js 写进 <html> 的内联 color-scheme（浅色系统下它会写 light，原生控件和滚动条会变白） */
html { color-scheme: dark !important; background: var(--bg); scroll-behavior: smooth; scroll-padding-top: calc(var(--bar-h) + 24px); scrollbar-gutter: stable; scrollbar-color: #2c2c30 transparent; -webkit-text-size-adjust: 100%; }
body { margin: 0; min-height: 100vh; display: flex; flex-direction: column; background: var(--bg); color: var(--text); font: 400 16px/1.75 var(--sans); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: clip; }
h1, h2, h3, p, ol, dl, dd, fieldset, legend { margin: 0; padding: 0; }
/* 段落末行不留单字（「行。」这种孤字），不支持的浏览器照常折行 */
p, dd span, small { text-wrap: pretty; }
ol { list-style: none; }
a { color: inherit; text-decoration: none; }
button, input { font: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; }
img, svg { display: block; }
[hidden] { display: none !important; }
::selection { background: rgba(var(--accent-rgb), .28); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
.wrap { width: min(100%, calc(var(--wrap) + var(--gutter) * 2)); margin-inline: auto; padding-inline: var(--gutter); }
/* 只给读屏：文件选择框本体、工具区的「核对旧卡」标题 */
.visually-hidden { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; }
/* 防机器人的 Website 字段：人看不见、键盘也进不去（tabindex=-1），机器人填了后端据此拒绝。不能用 display:none，部分机器人会跳过不可见字段 */
.bot-field { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.kicker { font: 500 13px/1.4 var(--mono); letter-spacing: .04em; color: var(--text-3); }

/* 顶栏（与官网 .bar 同尺寸：栏高 64、字标高 24、同一版心） ------------------- */
/* 换卡站不加载官网的 mx-shell.js：顶栏常驻实底，滚动后的分隔线用滚动时间线做，不支持的浏览器就没有这条线 */
.bar { position: fixed; inset: 0 0 auto; z-index: 50; height: var(--bar-h); background: var(--bg); border-bottom: 1px solid transparent; }
@supports (animation-timeline: scroll()) {
  .bar { animation: bar-rule linear both; animation-timeline: scroll(root block); animation-range: 0px 24px; }
  @keyframes bar-rule { to { border-bottom-color: var(--line); } }
}
.bar-in { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.brand { display: inline-flex; color: var(--text); }
.wordmark { width: auto; height: 24px; flex: none; }
.tail { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--text-2); }
.site-link { display: inline-flex; align-items: center; height: 36px; padding: 0 14px; border-radius: 999px; transition: color .2s var(--ease), background-color .2s var(--ease); }
.site-link:hover { color: var(--text); background: rgba(var(--ink-rgb), .075); }
.lang-switch { display: inline-flex; align-items: center; height: 36px; padding: 0 6px; font: 500 12px/1 var(--mono); letter-spacing: .04em; }
.lang-switch button { height: 36px; padding: 0 6px; color: var(--text-3); transition: color .2s var(--ease); }
.lang-switch button:hover { color: var(--text-2); }
.lang-switch button.is-active, .lang-switch button[aria-pressed="true"] { color: var(--text); }
.lang-switch span { color: rgba(var(--ink-rgb), .2); }

/* 页面骨架 --------------------------------------------------------------- */
/* 首屏右上角一片很淡的暖灰光，和官网内页首屏同一种处理 */
.fx-main { flex: 1 0 auto; background: radial-gradient(60% 560px at 80% 0, rgba(150, 140, 124, .08), transparent 70%) no-repeat; }
.exchange-heading,
.migration-facts,
.exchange-workspace { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); }

/* 首屏：标题、月卡范围、退役提示 -------------------------------------------- */
/* 首屏比官网介绍页收紧：1440×900 下退役提示和三条说明都要在第一屏里 */
.exchange-heading { padding: calc(var(--bar-h) + clamp(44px, 6vw, 104px)) 0 clamp(40px, 5vw, 72px); }
.exchange-heading > * { grid-column: 1 / -1; }
.exchange-runner { font: 500 13px/1.4 var(--mono); letter-spacing: .04em; color: var(--text-3); }
.exchange-runner span + span::before { content: "·"; margin: 0 .7em; }
.exchange-heading h1 { margin-top: 20px; font: 500 clamp(44px, 5.4vw, 88px) / 1.06 var(--display); letter-spacing: -.01em; color: var(--text); }
.exchange-policy { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-top: 24px; }
.policy-tag { display: inline-flex; align-items: center; height: 28px; padding: 0 12px; border: 1px solid var(--line-2); border-radius: 999px; font-size: 13px; font-weight: 500; color: var(--text); white-space: nowrap; }
.policy-note { font-size: 14px; color: var(--text-3); }
/* 退役提示：醒目但克制——不用整块强调色，只有左侧一条 2px 暖光线 + 宋体小标题 */
.exchange-heading .retire-notice { grid-column: 1 / 7; margin-top: clamp(32px, 3.6vw, 48px); padding: 22px 26px 24px; border: 1px solid var(--line); border-left: 2px solid var(--accent); border-radius: 10px; background: var(--surface); }
.retire-notice h2 { font: 500 clamp(21px, 1.6vw, 24px) / 1.35 var(--display); color: var(--text); }
.retire-notice p { margin-top: 8px; font-size: 15.5px; line-height: 1.8; color: var(--text-2); }

/* 迁移说明：左 3 列标题与导语，右 9 列三条说明 ----------------------------- */
.facts-heading { grid-column: 1 / 4; padding-top: 18px; border-top: 1px solid var(--line); }
.facts-heading h2 { margin-top: 10px; font: 500 clamp(26px, 2.2vw, 32px) / 1.25 var(--display); color: var(--text); }
.exchange-intro { margin-top: 14px; font-size: 14.5px; line-height: 1.8; color: var(--text-2); }
.facts-body { grid-column: 4 / -1; }
.facts-body dl { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--col-gap); row-gap: 28px; }
.facts-body dl > div { padding-top: 18px; border-top: 1px solid var(--line-2); }
/* 「成功后旧卡停用」是唯一不可逆的一条：顶线提亮，不另加颜色 */
.facts-body dl > .fact-critical { border-top-color: rgba(var(--ink-rgb), .5); }
.facts-body dt { font: 500 12px/1.4 var(--mono); letter-spacing: .04em; color: var(--text-3); }
.facts-body dd strong { display: block; margin: 12px 0 6px; font-size: 16px; font-weight: 500; line-height: 1.5; color: var(--text); }
.facts-body dd span { display: block; font-size: 14.5px; line-height: 1.75; color: var(--text-2); }
.support-note { margin-top: 28px; font-size: 13.5px; line-height: 1.7; color: var(--text-3); }

/* 工作区：左 3 列流程轨（吸顶），右 9 列同页工具 ----------------------------- */
.exchange-workspace { align-items: start; padding: clamp(48px, 5vw, 80px) 0 clamp(80px, 8vw, 128px); }
.journey-rail { grid-column: 1 / 4; position: sticky; top: calc(var(--bar-h) + 32px); padding-top: 18px; border-top: 1px solid var(--line); }
.progress-track { margin-top: 14px; }
.progress-track li { display: grid; grid-template-columns: 34px minmax(0, 1fr); align-items: baseline; padding: 12px 0; border-bottom: 1px solid var(--line); transition: color .3s var(--ease); }
.progress-track span { font: 500 12px/1.5 var(--mono); color: var(--text-3); transition: color .3s var(--ease); }
.progress-track b { font-size: 14.5px; font-weight: 500; line-height: 1.5; color: var(--text-3); transition: color .3s var(--ease); }
.progress-track li.is-done span, .progress-track li.is-done b { color: var(--text-2); }
.progress-track li.is-active span { color: var(--accent); }
.progress-track li.is-active b { color: var(--text); }
.journey-note { margin-top: 18px; font-size: 13.5px; line-height: 1.75; color: var(--text-3); }

.exchange-tool { grid-column: 4 / -1; min-width: 0; padding: clamp(22px, 3vw, 44px); border: 1px solid var(--line); border-radius: 14px; background: linear-gradient(to bottom, #111114, rgba(13, 13, 15, .35) 72%); box-shadow: inset 0 1px 0 rgba(var(--ink-rgb), .07); }
/* 同时可见的区域之间（例如确认区 + 错误提示）用细线隔开 */
.exchange-tool > :not([hidden]) ~ :not([hidden]) { margin-top: 32px; padding-top: 32px; border-top: 1px solid var(--line); }
/* 各阶段出现时只淡入：hidden 切成可见会重启动画，不用位移，不会把下面的内容顶跳 */
.entry-region, .status-region, .confirm-region, .result-region, .error-region { animation: region-in .36s var(--ease) both; }
@keyframes region-in { from { opacity: 0; } }

.stage-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px 24px; }
.stage-heading h2 { font: 500 clamp(26px, 2.2vw, 32px) / 1.25 var(--display); color: var(--text); }
.stage-lead { font-size: 15.5px; line-height: 1.8; color: var(--text-2); }
.stage-heading h2 + .stage-lead { margin-top: 8px; }
.stage-lead:empty { display: none; }
/* 状态标签：状态色只出现在这里 */
.seal { flex: none; display: inline-flex; align-items: center; gap: 8px; height: 28px; padding: 0 12px; border: 1px solid var(--line-2); border-radius: 999px; font: 500 12px/1 var(--mono); letter-spacing: .04em; color: var(--text-2); white-space: nowrap; }
.seal.is-ok { color: var(--ok); border-color: rgba(99, 192, 143, .35); }
.seal.is-ok::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

/* 按钮：主按钮实底（同官网 .btn-solid），次按钮描边（同 .btn-line） */
.primary-action, .commit-action, .secondary-action { display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: var(--action-h); padding: 0 26px; border-radius: 8px; font-size: 15px; font-weight: 500; letter-spacing: .01em; white-space: nowrap; transition: background-color .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease), opacity .2s var(--ease); }
.primary-action, .commit-action { background: var(--text); color: #101012; }
.primary-action:hover, .commit-action:hover { background: #fff; }
.secondary-action { border: 1px solid var(--line-2); color: var(--text); }
.secondary-action:hover { border-color: rgba(var(--ink-rgb), .36); background: rgba(var(--ink-rgb), .04); }
.action-arrow { transition: transform .25s var(--ease); }
.primary-action:hover .action-arrow, .commit-action:not(:disabled):hover .action-arrow { transform: translateX(3px); }
.primary-action:disabled, .commit-action:disabled { background: rgba(var(--ink-rgb), .1); color: var(--text-3); cursor: not-allowed; }
.text-action { font-size: 14px; font-weight: 500; color: var(--text-2); text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 4px; transition: color .2s var(--ease); }
.text-action:hover { color: var(--text); }

/* 核对表单 --------------------------------------------------------------- */
#exchange-form { margin-top: 28px; }
.field-label { display: block; margin-bottom: 10px; font-size: 14px; font-weight: 500; color: var(--text-2); }
#source-card, #challenge-answer { width: 100%; height: var(--control-h); padding: 0 18px; border: 1px solid var(--line-2); border-radius: 10px; background: var(--field); font: 400 16px/1 var(--mono); color: var(--text); transition: border-color .2s var(--ease); }
#source-card::placeholder, #challenge-answer::placeholder { font-family: var(--sans); color: var(--text-3); }
#source-card:hover, #challenge-answer:hover { border-color: rgba(var(--ink-rgb), .3); }
#source-card:focus, #challenge-answer:focus { border-color: rgba(var(--ink-rgb), .55); }
#source-card:focus-visible, #challenge-answer:focus-visible { outline-offset: 2px; }
#source-card:disabled, #challenge-answer:disabled { opacity: .55; }
.field-note { margin-top: 10px; font-size: 13px; line-height: 1.7; color: var(--text-3); }
.verification-row { display: grid; grid-template-columns: minmax(0, 1fr) 150px auto; gap: 12px; margin-top: 24px; }
.verification-row > * { height: var(--control-h); }
.challenge-block { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-width: 0; padding: 0 18px; border: 1px solid var(--line); border-radius: 10px; background: rgba(var(--ink-rgb), .025); }
.challenge-block span { font-size: 13.5px; color: var(--text-3); white-space: nowrap; }
.challenge-block strong { overflow: hidden; font: 500 16px/1 var(--mono); color: var(--text); white-space: nowrap; text-overflow: ellipsis; }
#challenge-answer { text-align: center; }
.verification-row .primary-action { padding: 0 28px; }
#exchange-form[aria-busy="true"] .primary-action { opacity: .6; }

/* 处理中 ----------------------------------------------------------------- */
/* 底部一条细扫描线表示「还在走」：不闪烁、不转圈，处理结束（aria-busy=false）就停 */
.status-region { position: relative; padding-bottom: 28px; }
.status-region::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(var(--ink-rgb), .55), transparent) no-repeat; background-size: 36% 100%; background-color: var(--line); animation: status-scan 2.2s var(--ease) infinite; }
.status-region[aria-busy="false"]::after { animation: none; background-image: none; }
@keyframes status-scan { from { background-position: -60% 0; } to { background-position: 160% 0; } }
.status-line { display: flex; align-items: center; gap: 12px; font: 500 12px/1.4 var(--mono); letter-spacing: .04em; color: var(--text-3); }
.status-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--text-2); }
#status-message { margin-top: 14px; font-size: clamp(20px, 1.6vw, 24px); font-weight: 500; line-height: 1.4; color: var(--text); }
#status-detail { margin-top: 8px; font-size: 15px; line-height: 1.8; color: var(--text-2); }

/* 确认迁移 --------------------------------------------------------------- */
.migration-impact { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 28px; }
.migration-impact > div { display: grid; grid-template-columns: 30px minmax(0, 1fr); align-items: baseline; padding: 18px 20px; border: 1px solid var(--line); border-radius: 10px; }
.migration-impact span { font: 500 12px/1.5 var(--mono); color: var(--text-3); }
.migration-impact strong { display: block; font-size: 15px; font-weight: 500; line-height: 1.5; color: var(--text); }
.migration-impact small { display: block; margin-top: 4px; font-size: 13.5px; line-height: 1.7; color: var(--text-2); }

.evidence-upload { margin-top: 32px; padding-top: 28px; border-top: 1px solid var(--line); }
.evidence-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px 24px; }
.evidence-heading h3 { font-size: 18px; font-weight: 500; line-height: 1.4; color: var(--text); }
.evidence-heading p { max-width: 46em; margin-top: 6px; font-size: 14px; line-height: 1.75; color: var(--text-2); }
.evidence-limit { flex: none; display: inline-flex; align-items: center; height: 28px; padding: 0 12px; border: 1px solid var(--line-2); border-radius: 999px; font: 500 12px/1 var(--mono); color: var(--text-2); white-space: nowrap; }
.evidence-kind { margin-top: 22px; border: 0; min-width: 0; }
.evidence-kind legend { margin-bottom: 10px; font-size: 13px; color: var(--text-3); }
.evidence-kind-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.evidence-kind-options label { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 12px; padding: 16px 18px; border: 1px solid var(--line); border-radius: 10px; cursor: pointer; transition: border-color .2s var(--ease), background-color .2s var(--ease); }
.evidence-kind-options label:hover { border-color: var(--line-2); }
.evidence-kind-options label:has(input:checked) { border-color: rgba(var(--ink-rgb), .45); background: rgba(var(--ink-rgb), .03); }
.evidence-kind-options input, .check-line input { width: 16px; height: 16px; margin: 4px 0 0; accent-color: var(--text); }
.evidence-kind-options strong { display: block; font-size: 14.5px; font-weight: 500; line-height: 1.5; color: var(--text); }
.evidence-kind-options small { display: block; margin-top: 2px; font-size: 13px; line-height: 1.6; color: var(--text-3); }
.evidence-drop { display: flex; align-items: center; gap: 16px; min-height: 96px; margin-top: 14px; padding: 20px 22px; border: 1px dashed var(--line-2); border-radius: 10px; cursor: pointer; transition: border-color .2s var(--ease), background-color .2s var(--ease); }
.evidence-drop:hover { border-color: rgba(var(--ink-rgb), .35); }
.evidence-drop.is-dragging { border-style: solid; border-color: rgba(var(--ink-rgb), .55); background: rgba(var(--ink-rgb), .04); }
/* 文件框本体是 visually-hidden，键盘焦点落在它身上时由整块拖放区显示焦点框 */
.evidence-drop:focus-within { outline: 2px solid var(--accent); outline-offset: 3px; }
.evidence-upload[data-state="error"] .evidence-drop { border-color: rgba(222, 107, 94, .55); }
.evidence-drop-mark { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border: 1px solid var(--line-2); border-radius: 50%; font-size: 16px; color: var(--text-2); }
.evidence-drop-copy strong { display: block; font-size: 15px; font-weight: 500; line-height: 1.5; color: var(--text); }
.evidence-drop-copy small { display: block; margin-top: 2px; font-size: 13px; color: var(--text-3); }
.evidence-preview { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; align-items: center; gap: 16px; margin-top: 12px; padding: 12px 18px 12px 12px; border: 1px solid var(--line); border-radius: 10px; }
.evidence-preview img { width: 64px; height: 64px; border-radius: 6px; object-fit: cover; background: var(--surface-2); }
.evidence-file-copy strong { display: block; font-size: 14px; font-weight: 500; line-height: 1.5; color: var(--text); overflow-wrap: anywhere; }
.evidence-file-copy span { display: block; margin-top: 2px; font: 400 12.5px/1.5 var(--mono); color: var(--text-3); }
.evidence-error { margin-top: 10px; font-size: 13.5px; line-height: 1.7; color: var(--down); }
.evidence-note { margin-top: 12px; font-size: 13px; line-height: 1.7; color: var(--text-3); }

.confirm-acknowledgements { margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--line); }
.acknowledgement-title { margin-bottom: 6px; font: 500 12px/1.4 var(--mono); letter-spacing: .04em; color: var(--text-3); }
.check-line { display: grid; grid-template-columns: 16px minmax(0, 1fr); gap: 12px; padding: 9px 0; font-size: 14.5px; line-height: 1.7; color: var(--text-2); cursor: pointer; transition: color .2s var(--ease); }
.check-line:has(input:checked) { color: var(--text); }
.stage-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 28px; }

/* 结果 ------------------------------------------------------------------- */
.result-body { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: clamp(24px, 3vw, 48px); margin-top: 28px; }
.output-label { margin-bottom: 10px; font: 500 12px/1.4 var(--mono); letter-spacing: .04em; color: var(--text-3); }
.card-output { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; }
.card-code-shell { position: relative; min-width: 0; border: 1px solid var(--line-2); border-radius: 10px; background: var(--field); }
#new-card { display: block; max-height: 7.6em; overflow: auto; padding: 15px 18px; font: 500 15px/1.6 var(--mono); color: var(--text); white-space: pre-wrap; overflow-wrap: anywhere; }
.card-scroll-hint { position: absolute; right: 10px; bottom: 8px; display: inline-flex; gap: 6px; padding: 2px 8px; border-radius: 6px; background: var(--field); font: 400 11.5px/1.6 var(--mono); color: var(--text-3); pointer-events: none; }
/* 复制按钮随卡密框拉满同高（同一行控件同高），卡密短时两者都是 52 */
#copy-card { align-self: stretch; min-height: var(--action-h); padding: 0 22px; border: 1px solid var(--line-2); border-radius: 8px; font-size: 14.5px; font-weight: 500; color: var(--text); transition: border-color .2s var(--ease), background-color .2s var(--ease); }
#copy-card:hover:not(:disabled) { border-color: rgba(var(--ink-rgb), .36); background: rgba(var(--ink-rgb), .04); }
#copy-card:disabled { opacity: .45; cursor: not-allowed; }
.next-steps h3 { margin-bottom: 8px; font: 500 12px/1.4 var(--mono); letter-spacing: .04em; color: var(--text-3); }
.next-steps li { display: grid; grid-template-columns: 30px minmax(0, 1fr); align-items: baseline; padding: 11px 0; border-top: 1px solid var(--line); }
.next-steps li span { font: 500 12px/1.5 var(--mono); color: var(--text-3); }
.next-steps li p { font-size: 14.5px; line-height: 1.6; color: var(--text); }
.start-over-action { margin-top: 20px; }

/* 未完成 / 不符合条件 ------------------------------------------------------ */
.error-region { display: grid; grid-template-columns: 32px minmax(0, 1fr); column-gap: 16px; }
.error-mark { display: grid; place-items: center; width: 32px; height: 32px; border: 1px solid rgba(222, 107, 94, .5); border-radius: 50%; font: 600 15px/1 var(--mono); color: var(--down); }
.error-copy { min-width: 0; padding-top: 3px; }
#error-title { display: block; font-size: 17px; font-weight: 500; line-height: 1.5; color: var(--text); }
#error-message { margin-top: 4px; font-size: 14.5px; line-height: 1.75; color: var(--text-2); }
#error-message:empty { display: none; }
.eligibility-details { margin-top: 16px; padding: 14px 18px; border: 1px solid var(--line); border-radius: 10px; }
.eligibility-details-title { margin-bottom: 6px; font: 500 12px/1.4 var(--mono); letter-spacing: .04em; color: var(--text-3); }
/* 列间距用 dt 的右内边距而不是 column-gap：分隔线要从左到右连成一条，不能在两列之间断开 */
.eligibility-details dl { display: grid; grid-template-columns: minmax(96px, max-content) minmax(0, 1fr); }
.eligibility-details dt { padding-right: 24px; }
.eligibility-details dt, .eligibility-details dd { padding-block: 7px; border-top: 1px solid var(--line); font-size: 13.5px; line-height: 1.6; }
.eligibility-details dt { color: var(--text-3); }
.eligibility-details dd { color: var(--text); }
.eligibility-details dt:first-of-type, .eligibility-details dd:first-of-type { border-top: 0; }
.error-reference { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin-top: 12px; font-size: 13px; color: var(--text-3); }
.error-reference code { font: 500 13px/1.6 var(--mono); color: var(--text); overflow-wrap: anywhere; }
.error-actions { grid-column: 2; display: flex; flex-wrap: wrap; gap: 12px; margin-top: 20px; }

/* 页脚 ------------------------------------------------------------------- */
.foot { border-top: 1px solid var(--line); }
.foot-meta { display: flex; justify-content: space-between; align-items: center; gap: 8px 24px; min-height: 76px; padding-block: 24px; font-size: 13px; color: var(--text-3); }

/* 窄屏 ------------------------------------------------------------------- */
@media (max-width: 960px) {
  .exchange-heading .retire-notice { grid-column: 1 / -1; max-width: 720px; }
  .facts-heading, .facts-body, .journey-rail, .exchange-tool { grid-column: 1 / -1; }
  .facts-body { margin-top: 28px; }
  .facts-heading { padding-top: 0; border-top: 0; }
  .facts-heading .exchange-intro { max-width: 40em; }
  /* 流程轨改成工具卡上方的一排四格，不再吸顶；仍是同一个 <ol>，site.js 按下标点亮 */
  .journey-rail { position: static; margin-bottom: 20px; padding-top: 0; border-top: 0; }
  .progress-track { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
  .progress-track li { display: block; padding: 10px 0 0; border-bottom: 0; border-top: 2px solid var(--line-2); }
  .progress-track li.is-done { border-top-color: rgba(var(--ink-rgb), .45); }
  .progress-track li.is-active { border-top-color: var(--accent); }
  .progress-track span { display: block; }
  .progress-track b { display: block; margin-top: 2px; font-size: 13px; }
  .journey-note { margin-top: 14px; }
}
@media (max-width: 640px) {
  .facts-body dl { grid-template-columns: minmax(0, 1fr); row-gap: 22px; }
  .verification-row { grid-template-columns: minmax(0, 1fr) auto; }
  .challenge-block { grid-column: 1 / -1; }
  .verification-row .primary-action { padding: 0 22px; }
  .migration-impact, .evidence-kind-options, .result-body { grid-template-columns: minmax(0, 1fr); }
  /* 窄屏标题区：状态标签放到标题上方，标题和导语拿满整行，不被标签挤成两三个字一行 */
  .stage-heading { flex-direction: column-reverse; gap: 14px; }
  .evidence-heading { flex-direction: column; }
  .stage-actions { flex-direction: column-reverse; align-items: stretch; }
  .stage-actions > * { width: 100%; }
  .error-actions { grid-column: 1 / -1; }
  .error-actions > * { flex: 1 1 auto; }
  .foot-meta { flex-direction: column; align-items: flex-start; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
  .status-region::after { animation: none; background-image: none; }
}