/* SARO CRM · 设计系统 v4（2026-11-05）
   全站唯一入口：所有页面只引这一个文件（<link rel="stylesheet" href="/app.css">）。
   v4 相比 v3 改了三件事：
     ①配色从「发灰的深绿 + 绿灰底」换成中性冷灰底 + 翠绿主色，页面不再脏；
     ②圆角、阴影、字号收成一套 4 档刻度，管理端与手机端看起来是同一个产品；
     ③新增「桌面统一层」（文末），用高特异性覆盖 71 个页面里各自内联的老样式——
        只覆盖外观属性（颜色/圆角/阴影/字号/边框），绝不碰 display/position/尺寸，
        所以各页面的显隐与栅格逻辑不会被改坏。 */

:root {
  /* 主色：翠绿（食品/农业合适，白字对比 5.4:1） */
  --brand: #0B7B4B;
  --brand-2: #12A05F;
  --brand-ink: #075636;
  --brand-soft: #E8F5EE;
  --brand-line: #C7E4D3;

  /* 中性色（冷灰，替代原来偏绿的灰） */
  --ink: #0F172A;
  --ink-2: #344054;
  --muted: #667085;
  --faint: #98A2B3;
  --line: #E4E7EC;
  --line-soft: #F2F4F7;
  --bg: #F7F8FA;
  --bg-2: #EFF1F5;
  --card: #FFFFFF;

  /* 语义色 */
  --red: #B42318;
  --red-soft: #FEF3F2;
  --amber: #B54708;
  --amber-soft: #FFFAEB;
  --gold: #B54708;
  --gold-soft: #FFFAEB;
  --blue: #175CD3;
  --blue-soft: #EFF8FF;

  /* 刻度 */
  --r-sm: 8px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-xl: 18px;
  --radius-card: 16px;
  --radius-md: 12px;
  --pad: 18px;
  --shadow-1: 0 1px 2px rgba(16, 24, 40, .04), 0 1px 3px rgba(16, 24, 40, .03);
  --shadow-2: 0 4px 8px -2px rgba(16, 24, 40, .06), 0 12px 24px -8px rgba(16, 24, 40, .10);
  --shadow-3: 0 18px 40px -18px rgba(16, 24, 40, .22);
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--bg);
  color: var(--ink);
  font: 16px/1.55 -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
        "Hiragino Sans GB", "Microsoft YaHei", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  padding-bottom: calc(84px + env(safe-area-inset-bottom));
}
a { color: var(--brand); }
::selection { background: var(--brand-soft); color: var(--brand-ink); }

