/* ForexPay 收银台样式。手机优先（设计稿 390px 宽），>720px 时内容居中成一张单据。
 * 颜色、字体、圆角、间距一律取 css/tokens.css 的变量，这里不写死色值（金色不能在米白底上当文字，见 tokens.css 的说明）。
 * 不用阴影、圆角一律 3px（卡片 4px），线帽方头 —— 保留单据的硬朗感。 */

/* ---------- 基础 ---------- */
*, *::before, *::after { box-sizing: border-box; }

/* hidden 属性要能压住下面 .backdrop / .toast 这类带 display 的类（同优先级时后写的会赢） */
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: var(--fs-14);
  line-height: var(--lh-base);
  -webkit-font-smoothing: antialiased;
}

/* 明体：标题、金额、按钮上的字 */
.ser { font-family: var(--font-serif); }
/* 等宽数字：金额、单号、卡号 */
.num { font-variant-numeric: tabular-nums; }
.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

a { color: var(--jade); }
a:hover { color: var(--jade-dark); }

:focus-visible { outline: var(--focus-ring); outline-offset: var(--focus-offset); }

img, svg { display: block; max-width: 100%; }

/* 屏幕阅读器专用（隐藏的 <input type="file">、fieldset 的 legend 等也用它）。
   position: absolute 的元素只认「有定位的祖先」，所以 .main、.sheet 都写了 position: relative ——
   不然它会相对视口定位、逃出滚动容器，把文档凭空撑高一截 */
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ---------- 页面骨架 ---------- */
.shell {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  max-width: 520px;
  margin: 0 auto;
  background: var(--bg);
}

/* ---------- 顶栏（墨绿底 + 金线） ---------- */
.topbar {
  flex: none;
  background: var(--ink);
  border-bottom: var(--border-strong) solid var(--gold);
  padding: var(--sp-4) var(--sp-6) var(--sp-6);
}

.topbar-row { display: flex; align-items: center; gap: var(--sp-3); }

.brand { display: flex; align-items: center; gap: var(--sp-3); }

.brand-txt { min-width: 0; }

.brand-name {
  display: block;
  margin: 0;
  font-family: var(--font-serif);
  font-size: var(--fs-16);
  font-weight: 700;
  color: var(--text-on-ink);
  line-height: var(--lh-tight);
}

/* 语言切换：三个真按钮，触摸目标 44px（视觉上仍是小字，用 padding 撑开） */
.langs {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 1px;
}

.lang {
  font-family: inherit;
  font-size: var(--fs-11);
  color: var(--text-on-ink-2);
  background: none;
  border: 0;
  border-radius: var(--radius);
  min-width: 34px;
  min-height: var(--tap);
  padding: 0 var(--sp-1);
  cursor: pointer;
}

