/* ==========================================================================
   私域电商 CRM · 阶段一基础录入界面
   设计口径：中性灰底 + 单一主色（靛蓝），信息密度适中，适合长时间录入数据
   ========================================================================== */

:root {
  --bg: #f4f6fa;
  --panel: #ffffff;
  --line: #e3e8ef;
  --line-strong: #cfd6e4;
  --text: #1c2434;
  --text-2: #55627a;
  --muted: #8b96ab;
  --brand: #2f5fe0;
  --brand-dark: #2449b3;
  --brand-soft: #eaf0ff;
  --ok: #17845c;
  --ok-soft: #e6f6ef;
  --warn: #b5761b;
  --warn-soft: #fdf3e2;
  --danger: #c0392b;
  --danger-soft: #fdeeec;
  --radius: 10px;
  --shadow: 0 1px 2px rgba(28, 36, 52, .05), 0 8px 24px rgba(28, 36, 52, .06);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  min-height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC',
    'Hiragino Sans GB', 'Microsoft YaHei', 'Source Han Sans SC', sans-serif;
  font-size: 14px;
  line-height: 1.6;
}

.hidden { display: none !important; }
.muted { color: var(--muted); }

/* --------------------------------- 通用控件 -------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 34px;
  padding: 0 14px;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: #fff;
  color: var(--text);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background .15s, border-color .15s, color .15s;
  white-space: nowrap;
}
.btn:hover { border-color: var(--brand); color: var(--brand); background: var(--brand-soft); }
.btn.primary { background: var(--brand); border-color: var(--brand); color: #fff; }
.btn.primary:hover { background: var(--brand-dark); border-color: var(--brand-dark); color: #fff; }
.btn.ghost { border-color: transparent; background: transparent; color: var(--text-2); }
.btn.ghost:hover { background: var(--brand-soft); color: var(--brand); }
.btn.ghost.danger:hover { background: var(--danger-soft); color: var(--danger); }
.btn.sm { height: 28px; padding: 0 10px; font-size: 12px; }
.btn.block { width: 100%; height: 40px; font-size: 15px; }
.btn:disabled { opacity: .55; cursor: not-allowed; }
/* 危险操作的实心红按钮（删除员工），与普通「保存」按钮一眼区分开 */
.btn.danger-solid { background: var(--danger); border-color: var(--danger); color: #fff; }
.btn.danger-solid:hover { background: #a5321f; border-color: #a5321f; color: #fff; }

.input, select, textarea {
  width: 100%;
  min-height: 34px;
  padding: 6px 10px;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: #fff;
  color: var(--text);
  font-family: inherit;
  font-size: 13px;
  outline: none;
  transition: border-color .15s, box-shadow .15s;
}
.input:focus, select:focus, textarea:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(47, 95, 224, .12);
}
textarea { min-height: 74px; resize: vertical; }
select:disabled, input:disabled { background: #f2f4f8; color: var(--text-2); cursor: not-allowed; }

.badge {
  display: inline-block;
  padding: 1px 8px;
  border-radius: 999px;
  font-size: 12px;
  line-height: 18px;
  background: #eef1f6;
  color: var(--text-2);
}
.badge.ok { background: var(--ok-soft); color: var(--ok); }
.badge.warn { background: var(--warn-soft); color: var(--warn); }
.badge.danger { background: var(--danger-soft); color: var(--danger); }
.badge.brand { background: var(--brand-soft); color: var(--brand); }

/* --------------------------------- 登录页 -------------------------------- */

/* 登录页背景：斜向浅色渐变打底，左上角一枚品牌色光晕、右下角放一个大号公司菱形标，
   压到几乎看不出来（opacity .07）——不抢视线，但一眼能认出是哪家公司的系统。 */
.login-view {
  position: relative;
  overflow: hidden;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: linear-gradient(160deg, #eef2fb 0%, #f7f9fc 40%, #eaf0ff 100%);
}
.login-view::before {
  content: '';
  position: absolute;
  right: -120px; bottom: -140px;
  width: 480px; height: 480px;
  background: url('./assets/logo.png') center / contain no-repeat;
  opacity: .07;
  transform: rotate(-8deg);
  pointer-events: none;
}
.login-view::after {
  content: '';
  position: absolute;
  left: -150px; top: -170px;
  width: 400px; height: 400px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0, 160, 232, .16), rgba(0, 160, 232, 0) 70%);
  pointer-events: none;
}
.login-card {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 380px;
  padding: 34px 28px 24px;
  background: var(--panel);
  border-radius: 16px;
  box-shadow: 0 2px 4px rgba(28, 36, 52, .04), 0 18px 44px rgba(28, 36, 52, .1);
}
/* 卡片顶边压一条品牌色渐变，和白底卡片拉开层次 */
.login-card::before {
  content: '';
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 4px;
  border-radius: 16px 16px 0 0;
  background: linear-gradient(90deg, #00a0e8, #2f5fe0);
}
.login-brand { text-align: center; margin-bottom: 22px; }
.login-brand h1 { margin: 14px 0 4px; font-size: 21px; letter-spacing: .5px; }
.login-brand p { margin: 0; color: var(--muted); font-size: 12px; }

/* 品牌标记（登录页头像 / 侧边栏左上角）：淡蓝渐变小方块 + 细腻内描边 + 品牌色柔光，
   中间是公司菱形标。比原来一块纯色写着 CRM 更像正式的品牌头图。 */
.brand-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px; height: 46px; margin: 0 auto;
  border-radius: 14px;
  background: linear-gradient(150deg, #f4fbff 0%, #e4f3ff 60%, #d7ecff 100%);
  box-shadow: inset 0 0 0 1px rgba(0, 160, 232, .18), 0 6px 16px rgba(0, 160, 232, .16);
}
.brand-mark img { display: block; width: 64%; height: 64%; object-fit: contain; }
/* 登录页的头像放大一档，配 21px 标题比例刚好 */
.login-brand .brand-mark { width: 76px; height: 76px; border-radius: 22px; }
.login-brand .brand-mark img { width: 66%; height: 66%; }

.field { display: block; margin-bottom: 14px; }
.field > span { display: block; margin-bottom: 6px; color: var(--text-2); font-size: 12px; font-weight: 500; }
.form-error { min-height: 20px; margin: 0 0 8px; color: var(--danger); font-size: 12px; }
.login-tip { margin: 14px 0 0; text-align: center; color: var(--muted); font-size: 12px; }
/* 卡片底部品牌落款：一条分隔线 + 小号 logo，把「这是哪家公司的系统」补齐 */
.login-foot {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  margin-top: 16px; padding-top: 12px;
  border-top: 1px solid var(--line);
  color: var(--muted); font-size: 12px; letter-spacing: .3px;
}
.login-foot img { width: 16px; height: 16px; object-fit: contain; opacity: .8; }

/* --------------------------------- 主框架 -------------------------------- */

.layout { display: grid; grid-template-columns: 224px 1fr; min-height: 100vh; }

.sidebar {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 18px 14px;
  background: #fff;
  border-right: 1px solid var(--line);
}
.brand-block { display: flex; align-items: center; gap: 10px; }
.brand-block .brand-mark { margin: 0; width: 40px; height: 40px; border-radius: 12px; box-shadow: inset 0 0 0 1px rgba(0, 160, 232, .16); }
.brand-block .brand-mark img { width: 66%; height: 66%; }
.brand-text { display: flex; flex-direction: column; line-height: 1.35; }
.brand-text strong { font-size: 14px; }
.brand-text span { color: var(--muted); font-size: 11px; }

.nav { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.nav button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 9px 12px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--text-2);
  font-family: inherit;
  font-size: 13.5px;
  text-align: left;
  cursor: pointer;
}
.nav button:hover { background: #f4f6fa; color: var(--text); }
.nav button.active { background: var(--brand-soft); color: var(--brand); font-weight: 600; }
/* 「只读」标记靠右，右侧再挂未读消息角标时不会把两个都挤到中间 */
.nav button em { font-style: normal; font-size: 11px; color: var(--muted); margin-left: auto; }
.nav button.active em { color: var(--brand); }

.sidebar-foot { border-top: 1px solid var(--line); padding-top: 12px; }
.me { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.me span { font-weight: 600; }
.me em { font-style: normal; color: var(--muted); font-size: 12px; }
.foot-btns { display: flex; gap: 6px; }

.main { display: flex; flex-direction: column; gap: 14px; padding: 20px 22px 28px; min-width: 0; }

.topbar { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.title-block h1 { margin: 0; font-size: 19px; }
.title-block .desc { margin: 4px 0 0; color: var(--muted); font-size: 12px; }
.actions { display: flex; gap: 8px; align-items: center; }
/* 关键词搜索框：提示语是「搜索 订单号 / 产品名称 / 客户姓名」这样的中文清单，
   宽度给足才不至于被截成「搜索 订单号 / 产品名…」；再长的清单靠鼠标悬停的 title 看全。 */
.actions .input { width: 300px; }

/* 筛选条吸顶：页面往下滚（表格很长时）筛选条件始终锁在顶部，随时能改；
   所有数据模块共用这个 #filter-bar，以后新增版块自动继承同样的行为。
   padding 是给吸顶时上下留出本色背景，免得下方滚过去的表格从缝隙里透出来。 */
.filter-bar {
  display: flex; flex-wrap: wrap; gap: 10px;
  position: sticky; top: 0; z-index: 30;
  padding: 10px 0;
  background: var(--bg);
  border-bottom: 1px solid transparent;
  transition: box-shadow .18s ease, border-color .18s ease;
}
/* 没有筛选条件的模块（bar.innerHTML 为空）整条不占位，别在页面里留一条空白 */
.filter-bar:empty { display: none; }
/* 真的吸住时（滚动后由 JS 加 .is-stuck）补一条分隔线 + 淡阴影，表明下面是滚过去的内容 */
.filter-bar.is-stuck {
  border-bottom-color: var(--line);
  box-shadow: 0 10px 18px -16px rgba(28, 36, 52, .6);
}
.filter-bar .filter { display: flex; align-items: center; gap: 6px; }
.filter-bar .filter label { color: var(--text-2); font-size: 12px; white-space: nowrap; }
.filter-bar select { width: auto; min-width: 130px; }

.panel { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; }
.panel-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.stat { color: var(--text-2); font-size: 12.5px; }
.ro-tip { color: var(--warn); background: var(--warn-soft); padding: 2px 10px; border-radius: 999px; font-size: 12px; }

/* 表格滚动区：横向（宽表格拖动）+ 纵向（高度由 app.js 的 syncTableHeight 压到视口剩余高度）都在这里滚。
   thead 靠 sticky 吸在滚动区顶部——往下翻长表格时，「序号 / ID / 查看 / 订单号 / 客户姓名…」这一行列名始终锁在第一行。
   注意 sticky 只认最近的滚动容器：以前这里只有 overflow-x，纵向永远滚不起来，表头自然吸不住，所以高度必须一起收进来。 */
.table-wrap { overflow: auto; }
.table { width: 100%; border-collapse: separate; border-spacing: 0; white-space: nowrap; }
.table th, .table td { padding: 10px 14px; text-align: left; border-bottom: 1px solid var(--line); font-size: 13px; }
/* border-collapse 用 separate：collapse 模式下 th 的下边线归表格网格画，吸顶时不会跟着 th 走，会出现「表头掉线」；separate + spacing 0 视觉不变 */
.table th { background: #fafbfd; color: var(--text-2); font-weight: 600; font-size: 12.5px; position: sticky; top: 0; z-index: 2; }
.table tbody tr:hover { background: #f9fbff; }
.table td.actions-cell { display: flex; gap: 6px; }
/* 发货提醒工作台：定金 / 代收 / 成交三个金额并排。
   代收金额是财务照着写面单的数（快递上门要现收多少尾款），单拎出来用品牌色加粗，
   和旁边「客户已付的定金」「订单总额」区分开；为 0 的订单不凑热闹，走上面的 .muted 弱化样式。 */
.table .cod-sum { color: var(--brand); font-weight: 700; }
/* 「登记发货」弹窗里同一笔代收金额也要看得见，标记同上（弹窗键值对见 board.js 的 openShip） */
.kv b.cod { color: var(--brand); }
/* 列表最前面的「序号」列：只放一个行号，窄一点、别抢正文的宽度。
   数字用等宽字形（tabular-nums）：10 和 9 同宽，行号上下对齐，扫一眼数得清第几条（见 core.js 的 seqCell） */
.table th.seq-col, .table td.seq-col {
  width: 1%; white-space: nowrap; color: var(--text-2); font-variant-numeric: tabular-nums;
}
/* 列表最前面的「查看」列：只放一个按钮，窄一点、别抢正文的宽度 */
.table th.view-col, .table td.view-col { width: 1%; white-space: nowrap; }
/* 列表里的长文本（如「产品名称」）：只平铺前几个字，其余收进气泡。
   一列长货名会把整张表撑得很宽、每行都读不全；虚线下划线提示「这里可以点」，
   悬停看完整内容（原生 title）、点一下摊开全文（见 core.js 的 clipCellText） */
.cell-clip {
  display: inline-block; max-width: 100%; padding: 0; border: 0; background: none;
  font: inherit; line-height: inherit; color: inherit; text-align: left; cursor: pointer;
  /* 用虚线「下划线」而不是 border-bottom：不占一行高度，表格行高与旁边几列保持齐平 */
  text-decoration-line: underline; text-decoration-style: dashed;
  text-decoration-color: #c9d4e8; text-underline-offset: 3px;
}
.cell-clip:hover { color: var(--brand-dark); text-decoration-color: var(--brand); }
.table .empty { padding: 32px 16px; text-align: center; color: var(--muted); }

.pager { display: flex; align-items: center; justify-content: center; gap: 14px; padding: 12px; border-top: 1px solid var(--line); }
.page-info { color: var(--text-2); font-size: 12.5px; }

/* --------------------------------- 弹窗 -------------------------------- */

.modal-root {
  position: fixed; inset: 0; z-index: 60;
  display: flex; align-items: flex-start; justify-content: center;
  padding: 48px 16px;
  background: rgba(20, 26, 38, .42);
  overflow-y: auto;
}
.modal {
  width: 100%; max-width: 720px;
  background: #fff; border-radius: 14px; box-shadow: 0 20px 60px rgba(20, 26, 38, .22);
  /* 字段多的表（如客户档案）用「弹窗定高 + 内容区滚动」，标题与保存按钮始终可见 */
  display: flex; flex-direction: column;
  max-height: calc(100vh - 96px);
}
.modal-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid var(--line); flex: 0 0 auto; }
.modal-head h2 { margin: 0; font-size: 16px; }
.modal-close { border: 0; background: transparent; color: var(--muted); font-size: 20px; line-height: 1; cursor: pointer; }
.modal-close:hover { color: var(--danger); }
.modal-body { padding: 18px 20px; display: grid; grid-template-columns: 1fr 1fr; gap: 14px 16px; }
.modal > .modal-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
/* 表单分组标题（订单 30+ 项字段靠它分段，避免一长条输入框看不下去） */
.form-group {
  grid-column: 1 / -1;
  margin: 2px 0 -4px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .6px;
  color: var(--muted);
}
.form-group:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.modal-body .field.full { grid-column: 1 / -1; }
.field .hint { display: block; margin-top: 4px; color: var(--muted); font-size: 11.5px; }
.field .req { color: var(--danger); margin-left: 3px; }
.modal-foot { display: flex; justify-content: flex-end; gap: 10px; padding: 14px 20px; border-top: 1px solid var(--line); }
.modal-error { grid-column: 1 / -1; margin: 0; color: var(--danger); font-size: 12.5px; min-height: 18px; }

/* ------------- 导入 / 导出（员工档案 / 客户档案 / 成交订单 / 退货单共用） ------------- */

/* 导入弹窗顶部的步骤说明：把「先下模板、再传文件」两件事摆在最前面 */
.import-tips {
  grid-column: 1 / -1;
  margin-bottom: 12px; padding: 10px 12px;
  border: 1px solid var(--line); border-left: 3px solid var(--brand);
  border-radius: 8px; background: #fafbfd;
  color: var(--text-2); font-size: 12.5px; line-height: 1.7;
}
.import-tips p { margin: 0 0 4px; }
.import-tips p:last-child { margin-bottom: 0; }
/* 文案里的「导入模板」：做成链接样式的按钮，不去抢「开始导入」的视觉重心 */
.link-btn {
  border: 0; padding: 0; background: none;
  color: var(--brand); font-size: 12.5px; font-weight: 600;
  text-decoration: underline; cursor: pointer;
}
.link-btn:hover { color: var(--brand-dark); }

.check-row {
  grid-column: 1 / -1;
  display: flex; align-items: flex-start; gap: 8px;
  margin: 2px 0; color: var(--text-2); font-size: 12.5px; line-height: 1.6;
}
.check-row input { flex: 0 0 auto; width: 15px; height: 15px; min-height: 0; margin: 2px 0 0; }

/* 导入结果：一行汇总 + 有问题的行逐条列出（多了就在框内滚动） */
.import-result {
  grid-column: 1 / -1;
  margin-top: 12px; padding: 10px 12px;
  max-height: 220px; overflow-y: auto;
  border: 1px solid var(--line); border-radius: 10px; background: #fafbfd;
  color: var(--text-2); font-size: 12.5px; line-height: 1.7;
}
.import-result .sum { margin: 0; color: var(--text); }
.import-result ul { margin: 6px 0 0; padding-left: 18px; }
.import-result li { margin-bottom: 3px; }
.import-result .fail { color: var(--danger); }
.import-result .skip { color: var(--warn); }
.import-result .more { margin: 6px 0 0; color: var(--muted); font-size: 12px; }
/* 危险操作弹窗里的红色警示块（删除员工前的「不可恢复」提示） */
.danger-box {
  grid-column: 1 / -1;
  padding: 10px 12px;
  border: 1px solid #f2c9c2; border-radius: 10px;
  background: var(--danger-soft); color: var(--danger);
  font-size: 12.5px; line-height: 1.6;
}
.danger-box strong { display: block; margin-bottom: 2px; font-size: 13px; }
.danger-box p { margin: 0; }
/* 离职继承弹窗：继承人权限不匹配时的提醒（黄色，不挡提交） */
.handover-warn { grid-column: 1 / -1; margin: 0; color: var(--warn); font-size: 12.5px; line-height: 1.6; }
.handover-warn:empty { display: none; }
/* 列表里标出「这条记录是继承来的」：归属人后面只挂一个小问号，
   点开才展开「谁移交的 / 移交时间 / 交接说明」（见 app.js 的 toggleHandoverPop），
   长文案不再把归属列撑宽 */
.handover-tag {
  display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px; margin-left: 4px; padding: 0;
  border: 1px solid #c8d7ff; border-radius: 50%;
  background: var(--brand-soft); color: var(--brand-dark);
  font-size: 11px; line-height: 1; font-weight: 700; cursor: pointer;
  vertical-align: 1px;
}
.handover-tag:hover { border-color: var(--brand); background: #e3ebff; }
/* 点问号展开的来源气泡：fixed 贴在问号下方（z-index 高于弹窗、低于提示条）
   .cell-pop 是同一个外观、同一套定位口径：列表里长文本（「产品名称」）点开的全文气泡 */
.handover-pop,
.cell-pop {
  position: fixed; z-index: 70; max-width: 320px;
  padding: 8px 10px; border: 1px solid #cfdcff; border-radius: 8px;
  background: #fff; box-shadow: 0 10px 26px rgba(15, 23, 42, .18);
  font-size: 12.5px; line-height: 1.6;
}
/* 全文气泡：货名可能很长、还带「+」拼串，允许换行并按词断行，一屏读得完（见 core.js 的 toggleCellPop） */
.cell-pop { max-width: 360px; white-space: normal; word-break: break-word; }
.handover-pop strong { display: block; color: var(--brand-dark); }
.handover-pop span { display: block; color: var(--text-2); }
/* 编辑表单顶部：把「继承来源」摆在最显眼的位置（被继承的记录一眼看出是继承获得的） */
.handover-note-box {
  grid-column: 1 / -1;
  padding: 8px 12px;
  border: 1px solid #cfdcff; border-left: 3px solid var(--brand);
  border-radius: 8px; background: var(--brand-soft);
  font-size: 12.5px; line-height: 1.6;
}
.handover-note-box strong { display: block; color: var(--brand-dark); font-size: 13px; }
.handover-note-box span { color: var(--text-2); }
/* 审核弹窗（如退货单：财务审核销售提的退货申请）：上半部分并排列出这条记录的关键内容 */
.review-summary {
  grid-column: 1 / -1;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 8px 18px; padding: 12px 14px;
  border: 1px solid var(--line); border-radius: 10px; background: #fafbfd;
}
.review-item { display: flex; gap: 8px; align-items: baseline; font-size: 12.5px; }
.review-item span { flex: 0 0 auto; color: var(--muted); }
.review-item strong { color: var(--text-2); font-weight: 600; }
/* 审核通过 / 未通过的状态条（画面上一眼看出这张单走到哪一步了） */
.review-state {
  grid-column: 1 / -1;
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 8px 12px; border-radius: 10px; font-size: 12.5px;
  background: var(--brand-soft); color: var(--brand-dark);
}
.review-state.warn { background: var(--warn-soft); color: var(--warn); }
.review-state em { font-style: normal; color: var(--muted); }

/* 图片字段（退货单的「退款收款码」等）：缩略图 + 选择图片 + 移除 */
.image-picker { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.image-picker .image-thumb {
  width: 84px; height: 84px; object-fit: cover; cursor: zoom-in;
  border: 1px solid var(--line); border-radius: 10px; background: #fafbfd;
}
.image-picker .image-thumb.hidden, .image-picker .image-clear.hidden { display: none; }
.image-picker .image-add {
  display: inline-flex; align-items: center; justify-content: center; height: 32px; padding: 0 12px;
  border: 1px dashed var(--line-strong); border-radius: 8px; background: #fff;
  color: var(--brand); font-size: 12.5px; cursor: pointer;
}
.image-picker .image-add:hover { background: var(--brand-soft); border-color: var(--brand); }
.image-picker .image-add input[type=file] { display: none; }

/* 退款凭证（退货单：财务打款完成后上传的转账截图） */
.proof-block { grid-column: 1 / -1; }
.proof-block > span { display: block; margin-bottom: 6px; color: var(--text-2); font-size: 12px; font-weight: 500; }
.proof-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(108px, 1fr)); gap: 10px; }
.proof-item {
  position: relative; border: 1px solid var(--line); border-radius: 10px;
  overflow: hidden; background: #fafbfd;
}
.proof-item img { display: block; width: 100%; height: 92px; object-fit: cover; cursor: zoom-in; }
.proof-item .proof-name {
  display: block; padding: 4px 6px; font-size: 11px; color: var(--muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.proof-item .proof-del {
  position: absolute; top: 4px; right: 4px; width: 20px; height: 20px; padding: 0;
  border: 0; border-radius: 50%; background: rgba(20, 26, 38, .62); color: #fff;
  font-size: 13px; line-height: 20px; text-align: center; cursor: pointer;
}
.proof-item .proof-del:hover { background: var(--danger); }
/* 客户退款账户（收款码 / 银行信息，财务打款照着这里打） */
.payee-box {
  display: flex; align-items: flex-start; gap: 12px; flex-wrap: wrap;
  padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: #fafbfd;
}
.payee-box img {
  width: 120px; height: 120px; object-fit: contain; cursor: zoom-in;
  border: 1px solid var(--line); border-radius: 8px; background: #fff;
}
.payee-box pre {
  flex: 1 1 220px; margin: 0; white-space: pre-wrap; word-break: break-all;
  font-family: inherit; font-size: 12.5px; line-height: 1.7; color: var(--text-2);
}
.proof-empty {
  grid-column: 1 / -1; padding: 14px; border: 1px dashed var(--line-strong); border-radius: 10px;
  background: #fafbfd; color: var(--muted); font-size: 12.5px; text-align: center;
}
.proof-add {
  display: flex; align-items: center; justify-content: center; min-height: 62px;
  border: 1px dashed var(--line-strong); border-radius: 10px; background: #fff;
  color: var(--brand); font-size: 12.5px; cursor: pointer;
}
.proof-add:hover { background: var(--brand-soft); border-color: var(--brand); }
.proof-add input[type=file] { display: none; }

.computed-box {
  display: flex; align-items: center; min-height: 34px; padding: 6px 10px;
  border: 1px dashed var(--line-strong); border-radius: 8px; background: #fafbfd;
  color: var(--text-2); font-size: 13px;
}

/* 自动计算字段（如「成交金额」= 定金 + 代收）：只读，视觉上区别于可填写项 */
.field input[data-auto] {
  background: #fafbfd; border-style: dashed; color: var(--text-2); cursor: default;
}

/* ------------------- 外键字段（关联订单 / 客户 / 员工…）：可输入检索的组合框 ------------------- */
/* 外壳：输入框铺满整格（与表单里其它输入框同款样式），右侧一个展开箭头；
   真正的取值控件是视觉隐藏的原生 select（.hidden），只在 JS 里读写值，不出现在界面上。 */
.ref-combo { position: relative; display: flex; align-items: center; width: 100%; }
.ref-combo .ref-input { flex: 1 1 auto; width: 100%; min-width: 0; padding-right: 24px; }
.ref-toggle {
  position: absolute; right: 3px; display: grid; place-items: center;
  width: 20px; height: 20px; border: 0; border-radius: 5px;
  background: transparent; color: var(--muted); cursor: pointer;
}
.ref-toggle:hover { background: var(--brand-soft); color: var(--brand); }
.ref-toggle svg { width: 14px; height: 14px; }
.ref-combo .ref-input:disabled + .ref-toggle { cursor: not-allowed; color: var(--muted); opacity: .6; }
/* 必填未填时标红（原生必填气泡对隐藏控件不生效，见 app.js 的 submitForm） */
.ref-combo.invalid .ref-input { border-color: var(--danger); box-shadow: 0 0 0 2px rgba(214, 69, 69, .12); }
/* 候选项面板：fixed 定位，贴到输入框正下方（弹窗内容区 overflow: auto，绝对定位会被裁掉一截），位置由 JS 算 */
.ref-list {
  position: fixed; z-index: 70; max-height: 264px; overflow: auto; padding: 4px;
  border: 1px solid var(--line); border-radius: 10px; background: #fff;
  box-shadow: 0 14px 34px rgba(20, 26, 38, .16);
}
.ref-item {
  display: block; width: 100%; padding: 7px 10px;
  border: 0; border-radius: 6px; background: transparent;
  color: var(--text); font-family: inherit; font-size: 13px; text-align: left; cursor: pointer;
}
.ref-item:hover, .ref-item.active { background: var(--brand-soft); color: var(--brand); }
.ref-item.current { font-weight: 600; }
.ref-item:disabled { background: transparent; color: var(--muted); cursor: not-allowed; }
.ref-empty { padding: 8px 10px; color: var(--muted); font-size: 12.5px; }

/* --------------------------------- 提示条 -------------------------------- */

.toast {
  position: fixed; left: 50%; bottom: 32px; transform: translateX(-50%);
  z-index: 80;
  max-width: 80vw;
  padding: 10px 18px;
  border-radius: 10px;
  background: #1c2434;
  color: #fff;
  font-size: 13px;
  box-shadow: 0 10px 30px rgba(20, 26, 38, .25);
}
.toast.error { background: var(--danger); }

/* --------------------------------- 响应式 -------------------------------- */

/* ================ 左侧菜单（按部门分区）+ 业务工作台（复购提醒 / 预设维护） ================ */

/* 部门分区标题：深色加粗 + 品牌色竖条 + 部门间分隔线，一眼分清菜单属于哪个部门 */
.nav-group-title {
  display: flex; align-items: center; gap: 6px;
  margin: 10px 12px 6px; padding-top: 10px;
  border-top: 1px solid var(--line);
  color: var(--text); font-size: 12.5px; font-weight: 700; letter-spacing: .5px;
}
.nav-group-title:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.nav-group-title::before {
  content: ''; width: 3px; height: 12px; border-radius: 2px; background: var(--brand);
}
/* 部门下没有当前角色能看的页面时的占位（保持四个部门都在，不显得像缺了一块） */
.nav-empty { margin: 2px 12px; color: var(--muted); font-size: 12px; }

/* 菜单项右侧的数量角标（如财务部「发货提醒」的待发货笔数），数量为 0 时隐藏 */
.nav-badge {
  min-width: 18px; padding: 0 6px; border-radius: 999px;
  background: var(--danger); color: #fff;
  font-size: 11px; font-weight: 600; line-height: 18px; text-align: center;
}
.nav button.active .nav-badge { background: var(--brand); }

/* 不属于任何部门的菜单项（系统操作日志）与上面的部门分隔开 */
.nav-divider { margin: 6px 12px 8px; border-top: 1px solid var(--line); }
.nav-divider:first-child { display: none; }

.tool-loading, .empty, .empty-mini { padding: 28px; text-align: center; color: var(--muted); font-size: 13px; }
.empty-mini { padding: 12px; }
/* 空数据 / 加载中的占位：淡淡放一枚公司菱形标，页面空着的时候也有归属感，不抢视线 */
.empty::before, .tool-loading::before {
  content: '';
  display: block;
  width: 44px; height: 44px;
  margin: 0 auto 10px;
  background: url('./assets/logo.png') center / contain no-repeat;
  opacity: .2;
}
.empty-mini::before { display: none; }
.sub { color: var(--muted); font-size: 11.5px; }

.stat-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.stat-card {
  display: flex; flex-direction: column; gap: 2px;
  padding: 14px 16px;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: #fff; box-shadow: var(--shadow);
}
.stat-card .stat-label { color: var(--text-2); font-size: 12px; }
.stat-card .stat-value { font-size: 24px; line-height: 1.3; }
.stat-card .stat-hint { color: var(--muted); font-size: 11.5px; }
.stat-card.brand .stat-value { color: var(--brand); }
.stat-card.warn .stat-value { color: var(--warn); }
.stat-card.danger .stat-value { color: var(--danger); }
.stat-card.ok .stat-value { color: var(--ok); }

/* 今日待办：三个版块卡（快递跟踪 / 定期回访 / 复购提醒），点哪个下面就看哪个。
   这张卡唯一的任务是「提醒人」，所以：
   ① 版块名 16px 加粗 + 当前压着的待办数做成 21px 大数字配实心色块（红 / 黄 / 绿），
      两样并排在同一行，一眼先看清「哪个版块、压了多少单」；
   ② 卡片边缘描 2px 状态色 + 左侧压一条 6px 同色竖条 + 阴影加厚一档，
      有超期一眼就是红框、有未处理的活是黄框、清空了是绿框；
   ③ 整卡压成「标题行 + 说明行」两行：原来标题、大数字、说明各占一行，再加 16px 内边距，
      一条卡吃掉近 190px 高，把下面的客户列表整个顶出屏幕，所以做扁（说明与口径并排一行走）。 */
.section-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 14px; }
.section-card {
  display: flex; flex-direction: column; gap: 6px; text-align: left;
  padding: 11px 16px 11px 18px;
  border: 2px solid var(--line-strong); border-left: 6px solid var(--line-strong);
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 4px 10px rgba(28, 36, 52, .08), 0 14px 30px rgba(28, 36, 52, .10);
  font-family: inherit; cursor: pointer;
  transition: box-shadow .15s, transform .15s;
}
.section-card:hover { transform: translateY(-1px); box-shadow: 0 6px 14px rgba(28, 36, 52, .10), 0 18px 36px rgba(28, 36, 52, .14); }
/* 状态色：整张卡描边 + 顶部淡淡同色底。这三条排在 .active 前面，
   选中态改的是四边颜色，靠后面的 .active.tone-x 再把左侧竖条的颜色抢回来 */
.section-card.tone-warn { border-color: var(--warn); border-left-color: var(--warn); background: linear-gradient(180deg, var(--warn-soft), #fff 55%); }
.section-card.tone-danger { border-color: var(--danger); border-left-color: var(--danger); background: linear-gradient(180deg, var(--danger-soft), #fff 55%); }
.section-card.tone-ok { border-color: var(--ok); border-left-color: var(--ok); background: linear-gradient(180deg, var(--ok-soft), #fff 55%); }
/* 选中：主色描边 + 外圈光晕；左侧竖条仍保留版块自己的状态色（红 / 黄 / 绿），
   否则切到有超期的版块时，红色警示会被主色盖掉 */
.section-card.active { border-color: var(--brand); box-shadow: 0 0 0 4px rgba(47, 95, 224, .16), 0 14px 30px rgba(28, 36, 52, .12); }
.section-card.active.tone-warn { border-left-color: var(--warn); }
.section-card.active.tone-danger { border-left-color: var(--danger); }
.section-card.active.tone-ok { border-left-color: var(--ok); }
/* 标题行：版块名 + 大数字 + 右上角状态徽标并排走一行；窄屏（卡片被挤到 300px 左右）自动折行 */
.section-card .section-top { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.section-card .section-title { font-size: 16px; font-weight: 700; letter-spacing: .3px; color: var(--text); }
.section-card.active .section-title { color: var(--brand); }
/* 右上角状态徽标（超期 N 单 / 待处理 N 单 / 已清空）：margin-left auto 把它顶到卡片最右边 */
.section-card .badge { margin-left: auto; padding: 1px 9px; font-size: 12px; line-height: 19px; font-weight: 600; }
/* 大数字：待办数 + 单位说明。实心色块 + 白字，紧挨着版块名，是这张卡里最跳的元素 */
.section-card .section-count {
  display: inline-flex; align-items: baseline; gap: 5px;
  padding: 0 9px; border-radius: 8px;
  background: var(--brand); color: #fff;
  box-shadow: 0 2px 6px rgba(28, 36, 52, .16);
  font-variant-numeric: tabular-nums;
}
.section-card .section-count b { font-size: 21px; line-height: 1.35; font-weight: 700; }
.section-card .section-count em { font-style: normal; font-size: 12px; font-weight: 600; }
.section-card.tone-warn .section-count { background: var(--warn); }
.section-card.tone-danger .section-count { background: var(--danger); }
.section-card.tone-ok .section-count { background: var(--ok); }
/* 说明行：版块口径 + 补充数字（如「每 10 天回访一次」）并排走一行，不再各占一行 */
.section-card .section-note { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; }
.section-card .section-desc { color: var(--text-2); font-size: 12.5px; line-height: 1.5; }
.section-card .section-meta { color: var(--muted); font-size: 12px; }

/* 预留入口：提醒设置规则（稍后开发），虚线灰底一眼看出是占位而不是坏按钮 */
.reserve-slot {
  padding: 3px 10px; border: 1px dashed var(--line); border-radius: 999px;
  color: var(--muted); font-size: 11.5px; white-space: nowrap;
}

/* 口径条：一排小圆片。版位整体要压扁（见上面 .section-card 的说明），所以行距与内边距都收一号 */
.overview-bar { display: flex; flex-wrap: wrap; gap: 6px; }
.overview-bar span {
  padding: 3px 10px; border: 1px solid var(--line); border-radius: 999px;
  background: #fff; color: var(--text-2); font-size: 11.5px;
}

/* 快递跟踪 / 定期回访版块顶部提醒条：今天该电话回访几单、超期几单（提醒销售跟踪）。
   最要紧的就是「几单」这个数，所以左边压一条琥珀色竖条、数字放大加粗并上色，
   跟版块卡一个套路：先看数字，再看后面的口径说明。 */
.track-alert {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px;
  padding: 9px 14px;
  border: 1px solid var(--warn); border-left: 4px solid var(--warn);
  border-radius: var(--radius);
  background: var(--warn-soft); color: var(--text);
  box-shadow: var(--shadow);
}
.track-alert b { font-size: 16px; color: var(--warn); font-variant-numeric: tabular-nums; }
.track-alert span { color: var(--text-2); font-size: 12.5px; }
/* 没有待回访时用安静的样式，不喊人 */
.track-alert.calm { border-color: var(--line); border-left-color: var(--line-strong); background: #fff; box-shadow: none; }
.track-alert.calm b { color: var(--ok); }
/* 提醒条里的「修改规则」：轻量文字按钮，不抢提醒本身的视觉重心 */
.link-btn {
  padding: 0; border: 0; background: none; color: var(--brand);
  font-family: inherit; font-size: inherit; text-decoration: underline; cursor: pointer;
}
.link-btn:hover { color: var(--brand-dark); }

/* 规则弹窗里的单选说明（一直停留 / 超期转挂起）：整块可点，右侧带口径解释 */
.rule-choice { display: flex; flex-direction: column; gap: 8px; }
.rule-choice > label {
  display: grid; grid-template-columns: 18px 1fr; gap: 8px; align-items: start;
  padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px;
  background: #fafbfd; cursor: pointer;
}
.rule-choice > label:hover { border-color: var(--brand); }
.rule-choice input[type='radio'] { width: 16px; height: 16px; margin-top: 2px; }
.rule-choice span { color: var(--text); font-size: 13px; }
.rule-choice em { display: block; margin-top: 3px; color: var(--muted); font-size: 12px; font-style: normal; line-height: 1.6; }

/* 规则弹窗里的「N 时 N 分」输入（复购提醒的每日生成时间） */
.rule-time { display: flex; align-items: center; gap: 6px; color: var(--text-2); font-size: 13px; }
.rule-time input { width: 78px; }

.tool-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.tool-filters select, .tool-filters input[type='date'] { width: auto; min-width: 122px; }
/* 状态标签条（待回访 5 / 未到回访日 9 / 已回访 0…）：数字做成有颜色的圆角小标，
   选中项用实心主色。原来数字是灰底浅字、选中项只换了个字色，提示和「现在在看哪一页」都太弱。 */
.tabs { display: inline-flex; gap: 4px; padding: 4px; border: 1px solid var(--line); border-radius: 10px; background: #eef1f7; }
.tab {
  padding: 6px 14px; border: 0; border-radius: 8px; background: transparent;
  color: var(--text-2); font-family: inherit; font-size: 13px; font-weight: 500; cursor: pointer;
  transition: background .15s, color .15s;
}
.tab:hover { background: #fff; color: var(--brand); }
.tab.active { background: var(--brand); color: #fff; font-weight: 600; box-shadow: 0 2px 6px rgba(47, 95, 224, .3); }
.tab.active:hover { background: var(--brand-dark); color: #fff; }
/* tab 上的数量小标（快递跟踪：待回访 5 / 已回访 12）：有待办 = 琥珀、超期 = 红、清空 = 绿 */
.tab-num {
  display: inline-block; min-width: 20px; padding: 0 6px; margin-left: 5px;
  border-radius: 999px; background: #dfe5f0; color: var(--text-2);
  font-size: 11.5px; font-weight: 700; line-height: 17px; text-align: center;
  font-variant-numeric: tabular-nums;
}
.tab-num.warn { background: var(--warn-soft); color: var(--warn); }
.tab-num.danger { background: var(--danger-soft); color: var(--danger); }
.tab-num.ok { background: var(--ok-soft); color: var(--ok); }
/* 选中项是实心主色底，里面的数字统一转半透明白，免得红黄绿跟主色打架 */
.tab.active .tab-num { background: rgba(255, 255, 255, .26); color: #fff; }

.badge.slate { background: #eef1f6; color: var(--text-2); }

.modal-body.one-col { grid-template-columns: 1fr; }
.kv {
  display: grid; grid-template-columns: 84px 1fr 84px 1fr; gap: 8px 12px;
  padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px;
  background: #fafbfd; font-size: 13px;
}
.kv span { color: var(--muted); }
.row-btns { display: flex; justify-content: flex-end; margin-top: -6px; }

/* 「查看详情」弹窗：字段只读展示（与表单同栅格、同分组，只是把输入框换成实线只读框） */
.detail-box {
  min-height: 34px; padding: 6px 10px;
  border: 1px solid var(--line); border-radius: 8px; background: #fafbfd;
  color: var(--text-2); font-size: 13px;
  /* 长文本（备注 / 地址 / 退货原因）保留换行并自动折行，列表里看不全的这里要能看全 */
  white-space: pre-wrap; word-break: break-word;
}
.detail-img {
  width: 84px; height: 84px; object-fit: cover; cursor: zoom-in;
  border: 1px solid var(--line); border-radius: 10px; background: #fafbfd;
}
/* 记录身份信息（ID / 创建 / 更新时间）：详情底部的一行小字，核对与报障时用 */
.detail-meta {
  grid-column: 1 / -1; margin: 0; padding-top: 10px;
  border-top: 1px solid var(--line);
  color: var(--muted); font-size: 11.5px;
}

.log-list { max-height: 240px; overflow-y: auto; border: 1px solid var(--line); border-radius: 10px; }
.log-item { padding: 10px 12px; border-bottom: 1px solid var(--line); }
.log-item:last-child { border-bottom: 0; }
.log-head { display: flex; gap: 8px; align-items: baseline; color: var(--text-2); font-size: 12px; }
.log-head em { margin-left: auto; font-style: normal; color: var(--muted); }
.log-body { margin-top: 4px; font-size: 13px; white-space: pre-wrap; }

.inline-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.inline-check { display: flex; align-items: center; gap: 8px; min-height: 34px; }
.inline-check input[type='checkbox'] { width: 16px; height: 16px; }

/* 多选字段（如广告投放记录的「投放产品」）：选项平铺成复选框，选了几个一眼看清 */
.check-group {
  display: flex; flex-wrap: wrap; gap: 6px 14px;
  max-height: 132px; overflow-y: auto;
  padding: 8px 10px;
  border: 1px solid var(--line-strong); border-radius: 8px; background: #fff;
}
.check-item { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text-2); cursor: pointer; }
.check-item input[type='checkbox'] { width: 15px; height: 15px; }

/* 「加粉日期（可多选）」：日期输入 + 添加按钮，已加的日期排成小胶囊，点 × 移除（档期预设弹窗用） */
.date-pick { display: flex; gap: 8px; align-items: center; }
.date-pick input[type='date'] { flex: 1; }
.date-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.date-chips:empty::before { content: '还没有加粉日期：选好日期点「＋ 添加」'; color: var(--muted); font-size: 12px; }
.date-chip {
  display: inline-flex; align-items: center; gap: 2px;
  padding: 2px 6px 2px 10px;
  border: 1px solid var(--line-strong); border-radius: 999px; background: #fff;
  color: var(--text-2); font-size: 12.5px;
}
.date-chip button { border: 0; background: transparent; color: var(--muted); font-size: 14px; line-height: 1; cursor: pointer; }
.date-chip button:hover { color: var(--danger); }

/* ============ 左侧菜单「我的消息」入口 + 消息列表（财务发货后给销售的站内提醒） ============ */

/*
 * 入口放在左侧菜单最下方、账号信息上方：销售登录后一眼就能看到。
 * 两种状态差别拉大——没消息时是普通白卡，有未读时整块变品牌色 + 数字角标 + 呼吸光晕，
 * 避免像右上角那个小按钮一样被忽略。
 */
.notice-entry {
  display: flex; align-items: center; gap: 10px;
  width: 100%; padding: 10px 11px;
  border: 1px solid var(--line); border-radius: 12px;
  background: #fff; color: var(--text-2);
  font-family: inherit; text-align: left; cursor: pointer;
  transition: background .16s, border-color .16s, box-shadow .16s;
}
.notice-entry:hover { border-color: var(--brand); background: var(--brand-soft); }
.notice-entry-icon {
  position: relative; flex: none;
  display: flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 9px;
  background: var(--brand-soft); color: var(--brand);
}
.notice-entry-icon svg { width: 17px; height: 17px; }
.notice-entry-text { display: flex; flex-direction: column; line-height: 1.45; min-width: 0; }
.notice-entry-text strong { color: var(--text); font-size: 13.5px; }
.notice-entry-text em {
  font-style: normal; color: var(--muted); font-size: 11.5px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* 有未读：整块变品牌色，销售不可能看漏 */
.notice-entry.has-unread {
  background: var(--brand); border-color: var(--brand);
  box-shadow: 0 6px 16px rgba(47, 95, 224, .3);
  animation: notice-pulse 1.8s ease-in-out 6;
}
.notice-entry.has-unread .notice-entry-icon { background: rgba(255, 255, 255, .2); color: #fff; }
.notice-entry.has-unread .notice-entry-text strong { color: #fff; }
.notice-entry.has-unread .notice-entry-text em { color: rgba(255, 255, 255, .88); }
@keyframes notice-pulse {
  0%, 100% { box-shadow: 0 6px 16px rgba(47, 95, 224, .3); }
  50% { box-shadow: 0 6px 24px rgba(47, 95, 224, .6); }
}

/* 未读条数角标：压在铃铛图标右上角 */
.notice-badge {
  position: absolute; top: -6px; right: -7px;
  min-width: 18px; padding: 0 5px; border-radius: 999px;
  background: var(--danger); color: #fff;
  font-size: 11px; font-weight: 600; line-height: 18px; text-align: center;
  box-shadow: 0 0 0 2px #fff;
}
.notice-entry.has-unread .notice-badge { box-shadow: 0 0 0 2px var(--brand); }

.notice-list { border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.notice-item { padding: 11px 14px; border-bottom: 1px solid var(--line); cursor: pointer; }
.notice-item:last-child { border-bottom: 0; }
.notice-item:hover { background: #f9fbff; }
/* 未读高亮：一眼看出哪几条是刚收到的 */
.notice-item.unread { background: #f4f7ff; }
.notice-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.notice-head strong { font-size: 13.5px; }
.notice-time { color: var(--muted); font-size: 12px; white-space: nowrap; }
.notice-body { margin-top: 4px; color: var(--text-2); font-size: 12.5px; line-height: 1.7; white-space: pre-line; }
.notice-foot { margin-top: 6px; color: var(--muted); font-size: 12px; }
/* 发货弹窗里的「通知销售」勾选行与无销售时的说明 */
.check-line { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-2); }
.check-line input[type='checkbox'] { width: 16px; height: 16px; }
.notice-tip { grid-column: 1 / -1; margin: 0; color: var(--muted); font-size: 12.5px; line-height: 1.6; }

@media (max-width: 900px) {
  .layout { grid-template-columns: 1fr; }
  .sidebar { flex-direction: column; border-right: 0; border-bottom: 1px solid var(--line); gap: 12px; }
  .nav { flex-direction: row; flex-wrap: wrap; }
  .nav button { padding: 7px 10px; }
  .brand-block { display: none; }
  .sidebar-foot { display: flex; align-items: center; justify-content: space-between; }
  .me { margin: 0; }
  .main { padding: 14px; }
  .actions { width: 100%; }
  .actions .input { flex: 1; width: auto; }
  .modal-body { grid-template-columns: 1fr; }
  .kv { grid-template-columns: 84px 1fr; }
  .tool-filters { width: 100%; }
}

/* ------------------------- 首复购徽标 · 客户购买史弹窗 ------------------------- */

/* 「首购 / 2次购买 / 3次购买…」徽标是按钮：点开这位客户的购买史合并对比图。
   视觉与普通徽标保持一致，只加指针、悬停浮起与光圈，让人知道能点。 */
button.badge.stage-badge {
  border: 0;
  cursor: pointer;
  font: inherit;
  font-size: 12px;
  transition: box-shadow .15s, transform .15s;
}
button.badge.stage-badge:hover {
  box-shadow: 0 0 0 3px rgba(47, 95, 224, .14);
  transform: translateY(-1px);
}

/* 「第几次购买」阶梯色：1青 → 2蓝 → 3紫 → 4玫红 → 5橙 → 6+绿。
   与其他徽标同一手法（浅底 + 深字），只是色相按次数沿光谱后移，
   列表一列扫过去，几次客一眼分层；次数更高的（6 次以上）统一落绿色，不再细究。 */
.badge.stage-1 { background: #e0f6fb; color: #0e7f9c; }
.badge.stage-2 { background: var(--brand-soft); color: var(--brand); }
.badge.stage-3 { background: #efe7fd; color: #6d3bd1; }
.badge.stage-4 { background: #fde9f3; color: #c02669; }
.badge.stage-5 { background: #fff1e3; color: #c05e0a; }
.badge.stage-6 { background: var(--ok-soft); color: var(--ok); }
/* 「首购」= 至今只买过一笔的新客：中性灰，不占次数色 */
.badge.stage-first { background: #eef1f6; color: var(--text-2); }

/* 汇总行：共几笔 / 有效几笔 / 累计金额，以及「按什么匹配的」说明 */
.ph-summary {
  margin: 0 0 14px;
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  font-size: 13px; color: var(--text-2);
}
.ph-basis {
  padding: 1px 8px; border-radius: 999px; font-size: 12px;
  background: var(--brand-soft); color: var(--brand);
}
.ph-basis.warn { background: var(--warn-soft); color: var(--warn); }

/* 时间线：每一笔购买一张小卡，左侧序号圆点 + 贯穿竖线，
   多次购买的日期 / 产品 / 金额上下对齐，差异一眼对比 */
.ph-timeline { margin: 0; padding: 0; list-style: none; }
.ph-item { position: relative; display: flex; gap: 12px; padding: 10px 4px 12px 0; }
.ph-item::before {
  content: '';
  position: absolute; left: 17px; top: 0;
  width: 2px; height: 100%;
  background: var(--line);
}
.ph-item:first-child::before { top: 20px; }
.ph-item:last-child::before { height: 20px; }
.ph-seq {
  position: relative; z-index: 1;
  flex: 0 0 36px;
  display: flex; align-items: center; justify-content: center;
  height: 36px; width: 36px;
  border-radius: 50%;
  background: var(--brand-soft); color: var(--brand);
  font-size: 12px; font-weight: 600;
}
/* 已退单（款已退回客户）：整条卡片转成退款色——淡红底 + 红字 + 单号 / 金额删除线，
   与正常成交的黑字一眼分得开（退单不占「第几次」的号，序号圆点直接标「退单」） */
.ph-item.refunded .ph-main { background: var(--danger-soft); }
.ph-item.refunded .ph-seq { background: #f7dcdc; color: var(--danger); font-weight: 600; }
.ph-item.refunded .ph-no,
.ph-item.refunded .ph-prod,
.ph-item.refunded .ph-amount { color: var(--danger); }
.ph-item.refunded .ph-no,
.ph-item.refunded .ph-amount s { text-decoration: line-through; text-decoration-thickness: 1.5px; }
/* 退货申请还在财务手里审（还没核准，暂时仍算买过）：橙色底提示「正在退」 */
.ph-item.refunding .ph-main { background: var(--warn-soft); }
.ph-item.refunding .ph-seq { background: #fdf1dc; color: var(--warn); }
.ph-main { flex: 1; min-width: 0; padding: 8px 12px; border-radius: 10px; margin: -8px 0 -8px -12px; }
/* 本单（从哪一条点进来的）：品牌色内描边标出，一眼找到自己。
   用描边而不是底色——底色已经被「已退单的红 / 正在退的橙」占用，两者叠加时都看得见 */
.ph-item.current .ph-main {
  box-shadow: inset 0 0 0 2px var(--brand);
}
.ph-line { margin: 0 0 3px; font-size: 13px; }
.ph-line:last-child { margin-bottom: 0; }
.ph-gap { margin: 4px 0 0; font-size: 12px; color: var(--muted); }
.ph-cur {
  display: inline-block;
  padding: 0 6px; border-radius: 999px;
  background: var(--brand); color: #fff; font-size: 11px; line-height: 17px;
}

/* 退款情况：退货单逐条列在对应那笔单的下面（状态徽标 + 单号 + 退货金额 + 原因 + 退款时间） */
.ph-refund {
  margin: 6px 0 0;
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  font-size: 12px; line-height: 18px;
  color: var(--text-2);
}
/* 已通过的退款整行转红（与卡片上的红字呼应），待审核的橙、驳回的灰 */
.ph-refund.danger { color: var(--danger); }
.ph-refund.warn { color: var(--warn); }
.ph-refund .ph-rt { font-weight: 600; }
/* 汇总行里的退单统计：红底小胶囊，与「有效成交 / 累计金额」区分开 */
.ph-summary .ph-sum-refund {
  padding: 1px 8px; border-radius: 999px;
  background: var(--danger-soft); color: var(--danger); font-size: 12px;
}