/* ==========================================================================
 * 业务模块样式（应收账款 / 票税一览 / 人员档案 / 经营看板 / 开标中心）
 *
 * 与 pages.css 分开，是因为这五块是 2026-10 之后新加的、彼此共享同一套
 * 「结论数字 + 明细行」的骨架；混进 pages.css（1800 行）里会找不到。
 *
 * 只读页面的视觉约定（全文件通用）：
 *   · 金额右对齐 + tabular-nums（`.num`），数字上下对得齐；
 *   · 正文 ≥ 12.5px、点击热区 ≥ 44px：手机在工地上单手点；
 *   · 不用彩色整块底表达"不同"，只用一处色点 / 一条胶囊 —— 满屏底色会让人找不到重点。
 * ========================================================================== */

/* --------------------------------------------------------------------------
 * 0. 通用小件
 * ------------------------------------------------------------------------ */
.num {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}

.is-danger {
  color: var(--danger);
}

/* 底部选择器（月份 / 账龄 / 逾期状态共用） */
.pick-list {
  padding: 2px 0 8px;
}

.pick-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: 48px;
  padding: 0 4px;
  font-size: 14.5px;
  color: var(--ink-800);
  text-align: left;
  border-bottom: 1px solid var(--line);
}

.pick-item:last-child {
  border-bottom: 0;
}

.pick-item.is-active {
  color: var(--brand);
  font-weight: 700;
}

.pick-item svg {
  color: var(--brand);
}

/* --------------------------------------------------------------------------
 * 1. 应收账款
 * ------------------------------------------------------------------------ */
.page--ar {
  /* 账龄四段光谱：绿 → 黄 → 橙 → 红。
     刻意定义为**页面私有**变量而不进 :root：这四色是"从健康到危险"的语义，
     换品牌色时不该跟着变，也不该被别的页面随手拿去当装饰色。 */
  --aging-1: #34c759;
  --aging-2: #ffcc00;
  --aging-3: #ff9500;
  --aging-4: #ff3b30;
  padding-bottom: 8px;
}

.page-hd--ar .page-hd__row {
  align-items: center;
  gap: 10px;
}

.page-hd__grow {
  flex: 1;
  min-width: 0;
}

.page-hd__grow .page-hd__title {
  font-size: 17.5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 月份切换：一个胶囊而不是下拉框 —— 手机上原生 select 在微信/企业微信里样式不可控 */
.ar-month {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 32px;
  padding: 0 10px;
  border-radius: 16px;
  background: #fff;
  border: 1px solid var(--line-strong);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink-700);
  white-space: nowrap;
}

.ar-month svg {
  color: var(--ink-400);
}

/* ---- KPI 四张卡：横滑，卡宽固定 150px ----
   写成横滑而不是 2×2 网格：2×2 会把「应收总额 49,110 万」挤成两行，
   而这一屏的四个数是同一层级，应该并排着比大小。 */