.lang:hover { color: var(--text-on-ink); }
.lang[aria-pressed="true"] { color: var(--gold); font-weight: 700; }
.lang-sep { color: #2A5E52; font-size: var(--fs-11); }

/* 顶栏里的金额块 */
.due-lbl {
  margin: var(--sp-5) 0 0;
  font-size: var(--fs-11);
  letter-spacing: var(--ls-label);
  color: var(--gold);
}

.due-amt {
  margin: var(--sp-2) 0 0;
  font-family: var(--font-serif);
  font-size: var(--fs-37);
  font-weight: 900;
  color: var(--text-on-ink);
  font-variant-numeric: tabular-nums;
  line-height: var(--lh-tight);
  overflow-wrap: anywhere;
}

.due-meta {
  margin: 7px 0 0;
  font-size: var(--fs-12);
  color: var(--text-on-ink-2);
}

.due-meta b { color: var(--gold); font-weight: 700; }
.due-meta.urgent b { color: #F0A89E; }

/* 延长时间（顶栏里的小按钮，深底上金描边） */
.ext {
  font-family: inherit;
  font-size: var(--fs-12);
  font-weight: 600;
  color: var(--gold);
  background: none;
  border: var(--border) solid var(--gold);
  border-radius: var(--radius);
  padding: 7px var(--sp-3);
  min-height: 34px;
  margin-left: var(--sp-3);
  cursor: pointer;
}

.ext:hover { color: var(--gold-light); border-color: var(--gold-light); }

/* 步骤条 */
.steps {
  list-style: none;
  display: flex;
  gap: var(--sp-2);
  margin: var(--sp-4) 0 0;
  padding: 0;
}

.steps li {
  flex: 1;
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-11);
  color: var(--text-on-ink-2);
  min-width: 0;
}

.steps li > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.steps i {
  flex: none;
  width: 18px; height: 18px;
  border: var(--border) solid var(--ink-line);
  border-radius: var(--radius);
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; font-style: normal;
}

.steps li.on { color: var(--gold); }
.steps li.on i { border-color: var(--gold); color: var(--gold); }
.steps li.done i { border-color: var(--gold); background: var(--gold); color: var(--ink); }

/* ---------- 内容区 ---------- */
.main {
  position: relative;   /* 兜住里面 position:absolute 的元素（如隐藏的 file input），见 .sr */
  flex: 1;
  /* 底部留一点空：最后一行内容不要顶着吸底条的上边线。
     不需要额外留出按钮的高度 —— .cta 是 sticky 不是 fixed，它在文档流里占着自己的位置，
     滚到底时回到正常位置，不会永久盖住任何内容 */
  padding: var(--sp-5) var(--sp-5) var(--sp-5);
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  min-height: 0;
}

h1 {
  margin: 0;
  font-family: var(--font-serif);
  font-size: var(--fs-21);
  font-weight: 700;
  color: var(--ink);
  letter-spacing: var(--ls-title);
}

.lead { margin: var(--sp-3) 0 0; font-size: var(--fs-13); color: var(--text-2); }

/* 卡片 */
.card {
  background: var(--surface);
  border: var(--border) solid var(--line);
  border-radius: var(--radius-card);
  padding: var(--sp-5);
}

.card-head { display: flex; align-items: center; gap: var(--sp-3); }

.card-head h2 {
  margin: 0;
  font-family: var(--font-serif);
  font-size: var(--fs-15);
  font-weight: 700;
  color: var(--ink);
}

.card-head .opt { margin-left: auto; font-size: var(--fs-11); color: var(--text-2); }

/* 印章式序号（壹 / 贰） */
.seal {
  flex: none;
  width: 22px; height: 22px;
  border-radius: 2px;
  background: var(--ink);
  color: var(--gold);
  font-family: var(--font-serif);
  font-size: var(--fs-13);
  font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}

/* 键值行（收款人 / 卡号 …） */
.rows { margin-top: var(--sp-4); border-top: var(--border) solid var(--line-soft); }

.row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  padding: 11px 0;
  border-bottom: var(--border) solid var(--line-soft);
}

.rows .row:last-child { border-bottom: 0; }

.k { margin: 0; font-size: var(--fs-13); color: var(--text-2); flex: none; }

.v {
  margin: 0;
  font-size: var(--fs-13);
  color: var(--text);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  text-align: right;
  overflow-wrap: anywhere;
}

.v.big { font-size: var(--fs-16); }

.row-v { display: flex; align-items: center; gap: var(--sp-3); min-width: 0; justify-content: flex-end; }

/* 复制按钮。视觉上是个小胶囊（设计稿如此），触摸目标用 ::after 撑到 44px —— 
   直接把按钮做成 44px 高会把键值行撑得很松，这样既合设计又满足无障碍的最小触摸目标 */
.copy {
  position: relative;
  flex: none;
  font-family: inherit;
  font-size: var(--fs-12);
  font-weight: 600;
  color: var(--jade);
  background: var(--jade-wash);
  border: 0;
  border-radius: var(--radius);
  padding: 5px var(--sp-4);
  min-height: 32px;
  cursor: pointer;
}

.copy::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  min-width: var(--tap);
  height: var(--tap);
}

.copy:hover { color: var(--jade-dark); }
.copy.ok { background: var(--ok-bg); color: var(--ok); }

/* 提示条：金线在左，米黄底 */
.note {
  margin: var(--sp-4) 0 0;
  font-size: var(--fs-12);
  line-height: var(--lh-base);
  color: var(--pending);
  background: var(--pending-bg);
  border-left: var(--border-accent) solid var(--gold);
  padding: var(--sp-3) 11px;
}

.note.err { color: var(--error); background: var(--error-bg); border-left-color: var(--vermilion); }
.note.plain { color: var(--text-2); background: var(--line-soft); border-left-color: var(--line); }

/* 操作步骤 / 注意事项 */
.howto, .tips { margin: var(--sp-4) 0 0; padding-left: 1.3em; font-size: var(--fs-12); color: var(--text-2); }
.howto li, .tips li { margin: var(--sp-1) 0; }

/* ---------- 付款方式选择 ---------- */
.methods { border: 0; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-3); }

