/* 财务站样式 —— 自己的骨架，故意**不**引 admin.css（那套是后台的栅格，两边布局不同）。 */
:root { --brand: #e8657f; --ink: #1f2937; --muted: #6b7280; --line: #e5e7eb; --bg: #f7f7f8; }
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--ink);
  font: 14px/1.6 -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif; }
.view { min-height: 100vh; }
.hidden { display: none !important; }
.card { background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 20px; }
.login-card { max-width: 380px; margin: 12vh auto; }
.login-card h1 { font-size: 20px; margin: 0 0 4px; }
.sub { color: var(--muted); margin: 0 0 18px; font-size: 13px; }
label { display: block; margin-bottom: 12px; font-size: 13px; color: var(--muted); }
input, select { display: block; width: 100%; margin-top: 4px; padding: 9px 10px;
  border: 1px solid var(--line); border-radius: 8px; font-size: 14px; }
/* 上面那条是给**表单框**写的（整行、34px 高）。核销页是财务站第一处把**裸 checkbox 放进表格**的
   页面：不收回来的话，13×13 的原生勾选框会被拉成 20×13 并顶上 4px 边距（2026-10-13 质量审查
   M4 用 Edge 真量过）。同款先例：web/admin/admin.css 的 .pick-row input[type="checkbox"]。 */