.ar-kpi {
  margin-top: 4px;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.ar-kpi::-webkit-scrollbar {
  display: none;
}

.ar-kpi__row {
  display: inline-flex;
  gap: 9px;
  padding: 4px var(--gutter) 2px;
}

.ark {
  width: 150px;
  padding: 12px 12px 11px;
  border-radius: 14px;
  background: var(--surface);
  box-shadow: var(--sh-1);
  border: 1px solid var(--line);
}

.ark__label {
  font-size: 11.5px;
  color: var(--ink-500);
  letter-spacing: 0.2px;
}

.ark__num {
  display: flex;
  align-items: baseline;
  gap: 3px;
  margin-top: 6px;
}

.ark__num b {
  font-size: 21px;
  font-weight: 800;
  color: var(--ink-900);
  letter-spacing: -0.4px;
  font-variant-numeric: tabular-nums;
}

.ark__num span {
  font-size: 10.5px;
  color: var(--ink-400);
  font-weight: 600;
}

.ark__sub {
  margin-top: 5px;
  font-size: 10.5px;
  color: var(--ink-400);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ark--danger {
  border-color: #f6d5d5;
  background: linear-gradient(180deg, #fffafa 0%, #fff 60%);
}

.ark--danger .ark__num b {
  color: var(--danger);
}

/* ---- 通用分区 ---- */
.ar-sec {
  margin: 14px var(--gutter) 0;
  padding: 14px 14px 12px;
  background: var(--surface);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-1);
  border: 1px solid var(--line);
}

.ar-sec__hd {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 11px;
}

.ar-sec__t {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--ink-900);
}

.ar-sec__hint {
  font-size: 10.5px;
  color: var(--ink-400);
  text-align: right;
}

/* ---- 账龄四段条 ---- */
.ar-aging__bar {
  display: flex;
  gap: 3px;
  height: 10px;
  border-radius: 5px;
  overflow: hidden;
  background: var(--surface-2);
}

.ar-aging__seg {
  display: block;
  flex-basis: 0;
  min-width: 0;
  border-radius: 3px;
  transition: flex-grow 0.3s var(--ease);
}

.ar-aging__seg--1 {
  background: var(--aging-1);
}
.ar-aging__seg--2 {
  background: var(--aging-2);
}
.ar-aging__seg--3 {
  background: var(--aging-3);
}
.ar-aging__seg--4 {
  background: var(--aging-4);
}

.ar-aging__empty {
  padding: 10px 0 4px;
  font-size: 12px;
  color: var(--ink-400);
}

/* 图例写成四行小表：桶名定宽、金额右对齐、份数定宽，三列才不会互相推挤 */
.ar-aging__legend {
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.ar-aging__row {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  color: var(--ink-600);
}

.ar-aging__dot {
  width: 7px;
  height: 7px;
  border-radius: 2px;
  flex: none;
}

.ar-aging__dot--1 {
  background: var(--aging-1);
}
.ar-aging__dot--2 {
  background: var(--aging-2);
}
.ar-aging__dot--3 {
  background: var(--aging-3);
}
.ar-aging__dot--4 {
  background: var(--aging-4);
}

.ar-aging__l {
  width: 74px;
  flex: none;
  color: var(--ink-700);
}

.ar-aging__amt {
  flex: 1;
  text-align: right;
  font-weight: 700;
  color: var(--ink-900);
}

.ar-aging__cnt {
  width: 38px;
  flex: none;
  text-align: right;
  color: var(--ink-400);
  font-size: 11px;
}

/* ---- 逾期提醒条 ---- */
.ar-risk {
  display: flex;
  gap: 9px;
  margin: 12px var(--gutter) 0;
  padding: 11px 13px;
  border-radius: var(--r-md);
  border: 1px solid transparent;
}

.ar-risk__dot {
  width: 8px;
  height: 8px;
  margin-top: 5px;
  border-radius: 50%;
  flex: none;
}

.ar-risk__title {
  font-size: 13px;
  font-weight: 700;
  line-height: 1.35;
}

.ar-risk__sub {
  margin-top: 3px;
  font-size: 11.5px;
  line-height: 1.45;
  color: var(--ink-500);
}

.ar-risk--ok {
  background: var(--ok-50);
  border-color: #cdebd8;
}
.ar-risk--ok .ar-risk__dot {
  background: var(--ok);
}
.ar-risk--ok .ar-risk__title {
  color: #14683a;
}

.ar-risk--warn {
  background: var(--warn-50);
  border-color: #f6e0bd;
}
.ar-risk--warn .ar-risk__dot {
  background: var(--warn);
}
.ar-risk--warn .ar-risk__title {
  color: #8a4c05;
}

.ar-risk--danger {
  background: var(--danger-50);
  border-color: #f6d5d5;
}
.ar-risk--danger .ar-risk__dot {
  background: var(--danger);
}
.ar-risk--danger .ar-risk__title {
  color: #8c1d1d;
}

/* ---- 两行下钻入口 ---- */
.ar-links {
  margin: 12px var(--gutter) 0;
  background: var(--surface);
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  box-shadow: var(--sh-1);
  overflow: hidden;
}

.ar-link {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 60px;
  padding: 11px 13px;
  text-align: left;
}

.ar-link + .ar-link {
  border-top: 1px solid var(--line);
}

.ar-link__l {
  flex: 1;
  min-width: 0;
}

.ar-link__l b {
  display: block;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--ink-900);
}

.ar-link__l small {
  display: block;
  margin-top: 3px;
  font-size: 11px;
  color: var(--ink-400);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ar-link__v {
  font-size: 14px;
  font-weight: 800;
  color: var(--ink-900);
  white-space: nowrap;
}

.ar-link svg {
  color: var(--ink-300);
  flex: none;
}

/* ---- 口径脚注 ---- */
.ar-note {
  margin: 14px var(--gutter) 0;
  padding: 11px 13px;
  border-radius: var(--r-md);
  background: var(--surface-2);
  border: 1px dashed var(--line-strong);
  font-size: 11px;
  line-height: 1.7;
  color: var(--ink-500);
}

.ar-note b {
  color: var(--ink-700);
}

.ar-foot {
  display: flex;
  justify-content: center;
  padding: 16px 0 4px;
}

/* --------------------------------------------------------------------------
 * 2. 应收列表
 * ------------------------------------------------------------------------ */
.ar-filters {
  display: flex;
  gap: 7px;
  margin-top: 10px;
  overflow-x: auto;
  scrollbar-width: none;
}

.ar-filters::-webkit-scrollbar {
  display: none;
}

.ar-chip {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  height: 32px;
  padding: 0 10px;
  flex: none;
  border-radius: 16px;
  background: #fff;
  border: 1px solid var(--line-strong);
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-600);
}

.ar-chip svg {
  transform: rotate(90deg);
  color: var(--ink-300);
}

.ar-chip--on {
  background: var(--brand-50);
  border-color: #c9d9ff;
  color: var(--brand-700);
}

.ar-chip--on svg {
  color: var(--brand);
}

.ar-sum {
  margin-top: 10px;
  font-size: 11.5px;
  color: var(--ink-500);
}

.ar-sum b {
  color: var(--ink-900);
  font-weight: 700;
}

.ar-sum b.is-danger {
  color: var(--danger);
}

.ar-list {
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding: 4px var(--gutter) 0;
}

/* ---- 应收卡片 ---- */
.arc {
  padding: 13px 13px 11px;
  border-radius: var(--r-lg);
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--sh-1);
}

