/**
 * 积分 · 充值 · 流水 三页共用样式 —— 商用化 12 号「第 4 步」。
 *
 * 视觉出处：`outputs/UI设计稿_商用化充值与流水_双端.html`（11 帧，老唐 21:50 已看过）。
 * 色板与 `market.css` / `app.css` 同一套（风格 A 暖陶土），所以**只写 market.css 里没有的部分**：
 *   · 余额胶囊 ＋ 点开的浮卡（P5，挂工作台顶栏）
 *   · 充值档位卡 `.pack`（P6 —— ⚠️ 不复用 `.tier`：`.tier` 是 `order.html` 在用的，别动它）
 *   · 流水统计卡 / 筛选 chips / 流水表 / 手机卡片列表（P7）
 *
 * ⚠️ 引它的页面**必须先引 market.css**（`.btn` / `.alert` / `.qrcard` / `.orow` 那些在那儿）。
 */

/* ★★★ [hidden] 必须压过后面所有 display 声明。
   浏览器内置的 `[hidden]{display:none}` **优先级极低**，任何 `.foo{display:flex}` 都能盖过它
   ⇒ 元素明明写了 hidden 却还在页面上露着，而"查 el.hidden 属性"的断言会读到 true、一路绿。
   上一轮就是这么栽的（归属条在没有 ?ref= 的页面上真的露出来了，全靠逐帧截图才发现）。
   ⇒ 全局钉死这一条，判"隐藏"的断言一律改查 `getClientRects().length`。 */
[hidden]{display:none !important}

/* ==================== P5 余额胶囊 + 浮卡（挂工作台顶栏） ==================== */

/* 胶囊：跟工作台顶栏那颗「参数配置」按钮同高，但更窄（它是要长期挂在右上角的） */
.chipbal{display:flex;align-items:center;gap:6px;border:1px solid #E8D3BC;border-radius:20px;
  padding:4px 11px;background:#FFFBF3;font-size:11.5px;color:#7A5410;position:relative;
  cursor:pointer;white-space:nowrap;user-select:none}
