/* ==========================================================================
   云办 OA —— 全局样式（桌面 + 移动端自适应）
   ========================================================================== */

:root {
  --brand: #2563eb;
  --brand-dark: #1d4ed8;
  --brand-soft: #eff6ff;
  --bg: #f1f5f9;
  --panel: #ffffff;
  --panel-2: #f8fafc;
  --line: #e2e8f0;
  --line-strong: #cbd5e1;
  --text: #0f172a;
  --sub: #64748b;
  --muted: #94a3b8;
  --green: #16a34a;
  --red: #dc2626;
  --amber: #d97706;
  --radius: 12px;
  --radius-sm: 8px;
  --shadow-sm: 0 1px 2px rgba(15, 23, 42, .06);
  --shadow: 0 4px 16px rgba(15, 23, 42, .08);
  --shadow-lg: 0 16px 48px rgba(15, 23, 42, .18);
  --sidebar-w: 232px;
  --topbar-h: 58px;
}

* { box-sizing: border-box; }

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

h1, h2, h3, h4 { margin: 0; font-weight: 600; letter-spacing: -.01em; }
p { margin: 0; }
a { color: var(--brand); text-decoration: none; }
button { font-family: inherit; font-size: inherit; cursor: pointer; }
input, select, textarea { font-family: inherit; font-size: inherit; }
[hidden] { display: none !important; }

.ico { display: inline-block; vertical-align: middle; flex: none; }

/* ------------------------------------------------------------ 启动画面 */

.boot {
  position: fixed; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 12px; background: var(--bg); z-index: 999;
}
.boot-logo-img { width: 150px; height: 121px; object-fit: contain; display: block; margin: 0 auto 12px; }
.boot-logo { font-size: 26px; font-weight: 700; color: var(--brand); letter-spacing: .04em; }
/* 顶栏恢复 58px（甲方 2026-10-23 18:56「恢复工具栏宽度」），商标跟随顶栏自适应 */
.brand-logo { height: calc(var(--topbar-h) - 4px); width: auto; object-fit: contain; flex: none; display: block; margin: 0 auto; }
.boot-tip { color: var(--muted); font-size: 13px; }

/* ------------------------------------------------------------ 布局 */

/* 布局（甲方 2026-10-20）：
     ┌─────────────────────────────────────────┐
     │ Logo  │ 工作台  管理后台      … 用户区  │ 顶栏全宽
     ├────────┬────────────────────────────────┤
     │ 子标签 │                                │ 左侧子栏 + 内容区
     └────────┴────────────────────────────────┘ */

.layout { display: flex; flex-direction: column; min-height: 100vh; }

/* 顶栏贯穿整宽：Logo 在最左，主菜单横排。
   ★ 左边不留 padding —— 顶栏若从 18px 起算，.brand 就被推到 18~250px，
     而下面的 .subnav 是贴着 0 走的 232px，两段竖线差 18px 对不上。
     左边交给 .brand 自己的 padding，右边留给用户区。 */
.topbar {
  height: var(--topbar-h); flex: none; width: 100%;
  background: rgba(255,255,255,.92); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line); display: flex; align-items: center;
  padding: 0 18px 0 0; position: sticky; top: 0; z-index: 40;
}

/* 分区标签条（甲方 2026-10-21 第五版）：距顶部菜单栏 0.1cm（≈4px），
   页签高 0.5cm（≈19px）、字号 10px；首页路由 / 本区没有页签时整条隐藏。
   ★ 2026-10-21 11:18 甲方：「标签页增加一个字号」——
     字号不再写死，改吃 --tab-fs（系统设置「标签页字号」9-18px，默认 12，app.js 写到根元素上）；
     页签高度跟着字号走（字号 + 7px），放大字不会把字挤扁。 */
.page-tabs {
  display: flex; align-items: flex-end; gap: 2px;
  padding: 4px 18px 0; overflow-x: auto; scrollbar-width: thin;
}
/* ★ 默认值必须写在 :root，不能写在 .page-tabs 上 ——
   写在 .page-tabs 上会把 app.js applyTabFont 写到 documentElement 上的值覆盖掉，
   变量永远停在 12px，设置里改了字号也不生效（实测踩过）。 */