/* 逾期卡用一条左边框标记，不整块染红、也不把未收金额染红：
   列表里一次出现五六张红字卡片时，人就分不出哪一张真的更急。
   染色只保留在「账龄 / 逾期」两个状态值与状态胶囊上，它们才是有分级含义的。 */
.arc--overdue {
  border-left: 3px solid var(--danger);
  padding-left: 11px;
}

.arc__hd {
  display: flex;
  align-items: flex-start;
  gap: 7px;
}

.arc__dot {
  width: 8px;
  height: 8px;
  margin-top: 6px;
  border-radius: 50%;
  flex: none;
}

.arc__dot--ok {
  background: var(--ok);
}
.arc__dot--danger {
  background: var(--danger);
}
.arc__dot--muted {
  background: var(--ink-300);
}

.arc__who {
  flex: 1;
  min-width: 0;
}

.arc__cust {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--ink-900);
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.arc__proj {
  margin-top: 3px;
  font-size: 11.5px;
  color: var(--ink-400);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.arc__nums {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 10px;
  margin-top: 11px;
}

.arc__main {
  min-width: 0;
}

.arc__amt {
  font-size: 20px;
  font-weight: 800;
  color: var(--ink-900);
  letter-spacing: -0.3px;
  line-height: 1.1;
}

.arc__amt-l {
  margin-top: 3px;
  font-size: 10.5px;
  color: var(--ink-400);
}

.arc__side {
  text-align: right;
  font-size: 11px;
  color: var(--ink-400);
  line-height: 1.65;
  white-space: nowrap;
}

.arc__side b {
  color: var(--ink-700);
  font-weight: 700;
}

.arc__states {
  display: flex;
  gap: 0;
  margin-top: 11px;
  padding-top: 9px;
  border-top: 1px dashed var(--line);
}

/* 两列各占一半、各两行（值 + 说明）。
   原来写成一行四段「账龄 129 天 90+ 逾期 239 天 …」时会连成一串，
   用户读不出哪两个数是一对 —— 而这两对数恰好是两套不同的判断。 */
.arc__state {
  flex: 1;
  min-width: 0;
  padding-right: 8px;
}

.arc__state + .arc__state {
  padding-left: 10px;
  padding-right: 0;
  border-left: 1px solid var(--line);
}

.arc__state-row {
  display: flex;
  align-items: baseline;
  gap: 5px;
  font-size: 11px;
}

.arc__state-l {
  color: var(--ink-400);
  flex: none;
}

.arc__state-v {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  font-size: 12.5px;
}

.arc__state-v--ok {
  color: var(--ok);
}
.arc__state-v--brand {
  color: var(--brand);
}
.arc__state-v--warn {
  color: var(--warn);
}
.arc__state-v--danger {
  color: var(--danger);
}
.arc__state-v--muted {
  color: var(--ink-400);
}

.arc__state-t {
  margin-top: 2px;
  color: var(--ink-400);
  font-size: 10px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ar-more {
  display: flex;
  justify-content: center;
  padding: 14px 0 4px;
}

.ar-more__end {
  font-size: 11px;
  color: var(--ink-300);
}

.ar-empty {
  padding: 14px 0;
  font-size: 12px;
  color: var(--ink-400);
}

/* --------------------------------------------------------------------------
 * 3. 应收明细
 * ------------------------------------------------------------------------ */
.ar-hero {
  margin: 4px var(--gutter) 0;
  padding: 14px;
  border-radius: var(--r-lg);
  background: linear-gradient(170deg, #f7faff 0%, #fff 55%);
  border: 1px solid var(--line);
  box-shadow: var(--sh-1);
}

.ar-hero__name {
  font-size: 14.5px;
  font-weight: 700;
  color: var(--ink-900);
  line-height: 1.4;
}

/* 四格金额：2×2。分成四格而不是一行四列 —— 一行四列时 12,860 万元这种数字会被压成两行 */
.ar-mtx {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  margin-top: 12px;
  background: var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
}

.ar-mtx__cell {
  padding: 10px 11px;
  background: var(--surface);
}

.ar-mtx__l {
  font-size: 10.5px;
  color: var(--ink-400);
}

.ar-mtx__v {
  margin-top: 4px;
  font-size: 15px;
  font-weight: 800;
  color: var(--ink-900);
  letter-spacing: -0.2px;
}

.ar-mtx__cell.is-danger .ar-mtx__v {
  color: var(--danger);
}

/* ---- 关键日期两条 ---- */
.ar-date {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 0;
  border-bottom: 1px dashed var(--line);
}

.ar-date:last-child {
  border-bottom: 0;
  padding-bottom: 2px;
}

.ar-date__l {
  flex: 1;
  min-width: 0;
}

.ar-date__k {
  font-size: 11.5px;
  color: var(--ink-500);
  font-weight: 600;
}

.ar-date__v {
  margin-top: 3px;
  font-size: 15px;
  font-weight: 700;
  color: var(--ink-900);
}

.ar-date__from {
  margin-top: 3px;
  font-size: 10px;
  color: var(--ink-300);
}

.ar-date__r {
  text-align: right;
  flex: none;
}

.ar-date__cap {
  font-size: 9.5px;
  color: var(--ink-300);
  margin-bottom: 4px;
}

.ar-date__bucket {
  margin-top: 4px;
  font-size: 10px;
  color: var(--ink-400);
}

.ar-pill {
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 9px;
  border-radius: 12px;
  font-size: 11.5px;
  font-weight: 700;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.ar-pill--ok {
  background: var(--ok-50);
  color: #14683a;
}
.ar-pill--brand {
  background: var(--brand-50);
  color: var(--brand-700);
}
.ar-pill--warn {
  background: var(--warn-50);
  color: #8a4c05;
}
.ar-pill--danger {
  background: var(--danger-50);
  color: #8c1d1d;
}
.ar-pill--muted {
  background: var(--surface-2);
  color: var(--ink-400);
}

/* ---- 回款计划逐期 ---- */
.ar-stages {
  display: flex;
  flex-direction: column;
}

.ar-stage + .ar-stage {
  border-top: 1px dashed var(--line);
}

.ar-stage__hd {
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 56px;
  padding: 8px 0;
}

.ar-stage__seq {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  flex: none;
  border-radius: 6px;
  background: var(--brand-50);
  color: var(--brand-700);
  font-size: 11px;
  font-weight: 700;
}

.ar-stage__main {
  flex: 1;
  min-width: 0;
}

.ar-stage__name {
  font-size: 13px;
  font-weight: 700;
  color: var(--ink-900);
  display: flex;
  align-items: center;
  gap: 6px;
}

.ar-stage__ratio {
  font-size: 10px;
  font-weight: 600;
  color: var(--ink-400);
  background: var(--surface-2);
  padding: 1px 5px;
  border-radius: 4px;
}

.ar-stage__sub {
  margin-top: 3px;
  font-size: 10.5px;
  color: var(--ink-400);
}

.ar-stage__nums {
  text-align: right;
  flex: none;
}

.ar-stage__amt {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--ink-800);
}

.ar-stage__rest {
  margin-top: 2px;
  font-size: 10px;
  color: var(--ink-400);
}

.ar-stage__caret {
  display: inline-flex;
  flex: none;
  color: var(--ink-300);
  transition: transform 0.2s var(--ease);
}

.ar-stage.is-open .ar-stage__caret {
  transform: rotate(90deg);
}

.ar-stage__bd {
  padding: 0 0 10px 29px;
}

.ar-stage__line {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-size: 11px;
  color: var(--ink-400);
  padding: 3px 0;
}

.ar-stage__line b {
  color: var(--ink-700);
  font-weight: 600;
  text-align: right;
  word-break: break-all;
}

.ar-stage__flow {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 4px 0;
  font-size: 11.5px;
  color: var(--ink-600);
}

.ar-stage__flow b {
  margin-left: auto;
  font-weight: 700;
  color: var(--ink-800);
}

.ar-stage__way {
  font-size: 10px;
  color: var(--ink-400);
  background: var(--surface-2);
  padding: 1px 5px;
  border-radius: 4px;
}

/* ---- 全部回款流水（可折叠） ---- */
.ar-flows {
  margin: 0;
}

.ar-flows__hd {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: 44px;
  font-size: 12.5px;
  color: var(--ink-600);
  text-align: left;
}

.ar-flows__hd b {
  margin-left: auto;
  font-size: 13px;
  font-weight: 800;
  color: var(--ink-900);
}

.ar-flows__caret {
  display: inline-flex;
  color: var(--ink-300);
  transition: transform 0.2s var(--ease);
}

.ar-flows__hd.is-open .ar-flows__caret {
  transform: rotate(90deg);
}

.ar-flows__bd {
  padding-top: 4px;
}

.ar-flows__row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 5px 0;
  font-size: 11.5px;
  color: var(--ink-600);
  border-bottom: 1px dashed var(--line);
}

.ar-flows__row:last-child {
  border-bottom: 0;
}

.ar-flows__row b {
  margin-left: auto;
  font-weight: 700;
  color: var(--ink-900);
}

.ar-flows__way {
  font-size: 10px;
  color: var(--ink-400);
  background: var(--surface-2);
  padding: 1px 5px;
  border-radius: 4px;
}

/* ---- 只读横幅 ---- */
.ar-lock {
  display: flex;
  align-items: center;
  gap: 7px;
  width: calc(100% - var(--gutter) * 2);
  min-height: 46px;
  margin: 14px var(--gutter) 0;
  padding: 10px 12px;
  border-radius: var(--r-md);
  background: var(--surface-2);
  border: 1px dashed var(--line-strong);
  font-size: 11.5px;
  line-height: 1.45;
  color: var(--ink-500);
  text-align: left;
}

.ar-lock svg {
  flex: none;
  color: var(--ink-300);
}

/* ==========================================================================
 * F. 票税一览（/tax）
 *
 * 三张块卡各自独立：主数字 + 两条口径副行 + 一句"点开看什么"。
 * 没权限那张不隐藏也不置灰到看不清 —— 保留位置、主数字印「—」，
 * 因为"这个月没有开票"和"你看不到开票"必须能一眼分开。
 * ========================================================================== */
.tax-wrap {
  padding-bottom: 8px;
}

.tb {
  display: block;
  width: calc(100% - var(--gutter) * 2);
  margin: 14px var(--gutter) 0;
  padding: 14px 14px 12px;
  border-radius: var(--r-lg);
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--sh-1);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: transform 0.14s var(--ease);
}

.tb:active {
  transform: scale(0.994);
}

.tb--denied {
  background: var(--surface-2);
  border-style: dashed;
  border-color: var(--line-strong);
  box-shadow: none;
  cursor: default;
}

.tb__hd {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.tb__title {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink-500);
  letter-spacing: 0.2px;
}

.tb__main {
  display: flex;
  align-items: baseline;
  gap: 4px;
  margin-top: 7px;
}

.tb__main b {
  font-size: 27px;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.8px;
  color: var(--ink-900);
  font-variant-numeric: tabular-nums;
}

.tb--denied .tb__main b {
  color: var(--ink-300);
}

.tb__unit {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--ink-400);
}

