:root {
  --ink: #15241f;
  --muted: #6b7f78;
  --line: #e3eae6;
  --bg: #f4f7f5;
  --card: #fff;
  --brand: #0d3b33;
  --brand-2: #11554a;
  --teal: #0f766e;
  --teal-2: #0b5f58;
  --gold: #c9a227;
  --gold-2: #e8c964;
  --ok: #067647;
  --danger: #b42318;
  --warn: #b54708;
  --info: #175cd3;
  --shadow: 0 1px 2px rgba(16, 40, 34, .04), 0 8px 24px rgba(16, 40, 34, .05);
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: "Segoe UI", "PingFang SC", "Microsoft YaHei", "Hiragino Sans GB", sans-serif;
  background: var(--bg);
  color: var(--ink);
  font-size: 14px;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--teal); text-decoration: none; }
a:hover { color: var(--teal-2); }
h1, h2, h3, h4 { margin: 0; font-weight: 650; }
p { line-height: 1.8; }
.muted { color: var(--muted); }
.small { font-size: 12px; }
.nowrap { white-space: nowrap; }
.right { text-align: right; }
.center { text-align: center; }
.mono { font-family: ui-monospace, Consolas, "SFMono-Regular", monospace; }
.strong { font-weight: 650; }
.hidden { display: none !important; }

/* ---------- 滚动条：细、圆角、低对比，替掉系统默认的粗灰条 ---------- */
/* 统一 10px 轨道 + 3px 留白 = 4px 滑块，侧栏与主区一样粗，并排看不会一粗一细 */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: #cfdad5; border: 3px solid transparent; border-radius: 999px; background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover { background: #b2c2bb; background-clip: content-box; }
::-webkit-scrollbar-corner { background: transparent; }
/* 只给不支持 ::-webkit-scrollbar 的浏览器（Firefox）用标准属性，
   否则 scrollbar-width 会继承到所有元素，连带把上面 WebKit 的写法全废掉 */
@supports not selector(::-webkit-scrollbar) {
  html { scrollbar-width: thin; scrollbar-color: #c6d3ce transparent; }
  .sidebar nav { scrollbar-color: rgba(255, 255, 255, .22) transparent; }
}

/* ---------- 布局 ---------- */
.layout { display: flex; min-height: 100vh; }
.sidebar {
  width: 236px; flex: 0 0 236px; color: #d7e5df;
  background: linear-gradient(180deg, var(--brand) 0%, #08201b 100%);
  display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh;
  z-index: 40; transition: width .18s ease, flex-basis .18s ease;
}
.sidebar-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 16px 14px 12px 18px; border-bottom: 1px solid rgba(255, 255, 255, .08); }
.brand strong { display: block; color: #fff; font-size: 18px; letter-spacing: .06em; }
.brand small { color: var(--gold-2); font-size: 11px; letter-spacing: .04em; }
.nav-collapse {
  flex: 0 0 26px; width: 26px; height: 26px; border-radius: 7px; cursor: pointer;
  background: transparent; color: #a9c3ba; border: 1px solid rgba(255, 255, 255, .16);
  font-size: 14px; line-height: 1; display: inline-flex; align-items: center; justify-content: center;
}
.nav-collapse:hover { color: #fff; border-color: rgba(255, 255, 255, .34); background: rgba(255, 255, 255, .06); }

.sidebar nav { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 8px 8px 14px; }
.sidebar nav::-webkit-scrollbar { width: 8px; }
.sidebar nav::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .18); border: 2px solid transparent; background-clip: content-box; }
.sidebar nav::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, .34); background-clip: content-box; }

