/* ===========================================================
   虹桥镇环卫运维督导平台 · 设计系统 v2「晴空行动」
   ----------------------------------------------------------
   改版思路：
   · 浅色侧栏 —— 去掉压抑的深色后台感，靠留白与字重分层
   · 渐变 Hero —— 每页顶部一条墨绿渐变横幅承载标题与氛围
   · 大数字 KPI —— 数字即界面，弱化边框、强化层次
   · 柔和阴影 —— 三级 elevation，卡片浮在晨雾般的底色上
   =========================================================== */
:root {
  --c-primary: #1e66d0;
  --c-primary-600: #154fa8;
  --c-primary-300: #6ea3ec;
  --c-primary-100: #dce9fc;
  --c-primary-50: #f0f5fe;

  --c-accent: #ef8f3c;
  --c-accent-100: #fdefe2;

  --c-danger: #e05252;
  --c-danger-100: #fdecec;
  --c-warn: #e5a712;
  --c-warn-100: #fdf5df;
  --c-ok: #2ba05f;
  --c-ok-100: #e6f7ee;
  --c-info: #3a7bd5;
  --c-info-100: #eaf2fc;

  --ink: #17251f;
  --ink-2: #41544c;
  --ink-3: #6d817a;
  --ink-4: #9aaca5;
  --line: #e6ece9;
  --line-2: #f0f4f2;
  --bg: #f2f6f4;
  --surface: #ffffff;
  --surface-2: #f8fbfa;

  --radius: 16px;
  --radius-sm: 10px;
  --radius-lg: 24px;
  --shadow-sm: 0 1px 2px rgba(23, 37, 31, .05);
  --shadow: 0 2px 4px rgba(23, 37, 31, .04), 0 12px 28px -10px rgba(23, 37, 31, .12);
  --shadow-lg: 0 24px 60px -16px rgba(15, 45, 100, .28);

  --sidebar-w: 236px;
  --header-h: 64px;
  --font: "PingFang SC", "Microsoft YaHei", "HarmonyOS Sans SC", system-ui, -apple-system, sans-serif;
  --mono: "SF Mono", "JetBrains Mono", Consolas, monospace;

  /* Hero 渐变 */
  --hero-grad: linear-gradient(118deg, #123f8f 0%, #1e66d0 46%, #2f7ad4 74%, #5a9ae6 100%);
}

* { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0;
  background:
    radial-gradient(1200px 500px at 85% -10%, rgba(30, 95, 192, .07), transparent 60%),
    radial-gradient(900px 420px at -10% 20%, rgba(239, 143, 60, .05), transparent 55%),
    var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size:14px; line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
img { max-width: 100%; display: block; }
h1, h2, h3, h4 { margin: 0; font-weight: 700; letter-spacing: -.015em; }

:focus-visible { outline: 2.5px solid var(--c-primary); outline-offset: 2px; border-radius: 6px; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ============ 布局骨架 ============ */
.app { display: flex; min-height: 100dvh; }

/* ---- 浅色侧栏 ---- */
.sidebar {
  width: var(--sidebar-w); flex: 0 0 var(--sidebar-w);
  background: rgba(255, 255, 255, .82);
  backdrop-filter: blur(14px) saturate(160%);
  border-right: 1px solid rgba(230, 236, 233, .9);
  display: flex; flex-direction: column;
  position: fixed; inset: 0 auto 0 0; z-index: 40;
  overflow-y: auto; scrollbar-width: thin; scrollbar-color: #d4e0db transparent;
}
.sidebar::-webkit-scrollbar { width: 5px; }
.sidebar::-webkit-scrollbar-thumb { background: #d4e0db; border-radius: 3px; }

.brand { display: flex; align-items: center; gap: 9px; padding: 18px 14px 16px; }
.brand-mark {
  width: 38px; height: 38px; border-radius: 12px; flex: 0 0 38px;
  background: var(--hero-grad);
  display: grid; place-items: center;
  box-shadow: 0 6px 16px -4px rgba(30, 95, 192, .45), inset 0 1px 0 rgba(255,255,255,.3);
}
.brand-mark svg { width: 22px; height: 22px; }
.brand-text b { display: block; font-size:13.5px; letter-spacing: 0; white-space: nowrap; color: var(--ink); line-height: 1.25; }
.brand-text span {
  display: block; font-size:10px; color: var(--ink-4);
  letter-spacing: .14em; text-transform: uppercase; font-weight: 600;
}

.nav { padding: 6px 12px 20px; flex: 1; }
.nav-label {
  font-size:10px; letter-spacing: .14em; color: var(--ink-4);
  padding: 16px 10px 7px; text-transform: uppercase; font-weight: 700;
}
.nav-item {
  display: flex; align-items: center; gap: 11px;
  padding: 10px 12px; margin-bottom: 2px; border-radius: 11px;
  color: var(--ink-2); font-size:13.5px; font-weight: 500;
  transition: background .18s, color .18s, transform .18s;
  position: relative;
}
.nav-item svg { width: 18px; height: 18px; flex: 0 0 18px; opacity: .75; transition: opacity .18s; }
.nav-item:hover { background: rgba(30, 95, 192, .07); color: var(--c-primary-600); }
.nav-item:hover svg { opacity: 1; }
.nav-item.active {
  background: var(--hero-grad);
  color: #fff; font-weight: 600;
  box-shadow: 0 8px 20px -6px rgba(30, 95, 192, .45);
}
.nav-item.active svg { opacity: 1; }
/* 「首页」小徽标：标记 3D 指挥大屏为打开网站后的默认首页 */
.nav-tag {
  margin-left: auto; font-style: normal; font-size:10px; font-weight: 700;
  padding: 1px 6px; border-radius: 5px; letter-spacing: .02em;
  background: rgba(30, 95, 192, .1); color: var(--c-primary-600);
  border: 1px solid rgba(30, 95, 192, .14);
}
.nav-item.active .nav-tag {
  background: rgba(255, 255, 255, .18); color: #fff; border-color: rgba(255, 255, 255, .28);
}
/* 首页（3D 指挥大屏）：独立置顶菜单项，与下方各板块分组用一条细分隔线分开 */
.nav-item.nav-home {
  font-size: 14px; font-weight: 600; color: var(--ink);
  padding: 12px; margin-bottom: 12px;
  background: linear-gradient(180deg, rgba(30, 95, 192, .06), rgba(30, 95, 192, .02));
  border: 1px solid rgba(30, 95, 192, .1);
  position: relative;
}
.nav-item.nav-home::after {
  content: ''; position: absolute; left: 2px; right: 2px; bottom: -7px;
  height: 1px; background: rgba(23, 37, 31, .08);
}
.nav-item.nav-home svg { opacity: .9; width: 19px; height: 19px; flex-basis: 19px; }
.nav-item.nav-home.active { color: #fff; background: var(--hero-grad); border-color: transparent; }
.nav-item .badge {
  margin-left: auto; background: var(--c-accent); color: #fff;
  font-size:10.5px; padding: 1px 7px; border-radius: 20px; font-weight: 700;
  font-variant-numeric: tabular-nums;
  box-shadow: 0 2px 6px rgba(239, 143, 60, .4);
}
.nav-item.active .badge { background: rgba(255,255,255,.25); box-shadow: none; }

.sidebar-foot {
  margin: 10px 14px 16px; padding: 12px 14px;
  background: linear-gradient(135deg, var(--c-primary-50), #fff);
  border: 1px solid var(--c-primary-100);
  border-radius: 14px;
  font-size:11px; color: var(--ink-3); line-height: 1.55;
}
.sidebar-foot .dot-live {
  display: inline-block; width: 7px; height: 7px; border-radius: 50%;
  background: #17b892; margin-right: 6px;
  box-shadow: 0 0 0 3px rgba(23, 184, 146, .2);
  animation: pulse 2.4s infinite;
}
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: .3; } }

/* ---- 主区域 ---- */
.main { flex: 1; min-width: 0; margin-left: var(--sidebar-w); display: flex; flex-direction: column; }

.topbar {
  height: var(--header-h);
  background: rgba(255, 255, 255, .92);
  backdrop-filter: blur(16px) saturate(180%);
  border-bottom: 1px solid rgba(230, 236, 233, .8);
  box-shadow: 0 1px 0 rgba(23, 37, 31, .02);
  display: flex; align-items: center; gap: 14px; padding: 0 26px;
  position: sticky; top: 0; z-index: 30;
}
.crumb { font-size:12px; color: var(--ink-4); display: flex; align-items: center; gap: 7px; }
.crumb b { color: var(--ink); font-weight: 700; font-size:16px; letter-spacing: -.01em; }
.crumb .sep { color: #c9d5d0; }
.topbar-spacer { flex: 1; }

.search-box { position: relative; width: 260px; }
.search-box svg {
  position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
  width: 15px; height: 15px; color: var(--ink-4); pointer-events: none;
}
.search-box input {
  width: 100%; height: 36px; padding: 0 12px 0 35px;
  border: 1.5px solid transparent; border-radius: 12px;
  background: rgba(23, 37, 31, .045); font-size:12.5px; color: var(--ink);
  transition: all .2s;
}
.search-box input::placeholder { color: var(--ink-4); }
.search-box input:focus {
  background: #fff; border-color: var(--c-primary-300); outline: none;
  box-shadow: 0 0 0 4px rgba(30, 95, 192, .1);
}

.topbar-user {
  display: flex; align-items: center; gap: 9px;
  padding: 4px 13px 4px 5px; border-radius: 26px;
  border: 1px solid var(--line); background: #fff;
  box-shadow: var(--shadow-sm);
}
.topbar-user .avatar {
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--hero-grad); color: #fff;
  display: grid; place-items: center; font-size:11.5px; font-weight: 700;
}
.topbar-user span { font-size:12px; color: var(--ink-2); font-weight: 500; }

.content { padding: 0 26px 26px; flex: 1; }

/* ---- 页头 Hero ---- */
.page-head {
  position: relative; overflow: hidden;
  margin: 22px 0 20px; padding: 26px 30px;
  border-radius: var(--radius-lg);
  background: var(--hero-grad);
  color: #fff;
  box-shadow: var(--shadow-lg);
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
}
.page-head::before, .page-head::after {
  content: ""; position: absolute; border-radius: 50%;
  background: rgba(255,255,255,.09); pointer-events: none;
}
.page-head::before { width: 300px; height: 300px; right: -60px; top: -160px; }
.page-head::after {
  width: 200px; height: 200px; right: 160px; bottom: -120px;
  background: rgba(255,255,255,.06);
}
.page-head h1 {
  font-size:25px; letter-spacing: -.02em; color: #fff;
  display: flex; align-items: center; gap: 10px;
}
.page-head p { margin: 5px 0 0; font-size:13px; color: rgba(255,255,255,.82); }
.page-head-actions { margin-left: auto; position: relative; z-index: 1; }
.page-head .live-pill {
  background: rgba(255,255,255,.16); color: #fff;
  border: 1px solid rgba(255,255,255,.28);
  backdrop-filter: blur(6px);
}
.page-head .live-pill i { background: #b8ffdf; box-shadow: 0 0 0 3px rgba(255,255,255,.18); }
.page-head .btn { border-color: rgba(255,255,255,.35); background: rgba(255,255,255,.14); color: #fff; }
.page-head .btn:hover { background: rgba(255,255,255,.24); border-color: rgba(255,255,255,.5); color: #fff; }
.page-head .detail-title h1, .detail-title h1 { color: var(--ink); }
.detail-head .detail-title p { color: var(--ink-4); }

.live-pill {
  display: inline-flex; align-items: center; gap: 7px;
  height: 31px; padding: 0 13px; border-radius: 20px;
  background: var(--c-primary-50); color: var(--c-primary-600);
  border: 1px solid var(--c-primary-100);
  font-size:11.5px; font-weight: 600;
}
.live-pill i {
  width: 7px; height: 7px; border-radius: 50%; background: #17b892;
  box-shadow: 0 0 0 3px rgba(23, 184, 146, .18);
  animation: pulse 2.4s infinite;
}

/* ============ KPI 卡 ============ */
.kpi-grid {
  display: grid; gap: 16px; margin-bottom: 16px;
  grid-template-columns: repeat(4, 1fr);
}
.kpi-grid-sm { margin-bottom: 20px; }
.kpi-grid-sm .kpi-val { font-size:26px; }

.kpi {
  position: relative; overflow: hidden;
  background: var(--surface);
  border: 1px solid rgba(230, 236, 233, .8);
  border-radius: var(--radius);
  padding: 18px 20px 16px;
  box-shadow: var(--shadow-sm);
  transition: transform .22s cubic-bezier(.2,.8,.2,1), box-shadow .22s;
}
.kpi:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.kpi::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
  background: var(--kpi-c, var(--c-primary));
  border-radius: 0 4px 4px 0;
}
.kpi.tone-a { --kpi-c: #1e66d0; }
.kpi.tone-b { --kpi-c: #ef8f3c; }
.kpi.tone-c { --kpi-c: #2ba05f; }
.kpi.tone-d { --kpi-c: #e05252; }
.kpi.tone-e { --kpi-c: #3a7bd5; }

.kpi-top { display: flex; align-items: center; gap: 8px; }
.kpi-label { font-size:13px; color: var(--ink-3); font-weight: 600; }
.kpi-ico {
  margin-left: auto; width: 32px; height: 32px; border-radius: 11px;
  background: color-mix(in srgb, var(--kpi-c, var(--c-primary)) 10%, #fff);
  color: var(--kpi-c, var(--c-primary));
  display: grid; place-items: center;
}
.kpi-ico svg { width: 17px; height: 17px; }
.kpi-val {
  font-size:35px; font-weight: 800; line-height: 1.1;
  margin-top: 10px; letter-spacing: -.035em;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}
.kpi-val small { font-size:13px; font-weight: 600; color: var(--ink-3); margin-left: 5px; letter-spacing: 0; }
.kpi-foot { margin-top: 7px; font-size:12px; color: var(--ink-3); display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.kpi-foot b { color: var(--ink-2); font-weight: 700; }
.kpi-foot b.warn { color: var(--c-accent); }
.delta { font-weight: 700; font-variant-numeric: tabular-nums; }
.delta.up { color: var(--c-danger); }
.delta.down { color: var(--c-ok); }

/* ============ 卡片 ============ */
.card {
  background: var(--surface);
  border: 1px solid rgba(230, 236, 233, .8);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: box-shadow .22s;
}
.card:hover { box-shadow: var(--shadow); }
.card-hd { display: flex; align-items: center; gap: 10px; padding: 17px 20px 0; }
.card-hd h3 { font-size:16.5px; display: flex; align-items: center; gap: 9px; }
.card-hd h3::before {
  content: ""; display: inline-block; width: 4px; height: 14px;
  border-radius: 3px; background: var(--hero-grad);
}
.card-hd .sub { font-size:12.5px; color: var(--ink-4); font-weight: 400; }
.card-hd .right { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.card-bd { padding: 15px 20px 20px; }

/* ---- 栅格 ---- */
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; }
.grid-2-1 { display: grid; grid-template-columns: 1.62fr 1fr; gap: 16px; margin-bottom: 16px; }
.grid-1-1 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; }
.grid-1-1-tall { display: grid; grid-template-columns: 1.5fr 1fr; gap: 16px; margin-bottom: 16px; }
.content > .card { margin-bottom: 16px; }

@media (max-width: 1280px) {
  .kpi-grid { grid-template-columns: repeat(2, 1fr); }
  .grid-2-1, .grid-1-1-tall { grid-template-columns: 1fr; }
}
@media (max-width: 900px) { .grid-2, .grid-1-1 { grid-template-columns: 1fr; } }
@media (max-width: 520px) { .kpi-grid { grid-template-columns: 1fr; } .kpi-val { font-size:26px; } }

/* ---- 按钮 / 标签 ---- */
.btn {
  display: inline-flex; align-items: center; gap: 6px;
  height: 34px; padding: 0 14px; border-radius: 11px;
  border: 1.5px solid var(--line); background: #fff; color: var(--ink-2);
  font-size:13px; font-weight: 600; transition: all .18s;
}
.btn:hover { border-color: var(--c-primary-300); color: var(--c-primary-600); background: var(--c-primary-50); }
.btn svg { width: 15px; height: 15px; }
.btn-primary {
  background: var(--hero-grad); border-color: transparent; color: #fff;
  box-shadow: 0 6px 16px -4px rgba(30, 95, 192, .4);
}
.btn-primary:hover { background: linear-gradient(118deg, #0d3577, #154fa8); border-color: transparent; color: #fff; }
.btn-sm { height: 31px; padding: 0 12px; font-size:12.5px; border-radius: 9px; }

.tag {
  display: inline-flex; align-items: center; gap: 4px;
  height: 22px; padding: 0 8px; border-radius: 7px;
  font-size:12px; font-weight: 600; white-space: nowrap;
}
.tag-ok { background: var(--c-ok-100); color: #1d7a48; }
.tag-warn { background: var(--c-warn-100); color: #96690a; }
.tag-danger { background: var(--c-danger-100); color: #bb3d3d; }
.tag-info { background: var(--c-info-100); color: #2b62ad; }
.tag-muted { background: var(--line-2); color: var(--ink-3); }
.tag-primary { background: var(--c-primary-100); color: var(--c-primary-600); }

.chip {
  display: inline-flex; align-items: center; gap: 6px;
  height: 31px; padding: 0 13px; border-radius: 10px;
  border: 1.5px solid var(--line); background: #fff;
  font-size:13px; font-weight: 500; color: var(--ink-2); transition: all .16s;
}
.chip:hover { border-color: var(--c-primary-300); color: var(--c-primary-600); transform: translateY(-1px); }
.chip.on {
  background: var(--hero-grad); border-color: transparent; color: #fff; font-weight: 600;
  box-shadow: 0 6px 14px -4px rgba(30, 95, 192, .4);
}
.chip .num { font-variant-numeric: tabular-nums; opacity: .6; font-size:11.5px; }
.chip.on .num { opacity: .9; }

.segmented {
  display: inline-flex; background: rgba(23, 37, 31, .055);
  border-radius: 11px; padding: 3px; gap: 2px;
}
.segmented button {
  height: 27px; padding: 0 12px; border: 0; background: transparent;
  border-radius: 8px; font-size:12.5px; font-weight: 500; color: var(--ink-3); transition: all .16s;
}
.segmented button.on {
  background: #fff; color: var(--ink); font-weight: 700;
  box-shadow: var(--shadow-sm);
}

/* ---- 表格 ---- */
.table-wrap { overflow: visible; }  /* overflow-x 会阻断表头 sticky，桌面端放开；窄屏再开横向滚动 */
@media (max-width: 900px) { .table-wrap { overflow-x: auto; } }
table.tb { width: 100%; border-collapse: separate; border-spacing: 0; font-size:13px; }
table.tb th {
  text-align: left; font-size:12px; font-weight: 700; color: var(--ink-3);
  padding: 11px 14px; background: var(--surface-2);
  border-bottom: 1px solid var(--line); white-space: nowrap;
  letter-spacing: .06em; text-transform: uppercase;
}
table.tb td { padding: 12px 14px; border-bottom: 1px solid var(--line-2); color: var(--ink-2); vertical-align: middle; line-height: 1.5; }
table.tb tbody tr { transition: background .14s; }
table.tb tbody tr:nth-child(even) td { background: rgba(23, 37, 31, .016); }
table.tb tbody tr:hover td { background: var(--c-primary-50); }
table.tb tbody tr:hover td:first-child { box-shadow: inset 3px 0 0 var(--c-primary); }
table.tb tbody tr:last-child td { border-bottom: none; }
table.tb tbody tr.clickable { cursor: pointer; }
table.tb td.num { font-variant-numeric: tabular-nums; text-align: right; }
table.tb .mono { font-family: var(--mono); font-size:12px; color: var(--ink-4); }

/* ---- 台账美化：人员头像 + 片区彩色标签 ---- */
.cell-person { display: inline-flex; align-items: center; gap: 8px; }
.ava-chip {
  width: 26px; height: 26px; border-radius: 50%; flex: none;
  display: inline-grid; place-items: center;
  font-size:11px; font-weight: 700; color: #fff;
}
.ava-c1 { background: #17b892; } .ava-c2 { background: #4b9bf5; }
.ava-c3 { background: #e5a712; } .ava-c4 { background: #8b77e6; }
.ava-c5 { background: #e07a8b; } .ava-c6 { background: #2aa8c4; }
.ava-c7 { background: #6da34d; } .ava-c8 { background: #c4894b; }
.area-c1 { background: #e6f7f1; color: #1e66d0; }
.area-c2 { background: #e8f1fd; color: #2f6fbd; }
.area-c3 { background: #fdf3e2; color: #b0731c; }
.area-c4 { background: #f1edfc; color: #6f55c8; }
.area-c5 { background: #fceef1; color: #c2556b; }
.area-c6 { background: #e9f6f9; color: #237e93; }

.empty { padding: 52px 16px; text-align: center; color: var(--ink-4); font-size:13px; }
.empty svg { width: 40px; height: 40px; margin: 0 auto 12px; opacity: .3; }

.content::-webkit-scrollbar, .table-wrap::-webkit-scrollbar, .crud-table-wrap::-webkit-scrollbar { height: 8px; width: 8px; }
.content::-webkit-scrollbar-thumb, .table-wrap::-webkit-scrollbar-thumb, .crud-table-wrap::-webkit-scrollbar-thumb { background: #d0dcd7; border-radius: 4px; }

.foot {
  padding: 18px 26px 28px; font-size:12px; color: var(--ink-4);
  display: flex; gap: 16px; flex-wrap: wrap; align-items: center;
}
.foot span { display: inline-flex; align-items: center; gap: 5px; }

/* ---- 移动端 ---- */
.hamburger { display: none; }
@media (max-width: 1080px) {
  :root { --sidebar-w: 0px; }
  .sidebar { transform: translateX(-102%); transition: transform .24s cubic-bezier(.2,.8,.2,1); width: 250px; flex-basis: 250px; }
  body.nav-open .sidebar { transform: translateX(0); box-shadow: var(--shadow-lg); }
  body.nav-open::after { content: ""; position: fixed; inset: 0; background: rgba(12, 24, 40, .4); backdrop-filter: blur(2px); z-index: 35; }
  .main { margin-left: 0; }
  .hamburger {
    display: grid; place-items: center; width: 36px; height: 36px;
    border: 1px solid var(--line); background: #fff; border-radius: 10px;
  }
  .search-box { display: none; }
  .content { padding: 0 14px 18px; }
  .page-head { padding: 20px; }
  .page-head h1 { font-size:19px; }
}
@media (max-width: 560px) {
  .topbar { padding: 0 12px; gap: 8px; }
  .topbar-user span { display: none; }
  .crumb .full { display: none; }
}

/* ===========================================================
   页面级组件（v2 视觉刷新）
   =========================================================== */

/* ---- 详情页头部（不用 Hero，白卡+大标题） ---- */
.detail-head {
  display: flex; align-items: center; gap: 15px;
  margin: 22px 0 18px; flex-wrap: wrap;
}
.detail-title h1 { font-size:22px; }
.detail-title p { margin: 4px 0 0; font-size:13px; color: var(--ink-4); }
.detail-actions { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.score-pill {
  height: 30px; padding: 0 14px; border-radius: 20px;
  background: var(--c-accent-100); color: #a85f14; font-size:12.5px; font-weight: 700;
  display: inline-flex; align-items: center;
  box-shadow: inset 0 0 0 1px rgba(239, 143, 60, .2);
}
.detail-grid { display: grid; grid-template-columns: 1fr 348px; gap: 16px; align-items: start; }
.detail-main, .detail-side { display: flex; flex-direction: column; gap: 16px; }
@media (max-width: 1080px) { .detail-grid { grid-template-columns: 1fr; } }

/* ---- 图表 ---- */
.chart-box { width: 100%; overflow: hidden; }
.chart-legend {
  display: flex; gap: 18px; font-size:12px; color: var(--ink-3);
  margin-top: 8px; justify-content: center; font-weight: 500;
}
.chart-legend span { display: inline-flex; align-items: center; gap: 6px; }
.chart-legend i { width: 10px; height: 3.5px; border-radius: 2px; display: inline-block; }

.bars { display: flex; flex-direction: column; gap: 10px; }
.bar-row { display: grid; grid-template-columns: 112px 1fr 50px; align-items: center; gap: 11px; }
.bar-label { font-size:12.5px; color: var(--ink-2); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bar-track { height: 9px; background: var(--line-2); border-radius: 6px; overflow: hidden; }
.bar-track i { display: block; height: 100%; border-radius: 6px; transition: width .7s cubic-bezier(.2,.8,.2,1); }
.bar-val { font-size:12px; color: var(--ink); text-align: right; font-variant-numeric: tabular-nums; font-weight: 700; }

.donut-wrap { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.legend { list-style: none; margin: 0; padding: 0; flex: 1; min-width: 150px; display: flex; flex-direction: column; gap: 8px; }
.legend li { display: grid; grid-template-columns: 11px 1fr auto auto; align-items: center; gap: 9px; font-size:13px; color: var(--ink-2); }
.legend i { width: 10px; height: 10px; border-radius: 4px; box-shadow: inset 0 0 0 1px rgba(0,0,0,.04); }
.legend b { font-variant-numeric: tabular-nums; font-weight: 700; }
.legend em { font-style: normal; color: var(--ink-4); font-size:11px; min-width: 44px; text-align: right; font-variant-numeric: tabular-nums; }

.heat { display: grid; grid-template-columns: repeat(24, 1fr); gap: 3px; }
.heat-cell { text-align: center; }
.heat-cell i { display: block; height: 36px; border-radius: 5px; }
.heat-cell span { font-size:9px; color: var(--ink-4); }

/* ---- 表格补充 ---- */
.muted-txt { color: var(--ink-3); }
.ded { color: var(--c-accent); font-variant-numeric: tabular-nums; font-weight: 700; }
.clip { max-width: 230px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
td.arrow { width: 28px; color: var(--ink-4); }
td.arrow svg { width: 15px; height: 15px; }
.table-summary {
  padding: 12px 16px; font-size:11.5px; color: var(--ink-3);
  background: var(--surface-2); border-top: 1px solid var(--line-2);
}
.table-summary b { color: var(--ink); font-weight: 700; }
tr.clickable:hover td.arrow { color: var(--c-primary); }

/* ---- 筛选栏 ---- */
.filter-bar {
  display: flex; gap: 10px; flex-wrap: wrap; align-items: center;
  padding: 13px; background: var(--surface); border: 1px solid rgba(230,236,233,.8);
  border-radius: var(--radius); margin-bottom: 12px; box-shadow: var(--shadow-sm);
}
.search-inline { position: relative; flex: 1; min-width: 200px; }
.search-inline svg {
  position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
  width: 15px; height: 15px; color: var(--ink-4); pointer-events: none;
}
.search-inline input {
  width: 100%; height: 36px; padding: 0 12px 0 36px;
  border: 1.5px solid transparent; border-radius: 10px; font-size:13px; color: var(--ink);
  background: rgba(23, 37, 31, .045); transition: all .2s;
}
.search-inline input:focus { border-color: var(--c-primary-300); background: #fff; outline: none; box-shadow: 0 0 0 4px rgba(14,138,109,.1); }
.filter-bar select, .date-range input {
  height: 34px; padding: 0 10px; border: 1.5px solid transparent;
  border-radius: 10px; font-size:12px; color: var(--ink-2);
  background: rgba(23, 37, 31, .045); font-family: inherit; max-width: 190px; transition: all .2s;
}
.filter-bar select:focus, .date-range input:focus { border-color: var(--c-primary-300); background: #fff; outline: none; }
.date-range { display: flex; align-items: center; gap: 7px; font-size:11.5px; color: var(--ink-3); }

.chips-row { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }

/* ---- 分页 ---- */
.pager { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-top: 1px solid var(--line-2); flex-wrap: wrap; }
.pg-info { font-size:12.5px; color: var(--ink-3); }
.pg-info b { color: var(--ink); font-weight: 700; }
.pg-btns { margin-left: auto; display: flex; gap: 5px; }
.pg {
  min-width: 31px; height: 31px; padding: 0 8px;
  border: 1.5px solid var(--line); background: #fff; border-radius: 9px;
  font-size:12px; color: var(--ink-2); font-weight: 500;
  display: grid; place-items: center; font-variant-numeric: tabular-nums;
  transition: all .15s;
}
.pg svg { width: 13px; height: 13px; }
.pg:hover:not(:disabled) { border-color: var(--c-primary-300); color: var(--c-primary-600); }
.pg.on {
  background: var(--hero-grad); border-color: transparent; color: #fff; font-weight: 700;
  box-shadow: 0 4px 10px -2px rgba(30, 95, 192, .4);
}
.pg:disabled { opacity: .35; cursor: not-allowed; }

/* ---- 时间线 / kv / 聊天 ---- */
.kv { margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 13px 20px; }
.kv > div { min-width: 0; }
.kv .full { grid-column: 1 / -1; }
.kv dt { font-size:11px; color: var(--ink-4); margin-bottom: 2px; font-weight: 600; letter-spacing: .04em; }
.kv dd { margin: 0; font-size:13px; color: var(--ink); word-break: break-all; }
.kv dd small { display: block; font-size:11px; color: var(--ink-4); margin-top: 2px; }
.kv-tight { gap: 10px 16px; }
.kv-tight dd { font-size:12px; }

.timeline { list-style: none; margin: 0; padding: 0 0 0 5px; }
.timeline li { position: relative; padding: 0 0 17px 20px; border-left: 2px solid var(--line-2); }
.timeline li:last-child { border-left-color: transparent; padding-bottom: 0; }
.tl-dot {
  position: absolute; left: -6.5px; top: 4px; width: 11px; height: 11px;
  border-radius: 50%; background: #fff; border: 2.5px solid var(--line);
  box-shadow: 0 0 0 3px #fff;
}
.tl-start .tl-dot { border-color: var(--c-primary); background: var(--c-primary); }
.tl-ok .tl-dot { border-color: var(--c-ok); background: var(--c-ok); }
.tl-info .tl-dot { border-color: var(--c-info); background: var(--c-info); }
.tl-bad .tl-dot { border-color: var(--c-danger); background: var(--c-danger); }
.timeline b { font-size:12.5px; display: block; }
.timeline time { font-size:11px; color: var(--ink-4); font-variant-numeric: tabular-nums; }
.timeline p { margin: 3px 0 0; font-size:11.5px; color: var(--ink-3); line-height: 1.55; }

.person-card { display: flex; align-items: center; gap: 12px; padding-bottom: 13px; margin-bottom: 12px; border-bottom: 1px solid var(--line-2); }
.person-card b { font-size:15.5px; display: block; }
.person-card span { font-size:11.5px; color: var(--ink-3); display: block; }
.avatar-lg {
  width: 44px; height: 44px; border-radius: 14px; flex: 0 0 44px;
  background: var(--hero-grad); color: #fff;
  display: grid; place-items: center; font-size:17px; font-weight: 700;
  box-shadow: 0 6px 14px -4px rgba(30, 95, 192, .4);
}
.avatar-lg.sm { width: 37px; height: 37px; flex-basis: 37px; font-size:14px; border-radius: 11px; }
.mini-avatar {
  display: inline-grid; place-items: center; width: 23px; height: 23px;
  border-radius: 7px; background: var(--c-primary-100); color: var(--c-primary-600);
  font-size:11px; font-weight: 700; margin-right: 5px; vertical-align: -7px;
}

.chat { display: flex; flex-direction: column; gap: 12px; }
.chat-item { display: flex; gap: 10px; }
.chat-avatar {
  width: 27px; height: 27px; flex: 0 0 27px; border-radius: 9px;
  background: var(--line-2); color: var(--ink-3); display: grid; place-items: center; font-size:11px; font-weight: 600;
}
.chat-meta { font-size:11px; color: var(--ink-4); margin-bottom: 2px; }
.chat-body { font-size:12px; color: var(--ink-2); background: var(--surface-2); border: 1px solid var(--line-2); padding: 9px 12px; border-radius: 11px; }

.note-txt { font-size:11.5px; color: var(--ink-3); line-height: 1.7; margin: 0; }

/* ---- 照片占位 ---- */
.photo-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; }
@media (max-width: 560px) { .photo-pair { grid-template-columns: 1fr; } }
.photo { margin: 0; }
.photo-ph {
  position: relative; aspect-ratio: 4 / 3; border-radius: 12px; overflow: hidden;
  background: linear-gradient(135deg, #f2f7f5, #e9f0ed);
  display: grid; place-items: center; border: 1px dashed #cfded8;
}
.photo-ph img { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; }
.photo-ph-label {
  font-size:11.5px; color: var(--ink-3); position: relative; z-index: 1; font-weight: 600;
  background: rgba(255,255,255,.85); padding: 3px 10px; border-radius: 20px;
}
.photo-ph.ph-off { background: repeating-linear-gradient(45deg, #f6faf8 0 9px, #edf4f1 9px 18px); flex-direction: column; gap: 6px; }
.photo-ph.ph-off .ph-ico { color: var(--c-primary-300); }
.photo-ph.ph-off .ph-ico svg { width: 24px; height: 24px; }
.photo-ph.ph-off small { font-size:10.5px; color: var(--ink-4); position: relative; z-index: 1; }
.photo-ph.ph-empty { flex-direction: column; gap: 6px; }
.photo-ph.ph-empty .ph-ico { color: var(--ink-4); }
.photo-ph.ph-empty .ph-ico svg { width: 21px; height: 21px; }
.photo-ph.ph-empty small { font-size:10.5px; color: var(--ink-4); }
.photo figcaption { margin-top: 8px; font-size:11.5px; color: var(--ink-3); display: flex; align-items: center; gap: 6px; }

/* ---- 待办 ---- */
.todo-list { display: flex; flex-direction: column; gap: 7px; }
.todo {
  display: flex; align-items: center; gap: 10px; padding: 9px 12px;
  border-radius: 11px; border: 1px solid var(--line-2); background: var(--surface-2);
  transition: all .16s;
}
.todo:hover { border-color: var(--c-primary-300); background: var(--c-primary-50); transform: translateX(3px); }
.todo-dot { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 8px; }
.todo-dot.danger { background: var(--c-danger); box-shadow: 0 0 0 3px var(--c-danger-100); }
.todo-dot.info { background: var(--c-info); box-shadow: 0 0 0 3px var(--c-info-100); }
.todo-main { font-size:13px; color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.todo-main b { color: var(--ink); }
.todo-meta { margin-left: auto; font-size:11px; color: var(--ink-4); display: flex; gap: 8px; align-items: center; white-space: nowrap; }
.todo-meta em { font-style: normal; color: var(--c-accent); font-weight: 700; }

/* ---- 督导 / 设施 ---- */
.sup-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); gap: 11px; }
.sup-card {
  border: 1px solid var(--line-2); border-radius: 13px; padding: 14px 11px;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  background: var(--surface-2); text-align: center; transition: all .18s;
}
.sup-card:hover { border-color: var(--c-primary-300); background: #fff; box-shadow: var(--shadow); transform: translateY(-2px); }
.sup-card b { font-size:12.5px; }
.sup-card span { font-size:10.5px; color: var(--ink-4); font-family: var(--mono); }
.sup-card em {
  font-style: normal; font-size:11px; font-weight: 600; color: var(--c-primary-600);
  background: var(--c-primary-50); padding: 2px 9px; border-radius: 20px; margin-top: 3px;
}

.fac-list { display: flex; flex-direction: column; gap: 9px; }
.fac-item {
  display: flex; align-items: center; gap: 11px; padding: 10px 12px;
  border: 1px solid var(--line-2); border-radius: 12px; background: var(--surface-2);
  transition: all .16s;
}
.fac-item:hover { background: #fff; border-color: var(--c-primary-100); }
.fac-badge {
  width: 32px; height: 32px; flex: 0 0 32px; border-radius: 10px;
  background: var(--c-primary-50); color: var(--c-primary); display: grid; place-items: center;
}
.fac-badge svg { width: 16px; height: 16px; }
.fac-main { min-width: 0; }
.fac-main b { font-size:12px; display: block; }
.fac-main span { font-size:11px; color: var(--ink-3); }
.fac-meta { margin-left: auto; text-align: right; font-size:10.5px; color: var(--ink-4); white-space: nowrap; }
.fac-meta em { font-style: normal; display: block; }

.alert-list { display: flex; flex-direction: column; gap: 9px; }
.alert-item {
  display: flex; align-items: center; gap: 12px; padding: 11px 13px;
  border-radius: 12px; background: #fffaf0; border: 1px solid #f3e3bd;
}
.alert-ico { color: #b07d00; display: grid; place-items: center; }
.alert-ico svg { width: 19px; height: 19px; }
.alert-item b { font-size:12px; display: block; }
.alert-item span { font-size:11px; color: var(--ink-3); }
.alert-item > div { flex: 1; min-width: 0; }

/* ---- 排名 ---- */
.rank-no {
  display: inline-grid; place-items: center; width: 20px; height: 20px;
  border-radius: 6px; background: var(--line-2); color: var(--ink-3);
  font-size:10.5px; font-weight: 700; margin-right: 6px;
}
.rank-no.hot { background: var(--hero-grad); color: #fff; }
.mini-bar { display: inline-block; width: 76px; height: 6px; background: var(--line-2); border-radius: 4px; overflow: hidden; vertical-align: middle; margin-right: 8px; }
.mini-bar i { display: block; height: 100%; background: var(--hero-grad); border-radius: 4px; }

/* ---- 同步页 ---- */
.sync-hero {
  display: flex; align-items: center; gap: 18px; padding: 20px 22px;
  margin-bottom: 16px; flex-wrap: wrap;
  background: var(--hero-grad); color: #fff;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  position: relative; overflow: hidden;
}
.sync-hero::before {
  content: ""; position: absolute; width: 260px; height: 260px; border-radius: 50%;
  background: rgba(255,255,255,.08); right: -70px; top: -130px;
}
.sync-left { display: flex; align-items: center; gap: 15px; flex: 1; min-width: 260px; position: relative; }
.sync-ic {
  width: 46px; height: 46px; flex: 0 0 46px; border-radius: 14px;
  background: rgba(255,255,255,.18); color: #fff; display: grid; place-items: center;
  border: 1px solid rgba(255,255,255,.25);
}
.sync-ic svg { width: 22px; height: 22px; }
.sync-hero h3 { font-size:15px; color: #fff; }
.sync-hero p { margin: 4px 0 0; font-size:12px; color: rgba(255,255,255,.85); }
.sync-hero p b { color: #fff; }
.sync-actions { display: flex; gap: 10px; flex-wrap: wrap; position: relative; }
.sync-actions .btn { border-color: rgba(255,255,255,.35); background: rgba(255,255,255,.14); color: #fff; }
.sync-actions .btn:hover { background: rgba(255,255,255,.24); color: #fff; }
.sync-actions .btn-primary { background: #fff; color: var(--c-primary-600); border-color: #fff; }
.sync-actions .btn-primary:hover { background: #f0faf7; }

.policy { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 11px; }
.policy li { display: flex; gap: 11px; font-size:12px; align-items: baseline; }
.policy li b { flex: 0 0 66px; color: var(--ink); font-size:11.5px; }
.policy li span { color: var(--ink-3); }

.steps { margin: 0; padding-left: 19px; display: flex; flex-direction: column; gap: 12px; }
.steps li { font-size:12px; }
.steps li b { display: block; color: var(--ink); margin-bottom: 2px; }
.steps li span { color: var(--ink-3); }

/* ---- 接口页 ---- */
.notice {
  display: flex; gap: 15px; padding: 18px 20px; margin-bottom: 16px;
  background: linear-gradient(120deg, var(--c-primary-50), #fff 70%);
  border: 1px solid var(--c-primary-100);
  border-left: 4px solid var(--c-primary);
  border-radius: var(--radius);
}
.notice-ic { color: var(--c-primary); flex: 0 0 auto; }
.notice-ic svg { width: 25px; height: 25px; }
.notice h3 { font-size:14px; margin-bottom: 6px; }
.notice p { margin: 0; font-size:12px; color: var(--ink-2); line-height: 1.75; }
.notice strong { color: var(--c-primary-600); }

.method {
  display: inline-block; padding: 2px 8px; border-radius: 6px;
  font-size:10.5px; font-weight: 700; font-family: var(--mono); letter-spacing: .03em;
}
.method.get { background: var(--c-info-100); color: var(--c-info); }
.method.post { background: var(--c-ok-100); color: var(--c-ok); }

/* ---- 关于页 ---- */
.stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line-2); border-radius: 14px; overflow: hidden; }
.stat-item { background: #fff; padding: 16px; text-align: center; }
.stat-item b { display: block; font-size:22px; font-weight: 800; background: var(--hero-grad); -webkit-background-clip: text; background-clip: text; color: transparent; font-variant-numeric: tabular-nums; }
.stat-item span { font-size:11.5px; color: var(--ink-3); }
@media (max-width: 700px) { .stat-grid { grid-template-columns: repeat(2, 1fr); } }

.arch { display: flex; align-items: stretch; gap: 11px; flex-wrap: wrap; }
.arch-col { flex: 1; min-width: 180px; background: var(--surface-2); border: 1px solid var(--line-2); border-radius: 13px; padding: 13px 15px; }
.arch-col h4 { font-size:12px; color: var(--c-primary-600); margin-bottom: 4px; }
.arch-col p { margin: 0; font-size:11.5px; color: var(--ink-3); line-height: 1.6; }
.arch-arrow { display: grid; place-items: center; color: var(--c-primary-300); font-size:16px; font-weight: 700; }

/* ---- 加载态 ---- */
.loading-box { display: flex; align-items: center; gap: 17px; padding: 48px 24px; justify-content: center; }
.loading-box b { font-size:13px; display: block; }
.loading-box p { margin: 4px 0 0; font-size:11.5px; color: var(--ink-3); }
.spinner {
  width: 28px; height: 28px; flex: 0 0 28px; border-radius: 50%;
  border: 3px solid var(--c-primary-100);
  border-top-color: var(--c-primary);
  animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.skeleton { background: linear-gradient(90deg, #eef2f1 25%, #f7faf9 50%, #eef2f1 75%); background-size: 200% 100%; animation: shimmer 1.4s infinite; border-radius: 6px; }
@keyframes shimmer { to { background-position: -200% 0; } }

/* 页面进入微动效 */
@keyframes rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.page-head, .kpi, .card { animation: rise .4s cubic-bezier(.2,.8,.2,1) both; }
.kpi:nth-child(2) { animation-delay: .05s; }
.kpi:nth-child(3) { animation-delay: .1s; }
.kpi:nth-child(4) { animation-delay: .15s; }

/* ---------------- 扩展页：督导工单 / 设备出勤 / 报表存档 ---------------- */
.xa-lb { position: fixed; inset: 0; z-index: 999; background: rgba(8, 14, 28, .88); display: grid; place-items: center; cursor: zoom-out; }
.xa-lb img { max-width: 82vw; max-height: 80vh; border-radius: 8px; }
.xa-lb span { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); color: #cfe0dc; font-size:11.5px; }
.xa-thumb { width: 44px; height: 32px; object-fit: cover; border-radius: 4px; border: 1px solid var(--line); display: block; }
.xa-modal { position: fixed; inset: 0; z-index: 300; background: rgba(13, 22, 38, .42); backdrop-filter: blur(3px); display: grid; place-items: center; padding: 20px; }
.xa-modal .modal-card { background: var(--surface); border-radius: 12px; width: 100%; max-height: 86vh; overflow: auto; box-shadow: 0 18px 50px rgba(9, 22, 44, .25); }
.xa-modal .modal-hd { display: flex; justify-content: space-between; align-items: center; padding: 14px 18px; border-bottom: 1px solid var(--line); }
.xa-modal .modal-hd .x { border: 0; background: none; font-size:19px; cursor: pointer; color: var(--ink-4); }
.xa-modal .modal-bd { padding: 16px 18px; }
.xa-flds { display: grid; grid-template-columns: 1fr 1fr; gap: 9px 18px; font-size:13px; }
.xa-flds > div { display: flex; gap: 8px; min-width: 0; }
.xa-flds span { color: var(--ink-4); white-space: nowrap; }
.xa-flds b, .xa-flds { color: var(--ink-2); overflow-wrap: anywhere; }
.xa-cause { font-size:12px; color: var(--ink-3); line-height: 1.7; background: var(--surface-2); border-radius: 8px; padding: 9px 12px; margin: 12px 0 0; }
.xa-photo { width: 100%; max-height: 340px; object-fit: contain; border-radius: 8px; margin-top: 12px; cursor: zoom-in; background: var(--surface-2); }
.xa-rank { list-style: none; margin: 0; padding: 0; }
.xa-rank li { display: flex; align-items: center; gap: 10px; padding: 9px 4px; border-bottom: 1px dashed var(--line-2); font-size:12.5px; }
.xa-rank li:last-child { border-bottom: 0; }
.xa-rank .no { font-family: var(--mono); color: var(--c-primary); font-weight: 700; width: 24px; }
.xa-rank .tag { margin-left: auto; }
.xa-modal[hidden], .xa-lb[hidden] { display: none !important; }

/* ===========================================================
   明细清单表格 · Excel 风格（全边框网格 + 蓝色实心表头 + 序号）
   =========================================================== */
table.tb { border-collapse: collapse; }
table.tb th {
  position: static; z-index: auto; box-shadow: none;
  background: linear-gradient(180deg, #4276d8, #3065c7);
  color: #fff;
  text-align: center;
  padding: 10px 12px;
  border: 1px solid #2b57ac;
  font-size:13px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: none;
  white-space: nowrap;
}
table.tb td {
  border: 1px solid #c9d6ec;
  padding: 9px 12px;
}
table.tb td:first-child { font-weight: 500; }
table.tb tbody tr:nth-child(even) td { background: #f4f8fe; }
table.tb tbody tr:hover td { background: #e8f1fd; }
table.tb tbody tr:hover td:first-child { box-shadow: none; }
table.tb td.num { font-weight: 600; }
table.tb td.td-c { text-align: center; }
.table-wrap { border: 1px solid #b9c9e6; border-radius: 10px; }

/* 表格工具行：计数徽标 */
.tb-count {
  display: inline-flex; align-items: center; gap: 6px;
  font-size:12px; color: var(--c-primary-600); font-weight: 700;
  background: var(--c-primary-50); border: 1px solid var(--c-primary-100);
  padding: 2px 10px; border-radius: 20px;
}

/* ---- 侧栏分组折叠 ---- */
.nav-label {
  width: 100%; display: flex; align-items: center; justify-content: space-between;
  background: none; border: 0; text-align: left;
  padding: 16px 10px 7px; cursor: pointer;
  font-size:10.5px; letter-spacing: .14em; color: var(--ink-4);
  text-transform: uppercase; font-weight: 700; font-family: inherit;
  transition: color .16s;
}
.nav-label:hover { color: var(--c-primary-600); }
.nav-label .fold-ico {
  width: 13px; height: 13px; flex: 0 0 13px; opacity: .7;
  transition: transform .2s cubic-bezier(.2,.8,.2,1);
}
.nav-group.collapsed .nav-label { padding-bottom: 7px; }
.nav-group.collapsed .nav-label .fold-ico { transform: rotate(-90deg); }
.nav-group.collapsed .nav-item { display: none; }

/* 状态整格填色（Excel 风格：红/橙/绿/蓝/灰） */
td .st-fill {
  display: block; margin: -9px -12px; padding: 9px 6px;
  text-align: center; font-weight: 700; font-size:12.5px;
  border-radius: 0; white-space: nowrap;
}
.st-fill.st-1 { background: #f5b7b1; color: #7a201a; }
.st-fill.st-2 { background: #fdd9a0; color: #7a4a08; }
.st-fill.st-3 { background: #b8e6c4; color: #14532d; }
.st-fill.st-4 { background: #cfe0fb; color: #1a4a96; }
.st-fill.st-5 { background: #dfe5ec; color: #4a5568; }
.st-fill.st-delay { background: #fdd9a0; color: #7a4a08; }
.st-fill.st-fail { background: #f5b7b1; color: #7a201a; }

/* ===========================================================
   考核项目 · 四合一标签窗口（片区/道路点位/考核类别/扣分标准）
   =========================================================== */
.cat-tabs {
  display: flex; gap: 6px; margin: 2px 0 14px; flex-wrap: wrap;
}
.cat-tab {
  padding: 9px 22px; border: 1px solid var(--line); background: #fff;
  border-radius: 9px; cursor: pointer; font-family: inherit;
  font-size:13px; font-weight: 600; color: var(--ink-2);
  transition: all .16s;
}
.cat-tab:hover { border-color: var(--c-primary-300, #7ba6e8); color: var(--c-primary-600); }
.cat-tab.on {
  background: linear-gradient(180deg, #4276d8, #3065c7);
  color: #fff; border-color: #2b57ac;
  box-shadow: 0 2px 10px rgba(30, 95, 192, .28);
}
.crud-toolbar {
  display: flex; gap: 10px; align-items: center;
  padding: 12px 14px; border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, #fbfdff, #f5f8fd);
}
.crud-tt { font-weight: 700; font-size:13px; color: var(--c-primary-600); }

/* ---------------- 考核台账 · 导出预览（A4 版式） ---------------- */
.exp-modal { z-index: 400; }
.exp-modal .modal-card { max-width: 980px; display: flex; flex-direction: column; }
.exp-modal .exp-bd { display: flex; flex-direction: column; min-height: 0; }
.exp-frame { width: 100%; height: 58vh; min-height: 320px; border: 1px solid var(--line); border-radius: 8px; background: #fff; }
.exp-bar { display: flex; align-items: center; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
.exp-note { color: var(--ink-4); font-size:12px; margin-right: auto; }

/* ---------------- 品牌 logo（数智环卫平台） ---------------- */
.brand-mark-logo { width: auto; height: 34px !important; flex: 0 0 auto; background: transparent; box-shadow: 0 6px 14px -4px rgba(11, 37, 89, .45); }
.brand-mark-logo svg, .brand-mark-logo img { width: auto; height: 100%; display: block; }

/* ---------------- 设备异常重点核查名单（疑似类下钻） ---------------- */
.xa-chk-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.xa-chk-tabs button {
  border: 1px solid var(--line-2); background: #fff; border-radius: 18px; cursor: pointer;
  padding: 6px 14px; font-size:12px; color: var(--ink-2); display: inline-flex; align-items: center; gap: 6px;
  transition: all .15s;
}
.xa-chk-tabs button i { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.xa-chk-tabs button b { font-weight: 700; }
.xa-chk-tabs button:hover { border-color: var(--pri); color: var(--pri); }
.xa-chk-tabs button.on { background: var(--pri); border-color: var(--pri); color: #fff; }
.xa-chk-tabs button.on i { background: #fff !important; }
.xa-chk-day { font-size:11.5px; color: var(--ink-4); margin-bottom: 8px; }
.xa-chk-x > td { background: #f7fafc; padding: 0 14px !important; }
.xa-chk-card { padding: 10px 12px; border-left: 3px solid var(--pri); font-size:12px; color: var(--ink-2); line-height: 1.7; margin: 8px 0; background: #fff; border-radius: 0 6px 6px 0; }
.xa-chk-card .dim { color: var(--ink-4); font-size:11.5px; }
.tag .dot { width: 7px; height: 7px; border-radius: 50%; display: inline-block; margin-right: 4px; vertical-align: 1px; }

/* ---------------- 设备异常重点核查名单 · 大气版 ---------------- */
.xa-chk-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(132px, 1fr)); gap: 12px; margin-bottom: 14px; }
.xa-chk-stats button {
  position: relative; overflow: hidden; text-align: left; cursor: pointer;
  border: 1px solid var(--line-2); border-radius: 12px; background: linear-gradient(180deg, #fdfefe, #f4f8fb);
  padding: 14px 18px 12px; min-height: 86px; transition: transform .15s, box-shadow .15s, border-color .15s;
  display: flex; flex-direction: column; gap: 2px; font-family: inherit;
}
.xa-chk-stats button::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--ac, #1e66d0); border-radius: 4px 0 0 4px; }
.xa-chk-stats button:hover { transform: translateY(-2px); box-shadow: 0 8px 20px -8px rgba(16, 42, 88, .25); border-color: var(--ac, #1e66d0); }
.xa-chk-stats button.on { border-color: var(--ac, #1e66d0); background: linear-gradient(180deg, #fff, var(--ac, #1e66d0) 600%); box-shadow: 0 8px 20px -10px rgba(16, 42, 88, .35); }
.xa-chk-stats button.on::after { content: '✓'; position: absolute; right: 12px; top: 10px; color: var(--ac, #1e66d0); font-size:12.5px; font-weight: 700; }
.xa-chk-stats .v { font-size:26px; font-weight: 800; line-height: 1.05; color: #10243f; letter-spacing: .5px; font-variant-numeric: tabular-nums; }
.xa-chk-stats .t { font-size:12.5px; font-weight: 600; color: #33506b; }
.xa-chk-stats .d { font-size:11px; color: #93a6b8; }
.xa-chk-meta { font-size:12px; color: var(--ink-4); margin-bottom: 10px; }
.xa-chk-meta b { color: var(--ink-2); }
.xa-chk-tbl th { padding: 11px 16px; font-size:11.5px; }
.xa-chk-tbl td { padding: 12px 16px; font-size:13px; }
.xa-chk-tbl tbody tr.clickable:hover td { background: #f2f7fc; }
.xa-chk-tbl tbody tr.clickable td { transition: background .12s; }
.xa-chk-tag { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: 20px; font-size:11.5px; font-weight: 600; background: color-mix(in srgb, var(--ac) 10%, #fff); color: var(--ac); border: 1px solid color-mix(in srgb, var(--ac) 25%, transparent); }
.xa-chk-tag i { width: 7px; height: 7px; border-radius: 50%; background: var(--ac); }
.xa-chk-name { font-size:13px; }
.xa-chk-val { font-size:13px; font-weight: 700; color: #10243f; }
.xa-chk-x > td { background: #f6f9fc; padding: 0 18px !important; border-bottom: 1px solid var(--line-2); }
.xa-chk-card { margin: 10px 0; padding: 14px 18px; background: #fff; border-left: 4px solid var(--ac, #1e66d0); border-radius: 0 10px 10px 0; box-shadow: 0 2px 10px -4px rgba(16, 42, 88, .12); font-size:12.5px; line-height: 1.8; color: var(--ink-2); }
.xa-chk-card .row { display: flex; gap: 10px; align-items: baseline; }
.xa-chk-card .row + .row { margin-top: 4px; padding-top: 6px; border-top: 1px dashed var(--line-2); }
.xa-chk-card .row.main b { color: var(--ac, #1e66d0); }
.xa-chk-card b { flex: 0 0 auto; font-size:11.5px; color: var(--ink-4); font-weight: 600; letter-spacing: .04em; }

/* ---------------- 督导工单：日期区间查询栏 ---------------- */
.xa-datebar { display: inline-flex; align-items: center; gap: 10px; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.32); border-radius: 10px; padding: 7px 12px; }
.xa-datebar .lb { font-size:12.5px; color: rgba(255,255,255,.9); letter-spacing: .04em; }
.xa-datebar i { font-style: normal; font-size:12px; color: rgba(255,255,255,.8); }
.xa-datebar .xa-date {
  height: 32px; border-radius: 7px; border: 1px solid rgba(255,255,255,.45); background: #fff; color: #12263d;
  padding: 0 10px; font-size:12.5px; font-family: inherit; outline: none; cursor: pointer;
}
.xa-datebar .xa-date:focus { border-color: #7fb4ff; box-shadow: 0 0 0 3px rgba(127,180,255,.35); }
.xa-datebar .xa-dbtn { height: 32px; padding: 0 14px; border-radius: 7px; font-size:12.5px; background: rgba(255,255,255,.2); border-color: rgba(255,255,255,.5); color: #fff; }
.xa-datebar .xa-dbtn:hover { background: rgba(255,255,255,.32); color: #fff; }
.xa-hit { margin-left: auto; font-size:12px; color: var(--ink-4); white-space: nowrap; }

/* ---------------- 可滚动内容栏（明显滚动条） ---------------- */
.xa-scroll, .xa-chk-wrap { overflow: auto !important; scrollbar-width: thin; scrollbar-color: #9db4c9 #eef3f8; }
.xa-scroll::-webkit-scrollbar, .xa-chk-wrap::-webkit-scrollbar { width: 10px; height: 10px; }
.xa-scroll::-webkit-scrollbar-track, .xa-chk-wrap::-webkit-scrollbar-track { background: #eef3f8; border-radius: 6px; }
.xa-scroll::-webkit-scrollbar-thumb, .xa-chk-wrap::-webkit-scrollbar-thumb { background: #9db4c9; border-radius: 6px; border: 2px solid #eef3f8; }
.xa-scroll::-webkit-scrollbar-thumb:hover, .xa-chk-wrap::-webkit-scrollbar-thumb:hover { background: #7d99b3; }

/* ---------------- 人员与督导：途强设备构成瓷砖 ---------------- */
.tq-cats { display: grid; grid-template-columns: repeat(auto-fit, minmax(185px, 1fr)); gap: 12px; margin-bottom: 14px; }
.tq-cats > div { border: 1px solid var(--line-2); border-radius: 12px; background: linear-gradient(180deg, #fdfefe, #f4f8fb); padding: 12px 16px 10px; }
.tq-cats b { display: block; font-size: 20px; font-weight: 800; color: #10243f; line-height: 1.3; }
.tq-cats b em { font-style: normal; font-size: 12px; font-weight: 600; color: var(--ink-4); margin-left: 5px; }
.tq-cats span { font-size: 11.5px; color: var(--ink-4); }
.tq-cats > div[data-rok] { transition: box-shadow .15s, border-color .15s; }
.tq-cats > div[data-rok]:hover { border-color: var(--c-primary-300); box-shadow: 0 3px 12px rgba(30, 102, 208, .12); }

/* 档案名录 */
.roster-bar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.roster-tools { display: flex; gap: 8px; align-items: center; margin-left: auto; }
.roster-bar .segmented button b { font-weight: 700; }

/* 人车在线日报 · 快照全屏 */
#tq-frame-wrap:fullscreen { height: 100dvh; background: #0b1526; }
#tq-frame-wrap:fullscreen #tq-frame { height: 100dvh; }
#tq-frame-wrap:fullscreen #tq-loading { color: #cfe3ff; }

/* 通用输入框（名录搜索、换绑登记表单等） */
.ipt { padding: 5px 9px; border: 1px solid var(--line, #d7e0ea); border-radius: 8px; font-size: 12.5px; background: #fff; color: var(--ink-2, #1a2733); }
.ipt:focus { outline: none; border-color: var(--c-primary-400, #4b9bf5); }
select.ipt { padding: 4px 6px; }

/* 换绑登记弹窗：hidden 优先于内联 flex */
#rb-mask[hidden] { display: none !important; }

/* 使用说明 · 疑似项核实方法 / 数据说明卡片 */
.rules { display: grid; gap: 10px; }
.rule-item { border-left: 3px solid var(--c-primary-400, #4b9bf5); background: #f6f9fd; border-radius: 10px; padding: 10px 14px; }
.rule-item h4 { margin: 0 0 6px; font-size: 13.5px; color: var(--ink-1, #132030); }
.rule-item .sum { margin: 0; font-size: 12.5px; line-height: 1.8; color: var(--ink-3, #45566a); }
.rule-item ul { margin: 6px 0 0; padding-left: 18px; font-size: 12.5px; line-height: 1.8; color: var(--ink-3, #45566a); }
.rule-item li { margin: 2px 0; }
.rule-item li b { color: var(--ink-2, #25384d); }

/* 督导工单 · 五态状态标签 */
.st-fill.st-danger { background: #fbd5cd; color: #8a2a14; }
.st-fill.st-warn { background: #fdeec9; color: #8a6414; }
.st-fill.st-ok { background: #cdefdc; color: #10693e; }
.st-fill.st-info { background: #cfe3f7; color: #1d5091; }
.st-fill.st-muted { background: #e5e9ee; color: #5a6a76; }

/* ---- 常见问题（问答卡）----
   原 ul.policy 的 b 固定 66px 宽，长问题会被挤成竖排文字，故常见问题改用独立样式 */
.faq { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.faq li {
  padding: 11px 15px; border: 1px solid var(--line); border-radius: 10px;
  background: linear-gradient(180deg, #fbfcfe, #fff);
}
.faq li b { display: block; color: var(--ink); font-size: 13px; line-height: 1.6; margin-bottom: 4px; }
.faq li span { display: block; color: var(--ink-3); font-size: 12px; line-height: 1.8; }

/* 数据节奏等短标签列表：标签按内容自适应，避免 6 字标签被 66px 截成两行 */
.policy li b { flex: 0 0 auto; white-space: nowrap; min-width: 66px; }

/* ---- 报表存档表格：文件名超长省略号，类型/时间/操作不换行 ---- */
table.tb td.rp-f { max-width: 300px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
table.tb td.rp-t, table.tb td.rp-m, table.tb td.rp-o, table.tb th.nw { white-space: nowrap; }
table.tb td.rp-o .btn + .btn { margin-left: 6px; }