/* paike.onecat.xin —— 手机优先，一套页面电脑上也能看报表。
   不引任何框架：几百行 CSS 引个 Tailwind 只是多一条「构建没跑」的故障路径。 */

:root {
  --ink:      #1a1d21;
  --ink-2:    #5b6470;
  --ink-3:    #8b95a1;
  --line:     #e3e7ec;
  --bg:       #f5f6f8;
  --card:     #ffffff;
  --brand:    #2f6bd8;
  --brand-dk: #2456ad;
  --warn-bg:  #fff7e6;
  --warn-ln:  #f0d08a;
  --bad-bg:   #fdecec;
  --bad-ln:   #f0b4b4;
  --bad-ink:  #b3261e;
  --ok-bg:    #eaf6ee;
  --ok-ln:    #a8d8b9;
  --ok-ink:   #1c7a3e;
  --r:        10px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font: 15px/1.55 -apple-system, BlinkMacSystemFont, "PingFang SC",
        "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
  color: var(--ink);
  background: var(--bg);
  -webkit-text-size-adjust: 100%;
}

a { color: var(--brand); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ── 顶栏 ────────────────────────────────────────────────────────────── */
.bar {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 10px 14px;
  background: var(--card);
  border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 20;
}
.bar-brand { font-weight: 700; color: var(--ink); white-space: nowrap; }
.bar-nav { display: flex; gap: 4px; flex-wrap: wrap; flex: 1; }
.bar-nav a {
  padding: 7px 11px; border-radius: 999px; color: var(--ink-2); font-size: 14px;
}
.bar-nav a:hover { background: var(--bg); text-decoration: none; }
.bar-nav a.on { background: var(--brand); color: #fff; }
.bar-me { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.bar-me .who { font-weight: 600; }
.bar-me .tag {
  background: var(--bg); color: var(--ink-2);
  border: 1px solid var(--line); border-radius: 999px; padding: 2px 8px;
}
.inline { display: inline; margin: 0; }
.link {
  background: none; border: 0; padding: 0; cursor: pointer;
  color: var(--ink-3); font-size: 13px; font-family: inherit;
}
.link:hover { color: var(--bad-ink); text-decoration: underline; }

.wrap { max-width: 1100px; margin: 0 auto; padding: 14px; }

.foot {
  max-width: 1100px; margin: 0 auto; padding: 18px 14px 32px;
  color: var(--ink-3); font-size: 12px;
}

/* ── 卡片 ────────────────────────────────────────────────────────────── */
.card {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r);
  margin-bottom: 14px; overflow: hidden;
}
.card-pad { padding: 18px; }
.card-h {
  margin: 0; padding: 12px 14px; font-size: 14px; font-weight: 600;
  border-bottom: 1px solid var(--line); background: #fafbfc;
}
.center { text-align: center; }
.empty { padding: 18px 14px; color: var(--ink-3); margin: 0; }
.foot-note { margin: 0; padding: 10px 14px; color: var(--ink-3); font-size: 12px; }

/* ── 我的今天：顶部数字 ──────────────────────────────────────────────── */
.hero {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r);
  padding: 14px; margin-bottom: 14px;
}
.hero-date { color: var(--ink-3); font-size: 13px; }
.hero-nums { display: flex; gap: 10px; margin-top: 8px; }
.stat { flex: 1; }
.stat-n { font-size: 22px; font-weight: 700; letter-spacing: -.02em; }
.stat-l { color: var(--ink-3); font-size: 12px; margin-top: 2px; }

/* ── 表格（手机上横向滚，别把数字挤成两行）──────────────────────────── */
.tbl { width: 100%; border-collapse: collapse; font-size: 14px; }
.tbl th, .tbl td {
  padding: 9px 12px; text-align: left; border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
.tbl th { color: var(--ink-2); font-weight: 600; font-size: 13px; background: #fafbfc; }
.tbl tfoot td { font-weight: 700; background: #fafbfc; border-bottom: 0; }
.tbl .num { text-align: right; font-variant-numeric: tabular-nums; }
.tbl .strong { font-weight: 700; }
.tbl .dim { color: var(--ink-3); }
/* 漂移说明是一句话，不是一格数字。上面那句 `white-space: nowrap` 是给数字列
   定的（数字折成两行比横滑更糟），套到一句话上就把它整条顶出屏幕外 ——
   而这一句恰恰是「钱对不上」的那句，最不能看不全。 */
.tbl tr.drift-row td { white-space: normal; }

/* 手机上表格一定比屏幕宽，横向滚动比缩字号可读 */
.card > .tbl { display: block; overflow-x: auto; }

/* ── 表单 ────────────────────────────────────────────────────────────── */
.field { display: block; margin-bottom: 14px; }
.field-label { display: block; font-size: 13px; color: var(--ink-2); margin-bottom: 5px; }

/* 控件高度显式给 46px（≥44px 的触控下限）。**不要写 auto**：
   input/textarea 是原生组件，高度在原生层算，auto 等于交给它自己定，
   真机上会撑成一大块 —— 小程序仓的拍同款页就是这么坏的。 */
.field-input {
  display: block; width: 100%; height: 46px; padding: 0 12px;
  font: inherit; color: var(--ink);
  border: 1px solid var(--line); border-radius: 8px; background: #fff;
}
.field-input:focus { outline: 2px solid var(--brand); outline-offset: -1px; border-color: var(--brand); }
textarea.field-input { height: auto; min-height: 92px; padding: 10px 12px; line-height: 1.5; }
/* 备注这种「短、但会换行」的字段：上面那条 92px 是给录入页那些整段文字留的，
   备注两行就够（14px × 1.5 × 2 + 上下内边距 20 + 边框 2 = 66），
   撑到 92px 会让**每一个展开的客户行**都高一截，而这一页有二十多家。
   `resize: vertical` 是为了挡住横向拖拽：默认的 `both` 能被人拖出容器宽度，
   整页横向溢出，而页面上完全看不出是谁干的。 */
textarea.field-input.note { min-height: 66px; resize: vertical; }

.field-input.num { text-align: right; font-variant-numeric: tabular-nums; }
.field-input.big { height: 56px; font-size: 22px; font-weight: 700; }
.field-input[readonly] { background: #f7f8fa; color: var(--ink-2); }
/* 手改过的值标黄 —— 让「我改过这个数」在页面上一眼看得见，
   提交前能自己发现问题，而不是月底对账才发现 */
.field-input.edited { background: var(--warn-bg); border-color: var(--warn-ln); color: #8a5a00; }

.grid2 { display: flex; gap: 12px; }
.grid2 > .field { flex: 1; }

/* 下拉框下面那行提示。`<p>` 自带上下的 margin，会把表单节奏撑开，
   这里显式收掉 —— 它跟上面那个 label 是一组，不该自成一段。 */
.field-hint { margin: -8px 0 10px; font-size: 13px; color: var(--ink-2); line-height: 1.5; }
.field-hint b { color: var(--brand); }

/* 长得像链接的按钮：要能触发 JS，又不能在下拉框下面抢一个
   「跟提交按钮一样重」的视觉分量。 */
.link-btn {
  padding: 0; border: 0; background: none; font: inherit;
  color: var(--brand); text-decoration: underline; cursor: pointer;
}

/* 就地新建客户的小面板。
   ⚠️ **这里不给 `display`** —— 它靠 `hidden` 属性收起，任何一句
   `display:flex` 都会把 `hidden` 盖掉，面板一进页面就是展开的
   （小程序仓的 `.mask` 弹窗就是这么坏的）。 */
.new-cust {
  margin: 0 0 14px; padding: 12px;
  border: 1px solid var(--line); border-radius: 8px; background: #fafbfc;
}
.new-cust > .field-input + .field-input { margin-top: 8px; }
.new-cust-act { display: flex; gap: 8px; margin-top: 10px; }
.new-cust-act > .btn { flex: 1; }

.stepper { display: flex; gap: 8px; align-items: center; }
.stepper .field-input { text-align: center; }
.step {
  flex: 0 0 46px; width: 46px; height: 46px; padding: 0;
  font-size: 22px; line-height: 1; font-family: inherit;
  border: 1px solid var(--line); border-radius: 8px;
  background: #fff; color: var(--ink-2); cursor: pointer;
}
.step:active { background: var(--bg); }

.chips { display: flex; gap: 8px; flex-wrap: wrap; }
.chip input { position: absolute; opacity: 0; pointer-events: none; }
.chip span {
  display: block; padding: 10px 15px; min-height: 44px; line-height: 22px;
  border: 1px solid var(--line); border-radius: 999px;
  background: #fff; color: var(--ink-2); cursor: pointer; font-size: 14px;
}
.chip input:checked + span {
  background: var(--brand); border-color: var(--brand); color: #fff; font-weight: 600;
}
.chip input:focus-visible + span { outline: 2px solid var(--brand); outline-offset: 2px; }

.badge {
  display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 999px;
  font-size: 11px; font-weight: 400;
  background: var(--bg); color: var(--ink-3); border: 1px solid var(--line);
}
.badge-hot { background: var(--ok-bg); border-color: var(--ok-ln); color: var(--ok-ink); }
.badge-manual { background: var(--warn-bg); border-color: var(--warn-ln); color: #8a5a00; }

.actions { margin-top: 6px; }
.actions .btn + .btn { margin-top: 10px; }
.btn-ghost { background: #fff; color: var(--ink-2); }

.back { display: inline-block; margin-bottom: 10px; color: var(--ink-3); font-size: 14px; }
.btn-go { margin-top: 14px; }

.extra { border: 1px dashed var(--line); border-radius: var(--r); margin-bottom: 14px; }
.extra > summary {
  padding: 12px 14px; cursor: pointer; color: var(--ink-2); font-size: 14px;
}
.extra-body { padding: 0 14px 4px; }
.hint { margin: 0 0 12px; color: var(--ink-3); font-size: 12px; }

/* 提交后新录的那条插在这儿，不用刷新整页 */
.row {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 14px; border-bottom: 1px solid var(--line); font-size: 14px;
}
.row:last-child { border-bottom: 0; }
.row-c { flex: 0 0 auto; font-weight: 600; }
.row-i { flex: 0 0 auto; color: var(--ink-2); }
.row-q { flex: 0 0 auto; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.row-a { flex: 1; text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }
.row-x { flex: 0 0 auto; font-size: 13px; }

/* ── 按钮 ────────────────────────────────────────────────────────────── */
.btn {
  display: inline-block; min-height: 46px; padding: 0 18px;
  font: inherit; font-weight: 600; line-height: 46px;
  border: 1px solid var(--line); border-radius: 8px;
  background: #fff; color: var(--ink); cursor: pointer; text-align: center;
}
.btn:hover { text-decoration: none; }
.btn-primary { background: var(--brand); border-color: var(--brand); color: #fff; }
.btn-primary:hover { background: var(--brand-dk); }
.btn-block { display: block; width: 100%; }
.btn-danger { background: var(--bad-bg); border-color: var(--bad-ln); color: var(--bad-ink); }
.btn[disabled] { opacity: .5; cursor: not-allowed; }

/* ── 提示条 ──────────────────────────────────────────────────────────── */
.alert { padding: 10px 12px; border-radius: 8px; margin-bottom: 14px; font-size: 14px; }
.alert-bad  { background: var(--bad-bg);  border: 1px solid var(--bad-ln);  color: var(--bad-ink); }
.alert-warn { background: var(--warn-bg); border: 1px solid var(--warn-ln); color: #8a5a00; }
.alert-ok   { background: var(--ok-bg);   border: 1px solid var(--ok-ln);   color: var(--ok-ink); }

/* ── 登录页 ──────────────────────────────────────────────────────────── */
.login-body {
  display: flex; align-items: center; justify-content: center;
  min-height: 100vh; padding: 20px;
}
.login-card {
  width: 100%; max-width: 380px; background: var(--card);
  border: 1px solid var(--line); border-radius: 14px; padding: 26px 22px;
}
.login-title { margin: 0; font-size: 21px; text-align: center; }
.login-sub { margin: 4px 0 22px; text-align: center; color: var(--ink-3); font-size: 13px; }
.login-form { margin: 0; }
.login-hint { margin: 16px 0 0; color: var(--ink-3); font-size: 12px; text-align: center; }

/* ── 错误页 ──────────────────────────────────────────────────────────── */
.err-code { font-size: 44px; font-weight: 700; color: var(--ink-3); line-height: 1; }
.err-msg { margin: 10px 0 20px; color: var(--ink-2); }

/* ── 报表：工具条 / 分段 / 标记 ─────────────────────────────────────── */
.toolbar {
  display: flex; align-items: center; gap: 8px; margin-bottom: 10px; flex-wrap: wrap;
}
.toolbar-mid { flex: 1; display: flex; justify-content: center; }
.toolbar-mid .field-input { max-width: 190px; text-align: center; }
.toolbar-right { display: flex; gap: 8px; align-items: center; margin-left: auto; }
.btn-sm { min-height: 40px; line-height: 40px; padding: 0 12px; font-size: 13px; font-weight: 500; }

.filterbar {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r);
  padding: 10px 14px; margin-bottom: 12px;
}
.field-inline { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.field-inline .field-input { width: auto; min-width: 130px; }
.check input { width: 20px; height: 20px; }

.segs { display: inline-flex; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.seg { padding: 9px 16px; font-size: 14px; color: var(--ink-2); background: #fff; }
.seg:hover { text-decoration: none; background: var(--bg); }
.seg.on { background: var(--brand); color: #fff; font-weight: 600; }

.pill {
  display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 999px;
  font-size: 11px; background: var(--bg); color: var(--ink-3); border: 1px solid var(--line);
}
.pill-ok  { background: var(--ok-bg);  border-color: var(--ok-ln);  color: var(--ok-ink); }
.pill-bad { background: var(--bad-bg); border-color: var(--bad-ln); color: var(--bad-ink); }
.pill-warn{ background: var(--warn-bg);border-color: var(--warn-ln);color: #8a5a00; }

.card-h-r { float: right; font-weight: 700; }
.blk { border-top: 1px solid var(--line); }
.blk:first-of-type { border-top: 0; }
.blk-h {
  display: flex; align-items: center; padding: 9px 14px;
  background: #fcfcfd; font-size: 14px; font-weight: 600;
}
.blk-r { margin-left: auto; font-weight: 700; }

.grand {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r);
  padding: 14px; text-align: right; font-size: 16px;
}
.grand b { font-size: 20px; }

/* 合计行里的数字比正文重一档 —— 报表页第一眼看的就是它 */
.tbl tfoot td { font-size: 14px; }

/* ── 设置 ───────────────────────────────────────────────────────────── */
/* 四个设置页共用一条标签条。**它能横滑**：四个标签在 360px 的安卓机上
   差几个像素放不下，换行会把内容再往下推一行（而这一条每页都在顶上）。
   宁可让它滑，也不让它换行。 */
.segs-tabs {
  display: flex; overflow-x: auto; margin-bottom: 12px;
  -webkit-overflow-scrolling: touch;
}
.segs-tabs .seg { white-space: nowrap; flex: 0 0 auto; }

/* 设置页里一行一个客户/员工，所以是「块」不是表格 ——
   表格在手机上要么横滑、要么把输入框挤成一条缝。
   块头是只读的一行（名字 + 各组标签），块身才是能改的那几个字段。 */
/* 客户档案那一页每格是 `<details>`，收起时整页就是一行一家的清单。
   `summary` 上原来的三角在部分浏览器里跟着 `display: flex` 一起消失，
   所以自己画一个 —— 顺手让它转 90° 表示展开了。
   注意 `list-style: none` 要连 `::-webkit-details-marker` 一起清，
   否则 Chrome 上会同时出现两个三角。 */
.blk > summary { cursor: pointer; list-style: none; }
.blk > summary::-webkit-details-marker { display: none; }
.blk-caret {
  display: inline-block; width: 14px; margin-right: 4px;
  color: var(--ink-3); font-size: 12px; transition: transform .12s;
}
.blk[open] > summary { background: var(--bg); }
.blk[open] > summary .blk-caret { transform: rotate(90deg); }

.blk-body { padding: 12px 14px 14px; }
.blk-body .field + .field { margin-top: 8px; }
.blk-body .grid2 .field + .field { margin-top: 0; }
.blk-body .field-input { font-size: 14px; min-height: 40px; }

.alias-line {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  margin-top: 10px; font-size: 13px; color: var(--ink-3);
}
.alias-line .field-label { margin-right: 2px; }
.alias-line .pill { margin-left: 0; }
/* 别名尾巴上那个 ×：它在一个 11px 的药丸里，不撑高但要点得着 */
.alias-line .link { padding: 0 2px; font-size: 14px; line-height: 1; color: var(--ink-3); }

/* 分组那一行：名字 + 计数 + 三个按钮横着排。
   **不能复用 `.actions`** —— 那个是竖着堆的（`.actions .btn + .btn` 给它加了
   `margin-top`），手机上表单按钮就该竖着堆，但这里一页可能有好几个组，
   每组竖着占四行会把这一段撑得比上面整张客户列表还长。
   输入框压到 40px 是为了跟 `.btn-sm` 齐平（它也是 40px），
   不压的话一行里最高的那个决定行高，按钮会浮在输入框中间显得歪。

   **加边框不是为了好看**：这一行在手机上会折成两行，而自由折行时
   「删除」正好被挤到第二行独自一个 —— 它于是落在两个组中间，
   上下的名字离它一样近。给它一个可见的框，折到哪儿都还在自己那一格里。 */
.grp-line {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  border: 1px solid var(--line); border-radius: 8px; background: #fff;
  padding: 8px 10px; margin-bottom: 8px;
}
.grp-line > .field-input { width: auto; flex: 1 1 120px; min-width: 110px; height: 40px; }
.grp-line > .pill, .grp-line > .dim { flex: 0 0 auto; margin-left: 0; }

/* 三个按钮包成一个**不可拆的**整体：`flex: 0 0 auto` 让它整体换行。
   不包的话「删除」会单独折到下一行，掉进两个组中间（见上面 `.grp-line` 那段）。 */
.grp-btns { display: flex; gap: 8px; flex: 0 0 auto; }
.grp-btns > .btn { flex: 0 0 auto; }

/* 单价表的格子。整格是一个按钮 —— 点哪儿都能改价，
   不用先选中再点「编辑」。`is-own` 是谈过的特价，加粗跟标准价区分开。 */
.tbl-price .cell {
  display: inline-block; min-width: 64px; padding: 6px 8px;
  border: 1px solid transparent; border-radius: 6px; background: none;
  font: inherit; color: var(--ink-2); cursor: pointer;
}
.tbl-price .cell:hover { border-color: var(--line); background: var(--bg); }
.tbl-price .cell.is-own { font-weight: 700; color: var(--ink); }
.tbl-price .cell-ro { display: inline-block; padding: 6px 8px; color: var(--ink-2); }
.tbl-price .cell-ro.is-own { font-weight: 700; color: var(--ink); }
.tbl-price .unit { font-weight: 400; font-size: 11px; color: var(--ink-3); }
.tbl-price .std-row { background: #fcfcfd; }
.tbl-price .std-row td { border-bottom: 2px solid var(--line); }

/* 单价表横滑时，**客户名必须还在**，否则看到一排 ¥100 却不知道是谁的价 ——
   这一列是整张表的行号。粘住它，底色要跟卡片同色（透明的话数字会从底下透出来）。
   ⚠️ 窄屏上这张表已经不横滑了（见 640px 段），这条现在是**兜底**：
   将来有人加了第 5 个项目类型、或哪个客户名特别长，表格还能自己滚。
   横滑时紧挨着的那一列会被压在粘性列下面（「¥200」只剩「00」），
   底下那条软阴影就是给这个用的 —— 让人看出「底下还有东西」，而不是「数坏了」。 */
.tbl-price th:first-child,
.tbl-price td:first-child {
  position: sticky; left: 0; z-index: 1;
  background: var(--card);
  box-shadow: 1px 0 0 var(--line), 6px 0 8px -6px rgba(0, 0, 0, .18);
}
/* 粘性那一格的底色是**卡片色**，可表头那一行本来是灰的（`.tbl th` 的 #fafbfc）。
   不补这一条，「客户」这一格就是白的、右边四格是灰的，表头像被切掉了一块。 */
.tbl-price th:first-child { background: #fafbfc; }
.tbl-price .std-row td:first-child { background: #fcfcfd; }

/* 表单里的下拉框要跟输入框一样高：`.field-input` 的 padding 是给
   input 定的，select 不设 height 会比旁边的 input 矮 4px，
   两个并排时看得见（编辑员工那一页就是并排的）。 */
select.field-input { min-height: 44px; }

/* ── 对账单 ─────────────────────────────────────────────────────────── */
/* 这一页是**发给客户、要打出来**的，跟满屏工具栏的报表页要求相反：
   抬头要像个抬头，四周要留白，屏幕上看着「空」是对的。 */
.stmt-head { padding: 22px 14px 14px; text-align: center; }
.stmt-co {
  color: var(--ink-2); font-size: 13px; letter-spacing: .18em;
}
.stmt-title { margin: 6px 0 8px; font-size: 20px; letter-spacing: .04em; }
.stmt-meta {
  display: flex; gap: 14px; justify-content: center; flex-wrap: wrap;
  color: var(--ink-3); font-size: 13px;
}
/* 合计行上面加一道粗线 —— 纸上「这是总数」全靠它 */
.card > .tbl tfoot td { border-top: 2px solid var(--ink); }

/* ── 打印（对账单）──────────────────────────────────────────────────── */
/* 页边距交给 @page：靠 .wrap 的 padding 撑出来的边距，
   第二页开始就没有了（padding 只在容器首尾生效）。
   **@page 必须写在最外层** —— 塞进 @media 里浏览器整条丢掉，而且不报错。 */
@page { margin: 14mm; }

@media print {
  .bar, .foot, .no-print { display: none !important; }
  body { background: #fff; }
  .wrap { max-width: none; padding: 0; }
  .card { border: 0; }
  .card > .tbl { overflow: visible; display: table; }
  .tbl th, .tbl td { white-space: normal; }
  .stmt-head { padding-top: 0; }
}

/* ── 对账单：手机上也要五列放得下 ───────────────────────────────────── */
/* 手机上一屏只有 390px，「金额」这一列**必须**不用横滑就看得见 ——
   对账单上唯一不能藏的就是钱。默认的 9px/12px 内边距五列要 434px，
   收到 6px 后是 ~327px，放得下；真遇到超长客户名还有横滑兜底。 */
.tbl-stmt th, .tbl-stmt td { padding: 9px 6px; font-size: 13px; }
.tbl-stmt th:first-child, .tbl-stmt td:first-child { padding-left: 12px; }
.tbl-stmt th:last-child, .tbl-stmt td:last-child { padding-right: 12px; }

/* ── 结算台：手机上不横滑，一行拆成两行 ─────────────────────────────── */
/* 结算台跟报表不一样：报表是一整片要横着比对的数字，横滑是对的；
   结算台每一行只有一件事要做 —— **按那个按钮**。收款时人站在客户跟前，
   而按钮在第四列、390px 上根本不在屏内（量出来横滑 293px），
   金额还被切在「305」这种半截数上 —— 屏幕在骗人的那种骗法。
   所以窄屏下把每行拆成「付款方 + 应付」和「状态 + 操作」两行，
   按钮和钱都不需要横滑。**只动这一张表**，别碰 .tbl-stmt（对账单那边
   已经量过是 0 溢出，跟着改会把它弄坏）。 */
@media (max-width: 640px) {
  /* 横滑（`.card > .tbl` 的 overflow-x:auto）留着当兜底：
     万一哪个客户名长得离谱，表格自己滚，别把整页撑宽。
     两行的排法本来就不该触发它。 */
  .tbl-settle thead { display: none; }
  .tbl-settle tbody, .tbl-settle tfoot, .tbl-settle tr { display: block; }
  .tbl-settle tr {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    padding: 10px 12px;
  }
  .tbl-settle td { display: block; padding: 0; border-bottom: 0; }
  .tbl-settle tbody tr { border-bottom: 1px solid var(--line); }
  /* 显式的 grid-column 排成 1-2 / 1-2：左列是名目，右列是数字和按钮。
     屏幕再窄也只会把两行各自撑高，不会把右列挤出去。 */
  .tbl-settle td:nth-child(1) { grid-column: 1; grid-row: 1; }
  .tbl-settle td:nth-child(2) { grid-column: 2; grid-row: 1; }
  .tbl-settle td:nth-child(3) { grid-column: 1; grid-row: 2; }
  .tbl-settle td:nth-child(4) { grid-column: 2; grid-row: 2; text-align: right; }
  .tbl-settle .drift-row td { grid-column: 1 / -1; grid-row: auto; }
  .tbl-settle .drift-row { display: block; }
  .tbl-settle .js-settle { min-width: 96px; }

  /* ── 单价表：压进屏幕，不横滑 ─────────────────────────────────────
     这张表是「21 家 × 4 个项目类型」的矩阵，390px 上原本宽出 141px。
     横滑本身能忍，**忍不了的是滑到右边之后**：紧挨着客户名的那一列被压在
     粘性列底下，「¥200」显示成「00」、表头「脚本拍摄/条」显示成「摄/条」——
     一眼看过去像数坏了，而不像「右边还有」。
     既然只宽出 141px，那就别滑了：表头两行（名字一行、单位一行）、
     客户名允许折行、把 12px 的列内边距收到 5px。量过：390 / 360 / 414
     三种宽度下溢出都是 0，21 行里最高的一行 53px，没有一个客户名被折成两行
     （最长的「猎户座星空鲜货串烧」7 个字 = 126px，客户列 136px 装得下）。

     单位必须留在表头：活动拍摄是「次」、其余是「条」，这是差一个数量级的事
     （400/次 vs 400/条），收成一行反而看不清。所以是**换行不是删掉**。 */
  .tbl-price th, .tbl-price td { padding: 8px 5px; }
  .tbl-price th { font-size: 12px; white-space: normal; }
  .tbl-price .unit { display: block; font-size: 10px; }
  /* 客户名可以折行，但**数字列不行** —— .tbl 那句 nowrap 是给数字定的，
     放宽的只有第一列。 */
  .tbl-price td:first-child { white-space: normal; }
  /* 整格铺满：点得到的地方从「¥60」三个字扩到整个格子。
     高度给到 44px —— 这格子是这一页唯一的操作，摸不到等于这一页不能用。 */
  .tbl-price .cell, .tbl-price .cell-ro {
    display: flex; align-items: center; justify-content: flex-end;
    box-sizing: border-box; width: 100%; min-height: 44px; padding: 3px;
    /* 桌面那条 `min-width: 64px` 必须清掉：4 列 × 64 + 客户列 = 又溢出 */
    min-width: 0;
  }

  /* ── 明细表（客户/项目/数量/单价/金额/备注/改）：最后那一列是「改」──
     这张表窄屏上撑出卡片：`/me` 上 +102px、日表上 +50px（360px 量出来的）。
     症状跟单价表那次不一样 —— **不是滑不到，是根本滑不动**：
     日表那张表在 `.blk` 里，不是 `.card > .tbl` 的近子元素，
     所以没有 `overflow-x: auto` 那个滚动容器，它直接撑出卡片、被页面裁掉。
     360px 上「改」整格都在屏幕外，员工录错了找不回来。
     （`/me` 那张有滚动容器，能滑，但没人知道右边还有东西。）

     治法跟单价表一样：把 12px 的列内边距收到 6px（7 列省 84px），
     再让**备注**折行 —— 备注是一句话，不是数字（这个道理这条文件里
     早就写在 `.drift-row` 那一段了）。量过：360 / 390 / 414 三种宽度下
     两张表都不再撑出去。

     **不给它定宽**：既然是 `width: 100%` 的自动布局，放开 nowrap 之后
     浏览器自己就把备注收到 64px 左右（量过 360 / 390 两个宽度都是 64），
     写死一个 `max-width` 只是把一个量出来的数变成一个人为的数，
     下次字号一改它就成了错的。

     ⚠️ 只能点名 `td.note`，**不能用 `nth-last-child(2)`**：在「已作废」那张表上
     倒数第二列是**金额**，那样会顺手把金额也变成可折行的。 */
  .tbl-detail th, .tbl-detail td { padding: 8px 6px; }
  .tbl-detail td.note { white-space: normal; }

  /* ── 已作废那块：同样压进屏幕 ─────────────────────────────────────
     5 列（谁/客户/项目/金额/撤回），360px 上原本宽出 65px，
     于是**「撤回」被挤出屏幕右边** —— 而那正是这一块存在的唯一理由
     （`/me` 上写着「去找日表撤回」）。撑宽的不是内容，是内边距：
     12px × 2 × 5 列 = 120px。收到 6px 就够它站住。
     量过：360 / 390 / 414 三个宽度下溢出都是 0。

     客户名和项目名允许折行，**金额列继续 nowrap** —— 金额折成两行比横滑更难读。 */
  .tbl-voided th, .tbl-voided td { padding: 8px 6px; }
  .tbl-voided td:nth-child(2), .tbl-voided td:nth-child(3) { white-space: normal; }
  /* 撤回整格可点。这一块里唯一能做的事就是把删错的东西拿回来，
     而按钮本身只有 52px 宽（`撤回` 两个字 + 内边距），手指按不准。 */
  .tbl-voided td:last-child { padding: 2px 4px; }
  .tbl-voided .js-unvoid {
    display: flex; align-items: center; justify-content: center;
    box-sizing: border-box; width: 100%; min-width: 0;
    min-height: 44px; line-height: 1.2; padding: 0 6px;
  }
}

@media (max-width: 640px) {
  .bar { gap: 8px; padding: 8px 10px; }
  /* 窄屏把品牌整个收掉（不只是后缀）：主管以上有 6 个导航格，
     390px 上量出来品牌 42px + 6 格 298px + 用户名 60px 装不下，
     第 6 格会掉到第二行 —— 而顶栏是**每一页**都粘在顶上的，
     多一行就是每一页少 28px 的正文高度。
     品牌这一格是回首页的链接，而「今天」那个格子对员工就是首页，收掉不丢功能。 */
  .bar-brand { display: none; }
  /* 品牌后缀和角色标签也是同理：看一眼就够的信息，手机上看不看都行 */
  .bp-extra { display: none; }
  .bar-me .tag { display: none; }
  .bar-nav a { padding: 6px 8px; font-size: 13px; }
  .wrap { padding: 10px; }
  .stat-n { font-size: 19px; }
}