/* ============================================================================
   全国设备分布地图 · 省市县三级下钻
   视觉语言与驾驶舱保持一致：深蓝底 + 单色蓝主调 + 状态三色（绿/黄/红）
   ========================================================================= */
* { box-sizing: border-box; }
:root {
  --bg: #060d17; --panel: #0c1725; --panel2: #0a1420;
  --line: #17283a; --line2: #1d3247; --line3: #24425f;
  --txt: #dce7f5; --dim: #70849a; --dim2: #536b84;
  --blue: #3da5f5; --blue-l: #74bdff; --blue-d: #12324f;
  --ok: #34d399; --warn: #fbbf24; --bad: #ff5f6d;
}
html, body { height: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--txt);
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", "Microsoft YaHei", sans-serif;
  overflow: hidden;
}
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }
.eyebrow { margin: 0 0 4px; color: var(--dim2); font-size: 8.5px; letter-spacing: 1.6px; font-weight: 900; }

.cn-shell { height: 100vh; display: grid; grid-template-rows: auto minmax(0, 1fr); }

/* ── 顶部工具条 ── */
.cn-top {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  padding: 12px 16px; border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, #08111e, #070f1a);
}
.cn-back {
  display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 11px;
  border: 1px solid var(--line2); border-radius: 7px; color: #8296ad; font-size: 10.5px; font-weight: 700;
  transition: color .16s, border-color .16s;
}
.cn-back:hover { color: var(--blue-l); border-color: var(--blue); }
.cn-title h1 { margin: 0; font-size: 17px; letter-spacing: -.3px; }