.tb__sub {
  margin-top: 4px;
  font-size: 10.5px;
  color: var(--ink-400);
}

.tb__rows {
  margin-top: 11px;
  padding-top: 9px;
  border-top: 1px dashed var(--line);
  display: grid;
  gap: 6px;
}

.tb__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  font-size: 11.5px;
  color: var(--ink-500);
}

.tb__row b {
  font-weight: 600;
  color: var(--ink-800);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.tb__ft {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 11px;
  font-size: 10.5px;
  color: var(--ink-400);
}

.tb__ft svg {
  flex: none;
  color: var(--ink-300);
}

.tb--denied .tb__ft {
  color: var(--ink-300);
}

/* ---- 弹层里的明细行 ---- */
.tb-loading {
  padding: 38px 0;
  text-align: center;
  font-size: 12.5px;
  color: var(--ink-400);
}

.tb-empty {
  padding: 34px 0;
  text-align: center;
  font-size: 12.5px;
  color: var(--ink-400);
}

.tb-sum {
  padding: 12px 2px 2px;
  text-align: right;
  font-size: 11px;
  color: var(--ink-400);
}

.tr-list {
  display: block;
}

.tr {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 11px 0;
  border-bottom: 1px dashed var(--line);
}

.tr:last-child {
  border-bottom: 0;
}

.tr__body {
  flex: 1;
  min-width: 0;
}

.tr__title {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-800);
  line-height: 1.45;
  /* 明细行是「看全名」的场景，标题不截断：
     合同项目名长度不可控（"滨江路快速化改造工程（一标段）"在 320 宽下
     右侧还要留给金额 + 状态胶囊，单行必然吃掉后半截），改为自动换行。
     overflow-wrap 兜住没有空格的长串（合同号、英文名），不让它把行撑破。 */
  white-space: normal;
  overflow-wrap: anywhere;
}