:root { --tab-fs: 12px; }
.app-tab {
  display: inline-flex; align-items: center; gap: 1px;
  border: 1px solid var(--line); border-bottom: 0;
  border-radius: 6px 6px 0 0; background: var(--panel-2);
  padding: 0 1px 0 8px; height: calc(var(--tab-fs) + 7px); flex: none; max-width: 200px;
}
.app-tab.on { background: #fff; border-color: var(--brand); color: var(--brand-dark); }
.app-tab-name {
  border: 0; background: none; font-family: inherit; font-size: var(--tab-fs); color: inherit;
  cursor: pointer; padding: 0; max-width: 164px; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap;
}
.app-tab.on .app-tab-name { font-weight: 600; }
.app-tab-x {
  border: 0; background: none; color: #94a3b8; font-size: var(--tab-fs); line-height: 1;
  cursor: pointer; padding: 1px 3px; border-radius: 4px; font-family: inherit;
}
.app-tab-x:hover { background: var(--panel-2); color: #ef4444; }

/* 顶栏里的 Logo 块：原来在左侧栏，现在搬到顶栏最左。
   ★ 宽度必须钉死成 --sidebar-w，跟下面那条 .subnav 同宽，竖线才能一刀到底；
     靠内容撑宽的话（原来就是）会窄出几十像素，上下两条线错位，看着很别扭。
     左右内边距跟着 .subnav 走（10px），Logo 的圆角块才对得上子栏第一个标签。 */
.brand {
  width: var(--sidebar-w); height: 100%; display: flex; align-items: center; justify-content: center;
  padding: 0 10px; margin-right: 6px; flex: none;
  box-sizing: border-box;
  border-right: 1px solid var(--line);
  /* 可点：回工作台（甲方 2026-10-21）。只给手型和聚焦框，外观不动 */
  cursor: pointer; user-select: none;
}
.brand:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; border-radius: 8px; }

/* 首页（甲方 2026-10-21）：进系统第一眼的门面 */
.home-wrap { max-width: 860px; margin: 0 auto; padding: 48px 20px; }
.home-hero {
  background: linear-gradient(135deg, #eef4ff 0%, #f8fbff 60%, #ffffff 100%);
  border: 1px solid #dbe7fb; border-radius: 16px; padding: 48px 40px; text-align: center;
}
.home-hi { font-size: 26px; font-weight: 700; color: #1e293b; letter-spacing: -.02em; }
.home-sub { margin-top: 8px; font-size: 14px; color: #64748b; }
.home-entries { margin-top: 36px; display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }
.home-entry {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  min-width: 220px; padding: 26px 28px; border: 1px solid var(--line); border-radius: 14px;
  background: #fff; cursor: pointer; color: #334155; font-family: inherit;
  transition: box-shadow .15s ease, transform .15s ease;
}
.home-entry:hover { box-shadow: 0 8px 24px rgba(30, 64, 175, .12); transform: translateY(-2px); }
.home-entry .ico, .home-entry svg { color: var(--brand); }
.home-entry-t { font-size: 16px; font-weight: 600; color: #1e293b; }
.home-entry-d { font-size: 12.5px; color: #94a3b8; }
@media (max-width: 720px) {
  .home-wrap { padding: 20px 12px; }
  .home-hero { padding: 32px 18px; }
  .home-entry { width: 100%; }
}
.brand-mark {
  width: 30px; height: 30px; border-radius: 9px; background: var(--brand);
  color: #fff; display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 15px; flex: none;
}
.brand-name { font-weight: 700; font-size: 16px; letter-spacing: -.02em; }
.brand-name small { display: block; font-size: 11px; font-weight: 400; color: var(--muted); letter-spacing: 0; }

/* 顶部主菜单：工作台 / 管理后台 横向排开 */
.mainnav { display: flex; align-items: center; gap: 4px; flex: 1; min-width: 0; }
.mainnav-item {
  display: inline-flex; align-items: center; gap: 8px;
  height: 36px; padding: 0 16px; border-radius: var(--radius-sm);
  border: 0; background: none; color: #334155; font-size: 14px; white-space: nowrap;
  transition: background .15s, color .15s;
}
.mainnav-item:hover { background: var(--panel-2); }
.mainnav-item.active { background: var(--brand-soft); color: var(--brand-dark); font-weight: 600; }
.mainnav-item .nav-badge {
  background: var(--red); color: #fff; font-size: 11px; line-height: 1;
  padding: 3px 6px; border-radius: 999px; font-weight: 600;
}

/* 顶栏下面这一层：左子栏 + 内容 */
.body { flex: 1; display: flex; min-height: 0; }

.subnav {
  width: var(--sidebar-w); flex: none; background: var(--panel);
  border-right: 1px solid var(--line); padding: 12px 10px 20px;
  display: flex; flex-direction: column; gap: 2px;
  position: sticky; top: var(--topbar-h); height: calc(100vh - var(--topbar-h));
  overflow-y: auto;
}
.subnav[hidden] { display: none; }
.subnav-title {
  font-size: 11px; color: var(--muted); letter-spacing: .08em;
  padding: 4px 12px 8px; text-transform: uppercase;
}
.subnav-list { display: flex; flex-direction: column; gap: 2px; }
/* 分组（甲方 2026-10-20：管理后台 → 人事管理下面再挂三个子项）
   抬头是大类名，底下的子项往里缩一层，靠左边一条细线连起来，看着是「挂在它下面」 */
.subnav-group.is-sep {
  margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line);
}
.subnav-group-title {
  font-size: 11px; color: var(--muted); letter-spacing: .08em;
  padding: 2px 12px 6px; text-transform: uppercase;
}
/* 组标题本身也是个入口时（客户管理 / 工程管理 / 材料管理…），做成可点的。
   甲方 2026-10-26 11:42：**主菜单统一规格** —— 所有一级组长得一样：
   图标 + 文字 + 箭头，字体、圆角、内边距、行高全部一致，
   展开时高亮当前组，收起时箭头朝右、展开时朝下。 */
.subnav-group-title.is-pick {
  display: flex; align-items: center; gap: 8px; width: 100%; border: 0; background: none;
  text-align: left; cursor: pointer; text-transform: none;
  font-size: 13px; font-weight: 600; color: #334155; letter-spacing: .01em;
  padding: 8px 10px; border-radius: var(--radius-sm);
  transition: background .15s, color .15s;
  min-height: 36px;
}
.subnav-group-title.is-pick .ico { flex: none; color: #64748b; transition: color .15s; }
.subnav-group-title.is-pick:hover { background: var(--panel-2); color: var(--brand-dark); }
.subnav-group-title.is-pick:hover .ico { color: var(--brand-dark); }
/* 可折叠的组标题（甲方：点一下展开、再点一下收起）：
   右边给箭头，箭头朝右 = 收起（隐藏子项），朝下 = 展开 */
.subnav-group-title.is-pick.is-fold { gap: 8px; }
.subnav-group-title.is-pick.is-fold .subnav-group-text { flex: 1; min-width: 0; }
.subnav-group-title .subnav-chev {
  display: inline-flex; align-items: center; justify-content: center;
  width: 16px; color: #94a3b8; transition: transform .18s;
  transform: rotate(90deg);
}
.subnav-group-title.is-collapsed .subnav-chev { transform: rotate(0deg); }
.subnav-group-title.is-pick.is-fold::after { content: none; }
.subnav-group-title.is-pick.active { color: var(--brand-dark); background: var(--brand-soft); }
.subnav-group-title.is-pick.active .ico { color: var(--brand-dark); }
/* 分组里的子项缩进一级，别跟大类抢视觉 */
.subnav-group .subnav-item {
  padding-left: 30px; font-size: 13.5px;
}
.subnav-group .subnav-item::before {
  content: ''; position: absolute; left: 16px; top: 50%;
  width: 5px; height: 5px; margin-top: -2.5px; border-radius: 50%;
  background: #cbd5e1; transition: background .15s;
}
.subnav-group .subnav-item { position: relative; }
.subnav-group .subnav-item.active::before { background: var(--brand); }
.subnav-item {
  display: flex; align-items: center; gap: 10px; padding: 9px 12px;
  border-radius: var(--radius-sm); border: 0; background: none; width: 100%;
  text-align: left; font-size: 14px; color: #334155;
  transition: background .15s, color .15s;
}
.subnav-item:hover { background: var(--panel-2); }
.subnav-item.active { background: var(--brand-soft); color: var(--brand-dark); font-weight: 600; }
.subnav-item .nav-badge {
  margin-left: auto; background: var(--red); color: #fff; font-size: 11px; line-height: 1;
  padding: 3px 6px; border-radius: 999px; font-weight: 600;
}
.subnav-foot {
  margin-top: auto; padding: 12px; font-size: 12px; color: var(--muted);
  border-top: 1px solid var(--line);
}

.topbar-right { margin-left: auto; display: flex; align-items: center; gap: 8px; flex: none; }

.user-chip {
  display: flex; align-items: center; gap: 8px; padding: 4px 10px 4px 4px;
  border-radius: 999px; border: 1px solid var(--line); background: var(--panel);
}
.user-chip:hover { background: var(--panel-2); }
/* 头像块现在是纯展示（点击弹账号菜单），不是跳转按钮，光标别做成链接手型 */
.user-chip-static { cursor: pointer; }
.user-chip-name { font-size: 13px; font-weight: 500; }
.user-chip-dept { font-size: 11px; color: var(--muted); }

/* 角色切换器：挂多岗的人才看得到。做成贴着顶栏的小下拉，
   一眼能看出"我现在是哪个身份"，换一下菜单和数据范围立刻跟着变 */
.role-switch {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--panel);
  color: var(--sub); font-size: 12px; cursor: pointer;
}
.role-switch:hover { background: var(--panel-2); }
.role-switch select {
  border: 0; background: none; color: var(--text); font-size: 13px;
  font-weight: 500; padding: 0; outline: none; cursor: pointer; font-family: inherit;
}

.icon-btn {
  width: 34px; height: 34px; border-radius: 9px; border: 1px solid transparent;
  background: none; color: var(--sub); display: inline-flex; align-items: center;
  justify-content: center; position: relative; transition: background .15s, color .15s;
}
.icon-btn:hover { background: var(--panel-2); color: var(--text); }
.icon-btn .dot {
  position: absolute; top: 5px; right: 5px; width: 8px; height: 8px; border-radius: 50%;
  background: var(--red); border: 2px solid var(--panel);
}

/* 甲方 2026-10-29 11:06：内容区与网页同宽（原 max-width:1280px 宽屏右边留白） */
#page { padding: 20px 24px; flex: 1; min-width: 0; width: 100%; }

/* 不带页头的内容页（甲方 2026-10-20：管理后台不显示「管理后台」大标题）
   标题信息由左栏承担，内容直接从顶部开始。 */
.cfg-bare { display: block; }

/* ------------------------------------------------------------ 页头 */

.page-head {
  display: flex; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-bottom: 18px;
}
.page-title { font-size: 21px; }
.page-sub { color: var(--sub); font-size: 13px; margin-top: 3px; }
.page-actions { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; }

/* ------------------------------------------------------------ 按钮 */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 8px 15px; border-radius: var(--radius-sm); border: 1px solid var(--line-strong);
  background: var(--panel); color: var(--text); font-size: 13.5px; font-weight: 500;
  transition: all .15s; white-space: nowrap;
}
.btn:hover { background: var(--panel-2); }
.btn:disabled { opacity: .55; cursor: not-allowed; }
.btn-primary { background: var(--brand); border-color: var(--brand); color: #fff; }
.btn-primary:hover { background: var(--brand-dark); border-color: var(--brand-dark); }
.btn-danger { background: var(--red); border-color: var(--red); color: #fff; }
.btn-danger:hover { background: #b91c1c; border-color: #b91c1c; }
.btn-ghost { border-color: var(--line); background: transparent; color: var(--sub); }
.btn-ghost:hover { background: var(--panel-2); color: var(--text); }
.btn-block { width: 100%; }
.btn-lg { padding: 11px 20px; font-size: 15px; border-radius: 10px; }
.btn-sm { padding: 5px 10px; font-size: 12.5px; }

/* ------------------------------------------------------------ 卡片 */

.card {
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}
.card + .card { margin-top: 16px; }
.card-head {
  padding: 14px 18px; border-bottom: 1px solid var(--line); display: flex;
  align-items: center; gap: 10px; flex-wrap: wrap;
}
.card-head h3 { font-size: 15px; }
.card-head .card-actions { margin-left: auto; display: flex; gap: 8px; align-items: center; }
.card-body { padding: 18px; }
.card-body.tight { padding: 0; }

.grid { display: grid; gap: 14px; }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid-side { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); align-items: start; }

/* ------------------------------------------------------------ 统计卡 */

.stat-card {
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 15px 17px; box-shadow: var(--shadow-sm); position: relative; overflow: hidden;
}
.stat-card::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--brand);
}
.stat-card.tone-green::before { background: var(--green); }
.stat-card.tone-amber::before { background: var(--amber); }
.stat-card.tone-red::before { background: var(--red); }
.stat-card.tone-purple::before { background: #7c3aed; }
.stat-top { display: flex; align-items: center; justify-content: space-between; }
.stat-label { font-size: 12.5px; color: var(--sub); }
.stat-ico { color: var(--muted); }
.stat-value { font-size: 26px; font-weight: 700; letter-spacing: -.02em; margin-top: 4px; line-height: 1.2; }
.stat-sub { font-size: 12px; color: var(--muted); margin-top: 2px; }

/* ------------------------------------------------------------ 徽标 */

.badge {
  display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 12px;
  font-weight: 500; line-height: 1.6; white-space: nowrap;
}

/* ------------------------------------------------------------ 表格 */

.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table.tbl { width: 100%; border-collapse: collapse; font-size: 13.5px; min-width: 560px; }
table.tbl th {
  text-align: left; font-weight: 600; color: var(--sub); font-size: 12.5px;
  padding: 10px 14px; border-bottom: 1px solid var(--line); background: var(--panel-2);
  white-space: nowrap;
}
table.tbl td { padding: 12px 14px; border-bottom: 1px solid var(--line); vertical-align: middle; }
table.tbl tr:last-child td { border-bottom: 0; }
table.tbl tbody tr:hover { background: #fbfcfe; }
.td-actions { display: flex; gap: 6px; justify-content: flex-end; }
.cell-main { font-weight: 500; }
.cell-sub { font-size: 12px; color: var(--muted); }
.nowrap { white-space: nowrap; }
.text-right { text-align: right; }

/* 签约明细（甲方 2026-10-28 16:19）：左右字段一律不换行（宽了横向滚动，不折行撑高行），
   文字统一黑色 —— 表头、单元格、里面的次要文字都算。 */
table.tbl-sign th, table.tbl-sign td { white-space: nowrap; color: #000; }
table.tbl-sign td .cell-sub, table.tbl-sign td .cell-main { color: #000; }

/* 签约明细·审计操作列（甲方 2026-11-03 三颗；11-04 加「开工」；11-06 定 2×2 两行不折叠；
   11-07 00:51 改紧凑：甲方「按钮布局太宽，主页面不能看全全部信息」，列宽 380px→168px）。
   四颗操作（项目进度 / 报业绩 / 预派·返款 / 开工，仅审计可见）仍是 2×2 两行、全显示、绝不折叠。
   省宽的关键：网格由 1fr 1fr（均分整列、每栏白占 180px）改成 max-content max-content
   —— 按按钮文字实际宽度算，两栏合计约 120px；column-gap 18→10、按钮 padding 4→3。
   min-width:156px 是硬下限，auto 表格再窄也不会塌（不会溢出粘连/截断）。
   按钮 nowrap、文字链接风格、hover 浅蓝底。仅在审计登录时出现；其它岗位这一列不画。 */
table.tbl-sign th.th-audit { text-align: center; width: 168px; min-width: 156px; }
table.tbl-sign td.td-audit { padding-left: 6px; padding-right: 6px; }
table.tbl-sign td .audit-acts {
  display: grid; grid-template-columns: max-content max-content;
  align-items: center; justify-items: start;
  column-gap: 10px; row-gap: 6px;
}
table.tbl-sign td .audit-acts .btn,
table.tbl-sign td .audit-acts .btn-sm,
table.tbl-sign td .audit-acts .btn-ghost,
table.tbl-sign td .audit-acts .btn-primary {
  border: 0; background: none; padding: 2px 3px; min-width: 0;
  font-size: 12.5px; line-height: 1.4; font-weight: 500;
  color: var(--brand); white-space: nowrap; text-align: left;
  border-radius: 4px; cursor: pointer;
}
table.tbl-sign td .audit-acts .btn-primary { font-weight: 700; }
table.tbl-sign td .audit-acts .btn:hover,
table.tbl-sign td .audit-acts .btn-primary:hover {
  background: var(--brand-soft); color: var(--brand-dark); text-decoration: none;
}

/* 签约明细·行高压缩（甲方 2026-11-04 21:51）：一屏要看到 10 单和分页 */
table.tbl-sign th { padding: 8px 12px; }
table.tbl-sign td { padding: 6px 12px; }

/* 项目进度弹窗·已过的阶段（甲方 2026-11-04：流程不可回退，只留灰标记，不是按钮） */
.stage-passed {
  display: inline-flex; align-items: center;
  padding: 4px 8px; border-radius: 6px;
  background: var(--panel-2); color: var(--muted);
  font-size: 12px; line-height: 1.4;
  border: 1px dashed var(--line);
  cursor: not-allowed; user-select: none;
}

/* 签约明细·渠道返款标记（甲方 2026-11-04 12:45）：非内部自拓且已登记返款的才出现。
   12:58 甲方：标签要落在渠道名**下面**，不跟渠道名并排 → block + fit-content（垫不满整格） */
table.tbl-sign td .rebate-flag {
  display: block; width: fit-content; margin-top: 4px; padding: 1px 6px;
  font-size: 11px; line-height: 1.55; border-radius: 4px; white-space: nowrap;
  color: var(--green); background: rgba(22, 163, 74, .1);
  border: 1px solid rgba(22, 163, 74, .28);
}

/* 预派·返款弹窗（甲方 2026-11-03）：标签在上、输入框铺满一格的紧凑表单 */
.pp-field { display: flex; flex-direction: column; gap: 4px; }
.pp-field > span { font-size: 12px; color: var(--muted); }

/* 报业绩弹窗·只读信息区（甲方 2026-11-04 12:37）：除业绩类型/金额外一律只展示。
   签约时定下来的关系人放在灰底格里，扫一眼就清楚，不再是假输入框。 */
.perf-info {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px 20px; padding: 12px 14px;
  background: var(--panel-2); border: 1px solid var(--line); border-radius: var(--radius-sm);
}
.perf-info-item { display: grid; grid-template-columns: 6em minmax(0, 1fr); gap: 8px; align-items: baseline; min-width: 0; font-size: 13px; }
.perf-info-item > span { color: var(--sub); }
.perf-info-item > b {
  min-width: 0; color: var(--text); font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
@media (max-width: 640px) { .perf-info { grid-template-columns: 1fr; } }
.pp-field > input { width: 100%; }
.rb-row { font-size: 13px; }

/* ------------------------------------------------------------ 列表 */

.list { display: flex; flex-direction: column; }
.list-item {
  padding: 13px 18px; border-bottom: 1px solid var(--line); display: flex; gap: 12px;
  align-items: flex-start; transition: background .15s;
}
.list-item:last-child { border-bottom: 0; }
.list-item:hover { background: #fbfcfe; }
.list-item.unread { background: #f8fbff; }
.list-main { flex: 1; min-width: 0; }
.list-title { font-weight: 500; display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.list-meta { font-size: 12px; color: var(--muted); margin-top: 3px; display: flex; gap: 10px; flex-wrap: wrap; }
.list-text { color: var(--sub); font-size: 13px; margin-top: 5px; word-break: break-word; }

/* ------------------------------------------------------------ 表单 */

.field { display: block; margin-bottom: 14px; }
.field > span { display: block; font-size: 13px; font-weight: 500; margin-bottom: 6px; color: #334155; }
.field > span .req { color: var(--red); margin-left: 2px; }
.field .hint { display: block; font-size: 12px; color: var(--muted); font-style: normal; margin-top: 5px; }
.input {
  width: 100%; padding: 9px 12px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
  background: var(--panel); color: var(--text); transition: border-color .15s, box-shadow .15s;
  outline: none; font-size: 14px;
}
.input:focus { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(37, 99, 235, .12); }
.input.invalid { border-color: var(--red); box-shadow: 0 0 0 3px rgba(220, 38, 38, .1); }
textarea.input { resize: vertical; min-height: 76px; line-height: 1.6; }
select.input { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='%2364748b'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; padding-right: 30px; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 14px; }
.form-grid .span-2 { grid-column: 1 / -1; }
.check-row { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: #334155; }
.check-row input { width: 16px; height: 16px; accent-color: var(--brand); }

/* ------------------------------------------------------------ 标签页 / 搜索 */

.toolbar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 14px; }
.tabs { display: flex; gap: 4px; overflow-x: auto; padding: 3px; background: var(--panel-2);
  border: 1px solid var(--line); border-radius: 10px; scrollbar-width: none; }
/* 系统设置 6 页签（甲方 2026-10-31 23:14）：页签与下面卡片之间留口，宽度跟卡片对齐 */
#cfg-body .tabs { margin-bottom: 14px; max-width: 680px; }
.tabs::-webkit-scrollbar { display: none; }
.tab {
  border: 0; background: none; padding: 6px 13px; border-radius: 7px; font-size: 13.5px;
  color: var(--sub); white-space: nowrap; display: inline-flex; align-items: center; gap: 6px;
  transition: all .15s;
}
.tab:hover { color: var(--text); }
.tab.active { background: var(--panel); color: var(--brand-dark); font-weight: 600; box-shadow: var(--shadow-sm); }
.tab-count {
  background: var(--line); color: var(--sub); font-size: 11px; padding: 1px 6px;
  border-radius: 999px; line-height: 1.6;
}
.tab.active .tab-count { background: var(--brand); color: #fff; }

.search-box { position: relative; flex: 1; min-width: 180px; max-width: 340px; }
.search-box .ico { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); color: var(--muted); }
.search-box .input { padding-left: 34px; }
.seg { display: flex; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); overflow: hidden; }
.seg button { border: 0; background: var(--panel); padding: 8px 14px; font-size: 13px; color: var(--sub); }
.seg button + button { border-left: 1px solid var(--line); }
.seg button.active { background: var(--brand); color: #fff; }

/* ------------------------------------------------------------ 空态 / 骨架 */

.empty { padding: 52px 20px; text-align: center; color: var(--muted); }
.empty-ico { color: var(--line-strong); margin-bottom: 8px; }
.empty p { font-size: 13.5px; margin-bottom: 12px; }
.loading-row { padding: 40px; text-align: center; color: var(--muted); font-size: 13px; }
.spinner {
  display: inline-block; width: 14px; height: 14px; border: 2px solid var(--line-strong);
  border-top-color: var(--brand); border-radius: 50%; animation: spin .7s linear infinite;
  vertical-align: -2px; margin-right: 8px;
}
@keyframes spin { to { transform: rotate(360deg); } }

.skeleton-wrap { display: flex; flex-direction: column; gap: 14px; }
.skeleton-card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; }
.sk-line { height: 12px; border-radius: 6px; background: linear-gradient(90deg, #eef2f7, #e2e8f0, #eef2f7); background-size: 200% 100%; animation: shimmer 1.3s infinite; margin-bottom: 10px; }
.sk-line:last-child { margin-bottom: 0; }
.w40 { width: 40%; } .w60 { width: 60%; } .w80 { width: 80%; }
@keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

/* ------------------------------------------------------------ 详情表 */

.detail-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.detail-table th {
  text-align: left; font-weight: 500; color: var(--sub); width: 96px;
  padding: 7px 10px 7px 0; vertical-align: top; white-space: nowrap;
}
.detail-table td { padding: 7px 0; vertical-align: top; word-break: break-word; }
.detail-text {
  background: var(--panel-2); border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: 12px 14px; color: #334155; word-break: break-word; white-space: pre-wrap;
}
.overdue { color: var(--red); font-weight: 500; }

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

.toast-wrap { position: fixed; top: 16px; left: 50%; transform: translateX(-50%); z-index: 200; display: flex; flex-direction: column; gap: 8px; align-items: center; pointer-events: none; width: max-content; max-width: 92vw; }
.toast {
  display: flex; align-items: center; gap: 8px; background: #1e293b; color: #fff;
  padding: 10px 16px; border-radius: 10px; font-size: 13.5px; box-shadow: var(--shadow-lg);
  opacity: 0; transform: translateY(-8px); transition: all .22s; max-width: 92vw;
}
.toast.in { opacity: 1; transform: translateY(0); }
.toast-success { background: #15803d; }
.toast-error { background: #b91c1c; }

/* ------------------------------------------------------------ 弹层 */

.modal-mask {
  position: fixed; inset: 0; background: rgba(15, 23, 42, .45); z-index: 150;
  display: flex; align-items: center; justify-content: center; padding: 20px;
  opacity: 0; transition: opacity .2s; overflow-y: auto;
}
.modal-mask.in { opacity: 1; }
.modal {
  background: var(--panel); border-radius: 14px; width: 100%; max-width: 480px;
  box-shadow: var(--shadow-lg); transform: translateY(12px) scale(.98); transition: transform .2s;
  max-height: 88vh; display: flex; flex-direction: column; margin: auto;
}
.modal-wide { max-width: 680px; }
.modal-mask.in .modal { transform: translateY(0) scale(1); }
.modal-head { padding: 16px 18px; border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: 10px; flex: none; }
.modal-head h3 { font-size: 16px; flex: 1; }
.modal-body { padding: 18px; overflow-y: auto; }
.modal-foot { padding: 14px 18px; border-top: 1px solid var(--line); display: flex; justify-content: flex-end; gap: 8px; flex: none; }
.confirm-text { font-size: 14px; }
.confirm-detail { font-size: 13px; color: var(--sub); margin-top: 8px; }

/* ------------------------------------------------------------ 头像 */

.avatar {
  display: inline-flex; align-items: center; justify-content: center; border-radius: 50%;
  color: #fff; font-weight: 600; flex: none; user-select: none;
}

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

.login-wrap { min-height: 100vh; display: flex; }
.login-side {
  flex: 1; background: linear-gradient(150deg, #1e3a8a 0%, #2563eb 55%, #3b82f6 100%);
  color: #fff; padding: 48px; display: flex; flex-direction: column; justify-content: space-between;
  position: relative; overflow: hidden;
}
.login-side::after {
  content: ''; position: absolute; width: 460px; height: 460px; border-radius: 50%;
  background: rgba(255,255,255,.07); right: -140px; bottom: -160px;
}
.login-side::before {
  content: ''; position: absolute; width: 260px; height: 260px; border-radius: 50%;
  background: rgba(255,255,255,.05); right: 90px; top: -110px;
}
.login-side h1 { font-size: 32px; letter-spacing: -.02em; line-height: 1.5; max-width: 460px; }
.login-side .lead { margin-top: 14px; font-size: 15px; opacity: .9; max-width: 420px; line-height: 1.8; }
.login-foot { font-size: 12.5px; opacity: .7; position: relative; z-index: 1; }
.login-form-side { width: 440px; flex: none; background: var(--panel); display: flex; align-items: center; justify-content: center; padding: 32px; }
.login-box { width: 100%; max-width: 330px; }
.login-box h2 { font-size: 22px; }
.login-box .sub { color: var(--sub); font-size: 13.5px; margin: 6px 0 22px; }
.login-switch { margin-top: 16px; font-size: 13px; color: var(--sub); text-align: center; }
.login-switch button { border: 0; background: none; color: var(--brand); font-weight: 500; padding: 0; }

/* ------------------------------------------------------------ 打卡面板 */

.punch-panel { text-align: center; padding: 26px 18px; }
.punch-time { font-size: 44px; font-weight: 700; letter-spacing: -.03em; font-variant-numeric: tabular-nums; line-height: 1.1; }
.punch-date { color: var(--sub); font-size: 13.5px; margin-top: 4px; }
.punch-status { margin-top: 18px; display: flex; justify-content: center; gap: 30px; }
.punch-item { text-align: center; }
.punch-item .k { font-size: 12px; color: var(--muted); }
.punch-item .v { font-size: 18px; font-weight: 600; font-variant-numeric: tabular-nums; margin-top: 2px; }
.punch-actions { margin-top: 22px; display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }

/* ------------------------------------------------------------ 进度条 */

.progress { height: 6px; background: var(--line); border-radius: 999px; overflow: hidden; }
.progress > i { display: block; height: 100%; background: var(--brand); border-radius: 999px; transition: width .3s; }

/* ------------------------------------------------------------ 任务看板 */

.kanban { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; align-items: start; }
.kanban-col { background: var(--panel-2); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px; min-height: 120px; }
.kanban-head { display: flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 600; margin-bottom: 10px; padding: 0 2px; }
.kanban-head .n { margin-left: auto; color: var(--muted); font-weight: 500; font-size: 12.5px; }
.task-card {
  background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 12px;
  margin-bottom: 9px; box-shadow: var(--shadow-sm); cursor: pointer; transition: all .15s;
}
.task-card:hover { border-color: var(--brand); box-shadow: var(--shadow); transform: translateY(-1px); }
.task-card h4 { font-size: 13.8px; font-weight: 600; line-height: 1.5; }
.task-card .meta { display: flex; align-items: center; gap: 8px; margin-top: 9px; font-size: 12px; color: var(--muted); flex-wrap: wrap; }
.task-card .overdue { color: var(--red); font-weight: 500; }

/* ------------------------------------------------------------ 统计条 */

.bar-row { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; font-size: 13px; }
.bar-row .k { width: 64px; color: var(--sub); flex: none; }
.bar-row .bar { flex: 1; height: 8px; background: var(--line); border-radius: 999px; overflow: hidden; }
.bar-row .bar > i { display: block; height: 100%; border-radius: 999px; }
.bar-row .v { width: 46px; text-align: right; font-variant-numeric: tabular-nums; color: var(--sub); flex: none; }

/* ------------------------------------------------------------ 通讯录 */

.contact-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
.contact-card {
  display: flex; gap: 11px; align-items: center; padding: 13px; background: var(--panel);
  border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm);
}
.contact-card .info { min-width: 0; }
.contact-card .nm { font-weight: 600; font-size: 14px; }
.contact-card .ti { font-size: 12px; color: var(--muted); }
.contact-card .ph { font-size: 12px; color: var(--sub); margin-top: 2px; }

/* ------------------------------------------------------------ 移动端底部导航 */

.tabbar { display: none; }

/* ==========================================================================
   响应式 —— 移动端
   ========================================================================== */

@media (max-width: 1024px) {
  .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-side { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
  :root { --radius: 11px; }

  /* 手机端甲方说「暂时不做」，所以这里只保证不崩、能看清：
     左子栏收窄成一列窄条（图标 + 小字），顶栏 Logo 只留方块。
     ★ 品牌宽度得跟着子栏一起收成 92px，不然那条竖线又错位了。 */
  .topbar { padding: 0 10px 0 0; gap: 6px; }
  .brand { width: 92px; padding: 0 6px; margin-right: 2px; gap: 6px; }
  .brand-name { display: none; }
  .mainnav-item { padding: 0 10px; font-size: 13px; }
  .subnav { width: 92px; padding: 8px 6px 12px; }
  .subnav-title { display: none; }
  .subnav-item { padding: 8px 8px; font-size: 12.5px; gap: 6px; flex-direction: column; text-align: center; }
  .subnav-item .nav-badge { margin-left: 0; position: absolute; top: 2px; right: 2px; }
  .subnav-item { position: relative; }
  /* 手机端窄条里放不下缩进和抬头，分组只留一条分隔线 */
  .subnav-group.is-sep { margin-top: 6px; padding-top: 6px; }
  /* 手机上是横滑的窄条，折叠没意义：组标题压成一行小字，子项一律摊平 */
  .subnav-group-title.is-pick { white-space: nowrap; padding: 4px 6px; font-size: 12px; }
  .subnav-group-title.is-pick.is-fold .subnav-chev { display: none; }
  .subnav-group[data-group-box] .subnav-item { padding-left: 8px; }
  .subnav-group .subnav-item { padding-left: 8px; }
  .subnav-group .subnav-item::before { display: none; }
  .user-chip-name, .user-chip-dept { display: none; }
  .user-chip { padding: 3px; border: 0; }
  #page { padding: 12px 12px 20px; }

  .tabbar {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
    background: rgba(255,255,255,.97); backdrop-filter: blur(10px);
    border-top: 1px solid var(--line); padding-bottom: env(safe-area-inset-bottom);
  }
  /* 底栏是空的（手机端页签全部撤掉）时整条不显示，别留一条白条和 58px 空白 */
  .tabbar[hidden] { display: none; }
  .layout.no-tabbar .main { padding-bottom: 0; }
  .tabbar button {
    flex: 1; border: 0; background: none; padding: 7px 2px 6px; display: flex;
    flex-direction: column; align-items: center; gap: 2px; color: var(--muted);
    font-size: 10.5px; position: relative;
  }
  .tabbar button.active { color: var(--brand); }
  .tabbar button .badge-dot {
    position: absolute; top: 5px; left: 50%; margin-left: 6px; min-width: 15px; height: 15px;
    background: var(--red); color: #fff; border-radius: 999px; font-size: 10px; line-height: 15px;
    padding: 0 4px;
  }

  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .kanban { grid-template-columns: 1fr; }
  .form-grid { grid-template-columns: 1fr; }
  .page-head { align-items: flex-start; }
  .page-actions { margin-left: 0; width: 100%; }
  .page-actions .btn { flex: 1; }
  .search-box { max-width: none; width: 100%; }
  .toolbar { gap: 8px; }

  table.tbl { min-width: 480px; font-size: 13px; }
  table.tbl th, table.tbl td { padding: 10px; }

  .modal-mask { padding: 0; align-items: flex-end; }
  .modal { max-width: none; border-radius: 16px 16px 0 0; max-height: 92vh; }
  .modal-mask.in .modal { transform: translateY(0); }
  .modal-foot { padding-bottom: calc(14px + env(safe-area-inset-bottom)); }
  .modal-foot .btn { flex: 1; }

  .login-wrap { flex-direction: column; }
  .login-side { padding: 28px 22px; min-height: auto; }
  .login-side h1 { font-size: 23px; }
  .login-foot { display: none; }
  .login-form-side { width: 100%; flex: 1; padding: 26px 20px; align-items: flex-start; }
  .login-box { max-width: none; }

  .punch-time { font-size: 38px; }
  .list-item { padding: 12px 14px; }
  .card-body { padding: 14px; }
  .card-head { padding: 12px 14px; }
  .toast-wrap { top: 10px; }
}

@media (max-width: 380px) {
  .tabbar button { font-size: 10px; }
  .punch-status { gap: 20px; }
}

/* 打印 */
@media print {
  .topbar, .subnav, .tabbar, .page-actions, .toolbar { display: none !important; }
}

/* ==========================================================================
   一期主线：客户 / 外联推荐 / 渠道 / 配置中心
   ========================================================================== */

/* ------------------------------------------------------------ 补充色调 */
.stat-card.tone-teal::before { background: #0d9488; }
.stat-card.tone-coral::before { background: #ea580c; }
.stat-card.tone-gray::before { background: #64748b; }

/* ------------------------------------------------------------ 字段网格 */
.kv-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 10px 18px; }
.kv-cell { display: flex; gap: 8px; font-size: 13.5px; min-width: 0; align-items: baseline; }
.kv-k { color: var(--muted); flex: none; width: 74px; font-size: 12.5px; }
.kv-v { color: var(--text); word-break: break-word; min-width: 0; }
.kv-grid.cols-1 { grid-template-columns: 1fr; }

/* ------------------------------------------------------------ 指标块 */
.metric {
  background: var(--panel-2); border: 1px solid var(--line); border-radius: 10px;
  padding: 11px 13px; display: flex; flex-direction: column; gap: 1px;
}
.metric-k { font-size: 12px; color: var(--sub); }
.metric-v { font-size: 21px; font-weight: 700; letter-spacing: -.02em; line-height: 1.25; }
.metric-s { font-size: 11.5px; color: var(--muted); }
.metric-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(112px, 1fr)); gap: 10px; }

/* ------------------------------------------------------------ 排行条 */
.ranking { display: flex; flex-direction: column; gap: 9px; }
.rank-row { display: flex; align-items: center; gap: 10px; font-size: 13px; }
.rank-name {
  width: 108px; flex: none; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; color: #334155;
}
.rank-bar { flex: 1; height: 8px; background: var(--line); border-radius: 999px; overflow: hidden; min-width: 40px; }
.rank-bar > i { display: block; height: 100%; border-radius: 999px; transition: width .3s; }
.rank-val {
  width: 74px; text-align: right; flex: none; font-variant-numeric: tabular-nums;
  font-weight: 600; color: var(--text);
}

/* ------------------------------------------------------------ 时间线 */
.timeline { position: relative; padding-left: 4px; }
.tl-item { position: relative; padding: 0 0 18px 30px; }
.tl-item::before {
  content: ''; position: absolute; left: 11px; top: 24px; bottom: 0; width: 2px; background: var(--line);
}
.tl-item:last-child { padding-bottom: 0; }
.tl-item:last-child::before { display: none; }
.tl-dot {
  position: absolute; left: 0; top: 2px; width: 24px; height: 24px; border-radius: 50%;
  background: var(--panel-2); border: 1px solid var(--line); color: var(--sub);
  display: flex; align-items: center; justify-content: center; z-index: 1;
}
.tl-item.side-channel .tl-dot { background: #fffbeb; border-color: #fde68a; color: #b45309; }
.tl-item.is-milestone .tl-dot { background: var(--brand-soft); border-color: #bfdbfe; color: var(--brand-dark); }
.tl-body { min-width: 0; }
.tl-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.tl-head strong { font-size: 13.8px; }
.tl-time { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.tl-text { font-size: 13px; color: #334155; margin-top: 4px; line-height: 1.7; word-break: break-word; white-space: pre-wrap; }
.tl-who { font-size: 11.5px; color: var(--muted); margin-top: 3px; }

/* ------------------------------------------- 横向流程条（合同详情 · 合同流程）
   甲方 2026-10-28 21:47：合同流程改横向 —— 三步并排，省高度，一眼看到走到哪一步。
   有时间的步骤算「已完成」（品牌色 + 对勾位），没时间是「待办」（灰底）。 */
.flow-steps { display: flex; align-items: stretch; gap: 6px; flex-wrap: nowrap; }
.flow-step {
  flex: 1 1 0; min-width: 0;
  background: var(--panel-2); border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: 9px 12px; display: flex; flex-direction: column; justify-content: center;
}
.flow-step.is-done { background: var(--brand-soft); border-color: #bfdbfe; }
.flow-step.is-todo { background: #fff; }
.fs-head { display: flex; align-items: center; gap: 7px; min-width: 0; }
.fs-no {
  width: 18px; height: 18px; flex: none; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 11.5px; font-weight: 700;
  background: var(--line-strong); color: #fff;
}
.flow-step.is-done .fs-no { background: var(--brand); }
.fs-name { font-size: 13.5px; font-weight: 600; color: #000; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fs-time { font-size: 12px; color: #334155; margin-top: 3px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.flow-step.is-todo .fs-time { color: var(--muted); }
.fs-arrow { flex: none; display: flex; align-items: center; color: var(--line-strong); font-size: 18px; line-height: 1; }
@media (max-width: 720px) {
  /* 手机窄屏：三步挤不下就竖排，箭头（›）转 90 度朝下 */
  .flow-steps { flex-direction: column; }
  .fs-arrow { justify-content: center; transform: rotate(90deg); }
}

/* ------------------------------------------------------------ 分页 */
.pager {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 12px 16px; border-top: 1px solid var(--line);
}
.pager-info { font-size: 12.5px; color: var(--muted); }
.pager-btns { margin-left: auto; display: flex; gap: 4px; flex-wrap: wrap; }
.pg {
  min-width: 32px; height: 32px; padding: 0 9px; border: 1px solid var(--line);
  background: var(--panel); border-radius: 8px; font-size: 13px; color: var(--sub);
}
.pg:hover:not(:disabled) { border-color: var(--line-strong); color: var(--text); }
.pg.active { background: var(--brand); border-color: var(--brand); color: #fff; font-weight: 600; }
.pg:disabled { opacity: .45; cursor: not-allowed; }

/* 右下角跳页（甲方 2026-11-04 22:05：签约明细页码区加页面跳转） */
.pager-jump {
  display: inline-flex; align-items: center; gap: 6px; flex: none;
  font-size: 12.5px; color: var(--muted); white-space: nowrap;
}
.pager-jump .pg-jump {
  width: 58px; height: 32px; padding: 0 6px; text-align: center;
  border: 1px solid var(--line); border-radius: 8px; background: var(--panel);
  font-size: 13px; color: var(--text);
}
.pager-jump .pg-jump:focus { outline: none; border-color: var(--brand); }
.pager-jump .pg-jump-go { height: 32px; padding: 0 10px; }

/* ------------------------------------------------------------ 筛选条 */
.filter-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 12px; }
.input-sm { padding: 7px 11px; font-size: 13px; }
select.input-sm { padding-right: 28px; }
.filter-row .search-box { position: relative; flex: none; width: 240px; max-width: 100%; }
.filter-row .search-box .input { width: 100%; }
.filter-row .spacer { flex: 1; }
/* .input 默认 width:100%，进 flex 换行行会被按整行断行再拉满，筛选下拉必须压回内容宽 */
.filter-row > select.input-sm { width: auto; flex: 0 1 auto; max-width: 230px; }
.filter-row > input[type='date'].input-sm { width: auto; flex: 0 0 140px; }

/* 分段选择 */
.seg-wrap {
  display: inline-flex; gap: 3px; padding: 3px; background: var(--panel-2);
  border: 1px solid var(--line); border-radius: 10px; overflow-x: auto; max-width: 100%;
  scrollbar-width: none;
}
.seg-wrap::-webkit-scrollbar { display: none; }
.seg-btn {
  border: 0; background: none; padding: 6px 13px; border-radius: 7px; font-size: 13px;
  color: var(--sub); white-space: nowrap; display: inline-flex; align-items: center; gap: 5px;
  transition: all .15s;
}
.seg-btn:hover { color: var(--text); }
.seg-btn.active { background: var(--panel); color: var(--brand-dark); font-weight: 600; box-shadow: var(--shadow-sm); }
.seg-btn b { font-weight: 600; background: var(--line); color: var(--sub); font-size: 11px;
  padding: 0 5px; border-radius: 999px; line-height: 1.7; }
.seg-btn.active b { background: var(--brand); color: #fff; }

/* ------------------------------------------------------------ 树 */
.tree { padding: 4px 0; }
.tree-row {
  display: flex; align-items: center; gap: 7px; padding: 7px 12px; border-radius: 8px;
  font-size: 13.5px; cursor: default; min-height: 36px;
}
.tree-row:hover { background: var(--panel-2); }
.tree-row.active { background: var(--brand-soft); }
.tree-row.active .tree-name { color: var(--brand-dark); font-weight: 600; }
.tree-toggle {
  width: 20px; height: 20px; border: 0; background: none; color: var(--muted);
  display: inline-flex; align-items: center; justify-content: center; border-radius: 5px;
  flex: none; padding: 0;
}
.tree-toggle .ico { transition: transform .18s; }
.tree-toggle.open .ico { transform: rotate(90deg); }
.tree-toggle.ghost { cursor: default; }
.tree-icon { color: var(--muted); display: inline-flex; flex: none; }
.tree-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tree-tail { margin-left: auto; display: flex; align-items: center; gap: 6px; flex: none; }

/* 组织树：名称是真链接（甲方要「每个组织都有自己的地址」），
   所以 a.tree-name 要抹掉默认的下划线 / 蓝色，看起来跟普通节点一样 */
a.tree-name { color: inherit; text-decoration: none; display: block; }
a.tree-name:hover { color: var(--brand-dark); }

/* 组织树只显示架构和名称（甲方第 3 条）—— 节点整行可点，走这个 <a> */
.tree-row:has(a.tree-name) { cursor: pointer; }
.tree-row.is-off .tree-name { color: #b45309; }
.tree-row.is-off .tree-icon { color: #d97706; }
.tree-row.is-dead .tree-name { color: #94a3b8; text-decoration: line-through; }
.tree-row.is-dead .tree-icon { color: #cbd5e1; }

/* 组织详情页的面包屑：组织架构 / 公司总部 / 工程部 */
.org-crumb {
  display: flex; align-items: center; flex-wrap: wrap; gap: 6px;
  font-size: 13px; color: var(--muted); margin-bottom: 10px;
}
.org-crumb a { color: var(--muted); text-decoration: none; }
.org-crumb a:hover { color: var(--brand-dark); text-decoration: underline; }
.org-crumb .sep { color: #cbd5e1; }
.org-crumb span:last-child { color: #334155; font-weight: 600; }

/* 页面标题右边挂的状态章 */
.page-title .badge, .page-title .pill { margin-left: 8px; vertical-align: 3px; }

/* 左树右内容 */
.split { display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: 14px; align-items: start; }
.split-wide { grid-template-columns: 380px minmax(0, 1fr); }
.split-side { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow-sm); max-height: 74vh; overflow: auto; }
.split-side-head {
  padding: 12px 14px; border-bottom: 1px solid var(--line); display: flex; align-items: center;
  gap: 8px; position: sticky; top: 0; background: var(--panel); z-index: 2;
}
.split-side-head h3 { font-size: 14px; }
.split-side-head .card-actions { margin-left: auto; display: flex; gap: 6px; }

/* ------------------------------------------------------------ 权限矩阵 */
.perm-group { border-top: 1px solid var(--line); }
.perm-group:first-child { border-top: 0; }
.perm-group-head {
  display: flex; align-items: center; gap: 8px; padding: 10px 0 8px; font-size: 13.5px; font-weight: 600;
}
.perm-group-head .n { color: var(--muted); font-weight: 500; font-size: 12px; }
.perm-group-head .sp { margin-left: auto; }
.perm-group-head button {
  border: 0; background: none; color: var(--brand); font-size: 12.5px; padding: 0; font-weight: 500;
}
.perm-item {
  display: flex; align-items: flex-start; gap: 10px; padding: 8px 0 8px 4px; font-size: 13px;
  border-top: 1px dashed var(--line);
}
.perm-item .chk { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; cursor: pointer; }
.perm-item input[type=checkbox] { width: 16px; height: 16px; accent-color: var(--brand); flex: none; margin-top: 2px; }
.perm-item .nm { font-weight: 500; }
.perm-item .ds { display: block; font-size: 11.5px; color: var(--muted); font-weight: 400; line-height: 1.6; }
.perm-item .sc { flex: none; width: 128px; }
.perm-item.locked { opacity: .62; }
.perm-tag {
  font-size: 10.5px; padding: 1px 5px; border-radius: 5px; background: var(--panel-2);
  color: var(--muted); border: 1px solid var(--line); margin-left: 5px;
}

/* ------------------------------------------------------------ 客户卡 */
.cust-card {
  background: var(--panel); border: 1px solid var(--line); border-radius: 10px;
  padding: 13px 15px; box-shadow: var(--shadow-sm); cursor: pointer; transition: all .15s;
}
.cust-card:hover { border-color: var(--brand); box-shadow: var(--shadow); transform: translateY(-1px); }
.cust-card + .cust-card { margin-top: 10px; }
.cust-card-top { display: flex; align-items: flex-start; gap: 10px; flex-wrap: wrap; }
.cust-card-name { font-size: 14.5px; font-weight: 600; }
.cust-card-tags { display: flex; gap: 5px; flex-wrap: wrap; margin-left: auto; }
.cust-card-meta {
  display: flex; gap: 14px; flex-wrap: wrap; margin-top: 7px;
  font-size: 12.5px; color: var(--sub);
}
.cust-card-meta span { display: inline-flex; align-items: center; gap: 4px; }
.cust-card-amt { color: var(--red); font-weight: 600; }
.cust-list { display: flex; flex-direction: column; }

/* 该跟进了：左侧一条红带，扫一眼就能从一屏里挑出来 */
.cust-card.is-overdue {
  border-left: 3px solid var(--red);
  background: linear-gradient(90deg, rgba(220, 38, 38, .045), transparent 42%);
}
.cust-card .overdue { color: var(--red); font-weight: 600; }

/* ------------------------------------------------------------ 客户详情：下一步 */
.cust-next {
  border: 1px solid var(--line); border-left: 3px solid var(--brand);
  background: var(--brand-soft); border-radius: 10px; padding: 12px 15px; margin-bottom: 16px;
}
.cust-next.is-overdue {
  border-left-color: var(--red);
  background: linear-gradient(90deg, rgba(220, 38, 38, .07), transparent 55%);
}
.cust-next-k {
  display: flex; align-items: center; gap: 5px;
  font-size: 12px; font-weight: 600; color: var(--brand-dark);
}
.cust-next.is-overdue .cust-next-k { color: var(--red); }
.cust-next-v { font-size: 15px; font-weight: 600; margin-top: 5px; line-height: 1.5; }
.cust-next-s { font-size: 12px; color: var(--sub); margin-top: 5px; }

/* ------------------------------------------------------------ 客户详情：三块并排面板 */
.cust-panels { display: grid; grid-template-columns: 1.25fr 1fr; gap: 14px; margin: 4px 0 16px; }
.cust-panel { border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: var(--panel); }
.cust-panel-h {
  display: flex; align-items: center; gap: 8px;
  padding: 9px 14px; background: var(--panel-2); border-bottom: 1px solid var(--line);
  font-size: 13px; font-weight: 600;
}
.cust-panel-tag {
  font-size: 10.5px; font-weight: 400; padding: 1px 6px; border-radius: 5px;
  color: var(--amber); background: rgba(217, 119, 6, .1); border: 1px solid rgba(217, 119, 6, .25);
}
.cust-panel-b { padding: 4px 0; }

/* 房屋：一个客户可能好几套，每套一行标题 + 六个字段（甲方 2026-10-31） */
.panel-spacer { flex: 1; }
.house-empty { padding: 14px; font-size: 12.5px; }
.house-item + .house-item { border-top: 1px dotted var(--line-strong); }
.house-h { display: flex; align-items: center; gap: 6px; padding: 12px 14px 2px; font-size: 12.5px; flex-wrap: wrap; }
.house-h .btn-xs { padding: 2px 7px; font-size: 11.5px; }
.house-no { font-weight: 600; }
.house-label { color: var(--sub); }
.house-pj {
  display: inline-flex; align-items: center; gap: 3px;
  font-size: 11.5px; padding: 1px 6px; border-radius: 5px;
  color: var(--brand-dark); background: var(--brand-soft); border: 1px solid rgba(37, 99, 235, .22);
}
.house-pj.is-empty { color: var(--muted); background: transparent; border-color: var(--line); }
.house-b { padding: 4px 14px 12px; }

.cust-money-row {
  display: flex; align-items: baseline; gap: 8px;
  padding: 8px 14px; border-bottom: 1px dashed var(--line);
}
.cust-money-row:last-child { border-bottom: none; }
.cm-k { font-size: 12.5px; color: var(--sub); width: 68px; flex: none; }
.cm-v { font-size: 15px; font-weight: 700; }
.cm-v.is-empty { color: var(--muted); font-weight: 400; }
.cm-d { margin-left: auto; font-size: 11.5px; }
.cust-money-diff {
  padding: 8px 14px 10px; font-size: 12px; border-top: 1px solid var(--line);
  background: var(--panel-2);
}

/* 流程条：走过的实心、当前一档描边高亮 */
.flow-step.is-done { border-color: var(--brand); background: var(--brand-soft); }
.flow-step.is-done .fs-k { color: var(--brand-dark); }
.flow-step.is-cur { border-color: var(--brand); border-style: dashed; }
.flow-step.is-cur .fs-s { color: var(--brand); font-weight: 600; }

/* 表单里的分组小标题：房屋信息、金额这类，把长表单切开好读 */
.form-sep {
  display: flex; align-items: center; gap: 10px;
  margin: 18px 0 12px; font-size: 12.5px; font-weight: 600; color: var(--sub);
}
.form-sep::after { content: ''; flex: 1; height: 1px; background: var(--line); }

/* 筛选行里的复选框 */
.chk-inline {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; color: var(--sub); cursor: pointer; white-space: nowrap;
}
.chk-inline input { cursor: pointer; }

/* ------------------------------------------------------------ 工作台：今天该跟的客户 */
.wb-group { padding: 10px 0; border-bottom: 1px dashed var(--line); }
.wb-group:last-child { border-bottom: none; }
.wb-group-h {
  display: flex; align-items: center; gap: 7px;
  font-size: 12.5px; font-weight: 600; padding: 0 2px 6px;
}
.wb-group-h b { color: var(--brand); }
.wb-group-h .cell-sub { margin-left: auto; font-weight: 400; }
.wb-dot { width: 7px; height: 7px; border-radius: 50%; flex: none; }
.wb-dot.tone-red { background: var(--red); }
.wb-dot.tone-green { background: #16a34a; }
.wb-dot.tone-amber { background: var(--amber); }
.wb-row {
  display: flex; align-items: baseline; gap: 10px;
  padding: 7px 10px; border-radius: 8px; cursor: pointer; transition: background .12s;
}
.wb-row:hover { background: var(--brand-soft); }
.wb-name { font-size: 13.5px; font-weight: 600; flex: none; }
.wb-sub { font-size: 12px; color: var(--sub); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wb-phone { font-size: 12px; color: var(--muted); flex: none; }

/* ------------------------------------------------------------ 看板 */
.board-months { display: flex; gap: 12px; align-items: flex-end; height: 168px; padding: 8px 4px 0; overflow-x: auto; }
.bm-col { flex: 1; min-width: 52px; display: flex; flex-direction: column; align-items: center; gap: 6px; height: 100%; }
.bm-stack { flex: 1; width: 100%; display: flex; align-items: flex-end; justify-content: center; gap: 3px; }
.bm-bar { width: 14px; border-radius: 4px 4px 0 0; min-height: 2px; transition: height .3s; }
.bm-label { font-size: 11px; color: var(--muted); white-space: nowrap; }
.bm-legend { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12px; color: var(--sub); margin-top: 10px; }
.bm-legend i { display: inline-block; width: 9px; height: 9px; border-radius: 3px; margin-right: 5px; }

.flow-steps { display: flex; align-items: center; gap: 0; flex-wrap: wrap; }
.flow-step {
  flex: 1; min-width: 96px; padding: 12px 14px; background: var(--panel-2);
  border: 1px solid var(--line); border-radius: 10px; position: relative;
}
.flow-step + .flow-step { margin-left: 22px; }
.flow-step + .flow-step::before {
  content: ''; position: absolute; left: -18px; top: 50%; width: 14px; height: 2px; background: var(--line-strong);
}
.flow-step .fs-k { font-size: 12px; color: var(--sub); }
.flow-step .fs-v { font-size: 20px; font-weight: 700; letter-spacing: -.02em; margin-top: 2px; }
.flow-step .fs-s { font-size: 11.5px; color: var(--muted); }

/* ------------------------------------------------------------ 渠道商卡 */
.ch-card {
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 15px 17px; box-shadow: var(--shadow-sm); transition: all .15s;
}
.ch-card.selected { border-color: var(--brand); box-shadow: 0 0 0 2px var(--brand-soft); }
.ch-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ch-name { font-size: 15px; font-weight: 600; }
.ch-head .ch-tags { margin-left: auto; display: flex; gap: 5px; }
.ch-lv { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 11px; }
.ch-lv-chip {
  display: flex; flex-direction: column; gap: 1px; padding: 7px 12px; border-radius: 9px;
  background: var(--panel-2); border: 1px solid var(--line); min-width: 74px;
}
.ch-lv-chip b { font-size: 16px; font-weight: 700; }
.ch-lv-chip span { font-size: 11px; color: var(--muted); }
.ch-acts { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--line); }

/* ------------------------------------------------------------ 外联端 */
.portal { min-height: 100vh; background: var(--bg); display: flex; flex-direction: column; }
.portal-head {
  background: linear-gradient(140deg, #1e3a8a 0%, #2563eb 100%); color: #fff;
  padding: 18px 18px 22px; position: relative; overflow: hidden;
}
.portal-head::after {
  content: ''; position: absolute; width: 220px; height: 220px; border-radius: 50%;
  background: rgba(255,255,255,.08); right: -80px; top: -100px;
}
.portal-head-top { display: flex; align-items: center; gap: 10px; position: relative; z-index: 1; }
.portal-brand { font-weight: 700; font-size: 15px; letter-spacing: .02em; display: flex; align-items: center; gap: 8px; }
.portal-brand .mark {
  width: 28px; height: 28px; border-radius: 8px; background: rgba(255,255,255,.2);
  display: flex; align-items: center; justify-content: center; font-size: 13px;
}
.portal-head .acts { margin-left: auto; display: flex; gap: 6px; }
.portal-head .acts button {
  border: 1px solid rgba(255,255,255,.3); background: rgba(255,255,255,.12); color: #fff;
  border-radius: 8px; padding: 5px 11px; font-size: 12.5px;
}
.portal-who { position: relative; z-index: 1; margin-top: 14px; }
.portal-who .nm { font-size: 18px; font-weight: 700; }
.portal-who .pth { font-size: 12.5px; opacity: .85; margin-top: 2px; }
.portal-body { flex: 1; padding: 14px; max-width: 720px; width: 100%; margin: 0 auto;
  padding-bottom: calc(72px + env(safe-area-inset-bottom)); }
.portal-tabs {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; display: flex;
  background: rgba(255,255,255,.97); backdrop-filter: blur(10px);
  border-top: 1px solid var(--line); padding-bottom: env(safe-area-inset-bottom);
}
.portal-tabs button {
  flex: 1; border: 0; background: none; padding: 8px 2px 7px; display: flex;
  flex-direction: column; align-items: center; gap: 3px; color: var(--muted); font-size: 11px;
}
.portal-tabs button.active { color: var(--brand); }
.portal-tabs .fbtn {
  width: 46px; height: 46px; border-radius: 50%; background: var(--brand); color: #fff;
  display: flex; align-items: center; justify-content: center; margin-top: -14px;
  box-shadow: 0 6px 16px rgba(37,99,235,.4); border: 3px solid var(--panel);
}
.portal-tabs button.active .fbtn { background: var(--brand-dark); }
.portal-hero {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px;
}
.portal-hero .metric { background: var(--panel); }
.portal-hero .metric-v { font-size: 19px; }
.portal-card {
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}
.portal-card + .portal-card { margin-top: 12px; }
.portal-card-head {
  padding: 13px 15px; border-bottom: 1px solid var(--line); display: flex;
  align-items: center; gap: 8px; font-size: 14px; font-weight: 600;
}
.portal-card-head .acts { margin-left: auto; display: flex; gap: 6px; }
.portal-card-body { padding: 14px 15px; }
.portal-empty { padding: 40px 16px; text-align: center; color: var(--muted); font-size: 13px; }
.portal-note {
  margin-top: 10px; padding: 10px 12px; background: #fffbeb; border: 1px solid #fde68a;
  border-radius: 9px; font-size: 12.5px; color: #92400e; line-height: 1.7;
}

/* ------------------------------------------------------------ 表格补充 */
.tbl .num { text-align: right; font-variant-numeric: tabular-nums; }
.tbl .amt { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; color: var(--red); }
.tbl-wrap-scroll { overflow-x: auto; }
.row-click { cursor: pointer; }

/* ------------------------------------------------------------ 提示条补充 */
.notice-bar {
  display: flex; gap: 9px; align-items: flex-start; padding: 11px 14px; border-radius: 10px;
  font-size: 12.8px; line-height: 1.7; margin-bottom: 14px;
}
.notice-bar.info { background: var(--brand-soft); border: 1px solid #dbeafe; color: #1e40af; }
.notice-bar.warn { background: #fffbeb; border: 1px solid #fde68a; color: #92400e; }
.notice-bar .ico { margin-top: 2px; flex: none; }

/* ==========================================================================
   响应式补充
   ========================================================================== */

@media (max-width: 1024px) {
  .split, .split-wide { grid-template-columns: 1fr; }
  .split-side { max-height: none; }
  .flow-step { min-width: 0; flex: 1 1 40%; }
  .flow-step + .flow-step { margin-left: 0; margin-top: 10px; }
  .flow-step + .flow-step::before { display: none; }
}

@media (max-width: 768px) {
  .kv-grid { grid-template-columns: 1fr; }
  .kv-k { width: 66px; }
  .filter-row .search-box { width: 100%; }
  .filter-row select.input-sm { flex: 1; min-width: 108px; }
  .pager { justify-content: center; }
  .pager-btns { margin-left: 0; }
  .rank-name { width: 84px; }
  .rank-val { width: 62px; }
  .metric-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .portal-hero { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cust-card-tags { margin-left: 0; width: 100%; }
  .perm-item { flex-wrap: wrap; }
  .perm-item .sc { width: 100%; padding-left: 26px; }
  .ch-lv-chip { flex: 1; }
  /* 手机上三块并排放不下，竖着堆 */
  .cust-panels { grid-template-columns: 1fr; }
}

/* 侧栏底部那行「当前岗位 / 部门」。左侧主栏已经改成子栏，
   岗位信息现在挂在 .subnav-foot 上，这条留着给其他容器复用 */
.sidebar-foot {
  flex: none; padding: 11px 18px; border-top: 1px solid var(--line);
  font-size: 11.5px; color: var(--muted); white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}

/* 树里的操作行：贴着节点下面，淡一点 */
.tree-acts { gap: 6px; min-height: 0; padding-top: 0; padding-bottom: 7px; flex-wrap: wrap; }
.tree-acts:hover { background: none; }

/* ================================================================ 共享池 */
/* 弃单客户和负责人离职的客户都堆在这儿等人认领，视觉上要跟普通客户区分开 */

.cust-card.is-pool { border-left: 3px solid var(--amber); }
.cust-card-act { display: flex; gap: 8px; align-items: center; margin-top: 10px; }

.pool-filters { margin-bottom: 4px; }
.pool-bar {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px; margin-bottom: 12px;
  background: var(--panel-2); border: 1px solid var(--line); border-radius: var(--radius);
  font-size: 13px; color: var(--sub);
}
.pool-sum b { color: var(--text); font-size: 16px; font-weight: 700; }
.pool-flag {
  margin-left: 8px; padding: 1px 8px; border-radius: 10px;
  background: var(--brand-soft); color: var(--brand); font-size: 12px;
}
.pool-code {
  padding: 1px 7px; border-radius: 4px;
  background: var(--panel-2); border: 1px solid var(--line);
  font-size: 11px; color: var(--muted); font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

@media (max-width: 720px) {
  .pool-bar { flex-wrap: wrap; }
}

/* ================================================================ 客户导入 */
/* 两段式：先看图再确认。预览区要能一眼看出「导多少、进池多少、哪些行有问题」 */

.imp { display: flex; flex-direction: column; gap: 12px; }

.imp-pick { display: flex; gap: 14px; align-items: stretch; }
.imp-drop {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  padding: 22px 16px; cursor: pointer; text-align: center;
  border: 1.5px dashed var(--line-strong); border-radius: var(--radius);
  background: var(--panel-2); color: var(--sub);
  transition: border-color .15s, background .15s;
}
.imp-drop:hover, .imp-drop.is-over { border-color: var(--brand); background: var(--brand-soft); }
.imp-drop b { color: var(--text); font-size: 14px; font-weight: 600; }
.imp-drop .cell-sub { max-width: 380px; line-height: 1.5; }
.imp-side { display: flex; flex-direction: column; gap: 8px; justify-content: center; min-width: 150px; }

.imp-file {
  padding: 7px 10px; border-radius: var(--radius-sm);
  background: var(--brand-soft); color: var(--brand-dark); font-size: 12.5px;
}
.imp-text {
  width: 100%; resize: vertical; min-height: 110px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12.5px; line-height: 1.6;
}

.imp-result:empty { display: none; }

.imp-sum { display: flex; gap: 10px; flex-wrap: wrap; }
.imp-metric {
  flex: 1; min-width: 110px;
  padding: 12px 14px; border-radius: var(--radius);
  background: var(--panel-2); border: 1px solid var(--line);
}
.imp-metric-n { font-size: 22px; font-weight: 700; color: var(--text); line-height: 1.2; }
.imp-metric-n.tone-green { color: var(--green); }
.imp-metric-n.tone-amber { color: var(--amber); }
.imp-metric-n.tone-red { color: var(--red); }
.imp-metric-n.tone-gray { color: var(--muted); }
.imp-metric-l { font-size: 13px; color: var(--sub); margin-top: 2px; }

.imp-stages { display: flex; gap: 6px; flex-wrap: wrap; }

.imp-probs {
  max-height: 220px; overflow-y: auto;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
}
.imp-prob {
  display: flex; gap: 12px; padding: 7px 12px;
  font-size: 12.5px; color: var(--sub); line-height: 1.5;
  border-bottom: 1px solid var(--line);
}
.imp-prob:last-child { border-bottom: 0; }
.imp-prob .cell-sub { flex: 0 0 40px; text-align: right; color: var(--muted); }

.imp-hint {
  display: flex; gap: 8px; align-items: flex-start;
  padding: 10px 12px; border-radius: var(--radius-sm);
  background: var(--panel-2); color: var(--sub); font-size: 12.5px; line-height: 1.6;
}
.imp-hint svg { flex: 0 0 auto; margin-top: 2px; color: var(--brand); }

.imp-err {
  padding: 12px 14px; border-radius: var(--radius-sm);
  background: #fef2f2; color: var(--red); font-size: 13px; line-height: 1.6;
}

@media (max-width: 720px) {
  .imp-pick { flex-direction: column; }
  .imp-side { flex-direction: row; flex-wrap: wrap; }
  .imp-side .cell-sub { flex-basis: 100%; }
  .imp-metric { min-width: 0; flex-basis: calc(50% - 5px); }
}

/* ================================================================ 工作台（多标签） */
/* 2026-10-20 改版：客户管理成为第一个标签，顶上那条统计条去掉。
   整体要"轻"——顶部只留问候和打卡，把屏幕高度让给客户列表。 */

.wb-wrap { display: flex; flex-direction: column; gap: 12px; }

.wb-top {
  display: flex; align-items: center; gap: 10px;
  flex-wrap: wrap;
}
.wb-hi { font-size: 19px; font-weight: 700; color: var(--text); letter-spacing: -.2px; }
.wb-date { font-size: 12.5px; color: var(--muted); margin-top: 3px; }

.wb-punched {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 10px; border-radius: 20px;
  background: var(--brand-soft); color: var(--brand-dark);
  font-size: 12.5px; font-weight: 500;
}
.wb-punched.is-done { background: #dcfce7; color: #15803d; }

/* 原来这里有一整套 .wb-tabs / .wb-tab（页内横排标签）。
   甲方 2026-10-20 要求「内部标签放在左侧工具栏」，工作台的四个标签已经
   交给外壳的左侧子栏渲染，这套样式没有使用者了，删掉免得以后有人照着抄。 */

.wb-pane { min-height: 200px; }

/* 客户管理嵌进来时，那一排按钮自己占一行，不再有 pageHead */
.cust-toolbar {
  display: flex; justify-content: flex-end; gap: 8px;
  margin-bottom: 12px; flex-wrap: wrap;
}

.wb-big {
  display: flex; align-items: baseline; gap: 8px; padding: 6px 0;
}
.wb-big b { font-size: 28px; font-weight: 700; color: var(--text); line-height: 1; }
.wb-big span { font-size: 13px; color: var(--sub); }

@media (max-width: 720px) {
  .wb-hi { font-size: 17px; }
  .wb-top { gap: 8px; }
  .cust-toolbar { justify-content: stretch; }
  .cust-toolbar .btn { flex: 1; justify-content: center; }
}

/* ------------------------------------------------- 组织架构（有效 / 无效） */

/* 搜索框：无效组织唯一露面的地方，所以给它一点存在感 */
.org-search {
  position: relative; display: flex; align-items: center; gap: 6px;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--panel); padding: 0 10px; height: 32px; min-width: 300px;
  color: var(--muted);
}
.org-search:focus-within { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); }
.org-search input {
  flex: 1; min-width: 0; border: 0; outline: 0; background: none;
  font-size: 13px; color: var(--text); height: 30px;
}
.org-search input::-webkit-search-cancel-button { cursor: pointer; }

/* 搜索结果顶掉分栏 */
.org-found { margin-bottom: 14px; }

/* 明细表：行比较密，长名字也别把表格撑破 */
.tbl-org td { vertical-align: middle; }
.tbl-org .org-tree-mark {
  display: inline-flex; align-items: center; justify-content: center;
  width: 14px; color: var(--muted); margin-right: 2px; transform: rotate(90deg);
}
.tbl-org a.org-name-link { color: var(--text); text-decoration: none; font-weight: 600; }
.tbl-org a.org-name-link:hover { color: var(--brand-dark); text-decoration: underline; }
/* 详情链接挪到了组织编码上（甲方 2026-10-21）：编码可点、带下划线提示；名称变纯文本 */
.tbl-org a.org-code-link { color: var(--brand-dark, #1d4ed8); text-decoration: none; font-weight: 600; letter-spacing: .02em; }
.tbl-org a.org-code-link:hover { text-decoration: underline; }
.tbl-org .org-name-text { font-weight: 600; }
.tbl-org tr.row-dead td { background: #fafafa; }
.tbl-org .dead-name { color: #94a3b8; }
.tbl-org .col-act { text-align: right; white-space: nowrap; }

/* 明细行尾的两个小按钮（无效组织 / 编辑） */
.btn-xs { padding: 3px 8px; font-size: 12px; border-radius: 6px; }

/* 组织内页签（甲方 2026-10-21：点开一个组织开一个内页，可切可关） */
.org-tabs { display: flex; flex-wrap: wrap; gap: 6px; padding: 2px 0 10px; }
.org-tab {
  display: inline-flex; align-items: center; gap: 2px;
  padding: 3px 4px 3px 10px; border: 1px solid var(--line, #e2e8f0); border-radius: 8px;
  background: #f8fafc; font-size: 13px; line-height: 1.5;
}
.org-tab.on { background: #eef4ff; border-color: #b8ccf5; }
.org-tab-name { border: 0; background: none; padding: 0; cursor: pointer; color: #334155; font-size: 13px; font-family: inherit; }
.org-tab.on .org-tab-name { color: #1d4ed8; font-weight: 600; }
.org-tab-x {
  border: 0; background: none; cursor: pointer; color: #94a3b8;
  font-size: 14px; line-height: 1; padding: 2px 4px; border-radius: 5px; font-family: inherit;
}
.org-tab-x:hover { color: #b91c1c; background: #fee2e2; }
.col-act .btn-xs + .btn-xs { margin-left: 6px; }
/* 行尾按钮统一按中间对齐 —— 一行里可能有的包了 .btn-lock、有的没包 */
.tbl-org .col-act { vertical-align: middle; }

/* 无效组织的名字统一标灰 —— 搜索结果、明细表、下级表都用它 */
.dead-name { color: #94a3b8; text-decoration: line-through; }
.row-dead td { background: #fafafa; }

/* 二次确认里的那几条说明 */
.confirm-body p { margin: 0 0 8px; font-size: 13.5px; line-height: 1.7; }
/* 「XX 后不可恢复！！」这种必须看见的一句话 */
.confirm-body p.confirm-danger { font-size: 15px; font-weight: 700; color: #b91c1c; margin-bottom: 10px; }
/* 「无效组织」的点击热区。
   甲方 2026-10-20 第八轮：**不要置灰**，外观要和旁边那个能点的按钮完全一样，
   所以这里不加 opacity、不改颜色、不动 cursor；用 inline-flex 只是为了跟按钮基线对齐，
   尺寸跟按钮一致，右对齐那一列不会因为多包一层而错位。 */
.col-act .btn-lock { display: inline-flex; vertical-align: middle; }
.col-act .btn-lock > .btn { pointer-events: none; }
/* 跟「编辑」之间也保持同样的 6px 间距（否则只有 .btn + .btn 才算邻居） */
.col-act .btn-lock + .btn-xs { margin-left: 6px; }
.confirm-list { margin: 0 0 10px; padding-left: 20px; font-size: 13.5px; line-height: 1.8; color: #334155; }
.confirm-list b { color: #b91c1c; }

/* 连带无效的下级名单（甲方 2026-10-20 第十轮：允许一次打掉多层，得让人看清楚会没掉哪些） */
.invalid-kids { margin: 4px 0 12px; padding: 10px 12px; background: #fdf2f2; border: 1px solid #f3d5d5; border-radius: 8px; }
.invalid-kids p { margin: 0 0 6px; font-size: 13px; color: #7f1d1d; }
.invalid-kids ul { margin: 0; padding-left: 18px; max-height: 168px; overflow: auto; }
.invalid-kids li { font-size: 13px; line-height: 1.9; color: #334155; }
.invalid-kids li .cell-sub { margin-left: 8px; font-size: 12px; }

@media (max-width: 720px) {
  .org-search { min-width: 0; flex: 1; }
  .tbl-org .col-act .btn-xs { padding: 2px 6px; }
}

/* ============================================================ 2026-10-21 第四轮
   组织架构搜索框移左栏 / 员工管理五栏改版 / 详情页操作记录 */

/* 员工管理左栏（甲方 2026-10-21 16:33 / 17:16「对齐」）：搜索框与右栏「全部状态」下拉
   顶端贴同一条线、高度都是 32px，完全成一个水平面。
   做法：两边 margin-top 都归 0（左栏卡片 border 就是参考线），搜索框定高 32 垂直居中 */
.users-split > .split-side { padding-top: 0; }
/* 甲方 17:51 定稿：搜索框独立在外（顶端与「全部状态」齐平），组织树单独成框、下移 1 厘米 */
.users-split .split-side.usr-side {
  margin-top: 0; background: none; border: 0; box-shadow: none; padding: 0; overflow: visible;
}
/* 甲方 18:19：搜索框与树框同宽 —— 都占满左栏（width:100% 显式声明），
   拖拽条调左栏宽度时两者同步伸缩，永远两头对齐。
   ★ 甲方 20:48「搜索框不能跟着左栏拖到最窄」：基础类 .org-search 带 min-width:300px
   （那是给组织架构页的存在感），在这边必须归零，否则左栏窄于 300 时搜索框溢出、不跟着缩 */
.users-split .org-search-side { margin: 0 0 0; width: 100%; min-width: 0; height: 32px; box-sizing: border-box; padding: 0 9px; align-items: center; }
/* 组织树自己的框：带边框白底圆角，顶部距搜索框 11px（甲方 18:22：从 38px 上移 0.7cm≈26px），滚动也在框内 */
.users-split #usr-tree {
  margin-top: 12px; background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow-sm);
  max-height: 74vh; overflow: auto;
}
.users-split .usr-bar { margin: 0 0 10px; min-height: 32px; }
.users-split .usr-bar { margin: 0 0 8px; min-height: 32px; }
.users-split .usr-status { height: 32px; }
/* 「全部部门」卡片头与左栏「全部员工」行水平对齐（甲方 2026-10-21 17:38）：
   两边工具条下间隙统一 8px，卡片头 padding 14→8，让标题文字的中心线
   正好落在左栏「全部员工」那一行的中心上（都在顶端下方约 58px 处） */
.users-split .card-head { padding: 8px 18px; }

/* 组织架构：搜索框住在左栏顶部（原「组织树」标题的位置），结果就地显示在它下面 */
.org-search-side { margin: 10px 10px 0; display: flex; align-items: center; gap: 6px;
  border: 1px solid var(--line); border-radius: 8px; padding: 5px 9px; background: #fff; }
.org-search-side:focus-within { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); }
.org-search-side input { border: 0; outline: 0; flex: 1; min-width: 0; font-size: 12.5px; background: none; }
.org-found-side { padding: 8px 10px 10px; border-bottom: 1px solid var(--line); }
.found-head { display: flex; align-items: center; justify-content: space-between;
  font-size: 11.5px; color: var(--muted); margin-bottom: 6px; }
.found-list { display: flex; flex-direction: column; gap: 2px; max-height: 300px; overflow: auto; }
.found-row { padding: 6px 8px; border-radius: 7px; cursor: pointer; }
.found-row:hover { background: var(--brand-soft); }
.found-row.is-dead { cursor: default; opacity: .7; }
.found-name { font-size: 12.5px; font-weight: 500; }
.found-meta { display: flex; align-items: center; gap: 6px; font-size: 11px; margin-top: 1px; }
.found-empty { padding: 4px 2px 2px; font-size: 12px; }

/* 员工管理：左树宽度可拖（甲方 2026-10-21 16:33）
   ── 三列：左栏 | 拖拽条 | 右栏。宽度走 CSS 变量 --side-w（JS 拖动时改它，落在页面记忆里）。
   gap 收成 0，间距交给拖拽条自己撑（视觉上跟原来的 14px 差不多，但拖起来不漏缝）。 */
.users-split {
  grid-template-columns: var(--side-w, 280px) 14px minmax(0, 1fr);
  gap: 0;
  align-items: stretch;
}
.users-split > .split-side { min-width: 0; }

/* 拖拽条：一条细竖线 + 中间一颗把手点，hover / 拖动时整条变品牌色 */
.split-grip {
  position: relative; cursor: col-resize; touch-action: none;
  display: flex; align-items: center; justify-content: center;
  margin: 0 3px; border-radius: 4px;
}
.split-grip::before {
  content: ''; position: absolute; top: 0; bottom: 0; left: 50%; width: 2px;
  transform: translateX(-50%); background: var(--line); border-radius: 2px;
  transition: background .15s;
}
.split-grip::after {
  content: ''; position: relative; width: 8px; height: 34px; border-radius: 4px;
  background: var(--panel); border: 1px solid var(--line-strong, #cbd5e1);
  background-image: radial-gradient(circle, var(--muted) 1px, transparent 1px);
  background-size: 4px 4px; background-position: center; background-repeat: repeat-y;
  box-shadow: var(--shadow-sm); opacity: 0; transition: opacity .15s;
}
.users-split:hover .split-grip::after,
.split-grip:hover::after { opacity: 1; }
.split-grip:hover::before { background: var(--brand-soft); }
.split-grip:hover::after { border-color: var(--brand); }
.is-dragging .split-grip::before { background: var(--brand); }
.is-dragging .split-grip::after { opacity: 1; border-color: var(--brand); }
/* 拖动时全屏都是 col-resize，指针不会在划过表格时来回变 */
body.is-col-resizing, body.is-col-resizing * { cursor: col-resize !important; user-select: none; }

/* 左栏内容：组织名一律单行不换行，超宽就省略号；拖宽左栏就能看全（甲方 2026-10-21 16:43：不要换行）
   ★ 甲方 2026-10-21 16:51「人数显示覆盖信息」：窄栏 + 深层缩进时，右侧「N 人」徽章会压到组织名上。
     解法：名称右侧**按徽章宽度留出固定空间**（padding-right），名字再长也只在自己的格子里省略，
     徽章永远站在留白里，两者不会重叠。徽章本身 flex:none 且不换行。 */
.usr-side { font-size: 12px; padding: 8px 6px; min-width: 0; }
.usr-side .tree-row { padding-top: 3px; padding-bottom: 3px; min-width: 0; }
.usr-side .tree-name,
.usr-side .tree-row [data-pick] {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; word-break: keep-all; line-height: 1.5;
  min-width: 0;
}
.usr-side .tree-name { flex: 1 1 auto; padding-right: 46px; }
/* 徽章：绝对定位钉在行尾，不参与文字排布，宽度变化也不会把名字挤掉 */
.usr-side .tree-row { position: relative; }
.usr-side .tree-tail {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  margin-left: 0; flex: none; white-space: nowrap; pointer-events: none;
}
.usr-side .tree-tail .badge { flex: none; white-space: nowrap; }
.usr-side .tree-name, .usr-side .badge { font-size: 11.5px; }
/* 拖动时也让徽章留在原位，不因为挤压折行 */
.users-split.is-dragging .usr-side .tree-row { align-items: center; white-space: nowrap; }

/* 左栏自己的竖向滚动条：组织多了要能一眼看出「下面还有」，
   默认的细灰条太不显眼，这里加粗到 10px 并给一条轨道底色。
   17:51 定稿后滚动容器是 #usr-tree（树自己那个框），不再是整块 .usr-side */
.users-split #usr-tree { scrollbar-width: thin; scrollbar-color: #cbd5e1 #f1f5f9; }
.users-split #usr-tree::-webkit-scrollbar { width: 10px; }
.users-split #usr-tree::-webkit-scrollbar-track { background: #f1f5f9; border-radius: 8px; }
.users-split #usr-tree::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 8px; border: 2px solid #f1f5f9; }
.users-split #usr-tree::-webkit-scrollbar-thumb:hover { background: #94a3b8; }

/* 员工列表五栏（甲方 2026-10-21 第 8 条）：小字号、不换行 */
.tbl-users { font-size: 12.5px; }
.tbl-users th, .tbl-users td { padding: 7px 10px; white-space: nowrap; }
.tbl-users .col-check { width: 30px; text-align: center; }
.tbl-users .col-check input[type=checkbox] { width: 15px; height: 15px; accent-color: var(--brand); cursor: pointer; }
.tbl-users .col-avatar { width: 42px; }
.tbl-users .user-name-link { font-weight: 600; color: var(--ink); text-decoration: none; }
.tbl-users .user-name-link:hover { color: var(--brand); }
.usr-sub { font-size: 11px; margin-top: 1px; }
.usr-orgcell, .usr-datecell { font-size: 12px; }

/* 批量处理浮动条 */
.batch-bar { display: flex; align-items: center; gap: 10px; padding: 9px 12px;
  border-top: 1px solid var(--line); background: #fffbeb; position: sticky; bottom: 0; }
.batch-bar b { color: #b45309; }

/* 详情页操作记录表（组织 / 员工详情共用） */
.tbl-ops { font-size: 12.5px; }
.tbl-ops th, .tbl-ops td { padding: 8px 10px; vertical-align: top; }
.ops-action { font-weight: 600; }

/* 操作记录的「明细」：动作在上一行加粗，明细在下一行拆成小标签，
   字段变化「手机号 138 → 139」里箭头后面加深，扫一眼就知道改了哪项 */
.ops-detail { margin-top: 4px; display: flex; flex-wrap: wrap; gap: 6px; }
.ops-chip {
  display: inline-block; padding: 1px 8px; border-radius: 4px;
  background: var(--bg-soft, #f5f6f8); border: 1px solid var(--line);
  color: var(--ink-2, #555); font-size: 12px; line-height: 20px; white-space: nowrap;
}
.ops-chip b { color: var(--ink, #222); font-weight: 600; }
.ops-arrow { margin: 0 4px; color: var(--ink-3, #999); }
/* 明细只有一句话（没拆成多块）时不套灰底，直接跟在动作后面 */
.tbl-ops td > .ops-detail > span:not(.ops-chip) { color: var(--ink-2, #555); font-size: 12px; line-height: 20px; }

/* 组织编辑独立页 */
.org-edit-card { max-width: 640px; }
.card-foot { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 16px;
  border-top: 1px solid var(--line); }

@media (max-width: 720px) {
  /* 手机上不保留拖拽条：改成上下堆叠，树自己有一条竖向滚动条（甲方说的「组织树下面控制左右的进度条」在手机上退化成竖向滑动） */
  .users-split { grid-template-columns: 1fr; gap: 12px; }
  .split-grip { display: none; }
  .users-split > .split-side { max-height: none; overflow: visible; }
  /* 手机上树框跟桌面一致：滚动在 #usr-tree 框内（17:51 定稿后滚动容器变了） */
  .users-split #usr-tree { max-height: 260px; overflow: auto; }
}

/* 人事报表条形图的名称不换行（甲方 2026-10-21）：放不下就省略号 */
.bar-row .k { width: auto; max-width: 40%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* 员工管理工具条（甲方 2026-10-21 09:41）：状态筛选做窄，与批量处理 / 添加员工同一行
   ★ 甲方反馈「状态筛选找不见了」—— 之前用 .input.input-sm 那套浅边框，在工具条上太不显眼，
     这里单独给它描深边框 + 白底 + 自绘箭头，宽度也一样钉死，任何屏宽都不会被压没。 */
.usr-bar { flex-wrap: nowrap; gap: 8px; align-items: center; }
.usr-bar .spacer { flex: 1 1 auto; min-width: 4px; }
.usr-status,
select.usr-status.input.input-sm {
  width: 118px !important; min-width: 118px !important; max-width: 118px; flex: 0 0 auto;
  height: 32px; line-height: 30px; padding: 0 26px 0 10px; font-size: 12.5px;
  appearance: none; -webkit-appearance: none; -moz-appearance: none;
  border: 1px solid var(--line-strong); border-radius: 7px;
  background-color: #fff; color: var(--text); cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='%23475569'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 8px center;
}
.usr-status:hover { border-color: #94a3b8; }
.usr-status:focus { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(37, 99, 235, .12); outline: none; }

/* ---------------------------------------------------------- 员工详情（甲方 2026-10-21 14:37）
   两大块：个人信息 / 岗位信息。块与块之间一条细线，块标题小字加粗。 */
.ud-sec { padding: 4px 0 18px; }
.ud-sec + .ud-sec { border-top: 1px dashed var(--line); padding-top: 16px; }
.ud-sec-head { font-size: 13px; font-weight: 700; color: var(--ink); margin-bottom: 12px;
  display: flex; align-items: center; gap: 6px; }
.ud-sec-head::before { content: ''; width: 3px; height: 13px; border-radius: 2px; background: var(--brand); display: inline-block; }
/* 只读态的字段：两列，标签固定宽，值自动换行 */
.kv-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 24px; }
.kv-grid-2 .kv-cell { align-items: flex-start; }
.kv-grid-2 .kv-k { width: 104px; min-width: 104px; text-align: right; white-space: nowrap; }
.kv-grid-2 .kv-v { flex: 1; }
@media (max-width: 900px) {
  .kv-grid-2 { grid-template-columns: 1fr; }
}

/* ==========================================================================
   代客 + 站内通知（甲方 2026-10-22）
   ========================================================================== */

/* ---- 顶栏铃铛 ---- */
.bell-btn { position: relative; }
.bell-dot {
  position: absolute; top: 6px; right: 6px; width: 8px; height: 8px;
  border-radius: 50%; background: var(--red); border: 2px solid var(--panel);
}

/* ---- 顶栏代客条 ---- */
.imp-chip {
  display: inline-flex; align-items: center; gap: 6px;
  height: 30px; padding: 0 4px 0 8px; border-radius: 999px;
  font-size: 12px; line-height: 1; white-space: nowrap;
}
.imp-chip-idle { background: transparent; padding: 0; }
.imp-start {
  display: inline-flex; align-items: center; gap: 5px; height: 30px;
  padding: 0 12px; border-radius: 999px; border: 1px solid var(--line-strong);
  background: var(--panel); color: var(--sub); font-size: 12px; font-weight: 500;
  transition: all .15s;
}
.imp-start:hover { border-color: var(--brand); color: var(--brand); background: var(--brand-soft); }
.imp-chip-text { color: var(--sub); }
.imp-chip-text small { color: var(--muted); margin-left: 4px; }
.imp-left {
  font-variant-numeric: tabular-nums; font-weight: 600; color: var(--amber);
  padding: 0 6px; min-width: 62px; text-align: center;
}
.imp-left.imp-over { color: var(--red); }
.imp-end {
  height: 24px; padding: 0 10px; border-radius: 999px; border: 1px solid var(--red);
  background: var(--red); color: #fff; font-size: 12px; font-weight: 500;
}
.imp-end:hover { filter: brightness(.94); }

/* 代客视图（被代员工的界面，但有明显标识） */
.imp-chip-on { background: #fef3c7; border: 1px solid #fcd34d; color: #92400e; }
.imp-chip-on .imp-chip-text b { color: #78350f; }

/* ---- 代客弹窗 ---- */
.imp-dlg { display: flex; flex-direction: column; gap: 12px; }
.imp-tip {
  display: flex; gap: 8px; align-items: flex-start; padding: 10px 12px;
  background: #fffbeb; border: 1px solid #fde68a; border-radius: var(--radius-sm);
  font-size: 12px; line-height: 1.6; color: #92400e;
}
.imp-tip svg { flex: 0 0 auto; margin-top: 2px; }
.imp-search { display: flex; gap: 8px; }
.imp-search .input { flex: 1; }
.imp-result { min-height: 90px; max-height: 340px; overflow: auto; }
.imp-empty { padding: 28px 12px; text-align: center; color: var(--muted); font-size: 13px; }
.imp-row {
  display: flex; align-items: center; gap: 10px; padding: 10px 12px;
  border: 1px solid var(--line); border-radius: var(--radius-sm); margin-bottom: 8px;
}
.imp-row-off { background: var(--panel-2); opacity: .75; }
.imp-row-main { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; }
.imp-row-main b { font-size: 14px; }
.imp-row-code { font-size: 12px; color: var(--sub); font-variant-numeric: tabular-nums; }
.imp-row-org { font-size: 12px; color: var(--muted); }
.imp-row-why { font-size: 12px; color: var(--muted); white-space: nowrap; }

/* ---- 代客记录（甲方 2026-10-22 17:24：查询后面那块）----
   一张「最近找过谁」的快捷单。工号做成按钮，点了只回填搜索框。 */
.imp-recent-btn { white-space: nowrap; gap: 5px; }
.imp-recent-btn.is-on { background: var(--panel-2); border-color: var(--primary); color: var(--primary); }
.imp-recent-hd {
  display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
  padding: 6px 2px 10px; font-size: 12px; color: var(--muted);
}
.imp-recent-hd span { font-size: 11px; color: var(--sub); }
.imp-recent-row {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 10px; border-radius: var(--radius-sm);
  border-bottom: 1px solid var(--line-soft, var(--line));
}
.imp-recent-row:last-child { border-bottom: 0; }
.imp-recent-row:hover { background: var(--panel-2); }
.imp-recent-code {
  font-family: inherit; font-size: 12px; font-variant-numeric: tabular-nums;
  padding: 3px 8px; border-radius: 5px; cursor: pointer;
  color: var(--primary); background: transparent;
  border: 1px dashed var(--line); transition: background .12s, border-color .12s;
}
.imp-recent-code:hover { background: var(--primary-soft, #eff6ff); border-color: var(--primary); border-style: solid; }
.imp-recent-code:disabled { color: var(--muted); cursor: not-allowed; border-style: dotted; }
.imp-recent-name { flex: 1; min-width: 0; font-size: 13px; color: var(--fg); }
.imp-recent-when { font-size: 11px; color: var(--muted); white-space: nowrap; }

/* ---- 站内通知列表 ---- */
.inbox-list { max-height: 60vh; overflow: auto; }
.inbox-item {
  padding: 10px 12px; border-bottom: 1px solid var(--line); cursor: default;
}
.inbox-item.unread { background: var(--brand-soft); cursor: pointer; }
.inbox-item.unread .inbox-h b::before {
  content: ''; display: inline-block; width: 7px; height: 7px; border-radius: 50%;
  background: var(--brand); margin-right: 6px; vertical-align: middle;
}
.inbox-h { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; }
.inbox-h b { font-size: 13px; font-weight: 600; }
.inbox-time { font-size: 12px; color: var(--muted); white-space: nowrap; }
.inbox-body { margin-top: 4px; font-size: 12px; line-height: 1.7; color: var(--sub); }
.inbox-empty { padding: 36px 12px; text-align: center; color: var(--muted); font-size: 13px; }

@media (max-width: 720px) {
  .imp-chip-text, .imp-chip-text small { display: none; }
  .imp-search { flex-direction: column; }
  /* 手机上「代客记录」按钮铺满一行，手指好点 */
  .imp-recent-btn { justify-content: center; }
  .imp-recent-hd { flex-direction: column; align-items: flex-start; gap: 2px; }
  .imp-recent-when { font-size: 10px; }
}

/* ---- 代客授权明细（甲方 2026-10-22 18:38，系统设置里） ---- */
.btn.danger { color: var(--red); border-color: var(--line); }
.btn.danger:hover { border-color: var(--red); }
.tbl-impgrant td, .tbl-impgrant th { vertical-align: middle; }
.tbl-impgrant .row-actions { white-space: nowrap; text-align: right; }
.tbl-impgrant .imp-grant-code { font-variant-numeric: tabular-nums; }

/* 甲方 2026-10-22 19:05 四条：表单一行化 / 工号带姓名 / 组织树选择器 */
.imp-grant-form.one-line { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.imp-grant-name { font-size: 12px; color: var(--muted); white-space: nowrap; min-width: 90px; }
.imp-grant-name.is-found { color: var(--text, #0f172a); font-weight: 600; }

.orgpick { position: relative; }
.orgpick-btn { min-width: 180px; display: inline-flex; align-items: center; justify-content: space-between; gap: 6px; cursor: pointer; background: var(--panel); }
.orgpick-caret { font-style: normal; color: var(--muted); font-size: 11px; }
.orgpick-panel {
  position: absolute; z-index: 40; top: calc(100% + 4px); left: 0;
  min-width: 280px; max-height: 300px; overflow: auto;
  background: var(--panel); border: 1px solid var(--line); border-radius: 8px;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.12); padding: 6px;
}
.orgpick-row { display: flex; align-items: center; gap: 4px; padding: 5px 6px; border-radius: 6px; cursor: pointer; font-size: 13px; white-space: nowrap; }
.orgpick-row:hover { background: var(--panel-2); }
.orgpick-tgl { width: 18px; height: 18px; flex: none; border: 0; background: none; cursor: pointer; color: var(--muted); padding: 0; line-height: 1; font-size: 11px; }
.orgpick-tgl.orgpick-leaf { cursor: default; }
.orgpick-kids { margin-left: 16px; }
.orgpick-label { pointer-events: none; }

@media (max-width: 720px) {
  .imp-grant-form.one-line { align-items: stretch; flex-direction: column; }
  .orgpick-btn { width: 100%; }
  .orgpick-panel { left: 0; right: 0; }
}

/* ---- 日期输入空态占位（甲方 2026-10-23 21:52：浏览器默认 yyyy/mm/日 → 统一「年/月/日」） ---- */
.date-ph { position: relative; display: inline-block; }
.date-ph .dph {
  position: absolute; left: 9px; top: 50%; transform: translateY(-50%);
  color: var(--muted, #98a2b3); pointer-events: none; display: none;
  font-size: 12.5px; letter-spacing: 0.5px;
}
.date-ph.is-empty .dph { display: block; }
.date-ph.is-empty input[type="date"] { color: transparent; }
.date-ph.is-empty input[type="date"]:focus { color: transparent; }

/* ---- 客户概览 · 组织/人员下拉（甲方 2026-10-24 01:04）----
   自绘面板：组织行带折叠三角（▶收起/▼展开），组织名即筛选按钮，
   成员缩进在展开的组织下；替代原生 select（optgroup 做不了折叠）。 */
.ov-dd { position: relative; flex: 0 1 auto; min-width: 180px; max-width: 260px; }
.ov-dd-btn {
  display: flex; align-items: center; justify-content: space-between; gap: 6px;
  width: 100%; text-align: left; cursor: pointer; overflow: hidden;
  white-space: nowrap; text-overflow: ellipsis;
}
.ov-dd-btn .ov-dd-arrow { flex: none; color: var(--muted); font-size: 10px; }
.ov-dd-panel {
  position: absolute; top: calc(100% + 4px); left: 0; min-width: 100%; width: max-content; max-width: 300px;
  max-height: 340px; overflow: auto; z-index: 80; padding: 4px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 8px;
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.14);
}
.ov-dd-item { display: flex; align-items: center; gap: 4px; padding: 6px 8px; border-radius: 6px; font-size: 13px; cursor: pointer; }
.ov-dd-item:hover { background: var(--panel-2); }
.ov-dd-item.is-active { color: var(--brand); font-weight: 600; background: var(--brand-soft); }
.ov-dd-tri { flex: none; width: 16px; text-align: center; color: var(--muted); font-size: 10px; cursor: pointer; user-select: none; }
.ov-dd-tri:hover { color: var(--text); }
.ov-dd-org { font-weight: 600; }
.ov-dd-member { padding-left: 26px; }

/* ---- 收款：四步审批进度 / 闸门提示条（甲方 2026-10-26 16:59 财务按岗分家）----
   进度条四段：工程助理填报 → 审计审核 → 财务审核 → 出纳激活，
   签过的那段变实心，没签的空心 —— 一眼看出卡在谁手里。 */
.plan-chain { display: inline-flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.plan-step {
  font-size: 12px; color: var(--muted, #98a2b3);
  border: 1px dashed var(--line); border-radius: 10px; padding: 1px 7px;
}
.plan-step.is-done { color: #15803d; border-style: solid; border-color: #bbf7d0; background: #f0fdf4; }
.plan-arrow { color: var(--muted); font-size: 12px; }

.gate-bar {
  margin-bottom: 10px; padding: 8px 12px; border-radius: 8px; font-size: 13px;
  color: #b91c1c; background: #fef2f2; border: 1px solid #fecaca;
}
.gate-bar.is-warn { color: #b45309; background: #fffbeb; border-color: #fde68a; }

/* ==========================================================================
   可视化看板编辑器（甲方 2026-10-29 00:37）
   ========================================================================== */
.bd-root { display: flex; flex-direction: column; height: 100%; min-height: 0; }
.bd-toolbar {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 8px 10px; margin-bottom: 12px;
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
}
.bd-brand { font-weight: 700; font-size: 15px; margin-right: 6px; }
.bd-sep { width: 1px; height: 20px; background: var(--line-strong); margin: 0 4px; }
.bd-grid-toggle { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--sub); user-select: none; }
.bd-dirty { font-size: 12px; color: var(--amber); background: #fffbeb; border: 1px solid #fde68a; border-radius: 999px; padding: 2px 10px; }

.bd-main { display: flex; gap: 12px; flex: 1; min-height: 0; align-items: stretch; }
.bd-lib {
  flex: none; width: 170px; overflow-y: auto;
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 10px;
}
.bd-lib-title { font-weight: 700; font-size: 13px; margin: 6px 0; }
.bd-lib-sub { font-weight: 600; font-size: 12px; color: var(--sub); margin: 12px 0 6px; }
.bd-lib-item {
  display: flex; align-items: center; gap: 8px; padding: 8px 10px; margin: 4px 0;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  font-size: 13px; cursor: pointer; color: var(--text); background: var(--panel-2);
}
.bd-lib-item:hover { border-color: var(--brand); color: var(--brand); background: var(--brand-soft); }
.bd-lib-ic { display: inline-flex; flex: none; }

.bd-center { flex: 1; min-width: 0; display: flex; }
.bd-scroll { flex: 1; overflow: auto; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel-2); }

/* 画布本体：预览 / 编辑共用；网格 = 浅灰细实线（CSS 渐变，最底层不遮组件） */
.bd-canvas {
  position: relative; flex: none; overflow: hidden;
  background: #fff; box-shadow: var(--shadow-sm);
}
.bd-canvas.bd-grid {
  background-image:
    linear-gradient(to right, #e5e7eb 1px, transparent 1px),
    linear-gradient(to bottom, #e5e7eb 1px, transparent 1px);
}

/* 组件：画布上的绝对定位块 */
.bd-comp { position: absolute; box-sizing: border-box; }
.bd-comp.is-edit { cursor: move; }
.bd-comp-body { width: 100%; height: 100%; overflow: hidden; border-radius: 8px; box-shadow: var(--shadow-sm); }

/* 饼图扇区：hover 放大高亮 + 入场展开动画（2026-10-30 批次A） */
.bd-slice { transition: transform 0.18s ease, opacity 0.18s ease; cursor: pointer; }
.bd-slice:hover { transform: scale(1.045); opacity: 0.85; }
@keyframes bdPieIn { from { opacity: 0; transform: scale(0.72); } to { opacity: 1; transform: scale(1); } }
.bd-pie-in { animation: bdPieIn 0.4s ease both; transform-origin: center; transform-box: fill-box; }
.bd-pie-legend::-webkit-scrollbar { width: 4px; }
.bd-pie-legend::-webkit-scrollbar-thumb { background: rgba(148, 163, 184, 0.4); border-radius: 2px; }

/* 数据表格组件（2026-10-30 批次B）：冻结表头 + 斑马纹 + 汇总行 */
.bd-dtable { width: 100%; border-collapse: collapse; font-size: 12px; }
.bd-dtable th {
  position: sticky; top: 0; z-index: 1;
  background: var(--panel, #fff); color: var(--sub, #64748b);
  text-align: left; font-weight: 600; padding: 5px 8px;
  border-bottom: 1px solid var(--line, #e2e8f0); white-space: nowrap;
}
.bd-dtable td { padding: 4px 8px; border-bottom: 1px solid var(--line, #e2e8f0); color: var(--text, #0f172a); }
.bd-dtable tbody tr:nth-child(even) { background: rgba(148, 163, 184, 0.06); }
.bd-dtable .bd-td-idx { color: var(--muted, #94a3b8); }
.bd-dtable .bd-td-sub { color: var(--sub, #64748b); text-align: right; }
.bd-dtable .bd-dtable-total td { font-weight: 700; border-top: 2px solid var(--sub, #64748b); background: rgba(148, 163, 184, 0.1); }

/* 选中态：蓝色虚线外框 + 白色方形控制点（甲方样式约定 2） */
.bd-comp.is-sel { outline: 2px dashed var(--brand); outline-offset: 2px; }
.bd-dot {
  position: absolute; width: 10px; height: 10px; background: #fff;
  border: 2px solid var(--brand); border-radius: 2px; z-index: 10;
}
.bd-dot[data-h="nw"] { left: -6px; top: -6px; cursor: nwse-resize; }
.bd-dot[data-h="se"] { right: -6px; bottom: -6px; cursor: nwse-resize; }
.bd-dot[data-h="ne"] { right: -6px; top: -6px; cursor: nesw-resize; }
.bd-dot[data-h="sw"] { left: -6px; bottom: -6px; cursor: nesw-resize; }
.bd-dot-e[data-h="n"] { left: 50%; top: -6px; margin-left: -5px; cursor: ns-resize; }
.bd-dot-e[data-h="s"] { left: 50%; bottom: -6px; margin-left: -5px; cursor: ns-resize; }
.bd-dot-e[data-h="e"] { right: -6px; top: 50%; margin-top: -5px; cursor: ew-resize; }
.bd-dot-e[data-h="w"] { left: -6px; top: 50%; margin-top: -5px; cursor: ew-resize; }

/* 右侧属性面板 */
.bd-props {
  flex: none; width: 236px; overflow-y: auto;
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 10px 12px;
}
.bd-prop-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 6px 0; font-size: 13px; color: var(--sub); }
.bd-prop-row .input-sm, .bd-prop-row select { width: 128px; }
.bd-prop-color { width: 40px; height: 28px; padding: 0; border: 1px solid var(--line); border-radius: 6px; background: none; }
.bd-prop-hint { font-size: 12px; color: var(--muted); margin-top: 10px; line-height: 1.7; }
.bd-prop-btns { display: flex; gap: 6px; margin-top: 10px; flex-wrap: wrap; }
.bd-btn-danger { color: var(--red); border-color: #fecaca; }
.bd-btn-danger:hover { background: #fef2f2; }

@media (max-width: 900px) {
  .bd-lib { width: 130px; }
  .bd-props { width: 190px; }
}

/* ==========================================================================
   供应商端（甲方 2026-11-02）
   供应商的系统使用人用手机号登录后落在这里：没有左栏、没有工作台，
   只有「待办 / 下单记录 / 结算单 / 我的资料」四个页签。
   ========================================================================== */
.sportal {
  min-height: 100vh;
  background: var(--bg);
}
.sportal-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 20px;
  background: var(--panel);
  border-bottom: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
  position: sticky;
  top: 0;
  z-index: 20;
}
.sportal-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
  font-size: 15px;
}
.sportal-logo {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: var(--brand);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
}
.sportal-user {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: var(--sub);
}
.sportal-sup {
  font-weight: 600;
  color: var(--text);
}
.sportal-tabs {
  display: flex;
  gap: 8px;
  padding: 14px 20px 0;
  flex-wrap: wrap;
}
.sportal-tab {
  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--sub);
  border-radius: 999px;
  padding: 6px 16px;
  font-size: 14px;
  cursor: pointer;
  transition: all .15s;
}
.sportal-tab:hover { border-color: var(--line-strong); color: var(--text); }
.sportal-tab.active {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
}
.sportal-dot {
  display: inline-block;
  min-width: 18px;
  margin-left: 6px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--red);
  color: #fff;
  font-size: 11px;
  line-height: 18px;
  text-align: center;
}
.sportal-tab.active .sportal-dot { background: rgba(255, 255, 255, .28); }
.sportal-body {
  padding: 14px 20px 40px;
  max-width: 1280px;
}
.sportal-card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 16px 18px;
  margin-bottom: 14px;
  box-shadow: var(--shadow-sm);
}
.sportal-card h3 {
  margin: 0 0 12px;
  font-size: 15px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.sportal-num {
  display: inline-block;
  min-width: 20px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--brand-soft);
  color: var(--brand);
  font-size: 12px;
  font-weight: 600;
  line-height: 20px;
  text-align: center;
}
.sportal-h4 { margin: 16px 0 8px; font-size: 14px; }
.sportal-list { display: flex; flex-direction: column; gap: 8px; }
.sportal-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--panel-2);
  cursor: pointer;
  transition: border-color .15s;
}
.sportal-row:hover { border-color: var(--line-strong); }
.sportal-row-main {
  display: flex;
  flex-direction: column;
  min-width: 220px;
  gap: 2px;
}
.sportal-row-sub { flex: 1; font-size: 12px; color: var(--sub); min-width: 0; }
.sportal-row-act { display: flex; align-items: center; gap: 8px; flex: none; }
.sportal-scope { display: flex; gap: 6px; margin-bottom: 12px; }
.sportal-empty {
  padding: 28px;
  text-align: center;
  color: var(--muted);
  font-size: 13px;
}
.sportal-total {
  text-align: right;
  margin-top: 8px;
  font-weight: 600;
}
.sportal-warn {
  margin: 8px 0;
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  background: #fef2f2;
  color: var(--red);
  font-size: 13px;
}
.sportal-hint {
  margin-top: 10px;
  font-size: 12px;
  color: var(--muted);
}
.sportal-proofs { display: flex; flex-wrap: wrap; gap: 10px; }
.sportal-proof {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  width: 96px;
  font-size: 11px;
  color: var(--sub);
  text-decoration: none;
}
.sportal-proof img {
  width: 96px;
  height: 72px;
  object-fit: cover;
  border-radius: 6px;
  border: 1px solid var(--line);
}
.sportal-proof-file {
  width: 96px;
  height: 72px;
  border-radius: 6px;
  border: 1px dashed var(--line-strong);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 600;
  color: var(--brand);
}

@media (max-width: 760px) {
  .sportal-top { flex-wrap: wrap; }
  .sportal-body { padding: 12px; }
  .sportal-row { flex-wrap: wrap; }
  .sportal-row-main { min-width: 100%; }
  .sportal-row-act { width: 100%; justify-content: flex-end; }
}
.sportal-sub { display: block; font-size: 12px; color: var(--sub); }