.cn-crumb { display: flex; align-items: center; gap: 7px; font-size: 11px; }
.cn-crumb a { color: #7c93aa; cursor: pointer; padding: 3px 6px; border-radius: 5px; transition: background .15s, color .15s; }
.cn-crumb a:hover { color: var(--blue-l); background: #10253b; }
.cn-crumb a.cur { color: var(--blue-l); font-weight: 800; background: #10253b; }
.cn-crumb span { color: #3c5468; font-size: 10px; }

.cn-tools { margin-left: auto; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cn-seg { display: flex; padding: 2px; border: 1px solid var(--line2); border-radius: 8px; background: #0a1521; }
.cn-seg button {
  padding: 6px 11px; border: 0; border-radius: 6px; background: transparent;
  color: #728aa2; font-size: 10px; font-weight: 700; transition: background .16s, color .16s;
}
.cn-seg button:hover { color: #bed3e6; }
.cn-seg button.on { background: linear-gradient(135deg, #12324f, #0d2237); color: #eaf4ff; box-shadow: inset 0 0 0 1px rgba(72,151,207,.32); }
.cn-seg.small button { padding: 6px 9px; }
.cn-tbtn {
  height: 30px; padding: 0 11px; border: 1px solid var(--line2); border-radius: 7px;
  background: #0b1725; color: #8296ad; font-size: 10.5px; font-weight: 700; transition: all .16s;
}
.cn-tbtn:hover:not(:disabled) { color: var(--blue-l); border-color: var(--blue); }
.cn-tbtn:disabled { opacity: .38; cursor: not-allowed; }

/* ── 主体 ── */
.cn-body {
  display: grid; grid-template-columns: minmax(0, 1fr) 356px; gap: 12px;
  padding: 12px 14px 14px; min-height: 0;
}
.cn-stage {
  position: relative; min-height: 0; overflow: hidden;
  border: 1px solid var(--line); border-radius: 11px;
  background: radial-gradient(circle at 50% 42%, #0d1f33 0, #08111e 55%, #060d17 100%);
}
#cn-map { position: absolute; inset: 0; }

.cn-legend {
  position: absolute; left: 13px; bottom: 13px; z-index: 6;
  display: flex; align-items: center; gap: 13px; flex-wrap: wrap;
  padding: 8px 12px; border: 1px solid var(--line2); border-radius: 8px;
  background: rgba(9,18,30,.86); backdrop-filter: blur(6px);
  color: #7e94aa; font-size: 9.5px; font-weight: 700;
}
.cn-legend span { display: inline-flex; align-items: center; gap: 6px; }
.cn-legend i { width: 7px; height: 7px; border-radius: 50%; display: block; }
.cn-ramp { gap: 8px; }
.cn-ramp em { font-style: normal; }
.cn-ramp b {
  display: block; width: 84px; height: 7px; border-radius: 4px;
  background: linear-gradient(90deg, rgb(13,26,42), rgb(17,48,76), rgb(24,92,142), rgb(56,148,208), rgb(140,208,248));
  border: 1px solid #22384f;
}
.cn-tip {
  position: absolute; right: 13px; bottom: 13px; z-index: 6; max-width: 60%;
  padding: 8px 12px; border: 1px solid var(--line2); border-radius: 8px;
  background: rgba(9,18,30,.86); backdrop-filter: blur(6px);
  color: #7e94aa; font-size: 9.5px; font-weight: 700; text-align: right;
}

/* ── 侧栏 ── */
.cn-side { display: grid; grid-template-rows: auto auto minmax(0, 1fr); gap: 10px; min-height: 0; }
.cn-panel {
  border: 1px solid var(--line); border-radius: 10px;
  background: linear-gradient(145deg, var(--panel), var(--panel2));
  padding: 13px 14px;
}
.cn-panel.scroll { overflow-y: auto; overflow-x: hidden; min-height: 0; padding-bottom: 8px; }
.cn-panel.scroll::-webkit-scrollbar { width: 7px; }
.cn-panel.scroll::-webkit-scrollbar-thumb { background: #1d3247; border-radius: 4px; }
.cn-panel.scroll::-webkit-scrollbar-track { background: transparent; }

.cn-sum-head { display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap; margin-bottom: 11px; }
.cn-sum-head h3 { margin: 0; font-size: 15px; }
.cn-scene-chip {
  margin-left: auto; padding: 4px 8px; border: 1px solid #23405a; border-radius: 5px;
  background: #0d2032; color: #7fb4dc; font-size: 8.5px; font-weight: 800; letter-spacing: .4px;
}
.cn-sum-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.cn-sum-cell { padding: 8px 9px; border: 1px solid var(--line); border-radius: 7px; background: #09131f; }
.cn-sum-cell span { display: block; color: #64798f; font-size: 8.5px; }
.cn-sum-cell strong { display: block; margin: 5px 0 3px; font-size: 17px; line-height: 1; font-variant-numeric: tabular-nums; }
.cn-sum-cell small { display: block; color: #4e6479; font-size: 8px; }

.cn-block-head { display: flex; align-items: baseline; gap: 8px; margin-bottom: 9px; }
.cn-block-head h3 { margin: 0; font-size: 12.5px; }
.cn-block-head b { color: var(--blue-l); }

.cn-rank-list { display: grid; gap: 2px; }
.cn-rank-row {
  display: flex; align-items: center; gap: 9px; padding: 7px 6px; border-radius: 6px;
  cursor: pointer; transition: background .15s;
}
.cn-rank-row:hover { background: #0d1a2a; }
.cn-rank-row.flash { background: #12324f; box-shadow: inset 2px 0 var(--blue); }
.cn-rank-no { width: 18px; color: #47607a; font-size: 9px; font-weight: 800; font-variant-numeric: tabular-nums; }
.cn-rank-main { flex: 1; min-width: 0; }
.cn-rank-name { display: flex; align-items: baseline; gap: 8px; }
.cn-rank-name strong { font-size: 11px; color: #c3d4e5; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cn-rank-name em { margin-left: auto; font-style: normal; font-size: 9px; font-weight: 800; font-variant-numeric: tabular-nums; flex: none; }
.cn-rank-name em.ok { color: #4e9c78; }
.cn-rank-name em.warn { color: #d3a13c; }
.cn-rank-name em.bad { color: #e0666f; }
.cn-rank-bar { margin-top: 5px; height: 3px; border-radius: 2px; background: #101f2e; overflow: hidden; }
.cn-rank-bar i { display: block; height: 100%; background: linear-gradient(90deg, #1f5c8c, #52a8e0); border-radius: 2px; }
.cn-rank-arrow { color: #45617a; font-size: 14px; }

.cn-dev-list { display: grid; gap: 1px; }
.cn-dev-row {
  display: flex; align-items: center; gap: 9px; padding: 8px 6px; border-radius: 6px;
  transition: background .15s;
}
.cn-dev-row:hover { background: #10253b; }
.cn-dev-dot { width: 7px; height: 7px; border-radius: 50%; flex: none; display: block; }
.cn-dev-dot.online { background: var(--ok); box-shadow: 0 0 0 3px rgba(52,211,153,.12); }
.cn-dev-dot.warning { background: var(--warn); box-shadow: 0 0 0 3px rgba(251,191,36,.12); }
.cn-dev-dot.offline { background: var(--bad); box-shadow: 0 0 0 3px rgba(255,95,109,.12); }
.cn-dev-main { flex: 1; min-width: 0; }
.cn-dev-main strong { display: block; font-size: 10.5px; color: #c3d4e5; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cn-dev-main small { display: block; margin-top: 2px; color: #4e6479; font-size: 8.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cn-dev-loc { flex: none; max-width: 76px; color: #5d7a92; font-size: 8.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cn-dev-arrow { color: #3c5468; font-size: 13px; flex: none; }
.cn-empty { padding: 14px 4px; color: #566c82; font-size: 10px; line-height: 1.65; }
.cn-more { padding: 8px 4px 2px; color: #4e6479; font-size: 9px; }

/* ── 设备卡片（浮层） ── */
.cn-card {
  position: absolute; top: 13px; right: 13px; z-index: 20; width: 306px;
  border: 1px solid #27455f; border-radius: 11px;
  background: linear-gradient(160deg, rgba(14,26,42,.98), rgba(9,18,30,.98));
  box-shadow: 0 24px 60px -22px rgba(0,0,0,.9);
  padding: 14px; animation: cnCardIn .18s ease-out;
}
@keyframes cnCardIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.cn-card-x {
  position: absolute; top: 8px; right: 9px; width: 22px; height: 22px; border: 0; border-radius: 5px;
  background: transparent; color: #5d7a92; font-size: 15px; line-height: 1;
}
.cn-card-x:hover { background: #16283a; color: #c3d4e5; }
.cn-card-top { display: flex; align-items: center; gap: 9px; padding-right: 22px; }
.cn-card-top strong { display: block; font-size: 12.5px; }
.cn-card-top small { display: block; margin-top: 2px; color: #5d7a92; font-size: 9px; }
.cn-badge {
  margin-left: auto; font-style: normal; padding: 3px 7px; border-radius: 4px;
  font-size: 8.5px; font-weight: 800; flex: none;
}
.cn-badge.online { background: rgba(52,211,153,.13); color: #4fd6a6; }
.cn-badge.warning { background: rgba(251,191,36,.13); color: #e5b444; }
.cn-badge.offline { background: rgba(255,95,109,.13); color: #ff7c82; }
.cn-card-site {
  margin: 11px 0 10px; padding: 9px 10px; border: 1px solid var(--line); border-radius: 7px; background: #0a1624;
}
.cn-card-site span { display: block; color: #5d7a92; font-size: 8.5px; }
.cn-card-site strong { display: block; margin-top: 4px; font-size: 11px; color: #b8cfe2; }
.cn-card-kv { display: grid; grid-template-columns: 1fr 1fr; gap: 1px 12px; }
.cn-kv { display: flex; justify-content: space-between; gap: 8px; padding: 6px 0; border-bottom: 1px solid #12212f; }
.cn-kv span { color: #5d7a92; font-size: 9px; }
.cn-kv strong { color: #b8cfe2; font-size: 9.5px; font-weight: 700; text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cn-card-reason { margin-top: 10px; padding: 9px 10px; border: 1px solid #40242a; border-radius: 7px; background: #1b1119; }
.cn-card-reason span { display: block; color: #b9717a; font-size: 8.5px; font-weight: 800; }
.cn-card-reason p { margin: 5px 0 0; color: #a8909a; font-size: 9.5px; line-height: 1.6; }
.cn-card-actions { display: flex; gap: 8px; margin-top: 12px; }
.cn-btn {
  flex: 1; height: 32px; display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--line2); border-radius: 7px; background: #0b1725;
  color: #8296ad; font-size: 10.5px; font-weight: 700; transition: all .16s;
}
.cn-btn:hover { color: var(--blue-l); border-color: var(--blue); }
.cn-btn.primary { background: linear-gradient(135deg, #14395a, #0e2640); color: #dbeefd; border-color: #2c5a83; }
.cn-btn.primary:hover { border-color: var(--blue); color: #fff; }

/* ── 窄屏 ── */
@media (max-width: 1180px) {
  .cn-body { grid-template-columns: minmax(0, 1fr); grid-template-rows: 58vh minmax(0, 1fr); }
  .cn-side { grid-template-rows: auto auto auto; }
  .cn-panel.scroll { max-height: 300px; }
}
@media (max-width: 820px) {
  .cn-top { gap: 10px; }
  .cn-tools { width: 100%; margin-left: 0; }
  .cn-card { width: auto; left: 13px; right: 13px; }
}.cn-search{position:relative;display:flex;align-items:center;gap:6px;height:30px;padding:0 8px;border:1px solid #1d3752;border-radius:7px;background:#0a1727;transition:.18s}.cn-search:focus-within{border-color:#3da5f5;box-shadow:0 0 0 1px rgba(61,165,245,.22)}.cn-search-ico{color:#4e7595;font-size:13px;line-height:1}.cn-search input{width:196px;border:0;outline:0;background:transparent;color:#dbe9f6;font-size:12px;font-family:inherit}.cn-search input::placeholder{color:#4a6b8a}.cn-search-x{width:16px;height:16px;border:0;border-radius:50%;background:#1d3752;color:#9dbcd6;font-size:11px;line-height:1;cursor:pointer;padding:0}.cn-search-x:hover{background:#2a4f70}.cn-search-pop{position:absolute;top:calc(100% + 6px);left:0;z-index:30;width:334px;max-height:298px;overflow-y:auto;padding:5px;border:1px solid #1d3752;border-radius:9px;background:#08131f;box-shadow:0 18px 42px -18px #000}.cn-search-item{display:flex;align-items:center;gap:9px;padding:7px 9px;border-radius:6px;cursor:pointer}.cn-search-item:hover{background:#0f2338}.cn-search-idx{width:14px;flex:0 0 auto;color:#3c5b76;font-size:10px;font-weight:900}.cn-search-item>div{flex:1;min-width:0}.cn-search-item strong{display:block;color:#dbe9f6;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.cn-search-item small{display:block;margin-top:2px;color:#5d7a92;font-size:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.cn-search-badge{flex:0 0 auto;padding:2px 6px;border-radius:4px;font-size:10px}.cn-search-badge.online{color:#34d399;background:rgba(52,211,153,.12)}.cn-search-badge.warning{color:#fbbf24;background:rgba(251,191,36,.12)}.cn-search-badge.offline{color:#ff5f6d;background:rgba(255,95,109,.12)}.cn-search-empty{padding:10px;color:#5d7a92;font-size:11px;text-align:center}.cn-status-bar{display:flex;height:3px;margin-top:6px;border-radius:2px;overflow:hidden;background:#132437}.cn-status-bar i{display:block;height:100%}.cn-status-bar .on{background:#34d399}.cn-status-bar .warn{background:#fbbf24}.cn-status-bar .off{background:#ff5f6d}.cn-sum-foot{display:flex;justify-content:space-between;margin-top:9px;color:#5d7a92;font-size:11px}.cn-sum-foot b{font-weight:900}.cn-dev-row.flash{background:#12314c;box-shadow:inset 0 0 0 1px #3da5f5}@media(max-width:1180px){.cn-search input{width:126px}}@media(max-width:820px){.cn-search input{width:104px}.cn-search-pop{width:min(300px,86vw)}}