/* ==========================================================================
   ZPay 商户中心 (/user) — 独立统一样式表
   与管理端 (admin/) 完全分离。仅服务于商户端多页服务端渲染界面。
   类名前缀统一 us-*（user-center）。
   --------------------------------------------------------------------------
   目录:
     1. 设计令牌 (CSS 变量)
     2. 基础重置
     3. 顶栏 (us-top)
     4. 布局骨架 (us-wrap / us-side / us-main)
     5. 侧栏导航 (us-nav-item)
     8. 内容卡片 / 面板 (us-card / us-panel)
     9. 选项卡 (us-tab)
    10. 表格 (us-tbl)
    11. 徽章 (us-badge)
    12. 键值列表 (us-kv) / 表单 (us-f / us-in)
    13. 按钮 (us-btn 及变体)
    16. 分页 (us-pager / us-pg)
    17. 提示条 (us-tip 页内提示 / us-toast 浮动提示)
    18. 登录页 (us-login-*)
    19. 响应式
    20. 内容区与各页小样式（原 center.html 内联样式，在文件最后）
   ========================================================================== */

/* ---------- 1. 设计令牌 ---------- */
:root {
  --us-primary: #25b864;       /* 主题绿（与官网首页 --zhanpay-color 一致） */
  --us-primary-dark: #1da155;
  --us-primary-soft: #e7f7ee;
  --us-primary-ring: rgba(37, 184, 100, .18);
  --us-accent: #16a34a;
  --us-accent-blue: #2563eb;
  --us-top-bg: #1e293b;
  --us-top-line: #334155;

  --us-bg: #f4f7fa;
  --us-surface: #ffffff;
  --us-surface-soft: #f8fafc;
  --us-border: #e9edf2;
  --us-border-strong: #e2e8f0;
  --us-border-dash: #cbd5e1;

  --us-text: #1f2937;
  --us-text-2: #475569;
  --us-text-3: #64748b;
  --us-muted: #94a3b8;
  --us-faint: #cbd5e1;

  --us-up: #10b981;     /* 加 / 收入 / 绿 */
  --us-down: #dc2626;   /* 扣 / 支出 / 红 */
  --us-warn: #d97706;
  --us-ok: #059669;

  --us-radius-sm: 6px;
  --us-radius: 8px;
  --us-radius-lg: 10px;

  --us-shadow-top: 0 1px 0 rgba(0, 0, 0, .2);
  --us-shadow-hero: 0 12px 32px rgba(37, 184, 100, .16);
  --us-shadow-card: 0 18px 46px rgba(15, 23, 42, .16);
  --us-shadow-panel: 0 1px 2px rgba(15, 23, 42, .04);

  --us-side-w: 224px;
  --us-top-h: 60px;
}

/* ---------- 2. 基础重置 ---------- */
* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
  background: var(--us-bg);
  color: var(--us-text);
  line-height: 1.5;
  text-rendering: optimizeLegibility;
}
a { text-decoration: none; }
a, button, input, select, textarea { font: inherit; }
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 3px solid var(--us-primary-ring);
  outline-offset: 2px;
}
/* 下拉框（单选）右侧的箭头：全站只此一条，不用浏览器自带的（站长 2026-10-10「下拉箭头看着有点轻微错位」）。
   自带箭头各家放法不同、跟各处写的内边距和行高对不上，箭头与文字、与框体中线差出零点几到一两像素；这里关掉自带外观自己画。
   图、尺寸、离右边距、右内边距与后台 admin.css 那条逐项相同（来由写在那边）：图 10×6、V 形 8×4、线宽 1.5；
   颜色是 --us-text-3 的 #64748b（内联 SVG 里用不了变量，只能写色值）；right 12px、center 上下居中；padding-right 28px = 12 + 10 + 6。
   箭头这 8 项的 important 标记必须留：本条与后台 admin.css 那条逐项同值、连标记一起（后台、商户中心两份 select-arrow 用例都钉着「两条逐项同值」），
   后台页里有 ID 选择器、同级后写、行内 style 会冲掉这几项。商户中心这边会落到下拉上的类名规则（.us-ctrl、.us-in、.us-perpage）
   底色已只写 background-color、不用 background 简写；它们的 padding 简写优先级 (0,1,0) 也低于本条的 (0,2,1)，眼下没有规则冲得掉箭头这几项；
   留着防以后页面加 ID 选择器、行内 style 或更高优先级的写法。
   其余外观仍归各处规则。多选、列表框（multiple、size 大于 1）不画，禁用态照画。 */
select:not([multiple]):not([size]),
select:not([multiple])[size="1"] {
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath fill='none' stroke='%2364748b' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' d='M1 1l4 4 4-4'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 12px center !important;
  background-size: 10px 6px !important;
  padding-right: 28px !important;
}

/* ---------- 3-4. 左右布局：左侧栏(LOGO+菜单) + 右侧(细条+内容) ---------- */
.us-app { display: flex; min-height: 100vh; }
.us-side {
  width: var(--us-side-w); flex-shrink: 0; background: var(--us-surface);
  border-right: 1px solid var(--us-border); display: flex; flex-direction: column;
  position: sticky; top: 0; height: 100vh; overflow: hidden;
  box-shadow: 1px 0 0 rgba(15, 23, 42, .02);
}
/* 品牌区：站长支付图标 + 名称 + Pro */
.us-brand {
  display: flex; align-items: center; gap: 9px; height: 60px; padding: 0 18px;
  border-bottom: 1px solid var(--us-border); flex-shrink: 0;
}
.us-brand-ico { width: 26px; height: 26px; }
.us-brand-tx { font-size: 16px; font-weight: 800; color: var(--us-text); letter-spacing: .3px; }
.us-pro { background: #25b864; color: #fff; font-size: 10px; font-weight: 700; padding: 2px 7px; border-radius: 6px; }
.us-nav { flex: 1; overflow-y: auto; padding: 14px 12px 22px; scrollbar-width: thin; }

.us-body { flex: 1; min-width: 0; display: flex; flex-direction: column; overflow-x: hidden; }
.us-bar {
  height: 60px; flex-shrink: 0; background: var(--us-surface); border-bottom: 1px solid var(--us-border);
  display: flex; align-items: center; justify-content: space-between; padding: 0 24px;
  position: sticky; top: 0; z-index: 20; backdrop-filter: saturate(180%) blur(10px);
}
.us-bar-l { display: flex; align-items: center; gap: 10px; font-size: 17px; font-weight: 700; color: var(--us-text); }
.us-menu-btn {
  display: none;
  width: 36px;
  height: 36px;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--us-border);
  border-radius: var(--us-radius-sm);
  background: var(--us-surface);
  color: var(--us-text-2);
  cursor: pointer;
}
.us-menu-btn i { font-size: 20px; }
.us-side-mask { display: none; }
.us-bar-r { display: flex; align-items: center; gap: 16px; font-size: 13px; }
.us-logout { color: var(--us-muted); }
.us-logout:hover { color: var(--us-down); }
.us-top-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 34px;
  padding: 0 12px;
  border: 1px solid var(--us-border);
  border-radius: var(--us-radius-sm);
  background: var(--us-surface);
  color: var(--us-text-2);
  font-size: 13px;
}
.us-top-action:hover {
  border-color: rgba(37, 184, 100, .34);
  color: var(--us-primary);
  background: var(--us-primary-soft);
}
.us-main { flex: 1; padding: 24px; min-width: 0; max-width: 100%; overflow-x: auto; background: var(--us-bg); }