.method {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  background: var(--surface);
  border: var(--border) solid var(--line);
  border-radius: var(--radius-card);
  padding: var(--sp-4);
  min-height: var(--tap);
  cursor: pointer;
}

.method:has(input:checked) { border-color: var(--ink); border-left: var(--border-accent) solid var(--gold); }
.method:has(input:disabled) { opacity: .55; cursor: not-allowed; }
.method:has(input:focus-visible) { outline: var(--focus-ring); outline-offset: var(--focus-offset); }
.method input { position: absolute; opacity: 0; width: 1px; height: 1px; }

.mi {
  flex: none;
  width: 36px; height: 36px;
  border: var(--border) solid var(--gold);
  border-radius: var(--radius);
  display: flex; align-items: center; justify-content: center;
  font-size: var(--fs-11);
  font-weight: 700;
  color: var(--jade);
}

.mt { flex: 1; min-width: 0; }
.mt > b { display: block; font-family: var(--font-serif); font-size: var(--fs-15); color: var(--ink); font-weight: 700; }
.mt > span { display: block; font-size: var(--fs-12); color: var(--text-2); }

.tag {
  margin-left: var(--sp-2);
  font-family: var(--font-sans);
  font-size: var(--fs-11);
  font-weight: 600;
  color: var(--ok);
  background: var(--ok-bg);
  border-radius: var(--radius);
  padding: 1px var(--sp-2);
}

.radio {
  flex: none;
  width: 16px; height: 16px;
  border: var(--border) solid var(--line);
  border-radius: 50%;
}

.method:has(input:checked) .radio { border: 5px solid var(--ink); }

/* ---------- 收款码 ---------- */
.qrbox { display: flex; flex-direction: column; align-items: center; gap: var(--sp-4); margin-top: var(--sp-4); }
/* 收款码下面的「保存收款码」不要撑满一行（.btn 默认 width:100%） */
.qrbox .btn { width: auto; }
.qrbox img, .qrbox .qr-missing {
  width: 212px; height: 212px;
  background: #fff;
  border: var(--border) solid var(--line);
  border-radius: var(--radius);
  padding: var(--sp-2);
  object-fit: contain;
}
.qrbox .qr-missing {
  display: flex; align-items: center; justify-content: center;
  padding: var(--sp-5);
  text-align: center;
  font-size: var(--fs-12);
  color: var(--text-2);
}
.qrsave { width: 100%; max-width: 280px; margin: var(--sp-4) auto 0; border: var(--border) solid var(--line); border-radius: var(--radius); background: #fff; }
.qrtoggle { margin-top: var(--sp-4); display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sp-3); }
.qrtoggle span { font-size: var(--fs-11); color: var(--text-2); }

/* ---------- 上传凭证 ---------- */
.drop {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-3);
  margin-top: var(--sp-4);
  min-height: 76px;
  width: 100%;
  border: 1.5px dashed var(--gold);
  border-radius: var(--radius);
  background: none;
  cursor: pointer;
  color: var(--text-2);
  font-family: inherit;
  font-size: var(--fs-13);
  padding: var(--sp-4);
  text-align: center;
}

.drop:hover, .drop.over { background: var(--pending-bg); }
.drop.has { border-style: solid; border-color: var(--jade); color: var(--jade); }

/* ---------- 按钮 ---------- */
/* 底部操作区：所有步骤共用这一块（选方式的「下一步」、付款页的「我已完成付款」、
 * 通道页的按钮、终态页的按钮），一律吸底。
 *
 * 用 sticky 不用 fixed：fixed 在手机软键盘弹出时容易乱跳（弹层里有输入框），
 * 而且 sticky 在文档流里占着自己的位置 —— 滚到底时回到正常位置，内容不会被永久盖住，
 * 内容不足一屏时它也不会浮在半空（.shell 是 100dvh 的 flex 列，它就在屏幕底部的正常位置）。
 *
 * 底部内边距 = 正常间距 + 安全区：iPhone 的小黑条占 34px，只用 max() 的话按钮会紧贴小黑条，
 * 用 calc 相加才有正常的视觉留白。没有安全区的设备 env() 取 0px。
 *
 * ！祖先元素只要有 overflow: hidden / auto / clip，sticky 就会失效。
 *   大屏那套（见文件末尾的媒体查询）给 .shell 加了 overflow: hidden 裁圆角，
 *   所以那边改走「卡片封顶 + .main 内部滚动」，.cta 换回静态定位。 */