input[type="checkbox"] { display: inline-block; width: auto; margin: 0; padding: 0; border: 0; }
.btn { width: 100%; padding: 10px; border: 0; border-radius: 8px; background: var(--brand);
  color: #fff; font-size: 15px; cursor: pointer; }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn-sm { width: auto; padding: 6px 12px; font-size: 13px; }
.btn-ghost { background: #fff; color: var(--ink); border: 1px solid var(--line); }
.err { color: #dc2626; min-height: 18px; margin: 8px 0 0; font-size: 13px; }
#view-main { display: flex; }
.side { width: 190px; background: #fff; border-right: 1px solid var(--line); padding: 18px 0;
  display: flex; flex-direction: column; min-height: 100vh; }
.brand { padding: 0 18px 14px; font-weight: 600; }
.badge { background: #eef2ff; color: #4338ca; border-radius: 6px; padding: 1px 6px;
  font-size: 11px; font-weight: 400; margin-left: 6px; }
/* 总览行里那颗「已停用」角标。**只改颜色**：形状 / 内距 / 字号 / 左边距全部复用上面那颗 .badge
   —— 所以两个类必须一起写（`class="badge badge-off"`）。单写 .badge-off = 一块没有角标形状的
   裸文字，单写 .badge = 与「只读」同色；两条都由 finance-page-401.test.js 的总览 ⑤/⑦ 按着。
   ⚠️ 为什么不直接用 .badge 那颗靛蓝，两个理由：
     ① 靛蓝那颗现在说的是「**你**（看屏的人）这个账号是只读的」，而这一颗说的是「**那一行**的代理
        已经停用」—— 一个关于浏览者、一个关于被浏览的对象。同色会被读成同一个类别
        （财务扫一眼会以为"这家是只读的"，而真相是"这家已经不做生意了"）。
     ② 灰是本仓表示"停用"的那一族颜色：web/admin/admin.css 里，**下架的款**是 `.sku.off` 的
        #6b7280 字 + #f3f4f6 底，**停用的代理行**是 `#pane-agents tbody tr.off` 的整行 #9ca3af。
        这一颗沿用同一族的底色 #f3f4f6，字取 **#4b5563** —— 比 `.sku.off` 那档灰再深一步，理由是
        **对比度**：11px 属于小字，AA 要 4.5:1，而 #6b7280 配 #f3f4f6 只有 4.39:1（不够）。
        #4b5563 是 6.87:1（同屏那颗「只读」靛蓝是 7.07:1，同一个量级）。
        ⚠️ 这两个比值是**算出来的**（WCAG 相对亮度），算它的判据在 finance-page-401.test.js 的
        总览 ⑦ —— 谁动这两个色值，⑦ 会当场把新比值算出来并按 4.5 判。
   ⚠️ 只给颜色、不给形状：哪天要改"角标长什么样"，改上面那一条就同时改了两处（⑦ 钉着这条）。 */
.badge-off { background: #f3f4f6; color: #4b5563; }
/* 账号管理页的「超级管理员」角标（2026-10-16）。写法与上面 .badge-off **逐字同款**：
   形状 / 内距 / 字号 / 左边距全部复用 .badge —— 所以两个类必须一起写（`class="badge badge-root"`）。
   ⚠️ 为什么不直接用 .badge 那颗靛蓝：那颗说的是「**你**（看屏的人）这个账号是只读的」，
   而这一颗说的是「**这一行**的账号是超级管理员」—— 一个关于浏览者、一个关于被浏览的对象。
   同色会被读成同一个类别（与 .badge-off 那段理由同源）。
   ⚠️ 色值取品牌色那一族的深一档：#b03a52 配 #fff1f4 是 **5.35:1**（11px 小字 AA 要 4.5:1，够）。 */
.badge-root { background: #fff1f4; color: #b03a52; }
.side nav { display: flex; flex-direction: column; }
.side nav a { padding: 10px 18px; color: var(--ink); text-decoration: none; cursor: pointer; }
.side nav a:hover { background: #fafafa; }
.side nav a.on { background: #fff1f4; color: var(--brand); font-weight: 600; }
.side-foot { margin-top: auto; padding: 18px; }
.link { color: var(--muted); cursor: pointer; }
.main { flex: 1; padding: 22px 26px; max-width: 1080px; }
h2 { font-size: 17px; margin: 0 0 14px; }
table { width: 100%; border-collapse: collapse; background: #fff; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
th, td { padding: 9px 12px; border-bottom: 1px solid var(--line); text-align: left; font-size: 13px; }
th { background: #fbfbfc; color: var(--muted); font-weight: 500; }
tr:last-child td { border-bottom: 0; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
/* 可点的总览行 ="点它看对账单"：手型光标 + hover 灰底，与 admin.css 的 .rp-row 同款。
   只给光标不给反馈的话，六列宽表上鼠标落在哪一行是看不出来的（财务点错代理就是这么来的）。
   ⚠️ 判据是 data-agent 这个属性本身（与 finance.js 那段委托同一个判据），不是"第几行"。 */
.main table tbody tr[data-agent] { cursor: pointer; }
.main table tbody tr[data-agent]:hover { background: #fafbfc; }
.row-actions { display: flex; gap: 8px; flex-wrap: wrap; margin: 14px 0; align-items: center; }
.tiles { display: flex; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
.tile { flex: 1; min-width: 150px; background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; }
.tile .k { color: var(--muted); font-size: 12px; }
.tile .v { font-size: 20px; font-weight: 600; margin-top: 4px; font-variant-numeric: tabular-nums; }
.tile .v.danger { color: #dc2626; }
.summary-bar { position: sticky; bottom: 0; background: #fff; border: 1px solid var(--line);
  border-radius: 10px; padding: 12px 14px; display: flex; gap: 16px; align-items: center; }
.summary-bar .diff.ok { color: #059669; }
.summary-bar .diff.bad { color: #dc2626; }
.toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%);
  background: #111827; color: #fff; padding: 10px 16px; border-radius: 8px; font-size: 13px; }
/* 账号管理页（2026-10-16）。三样都只**排布**，不碰尺寸 ——
   裸 checkbox 的尺寸由上面那条全局规则管着（inline-block / width:auto），这里再写一遍 width
   就是同一个问题的第二个答案（改一处、另一处照旧）。 */
h3 { font-size: 14px; margin: 20px 0 8px; }
/* 权限勾选框：一排流式铺开。⚠️ 必须压掉上面 `label { display:block; margin-bottom:12px }` ——
   不压的话六个勾选框各占一整行、且每条下面挂 12px 空白（表格行会被撑成六行高）。 */
.perms { display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: center; }
.perms label { display: inline-flex; align-items: center; gap: 5px; margin: 0; color: var(--ink); font-size: 13px; }
/* 操作列那三颗按钮并排。⚠️ 不复用 .row-actions：那个带 margin:14px 0（给页面级按钮行写的），
   塞进单元格会把整行撑高。 */
.ops { display: flex; gap: 6px; flex-wrap: wrap; }
/* 已停用那一行的账号名压暗一点（与 .badge-off 同族的灰）—— 与 admin.css 的 `tr.off` 同一个语义：
   "这一行不参与做生意了"。⚠️ 只压**账号名那一格**，不整行变灰：那一行的勾选框还要能点。 */
tr[data-admin] td:first-child { font-weight: 600; }
.badge-off + .sub { margin-top: 2px; }