/* ==========================================================================
   唯吉CRM 网页版样式
   设计来源：直接对照 miniprogram 的 app.wxss / pages/*.wxss 抄数值，
   不凭感觉调。手机端（<768px）尽量复刻小程序；电脑端用同一套变量做侧栏布局。
   小程序里写 rpx 的地方按 1rpx = 0.5px 换算（设计稿基准 390pt）。
   ========================================================================== */

:root {
  /* ---- 主题变量：与 miniprogram/app.wxss 的 .page（深海蓝）一一对应 ---- */
  --brand: #1d2542;
  --brand-rgb: 29, 37, 66;
  --brand-deep: #131a2e;
  --brand-soft: #3b4767;
  --brand-tint: #dcdfe9;
  --brand-tint2: #ecedf3;
  --brand-line: #ccd1dd;
  --ink: #1d2542;
  --solid: #1d2542;
  --solid-deep: #161d38;
  --text-3: #5a6690;

  --alert-red: #E5484D;
  --remind: #E5484D;
  --tag-urgent: #ef6c5b;
  --tag-follow: #9aa3b2;
  --tag-lost: #f39a38;
  --mask-bg: rgba(0, 0, 0, 0.42);

  /* ---- 兼容旧类名引用的别名 ---- */
  --brand-2: var(--brand);
  --nav: var(--solid);
  --nav-2: #2a3450;
  --text: var(--ink);
  --muted: var(--text-3);
  --line: #E3E8EF;
  --line-2: #F5F5F5;
  --bg: #f4f6f9;
  --card: #fff;
  --ok: #3D8A63;
  --warn: #C08A4E;
  --err: #C0392B;
  --radius: 12px;
  --shadow-card: 0 4px 14px rgba(23, 32, 51, 0.05);
  --shadow-soft: 0 1px 2px rgba(23, 32, 51, 0.06);
  --shadow-btn: 0 2px 8px rgba(0, 0, 0, 0.06);
  --side-w: 210px;
  --tap: 44px;
}

/* 樱花粉：与 app.wxss 的 .t-pink 对齐 */
body.th-pink {
  --brand: #f0578f;
  --brand-rgb: 240, 87, 143;
  --brand-deep: #A3486E;
  --brand-soft: #ff92bb;
  --brand-tint: #fbdce9;
  --brand-tint2: #fdeef4;
  --brand-line: #f8cbdd;
  --ink: #3b2333;
  --solid: #A3486E;
  --solid-deep: #8A3D5D;
  --text-3: #8b7280;
  --remind: #A3486E;
  --nav: var(--solid);
  --nav-2: #8A3D5D;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  width: 100%;
  /* 关掉整页的橡皮筋回弹：macOS / iOS 上回弹会把 fixed 层一起带走，看着就是「侧栏跟着抖」 */
  overscroll-behavior-y: none;
  /* 用 clip 不用 hidden：hidden 会把 body 变成滚动容器，页头的 position:sticky 直接失效 */
  overflow-x: clip;
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  font: 14px/1.6 -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif;
}

button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: none; padding: 0; }
a { color: var(--brand); text-decoration: none; }
img { max-width: 100%; }
[hidden] { display: none !important; }

/* ============================ 登录 ============================ */
.login-wrap {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(160deg, var(--brand-deep) 0%, var(--brand) 55%, var(--brand-soft) 100%);
  padding: 24px;
}
.login-card {
  width: 100%;
  max-width: 380px;
  background: #fff;
  border-radius: 16px;
  padding: 30px 28px 24px;
  box-shadow: 0 18px 48px rgba(12, 22, 48, .28);
}
.login-card h1 { font-size: 22px; margin: 0 0 4px; letter-spacing: -.3px; color: var(--ink); font-weight: 700; }
.login-card .sub { color: var(--text-3); font-size: 13px; margin-bottom: 18px;
  /* 伟 2026-10-26：logo 是居中的，这句副标题默认左对齐 → 看着歪，改成居中 */
  text-align: center; }