/* 每个条目：图标 + 文字，统一 16px 图标与 8px 间距，避免高低不齐 */
.sidebar nav a, .nav-group-h {
  display: flex; align-items: center; gap: 9px; width: 100%;
  color: #b7cbc4; padding: 6px 10px; border-radius: 8px; font-size: 12.8px; line-height: 1.5;
  font-family: inherit; text-align: left; background: none; border: 0; cursor: pointer;
  transition: background .12s ease, color .12s ease;
  /* 中文默认可以在任意字之间断行，容器一窄就会出现「客户与 / 课题组」这种折行，
     把整行高度撑成两倍、和旁边的单行条目对不齐。这里统一按单行处理：
     nowrap 管住换行，keep-all 管住中日韩文本的断词点，超长用省略号收尾。 */
  flex-wrap: nowrap; white-space: nowrap; word-break: keep-all;
}
.sidebar nav a .nav-t { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; word-break: keep-all; }
.nav-i { flex: 0 0 16px; opacity: .78; }
/* 兜底：侧栏条目里任何一层元素都不许换行，避免以后加了徽标/角标又把一行拆成两行 */
.sidebar nav a, .sidebar nav a * { white-space: nowrap; }
/* 行高固定，条目再多也保持等距；长短标签不会让某一项突然变高 */
.sidebar nav a { min-height: 31px; }
.sidebar nav a:hover, .nav-group-h:hover { background: rgba(255, 255, 255, .06); color: #fff; }
.sidebar nav a:hover .nav-i { opacity: 1; }
.sidebar nav a.active { background: rgba(201, 162, 39, .16); color: #fff; font-weight: 650; box-shadow: inset 2px 0 0 var(--gold); }
.sidebar nav a.active .nav-i { opacity: 1; color: var(--gold-2); }
.nav-home { font-weight: 600; color: #eaf3ef; }

/* 分组：可折叠，标题压成弱化的「准绳」，条目才是主体 */
.nav-group { margin-top: 6px; padding-top: 8px; border-top: 1px solid rgba(255, 255, 255, .07); }
.nav-group-h { color: #95b1a8; font-size: 11.5px; font-weight: 500; letter-spacing: .08em; padding: 4px 10px 8px; }
.nav-group-t { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; word-break: keep-all; }
.nav-caret { flex: 0 0 12px; opacity: .5; transition: transform .16s ease; }
.nav-group.is-open .nav-caret { transform: rotate(90deg); opacity: .8; }
.nav-items { display: none; }
.nav-group.is-open .nav-items { display: block; }

.user-meta { line-height: 1.6; }
.user-box { border-top: 1px solid rgba(255, 255, 255, .08); padding: 12px 14px 14px 18px; font-size: 12px; color: #9db3ab; }
.user-box .name { color: #fff; font-size: 14px; }
.user-links { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; }
.user-links a { display: inline-flex; align-items: center; gap: 6px; color: #c3d5ce; }
.user-links .nav-i { flex: 0 0 16px; width: 16px; height: 16px; }

/* 折叠成图标栏：宽度收窄、只留图标，鼠标悬停有 title 提示（仅宽屏） */
@media (min-width: 861px) {
  body.nav-rail .sidebar { width: 62px; flex-basis: 62px; }
  body.nav-rail .sidebar-head { justify-content: center; padding: 14px 0 10px; }
  body.nav-rail .brand, body.nav-rail .nav-t, body.nav-rail .nav-group-t, body.nav-rail .nav-caret,
  body.nav-rail .user-meta { display: none; }
  body.nav-rail .nav-collapse { transform: rotate(180deg); }
  /* 收起态不能留滚动条：8px 轨道会把 62px 挤成 54px，整列图标就偏左了 */
  body.nav-rail .sidebar nav { padding: 8px 0 12px; scrollbar-width: none; }
  body.nav-rail .sidebar nav::-webkit-scrollbar { width: 0; height: 0; }
  body.nav-rail .sidebar nav a { justify-content: center; padding: 9px 0; border-radius: 0; }
  /* 分隔只留短横线一根，别再叠一条全宽的边框 */
  body.nav-rail .nav-group { border-top: 0; padding-top: 0; margin-top: 0; }
  body.nav-rail .nav-group-h { justify-content: center; padding: 7px 0; }
  body.nav-rail .nav-group-h::after {
    content: ''; display: block; width: 18px; height: 1px; background: rgba(255, 255, 255, .2);
  }
  body.nav-rail .nav-group-h:hover::after { background: var(--gold); }
  body.nav-rail .nav-items { display: block; }
  body.nav-rail .user-box { padding: 10px 0 12px; text-align: center; }
  body.nav-rail .user-links { justify-content: center; margin-top: 0; }
}
.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.topbar {
  background: #fff; border-bottom: 1px solid var(--line); padding: 0 20px;
  height: 56px; display: flex; align-items: center; gap: 14px; position: sticky; top: 0; z-index: 30;
}
.topbar h1 {
  font-size: 17px; font-weight: 650;
  /* 顶栏横向塞满了按钮，标题又是中文长词（如「客户与课题组」）：
     以前 h1 没有宽度约束，会被挤到十几像素宽，中文便逐字竖排折行。
     现在标题按自身宽度占位、不参与压缩（要缩先缩搜索框），只在超长时省略。 */
  flex: 0 0 auto; max-width: 46%;
  white-space: nowrap; word-break: keep-all;
  overflow: hidden; text-overflow: ellipsis;
}
.topbar .spacer { flex: 1; }
/* 顶栏全局搜索：放在标题后面而不是右上角，输入框能被看见，也不会挤掉待办角标 */
.topbar-search { margin-left: 6px; flex: 0 1 320px; min-width: 120px; }
.topbar-search input[type=search] {
  width: 100%; padding: 6px 10px; border-radius: 8px; border: 1px solid var(--line);
  background: #f7f9f8; font-size: 12.5px;
}
.topbar-search input[type=search]:focus { background: #fff; border-color: #b9cbc3; outline: none; }
.topbar-search .sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
@media (max-width: 900px) { .topbar-search { display: none; } }
.icon-btn {
  border: 1px solid var(--line); background: #fff; color: var(--ink); width: 32px; height: 32px;
  border-radius: 8px; cursor: pointer; font-size: 15px; line-height: 1; display: inline-flex; align-items: center; justify-content: center;
}
.icon-btn:hover { border-color: #c8d6d0; }
.topbar-user { font-size: 12px; color: var(--muted); text-align: right; line-height: 1.4; }
.topbar-user b { display: block; color: var(--ink); font-size: 13px; }
.content { padding: 16px 20px 28px; flex: 1; min-width: 0; }
.site-foot { padding: 12px 20px 20px; color: #9aaba4; font-size: 11px; display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.site-foot__site { color: #6f8a80; text-decoration: none; border: 1px solid var(--line); border-radius: 999px; padding: 3px 10px; white-space: nowrap; }
.site-foot__site:hover { color: var(--brand); border-color: rgba(13, 59, 51, .3); background: #f2f7f4; }
.nav-mask { display: none; }

/* ---------- 卡片 ---------- */
.card { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; margin-bottom: 12px; box-shadow: var(--shadow); min-width: 0; }
.card > h2, .card > h3 { font-size: 15px; margin-bottom: 10px; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.card > h2 .sub, .card > h3 .sub { font-size: 12px; color: var(--muted); font-weight: 400; }
.card.pad-0 { padding: 0; overflow: hidden; }
.card-h { padding: 13px 16px; border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.card-h h2, .card-h h3 { margin: 0; font-size: 15px; }
.card-b { padding: 14px 16px; }
.grid { display: grid; gap: 12px; }
.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)); }
.row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.row.between { justify-content: space-between; }
.row.end { justify-content: flex-end; }
.stack { display: flex; flex-direction: column; gap: 10px; }

/* KPI */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; margin-bottom: 12px; }
.kpi { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; box-shadow: var(--shadow); min-height: 86px; display: flex; flex-direction: column; }
.kpi .lab { font-size: 12px; color: var(--muted); }
.kpi .num { font-size: 24px; font-weight: 700; letter-spacing: -.02em; margin-top: 3px; }
.kpi .sub { margin-top: auto; padding-top: 6px; font-size: 12px; color: var(--muted); }
.kpi.teal .num { color: var(--teal); }
.kpi.gold .num { color: #8a6d12; }
.kpi.red .num { color: var(--danger); }
.kpi.warn .num { color: var(--warn); }
.kpi.ok .num { color: var(--ok); }
/* KPI 可点：点进去就是那个数字背后的那批单，不是模块首页 */
a.kpi { color: inherit; text-decoration: none; transition: border-color .15s, box-shadow .15s, transform .15s; }
a.kpi:hover { border-color: var(--teal); box-shadow: 0 2px 10px rgba(26,107,90,.12); transform: translateY(-1px); }
a.kpi:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }
a.kpi .lab::after { content: ' →'; color: #b6c3bf; font-weight: 400; }
a.kpi:hover .lab::after { color: var(--teal); }

/* ---------- 表格 ---------- */
.table-wrap { overflow: auto; max-width: 100%; }
table.data { width: 100%; border-collapse: collapse; font-size: 13px; }
table.data th, table.data td { padding: 9px 10px; border-bottom: 1px solid #eef3f0; text-align: left; vertical-align: middle; }
table.data th { background: #f7faf8; color: #52655e; font-weight: 600; font-size: 12px; white-space: nowrap; position: sticky; top: 0; }
table.data tbody tr:hover { background: #fbfdfc; }
table.data td.num, table.data th.num { text-align: right; }
table.data td.actions { white-space: nowrap; }
table.data td.bad { color: var(--danger); font-weight: 650; }
table.data .strong { font-weight: 650; }
table.data.compact th, table.data.compact td { padding: 6px 8px; }
table.data tfoot td { font-weight: 650; background: #f7faf8; }
.empty { padding: 28px 16px; text-align: center; color: var(--muted); font-size: 13px; }
.empty b { display: block; color: var(--ink); margin-bottom: 4px; }
.empty .btn { margin-top: 8px; }

/* 单据链路：客户 → 报价 → 合同 → 订单 → 项目 → 样本 → 报告 → 发票 → 回款 */
.chain-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin: 0 0 12px; padding: 7px 10px; border: 1px solid var(--line); border-radius: 10px; background: #fbfdfc; font-size: 12px; }
.chain-h { color: var(--muted); font-size: 11px; letter-spacing: .06em; margin-right: 2px; }
.chain-node { display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; border-radius: 999px; color: #4a635b; text-decoration: none; border: 1px solid transparent; white-space: nowrap; }
.chain-node:hover { background: #eef6f2; border-color: #d6e8df; color: var(--teal-2); }
.chain-node.current { background: var(--teal); color: #fff; font-weight: 600; }
.chain-node.current:hover { background: var(--teal-2); color: #fff; }
.chain-node.todo { color: #94a7a0; border-style: dashed; border-color: #dfe8e3; }
.chain-node.todo::after { content: "待补"; font-size: 10px; opacity: .75; }
.chain-node.optional { color: #a9b8b2; }
.chain-n { display: inline-flex; min-width: 16px; height: 16px; align-items: center; justify-content: center; padding: 0 4px; border-radius: 999px; background: #e8f1ec; color: #3d5c52; font-size: 10px; font-weight: 600; }
.chain-node.current .chain-n { background: rgba(255,255,255,.28); color: #fff; }
.chain-sep { color: #c8d6d0; }

/* 下一步提示条：状态条下方一行，告诉人「现在该干什么」 */
.next-step { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; margin: 0 0 12px; padding: 8px 12px; border-left: 3px solid var(--teal); border-radius: 0 8px 8px 0; background: #f2f8f5; font-size: 12px; }
.next-step-k { color: var(--muted); font-size: 11px; letter-spacing: .06em; }
.next-step-l { color: var(--teal); font-weight: 600; }
.next-step-t { color: #4a635b; }

/* ---------- 标签 / 徽章 ---------- */
.tag { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 11px; line-height: 1.7; white-space: nowrap; background: #f0f4f2; color: #52655e; border: 1px solid transparent; }
.tag-ok { background: #e8f6ef; color: var(--ok); border-color: #c3e8d7; }
.tag-info { background: #eaf2fe; color: var(--info); border-color: #c9ddfb; }
.tag-warn { background: #fdf3e6; color: var(--warn); border-color: #f3ddb9; }
.tag-danger { background: #fdeceb; color: var(--danger); border-color: #f6cdc9; }
.tag-gold { background: #fbf4dd; color: #8a6d12; border-color: #efe0ad; }
.tag-muted { background: #f1f4f3; color: #6b7f78; }
.chip { display: inline-block; padding: 2px 8px; border-radius: 6px; background: #f2f6f4; color: #40564e; font-size: 12px; }
.dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--teal); margin-right: 6px; }
.dot.red { background: var(--danger); }
.dot.gold { background: var(--gold); }

/* ---------- 按钮 ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 7px 13px; border-radius: 8px; border: 1px solid var(--line);
  background: #fff; color: var(--ink); font-size: 13px; cursor: pointer; line-height: 1.4;
  text-decoration: none; white-space: nowrap; font-family: inherit;
}
.btn:hover { border-color: #c3d3cc; color: var(--ink); }
.btn.primary { background: var(--teal); border-color: var(--teal); color: #fff; }
.btn.primary:hover { background: var(--teal-2); border-color: var(--teal-2); color: #fff; }
.btn.gold { background: var(--gold); border-color: var(--gold); color: #221c07; }
.btn.danger { background: #fff; border-color: #e7bdb8; color: var(--danger); }
.btn.danger:hover { background: #fdeceb; }
.btn.ghost { background: transparent; }
.btn.sm { padding: 4px 9px; font-size: 12px; border-radius: 6px; }
.btn.block { width: 100%; }
.btn[disabled] { opacity: .5; cursor: not-allowed; }
.link-btn { border: 0; background: none; color: var(--teal); cursor: pointer; font-size: 13px; padding: 0; font-family: inherit; }
.link-btn.danger { color: var(--danger); }

/* ---------- 表单 ---------- */
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; }
.form-grid.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.form-grid.cols-1 { grid-template-columns: 1fr; }
.field { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.field.full { grid-column: 1 / -1; }
.field > label { font-size: 12px; color: #52655e; font-weight: 600; }
.field > label .req { color: var(--danger); margin-left: 2px; }
input[type=text], input[type=number], input[type=date], input[type=datetime-local], input[type=password], input[type=email], input[type=search], select, textarea {
  width: 100%; padding: 7px 9px; border: 1px solid #d7e2dd; border-radius: 7px;
  font-size: 13px; color: var(--ink); background: #fff; font-family: inherit; outline: none;
}
input:focus, select:focus, textarea:focus { border-color: var(--teal); box-shadow: 0 0 0 3px rgba(15, 118, 110, .1); }
textarea { min-height: 74px; resize: vertical; line-height: 1.6; }
.field .hint { font-size: 11px; color: var(--muted); }
.filters { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; padding: 10px 14px; border-bottom: 1px solid var(--line); background: #fbfdfc; }
.filters input, .filters select { width: auto; min-width: 130px; padding: 6px 9px; }
.filters .grow { flex: 1; }
.check { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: #40564e; }
.check input { width: auto; }
.form-actions { display: flex; gap: 10px; justify-content: flex-end; padding-top: 6px; }

/* ---------- 提示 ---------- */
.alert { padding: 10px 13px; border-radius: 9px; margin-bottom: 12px; font-size: 13px; border: 1px solid; }
.alert-success { background: #eaf7f0; border-color: #c3e8d7; color: #06603f; }
.alert-error { background: #fdeceb; border-color: #f6cdc9; color: #8f1d14; }
.alert-warn { background: #fdf6e8; border-color: #f0dfb5; color: #7a4d06; }
.alert-info { background: #eaf2fe; border-color: #c9ddfb; color: #12408f; }
.notice { font-size: 12px; color: var(--muted); background: #f7faf8; border: 1px dashed #d9e4df; border-radius: 8px; padding: 8px 11px; }

/* ---------- 分页 ---------- */
.pager { display: flex; align-items: center; gap: 6px; padding: 12px 14px; flex-wrap: wrap; }
.pager .pg, .pager .pg-dot, .pager .pg-info { font-size: 12px; color: var(--muted); }
.pager .pg { padding: 3px 9px; border: 1px solid var(--line); border-radius: 6px; color: #40564e; background: #fff; }
.pager .pg:hover { border-color: #bcd0c8; }
.pager .pg.is-cur { background: var(--teal); border-color: var(--teal); color: #fff; }
.pager .pg-info { margin-left: auto; }

/* ---------- 进度 / 时间轴 ---------- */
.bar { height: 6px; border-radius: 999px; background: #edf2ef; overflow: hidden; }
.bar > i { display: block; height: 100%; background: var(--teal); border-radius: 999px; }
.bar.bar-warn > i { background: var(--gold); }
.bar.bar-danger > i { background: var(--danger); }
.timeline { position: relative; padding-left: 18px; }
.timeline::before { content: ""; position: absolute; left: 5px; top: 4px; bottom: 4px; width: 1px; background: #dfe8e3; }
.tl-item { position: relative; padding: 0 0 14px 8px; font-size: 13px; }
.tl-item::before { content: ""; position: absolute; left: -16px; top: 5px; width: 8px; height: 8px; border-radius: 50%; background: #cfdcd6; border: 2px solid #fff; }
.tl-item.on::before { background: var(--teal); }
.tl-item .t { color: var(--muted); font-size: 11px; }
.tl-item .d { color: #40564e; margin-top: 2px; }

/* 流程步骤 */
.steps { display: flex; flex-wrap: wrap; gap: 4px; }
.steps .step { font-size: 11px; color: #7d918a; padding: 3px 8px; border-radius: 999px; background: #f2f6f4; }
.steps .step.on { background: #e8f6ef; color: var(--ok); font-weight: 600; }
.steps .step.cur { background: #fbf4dd; color: #8a6d12; font-weight: 600; }
.steps .sep { color: #c8d6d0; font-size: 11px; align-self: center; }

/* 详情描述列表 */
.dl { display: grid; grid-template-columns: 110px 1fr 110px 1fr; gap: 8px 12px; font-size: 13px; }
.dl dt { color: var(--muted); font-size: 12px; }
.dl dd { margin: 0; }
.dl .full { grid-column: 2 / -1; }
.detail-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; }
.detail-head .title { font-size: 19px; font-weight: 700; }
.detail-head .meta { color: var(--muted); font-size: 12px; margin-top: 4px; display: flex; gap: 12px; flex-wrap: wrap; }

/* 登录页 */
.login-wrap { min-height: 100vh; display: grid; grid-template-columns: 1.05fr .95fr; background: #f4f7f5; }
.login-side { background: linear-gradient(160deg, #0d3b33 0%, #08201b 100%); color: #e7f1ed; padding: 56px 52px; display: flex; flex-direction: column; justify-content: space-between; }
.login-side .brand strong { font-size: 24px; letter-spacing: .08em; }
.login-side h2 { font-size: 28px; line-height: 1.5; margin-top: 40px; color: #fff; }
.login-side h2 em { color: var(--gold-2); font-style: normal; }
.login-side p { color: #a9c3ba; font-size: 13px; max-width: 420px; }
.login-side .points { display: grid; gap: 10px; margin-top: 22px; }
.login-side .points div { font-size: 13px; color: #cfe0d9; }
.login-box { display: flex; align-items: center; justify-content: center; padding: 30px; }
.login-card { width: 100%; max-width: 380px; background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 30px 28px; box-shadow: var(--shadow); }
.login-card h1 { font-size: 20px; margin-bottom: 6px; }
.login-card .sub { color: var(--muted); font-size: 12px; margin-bottom: 20px; }
.login-card .field { margin-bottom: 12px; }
.demo-users { margin-top: 16px; border-top: 1px dashed var(--line); padding-top: 12px; }
.demo-users .row { gap: 6px; }
.demo-users .chip { cursor: pointer; }

/* 登录页底部：通往宣传官网（手机端左栏隐藏，这里必须留一个入口） */
.login-links { margin-top: 14px; border-top: 1px dashed var(--line); padding-top: 12px; display: grid; gap: 8px; }
.login-links__main { display: block; padding: 10px 12px; border-radius: 10px; background: #f2f7f4; border: 1px solid var(--line); font-size: 13px; font-weight: 600; color: var(--ink, #12362e); text-decoration: none; }
.login-links__main span { display: block; font-weight: 400; font-size: 11px; color: var(--muted); margin-top: 2px; }
.login-links__main:hover { border-color: rgba(13, 59, 51, .3); background: #eaf3ee; }
.login-links__alt { font-size: 12px; color: var(--muted); text-align: center; text-decoration: none; }
.login-links__alt:hover { color: var(--gold-1, #b08a33); }

/* 说明页 */
.intro-hero { background: linear-gradient(160deg, #0d3b33, #08201b); color: #fff; border-radius: 14px; padding: 40px 36px; margin-bottom: 14px; }
.intro-hero h1 { font-size: 30px; letter-spacing: .02em; }
.intro-hero p { color: #b7cec5; max-width: 760px; }
.intro-hero .tag { background: rgba(255, 255, 255, .1); color: #e8f2ee; border-color: rgba(255, 255, 255, .18); }
.feature { border: 1px solid var(--line); border-radius: 12px; padding: 16px; background: #fff; }
.feature h3 { font-size: 15px; margin-bottom: 6px; }
.feature p { font-size: 13px; color: var(--muted); margin: 0; }

/* 文档 / 打印 */
.doc-sheet { background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 30px 34px; font-size: 13px; color: #1f2d27; }
.doc-sheet h1 { font-size: 20px; text-align: center; margin-bottom: 10px; letter-spacing: .1em; }
.doc-sheet .doc-meta { text-align: center; color: #6b7f78; font-size: 12px; margin-bottom: 18px; }
table.doc-form { width: 100%; border-collapse: collapse; }
table.doc-form th, table.doc-form td { border: 1px solid #cfdad5; padding: 9px 10px; font-size: 13px; text-align: left; vertical-align: top; }
table.doc-form th { width: 130px; background: #f7faf8; font-weight: 600; color: #40564e; }
table.doc-form td.sign { height: 54px; }
table.doc-form .sign-line { color: #8fa39b; font-size: 12px; }
.doc-foot { margin-top: 18px; color: #8fa39b; font-size: 11px; }
.rep { width: 100%; border-collapse: collapse; margin: 8px 0 14px; }
.rep th, .rep td { border: 1px solid #dbe5e0; padding: 7px 9px; font-size: 12px; text-align: left; vertical-align: top; }
.rep th { background: #f7faf8; }
.report-body h2 { font-size: 15px; margin: 18px 0 6px; }
.sign-block { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 20px; }
.sign-block .sig { border: 1px solid var(--line); border-radius: 8px; padding: 8px 12px; min-width: 190px; font-size: 12px; background: #fbfdfc; }
.sign-block .sig.invalid { border-color: #f0bdb8; background: #fdf2f1; }

/* 页面骨架与列表补充件 */
.grid-2, .grid-3, .grid-4 { display: grid; gap: 12px; }
.grid-2.wide-left { grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); }
.page-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.page-head h1 { font-size: 19px; letter-spacing: .01em; }
.page-head .sub { color: var(--muted); font-size: 12px; margin: 5px 0 0; }
.toolbar {
  display: flex; gap: 8px; flex-wrap: wrap; align-items: center; background: #fff;
  border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; margin-bottom: 12px; box-shadow: var(--shadow);
}
.toolbar input, .toolbar select { width: auto; min-width: 150px; padding: 6px 9px; }
.toolbar .spacer { flex: 1; }
.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-bottom: 12px; }
.stat {
  display: block; background: #fff; border: 1px solid var(--line); border-radius: 12px;
  padding: 12px 14px; box-shadow: var(--shadow); color: inherit;
}
.stat .stat-k { font-size: 12px; color: var(--muted); }
.stat .stat-v { font-size: 24px; font-weight: 700; letter-spacing: -.02em; margin-top: 2px; color: var(--ink); }
.stat .stat-v .unit { font-size: 12px; font-weight: 500; color: var(--muted); margin-left: 3px; }
.tab-row { display: flex; gap: 4px; flex-wrap: wrap; border-bottom: 1px solid var(--line); margin-bottom: 12px; }
.tab { padding: 7px 12px; font-size: 13px; color: #52655e; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.tab:hover { color: var(--teal); }
.tab.on { color: var(--teal); border-bottom-color: var(--teal); font-weight: 650; }
.tab-n { display: inline-block; margin-left: 5px; font-size: 11px; color: #8a9a94; background: #f1f4f3; border-radius: 999px; padding: 0 6px; }
.tab.on .tab-n { background: #e8f6ef; color: var(--ok); }
.kv { width: 100%; border-collapse: collapse; font-size: 13px; }
.kv th { width: 132px; text-align: left; color: var(--muted); font-weight: 500; padding: 6px 10px 6px 0; vertical-align: top; }
.kv td { padding: 6px 0; border-bottom: 1px solid #f1f5f3; vertical-align: top; }
.mini-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 0; border-bottom: 1px solid #f1f5f3; font-size: 13px; }
.mini-row:last-child { border-bottom: 0; }
a.mini-row { color: inherit; }
a.mini-row:hover { color: var(--teal); }

/* 待办行：左标题/元信息，右动作；窄屏自动折行 */
.todo-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 0; border-bottom: 1px solid #f1f5f3; }
.todo-row:last-child { border-bottom: 0; }
.todo-main { flex: 1; min-width: 0; }
.todo-title { font-size: 13px; line-height: 1.5; }
.todo-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 3px; }
.todo-act { display: flex; align-items: center; gap: 6px; flex: 0 0 auto; }
.td-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 7px; vertical-align: middle; }
.td-dot.td-danger { background: var(--danger); }
.td-dot.td-warn { background: var(--gold); }
.td-dot.td-normal { background: var(--teal); }
@media (max-width: 720px) {
  .todo-row { flex-direction: column; align-items: stretch; }
  .todo-act { justify-content: flex-end; }
}
.link-row.on { background: #f7faf8; border-radius: 6px; padding-left: 6px; padding-right: 6px; }
.check-list { display: flex; flex-direction: column; gap: 6px; max-height: 230px; overflow: auto; border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; }
.btn.full { width: 100%; justify-content: center; }
.btn.block { width: 100%; justify-content: center; }
.card-b.tight { padding: 4px 16px; }
.ok-text { color: var(--ok); }
.danger-text { color: var(--danger); }
.report-conclusion { background: #f7faf8; border: 1px solid #e3ece7; border-radius: 8px; padding: 10px 12px; font-size: 13px; line-height: 1.9; }
ul.plain { list-style: none; padding-left: 0; margin: 6px 0; }
ul.plain li { padding: 2px 0; }
.code { font-family: ui-monospace, Consolas, monospace; background: #f2f6f4; border-radius: 4px; padding: 1px 5px; font-size: 12px; }
.inline { display: inline; }


/* 移动端 */
@media (max-width: 1080px) { .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 860px) {
  .sidebar { position: fixed; left: 0; top: 0; bottom: 0; transform: translateX(-100%); transition: transform .2s ease; }
  body.nav-open .sidebar { transform: none; }
  body.nav-open .nav-mask { display: block; position: fixed; inset: 0; background: rgba(8, 32, 27, .4); z-index: 35; }
  /* 窄屏空间有限，分组一律展开，不给折叠 */
  .nav-items { display: block; }
  .nav-caret, .nav-collapse { display: none; }
  .nav-group-h { pointer-events: none; cursor: default; }
  .topbar { padding: 0 12px; }
  .content { padding: 12px; }
  .form-grid, .form-grid.cols-3, .grid-2 { grid-template-columns: 1fr; }
  .dl { grid-template-columns: 96px 1fr; }
  .dl .full { grid-column: 2 / -1; }
  .login-wrap { grid-template-columns: 1fr; }
  .login-side { display: none; }
  .perm-grid { grid-template-columns: 1fr; }
}

/* ---------- 权限矩阵 ---------- */
.perm-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(232px, 1fr)); gap: 10px; }
.perm-mod { border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; background: #fcfdfd; min-width: 0; }
.perm-mod-h { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 4px; }
.perm-mod-h b { font-size: 13px; }
.perm-item { display: flex; align-items: center; gap: 6px; width: 100%; padding: 2px 0; font-size: 13px; line-height: 1.5; }
.perm-item > span { flex: 1; min-width: 0; }
.perm-item.off { opacity: .55; }
.perm-item.perm-auto { background: #eaf2fe; border-radius: 6px; }
.perm-code { font-family: ui-monospace, Consolas, monospace; font-size: 11px; color: #8aa19a; background: transparent; padding: 0; }
.perm-chips { margin-top: 12px; border-top: 1px dashed #dde8e3; padding-top: 10px; }
.perm-chip { margin: 0 6px 6px 0; }

/* ---------- 审批链配置 ---------- */
.flow-line { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; padding: 10px 12px; background: #fafcfb; border: 1px solid var(--line); border-radius: 10px; margin-bottom: 12px; }
.flow-hint { font-size: 11px; color: #7d918a; background: #f2f6f4; border-radius: 999px; padding: 3px 9px; }
.flow-hint:last-child { color: #40564e; background: #eef5f1; }
.flow-arrow { color: #c8d6d0; font-size: 12px; }
.flow-node { display: flex; flex-direction: column; gap: 1px; padding: 5px 10px; border-radius: 8px; background: #fff; border: 1px solid #cfe3da; box-shadow: var(--shadow); }
.flow-node b { font-size: 12px; font-weight: 600; color: #1f3d35; }
.flow-node.bad { border-color: #f0bdb8; background: #fffafa; }
.flow-node.bad b { color: var(--danger); }
.flow-sub { font-size: 11px; color: var(--muted); }
.step-list { display: flex; flex-direction: column; gap: 6px; }
.step-row { display: flex; align-items: center; gap: 6px; padding: 5px 8px; border: 1px solid var(--line); border-radius: 8px; background: #fcfdfd; flex-wrap: wrap; }
.step-seq { width: 22px; height: 22px; flex: 0 0 22px; display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; background: #e8f1ec; color: #3d5c52; font-size: 11px; font-weight: 600; }
.step-row select { flex: 0 1 220px; }
.step-people { flex: 1 1 120px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.step-row .btn.sm { padding: 2px 7px; font-size: 11px; }
.user-picker { border-top: 1px dashed #dde8e3; padding-top: 10px; }

/* 提示条：notice 加语气（审批链 / 订阅推送共用同一套） */
.notice.danger { border-style: solid; border-color: #f6cdc9; background: #fdeceb; color: #8f1d14; }
.notice.warn { border-style: solid; border-color: #f3ddb9; background: #fdf6e8; color: #7a4d06; }
.notice.ok { border-style: solid; border-color: #c3e8d7; background: #eaf7f0; color: #06603f; }

/* ---------- 订阅推送 ---------- */
.sub-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 12px; }
.sub-card { border: 1px solid var(--line); border-radius: 10px; padding: 12px; background: #fcfdfd; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.sub-card.on { border-color: #bfe0d0; background: #fbfefc; box-shadow: inset 3px 0 0 var(--teal); }
.sub-card.locked { background: #fafbfb; }
.sub-h { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.sub-h b { font-size: 13px; }
.sub-preview { border: 1px dashed #dde8e3; border-radius: 8px; padding: 8px 10px; background: #fff; }
.sub-preview.off { background: #fafbfb; }
.sub-preview-t { font-size: 12px; font-weight: 600; color: #1f3d35; margin-bottom: 2px; }
.sub-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: auto; padding-top: 4px; }
.sub-matrix td { vertical-align: middle; }
.sub-cell.locked { background: #fafbfb; }
.sub-toggle { font-size: 11px; padding: 2px 8px; border-radius: 999px; border: 1px solid var(--line); background: #fff; color: #4a625a; cursor: pointer; }
.sub-toggle:hover { border-color: #bfe0d0; }
.sub-toggle.on { background: #e8f6ef; border-color: #bfe0d0; color: var(--ok); font-weight: 600; }
@media (max-width: 720px) {
  .sub-grid { grid-template-columns: 1fr; }
}

@media print {
  .sidebar, .topbar, .site-foot, .no-print, .filters, .pager { display: none !important; }
  body { background: #fff; }
  .content { padding: 0; }
  .card { border: 0; box-shadow: none; padding: 0; }
  .doc-sheet { border: 0; padding: 0; }
  table.data th { position: static; }
}

/* ============================================================
   统一字号 / 皮肤 / 密度
   目标：同一屏里只有 5 档字号（页标题 / 区块标题 / 正文 / 次要 / 角标），
   不再出现 12.8、13.5、14.5 这种「看起来差不多但不齐」的写法。
   ============================================================ */
:root {
  --fs-cap: 11px;
  --fs-sm: 12px;
  --fs-base: 13px;
  --fs-strong: 14px;
  --fs-title: 15px;
  --fs-page: 19px;
  --fs-kpi: 24px;
}
body { font-size: var(--base-font, 14px); }
.page-head h1 { font-size: var(--fs-page); line-height: 1.35; }
.detail-head .title { font-size: 18px; }
.card > h2, .card > h3, .card-h h2, .card-h h3 { font-size: var(--fs-title); }
.topbar h1 { font-size: 16px; }
table.data { font-size: var(--fs-base); }
table.data th { font-size: var(--fs-sm); }
.field > label { font-size: var(--fs-sm); }
.btn { font-size: var(--fs-base); }
.btn.sm { font-size: var(--fs-sm); }
.small { font-size: var(--fs-sm); }
.stat .stat-v, .kpi .num { font-size: var(--fs-kpi); }
.tl-item, .mini-row, .todo-title, .dl { font-size: var(--fs-base); }
.sub, .meta, .stat .stat-k, .kpi .lab { font-size: var(--fs-sm); }
.params-note { font-size: var(--fs-sm); }

/* 密度：紧凑模式把纵向留白收 20%，一屏能多看两行，字号不变 */
body[data-density="compact"] .content { padding: 12px 16px 22px; }
body[data-density="compact"] .card { padding: 10px 12px; margin-bottom: 9px; }
body[data-density="compact"] .card-b { padding: 10px 12px; }
body[data-density="compact"] table.data th, body[data-density="compact"] table.data td { padding: 6px 8px; }
body[data-density="compact"] .topbar { height: 50px; }

/* 皮肤：只换品牌色与底色，不动业务语义色（红=超期、绿=完成） */
body[data-theme="blue"] { --brand: #11304d; --brand-2: #17456e; --teal: #1d6fa5; --teal-2: #175a86; --bg: #f3f6fa; }
body[data-theme="warm"] { --brand: #3b2f1c; --brand-2: #5a4626; --teal: #8a6a2f; --teal-2: #6f5424; --bg: #f8f5ef; --gold: #b8892b; }

/* ---------- 顶栏：角色快捷入口 / 图标按钮 / 身份切换 ---------- */
.topbar { gap: 8px; }
.quick-acts { display: flex; align-items: center; gap: 4px; }
.quick-act { color: #37544c; }
.quick-act .nav-i { color: var(--teal); opacity: .9; }
.quick-act .tag { margin-left: 1px; }
.topbar-icon .nav-i { opacity: .8; }
.topbar .btn.sm { padding: 4px 8px; }
.topbar .btn.sm .nav-i { width: 14px; height: 14px; }
.role-switch select {
  width: auto; min-width: 128px; max-width: 168px; padding: 4px 6px; font-size: 12px; border-radius: 7px;
  border-color: var(--line); background: #f8faf9;
}
.back-btn { font-size: 16px; color: var(--teal); border-color: #cfe3da; background: #f6fbf8; }
.back-btn:hover { background: #eaf5f0; }

@media (max-width: 1280px) {
  .quick-acts .quick-act:nth-child(n+4) { display: none; }
}
@media (max-width: 1120px) {
  .topbar-t { display: none; }
  .quick-acts .quick-act span:not(.tag) { display: none; }
  .quick-act { padding: 4px 6px; }
}
@media (max-width: 900px) {
  .quick-acts, .role-switch, .topbar-user { display: none; }
}

/* 顶栏优先级：越窄越先收掉「侧栏里已经有同一入口」的按钮。
   顶栏以前是「能塞就都塞」，窄屏时固定宽度合计超过了容器，h1 只能被压成
   十几像素宽——中文就逐字竖排（「客户与 / 课题组」）。收掉重复入口后，
   标题始终有位置，各断点下按钮的显示规则也保持一致。 */
@media (max-width: 1500px) {
  .topbar-user { display: none; }          /* 侧栏左下角已有同一份身份信息 */
  .quick-acts .quick-act:nth-child(n+4) { display: none; }
  .role-switch select { min-width: 104px; max-width: 120px; }
}
@media (max-width: 1440px) {
  .topbar-dup-a { display: none; }         /* 经营大屏：侧栏「经营大屏」同入口 */
}
@media (max-width: 1600px) {
  /* 角色快捷入口：只留图标 + 角标，把宽度让给标题与搜索（文字在 title 提示里） */
  .quick-acts .quick-act span:not(.tag) { display: none; }
  .quick-act { padding: 4px 6px; }
}
@media (max-width: 1340px) {
  .quick-acts { display: none; }           /* 更窄就整体收掉：侧栏里有同一批入口 */
}
@media (max-width: 1180px) {
  .topbar-dup-b { display: none; }         /* 页面说明：右侧抽屉，窄屏走「使用说明」 */
}

/* ---------- 右侧说明抽屉 ---------- */
.help-drawer {
  position: fixed; top: 0; right: 0; bottom: 0; width: 340px; max-width: 88vw; z-index: 70;
  background: #fff; border-left: 1px solid var(--line); box-shadow: -12px 0 36px rgba(12, 35, 28, .12);
  transform: translateX(102%); transition: transform .2s ease; display: flex; flex-direction: column;
}
.help-drawer.is-open { transform: none; }
.help-h { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; padding: 16px 16px 12px; border-bottom: 1px solid var(--line); }
.help-h b { display: block; font-size: 15px; }
.help-h small { color: var(--muted); font-size: 11px; letter-spacing: .08em; }
.help-b { padding: 14px 16px 18px; overflow: auto; }
.help-b p { margin: 0 0 12px; font-size: 13px; line-height: 1.9; color: #3c554d; }
.help-links { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.help-foot { border-top: 1px dashed var(--line); padding-top: 10px; display: flex; flex-direction: column; gap: 4px; }
.drawer-mask { display: none; }
body.help-open .drawer-mask { display: block; position: fixed; inset: 0; background: rgba(8, 32, 27, .28); z-index: 65; }

/* ---------- 弹层 + 最大化 ---------- */
.modal[hidden] { display: none !important; }
.modal { position: fixed; inset: 0; z-index: 90; display: flex; align-items: center; justify-content: center; padding: 24px; }
.modal-mask { position: absolute; inset: 0; background: rgba(8, 30, 25, .48); backdrop-filter: blur(2px); }
.modal-box {
  position: relative; background: #fff; border-radius: 14px; width: min(760px, 96vw); max-height: 88vh;
  display: flex; flex-direction: column; box-shadow: 0 24px 70px rgba(8, 30, 25, .32);
  transition: width .18s ease, max-height .18s ease, border-radius .18s ease;
}
.modal-box.is-max { width: 100vw; max-width: 100vw; height: 100vh; max-height: 100vh; border-radius: 0; }
.modal-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.modal-h h3 { font-size: 15px; }
.modal-acts { display: flex; align-items: center; gap: 6px; }
.modal-b { padding: 16px; overflow: auto; }
.mobile-modal-b { display: flex; gap: 18px; align-items: flex-start; }
.qr-box { flex: 0 0 auto; border: 1px solid var(--line); border-radius: 10px; padding: 6px; line-height: 0; background: #fff; }
.qr-tx { flex: 1; min-width: 0; }
.qr-tx b { font-size: 14px; }
.qr-tx input { margin-top: 8px; font-size: 12px; }
@media (max-width: 620px) {
  .mobile-modal-b { flex-direction: column; align-items: center; }
  .qr-tx { width: 100%; }
}

/* ---------- 移动端底部标签栏 ---------- */
.m-tabbar { display: none; }

/* ---------- 移动端表格改卡片 ---------- */
@media (max-width: 720px) {
  .m-tabbar {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 38; background: #fff;
    border-top: 1px solid var(--line); padding: 4px 4px calc(4px + env(safe-area-inset-bottom));
    box-shadow: 0 -6px 18px rgba(12, 35, 28, .06);
  }
  .m-tabbar a {
    flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px;
    padding: 5px 0 4px; font-size: 10.5px; color: #7a8d86; border-radius: 8px; position: relative;
    /* 与侧栏同一套口径：标签只占一行，长词不折行（否则底部标签栏会高低不齐） */
    white-space: nowrap; word-break: keep-all;
  }
  .m-tabbar a > span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
  .m-tabbar a .nav-i { width: 19px; height: 19px; opacity: .8; }
  .m-tabbar a.on { color: var(--teal); font-weight: 600; }
  .m-tabbar a.on .nav-i { opacity: 1; }
  .m-tabbar em {
    position: absolute; top: 1px; right: calc(50% - 18px); min-width: 15px; height: 15px; padding: 0 4px;
    border-radius: 8px; background: var(--danger); color: #fff; font-size: 9.5px; line-height: 15px;
    font-style: normal; text-align: center;
  }
  .m-tabbar em[hidden] { display: none; }
  .site-foot { display: none; }
  /* 底部标签栏改成 fixed，内容要留出它的高度，否则最后一行会被挡住 */
  .content { padding-bottom: 68px; }

  /* 表格在小屏改为「一行一卡」，字段名由 JS 从表头写到 data-label */
  table.data.responsive thead { display: none; }
  table.data.responsive, table.data.responsive tbody, table.data.responsive tr, table.data.responsive td { display: block; width: 100%; }
  table.data.responsive tr {
    border: 1px solid var(--line); border-radius: 10px; margin: 8px 0; padding: 4px 0; background: #fff;
  }
  table.data.responsive td {
    display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
    border: 0; padding: 5px 10px; text-align: right; font-size: 12.5px;
  }
  table.data.responsive td::before {
    content: attr(data-label); flex: 0 0 34%; text-align: left; color: var(--muted); font-size: 11.5px;
  }
  table.data.responsive td.actions { justify-content: flex-end; padding-top: 8px; }
  table.data.responsive td.actions::before { content: ''; flex: 0 0 0; }
  .table-wrap { overflow: visible; }
  .page-head h1 { font-size: 17px; }
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .filters { padding: 8px 10px; }
  .filters input, .filters select { min-width: 0; flex: 1 1 44%; }
  .btn { padding: 8px 12px; }
  .form-actions { position: sticky; bottom: 0; background: #fff; padding: 10px 0; border-top: 1px solid var(--line); }
}

/* 批量打印：勾选行 / 打印友好 */
.batch-bar { display: none; align-items: center; gap: 8px; padding: 8px 12px; background: #f2f8f5; border: 1px solid #d6e8df; border-radius: 9px; margin-bottom: 10px; font-size: 12.5px; }
.batch-bar.on { display: flex; }
.batch-bar .spacer { flex: 1; }
.print-only { display: none; }
@media print {
  .m-tabbar, .help-drawer, .drawer-mask, .modal, .batch-bar, .quick-acts, .role-switch { display: none !important; }
  .print-only { display: block; }
  .page-head .row, .btn, .link-btn { display: none !important; }
  .card { break-inside: avoid; }
  table.data { font-size: 11px; }
  @page { margin: 12mm; }
}

/* 图片懒加载占位：未加载时不留大白块导致跳动 */
img[loading="lazy"] { background: #f2f6f4; }

/* ---------- 数据字典分组 / 批量勾选 / 导入 ---------- */
.chip-row { display: flex; gap: 6px; align-items: center; }
.chip-row .chip { padding: 5px 11px; border: 1px solid var(--line); background: #fff; cursor: pointer; font-size: 12.5px; }
.chip-row .chip:hover { border-color: #bfdad0; color: var(--teal); }
.chip-row .chip.is-on { background: var(--teal); border-color: var(--teal); color: #fff; font-weight: 600; }
.list-tight { margin: 0; padding-left: 18px; line-height: 1.9; }
.list-tight li { margin-bottom: 2px; }

table.data th.batch-check, table.data td.batch-check { width: 30px; padding-right: 0; text-align: center; }
table.data td.batch-check input, table.data th.batch-check input { width: 14px; height: 14px; accent-color: var(--teal); }
@media print { .batch-check { display: none !important; } }

.inline-import { position: relative; }
.inline-import > summary { list-style: none; cursor: pointer; }
.inline-import > summary::-webkit-details-marker { display: none; }
.import-pop {
  position: absolute; right: 0; top: calc(100% + 8px); width: 360px; max-width: 86vw; z-index: 45;
  background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 14px; box-shadow: 0 14px 40px rgba(12, 35, 28, .18);
}
.import-pop b { display: block; font-size: 13.5px; margin-bottom: 4px; }
.import-pop p { margin: 0 0 10px; }
.import-pop form { display: flex; flex-direction: column; gap: 8px; margin-bottom: 8px; }
.import-pop input[type=file] { font-size: 12px; padding: 6px; border: 1px dashed #cfe0d8; border-radius: 7px; background: #fbfdfc; }