/* ==========================================================================
   代账公司管理系统 · 样式
   设计基准：产品文档 1.2 三类页面版式 / 1.3 通用控件规范 / 1.4 按钮层级
   ========================================================================== */

:root {
  --brand: #2b5cff;
  --brand-dark: #1e46d6;
  --brand-soft: #eef3ff;

  --bg: #f4f6fb;
  --card: #ffffff;
  --line: #e6e9f2;
  --line-2: #f0f2f8;

  --text: #1b2233;
  --text-2: #5a6478;
  --text-3: #939bb0;

  --ok: #10b981;
  --ok-soft: #e8f8f2;
  --warn: #f59e0b;
  --warn-soft: #fff5e4;
  --info: #3b82f6;
  --info-soft: #eaf2ff;
  --danger: #ef4444;
  --danger-soft: #feecec;
  --grey-soft: #eef0f5;

  --radius: 10px;
  --radius-sm: 6px;
  --shadow-sm: 0 1px 2px rgba(20, 30, 60, .06);
  --shadow: 0 6px 24px rgba(20, 30, 60, .10);
  --shadow-lg: 0 24px 64px rgba(15, 25, 50, .22);

  --sidebar-w: 234px;
  --topbar-h: 56px;
}

* { box-sizing: border-box; }

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

