/* 旗舰站 · 收付一体 — Citi 设计语言：纯白 + 细灰边框卡片 + 银行蓝，克制干净，不堆渐变
 * UI 规范来源：FLAGSHIP-UI-RESEARCH.md 采用清单 A1/A8/A10（动词导航、大数字可用额、卡片分区）
 * 终端基准：iPhone 15 Pro Max 430×932，点按目标 ≥44pt */
:root {
  --citi: #0A5CA5; --citi-dark: #084A86; --citi-navy: #002D72; --citi-red: #D9261C;
  --link: #056DAE; --ink: #1F1F1F; --body: #3F4756; --mut: #5B6472; --faint: #8A94A6;
  --bg: #FFFFFF; --bg-alt: #F7F8FA; --line: #D9DEE5; --field-bd: #B8C0CC;
  --ok: #0E7A3D; --ok-bg: #E7F4EC; --err: #C41230; --err-bg: #FDECEF;
  --warn-tx: #5C3D00; --warn-bg: #FFF6DC; --warn-bd: #E8C87A; --info-bg: #EAF1F8;
  --radius: 16px; --radius-sm: 10px; color-scheme: light;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; padding: 0; }
body { font-family: "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", sans-serif;
  background: var(--bg); color: var(--body); -webkit-font-smoothing: antialiased;
  padding-bottom: calc(48px + env(safe-area-inset-bottom, 0px)); }
.wrap { max-width: 560px; margin: 0 auto; padding: 0 16px; }
.hidden { display: none !important; }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .92em; overflow-wrap: anywhere; }
a { color: var(--link); }

.appbar { position: sticky; top: 0; z-index: 40; padding-top: env(safe-area-inset-top, 0px);
  background: rgba(255,255,255,.97); border-bottom: 1px solid var(--line); }