.tr__sub {
  margin-top: 3px;
  font-size: 10.5px;
  line-height: 1.5;
  color: var(--ink-400);
}

.tr__r {
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 5px;
}

.tr__amt {
  font-size: 13px;
  font-weight: 700;
  color: var(--ink-900);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* ==========================================================================
 * G. 人员档案（/people、/people/:id）
 *
 * 列表用卡片而不是通栏列表：每条要么带一行"证件临期"预警、要么带一行
 * "全部有效"，通栏列表的 1px 分隔线压不住这两行高度差，卡片更稳。
 * ========================================================================== */
.people-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 2px var(--gutter) 0;
}

.prow {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 12px;
  border-radius: 14px;
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--sh-1);
  cursor: pointer;
  transition: transform 0.14s var(--ease);
}

.prow:active {
  transform: scale(0.994);
  background: var(--surface-2);
}

.prow__avatar {
  flex: none;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(135deg, #4b86f7 0%, #2f6bff 100%);
}

.prow__avatar--off {
  background: linear-gradient(135deg, #c3ccdb 0%, #a9b4c6 100%);
}

.prow__main {
  flex: 1;
  min-width: 0;
}

.prow__top {
  display: flex;
  align-items: center;
  gap: 5px;
}

.prow__name {
  font-size: 14px;
  font-weight: 700;
  color: var(--ink-900);
  max-width: 7em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.prow__badge {
  flex: none;
  padding: 1px 4px;
  border-radius: 4px;
  font-size: 9.5px;
  font-weight: 700;
  line-height: 1.4;
  color: #b45309;
  background: #fef3c7;
}

.prow__pos {
  margin-left: auto;
  max-width: 7.5em;
  font-size: 10.5px;
  color: var(--ink-400);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.prow__sub {
  margin-top: 3px;
  font-size: 10.5px;
  color: var(--ink-400);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.prow__warn {
  margin-top: 3px;
  font-size: 10.5px;
  font-weight: 600;
  color: var(--warn);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.prow__warn--danger {
  color: var(--danger);
}

.prow__ok {
  margin-top: 3px;
  font-size: 10.5px;
  color: var(--ink-300);
}

/* 筛选胶囊上的计数角标 */
.pchip-dot {
  display: inline-grid;
  place-items: center;
  min-width: 15px;
  height: 15px;
  padding: 0 4px;
  border-radius: 8px;
  background: var(--danger);
  color: #fff;
  font-size: 9.5px;
  font-style: normal;
  font-weight: 700;
  line-height: 1;
}

.people-foot {
  padding: 16px 0 22px;
  text-align: center;
  font-size: 11.5px;
  color: var(--ink-400);
}

/* ---- 人员详情 ---- */
.pd-hero {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 14px var(--gutter) 0;
  padding: 16px;
  border-radius: var(--r-lg);
  color: #fff;
  background: linear-gradient(135deg, #2f86f0 0%, #63a6f9 100%);
  box-shadow: 0 10px 22px rgba(47, 107, 255, 0.18);
}

.pd-hero__avatar {
  flex: none;
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 16px;
  font-size: 21px;
  font-weight: 800;
  background: rgba(255, 255, 255, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.34);
}

.pd-hero__main {
  min-width: 0;
}

.pd-hero__name {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 17px;
  font-weight: 800;
  letter-spacing: 0.3px;
}

.pd-hero__meta {
  margin-top: 5px;
  font-size: 11.5px;
  color: rgba(255, 255, 255, 0.86);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pkv-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 12px;
}

.pkv {
  min-width: 0;
}

.pkv__k {
  font-size: 10.5px;
  color: var(--ink-400);
}

.pkv__v {
  margin-top: 3px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-900);
  word-break: break-all;
}

.pkv__link {
  color: var(--brand);
  text-decoration: none;
}

/* 证件：左边类别 + 证号，右边状态胶囊 + 到期日 */
.cert {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px dashed var(--line);
}

.cert:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.cert__main {
  flex: 1;
  min-width: 0;
}

.cert__cat {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink-800);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cert__no {
  margin-top: 2px;
  font-size: 10.5px;
  letter-spacing: 0.2px;
  color: var(--ink-400);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cert__r {
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
}

.cert__date {
  font-size: 10px;
  color: var(--ink-400);
  font-variant-numeric: tabular-nums;
}

/* 记工：日期 / 星期 / 状态 / 工时 四列 */
.att {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 0;
  border-bottom: 1px dashed var(--line);
}

.att:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.att__d {
  flex: none;
  width: 40px;
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-800);
  font-variant-numeric: tabular-nums;
}

.att__w {
  flex: none;
  width: 30px;
  font-size: 10.5px;
  color: var(--ink-400);
}

.att__h {
  margin-left: auto;
  font-size: 11px;
  color: var(--ink-500);
  font-variant-numeric: tabular-nums;
}

.att-more {
  display: block;
  width: 100%;
  height: 34px;
  margin-top: 10px;
  border-radius: 10px;
  background: var(--surface-2);
  font-size: 11.5px;
  font-weight: 600;
  color: var(--brand);
}

.pd-denied {
  padding: 14px;
  border-radius: var(--r-md);
  background: var(--surface-2);
  border: 1px dashed var(--line-strong);
  text-align: center;
  font-size: 11.5px;
  color: var(--ink-400);
}

/* ==========================================================================
 * H. 经营看板（/biz）
 *
 * 条形只做"同一张图里的相对长度"，不做坐标轴 —— 手机上三年的合同额
 * 用一根 8px 的横条 + 右边具体数字已经够判断，加上刻度线只会挤掉数字。
 * ========================================================================== */
.biz-hero {
  margin: 14px var(--gutter) 0;
  padding: 16px;
  border-radius: var(--r-lg);
  color: #fff;
  background: linear-gradient(135deg, #2f86f0 0%, #63a6f9 55%, #a8ccfd 100%);
  box-shadow: 0 10px 24px rgba(47, 107, 255, 0.2);
}

.biz-hero__l {
  font-size: 11.5px;
  color: rgba(255, 255, 255, 0.84);
}

.biz-hero__num {
  display: flex;
  align-items: baseline;
  gap: 5px;
  margin-top: 8px;
}

.biz-hero__num b {
  font-size: 32px;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -1.2px;
  font-variant-numeric: tabular-nums;
}

.biz-hero__num span {
  font-size: 12px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.86);
}

.biz-hero__ft {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 11px;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.86);
}

.biz-hero__yoy {
  margin-left: auto;
  padding: 2px 8px;
  border-radius: 20px;
  font-size: 10.5px;
  font-weight: 700;
  background: rgba(255, 255, 255, 0.24);
}

.biz-hero__yoy.is-down {
  background: rgba(15, 27, 51, 0.18);
}

.biz-rows {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.biz-row {
  display: block;
  width: 100%;
  padding: 0;
  background: none;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.biz-row__hd {
  display: flex;
  align-items: baseline;
  gap: 6px;
}

.biz-row__y {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--ink-900);
  font-variant-numeric: tabular-nums;
}

.biz-row__n {
  font-size: 10.5px;
  color: var(--ink-400);
}

.biz-row__amt {
  margin-left: auto;
  font-size: 13.5px;
  font-weight: 800;
  color: var(--ink-900);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.biz-bar {
  height: 8px;
  margin-top: 7px;
  border-radius: 4px;
  background: var(--surface-2);
  overflow: hidden;
}

.biz-bar i {
  display: block;
  height: 100%;
  border-radius: 4px;
  background: linear-gradient(90deg, #a8ccfd 0%, #2f86f0 100%);
  transition: width 0.45s var(--ease);
}

.biz-row__ft {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 6px;
  font-size: 10px;
  color: var(--ink-400);
}

.biz-row__ft svg {
  vertical-align: -1px;
}

.page--biz .ar-note,
.page--tax .ar-note {
  margin-bottom: 2px;
}

/* 头卡里的「特种作业」小红标放进蓝底会发灰：在头卡内换成半透明白片 */
.pd-hero .prow__badge {
  color: #fff;
  background: rgba(255, 255, 255, 0.26);
}

/* 到期日不许换行：右列宽度由状态胶囊决定，日期一折就变成两行 */
.cert__date {
  white-space: nowrap;
}

/* 同比那行左右两段都不许折：右段折行后箭头会掉到下一行，看着像多了一个按钮 */
.biz-row__ft > span {
  white-space: nowrap;
}

/* 同比那行左右两段都不许折：右段折行后箭头会掉到下一行，看着像多了一个按钮 */
.biz-row__ft > span {
  white-space: nowrap;
}

/* 全局 `svg { display: block }`：放进行内文字里必须改回 inline-block，
   否则箭头会独占一行（这里看着像多出一个可点的按钮） */
.biz-row__ft svg {
  display: inline-block;
}

/* 明细副行最多两行：证号 / 甲方 / 日期三段拼起来常常超一行，
   不夹住的话最后会掉出一个"01-15"这样的孤行 */
.tr__sub {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* 明细第三行：合同号 · 签订日（比副行更弱一档） */
.tr__meta {
  margin-top: 3px;
  font-size: 10px;
  color: var(--ink-300);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 明细第三行：合同号 · 签订日（比副行更弱一档） */
.tr__meta {
  margin-top: 3px;
  font-size: 10px;
  color: var(--ink-300);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ==========================================================================
 * I. 开标中心（/bid、/bid/:id）
 *
 * 小程序的「待开标」是一张四列表格（名称 / 开标 / 概算 / 倒计时）。
 * 375 宽塞四列会让项目名只剩 8 个字，所以 H5 换成卡片：
 * 名称占一行、金额与开标时间一行、进度条一行 —— 信息一条不少，只是不再横着挤。
 * ========================================================================== */
.bid-hero {
  display: flex;
  align-items: flex-start;
  margin: 14px var(--gutter) 0;
  padding: 14px 4px;
  border-radius: var(--r-lg);
  color: #fff;
  background: linear-gradient(135deg, #2f86f0 0%, #63a6f9 55%, #a8ccfd 100%);
  box-shadow: 0 10px 24px rgba(47, 107, 255, 0.2);
}

.bid-hero__c {
  position: relative;
  flex: 1;
  min-width: 0;
  text-align: center;
}

.bid-hero__c + .bid-hero__c::before {
  content: '';
  position: absolute;
  top: 3px;
  bottom: 3px;
  left: 0;
  width: 1px;
  background: rgba(255, 255, 255, 0.26);
}

.bid-hero__l {
  display: block;
  font-size: 10.5px;
  color: rgba(255, 255, 255, 0.84);
}

.bid-hero__v {
  display: block;
  margin-top: 5px;
  font-size: 20px;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.5px;
}

.bid-hero__v em {
  margin-left: 2px;
  font-size: 10.5px;
  font-style: normal;
  font-weight: 600;
  letter-spacing: 0;
  color: rgba(255, 255, 255, 0.85);
}

/* ---- 待开标卡片 ---- */
.bid-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 14px var(--gutter) 0;
}

.bid {
  padding: 12px 13px 11px;
  border-radius: 14px;
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--sh-1);
  cursor: pointer;
  transition: transform 0.14s var(--ease);
}

.bid:active {
  transform: scale(0.994);
}

.bid__hd {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.bid__name {
  flex: 1;
  min-width: 0;
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1.35;
  color: var(--ink-900);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* 倒计时胶囊：当天/明天红、三天内琥珀、一周内品牌色、更远灰 */
.bid__cd {
  flex: none;
  padding: 2px 7px;
  border-radius: 8px;
  font-size: 10.5px;
  font-weight: 700;
  line-height: 1.5;
  white-space: nowrap;
}

.bid__cd--danger {
  color: #b91c1c;
  background: var(--danger-50);
}
.bid__cd--warn {
  color: #b45309;
  background: #fef3c7;
}
.bid__cd--brand {
  color: var(--brand-700);
  background: var(--brand-50);
}
.bid__cd--muted {
  color: var(--ink-500);
  background: var(--surface-2);
}

.bid__own {
  margin-top: 4px;
  font-size: 10.5px;
  color: var(--ink-400);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bid__mt {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-top: 8px;
}

.bid__amt {
  font-size: 15px;
  font-weight: 800;
  letter-spacing: -0.3px;
  color: var(--ink-900);
}

.bid__when {
  margin-left: auto;
  font-size: 10.5px;
  color: var(--ink-400);
  font-variant-numeric: tabular-nums;
}

.bid__bar {
  height: 4px;
  margin-top: 8px;
  border-radius: 3px;
  background: var(--surface-2);
  overflow: hidden;
}

.bid__bar i {
  display: block;
  height: 100%;
  border-radius: 3px;
  background: linear-gradient(90deg, #a8ccfd 0%, #2f86f0 100%);
}

.bid__ft {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 5px;
  font-size: 10px;
  color: var(--ink-400);
}

/* ---- 保证金台账：一张卡里分行，不铺 5 张卡（金额小、行短，铺开反而散） ---- */
.dep-wrap {
  margin: 14px var(--gutter) 0;
  padding: 0 13px;
  border-radius: 14px;
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--sh-1);
}

/* 放进 ar-sec 里时不再套一层卡（详情页的关联保证金） */
.ar-sec .dep-wrap {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
}

.dep {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 11px 0;
  border-bottom: 1px dashed var(--line);
}

.dep:last-child {
  border-bottom: 0;
}

.dep__main {
  flex: 1;
  min-width: 0;
}

.dep__name {
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--ink-800);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dep__sub {
  margin-top: 3px;
  font-size: 10.5px;
  color: var(--ink-400);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dep__r {
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
}

.dep__r b {
  font-size: 13.5px;
  font-weight: 800;
  color: var(--ink-900);
  letter-spacing: -0.2px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* 胶囊角标的中性/品牌两档（人员页的红色档是"待处理"专用） */
.pchip-dot--brand {
  background: var(--brand);
}

.pchip-dot--muted {
  background: var(--ink-300);
}

/* ---- 详情 ---- */
.bd-hero {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 14px var(--gutter) 0;
  padding: 16px;
  border-radius: var(--r-lg);
  color: #fff;
  background: linear-gradient(135deg, #2f86f0 0%, #63a6f9 60%, #a8ccfd 100%);
  box-shadow: 0 10px 24px rgba(47, 107, 255, 0.2);
}

.bd-hero__main {
  flex: 1;
  min-width: 0;
}

/* 倒计时做成色块：渐变底上再写红字会看不清，改用底色表达紧急度 */
.bd-hero__cd {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: -0.2px;
  background: rgba(255, 255, 255, 0.24);
}

.bd-hero__cd--danger {
  background: #dc2626;
}
.bd-hero__cd--warn {
  background: #d97706;
}
.bd-hero__cd--muted {
  background: rgba(15, 27, 51, 0.22);
}

.bd-hero__when {
  margin-top: 8px;
  font-size: 11.5px;
  color: rgba(255, 255, 255, 0.86);
  font-variant-numeric: tabular-nums;
}

.bd-hero__amt {
  flex: none;
  text-align: right;
}

.bd-hero__amt span {
  display: block;
  font-size: 10.5px;
  color: rgba(255, 255, 255, 0.82);
}

.bd-hero__amt b {
  display: block;
  margin-top: 4px;
  font-size: 19px;
  font-weight: 800;
  letter-spacing: -0.5px;
  font-variant-numeric: tabular-nums;
}

.bd-bar {
  height: 6px;
  margin-top: 12px;
  border-radius: 3px;
  background: var(--surface-2);
  overflow: hidden;
}

.bd-bar i {
  display: block;
  height: 100%;
  border-radius: 3px;
  background: linear-gradient(90deg, #a8ccfd 0%, #2f86f0 100%);
}

.bd-p {
  font-size: 12.5px;
  line-height: 1.75;
  color: var(--ink-600);
}

.bd-p--note {
  color: var(--ink-500);
}

/* 页面主体的筛选胶囊行：ar-filters 原本贴在 page-hd 里（自带 gutter 内边距），
   放进页面正文时要自己补一圈，否则会顶到屏幕左边 */
.ar-filters--inset {
  padding: 0 var(--gutter);
  margin-top: 12px;
}

.dep-empty {
  padding: 28px 0;
  text-align: center;
  font-size: 12px;
  color: var(--ink-400);
}