/* 滚动条（桌面端）：细、淡 */
@media (min-width: 900px) {
  ::-webkit-scrollbar { width: 10px; height: 10px; }
  ::-webkit-scrollbar-thumb { background: #D8DDE5; border-radius: 8px; border: 3px solid var(--bg); }
  ::-webkit-scrollbar-thumb:hover { background: #C2C9D4; }
  ::-webkit-scrollbar-track { background: transparent; }
}

/* ---------- 顶栏 v4：无底色，标题主导 ---------- */
.top { padding: 26px var(--pad) 6px; display: flex; align-items: flex-start; gap: 12px; }
.top .hi { font-size: 13px; color: var(--muted); letter-spacing: .04em; }
.top .nm { font-size: 26px; font-weight: 700; letter-spacing: -.025em; margin-top: 3px; line-height: 1.2; }
.top .dt { font-size: 13px; color: var(--faint); margin-top: 6px; letter-spacing: .02em; }
.top .sp { flex: 1; }
.top .av {
  width: 42px; height: 42px; border-radius: 50%; background: var(--brand-soft);
  color: var(--brand); display: grid; place-items: center;
  font-size: 15px; font-weight: 700; flex: 0 0 auto; margin-top: 2px;
  border: 1px solid var(--brand-line);
}

.wrap { padding: 0 var(--pad); }

/* ---------- 应用栏（页面标题条） ---------- */
.appbar {
  display: flex; align-items: center; gap: 12px;
  padding: 18px var(--pad) 14px;
  background: var(--bg);
  position: sticky; top: 0; z-index: 20;
}
.appbar .back {
  width: 44px; height: 44px; margin-left: -12px; display: grid; place-items: center;
  color: var(--ink-2); text-decoration: none; font-size: 20px; flex: 0 0 auto;
  border-radius: 50%;
}
.appbar .back:active { background: var(--bg-2); }
.appbar .greet { flex: 1; min-width: 0; }
.appbar .title { font-size: 20px; font-weight: 700; letter-spacing: -.02em; line-height: 1.25; }
.appbar .sub { font-size: 13px; color: var(--muted); margin-top: 3px; letter-spacing: .02em; }
.appbar .act {
  color: var(--brand); text-decoration: none; font-size: 14px; font-weight: 650;
  min-height: 44px; display: inline-flex; align-items: center; flex: 0 0 auto;
}

.page { padding: 0 var(--pad); max-width: 780px; margin: 0 auto; }

/* ---------- 主卡：今日目标环 ---------- */
.hero {
  background: linear-gradient(180deg, #FFFFFF 0%, #FCFDFC 100%);
  border-radius: var(--radius-card);
  padding: 22px; margin-top: 16px;
  box-shadow: var(--shadow-1); border: 1px solid var(--line);
  display: flex; align-items: center; gap: 18px;
}
.hero .txt { flex: 1; min-width: 0; }
.hero .lbl { font-size: 13px; color: var(--muted); letter-spacing: .04em; }
.hero .big { font-size: 40px; font-weight: 750; letter-spacing: -.035em; line-height: 1.05; margin-top: 6px; font-variant-numeric: tabular-nums; }
.hero .big span { font-size: 16px; font-weight: 500; color: var(--muted); letter-spacing: 0; margin-left: 6px; }
.hero .sub { font-size: 13px; color: var(--muted); margin-top: 10px; }
.hero .sub b { color: var(--brand); font-weight: 700; }
.ring { width: 92px; height: 92px; flex: 0 0 auto; position: relative; }
.ring svg { transform: rotate(-90deg); display: block; }
.ring .c-bg { fill: none; stroke: var(--line-soft); stroke-width: 7; }
.ring .c-fg { fill: none; stroke: var(--brand); stroke-width: 7; stroke-linecap: round; transition: stroke-dashoffset .6s cubic-bezier(.4, 0, .2, 1); }
.ring .pct { position: absolute; inset: 0; display: grid; place-items: center; font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--brand); }
.hero .hk { font-size: 13px; color: var(--muted); }
.hero .hv { font-size: 34px; font-weight: 750; letter-spacing: -.035em; margin-top: 4px; font-variant-numeric: tabular-nums; }
.hero .bar { height: 6px; border-radius: 4px; background: var(--line-soft); margin-top: 12px; overflow: hidden; }
.hero .bar i { display: block; height: 100%; border-radius: 4px; background: linear-gradient(90deg, var(--brand), var(--brand-2)); transition: width .5s ease; }

/* ---------- 三格数字 ---------- */
.metrics { display: flex; margin-top: 18px; }
.metrics > div { flex: 1; padding-right: 12px; }
.metrics > div + div { padding-left: 14px; border-left: 1px solid var(--line); }
.metrics .k { font-size: 12px; color: var(--muted); letter-spacing: .04em; }
/* 指标卡里的小链接（如「本月提成 › 明细」）：放在数字下面一行，不再挤在标题里把字压掉 */
.metrics .mini-link { display: inline-block; margin-top: 5px; font-size: 11.5px; font-weight: 650; color: var(--brand); text-decoration: none; }
.metrics .mini-link:hover { text-decoration: underline; }
.metrics .v { font-size: 22px; font-weight: 700; letter-spacing: -.02em; margin-top: 5px; font-variant-numeric: tabular-nums; }
.metrics .v small { font-size: 12px; font-weight: 500; color: var(--muted); margin-left: 2px; letter-spacing: 0; }

.stats { display: flex; margin-top: 14px; }
.stats .s { flex: 1; padding-right: 12px; }
.stats .s + .s { padding-left: 14px; border-left: 1px solid var(--line); }
.stats .k { font-size: 12px; color: var(--muted); letter-spacing: .04em; }
.stats .v { font-size: 22px; font-weight: 700; letter-spacing: -.02em; margin-top: 5px; font-variant-numeric: tabular-nums; }
/* 手机上 flex 会把 7 个指标压成 55px 宽、文字竖排，改成三列网格 */
@media (max-width: 700px) {
  .stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px 10px; }
  .stats .s { flex: none; padding-right: 0; min-width: 0; }
  .stats .s + .s { padding-left: 0; border-left: 0; }
  .stats .k { font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .stats .v { font-size: 19px; }
}

/* ---------- 分区标题 ---------- */
.sec { display: flex; align-items: baseline; margin: 26px 0 12px; }
.sec h2 { font-size: 15px; font-weight: 700; letter-spacing: .005em; margin: 0; color: var(--ink); }
.sec .more { margin-left: auto; font-size: 13px; color: var(--muted); text-decoration: none; }

/* ---------- 卡片 ---------- */
.card {
  background: var(--card); border-radius: var(--radius-card);
  border: 1px solid var(--line); box-shadow: var(--shadow-1);
  padding: 4px 18px 6px; margin-top: 16px;
}
.card > h3 {
  font-size: 15px; font-weight: 700; letter-spacing: .005em;
  margin: 16px 0 6px; display: flex; align-items: baseline; gap: 8px;
}
.card > h3 a { margin-left: auto; font-size: 13px; font-weight: 400; color: var(--muted); text-decoration: none; }
.card.flat { background: transparent; border: 0; box-shadow: none; padding: 0; }

/* ---------- 功能格 ---------- */
.tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.tile {
  background: var(--card); border-radius: var(--radius-md); padding: 15px 8px 13px;
  display: flex; flex-direction: column; align-items: center; gap: 9px;
  text-decoration: none; color: var(--ink-2); border: 1px solid var(--line);
  box-shadow: var(--shadow-1); transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.tile:hover { border-color: var(--brand-line); box-shadow: var(--shadow-2); }
.tile:active { transform: scale(.96); }
.tile svg { width: 23px; height: 23px; stroke: var(--brand); stroke-width: 1.7; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.tile .lbl { font-size: 12px; letter-spacing: .02em; color: var(--ink-2); }

.grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin: 14px 0; }
.grid > a {
  background: var(--card); border-radius: var(--radius-md); padding: 15px 8px 13px;
  display: flex; flex-direction: column; align-items: center; gap: 9px;
  text-decoration: none; color: var(--ink-2); border: 1px solid var(--line);
  box-shadow: var(--shadow-1); transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.grid > a:hover { border-color: var(--brand-line); box-shadow: var(--shadow-2); }
.grid > a:active { transform: scale(.96); }
.grid .ico { width: 23px; height: 23px; display: grid; place-items: center; }
.grid .ico svg { width: 23px; height: 23px; stroke: var(--brand); stroke-width: 1.7; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.grid .lbl { font-size: 12px; letter-spacing: .02em; color: var(--ink-2); }

/* ---------- 列表 ---------- */
.list { background: var(--card); border-radius: var(--radius-card); border: 1px solid var(--line); box-shadow: var(--shadow-1); overflow: hidden; margin-top: 14px; }
.list .row { display: flex; align-items: flex-start; gap: 12px; padding: 15px 18px; text-decoration: none; color: inherit; }
.list .row + .row { border-top: 1px solid var(--line-soft); }
.row:active { background: var(--line-soft); }
.row .lead { width: 6px; height: 6px; border-radius: 50%; background: var(--line); margin-top: 9px; flex: 0 0 auto; }
.row.ok .lead { background: var(--brand); }
.row.bad .lead { background: var(--red); }
.row .body { flex: 1; min-width: 0; }
.row .t1 { display: flex; align-items: baseline; gap: 8px; }
.row .nm { font-size: 15px; font-weight: 600; letter-spacing: -.01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row .amt { margin-left: auto; font-size: 15px; font-weight: 700; color: var(--brand); font-variant-numeric: tabular-nums; white-space: nowrap; }
.row .amt.zero { color: var(--faint); font-weight: 500; }
.row .l2 { font-size: 13px; color: var(--muted); margin-top: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row .l3 { font-size: 12px; color: var(--faint); margin-top: 4px; font-variant-numeric: tabular-nums; }

.item { padding: 14px 0; border-bottom: 1px solid var(--line-soft); }
.item:last-child { border-bottom: 0; }
.item .l1 { display: flex; align-items: baseline; gap: 8px; }
.item .nm { font-size: 15px; font-weight: 600; letter-spacing: -.01em; }
.item .l1 .chip { margin-left: auto; }
.item .l2 { font-size: 13px; color: var(--muted); margin-top: 3px; }
.item .l3 { font-size: 12px; color: var(--faint); margin-top: 3px; font-variant-numeric: tabular-nums; }

.row:has(> .k) {
  display: flex; align-items: baseline; gap: 12px;
  padding: 12px 0; border-top: 1px solid var(--line-soft);
}
.row:has(> .k):first-child { border-top: 0; }
.row > .k { font-size: 14px; color: var(--muted); }
.row > .v { margin-left: auto; font-size: 15px; font-weight: 650; font-variant-numeric: tabular-nums; }

/* ---------- 标签 ---------- */
.chip { display: inline-flex; align-items: center; height: 22px; padding: 0 9px; border-radius: 6px; font-size: 11px; letter-spacing: .03em; background: var(--brand-soft); color: var(--brand-ink); font-weight: 650; white-space: nowrap; }
.chip.gray { background: var(--line-soft); color: #55627A; }
.chip.red { background: var(--red-soft); color: var(--red); }
.chip.amber { background: var(--amber-soft); color: var(--amber); }
.chip.gold { background: var(--amber-soft); color: var(--gold); }
.chip.blue { background: var(--blue-soft); color: var(--blue); }

/* ---------- 提示条 ---------- */
/* .notice 是「图标 + 一段话」，用 flex；.note 是整段说明文字，必须保持块级，
   否则里面的 <b>/<strong> 会各自成为 flex item，一句话被拆成好几列 */
.notice {
  display: flex; gap: 10px; align-items: flex-start;
}
.notice, .note {
  background: var(--amber-soft); color: #7A3B06; border-radius: var(--r-lg);
  padding: 13px 15px; font-size: 13px; line-height: 1.6; margin-top: 14px;
  border: 1px solid #F2E3C0;
}
.note { display: block; }
.note > * { display: inline; }
.notice svg { width: 17px; height: 17px; flex: 0 0 auto; margin-top: 1px; stroke: var(--amber); fill: none; stroke-width: 1.7; stroke-linecap: round; }
.note.warn { background: var(--red-soft); color: #8A1F16; border-color: #F6D3CF; }

.empty { padding: 26px 0; text-align: center; color: var(--faint); font-size: 13px; }

/* ---------- 表单 ---------- */
.f { margin-top: 16px; }
.f > label { display: block; font-size: 13px; color: var(--muted); letter-spacing: .02em; margin-bottom: 7px; }
.f > label .req { color: var(--red); margin-left: 2px; }
.f input[type=text], .f input[type=tel], .f input[type=number], .f input[type=password],
.f input[type=date], .f input[type=search], .f select, .f textarea,
input.ipt, select.ipt, textarea.ipt {
  width: 100%; font: inherit; font-size: 16px; color: var(--ink);
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-md);
  padding: 13px 15px; min-height: 48px; outline: none;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.f textarea { min-height: 96px; resize: vertical; line-height: 1.55; }
.f input:focus, .f select:focus, .f textarea:focus,
input.ipt:focus, select.ipt:focus, textarea.ipt:focus {
  border-color: var(--brand); box-shadow: 0 0 0 3px rgba(11, 123, 75, .13);
}
.f .hint { font-size: 12px; color: var(--faint); margin-top: 6px; }

/* ---------- 分段按钮 ---------- */
.seg { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 4px; }
.seg button {
  font: inherit; font-size: 14px; min-height: 44px; padding: 0 15px;
  border-radius: var(--r-md); border: 1px solid var(--line); background: var(--card);
  color: var(--ink-2); cursor: pointer; transition: all .12s ease;
}
.seg button.on { background: var(--brand); border-color: var(--brand); color: #fff; font-weight: 650; }

/* ---------- 按钮 ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  font: inherit; font-size: 16px; font-weight: 650; letter-spacing: .01em;
  min-height: 52px; padding: 0 22px; border-radius: var(--r-md);
  border: 1px solid var(--line); background: var(--card); color: var(--ink);
  text-decoration: none; cursor: pointer;
  transition: transform .1s ease, opacity .1s ease, box-shadow .15s ease, background .15s ease;
}
.btn:active { transform: translateY(1px); }
.btn.primary { background: var(--brand); border-color: var(--brand); color: #fff; box-shadow: 0 1px 2px rgba(11, 123, 75, .20); }
.btn.primary:hover { background: #096A40; }
.btn.ghost { background: var(--card); border-color: var(--line); color: var(--ink-2); }
.btn.ghost:hover { border-color: var(--brand-line); color: var(--brand); }
.btn.danger { background: var(--red); border-color: var(--red); color: #fff; }
.btn.block { display: flex; width: 100%; }
.btn:disabled { opacity: .45; cursor: not-allowed; }

/* ---------- 底部导航 ---------- */
.tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
  display: flex; align-items: stretch;
  background: rgba(255, 255, 255, .90);
  backdrop-filter: saturate(180%) blur(16px);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
  border-top: 1px solid var(--line);
  padding-bottom: env(safe-area-inset-bottom);
}
.tabbar a {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 3px; min-height: 56px; text-decoration: none;
  color: var(--faint); font-size: 11px; letter-spacing: .03em;
  transition: color .15s ease;
}
.tabbar a svg { width: 21px; height: 21px; stroke: currentColor; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.tabbar a .i { font-size: 19px; line-height: 1; }
.tabbar a.on { color: var(--brand); font-weight: 650; }

/* 桌面端已经有侧边栏导航，底部 tabbar 就不再重复显示（手机端仍用 tabbar） */
@media (min-width: 900px) {
  body.has-side .tabbar { display: none; }
  body.has-side .wrap { padding-bottom: 28px; }
  /* 全宽底部操作条（保存/提交）在桌面要让开侧边栏，否则横穿到侧边栏底下 */
  body.has-side .submitbar,
  body.has-side .bottombar { left: 236px; }
}

/* ---------- 悬浮按钮 ---------- */
/* 手机端底部有 56px 的 tabbar，悬浮按钮要整个让到它上面（原来 74px 只压住一半，
   2026-11-14 巡检实测「新增拜访」和导航条叠在一起）。 */
.fab {
  position: fixed; right: 18px; bottom: calc(88px + env(safe-area-inset-bottom)); z-index: 31;
  height: 52px; padding: 0 20px 0 16px; border: 0; border-radius: 26px;
  background: var(--brand); color: #fff; font-size: 15px; font-weight: 650; letter-spacing: .02em;
  display: inline-flex; align-items: center; gap: 7px;
  box-shadow: 0 12px 26px -10px rgba(11, 123, 75, .55);
}
.fab:active { transform: translateY(1px); }
.fab svg { width: 19px; height: 19px; stroke: #fff; fill: none; stroke-width: 2; stroke-linecap: round; }

/* ---------- 提交条 ---------- */
.submitbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
  padding: 12px var(--pad) calc(12px + env(safe-area-inset-bottom));
  background: rgba(247, 248, 250, .94);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-top: 1px solid var(--line);
}
.submitbar .btn { width: 100%; }

.num, .metrics .v, .hero .big, .row .amt, .row .l3, .stats .v, .item .l3, .row > .v { font-variant-numeric: tabular-nums; }
.mt0 { margin-top: 0; } .mb0 { margin-bottom: 0; }

/* ===== 管理入口分组 ===== */
.mgroup { margin: 18px 0 2px; }
.mgroup:first-child { margin-top: 6px; }
.mgt { display: flex; align-items: baseline; gap: 8px; margin-bottom: 10px; font-size: 13.5px; font-weight: 700; color: var(--ink); }
.mgt span { font-size: 12px; font-weight: 400; color: var(--faint); }
.mgroup .tiles { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.mgroup .tiles > a { display: flex; flex-direction: column; align-items: flex-start; gap: 5px; padding: 12px 13px; border: 1px solid var(--line); border-radius: var(--r-lg); background: #fff; text-decoration: none; transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease; }
.mgroup .tiles > a:hover { border-color: var(--brand-line); box-shadow: var(--shadow-2); }
.mgroup .tiles > a:active { transform: scale(.97); }
.mgroup .tiles .ico { width: 22px; height: 22px; display: grid; place-items: center; }
.mgroup .tiles .ico svg { width: 22px; height: 22px; stroke: var(--brand); stroke-width: 1.7; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.mgroup .tiles .lbl { font-size: 13px; font-weight: 650; color: var(--ink); }
.mgroup .tiles .dsc { font-size: 11.5px; line-height: 1.55; color: var(--muted); }
@media (max-width: 720px) { .mgroup .tiles { grid-template-columns: 1fr; } }

/* ===== 管理端侧边栏 ===== */
#sideNav {
  position: fixed; left: 0; top: 0; bottom: 0; width: 236px; z-index: 60;
  background: #fff; border-right: 1px solid var(--line);
  display: none; flex-direction: column; overflow: hidden;
}
#sideNav .sn-head { padding: 18px 16px 12px; border-bottom: 1px solid var(--line-soft); }
/* 管理岗的头像 + 姓名块（之前没写样式，头像和名字会叠在一起） */
#sideNav .sn-who { display: flex; align-items: center; gap: 10px; min-width: 0; }
#sideNav .sn-who .av {
  flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 700;
  background: rgba(255, 255, 255, .14); color: var(--sn-head-fg, #fff);
}
#sideNav .sn-who .wb { min-width: 0; }
#sideNav .sn-who .wb b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 132px; }
#sideNav .sn-who .wb span { display: block; margin-top: 2px; }
#sideNav .sn-head b { font-size: 15px; font-weight: 750; color: var(--brand-ink); display: block; letter-spacing: -.01em; }
#sideNav .sn-head span { font-size: 11px; color: var(--faint); letter-spacing: .02em; }
#sideNav .sn-body { flex: 1; overflow-y: auto; padding: 6px 8px 14px; -webkit-overflow-scrolling: touch; }
#sideNav .sn-gt { font-size: 12px; font-weight: 800; letter-spacing: .02em; color: var(--faint); padding: 13px 8px 6px; }
/* 一级组标题也带图标（参考 UPGO-ERP）：图标 + 标题 + 数量徽标 */
#sideNav .sn-gt { display: flex; align-items: center; gap: 8px; }
#sideNav .sn-gt .gt-ico { width: 19px; height: 19px; flex: 0 0 auto; display: grid; place-items: center; opacity: .85; }
#sideNav .sn-gt .gt-ico svg { width: 19px; height: 19px; stroke: currentColor; stroke-width: 1.8; fill: none; stroke-linecap: round; stroke-linejoin: round; }
#sideNav .sn-i {
  display: flex; align-items: center; gap: 10px; padding: 9px 10px 9px 27px; border-radius: var(--r-sm);
  color: var(--ink); text-decoration: none; font-size: 14px; font-weight: 500; line-height: 1.35;
  border-left: 2px solid transparent; transition: background .12s ease, color .12s ease;
}
/* 条目图标已去掉（2026-11-09 19:26），左内边距 27px = 组标题图标 19px + 间距 8px，让文字与标题文字对齐 */
#sideNav .sn-foot .sn-i { padding-left: 10px; }
#sideNav .sn-i .ico { width: 19px; height: 19px; flex: 0 0 auto; display: grid; place-items: center; opacity: .9; }
#sideNav .sn-i .ico svg { width: 19px; height: 19px; stroke: currentColor; stroke-width: 1.7; fill: none; stroke-linecap: round; stroke-linejoin: round; }
#sideNav .sn-i:hover { background: var(--line-soft); }
#sideNav .sn-i.on { background: var(--brand-soft); color: var(--brand-ink); font-weight: 650; border-left-color: var(--brand); }
#sideNav .sn-foot { border-top: 1px solid var(--line-soft); padding: 8px; }
#sideMask { position: fixed; inset: 0; background: rgba(15, 23, 42, .38); z-index: 55; display: none; }
#sideMask.on { display: block; }
#sideBtn {
  display: none; position: fixed; right: 14px; bottom: 96px; z-index: 61;
  width: 46px; height: 46px; border-radius: 50%; border: 0; color: #fff;
  background: var(--brand); box-shadow: 0 6px 18px rgba(11, 123, 75, .35);
  align-items: center; justify-content: center;
}
@media (min-width: 900px) {
  body.has-side #sideNav { display: flex; }
  body.has-side { padding-left: 236px; }
  body.has-side #sideBtn { display: none; }
}
@media (max-width: 899px) {
  /* 手机端菜单按钮：右下角是「新增拜访」悬浮按钮（.fab），底部是 tabbar。
     改成贴左边、竖长条当「把手」用，只占 40px 窄条，不会压住卡片里的字。 */
  body.has-side #sideBtn {
    display: flex; left: 0; right: auto; bottom: 120px;
    width: 40px; height: 56px; border-radius: 0 20px 20px 0;
    opacity: .92;
  }
  /* 滚动时淡出：这个按钮是 fixed 的，不淡出会一直压在卡片左侧的字上 */
  body.side-rolling #sideBtn { opacity: .08; transition: opacity .18s ease; }
  /* 侧边栏打开后按钮隐掉：点遮罩就能关，留着会挡内容 */
  body.side-open #sideBtn { opacity: 0; pointer-events: none; }
  body.has-side #sideNav {
    display: flex; transform: translateX(-100%); transition: transform .22s ease;
    box-shadow: 0 0 30px rgba(15, 23, 42, .18);
  }
  body.has-side.side-open #sideNav { transform: translateX(0); }
}

/* ==========================================================================
   桌面统一层（v4 新增）
   71 个页面各自在本页 <style> 里重定义了 .kpi/.card/.chip/table.t 等，
   那些声明在后面、会覆盖上面的基础样式。这里用 `html body` 抬高特异性把它们压回来，
   只改外观（颜色/圆角/阴影/字号/边框），不碰 display/position/尺寸/栅格，
   所以各页面的显隐逻辑（.form{display:none}）与布局不会被改坏。
   ========================================================================== */

/* 页面容器：大屏居中、留白统一（全站只有这一处控制宽度，各页不要自己写 .wrap 的 max-width） */
html body .wrap {
  max-width: 1120px; margin: 0 auto; padding: 16px 20px 90px;
}

/* 标题条 */
html body .topbar { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
html body .topbar h1 { font-size: 19px; font-weight: 700; letter-spacing: -.02em; color: var(--ink); margin: 0; }
html body .topbar a.back { color: var(--muted); text-decoration: none; font-size: 20px; }
html body .topbar a.back:hover { color: var(--brand); }

/* KPI 四格 */
html body .kpi4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin: 14px 0; }
html body .kpi3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 14px 0; }
html body .kpi4 > *, html body .kpi3 > *, html body .kpi4 .kpi, html body .kpi4 .s {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 14px 16px; box-shadow: var(--shadow-1);
}
html body .kpi b, html body .kpi .big, html body .kpi4 .kpi b {
  display: block; font-size: 26px; font-weight: 750; letter-spacing: -.03em;
  line-height: 1.15; color: var(--ink); font-variant-numeric: tabular-nums;
}
html body .kpi span, html body .kpi4 .kpi span {
  display: block; font-size: 12px; color: var(--muted); margin-top: 3px; letter-spacing: .01em;
}
@media (max-width: 720px) {
  html body .kpi4 { grid-template-columns: repeat(2, 1fr); }
  html body .kpi3 { grid-template-columns: repeat(2, 1fr); }
}

/* 卡片 */
html body .card {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 16px 18px; box-shadow: var(--shadow-1); margin: 12px 0;
}
html body .card .h { font-size: 14.5px; font-weight: 700; color: var(--ink); letter-spacing: -.01em; }
html body .card .h .gr { font-size: 12px; font-weight: 400; color: var(--faint); }
html body .card .m { font-size: 12.5px; color: var(--muted); line-height: 1.7; }

/* 表格：管理端最重要的一块 */
html body table.t, html body table.tbl, html body .tbl {
  width: 100%; border-collapse: separate; border-spacing: 0;
  font-size: 13px; color: var(--ink-2);
}
html body table.t th, html body table.tbl th {
  text-align: left; font-weight: 650; font-size: 12px; letter-spacing: .02em;
  color: var(--muted); background: #F9FAFB;
  padding: 10px 12px; white-space: nowrap;
  border-bottom: 1px solid var(--line);
}
html body table.t th:first-child, html body table.tbl th:first-child { border-top-left-radius: var(--r-sm); }
html body table.t th:last-child, html body table.tbl th:last-child { border-top-right-radius: var(--r-sm); }
html body table.t td, html body table.tbl td {
  padding: 11px 12px; border-bottom: 1px solid var(--line-soft); vertical-align: top;
}
html body table.t tr:last-child td, html body table.tbl tr:last-child td { border-bottom: 0; }
html body table.t tbody tr:hover td, html body table.tbl tbody tr:hover td { background: #FBFCFD; }
html body table.t td.n, html body table.tbl td.n { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }
html body table.t tr.low td, html body table.tbl tr.low td { background: var(--red-soft); }

/* 状态标签 */
html body .chip {
  display: inline-flex; align-items: center; height: 22px; padding: 0 9px;
  border-radius: 999px; font-size: 11.5px; font-weight: 650; letter-spacing: .01em;
  background: var(--line-soft); color: #55627A; white-space: nowrap;
}
html body .chip.ok, html body .ok {
  background: #ECFDF3; color: #067647;
}
html body .chip.warn, html body .warn {
  background: var(--amber-soft); color: var(--amber);
}
html body .chip.bad, html body .bad {
  background: var(--red-soft); color: var(--red);
}
html body .chip.na, html body .na { background: var(--line-soft); color: var(--muted); }
html body .chip.doing, html body .doing { background: var(--blue-soft); color: var(--blue); }
html body .chip.done, html body .done { background: #ECFDF3; color: #067647; }
html body .chip.low, html body .low { background: var(--red-soft); color: var(--red); }
html body .chip.amber, html body .amber { background: var(--amber-soft); color: var(--amber); }
html body .chip.green, html body .green { background: #ECFDF3; color: #067647; }
html body .chip.red, html body .red { background: var(--red-soft); color: var(--red); }

/* 分段器（胶囊） */
html body .segs { display: flex; gap: 8px; flex-wrap: wrap; margin: 12px 0; }
html body .segs button {
  border: 1px solid var(--line); background: var(--card); color: var(--ink-2);
  border-radius: 999px; padding: 7px 15px; font-size: 13px; font-weight: 600;
  cursor: pointer; transition: all .12s ease; font-family: inherit;
}
html body .segs button:hover { border-color: var(--brand-line); color: var(--brand); }
html body .segs button.on {
  background: var(--brand); border-color: var(--brand); color: #fff;
  box-shadow: 0 1px 2px rgba(11, 123, 75, .25);
}

/* 按钮 */
html body button {
  font-family: inherit; border-radius: var(--r-md); border: 1px solid transparent;
  padding: 9px 16px; font-size: 13.5px; font-weight: 650; cursor: pointer;
  background: var(--brand); color: #fff; transition: all .12s ease;
  min-height: 38px;
}
html body button:hover { background: #096A40; }
html body button:active { transform: translateY(1px); }
html body button:disabled { opacity: .45; cursor: not-allowed; }
html body button.ghost {
  background: var(--card); color: var(--brand); border-color: var(--brand-line);
}
html body button.ghost:hover { background: var(--brand-soft); }
html body button.danger { background: var(--red); color: #fff; }
html body button.danger:hover { background: #962018; }
html body button.mini { padding: 5px 11px; font-size: 12px; border-radius: var(--r-sm); min-height: 30px; }
html body button.link {
  background: transparent; color: var(--brand); border: 0; padding: 4px 6px; min-height: 0; font-weight: 600;
}
html body button.link:hover { background: transparent; text-decoration: underline; }

/* 提示条 */
html body .note {
  background: var(--amber-soft); border: 1px solid #F3E4C3; color: #7A3B06;
  border-radius: var(--r-md); padding: 11px 13px; font-size: 12.5px; line-height: 1.7;
}
html body .note b { color: #5C2C04; }

/* 表单 */
html body .form, html body .frm {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 16px 18px; margin: 12px 0; box-shadow: var(--shadow-1);
}
html body .form label, html body .fld label, html body .f label {
  font-size: 12.5px; font-weight: 600; color: var(--muted); letter-spacing: .01em;
}
html body .form input, html body .form select, html body .form textarea,
html body .frm input, html body .frm select, html body .frm textarea,
html body input.ipt, html body select.ipt, html body textarea.ipt {
  border: 1px solid var(--line); border-radius: var(--r-md); padding: 10px 12px;
  font-size: 14px; color: var(--ink); background: var(--card); outline: none;
  transition: border-color .15s ease, box-shadow .15s ease; font-family: inherit;
}
html body .form input:focus, html body .form select:focus, html body .form textarea:focus,
html body input.ipt:focus, html body select.ipt:focus, html body textarea.ipt:focus {
  border-color: var(--brand); box-shadow: 0 0 0 3px rgba(11, 123, 75, .12);
}

/* 空状态 */
html body .empty { padding: 32px 0; text-align: center; color: var(--faint); font-size: 13px; }

/* 轻提示 */
html body .toast {
  position: fixed; left: 50%; bottom: 32px; transform: translateX(-50%) translateY(8px);
  background: #101828; color: #fff; padding: 11px 18px; border-radius: var(--r-md);
  font-size: 13.5px; box-shadow: var(--shadow-3); z-index: 200; opacity: 0;
  transition: opacity .2s ease, transform .2s ease; pointer-events: none; max-width: 86vw;
}
html body .toast.on { opacity: 1; transform: translateX(-50%) translateY(0); }

/* 滚动容器（横向表格） */
html body .scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* ---------- 补充覆盖（旧管理页的局部类，同样只改外观） ---------- */
html body .rowu { padding: 14px 0; border-bottom: 1px solid var(--line-soft); }
html body .rowu:last-child { border-bottom: 0; }
html body .rowu .nm { font-size: 14.5px; font-weight: 650; color: var(--ink); letter-spacing: -.01em; }
html body .rowu .meta { font-size: 12.5px; color: var(--muted); }
html body .rowu select {
  border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--card);
  color: var(--ink); font-size: 13px; font-family: inherit;
}
html body .rowu select:focus { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(11, 123, 75, .12); }

html body .tag,
html body .rolechip,
html body .hrchip,
html body .pill {
  display: inline-flex; align-items: center; border-radius: 999px;
  padding: 2px 9px; font-size: 11.5px; font-weight: 650; letter-spacing: .01em;
  margin-left: 6px; white-space: nowrap;
}
html body .tag { background: var(--brand-soft); color: var(--brand-ink); }
html body .role-admin, html body .hr-sacked { background: #FEE4E2; color: #912018; }
html body .role-reviewer, html body .hr-probation { background: var(--amber-soft); color: #93370D; }
html body .role-employee, html body .hr-active { background: var(--brand-soft); color: var(--brand-ink); }

html body .kv {
  padding: 7px 0; border-bottom: 1px dashed var(--line-soft);
  font-size: 13px; color: var(--ink-2);
}
html body .kv:last-child { border-bottom: 0; }
html body .kv b, html body .kv strong { color: var(--ink); font-weight: 650; }

html body .src { font-size: 12px; color: var(--faint); font-weight: 400; margin-left: 6px; }

/* 进度条：只对「只有一个 <i> 子元素的 .bar」生效。
   2026-11-14 全量巡检发现：约 27 个页面把 .bar 当筛选工具条用（plan.html 的日期/工号/按钮那一行），
   原来这条无条件规则会给工具条套上灰底胶囊 + overflow:hidden，手机上直接把日期框左边切掉。 */
html body .bar:has(> i:only-child) { background: var(--line-soft); border-radius: 999px; overflow: hidden; }
html body .bar > i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--brand), var(--brand-2)); }

/* ---------- 分段器：把各页五花八门的按钮组统一成同一套胶囊 ---------- */
/* 页面里分段器的容器名不统一（.segs / .filters / .seg / .seg2 / .segwrap / .tabs / .seg.wrap），
   这里一并收口：非激活态白底描边，激活态绿底白字。只改外观，不动容器布局。 */
html body .segs button,
html body .filters button,
html body .seg button,
html body .seg2 button,
html body .segwrap button,
html body .tabs button,
html body .seg.wrap button {
  background: var(--card);
  color: var(--ink-2);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 6px 14px;
  font-size: 13px;
  font-weight: 600;
  min-height: 34px;
  box-shadow: none;
}
html body .segs button:hover,
html body .filters button:hover,
html body .seg button:hover,
html body .seg2 button:hover,
html body .segwrap button:hover,
html body .tabs button:hover {
  border-color: var(--brand-line);
  color: var(--brand);
  background: var(--brand-soft);
}
html body .segs button.on,
html body .filters button.on,
html body .seg button.on,
html body .seg2 button.on,
html body .segwrap button.on,
html body .tabs button.on,
html body .seg.wrap button.on {
  background: var(--brand);
  color: #fff;
  border-color: var(--brand);
  box-shadow: 0 1px 2px rgba(11, 123, 75, .25);
}

/* ==========================================================================
   v4.1 精修层（2026-11-05 晚）
   目标：从「能看」到「像一套做了几年的后台产品」。三件事——
     ① 侧边栏改深色，给管理端一个明确的「专业工具」基调；
     ② 数字与表格按数据产品的方式排版（大数字主导、表头小字淡色、行距松）；
     ③ 统一 hover / 焦点 / 分割线的细腻度（这是廉价感与高级感的分水岭）。
   同样只改外观，不碰 display / position / 尺寸 / 栅格。
   ========================================================================== */

/* ---------- 一、侧边栏：主题变量驱动（默认墨绿黑，可切换） ---------- */
:root {
  --sn-bg: #0C1A13;
  --sn-line: rgba(255, 255, 255, .07);
  --sn-inset: rgba(255, 255, 255, .06);
  --sn-head-fg: #fff;
  --sn-head-sub: rgba(255, 255, 255, .40);
  --sn-gt: rgba(255, 255, 255, .30);
  --sn-fg: rgba(255, 255, 255, .68);
  --sn-fg-hover: #fff;
  --sn-hover: rgba(255, 255, 255, .07);
  --sn-on-bg: rgba(18, 160, 95, .16);
  --sn-on-fg: #7FE3B0;
  --sn-on-bar: #12A05F;
  --sn-shadow: rgba(12, 26, 19, .45);
  --sn-mask-shadow: rgba(12, 26, 19, .5);
}
/* 浅色：白面板，绿只做选中标记（Notion / Linear 那一路） */
[data-side="light"] {
  --sn-bg: #FCFCFD;
  --sn-line: #E9ECF0;
  --sn-inset: #E9ECF0;
  --sn-head-fg: #101828;
  --sn-head-sub: #98A2B3;
  --sn-gt: #98A2B3;
  --sn-fg: #475467;
  --sn-fg-hover: #101828;
  --sn-hover: #F2F4F7;
  --sn-on-bg: #E8F5EE;
  --sn-on-fg: #075636;
  --sn-on-bar: #0B7B4B;
  --sn-shadow: rgba(16, 24, 40, .10);
  --sn-mask-shadow: rgba(16, 24, 40, .22);
}
/* 中性深石板：不带绿味，选中用白色叠加 */
[data-side="slate"] {
  --sn-bg: #181C24;
  --sn-line: rgba(255, 255, 255, .07);
  --sn-inset: rgba(255, 255, 255, .06);
  --sn-head-fg: #F5F7FA;
  --sn-head-sub: rgba(255, 255, 255, .42);
  --sn-gt: rgba(255, 255, 255, .32);
  --sn-fg: rgba(255, 255, 255, .63);
  --sn-fg-hover: #fff;
  --sn-hover: rgba(255, 255, 255, .06);
  --sn-on-bg: rgba(255, 255, 255, .10);
  --sn-on-fg: #FFFFFF;
  --sn-on-bar: #12A05F;
  --sn-shadow: rgba(8, 12, 20, .45);
  --sn-mask-shadow: rgba(8, 12, 20, .55);
}
/* 暖炭棕：食品行业气质，米色文字 */
[data-side="espresso"] {
  --sn-bg: #1B1713;
  --sn-line: rgba(255, 246, 232, .08);
  --sn-inset: rgba(255, 246, 232, .06);
  --sn-head-fg: #FBF7F1;
  --sn-head-sub: rgba(255, 246, 232, .42);
  --sn-gt: rgba(255, 246, 232, .28);
  --sn-fg: rgba(250, 244, 235, .62);
  --sn-fg-hover: #fff;
  --sn-hover: rgba(255, 246, 232, .06);
  --sn-on-bg: rgba(226, 182, 110, .14);
  --sn-on-fg: #F0D3A0;
  --sn-on-bar: #D9A85C;
  --sn-shadow: rgba(20, 16, 12, .5);
  --sn-mask-shadow: rgba(20, 16, 12, .58);
}
#sideNav {
  background: var(--sn-bg);
  border-right: 0;
  box-shadow: inset -1px 0 0 var(--sn-inset);
  transition: background .2s ease;
}
#sideNav .sn-head { border-bottom: 1px solid var(--sn-line); padding: 20px 18px 14px; }
#sideNav .sn-head b { color: var(--sn-head-fg); font-size: 15px; letter-spacing: -.01em; }
#sideNav .sn-head span {
  color: var(--sn-head-sub); font-size: 10.5px; letter-spacing: .10em;
  text-transform: uppercase; display: block; margin-top: 3px;
}
#sideNav .sn-body { padding: 4px 10px 16px; }
#sideNav .sn-gt {
  color: var(--sn-gt); font-size: 10px; font-weight: 700;
  letter-spacing: .12em; padding: 16px 8px 6px;
}
#sideNav .sn-i {
  color: var(--sn-fg); font-size: 13px; padding: 9px 10px;
  border-left: 2px solid transparent; border-radius: var(--r-sm);
  transition: background .14s ease, color .14s ease;
}
#sideNav .sn-i:hover { background: var(--sn-hover); color: var(--sn-fg-hover); }
#sideNav .sn-i.on {
  background: var(--sn-on-bg); color: var(--sn-on-fg);
  border-left-color: var(--sn-on-bar); font-weight: 650;
}
#sideNav .sn-i.on .ico { color: var(--sn-on-fg); }
#sideNav .sn-foot { border-top: 1px solid var(--sn-line); padding: 10px; }
/* 首页：菜单第一条常驻（不再固定到左下角），下面加一条浅分隔线把它和分组隔开 */
#sideNav .sn-home { border-bottom: 1px solid var(--sn-line); border-radius: var(--r-sm); margin-bottom: 6px; }
#sideBtn { background: var(--sn-bg); box-shadow: 0 6px 20px var(--sn-shadow); }
@media (max-width: 899px) { body.has-side #sideNav { box-shadow: 0 0 40px var(--sn-mask-shadow); } }

/* ---------- 二、页面头：白底 + 大标题 + 细底线 ---------- */
html body .topbar {
  padding: 18px 0 14px; margin-bottom: 4px;
  border-bottom: 1px solid var(--line);
  background: transparent;
}
html body .topbar h1 {
  font-size: 20px; font-weight: 750; letter-spacing: -.028em; line-height: 1.25;
}
html body .topbar .sub, html body .topbar .desc {
  font-size: 12.5px; color: var(--muted); letter-spacing: .01em; margin-top: 4px;
}

/* ---------- 三、指标卡：数字主导 ---------- */
html body .kpi, html body .kpi4 > *, html body .kpi3 > * {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 14px 16px;
  box-shadow: none;
  transition: border-color .16s ease, box-shadow .16s ease;
}
html body .kpi:hover, html body .kpi4 > *:hover, html body .kpi3 > *:hover {
  border-color: var(--brand-line);
  box-shadow: 0 2px 10px -4px rgba(11, 123, 75, .18);
}
html body .kpi .k, html body .kpi4 .k, html body .kpi3 .k {
  font-size: 11.5px; font-weight: 600; letter-spacing: .055em;
  color: var(--faint); text-transform: uppercase;
}
html body .kpi .v, html body .kpi4 .v, html body .kpi3 .v {
  font-size: 27px; font-weight: 760; letter-spacing: -.035em; line-height: 1.08;
  color: var(--ink); margin-top: 7px; font-variant-numeric: tabular-nums;
}
html body .kpi .s, html body .kpi4 .s, html body .kpi3 .s {
  font-size: 11.5px; color: var(--muted); margin-top: 5px; letter-spacing: .01em;
}

/* ---------- 四、表格：去框线，只留行分隔 ---------- */
html body table.t, html body table.tbl, html body .tbl {
  font-size: 13px;
  border: 0;
  border-radius: var(--r-lg);
  overflow: hidden;
}
html body table.t th, html body table.tbl th, html body .tbl th {
  font-size: 11px; font-weight: 700; letter-spacing: .07em;
  color: var(--faint); text-transform: uppercase;
  background: transparent; border-bottom: 1px solid var(--line);
  padding: 10px 12px; white-space: nowrap;
}
html body table.t td, html body table.tbl td, html body .tbl td {
  padding: 12px; border-bottom: 1px solid var(--line-soft);
  vertical-align: middle;
}
html body table.t tbody tr:last-child td,
html body table.tbl tbody tr:last-child td { border-bottom: 0; }
html body table.t tbody tr:hover td,
html body table.tbl tbody tr:hover td { background: #FAFBFC; }
html body table.t td:first-child, html body table.tbl td:first-child { color: var(--ink); font-weight: 600; }

/* ---------- 五、卡片与分割的细腻度 ---------- */
html body .card { box-shadow: var(--shadow-1); }
html body .card + .card, html body .card + .kpi4, html body .kpi4 + .card { margin-top: 14px; }
html body .list > .item { border-bottom: 1px solid var(--line-soft); padding: 13px 0; }
html body .list > .item:last-child { border-bottom: 0; }
html body .list > .item .n { font-size: 14px; font-weight: 650; color: var(--ink); letter-spacing: -.01em; }
html body .list > .item .s { font-size: 12px; color: var(--muted); margin-top: 3px; }

/* ---------- 六、交互细节 ---------- */
html body .segs button, html body button { transition: background .14s ease, color .14s ease, border-color .14s ease, box-shadow .14s ease; }
html body a { transition: color .12s ease; }
html body input:focus-visible, html body select:focus-visible, html body textarea:focus-visible, html body button:focus-visible {
  outline: 2px solid var(--brand-line); outline-offset: 1px;
}

/* ===================================================================
   v4.2 桌面版式：多数页面用的是 .appbar + .page + .stats 这套老骨架，
   而 .page 把内容死锁在 780px —— 在宽屏上就像在看手机版，这是"简陋感"的主因。
   这一层只改宽屏（>=900px）的排版尺度，手机端一点不动。
   =================================================================== */
@media (min-width: 900px) {
  /* 内容区放宽 */
  html body .page { max-width: 1240px; padding: 0 36px; }
  html body .wrap { max-width: 1240px; margin: 0 auto; padding: 0 36px; }

  /* 页面头：白底毛玻璃 + 细底线 */
  html body .appbar {
    background: rgba(255, 255, 255, .88);
    -webkit-backdrop-filter: saturate(180%) blur(12px);
    backdrop-filter: saturate(180%) blur(12px);
    border-bottom: 1px solid var(--line);
    padding: 20px 36px 16px;
  }
  html body .appbar .title { font-size: 23px; font-weight: 750; letter-spacing: -.028em; }
  html body .appbar .sub { font-size: 12.5px; margin-top: 5px; letter-spacing: .01em; }
  html body .appbar .act {
    border: 1px solid var(--line); border-radius: 999px; background: var(--card);
    padding: 0 16px; min-height: 34px; font-size: 13px; color: var(--ink-2);
    transition: border-color .14s ease, color .14s ease;
  }
  html body .appbar .act:hover { border-color: var(--brand-line); color: var(--brand); }

  /* 三格数字 -> 三张卡 */
  html body .stats {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 14px; margin-top: 20px;
  }
  html body .stats .s {
    background: var(--card); border: 1px solid var(--line);
    border-radius: var(--radius-card); box-shadow: var(--shadow-1);
    padding: 16px 20px;
  }
  html body .stats .s + .s { padding-left: 20px; border-left: 1px solid var(--line); }
  html body .stats .k {
    font-size: 11px; letter-spacing: .07em; text-transform: uppercase; color: var(--faint);
  }
  html body .stats .v {
    font-size: 30px; font-weight: 760; letter-spacing: -.035em;
    margin-top: 8px; font-variant-numeric: tabular-nums;
  }

  /* 卡片：内边距与标题放松 */
  html body .card { padding: 6px 22px 10px; margin-top: 18px; }
  html body .card > h3 { font-size: 14px; letter-spacing: .01em; margin: 18px 0 8px; }
  html body .card > h3 a { font-size: 12.5px; }

  /* 分区标题：小号大写，更像目录而不是标题 */
  html body .sec { margin: 30px 0 14px; }
  html body .sec h2 {
    font-size: 12.5px; letter-spacing: .09em; text-transform: uppercase;
    color: var(--faint); font-weight: 700;
  }

  /* 功能格：桌面按可用宽度自动排 */
  html body .tiles, html body .grid {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px;
  }

  /* 主卡更舒展 */
  html body .hero { padding: 26px 28px; }

  /* 表格行更松，读数字不费劲 */
  html body table td { padding-top: 11px; padding-bottom: 11px; }
}

/* ===================================================================
   v4.3 看板组件：大标题头 / 带图标的指标卡 / 两栏版式 / 风险计数列表 / 快捷入口
   只加新类，不动已有页面的骨架。
   =================================================================== */
.phead { display: flex; align-items: flex-start; gap: 16px; padding: 26px 0 2px; }
.phead h1 { font-size: 30px; font-weight: 760; letter-spacing: -.032em; margin: 0; line-height: 1.2; flex: 0 0 auto; }
/* 页头里直接放说明段落时，别让它把标题挤成竖排 */
.phead > p { flex: 1 1 auto; min-width: 0; margin: 4px 0 0; font-size: 13px; color: var(--muted); line-height: 1.65; }
.phead .ps { font-size: 13px; color: var(--muted); margin-top: 8px; letter-spacing: .01em; }
.phead .live {
  margin-left: auto; flex: 0 0 auto;
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 14px; border-radius: 999px;
  background: var(--card); border: 1px solid var(--line);
  font-size: 12.5px; color: var(--ink-2); box-shadow: var(--shadow-1);
}
.phead .live i {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--brand-2); box-shadow: 0 0 0 3px rgba(18,160,95,.16);
  flex: 0 0 auto;
}

/* 指标卡：标签 / 大数字 / 说明 / 右上角图标块 */
.krow {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 16px; margin-top: 20px;
}
.kcard {
  position: relative;
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius-card); box-shadow: var(--shadow-1);
  padding: 20px 22px 18px;
  transition: border-color .14s ease, box-shadow .14s ease;
}
.kcard:hover { border-color: var(--brand-line); box-shadow: var(--shadow-2); }
.kcard .kk { font-size: 12.5px; color: var(--muted); letter-spacing: .01em; }
.kcard .kv {
  font-size: 30px; font-weight: 760; letter-spacing: -.035em; line-height: 1.1;
  margin-top: 12px; font-variant-numeric: tabular-nums; color: var(--ink);
}
.kcard .kv.brand { color: var(--brand); }
.kcard .kv.warnc { color: var(--amber); }
.kcard .ks { font-size: 12px; color: var(--faint); margin-top: 9px; letter-spacing: .01em; }
.kcard .ki {
  position: absolute; right: 18px; top: 18px;
  width: 38px; height: 38px; border-radius: 11px;
  display: grid; place-items: center;
  background: var(--brand-soft);
}
.kcard .ki svg { width: 19px; height: 19px; stroke: var(--brand); stroke-width: 1.7; fill: none; stroke-linecap: round; stroke-linejoin: round; }

/* 两栏版式 */
.dash-grid {
  display: grid; grid-template-columns: 1.75fr 1fr;
  gap: 18px; margin-top: 18px; align-items: start;
}
.dash-grid > div { min-width: 0; }

/* 风险 / 待办计数行 */
.rrow {
  display: flex; align-items: center; gap: 12px;
  padding: 15px 0; border-bottom: 1px solid var(--line-soft);
  text-decoration: none; color: inherit;
}
.rrow:last-child { border-bottom: 0; }
.rrow .rn { flex: 1; min-width: 0; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rrow .rb {
  min-width: 32px; height: 26px; padding: 0 10px;
  border-radius: 999px; display: inline-flex; align-items: center; justify-content: center;
  font-size: 12.5px; font-weight: 700; font-variant-numeric: tabular-nums; flex: 0 0 auto;
}
.rrow .rb.hot { background: #FEF3F2; color: #B42318; }
.rrow .rb.warm { background: #FFFAEB; color: #B54708; }
.rrow .rb.cool { background: var(--brand-soft); color: var(--brand-ink); }
.rrow .rb.zero { background: var(--line-soft); color: var(--faint); }

/* 快捷入口：两列浅底条 */
.qgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 4px; }
.qitem {
  display: flex; align-items: center; gap: 10px;
  padding: 13px 14px; border-radius: 12px;
  background: var(--bg); border: 1px solid transparent;
  text-decoration: none; color: var(--ink-2); font-size: 13px;
  transition: background .14s ease, border-color .14s ease, color .14s ease;
}
.qitem:hover { background: var(--brand-soft); border-color: var(--brand-line); color: var(--brand-ink); }
.qitem svg { width: 17px; height: 17px; stroke: var(--brand); stroke-width: 1.7; fill: none; flex: 0 0 auto; }
.qitem span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* 侧边栏底部：登录的人 */
.sn-user {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 16px; border-top: 1px solid rgba(255,255,255,.07);
}
.sn-user .av {
  width: 34px; height: 34px; border-radius: 50%; flex: 0 0 auto;
  background: rgba(18,160,95,.22); color: #7FE3B0;
  display: grid; place-items: center; font-size: 13px; font-weight: 700;
}
.sn-user .ub { min-width: 0; flex: 1; }
.sn-user .un { font-size: 13px; color: rgba(255,255,255,.88); line-height: 1.35; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sn-user .ud { font-size: 11px; color: rgba(255,255,255,.38); margin-top: 1px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sn-user .q {
  flex: 0 0 auto; font-size: 11.5px; color: rgba(255,255,255,.44);
  text-decoration: none; padding: 5px 8px; border-radius: 7px;
}
.sn-user .q:hover { background: rgba(255,255,255,.07); color: rgba(255,255,255,.8); }

/* 桌面：两栏压力更明显时收一档 */
@media (min-width: 900px) {
  html body .dash-grid { gap: 20px; }
  html body .phead h1 { font-size: 32px; }
}
@media (max-width: 900px) {
  .dash-grid { grid-template-columns: 1fr; }
  .qgrid { grid-template-columns: 1fr 1fr; }
  .phead { flex-wrap: wrap; }
  .phead .live { margin-left: 0; }
}


/* ===== v4.4 卡内信息密度（学钉钉管理后台） ===== */
/* 1 主数字后带分母：25 / 500 人 这种写法，一眼知道用了多少、上限多少 */
.kcard .kv .of { font-size: 14px; font-weight: 600; color: var(--faint); letter-spacing: 0; margin-left: 5px; }
/* 2 卡片底部操作链接：把「下一步做什么」直接放在卡里，不用满页面找按钮 */
.kcard.has-link { padding-bottom: 54px; }
.klink {
  position: absolute; left: 22px; right: 22px; bottom: 14px;
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding-top: 11px; border-top: 1px solid var(--line-soft);
  font-size: 12px; color: var(--muted); text-decoration: none;
  transition: color .14s ease;
}
.klink:hover, .klink:hover b { color: var(--brand); }
.klink em { font-style: normal; color: var(--faint); }
.klink b { font-weight: 650; color: var(--ink-2); transition: color .14s ease; }
/* 3 空态：一个环 + 主结论 + 一句解释（钉钉「暂无待处理事项」那种） */
.empty-ok {
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  padding: 28px 0 22px; text-align: center;
}
.empty-ok i {
  width: 34px; height: 34px; border-radius: 50%; border: 1.5px solid var(--brand-line);
  display: grid; place-items: center; margin-bottom: 5px;
}
.empty-ok i::after {
  content: ""; width: 11px; height: 6px; border-left: 2px solid var(--brand);
  border-bottom: 2px solid var(--brand); transform: rotate(-45deg) translate(1px, -2px);
}
.empty-ok b { font-size: 13px; font-weight: 650; color: var(--ink-2); }
.empty-ok span { font-size: 12px; color: var(--faint); line-height: 1.65; max-width: 260px; }


/* ==== 判定四态（V1.3 四态渲染：通过 / 待审 / 不通过 / 无判定）==== */
html body .v4 {
  display: inline-block; padding: 2px 9px; border-radius: 999px;
  font-size: 12px; font-weight: 650; line-height: 1.5; white-space: nowrap;
  border: 1px solid transparent;
}
html body .v4.v-pass { background: var(--brand-soft); color: var(--brand-ink); border-color: var(--brand-line); }
html body .v4.v-pend { background: #FEF3C7; color: #92400E; border-color: #FDE68A; }
html body .v4.v-fail { background: #FEE4E2; color: #912018; border-color: #FDA29B; }
html body .v4.v-na   { background: var(--line-soft); color: var(--muted); border-color: var(--line); }

/* FR-PMS-04 侧边栏折叠 + 两级小节 + 搜索（V2.2 阶段零） */
#sideNav .sn-search { padding: 8px 12px 2px; }
#sideNav .sn-search input {
  width: 100%; box-sizing: border-box; height: 30px;
  padding: 0 10px; border-radius: 8px; font-size: 12px;
  background: rgba(255,255,255,.07); color: var(--sn-fg, #fff);
  border: 1px solid rgba(255,255,255,.10); outline: none;
}
#sideNav .sn-search input::placeholder { color: var(--sn-head-sub, rgba(255,255,255,.40)); }
#sideNav .sn-search input:focus { border-color: var(--sn-on-bar, #12A05F); background: rgba(255,255,255,.10); }
#sideNav .sn-gt[data-fold] { cursor: pointer; display: flex; align-items: center; gap: 6px; user-select: none; }
#sideNav .sn-gt[data-fold]:hover { color: rgba(255,255,255,.62); }
#sideNav .sn-gt .gt-n {
  margin-left: auto; font-style: normal; font-size: 10px; font-weight: 600;
  min-width: 18px; text-align: center; padding: 1px 5px; border-radius: 999px;
  background: rgba(255,255,255,.08); color: rgba(255,255,255,.55);
}
#sideNav .sn-gb { display: block; }
#sideNav .sn-grp.folded .sn-gb { display: none; }
#sideNav .sn-grp.folded .sn-gt .gt-ico { transform: rotate(-90deg); }
#sideNav .sn-gt .gt-ico { transition: transform .15s ease; }

/* ===== 二级菜单（模块域小节）：2026-11-14 ===== */
/* 颜色一律走 --sn-gt：这个变量在深色/浅色两套主题里都有定义，
   直接写 rgba(255,255,255,.5) 会在浅色侧边栏上变成「白字白底」，标题就消失了。 */
#sideNav .sn-secw { margin: 2px 0 4px; }
#sideNav .sn-st {
  display: flex; align-items: center; gap: 6px;
  padding: 7px 8px 5px 30px; cursor: pointer; user-select: none;
  font-size: 11px; font-weight: 700; letter-spacing: .04em;
  color: var(--sn-gt);
}
#sideNav .sn-st:hover { color: var(--sn-head-fg); }
#sideNav .sn-st .sn-sc {
  margin-left: auto; font-style: normal; font-size: 10px; font-weight: 600;
  min-width: 16px; text-align: center; opacity: .75;
}
#sideNav .sn-st .sn-ar {
  width: 0; height: 0; border-left: 4px solid currentColor;
  border-top: 3.5px solid transparent; border-bottom: 3.5px solid transparent;
  transform: rotate(90deg); transition: transform .15s ease; opacity: .7;
}
#sideNav .sn-secw.folded .sn-st .sn-ar { transform: rotate(0deg); }
#sideNav .sn-secw.folded .sn-sb { display: none; }
#sideNav .sn-sb { display: block; }
body[data-side="light"] #sideNav .sn-st,
html[data-mode="light"] body #sideNav .sn-st { color: #667085; }
body[data-side="light"] #sideNav .sn-st:hover,
html[data-mode="light"] body #sideNav .sn-st:hover { color: #101828; }
#sideNav .sn-sec {
  font-size: 11px; font-weight: 700; letter-spacing: .04em;
  color: rgba(255,255,255,.46); padding: 10px 8px 4px 37px;
}
#sideNav .sn-grp.pinned { margin-top: 10px; border-top: 1px solid rgba(255,255,255,.08); padding-top: 4px; }
/* 前台 / 后台 分区标题（2026-11-08：侧边栏区分业务前台与管理后台） */
#sideNav .sn-zone {
  margin: 14px 10px 2px; padding: 6px 10px; border-radius: 8px;
  font-size: 10.5px; font-weight: 700; letter-spacing: .12em;
  color: rgba(255,255,255,.72); background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.08);
}
#sideNav .sn-zone:first-child { margin-top: 2px; }
body[data-side="light"] #sideNav .sn-zone { color: #475467; background: #F2F4F7; border-color: #E4E7EC; }
#sideNav .sn-hide { display: none !important; }
body[data-side="light"] #sideNav .sn-sec { color: #667085; }
body[data-side="light"] #sideNav .sn-search input { background: #F2F4F7; color: #101828; border-color: #E4E7EC; }
body[data-side="light"] #sideNav .sn-gt .gt-n { background: #F2F4F7; color: #667085; }
@media (max-width:900px) { #sideNav .sn-sec { padding-left: 26px; } }


/* ===== R-01 四态：骨架屏 / 错误态 / 离线条 ===== */
.skel{background:linear-gradient(90deg,#EEF1F5 25%,#F7F9FB 37%,#EEF1F5 63%);background-size:400% 100%;animation:skel 1.4s ease infinite;border-radius:6px;height:14px;margin:6px 0}
.skel.w40{width:40%}.skel.w60{width:60%}.skel.w80{width:80%}.skel.h20{height:20px}.skel.h32{height:32px}
@keyframes skel{0%{background-position:100% 50%}100%{background-position:0 50%}}
.skel-card{background:#fff;border:1px solid #EEF0F4;border-radius:12px;padding:16px;margin-bottom:12px}
.err-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:32px 16px;border:1px dashed #E6B3B3;border-radius:12px;background:#FFF8F8;color:#B42318;text-align:center;gap:8px}
.err-state .e-ico{font-size:22px}
.err-state .e-tip{color:#8A6A6A;font-size:13px}
.err-state button{margin-top:6px;padding:6px 14px;border:1px solid #E6B3B3;background:#fff;color:#B42318;border-radius:8px;cursor:pointer}
.offline-bar{position:fixed;left:0;right:0;top:0;z-index:9999;background:#B42318;color:#fff;font-size:13px;text-align:center;padding:6px;display:none}
.offline-bar.show{display:block}

/* ===== 首页「本次新增」提示条与标新区块 ===== */
.newsbar{display:flex;align-items:center;gap:8px;padding:10px 12px;margin:12px 0;border:1px solid #C7E3D4;border-radius:12px;background:#F2FAF6;font-size:13px}
.newsbar .ni{flex:none;width:22px;height:22px;line-height:22px;text-align:center;border-radius:6px;background:var(--brand);color:#fff;font-size:12px;font-weight:700}
.newsbar .nt{flex:1;color:#1B4B36;font-weight:600}
.newsbar .nx{flex:none;color:var(--brand);text-decoration:none;font-size:12px}
.sec .tag-new{margin-left:8px;padding:1px 6px;border-radius:4px;background:#FEF3C7;color:#92400E;font-size:11px;font-weight:700;letter-spacing:.5px}
.tile.tile-new{position:relative;outline:1px solid #C7E3D4;outline-offset:-1px}
.tile.tile-new::after{content:'新';position:absolute;top:4px;right:4px;padding:0 4px;border-radius:3px;background:var(--brand);color:#fff;font-size:10px;line-height:14px}


/* ==================== 手机端竖屏适配（≤640px）· V2.2 4.26 ==================== */
@media (max-width: 640px) {
  /* 1. 全局禁止横向溢出 */
  html, body { overflow-x: hidden; max-width: 100%; }
  * { -webkit-tap-highlight-color: transparent; }

  /* 2. 表格改为横向滚动容器，不撑破页面 */
  /* 各页自带的 table.tb{min-width:640px} 会撑破 375px，这里强制归零，改由内部 thead/tbody 承载最小宽 */
  table, table.tb, .tb { min-width: 0 !important; width: 100% !important; }
  .wrap-t { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  table { display: block; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; border-collapse: separate; }
  table:not(.mcards) thead, table:not(.mcards) tbody { display: table; width: 100%; min-width: 520px; }
  /* 转成卡片的表（mtable.js）不能带 520px 最小宽，否则整行被撑到 520 再被容器裁掉 */
  table.mcards thead, table.mcards tbody { min-width: 0 !important; width: 100% !important; display: block; }

  /* 3. 触控目标 ≥44px（V2.2 4.26 硬要求） */
  .btn, button, .act, .tab { min-height: 44px; }
  .sn-i { min-height: 44px; }

  /* 4. 输入框 16px 防止 iOS 自动放大 */
  .inp, input, select, textarea { font-size: 16px !important; min-height: 44px; }

  /* 5. 卡片与栅格一律单列 */
  .kcard, .kpi4, .kpis, .grid2, .grid3, .tiles, .cfg-main { grid-template-columns: 1fr !important; }
  /* 5b. 指标卡走两列（2026-11-07）：单列时四个指标要滚一整屏才看得到下面的内容 */
  .krow { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px; margin-top: 14px; }
  .krow .kcard { padding: 13px 14px 11px; }
  .krow .kcard .kv { font-size: 23px; margin-top: 8px; }
  .krow .kcard .kk { font-size: 11.5px; }
  .krow .kcard .ks { font-size: 11px; margin-top: 6px; }
  .krow .kcard .ki { width: 30px; height: 30px; right: 12px; top: 12px; }
  .krow .kcard .ki svg { width: 15px; height: 15px; }
  /* 5c. 手机两列时卡片只有 ~160px 宽，说明文字会折成 3–4 行，
        而底部「去拜访 ›」是绝对定位，两段文字会压在一起（2026-11-09 截图实证）。
        手机改成流式排布：链接不再是绝对定位，说明与链接各占各的高度。 */
  .krow .kcard.has-link { padding-bottom: 13px; }
  .krow .kcard .klink {
    position: static; left: auto; right: auto; bottom: auto;
    margin-top: 9px; padding-top: 8px; gap: 8px;
    font-size: 11px; line-height: 1.35; align-items: flex-start;
  }
  .krow .kcard .klink em { flex: 1 1 auto; min-width: 0; white-space: normal; }
  .krow .kcard .klink b { flex: 0 0 auto; white-space: nowrap; }
  .krow .kcard .ks { line-height: 1.45; overflow-wrap: anywhere; }
  .appbar { flex-wrap: wrap; gap: 8px; padding: 10px 12px; }
  .appbar .title, .appbar h1 { font-size: 19px; }

  /* 6. 标题字号收敛 */
  h1 { font-size: 20px; }
  h2 { font-size: 17px; }
  h3 { font-size: 15px; }
  .phead h1 { font-size: 20px; }

  /* 7. 弹窗铺满宽度 */
  .modal, .dlg, .sheet, .pop { width: calc(100vw - 24px) !important; max-width: none !important; }

  /* 8. 内容底部留出安全区，不被打字栏 / 底部导航遮住 */
  .wrap, .container, .page { padding-bottom: calc(84px + env(safe-area-inset-bottom, 0px)); }
  body.has-side .wrap { padding-bottom: calc(84px + env(safe-area-inset-bottom, 0px)); }

  /* 9. 长文本与数字断行，防溢出 */
  .kv, .row, .note, .title, .chip { word-break: break-word; overflow-wrap: anywhere; }

  /* 10. 侧边栏抽屉宽度收窄 */
  #sideNav { width: 264px; max-width: 82vw; }
  body.has-side #sideNav { box-shadow: 0 0 40px var(--sn-mask-shadow); }
}


/* 侧边栏顶部：头像 + 姓名 + 职务（原来在底部一行塞不下，被语言按钮挤住） */
#sideNav .sn-head { padding: 16px 14px 12px; }
#sideNav .sn-who { display: flex; align-items: center; gap: 10px; min-width: 0; }
#sideNav .sn-who .av {
  width: 38px; height: 38px; border-radius: 50%; flex: 0 0 auto;
  background: rgba(18,160,95,.22); color: #7FE3B0;
  display: grid; place-items: center; font-size: 14px; font-weight: 700;
}
#sideNav .sn-who .wb { min-width: 0; }
#sideNav .sn-who .wb b {
  display: block; font-size: 14.5px; font-weight: 750; color: var(--brand-ink);
  line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#sideNav .sn-who .wb span {
  display: block; font-size: 11.5px; color: var(--muted);
  line-height: 1.4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* 底部：语言切换与退出平分一行，不再被挤 */
#sideNav .sn-user { justify-content: space-between; padding: 10px 12px; gap: 8px; }
#sideNav .sn-user .lang { display: flex; gap: 4px; flex: 0 0 auto; }
#sideNav .sn-user .lang .lb {
  min-width: 38px; height: 32px; border: 0; border-radius: 8px; cursor: pointer;
  background: rgba(255,255,255,.07); color: #cbd5e1; font: inherit; font-size: 12px; font-weight: 650;
}
#sideNav .sn-user .lang .lb.on { background: var(--brand); color: #fff; }
#sideNav .sn-user .q { font-size: 12.5px; color: #94a3b8; text-decoration: none; padding: 6px 8px; flex: 0 0 auto; }
#sideNav .sn-user .q:hover { color: #e2e8f0; }

/* 首页「常用」宫格：固定 4 列两行（其它页面的 .tiles 是 auto-fill 自动排满） */
html body .tiles.home-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 640px) {
  html body .tiles.home-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* 手机端：四个指标 2×2、待办与三个月别再挤成一行（2026-11-07） */
@media (max-width: 640px) {
  html body .metrics { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 10px; }
  html body .metrics > div { padding-right: 0; }
  html body .metrics > div + div { padding-left: 0; border-left: 0; }
  html body .metrics .v { font-size: 20px; }
  html body .metrics .v small { font-size: 11px; }
  html body #monthList > div { flex-direction: column !important; }
  html body #monthList > div > div { width: 100%; }
  html body .hero { padding: 18px 16px; }
  html body .hero .big { font-size: 32px; }
  html body .hero .ring svg { width: 72px; height: 72px; }
  html body .tiles.home-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px !important; }
  html body .tiles.home-tiles .tile { min-height: 78px; }
}

/* ---------- 宽表格：容器内横向滚动，别撑破页面 ---------- */
.tblwrap { width: 100%; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.tblwrap > table { min-width: 100%; }
/* 地图容器永远不超过父宽度（Leaflet 在窄容器会算出负偏移） */
.leaflet-container, #map, #fmap, .mapbox { max-width: 100% !important; overflow: hidden; }
/* 全站最小可读字号：不再出现 9.5px 这种 */
body { --min-fs: 11px; }
body .card .v, body .card .k, body .card .s, body table td, body table th { font-size: max(var(--min-fs), 1em); }

/* 表格里的迷你操作按钮：可点区域不小于 30×26 */
body table button, body table .btn, body table a.btn { min-height: 26px; min-width: 30px; padding: 3px 8px; }

/* 移动端：控件与卡片不再撑破视口（窄屏统一兜底，2026-11-09） */
@media (max-width: 899px) {
  select, input, textarea, .inp, .sel { max-width: 100%; min-width: 0 !important; box-sizing: border-box; }
  .wrap, .card, .card2, .card3, .cfg-main, .cfg-side, .tw, .tblwrap { max-width: 100% !important; box-sizing: border-box; }
  .cfg-main, .cfg-side { width: 100% !important; }
  .grid2, .grid3, .row2, .row3, .cols2, .cols3 { grid-template-columns: 1fr !important; }
  .kpi, .kpi .n, .kpi .t, .kpi .d, .krow > * { min-width: 0 !important; }
  label { max-width: 100%; }
  .dl { width: auto !important; max-width: 100%; }
}

/* ===== 深色模式 与 主体色（2026-11-09） =====
   规则：整套要么全深、要么全浅，不再出现「侧边栏深 + 内容浅」的混搭。
   data-mode = light | dark；data-accent = green | blue | purple | amber | red。
   深色下侧边栏自动跟随（--sn-* 用同一套底色），不再单独选。 */
html[data-mode="dark"] {
  --ink: #E8ECF2;
  --ink-2: #C3CCD9;
  --muted: #9AA6B6;
  --faint: #7A8798;
  --line: #2A3340;
  --line-soft: #202836;
  --bg: #12161D;
  --bg-2: #1A202A;
  --card: #1B222C;
  --brand-soft: rgba(18,160,95,.16);
  --brand-line: rgba(18,160,95,.35);
  --red-soft: rgba(180,35,24,.18);
  --amber-soft: rgba(181,71,8,.18);
  --blue-soft: rgba(23,92,211,.18);
  --gold-soft: rgba(181,71,8,.18);
  --shadow-1: 0 1px 2px rgba(0,0,0,.5);
  --shadow-2: 0 4px 10px -2px rgba(0,0,0,.55);
  --shadow-3: 0 18px 40px -18px rgba(0,0,0,.7);
  /* 侧边栏跟随深色 */
  --sn-bg: #0E1319;
  --sn-line: rgba(255,255,255,.08);
  --sn-inset: rgba(255,255,255,.06);
  --sn-head-fg: #F3F6FA;
  --sn-head-sub: rgba(255,255,255,.42);
  --sn-gt: rgba(255,255,255,.32);
  --sn-fg: rgba(255,255,255,.66);
  --sn-fg-hover: #fff;
  --sn-hover: rgba(255,255,255,.07);
  --sn-on-bg: var(--brand-soft);
  --sn-on-fg: #7FE3B0;
  --sn-on-bar: var(--brand);
  --sn-shadow: rgba(0,0,0,.5);
  --sn-mask-shadow: rgba(0,0,0,.6);
}
html[data-mode="dark"] body { background: var(--bg); color: var(--ink); }
/* 深色下把写死白底的组件压回卡片色（这些是 app.css 内部硬编码，不是内联） */
html[data-mode="dark"] .hero,
html[data-mode="dark"] .card,
html[data-mode="dark"] .panel,
html[data-mode="dark"] .list,
html[data-mode="dark"] .kpi,
html[data-mode="dark"] .box,
html[data-mode="dark"] .tcol,
html[data-mode="dark"] .mini,
html[data-mode="dark"] .drawer,
html[data-mode="dark"] .modal,
html[data-mode="dark"] .sheet,
html[data-mode="dark"] .pop,
html[data-mode="dark"] .topbar,
html[data-mode="dark"] .seg,
html[data-mode="dark"] .chip,
html[data-mode="dark"] .tag,
/* 深色：页面容器与表格行（.page/.wrap/.phead/.krow/.kpis/.flx 等在 10 页里仍是浅底） */
html[data-mode="dark"] .page,
html[data-mode="dark"] .wrap,
html[data-mode="dark"] .main,
html[data-mode="dark"] .app,
html[data-mode="dark"] .content,
html[data-mode="dark"] .phead,
html[data-mode="dark"] .krow,
html[data-mode="dark"] .kpis,
html[data-mode="dark"] .flx,
html[data-mode="dark"] .mvgrid,
html[data-mode="dark"] .f { background: var(--bg) !important; }
html[data-mode="dark"] table,
html[data-mode="dark"] tr,
html[data-mode="dark"] td,
html[data-mode="dark"] th,
html[data-mode="dark"] tbody { background: transparent !important; }
html[data-mode="dark"] .k,
html[data-mode="dark"] .kpi,
html[data-mode="dark"] .card,
html[data-mode="dark"] .card2 { background: var(--card) !important; }

/* 提示条与顶部应用条：深色下最常见的两处白斑（.note 39 页、.appbar 37 页） */
html[data-mode="dark"] .note,
html[data-mode="dark"] .note.warn,
html[data-mode="dark"] .tip,
html[data-mode="dark"] .hint,
html[data-mode="dark"] .tipbox,
html[data-mode="dark"] .snote,
html[data-mode="dark"] .rule,
html[data-mode="dark"] .ht {
  background: rgba(255,255,255,.06) !important;
  color: var(--ink-2) !important;
  border-color: var(--line) !important;
}
html[data-mode="dark"] .note b,
html[data-mode="dark"] .note strong { color: var(--ink) !important; }
html[data-mode="dark"] .appbar {
  background: var(--bg-2) !important;
  border-color: var(--line) !important;
  color: var(--ink) !important;
}
html[data-mode="dark"] .appbar .t,
html[data-mode="dark"] .appbar .title { color: var(--ink) !important; }
html[data-mode="dark"] .k,
html[data-mode="dark"] .kv,
html[data-mode="dark"] .item,
html[data-mode="dark"] .chartcard,
html[data-mode="dark"] .pickbar,
html[data-mode="dark"] .vgrid,
html[data-mode="dark"] .sen,
html[data-mode="dark"] .mgrp,
html[data-mode="dark"] .card2,
html[data-mode="dark"] .prev {
  background: var(--card) !important;
  border-color: var(--line) !important;
}
html[data-mode="dark"] tr:nth-child(even) td { background: rgba(255,255,255,.02); }
html[data-mode="dark"] .page,
html[data-mode="dark"] .wrap,
html[data-mode="dark"] .main,
html[data-mode="dark"] .app,
html[data-mode="dark"] .content,
html[data-mode="dark"] .phead,
html[data-mode="dark"] .section-h,
html[data-mode="dark"] .hd-bar,
html[data-mode="dark"] .tabs,
html[data-mode="dark"] .segbar { background: var(--card) !important; background-image: none !important; }
html[data-mode="dark"] .hero .ring circle:first-child { stroke: rgba(255,255,255,.14) !important; }
html[data-mode="dark"] .brandline,
html[data-mode="dark"] .hd { background: var(--card) !important; }
html[data-mode="dark"] .btn { color: #fff; }
html[data-mode="dark"] .btn.ghost { background: var(--bg-2) !important; color: var(--ink-2); }
html[data-mode="dark"] input, html[data-mode="dark"] select, html[data-mode="dark"] textarea {
  background: var(--bg-2); color: var(--ink); border-color: var(--line);
}
html[data-mode="dark"] table th { background: var(--bg-2); color: var(--ink-2); }
html[data-mode="dark"] table td { border-color: var(--line); }
html[data-mode="dark"] tr:hover td { background: rgba(255,255,255,.03); }
html[data-mode="dark"] .note { background: rgba(255,255,255,.04); color: var(--ink-2); }
html[data-mode="dark"] .btn.ghost { background: var(--card); color: var(--ink-2); }
/* 页面里写死白底/深字的内联样式：深色下统一压回卡片色（属性子串匹配，不改 65 个页面） */
html[data-mode="dark"] [style*="background:#fff"], html[data-mode="dark"] [style*="background: #fff"],
html[data-mode="dark"] [style*="background:#FFF"], html[data-mode="dark"] [style*="background:white"],
html[data-mode="dark"] [style*="background-color:#fff"], html[data-mode="dark"] [style*="background-color: #fff"],
html[data-mode="dark"] [style*="background:#ffffff"], html[data-mode="dark"] [style*="background: #ffffff"] {
  background: var(--card) !important;
  color: var(--ink) !important;
  border-color: var(--line) !important;
}
html[data-mode="dark"] [style*="color:#0"], html[data-mode="dark"] [style*="color: #0"],
html[data-mode="dark"] [style*="color:#1"], html[data-mode="dark"] [style*="color: #1"],
html[data-mode="dark"] [style*="color:#3"], html[data-mode="dark"] [style*="color: #3"] {
  color: var(--ink) !important;
}
html[data-mode="dark"] [style*="border:1px solid #e"], html[data-mode="dark"] [style*="border: 1px solid #e"],
html[data-mode="dark"] [style*="border-bottom:1px solid #e"], html[data-mode="dark"] [style*="border-top:1px solid #e"] {
  border-color: var(--line) !important;
}

/* 主体色：只换品牌系，不改语义色（红/黄/蓝的告警含义保留） */
html[data-mode="dark"][data-accent="gold"]   { --brand-soft: rgba(201,162,39,.18); --brand-line: rgba(201,162,39,.42); }
html[data-mode="dark"][data-accent="blue"]   { --brand-soft: rgba(59,130,246,.18); --brand-line: rgba(59,130,246,.4); }
html[data-mode="dark"][data-accent="purple"] { --brand-soft: rgba(139,92,246,.18); --brand-line: rgba(139,92,246,.4); }
html[data-mode="dark"][data-accent="amber"]  { --brand-soft: rgba(217,119,6,.18);  --brand-line: rgba(217,119,6,.4); }
html[data-mode="dark"][data-accent="red"]    { --brand-soft: rgba(220,38,38,.18);  --brand-line: rgba(220,38,38,.4); }

/* ===== 浅色模式的侧边栏（白底深字），与内容区保持一致 ===== */
html[data-mode="light"] body #sideNav,
html[data-mode="light"] body #sideNav.sn,
html[data-mode="light"] body[data-side] #sideNav {
  --sn-bg: #FFFFFF;
  --sn-line: #E4E7EC;
  --sn-inset: #F5F6F8;
  --sn-head-fg: #101828;
  --sn-head-sub: #98A2B3;
  --sn-gt: #98A2B3;
  --sn-fg: #475467;
  --sn-fg-hover: #101828;
  --sn-hover: #F2F4F7;
  --sn-on-bg: #E8F5EE;
  --sn-on-fg: #0B7B4B;
  background: #FFFFFF !important;
  border-right: 1px solid #E4E7EC;
  box-shadow: 1px 0 0 rgba(16,24,40,.02);
}
html[data-mode="light"] #sideNav .sn-zone {
  color: #667085 !important;
  background: #F2F4F7 !important;
  border-color: #E4E7EC !important;
}
html[data-mode="light"] #sideNav input,
html[data-mode="light"] #sideNav .sn-q {
  background: #F5F6F8 !important;
  color: #101828 !important;
  border-color: #E4E7EC !important;
}
html[data-mode="light"] #sideNav .sn-i.on,
html[data-mode="light"] #sideNav .sn-i.active {
  background: #E8F5EE !important;
  color: #0B7B4B !important;
}

/* ===== 浅色侧边栏文字强制（浅色侧边栏文字强制） ===== */
html[data-mode="light"] body #sideNav .sn-i,
html[data-mode="light"] body #sideNav .sn-i span,
html[data-mode="light"] body #sideNav .sn-i a,
html[data-mode="light"] body #sideNav .sn-sec,
html[data-mode="light"] body #sideNav a,
html[data-mode="light"] body #sideNav .sn-name { color: #475467 !important; }
html[data-mode="light"] body #sideNav .sn-gt { color: #475467 !important; }
html[data-mode="light"] body #sideNav .sn-sec { color: #667085 !important; }
html[data-mode="light"] body #sideNav .sn-i:hover,
html[data-mode="light"] body #sideNav .sn-i:hover span { color: #101828 !important; }
html[data-mode="light"] body #sideNav .sn-i.on,
html[data-mode="light"] body #sideNav .sn-i.on span,
html[data-mode="light"] body #sideNav .sn-i.active,
html[data-mode="light"] body #sideNav .sn-i.active span { color: #0B7B4B !important; font-weight: 600; }
html[data-mode="light"] body #sideNav .sn-grp-t,
html[data-mode="light"] body #sideNav .sn-t { color: #101828 !important; }
html[data-mode="light"] body #sideNav svg,
html[data-mode="light"] body #sideNav .sn-i svg { color: inherit !important; stroke: currentColor; }
html[data-mode="light"] body #sideNav .sn-zone { color:#667085 !important; background:#F2F4F7 !important; border-color:#E4E7EC !important; }

/* ===== UX-2 统一卡片规格（工作台试点 → 全站） ===== */
:root{ --r-lg:18px; }
.page > .card, .wrap > .card{ border-radius:var(--r-lg); }
.krow{ gap:14px; }
.krow .kcard{ border-radius:var(--r-lg); }
.krow .kcard .ki{ width:42px; height:42px; border-radius:12px; background:var(--brand-soft); display:flex; align-items:center; justify-content:center; }
.hero-card{ display:flex; align-items:flex-start; gap:14px; padding:22px 24px; border-radius:var(--r-lg); border:1px solid var(--brand-line); background:linear-gradient(135deg, var(--brand-soft), var(--bg)); margin-bottom:16px; }
.hero-card .hc-l{ min-width:0; }
.hero-card h1{ margin:0; font-size:28px; font-weight:800; letter-spacing:-.01em; color:var(--ink); line-height:1.25; }
.hero-card .ps{ margin-top:6px; font-size:13px; color:var(--muted); }
.hero-card .live{ margin-left:auto; flex:0 0 auto; }
html[data-mode="dark"] .hero-card{ background:linear-gradient(135deg, var(--brand-soft), var(--bg)); }
@media (max-width:640px){
  .hero-card{ padding:16px; flex-direction:column; gap:10px; }
  .hero-card h1{ font-size:22px; }
  .hero-card .live{ margin-left:0; }
}

/* 首页 hero 与横排指标卡统一到 UX-2 规格 */
.hero{ background:linear-gradient(135deg, var(--brand-soft), var(--bg)); border:1px solid var(--brand-line); border-radius:var(--r-lg); }
.metrics{ display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:12px; margin-top:16px; }
.metrics > div{ flex:none; background:var(--card); border:1px solid var(--line); border-radius:var(--r-lg); padding:14px 16px; padding-right:16px; box-shadow:0 1px 2px rgba(16,24,40,.04); }
.metrics > div + div{ border-left:1px solid var(--line); padding-left:16px; }
.metrics .k{ font-size:12px; color:var(--muted); }
.metrics .v{ margin-top:6px; }
@media (max-width:640px){
  .metrics{ grid-template-columns:repeat(2, minmax(0,1fr)); gap:10px; }
  .metrics > div{ padding:12px 14px; }
  .metrics > div + div{ padding-left:14px; }
  .metrics .v{ font-size:20px; }
}

/* ===== S1 手机顶栏：把左下浮块收成吸顶栏（2026-11-09，UI 清单 S1/S2） ===== */
@media (max-width: 899px) {
  /* 原来的左下竖条浮块：变成顶栏里的汉堡按钮，不再盖住内容 */
  body.has-side #sideBtn {
    position: static; left: auto; right: auto; bottom: auto;
    display: flex; flex: 0 0 auto;
    width: 40px; height: 40px; border-radius: 12px;
    background: transparent; color: var(--ink); box-shadow: none; opacity: 1;
  }
  body.side-rolling #sideBtn { opacity: 1; }
  body.side-open #sideBtn { opacity: 1; pointer-events: auto; }

  #mTop {
    display: flex; align-items: center; gap: 8px;
    position: fixed; top: 0; left: 0; right: 0; height: 52px; z-index: 70;
    padding: 0 10px; background: var(--card); border-bottom: 1px solid var(--line);
  }
  body.m-top { padding-top: 52px; }
  #mTop .mt-title {
    flex: 1 1 auto; min-width: 0;
    font-size: 16px; font-weight: 700; color: var(--ink); line-height: 1.2;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  #mTop .mt-right { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
  #mTop .mt-lang { display: flex; border: 1px solid var(--line); border-radius: 999px; overflow: hidden; }
  #mTop .mt-lang button {
    border: 0; background: transparent; color: var(--muted);
    font-size: 12px; font-weight: 600; padding: 4px 9px; cursor: pointer; line-height: 1.2;
  }
  #mTop .mt-lang button.on { background: var(--brand); color: #fff; }
  #mTop .mt-me {
    width: 30px; height: 30px; border-radius: 50%; text-decoration: none;
    background: var(--brand-soft); color: var(--brand-ink);
    display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700;
  }
}

/* ===== S3/S4/S10 手机端版面（2026-11-09，UI 清单 S3/S4/S10） ===== */
@media (max-width: 640px) {
  /* S3：统计/指标块不再塌成一字一行 —— 统一 2×2 */
  .card .kv, .card .row2, .card .stats, .card .kpis, .card .sumrow {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px 12px !important;
  }
  .card .kv > *, .card .row2 > *, .card .stats > *, .card .kpis > *, .card .sumrow > * { min-width: 0 !important; }
  /* 数字不折行（「1 条冲突」「85.09%」这类） */
  .card .kv .v, .card .kv b, .card .kv strong, .card .row2 .v,
  .krow .kcard .kv, .krow .kcard .kn { white-space: nowrap; }
  /* 标签允许折一行，但不允许一个字一行 */
  .card .kv .k, .card .row2 .k, .card .kv label { white-space: normal; word-break: keep-all; line-height: 1.35; }

  /* S4：表格可横向滚动，首列粘住，滚到右边也能知道在看谁
     注意：不能让 <table> 自己 display:block —— 那会毁掉列对齐，且它自身的 min-width 照样撑破视口。
     正确做法：表格保持 display:table，滚动交给卡片容器；表格宽 min-width:max-content 才能把真实宽度暴露给滚动条。 */
  .card:has(> table), .card:has(> .tbl) {
    overflow-x: auto; -webkit-overflow-scrolling: touch;
  }
  .card > table, .card > .tbl, .card > table.wrap-t {
    display: table; width: 100%; min-width: max-content !important;
  }
  .card > table th:first-child, .card > table td:first-child {
    position: sticky; left: 0; z-index: 1; background: var(--card, #fff);
  }
  .card > table th, .card > table td { white-space: nowrap; }

  /* 页面自己写了 min-width:640px 这类宽表（params / analytics / customer-import）：
     容器可滚 + 表格真实宽度 = 内容宽度，别让固定 min-width 撑破 360 */
  .card:has(table.tb) { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .card table.tb, .card table.tb th, .card table.tb td { min-width: 0 !important; }
  .card table.tb { min-width: max-content !important; }

  /* S10：表单行强制单列、标签在输入框上方 */
  .card .frow, .card .fld, .form .frow {
    display: block !important;
    margin-bottom: 12px;
  }
  .card .frow > label, .card .fld > label, .form .frow > label {
    display: block !important; margin: 0 0 6px !important;
    font-size: 13px; color: var(--muted);
  }
  .card .frow > input, .card .frow > select, .card .frow > textarea,
  .card .fld > input, .card .fld > select, .card .fld > textarea {
    width: 100% !important; min-width: 0 !important; box-sizing: border-box;
  }
  /* 多列表单栅格 → 单列 */
  .card .form-grid, .card .fgrid { grid-template-columns: 1fr !important; }

  /* S7：空态不再只剩一句灰字，给统一的块级留白与主按钮位 */
  .card .empty { padding: 22px 8px; }
  .card .empty .btn, .card .empty button { margin-top: 10px; }
}

/* 通用隐藏工具类：多个页面用 .hide 切页签，之前只有 b6 单页补过，统一放这里 */
.hide{display:none !important}


/* ===== 侧边栏打磨（2026-11-14）：分组更清晰、条目更醒目、当前项有绿色标记 ===== */
#sideNav .sn-body { padding: 8px 10px 18px; }
#sideNav .sn-zone {
  font-size: 10.5px; font-weight: 800; letter-spacing: .14em;
  color: #9aa8a1; padding: 14px 10px 6px; text-transform: uppercase;
}
#sideNav .sn-grp { margin-bottom: 2px; }
#sideNav .sn-gt {
  padding: 12px 10px 7px; font-size: 11.5px; font-weight: 800; letter-spacing: .04em;
  color: #7d8d85; display: flex; align-items: center; gap: 8px;
  cursor: pointer; border-radius: 8px;
}
#sideNav .sn-gt:hover { color: #0b7b4b; }
#sideNav .sn-gt .gt-ico { opacity: .55; width: 14px; height: 14px; }
#sideNav a.sn-i {
  position: relative; display: flex; align-items: center; gap: 9px;
  padding: 8px 12px; margin: 1px 0; border-radius: 9px;
  font-size: 13.5px; font-weight: 600; color: #35443d;
  transition: background .12s ease, color .12s ease;
}
#sideNav a.sn-i .ico { opacity: .7; width: 15px; height: 15px; }
#sideNav a.sn-i:hover { background: #f1f7f3; color: #0b7b4b; }
#sideNav a.sn-i:hover .ico { opacity: 1; }
#sideNav a.sn-i.on {
  background: #e8f5ee; color: #0a6b45; font-weight: 780;
  box-shadow: inset 0 0 0 1px #d3ecdd;
}
#sideNav a.sn-i.on .ico { opacity: 1; }
#sideNav a.sn-i.on::before {
  content: ''; position: absolute; left: 3px; top: 50%; transform: translateY(-50%);
  width: 3px; height: 17px; border-radius: 3px; background: #0b7b4b;
}
#sideNav .sn-foot { border-top: 1px solid #eef2ef; padding: 10px 12px; }
@media (max-width: 720px) {
  #sideNav a.sn-i { padding: 10px 12px; font-size: 14.5px; }
  #sideNav .sn-gt { padding: 14px 10px 8px; font-size: 12px; }
}


/* ===== 侧边栏打磨第二版 + 工作台卡片（2026-11-14） ===== */
#sideNav .sn-zone {
  background: transparent !important; border: 0 !important; box-shadow: none !important;
  font-size: 10px; font-weight: 800; letter-spacing: .16em; color: #9aa8a1;
  padding: 16px 12px 4px; text-transform: uppercase;
}
#sideNav .sn-grp.pinned .sn-gt { color: #7d8d85; }
#sideNav .sn-gt { background: transparent !important; }
#sideNav .sn-home { margin-bottom: 4px; font-weight: 700; }

/* 工作台卡片：更轻的层次 */
.wb-wrap .card, .wb-wrap .kpi, .wb-grid > * {
  border-radius: 14px !important;
  box-shadow: 0 1px 2px rgba(16, 40, 30, .04), 0 8px 24px -18px rgba(16, 40, 30, .18) !important;
}

/* 分组标签去药丸：只做小字标签，不做按钮观感（2026-11-14） */
html[data-mode="light"] body #sideNav .sn-zone,
body[data-side="light"] #sideNav .sn-zone,
#sideNav .sn-zone {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding: 15px 12px 5px !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  letter-spacing: .16em !important;
  color: #9aa8a1 !important;
}

/* ===== 手机端表格转卡片（mtable.js，2026-11-14）=====
   规矩：手机端不出现横向表格，一行数据变一张卡，表头文字变成每格的标签。
   桌面端完全不受影响（这些规则只在 720px 以下生效）。 */
@media (max-width: 720px) {
  table.mcards { display: block; width: 100%; max-width: 100%; border: 0; }
  table.mcards thead, table.mcards tr[data-mhead] { display: none; }
  table.mcards tbody { display: block; }
  table.mcards tr {
    display: block; margin: 0 0 10px; padding: 8px 12px;
    border: 1px solid var(--line, #e2e9e4); border-radius: 12px; background: #fff;
  }
  table.mcards tr:last-child { margin-bottom: 0; }
  table.mcards td {
    display: flex; align-items: center; gap: 10px;
    padding: 4px 0; border: 0; border-bottom: 1px dashed #eef3ee;
    text-align: left; font-size: 12.5px; line-height: 1.5;
  }
  table.mcards td:last-child { border-bottom: 0; }
  table.mcards td:empty { display: none; }
  table.mcards td::before {
    content: attr(data-label); flex: 0 0 76px;
    color: #6b7d72; font-size: 11.5px; font-weight: 600;
  }
  table.mcards td[data-label=""]::before, table.mcards td[data-label="#"]::before { flex: 0 0 32px; }
  table.mcards td > input, table.mcards td > select, table.mcards td > textarea {
    flex: 1 1 auto; min-width: 0; box-sizing: border-box;
  }
  table.mcards td > .btn, table.mcards td > button { flex: 0 0 auto; }
}
/* 补：卡片里的长文本要能换行，表格样式里的 nowrap 会把它切掉（2026-11-14） */
@media (max-width: 720px) {
  table.mcards td { align-items: flex-start; white-space: normal; overflow-wrap: anywhere; word-break: break-word; }
  table.mcards td > * { min-width: 0; max-width: 100%; }
  table.mcards td::before { padding-top: 1px; }
}
/* 补二：左表头表（th+td）与长文本（2026-11-14） */
@media (max-width: 720px) {
  table.mcards td[data-mth], table.mcards th[data-mth] { display: none; }
  table.mcards td b, table.mcards td strong, table.mcards td span, table.mcards td a {
    white-space: normal !important; overflow: visible !important; text-overflow: clip !important;
  }
  table.mcards td { overflow: visible; }
  table.mcards td[data-mth] + td { border-bottom: 0; }
}
/* 补三：卡片内子元素必须能压缩（否则长句把卡片撑到 494px，被容器裁掉）（2026-11-14） */
@media (max-width: 720px) {
  table.mcards, table.mcards tbody, table.mcards tr, table.mcards td {
    max-width: 100%; box-sizing: border-box;
  }
  table.mcards td > * { flex: 1 1 0; min-width: 0; overflow-wrap: anywhere; }
  table.mcards td { flex-wrap: nowrap; }
}
/* 补四：把卡片行钉死在容器宽度里（表格自身 312、行却 520，是被 min-content 撑开的）（2026-11-14） */
@media (max-width: 720px) {
  table.mcards tbody, table.mcards tr { width: 100% !important; max-width: 100% !important; }
  table.mcards td { width: auto !important; max-width: 100% !important; min-width: 0 !important; white-space: normal !important; }
  table.mcards td::before { flex: 0 0 72px !important; }
  table.mcards td > * { flex: 1 1 0 !important; min-width: 0 !important; max-width: 100% !important; }
}
/* 补五：卡片里的胶囊/标签不要被拉满整行（2026-11-14） */
@media (max-width: 720px) {
  table.mcards td > .pill, table.mcards td > .chip, table.mcards td > .tag,
  table.mcards td > .badge { flex: 0 0 auto !important; }
}
/* 补六：卡片里的状态胶囊按内容宽度，不要拉满整行（2026-11-14） */
@media (max-width: 720px) {
  table.mcards td > .pill, table.mcards td > .chip, table.mcards td > .tag,
  table.mcards td > .badge, table.mcards td .pill {
    width: -moz-fit-content !important; width: fit-content !important;
    align-self: flex-start !important; flex: 0 0 auto !important;
  }
}
/* 补七：四列统计卡在手机上改两列（390px 屏幕四列会把「全通过」挤成三行）（2026-11-14） */
@media (max-width: 720px) {
  .k4, .k4x, .kpi4, .stats4 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .k4 .c .v, .k4x .c .v { font-size: 21px !important; }
  .acards { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}

/* ==========================================================================
   财务平台风格侧边栏（2026-11-14，参考用户给的 SARO FOODS FINANCE PLATFORM）
   深墨绿底 + 金色方块 logo + 分组小字 + 选中白雾胶囊 + 金色左侧条
   只改外观：结构、层级、折叠逻辑都不动。
   ========================================================================== */
html body[data-skin="finance"] #sideNav {
  --sn-bg: #0B3B2A;
  --sn-line: rgba(255,255,255,.10);
  --sn-inset: rgba(255,255,255,.08);
  --sn-head-fg: #FFFFFF;
  --sn-head-sub: rgba(255,255,255,.45);
  --sn-gt: rgba(255,255,255,.42);
  --sn-fg: rgba(255,255,255,.78);
  --sn-fg-hover: #FFFFFF;
  --sn-hover: rgba(255,255,255,.07);
  --sn-on-bg: rgba(255,255,255,.14);
  --sn-on-fg: #FFFFFF;
  background: #0B3B2A !important;
  border-right: 0 !important;
  box-shadow: 1px 0 0 rgba(0,0,0,.10) !important;
}
html body[data-skin="finance"] #sideNav .sn-brand {
  display: flex; align-items: center; gap: 10px;
  padding: 16px 14px 14px; border-bottom: 1px solid rgba(255,255,255,.08);
}
html body[data-skin="finance"] #sideNav .sn-brand .lg {
  width: 34px; height: 34px; border-radius: 9px; flex: 0 0 auto;
  background: #C9A227; color: #0B3B2A;
  display: grid; place-items: center; font-weight: 800; font-size: 16px;
}
html body[data-skin="finance"] #sideNav .sn-brand b {
  display: block; color: #FFFFFF; font-size: 13.5px; font-weight: 800; letter-spacing: .04em; line-height: 1.2;
}
html body[data-skin="finance"] #sideNav .sn-brand span {
  display: block; margin-top: 3px; color: rgba(255,255,255,.45);
  font-size: 9.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
}
/* 一级组标题：小字、拉开字距、淡白 */
html body[data-skin="finance"] #sideNav .sn-zone,
html body[data-skin="finance"] #sideNav .sn-gt {
  color: rgba(255,255,255,.45) !important;
  background: transparent !important;
  border: 0 !important;
  font-size: 10.5px !important; font-weight: 700 !important;
  letter-spacing: .10em !important;
  padding: 14px 12px 6px !important;
}
/* 二级（小节）标题 */
html body[data-skin="finance"] #sideNav .sn-st { color: rgba(255,255,255,.38) !important; }
html body[data-skin="finance"] #sideNav .sn-st:hover { color: rgba(255,255,255,.72) !important; }
/* 条目 */
html body[data-skin="finance"] #sideNav .sn-i,
html body[data-skin="finance"] #sideNav .sn-i span { color: rgba(255,255,255,.80) !important; }
html body[data-skin="finance"] #sideNav .sn-i {
  border-radius: 8px !important; margin: 1px 8px !important; padding: 7px 10px !important;
}
html body[data-skin="finance"] #sideNav .sn-i:hover {
  background: rgba(255,255,255,.07) !important; color: #fff !important;
}
html body[data-skin="finance"] #sideNav .sn-i.on,
html body[data-skin="finance"] #sideNav .sn-i.active {
  background: rgba(255,255,255,.14) !important;
  color: #FFFFFF !important;
  box-shadow: inset 2px 0 0 #C9A227;
}
html body[data-skin="finance"] #sideNav .sn-i.on span,
html body[data-skin="finance"] #sideNav .sn-i.active span { color: #FFFFFF !important; }
/* 搜索框 */
html body[data-skin="finance"] #sideNav .sn-q,
html body[data-skin="finance"] #sideNav input {
  background: rgba(255,255,255,.08) !important;
  border-color: rgba(255,255,255,.10) !important;
  color: #FFFFFF !important;
}
html body[data-skin="finance"] #sideNav .sn-q::placeholder,
html body[data-skin="finance"] #sideNav input::placeholder { color: rgba(255,255,255,.40) !important; }
/* 底部语言/退出 */
html body[data-skin="finance"] #sideNav .sn-foot,
html body[data-skin="finance"] #sideNav .sn-ft { border-top: 1px solid rgba(255,255,255,.08) !important; }
html body[data-skin="finance"] #sideNav .sn-foot .lb,
html body[data-skin="finance"] #sideNav .sn-ft .lb { color: rgba(255,255,255,.70) !important; }
html body[data-skin="finance"] #sideNav .sn-foot .lb.on,
html body[data-skin="finance"] #sideNav .sn-ft .lb.on { background: #12A05F !important; color: #fff !important; }
/* 财务平台风格：一级组标题去掉小图标，只留小字，视觉更干净（用户参考图没有图标） */
html body[data-skin="finance"] #sideNav .sn-gt .gt-ico { display: none !important; }
html body[data-skin="finance"] #sideNav .sn-gt { padding-left: 12px !important; }
html body[data-skin="finance"] #sideNav .sn-i { font-size: 13px !important; }
html body[data-skin="finance"] #sideNav .sn-brand + .sn-search { margin-top: 10px; }

