/* situation3d — light theme, aligned with the reference platform layout. */

:root {
  --bg: #f4f6fa;
  --panel: #ffffff;
  --panel-alt: #fafbfd;
  --border: #dfe4ec;
  --text: #1d2430;
  --text-dim: #6b7688;
  --red: #c8352c;
  --blue: #1f5fbf;
  --accent: #1668dc;
  --topbar: #16202f;
  --topbar-text: #e8edf5;

  /* TS等级配色：1 和缓 → 4 高危 */
  --lv1: #4a9c6d;
  --lv2: #b8860b;
  --lv3: #d9772a;
  --lv4: #c8352c;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  background: var(--bg);
  color: var(--text);
  font: 13px/1.5 "Microsoft YaHei", "PingFang SC", "Noto Sans CJK SC", Arial, sans-serif;
  overflow: hidden;
}

body {
  display: flex;
  flex-direction: column;
}

/* ---------------- top bar ---------------- */

.topbar {
  flex: 0 0 auto;
  height: 48px;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 0 16px;
  background: var(--topbar);
  color: var(--topbar-text);
}

.brand { display: flex; align-items: baseline; min-width: 0; }
.brand strong { font-size: 15px; letter-spacing: .5px; white-space: nowrap; }
.brand-sub {
  margin-left: 10px;
  font-size: 12px;
  color: #9fb0c6;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.topbar-actions { display: flex; gap: 8px; margin-left: auto; align-items: center; }

.topbar-actions button,
.menu-btn {
  height: 28px;
  padding: 0 12px;
  border: 1px solid #33445c;
  border-radius: 4px;
  background: #223047;
  color: #d5dfee;
  font-size: 12px;
  font-family: inherit;
  cursor: pointer;
}

.topbar-actions button:hover,
.menu-btn:hover { background: #2c3d58; }
.topbar-actions button.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.topbar-actions button.primary:hover { background: #2b7ae8; }

.status { display: flex; align-items: center; gap: 6px; font-size: 12px; color: #9fb0c6; white-space: nowrap; }
.dot { width: 8px; height: 8px; border-radius: 50%; background: #d0a020; flex: 0 0 auto; }
.dot.ok { background: #37b24d; }
.dot.err { background: #e03131; }

/* ---------------- case menu ---------------- */

.menu { position: relative; }
.menu-btn .caret { font-size: 10px; opacity: .8; }

.menu-list {
  position: absolute;
  top: 34px;
  left: 0;
  width: 380px;
  max-width: min(380px, calc(100vw - 24px));
  max-height: 70vh;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 6px;
  border: 1px solid #33445c;
  border-radius: 6px;
  background: #1c2837;
  box-shadow: 0 12px 30px rgba(10, 18, 30, .45);
  display: none;
  z-index: 60;
}

.menu-list.open { display: block; }

.menu-item {
  display: block;
  width: 100%;
  /* 撑宽防线：块级按钮在绝对定位的下拉里会被长文本按 min-content 撑开，
     即使父级写了 width 也拦不住。这三条一起才能保证"一行省略号"真的生效。 */
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
  text-align: left;
  padding: 8px 10px;
  border: 1px solid transparent;
  border-radius: 4px;
  background: transparent;
  color: #cfdaea;
  font-family: inherit;
  cursor: pointer;
  overflow: hidden;
}

.menu-item:hover { background: #26364b; }
.menu-item.active { border-color: var(--accent); background: #22344c; }

.menu-item .mi-head { display: block; font-size: 13px; font-weight: 600; color: #eef3fa; }
/* `.mi-sub` 与 `.mi-desc` 随案例菜单的两行副文本一起删掉了（菜单现在只留案例名）。
   留着指向不存在元素的规则，下一个人会以为菜单里还有副标题可调。 */

/* ---------------- workspace ---------------- */

.workspace {
  flex: 1 1 auto;
  display: flex;
  min-height: 0;
}

.panel {
  flex: 0 0 268px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px;
  background: var(--panel-alt);
  border-right: 1px solid var(--border);
  overflow: hidden;
}

/* 左栏图层管理单独滚动：它内容最长，小屏上不给滚动条就会把目标列表挤出可视区。
   只在这一块滚动（而不是整列滚动），目标列表才能固定留在下方。 */
.layer-groups {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow-y: auto;
  /* 给滚动条留出位置，避免它压住复选框 */
  padding-right: 4px;
  scrollbar-width: thin;
}

.layer-groups::-webkit-scrollbar { width: 8px; }
.layer-groups::-webkit-scrollbar-thumb {
  background: #3a4c66;
  border-radius: 4px;
}
.layer-groups::-webkit-scrollbar-thumb:hover { background: #53688a; }
.layer-groups::-webkit-scrollbar-track { background: transparent; }

/* 右栏承载三个分栏（整体/目标/区域TS）。整体TS栏要放"家族标签 + 图标条 + 计数"
   三列，306px 装不下，加宽到 380px；三栏内容较长，整列纵向滚动。 */
.panel-right {
  border-right: none;
  border-left: 1px solid var(--border);
  flex: 0 0 380px;
  overflow-y: auto;
}

.panel-block {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 5px;
  padding: 8px 10px;
}

.panel-block.grow { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }

.panel-block h2 {
  margin: 0 0 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-dim);
  letter-spacing: .4px;
}

.hint-inline { font-weight: 400; font-size: 11px; color: #98a3b3; }

.check {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 3px 0;
  font-size: 12px;
  cursor: pointer;
  user-select: none;
}

.check b { margin-left: auto; color: var(--text-dim); font-weight: 500; }
.check.red b { color: var(--red); }
.check.blue b { color: var(--blue); }

.domain-row { display: flex; flex-direction: column; gap: 0; padding-top: 4px; border-top: 1px dashed var(--border); margin-top: 4px; }

.kv { display: flex; justify-content: space-between; gap: 8px; padding: 2px 0; font-size: 12px; }
.kv span { color: var(--text-dim); flex: 0 0 auto; }
.kv b { font-weight: 500; font-variant-numeric: tabular-nums; text-align: right; }

.control-row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 3px 0;
  font-size: 12px;
}

.control-row > span:first-child { flex: 1 1 auto; color: var(--text-dim); }

button.mini {
  height: 22px;
  padding: 0 8px;
  border: 1px solid var(--border);
  border-radius: 3px;
  background: #f7f9fc;
  color: var(--text);
  font-size: 11px;
  font-family: inherit;
  cursor: pointer;
}

button.mini:hover { background: #eef2f8; }

select {
  height: 22px;
  border: 1px solid var(--border);
  border-radius: 3px;
  background: #fff;
  color: var(--text);
  font-size: 11px;
  font-family: inherit;
}

.switch-note {
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px dashed var(--border);
  font-size: 11px;
  line-height: 1.5;
  color: var(--text-dim);
}

/* 状态说明的两种结论色。天地图 key 失效以前是**完全静默**的（底图变成一片深蓝），
   所以这里的告警必须显眼：左侧色条 + 着色文字，扫一眼就能分辨通/不通。 */
.switch-note.warn {
  color: #8a4a12;
  border-left: 3px solid #d9772a;
  padding-left: 7px;
  background: #fdf3e8;
}
.switch-note.ok {
  color: #2f6b45;
  border-left: 3px solid #37b24d;
  padding-left: 7px;
}

/* ---------------- nested layer sub-panel (ion token) ---------------- */

/* 图层管理里嵌在某一组内部的折叠块。.layer-group 的样式是按"顶层 details"
   写的（>.summary），套到嵌套上要么不生效要么把缩进搞乱，所以单独给一套。 */
.layer-sub {
  margin: 4px 0 2px 2px;
  padding-left: 6px;
  border-left: 2px solid var(--border);
}

.layer-sub > summary {
  list-style: none;
  cursor: pointer;
  font-size: 11px;
  color: var(--text-dim);
  padding: 2px 0;
  user-select: none;
}

.layer-sub > summary::-webkit-details-marker { display: none; }

.layer-sub > summary::before {
  content: '▸';
  display: inline-block;
  width: 11px;
  transition: transform .12s ease;
}

.layer-sub[open] > summary::before { transform: rotate(90deg); }

.layer-sub .switch-note { margin-top: 4px; border-top: none; }

.token-input {
  display: block;
  width: 100%;
  box-sizing: border-box;
  height: 22px;
  margin: 4px 0 6px;
  padding: 0 6px;
  border: 1px solid var(--border);
  border-radius: 3px;
  background: #fff;
  color: var(--text);
  font-size: 11px;
  font-family: inherit;
  /* 令牌很长，别让它把图层栏撑宽 */
  overflow: hidden;
  text-overflow: ellipsis;
}

.token-input.ok { border-color: #3f9d63; }
.token-input.bad { border-color: var(--red); }

/* ---------------- 数据健康面板 ---------------- */

.health-body {
  margin-top: 6px;
  font-size: 11px;
  line-height: 1.5;
  color: var(--text-dim);
}

.health-ok { color: #2f7d4f; }

.health-item {
  margin: 4px 0;
  padding: 4px 6px;
  border-left: 2px solid var(--red);
  background: #fdf2f2;
  border-radius: 2px;
}

.health-item b { color: var(--text); }

.health-item .health-feed {
  margin-left: 6px;
  padding: 0 4px;
  border-radius: 2px;
  background: var(--red);
  color: #fff;
  font-size: 10px;
}

.health-detail {
  margin-top: 2px;
  color: #8a4a4a;
  word-break: break-word;
}

.health-meta {
  margin-top: 6px;
  padding-top: 5px;
  border-top: 1px dashed var(--border);
  color: var(--text-dim);
  word-break: break-word;
}

/* ---------------- TS简报 ---------------- */

.brief-headline {
  margin: 4px 0 6px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.5;
  color: var(--text);
}

.brief-line {
  margin: 3px 0;
  padding-left: 10px;
  position: relative;
  font-size: 12px;
  line-height: 1.6;
  color: var(--text);
}

.brief-line::before {
  content: '·';
  position: absolute;
  left: 0;
  color: var(--text-dim);
}

/* 简报原文要能整体复制走，所以用可滚动只读文本域而不是 div */
.brief-text {
  width: 100%;
  box-sizing: border-box;
  min-height: 220px;
  margin-top: 4px;
  padding: 8px;
  border: 1px solid var(--border);
  border-radius: 3px;
  background: #fbfcfe;
  color: var(--text);
  font-family: inherit;
  font-size: 12px;
  line-height: 1.6;
  resize: vertical;
  white-space: pre-wrap;
}

/* ---------------- target list ---------------- */

.target-list { overflow-y: auto; flex: 1 1 auto; }

.target-item {
  padding: 5px 7px;
  margin-bottom: 4px;
  border: 1px solid var(--border);
  border-left-width: 3px;
  border-radius: 4px;
  background: #fff;
  cursor: pointer;
}

.target-item.red { border-left-color: var(--red); }
.target-item.blue { border-left-color: var(--blue); }
.target-item:hover { background: #f2f6fd; }
.target-item.active { background: #e8f1ff; border-color: #9cc2f5; }

.target-item .ti-head { display: flex; align-items: baseline; gap: 5px; font-size: 12px; font-weight: 600; }
.target-item .ti-id { color: var(--text-dim); font-weight: 500; }
.target-item .ti-name { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.target-item .ti-threat {
  flex: 0 0 auto;
  padding: 0 4px;
  border-radius: 3px;
  background: #eef1f5;
  color: #4c5866;
  font-size: 10px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}
.target-item .ti-threat.lv-1 { background: #e6f4ec; color: var(--lv1); }
.target-item .ti-threat.lv-2 { background: #fbf1d8; color: var(--lv2); }
.target-item .ti-threat.lv-3 { background: #fbe6d4; color: var(--lv3); }
.target-item .ti-threat.lv-4 { background: #fadbda; color: var(--lv4); }

.target-item .ti-sub { font-size: 11px; color: var(--text-dim); font-variant-numeric: tabular-nums; }
.target-item .ti-meta { font-size: 11px; color: var(--text-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------------- hotspot table ---------------- */

.hotspot-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 11px;
  display: block;
  overflow-y: auto;
  flex: 1 1 auto;
}

.hotspot-table thead { display: table; width: 100%; table-layout: fixed; }
.hotspot-table tbody { display: table; width: 100%; table-layout: fixed; }

.hotspot-table thead th {
  position: sticky;
  top: 0;
  background: var(--panel);
  color: var(--text-dim);
  font-weight: 600;
  text-align: left;
  padding: 3px 4px;
  border-bottom: 1px solid var(--border);
}

.hotspot-table td { padding: 3px 4px; border-bottom: 1px solid #f0f3f8; font-variant-numeric: tabular-nums; }
.hotspot-table tbody tr { cursor: pointer; }
.hotspot-table tbody tr:hover { background: #f2f6fd; }
.hotspot-table tbody tr.active { background: #e8f1ff; }
.hotspot-table th:nth-child(1), .hotspot-table td:nth-child(1) { width: 7%; }
.hotspot-table th:nth-child(2), .hotspot-table td:nth-child(2) { width: 26%; }
.hotspot-table th:nth-child(3), .hotspot-table td:nth-child(3) { width: 34%; }
.hotspot-table th:nth-child(4), .hotspot-table td:nth-child(4) { width: 14%; }
.hotspot-table th:nth-child(5), .hotspot-table td:nth-child(5) { width: 19%; }

/* 主导意图列：与"TS"列并列，一个说多紧张、一个说在打什么 */
.hs-intent { line-height: 1.35; font-size: 10.5px; color: #12325c; }

.hs-range { line-height: 1.35; white-space: nowrap; font-size: 10.5px; }
.hs-name { line-height: 1.35; }

.lv-cell { font-weight: 600; }
.lv-cell.lv1, .lv-1 { color: var(--lv1); }
.lv-cell.lv2, .lv-2 { color: var(--lv2); }
.lv-cell.lv3, .lv-3 { color: var(--lv3); }
.lv-cell.lv4, .lv-4 { color: var(--lv4); }

/* ---------------- globe ---------------- */

.globe-wrap { position: relative; flex: 1 1 auto; min-width: 0; }
#cesiumContainer { position: absolute; inset: 0; }

/* 图例：地图**右下角**（原在左下，中途挪到左上，按反馈定为右下）。
   右下角此前被「区域级TS」横幅占着，横幅移除后空出来，正好给图例。
   注：右上角是鸟瞰图 + 指南针，左下角是比例尺，底部居中留给视点读数。 */
.legend {
  position: absolute;
  right: 12px;
  bottom: 12px;
  display: flex;
  gap: 14px;
  padding: 6px 10px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: rgba(255, 255, 255, .92);
  font-size: 11px;
}

.legend span { display: flex; align-items: center; gap: 5px; }
.swatch { display: inline-block; width: 10px; height: 10px; border-radius: 2px; }
.swatch.red { background: var(--red); }
.swatch.blue { background: var(--blue); }
.swatch.line { width: 14px; height: 2px; border-radius: 0; background: #f0a020; }
.swatch.hotspot { background: rgba(216, 74, 58, .30); border: 1px solid #d84a3a; }

/* 瓦片加载进度徽标（"正在加载瓦片… 剩余 N"）已按需求删除（2026-10-17）。
   进度回调仍保留在 app.js 的 onTileLoadProgress()：它还负责底图空闲判定
   （预加载的调度闸门）与空闲后创建鸟瞰图。 */

.hint {
  position: absolute;
  left: 12px;
  top: 12px;
  padding: 5px 9px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: rgba(255, 255, 255, .92);
  font-size: 11px;
  color: var(--text-dim);
}

/* ---------------- 区域级TS横幅：已移除 ----------------
   地图右下角那条横幅整个去掉了（读数移进右栏「区域TS」栏）。这里原本的
   `.level-banner` / `.lb-*` 规则随之删除——留着一段指向不存在元素的样式，
   下一个人会以为界面上还有这个模块，改样式时白费功夫。 */

/* ---------------- 右侧「目标TS栏」的样式 ----------------
   注意：原有的 `.tp-kv` / `.tp-reason` / `.tp-intent` / `.tpi-*` / `.tp-fold`
   仍然由 intentUi.js 生成的意图集合块使用，本轮只是换了容器，因此全部保留。
   浮动的 `.target-panel` / `.tp-head` / `.tp-title` / `.tp-close` / `.tp-body`
   已随浮动面板一起移除。

   term-replace:keep-start
   命名提示（术语替换的遗留歧义）：下面的 `.ts-*` 前缀是「目标状态栏」的 CSS 命名
   空间，与全局术语替换「态势 → TS」**同形但无关**——读 `.ts-head` 时不要按
   "TS = 态势"去理解。类名保持不动：它们是选择器而不是术语出现位置，改名会牵连 JS
   里的字符串与既有样式表，收益为零。
   本段引用的原词是**说明文字**，不是漏改，故用标记圈起来供工具复扫时跳过。
   term-replace:keep-end */

.ts-body { display: flex; flex-direction: column; gap: 8px; }

.ts-empty {
  padding: 8px 9px;
  border: 1px dashed var(--border);
  border-radius: 4px;
  color: var(--text-dim);
  font-size: 11.5px;
  line-height: 1.5;
}

.ts-head { display: flex; gap: 10px; align-items: center; }
.ts-head .ts-sym { width: 34px; height: 34px; flex: 0 0 auto; }
.ts-id { display: flex; flex-direction: column; min-width: 0; }
.ts-id b { font-size: 13px; }
.ts-id > span { font-size: 11.5px; color: var(--text); }
.ts-id .ts-sub { font-size: 10.5px; color: var(--text-dim); }

.ts-sec { border-top: 1px dashed var(--border); padding-top: 6px; }
.ts-sec h4 {
  margin: 0 0 4px;
  font-size: 11px;
  font-weight: 700;
  color: var(--accent);
  letter-spacing: .4px;
}
.ts-kv { display: flex; justify-content: space-between; gap: 8px; padding: 1.5px 0; font-size: 11.5px; }
.ts-kv span { color: var(--text-dim); flex: 0 0 auto; }
.ts-kv b { font-weight: 500; text-align: right; font-variant-numeric: tabular-nums; }
.ts-note { margin-top: 3px; font-size: 10px; color: var(--text-dim); }
.ts-fold { border-top: 1px dashed var(--border); padding-top: 6px; }
.ts-fold > summary {
  cursor: pointer;
  font-size: 11px;
  font-weight: 700;
  color: var(--accent);
  letter-spacing: .4px;
  user-select: none;
  list-style: none;
}
.ts-fold > summary::-webkit-details-marker { display: none; }
.ts-fold > summary::before { content: '▸'; display: inline-block; width: 11px; }
.ts-fold[open] > summary::before { transform: rotate(90deg); }
.ts-fold[open] > summary { margin-bottom: 4px; }

/* ---------------- 右侧「整体TS栏」的样式 ----------------
   档位唯一来源是 targetStatus.js；图标本体保持阵营原色，状态由**紧贴图标
   底部的血条**颜色/长度表达，损毁另有暗色叉遮罩与空槽。 */

.os-body { display: flex; flex-direction: column; gap: 8px; }

.os-side { border: 1px solid var(--border); border-radius: 4px; overflow: hidden; }
.os-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 4px 8px;
  font-size: 11.5px;
}
.os-red .os-head { background: #fbeceb; border-bottom: 1px solid #f0d3d0; }
.os-blue .os-head { background: #ebf1fb; border-bottom: 1px solid #d2dff2; }
.os-title { font-weight: 700; }
.os-red .os-title { color: var(--red); }
.os-blue .os-title { color: var(--blue); }
.os-sub { font-size: 10px; color: var(--text-dim); }

.os-row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 3px 8px;
  border-bottom: 1px dashed #eef2f7;
}
.os-row:last-child { border-bottom: none; }
.os-fam {
  flex: 0 0 82px;
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 10.5px;
  color: var(--text-dim);
}
.os-fam-ico { width: 15px; height: 15px; flex: 0 0 auto; }
.os-icons { flex: 1 1 auto; display: flex; flex-wrap: wrap; gap: 3px 2px; }
/* 一个目标 = 图标 + 血条 + 状态标记。图标本体不改色，类型与阵营始终可辨。 */
.os-unit {
  position: relative;
  width: 20px;
  padding-top: 1px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.os-icon { width: 18px; height: 18px; display: block; }
.os-hp {
  width: 18px;
  height: 4px;
  margin-top: -1px;           /* 抵掉军标资产底部的透明留白，视觉上紧贴图标 */
  box-sizing: border-box;
  background: #e4e9f0;
  border: 1px solid #6b7688;
  border-radius: 1px;
  overflow: hidden;
}
.os-hp > b { display: block; height: 100%; width: 100%; background: #2E9E5B; }
.os-unit.os-s1 .os-hp > b { background: #D9A514; }
.os-unit.os-s2 .os-hp > b { background: #E2662A; }
.os-unit.os-s3 .os-hp { background: #3f4652; }
.os-unit.os-s3 .os-hp > b { background: #4B5563; }
/* 损毁：图标压暗 + 叉形遮罩；血条为空槽。仍保留轮廓，避免"整个目标消失"。 */
.os-unit.os-s3 .os-icon { opacity: .45; filter: grayscale(1); }

/* 损毁遮罩：只在图标上叠叉。受损/严重受损不再画环或角标——状态只由
   紧贴图标底部的血条颜色与长度表达（2026-10-21 用户要求）。 */
.os-unit.os-s3::after {
  content: "";
  position: absolute;
  top: 1px;
  left: 1px;
  width: 18px;
  height: 18px;
  background:
    linear-gradient(45deg, transparent 43%, #B91C1C 43%, #B91C1C 57%, transparent 57%),
    linear-gradient(-45deg, transparent 43%, #B91C1C 43%, #B91C1C 57%, transparent 57%);
  pointer-events: none;
}
.os-count { flex: 0 0 auto; font-size: 10.5px; color: var(--text-dim); }
.os-count b { font-size: 12px; color: var(--text); font-variant-numeric: tabular-nums; }

.os-empty { padding: 6px 8px; font-size: 11px; color: var(--text-dim); }

/* 每方状态摘要：一眼看出这一侧还有多少能打的。 */
.os-sum {
  padding: 2px 8px 3px;
  border-bottom: 1px dashed #eef2f7;
  font-size: 9.5px;
  color: var(--text-dim);
  font-variant-numeric: tabular-nums;
}

.os-legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 10px;
  padding-top: 2px;
  font-size: 10px;
  color: var(--text-dim);
}
.os-legend span { display: flex; align-items: center; gap: 4px; }
.os-legend-note { font-style: italic; }
.os-sw {
  display: inline-block;
  width: 9px;
  height: 5px;
  border-radius: 1px;
  border: 1px solid #6b7688;
  background: #c8352c;
}
.os-sw.os-s0 { background: #2E9E5B; }
.os-sw.os-s1 { background: #D9A514; }
.os-sw.os-s2 { background: #E2662A; }
.os-sw.os-s3 { background: #4B5563; }

/* 目标TS栏里的战损读数：用同色系中更深的颜色，保证白底上的对比度。 */
.ts-dmg.os-s0 { color: #2E9E5B; }
.ts-dmg.os-s1 { color: #B8860B; }
.ts-dmg.os-s2 { color: #C24E14; }
.ts-dmg.os-s3 { color: #B91C1C; }

/* ---------------- 右侧「区域TS栏」的样式 ---------------- */

.region-head { margin-bottom: 4px; }
.region-level {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px;
  padding: 4px 0 2px;
  border-top: 1px dashed var(--border);
}
.rl-value { font-size: 12px; font-weight: 700; }
/* 区域等级配色：与地图横幅同源（--lv1..--lv4）。
   注意 `.lv1` 这类类在全局只对 `.lv-cell` 生效（`.lb-value` 那份随横幅一起删了），所以这里必须显式声明，
   否则右栏的等级会一直是无色的。 */
.rl-value.lv1 { color: var(--lv1); }
.rl-value.lv2 { color: var(--lv2); }
.rl-value.lv3 { color: var(--lv3); }
.rl-value.lv4 { color: var(--lv4); }
.rl-intent, .rl-phase {
  padding: 1px 6px;
  border-radius: 3px;
  font-size: 10.5px;
}
.rl-intent { background: #eaf1fb; color: #12325c; }
.rl-phase { background: #eef4ea; color: #3d5a2f; }
.region-note { font-size: 10.5px; color: var(--text-dim); line-height: 1.45; margin-bottom: 4px; }

/* 左栏图层管理的批量操作按钮（原在顶栏「图层管理」下拉里） */
.layer-cmds { display: flex; gap: 4px; flex: 0 0 auto; }
.layer-cmds .mini { flex: 1 1 auto; font-size: 11px; padding: 3px 4px; }

/* 播放栏右侧的倍速选择 */
.transport-right .tr-speed {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  color: var(--text-dim);
}
.transport-right select { font-size: 11px; padding: 1px 2px; }

/* 播放、复位、倍速已移到前进/后退**左边**（时间轴是主轴，这些是它的操作）。
   播放组与步进组之间加一道竖线：否则"▶ 播放"和"▶ 步进"两个三角紧挨着，极易看混。 */
.transport-left { flex-wrap: nowrap; }
/* 按钮文字不许换行、也不许被压缩。窄屏上把播放/复位移到左边后这一组变长，
   默认的 flex-shrink 会把按钮挤到只剩一个字宽，"▶ 播放"被拆成竖排两行。 */
.transport-left button,
.transport-left select,
.transport-left .tr-sep,
.transport-right button { flex: 0 0 auto; white-space: nowrap; }
.transport-left .tr-speed {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  color: var(--text-dim);
  white-space: nowrap;
  flex: 0 0 auto;
}
.transport-left select { font-size: 11px; padding: 1px 2px; }
.tr-sep {
  display: inline-block;
  width: 1px;
  height: 16px;
  background: var(--border);
  margin: 0 2px;
  flex: 0 0 auto;
}

.tp-symbol { display: flex; gap: 10px; align-items: center; padding-bottom: 8px; border-bottom: 1px dashed var(--border); }
.tp-symbol img { width: 44px; height: 44px; flex: 0 0 auto; }
.tp-symbol-meta { display: flex; flex-direction: column; min-width: 0; }
.tp-symbol-meta b { font-size: 13px; }
.tp-symbol-meta span { font-size: 11px; color: var(--text-dim); }

.tp-section { padding-top: 8px; }
.tp-section h4 {
  margin: 0 0 4px;
  font-size: 11px;
  font-weight: 700;
  color: var(--accent);
  letter-spacing: .4px;
}

/* ---------------- 意图摘要（战术意图 22 种本体口径） ----------------
   类名一律 tpi-* 前缀：`.ti-head` / `.ti-name` / `.ti-threat` 等已被
   目标列表条目（.target-item）占用，复用同名会互相污染样式。 */

.tp-intent {
  margin-top: 8px;
  padding: 8px;
  border-radius: 4px;
  background: #f3f7fd;
  border-left: 3px solid var(--accent);
}

.tpi-head {
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-size: 11px;
  font-weight: 700;
  color: var(--accent);
  letter-spacing: .4px;
}

.tpi-src { margin-left: auto; font-weight: 400; font-size: 10px; color: var(--text-dim); }

.tpi-primary {
  margin-top: 4px;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.2;
  color: #12325c;
}

.tpi-primary-none { color: var(--text-dim); font-size: 14px; }

.tpi-sub { margin-top: 2px; font-size: 11px; color: var(--text-dim); }

/* 判定状态徽章：刻意与威胁度的红橙黄绿分开——状态说的是"证据够不够"，
   不是"危不危险"，同色会让人把"证据不足"读成"低威胁"。 */
.tpi-badge {
  display: inline-block;
  margin-top: 5px;
  padding: 1px 6px;
  border-radius: 8px;
  font-size: 10px;
  border: 1px solid;
}
.ist-bg { color: #5a6473; border-color: #c3ccd9; background: #eef1f5; }
.ist-unknown { color: #7a6a3a; border-color: #d9cfa3; background: #faf6e8; }
.ist-ambiguous { color: #7a4a6a; border-color: #d9b6cf; background: #fbf0f7; }
.ist-ooo { color: #5a4a7a; border-color: #c2b6dd; background: #f2eefb; }

.tpi-note { margin-top: 4px; font-size: 10.5px; color: #6b5a72; line-height: 1.45; }

.tpi-set-title {
  margin-top: 7px;
  padding-top: 5px;
  border-top: 1px dashed #cfdaea;
  font-size: 10.5px;
  color: var(--text-dim);
}

.tpi-group { margin-top: 3px; }
.tpi-group-name { display: block; font-size: 10px; color: var(--text-dim); margin-bottom: 2px; }

.tpi-chip {
  display: inline-flex;
  align-items: baseline;
  gap: 3px;
  margin: 0 3px 3px 0;
  padding: 1px 6px;
  border-radius: 3px;
  background: #fff;
  border: 1px solid #c8d6e8;
  font-size: 11px;
  color: #12325c;
}

/* 次要意图弱化但保留：本体标 secondary-only 的不能当主答案，但确实在发生。 */
.tpi-chip-sec { opacity: .72; border-style: dashed; background: #fbfcfe; }
.tpi-role { font-size: 9px; color: var(--text-dim); font-style: normal; }
.tpi-approx { font-size: 10px; color: #b06a1f; font-style: normal; }

.tpi-evidence { margin-top: 6px; }
.tpi-evidence > summary {
  cursor: pointer;
  font-size: 10.5px;
  color: var(--accent);
  user-select: none;
}
.tpi-ev-item { margin-top: 4px; font-size: 11px; }
.tpi-ev-item b { color: #12325c; }
.tpi-ev-line { color: var(--text-dim); line-height: 1.45; padding-left: 2px; }

.tpi-missing {
  margin-top: 5px;
  padding: 4px 6px;
  border-radius: 3px;
  background: #fdf6ec;
  color: #8a6a3a;
  font-size: 10.5px;
  line-height: 1.45;
}

.tpi-empty { margin-top: 4px; font-size: 11px; color: var(--text-dim); }

/* 目标面板里的折叠区：一/二/三级明细保留但与意图摘要分层，默认不全展开抢视线 */
.tp-fold { padding-top: 8px; }
.tp-fold > summary {
  cursor: pointer;
  font-size: 11px;
  font-weight: 700;
  color: var(--accent);
  letter-spacing: .4px;
  user-select: none;
  list-style: none;
}
.tp-fold > summary::-webkit-details-marker { display: none; }
.tp-fold > summary::before {
  content: '▸';
  display: inline-block;
  width: 11px;
  transition: transform .12s ease;
}
.tp-fold[open] > summary::before { transform: rotate(90deg); }
.tp-fold[open] > summary { margin-bottom: 4px; }

.tp-kv { display: flex; justify-content: space-between; gap: 8px; padding: 1.5px 0; font-size: 11.5px; }
.tp-kv span { color: var(--text-dim); flex: 0 0 auto; }
.tp-kv b { font-weight: 500; text-align: right; font-variant-numeric: tabular-nums; }

.tp-reason {
  margin-top: 4px;
  padding: 4px 6px;
  border-radius: 3px;
  background: #f4f7fb;
  color: var(--text-dim);
  font-size: 11px;
  line-height: 1.5;
}

/* ---------------- transport bar ---------------- */

.transport {
  flex: 0 0 auto;
  height: 42px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 14px;
  background: var(--panel);
  border-top: 1px solid var(--border);
}

.transport-left, .transport-right { display: flex; align-items: center; gap: 8px; font-size: 12px; }

/* 这条 `width: 30px` 是播放栏还只有 ▶◀ 两个方形步进按钮时定的。播放/复位搬进来后
   它们继承同一个类，被硬压成 30px —— "▶ 播放" 直接裁掉只剩箭头。所以方形尺寸改为
   只作用于步进按钮，播放/复位按内容自适应。 */
.transport button {
  height: 24px;
  border: 1px solid var(--border);
  border-radius: 3px;
  background: #f7f9fc;
  cursor: pointer;
}
#btnStepBack, #btnStepFwd { width: 30px; }
#btnPlay, #btnReset { width: auto; min-width: 56px; padding: 0 8px; }

.transport button:hover { background: #eef2f8; }

#timeline { flex: 1 1 auto; }

#tickLabel, #clockLabel { color: var(--text-dim); font-variant-numeric: tabular-nums; }

/* ---------------- 图层管理分组（可折叠） ---------------- */

.layer-group > summary {
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-dim);
  letter-spacing: .4px;
  list-style: none;
}

.layer-group > summary::-webkit-details-marker { display: none; }

.layer-group > summary::before {
  content: '▸';
  display: inline-block;
  width: 10px;
  margin-right: 4px;
  transition: transform .12s ease;
}

.layer-group[open] > summary::before { transform: rotate(90deg); }
.layer-group[open] > summary { margin-bottom: 6px; }

/* ---------------- 地图组件（指南针 / 视点坐标 / 比例尺） ----------------
 *
 * Cesium 1.145 没有内置指南针与比例尺，三项均为自建叠加层。定位在中间
 * 窗口左上竖向排布：左下已被图例与鸟瞰图占用，右上被目标信息面板占用。
 * z-index 取 36，低于目标面板的 40；视点坐标与比例尺不接收鼠标事件。
 */

/* 指南针：移到右上角、鸟瞰图下方（原在左上）。
   z-index 36 保持；目标面板已移除，右上角不再有 40 层的面板与之冲突。 */
.map-comp {
  position: absolute;
  right: 12px;
  top: 210px;              /* 全局鸟瞰 190 + 间距 8 + 12 */
  width: 84px;
  height: 84px;
  z-index: 36;
  cursor: pointer;
}

.map-comp svg { display: block; width: 100%; height: 100%; }

#compRose {
  transform-origin: 50% 50%;
  /* 10 Hz 更新，加过渡让转动看起来连续而不是一跳一跳 */
  transition: transform .1s linear;
}

/* 视点经纬高：底部居中、单行。 */
.map-viewpoint {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 12px;
  max-width: calc(100% - 24px);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  z-index: 36;
  pointer-events: none;
  padding: 5px 10px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: rgba(255, 255, 255, .92);
  font-size: 11px;
}

.map-viewpoint span { color: var(--text-dim); }
.map-viewpoint b { font-weight: 500; font-variant-numeric: tabular-nums; }

/* 复位视角：顶栏「视图」菜单移除后就近放在指南针下方，保留原 id。 */
.map-locate {
  position: absolute;
  right: 12px;
  top: 302px;              /* 指南针 210 + 84 + 间距 8 */
  z-index: 36;
  padding: 4px 10px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: rgba(255, 255, 255, .92);
  font-size: 11.5px;
  cursor: pointer;
}
.map-locate:hover { background: #eef2f8; }

/* 比例尺：左下角（原在左上）。 */
.map-scalebar {
  /* 横条**宽度固定**（可配置默认值）。原先是 JS 按 `meters / mPerPx` 写宽度，
     条长来回伸缩，读数时反而更难对照。条长固定后，标签就是唯一定义比例的东西，
     所以 app.js 那边改用精确距离而不是 1/2/5 取整 —— 取整会让"条长 ⇔ 文本"
     最多差约 ±40%（n 略低于 3.5 时取 2），那对一个测量参照是不能接受的。 */
  --sb-width: 100px;
  position: absolute;
  left: 12px;
  bottom: 12px;
  z-index: 36;
  pointer-events: none;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: rgba(255, 255, 255, .92);
  font-size: 11px;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

/* 标绘添加面板：与左栏其它控件同一套观感（复用 .mini / .switch-note）。
   两条路径共用上面这组选择，所以放在同一块里。 */
/* 结构化文本注册：粘贴框与格式下拉。与左栏标绘面板同一套观感。 */
.sit-select {
  font: inherit; font-size: 11px; padding: 2px 4px;
  border: 1px solid var(--border); border-radius: 3px; background: #fff; color: var(--text);
}
.sit-textarea {
  width: 100%; box-sizing: border-box; font-family: ui-monospace, Consolas, monospace;
  font-size: 11px; line-height: 1.4; padding: 4px 6px; resize: vertical;
  border: 1px solid var(--border); border-radius: 3px; background: #fff; color: var(--text);
}

/* 动态图层管理面板（web/src/layerPanel.js 生成）。
   沿用 .layer-group / .check 的既有观感，只补"数量徽标 / 展开箭头 / 要素行"。 */
.lp-row { display: flex; align-items: center; gap: 4px; }
.lp-check { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 5px; }
.lp-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lp-count {
  flex: 0 0 auto; min-width: 18px; text-align: center;
  padding: 0 4px; border-radius: 8px;
  background: #e8eef7; color: #47566b;
  font-size: 10px; font-variant-numeric: tabular-nums;
}
.lp-count[data-zero="1"] { opacity: .45; }
.lp-feed {
  flex: 0 0 auto; padding: 0 4px; border-radius: 3px;
  font-size: 10px; color: #fff; cursor: help;
}
.lp-feed-hidden { background: #8a94a6; }
.lp-feed-failed { background: #c0392b; }
.lp-feed-pending { background: #d68910; }
.lp-feed-unsupported { background: #7f8c8d; }
.lp-expand {
  flex: 0 0 auto; width: 18px; height: 18px; padding: 0; line-height: 1;
  border: 1px solid var(--border); border-radius: 3px;
  background: #fff; color: var(--text-dim); cursor: pointer; font-size: 10px;
}
.lp-expand:hover { background: #eef2f8; }

/* 要素列表：左侧缩进一条细线，表示"属于上面那一层" */
.lp-elems {
  margin: 2px 0 4px 10px; padding-left: 8px;
  border-left: 2px solid var(--border);
  display: flex; flex-direction: column; gap: 1px;
}
.lp-elem { display: flex; align-items: center; gap: 4px; font-size: 11px; }
.lp-elem-toggle { flex: 0 0 auto; width: 12px; height: 12px; margin: 0; }
.lp-elem-text { flex: 1 1 auto; min-width: 0; display: flex; align-items: baseline; gap: 5px; }
.lp-elem-text b {
  font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.lp-elem-sub, .lp-elem-note {
  flex: 0 0 auto; font-style: normal; font-size: 10px; color: var(--text-dim);
}
.lp-elem-note { color: #b06a00; }
.lp-act {
  flex: 0 0 auto; width: 18px; height: 18px; padding: 0; line-height: 1;
  border: 1px solid transparent; border-radius: 3px;
  background: transparent; color: var(--text-dim); cursor: pointer; font-size: 11px;
}
.lp-act:hover { background: #eef2f8; border-color: var(--border); color: var(--text); }
.lp-empty { font-size: 10px; color: var(--text-dim); padding: 1px 0; }

/* 要素的行内编辑表单：保持地图可见（弹模态框会盖住整张图，没法边看态势边改）。 */
.lp-form {
  margin: 3px 0 4px 16px; padding: 5px 6px;
  border: 1px solid var(--border); border-radius: 3px;
  background: #f7f9fc;
  display: flex; flex-direction: column; gap: 3px;
}
.lp-form-row { display: flex; align-items: center; gap: 6px; font-size: 11px; }
.lp-form-row > span { flex: 0 0 52px; color: var(--text-dim); }
.lp-form-row > input,
.lp-form-row > select { flex: 1 1 auto; min-width: 0; }
.lp-elem-box { display: block; }
.plot-add {  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px dashed var(--border);
}
.plot-row { display: flex; gap: 4px; }
.plot-row > * { flex: 1 1 0; min-width: 0; }
.plot-sel,
.plot-input {
  width: 100%;
  box-sizing: border-box;
  font: inherit;
  font-size: 11px;
  padding: 2px 4px;
  border: 1px solid var(--border);
  border-radius: 3px;
  background: #fff;
  color: var(--text);
}
.plot-input { resize: vertical; }

/* 标绘面板：从菜单栏【标绘】下拉打开（原先在左栏的 details 里）。
   `.plot-add` 顶部那条虚线是给"标题下方的分节"用的，放进下拉里是多余的；
   宽度取 268px，与 .menu-list 的 380px 相比更贴合这几个窄控件。 */
.menu-plot-panel { width: 268px; padding: 8px; }
.menu-plot-panel .plot-add { margin-top: 0; padding-top: 0; border-top: 0; }
.plot-list { display: flex; flex-direction: column; gap: 2px; margin-top: 4px; }
.plot-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  font-size: 11px;
  color: var(--text-dim);
}
.plot-empty { font-size: 11px; color: var(--text-dim); padding: 2px 0; }

.sb-bar {
  width: var(--sb-width);
  height: 7px;
  box-sizing: border-box;
  border: 1px solid #4c5866;
  border-top: none;
  background: rgba(255, 255, 255, .6);
}

.map-comp.hidden,
.map-viewpoint.hidden,
.map-scalebar.hidden { display: none; }

@media (max-width: 1280px) {
  .map-comp { width: 72px; height: 72px; top: 180px; }
  .map-locate { top: 260px; }
  .map-viewpoint { top: 126px; min-width: 166px; font-size: 10.5px; }
  .map-scalebar { top: 188px; }
}

/* 极矮窗口优先保指南针与比例尺 */
@media (max-height: 560px) {
  .map-viewpoint { display: none; }
}

/* ---------------- 鸟瞰图（第二个 Cesium 2D 视图） ----------------
 *
 * 放左下角：右上被目标信息面板占用，左上被地图组件竖向栈占用，右下被区域级
 * TS横幅占用。z-index 35 低于目标面板的 40。
 */

/* 鸟瞰图：移到右上角（原在左下）。目标面板已移除，右上角空出来给它。
   指南针与复位视角依次排在它下方（见 .map-comp / .map-locate 的 top）。 */
.overview-wrap {
  position: absolute;
  right: 12px;
  top: 12px;
  width: 268px;
  height: 190px;
  display: flex;
  flex-direction: column;
  border: 1px solid #b9c6d8;
  border-radius: 6px;
  overflow: hidden;
  background: rgba(255, 255, 255, .96);
  box-shadow: 0 8px 22px rgba(20, 34, 54, .20);
  z-index: 35;
}

.overview-wrap.hidden { display: none; }

/* 组件上方不再有标题/说明栏；关闭按钮浮在地图右上角（2026-10-21 用户要求）。 */
.ov-close {
  position: absolute;
  top: 3px;
  right: 3px;
  z-index: 2;
  width: 18px;
  height: 18px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(80, 100, 130, .45);
  border-radius: 3px;
  background: rgba(255, 255, 255, .82);
  color: #4a5568;
}
.ov-close:hover { background: #fff; }

/* 状态图例：与「整体TS」共用同一组档位颜色（.os-s*），避免两处语义分叉。 */
.ov-legend {
  flex: 0 0 auto;
  height: 18px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 8px;
  border-top: 1px solid var(--border);
  background: #f7f9fc;
  font-size: 9.5px;
  color: var(--text-dim);
  white-space: nowrap;
}
.ov-legend span { display: flex; align-items: center; gap: 3px; }
.ov-legend .ov-note { margin-left: auto; font-style: italic; }
.ov-sw {
  display: inline-block;
  width: 9px;
  height: 5px;
  border-radius: 1px;
  border: 1px solid #6b7688;
}
.ov-sw.os-s0 { background: #2E9E5B; }
.ov-sw.os-s1 { background: #D9A514; }
.ov-sw.os-s2 { background: #E2662A; }
.ov-sw.os-s3 { background: #4B5563; }

.ov-btn {
  border: 0;
  background: none;
  cursor: pointer;
  color: #8a94a4;
  font-size: 13px;
  line-height: 1;
}

.ov-canvas { flex: 1 1 auto; position: relative; }
.ov-canvas > .cesium-viewer { position: absolute; inset: 0; }

/* 组件底部不再显示 Cesium / 影像归属文字（用户要求）。
   JS 里还会把 creditContainer 直接隐藏，这里作为加载时序与样式双重兜底。 */
#overviewContainer .cesium-widget-credits {
  display: none !important;
}

@media (max-width: 1280px) {
  .overview-wrap { width: 200px; height: 160px; }
  /* 200px 宽放不下 4 档 + 注释，缩字号并隐藏注释，避免被裁切。 */
  .ov-legend { gap: 5px; padding: 0 6px; font-size: 9px; }
  .ov-legend .ov-note { display: none; }
}

/* ---------------- TS模态框（输入 / 管理 / 下载） ----------------

 * 三标签页共用一个模态框：三件事都围绕"当前TS"，拆成三个弹窗只会让人找不到。
 * 中间地球区域已有很多叠加层，所以模态框覆盖全屏并加半透明遮罩。
 */

.modal {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(16, 26, 40, .42);
}

.modal.hidden { display: none; }

.modal-panel {
  width: min(880px, calc(100vw - 48px));
  max-height: calc(100vh - 72px);
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 18px 48px rgba(16, 26, 40, .30);
  overflow: hidden;
}

.modal-head {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 8px 0 14px;
  border-bottom: 1px solid var(--border);
  background: #f3f7fd;
}

.modal-tabs { flex: 1 1 auto; display: flex; gap: 2px; }

.modal-tab {
  border: 0;
  background: none;
  cursor: pointer;
  padding: 11px 14px;
  font-size: 12.5px;
  color: var(--text-dim);
  border-bottom: 2px solid transparent;
}

.modal-tab.active { color: var(--accent); border-bottom-color: var(--accent); font-weight: 600; }

.modal-close {
  border: 0;
  background: none;
  cursor: pointer;
  font-size: 20px;
  line-height: 1;
  color: #8a94a4;
  padding: 6px 8px;
}

.modal-body { flex: 1 1 auto; overflow: auto; padding: 14px 16px 18px; font-size: 12px; }

.sit-section { margin-bottom: 18px; }

.sit-section > h3 {
  margin: 0 0 8px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-dim);
  letter-spacing: .4px;
}

.sit-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 8px; }

.sit-row > label { display: inline-flex; align-items: center; gap: 5px; }

.sit-row input[type="number"],
.sit-row input[type="text"],
.sit-row select {
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 4px 6px;
  font-size: 12px;
  font-family: inherit;
  color: var(--text);
  background: #fff;
}

.sit-row input[type="number"] { width: 96px; }

.sit-hint { color: var(--text-dim); font-size: 11.5px; line-height: 1.6; }

.sit-table { width: 100%; border-collapse: collapse; font-size: 11.5px; }
.sit-table th, .sit-table td { padding: 5px 6px; border-bottom: 1px solid var(--border); text-align: left; }
.sit-table th { color: var(--text-dim); font-weight: 500; }
.sit-table input, .sit-table select { width: 100%; box-sizing: border-box; }

.sit-actions { display: flex; gap: 8px; margin-top: 14px; }

.sit-error {
  padding: 10px 12px;
  border: 1px solid #e0b4b4;
  border-radius: 4px;
  background: #fdf2f2;
  color: #a33;
  font-size: 12px;
}

.sit-error pre { margin: 8px 0 0; font-size: 11px; white-space: pre-wrap; color: #8a5a5a; }

.sit-picking {
  outline: 2px dashed var(--accent);
  outline-offset: -2px;
}

/* ---------------- 空态占位与菜单分隔 ---------------- */

.empty-state {
  padding: 16px 10px;
  color: var(--text-dim);
  font-size: 11.5px;
  line-height: 1.7;
  text-align: center;
}

.hs-empty {
  padding: 10px 8px;
  color: var(--text-dim);
  text-align: center;
}

.menu-sep {
  height: 1px;
  margin: 6px 4px;
  background: #33445c;
}

.menu-item-quiet .mi-head { font-weight: 500; }

/* 顶栏下拉：图层管理与视图用更窄的菜单 */
.menu-list-narrow { width: 268px; }

/* 菜单按钮的禁用态（鸟瞰图尚未接入时占位） */
.topbar-actions button:disabled { opacity: .45; cursor: not-allowed; }

/* 顶栏下拉：图层管理与视图用更窄的菜单 */
.menu-list-narrow { width: 268px; }

/* 菜单按钮的禁用态（鸟瞰图尚未接入时占位） */
.topbar-actions button:disabled { opacity: .45; cursor: not-allowed; }

/* 候选集合大小：CES 的核心读数，收缩过程要一眼可见 */
.tpi-setbar {
  margin-top: 6px;
  padding-top: 5px;
  border-top: 1px dashed #cfdaea;
  font-size: 11px;
  color: #12325c;
}
/* 沿用上一次评分的标注：步长采样下不标注会让人以为每帧都在重新判定 */
.tpi-carry {
  margin-top: 3px;
  padding: 2px 5px;
  border-radius: 3px;
  background: #f4f6f9;
  color: var(--text-dim);
  font-size: 10px;
}
/* 意图标签内的概率/权重百分比 */
.tpi-pct {
  font-size: 9.5px;
  font-style: normal;
  color: #5a6b80;
  margin-left: 3px;
}

/* ---------------- 目标意图栏：只有「意图 + 置信度」的紧凑列表 ----------------
   按反馈把这一栏收敛成"可能是哪几个意图、各有多可信"两件事。每行 = 意图名 +
   置信度条 + 百分比，按置信度降序。 */
.tpi-row {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 2.5px 0;
}
.tpi-row .tpi-name {
  flex: 0 0 auto;
  min-width: 62px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text);
}
.tpi-row .tpi-bar {
  flex: 1 1 auto;
  height: 7px;
  border-radius: 3px;
  background: #e6ecf4;
  overflow: hidden;
}
.tpi-row .tpi-bar > i {
  display: block;
  height: 100%;
  background: var(--accent);
  border-radius: 3px;
}
.tpi-row .tpi-pct {
  flex: 0 0 34px;
  text-align: right;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  margin-left: 0;
}

/* 作战阶段（.rl-phase）的配色在 .region-level 那一节里定义——横幅移除后这里不再有
   第二份 .lb-phase 规则。 */