/* ==========================================================================
   小米全屋智能 · 在线自动报价系统 —— 样式（浅色主题）
   ========================================================================== */
:root {
  --bg:            #f4f6f9;
  --panel:         #ffffff;
  --panel-2:       #fafbfd;
  --line:          #e6e9ef;
  --line-2:        #eef1f5;
  --text:          #1a2233;
  --text-2:        #5b6577;
  --text-3:        #98a2b3;
  --brand:         #ff6900;
  --brand-2:       #ff8a3d;
  --brand-soft:    #fff4ec;
  --blue:          #2f6df6;
  --blue-soft:     #eef4ff;
  --green:         #12a150;
  --green-soft:    #eaf7f0;
  --amber:         #d97706;
  --amber-soft:    #fff7e6;
  --red:           #e0322c;
  --shadow-sm:     0 1px 2px rgba(20,30,50,.05);
  --shadow:        0 2px 10px rgba(20,30,50,.06), 0 1px 2px rgba(20,30,50,.04);
  --shadow-lg:     0 10px 30px rgba(20,30,50,.10);
  --radius:        14px;
  --radius-sm:     9px;
}

* { box-sizing: border-box; }

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

button, input, select { font-family: inherit; font-size: inherit; color: inherit; }
button { cursor: pointer; border: none; background: none; }
a { color: var(--blue); }

