/* ============================================================
   沈锦泵业 · 进销存系统  |  白色底 + 科技蓝（浅色主题）
   设计基线：白底、去描边、大留白（呼吸感），蓝色沿用 #2563eb / #0891b2
   ============================================================ */
:root {
  /* 表面 */
  --bg: #f6f8fc;          /* 页面底 */
  --surface: #ffffff;     /* 卡片 / 面板 */
  --surface-2: #f8fafd;   /* 次级块 */
  --surface-3: #eef4ff;   /* 蓝色浅底（选中、强调） */

  /* 描边（仅保留极浅分隔，不做硬描边） */
  --line: #eef3fa;
  --line-2: #e3ebf6;

  /* 品牌蓝 */
  --blue: #2563eb;
  --blue-deep: #1d4ed8;
  --blue-ink: #1a3a7a;
  --blue-soft: #eff5ff;
  --cyan: #0891b2;
  --cyan-2: #0891b2;      /* 兼容模板中已有的 var(--cyan-2) 引用 */
  --cyan-soft: #ecfeff;

  /* 文字 */
  --text: #0f1b2d;
  --text-2: #4a5c76;
  --text-3: #8a9bb5;
  --text-4: #a9b8cc;

  /* 语义色 */
  --ok: #15a34a;
  --warn: #d97706;
  --danger: #dc2626;

  /* 表单填充色（无边框风格） */
  --field: #f4f8fd;
  --field-hover: #edf4fe;

  /* 后台桌面版式最小宽度（窗口更窄时整页横向滚动，不做移动端压缩） */
  --app-min-w: 1500px;

  --radius: 14px;
  --shadow-sm: 0 1px 2px rgba(16, 32, 64, .04);
  --shadow: 0 2px 8px -2px rgba(16, 32, 64, .06), 0 12px 30px -22px rgba(16, 32, 64, .22);
  --shadow-lg: 0 24px 64px -28px rgba(15, 27, 45, .38);
  /* 2026-10-22：按「统一采用微软雅黑」要求，单号 / 编码 / 金额也走微软雅黑
     （雅黑数字本身等宽，编号对齐不受影响） */
  --mono: "Microsoft YaHei UI", "Microsoft YaHei", "PingFang SC", "Segoe UI", sans-serif;
  --grad-blue: linear-gradient(100deg, #2563eb, #0891b2);

  /* 下拉框箭头（背景图，必须同时锁定 no-repeat，否则会被平铺成波浪线） */
  --sel-arrow: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.6 6 6.4l5-4.8' fill='none' stroke='%238a9bb5' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --sel-arrow-on: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.6 6 6.4l5-4.8' fill='none' stroke='%232563eb' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* ============================================================
   护眼模式（浅豆绿 · 米绿纸感）
   用法：<html data-theme="eye"> 时整站换色；默认模式不加该属性，
        上面 :root 的变量原封不动，视觉零变化。
   原则：只换颜色变量 + 少数写死的白色 / 蓝色装饰，
        布局、尺寸、字体、间距一律不动。
   ============================================================ */
html[data-theme="eye"] {
  color-scheme: light;
  /* 表面：去掉纯白反光，改米绿纸感（护眼的主要来源） */
  --bg: #e6eee0;
  --surface: #f7faf1;
  --surface-2: #edf4e6;
  --surface-3: #dfecd7;

  /* 分隔线：绿调浅线 */
  --line: #e2ebd9;
  --line-2: #d3e0c6;

  /* 主色：降饱和的静谧蓝绿，减少蓝光刺激，仍保留「蓝」的识别度 */
  --blue: #2f6a8a;
  --blue-deep: #23546e;
  --blue-ink: #1c4356;
  --blue-soft: #e7f0e9;
  --cyan: #2b8375;
  --cyan-2: #2b8375;
  --cyan-soft: #e4f1ea;

  /* 文字：暖深灰绿，代替原来的冷蓝黑 */
  --text: #2b332a;
  --text-2: #4d5949;
  --text-3: #77836f;
  --text-4: #97a38e;

  /* 语义色：整体向暖、低饱和靠 */
  --ok: #3f7d3a;
  --warn: #a8710f;
  --danger: #b0492f;

  /* 表单填充 */
  --field: #edf4e6;
  --field-hover: #e5eed9;

  --shadow-sm: 0 1px 2px rgba(74, 92, 60, .05);
  --shadow: 0 2px 8px -2px rgba(74, 92, 60, .07), 0 12px 30px -22px rgba(74, 92, 60, .24);
  --shadow-lg: 0 24px 64px -28px rgba(45, 58, 36, .28);

  --grad-blue: linear-gradient(100deg, #2f6a8a, #2b8375);

  --sel-arrow: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.6 6 6.4l5-4.8' fill='none' stroke='%2377836f' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --sel-arrow-on: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.6 6 6.4l5-4.8' fill='none' stroke='%232f6a8a' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
/* ============================================================
   深色模式（深空黑 + 霓虹青蓝 + 玻璃质感）
   与护眼模式同一机制：<html data-theme="dark"> 时整站换色，
   半透明表面 + backdrop-filter 做出玻璃感，边框一律用
   box-shadow 环（不写 border）—— 避免 1px 实体边框挤压
   已经按 1184px 精算过的表格内容宽。
   ============================================================ */
html[data-theme="dark"] {
  color-scheme: dark;                       /* 原生日期框 / 滚动条 / 下拉菜单跟着变深色 */
  --bg: #05090f;
  --surface: rgba(17, 26, 41, .68);        /* 玻璃卡片（半透明，靠 blur 吃背景光晕） */
  --surface-2: rgba(255, 255, 255, .05);
  --surface-3: rgba(56, 189, 248, .14);

  --line: rgba(140, 180, 255, .12);
  --line-2: rgba(140, 180, 255, .20);

  --blue: #38bdf8;
  --blue-deep: #7dd3fc;
  --blue-ink: #bae6fd;
  --blue-soft: rgba(56, 189, 248, .14);
  --cyan: #22d3ee;
  --cyan-2: #22d3ee;
  --cyan-soft: rgba(34, 211, 238, .14);

  --text: #e8f1ff;
  --text-2: #a8bad2;
  --text-3: #7488a4;
  --text-4: #5b6f8c;

  --ok: #34d399;
  --warn: #fbbf24;
  --danger: #f87171;

  --field: rgba(255, 255, 255, .055);
  --field-hover: rgba(255, 255, 255, .095);

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .5);
  --shadow: 0 2px 10px -2px rgba(0, 0, 0, .55), 0 28px 60px -30px rgba(0, 0, 0, .9);
  --shadow-lg: 0 32px 80px -30px rgba(0, 0, 0, .95);

  --grad-blue: linear-gradient(100deg, #0ea5e9, #22d3ee);

  --sel-arrow: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.6 6 6.4l5-4.8' fill='none' stroke='%237488a4' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --sel-arrow-on: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.6 6 6.4l5-4.8' fill='none' stroke='%2338bdf8' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* 写死的冷白 / 蓝光装饰一并换成暖调 */
html[data-theme="eye"] .topbar { background: rgba(247, 250, 241, .86); box-shadow: 0 1px 0 rgba(74, 92, 60, .07); }
html[data-theme="eye"] .sidebar { box-shadow: 1px 0 0 rgba(74, 92, 60, .06); }
html[data-theme="eye"] .bg-layer::before {
  background-image:
    linear-gradient(rgba(63, 106, 74, .06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(63, 106, 74, .06) 1px, transparent 1px);
}
html[data-theme="eye"] .glow.a { background: radial-gradient(circle, rgba(76, 128, 96, .15), transparent 70%); }
html[data-theme="eye"] .glow.b { background: radial-gradient(circle, rgba(47, 106, 138, .10), transparent 70%); }
html[data-theme="eye"] .nav::-webkit-scrollbar-thumb { background: #ccdcbf; }
html[data-theme="eye"] .avatar { box-shadow: 0 6px 14px -8px rgba(47, 106, 138, .7); }
html[data-theme="eye"] body.login-body {
  background: radial-gradient(ellipse 100% 70% at 50% -12%, #e3efe0 0%, #edf4e6 45%, #e6eee0 100%);
}
/* 提示条左侧竖条、复选框描边、登录页标签：蓝灰 → 草绿 */
html[data-theme="eye"] .note-band { background: #eef4e7; border-left-color: #c3d5b3; }
html[data-theme="eye"] .badge.off { background: #e9efe3; color: #6f7c66; }
html[data-theme="eye"] .badge.super { color: #1f6b5f; }
html[data-theme="eye"] .inv-raw pre { background: var(--surface-2); }
html[data-theme="eye"] table.data.rpt-io-sum tr.row-open td { background: #eef4e7; }
html[data-theme="eye"] .chk input { border-color: #c9d9bb; }
html[data-theme="eye"] .login-intro .eyebrow { border-color: #cfe0c4; background: #e9f2e2; }
/* 售后维修页的浅蓝底块（设备序列号 / 单选选中 / 信息提示）转浅绿 */
html[data-theme="eye"] .rp-sn { background: #e6f0e4; color: #1c4356; }
html[data-theme="eye"] .rp-radio:has(input:checked) { border-color: #a8c69a; background: #e9f2e2; }
html[data-theme="eye"] .rp-field > label.rp-upload:active { background: #e9f2e2; }
html[data-theme="eye"] .rp-err.info { background: #e7f0e9; border-color: #cfe0d3; color: #23546e; }
/* 打印一律回白纸，护眼模式不影响出纸效果 */
@media print {
  html[data-theme="eye"] {
    --bg: #fff; --surface: #fff; --surface-2: #f8fafd; --surface-3: #eef4ff;
    --line: #eef3fa; --line-2: #e3ebf6;
    --text: #0f1b2d; --text-2: #4a5c76; --text-3: #8a9bb5; --text-4: #a9b8cc;
    --blue: #2563eb; --blue-deep: #1d4ed8; --blue-ink: #1a3a7a; --blue-soft: #eff5ff;
    --cyan: #0891b2; --cyan-2: #0891b2; --cyan-soft: #ecfeff;
    --ok: #15a34a; --warn: #d97706; --danger: #dc2626;
    --field: #f4f8fd; --field-hover: #edf4fe;
    --grad-blue: linear-gradient(100deg, #2563eb, #0891b2);
  }
  html[data-theme="eye"] .topbar { background: #fff; }
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body { height: 100%; }

body {
  font-family: "Microsoft YaHei UI", "PingFang SC", "Segoe UI", system-ui, sans-serif;
  background: var(--bg);
  color: var(--text);
  font-size: 14px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
button, input, select, textarea { font-family: inherit; font-size: inherit; color: inherit; }
.ico { flex: none; }

/* 品牌标识（用户上传 logo） */
.logo-img { display: block; width: 100%; height: 100%; object-fit: contain; }

/* ---------- 背景装饰 ---------- */
.bg-layer { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.bg-layer::before {
  content: ""; position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(37, 99, 235, .05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(37, 99, 235, .05) 1px, transparent 1px);
  background-size: 46px 46px;
  mask-image: radial-gradient(ellipse 90% 70% at 50% 30%, #000 20%, transparent 100%);
  -webkit-mask-image: radial-gradient(ellipse 90% 70% at 50% 30%, #000 20%, transparent 100%);
}
.glow { position: absolute; border-radius: 50%; filter: blur(90px); opacity: .55; }
.glow.a { width: 620px; height: 620px; left: -180px; top: -240px; background: radial-gradient(circle, rgba(37, 99, 235, .16), transparent 70%); }
.glow.b { width: 560px; height: 560px; right: -160px; bottom: -240px; background: radial-gradient(circle, rgba(8, 145, 178, .14), transparent 70%); }

/* ============================================================
   登录页
   ============================================================ */
body.login-body {
  display: flex; align-items: center; justify-content: center;
  min-height: 100vh; padding: 32px 20px 104px;
  background:
    radial-gradient(ellipse 100% 70% at 50% -12%, #e9f1ff 0%, #f7faff 45%, #ffffff 100%);
}
.login-wrap { position: relative; z-index: 2; width: 100%; max-width: 940px; }
.login-grid { display: grid; grid-template-columns: 1fr 420px; gap: 0; align-items: center; }

.login-intro { padding-right: 44px; animation: fadeUp .7s ease both; }
.login-intro .eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 11px; letter-spacing: 3px; color: var(--blue-deep);
  border: 1px solid #cfe0ff; background: #eff5ff;
  padding: 5px 12px; border-radius: 999px; margin-bottom: 20px;
}
.login-intro h1 {
  font-size: 34px; font-weight: 700; letter-spacing: 1px; line-height: 1.3;
  background: linear-gradient(100deg, #12306b 6%, #1d4ed8 55%, #0891b2 96%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.login-intro p.sub { margin-top: 12px; color: var(--text-2); font-size: 13.5px; max-width: 380px; }
/* 六条价值观标签要在一行放下（左栏可用宽约 476px）→ 间距与内边距收窄 */
.intro-feats { margin-top: 26px; display: flex; flex-wrap: wrap; gap: 8px; }
.intro-feats span {
  font-size: 12px; color: var(--text-2); padding: 5px 10px; border-radius: 8px;
  background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-sm);
  white-space: nowrap;
}
.intro-feats span b { color: var(--blue-deep); font-weight: 700; }

.login-card {
  position: relative; padding: 34px 34px 28px; border-radius: 18px;
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: 0 24px 60px -28px rgba(30, 64, 175, .28), 0 2px 6px rgba(16, 32, 64, .04);
  animation: fadeUp .7s .08s ease both;
}
.login-card::after {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; border-radius: 18px 18px 0 0;
  background: linear-gradient(90deg, #2563eb, #22d3ee, transparent);
}
.login-brand { display: flex; align-items: center; gap: 13px; margin-bottom: 26px; }
.logo-box {
  width: 48px; height: 48px; border-radius: 12px; display: grid; place-items: center;
  background: var(--surface); padding: 4px;
  box-shadow: 0 6px 18px -8px rgba(30, 64, 175, .35), 0 0 0 1px var(--line);
  color: var(--blue);
}
.login-brand .t1 { font-size: 19px; font-weight: 700; letter-spacing: 1px; color: var(--blue-ink); }
.login-brand .t2 { font-size: 10.5px; color: var(--text-3); letter-spacing: 1.6px; margin-top: -2px; }

.field { display: block; margin-bottom: 16px; }
.field > span { display: block; font-size: 12.5px; color: var(--text-2); margin-bottom: 7px; font-weight: 500; }
.inp-wrap { position: relative; }
.inp-wrap .ico { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); color: var(--text-3); }
/* 加 .login-card 前缀提高权重，避免被下方全局 input[type="text"] 规则覆盖 padding/height */
.login-card .inp-wrap input {
  width: 100%; height: 44px; padding: 0 14px 0 40px; border-radius: 10px;
  font-size: 14px; line-height: 44px;
  background: var(--surface-2); border: 1px solid var(--line-2);
  color: var(--text); outline: none; transition: .18s;
}
.login-card .inp-wrap input::placeholder { color: var(--text-4); }
.login-card .inp-wrap input:hover { border-color: #c3d3ea; }
.login-card .inp-wrap input:focus {
  background: var(--surface);
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, .12);
}
.btn-login {
  width: 100%; height: 46px; margin-top: 8px; border: 0; border-radius: 10px; cursor: pointer;
  font-size: 15px; font-weight: 600; letter-spacing: 3px; color: #fff;
  background: var(--grad-blue);
  box-shadow: 0 10px 24px -12px rgba(37, 99, 235, .85);
  transition: .18s;
}
.btn-login:hover { filter: brightness(1.06); transform: translateY(-1px); box-shadow: 0 14px 28px -12px rgba(37, 99, 235, .9); }
.btn-login:active { transform: translateY(0); }

/* ---------- 焦点框：去掉浏览器默认黑框，只留品牌色柔光 ---------- */
button:focus, button:focus-visible,
.btn:focus, .btn:focus-visible,
.nav a:focus, .nav a:focus-visible,
.pager a:focus-visible, .role-item:focus-visible,
.modal-head .x:focus-visible, .logout-btn:focus-visible { outline: none; }
.btn-login:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, .22), 0 10px 24px -12px rgba(37, 99, 235, .85);
}
.btn:focus-visible { box-shadow: 0 0 0 3px rgba(37, 99, 235, .18); }
/* 页脚：固定在页面最底部（版权行 + 技术支持），不参与内容居中 */
.login-foot {
  position: fixed; left: 0; right: 0; bottom: 18px; z-index: 3;
  text-align: center; font-size: 11.5px; line-height: 1.9;
  color: var(--text-4); pointer-events: none;
}
.login-foot .sup { color: var(--text-4); }

.alert {
  display: flex; align-items: center; gap: 8px; padding: 10px 13px; border-radius: 9px;
  font-size: 12.5px; margin-bottom: 16px;
}
.alert.danger { background: #fef2f2; border: 1px solid #fecaca; color: #b91c1c; }
.alert.ok { background: #f0fdf4; border: 1px solid #bbf7d0; color: #15803d; }

/* ============================================================
   主框架
   ============================================================ */
/* 后台统一桌面版式：最小宽度 1280px，窗口更窄时横向滚动，不做移动端压缩
   （移动端界面后期单独开发，登录页 / 扫码页不受此限制） */
body.app-body { background: var(--bg); min-width: var(--app-min-w); }
body.app-body .layout { min-width: var(--app-min-w); }
.layout { position: relative; z-index: 1; display: flex; min-height: 100vh; }

.sidebar {
  width: 232px; flex: none; display: flex; flex-direction: column;
  background: var(--surface);
  box-shadow: 1px 0 0 rgba(16, 32, 64, .035);
}
.sidebar .brand {
  display: flex; align-items: center; gap: 12px; padding: 20px 18px 18px;
}
.sidebar .brand .logo-box { width: 40px; height: 40px; border-radius: 11px; padding: 3px; }
.sidebar .brand .t1 { font-size: 18.5px; font-weight: 600; letter-spacing: .6px; color: var(--blue-ink); }
.sidebar .brand .t2 { font-size: 11px; color: var(--text-3); letter-spacing: 1.4px; margin-top: 1px; }

.nav { flex: 1; overflow-y: auto; padding: 4px 12px 20px; }
.nav::-webkit-scrollbar { width: 5px; }
.nav::-webkit-scrollbar-thumb { background: #e3ebf6; border-radius: 3px; }
.nav-group > .t {
  width: 100%; display: flex; align-items: center; gap: 5px;
  background: none; border: 0; font-family: inherit; text-align: left; cursor: pointer;
  font-size: 18px; color: var(--text-4); padding: 16px 10px 7px; font-weight: 500;
  border-radius: 8px; transition: color .15s, background .15s;
}
.nav-group > .t .gt { letter-spacing: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-group > .t .chev {
  width: 16px; height: 16px; flex: none; opacity: .5;
  transition: transform .22s cubic-bezier(.4, 0, .2, 1), opacity .15s;
}
.nav-group.collapsed > .t .chev { transform: rotate(-90deg); }
.nav-group > .t:hover { color: var(--blue-deep); background: var(--surface-2); }
.nav-group > .t:hover .chev { opacity: .9; }
.nav-group > .t:focus-visible { outline: 2px solid var(--blue); outline-offset: -2px; }
/* 二级菜单折叠：grid-template-rows 0fr/1fr 可动画到「自动高度」 */
.nav-group > .items {
  display: grid; grid-template-rows: 1fr;
  transition: grid-template-rows .22s cubic-bezier(.4, 0, .2, 1);
}
.nav-group.collapsed > .items { grid-template-rows: 0fr; }
/* overflow:hidden 会裁掉 .nav a.active::before 那条左侧竖条（它画在 -12px 处），
   所以把裁剪框向左扩 12px，再用等量 padding 把内容推回原位，视觉宽度不变 */
.nav-group > .items > .items-in {
  overflow: hidden; min-height: 0;
  margin-left: -12px; padding-left: 12px;
}
.nav a {
  display: flex; align-items: center; gap: 10px; padding: 9px 11px; margin: 2px 0;
  border-radius: 10px; color: var(--text-2); font-size: 18px; position: relative; transition: .15s;
}
.nav a:hover { background: var(--surface-2); color: var(--blue-deep); }
.nav a.active {
  background: var(--surface-3); color: var(--blue-deep); font-weight: 500;
}
.nav a.active::before {
  content: ""; position: absolute; left: -12px; top: 50%; transform: translateY(-50%);
  width: 3px; height: 16px; border-radius: 0 3px 3px 0;
  background: var(--grad-blue);
}
.nav a.soon { color: var(--text-3); }
.nav a .tag {
  margin-left: auto; flex: none; font-size: 12px; line-height: 15px; padding: 0 6px;
  border-radius: 5px; color: var(--text-4);
  letter-spacing: 0; font-style: normal; background: var(--surface-2);
}
.nav a span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.side-foot { padding: 14px 16px 16px; }
.side-foot .who { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: 12px; background: var(--surface-2); }
.avatar {
  width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center;
  background: var(--grad-blue); color: #fff; font-size: 15.5px; font-weight: 500;
  box-shadow: 0 6px 14px -8px rgba(37, 99, 235, .8);
}
.side-foot .who .n { font-size: 15px; color: var(--text); line-height: 1.25; font-weight: 500; }
.side-foot .who .r { font-size: 12.5px; color: var(--text-3); }

.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.topbar {
  height: 62px; flex: none; display: flex; align-items: center; gap: 15px;
  padding: 0 30px;
  background: rgba(255, 255, 255, .82); backdrop-filter: blur(12px);
  position: sticky; top: 0; z-index: 20;
  box-shadow: 0 1px 0 rgba(16, 32, 64, .04);
}
.crumb { display: flex; align-items: center; gap: 8px; font-size: 16px; }
.crumb .root { color: var(--text-3); font-size: 15px; }
.crumb .sep { color: var(--text-4); }
.crumb b { font-weight: 500; color: var(--text); }
.topbar .spacer { flex: 1; }
.topbar .status {
  display: flex; align-items: center; gap: 6px; font-size: 14px; color: var(--text-3);
  padding: 5px 11px; border-radius: 999px; background: var(--surface-2);
}
.dot { width: 6px; height: 6px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 0 3px rgba(34, 197, 94, .16); }
.topbar .logout-btn {
  display: flex; align-items: center; gap: 6px; height: 34px; padding: 0 13px;
  border-radius: 9px; border: 0; background: var(--field);
  color: var(--text-2); font-size: 15px; cursor: pointer; transition: .15s;
}
.topbar .logout-btn:hover { color: var(--danger); background: #fef2f2; }

/* 显示模式切换（右上角）：三档横版开关
   结构 = 轨道内三个等宽档位 + 一个滑动高亮块；
   默认模式 / 护眼模式 / 深色模式，滑块位置即当前档位，文字只做深浅区分 */
.theme-switch {
  position: relative; flex: none; display: flex; align-items: center;
  height: 38px; padding: 3px; border-radius: 999px;
  background: var(--surface-2); transition: background .2s;
}
.ts-thumb {
  position: absolute; top: 3px; left: 3px; width: 72px; height: 32px; border-radius: 999px;
  background: var(--surface);
  box-shadow: 0 1px 3px rgba(16, 32, 64, .14), 0 0 0 1px rgba(16, 32, 64, .05);
  transition: transform .24s cubic-bezier(.4, 0, .2, 1), background .2s, box-shadow .2s;
}
.ts-opt {
  position: relative; z-index: 1; width: 72px; height: 32px; border: 0; background: none;
  border-radius: 999px; font-size: 13.5px; font-weight: 500; line-height: 1;
  color: var(--text-3); white-space: nowrap; cursor: pointer; transition: color .16s;
}
.ts-opt:hover { color: var(--text-2); }
/* 当前档加深（三档都只改颜色，字重恒定 → 切换时宽度不抖） */
html:not([data-theme="eye"]):not([data-theme="dark"]) .ts-opt[data-theme-value="default"],
html[data-theme="eye"] .ts-opt[data-theme-value="eye"],
html[data-theme="dark"] .ts-opt[data-theme-value="dark"] { color: var(--text); }
/* 滑块三档位移 */
html[data-theme="eye"] .ts-thumb { transform: translateX(72px); }
html[data-theme="dark"] .ts-thumb { transform: translateX(144px); }

/* 护眼模式下轨道与滑块换成绿色系（避免深蓝块落在豆绿底上） */
html[data-theme="eye"] .theme-switch { background: #e4eeda; }
html[data-theme="eye"] .ts-thumb {
  background: var(--surface);
  box-shadow: 0 1px 3px rgba(74, 92, 60, .18), 0 0 0 1px rgba(120, 150, 100, .18);
}
/* 深色模式：玻璃轨道 + 霓虹滑块 */
html[data-theme="dark"] .theme-switch {
  background: rgba(255, 255, 255, .06);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08), 0 8px 24px -18px rgba(0, 0, 0, .9);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
html[data-theme="dark"] .ts-thumb {
  background: linear-gradient(160deg, rgba(56, 189, 248, .34), rgba(34, 211, 238, .16));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .28),
    0 0 16px rgba(56, 189, 248, .38),
    0 0 0 1px rgba(56, 189, 248, .45);
}

.content { padding: 26px 30px 48px; flex: 1; }

/* ---------- 页头 ---------- */
.page-head { display: flex; align-items: flex-end; gap: 16px; margin-bottom: 22px; }
.page-head h2 { font-size: 24px; font-weight: 600; letter-spacing: .3px; color: var(--text); }
.page-head h2::before {
  content: ""; display: inline-block; width: 3px; height: 16px; border-radius: 2px;
  background: var(--grad-blue); margin-right: 10px; vertical-align: -1px;
}
.page-head .desc { font-size: 15px; color: var(--text-3); padding-bottom: 4px; }
/* 页头下方的提示条统一走 .note-band（见「卡片」段），旧的 .note-line.warn-line 已废弃 */
.page-head .ops { margin-left: auto; display: flex; gap: 10px; }
/* 页头内的返回链接：不再占用标题上方的独立一行，与标题文字基线对齐 */
.page-head .crumb-back { margin-bottom: 0; }

/* ---------- 卡片（无描边，靠投影与留白分层） ---------- */
.card {
  background: var(--surface);
  border-radius: 16px;
  box-shadow: var(--shadow);
}
.card-head {
  display: flex; align-items: center; gap: 10px; padding: 20px 24px 6px;
  font-size: 16px; font-weight: 500; color: var(--text);
}
.card-head .sub { font-size: 14px; color: var(--text-3); font-weight: 400; }
.card-head .ops { margin-left: auto; display: flex; gap: 8px; }
/* 卡片间距兜底：内容区里相邻的两张卡片一律 20px。
   新页面不用再写 style="margin-top:20px"，也不会再出现卡片贴在一起 / 间距忽大忽小。 */
.content > .card + .card { margin-top: 20px; }
/* 卡片后面的提示条同理，否则会贴着上一张卡片的底边 */
.content > .card + .note-band { margin-top: 20px; }
/* 表单页的卡片在 <form> 里，`.content > .card` 选不到（曾经漏掉退厂单、损益单等页面）→ 直接按 form 兜底，新表单页不用再单独加 id 规则 */
form > .card + .card { margin-top: 20px; }
form > .card + .note-band { margin-top: 20px; }

/* ---------- 页级提示条（页头与第一张卡片之间） ---------- */
/* 不要用「白卡片里放一行文字」的做法：卡片白底与页面白底同色，
   视觉上只剩 padding + 外边距 的一片空白，看起来像卡片间距被撑坏了。 */
/* 默认中性色（普通说明）；只有警告 / 重要提示才加 .warn 变橙：
   <div class="note-band warn">…</div> */
.note-band {
  display: flex; align-items: center; gap: 14px;
  margin-bottom: 20px; padding: 12px 16px 12px 14px;
  border-radius: 12px; border-left: 3px solid #cfdaea;
  background: #f6f8fb; color: var(--text-2);
  font-size: 15px; line-height: 1.75;
}
.note-band > .ico { flex: none; color: var(--text-3); }
.note-band b { font-weight: 600; color: var(--text); }
.note-band > .btn { flex: none; height: 34px; }
.note-band.warn { border-left-color: #f59e0b; background: #fff8ed; color: #9a3412; }
.note-band.warn > .ico { color: #d97706; }
.note-band.warn b { color: #9a3412; }
.card-body { padding: 14px 24px 22px; }

/* ---------- 按钮（无描边，填充式） ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 16px;
  border-radius: 10px; border: 0; background: var(--field);
  color: var(--text-2); font-size: 15.5px; cursor: pointer; transition: .16s; white-space: nowrap;
}
.btn:hover { color: var(--blue-deep); background: var(--blue-soft); }
.btn.primary {
  background: var(--grad-blue); color: #fff; font-weight: 500;
  box-shadow: 0 10px 22px -14px rgba(37, 99, 235, .95);
}
.btn.primary:hover { filter: brightness(1.06); color: #fff; }
.btn.ghost { background: transparent; color: var(--text-3); }
.btn.ghost:hover { background: var(--surface-2); color: var(--text-2); }
.btn.danger { background: transparent; color: #b91c1c; }
.btn.danger:hover { background: #fef2f2; }
.btn.sm { height: 30px; padding: 0 9px; font-size: 15px; background: transparent; border-radius: 8px; gap: 5px; }
.btn.sm:hover { background: var(--blue-soft); color: var(--blue-deep); }
.btn.sm.primary { background: var(--grad-blue); color: #fff; font-weight: 500; }
.btn.sm.primary:hover { background: var(--grad-blue); color: #fff; filter: brightness(1.06); }
.btn.sm.danger { color: #c94f4f; }
.btn.sm.danger:hover { background: #fef2f2; color: #b91c1c; }
/* 列表里的实心红按钮（删除）：与 .btn.sm.primary 同尺寸，只换配色 */
.btn.sm.red { background: linear-gradient(100deg, #ef4444, #dc2626); color: #fff; font-weight: 500; }
.btn.sm.red:hover { background: linear-gradient(100deg, #ef4444, #dc2626); color: #fff; filter: brightness(1.06); }
.btn.icon-only { width: 30px; padding: 0; justify-content: center; }
.btn[disabled] { opacity: .45; cursor: not-allowed; }

/* ---------- 表单控件（浅底无边，聚焦才描边） ---------- */
input[type="text"], input[type="password"], input[type="search"], input[type="tel"],
input[type="email"], input[type="number"], select, textarea {
  height: 40px; padding: 0 15px; border-radius: 10px; outline: none;
  background: var(--field); border: 1px solid transparent;
  color: var(--text); transition: background .16s, border-color .16s, box-shadow .16s;
}
input[type="text"]:hover, input[type="password"]:hover, input[type="search"]:hover,
input[type="tel"]:hover, input[type="email"]:hover, input[type="number"]:hover,
select:hover, textarea:hover {
  background-color: var(--field-hover);
}
select {
  padding: 0 34px 0 15px; cursor: pointer;
  -webkit-appearance: none; -moz-appearance: none; appearance: none;
  background-image: var(--sel-arrow);
  background-repeat: no-repeat;
  background-position: right 13px center;
  background-size: 12px 8px;
  text-overflow: ellipsis;
}
/* 悬浮/聚焦只换箭头颜色，务必重复声明 repeat/position，避免箭头被平铺 */
select:hover, select:focus, select:active {
  background-image: var(--sel-arrow-on);
  background-repeat: no-repeat;
  background-position: right 13px center;
  background-size: 12px 8px;
}
textarea { height: auto; min-height: 88px; padding: 11px 15px; resize: vertical; line-height: 1.65; }
input::placeholder, textarea::placeholder { color: var(--text-4); }
input:focus, select:focus, textarea:focus {
  background-color: #fff;
  border-color: #c3d8f8;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, .10);
}
/* 隐藏 Chromium / Safari 在输入框内注入的自动填充小图标，避免与占位符重叠 */
input::-webkit-contacts-auto-fill-button,
input::-webkit-credentials-auto-fill-button {
  visibility: hidden !important; display: none !important;
  pointer-events: none; position: absolute; right: 0;
}
/* 浏览器强制自动填充时的底色覆盖，保持浅底风格 */
input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--text);
  -webkit-box-shadow: 0 0 0 1000px var(--field) inset;
  transition: background-color 99999s ease-in-out 0s;
}

/* 手机号填错时的即时提示 */
input.bad { background-color: #fff7f7; border-color: #f5c0c0; }
input[disabled], select[disabled], textarea[disabled] { background-color: var(--surface-2); color: var(--text-3); cursor: not-allowed; }
select option { background: var(--surface); color: var(--text); }

.toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 20px 24px 16px; }
.toolbar .grow { flex: 1; }
.search-box { position: relative; }
.search-box .ico { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--text-3); }
.search-box input { padding-left: 38px; width: 240px; }

/* ---------- 表格（大行距 + 极浅分隔） ---------- */
.table-wrap { overflow-x: auto; }
/* 表格贴边放在卡片里时（客户类型 / 基础信息 / 员工管理），表头白底会盖住卡片圆角，
   让滚动容器继承卡片圆角并由 overflow 裁剪，四角才跟着圆 */
/* 表格是卡片最后一个元素时，底部留 14px 过渡空白，最后一行不再与卡片圆角贴死 */
.card > .table-wrap { border-radius: inherit; }
.card > .table-wrap:last-child { padding-bottom: 14px; }
table.data { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 15.5px; }
table.data th {
  text-align: left; font-size: 14px; font-weight: 600; color: #3d4453; letter-spacing: .8px;
  padding: 8px 16px 12px; white-space: nowrap; background: var(--surface);
  position: sticky; top: 0; z-index: 2;
  box-shadow: inset 0 -1px 0 var(--line);
}
table.data td {
  padding: 15px 16px; color: var(--text-2); vertical-align: middle;
  white-space: nowrap;
  box-shadow: inset 0 -1px 0 #f4f8fd;
}
table.data th:first-child, table.data td:first-child { padding-left: 24px; }
table.data th:last-child, table.data td:last-child { padding-right: 24px; }
table.data tbody tr { transition: background .14s; }
table.data tbody tr:hover { background: #f8fbff; }
table.data tbody tr:hover td { box-shadow: inset 0 -1px 0 #eef5ff; }
table.data tbody tr:last-child td { box-shadow: none; }
table.data .mono { font-family: var(--mono); font-size: 15px; }
/* 多列宽表（报价单商品明细 16 列）：收紧左右内边距，1500px 应用最小宽度下仍不出现横向滚动 */
table.data.dense th, table.data.dense td { padding-left: 8px; padding-right: 8px; }
table.data.dense th:first-child, table.data.dense td:first-child { padding-left: 16px; }
table.data.dense th:last-child, table.data.dense td:last-child { padding-right: 16px; }
/* 规格型号列下的技术参数副标题：32m³/h-60m-7.5kW-380V-65mm */
table.data .spec-sub { margin-top: 3px; font-size: 12.5px; line-height: 1.3; color: var(--text-3); letter-spacing: 0; white-space: nowrap; }
table.data td.num { font-family: var(--mono); text-align: right; }
table.data .ops { display: flex; align-items: center; justify-content: flex-end; gap: 6px; flex-wrap: nowrap; }

/* 员工单元格（无头像图标，姓名与表头左缘对齐） */
.idx { font-family: var(--mono); font-size: 14.5px; color: var(--text-4); }
.emp { min-width: 0; }
.emp-name { font-size: 16px; font-weight: 500; color: var(--text); line-height: 1.35; }
.emp-sub { font-size: 14px; color: var(--text-4); margin-top: 2px; line-height: 1.3; }
.emp-tel { font-family: var(--mono); font-size: 15.5px; color: var(--text); letter-spacing: .3px; }
.time { font-family: var(--mono); font-size: 15px; color: var(--text-3); }

.badge {
  display: inline-flex; align-items: center; gap: 5px; font-size: 14px;
  padding: 3px 10px; border-radius: 999px; white-space: nowrap;
  background: var(--blue-soft); color: var(--blue-deep); font-weight: 500;
}
/* 分类类标签（所属分类 / 客户类型）：同一列里宽度统一、文字居中（颜色仍走基类） */
.badge.cat { min-width: 76px; justify-content: center; }
.badge.super { background: var(--cyan-soft); color: #0e7490; }
.badge.ok { background: #f0fdf4; color: #15803d; }
.badge.off { background: #f4f6fa; color: #7c8ba1; }
.badge.fail { background: #fef2f2; color: #b91c1c; }

.empty { padding: 56px 20px; text-align: center; color: var(--text-3); font-size: 15.5px; }
.empty .ico { opacity: .35; margin-bottom: 8px; }

/* ---------- 分页 ---------- */
.pager { display: flex; align-items: center; gap: 8px; padding: 16px 24px 20px; }
.pager .info { font-size: 14.5px; color: var(--text-3); }
.pager .pages { margin-left: auto; display: flex; gap: 6px; }
.pager a, .pager span.pg {
  min-width: 32px; height: 32px; padding: 0 10px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 9px; font-size: 15px; color: var(--text-2); background: var(--field);
}
.pager a:hover { color: var(--blue-deep); background: var(--blue-soft); }
.pager .cur { background: var(--grad-blue); color: #fff; font-weight: 500; }
.pager .disabled { opacity: .35; pointer-events: none; }

/* ---------- 弹窗 ---------- */
.modal-mask {
  position: fixed; inset: 0; z-index: 100; display: none;
  align-items: center; justify-content: center; padding: 24px;
  background: rgba(15, 27, 45, .38); backdrop-filter: blur(5px);
}
.modal-mask.show { display: flex; }
.modal {
  width: 100%; max-width: 600px; border-radius: 18px; overflow: hidden;
  background: var(--surface);
  box-shadow: var(--shadow-lg);
  animation: pop .22s ease both;
}
.modal-head { display: flex; align-items: center; padding: 22px 26px 8px; }
.modal-head h3 { font-size: 18.5px; font-weight: 600; }
.modal-head .x { margin-left: auto; cursor: pointer; color: var(--text-4); background: none; border: 0; display: flex; padding: 4px; border-radius: 8px; }
.modal-head .x:hover { color: var(--text); background: var(--surface-2); }
.modal-body { padding: 10px 26px 22px; max-height: 68vh; overflow-y: auto; }
.modal-foot { display: flex; justify-content: flex-end; gap: 10px; padding: 6px 26px 24px; }
.modal-note { font-size: 15px; color: var(--text-2); margin-bottom: 16px; }
.modal-note b { color: var(--blue-deep); }

.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 18px; }
.form-grid .full { grid-column: 1 / -1; }
.form-grid label > span { display: block; font-size: 15px; color: var(--text-2); margin-bottom: 8px; font-weight: 500; }
.form-grid label > span .req { color: var(--danger); margin-left: 2px; font-style: normal; }
.form-grid input, .form-grid select, .form-grid textarea { width: 100%; }
.hint { font-size: 14px; color: var(--text-4); margin-top: 7px; }
.form-grid label > span .opt {
  font-style: normal; font-size: 14px; font-weight: 400; color: var(--text-4);
  margin-left: 6px; padding: 1px 6px; border-radius: 5px; background: var(--field);
}

/* ---------- 提示条 ---------- */
.flash {
  display: flex; align-items: center; gap: 9px; padding: 12px 16px; border-radius: 12px;
  font-size: 15px; margin-bottom: 18px; animation: fadeUp .35s ease both;
}
.flash.ok { background: #f0fdf4; color: #15803d; }
.flash.error { background: #fef2f2; color: #b91c1c; }

/* ---------- 概览卡片 ---------- */
.kpi-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-bottom: 22px; }
.kpi {
  position: relative; padding: 20px 22px; border-radius: 16px; overflow: hidden;
  background: var(--surface);
  box-shadow: var(--shadow);
  transition: .18s;
}
.kpi:hover { box-shadow: 0 18px 40px -26px rgba(16, 32, 64, .35); transform: translateY(-2px); }
.kpi::before {
  content: ""; position: absolute; left: 0; top: 22px; bottom: 22px; width: 3px; border-radius: 0 3px 3px 0;
  background: var(--grad-blue); opacity: .85;
}
.kpi::after {
  content: ""; position: absolute; right: -40px; top: -50px; width: 130px; height: 130px; border-radius: 50%;
  background: radial-gradient(circle, rgba(37, 99, 235, .08), transparent 70%);
}
.kpi .k-label { font-size: 14.5px; color: var(--text-3); display: flex; align-items: center; gap: 7px; }
.kpi .k-label .ico { color: var(--blue); }
.kpi .k-val {
  font-family: var(--mono); font-size: 33.5px; font-weight: 600; line-height: 1.25; margin-top: 8px;
  background: linear-gradient(100deg, #12306b, #2563eb 70%, #0891b2);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.kpi .k-foot { font-size: 14px; color: var(--text-3); margin-top: 4px; }

/* ---------- 角色权限页 ---------- */
.role-layout { display: grid; grid-template-columns: 300px 1fr; gap: 20px; align-items: start; }
.role-list { display: flex; flex-direction: column; padding: 8px; }
.role-item {
  display: block; padding: 12px 14px; border-radius: 10px;
  transition: .15s; cursor: pointer; position: relative; margin-bottom: 2px;
}
.role-item:hover { background: var(--surface-2); }
.role-item.active { background: var(--blue-soft); }
.role-item.active::before {
  content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 3px; height: 18px;
  border-radius: 0 3px 3px 0; background: var(--grad-blue);
}
.role-item .r-name { font-size: 16px; color: var(--text); display: flex; align-items: center; gap: 8px; font-weight: 500; }
.role-item .r-meta { font-size: 14px; color: var(--text-3); margin-top: 3px; }
.role-item .r-code { font-family: var(--mono); font-size: 12.5px; color: var(--text-4); }

.perm-group { margin-bottom: 22px; }
.perm-group .g-head {
  display: flex; align-items: center; gap: 10px; padding-bottom: 10px; margin-bottom: 12px;
}
.perm-group .g-head .g-name { font-size: 15.5px; font-weight: 600; color: var(--blue-ink); letter-spacing: .3px; }
.perm-group .g-head .g-all {
  margin-left: auto; font-size: 14px; color: var(--text-2); cursor: pointer; background: var(--field); border: 0;
  padding: 4px 10px; border-radius: 8px;
}
.perm-group .g-head .g-all:hover { color: var(--blue-deep); background: var(--blue-soft); }
.perm-items { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 8px; }

.chk {
  display: flex; align-items: center; gap: 9px; padding: 10px 12px; border-radius: 10px;
  background: var(--field);
  cursor: pointer; transition: .14s; font-size: 15px; color: var(--text-2);
}
.chk:hover { background: var(--blue-soft); color: var(--blue-deep); }
.chk input { appearance: none; -webkit-appearance: none; width: 16px; height: 16px; border-radius: 5px; border: 1.5px solid #cbd8ea; background: var(--surface); position: relative; cursor: pointer; flex: none; transition: .14s; }
.chk input:checked { background: var(--grad-blue); border-color: transparent; }
.chk input:checked::after {
  content: ""; position: absolute; left: 4.6px; top: 1.6px; width: 4px; height: 8px;
  border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(42deg);
}
.chk input:disabled { opacity: .5; cursor: not-allowed; }
.chk.on { background: var(--blue-soft); color: var(--blue-deep); font-weight: 500; }
.chk.locked { opacity: .55; }

/* ---------- 建设中 ---------- */
.soon-wrap { display: grid; place-items: center; padding: 64px 20px; text-align: center; }
.soon-wrap .big {
  width: 74px; height: 74px; border-radius: 22px; display: grid; place-items: center; margin-bottom: 18px;
  background: linear-gradient(150deg, #eaf2ff, #e6fbff);
  color: var(--blue);
  box-shadow: 0 14px 30px -22px rgba(37, 99, 235, .55);
}
.soon-wrap h3 { font-size: 24px; margin-bottom: 8px; color: var(--text); }
.soon-wrap p { color: var(--text-3); font-size: 15.5px; max-width: 420px; }
.soon-wrap .steps { margin-top: 24px; display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.soon-wrap .steps span { font-size: 14px; color: var(--text-3); background: var(--field); padding: 6px 13px; border-radius: 999px; }

/* ---------- 错误页 ---------- */
.err-wrap { min-height: 100vh; display: grid; place-items: center; padding: 30px; position: relative; z-index: 2; }
.err-card { max-width: 500px; text-align: center; padding: 42px 36px; background: var(--surface); border-radius: 20px; box-shadow: var(--shadow-lg); }
.err-card .code {
  font-family: var(--mono); font-size: 62.5px; font-weight: 600; line-height: 1;
  background: linear-gradient(120deg, #1d4ed8, #0891b2);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.err-card h3 { font-size: 21.5px; margin: 12px 0 8px; }
.err-card p { color: var(--text-2); font-size: 15.5px; }
.err-card .btn { margin-top: 24px; }

/* ---------- 动画 ---------- */
@keyframes fadeUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes pop { from { opacity: 0; transform: scale(.96) translateY(6px); } to { opacity: 1; transform: none; } }

/* ---------- 通知（仿 Notiflix notify：白卡 + 圆形图标 + 顶部居中） ---------- */
@keyframes nfIn { from { opacity: 0; transform: translateY(-12px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes nfOut { to { opacity: 0; transform: translateY(-8px) scale(.985); } }

.toast-wrap {
  position: fixed; top: 20px; left: 50%; transform: translateX(-50%);
  z-index: 999; display: flex; flex-direction: column; align-items: center; gap: 10px;
  width: min(92vw, 420px); pointer-events: none;
}
.nf-toast {
  pointer-events: auto; width: auto; min-width: 220px; max-width: 100%;
  display: flex; align-items: flex-start; gap: 11px;
  padding: 13px 14px 13px 15px; background: var(--surface); border-radius: 10px;
  border-left: 3px solid var(--ok);
  box-shadow: 0 10px 30px -10px rgba(15, 27, 45, .22), 0 2px 8px -2px rgba(15, 27, 45, .08);
  animation: nfIn .28s cubic-bezier(.22, .9, .3, 1.08) both;
}
.nf-toast.error { border-left-color: var(--danger); }
.nf-toast.out { animation: nfOut .24s ease forwards; }
.nf-ic {
  width: 22px; height: 22px; flex: none; border-radius: 50%; display: grid; place-items: center;
  background: var(--ok); color: #fff; margin-top: 1px;
}
.nf-toast.error .nf-ic { background: var(--danger); }
.nf-msg { flex: 1; font-size: 16px; line-height: 1.5; color: var(--text); word-break: break-word; }
.nf-x {
  flex: none; width: 22px; height: 22px; margin: -1px -2px 0 0; border: 0; border-radius: 6px;
  background: transparent; color: var(--text-4); cursor: pointer; font-size: 15.5px; line-height: 1;
  display: grid; place-items: center; transition: .15s;
}
.nf-x:hover { background: var(--surface-2); color: var(--text-2); }
@media (max-width: 640px) { .toast-wrap { top: 12px; width: calc(100vw - 24px); } }

/* ---------- 确认框（替代浏览器原生 confirm，风格同 Notiflix dialog） ---------- */
@keyframes cfFade { from { opacity: 0; } to { opacity: 1; } }
.sj-cf-mask {
  position: fixed; inset: 0; z-index: 320;
  display: flex; align-items: center; justify-content: center; padding: 24px;
  background: rgba(15, 27, 45, .42); backdrop-filter: blur(4px);
  animation: cfFade .16s ease both;
}
.sj-cf-mask.out { animation: cfFade .16s ease reverse both; }
.sj-cf {
  width: 100%; max-width: 396px; padding: 24px 24px 20px;
  background: var(--surface); border-radius: 16px;
  box-shadow: 0 28px 64px -26px rgba(15, 27, 45, .42), 0 2px 8px rgba(15, 27, 45, .05);
  animation: pop .24s cubic-bezier(.22, .9, .3, 1.06) both;
}
.sj-cf-head { display: flex; align-items: flex-start; gap: 13px; }
.sj-cf-ic {
  width: 38px; height: 38px; flex: none; border-radius: 11px;
  display: grid; place-items: center;
}
.sj-cf-ic.danger { background: #fef2f2; color: var(--danger); }
.sj-cf-ic.info { background: var(--blue-soft); color: var(--blue); }
.sj-cf-txt { flex: 1; min-width: 0; padding-top: 1px; }
.sj-cf-title { font-size: 18px; font-weight: 600; color: var(--text); line-height: 1.5; }
.sj-cf-msg { margin-top: 6px; font-size: 15.5px; line-height: 1.72; color: var(--text-2); word-break: break-word; }
.sj-cf-foot { display: flex; justify-content: flex-end; gap: 10px; margin-top: 22px; }
.sj-cf-btn {
  height: 36px; padding: 0 20px; border: 0; border-radius: 9px; cursor: pointer;
  font-family: inherit; font-size: 16px; font-weight: 500;
  transition: background .16s, color .16s, filter .16s, box-shadow .16s;
}
.sj-cf-btn:focus, .sj-cf-btn:focus-visible { outline: none; }
.sj-cf-btn.ghost { background: var(--field); color: var(--text-2); }
.sj-cf-btn.ghost:hover { background: var(--field-hover); color: var(--text); }
.sj-cf-btn.ghost:focus-visible { box-shadow: 0 0 0 3px rgba(37, 99, 235, .16); }
.sj-cf-btn.solid {
  color: #fff; font-weight: 500; background: var(--grad-blue);
  box-shadow: 0 8px 18px -11px rgba(37, 99, 235, .9);
}
.sj-cf-btn.solid:hover { filter: brightness(1.06); }
.sj-cf-btn.solid.danger {
  background: linear-gradient(100deg, #ef4444, #dc2626);
  box-shadow: 0 8px 18px -11px rgba(220, 38, 38, .9);
}
.sj-cf-btn.solid:focus-visible { box-shadow: 0 0 0 3px rgba(37, 99, 235, .22); }
.sj-cf-btn.solid.danger:focus-visible { box-shadow: 0 0 0 3px rgba(220, 38, 38, .22); }

/* 登录页保留窄屏适配（后台页面统一桌面版式，不再做移动端断点） */
@media (max-width: 1180px) {
  .login-grid { grid-template-columns: 1fr; max-width: 440px; margin: 0 auto; }
  .login-intro { display: none; }
}

/* ============================================================
   扫码登录 / 扫码绑定
   ============================================================ */

/* 登录页：右上角扫码入口 */
.login-qr-btn {
  position: absolute; top: 20px; right: 20px;
  width: 42px; height: 42px; padding: 0;
  display: grid; place-items: center;
  border: 1px solid var(--line); border-radius: 12px;
  background: var(--surface); color: var(--text-3); cursor: pointer;
  box-shadow: 0 4px 14px -10px rgba(16, 32, 64, .35);
  transition: color .18s, border-color .18s, background .18s, box-shadow .18s;
  font-family: inherit; z-index: 3;
}
.login-qr-btn > span { display: grid; place-items: center; }
.login-qr-btn:hover {
  color: var(--blue-deep); border-color: #cbdcfa; background: #f5f9ff;
  box-shadow: 0 8px 18px -12px rgba(30, 64, 175, .5);
}
.login-qr-btn .i-back { display: none; }
.login-card.qr-mode .login-qr-btn .i-qr { display: none; }
.login-card.qr-mode .login-qr-btn .i-back { display: grid; }
.login-pane[hidden] { display: none; }

/* 扫码面板 */
.qr-pane { text-align: center; padding-top: 2px; }
.qr-box {
  position: relative; width: 176px; height: 176px; margin: 0 auto;
  padding: 9px; border-radius: 16px; background: var(--surface);
  box-shadow: 0 10px 30px -16px rgba(15, 27, 45, .35), 0 0 0 1px var(--line) inset;
}
.qr-box img { width: 100%; height: 100%; display: block; border-radius: 8px; }
.qr-box.loading::after {
  content: ''; position: absolute; inset: 9px; border-radius: 8px;
  background: linear-gradient(100deg, #f2f6fc, #f8fbff, #f2f6fc);
  background-size: 200% 100%; animation: qrShine 1.1s linear infinite;
}
@keyframes qrShine { from { background-position: 0 0; } to { background-position: -200% 0; } }
.qr-veil[hidden] { display: none; }
.qr-veil {
  position: absolute; inset: 9px; border-radius: 8px; display: grid; place-items: center;
  background: rgba(255, 255, 255, .93); color: var(--text-2); font-size: 12.5px;
  text-align: center; padding: 12px; line-height: 1.6;
}
.qr-veil button {
  margin-top: 10px; height: 32px; padding: 0 14px; border: 0; border-radius: 9px;
  background: var(--grad-blue); color: #fff; font-size: 12.5px; font-weight: 600;
  cursor: pointer; font-family: inherit;
}
.qr-state { margin-top: 12px; font-size: 12.8px; color: var(--text-2); min-height: 20px; }
.qr-state.ok { color: var(--ok); }
.qr-state.warn { color: var(--warn); }
.qr-state.bad { color: var(--danger); }
.qr-tip {
  margin-top: 12px; padding-top: 11px; border-top: 1px solid var(--line);
  font-size: 11.5px; color: var(--text-3); line-height: 1.6;
}
.qr-tip b { color: var(--blue-deep); }

/* 手机端通用（扫码打开） */
body.scan-body {
  background: var(--bg);
  font-family: -apple-system, BlinkMacSystemFont, "Microsoft YaHei UI", "PingFang SC", sans-serif;
  -webkit-text-size-adjust: 100%;
}
.scan-page {
  max-width: 430px; margin: 0 auto; padding: 30px 20px 36px;
  min-height: 100vh; display: flex; flex-direction: column;
}
.scan-brand { display: flex; align-items: center; gap: 12px; padding: 0 4px 22px; }
.scan-brand .logo-box { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; background: var(--surface); box-shadow: 0 4px 14px -8px rgba(15, 27, 45, .4); }
.scan-brand .logo-img { width: 32px; height: 32px; object-fit: contain; }
.scan-brand .t1 { font-size: 15.5px; font-weight: 700; color: var(--blue-ink); letter-spacing: .5px; }
.scan-brand .t2 { font-size: 10px; color: var(--text-3); letter-spacing: 1.2px; margin-top: 1px; }

.scan-card {
  background: var(--surface); border-radius: 18px; padding: 30px 22px 24px;
  box-shadow: 0 18px 44px -28px rgba(15, 27, 45, .45);
  text-align: center;
}
.scan-badge {
  width: 58px; height: 58px; margin: 0 auto 16px; border-radius: 50%;
  display: grid; place-items: center;
}
.scan-badge.ok { background: var(--blue-soft); color: var(--blue); }
.scan-badge.warn { background: #fff6e8; color: var(--warn); }
.scan-badge.bad { background: #fdecec; color: var(--danger); }
.scan-badge.big { width: 68px; height: 68px; }
.scan-card h2 { font-size: 19px; color: var(--text); font-weight: 700; letter-spacing: .3px; }
.scan-meta { margin-top: 7px; font-size: 12.5px; color: var(--text-3); }
.scan-desc { margin-top: 12px; font-size: 13px; color: var(--text-2); line-height: 1.75; text-align: left; }
.scan-note {
  margin-top: 16px; padding: 11px 13px; border-radius: 11px;
  font-size: 12.2px; line-height: 1.65; text-align: left;
}
.scan-note.good { background: #eefaf1; color: #147a3c; }
.scan-note.warn { background: #fff7ea; color: #a35a05; }
.scan-btn {
  display: flex; align-items: center; justify-content: center; gap: 7px;
  width: 100%; height: 46px; margin-top: 20px; border: 0; border-radius: 12px;
  background: var(--grad-blue); color: #fff; font-size: 15px; font-weight: 600;
  font-family: inherit; cursor: pointer; text-decoration: none;
  box-shadow: 0 12px 26px -14px rgba(37, 99, 235, .85);
}
.scan-btn:active { transform: translateY(1px); }
.scan-btn.ghost {
  background: var(--field); color: var(--blue-deep); box-shadow: none;
  font-size: 14px; height: 44px;
}
.scan-tip { margin-top: 16px; font-size: 11.5px; color: var(--text-4); line-height: 1.7; }
.scan-foot { margin-top: auto; padding-top: 26px; text-align: center; font-size: 11px; color: var(--text-3); }

/* 员工二维码弹窗 */
.qr-modal { text-align: center; }
.qr-modal .qr-holder {
  width: 208px; height: 208px; margin: 0 auto; padding: 8px;
  background: var(--surface); border-radius: 14px; box-shadow: 0 0 0 1px var(--line) inset;
}
.qr-modal .qr-holder img { width: 100%; height: 100%; display: block; border-radius: 8px; }
.qr-modal .qr-name { margin-top: 16px; font-size: 15px; font-weight: 700; color: var(--text); }
.qr-modal .qr-sub { margin-top: 4px; font-size: 12.2px; color: var(--text-3); }
.qr-modal .qr-badge {
  display: inline-flex; align-items: center; gap: 5px; margin-top: 12px;
  padding: 4px 10px; border-radius: 999px; font-size: 11.5px;
}
.qr-modal .qr-badge.on { background: #eefaf1; color: #147a3c; }
.qr-modal .qr-badge.off { background: var(--field); color: var(--text-3); }
.qr-modal .qr-help {
  margin-top: 16px; padding: 11px 13px; border-radius: 11px; background: var(--surface-2);
  font-size: 11.8px; color: var(--text-2); line-height: 1.7; text-align: left;
}

/* ============================================================
   基础信息 / 客户类型 / 客户档案
   ============================================================ */

/* 双栏卡片（基础信息：单位 + 税率） */
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: start; }

/* 单位标签 */
.unit-chip {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 40px; height: 26px; padding: 0 11px; border-radius: 8px;
  background: var(--blue-soft); color: var(--blue-deep);
  font-size: 15px; font-weight: 500;
}
/* 客户类型标签 */
.type-chip { display: inline-flex; align-items: center; gap: 7px; font-size: 16px; font-weight: 500; color: var(--text); }
.type-chip .ico { color: var(--blue); }

.dim { color: var(--text-3); font-size: 15px; }
table.data td.rate { font-family: var(--mono); font-size: 15.5px; color: var(--text); }
table.data td.tel { font-family: var(--mono); font-size: 15px; color: var(--text-2); letter-spacing: .2px; }
table.data td.addr { max-width: 320px; overflow: hidden; text-overflow: ellipsis; color: var(--text-3); }

/* 卡片底部说明 */
.note-line { display: flex; gap: 9px; font-size: 15px; color: var(--text-3); line-height: 1.8; }
.note-line .ico { flex: none; margin-top: 3px; color: var(--text-4); }

/* ============================================================
   客户详情（基本信息 + 历史订单 / 设备 / 回访 / 售后）
   ============================================================ */
.crumb-back {
  display: inline-flex; align-items: center; gap: 6px; margin-bottom: 10px;
  padding: 4px 11px 4px 7px; border-radius: 8px;
  font-size: 15px; color: var(--text-3); transition: .16s;
}
.crumb-back:hover { color: var(--blue-deep); background: var(--blue-soft); }
.code-chip {
  font-family: var(--mono); font-size: 14.5px; letter-spacing: .3px;
  color: var(--blue-deep); background: var(--blue-soft);
  padding: 3px 9px; border-radius: 7px;
}

/* 四个统计 */
.dstat { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 20px; }
.dstat-item {
  display: grid; grid-template-columns: 38px minmax(0, 1fr);
  grid-template-areas: "ic main" "foot foot";
  align-items: center; gap: 9px 13px;
  padding: 16px 18px 14px; background: var(--surface); border-radius: 14px;
  box-shadow: var(--shadow);
}
.dstat-item > .ds-ic { grid-area: ic; }
.dstat-item > .ds-main { grid-area: main; min-width: 0; }
.dstat-item > .ds-foot { grid-area: foot; }
.ds-ic { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; }
.ds-ic.blue { background: var(--blue-soft); color: var(--blue); }
.ds-ic.cyan { background: var(--cyan-soft); color: var(--cyan); }
.ds-ic.amber { background: #fff7ed; color: #c2761a; }
.ds-ic.green { background: #f0fdf4; color: #15a34a; }
.ds-v { font-family: var(--mono); font-size: 25px; font-weight: 600; line-height: 1.15; color: var(--text); }
.ds-v i { font-style: normal; font-family: inherit; font-size: 14px; font-weight: 400; color: var(--text-3); margin-left: 3px; }
.ds-l { font-size: 14px; color: var(--text-3); margin-top: 2px; }
.ds-foot {
  font-size: 14px; color: var(--text-3); padding-top: 9px;
  border-top: 1px solid #f4f8fd; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* 两栏 */
.detail-layout { display: grid; grid-template-columns: 322px minmax(0, 1fr); gap: 20px; align-items: start; }

/* 左侧资料卡 */
.info-card { padding: 20px 22px 10px; }
.info-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding-bottom: 4px; }
.info-title { font-size: 16px; font-weight: 600; color: var(--text); letter-spacing: .3px; }
.info-tags { display: flex; align-items: center; gap: 8px; margin-left: auto; flex-wrap: wrap; }
.kv { display: grid; grid-template-columns: 72px minmax(0, 1fr); margin-top: 10px; }
.kv dt, .kv dd { padding: 12px 0; border-top: 1px solid #f4f8fd; }
.kv dt { font-size: 15px; color: var(--text-3); }
.kv dd { font-size: 15.5px; color: var(--text); line-height: 1.6; word-break: break-word; text-align: right; }
.kv dd.mono { font-size: 15px; }

/* 右侧记录卡 */
.rec-card { padding: 6px 0 4px; overflow: hidden; }
.rec-tabs {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  padding: 12px 18px; border-bottom: 1px solid var(--line);
}
.rec-tab {
  display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 13px;
  border: 1px solid transparent; border-radius: 9px; background: transparent; cursor: pointer;
  font-family: inherit; font-size: 15.5px; color: var(--text-2); transition: .16s;
}
.rec-tab:hover { background: var(--field); color: var(--blue-deep); }
.rec-tab.on {
  background: var(--blue-soft); color: var(--blue-deep); font-weight: 500;
}
.rec-tab:focus, .rec-tab:focus-visible { outline: none; }
.rec-tab:focus-visible { box-shadow: 0 0 0 3px rgba(37, 99, 235, .16); }
.rec-tab .n {
  font-family: var(--mono); font-size: 13px; min-width: 20px; padding: 1px 6px; border-radius: 6px;
  background: var(--surface); color: var(--text-3); text-align: center;
}
.rec-tab.on .n { color: var(--blue-deep); }
.rec-pane { display: none; }
.rec-pane.on { display: block; animation: fadeUp .26s ease both; }
.rec-pane .table-wrap { padding-top: 2px; }
.rec-pane .empty { padding: 52px 20px; }

.badge.warn { background: #fff7ed; color: #b45309; }
table.data td.amount { text-align: right; font-family: var(--mono); font-size: 15px; color: var(--text); }
table.data td.wrap-cell { white-space: normal; line-height: 1.55; min-width: 190px; color: var(--text-2); }
.cell-strong { font-size: 15.5px; color: var(--text); font-weight: 500; }

/* ============================================================
   后台版式定版（2026-10-22 二版）
   在大字版基础上字号整体 ×0.8：正文 17px / 表格 15.5px /
   表头 14px / 页面标题 24px / KPI 33.5px；
   控件与间距同步收一档（控件约 ×0.9），字重整体降一级
   （700→600、600→500，正文 400），避免满屏加粗；
   登录页与扫码页不受影响（body.login-body / body.scan-body）
   ============================================================ */
body.app-body { font-size: 17px; }

/* 侧栏 */
.sidebar { width: 272px; }
/* 菜单项较多（36 项 / 11 组）时侧栏吸附视口高度，菜单内部滚动，底部用户信息常驻 */
.sidebar { position: sticky; top: 0; height: 100vh; }
.nav { min-height: 0; }
.sidebar .brand { padding: 20px 18px 16px; gap: 12px; }
.sidebar .brand .logo-box { width: 44px; height: 44px; border-radius: 12px; padding: 4px; }
.nav { padding: 6px 12px 20px; }
.nav-group > .t { padding: 16px 11px 8px; }
.nav-group > .t .gt { letter-spacing: 2.2px; }
.nav a { padding: 9px 12px; gap: 10px; border-radius: 10px; margin: 2px 0; }
.nav a.active::before { height: 18px; width: 3px; }
.nav a .tag { padding: 1px 7px; border-radius: 6px; line-height: 16px; }
.side-foot { padding: 14px 16px 16px; }
.side-foot .who { gap: 10px; padding: 8px; border-radius: 12px; }
.avatar { width: 38px; height: 38px; border-radius: 11px; }

/* 顶栏 */
.topbar { height: 70px; gap: 14px; padding: 0 28px; }
.topbar .status { padding: 6px 12px; gap: 7px; }
.topbar .logout-btn { height: 40px; padding: 0 15px; border-radius: 10px; gap: 7px; }
/* 优先级要高于通用 input[type=search]（同权重且更靠后会把 padding-left 压回 15px，导致放大镜压在占位文字上） */
.search-box input[type="search"] { width: 380px; padding-left: 42px; }
.search-box .ico { left: 15px; }
.content { padding: 26px 28px 44px; }

/* 页头 */
.page-head { gap: 14px; margin-bottom: 22px; }
.page-head h2::before { height: 19px; width: 3px; margin-right: 10px; }
.page-head .desc { padding-bottom: 4px; }
.page-head .ops { gap: 10px; }

/* 卡片 */
.card { border-radius: 16px; }
.card-head { padding: 18px 22px 6px; gap: 10px; }
.card-body { padding: 14px 22px 22px; }

/* 按钮 */
.btn { height: 42px; padding: 0 18px; border-radius: 10px; gap: 8px; }
.btn.sm { height: 34px; padding: 0 11px; border-radius: 9px; gap: 6px; }

/* 表单控件 */
input[type="text"], input[type="password"], input[type="search"], input[type="tel"],
input[type="email"], input[type="number"], select, textarea {
  height: 46px; padding: 0 15px; border-radius: 10px;
}
/* 去掉 type=search 自带的清除按钮：它会占掉约 11px 文字宽度，导致占位符被裁 */
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; appearance: none; }
select {
  padding: 0 40px 0 15px;
  background-position: right 14px center; background-size: 13px 8px;
}
select:hover, select:focus, select:active {
  background-position: right 14px center; background-size: 13px 8px;
}
textarea { min-height: 96px; padding: 12px 15px; }
.form-grid { gap: 16px; }
.form-grid label > span { margin-bottom: 7px; }
.form-grid label > span .opt { padding: 2px 7px; border-radius: 6px; margin-left: 6px; }
.hint { margin-top: 7px; }

/* 表格：序号 / 数字 / 操作居中，文本列可用 .left 左对齐 */
table.data th { padding: 10px 16px 13px; letter-spacing: .8px; }
table.data td { padding: 14px 16px; }
table.data th:first-child, table.data td:first-child { padding-left: 24px; }
table.data th:last-child, table.data td:last-child { padding-right: 24px; }
/* 表格对齐：表头与数据单元格一律左对齐；表头加粗、浅黑 */
table.data th { text-align: left; font-weight: 600; color: #3d4453; }
table.data td { text-align: left; }
table.data td.num, table.data td.amount,
table.data td.idx, table.data td.op, table.data td.rate { text-align: left; }
table.data th.num, table.data th.amount,
table.data th.idx, table.data th.op, table.data th.rate { text-align: left; }
table.data .ops { justify-content: flex-start; gap: 7px; }
table.data td.addr { max-width: 420px; }
/* 类型类页面（客户类型 / 水泵类型 / 配件类型）：表头与行都放大一档，
   行高 70px、上下留白，与客户档案 / 厂商档案等列表页观感一致 */
table.data.roomy th { padding-top: 16px; padding-bottom: 15px; }
table.data.roomy td { padding-top: 18px; padding-bottom: 18px; }
.empty { padding: 52px 22px; }
.empty .ico { margin-bottom: 9px; }
table.data .mono, .idx, .time, .emp-tel { letter-spacing: .3px; }

/* 分页 */
.pager { gap: 9px; padding: 16px 22px 18px; }
.pager .pages { gap: 7px; }
.pager a, .pager span.pg { min-width: 36px; height: 36px; padding: 0 11px; border-radius: 10px; }

/* 弹窗 */
.modal { max-width: 720px; border-radius: 18px; }
.modal-head { padding: 20px 26px 8px; }
.modal-head .x { padding: 5px; border-radius: 9px; }
.modal-body { padding: 10px 26px 22px; }
.modal-foot { padding: 8px 26px 22px; gap: 10px; }
.modal-note { margin-bottom: 16px; }

/* 提示条 */
.flash { padding: 12px 16px; border-radius: 12px; gap: 9px; margin-bottom: 18px; }

/* 概览卡片 */
.kpi { padding: 22px; border-radius: 16px; }
.kpi::before { top: 22px; bottom: 22px; width: 3px; }
.kpi .k-label { gap: 8px; }

/* 角色权限页 */
.role-layout { grid-template-columns: 320px 1fr; gap: 20px; }

/* 基础信息 / 客户类型 */
.two-col { gap: 20px; }
.unit-chip { min-width: 48px; height: 30px; padding: 0 12px; border-radius: 8px; }
.type-chip { gap: 8px; }
.note-line { gap: 9px; }
.note-line .ico { margin-top: 3px; }

/* 客户详情 */
.crumb-back { padding: 5px 12px 5px 8px; border-radius: 9px; margin-bottom: 10px; gap: 7px; }
.code-chip { padding: 3px 10px; border-radius: 7px; }
.dstat { gap: 16px; margin-bottom: 20px; }
.dstat-item { grid-template-columns: 44px minmax(0, 1fr); gap: 10px 14px; padding: 15px 17px 13px; border-radius: 14px; }
.ds-ic { width: 44px; height: 44px; border-radius: 12px; }
.ds-foot { padding-top: 9px; }
.detail-layout { grid-template-columns: 360px minmax(0, 1fr); gap: 20px; }
.info-card { padding: 18px 20px 10px; }
.info-head { gap: 10px; padding-bottom: 5px; }
.kv { grid-template-columns: 84px minmax(0, 1fr); margin-top: 12px; }
.kv dt, .kv dd { padding: 12px 0; }
.rec-tabs { gap: 7px; padding: 12px 18px; }
.rec-tab { height: 40px; padding: 0 14px; border-radius: 10px; gap: 8px; }
.rec-tab .n { padding: 2px 7px; border-radius: 6px; }
.badge { padding: 3px 10px; }

/* 确认框 */
.sj-cf { max-width: 440px; padding: 22px 22px 18px; border-radius: 16px; }
.sj-cf-head { gap: 13px; }
.sj-cf-ic { width: 44px; height: 44px; border-radius: 12px; }
.sj-cf-foot { gap: 10px; margin-top: 18px; }
.sj-cf-btn { height: 40px; padding: 0 17px; border-radius: 10px; }

/* 通知条（后台与登录页共用） */
.toast-wrap { width: min(92vw, 480px); }
.nf-toast { padding: 13px 14px 13px 15px; gap: 11px; border-radius: 11px; }
.nf-ic { width: 24px; height: 24px; }
.nf-x { width: 24px; height: 24px; }

/* 客户资料：值改为左对齐，避免地址换行后参差不齐 */
.kv dd { text-align: left; }

/* ---------- 商品信息：字段较多的弹窗 ---------- */
/* 弹窗内容超出视口时，只让正文区滚动，头尾固定 */
.modal { max-height: calc(100vh - 56px); display: flex; flex-direction: column; }
.modal > form { display: flex; flex-direction: column; min-height: 0; }
.modal-body { overflow-y: auto; min-height: 0; }
/* 表单分区：基本信息 / 技术参数 / 价格 / 库存 */
.form-section + .form-section { margin-top: 18px; padding-top: 18px; border-top: 1px dashed var(--line); }
.form-section > .t {
  display: flex; align-items: center; gap: 8px;
  font-size: 15px; color: var(--text-2); margin-bottom: 12px;
}
.form-section > .t::before {
  content: ""; width: 3px; height: 14px; border-radius: 2px; background: var(--grad-blue);
}
.form-section > .t .sub { font-size: 14px; color: var(--text-4); }
/* 价格行：含税价 / 税率 / 不含税价 三列 */
.form-grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.form-grid.three .full { grid-column: 1 / -1; }
/* 自动计算 / 不可编辑的字段 */
input.ro, select.ro, input[readonly] {
  background-color: var(--surface-2); color: var(--text-2);
  cursor: default;
}

/* ---------- 商品信息查询（条件行 + 分类快捷标签） ---------- */
.qbar {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 18px 22px 16px;
}
.qbar .qfields { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.qbar .qf {
  display: flex; align-items: center; gap: 8px;
  font-size: 15px; color: var(--text-3); white-space: nowrap;
}
.qbar .qf input, .qbar .qf select {
  height: 38px; width: 150px; padding: 0 12px; border-radius: 9px;
}
/* 宽度按内容定：规格型号容得下占位符、供货厂商容得下最长厂商名、品牌容得下品牌名、数字框容得下 10-50 */
.qbar .qf.w-spec input { width: 156px; }
.qbar .qf.w-mf select { width: 200px; }
.qbar .qf.w-brand select { width: 112px; }
.qbar .qf.w-num input { width: 70px; }
.qbar .qf select {
  padding: 0 34px 0 12px;
  background-position: right 11px center; background-size: 12px 7px;
}
.qbar .qf select:hover, .qbar .qf select:focus, .qbar .qf select:active {
  background-position: right 11px center; background-size: 12px 7px;
}
.qbar .qact { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.qbar .btn { height: 38px; padding: 0 18px; }

.qtags {
  display: flex; flex-direction: column; gap: 9px;
  padding: 15px 22px 18px; border-top: 1px dashed var(--line);
}
.qtags .qrow { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.qtags .ql { width: 52px; flex: none; font-size: 15px; color: var(--text-3); }
/* 分类快捷标签：与表格内分类徽标（.badge）同一套样式 —— 淡蓝底 + 深蓝字 + 全圆角胶囊 */
.qtag {
  display: inline-flex; align-items: center; height: 30px; padding: 0 14px;
  border-radius: 999px; font-size: 14px; font-weight: 500;
  color: var(--blue-deep); background: var(--blue-soft);
  border: 1px solid transparent; transition: .14s;
}
.qtag:hover { background: #e4eeff; color: var(--blue); }
.qtag.on { background: var(--grad-blue); color: #fff; }
.qtag.on:hover { background: var(--grad-blue); color: #fff; }

/* 窄桌面：表格内边距收紧，避免表格在卡片内横向滚动 */
@media (max-width: 1560px) {
  .content { padding: 22px 22px 40px; }
  table.data th { padding-left: 11px; padding-right: 11px; }
  table.data td { padding-left: 11px; padding-right: 11px; }
  table.data th:first-child, table.data td:first-child { padding-left: 18px; }
  table.data th:last-child, table.data td:last-child { padding-right: 18px; }
  .detail-layout { grid-template-columns: 330px minmax(0, 1fr); }
  /* 查询行收窄，保证 1500 宽下仍为一行 */
  .qbar { gap: 10px; }
  .qbar .qfields { gap: 9px; }
  .qbar .qf { gap: 5px; }
  .qbar .qf.w-spec input { width: 152px; }
  .qbar .qf.w-mf select { width: 198px; }
  .qbar .qf.w-brand select { width: 110px; }
  .qbar .qf.w-num input { width: 68px; }
  .qbar .btn { padding: 0 15px; }
}

/* ============================================================
   报价单（业务单据 · 第一个录入型单据）
   ============================================================ */

/* 三列表单栅格（报价单信息 / 条款区） */
.form-grid.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
#qform > .card + .card,
#sform > .card + .card,
#svform > .card + .card,
#pform > .card + .card,
#iform > .card + .card,
#oform > .card + .card { margin-top: 20px; }

/* 输入框 + 右侧小按钮 */
.with-btn { display: flex; align-items: center; gap: 8px; }
.with-btn select { flex: 1; min-width: 0; }
.with-btn .btn.sm { flex: none; width: 42px; padding: 0; justify-content: center; }

/* 带单位后缀的输入框 */
.suffix-wrap { position: relative; }
.suffix-wrap input { width: 100%; padding-right: 40px; }
.suffix-wrap .sfx {
  position: absolute; right: 14px; top: 50%; transform: translateY(-50%);
  font-size: 14px; color: var(--text-4); pointer-events: none;
}

/* 分段选择（含税 / 不含税、含运费 / 不含运费） */
.seg { display: inline-flex; gap: 3px; padding: 3px; border-radius: 10px; background: var(--field); width: 100%; }
.seg button {
  flex: 1; height: 40px; border: 0; border-radius: 8px; background: transparent;
  font: inherit; font-size: 15px; color: var(--text-3); cursor: pointer;
  transition: background .16s, color .16s;
}
.seg button:hover { color: var(--blue-deep); }
.seg button.on { background: var(--surface); color: var(--blue-deep); font-weight: 500; box-shadow: 0 1px 4px rgba(15, 35, 80, .1); }
.seg button:disabled { opacity: .5; cursor: not-allowed; }

/* 客户需求 + 智能推荐 */
.need-box { display: flex; flex-direction: column; gap: 8px; }
.need-box textarea { width: 100%; min-height: 84px; }
.need-bar { display: flex; align-items: center; gap: 14px; margin-top: 2px; }
.need-bar .hint { margin: 0; }
.need-ops { margin-left: auto; display: flex; align-items: center; gap: 12px; flex: none; }
.need-ops .chk { height: 34px; padding: 0 12px; }
.need-ops .btn { height: 34px; }

/* 推荐结果面板 */
.modal.wide { max-width: 880px; }
.rec-parsed {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  padding: 11px 14px; border-radius: 12px; background: var(--surface-2); margin-bottom: 14px;
}
.rec-pl { font-size: 13.5px; color: var(--text-3); }
.rec-chip {
  padding: 2px 11px; border-radius: 999px; background: var(--blue-soft);
  color: var(--blue-deep); font-size: 13.5px; line-height: 22px;
}
.rec-muted { font-size: 13.5px; color: var(--text-4); }
.rec-tip {
  padding: 9px 14px; border-radius: 10px; background: #fff7e8; color: #8a5a00;
  font-size: 14px; line-height: 1.6; margin-bottom: 12px;
}
.rec-group {
  font-size: 13.5px; font-weight: 600; color: var(--text-3);
  letter-spacing: .5px; margin: 6px 0 9px;
}
.rec-item {
  display: flex; gap: 14px; padding: 12px 14px; margin-bottom: 10px;
  border: 1px solid #e8eff9; border-radius: 12px; background: var(--surface); transition: .16s;
}
.rec-item:hover { border-color: #cfe0f5; box-shadow: 0 2px 10px rgba(29, 78, 216, .07); }
.rec-score {
  flex: none; width: 54px; height: 54px; border-radius: 12px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.rec-score b { font-size: 19px; font-weight: 600; line-height: 1.15; }
.rec-score span { font-size: 11px; letter-spacing: .5px; }
.rec-score.hi { background: #e8f2ff; color: #1d4ed8; }
.rec-score.mid { background: #fff3e2; color: #b26a00; }
.rec-score.lo { background: #f1f4f9; color: #7d8798; }
.rec-info { flex: 1; min-width: 0; }
.rec-name { display: flex; align-items: baseline; gap: 8px; font-size: 15.5px; font-weight: 500; }
.rec-code { font-size: 13px; font-weight: 400; color: var(--text-4); }
.rec-meta { font-size: 13px; color: var(--text-3); margin-top: 3px; }
.rec-reasons { margin: 6px 0 0; padding: 0; list-style: none; }
.rec-reasons li { position: relative; padding-left: 13px; font-size: 13.5px; color: var(--text-2); line-height: 1.75; }
.rec-reasons li::before {
  content: ''; position: absolute; left: 2px; top: 9px;
  width: 4px; height: 4px; border-radius: 50%; background: #bcd0ea;
}
.rec-act { flex: none; display: flex; flex-direction: column; align-items: flex-end; justify-content: flex-start; gap: 12px; }
.rec-price { font-size: 15px; color: var(--text); }
.rec-act .btn { height: 32px; }
.rec-empty { padding: 28px 14px; text-align: center; color: var(--text-3); font-size: 14.5px; }

/* 明细录入表 */
.qtable { width: 100%; border-collapse: separate; border-spacing: 0; table-layout: fixed; font-size: 15px; }
.qtable th {
  text-align: left; font-size: 13.5px; font-weight: 600; color: #3d4453; letter-spacing: .6px;
  padding: 10px 8px 12px; white-space: nowrap; background: var(--surface);
  box-shadow: inset 0 -1px 0 var(--line);
}
.qtable th:first-child, .qtable td:first-child { padding-left: 24px; }
.qtable th:last-child, .qtable td:last-child { padding-right: 24px; }
.qtable td { padding: 10px 8px; border-bottom: 1px solid #f4f8fd; vertical-align: middle; }
.qtable input[type="number"], .qtable select { width: 100%; height: 38px; padding: 0 10px; border-radius: 9px; font-size: 14.5px; }
/* 入库明细表：最后一列（移除按钮）不需要 24px 右留白，否则按钮会被裁掉 */
.qtable.in-table th:last-child,
.qtable.in-table td:last-child { padding-right: 10px; }
/* 提交中：按钮置灰不可再点（连点「确认入库」只放行一次，后端另有令牌兜底） */
body.is-submitting #btnSave { opacity: .6; pointer-events: none; }
/* 表头里的「统一进项税率」：文字 + 下拉并排，压到表头高度，别把表头撑高 */
.qtable th.th-tax { padding-top: 4px; padding-bottom: 6px; }
.qtable th.th-tax .th-tax-box { display: flex; align-items: center; gap: 6px; }
.qtable th.th-tax select {
  width: auto; flex: 1; min-width: 0; height: 30px; padding: 0 4px;
  border-radius: 8px; font-size: 13px; font-weight: 500;
}
.qtable .idx { color: var(--text-4); font-size: 14px; }
.qtable .spec, .qtable .unit, .qtable .brand {
  font-size: 14px; color: var(--text-3);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.qtable .sub { font-size: 14.5px; color: var(--text); }
.qtable .btn.sm { width: 34px; padding: 0; justify-content: center; }

/* 类型切换（水泵 / 配件） */
.kind-tabs { display: inline-flex; gap: 2px; padding: 3px; border-radius: 9px; background: var(--field); }
.kind-tabs button {
  height: 28px; padding: 0 9px; border: 0; border-radius: 7px; background: transparent;
  font: inherit; font-size: 13.5px; color: var(--text-3); cursor: pointer; transition: .15s;
  white-space: nowrap; flex: none;
}
.kind-tabs button:hover { color: var(--blue-deep); }
.kind-tabs button.on { background: var(--surface); color: var(--blue-deep); font-weight: 500; box-shadow: 0 1px 3px rgba(15, 35, 80, .1); }

/* 商品搜索选择器（商品列 + 浮层面板） */
.pcell { position: relative; }
.p-pick {
  width: 100%; height: 38px; display: flex; align-items: center; gap: 6px;
  padding: 0 10px; border: 1px solid var(--line-2); border-radius: 9px; background: var(--surface);
  font: inherit; font-size: 14.5px; color: var(--text-3); cursor: pointer; text-align: left; transition: .15s;
}
.p-pick:hover { border-color: #c9dcf8; color: var(--text-2); }
.p-pick .p-main { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.p-pick .p-chev { flex: none; color: var(--text-4); transition: transform .16s; }
.p-pick.has { color: var(--text); }
.pcell.pk-open .p-pick { border-color: #9cc0f7; color: var(--text); box-shadow: 0 0 0 3px rgba(37, 99, 235, .1); }
.pcell.pk-open .p-pick .p-chev { transform: rotate(180deg); color: var(--blue); }

.pk-portal { position: fixed; z-index: 900; display: none; left: 0; top: 0; }
.pk-portal.on { display: block; }
.pk-panel {
  background: var(--surface); border: 1px solid var(--line-2); border-radius: 14px; overflow: hidden;
  box-shadow: 0 20px 48px -18px rgba(15, 27, 45, .28), 0 2px 10px -4px rgba(15, 27, 45, .1);
}
.pk-search { display: flex; align-items: center; gap: 9px; padding: 10px 12px; border-bottom: 1px solid var(--line); }
.pk-search .pk-ico { flex: none; color: var(--text-4); }
.pk-search input[type="text"] {
  flex: 1; height: 38px; padding: 0 12px; border: 1px solid var(--line-2); border-radius: 9px;
  font: inherit; font-size: 14.5px; color: var(--text); background: var(--field);
}
.pk-search input[type="text"]:focus { outline: 0; border-color: #9cc0f7; background: var(--surface); box-shadow: 0 0 0 3px rgba(37, 99, 235, .1); }
.pk-tip { padding: 7px 14px; font-size: 12.5px; color: var(--text-4); background: var(--surface-2); border-bottom: 1px solid var(--line); }
.pk-tip b { font-weight: 500; color: var(--text-2); }
.pk-list { max-height: 316px; overflow-y: auto; padding: 4px 0 6px; }
.pk-group { padding: 8px 14px 4px; font-size: 12.5px; color: var(--text-4); letter-spacing: .4px; }
.pk-item { display: flex; align-items: center; gap: 14px; padding: 8px 14px; cursor: pointer; }
.pk-item.on { background: var(--surface-3); }
.pk-l { flex: 1; min-width: 0; }
.pk-name { font-size: 15px; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pk-meta { margin-top: 2px; font-size: 12.5px; color: var(--text-4); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pk-price { flex: none; text-align: right; }
.pk-price b { display: block; font-family: var(--mono); font-size: 14.5px; font-weight: 500; color: var(--blue-deep); }
.pk-price span { font-size: 12px; color: var(--text-4); }
.pk-item.cur .pk-name { color: var(--blue-deep); }
.pk-cur {
  display: inline-block; margin-left: 8px; padding: 0 6px; border-radius: 999px;
  font-size: 11.5px; line-height: 18px; color: var(--blue-deep); background: var(--blue-soft); vertical-align: 1px;
}
.pk-empty { padding: 28px 14px; text-align: center; font-size: 13.5px; color: var(--text-3); }
.pk-empty span { display: block; margin-top: 6px; font-size: 12.5px; color: var(--text-4); }
.pk-foot {
  display: flex; align-items: center; justify-content: space-between; padding: 8px 14px;
  border-top: 1px solid var(--line); background: var(--surface-2); font-size: 12px; color: var(--text-4);
}
.pk-foot .pk-count { color: var(--text-3); }

/* —— 商品库没有 → 临时新增 —— */
.pk-view[hidden] { display: none !important; }
.pk-add {
  display: flex; align-items: center; justify-content: center; gap: 7px; width: 100%;
  height: 42px; border: 0; border-top: 1px dashed var(--line-2); background: var(--surface);
  font: inherit; font-size: 13.5px; color: var(--blue-deep); cursor: pointer; transition: .15s;
}
.pk-add:hover { background: var(--blue-soft); }
.pk-add svg { flex: none; }
.pk-new-head {
  display: flex; align-items: baseline; gap: 10px; padding: 12px 14px 11px;
  border-bottom: 1px solid var(--line);
}
.pk-new-head b { font-size: 15px; font-weight: 500; color: var(--text); }
.pk-new-head span { font-size: 12px; color: var(--text-4); }
.pk-form {
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px 14px;
  padding: 12px 14px; max-height: 360px; overflow-y: auto; overscroll-behavior: contain;
}
.pk-f { display: flex; flex-direction: column; gap: 5px; min-width: 0; grid-column: span 3; }
.pk-f[hidden] { display: none !important; }
.pk-f.full { grid-column: span 6; }
.pk-f.third { grid-column: span 2; }
.pk-f > span { font-size: 12.5px; color: var(--text-3); }
.pk-f > span i { font-style: normal; color: var(--danger); }
.pk-f input, .pk-f select {
  height: 36px; padding: 0 10px; border: 1px solid var(--line-2); border-radius: 9px;
  font: inherit; font-size: 13.5px; color: var(--text); background: var(--field);
}
.pk-f select { padding-right: 6px; }
.pk-f input:focus, .pk-f select:focus {
  outline: 0; border-color: #9cc0f7; background: var(--surface); box-shadow: 0 0 0 3px rgba(37, 99, 235, .1);
}
.pk-f input[readonly] { background: var(--surface-2); color: var(--text-2); }
.pk-suspect {
  max-height: 190px; overflow-y: auto; padding: 10px 14px 12px;
  border-top: 1px solid #fdeacb; background: #fffbf2;
}
.pk-sus-head { margin-bottom: 8px; font-size: 13px; font-weight: 500; color: var(--warn); }
.pk-sus-item {
  display: flex; align-items: center; gap: 10px; margin-bottom: 6px;
  padding: 7px 10px; border: 1px solid var(--line-2); border-radius: 9px; background: var(--surface);
}
.pk-sus-item .s-l { flex: 1; min-width: 0; }
.pk-sus-item .s-name { font-size: 13.5px; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pk-sus-item .s-meta { margin-top: 2px; font-size: 12px; color: var(--text-4); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pk-sus-item .s-score { flex: none; font-size: 12px; color: var(--warn); }
.pk-use {
  flex: none; height: 28px; padding: 0 10px; border: 1px solid var(--line-2); border-radius: 7px;
  background: var(--surface); font: inherit; font-size: 12.5px; color: var(--blue-deep); cursor: pointer;
}
.pk-use:hover { background: var(--blue-soft); border-color: #cfe0fb; }
.pk-force {
  width: 100%; height: 34px; margin-top: 4px; border: 1px dashed #e6c99a; border-radius: 9px;
  background: var(--surface); font: inherit; font-size: 13px; color: var(--warn); cursor: pointer;
}
.pk-force:hover { background: #fff5e6; }
.pk-new-foot {
  display: flex; align-items: center; gap: 10px; padding: 10px 14px;
  border-top: 1px solid var(--line); background: var(--surface-2);
}
.pk-new-msg { flex: 1; min-width: 0; font-size: 12.5px; color: var(--text-4); }
.pk-new-foot .btn { height: 34px; flex: none; }

/* 单据里的「临时新增商品」弹层（.np-*）：字段比报价单浮层多，整窗滚动（不再套内层滚动条） */
.np-body { max-height: min(78vh, 780px); }
.np-form { max-height: none; overflow: visible; }
.np-sec {
  grid-column: span 6; display: flex; align-items: baseline; justify-content: space-between;
  gap: 10px; margin-top: 2px; padding-top: 11px; border-top: 1px dashed var(--line-2);
  font-size: 12.5px; font-weight: 500; color: var(--text-2);
}
.np-sec-hint { font-size: 12px; font-weight: 400; color: var(--text-4); }

/* 字段标题右侧的「新增」小按钮（厂商 / 品牌） */
.np-lbl { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.np-plus {
  display: inline-flex; align-items: center; gap: 2px; flex: none;
  padding: 0; border: 0; background: none; font: inherit; font-size: 12px;
  color: var(--blue-deep); cursor: pointer;
}
.np-plus:hover { color: #1d4ed8; text-decoration: underline; }
.np-plus svg { flex: none; }

/* 快捷新增厂商/品牌的行内面板（插在 .pk-form 末尾，占满整行） */
.np-quick {
  grid-column: span 6; display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 9px 11px; border: 1px dashed #cdd8e8; border-radius: 10px; background: #f7faff;
}
.np-quick[hidden] { display: none !important; }
.np-quick-lbl { flex: none; font-size: 12.5px; color: var(--text-3); }
.np-quick-mfr {
  flex: 0 1 40%; min-width: 112px; max-width: 210px; height: 32px; padding: 0 4px 0 8px;
  border: 1px solid var(--line-2); border-radius: 8px; font: inherit; font-size: 13px;
  color: var(--text); background: var(--surface);
}
.np-quick-mfr[hidden] { display: none !important; }
.np-quick-name {
  flex: 1 1 150px; min-width: 0; height: 32px; padding: 0 10px;
  border: 1px solid var(--line-2); border-radius: 8px; font: inherit; font-size: 13.5px;
  color: var(--text); background: var(--surface);
}
.np-quick-name:focus {
  outline: 0; border-color: #9cc0f7; box-shadow: 0 0 0 3px rgba(37, 99, 235, .1);
}
.np-quick-msg { flex: 0 1 auto; min-width: 0; font-size: 12px; color: var(--text-4); }
.np-quick .btn { height: 32px; flex: none; }

/* 金额合计 */
.qsum { display: flex; justify-content: flex-end; padding: 18px 24px 20px; }
.qsum-box { width: 330px; display: grid; gap: 9px; }
.qsum-row { display: flex; align-items: baseline; justify-content: space-between; font-size: 15px; color: var(--text-3); }
.qsum-row b { font-family: var(--mono); font-weight: 500; font-size: 15.5px; color: var(--text); }
.qsum-row.total { margin-top: 4px; padding-top: 12px; border-top: 1px dashed var(--line); font-size: 16px; color: var(--text-2); }
.qsum-row.total b { font-size: 24px; font-weight: 600; color: var(--blue-deep); }

/* 录入页底部操作条 */
.form-actions { display: flex; justify-content: flex-end; gap: 12px; margin-top: 22px; }

/* 列表页日期筛选 */
.date-inp { width: 158px; }

/* 详情页两栏 */
.qside, .qmain { display: block; }
.qside .card + .card, .qmain .card + .card { margin-top: 20px; }
.note-card .card-body { font-size: 15.5px; color: var(--text-2); line-height: 1.7; }
.note-card .card-body.pre { white-space: pre-wrap; }
.note-card { margin-top: 18px; }
/* note-card 不在末尾时（如客户需求在商品明细之上），与下一张卡之间也要留缝 */
.note-card + .card { margin-top: 20px; }

/* 打印：只留单据本身 */
@media print {
  body { background: #fff; }
  .sidebar, .topbar, .bg-layer, .page-head .ops, .crumb-back, .flash { display: none !important; }
  .layout { display: block; }
  .main { margin: 0; }
  .content { padding: 0; }
  .card { box-shadow: none; border: 1px solid #e3e8f0; }
  /* 打印不加屏幕上的底部过渡留白，避免把签字栏 / 明细挤到第二页 */
  .card > .table-wrap:last-child { padding-bottom: 0; }
  .detail-layout { grid-template-columns: 300px minmax(0, 1fr); gap: 14px; }
}

/* 报价单详情：上方客户 + 条款，下方明细通栏 */
.qdoc-top { display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: 20px; align-items: start; margin-bottom: 20px; }
.kv-pairs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 22px; }
.kv-pairs > div { padding: 11px 0; border-top: 1px solid #f4f8fd; }
.kv-pairs dt { font-size: 14px; color: var(--text-3); margin-bottom: 5px; }
.kv-pairs dd { font-size: 15.5px; color: var(--text); line-height: 1.5; }

/* 表单栅格跨列 */
.form-grid .span-2 { grid-column: span 2; }

/* 详情打印：单栏排列，避免右侧被裁 */
@media print {
  .qdoc-top { grid-template-columns: 300px minmax(0, 1fr); gap: 14px; }
  .kv-pairs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* 报价单打印抬头 + 签章栏（仅打印可见） */
.print-only { display: none; }

@media print {
  body { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .no-print { display: none !important; }
  .toast-wrap { display: none !important; }
  .pk-portal { display: none !important; }
  /* 打印按纸张宽度排版，取消桌面最小宽度，否则 A4 右侧被裁 */
  body.app-body, body.app-body .layout { min-width: 0 !important; }
  @page { size: A4 landscape; margin: 10mm 11mm; }
  .print-only { display: block; }
  .print-head { display: flex; align-items: flex-end; justify-content: space-between;
    padding-bottom: 10px; margin-bottom: 16px; border-bottom: 2px solid #1f2937; }
  .print-head .co { font-size: 20px; font-weight: 600; letter-spacing: 1px; color: #111827; }
  .print-head .co small { display: block; margin-top: 3px; font-size: 12px; font-weight: 400;
    letter-spacing: 0; color: #6b7280; }
  .print-head .dt { font-size: 22px; font-weight: 600; letter-spacing: 6px; color: #111827; text-align: right; }
  .print-head .meta { margin-top: 5px; font-size: 13px; color: #4b5563; text-align: right; }
  .print-only.print-sign { display: flex; gap: 56px; margin-top: 26px; padding-top: 14px;
    border-top: 1px dashed #cbd5e1; font-size: 13.5px; color: #4b5563; }
  .print-sign > div { flex: 1; }
  .print-sign b { font-weight: 500; color: #111827; }
  .card { break-inside: avoid; }
  table.data thead { display: table-header-group; }

  /* 打印紧凑排版：A4 横向一页装下 */
  .qdoc-top { gap: 12px; }
  .info-card { padding: 10px 14px 4px; }
  .info-title { font-size: 14.5px; }
  .info-head { padding-bottom: 2px; }
  .kv { margin-top: 4px; grid-template-columns: 62px minmax(0, 1fr); }
  .kv dt, .kv dd { padding: 5px 0; }
  .kv dt { font-size: 12px; }
  .kv dd, .kv dd.mono { font-size: 13px; line-height: 1.4; }
  .kv-pairs { gap: 0 18px; }
  .kv-pairs > div { padding: 5px 0; }
  .kv-pairs dt { font-size: 12px; margin-bottom: 1px; }
  .kv-pairs dd { font-size: 13px; line-height: 1.4; }
  .card-head { padding: 9px 14px 3px; font-size: 14px; }
  .card-head .sub { font-size: 12px; }
  table.data th { padding: 6px 10px; font-size: 12px; letter-spacing: .3px; }
  table.data td { padding: 6px 10px; font-size: 13px; }
  table.data th:first-child, table.data td:first-child { padding-left: 14px; }
  table.data th:last-child, table.data td:last-child { padding-right: 14px; }
  /* 报价单明细：打印时放弃固定列宽、按内容自适应并再收一档，否则 A4 横向右侧被裁 */
  table.data.dense { font-size: 11.5px !important; }
  table.data.dense th, table.data.dense td {
    width: auto !important; padding-left: 5px; padding-right: 5px;
    font-size: 11.5px; letter-spacing: 0;
  }
  table.data.dense td { padding-top: 3px; padding-bottom: 3px; }
  table.data .spec-sub { margin-top: 0; font-size: 9.5px; line-height: 1.25; }
  .qsum { padding: 10px 16px 12px; }
  .qsum-box { width: 300px; gap: 4px; }
  .qsum-row { font-size: 12.5px; }
  .qsum-row b { font-size: 13px; }
  .qsum-row.total { padding-top: 7px; font-size: 13px; margin-top: 2px; }
  .qsum-row.total b { font-size: 20px; }
  .badge { font-size: 11.5px; padding: 1px 8px; }
  .print-head { padding-bottom: 6px; margin-bottom: 10px; }
  .print-head .co { font-size: 18px; }
  .print-head .dt { font-size: 19px; }
  .print-only.print-sign { margin-top: 10px; padding-top: 8px; font-size: 13px; }
  .p-pick { border: 0; padding: 0; height: auto; color: var(--text); }
  .p-pick .p-chev { display: none; }

  /* 客户需求 / 备注：打印时压成一行「标题：内容」，避免被挤到第二页 */
  .note-card {
    margin: 3px 0 0; padding: 0; border: 0; background: none;
    box-shadow: none; break-inside: auto; font-size: 12.5px; line-height: 1.5;
  }
  .note-card .card-head {
    display: inline; padding: 0; border: 0; font-size: 12.5px;
    font-weight: 500; color: #6b7280;
  }
  .note-card .card-head::after { content: '：'; }
  .note-card .card-body { display: inline; padding: 0; font-size: 12.5px; color: #4b5563; }
  .note-card + .card { margin-top: 4px; }
  .qdoc-top { margin-bottom: 8px; }
  .qsum { padding: 8px 16px 9px; }
  .print-only.print-sign { margin-top: 6px; padding-top: 5px; font-size: 12.5px; }
}

/* ============================================================
   财务管理 · 账户管理（矩形卡片：蓝头 + 资料 + 余额 + 三个操作）
   ============================================================ */
.acct-grid {
  display: grid; gap: 20px;
  grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
}

.acct-card {
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  transition: box-shadow .18s, transform .18s, border-color .18s;
}
.acct-card:hover {
  transform: translateY(-2px); border-color: #d6e3f5;
  box-shadow: 0 16px 36px -24px rgba(16, 32, 64, .38);
}

/* 蓝色抬头：左账户名，右账号 */
.acct-top {
  display: flex; align-items: center; gap: 14px;
  padding: 0 18px; height: 48px; background: var(--grad-blue);
}
.acct-name { font-size: 17px; font-weight: 500; color: #fff; letter-spacing: .3px; }
.acct-no {
  margin-left: auto; font-size: 15px; color: rgba(255, 255, 255, .92);
  font-family: var(--mono); letter-spacing: .4px; white-space: nowrap;
}

.acct-body { display: flex; flex-direction: column; flex: 1; padding: 16px 18px 14px; }
.acct-line { display: flex; gap: 10px; font-size: 15px; line-height: 1.7; min-height: 30px; }
.acct-line > span { flex: none; width: 74px; color: var(--text-3); }
.acct-line > b {
  font-weight: 500; color: var(--text); min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* 余额 + 三个小按钮 */
.acct-foot {
  display: flex; align-items: flex-end; gap: 12px;
  margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--line-2);
}
.acct-bal { display: flex; align-items: baseline; gap: 8px; flex: none; }
.acct-bal > span { font-size: 14px; color: var(--text-3); white-space: nowrap; }
.acct-bal > b { font-size: 21px; font-weight: 600; color: var(--text); line-height: 1.15; white-space: nowrap; }
.acct-bal > b.neg { color: var(--danger); }
.acct-ops { display: flex; align-items: center; gap: 7px; margin-left: auto; flex: none; }

/* 编辑时余额只读展示（不可改） */
.ro-money {
  display: flex; align-items: center; height: 46px; padding: 0 15px; border-radius: 10px;
  background: var(--blue-soft); color: var(--blue-deep);
  font-size: 18px; font-weight: 600; font-family: var(--mono);
}

/* 账户明细：三列 KPI + 资料两栏 */
.kpi-grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.kpi-grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.kpi .k-val.income {
  background: linear-gradient(100deg, #0f7a3d, #15a34a 70%, #0891b2);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.kpi .k-val.expense {
  background: linear-gradient(100deg, #9f1239, #dc2626 70%, #d97706);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

.acct-info-row {
  display: grid; grid-template-columns: minmax(0, 1fr) 340px;
  gap: 20px; align-items: start; margin-bottom: 20px;
}
@media (max-width: 1560px) {
  .acct-info-row { grid-template-columns: minmax(0, 1fr) 300px; gap: 14px; }
}

/* 流水金额：收入绿 / 支出红 */
table.data td.in { color: #15803d; }
table.data td.out { color: #b91c1c; }

/* ============================================================
   财务管理 · 科目设置（左右两列：收入科目 / 支出科目）
   ============================================================ */
.subj-grid {
  display: grid; gap: 20px; align-items: start;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
@media (max-width: 1560px) {
  .subj-grid { gap: 14px; }
}

/* 两列标题前的小圆点：收入绿 / 支出红 */
.subj-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.subj-dot.in { background: #16a34a; }
.subj-dot.out { background: #dc2626; }

.subj-list { padding: 6px 22px 18px; }

.subj-row {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 0; border-bottom: 1px dashed #eef3fa;
}
.subj-row:last-child { border-bottom: 0; padding-bottom: 4px; }

.subj-main { flex: 1; min-width: 0; }
.subj-name {
  display: flex; align-items: center; gap: 8px;
  font-size: 16px; font-weight: 500; color: var(--text); line-height: 1.4;
}
.subj-remark {
  margin-top: 3px; font-size: 13.5px; color: var(--text-3);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* 系统预置科目徽标 */
.subj-sys {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 1px 7px; border-radius: 999px;
  background: var(--blue-soft); color: var(--blue-deep);
  font-size: 12.5px; font-weight: 400; white-space: nowrap;
}
.subj-ops { display: flex; align-items: center; gap: 2px; flex: none; }
.subj-lock {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 13.5px; color: var(--text-4); white-space: nowrap;
}
.subj-empty { padding: 30px 0 32px; text-align: center; font-size: 15px; color: var(--text-3); }

/* 收支流水：摘要下方的关联单据 */
.deal-ref {
  margin-top: 2px; font-size: 12.5px; color: var(--text-3);
  font-family: var(--mono); letter-spacing: .3px;
}

/* 收支流水筛选行：条件多，固定拆成两行（关键词+四个下拉 / 日期区间+查询按钮），
   .tb-break 强制换行，避免日期区间被挤成两截或下拉文字被裁 */
.toolbar.cash { row-gap: 12px; }
.tb-break { flex-basis: 100%; height: 0; }
.date-range { display: inline-flex; align-items: center; gap: 8px; flex: none; }

/* ============================================================
   财务管理 · 应收应付（待处理 + 历史记录）
   ============================================================ */
/* 金额列用等宽字体、正常字色，不加红绿（应收应付都只是往来，不是收支） */
table.data td.mono.strong { color: var(--text); font-weight: 500; }

/* 收款 / 付款弹窗：顶部这笔账的信息条 */
.settle-info {
  padding: 14px 16px; margin-bottom: 18px;
  background: var(--blue-soft); border: 1px solid #dbe7fb; border-radius: 12px;
}
.settle-info .si-line { display: flex; align-items: center; gap: 10px; }
.settle-info .si-line b {
  font-size: 16px; font-weight: 500; color: var(--text);
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.settle-info .si-amt {
  margin-left: auto; font-size: 18px; font-weight: 500;
  color: var(--text); white-space: nowrap; font-family: var(--mono);
}
.settle-info .si-sub { margin-top: 7px; font-size: 14.5px; color: var(--text-2); }
.settle-info .si-code { margin-top: 2px; font-size: 12.5px; color: var(--text-3); font-family: var(--mono); letter-spacing: .3px; }
/* 固定科目（售后维修单材料费 → 营业支出）：锁死的下拉保留正常字色，只靠光标说明不可改 */
#st_subj:disabled { background: #f1f5fa; color: var(--text); opacity: 1; cursor: not-allowed; }
#st_subj_hint[hidden] { display: none; }
#st_subj_hint { color: #1d4ed8; }

/* ============================================================
   业务单据 · 销售单
   ============================================================ */
/* 列表：10 列，全部单行不换行 */
table.data.sale-list { table-layout: fixed; }
table.data.sale-list th, table.data.sale-list td { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
table.data.sale-list td.mono { font-size: 14.5px; }
/* 创建时间：日期一行、时间一行 */
table.data.sale-list td.dt-cell { white-space: normal; line-height: 1.45; }
table.data.sale-list td.dt-cell .mono { font-size: 14.5px; }
table.data.sale-list td.dt-cell .dt-time { font-family: var(--mono); font-size: 12.5px; color: var(--text-4); }
table.data.sale-list td.cust-cell { max-width: 236px; overflow: hidden; text-overflow: ellipsis; }
.sale-no { color: var(--blue-deep); }
.sale-no:hover { text-decoration: underline; }
/* 详情页：卡片之间留 20px（.card 自身无 margin，不写会贴成一块） */
body.sales-detail .content > .card + .card { margin-top: 20px; }
.sale-bar select { width: 126px; }
.sale-bar .date-inp { width: 148px; }
.sale-bar .search-box input { width: 258px; }
/* 表单商品行：备注等文本输入沿用表格控件的尺寸 */
.qtable.sale-items input[type="text"] {
  width: 100%; height: 38px; padding: 0 10px;
  border-radius: 9px; font-size: 14.5px;
}
.qtable.sale-items td.mono { font-size: 14.5px; }
.qtable.sale-items .it-del {
  width: 32px; padding: 0; justify-content: center;
  font-size: 19px; line-height: 1;
}
.qtable.sale-items .spec-sub { margin-top: 3px; font-size: 12.5px; color: var(--text-3); white-space: nowrap; }
/* 已出库的商品行：名字后跟一个小标记，数量/单价输入框置灰 */
.qtable.sale-items .row-tag { margin-left: 6px; vertical-align: middle; }
.qtable.sale-items input:disabled { background: #eef2f8; color: var(--text-3); cursor: not-allowed; }
.qtable.sale-items .it-del:disabled { opacity: .35; cursor: not-allowed; }

/* 商品选择浮层 */
.pk-modal { max-width: 980px; }
.pk-bar { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.pk-bar .seg.pk-seg { width: auto; flex: none; }
.pk-seg button { height: 36px; padding: 0 16px; }
.pk-bar .search-box { flex: 1; min-width: 0; }
.pk-wrap { max-height: 44vh; overflow: auto; border: 1px solid var(--line); border-radius: 12px; }

/* 详情：安装信息 / 收款流水 */
.inst-line { display: flex; align-items: center; gap: 44px; flex-wrap: wrap; }
.inst-line > div { display: flex; align-items: center; gap: 10px; font-size: 15.5px; }
.inst-line b { font-weight: 500; }
/* 安装单号可点跳转售后单，字重与旁边的「安装费」值一致 */
.inst-line a.inst-ticket { font-weight: 500; }
.kv-pairs.pay-pairs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pay-flows {
  margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--line);
  display: grid; gap: 8px;
}
.pay-flow { display: flex; align-items: center; gap: 12px; font-size: 14.5px; }

/* 销售单：不含税时税率下拉锁定，禁用态加深一档便于辨识 */
#taxRateSel:disabled { background-color: #eef2f8; color: var(--text-4); }

/* 卡片底部右对齐的操作按钮（销售单详情的「收款」等） */
.card-foot-ops { display: flex; justify-content: flex-end; margin-top: 16px; }

/* 作废 / 退还相关（销售单、应收应付、收支流水共用） */
.tlink { color: var(--blue-deep); text-decoration: none; }
.tlink:hover { text-decoration: underline; }
.void-banner { margin-bottom: 20px; border-color: #fbdede; background: #fffafa; }
.void-line { display: flex; gap: 10px; align-items: flex-start; font-size: 15px; color: #7f1d1d; line-height: 1.8; padding: 14px 18px; }
.void-line .ico { flex: none; margin-top: 3px; color: #dc2626; }
.void-todo { display: inline-block; margin-left: 6px; color: #b91c1c; font-weight: 500; }

/* 表格里已作废的行：内容划删除线，徽标保持原样 */
tr.row-void td { color: var(--text-4); }
tr.row-void td.mono, tr.row-void td.cell-strong, tr.row-void td a, tr.row-void td .dim { text-decoration: line-through; }

/* 收款流水里被作废的记录 */
.pay-flow.is-void .mono, .pay-flow.is-void .dim { text-decoration: line-through; color: var(--text-4); }

/* 已出库的商品行 */
tr.row-shipped td { background: #fbfdff; }

/* 销售单详情页顶部操作按钮：与「出库」统一为填充式，按语义着色
   一键采购 = 橙、作废 = 红、编辑 / 出库 = 蓝 */
.btn.orange {
  background: linear-gradient(100deg, #f59e0b, #f97316); color: #fff; font-weight: 500;
  box-shadow: 0 10px 22px -14px rgba(234, 138, 4, .95);
}
.btn.orange:hover { background: linear-gradient(100deg, #f59e0b, #f97316); color: #fff; filter: brightness(1.06); }
.btn.red {
  background: linear-gradient(100deg, #ef4444, #dc2626); color: #fff; font-weight: 500;
  box-shadow: 0 10px 22px -14px rgba(220, 38, 38, .95);
}
.btn.red:hover { background: linear-gradient(100deg, #ef4444, #dc2626); color: #fff; filter: brightness(1.06); }

/* 销售单详情：顶部按钮改为实心后整体变宽，防止返回链接与客户名被挤成两行 */
body.sales-detail .page-head .crumb-back { flex: none; white-space: nowrap; }
body.sales-detail .page-head h2 { flex: none; white-space: nowrap; }
body.sales-detail .page-head .desc {
  flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
body.sales-detail .page-head .ops { flex: none; }
body.sales-detail .page-head .ops { gap: 8px; }
body.sales-detail .page-head .ops .btn { padding: 0 15px; }

/* 销售单详情 · 出入库单据：换货出库/入库的说明很长，固定列宽 + 省略号，避免整表横向滚动 */
table.data.sales-stock-orders { table-layout: fixed; }
table.data.sales-stock-orders td.ellip { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* 销售单退货：负数金额（退货 / 冲减）用红色 */
.neg { color: #dc2626; }
table.data .spec-sub.neg { color: #dc2626; }
.qsum-row b.neg { color: #dc2626; }

/* 销售单详情：收款卡片底部的「需退款给客户」提示条 */
.refund-note {
  display: flex; align-items: center; gap: 12px;
  margin: 18px 0 0; padding: 12px 16px;
  background: #fef2f2; border: 1px solid #fecaca; border-radius: 10px;
}
.refund-note .rn-ic { display: flex; flex: none; color: #dc2626; }
.refund-note .rn-txt { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.refund-note .rn-txt b { font-size: 16px; font-weight: 600; color: #b91c1c; }
.refund-note .rn-txt .dim { font-size: 13px; color: var(--text-3); }
.refund-note .btn { flex: none; }

/* ============================================================
   财务管理 · 发票管理
   ============================================================ */
/* 列表：号码待补全 */
.inv-todo { color: #b45309; font-size: 14px; }
table.data a.badge { text-decoration: none; }
/* 列表 10 列（开票日期 + 上传日期 + 税率）：dense 基础上左右再收 2px，1184px 内容宽下不出现横向滚动 */
table.data.inv-table { table-layout: fixed; }
table.data.inv-table th, table.data.inv-table td { padding-left: 6px; padding-right: 6px; }
table.data.inv-table th:first-child, table.data.inv-table td:first-child { padding-left: 16px; }
table.data.inv-table th:last-child, table.data.inv-table td:last-child { padding-right: 16px; }
/* 抬头 / 来源 超长时省略（带 title），避免把表格撑出横向滚动、把操作列的删除按钮挤掉半个 */
table.data.inv-table td.ellip { overflow: hidden; text-overflow: ellipsis; }
/* 开票日期 / 上传日期两列紧邻且都是日期，用一条 1px 浅灰竖线分开 */
table.data.inv-table th:nth-child(3), table.data.inv-table td:nth-child(3) { border-left: 1px solid #eef1f6; }
/* 还没上传 PDF 的记录，上传日期显示的是登记时间，淡化处理以示区别 */
table.data.inv-table td.dim { color: var(--text-3); }
/* 号码 / 日期 / 金额 压缩半级：10 列并排后每个日期列只有 96px，15px 等宽字下 2026-09-20 会贴到下一列 */
table.data.inv-table td.mono { font-size: 14.5px; }
table.data.inv-table td.amount { font-size: 14.5px; }
/* 来源 = 「销售单 XS20260918001」，字号降半级尽量多露几个字（超出走 ellip + title） */
table.data.inv-table td.src { font-size: 14.5px; }

/* 表单：PDF 选择框（点击 / 拖拽） */
.file-drop {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  min-height: 138px; padding: 24px 20px;
  border: 1.5px dashed #cdd9ea; border-radius: 14px; background: #fbfdff;
  cursor: pointer; text-align: center; transition: border-color .16s, background .16s;
}
.file-drop input[type=file] { display: none; }
.file-drop:hover, .file-drop.over { border-color: var(--blue); background: #f2f7ff; }
.file-drop .fd-ico { display: flex; color: var(--blue); opacity: .75; }
.file-drop .fd-title { font-size: 16px; font-weight: 500; color: var(--text); }
.file-drop .fd-sub { font-size: 13.5px; color: var(--text-4); }
.file-drop .fd-sub.bad { color: #b91c1c; }
.file-drop.has-file { border-style: solid; border-color: #bfe3c8; background: #f7fdf9; }
.file-drop.big { min-height: 230px; }

/* 编辑页：已有文件 */
.file-current {
  display: flex; align-items: center; gap: 12px; margin-bottom: 16px; padding: 13px 16px;
  border: 1px solid var(--line); border-radius: 12px; background: #f8fbff;
}
.file-current .ico { display: flex; flex: none; color: var(--blue); }
.file-current .fc-main { flex: 1 1 auto; min-width: 0; }
.file-current .fc-name { font-size: 15.5px; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file-current .fc-sub { margin-top: 3px; font-size: 13px; color: var(--text-4); }

/* 详情：左侧 PDF 预览 + 右侧信息 */
.inv-view { display: grid; grid-template-columns: minmax(0, 1fr) 356px; gap: 20px; align-items: start; }
.inv-preview-card { overflow: hidden; }
.inv-preview { background: #eef2f8; }
/* PDF 预览工具条 */
.pdf-bar {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 14px; background: var(--surface); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.pdf-btn {
  height: 30px; min-width: 32px; padding: 0 9px;
  border: 1px solid var(--line); border-radius: 8px; background: var(--surface);
  color: var(--text-2); font-size: 15px; line-height: 1; cursor: pointer; transition: .15s;
}
.pdf-btn:hover { border-color: #bed0ea; color: var(--blue); background: #f7faff; }
.pdf-btn.wide { padding: 0 12px; font-size: 14px; }
.pdf-bar .grow { flex: 1 1 auto; }
.pdf-scale { min-width: 66px; text-align: center; font-size: 13.5px; color: var(--text-3); }
.pdf-sep { width: 1px; height: 18px; background: var(--line); margin: 0 2px; }
.pdf-pg { font-size: 13px; color: var(--text-4); }
.pdf-link { font-size: 13.5px; color: var(--blue); text-decoration: none; }
.pdf-link:hover { text-decoration: underline; }
.pdf-scroll {
  height: calc(100vh - 322px); min-height: 500px; overflow: auto;
  padding: 20px; background: #eef2f8;
}
.pdf-pages { display: flex; flex-direction: column; align-items: center; gap: 16px; }
.pdf-page {
  display: block; background: var(--surface); border-radius: 2px;
  box-shadow: 0 3px 14px rgba(16, 32, 64, .14);
}
.pdf-loading { padding: 70px 20px; text-align: center; color: var(--text-3); font-size: 14.5px; }
.inv-preview-foot { padding: 10px 18px 13px; border-top: 1px solid var(--line); }
.inv-preview-foot .dim { font-size: 13px; }

/* 表单页卡片之间留白（卡片自身无 margin） */
#invForm > .card + .card { margin-top: 20px; }

/* 页头：发票号码较长，标题不换行，副标题可压缩 */
body.invoice-detail .page-head h2 { flex: none; white-space: nowrap; }
body.invoice-detail .page-head .desc { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.inv-upload-box { padding: 24px 26px 26px; }
.inv-upload-foot { display: flex; align-items: center; gap: 14px; margin-top: 18px; }
.inv-upload-foot .dim { font-size: 13px; }

.inv-side { display: flex; flex-direction: column; gap: 18px; min-width: 0; }

.inv-money { padding: 2px 0 15px; margin-bottom: 4px; border-bottom: 1px solid #f1f5fb; }
.inv-money .im-label { font-size: 13.5px; color: var(--text-4); }
.inv-money .im-val { margin-top: 6px; font-size: 26px; font-weight: 600; color: var(--text); letter-spacing: .3px; }
.inv-money .im-sub { margin-top: 5px; font-size: 13.5px; color: var(--text-4); }

.inv-kv { display: grid; grid-template-columns: 92px minmax(0, 1fr); column-gap: 12px; margin: 0; }
.inv-kv dt { padding: 9px 0; border-bottom: 1px solid #f5f8fd; font-size: 13.5px; color: var(--text-4); }
.inv-kv dd {
  margin: 0; padding: 9px 0; border-bottom: 1px solid #f5f8fd;
  font-size: 15px; color: var(--text); text-align: left; word-break: break-word;
}
.inv-kv > dt:last-of-type, .inv-kv > dd:last-of-type { border-bottom: 0; }

.inv-recog { display: flex; flex-wrap: wrap; gap: 8px; }
.inv-raw { margin-top: 12px; }
.inv-raw summary { cursor: pointer; font-size: 13.5px; color: var(--text-3); }
.inv-raw summary:hover { color: var(--blue); }
.inv-raw pre {
  margin: 10px 0 0; padding: 12px; max-height: 220px; overflow: auto;
  background: #f8fafc; border: 1px solid var(--line); border-radius: 10px;
  font-family: var(--mono); font-size: 12.5px; line-height: 1.7; color: var(--text-2);
  white-space: pre-wrap; word-break: break-all;
}

/* ============================================================
   业务单据 · 入库单新建 / 库存管理 · 库存明细表
   ============================================================ */
/* 入库类型切换（采购入库 / 销售退货）：不要撑满整行 */
.inv-seg { width: auto; }
.inv-seg button { min-width: 132px; }

/* 工具栏里的「只看有库存」复选框，高度与按钮对齐 */
.toolbar .chk { height: 42px; padding: 0 14px; background: var(--surface); border: 1px solid var(--line); }

/* 入库明细：数字输入右对齐，避免小数位错位 */
.in-table td input[type="number"] { text-align: right; }
.in-table .qtable td .amt { white-space: nowrap; }

/* 库存明细表：名称旁的「水泵 / 配件」小徽标 */
.stock-table .kind-badge { margin-left: 8px; font-size: 12.5px; padding: 1px 8px; }
/* 批次明细：12 列，固定列宽；内边距收窄，把宽度让给备注列 */
table.data.batch-table { table-layout: fixed; }
table.data.batch-table th, table.data.batch-table td { padding-left: 5px; padding-right: 5px; }
table.data.batch-table th:first-child, table.data.batch-table td:first-child { padding-left: 16px; }
table.data.batch-table th:last-child, table.data.batch-table td:last-child { padding-right: 16px; }
table.data.batch-table td.ellip { overflow: hidden; text-overflow: ellipsis; }
table.data.batch-table .badge { font-size: 12px; padding: 2px 6px; }
/* 备注（入库单备注）折行显示，超过 3 行截断，完整内容看 title */
table.data.batch-table td.remark-cell { padding-top: 10px; padding-bottom: 10px; }
table.data.batch-table td.remark-cell .rm-txt {
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
  overflow: hidden; white-space: normal; word-break: break-word;
  line-height: 1.45; color: var(--text-2);
}
/* 出入库单详情明细：固定列宽，长文本省略 */
table.data.inb-table { table-layout: fixed; }
table.data.inb-table td.ellip { overflow: hidden; text-overflow: ellipsis; }
table.data.inb-table .badge { font-size: 13px; padding: 2px 8px; }
/* 入库单列表：9 列固定列宽，说明列超长省略 */
table.data.inb-list { table-layout: fixed; }
table.data.inb-list td.ellip { overflow: hidden; text-overflow: ellipsis; }
/* 数量与入库金额右对齐（覆盖全局「表格左对齐」的 td.num / th.num 规则） */
table.data.inb-list .ta-r { text-align: right; }
/* 列表里的次要按钮（如「退厂」）：.btn.sm 本身是透明文字按钮，在密集表格里会看成纯文字，
   给一层浅底让它像个按钮；主操作仍是实心蓝。 */
table.data .ops .btn.sm.ghost { background: var(--field); color: var(--text-2); }
table.data .ops .btn.sm.ghost:hover { background: var(--blue-soft); color: var(--blue-deep); }

/* 技术参数副标题：出入库单详情表是 table-layout:fixed，副标题超宽用省略号 */
table.data.inb-table td .ellip { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ============================================================
   业务单据 · 出库单（列表 / 序列号 / 标签）
   ============================================================ */
table.data.out-list { table-layout: fixed; }
table.data.out-list td.ellip { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

table.data.ser-table { table-layout: fixed; }
table.data.ser-table td.ellip { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
table.data.ser-table td.qr-cell { padding: 4px 8px; }
.qr-thumb {
  width: 54px; height: 54px; display: block; border-radius: 6px;
  background: var(--surface); border: 1px solid var(--line);
}

/* ============================================================
   售后管理 · 报修申请（后台）
   ============================================================ */
table.data.rp-list { table-layout: fixed; }
table.data.rp-list td { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
table.data.rp-list td > div { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
table.data.rp-list td .badge { pointer-events: none; }

.rp-layout { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 20px; align-items: start; }
.rp-main, .rp-side { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.rp-side .kv-pairs { grid-template-columns: 1fr; }
.rp-fault {
  font-size: 16px; line-height: 1.85; color: var(--text);
  padding: 4px 0 2px; white-space: pre-wrap; word-break: break-word;
}
.rp-empty { font-size: 14.5px; color: var(--text-3); padding: 6px 0 2px; }

.rp-gallery { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.rp-shot {
  display: block; padding-top: 100%; position: relative; border-radius: 10px;
  overflow: hidden; background: var(--field); border: 1px solid var(--line);
}
.rp-shot img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

.rp-video { margin-top: 12px; }
.rp-video video {
  width: 100%; max-height: 420px; border-radius: 12px; background: #0f1b2d; display: block;
}
.rp-video-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin-top: 8px; font-size: 14px;
}

.rp-hist {
  display: flex; align-items: center; gap: 10px; padding: 10px 0;
  border-top: 1px solid #f4f8fd; font-size: 14.5px; color: var(--text-2);
}
.rp-hist:first-child { border-top: 0; }
.rp-hist .mono { flex: 1; color: var(--text); }
.rp-hist:hover .mono { color: var(--blue); }

/* ---------- 客户扫码页（手机端） ---------- */
.rp-device {
  background: var(--surface); border-radius: 18px; padding: 18px 18px 16px;
  box-shadow: 0 14px 34px -26px rgba(15, 27, 45, .45);
}
.rp-device-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.rp-device .rp-name { font-size: 17px; font-weight: 600; color: var(--text); line-height: 1.35; }
.rp-device .rp-spec { margin-top: 3px; font-size: 13px; color: var(--text-3); }
.rp-sn {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 12px;
  font-family: var(--mono); font-size: 13.5px; color: var(--blue-ink);
  background: #eff5ff; border-radius: 8px; padding: 5px 10px;
}
.rp-meta {
  margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--line);
  display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 12.5px; color: var(--text-3);
}

.rp-form {
  margin-top: 14px; background: var(--surface); border-radius: 18px; padding: 18px;
  box-shadow: 0 14px 34px -26px rgba(15, 27, 45, .35);
}
.rp-form-title { font-size: 15.5px; font-weight: 600; color: var(--text); margin-bottom: 14px; }
.rp-field { margin-bottom: 15px; }
.rp-field > label { display: block; font-size: 13px; font-weight: 500; color: var(--text-2); margin-bottom: 7px; }
.rp-field > label i { font-style: normal; color: var(--danger); margin-left: 2px; }
.rp-field .rp-opt { font-weight: 400; font-size: 12px; color: var(--text-4); margin-left: 6px; }

.rp-form input[type="text"], .rp-form input[type="tel"], .rp-form textarea {
  width: 100%; box-sizing: border-box; border: 1px solid var(--line); border-radius: 11px;
  background: #fbfcfe; color: var(--text); font-size: 15px; font-family: inherit;
  min-width: 0;
}
.rp-form input[type="text"], .rp-form input[type="tel"] { height: 44px; padding: 0 13px; }
.rp-form textarea { min-height: 96px; padding: 11px 13px; line-height: 1.65; resize: vertical; }
.rp-form input:focus, .rp-form textarea:focus { outline: 0; border-color: #9ec1f7; background: var(--surface); }
.rp-hint { font-size: 12px; color: var(--text-4); margin-top: 6px; line-height: 1.6; }

.rp-urg { display: flex; gap: 10px; }
.rp-radio {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: 7px;
  height: 42px; border: 1px solid var(--line); border-radius: 11px; background: #fbfcfe;
  font-size: 13.5px; color: var(--text-2); cursor: pointer;
}
.rp-radio input { accent-color: var(--blue); }
.rp-radio:has(input:checked) { border-color: #9ec1f7; background: #eff5ff; color: var(--blue-ink); }

/* 选择器要压过 .rp-field > label 的 display:block，否则 justify-content 失效、文字靠左 */
.rp-field > label.rp-upload {
  display: flex; align-items: center; justify-content: center; gap: 7px;
  height: 46px; border: 1px dashed #cdd8e8; border-radius: 12px;
  background: #fafcff; color: var(--text-2); font-size: 13.5px; cursor: pointer;
}
.rp-field > label.rp-upload:active { background: #eff5ff; }

.rp-thumbs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-top: 10px; }
.rp-thumbs .th { position: relative; padding-top: 100%; border-radius: 9px; overflow: hidden; background: var(--field); }
.rp-thumbs .th img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.rp-thumbs .del {
  position: absolute; right: 4px; top: 4px; width: 20px; height: 20px; border: 0; border-radius: 50%;
  background: rgba(15, 27, 45, .58); color: #fff; font-size: 14px; line-height: 18px; padding: 0; cursor: pointer;
}
.rp-vid { margin-top: 10px; }
.rp-vid-card {
  display: flex; align-items: center; gap: 10px; padding: 10px 12px;
  background: var(--field); border-radius: 10px; font-size: 12.5px; color: var(--text-2);
}
.rp-vid-card .mono { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rp-vid-card .del-vid {
  border: 0; background: var(--surface); color: var(--danger); width: 24px; height: 24px;
  border-radius: 50%; font-size: 15px; line-height: 22px; padding: 0; cursor: pointer;
}

/* 视频相关说明就地显示（替代弹窗提示）：默认警示红，.info 为说明蓝 */
.rp-err {
  margin-top: 10px; padding: 10px 12px;
  background: #fdf3f2; border: 1px solid #f6d6d2; border-radius: 10px;
  font-size: 12.5px; line-height: 1.68; color: #b42318;
}
.rp-err.info { background: #eff5ff; border-color: #d7e4ff; color: #1d4ed8; }
.rp-err[hidden] { display: none; }

.rp-tip { margin-top: 12px; font-size: 12px; color: var(--text-4); line-height: 1.7; text-align: center; }
.rp-contact { margin-top: 16px; font-size: 13.5px; color: var(--text-3); }
.rp-contact b { color: var(--blue-ink); font-family: var(--mono); }

.rp-history {
  margin-top: 16px; background: var(--surface); border-radius: 16px; padding: 14px 16px;
  box-shadow: 0 14px 34px -30px rgba(15, 27, 45, .3);
}
.rp-history-title { font-size: 13px; color: var(--text-3); margin-bottom: 8px; }
.rp-history-row {
  display: flex; align-items: center; gap: 10px; padding: 7px 0;
  border-top: 1px solid #f4f8fd; font-size: 12.5px; color: var(--text-2);
}
.rp-history-row:first-of-type { border-top: 0; }
.rp-history-row .mono { flex: 1; color: var(--text); }

.rp-done-box {
  margin-top: 18px; padding: 14px 16px; background: #f7faff; border-radius: 12px; text-align: left;
}
.rp-done-row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 7px 0; font-size: 13.5px; color: var(--text-3);
}
.rp-done-row + .rp-done-row { border-top: 1px dashed #e2eaf7; }
.rp-done-row b { color: var(--text); font-weight: 600; text-align: right; }
.rp-fault-mini {
  margin-top: 12px; padding: 12px 14px; background: #fbfcfe; border-radius: 10px;
  font-size: 13px; line-height: 1.7; color: var(--text-2); text-align: left;
  max-height: 110px; overflow: hidden;
}

/* ============================================================
   售后维修（手工建单：预约时间 / 客户分类 / 多名服务人员）
   ============================================================ */

/* 列表：9 列固定宽，全部单行省略，避免互相压盖 */
table.data.sv-list { table-layout: fixed; }
table.data.sv-list th,
table.data.sv-list td { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
table.data.sv-list .ops { justify-content: flex-start; gap: 6px; }
table.data.sv-list .ops form { margin: 0; }
table.data.sv-list .ops .btn.sm { padding: 0 12px; }

/* 服务人员多选（chips） */
.eng-pick { display: flex; flex-wrap: wrap; gap: 10px; }
.eng-chip {
  position: relative; display: inline-flex; align-items: center;
  padding: 9px 18px; border-radius: 999px;
  background: var(--surface); box-shadow: inset 0 0 0 1px var(--line-2);
  font-size: 16px; color: var(--text-2); cursor: pointer; user-select: none;
  transition: background .16s, color .16s, box-shadow .16s;
}
.eng-chip input {
  position: absolute; width: 0; height: 0; opacity: 0; pointer-events: none;
}
.eng-chip:hover { background: var(--field-hover); color: var(--text); }
.eng-chip:has(input:checked) {
  background: var(--blue-soft); color: var(--blue-deep); font-weight: 500;
  box-shadow: inset 0 0 0 1px #b9cdf3;
}
.eng-chip:has(input:focus-visible) { box-shadow: inset 0 0 0 1px #b9cdf3, 0 0 0 3px rgba(37, 99, 235, .14); }
.eng-empty { font-size: 15px; color: var(--text-3); }

/* 预约时间：datetime-local 之前全站没用过，通用控件规则里没有这一型，补齐同款浅底样式 */
input[type="datetime-local"] {
  height: 46px; padding: 0 15px; border-radius: 10px; outline: none;
  background: var(--field); border: 1px solid transparent;
  color: var(--text); font-family: inherit; font-size: 17px; width: 100%;
  transition: background .16s, border-color .16s, box-shadow .16s;
}
input[type="datetime-local"]:hover { background-color: var(--field-hover); }
input[type="datetime-local"]:focus {
  background-color: #fff; border-color: #c3d8f8;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, .10);
}

/* 客户列两行：客户名 + 服务内容小字，各自单行省略（td 已 nowrap，内层块要单独裁） */
table.data.sv-list .sub-line {
  display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ============================================================
   维修完成弹窗（填维修内容 → 完成人自动记为维修人员）
   ============================================================ */
#mFinish .fin-head {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-bottom: 18px; padding: 12px 16px; border-radius: 12px;
  background: var(--surface-2);
}
#mFinish .fin-ticket { font-size: 16.5px; font-weight: 600; color: var(--text); }
#mFinish .fin-cust { font-size: 16px; color: var(--text); }
#mFinish .fin-appoint { font-size: 15px; margin-left: auto; white-space: nowrap; }
#mFinish textarea { min-height: 104px; }
/* 本人固定项：视觉上比可勾选项更实，鼠标不成手型 */
.eng-chip.is-me {
  background: var(--blue-soft); color: var(--blue-deep); font-weight: 500;
  box-shadow: inset 0 0 0 1px #b9cdf3; cursor: default;
}
.eng-chip.is-me:hover { background: var(--blue-soft); color: var(--blue-deep); }

/* ============================================================
   售后维修 · 配件明细 / 费用汇总
   ============================================================ */
table.data.sv-items { table-layout: fixed; }
table.data.sv-items th,
table.data.sv-items td { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
table.data.sv-items .sv-inp {
  width: 100%; height: 34px; padding: 0 9px; border-radius: 8px; outline: none;
  background: var(--field); border: 1px solid transparent; color: var(--text);
  font-family: inherit; font-size: 15.5px; text-align: left;
  transition: background .16s, border-color .16s, box-shadow .16s;
}
table.data.sv-items .sv-inp:hover { background-color: var(--field-hover); }
table.data.sv-items .sv-inp:focus {
  background-color: #fff; border-color: #c3d8f8;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, .10);
}
table.data.sv-items .sv-inp.bad { background: #fdf3f2; border-color: #f0b4ae; color: #b42318; }

.sv-item-foot { display: flex; align-items: center; gap: 14px; margin-top: 14px; }
.sv-total { margin-left: auto; font-size: 15.5px; color: var(--text-2); white-space: nowrap; }
.sv-total b { margin-left: 8px; font-size: 18px; font-weight: 600; color: var(--text); }

/* 维修完成弹窗里的本次账务汇总 */
.fin-sum {
  padding: 11px 15px; border-radius: 10px; background: var(--surface-2);
  font-size: 15px; color: var(--text-2); line-height: 1.75;
}

/* ============================================================
   业务单据 · 采购单（采购合同附件 / 结算状态）
   ============================================================ */
/* 10 列：固定列宽 + 长文本省略，避免厂商名把操作列挤出屏幕 */
table.data.po-list { table-layout: fixed; }
table.data.po-list td.ellip { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* 表单里的日期框沿用同款浅底控件（工具栏筛选的日期框保持原样，避免工具栏换行） */
.form-grid input[type="date"] {
  height: 46px; padding: 0 12px; border-radius: 10px; outline: none;
  background: var(--field); border: 1px solid transparent;
  color: var(--text); font-family: inherit; font-size: 17px; width: 100%;
  transition: background .16s, border-color .16s, box-shadow .16s;
}
.form-grid input[type="date"]:hover { background-color: var(--field-hover); }
.form-grid input[type="date"]:focus {
  background-color: #fff; border-color: #c3d8f8;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, .10);
}

/* 应收应付：7 列固定宽度，摘要允许换行，避免表格超出 1184 出现横向滚动 */
table.data.arap-table { table-layout: fixed; }
/* 事件 / 客户名超长时省略，别溢出到右边把摘要顶着（整行 nowrap 时 td 会外溢） */
table.data.arap-table td.ellip { overflow: hidden; text-overflow: ellipsis; }
table.data.arap-table td.arap-sum { white-space: normal; line-height: 1.55; }
/* 摘要与下方关联单号之间拉开一点，两行贴在一起容易看串行 */
table.data.arap-table td.arap-sum .deal-ref { white-space: nowrap; margin-top: 7px; }

/* 工具栏下拉不要被挤压（否则「全部结算状态」会被省略成「全部结...」） */
.po-bar select, .settle-bar select { flex: none; }
.po-bar select[name="settle"], .settle-bar select[name="settle"],
.po-bar select[name="contract"], .settle-bar select[name="contract"] { width: 140px; }
.settle-bar select[name="vendor_id"] { width: 156px; }

/* 采购合同上传：选择框 + 右下按钮 */
.ct-foot { display: flex; align-items: center; gap: 10px; margin-top: 14px; }

/* ============================================================
   财务管理 · 厂商结算（采购单多选 + 批量结算）
   ============================================================ */
/* 结算工具栏：4 个筛选项 + 日期区间要挤在一行，搜索框与日期各收窄一档 */
.settle-bar { row-gap: 10px; }
.settle-bar .search-box input { width: 178px; }
.settle-bar .date-inp { width: 140px; }

table.data.settle-table, table.data.settle-rec { table-layout: fixed; }
table.data.settle-table td.ellip, table.data.settle-rec td.ellip {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
table.data.settle-table th.ck-cell, table.data.settle-table td.ck-cell { padding-left: 16px; padding-right: 4px; }
table.data.settle-table input[type=checkbox] {
  width: 16px; height: 16px; margin: 0; vertical-align: middle;
  accent-color: var(--blue); cursor: pointer;
}
/* 已结算 / 已作废行留一个空的占位，勾选列不错位 */
table.data.settle-table .ck-off { display: inline-block; width: 16px; height: 16px; }

/* 表格下方批量操作条 */
.bulk-bar {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 14px 24px 18px; border-top: 1px solid #f1f5fa;
}
.bulk-bar .chk { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; color: var(--text-2); cursor: pointer; }
.bulk-bar .chk input { width: 16px; height: 16px; margin: 0; accent-color: var(--blue); cursor: pointer; }
.bulk-bar .grow { flex: 1; }
.bulk-sum { font-size: 15px; color: var(--text-3); }
.bulk-sum b { color: var(--text); font-weight: 500; }
.bulk-sum b.mono { font-size: 16px; }

/* KPI 里「12 / 36」这种带单位的数值 */
.kpi .k-val .k-unit { margin-left: 3px; font-size: 17px; font-weight: 400; color: var(--text-3); }

/* ============================================================
   业务单据 · 采购单（厂商订货 / 对账弹窗）
   ============================================================ */
.modal.po-modal { max-width: 1280px; }
.po-head-sub { margin-left: 12px; font-size: 14px; color: var(--text-4); }

.po-meta { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; padding: 2px 0 14px; }
.po-mi { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.po-mi > span { font-size: 13.5px; color: var(--text-3); }
.po-mi > b { font-size: 15.5px; font-weight: 500; color: var(--text); }
.po-mi.po-mi-rate { margin-left: auto; align-items: center; }
.po-mi.po-mi-rate select { width: 128px; height: 38px; }

.po-shot { border: 1px solid var(--line); border-radius: 14px; background: var(--surface); overflow: hidden; }
.po-shot-head { display: flex; align-items: baseline; gap: 10px; padding: 14px 18px 4px; }
.po-shot-head .ps-t { font-size: 17px; font-weight: 600; color: var(--text); }
.po-shot-head .ps-s { font-size: 13.5px; color: var(--text-4); }
.po-scroll { overflow-x: auto; }

table.data.po-table { table-layout: fixed; }
table.data.po-table th {
  position: static; padding: 11px 10px; font-size: 13.5px; font-weight: 600;
  letter-spacing: .3px; background: var(--surface); white-space: nowrap;
}
table.data.po-table td { padding: 9px 10px; white-space: nowrap; }
table.data.po-table th:first-child, table.data.po-table td:first-child { padding-left: 16px; }
table.data.po-table th:last-child, table.data.po-table td:last-child { padding-right: 16px; }
/* 需要手工填写的两列做浅色底，一眼能看出填哪里 */
table.data.po-table th.po-th-edit { background: #f6faff; color: #33507d; }
table.data.po-table td.po-cell-inp { background: #fafdff; padding-top: 7px; padding-bottom: 7px; }

.po-table td.po-cell-name { padding-right: 6px; }
.po-table .po-name {
  font-size: 15px; font-weight: 500; color: var(--text); line-height: 1.4;
  white-space: normal; overflow-wrap: anywhere;
}
.po-table .po-code { margin-top: 2px; font-size: 12.5px; color: var(--text-4); }
.po-table td.po-cell-cat { padding-right: 4px; font-size: 14px; color: var(--text-3); overflow: hidden; text-overflow: ellipsis; }
.po-table td.po-cell-spec { padding-right: 16px; }
.po-table .po-spec {
  font-size: 14.5px; color: var(--text-2); line-height: 1.45;
  white-space: normal; overflow-wrap: anywhere;
}
.po-table .spec-sub {
  margin-top: 3px; font-size: 12.5px; line-height: 1.45; color: var(--text-4);
  white-space: normal; overflow-wrap: anywhere;
}
.po-table th:nth-child(5) { text-align: center; }
.po-table td.po-cell-unit { font-size: 14.5px; color: var(--text-3); text-align: center; }
.po-table td.po-cell-qty { font-size: 15px; color: var(--text-2); }
.po-table td.po-cell-qty .mono { color: var(--text); }
.po-table .po-unit { margin-left: 2px; font-size: 12.5px; color: var(--text-4); }

/* 订货模式只有 6 列：列宽交给浏览器按内容分配，行距与左右留白放宽 */
#poForm[data-mode="order"] table.data.po-table { table-layout: auto; width: 100%; }
#poForm[data-mode="order"] table.data.po-table th { padding: 13px 16px; font-size: 14px; }
#poForm[data-mode="order"] table.data.po-table td { padding: 13px 16px; }
#poForm[data-mode="order"] table.data.po-table th:first-child,
#poForm[data-mode="order"] table.data.po-table td:first-child { padding-left: 20px; }
#poForm[data-mode="order"] table.data.po-table th:last-child,
#poForm[data-mode="order"] table.data.po-table td:last-child { padding-right: 20px; }
#poForm[data-mode="order"] .po-table td.po-cell-qty { font-size: 16px; }
#poForm[data-mode="order"] .po-table .po-name { font-size: 15.5px; }
#poForm[data-mode="order"] .po-table .po-spec { font-size: 15px; }
.po-table td.po-cell-num { font-size: 14.5px; }
.po-table td.po-cell-calc { color: var(--text-3); }
.po-table td.po-cell-amt { color: var(--text); font-weight: 500; }

.po-inp, .po-rate {
  width: 100%; height: 38px; padding: 0 10px; font-family: var(--mono); font-size: 14.5px;
  border: 1px solid #dde6f2; border-radius: 9px; background: var(--surface); color: var(--text);
  transition: border-color .15s, box-shadow .15s;
}
.po-inp::placeholder { color: #b9c4d4; }
.po-inp:hover, .po-rate:hover { border-color: #c3d3e8; }
.po-inp:focus, .po-rate:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(37,99,235,.12); }
.po-rate { padding: 0 6px; color: var(--text-2); }
.po-rate.is-empty { color: #9aa6b6; }

table.data.po-table tfoot td {
  padding: 13px 10px; background: var(--surface-2); border-top: 1px solid var(--line);
  font-size: 15px; color: var(--text-2);
}
table.data.po-table tfoot td.po-sum-l { padding-left: 16px; font-size: 14px; color: var(--text-3); }

.po-tip {
  display: flex; gap: 8px; margin-top: 14px; padding: 12px 16px;
  border-radius: 12px; background: #f8fbff; font-size: 14.5px; line-height: 1.75; color: var(--text-3);
}
.po-tip .ico { flex: none; margin-top: 3px; color: var(--text-4); }
.po-tip b { color: var(--text-2); font-weight: 500; }

.po-foot { align-items: center; }
.po-foot .grow { flex: 1; }
.po-total { font-size: 14.5px; color: var(--text-3); }
.po-total b { margin-left: 6px; font-size: 20px; font-weight: 600; color: var(--text); }
.po-total .po-total-sub { margin-left: 10px; font-size: 13px; color: var(--text-4); }

/* 采购单明细表底合计 */
table.data.po-items tfoot td {
  padding: 12px 8px; background: var(--surface-2); border-top: 1px solid var(--line);
  font-size: 15px; color: var(--text-2);
}
table.data.po-items tfoot td.po-sum-l { padding-left: 24px; font-size: 14px; color: var(--text-3); }
table.data.po-items .cell-strong { white-space: normal; line-height: 1.4; }

/* 送货方式=送货时，送货地址高亮（保存后会同步到客户档案地址） */
.form-grid input.addr-hot,
.form-grid input.addr-hot:focus {
  border-color: #f0a020;
  background: #fff8ec;
  box-shadow: 0 0 0 3px rgba(240, 160, 32, .14);
}

/* 作废销售单弹窗：关联采购单询问块 */
.void-po {
  margin-top: 14px; padding: 13px 15px;
  border: 1px solid #e6ecf5; border-radius: 12px; background: var(--surface-2);
}
.void-po-h { font-size: 15.5px; color: var(--text-2); line-height: 1.5; }
.void-po-h b { font-weight: 600; color: #c0392b; }
.void-po-list { margin-top: 9px; }
.void-po-row {
  display: flex; align-items: center; gap: 12px;
  padding: 4px 0; font-size: 14.5px; color: var(--text-3);
}
.void-po-row .mono { font-size: 14px; color: var(--text-2); }
.void-po-v {
  flex: 1; min-width: 0; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; color: var(--text-2);
}
.void-po .seg { margin-top: 10px; }
.void-po .hint { margin-top: 8px; }
.void-po .hint b { font-weight: 600; color: #c0392b; }

/* 采购发票：发票号码 / 开票日期登记行 */
.inv-meta {
  display: flex; align-items: flex-end; gap: 14px; flex-wrap: wrap;
  margin-bottom: 16px;
}
.inv-meta label {
  display: flex; flex-direction: column; gap: 6px;
  font-size: 14.5px; color: var(--text-3);
}
.inv-meta input { width: 250px; }
.inv-meta input[type="date"] {
  width: 180px; height: 46px; padding: 0 12px;
  border: 1px solid var(--line); border-radius: 10px; background: var(--surface);
  font: inherit; font-size: 15px; color: var(--text);
}
.inv-meta .btn { height: 42px; }
.inv-meta-link { margin-bottom: 12px; font-size: 14.5px; color: var(--blue-deep); }
.inv-meta-ro { margin-bottom: 14px; font-size: 14.5px; color: var(--text-3); }
.inv-meta-ro a { font-size: 15px; }

/* 发票管理：销项 / 进项 切换（复用 rec-tab，用在链接上） */
a.rec-tab { text-decoration: none; }
a.rec-tab.on { box-shadow: none; }

/* ============================================================
   售后工单 · 现场照片（维修人员在小程序上传，后台只读展示）
   ============================================================ */
.sv-photos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(152px, 1fr));
  gap: 12px;
}
.sv-photo {
  position: relative;
  display: block;
  aspect-ratio: 4 / 3;
  border-radius: 10px;
  overflow: hidden;
  background: var(--field);
}
.sv-photo img {
  display: block;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .18s ease;
}
.sv-photo:hover img { transform: scale(1.03); }
.sv-photo-idx {
  position: absolute; left: 7px; top: 7px;
  min-width: 21px; height: 21px; padding: 0 5px;
  border-radius: 6px;
  background: rgba(15, 27, 45, .58);
  color: #fff; font-size: 12px; line-height: 21px; text-align: center;
}
.sv-photo-empty {
  padding: 20px 18px;
  border-radius: 10px;
  background: var(--surface-2);
  font-size: 15px;
  color: var(--text-3);
  line-height: 1.7;
}

/* ============================================================
   库存管理 · 盘点单
   ============================================================ */
/* 盘盈 / 盘亏差异色：盈绿亏红，两处（列表、详情、表单实时差）共用 */
.diff-in { color: #15803d; font-weight: 500; }
.diff-out { color: #b91c1c; font-weight: 500; }

/* 盘点明细录入表：规格型号允许两行（规格 + 技术参数），备注用文本输入 */
.qtable.st-table .spec {
  overflow: visible; text-overflow: clip; white-space: normal;
  font-size: 14px; color: var(--text-3); line-height: 1.45;
}
.qtable.st-table .spec .spec-sub { font-size: 12.5px; color: var(--text-3); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.qtable.st-table td .sub { font-size: 14.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qtable.st-table input[type="text"] {
  width: 100%; height: 38px; padding: 0 10px;
  border-radius: 9px; font-size: 14.5px;
}
.qtable.st-table input[type="number"] { text-align: center; }
.qtable.st-table .it-del {
  width: 32px; padding: 0; justify-content: center;
  font-size: 19px; line-height: 1;
}
.qtable.st-table td.ellip { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* 盘点详情：两处明细表列宽固定，超长文本省略 */
table.data.st-detail { table-layout: fixed; }

/* ============================================================
   库存管理 · 损益单（手工报损 / 报溢）
   ============================================================ */
/* 表单页卡片在 form 内，全局 `.content > .card + .card` 覆盖不到 */
#adjform > .card + .card { margin-top: 20px; }

/* 损益单选商品弹窗：比销售单宽一些，容纳厂商与含税成本列 */
.pk-modal.adj-pk-modal { max-width: 1120px; }

/* 选商品弹窗：固定列宽，长文本单行省略 */
.adj-pk { table-layout: fixed; }
.adj-pk th, .adj-pk td { overflow: hidden; text-overflow: ellipsis; }
.adj-pk td > div { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.adj-pk td .spec-sub { margin-top: 2px; }

/* 明细录入表：规格两行；数量、库存数量各占一列 */
table.qtable.adj-table .spec {
  overflow: visible; white-space: normal;
  font-size: 14px; color: var(--text-3); line-height: 1.45;
}
table.qtable.adj-table .spec .spec-sub { margin-top: 2px; font-size: 12.5px; }
table.qtable.adj-table td.ellip { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
table.qtable.adj-table .qty-in { text-align: center; }
table.qtable.adj-table .stock-td { color: var(--text-2); white-space: nowrap; text-align: center; }
table.qtable.adj-table .spec-sub { margin-top: 2px; font-size: 12px; color: var(--text-3); white-space: nowrap; }
.adj-empty td { padding: 26px 24px; font-size: 15px; color: var(--text-3); }

/* 详情明细表：列宽固定，超长省略 */
table.data.adj-detail { table-layout: fixed; }
table.data.adj-detail td.ellip { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ============================================================
   库存管理 · 商品流转表
   ============================================================ */
/* 两个表都用固定列宽：候选商品 9 列、流转明细 12 列，长文本单行省略 */
table.data.flow-pick, table.data.flow-table { table-layout: fixed; }
table.data.flow-pick td.ellip, table.data.flow-table td.ellip {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
table.data.flow-pick .spec-sub, table.data.flow-table .spec-sub {
  overflow: hidden; text-overflow: ellipsis;
}
/* `.badge.kind-badge` 的左边距原来只写在 .stock-table 里，这里补一份 */
table.data.flow-pick .kind-badge { margin-left: 8px; font-size: 12.5px; padding: 1px 8px; }

/* ============================================================
   系统设置 · 系统参数
   ============================================================ */
/* 卡片在 form 内，全局 `.content > .card + .card` 覆盖不到 */
#pform > .card + .card { margin-top: 20px; }
#pform > .card + .note-band { margin-top: 20px; margin-bottom: 0; }

.param-row {
  display: flex; align-items: flex-start; gap: 28px;
  padding: 16px 0; border-top: 1px solid var(--line);
}
.param-row:first-child { padding-top: 2px; border-top: 0; }
.param-row:last-child { padding-bottom: 0; }
.param-main { flex: 1; min-width: 0; }
.param-name { font-size: 16px; font-weight: 500; color: var(--text); }
.param-desc { margin-top: 6px; font-size: 14.5px; color: var(--text-3); line-height: 1.7; }
.param-hint {
  display: flex; align-items: flex-start; gap: 6px;
  margin-top: 6px; font-size: 13.5px; color: #b45309; line-height: 1.6;
}
.param-hint .ico { flex: none; margin-top: 2px; color: #f59e0b; }
.param-val { font-size: 15px; color: var(--text-2); }

/* 开关：checkbox 隐藏，轨道 + 圆点用 span 画 */
.sw {
  position: relative; display: inline-flex; align-items: center; gap: 10px;
  flex: none; margin-top: 1px; cursor: pointer; user-select: none;
}
.sw input { position: absolute; width: 0; height: 0; opacity: 0; }
.sw-track {
  position: relative; display: block; width: 46px; height: 26px;
  border-radius: 999px; background: #cbd5e1; transition: background .18s ease;
}
.sw-dot {
  position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%;
  background: var(--surface); box-shadow: 0 1px 4px rgba(15, 27, 45, .3); transition: left .18s ease;
}
.sw-text { font-size: 14.5px; color: var(--text-3); white-space: nowrap; }
.sw input:checked + .sw-track { background: var(--grad-blue); }
.sw input:checked + .sw-track .sw-dot { left: 23px; }
.sw input:checked ~ .sw-text { color: var(--blue-deep); font-weight: 500; }
.sw input:focus-visible + .sw-track { box-shadow: 0 0 0 3px rgba(37, 99, 235, .22); }
.sw.ro { cursor: default; }

/* ============================================================
   财务管理 · 财务概览（/finance/overview）
   ============================================================ */
/* 4 列 KPI 里放金额：数字降一档，¥ 位数偏多时也不会挤出卡片 */
.kpi-grid.fin-kpi .k-val { font-size: 27px; }

/* 趋势（左，自适应）+ 账户余额（右，固定宽）；两块卡片拉伸等高，底边对齐 */
.fin-row {
  display: grid; grid-template-columns: minmax(0, 1fr) 384px; gap: 20px;
  align-items: stretch; margin-bottom: 20px;
}
.fin-row > .card,
.fin-subj-row > .card { display: flex; flex-direction: column; }

/* 近 6 个月收支趋势：柱子高度由模板按金额算成 px，不用百分比 */
.fin-trend { display: flex; align-items: flex-end; gap: 16px; padding: 12px 24px 20px; }
.fin-trend .m { flex: 1; min-width: 0; }
.fin-trend .bars { display: flex; align-items: flex-end; justify-content: center; gap: 8px; height: 150px; }
.fin-trend .bar { width: 20px; border-radius: 6px 6px 2px 2px; }
.fin-trend .bar.in { background: linear-gradient(180deg, #34d399, #059669); }
.fin-trend .bar.out { background: linear-gradient(180deg, #fb7185, #dc2626); }
.fin-trend .m-name { margin-top: 10px; text-align: center; font-size: 13.5px; color: var(--text-3); }
.fin-trend .m-name.cur { color: var(--blue-deep); font-weight: 600; }
.fin-legend { gap: 14px; font-size: 14px; color: var(--text-3); margin-left: auto; }
.fin-legend span { display: inline-flex; align-items: center; }
.fin-legend i { width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; }
.fin-legend .in i { background: linear-gradient(180deg, #34d399, #059669); }
.fin-legend .out i { background: linear-gradient(180deg, #fb7185, #dc2626); }

/* 账户余额列表 */
.fin-accts { flex: 1; padding: 12px 24px 6px; }
.fin-acct { margin-bottom: 15px; }
.fin-acct .fa-line { display: flex; align-items: baseline; gap: 10px; }
.fin-acct .fa-name {
  flex: 1; min-width: 0; font-size: 15.5px; color: var(--text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.fin-acct .fa-ent { margin-left: 8px; font-size: 13px; color: var(--text-3); }
.fin-acct .fa-amt { font-family: var(--mono); font-size: 15.5px; color: var(--text); white-space: nowrap; }
.fin-acct .fa-bar {
  margin-top: 7px; height: 7px; border-radius: 4px;
  background: rgba(37, 99, 235, .08); overflow: hidden;
}
.fin-acct .fa-bar span {
  display: block; height: 100%; border-radius: 4px;
  background: linear-gradient(90deg, #2563eb, #22d3ee);
}
.fin-acct-sum {
  display: flex; align-items: center; justify-content: space-between;
  margin: auto 24px 0; padding: 14px 0 18px;
  border-top: 1px dashed var(--line-2);
  font-size: 15px; color: var(--text-3);
}
.fin-acct-sum b { font-size: 17px; font-weight: 600; color: var(--text); }

/* 本月科目构成（左支出 / 右收入）：左右卡片等高，内容从顶部排 */
.fin-subj-row { align-items: stretch; margin-bottom: 20px; }
.fin-subj { flex: 1; padding: 14px 24px 20px; }
.fin-subj .row { display: flex; align-items: center; gap: 12px; }
.fin-subj .row + .row { margin-top: 13px; }
.fin-subj .nm {
  width: 130px; font-size: 15px; color: var(--text-2);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.fin-subj .track {
  flex: 1; min-width: 0; height: 9px; border-radius: 5px;
  background: rgba(37, 99, 235, .08); overflow: hidden;
}
.fin-subj .track span { display: block; height: 100%; border-radius: 5px; }
.fin-subj .track.in span { background: linear-gradient(90deg, #059669, #34d399); }
.fin-subj .track.out span { background: linear-gradient(90deg, #dc2626, #fb7185); }
.fin-subj .amt { width: 118px; text-align: right; font-size: 15px; color: var(--text); }
.fin-subj .pct { width: 50px; text-align: right; font-size: 13.5px; color: var(--text-3); }

/* 最近流水：固定列宽 + 超长省略，金额右对齐带正负色 */
table.data.fin-flow { table-layout: fixed; }
table.data.fin-flow td.ellip { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
table.data.fin-flow td.amount.in { color: #15803d; }
table.data.fin-flow td.amount.out { color: #b91c1c; }
.fin-acct .fa-sub { margin-top: 4px; font-size: 13px; color: var(--text-3); }
.fin-acct .fa-sub .up { color: #15803d; }
.fin-acct .fa-sub .down { color: #b91c1c; }
.fin-acct .fa-sub .dim { font-size: 13px; }

/* ============================================================
   业务单据 · 退厂单（列表 / 新建 / 详情）
   ============================================================ */
/* 列表 9 列固定列宽，厂商超长省略 */
table.data.fr-list { table-layout: fixed; }
table.data.fr-list td.ellip { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* 新建页明细：固定列宽、数量右对齐，规格两行 */
table.qtable.fr-table { table-layout: fixed; }
table.qtable.fr-table td .ellip { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
table.qtable.fr-table td input[type="number"] { text-align: right; }
table.qtable.fr-table .it-del {
  width: 26px; height: 26px; padding: 0; border-radius: 8px;
  color: var(--text-3); background: transparent; border: 1px solid transparent;
  font-size: 17px; line-height: 1;
}
table.qtable.fr-table .it-del:hover { color: #b91c1c; background: #fef2f2; border-color: #fecaca; }
table.qtable.fr-table tr.row-void td input[type="number"] { color: var(--text-4); }
.fr-hint { padding: 0 24px 16px; color: var(--text-3); font-size: 13.5px; }

/* ============================================================
   业务单据 · 换货单（列表 / 详情）
   ============================================================ */
/* 列表 10 列固定列宽，客户 / 商品超长省略 */
table.data.ex-list { table-layout: fixed; }
table.data.ex-list td.ellip { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
table.data.ex-list td .ellip { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* 详情明细：固定列宽，规格过长省略 */
table.data.ex-table { table-layout: fixed; }
table.data.ex-table td.ellip { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
table.data.ex-table td .ops { flex-wrap: nowrap; }

/* 运费应付挂账：一行一条，金额靠右 */
.ex-arap { margin-top: 16px; padding-top: 14px; border-top: 1px dashed var(--line); }
.ex-arap-title { font-size: 13.5px; font-weight: 500; color: var(--text-2); margin-bottom: 10px; }
.ex-arap-row {
  display: flex; align-items: center; gap: 14px;
  padding: 7px 0; font-size: 14.5px; color: var(--text-2);
}
.ex-arap-row .ex-arap-event { flex: 1 1 auto; min-width: 0; color: var(--text-3); }
.ex-arap-hint { margin-top: 8px; font-size: 13px; color: var(--text-3); line-height: 1.5; }

/* ============================================================
   退厂单 · 退厂方式 / 物流 / 运费（2026-10-29）
   ============================================================ */
/* 隐藏字段：用 class 而不是 [hidden]，避免被其它 display 规则顶掉 */
.is-hide { display: none !important; }
/* 单据信息里「来源入库单」是只读框 + 选择按钮 */
.form-grid .with-btn input { flex: 1; min-width: 0; }
.form-grid .with-btn .btn { flex: none; }
/* 其他说明占一格，右补一个空白格，让后面的运费字段仍落在整齐的栅格上 */
.form-grid .fr-pad { min-height: 1px; }

/* 运费卡片：底部支付入口 */
.fr-freight-card .fr-freight-ops {
  display: flex; align-items: center; gap: 12px; margin-top: 18px;
}

/* 运费支付弹窗 */
.fr-pay-modal { max-width: 620px; }
.fr-pay-sum {
  display: flex; align-items: baseline; gap: 12px;
  padding: 12px 16px; margin-bottom: 18px; border-radius: 12px;
  background: var(--field); font-size: 15px; color: var(--text-2);
}
.fr-pay-sum b { font-size: 22px; font-weight: 600; color: var(--text); letter-spacing: .2px; }

/* 新建页「选择入库单」弹层 */
table.data.fr-inb-pick { table-layout: fixed; }
table.data.fr-inb-pick td.ellip { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ============================================================
   报表分析 · 销售汇总表
   ============================================================ */
/* 9 列金额：等宽字体略小一号，1184px 内不需要横向滚动 */
table.data.rpt-sum td.mono { font-size: 14.5px; }
/* 合计行：浅底 + 顶部分隔线，金额加重 */
table.data.rpt-sum tfoot td {
  padding: 14px 8px; background: var(--surface-2); border-top: 1px solid var(--line);
  font-size: 15px; color: var(--text-2);
}
table.data.rpt-sum tfoot td:first-child { padding-left: 16px; }
table.data.rpt-sum tfoot td:last-child { padding-right: 16px; }
table.data.rpt-sum tfoot td.sum-l { font-size: 14px; color: var(--text-3); }
table.data.rpt-sum tfoot td.strong { color: var(--text); font-weight: 600; }
/* 工具栏一行放下七个控件：搜索框、下拉、日期框各让一点宽度（1184px 内容宽也不换行） */
.rpt-bar .search-box input { width: 210px; }
.rpt-bar select { max-width: 140px; }
.rpt-bar .date-range .date-inp { width: 134px; }

/* ============================================================
   报表分析 · 销售明细表
   ============================================================ */
/* 固定列宽 + 省略：商品名/规格可能很长，不能把金额列挤出去 */
table.data.rpt-det { table-layout: fixed; }
table.data.rpt-det td.ellip { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
table.data.rpt-det td.mono { font-size: 14.5px; }
/* 商品单元格：名称与类型徽标同一行，名称过长省略 */
.rpt-det .g-line { display: flex; align-items: center; gap: 8px; min-width: 0; }
.rpt-det .g-line .cell-strong { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rpt-det .kind-badge { flex: none; font-size: 12.5px; padding: 1px 8px; }
.rpt-det .spec-sub { margin-top: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* 作废行：整行淡灰 + 删除线（与销售单列表一致），badge 不加删除线 */
tr.row-void .kind-badge, tr.row-void .badge { text-decoration: none; }

/* ---------- 销售明细表 · 视图切换（按商品合并 / 逐行明细） ---------- */
.rpt-tabs { padding: 18px 24px 15px; border-bottom: 1px solid var(--line); }
.rpt-tabs .rec-tab { height: 34px; }
.rpt-tabs-tip { margin-left: auto; font-size: 13.5px; color: var(--text-3); }
.rpt-tabs + .toolbar { padding-top: 16px; }
/* 合并视图的合计行：浅底 + 顶部分隔线，与销售汇总表一致 */
table.data.rpt-det tfoot td {
  padding: 14px 8px; background: var(--surface-2); border-top: 1px solid var(--line);
  font-size: 15px; color: var(--text-2);
}
table.data.rpt-det tfoot td.sum-l { font-size: 14px; color: var(--text-3); }
table.data.rpt-det tfoot td.strong { color: var(--text); font-weight: 600; }

/* ============================================================
   报表分析 · 毛利明细表
   ============================================================ */
/* 成本缺失 / 成本待补：橙色小字提醒（数据有缺口，不是错误） */
.warn-sub { color: #b45309; }
/* 列表：10 列固定宽度，金额等宽字体略小一号 */
table.data.rpt-gp td.mono { font-size: 14.5px; }
table.data.rpt-gp td { padding: 12px 8px; }
table.data.rpt-gp td:first-child { padding-left: 16px; }
table.data.rpt-gp td:last-child { padding-right: 16px; }
table.data.rpt-gp tfoot td { padding: 14px 8px; }
table.data.rpt-gp tfoot td:first-child { padding-left: 16px; }
table.data.rpt-gp tfoot td:last-child { padding-right: 16px; }

/* 单品毛利弹窗 */
.modal.gp-modal { max-width: 880px; }
.gp-sum {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 20px;
  margin-bottom: 14px; padding: 12px 16px;
  background: var(--surface-2); border-radius: 12px;
  font-size: 14.5px; color: var(--text-2);
}
.gp-sum b { color: var(--text); font-weight: 600; }
.gp-sum .neg { color: var(--danger); }
table.data.rpt-gp-items { table-layout: fixed; }
table.data.rpt-gp-items td { padding: 11px 8px; }
table.data.rpt-gp-items td:first-child { padding-left: 14px; }
table.data.rpt-gp-items td.mono { font-size: 14.5px; }
/* 商品名与「水泵 / 配件」徽标之间留出间距（徽标紧贴名字会很挤） */
table.data.rpt-gp-items .kind-badge { margin-left: 10px; }
table.data.rpt-gp-items tbody tr.gp-other td { color: var(--text-3); font-style: italic; }
table.data.rpt-gp-items tbody tr.gp-total td {
  padding: 13px 8px; background: var(--surface-2); border-top: 1px solid var(--line);
  font-size: 15px; color: var(--text-2);
}
table.data.rpt-gp-items tbody tr.gp-total td:first-child { padding-left: 14px; }

/* ============================================================
   报表分析 · 售后明细表
   ============================================================ */
/* 11 列固定宽度：故障 / 处理结果两行，各截断一行 */
table.data.rpt-svc td.svc-fault { overflow: hidden; }
table.data.rpt-svc td.svc-fault > .ellip { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
table.data.rpt-svc td .spec-sub { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
table.data.rpt-svc tbody td { vertical-align: middle; }
/* 工单号最长 14 位（SH20261009-02），按列宽截断，别顶到日期列上 */
table.data.rpt-svc td.mono:first-child { overflow: hidden; }
table.data.rpt-svc td.mono:first-child .tlink { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* 工具栏控件多一个下拉，搜索框收窄一点，保证 1184px 内一行放下 */
/* 比别处多一个「人员」下拉：下拉右侧留白 40→30（箭头跟着挪 3px），搜索框 160，
   四个下拉 + 日期区间 + 两个按钮在 1136px 可用宽内一行放得下 */
.rpt-bar-svc { gap: 10px; }
.rpt-bar-svc .search-box input { width: 160px; }
.rpt-bar-svc select { max-width: 146px; padding-right: 30px; background-position: right 10px center; }
.rpt-bar-svc select:hover, .rpt-bar-svc select:focus, .rpt-bar-svc select:active { background-position: right 10px center; }
.rpt-bar-svc select[name="sort"] { max-width: 100px; }

/* ============================================================
   报表分析 · 回访信息表
   ============================================================ */
/* 回访内容最多两行，超出省略（悬停看全文）；其它列单行省略由 .rpt-det 统一处理 */
table.data.rpt-visit td.visit-content { padding-top: 9px; padding-bottom: 9px; white-space: normal; }
table.data.rpt-visit td.visit-content .clamp2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  /* 表格默认 nowrap，这里必须显式放开，否则 -webkit-box 不换行、文字被硬切 */
  white-space: normal;
  line-height: 1.45;
  word-break: break-word;
}
table.data.rpt-visit tbody td { vertical-align: middle; }
/* 客户类型 / 方式 / 结果三列都是短徽标，用紧凑字号（与销售明细表的 kind-badge 一致），
   否则 4 字的「维保客户」在 90px 列里会被裁掉一个角 */
table.data.rpt-visit .badge { font-size: 12.5px; padding: 1px 8px; }

/* ============================================================
   报表分析 · 进销存汇总表（金额口径：期初 + 入 − 出 ± 调整 = 期末）
   ============================================================ */
table.data.rpt-io-sum thead th { padding: 12px 16px; }
table.data.rpt-io-sum tbody td { padding: 14px 16px; vertical-align: middle; }
table.data.rpt-io-sum td.sum-label { font-weight: 500; }
table.data.rpt-io-sum td.mono { font-size: 15.5px; }
table.data.rpt-io-sum .row-ico {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; margin-right: 9px; border-radius: 6px;
  background: #eef2f8; color: #5b6b85; vertical-align: -6px;
}
/* 期初 / 期末两行做底色，中间六行保持白底，等式层次一眼能看出来 */
table.data.rpt-io-sum tr.row-open td { background: #f6f8fb; }
table.data.rpt-io-sum tr.row-close td {
  background: #eff4fd; font-weight: 600;
  border-top: 1px solid #cfdaea;
}
table.data.rpt-io-sum td.dim { color: var(--text-2); font-size: 14.5px; }
/* 工具栏右侧三个快捷期间靠右 */
.toolbar .bar-gap { flex: 1 1 auto; }

/* ============================================================
   报表分析 · 收支汇总表（按科目）
   ============================================================ */
/* 收入绿 / 支出红，与「收支流水」列表页同一套配色 */
table.data.cash-sum td.in-amt { color: #15803d; }
table.data.cash-sum td.out-amt { color: #b91c1c; }
table.data.cash-sum td.pos { color: #15803d; }
table.data.cash-sum td.neg { color: #b91c1c; }
table.data.cash-sum .badge.out { background: #fef2f2; color: #b91c1c; }
/* 占比列：细条 + 百分比数字，条宽按占同侧合计的比例 */
table.data.cash-sum .pct-wrap { display: flex; align-items: center; gap: 10px; }
table.data.cash-sum .pct-track {
  flex: 1; min-width: 0; height: 7px; border-radius: 4px;
  background: rgba(37, 99, 235, .08); overflow: hidden;
}
table.data.cash-sum .pct-track span { display: block; height: 100%; border-radius: 4px; }
table.data.cash-sum .pct-track.income span { background: linear-gradient(90deg, #059669, #34d399); }
table.data.cash-sum .pct-track.expense span { background: linear-gradient(90deg, #dc2626, #fb7185); }
table.data.cash-sum .pct-num {
  width: 48px; text-align: right; font-family: var(--mono);
  font-size: 13.5px; color: var(--text-3);
}

/* ============================================================
   系统设置 · 操作日志
   ============================================================ */
table.data.rpt-log tbody td { vertical-align: middle; }
table.data.rpt-log td.log-time .spec-sub { font-size: 13.5px; }
table.data.rpt-log .badge { font-size: 12.5px; padding: 1px 8px; }
/* 失败行淡红底：扫一眼就能看出哪几次没成 */
table.data.rpt-log tr.row-fail td { background: #fffafa; }

/* 比别处多一个「结果」下拉，工具栏收一点才不换行（真实可用宽 1136px） */
.rpt-bar-log { gap: 10px; }
.rpt-bar-log .search-box input { width: 240px; }

/* 详情弹窗：左边标签右边值，下面是表单内容 */
.log-kv {
  display: grid; grid-template-columns: 104px 1fr;
  gap: 11px 16px; align-items: start;
  padding: 4px 0 18px; border-bottom: 1px solid var(--line);
}
.log-kv .k { color: var(--text-3); font-size: 14.5px; }
.log-kv .v { color: var(--text); font-size: 15px; line-height: 1.5; word-break: break-all; }
.log-sub { margin: 16px 0 8px; font-size: 14px; color: var(--text-3); }
.log-form {
  margin: 0; padding: 14px 16px; border-radius: 10px;
  background: var(--surface-2); border: 1px solid var(--line);
  font-family: var(--mono); font-size: 14px; line-height: 1.7; color: var(--text-2);
  max-height: 280px; overflow: auto; white-space: pre-wrap; word-break: break-all;
}
.log-form.empty-form { color: var(--text-4); font-family: inherit; }

/* ============================================================
   工作台 · 数据概览
   全页只统计业务数量（单据 / 台数 / 家数 / 库存），不含任何金额
   ============================================================ */

/* ---- 待办提醒：4 列小格，0 项灰、≥3 项橙 ---- */
.db-todo-grid {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px; padding: 4px 24px 22px;
}
.db-todo {
  display: flex; align-items: center; gap: 13px;
  padding: 13px 15px; border-radius: 12px;
  background: var(--surface-2); border: 1px solid var(--line);
  text-decoration: none; transition: .18s;
}
.db-todo:hover {
  background: var(--surface); border-color: #d7e3f5;
  box-shadow: 0 12px 26px -20px rgba(16, 32, 64, .6);
  transform: translateY(-1px);
}
.db-todo-ico {
  flex: none; width: 38px; height: 38px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  background: var(--blue-soft); color: var(--blue-deep);
}
.db-todo-body { display: block; min-width: 0; }
.db-todo-n {
  display: block; font-family: var(--mono); font-size: 22px; font-weight: 600;
  line-height: 1.15; color: var(--text); letter-spacing: .3px;
}
.db-todo-t {
  display: block; margin-top: 2px; font-size: 13.5px; color: var(--text-3);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.db-todo.zero .db-todo-ico { background: #f2f5fa; color: var(--text-4); }
.db-todo.zero .db-todo-n { color: var(--text-4); }
.db-todo.hot .db-todo-ico { background: #fff7ed; color: #b45309; }
.db-todo.hot .db-todo-n { color: #b45309; }

/* ---- 近 14 天业务量：4 组柱子 ---- */
.db-legend { gap: 14px; font-size: 13.5px; color: var(--text-3); }
.db-legend span { display: inline-flex; align-items: center; }
.db-legend i { width: 9px; height: 9px; border-radius: 3px; margin-right: 6px; }
.db-legend i.s { background: linear-gradient(180deg, #60a5fa, #2563eb); }
.db-legend i.o { background: linear-gradient(180deg, #67e8f9, #0891b2); }
.db-legend i.i { background: linear-gradient(180deg, #fcd34d, #d97706); }
.db-legend i.v { background: linear-gradient(180deg, #c4b5fd, #7c3aed); }

.db-trend { display: flex; align-items: flex-end; gap: 10px; padding: 8px 24px 18px; }
.db-trend .d { flex: 1; min-width: 0; }
.db-trend .bars {
  display: flex; align-items: flex-end; justify-content: center; gap: 4px;
  height: 150px; border-bottom: 1px solid var(--line-2);
}
.db-trend .bar { width: 100%; max-width: 13px; border-radius: 5px 5px 0 0; }
.db-trend .bar.sales { background: linear-gradient(180deg, #60a5fa, #2563eb); }
.db-trend .bar.out { background: linear-gradient(180deg, #67e8f9, #0891b2); }
.db-trend .bar.in { background: linear-gradient(180deg, #fcd34d, #d97706); }
.db-trend .bar.srv { background: linear-gradient(180deg, #c4b5fd, #7c3aed); }
.db-trend .m-name {
  margin-top: 9px; text-align: center; font-family: var(--mono);
  font-size: 12.5px; color: var(--text-3); white-space: nowrap;
}
.db-trend .d.cur .m-name { color: var(--blue-deep); font-weight: 500; }

/* ---- 库存关注 / 售后与回访 两栏 ---- */
.db-row {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 20px; align-items: start; margin-top: 20px;
}
.db-row > .card + .card { margin-top: 0; }
/* .db-row 是普通 div，紧跟其后的卡片拿不到 .content > .card + .card 的间距兜底 */
.db-row + .card { margin-top: 20px; }

table.data.db-stock tbody td { padding-top: 11px; padding-bottom: 11px; }
table.data.db-stock td.ellip { overflow: hidden; text-overflow: ellipsis; }
table.data.db-stock .badge { font-size: 12.5px; padding: 1px 8px; }
.db-kind {
  display: inline-block; margin-right: 7px; padding: 0 5px; border-radius: 5px;
  font-size: 11.5px; line-height: 18px; vertical-align: 1px;
  background: var(--blue-soft); color: var(--blue-deep);
}
.db-kind.part { background: #f3f0ff; color: #6d28d9; }
.db-unit { margin-left: 4px; font-family: inherit; font-size: 12.5px; color: var(--text-4); }

/* 右栏：4 个迷你统计 */
.db-mini {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px; padding: 4px 24px 6px;
}
.db-mini > div { padding: 9px 12px; border-radius: 10px; background: var(--surface-2); }
.db-mini .v {
  font-family: var(--mono); font-size: 20px; font-weight: 600;
  line-height: 1.2; color: var(--text);
}
.db-mini .v.hot { color: #b45309; }
.db-mini .v.warn { color: #dc2626; }
.db-mini .k { margin-top: 1px; font-size: 12.5px; color: var(--text-3); }

/* 小标题（最近售后工单 / 最近回访） */
.db-sec {
  display: flex; align-items: center; gap: 10px;
  padding: 16px 24px 6px; font-size: 13.5px; color: var(--text-3);
}
.db-sec .tlink { margin-left: auto; font-size: 13.5px; }

.db-list { padding: 0 24px 8px; }
.db-list:last-child { padding-bottom: 14px; }
.db-item {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 0; border-top: 1px dashed #eef3fa;
}
.db-item:first-child { border-top: 0; }
.db-item-main { flex: 1; min-width: 0; }
.db-item-t {
  display: flex; align-items: center; gap: 8px;
  font-size: 15px; color: var(--text); line-height: 1.4;
}
.db-item-t .mono { font-family: var(--mono); font-size: 14.5px; }
.db-item-t .badge { font-size: 12.5px; padding: 1px 8px; }
.db-item-s {
  margin-top: 2px; font-size: 13px; color: var(--text-3); line-height: 1.35;
}
.db-item-side {
  flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 5px;
}
.db-item-side .badge { font-size: 12.5px; padding: 1px 8px; }
.db-item-d { font-family: var(--mono); font-size: 12.5px; color: var(--text-4); }
.db-none { padding: 10px 0 6px; font-size: 14px; color: var(--text-4); }

/* ---- 最近业务动态 ---- */
table.data.db-flow tbody td { vertical-align: middle; }
table.data.db-flow td.ellip { overflow: hidden; text-overflow: ellipsis; }
table.data.db-flow .badge { font-size: 12.5px; padding: 1px 8px; }
.db-hm { margin-left: 4px; font-size: 12.5px; color: var(--text-4); }

/* ============================================================
   报价单 · 一键转销售单
   ============================================================ */
/* 列表里跟在单号后的「已转」小标记：压缩尺寸，避免撑到换行 */
table.data td .badge.q2s {
  margin-left: 8px; font-size: 12.5px; padding: 1px 8px;
  font-weight: 500; vertical-align: 1px;
}
a.badge.q2s { text-decoration: none; }
a.badge.q2s:hover { filter: brightness(.97); }

/* ============================================================
   报价单 / 销售单 · 同款合并时闪一下目标行
   ============================================================ */
table.data tbody tr.row-hit > td,
.qtable tbody tr.row-hit > td { animation: rowHit .9s ease-out; }
@keyframes rowHit {
  0%   { background: #d8eaff; }
  100% { background: transparent; }
}

/* ============================================================
   顶栏 · 当前账号（姓名 / 职务 / 登录账号，单行横排不折行）
   ============================================================ */
.topbar .who {
  display: flex; flex-wrap: nowrap; align-items: center; gap: 7px;
  height: 44px; padding: 0 14px 0 9px;
  border-radius: 999px; background: var(--surface-2);
  white-space: nowrap; overflow: hidden;
}
.topbar .who-ava {
  flex: none; width: 27px; height: 27px; border-radius: 50%;
  display: grid; place-items: center; margin-right: 1px;
  background: var(--surface); color: var(--blue);
  box-shadow: 0 0 0 1px var(--line-2);
}
.topbar .who-name {
  flex: none; font-size: 15px; font-weight: 500; color: var(--text);
  max-width: 140px; overflow: hidden; text-overflow: ellipsis;
}
.topbar .who-sep { flex: none; color: var(--text-4); font-size: 13px; }
.topbar .who-role {
  flex: none; font-size: 13.5px; color: var(--text-2);
  max-width: 110px; overflow: hidden; text-overflow: ellipsis;
}
.topbar .who-acc {
  flex: none; font-size: 13.5px; color: var(--text-3);
  max-width: 150px; overflow: hidden; text-overflow: ellipsis;
}

/* ---------- 测试环境角标（APP_ENV=test 时才渲染，正式环境无此元素） ---------- */
.env-flag {
  position: fixed; right: 18px; bottom: 18px; z-index: 400;
  display: inline-flex; align-items: center; gap: 7px;
  height: 30px; padding: 0 13px; border-radius: 999px;
  background: #fff8ed; border: 1px solid #fcd9a8; color: #b45309;
  font-size: 13px; font-weight: 500; letter-spacing: .3px;
  box-shadow: 0 2px 10px -6px rgba(180, 83, 9, .5);
  pointer-events: none; user-select: none;
}
.env-flag .dot { width: 7px; height: 7px; border-radius: 50%; background: #f59e0b; }
/* 测试环境顶栏色条：固定在页面最顶部，不占布局（正式环境不渲染） */
.env-bar {
  position: fixed; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, #f59e0b, #fbbf24);
  z-index: 401; pointer-events: none;
}
@media print { .env-flag, .env-bar { display: none; } }

/* 极窄屏（<1280）：操作列按钮收成纯图标，保证表格不横向滚动。
   实测 1440/1500 带文字仍放得下，故不在该区间隐藏文字 —— 文字比图标更好认。 */
@media (max-width: 1280px) {
  table.data .ops .btn.sm .t { display: none; }
  table.data .ops .btn.sm { padding: 0 8px; }
}

/* ============================================================
   深色模式 · 结构性覆盖（玻璃面板 / 霓虹描边 / 深色表格）
   放在文件末尾：靠 html[data-theme="dark"] 提升特异性，
   布局尺寸一律不动（描边用 box-shadow 环，不写 border）
   ============================================================ */

/* ---------- 背景：深空 + 双色光晕 + 科技网格 ---------- */
html[data-theme="dark"] body { background: #05090f; }
html[data-theme="dark"] .bg-layer {
  background:
    radial-gradient(880px 620px at 8% -14%, rgba(14, 165, 233, .26), transparent 62%),
    radial-gradient(760px 520px at 94% -8%, rgba(34, 211, 238, .16), transparent 60%),
    radial-gradient(1000px 720px at 52% 118%, rgba(56, 189, 248, .10), transparent 64%),
    linear-gradient(180deg, #060c15, #04070d 46%, #03060b);
}
html[data-theme="dark"] .bg-layer::before {
  background-image:
    linear-gradient(rgba(56, 189, 248, .06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(56, 189, 248, .06) 1px, transparent 1px);
  mask-image: radial-gradient(ellipse 86% 64% at 50% 16%, #000 6%, transparent 82%);
  -webkit-mask-image: radial-gradient(ellipse 86% 64% at 50% 16%, #000 6%, transparent 82%);
}
html[data-theme="dark"] .glow.a { background: radial-gradient(circle, rgba(14, 165, 233, .32), transparent 70%); opacity: .5; }
html[data-theme="dark"] .glow.b { background: radial-gradient(circle, rgba(34, 211, 238, .26), transparent 70%); opacity: .45; }

/* ---------- 骨架：侧栏 / 顶栏 玻璃 ---------- */
html[data-theme="dark"] .sidebar {
  background: linear-gradient(180deg, rgba(11, 17, 28, .84), rgba(6, 10, 17, .92));
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  backdrop-filter: blur(20px) saturate(140%);
  box-shadow: 1px 0 0 rgba(120, 170, 255, .10), 14px 0 44px -30px rgba(0, 0, 0, .95);
}
html[data-theme="dark"] .topbar {
  background: rgba(6, 11, 19, .72);
  -webkit-backdrop-filter: blur(22px) saturate(160%);
  backdrop-filter: blur(22px) saturate(160%);
  box-shadow: 0 1px 0 rgba(120, 170, 255, .10);
}
html[data-theme="dark"] .topbar .who { background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07); }
html[data-theme="dark"] .topbar .who-ava { background: rgba(56, 189, 248, .16); color: #7dd3fc; box-shadow: 0 0 0 1px rgba(56, 189, 248, .30); }
html[data-theme="dark"] .side-foot .who { background: rgba(255, 255, 255, .05); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06); }
html[data-theme="dark"] .avatar { box-shadow: 0 8px 22px -10px rgba(14, 165, 233, .95); }
html[data-theme="dark"] .nav::-webkit-scrollbar-thumb { background: rgba(120, 170, 255, .22); }

/* ---------- 导航选中态：霓虹条 + 玻璃高亮 ---------- */
html[data-theme="dark"] .nav a.active {
  background: linear-gradient(90deg, rgba(56, 189, 248, .20), rgba(56, 189, 248, .03));
  color: #bae6fd;
  box-shadow: inset 0 0 0 1px rgba(56, 189, 248, .22);
}
html[data-theme="dark"] .nav a.active::before {
  background: linear-gradient(180deg, #38bdf8, #22d3ee);
  box-shadow: 0 0 12px rgba(56, 189, 248, .9);
}
html[data-theme="dark"] .nav a:hover { background: rgba(255, 255, 255, .06); color: #bae6fd; }
html[data-theme="dark"] .nav-group > .t:hover { background: rgba(255, 255, 255, .05); color: #bae6fd; }
html[data-theme="dark"] .role-item.active { background: rgba(56, 189, 248, .12); }

/* ---------- 卡片 / KPI：玻璃主体 ---------- */
html[data-theme="dark"] .card,
html[data-theme="dark"] .kpi {
  background: linear-gradient(158deg, rgba(255, 255, 255, .085), rgba(255, 255, 255, .028) 46%, rgba(255, 255, 255, .012));
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  backdrop-filter: blur(18px) saturate(150%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .09),
    0 0 0 1px rgba(130, 175, 255, .10),
    0 26px 64px -32px rgba(0, 0, 0, .95);
}
html[data-theme="dark"] .kpi:hover {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .12),
    0 0 0 1px rgba(56, 189, 248, .22),
    0 0 28px -8px rgba(56, 189, 248, .35),
    0 30px 70px -32px rgba(0, 0, 0, .95);
}
html[data-theme="dark"] .kpi::after { background: radial-gradient(circle, rgba(56, 189, 248, .22), transparent 70%); }
html[data-theme="dark"] .kpi .k-val {
  background: linear-gradient(100deg, #e0f2fe, #7dd3fc 58%, #22d3ee);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* ---------- 表格：深底 + 细霓虹分隔，表头做毛玻璃 ---------- */
html[data-theme="dark"] table.data th {
  color: var(--text-3);
  background: rgba(10, 16, 26, .82);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: inset 0 -1px 0 rgba(255, 255, 255, .07);
}
html[data-theme="dark"] table.data td { box-shadow: inset 0 -1px 0 rgba(255, 255, 255, .055); }
html[data-theme="dark"] table.data tbody tr:hover { background: rgba(56, 189, 248, .07); }
html[data-theme="dark"] table.data tbody tr:hover td { box-shadow: inset 0 -1px 0 rgba(56, 189, 248, .18); }
html[data-theme="dark"] table.data tbody tr:last-child td { box-shadow: none; }
html[data-theme="dark"] table.data.rpt-io-sum tr.row-open td { background: rgba(56, 189, 248, .07); }
html[data-theme="dark"] table.data.rpt-io-sum tr.row-close td { background: rgba(255, 255, 255, .05); }
html[data-theme="dark"] table.data.rpt-io-sum .row-ico { background: rgba(255, 255, 255, .06); color: var(--text-2); }
html[data-theme="dark"] table.data.rpt-log tr.row-fail td { background: rgba(248, 113, 113, .08); }
html[data-theme="dark"] tr.row-shipped td { background: rgba(255, 255, 255, .03); }

/* ---------- 表单：玻璃输入框，聚焦发青蓝光 ---------- */
html[data-theme="dark"] input[type="text"], html[data-theme="dark"] input[type="password"],
html[data-theme="dark"] input[type="search"], html[data-theme="dark"] input[type="tel"],
html[data-theme="dark"] input[type="email"], html[data-theme="dark"] input[type="number"],
html[data-theme="dark"] select, html[data-theme="dark"] textarea {
  border-color: rgba(140, 180, 255, .10);
}
html[data-theme="dark"] input:focus, html[data-theme="dark"] select:focus, html[data-theme="dark"] textarea:focus {
  background-color: rgba(56, 189, 248, .08);
  border-color: rgba(56, 189, 248, .55);
  box-shadow: 0 0 0 3px rgba(56, 189, 248, .16);
}
html[data-theme="dark"] select option { background: #0b1220; color: var(--text); }
html[data-theme="dark"] .chk input { border-color: rgba(140, 180, 255, .30); background: rgba(255, 255, 255, .06); }
html[data-theme="dark"] .qtable.sale-items input:disabled,
html[data-theme="dark"] #st_subj:disabled { background: rgba(255, 255, 255, .05); color: var(--text-3); }

/* ---------- 按钮：主按钮霓虹投影，危险态改半透明红 ---------- */
html[data-theme="dark"] .btn:hover { background: rgba(56, 189, 248, .12); color: #bae6fd; }
html[data-theme="dark"] .btn.primary {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), 0 10px 26px -12px rgba(14, 165, 233, .95);
}
html[data-theme="dark"] .btn.danger { color: #fca5a5; }
html[data-theme="dark"] .btn.danger:hover,
html[data-theme="dark"] .btn.sm.danger:hover { background: rgba(248, 113, 113, .14); color: #fecaca; }
html[data-theme="dark"] .btn.sm.danger { color: #f87171; }
html[data-theme="dark"] .btn.sm:hover { background: rgba(56, 189, 248, .12); color: #bae6fd; }
html[data-theme="dark"] .btn.ghost:hover { background: rgba(255, 255, 255, .07); color: var(--text); }
html[data-theme="dark"] .topbar .logout-btn:hover { background: rgba(248, 113, 113, .14); color: #fca5a5; }

/* 分段选择器（自提/送货、含税/不含税 等）：选中态改成玻璃高亮，避免和未选段混在一起 */
html[data-theme="dark"] .seg button.on,
html[data-theme="dark"] .kind-tabs button.on {
  background: rgba(56, 189, 248, .16);
  color: #bae6fd;
  box-shadow: inset 0 0 0 1px rgba(56, 189, 248, .30), 0 0 14px -6px rgba(56, 189, 248, .65);
}
html[data-theme="dark"] .seg button:hover,
html[data-theme="dark"] .kind-tabs button:hover { color: #bae6fd; }

/* ---------- 徽标 / 提示条 / 横幅 ---------- */
html[data-theme="dark"] .badge.ok { background: rgba(52, 211, 153, .14); color: #6ee7b7; }
html[data-theme="dark"] .badge.warn { background: rgba(251, 191, 36, .14); color: #fcd34d; }
html[data-theme="dark"] .badge.fail { background: rgba(248, 113, 113, .14); color: #fca5a5; }
html[data-theme="dark"] .badge.off { background: rgba(255, 255, 255, .07); color: #93a4bd; }
html[data-theme="dark"] .badge.super { background: rgba(34, 211, 238, .14); color: #67e8f9; }
html[data-theme="dark"] table.data.cash-sum .badge.out { background: rgba(248, 113, 113, .14); color: #fca5a5; }
html[data-theme="dark"] .note-band { background: rgba(255, 255, 255, .045); border-left-color: rgba(56, 189, 248, .55); }
html[data-theme="dark"] .note-band.warn { background: rgba(251, 191, 36, .10); border-left-color: #fbbf24; color: #fcd34d; }
html[data-theme="dark"] .alert.danger,
html[data-theme="dark"] .flash.error,
html[data-theme="dark"] .refund-note { background: rgba(248, 113, 113, .12); border-color: rgba(248, 113, 113, .35); color: #fca5a5; }
html[data-theme="dark"] .alert.ok,
html[data-theme="dark"] .flash.ok { background: rgba(52, 211, 153, .12); border-color: rgba(52, 211, 153, .35); color: #6ee7b7; }
html[data-theme="dark"] .void-banner { background: rgba(248, 113, 113, .10); border-color: rgba(248, 113, 113, .30); }

/* ---------- 弹窗 / 确认框 / 通知：厚玻璃 ---------- */
html[data-theme="dark"] .modal-mask { background: rgba(2, 6, 12, .66); }
html[data-theme="dark"] .modal,
html[data-theme="dark"] .sj-cf {
  background: linear-gradient(158deg, rgba(24, 34, 52, .94), rgba(10, 16, 26, .96));
  -webkit-backdrop-filter: blur(26px) saturate(150%);
  backdrop-filter: blur(26px) saturate(150%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .10),
    0 0 0 1px rgba(130, 175, 255, .14),
    0 40px 100px -40px rgba(0, 0, 0, .95);
}
html[data-theme="dark"] .nf-toast {
  background: linear-gradient(158deg, rgba(24, 34, 52, .95), rgba(10, 16, 26, .95));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 0 0 1px rgba(130, 175, 255, .14), 0 16px 40px -16px rgba(0, 0, 0, .9);
}
html[data-theme="dark"] .sj-cf-ic.danger { background: rgba(248, 113, 113, .16); }
html[data-theme="dark"] .sj-cf-ic.info { background: rgba(56, 189, 248, .16); }

/* ---------- 各处浅色块：统一换成半透明玻璃 ---------- */
html[data-theme="dark"] .ds-ic.amber,
html[data-theme="dark"] .db-todo.hot .db-todo-ico { background: rgba(251, 191, 36, .15); color: #fcd34d; }
html[data-theme="dark"] .ds-ic.green { background: rgba(52, 211, 153, .15); color: #6ee7b7; }
html[data-theme="dark"] .db-todo.zero .db-todo-ico { background: rgba(255, 255, 255, .06); }
html[data-theme="dark"] .db-kind.part { background: rgba(167, 139, 250, .16); color: #c4b5fd; }
html[data-theme="dark"] .rec-score.hi { background: rgba(56, 189, 248, .16); color: #7dd3fc; }
html[data-theme="dark"] .rec-score.mid { background: rgba(251, 191, 36, .16); color: #fcd34d; }
html[data-theme="dark"] .rec-score.lo { background: rgba(255, 255, 255, .06); color: var(--text-3); }
html[data-theme="dark"] .rec-tip,
html[data-theme="dark"] .pk-suspect { background: rgba(251, 191, 36, .10); border-color: rgba(251, 191, 36, .28); color: #fcd34d; }
html[data-theme="dark"] .inv-preview,
html[data-theme="dark"] .pdf-scroll { background: rgba(255, 255, 255, .06); }
html[data-theme="dark"] .inv-raw pre { background: rgba(255, 255, 255, .04); }
html[data-theme="dark"] .file-drop,
html[data-theme="dark"] .file-current { background: rgba(255, 255, 255, .045); border-color: rgba(140, 180, 255, .22); }
html[data-theme="dark"] .file-drop:hover,
html[data-theme="dark"] .file-drop.over { background: rgba(56, 189, 248, .10); border-color: rgba(56, 189, 248, .55); }
html[data-theme="dark"] .file-drop.has-file { background: rgba(52, 211, 153, .10); border-color: rgba(52, 211, 153, .35); }
html[data-theme="dark"] .po-tip { background: rgba(255, 255, 255, .04); }
html[data-theme="dark"] table.data.po-table th.po-th-edit { background: rgba(56, 189, 248, .10); color: #bae6fd; }
html[data-theme="dark"] table.data.po-table td.po-cell-inp { background: rgba(255, 255, 255, .035); }
html[data-theme="dark"] .rp-sn,
html[data-theme="dark"] .rp-radio:has(input:checked) { background: rgba(56, 189, 248, .14); border-color: rgba(56, 189, 248, .40); color: #bae6fd; }
html[data-theme="dark"] .rp-form input[type="text"],
html[data-theme="dark"] .rp-form input[type="tel"],
html[data-theme="dark"] .rp-form textarea,
html[data-theme="dark"] .rp-radio,
html[data-theme="dark"] .rp-fault-mini,
html[data-theme="dark"] .rp-done-box { background: rgba(255, 255, 255, .05); }
html[data-theme="dark"] .rp-err { background: rgba(248, 113, 113, .12); border-color: rgba(248, 113, 113, .32); }
html[data-theme="dark"] .rp-err.info { background: rgba(56, 189, 248, .12); border-color: rgba(56, 189, 248, .32); color: #bae6fd; }
html[data-theme="dark"] .sw-track { background: rgba(255, 255, 255, .16); }
html[data-theme="dark"] .env-flag { background: rgba(251, 191, 36, .14); border-color: rgba(251, 191, 36, .40); color: #fcd34d; }
html[data-theme="dark"] .scan-badge.warn,
html[data-theme="dark"] .scan-note.warn { background: rgba(251, 191, 36, .14); color: #fcd34d; }
html[data-theme="dark"] .scan-badge.bad { background: rgba(248, 113, 113, .14); color: #fca5a5; }
html[data-theme="dark"] .scan-note.good,
html[data-theme="dark"] .qr-modal .qr-badge.on { background: rgba(52, 211, 153, .14); color: #6ee7b7; }
html[data-theme="dark"] .np-quick { background: rgba(255, 255, 255, .045); border-color: rgba(140, 180, 255, .22); }
html[data-theme="dark"] .pdf-btn:hover { background: rgba(56, 189, 248, .10); border-color: rgba(56, 189, 248, .45); }
html[data-theme="dark"] .qtag:hover { background: rgba(56, 189, 248, .16); }

/* ---------- 登录页：深空 + 玻璃卡 ---------- */
html[data-theme="dark"] body.login-body {
  background: radial-gradient(ellipse 100% 70% at 50% -12%, #0b1a2b 0%, #070d16 46%, #04070d 100%);
}
html[data-theme="dark"] .login-card {
  background: linear-gradient(158deg, rgba(255, 255, 255, .09), rgba(255, 255, 255, .02));
  -webkit-backdrop-filter: blur(24px) saturate(150%);
  backdrop-filter: blur(24px) saturate(150%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .10),
    0 0 0 1px rgba(130, 175, 255, .12),
    0 40px 90px -40px rgba(0, 0, 0, .95);
}
html[data-theme="dark"] .login-intro h1 {
  background: linear-gradient(100deg, #bae6fd 6%, #38bdf8 55%, #22d3ee 96%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
html[data-theme="dark"] .login-intro .eyebrow { border-color: rgba(56, 189, 248, .35); background: rgba(56, 189, 248, .12); color: #7dd3fc; }
html[data-theme="dark"] .intro-feats span { background: rgba(255, 255, 255, .05); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06); }
html[data-theme="dark"] .btn-login { box-shadow: 0 14px 34px -14px rgba(14, 165, 233, .95); }

/* 日期 / 时间类输入框（基础样式没覆盖，浏览器默认会给白底） */
html[data-theme="dark"] input[type="date"],
html[data-theme="dark"] input[type="month"],
html[data-theme="dark"] input[type="time"],
html[data-theme="dark"] input[type="datetime-local"] {
  background: rgba(255, 255, 255, .055);
  border: 1px solid rgba(140, 180, 255, .12);
  border-radius: 10px;
  color: var(--text);
  color-scheme: dark;
}
html[data-theme="dark"] input[type="date"]:hover,
html[data-theme="dark"] input[type="month"]:hover,
html[data-theme="dark"] input[type="time"]:hover,
html[data-theme="dark"] input[type="datetime-local"]:hover { background-color: var(--field-hover); }
html[data-theme="dark"] input[type="date"]:focus,
html[data-theme="dark"] input[type="month"]:focus,
html[data-theme="dark"] input[type="time"]:focus,
html[data-theme="dark"] input[type="datetime-local"]:focus {
  background-color: rgba(56, 189, 248, .08);
  border-color: rgba(56, 189, 248, .55);
  box-shadow: 0 0 0 3px rgba(56, 189, 248, .16);
}
html[data-theme="dark"] input[type="date"]::-webkit-calendar-picker-indicator { filter: invert(1) brightness(1.5); opacity: .6; }

/* ---------- 打印：深色模式同样回到白纸 ---------- */
@media print {
  html[data-theme="dark"] {
    --bg: #fff; --surface: #fff; --surface-2: #f8fafd; --surface-3: #eef4ff;
    --line: #eef3fa; --line-2: #e3ebf6;
    --text: #0f1b2d; --text-2: #4a5c76; --text-3: #8a9bb5; --text-4: #a9b8cc;
    --blue: #2563eb; --blue-deep: #1d4ed8; --blue-ink: #1a3a7a; --blue-soft: #eff5ff;
    --cyan: #0891b2; --cyan-2: #0891b2; --cyan-soft: #ecfeff;
    --ok: #15a34a; --warn: #d97706; --danger: #dc2626;
    --field: #f4f8fd; --field-hover: #edf4fe;
    --grad-blue: linear-gradient(100deg, #2563eb, #0891b2);
  }
  html[data-theme="dark"] body { background: #fff !important; }
  html[data-theme="dark"] .card,
  html[data-theme="dark"] .kpi,
  html[data-theme="dark"] .sidebar,
  html[data-theme="dark"] .topbar,
  html[data-theme="dark"] .modal {
    background: #fff !important;
    box-shadow: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }
  html[data-theme="dark"] table.data th { background: #fff !important; color: #0f1b2d !important; box-shadow: inset 0 -1px 0 #e3e8f0 !important; }
  html[data-theme="dark"] table.data td { box-shadow: inset 0 -1px 0 #eef3fa !important; }
  html[data-theme="dark"] .kpi .k-val { background: none !important; -webkit-background-clip: initial !important; background-clip: initial !important; color: #0f1b2d !important; }
  html[data-theme="dark"] .login-intro h1 { background: none !important; -webkit-background-clip: initial !important; background-clip: initial !important; color: #12306b !important; }
}

/* ============================================================
   页面页脚 · ICP 备案信息
   工信部要求：网站页面底部标明备案号，并链接到 beian.miit.gov.cn
   ============================================================ */
.site-foot {
  flex: none;
  padding: 22px 30px 26px;
  text-align: center;
  font-size: 12.5px;
  line-height: 1.7;
  color: var(--text-3);
  letter-spacing: .2px;
  position: relative;
  z-index: 1;
}
.site-foot .sf-sep { margin: 0 9px; opacity: .55; }
.site-foot .sf-icp { color: var(--text-2); transition: color .18s ease; white-space: nowrap; display: inline-block; }
.site-foot .sf-icp:hover { color: var(--blue); text-decoration: underline; }

/* 后台主框架：内容不足一屏时页脚贴底，超出时页脚跟在内容末尾（shrink 必须为 0，
   否则长页面会被压成一屏，页脚卡进内容中间） */
body.app-body { display: flex; flex-direction: column; min-height: 100vh; }
body.app-body > .layout { flex: 1 0 auto; min-height: 0; }

/* 手机扫码 / 报修页：跟在内容末尾，靠 margin-top:auto 压到底部 */
body.scan-body .site-foot { margin-top: auto; padding: 16px 4px 6px; font-size: 11.5px; }

/* 打印时不出备案号 */
@media print { .site-foot { display: none !important; } }

/* 登录页 / 错误页：单屏居中，页脚绝对定位在视口底部 */
body.login-body { position: relative; }
body.login-body .site-foot { position: absolute; left: 0; right: 0; bottom: 0; padding-bottom: 28px; }

/* 手机扫码 / 报修页：body 撑满一屏，页脚跟在内容之后并压到底部 */
body.scan-body { display: flex; flex-direction: column; min-height: 100vh; }
body.scan-body .scan-page { flex: 1 1 auto; min-height: 0; }

/* 侧栏跟随主框架高度：短页面时不再溢出到页脚区域左侧 */
body.app-body > .layout > .sidebar { height: auto; align-self: stretch; }

/* 登录页页脚里的备案号（.login-foot 本身 pointer-events:none，链接要单独放开才能点） */
.login-foot .lf-sep { margin: 0 8px; opacity: .55; }
.login-foot .lf-icp { color: var(--text-2); pointer-events: auto; }
.login-foot .lf-icp:hover { color: var(--blue); text-decoration: underline; }

/* 备案链接的通用样式（登录页、扫码页、弹窗页共用） */
.sf-sep { margin: 0 8px; opacity: .55; }
.sf-icp { color: var(--text-3); transition: color .18s ease; white-space: nowrap; display: inline-block; }
.sf-icp:hover { color: var(--blue); text-decoration: underline; }

/* 手机页把"测试环境"角标挪到右上，避免遮住底部的备案号 */
body.scan-body .env-flag { top: 12px; bottom: auto; right: 12px; }

/* 手机页版权行允许两行，备案号整体换行不拆字 */
body.scan-body .scan-foot { line-height: 1.8; padding-left: 26px; padding-right: 26px; }