/* ==========================================================================
   400 来电客户管理系统 · 设计系统
   风格：扁平 · 简约 · 高级感（浅色主题 / 单主色 / 细线分割 / 克制的层次）
   ========================================================================== */

:root {
  /* 主色 */
  --brand: #1677ff;
  --brand-hi: #4a9bff;
  --brand-lo: #0a5ccf;
  --brand-soft: #edf4ff;
  --brand-line: #cfe3ff;

  /* 中性色 */
  --bg: #f4f6f9;
  --surface: #ffffff;
  --surface-2: #fafbfd;
  --surface-3: #f6f8fb;
  --line: #ecedf1;
  --line-2: #e0e3e9;

  /* 文字 */
  --ink-1: #0f1720;
  --ink-2: #39424f;
  --ink-3: #6b7482;
  --ink-4: #9aa2ad;

  /* 语义色 */
  --ok: #0ea472;
  --ok-soft: #e8f8f2;
  --warn: #e8830c;
  --warn-soft: #fef4e6;
  --danger: #e5484d;
  --danger-soft: #fdeded;
  --violet: #7357ff;
  --violet-soft: #f0edff;
  --cyan: #0a9dc4;
  --cyan-soft: #e6f6fb;

  /* 深色侧栏 */
  --side-bg: #0d1b2b;
  --side-bg-2: #101f31;
  --side-line: rgba(255, 255, 255, .07);
  --side-text: #97a6b8;
  --side-text-hi: #ffffff;

  /* 圆角 */
  --r-xs: 6px;
  --r-sm: 8px;
  --r-md: 10px;
  --r-lg: 14px;

  /* 阴影 */
  --sh-xs: 0 1px 2px rgba(16, 24, 40, .04);
  --sh-sm: 0 1px 3px rgba(16, 24, 40, .05), 0 1px 2px rgba(16, 24, 40, .03);
  --sh-md: 0 6px 18px rgba(16, 24, 40, .07), 0 1px 3px rgba(16, 24, 40, .04);
  --sh-lg: 0 24px 56px rgba(16, 24, 40, .16);

  --font: "Inter", "Segoe UI", "Microsoft YaHei UI", "Microsoft YaHei", "PingFang SC",
    "Hiragino Sans GB", system-ui, -apple-system, sans-serif;
  --font-num: "Inter", "Segoe UI", "Helvetica Neue", system-ui, sans-serif;

  /* ---- 全站字阶（同类文字同字体同字号）----
     说明文字 11px / 辅助说明 12px / 次要文本 12.5px / 表格与数值 13px
     正文与按钮 13.5px / 卡片标题 14.5px / 弹窗标题 15.5px / 页面标题 18px */
  --fs-caption: 11px;
  --fs-note: 12px;
  --fs-secondary: 12.5px;
  --fs-table: 13px;
  --fs-body: 13.5px;
  --fs-title: 14.5px;
  --fs-h2: 15.5px;
  --fs-h1: 18px;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: var(--font);
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink-2);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
.hidden { display: none !important; }
a { color: var(--brand); text-decoration: none; }
::selection { background: #cfe3ff; color: #0a3d80; }
.num { font-family: var(--font-num); font-variant-numeric: tabular-nums; letter-spacing: -.01em; }

svg { width: 100%; height: 100%; display: block; }
svg use { fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.nav-item .ico svg use, .hero-tick svg use { stroke-width: 1.9; }
/* 尺寸随内容变化的容器里，图标必须有固定尺寸，避免被 100% 拉伸 */
.btn > svg { width: 15px; height: 15px; flex: none; }
.btn-sm > svg { width: 14px; height: 14px; }
.step-no > svg { width: 12px; height: 12px; }
.drop-ico > svg { width: 40px; height: 40px; }

:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 6px; }

/* ==========================================================================
   登录页
   ========================================================================== */
.login-wrap {
  min-height: 100%; display: flex; align-items: center; justify-content: center;
  padding: 28px;
  background:
    radial-gradient(900px 480px at 88% -10%, #dfeaff 0%, transparent 60%),
    radial-gradient(700px 420px at 6% 110%, #e8f6ff 0%, transparent 62%),
    #eff2f7;
}
.login-shell {
  display: grid; grid-template-columns: 1.06fr .94fr;
  width: min(1080px, 100%); min-height: 588px;
  background: var(--surface); border-radius: 20px; overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .9);
  box-shadow: 0 32px 80px rgba(16, 32, 64, .16), 0 2px 6px rgba(16, 24, 40, .05);
}

/* --- 左：品牌区 --- */
.login-hero {
  position: relative; overflow: hidden; padding: 46px 44px;
  display: flex; flex-direction: column;
  background: linear-gradient(158deg, #0c1a2b 0%, #101f34 48%, #0f2c52 100%);
  color: #fff;
}
.login-hero::before {
  content: ""; position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: radial-gradient(600px 420px at 20% 20%, #000, transparent 78%);
}
.hero-glow {
  position: absolute; width: 520px; height: 520px; right: -190px; bottom: -230px; border-radius: 50%;
  background: radial-gradient(circle, rgba(22, 119, 255, .55) 0%, rgba(22, 119, 255, 0) 68%);
  filter: blur(6px);
}
.hero-center {
  position: relative; flex: 1; display: flex; flex-direction: column;
  align-items: center; justify-content: center; text-align: center; gap: 0;
}
.hero-center .logo-mark {
  width: 74px; height: 74px; border-radius: 21px; font-size: 27px; font-weight: 700;
  box-shadow: 0 14px 38px rgba(22, 119, 255, .42), 0 2px 8px rgba(0, 0, 0, .25);
}
.hero-brand { font-size: 34px; font-weight: 650; letter-spacing: .16em; margin-top: 24px; text-indent: .16em; }
.hero-brand-sub { font-size: 9px; color: #7d93ad; letter-spacing: .22em; text-indent: .22em; margin-top: 12px; white-space: nowrap; }
/* 数据来源：跟在 BUSINESS INTELLIGENCE 下方单独占一行（2026-10-30 从页脚提上来） */
.hero-source { font-size: 11.5px; color: #93a7bd; letter-spacing: .1em; margin-top: 20px; white-space: nowrap; }
.hero-foot {
  position: relative; font-size: 11.5px; color: #7d93ad; letter-spacing: .08em;
  padding-top: 18px; border-top: 1px solid rgba(255, 255, 255, .08); text-align: center;
}

/* --- 右：表单区 --- */
.login-panel { display: flex; align-items: center; justify-content: center; padding: 42px 40px; }
.login-card { width: min(340px, 100%); }
.login-head { margin-bottom: 28px; }
.login-head h1 { margin: 0; font-size: 23px; font-weight: 650; color: var(--ink-1); letter-spacing: -.01em; }
.login-head p { margin: 8px 0 0; font-size: var(--fs-table); color: var(--ink-3); }

.field { display: block; margin-bottom: 16px; }
.field-label {
  display: block; font-size: var(--fs-note); font-weight: 500; color: var(--ink-3);
  margin-bottom: 7px; letter-spacing: .02em;
}
.input-wrap { position: relative; display: block; }
.input-ico {
  position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
  width: 16px; height: 16px; color: var(--ink-4); pointer-events: none; transition: color .15s;
}
.input-wrap:focus-within .input-ico { color: var(--brand); }
.input-wrap .input { padding-left: 37px; }

/* ==========================================================================
   表单控件
   ========================================================================== */
.input, .select {
  width: 100%; height: 40px; padding: 0 13px; font-size: var(--fs-body); color: var(--ink-1);
  font-family: inherit; background: var(--surface); border: 1px solid var(--line-2);
  border-radius: var(--r-sm); outline: none; transition: border-color .15s, box-shadow .15s, background .15s;
}
.input::placeholder { color: var(--ink-4); }
.input:hover, .select:hover { border-color: #cfd5dd; }
.input:focus, .select:focus {
  border-color: var(--brand); background: #fff;
  box-shadow: 0 0 0 3.5px rgba(22, 119, 255, .12);
}
.select {
  appearance: none; cursor: pointer; padding-right: 34px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12'%3E%3Cpath d='M2.2 4.4L6 8.2l3.8-3.8' stroke='%239aa2ad' stroke-width='1.7' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 13px center;
}
input[type="date"], input[type="datetime-local"] { font-family: var(--font-num); font-size: var(--fs-table); }

.checkbox { display: inline-flex; align-items: center; gap: 8px; font-size: var(--fs-table); color: var(--ink-2); cursor: pointer; user-select: none; }
.checkbox input { width: 15px; height: 15px; accent-color: var(--brand); cursor: pointer; }

/* ==========================================================================
   按钮
   ========================================================================== */
.btn {
  height: 36px; padding: 0 15px; font-size: var(--fs-body); font-weight: 500; font-family: inherit;
  border: 1px solid var(--line-2); border-radius: var(--r-sm); background: var(--surface);
  color: var(--ink-2); cursor: pointer; white-space: nowrap;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  box-shadow: var(--sh-xs);
  transition: background .15s, border-color .15s, color .15s, box-shadow .15s, transform .1s;
}
.btn:hover { border-color: var(--brand-line); color: var(--brand); background: var(--brand-soft); }
.btn:active { transform: translateY(.5px); }
.btn:disabled { opacity: .5; cursor: not-allowed; transform: none; }

.btn-primary {
  background: linear-gradient(180deg, #2f86ff 0%, var(--brand) 100%);
  border-color: var(--brand); color: #fff;
  box-shadow: 0 1px 2px rgba(22, 119, 255, .3), inset 0 1px 0 rgba(255, 255, 255, .18);
}
.btn-primary:hover { background: linear-gradient(180deg, var(--brand) 0%, #0f6ae6 100%); border-color: #0f6ae6; color: #fff; }
.btn-primary:active { background: var(--brand-lo); }

.btn-outline { background: var(--surface); border-color: var(--line-2); color: var(--ink-2); }
.btn-danger { background: var(--surface); border-color: #f6c7c7; color: var(--danger); }
.btn-danger:hover { background: var(--danger-soft); border-color: #f0a8a8; color: #c93a3f; }
.btn-text {
  background: transparent; border-color: transparent; box-shadow: none;
  color: var(--brand); padding: 0 9px; height: 28px; font-size: var(--fs-secondary);
}
.btn-text:hover { background: var(--brand-soft); border-color: transparent; color: var(--brand-lo); }
.btn-sm { height: 30px; padding: 0 11px; font-size: var(--fs-secondary); border-radius: var(--r-xs); }
.btn-lg { height: 44px; font-size: var(--fs-title); border-radius: var(--r-md); }
.btn-block { width: 100%; }
.btn-group { display: inline-flex; gap: 6px; }
.btn .spinner { width: 13px; height: 13px; border-width: 2px; margin-right: 0; }

.login-error {
  display: flex; align-items: center; gap: 7px;
  background: var(--danger-soft); color: #c93a3f; font-size: var(--fs-secondary);
  padding: 10px 12px; border-radius: var(--r-sm); margin-bottom: 14px;
  border: 1px solid #f7d4d4;
}
.login-tip { margin-top: 20px; font-size: var(--fs-note); color: var(--ink-4); text-align: center; line-height: 1.7; }
.login-tip b { color: var(--ink-3); font-weight: 600; }
.login-remember {
  display: flex; align-items: center; gap: 7px; margin: 2px 0 16px;
  font-size: var(--fs-body); color: var(--ink-3); cursor: pointer; user-select: none; width: fit-content;
}
.login-remember input { width: 15px; height: 15px; accent-color: var(--brand); cursor: pointer; margin: 0; }
.login-remember:hover { color: var(--ink-2); }

/* ==========================================================================
   框架布局
   ========================================================================== */
.app { display: flex; height: 100vh; overflow: hidden; background: var(--bg); }

.sidebar {
  width: 230px; flex: none; display: flex; flex-direction: column;
  padding: 20px 14px 14px;
  background: linear-gradient(180deg, var(--side-bg) 0%, var(--side-bg-2) 100%);
  border-right: 1px solid rgba(0, 0, 0, .2);
}
.side-brand { display: flex; align-items: center; gap: 11px; padding: 0 8px 20px; }
.logo-mark {
  width: 46px; height: 46px; border-radius: 13px; flex: none;
  background: linear-gradient(140deg, #3d92ff, #1668e3);
  color: #fff; display: flex; align-items: center; justify-content: center;
  font: 700 15px/1 var(--font-num); letter-spacing: .5px;
  box-shadow: 0 6px 16px rgba(22, 119, 255, .34), inset 0 1px 0 rgba(255, 255, 255, .25);
}
.logo-mark.small { width: 36px; height: 36px; border-radius: 10px; font-size: var(--fs-secondary); box-shadow: 0 4px 12px rgba(22, 119, 255, .3); }
.side-brand-title { color: #fff; font-size: 14px; font-weight: 600; letter-spacing: .2px; }
.side-brand-sub { color: #5c7089; font-size: 8px; letter-spacing: .12em; margin-top: 3px; white-space: nowrap; }

.side-nav { flex: 1; display: flex; flex-direction: column; gap: 3px; overflow-y: auto; padding-bottom: 10px; }
.side-nav::-webkit-scrollbar { width: 0; }
.nav-group {
  font-size: 10.5px; font-weight: 600; letter-spacing: .16em; color: #4e6076;
  padding: 16px 12px 7px; text-transform: uppercase;
}
.nav-group:first-child { padding-top: 2px; }
.nav-item {
  position: relative; display: flex; align-items: center; gap: 11px; height: 38px; padding: 0 12px;
  border-radius: var(--r-sm); color: var(--side-text); font-size: var(--fs-body); cursor: pointer;
  transition: background .16s, color .16s; user-select: none;
}
.nav-item .ico { width: 17px; height: 17px; flex: none; opacity: .9; }
.nav-item:hover { background: rgba(255, 255, 255, .06); color: #e6edf6; }
.nav-item.active {
  color: var(--side-text-hi); font-weight: 600;
  background: linear-gradient(90deg, rgba(22, 119, 255, .26) 0%, rgba(22, 119, 255, .07) 100%);
}
.nav-item.active .ico { color: #6cb0ff; opacity: 1; }
.nav-item.active::before {
  content: ""; position: absolute; left: -14px; top: 9px; bottom: 9px; width: 3px;
  border-radius: 0 3px 3px 0; background: var(--brand); box-shadow: 0 0 10px rgba(22, 119, 255, .8);
}
.nav-badge { margin-left: auto; background: rgba(255, 255, 255, .1); color: #b9cbe1; font-size: var(--fs-caption); padding: 1px 8px; border-radius: 999px; }

/* --- 一二级菜单（一级分组可折叠） --- */
.nav-cat { display: flex; flex-direction: column; gap: 3px; }
.nav-cat-head {
  display: flex; align-items: center; gap: 11px; height: 38px; padding: 0 12px;
  border-radius: var(--r-sm); color: #c3cfdd; font-size: var(--fs-body); font-weight: 600;
  cursor: pointer; transition: background .16s, color .16s; user-select: none;
}
.nav-cat-head .ico { width: 17px; height: 17px; flex: none; opacity: .9; }
.nav-cat-head .chev { width: 15px; height: 15px; margin-left: auto; flex: none; color: #55677e; transition: transform .18s; }
.nav-cat-head:hover { background: rgba(255, 255, 255, .06); color: #e6edf6; }
.nav-cat.collapsed .nav-sub { display: none; }
.nav-cat.collapsed .chev { transform: rotate(-90deg); }
.nav-sub {
  display: flex; flex-direction: column; gap: 2px;
  margin: 1px 0 3px 19px; padding-left: 9px;
  border-left: 1px solid rgba(255, 255, 255, .09);
}
.nav-sub .nav-item { height: 34px; font-size: var(--fs-table); }
.nav-sub .nav-item.active::before { left: -11px; }

.side-user {
  display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: var(--r-md);
  background: rgba(255, 255, 255, .045); border: 1px solid var(--side-line);
  cursor: pointer; transition: background .15s, border-color .15s;
}
.side-user:hover { background: rgba(255, 255, 255, .085); border-color: rgba(255, 255, 255, .16); }
.avatar {
  width: 32px; height: 32px; border-radius: 9px; flex: none;
  background: linear-gradient(140deg, #3d92ff, #1668e3); color: #fff;
  display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: var(--fs-table);
}
.side-user-info { flex: 1; min-width: 0; }
.side-user-name { color: #fff; font-size: var(--fs-table); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.side-user-role { color: #5c7089; font-size: 10.5px; margin-top: 2px; letter-spacing: .04em; }
.icon-btn {
  width: 30px; height: 30px; flex: none; padding: 7px; border-radius: var(--r-xs); border: none;
  background: rgba(255, 255, 255, .07); color: #9fb0c4; cursor: pointer; transition: .15s;
}
.icon-btn:hover { background: rgba(229, 72, 77, .22); color: #ff9a9d; }

.main { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.topbar {
  height: 66px; flex: none; display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding: 0 30px; background: rgba(255, 255, 255, .86);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--line);
}
.crumb-wrap { min-width: 0; display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.crumb { font-size: var(--fs-h1); font-weight: 650; color: var(--ink-1); letter-spacing: -.01em; }
.crumb small { font-weight: 400; color: var(--ink-4); font-size: var(--fs-note); letter-spacing: 0; margin-left: 14px; }
.topbar-right { display: flex; align-items: center; gap: 14px; }
.topbar-meta { display: flex; align-items: center; gap: 8px; }
.meta-chip {
  display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 11px;
  border-radius: 999px; background: var(--surface-3); border: 1px solid var(--line);
  font-size: 11.5px; color: var(--ink-3); white-space: nowrap;
}
.meta-chip b { color: var(--ink-1); font-weight: 600; font-family: var(--font-num); }
.meta-chip .pulse {
  width: 6px; height: 6px; border-radius: 50%; background: var(--ok);
  box-shadow: 0 0 0 3px rgba(14, 164, 114, .16);
}
.content { flex: 1; overflow-y: auto; padding: 22px 30px 56px; scroll-behavior: smooth; }
.content > * { animation: rise .3s cubic-bezier(.22, .61, .36, 1) both; }
@keyframes rise { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: none; } }

/* 列表页固定布局（V4.20）：查询条件 / 表头 / 分页固定不动，仅表体滚动。
   由 goto() 给 #content 加上 .fill（客户明细 / 来电记录 / 订单列表 / 商品管理）。
   正常情况下列表撑满可视区、不出现整页滚动；窗口极矮时退化为整页滚动，不会裁掉分页。 */
.content.fill { display: flex; flex-direction: column; overflow-y: auto; padding-bottom: 22px; }
.content.fill > .card { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; margin-bottom: 0; }
.content.fill > .card > .qf-row,
.content.fill > .card > .qf-sub,
.content.fill > .card > .card-head,
.content.fill > .card > .pager,
.content.fill > .card > .empty { flex: 0 0 auto; }
.content.fill > .card > .table-wrap { flex: 1 1 auto; min-height: 140px; }
.content.fill > .card > .table-wrap > table.tbl > thead th { box-shadow: 0 1px 0 var(--line); }

/* ==========================================================================
   卡片 / 栅格
   ========================================================================== */
.card {
  position: relative; background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: 20px 22px; margin-bottom: 16px; box-shadow: var(--sh-sm);
}
.card-head {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  /* 空间不足时让说明文字换行，而不是把标题挤成竖排（一个汉字一行） */
  flex-wrap: wrap;
  padding-bottom: 13px; margin-bottom: 16px; border-bottom: 1px solid var(--line);
}
.card-head:last-child { margin-bottom: 0; }
.card-title { font-size: var(--fs-title); font-weight: 650; color: var(--ink-1); display: flex; align-items: center; gap: 9px; letter-spacing: -.005em; flex: 0 0 auto; white-space: nowrap; }
.card-title .dot {
  width: 3px; height: 15px; border-radius: 2px; flex: none;
  background: linear-gradient(180deg, #5aa8ff, var(--brand));
}
.card-sub { font-size: var(--fs-note); color: var(--ink-4); font-weight: 400; }

.grid { display: grid; gap: 16px; }
.grid-5 { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 1240px) { .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 900px) { .grid-4, .grid-3, .grid-2, .grid-5 { grid-template-columns: 1fr; } }

/* --- 指标卡 --- */
.stat {
  position: relative; overflow: hidden; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 18px 20px 17px; box-shadow: var(--sh-sm);
  transition: transform .18s cubic-bezier(.22, .61, .36, 1), box-shadow .18s, border-color .18s;
}
.stat::before {
  content: ""; position: absolute; left: 0; top: 0; right: 0; height: 2.5px;
  background: linear-gradient(90deg, var(--c, var(--brand)) 0%, transparent 72%);
  opacity: .9;
}
.stat:hover { transform: translateY(-2px); box-shadow: var(--sh-md); border-color: #e2e6ee; }
.stat-top { display: flex; align-items: center; gap: 9px; }
.stat-ico {
  width: 30px; height: 30px; flex: none; padding: 7px; border-radius: var(--r-sm);
  background: var(--c-soft, var(--brand-soft)); color: var(--c, var(--brand));
}
.stat-label { font-size: var(--fs-secondary); color: var(--ink-3); font-weight: 500; letter-spacing: .01em; }
.stat-value {
  font-family: var(--font-num); font-variant-numeric: tabular-nums;
  font-size: 31px; font-weight: 680; color: var(--ink-1);
  margin: 13px 0 5px; letter-spacing: -.025em; line-height: 1.1;
}
.stat-foot { font-size: 11.5px; color: var(--ink-4); line-height: 1.7; }
.stat-foot + .stat-foot { margin-top: 2px; }
.stat-foot .up { color: var(--danger); }
.stat-foot .down { color: var(--ok); }
/* 订单数卡：0 元单 / 付费单 并列放大 —— 挤在脚注里 11.5px 根本看不清 */
.stat-split { display: flex; gap: 20px; margin: 10px 0 6px; }
.stat-split > div { flex: 1; min-width: 0; }
.stat-split .k { font-size: 11.5px; color: var(--ink-4); margin-bottom: 4px; white-space: nowrap; }
.stat-split .v {
  font-family: var(--font-num); font-variant-numeric: tabular-nums;
  font-size: 24px; font-weight: 700; letter-spacing: -.02em; line-height: 1.05; color: var(--ink-1);
}
.stat-split .v.muted { color: var(--ink-3); font-weight: 650; }

/* 主数值右侧紧跟一个比率字段（如 已拨打客户 → 拨打率），主次分明又不并排成两张大卡 */
.stat-pair { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.stat-pair .stat-value { margin-bottom: 0; }
.stat-rate {
  display: flex; flex-direction: column; gap: 1px;
  padding-left: 14px; border-left: 1px dashed var(--line, #e5e6eb); min-width: 0;
}
.stat-rate .p-k { font-size: 11px; color: var(--ink-4); white-space: nowrap; display: flex; align-items: center; gap: 2px; }
.stat-rate .p-v {
  font-family: var(--font-num); font-variant-numeric: tabular-nums;
  font-size: 17px; font-weight: 720; color: var(--c); letter-spacing: -.01em; white-space: nowrap;
}
/* 五列并排时卡片变窄，数字降一档字号，避免金额被截断或换行 */
.grid-5 .stat-value { font-size: 25px; }

/* --- 可排序表头 --- */
table.tbl thead th.srt { cursor: pointer; user-select: none; transition: color .12s, background .12s; }
table.tbl thead th.srt:hover { color: var(--ink-2); background: var(--surface-3); }
table.tbl thead th.srt-on { color: var(--ink-1); }
.srt-arr { margin-left: 4px; font-size: 9px; vertical-align: 1px; }

.stat.compact { padding: 14px 16px 13px; }
.stat.compact .stat-value { font-size: 20px; margin: 8px 0 3px; font-weight: 650; }
.stat.compact .stat-label { font-size: 11.5px; color: var(--ink-4); }
.stat.compact .stat-foot { font-size: var(--fs-caption); }

/* --- 标签 --- */
.tag {
  display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 9px;
  border-radius: 999px; font-size: 11.5px; font-weight: 500;
  background: var(--surface-3); color: var(--ink-3); white-space: nowrap;
  border: 1px solid var(--line);
}
.tag-blue { background: var(--brand-soft); color: #0d5cc4; border-color: var(--brand-line); }
.tag-green { background: var(--ok-soft); color: #0a7d57; border-color: #c6ecdd; }
.tag-orange { background: var(--warn-soft); color: #a55f06; border-color: #f6ddb8; }
.tag-red { background: var(--danger-soft); color: #c93a3f; border-color: #f5cdcd; }
.tag-purple { background: var(--violet-soft); color: #5a3fd6; border-color: #ddd5ff; }

/* ==========================================================================
   表格
   ========================================================================== */
.table-wrap { overflow: auto; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); }
table.tbl { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--fs-table); }
table.tbl thead th {
  position: sticky; top: 0; z-index: 2;
  background: var(--surface-2); color: var(--ink-4);
  font-size: var(--fs-caption); font-weight: 650; letter-spacing: .07em; text-transform: uppercase;
  text-align: left; padding: 11px 14px; white-space: nowrap; vertical-align: middle;
  border-bottom: 1px solid var(--line);
}
table.tbl tbody td {
  padding: 12px 14px; border-bottom: 1px solid #f3f5f8; color: var(--ink-2); vertical-align: middle;
}
table.tbl tbody tr:last-child td { border-bottom: none; }
table.tbl tbody tr { transition: background .12s; }
table.tbl tbody tr:hover td { background: #f8fbfe; }
table.tbl tbody tr.clickable { cursor: pointer; }
table.tbl .strong { font-weight: 600; color: var(--ink-1); }
table.tbl .muted { color: var(--ink-3); }
table.tbl .right { text-align: right; }
table.tbl td.num, table.tbl th.num { font-family: var(--font-num); font-variant-numeric: tabular-nums; }

/* 合计行（tfoot）必须与表体同内边距、同对齐方式：
   以前 tfoot td 没写 padding，浏览器按 UA 默认 1px 处理，
   导致「合计」行的数字比整列右边缘多出 13px，看起来像是没右对齐。 */
table.tbl tfoot td {
  padding: 12px 14px; vertical-align: middle;
  border-top: 1px solid var(--line); background: var(--surface-2);
  color: var(--ink-1); font-weight: 600; white-space: nowrap;
}
table.tbl tfoot td.num { font-family: var(--font-num); font-variant-numeric: tabular-nums; }
/* 七个居中列表页的合计行也跟着居中 / 右对齐，保持一致 */
table.tbl tfoot td.right { text-align: right; }

.empty { text-align: center; color: var(--ink-4); padding: 52px 0 48px; font-size: var(--fs-table); }
.empty-ico { display: block; width: 54px; height: 54px; margin: 0 auto 14px; color: #d3d9e2; }
.empty b { color: var(--ink-3); font-weight: 500; }
.empty-sub { margin-top: 6px; font-size: var(--fs-note); color: var(--ink-4); }

.pager { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 2px 2px; font-size: var(--fs-secondary); color: var(--ink-3); flex-wrap: wrap; }
.pager b { color: var(--ink-1); font-family: var(--font-num); }
.pager-btns { display: flex; align-items: center; gap: 5px; }
.page-btn {
  min-width: 32px; height: 32px; padding: 0 9px; border-radius: var(--r-xs);
  border: 1px solid var(--line-2); background: var(--surface); color: var(--ink-2);
  cursor: pointer; font-size: var(--fs-secondary); font-family: inherit; transition: .15s;
}
.page-btn:hover:not(:disabled) { border-color: var(--brand-line); color: var(--brand); background: var(--brand-soft); }
.page-btn:disabled { opacity: .42; cursor: not-allowed; }
.page-btn.active { background: var(--brand); border-color: var(--brand); color: #fff; box-shadow: 0 1px 2px rgba(22, 119, 255, .3); }

/* --- 工具栏 --- */
.toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 15px; }
.toolbar .input, .toolbar .select { width: auto; height: 36px; font-size: var(--fs-table); }
.toolbar .input { min-width: 230px; }
.toolbar .spacer { flex: 1; }

/* ==========================================================================
   图表
   ========================================================================== */
.chart-box { position: relative; width: 100%; }
.chart-box svg { display: block; width: 100%; }
.legend { display: flex; gap: 18px; align-items: center; font-size: var(--fs-note); color: var(--ink-3); flex-wrap: wrap; }
.legend i { width: 9px; height: 9px; border-radius: 3px; display: inline-block; margin-right: 7px; vertical-align: -1px; }
.tip {
  position: absolute; pointer-events: none; z-index: 6; min-width: 132px;
  background: rgba(15, 23, 32, .94); color: #fff; backdrop-filter: blur(6px);
  font-size: var(--fs-note); padding: 9px 12px; border-radius: var(--r-sm);
  transform: translate(-50%, -118%); opacity: 0; transition: opacity .13s;
  box-shadow: 0 10px 28px rgba(16, 24, 40, .3); line-height: 1.75;
}
.tip b { font-family: var(--font-num); }
.tip-title { color: #93a4b8; font-weight: 500; }

/* ==========================================================================
   导入页
   ========================================================================== */
.drop {
  border: 1.5px dashed #cfd8e4; border-radius: var(--r-lg); background: linear-gradient(180deg, #fbfcfe, #f7f9fc);
  padding: 38px 20px; text-align: center; cursor: pointer; transition: .18s;
}
.drop:hover, .drop.over { border-color: var(--brand); background: var(--brand-soft); }
.drop-ico { width: 40px; height: 40px; margin: 0 auto; color: var(--brand); opacity: .82; }
.drop-title { font-size: 14px; font-weight: 600; color: var(--ink-1); margin: 13px 0 6px; }
.drop-sub { font-size: var(--fs-note); color: var(--ink-4); }

.steps { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; font-size: var(--fs-table); flex-wrap: wrap; }
.step { display: flex; align-items: center; gap: 8px; color: var(--ink-4); font-weight: 500; }
.step-no {
  width: 22px; height: 22px; border-radius: 50%; background: var(--surface-3); color: var(--ink-4);
  border: 1px solid var(--line-2);
  display: flex; align-items: center; justify-content: center; font-size: 11.5px; font-weight: 600;
  font-family: var(--font-num); padding: 4px;
}
.step-no svg { stroke-width: 2.6; }
.step.active { color: var(--brand); font-weight: 650; }
.step.active .step-no { background: var(--brand); border-color: var(--brand); color: #fff; box-shadow: 0 0 0 4px rgba(22, 119, 255, .14); }
.step.done { color: var(--ok); }
.step.done .step-no { background: var(--ok-soft); border-color: #c6ecdd; color: var(--ok); }
.step-line { width: 30px; height: 1px; background: var(--line-2); }

.map-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 16px; }
@media (max-width: 960px) { .map-grid { grid-template-columns: 1fr; } }
.map-row {
  display: flex; align-items: center; gap: 10px; padding: 10px 12px;
  border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface-2); transition: .15s;
}
.map-row:hover { border-color: var(--line-2); background: var(--surface); }
.map-row.missing { border-color: #f6ddb8; background: var(--warn-soft); }
.map-row .map-label { width: 96px; flex: none; font-size: var(--fs-table); color: var(--ink-2); font-weight: 500; }
.map-row .map-label b { color: var(--danger); }
.map-row select { flex: 1; min-width: 0; height: 34px; font-size: var(--fs-secondary); }
.map-row .arrow { color: var(--ink-4); font-size: var(--fs-table); }
.map-state { width: 62px; flex: none; text-align: center; }

.chips { display: flex; flex-wrap: wrap; gap: 7px; }
.chip {
  display: inline-flex; align-items: center; gap: 7px; height: 27px; padding: 0 11px; border-radius: 999px;
  font-size: var(--fs-note); background: var(--surface-3); color: var(--ink-3); border: 1px solid var(--line);
}
.chip.used { background: var(--brand-soft); color: #0d5cc4; border-color: var(--brand-line); }
.chip.ignore { background: #f7f8fa; color: var(--ink-4); border-style: dashed; }
.chip.need { background: var(--danger-soft); color: #c93a3f; border-color: #f5cdcd; }

.note {
  position: relative; background: var(--brand-soft); border: 1px solid var(--brand-line);
  color: #14508f; font-size: var(--fs-secondary); padding: 12px 15px; border-radius: var(--r-md); line-height: 1.9;
}
.note b { color: #0d3f78; }
.note.warn { background: var(--warn-soft); border-color: #f6ddb8; color: #8a5205; }
.note.warn b { color: #6d4104; }
.note.danger { background: var(--danger-soft); border-color: #f5cdcd; color: #a8363a; }

/* --- 区块小标题（数据统计页分组用） --- */
.sec-label {
  display: flex; align-items: center; gap: 8px;
  margin: 6px 2px 11px; font-size: var(--fs-note); font-weight: 650;
  color: var(--ink-2); letter-spacing: .02em;
}
.sec-label::before {
  content: ""; width: 3px; height: 12px; border-radius: 2px; flex: none;
  background: linear-gradient(180deg, #5aa8ff, var(--brand));
}

/* --- 危险操作区 --- */
.card.card-danger { border-color: #f5cdcd; }
.card-danger .card-title { color: var(--danger); }
.dot-danger { background: linear-gradient(180deg, #f08a8d, var(--danger)) !important; }
.danger-row { display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.danger-info b { font-size: var(--fs-body); color: var(--ink-1); }
.danger-sub { font-size: var(--fs-note); color: var(--ink-3); margin-top: 4px; line-height: 1.7; }
@media (max-width: 760px) { .danger-row { flex-direction: column; align-items: flex-start; } }

/* ==========================================================================
   弹窗
   ========================================================================== */
.mask {
  position: fixed; inset: 0; z-index: 100; padding: 26px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(15, 23, 32, .42); backdrop-filter: blur(3px);
  animation: fade .16s ease;
}
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes pop { from { transform: translateY(12px) scale(.985); opacity: 0; } to { transform: none; opacity: 1; } }
.modal {
  width: 580px; max-width: 100%; max-height: 90vh;
  display: flex; flex-direction: column; background: var(--surface);
  border-radius: var(--r-lg); box-shadow: var(--sh-lg); animation: pop .2s cubic-bezier(.22, .61, .36, 1);
}
.modal.wide { width: 920px; }
.modal.narrow { width: 450px; }
/* 订单详情弹窗（2026-10-30）：内容常比一屏略高，右侧就常驻一条 9px 滚动槽，
 * 把左右留白拉成左 22 / 右 13，卡片看着偏心 —— 用户要求去掉。
 * 这里隐掉滚动条本体（不占位），滚轮 / 触控板 / 键盘仍能滚，只是不再画那条槽。
 * 顺手把最大高度从 90vh 放宽到「占满遮罩内高」（mask 上下各 26px），
 * 商品多的单往往那 40px 就够，压根不用滚。
 * 只挂 .od-modal：其它弹窗（自定义列、角色编辑）内容可能很长，滚动槽是「下面还有内容」的提示，别动。 */
.modal.od-modal { max-height: calc(100vh - 52px); }
.modal.od-modal .modal-body { scrollbar-width: none; -ms-overflow-style: none; }
.modal.od-modal .modal-body::-webkit-scrollbar { width: 0; height: 0; }
.modal-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 22px 15px; border-bottom: 1px solid var(--line); }
.modal-title { font-size: var(--fs-h2); font-weight: 650; color: var(--ink-1); letter-spacing: -.005em; }
.modal-close {
  width: 28px; height: 28px; flex: none; padding: 7px; border: none; border-radius: var(--r-xs);
  background: transparent; color: var(--ink-4); cursor: pointer; transition: .15s;
}
.modal-close:hover { background: var(--surface-3); color: var(--ink-1); }
.modal-body { padding: 20px 22px; overflow-y: auto; }
.modal-foot { display: flex; justify-content: flex-end; gap: 10px; padding: 15px 22px 18px; border-top: 1px solid var(--line); background: var(--surface-2); border-radius: 0 0 var(--r-lg) var(--r-lg); }

.result-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 18px; }
.result-item {
  position: relative; overflow: hidden; text-align: center; padding: 18px 10px 16px;
  border-radius: var(--r-md); background: var(--surface-2); border: 1px solid var(--line);
}
.result-item::before { content: ""; position: absolute; left: 0; top: 0; right: 0; height: 2.5px; background: var(--rc, var(--brand)); opacity: .85; }
.result-item .v { font-family: var(--font-num); font-variant-numeric: tabular-nums; font-size: 30px; font-weight: 680; letter-spacing: -.03em; color: var(--ink-1); line-height: 1.15; }
.result-item .k { font-size: 11.5px; color: var(--ink-3); margin-top: 7px; }
.result-item.blue { background: var(--brand-soft); border-color: var(--brand-line); } .result-item.blue .v { color: #0d5cc4; } .result-item.blue::before { background: var(--brand); }
.result-item.green { background: var(--ok-soft); border-color: #c6ecdd; } .result-item.green .v { color: #0a7d57; } .result-item.green::before { background: var(--ok); }
.result-item.orange { background: var(--warn-soft); border-color: #f6ddb8; } .result-item.orange .v { color: #a55f06; } .result-item.orange::before { background: var(--warn); }

.kv { display: grid; grid-template-columns: 104px 1fr; row-gap: 11px; column-gap: 12px; font-size: var(--fs-table); align-items: baseline; }
.kv .k { color: var(--ink-4); font-size: var(--fs-secondary); }
.kv .v { color: var(--ink-1); word-break: break-all; }
/* .muted 之前只在 table.tbl 里定义，弹窗里写 class="muted" 全部没生效 ——
   客户详情的「内部编号」就是这样显示成了正常黑字，看着和客户编码一样重。
   这里给出全局定义；表格内的 .muted 仍由 table.tbl .muted 覆盖为更深的 ink-3。 */
.muted { color: var(--ink-3); }
.kv .v.muted { color: var(--ink-4); font-size: var(--fs-secondary); }

/* ==========================================================================
   Toast / Loading / 滚动条
   ========================================================================== */
#toast-root { position: fixed; top: 22px; left: 50%; transform: translateX(-50%); z-index: 300; display: flex; flex-direction: column; gap: 10px; align-items: center; }
.toast {
  display: flex; align-items: center; gap: 10px; max-width: 540px;
  background: #fff; border: 1px solid var(--line-2); border-radius: var(--r-md);
  box-shadow: var(--sh-md); padding: 11px 16px 11px 13px; font-size: var(--fs-body); color: var(--ink-1);
  animation: pop .2s cubic-bezier(.22, .61, .36, 1);
}
.toast .t-ico {
  width: 20px; height: 20px; flex: none; padding: 4px; border-radius: 50%;
  background: var(--surface-3); color: var(--ink-3);
}
.toast.ok .t-ico { background: var(--ok-soft); color: var(--ok); }
.toast.err .t-ico { background: var(--danger-soft); color: var(--danger); }
.toast.info .t-ico { background: var(--brand-soft); color: var(--brand); }
.toast.ok { border-color: #c6ecdd; }
.toast.err { border-color: #f5cdcd; }
.toast.info { border-color: var(--brand-line); }

/* V4.56：页面居中的结果提示（下单成功等关键结果；带遮罩、视觉居中） */
.center-tip-mask {
  position: fixed; inset: 0; z-index: 310;
  display: flex; align-items: center; justify-content: center;
  background: rgba(15, 23, 42, .32); padding: 24px;
  animation: fade .16s ease;
}
.center-tip {
  min-width: 240px; max-width: 420px; padding: 26px 30px 24px;
  background: #fff; border-radius: var(--r-md); box-shadow: var(--sh-lg, var(--sh-md));
  display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center;
  animation: pop .2s cubic-bezier(.22, .61, .36, 1);
}
.center-tip .ct-ico {
  width: 42px; height: 42px; border-radius: 50%; padding: 9px;
  background: var(--ok-soft); color: var(--ok); margin-bottom: 2px;
}
.center-tip .ct-title { font-size: 16px; font-weight: 650; color: var(--ink-1); letter-spacing: -.005em; }
.center-tip .ct-msg { font-size: var(--fs-table); color: var(--ink-3); line-height: 1.7; }

.loading { display: flex; align-items: center; justify-content: center; gap: 9px; color: var(--ink-4); padding: 56px 0; font-size: var(--fs-table); }
.spinner {
  width: 16px; height: 16px; flex: none; border: 2px solid #e3e7ee; border-top-color: var(--brand);
  border-radius: 50%; display: inline-block; animation: spin .68s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-thumb { background: #d8dde5; border-radius: 5px; border: 2px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-thumb:hover { background: #c3cad4; background-clip: content-box; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-corner { background: transparent; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ==========================================================================
   响应式
   ========================================================================== */
@media (max-width: 1024px) {
  .login-shell { grid-template-columns: 1fr; min-height: 0; width: min(460px, 100%); }
  .login-hero { display: none; }
}
@media (max-width: 860px) {
  .sidebar { width: 68px; padding: 16px 10px 12px; }
  .side-brand-text, .nav-group, .nav-item span, .side-user-info,
  .nav-cat-head span, .nav-cat-head .chev { display: none; }
  .nav-item { justify-content: center; padding: 0; }
  .nav-cat-head { justify-content: center; padding: 0; }
  .nav-sub { margin: 1px 0 3px 0; padding-left: 0; border-left: none; align-items: center; }
  .nav-sub .nav-item { height: 38px; width: 44px; justify-content: center; padding: 0; font-size: var(--fs-body); }
  .nav-sub .nav-item.active::before { left: -10px; }
  .nav-item.active::before { left: -10px; }
  .side-user { justify-content: center; padding: 8px; }
  .topbar { padding: 0 18px; }
  .content { padding: 18px 18px 48px; }
  .topbar-meta { display: none; }
}

/* ==========================================================================
   字段口径提示（圆圈感叹号，与 q-tip 同形态） / 时间选择空态（V4.4）
   ========================================================================== */
.help-dot {
  display: inline-flex; align-items: center; justify-content: center;
  width: 14px; height: 14px; margin-left: 5px; flex: 0 0 auto;
  border: 1px solid var(--ink-4); border-radius: 50%; color: var(--ink-4);
  font-size: 10px; font-weight: 600; line-height: 1; cursor: pointer;
  vertical-align: middle; user-select: none; transition: .15s;
}
.help-dot:hover, .help-dot:focus-visible {
  border-color: var(--brand); color: var(--brand); outline: none;
  background: var(--brand-soft);
}
/* 字段名本身也是悬停区：鼠标落到名称上就能看到口径，不用精准命中图标 */
.stat-label.tip-host { cursor: pointer; }
.help-pop {
  position: fixed; z-index: 400; display: none; max-width: 320px; white-space: pre-line;
  background: #1f2b3a; color: #eef3f9; font-size: var(--fs-note); line-height: 1.8;
  padding: 10px 13px; border-radius: var(--r-md); box-shadow: var(--sh-lg);
  pointer-events: none;
}

.dt-field { position: relative; min-width: 188px; max-width: 230px; }
.dt-field .input { width: 100%; }
.toolbar .dt-field .input { min-width: 0; }
.toolbar .input.slim { min-width: 150px; width: 190px; }
.dt-field.ph .input { color: transparent; }
.dt-field.ph .input::-webkit-calendar-picker-indicator { opacity: .5; }
.dt-ph {
  position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
  color: var(--ink-4); font-size: var(--fs-body); pointer-events: none; display: none;
}
.dt-field.ph .dt-ph { display: block; }

/* ==================== App下载页（V4.65 横屏并排三个 · 参照参考卡片布局，蓝色系不变） ==================== */
.app-dl-card {
  width: calc((100% - 32px) / 3);
  max-width: 480px; min-width: 320px;
  padding: 18px 20px;
}
/* V4.67：数据端 / 员工端两张卡片并排（窄屏自动上下叠放）
   V4.68：卡片宽度收窄到原并排宽度的 60%，避免文字行过长、页面显得空散 */
.app-dl-grid { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 16px; }
.app-dl-grid .app-dl-card { width: calc((100% - 16px) / 2 * 0.6); max-width: none; min-width: 300px; }
@media (max-width: 1180px) {
  .app-dl-grid .app-dl-card { width: calc((100% - 16px) / 2); }
}
@media (max-width: 900px) {
  .app-dl-grid .app-dl-card { width: 100%; }
}
.app-dl-head { display: flex; align-items: flex-start; gap: 12px; padding-bottom: 14px; }
.app-dl-icon {
  flex: none; width: 44px; height: 44px; border-radius: 12px;
  background: linear-gradient(135deg, var(--brand-hi), var(--brand-lo));
  color: #fff; font-size: 20px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 12px rgba(22, 119, 255, .26);
}
.app-dl-icon.big { width: 64px; height: 64px; font-size: 30px; margin: 0 auto 12px; }
.app-dl-title { flex: 1; min-width: 0; }
.app-dl-name {
  font-size: 16px; font-weight: 650; color: var(--ink-1);
  display: flex; align-items: center; gap: 7px; flex-wrap: wrap; line-height: 1.45;
}
.app-dl-ver-badge {
  display: inline-flex; align-items: center; height: 20px; padding: 0 8px;
  border-radius: 999px; background: var(--brand-soft); border: 1px solid var(--brand-line);
  color: var(--brand); font-size: 11px; font-weight: 600;
  font-family: var(--font-num); letter-spacing: .2px;
}
.app-dl-pkg {
  margin-top: 5px; font-family: ui-monospace, Consolas, monospace;
  font-size: 11.5px; color: var(--ink-3); letter-spacing: .1px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.app-dl-desc { margin-top: 6px; font-size: 12px; color: var(--ink-3); line-height: 1.6; }
.app-dl-status {
  flex: none; display: inline-flex; align-items: center; gap: 5px; white-space: nowrap;
  font-size: 11.5px; color: #0a8f45; background: #e9f9f0;
  padding: 3px 9px; border-radius: 999px; border: 1px solid #c9efd9;
}
.app-dl-status i { width: 6px; height: 6px; border-radius: 50%; background: #17b26a; }
.app-dl-status.off { color: var(--ink-3); background: var(--surface-3); border-color: var(--line); }
.app-dl-status.off i { background: var(--ink-4); }
.app-dl-sec { padding: 13px 0; border-top: 1px solid var(--line); }
/* 版本号 / 大小 两列并排，更新时间与下载次数合成一行 */
.app-dl-meta { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px; padding-top: 13px; }
.app-dl-meta-item .k { display: block; font-size: 11.5px; color: var(--ink-3); margin-bottom: 4px; }
.app-dl-meta-item .v { font-size: 14.5px; font-weight: 650; color: var(--ink-1); letter-spacing: -.01em; }
.app-dl-build { font-style: normal; font-weight: 500; font-size: 12px; color: var(--ink-3); letter-spacing: 0; }
.app-dl-updated {
  grid-column: 1 / -1; display: flex; align-items: baseline; flex-wrap: wrap; gap: 5px;
  font-size: 11.5px; color: var(--ink-3);
}
.app-dl-updated .v { font-size: 12px; font-weight: 500; color: var(--ink-1); }
.app-dl-updated .sep { color: var(--ink-4); }
.app-dl-updated .sub { color: var(--ink-3); }
.app-dl-dl .k, .app-dl-manifest .k { font-size: 11.5px; color: var(--ink-3); margin-bottom: 7px; line-height: 1.5; }
/* 地址 + 复制 + 下载 同一行，按钮贴在地址右侧 */
.app-dl-url-row { display: flex; align-items: center; flex-wrap: nowrap; gap: 6px; }
.app-dl-url-row .input {
  flex: 1 1 auto; min-width: 0; height: 32px; font-size: 11.5px; color: var(--ink-2);
  background: var(--surface-3); border-radius: 8px; text-overflow: ellipsis;
}
.app-dl-url-row .btn {
  flex: none; height: 32px; padding: 0 12px; font-size: 12px; border-radius: 8px;
  display: inline-flex; align-items: center; justify-content: center; gap: 5px; white-space: nowrap;
}
.app-dl-url-row .btn svg { width: 13px; height: 13px; }
.app-dl-foot {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px;
  padding-top: 14px; border-top: 1px solid var(--line);
}
.app-dl-foot .btn { height: 34px; padding: 0 14px; font-size: 12.5px; border-radius: 8px; }
.app-dl-push {
  display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px;
  border-radius: 999px; border: 1px solid #c9efd9; background: #f4fbf7;
  color: #0a8f45; font-size: 12px; font-weight: 500; cursor: pointer;
  transition: background .16s, border-color .16s;
}
.app-dl-push i { width: 6px; height: 6px; border-radius: 50%; background: #17b26a; }
.app-dl-push:hover { background: #e9f9f0; border-color: #a9e6c2; }
.app-dl-push.off { border-color: var(--line); background: var(--surface-3); color: var(--ink-3); }
.app-dl-push.off i { background: var(--ink-4); }
.app-dl-empty { text-align: center; padding: 28px 0 20px; }
.app-dl-empty .strong { font-size: 15px; color: var(--ink-1); }
.app-dl-empty .muted { font-size: 12.5px; margin-top: 6px; }
@media (max-width: 1280px) {
  .app-dl-card { width: calc((100% - 16px) / 2); }
}
@media (max-width: 900px) {
  .app-dl-card { width: 100%; max-width: 100%; }
  .app-dl-meta { grid-template-columns: 1fr; }
  .app-dl-url-row { flex-wrap: wrap; }
  .app-dl-url-row .input { flex: 1 1 100%; }
  .app-dl-url-row .btn { flex: 1 1 auto; }
}

/* ==================== 订单列表 ==================== */
.ord-tb .input { min-width: 130px; width: 150px; }
.ord-tb .input.slim { min-width: 110px; width: 120px; }
.ord-tb .select { width: auto; max-width: 160px; }
.ord-tb .dt-field .input { min-width: 168px; width: 180px; }
.ord-tbl { min-width: 1560px; }
.ord-tbl th, .ord-tbl td { white-space: nowrap; }

/* 订单管理 · 订单列表（T9 数据域）：商品名可能很长，限制列宽并允许折行，避免把表格撑爆 */
.t9-goods { display: block; min-width: 190px; max-width: 300px; line-height: 1.5; white-space: normal; font-size: var(--fs-secondary); color: var(--ink-3); }
/* 关联客户 = 该收件手机号在 400 域建过档，点开客户详情 */
.t9-cust-link { color: var(--brand); cursor: pointer; border-bottom: 1px dashed var(--brand-line); }
.t9-cust-link:hover { color: var(--brand-lo); border-bottom-style: solid; }

/* ==================== 升级记录（版本日志 / 回退） ==================== */
.ver-list { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }
.ver-item { border: 1px solid var(--line-1, #e5e9f2); border-radius: 10px; padding: 12px 14px; background: var(--bg-1, #fff); }
.ver-item.current { border-color: var(--brand, #2f6bff); box-shadow: 0 0 0 1px var(--brand, #2f6bff) inset; }
.ver-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ver-time { font-size: 12px; color: var(--ink-4, #98a2b3); }
.ver-notes { margin-top: 8px; font-size: 12.8px; line-height: 1.75; color: var(--ink-2, #475467); white-space: pre-wrap; word-break: break-word; }
.ver-notes.muted { color: var(--ink-4, #98a2b3); }

/* ==================== V4.13 查询条件：字段标签 + 输入框 分离样式 ==================== */
.qf-row { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 10px 18px; padding: 2px 2px 12px; border-bottom: 1px dashed var(--line, #e8ecf3); margin-bottom: 12px; }
.ord-filters { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; min-width: 0; flex: 1 1 auto; }
.qf-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 8px; margin-left: auto; flex: 0 0 auto; }
.qf-sub { display: flex; align-items: center; gap: 8px; margin: -4px 0 10px; }
/* 客户主档状态条（客户明细页 qf-sub 内）：T9 建档 / 已同步 / 待建档 三个数并排 */
.t9-cover { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--ink-3); white-space: nowrap; }
.t9-cover b { color: var(--ink-1); font-weight: 600; }
.t9-cover b.t9-cover-warn { color: #ff7d00; }
/* 1px 竖条做分组；--line 在浅色底上几乎看不见，改用半透明墨色 */
.t9-cover-sep { display: inline-block; width: 1px; height: 11px; background: rgba(0, 0, 0, .16); margin: 0 1px; }
.f-item { display: inline-flex; align-items: center; gap: 7px; min-width: 0; }
.f-item > label { font-size: 12.5px; color: var(--ink-3); white-space: nowrap; font-weight: 500; }
.f-item .input, .f-item .select { min-width: 0; }
.f-item .input { width: 150px; }
.f-item .select { width: auto; max-width: 170px; }
.f-item .input.slim { width: 170px; }
.ord-filters .dt-field { min-width: 178px; max-width: 220px; }
.ord-filters .range-sep { color: var(--ink-4, #98a2b3); margin: 0 2px; }
.qf-actions .btn-sm { height: 32px; }

/* ==================== V4.17 按钮组在查询条件所在行右对齐（条件排不下时跟随到最后一行右侧） ==================== */
.ord-filters > .qf-actions { margin-left: auto; justify-content: flex-end; align-items: center; }

/* ==================== V4.17 顶部标题行右侧操作按钮 ==================== */
.topbar-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.topbar-actions .btn { height: 32px; padding: 0 13px; font-size: 12.5px; white-space: nowrap; }

/* ==================== V4.16.2 检索区紧凑高度（输入框 / 按钮统一 30px） ==================== */
.ord-filters .input, .ord-filters .select { height: 30px; padding: 0 10px; font-size: 12.5px; }
.ord-filters .f-item > label { font-size: 12px; }
.ord-filters .dt-field .input { height: 30px; }
/* V4.49：.f-item .input 的 width:150px（同特异性后定义）会盖过 .dt-field .input 的 width:100%，
   导致日期框只有 150px 而容器 178px+，剩余空白全部堆在「至」前面 → 恢复撑满容器 */
.ord-filters .f-item .dt-field .input { width: 100%; }
.ord-filters > .qf-actions .btn { height: 30px; padding: 0 12px; font-size: 12.5px; }

/* ==========================================================================
   V4.19 商品管理 / 客户下单 / 客户合并
   ========================================================================== */
/* 表单两列栅格（商品表单、下单弹窗共用） */
.pf-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 18px; }
.pf-grid .field { margin: 0; }
.p-check { display: flex; align-items: center; gap: 8px; cursor: pointer; user-select: none; font-size: var(--fs-secondary); color: var(--ink-2); }
.p-check input { accent-color: var(--brand); width: 15px; height: 15px; margin: 0; }

/* 商品图片缩略图 */
.p-thumb { width: 38px; height: 38px; border-radius: var(--r-xs); object-fit: cover; border: 1px solid var(--line); display: inline-block; vertical-align: middle; }
.p-thumb-ph { display: inline-flex; align-items: center; justify-content: center; font-size: 10px; color: var(--ink-4); background: var(--surface-3); vertical-align: middle; }

/* 图片上传 */
.p-upload { display: flex; align-items: center; gap: 12px; margin-top: 6px; }
.p-upload-img { width: 68px; height: 68px; border-radius: var(--r-sm); object-fit: cover; border: 1px solid var(--line); background: var(--surface-3); }
.p-upload-img.hidden { display: none; }
.p-upload-side { display: flex; flex-direction: column; gap: 4px; }
.p-upload-side input[type="file"] { font-size: var(--fs-note); max-width: 220px; }
.p-upload-tip { font-size: var(--fs-caption); color: var(--ink-4); }

/* 下单：商品选择列表 */
.oc-goods { max-height: 250px; overflow: auto; border: 1px solid var(--line); border-radius: var(--r-md); }
.oc-good { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-bottom: 1px solid var(--line); }
.oc-good:last-child { border-bottom: none; }
.oc-good.on { background: var(--brand-soft); }
.oc-good-main { display: flex; align-items: center; gap: 10px; flex: 1; cursor: pointer; min-width: 0; }
.oc-good-main input[type="checkbox"] { accent-color: var(--brand); width: 15px; height: 15px; margin: 0; flex: 0 0 auto; }
.oc-good-name { font-size: var(--fs-table); color: var(--ink-1); font-weight: 600; }
.oc-good-meta { font-size: var(--fs-note); color: var(--ink-4); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.oc-good-price { font-size: var(--fs-table); color: var(--brand); font-family: var(--font-num); }
.oc-good-price .oc-cut { display: block; font-style: normal; font-size: var(--fs-caption); color: var(--ink-4); text-decoration: line-through; }
.oc-good-stock { font-size: var(--fs-note); color: var(--ink-3); font-family: var(--font-num); }
.oc-good-stock.danger { color: var(--danger); }
.oc-qty { width: 68px; height: 30px; padding: 0 8px; font-size: var(--fs-secondary); flex: 0 0 auto; }
.oc-qty:disabled { background: var(--surface-3); color: var(--ink-4); }

/* V4.61 下单弹窗：商品信息表 + 金额与结算垂直清单 + 选择商品弹窗 */
.oc-empty {
  padding: 20px 14px; text-align: center; font-size: var(--fs-table); color: var(--ink-4);
  background: var(--surface-2); border: 1px dashed var(--line); border-radius: var(--r-md);
}
.oc-gtbl th, .oc-gtbl td { padding: 9px 12px; }
.oc-gtbl .oc-qty { width: 74px; height: 30px; }
.oc-del { color: var(--danger); padding: 4px 8px; }
.oc-del:hover { background: #fdeded; color: var(--danger); }
/* V4.62：金额与结算去掉灰色短横线，改为纯清单式；付款方式 / 发货仓库 用文本值 */
.oc-settle { max-width: 380px; margin-left: auto; }
.oc-st-row {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 7px 2px;
}
.oc-st-k { font-size: var(--fs-table); color: var(--ink-3); flex: 0 0 auto; }
.oc-st-v { font-family: var(--font-num); font-variant-numeric: tabular-nums; font-size: var(--fs-table); font-weight: 600; color: var(--ink-1); }
.oc-st-v.oc-st-txt { font-family: inherit; letter-spacing: 0; text-align: right; min-width: 0; word-break: break-word; }
.oc-st-sum { padding: 8px 2px 9px; margin: 4px 0; }
.oc-st-sum .oc-st-k { font-size: var(--fs-title); font-weight: 650; color: var(--ink-1); }
.oc-st-sum .oc-st-v { font-size: 20px; font-weight: 700; letter-spacing: -.02em; }
.oc-st-input {
  width: 124px; height: 32px; padding: 0 10px; text-align: right;
  font-family: var(--font-num); font-variant-numeric: tabular-nums; font-size: var(--fs-table);
  color: var(--ink-1); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-sm);
  transition: border-color .15s, box-shadow .15s;
}
.oc-st-input:focus { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); outline: none; }
.oc-st-tip { padding: 6px 2px 0; text-align: right; font-size: 11.5px; color: var(--ink-4); }
.pf-grid.pf-3 { grid-template-columns: 1fr 1fr 1fr; }
/* 选择商品弹窗 */
.pk-head { display: flex; align-items: center; gap: 14px; margin-bottom: 12px; }
.pk-head .input { flex: 1 1 auto; }
.pk-head .card-sub { flex: 0 0 auto; }
.pk-list { max-height: 54vh; overflow: auto; border: 1px solid var(--line); border-radius: var(--r-md); }
.pk-tbl th, .pk-tbl td { padding: 9px 12px; }
.pk-tbl .oc-qty { width: 74px; height: 30px; }
.pk-tbl .oc-cut { display: block; font-style: normal; font-size: var(--fs-caption); color: var(--ink-4); text-decoration: line-through; }
.pk-tbl .danger { color: var(--danger); }
.pk-tbl tr.pk-on td { background: var(--brand-soft); }
.pk-cb { width: 15px; height: 15px; margin: 0; accent-color: var(--brand); cursor: pointer; }

/* 客户合并：字段对比 */
.mg-keep { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; padding: 10px 14px; background: var(--surface-3); border-radius: var(--r-md); margin-bottom: 12px; font-size: var(--fs-secondary); }
.mg-table { max-height: 320px; overflow: auto; border: 1px solid var(--line); border-radius: var(--r-md); }
.mg-table .select { height: 30px; padding: 0 8px; font-size: var(--fs-note); }
.mg-auto { font-size: var(--fs-caption); color: var(--warn); margin-top: 3px; }

/* 角色管理：权限分组标题 */
.perm-group-title { font-size: var(--fs-note); font-weight: 600; color: var(--ink-3); margin-bottom: 2px; }

/* ==========================================================================
   V4.21 商品管理改版（子菜单 / 分组卡片 / 仓库 / 分类树）+ V4.22 客户弹窗
   ========================================================================== */
/* 新增/编辑商品弹窗：字段按卡片分组 */
.pf-group { border: 1px solid var(--line); border-radius: var(--r-md); padding: 14px 16px 16px; margin-bottom: 14px; background: var(--surface-2, transparent); }
.pf-group-title { font-size: var(--fs-table); font-weight: 600; color: var(--brand); margin-bottom: 12px; padding-left: 9px; position: relative; }
.pf-group-title::before { content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 3px; height: 14px; border-radius: 2px; background: var(--brand); }

/* 分页条固定在列表页最底部（fill 布局下始终贴底可见，样式对齐来电记录页） */
.content.fill > .card > .pager {
  position: sticky; bottom: -22px; z-index: 5;
  background: var(--surface);
  margin: 0 -2px; padding: 12px 2px 10px;
  box-shadow: 0 -1px 0 var(--line);
}

/* 商品分类：两级树形 */
.cat-expander { width: 20px; height: 20px; line-height: 18px; text-align: center; border: 1px solid var(--line); border-radius: var(--r-xs); background: var(--surface-2); color: var(--ink-2); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; margin-right: 8px; font-size: 13px; padding: 0; flex: 0 0 auto; }
.cat-expander.ph { border-style: dashed; cursor: default; opacity: .45; }
.cat-indent { display: inline-block; margin: 0 8px 0 12px; color: var(--ink-4); }

/* 客户详情弹窗：客户号码列表（多号码时显示） */
.cust-phones { border: 1px solid var(--line); border-radius: var(--r-md); padding: 10px 14px; margin-bottom: 16px; }
.cust-phones-title { font-size: var(--fs-note); color: var(--ink-3); font-weight: 600; margin-bottom: 6px; }
.cust-phone-row { display: flex; align-items: center; gap: 10px; padding: 5px 0; border-bottom: 1px dashed var(--line); font-size: var(--fs-table); }
.cust-phone-row:last-child { border-bottom: none; }
.cust-phone-row .num { font-weight: 600; }

/* ==========================================================================
   V4.23 商品列表检索栏 / 行点击查看 / 商品详情弹窗
   ========================================================================== */
/* 检索栏：输入框与下拉保证适度宽度，价格区间更紧凑 */
.ord-filters.pf-filters .f-item > label { white-space: nowrap; }
.ord-filters.pf-filters .f-item .input { width: 172px; min-width: 148px; }
.ord-filters.pf-filters .f-item .select { width: auto; min-width: 132px; max-width: 200px; }
.ord-filters.pf-filters .price-input { width: 96px; min-width: 88px; }
.ord-filters.pf-filters .price-hint { font-size: 12px; color: var(--ink-4, #98a2b3); white-space: nowrap; }

/* 商品列表：整行可点击查看 */
table.tbl tbody tr[data-p-row] { cursor: pointer; }
table.tbl tbody tr[data-p-row]:hover { background: var(--surface-2, #f7f9fc); }
td.p-ops { white-space: nowrap; }

/* 商品详情弹窗 */
.pv-pic { border: 1px solid var(--line); border-radius: var(--r-md); padding: 10px 12px; text-align: center; }
.pv-pic-label { font-size: var(--fs-note); color: var(--ink-3); margin-bottom: 6px; }
.pv-img { max-width: 100%; max-height: 150px; border-radius: var(--r-sm); display: inline-block; }
.pv-img-ph { display: inline-flex; align-items: center; justify-content: center; width: 100%; height: 92px; background: var(--surface-2, #f7f9fc); color: var(--ink-4); font-size: var(--fs-note); }

/* ==========================================================================
   V4.24/V4.25 下单弹窗（多收件地址） / 订单查询栏网格对齐 / 操作列单行
   ========================================================================== */
/* 列表页「操作」列：按钮一行展示，不换行 */
table.tbl td.p-ops { white-space: nowrap; }
table.tbl td.p-ops .btn { margin-right: 2px; }

/* 订单列表查询栏：字段与控件同行（标签在左、控件在右）；组内紧凑、组间留白，视觉上自然成组 */
.ord-filters.o-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(272px, 1fr));
  gap: 11px 30px;      /* 行距 11px / 组间距 30px：同组靠近、异组拉开 */
  align-items: center;
  width: 100%;
}
.ord-filters.o-grid > .f-item.o-cell {
  display: flex; flex-direction: row; align-items: center; gap: 8px; min-width: 0;
}
.ord-filters.o-grid > .f-item.o-cell > label {
  flex: 0 0 auto; min-width: 64px; font-size: 12px; color: var(--ink-3); white-space: nowrap; font-weight: 500;
}
.ord-filters.o-grid > .f-item.o-cell > .input,
.ord-filters.o-grid > .f-item.o-cell > .select { flex: 1 1 auto; width: auto; min-width: 0; height: 32px; font-size: 12.5px; }
.ord-filters.o-grid > .f-item.o-span2 { grid-column: span 2; }
.ord-filters.o-grid .o-range { display: flex; align-items: center; gap: 6px; min-width: 0; flex: 1 1 auto; }
.ord-filters.o-grid .o-range > .dt-field { flex: 1 1 0; min-width: 0; }
.ord-filters.o-grid .o-range > .input { flex: 1 1 0; min-width: 0; }
.ord-filters.o-grid > .qf-actions { grid-column: 1 / -1; justify-content: flex-end; align-items: center; margin-left: 0; }
@media (max-width: 900px) {
  .ord-filters.o-grid { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px 18px; }
  .ord-filters.o-grid > .f-item.o-span2 { grid-column: 1 / -1; }
}

/* V4.56b：订单审核弹窗「审核备注」输入框加高（.input 全局 height:40px 会盖掉 textarea 的 rows） */
/* V4.58：归属地 TOP10 点省份展开的归属市明细（嵌套小表，缩进对齐） */
/* V4.60 归属地 TOP10：点归属省弹小窗查看该省下归属市明细 */
tr.prov-row { cursor: pointer; }
tr.prov-row > td { transition: background .12s; }
tr.prov-row:hover > td { background: var(--surface-2); }
.prov-go { display: inline-flex; align-items: center; gap: 6px; }
.prov-go .prov-chev {
  width: 13px; height: 13px; flex: none; color: var(--ink-4);
  transform: rotate(-90deg); transition: transform .15s, color .15s;
}
tr.prov-row:hover .prov-chev { color: var(--brand); transform: translateX(2px) rotate(-90deg); }
/* 弹窗内：区间信息条已用 .od-meta（带下边框），指标卡复用 .result-grid / .result-item */
/* 明细表不再单独限高（V4.60b：固定高度会把最后一截行切一半），由 .modal-body 统一滚动 */
.pd-card .card-head { padding-bottom: 10px; margin-bottom: 0; border-bottom: none; }
.pd-list { border-top: 1px solid var(--line); }
.pd-tbl tbody td { padding: 8px 14px; }
.pd-tbl .pd-pct-col { width: 92px; }
/* V4.58：来电记录页 省 / 市 联动筛选 */
/* 来电记录页 省 / 市 联动筛选（V4.58）：固定窄宽同行排列，不被 option 内容撑开 */
.geo-casc { display: flex; gap: 8px; flex-wrap: nowrap; }
.geo-casc .select { flex: 0 0 124px; width: 124px; max-width: 124px; }
.geo-casc .select:disabled { opacity: .6; cursor: not-allowed; }
/* V4.59 400号码 / 落地号 下拉定宽（避免 option 长号码把筛选行撑乱） */
.ord-filters .f-item .select.geo-sel { width: 150px; max-width: 150px; }
#oa-note.input { height: 80px; padding: 9px 13px; line-height: 1.7; resize: vertical; }
/* 下单弹窗：收件信息表头右侧（提示文字 + 新增收件地址按钮同行，按钮居最右） */
.oc-hd-right { display: flex; align-items: center; justify-content: flex-end; gap: 14px; flex-wrap: wrap; min-width: 0; }
.oc-hd-right .card-sub { min-width: 0; flex: 1 1 auto; text-align: right; }
.oc-hd-right .btn { flex: 0 0 auto; }
/* 下单弹窗：收件地址卡片（可多个，单选默认） */
.oc-addrs { display: flex; flex-direction: column; gap: 10px; }
.oc-addr { border: 1px solid var(--line); border-radius: var(--r-md); padding: 10px 14px 14px; background: var(--surface); }
.oc-addr.on { border-color: var(--brand); box-shadow: 0 0 0 2px var(--brand-soft); }
.oc-addr-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.oc-casc { display: flex; gap: 8px; flex-wrap: wrap; }
.oc-casc .select { flex: 1 1 150px; min-width: 130px; }

/* 角色授权：模块 + 模块下按钮合并为树状展示（V4.26） */
.rm-mask-row { display: flex; align-items: center; gap: 8px; padding: 9px 12px; margin-top: 4px; border: 1px solid var(--line); border-radius: var(--r-md); cursor: pointer; user-select: none; }
.rm-mask-row input[type=checkbox] { accent-color: var(--brand); width: 15px; height: 15px; margin: 0; }
.pt-toolbar { display: flex; align-items: center; gap: 8px; margin: 6px 0 8px; flex-wrap: wrap; }
.pt-toolbar .pt-sep { width: 1px; height: 18px; background: var(--line); }
.perm-tree { border: 1px solid var(--line); border-radius: var(--r-md); padding: 6px 4px; max-height: 360px; overflow: auto; background: var(--surface); }
.pt-legend { font-size: 11.5px; color: var(--ink-4); margin: 0 0 6px 2px; line-height: 1.6; }
.perm-tree .pt-kids { display: block; }
.perm-tree .pt-node.collapsed > .pt-kids { display: none; }
.perm-tree .pt-row { display: flex; align-items: center; gap: 6px; padding: 4px 8px; border-radius: var(--r-xs); }
.perm-tree .pt-row:hover { background: var(--surface-3); }
.perm-tree .pt-row.pt-on > .pt-check > .pt-label { color: var(--ink-1); font-weight: 600; }
.perm-tree .pt-caret { flex: 0 0 auto; width: 18px; height: 18px; line-height: 1; padding: 0; border: none; background: transparent; color: var(--ink-3); cursor: pointer; font-size: 11px; transition: transform .15s ease; }
.perm-tree .pt-node.collapsed > .pt-row > .pt-caret { transform: rotate(-90deg); }
.perm-tree .pt-caret-space { flex: 0 0 auto; width: 18px; display: inline-block; }
.perm-tree .pt-check { display: flex; align-items: center; gap: 8px; cursor: pointer; user-select: none; min-width: 0; }
.perm-tree .pt-check input[type=checkbox] { accent-color: var(--brand); width: 15px; height: 15px; margin: 0; flex: 0 0 auto; }
.perm-tree .pt-label { font-size: var(--fs-body); color: var(--ink-2); white-space: nowrap; }
.perm-tree .pt-node[data-depth="0"] > .pt-row > .pt-check > .pt-label { font-weight: 600; color: var(--ink-1); }
.perm-tree .pt-count { font-size: 11px; margin-left: 2px; flex: 0 0 auto; }
/* 节点说明（PERM_TREE 里的 hint）：灰色小字跟在标签后面，窄屏时截断，不挤压右侧计数 */
.perm-tree .pt-hint { font-size: 11px; color: var(--ink-4); margin-left: 2px; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; min-width: 0; max-width: 340px; }
.perm-tree .pt-node[data-depth="0"] > .pt-row > .pt-check > .pt-hint { max-width: none; }
.perm-tree .pt-node.has-kids > .pt-kids { margin-left: 9px; border-left: 1px dashed var(--line); }

/* V4.52 功能权限三层分级：菜单目录 / 菜单页面 / 页内按钮 */
.perm-tree .pt-node[data-kind="group"] > .pt-row {
  background: var(--surface-3); margin-top: 4px; padding-top: 6px; padding-bottom: 6px;
  position: sticky; top: 0; z-index: 1; border-radius: var(--r-xs);
}
.perm-tree .pt-node[data-kind="group"]:first-child > .pt-row { margin-top: 0; }
.perm-tree .pt-node[data-kind="group"] + .pt-node[data-kind="group"] > .pt-row { margin-top: 8px; }
.perm-tree .pt-node[data-kind="group"] > .pt-row:hover { background: var(--brand-soft, #eef3ff); }
.perm-tree .pt-node[data-kind="group"] > .pt-row > .pt-check > .pt-label { font-size: 13px; }
.perm-tree .pt-node[data-kind="group"] > .pt-row > .pt-count { margin-left: auto; padding-right: 4px; }
.perm-tree .pt-node[data-kind="page"] > .pt-row > .pt-check > .pt-label { font-weight: 500; color: var(--ink-1); }
.perm-tree .pt-node[data-kind="page"] > .pt-row > .pt-count { margin-left: auto; padding-right: 4px; }
.perm-tree .pt-node[data-kind="item"] > .pt-row { padding-top: 1px; padding-bottom: 1px; }
.perm-tree .pt-node[data-kind="item"] > .pt-row > .pt-check > .pt-label { font-size: 12.5px; color: var(--ink-3); }
.perm-tree .pt-node[data-kind="item"] > .pt-row > .pt-check input[type=checkbox] { width: 14px; height: 14px; }
.perm-tree .pt-node[data-kind="item"] > .pt-row.pt-on > .pt-check > .pt-label { font-weight: 500; }

/* ==========================================================================
   V4.28 订单查询栏细节：下单时间区间紧挨、金额/客户ID 输入框收窄；订单菜单图标
   ========================================================================== */
/* 下单时间：两个日期框定宽紧挨（V4.49 收紧「至」前空隙——不再等分拉伸，多余空白留在单元格末尾） */
.ord-filters.o-grid .o-range { gap: 8px; }
.ord-filters.o-grid .o-range > .dt-field { flex: 0 0 190px; min-width: 0; max-width: 190px; }
.ord-filters.o-grid .range-sep { margin: 0 2px; }

/* 应付总额：最低 / 最高金额输入框收窄到约原来一半宽 */
.ord-filters.o-grid #o-pmin,
.ord-filters.o-grid #o-pmax { flex: 0 0 auto; width: 125px; min-width: 0; }

/* 客户ID：搜索输入框收窄到约原来 2/3 宽 */
.ord-filters.o-grid #o-cid { flex: 0 0 auto; width: 147px; min-width: 0; }

/* 订单列表菜单图标（订单/单据样式，替换原电话图标） */
.side-nav .nav-item[data-page="orders"] .ico svg { stroke-linejoin: round; }

/* ==========================================================================
   V4.30 商品新增/编辑弹窗：板块内单列逐行（与「查看商品」字段排列一致）
   ========================================================================== */
.pf-grid.pf-rows { grid-template-columns: 1fr; gap: 12px; }

/* ==========================================================================
   V4.35 七个列表页（客户明细/来电记录/仓库管理/商品分类/商品列表/订单列表/订单审核/订单发货）
   表头与表体统一「水平居中 + 垂直居中」：标题与列值严格对齐（金额等 .right 列统一右对齐）
   ========================================================================== */
#content[data-page="customers"] table.tbl thead th,
#content[data-page="records"] table.tbl thead th,
#content[data-page="warehouses"] table.tbl thead th,
#content[data-page="categories"] table.tbl thead th,
#content[data-page="products"] table.tbl thead th,
#content[data-page="orders"] table.tbl thead th,
#content[data-page="orderaudit"] table.tbl thead th,
#content[data-page="ordership"] table.tbl thead th { text-align: center; vertical-align: middle; }

#content[data-page="customers"] table.tbl tbody td,
#content[data-page="records"] table.tbl tbody td,
#content[data-page="warehouses"] table.tbl tbody td,
#content[data-page="categories"] table.tbl tbody td,
#content[data-page="products"] table.tbl tbody td,
#content[data-page="orders"] table.tbl tbody td,
#content[data-page="orderaudit"] table.tbl tbody td,
#content[data-page="ordership"] table.tbl tbody td { text-align: center; vertical-align: middle; }

/* 金额列：表头与单元格同向右对齐（避免标题居中、数字右对齐的错位） */
#content[data-page="customers"] table.tbl thead th.right,
#content[data-page="records"] table.tbl thead th.right,
#content[data-page="warehouses"] table.tbl thead th.right,
#content[data-page="categories"] table.tbl thead th.right,
#content[data-page="products"] table.tbl thead th.right,
#content[data-page="orders"] table.tbl thead th.right,
#content[data-page="orderaudit"] table.tbl thead th.right,
#content[data-page="ordership"] table.tbl thead th.right,
#content[data-page="customers"] table.tbl tbody td.right,
#content[data-page="records"] table.tbl tbody td.right,
#content[data-page="warehouses"] table.tbl tbody td.right,
#content[data-page="categories"] table.tbl tbody td.right,
#content[data-page="products"] table.tbl tbody td.right,
#content[data-page="orders"] table.tbl tbody td.right,
#content[data-page="orderaudit"] table.tbl tbody td.right,
#content[data-page="ordership"] table.tbl tbody td.right { text-align: right; }

/* 单元格内的胶囊标签 / 按钮跟随单元格垂直居中（inline-flex 默认按基线对齐会偏低） */
table.tbl tbody td > .tag,
table.tbl tbody td > .btn,
table.tbl tbody td .tag { vertical-align: middle; }
table.tbl tbody td .btn + .btn { margin-left: 2px; }

/* ==========================================================================
   V4.33 客户详情弹窗：来电记录 / 订单记录 Tab
   ========================================================================== */
.cd-tabs { display: flex; gap: 4px; margin: 2px 0 12px; border-bottom: 1px solid var(--line); }
.cd-tab { padding: 8px 14px; border: none; background: transparent; cursor: pointer; font-size: var(--fs-body); color: var(--ink-3); border-bottom: 2px solid transparent; transition: color .15s, border-color .15s; }
.cd-tab:hover { color: var(--ink-1); }
.cd-tab.active { color: var(--brand); font-weight: 600; border-bottom-color: var(--brand); }
#cd-orders table.tbl th, #cd-orders table.tbl td { white-space: nowrap; }

/* ==========================================================================
   V4.34 订单详情弹窗：卡片式分块布局（基本信息 / 收件信息 / 物流信息 / 商品清单）
   价格合计块置于商品清单下方右对齐
   ========================================================================== */
.od-card { border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); padding: 14px 16px 16px; margin-bottom: 14px; }

/* 订单列表标题右侧的指标摘要（2026-10-30：原来「订单数 / 下单金额 / 拒收 / 付费客单价」
 * 四张大卡片占满一整行，压成一行文字放在「订单列表」右边、「共 X 单」左边）。
 * 数字用等宽数字字体并加重一档，标签保持次要灰 —— 一行里能一眼扫到 4 个关键值，
 * 但不跟标题抢层级。分隔点用 --line-2（比文字淡得多），靠 gap 控距而不是靠空格。 */
.ord-sum { display: inline-flex; align-items: baseline; gap: 8px; flex-wrap: wrap; font-size: var(--fs-secondary); color: var(--ink-3); }
.ord-sum > span { white-space: nowrap; }
.ord-sum b { font-family: var(--font-num); font-variant-numeric: tabular-nums; font-size: var(--fs-body); font-weight: 700; color: var(--ink-1); }
.ord-sum .ord-sum-note { color: var(--ink-4); font-size: 11.5px; }
.ord-sum .ord-sum-sep { color: var(--line-2); }

/* 订单列表（T9 数据）：列多且都是短值，撑住最小宽度让外层横向滚动，
 * 否则 width:100% 会把「收货人 / 付款方式 / 业务员」压成竖排一个字一行。 */
table.tbl.t9-ord-tbl { min-width: 1640px; }
table.tbl.t9-ord-tbl th,
table.tbl.t9-ord-tbl td { white-space: nowrap; }

/* 客资盘点表（员工 × S/A/B/C/D）：只有 8 列且都是短值，auto 布局会把每列拉成等宽，
 * 五个分类列各自空出半个表格，数字飘在右边看着很散。固定列宽把宽度留给员工名。 */
table.tbl.cls-tbl { table-layout: fixed; }
table.tbl.cls-tbl th:nth-child(1) { width: 30%; }
table.tbl.cls-tbl th:nth-child(2) { width: 12%; }
table.tbl.cls-tbl th:nth-child(n+3):nth-child(-n+7) { width: 9%; }
table.tbl.cls-tbl th:nth-child(8) { width: 11%; }
table.tbl.cls-tbl th, table.tbl.cls-tbl td { white-space: nowrap; }

/* 员工外呼日报表（员工 + 11 个数值列）：不给 table-layout:fixed —— 列头里有「有效通话数（≥20 分钟）」
 * 这种长标题，固定列宽会把表头挤出去。auto 布局让每列按内容自适应，超宽时由外层 table-wrap 横向滚动。
 * 「员工」列给个最小宽度，避免被压成两字换行。 */
table.tbl.daily-tbl th, table.tbl.daily-tbl td { white-space: nowrap; }
/* 12 列表格：把单元格左右内边距收到 8px（默认 14px），整表可少占约 145px，
 * 1650px 视口下不用横向滚动就能看全；窗口再窄时外层 table-wrap 照常横向滚动。 */
table.tbl.daily-tbl th, table.tbl.daily-tbl td { padding-left: 8px; padding-right: 8px; }
table.tbl.daily-tbl th:nth-child(1), table.tbl.daily-tbl td:nth-child(1) { min-width: 96px; }

/* 商品金额合计（订单详情 · 商品卡底部）
 * 标签在左、金额贴右（space-between），两行等距；金额用等宽数字（tabular-nums）保证小数点对齐。
 * 不再套灰底块：这块本来就在白底卡片里，叠一层浅灰反而脏，只靠分隔线 + 字号层级区分主次。
 * 左右各留 14px，与表格单元格的 padding 对齐，金额右边缘和上方「小计」列在同一条竖线上。
 */
.od-amounts { margin: 12px 0 0 auto; padding: 0 14px; max-width: 320px; }
.od-amt-row { display: flex; align-items: baseline; justify-content: space-between; gap: 28px; line-height: 1.5; }
.od-amt-row + .od-amt-row { margin-top: 10px; }
.od-amt-row > span { font-size: var(--fs-secondary); color: var(--ink-3); white-space: nowrap; }
.od-amt-row > b { font-size: var(--fs-secondary); font-weight: 600; color: var(--ink-1); font-variant-numeric: tabular-nums; white-space: nowrap; }
/* 订单金额 = 真正成交额，压一条分隔线并加重，和「商品合计」拉开层级 */
.od-amt-main { padding-top: 10px; border-top: 1px dashed var(--line); }
/* 「在线支付（订金）/ 货到付款（代收）」：订单金额的拆分明细，字号与颜色都比主金额弱一档 */
/* 选择器要带 .od-amt-row 才有足够权重：`.od-amt-row + .od-amt-row` 的 margin-top 是 10px，
   单写 .od-amt-sub 会被它盖掉（明细行要贴紧上面的订单金额，不能和它一样宽） */
.od-amt-row.od-amt-sub { margin-top: 6px; }
.od-amt-sub > span { color: var(--ink-4); font-size: var(--fs-secondary); }
.od-amt-sub > b { font-size: var(--fs-secondary); font-weight: 600; color: var(--ink-2); }
.od-amt-main > span { color: var(--ink-2); font-weight: 500; }
.od-amt-main > b { font-size: var(--fs-body); font-weight: 700; }

/* 收货地址：省市区 + 详址排在同一行（2026-10-30），读起来就是一整条地址。
 * 两段**同字号同颜色**（都继承 .kv .v 的 --ink-1）：早先把省市区压成 --ink-3 的浅灰做前缀，
 * 实际读起来像「地址只填了半截」，用户要求统一 —— 这里不再给 .od-addr-region / -detail 单独上色。 */
.od-addr { min-width: 0; line-height: 1.6; word-break: break-word; }
/* 订单详情的「关联客户」：第一行是客户编码（可点开客户详情），第二行才是客户姓名。
   姓名原来挂在左侧「收货信息」卡片底部，两边各写一次客户，读起来容易以为是两个人。 */
.od-cust { display: inline-flex; flex-direction: column; gap: 2px; min-width: 0; }
.od-cust-name { font-size: var(--fs-secondary); color: var(--ink-3); }

/* 订单列表里的收货地址：一行内截断，避免把表格撑太宽 */
.t9-addr { display: inline-block; max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; }

/* V4.35 订单详情：基本信息 / 收件信息 双列卡片；标题行右侧状态胶囊 + 类型/付款/发货仓 */
.od-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 14px; }
.od-cards .od-card { margin-bottom: 0; }
@media (max-width: 900px) { .od-cards { grid-template-columns: 1fr; } }
.modal-head { flex-wrap: wrap; }
.modal-head-right { margin-left: auto; display: flex; align-items: center; justify-content: flex-end; gap: 10px; flex-wrap: wrap; }
.modal-head-right .tag { height: 24px; padding: 0 11px; font-size: 12px; font-weight: 600; }
/* 单据信息条的无边框变体：省份明细等普通弹窗顶部用细窄信息条，不要下划线 */
.od-meta.od-meta-plain { display: inline-flex; align-items: baseline; gap: 5px; padding: 0; border-bottom: 0; margin-bottom: 0; font-size: var(--fs-secondary); white-space: nowrap; }
.od-meta-plain .od-meta-item { gap: 5px; font-size: var(--fs-secondary); }
.od-meta i { font-style: normal; color: var(--ink-4); font-size: 11.5px; }
/* 订单详情：拒收节点（T9 订单最后一步可能是「客户拒收」，不是「签收完成」） */
.od-step.reject .od-step-dot { background: var(--danger); color: #fff; }
.od-step.reject .od-step-info b { color: var(--danger); }
/* 快递信息卡左列：标签列收窄，长快递单号不折行 */
.od-ship-info .kv { grid-template-columns: 74px 1fr; row-gap: 9px; }
.od-ship-info .kv .v { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ==========================================================================
   V4.37 订单详情（快递信息）参照电商版式重排：
   流转步骤条 + 左主列 / 右侧栏 + 包裹物流信息（快递单据 + 轨迹时间线）+ 金额合计
   ========================================================================== */
/* 流转步骤条 */
/* V4.38：文字移到节点下方，连接线只在两节点之间，不再与文字重叠
   V4.39：节点居中分布（dot 居于各自等分格中央），整条步骤条在弹窗内左右对称居中 */
.od-steps { display: flex; align-items: flex-start; padding: 4px 4px 16px; border-bottom: 1px solid var(--line); margin-bottom: 14px; }
.od-step { flex: 1; position: relative; display: flex; flex-direction: column; align-items: center; gap: 7px; min-width: 0; }
.od-step::before { content: ''; position: absolute; top: 11px; left: calc(-50% + 12px); width: calc(100% - 24px); height: 2px; background: var(--line); }
.od-step.first::before { display: none; }
.od-step-dot { width: 24px; height: 24px; border-radius: 50%; flex: none; display: flex; align-items: center; justify-content: center; font-size: 11.5px; font-weight: 600; position: relative; z-index: 1; background: var(--surface-3); color: var(--ink-4); }
.od-step.done .od-step-dot { background: var(--brand); color: #fff; }
.od-step.done::before { background: var(--brand); }
.od-step.active .od-step-dot { background: var(--surface); border: 2px solid var(--brand); color: var(--brand); }
.od-step-info { min-width: 0; text-align: center; }
.od-step-info b { display: block; font-size: 12.5px; font-weight: 600; color: var(--ink-2); white-space: nowrap; }
.od-step.done .od-step-info b, .od-step.active .od-step-info b { color: var(--ink-1); }
.od-step-info time { display: block; font-size: 11px; color: var(--ink-4); white-space: nowrap; }
.od-steps.is-cancel { opacity: 0.55; }

/* V4.39 顶部单据信息条：订单编号 / 订单类型 / 下单时间 / 发货仓，订单状态胶囊居右 */
.od-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 28px; padding: 2px 2px 12px; border-bottom: 1px solid var(--line); margin-bottom: 14px; }
.od-meta-item { display: inline-flex; align-items: baseline; gap: 7px; font-size: var(--fs-body); color: var(--ink-2); min-width: 0; }
.od-meta-item label { color: var(--ink-4); font-size: 12px; flex: none; }
.od-meta-item b { font-weight: 700; color: var(--ink-1); }
.od-meta-status { margin-left: auto; }

/* V4.39 快递信息卡片：左侧 快递公司/快递单号/发货时间，右侧 物流轨迹，并排展示 */
/* 左列按内容取宽（快递公司 / 单号 / 两个时间都是 nowrap，fixed 百分比会把时间截断成 2026-10-29 14:19…） */
.od-ship-grid { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 18px; align-items: start; }
.od-ship-trace { min-width: 0; border-left: 1px dashed var(--line); padding-left: 18px; }
@media (max-width: 900px) {
  .od-ship-grid { grid-template-columns: 1fr; }
  .od-ship-trace { border-left: 0; padding-left: 0; border-top: 1px dashed var(--line); padding-top: 10px; }
}
/* 左主列 + 右侧栏 */
.od-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 14px; align-items: start; margin-bottom: 14px; }
.od-layout .od-card { margin-bottom: 14px; }
.od-layout .od-main > .od-card:last-child, .od-layout .od-side > .od-card:last-child { margin-bottom: 0; }
@media (max-width: 900px) { .od-layout { grid-template-columns: 1fr; } }
/* 包裹物流信息：左侧单据 + 右侧轨迹 */
.od-pkg { display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: 18px; align-items: start; }
@media (max-width: 900px) { .od-pkg { grid-template-columns: 1fr; } }
.od-pkg-title { font-size: 12.5px; font-weight: 700; color: var(--ink-2); margin-bottom: 8px; }
.od-pkg-goods { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 5px 0; border-top: 1px dashed var(--line); font-size: var(--fs-table); }
.od-pkg-goods:first-of-type { border-top: 0; }
/* 物流轨迹时间线（新 → 旧）
 * 2026-10-30：去掉 max-height/overflow —— 原来限高 320px 会在卡片里套一条内嵌滚动条，
 * 与用户要求「去掉右侧滚动条」冲突，而且滚轮停在轨迹上时滚的是轨迹不是页面，很难用。
 * 实测全库每单平均 8 条、最多 18 条，展开约 350 / 790px，直接铺开即可（详情页本来就要滚着看）。 */
.od-trace { position: relative; padding: 2px 4px 2px 2px; }
.od-trace-item { position: relative; padding: 0 0 14px 16px; }
.od-trace-item::before { content: ''; position: absolute; left: 0; top: 5px; width: 7px; height: 7px; border-radius: 50%; background: var(--ink-4); }
.od-trace-item:first-child::before { background: var(--brand); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 18%, transparent); }
.od-trace-item::after { content: ''; position: absolute; left: 3px; top: 15px; bottom: -2px; width: 1px; background: var(--line); }
.od-trace-item:last-child::after { display: none; }
.od-trace-item:last-child { padding-bottom: 2px; }
.od-trace-item > div:first-child { font-size: var(--fs-table); color: var(--ink-2); line-height: 1.5; }
.od-trace-item:first-child > div:first-child { color: var(--ink-1); font-weight: 600; }
.od-trace-item time { display: block; font-size: 11.5px; color: var(--ink-4); margin-top: 2px; }

/* ==========================================================================
   V4.35 下单弹窗：默认收件地址默认收起为一行摘要（客户档案带出），点「编辑/新增」才展开
   ========================================================================== */
.oc-addr:not(.is-open) { padding-bottom: 10px; }
.oc-addr-tools { display: flex; align-items: center; gap: 6px; flex: 0 0 auto; }
.oc-addr-sum { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; font-size: var(--fs-table); color: var(--ink-2); padding: 2px 2px 0; }
.oc-addr-sum .oc-addr-name { font-weight: 600; color: var(--ink-1); }
.oc-addr-sum .oc-addr-detail { color: var(--ink-3); flex: 1 1 260px; min-width: 0; }
/* V4.62 新建 / 编辑收件地址弹窗：底部「同步到档案 + 地址簿说明」软面板 */
.ad-foot { margin-top: 16px; padding: 12px 14px; background: var(--surface-2); border-radius: var(--r-md); }
.ad-foot .p-check { margin: 0; }

/* 修改订单（待修改 → 重新提交）商品添加栏 */
.oe-addbar { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
.oe-addbar .select { flex: 1 1 auto; max-width: 460px; }

/* ==========================================================================
   V4.37 客户标签：查询条件「包含 / 不包含」双控件 + 客户详情标签增删
   ========================================================================== */
.f-pair { display: inline-flex; align-items: center; gap: 6px; }
.f-pair .select { width: auto; max-width: 130px; }
.f-pair .select:last-child { max-width: 170px; }
.cd-tags { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.cd-tag { display: inline-flex; align-items: center; gap: 3px; }
.cd-tag-x { font-style: normal; cursor: pointer; opacity: .6; font-size: 13px; line-height: 1; padding: 0 1px; }
.cd-tag-x:hover { opacity: 1; color: var(--danger); }
.cd-tag-input { width: 150px; height: 26px; font-size: 12.5px; padding: 0 8px; }

/* V4.37 商品分类：四列等宽均匀分布（分类名称不再独占剩余宽度） */
table.cat-tbl { table-layout: fixed; }
table.cat-tbl th, table.cat-tbl td { width: 25%; }
table.cat-tbl td.cat-name { overflow-wrap: anywhere; }
table.cat-tbl td.p-ops { white-space: normal; }

/* ==========================================================================
   V4.39 账号管理：部门多选下拉面板 + 商品权限配置 chips
   ========================================================================== */
.u-orgsel { position: relative; display: inline-block; }
.u-org-panel { position: absolute; top: calc(100% + 6px); left: 0; z-index: 60; width: 260px; max-height: 300px; overflow: auto;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); box-shadow: var(--shadow-lg, 0 8px 24px rgba(0,0,0,.12)); padding: 6px; }
.u-org-panel-head { display: flex; justify-content: space-between; align-items: center; padding: 4px 6px 6px; border-bottom: 1px solid var(--line); margin-bottom: 4px; }
.u-org-item { display: flex; align-items: center; gap: 7px; padding: 5px 8px; border-radius: 4px; cursor: pointer; font-size: 13px; }
.u-org-item:hover { background: var(--surface-3); }
.u-org-item input[type="checkbox"] { accent-color: var(--brand); width: 14px; height: 14px; margin: 0; flex: none; }
.u-org-item span:last-child { margin-left: auto; }

/* 商品权限配置：类型 + 候选下拉 + 已选 chips */
.pp-row { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; }
.pp-row .select { width: auto; min-width: 0; flex: 0 1 auto; max-width: 220px; }
.pp-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; }
.pp-chip { display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px; border-radius: 20px; background: var(--surface-3); font-size: 12.5px; color: var(--ink-2); }
.pp-chip b { font-weight: 600; color: var(--ink-1); }
.pp-chip .pp-x { cursor: pointer; opacity: .55; font-style: normal; line-height: 1; }
.pp-chip .pp-x:hover { opacity: 1; color: var(--danger); }
.pp-input { width: 170px; height: 30px; }

/* ===== V4.40 商品详情弹窗（参照电商截图布局：左图右信息 + 规格表） ===== */
.pv2-top { display: flex; gap: 28px; align-items: flex-start; }
.pv2-gallery { flex: 0 0 250px; }
.pv2-main { width: 250px; height: 250px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface-2); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.pv2-main img { width: 100%; height: 100%; object-fit: contain; }
.pv2-thumbs { display: flex; gap: 10px; margin-top: 10px; }
.pv2-thumbs img { width: 54px; height: 54px; object-fit: cover; border: 1px solid var(--line-2); border-radius: 6px; cursor: pointer; }
.pv2-thumbs img.on { border-color: var(--brand); box-shadow: 0 0 0 1px var(--brand); }
.pv2-info { flex: 1; min-width: 0; }
.pv2-name { font-size: 18px; font-weight: 600; color: var(--ink-1); line-height: 1.4; }
.pv2-tags { display: flex; gap: 8px; margin: 10px 0 6px; }
.pv2-grid { display: grid; grid-template-columns: 1fr 1fr; column-gap: 32px; }
.pv2-item { display: flex; align-items: baseline; gap: 14px; padding: 11px 2px; border-bottom: 1px solid var(--line); font-size: 13px; }
.pv2-item .k { flex: 0 0 76px; color: var(--ink-3); }
.pv2-item .v { flex: 1; min-width: 0; color: var(--ink-1); word-break: break-all; }

/* ===== V4.42 商品详情 · 规格信息表：表头与数据值垂直居中对齐 ===== */
.pv2-spec thead th { vertical-align: middle; height: 40px; }
.pv2-spec tbody td { vertical-align: middle; height: 66px; }
.pv2-spec tbody td .pv-img { display: inline-block; vertical-align: middle; }

/* ===== V4.43 商品新增 / 编辑弹窗：与商品详情同版式（pv2），控件内嵌可编辑 ===== */
.pv2-edit .pv2-name-input { font-size: 18px; font-weight: 600; height: 38px; color: var(--ink-1); }
.pv2-edit .pv2-tags { align-items: center; }
.pv2-edit .pv2-tags .select { width: auto; min-width: 120px; height: 30px; padding: 2px 8px; font-size: 13px; }
.pv2-edit .pv2-item { align-items: center; padding: 7px 2px; }
.pv2-edit .pv2-item .v .input, .pv2-edit .pv2-item .v .select { width: 100%; height: 30px; padding: 2px 8px; font-size: 13px; }
.pv2-edit .pv2-main { position: relative; }
.pv2-edit .pv2-main img { width: 100%; height: 100%; object-fit: contain; }
.pv2-up { position: relative; display: inline-flex; align-items: center; justify-content: center; height: 54px; padding: 0 10px; border: 1px dashed var(--line-2); border-radius: 6px; font-size: 12px; color: var(--ink-3); cursor: pointer; background: var(--surface-2); }
.pv2-up:hover { border-color: var(--brand); color: var(--brand); }
.pv2-up input[type="file"] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.pv2-thumb-img { width: 54px; height: 54px; object-fit: cover; border: 1px solid var(--line-2); border-radius: 6px; cursor: pointer; }
.pv2-spec td .input { height: 30px; padding: 2px 8px; font-size: 13px; min-width: 90px; }
.pv2-spec td .pv-img { cursor: pointer; }
.pv2-spec td .pv-img-ph { cursor: pointer; }

/* ===== V4.43 字段说明「!」提示：鼠标移入 / 点击浮现，移走消失 ===== */
.q-tip {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 14px; height: 14px; margin-left: 5px; flex: 0 0 auto;
  border: 1px solid var(--ink-4); border-radius: 50%; color: var(--ink-4);
  font-size: 10px; font-weight: 600; line-height: 1; cursor: pointer; vertical-align: middle; user-select: none;
}
.q-tip:hover, .q-tip.on, .q-tip:focus { border-color: var(--brand); color: var(--brand); }
.q-tip::before {
  /* V4.45：隐藏态不给内容 → 气泡不撑大祖先 scrollWidth（否则弹窗底部出现左右滚动条） */
  content: ''; position: absolute; left: -10px; bottom: calc(100% + 9px);
  box-sizing: border-box; width: max-content; max-width: 300px; padding: 8px 11px; border-radius: 6px;
  background: #0f1720; color: #fff; font-size: 12px; font-weight: 400; line-height: 1.6;
  text-align: left; white-space: pre-wrap; word-break: break-all; box-shadow: var(--sh-md);
  opacity: 0; visibility: hidden; transform: translateY(3px);
  transition: opacity .12s ease, transform .12s ease, visibility .12s; z-index: 60; pointer-events: none;
}
.q-tip::after {
  content: ''; position: absolute; left: 2px; bottom: calc(100% + 4px);
  border: 5px solid transparent; border-top-color: #0f1720; border-bottom: none;
  opacity: 0; visibility: hidden; transition: opacity .12s ease, visibility .12s; z-index: 60; pointer-events: none;
}
.q-tip:hover::before, .q-tip.on::before, .q-tip:focus::before { content: attr(data-tip); }
.q-tip:hover::before, .q-tip.on::before, .q-tip:focus::before,
.q-tip:hover::after, .q-tip.on::after, .q-tip:focus::after { opacity: 1; visibility: visible; transform: none; }
.kv .k .q-tip { margin-left: 4px; }

/* ===== V4.43 商品编辑：主图直接点击上传 / 规格行图片点击上传 ===== */
.pv2-edit .pv2-main, .pv2-main-up { cursor: pointer; }
.pv2-main-up:hover { border-color: var(--brand); }
.pv2-main-mask {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 5px 0; text-align: center;
  font-size: 12px; color: #fff; background: rgba(15, 23, 32, .55);
  opacity: 0; transition: opacity .12s; pointer-events: none;
}
.pv2-main-up:hover .pv2-main-mask { opacity: 1; }
.pv-spec-pick { display: inline-flex; cursor: pointer; }
.pv-spec-pick:hover .pv-img { border-color: var(--brand); box-shadow: 0 0 0 1px var(--brand); }
.pv-spec-pick:hover .pv-img-ph { border-color: var(--brand); color: var(--brand); }
.spec-head-right { display: flex; align-items: center; gap: 12px; }
.pv2-spec th.center, .pv2-spec td.center { text-align: center; }

/* ===== V4.43 系统配置：字段与输入框同行 ===== */
.cfg-inline { display: flex; align-items: center; gap: 12px; }
.cfg-inline .field-label { margin-bottom: 0; white-space: nowrap; flex: 0 0 170px; }
.cfg-inline .input { flex: 1; min-width: 0; }

/* ===== V4.43b 编辑商品规格表：1:1 方图 / 去横向滚动 / 删除角标 / 表头与输入对齐 ===== */
.pv2-spec-wrap { overflow-x: hidden; }
.pv2-spec { table-layout: fixed; width: 100%; }
.pv2-spec td .input { width: 100%; min-width: 0; }
.pv2-spec td.right .input { text-align: right; }
.pv2-spec tbody td .pv-img, .pv2-spec tbody td .pv-img-ph { width: 80px; height: 80px; max-height: none; object-fit: cover; }
.pv2-spec tbody td .pv-img-ph { display: inline-flex; align-items: center; justify-content: center; }
.pv-spec-pick { position: relative; }
.pv-spec-del {
  position: absolute; top: -7px; right: -7px; width: 18px; height: 18px; padding: 0;
  border: none; border-radius: 50%; background: #98a2b3; color: #fff;
  font-size: 13px; line-height: 16px; text-align: center; cursor: pointer;
}
.pv-spec-del:hover { background: var(--danger); }

/* ===== V4.43c 新增商品必填项：星标 + 校验红框 ===== */
.pv2-item .k .req { color: var(--danger); font-weight: 600; margin-left: 2px; }
.pv2-edit .input.is-err, .pv2-edit .select.is-err { border-color: var(--danger); box-shadow: 0 0 0 1px var(--danger) inset; }

/* ===== V4.45 编辑商品：字段标题与「!」提示保持一行，输入/选择框可压缩 ===== */
.pv2-edit .pv2-item { gap: 8px; }
.pv2-edit .pv2-item .k { flex: 0 0 88px; display: inline-flex; align-items: center; white-space: nowrap; }
.pv2-edit .pv2-item .k .q-tip { margin-left: 4px; }
.pv2-edit .pv2-item .v .input, .pv2-edit .pv2-item .v .select { min-width: 0; }

/* ===== V4.47 提示气泡向下弹出（drop：靠近弹窗顶部时避免被裁切）===== */
.q-tip.q-tip-drop::before {
  bottom: auto; top: calc(100% + 9px); transform: translateY(-3px);
}
.q-tip.q-tip-drop::after {
  bottom: auto; top: calc(100% + 4px);
  border: 5px solid transparent; border-bottom-color: #0f1720; border-top: none;
}
.q-tip.q-tip-drop:hover::before, .q-tip.q-tip-drop.on::before, .q-tip.q-tip-drop:focus::before { transform: none; }

/* ==========================================================================
   V4.49 客户明细：批量操作（勾选列 + 下拉菜单 + 批量标签/所属人弹窗）
   ========================================================================== */
.batch-wrap { position: relative; display: inline-flex; }
.batch-wrap .bt-caret { font-size: 10px; color: var(--ink-3); margin-left: 2px; }
.batch-menu {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 40;
  min-width: 152px; padding: 5px;
  background: #fff; border: 1px solid var(--line); border-radius: 8px;
  box-shadow: 0 10px 28px rgba(15, 33, 55, .14);
  display: flex; flex-direction: column;
}
.batch-menu button {
  border: 0; background: none; text-align: left; cursor: pointer;
  padding: 8px 12px; border-radius: 6px; font-size: 13px; color: var(--ink-2); white-space: nowrap;
}
.batch-menu button:hover { background: var(--brand-soft); color: var(--brand); }
.c-sel-col { width: 36px; min-width: 36px; text-align: center; }
.c-sel-col input[type=checkbox] { width: 15px; height: 15px; accent-color: var(--brand); cursor: pointer; vertical-align: middle; }
.sel-all { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--ink-2); cursor: pointer; white-space: nowrap; }
.sel-all input[type=checkbox] { width: 15px; height: 15px; accent-color: var(--brand); cursor: pointer; }
#content[data-page="customers"] .c-sel-col { padding: 0 4px; }

/* 批量操作弹窗 */
.bm-count { font-size: 13.5px; color: var(--ink-2); margin-bottom: 16px; }
.bm-count b { color: var(--brand); font-size: 20px; font-weight: 700; margin: 0 3px; }
.bm-radios { display: inline-flex; align-items: center; gap: 18px; }
.bm-radio { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; color: var(--ink-2); cursor: pointer; }
.bm-radio input[type=radio] { width: 15px; height: 15px; accent-color: var(--brand); cursor: pointer; }
.req-star { color: #e5484d; font-style: normal; margin-right: 3px; }
.bt-sug-item { cursor: pointer; background: var(--brand-soft); color: var(--brand); border: 1px solid var(--brand-line); }
.bt-sug-item:hover { background: var(--brand); color: #fff; }

/* ==========================================================================
   V4.49 客户明细查询栏：下拉框调宽 + 字段间距增大
   ========================================================================== */
#content[data-page="customers"] .ord-filters { gap: 10px 26px; }
#content[data-page="customers"] .f-item { gap: 8px; }
#content[data-page="customers"] .f-item .select { width: auto; min-width: 160px; max-width: 240px; }
#content[data-page="customers"] .f-pair { gap: 8px; }
#content[data-page="customers"] .f-pair .select { min-width: 96px; max-width: 150px; }
#content[data-page="customers"] .f-pair .select:last-child { min-width: 170px; max-width: 230px; }

/* V4.49 客户详情弹窗右上角「建档时间」独立样式（不再复用 od-meta，去掉其单据条底线） */
.hd-created { display: inline-flex; align-items: baseline; gap: 5px; font-size: var(--fs-secondary); color: var(--ink-2); white-space: nowrap; }
.hd-created i { font-style: normal; color: var(--ink-4); font-size: 11.5px; }
/* 值：三个小项共用同一字号基准，别在标记里各写各的。
   中文值单独压 0.5px（.cjk）—— 中文字面撑满字身框，同样 12.5px 比日期数字看着大一圈，
   「注册方式比建档时间大」实际就是这个光学差，不是字号真的不同。 */
.hd-created .hd-v { font-size: var(--fs-secondary); font-weight: 400; color: var(--ink-2); }
.hd-created .hd-v.num { font-family: var(--font-num); letter-spacing: -.01em; }
.hd-created .hd-v.cjk { font-size: 12px; letter-spacing: .2px; }

/* V4.49b 批量操作菜单默认折叠（.batch-menu 的 display:flex 会盖掉 [hidden] 的 display:none） */
.batch-menu[hidden] { display: none; }

/* V4.49b 批量修改标签弹窗：标签输入框加大（默认 .cd-tag-input 只有 150×26，又窄又短） */
#bt-tags { align-items: flex-start; }
#bt-tags .cd-tag-input { width: 100%; min-width: 240px; height: 36px; font-size: 13.5px; padding: 0 12px; border-radius: 6px; }
#bt-tags .cd-tag { height: 26px; font-size: 12.5px; }

/* ==========================================================================
   V4.50 标签管理 + 受控客户标签选择器
   ========================================================================== */
.tm-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; border-bottom: 1px solid var(--line); padding-bottom: 10px; }
.tm-tab {
  border: 1px solid var(--line); background: #fff; color: var(--ink-2);
  height: 32px; padding: 0 16px; border-radius: 16px; font-size: 13px; cursor: pointer;
}
.tm-tab:hover { border-color: var(--brand-line); color: var(--brand); }
.tm-tab.on { background: var(--brand); border-color: var(--brand); color: #fff; font-weight: 600; }
.tm-body { min-height: 180px; }
.tm-add { display: flex; gap: 10px; align-items: center; margin-bottom: 10px; }
.tm-add .input { flex: 1 1 auto; min-width: 0; height: 34px; }
.tm-tip { font-size: 12.5px; color: var(--ink-3); margin-bottom: 10px; }
.tm-list { display: flex; flex-direction: column; gap: 8px; }
.tm-row {
  display: flex; align-items: center; gap: 12px;
  padding: 9px 12px; border: 1px solid var(--line); border-radius: 8px; background: #fbfcfe;
}
.tm-row .tag { flex: 0 0 auto; }
.tm-usage { font-size: 12.5px; color: var(--ink-3); flex: 1 1 auto; }
.tm-ops { display: inline-flex; gap: 8px; flex: 0 0 auto; }
.tm-rename { flex: 1 1 auto; height: 32px; }
.tm-empty { padding: 22px 0; text-align: center; color: var(--ink-4); font-size: 13px; }

/* 受控标签选择器：未选为浅灰胶囊，选中为主题蓝 */
.tp-box { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; min-height: 30px; }
.tp-item {
  cursor: pointer; user-select: none; height: 26px; padding: 0 11px;
  background: #f2f5fa; color: var(--ink-3); border: 1px solid transparent; font-weight: 500;
}
.tp-item:hover { border-color: var(--brand-line); color: var(--brand); }
.tp-item.on { background: var(--brand); color: #fff; border-color: var(--brand); }

/* ===== V4.54 危险按钮 hover 提示气泡（数据维护 · 一键清空全部数据）===== */
.q-tip-host { position: relative; }
.q-tip-host::before {
  /* 隐藏态不给内容，避免气泡撑大祖先 scrollWidth（同 .q-tip V4.45 教训） */
  content: ''; position: absolute; left: 50%; bottom: calc(100% + 9px);
  transform: translateX(-50%) translateY(3px);
  box-sizing: border-box; width: max-content; max-width: 320px; padding: 8px 11px; border-radius: 6px;
  background: #b42318; color: #fff; font-size: 12px; font-weight: 400; line-height: 1.6;
  text-align: left; white-space: pre-wrap; word-break: break-all; box-shadow: var(--sh-md);
  opacity: 0; visibility: hidden;
  transition: opacity .12s ease, transform .12s ease, visibility .12s; z-index: 60; pointer-events: none;
}
.q-tip-host::after {
  content: ''; position: absolute; left: 50%; bottom: calc(100% + 4px);
  transform: translateX(-50%);
  border: 5px solid transparent; border-top-color: #b42318; border-bottom: none;
  opacity: 0; visibility: hidden; transition: opacity .12s ease, visibility .12s; z-index: 60; pointer-events: none;
}
.q-tip-host:hover::before, .q-tip-host:focus::before { content: attr(data-tip); opacity: 1; visibility: visible; transform: translateX(-50%); }
.q-tip-host:hover::after, .q-tip-host:focus::after { opacity: 1; visibility: visible; }

/* ===== V4.73 客户分类（列表徽标 / 详情标识 / 分类规则弹窗） ===== */
.cust-class {
  display: inline-flex; align-items: center; justify-content: center;
  height: 22px; padding: 0 8px; border-radius: 4px;
  font-size: 12px; font-weight: 600; line-height: 1; white-space: nowrap;
  border: 1px solid transparent;
}
.cust-class.cc-s     { background: #f3ecff; color: #6b3fd4; border-color: #e2d5ff; }
.cust-class.cc-a     { background: #e9f9ef; color: #0a7d57; border-color: #c6ecdd; }
.cust-class.cc-b     { background: var(--brand-soft); color: #0d5cc4; border-color: var(--brand-line); }
.cust-class.cc-c     { background: var(--warn-soft); color: #a55f06; border-color: #f6ddb8; }
.cust-class.cc-d     { background: #f4f5f7; color: #6b7280; border-color: #e5e7eb; }
.cust-class.cc-black { background: #fdeaea; color: #c93a3f; border-color: #f5cdcd; }
.cust-class.cc-none  { background: #fff; color: var(--ink-4); border-color: var(--line); }
.cc-note { margin-left: 8px; font-size: 12px; color: var(--ink-4); font-weight: 400; }

/* 批量操作菜单：拉黑项红色 */
.batch-menu .bm-danger { color: var(--danger); }

/* 分类规则弹窗：四列表格布局（分类 / 最低 / 最高 / 当前客户数） */
.cc-head, .cc-row {
  display: grid; grid-template-columns: 96px 1fr 1fr 96px;
  align-items: center; gap: 10px;
}
.cc-head {
  padding: 8px 0; border-bottom: 1px solid var(--line);
  font-size: 12px; color: var(--ink-4); font-weight: 600;
}
.cc-head span:last-child, .cc-usage { text-align: right; }
.cc-list { display: flex; flex-direction: column; }
.cc-row { padding: 9px 0; border-bottom: 1px dashed var(--line); }
.cc-row .cc-input { height: 34px; padding: 0 10px; }
.cc-usage { font-size: 12px; color: var(--ink-3); }
.cc-row-black {
  grid-template-columns: 96px 1fr 96px; margin-top: 12px; padding: 12px;
  background: #fdf6f6; border: 1px solid #f5cdcd; border-radius: 8px; border-bottom: none;
  align-items: center;
}
.cc-black-note { font-size: 12px; color: #a05252; line-height: 1.7; }
.cc-tip { margin-top: 10px; font-size: 12px; color: var(--ink-4); }

/* 客户详情 · 客户情况（T9 客户资料页的「备注」）
 * 顾问写的内容带换行（「81岁自己看 认识字 初中毕业 脑梗塞…」一行一句），
 * 用 pre-wrap 保留原文换行；word-break 交给 .kv .v 的 break-all，长串也能折。
 * 行高放宽到 1.7 —— 这段是连续多行的中文，紧了很难读。 */
.kv .v.cd-remark { line-height: 1.7; white-space: pre-wrap; color: var(--ink-2); }