button, input, select, textarea { font-family: inherit; font-size: inherit; color: inherit; }
a { color: var(--brand); text-decoration: none; }
::selection { background: #cfdcff; }

/* 滚动条 */
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-thumb { background: #ccd2e0; border-radius: 6px; }
::-webkit-scrollbar-thumb:hover { background: #b3bccd; }
::-webkit-scrollbar-track { background: transparent; }

.num { font-variant-numeric: tabular-nums; }

/* ============================ 应用外壳 ============================ */

.app { display: flex; height: 100vh; overflow: hidden; }

/* ---------------- 左侧导航 ---------------- */
.sidebar {
  width: var(--sidebar-w); flex: 0 0 var(--sidebar-w);
  background: #141c33;
  color: #c7cddd;
  display: flex; flex-direction: column;
  overflow: hidden;
}
.brand {
  height: var(--topbar-h); flex: 0 0 var(--topbar-h);
  display: flex; align-items: center; gap: 10px;
  padding: 0 18px;
  border-bottom: 1px solid rgba(255,255,255,.07);
}
.brand-logo {
  width: 28px; height: 28px; border-radius: 8px;
  background: linear-gradient(135deg, #3f6dff, #7aa2ff);
  display: grid; place-items: center;
  font-weight: 700; font-size: 14px; color: #fff;
  flex: 0 0 auto;
}
.brand-text { min-width: 0; }
.brand-name { font-size: 13.5px; font-weight: 600; color: #fff; letter-spacing: .2px; white-space: nowrap; }
.brand-sub { font-size: 10.5px; color: #7b86a3; letter-spacing: .5px; }

.nav { flex: 1; overflow-y: auto; padding: 10px 0 24px; }
.nav::-webkit-scrollbar-thumb { background: rgba(255,255,255,.16); }

.nav-group-title {
  display: flex; align-items: center; gap: 8px; width: 100%;
  padding: 9px 18px 5px; margin-top: 6px;
  font-size: 11.5px; letter-spacing: 1px; color: #6b7492;
  border: none; background: none; text-align: left; cursor: pointer;
}
.nav-group-title:hover { color: #98a2bd; }
.nav-item {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 18px 8px 20px;
  cursor: pointer; position: relative;
  font-size: 13.5px; color: #c2c9db;
  border: none; background: none; width: 100%; text-align: left;
  transition: background .13s, color .13s;
}
.nav-item:hover { background: rgba(255,255,255,.055); color: #fff; }
.nav-item.active { background: rgba(63,109,255,.17); color: #fff; font-weight: 600; }
.nav-item.active::before {
  content: ''; position: absolute; left: 0; top: 6px; bottom: 6px;
  width: 3px; border-radius: 0 3px 3px 0; background: #4f7bff;
}
.nav-item .ni-icon { width: 16px; text-align: center; font-size: 13px; opacity: .9; flex: 0 0 16px; }
.nav-sub { padding-left: 0; }
.nav-sub .nav-item { padding-left: 46px; font-size: 13px; color: #a8b1c8; }

/* ---------------- 主区 ---------------- */
.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.topbar {
  height: var(--topbar-h); flex: 0 0 var(--topbar-h);
  background: var(--card); border-bottom: 1px solid var(--line);
  display: flex; align-items: center; gap: 14px;
  padding: 0 20px;
}
.crumb { font-size: 13px; color: var(--text-3); display: flex; align-items: center; gap: 6px; }
.crumb b { color: var(--text); font-weight: 600; font-size: 14px; }
.crumb .sep { color: #cbd1de; }
/* 从平台后台「打开开发环境」进来时的标记，只在系统开发模板里出现 */
.dev-tag {
  display: inline-flex; align-items: center; height: 20px; padding: 0 8px;
  border-radius: 999px; background: var(--warn-soft); color: #b77208;
  font-size: 11.5px; font-weight: 600; letter-spacing: .3px;
}

.top-actions { margin-left: auto; display: flex; align-items: center; gap: 10px; }

/* 常驻智能录入按钮 */
.fab-mic {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 13px; border-radius: 20px;
  background: linear-gradient(135deg, #5b7cff, #3f6dff);
  color: #fff; border: none; cursor: pointer; font-size: 13px;
  box-shadow: 0 3px 10px rgba(63,109,255,.32);
  transition: transform .14s, box-shadow .14s;
}
.fab-mic:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(63,109,255,.42); }

.user-chip { display: flex; align-items: center; gap: 8px; padding-left: 12px; border-left: 1px solid var(--line); }
.avatar {
  width: 30px; height: 30px; border-radius: 50%; flex: 0 0 30px;
  background: linear-gradient(135deg, #7f9dff, #4f7bff);
  color: #fff; display: grid; place-items: center; font-size: 12px; font-weight: 600;
}
.user-meta { line-height: 1.25; }
.user-meta .un { font-size: 13px; font-weight: 600; }
.user-meta .ur { font-size: 11px; color: var(--text-3); }

/* ============================ 站内待办提醒（右上角） ============================ */
.todo-wrap { position: relative; }
.todo-btn {
  width: 32px; height: 32px; border-radius: 50%;
  border: 1px solid var(--line); background: var(--card);
  cursor: pointer; font-size: 14px; line-height: 1;
  display: grid; place-items: center; position: relative;
  transition: border-color .14s, background .14s;
}
.todo-btn:hover { border-color: #c3d1ff; background: var(--brand-soft); }
.todo-btn.has { border-color: #f6c9c9; background: #fff7f7; }
.todo-dot {
  position: absolute; top: -4px; right: -4px;
  min-width: 15px; height: 15px; padding: 0 4px; box-sizing: content-box;
  border-radius: 999px; background: var(--danger); color: #fff;
  border: 2px solid var(--card);
  font-size: 10.5px; font-weight: 700; line-height: 15px; text-align: center;
  font-variant-numeric: tabular-nums;
}
.todo-panel {
  position: absolute; top: calc(100% + 9px); right: 0;
  width: 308px; background: var(--card);
  border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow-lg); z-index: 900; overflow: hidden;
}
.todo-head {
  padding: 9px 13px; font-size: 12.5px; font-weight: 600; color: var(--text-2);
  background: #f8f9fd; border-bottom: 1px solid var(--line-2);
}
.todo-list { max-height: 330px; overflow-y: auto; }
.todo-item {
  display: block; width: 100%; text-align: left; padding: 9px 13px;
  background: none; border: none; border-bottom: 1px solid var(--line-2);
  cursor: pointer; font-family: inherit; transition: background .12s;
}
.todo-item:hover { background: var(--brand-soft); }
.todo-item .ti-top { display: flex; align-items: baseline; gap: 8px; font-size: 13px; color: var(--text); }
.todo-item .ti-amt { margin-left: auto; font-weight: 650; color: var(--brand-dark); font-variant-numeric: tabular-nums; }
.todo-item .ti-sub { display: block; font-size: 11.5px; color: var(--text-3); margin-top: 2px; }
.todo-item .ti-node { display: block; font-size: 11.5px; color: #b77208; margin-top: 2px; }
.todo-more {
  display: block; width: 100%; padding: 9px; background: none; border: none;
  cursor: pointer; color: var(--brand); font-size: 12.5px; font-family: inherit;
}
.todo-more:hover { background: var(--brand-soft); }
.todo-empty { padding: 18px; text-align: center; color: var(--text-3); font-size: 12.5px; }

.content { flex: 1; overflow-y: auto; padding: 18px 20px 40px; }
.page { max-width: 1680px; }

/* ============================ 汇总条 ============================ */
.stat-row {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px; margin-bottom: 14px;
}
.stat-row.cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.stat {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 13px 16px; box-shadow: var(--shadow-sm);
  position: relative; overflow: hidden;
}
.stat::after {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--brand); opacity: .75;
}
.stat.s-ok::after { background: var(--ok); }
.stat.s-warn::after { background: var(--warn); }
.stat.s-danger::after { background: var(--danger); }
.stat.s-info::after { background: var(--info); }
.stat-label { font-size: 12.5px; color: var(--text-2); }
.stat-value { font-size: 24px; font-weight: 650; letter-spacing: -.6px; margin-top: 2px; font-variant-numeric: tabular-nums; }
.stat-value small { font-size: 13px; font-weight: 500; color: var(--text-3); margin-left: 4px; letter-spacing: 0; }
.stat-hint { font-size: 11.5px; color: var(--text-3); margin-top: 1px; }

/* ============================ 标题行 ============================ */
.page-head {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 12px; flex-wrap: wrap;
}
.page-title { font-size: 17px; font-weight: 650; letter-spacing: -.2px; margin-right: 4px; }
.page-title .pt-sub { font-size: 12.5px; font-weight: 400; color: var(--text-3); margin-left: 8px; }
.head-tools { margin-left: auto; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* 搜索框 */
.search {
  display: flex; align-items: center; gap: 6px;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: 0 10px; height: 32px; width: 246px;
  transition: border-color .14s, box-shadow .14s;
}
.search:focus-within { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(43,92,255,.12); }
.search input { border: none; outline: none; background: none; flex: 1; min-width: 0; height: 100%; }
.search input::placeholder { color: var(--text-3); }
.search .si { color: var(--text-3); display: flex; align-items: center; }
.search .si svg { display: block; }

/* ============================ 按钮 ============================ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 5px;
  height: 32px; padding: 0 13px;
  border-radius: var(--radius-sm); border: 1px solid var(--line);
  background: var(--card); color: var(--text);
  cursor: pointer; white-space: nowrap; font-size: 13px;
  transition: all .14s;
}
.btn:hover { border-color: #c8d0e4; background: #fafbff; }
.btn:active { transform: translateY(.5px); }
.btn-primary {
  background: var(--brand); border-color: var(--brand); color: #fff; font-weight: 500;
  box-shadow: 0 2px 8px rgba(43,92,255,.24);
}
.btn-primary:hover { background: var(--brand-dark); border-color: var(--brand-dark); }
.btn-ghost { background: none; border-color: transparent; color: var(--text-2); }
.btn-ghost:hover { background: var(--grey-soft); border-color: transparent; }
.btn-danger { color: var(--text-2); }
.btn-danger:hover { color: var(--danger); border-color: #f7c3c3; background: var(--danger-soft); }
.btn-sm { height: 27px; padding: 0 9px; font-size: 12.5px; }
.btn[disabled], .btn.is-disabled {
  opacity: .45; cursor: not-allowed; pointer-events: none;
}
.btn-link {
  background: none; border: none; color: var(--brand); cursor: pointer;
  padding: 0 2px; font-size: 13px;
}
.btn-link:hover { text-decoration: underline; }

/* 图标按钮 */
.icon-btn {
  width: 28px; height: 28px; border-radius: var(--radius-sm);
  border: 1px solid transparent; background: none; cursor: pointer;
  color: var(--text-2); display: inline-grid; place-items: center; font-size: 14px;
}
.icon-btn:hover { background: var(--grey-soft); color: var(--text); }

/* ============================ 时间筛选行 ============================ */
.timebar {
  display: flex; align-items: center; gap: 6px;
  margin-bottom: 10px; flex-wrap: wrap;
}
.timebar .tb-label { font-size: 12.5px; color: var(--text-3); margin-right: 2px; }
.chip {
  height: 28px; padding: 0 12px; border-radius: 15px;
  border: 1px solid var(--line); background: var(--card);
  cursor: pointer; font-size: 12.5px; color: var(--text-2);
  transition: all .14s;
}
.chip:hover { border-color: #c8d0e4; color: var(--text); }
.chip.active { background: var(--brand); border-color: var(--brand); color: #fff; font-weight: 500; }

/* 部门岗位标签（组织架构详情 · 维护部门岗位弹窗） */
.post-chip {
  display: inline-flex; align-items: center; gap: 6px;
  height: 28px; padding: 0 6px 0 10px; border-radius: 8px;
  background: var(--brand-soft); color: var(--brand);
  font-size: 13px; font-weight: 500;
}
.post-chip .pc-use {
  font-size: 11px; font-weight: 400; font-style: normal;
  color: var(--brand); opacity: .62;
}
.post-chip .pc-use.pc-idle { opacity: .38; }
.post-chip .pc-x {
  border: 0; background: transparent; color: var(--brand); cursor: pointer;
  font-size: 15px; line-height: 1; padding: 0 3px; opacity: .5;
}
.post-chip .pc-x:hover { opacity: 1; }

/* ============================ 批量条 ============================ */
.batchbar {
  display: flex; align-items: center; gap: 8px;
  background: var(--card); border: 1px solid var(--line); border-bottom: none;
  border-radius: var(--radius) var(--radius) 0 0;
  padding: 8px 12px; flex-wrap: wrap;
}
.batchbar .bb-count { font-size: 12.5px; color: var(--text-2); margin-right: 4px; }
.batchbar .bb-count b { color: var(--brand); }
.batchbar .bb-right { margin-left: auto; display: flex; gap: 8px; }
.batchbar.no-batch { border-radius: var(--radius); border-bottom: 1px solid var(--line); }

/* ============================ 表格 ============================ */
.table-wrap {
  background: var(--card); border: 1px solid var(--line);
  border-radius: 0 0 var(--radius) var(--radius);
  overflow: auto; max-height: calc(100vh - 330px); position: relative;
}
.table-wrap.standalone { border-radius: var(--radius); }
table.grid { border-collapse: separate; border-spacing: 0; width: 100%; font-size: 13px; }
table.grid th, table.grid td {
  padding: 8px 10px; text-align: left; white-space: nowrap;
  border-bottom: 1px solid var(--line-2);
}
table.grid thead th {
  background: #f8f9fd; color: var(--text-2); font-weight: 600; font-size: 12.5px;
  position: sticky; top: 0; z-index: 3;
  border-bottom: 1px solid var(--line);
}
table.grid thead th.sortable { cursor: pointer; user-select: none; }
table.grid thead th.sortable:hover { color: var(--brand); }
table.grid thead th .sarrow { font-size: 9px; color: #c3cad9; margin-left: 3px; }
table.grid thead th.sorted .sarrow { color: var(--brand); }
table.grid tbody tr { transition: background .1s; }
table.grid tbody tr:hover td { background: #fafbff; }
table.grid tbody tr.clickable { cursor: pointer; }
table.grid tbody tr.row-danger td { background: #fff7f7; }
table.grid tbody tr.row-danger:hover td { background: #fff1f1; }
table.grid tbody tr.selected td { background: #f2f6ff; }
table.grid td.cell-num { text-align: right; font-variant-numeric: tabular-nums; }
table.grid th.col-center, table.grid td.col-center { text-align: center; }
table.grid .td-muted { color: var(--text-3); }
table.grid .td-strong { font-weight: 600; }
table.grid .frozen {
  position: sticky; left: 0; z-index: 2; background: var(--card);
  box-shadow: 1px 0 0 var(--line-2);
}
table.grid thead th.frozen { z-index: 4; background: #f8f9fd; }
table.grid tbody tr:hover td.frozen { background: #fafbff; }
table.grid tbody tr.selected td.frozen { background: #f2f6ff; }
table.grid tbody tr.row-danger td.frozen { background: #fff7f7; }
.cell-ellipsis { max-width: 200px; overflow: hidden; text-overflow: ellipsis; display: inline-block; vertical-align: bottom; }
.empty-state {
  padding: 52px 20px; text-align: center; color: var(--text-3); font-size: 13px;
}
.empty-state .es-icon { font-size: 26px; opacity: .35; display: block; margin-bottom: 8px; }

/* 复选框 */
.cb {
  width: 15px; height: 15px; border-radius: 3px; accent-color: var(--brand);
  cursor: pointer; vertical-align: -2px;
}
.idx-col { width: 44px; text-align: center; color: var(--text-3); font-size: 12px; }
.cb-col { width: 38px; text-align: center; }
.op-col { position: sticky; right: 0; background: var(--card); box-shadow: -1px 0 0 var(--line-2); }
thead th.op-col { background: #f8f9fd; }
tbody tr:hover td.op-col { background: #fafbff; }

/* ============================ 分页 ============================ */
.pager {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 4px 0; font-size: 12.5px; color: var(--text-2); flex-wrap: wrap;
}
.pager .pg-right { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.pager select { height: 28px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--card); padding: 0 6px; }

/* ============================ 状态标签 ============================ */
.tag {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 1px 8px; border-radius: 11px;
  font-size: 12px; line-height: 18px; white-space: nowrap;
  background: var(--grey-soft); color: var(--text-2);
}
.tag.t-warn { background: var(--warn-soft); color: #b77208; }
.tag.t-info { background: var(--info-soft); color: #2563d8; }
.tag.t-ok { background: var(--ok-soft); color: #0a8f67; }
.tag.t-danger { background: var(--danger-soft); color: #d13b3b; }
.tag.t-grey { background: var(--grey-soft); color: #6b7488; }
.tag.t-brand { background: var(--brand-soft); color: var(--brand-dark); }
.tag .dot { width: 5px; height: 5px; border-radius: 50%; background: currentColor; }

/* 系统设置 → 选项维护：选项胶囊右上角的删除叉 */
.dict-chip { position: relative; padding-right: 6px; }
.dict-chip .chip-x {
  width: 15px; height: 15px; flex: 0 0 15px; padding: 0; border: 0; border-radius: 50%;
  background: transparent; color: currentColor; opacity: .45;
  font-size: 10px; line-height: 1; cursor: pointer;
}
.dict-chip:hover .chip-x { opacity: 1; }
.dict-chip .chip-x:hover { background: var(--danger-soft); color: #d13b3b; }

/* 开票主体：一行一个（光有公司名看不出该用哪个主体开票，税号等要一起露出来）。
   点整行打开编辑，右侧 ✕ 删除 */
.issuer-list { display: flex; flex-direction: column; gap: 6px; }
.issuer-row {
  display: flex; align-items: flex-start; gap: 8px;
  padding: 7px 9px; border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: #fff; cursor: pointer; transition: border-color .15s, background .15s;
}
.issuer-row:hover { border-color: var(--brand); background: var(--brand-soft); }
.issuer-row .ir-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.issuer-row .ir-main b { font-size: 13px; font-weight: 600; color: var(--text); }
.issuer-row .ir-sub { font-size: 11.5px; color: var(--text-3); line-height: 1.45; word-break: break-all; }
.issuer-row .ir-sub.ir-none { color: #b7791f; }
.issuer-row .chip-x {
  width: 16px; height: 16px; flex: 0 0 16px; padding: 0; border: 0; border-radius: 50%;
  background: transparent; color: var(--text-3); opacity: .45;
  font-size: 11px; line-height: 1; cursor: pointer;
}
.issuer-row:hover .chip-x { opacity: 1; }
.issuer-row .chip-x:hover { background: var(--danger-soft); color: #d13b3b; }

/* 拍照识别：「开票主体资料」标题右侧的小相机 —— 拍一张营业执照，
   名称和税号自动填上（18 位代码手敲容易错一位；读出来照样能改） */
.scan-mini {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 10px; cursor: pointer;
  border: 1px solid var(--line); border-radius: 999px;
  background: #fff; color: var(--brand);
  font-family: inherit; font-size: 12px; font-weight: 600; line-height: 1.7;
  transition: background .15s, border-color .15s;
}
.scan-mini:hover { background: var(--brand-soft); border-color: var(--brand); }
.scan-mini.is-busy { opacity: .65; cursor: progress; }
.scan-ico { font-size: 13px; line-height: 1; }
.scan-state { margin-left: auto; font-size: 11.5px; font-weight: 400; color: var(--text-3); }
.scan-state.is-ok { color: var(--ok); }
.scan-state.is-warn { color: #b7791f; }
.scan-state.is-err { color: var(--danger); }
/* 刚读出来的那一项闪一下，让人看清填进去的是什么 */
.ctl.scan-hit { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); }

/* ============================ 表单 ============================ */
.form-section { border-bottom: 1px solid var(--line-2); }
.form-section:last-child { border-bottom: none; }
.fs-head {
  display: flex; align-items: center; gap: 8px;
  background: #f8f9fd; padding: 8px 18px; cursor: pointer;
  font-size: 13px; font-weight: 600; color: var(--text);
  border-bottom: 1px solid var(--line-2);
  user-select: none;
}
.fs-head .fs-caret { font-size: 11px; color: var(--text-3); transition: transform .18s; }
.form-section.collapsed .fs-caret { transform: rotate(-90deg); }
.form-section.collapsed .fs-body { display: none; }
.fs-head .fs-note { font-weight: 400; font-size: 12px; color: var(--text-3); margin-left: 6px; }
.fs-body { padding: 14px 18px 4px; }

.fgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 16px; }
.fgrid.cols-1 { grid-template-columns: 1fr; }
.fgrid.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.fgrid.cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.field { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.field.full { grid-column: 1 / -1; }
.field.span-2 { grid-column: span 2; }
.field > label {
  font-size: 12.5px; color: var(--text-2); font-weight: 500;
  display: flex; align-items: center; gap: 4px; min-height: 19px;
}
.field > label .req { color: var(--danger); font-weight: 700; font-size: 14px; line-height: 1; }
.field > label .lock { color: var(--text-3); font-size: 11px; }
/* 字段名右上角的小问号：紧贴字段名 —— 原来 margin-left:auto 会把它推到最右边，离得太远 */
.field > label .f-tip {
  display: inline-flex; align-items: center; justify-content: center;
  width: 14px; height: 14px; margin-left: 1px; flex: 0 0 auto;
  color: var(--text-3); cursor: help; transition: color .14s;
}
.field > label .f-tip:hover { color: var(--primary); }
.field > label .f-tip svg { display: block; }

/* 说明气泡：全站单例，固定定位，不会被弹窗滚动区裁掉 */
#u-tip {
  position: fixed; z-index: 2000; visibility: hidden; opacity: 0;
  max-width: 260px; padding: 7px 10px; border-radius: 6px;
  background: #2b3245; color: #fff; font-size: 12px; line-height: 1.55;
  box-shadow: 0 8px 22px rgba(20, 26, 45, .24); pointer-events: none;
  transition: opacity .12s ease;
}
#u-tip.on { visibility: visible; opacity: 1; }
#u-tip::after {
  content: ''; position: absolute; left: var(--ar, 50%); margin-left: -4px;
  border: 4px solid transparent;
}
#u-tip.on.below::after { top: -8px; border-bottom-color: #2b3245; }
#u-tip.on.above::after { bottom: -8px; border-top-color: #2b3245; }
.field .hint { font-size: 11.5px; color: var(--text-3); }
.field.is-error .ctl { border-color: var(--danger) !important; background: #fffafa; }
.field.is-error > label { color: var(--danger); }
/* 就地报错：红字挂在出错字段的正下方，一眼看到「这格没填好」；
   报错时原来的灰色说明先让位，避免两行小字挤在一起 */
.f-err { font-size: 11.5px; color: var(--danger); line-height: 1.5; }
.field.is-error > .hint { display: none; }

.ctl {
  height: 32px; width: 100%;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--card); padding: 0 9px;
  outline: none; transition: border-color .14s, box-shadow .14s;
}
.ctl:focus { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(43,92,255,.11); }
.ctl::placeholder { color: #b6bccb; }
.ctl[readonly], .ctl.locked { background: #f6f7fb; color: var(--text-2); cursor: default; }
.ctl.locked:focus { border-color: var(--line); box-shadow: none; }
textarea.ctl { height: auto; min-height: 66px; padding: 7px 9px; resize: vertical; line-height: 1.6; }
/* 表单弹窗里夹杂的自定义区块（如「生成工资表」的规则勾选）也要跟字段对齐 */
.mb-pad-in { padding: 0 18px 14px; }

/* 应用内输入弹窗（UI.prompt） */
.pm-wrap { display: block; }
.pm-wrap .field { display: flex; }
select.ctl { cursor: pointer; appearance: none;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238a92a6' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 9px center; padding-right: 26px;
}
select.ctl:disabled { background-color: #f6f7fb; cursor: default; color: var(--text-3); }

/* 带 + 的下拉 */
.ctl-row { display: flex; gap: 5px; align-items: stretch; }
.ctl-row .ctl { flex: 1; min-width: 0; }
.ctl-row .add-opt {
  width: 30px; flex: 0 0 30px; border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--card); cursor: pointer; color: var(--text-2); font-size: 15px; line-height: 1;
}
.ctl-row .add-opt:hover { border-color: var(--brand); color: var(--brand); background: var(--brand-soft); }

/* 关联选择器（胶囊） */
.lookup {
  display: flex; align-items: center; gap: 5px;
  height: 32px; border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--card); padding: 0 4px 0 9px; transition: border-color .14s, box-shadow .14s;
}
.lookup:focus-within { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(43,92,255,.11); }
.lookup .lk-value { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lookup .lk-value.placeholder { color: #b6bccb; }
.lookup .lk-btn {
  width: 24px; height: 24px; border: none; background: none; cursor: pointer;
  color: var(--text-3); border-radius: 4px; display: grid; place-items: center; font-size: 13px;
}
.lookup .lk-btn:hover { background: var(--grey-soft); color: var(--brand); }
.lookup .lk-btn svg { display: block; }
.lookup.locked { background: #f6f7fb; }
.pill {
  display: inline-flex; align-items: center; gap: 5px;
  background: var(--brand-soft); color: var(--brand-dark);
  border-radius: 13px; padding: 1px 4px 1px 9px; font-size: 12.5px; max-width: 100%;
}
.pill .pill-x {
  border: none; background: none; cursor: pointer; color: inherit;
  opacity: .6; font-size: 13px; line-height: 1; padding: 2px;
}
.pill .pill-x:hover { opacity: 1; }

/* 附件上传 */
.uploader {
  display: flex; align-items: center; gap: 9px;
  border: 1px dashed #cfd6e6; border-radius: var(--radius-sm);
  padding: 8px 10px; background: #fbfcff; cursor: pointer;
  transition: border-color .14s, background .14s;
}
.uploader:hover { border-color: var(--brand); background: var(--brand-soft); }
.uploader .up-icon { font-size: 16px; color: var(--text-3); }
.uploader .up-text { font-size: 12.5px; color: var(--text-2); }
.uploader .up-files { margin-left: auto; font-size: 12px; color: var(--brand); }
.uploader.is-drag { border-color: var(--brand); background: var(--brand-soft); border-style: solid; }

/* 附件小卡片（待上传 / 已存档） */
.up-list, .up-saved { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.up-list:empty, .up-saved:empty { display: none; }
.up-saved { margin-top: 2px; }
.up-saved-label { font-size: 11.5px; color: var(--text-3); }
.up-chip {
  display: inline-flex; align-items: center; gap: 6px; max-width: 100%;
  padding: 2px 6px 2px 8px; border-radius: 20px;
  background: var(--brand-soft); border: 1px solid #d9e2ff;
  font-size: 12px; color: var(--brand-dark);
}
.up-chip .uc-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 190px; }
.up-chip .uc-size { font-size: 11px; color: var(--text-3); }
.up-chip .uc-x {
  border: 0; background: transparent; cursor: pointer; padding: 0 2px;
  font-size: 11px; line-height: 1; color: var(--text-3); border-radius: 50%;
}
.up-chip .uc-x:hover { color: var(--danger); }
.up-chip.saved { background: #f2f4f9; border-color: var(--line); color: var(--text-2); }
.up-chip.saved:hover { border-color: var(--brand); color: var(--brand); }

/* 只读金额行 */
.calc-value {
  height: 32px; display: flex; align-items: center;
  padding: 0 9px; border-radius: var(--radius-sm);
  background: #f6f7fb; border: 1px solid var(--line-2);
  font-variant-numeric: tabular-nums; font-weight: 600; color: var(--brand-dark);
}

/* ============================ 明细表 ============================ */
.detail-table { border: 1px solid var(--line); border-radius: var(--radius-sm); overflow: hidden; }
.detail-table table { width: 100%; border-collapse: collapse; font-size: 13px; }
.detail-table th {
  background: #f8f9fd; padding: 7px 9px; text-align: left;
  font-size: 12.5px; font-weight: 600; color: var(--text-2);
  border-bottom: 1px solid var(--line);
}
.detail-table td { padding: 5px 9px; border-bottom: 1px solid var(--line-2); }
.detail-table td input, .detail-table td select {
  height: 28px; width: 100%; border: 1px solid var(--line);
  border-radius: 5px; padding: 0 7px; background: var(--card); outline: none;
}
.detail-table td input:focus, .detail-table td select:focus { border-color: var(--brand); }
.detail-table tfoot td {
  background: #fbfcff; font-weight: 600; padding: 8px 9px; border-bottom: none;
  font-variant-numeric: tabular-nums;
}
.detail-table .dt-w-num { width: 140px; }
.detail-table .dt-w-sm { width: 100px; }
.detail-actions { display: flex; gap: 8px; padding: 9px 0 2px; }

/* ============================ 弹窗 ============================ */
.modal-mask {
  position: fixed; inset: 0; background: rgba(18, 26, 45, .48);
  display: flex; align-items: flex-start; justify-content: center;
  padding: 40px 16px; overflow-y: auto; z-index: 900;
  animation: fadeIn .16s ease;
}
@keyframes fadeIn { from { opacity: 0 } to { opacity: 1 } }
@keyframes popIn { from { opacity: 0; transform: translateY(12px) scale(.985) } to { opacity: 1; transform: none } }
.modal {
  background: var(--card); border-radius: 12px; box-shadow: var(--shadow-lg);
  width: 720px; max-width: 100%; display: flex; flex-direction: column;
  max-height: calc(100vh - 80px); animation: popIn .2s cubic-bezier(.2,.8,.3,1);
  overflow: hidden;
}
.modal.w-560 { width: 560px; }
.modal.w-840 { width: 840px; }
.modal.w-960 { width: 960px; }
.modal.w-1040 { width: 1040px; }
.modal-head {
  display: flex; align-items: center; gap: 10px;
  padding: 13px 18px; border-bottom: 1px solid var(--line); flex: 0 0 auto;
}
.modal-head .mh-icon {
  width: 30px; height: 30px; border-radius: 9px; background: var(--brand-soft);
  color: var(--brand); display: grid; place-items: center; font-size: 15px; flex: 0 0 30px;
}
.modal-head .mh-icon svg { display: block; }
.modal-head .mh-title { font-size: 15px; font-weight: 650; }
.modal-head .mh-badge { font-size: 11.5px; color: var(--text-3); }
.modal-head .mh-tools { margin-left: auto; display: flex; align-items: center; gap: 3px; }
.modal-body { flex: 1; overflow-y: auto; }
/* 自定义内容（非 UI.form）的弹窗要补外层留白，否则内容贴着弹窗边框 */
.modal-body.mb-pad { padding: 16px 18px; }
.modal-foot {
  display: flex; align-items: center; gap: 9px;
  padding: 11px 18px; border-top: 1px solid var(--line);
  background: #fbfcff; flex: 0 0 auto; flex-wrap: wrap;
}
.modal-foot .mf-left { margin-right: auto; font-size: 12px; color: var(--text-3); }

/* ============================ 抽屉 ============================ */
.drawer-mask {
  position: fixed; inset: 0; background: rgba(18,26,45,.38); z-index: 950;
  animation: fadeIn .16s;
}
.drawer {
  position: fixed; top: 0; right: 0; bottom: 0; width: 380px; max-width: 92vw;
  background: var(--card); box-shadow: var(--shadow-lg); z-index: 951;
  display: flex; flex-direction: column;
  animation: slideIn .22s cubic-bezier(.2,.8,.3,1);
}
@keyframes slideIn { from { transform: translateX(30px); opacity: .4 } to { transform: none; opacity: 1 } }
.drawer-head {
  display: flex; align-items: center; gap: 8px; padding: 14px 18px;
  border-bottom: 1px solid var(--line); font-weight: 650;
}
.drawer-body { flex: 1; overflow-y: auto; padding: 14px 18px; }
.drawer-foot { padding: 12px 18px; border-top: 1px solid var(--line); background: #fbfcff; display: flex; gap: 9px; }

/* 字段设置列表 */
.fs-item {
  display: flex; align-items: center; gap: 9px; padding: 7px 0;
  border-bottom: 1px solid var(--line-2); font-size: 13px;
}
.fs-item .fsi-name { flex: 1; }
.fs-item .fsi-sys { font-size: 11px; color: var(--text-3); }
.fs-item .fsi-req { font-size: 11px; color: var(--danger); }
.fs-block-title { font-size: 12px; color: var(--text-3); margin: 14px 0 4px; font-weight: 600; }
.new-field-box { background: #f8f9fd; border-radius: var(--radius-sm); padding: 11px; margin-top: 14px; display: grid; gap: 7px; }
.new-field-box .nf-row { display: flex; gap: 7px; }

/* ============================ Toast ============================ */
.toast-wrap { position: fixed; top: 16px; right: 16px; z-index: 2000; display: flex; flex-direction: column; gap: 8px; }
.toast {
  background: #1e2740; color: #fff; padding: 9px 15px; border-radius: 8px;
  font-size: 13px; box-shadow: var(--shadow); display: flex; align-items: center; gap: 8px;
  animation: toastIn .2s cubic-bezier(.2,.8,.3,1);
  max-width: 380px;
}
@keyframes toastIn { from { opacity: 0; transform: translateX(20px) } to { opacity: 1; transform: none } }
/* 成功提示已整条去掉（果妈 2026-09-23：做成了的事不用弹）。现在只有三种提示：
   报错 / 警告用深底白字要抢眼；'note' 是「状态 + 下一步」的说明，浅底细边不抢戏 */
.toast.t-note {
  background: var(--card); border: 1px solid #dbe2f0; color: #2b3a5c;
  padding: 7px 13px; border-radius: 10px; font-size: 12.5px;
  box-shadow: 0 2px 8px rgba(23, 32, 64, .07);
}
.toast.t-note > span:first-child { color: #4a66a8; font-weight: 700; }
.toast.t-err { background: #c93636; }
.toast.t-warn { background: #b3720a; }

/* ============================ 选择器弹窗 ============================ */
.picker { width: 620px; }
.picker-search { padding: 12px 18px 6px; display: flex; align-items: center; }
.picker-search .search { flex: 1 1 auto; min-width: 0; }
.picker-list { max-height: 380px; overflow-y: auto; padding: 0 18px 12px; }
.picker-row {
  display: flex; align-items: center; gap: 12px; padding: 9px 11px;
  border-radius: var(--radius-sm); cursor: pointer; border: 1px solid transparent;
}
.picker-row:hover { background: var(--brand-soft); border-color: #d8e2ff; }
/* 多选选择器（如客户「共享成员」）：行前面一个勾选圈 */
.picker-row .pr-check { flex: none; width: 16px; height: 16px; border: 1.5px solid var(--line); border-radius: 4px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 11px; line-height: 1; color: transparent; }
.picker-row.is-picked { background: var(--brand-soft); border-color: #d8e2ff; }
.picker-row.is-picked .pr-check { background: var(--brand); border-color: var(--brand); color: #fff; }
.picker-row.is-picked .pr-check::after { content: '✓'; }
.picker-row .pr-main { flex: 1; min-width: 0; }
.picker-row .pr-name { font-weight: 500; }
.picker-row .pr-sub { font-size: 12px; color: var(--text-3); }
.picker-row .pr-right { font-size: 12.5px; color: var(--text-2); text-align: right; white-space: nowrap; }
.picker-empty { padding: 34px; text-align: center; color: var(--text-3); }

/* ============================ 详情页 ============================ */
.detail-head {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 13px 18px; display: flex; align-items: center; gap: 13px;
  margin-bottom: 12px; flex-wrap: wrap;
}
.detail-back { display: flex; align-items: center; gap: 5px; color: var(--text-2); cursor: pointer; font-size: 13px; }
.detail-back:hover { color: var(--brand); }
.detail-title { font-size: 16px; font-weight: 650; display: flex; align-items: center; gap: 9px; }
.detail-owner { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.detail-tools { display: flex; align-items: center; gap: 7px; width: 100%; padding-top: 10px; border-top: 1px solid var(--line-2); }

.tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--line); margin-bottom: 0; overflow-x: auto; }
.tab {
  padding: 9px 15px; cursor: pointer; font-size: 13.5px; color: var(--text-2);
  border-bottom: 2px solid transparent; white-space: nowrap; background: none; border-top: none; border-left: none; border-right: none;
}
.tab:hover { color: var(--brand); }
.tab.active { color: var(--brand); border-bottom-color: var(--brand); font-weight: 600; }
.tab-body {
  background: var(--card); border: 1px solid var(--line); border-top: none;
  border-radius: 0 0 var(--radius) var(--radius); padding: 18px;
}
.info-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 13px 20px; }
.info-grid.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.info-item .ii-label { font-size: 12.5px; color: var(--text-3); }
.info-item .ii-value { font-size: 13.5px; margin-top: 1px; word-break: break-all; }
.info-item .ii-sub { font-size: 11.5px; color: var(--text-3); margin-top: 2px; line-height: 1.5; }
.info-item.full { grid-column: 1 / -1; }

/* 时间轴 */
.timeline { position: relative; padding-left: 20px; }
.timeline::before { content: ''; position: absolute; left: 5px; top: 6px; bottom: 6px; width: 1px; background: var(--line); }
.tl-item { position: relative; padding: 0 0 16px 0; }
.tl-item::before {
  content: ''; position: absolute; left: -19px; top: 6px;
  width: 9px; height: 9px; border-radius: 50%; background: #fff;
  border: 2px solid var(--brand);
}
.tl-item.tl-ok::before { border-color: var(--ok); }
.tl-item.tl-warn::before { border-color: var(--warn); }
.tl-item.tl-danger::before { border-color: var(--danger); }
.tl-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.tl-date { font-size: 12.5px; color: var(--text-3); font-variant-numeric: tabular-nums; }
.tl-text { font-size: 13.5px; }
.tl-amount { font-weight: 600; font-variant-numeric: tabular-nums; }
.tl-by { font-size: 12.5px; color: var(--text-3); margin-left: auto; }

/* ============================ 审批链路 ============================ */
.flow { display: flex; align-items: center; gap: 0; }
.flow .fl-node {
  display: flex; align-items: center; gap: 5px;
  font-size: 12px; color: var(--text-3); white-space: nowrap;
}
.flow .fl-node.done { color: var(--ok); }
.flow .fl-node.now { color: var(--brand); font-weight: 600; }
.flow .fl-dot {
  width: 15px; height: 15px; border-radius: 50%; border: 1.5px solid currentColor;
  display: grid; place-items: center; font-size: 9px; flex: 0 0 15px;
}
.flow .fl-node.done .fl-dot { background: var(--ok); border-color: var(--ok); color: #fff; }
.flow .fl-line { width: 16px; height: 1.5px; background: var(--line); margin: 0 4px; }
.flow .fl-line.done { background: var(--ok); }

/* 审批链路的配置样子：一级一块「节点名 · 由谁审」 */
.flow-cfg { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.flow-cfg .fc-node { display: inline-flex; flex-direction: column; line-height: 1.35; }
.flow-cfg .fc-node b { font-size: 13px; font-weight: 600; }
.flow-cfg .fc-by { font-size: 11.5px; color: var(--text-3); }
.flow-cfg .fc-arrow { color: #cbd1de; font-size: 12px; }

/* 审批链路编辑器：一级一行「节点名 + 审批人」 */
.flow-edit { display: grid; gap: 9px; }
.flow-edit .fe-row { display: grid; grid-template-columns: minmax(0, 1fr) 218px auto; gap: 8px; align-items: center; }

/* 从右上角待办点进来时，标出那一条 */
tr.row-focus > td { background: #fff8e6 !important; }

/* ============================ 树（组织架构） ============================ */
.split { display: grid; grid-template-columns: 296px minmax(0, 1fr); gap: 14px; align-items: start; }
.panel { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.panel-head {
  display: flex; align-items: center; gap: 8px; padding: 11px 14px;
  border-bottom: 1px solid var(--line); font-weight: 600; font-size: 13.5px;
}
.panel-head .ph-tools { margin-left: auto; display: flex; gap: 6px; }
.panel-body { padding: 12px 14px; }
.tree { font-size: 13.5px; }
.tree-node { }
.tree-row {
  display: flex; align-items: center; gap: 6px; padding: 6px 8px;
  border-radius: var(--radius-sm); cursor: pointer;
}
.tree-row:hover { background: var(--grey-soft); }
.tree-row.active { background: var(--brand-soft); color: var(--brand-dark); font-weight: 600; }
.tree-row .tr-caret { width: 13px; font-size: 10px; color: var(--text-3); text-align: center; }
.tree-row .tr-drag { width: 11px; font-size: 12px; line-height: 1; color: #ccd3e2; cursor: grab; }
.tree-row:hover .tr-drag { color: var(--text-3); }
.tree-row.dragging { opacity: .4; }
.tree-row.drop-before { box-shadow: inset 0 2px 0 var(--brand); }
.tree-row.drop-after { box-shadow: inset 0 -2px 0 var(--brand); }
.tree-row.drop-inside { background: var(--brand-soft); box-shadow: inset 0 0 0 1px var(--brand); }
/* 部门成员：调入 / 调出 */
.mp-flag { font-size: 12px; color: var(--text-3); }
.mp-flag.mp-in { color: var(--brand); font-weight: 600; }
.mp-flag.mp-out { color: var(--warn); font-weight: 600; }
.mp-summary {
  margin: 6px 18px 14px; padding-top: 10px; border-top: 1px dashed var(--line);
  font-size: 12.5px; color: var(--text-2); line-height: 1.7;
}
.mp-summary b { color: var(--text); }
.tree-row .tr-name { flex: 1; }
.tree-row .tr-count { font-size: 11.5px; color: var(--text-3); }
.tree-children { padding-left: 15px; }

/* ============================ 角色权限 ============================ */
.perm-group { margin-bottom: 16px; }
.perm-group-title { font-size: 12.5px; color: var(--text-3); font-weight: 600; margin-bottom: 7px; }
.perm-checks { display: flex; flex-wrap: wrap; gap: 9px 20px; }
.perm-check { display: flex; align-items: center; gap: 6px; font-size: 13px; cursor: pointer; }
.role-list .tree-row { justify-content: space-between; }
.role-item { display: flex; align-items: center; gap: 8px; }
/* 角色从组织架构的岗位同步而来 —— 标一脚，管理员一眼看得出这个角色是哪儿来的 */
.role-tag {
  margin-left: 6px; padding: 0 5px; border-radius: 3px;
  font-size: 10.5px; font-style: normal; font-weight: 400;
  background: var(--grey-soft); color: var(--text-3);
}
/* 每一行自己带一个删除：不用先点开这个角色、再回到上面的工具条找「删除」 */
.role-list .tree-row .role-x {
  flex-shrink: 0; width: 18px; height: 18px; padding: 0; line-height: 1;
  border: 0; border-radius: 4px; background: transparent;
  color: #c2c9d6; font-size: 14px; cursor: pointer; visibility: hidden;
}
.role-list .tree-row:hover .role-x { visibility: visible; }
.role-list .tree-row .role-x:hover { background: var(--danger-soft); color: #d13b3b; }

/* ============================ 报表卡片 ============================ */
.report-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(238px, 1fr)); gap: 13px; }
.report-card {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 15px; cursor: pointer; transition: all .16s; box-shadow: var(--shadow-sm);
}
.report-card:hover { border-color: #c3d1ff; box-shadow: 0 8px 22px rgba(43,92,255,.12); transform: translateY(-2px); }
.report-card .rc-icon {
  width: 32px; height: 32px; border-radius: 9px; background: var(--brand-soft);
  color: var(--brand); display: grid; place-items: center; font-size: 15px; margin-bottom: 9px;
}
.report-card .rc-name { font-weight: 600; font-size: 13.5px; }
.report-card .rc-desc { font-size: 12px; color: var(--text-3); margin-top: 3px; }
.report-card.add-new { display: grid; place-items: center; text-align: center; color: var(--text-3); border-style: dashed; }
.report-card.add-new:hover { color: var(--brand); }

/* ============================ 账务核算 ============================ */
.calc-sheet { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.calc-row {
  display: flex; align-items: center; gap: 12px; padding: 11px 20px;
  border-bottom: 1px solid var(--line-2); font-size: 14px;
}
.calc-row:hover { background: #fafbff; }
.calc-row.sub { padding-left: 46px; font-size: 13px; color: var(--text-2); }
.calc-row.total {
  background: #f6f9ff; font-weight: 700; font-size: 16px;
  border-top: 2px solid var(--brand); border-bottom: none; padding: 15px 20px;
}
.calc-row .cr-label { flex: 1; }
.calc-row .cr-value { font-variant-numeric: tabular-nums; font-weight: 600; }
.calc-row.sub .cr-value { font-weight: 500; }
.calc-row .cr-drill {
  font-size: 11.5px; color: var(--brand); opacity: 0; transition: opacity .14s; cursor: pointer;
}
.calc-row:hover .cr-drill { opacity: 1; }
.calc-row.total .cr-value { color: var(--brand-dark); font-size: 20px; }
.calc-head { display: flex; align-items: center; gap: 12px; padding: 12px 20px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.calc-head select { height: 30px; border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 0 8px; background: var(--card); }
.radio-row { display: flex; align-items: center; gap: 14px; font-size: 13px; }
.radio-row label { display: flex; align-items: center; gap: 5px; cursor: pointer; }

/* 迷你条形图 */
.bars { display: grid; gap: 9px; }
.bar-row { display: grid; grid-template-columns: 108px 1fr 92px; gap: 10px; align-items: center; font-size: 12.5px; }
.bar-track { height: 9px; background: var(--grey-soft); border-radius: 5px; overflow: hidden; }
.bar-fill { height: 100%; background: linear-gradient(90deg, #6f92ff, #3f6dff); border-radius: 5px; }
.bar-fill.b-ok { background: linear-gradient(90deg, #4fd1a5, #10b981); }
.bar-fill.b-warn { background: linear-gradient(90deg, #fbc66a, #f59e0b); }
.bar-fill.b-danger { background: linear-gradient(90deg, #f89393, #ef4444); }
.bar-fill.b-info { background: linear-gradient(90deg, #b3a6ff, #7c5cff); }
.bar-val { text-align: right; font-variant-numeric: tabular-nums; color: var(--text-2); }

/* ============================ 智能录入 ============================ */
.ai-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) 330px; gap: 14px; align-items: start; }
/* 输入框要放得下下方的说明文字。这里必须写成 textarea.ai-textarea：
   通用规则 textarea.ctl 的权重更高，只写 .ai-textarea 会被它压成 66px */
textarea.ai-textarea { min-height: 280px; line-height: 1.75; }
.ai-examples { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.ai-example {
  font-size: 12px; padding: 3px 10px; border-radius: 13px;
  border: 1px dashed #c9d4ee; color: var(--brand-dark); background: #f8faff; cursor: pointer;
}
.ai-example:hover { border-style: solid; border-color: var(--brand); background: var(--brand-soft); }
.drop-zone {
  border: 1.5px dashed #cfd6e6; border-radius: var(--radius); padding: 26px 16px;
  text-align: center; cursor: pointer; background: #fbfcff; transition: all .16s;
}
.drop-zone:hover { border-color: var(--brand); background: var(--brand-soft); }
.drop-zone .dz-icon { font-size: 26px; color: #b8c2d8; }
.drop-zone .dz-main { font-size: 13px; color: var(--text-2); margin-top: 5px; }
.drop-zone .dz-sub { font-size: 11.5px; color: var(--text-3); margin-top: 3px; }
.file-line {
  display: flex; align-items: center; gap: 8px; font-size: 12.5px;
  padding: 7px 10px; background: #f8f9fd; border-radius: var(--radius-sm); margin-top: 7px;
}
.file-line .fl-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file-line .fl-size { color: var(--text-3); }
.recog-status {
  margin-top: 9px; font-size: 12.5px; color: var(--brand-dark);
  background: var(--brand-soft); border-radius: var(--radius-sm); padding: 8px 11px;
}
.recog-status .rs-bar { height: 4px; background: #d5e0ff; border-radius: 3px; margin-top: 6px; overflow: hidden; }
.recog-status .rs-fill { height: 100%; background: var(--brand); width: 0; transition: width .3s; }
.check-row { display: flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--text-2); margin-top: 12px; cursor: pointer; }
.draft-area { margin-top: 14px; }
.draft-head { display: flex; align-items: center; gap: 10px; margin-bottom: 9px; }
.draft-head .dh-title { font-weight: 650; font-size: 14px; }
.draft-head .dh-right { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.mini-select { height: 26px; border: 1px solid var(--line); border-radius: 5px; background: var(--card); font-size: 12.5px; padding: 0 5px; }
td.cell-warn { background: var(--warn-soft) !important; }

/* 草稿卡：一条草稿一张卡 —— 识别到哪个业务、填了哪些字段、还缺什么，一眼看完 */
.draft-list { margin-top: 14px; }
.draft-card { border: 1px solid var(--line); border-radius: var(--radius); margin-top: 12px; background: var(--card); box-shadow: var(--shadow-sm); }
.draft-card .dc-head {
  display: flex; align-items: center; gap: 10px; padding: 10px 14px;
  border-bottom: 1px solid var(--line-2); background: #fafbff;
  border-radius: var(--radius) var(--radius) 0 0;
}
.draft-card .dc-no {
  width: 22px; height: 22px; border-radius: 50%; background: var(--brand-soft); color: var(--brand-dark);
  font-size: 12px; font-weight: 650; display: flex; align-items: center; justify-content: center; flex: none;
}
.draft-card .dc-title { font-size: 13.5px; font-weight: 650; }
.draft-card .dc-head .dh-right { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.draft-card .dc-body { padding: 12px 14px 14px; }
.draft-card .dc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(212px, 1fr)); gap: 10px 14px; }
.draft-card .dc-f { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.draft-card .dc-f.full { grid-column: 1 / -1; }
.draft-card .dc-f > label { font-size: 12px; color: var(--text-2); }
.draft-card .dc-f .ctl { height: 30px; font-size: 12.5px; }
.draft-card .dc-f textarea.ctl { height: auto; min-height: 56px; line-height: 1.6; }
.draft-card .dc-tips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 11px; }
.draft-card .dc-reason { font-size: 12px; color: var(--text-3); margin-top: 9px; }
.dc-tag {
  font-size: 11.5px; padding: 2px 8px; border-radius: 10px;
  border: 1px solid var(--line); color: var(--text-2); background: #f8f9fd;
}
.dc-tag.ok { color: #0f9d70; border-color: #bfe6cf; background: var(--ok-soft); }
.dc-tag.new { color: #b4740a; border-color: #f6ddb0; background: var(--warn-soft); }
.dc-tag.miss { color: var(--danger); border-color: #f7cccc; background: var(--danger-soft); }

/* ============================ 工作台 ============================ */
.hello-card {
  background: linear-gradient(120deg, #2b5cff, #5b7cff 55%, #7f9dff);
  color: #fff; border-radius: var(--radius); padding: 18px 22px;
  display: flex; align-items: center; gap: 14px; margin-bottom: 14px;
  box-shadow: 0 10px 26px rgba(43,92,255,.22);
}
.hello-card .hc-avatar {
  width: 48px; height: 48px; border-radius: 50%; background: rgba(255,255,255,.22);
  display: grid; place-items: center; font-size: 17px; font-weight: 600; flex: 0 0 48px;
}
.hello-card .hc-name { font-size: 19px; font-weight: 650; }
.hello-card .hc-sub { font-size: 12.5px; opacity: .85; margin-top: 1px; }
.hello-card .hc-date { margin-left: auto; text-align: right; font-size: 12.5px; opacity: .9; }
.hello-card .hc-date b { display: block; font-size: 15px; opacity: 1; margin-bottom: 1px; }

.panel-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-bottom: 14px; }
.mini-panel {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px;
  box-shadow: var(--shadow-sm);
}
.mini-panel h4 { margin: 0 0 9px; font-size: 13.5px; display: flex; align-items: center; gap: 6px; }
.mini-panel h4 .mp-link { margin-left: auto; font-size: 12px; font-weight: 400; }
.mp-row { display: flex; align-items: center; justify-content: space-between; padding: 4px 0; font-size: 13px; }
.mp-row .mp-num { font-weight: 650; font-variant-numeric: tabular-nums; }
.mp-row .mp-num.warn { color: var(--warn); }
.mp-row .mp-num.danger { color: var(--danger); }
.mp-row .mp-num.ok { color: var(--ok); }

.quick-row { display: flex; gap: 9px; flex-wrap: wrap; margin-bottom: 14px; }
.quick-btn {
  display: flex; align-items: center; gap: 7px; padding: 9px 15px;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  cursor: pointer; font-size: 13px; transition: all .15s; box-shadow: var(--shadow-sm);
}
.quick-btn:hover { border-color: #c3d1ff; color: var(--brand); transform: translateY(-1px); }
.quick-btn .qb-icon { font-size: 15px; }

.expire-list { display: grid; gap: 2px; }
.expire-row {
  display: flex; align-items: center; gap: 12px; padding: 9px 12px;
  border-radius: var(--radius-sm); font-size: 13.5px; cursor: pointer;
}
.expire-row:hover { background: #fafbff; }
.expire-row .er-name { font-weight: 500; width: 190px; }
.expire-row .er-date { color: var(--text-2); font-variant-numeric: tabular-nums; }
.expire-row .er-tag { margin-left: auto; }

/* ============================ 工具类 ============================ */
.mt-0 { margin-top: 0 } .mt-8 { margin-top: 8px } .mt-12 { margin-top: 12px }
.mt-16 { margin-top: 16px } .mt-20 { margin-top: 20px }
.mb-0 { margin-bottom: 0 } .mb-8 { margin-bottom: 8px } .mb-12 { margin-bottom: 12px } .mb-16 { margin-bottom: 16px }
.flex { display: flex } .flex-center { display: flex; align-items: center } .gap-8 { gap: 8px } .gap-12 { gap: 12px }
.ml-auto { margin-left: auto }
.t2 { color: var(--text-2) } .t3 { color: var(--text-3) }
.fz-12 { font-size: 12px } .fz-13 { font-size: 13px } .fz-15 { font-size: 15px }
.bold { font-weight: 600 } .nowrap { white-space: nowrap }
.hidden { display: none !important }
.divider { height: 1px; background: var(--line-2); margin: 14px 0 }
.note-box {
  background: #f8faff; border: 1px solid #e3eaff; border-left: 3px solid var(--brand);
  border-radius: var(--radius-sm); padding: 10px 13px; font-size: 12.5px; color: var(--text-2);
  line-height: 1.7;
}
.note-box b { color: var(--text); }
.note-box.warn { background: #fffaf0; border-color: #ffe9c2; border-left-color: var(--warn); }
.section-title { font-size: 14px; font-weight: 650; margin: 0 0 10px; display: flex; align-items: center; gap: 7px; }
.section-title .st-sub { font-size: 12px; font-weight: 400; color: var(--text-3); }
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 18px; box-shadow: var(--shadow-sm); }
.two-col { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; align-items: start; }

/* 区域三级联动选择器：三列并排，省 → 市 → 区县 */
.rg-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; padding: 4px 2px 0; }
.rg-col label { display: block; font-size: 12.5px; color: var(--text-2); margin-bottom: 6px; }
.rg-col select { width: 100%; height: 36px; }
.rg-col select:disabled { background: var(--bg); color: var(--text-3); }
.rg-pick { margin-top: 14px; padding: 10px 12px; border-radius: var(--radius-sm);
  background: var(--brand-soft); color: var(--text-2); font-size: 13px; }
/* 选择器搜索行右侧的「新建 xxx」入口 */
.picker-search .pk-add { flex: none; margin-left: 12px; height: 34px; padding: 0 14px; cursor: pointer;
  border: 1px solid var(--brand); border-radius: var(--radius-sm); background: #fff;
  color: var(--brand); font-size: 13px; white-space: nowrap; }
.picker-search .pk-add:hover { background: var(--brand-soft); }

/* ------------------------------ 变更历史 / 编辑留痕 ------------------------------
   表单顶部「上次由谁修改 + 变更历史」、历史弹窗、客户详情「变更历史」页签都用这套 */
.edit-meta {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin: 0 0 14px; padding: 8px 12px;
  background: var(--brand-soft); border-radius: var(--radius-sm);
  font-size: 12.5px; color: var(--text-2);
}
.edit-meta .em-text b { color: var(--text); font-weight: 600; }
.edit-meta .btn-link { margin-left: auto; font-size: 12.5px; }

.hist-wrap { max-height: 60vh; overflow: auto; }
.hist-head {
  padding: 8px 12px; margin-bottom: 14px; background: var(--bg);
  border-radius: var(--radius-sm); font-size: 12.5px; color: var(--text-2);
}
.hist-head b { color: var(--text); font-weight: 600; }

.tl-diff { margin: 6px 0 0; display: flex; flex-direction: column; gap: 3px; }
.tl-field { display: flex; align-items: baseline; gap: 8px; font-size: 12.5px; flex-wrap: wrap; }
.tl-field .tf-name { color: var(--text-2); min-width: 76px; }
.tl-field .tf-from { color: var(--text-3); text-decoration: line-through; }
.tl-field .tf-arrow { color: var(--text-3); }
.tl-field .tf-to { color: var(--text); font-weight: 500; }
.tl-note { margin-top: 4px; font-size: 12.5px; color: var(--text-3); }

.cf-tip {
  margin-top: 12px; padding: 9px 12px; background: var(--warn-soft);
  border-radius: var(--radius-sm); font-size: 12.5px; color: var(--text-2);
}

/* ==================== 上手引导（每家企业第一次进来） ==================== */
/* 问候卡右侧的展开 / 收起按钮（卡片是蓝底，按钮跟着用半透明白） */
.hello-card .guide-toggle {
  margin-left: auto; flex: none; height: 30px; padding: 0 13px;
  display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid rgba(255, 255, 255, .5); border-radius: 999px;
  background: rgba(255, 255, 255, .16); color: #fff;
  font-size: 12.5px; cursor: pointer; white-space: nowrap; transition: background .15s;
}
.hello-card .guide-toggle:hover { background: rgba(255, 255, 255, .3); }
.hello-card .guide-toggle + .hc-date { margin-left: 14px; }

.guide-card { margin-bottom: 14px; }
.guide-card .section-title { margin-bottom: 12px; }
.guide-x { margin-left: auto; font-weight: 400; }

.guide-bar {
  position: relative; height: 22px; border-radius: 999px;
  background: var(--line-2); overflow: hidden; margin-bottom: 12px;
}
.guide-bar i {
  display: block; height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, var(--brand), #6f8cff); transition: width .3s;
}
.guide-bar-txt {
  position: absolute; inset: 0; display: grid; place-items: center;
  font-size: 12px; font-weight: 600; color: var(--text-2); letter-spacing: .3px;
}

.guide-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.guide-step {
  display: flex; align-items: flex-start; gap: 11px;
  padding: 11px 13px; border: 1px solid var(--line);
  border-radius: var(--radius-sm); background: #fbfcff;
}
.guide-step.done { background: #f7fdfa; border-color: #d8f0e5; }
.guide-step .gs-no {
  flex: none; width: 22px; height: 22px; border-radius: 50%;
  display: grid; place-items: center; font-size: 12px; font-weight: 650;
  background: var(--brand-soft); color: var(--brand);
}
.guide-step.done .gs-no { background: var(--ok-soft); color: var(--ok); }
.guide-step .gs-main { flex: 1; min-width: 0; }
.guide-step .gs-title { font-size: 13.5px; font-weight: 620; display: flex; align-items: center; gap: 7px; }
.guide-step.done .gs-title { color: var(--text-2); }
.guide-step .gs-ok { font-size: 11px; font-weight: 400; color: var(--ok); }
.guide-step .gs-desc { font-size: 12.5px; color: var(--text-2); margin-top: 3px; line-height: 1.65; }
.guide-step .gs-acts { flex: none; display: flex; align-items: center; gap: 7px; padding-top: 1px; }

@media (max-width: 860px) {
  .guide-step { flex-wrap: wrap; }
  .guide-step .gs-acts { width: 100%; padding-left: 33px; }
}