/* ==========================================================
   智慧平安小区平台系统 v2.0 - 全局样式
   主题：公安科技蓝（深邃藏蓝 + 亮蓝点缀）
   ========================================================== */
* { margin: 0; padding: 0; box-sizing: border-box; }

:root {
  --navy-900:#0A2540;   /* 侧边栏最深 */
  --navy-800:#0E3157;
  --navy-700:#133E6E;
  --blue-600:#1B6FD9;
  --blue-500:#2E7CF6;
  --blue-400:#4D93FF;
  --cyan:#35C4E8;
  --bg:#EDF1F7;
  --card:#FFFFFF;
  --line:#E3E9F2;
  --line-soft:#EEF2F8;
  --text:#1F2D3D;
  --text-2:#5B6B7F;
  --text-3:#97A3B4;
  --green:#17A26B;
  --green-bg:#E5F7EF;
  --red:#E5484D;
  --red-bg:#FDECEC;
  --orange:#ED8936;
  --orange-bg:#FDF1E3;
  --purple:#8B5CF6;
  --shadow-sm:0 1px 2px rgba(16,42,82,.05),0 4px 14px rgba(16,42,82,.06);
  --shadow-md:0 6px 18px rgba(16,42,82,.10);
  --radius:12px;
}

html, body { height: 100%; }
body {
  font-family:"Microsoft YaHei","PingFang SC","Segoe UI",sans-serif;
  background:var(--bg); color:var(--text); font-size:14px;
  -webkit-font-smoothing:antialiased;
}
a { text-decoration:none; color:inherit; }
button { font-family:inherit; }
::-webkit-scrollbar { width:8px; height:8px; }
::-webkit-scrollbar-thumb { background:#C6D0DD; border-radius:8px; }
::-webkit-scrollbar-track { background:transparent; }

/* ==================== 整体布局 ==================== */
#app { display:flex; min-height:100vh; }

/* ==================== 侧边栏 ==================== */
.sidebar {
  width:236px; background:linear-gradient(180deg,var(--navy-900) 0%,var(--navy-800) 100%);
  color:#fff; display:flex; flex-direction:column; position:fixed; inset:0 auto 0 0;
  z-index:100; box-shadow:4px 0 18px rgba(10,37,64,.25);
}
.sidebar-header { padding:18px 16px 14px; display:flex; align-items:center; gap:11px; border-bottom:1px solid rgba(255,255,255,.08); }
.brand-badge {
  width:40px;height:40px;flex-shrink:0;border-radius:10px;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,#2E7CF6,#35C4E8);
  box-shadow:0 4px 12px rgba(46,124,246,.45);
}
.brand-badge svg{ width:22px;height:22px;fill:#fff; }
.sidebar-header h2 { font-size:16.5px;font-weight:700;line-height:1.25;letter-spacing:.5px; }
.sidebar-header .subtitle { font-size:11px;color:rgba(255,255,255,.55);letter-spacing:1px; }
.sidebar-nav { flex:1; overflow-y:auto; padding:8px 0 12px; }
.side-nav-section {
  padding:14px 20px 6px; font-size:11px; color:rgba(255,255,255,.38);
  letter-spacing:1.5px; text-transform:uppercase;
}
.nav-item {
  display:flex; align-items:center; gap:10px; padding:9px 18px; margin:1px 8px;
  color:rgba(255,255,255,.72); font-size:13.5px; border-radius:8px; cursor:pointer;
  transition:all .15s ease; position:relative; user-select:none;
}
.nav-item:hover { background:rgba(255,255,255,.07); color:#fff; }
.nav-item.active {
  background:linear-gradient(90deg,rgba(46,124,246,.30),rgba(46,124,246,.06));
  color:#fff; font-weight:600;
}
.nav-item.active::before {
  content:""; position:absolute; left:-8px; top:20%; bottom:20%; width:3px;
  border-radius:0 3px 3px 0; background:linear-gradient(180deg,#35C4E8,#2E7CF6);
}
.nav-ic { font-size:16px; width:20px; text-align:center; flex-shrink:0; opacity:.95; }
.nav-item-sm { padding:6.5px 18px 6.5px 16px; font-size:12.8px; color:rgba(255,255,255,.62); }
.nav-item-sm .nav-ic { font-size:14px; }
.nav-item-sm.active { color:#fff; }
.nav-badge { margin-left:auto; font-size:10.5px; color:rgba(255,255,255,.5); background:rgba(255,255,255,.08); padding:1px 7px; border-radius:20px; }

/* 折叠子菜单（兼容旧结构） */
.nav-community-group, .nav-community-list-header { display:none; }

.sidebar-footer {
  padding:12px 14px; border-top:1px solid rgba(255,255,255,.08);
  display:flex; align-items:center; justify-content:space-between; gap:8px;
}
.user-chip { display:flex; align-items:center; gap:8px; min-width:0; }
.user-avatar {
  width:30px;height:30px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,#2E7CF6,#35C4E8); font-size:13px;font-weight:700;
}
.user-meta { min-width:0; }
.user-meta .uname { font-size:12.5px; color:#fff; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.user-meta .urole { font-size:10.5px; color:rgba(255,255,255,.5); }
.btn-logout {
  background:rgba(229,72,77,.15); border:1px solid rgba(229,72,77,.35); color:#ff9a9c;
  padding:4px 11px; border-radius:7px; font-size:11.5px; cursor:pointer; transition:all .15s; white-space:nowrap;
}
.btn-logout:hover { background:#E5484D; color:#fff; }

/* ==================== 主内容区 ==================== */
.main-content { flex:1; margin-left:236px; padding:22px 26px; min-width:0; }

.page-head { display:flex; justify-content:space-between; align-items:flex-end; gap:14px; margin-bottom:16px; flex-wrap:wrap; }
.page-head h2 { font-size:21px; font-weight:700; color:var(--navy-900); display:flex; align-items:center; gap:10px; }
.page-head .sub { font-size:12px; color:var(--text-3); margin-top:3px; }
.head-actions { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.crumb { font-size:12.5px; color:var(--text-3); }
.crumb b { color:var(--blue-600); }
.link-btn { color:var(--blue-600); cursor:pointer; font-size:12.5px; background:none; border:none; }
.link-btn:hover { text-decoration:underline; }

/* 面包屑/切换条 */
.page-commbar {
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  padding:9px 14px; margin-bottom:14px; box-shadow:var(--shadow-sm);
}
.page-commbar .lbl { font-size:12.5px; color:var(--text-3); }
.comm-sel {
  border:1px solid var(--line); background:#F7F9FC; border-radius:8px; padding:6px 10px;
  font-size:13px; color:var(--text); outline:none; min-width:180px; cursor:pointer;
}
.comm-sel:focus { border-color:var(--blue-500); background:#fff; }
.comm-pill {
  display:inline-flex; align-items:center; gap:6px; background:#EAF1FE; color:var(--blue-600);
  border-radius:20px; padding:4px 12px; font-size:12.5px; font-weight:600;
}
.comm-pill .x { cursor:pointer; font-size:13px; color:var(--blue-400); }
.comm-pill .x:hover { color:var(--red); }

/* ==================== 卡片/通用 ==================== */
.card {
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  padding:18px 20px; margin-bottom:16px; box-shadow:var(--shadow-sm);
}
.card-title { font-size:15px; font-weight:700; margin-bottom:14px; color:var(--navy-900); display:flex; align-items:center; gap:8px; }
.card-title .ttl-ic { color:var(--blue-500); }
.card-title .extra { margin-left:auto; font-size:12px; color:var(--text-3); font-weight:400; }
.panel {
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow-sm); display:flex; flex-direction:column; overflow:hidden;
}
.panel-hd {
  display:flex; align-items:center; justify-content:space-between; padding:13px 18px;
  border-bottom:1px solid var(--line-soft); font-size:14.5px; font-weight:700; color:var(--navy-900);
}
.panel-bd { padding:16px 18px; }

/* ==================== KPI 卡片 ==================== */
.kpi-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(152px,1fr)); gap:12px; margin-bottom:16px; }
.kpi {
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  padding:13px 14px; box-shadow:var(--shadow-sm); cursor:pointer; transition:transform .15s,box-shadow .15s;
  border-top:3px solid var(--blue-500); position:relative; overflow:hidden;
}
.kpi:hover { transform:translateY(-2px); box-shadow:var(--shadow-md); }
.kpi .kpi-top { display:flex; align-items:center; gap:9px; margin-bottom:8px; }
.kpi .kpi-ic {
  width:32px;height:32px;border-radius:9px;display:flex;align-items:center;justify-content:center;
  font-size:17px; flex-shrink:0;
}
.kpi .kpi-val { font-size:25px; font-weight:800; line-height:1.1; letter-spacing:.3px; }
.kpi .kpi-lbl { font-size:12.5px; color:var(--text-2); margin-top:2px; }
.kpi .kpi-sub { font-size:11px; color:var(--text-3); margin-top:3px; display:flex; gap:6px; align-items:center; }
.kpi .up { color:var(--green); font-weight:700; }

/* ==================== 两栏布局 ==================== */
.layout-2 { display:grid; grid-template-columns:minmax(0,1fr) 350px; gap:16px; margin-bottom:16px; align-items:stretch; }
.layout-2b { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:16px; }
@media (max-width:1200px) { .layout-2,.layout-2b { grid-template-columns:1fr; } }
.map-holder { height:430px; position:relative; }
.map-holder.map-lg { height:calc(100vh - 210px); min-height:430px; }
.map-placeholder {
  position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center;
  color:var(--text-3); gap:8px; font-size:13px; background:#0d1b2a;
}

/* ==================== 今日新增 ==================== */
.today-list { max-height:430px; overflow-y:auto; }
.today-row {
  display:flex; align-items:center; gap:8px; padding:8.5px 14px; font-size:13px;
  border-radius:8px; margin:2px 6px; transition:background .15s;
}
.today-row:hover { background:#F3F7FD; }
.today-row.active { background:var(--green-bg); }
.today-ic { font-size:15px; width:22px; text-align:center; }
.today-name { flex:1; color:var(--text-2); }
.today-num { font-weight:800; color:var(--green); font-size:14px; }
.today-total { font-size:11px; color:var(--text-3); width:36px; text-align:right; }
.today-empty { padding:26px; text-align:center; color:var(--text-3); font-size:12.5px; }

/* ==================== 快捷入口 ==================== */
.quick-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(106px,1fr)); gap:8px; }
.quick-cell {
  display:flex; flex-direction:column; align-items:center; gap:4px; padding:12px 4px 10px;
  border:1px solid var(--line); border-radius:10px; background:#FBFCFE; cursor:pointer;
  transition:all .15s;
}
.quick-cell:hover { border-color:var(--blue-400); background:#EFF5FF; transform:translateY(-1px); box-shadow:var(--shadow-sm); }
.quick-cell .q-ic { font-size:21px; }
.quick-cell .q-name { font-size:12px; color:var(--text-2); }
.quick-cell .q-num { font-size:11px; color:var(--blue-600); font-weight:700; }

/* ==================== 简易柱状图 ==================== */
.bar-chart { display:flex; align-items:flex-end; gap:8px; height:190px; padding:14px 6px 0; }
.bar-item { flex:1; display:flex; flex-direction:column; align-items:center; height:100%; justify-content:flex-end; }
.bar-value { font-size:12px; font-weight:700; color:var(--text); margin-bottom:5px; }
.bar-fill {
  width:min(38px,72%); background:linear-gradient(180deg,#35C4E8,var(--blue-600));
  border-radius:6px 6px 0 0; min-height:3px; transition:height .4s ease; position:relative;
}
.bar-fill.zero { background:#E3E9F2; }
.bar-label { font-size:11px; color:var(--text-3); margin-top:6px; white-space:nowrap; }
.chart-empty { display:flex; height:190px; align-items:center; justify-content:center; color:var(--text-3); font-size:12.5px; gap:6px; }

/* ==================== 表格 ==================== */
.table-wrap { overflow-x:auto; }
.data-table { width:100%; border-collapse:separate; border-spacing:0; font-size:13px; }
.data-table thead th {
  position:sticky; top:0; background:#F1F5FB; color:var(--navy-800); font-weight:700;
  padding:10px 12px; text-align:left; white-space:nowrap; border-bottom:1px solid var(--line);
  font-size:12.5px; z-index:2;
}
.data-table tbody td { padding:9px 12px; border-bottom:1px solid var(--line-soft); color:var(--text); white-space:nowrap; }
.data-table tbody tr { transition:background .12s; }
.data-table tbody tr:hover { background:#F4F8FF; }
.data-table .cell-main { color:var(--navy-900); font-weight:600; }
.data-table .cell-sub { color:var(--text-3); font-size:12px; }
.table-empty { text-align:center; padding:34px 10px !important; color:var(--text-3); }
.row-ops { display:flex; gap:6px; justify-content:flex-end; }

/* ==================== 按钮 ==================== */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  padding:7.5px 15px; border:none; border-radius:8px; font-size:13px; cursor:pointer;
  transition:all .15s; font-weight:600; white-space:nowrap;
}
.btn:active { transform:scale(.98); }
.btn svg { width:14px;height:14px;fill:currentColor; }
.btn-primary { background:linear-gradient(135deg,var(--blue-600),var(--blue-400)); color:#fff; box-shadow:0 3px 10px rgba(46,124,246,.3); }
.btn-primary:hover { filter:brightness(1.07); }
.btn-success { background:var(--green); color:#fff; }
.btn-danger { background:var(--red); color:#fff; }
.btn-warning { background:var(--orange); color:#fff; }
.btn-default { background:#EEF2F8; color:var(--text); }
.btn-default:hover { background:#E2E9F4; }
.btn-ghost { background:transparent; color:var(--blue-600); border:1px solid var(--blue-400); }
.btn-ghost:hover { background:#EFF5FF; }
.btn-sm { padding:4px 10px; font-size:12px; border-radius:7px; }
.btn-xs { padding:2px 8px; font-size:11.5px; border-radius:6px; }
.btn[disabled] { opacity:.5; cursor:not-allowed; }

/* ==================== 标签/状态点 ==================== */
.tag { display:inline-block; padding:2px 9px; border-radius:20px; font-size:11px; font-weight:600; }
.tag-success { background:var(--green-bg); color:#0E7A4F; }
.tag-danger { background:var(--red-bg); color:#C33; }
.tag-warning { background:var(--orange-bg); color:#B45F16; }
.tag-info { background:#E4EEFF; color:#2B6BD8; }
.status-dot { display:inline-block; width:8px; height:8px; border-radius:50%; flex-shrink:0; }
.status-online { background:var(--green); box-shadow:0 0 0 3px rgba(23,162,107,.15); }
.status-offline { background:var(--red); box-shadow:0 0 0 3px rgba(229,72,77,.13); }
.muted { color:var(--text-3); }
.mono { font-family:Consolas,Menlo,monospace; }

/* ==================== 搜索/筛选栏 ==================== */
.search-bar { display:flex; gap:8px; margin-bottom:13px; align-items:center; flex-wrap:wrap; }
.search-bar input, .search-bar select {
  padding:7px 12px; border:1px solid var(--line); border-radius:8px; font-size:13px; outline:none; background:#fff;
}
.search-bar input:focus, .search-bar select:focus { border-color:var(--blue-400); }
.search-bar input { width:230px; }

/* ==================== 分页 ==================== */
.pagination { display:flex; gap:6px; justify-content:center; margin-top:14px; align-items:center; flex-wrap:wrap; }
.pagination button {
  padding:5px 13px; border:1px solid var(--line); background:#fff; border-radius:7px;
  cursor:pointer; font-size:12.5px; transition:all .15s;
}
.pagination button:hover:not([disabled]) { border-color:var(--blue-400); color:var(--blue-600); }
.pagination button.active { background:var(--blue-600); color:#fff; border-color:var(--blue-600); }
.pagination button[disabled] { opacity:.45; cursor:not-allowed; }
.page-info { font-size:12.5px; color:var(--text-3); }

/* ==================== 表单 ==================== */
.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:0 18px; }
.form-group { margin-bottom:12px; }
.form-group.full { grid-column:1 / -1; }
.form-group label { display:block; font-size:12.5px; color:var(--text-2); margin-bottom:5px; font-weight:600; }
.form-group label .req { color:var(--red); }
.form-group input, .form-group select, .form-group textarea {
  width:100%; padding:8px 12px; border:1px solid var(--line); border-radius:8px;
  font-size:13px; outline:none; background:#fff; transition:border .15s, box-shadow .15s; font-family:inherit;
}
.form-group input:focus, .form-group select:focus, .form-group textarea:focus {
  border-color:var(--blue-400); box-shadow:0 0 0 3px rgba(46,124,246,.10);
}
.form-group textarea { resize:vertical; min-height:66px; }
.form-group input[readonly], .form-group input[disabled] { background:#F4F6FA; color:var(--text-3); }
.form-hint { font-size:11.5px; color:var(--text-3); line-height:1.6; }
.form-row-inline { display:flex; gap:12px; flex-wrap:wrap; }
.form-row-inline .form-group { flex:1; min-width:150px; }

/* ==================== 模态框 ==================== */
.modal-overlay {
  position:fixed; inset:0; background:rgba(9,25,48,.52); backdrop-filter:blur(2px);
  display:flex; align-items:center; justify-content:center; z-index:999; animation:fadeIn .15s ease;
}
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
.modal {
  background:#fff; border-radius:14px; padding:22px 24px; width:640px; max-width:94vw;
  max-height:86vh; overflow-y:auto; box-shadow:0 24px 60px rgba(9,25,48,.35); animation:slideUp .18s ease;
}
@keyframes slideUp { from { transform:translateY(12px); opacity:0; } to { transform:none; opacity:1; } }
.modal-title { font-size:17px; font-weight:700; color:var(--navy-900); margin-bottom:18px; display:flex; align-items:center; gap:8px; }
.modal-title .mt-ic { width:30px;height:30px;border-radius:8px;background:#EAF1FE;display:inline-flex;align-items:center;justify-content:center;font-size:15px; }
.modal-actions { display:flex; gap:10px; justify-content:flex-end; margin-top:18px; border-top:1px solid var(--line-soft); padding-top:14px; }
.modal-actions .spacer { flex:1; }

/* ==================== 提示 ==================== */
.toast {
  position:fixed; top:22px; right:22px; z-index:10000; padding:11px 18px; border-radius:10px;
  color:#fff; font-size:13.5px; font-weight:600; box-shadow:0 10px 28px rgba(9,25,48,.22);
  display:flex; align-items:center; gap:8px; animation:slideIn .2s ease; max-width:420px;
}
@keyframes slideIn { from { transform:translateX(20px); opacity:0; } to { transform:none; opacity:1; } }
.toast-success { background:linear-gradient(135deg,#18A46D,#17A26B); }
.toast-error { background:linear-gradient(135deg,#E5484D,#D63B40); }
.toast-info { background:linear-gradient(135deg,#1B6FD9,#2E7CF6); }

/* ==================== 通用选择卡片（选小区等） ==================== */
.pick-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(215px,1fr)); gap:14px; }
.pick-card {
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  padding:20px 16px; text-align:center; cursor:pointer; transition:all .16s; box-shadow:var(--shadow-sm);
}
.pick-card:hover { transform:translateY(-3px); box-shadow:var(--shadow-md); border-color:var(--blue-400); }
.pick-card .p-ic { font-size:30px; margin-bottom:8px; }
.pick-card .p-name { font-size:15.5px; font-weight:700; color:var(--navy-900); }
.pick-card .p-code { font-size:11.5px; color:var(--text-3); margin:3px 0 8px; }
.pick-card .p-go { font-size:12px; color:var(--blue-600); font-weight:600; }

/* ==================== 小区业务数据总览 ==================== */
.comm-overview { display:flex; gap:16px; align-items:flex-start; }
.comm-cards { flex:1; min-width:0; display:flex; flex-direction:column; gap:16px; }
.comm-card { background:#fff; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow-sm); }
.comm-card-hd {
  display:flex; align-items:center; gap:10px; padding:13px 18px;
  background:linear-gradient(90deg,#0E3157,#14467C); color:#fff;
}
.comm-card-hd .c-name { font-size:16px; font-weight:700; flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.comm-card-hd .c-total { font-size:12px; background:rgba(255,255,255,.16); padding:2px 10px; border-radius:20px; }
.comm-card-meta { display:flex; gap:18px; padding:9px 18px; font-size:12px; color:var(--text-2); background:#FAFBFD; border-bottom:1px solid var(--line-soft); flex-wrap:wrap; }
.comm-card-meta b { color:var(--navy-800); font-weight:600; }
.comm-biz { display:grid; grid-template-columns:repeat(auto-fill,minmax(86px,1fr)); gap:6px; padding:13px; }
.biz-mini { text-align:center; padding:9px 3px 7px; border-radius:9px; cursor:pointer; transition:all .14s; border:1px solid transparent; }
.biz-mini:hover { background:#EFF5FF; border-color:var(--blue-200,#CFE0FA); }
.biz-mini.has-data { background:var(--green-bg); border-color:rgba(23,162,107,.2); }
.biz-mini .b-ic { font-size:18px; }
.biz-mini .b-name { font-size:11px; color:var(--text-2); margin:2px 0; }
.biz-mini .b-num { font-size:17px; font-weight:800; color:var(--navy-900); }
.biz-mini .b-today { font-size:10px; color:var(--green); font-weight:700; }
.comm-card-ft { padding:9px 18px; border-top:1px solid var(--line-soft); text-align:right; }

/* ==================== 数据卡片（小区钻取） ==================== */
.biz-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:12px; }
.biz-card {
  background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:16px 10px;
  text-align:center; cursor:pointer; transition:all .16s; box-shadow:var(--shadow-sm);
}
.biz-card:hover { transform:translateY(-3px); box-shadow:var(--shadow-md); border-color:var(--blue-400); }
.biz-card.active { border:2px solid var(--blue-500); background:#EFF5FF; }
.biz-card .b-ic { font-size:25px; margin-bottom:5px; }
.biz-card .b-name { font-size:13px; color:var(--text-2); margin-bottom:4px; }
.biz-card .b-total { font-size:24px; font-weight:800; color:var(--navy-900); }
.biz-card .b-today { font-size:11px; color:var(--green); margin-top:3px; font-weight:600; }
.info-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(215px,1fr)); gap:10px 18px; font-size:13px; }
.info-grid div { display:flex; gap:6px; }
.info-grid .k { color:var(--text-3); min-width:70px; }
.info-grid .v { color:var(--text); font-weight:600; word-break:break-all; }

/* ==================== 视频墙 ==================== */
.video-page { display:flex; gap:14px; height:calc(100vh - 150px); min-height:520px; }
.video-device-list { width:230px; flex-shrink:0; background:#fff; border:1px solid var(--line); border-radius:var(--radius); display:flex; flex-direction:column; box-shadow:var(--shadow-sm); overflow:hidden; }
.video-device-list-header { padding:12px 15px; font-weight:700; font-size:13.5px; color:var(--navy-900); background:linear-gradient(90deg,#F1F5FB,#fff); border-bottom:1px solid var(--line); }
.video-device-list-body { flex:1; overflow-y:auto; }
.video-group-header {
  display:flex; align-items:center; justify-content:space-between; padding:7px 15px 5px;
  font-size:11.5px; font-weight:700; color:var(--blue-600); background:#F7FAFF; border-bottom:1px solid var(--line-soft); position:sticky; top:0;
}
.video-group-count { font-size:10.5px; color:var(--text-3); background:#EAF1FE; padding:0 7px; border-radius:20px; }
.video-device-row { display:flex; align-items:center; gap:7px; padding:8px 12px; cursor:pointer; border-bottom:1px solid var(--line-soft); transition:background .12s; }
.video-device-row:hover { background:#EEF5FF; }
.video-device-row.on-wall { background:rgba(46,124,246,.08); }
.video-device-name { flex:1; font-size:12.8px; color:var(--text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.video-device-type { font-size:10.5px; color:var(--text-3); }
.video-device-ops { display:flex; gap:2px; }
.video-op { font-size:13px; color:var(--blue-500); cursor:pointer; padding:0 3px; border-radius:4px; }
.video-op:hover { background:#DCE9FF; }
.video-op-del { color:var(--red); }
.video-op-del:hover { background:var(--red-bg); }
.video-device-list-footer { padding:8px; border-top:1px solid var(--line); display:flex; gap:6px; }
.video-device-list-footer .btn { flex:1; }

.video-wall { flex:1; display:grid; grid-template-columns:repeat(3,1fr); grid-template-rows:repeat(2,1fr); gap:10px; min-width:0; }
.video-slot { background:#0B1522; border-radius:10px; overflow:hidden; display:flex; flex-direction:column; position:relative; box-shadow:0 4px 14px rgba(9,25,48,.25); }
.video-slot.slot-empty { background:#101C2C; border:1.5px dashed #2A3B52; }
.video-slot.slot-offline { outline:1.5px solid rgba(229,72,77,.5); }
.video-screen { flex:1; position:relative; min-height:0; display:flex; align-items:center; justify-content:center; }
.video-screen video, .video-screen img { width:100%; height:100%; object-fit:cover; }
.video-ph { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px; color:#5A6B82; font-size:12.5px; height:100%; }
.video-ph .ph-ic { font-size:26px; color:#33445C; }
.video-slot-label {
  padding:5px 9px; font-size:11.5px; color:#DDE7F5; background:rgba(6,14,26,.72);
  display:flex; align-items:center; gap:6px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis;
}
.video-slot-label .nm { overflow:hidden; text-overflow:ellipsis; flex:1; }

/* 旧视频类名兼容 */
.video-wall-slot, .video-wall-slot.slot-empty { background:#0B1522; border-radius:10px; overflow:hidden; display:flex; flex-direction:column; position:relative; }
.video-wall-slot.slot-empty { background:#101C2C; border:1.5px dashed #2A3B52; }
.video-wall-screen { flex:1; min-height:0; position:relative; }
.video-player, .video-snapshot { width:100%; height:100%; object-fit:cover; }
.video-placeholder { display:flex; flex-direction:column; align-items:center; justify-content:center; height:100%; color:#5A6B82; font-size:13px; gap:4px; }
.video-wall-label { padding:5px 9px; font-size:11.5px; color:#DDE7F5; background:rgba(6,14,26,.72); display:flex; gap:6px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* ==================== 地图 ==================== */
#mapContainer { border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow-sm); }
.map-legend { display:flex; gap:12px; font-size:11.5px; color:var(--text-2); align-items:center; }
.map-legend span { display:inline-flex; align-items:center; gap:5px; }
.dot { width:9px; height:9px; border-radius:50%; display:inline-block; }
.dot-community { background:#1E6FD9; }
.dot-device { background:#E5484D; }
.dot-sbxx { background:#ED8936; }
.marker-pin { display:flex; align-items:center; justify-content:center; width:30px; height:30px; border-radius:50% 50% 50% 4px; transform:rotate(-45deg); color:#fff; font-size:14px; box-shadow:0 3px 8px rgba(0,0,0,.3); border:2px solid #fff; }
.marker-pin span { transform:rotate(45deg); }
.marker-community { background:linear-gradient(135deg,#1E6FD9,#2E7CF6); }
.marker-device { background:linear-gradient(135deg,#E5484D,#F06464); }
.marker-sbxx { background:linear-gradient(135deg,#ED8936,#F6AD55); }
.map-filter { display:flex; gap:6px; align-items:center; }
.fchip {
  padding:3px 12px; border-radius:20px; font-size:11.5px; background:#EEF2F8; color:var(--text-2);
  cursor:pointer; transition:all .14s; border:1px solid transparent; user-select:none;
}
.fchip:hover { background:#E2E9F4; }
.fchip.active { background:var(--blue-600); color:#fff; }
.leaflet-container { font-family:inherit; }
.leaflet-popup-content-wrapper { border-radius:10px; box-shadow:0 10px 28px rgba(9,25,48,.2); }
.leaflet-popup-content { margin:12px 14px; font-size:13px; }
.leaflet-container a.leaflet-popup-close-button { color:#97A3B4; }
.popup-acts { display:flex; gap:6px; margin-top:9px; }
.map-hint {
  display:none; align-items:center; justify-content:center; gap:8px; margin-top:10px;
  padding:9px 14px; background:rgba(53,196,232,.10); border:1px dashed rgba(53,196,232,.45);
  color:#0E6E96; border-radius:9px; font-size:12.5px; font-weight:600;
}

/* ==================== 上报 ==================== */
.report-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:10px; }
.r-item { border:1px solid var(--line); border-radius:10px; padding:11px 13px; background:#FBFCFE; }
.r-item .r-hd { display:flex; align-items:center; gap:8px; font-weight:700; color:var(--navy-900); font-size:13.5px; }
.r-item .r-hd .r-ic { width:26px; height:26px; border-radius:7px; background:#EAF1FE; display:flex; align-items:center; justify-content:center; font-size:13px; }
.r-item .r-sub { font-size:11.5px; color:var(--text-3); margin:6px 0 8px; line-height:1.5; }
.r-item .r-acts { display:flex; gap:6px; }
.file-item {
  display:flex; align-items:center; gap:12px; padding:9px 13px; border:1px solid var(--line);
  border-radius:9px; margin-bottom:7px; background:#FBFCFE;
}
.file-item:hover { border-color:var(--blue-300,#B9D3F9); }
.file-name { font-size:12.5px; font-family:Consolas,Menlo,monospace; color:var(--navy-800); word-break:break-all; }
.file-meta { font-size:11px; color:var(--text-3); margin-top:2px; }
.file-acts { margin-left:auto; display:flex; gap:6px; flex-shrink:0; }
.xml-result-item { display:flex; align-items:center; gap:10px; padding:9px 13px; border-radius:9px; margin-bottom:7px; border:1px solid var(--line); font-size:13px; }
.xml-result-item.ok { background:var(--green-bg); border-color:rgba(23,162,107,.25); }
.xml-result-item.skip { background:#F4F6FA; border-color:var(--line); }
.xml-result-item.err { background:var(--red-bg); border-color:rgba(229,72,77,.25); }

/* ==================== 操作日志 ==================== */
.log-ip { color:var(--text-3); font-size:12px; }

/* ==================== 状态页 ==================== */
.state-card { text-align:center; padding:52px 20px; color:var(--text-3); }
.state-card .st-ic { font-size:42px; margin-bottom:12px; }
.state-card p { font-size:13px; }

.loading-page { display:flex; align-items:center; justify-content:center; min-height:60vh; gap:12px; color:var(--text-3); font-size:13.5px; }
.spinner { width:22px; height:22px; border:3px solid #D7E2F1; border-top-color:var(--blue-500); border-radius:50%; animation:spin .8s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }

/* ==================== 响应式 ==================== */
@media (max-width:1000px) {
  .sidebar { width:64px; }
  .sidebar-header h2,.sidebar-header .subtitle,.side-nav-section,.nav-item span:not(.nav-ic),.user-meta,.btn-logout { display:none; }
  .sidebar-nav { padding:8px 6px; }
  .nav-item { justify-content:center; margin:1px 4px; padding:10px 0; }
  .nav-ic { width:auto; font-size:18px; }
  .main-content { margin-left:64px; padding:14px; }
  .video-page { flex-direction:column; height:auto; }
  .video-device-list { width:100%; max-height:220px; }
  .video-wall { grid-template-columns:repeat(2,1fr); grid-template-rows:repeat(3,1fr); min-height:600px; }
  .comm-overview { flex-direction:column; }
}

/* ==========================================================
   小区数据总览 v3 —— KPI条 / 对比矩阵 / 单小区聚焦 / 设备列表
   ========================================================== */
.cs-layout { display:flex; gap:16px; align-items:flex-start; }
.cs-main { flex:1; min-width:0; display:flex; flex-direction:column; gap:14px; }

/* 顶部 KPI 条 */
.cs-kpis { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; }
.cs-kpi { background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  padding:14px 16px; display:flex; gap:12px; align-items:center; box-shadow:var(--shadow-sm); }
.cs-kpi .ic { width:38px; height:38px; border-radius:10px; display:flex; align-items:center;
  justify-content:center; font-size:18px; flex-shrink:0; }
.cs-kpi .v { font-size:20px; font-weight:700; line-height:1.15; }
.cs-kpi .l { font-size:12px; color:var(--text-3); }

/* 视图切换 */
.cs-tabs { display:flex; gap:8px; flex-wrap:wrap; }
.cs-tab { padding:7px 16px; border-radius:20px; background:var(--card); border:1px solid var(--line);
  font-size:13px; color:var(--text-2); cursor:pointer; transition:all .15s; user-select:none; }
.cs-tab:hover { border-color:var(--blue-400); color:var(--blue-600); }
.cs-tab.on { background:var(--blue-600); border-color:var(--blue-600); color:#fff; font-weight:600;
  box-shadow:0 4px 10px rgba(27,111,217,.25); }

/* 对比矩阵 */
.cs-panel { background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow-sm); overflow:hidden; }
.cs-panel-hd { display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:13px 16px; border-bottom:1px solid var(--line-soft); font-weight:600; font-size:13.5px; }
.cs-hint { font-size:11.5px; color:var(--text-3); font-weight:400; }
.cs-table-wrap { overflow-x:auto; }
table.cs-matrix { width:100%; border-collapse:collapse; font-size:13px; }
.cs-matrix th, .cs-matrix td { padding:9px 12px; text-align:center; border-bottom:1px solid var(--line-soft); white-space:nowrap; }
.cs-matrix thead th { background:#F7FAFE; color:var(--text-2); font-size:12.5px; font-weight:600; }
.cs-matrix tbody tr:last-child td { border-bottom:none; }
.cs-matrix tbody tr:hover .cs-has { filter:brightness(.94); }
.cs-biz-col { text-align:left !important; color:var(--text-2); font-weight:500; min-width:128px; }
.cs-biz-ic { display:inline-flex; width:24px; height:24px; border-radius:7px; align-items:center;
  justify-content:center; font-size:13px; margin-right:8px; vertical-align:middle; }
.cs-comm-th { font-size:13px; color:var(--text); }
.cs-comm-sub { font-size:11px; color:var(--text-3); font-weight:400; margin-top:2px; }
.cs-cell { cursor:default; font-weight:600; font-variant-numeric:tabular-nums; position:relative; }
.cs-cell.cs-has { cursor:pointer; }
.cs-cell.cs-has:hover { outline:2px solid var(--blue-500); outline-offset:-2px; filter:brightness(.95); }
.cs-plus { display:inline-block; margin-left:6px; padding:0 5px; border-radius:8px; background:var(--green-bg);
  color:var(--green); font-size:10.5px; font-weight:600; vertical-align:1px; }
.cs-sum-col { background:#F7FAFE; color:var(--text); min-width:64px; }
.cs-tr-sum td { border-top:2px solid var(--line); }
.cs-tr-vid td { color:var(--text-2); font-weight:500; }
.cs-vid { font-variant-numeric:tabular-nums; }
.cs-vid.all-on { color:var(--green); font-weight:700; }

/* 单小区聚焦 */
.cs-focus-hd { display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:14px 16px; border-bottom:1px solid var(--line-soft); flex-wrap:wrap; }
.cf-name { font-size:15px; font-weight:700; display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.cf-chip { font-size:11.5px; font-weight:500; color:var(--text-2); background:var(--bg);
  border:1px solid var(--line); padding:2px 10px; border-radius:12px; }
.cs-dist { display:flex; height:14px; margin:14px 16px 4px; border-radius:7px; overflow:hidden; background:var(--line-soft); }
.cs-seg { height:100%; transition:width .3s; }
.cs-tiles { display:grid; grid-template-columns:repeat(auto-fill,minmax(158px,1fr)); gap:10px; padding:12px 16px 16px; }
.cs-tile { border:1px solid var(--line); border-radius:10px; padding:10px 12px; cursor:pointer;
  transition:all .15s; background:#FBFCFE; }
.cs-tile:hover { border-color:var(--blue-400); box-shadow:var(--shadow-sm); transform:translateY(-1px); }
.cs-tile-zero { opacity:.55; }
.cs-tile-top { display:flex; align-items:center; gap:7px; }
.cs-tile-name { font-size:12px; color:var(--text-2); }
.cs-tile-num { font-size:21px; font-weight:700; margin:6px 0 7px; display:flex; align-items:baseline; gap:8px; }
.cs-tile-num .cs-plus { vertical-align:baseline; }
.cs-tile-bar { height:4px; border-radius:2px; background:var(--line-soft); overflow:hidden; }
.cs-tile-bar i { display:block; height:100%; border-radius:2px; transition:width .3s; }
.cs-tile-pct { font-size:10.5px; color:var(--text-3); margin-top:5px; }

/* 右侧视频设备列表 */
.vdev-panel { width:320px; flex-shrink:0; }
.vdev-bar { height:6px; background:var(--line-soft); border-radius:3px; margin:12px 16px 4px; overflow:hidden; }
.vdev-bar i { display:block; height:100%; border-radius:3px; transition:width .3s; }
.vdev-list { padding:8px 10px 12px; max-height:520px; overflow-y:auto; }
.vdev-item { display:flex; align-items:center; gap:10px; padding:9px 8px; border-radius:9px;
  cursor:pointer; transition:background .12s; }
.vdev-item:hover { background:var(--bg); }
.vdev-info { flex:1; min-width:0; display:flex; flex-direction:column; }
.vdev-info .nm { font-size:13px; font-weight:600; color:var(--text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.vdev-info .sub { font-size:11px; color:var(--text-3); margin-top:1px; }
.vdev-st { font-size:11px; font-weight:600; padding:2px 9px; border-radius:10px; }
.vdev-st.on { background:var(--green-bg); color:var(--green); }
.vdev-st.off { background:#F2F4F8; color:var(--text-3); }
.vdev-empty { display:flex; flex-direction:column; align-items:center; gap:6px; color:var(--text-3);
  font-size:12.5px; padding:48px 0; text-align:center; }

@media (max-width:1100px) {
  .cs-layout { flex-direction:column; }
  .vdev-panel { width:100%; }
  .cs-kpis { grid-template-columns:repeat(2,1fr); }
}

/* 小区总览：范围下拉框（替代 chips，适配大量小区） */
.cs-toolbar { display:flex; align-items:center; gap:10px; }
.cs-tb-label { font-size:12.5px; color:var(--text-3); }
.cs-select { appearance:none; -webkit-appearance:none; min-width:300px; max-width:420px;
  padding:8px 38px 8px 14px; border-radius:10px; border:1px solid var(--line); background:var(--card);
  font-family:inherit; font-size:13.5px; font-weight:600; color:var(--text); cursor:pointer;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' stroke='%235B6B7F' stroke-width='2' fill='none' stroke-linecap='round'/></svg>");
  background-repeat:no-repeat; background-position:right 14px center; box-shadow:var(--shadow-sm); }
.cs-select:hover { border-color:var(--blue-400); }
.cs-select:focus { outline:none; border-color:var(--blue-500); box-shadow:0 0 0 3px rgba(46,124,246,.15); }

/* 上报页：待适配 / 体检提示 */
.r-item.r-unready { opacity:.72; background:#FAFBFC; }
.r-item .xml-warn { color:#B45309; background:#FEF3C7; border-radius:6px; padding:3px 7px; margin-top:4px; font-size:11.5px; line-height:1.5; white-space:normal; }