.appbar-in { max-width: 560px; margin: 0 auto; padding: 12px 16px; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.brand { display: flex; align-items: center; gap: 10px; min-width: 0; }
.logo { width: 38px; height: 38px; border-radius: 8px; background: var(--citi-navy); color: #fff; flex: none;
  font-weight: 800; font-size: 18px; display: flex; align-items: center; justify-content: center; position: relative; }
.logo::before { content: ""; position: absolute; left: 15%; right: 15%; top: -7px; height: 10px;
  border-top: 3px solid var(--citi-red); border-radius: 50%; }
.brand-name { font-size: 17px; font-weight: 800; color: var(--citi-navy); display: block; }
.brand-sub { font-size: 12px; color: var(--faint); display: block; margin-top: 1px; }
.pill { font-size: 12px; font-weight: 700; color: var(--citi-navy); background: var(--bg-alt);
  border: 1px solid var(--line); padding: 6px 10px; border-radius: 999px; white-space: nowrap; }

/* 动词导航（A1：收/付/仓/单 → 本站内部面：总览/VA/通道） */
.tabbar { display: flex; gap: 8px; margin: 14px 0 4px; }
.tabbar a { flex: 1; min-height: 44px; display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--line); border-radius: 999px; color: var(--body); text-decoration: none;
  font-size: 14px; font-weight: 700; background: #fff; }
.tabbar a.on { background: var(--citi-navy); border-color: var(--citi-navy); color: #fff; }

.card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; margin: 0 0 14px; }
.card-title { font-size: 15px; font-weight: 800; color: var(--ink); margin: 0 0 4px; }
.card-sub { font-size: 12px; color: var(--faint); margin: 0 0 10px; line-height: 1.6; }
.alertbar { margin: 12px 0; padding: 12px 14px; border-radius: var(--radius);
  background: var(--warn-bg); border: 1px solid var(--warn-bd); color: var(--warn-tx); font-size: 13px; line-height: 1.65; }
.alertbar.blue { background: var(--info-bg); border-color: #BFD4EA; color: var(--citi-navy); }

.bignum { font-size: 40px; font-weight: 800; color: var(--citi-navy); letter-spacing: -.5px; line-height: 1.1; margin: 2px 0; overflow-wrap: anywhere; }
.bignum small { font-size: 16px; font-weight: 700; color: var(--mut); }
.split { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 10px; }
.split .cell { flex: 1 1 30%; min-width: 96px; background: var(--bg-alt); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 10px 12px; }
.cell .k { font-size: 12px; color: var(--faint); display: block; }
.cell .v { font-size: 17px; font-weight: 800; color: var(--ink); display: block; margin-top: 2px; overflow-wrap: anywhere; }
.cell .v small { font-size: 12px; color: var(--mut); font-weight: 700; }

.meter { height: 12px; border-radius: 999px; background: var(--bg-alt); border: 1px solid var(--line); overflow: hidden; display: flex; margin: 10px 0 6px; }
.meter i { display: block; height: 100%; background: var(--citi); }
.meter i.warn { background: #E8A13A; } .meter i.over { background: var(--err); }
.scale { display: flex; justify-content: space-between; font-size: 11px; color: var(--faint); }

.kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 0 0 14px; }
.kpi { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 10px 6px; text-align: center; background: #fff; }
.kpi .n { font-size: 20px; font-weight: 800; color: var(--citi-navy); display: block; }
.kpi .t { font-size: 11px; color: var(--faint); display: block; margin-top: 2px; line-height: 1.3; }

.badge { display: inline-block; font-size: 11px; font-weight: 700; padding: 3px 8px; border-radius: 999px; vertical-align: middle; }
.badge.ok { background: var(--ok-bg); color: var(--ok); }
.badge.err { background: var(--err-bg); color: var(--err); }
.badge.warn { background: var(--warn-bg); color: var(--warn-tx); border: 1px solid var(--warn-bd); }
.badge.info { background: var(--info-bg); color: var(--citi-navy); }
.badge.mut { background: var(--bg-alt); color: var(--mut); border: 1px solid var(--line); }

.row { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--line); }
.row:first-of-type { border-top: none; }
.row .rk { font-size: 13px; color: var(--mut); }
.row .rv { font-size: 14px; font-weight: 700; color: var(--ink); text-align: right; overflow-wrap: anywhere; }
.dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 6px; vertical-align: 1px; }
.dot.ok { background: var(--ok); } .dot.err { background: var(--err); } .dot.warn { background: #E8A13A; } .dot.mut { background: var(--faint); }

input[type="password"], input[type="text"], input[type="search"], select {
  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; }
button.primary { width: 100%; min-height: 48px; border: none; border-radius: var(--radius-sm);
  background: var(--citi); color: #fff; font-size: 16px; font-weight: 800; cursor: pointer; }
button.primary:active { background: var(--citi-dark); }
button.ghost { min-height: 44px; border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: #fff; color: var(--citi-navy); font-size: 14px; font-weight: 700; padding: 0 14px; cursor: pointer; }
.status { display: none; margin: 10px 0; padding: 10px 12px; border-radius: var(--radius-sm); font-size: 13px; line-height: 1.6; background: var(--info-bg); color: var(--citi-navy); }
.status.err { background: var(--err-bg); color: var(--err); display: block; }

.chips { display: flex; gap: 8px; flex-wrap: wrap; margin: 10px 0; }
.chip { min-height: 44px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--line); background: #fff;
  font-size: 13px; font-weight: 700; color: var(--body); cursor: pointer; display: inline-flex; align-items: center; }
.chip.on { background: var(--citi-navy); color: #fff; border-color: var(--citi-navy); }

.va-item { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 12px 14px; margin: 0 0 10px; }
.va-item .top { display: flex; justify-content: space-between; gap: 8px; align-items: center; flex-wrap: wrap; }
.va-item .ref { font-size: 14px; font-weight: 800; color: var(--ink); overflow-wrap: anywhere; }
.va-item .meta { font-size: 12px; color: var(--mut); line-height: 1.7; margin-top: 6px; overflow-wrap: anywhere; }

.foot { font-size: 12px; color: var(--faint); line-height: 1.7; margin: 18px 0 0; }
#gate { position: fixed; inset: 0; background: #fff; z-index: 100; padding: calc(28px + env(safe-area-inset-top,0px)) 16px 16px; overflow: auto; }
#gate .box { max-width: 420px; margin: 6vh auto 0; }