.cta {
  position: sticky;
  bottom: 0;
  z-index: 5;
  flex: none;
  padding: var(--sp-4) var(--sp-5) calc(var(--sp-6) + env(safe-area-inset-bottom, 0px));
  background: var(--bg);
  border-top: var(--border) solid var(--line);
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}

.cta:empty { display: none; }

.btn {
  font-family: var(--font-serif);
  font-size: var(--fs-16);
  font-weight: 700;
  border-radius: var(--radius);
  padding: var(--sp-4) var(--sp-5);
  min-height: var(--tap);
  cursor: pointer;
  letter-spacing: var(--ls-btn);
  width: 100%;
}

/* 主按钮：墨绿底白字（16:1）。金底白字不达标，不要改成金底 */
.btn.pri { color: var(--text-on-ink); background: var(--ink); border: 0; }
.btn.pri:hover { background: #0F4139; }
.btn.pri:disabled { background: var(--closed-bg); color: var(--closed); cursor: not-allowed; }

/* 次按钮：米白底 + 金色 1px 描边 + 墨绿文字 */
.btn.sec {
  font-family: var(--font-sans);
  font-size: var(--fs-14);
  font-weight: 600;
  color: var(--ink);
  background: var(--surface);
  border: var(--border) solid var(--gold);
}

.btn.sec:hover { background: var(--pending-bg); }

.btn-row { display: flex; align-items: center; justify-content: center; gap: var(--sp-5); flex-wrap: wrap; }

.link {
  font-family: var(--font-sans);
  font-size: var(--fs-12);
  color: var(--jade);
  background: none;
  border: 0;
  border-radius: var(--radius);
  padding: var(--sp-3) var(--sp-2);
  min-height: var(--tap);
  cursor: pointer;
  text-decoration: none;
}

.link:hover { color: var(--jade-dark); text-decoration: underline; }

.foot-note { font-size: var(--fs-11); color: var(--text-2); }

/* ---------- 状态页（成功 / 取消 / 超时 / 等待） ---------- */
.state { text-align: center; padding: var(--sp-7) 0 var(--sp-5); }

.badge {
  width: 56px; height: 56px;
  margin: 0 auto var(--sp-5);
  border-radius: var(--radius);
  display: flex; align-items: center; justify-content: center;
  border: var(--border-strong) solid var(--gold);
  color: var(--ink);
  background: var(--surface);
}

.badge.good { background: var(--ok-bg); color: var(--ok); }
.badge.warn { background: var(--pending-bg); color: var(--pending); }
.badge.err { background: var(--error-bg); color: var(--error); }

.state h1 { font-size: var(--fs-26); }
.state .amt {
  margin: var(--sp-4) 0 0;
  font-family: var(--font-serif);
  font-size: var(--fs-31);
  font-weight: 900;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

/* 时间线 */
.timeline { list-style: none; margin: 0; padding: 0; }

.timeline li {
  display: flex;
  gap: var(--sp-4);
  padding-bottom: var(--sp-5);
  position: relative;
}

.timeline li::before {
  content: "";
  position: absolute;
  left: 9px; top: 20px; bottom: 0;
  border-left: var(--border) solid var(--line);
}

.timeline li:last-child { padding-bottom: 0; }
.timeline li:last-child::before { display: none; }

.timeline .dot {
  flex: none;
  width: 19px; height: 19px;
  border-radius: var(--radius);
  border: var(--border) solid var(--line);
  background: var(--surface);
  color: var(--ok);
  font-size: var(--fs-12);
  display: flex; align-items: center; justify-content: center;
  z-index: 1;
}

.timeline li.done .dot { background: var(--ok-bg); border-color: var(--ok); }
.timeline li.now .dot { background: var(--gold); border-color: var(--gold); }
.timeline b { display: block; font-size: var(--fs-14); color: var(--ink); font-weight: 600; }
.timeline span { display: block; font-size: var(--fs-12); color: var(--text-2); font-variant-numeric: tabular-nums; }

/* ---------- 弹层 ---------- */
.backdrop {
  position: fixed; inset: 0;
  background: rgba(7, 36, 30, .62);
  display: flex; align-items: flex-end; justify-content: center;
  padding: var(--sp-5);
  z-index: 40;
  overflow: auto;
}

.sheet {
  position: relative;   /* 同 .main：兜住里面隐藏的 file input */
  background: var(--surface);
  border: var(--border) solid var(--line);
  border-top: var(--border-accent) solid var(--gold);
  border-radius: var(--radius-card);
  padding: var(--sp-6);
  width: 100%;
  max-width: 460px;
  margin: auto 0 0;
}

.sheet h2 { margin: 0; font-family: var(--font-serif); font-size: var(--fs-18); font-weight: 700; color: var(--ink); }
.sheet .sub { margin: var(--sp-3) 0 0; font-size: var(--fs-13); color: var(--text-2); }
/* 弹层里的按钮组复用了 .cta 这个类名，但它在弹层里不吸底、也不要上边线 */
.sheet .cta { position: static; z-index: auto; border-top: 0; padding: var(--sp-6) 0 0; }

/* 表单 */
.fg { margin-top: var(--sp-5); }
.fg > label, .fgl { display: block; font-size: var(--fs-13); font-weight: 600; color: var(--ink); margin-bottom: var(--sp-2); }
.fg .opt { font-weight: 400; color: var(--text-2); }

.inp {
  width: 100%;
  font-family: inherit;
  font-size: var(--fs-15);
  color: var(--text);
  background: var(--bg);
  border: var(--border) solid var(--line);
  border-radius: var(--radius);
  padding: 11px var(--sp-4);
  min-height: var(--tap);
}

.inp:focus-visible { border-color: var(--jade); outline: var(--focus-ring); outline-offset: 0; }
textarea.inp { min-height: 76px; line-height: var(--lh-base); resize: vertical; }

.phone { display: flex; gap: var(--sp-3); }
.phone .cc { width: 104px; flex: none; }

.err { display: block; margin-top: var(--sp-2); font-size: var(--fs-12); color: var(--error); }
.hint { display: block; margin-top: var(--sp-2); font-size: var(--fs-11); color: var(--text-2); }

/* 原因选项 */
.chips { display: flex; flex-wrap: wrap; gap: var(--sp-3); }

.chip {
  font-family: inherit;
  font-size: var(--fs-13);
  color: var(--text);
  background: var(--bg);
  border: var(--border) solid var(--line);
  border-radius: var(--radius);
  padding: var(--sp-3) var(--sp-4);
  min-height: var(--tap);
  cursor: pointer;
}

.chip[aria-pressed="true"] { border-color: var(--ink); background: var(--jade-wash); color: var(--ink); font-weight: 600; }

/* 提示 toast */
.toast {
  position: fixed;
  left: 50%; bottom: 24px;
  transform: translateX(-50%);
  max-width: calc(100% - 32px);
  background: var(--ink);
  color: var(--text-on-ink);
  border: var(--border) solid var(--gold);
  border-radius: var(--radius);
  padding: var(--sp-3) var(--sp-5);
  font-size: var(--fs-13);
  z-index: 50;
}

/* ---------- 演示控制台（只给开发和演示用；生产构建会去掉，所以这里不按 44px 触摸目标要求做） ---------- */
.demo { background: var(--ink-deep); border-bottom: var(--border) solid var(--gold); padding: var(--sp-2) var(--sp-4); }
.demo-in { max-width: 520px; margin: 0 auto; display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); }
.demo-tag { font-size: var(--fs-11); color: var(--gold); letter-spacing: var(--ls-label); }
.demo select, .db {
  font-family: inherit;
  font-size: var(--fs-11);
  color: var(--text-on-ink);
  background: var(--ink);
  border: var(--border) solid var(--ink-line);
  border-radius: var(--radius);
  padding: var(--sp-2) var(--sp-3);
  min-height: 32px;
  cursor: pointer;
  max-width: 100%;
}

/* ---------- 大屏：内容居中，顶栏圆角收一下 ---------- */
/* ---------- 大屏：内容居中成一张单据 ----------
 * 这里给 .shell 加了 overflow: hidden 裁圆角，sticky 会因此失效，所以换一套等效做法：
 * 卡片最高占满视口 —— 内容短就按内容高（按钮在内容下面的正常位置，不留一大块空白），
 * 内容长就封顶、由 .main 内部滚动，按钮一直在卡片底部。观感和手机上的吸底一致。 */
@media (min-width: 720px) {
  body { background: var(--ink-deep); }
  .shell {
    margin: var(--sp-6) auto;
    min-height: auto;
    max-height: calc(100dvh - var(--sp-6) * 2);
    border: var(--border) solid var(--line);
    border-radius: var(--radius-card);
    overflow: hidden;
  }
  .main { overflow-y: auto; padding: var(--sp-6) var(--sp-6) var(--sp-5); }
  .cta { position: static; padding: var(--sp-5) var(--sp-6) var(--sp-7); }
  .backdrop { align-items: center; }
  .sheet { margin: 0; }
}

/* 减少动态效果 */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}