.chipbal:hover{background:#FFF6E8}
.chipbal b{color:var(--clay);font-variant-numeric:tabular-nums}
.chipbal .cv{font-size:9px;color:var(--faint)}
/* 三态：正常（陶土）/ 告急（红）/ 挂上级账（黄 —— 店员的号看的是上级余额，颜色要能一眼分开） */
.chipbal.bad{border-color:#F0C9C4;background:#FDF4F2}
.chipbal.bad b{color:var(--red)}
.chipbal.warn{border-color:#EFDDB4;background:#FDF7EA}
.chipbal.warn b{color:#9A5A11}

/* 浮卡：绝对定位挂在胶囊下面（工作台右栏已经满了，不加第四栏 —— 稿子 P5 的取舍） */
.balpop{position:absolute;top:34px;right:0;width:300px;background:#fff;border:1px solid var(--line);
  border-radius:13px;padding:13px 14px;box-shadow:0 14px 34px rgba(42,33,27,.16);z-index:60;text-align:left}
.balpop h5{font-size:12.5px;margin:0 0 2px}
.balpop .sub{font-size:10.5px;color:var(--faint);margin:0 0 10px}
.balpop .big{font-size:27px;font-weight:700;color:var(--clay);line-height:1.1;font-variant-numeric:tabular-nums}
.balpop .big small{font-size:11.5px;font-weight:400;color:var(--faint);margin-left:4px}
.balpop .note{font-size:11px;color:var(--muted);line-height:1.65;margin-top:9px}
.balpop .note b{color:var(--ink);font-variant-numeric:tabular-nums}
.balpop .rowline{display:flex;justify-content:space-between;gap:10px;font-size:11px;color:var(--muted);padding:5px 0}
.balpop .rowline b{color:var(--ink)}
.balpop .btnrow{margin-top:11px}
.balpop .btnrow .btn{flex:1}

/* 余额进度条（纯装饰，**不承载信息** —— 稿子里 32% / 43% 只是视觉示意） */
.bar{height:6px;border-radius:4px;background:#F1EDE7;overflow:hidden}
.bar i{display:block;height:100%;border-radius:4px;background:linear-gradient(90deg,var(--clay),var(--clay2))}
.bar.warn i{background:linear-gradient(90deg,#D97706,#B45309)}
.bar.bad i{background:linear-gradient(90deg,#C0392B,#8E2F22)}

/* ==================== P6 充值档位卡（照稿：3 档横排 · 不默认选中） ==================== */
.packs{display:grid;grid-template-columns:repeat(5,1fr);gap:11px;margin-bottom:6px}
.pack{background:#fff;border:1px solid var(--line);border-radius:13px;padding:13px 13px 11px;position:relative;
  cursor:pointer;display:flex;flex-direction:column;transition:border-color .12s,box-shadow .12s}
.pack:hover{border-color:#D9BE9E}
.pack.on{border-color:var(--clay);box-shadow:0 10px 26px rgba(140,61,20,.14)}
.pack.dis{cursor:default;opacity:.55;background:#FBF8F3}
.pack .bdg{position:absolute;top:-9px;right:11px;background:var(--clay);color:#fff;font-size:10px;
  border-radius:6px;padding:2px 8px}
.pack .top{display:flex;align-items:center;gap:7px;margin-bottom:6px}
.pack .rd{width:15px;height:15px;border-radius:50%;border:1.5px solid #D9CFC0;background:#fff;flex-shrink:0}
.pack.on .rd{border-color:var(--clay);background:var(--clay);box-shadow:inset 0 0 0 3px #fff}
.pack h5{font-size:12.5px;margin:0;font-weight:700}
.pack .ap{font-size:20px;font-weight:700;color:var(--clay);line-height:1.1;font-variant-numeric:tabular-nums}
.pack .cg{font-size:11px;color:var(--muted);margin-top:5px;line-height:1.6}
.pack .cg b{color:var(--ink);font-variant-numeric:tabular-nums}
.pack .unit{margin-top:auto;padding-top:9px;font-size:10.5px;color:var(--faint)}
/* 手机端改竖排单列（稿子 390 帧）—— 横排 5 档在 390 上会挤成「1 元买 1 分」那种断行 */
.pack.mrow{flex-direction:row;align-items:center;gap:10px;padding:11px 12px}
.pack.mrow .ap{margin-left:auto;font-size:16px}

/* ==================== P7 流水：统计卡 / 筛选 / 表格 / 手机卡片 ==================== */
.st3{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:15px}
.statk{background:#fff;border:1px solid var(--line);border-radius:13px;padding:12px 13px}
.statk .k{font-size:10.5px;color:var(--faint)}
.statk .v{font-size:22px;font-weight:700;color:var(--clay);line-height:1.25;font-variant-numeric:tabular-nums}
.statk .v small{font-size:11px;font-weight:400;color:var(--faint);margin-left:3px}
.statk .n{font-size:10.5px;color:var(--faint);line-height:1.6;margin-top:3px}
.statk.warn{background:#FDF7EA;border-color:#EFDDB4}
.statk.warn .v{color:#9A5A11}
.statk.warn .n b{color:#7A5410}
.statk.bad{background:#FDF4F2;border-color:#F0C9C4}
.statk.bad .v{color:var(--red)}

.chips{display:flex;gap:7px;align-items:center;flex-wrap:wrap;margin-bottom:11px}
.chip{font-size:11px;color:var(--muted);background:#fff;border:1px solid var(--line);border-radius:20px;
  padding:4px 12px;cursor:pointer;white-space:nowrap}
.chip:hover{border-color:#D9BE9E}
.chip.on{background:var(--soft);border-color:#E3D2BC;color:var(--clay);font-weight:700}
.chip b{font-variant-numeric:tabular-nums}
.chip.rt{margin-left:auto;cursor:default}
/* 「只看〈谁〉」的下拉：原生 `<select>` 撑不起胶囊样 ⇒ 一层「文案 ＋ 藏起来的真 select」。
   点文案调 `showPicker()`（不支持就 focus），选中的值照旧走原生 change。 */
.wsel{display:inline-flex;align-items:center;gap:3px;background:#fff;border:1px solid var(--line);
  border-radius:20px;padding:3px 11px;font-size:11px;color:var(--muted);cursor:pointer}
.wsel b{color:var(--clay);font-weight:700}

/* 流水表 */
.lt{width:100%;border-collapse:collapse;background:#fff;border:1px solid var(--line);
  border-radius:13px;overflow:hidden}
.lt thead th{background:#FBF8F3;font-size:10.5px;color:var(--faint);font-weight:400;text-align:left;
  padding:9px 12px;border-bottom:1px solid var(--line);white-space:nowrap}
.lt tbody td{font-size:11.5px;color:var(--muted);padding:10px 12px;border-bottom:1px solid #F4EEE5;vertical-align:top}
.lt tbody tr:last-child td{border-bottom:none}
.lt td.num{font-weight:700;font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap}
.lt td.num.minus{color:var(--red)}
.lt td.num.plus{color:var(--green)}
.lt td.bal{font-variant-numeric:tabular-nums;color:var(--ink);text-align:right;white-space:nowrap}
.lt td.who{color:var(--ink);white-space:nowrap}
.lt td.tm{color:var(--faint);white-space:nowrap;font-variant-numeric:tabular-nums}

/* 类型徽章：四值四色（`grant` 赠送 · `recharge` 充值 · `consume` 消耗 · `adjust` 调整） */
.kind{display:inline-block;font-size:10.5px;border-radius:6px;padding:1px 7px;white-space:nowrap}
.kind.consume{background:#F4EEE5;color:#7C6A5B}
.kind.recharge{background:#EDF6F0;color:var(--green)}
.kind.grant{background:#EDF6F0;color:var(--green)}
.kind.adjust{background:#FDF1E3;color:#9A5A11}

/* 手机：6 列的表在 390 上没法看（会横向滚动，客户不知道右边还有字）⇒ 改卡片列表。
   卡片里**保留「余额」** —— 它是对账的锚点。 */
.lcards{display:flex;flex-direction:column;gap:8px}
.lcard{background:#fff;border:1px solid var(--line);border-radius:12px;padding:10px 12px}
.lcard .t1{display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.lcard .t1 b{font-size:11.5px;flex:1;min-width:0}
.lcard .am{font-size:13px;font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}
.lcard .am.minus{color:var(--red)}
.lcard .am.plus{color:var(--green)}
.lcard .t2{font-size:10.5px;color:var(--faint);line-height:1.7;margin-top:5px}

/* ==================== 手机 390 ==================== */
@media (max-width:900px){
  .packs{grid-template-columns:1fr;gap:9px}
  .st3{grid-template-columns:1fr;gap:9px}
  .balpop{width:min(300px,calc(100vw - 28px))}
  /* 流水表在窄屏一律换成 `.lcards`（页面自己切换），表本身兜一手横向滚动 */
  .ltwrap{overflow-x:auto}
}