/* ---------- 顶部栏 ---------- */
.topbar {
  position: sticky; top: 0; z-index: 60;
  display: flex; align-items: center; gap: 16px;
  height: 60px; padding: 0 20px;
  background: rgba(255,255,255,.88);
  backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--line);
}
.brand { display: flex; align-items: center; gap: 10px; min-width: 0; }
.brand-mark {
  width: 32px; height: 32px; border-radius: 9px; flex: none;
  background: linear-gradient(135deg, var(--brand), var(--brand-2));
  display: grid; place-items: center; color: #fff; font-size: 17px;
  box-shadow: 0 3px 10px rgba(255,105,0,.32);
}
.brand-text { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.brand-text b { font-size: 15px; letter-spacing: .2px; white-space: nowrap; }
.brand-text span { font-size: 11.5px; color: var(--text-3); white-space: nowrap; }

.topbar-spacer { flex: 1; }
/* 第 111 项：顶栏里「商城入口」与「回到报价工作台」之间的一条竖分隔。
   两件事性质不同（一个是去另一个系统，一个是回自己的工作台），挤在一起容易点错。 */
.topbar-sep { flex: none; width: 1px; height: 22px; background: var(--line); }

/* 窄屏（手机）：顶栏里的按钮总宽 769px，以前会把整页撑宽 359px（整页 749px / 791px）。
   改成顶栏自己横向滑动，页面宽度回到视口宽；同时把各按钮锁成不收缩，否则会被压成
   「管…」「杭…」这种折行文字。品牌名在手机上省略，只留图标（下方页签已表明当前栏目）。
   顶栏内的操作都是弹窗（#userChip → openProfileModal 挂在 #modalRoot 上做 fixed 定位），
   不是绝对定位下拉，所以 overflow 不会把弹层裁掉；.tabs 本来就有 overflow-x:auto，
   sticky 的 top:60px 偏移也不受影响。 */
@media (max-width: 720px) {
  .topbar { overflow-x: auto; gap: 10px; padding: 0 12px; }
  .topbar > * { flex: 0 0 auto; }
  .brand-text { display: none; }
}

.seg {
  display: inline-flex; background: var(--line-2); border-radius: 10px; padding: 3px; gap: 2px;
}
.seg button {
  padding: 6px 14px; border-radius: 8px; font-size: 13px; color: var(--text-2);
  transition: all .16s ease; white-space: nowrap;
}
.seg button.on { background: #fff; color: var(--text); font-weight: 600; box-shadow: var(--shadow-sm); }

.btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 15px; border-radius: 10px; font-size: 13.5px; font-weight: 500;
  border: 1px solid var(--line); background: #fff; color: var(--text-2);
  transition: all .16s ease; white-space: nowrap;
}
.btn:hover { border-color: #d3d9e3; color: var(--text); box-shadow: var(--shadow-sm); }
.btn-primary {
  background: linear-gradient(135deg, var(--brand), var(--brand-2));
  border-color: transparent; color: #fff; font-weight: 600;
  box-shadow: 0 3px 12px rgba(255,105,0,.28);
}
.btn-primary:hover { color: #fff; box-shadow: 0 5px 16px rgba(255,105,0,.36); }
.btn-ghost { border-color: transparent; background: transparent; }
.btn-ghost:hover { background: var(--line-2); box-shadow: none; }
.btn-sm { padding: 5px 10px; font-size: 12.5px; border-radius: 8px; }
.btn-import { padding: 7px 15px; font-size: 13px; font-weight: 700; border-radius: 10px;
  box-shadow: 0 4px 14px rgba(255,105,0,.34); }
.btn-import:hover { transform: translateY(-1px); }

/* ---------- 标签页 ---------- */
.tabs {
  display: flex; gap: 4px; padding: 0 20px; background: #fff;
  border-bottom: 1px solid var(--line); position: sticky; top: 60px; z-index: 55;
  overflow-x: auto;
}
.tabs button {
  position: relative; padding: 13px 16px 12px; font-size: 14px; color: var(--text-2);
  white-space: nowrap; border-bottom: 2px solid transparent; margin-bottom: -1px;
  transition: color .16s;
}
.tabs button:hover { color: var(--text); }
.tabs button.on { color: var(--brand); font-weight: 600; border-bottom-color: var(--brand); }
.tabs button .cnt {
  margin-left: 5px; font-size: 11px; padding: 1px 6px; border-radius: 20px;
  background: var(--line-2); color: var(--text-3); font-weight: 600;
}
.tabs button.on .cnt { background: var(--brand-soft); color: var(--brand); }

.tabpane { display: none; }
.tabpane.on { display: block; }

/* ---------- 后台布局：顶部主菜单 + 左侧次要栏目 ---------- */
.admin-body { display: grid; grid-template-columns: 196px minmax(0,1fr); gap: 0; align-items: start; }
.admin-side {
  position: sticky; top: 108px; margin: 16px 0 0 16px; padding: 6px;
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 2px;
}
.admin-side-hd { padding: 8px 10px 6px; font-size: 11.5px; font-weight: 700; color: var(--text-3); letter-spacing: .5px;
  display: flex; align-items: center; justify-content: space-between; gap: 6px; }
/* 收起 / 展开侧栏的小按钮（不占一行，压在标题右侧；选择器要压过 .admin-side button） */
.admin-side .admin-side-toggle {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 22px; height: 22px; padding: 0; border: 1px solid var(--line); border-radius: 6px;
  border-left-width: 1px; background: #fff; color: var(--text-3);
  font-size: 12px; line-height: 1; text-align: center; cursor: pointer;
}
.admin-side .admin-side-toggle:hover { color: var(--brand); border-color: var(--brand); background: var(--brand-soft); }
/* 收起后停在「更多功能」里的某一页时点亮，提示当前在哪一页 */
.admin-side .admin-side-toggle.hint { background: var(--brand); border-color: var(--brand); color: #fff; }
.admin-side button {
  display: block; width: 100%; text-align: left; padding: 9px 12px;
  font-size: 13px; color: var(--text-2); border-radius: 8px; border-left: 3px solid transparent;
  transition: background .14s, color .14s;
}
.admin-side button:hover { background: var(--panel-2); color: var(--text); }
.admin-side button.on { background: var(--brand-soft); border-left-color: var(--brand); color: var(--brand); font-weight: 600; }
/* 收起态：左侧只留一条窄栏 + 一个展开按钮，右侧内容区自动变宽 */
.admin-body.side-min { grid-template-columns: 46px minmax(0,1fr); }
.admin-body.side-min .admin-side { padding: 6px 5px; }
.admin-body.side-min .admin-side-hd { padding: 6px 0; justify-content: center; }
.admin-body.side-min .admin-side-hd .hd-txt,
.admin-body.side-min .admin-side > button:not(.admin-side-toggle) { display: none; }
.admin-body.side-min .admin-side .admin-side-toggle { width: 30px; height: 30px; font-size: 14px; }
.admin-main { min-width: 0; }
/* 第 174 项：后台宽屏铺满。
   `.wrap` 的 1180px 是给前台报价页定的阅读宽度，后台全是密集表格，
   1920 屏上左右各空 300 多像素、表格被挤着要横滑，纯浪费。
   这里把后台内容区放开到整宽，只在超宽屏（≥1920）收一个 1800 上限，
   免得一根表格线横穿两米宽的屏幕、眼睛要左右扫。 */
.admin-main .wrap { padding-left: 20px; padding-right: 20px; max-width: none; }
@media (min-width: 1920px) { .admin-main .wrap { max-width: 1800px; } }
@media (max-width: 1024px) {
  /* 窄屏本来就是单列 + 侧栏横排，收起态一律不生效（按钮也藏掉），免得侧栏被压成一条 */
  .admin-body, .admin-body.side-min { grid-template-columns: 1fr; }
  .admin-side { position: static; margin: 10px 12px 0; flex-direction: row; flex-wrap: wrap; }
  .admin-side-hd { width: 100%; }
  .admin-side button { width: auto; }
  .admin-body.side-min .admin-side { padding: 6px; }
  .admin-body.side-min .admin-side-hd { padding: 8px 10px 6px; justify-content: space-between; }
  .admin-body.side-min .admin-side-hd .hd-txt { display: inline; }
  .admin-body.side-min .admin-side > button:not(.admin-side-toggle) { display: block; }
  .admin-side .admin-side-toggle { display: none; }
}

/* ---------- 布局 ---------- */
.layout { display: grid; grid-template-columns: 248px minmax(0,1fr); gap: 18px; padding: 18px 20px 120px; align-items: start; }
@media (max-width: 1024px) { .layout { grid-template-columns: 1fr; } .sidenav { display: none; } }

/* ---------- 侧边导航 ---------- */
.sidenav {
  position: sticky; top: 118px; background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden;
}
.sidenav-hd { padding: 13px 15px 10px; font-size: 12px; font-weight: 700; color: var(--text-3); letter-spacing: .6px; }
.sidenav-item {
  display: flex; align-items: center; gap: 9px; width: 100%;
  padding: 9px 14px; border-left: 3px solid transparent; text-align: left;
  transition: background .14s;
}
.sidenav-item:hover { background: var(--panel-2); }
.sidenav-item.on { background: var(--brand-soft); border-left-color: var(--brand); }
.sidenav-item .ico { font-size: 15px; flex: none; width: 18px; text-align: center; }
.sidenav-item .nm { flex: 1; font-size: 13px; color: var(--text-2); min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sidenav-item.on .nm { color: var(--text); font-weight: 600; }
.sidenav-item .amt { font-size: 11.5px; color: var(--text-3); font-variant-numeric: tabular-nums; flex: none; }
.sidenav-item.on .amt { color: var(--brand); font-weight: 600; }
.sidenav-item .amt.zero { visibility: hidden; }
.sidenav-item .req-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--red); flex: none; }

/* ---------- 工具条 ---------- */
.toolbar {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 11px 14px; margin-bottom: 14px; box-shadow: var(--shadow);
}
.search { position: relative; flex: 1; min-width: 200px; }
.search input {
  width: 100%; padding: 8px 12px 8px 33px; border-radius: 10px;
  border: 1px solid var(--line); background: var(--panel-2); font-size: 13.5px; outline: none;
  transition: all .16s;
}
.search input:focus { border-color: var(--brand); background: #fff; box-shadow: 0 0 0 3px var(--brand-soft); }
.search .mag { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); color: var(--text-3); font-size: 13px; }
.toolbar .hint { font-size: 12.5px; color: var(--text-3); }

/* ---------- 分类卡片 ---------- */
/* 注意：卡片不能用 overflow:hidden —— 它会把表头 position:sticky 的参照系从视口
   劫持成卡片自身（overflow:hidden 也是滚动容器），top:106px 大于表头到卡片顶的距离，
   表头会被永久下压进第一行，造成「产品/型号、类型」一行与数据行错层。
   圆角裁剪改由首尾子元素自己承担。 */
.cat { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow); margin-bottom: 16px; scroll-margin-top: 130px; }
.cat-hd {
  display: flex; align-items: center; gap: 10px; padding: 13px 16px;
  border-bottom: 1px solid var(--line-2); background: linear-gradient(180deg,#fff,var(--panel-2));
  border-radius: var(--radius) var(--radius) 0 0;
  cursor: pointer; user-select: none;
}
.cat-hd .ico { font-size: 17px; }
.cat-hd h3 { margin: 0; font-size: 14.5px; font-weight: 700; flex: none; }
.cat-hd .req { font-size: 11px; padding: 1.5px 7px; border-radius: 20px; background: #fdecea; color: var(--red); font-weight: 600; }
.cat-hd .meta { font-size: 12.5px; color: var(--text-3); flex: none; }
.cat-hd .grow { flex: 1; }
.cat-hd .sub { font-size: 15px; font-weight: 700; color: var(--brand); font-variant-numeric: tabular-nums; }
.cat-hd .chev { color: var(--text-3); font-size: 11px; transition: transform .2s; }
.cat.collapsed .cat-hd { border-bottom-color: transparent; }
.cat.collapsed .chev { transform: rotate(-90deg); }
.cat.collapsed .cat-body { display: none; }

/* ---------- 产品表 ---------- */
.tbl { width: 100%; border-collapse: collapse; }
.tbl thead th {
  position: sticky; top: 106px; z-index: 20;
  background: #fbfcfe; text-align: left; font-size: 11.5px; font-weight: 600; color: var(--text-3);
  letter-spacing: .3px; padding: 8px 10px; border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
.tbl th.num, .tbl td.num { text-align: right; font-variant-numeric: tabular-nums; }
.tbl th.ctr, .tbl td.ctr { text-align: center; }
.tbl tbody tr { border-bottom: 1px solid var(--line-2); transition: background .12s; }
.tbl tbody tr:hover { background: #fcfdff; }
/* 弹窗自带滚动容器（.modal overflow:auto），sticky 参照系被劫持，表头一律用静态 */
.modal .tbl thead th { position: static; top: auto; }
/* 横向滚动容器（overflow-x:auto 会让 overflow-y 也算 auto）同样是滚动容器：
   表头 sticky 的参照系从视口变成容器自身，top:106px 会把表头向下压 106px 盖住第一行。
   这些容器里表头天然就在表格顶部，吸附点改回容器顶部即可（容器真能纵向滚动时仍可用）。 */
.cm-scroll .tbl thead th, .ex-scroll .tbl thead th, .dsp-scroll .tbl thead th,
.att-scroll .tbl thead th, .imp-tbl-wrap .tbl thead th, .dpick .tbl thead th,
.sign-doc .tbl thead th, .hr-sec .tbl thead th, .inv-scroll .tbl thead th,
.prod-scroll .tbl thead th, .aud-scroll .tbl thead th { top: 0; }
.tbl tbody tr.sel { background: var(--brand-soft); }
.tbl td { padding: 8px 10px; vertical-align: middle; font-size: 13px; }

.cell-name { display: flex; flex-direction: column; gap: 1px; }
.cell-name .nm { font-weight: 500; color: var(--text); }
/* 第 139 项：规格备注原来独占名称下方一行（点着改要在两行之间找），挪到名称右边同一行。
   用最朴素的文档流：名称原样排，备注跟在后面；名称太长时自然折到下一行开头，不会错位。 */
.cell-name .nm-note { margin-left: 6px; color: var(--text-2); font-size: 11.5px; font-weight: 400; }
.cell-name .nm-note .sub-txt { display: inline; min-width: 0; max-width: none; color: var(--text-2); font-size: 11.5px; font-weight: 400; }
.cell-name .nm-note .sub-txt:empty::before { content: '＋备注'; font-style: normal; opacity: .55; }
.cell-name .sub { font-size: 11.5px; color: var(--text-3); }
.cell-name .fn { font-size: 11.5px; color: var(--text-3); display: none; margin-top: 3px; padding-left: 2px; border-left: 2px solid var(--line); }
tr.expand .cell-name .fn { display: block; }

.tag { display: inline-block; font-size: 11px; padding: 1px 6px; border-radius: 5px;
  background: var(--blue-soft); color: var(--blue); font-weight: 500; white-space: nowrap; }
.tag.rem { background: var(--line-2); color: var(--text-2); }

.price { font-variant-numeric: tabular-nums; }
.price.o { color: var(--text-3); text-decoration: none; }
.price.d { color: var(--text); font-weight: 600; }
.price.hl { color: var(--brand); }
tr.mode-direct .price.o { opacity: .5; }
tr.mode-official .price.d { opacity: .55; }

/* 数量输入 */
.qty { display: inline-flex; align-items: center; border: 1px solid var(--line); border-radius: 9px;
  overflow: hidden; background: #fff; transition: all .16s; }
.qty:focus-within { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); }
.qty button { width: 26px; height: 30px; color: var(--text-2); font-size: 15px; display: grid; place-items: center; }
.qty button:hover { background: var(--line-2); color: var(--brand); }
.qty input { width: 48px; height: 30px; border: none; text-align: center; outline: none;
  font-variant-numeric: tabular-nums; font-weight: 600; background: transparent; }
.qty input::-webkit-outer-spin-button, .qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.unit { font-size: 11.5px; color: var(--text-3); }

.chk { width: 17px; height: 17px; accent-color: var(--brand); cursor: pointer; }

.subtotal { font-weight: 700; font-variant-numeric: tabular-nums; color: var(--text); }
.subtotal.zero { color: var(--text-3); font-weight: 400; }

.cat-sub { display: flex; align-items: center; justify-content: flex-end; gap: 14px;
  padding: 9px 16px; background: var(--panel-2); border-top: 1px solid var(--line-2); font-size: 13px;
  border-radius: 0 0 var(--radius) var(--radius); }
.cat-sub b { font-size: 15px; color: var(--brand); font-variant-numeric: tabular-nums; }

/* ---------- 底部总价条 ---------- */
.dock {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 70;
  background: rgba(255,255,255,.94); backdrop-filter: saturate(180%) blur(16px);
  border-top: 1px solid var(--line); box-shadow: 0 -4px 22px rgba(20,30,50,.07);
  padding: 10px 20px; display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
}
.dock-metric { display: flex; flex-direction: column; line-height: 1.3; }
.dock-metric span { font-size: 11.5px; color: var(--text-3); }
.dock-metric b { font-size: 17px; font-variant-numeric: tabular-nums; }
.dock-metric b.grad { background: linear-gradient(135deg, var(--brand), var(--brand-2));
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; font-size: 24px; }
.dock-metric.total { padding-left: 18px; border-left: 1px solid var(--line); }
.dock-metric input { width: 92px; font: inherit; font-size: 14px; font-variant-numeric: tabular-nums;
  border: 1px solid var(--line); border-radius: 8px; padding: 4px 8px; background: var(--panel); color: var(--text-1); }
.dock-metric input:focus { outline: none; border-color: var(--brand); }
.dock .grow { flex: 1; }
.dock .cnt-chip { font-size: 12px; color: var(--text-2); background: var(--panel-2);
  border: 1px solid var(--line); border-radius: 20px; padding: 4px 11px; }

/* ---------- 通用面板 ---------- */
/* 同 .cat：去掉 overflow:hidden，避免劫持表头 sticky 参照系；圆角由首尾子元素自裁 */
.wrap { padding: 18px 20px 120px; max-width: 1180px; margin: 0 auto; }
.panel { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow); margin-bottom: 16px; }
.panel > :last-child { border-radius: 0 0 var(--radius) var(--radius); }
.panel-hd { display: flex; align-items: center; gap: 10px; padding: 13px 16px; border-bottom: 1px solid var(--line-2); }
/* 第 80 项：备货需求这类说明文案较长的面板，标题不能被挤成竖排（note 让位、标题不缩） */
.panel-hd h3 { margin: 0; font-size: 14.5px; font-weight: 700; flex: 0 0 auto; white-space: nowrap; }
.panel-hd .grow { flex: 1; }
.panel-hd .note { font-size: 12px; color: var(--text-3); min-width: 0; }
.panel-bd { padding: 14px 16px; }

/* 费用预估表 */
.est-group-hd { display: flex; align-items: center; gap: 8px; padding: 9px 16px;
  background: var(--panel-2); border-top: 1px solid var(--line-2); border-bottom: 1px solid var(--line-2);
  font-size: 12.5px; font-weight: 700; color: var(--text-2); }
.est-group-hd .chip { font-size: 11px; padding: 1.5px 8px; border-radius: 20px; font-weight: 600; }
.chip-base { background: #fdecea; color: var(--red); }
.chip-up   { background: var(--amber-soft); color: var(--amber); }
.chip-opt  { background: var(--blue-soft); color: var(--blue); }
.chip-labor{ background: var(--green-soft); color: var(--green); }

.tbl.est td { padding: 10px; }
.tbl.est .est-name { font-weight: 600; }
.tbl.est .est-price { font-weight: 700; font-variant-numeric: tabular-nums; font-size: 14px; }
.tbl.est .est-price.zero { color: var(--text-3); font-weight: 400; }
.tbl.est tbody tr:hover { background: #fcfdff; }
.est-total { display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px; background: linear-gradient(90deg, var(--brand-soft), #fff);
  border-top: 2px solid var(--brand); }
.est-total .lbl { font-size: 14px; font-weight: 700; }
.est-total .val { font-size: 26px; font-weight: 800; color: var(--brand); font-variant-numeric: tabular-nums; }

/* 收款节点 */
.pay-steps { display: grid; gap: 10px; }
.pay-step { display: flex; align-items: center; gap: 12px; padding: 11px 14px;
  border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--panel-2); }
.pay-step .idx { width: 24px; height: 24px; border-radius: 50%; background: var(--brand); color: #fff;
  display: grid; place-items: center; font-size: 12px; font-weight: 700; flex: none; }
.pay-step .lbl { flex: 1; font-weight: 500; }
.pay-step .pct { font-size: 12px; color: var(--text-3); }
.pay-step .amt { font-weight: 700; font-variant-numeric: tabular-nums; }

/* 报价单 */
.quote-doc { background: #fff; overflow-x: auto;
  /* 抬头浅橙底、分组行浅色底都要真打印出来（不用「省墨」模式抹掉） */
  -webkit-print-color-adjust: exact; print-color-adjust: exact; }
/* 抬头：主标题 + 副标题。浅橙渐变底 + 左侧品牌色竖条，颜色很浅，打印也清晰省墨 */
.quote-hd { position: relative; padding: 20px 24px 16px 30px;
  background: linear-gradient(102deg, #fff6ea 0%, #fffaf4 44%, #ffffff 100%);
  border-bottom: 1px solid #f0e2d0; }
.quote-hd::before { content: ''; position: absolute; left: 0; top: 18px; bottom: 16px; width: 5px;
  border-radius: 0 5px 5px 0; background: linear-gradient(180deg, #f6a960, #e8734a); }
.quote-hd h1 { margin: 0 0 7px; font-size: 22px; letter-spacing: .6px; font-weight: 800; color: #2c2620; }
.quote-hd .sub { display: inline-block; font-size: 12.5px; color: #96693c; background: #fff3e4;
  border: 1px solid #f7e1c8; border-radius: 999px; padding: 3px 12px; }
/* 客户信息栏：卡片式（浅底小标签 + 加粗值），比下划线填空清爽 */
.quote-info { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px 12px;
  padding: 15px 24px 16px; background: #fffdf9; border-bottom: 1px solid #f2ece3; font-size: 13px; }
.quote-info .k { flex: none; font-size: 11.5px; color: #8d7f6e; background: #f7f2ea;
  border-radius: 6px; padding: 2px 8px; letter-spacing: .2px; white-space: nowrap; }
.quote-info .row { display: flex; align-items: center; gap: 8px; min-width: 0;
  background: #fff; border: 1px solid #ece5da; border-radius: 9px; padding: 7px 10px; }
.quote-info .row .v { flex: 1; min-width: 0; min-height: 0; padding: 0; border-bottom: none;
  font-weight: 600; font-size: 13px; color: #2c2620; }
/* 首行：客户名 / 联系号码 / 项目地址 三项并排一行 */
.quote-info .line3 { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px 12px; }
.quote-info .line3 .row { min-width: 0; }
.quote-info .line3 .row .v { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* 第一格永远是「客户名」，用暖色小标签点一下，一眼能找到是谁家的单子 */
.quote-info .line3 .row:first-child { background: #fffaf3; border-color: #f5e2cb; }
.quote-info .line3 .row:first-child .k { background: #fdeedd; color: #a8621f; }
.quote-info .line3 .row:first-child .v { font-size: 13.5px; }

/* 配置清单：品牌·系列 与 安装位置 */
.bs-line { color: var(--brand); font-weight: 500; }
.pos-edit { width: 100%; max-width: 96px; padding: 4px 8px; border: 1px solid var(--line); border-radius: 8px;
  font-size: 12px; background: var(--panel-2); outline: none; transition: border-color .15s; }
.pos-edit:focus { border-color: var(--brand); background: #fff; }
.quote-sec { padding: 4px 0; }
.quote-sec-hd { padding: 8px 24px; font-weight: 700; font-size: 13.5px; background: var(--panel-2);
  display: flex; justify-content: space-between; }
.tbl.quote td { padding: 7px 10px; font-size: 12.5px; }
.tbl.quote thead th { top: auto; position: static; }
.tbl.quote .qsub { font-weight: 600; font-variant-numeric: tabular-nums; }
/* 报价单加了「官网价 / 直供价 / 立省」后列数变多，收紧左右内边距 */
.tbl.quote th, .tbl.quote td { padding-left: 7px; padding-right: 7px; }
.tbl.quote th { font-size: 11px; }
/* 第 155 项：规格备注列原来是写死的 88px，而「产品名称」列没有宽度、会把剩下的 470px 全吃掉，
   结果规格备注被顶到很右边、和产品名之间一大片空白。改成按比例吃剩余宽度：
   屏幕 ≥900px 给 20%（约 200~230px），窄屏回落到 150px，打印回到 92px 保持纸面紧凑。 */
.tbl.quote th.spec-col { width: 20%; min-width: 168px; }
.tbl.quote td.q-spec { line-height: 1.5; }
@media (max-width: 900px) {
  .tbl.quote th.spec-col { width: 150px; min-width: 0; }
}
/* 立省（相对官网价节省的金额） */
.save-col { color: var(--green); font-variant-numeric: tabular-nums; }
.tbl.quote th.save-col { color: var(--green); }
/* 报价单「有图版」的独立产品图列 */
.tbl.quote .qimg { width: 46px; height: 46px; display: block; margin: 0 auto;
  border-radius: 8px; border: 1px solid var(--line-2); background: #fff; object-fit: contain; padding: 2px; }
.tbl.quote .qimg.ph { display: grid; place-items: center; color: var(--text-3); font-size: 15px;
  background: var(--panel-2); border-style: dashed; }
/* 分组标题行：文字居中 + 浅橙 / 天蓝 / 浅红三色循环（用很浅的色，打印保留底色也不废墨） */
tr.cat-row > td { text-align: center; font-weight: 700; font-size: 12.5px; padding: 7px 10px;
  -webkit-print-color-adjust: exact; print-color-adjust: exact; }
tr.cat-row.cat-1 > td { background: #fdf1e3; color: #9a5a1c; }
tr.cat-row.cat-2 > td { background: #e9f3fc; color: #1f5c88; }
tr.cat-row.cat-3 > td { background: #fdecea; color: #a4433d; }
/* 第 156 项：一个产品都没配的大类，标题行照样出现（让客户看到这套方案规划了哪几大系统），
   整行压淡一档 + 右侧一个淡标记，避免看起来像「有标题没内容」的排版错误 */
tr.cat-row.cat-row-blank > td { opacity: .72; }
.cat-blank { margin-left: 8px; font-weight: 400; font-size: 10.5px; letter-spacing: 0;
  color: #97a1af; border: 1px solid currentColor; border-radius: 4px; padding: 0 5px; vertical-align: 1px; }
.quote-total { display: flex; justify-content: flex-end; gap: 26px; padding: 14px 24px;
  border-top: 2px solid var(--text); font-size: 14px; }
.quote-total .row { display: flex; gap: 10px; align-items: baseline; }
.quote-total .big { font-size: 22px; font-weight: 800; color: var(--brand); font-variant-numeric: tabular-nums; }
.quote-foot { padding: 14px 24px 26px; font-size: 11.5px; color: var(--text-3); line-height: 1.9; border-top: 1px dashed var(--line); }

.empty { text-align: center; padding: 50px 20px; color: var(--text-3); }
.empty .big { font-size: 34px; margin-bottom: 8px; }

/* 功能介绍 */
.feat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.feat { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 13px 15px; background: var(--panel-2);
  transition: all .16s; }
.feat:hover { border-color: var(--brand-2); box-shadow: var(--shadow-sm); transform: translateY(-1px); }
.feat .fh { display: flex; align-items: center; gap: 8px; margin-bottom: 5px; }
.feat .fh .n { width: 20px; height: 20px; border-radius: 6px; background: var(--brand-soft); color: var(--brand);
  display: grid; place-items: center; font-size: 11px; font-weight: 700; }
.feat .fh b { font-size: 13.5px; }
.feat p { margin: 0; font-size: 12.5px; color: var(--text-2); line-height: 1.7; }

.tbl.plain td, .tbl.plain th { padding: 9px 12px; font-size: 13px; }
.tbl.plain thead th { position: static; }

.stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-bottom: 16px; }
.stat { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 13px 16px; box-shadow: var(--shadow); }
.stat span { font-size: 12px; color: var(--text-3); }
.stat b { display: block; font-size: 21px; font-weight: 800; font-variant-numeric: tabular-nums; margin-top: 2px; }

/* toast */
#toast { position: fixed; left: 50%; bottom: 100px; transform: translateX(-50%) translateY(20px);
  background: #1a2233; color: #fff; padding: 10px 20px; border-radius: 10px; font-size: 13.5px;
  opacity: 0; pointer-events: none; transition: all .25s; z-index: 200; box-shadow: var(--shadow-lg); }
#toast.on { opacity: 1; transform: translateX(-50%) translateY(0); }

/* 打印 */
@media print {
  .topbar, .tabs, .sidenav, .dock, .toolbar, #toast, .no-print { display: none !important; }
  body { background: #fff; }
  .layout, .wrap { display: block; padding: 0; }
  .panel { border: none; box-shadow: none; margin: 0; }
  .quote-doc { padding: 0; }
  .tabpane { display: none !important; }
  .tabpane.on { display: block !important; }
  @page { margin: 12mm; }
}

/* ==========================================================================
   追加：登录 / 图片 / 行内编辑 / 自动求和 / 后台 / 分享页
   ========================================================================== */

/* ---------- 登录 ---------- */
.auth-wrap { min-height: 100vh; display: grid; place-items: center; padding: 24px; }
.auth-card { width: 100%; max-width: 420px; background: var(--panel); border: 1px solid var(--line);
  border-radius: 18px; padding: 26px; box-shadow: var(--shadow-lg); }
.auth-brand { display: flex; gap: 12px; align-items: center; margin-bottom: 18px; }
.auth-brand h2 { margin: 0; font-size: 17px; }
.auth-brand p { margin: 2px 0 0; font-size: 12.5px; color: var(--text-3); }
.auth-tabs { margin-bottom: 16px; width: 100%; }
.auth-tabs button { flex: 1; }
.auth-card label { display: block; font-size: 12.5px; color: var(--text-2); margin: 12px 0 5px; font-weight: 500; }
.auth-card label:first-of-type { margin-top: 0; }
.auth-card label .hint { color: var(--text-3); font-weight: 400; }
.auth-card input { width: 100%; padding: 10px 13px; border: 1px solid var(--line); border-radius: 10px;
  background: var(--panel-2); outline: none; transition: all .16s; box-sizing: border-box; }
.auth-card input:focus { border-color: var(--brand); background: #fff; box-shadow: 0 0 0 3px var(--brand-soft); }
.auth-alt { margin-top: 14px; text-align: center; font-size: 12.5px; }
.auth-alt a { color: var(--brand); cursor: pointer; text-decoration: none; }
.auth-alt a:hover { text-decoration: underline; }
/* 第 51 项：验证码通道的说明块（讲清「什么时候才需要验证码」） */
.auth-tip { margin: 12px 0 0; font-size: 12px; color: var(--text-3); line-height: 1.75; }
.auth-tip.adv-hd { margin: 0 0 6px; background: var(--panel-2); border: 1px solid var(--line);
  border-radius: 10px; padding: 9px 11px; }
.auth-tip.adv-hd b { color: var(--text-2); }
#authAdv { margin-top: 14px; border-top: 1px dashed var(--line); padding-top: 4px; }
.code-row { display: flex; gap: 8px; }
.code-row input { flex: 1; }
.code-row .btn { white-space: nowrap; }
.auth-submit { width: 100%; justify-content: center; margin-top: 18px; padding: 11px; }
.auth-link { width: 100%; justify-content: center; margin-top: 8px; color: var(--text-3); }
.field-err { color: var(--red); font-size: 12px; min-height: 17px; margin-top: 4px; }
.auth-msg { margin-top: 12px; font-size: 12.5px; min-height: 18px; color: var(--text-3); }
.auth-msg.err { color: var(--red); }
.auth-msg.ok { color: var(--green); }

/* ---------- 顶栏用户区 ---------- */
.user-chip { display: flex; align-items: center; gap: 8px; padding: 5px 12px 5px 5px; border: 1px solid var(--line);
  border-radius: 30px; background: #fff; }
.user-chip .ava { width: 26px; height: 26px; border-radius: 50%; flex: none; display: grid; place-items: center;
  background: linear-gradient(135deg, var(--brand), var(--brand-2)); color: #fff; font-size: 12px; font-weight: 700; }
.user-chip .nm { font-size: 13px; font-weight: 600; }
.user-chip .role { font-size: 10.5px; padding: 1px 6px; border-radius: 20px; background: var(--line-2); color: var(--text-3); }
.user-chip .role.admin { background: var(--brand-soft); color: var(--brand); }

/* ---------- 产品图片 ---------- */
.thumb { width: 54px; height: 54px; border-radius: 9px; border: 1px solid var(--line-2); background: #fff;
  object-fit: contain; padding: 3px; flex: none; }
.thumb.ph { display: grid; place-items: center; color: var(--text-3); font-size: 17px;
  background: var(--panel-2); border-style: dashed; }
.thumb.big { width: 92px; height: 92px; }
.row-main { display: flex; gap: 12px; align-items: flex-start; }

/* ---------- 行内编辑 ---------- */
.editable { border-radius: 6px; padding: 2px 5px; margin: -2px -5px; cursor: text;
  border: 1px dashed transparent; transition: all .14s; }
.editable:hover { border-color: var(--line); background: var(--panel-2); }
.editable:focus { outline: none; border-color: var(--brand); background: #fff; box-shadow: 0 0 0 3px var(--brand-soft); }
/* 备注 / 功能介绍：行内可编辑，空值时显示浅色引导文案 */
.line-edit { display: block; }
.cell-name .sub .sub-txt { color: var(--text-2); }
.cell-name .sub .sub-txt:focus { color: var(--text); }
.sub-txt { display: inline-block; min-width: 44px; max-width: 100%; }
.sub-txt:empty::before { content: attr(data-ph); color: var(--text-3); opacity: .5; font-style: italic; font-weight: 400; }
.sub-txt:hover:empty::before { opacity: .9; }
.f-desc .sub-txt { opacity: .9; line-height: 1.5; }
.add-desc { font-size: 11px; color: var(--text-3); background: transparent; border: 1px dashed var(--line);
  border-radius: 5px; padding: 0 6px; line-height: 17px; cursor: pointer; opacity: .7; }
.add-desc:hover { opacity: 1; color: var(--brand); border-color: var(--brand); background: var(--brand-soft); }
.edited-dot { display: inline-block; width: 5px; height: 5px; border-radius: 50%; background: var(--brand);
  margin-left: 5px; vertical-align: middle; }
.price-edit { border: 1px dashed transparent; border-radius: 6px; padding: 2px 5px; width: 74px; text-align: right;
  background: transparent; font-variant-numeric: tabular-nums; font-weight: 600; }
.price-edit:hover { border-color: var(--line); background: var(--panel-2); }
.price-edit:focus { outline: none; border-color: var(--brand); background: #fff; box-shadow: 0 0 0 3px var(--brand-soft); }

/* ---------- 自动求和 ---------- */
.auto-qty { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 9px;
  background: var(--amber-soft); border: 1px solid #f3ddb0; color: var(--amber); font-weight: 700;
  font-variant-numeric: tabular-nums; cursor: help; }
.auto-qty .lock { font-size: 11px; }
/* 第 125 项：自动行被「取消勾选」—— 换成灰态，别再跟「已计入」的橙色混在一起 */
.auto-qty.off { background: var(--panel-2); border-color: var(--line); color: var(--text-3); font-weight: 600; }
tr.auto-row { background: #fffdf6; }
tr.auto-row:hover { background: #fffaee; }
tr.auto-row:not(.sel) { background: #fff; }
tr.auto-row:not(.sel):hover { background: var(--panel-2); }

/* ---------- 项目条 ---------- */
.projbar { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px 14px;
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px;
  margin-bottom: 14px; box-shadow: var(--shadow); }
.projbar-hd { grid-column: 1 / -1; display: flex; align-items: center; gap: 8px;
  padding-bottom: 10px; margin-bottom: 4px; border-bottom: 1px solid var(--line-2); }
.projbar-hd .ph-ico { width: 26px; height: 26px; border-radius: 8px; flex: none;
  background: var(--brand-soft); display: grid; place-items: center; font-size: 14px; }
.projbar-hd b { font-size: 13.5px; color: var(--text); }
.projbar-hd .ph-note { font-size: 11.5px; color: var(--text-3); }
.projbar label { display: block; font-size: 11.5px; color: var(--text-3); margin-bottom: 3px; }
.projbar label .req { color: var(--red); font-weight: 700; }
.projbar input, .projbar select { width: 100%; padding: 7px 10px; border: 1px solid var(--line); border-radius: 9px;
  background: var(--panel-2); outline: none; font-size: 13px; transition: all .16s; }
.projbar input:hover, .projbar select:hover { border-color: #d3d9e3; }
.projbar input:focus, .projbar select:focus { border-color: var(--brand); background: #fff; box-shadow: 0 0 0 3px var(--brand-soft); }

/* ---------- 可搜索下拉（设计师 / 协销人 / 业绩归属） ---------- */
.ss-hidden { display: none !important; }
.ss-box { position: relative; width: 100%; }
.ss-input { width: 100%; padding: 7px 10px; border: 1px solid var(--line); border-radius: 9px;
  background: var(--panel-2); outline: none; font-size: 13px; transition: all .16s; }
.ss-input:hover { border-color: #d3d9e3; }
.ss-input:focus { border-color: var(--brand); background: #fff; box-shadow: 0 0 0 3px var(--brand-soft); }
.ss-input.ss-disabled { background: var(--panel-2); color: var(--text-2); cursor: not-allowed; opacity: .85; }
.ss-panel { position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 60;
  background: #fff; border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--shadow-lg);
  max-height: 240px; overflow: auto; padding: 4px; }
.ss-item { padding: 8px 10px; border-radius: 7px; font-size: 13px; cursor: pointer; color: var(--text); }
.ss-item:hover { background: var(--brand-soft); }
.ss-item.on { background: var(--brand); color: #fff; }
.ss-empty { padding: 10px; font-size: 12.5px; color: var(--text-3); text-align: center; }

/* ---------- 弹层 ---------- */
.modal-mask { position: fixed; inset: 0; background: rgba(16,24,40,.42); z-index: 150; display: grid;
  place-items: center; padding: 24px; }
.modal { background: #fff; border-radius: 16px; box-shadow: var(--shadow-lg); width: 100%; max-width: 560px;
  max-height: 88vh; overflow: auto; }
.modal-hd { display: flex; align-items: center; gap: 10px; padding: 16px 20px; border-bottom: 1px solid var(--line-2);
  position: sticky; top: 0; background: #fff; border-radius: 16px 16px 0 0; }
.modal-hd h3 { margin: 0; font-size: 15px; }
.modal-hd .grow { flex: 1; }
.modal-bd { padding: 18px 20px; }
.modal-bd label { display: block; font-size: 12.5px; color: var(--text-2); margin: 10px 0 5px; font-weight: 500; }
.modal-bd input, .modal-bd select, .modal-bd textarea { width: 100%; padding: 9px 12px; border: 1px solid var(--line);
  border-radius: 9px; background: var(--panel-2); outline: none; }
.modal-bd input:focus, .modal-bd select:focus, .modal-bd textarea:focus { border-color: var(--brand); background: #fff; box-shadow: 0 0 0 3px var(--brand-soft); }
.modal-ft { display: flex; justify-content: flex-end; gap: 8px; padding: 14px 20px; border-top: 1px solid var(--line-2); }

/* ---------- 产品编辑弹窗（改图 / 改名称 / 改备注参数） ---------- */
.modal.wide { max-width: 760px; }
.ep-grid { display: grid; grid-template-columns: 200px 1fr; gap: 22px; align-items: start; }
.ep-imgwrap { width: 200px; height: 200px; border: 1px solid var(--line-2); border-radius: 12px;
  background: var(--panel-2); display: grid; place-items: center; overflow: hidden; }
.ep-img { max-width: 100%; max-height: 100%; object-fit: contain; }
.ep-empty { display: grid; place-items: center; gap: 4px; color: var(--text-3); font-size: 30px; }
.ep-empty span { font-size: 12px; }
.ep-imgops { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.ep-imgnote { font-size: 12px; color: var(--text-3); margin-top: 8px; line-height: 1.7; min-height: 18px; }
.ep-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ep-grid > div > label:first-child { margin-top: 0; }
.prod-img { display: inline-block; cursor: pointer; }
.prod-img:hover .thumb { border-color: var(--brand); }
@media (max-width: 720px) {
  .ep-grid { grid-template-columns: 1fr; }
  .ep-imgwrap { width: 100%; height: 220px; }
}

/* ---------- 表格通用增强 ---------- */
.tbl tbody tr.dim { opacity: .45; }
.mini-tag { font-size: 10.5px; padding: 1px 6px; border-radius: 5px; background: var(--line-2); color: var(--text-2); }
.mini-tag.on { background: var(--green-soft); color: var(--green); }
.mini-tag.off { background: #fdecea; color: var(--red); }
/* 第 102 项：产品库列表里「前台隐藏」的标注 —— 不是停用（进销存照旧能选），用琥珀色区分 */
.mini-tag.foff { background: #fdf1dc; color: #a5691a; margin-left: 6px; }

/* ---------- 第 72 项：已竣工的项目行（项目管理列表整行橙色底，与其它单一眼区分） ---------- */
.tbl tbody tr.proj-done { background: #fff1e0; border-bottom-color: #ffd9b0; }
.tbl tbody tr.proj-done:hover { background: #ffe7cf; }
.tbl tbody tr.proj-done > td:first-child { box-shadow: inset 3px 0 0 var(--brand); }
.tbl tbody tr.proj-done .pno { background: #ffe0bd; color: #b4530a; }
.mini-tag.done-tag { background: var(--brand); color: #fff; }
.done-meta { color: var(--brand); font-size: 11px; margin-top: 2px; font-weight: 600; }
.stat b.done-num { color: var(--brand); }
.toolbar .btn.active { border-color: var(--brand); color: var(--brand); background: var(--brand-soft); }

/* ---------- 分享页 ---------- */
.share-page { max-width: 940px; margin: 0 auto; padding: 26px 20px 60px; }
.share-hero { background: linear-gradient(135deg, var(--brand), var(--brand-2)); color: #fff; border-radius: 18px;
  padding: 24px 26px; margin-bottom: 18px; box-shadow: 0 10px 26px rgba(255,105,0,.22); }
.share-hero h1 { margin: 0 0 4px; font-size: 20px; }
.share-hero .sub { font-size: 12.5px; opacity: .9; }
.share-hero .kv { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px,1fr)); gap: 10px 20px; margin-top: 16px; }
.share-hero .kv div span { font-size: 11.5px; opacity: .85; display: block; }
.share-hero .kv div b { font-size: 14.5px; font-weight: 600; }

/* 联系方式行：分享页没有打印 / 导出按钮后，「有问题找谁」单独占一行 */
.share-contact {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  background: var(--panel); border: 1px solid var(--line); border-left: 3px solid var(--brand);
  border-radius: var(--radius); padding: 11px 14px; margin-bottom: 14px;
  font-size: 13px; color: var(--text-2); box-shadow: var(--shadow);
}
.share-contact::before { content: '☎️'; font-size: 15px; }

/* 分享弹窗里的「微信发不出去怎么办」提示块 */
.share-tip {
  margin-top: 14px; padding: 10px 12px; font-size: 12.5px; line-height: 1.7;
  color: var(--text-2); background: #fff8e6; border: 1px solid #ffe3a3;
  border-radius: var(--radius);
}
.share-tip b { color: var(--text-1); }

/* ==========================================================================
   追加：合同（前台生成 + 后台模板编辑）
   ========================================================================== */
.modal.wide-x { max-width: 940px; }
.modal.wide-x .modal-bd { padding: 0; }
/* 项目管理：客户名称 / 项目名称分列后列更多，弹窗再放宽一档，避免出横向滚动条 */
.modal.wide-xx { max-width: 1180px; }

.ct-toolbar { display: flex; align-items: center; gap: 8px; padding: 10px 16px; flex-wrap: wrap;
  border-bottom: 1px solid var(--line-2); position: sticky; top: 0; background: #fff; z-index: 2; }
.ct-toolbar .grow { flex: 1; }
.ct-scroll { padding: 18px 16px 22px; background: var(--bg); max-height: 68vh; overflow: auto; }

.ct-paper { width: 100%; max-width: 760px; margin: 0 auto; background: #fff; color: var(--text);
  padding: 38px 42px 46px; font-size: 13px; line-height: 1.95; box-shadow: var(--shadow); border-radius: 4px; }
.ct-title { text-align: center; font-size: 21px; font-weight: 700; letter-spacing: 4px; margin: 0 0 20px; }
.ct-h { font-weight: 700; font-size: 14px; margin: 16px 0 6px; }
.ct-p { margin: 0; white-space: pre-wrap; word-break: break-word; }
.ct-gap { height: 9px; }
.ct-pay { margin: 4px 0; }
.ct-pay-line { white-space: pre-wrap; }

.cttbl { width: 100%; border-collapse: collapse; font-size: 12px; margin: 10px 0 4px; }
.cttbl th, .cttbl td { border: 1px solid #444; padding: 5px 6px; vertical-align: middle; }
.cttbl th { background: #f2f3f5; font-weight: 600; text-align: left; }
.cttbl .ctr { text-align: center; }
.cttbl .num { text-align: right; font-variant-numeric: tabular-nums; }
.cttbl tr.ct-sum td { background: #fafbfd; }
.ct-miss { background: var(--amber-soft); color: var(--amber); border-radius: 4px; padding: 0 5px; font-weight: 600; }
.ct-empty { color: var(--text-3); font-size: 11.5px; }

/* 后台「合同模板」页签 */
.ct-admin { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 18px; }
.ct-admin-l, .ct-admin-r { min-width: 0; }
#ctBody { width: 100%; height: 470px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 10px;
  background: var(--panel-2); outline: none; resize: vertical; font-size: 12.5px; line-height: 1.85;
  font-family: ui-monospace, Menlo, Consolas, "Courier New", monospace; }
#ctBody:focus { border-color: var(--brand); background: #fff; box-shadow: 0 0 0 3px var(--brand-soft); }
.ct-vars { margin-top: 10px; font-size: 12px; color: var(--text-2); }
.ct-vars h4 { margin: 0 0 6px; font-size: 12px; color: var(--text-3); font-weight: 600; }
.vchip { display: inline-block; padding: 2px 9px; margin: 0 6px 6px 0; border-radius: 20px; cursor: pointer;
  background: var(--panel-2); border: 1px solid var(--line); font-size: 11.5px; }
.vchip:hover { border-color: var(--brand); color: var(--brand); background: var(--brand-soft); }
.vchip.blk { background: var(--brand-soft); border-color: #ffd9bf; color: var(--brand); font-weight: 600; }
.ct-preview-hd { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--text-2); margin-bottom: 8px; }
.ct-admin-r .ct-scroll { border: 1px solid var(--line); border-radius: 10px; padding: 14px; max-height: 560px; }
.ct-admin-r .ct-paper { box-shadow: none; border: 1px solid var(--line-2); padding: 24px 26px 28px; max-width: none; }
.ct-warn { color: var(--amber); font-size: 12px; }
.ct-note-tip { font-size: 12px; color: var(--text-3); line-height: 1.9; margin: 10px 0 0; }

/* ==========================================================================
   第 153 项：合同填空横线 / 报价附件 / 多模板选择
   ========================================================================== */
/* 合同上原来「划横线让人填」的位置：系统没取到值就留一条横线，打印出来能直接手写 */
.ct-blank { display: inline-block; min-width: 96px; height: 1em; margin: 0 2px;
  border-bottom: 1px solid #333; vertical-align: -2px; }
.ct-blank-lines { margin: 6px 0 4px; }
.ct-blank-line { height: 1.9em; border-bottom: 1px solid #9aa0a6; }
.ct-terms { margin: 4px 0; }

/* 合同末尾的「产品清单报价」附件 */
.ct-appx { margin-top: 26px; padding-top: 16px; border-top: 2px dashed var(--line); }
.ct-appx-hd { font-size: 15px; font-weight: 700; letter-spacing: 1px; }
.ct-appx-meta { font-size: 12px; color: #555; margin: 5px 0 8px; }
.ct-appx-tbl { font-size: 11.5px; }
.ct-appx-tbl th, .ct-appx-tbl td { padding: 4px 5px; }
/* 第 157 项：第 8 列是「安装」——「厂家安装」四个字不能折成两行，PDF 纸面上会顶高整行 */
.ct-appx-tbl td:nth-child(8), .ct-appx-tbl th:nth-child(8) { white-space: nowrap; }
.ct-appx-sum { margin-top: 8px; font-size: 12.5px; }
.ct-appx-line { margin-top: 3px; }
.ct-appx-note { margin-top: 10px; font-size: 11.5px; color: #555; line-height: 1.8; }
.ct-noinst { color: var(--amber); }

/* 生成合同：模板下拉 + 填写项面板 */
.ct-tplsel { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--text-2); }
.ct-tplsel select { max-width: 230px; height: 30px; padding: 0 8px; border: 1px solid var(--line);
  border-radius: 8px; background: #fff; font-size: 12.5px; color: var(--text); }
.ct-fillbar { padding: 12px 16px 14px; border-bottom: 1px solid var(--line-2); background: var(--panel-2);
  max-height: 40vh; overflow: auto; }
.ct-fillgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: 8px 12px; }
.ct-fillf { display: flex; flex-direction: column; gap: 3px; font-size: 11.5px; color: var(--text-3); min-width: 0; }
.ct-fillf > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ct-fillf input, .ct-fillf textarea { width: 100%; padding: 5px 8px; border: 1px solid var(--line);
  border-radius: 7px; font-size: 12.5px; background: #fff; color: var(--text); outline: none; }
.ct-fillf input:focus, .ct-fillf textarea:focus { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); }
.ct-fillf.wide { grid-column: 1 / -1; }
.ct-fillf textarea { resize: vertical; font-family: inherit; line-height: 1.7; }
.ct-fillfoot { display: flex; align-items: center; gap: 10px; margin-top: 10px;
  font-size: 11.5px; color: var(--text-3); flex-wrap: wrap; }
.ct-fillfoot > span { flex: 1; min-width: 200px; line-height: 1.7; }
#ctFillBtn.on { border-color: var(--brand); color: var(--brand); background: var(--brand-soft); }
#ctFillBtn b { font-weight: 700; }

/* 后台「合同模板」里的模板下拉 */
.ct-pick { height: 30px; max-width: 240px; padding: 0 8px; border: 1px solid var(--line);
  border-radius: 8px; background: #fff; font-size: 12.5px; color: var(--text); }

/* 合同弹窗打印：只打印合同纸 */
@media print {
  body.ct-print { background: #fff; }
  body.ct-print > *:not(#modalRoot) { display: none !important; }
  body.ct-print #modalRoot { position: static; }
  body.ct-print .modal-mask { position: static; inset: auto; background: none; padding: 0; display: block; }
  body.ct-print .modal { max-width: none; max-height: none; box-shadow: none; border-radius: 0; overflow: visible; }
  body.ct-print .modal-hd, body.ct-print .modal-ft, body.ct-print .no-print { display: none !important; }
  body.ct-print .modal-bd { padding: 0; }
  body.ct-print .ct-scroll { padding: 0; max-height: none; overflow: visible; background: #fff; }
  body.ct-print .ct-paper { max-width: none; box-shadow: none; border-radius: 0; padding: 0; font-size: 12px; }
  body.ct-print .cttbl tr { page-break-inside: avoid; }
  /* 第 153 项：报价附件单独起一页，虚线分隔在纸上换成实线 */
  body.ct-print .ct-appx { page-break-before: always; border-top: 1px solid #444; margin-top: 0; }
  body.ct-print .ct-fillbar { display: none !important; }
}

/* ==========================================================================
   追加：报价模板可视化编辑（管理后台）
   ========================================================================== */
.qt-tip { font-size: 12.5px; color: var(--text-2); padding: 12px 16px 0; line-height: 1.9; }
.qt-scroll { padding: 16px; max-height: 62vh; overflow: auto; }
.qt-paper { max-width: 880px; margin: 0 auto; background: #fff; border: 1px solid var(--line-2);
  border-radius: 4px; padding: 26px 30px 30px; box-shadow: var(--shadow); }
/* 预览容器自带滚动，表头吸顶在这里无意义且会错层，强制静态 */
.qt-paper .tbl thead th { position: static; top: auto; }

.qt-edit { outline: 1px dashed transparent; outline-offset: 2px; cursor: text;
  border-radius: 2px; transition: outline-color .15s, background .15s; }
.qt-edit:hover { outline-color: #f0a95e; }
.qt-edit:focus { outline: 1.5px solid var(--brand); background: #fffaf0; }
.qt-footed { display: block; line-height: inherit; }

.qt-extra { padding: 0 16px 20px; max-width: 880px; margin: 0 auto; }
.qt-extra > label { font-size: 12.5px; color: var(--text-2); display: block; margin-bottom: 6px; }
#qtCatSub { width: 100%; padding: 8px 12px; border: 1px solid var(--line); border-radius: 9px;
  background: #fff; outline: none; font-size: 13px; }
#qtCatSub:focus { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); }
.qt-slot-group { margin-bottom: 8px; font-size: 12px; color: var(--text-3); line-height: 2; }
.qt-slot-group b { color: var(--text-2); margin-right: 4px; }
.vchip.static { cursor: default; }
.vchip.static:hover { border-color: var(--line); color: var(--text-2); background: var(--panel-2); }

/* ==========================================================================
   追加：项目管理（节点进度 / 收费节点 / 共享成员）
   ========================================================================== */
.pm-prog { display: flex; align-items: center; gap: 7px; min-width: 0; }
.pm-prog span { font-size: 11.5px; color: var(--text-2); white-space: nowrap; }
.pm-bar { flex: 1; height: 7px; min-width: 46px; border-radius: 4px; background: var(--line-2); overflow: hidden; }
.pm-bar i { display: block; height: 100%; border-radius: 4px; background: linear-gradient(135deg, var(--brand), var(--brand-2)); transition: width .25s; }
.pm-bar.pay i { background: linear-gradient(135deg, var(--green), #2fbe6e); }
.pm-bar.st i { background: linear-gradient(135deg, #3b82f6, #60a5fa); }

.pm-head { display: flex; flex-wrap: wrap; gap: 8px 22px; padding: 12px 16px; background: var(--panel-2);
  border: 1px solid var(--line-2); border-radius: 10px; margin-bottom: 14px; font-size: 13px; }
.pm-head .k { font-size: 11.5px; color: var(--text-3); margin-right: 6px; }
.pm-head b { color: var(--brand); font-size: 15px; }

.pm-sec { margin-bottom: 18px; }
.pm-sec-hd { font-size: 13.5px; font-weight: 700; color: var(--text); margin-bottom: 8px;
  display: flex; align-items: baseline; gap: 8px; }
.pm-sec-hd .note { font-size: 12px; font-weight: 400; color: var(--text-3); }
.pm-empty { padding: 14px 16px; background: var(--panel-2); border: 1px dashed var(--line);
  border-radius: 10px; font-size: 13px; color: var(--text-2); }
.pm-empty .btn { margin: 0 4px; }

.pm-state { display: inline-block; font-size: 11.5px; font-weight: 600; padding: 2px 9px;
  border-radius: 999px; background: var(--line-2); color: var(--text-2); }
.pm-state.active { background: var(--amber-soft); color: var(--amber); }
.pm-state.done { background: var(--green-soft); color: var(--green); }

.pm-inp { border: 1px solid transparent; background: transparent; padding: 4px 6px; border-radius: 7px;
  font-size: 13px; color: var(--text); width: 100%; min-width: 0; outline: none; }
.pm-inp:hover { border-color: var(--line); background: #fff; }
.pm-inp:focus { border-color: var(--brand); background: #fff; box-shadow: 0 0 0 3px var(--brand-soft); }
.pm-inp.num { text-align: right; }
/* 第 140 项：收款的「归属单」下拉（本单 / 主方案 / 增项单）—— 提成按这张单的清单拆 */
.pm-inp.pm-unit { display: block; width: 100%; margin-top: 4px; padding: 3px 6px; font-size: 11.5px;
  color: var(--text-2); background: #fff; border: 1px solid var(--line); border-radius: 6px; cursor: pointer; }
.pm-inp.pm-unit:hover { border-color: var(--brand); }
.pm-unit-txt { margin-top: 3px; font-size: 11px; color: var(--text-3); }
/* 第 141 项：「我的项目」列表里的节点菜单（选一个节点＝推进到它；末尾还能新增节点） */
.pm-stage-sel { display: block; width: 100%; margin-top: 4px; padding: 3px 4px; font-size: 11.5px;
  color: var(--text-2); background: #fff; border: 1px solid var(--line); border-radius: 6px;
  cursor: pointer; text-overflow: ellipsis; }
.pm-stage-sel:hover { border-color: var(--brand); color: var(--text); }

.pm-addrow { display: flex; gap: 8px; margin-top: 10px; align-items: center; }
.pm-addrow input, .pm-addrow select { flex: 1; border: 1px solid var(--line); border-radius: 9px;
  padding: 7px 11px; font-size: 13px; outline: none; background: #fff; min-width: 0; }
.pm-addrow input.num { flex: 0 0 110px; text-align: right; }
.pm-addrow input:focus, .pm-addrow select:focus { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); }

.pm-paysum { margin-top: 10px; font-size: 13px; color: var(--text-2); text-align: right; }
.pm-paysum b { font-variant-numeric: tabular-nums; }

.pm-mems { display: flex; flex-wrap: wrap; gap: 8px; }
.mem-chip { display: inline-flex; align-items: center; gap: 6px; background: var(--panel-2);
  border: 1px solid var(--line); border-radius: 999px; padding: 4px 12px; font-size: 12.5px; color: var(--text); }
.mem-chip i { font-style: normal; font-size: 11px; color: var(--text-3); }
.mem-chip b { cursor: pointer; color: var(--text-3); font-weight: 400; padding: 0 1px; }
.mem-chip b:hover { color: #d64541; }

/* ==========================================================================
   追加：员工权限（管理后台 - 权限页签）
   ========================================================================== */
.perm-tbl td { vertical-align: middle; }
.perm-tbl tr.perm-grp td { background: var(--panel-2); font-weight: 700; font-size: 12.5px;
  color: var(--text-2); letter-spacing: .5px; padding: 6px 10px; }
.perm-keysub { font-size: 11px; color: var(--text-3); margin-top: 2px; }
.perm-chk { width: 18px; height: 18px; accent-color: var(--brand); cursor: pointer; }
.perm-chk:disabled { cursor: not-allowed; opacity: .55; }

.perm-mgrp { font-size: 12.5px; font-weight: 700; color: var(--text-2); background: var(--panel-2);
  padding: 6px 10px; border-radius: 7px; margin: 14px 0 6px; }
.perm-mrow { display: flex; align-items: center; gap: 12px; padding: 7px 2px; border-bottom: 1px dashed var(--line-2); }
.perm-mrow > div:first-child { flex: 1; min-width: 0; }
.perm-mrow select { flex: 0 0 168px; border: 1px solid var(--line); border-radius: 9px;
  padding: 6px 10px; font-size: 12.5px; background: #fff; outline: none; }
.perm-mrow select:focus { border-color: var(--brand); }
.perm-tip { font-size: 12.5px; color: var(--text-2); background: var(--brand-soft);
  border-radius: 8px; padding: 8px 12px; margin: 0 0 6px; }

/* ==========================================================================
   追加：每页页脚（打印 / 导出 PDF 时出现在每一页最底部）
   ========================================================================== */
/* 屏幕上不显示：它只在打印时由浏览器重复渲染到每一页底部 */
.tbl tfoot.print-foot { display: none; }

@media print {
  /* 表尾组：浏览器会把表尾重复渲染到每一页最下方，且参与排版、不会压住正文 */
  .tbl > tfoot.print-foot { display: table-footer-group; }
  .tbl > tfoot.print-foot td {
    border: none !important; background: none !important;
    padding: 6mm 12mm 0 !important; font-size: 10.5px; color: #7c8798; text-align: center;
  }
  /* 明细行尽量不被页边界拦腰切断 */
  .tbl.quote tbody tr { break-inside: avoid; page-break-inside: avoid; }
  /* 第 155 项：规格备注在屏幕上是按比例加宽的，纸面宽度不够 → 打印回到紧凑宽度，把空间让给产品名 */
  .tbl.quote th.spec-col { width: 92px !important; min-width: 0 !important; }

  /* 打印时页面外边距被清零（见 printNoHeader：去掉浏览器自带的网址页脚），
     留白改用内边距补回：首末列 → 每页左右留白；表头 / 表尾组 → 每页上下留白 */
  body.qt-print .tbl.quote thead th { padding-top: 9mm !important; }
  body.qt-print .tbl.quote tr:not(.qtotal-row) > *:first-child { padding-left: 12mm !important; }
  body.qt-print .tbl.quote tr:not(.qtotal-row) > *:last-child { padding-right: 12mm !important; }
  body.qt-print .quote-hd { padding: 12mm 12mm 14px !important; }
  /* 左侧竖条紧贴纸边会被打印机的不可打印边距吃掉，打印时收起来 */
  body.qt-print .quote-hd::before { display: none !important; }
  body.qt-print .quote-hd .sub { border-color: #eadfce !important; }
  body.qt-print .quote-info { padding: 12px 12mm !important; }
  body.qt-print .quote-total { padding: 12px 12mm !important; }
  body.qt-print .quote-foot { padding: 12px 12mm 4mm !important; }
  body.qt-print .quote-doc { overflow: visible !important; }
  /* 分享页：彩色卡片改为白底黑字，留白由首末列内边距与 hero 内边距补回 */
  body.qt-print .share-page { padding: 12mm 0 0 !important; }
  body.qt-print .share-hero {
    background: #fff !important; color: var(--text) !important;
    border-radius: 0 !important; padding: 0 12mm 10px !important;
    border-bottom: 2px solid var(--text);
  }
  body.qt-print .share-hero .sub, body.qt-print .share-hero .kv div span { opacity: 1; color: var(--text-2); }
  body.qt-print .share-hero .kv div b { color: var(--text); }
}

/* 合计行：作为表格最后一行（「每页页脚」才能收在单据最底部） */
.tbl.quote tr.qtotal-row > td { padding: 0; border: none; }
.tbl.quote tbody tr.qtotal-row { border-bottom: none; }
.tbl.quote tbody tr.qtotal-row:hover { background: none; }
.tbl.quote tr.qtotal-row > td > .quote-total { width: 100%; }

/* 导出图片时临时插入的页脚块（截完即移除，故屏幕上只会一闪而过） */
.img-foot { padding: 12px 24px 6px; text-align: center; font-size: 11px; color: #7c8798; }

/* 管理后台「报价模板」预览里的每页页脚提示条 */
.qt-pagefoot { margin-top: 14px; border-top: 1px dashed var(--line); padding-top: 10px; }
.qt-pagefoot-hd { font-size: 11.5px; color: var(--text-3); margin-bottom: 4px; }
.qt-pagefoot-txt { text-align: center; font-size: 11.5px; color: #6b7688; min-height: 20px; }
.qt-pagefoot-txt .qt-edit { display: inline-block; min-width: 160px; }
.qt-pagefoot-txt .qt-edit:empty::before { content: attr(data-ph); color: var(--text-3); }

/* ==========================================================================
   追加：系统配置（管理后台 - 系统配置页签）
   ========================================================================== */
.site-tip { font-size: 12.5px; color: var(--text-2); background: var(--brand-soft);
  border-radius: 8px; padding: 9px 13px; margin: 0 0 14px; line-height: 1.9; }

.cfg-group { font-size: 12.5px; font-weight: 700; color: var(--text-2); background: var(--panel-2);
  padding: 6px 12px; border-radius: 7px; margin: 16px 0 8px; letter-spacing: .5px; }
.cfg-group:first-child { margin-top: 0; }
.cfg-row { display: flex; gap: 14px; padding: 9px 2px 11px; border-bottom: 1px dashed var(--line-2); }
.cfg-row > label { flex: 0 0 150px; font-size: 13px; color: var(--text); font-weight: 600; padding-top: 7px; }
.cfg-in { flex: 1; min-width: 0; }
.cfg-line { display: flex; align-items: center; gap: 10px; }
.cfg-line input { flex: 1; min-width: 0; border: 1px solid var(--line); border-radius: 9px;
  padding: 7px 11px; font-size: 13.5px; color: var(--text); background: #fff; outline: none; }
.cfg-line input:focus { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); }
.cfg-line input:disabled { background: var(--panel-2); color: var(--text-3); cursor: not-allowed; }
.cfg-line input::placeholder { color: var(--text-3); font-size: 12.5px; }
/* 多行配置项（如派单的「安装注意事项」默认模板）：输入框换成 textarea，保留换行 */
.cfg-line-multi { align-items: flex-start; }
.cfg-line textarea { flex: 1; min-width: 0; border: 1px solid var(--line); border-radius: 9px;
  padding: 7px 11px; font-size: 13.5px; line-height: 1.8; color: var(--text); background: #fff;
  outline: none; resize: vertical; font-family: inherit; }
.cfg-line textarea:focus { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); }
.cfg-line textarea:disabled { background: var(--panel-2); color: var(--text-3); cursor: not-allowed; }
.cfg-line textarea::placeholder { color: var(--text-3); font-size: 12.5px; }
.cfg-line-multi .cfg-cnt { margin-top: 7px; }
.cfg-cnt { flex: 0 0 52px; text-align: right; font-size: 11.5px; color: var(--text-3);
  font-variant-numeric: tabular-nums; }
.cfg-desc { font-size: 11.5px; color: var(--text-3); margin-top: 5px; line-height: 1.7; }

/* 预览小样 */
.pv-hd { font-size: 11.5px; color: var(--text-3); margin: 0 0 6px; }
.pv-hd:not(:first-child) { margin-top: 16px; }
.pv-bar { display: flex; align-items: center; gap: 9px; padding: 10px 12px; background: #fff;
  border: 1px solid var(--line-2); border-radius: 10px; }
.pv-mark { width: 30px; height: 30px; flex: 0 0 30px; border-radius: 8px; display: flex;
  align-items: center; justify-content: center; font-size: 15px; font-weight: 700; color: #fff;
  background: linear-gradient(135deg, var(--brand), var(--brand-2)); }
.pv-brand { min-width: 0; }
.pv-brand b { display: block; font-size: 13.5px; color: var(--text); white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; }
.pv-brand span { display: block; font-size: 11.5px; color: var(--text-3); margin-top: 1px; }
.pv-chip { font-size: 11.5px; color: var(--text-2); background: var(--panel-2); border-radius: 999px; padding: 3px 10px; }
.pv-card { display: flex; align-items: flex-start; gap: 11px; padding: 16px; background: #fff;
  border: 1px solid var(--line-2); border-radius: 12px; max-width: 420px; }
.pv-card h4 { font-size: 14px; color: var(--text); margin: 0; line-height: 1.5; }
.pv-card p { font-size: 12px; color: var(--text-3); margin: 5px 0 0; }
.pv-tab { font-size: 12px; color: var(--text-2); background: var(--panel-2); border-radius: 8px;
  padding: 7px 11px; margin-top: 8px; }
.pv-tab b { color: var(--text); }

/* 系统名称可由后台自定义，过长时截断，避免把顶栏挤变形 */
.brand-text { max-width: 420px; }
.brand-text b, .brand-text span { overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 1180px) { .brand-text { max-width: 250px; } }

/* ==========================================================================
   追加：方案费用预估（文字就地编辑 + 打印 / 导出 PDF / 图片 / 分享）
   —— 单据结构与报价单同源（quote-hd / quote-info / quote-foot / 每页页脚），
      整份内容收在一张表里，表尾页脚才能落到每一页的最底部。
   ========================================================================== */
/* 可编辑文字：屏幕上点哪改哪；不改动布局，导出时也不留痕迹 */
.est-doc-edit .est-edit { outline: none; border-radius: 4px; padding: 0 3px; margin: 0 -3px;
  cursor: text; transition: background .14s, box-shadow .14s; }
.est-doc-edit .est-edit:hover { background: var(--brand-soft); }
.est-doc-edit .est-edit:focus { background: #fff; box-shadow: 0 0 0 2px var(--brand-soft), inset 0 -2px 0 var(--brand); }
.est-doc-edit .est-edit:empty::before { content: attr(data-ph); color: var(--text-3); }

/* 组标题行 / 统计行 / 合计行 / 功能介绍行：整行跨列，取消单元格内边距 */
.tbl.est tr.est-ghead > td,
.tbl.est tr.est-stat-row > td,
.tbl.est tr.est-total-row > td,
.tbl.est tr.est-feat-hd > td,
.tbl.est tr.est-feat > td { padding: 0; border: none; background: none; }
.tbl.est tbody tr.est-ghead { border-bottom: none; }
.tbl.est tbody tr.est-ghead:hover,
.tbl.est tbody tr.est-stat-row:hover,
.tbl.est tbody tr.est-total-row:hover,
.tbl.est tbody tr.est-feat-hd:hover,
.tbl.est tbody tr.est-feat:hover { background: none; }
.tbl.est .est-group-hd .est-sub { font-variant-numeric: tabular-nums; font-weight: 400; }
.tbl.est .est-group-hd .est-sub b { color: var(--text); font-size: 13px; }

/* 列头行：每个分组重复一次，打印时每组都看得懂 */
.tbl.est tr.est-throw > td { padding: 8px 10px; background: #fbfcfe; border-bottom: 1px solid var(--line);
  font-size: 11.5px; font-weight: 600; color: var(--text-3); letter-spacing: .3px; }
.tbl.est tbody tr.est-throw:hover { background: none; }

.tbl.est tr.est-item > td.est-products { color: var(--text-2); }
/* 第 138 项：「配置建议」原来跟「作用」同为 12.5px 浅灰，用户觉得比前面的方案项名称（智能开关 / 电动窗帘）
   弱太多。这一列是给客户看的核心结论，单独提到 13.5px + 600 深色；「作用」保持次要灰字。 */
.tbl.est tr.est-item > td.est-note { color: var(--text); font-size: 13.5px; font-weight: 600; line-height: 1.7; }
.tbl.est tr.est-item > td.est-desc { color: var(--text-3); font-size: 12.5px; }
/* 列头「配置建议」同步放大加粗，否则一列里只有内容变重会显得头轻脚重 */
.tbl.est tr.est-throw > td:nth-child(3) { font-size: 12.5px; font-weight: 700; color: var(--text-2); }

/* 统计卡：放进表格行里，去掉原有的下外边距 */
.tbl.est .est-stat-wrap { padding: 14px 16px; }
.tbl.est .est-stat-wrap .stat-row { margin-bottom: 0; }
.tbl.est tr.est-total-row > td .est-total { width: 100%; }

/* 功能介绍（12 大场景）：标题行 + 一条一行；每条独立成行，打印时能自然分页 */
.tbl.est .est-feat-head { display: flex; align-items: center; gap: 10px;
  padding: 16px 16px 8px; margin-top: 4px; border-top: 1px dashed var(--line); }
.tbl.est .est-feat-head h3 { margin: 0; font-size: 14.5px; font-weight: 700; }
.tbl.est .est-feat-head .grow { flex: 1; }
.tbl.est .est-feat-head .note { font-size: 12px; color: var(--text-3); text-align: right; }
.tbl.est .est-feat-item { display: flex; align-items: baseline; gap: 9px; padding: 7px 16px; }
.tbl.est tr.est-feat + tr.est-feat .est-feat-item { border-top: 1px solid #f2f5fa; }
.tbl.est .est-feat-idx { flex: 0 0 18px; height: 18px; line-height: 18px; text-align: center;
  border-radius: 50%; background: var(--brand-soft); color: var(--brand);
  font-size: 10.5px; font-weight: 700; font-variant-numeric: tabular-nums; }
.tbl.est .est-feat-name { flex: 0 0 96px; font-size: 13px; font-weight: 600; color: var(--text); }
.tbl.est .est-feat-desc { flex: 1; color: var(--text-2); font-size: 12.5px; line-height: 1.78; }

/* 打印：页面外边距被清零（见 printNoHeader），留白改用内边距补回 */
@media print {
  body.qt-print .tbl.est tr.est-item > td:first-child,
  body.qt-print .tbl.est tr.est-throw > td:first-child { padding-left: 12mm !important; }
  body.qt-print .tbl.est tr.est-item > td:last-child,
  body.qt-print .tbl.est tr.est-throw > td:last-child { padding-right: 12mm !important; }
  body.qt-print .tbl.est .est-group-hd,
  body.qt-print .tbl.est .est-stat-wrap,
  body.qt-print .tbl.est .est-total,
  body.qt-print .tbl.est .est-feat-head,
  body.qt-print .tbl.est .est-feat-item { padding-left: 12mm !important; padding-right: 12mm !important; }
  /* 一条场景不跨页断开 */
  body.qt-print .tbl.est tr.est-feat { break-inside: avoid; page-break-inside: avoid; }
}

/* ==========================================================================
   追加：客户分享页「微信登录门」 + 系统配置「开关」项 + 客户访问记录
   ========================================================================== */
/* 未登录时先把报价数据挡住：整屏居中卡片，不放任何单据内容 */
.share-gate { min-height: 72vh; display: flex; align-items: center; justify-content: center; padding: 20px 0 60px; }
.gate-card { width: 100%; max-width: 420px; text-align: center; background: var(--panel);
  border: 1px solid var(--line); border-radius: 18px; padding: 34px 28px 30px; box-shadow: var(--shadow-lg); }
.gate-mark { width: 54px; height: 54px; margin: 0 auto 14px; border-radius: 15px;
  background: linear-gradient(135deg, var(--brand), var(--brand-2)); color: #fff;
  font-size: 24px; font-weight: 800; display: flex; align-items: center; justify-content: center; }
.gate-card h1 { margin: 0 0 6px; font-size: 18px; }
.gate-card .gate-sub { font-size: 13px; color: var(--text-2); margin: 0 0 16px; }
.gate-card .gate-tip { font-size: 12px; color: var(--text-3); line-height: 1.9; margin: 14px 0 0; }
.gate-card .gate-btn { width: 100%; padding: 11px 16px; font-size: 14px; justify-content: center; }
.gate-card .gate-err { min-height: 18px; margin-top: 10px; font-size: 12.5px; color: var(--red); }

/* 第 142 项：人事档案填写页的登录门（登录卡自带卡片样式，这里只做外层排版，别套两层边框） */
.hr-login { width: 100%; max-width: 420px; }
.hr-login h1 { margin: 0 0 8px; font-size: 18px; text-align: center; }
.hr-login .gate-tip { margin: 0 0 18px; font-size: 12.5px; color: var(--text-3); line-height: 1.9; text-align: center; }
/* 管理员打开员工链接时的提示条 */
.hr-admin-tip { margin: 0 0 12px; padding: 10px 13px; font-size: 12.5px; line-height: 1.8;
  color: var(--amber); background: var(--amber-soft); border: 1px solid #f3d9a6; border-radius: 10px; }

/* ==========================================================================
   第 143 项：面试档案（interview.html）
   固定链接、任何人可打开。手机端优先：单栏、大触控区。
   ========================================================================== */
.iv-page { max-width: 820px; }

/* ---- 登录门 ---- */
.iv-card { width: 100%; max-width: 430px; text-align: center; background: var(--panel);
  border: 1px solid var(--line); border-radius: 18px; padding: 30px 26px 22px; box-shadow: var(--shadow-lg); }
.iv-card h1 { margin: 0 0 6px; font-size: 19px; }
.iv-card .gate-tip { font-size: 12.5px; color: var(--text-3); line-height: 1.9; margin: 10px 0 16px; }
.iv-lab { display: block; margin: 12px 0 5px; font-size: 12.5px; color: var(--text-2); text-align: left; }
.iv-req { color: var(--red); font-style: normal; margin-left: 2px; }
.iv-inp { width: 100%; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px;
  font-size: 14px; font-family: inherit; color: var(--text); background: #fff; box-sizing: border-box; }
.iv-inp:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); }
.iv-inp:disabled { background: var(--panel-2); color: var(--text-2); }
.iv-code-row { display: flex; gap: 8px; align-items: stretch; }
.iv-code-row .iv-inp { flex: 1 1 auto; min-width: 0; }
.iv-code-row .btn { flex: 0 0 auto; white-space: nowrap; }
.iv-start { width: 100%; margin-top: 18px; padding: 11px 16px; font-size: 15px; justify-content: center; }
.iv-msg { min-height: 18px; margin-top: 10px; font-size: 12.5px; color: var(--text-3); line-height: 1.7; }
.iv-msg.err { color: var(--red); }
.iv-msg.ok { color: var(--green); }
.iv-fine { margin: 14px 0 0; font-size: 11.5px; color: var(--text-3); line-height: 1.8; }

/* ---- 表单 ---- */
.iv-wrap { padding: 4px 0 40px; }
.iv-hd { display: flex; align-items: flex-start; gap: 12px; flex-wrap: wrap; padding: 6px 0 10px; }
.iv-hd-l { flex: 1 1 auto; min-width: 0; }   /* 不加会被右侧姓名chip压到一字宽 → 标题换行 */
.iv-hd h1 { margin: 0; font-size: 22px; letter-spacing: -.3px; white-space: nowrap; }
.iv-hd-sub { margin-top: 4px; font-size: 12.5px; color: var(--text-3); }
.iv-who { margin-left: auto; flex: 0 0 auto; font-size: 12.5px; color: var(--text-2); display: flex; align-items: center; gap: 6px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 999px; padding: 5px 12px; }
.iv-who i { font-style: normal; color: var(--text-3); }

.iv-note { margin: 0 0 12px; padding: 11px 14px; font-size: 12.5px; line-height: 1.85; color: var(--text-2);
  background: var(--panel); border: 1px solid var(--line); border-radius: 11px; }
.iv-note.ok { color: var(--green); background: var(--green-soft); border-color: #cfe9dc; }
.iv-note.off { color: var(--text-2); background: var(--panel-2); }
.iv-note.warn { color: var(--amber); background: var(--amber-soft); border-color: #f3d9a6; }

.iv-prog { margin: 0 0 14px; padding: 13px 16px; background: var(--panel);
  border: 1px solid var(--line); border-radius: 12px; }
.iv-prog-hd { display: flex; align-items: center; justify-content: space-between; font-size: 13px; }
.iv-prog-hd span { color: var(--text-3); font-size: 12.5px; }
.iv-prog-bar { height: 8px; border-radius: 20px; background: var(--line-2); overflow: hidden; margin: 9px 0 0; }
.iv-prog-bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--brand), var(--brand-2));
  transition: width .2s; }

.iv-form { display: flex; flex-direction: column; gap: 14px; }
.iv-sec { padding: 16px 18px 18px; background: var(--panel); border: 1px solid var(--line); border-radius: 14px; }
.iv-sec-hd { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; padding-bottom: 10px;
  border-bottom: 1px solid var(--line-2); font-weight: 700; font-size: 14.5px; }
.iv-sec-bar { width: 3px; height: 15px; border-radius: 3px; background: var(--brand); flex: none; }
.iv-fld { margin-bottom: 16px; }
.iv-fld:last-child { margin-bottom: 0; }
.iv-fld-hd { font-size: 13.5px; color: var(--text); line-height: 1.7; margin-bottom: 6px; }
.iv-hint { font-size: 11.5px; color: var(--text-3); line-height: 1.7; margin: -2px 0 6px; }
.iv-ta { min-height: 88px; resize: vertical; line-height: 1.75; font-size: 13.5px; }

.iv-opts { display: flex; flex-wrap: wrap; gap: 8px; }
.iv-opt { display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px 8px 11px;
  border: 1px solid var(--line); border-radius: 999px; background: #fff; cursor: pointer;
  font-size: 13px; color: var(--text-2); font-family: inherit; line-height: 1.5; }
.iv-opt:hover { border-color: var(--brand); color: var(--brand); }
.iv-opt.on { border-color: var(--brand); background: var(--brand-soft); color: var(--brand); font-weight: 600; }
.iv-opt-dot { width: 15px; height: 15px; border-radius: 50%; border: 1.5px solid var(--line);
  flex: none; position: relative; background: #fff; }
.iv-opt.on .iv-opt-dot { border-color: var(--brand); background: var(--brand); }
.iv-opts.multi .iv-opt-dot { border-radius: 4px; }
.iv-opt.on .iv-opt-dot::after { content: ''; position: absolute; left: 4px; top: 1.5px; width: 4px; height: 7px;
  border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(42deg); }
.iv-opts:not(.multi) .iv-opt.on .iv-opt-dot::after { content: ''; position: absolute; inset: 3px;
  width: auto; height: auto; border: 0; border-radius: 50%; background: #fff; transform: none; }

.iv-bar { display: flex; gap: 10px; align-items: center; margin-top: 16px; flex-wrap: wrap; }
.iv-bar .btn-primary { padding: 11px 30px; font-size: 15px; }
.iv-bar .btn { padding: 11px 20px; font-size: 14px; }

@media (max-width: 720px) {
  .iv-card { padding: 24px 18px 18px; border-radius: 15px; }
  .iv-hd h1 { font-size: 19px; }
  .iv-who { margin-left: 0; }
  .iv-sec { padding: 14px 14px 16px; }
  .iv-inp { font-size: 16px; }              /* iOS 上不自动放大 */
  .iv-opt { padding: 9px 14px; font-size: 13.5px; }
  .iv-bar { position: sticky; bottom: 0; background: rgba(255, 255, 255, .97);
    padding: 10px 0; border-top: 1px solid var(--line); z-index: 5; }
  .iv-bar .btn { flex: 1 1 auto; justify-content: center; }
}

/* ---- 第 143 项：后台「招聘面试」 ---- */
/* .modal.wide-x 的 .modal-bd 是 0 内边距（给整块表格用的），这里自己补一圈 */
.ivo-doc { padding: 18px 20px 16px; }
.ivo-url { margin: 0 0 12px; padding: 9px 12px; font-size: 12px; color: var(--text-3);
  background: var(--panel-2); border: 1px dashed var(--line); border-radius: 10px; line-height: 1.8; }
.ivo-url code { color: var(--brand); font-size: 12px; word-break: break-all; }

.ivo-hd { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 0 0 12px;
  border-bottom: 1px solid var(--line-2); margin-bottom: 14px; }
.ivo-hd > div { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ivo-hd b { font-size: 15px; }
.ivo-hd span { font-size: 12.5px; color: var(--text-3); }

.ivo-sec { margin-bottom: 16px; }
.ivo-sec-hd { font-size: 12.5px; font-weight: 700; color: var(--brand); margin-bottom: 6px;
  padding-left: 8px; border-left: 3px solid var(--brand); line-height: 1.5; }
.ivo-qa { padding: 8px 0; border-bottom: 1px dashed var(--line-2); }
.ivo-qa:last-child { border-bottom: 0; }
.ivo-q { font-size: 12.5px; color: var(--text-2); line-height: 1.7; }
.ivo-q i { font-style: normal; color: var(--text-3); font-size: 11.5px; margin-left: 6px; }
.ivo-a { margin-top: 4px; font-size: 13.5px; color: var(--text); line-height: 1.85;
  white-space: pre-wrap; word-break: break-word; }
.ivo-empty { color: var(--text-3); font-style: italic; }

.ivo-eval { margin-top: 16px; padding: 14px; background: var(--panel-2);
  border: 1px solid var(--line); border-radius: 12px; }
.ivo-eval-hd { font-size: 13px; font-weight: 700; margin-bottom: 10px; }
.ivo-eval-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ivo-eval label, .ivo-note-lab { display: flex; flex-direction: column; gap: 5px;
  font-size: 12.5px; color: var(--text-2); }
.ivo-eval select, .ivo-eval input, .ivo-eval textarea,
.ivoq-grid input, .ivoq-grid select, .ivoq-lab input, .ivoq-lab textarea {
  padding: 8px 10px; border: 1px solid var(--line); border-radius: 9px; font-size: 13px;
  font-family: inherit; color: var(--text); background: #fff; box-sizing: border-box; width: 100%; }
.ivo-note-lab { margin-top: 12px; }
.ivo-tip { margin: 10px 0 0; font-size: 11.5px; color: var(--text-3); line-height: 1.7; }

.ivoq-grid { display: grid; grid-template-columns: 1.2fr 1fr .8fr; gap: 12px; }
.ivoq-grid label, .ivoq-lab { display: flex; flex-direction: column; gap: 5px;
  font-size: 12.5px; color: var(--text-2); }
.ivoq-lab { margin-top: 12px; }
.ivoq-flags { display: flex; gap: 16px; margin-top: 14px; flex-wrap: wrap; }
.ivoq-chk { display: inline-flex; align-items: center; gap: 7px; font-size: 13px;
  color: var(--text-2); cursor: pointer; }
.ivoq-chk input { width: 16px; height: 16px; accent-color: var(--brand); }
/* 分组列跨行合并：底色压一档，让「基本信息 / 工作经历」这些分组头一眼能分清 */
.cm-tbl td.ivoq-sec { vertical-align: top; background: var(--panel-2); }
.cm-tbl td.ivoq-sec b { font-size: 12.5px; color: var(--text-2); white-space: nowrap; }
/* 上移 / 下移：默认 .btn-sm 在窄格里会被压成一条竖线 */
.ivoq-move { min-width: 34px; padding-left: 6px; padding-right: 6px; }


/* 系统配置里的开关型配置项 */
.cfg-switch { display: inline-flex; align-items: center; gap: 9px; padding: 5px 12px 5px 6px;
  border: 1px solid var(--line); border-radius: 999px; background: #fff; cursor: pointer;
  font-size: 12.5px; color: var(--text-2); font-family: inherit; }
.cfg-switch i { width: 34px; height: 19px; border-radius: 999px; background: var(--line);
  position: relative; transition: background .16s; flex: none; }
.cfg-switch i::after { content: ''; position: absolute; top: 2px; left: 2px; width: 15px; height: 15px;
  border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.2); transition: left .16s; }
.cfg-switch.on { border-color: var(--brand); color: var(--brand); background: var(--brand-soft); }
.cfg-switch.on i { background: var(--brand); }
.cfg-switch.on i::after { left: 17px; }
.cfg-switch:disabled { opacity: .55; cursor: not-allowed; }

/* 客户访问页 / 项目详情里的下拉与明细 */
.mini-sel { padding: 6px 10px; border: 1px solid var(--line); border-radius: 9px;
  background: #fff; max-width: 220px; }
/* 第 188 项：工具条上的搜索输入框。
   ⚠️ 这个类第 185 项就开始用了，但一直没定义样式 —— 只有行内 width 生效，
      看着跟旁边的下拉不是一个东西。这里补齐，与 .mini-sel 对齐。 */
.mini-inp { padding: 6px 10px; border: 1px solid var(--line); border-radius: 9px;
  background: #fff; color: var(--text); font-size: 13px; line-height: 1.2; }

/* ==========================================================================
   追加：前台「项目看板」（总览）
   只作用于 #boardBody / .bd-*，不影响报价单、预估、配货单与导出排版。
   ========================================================================== */
.bd-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-bottom: 12px; font-size: 12.5px; color: var(--text-2); }
.bd-bar b { color: var(--text); font-weight: 700; }
.bd-bar .grow { flex: 1; }
.bd-bar .note { font-size: 12px; color: var(--text-3); }

.bd-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 14px; }
.bd-kpi { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 13px 16px; box-shadow: var(--shadow); }
.bd-kpi span { display: block; font-size: 12px; color: var(--text-3); }
.bd-kpi b { display: block; font-size: 22px; font-weight: 800; letter-spacing: -.3px; margin: 2px 0 1px;
  font-variant-numeric: tabular-nums; }
.bd-kpi i { font-style: normal; font-size: 11.5px; color: var(--text-3); }
.bd-kpi.ok b { color: var(--green); }
.bd-kpi.warn b { color: var(--amber); }

.bd-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.bd-panel { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow); overflow: hidden; }
.bd-panel.wide { grid-column: 1 / -1; }
.bd-hd { display: flex; align-items: center; gap: 8px; padding: 12px 16px; font-size: 13.5px; font-weight: 700;
  background: var(--panel-2); border-bottom: 1px solid var(--line-2); }
.bd-hd .note { font-weight: 400; font-size: 12px; color: var(--text-3); }
.bd-bd { padding: 6px 16px 14px; }

.bd-kv { display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  padding: 7px 0; border-bottom: 1px dashed var(--line-2); font-size: 13px; }
.bd-kv:last-child { border-bottom: none; }
.bd-kv span { color: var(--text-2); }
.bd-kv b { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.bd-kv b.ok { color: var(--green); }
.bd-kv b.warn { color: var(--amber); }

.bd-bar2 { height: 7px; border-radius: 6px; background: var(--line-2); overflow: hidden; margin: 5px 0 9px; }
.bd-bar2 i { display: block; height: 100%; border-radius: 6px;
  background: linear-gradient(90deg, var(--brand-2), var(--brand)); }

.bd-tip { margin-top: 9px; padding: 8px 11px; border-radius: var(--radius-sm); font-size: 12px;
  line-height: 1.75; background: var(--amber-soft); border: 1px solid #ffe3a3; color: #8a5a00; }

.bd-chips { display: flex; flex-wrap: wrap; gap: 8px; padding: 6px 0 10px; }
.bd-chip { padding: 4px 11px; border-radius: 999px; font-size: 12.5px;
  background: var(--panel-2); border: 1px solid var(--line-2); }
.bd-chip b { font-weight: 800; margin-left: 4px; }
.bd-chip.run b { color: var(--brand); }
.bd-chip.done b { color: var(--green); }
.bd-chip.none b { color: var(--text-3); }

.bd-follow { display: flex; flex-direction: column; gap: 8px; padding: 4px 0; }
.bd-fi { display: flex; align-items: flex-start; gap: 9px; padding: 9px 12px; border-radius: var(--radius-sm);
  font-size: 12.8px; line-height: 1.7; background: var(--panel-2); border: 1px solid var(--line-2); }
.bd-fi i { font-style: normal; }
.bd-fi b { font-weight: 700; }
.bd-fi.warn { background: var(--amber-soft); border-color: #ffe3a3; }
.bd-fi.hot { background: #fff0f0; border-color: #ffc9c9; }
.bd-empty { padding: 16px 0; text-align: center; font-size: 12.5px; color: var(--text-3); }

/* 系统配置里的「工作台菜单」小样 */
.pv-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.pv-tab-btn { padding: 5px 11px; border-radius: 9px; font-size: 12.5px;
  background: var(--panel-2); border: 1px solid var(--line-2); color: var(--text-2); }
.pv-tab-btn.on { background: var(--brand-soft); border-color: #ffd9c2; color: var(--brand); font-weight: 700; }

/* ==========================================================================
   追加：客户分享页 · 手机端自适应
   客户基本都用手机打开分享链接，这里把「宽表」改成一张张卡片、收紧留白、
   放大金额与联系电话。全部限定在 .share-page 内 —— 工作台（index.html）
   仍走桌面表格布局，导出 / 打印 / 合同不受任何影响。
   ========================================================================== */
html { -webkit-text-size-adjust: 100%; }   /* iOS 横屏时不要自作主张放大字号 */

@media (max-width: 720px) {
  /* ---------- 页面容器与抬头 ---------- */
  .share-page { padding: 12px 10px 44px; }
  .share-hero { border-radius: 14px; padding: 16px 15px; margin-bottom: 12px;
    box-shadow: 0 6px 18px rgba(255,105,0,.18); }
  .share-hero h1 { font-size: 17px; line-height: 1.45; }
  .share-hero .sub { font-size: 12px; }
  .share-hero .kv { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 9px 12px; margin-top: 13px; }
  .share-hero .kv div span { font-size: 11px; }
  .share-hero .kv div b { font-size: 13.5px; }

  /* 联系方式行：手机上做成整行可点的拨号 */
  .share-contact { padding: 10px 12px; font-size: 12.5px; margin-bottom: 11px; }
  .share-tel { color: var(--brand); font-weight: 700; text-decoration: none; white-space: nowrap; }

  /* ---------- 单据抬头（报价单 / 方案预估共用） ---------- */
  .share-page .quote-hd { padding: 15px 14px 11px; }
  .share-page .quote-hd h1 { font-size: 17px; line-height: 1.45; }
  .share-page .quote-hd .sub { font-size: 12px; }
  .share-page .quote-info { grid-template-columns: 1fr; gap: 5px; padding: 11px 14px; font-size: 12.5px; }
  .share-page .quote-info .line3 { grid-template-columns: 1fr; gap: 5px; }
  .share-page .quote-info .line3 .row .v { white-space: normal; }
  /* 工作台报价单 / 配货单：信息卡在手机上也收成一列 */
  .quote-hd { padding: 16px 14px 13px 20px; }
  .quote-hd h1 { font-size: 18px; line-height: 1.4; }
  .quote-hd .sub { font-size: 11.5px; padding: 2px 10px; }
  .quote-hd::before { top: 14px; bottom: 13px; }
  .quote-info { grid-template-columns: 1fr; gap: 7px; padding: 12px 14px 14px; }
  .quote-info .line3 { grid-template-columns: 1fr; gap: 7px; }
  .quote-info .line3 .row .v { white-space: normal; }
  .share-page .quote-foot { padding: 12px 14px 18px; font-size: 11px; }

  /* ========== 报价单：9~10 列的宽表 → 一行一件的小卡片 ========== */
  .share-page .quote-doc { overflow-x: visible; }   /* 不再横向滚动 */
  .share-page .tbl.quote,
  .share-page .tbl.quote tbody { display: block; }
  .share-page .tbl.quote tfoot { display: none; }   /* 每页页脚只服务于打印 / 导出，手机上不出现 */
  .share-page .tbl.quote thead { display: none; }   /* 列头改由每个数字前的小标签承担 */

  .share-page .tbl.quote tr { display: block; }
  .share-page .tbl.quote tr.q-item {
    position: relative; padding: 11px 13px; border-bottom: 1px solid var(--line-2);
  }
  .share-page .tbl.quote tr.q-item:hover { background: none; }
  .share-page .tbl.quote tr.q-item > td {
    display: inline; width: auto !important; padding: 0; border: none;
    font-size: 12px; color: var(--text-2); text-align: left;
  }
  .share-page .tbl.quote tr.q-item > td.q-idx { display: none; }   /* 顺序一目了然，省掉序号 */

  /* 产品图：钉在卡片左上角，名称自动让位 */
  .share-page .tbl.quote.with-img tr.q-item { min-height: 76px; padding-left: 77px; }
  .share-page .tbl.quote tr.q-item > td.q-img { position: absolute; left: 13px; top: 11px; width: 54px; }
  .share-page .tbl.quote tr.q-item > td.q-img .qimg { width: 54px; height: 54px; }

  /* 第一行：名称（左） + 金额（右，钉在卡片右上角） */
  .share-page .tbl.quote tr.q-item > td.q-name {
    display: block; padding-right: 94px; font-size: 14px; font-weight: 600;
    color: var(--text); line-height: 1.5;
  }
  .share-page .tbl.quote tr.q-item > td.q-amount {
    position: absolute; right: 13px; top: 11px; max-width: 92px;
    font-size: 15px; font-weight: 700; color: var(--text); text-align: right;
  }

  /* 第二行起：类型 / 单位 / 数量 / 官网价 / 直供价 / 立省 —— 小标签，自动换行 */
  .share-page .tbl.quote tr.q-item > td.q-type { display: inline-block; margin: 5px 6px 0 0; }
  .share-page .tbl.quote tr.q-item > td.q-unit,
  .share-page .tbl.quote tr.q-item > td.q-qty,
  .share-page .tbl.quote tr.q-item > td.q-official,
  .share-page .tbl.quote tr.q-item > td.q-direct,
  .share-page .tbl.quote tr.q-item > td.q-save {
    display: inline-block; margin: 5px 6px 0 0; padding: 1px 7px; border-radius: 6px;
    background: var(--panel-2); border: 1px solid var(--line-2);
    font-size: 11.5px; color: var(--text-3);
  }
  .share-page .tbl.quote tr.q-item > td[data-l]::before { content: attr(data-l); margin-right: 3px; }
  .share-page .tbl.quote tr.q-item > td.q-qty::before { content: '×'; margin-right: 0; }
  .share-page .tbl.quote tr.q-item > td.q-save { background: var(--green-soft); border-color: transparent; color: var(--green); }

  /* 分组标题 / 分类小计 / 合计 */
  .share-page .tbl.quote tr.cat-row > td { display: block; padding: 9px 13px; font-size: 12.5px; }
  .share-page .tbl.quote tr.q-subrow { display: block; padding: 8px 13px; background: var(--panel-2); }
  .share-page .tbl.quote tr.q-subrow > td { display: inline; width: auto !important; padding: 0 0 0 10px;
    border: none; font-size: 12.5px; text-align: right; }
  .share-page .tbl.quote tr:not(.q-subrow):not(.qtotal-row) > td:first-child { padding-left: 13px; }
  .share-page .tbl.quote tr.qtotal-row > td { display: block; padding: 0; border: none; }
  .share-page .tbl.quote .quote-total {
    flex-direction: column; align-items: flex-end; gap: 5px; padding: 12px 13px; font-size: 13px;
  }
  .share-page .tbl.quote .quote-total .big { font-size: 20px; }

  /* ========== 方案费用预估：5 列明细 → 一张张卡片 ========== */
  .share-page .tbl.est,
  .share-page .tbl.est tbody { display: block; }
  .share-page .tbl.est tfoot { display: none; }
  .share-page .tbl.est tr { display: block; }
  .share-page .tbl.est tr.est-throw { display: none; }   /* 列头由下面的 data-l 小标签承担 */

  .share-page .tbl.est tr.est-item { position: relative; padding: 11px 13px; border-bottom: 1px solid var(--line-2); }
  .share-page .tbl.est tr.est-item > td {
    display: block; width: auto !important; padding: 0; border: none; text-align: left;
  }
  .share-page .tbl.est tr.est-item > td.est-name { padding-right: 94px; font-size: 14px; font-weight: 600; line-height: 1.5; }
  .share-page .tbl.est tr.est-item > td.est-price { position: absolute; right: 13px; top: 11px;
    max-width: 92px; font-size: 15px; text-align: right; }
  .share-page .tbl.est tr.est-item > td.est-products,
  .share-page .tbl.est tr.est-item > td.est-desc { margin-top: 5px; font-size: 12.5px; line-height: 1.75; color: var(--text-2); }
  /* 第 138 项：手机端「配置建议」同样保持加粗深色，与桌面端一致 */
  .share-page .tbl.est tr.est-item > td.est-note { margin-top: 5px; font-size: 13.5px; line-height: 1.75;
    color: var(--text); font-weight: 600; }
  .share-page .tbl.est tr.est-item > td[data-l]::before { content: attr(data-l) ' '; color: var(--text-3); }

  /* 顶部统计卡：一行两张 */
  .share-page .tbl.est tr.est-stat-row > td { display: block; padding: 0; border: none; }
  .share-page .tbl.est .est-stat-wrap { padding: 12px; }
  .share-page .tbl.est .est-stat-wrap .stat-row { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 8px; }
  .share-page .tbl.est .stat { padding: 10px 12px; }
  .share-page .tbl.est .stat span { font-size: 11.5px; }
  .share-page .tbl.est .stat b { font-size: 17px; }

  /* 分组标题行 / 合计行 / 功能介绍 */
  .share-page .tbl.est tr.est-ghead > td { display: block; padding: 0; border: none; }
  .share-page .tbl.est .est-group-hd { padding: 9px 13px; font-size: 12.5px; gap: 6px; }
  .share-page .tbl.est tr.est-total-row > td { display: block; padding: 0; border: none; }
  .share-page .tbl.est .est-total { padding: 12px 13px; }
  .share-page .tbl.est .est-total .lbl { font-size: 13px; }
  .share-page .tbl.est .est-total .val { font-size: 21px; }
  .share-page .tbl.est tr.est-feat-hd > td,
  .share-page .tbl.est tr.est-feat > td { display: block; padding: 0; border: none; }
  .share-page .tbl.est .est-feat-head { flex-wrap: wrap; gap: 4px 10px; padding: 10px 13px; }
  .share-page .tbl.est .est-feat-head h3 { font-size: 14px; }
  .share-page .tbl.est .est-feat-head .note { font-size: 11.5px; text-align: left; }
  .share-page .tbl.est .est-feat-item { flex-wrap: wrap; gap: 3px 8px; padding: 8px 13px; }
  .share-page .tbl.est .est-feat-name { flex: 1 1 auto; font-size: 13px; }
  .share-page .tbl.est .est-feat-desc { flex: 1 1 100%; font-size: 12.5px; }

  /* ---------- 微信登录门 ---------- */
  .share-page .share-gate { min-height: 62vh; padding: 10px 0 30px; }
  .share-page .gate-card { padding: 22px 18px 20px; border-radius: 15px; }
  .share-page .gate-mark { width: 48px; height: 48px; font-size: 21px; border-radius: 13px; }
  .share-page .gate-card h1 { font-size: 17px; }
  .share-page .gate-card .gate-sub { font-size: 12.5px; }
}

/* 小屏（iPhone SE / 窄屏安卓）再收一档 */
@media (max-width: 380px) {
  .share-page { padding: 10px 8px 40px; }
  .share-hero { padding: 14px 13px; }
  .share-hero h1 { font-size: 16px; }
  .share-page .tbl.quote tr.q-item > td.q-name { font-size: 13.5px; padding-right: 86px; }
  .share-page .tbl.quote tr.q-item > td.q-amount { font-size: 14.5px; max-width: 84px; }
  .share-page .tbl.est .est-stat-wrap .stat-row { grid-template-columns: 1fr; }
}

/* 项目看板：窄屏（平板竖屏 / 手机）改为单列，指标卡两列 */
@media (max-width: 900px) {
  .bd-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bd-grid { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
  .bd-kpis { grid-template-columns: 1fr; }
  .bd-kpi b { font-size: 20px; }
}

/* ---------- 项目管理：筛选条（弹窗 .wide-x 的 body 无内边距，这里自带） ---------- */
.pm-filter { display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
  padding: 0 16px 12px; }
.pm-filter input[type="search"] { flex: 1 1 210px; min-width: 170px; width: auto;
  padding: 7px 11px; border: 1px solid var(--line); border-radius: 9px;
  background: var(--panel-2); outline: none; transition: all .16s; }
.pm-filter input[type="search"]:focus { border-color: var(--brand); background: #fff; box-shadow: 0 0 0 3px var(--brand-soft); }
.pm-filter select { width: auto; padding: 7px 9px; border: 1px solid var(--line); border-radius: 9px;
  background: var(--panel-2); font-size: 12.5px; color: var(--text); }
.pm-filter .hint { margin-left: auto; white-space: nowrap; }
@media (max-width: 720px) {
  .pm-filter { padding: 0 12px 10px; }
  .pm-filter input[type="search"] { flex: 1 1 100%; }
  .pm-filter .hint { margin-left: 0; }
}

/* 项目管理：两行时间列（上行日期、下行相对时间/时分），窄列不换行不撑破表格 */
.pm-tcol { line-height: 1.35; white-space: nowrap; }
.pm-tcol .t1 { display: block; font-size: 12px; color: var(--text-2);
  font-variant-numeric: tabular-nums; }
.pm-tcol .t2 { display: block; font-size: 11px; color: var(--text-3); }

/* ---------- 「开始配置」引导：新建客户信息弹窗 ---------- */
.nc-tip { font-size: 12.5px; color: var(--text-2); background: var(--brand-soft);
  border: 1px solid #ffe1c9; border-radius: 9px; padding: 9px 12px; margin-bottom: 4px; }
.nc-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; }
.nc-alt { margin-top: 16px; padding-top: 12px; border-top: 1px dashed var(--line);
  font-size: 12.5px; color: var(--text-2); display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
/* 左下角的「历史清单导入」：靠左站，右边仍是 先随便看看 / 开始配置
   （.ft-left 给「我的项目」弹窗左下角那个同名入口用） */
.nc-ft-left, .ft-left { margin-right: auto; }
.modal.nc-modal .modal-ft { flex-wrap: wrap; row-gap: 8px; }
@media (max-width: 520px) {
  .nc-row2 { grid-template-columns: 1fr; }
  .modal.nc-modal .nc-ft-left { width: 100%; margin-right: 0; }
}

/* ---------- 第 103 项：新建客户时的「疑似重复」确认层 ----------
   注意：`.modal-bd` 里的 p 等元素有全局重置，这里的选择器都带 .dup- 前缀
   （单类前缀会被 `.modal-bd label` 之类压掉，这是老坑）。 */
.dup-list { margin-top: 10px; max-height: 320px; overflow-y: auto;
  border: 1px solid var(--line); border-radius: 10px; background: var(--panel-2); }
.dup-item { padding: 9px 12px; border-bottom: 1px solid var(--line); }
.dup-item:last-child { border-bottom: none; }
.dup-hd { display: flex; align-items: center; gap: 8px; font-size: 13px; flex-wrap: wrap; }
.dup-hd .grow { flex: 1; }
.dup-why { flex: none; font-size: 11.5px; color: #b4530a; background: #fff2e3;
  border: 1px solid #ffdcb8; border-radius: 999px; padding: 1px 9px; white-space: nowrap; }
.dup-tag { font-size: 11px; color: var(--text-3); background: var(--panel);
  border: 1px solid var(--line); border-radius: 999px; padding: 1px 8px; }
/* 第 124 项：客户池里把「商城来的客户」和「还没派人的客户」标出来。
   只换字色与底色、不换边框色 —— 边框沿用 --line，主题切换时不会跳出配色。 */
.dup-tag.mall { color: var(--blue); background: var(--blue-soft); }
.dup-tag.pending { color: var(--amber); background: var(--amber-soft); }
.dup-sub { margin-top: 4px; font-size: 12px; color: var(--text-3);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dup-more { margin: 8px 0 0; font-size: 12px; color: var(--text-3); }
.dup-hint { margin: 12px 0 0; padding-top: 10px; border-top: 1px dashed var(--line);
  font-size: 12.5px; color: var(--text-2); }
.modal.dup-modal { max-width: 620px; }
.submodal .modal.dup-modal, .inv-layer .modal.dup-modal { max-width: 620px; }
@media (max-width: 520px) {
  .dup-list { max-height: 42vh; }
  .dup-why { white-space: normal; }
}

/* ---------- 单据框线（方案费用预估 / 报价单 / 配货单）----------
   原先用 1px #e6e9ef / #eef1f5，屏幕上几乎看不清；统一加深加粗，
   外框 2px、表头底线与分组行 1.5px、明细行 1.5px；打印 / 导出同源生效。 */
:root { --doc-line: #c6cfdd; --doc-line-hd: #8a97ab; }
.tbl.quote, .tbl.est { border: 2px solid var(--doc-line-hd); }
.tbl.quote thead th, .tbl.est thead th { border-bottom: 1.5px solid var(--doc-line-hd); }
.tbl.quote tbody tr, .tbl.est tbody tr { border-bottom: 1.5px solid var(--doc-line); }
/* 分组标题行改用浅色分隔线，与浅底更协调（原来 1.5px 深线太抢眼） */
tr.cat-row > td { border-top: 1px solid rgba(0, 0, 0, .07); border-bottom: 1px solid rgba(0, 0, 0, .07); }

/* 分享页手机端：单据转卡片式，上面加的表格框线不要带进来 */
@media (max-width: 720px) {
  .share-page .tbl.quote, .share-page .tbl.est { border: none; }
  .share-page .tbl.quote tbody tr, .share-page .tbl.est tbody tr { border-bottom: none; }
}

/* ==========================================================================
   预估毛利（第 31 项）—— 产品库「进货价」 + 项目管理毛利列
   ========================================================================== */
/* 产品库：进货价输入框用浅色底，和官网价/直供价区分开 */
.price-edit.cost-edit { color: var(--text-2); font-weight: 500; background: #fbfaf7; }
.price-edit.cost-edit:hover { background: var(--panel-2); }
.price-edit.cost-edit:focus { background: #fff; color: var(--text); font-weight: 600; }

/* 产品弹窗：三列价格 + 说明 */
.ep-row3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.ep-hint { font-size: 11.5px; color: var(--text-3); line-height: 1.6; margin: 8px 0 0; }
@media (max-width: 720px) { .ep-row3 { grid-template-columns: 1fr; } }

/* 项目管理：预估毛利列 + 统计卡副标题 */
.pf-g { color: #1f8a5b; font-variant-numeric: tabular-nums; }
.pf-none { display: inline-block; font-size: 12px; color: var(--text-3); background: var(--line-2);
  border-radius: 6px; padding: 1px 7px; }
.pf-warn { color: var(--amber); }
.pf-sub { font-size: 11px; color: var(--text-3); line-height: 1.5; margin-top: 2px;
  font-variant-numeric: tabular-nums; }
.stat-sub { display: block; font-style: normal; font-size: 11.5px; color: var(--text-3);
  margin-top: 3px; line-height: 1.45; }
/* 产品库价格输入框：列宽压缩后同步收窄，避免把表格撑出容器 */
#prodBody .price-edit { width: 62px; padding: 2px 4px; }
/* 产品库「品牌」列：由自由输入改成下拉（选项来自 进销存 → 基础设置 → 品牌管理） */
.brand-sel { width: 100%; min-width: 88px; max-width: 118px; font-size: 12px; padding: 3px 4px;
  border: 1px dashed transparent; border-radius: 6px; background: transparent;
  color: var(--text-2); cursor: pointer; }
.brand-sel:hover { border-color: var(--line); background: var(--panel-2); }
.brand-sel:focus { outline: none; border-color: var(--brand); background: #fff; color: var(--text); }
/* 产品库是 16 列的宽表：给它自己的横滑容器，列宽按声明的宽度走，
   不再被容器挤到只剩几个字（表头 sticky 例外见上方规则） */
.prod-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
/* 第 163 项：产品名称下面那枚「智能 / 非智能 / 其他」下拉。
   做成小标签的样子（不是表单控件），否则 17 列里它会比产品名还抢眼；
   三种取值的底色分开，扫一眼就能看出这一列标了什么。 */
.sk-sel { display: block; width: 92px; margin-top: 4px; height: 22px; padding: 0 2px;
  font-size: 11px; line-height: 20px; border-radius: 5px; cursor: pointer;
  border: 1px solid var(--line); background: #fff; color: var(--text-2); }
.sk-sel:focus { outline: none; border-color: var(--brand); }
.sk-sel.sk-smart { border-color: #bcd7ff; background: #eef5ff; color: #1f63c9; }
.sk-sel.sk-nonsmart { border-color: #dfe3ea; background: #f5f6f8; color: #6b7684; }
.sk-sel.sk-other { border-color: var(--line); background: #fff; color: var(--text-3); }
/* 第 164 项：第九项「技术人工费用」的产品不参与分类，这里只摆一枚不可点的标签 */
.sk-na { display: inline-block; margin-top: 4px; padding: 1px 7px; border-radius: 5px;
  font-size: 11px; line-height: 18px; border: 1px dashed var(--line);
  background: #fafbfc; color: var(--text-3); }
/* --pact-w = 操作列实测宽度，由 syncProdStickyWidth() 写回（列宽随屏宽浮动，不能写死） */
/* 第 89 项：列宽从 1500 压到 1356，并加 table-layout:fixed —— 1600px 屏不再横滑 */
#prodBody .tbl { min-width: 1392px; table-layout: fixed; --pact-w: 190px; }
/* 16 列挤在一起，左右内边距从 12 收到 8：每列多出 8px 内容区 */
#prodBody .tbl th, #prodBody .tbl td { padding: 8px 8px; }

/* 第 77 项：产品库铺满可用宽度 —— 不套 .wrap 的 1180px 阅读宽度。
   这样「更多功能」侧栏收起 / 展开时，右边会跟着一起变宽变窄（之前收起后纹丝不动）。 */
.wrap.wrap-wide { max-width: none; }
/* 面板头在窄屏要能折行 —— 否则「全部分类 + 搜索 + 新增产品」会把页面撑宽 233px（既有问题） */
#tab-products .panel-hd { flex-wrap: wrap; row-gap: 8px; }

/* 第 77 项：「状态 + 操作」两列粘在右侧常驻 —— 表格横向滚动时
   「编辑 / 停用 / ↑ / ↓」始终看得到、点得到，不用拖到底才找得到。 */
#prodBody .tbl .p-col-stat,
#prodBody .tbl .p-col-act { position: sticky; z-index: 3; background: var(--panel); }
#prodBody .tbl .p-col-stat { right: calc(var(--pact-w) - 1px); }
#prodBody .tbl .p-col-act { right: 0; white-space: nowrap; }
/* 悬浮列左侧垫一块实色遮罩 + 渐隐阴影：它盖住的那一列本来会露出半截字（很脏） */
#prodBody .tbl .p-col-stat::before {
  content: ''; position: absolute; top: 0; bottom: 0; left: -16px; width: 16px;
  background: inherit; pointer-events: none;
  box-shadow: -10px 0 10px -10px rgba(16, 32, 64, .32);
}
/* 四个按钮拉开一点，别挤成一坨 */
#prodBody .tbl .p-col-act .btn + .btn { margin-left: 4px; }
/* 表头那两格本来就 sticky top，这里只补吸附方向与层级（要压过表头本身的 20） */
#prodBody .tbl thead .p-col-stat,
#prodBody .tbl thead .p-col-act { background: #fbfcfe; z-index: 25; }
#prodBody .tbl tbody tr:hover .p-col-stat,
#prodBody .tbl tbody tr:hover .p-col-act { background: #fcfdff; }
#prodBody .tbl tbody tr.dim .p-col-stat,
#prodBody .tbl tbody tr.dim .p-col-act { background: var(--panel); }
/* 编辑 / 新增产品弹窗里的品牌下拉 + 「＋ 新增品牌…」展开行 */
#epBrand, #npBrand { width: 100%; }
#epNewBrandRow, #npNewBrandRow { margin-top: 8px; padding: 8px 10px; border-radius: 10px;
  background: var(--panel-2); border: 1px dashed var(--line); }

/* ==========================================================================
   项目编号（第 32 项）—— 单据抬头右上角 + 项目列表 / 详情 + 合同角标
   ========================================================================== */
/* 单据抬头：标题块（左）+ 项目编号角标（右）。没有编号时角标不渲染，布局不受影响 */
.quote-hd { display: flex; align-items: flex-start; gap: 14px; }
.quote-hd .hd-main { flex: 1; min-width: 0; }
.doc-no { flex: none; display: inline-flex; align-items: baseline; gap: 6px;
  padding: 5px 10px; border-radius: 8px; white-space: nowrap;
  background: var(--panel-2); border: 1px solid var(--line);
  font-size: 12px; color: var(--text-3); font-variant-numeric: tabular-nums; }
.doc-no .k { font-size: 11px; }
.doc-no b { font-size: 14px; letter-spacing: .6px; color: var(--text); }

/* 打印 / 导出：去掉底色，编号保持深色清晰 */
body.qt-print .doc-no { background: #fff !important; border-color: var(--doc-line) !important; color: var(--text-2) !important; }
body.qt-print .doc-no b { color: var(--text) !important; }

/* 项目列表 / 详情里的编号标签 */
.pno { display: inline-block; padding: 2px 7px; border-radius: 6px; white-space: nowrap;
  background: var(--brand-soft); color: var(--brand); font-weight: 600; font-size: 12px;
  letter-spacing: .4px; font-variant-numeric: tabular-nums; }
b.pno { font-size: 13px; }
.pno.none { background: var(--panel-2); color: var(--text-3); font-weight: 400; }

/* 合同文档顶部的编号角标（右对齐，随文档一起打印 / 导出） */
.ct-docno { display: flex; justify-content: flex-end; align-items: baseline; gap: 6px;
  font-size: 11.5px; color: var(--text-3); margin-bottom: 8px; font-variant-numeric: tabular-nums; }
.ct-docno b { font-size: 13px; color: var(--text); letter-spacing: .6px; }

/* 客户分享页：抬头标题块 + 编号（白字，压在彩色 hero 上） */
.share-hero .hero-hd { display: flex; align-items: flex-start; gap: 12px; }
.share-hero .hero-hd-l { flex: 1; min-width: 0; }
.share-hero .doc-no { background: rgba(255, 255, 255, .18); border-color: rgba(255, 255, 255, .34); color: rgba(255, 255, 255, .9); }
.share-hero .doc-no b { color: #fff; }
body.qt-print .share-hero .doc-no { background: #fff !important; border-color: var(--doc-line) !important; color: var(--text-2) !important; }
body.qt-print .share-hero .doc-no b { color: var(--text) !important; }

/* 手机端：编号角标换行显示，不挤压标题 */
@media (max-width: 720px) {
  .share-page .share-hero .hero-hd { flex-wrap: wrap; }
  .share-page .share-hero .doc-no { order: 3; }
  .quote-hd { gap: 10px; }
  .doc-no { padding: 4px 8px; }
  .doc-no b { font-size: 13px; }
}

/* 后台「预估模板」：已改过的槽位打标 */
.vchip.static.on { background: var(--brand-soft); border-color: #ffd9bf; color: var(--brand); font-weight: 600; }

/* ==========================================================================
   增项配置单（第 33 项）—— 客户信息同步条 + 列表分组 + 详情增项区块
   ========================================================================== */
/* 配置页顶部：增项单的「跟随主方案自动同步」说明条 */
.addon-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  font-size: 12.5px; color: var(--text-2); line-height: 1.7;
  background: var(--brand-soft); border: 1px solid #ffe1c9; border-radius: 10px;
  padding: 8px 12px; margin-bottom: 10px; }
.addon-bar b { color: var(--text); }
.addon-bar .pno { margin: 0 2px; }

/* 第 72 项：竣工提示条（前台打开已竣工单子时的橙色横幅）+ 项目详情里的锁定小标 */
.done-bar { display: block; font-size: 12.5px; color: #8a4a00; line-height: 1.75;
  background: #fff1e0; border: 1px solid #ffcf9b; border-left: 4px solid var(--brand);
  border-radius: 10px; padding: 9px 13px; margin-bottom: 10px; }
.done-bar b { color: #b4530a; }
.done-bar .done-note { margin-top: 4px; padding-top: 4px; border-top: 1px dashed #ffcf9b; color: #96601f; }
.done-lock { margin-left: 6px; font-size: 10.5px; padding: 1px 6px; border-radius: 5px;
  background: var(--brand); color: #fff; }
.proj-row-done { background: #fff1e0 !important; }

/* 客户信息里被锁定的字段：一眼看出不可改 */
.projbar input:disabled, .projbar select:disabled { background: var(--panel-2); color: var(--text-2);
  cursor: not-allowed; border-style: dashed; }

/* 项目管理列表：增项单行（浅底 + 左侧色条），与主方案排在一起 */
.pm-tip { font-size: 12px; color: var(--text-3); line-height: 1.7; padding: 0 16px 10px; }
.pm-tip b { color: var(--text-2); }
.pm-addon > td { background: #fcfcfd; }
.pm-addon > td:first-child { box-shadow: inset 3px 0 0 var(--brand-soft); }
.pm-addon-mark { color: var(--brand); font-weight: 700; margin-right: 4px; }
.pm-same { font-size: 12px; color: var(--text-3); }
.pm-sub-pay { font-size: 11px; color: var(--brand); margin-top: 2px; font-variant-numeric: tabular-nums; }

/* 「＋ 增项」小按钮 + 「增项 N」可点击标签 */
.btn-xs { padding: 1px 7px; font-size: 11px; line-height: 1.7; border-radius: 6px; }
.addon-add { margin-left: 6px; vertical-align: middle; }
.addon-tag { margin-left: 6px; vertical-align: middle; padding: 1px 8px; font-size: 11px;
  border-radius: 20px; cursor: pointer; border: 1px solid #ffd9bf;
  background: var(--brand-soft); color: var(--brand); font-weight: 600; }
.addon-tag:hover { background: #ffe9d8; }
.addon-tag.folded { background: var(--panel-2); border-color: var(--line); color: var(--text-2); }

/* 项目详情：增项区块 */
.pm-sec-addon .pm-rel-card { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px;
  background: var(--panel-2); border: 1px solid var(--line); border-radius: 10px;
  padding: 10px 14px; font-size: 12.5px; }
.pm-rel-card .k { font-size: 11.5px; color: var(--text-3); margin-right: 6px; }
.pm-rel-card .grow { flex: 1; }
.pm-rel-tag { font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 6px;
  background: var(--brand-soft); color: var(--brand); }
.pm-rel-tip { font-size: 11.5px; color: var(--text-3); line-height: 1.7; margin: 8px 0 0; }
.pm-sec-addon .pm-addrow { margin-top: 10px; }

@media (max-width: 720px) {
  .pm-tip { padding: 0 12px 10px; }
  .pm-addon > td:first-child { box-shadow: none; }
}

/* ==========================================================================
   安装派单系统（第 34 项）—— 手机优先的工作台
   ========================================================================== */
body.dpage { background: #f6f7fb; }

.btn-danger { border-color: #f6d3d1; background: #fff; color: var(--red); }
.btn-danger:hover { background: #fdecea; border-color: #f3b9b5; color: var(--red); box-shadow: none; }

/* 顶栏 */
.dtop { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 14px;
  padding: 12px 18px; background: #fff; border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 60; }
.dtop-l { display: flex; align-items: center; gap: 10px; min-width: 0; }
.dtop-l .brand-text b { display: block; font-size: 14px; }
.dtop-l .brand-text span { display: block; font-size: 11.5px; color: var(--text-3);
  max-width: 240px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dtop-r { display: flex; align-items: center; gap: 8px; margin-left: auto; flex-wrap: wrap; }

.dseg { display: flex; gap: 4px; padding: 8px 18px 0; background: #fff; border-bottom: 1px solid var(--line-2); }
.dseg button { flex: 1; max-width: 220px; padding: 8px 12px; font-size: 13px; border: none; background: transparent;
  color: var(--text-2); border-bottom: 2px solid transparent; cursor: pointer; font-weight: 500; }
.dseg button.on { color: var(--brand); border-bottom-color: var(--brand); font-weight: 700; }

.dwrap { max-width: 1180px; margin: 0 auto; padding: 16px 18px 96px; }

/* 统计卡 */
.dstat { display: grid; grid-template-columns: repeat(auto-fit, minmax(112px, 1fr)); gap: 10px; margin-bottom: 14px; }
.dstat-i { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; }
.dstat-i span { display: block; font-size: 11.5px; color: var(--text-3); }
.dstat-i b { display: block; font-size: 20px; font-weight: 800; font-variant-numeric: tabular-nums; margin-top: 2px; }
.dstat-i.warn b { color: var(--amber); } .dstat-i.brand b { color: var(--brand); }
.dstat-i.err b { color: var(--red); } .dstat-i.ok b { color: var(--green); }

/* 工程师的两个 tab */
.dtabs { display: flex; gap: 8px; margin-bottom: 10px; }
.dtabs button { flex: 1; padding: 11px 8px; border-radius: 12px; border: 1px solid var(--line); background: #fff;
  font-size: 13.5px; color: var(--text-2); cursor: pointer; font-weight: 600; }
.dtabs button b { color: var(--brand); margin-left: 4px; }
.dtabs button.on { background: var(--brand-soft); border-color: #ffd9bf; color: var(--brand); }

/* 筛选 */
.dfilter { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 10px; }
.dfilter .search { flex: 1; min-width: 200px; }
.dfilter select, .dfields input, .dfields select, .dsec textarea, .modal-bd textarea {
  padding: 8px 11px; border: 1px solid var(--line); border-radius: 9px; background: #fff;
  font-size: 13px; font-family: inherit; color: var(--text); }
.dfilter select:focus, .dfields input:focus, .dfields select:focus, .dsec textarea:focus {
  outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); }
.dchips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.dchip { padding: 5px 12px; border-radius: 20px; border: 1px solid var(--line); background: #fff;
  font-size: 12.5px; color: var(--text-2); cursor: pointer; }
.dchip.on { background: var(--brand-soft); border-color: #ffd9bf; color: var(--brand); font-weight: 700; }
.dcount { font-size: 12.5px; color: var(--text-2); margin-bottom: 10px; }
.dmut { color: var(--text-3); }

/* 卡片列表 */
.dlist { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 12px; }
.dcard { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 13px 15px;
  box-shadow: var(--shadow); cursor: pointer; transition: box-shadow .14s, transform .14s; }
.dcard:hover { box-shadow: var(--shadow-lg); transform: translateY(-1px); }
.dcard.overdue { border-left: 4px solid var(--red); }
.dcard.rejected { border-left: 4px solid var(--red); background: #fffafa; }
.dcard-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.dno { font-size: 12px; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--text-2);
  background: var(--panel-2); border: 1px solid var(--line-2); border-radius: 6px; padding: 2px 7px; }
.dbadge { font-size: 11px; font-weight: 700; padding: 2px 9px; border-radius: 20px; }
.dbadge.tone-warn { background: var(--amber-soft); color: var(--amber); }
.dbadge.tone-info { background: var(--blue-soft); color: var(--blue); }
.dbadge.tone-brand { background: var(--brand-soft); color: var(--brand); }
.dbadge.tone-ok { background: var(--green-soft); color: var(--green); }
.dbadge.tone-err { background: #fdecea; color: var(--red); }
.dbadge.tone-mute { background: var(--line-2); color: var(--text-3); }
.dcard-main b { font-size: 14.5px; }
.dcard-main .dmut { font-size: 12px; line-height: 1.7; }
.dcard-meta { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 12.5px; color: var(--text-2); margin-top: 8px; }
.dplan { font-variant-numeric: tabular-nums; }
.dplan.due { color: var(--amber); font-weight: 600; }
.dplan.overdue { color: var(--red); font-weight: 600; }
.dplan b.over { color: var(--red); }
.dplan b.today { color: var(--amber); }
.dcard-ops { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.dreject { margin-top: 8px; font-size: 12.5px; color: var(--red); background: #fdecea;
  border-radius: 8px; padding: 6px 10px; line-height: 1.6; }

/* 详情 */
.dhead { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 12px; margin-bottom: 14px; }
.dhead-l { min-width: 0; flex: 1; }
.dhead-l h2 { margin: 8px 0 4px; font-size: 19px; }
.dhead-l .dmut { font-size: 12.5px; line-height: 1.7; }
.dhead-r { display: flex; gap: 8px; flex-wrap: wrap; }

.dalert { background: #fdecea; border: 1px solid #f6c9c5; border-radius: 12px; padding: 11px 14px;
  margin-bottom: 14px; color: var(--red); font-size: 13px; line-height: 1.8; }
.dalert.soft { background: #fff8f7; color: var(--text-2); border-color: #f0dcd9; }
.dalert b { display: block; margin-bottom: 2px; }

.dgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); gap: 12px; }
.dsec { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 13px 15px; }
.dsec h3 { margin: 0 0 10px; font-size: 13.5px; font-weight: 700; }
.dsec textarea { width: 100%; resize: vertical; line-height: 1.8; }
.dsec-ops { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.drows { display: grid; gap: 8px; }
.drows > div { display: flex; gap: 10px; font-size: 13px; align-items: baseline; }
.drows > div > span { flex: none; width: 76px; color: var(--text-3); font-size: 12.5px; }
.drows > div > b { font-weight: 600; min-width: 0; word-break: break-all; }
.drows .drow-btn { padding-top: 2px; }
.dnote { font-size: 13px; line-height: 1.9; color: var(--text-2); white-space: pre-wrap; word-break: break-word; }
.dpick { overflow-x: auto; margin: 0 -4px; }

/* 附件 */
.dmedia { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.dmedia-i { margin: 0; width: 116px; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: var(--panel-2); }
.dmedia-i img, .dmedia-i video { width: 100%; height: 84px; object-fit: cover; display: block; background: #eef1f5; }
.dmedia-ph { height: 84px; display: grid; place-items: center; font-size: 22px; }
.dmedia-i figcaption { font-size: 11px; color: var(--text-3); padding: 4px 6px; line-height: 1.4;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dmedia-i figcaption i { display: block; font-style: normal; opacity: .8; }
.dmedia.compact .dmedia-i { width: 96px; }
.dmedia.compact .dmedia-i img, .dmedia.compact .dmedia-i video, .dmedia.compact .dmedia-ph { height: 68px; }

/* 附件 / 凭证：页内预览弹层（替代异步 window.open，移动端 / 微信内不再被拦截） */
.modal.mprev-modal { max-width: 760px; }
.mprev { display: flex; flex-direction: column; gap: 10px; max-height: 68vh; overflow: auto; }
.mprev-tip { font-size: 12.5px; color: var(--text-2); background: var(--panel-2); border-radius: 8px; padding: 7px 10px; }
.mprev-tip .mprev-err { color: var(--red); }
.mprev-tip .mprev-mut2 { color: var(--text-3); }
.mprev-list { display: flex; flex-direction: column; gap: 12px; }
.mprev-i { margin: 0; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: var(--panel-2); }
.mprev-m img, .mprev-m video { width: 100%; max-height: 58vh; object-fit: contain; display: block; background: #f2f4f7; }
.mprev-ph { height: 132px; display: grid; place-items: center; font-size: 20px; color: var(--text-3); }
.mprev-ph.bad { font-size: 12.5px; color: var(--red); }
/* 有缩略图时：缩略图铺满，失败提示压在右下角（图仍可见，方便确认拍的是不是这张） */
.mprev-ph.has-th { position: relative; height: auto; display: block; background: #f2f4f7; }
.mprev-ph.has-th .mprev-th { width: 100%; max-height: 58vh; object-fit: contain; display: block; }
.mprev-ph .mprev-bad { position: absolute; right: 8px; bottom: 8px; font-size: 11.5px; color: #fff;
  background: rgba(214, 69, 69, .92); border-radius: 999px; padding: 3px 9px; }
.mprev-m img { transition: opacity .18s ease; }

/* ---- 审核详情弹窗（整条记录 + 可修改） ---- */
.modal.pa-modal { max-width: 880px; }
.modal.pa-modal .modal-bd { max-height: 72vh; overflow: auto; }
.pa-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 9px 12px; border-radius: 10px; background: var(--panel-2); margin-bottom: 12px; }
.pa-hd-t { font-weight: 700; font-size: 14px; }
.pa-hd-s { font-size: 12.5px; color: var(--text-3); }
.pa-sec { border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; margin-bottom: 12px; }
.pa-sec h4 { margin: 0 0 8px; font-size: 13px; font-weight: 700; }
.pa-hint { font-size: 11.5px; color: var(--text-3); font-weight: 400; }
.pa-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 14px; }
.pa-f { display: grid; grid-template-columns: 84px minmax(0, 1fr); align-items: center; gap: 6px; min-width: 0; }
.pa-f.pa-wide, .pa-f.pa-wide2 { grid-column: 1 / -1; }
.pa-k { font-size: 12px; color: var(--text-3); }
.pa-v { font-size: 13px; min-width: 0; overflow-wrap: anywhere; }
.pa-f.pa-edit input, .pa-f.pa-edit select { width: 100%; }
.pa-money { color: var(--brand); font-size: 14px; }
.pa-wide { margin-top: 8px; }
.pa-wide label { display: block; font-size: 12px; color: var(--text-3); margin-bottom: 4px; }
.pa-wide textarea { width: 100%; }
.pa-rej { margin-top: 9px; padding: 9px 10px; border-radius: 9px; background: #fdf3f3; border: 1px solid #f3d6d6; }
.pa-rej label { display: block; font-size: 12px; color: var(--text-2); margin-bottom: 4px; }
.pa-rej textarea { width: 100%; }
.pa-rej-ft { display: flex; gap: 8px; justify-content: flex-end; margin-top: 7px; }

/* ---- 凭证缩略图网格 ---- */
.vch-grid { display: flex; flex-wrap: wrap; gap: 9px; }
.vch-i { margin: 0; width: 108px; border: 1px solid var(--line); border-radius: 9px; overflow: hidden;
  background: var(--panel-2); cursor: zoom-in; position: relative; }
.vch-i:hover { border-color: var(--brand); }
.vch-i img { width: 100%; height: 108px; object-fit: cover; display: block; background: #f2f4f7; }
.vch-no { height: 108px; display: grid; place-items: center; font-size: 22px; color: var(--text-3); }
.vch-tag { position: absolute; left: 5px; top: 5px; font-size: 10.5px; color: #fff;
  background: rgba(0, 0, 0, .55); border-radius: 999px; padding: 1px 7px; }
.vch-i figcaption { font-size: 10.5px; color: var(--text-3); padding: 4px 6px; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 640px) {
  .pa-grid { grid-template-columns: 1fr; }
  .vch-i { width: 30%; }
  .vch-i img, .vch-no { height: 84px; }
}

/* ---- 后台管理首页（工作台） ---- */
.home-hello { display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  flex-wrap: wrap; margin-bottom: 12px; font-size: 14px; }
.home-hello .home-date { font-size: 12.5px; color: var(--text-3); }
.home-todos { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; margin-bottom: 16px; }
.home-todo { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; text-align: left;
  border: 1px solid var(--line); border-radius: 12px; background: var(--panel); padding: 12px 13px;
  cursor: pointer; transition: border-color .15s, box-shadow .15s, transform .12s; }
.home-todo:hover { border-color: var(--brand); transform: translateY(-1px); }
.home-todo b { font-size: 24px; line-height: 1.1; color: var(--text); }
.home-todo .ht-l { font-size: 12.5px; font-weight: 600; }
.home-todo .ht-s { font-size: 11.5px; color: var(--text-3); }
.home-todo.hot { border-color: var(--brand); background: var(--brand-soft, #fff5ee); }
.home-todo.hot b { color: var(--brand); }
.home-cols { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 18px; }
.home-col h4 { margin: 0 0 8px; font-size: 13px; font-weight: 700; }
.home-list { display: flex; flex-direction: column; gap: 6px; }
.home-it { display: flex; align-items: center; gap: 8px; text-align: left; width: 100%;
  border: 1px solid var(--line); border-radius: 9px; background: var(--panel); padding: 8px 10px;
  cursor: pointer; font-size: 13px; }
.home-it:hover { border-color: var(--brand); }
.home-it .hi-tag { flex: 0 0 auto; font-size: 11px; color: var(--brand); background: var(--brand-soft, #fff5ee);
  border-radius: 999px; padding: 1px 8px; }
.home-it b { flex: 0 0 auto; }
.home-it .hi-s { flex: 1 1 auto; color: var(--text-3); font-size: 12px; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
.home-it .hi-go { flex: 0 0 auto; color: var(--text-3); }
.home-kpi { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.home-kpi .hk { display: flex; flex-direction: column; gap: 2px; border: 1px solid var(--line);
  border-radius: 10px; background: var(--panel-2); padding: 10px 12px; }
.home-kpi .hk span { font-size: 12px; color: var(--text-3); }
.home-kpi .hk b { font-size: 19px; line-height: 1.2; }
.home-kpi .hk i { font-size: 11.5px; color: var(--text-3); font-style: normal; }
.home-quick { display: flex; flex-wrap: wrap; gap: 8px; }
.home-quick button { border: 1px solid var(--line); border-radius: 9px; background: var(--panel);
  padding: 8px 12px; font-size: 13px; cursor: pointer; }
.home-quick button:hover { border-color: var(--brand); color: var(--brand); }
@media (max-width: 1080px) { .home-todos { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 860px) {
  .home-cols { grid-template-columns: 1fr; }
  .home-todos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.mprev-i figcaption { font-size: 11.5px; color: var(--text-3); padding: 5px 8px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mprev-mut { font-size: 11.5px; color: var(--text-3); }
@media (max-width: 560px) {
  .mprev-m img, .mprev-m video { max-height: 46vh; }
  .mprev-ph { height: 104px; }
}

/* 上传控件 */
.dupload { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.dupload-btn { display: inline-flex; align-items: center; gap: 6px; padding: 7px 13px; border: 1px dashed #ffc9a3;
  border-radius: 9px; background: var(--brand-soft); color: var(--brand); font-size: 12.5px; font-weight: 600; cursor: pointer; }
.dupload-btn:hover { background: #ffe9d8; }
.dupload-st { font-size: 12px; color: var(--brand); }

/* 流程 */
.dflow { display: grid; gap: 0; }
.dflow-i { display: flex; gap: 10px; padding: 6px 0; position: relative; }
.dflow-i::before { content: ''; position: absolute; left: 10px; top: 26px; bottom: -2px; width: 2px; background: var(--line-2); }
.dflow-i:last-child::before { display: none; }
.dflow-dot { flex: none; width: 21px; height: 21px; border-radius: 50%; display: grid; place-items: center;
  font-size: 11px; font-weight: 700; background: var(--line-2); color: var(--text-3); z-index: 1; }
.dflow-i.ok .dflow-dot { background: var(--green-soft); color: var(--green); }
.dflow-i.now .dflow-dot { background: var(--brand-soft); color: var(--brand); }
.dflow-i.err .dflow-dot { background: #fdecea; color: var(--red); }
.dflow-b { font-size: 12.5px; min-width: 0; }
.dflow-b b { font-size: 13px; }
.dflow-b .dmut { font-size: 11.5px; }
.dflow-note { font-size: 12px; color: var(--text-2); background: var(--panel-2); border-radius: 7px; padding: 3px 8px; margin-top: 3px; }

/* 时间线 */
.dtimeline { display: grid; gap: 8px; }
.dev { border-left: 3px solid var(--line-2); padding: 2px 0 2px 10px; }
.dev.ok { border-left-color: var(--green); }
.dev.err { border-left-color: var(--red); }
.dev-hd { display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline; font-size: 12.5px; }
.dev-hd b { font-size: 13px; }
.dev-hd .dmut { font-size: 11.5px; }
.dev-note { font-size: 12.5px; color: var(--text-2); line-height: 1.7; margin-top: 2px; }

/* 底部操作条 */
.dactions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 16px; }
.dactions .btn { padding: 9px 16px; }

/* 表单 */
.dfields { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; }
.dfields > div { display: flex; flex-direction: column; gap: 4px; }
.dfields > div.wide { grid-column: 1 / -1; }
.dfields label { font-size: 12.5px; color: var(--text-2); font-weight: 500; }
.dinline { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--text-2); margin-top: 10px; }
.dinline input { width: auto; }
.dprojlist { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 8px; margin-top: 10px; max-height: 260px; overflow: auto; }
.dproj { text-align: left; padding: 8px 11px; border: 1px solid var(--line); border-radius: 10px; background: #fff; cursor: pointer;
  display: grid; gap: 1px; font-family: inherit; }
.dproj:hover { border-color: var(--brand); background: var(--brand-soft); }
.dproj.on { border-color: var(--brand); background: var(--brand-soft); }
.dproj b { font-size: 13px; }
.dproj span { font-size: 11.5px; color: var(--text-3); }
.dproj i { font-style: normal; font-size: 11.5px; color: var(--text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- 第 81 项：选择客户（第几次派单 / 派单类型 / 未收款提示） ---------- */
.dsec-tip { font-size: 12px; font-weight: 400; color: var(--text-3); margin-left: 8px; }
.dsec-tip b { color: var(--brand); }
.dcustlist { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 8px; margin-top: 10px; max-height: 300px; overflow: auto; }
.dcust { text-align: left; padding: 9px 12px; border: 1px solid var(--line); border-radius: 10px; background: #fff; cursor: pointer;
  display: grid; gap: 3px; font-family: inherit; }
.dcust:hover { border-color: var(--brand); background: var(--brand-soft); }
.dcust.on { border-color: var(--brand); background: var(--brand-soft); }
.dcust.unpaid { border-color: #f6c9c5; background: #fffafa; }
.dcust.unpaid:hover, .dcust.unpaid.on { background: #fdecea; }
.dcust-hd { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.dcust-hd b { font-size: 13.5px; }
.dcust-hd .dtel { font-size: 11.5px; color: var(--text-3); }
.dcust > i { font-style: normal; font-size: 11.5px; color: var(--text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dcust-meta { display: flex; gap: 10px; flex-wrap: wrap; font-size: 11px; color: var(--text-3); }
.dcust-meta .warn { color: var(--red); }
.dtag { display: inline-block; font-size: 11px; line-height: 1.7; padding: 0 7px; border-radius: 20px; border: 1px solid var(--line); background: var(--line-2); color: var(--text-2); white-space: nowrap; }
.dtag.dorder { background: var(--brand-soft); color: var(--brand); border-color: #ffd9bf; font-weight: 600; }
.dtag.dpaid { background: var(--green-soft); color: var(--green); border-color: #cfeedb; }
.dtag.dunpaid { background: #fdecea; color: var(--red); border-color: #f6c9c5; font-weight: 600; }
.dtag.dt-new { background: var(--brand-soft); color: var(--brand); border-color: #ffd9bf; }
.dtag.dt-service { background: var(--blue-soft); color: var(--blue); border-color: #d3e2fb; }
.dtag.dt-other { background: var(--line-2); color: var(--text-2); }
.dunpaid-warn { margin-top: 10px; padding: 9px 12px; border-radius: 10px; background: #fdecea; border: 1px solid #f6c9c5;
  color: #a3271c; font-size: 12.5px; line-height: 1.7; }

/* 附件大图查看 */
.dviewer { position: fixed; inset: 0; background: rgba(10,16,26,.9); z-index: 300; display: grid; place-items: center; padding: 20px; }

/* 手机端（工程师主要用手机） */
@media (max-width: 720px) {
  .dtop { padding: 10px 12px; position: static; }
  .dtop-l .brand-text span { max-width: 150px; }
  .dtop-r { width: 100%; margin-left: 0; }
  .dtop-r .btn { flex: 1; }
  .dwrap { padding: 12px 12px 118px; }
  .dstat { grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .dstat-i { padding: 8px 10px; }
  .dstat-i b { font-size: 17px; }
  .dlist { grid-template-columns: 1fr; }
  .dgrid { grid-template-columns: 1fr; }
  .dfilter select { flex: 1; min-width: 108px; }
  .drows > div > span { width: 68px; }
  .dactions { position: fixed; left: 0; right: 0; bottom: 0; z-index: 80; margin: 0;
    background: #fff; border-top: 1px solid var(--line); padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
    display: flex; gap: 8px; flex-wrap: wrap; box-shadow: 0 -4px 16px rgba(20,30,50,.06); }
  .dactions .btn { flex: 1 1 auto; min-width: 46%; padding: 12px 10px; font-size: 14px; }
  .dactions .dmut { flex: 1 1 100%; text-align: center; }
  .dmedia-i { width: calc(33.333% - 6px); }
  .dmedia-i img, .dmedia-i video, .dmedia-ph { height: 78px; }
  .modal { max-height: 92vh; border-radius: 16px 16px 0 0; align-self: end; }
  .modal-mask { align-items: end; padding: 0; }
  .dprojlist { grid-template-columns: 1fr; }
  .dcustlist { grid-template-columns: 1fr; max-height: none; }
}

/* 项目列表 / 详情里的「派单」入口按钮（带状态配色） */
.dsp-tag { border-color: var(--line); }
.dsp-tag.tone-warn { background: var(--amber-soft); color: var(--amber); border-color: #f6dfb4; }
.dsp-tag.tone-info { background: var(--blue-soft); color: var(--blue); border-color: #d3e2fb; }
.dsp-tag.tone-brand { background: var(--brand-soft); color: var(--brand); border-color: #ffd9bf; }
.dsp-tag.tone-ok { background: var(--green-soft); color: var(--green); border-color: #cfeedb; }
.dsp-tag.tone-err { background: #fdecea; color: var(--red); border-color: #f6c9c5; }
.dsp-tag.tone-mute { background: var(--line-2); color: var(--text-3); }

/* ==========================================================================
   管理后台：派单管理 / 出勤日志（第 34 项）
   ========================================================================== */
.dprog { display: inline-flex; gap: 3px; }
.dprog i { width: 15px; height: 15px; border-radius: 50%; background: var(--line-2); color: #fff;
  font-style: normal; font-size: 9px; display: grid; place-items: center; }
.dprog i.on { background: var(--green); }
.dsp-scroll { overflow-x: auto; }
.dsp-scroll > table { min-width: 1020px; }

/* 出勤日志卡片 */
.attcard { background: #fff; padding: 4px 2px; }
.att-hd h3 { margin: 0 0 4px; font-size: 16px; }
.att-sub { font-size: 12px; color: var(--text-3); line-height: 1.7; }
.att-kpi { display: flex; flex-wrap: wrap; gap: 6px 20px; margin-top: 8px; font-size: 12.5px; color: var(--text-2); }
.att-kpi b { font-size: 15px; font-variant-numeric: tabular-nums; }
.att-kpi .x b { color: var(--red); }
.att-legend { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; margin: 12px 0 8px;
  font-size: 12px; color: var(--text-2); }
.att-legend i.att-c { display: inline-block; width: 12px; height: 12px; border-radius: 3px;
  margin-right: 5px; vertical-align: -1px; }
.att-c.x { background: #f1f3f7; border: 1px dashed #cfd6e2; }
.att-c.a { background: var(--amber-soft); }
.att-c.d { background: var(--blue-soft); }
.att-c.k { background: var(--green-soft); }
.att-scroll { overflow-x: auto; padding-bottom: 4px; }
.att-tbl { border-collapse: separate; border-spacing: 3px; }
.att-tbl th, .att-tbl td { text-align: center; }
.att-tbl thead th { padding: 3px 5px; color: var(--text-3); font-weight: 600; white-space: nowrap; font-size: 11.5px; }
.att-tbl thead th b { display: block; font-size: 12px; color: var(--text-2); font-variant-numeric: tabular-nums; }
.att-tbl thead th span { display: block; font-size: 10.5px; }
.att-tbl thead th.wk b, .att-tbl thead th.wk span { color: var(--red); }
.att-tbl td.att-c { width: 42px; min-width: 42px; height: 34px; border-radius: 7px; position: relative;
  font-variant-numeric: tabular-nums; }
.att-tbl td.att-c b { font-size: 13px; font-weight: 700; }
.att-tbl td.x { background: #f1f3f7; border: 1px dashed #cfd6e2; }
.att-tbl td.x .att-x { color: #a9b3c2; font-size: 11px; }
.att-tbl td.a { background: var(--amber-soft); color: var(--amber); }
.att-tbl td.d { background: var(--blue-soft); color: var(--blue); }
.att-tbl td.k { background: var(--green-soft); color: var(--green); }
.att-tbl .att-name { text-align: left; white-space: nowrap; padding: 3px 12px 3px 4px; }
.att-tbl .att-name b { font-size: 12.5px; display: block; }
.att-tbl .att-name span { display: block; font-size: 10.5px; color: var(--text-3); }
.att-tbl .att-sum { white-space: nowrap; padding: 3px 8px; font-variant-numeric: tabular-nums;
  color: var(--text-2); font-size: 12.5px; }
.att-tbl .att-sum.ok { color: var(--green); }
.att-od { position: absolute; top: 1px; right: 2px; font-style: normal; font-size: 9px; font-weight: 800; color: var(--red); }
.att-foot { font-size: 11.5px; color: var(--text-3); margin-top: 8px; line-height: 1.8; }
@media (max-width: 720px) {
  .att-tbl td.att-c { width: 34px; min-width: 34px; height: 30px; }
  .att-tbl thead th { padding: 2px 3px; }
  .dsp-scroll > table { min-width: 900px; }
}

/* ==========================================================================
   图片导入清单（第 35 项）
   ========================================================================== */
.modal.imp-modal { width: min(880px, 96vw); max-width: min(880px, 96vw); max-height: 90vh; }
.modal.imp-modal .modal-bd { max-height: calc(90vh - 130px); overflow: auto; }
.imp-tip { font-size: 13px; line-height: 2; color: var(--text-2); background: var(--bg-2, #f7f8fa);
  border-radius: 10px; padding: 10px 14px; margin: 0 0 12px; }
.imp-pick { display: block; border: 1.5px dashed var(--line-2); border-radius: 10px;
  padding: 22px 14px; text-align: center; cursor: pointer; color: var(--text-2); font-size: 13.5px;
  transition: border-color .15s; }
.imp-pick:hover { border-color: var(--blue); color: var(--blue); }
.imp-prev { margin-top: 12px; text-align: center; }
.imp-prev img { max-width: 100%; max-height: 240px; border-radius: 8px; border: 1px solid var(--line); }
.imp-sum { font-size: 13px; color: var(--text-2); margin: 0 0 10px; }
.imp-missing { background: #fdecea; border: 1px solid #f5c6c0; color: var(--red); border-radius: 10px;
  padding: 10px 14px; font-size: 12.5px; line-height: 1.9; margin-bottom: 12px; }
.imp-tbl-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 10px; }
.imp-tbl { min-width: 820px; margin: 0; }
.imp-tbl td { vertical-align: top; padding: 8px 10px; }
.imp-tbl .imp-name .grp { display: block; font-size: 10.5px; color: var(--text-3); margin-bottom: 2px; }
.imp-tbl .imp-name b { font-size: 12.5px; }
.imp-tag { font-size: 10.5px; padding: 1px 6px; border-radius: 5px; white-space: nowrap; }
.imp-tag.near { background: var(--amber-soft); color: var(--amber); }
.imp-tag.none { background: #fdecea; color: var(--red); }
.imp-tbl select { max-width: 100%; font-size: 12px; }
.imp-tbl tr.imp-row-none td { background: #fff8f7; }
.imp-tbl tr.imp-row-skip td { opacity: .55; }
.imp-none-tip { color: var(--red); font-size: 12px; line-height: 1.6; }
.imp-near-hint { font-size: 11px; color: var(--amber); margin-top: 4px; line-height: 1.6; }
.imp-qty { width: 64px; }
.imp-pos { width: 100%; font-size: 12px; }
.imp-auto { color: var(--text-3); font-size: 12px; }
.modal-ft .hint { margin-right: auto; }
@media (max-width: 720px) {
  .modal.imp-modal { width: 100vw; max-height: 96vh; border-radius: 0; }
  .modal.imp-modal .modal-bd { max-height: calc(96vh - 118px); }
  .imp-tbl { min-width: 760px; }
}

/* ===== 区域管理（管理后台，第 36 项）===== */
.area-prov { margin-bottom: 14px; }
.area-prov-hd { display: flex; align-items: center; gap: 8px; margin: 4px 0 8px; }
.area-prov-hd b { font-size: 14px; }
.area-city { border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; margin-bottom: 8px; background: var(--panel-2); }
.area-city-hd { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.area-city-hd b { font-size: 13px; }
.area-batch { display: flex; gap: 6px; }
.area-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.area-chip { border: 1px solid var(--line); border-radius: 999px; padding: 3px 10px; font-size: 12px;
  background: #fff; cursor: pointer; display: inline-flex; align-items: center; gap: 5px; transition: all .15s; }
.area-chip i { font-style: normal; font-size: 11px; opacity: .75; }
.area-chip.on { border-color: #2f9e44; background: #f0fbf2; color: #2b7a3f; }
.area-chip.off { border-color: var(--line); background: #f3f4f6; color: var(--text-3); }

.area-chip.off i { text-decoration: none; }
.area-chip:disabled { cursor: default; opacity: .8; }
.area-chip:hover:not(:disabled) { box-shadow: 0 1px 4px rgba(0, 0, 0, .08); }

/* ===== 系统配置预览：被隐藏的页签划掉（第 37 项）===== */
.pv-tab-btn.off { opacity: .4; text-decoration: line-through; }

/* ===== 第 38 项：收款业绩审核 + 工资管理 ===== */
.pm-state.warn { background: var(--amber-soft); color: var(--amber); }
.pm-state.bad { background: rgba(224, 49, 49, .12); color: var(--red); }
.pc-month { font-weight: 600; font-size: 12px; }
.pc-ops { white-space: nowrap; }
.pay-modal .pc-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; margin-bottom: 6px; }
/* 第 141 项：收款「关联订单」（主订单下有增项清单时必须选） */
.pay-modal .pc-unit { margin-bottom: 10px; }
.pay-modal .pc-unit label { display: block; margin-bottom: 4px; font-weight: 600; font-size: 13px; }
.pay-modal .pc-unit select { width: 100%; }
.pay-modal .pc-grid.ex-grid { grid-template-columns: 1fr 1fr; }
.pay-modal .pc-grid label { display: block; margin-bottom: 4px; }
.pay-modal .pc-grid > div > input { width: 100%; }
.pc-files { display: flex; flex-wrap: wrap; gap: 6px; }
.pc-file { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line);
  border-radius: 8px; padding: 4px 10px; font-size: 12.5px; background: var(--panel-2); max-width: 100%; }
.pc-file b { cursor: pointer; color: var(--red); font-weight: 700; }
.pc-file.new { border-style: dashed; }
/* 上传芯片左侧缩略图：选完 / 传完立刻能看到拍的是哪张，不用点开 */
.pc-file .pc-th { width: 30px; height: 30px; border-radius: 6px; object-fit: cover; display: block;
  border: 1px solid var(--line); background: #f2f4f7; flex: 0 0 auto; }
.pc-file { padding: 4px 8px 4px 5px; }
.pc-file .pc-th + * { margin-left: 1px; }
/* 已上传（还没提交）—— 失败重试时会带上，不用重传 */
.pc-file.done { border-style: solid; background: var(--bg-2, #f6f7f9); color: var(--text-2, #4b5563); }
.pc-empty { font-size: 12px; color: var(--text-3); }
/* 上传进度 / 失败提示（收款凭证、报销凭证共用） */
.pc-upst { font-size: 12px; color: var(--text-3); min-height: 0; margin-top: 6px; word-break: break-all; }
.pc-upst:empty { display: none; }
.pc-reject { font-size: 12.5px; color: var(--red); background: rgba(224, 49, 49, .08);
  border-radius: 8px; padding: 8px 10px; margin: 10px 0 0; }
.sal-group { margin-bottom: 14px; }
.sal-group-hd { display: flex; align-items: center; gap: 8px; margin: 2px 0 8px; }
.sal-group-hd b { font-size: 14px; }
@media (max-width: 720px) {
  .pay-modal .pc-grid { grid-template-columns: 1fr; }
}

/* ===== 第 39 项：我的业绩 + 登录激励弹窗 + 后台业绩指标 ===== */
.perf-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.perf-head b { font-size: 15px; }
.perf-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.perf-item { border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; background: var(--panel-2); }
.perf-item-hd { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 10px; }
.perf-item-hd span { font-size: 13px; color: var(--text-2); }
.perf-item-hd b { font-size: 22px; }
.perf-item.ok .perf-item-hd b { color: var(--green); }
.perf-item.mid .perf-item-hd b { color: var(--brand); }
.perf-item.low .perf-item-hd b { color: var(--amber); }
.perf-item-bd { display: flex; gap: 22px; margin-bottom: 10px; }
.perf-kv { display: flex; flex-direction: column; gap: 2px; }
.perf-kv i { font-style: normal; font-size: 12px; color: var(--text-3); }
.perf-kv b { font-size: 15px; }
.perf-kv b.done { color: var(--green); }
.perf-note { margin-top: 12px; font-size: 12.5px; color: var(--text-3); }
/* ===== 第 55 项：我的业绩 → 管理员切换查看任意员工 ===== */
.perf-who { display: inline-flex; align-items: center; gap: 6px; margin-left: 2px; }
.perf-who label { font-size: 12.5px; color: var(--text-3); white-space: nowrap; }
.perf-who select { min-width: 196px; }
.perf-view-tag { font-size: 11.5px; color: var(--brand); border: 1px solid currentColor;
  border-radius: 999px; padding: 1px 8px; white-space: nowrap; }
@media (max-width: 720px) { .perf-grid { grid-template-columns: 1fr; } }
@media (max-width: 720px) {
  /* 手机上把「查看员工」下拉整行放到最下面，免得把标题挤成竖排 */
  #tab-perf .panel-hd { flex-wrap: wrap; }
  #tab-perf .panel-hd h3 { white-space: nowrap; flex: 0 0 auto; }
  .perf-who { order: 10; flex: 1 1 100%; margin-left: 0; }
  .perf-who select { flex: 1; min-width: 0; }
}

/* 第 56 项：工资模板面板说明较长，标题别被挤成两行 */
#tab-salary .panel-hd h3 { white-space: nowrap; flex: 0 0 auto; }
@media (max-width: 900px) {
  #tab-salary .panel-hd { flex-wrap: wrap; }
  #tab-salary .panel-hd h3 { flex: 1 1 100%; }
}

/* ===== 第 43 项：我的工资板块 ===== */
.sal-box { margin-top: 20px; border: 1px solid var(--line); border-radius: 12px; padding: 16px 18px; background: var(--panel-2); }
.sal-hd { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 15px; font-weight: 700; margin-bottom: 4px; }
.sal-hd .note { font-size: 12px; color: var(--text-3); font-weight: 400; }
.sal-sub { font-size: 12.5px; color: var(--text-2); margin-bottom: 14px; }
/* 管理员查看他人工资时的只读提示条（第 55 项） */
.sal-admin-tip { margin: 8px 0 10px; font-size: 12.5px; color: var(--brand);
  background: rgba(255, 105, 0, .07); border: 1px solid rgba(255, 105, 0, .22);
  border-radius: 8px; padding: 7px 10px; }
.sal-sub b { color: var(--text-1); }
.sal-sub .note { color: var(--text-3); }
.sal-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.sal-item { border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; background: #fff;
  display: flex; flex-direction: column; gap: 4px; }
.sal-item span { font-size: 12px; color: var(--text-3); }
.sal-item b { font-size: 17px; display: flex; align-items: baseline; gap: 3px; }
.sal-item b i { font-style: normal; font-size: 11px; color: var(--text-3); font-weight: 400; }
.sal-item em { font-style: normal; font-size: 11.5px; color: var(--text-3); }
.sal-item.neg b { color: var(--red); }
.sal-item.reimb b { color: var(--green); }
.sal-item.merit b { color: var(--green); }
.sal-item.corp b { color: var(--text-2); }
/* 岗位工资走「实时口径」折算时高亮一下（第 58 项）：大字就是折算后的实发 */
.sal-item.post-live { border-color: rgba(255, 105, 0, .35); background: var(--brand-soft); }
.sal-item.post-live b { color: var(--brand); }
.sal-item.post-live em { color: var(--text-2); }
.sal-item.net b { color: var(--brand); }
.sal-item.net { background: linear-gradient(135deg, #fff7e6, #f0f7ff); border-color: var(--line); }
.sal-empty { font-size: 13px; color: var(--text-3); padding: 8px 0 2px; }
.sal-note { margin-top: 12px; font-size: 12px; color: var(--text-3); line-height: 1.6; }
@media (max-width: 720px) { .sal-grid { grid-template-columns: repeat(2, 1fr); } }

/* ===== 工资发放状态（第 46 项）===== */
.pay-state { margin-top: 12px; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  border: 1px solid var(--line); border-radius: 10px; padding: 10px 14px; background: #fff; }
.pay-state span { font-size: 12.5px; color: var(--text-2); }
.pay-state b { font-size: 16px; }
.pay-state em { font-style: normal; font-size: 12px; color: var(--text-3); }
.pay-state.done { border-color: #bfe3cd; background: #f2fbf5; }
.pay-state.done b { color: var(--green); }
.pay-state.part { border-color: #f2d9a8; background: #fffaf0; }
.pay-state.part b { color: #d08a00; }
.pay-state.wait b { color: var(--text-3); }
/* 多笔发放明细（第 158 项）：一人一月可能分几笔打款，工资单里逐笔列出来 */
.pay-state .pay-lines { flex-basis: 100%; margin-top: 8px; padding-top: 8px;
  border-top: 1px dashed var(--line); display: grid; gap: 4px; }
.pay-line { display: flex; align-items: baseline; gap: 8px; font-size: 12px; flex-wrap: wrap; }
.pay-line i { font-style: normal; color: var(--text-3); font-variant-numeric: tabular-nums; }
.pay-line span { min-width: 58px; color: var(--text-2); }
.pay-line b, .pay-state .pay-line b { font-size: 12.5px; font-variant-numeric: tabular-nums;
  color: var(--text); }
.pay-line em { font-style: normal; font-size: 11.5px; color: var(--text-3); }

/* ===== 后台工资发放弹窗（第 158 项：多笔）===== */
.pp-hd { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 10px; margin-bottom: 14px; }
.pp-cell { background: #f7f9fb; border: 1px solid var(--line); border-radius: 10px; padding: 9px 12px; }
.pp-cell > span { display: block; font-size: 11.5px; color: var(--text-3); margin-bottom: 3px; }
.pp-cell > b { font-size: 17px; font-variant-numeric: tabular-nums; }
.pp-cell > em { display: block; font-style: normal; font-size: 11px; color: var(--text-3);
  margin-top: 3px; line-height: 1.45; }
.pp-due { display: flex; align-items: center; gap: 4px; }
.pp-due input { width: 118px; padding: 3px 8px; font-size: 16px; font-weight: 700; }
.pp-due i { font-style: normal; font-size: 12px; color: var(--text-3); }
.pp-owe { color: #d08a00; }
.pp-ok { color: var(--green); }
.pp-hd-bar { display: flex; align-items: baseline; gap: 8px; font-size: 12.5px; font-weight: 600;
  color: var(--text); margin: 4px 0 8px; }
.pp-hd-bar .note { font-weight: 400; }
.pp-tbl-wrap { max-height: 232px; overflow: auto; border: 1px solid var(--line); border-radius: 8px; }
.pp-tbl { width: 100%; margin: 0; }
.pp-tbl thead th { position: sticky; top: 0; background: #f7f9fb; z-index: 1; }
.pp-tbl tr.pp-sum td { background: #fafbfc; font-weight: 600; }
.pp-form { margin-top: 14px; padding: 12px 14px; border: 1px solid var(--line);
  border-radius: 10px; background: #fcfdfe; }
.pp-form-hd { font-size: 12.5px; font-weight: 600; color: var(--text-1); margin-bottom: 10px; }
.pp-form-ft { display: flex; justify-content: flex-end; margin-top: 10px; }
.pay-sub { font-size: 11px; color: var(--text-3); margin-top: 2px; }
@media (max-width: 720px) {
  .pp-hd { grid-template-columns: 1fr; }
  /* 窄屏：日期 + 类别 + 金额占一行，备注另起一行，避免碎成四行 */
  .pay-line { gap: 6px; }
  .pay-line i { min-width: 76px; }
  .pay-line span { min-width: 52px; }
  .pay-line em { flex-basis: 100%; }
}

/* ===== 我的报销（第 46 项）===== */
.ex-scroll { overflow-x: auto; }
.ex-sub { font-size: 11.5px; color: var(--text-3); margin-top: 2px; }
.ex-reject { font-size: 11.5px; color: var(--red); margin-top: 2px; }
.ex-note { margin-top: 12px; font-size: 12px; color: var(--text-3); line-height: 1.6; }
.ex-tip { font-size: 12.5px; color: var(--text-2); background: #f6f8fa; border-radius: 8px;
  padding: 8px 10px; margin: 0 0 12px; line-height: 1.6; }
.ex-reject-box { font-size: 12.5px; color: var(--red); background: #fdf2f2; border-radius: 8px;
  padding: 8px 10px; margin: 0 0 12px; }
@media (max-width: 720px) {
  .ex-scroll table { min-width: 860px; }
  .pay-state b { font-size: 15px; }
}

/* ===== 第 45 项：绩效明细弹窗 ===== */
.cm-tools { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.cm-tools label { margin: 0; font-size: 12.5px; color: var(--text-2); }
.cm-tools input[type="month"] { width: 150px; }
.cm-tools .note { font-size: 12px; color: var(--text-3); }
.cm-cards { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; margin-bottom: 12px; }
.cm-card { border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; background: var(--panel-2);
  display: flex; flex-direction: column; gap: 3px; }
.cm-card span { font-size: 12px; color: var(--text-3); }
.cm-card b { font-size: 17px; }
.cm-card i { font-style: normal; font-size: 11px; color: var(--text-3); line-height: 1.4; }
.cm-card.hi { background: linear-gradient(135deg, #fff7e6, #f0f7ff); }
.cm-card.hi b { color: var(--brand); font-size: 19px; }
/* 第 52 项：多一张「岗位工资测算」卡时挤成 6 列，别掉到第二行 */
.cm-cards.has-post { grid-template-columns: repeat(6, 1fr); }
.cm-card.post { background: linear-gradient(135deg, #f0f7ff, #eefaf3); border-color: #cfe3ff; }
.cm-card.post b { color: var(--blue); font-size: 19px; }
.cm-scroll { overflow-x: auto; }
.cm-scroll .cm-tbl { min-width: 760px; }
.cm-tbl td .cm-sub { font-size: 11.5px; color: var(--text-3); margin-top: 2px; }
/* 第 145 项：客户地址（项目/客户单元格的第二行；地址长，允许折行） */
.cm-tbl td .cm-addr { font-size: 11.5px; color: var(--text-2); margin-top: 2px; line-height: 1.45; word-break: break-all; }
.cm-tbl tr.cm-refund td { background: rgba(224, 50, 44, .05); }
.cm-tbl .num.neg { color: var(--red); }
.cm-note { margin-top: 12px; font-size: 12px; color: var(--text-3); line-height: 1.7; }
/* 第 141 项：家电计提口径提示 + 明细里「待计提」的灰字 */
.cm-rule { margin: 10px 0 0; font-size: 12px; color: var(--text-3); line-height: 1.7;
  padding: 8px 10px; background: var(--bg-2, #f6f7f9); border-radius: 8px; }
.cm-rule b { color: var(--text-2); }
.cm-hold { color: var(--amber); }
.cm-ms { color: var(--green); }
.cm-sub-dim { color: var(--text-3); }
@media (max-width: 720px) { .cm-cards, .cm-cards.has-post { grid-template-columns: repeat(2, 1fr); } }

.perf-pop-mask { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center;
  justify-content: center; background: rgba(17, 24, 39, .55); backdrop-filter: blur(2px); padding: 20px; }
.perf-pop { width: min(460px, 96vw); background: #fff; border-radius: 16px; padding: 24px 26px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .28); text-align: center; }
.perf-pop-hd { font-size: 20px; font-weight: 700; margin-bottom: 4px; }
.perf-pop-sub { font-size: 13px; color: var(--text-3); margin-bottom: 16px; }
.perf-pop-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 10px;
  background: var(--panel-2); border-radius: 12px; padding: 14px; margin-bottom: 14px; }
.perf-pop-stats .perf-kv { align-items: flex-start; }
.perf-pop-cheer { font-size: 14.5px; line-height: 1.7; color: var(--text-1);
  background: linear-gradient(135deg, #fff7e6, #f0f7ff); border-radius: 12px; padding: 12px 14px; margin-bottom: 10px; }
.perf-pop-tip { font-size: 13px; color: var(--amber); margin-bottom: 18px; }
.perf-pop #perfPopOk { width: 100%; padding: 10px 0; font-size: 15px; }

/* ==========================================================================
   第 47 项：电子合同签署 + 合同管理系统
   ========================================================================== */

/* ---- 合同上的电子章 / 客户签名 ---- */
.ct-stamp { display: inline-block; vertical-align: middle; margin: 0 6px; }
.ct-stamp img { display: block; width: auto; }
.ct-stamp.seal img { height: 74px; opacity: .92; }
.ct-stamp.sign img { height: 54px; }
.ct-sign-foot { margin-top: 24px; text-align: right; }
.quote-seal { text-align: right; padding: 12px 16px 6px; }
.quote-seal img { height: 84px; width: auto; }

/* ---- 合同弹窗工具条上的签署状态 ---- */
.sign-state { font-size: 12.5px; color: var(--text-3); margin-right: 4px; }

/* ---- 工作台：发起签署链接提示 ---- */
.pdf-stage { background: #fff; }
.pdf-stage .ct-paper { max-width: none; width: 100%; box-shadow: none; border-radius: 0; }
.pdf-stage .quote-doc { background: #fff; }

/* ---- 后台：合同管理 ---- */
.cmstat { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 12px; margin-bottom: 16px; }
.cmstat .cms { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; }
.cmstat .cms span { display: block; font-size: 12px; color: var(--text-3); }
.cmstat .cms b { display: block; font-size: 22px; font-weight: 800; margin-top: 2px; font-variant-numeric: tabular-nums; }
.cmstat .cms.wait b { color: var(--amber); }
.cmstat .cms.todo b { color: var(--brand); }
.cmstat .cms.ok b { color: var(--green); }

.cm-chip { display: inline-block; font-size: 11.5px; font-weight: 700; padding: 3px 10px; border-radius: 20px; white-space: nowrap; }
.cm-chip.wait { background: var(--amber-soft); color: var(--amber); }
.cm-chip.todo { background: var(--brand-soft); color: var(--brand); }
.cm-chip.ok { background: var(--green-soft); color: var(--green); }
.cm-chip.off { background: var(--line-2); color: var(--text-3); }

.cm-ops { display: flex; flex-wrap: wrap; gap: 6px; }
.cm-ops .btn { padding: 5px 10px; font-size: 12px; }

.cm-view-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; font-size: 12.5px;
  color: var(--text-2); margin-bottom: 12px; }
.cm-sign-preview { display: flex; align-items: center; gap: 12px; background: var(--panel-2);
  border: 1px solid var(--line); border-radius: 10px; padding: 10px 14px; margin-bottom: 12px; }
.cm-sign-preview span { font-size: 12.5px; color: var(--text-3); }
.cm-sign-preview img { height: 54px; width: auto; }

/* ---- 公司电子章上传 ---- */
.seal-box { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 20px;
  border: 1px dashed var(--line); border-radius: 12px; background: var(--panel-2); }
.seal-preview { display: grid; place-items: center; min-height: 120px; }
.seal-preview img { height: 130px; width: auto; }
.seal-meta { font-size: 12.5px; color: var(--text-3); }

/* ---- 客户签署页（sign.html，手机为主） ---- */
.sign-page { max-width: 940px; margin: 0 auto; padding: 22px 18px 60px; }
.sign-hero { padding: 20px 22px; }
.sign-chip { display: inline-block; font-size: 11.5px; font-weight: 700; padding: 3px 11px; border-radius: 20px;
  background: rgba(255, 255, 255, .26); color: #fff; }
.sign-doc { background: #fff; overflow: hidden; }
.ct-paper-inline { max-width: none; box-shadow: none; border-radius: 0; padding: 34px 32px 40px; }

.sign-panel { margin-top: 16px; padding: 18px 20px 22px; }
.sign-panel-hd { font-weight: 700; font-size: 15px; margin-bottom: 12px; }
.sign-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 14px; }
.sign-f { display: flex; flex-direction: column; gap: 5px; }
.sign-f span { font-size: 12.5px; color: var(--text-2); }
.sign-f i { color: var(--red); font-style: normal; margin-left: 2px; }
.sign-f input { padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; font-size: 14px;
  font-family: inherit; color: var(--text); background: #fff; }
.sign-f input:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); }
.sign-canvas-wrap { position: relative; border: 1.5px dashed #ffc9a3; border-radius: 12px;
  background: #fffdfa; overflow: hidden; }
#signCanvas { display: block; width: 100%; height: 220px; touch-action: none; cursor: crosshair; }
.sign-canvas-tip { position: absolute; inset: 0; display: grid; place-items: center; font-size: 15px;
  color: #cbb6a4; pointer-events: none; letter-spacing: 3px; }
.sign-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 14px; }
.sign-note { font-size: 12px; color: var(--text-3); line-height: 1.8; margin: 10px 0 0; }

.sign-status { display: flex; gap: 14px; align-items: flex-start; margin-top: 16px; padding: 16px 18px; }
.sign-status.ok { border-color: #f2d9a8; background: #fffaf0; }
.sign-status.done { border-color: #bfe3cd; background: #f2fbf5; }
.ss-icon { font-size: 26px; line-height: 1; }
.ss-body b { font-size: 15px; }
.ss-body p { font-size: 13px; color: var(--text-2); line-height: 1.8; margin: 4px 0 0; }
.ss-meta { font-size: 12px !important; color: var(--text-3) !important; }

@media (max-width: 720px) {
  .sign-page { padding: 14px 12px 44px; }
  .sign-hero { padding: 16px 16px; border-radius: 14px; }
  .sign-fields { grid-template-columns: 1fr; }
  #signCanvas { height: 190px; }
  .ct-paper-inline { padding: 22px 16px 28px; font-size: 12.5px; }
  .ct-stamp.seal img { height: 62px; }
  .sign-actions .btn { flex: 1; }
  .cmstat { grid-template-columns: repeat(2, 1fr); }
  .seal-preview img { height: 108px; }
}

/* ==========================================================================
   第 48 项：人事档案 + 劳动合同
   ========================================================================== */

/* ---- 档案表单 ---- */
.hr-sec { margin-top: 14px; padding: 16px 18px 18px; }
.hr-sec-hd { display: flex; align-items: center; gap: 10px; margin-bottom: 12px;
  padding-bottom: 10px; border-bottom: 1px solid var(--line-2); }
.hr-sec-t { font-weight: 700; font-size: 14.5px; }
.hr-sec-n { margin-left: auto; font-size: 12px; color: var(--text-3); }
.hr-sec-n b { color: var(--brand); }
.hr-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 14px; }
.hr-f { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.hr-f.wide { grid-column: 1 / -1; }
.hr-lb { font-size: 12.5px; color: var(--text-2); }
.hr-lb i, .hr-req { color: var(--red); font-style: normal; margin-left: 2px; }
.hr-in { width: 100%; padding: 9px 11px; border: 1px solid var(--line); border-radius: 10px;
  font-size: 13.5px; font-family: inherit; color: var(--text); background: #fff; box-sizing: border-box; }
.hr-in:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); }
textarea.hr-in { min-height: 76px; resize: vertical; line-height: 1.7; }
.hr-tip { font-size: 11.5px; color: var(--text-3); font-style: normal; line-height: 1.5; }

/* ---- 附件上传 ---- */
.hr-ups-tip { font-size: 12px; color: var(--text-3); margin: 12px 0 0; line-height: 1.8; }

/* ---- 第 136 项：分栏「保存本栏」+ 后台专属的劳动合同附件块 ---- */
.hr-sec-hd .hr-sec-save { padding: 4px 10px; font-size: 12px; line-height: 1.7; border-radius: 8px; flex: 0 0 auto; }
.hr-labor { border: 1px dashed var(--line); background: var(--panel-2); }
.hr-labor .hr-sec-n { color: var(--brand); font-weight: 600; }
.hr-up-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.hr-up { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: #fff; }
.hr-up-hd { padding: 8px 12px; font-size: 12.5px; background: var(--panel-2);
  border-bottom: 1px solid var(--line-2); color: var(--text-2); }
.hr-up-hd i { color: var(--red); font-style: normal; margin-left: 2px; }
.hr-up-box { display: grid; place-items: center; min-height: 120px; padding: 8px; }
.hr-up-empty { width: 100%; min-height: 108px; display: grid; place-items: center;
  border: 1.5px dashed #ffc9a3; border-radius: 10px; background: #fffdfa; color: var(--brand);
  font-size: 13px; cursor: pointer; text-align: center; }
.hr-up-empty em { display: block; font-size: 11px; color: var(--text-3); font-style: normal; margin-top: 6px; }
.hr-up-img { display: block; position: relative; cursor: pointer; }
.hr-up-img img { max-width: 100%; max-height: 150px; display: block; border-radius: 8px; }
.hr-up-img em { position: absolute; right: 6px; bottom: 6px; font-size: 11px; font-style: normal;
  background: rgba(0, 0, 0, .55); color: #fff; border-radius: 20px; padding: 1px 8px; }
.hr-up-file { display: grid; place-items: center; gap: 4px; padding: 18px 12px; text-align: center;
  font-size: 13px; color: var(--text-2); text-decoration: none; cursor: pointer; }
.hr-up-file em { font-size: 11.5px; color: var(--text-3); font-style: normal; }
.hr-up-file span { font-size: 11.5px; color: var(--brand); }
.hr-up-del { margin: 8px 12px 12px; }

/* ---- 第 166 项：人事档案附件的页内查看层（身份证照片点开看原图） ----
   data URL 不能拿去新窗口打开（Chrome 禁止顶层导航到 data:），只能放进 img / iframe。 */
.hrv-mask { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center;
  justify-content: center; padding: 18px; background: rgba(15, 23, 42, .62); }
.hrv-box { display: flex; flex-direction: column; width: auto; max-width: min(760px, 96vw);
  max-height: 92vh; background: #fff; border-radius: 14px; overflow: hidden;
  box-shadow: 0 24px 60px rgba(15, 23, 42, .35); }
.hrv-hd { display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 16px; border-bottom: 1px solid var(--line); font-size: 14px; font-weight: 600; }
.hrv-x { border: 0; background: none; cursor: pointer; font-size: 16px; line-height: 1; color: var(--text-3); }
.hrv-x:hover { color: var(--text); }
.hrv-bd { padding: 12px; overflow: auto; background: #f8fafc; text-align: center; }
.hrv-img { display: block; max-width: 100%; max-height: 70vh; margin: 0 auto; border-radius: 8px; }
.hrv-pdf { width: min(720px, 90vw); height: 70vh; border: 0; background: #fff; }
.hrv-ft { display: flex; justify-content: flex-end; gap: 8px; padding: 10px 16px; border-top: 1px solid var(--line); }

/* ---- 只读展示 ---- */
.hr-kv { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px 14px; }
.hr-kv-i { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.hr-kv-i.wide { grid-column: 1 / -1; }
.hr-kv-i span { font-size: 12px; color: var(--text-3); }
.hr-kv-i b { font-size: 13.5px; font-weight: 600; word-break: break-all; }

/* ---- 进度 / 保存条 ---- */
.hr-prog { margin-top: 14px; padding: 14px 16px; }
.hr-prog-hd { display: flex; align-items: center; justify-content: space-between; font-size: 13px; }
.hr-prog-hd span { color: var(--text-3); font-size: 12.5px; }
.hr-prog-bar { height: 8px; border-radius: 20px; background: var(--line-2); overflow: hidden; margin: 9px 0 6px; }
.hr-prog-bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--brand), var(--brand-2)); }
.hr-prog-sub { font-size: 12px; color: var(--text-3); }
.hr-save-bar { display: flex; align-items: center; gap: 14px; margin-top: 16px; flex-wrap: wrap; }
.hr-save { padding: 11px 30px; font-size: 15px; }
.hr-save-tip { font-size: 12px; color: var(--text-3); }

/* ---- 状态小标签（hero 里） ---- */
.hr-chip { display: inline-block; font-size: 11.5px; font-weight: 700; padding: 3px 10px; border-radius: 20px;
  background: rgba(255, 255, 255, .26); color: #fff; }

/* ---- 后台：劳动合同模板编辑 / 生成 ---- */
.lt-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; align-items: start; }
.lt-edit { width: 100%; min-height: 380px; padding: 12px 14px; border: 1px solid var(--line);
  border-radius: 12px; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12.5px; line-height: 1.9; color: var(--text); background: #fff; resize: vertical; box-sizing: border-box; }
.lt-edit:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); }
.lt-preview { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: var(--panel-2); }
.lt-pv-hd { padding: 8px 12px; font-size: 12.5px; color: var(--text-3); background: #fff;
  border-bottom: 1px solid var(--line-2); }
.lt-preview .ct-scroll { max-height: 380px; overflow: auto; }
.lt-preview .ct-paper { box-shadow: none; border-radius: 0; padding: 22px 20px 26px; max-width: none; }

.hr-have { font-size: 12.5px; color: var(--text-3); margin: 10px 0 0; line-height: 1.8; }
.hc-stat-inline { font-size: 12px; color: var(--text-3); margin: 10px 0 0; text-align: right; }

@media (max-width: 1100px) {
  .lt-grid { grid-template-columns: 1fr; }
  .lt-edit { min-height: 280px; }
}

@media (max-width: 720px) {
  .hr-grid, .hr-kv, .hr-up-grid { grid-template-columns: 1fr; }
  .hr-save-bar { position: sticky; bottom: 0; background: rgba(255, 255, 255, .96);
    padding: 10px 0; border-top: 1px solid var(--line); z-index: 5; }
  .hr-save { flex: 1; }
  .hr-save-tip { display: none; }
  .hr-in { font-size: 16px; }            /* iOS 上不自动放大 */
  .hr-up-img img { max-height: 200px; }
  .hc-stat-inline { text-align: left; }
}

/* ==========================================================================
   第 49 项：电子章库 + 可视化盖章编辑器（审核时拖章 / 拖签名）
   ========================================================================== */
.modal.wide-se { max-width: 1180px; }
.modal.wide-se .modal-bd { padding: 14px 16px; }

/* 章 / 签名绝对定位（PDF 生成与后台预览共用同一套规则） */
.ct-paper { position: relative; }
.ct-stamp-abs { position: absolute; height: auto; z-index: 3; pointer-events: none; }
.ct-anchor { display: inline-block; min-width: 4px; }

/* 电子章库 */
.seal-lib { display: grid; grid-template-columns: repeat(auto-fill, minmax(238px, 1fr)); gap: 12px; }
.seal-card { display: flex; gap: 12px; align-items: center; border: 1px solid var(--line);
  border-radius: 12px; padding: 10px 12px; background: #fff; }
.seal-card.on { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); }
.seal-card-img { width: 66px; height: 66px; flex: none; display: grid; place-items: center;
  background: var(--panel-2); border-radius: 10px; overflow: hidden; }
.seal-card-img img { max-width: 100%; max-height: 100%; }
.seal-card-body { min-width: 0; flex: 1; }
.seal-card-body b { display: block; font-size: 13px; }
.seal-card-sub { display: block; font-size: 11.5px; color: var(--text-3); margin-top: 3px; }
.seal-card-ops { display: flex; flex-direction: column; gap: 6px; flex: none; }
.seal-def { font-size: 11.5px; color: var(--brand); font-weight: 600; text-align: center; padding: 4px 0; }

/* 盖章编辑器 */
.se-wrap { display: grid; grid-template-columns: minmax(0, 384px) minmax(0, 1fr); gap: 14px; align-items: start; }
.se-left { display: flex; flex-direction: column; gap: 12px; max-height: 76vh; overflow: auto; padding-right: 4px; }
.se-block { border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; background: #fff; }
.se-hd { font-size: 12.5px; font-weight: 600; margin-bottom: 8px; }
.se-hd span { font-weight: 400; color: var(--text-3); margin-left: 6px; font-size: 11.5px; }
.se-ta { width: 100%; min-height: 250px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12px; line-height: 1.85;
  color: var(--text); background: #fff; resize: vertical; box-sizing: border-box; }
.se-ta:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); }
.se-vars { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.se-vars label { font-size: 11.5px; color: var(--text-3); display: block; }
.se-vars .wide { grid-column: 1 / -1; }
.se-vars input { width: 100%; padding: 7px 9px; border: 1px solid var(--line); border-radius: 8px;
  font-size: 12.5px; box-sizing: border-box; margin-top: 4px; }
.se-sealrow { display: flex; gap: 8px; align-items: center; }
.se-sealrow select { flex: 1; min-width: 0; padding: 7px 9px; border: 1px solid var(--line);
  border-radius: 9px; background: #fff; font-size: 12.5px; }
.se-sizes { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 10px; }
.se-sizes label { font-size: 11.5px; color: var(--text-3); }
.se-sizes input[type=range] { width: 100%; }
.se-rows { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.se-tip { font-size: 11.5px; color: var(--text-3); line-height: 1.8; margin: 10px 0 0; }
.se-right { position: sticky; top: 0; }
.se-stage { background: var(--bg); border: 1px solid var(--line); border-radius: 12px; padding: 12px;
  max-height: 76vh; overflow: auto; }
.se-paperwrap { width: 760px; max-width: 100%; margin: 0 auto; }
.se-paper { box-shadow: 0 2px 14px rgba(16, 24, 40, .1); }

/* 可拖拽的章 / 签名图层 */
.se-item { position: absolute; z-index: 5; cursor: grab; touch-action: none; }
.se-item.dragging { cursor: grabbing; }
.se-item > img { display: block; width: 100%; height: auto; }
.se-item.unplaced { left: 62%; top: 88%; width: 16%; }
.se-item::after { content: ''; position: absolute; inset: -2px; border: 1px dashed rgba(37, 99, 235, .5);
  border-radius: 4px; pointer-events: none; }
.se-item .se-item-tag { position: absolute; top: -18px; left: 0; font-size: 10px; color: var(--brand);
  background: rgba(255, 255, 255, .92); padding: 0 4px; border-radius: 4px; white-space: nowrap; }
.se-item.empty { min-height: 46px; display: grid; place-items: center; background: rgba(37, 99, 235, .06); }
.se-item-none { font-size: 11px; color: var(--text-3); }
.se-item.loading::after { border-color: rgba(37, 99, 235, .95); }

/* 驳回 */
.cm-reject { color: #c0392b; }
.cm-reject-box { background: #fdecea; border: 1px solid #f6c6c2; color: #a8302a; border-radius: 10px;
  padding: 9px 12px; font-size: 12.5px; margin: 10px 0; }
.sign-reject { border-left: 4px solid #e0322c; background: #fdecea; }
.sign-reject b { display: block; font-size: 13.5px; color: #a8302a; }
.sign-reject p { margin: 6px 0 0; font-size: 12.5px; color: #a8302a; }

@media (max-width: 1000px) {
  .se-wrap { grid-template-columns: 1fr; }
  .se-left, .se-stage { max-height: none; }
  .se-right { position: static; }
  .se-paperwrap { width: 100%; }
}
@media (max-width: 720px) {
  .seal-lib { grid-template-columns: 1fr; }
  .se-vars { grid-template-columns: 1fr; }
  .se-ta, .se-vars input, .se-sealrow select { font-size: 16px; }   /* iOS 上不自动放大 */
}

/* ===== 第 50 项：工资模板的「绩效计算方式」明细 ===== */
.sal-stat { font-size: 12.5px; color: var(--text-2); background: var(--panel-2);
  border: 1px solid var(--line); border-radius: 10px; padding: 9px 12px; margin: 0 0 12px; line-height: 1.7; }
.sal-stat b { color: var(--text); }
.sal-stat b.hl { color: var(--blue); }
.sal-stat .dmut { font-size: 12px; }
.calc-tag { display: inline-block; font-size: 11px; padding: 2px 8px; border-radius: 6px;
  background: var(--line-2); color: var(--text-2); white-space: nowrap; }
.calc-tag.on { background: var(--blue-soft); color: var(--blue); font-weight: 600; }
@media (max-width: 720px) {
  .sal-stat { font-size: 12px; }
  .calc-tag { font-size: 10.5px; padding: 2px 6px; }
}
/* 工资模板表有 11 列，手机上一屏放不下：放进横滑容器，别把整页撑宽 */
.sal-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* ==========================================================================
   第 52 项：进销存（采购需求 → 采购单 → 采购入库 → 库存 → 项目出库 → 调拨 / 盘点）
   库存数量只由单据驱动，界面类名统一 inv- 前缀，避免与派单（dsp-）/ 合同（ct-）串味。
   ========================================================================== */
.inv-fgseg { max-width: 430px; margin-bottom: 14px; }
.inv-fgseg button { flex: 1; white-space: nowrap; }

/* 单据状态标签：一眼分清「草稿 / 在路上 / 已完成 / 已作废」 */
.inv-tag { display: inline-block; font-size: 11px; line-height: 1.75; padding: 1px 7px;
  border-radius: 6px; background: var(--line-2); color: var(--text-2); white-space: nowrap; }
.inv-tag.st-draft { background: var(--line-2); color: var(--text-2); }
.inv-tag.st-submitted, .inv-tag.st-warn, .inv-tag.st-ordered, .inv-tag.st-partial
  { background: var(--amber-soft); color: var(--amber); }
.inv-tag.st-approved, .inv-tag.st-received, .inv-tag.st-confirmed
  { background: var(--green-soft); color: var(--green); }
.inv-tag.st-closed { background: var(--blue-soft); color: var(--blue); }
.inv-tag.st-canceled, .inv-tag.st-reversed { background: #fdecea; color: var(--red); }
/* 流水业务类型标签 */
.inv-tag.biz-purchase { background: var(--green-soft); color: var(--green); }
.inv-tag.biz-project { background: var(--brand-soft); color: var(--brand); }
.inv-tag.biz-transfer_out, .inv-tag.biz-transfer_in { background: var(--blue-soft); color: var(--blue); }
.inv-tag.biz-return { background: var(--amber-soft); color: var(--amber); }
.inv-tag.biz-adjust { background: var(--line-2); color: var(--text-2); }
/* 第 74 项：采购需求「审核情况」的小字（谁 · 哪天批的）；批过了用绿色更醒目 */
.inv-audit { font-size: 11.5px; margin-top: 2px; color: var(--text-2); }
.inv-audit.ok { color: var(--green); }
/* 第 170 项：采购单 / 入库单的审核状态标签（aud-pending / aud-approved / aud-rejected / aud-canceled） */
.inv-tag.aud-pending { background: var(--amber-soft); color: var(--amber); }
.inv-tag.aud-approved { background: var(--green-soft); color: var(--green); }
.inv-tag.aud-rejected { background: #fdecea; color: var(--red); }
.inv-tag.aud-canceled { background: var(--line-2); color: var(--text-3); text-decoration: line-through; }
.inv-aud-who { display: block; font-size: 11px; font-weight: 500; color: var(--text-3); margin-top: 2px; }
/* 入库单列表：单号 / 状态 / 操作三列都别折行，否则「审核入库」会被挤成两行 */
.inv-inb-tbl td, .inv-inb-tbl th { white-space: nowrap; }
.inv-inb-tbl td:nth-child(2), .inv-inb-tbl td:nth-child(3) { white-space: normal; }
/* 采购单列表：第 170 项加了「审核」列与两个审核按钮，列宽不够时供应商会被挤成三行
   （杭州 / 米联 / 电子）、日期也会被折成「2026-10-」+「24」→ 一律不换行，宽度不够就横向滚动 */
.inv-scroll > table.inv-po-tbl { min-width: 1150px; }
.inv-po-tbl th, .inv-po-tbl td { white-space: nowrap; }
/* 期初入库明细：11 列，收紧到 1000 —— 再宽弹窗里「金额」列就该横向滚了 */
.inv-scroll > table.inv-item-tbl.opening-tbl { min-width: 1000px; }

/* ---- 第 171 项：供应商预存款 ---- */
/* 基础设置的供应商表多了「预存余额」+「预存」按钮（8 列）→ 给个能横滑的最小宽度 */
.inv-scroll > table.inv-sup-tbl { min-width: 1040px; }
/* 余额列后面紧挨着地址，数字和地址糊在一起 → 给余额列多一点右内边距 */
.inv-sup-tbl th:nth-child(5), .inv-sup-tbl td:nth-child(5) { padding-right: 22px; }
/* 预存款弹窗顶部的余额大字 */
.dep-hero { display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
  background: linear-gradient(135deg, #f4fbf6, #fff); border: 1px solid var(--line);
  border-radius: 14px; padding: 14px 18px; margin-bottom: 12px; }
.dep-hero-l { display: flex; flex-direction: column; gap: 3px; }
.dep-hero-l > span { font-size: 12px; color: var(--text-3); }
.dep-hero-l > b { font-size: 26px; font-weight: 800; color: var(--green); letter-spacing: -0.5px; line-height: 1.2; }
.dep-hero-r { font-size: 12.5px; color: var(--text-2); line-height: 1.9;
  border-left: 1px solid var(--line); padding-left: 20px; }
.dep-hero-r b { color: var(--text); font-weight: 700; }
.dep-tip { font-size: 12px; color: var(--text-3); line-height: 1.85; margin: -2px 0 10px; }
.dep-tip b { color: var(--brand); font-weight: 700; }
/* 预存款流水：金额 / 日期 / 类型都别折行，备注列才折 */
.dep-tbl td, .dep-tbl th { white-space: nowrap; }
.dep-tbl td:nth-child(6) { white-space: normal; }
.inv-tag.dep-in { background: var(--green-soft); color: var(--green); }
.inv-tag.dep-use { background: var(--brand-soft); color: var(--brand); }
.inv-tag.dep-refund { background: #fdecea; color: var(--red); }

/* 提示条 / 工具条 / 说明块 */
.inv-tip { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 12.5px;
  background: var(--blue-soft); border: 1px solid #d5e3ff; color: #1c4fa8;
  border-radius: 10px; padding: 9px 12px; margin: 0 0 12px; line-height: 1.7; }
.inv-tip.warn { background: var(--amber-soft); border-color: #f6d9a6; color: #8a5a00; }
.inv-tool { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin: 0 0 12px; }
.inv-msg { font-size: 12.5px; color: var(--text-2); background: var(--panel-2);
  border: 1px solid var(--line); border-radius: 10px; padding: 9px 12px; margin: 0 0 12px; line-height: 1.8; }
.inv-msg b { color: var(--text); }
.inv-warn { color: var(--red); font-weight: 700; }

/* 批次 / 流水 / 明细表列多，手机上放进横滑容器，别把整页撑宽 */
.inv-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.inv-scroll > table { min-width: 560px; }
/* 第 97 项：明细表多了「颜色」列 → 560px 不够，产品列会被压成竖排单字。
   给明细表一个够用的最小宽度（超宽就横向滚动，产品名列不被挤扁）。 */
.inv-scroll > table.inv-item-tbl { min-width: 680px; }
.inv-item-tbl td:first-child, .inv-item-tbl th:first-child { min-width: 150px; }
/* 第 167 项：库存台账多了「分类 / 型号 / 颜色 / 品牌」四列 → 560px 远远不够，
   名称列会被压成竖排单字。给一个够用的最小宽度，窄屏就横向滚动（同第 97 项明细表的处理）。 */
.inv-scroll > table.inv-stock-tbl { min-width: 1180px; }
/* 第 169 项：台账加了缩略图列 → 再宽 60px（无图版仍是 1180，一屏能多放几列） */
.inv-scroll > table.inv-stock-tbl.has-img { min-width: 1240px; }
/* 库存列表的产品缩略图：有图 / 占位同一套尺寸，行高不跟着图变 */
.inv-thumb { display: block; border-radius: 8px; border: 1px solid var(--line-2);
  background: #fff; object-fit: contain; padding: 1px; box-sizing: border-box; }
.inv-thumb.ph { display: grid; place-items: center; background: var(--panel-2);
  border-style: dashed; color: var(--text-3); font-size: 15px; }
td.ctr > .inv-thumb { margin: 0 auto; }
/* 「无图 / 有图」切换条比普通 .seg 小半号，跟搜索框同一行不抢视线 */
.inv-imgseg button { padding: 5px 12px; font-size: 12.5px; }
.inv-stock-tbl .inv-pname { font-weight: 600; }
.inv-stock-tbl .inv-psub { margin-top: 2px; font-size: 11.5px; line-height: 1.35; color: var(--text-3); }
/* 操作列（表格最后一列）的按钮一律不折行：
   否则「项目 / 客户」这类长文本列会把富余宽度全抢走，把「查看 单据 改 删」挤成两行。 */
.inv-scroll .tbl th.ctr:last-child, .inv-scroll .tbl td.ctr:last-child { white-space: nowrap; }

/* 弹窗里的键值信息块 */
.inv-kv { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 8px 14px; background: var(--panel-2); border: 1px solid var(--line);
  border-radius: 12px; padding: 12px 14px; margin: 0 0 12px; }
.inv-kv > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.inv-kv > div.wide { grid-column: 1 / -1; }
.inv-kv span { font-size: 11.5px; color: var(--text-3); }
.inv-kv b { font-size: 13px; font-weight: 600; word-break: break-all; }

/* 表格里的数量 / 单价输入框 */
.inv-inp { width: 82px; padding: 5px 8px; text-align: right; border: 1px solid var(--line);
  border-radius: 8px; background: #fff; font-variant-numeric: tabular-nums; }
.inv-inp:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); }

/* 第 97 项：单据明细的「颜色」下拉与色块（采购需求 / 采购单 / 采购入库 / 项目出库 / 仓库调拨共用）
   下拉可选项 = 产品库给这个产品预设的颜色（没预设则退回颜色库全量） */
.inv-colsel { width: 100%; max-width: 96px; padding: 5px 6px; font-size: 12.5px; color: var(--text);
  border: 1px solid var(--line); border-radius: 8px; background: #fff; cursor: pointer; }
.inv-colsel:hover { border-color: var(--brand); }
.inv-colsel:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); }
.inv-color { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; font-size: 12.5px; }
.inv-color i { width: 12px; height: 12px; border-radius: 50%; border: 1px solid rgba(0,0,0,.18); flex: none; }

/* 选产品：可搜索多选 */
.inv-pick { max-height: 300px; overflow: auto; border: 1px solid var(--line);
  border-radius: 12px; padding: 6px; background: var(--panel-2); }
/* 每行铺满整行：勾选 / 名称 / 品牌·型号 / 单位 —— 名称与品牌型号同一排，右侧不留一大片空白。
   注意：选择器必须带 .inv-pick 前缀，否则会被 `.modal-bd label { display:block }` 压掉（类+元素 > 单类）。 */
.inv-pick .inv-pick-i { display: grid; grid-template-columns: auto minmax(0, 1.15fr) minmax(0, 1fr) auto;
  align-items: center; gap: 12px; padding: 9px 11px; margin: 0;
  border-radius: 9px; font-size: 13px; cursor: pointer; }
.inv-pick .inv-pick-i:hover { background: #fff; }
.inv-pick .inv-pick-i input { width: auto; margin: 0; }
.inv-picked { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.inv-chip { display: inline-flex; align-items: center; gap: 5px; font-size: 12px;
  background: var(--brand-soft); color: var(--brand); border-radius: 999px; padding: 3px 6px 3px 10px; }
.inv-chip b { cursor: pointer; font-weight: 700; padding: 0 3px; color: inherit; }
.inv-chip b:hover { color: var(--red); }
.u { color: var(--text-3); font-size: 12px; }

/* 选产品的产品行：名称 / 品牌·型号 / 单位 排成一行（不再两行；过长省略号） */
.inv-pick-i .n { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.inv-pick-i .b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: 12px; color: var(--text-3); }
/* 单位列给足宽度（只有 12px 宽时「个」会被挤扁），右对齐贴住行尾 */
.inv-pick-i .u { justify-self: end; white-space: nowrap; min-width: 30px; text-align: right; }

/* 选产品的多条件筛选：分类 / 品牌 的多选下拉菜单 */
.inv-msbar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0 0 10px; }
.inv-dd { position: relative; }
/* 下拉框做大一点，别挤成一小条（右侧原本空着一大截） */
.inv-dd-btn { border: 1px solid var(--line); background: #fff; white-space: nowrap;
  min-width: 150px; text-align: left; padding: 7px 12px; font-size: 13px;
  display: inline-flex; align-items: center; justify-content: flex-start; }
.inv-dd-pop { position: absolute; z-index: 6; top: calc(100% + 4px); left: 0; min-width: 220px; max-width: 320px;
  background: #fff; border: 1px solid var(--line); border-radius: 12px;
  box-shadow: 0 10px 28px rgba(16, 24, 40, .16); padding: 8px; }
.inv-dd-hd { display: flex; align-items: center; gap: 6px; padding: 2px 4px 6px;
  border-bottom: 1px solid var(--line); margin-bottom: 6px; font-size: 12px; }
.inv-dd-hd b { font-size: 12.5px; color: var(--text); }
.inv-dd-list { max-height: 220px; overflow: auto; }
.inv-dd-i { display: flex; align-items: center; gap: 7px; padding: 5px 6px;
  border-radius: 8px; font-size: 12.5px; cursor: pointer; }
.inv-dd-i:hover { background: var(--panel-2); }
.inv-dd-i input { width: auto; margin: 0; }

/* 选产品弹窗 / 筛选条：窄屏下名称与品牌型号各让一步，品牌型号下移半行、单位贴右 */
@media (max-width: 640px) {
  .inv-pick .inv-pick-i { grid-template-columns: auto minmax(0, 1fr) auto; row-gap: 2px; gap: 10px; }
  .inv-pick-i .n { grid-column: 2; }
  .inv-pick-i .b { grid-column: 2; grid-row: 2; font-size: 11px; }
  .inv-pick-i .u { grid-column: 3; grid-row: 1 / span 2; }
  .inv-dd-btn { min-width: 120px; }
  .inv-dd-pop { min-width: 180px; max-width: 260px; }
  .ip-filter .search { flex: 1 1 100%; min-width: 0; }
}

/* 颜色字典的色块 */
.inv-swatch { display: inline-block; width: 14px; height: 14px; border-radius: 4px;
  border: 1px solid var(--line); vertical-align: -2px; margin-right: 5px; }

@media (max-width: 720px) {
  .inv-fgseg { max-width: none; }
  .inv-fgseg button { font-size: 12px; }
  .inv-inp { font-size: 16px; width: 74px; }   /* iOS 上不自动放大 */
  .inv-kv { grid-template-columns: 1fr; padding: 10px 12px; }
}

/* ==========================================================================
   第 168 项：进销存二级菜单改成「横向等宽」的一排一排
   用户原话：「可否是点击进销存，然后二级菜单从左边往右，对称点。现在有点错层了」。
   原来是 .seg + flex:0 0 auto —— 每个按钮宽度跟着字数走，一行放不下就换行，
   第二行从左边一个短按钮开始、右侧空一大块，看着就是「错层」。
   现在换成 grid：列数由 invAdNav() 按**项数**算（12 项 → 6 列 2 行、10 项 → 5 列 2 行），
   每格等宽、从左往右排，换行也不会参差。（--inv-cols 由 JS 写在 #invAdNav 上。）
   ========================================================================== */
.inv-adnav {
  display: grid; grid-template-columns: repeat(var(--inv-cols, 6), minmax(0, 1fr));
  gap: 8px; margin-bottom: 14px;
}
.inv-adnav button {
  display: flex; align-items: center; justify-content: center; gap: 6px; min-width: 0;
  padding: 9px 8px; border-radius: 11px; border: 1px solid var(--line); background: #fff;
  font-size: 13px; color: var(--text-2); transition: all .16s ease; white-space: nowrap;
}
.inv-adnav button .ia-ic { flex: none; font-size: 14px; line-height: 1; }
.inv-adnav button .ia-t { overflow: hidden; text-overflow: ellipsis; }
.inv-adnav button:hover { border-color: #d3d9e3; color: var(--text); box-shadow: var(--shadow-sm); }
.inv-adnav button.on { background: var(--brand); border-color: var(--brand); color: #fff; font-weight: 600;
  box-shadow: 0 6px 14px rgba(255,103,25,.22); }
.inv-adnav button.on .ia-t { font-weight: 600; }

/* ==========================================================================
   第 168 项：进销存「首页一览」
   六张统计卡 + 待办审批 / 欠款对账左右两栏 + 库存预警。
   ========================================================================== */
.dstat-i.ov-link { cursor: pointer; transition: all .16s ease; }
.dstat-i.ov-link:hover { border-color: #d3d9e3; box-shadow: var(--shadow-sm); transform: translateY(-1px); }
/* 后台内容区在 1440 屏上只有 ~860px 宽：待办表（6 列，还要放「去处理」）和欠款两栏
   并排会互相挤到看不全，所以一律上下堆叠；只有「欠款与对账」内部还分左右两栏。 */
.inv-ov-grid { display: grid; grid-template-columns: minmax(0, 1fr);
  gap: 14px; margin-bottom: 14px; align-items: start; }
.inv-ov-grid > .panel { min-width: 0; }
/* 第 174 项：宽屏时「待办与审批」和「欠款与对账」并排，一屏看完不用往下滚；
   右侧变窄后它内部的「供应商 / 客户」两栏改成一上一下，否则每栏只剩 300px 会挤成一团。 */
@media (min-width: 1500px) {
  .inv-ov-grid { grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); }
  .inv-ov-grid > .panel:last-child .inv-ov-two { grid-template-columns: 1fr; gap: 10px; }
}
/* 概览「待办与审批」表里的「内容」列：原来写死 inline max-width:340px，
   宽屏并排后 988px 的表格里白白截断半句话。挪进 CSS 才能随屏幕放宽。
   ⚠️ 内容列一放宽就会去挤「日期」「提交人」，所以这张表所有格一律 nowrap，
   富余宽度全留给内容列（内容本身靠 max-width + ellipsis 收口）。 */
.ov-tbl td, .ov-tbl th { white-space: nowrap; }
.inv-ov-grid .ov-txt { max-width: 340px; overflow: hidden; text-overflow: ellipsis; }
@media (min-width: 1500px) {
  .inv-ov-grid .ov-txt { max-width: 460px; }
}
.inv-ov-two { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.inv-ov-sub { font-size: 12px; color: var(--text-3); font-weight: 600; margin: 2px 0 6px; }
.inv-ov-sub b { color: var(--text); }
.inv-ov-kv { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-bottom: 10px;
  font-size: 12.5px; color: var(--text-2); }
.inv-ov-kv em { font-style: normal; font-weight: 700; font-variant-numeric: tabular-nums; }
.inv-ov-row { display: flex; align-items: center; gap: 8px; padding: 6px 0;
  border-bottom: 1px dashed var(--line-2); font-size: 12.5px; }
.inv-ov-row:last-child { border-bottom: 0; }
.inv-ov-row .nm { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.inv-ov-row .amt { flex: none; font-variant-numeric: tabular-nums; font-weight: 600; }
.inv-ov-more { font-size: 11.5px; color: var(--text-3); padding-top: 8px; }
@media (max-width: 980px) {
  .inv-ov-two { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 1100px) { .inv-adnav { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 760px) { .inv-adnav { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 520px) {
  .inv-adnav { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
}
@media (max-width: 720px) {
  .inv-adnav button { padding: 7px 6px; font-size: 12px; }
  /* 面板标题栏里的「导出 Excel」等按钮：窄屏换行，别把整页撑宽
     （与 #tab-perf / #tab-salary 的处理方式一致） */
  #tab-inv .panel-hd { flex-wrap: wrap; }
  #tab-inv .panel-hd h3 { white-space: nowrap; flex: 0 0 auto; }
  #tab-inv .panel-hd .grow { display: none; }
}

/* 子弹窗（产品选择器 / 从需求带入）：追加在正在填写的弹窗之上，关闭时只移除自己。
   openModal 是替换式，如果直接用它会把底下的表单整个冲掉。 */
.inv-layer { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center;
  padding: 24px; background: rgba(16,24,40,.42); }
.inv-layer .modal { max-width: 680px; }
@media (max-width: 720px) { .inv-layer { padding: 12px; } }

/* ==========================================================================
   进销存：关联项目的财务口径 + 四种单据（打印 / 分享图片 / PDF）+ 单据模板
   ========================================================================== */
/* 列表里「项目 / 客户」下面的合同 / 已收 / 付款比例 */
.inv-fin { font-size: 11.5px; color: var(--text-3); line-height: 1.5; }
.inv-fin .ifr { display: inline-block; margin-left: 6px; padding: 0 5px; border-radius: 999px;
  background: var(--line-2); color: var(--text-2); font-size: 11px; white-space: nowrap; }
.inv-fin .ifr.ok { background: var(--green-soft); color: var(--green); }
/* 采购需求弹窗里选中项目后的财务条 */
.inv-finbar { display: flex; flex-wrap: wrap; gap: 6px 18px; align-items: center; font-size: 12.5px;
  color: var(--text-2); background: var(--brand-soft); border: 1px solid #ffe0c9; border-radius: 8px;
  padding: 8px 12px; margin: 10px 0 0; }
.inv-finbar b { color: var(--text); font-weight: 600; }
.inv-finbar em { font-style: normal; font-weight: 700; color: var(--brand); }
.inv-finbar em.ok { color: var(--green); }

/* ==========================================================================
   第 72 项：采购付款（应付台账）与往来对账 / 对账单
   ========================================================================== */
.inv-ok { color: var(--green); font-weight: 700; }
/* 应付汇总小条：应付 / 已付 / 未付 */
.pay-sum { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; }
.pay-sum .ps { display: inline-flex; align-items: baseline; gap: 4px; font-size: 12px; color: var(--text-3); }
.pay-sum .ps b { font-size: 13.5px; color: var(--text); font-variant-numeric: tabular-nums; }
.pay-sum .ps.left b { color: var(--red); }
.pay-sum .ps.clear b { color: var(--green); }
.pay-sum .ps.paid b { color: var(--blue); }
/* 分次付款：一笔一行的流水 */
.pay-rows { max-height: 46vh; overflow: auto; }
.pay-rows .tbl td { padding: 6px 10px; }
.pay-thumb { width: 30px; height: 30px; object-fit: cover; border-radius: 6px; border: 1px solid var(--line);
  vertical-align: middle; margin-right: 5px; }
/* 已结清的供应商行：压暗一点，未付的行才是要盯的 */
.tbl tbody tr.pay-clear-row > td { background: var(--green-soft); }
/* 对账单：弹层里的一张可打印纸 */
.stmt-paper { background: #fff; border: 1px solid var(--line); border-radius: 10px;
  padding: 26px 30px 30px; max-width: 900px; margin: 0 auto; color: #1a2233; }
.stmt-hd { text-align: center; border-bottom: 2px solid var(--brand); padding-bottom: 12px; margin-bottom: 16px; }
.stmt-hd h2 { margin: 0 0 6px; font-size: 21px; letter-spacing: 2px; }
.stmt-hd .sub { font-size: 12.5px; color: #5b6577; }
.stmt-meta { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 24px;
  font-size: 12.5px; color: #5b6577; margin-bottom: 14px; }
.stmt-meta b { color: #1a2233; }
.stmt-kpi { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 0 0 16px; }
.stmt-kpi .k { border: 1px solid var(--line); border-radius: 9px; padding: 9px 11px; background: #fafbfd; }
.stmt-kpi .k span { display: block; font-size: 11.5px; color: #98a2b3; margin-bottom: 3px; }
.stmt-kpi .k b { font-size: 16px; font-variant-numeric: tabular-nums; }
.stmt-kpi .k.red b { color: #e0322c; }
.stmt-kpi .k.green b { color: #12a150; }
.stmt-sec { font-size: 13px; font-weight: 700; margin: 18px 0 8px; padding-left: 9px; border-left: 3px solid var(--brand); }
.stmt-paper .tbl { font-size: 12.5px; }
.stmt-paper .tbl thead th { background: #f4f6f9; color: #5b6577; font-size: 12px; }
.stmt-foot { margin-top: 22px; display: flex; justify-content: space-between; font-size: 12.5px; color: #5b6577; }
.stmt-note { margin-top: 10px; font-size: 11.5px; color: #98a2b3; line-height: 1.7; }

/* ---- 单据工具条 + 纸张 ---- */
.inv-doctool { display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 12px 18px; border-bottom: 1px solid var(--line-2); background: var(--panel-2); }
.inv-doctool .hint { font-size: 12px; color: var(--text-3); }
.inv-doctool .grow { flex: 1; }
.inv-doc-scroll { padding: 16px 18px 22px; overflow: auto; background: #eef1f5; max-height: 68vh; }

.idoc-paper { width: 794px; max-width: 100%; margin: 0 auto; background: #fff; color: var(--text);
  border: 1px solid var(--line); border-radius: 6px; padding: 26px 28px 20px; font-size: 12.5px; line-height: 1.7; }
.idoc-hd { display: flex; align-items: flex-start; gap: 16px; padding-bottom: 12px; border-bottom: 2px solid var(--text); }
.idoc-l { flex: 1; min-width: 0; }
.idoc-co { font-size: 17px; font-weight: 700; letter-spacing: .5px; }
.idoc-sub { font-size: 11.5px; color: var(--text-2); }
.idoc-r { text-align: right; flex: 0 0 auto; }
.idoc-title { font-size: 18px; font-weight: 700; letter-spacing: 3px; }
.idoc-no { font-size: 11.5px; color: var(--text-2); }
.idoc-meta { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 26px; margin: 14px 0; }
.idoc-meta > div { display: flex; gap: 8px; min-width: 0; }
.idoc-meta > div.wide { grid-column: 1 / -1; }
.idoc-meta > div > span { flex: 0 0 78px; color: var(--text-3); }
.idoc-meta > div > b { flex: 1; min-width: 0; font-weight: 500; overflow-wrap: anywhere; }
.idoc-tbl { width: 100%; border-collapse: collapse; margin-top: 6px; }
.idoc-tbl th, .idoc-tbl td { border: 1px solid #c6cfdd; padding: 6px 8px; text-align: left; vertical-align: top; }
.idoc-tbl thead th { background: #f2f5f9; font-weight: 600; text-align: center; }
.idoc-tbl td.num, .idoc-tbl th.num { text-align: right; }
.idoc-tbl td.ctr { text-align: center; }
.idoc-tbl td.mut { color: var(--text-3); }
.idoc-tbl tr.idoc-sum td { background: #fafbfd; font-weight: 600; text-align: right; }
.idoc-tbl tr.idoc-sum td:first-child { text-align: right; }
.idoc-tbl > tfoot { display: none; }               /* 页脚行只在打印时出现 */
.idoc-pm { font-size: 11px; color: var(--text-3); }
.idoc-warn { color: var(--red); }
.idoc-empty { padding: 12px; text-align: center; color: var(--text-3); }
.idoc-note, .idoc-terms { margin-top: 10px; font-size: 12px; color: var(--text-2); white-space: pre-wrap; }
.idoc-note b, .idoc-terms b { color: var(--text); margin-right: 6px; }
.idoc-signs { display: flex; flex-wrap: wrap; gap: 10px 26px; margin-top: 20px; padding-top: 12px; border-top: 1px dashed var(--line); }
.idoc-signs .isg { flex: 1 1 130px; min-width: 110px; }
.idoc-signs .isg span { display: block; font-size: 11.5px; color: var(--text-3); }
.idoc-signs .isg b { display: block; min-height: 22px; border-bottom: 1px solid #c6cfdd; font-weight: 500; }
.idoc-signs .isg i { display: block; font-style: normal; font-size: 11px; color: var(--text-3); }
.idoc-foot { margin-top: 14px; padding-top: 8px; border-top: 1px solid var(--line-2); font-size: 11px; color: var(--text-3); text-align: center; }

/* ---- 分享图片弹层 ---- */
.modal.inv-imgmodal { max-width: 780px; }
.inv-imgwrap { max-height: 64vh; overflow: auto; background: var(--panel-2); border: 1px solid var(--line);
  border-radius: 8px; padding: 8px; }
.inv-imgwrap img { width: 100%; display: block; }

/* ---- 单据模板编辑 ---- */
.inv-seg { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 14px; }
.inv-seg button { padding: 6px 14px; border-radius: 999px; border: 1px solid var(--line); background: var(--panel);
  font-size: 12.5px; color: var(--text-2); }
.inv-seg button.on { background: var(--brand); border-color: var(--brand); color: #fff; font-weight: 600; }
.inv-tplgrid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 22px; }
.inv-tplcol label { display: block; font-size: 12.5px; color: var(--text-2); margin: 12px 0 5px; font-weight: 500; }
.inv-tplcol > label:first-child { margin-top: 0; }
.inv-tplcol input, .inv-tplcol textarea, .inv-tplcol select { width: 100%; padding: 9px 12px;
  border: 1px solid var(--line); border-radius: 9px; background: var(--panel); }
.inv-tplcol textarea { resize: vertical; font-family: inherit; }
.inv-tplsign { display: flex; gap: 6px; align-items: center; margin-bottom: 8px; }
.inv-tplsign select { flex: 0 0 106px; }
.inv-tplsign input { flex: 1; min-width: 0; }
.inv-tplsign .btn { flex: 0 0 auto; }

/* ---- 第 73 项：产品颜色（产品库录入 / 配置清单选择 / 配货单显示） ---- */
/* 配置清单的「颜色」下拉：与安装位置同款；后台没设颜色的产品显示一条横杠 */
.color-edit { width: 100%; max-width: 92px; padding: 4px 6px; border: 1px solid var(--line); border-radius: 8px;
  font-size: 12px; background: var(--panel-2); color: var(--text); outline: none; cursor: pointer;
  transition: border-color .15s; }
.color-edit:hover { border-color: var(--brand); }
.color-edit:focus { border-color: var(--brand); background: #fff; }
.color-none { color: var(--text-3); font-size: 12px; }
/* 产品库「可选颜色」列：色块 + 颜色名的小药丸（不换行，列宽随颜色个数自适应） */
.prod-colors { display: inline-flex; flex-wrap: nowrap; gap: 3px; cursor: pointer; white-space: nowrap; }
.cp-chip { display: inline-flex; align-items: center; gap: 3px; padding: 0 5px 0 3px; border-radius: 999px;
  background: var(--panel-2); border: 1px solid var(--line); font-size: 10.5px; line-height: 17px;
  color: var(--text-2); white-space: nowrap; }
.cp-chip .cc { width: 9px; height: 9px; border-radius: 50%; border: 1px solid rgba(0, 0, 0, .18); flex: 0 0 auto; }
.cp-empty { color: var(--text-3); border-style: dashed; }
/* 色板：产品库「＋ 颜色」弹窗与「编辑 / 新增产品」弹窗共用 */
.cp-swatches { display: flex; flex-wrap: wrap; gap: 6px; padding: 8px 10px; border: 1px solid var(--line);
  border-radius: 10px; background: var(--panel-2); }
.cp-sw { display: inline-flex; align-items: center; gap: 5px; padding: 4px 9px 4px 6px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--panel); font-size: 12px; color: var(--text-2); cursor: pointer; }
.cp-sw i { width: 12px; height: 12px; border-radius: 50%; border: 1px solid rgba(0, 0, 0, .18); flex: 0 0 auto; }
.cp-sw:hover { border-color: var(--brand); }
.cp-sw.on { border-color: var(--brand); background: var(--brand-soft); color: var(--brand); font-weight: 600; }
.cp-sw b { font-size: 11px; }
.cp-chosen { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; min-height: 32px; padding: 7px 9px;
  margin-top: 4px; border: 1px dashed var(--line); border-radius: 10px; background: var(--panel-2); }
.cp-pick { display: inline-flex; align-items: center; gap: 5px; padding: 3px 4px 3px 8px; border-radius: 999px;
  background: var(--panel); border: 1px solid var(--line); font-size: 12px; }
.cp-pick i { width: 11px; height: 11px; border-radius: 50%; border: 1px solid rgba(0, 0, 0, .18); }
.cp-pick button { border: none; background: none; color: var(--text-3); cursor: pointer; font-size: 12px; padding: 0 2px; }
.cp-pick button:hover { color: var(--red); }
.cp-none { color: var(--text-3); font-size: 12px; }
/* 第 85 项：色板来源统一成「进销存 → 基础设置 → 颜色」的颜色库 */
.cp-sw.off { border-style: dashed; opacity: .8; }             /* 已停用 / 已移除的老颜色，仍可见可取消 */
.cp-sw.off em { font-style: normal; font-size: 10px; line-height: 14px; color: var(--amber);
  background: var(--amber-soft); border-radius: 4px; padding: 0 4px; }
.cp-lib-hint { font-size: 12px; color: var(--text-3); margin: 6px 0 8px; line-height: 1.75; }
.cp-lib-hint b { color: var(--text-2); }
.cp-go { border: none; background: none; color: var(--brand); cursor: pointer; font: inherit;
  text-decoration: underline; padding: 0 3px; }
.cp-go:hover { opacity: .75; }
.cp-lib-empty { font-size: 12px; color: var(--text-3); }
/* 进销存基础设置里的说明（颜色改名会同步产品库） */
.inv-hint { font-size: 12px; color: var(--text-3); line-height: 1.75; margin: 8px 0 2px; }
.inv-hint b { color: var(--text-2); }

@media (max-width: 900px) {
  .inv-tplgrid { grid-template-columns: minmax(0, 1fr); }
  .idoc-paper { width: 100%; padding: 18px 16px 14px; }
  .idoc-meta { grid-template-columns: minmax(0, 1fr); }
  .inv-doc-scroll { padding: 12px; }
}

/* ---- 打印：只留弹窗里的那张单据；页边距改由纸张内边距补回（@page margin 被 printNoHeader 清零以去掉网址页脚） ---- */
@media print {
  body.ct-print .inv-doc-scroll { padding: 0 !important; background: #fff !important;
    max-height: none !important; overflow: visible !important; }
  /* 第 72 项：对账单打印 —— 去掉屏幕上的卡片外框，换成分页友好的排布 */
  body.ct-print .stmt-paper { border: none !important; border-radius: 0 !important;
    padding: 0 !important; max-width: none !important; }
  body.ct-print .stmt-paper .tbl tr { page-break-inside: avoid; break-inside: avoid; }
  body.ct-print .stmt-sec { page-break-after: avoid; break-after: avoid; }
  body.ct-print .stmt-kpi { page-break-inside: avoid; break-inside: avoid; }
  body.qt-print .idoc-paper { padding: 12mm !important; border: none !important;
    border-radius: 0 !important; width: auto !important; max-width: none !important; }
  .idoc-tbl > tfoot { display: table-footer-group; }
  .idoc-tbl > tfoot .print-foot > td { border: none !important; background: none !important;
    padding: 6mm 0 0 !important; font-size: 10.5px; color: #7c8798; text-align: center; }
  .idoc-tbl tr { page-break-inside: avoid; break-inside: avoid; }
  .idoc-signs .isg { break-inside: avoid; }
}

/* ==========================================================================
   第 75 项：前台「AI方案」（户型图框选 / 实时预览 / 点位图 / PPT）
   配色沿用全局变量；区域自身的颜色通过内联 --pc 传进来（每个区域一个色）。
   ========================================================================== */
.plan-bar { flex-wrap: wrap; row-gap: 8px; }
.plan-grid { display: grid; grid-template-columns: minmax(0, 1.32fr) minmax(340px, 1fr); gap: 16px; align-items: start; }
.plan-main, .plan-side { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
@media (max-width: 1180px) { .plan-grid { grid-template-columns: minmax(0, 1fr); } }

/* ---- 户型图 + 框选层 ---- */
.plan-stage { position: relative; max-width: 880px; margin: 0 auto; border: 1px dashed var(--line);
  border-radius: 12px; background: repeating-linear-gradient(45deg, #fbfcfe, #fbfcfe 10px, #f7f9fc 10px, #f7f9fc 20px); }
.plan-stage img { display: block; width: 100%; height: auto; border-radius: 11px; }
.plan-layer { position: absolute; inset: 0; touch-action: none; }
.plan-layer.plan-cross { cursor: crosshair; }
.plan-empty { display: flex; flex-direction: column; gap: 6px; align-items: center; justify-content: center;
  min-height: 260px; padding: 24px; text-align: center; color: var(--text-3); font-size: 13px; }
.plan-empty b { font-size: 15px; color: var(--text-2); }

.plan-box { position: absolute; box-sizing: border-box; border: 2px solid var(--pc, var(--blue));
  border-radius: 8px; cursor: move; }
.plan-box.on { box-shadow: 0 0 0 2px rgba(43, 127, 255, .35); }
.plan-box-name { position: absolute; left: 0; top: 0; transform: translateY(-100%); margin-top: -3px;
  max-width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
  padding: 1px 8px; border-radius: 7px 7px 7px 0; background: var(--pc, var(--blue));
  color: #fff; font-size: 11.5px; font-weight: 600; line-height: 1.7; }
.plan-h { position: absolute; right: -8px; bottom: -8px; width: 15px; height: 15px; border-radius: 50%;
  background: #fff; border: 2px solid var(--pc, var(--blue)); cursor: nwse-resize; display: none; }
.plan-box.on .plan-h, .plan-box:hover .plan-h { display: block; }

/* ---- 区域卡片 ---- */
.plan-card { border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--panel-2);
  padding: 10px 12px 12px; margin-bottom: 10px; }
.plan-card:last-child { margin-bottom: 0; }
.plan-card.on { border-color: var(--pc, var(--blue)); box-shadow: 0 0 0 2px rgba(47, 109, 246, .12); }
.plan-card-hd { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; }
.plan-dot { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.plan-card-hd .plan-name { flex: 1 1 auto; min-width: 70px; font-weight: 600; font-size: 13.5px; padding: 5px 8px; }
.plan-cnt { flex: none; font-size: 11.5px; color: var(--text-3); }
.plan-card-hd .btn { padding: 2px 7px; line-height: 1.6; }

.plan-chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 8px; }
.plan-chip { display: inline-flex; align-items: center; gap: 4px; max-width: 100%;
  background: #fff; border: 1px solid var(--line); border-left: 3px solid var(--pc, var(--blue));
  border-radius: 999px; padding: 2px 4px 2px 9px; font-size: 11.5px; color: var(--text-2); }
.plan-chip-x { border: none; background: none; cursor: pointer; color: var(--text-3);
  font-size: 13px; line-height: 1; padding: 0 4px; }
.plan-chip-x:hover { color: var(--red); }
.plan-none { font-size: 11.5px; color: var(--text-3); }
.plan-additem { font-size: 11.5px; padding: 3px 6px; border: 1px dashed var(--line); border-radius: 999px;
  background: #fff; color: var(--text-2); max-width: 190px; }
.plan-scene { width: 100%; font-family: inherit; font-size: 12.5px; line-height: 1.75; padding: 8px 10px;
  border: 1px solid var(--line); border-radius: 8px; background: #fff; color: var(--text); resize: vertical; }
.plan-card-ft { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.plan-tag { font-size: 11px; color: var(--text-3); }
.plan-tag.ai { color: var(--blue); }
.plan-lb { display: block; font-size: 12px; color: var(--text-2); margin: 10px 0 4px; font-weight: 600; }
.plan-lb:first-child { margin-top: 0; }
#plText input, #plText textarea { width: 100%; font-family: inherit; font-size: 12.5px; line-height: 1.7;
  padding: 7px 10px; border: 1px solid var(--line); border-radius: 8px; background: #fff; color: var(--text); }
#plText textarea { resize: vertical; }
.plan-note { font-size: 11.5px; color: var(--text-3); line-height: 1.8; margin: 12px 0 0; }

/* ---- 方案实时预览（就是 PPT / PDF 里的内容） ---- */
.plan-pv-doc { padding: 4px 2px 0; }
.plan-pv-cover { border-radius: 10px; padding: 18px 18px 16px; color: #fff;
  background: linear-gradient(135deg, #0e1b2c, #16304f 70%, #1c4472); }
.plan-pv-title { font-size: 19px; font-weight: 700; letter-spacing: .5px; }
.plan-pv-sub { font-size: 12.5px; color: #9fb8d8; margin-top: 6px; }
.plan-pv-meta { font-size: 11.5px; color: #7c93b0; margin-top: 12px; }
.plan-pv-intro { font-size: 12.5px; line-height: 1.9; color: var(--text-2); margin: 14px 0; }
.plan-pv-map { display: block; width: 100%; height: auto; border: 1px solid var(--line); border-radius: 10px; }
.plan-pv-cards { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; }
.plan-pv-card { border: 1px solid var(--line); border-radius: 10px; background: var(--panel-2); padding: 10px 12px; }
.plan-pv-hd { display: flex; align-items: center; gap: 7px; font-size: 13.5px; margin-bottom: 6px; }
.plan-pv-txt { font-size: 12.5px; line-height: 1.85; color: var(--text-2); white-space: pre-wrap; }
.plan-pv-outro { font-size: 12.5px; line-height: 1.9; color: var(--text-2); margin: 16px 0 4px;
  padding-top: 12px; border-top: 1px dashed var(--line); }

/* ---- 离屏 PDF 用的方案文档 ---- */
.plan-doc { background: #fff; color: #1a2233; font-family: "Microsoft YaHei", "PingFang SC", sans-serif; }
.plan-doc-cover { border-radius: 14px; padding: 34px 30px 30px; color: #fff;
  background: linear-gradient(135deg, #0e1b2c, #16304f 70%, #1c4472); }
.plan-doc-t1 { font-size: 30px; font-weight: 700; }
.plan-doc-t2 { font-size: 15px; color: #9fb8d8; margin-top: 10px; }
.plan-doc-t3 { font-size: 14px; color: #8aa8c8; margin-top: 22px; }
.plan-doc-t4 { font-size: 13px; color: #7c93b0; margin-top: 6px; }
.plan-doc-intro { font-size: 14px; line-height: 2; color: #2a3446; margin: 22px 2px; }

/* 第 161 项：方案书的「项目信息」页（对标专业方案书第 2 页） */
.plan-doc-info { border: 1px solid #d8e1ec; border-radius: 12px; padding: 18px 20px 16px; background: #f9fbfe; }
.plan-doc-info-hd { font-size: 15px; font-weight: 700; color: #16233a; margin-bottom: 12px;
  padding-left: 10px; border-left: 3px solid #2b7fff; line-height: 1.2; }
.plan-doc-info-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 18px; }
.plan-pi { min-width: 0; }
.plan-pi span { display: block; font-size: 11.5px; color: #98a2b3; margin-bottom: 2px; }
.plan-pi b { display: block; font-size: 13.5px; color: #16233a; font-weight: 600; word-break: break-all; }
.plan-pi:last-child:nth-child(odd) { grid-column: 1 / -1; }
/* 客户需求一般写一整句，半宽格子会挤成一坨 → 单独通栏（第 161 项） */
.plan-pi.plan-pi-wide { grid-column: 1 / -1; }
/* 施工要点（跟着每个区域卡片走） */
.plan-doc-spec { margin-top: 12px; padding-top: 10px; border-top: 1px dashed #d8e1ec; }
.plan-doc-spec>b { font-size: 12.5px; color: #1e874b; display: block; margin-bottom: 6px; }
.plan-doc-spec ul { margin: 0; padding: 0; list-style: none; }
.plan-doc-spec li { font-size: 12px; line-height: 1.85; color: #4b5563; padding-left: 12px; position: relative; }
.plan-doc-spec li:before { content: "·"; position: absolute; left: 2px; color: #1e874b; }
.plan-doc-spec li em { font-style: normal; font-weight: 600; color: #16233a; margin-right: 4px; }
.plan-doc-map { margin: 18px 0; }
.plan-doc-map img { display: block; width: 100%; height: auto; border: 1px solid #d8e1ec; border-radius: 10px; }
.plan-doc-card { border: 1px solid #d8e1ec; border-radius: 12px; padding: 16px 18px; margin-bottom: 14px;
  background: #f9fbfe; break-inside: avoid; page-break-inside: avoid; }
.plan-doc-hd { display: flex; align-items: center; gap: 8px; font-size: 16px; margin-bottom: 8px; }
.plan-doc-hd i { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.plan-doc-hd span { font-size: 12px; color: #98a2b3; font-weight: 400; }
.plan-doc-txt { font-size: 13.5px; line-height: 1.95; color: #2a3446; white-space: pre-wrap; }
.plan-doc-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.plan-pv-chip { font-size: 12px; color: #2a3446; background: #fff; border: 1px solid #d8e1ec;
  border-radius: 999px; padding: 3px 10px; }
.plan-doc-outro { font-size: 13px; line-height: 2; color: #5b6577; margin: 20px 2px 6px;
  border-top: 1px dashed #d8e1ec; padding-top: 14px; }

/* 手机：户型图与区域卡片都要占满宽，卡片头部放不下就折行（别把删除按钮挤出去） */
@media (max-width: 720px) {
  .plan-grid { gap: 12px; }
  .plan-stage { max-width: 100%; }
  .plan-card { padding: 9px 10px 11px; }
  .plan-card-hd { flex-wrap: wrap; row-gap: 6px; }
  .plan-card-hd .plan-name { flex: 1 1 auto; }
  .plan-additem { max-width: 100%; }
  .plan-chip { font-size: 11px; }
  .plan-pv-title { font-size: 16px; }
  .plan-empty { min-height: 200px; padding: 16px; }
}

/* 打印 / 导出 PDF 时不要工具栏 */
@media print {
  .plan-bar, #plAreas .plan-additem, .plan-h { display: none !important; }
}

/* ---------- 第 76 项：看板 KPI 可点开明细 + 收款/低毛利口径 ---------- */
/* 四张指标卡都能点：点进去看这笔金额是哪些项目凑出来的 */
.bd-kpi { position: relative; }
.bd-kpi.clickable { cursor: pointer; transition: border-color .15s, box-shadow .15s, transform .12s; }
.bd-kpi.clickable:hover { border-color: var(--brand); box-shadow: 0 4px 14px rgba(0, 0, 0, .08); transform: translateY(-1px); }
.bd-kpi.clickable:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.bd-kpi .bd-go { position: absolute; right: 10px; top: 9px; font-style: normal; font-size: 11px;
  font-weight: 600; color: var(--brand); opacity: .5; transition: opacity .15s; }
.bd-kpi.clickable:hover .bd-go, .bd-kpi.clickable:focus-visible .bd-go { opacity: 1; }

/* 项目明细弹窗 */
.bd-dt-bar { font-size: 13px; color: var(--text-2); margin-bottom: 6px; }
.bd-dt-bar b { color: var(--text); }
.bd-dt-note { font-size: 12px; color: var(--text-3); line-height: 1.75; background: var(--panel-2);
  border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; margin-bottom: 12px; }
.bd-dt-note b { color: var(--text-2); }
.bd-dt-tag { display: inline-block; font-size: 11.5px; padding: 1.5px 8px; border-radius: 20px;
  background: var(--panel-2); border: 1px solid var(--line); color: var(--text-3); white-space: nowrap; }
.bd-dt-tag.ok { background: var(--green-soft); border-color: transparent; color: var(--green); }
.bd-dt-tag.warn { background: var(--amber-soft); border-color: transparent; color: var(--amber); }
.bd-dt tfoot td { border-top: 1px solid var(--line); padding-top: 8px; }

/* 低利润单（前台）/ 优惠过多！（后台）：紧跟合同金额下面的红字，鼠标悬停看口径 */
.pm-low, .pf-over { margin-top: 3px; font-size: 11.5px; font-weight: 700; color: var(--red); cursor: help; }
.pm-low { white-space: nowrap; }

/* ---------- 第 78 项：出库单（宽表 + 产品调整 + 分行排序） ---------- */
/* 出库单比默认 560px 宽一档：分类 / 双名称 / 排序 / 调整按钮要排得下 */
.modal.inv-out { max-width: 1180px; }
/* ==========================================================================
   第 168 项：所有「单据明细」弹窗统一走宽屏
   用户原话：「采购单的点明细界面太窄了，也要宽屏的。其他的各种单据也核查下」。
   这些弹窗原先只挂 .inv-modal，styles.css 里没有它的尺寸规则 → 走 .modal 默认 560px，
   8 列的明细表（产品 / 颜色 / 单位 / 订购 / 已入库 / 单价 / 金额 / 用途）根本排不下。
   现在一律加 .inv-view：1080px 宽，标题栏与底部按钮固定，中间内容自己滚。
   ========================================================================== */
.modal.inv-view {
  max-width: min(1080px, calc(100vw - 32px)); max-height: 90vh;
  display: flex; flex-direction: column; overflow: hidden;
}
.modal.inv-view > .modal-hd, .modal.inv-view > .modal-ft { flex: 0 0 auto; }
.modal.inv-view > .modal-bd { flex: 1 1 auto; min-height: 0; overflow: auto; }
.modal.inv-view .tbl { min-width: 0; }
.inv-scroll > table.io-tbl { min-width: 880px; }
.io-tbl .io-pcell { min-width: 240px; }
/* 产品名下的「调整 / 更换替代品 / 还原」小按钮：平时淡显，鼠标移到这一行才变实 */
.io-altops { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; opacity: .55; transition: opacity .15s; }
.io-tbl tbody tr:hover .io-altops, .io-altops:focus-within { opacity: 1; }
.io-altops .btn-xs { padding: 1px 7px; font-size: 11px; }
/* 调整后的第二行：只写品牌型号，一眼看出「实际发的是这个」 */
.io-alt-line { margin-top: 3px; font-size: 12px; font-weight: 600; color: var(--brand); }
.io-tbl .io-sort { white-space: nowrap; }
.io-tbl .io-sort .btn-xs { padding: 1px 6px; }
.io-tbl .io-sort .btn-xs[disabled] { opacity: .35; cursor: default; }
/* 打印 / 导出单据上的同一行（打印件用深一点的橙，黑白打印也看得清） */
.idoc-alt { font-size: 11px; font-weight: 600; color: #c2410c; }
/* 配货单产品名下的「⊳ 调整为 品牌·型号」：与出库单同一套说法 */
.pick-alt { margin-top: 3px; font-size: 12px; font-weight: 600; color: var(--brand); }

/* ---------- 第 80 项：客户池 + 备货需求 ---------- */
/* 「新建客户信息」弹窗顶部那条：从客户池选的入口 + 选完提示 */
.cp-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin: 10px 0 4px; padding: 8px 10px; border: 1px dashed var(--line);
  border-radius: 8px; background: var(--brand-soft); }
.cp-barhint { font-size: 12px; color: var(--text-2); }
.cp-barhint b { color: var(--brand); }
/* 「把这个客户存入客户池」勾选行 */
label.cp-remember { display: flex; align-items: center; gap: 7px; margin-top: 14px;
  font-size: 12.5px; color: var(--text-2); cursor: pointer; }
label.cp-remember input { width: auto; margin: 0; }
/* 第 91 项：客户自动入库的说明行（原来是个勾选框，现在一律自动，改成提示） */
.cp-auto { display: flex; align-items: flex-start; gap: 6px; margin: 14px 0 0;
  padding: 8px 10px; border-radius: 8px; font-size: 12.5px; line-height: 1.65;
  color: var(--text-2); background: var(--brand-soft); border: 1px solid var(--line); }
.cp-auto b { color: var(--brand); }
/* 客户池选择器：搜索行 + 就地新建表单 + 结果列表 */
.cp-tool { display: flex; gap: 8px; align-items: center; margin: 10px 0 8px; }
.cp-tool .search { flex: 1; }
.cp-form { padding: 10px 12px; margin-bottom: 10px; border: 1px solid var(--line);
  border-radius: 8px; background: var(--line-2); }
.cp-form label { display: block; font-size: 12.5px; color: var(--text-2); margin: 8px 0 4px; }
.cp-list { max-height: min(46vh, 380px); overflow: auto; display: flex;
  flex-direction: column; gap: 6px; }
.cp-row { display: block; width: 100%; text-align: left; padding: 9px 11px;
  border: 1px solid var(--line); border-radius: 8px; background: var(--panel);
  cursor: pointer; transition: border-color .15s, background .15s; }
.cp-row:hover { border-color: var(--brand); background: var(--brand-soft); }
.cp-row b { font-size: 13.5px; color: var(--text); }
.cp-row .cp-ph { margin-left: 8px; font-size: 12.5px; color: var(--brand); }
.cp-row i { display: block; margin-top: 2px; font-style: normal; font-size: 12px; color: var(--text-3); }
.cp-row em { display: block; margin-top: 3px; font-style: normal; font-size: 11px; color: var(--text-3); }
/* 备货需求的状态标签（.inv-tag 基样式在前；这里只补配色） */
.inv-tag.st-pending { background: var(--amber-soft); color: var(--amber); }
.inv-tag.st-stocking { background: var(--blue-soft); color: var(--blue); }
.inv-tag.st-ready { background: var(--green-soft); color: var(--green); }
.inv-tag.st-dispatched { background: var(--brand-soft); color: var(--brand); }

/* ---------- 第 86 项：前台「客户池」页签 ---------- */
.cust-kpi { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 12px; }
.cust-kpi > div { flex: 1 1 0; min-width: 92px; padding: 9px 12px;
  border: 1px solid var(--line); border-radius: 10px; background: var(--panel-2); }
.cust-kpi span { font-size: 12px; color: var(--text-3); }
.cust-kpi b { display: block; margin-top: 2px; font-size: 20px; line-height: 1.2; color: var(--text); }
.cust-tool { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.cust-tool .search { flex: 1; }
.cust-cards { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.cust-card { display: flex; flex-direction: column; gap: 5px; padding: 12px 14px;
  border: 1px solid var(--line); border-radius: 12px; background: var(--panel);
  box-shadow: var(--shadow-sm); }
.cust-card:hover { border-color: var(--brand); }
.cust-hd { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.cust-hd b { font-size: 15px; color: var(--text); }
.cust-tag { padding: 1px 7px; border-radius: 999px; font-size: 11px;
  color: var(--blue); background: var(--blue-soft); }
.cust-line { font-size: 12.5px; color: var(--text-2); word-break: break-all; }
.cust-tel { color: var(--brand); font-weight: 600; text-decoration: none; }
.cust-tel:hover { text-decoration: underline; }
.cust-dash { color: var(--text-3); }
.cust-note { font-size: 12px; color: var(--text-3); background: var(--line-2);
  border-radius: 6px; padding: 4px 7px; }
/* 同行卡片底部的「谁录的 / 用过几次 / 按钮」贴底对齐，长短不一也整齐 */
.cust-meta { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 4px;
  font-size: 11.5px; color: var(--text-3); }
.cust-own { color: var(--brand); }
.cust-act { display: flex; align-items: center; gap: 6px; }
.cust-lock { font-size: 11.5px; color: var(--text-3); }
/* 第 147 项：客户卡片上的两个主动作（＋ 新建项目 / 📂 我的项目）——
   并排等宽、拇指好点；只剩一个按钮时（没开通「新建方案」权限）自动占满整行 */
.cust-proj { display: grid; gap: 6px; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); margin: 6px 0 2px; margin-top: auto; }
.cust-proj .btn { width: 100%; justify-content: center; padding: 6px 8px; }
/* 第 147 项：多张单时的「选择项目」弹层 */
.cpk-tip { font-size: 12.5px; color: var(--text-2); margin: 0 0 10px; }
.cpk-list { display: flex; flex-direction: column; gap: 8px; max-height: 56vh; overflow-y: auto; padding-right: 2px; }
.cpk-row { display: flex; flex-direction: column; gap: 3px; width: 100%; text-align: left;
  padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel);
  cursor: pointer; font: inherit; color: inherit; }
.cpk-row:hover { border-color: var(--brand); background: var(--brand-soft); }
.cpk-t { display: flex; align-items: center; gap: 7px; font-size: 13.5px; color: var(--text); }
.cpk-t em { font-style: normal; font-size: 11px; padding: 1px 6px; border-radius: 999px; }
.cpk-t em.main { color: var(--brand); background: var(--brand-soft); }
.cpk-t em.addon { color: var(--blue); background: var(--blue-soft); }
.cpk-n { font-size: 12.5px; color: var(--text-2); }
.cpk-m { display: flex; flex-wrap: wrap; gap: 10px; font-size: 11.5px; color: var(--text-3); }
@media (max-width: 560px) {
  .cust-cards { grid-template-columns: 1fr; }
  .cust-tool { flex-wrap: wrap; }
  .cust-tool .cp-barhint { width: 100%; }
}
/* 窄屏：说明文案整段让到第二行，别被标题与按钮挤成一竖条字（只作用于客户池这一块） */
@media (max-width: 720px) {
  .panel-hd.cust-bar { flex-wrap: wrap; }
  .panel-hd.cust-bar h3 { order: 1; }
  .panel-hd.cust-bar .btn { order: 2; }
  .panel-hd.cust-bar .grow { display: none; }
  .panel-hd.cust-bar .note { order: 3; flex: 1 1 100%; line-height: 1.7; }
}

/* ==========================================================================
   第 81 项：我的项目 → 提交竣工 / 提交特别奖；后台审核中心两块新面板
   ========================================================================== */
/* 列表里的两个申请按钮：比普通小按钮大一号、带底色和阴影，一眼能看到 */
.apply-row { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; }
.btn-apply {
  display: inline-flex; align-items: center; justify-content: center; gap: 4px;
  font-size: 12.5px; font-weight: 700; line-height: 1; padding: 8px 12px;
  border: 0; border-radius: 9px; cursor: pointer; color: #fff;
  background: linear-gradient(180deg, #2f6df6, #1f57d8);
  box-shadow: 0 2px 6px rgba(47, 109, 246, .28);
}
.btn-apply:hover { filter: brightness(1.06); }
.btn-apply:active { transform: translateY(1px); }
.btn-apply.gold { background: linear-gradient(180deg, #f59e0b, #d97706); box-shadow: 0 2px 6px rgba(217, 119, 6, .3); }
.btn-apply.hold { background: var(--line-2); color: var(--text-3); box-shadow: none; cursor: default; }
.ops-row { display: flex; flex-wrap: wrap; gap: 4px; }

/* 申请 / 审核弹窗里的信息块 */
.ap-ctx { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 14px;
  border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px;
  background: var(--panel-2); margin-bottom: 12px; }
.ap-ctx > div { display: flex; gap: 6px; font-size: 12.5px; min-width: 0; }
.ap-ctx span { color: var(--text-3); flex: 0 0 62px; }
.ap-ctx b { color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ap-ctx b.ok { color: var(--green); }
.ap-tip { font-size: 12px; color: var(--text-3); line-height: 1.75; background: var(--panel-2);
  border: 1px dashed var(--line); border-radius: 9px; padding: 9px 11px; margin: 12px 0 0; }
.ap-rej { background: rgba(224, 49, 49, .08); border: 1px solid rgba(224, 49, 49, .25); color: var(--red);
  border-radius: 9px; padding: 8px 11px; font-size: 12.5px; margin-bottom: 12px; }
.ap-rej b { margin-right: 6px; }
.ap-reason { font-size: 12.5px; color: var(--text-2); background: var(--panel-2); border-radius: 9px;
  padding: 8px 11px; margin-bottom: 12px; line-height: 1.7; }
.ap-reason b { margin-right: 6px; color: var(--text-3); }

/* 特别奖审核：毛利润金额 / 比例卡片 */
.profit-card { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 10px; margin-bottom: 12px;
  border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; background: #fff; }
.profit-card > div { display: flex; flex-direction: column; gap: 2px; }
.profit-card span { font-size: 12px; color: var(--text-3); }
.profit-card b { font-size: 20px; }
.profit-card b.ok { color: var(--green); }
.profit-card b.low { color: var(--red); }
.profit-card em { grid-column: 1 / -1; font-style: normal; font-size: 12px; color: var(--text-3); }

/* 工资单：竣工奖励 / 特别奖励 */
.sal-item.award b { color: var(--amber); }
.sal-mini { margin-left: 6px; font-size: 11px; padding: 1px 7px; border-radius: 6px;
  border: 1px solid var(--line); background: #fff; color: var(--text-2); cursor: pointer; }
.sal-mini:hover { border-color: var(--amber); color: var(--amber); }

/* 特别奖励明细弹窗 */
.aw-hd { font-size: 13px; color: var(--text-2); margin-bottom: 10px; }
.aw-sum { color: var(--amber); }
.aw-reason { font-size: 11.5px; color: var(--text-3); margin-top: 3px; }
.ok-num { color: var(--green); }
.low-num { color: var(--red); }

/* 层叠式子弹窗（第 81 项）：压在「项目管理」列表之上，关掉自己后底下的列表还在 */
.submodal { position: relative; z-index: 320; }
.submodal .modal-mask.sub { z-index: 320; background: rgba(16, 24, 40, .5); }
.submodal .modal { max-width: 600px; }

@media (max-width: 640px) {
  .ap-ctx, .profit-card { grid-template-columns: 1fr; }
  .btn-apply { width: 100%; }
  .submodal .modal { max-width: none; }
}

/* ==========================================================================
   第 84 项：外包员工
   --------------------------------------------------------------------------
   外包身份只给安装工程师开；名字后面加「（外包）」，后台列表再用一个小标签点出来。
   颜色用中性的琥珀色，跟「工程师」的绿色、「停用」的红色区分开。
   ========================================================================== */
.mini-tag.out { background: #fdf1dc; color: #a5691a; margin-left: 6px; }
.dcname .mini-tag.out, .dtop .mini-tag.out { margin-left: 5px; }
.cust-name-out { font-weight: 600; }

/* 第 84 项：预计安装时间 = 日期 + 时间段，两格并排（窄屏自动堆成一列）
   不加 .dfields 前缀 —— 改期弹窗里也复用同一个两格布局。 */
.slot-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; align-items: start; }
.slot-row > div { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.slot-row > div > input, .slot-row > div > select { width: 100%; }
.slot-row > div > label { font-size: 12.5px; color: var(--text-2); font-weight: 500; }
/* 新增派单：两格占 2 列，跟日期贴在一起
   （必须带上 display/grid-template —— `.dfields > div` 是 flex 列，会盖掉 .slot-row 的 grid） */
.dfields > .slot-row { display: grid; grid-template-columns: 1fr 1fr; grid-column: span 2; }
.dslot-hint { font-size: 11.5px; color: var(--text-3); margin-top: 4px; }

@media (max-width: 640px) {
  .slot-row, .dfields > .slot-row { grid-column: auto; grid-template-columns: 1fr; }
}

/* 第 84 项：受限账号（外包工程师）在派单列表顶部的说明条 */
.drestrict { background: #fdf1dc; border: 1px solid #f0dcb4; color: #8a5a12; border-radius: 10px;
  padding: 9px 12px; font-size: 12.5px; line-height: 1.7; margin-bottom: 12px; }
.drestrict b { color: #a5691a; }

/* ==========================================================================
   第 87 项：后台「竣工奖励」（项目管理列表按钮 + 计算弹窗）
   竣工奖励 =（本单 + 增项单「审核通过」的收款合计 − 已核算的绩效提成）× 0.75 × 0.05
   ========================================================================== */
.btn-award { border-color: #f0dcb4; background: var(--amber-soft); color: var(--amber); font-weight: 600; }
.btn-award:hover { background: #fdf1dc; border-color: #e6cd96; color: #a5691a; }
.btn-award.has { color: #a5691a; }
.btn-award:disabled { background: var(--line-2); border-color: var(--line); color: var(--text-3);
  font-weight: 500; opacity: .85; }

.aw-top { margin-bottom: 14px; }
.aw-meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; }
.aw-meta b { font-size: 15px; color: var(--text); }
.aw-meta > span { font-size: 12.5px; color: var(--text-3); }
.aw-kids { padding: 1px 8px; border-radius: 999px; background: var(--line-2); color: var(--text-2); }
.aw-rule { margin: 8px 0 0; padding: 9px 12px; border-radius: 10px; background: var(--amber-soft);
  border: 1px solid #f6e3bd; color: #8a5a12; font-size: 12.5px; line-height: 1.75; }
.aw-rule b { color: #a5691a; }

.aw-sum { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 10px; }
.aw-sum > div { flex: 1 1 150px; min-width: 0; padding: 9px 12px; border: 1px solid var(--line);
  border-radius: 10px; background: var(--panel-2); }
.aw-sum span { display: block; font-size: 12px; color: var(--text-3); }
.aw-sum b { display: block; margin-top: 2px; font-size: 18px; line-height: 1.3; color: var(--text); }
.aw-sum .aw-minus { color: var(--text-2); }
.aw-sum .aw-rate { color: var(--text-3); font-size: 15px; }
.aw-sum .aw-hl { background: var(--amber-soft); border-color: #f0dcb4; }
.aw-sum .aw-hl b { color: var(--amber); }

.aw-line { font-size: 12.5px; color: var(--text-3); margin-bottom: 10px; }
.aw-tbl { margin-top: 2px; }
.aw-sub { font-size: 11.5px; color: var(--text-3); }
.aw-note { margin: 12px 0 0; font-size: 12.5px; color: var(--text-3); line-height: 1.7; }

@media (max-width: 720px) {
  .aw-sum > div { flex: 1 1 100%; }
}

/* ==========================================================================
   第 88 项：「我的项目」列表自适应
   以前 10 列写死 px（合计 1078px），窄一点的屏就：项目名称被压成一条竖字、
   右侧「删除」被裁掉、底下挂横向滚动条。现在：
     · 宽屏 —— 列宽全部百分比 + table-layout:fixed，表格永远不超容器宽；
     · ≤1024px —— 自动切成卡片，一张单一块，竖着读，彻底没有横向滚动。
   ========================================================================== */
.modal.pm-modal { max-width: min(1320px, calc(100vw - 40px)); }

/* ---------------- 宽屏：紧凑版 10 列表格 ---------------- */
.tbl.pm-table { table-layout: fixed; }
.tbl.pm-table th, .tbl.pm-table td { padding: 8px 9px; }
.tbl.pm-table thead th { font-size: 11.5px; line-height: 1.4; color: var(--text-3); font-weight: 600; }
.tbl.pm-table td { font-size: 12.5px; overflow-wrap: anywhere; }
.tbl.pm-table .pno { letter-spacing: 0; }
/* 两行时间列：列窄，单独把左右内边距收一点，日期刚好放得下 */
.tbl.pm-table .pm-tcol { white-space: normal; padding-left: 7px; padding-right: 7px; }
.tbl.pm-table .pm-tcol .t1 { font-size: 11.5px; }
.tbl.pm-table .pm-tcol .t2 { font-size: 10.5px; }
/* 进度列窄：进度条独占一行、说明文字换行，别再 nowrap 顶出格子 */
.tbl.pm-table .pm-prog { flex-direction: column; align-items: stretch; gap: 3px; }
.tbl.pm-table .pm-prog .pm-bar { flex: none; width: 100%; }
.tbl.pm-table .pm-prog span { white-space: normal; font-size: 11px; }
/* 申请按钮占满整列，「重新提交竣工」这种长文案也不会顶出格子 */
.tbl.pm-table .apply-row { margin-bottom: 6px; }
.tbl.pm-table .btn-apply { width: 100%; padding: 7px 8px; font-size: 12px; }
.tbl.pm-table .ops-row { gap: 4px; }
.tbl.pm-table .ops-row .btn { flex: 1 1 auto; min-width: 0; padding: 5px 6px; }
/* 卡片模式才用的「创建 / 更新 / 归属」小标签，宽屏不出 */
.tbl.pm-table .pm-tcol::before, .tbl.pm-table .pm-own::before { content: none; }

/* ---------------- ≤1024px：一行一张卡片 ---------------- */
@media (max-width: 1024px) {
  .modal.pm-modal { max-width: none; }
  .tbl.pm-table, .tbl.pm-table tbody, .tbl.pm-table tr, .tbl.pm-table td { display: block; width: auto; }
  .tbl.pm-table thead { display: none; }
  .tbl.pm-table tbody tr {
    display: flex; flex-wrap: wrap; align-items: flex-start;
    column-gap: 12px; row-gap: 5px;
    margin: 0 12px 10px; padding: 11px 13px 12px;
    border: 1px solid var(--line); border-radius: 12px; background: #fff;
  }
  .tbl.pm-table tbody tr:hover { background: #fff; }
  .tbl.pm-table tbody tr.pm-addon { margin-left: 30px; background: #fcfcfd;
    border-left: 3px solid var(--brand-soft); }
  .tbl.pm-table tbody tr.pm-addon > td { background: none; }
  .tbl.pm-table tbody tr.pm-addon > td:first-child { box-shadow: none; }
  .tbl.pm-table tbody td { padding: 0; flex: 1 1 100%; min-width: 0; }

  /* 第一行：项目编号 + 合同金额；第二行起依次是项目名 / 客户 / 进度 / 归属 / 时间 / 操作 */
  .tbl.pm-table tbody td:nth-child(1) { flex: 0 0 auto; order: 1; }
  .tbl.pm-table tbody td:nth-child(4) { flex: 0 0 auto; order: 2; margin-left: auto;
    text-align: right; font-size: 14px; }
  .tbl.pm-table tbody td:nth-child(3) { order: 3; }
  .tbl.pm-table tbody td:nth-child(2) { order: 4; }
  .tbl.pm-table tbody td:nth-child(5) { order: 5; }
  .tbl.pm-table tbody td:nth-child(6) { order: 6; }
  .tbl.pm-table tbody td:nth-child(7) { order: 7; }
  .tbl.pm-table tbody td:nth-child(8) { flex: 0 0 auto; order: 8; }
  .tbl.pm-table tbody td:nth-child(9) { flex: 0 0 auto; order: 9; }
  .tbl.pm-table tbody td:nth-child(10) { order: 10; margin-top: 7px; }
  .tbl.pm-table tbody td:nth-child(3) > b { font-size: 14px; }

  /* 时间列排成一行：创建 2026-10-12 · 今天 */
  .tbl.pm-table .pm-tcol::before { content: attr(data-label); display: inline; margin-right: 4px;
    font-size: 10.5px; color: var(--text-3); }
  .tbl.pm-table .pm-tcol .t1, .tbl.pm-table .pm-tcol .t2 { display: inline; }
  .tbl.pm-table .pm-tcol .t2::before { content: ' · '; }
  /* 归属排成一行：归属 张钥烨 · 制单 张钥烨 · 设计 张钥烨 */
  .tbl.pm-table .pm-own::before { content: attr(data-label); display: inline; margin-right: 4px;
    font-size: 10.5px; color: var(--text-3); }
  .tbl.pm-table .pm-own > b::after { content: ' · '; font-weight: 400; color: var(--text-3); }
  .tbl.pm-table .pm-own > div { display: inline; }
  .tbl.pm-table .pm-own > div + div::before { content: ' · '; }

  /* 操作区：申请按钮独占一行，三个小按钮平分剩余宽度 */
  .tbl.pm-table .apply-row { margin-bottom: 7px; }
  .tbl.pm-table .ops-row { gap: 6px; }
  .tbl.pm-table .ops-row .btn { flex: 1 1 auto; padding: 7px 8px; font-size: 12.5px; }
}

/* 更窄（手机）：归属竖着排，其余照旧 —— 「创建 / 更新」小标签保留，
   否则日期和「6 天前」会黏成「2026-10-066 天前」 */
@media (max-width: 560px) {
  .tbl.pm-table .pm-own > b::after { content: ''; }
  .tbl.pm-table .pm-own > div { display: block; }
  .tbl.pm-table .pm-own > div + div::before { content: ''; }
}

/* ==========================================================================
   第 89 项：产品库「三档价格看不到」修复 + 自适应
   原来 16 列宽度写死合计 1500px，而「状态 / 操作」两列吸附在容器右侧、常驻吃掉 250px：
   1600px 屏下「直供价 / 进货价」就被吸附层盖住，1440px 及以下三个价格全落到可见区外。
   改法：
     · 三个价格列前置到「产品名称」之后 —— 左侧的列在任何滚动位置都可见，不再被吸附层吃掉；
     · 列宽整体压到 1356px + table-layout:fixed，宽屏不再横滑；
     · ≤900px 收成卡片，一行一个产品，三个价格输入框并排摆在显眼处。
   ========================================================================== */

/* 价格三列：表头加浅底 + 输入框常显虚线边，一眼看出「这里能改」 */
#prodBody .tbl thead th.p-price { background: var(--brand-soft); color: var(--brand); }
#prodBody .price-edit { border-color: var(--line-2); font-variant-numeric: tabular-nums; }
#prodBody .price-edit:hover { border-color: var(--line); background: var(--panel-2); }
#prodBody .price-edit:focus { border-color: var(--brand); background: #fff; }

/* 顶部说明里那句「都能直接点着改」 */
.prod-tip { display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: 999px;
  background: var(--brand-soft); color: var(--brand); }
.prod-tip b { color: var(--brand); }

/* 第 172 项：序号可以直接改（管理员）。平时看着像一行灰字，鼠标移上去才显输入框，
   免得整列都是框、跟旁边的价格输入框抢注意力。 */
#prodBody td.p-idx { padding: 4px 6px; }
#prodBody .p-idx-inp { width: 40px; padding: 3px 2px; text-align: center; font: inherit;
  font-size: 12.5px; color: var(--text-2); border: 1px solid var(--line-2); border-radius: 6px;
  background: #fff; cursor: text; -moz-appearance: textfield; }
#prodBody .p-idx-inp:hover { color: var(--text); border-color: var(--line); background: var(--panel-2); }
#prodBody .p-idx-inp:focus { color: var(--text); border-color: var(--brand); background: #fff;
  outline: none; box-shadow: 0 0 0 2px rgba(255, 105, 0, .16); }
#prodBody .p-idx-inp:disabled { opacity: .5; }

/* ---------------- ≤900px：一行一个产品卡（三列网格） ----------------
   注意这里必须用 Grid 而不是 flex-wrap：价格格的 flex-basis 是 0，
   flex 换行算法会认为它「不占地方」，把它和次要字段挤进同一行、宽度被压成几个像素。
   Grid 用显式行列定位，三档价格稳定地站在第 2 行。 */
@media (max-width: 900px) {
  .prod-scroll { overflow-x: visible; }
  #prodBody .tbl { min-width: 0; width: 100%; table-layout: auto; }
  #prodBody .tbl, #prodBody .tbl tbody, #prodBody .tbl tr, #prodBody .tbl td { display: block; width: auto; }
  #prodBody .tbl thead { display: none; }
  #prodBody .tbl tbody tr {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: start; column-gap: 10px; row-gap: 9px;
    margin: 0 10px 10px; padding: 12px 13px 13px;
    border: 1px solid var(--line); border-radius: 12px; background: #fff;
  }
  #prodBody .tbl tbody tr:hover { background: #fff; }
  #prodBody .tbl tbody tr.dim { background: #fbfbfc; }
  #prodBody .tbl tbody td { padding: 0; min-width: 0; }
  /* 卡片模式下吸附列不再吸在右边 */
  #prodBody .tbl .p-col-stat, #prodBody .tbl .p-col-act { position: static; background: none; }
  #prodBody .tbl .p-col-stat::before { display: none; }

  /* ① 缩略图 + 产品名称：名称跨满整行，左侧用 padding 给缩略图让位 —— 文字紧贴图片，
        不会因为缩略图那一列很宽而在中间留一大块空白 */
  #prodBody .tbl tbody td:nth-child(1) { grid-area: 1 / 1; }
  #prodBody .tbl tbody td:nth-child(3) { grid-area: 1 / 1 / 2 / -1; padding-left: 50px;
    font-size: 13.5px; }
  #prodBody .tbl tbody td.p-idx { display: none; }

  /* ② 三档价格：并排三格，各自带小标签，输入框撑满整格 */
  #prodBody .tbl tbody td:nth-child(4) { grid-area: 2 / 1; }
  #prodBody .tbl tbody td:nth-child(5) { grid-area: 2 / 2; }
  #prodBody .tbl tbody td:nth-child(6) { grid-area: 2 / 3; }
  /* 价格格是 .num（数字列右对齐），标签得单独掰回左对齐，否则会飘到输入框右上角 */
  #prodBody .tbl tbody td.p-price { text-align: left; }
  #prodBody .tbl tbody td.p-price::before { content: attr(data-label); display: block;
    font-size: 10.5px; color: var(--text-3); margin-bottom: 2px; text-align: left; }
  #prodBody .tbl tbody td.p-price .price-edit { width: 100%; text-align: left; }

  /* ③ 次要字段：两行三列，各带小标签 */
  #prodBody .tbl tbody td:nth-child(7) { grid-area: 3 / 1; }
  #prodBody .tbl tbody td:nth-child(8) { grid-area: 3 / 2; }
  #prodBody .tbl tbody td:nth-child(9) { grid-area: 3 / 3; }
  #prodBody .tbl tbody td:nth-child(10) { grid-area: 4 / 1; }
  #prodBody .tbl tbody td:nth-child(11) { grid-area: 4 / 2; }
  #prodBody .tbl tbody td:nth-child(12) { grid-area: 4 / 3; }
  #prodBody .tbl tbody td.p-meta { font-size: 12px; color: var(--text-2); }
  #prodBody .tbl tbody td.p-meta::before { content: attr(data-label); display: block;
    font-size: 10.5px; color: var(--text-3); margin-bottom: 2px; }
  #prodBody .tbl tbody td.p-meta .brand-sel { min-width: 0; max-width: none; }

  /* ④ 可选颜色 + 功能介绍：各占一整行 */
  #prodBody .tbl tbody td:nth-child(13) { grid-area: 5 / 1 / 6 / -1; }
  #prodBody .tbl tbody td:nth-child(14) { grid-area: 6 / 1 / 7 / -1; }
  #prodBody .tbl tbody td:nth-child(13)::before,
  #prodBody .tbl tbody td:nth-child(14)::before { display: block; content: attr(data-label);
    font-size: 10.5px; color: var(--text-3); margin-bottom: 2px; }
  /* 功能介绍为空的那些产品，标签连格子一起收掉，别留一块空白 */
  #prodBody .tbl tbody td:nth-child(14):has(> .fdesc:empty) { display: none; }
  #prodBody .tbl tbody td:nth-child(14) .fdesc { max-height: none !important; overflow: visible !important; }

  /* ⑤ 状态 + 操作按钮 */
  #prodBody .tbl tbody td.p-col-stat { grid-area: 7 / 1; }
  #prodBody .tbl tbody td.p-col-act { grid-area: 7 / 2 / 8 / -1; display: flex; gap: 6px; }
  #prodBody .tbl tbody td.p-col-act .btn { flex: 1 1 auto; padding: 7px 8px; font-size: 12.5px; }
  #prodBody .tbl tbody td.p-col-act .btn + .btn { margin-left: 0; }
}

/* ================= 第 90 项：后台「员工」页签以「组织架构」花名册为准 ================= */
/* 说明条：组织架构在册 / 已登录 / 还没登录 + 校正显示名入口 */
.st-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 9px 12px; margin-bottom: 12px; border-radius: 10px;
  background: var(--brand-soft); border: 1px solid var(--line); }
.st-bar .st-num { font-size: 13px; color: var(--text-2); }
.st-bar .st-num b { color: var(--brand); font-size: 15px; margin: 0 1px; }
.st-bar .grow { flex: 1; }

/* 表格按容器宽度等分（百分比列宽），任何屏宽都不横滑 */
.tbl.st-tbl { table-layout: fixed; }
.tbl.st-tbl tbody td { word-break: break-word; }

.st-tip { font-size: 12.5px; color: var(--text-3); line-height: 1.8; margin: 10px 0 0; }
.st-time { font-size: 11.5px; color: var(--text-3); margin-top: 3px; }
.st-alias { font-size: 11.5px; color: var(--amber); margin-top: 2px; }

/* 不在花名册里的登录账号：默认收起的折叠区 */
.staff-extra { margin-top: 16px; border-top: 1px dashed var(--line); padding-top: 12px; }
.staff-extra > summary { cursor: pointer; font-size: 13px; font-weight: 600; color: var(--text-2);
  padding: 4px 0; user-select: none; }
.staff-extra > summary:hover { color: var(--brand); }
.staff-extra .st-tip { margin: 6px 0 10px; }

@media (max-width: 760px) {
  /* 主表窄屏改一行一卡：姓名 / 手机号 + 归属公司 / 登录情况 / 角色 + 操作
     用 Grid 显式定位（flex-wrap 的换行只看 flex-basis，会把格子压扁 —— 第 89 项的教训） */
  #staffBody > table.st-tbl thead { display: none; }
  #staffBody > table.st-tbl tbody { display: block; }
  #staffBody > table.st-tbl tbody tr {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 5px 12px; padding: 12px 4px; border-bottom: 1px solid var(--line-2);
  }
  #staffBody > table.st-tbl tbody td { display: block; padding: 0; border: 0; }
  #staffBody > table.st-tbl tbody td:nth-child(1) { grid-area: 1 / 1 / 2 / -1; font-size: 15px; }
  #staffBody > table.st-tbl tbody td:nth-child(1) .mini-tag { margin-left: 6px; }
  #staffBody > table.st-tbl tbody td:nth-child(2) { grid-area: 2 / 1; white-space: nowrap; }
  #staffBody > table.st-tbl tbody td:nth-child(3) { grid-area: 2 / 2; }
  #staffBody > table.st-tbl tbody td:nth-child(4) { grid-area: 3 / 1 / 4 / -1; }
  /* 登录情况原本是三行块级，窄屏收成一行省高度 */
  #staffBody > table.st-tbl tbody td:nth-child(4) .st-time,
  #staffBody > table.st-tbl tbody td:nth-child(4) .st-alias { display: inline-block; margin: 0 0 0 8px; }
  #staffBody > table.st-tbl tbody td:nth-child(5) { grid-area: 4 / 1; align-self: center; }
  #staffBody > table.st-tbl tbody td:nth-child(6) { grid-area: 4 / 2; justify-self: end; }
  #staffBody > table.st-tbl tbody td[data-label]::before {
    content: attr(data-label); display: block; font-size: 10.5px; color: var(--text-3); margin-bottom: 2px; }
  #staffBody > table.st-tbl tbody td:nth-child(4)::before { display: inline; margin: 0 6px 0 0; }
}

@media (max-width: 640px) {
  .st-bar { flex-direction: column; align-items: stretch; }
  .st-bar .grow { display: none; }
  .st-bar .btn { width: 100%; }
}

/* ================= 第 91 项：备货需求「关联项目 → 自动带出客户」 ================= */
.sr-cust { display: flex; align-items: stretch; gap: 8px; margin: 10px 0 4px; }
.sr-custbox { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px;
  padding: 9px 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--line-2);
  font-size: 13px; color: var(--text); }
.sr-custbox b { font-size: 14px; }
.sr-custbox span { color: var(--text-2); font-size: 12.5px; }
.sr-custbox i { flex: 1 1 100%; font-style: normal; font-size: 12px; color: var(--text-3); }
.sr-cust-from { flex: 0 0 auto; font-style: normal; font-size: 11px; line-height: 18px;
  padding: 0 7px; border-radius: 9px; color: var(--brand); background: var(--brand-soft);
  border: 1px solid var(--line); }
.sr-cust .btn { flex: 0 0 auto; align-self: center; }
@media (max-width: 560px) {
  .sr-cust { flex-direction: column; }
  .sr-cust .btn { width: 100%; }
}

/* ==========================================================================
   第 91 项：AI方案 —— 客户关联提示 + 区域效果图
   ========================================================================== */
/* 客户关联条：ok=已关联（细、蓝底）；否则=提示先新建客户、配置方案（橙底） */
.plan-gate { display: flex; align-items: flex-start; gap: 10px; flex-wrap: wrap;
  padding: 11px 14px; margin-bottom: 12px; border-radius: var(--radius-sm);
  background: var(--amber-soft); border: 1px solid #f3e0bd; }
.plan-gate.ok { background: var(--blue-soft); border-color: #d8e6ff; }
.plan-gate-ico { font-size: 17px; line-height: 1.4; }
.plan-gate-txt { flex: 1 1 260px; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.plan-gate-txt b { font-size: 13.5px; color: var(--text); }
.plan-gate-txt span { font-size: 12.5px; line-height: 1.7; color: var(--text-2); }
.plan-gate-act { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }

/* 区域效果图面板 */
.plan-fx-panel { margin-top: 16px; }
.plan-fx-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; }
.plan-fx-card { margin: 0; border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--panel-2); overflow: hidden; display: flex; flex-direction: column; }
.plan-fx-card.on { border-color: var(--brand); box-shadow: 0 0 0 2px rgba(255, 105, 0, .14); }
.plan-fx-img { background: #0e1420; aspect-ratio: 3 / 2; display: flex; align-items: center; justify-content: center; }
.plan-fx-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.plan-fx-img .empty { color: #93a1b5; font-size: 12px; }
.plan-fx-card figcaption { display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  padding: 8px 10px 4px; font-size: 13px; }
.plan-fx-card figcaption .grow { flex: 1; }
.plan-fx-row { display: flex; align-items: center; gap: 8px; padding: 0 10px 8px; }
.plan-fx-sel { flex: 1; font-size: 12.5px; padding: 4px 8px; }
.plan-fx-sub { padding: 0 10px 10px; font-size: 11.5px; line-height: 1.7; color: var(--text-3); }
.plan-fx-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.plan-fx-tabs .btn.on { background: var(--brand); border-color: var(--brand); color: #fff; }
.modal.plan-fx-modal .plan-fx-grid { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
.modal.plan-fx-modal .plan-note { margin: 0 0 10px; font-size: 12.5px; color: var(--text-2); line-height: 1.8; }

/* 实时预览里的区域卡：效果图 + 文字 */
.plan-pv-card .plan-pv-fxname { font-size: 11px; color: var(--brand); background: var(--brand-soft);
  padding: 1px 7px; border-radius: 9px; }
.plan-pv-fx { width: 100%; border-radius: 8px; margin: 2px 0 8px; display: block; }

@media (max-width: 560px) {
  .plan-gate-act { width: 100%; }
  .plan-gate-act .btn { flex: 1; }
  .plan-fx-grid { grid-template-columns: minmax(0, 1fr); }
}

/* ==========================================================================
   第 92 项：后台「操作日志」
   只作用于 #tab-oplog（.op-*），不影响其他页签与打印排版。
   ========================================================================== */
.op-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.op-bar .grow { flex: 1; min-width: 8px; }
.op-inp { padding: 6px 10px; border: 1px solid var(--line); border-radius: 9px;
  background: var(--panel); color: var(--text-1); font-size: 13px; max-width: 180px; }
.op-inp:focus { outline: none; border-color: var(--brand); }

.op-day { margin-bottom: 16px; }
.op-day-hd { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700;
  color: var(--text-2); padding: 6px 2px 8px; }
.op-day-hd span { font-size: 11.5px; font-weight: 500; color: var(--text-3);
  background: var(--panel-2); border: 1px solid var(--line); border-radius: 9px; padding: 1px 8px; }

.op-tbl td { vertical-align: top; }
.op-time { width: 60px; font-size: 12px; color: var(--text-3); font-variant-numeric: tabular-nums;
  white-space: nowrap; }
.op-who { width: 150px; font-size: 13px; }
.op-who b { font-weight: 700; }
.op-ph { display: block; font-size: 11px; color: var(--text-3); font-variant-numeric: tabular-nums; }
.op-g { display: inline-block; font-size: 12.5px; font-weight: 600; white-space: nowrap; }
.op-tgt { display: inline-block; margin-left: 8px; font-size: 12px; color: var(--text-2);
  background: var(--brand-soft); color: var(--brand); border-radius: 9px; padding: 1px 8px;
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.op-detail { font-size: 12.5px; color: var(--text-2); line-height: 1.65; word-break: break-all; }
.op-kind { width: 76px; font-size: 11.5px; color: var(--text-3); white-space: nowrap; }
.op-more { text-align: center; padding: 6px 0 2px; }

@media (max-width: 900px) {
  .op-inp { max-width: none; flex: 1 1 130px; }
  .op-bar .op-inp[style] { width: auto !important; }
  .op-tbl thead { display: none; }
  .op-tbl tr { display: block; border-bottom: 1px solid var(--line); padding: 8px 0; }
  .op-tbl td { display: block; width: auto !important; padding: 1px 0; }
  .op-time { color: var(--text-1); font-weight: 600; }
}

/* ==========================================================================
   第 94 项：提交竣工的「金额 / 利润」系统审核
   --------------------------------------------------------------------------
   弹窗里一块系统审核面板（合同 / 实收 / 差额 / 毛利）+ 若干条提示；
   多收 / 少收 / 利润过低时提示条转红，并在下面多出一个必填的「原因说明」。
   后台「竣工审核」列表复用同一套配色显示快照（.pc-risk / .pc-rnote）。
   ========================================================================== */
.cm-audit { border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px;
  background: var(--panel-2); margin-bottom: 12px; }
.cm-hd { font-size: 12.5px; font-weight: 700; color: var(--text-2); margin-bottom: 8px; }
.cm-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 12px; }
.cm-grid > div { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.cm-grid span { font-size: 11.5px; color: var(--text-3); }
.cm-grid b { font-size: 15px; font-variant-numeric: tabular-nums; }
.cm-grid b.bad { color: var(--red); }
.cm-grid b.good { color: var(--green); }
.cm-grid i { font-style: normal; font-size: 11px; color: var(--text-3); }
.cm-tip { margin-top: 8px; font-size: 12.5px; line-height: 1.6; border-radius: 9px;
  padding: 7px 10px; border: 1px solid var(--line); background: #fff; color: var(--text-2); }
.cm-tip.ok { color: var(--green); border-color: rgba(18,161,80,.28); background: var(--green-soft); }
.cm-tip.warn { color: var(--amber); border-color: rgba(217,119,6,.3); background: var(--amber-soft); }
.cm-tip.err { color: var(--red); border-color: rgba(224,50,44,.3); background: rgba(224,50,44,.07); }
.cm-tip.gold { color: #a5691a; border-color: rgba(201,138,0,.3); background: #fdf1dc; }

/* 后台「竣工审核」列表里的金额 / 利润快照 */
.pc-risk { font-size: 12px; color: var(--text-2); line-height: 1.7; font-variant-numeric: tabular-nums; }
.pc-risk .bad { color: var(--red); font-weight: 600; }
.pc-risk .good { color: var(--green); }
.pc-risk .gold { color: #a5691a; }
.pc-rnote { margin-top: 5px; font-size: 12px; color: var(--amber); background: var(--amber-soft);
  border-radius: 8px; padding: 4px 8px; line-height: 1.6; }
.pc-rnote b { margin-right: 5px; }

/* ==========================================================================
   第 96 项：出库单按「客户」归组 —— 同一个客户的多张出库单显示成子订单
   父行 = 客户名 + 张数 + 合计成本 + 状态分布（点一下可折叠）
   子行 = 各张出库单，左侧画树形线，一眼看出归属
   ========================================================================== */
.tbl tr.io-grp > td {
  background: #f4f8fd; border-top: 1px solid #dfe9f5; border-bottom: 1px solid #dfe9f5;
  padding: 7px 12px; cursor: pointer; user-select: none;
}
.tbl tr.io-grp:hover > td { background: #edf4fc; }
.io-caret { display: inline-block; width: 14px; color: #7d97b5; font-size: 11px;
  transition: transform .15s ease; }
tr.io-grp.io-fold .io-caret { transform: rotate(-90deg); }
.io-name { font-size: 13.5px; color: var(--text); }
.io-cnt { margin-left: 8px; font-size: 11.5px; color: var(--blue); background: var(--blue-soft);
  border-radius: 9px; padding: 1px 8px; }
.io-amt { margin-left: 8px; font-size: 12px; color: #a5691a; font-variant-numeric: tabular-nums; }
.io-st { margin-left: 10px; font-size: 11.5px; color: var(--text-3); }

/* 子行：缩进 + 竖线 + 短横线，视觉上「挂在父行下面」 */
.tbl tr.io-c > td { background: #fcfdff; }
.tbl tr.io-c:hover > td { background: #f5faff; }
.tbl tr.io-c > td:first-child { position: relative; padding-left: 32px; }
.tbl tr.io-c > td:first-child::before {
  content: ''; position: absolute; left: 15px; top: 0; bottom: 0; width: 1px; background: #dfe9f5;
}
.tbl tr.io-c > td:first-child::after {
  content: ''; position: absolute; left: 15px; top: 50%; width: 9px; height: 1px; background: #dfe9f5;
}
tr.io-hide { display: none; }

@media (max-width: 900px) {
  .tbl tr.io-grp > td { padding: 6px 8px; }
  .io-st { display: none; }
  .tbl tr.io-c > td:first-child { padding-left: 24px; }
  .tbl tr.io-c > td:first-child::before { left: 10px; }
  .tbl tr.io-c > td:first-child::after { left: 10px; width: 7px; }
}

/* ==========================================================================
   第 95 项：「商务专员」角色
   三档角色配色 —— 管理员=品牌橙高亮 / 商务专员=天蓝 / 普通员工=中性灰。
   .mini-tag 与 .user-chip .role 是两套容器，各自补一个 .biz 变体即可。
   ========================================================================== */
.mini-tag.biz { background: #e8f1fd; color: #2b6cb0; }
.user-chip .role.biz { background: #e8f1fd; color: #2b6cb0; }

/* 员工页的角色下拉：贴着表格行高，不喧宾夺主 */
.staff-tbl select, #staffBody select.mini-sel {
  padding: 4px 6px; border-radius: 7px; font-size: 12px; min-width: 92px;
  border: 1px solid var(--line); background: #fff; color: var(--text);
}

/* 权限页三列（管理员 / 商务专员 / 普通员工）在窄屏下允许横向滚动，不要把勾选框压没 */
#permRoleBody { overflow-x: auto; }
#permRoleBody .perm-tbl { min-width: 720px; }
@media (max-width: 900px) {
  #permRoleBody .perm-tbl { min-width: 640px; }
  #permRoleBody .perm-tbl th, #permRoleBody .perm-tbl td { padding-left: 6px; padding-right: 6px; }
}

/* ==========================================================================
   第 98 项：明细行多的单据弹窗放大（采购需求 / 采购单 / 采购入库 / 仓库调拨）
   原来这几个弹窗只挂 .inv-modal，而 styles.css 里从来没有 .inv-modal 的尺寸规则，
   于是全部走 .modal 的默认值：**max-width 560px**。
   第 97 项给明细加了「颜色」列之后，采购单一行要放
   「产品 / 颜色 / 数量 / 进货单价 / 金额 / 用途 / ✕」7 列（声明宽度合计 700px 出头），
   560 − 40(内边距) = 520px 根本装不下 → 只能横向拖；高度又是「内容多高就多高」，
   产品一多就整页滚，表头与底部按钮全被顶走。

   现在做成一个「大弹窗」：
     · 宽度 1040px（窄屏自动跟到 calc(100vw - 32px)）；
     · 弹窗本身 flex 纵向 —— 标题栏、底部按钮固定不动；
     · 明细区 .inv-items 吃掉中间剩余空间，自己出滚动条（横向也由它管），
       上面的供应商 / 仓库、下面的备注始终在位。
   ========================================================================== */
.modal.inv-wide { max-width: min(1040px, calc(100vw - 32px)); max-height: 92vh;
  display: flex; flex-direction: column; overflow: hidden; }
.modal.inv-wide > .modal-hd, .modal.inv-wide > .modal-ft { flex: 0 0 auto; }
/* overflow:auto 是兜底：屏幕特别矮时明细区已收到 min-height，剩下放不下的就让 body 自己滚，
   总比把备注裁掉好 */
.modal.inv-wide > .modal-bd { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column;
  padding: 14px 18px; overflow: auto; }
/* 除明细区外都按内容高度摆放，不许被压扁（备注的 textarea 默认 resize:vertical，压扁会很难看） */
.modal.inv-wide > .modal-bd > *:not(.inv-items) { flex: 0 0 auto; }
.inv-items { flex: 1 1 auto; min-height: 150px; overflow: auto; }
/* 空状态别在放大的弹窗里孤零零吊着 —— 收一点上下留白，并居中
   （明细区要么装空状态、要么装表格，用 :has 只对空状态生效；
    浏览器不支持 :has 时这条被忽略，退化成原来的贴顶显示，不影响功能） */
.inv-items > .empty { padding: 24px 20px; }
.inv-items:has(> .empty) { display: flex; align-items: center; justify-content: center; }

@media (max-width: 640px) {
  /* 手机上弹窗本来就是底部整宽面板，明细区给足屏高，别被备注挤没 */
  .modal.inv-wide { max-height: 94vh; }
  .inv-items { min-height: 240px; }
  /* 供应商 / 采购员 / 预计到货 / 入库仓库 这四行竖着排要吃掉近 400px 高度，
     明细区就只剩一条缝了 —— 窄屏改两列，省下来的高度全给明细 */
  .modal.inv-wide .dfields { grid-template-columns: 1fr 1fr; gap: 8px 10px; }
}

/* ==========================================================================
   第 135 项之一：产品库左侧换成「分类导航」
   用户原话：「产品库这个页面左边这个更多功能菜单，调整成各种分类选择」。
   454 个产品、十个大类，翻右上角那个「全部分类」下拉太费劲；侧栏本来就在左手边，
   直接把十个大类摆上去，点一下筛一类，右边带数量。
   · 只在「产品库」页签生效（aside 上挂 .side-cats-on）：别的页签侧栏照旧是「更多功能」，
     合同模板 / 员工 / 权限那一排入口一个都不丢；
   · 收起态（.side-min）下侧栏只剩 46px，分类面板跟着藏起来，别把字挤成两行。
   ========================================================================== */
.admin-side .side-cats { display: none; flex-direction: column; gap: 2px; }
.admin-side.side-cats-on > button[data-tab] { display: none; }
.admin-side.side-cats-on .side-cats { display: flex; }
.admin-body.side-min .admin-side .side-cats { display: none; }

.admin-side .side-cat { display: flex; align-items: center; gap: 6px; padding: 8px 10px; }
.admin-side .side-cat .sc-ic { flex: none; font-size: 13px; line-height: 1; filter: grayscale(.15); }
.admin-side .side-cat .sc-nm { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.admin-side .side-cat .sc-ct {
  flex: none; font-size: 11px; color: var(--text-3); font-variant-numeric: tabular-nums;
  background: var(--panel-2); border-radius: 20px; padding: 1px 7px;
}
.admin-side .side-cat.on .sc-ct { background: #fff; color: var(--brand); }
.admin-side .side-cat.on .sc-ic { filter: none; }
.admin-side .side-cats-more {
  margin-top: 4px; padding: 7px 10px; font-size: 12px; color: var(--text-3);
  border-top: 1px dashed var(--line); border-radius: 0 0 8px 8px; text-align: left;
}
.admin-side .side-cats-more:hover { color: var(--brand); background: var(--brand-soft); }
@media (max-width: 1024px) {
  /* 窄屏侧栏是横排换行，分类也横着排 */
  .admin-side .side-cats { flex-direction: row; flex-wrap: wrap; width: 100%; }
  .admin-side .side-cat { width: auto; }
  .admin-side .side-cats-more { width: auto; margin: 0; border-top: none; border-radius: 8px; }
}

/* ==========================================================================
   第 175 项：进销存左侧换成「子栏目导航」
   用户原话：「左边的分类呢」（配图＝进销存页左边仍是「合同模板 / 员工 / 权限」那排全局入口，
   进销存自己的十几个子栏目却横在内容区顶上）。
   复用第 135 项那套容器与按钮样式（.side-cat / .sc-ic / .sc-nm），数据源换成 INV_SUBS，
   底部同样留「更多功能 »」；子栏目按 INV_SUB_PERM 过滤，没权限的不出现。
   ========================================================================== */
.admin-side .side-empty { padding: 10px; font-size: 12.5px; color: var(--text-3); }
/* 进销存 13 项比产品库那 11 项更长，768 高的笔记本上会顶到屏幕底（侧栏是 sticky，滚不到）→ 让它自己滚。
   窄屏不适用：那时是横排换行，限高会把按钮切一半。 */
@media (min-width: 1025px) {
  .admin-side.side-cats-on .side-cats { max-height: calc(100vh - 200px); overflow-y: auto; }
}
/* 左侧已经有分类了，内容区顶上那排就重复 → 藏掉（它仍在 DOM 里渲染，
   是左侧高亮的真相来源，也是收起侧栏 / 切回「更多功能」时的兜底入口）。
   ⚠️ 只有 **进销存 + 侧栏确实在显示分类** 时才藏；一旦点「更多功能 »」切回菜单、
   或把侧栏收起（.side-min 只剩 46px，分类被藏），顶部那排必须回来 —— 否则一个子栏目都点不到。
   .side-classified 由 setSideMode() 写在 #tab-inv 上。 */
#tab-inv.side-classified .inv-adnav { display: none; }
.admin-body.side-min #tab-inv.side-classified .inv-adnav { display: grid; }
@media (max-width: 1024px) {
  /* 窄屏侧栏是横排、切换按钮也藏起来了：分类一律留在侧栏里，顶部那排不回来 */
  .admin-body.side-min .admin-side .side-cats { display: flex; }
  .admin-body.side-min #tab-inv.side-classified .inv-adnav { display: none; }
  /* 进销存例外：13 个子栏目横排在 430px 手机上要占 ~480px 高（用户得先滚过一整屏才看到内容），
     远不如内容区顶上那排 6 列等宽网格（约 90px）。
     所以窄屏改回「顶部那排 + 侧栏恢复全局入口」，功能一个不少。 */
  .admin-side.side-inv-on .side-cats { display: none; }
  .admin-side.side-inv-on > button[data-tab] { display: block; }
  .admin-side.side-inv-on .admin-side-hd { display: none; }   /* 标题写着「进销存分类」但面板已收起，留着会误导 */
  #tab-inv.side-classified .inv-adnav,
  .admin-body.side-min #tab-inv.side-classified .inv-adnav { display: grid; }
}

/* 新增产品后滚到的那一行闪一下，让人一眼看到「就是这条」 —— 三秒后自己消失 */
#prodBody tr.prod-new > td { animation: prodRowFlash 2.6s ease-out; }
@keyframes prodRowFlash {
  0%, 55% { background: var(--brand-soft); }
  100% { background: transparent; }
}

/* ==========================================================================
   第 135 项之二：可搜索的项目选择框（出库单 / 采购入库 / 采购需求）
   原来是一个原生 <select>，项目一多就得拿滚轮在几百条里翻。
   现在：输入框打「项目编号 / 客户名 / 地址」→ 下面列命中项 → 点一下选中。
   ⚠️ 真正的值仍然存在隐藏的 <select id="ioProj"> 里，保存逻辑一行都不用改。
   ========================================================================== */
.inv-proj-cell { position: relative; min-width: 0; }
.inv-proj-native { display: none !important; }
.inv-proj-row { position: relative; display: flex; align-items: center; min-width: 0; }
.inv-proj-row .inv-proj-mag {
  position: absolute; left: 10px; font-size: 12px; opacity: .6; pointer-events: none; line-height: 1;
}
.modal-bd .inv-proj-inp { padding-left: 30px; padding-right: 30px; }
.inv-proj-x {
  position: absolute; right: 6px; width: 22px; height: 22px; padding: 0; border-radius: 50%;
  display: grid; place-items: center; font-size: 11px; line-height: 1;
  color: var(--text-3); background: var(--panel-2);
}
.inv-proj-x:hover { color: #fff; background: var(--danger, #e5484d); }
.inv-proj-cur {
  font-size: 12px; color: var(--text-2); padding: 3px 2px 0; line-height: 1.5;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.inv-proj-cur.is-blank { color: var(--text-3); }
.inv-proj-list {
  display: none; position: absolute; left: 0; right: auto; top: 100%; z-index: 60; margin-top: 5px;
  width: max(100%, 460px); max-width: min(92vw, 640px);   /* 第 185 项：加宽，地址写得下 */
  background: #fff; border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--shadow-lg);
  max-height: 288px; overflow: auto; padding: 4px;
}
.inv-proj-list.on { display: block; }
/* 下方空间不够时往上翻（fit() 会挂这个类），别被弹窗底边裁掉 */
.inv-proj-list.up { top: auto; bottom: 100%; margin-top: 0; margin-bottom: 5px; }
.inv-proj-opt {
  display: block; width: 100%; text-align: left; padding: 7px 9px; border-radius: 7px;
  font-size: 12.5px; color: var(--text-2); line-height: 1.45;
  white-space: normal; word-break: break-all;   /* 第 185 项：完整地址，不再截断 */
}
.inv-proj-opt.on, .inv-proj-opt:hover { background: var(--brand-soft); color: var(--brand); }
.inv-proj-opt .ip-tag { font-size: 11px; color: var(--text-3); margin-left: 4px; }
.inv-proj-more { padding: 6px 9px 4px; font-size: 11.5px; color: var(--text-3); }
.inv-proj-empty { padding: 12px 8px; font-size: 12px; color: var(--text-3); text-align: center; }

/* ---------- 第 185 项：出库列表明细预览 / 备注抬头 / 客户组工具 ---------- */
.io-note { font-size: 11.5px; color: var(--amber, #b8860b); margin-top: 2px; }
.io-mini { font-size: 11.5px; color: var(--text-3); margin-top: 3px; }
.io-morebtn { border: 0; background: none; color: var(--brand); font-size: 11.5px; padding: 0 0 0 4px; cursor: pointer; }
.io-morebtn:hover { text-decoration: underline; }
.io-all { font-size: 11.5px; color: var(--text-2); margin-top: 4px; padding: 4px 8px; background: var(--panel-2, #f7f7f5); border-radius: 6px; }
.io-allrow { line-height: 1.7; }
.io-paid { margin: 0 6px; }
.io-sec { margin: 12px 0 16px; }
.io-sec-hd { font-size: 13px; margin-bottom: 5px; display: flex; gap: 10px; flex-wrap: wrap; align-items: baseline; }
.io-sec-hd b { font-weight: 700; }
.inv-proj-cell { min-width: 300px; }   /* 185：选择框本身也放宽一档 */

/* ---------- 第 137 项：登录已过期引导（方案保存被 42501 拦下时的说明弹层） ---------- */
.sx-wrap { text-align: center; padding: 6px 4px 2px; }
.sx-ic { font-size: 34px; line-height: 1; margin-bottom: 10px; }
.sx-hd { font-size: 15px; font-weight: 700; color: var(--text); margin-bottom: 12px; }
.sx-hd b { color: #d9480f; }
.sx-p { font-size: 13px; color: var(--text-2); line-height: 2; margin: 0 0 10px; text-align: left; }
.sx-p b { color: var(--text); }
.sx-tip { font-size: 12px; color: var(--text-3); line-height: 1.9; margin: 0; text-align: left;
  background: var(--bg-2, #f8f9fb); border-radius: 8px; padding: 9px 12px; }

/* ---------- 第 149 项：审核中心筛选条（提交人 / 时间跨度 / 导出 Excel） ---------- */
.aud-bar {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin: 0 0 10px; padding: 8px 10px;
  background: var(--panel-2); border: 1px solid var(--line); border-radius: 10px;
}
.aud-bar .ab-lb { font-size: 12px; font-weight: 700; color: var(--text-3); }
.aud-bar select, .aud-bar input[type=date] {
  height: 30px; padding: 0 8px; font-size: 12.5px; color: var(--text);
  background: var(--panel); border: 1px solid var(--line); border-radius: 8px;
  font-family: inherit;
}
.aud-bar select { min-width: 122px; max-width: 180px; }
.aud-bar input[type=date] { width: 134px; }
.aud-bar select:focus, .aud-bar input[type=date]:focus { outline: none; border-color: var(--brand); }
.aud-bar .ab-tilde { font-size: 12px; color: var(--text-3); }
.aud-bar .ab-n { font-size: 12px; color: var(--text-3); }
.aud-bar .ab-n b { color: var(--text); font-weight: 700; }
.aud-bar .grow { flex: 1; min-width: 8px; }
@media (max-width: 640px) {
  .aud-bar { gap: 6px; padding: 8px; }
  .aud-bar select { flex: 1 1 100%; max-width: none; }
  .aud-bar input[type=date] { flex: 1 1 40%; width: auto; min-width: 0; }
  .aud-bar .ab-tilde { display: none; }
  .aud-bar .ab-n { flex: 1 1 100%; }
  .aud-bar .grow { display: none; }
}

/* 第 149 项：审核中心的表格在手机上自带横向滚动（否则十列会把整页撑宽）。
   表头是 .tbl.plain（position:static），不影响 sticky 白名单，已顺手登记 .aud-scroll。 */
.aud-scroll { overflow-x: auto; }

/* ---------- 第 150 项：配置清单「是否安装」开关（名称后面那颗小胶囊） ----------
   点一下切换「安装 / 不安装」：不安装的行数量不进下方人工费的自动求和，
   产品本身照常计价、照常进报价单与配货单。默认全是「安装」，
   第十项「安装费(轨道/非智能)」默认「不安装」（选了就表示这些米数也算智能点位）。 */
.inst-tog {
  display: inline-flex; align-items: center; gap: 3px;
  height: 19px; padding: 0 7px 0 4px; margin-left: 6px;
  border: 1px solid var(--line); border-radius: 10px;
  background: var(--panel-2); color: var(--text-3);
  font-size: 11px; line-height: 1; font-weight: 500;
  cursor: pointer; user-select: none; vertical-align: middle; white-space: nowrap;
}
.inst-tog:hover { border-color: var(--brand-2); }
.inst-tog input { width: 11px; height: 11px; margin: 0; cursor: pointer; accent-color: var(--brand); }
.inst-tog.on { border-color: #ffd3b6; background: var(--brand-soft); color: var(--brand); }
/* 不安装的行：名称降一档，扫一眼就能看出这行不计人工费 */
.tbl tr.noinst .cell-name .nm > .editable { color: var(--text-2); }
@media (max-width: 640px) {
  .inst-tog { height: 18px; padding: 0 6px 0 3px; font-size: 10.5px; margin-left: 4px; }
  .inst-tog input { width: 10px; height: 10px; }
}

/* ---------- 第 151 项：客户列表「读取失败」提示（读不到 ≠ 没有客户） ---------- */
.cust-err {
  margin: 0 0 10px; padding: 9px 12px;
  border: 1px solid #f3c9a6; border-left: 3px solid var(--amber);
  background: var(--amber-soft); color: var(--text);
  border-radius: 8px; font-size: 12.5px; line-height: 1.75;
}
.cust-err b { color: var(--amber); }

/* ---------- 第 152 项：工资单四项「明细」（按钮挂在项目名后面，与文字同一行） ----------
   绩效工资 / 报销金额 / 竣工奖励 / 特别奖励 四格都用 .sal-mini 这颗小胶囊；
   明细弹窗里的宽表自带横向滚动，手机上不会把弹窗撑宽。 */
.sal-item > span { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.sal-item > span .sal-mini { margin-left: 0; }   /* 间距交给 gap，免得 6px + gap 叠成 11px */
.sal-scroll { overflow-x: auto; }
@media (max-width: 640px) {
  .sal-item > span { gap: 4px; }
}

/* 第 152 项：明细弹窗里的合计数字。
   ⚠️ 别再复用 .aw-sum —— 那个类是「竣工奖励弹窗的汇总卡」（display:flex），
   套在 <b> 上会把合计挤到单独一行。 */
.aw-total { color: var(--amber); font-size: 15px; }

/* ==========================================================================
   客户资料（第 178 项）—— 文件存自建服务器 /www/files，这里只有列表与预览
   前缀统一用 .cdoc-，别用 .doc-（.doc-no 是单据编号的老类，会串）
   ========================================================================== */
.cdoc { display: block; }
.cdoc-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.cdoc-sum { font-size: 12px; color: var(--text-3); }
.cdoc-warn {
  margin: 0 0 8px; padding: 8px 10px; border-radius: var(--radius-sm);
  background: var(--amber-soft); color: var(--amber); font-size: 12px; line-height: 1.6;
}
.cdoc-list { display: flex; flex-direction: column; gap: 6px; }
.cdoc-row {
  display: flex; align-items: center; gap: 10px; padding: 7px 10px;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--panel); transition: border-color .15s, box-shadow .15s;
}
.cdoc-row:hover { border-color: var(--brand); box-shadow: var(--shadow-sm); }
.cdoc-th {
  width: 44px; height: 44px; flex: none; border-radius: 7px; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  background: var(--panel-2); border: 1px solid var(--line-2);
}
.cdoc-th img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cdoc-ic { font-size: 20px; line-height: 1; }
.cdoc-mn { flex: 1 1 auto; min-width: 0; }
.cdoc-nm {
  display: flex; align-items: center; gap: 6px;
  font-size: 13.5px; font-weight: 600; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cdoc-cat {
  flex: none; font-size: 11px; font-weight: 400; padding: 1px 6px;
  border-radius: 4px; background: var(--brand-soft); color: var(--brand);
}
.cdoc-cat.ghost { background: transparent; border: 1px solid var(--line); color: var(--text-3); }
.cdoc-sub { font-size: 11.5px; color: var(--text-3); margin-top: 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cdoc-act { display: flex; gap: 4px; flex: none; }
.cdoc-empty { padding: 18px 12px; text-align: center; color: var(--text-3); font-size: 13px; }
.cdoc-tip { font-size: 11.5px; color: var(--text-3); margin-top: 8px; line-height: 1.65; }
/* 预览 */
.cdoc-pv { text-align: center; }
.cdoc-pv-img { max-width: 100%; max-height: 68vh; display: block; margin: 0 auto; border-radius: 6px; }
.cdoc-pv-pdf { width: 100%; height: 68vh; border: 1px solid var(--line); border-radius: 6px; }
.cdoc-pv-none { padding: 34px 16px; color: var(--text-3); font-size: 13px; }
.cdoc-pv-meta { font-size: 12px; color: var(--text-3); margin-top: 8px; }

@media (max-width: 720px) {
  .cdoc-row { flex-wrap: wrap; align-items: flex-start; }
  .cdoc-mn { flex-basis: calc(100% - 58px); }
  .cdoc-act { flex-basis: 100%; justify-content: flex-end; margin-top: 2px; }
  .cdoc-nm { white-space: normal; }
  .cdoc-sub { white-space: normal; }
}

/* 客户资料弹窗要宽一些：一行里有缩略图 + 文件名 + 三个按钮，400px 会挤成一团 */
.inv-layer .modal.cdoc-modal { width: 100%; max-width: 760px; }
.cdoc-fn { flex: 0 1 auto; min-width: 0; max-width: 62%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* 第 187 项：列表分页条（项目列表 / 出库单列表共用）
   贴在表格下面：左边「第 X-Y 条 / 共 N 条」，右边每页条数 + 上一页 / 下一页。 */
.pgr {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin-top: 10px; padding: 8px 10px;
  background: var(--bg-2, #f7f9fc); border: 1px solid var(--line); border-radius: 9px;
}
.pgr .pgr-info { font-size: 12.5px; color: var(--text-3); }
.pgr .pgr-num { font-size: 12.5px; color: var(--text-2); min-width: 62px; text-align: center; }
.pgr .mini-sel { width: auto; min-width: 96px; }
.pgr .btn[disabled] { opacity: .45; cursor: not-allowed; }

/* ---- 第 190 项：出库单附件（新增出库 / 确认出库上传，明细里查看） ---- */
.inv-files { display: flex; flex-wrap: wrap; gap: 8px; }
.inv-files:empty { display: none; }
.inv-fchip { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line-2);
  border-radius: 10px; padding: 4px 8px; font-size: 12px; max-width: 230px; background: var(--bg, #fff); }
.inv-fchip img { width: 34px; height: 34px; object-fit: cover; border-radius: 6px; flex: none; }
.inv-fchip .inv-fic { font-size: 18px; flex: none; }
.inv-fchip .inv-fnm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 130px; }
.inv-fchip .inv-fsz { color: var(--text-3); font-size: 11px; flex: none; }
.inv-fchip .inv-fx { cursor: pointer; color: var(--text-3); border: 0; background: none;
  font-size: 13px; padding: 0 2px; line-height: 1; flex: none; }
.inv-fchip .inv-fx:hover { color: #c0392b; }
.inv-fchip.view { cursor: pointer; }
.inv-fchip.view:hover { border-color: var(--brand); }
.io-atts { font-size: 11px; color: var(--brand); margin-left: 5px; white-space: nowrap; }