/* ---------- 5. 侧栏导航 ---------- */
.us-nav-item {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 11px 13px;
  border-radius: 9px;
  color: var(--us-text-2);
  font-size: 14px;
  margin-bottom: 6px;
  transition: background .12s, color .12s, transform .12s;
}
.us-nav-item i { font-size: 18px; color: var(--us-muted); }
.us-nav-item:hover { background: #f5f6f8; color: var(--us-text); transform: translateX(1px); }
.us-nav-item.on { background: var(--us-primary-soft); color: var(--us-primary); font-weight: 600; }
.us-nav-item.on i { color: var(--us-primary); }

/* 分组菜单 */
.us-nav-group { margin-bottom: 6px; }
.us-nav-gh {
  display: flex; align-items: center; gap: 11px; padding: 11px 13px; border-radius: 9px;
  color: var(--us-text-2); font-size: 14px; cursor: pointer; user-select: none; transition: .12s;
}
.us-nav-gh:hover { background: #f5f6f8; color: var(--us-text); }
.us-nav-gh i:first-child { font-size: 18px; color: var(--us-muted); }
.us-nav-caret { margin-left: auto; font-size: 16px; color: var(--us-faint); transition: transform .15s; }
.us-nav-group.open .us-nav-caret { transform: rotate(180deg); }
.us-nav-gi { display: none; padding-left: 6px; margin: 2px 0 4px; border-left: 2px solid var(--us-border); margin-left: 18px; }
.us-nav-group.open .us-nav-gi { display: block; }
.us-nav-sub { padding: 10px 12px; font-size: 13px; }
.us-nav-sub span { margin-left: 2px; }
/* 组内子项画各自的图标（菜单定义里每项都有），比组标题的图标小一号 */
.us-nav-sub i { font-size: 16px; }

/* ---------- 8. 内容卡片 / 面板 ---------- */
.us-card {
  background: var(--us-surface);
  border: 1px solid var(--us-border);
  border-radius: var(--us-radius);
  padding: 20px;
  margin-bottom: 18px;
  box-shadow: var(--us-shadow-panel);
}
.us-panel {
  background: var(--us-surface);
  border: 1px solid var(--us-border);
  border-radius: var(--us-radius);
  padding: 50px;
  text-align: center;
  color: var(--us-muted);
}

/* ---------- 9. 选项卡 ---------- */
/* 检索栏 .zp-toolbar（商户后台订单/投诉页；商户中心仅加载 merchant.css，此处即为该端 .zp-toolbar 的完整外观，对齐总后台风格） */
.zp-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
  padding: 12px;
  background: var(--us-surface);
  border: 1px solid var(--us-border);
  border-radius: var(--us-radius);
  box-shadow: var(--us-shadow-panel);
}
/* 页面自己的操作（统计、导出、新增、添加通道……，UC.toolbar 的第二个参数）：与查询、重置、刷新同一排，靠右 */
.zp-toolbar>.us-actions { margin-left: auto; }
/* 检索栏一排同高（站长 2026-10-11 实地验收，经主控 zpay-59；照后台 admin-pages.css「检索栏控件与按钮一起定高」那一条）：
   .us-ctrl、.us-btn 原先只写 min-height:38，高由内容撑——「查询」的放大镜图标 16px，行高跟着按钮的 1.2 倍是 19.2，整个按钮撑到 39.2，比同排控件高 1.2。
   这里一条定成 38（全站 border-box，含内边距与边框），不靠字体行高撑；按钮是 inline-flex + align-items:center，字与图标在框里上下居中。
   只认 .zp-toolbar 里的：弹窗里的按钮、控件，表格空状态的「重置」照旧（toolbar-height-20261011 钉住）。 */
.zp-toolbar .us-ctrl,
.zp-toolbar .us-btn { height: 38px; }
/* 底色只写 background-color：.us-ctrl 也用在下拉上，background 简写会连箭头的图、位置、尺寸一起重设，跟第 2 节下拉公共规则抢同几项
   （眼下靠那几项的 important 标记兜着），这里不写出冲突 */
.us-ctrl {
  min-height: 38px;
  padding: 8px 11px;
  border: 1px solid #e2e8f0;
  border-radius: var(--us-radius-sm);
  font-size: 13px;
  outline: none;
  background-color: #fff;
  color: var(--us-text);
}
.us-ctrl:focus { border-color: var(--us-primary, #25b864); box-shadow: 0 0 0 3px var(--us-primary-ring); }
/* 检索栏控件定宽（订单页先做，主控 zpay-59 2026-10-11 照后台订单页；2026-10-11 挪成公共，各列表页照用，UC.input 第 4 个、UC.select 第 6 个参数 cls）：
   下拉一律定宽、不跟着选项撑——首项「全部 X」四个字的（全部状态、全部通道、搜索字段）us-w4，更长的（全部支付方式）us-w6；
   宽 = 首项字宽 + 左内边距 11 + 箭头那条的右内边距 28 + 边框 2，再留 3。放不下的选项字显示「…」，展开的原生列表照样看全名。
   这里只管宽与字的截断，不碰第 2 节画箭头那几项。逐项算式在 order-toolbar-width-20261011 用例里。 */
.us-w4{width:96px}.us-w6{width:122px}.us-w4,.us-w6{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
/* 搜索框 us-kw：折不折行按 80 算（放得下「搜索内容」这类四个字的占位）；一行放下以后多出来的宽给它长，最多 200（「退款单号 / 站长单号」这类长占位靠它放下） */
.us-kw{width:80px;flex:1 1 auto;max-width:200px}
/* 起止日期一格（UC.dates，同后台的「起止日期」）：一个框里两个原生日期框、中间「~」，传给后端的仍是 start / end；框的外观用 .us-ctrl，有光标时整格描边。
   日期框各 88，放得下「2026/10/11」；Chrome、Edge 日期框右边的日历图标铺满整个日期框且看不见，点日期框哪里都打开日历，不另占宽。
   两个都空着、框里没有光标时（公共件写的 data-empty）只显示「起止日期」几个字（压在日期框上、不占宽，左边与 .us-ctrl 的左内边距 11 对齐），
   日期框与「~」先藏着，点进去就出来。点在日期框以外的地方（中间的「~」、两侧留白）进开始日期（UC.datesPick，站长 2026-10-11 实地验收）：
   整格鼠标都是手形，同日期框上的日历图标。要排在 .us-ctrl 后面：内边距与它同一优先级，靠先后压过它。
   「~」两边留白对称（站长 2026-10-11，经主控 zpay-21）：日期框比日期宽，原先日期靠左，「~」左边多出开始框里那一段空、右边只有一个间距；
   两个日期框里的日期都居中以后，「~」两边各是「半段空 + 一个间距」，整格两头也一样。只改样式、不动 UC.dates 拼的结构，各检索栏的起止日期一起生效 */
.us-dates{position:relative;display:inline-flex;align-items:center;gap:2px;width:204px;padding:0 6px;cursor:pointer}
.us-dates:focus-within{border-color:var(--us-primary);box-shadow:0 0 0 3px var(--us-primary-ring)}
.us-dates input{position:relative;flex:1 0 auto;width:88px;min-height:0;padding:0;border:0;background-color:transparent;color:inherit;text-align:center;outline:none}
.us-dates input::-webkit-calendar-picker-indicator{position:absolute;inset:0;width:auto;height:auto;margin:0;padding:0;opacity:0;cursor:pointer}
.us-dates-to{flex:none;color:var(--us-text-3)}
.us-dates-ph{position:absolute;top:0;bottom:0;left:11px;display:none;align-items:center;color:var(--us-text-3);pointer-events:none}
.us-dates[data-empty]:not(:focus-within) .us-dates-ph{display:flex}
.us-dates[data-empty]:not(:focus-within) input,.us-dates[data-empty]:not(:focus-within) .us-dates-to{opacity:0}
/* 1440 以下检索栏收紧（同后台 admin-pages.css 的 .zp-toolbar 1439 以下收间距，全站检索栏一样）：项与项的间距 10 → 8，
   文字按钮左右内边距 18 → 12（刷新图标按钮不动），订单页那一栏 1366 下才放得下。原先只认带起止日期的订单那一栏，2026-10-11 起商户中心全部检索栏都收 */
@media (max-width:1439px){.zp-toolbar{column-gap:8px}.zp-toolbar .us-btn:not(.us-btn-icon){padding-left:12px;padding-right:12px}}
/* 检索栏里可清除的筛选标签（公共件 UC.filterTag，如交易投诉的「通道 #26 ×」）：与输入框同高；点 × 去掉这一个条件 */
.us-ftag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 38px;
  padding: 0 10px;
  border: 1px solid var(--us-primary);
  border-radius: var(--us-radius-sm);
  background: var(--us-primary-soft);
  color: var(--us-primary);
  font-size: 13px;
  white-space: nowrap;
}
.us-ftag-x { color: inherit; font-size: 16px; line-height: 1; }
.us-ftag-x:hover { color: var(--us-down); }
.us-tab {
  padding: 6px 14px;
  border-radius: var(--us-radius-sm);
  font-size: 13px;
  color: var(--us-text-2);
  background: var(--us-surface);
  border: 1px solid var(--us-border-strong);
}
.us-tab.on { background: var(--us-primary); color: #fff; border-color: var(--us-primary); }

/* ---------- 10. 表格 ---------- */
/* 表格外框：表格比内容区宽时只在这一框里横向滚动；原先靠 .us-main 整块滚动，检索栏、统计卡、分页条会跟着表格一起被推出去 */
/* 外框同时是 inline-size 容器（2026-10-11）：表格空状态那一层按它的可视宽（100cqw）居中，见下面 .us-empty-in */
.us-tbl-scroll { min-width: 0; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; container-type: inline-size; }
.us-tbl {
  width: 100%;
  min-width: 680px;
  border-collapse: collapse;
  font-size: 13px;
  background: var(--us-surface);
  border: 1px solid var(--us-border);
  border-radius: var(--us-radius);
  /* 照样裁圆角与溢出，但不建滚动容器（2026-10-11 主控 zpay-21 复看 390）：原先 overflow:hidden 让表自成一个滚动容器，
     空状态那一层（.us-empty-in，sticky）只认最近的这一层，表一横拖就跟着表走出视口；clip 只裁不滚，sticky 认外框 .us-tbl-scroll */
  overflow: clip;
}
.us-tbl th {
  text-align: left;
  padding: 12px 14px;
  background: #f8fafc;
  color: var(--us-text-3);
  font-weight: 600;
  border-bottom: 1px solid var(--us-border);
  vertical-align: middle;
  white-space: nowrap;
}
.us-tbl td {
  padding: 12px 14px;
  border-bottom: 1px solid #f3f3f3;
  color: #374151;
  vertical-align: middle;   /* 单元格统一垂直居中：徽章/按钮/多行内容各列同一水平线，杜绝错位 */
  line-height: 1.5;
}
.us-tbl tr:last-child td { border-bottom: none; }
/* 斑马纹 + 悬浮高亮（四页一致：支付通道/管控记录/订单管理/资金记录） */
.us-tbl tbody tr:nth-child(even) td { background: #fafbfc; }
.us-tbl tbody tr:hover td { background: #f5fbf7; }
.us-tbl tbody tr td.us-empty { background: none; }
/* 表内徽章基线对齐：与同行其它内容统一中线，避免一高一低。表格里的状态徽章一律不折行（同订单中心「时间、徽章一行」；
   2026-10-11 丙报：管控记录「原因」很长时状态列被挤窄，「管控中」折成两行）。只管表格里的，弹窗键值、卡片里的徽章照旧 */
.us-tbl td .us-badge { vertical-align: middle; white-space: nowrap; }
/* 不折行的格（时间那类：资金明细、退款记录、交易投诉的时间格加 us-nowrap，第二行灰字跟着不折）。.us-tbl td 不写 white-space，这一条直接生效。
   行内操作那一格（订单、支付通道、收付通提现记录、账号、角色：几个 .us-row-action 一排）也用它，按钮不折到第二行；各页不再各写一段同样的 */
.us-nowrap { white-space: nowrap; }
.us-mono {
  font-family: Consolas, monospace;
  font-size: 12px;
  color: #555;
  word-break: break-all;
}
/* 空状态：灰字、上下 46px、居中（同后台 .admin-table .empty）。表格里的空格（td.us-empty）光写 .us-empty（0,1,0）压不过上面 .us-tbl td（0,1,1），
   会变成正文色、上下 12px，所以照后台的写法再挂一个 .us-tbl .us-empty（0,2,0）。弹窗里的由第 20 节 .us-dialog .us-empty 收成 16px
   （同为 0,2,0、写在后面）；首页块里的表照 .us-dash-box .us-tbl td（0,2,1）那条紧凑留白，字一样变灰 */
.us-empty, .us-tbl .us-empty { text-align: center; color: #bbb; padding: 46px 0; }
/* 表格空状态（UC.table，同后台登录日志）：图标 +「暂无数据」；带了检索条件是「未找到数据」+「重置」（小一号次按钮） */
.us-empty i { margin-right: 6px; font-size: 16px; vertical-align: -2px; }
/* 空状态那一格里的一层（UC.table 包的）：宽取表格外框的可视宽（100cqw），贴着外框左边（sticky），字就在看得见的那一段居中——
   窄屏下表比外框宽、横滚时，「暂无数据」「未找到数据 + 重置」不再按整张表居中、落到右边看不见的地方（站长 2026-10-11 实地验收，390 下账号管理）。
   宽要扣掉表格左右各 1px 的边框（上面 .us-tbl 的 border；那一格左右内边距是 0）：原先整 100cqw，再加上两道边框，1366 下空表 1096、外框可见 1094，
   触控板能横向拨动 2px（主控 zpay-21 2026-10-12 实地验收）。宽屏下表与外框同宽，与原来一样；不认容器单位的浏览器退回整格居中 */
.us-empty-in { position: sticky; left: 0; width: calc(100cqw - 2px); max-width: 100%; }
.us-empty .us-btn { margin-left: 10px; vertical-align: middle; }
/* 两行单元格的第二行（UC.cell2）：商户退款单号、完成时间这类跟在主值下面的补充，灰色小一号 */
.us-tbl-sub { margin-top: 2px; font-size: 12px; color: var(--us-text-3); }
/* 单号、名称单行省略（UC.clip 拼的 us-clip；订单页先做，2026-10-11 挪成公共）：一行放不下末尾「…」，悬停看全靠页面给的 title。
   最宽 34 个数字：站长单号嵌商户号后最长 32 位（D-123）整串放得下，更长的商户单号、名称到这里就省略，不把列撑得更宽 */
.us-clip{display:block;max-width:34ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* 两行格的第二行（如站长单号下面的商户单号、退款单号下面的商户退款单号）：contain:inline-size 不参与定列宽，列宽由第一行定，
   放不下就单行省略——与后台订单列表的商户单号同一个写法（单号库里最长可到 150 个字符）；不设上限，列被拉宽时跟着显示得多 */
.us-tbl-sub.us-clip{contain:inline-size;max-width:none}
/* 商品名称（站长 2026-10-10「还是把订单中心的"商品名称"列缩进去！用"..."好看点！」，同后台订单列表）：一行，超出用「…」，文字宽上限 200px，
   悬停看全名（title）。列宽不另给：表格自动布局，空出来的宽按各列内容比例分，不全给这一列 */
.us-goods{display:block;max-width:200px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ---------- 11. 徽章 ---------- */
.us-badge {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 7px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.6;        /* 固定徽章行高：各列徽章高度一致，配合 td 垂直居中保证整行对齐 */
}
/* 通用状态徽章配色（单一来源，各页共用，勿在页面内重复定义）：ok=启用/正常/已完成/退款成功（绿），off=停用（灰），
   warn=申请中/处理中/结果未知（橙），err=失败（红），info=还没开始的中性状态，如订单未支付（蓝）。带 title 的徽章悬停看补充说明（如退款失败的原因） */
.us-badge.ok { color: var(--us-accent); background: var(--us-primary-soft); }
.us-badge.info { color: var(--us-accent-blue); background: #eff6ff; }
.us-badge.off { color: var(--us-muted); background: #f1f5f9; }
.us-badge.warn { color: var(--us-warn); background: #fffbeb; }
.us-badge.err { color: var(--us-down); background: #fef2f2; }
.us-badge[title] { cursor: help; }

/* ---------- 12. 键值列表 / 表单 ---------- */
.us-kv {
  display: flex;
  padding: 12px 0;
  border-bottom: 1px solid #f3f4f6;
  font-size: 14px;
  align-items: center;
}
.us-kv:last-child { border-bottom: none; }
.us-kv .k { width: 130px; color: var(--us-text-3); flex-shrink: 0; }
.us-kv .v { flex: 1; word-break: break-all; color: var(--us-text); }
/* 底色只写 background-color，理由同 .us-ctrl。可编辑的白底，与同一弹窗里的下拉 .us-ctrl 一样（站长 2026-10-11 实地验收：原先浅灰 #f8fafc，
   与只读框几乎分不出、又与白底的下拉不一样）；只读的照下面那条浅底深字 */
.us-in {
  width: 100%;
  padding: 9px 11px;
  border: 1px solid var(--us-border-strong);
  border-radius: var(--us-radius-sm);
  font-size: 13px;
  font-family: Consolas, monospace;
  background-color: #fff;
}
/* 单行输入框全站同高 38，只写这一处（主控 zpay-21 2026-10-11 定：弹窗里、卡片里一个样。原先靠 13px × 1.5 的行高撑到 39.5，
   比同排的下拉（.us-ctrl，min-height 38）高 1.5，子账号弹窗、账户设置都看得出来）：border-box 含内边距与边框，上下内边距 8，内容框 20 放得下一行字 19.5。
   多行框（textarea.us-in）照行数高，不在此列；收银台扫码的付款码框（.us-pos-code，字 18px）是大号输入框，自己定高，写在第 20 节线下收银那里 */
input.us-in{box-sizing:border-box;height:38px;padding-top:8px;padding-bottom:8px}
/* 只读控件（主控 zpay-21 2026-10-11，全站只此一处）：.us-ctrl / .us-in 带 readonly 的——编辑通道里不许换的三方平台、账户设置里的手机号与邮箱、
   API信息的密钥框、聚合收款的链接——底色 --us-surface-soft、字色 --us-text-2，边框照普通控件（不另写）。高不另写：单行的照上一条与 .us-ctrl 的 38，
   多行框（textarea，如 API信息的密钥框）照行数高。原先只在自配通道弹窗里有一条（.us-oc-pair .us-ctrl[readonly]），挪到这里。
   底色只写 background-color，理由同 .us-ctrl */
.us-ctrl[readonly],.us-in[readonly]{background-color:var(--us-surface-soft);color:var(--us-text-2)}
/* 输入框后面跟一个按钮、同一排（主控 zpay-21 2026-10-11，接 B 的账户设置）：<div class="us-in-btn"><label>字<input class="us-in"></label><button class="us-btn">…</button></div>。
   用在两处：账户设置的手机号 / 邮箱（只读框 +「修改」）、改绑弹窗的新值（输入框 +「获取验证码」）。框（label）伸缩、min-width 0 不往外撑，按钮不伸缩；
   底边对齐（框是 label 里最后一样，与按钮同高 38），label 上面的字与外边距只多出在上头。弹窗里按钮最小宽 104：「获取验证码」与倒计时「60 秒」
   来回切换时按钮不变宽、框不跳。窄屏（账户设置的表单 700 以下一列）照样一排，框缩、按钮不缩 */
.us-in-btn{display:flex;align-items:flex-end;gap:8px}.us-in-btn>label{flex:1;min-width:0}.us-in-btn>.us-btn{flex:none}
.us-dialog .us-in-btn>.us-btn{min-width:104px}
/* 必填标识：叫法后空一格接 <span class="us-req">*</span>，与后台 .acct-req 同一个红（投诉回复、处理结果） */
.us-req { color: var(--us-down); }
.us-st {
  font-size: 14px;
  font-weight: 700;
  margin: 18px 0 10px;
  color: var(--us-text);
}

/* ---------- 13. 按钮 ---------- */
/* 三级，同后台（站长 2026-10-10 排版统一，docs/merchant-center.md）：
     .us-btn          次按钮，白底灰边：重置、取消、关闭、返回、导出、复制
     .us-btn-on       主按钮，实心绿：查询、新增、保存、确定、统计、申请提现、收款（加在 .us-btn 上）
     .us-btn-danger   危险按钮，红描边：删除、重置密钥、重新生成（加在 .us-btn 上）
   上面没点名的按钮照这一批（2026-10-10）之前的轻重：原来实心绿（旧 .us-btn）的用主按钮，原来绿描边（旧 .us-btn-on）的用次按钮；
   弹窗（UC.dialog / UC.confirm）的确认键不论叫什么，都是「确定」那个位置，用主按钮（危险操作用 .us-btn-danger）。
   两个尺寸：.us-btn-icon 只有图标（检索栏的刷新），.us-btn-sm 小一号（空状态的「重置」、取数失败的「重试」）。
   表内操作不用这几个，一律 .us-row-action（第 20 节）。
   字重写死 400：不跟着所在的容器变粗（结算账户卡片标题里的「修改」原先跟着标题成了 600，比同是次按钮的「设置」重一档）；危险按钮另写 600。 */
.us-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 38px;
  padding: 9px 18px;
  background: var(--us-surface);
  color: var(--us-text-2);
  border: 1px solid var(--us-border-strong);
  border-radius: var(--us-radius-sm);
  font-size: 13px;
  font-weight: 400;
  cursor: pointer;
  line-height: 1.2;
  white-space: nowrap;
  transition: background .12s, border-color .12s, color .12s, box-shadow .12s;
}
.us-btn:hover { background: var(--us-surface-soft); color: var(--us-text); border-color: var(--us-border-dash); }
.us-btn-on { background: var(--us-primary); color: #fff; border-color: var(--us-primary); }
.us-btn-on:hover { background: var(--us-primary-dark); color: #fff; border-color: var(--us-primary-dark); }
.us-btn-on i { font-size: 16px; }
.us-btn-danger { background: #fff; color: var(--us-down); border: 1px solid var(--us-down); font-weight: 600; }
.us-btn-danger:hover { background: #fef2f2; color: var(--us-down); border-color: var(--us-down); }
.us-btn-icon { padding: 9px 11px; }
.us-btn-icon i { font-size: 16px; line-height: 1; }
.us-btn-sm { min-height: 30px; padding: 5px 12px; }
/* 请求中、没有可复制的值时置灰，也不再响应悬停与点击 */
.us-btn:disabled { opacity: .5; pointer-events: none; }

/* ---------- 16. 分页 ---------- */
.us-pager { display: flex; justify-content: center; gap: 6px; margin-top: 16px; }
.us-pg {
  min-width: 34px;
  text-align: center;
  padding: 6px 10px;
  border: 1px solid var(--us-border-strong);
  border-radius: var(--us-radius-sm);
  font-size: 13px;
  color: var(--us-text-2);
  background: var(--us-surface);
}
.us-pg.on { background: var(--us-primary); border-color: var(--us-primary); color: #fff; font-weight: 600; }

/* ---------- 17. 提示条 ---------- */
.us-tip {
  background: #ecfdf5;
  color: var(--us-ok);
  font-size: 13px;
  padding: 11px 14px;
  border-radius: 9px;
  margin-bottom: 16px;
}
.us-tip.warn { background: #fffbeb; color: var(--us-warn); }
/* 浮动提示条 usToast（操作结果）：固定在视口顶部居中，不占版面；鼠标穿透、只在顶部，压不住弹窗底部的确认按钮。
   绿色成功、红色失败；约 2 秒淡出（脚本 2.2 秒后摘掉节点，动画与它同长）。长消息折行，不超出屏幕。 */
.us-toast {
  position: fixed;
  top: 20px;
  left: 50%;
  z-index: 2000;
  max-width: min(560px, calc(100vw - 32px));
  padding: 10px 18px;
  border: 1px solid transparent;
  border-radius: var(--us-radius);
  font-size: 14px;
  line-height: 1.5;
  text-align: center;
  white-space: pre-line;
  overflow-wrap: anywhere;
  box-shadow: 0 8px 24px rgba(15, 23, 42, .14);
  pointer-events: none;
  transform: translateX(-50%);
  animation: us-toast-fade 2.2s ease forwards;
}
.us-toast.ok { color: #047857; background: #ecfdf5; border-color: #a7f3d0; }
.us-toast.err { color: #b42318; background: #fef3f2; border-color: #fecdca; }
@keyframes us-toast-fade {
  0% { opacity: 0; }
  8% { opacity: 1; }
  80% { opacity: 1; }
  100% { opacity: 0; }
}

/* ---------- 18. 登录页（绿色背景+底部城市天际线 · 居中卡片 · 卡外左上 logo/右上返回首页 · 页脚版权） ---------- */
.us-login-body {
  margin: 0;
  font-family: -apple-system, "Microsoft YaHei", sans-serif;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  position: relative;
  /* 对齐参考站 wm.weixiao.cc：浅色背景 #f5f7fa + 底部城市天际线图 */
  background-color: #f5f7fa;
  background-image: url("/user/assets/img/login-bg.svg");
  background-repeat: no-repeat;
  background-position: bottom center;
  background-size: cover;
  background-attachment: fixed;
  color: var(--us-text);
}
/* 居中舞台：占满剩余高度并居中卡片（页脚之上） */
.us-login-center {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 28px 20px;
  position: relative;
  z-index: 1;
}
/* 舞台 = topbar(卡外 logo/返回首页) + 卡片，宽度与卡片对齐 */
.us-login-stage { width: 100%; max-width: 940px; }
.us-login-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0 2px 14px;
}
/* 顶部栏左组：logo + 商户管理中心 文字同一排 */
.us-login-topbar-l { display: flex; align-items: center; gap: 14px; min-width: 0; }
.us-login-topbar-title {
  font-size: 17px;
  font-weight: 700;
  color: #1e293b;
  padding-left: 14px;
  border-left: 1px solid #cbd5e1;
  line-height: 1.2;
  white-space: nowrap;
}
/* 左上 logo：复用首页 logo.svg（深色字+绿标），浅底上清晰可读 */
.us-login-brand { display: flex; align-items: center; text-decoration: none; }
.us-login-brand img { height: 30px; width: auto; display: block; }
/* 返回首页：浅底用深色描边按钮 */
.us-login-home {
  color: #334155;
  text-decoration: none;
  font-size: 14px;
  line-height: 1;
  padding: 9px 16px;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  background: rgba(255, 255, 255, .65);
  transition: background .15s, border-color .15s, color .15s;
}
.us-login-home:hover { background: #fff; border-color: #94a3b8; color: #0f172a; }
/* 居中卡片：卡内左右布局 */
.us-login-card-wrap {
  position: relative;
  z-index: 1;
  display: flex;
  width: 100%;
  min-height: 540px;
  background: #fff;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 16px 48px rgba(15, 23, 42, .14);
}
/* 左：品牌介绍区（卡内） */
.us-login-aside {
  flex: 1;
  position: relative;
  overflow: hidden;
  background: linear-gradient(140deg, #06281b 0%, #0a4d34 55%, #128a52 100%);
  color: #fff;
  padding: 52px 48px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.us-login-aside::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255, 255, 255, .07) 1px, transparent 1px);
  background-size: 24px 24px;
  pointer-events: none;
}
.us-login-aside > * { position: relative; z-index: 1; }
/* 卡内左侧：h2 标语 + 2 条特性（标题+描述）。
   h2 显式定 margin/字号：否则吃 UA 默认（1.5em + 0.83em 上下 margin），顶部留白会随浏览器漂；
   下边距就是标语与特性之间的空（原来由标语下面那句说明留，说明删了改由标语自己留；760px 以下见本节末尾的断点） */
.us-login-lead h2 { margin: 0 0 34px; font-size: 26px; font-weight: 800; line-height: 1.3; color: #fff; }
.us-login-feat { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 24px; }
.us-login-feat li { display: flex; align-items: center; gap: 14px; }
.us-login-feat i {
  flex: none;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  color: #6ee7b7;
  background: rgba(255, 255, 255, .12);
  border-radius: 10px;
}
.us-login-feat-tx { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.us-login-feat-tx b { font-size: 15px; font-weight: 700; color: #fff; line-height: 1.3; }
.us-login-feat-tx span { font-size: 13px; color: rgba(255, 255, 255, .68); line-height: 1.4; }
/* 右：登录表单区（卡内） */
.us-login-main {
  width: 440px;
  max-width: 100%;
  flex-shrink: 0;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px 44px;
}
.us-login-card { width: 100%; max-width: 360px; min-height: 390px; }
/* 两栏叠在同一网格格位，隐藏栏仍按当前宽度占位，窄屏换行也以较高栏为准。 */
.us-login-panels { display: grid; min-height: 290px; }
.us-login-panels > [role="tabpanel"] { grid-area: 1 / 1; align-self: start; min-width: 0; }
/* 隐藏的那栏照样占位（只是看不见、点不到），要压过 [hidden] 的 display:none：这一处的 important 标记必须留——
   浏览器自带的 [hidden]{display:none} 不带标记，普通写法就压得过；要防的是页面给 [hidden] 写带标记的 display:none（login.html 给 .us-login-feedback 就这么写，
   原先 .us-login-card [hidden] 那条还落到过这两栏上），那时只有带标记的这一条压得住；后台用例 user-login-page.test.cjs 也钉着这个标记 */
.us-login-panels > [role="tabpanel"][hidden] { display: block !important; visibility: hidden; pointer-events: none; }
.us-login-actions { display: flex; gap: 12px; flex-shrink: 0; }
.us-login-actions .us-login-home { cursor: pointer; white-space: nowrap; }
/* 弹窗仅内容区滚动，标题和 X 始终留在视口内。 */
.us-login-notices {
  width: min(640px, calc(100% - 32px));
  max-width: calc(100% - 32px);
  max-height: calc(100vh - 32px);
  max-height: calc(100dvh - 32px);
  padding: 0;
  border: 1px solid var(--us-border);
  border-radius: 12px;
  color: var(--us-text);
  background: var(--us-surface);
  box-shadow: var(--us-shadow-card);
  overflow: hidden;
}
.us-login-notices[open] { display: flex; flex-direction: column; }
.us-login-notices::backdrop { background: rgba(15, 23, 42, .45); }
.us-login-notices-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-shrink: 0; padding: 16px 20px; border-bottom: 1px solid var(--us-border); }
.us-login-notices-head h2 { margin: 0; font-size: 18px; }
.us-login-notices-close { flex-shrink: 0; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 6px; background: transparent; color: var(--us-text-3); font-size: 26px; line-height: 1; cursor: pointer; }
.us-login-notices-close:hover { background: var(--us-bg); color: var(--us-text); }
.us-login-notices-body { min-height: 0; padding: 20px; overflow-y: auto; overscroll-behavior: contain; white-space: pre-line; overflow-wrap: anywhere; line-height: 1.8; }
.us-login-notices-list { margin: 0; padding: 0; list-style: none; white-space: normal; }
.us-login-notice + .us-login-notice { border-top: 1px solid var(--us-border); margin-top: 20px; padding-top: 20px; }
.us-login-notice-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.us-login-notice-title { flex: 1; min-width: 0; margin: 0; font-size: 16px; font-weight: 600; line-height: 1.5; white-space: pre-line; overflow-wrap: anywhere; }
.us-login-notice time { flex-shrink: 0; max-width: 48%; color: var(--us-text-3); font-size: 12px; line-height: 1.5; text-align: right; overflow-wrap: anywhere; }
.us-login-notice-content { margin-top: 8px; white-space: pre-line; overflow-wrap: anywhere; line-height: 1.8; }
.us-notice-page { background: var(--us-surface); border-radius: 12px; padding: 28px; max-height: 75vh; max-height: 75dvh; overflow: auto; }
.us-notice-single { white-space: pre-line; overflow-wrap: anywhere; line-height: 1.8; }
.us-notice-empty { margin: 0; padding: 28px 0; color: var(--us-text-3); }
.us-logo { font-size: 23px; font-weight: 800; color: var(--us-text); text-align: left; margin-bottom: 4px; }
.us-logo b {
  background: #25b864;
  color: #fff;
  font-size: 11px;
  padding: 2px 7px;
  border-radius: 3px;
  margin-left: 6px;
  vertical-align: middle;
}
.us-login-tabs { display: flex; gap: 0; margin-bottom: 22px; border-bottom: 1px solid var(--us-border-strong); }
.us-login-tab {
  flex: 1;
  padding: 10px 0;
  text-align: center;
  font-size: 14px;
  cursor: pointer;
  color: var(--us-text-2);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}
.us-login-tab.on { color: var(--us-primary); font-weight: 600; border-bottom-color: var(--us-primary); }
.us-login-card .us-f { margin-bottom: 16px; }
.us-login-card .us-f label { display: block; font-size: 13px; color: var(--us-text-2); margin-bottom: 6px; }
.us-login-card .us-f input {
  display: block;
  width: 100%;
  box-sizing: border-box;
  padding: 11px 13px;
  border: 1px solid var(--us-border-strong);
  border-radius: 3px;
  font-size: 14px;
  outline: none;
  transition: border-color .15s;
}
.us-login-card .us-f input:focus { border-color: var(--us-primary); }
.us-login-btn {
  width: 100%;
  padding: 12px;
  border: 0;
  border-radius: 3px;
  background: var(--us-primary);
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  margin-top: 10px;
  letter-spacing: 2px;
}
.us-login-btn:hover { background: var(--us-primary-dark); }
/* 短信栏下面那句「未注册的手机号/邮箱将自动创建账号」：灰色小字（原来写在行内 style 里） */
.us-login-note { font-size: 12px; color: var(--us-text-3); }
.us-err {
  background: #fef2f2;
  color: var(--us-down);
  font-size: 13px;
  padding: 9px 12px;
  border-radius: 3px;
  border-left: 3px solid var(--us-down);
  margin-bottom: 16px;
}
/* 窄屏：卡片左右改上下堆叠，舞台/topbar 收窄对齐卡片，不溢出 */
@media (max-width: 760px) {
  .us-login-center { padding: 20px 16px; }
  .us-login-stage { max-width: 420px; }
  /* 手机端隐藏顶部装饰（logo / 返回首页），省空间 */
  .us-login-topbar { display: none; }
  /* 登录页的公告入口属于功能按钮，手机上仍须可见。 */
  .us-login-topbar--auth { display: flex; flex-wrap: wrap; }
  .us-login-topbar--auth .us-login-topbar-l { width: 100%; }
  .us-login-topbar--auth .us-login-actions { margin-left: auto; }
  .us-login-card-wrap {
    flex-direction: column;
    min-height: 0;
  }
  .us-login-aside {
    padding: 30px 26px;
  }
  .us-login-lead h2 { font-size: 22px; margin-bottom: 20px; }
  .us-login-feat { gap: 14px; }
  .us-login-main {
    width: 100%;
    padding: 30px 26px;
  }
  .us-login-card { max-width: none; }
}

/* ---------- 19. 响应式 ---------- */
@media (max-width: 820px) {
  .us-app {
    display: block;
    min-height: 100vh;
  }
  .us-side {
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    z-index: 120;
    width: 82px;
    height: 100vh;
    border-right: 1px solid var(--us-border);
    /* 收起时不带阴影：侧栏移到视口外，阴影（右偏 18、晕开 46）会漏进视口左边约 30px（站长 2026-10-11 实地验收，390 下）；点开才有，见下一条 */
    box-shadow: none;
    overflow: hidden;
    transform: translateX(-105%);
    transition: transform .2s ease;
  }
  body.us-nav-open .us-side {
    transform: translateX(0);
    box-shadow: 18px 0 46px rgba(15, 23, 42, .16);
  }
  .us-side-mask {
    position: fixed;
    inset: 0;
    z-index: 110;
    background: rgba(15, 23, 42, .38);
    backdrop-filter: blur(2px);
  }
  body.us-nav-open .us-side-mask {
    display: block;
  }
  .us-brand {
    height: 58px;
    padding: 0;
    justify-content: center;
  }
  .us-brand-ico {
    width: 34px;
    height: 34px;
  }
  .us-brand-tx {
    display: none;
  }
  .us-pro {
    display: none;
  }
  .us-nav {
    height: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 12px 0 18px;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .us-nav-group { margin: 0; min-width: 0; }
  .us-nav-item,
  .us-nav-gh {
    position: relative;
    width: 50px;
    min-height: 50px;
    height: 50px;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 0;
    margin: 0;
    padding: 0;
    border-radius: 14px;
    text-align: center;
    font-size: 13px;
    line-height: 1.25;
    background: transparent;
  }
  .us-nav-item span,
  .us-nav-gh span {
    display: none;
  }
  .us-nav-item i,
  .us-nav-gh i:first-child {
    width: 38px;
    height: 38px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: var(--us-surface-soft);
    font-size: 20px;
  }
  .us-nav-item.on i,
  .us-nav-group.open .us-nav-gh i:first-child {
    background: rgba(37, 184, 100, .12);
    color: var(--us-primary);
  }
  .us-nav-item:hover { transform: none; }
  .us-nav-caret {
    position: absolute;
    right: 2px;
    top: 2px;
    margin: 0;
    font-size: 12px;
    color: var(--us-muted);
  }
  .us-nav-gi {
    position: static;
    display: none;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 4px 0 8px;
    margin: 2px 0 0;
    border: 0;
    border-radius: 12px;
    box-shadow: none;
    background: transparent;
  }
  .us-nav-group.open .us-nav-gi { display: flex; }
  .us-nav-sub {
    width: 42px;
    min-height: 42px;
    height: 42px;
    justify-content: center;
    padding: 0;
    border-radius: 12px;
    font-size: 12px;
    color: var(--us-text-3);
  }
  .us-nav-sub.on {
    background: rgba(37, 184, 100, .1);
    color: var(--us-primary);
  }
  .us-nav-sub::before {
    content: none;
  }
  .us-nav-sub i {
    width: 32px;
    height: 32px;
    border-radius: 10px;
    font-size: 17px;
  }
  .us-body { min-height: 100vh; }
  .us-bar {
    min-height: 58px;
    height: 58px;
    padding: 10px 14px;
    align-items: center;
    flex-direction: row;
    gap: 10px;
  }
  .us-menu-btn { display: inline-flex; }
  .us-bar-l {
    width: auto;
    min-width: 0;
    font-size: 16px;
    flex-shrink: 0;
  }
  .us-bar-r {
    width: auto;
    margin-left: auto;
    justify-content: flex-end;
    gap: 8px;
    font-size: 13px;
    padding-left: 0;
    line-height: 1.25;
  }
  .us-top-action {
    min-height: 36px;
    padding: 0 10px;
  }
  .us-main { padding: 16px 14px 20px; }
  .zp-toolbar {
    align-items: stretch;
    gap: 8px;
    padding: 10px;
  }
  .zp-toolbar .us-ctrl,
  .zp-toolbar .us-btn {
    flex: 1 1 150px;
  }
  /* 刷新只有一个图标，不跟着拉宽 */
  .zp-toolbar .us-btn-icon { flex: 0 0 auto; }
  .us-tab {
    flex: 0 0 auto;
    white-space: nowrap;
  }
}

/* ===== 概览页：欢迎卡 / 统计卡（user 端专属，勿与管理端混用） ===== */
.us-hero {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; flex-wrap: wrap;
  background: var(--us-surface); border: 1px solid var(--us-border); border-radius: var(--us-radius-lg);
  padding: 22px 24px; margin-bottom: 18px; box-shadow: var(--us-shadow-panel);
}
.us-hero-hi { font-size: 19px; font-weight: 700; color: var(--us-text); }
.us-hero-mid { font-size: 13px; font-weight: 400; color: var(--us-text-3); }

/* 列数跟着卡片数走（auto-fit）：纯直链商户的仪表盘只有三张卡，三列铺满，不再按四列空出一格；四张卡照旧一排四列 */
.us-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 16px; margin-bottom: 18px; }
.us-stat { background: var(--us-surface); border: 1px solid var(--us-border); border-radius: var(--us-radius); padding: 18px; box-shadow: var(--us-shadow-panel); min-width: 0; }
.us-stat-h { display: flex; align-items: center; justify-content: space-between; color: var(--us-text-3); font-size: 13px; }
.us-stat-h i { font-size: 20px; color: var(--us-primary); background: var(--us-primary-soft); width: 38px; height: 38px; border-radius: 10px; display: flex; align-items: center; justify-content: center; }
.us-stat-v { font-size: 26px; font-weight: 700; color: var(--us-text); margin: 10px 0 4px; }
.us-stat-s { font-size: 12px; color: var(--us-muted); }

@media (max-width: 980px) {
  .us-stats { grid-template-columns: repeat(2, 1fr); }
  /* 两列时卡片是单数：最后一张占满一行，同样不留空格 */
  .us-stats > .us-stat:last-child:nth-child(odd) { grid-column: 1 / -1; }
}

@media (max-width: 640px) {
  .us-hero {
    padding: 15px;
    gap: 0;
    margin-bottom: 12px;
  }
  .us-hero-hi {
    font-size: 16px;
    line-height: 1.45;
  }
  .us-hero-mid {
    display: block;
    margin-top: 2px;
  }
  .us-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }
  .us-stat {
    min-height: 118px;
    padding: 12px;
  }
  .us-stat-h {
    align-items: flex-start;
    gap: 8px;
    font-size: 12px;
    line-height: 1.35;
  }
  .us-stat-h i {
    width: 30px;
    height: 30px;
    border-radius: 9px;
    font-size: 17px;
  }
  .us-stat-v {
    font-size: 20px;
    line-height: 1.2;
    margin: 12px 0 5px;
    word-break: break-word;
  }
  .us-stat-s {
    font-size: 11px;
    line-height: 1.45;
  }
}

/* 首页公告弹窗（进首页自动弹的 notices.js、点「公告通知」标题弹的 dashboard.js，两处一个样）：原生对话框，内容多时整个弹窗滚动。
   标题、发布时间（灰色小字）、正文（保留换行、长词折断），底部「知道了」在左、「全部公告」在右，靠右一排。样式都在这里，脚本里不写行内样式 */
.merchant-notice{border:0;border-radius:12px;padding:24px;width:520px;max-width:calc(100vw - 32px);max-height:80vh;overflow:auto;color:#1e293b;background:#fff}
.merchant-notice::backdrop{background:rgba(15,23,42,.45)}
.merchant-notice h2{font-size:18px;overflow-wrap:anywhere;margin:0 0 16px}
.merchant-notice-time{margin:-8px 0 12px;font-size:12px;color:var(--us-muted)}
.merchant-notice-body{line-height:1.8;white-space:pre-line;overflow-wrap:anywhere}
.merchant-notice .us-actions{justify-content:flex-end;margin-top:24px}

/* ---------- 统一分页条（2026-09-23 全局翻页：每页 20 / 50 / 100，默认 20） ----------
   观感对齐后台 Admin.pager：左侧「每页 N 条」+ 计数，右侧上一页 / 页码 / 下一页。
   这里只覆盖第 16 节原来「居中一排页码」的布局；.us-pg 的尺寸与选中态仍沿用第 16 节。
   窄屏靠 flex-wrap 把右侧页码折到下一行，不另写断点。 */
.us-pager { justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px 12px; font-size: 13px; color: var(--us-text-3); }
.us-pager-l { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.us-pager-r { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.us-pager-l b { color: var(--us-text); font-weight: 600; }
.us-pager .us-pg { white-space: nowrap; }
.us-pager a.us-pg:hover { border-color: var(--us-primary); color: var(--us-primary); }
.us-perpage { padding: 6px 10px; border: 1px solid var(--us-border-strong); border-radius: var(--us-radius-sm); font-size: 13px; color: var(--us-text); background-color: var(--us-surface); cursor: pointer; outline: none; }
.us-perpage:focus { border-color: var(--us-primary); box-shadow: 0 0 0 3px var(--us-primary-ring); }

/* ---------- 20. 内容区与各页小样式（原 center.html 内联样式，搬来时逐字未改；放在全表最后，层叠先后与原来一致） ---------- */
/* 公共：加载中 / 出错占位、按钮排、相邻卡片间距 */
.us-load{padding:32px;text-align:center;color:#94a3b8}.us-error{padding:14px;color:#b42318;background:#fef3f2;border-radius:10px}.us-actions{display:flex;gap:8px;flex-wrap:wrap}.us-card+.us-card{margin-top:14px}
/* 取数失败（UC 公共件，同后台登录日志）：原因后面一个「重试」（小一号次按钮），点了按当前地址重新取数 */
.us-error .us-btn{margin-left:10px;vertical-align:middle}
/* 侧栏：不分组的单项菜单与上方分组拉开一点 */
.us-nav-direct{margin-top:8px}
/* 表内操作（详情、编辑、删除、补单、退款、启用 / 停用……）一律描边小按钮，一眼看出能点，样式只写在这一处（站长 2026-10-10 排版统一）；
   弹窗里同样的小操作（证书「上传」、结算账户图片的「上传 / 更换 / 删除」）也用它。删除加 .us-row-danger：红字、悬停红边；请求中禁用置灰 */
.us-row-action{appearance:none;display:inline-block;padding:1px 8px;border:1px solid var(--us-border-strong,#e2e8f0);border-radius:var(--us-radius-sm,6px);background:transparent;color:var(--us-text-2,#475569);font:inherit;font-size:12px;line-height:1.7;white-space:nowrap;cursor:pointer;transition:border-color .12s,color .12s}.us-row-action+.us-row-action{margin-left:4px}.us-row-action:not(:disabled):hover{border-color:var(--us-primary,#25b864);color:var(--us-primary,#25b864)}.us-row-danger{color:var(--us-down,#dc2626)}.us-row-danger:not(:disabled):hover{border-color:var(--us-down,#dc2626);color:var(--us-down,#dc2626)}.us-row-action:disabled{opacity:.5;cursor:not-allowed}
/* 账户设置（domain）：资料表单两列栅格、窄屏一列；「保存」与上面的表单隔开，保存中置灰 */
.us-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.us-form-grid label{font-size:13px;color:#475569}.us-form-grid input,.us-form-grid select{width:100%;margin-top:5px}#pf-save{margin-top:14px}#pf-save:disabled{opacity:.5;cursor:not-allowed}@media(max-width:700px){.us-form-grid{grid-template-columns:1fr}}
/* 卡片标题（API信息、聚合收款）：左侧图标 + 标题 */
.us-card-t{display:flex;align-items:center;gap:8px;margin:0 0 14px;font-size:15px;font-weight:600;color:var(--us-text)}.us-card-t i{font-size:18px;color:var(--us-primary)}
/* 原生 dialog 弹窗（重置密钥、子账号密码、投诉回复共用 UC.dialog）：居中限宽、遮罩压暗、表单项上下排、按钮靠右 */
.us-dialog{width:420px;max-width:calc(100vw - 32px);margin:auto;padding:22px}.us-dialog::backdrop{background:rgba(15,23,42,.45)}.us-dialog p{margin:0;font-size:14px;color:var(--us-text)}.us-dialog label{display:block;margin-top:14px;font-size:13px;color:var(--us-text-2)}.us-dialog label .us-in,.us-dialog label .us-ctrl{display:block;width:100%;margin-top:6px}.us-dialog [role="alert"]{min-height:20px;margin:10px 0;font-size:13px;color:var(--us-down)}.us-dialog .us-actions{justify-content:flex-end}
/* 弹窗里的 .us-ctrl 输入框与下拉定成 38（主控 zpay-21 2026-10-11：子账号弹窗的输入框与角色下拉原先 39.5 / 38）：单行 .us-in 已由第 12 节那一条全站定成 38，
   这里只管 .us-ctrl（它的上下内边距本来就是 8，只写高，不靠 min-height 与字体行高撑）；右内边距归第 2 节下拉箭头那条。
   多行框（textarea）照行数高、翻页条的每页条数（.us-perpage）照列表页的样子，都不在此列 */
.us-dialog input.us-ctrl,.us-dialog select.us-ctrl{box-sizing:border-box;height:38px}
/* 弹窗标题（UC.dialog 的 title、UC.sheet）：公共件出；标题旁的元信息（如证书弹窗里的通道名）同一行、灰色小字。
   叠在另一个弹窗上的弹窗（详情上再点退款、补单的确认）照样居中，不吃上面「相邻卡片」那条的上边距 */
.us-dlg-h{margin:0 0 12px;font-size:16px;font-weight:700;color:var(--us-text)}.us-dlg-meta{margin-left:8px;font-size:13px;font-weight:400;color:var(--us-text-3)}.us-card+.us-dialog{margin:auto}
/* 公共只读弹窗 UC.sheet：放原因的那一行空着不占位，底部「关闭」与内容隔开；里面的统计卡紧凑一些。统计弹窗（UC.showStats）照 epay 宽 520、两列 */
.us-sheet [role="alert"]:empty{display:none}.us-sheet>.us-actions{margin-top:16px}.us-sheet .us-stats{gap:10px;margin-bottom:0}.us-sheet .us-stat{min-height:0;padding:12px}.us-sheet .us-stat-v{margin:6px 0 0;font-size:18px;overflow-wrap:anywhere}.us-sheet-stats{width:520px}.us-sheet-stats .us-stats{grid-template-columns:repeat(2,minmax(0,1fr))}
/* 弹窗里的空状态（投诉详情的关联订单、协商记录，角色弹窗的菜单，添加通道、证书弹窗，通道详情的管控记录表）：页面上那条 .us-empty 上下各 46px，放进弹窗太空，收成 16px；
   字色用表格空状态那条的灰——不写这条，弹窗里的 <p> 会被上面 .us-dialog p 盖成正文色。只管弹窗里的，页面上的照旧。
   弹窗里的表格空格靠这条写在第 10 节 .us-tbl .us-empty 后面才收得住（同为 0,2,0），别挪到前面 */
.us-dialog .us-empty{padding:16px 0;color:#bbb}

/* API信息：每行「名称 | 值 | 复制」，值用等宽字、长公钥自动折行；下面一排「开发文档」「重置密钥」 */
.us-api .us-kv{gap:12px}.us-api .us-kv .v{min-width:0}.us-copy{flex-shrink:0;min-height:30px;padding:5px 12px}.us-api-act{margin-top:16px}
/* API信息「来源白名单」卡（D-16）：主账号的多行框占满卡宽、只许往下拉高，格式不对时红框（aria-invalid）；原话在框下面（公共的 .us-error，收紧一点）；
   「保存」与上面隔开。子账号照行列出，用公共的等宽字 .us-mono，每条一行 */
.us-wl textarea.us-in{display:block;resize:vertical}.us-wl .us-in[aria-invalid="true"]{border-color:var(--us-down)}.us-wl .us-error{margin-top:10px;padding:9px 12px;font-size:13px}.us-wl-act{margin-top:14px}.us-wl .us-mono{line-height:1.8}

/* 线下收银（pos.js）：「主扫收款」「聚合收款」两块，各是一张卡片、标题即块名。两块都开时左右等宽两栏、卡片等高，1100px 以下上下排（主扫在上）；
   只开一块时它占满操作区（.us-pos-wide），块里再分左右两半，720px 以下上下排。卡片间距交给栅格，不用 .us-card 自带的上下外边距 */
.us-pos .us-card,.us-pos .us-card+.us-card{margin:0}
.us-pos-two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;align-items:stretch}
.us-pos-blk{display:flex;flex-direction:column;min-width:0}
.us-pos-body{flex:1;display:flex;flex-direction:column;gap:18px;min-width:0}
.us-pos-wide .us-pos-body{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;align-items:start}
.us-pos-wide .us-pos-body>.us-pos-off{grid-column:1/-1}
/* 主扫收款左半：金额（带 ¥，空着时灰色 0.00）与四列大按键，右列退格、清空、收款（收款占两行）；不在输金额这一步时整块置灰 */
.us-pos-pad{width:100%;max-width:440px;margin:0 auto}
.us-pos-amt{display:flex;align-items:baseline;gap:8px;min-height:62px;margin-bottom:14px;padding:2px 2px 12px;border-bottom:1px solid var(--us-border)}
.us-pos-cur{font-size:24px;font-weight:700;color:var(--us-text-2)}
.us-pos-val{min-width:0;font-size:40px;font-weight:700;line-height:1.1;color:var(--us-text);font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.us-pos-val:empty::before{content:"0.00";color:var(--us-faint)}
.us-pos-kb{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:58px;gap:8px}
.us-pos-key{display:flex;align-items:center;justify-content:center;min-width:0;padding:0;border:1px solid var(--us-border-strong);border-radius:var(--us-radius);background:var(--us-surface);color:var(--us-text);font-size:22px;font-weight:600;cursor:pointer;user-select:none;touch-action:manipulation;transition:background .12s,border-color .12s,color .12s}
.us-pos-key:hover{border-color:var(--us-primary);color:var(--us-primary)}
.us-pos-key:active{background:var(--us-primary-soft)}
.us-pos-key.fn{background:var(--us-surface-soft);color:var(--us-text-2);font-size:15px}.us-pos-key.fn i{font-size:22px}
.us-pos-key.go{grid-row:span 2;background:var(--us-primary);border-color:var(--us-primary);color:#fff;font-size:18px}.us-pos-key.go:hover{background:var(--us-primary-dark);color:#fff}
.us-pos-key:disabled{opacity:.45;cursor:not-allowed;pointer-events:none}
/* 主扫收款右半（两栏时在键盘下面）：空着一个扫码图标；扫码时「请扫顾客付款码」、输入框、取消 / 收款；收完是结果与「再收一笔」 */
.us-pos-side{flex:1;display:flex;flex-direction:column;justify-content:center;min-width:0;min-height:180px;padding:18px;border-radius:var(--us-radius);background:var(--us-surface-soft)}
.us-pos-wide .us-pos-side{align-self:stretch}
.us-pos-idle{display:flex;align-items:center;justify-content:center;color:var(--us-faint)}.us-pos-idle i{font-size:72px}
.us-pos-lbl{display:block;margin-bottom:10px;font-size:15px;font-weight:600;color:var(--us-text)}
/* 付款码框是收银台的大号输入框（扫码枪打进来、也能手输）：字 18px、上下内边距 12，高照内容（约 53），不跟第 12 节单行输入框的 38——
   写成 input.us-pos-code，与那一条同为 (0,1,1)、排在后面压过它 */
input.us-pos-code{height:auto;padding:12px 14px;font-size:18px;letter-spacing:1px;background:var(--us-surface)}.us-pos-code[aria-invalid="true"]{border-color:var(--us-down)}
.us-pos-scanf .us-error,.us-pos-res .us-error{margin-top:12px;font-size:13px}
.us-pos-scanf .us-actions,.us-pos-res .us-actions{margin-top:14px}
.us-pos-res .us-kv{padding:9px 0}.us-pos-res .us-kv .k{width:80px}.us-pos-res .us-badge{font-size:14px}
/* 开着却不能用：图标加后端给的那一句，灰字居中 */
.us-pos-off{display:flex;align-items:center;justify-content:center;gap:8px;min-height:120px;padding:18px;color:var(--us-text-3);font-size:14px;text-align:center}.us-pos-off i{font-size:20px;color:var(--us-muted)}
.us-pos-side .us-pos-off{min-height:0;padding:0}
/* 聚合收款：收款链接（复制、打开）在左（两栏时在上），普通二维码或海报在右（两栏时在下） */
.us-cash-link .us-in{margin-bottom:12px}
.us-cash-qr{display:flex;align-items:center;justify-content:center;min-height:240px;padding:14px;background:var(--us-surface-soft);border-radius:var(--us-radius);color:var(--us-text-3);font-size:13px;text-align:center}.us-cash-qr img,.us-cash-qr canvas{max-width:100%}.us-cash-act{justify-content:center;margin-top:12px}
@media (max-width:1100px){.us-pos-two{grid-template-columns:minmax(0,1fr)}}
@media (max-width:720px){.us-pos-wide .us-pos-body{display:flex}.us-pos-kb{grid-auto-rows:52px}.us-pos-val{font-size:34px}}

/* 支付通道 */
/* 主体名称下面一行：开户子通道的开户状态，灰色小字 */
.us-ch-sub{margin-top:2px;font-size:12px;line-height:1.5;color:var(--us-muted,#94a3b8)}
/* 列宽（站长 2026-10-11 实地验收，经主控 zpay-21：1366 下表比外框宽 24、「今日」被压成两行；收付通那几行操作列多了「余额」「提现」）：
   - 主体名称、商户号单行省略的那层不按字数撑列宽（contain:inline-size），只按起步宽占位——名称 8 个字、商户号 16 个数字（支付宝 PID 16 位放得下）；
     列宽多出来时字跟着显示得多，放不下照样「…」、悬停看全文；
   - 今日、昨日同一个类、同宽（定宽，不跟着分多出来的宽，多出的宽按比例分给别的列），一行放得下「¥0.00 · 0 笔」与昨日后面的刷新按钮；
     金额再大只在「 · 」处折行，「N 笔」连同刷新按钮包在 .us-ch-nw 里不拆，不把表撑宽；
   - 操作列按钮不折行（公共的 .us-nowrap，第 10 节）。三档列宽的估算在 channels-widths-20261011 用例里。 */
.us-ch-name .us-clip,.us-ch-mch .us-clip{contain:inline-size}.us-ch-name .us-clip{min-width:8em}.us-ch-mch .us-clip{min-width:16ch}
.us-ch-rc{width:10.5em}.us-ch-nw{white-space:nowrap}
/* 定宽只是「想要的宽」：窄屏（390）表本来就在外框里横滚时，浏览器照样把定宽的格子压到它的最窄（「¥0.00 · 0 笔」能折，只剩「¥0.00」那一段），
   两列压成 63 / 78、折成两行（主控 zpay-21 复看 390×844）。里面那一层垫一个与定宽同宽的最窄（10.5em 减去格子左右内边距 14 × 2），
   窄屏也照宽屏一样定宽、同宽、一行放下；金额再大照样只在「 · 」处折行 */
.us-ch-paid{display:inline-block;min-width:calc(10.5em - 28px)}
/* 今日、昨日：昨日那格后面一个刷新图标按钮（同后台通道列表的单行刷新），与「N 笔」同一行；不带边框、悬停变主题色，看得出能点；
   刷新中按钮禁用、图标转（页面在请求中给按钮挂 aria-busy="true"） */
.us-ch-refresh{appearance:none;margin-left:6px;padding:0 2px;border:0;background:none;color:var(--us-text-3,#64748b);font:inherit;line-height:1;vertical-align:middle;cursor:pointer}.us-ch-refresh:hover{color:var(--us-primary,#25b864)}.us-ch-refresh:disabled{cursor:progress}.us-ch-refresh i{display:inline-block;font-size:15px}
.us-ch-refresh[aria-busy="true"] i{animation:us-spin 1s linear infinite}
@keyframes us-spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
/* 投诉数大于 0 时做成可点的描边小钮，点了去交易投诉页只看这条通道的 */
.us-ch-complain{display:inline-block;min-width:24px;padding:0 7px;border:1px solid currentColor;border-radius:10px;color:var(--us-down,#dc2626);font-weight:600;line-height:18px;text-align:center}.us-ch-complain:hover{background:#fef2f2}
/* 通道详情弹窗（行内「详情」）：上面这一行的信息、下面管控记录表 + 翻页；表有六列，比公共弹窗宽，内容多时只有中间这段滚动，弹窗里的表不撑表格最小宽度 */
.us-dialog:has(.us-ch-detail){width:720px}.us-ch-detail{max-height:calc(88vh - 160px);overflow-y:auto;padding-right:4px}.us-ch-detail .us-kv{padding:8px 0;font-size:13px}.us-ch-detail .us-kv .k{width:72px}.us-ch-detail .us-tbl{min-width:0}

/* 地区统计 */
/* 顶部一条：时间单选（外观同 .us-tab，选中同 .us-tab.on）+ 刷新，右侧累计交易金额。单选高 38，与同排「刷新」（.us-btn 的 min-height 38）一样高 */
.us-seg{display:flex;flex-wrap:wrap;gap:6px}
.us-seg-i{position:relative;cursor:pointer}
.us-seg-i input{position:absolute;width:1px;height:1px;margin:0;opacity:0;pointer-events:none}
.us-seg-i .us-tab{display:inline-flex;align-items:center;min-height:38px;white-space:nowrap}
.us-seg-i input:checked+.us-tab{background:var(--us-primary);color:#fff;border-color:var(--us-primary)}
.us-seg-i input:focus-visible+.us-tab{outline:3px solid var(--us-primary-ring);outline-offset:2px}
.us-area-sum{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 6px;margin-left:auto;font-size:13px;color:var(--us-text-3)}
.us-area-sum b{font-size:20px;font-weight:700;color:var(--us-text)}
.us-area-sum em{margin-left:6px;font-size:12px;font-style:normal;color:var(--us-muted)}
/* 换时间段取数时上一份淡显，不闪空白 */
.us-area-box{transition:opacity .15s}.us-area.is-busy .us-area-box{opacity:.55}
.us-area-head{margin-bottom:12px;font-size:15px;font-weight:600;color:var(--us-text)}
/* 左地图、右排名；900px 以下排名挪到地图下面 */
.us-area-body{display:flex;gap:20px}
.us-area-map{flex:1;min-width:0;height:440px;color:var(--us-muted);font-size:13px}
.us-area-rank{flex:0 0 280px;min-width:0}
.us-area-h{margin-bottom:4px;padding-bottom:8px;border-bottom:2px solid var(--us-primary);font-size:14px;font-weight:600;color:var(--us-text)}
.us-rank{margin:0;padding:0;list-style:none}
.us-rank li{display:flex;align-items:center;gap:8px;padding:8px 4px;border-bottom:1px solid var(--us-border);font-size:13px}
.us-rank-no{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:22px;height:22px;border-radius:4px;background:var(--us-surface-soft);color:var(--us-text-3);font-size:12px;font-weight:600}
.us-rank li:nth-child(-n+3) .us-rank-no{background:var(--us-primary);color:#fff}
.us-rank-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--us-text)}
.us-rank-amt{font-weight:600;color:var(--us-text);white-space:nowrap;font-variant-numeric:tabular-nums}
.us-rank-cnt{font-size:12px;color:var(--us-muted);white-space:nowrap}
/* 没有数据：整块换成空状态（图标 + 暂无数据），不画空地图 */
.us-area-empty{display:none;flex-direction:column;align-items:center;justify-content:center;gap:8px;min-height:220px;color:var(--us-muted);font-size:13px}
.us-area-empty i{font-size:36px;color:var(--us-faint)}
.us-area-box.is-empty .us-area-body{display:none}.us-area-box.is-empty .us-area-empty{display:flex}
@media (max-width:900px){.us-area-body{flex-direction:column}.us-area-map{flex:none;height:320px}.us-area-rank{flex:none}.us-area-sum{width:100%;margin-left:0}}

/* 每日统计 */
/* 趋势图：上格交易金额、下格成功笔数，高度已含日期刻度 */
.us-day-chart{height:300px;color:var(--us-muted);font-size:13px}
/* 表格末行「合计」：加粗、浅底，不随斑马纹与悬停变色 */
.us-tbl tbody tr.us-sum td{background:var(--us-surface-soft);font-weight:600}

/* 订单管理 */
/* 单号与商品名称的单行省略用公共的 .us-clip / .us-goods（第 10 节）：站长单号 us-clip（34 个数字宽、悬停看全），下面的商户单号是两行格第二行
   us-tbl-sub us-clip（不撑宽列；单行省略的格有值悬停看全文、空值不带，商户中心 UC.clip 与后台订单列表同一口径）；
   检索栏的定宽与起止日期一格用第 9 节的公共类（2026-10-11 从这一节挪过去） */
/* 创建 / 完成时间（两行格 od-time）、状态格（徽章与部分退的已退金额）都不折行 */
.od-time,.od-state{white-space:nowrap}
/* 站长单号点开详情：做成链接的样子 */
.od-no{appearance:none;border:0;padding:0;background:none;font:inherit;font-weight:600;color:var(--us-accent-blue,#2563eb);text-align:left;cursor:pointer}.od-no:hover{text-decoration:underline}
/* 部分退款的已退金额：徽章下一行红色小字 */
.od-refund{margin-top:2px;font-size:12px;color:var(--us-down,#dc2626)}
/* 订单详情 / 订单统计弹窗（公共只读弹窗 UC.sheet 加 od-dlg，标题是公共的 .us-dlg-h）：比表单弹窗宽，内容多时弹窗里滚动；键值两列、窄屏一列；弹窗里的表不撑表格最小宽度 */
.od-dlg{width:680px;max-width:calc(100vw - 32px);max-height:88vh;overflow:auto}
.od-grp{display:grid;grid-template-columns:1fr 1fr;column-gap:24px}.od-grp+.od-grp{margin-top:6px;padding-top:6px;border-top:1px solid var(--us-border,#e9edf2)}
.od-dlg .us-kv{padding:7px 0;font-size:13px;border-bottom:0}.od-dlg .us-kv .k{width:72px}
/* 详情里整行显示的格（商品名称）：占满两栏 */
.od-grp .od-kv-full{grid-column:1/-1}
.od-dlg .us-tbl{min-width:0}
/* 订单统计：金额一排四张、笔数一排五张，窄屏两列 */
.od-dlg .us-stats{gap:10px;margin-bottom:4px}.od-st-money .us-stats{grid-template-columns:repeat(4,1fr)}.od-st-count .us-stats{grid-template-columns:repeat(5,1fr)}.od-dlg .us-stat{padding:12px}.od-dlg .us-stat-v{margin:6px 0 0;font-size:16px;overflow-wrap:anywhere}
/* 退款确认的说明一行（标签、输入框、红字原因用公共 .us-dialog 的样式） */
.od-dlg-tip{margin:0 0 4px;font-size:13px;color:var(--us-text-3,#64748b)}
/* 补单、导出请求中的提示层 */
.od-busy{position:fixed;left:50%;top:38%;z-index:1000;transform:translate(-50%,-50%);padding:12px 20px;border-radius:var(--us-radius,8px);background:rgba(15,23,42,.86);color:#fff;font-size:14px;box-shadow:var(--us-shadow-card)}
@media(max-width:700px){.od-grp{grid-template-columns:1fr}.od-st-money .us-stats,.od-st-count .us-stats{grid-template-columns:repeat(2,1fr)}}

/* 自配通道 */
/* 检索栏末尾的「添加通道」放在公共检索栏的页面操作格里（.zp-toolbar>.us-actions），同一排靠右，这里不再另写 */
/* 添加 / 编辑通道、修改结算账户弹窗：比公共表单弹窗宽一些；标题（公共的 .us-dlg-h）在上、按钮在下不动，表单项多时只有中间这段滚动 */
.us-dialog:has(.us-oc-body){width:520px}.us-oc-body{max-height:calc(88vh - 160px);overflow-y:auto;padding-right:4px}
/* 三方平台、支付方式两个下拉同一排；编辑时只读的平台名照全站的只读控件（第 12 节 .us-ctrl[readonly]） */
.us-oc-pair{display:grid;grid-template-columns:1fr 1fr;column-gap:12px}
/* 支付产品：勾选项同一排、放不下换行 */
.us-oc-set{min-width:0;margin:14px 0 0;padding:0;border:0}.us-oc-set legend{padding:0;font-size:13px;color:var(--us-text-2,#475569)}.us-dialog .us-oc-ck{display:inline-flex;align-items:center;gap:6px;margin:8px 16px 0 0;color:var(--us-text,#1f2937)}.us-oc-ck input{margin:0}
/* 平台表单项里的单选（密钥方式、签名方式）同样用上面这一组样式 */
/* 证书弹窗：每份一行「名称（必需）｜已上传 / 未上传｜上传」；不需要证书时显示接口给的说明 */
.us-oc-file{display:flex;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid var(--us-border,#e9edf2);font-size:13px}.us-oc-fname{flex:1;min-width:0;color:var(--us-text,#1f2937)}.us-oc-need{margin-left:6px;font-size:12px;font-style:normal;color:var(--us-down,#dc2626)}.us-dialog .us-oc-note{font-size:13px;line-height:1.7;color:var(--us-text-2,#475569)}.us-oc-files+.us-oc-note{margin-top:12px}
/* 平台证书一行（微信 V3，只读）：几张证书逐张一行靠右，序列号太长截断、悬停看全，到期日不截；来源与时间灰色小字 */
.us-oc-certs{display:flex;flex-direction:column;align-items:flex-end;gap:2px;min-width:0;max-width:72%;font-size:12px;color:var(--us-text-2,#475569)}.us-oc-cert{display:flex;gap:6px;min-width:0;max-width:100%;white-space:nowrap}.us-oc-serial{min-width:0;overflow:hidden;text-overflow:ellipsis}.us-oc-certs small{font-size:12px;color:var(--us-text-3,#64748b)}
@media(max-width:560px){.us-oc-pair{grid-template-columns:1fr}}

/* 角色管理 */
/* 新增 / 编辑角色弹窗：与添加通道弹窗同宽，标题是公共的 .us-dlg-h，勾选项沿用 .us-oc-set / .us-oc-ck；菜单多时只有中间这段滚动 */
.us-dialog:has(.us-rl-body){width:520px}.us-rl-body{max-height:calc(88vh - 160px);overflow-y:auto;padding-right:4px}
/* 每组一块：组名勾选框加粗在上，组内菜单项缩进、同一排放不下换行；组与组之间一条细线 */
.us-rl-grp+.us-rl-grp{margin-top:8px;border-top:1px solid var(--us-border,#e9edf2)}.us-dialog .us-rl-gh{font-weight:600}.us-rl-items{padding-left:20px}

/* 支付通道：收付通「提现」弹窗（applyments-funds.js，公共只读弹窗加 od-dlg us-cf-dlg） */
/* 提现记录七列（序号、单号、金额、状态、账户、申请 / 到账时间、操作），od-dlg 的 680 放不下、时间与账户会折行，放宽到 840；
   窄屏照 .us-dialog 的 max-width（100vw − 32px）收窄，表格只在 .us-tbl-scroll 里横向滚。排在上面几条 .us-dialog:has(…) 后面：同为 (0,2,0)，靠先后 */
.us-dialog.us-cf-dlg{width:840px}

/* 账户设置「操作密码」卡片（只给主账号） */
/* 一行「操作密码 | 值 | 设置 / 修改」：按钮与 API信息的「复制」一样紧凑，值不跟上面的资料错位；没读到时值的位置写原因，红字 */
.us-op-btn{flex-shrink:0;margin-left:12px;min-height:30px;padding:5px 12px}.us-kv .v.us-op-err{color:var(--us-down,#dc2626)}

/* 账户设置「结算账户」卡片与「修改」弹窗（D-118，只给主账号） */
/* 卡片标题行「结算账户」右边一个「修改」（按钮同操作密码卡），下面逐行：默认结算方式、支付宝、微信、银行卡 */
.us-sa .us-card-t .us-op-btn{margin-left:auto}
/* 弹窗每一类最后一行是图片：标签、缩略图（点开看原图）、上传 / 更换 / 删除，按内容高度、不留空白；按钮是公共的描边小按钮 .us-row-action */
.us-sa-img{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin-top:14px;font-size:13px;color:var(--us-text-2,#475569)}
.us-sa-il{flex:none;min-width:48px}.us-sa-slot{display:flex;align-items:center;flex-wrap:wrap;gap:8px;min-width:0}
.us-sa-thumb{display:block;flex:none;width:56px;height:56px;border:1px solid var(--us-border,#e9edf2);border-radius:8px;overflow:hidden;background:var(--us-surface-soft,#f8fafc)}.us-sa-thumb img{display:block;width:100%;height:100%;object-fit:contain}

/* 申请提现（withdraw.js）：申请表最后一排「申请提现」与上面的逐行隔开；只认申请表这张卡里的，确认框挂在 body 下不受影响 */
#wd-form .us-actions{margin-top:14px}

/* 仪表盘（dashboard.js，D-125） */
/* 四张卡沿用「概览页」一节的 .us-stats / .us-stat（右上角图标、灰色副行）。下面每一行是几块卡片：左「近7日交易」约占三分之二、右「公告通知」，
   再下面「通道费率」「今日占比」「最近结算」等宽。接口不给的块整块不画，同一行剩下的块按比例伸满（只剩一块就占满整行）；
   宽度放不下时换行，换到下一行的那块同样占满；720px 以下一律单列。块之间的间距交给这一行的 gap，不用 .us-card 自带的上下外边距 */
.us-dash-row{display:flex;flex-wrap:wrap;gap:16px;margin-bottom:18px}
.us-dash-row .us-card,.us-dash-row .us-card+.us-card{margin:0}
.us-dash-box{flex:1 1 260px;min-width:0}
.us-dash-wide{flex:2 1 520px}
.us-dash-box .us-card-t{margin-bottom:12px}
@media (max-width:720px){.us-dash-box{flex-basis:100%}}
/* 标题行右边的「按城市」开关：拨动开关，外观照后台首页，打开是主题绿 */
.us-dash-switch{display:inline-flex;align-items:center;gap:8px;margin-left:auto;font-size:13px;font-weight:400;color:var(--us-text-2);cursor:pointer;user-select:none;white-space:nowrap}
.us-dash-switch input{appearance:none;-webkit-appearance:none;position:relative;flex:none;width:42px;height:22px;margin:0;border-radius:11px;background:#cbd5e1;cursor:pointer;transition:background .2s}
.us-dash-switch input:checked{background:var(--us-primary)}
.us-dash-switch input::before{content:"";position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:50%;background:#fff;transition:left .2s}
.us-dash-switch input:checked::before{left:22px}
.us-dash-switch input:focus-visible{outline:3px solid var(--us-primary-ring);outline-offset:2px}
/* 图的容器定高、宽度随块：ECharts 按容器的真实像素画，块变窄时不压扁 */
.us-dash-chart{height:300px}
.us-dash-pie{height:260px}
/* 空状态、加载中、加载失败：图标加一句居中；在图的位置上撑满图的高度 */
.us-dash-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;height:100%;min-height:160px;color:var(--us-muted);font-size:13px}
.us-dash-empty i{font-size:36px;color:var(--us-faint)}
/* 图上的悬停提示：每行前面一小段线色，名称与笔数浅一级，金额加粗 */
.us-dash-tip{display:flex;align-items:center;gap:6px;margin-top:4px;white-space:nowrap}
.us-dash-tip i{display:inline-block;flex:none;width:10px;height:2px;border-radius:1px}
.us-dash-tip span{color:var(--us-text-3)}
/* 公告：标题单行截断（悬停看全称），右侧发布日期 */
.us-dash-list{margin:0;padding:0;list-style:none}
.us-dash-list li{display:flex;align-items:center;gap:12px;padding:10px 0;border-bottom:1px dashed var(--us-border);font-size:13px}
.us-dash-list li:last-child{border-bottom:0}
.us-dash-nt{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--us-text)}
.us-dash-nt:hover{color:var(--us-primary)}
.us-dash-list time{flex:none;font-size:12px;color:var(--us-muted)}
/* 「未开通」「未设置」：灰字 */
.us-dash-off{color:var(--us-muted)}
/* 块里的表：不撑表格最小宽度，格子紧凑不折行；主体名称占剩下的宽度、过长截断（悬停看全称）；费率行多时在块里滚动 */
.us-dash-box .us-tbl{min-width:0}
.us-dash-box .us-tbl th,.us-dash-box .us-tbl td{padding:10px 8px;white-space:nowrap}
.us-dash-clip{max-width:0;width:100%;overflow:hidden;text-overflow:ellipsis}
.us-dash-rates .us-tbl-scroll{max-height:282px;overflow-y:auto}