/* 旗舰站 · 付款人视图补齐 — 仅 /pay/ 引用
 * 沿用 assets/style.css 变量与 Citi 语言（纯白 + 细灰边框卡片 + 银行蓝），
 * 类名与一单清算收款台一致；不覆盖 .card/.primary/.ghost/.alertbar */

.steps { list-style: none; margin: 0 0 14px; padding: 12px; display: flex; gap: 6px; flex-wrap: wrap;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius); }
.step { flex: 1 1 30%; display: flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 600;
  color: var(--mut); min-width: 0; min-height: 44px; }
.step .n { width: 22px; height: 22px; border-radius: 50%; background: var(--faint); color: #fff;
  font-size: 12px; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.step.cur { color: var(--citi-navy); }
.step.cur .n { background: var(--citi); }

.big-amt { font-size: 34px; font-weight: 800; color: var(--citi-navy); letter-spacing: -.01em;
  margin: 6px 0 10px; overflow-wrap: anywhere; }
.big-amt small { font-size: 15px; font-weight: 700; color: var(--mut); }

.card-head { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; flex-wrap: wrap; }
.card-head .card-title { margin: 0; }

.addr-box { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12px;
  background: var(--bg-alt); border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: 10px 12px; overflow-wrap: anywhere; word-break: break-all; color: var(--citi-navy); margin: 8px 0; }

.confirm-box { border: 1px dashed var(--field-bd); border-radius: var(--radius); padding: 12px;
  margin-top: 12px; background: var(--bg-alt); font-size: 13px; line-height: 1.7; }

.kv { display: flex; justify-content: space-between; align-items: center; gap: 12px; font-size: 14px;
  padding: 10px 0; min-height: 44px; border-bottom: 1px solid var(--line); }
.kv:last-child { border-bottom: 0; }
.kv-label { color: var(--mut); flex-shrink: 0; }

label { display: block; font-size: 13px; font-weight: 600; color: var(--ink); margin: 12px 0 6px; }
input[type="text"], input[type="password"], input[type="number"], input:not([type]), select, textarea {
  width: 100%; min-height: 44px; border: 1px solid var(--field-bd); border-radius: var(--radius-sm);
  padding: 10px 12px; font-size: 15px; color: var(--ink); background: #fff; }
input:focus, select:focus, textarea:focus { border-color: var(--citi); outline: none; }

.rtable { width: 100%; border-collapse: collapse; font-size: 13px; }
.rtable th, .rtable td { border-bottom: 1px solid var(--line); padding: 10px 6px; text-align: left;
  vertical-align: top; overflow-wrap: anywhere; }
.rtable th { color: var(--mut); font-size: 12px; }
.rtable tr.best td { background: var(--ok-bg); }

.badge.live { background: var(--ok-bg); color: var(--ok); }
.badge.quote { background: var(--info-bg); color: var(--citi); }
.badge.ext { background: var(--info-bg); color: var(--citi-navy); }
.badge.proto { background: var(--bg-alt); color: var(--mut); border: 1px solid var(--line); }
.badge.sync { background: var(--warn-bg); color: var(--warn-tx); border: 1px solid var(--warn-bd); }

.status.ok { display: block; background: var(--ok-bg); color: var(--ok); }

.note { font-size: 12px; color: var(--mut); background: var(--bg-alt); border: 1px solid var(--line);
  border-radius: var(--radius-sm); padding: 10px 12px; margin-top: 10px; line-height: 1.65; }

.fee { font-size: 12px; color: var(--mut); line-height: 1.6; }