/* ===== 入口卡（参考财务平台「① 付款申请 / ② 我的报账 / ③ 我的报销」那种卡）=====
   用在 /workbench 的「常用入口」：序号 + 图标块 + 标题 + 一句说明 + 进入 → */
.qgrid { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 12px !important; }
.qgrid .qitem {
  display: flex !important; flex-direction: column; gap: 6px;
  position: relative; padding: 14px 16px 12px !important;
  background: var(--card, #fff); border: 1px solid var(--line, #E4E7EC); border-radius: 12px;
  text-decoration: none; color: inherit; min-height: 118px;
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.qgrid .qitem:hover { border-color: var(--brand-line, #BFDCCF); box-shadow: 0 4px 14px rgba(16,24,40,.07); transform: translateY(-1px); }
.qgrid .qi-no {
  position: absolute; top: 12px; right: 14px;
  font-size: 11px; font-weight: 700; color: var(--muted, #98A2B3); letter-spacing: .04em;
}
.qgrid .qi-ico {
  width: 34px; height: 34px; border-radius: 10px; flex: 0 0 auto;
  display: grid; place-items: center; margin-bottom: 2px;
  background: var(--brand-soft, #E8F5EE); color: var(--brand, #0B7B4B);
}
.qgrid .qi-ico svg { width: 19px; height: 19px; stroke: currentColor; stroke-width: 1.8; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.qgrid .qi-t { font-size: 14.5px; font-weight: 700; line-height: 1.35; color: var(--text, #101828); }
.qgrid .qi-d { font-size: 12px; line-height: 1.55; color: var(--muted, #667085); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.qgrid .qi-go { margin-top: auto; font-size: 12px; font-weight: 650; color: var(--brand, #0B7B4B); }
@media (max-width: 1100px) { .qgrid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } }
@media (max-width: 720px) {
  .qgrid { grid-template-columns: 1fr !important; gap: 10px !important; }
  .qgrid .qitem { min-height: 0; padding: 12px 14px !important; }
  .qgrid .qi-ico { width: 30px; height: 30px; }
}
/* 入口卡：序号改成标题前的圆形小徽标（参考图「① 付款申请」），不再右上角绝对定位 */
.qgrid .qi-no {
  position: static !important; display: inline-grid; place-items: center;
  width: 18px; height: 18px; border-radius: 50%; margin-right: 6px;
  border: 1px solid var(--line, #E4E7EC); background: #fff;
  font-size: 10.5px; font-weight: 700; color: var(--muted, #98A2B3);
  vertical-align: 1px;
}
.qgrid .qi-t { display: block; }
.qgrid .qitem { align-items: flex-start !important; text-align: left !important; }
/* 可读性：深绿侧边栏上 .30 透明的组标题对比度只有约 2.3:1，11px 小字看不清。
   提到 .62（约 4.6:1），保持「次要但可读」。（2026-11-14 夜间巡检） */
html body[data-skin="finance"] #sideNav { --sn-gt: rgba(255, 255, 255, .62) !important; }
html body[data-skin="finance"] #sideNav .sn-st { color: rgba(255, 255, 255, .58) !important; }
html body[data-skin="finance"] #sideNav .sn-st .sn-sc { color: rgba(255, 255, 255, .46) !important; }
html body[data-skin="finance"] #sideNav .sn-gt { color: rgba(255, 255, 255, .66) !important; }
/* 首页「今日应拜访 N 家 · 有效 ≥ M」一行（2026-11-14：每个岗位显示自己的定额，不再统一顶 16） */
.metrics .quota-line { margin-top: 5px; font-size: 11.5px; color: var(--muted); line-height: 1.4; }