.login-tabs { display: flex; gap: 18px; border-bottom: 1px solid var(--line); margin-bottom: 18px; }
.login-tabs button {
  border: 0; background: none; padding: 0 0 9px; font-size: 14px;
  color: var(--text-3); border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.login-tabs button.on { color: var(--ink); font-weight: 600; border-bottom-color: var(--brand); }

.field { margin-bottom: 14px; }
.field label { display: block; font-size: 12px; color: var(--text-3); margin-bottom: 6px; }
.field input {
  width: 100%; height: var(--tap); padding: 0 13px;
  border: 1px solid var(--line); border-radius: 10px;
  background: #F8F9FA; outline: none;
}
.field input:focus { border-color: var(--brand); background: #fff; }
.code-row { display: flex; gap: 8px; }
.code-row input { flex: 1; min-width: 0; }
.code-row .sms-btn { flex: 0 0 auto; height: var(--tap); padding: 0 12px; font-size: 13px; white-space: nowrap; }
.code-row .sms-btn:disabled { color: var(--text-3); cursor: default; }

.btn-primary {
  width: 100%; height: var(--tap); margin-top: 6px;
  border: 0; border-radius: 12px; background: var(--solid);
  color: #fff; font-weight: 600; letter-spacing: .5px;
  box-shadow: var(--shadow-btn);
}
.btn-primary:active { background: var(--solid-deep); }
.btn-primary:disabled { opacity: .6; cursor: default; }

.login-links { margin-top: 12px; display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.login-links a { font-size: 12.5px; }
.login-links .tip-grey { font-size: 12px; color: #9aa0ac; line-height: 1.5; }
.login-tip { margin-top: 10px; font-size: 12.5px; color: var(--err); min-height: 18px; }

/* 登录页的协议勾选（伟 2026-10-27）：15px 勾选框 + 一行可换行的说明，链接走弹层 */
.login-agree {
  margin: 16px 0 0;
  display: grid; grid-template-columns: 15px 1fr; column-gap: 7px; align-items: start;
  font-size: 12.5px; line-height: 1.7; color: #7a8394; text-align: left;
}
.login-agree .ag-chk { width: 15px; height: 15px; margin: 2px 0 0; accent-color: var(--brand); cursor: pointer; }
.login-agree .ag-txt { min-width: 0; }
.login-agree label { cursor: pointer; }
.login-agree a { color: var(--brand); font-weight: 500; }
.login-agree a:active { opacity: .7; }

/* ============================ 电脑端框架 ============================ */
.app { display: none; min-height: 100vh; overflow-x: clip; }
.app.on { display: block; }

.side {
  position: fixed; left: 0; top: 0; bottom: 0;
  /* 提成独立合成层：主区滚动时侧栏不参与重绘，不会出现一丝滞后/抖动 */
  transform: translate3d(0, 0, 0);
  will-change: transform;
  backface-visibility: hidden;
  width: var(--side-w); background: var(--nav); color: #cfd6e6;
  display: flex; flex-direction: column;
  padding: 20px 0 14px; z-index: 30;
}
.side .logo { padding: 4px 12px 14px; text-align: center; }
.side .logo small { display: none; }
.side nav { flex: 1; overflow-y: auto; }
.side nav a {
  position: relative;
  display: flex; align-items: center; gap: 10px;
  /* 伟 2026-10-26：图标左边缘要对齐 logo 左边缘（148px 居中的左沿 = 31px）→ 3px 边框 + 28px 内边距 = 31px */
  padding: 10px 20px 10px 28px; color: #cfd6e6; font-size: 14px;
  border-left: 3px solid transparent;
}
.side nav a svg { width: 17px; height: 17px; flex: 0 0 17px; opacity: .78; }
.side nav a:hover { background: var(--nav-2); color: #fff; }
.side nav a.on { background: var(--nav-2); color: #fff; border-left-color: #8ea6d8; }
.side nav a.on svg { opacity: 1; }
.nav-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--remind); margin-left: auto; flex: 0 0 7px; }
.side .who { padding: 12px 14px 0; font-size: 12px; color: #8b96b0; }


.side .who button { width: 100%; margin-top: 12px; background: transparent; border: 1px solid rgba(255, 255, 255, .26); color: rgba(255, 255, 255, .8); border-radius: 8px; padding: 8px 0; font-size: 12.5px; cursor: pointer; }
.side .who button:active { background: rgba(255,255,255,.06); }

.main { margin-left: var(--side-w); padding: 0 28px 44px; min-height: 100vh; }

/* ============================ 页头 ============================ */
.page-head {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  /* 电脑端也吸顶：滚动时标题和操作按钮一直在，不用滚回顶部找按钮 */
  position: sticky; top: 0; z-index: 25;
  background: var(--bg, #f5f6f8);
  margin: 0 -28px 16px; padding: 18px 28px 12px;
}
.page-head h2 { font-size: 22px; margin: 0; font-weight: 700; color: var(--ink); letter-spacing: -.5px; }
/* 总览页的日期标题（伟 2026-10-27）：数字和汉字的视觉重心不一样，居中摆放时标题看着偏高，
   往下挪 2px 才和右边那行农历「坐」在同一条线上；农历也往标题靠一点（原来是 12px 的 flex gap）。 */
.ov-pagehead h2 { transform: translateY(2px); }
.ov-pagehead .hint { margin-left: -6px; }
.page-head .hint { color: var(--text-3); font-size: 12px; }
.page-head .head-actions { margin-left: auto; display: flex; gap: 8px; align-items: center; }
.back-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 4px;
  height: 32px; padding: 0 12px 0 8px; border-radius: 8px;
  /* 伟 2026-10-27：原来是 #F2F3F5，和页面底色 #f5f6f8 几乎一样，等于隐形 —— 改成白底 + 描边 + 阴影 */
  background: #fff; color: var(--ink); font-size: 13px; font-weight: 500;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-soft);
}
.back-btn svg { width: 14px; height: 14px; }
.back-btn:hover { border-color: #cdd3e0; }
.back-btn:active { background: #F3F4F6; box-shadow: none; }

/* ============================ 卡片 / KPI ============================ */
.card {
  background: var(--card);
  border-radius: var(--radius);
  padding: 16px;
  margin-bottom: 12px;
  box-shadow: var(--shadow-card);
}
.card > h3 {
  font-size: 14px; margin: 0 0 12px; color: var(--ink); font-weight: 600;
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.card > h3 .hint { font-weight: 400; font-size: 12px; color: var(--text-3); }
/* 卡片标题右侧的文字入口（伟 2026-10-27：建档页「团队标签」旁边的「管理标签」） */
.card > h3 .tag-mgr {
  margin-left: auto; display: inline-flex; align-items: center; gap: 2px;
  padding: 2px 0 2px 8px; background: none; border: 0;
  font-size: 13px; font-weight: 500; color: var(--brand); white-space: nowrap;
}
.card > h3 .tag-mgr svg { width: 12px; height: 12px; }
.card > h3 .tag-mgr:active { opacity: .65; }
.card > h3 .tag-mgr[hidden] { display: none; }
.card.pad0 { padding: 0; overflow: hidden; }

.kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 14px; }
.kpi { background: #fff; border-radius: var(--radius); padding: 14px 16px; min-width: 0; box-shadow: var(--shadow-card); }
.kpi .k { font-size: 12px; color: var(--text-3); }
.kpi .v { font-size: 20px; font-weight: 700; margin-top: 5px; letter-spacing: -.3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--ink); }
.kpi .v small { font-size: 12px; font-weight: 400; color: var(--text-3); margin-left: 3px; }
.kpi.clickable { cursor: pointer; }

/* ============================ 表单 ============================ */
.row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.row > * { min-width: 0; }
.row .grow { flex: 1 1 160px; }

input.ipt, select.ipt, textarea.ipt {
  height: 44px; padding: 0 12px;
  border: 1px solid transparent; border-radius: 8px;
  background: #F8F9FA; outline: none; min-width: 0;
  font-size: 14px; color: var(--ink);
}
input.ipt:focus, select.ipt:focus, textarea.ipt:focus { background: #fff; border-color: var(--brand-line); }
textarea.ipt { height: auto; min-height: 80px; padding: 10px 12px; line-height: 1.6; resize: vertical; width: 100%; background: #ECEEF2; }
input.ipt:disabled, textarea.ipt:disabled { background: #f1f3f7; color: #8b93a3; }
input.ipt::placeholder, textarea.ipt::placeholder { color: #B0B0B8; }

.btn {
  height: 38px; padding: 0 15px; border-radius: 10px;
  border: 1px solid var(--line); background: #fff; color: var(--ink);
  display: inline-flex; align-items: center; justify-content: center; gap: 5px;
  white-space: nowrap; font-size: 13px;
  box-shadow: var(--shadow-soft);
}
/* 按钮里带图标时统一 14px（原来没有兜底，SVG 会按 viewBox 撑成 24px 或塌成 0） */
.btn > svg { width: 14px; height: 14px; flex: 0 0 14px; }
.btn:active { transform: scale(.98); opacity: .9; box-shadow: none; }
.btn.primary { background: var(--solid); border-color: var(--solid); color: #fff; box-shadow: var(--shadow-btn); }
.btn.primary:active { background: var(--solid-deep); }
.btn.ghost { background: transparent; box-shadow: none; }
.btn.danger { color: var(--err); border-color: #f0cfc9; }
.btn.solid-danger { background: var(--alert-red); border-color: var(--alert-red); color: #fff; }
.btn.sm { height: 30px; padding: 0 10px; font-size: 12px; border-radius: 8px; }
.btn.block { width: 100%; }
.btn:disabled { opacity: .55; cursor: default; }

.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px; }
.form-grid .full { grid-column: 1 / -1; }
.f-item { min-width: 0; }
.f-item > label { display: block; font-size: 12px; color: var(--text-3); margin-bottom: 6px; }
.f-item > label .req { color: var(--err); margin-left: 2px; }

/* 收款页「消耗产品」（伟 2026-10-27，照小程序 .sku-chip / .sku-qty-row）：
   产品做成带库存的小卡片，售罄的置灰；选中后出现 − 数量 ＋，上限就是库存。 */
.sku-tip { margin-left: 6px; font-size: 11px; font-weight: 400; color: var(--text-3); }
.sku-chips { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; margin-top: 6px; }
.sku-chip {
  display: flex; flex-direction: column; align-items: flex-start; gap: 3px;
  padding: 9px 12px; border-radius: 10px; text-align: left;
  border: 1px solid var(--line); background: #fff; cursor: pointer;
  transition: border-color .12s, background .12s;
}
.sku-chip .sku-name { font-size: 13px; font-weight: 500; color: var(--ink); }
.sku-chip .sku-stock { font-size: 11px; color: var(--text-3); }
.sku-chip.active { border-color: var(--brand); background: var(--brand-tint2); }
.sku-chip.active .sku-name { color: var(--brand); font-weight: 600; }
.sku-chip.disabled { opacity: .52; cursor: not-allowed; }
.sku-chip.disabled .sku-stock { color: var(--err); }
.sku-qty { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
.sku-qty .qty-btn {
  width: 32px; height: 32px; border-radius: 8px; border: 1px solid var(--line);
  background: #fff; color: var(--ink); font-size: 17px; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
}
.sku-qty .qty-btn:active { background: #f2f3f5; }
.sku-qty .qty-num { min-width: 26px; text-align: center; font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; }
.sku-qty .qty-unit { font-size: 12px; color: var(--text-3); }
.f-item .ipt { width: 100%; }
.f-tip { font-size: 12px; color: #B0B0B8; margin-top: 6px; line-height: 1.6; }
/* 列表底部「加载更多」（伟 2026-10-27：收款记录原来只取最新 50 笔，再早的看不到） */
.pay-more { display: flex; justify-content: center; padding: 10px 0 16px; }
.pay-more .btn { min-width: 160px; }
/* 详情页沟通记录里的「系统记录」分隔（伟 2026-10-27，和小程序 detail 一致）：
   收款备注、建档这类自动生成的记录单独一段，用浅色区分，避免和人工沟通混在一起看。 */
.sys-comm-title {
  margin: 14px 16px 4px; padding-top: 12px; border-top: 1px dashed var(--line);
  font-size: 11.5px; color: var(--text-3); letter-spacing: .3px;
}

/* 提成卡的三个数字（伟 2026-10-27，对齐小程序 .com-grid：累积单量 / 累计金额 / 提成金额） */
.com-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 4px 0 2px; }
.com-cell { text-align: center; min-width: 0; }
.com-cell .sc-label { font-size: 12px; color: var(--text-3); margin-bottom: 6px; }
.com-cell .sc-value {
  font-size: 20px; font-weight: 600; color: #1d2542;
  font-variant-numeric: tabular-nums; letter-spacing: -.2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.com-cell .sc-value.com-hl { color: #b45309; }
@media (max-width: 767px) {
  .com-cell .sc-value { font-size: 17px; }
  .com-cell .sc-label { font-size: 11px; }
}

.chip-group { display: flex; gap: 8px; flex-wrap: wrap; }
.chip {
  min-height: 32px; padding: 6px 14px; border-radius: 10px;
  background: #F2F3F5; color: #5A5A68; border: 1px solid transparent; font-size: 13px;
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow-soft);
}
.chip.on { background: var(--brand-tint); color: var(--brand); border-color: var(--brand); font-weight: 600; box-shadow: none; }
.chip.sm { min-height: 26px; padding: 5px 12px; font-size: 12px; border-radius: 14px; }

.seg { display: flex; background: #F2F3F5; border-radius: 9px; padding: 3px; gap: 4px; }
.seg button { flex: 1; border: 0; background: transparent; color: var(--text-3); min-height: 28px; padding: 4px 12px; border-radius: 7px; font-size: 12px; white-space: nowrap; }
.seg button.on { background: #fff; color: var(--brand); font-weight: 600; box-shadow: inset 0 1px 0 rgba(255,255,255,.9); }
.seg button .badge-dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--remind); margin-left: 4px; vertical-align: 2px; }

.switch { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line-2); }
.switch:last-child { border-bottom: 0; }
.switch .sw-txt { min-width: 0; }
.switch .sw-txt b { display: block; font-weight: 500; font-size: 14px; color: var(--ink); }
.switch .sw-txt small { color: var(--text-3); font-size: 12px; }
.switch input { display: none; }
.switch .track { flex: 0 0 44px; width: 44px; height: 26px; border-radius: 13px; background: #d9dde6; position: relative; transition: background .16s; cursor: pointer; }
.switch .track::after { content: ''; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.2); transition: transform .16s; }
.switch input:checked + .track { background: #7A9A7E; }
.switch input:checked + .track::after { transform: translateX(18px); }

/* ============================ 表格（电脑端） ============================ */
table.list { width: 100%; border-collapse: collapse; }
table.list th { text-align: left; font-weight: 500; font-size: 12px; color: var(--text-3); padding: 9px 12px; border-bottom: 1px solid var(--line); background: #fafbfd; white-space: nowrap; }
table.list td { padding: 11px 12px; border-bottom: 1px solid var(--line-2); vertical-align: middle; }
table.list tbody tr:last-child td { border-bottom: 0; }
table.list tbody tr:hover td { background: #fafbfd; }
table.list tr.clickable { cursor: pointer; }
table.list td.num { text-align: left; font-variant-numeric: tabular-nums; }
table.list td.ops { text-align: left; white-space: nowrap; }
/* 伟 2026-10-26 定稿：数字列 / 操作列**统一左对齐**（标题文字与内容同一个左边缘）。
   只把表头右对齐是错的方向，现在两边都靠左。 */
table.list th.num, table.list th.ops { text-align: left; }

.name { font-weight: 600; color: var(--ink); }
.sub { color: var(--text-3); font-size: 12px; }
.mono { font-variant-numeric: tabular-nums; }
.amount { color: var(--ink); font-weight: 700; font-variant-numeric: tabular-nums; }

.empty { text-align: center; color: var(--text-3); padding: 42px 0 38px; font-size: 13.5px; }
.empty-ic { display: block; width: 56px; height: 56px; margin: 0 auto 12px; color: #ccd4e0; }
.empty-ic svg { width: 100%; height: 100%; display: block; }
.empty-t { line-height: 1.6; padding: 0 10px; }
.empty .empty-act { margin-top: 14px; }
.loading { display: flex; align-items: center; justify-content: center; gap: 9px; text-align: center; color: #a8b1c0; padding: 34px 0; font-size: 13px; }
.spin { width: 17px; height: 17px; border-radius: 50%; border: 2px solid #e3e7ee; border-top-color: var(--brand, #1d2542); animation: wj-spin .72s linear infinite; flex-shrink: 0; }
@keyframes wj-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spin { animation-duration: 1.8s; } }
.err-box { background: #fdf0ee; border: 1px solid #f6d7d2; color: var(--err); border-radius: 10px; padding: 10px 13px; font-size: 13px; margin-bottom: 12px; }

.cards { display: none; }

.avatar {
  width: 40px; height: 40px; border-radius: 50%; flex: 0 0 40px;
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff; font-size: 16px; font-weight: 700;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 2px 8px rgba(0,0,0,.08);
}
.avatar.lg { width: 64px; height: 64px; flex-basis: 64px; font-size: 24px; border: 2px solid #fff;
  /* 伟 2026-10-26：类名 lg 和下面图例的 .lg{color:#555} 撞了，把这里的字色覆盖成深灰 → 显式给回白色 */
  color: #fff; }
.person { display: flex; align-items: center; gap: 10px; min-width: 0; }
.person .p-txt { min-width: 0; }
.person .p-txt .name { display: block; }

/* ============================ 标签 ============================ */
.tag {
  display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 4px;
  font-size: 12px; background: #E4ECF4; color: var(--ink); margin-right: 4px;
  line-height: 1.5; white-space: nowrap; font-weight: 500;
}
.tag.warn { background: #F4EEE8; color: #C08A4E; }
.tag.ok { background: #EAF5EE; color: #3D8A63; }
.tag.grey { background: #EBF0F7; color: var(--text-3); }
.tag.red { background: #F8E9E9; color: #C97A7A; }
.tag.purple { background: #ECE9F4; color: #8E7FAE; }
.tag.clickable { cursor: pointer; }
/* 表格里第一颗标签往左拉 8px：胶囊自身有 8px 左内边距，不拉的话字比表头右移 8px（伟 2026-10-26） */
table.list td .tag:first-child { margin-left: -8px; }
.tag-male { background: #E8F0FE; color: #2E6BFF; }
.tag-female { background: #FDEBF3; color: #E0508A; }
.tag-none { background: #F1F3F7; color: #8A93A5; }
/* 意向等级 S~D 分色（伟 2026-10-26）：原来一律 .tag.purple，五种等级看不出差别 */
.tag.lv-s { background: #F2E9FF; color: #7C3AED; }
.tag.lv-a { background: #E6F0FF; color: #2E6BFF; }
.tag.lv-b { background: #E7F6EE; color: #1F9D62; }
.tag.lv-c { background: #FFF3E0; color: #D9822B; }
.tag.lv-d { background: #F1F3F7; color: #8A93A5; }

.badge { display: inline-block; padding: 1px 7px; border-radius: 6px; font-size: 11px; line-height: 1.6; white-space: nowrap; }
.badge.pending { background: #F4EEE8; color: #C08A4E; }
.badge.approved, .badge.ok { background: #EAF5EE; color: #3D8A63; }
.badge.rejected, .badge.err { background: #F8E9E9; color: #C97A7A; }
.badge.grey { background: #F2F3F5; color: var(--text-3); }
.badge.brand { background: var(--brand-tint2); color: var(--brand); }

/* ============================ 弹层 ============================ */
.modal-mask {
  position: fixed; inset: 0; background: var(--mask-bg);
  display: flex; align-items: center; justify-content: center;
  padding: 20px; z-index: 100;
  animation: fadeIn .13s ease-out;
}
.modal {
  background: #fff; border-radius: 16px; width: 82%; max-width: 460px;
  max-height: 82vh; display: flex; flex-direction: column;
  box-shadow: 0 16px 48px rgba(31, 45, 61, .3);
  animation: popIn .16s ease-out;
}
.modal.wide { max-width: 620px; }
.modal-hd { padding: 18px 20px 10px; font-size: 18px; font-weight: 600; display: flex; align-items: center; gap: 8px; color: var(--ink); }
.modal-hd .modal-x { margin-left: auto; border: 0; background: none; color: #B0B0B8; font-size: 20px; line-height: 1; padding: 0 2px; }
.modal-bd { padding: 0 20px 4px; overflow-y: auto; flex: 1; font-size: 14px; }
.modal-bd .f-tip { margin-top: 8px; }
.modal-ft { padding: 14px 20px 18px; display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; }
.modal-ft .btn { min-width: 78px; }
.modal-ft .btn.primary { min-width: 96px; }
.modal-msg { color: #3D3D55; line-height: 1.7; }
.modal-msg b { color: var(--ink); }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes popIn { from { opacity: 0; transform: translateY(8px) scale(.985); } to { opacity: 1; transform: none; } }

/* ============================ 轻提示 ============================ */
.toast-root { position: fixed; left: 50%; bottom: 84px; transform: translateX(-50%); z-index: 200; display: flex; flex-direction: column; gap: 8px; align-items: center; pointer-events: none; width: max-content; max-width: 88vw; }
.toast { background: rgba(28, 35, 54, .94); color: #fff; padding: 9px 16px; border-radius: 10px; font-size: 13px; box-shadow: 0 6px 20px rgba(10, 18, 38, .24); animation: toastIn .16s ease-out; }
.toast.ok { background: rgba(61, 138, 99, .96); }
.toast.err { background: rgba(176, 52, 40, .96); }
@keyframes toastIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* ============================ 快捷宫格 ============================ */
.quick-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 18px 0; }
.quick-grid .q { display: flex; flex-direction: column; align-items: center; gap: 7px; padding: 0; color: #3f4a5e; font-size: 12px; text-align: center; }
.quick-grid .q .qi { width: 40px; height: 40px; border-radius: 10px; display: flex; align-items: center; justify-content: center; background: var(--brand-tint2); color: var(--brand); }
.quick-grid .q .qi svg { width: 20px; height: 20px; }
.quick-grid .q .q-txt { line-height: 13px; }
.quick-grid .q.tint-1 .qi { background: #e8f8f2; }
.quick-grid .q.tint-2 .qi { background: #f0eeff; }
.quick-grid .q.tint-3 .qi { background: #e8f8fc; }
.quick-grid .q.tint-4 .qi { background: #f8fafd; }

/* ============================ 日历 ============================ */
.cal { background: #fff; border-radius: var(--radius); padding: 12px 14px; margin-bottom: 12px; box-shadow: var(--shadow-card); }
.cal-hd { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.cal-hd b { font-size: 15px; color: var(--ink); }
.cal-hd button { border: 0; background: none; color: var(--text-3); font-size: 17px; padding: 2px 8px; }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.cal-grid .wd { text-align: center; font-size: 11px; color: #a8b1c0; padding-bottom: 4px; }
.cal-grid .d { aspect-ratio: 1 / 1; display: flex; flex-direction: column; align-items: center; justify-content: center; border-radius: 8px; font-size: 13px; color: #374151; }
.cal-grid .d.out { color: #c7ccd6; }
.cal-grid .d.today { color: var(--brand); font-weight: 700; }
.cal-grid .d.on { background: var(--solid); color: #fff; font-weight: 600; }

/* ============================ 图表 ============================ */
.bars { display: flex; align-items: flex-end; gap: 10px; height: 132px; padding-top: 8px; }
.bars .bar-col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 5px; min-width: 0; height: 100%; justify-content: flex-end; }
.bars .bar { width: 100%; max-width: 30px; border-radius: 4px 4px 2px 2px; background: linear-gradient(180deg, var(--brand-soft), var(--brand)); min-height: 2px; }
.bars .bar-lb { font-size: 11px; color: var(--text-3); white-space: nowrap; }

.rank-row { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--line-2); }
.rank-row:last-child { border-bottom: 0; }
.rank-row .rk { width: 18px; color: #a8b1c0; font-size: 12px; flex: 0 0 18px; }
.rank-row .rk.top { color: var(--warn); font-weight: 700; }
.rank-row .rn { flex: 0 0 84px; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* 伟 2026-10-27：条加粗到原来的 150%（5px → 7.5px），配色由 ui.js 的 RANK_COLORS 逐行给 */
.rank-row .rbar { flex: 1; height: 7.5px; border-radius: 4px; background: #F2F3F5; overflow: hidden; }
.rank-row .rbar i { display: block; height: 100%; border-radius: 4px; background: #A8B4C8; }
.rank-row .rv { flex: 0 0 auto; font-size: 12px; color: var(--text-3); font-variant-numeric: tabular-nums; }

/* ============================ 详情通用 ============================ */
.profile-head { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.profile-head .p-info { min-width: 0; flex: 1; }
.profile-head .p-info h2 { font-size: 18px; margin: 0 0 3px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.profile-head .p-info .p-meta { color: var(--text-3); font-size: 12px; }

.detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 26px; }
.detail-grid .k { color: var(--text-3); font-size: 12px; }
.detail-grid .v { font-size: 14px; word-break: break-word; color: var(--ink); }

/* 经营数据卡（伟 2026-10-27）：四项一排、数字居中、不换行。
   浅灰底格子比单纯的「标签+值」更容易扫读；minmax(0,1fr) 保证四列等宽且能压窄不出横向滚动。 */
.op-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.op-cell {
  text-align: center; min-width: 0; padding: 14px 4px; border-radius: 10px; background: #F7F8FA;
}
.op-cell .k { font-size: 12px; color: var(--text-3); margin-bottom: 7px; white-space: nowrap; }
.op-cell .v {
  font-size: 20px; font-weight: 600; color: var(--ink); line-height: 1.2;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  font-variant-numeric: tabular-nums;
}
.op-cell .v small { font-size: 12px; font-weight: 500; color: var(--text-3); margin: 0 1px; }
@media (max-width: 767px) {
  .op-grid { gap: 6px; }
  .op-cell { padding: 10px 2px; border-radius: 8px; }
  .op-cell .k { font-size: 11px; }
  .op-cell .v { font-size: 15px; }
}
.kv-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 16px; }
.kv-grid .k { color: var(--text-3); font-size: 12px; }
.kv-grid .v { font-size: 14px; word-break: break-word; color: var(--ink); }

.tabs { display: flex; gap: 6px; margin-bottom: 14px; flex-wrap: wrap; }
.tabs button { border: 1px solid var(--line); background: #fff; border-radius: 999px; padding: 6px 14px; font-size: 13px; color: var(--text-3); }
.tabs button.on { background: var(--solid); border-color: var(--solid); color: #fff; }

.tl { border-left: 2px solid var(--line); margin-left: 6px; padding-left: 16px; }
.tl .it { position: relative; padding-bottom: 15px; }
.tl .it::before { content: ''; position: absolute; left: -22px; top: 6px; width: 8px; height: 8px; border-radius: 50%; background: #c7d0e4; border: 2px solid #fff; }
.tl .it .t { font-size: 12px; color: var(--text-3); display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.tl .it .c { margin-top: 3px; line-height: 1.65; white-space: pre-wrap; word-break: break-word; }

/* AI 分析展开区：与 reminder.wxss 的 .script-box 同源 */
.ai-box { background: #F8F9FB; border-radius: 10px; padding: 12px 10px; margin-top: 10px; }
.ai-box .ai-hd { display: flex; align-items: center; gap: 6px; font-size: 14px; color: var(--ink); font-weight: 600; margin-bottom: 8px; }
.ai-box .ai-sec { margin-bottom: 12px; }
.ai-box .ai-sec:last-child { margin-bottom: 0; }
.ai-box .ai-sec b { display: flex; align-items: center; gap: 6px; font-size: 14px; color: #111; margin-bottom: 4px; font-weight: 600; }
.ai-box .ai-sec p { margin: 0; font-size: 14px; color: #5a5f6a; line-height: 1.7; white-space: pre-wrap; word-break: break-word; }
.ai-box .ai-copy { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; height: 26px; padding: 0 12px; border-radius: 9px; background: var(--brand-tint2); border: 1px solid var(--brand-line); font-size: 12px; font-weight: 600; color: var(--brand); }
.ai-disclaim { display: inline-block; margin: 6px 0 2px; padding: 1px 8px; border-radius: 6px; background: rgba(29, 43, 79, .07); color: #4e5766; font-size: 11px; line-height: 1.5; }

/* 提醒卡（总览）——结构照抄 reminder.wxml 的 .reminder-card */
.remind-card { background: #fff; border-radius: 12px; padding: 12px 14px; margin-bottom: 8px; box-shadow: var(--shadow-card); display: flex; flex-direction: column; gap: 10px; }
.remind-card .rc-summary { display: flex; align-items: center; gap: 10px; }
.remind-card .rc-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.remind-card .rc-name-row { display: flex; align-items: center; gap: 6px; min-width: 0; flex-wrap: wrap; }
.remind-card .rc-name { font-size: 14px; font-weight: 700; color: var(--ink); word-break: break-word; }
.remind-card .rc-owner { align-self: flex-start; background: #f8fafd; border-radius: 4px; padding: 2px 6px; font-size: 10px; color: #7e899c; line-height: 1.2; }
.remind-card .rc-amount { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; flex-shrink: 0; }
.remind-card .rc-amount .val { font-size: 14px; font-weight: 700; color: var(--ink); }
.remind-card .rc-amount .time { font-size: 10px; color: #a8b1c0; }
.remind-card .rc-meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.remind-card .rc-meta-t { font-size: 12px; color: #7e899c; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; flex: 1; }
.remind-card .rc-call-ic { width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: #3f4a5e; }
.remind-card .rc-call-ic svg { width: 22px; height: 22px; }
.remind-card .rc-stage { flex-shrink: 0; padding: 2px 6px; border-radius: 4px; line-height: 1.2; font-size: 12px; font-weight: 700; }
.remind-card .rc-stage.t-urgent { background: #ffeeeb; color: var(--tag-urgent); }
.remind-card .rc-stage.t-normal { background: var(--brand-tint2); color: var(--brand); }
.remind-card .rc-stage.t-follow { background: #f1f3f7; color: var(--tag-follow); }
.remind-card .rc-stage.t-lost { background: #fff6e8; color: var(--tag-lost); }
.remind-card .rc-stage.t-transferred, .remind-card .rc-stage.t-cust { background: #f0eeff; color: #7a6bf2; }
.remind-card .rc-ai-row { display: flex; align-items: center; gap: 8px; }
.remind-card .rc-ai { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; background: #f8fafd; border: 1px solid #e6ebf2; border-radius: 10px; padding: 0 12px; height: 44px; }
.remind-card .rc-ai-ic { width: 24px; height: 24px; border-radius: 7px; background: var(--brand-tint2); color: var(--brand); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.remind-card .rc-ai-ic svg { width: 14px; height: 14px; }
.remind-card .rc-ai-t { font-size: 14px; font-weight: 700; color: var(--ink); }
.remind-card .rc-done-text { display: flex; align-items: center; justify-content: center; flex-shrink: 0; height: 44px; padding: 0 12px; border-radius: 12px; background: var(--brand); color: #fff; font-size: 12px; font-weight: 700; }
.remind-card .rc-actions { display: flex; align-items: center; gap: 8px; }
.remind-card .rc-actions .btn { flex: 1 1 0; }

/* 空态 */
.guide-box { background: #f7f9ff; border: 1px dashed #c9d8f7; border-radius: 10px; padding: 14px 16px; font-size: 13px; color: #4a5568; line-height: 1.7; }
.guide-box b { color: var(--ink); }

.pager { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 14px 0 4px; }
.pager .pg-info { font-size: 12px; color: var(--text-3); }

.fab { position: fixed; right: 20px; bottom: 26px; z-index: 60; width: 52px; height: 52px; border-radius: 16px; background: var(--solid); color: #fff; font-size: 24px; box-shadow: var(--shadow-btn); display: none; align-items: center; justify-content: center; }
.fab:active { transform: scale(.92); }

/* 带文字的悬浮胶囊（伟 2026-10-27）：手机端「仓储统计 / 经营看板」互跳用的，
   和上面那个「＋」同一个位置、同一套阴影，只是做成胶囊好放四个字。电脑端不显示。 */
.fab-pill {
  position: fixed; right: 16px; bottom: calc(64px + env(safe-area-inset-bottom)); z-index: 60;
  height: 44px; padding: 0 16px; border-radius: 22px;
  background: var(--solid); color: #fff; font-size: 14px; font-weight: 500;
  border: none; box-shadow: var(--shadow-btn);
  display: none; align-items: center; gap: 6px; white-space: nowrap;
  transition: transform .15s;
}
.fab-pill > svg { width: 16px; height: 16px; flex: 0 0 16px; }
.fab-pill:active { transform: scale(.95); }
@media (max-width: 767px) { .fab-pill { display: inline-flex; } }

/* 伟 2026-10-27：手机端经营看板的吸顶要一行放下（标题 + 周期 + 提成卡开关），
   时间段只在电脑端显示 —— 周期按钮本身已经表达了范围。 */
@media (max-width: 767px) { .page-head.pg-stats .hint { display: none; } }

/* 电脑端：周期/审核分段不要拉满整行，悬浮新建按钮也不需要（页头已有入口） */
@media (min-width: 768px) {
  #payPeriod, #payAuditSeg, #stPeriod { max-width: 420px; }
}

.receipt-thumb { width: 84px; height: 84px; border-radius: 8px; object-fit: cover; border: 1px solid var(--line); background: #f4f6fa; cursor: pointer; }
.upload-box { width: 92px; height: 92px; border-radius: 10px; border: 1px dashed #c9cfdb; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; color: #9aa0ac; font-size: 12px; background: #fbfbfd; cursor: pointer; }
.upload-box:hover { border-color: var(--brand); color: var(--brand); }

.mini-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.mini-stats .ms { background: #fff; border-radius: 12px; padding: 14px 8px; text-align: center; box-shadow: var(--shadow-card); }
.mini-stats .ms .k { font-size: 12px; color: var(--text-3); margin-top: 4px; }
.mini-stats .ms .v { font-size: 18px; font-weight: 700; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.filter-bar { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 12px; }

/* AI 对话 */


/* 客户页：大标题切换 / 胶囊搜索 / 筛选 chip（照抄 customer.wxss） */
.type-h1 { display: flex; align-items: baseline; gap: 5px; }
.t-sw { font-size: 20px; font-weight: 600; color: #9FB0C2; letter-spacing: -.3px; }
.t-sw.on { font-size: 26px; font-weight: 700; color: #000; }
.t-sw-sep { font-size: 20px; font-weight: 500; color: #9FB0C2; }
.t-sw-tail { font-size: 14px; font-weight: 600; color: var(--ink); margin-left: 2px; }
.search-bar { display: flex; align-items: stretch; gap: 8px; padding: 5px 0 8px; }
.search-input { flex: 1; min-width: 0; background: #fff; border-radius: 999px; padding: 6px 16px; display: flex; align-items: center; border: 1px solid #E3E8EF; box-shadow: inset 0 1px 3px rgba(0,0,0,.06); }
.search-input input { font-size: 14px; width: 100%; color: var(--ink); border: 0; background: transparent; outline: none; box-shadow: none; height: 26px; }
.search-input input::placeholder { color: #B0B0B8; }
.tag-toggle { flex-shrink: 0; background: #fff; color: var(--ink); border-radius: 999px; border: 1px solid #E3E8EF; box-shadow: var(--shadow-soft); font-size: 14px; font-weight: 500; padding: 6px 14px; display: inline-flex; align-items: center; gap: 4px; }
.tag-filter-wrap { display: flex; align-items: center; gap: 8px; padding: 0 0 8px; }
.tag-filter-row { display: flex; gap: 6px; overflow-x: auto; flex: 1; min-width: 0; scrollbar-width: none; }
.tag-filter-row::-webkit-scrollbar { display: none; }
.tag-filter { padding: 5px 12px; border-radius: 14px; font-size: 12px; background: #f0f1f4; color: #5a5f6a; white-space: nowrap; flex-shrink: 0; box-shadow: var(--shadow-soft); }
.tag-filter.active { background: var(--brand-tint); color: var(--brand); font-weight: 600; }
.tag-manage-btn { font-size: 12px; color: var(--ink); flex-shrink: 0; padding: 4px 0 4px 10px; font-weight: 500; }
.emp-filter-row { display: flex; gap: 8px; padding: 0 0 8px; overflow-x: auto; scrollbar-width: none; }
.emp-filter-row::-webkit-scrollbar { display: none; }
.emp-filter-chip { padding: 5px 12px; border-radius: 14px; font-size: 12px; background: #f0f1f4; color: #5a5f6a; white-space: nowrap; flex-shrink: 0; }
.emp-filter-chip.all { background: var(--brand-tint); color: var(--brand); font-weight: 600; }
.count-label { font-size: 12px; color: var(--text-3); }
.list-foot { text-align: center; font-size: 12px; color: #9FB0C2; padding: 10px 0 4px; }

/* 客户页：搜索栏到吸顶的距离收紧（伟 2026-10-27：原来搜素框离吸顶太远）。
   只作用于 .pg-cust（客户列表页），别的页面页头间距不动。 */
.pg-cust .page-head { padding-bottom: 6px; margin-bottom: 8px; }
.pg-cust .search-bar { padding-top: 2px; }

/* 我的：设置行（照抄 mine.wxss 的 .setting-row） */
.menu-list { background: #fff; border-radius: var(--radius); overflow: hidden; margin-bottom: 12px; box-shadow: var(--shadow-card); }
.menu-row { display: flex; align-items: center; gap: 12px; width: 100%; padding: 13px 16px; border-top: 1px solid #F5F5F5; background: #fff; font-size: 14px; text-align: left; color: var(--ink); }
.menu-row:first-child { border-top: 0; }
.menu-row:active { background: #fafbfd; }
.menu-row .mi { width: 34px; height: 34px; border-radius: 9px; flex: 0 0 34px; display: flex; align-items: center; justify-content: center; background: #EEF0F3; color: var(--brand); }
.menu-row .mi svg { width: 18px; height: 18px; }
.menu-row .mr { margin-left: auto; color: #C8C9CC; font-size: 12px; display: flex; align-items: center; gap: 5px; }
.menu-row .mr svg { width: 16px; height: 16px; }
.menu-row.danger { color: var(--err); }

body.fs-1 .main { zoom: 1.06; }
body.fs-2 .main { zoom: 1.13; }

/* ============================ 总览 hero（手机端复刻） ============================ */
.ov-hero { position: relative; }
.hero-pin { display: none; }
.hero-top { display: none; }

/* 筛选卡（fh-* 与 reminder.wxss 同名同值） */
.filter-card { padding: 5px 12px; }
/* 伟 2026-10-26：筛选栏和下面第一张客户卡靠紧一点（原来的卡片间距 12px 显得隔了一层） */
.filter-card { margin-bottom: 6px; }
.follow-head { position: relative; display: flex; align-items: center; gap: 6px; flex-wrap: nowrap; }
.fh-title { display: inline-flex; align-items: center; flex-shrink: 0; font-size: 10.8px; font-weight: 500; color: #7e899c; line-height: 1; }
/* 计数左边的引导语（伟 2026-10-27，只在电脑端显示）：做成小标题的样式，
   比后面的「共 N 位待联系」重量级高一档，这样一眼知道这行是在说回访 */
.fh-lead { flex-shrink: 0; font-size: 13px; font-weight: 600; color: var(--ink); line-height: 1; letter-spacing: -.1px; }
.fh-tabs { display: flex; flex-wrap: nowrap; align-items: center; justify-content: flex-end; gap: 6px; flex: 1; min-width: 0; overflow-x: auto; }
.fh-tab { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; padding: 4px 8px; border-radius: 999px; white-space: nowrap; font-size: 10.8px; font-weight: 500; color: #7e899c; line-height: 1.4; letter-spacing: -.2px; }
.fh-tab.active { background: var(--brand-tint2); color: var(--brand); font-weight: 700; }
.fh-menu { width: 24px; height: 24px; border-radius: 12px; background: var(--brand-tint2); border: 1px solid var(--brand-line); display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: var(--brand); }
.fh-menu.on { background: var(--brand); border-color: var(--brand); color: #fff; }
.fh-menu svg { width: 13px; height: 13px; }
.filter-panel { display: flex; flex-direction: column; padding: 10px 0 2px; }
.fp-row { display: flex; gap: 10px; margin-bottom: 10px; overflow-x: auto; }
.fp-row:last-child { margin-bottom: 0; }
.fp-chip { display: inline-flex; align-items: center; padding: 6px 12px; border-radius: 999px; font-size: 12px; font-weight: 500; background: #f8fafd; color: #7e899c; white-space: nowrap; flex-shrink: 0; }
.fp-chip.on { background: var(--brand-tint2); color: var(--brand); font-weight: 700; }

/* 客户卡片（照抄 customer.wxss 的 .customer-item） */
.customer-item { display: flex; align-items: center; gap: 10px; padding: 12px 14px; background: #fff; margin: 0 0 8px; border-radius: 12px; box-shadow: var(--shadow-card); }
.customer-item .avatar { width: 46px; height: 46px; flex-basis: 46px; font-size: 18px; font-weight: 600; }
.ci-info { flex: 1; min-width: 0; }
.ci-name { font-size: 14px; font-weight: 600; color: var(--ink); word-break: break-word; }
.ci-tags { display: flex; gap: 4px; margin-top: 5px; flex-wrap: wrap; }
.ci-meta { font-size: 12px; color: var(--text-3); margin-top: 5px; }
.ci-edit { width: 36px; height: 36px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; color: var(--brand); font-size: 18px; transform: scaleX(-1); }
.ci-arrow { align-self: center; color: #C8C9CC; font-size: 22px; flex-shrink: 0; line-height: 1; }

/* 收款记录卡（照抄 payment.wxss 的 .recent-item） */
.recent-pay-title { margin: 14px 4px 4px; font-size: 18px; font-weight: 600; color: var(--ink); }
.recent-item { display: flex; align-items: center; gap: 10px; background: #fff; margin: 0 0 8px; border-radius: 12px; padding: 12px 14px; box-shadow: var(--shadow-card); }
.ri-avatar { width: 34px; height: 34px; border-radius: 50%; background: #C9D6E4; color: #fff; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 600; flex-shrink: 0; }
.ri-info { flex: 1; min-width: 0; }
.ri-name { font-size: 14px; font-weight: 600; color: var(--ink); }
.ri-staff { font-size: 12px; font-weight: 400; color: var(--text-3); }
.ri-sub { font-size: 12px; color: var(--text-3); margin-top: 2px; }
.ri-amount { font-size: 16px; font-weight: 700; color: var(--ink); flex-shrink: 0; }
.ri-right { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; flex-shrink: 0; }
.ri-ops { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.ri-ops .btn { height: 24px; padding: 0 8px; font-size: 12px; border-radius: 8px; }

/* 详情头（居中，照抄 detail.wxss 的 .detail-header） */
.detail-header { background: #fff; padding: 20px 16px 16px; text-align: center; border-radius: 0 0 12px 12px; box-shadow: var(--shadow-card); }
.detail-header .av-wrap { position: relative; width: 64px; margin: 0 auto 10px; }
.detail-header .nm { font-size: 22px; font-weight: 700; color: var(--ink); }
.detail-header .ph { font-size: 14px; color: #8E8E93; margin-top: 4px; }
.detail-header .ph-staff { font-size: 12px; color: #8E8E93; margin-top: 2px; }
.detail-header .tags { display: flex; gap: 6px; justify-content: center; margin-top: 10px; flex-wrap: wrap; }
.detail-header .head-actions { display: flex; gap: 16px; justify-content: center; margin-top: 12px; }
.detail-header .head-actions .act { font-size: 14px; color: var(--ink); display: inline-flex; align-items: center; gap: 4px; }
.detail-header .head-actions .act svg { width: 15px; height: 15px; }
.detail-header .head-actions .act.fav.on { color: #E8A23D; font-weight: 600; }

/* 分区（照抄 .detail-section / .detail-row） */
.detail-section { background: #fff; margin: 8px 0; border-radius: 12px; overflow: hidden; box-shadow: var(--shadow-card); }
.ds-title { font-size: 14px; font-weight: 600; color: var(--ink); padding: 14px 16px 6px; display: flex; align-items: center; gap: 8px; }
.ds-title .more { margin-left: auto; color: var(--brand); font-size: 14px; font-weight: 500; }
/* 详情页两张记录卡的标题：条数是灰小字，右侧是「＋ 记录一次沟通」（伟 2026-10-27） */
.ds-n { font-size: 12px; font-weight: 500; color: var(--text-3); }
.ds-title .ds-add { display: inline-flex; align-items: center; gap: 3px; font-size: 13px; }
.ds-title .ds-add svg { width: 13px; height: 13px; }
.detail-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 16px; border-top: 1px solid #F5F5F5; }
.detail-row:first-of-type { border-top: none; }
.dr-label { font-size: 14px; color: #8E8E93; flex-shrink: 0; }
.dr-val { font-size: 14px; color: var(--ink); font-weight: 500; max-width: 62%; word-break: break-word; text-align: right; }
.dr-val.amt { font-size: 18px; font-weight: 700; }
.detail-row--block { display: block; }
.dr-text { display: block; margin-top: 6px; font-size: 14px; color: var(--ink); line-height: 1.6; white-space: normal; word-break: break-word; }
.dr-text.is-empty { color: #B8BCC4; }
.consumption-item { padding: 12px 16px; border-top: 1px solid #F5F5F5; display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.consumption-item:first-of-type { border-top: none; }
.ci-left .ci-svc { font-size: 14px; font-weight: 500; color: var(--ink); }
.ci-left .ci-date { font-size: 12px; color: #8E8E93; margin-top: 3px; }
.ci-right { text-align: right; flex-shrink: 0; }
.ci-right .ci-amt { font-size: 16px; font-weight: 700; color: var(--ink); }
.ci-right .ci-staff { font-size: 12px; color: #8E8E93; margin-top: 2px; }
.comm-item { padding: 12px 16px; border-top: 1px solid #F5F5F5; }
.comm-item:first-of-type { border-top: none; }
.comm-head { display: flex; align-items: center; gap: 8px; }
.comm-channel { font-size: 12px; padding: 2px 8px; border-radius: 6px; background: #EEF0F3; color: var(--ink); font-weight: 500; }
.comm-time { font-size: 12px; color: #B0B0B8; }
.comm-undo { margin-left: auto; font-size: 12px; color: #C0392B; padding: 2px 6px; }
.comm-content { font-size: 14px; color: #3D3D55; line-height: 1.6; margin-top: 6px; white-space: pre-wrap; word-break: break-word; }
.comm-staff { font-size: 12px; color: #8E8E93; margin-top: 4px; }

/* 我的：个人信息头（居中，照抄 mine.wxss 的 .profile-head） */
.mine-profile { background: #fff; padding: 20px 16px 16px; text-align: center; border-radius: 0 0 12px 12px; box-shadow: var(--shadow-card); }
/* 头像 + 右下角「更改」（伟 2026-10-27，照小程序 .avatar-wrap / .avatar-edit） */
.mine-profile .avatar-wrap { position: relative; width: 64px; margin: 0 auto 10px; }
.mine-profile .big-avatar { width: 64px; height: 64px; border-radius: 50%; margin: 0; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 24px; font-weight: 600; box-shadow: 0 2px 8px rgba(0,0,0,.06); border: 0; padding: 0; overflow: hidden; }
.mine-profile .avatar-edit {
  position: absolute; right: -8px; bottom: -4px; z-index: 2;
  height: 22px; padding: 0 9px; border-radius: 999px;
  background: #fff; color: var(--ink); font-size: 10px; font-weight: 600; line-height: 1;
  border: 0; box-shadow: 0 2px 10px rgba(17, 24, 51, .18);
  display: inline-flex; align-items: center;
}
.mine-profile .avatar-edit:active { background: #f2f3f5; }
.mine-profile .big-avatar.has-img { background: #f2f3f5; }
.mine-profile .big-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mine-profile .big-avatar:active { opacity: .82; }
.mine-profile .nm { font-size: 20px; font-weight: 700; color: var(--ink); }
.mine-profile .ph { font-size: 13px; color: var(--text-3); margin-top: 4px; }
.mine-profile .tags { display: flex; gap: 6px; justify-content: center; margin-top: 8px; }

/* ============================ 电脑端补充 ============================ */
.cust-card { background: #fff; border-radius: 12px; padding: 12px 14px; margin-bottom: 8px; cursor: pointer; box-shadow: var(--shadow-card); }
.cust-card .hd { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.cust-card .amt { color: var(--ink); font-weight: 700; }
.cust-card .meta { margin-top: 5px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }

.bottombar { display: none; }

/* ============================ 手机端（复刻小程序） ============================ */
@media (max-width: 767px) {
  .side { display: none; }
  .main { margin-left: 0; padding: 0 16px 96px; }

  /* 通栏白吸顶（抵消 main 的左右 16px） */
  .page-head {
    margin: 0 -16px 8px;
    padding: 10px 20px 12px;
    background: rgba(255, 255, 255, .92);
    backdrop-filter: blur(20px) saturate(155%);
    -webkit-backdrop-filter: blur(20px) saturate(155%);
    border-bottom: 1px solid rgba(255, 255, 255, .6);
    box-shadow: 0 4px 14px rgba(31, 45, 61, .05);
    position: sticky; top: 0; z-index: 30;
    gap: 8px;
  }
  .page-head h2 { font-size: 22px; }
  .page-head .hint { font-size: 12px; }
  .page-head .head-actions { gap: 6px; }
  .page-head .head-actions .btn { height: 30px; padding: 0 10px; font-size: 12px; }
  .page-head .back-btn { padding: 0 10px 0 7px; }

  /* 客户页手机端同样收紧：白吸顶下沿的留白和间距各减一点 */
  .pg-cust .page-head { padding-bottom: 8px; margin-bottom: 6px; }

  .card { margin: 8px 0; padding: 16px; }
  .card > h3 { font-size: 14px; }

  /* 筛选卡要「细」一点（伟 2026-10-27）：上面那条 .card 留的 16px 上下内边距
     会把它撑到 56px 高，和电脑端的 34px 差一大截。这里收回 6px —— 一行页签
     本身只占 24px，不需要那么厚的包裹。 */
  .filter-card { padding: 6px 12px; }

  /* 总览不要 KPI（小程序总览只有宫格 + 筛选 + 列表） */
  #ovKpi { display: none; }
  .ov-pagehead { display: none; }

  /* 顶部深蓝渐变 + 门店胶囊 */
  .ov-hero { margin: 0 -16px; padding: 0 16px; }
  /* 伟 2026-10-27：原来写死 height: 300px，而 hero 实际只有 ~270px 高 → 多出来的 30px 会漏到
     筛选栏和第一张客户卡之间，看着像「渐变色糊到客户卡片上了」。
     改成跟着 hero 走（100%），并且提前到 88% 就淡干净，边缘一定留白。 */
  .hero-pin {
    display: block;
    position: absolute; top: 0; left: 0; right: 0; height: 100%; z-index: 0;
    background: linear-gradient(180deg, var(--brand-deep) 0%, var(--brand) 36%, var(--brand-soft) 64%, transparent 88%);
    pointer-events: none;
  }
  .hero-top { display: block; position: relative; z-index: 1; padding: 14px 0 12px; }
  .hero-pill {
    display: inline-flex; align-items: center; gap: 6px;
    max-width: 180px; height: 32px; padding: 0 13px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .20);
    border: 1px solid rgba(255, 255, 255, .28);
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    color: #fff; font-size: 16px; font-weight: 600; letter-spacing: -.2px;
  }
  .hero-pill svg { width: 17px; height: 17px; flex-shrink: 0; opacity: .95; }
  .hero-pill span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .ov-hero .card { position: relative; z-index: 1; }
  .ov-hero .quick-actions { padding: 16px; }

  /* 宫格（伟 2026-10-27）：手机端一行 5 个、两行排满 = 9 个常用 + 最后一个「全部」。
     - 去掉「常用功能」标题和右上角「全部功能」那一行（.qa-head），全部功能改成宫格里的一格；
     - 12 项里挑出 9 项：藏掉「报表导出 / 收款日志 / 我的收藏」这三项
       （分别能从经营页、收款页、我的页进，或直接点「全部」）；
     - 电脑端不变：仍是 6 列 × 2 行 12 项 + 标题行里的「全部功能」。 */
  .quick-grid { grid-template-columns: repeat(5, 1fr); gap: 14px 0; }
  .quick-grid .q[data-q="report"],
  .quick-grid .q[data-q="paylog"],
  .quick-grid .q[data-q="fav"] { display: none; }
  .quick-grid .q { font-size: 11.5px; }
  .quick-grid .q .qi { width: 38px; height: 38px; }
  .quick-grid .q .qi svg { color: #000; }
  .quick-grid .q .q-txt { color: #3f4a5e; line-height: 12px; }

  /* 提醒卡：手机端左右各留 16px 由 main 承担，间距 8px */
  .remind-card { margin-bottom: 8px; }

  /* 客户/收款/详情/我的 这些页面的白吸顶已经由 .page-head 统一处理 */
  .kpis { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .kpi { padding: 12px 13px; }
  .kpi .v { font-size: 18px; }

  table.list { display: none; }
  .pc-table { display: none; }
  .cards { display: block; }
  .form-grid { grid-template-columns: 1fr; }

  input.ipt, select.ipt { height: 44px; }
  .row { gap: 8px; }
  .row .grow { flex: 1 1 130px; }

  .mini-stats { gap: 8px; }

  /* 弹层改底部上滑（小程序的弹层是居中，但底部操作类是底部弹出；表单弹层仍居中更合适） */
  .modal-mask { padding: 16px; }
  .modal { width: 100%; max-width: 460px; }
  .modal-ft .btn { flex: 1; }

  /* 底部 TabBar：照抄 custom-tab-bar（56px + 安全区、毛玻璃、顶部圆角 16） */
  .bottombar {
    display: flex;
    position: fixed; left: 0; right: 0; bottom: 0;
    background: rgba(255, 255, 255, .78);
    backdrop-filter: blur(20px) saturate(155%);
    -webkit-backdrop-filter: blur(20px) saturate(155%);
    border-top: 1px solid rgba(255, 255, 255, .7);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), 0 -8px 32px rgba(31, 45, 61, .16);
    border-radius: 16px 16px 0 0;
    padding-bottom: env(safe-area-inset-bottom);
    z-index: 50;
    height: calc(56px + env(safe-area-inset-bottom));
  }
  .bottombar a {
    flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 2px; font-size: 10px; font-weight: 500; color: #8E8E93; line-height: 1.2;
  }
  .bottombar a .tab-ic { width: 26px; height: 26px; display: block; }
  .bottombar a.on { color: var(--brand); font-weight: 600; }
  .bottombar a:active { transform: scale(.94); opacity: .85; }

  .fab { right: 20px; bottom: calc(86px + env(safe-area-inset-bottom)); width: 52px; height: 52px; border-radius: 16px; display: flex; }
  .toast-root { bottom: calc(78px + env(safe-area-inset-bottom)); }

  .login-card { padding: 24px 20px 20px; }
  .bars { height: 116px; }

  /* 详情头/我的信息头：通栏（抵消 main padding），小程序就是白底通栏 */
  .detail-header, .mine-profile { margin: 0 -16px 8px; border-radius: 0; }
  .detail-section { margin: 8px 0; }
}

@media (min-width: 768px) and (max-width: 1023px) {
  :root { --side-w: 180px; }
  .main { padding: 20px 18px 38px; }
  .kpis { grid-template-columns: repeat(2, 1fr); }
}

/* 公告未读小红点（关于我们页） */
/* 客户勾选列表（批量迁移 / 副队长认领） */
.pk-list { max-height: 300px; overflow-y: auto; border: 1px solid #eef0f4; border-radius: 10px; padding: 2px 10px; }
.pk-row { display: flex; align-items: center; gap: 9px; padding: 9px 0; border-bottom: 1px solid #f4f5f8; font-size: 13.5px; cursor: pointer; }
.pk-row:last-child { border-bottom: 0; }
.pk-nm { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pk-cb { width: 17px; height: 17px; accent-color: var(--brand, #1d2542); flex-shrink: 0; }

/* ============================ AI 管家（照主流网页版聊天页） ============================ */
.ai-wrap { display: flex; flex-direction: column; background: #fff; border-radius: 14px; box-shadow: var(--shadow-card); overflow: hidden; }
.ai-stream { flex: 1; min-height: 0; overflow-y: auto; padding: 20px 18px 10px; }
.ai-stream-inner { max-width: 760px; margin: 0 auto; display: flex; flex-direction: column; gap: 18px; }

/* 消息：本人靠右深色气泡，AI 靠左无气泡（只挂一个小图标），视线更清爽 */
.ai-row { display: flex; gap: 10px; align-items: flex-start; }
.ai-row.me { justify-content: flex-end; }
.ai-ava { width: 28px; height: 28px; border-radius: 9px; background: var(--brand-tint, #eef1f8); color: var(--nav, #1d2542); display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 1px; }
.ai-ava svg { width: 15px; height: 15px; }
.ai-body { flex: 1; min-width: 0; max-width: 660px; }
.ai-text { font-size: 14px; line-height: 1.78; color: var(--ink); white-space: pre-wrap; word-break: break-word; }
.ai-bubble-me { max-width: 78%; background: var(--nav, #1d2542); color: #fff; border-radius: 14px 14px 4px 14px; padding: 10px 14px; font-size: 14px; line-height: 1.65; white-space: pre-wrap; word-break: break-word; }

/* 正在想：三个点依次跳 */
.ai-typing { display: inline-flex; gap: 4px; align-items: center; padding: 8px 0; }
.ai-typing i { width: 6px; height: 6px; border-radius: 50%; background: #c3cbd8; animation: ai-blink 1.2s infinite; }
.ai-typing i:nth-child(2) { animation-delay: .18s; }
.ai-typing i:nth-child(3) { animation-delay: .36s; }
@keyframes ai-blink { 0%, 60%, 100% { opacity: .32; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-2px); } }

/* 空对话时的欢迎屏 */
.ai-welcome { max-width: 720px; margin: 0 auto; padding: 24px 8px; text-align: center; }
.ai-w-icon { width: 52px; height: 52px; border-radius: 16px; background: var(--brand-tint, #eef1f8); color: var(--nav, #1d2542); display: flex; align-items: center; justify-content: center; margin: 0 auto 14px; }
.ai-w-icon svg { width: 26px; height: 26px; }
.ai-welcome h2 { margin: 0 0 6px; font-size: 20px; color: var(--ink); }
.ai-welcome p { margin: 0 0 20px; color: var(--text-3); font-size: 13px; }
.ai-w-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.ai-w-card { text-align: left; background: #fafbfd; border: 1px solid #eceff5; border-radius: 12px; padding: 12px 13px; cursor: pointer; transition: border-color .16s, background .16s; }
.ai-w-card:hover { border-color: #c9d2e3; background: #fff; }
.ai-w-card.on { border-color: var(--nav, #1d2542); background: var(--brand-tint, #eef1f8); }
.ai-w-t { display: block; font-size: 13.5px; font-weight: 600; color: var(--ink); margin-bottom: 3px; }
.ai-w-d { display: block; font-size: 11.5px; color: var(--text-3); line-height: 1.5; }

/* 底部输入区（钉在这一条，不跟着消息滚） */
.ai-composer { border-top: 1px solid #f0f2f6; padding: 10px 16px 12px; background: #fff; flex-shrink: 0; }
.ai-skills { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 9px; scrollbar-width: none; max-width: 760px; margin: 0 auto; }
.ai-skills::-webkit-scrollbar { display: none; }
.ai-skills .chip { flex: 0 0 auto; }
.ai-input-row { display: flex; gap: 8px; align-items: flex-end; max-width: 760px; margin: 0 auto; background: #f5f6f9; border: 1px solid #e8ebf1; border-radius: 14px; padding: 5px 5px 5px 12px; }
.ai-input-row:focus-within { border-color: #c9d2e3; background: #fff; }
.ai-ta { flex: 1; border: 0; background: transparent; resize: none; outline: none; font: inherit; font-size: 14px; line-height: 1.6; max-height: 120px; padding: 8px 0; color: var(--ink); }
.ai-ta::placeholder { color: #a9b1bf; }
.ai-send { width: 36px; height: 36px; border-radius: 11px; border: 0; background: var(--nav, #1d2542); color: #fff; display: flex; align-items: center; justify-content: center; flex-shrink: 0; cursor: pointer; }
.ai-send:active { transform: scale(.94); }
.ai-send svg { width: 18px; height: 18px; }
.ai-disclaim { max-width: 760px; margin: 8px auto 0; text-align: center; font-size: 11px; color: #aab2c0; }

@media (max-width: 767px) {
  .ai-wrap { border-radius: 12px; }
  .ai-stream { padding: 14px 12px 6px; }
  .ai-stream-inner { gap: 14px; }
  .ai-row { gap: 8px; }
  .ai-body { max-width: none; }
  .ai-bubble-me { max-width: 84%; }
  .ai-welcome { padding: 14px 4px; }
  .ai-welcome h2 { font-size: 18px; }
  .ai-w-cards { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .ai-w-card { padding: 10px 11px; }
  .ai-composer { padding: 8px 12px 10px; }
}

/* ============================ 人机验证 ============================ */
.cap-box { padding-top: 2px; }

/* 拼图（电脑端） */
.cap-stage { position: relative; width: 320px; height: 168px; margin: 0 auto; border-radius: 10px; overflow: hidden; background: #eef1f6; }
.cap-stage #capBg { display: block; }
.cap-stage #capPiece { position: absolute; left: 0; cursor: grab; filter: drop-shadow(0 3px 7px rgba(0,0,0,.32)); }
.cap-badge { position: absolute; left: 50%; top: 8px; transform: translateX(-50%); font-size: 12px; padding: 3px 10px; border-radius: 20px; opacity: 0; transition: opacity .2s; }
.cap-badge.ok { background: rgba(24, 148, 82, .93); color: #fff; opacity: 1; }
.cap-badge.bad { background: rgba(206, 58, 58, .93); color: #fff; opacity: 1; }

.cap-track { position: relative; height: 44px; width: 320px; margin: 14px auto 0; border-radius: 22px; background: #f1f3f7; border: 1px solid #e5e9f0; overflow: hidden; }
.cap-fill { position: absolute; left: 0; top: 0; bottom: 0; width: 44px; background: linear-gradient(90deg, #e2e7f0, #d3dae7); transition: background .2s; }
.cap-handle { position: absolute; top: 0; left: 0; width: 44px; height: 44px; border-radius: 22px; background: var(--nav, #1d2542); color: #fff; display: flex; align-items: center; justify-content: center; cursor: grab; touch-action: none; box-shadow: 0 2px 8px rgba(29, 37, 66, .26); z-index: 2; }
.cap-handle svg { width: 16px; height: 16px; }
.cap-handle:active, .cap-track.dragging .cap-handle { cursor: grabbing; }
.cap-hint { position: absolute; left: 56px; right: 12px; top: 0; line-height: 42px; font-size: 12.5px; color: #9aa3b4; pointer-events: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cap-track.done .cap-fill { background: linear-gradient(90deg, #bde7cc, #9ed8b6); }
.cap-track.done .cap-handle { background: #17924f; }
.cap-track.shake { animation: cap-shake .42s; }
@keyframes cap-shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-7px); }
  40% { transform: translateX(6px); }
  60% { transform: translateX(-4px); }
  80% { transform: translateX(3px); }
}

/* 字母验证码（手机端） */
.cap-text-row { display: flex; gap: 10px; align-items: center; }
#capChars { display: block; border-radius: 8px; border: 1px solid #e5e9f0; }
.cap-refresh { width: 38px; height: 38px; border-radius: 9px; border: 1px solid #e5e9f0; background: #fff; color: #6b7385; display: flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0; }
.cap-refresh svg { width: 16px; height: 16px; }
.cap-refresh:active { background: #f4f6fa; }
.cap-input { width: 100%; margin-top: 12px; height: 46px; letter-spacing: 5px; text-transform: uppercase; font-size: 16px; }
.cap-msg { margin-top: 8px; font-size: 12.5px; min-height: 18px; line-height: 1.5; }
.cap-msg.ok { color: #17924f; }
.cap-msg.bad { color: #ce3a3a; }

@media (max-width: 767px) {
  .cap-stage, .cap-track { width: 100%; max-width: 320px; }
}

/* ============================ 响应式可见性 ============================ */
/* 只给电脑端/只给手机端看的元素。用两条媒体查询正反覆盖，不依赖默认值 */
@media (min-width: 768px) { .only-mobile { display: none !important; } }
@media (max-width: 767px) { .only-pc { display: none !important; } }

/* 最窄机型（320 / iPhone SE 一代）：5 列时每格只有 51px，「自定义提醒」正好 51px 会折成两行。
   字号收 0.5px 就放得下，不必再动列数。 */
@media (max-width: 359px) {
  .quick-grid .q { font-size: 10px; letter-spacing: -.1px; }
  .quick-grid .q .qi { width: 36px; height: 36px; }
  /* 筛选栏在 320 这类窄屏会挤：页签改成从左往右排。
     原来 justify-content: flex-end 在内容超宽时会把左边第一颗页签挤到看不见、
     又滚不回来的位置（`.fh-tabs` 是 overflow-x: auto）。 */
  .fh-tabs { justify-content: flex-start; }
  .fh-tab { padding: 4px 7px; }
}

/* 仓储 / AI 管家 / 通知在电脑端是左侧导航的一级项，不需要返回按钮（手机端没有 tab，仍保留） */
@media (min-width: 768px) {
  .page-head.no-back-pc .back-btn { display: none; }
}

/* 「我的」页头像区和下面套餐卡原来贴在一起，拉开一点 */
.mine-profile { margin-bottom: 12px; }
.mine-profile + .card { margin-top: 0; }

/* 滚动时把悬浮按钮淡下去，避免压住列表里的操作按钮 */
.fab.dim { opacity: .3; }
.fab { transition: opacity .2s; }

/* 电脑端吸顶栏滚动后加一层淡阴影，和页面底色区分开（手机端另有毛玻璃样式，不受影响） */
@media (min-width: 768px) {
  .page-head { transition: box-shadow .2s; }
  .page-head.stuck { box-shadow: 0 4px 14px rgba(23, 32, 51, .07); }
}

/* 收藏按钮：选中时星标填实 + 黄字，口径对齐小程序（.act.fav.on 用 #E8A23D，无底色） */
.detail-header .head-actions .act { padding: 4px 10px; border-radius: 8px; }
.detail-header .head-actions .act.fav.on { color: #E8A23D; background: none; font-weight: 600; }
.detail-header .head-actions .act.fav.on svg { fill: currentColor; }

/* AI 回复下方的生成标识 */
.ai-gen { margin-top: 7px; font-size: 11px; color: #a3abb9; }

/* ============================ 品牌 logo ============================ */
/* logo.png 是 535×132 的横版（图形 + 文字），只能按宽度缩放，塞进正方形会把字裁掉 */
/* 伟 2026-10-27：logo 往下挪一点、和下面那行小字（AI·CRM…网页端）贴近些，
   原来贴在卡片顶部、和副标题之间空了 8px，看着像两块不相干的东西 */
.login-logo { width: 168px; height: auto; display: block; margin: 12px auto 3px; }

@media (max-width: 767px) {
  .login-logo { width: 148px; }
}

/* 头像颜色选择器：一行 8 个，选中打勾（照小程序 .color-dot） */
.color-grid { display: flex; flex-wrap: wrap; gap: 9px; }
.color-dot {
  width: 30px; height: 30px; flex: 0 0 auto; border-radius: 50%; border: 2px solid transparent; box-sizing: border-box;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 13px; font-weight: 700; line-height: 1;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .4); cursor: pointer;
  box-shadow: var(--shadow-soft); padding: 0;
}
.color-dot.on { border-color: var(--ink); }

/* 客户活跃度：左环右图例（照小程序） */
.donut-wrap { display: flex; align-items: center; justify-content: center; gap: 32px; }
/* 伟 2026-10-26：图例原来 flex:1 + max-width:420px，被拉得很宽、提示文字贴到最右边（离数字 294px）。
   现在图例按内容宽度、整块居中，间距 24 → 32px。 */
.donut-ring { width: 110px; height: 110px; border-radius: 50%; flex: 0 0 110px; display: flex; align-items: center; justify-content: center; }
.donut-hole { width: 74px; height: 74px; border-radius: 50%; background: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.donut-num { font-size: 22px; font-weight: 700; color: var(--ink); line-height: 1.1; }
.donut-lbl { font-size: 12px; color: #888; margin-top: 1px; }
.donut-legend { flex: 0 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 9px; }
.lg { display: flex; align-items: center; font-size: 14px; color: #555; }
.lg-dot { width: 10px; height: 10px; border-radius: 50%; margin-right: 6px; flex-shrink: 0; }
.lg-n { margin-left: 4px; font-weight: 600; color: var(--ink); }
.lg-tip { margin-left: 10px; font-size: 10px; color: #8E8E93; background: #F2F3F5; border-radius: 8px; padding: 2px 8px; white-space: nowrap; }

@media (max-width: 767px) {
  .donut-wrap { gap: 14px; }
  .donut-ring { width: 96px; height: 96px; flex-basis: 96px; }
  .donut-hole { width: 64px; height: 64px; }
  .donut-num { font-size: 19px; }
  .lg { font-size: 13px; }
  .lg-tip { font-size: 9.5px; padding: 2px 6px; }
}

/* ============================ 收款趋势（照小程序：柱状 + 基线 + 翻页） ============================ */
.tr-card { padding: 16px 16px 12px; }
.tr-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.tr-title { font-size: 16px; font-weight: 600; color: var(--ink); }
.tr-sub { font-size: 12px; color: #8E8E93; margin-top: 2px; }
.tr-nav { display: flex; gap: 6px; flex-shrink: 0; }
.tr-shift { border: 0; background: none; padding: 4px 6px; font-size: 12px; font-weight: 500; color: var(--brand, #1d2542); cursor: pointer; box-shadow: none; }
.tr-shift:disabled { color: #c4cad4; cursor: default; }
.tr-bars { display: flex; align-items: stretch; gap: 2px; height: 112px; border-bottom: 1px solid #e3e8f0; }
.tr-col { flex: 1; min-width: 0; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; }
.tr-bar { width: 56%; max-width: 44px; background: #7cb3e8; border-radius: 2.5px; }
.tr-val { font-size: 10px; font-weight: 500; color: #7e899c; line-height: 12px; margin-bottom: 2px; white-space: nowrap; }
.tr-axis { display: flex; padding-top: 5px; }
.tr-axis span { flex: 1; text-align: center; font-size: 11px; color: #7e899c; }
.tr-empty { flex: 1; height: 112px; display: flex; align-items: center; justify-content: center; font-size: 12px; color: #a8b1c0; }

/* 通知页底部（电脑端反馈入口） */
.nt-foot { margin-top: 14px; display: flex; justify-content: center; }

/* ============================ AI 分析面板（照小程序） ============================ */
.ai-panel { background: #F8F9FB; border-radius: 10px; padding: 12px 10px; margin-top: 10px; }
.ai-gen-note { display: inline-block; margin: 10px 0 0; padding: 1px 8px; border-radius: 6px; background: rgba(29, 43, 79, .07); color: #4e5766; font-size: 11px; line-height: 1.5; }
.ai-rpt-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
.ai-rpt-title { font-size: 14px; font-weight: 600; color: var(--ink); }
.ai-level { border-radius: 999px; padding: 3px 8px; font-size: 10px; font-weight: 700; white-space: nowrap; background: #f1f3f7; color: #7e899c; }
.ai-level.high { background: #fff0ee; color: #ef6c5b; }
.ai-level.mid { background: #fff6e8; color: #f39a38; }

.ai-block { margin-bottom: 12px; }
.ai-block:last-child { margin-bottom: 0; }
.ai-b-title { display: flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 600; color: #111; margin-bottom: 4px; }
.ai-num { color: #9aa0ad; font-weight: 700; }
.ai-b-text { font-size: 14px; color: #5a5f6a; line-height: 1.7; white-space: pre-wrap; }

.ai-scripts { display: flex; flex-direction: column; gap: 8px; margin-top: 6px; }
.ai-script { display: flex; align-items: center; gap: 8px; background: #fff; border-radius: 10px; padding: 8px 10px; }
.ai-script-t { flex: 1; min-width: 0; font-size: 14px; color: #3f4a5e; line-height: 1.6; }
.ai-copy { flex: 0 0 auto; height: 26px; padding: 0 12px; border-radius: 9px; background: var(--brand-tint, #eef1f8); border: 1px solid var(--line, #e3e8ef); font-size: 12px; font-weight: 600; color: var(--nav, #1d2542); cursor: pointer; box-shadow: none; }

.ai-acts { display: flex; justify-content: flex-end; gap: 8px; flex-wrap: wrap; margin-top: 12px; }

/* 加载态：双环 + 阶段文案 + 进度条 */
.ai-loading { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 16px 0 10px; }
.ai-ring { width: 64px; height: 64px; border-radius: 50%; position: relative; display: flex; align-items: center; justify-content: center; }
.ai-ring::before { content: ''; position: absolute; inset: 0; border-radius: 50%; border: 2.5px solid transparent; border-top-color: var(--nav, #1d2542); border-right-color: var(--nav, #1d2542); animation: ai-spin 1.1s linear infinite; }
.ai-ring::after { content: ''; position: absolute; inset: 7px; border-radius: 50%; border: 2.5px solid transparent; border-bottom-color: #9aa6bd; border-left-color: #9aa6bd; animation: ai-spin 1.5s linear infinite reverse; }
.ai-ring span { font-size: 14px; font-weight: 700; color: var(--nav, #1d2542); z-index: 1; }
@keyframes ai-spin { to { transform: rotate(360deg); } }
.ai-stage { font-size: 14px; color: #5a5f6a; }
.ai-bar { width: 200px; height: 4px; border-radius: 2px; background: #e8eaf0; overflow: hidden; }
.ai-bar i { display: block; width: 40%; height: 100%; border-radius: 2px; background: var(--nav, #1d2542); animation: ai-slide 1.2s ease-in-out infinite; }
@keyframes ai-slide { 0% { transform: translateX(-100%); } 100% { transform: translateX(250%); } }
.ai-load-tip { font-size: 12px; color: #9aa0ad; }

/* 分析模式选择弹层 */
.ai-mode-sub { font-size: 12px; color: #8e8e93; margin-bottom: 10px; }
.ai-mode-row { display: flex; align-items: center; gap: 11px; width: 100%; padding: 12px 2px; border: 0; border-bottom: 1px solid #f0f0f2; background: none; text-align: left; cursor: pointer; box-shadow: none; }
.ai-mode-row:last-child { border-bottom: 0; }
.ai-mode-ic { width: 34px; height: 34px; border-radius: 10px; background: var(--brand-tint, #eef1f8); color: var(--nav, #1d2542); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.ai-mode-txt { flex: 1; min-width: 0; }
.ai-mode-txt b { display: block; font-size: 15px; font-weight: 600; color: var(--ink); }
.ai-mode-txt b i { font-style: normal; font-size: 10px; font-weight: 700; color: #fff; background: #f39a38; border-radius: 5px; padding: 1px 5px; margin-left: 4px; vertical-align: 1px; }
.ai-mode-txt em { display: block; font-style: normal; font-size: 12px; color: #8e8e93; margin-top: 2px; }
.ai-mode-time { font-size: 12px; color: #8e8e93; flex-shrink: 0; }


/* 常用功能卡头：标题 + 全部功能入口 */
.quick-actions { padding: 14px 16px 16px; }
.qa-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; }
.qa-head h3 { margin: 0; font-size: 14px; font-weight: 600; color: var(--ink); }
.qa-all { display: inline-flex; align-items: center; gap: 2px; border: 0; background: none; padding: 3px 0 3px 6px; font-size: 12.5px; color: var(--text-3); cursor: pointer; box-shadow: none; }
.qa-all:active { color: var(--brand); }
.qa-all svg { width: 13px; height: 13px; }
/* 手机端不要这一行（伟 2026-10-27）：标题「常用功能」+ 右上角「全部功能」都去掉，
   全部功能变成宫格最后一格。⚠️ 必须写在这里，写在上面那个 767 块里会被这两条基础样式覆盖 */
@media (max-width: 767px) { .qa-head { display: none; } }
@media (max-width: 767px) {
  .quick-actions { padding: 16px 12px 16px; }
}

/* 桌面端趋势卡更高一点，柱子不至于挤成一条线（柱高是按百分比算的，会自动跟着长） */
@media (min-width: 768px) {
  .tr-bars { height: 158px; }
  .tr-bar { width: 40%; max-width: 52px; }
  .tr-col:hover .tr-bar { filter: brightness(1.04); }
}



/* ============================ 侧栏品牌区 / 用户区 ============================ */
/* logo.png 是 535×132 的横版，按宽度放大；下面一行是浅色小字，再下面是门店胶囊 */
.side .logo-img { width: 148px; height: auto; display: block; margin: 0 auto 10px; filter: brightness(0) invert(1); opacity: .95; }
/* 版本号就贴在门店胶囊下面，只留一点点空隙（伟 2026-10-26） */
.side-ver { text-align: center; font-size: 10.5px; color: rgba(255,255,255,.46); letter-spacing: .3px; margin-top: 5px; }

/* 门店胶囊：白 13% 底 + 细边框，和手机端首页顶部那个一致 */
.side-store {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  width: 148px; height: 32px; padding: 0 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .13);
  border: 1px solid rgba(255, 255, 255, .2);
  color: #e8eefb; font-size: 12.5px;
}
.side-store .ss-ic { display: flex; align-items: center; flex-shrink: 0; opacity: .92; }
.side-store .ss-nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* 用户区：左头像右姓名，下面头衔 */
/* 头像、姓名、头衔 垂直方向居中对齐；整组左对齐到 logo 左边缘（伟 2026-10-26）。
   .who 自身左右内边距是 14px，这里再补 17px → 头像左边缘 = 14 + 17 = 31px = logo 左边缘；
   退出登录按钮不动，仍是 14px 左右对称。 */
.side .who-top { display: flex; align-items: center; justify-content: flex-start; gap: 7px; padding-left: 17px; }
.who-ava {
  width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0;
  background: rgba(255, 255, 255, .16); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 600; line-height: 1;
}
.side .who b { color: #eef2f9; font-weight: 600; font-size: 13.5px; line-height: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.who-role { font-size: 11px; line-height: 1; color: #ffffff; white-space: nowrap; flex-shrink: 0; }

/* ============================ 最近收款这一行 ============================ */
/* 标题 + 审核分段 + 收款日志/服务项目 排成一行；窄屏放不下时允许换行，不至于挤成一坨 */
.recent-pay-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 16px 0 10px; }
.rp-title { font-size: 16px; font-weight: 600; color: var(--ink); flex-shrink: 0; }
.rp-seg { flex: 1; min-width: 150px; }
.rp-seg .seg button { padding: 0 8px; }
.rp-acts { display: flex; gap: 5px; margin-left: auto; flex-shrink: 0; }
.rp-acts .btn { padding: 4px 9px; font-size: 11.5px; box-shadow: var(--shadow-soft); }

/* 员工收款统计卡和上面那张卡之间留出间距（无待审核时原来是贴在一起的） */
.mini-stats { margin-bottom: 12px; }
.mini-stats + .card { margin-top: 0; }

/* 手机端把这一行压紧，保证「标题 + 三个分段 + 两个按钮」真的挤在一行 */
@media (max-width: 767px) {
  .recent-pay-head { gap: 8px; margin: 14px 0 8px; }
  .rp-title { font-size: 15px; }
  .rp-seg { min-width: 0; }
  .rp-seg .seg { padding: 2px; gap: 2px; }
  .rp-seg .seg button { padding: 3px 4px; font-size: 11.5px; }
  .rp-acts { gap: 4px; }
  .rp-acts .btn { padding: 3px 7px; font-size: 11px; }
}

/* 手机端弹层窄，16 个挤一行会变成小到点不中 —— 退回 8 个一行 */
/* 手机端弹层窄，改成 8 个一行撑满，手指也好点 */
@media (max-width: 767px) {
  .color-grid { display: grid; grid-template-columns: repeat(8, 1fr); gap: 9px; }
  .color-dot { width: 100%; height: auto; aspect-ratio: 1; }
}

/* ============================ 员工管理：操作按钮 ============================ */
/* 电脑端一行排开，不换行；窄屏才允许折行，否则按钮会把名字挤没 */
.emp-acts { display: flex; gap: 5px; justify-content: flex-end; flex-wrap: nowrap; flex-shrink: 0; align-self: center; }
.emp-acts .btn { white-space: nowrap; }

@media (max-width: 767px) {
  .emp-acts { flex-wrap: wrap; max-width: 150px; }
  .emp-acts .btn { padding: 3px 7px; font-size: 11.5px; }
}

/* 套餐卡里「AI 智能」下面的有效期小字 */
.kv-grid .v-sub { font-size: 11.5px; color: var(--text-3); margin-top: 1px; }

/* ============================ 详情页：消费/沟通 tab 行 ============================ */
/* 伟 2026-10-26：「记录一次沟通」挪到这一行右侧，切到消费记录时也常驻可点 */

/* ============================ 快捷按钮页（原「全部功能」） ============================ */
/* 伟 2026-10-26：电脑版一行放 8 个（原来 6 个，格子太宽）；手机端仍 4 个 */
.quick-grid-8 { grid-template-columns: repeat(8, 1fr); }
@media (max-width: 767px) {
  .quick-grid-8 { grid-template-columns: repeat(4, 1fr); }
}

/* ============================ 仓储：服务项目分组标题 ============================ */
/* 伟 2026-10-26：照小程序（pages/sku/sku.wxss 的 .wh-group-head）——整行浅灰底 + 8px 圆角 */
.wh-group-head {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 10px; margin-bottom: 4px;
  background: #F2F3F5; border-radius: 8px;
}
.wh-group-title { font-size: 13.5px; font-weight: 600; color: var(--ink); word-break: break-word; }
.wh-group-total { margin-left: auto; font-size: 12px; color: #A0A0AA; }

/* ============================ 总览：吸顶处的日期 ============================ */
/* 伟 2026-10-26：新历 + 星期 + 农历。原来是跟标题同字号（22px）抢视线，改成 13px 小字并**底对齐标题**。
   对齐用 flex-end + line-height:1 + margin-bottom:6px（实测小字底 48.2 / 标题底 48.5，差 0.3px）。
   ⚠️ 不要用 align-self: baseline —— 实测它是按行盒顶部对齐的（小字底比标题高 13px），不是视觉底线。
   （手机端整个页头是隐藏的，见 .ov-pagehead{display:none}，所以不需要断点覆盖） */
.page-head.ov-pagehead .hint {
  font-size: 13px; font-weight: 400; color: #A7AEBC; letter-spacing: 0;
  align-self: flex-end; line-height: 1; margin-bottom: 6px;
}

/* ============================ 续费说明弹窗 ============================ */
/* 伟 2026-10-26：两个二维码并排（小程序码 + 客服码），底部一行显示当前套餐 */
.renew-lead { color: #3D3D55; line-height: 1.7; margin-bottom: 12px; }
.renew-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.renew-card {
  border: 1px solid #EDEFF3; border-radius: 12px; padding: 12px 10px 11px;
  text-align: center; background: #FBFCFE;
}
.renew-card img {
  width: 100%; max-width: 168px; aspect-ratio: 1 / 1; object-fit: contain;
  display: block; margin: 0 auto 8px; border-radius: 10px; background: #fff;
}
.renew-t { font-size: 13px; font-weight: 600; color: var(--ink); }
.renew-s { font-size: 11.5px; color: var(--text-3); margin-top: 3px; line-height: 1.5; }
.renew-cur {
  margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line);
  font-size: 12.5px; color: var(--text-3); text-align: center;
}
.renew-cur b { color: var(--ink); }
@media (max-width: 420px) {
  .renew-grid { grid-template-columns: 1fr; }
  .renew-card img { max-width: 150px; }
}

/* 仓储产品行：左内边距与分组标题条文字对齐（伟 2026-10-26） */
.wh-sku { display: flex; align-items: center; gap: 10px; padding: 8px 0 8px 10px; border-bottom: 1px solid #f4f5f8; }

/* ============================ 统计页：左右两栏 ============================ */
/* 伟 2026-10-26：客户活跃度 + 产品复购 并排一行，放在收款趋势下方。手机端仍上下堆叠 */
.stats-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 12px; }
/* .card 自带 margin-bottom:12px，在 grid 里会和外层 margin 叠加成 24px，这里清掉 */
.stats-pair .card { margin-bottom: 0; height: 100%; box-sizing: border-box; display: flex; flex-direction: column; }
/* 两栏等高后活跃度这张内容偏少，让环形图占满剩余高度并垂直居中，免得底部空一大片 */
.stats-pair .card > .donut-wrap { flex: 1; }

@media (max-width: 767px) {
  .stats-pair { grid-template-columns: 1fr; }
}

/* 伟 2026-10-26：电脑端客户活跃度这张卡里「图 + 文」整体放大到 150%（各项尺寸等比 ×1.5）。
   只限定 .stats-pair 内，员工视角的「我的客户活跃度」和手机端都不受影响。 */
@media (min-width: 768px) {
  /* 图放大到 150%，但**文字不跟着放大**（伟 2026-10-26：字太大了）——
     图例字号取本页小标题的 14px（.card > h3），说明标签取 hint 那一档 11px。 */
  .stats-pair .donut-wrap { gap: 40px; }
  .stats-pair .donut-ring { width: 165px; height: 165px; flex-basis: 165px; }
  .stats-pair .donut-hole { width: 111px; height: 111px; }
  .stats-pair .donut-legend { gap: 10px; }
  .stats-pair .lg { font-size: 14px; }
  .stats-pair .lg-dot { width: 11px; height: 11px; margin-right: 7px; }
  .stats-pair .lg-n { margin-left: 5px; }
  .stats-pair .lg-tip { font-size: 11px; margin-left: 8px; padding: 2px 8px; border-radius: 8px; }
}

/* ============================ 收款页：员工收款统计 展开/收起 ============================ */
/* 伟 2026-10-26：标题右侧一个按钮，收起后只留标题行 */
.emp-stat-toggle {
  margin-left: auto; display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 8px; font-size: 12px; font-weight: 400; line-height: 1.4;
}
.emp-stat-toggle svg { width: 12px; height: 12px; transition: transform .16s ease; }
/* 展开态图标朝上（⇧ 收起）*/
.emp-stat-toggle.is-open svg { transform: rotate(180deg); }
.is-hidden { display: none !important; }

/* ============================ AI 管家：整页锁死，只有消息区滚 ============================ */
/* 伟 2026-10-26：整个页面不能滑，只有内部聊天可滚；大卡片上方（贴吸顶页头）和下方各留一点空隙。
   以前是用 JS 算高度（fitHeight），但没扣 #main 的 padding-bottom、手机 tab 栏和字号 zoom，
   算出来总是比视口高几十像素 → 整页还能滚一小段。改成 flex 撑满视口，天生不多不少。 */
#main.ai-lock {
  height: 100vh;
  /* ⚠️ 必须清掉 .main 的 min-height:100vh，否则 height:calc(100vh - 74px) 被它顶回去，
     整页还是 100vh 高，底部输入区正好压在底部 tab 栏下面（伟 2026-10-27 反馈的就是这个）。 */
  min-height: 0;
  display: flex;
  flex-direction: column;
  padding-bottom: 0;
  overflow: hidden;
}
/* 字号缩放（我的 → 字号）用的是 zoom，100vh 会跟着被放大 → 反算一下，否则底部溢出 */
body.fs-1 #main.ai-lock { height: calc(100vh / 1.06); }
body.fs-2 #main.ai-lock { height: calc(100vh / 1.13); }

/* 父级不滚了，页头不需要 sticky；底部留 10px 再接大卡片 */
#main.ai-lock .page-head { position: static; flex: 0 0 auto; margin-bottom: 10px; }
/* 大卡片撑满剩余空间，底部留 14px 空隙（手机 10px） */
#main.ai-lock .ai-wrap { flex: 1 1 auto; min-height: 0; margin-bottom: 14px; }

@media (max-width: 767px) {
  /* 手机有底部 tab 栏（74px），锁死高度要扣掉 */
  #main.ai-lock { height: calc(100vh - 74px); }
  #main.ai-lock .ai-wrap { margin-bottom: 10px; }

  /* 伟 2026-10-27：一开始打字（body.ai-typing）就把底部 tab 栏收起来，页面也锁死不滚。
     tab 栏是 fixed 且含安全区（iPhone 上到 90px），原来会压住输入框；
     键盘弹起后的真实高度由 ai.js 按 visualViewport 写行内 height，这里只做兜底。 */
  body.ai-typing .bottombar { display: none; }
  body.ai-typing { overflow: hidden; overscroll-behavior: none; }
  body.ai-typing #main.ai-lock { height: 100dvh; }
  body.ai-typing #main.ai-lock .ai-wrap { margin-bottom: 6px; }
}
/* 收起后标题下面不需要那 12px 留白，卡片才紧 */
.card.is-collapsed > h3 { margin-bottom: 0; }

/* 未读数：通知入口搬到「我的」页后显示在那一行右侧（伟 2026-10-26） */
.menu-row .mr-badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 17px; height: 17px; padding: 0 5px; margin-right: 6px;
  border-radius: 999px; background: #e5484d; color: #fff;
  font-size: 10.5px; font-weight: 600; line-height: 1; box-sizing: border-box;
}

/* 表单里的提醒文字（如「先上传收款凭证，才能提交」）—— 红色，别和灰色说明混在一起 */
.sub[data-warn="1"] { color: #c0392b; }