/* ============================================================
   无人机实时飞行图层（20 架 · 沿无人机航路巡航）
   —— 仅「综合态势 / 低空数字资源」场景可见（.off 淡出并停机）
   —— 视觉基调：达索深蓝 + 高饱和电光青（机体本体）点缀琥珀警示色，
      与平台既有图层语言一致；毛玻璃信息面板沿用 #as-tip/#rt-tip 配方
   —— 叠加左翼航空器信息面板 #ac-panel（统计维度 + 机载数据色块，可收起/展开）
   ============================================================ */

/* —— 配色令牌（本轮重挑）：主色由「宝蓝 + 浅蓝白」的浑浊三蓝，改为高饱和「电光青」——
   与航路宝蓝 #5B8DEF 拉开色相（青 vs 蓝，暗底图上不糊在一起），机架压成饱和深青做体积暗部，
   机身亮部走青白渐变；琥珀只留给机头导航灯与 hover/选中态（平台警示语义不外溢）。
   --dr-cyan     主色：桨盘 / 光晕 / 尾迹（高饱和高亮度）
   --dr-cyan-hi  高光：桨叶旋扫弧 / 机身亮部 / 中脊 / 云台镜芯
   --dr-frame    机架底衬（饱和深青，压出机体厚度）
   --dr-amber    平台琥珀 --warm-hi：机头导航灯 + 悬停/选中态
   --dr-safe     空域「报告」绿：信息面板电量条（与平台语义色同源） */
#drone-layer, #drone-tip, #ac-panel {
  --dr-cyan: #3DE1F5;
  --dr-cyan-hi: #D8F8FF;
  --dr-frame: #0E6B8E;
  --dr-amber: var(--warm-hi, #E0A968);
  --dr-safe: #1FCC6B;
  --dr-safe-hi: #6FE8A8;
}

#drone-layer {
  position: absolute; inset: 0; overflow: hidden;
  pointer-events: none; z-index: 4;
  transition: opacity 460ms ease;
}
#drone-layer.off { opacity: 0; pointer-events: none; }

/* —— 单机载体：48×48 命中盒，以目标点为中心（负 margin 居中，不与 transform 打架） ——
   perspective 逐机独立：机身绕自身横轴 rotateX(pitch) 倾斜时，远侧收窄、近侧放大，
   读作立在镜头前方的立体机体；缺了它，倾斜只会退化成「压扁的贴纸」 */
.dr {
  position: absolute; left: 0; top: 0; width: 48px; height: 48px;
  margin: -24px 0 0 -24px;
  will-change: transform;
  perspective: 340px;
}
.dr.hide { display: none; }
/* 姿态层：三维倾斜 + 航向旋转 + 缩放（含转弯侧倾）由 JS 逐帧写入 transform */
.dr-in { position: absolute; inset: 0; transform-origin: 50% 50%; }

/* —— 地面投影：机体下方软影，把飞行器从地图上「抬」起来（随平面一同压扁） —— */
.dr-sh {
  position: absolute; left: 50%; top: calc(50% + 10px); width: 36px; height: 18px; margin: -9px 0 0 -18px;
  border-radius: 50%;
  background: radial-gradient(50% 50% at 50% 50%,
    rgba(2, 10, 18, 0.52) 0%, rgba(2, 10, 18, 0.26) 56%, rgba(2, 10, 18, 0) 78%);
  filter: blur(1.4px);
}

/* —— 光晕：呼吸扩散，给图标一点「活着」的体积感（电光青） —— */
.dr-halo {
  position: absolute; left: 50%; top: 50%; width: 46px; height: 46px; margin: -23px 0 0 -23px;
  border-radius: 50%;
  background: radial-gradient(circle,
    rgba(216,248,255,0.40) 0%,
    rgba(61,225,245,0.24) 40%,
    rgba(61,225,245,0) 72%);
  animation: dr-halo 3.6s ease-in-out infinite;
  animation-delay: var(--dl, 0s);
}
@keyframes dr-halo {
  0%, 100% { transform: scale(0.88); opacity: 0.34; }
  50%      { transform: scale(1.14); opacity: 0.60; }
}

/* —— 尾迹：图标局部坐标「后方」（机头朝上 → 尾迹向下）渐隐光带 —— */
.dr-trail {
  position: absolute; left: 50%; top: calc(50% + 7px);
  width: 7px; height: 30px; margin-left: -3.5px; border-radius: 4px;
  background: linear-gradient(180deg,
    rgba(216,248,255,0.42) 0%,
    rgba(61,225,245,0.18) 46%,
    rgba(61,225,245,0) 100%);
  filter: blur(2.6px);
}

/* —— 悬停/选中扫描环：琥珀虚线环缓慢自转 —— */
.dr-ring {
  position: absolute; left: 50%; top: 50%; width: 52px; height: 52px; margin: -26px 0 0 -26px;
  border-radius: 50%; border: 1px dashed var(--dr-amber);
  opacity: 0; transition: opacity 220ms ease;
  animation: dr-ring 8s linear infinite;
}
@keyframes dr-ring { to { transform: rotate(360deg); } }
.dr.hov .dr-ring, .dr.sel .dr-ring { opacity: 0.92; }
.dr.hov .dr-halo, .dr.sel .dr-halo {
  background: radial-gradient(circle,
    rgba(224,169,104,0.58) 0%,
    rgba(180,118,60,0.26) 42%,
    rgba(180,118,60,0) 74%);
}

/* —— 告警联动高亮：级别色实环 + 光晕 + 图标外发光（区别于悬停/选中的琥珀虚线环） —— */
.dr.dr-alert .dr-ring {
  border-color: var(--alv, #E2593F);
  border-style: solid;
  opacity: 0.95;
}
.dr.dr-alert .dr-halo {
  background: radial-gradient(circle,
    var(--alv, #E2593F) 0%,
    color-mix(in srgb, var(--alv, #E2593F) 34%, transparent) 42%,
    transparent 76%);
}
.dr.dr-alert .dr-ico {
  filter: drop-shadow(0 1px 3px rgba(4,8,14,0.75)) drop-shadow(0 0 7px var(--alv, #E2593F));
}
.dr-alert[data-alv="danger"] { --alv: #E2593F; }
.dr-alert[data-alv="warn"]   { --alv: #D99A4E; }
.dr-alert[data-alv="info"]   { --alv: #6FA3D0; }

/* 告警态机体结构换色：机臂 / 机身 / 桨盘 / 旋翼整体染级别色，颜色区分一目了然 */
.dr.dr-alert .dr-arm { stroke: var(--alv, #E2593F); }
.dr.dr-alert .dr-arm-hi { stroke: color-mix(in srgb, var(--alv, #E2593F) 72%, #fff 28%); }
.dr.dr-alert .dr-fuse { fill: var(--alv, #E2593F); }
.dr.dr-alert .dr-hub { fill: color-mix(in srgb, var(--alv, #E2593F) 62%, #fff 38%); }
.dr.dr-alert .dr-rot path { stroke: color-mix(in srgb, var(--alv, #E2593F) 58%, #fff 42%); }
.dr.dr-alert .dr-rot path.sw2 { stroke: color-mix(in srgb, var(--alv, #E2593F) 30%, #fff 70%); }

/* 图标下方叠加告警类型胶囊（作为 .dr-in 的兄弟节点，不随航向旋转，恒保持水平） */
.dr-badge {
  position: absolute; left: 50%; top: calc(100% - 1px);
  transform: translateX(-50%);
  padding: 1.5px 8px; border-radius: 999px;
  font-size: 10.5px; font-weight: 600; letter-spacing: 0.5px; white-space: nowrap;
  color: #FFFFFF;
  background: linear-gradient(180deg, var(--alv, #E2593F), color-mix(in srgb, var(--alv, #E2593F) 70%, #000 30%));
  border: 1px solid rgba(255, 255, 255, 0.28);
  box-shadow: 0 1px 7px rgba(0, 0, 0, 0.4), 0 0 9px color-mix(in srgb, var(--alv, #E2593F) 55%, transparent);
}

/* —— 图标本体（命中盒：整个方块可点，方便抓取；底色投影让图标从地图上浮起来） —— */
.dr-ico {
  position: absolute; inset: 0; pointer-events: auto; cursor: pointer;
  filter: drop-shadow(0 1px 3px rgba(4, 8, 14, 0.75));
}
.dr-svg { width: 100%; height: 100%; display: block; }
.dr.hov .dr-ico, .dr.sel .dr-ico {
  filter: drop-shadow(0 1px 3px rgba(4,8,14,0.75)) drop-shadow(0 0 6px rgba(224,169,104,0.85));
}

/* 桨盘旋扫：绕自身中心自转（transform-box: fill-box 让旋转中心 = 扫弧包围盒中心 = 桨毂）。
   不再画十字桨叶——4 个桨的十字桨叶在俯视图里是 8 根细辐条，正是「像蜘蛛」的根因；
   改为两段错相的低透扫弧，高转速下只留下「转动中的模糊扇面」。 */
.dr-rot {
  transform-box: fill-box; transform-origin: center;
  animation: dr-rot var(--rd, 1.02s) linear infinite;
  animation-delay: var(--dl, 0s);
}
.dr-rot.rev { animation-direction: reverse; }
@keyframes dr-rot { to { transform: rotate(360deg); } }
.dr-rot path { fill: none; stroke: rgba(216,248,255,0.62); stroke-width: 2.5; stroke-linecap: round; }
.dr-rot path.sw2 { stroke: rgba(216,248,255,0.28); stroke-width: 3.2; }

/* 机架：饱和深青底衬 + 亮青高光棱线（两层同心描边压出机体的厚度，暗底图上仍立得住） */
.dr-arm { fill: none; stroke: var(--dr-frame); stroke-width: 3.8; stroke-linecap: round; }
.dr-arm-hi { fill: none; stroke: rgba(111,224,242,0.82); stroke-width: 1.4; stroke-linecap: round; }

/* 桨盘：半透蓝青盘 + 细亮边（旋翼下洗流场），电机帽压在盘心 */
.dr-disc { fill: rgba(61,225,245,0.13); stroke: rgba(216,248,255,0.28); stroke-width: 0.8; }
.dr-hub { fill: #9BEFFB; stroke: rgba(6,28,38,0.60); stroke-width: 0.7; }

/* 机身：亮部渐变（#drg 定义在图标 SVG 内）+ 中脊高光，走体积语言而非平涂剪影 */
.dr-fuse { fill: url(#drg); stroke: rgba(216,248,255,0.50); stroke-width: 0.9; }
.dr-spine { fill: none; stroke: rgba(255,255,255,0.45); stroke-width: 1.1; stroke-linecap: round; }
.dr-nose { fill: var(--dr-amber); filter: drop-shadow(0 0 3px rgba(224,169,104,0.95)); }
.dr-cam { fill: #0B1720; stroke: rgba(200,244,255,0.50); stroke-width: 0.8; }
.dr-cam-c { fill: var(--dr-cyan-hi); }

/* ============ 点击弹出的机载信息面板（毛玻璃，与 #as-tip/#rt-tip 同配方） ============ */
#drone-tip {
  position: absolute; left: 0; top: 0; display: block; pointer-events: none; z-index: 7;
  min-width: 252px; max-width: 320px; padding: 10px 13px 11px; border-radius: 10px;
  background: rgba(15, 20, 28, 0.52);
  border: 1px solid rgba(255, 255, 255, 0.16);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.55), 0 0 12px rgba(0, 0, 0, 0.35);
  -webkit-backdrop-filter: blur(3px) saturate(100%); backdrop-filter: blur(3px) saturate(100%);
  transition: opacity .17s ease, transform .17s ease;
  opacity: 0; transform: translateY(4px);
}
#drone-tip.show { opacity: 1; transform: translateY(0); pointer-events: auto; }

#drone-tip .dt-hd {
  display: flex; align-items: center; gap: 8px;
  padding-bottom: 7px; margin-bottom: 6px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.09);
}
#drone-tip .dt-dot {
  width: 8px; height: 8px; border-radius: 2px; flex-shrink: 0;
  background: var(--dr-cyan); box-shadow: 0 0 7px rgba(61, 225, 245, 0.85);
}
#drone-tip .dt-uid {
  font-family: var(--font-mono); font-size: 13px; font-weight: 700;
  letter-spacing: 1px; color: #EAF2F8;
}
/* 飞行态胶囊：紧跟唯一识别码（运行绿 / 返航琥珀） */
#drone-tip .dt-hst {
  flex-shrink: 0; padding: 1.5px 7px; border-radius: 999px;
  font-size: 9.5px; font-weight: 500; letter-spacing: 1.2px;
  border: 1px solid transparent;
}
#drone-tip .dt-hst.run { color: #8FE0B4; background: rgba(31, 204, 107, 0.10); border-color: rgba(111, 224, 168, 0.34); }
#drone-tip .dt-hst.back { color: #F0C07B; background: rgba(224, 169, 104, 0.12); border-color: rgba(224, 169, 104, 0.42); }
/* 右上角最小化：收起标签（与卡片动作胶囊同款玻璃底 + 琥珀 hover） */
#drone-tip .dt-min {
  margin-left: auto; flex-shrink: 0; width: 18px; height: 18px; padding: 0;
  display: grid; place-items: center; cursor: pointer;
  border-radius: 5px; font-family: inherit;
  color: rgba(205, 224, 240, 0.72);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  transition: color 180ms ease, background 180ms ease, border-color 180ms ease;
}
#drone-tip .dt-min svg { width: 11px; height: 11px; }
#drone-tip .dt-min:hover {
  color: #F2D6A6; background: rgba(228, 178, 116, 0.14); border-color: rgba(228, 178, 116, 0.55);
}
#drone-tip .dt-row {
  display: flex; align-items: baseline; gap: 10px;
  font-size: 11.5px; line-height: 1.85;
}
#drone-tip .dt-row span { color: var(--text-3); flex-shrink: 0; letter-spacing: 1px; }
#drone-tip .dt-row b {
  margin-left: auto; font-family: var(--font-mono); font-weight: 500;
  color: #E6F0F9; letter-spacing: 0.2px; white-space: nowrap;
}
/* 经纬度：度分秒两条右对齐竖排（标签塔宽有限，单行会溢出） */
#drone-tip .dt-geo {
  display: flex; align-items: flex-start; gap: 10px;
  font-size: 11.5px; line-height: 1.65;
}
#drone-tip .dt-geo > span { color: var(--text-3); flex-shrink: 0; letter-spacing: 1px; }
#drone-tip .dt-geo > b {
  margin-left: auto; display: flex; flex-direction: column; align-items: flex-end; gap: 2px;
  font-family: var(--font-mono); font-weight: 500; color: #E6F0F9;
}
#drone-tip .dt-geo em { font-style: normal; white-space: nowrap; }
#drone-tip .dt-bat {
  display: flex; align-items: center; gap: 10px; margin-bottom: 6px;
  font-size: 11.5px; line-height: 1.6;
}
#drone-tip .dt-bat span { color: var(--text-3); flex-shrink: 0; letter-spacing: 1px; }
#drone-tip .dt-track {
  flex: 1; height: 3px; border-radius: 2px; overflow: hidden;
  background: rgba(255, 255, 255, 0.10);
}
#drone-tip .dt-bar {
  display: block; height: 100%; width: 80%; border-radius: 2px;
  background: linear-gradient(90deg, var(--dr-safe), var(--dr-safe-hi));
  transition: width .5s ease;
}
#drone-tip .dt-batv {
  font-family: var(--font-mono); font-size: 11.5px; font-weight: 500;
  color: #E6F0F9; min-width: 34px; text-align: right;
}

/* ============================================================
   左翼航空器信息面板（#ac-panel）
   —— 触发：Dock「航空器 → 无人机」选中（与飞行图层同生共死）
   —— 尺寸对齐「空域规划」右翼 #as-panel（同宽等高），置于左侧，支持收起 / 展开
   —— 视觉沿用平台毛玻璃 + 冷蓝主调 + 琥珀关键操作，色块卡片与左侧看板（#ds-panel）同宗
   ============================================================ */

/* —— 尺寸与中轴令牌：1K 基准，2K 独立档位（与右翼 --as-* 同源口径） —— */
:root {
  --ac-left: 16px;                    /* 距左缘距离 */
  --ac-top: 136px;                    /* 顶栏下方起 */
  --ac-bottom: 16px;                  /* 下缘与 Dock 底部持平（Dock bottom:16px） */
  --ac-w: 484px;                      /* 面板宽（= 右翼 #as-panel 1K 宽度） */
  --ac-center: calc((var(--ac-top) + 100vh - var(--ac-bottom)) / 2);  /* 面板垂直中轴（随上下缘自适应） */
  --ac-th: 46px;                      /* 收起把手高 */
  --ac-tw: 16px;                      /* 收起把手宽 */
  --ac-edge: 0px;                     /* 收起态把手紧贴屏缘（与右翼 --as-edge 口径一致） */
}
@media (min-width: 2048px) {
  :root {
    --ac-left: 20px; --ac-top: 140px; --ac-bottom: 16px; --ac-w: 560px;
    --ac-th: 72px; --ac-tw: 18px;
  }
}

#ac-panel {
  position: absolute; left: var(--ac-left); top: var(--ac-top); bottom: var(--ac-bottom);
  width: var(--ac-w); z-index: 10;
  display: flex; flex-direction: column; overflow: hidden;
  background: rgba(13, 18, 26, 0.62);
  -webkit-backdrop-filter: blur(10px) saturate(132%); backdrop-filter: blur(10px) saturate(132%);
  border: 1px solid rgba(255, 255, 255, 0.11);
  border-radius: 12px;
  box-shadow: var(--shadow-float), inset 0 1px 0 rgba(255, 255, 255, 0.05);
  transition: opacity 260ms ease, transform 320ms cubic-bezier(0.32, 0.72, 0, 1), background-color 320ms ease;
}
@media (min-width: 2048px) { #ac-panel { border-radius: 14px; } }
/* 顶部高光细线：点亮面板上缘（与左翼看板同款） */
#ac-panel::before {
  content: ""; position: absolute; left: 12px; right: 12px; top: 0; height: 1px; pointer-events: none;
  background: linear-gradient(90deg, transparent 0%, rgba(150, 200, 245, 0.38) 50%, transparent 100%);
}
/* 门控：图层关闭 / 场景不匹配 → 整体退场 */
#ac-panel.off { opacity: 0; pointer-events: none; transform: translateX(-16px); }
/* 用户收起：面板向左滑出，把手贴屏缘待命 */
#ac-panel.collapsed { opacity: 0; pointer-events: none; transform: translateX(-46px); }

/* —— 小分辨率让位：Dock 唤起且与左翼横向相交时，面板与把手整体暂时滑出 ——
   （Dock 收起后按当前开关/收起态自动恢复，故独立于 collapsed 表达，二者互不干扰） */
#ac-panel.dock-yield { opacity: 0; pointer-events: none; transform: translateX(-46px); }
#ac-panel.dock-yield ~ .ac-toggle { opacity: 0; pointer-events: none; }

/* —— 收起 / 展开把手：贴面板右缘外侧，垂直居中于面板（中轴 --ac-center） —— */
.ac-toggle {
  position: absolute; left: calc(var(--ac-left) + var(--ac-w));
  top: calc(var(--ac-center) - var(--ac-th) / 2);
  height: var(--ac-th); width: var(--ac-tw); z-index: 11;
  display: grid; place-items: center; cursor: pointer;
  background: rgba(15, 20, 28, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.12); border-left: none;
  border-radius: 0 8px 8px 0;
  color: rgba(205, 224, 240, 0.72);
  transition: color 180ms ease, background 180ms ease, border-color 180ms ease,
              left 340ms cubic-bezier(0.32, 0.72, 0, 1), opacity 260ms ease;
}
.ac-toggle:hover { color: #EAF3FB; border-color: rgba(150, 200, 245, 0.4); }
.ac-toggle svg { width: 13px; height: 13px; }
.ac-toggle #ac-ic-expand { display: none; }
#ac-panel.collapsed ~ .ac-toggle { left: var(--ac-edge); }
#ac-panel.collapsed ~ .ac-toggle #ac-ic-collapse { display: none; }
#ac-panel.collapsed ~ .ac-toggle #ac-ic-expand { display: block; }
.ac-toggle.off { opacity: 0; pointer-events: none; }

/* —— 头行：面板名 ——
   注意：必须带 #ac-panel 作用域。告警卡片在 index.html 中另有全局 `.ac-head`
   （padding:13px 16px 0 20px），其样式表在本文件之后加载，同特异性下会覆盖本规则，
   导致标题被下推 6px、在头行内不居中。加 id 前缀提升特异性以隔离两个组件。 */
#ac-panel .ac-head {
  flex-shrink: 0; position: relative;
  display: flex; align-items: center;
  height: 46px; padding: 0 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.035) 0%, rgba(255, 255, 255, 0) 100%);
}
@media (min-width: 2048px) { #ac-panel .ac-head { height: 54px; padding: 0 18px; } }
#ac-panel .ac-title {
  display: flex; align-items: center; gap: 8px; margin: 0;
  font-size: 13px; font-weight: 700; letter-spacing: 4px;
  background: linear-gradient(180deg, #FFFFFF 0%, #EAF4FF 30%, #B8D6EF 55%, #8FB8DE 78%, #A9C8E6 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: #FFFFFF;
  filter: drop-shadow(0 0 9px rgba(130, 185, 230, 0.45));
}
.ac-title-dot {
  width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0;
  background: #6FA3D0; box-shadow: 0 0 8px rgba(111, 163, 208, 0.9);
}

/* —— 主体：统计维度（固定）/ 机载数据（弹性滚动） —— */
#ac-panel .ac-body {
  flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 12px;
  padding: 12px 14px 14px;
}
@media (min-width: 2048px) { #ac-panel .ac-body { gap: 14px; padding: 14px 16px 16px; } }
.ac-sec { flex-shrink: 0; min-height: 0; display: flex; flex-direction: column; gap: 8px; }
.ac-sec-data { flex: 1; }
.ac-sec-h { display: flex; align-items: center; gap: 8px; }
.ac-sec-h .ac-bar {
  width: 3px; height: 13px; border-radius: 2px; flex-shrink: 0;
  background: linear-gradient(180deg, #C4DCF6 0%, #6FA3D0 100%);
  box-shadow: 0 0 8px rgba(111, 163, 208, 0.7);
}
.ac-sec-h .ac-t {
  font-size: 13px; font-weight: 700; letter-spacing: 2.5px;
  background: linear-gradient(180deg, #FFFFFF 0%, #EAF4FF 34%, #BED9F0 70%, #8FB8DE 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: #FFFFFF;
  filter: drop-shadow(0 0 8px rgba(130, 185, 230, 0.42));
}
/* 名后渐隐发丝线：把标题行收边到面板右缘（取代原右侧计数小字） */
.ac-sec-h::after {
  content: ""; flex: 1; height: 1px;
  background: linear-gradient(90deg, rgba(150, 200, 245, 0.30) 0%, rgba(150, 200, 245, 0.03) 100%);
}
@media (min-width: 2048px) { .ac-sec-h .ac-t { font-size: 15px; } }

/* —— 统计条：四类航空器单行并列（共享一枚玻璃底 + 发丝分隔 + 底部类别色条） —— */
.ac-stats {
  flex-shrink: 0;
  display: grid; grid-template-columns: repeat(4, 1fr);
  border-radius: 10px; overflow: hidden;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.014) 100%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.18);
}
.ac-stat {
  position: relative;
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  padding: 11px 4px 10px;
  border-left: 1px solid rgba(255, 255, 255, 0.07);
}
.ac-stat:first-child { border-left: none; }
/* 底部类别色条：四档色相的唯一标识（贴底居中细条） */
.ac-stat::after {
  content: ""; position: absolute; left: 50%; bottom: 0; width: 18px; height: 2px;
  transform: translateX(-50%); border-radius: 2px 2px 0 0;
  background: var(--hs); box-shadow: 0 0 8px var(--hs);
}
.hs-uav   { --hs: #3DE1F5; --hs-hi: #8FF2FF; }
.hs-swarm { --hs: #6FA3D0; --hs-hi: #A9C9E8; }
.hs-ga    { --hs: #E0A968; --hs-hi: #F5C97B; }
.hs-civil { --hs: #A98BE0; --hs-hi: #C6B0F2; }
.ac-stat-k {
  display: flex; align-items: center; gap: 5px;
  font-size: var(--fs-l3); letter-spacing: 0.5px; color: var(--text-3); white-space: nowrap;
}
.ac-stat-led { width: 5px; height: 5px; border-radius: 50%; flex-shrink: 0; background: var(--hs); box-shadow: 0 0 6px var(--hs); }
.ac-stat-n { display: flex; align-items: baseline; gap: 3px; line-height: 1; }
.ac-stat-n b {
  font-family: var(--font-mono); font-size: var(--fs-l1); font-weight: 700; letter-spacing: 0.3px;
  background: linear-gradient(180deg, var(--hs-hi) 0%, var(--hs) 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: var(--hs-hi);
  filter: drop-shadow(0 0 9px var(--hs));
}
.ac-stat-n em { font-style: normal; font-size: var(--fs-l3); color: var(--text-3); }
/* 空档位（其余三类当前为 0）：整体弱化，视线焦点回到在飞机数 */
.ac-stat.zero .ac-stat-n b { filter: none; opacity: 0.5; }
.ac-stat.zero .ac-stat-led { opacity: 0.45; box-shadow: none; }
.ac-stat.zero::after { opacity: 0.3; box-shadow: none; }

/* —— 机载数据：逐机数据色块列表（弹性滚动） —— */
.ac-list {
  flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden;
  display: flex; flex-direction: column; gap: 8px;
  padding: 2px 6px 4px 0;
}
.ac-list::-webkit-scrollbar { width: 4px; }
.ac-list::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.14); border-radius: 2px; }

/* —— 高度标尺筛选联动：真高区间外的航空器「置灰」——
   列表数据一律保留（不抽走行，保证机队全貌可见），仅把区间外的整卡弱化到
   与空域规划右翼 .gt-row.dim 同档的 0.16 不透明，并停止其 hover / 点击响应
   （机体图标已被标尺剔除，此时卡片不再指得向地图上任何一个目标） */
.ac-card.ac-dim { opacity: 0.16; pointer-events: none; }

.ac-card {
  position: relative; flex-shrink: 0; cursor: pointer;
  padding: 10px 12px 9px; border-radius: 10px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.045) 0%, rgba(255, 255, 255, 0.012) 100%);
  border: 1px solid rgba(255, 255, 255, 0.07);
  box-shadow: inset 0 0 18px rgba(0, 0, 0, 0.16);
  transition: background 170ms ease, border-color 170ms ease, box-shadow 190ms ease, opacity 260ms ease;
}
.ac-card:hover {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.075) 0%, rgba(255, 255, 255, 0.02) 100%);
  border-color: rgba(150, 200, 245, 0.30);
}
.ac-card.on {
  border-color: rgba(224, 169, 104, 0.55);
  box-shadow: inset 0 0 18px rgba(0, 0, 0, 0.16), 0 0 16px -4px rgba(224, 169, 104, 0.45);
}
/* 头行：唯一识别码（等宽加粗作视觉锚点）+ 飞行态紧随其后 · 查看详情居右上角 */
.ac-c-top {
  display: flex; align-items: center; gap: 7px;
  padding-bottom: 8px; margin-bottom: 9px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}
.ac-c-dot {
  width: 7px; height: 7px; border-radius: 2px; flex-shrink: 0;
  background: var(--dr-cyan); box-shadow: 0 0 7px rgba(61, 225, 245, 0.85);
}
.ac-c-uid { font-family: var(--font-mono); font-size: 13px; font-weight: 700; letter-spacing: 0.8px; color: #EAF2F8; }
@media (min-width: 2048px) { .ac-c-uid { font-size: 15px; } }
.ac-c-st { flex-shrink: 0; font-size: var(--fs-l3); letter-spacing: 0.8px; }
.ac-c-st.run { color: #8FE0B4; }
.ac-c-st.back { color: #E0A968; }
/* 字段网格：型号 / 名称 / 类别 / 类型（标签定宽，值紧随其后左对齐，杜绝两侧参差留白） */
.ac-c-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 16px; }
.ac-f { display: flex; align-items: baseline; gap: 7px; min-width: 0; font-size: var(--fs-l3); line-height: 1.5; }
.ac-f > span { flex-shrink: 0; width: 2.4em; color: var(--text-3); letter-spacing: 0.5px; }
.ac-f > b { min-width: 0; font-size: 13px; color: #E6F0F9; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (min-width: 2048px) { .ac-f > b { font-size: 15px; } }

/* 实时读数条：电量 / 飞行速度 / 飞行高度（三格一体，发丝分隔，块面边界清晰） */
.ac-c-met {
  display: grid; grid-template-columns: repeat(3, 1fr);
  margin-top: 10px; border-radius: 8px; overflow: hidden;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.07);
}
.ac-m {
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  padding: 8px 10px 9px; text-align: center;
  border-left: 1px solid rgba(255, 255, 255, 0.07);
}
.ac-m:first-child { border-left: none; }
.ac-m > span { font-size: var(--fs-l3); letter-spacing: 0.6px; color: var(--text-3); white-space: nowrap; }
.ac-m > b { font-family: var(--font-mono); font-size: 15px; font-weight: 600; line-height: 1.1; color: #E6F0F9; white-space: nowrap; }
@media (min-width: 2048px) { .ac-m > b { font-size: 17px; } }
.ac-m > b em { font-style: normal; }
.ac-m > b i { font-style: normal; font-size: 0.72em; margin-left: 2px; color: var(--text-3); }
.ac-bat { width: 100%; max-width: 74px; height: 3px; border-radius: 2px; overflow: hidden; background: rgba(255, 255, 255, 0.10); }
.ac-bat i {
  display: block; height: 100%; width: 0; border-radius: 2px;
  background: linear-gradient(90deg, var(--dr-safe), var(--dr-safe-hi));
  transition: width 0.5s ease, background 300ms ease;
}
/* 低电量：读数与进度条转警示色（平台语义，非纯装饰） */
.ac-card.low .ac-m-batv { color: #E0705A; }
.ac-card.low .ac-bat i { background: linear-gradient(90deg, #C4565A, #E0705A); }

/* 卡片右上角动作胶囊：关联计划（占位，暂无交互）+ 查看详情
   （玻璃底 + 描边，hover 转琥珀；两枚共用一个靠右锚点，关联计划紧随查看详情左侧） */
.ac-more, .ac-plan {
  display: inline-flex; align-items: center; gap: 4px; cursor: pointer;
  flex-shrink: 0;
  padding: 2px 9px; border-radius: 999px; font-family: inherit;
  font-size: var(--fs-l3); letter-spacing: 0.6px; line-height: 1.5;
  color: rgba(198, 220, 240, 0.82);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.13);
  transition: color 180ms ease, background 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}
/* auto 边距挂在组内首枚（关联计划）上：两枚胶囊成组贴行尾，彼此保持行内 gap 的 7px 间距 */
.ac-plan { margin-left: auto; }
.ac-more svg { width: 11px; height: 11px; transition: transform 200ms cubic-bezier(0.16, 1, 0.3, 1); }
.ac-more:hover, .ac-plan:hover {
  color: #F2D6A6;
  background: rgba(228, 178, 116, 0.14);
  border-color: rgba(228, 178, 116, 0.62);
  box-shadow: 0 0 10px -2px rgba(228, 178, 116, 0.55);
}
.ac-more:hover svg { transform: translateX(3px); }

/* ============================================================
   右翼航空器详细信息面板（#dd-panel）
   —— 触发：左翼机载数据色块「查看详情」（与飞行图层同生共死，随场景门控显隐）
   —— 结构：头行（面板名 + 飞行态 + 关闭）/ 身份卡（机型图 + 唯一识别码 + 主体/联系方式）
        / 实时读数 6 格 / 「详细信息 · 计划信息 · 航空器配置」三档标签内容区
   —— 尺寸与左翼 #ac-panel 完全对称（同宽 / 同上下缘）；右缘让开高度筛选标尺
   —— 视觉沿用平台毛玻璃（0.62 深蓝底 + blur10）与琥珀关键操作
   ============================================================ */
:root {
  /* 右缘让位：综合态势下「空域高度筛选标尺」停靠在场景标尺原位（宽 --alt-w），需整条让开 */
  --dd-right: calc(var(--sr-right, 16px) + var(--alt-w, 72px) + var(--alt-gap, 12px));
  --dd-top: 136px;
  --dd-w: 484px;
  --dd-h: 480px;   /* 定高面板：按三档内容的最长档取值，不再拉满屏高 */
}
@media (min-width: 2048px) { :root { --dd-top: 140px; --dd-w: 560px; --dd-h: 560px; } }

#dd-panel {
  position: absolute; right: var(--dd-right); top: var(--dd-top); bottom: auto;
  width: var(--dd-w); height: var(--dd-h); max-height: calc(100vh - var(--dd-top) - 16px); z-index: 10;
  display: flex; flex-direction: column; overflow: hidden;
  background: rgba(13, 18, 26, 0.62);
  -webkit-backdrop-filter: blur(10px) saturate(132%); backdrop-filter: blur(10px) saturate(132%);
  border: 1px solid rgba(255, 255, 255, 0.11);
  border-radius: 12px;
  box-shadow: var(--shadow-float), inset 0 1px 0 rgba(255, 255, 255, 0.05);
  /* 默认退场（右缘外侧待命），展开时自右向左滑入 */
  opacity: 0; visibility: hidden; pointer-events: none;
  transform: translateX(22px);
  transition: opacity 220ms ease, transform 320ms cubic-bezier(0.32, 0.72, 0, 1), visibility 0s linear 320ms, background-color 320ms ease;
}
#dd-panel:not(.off) {
  opacity: 1; visibility: visible; pointer-events: auto; transform: none;
  transition: opacity 220ms ease, transform 320ms cubic-bezier(0.32, 0.72, 0, 1), visibility 0s, background-color 320ms ease;
}
@media (min-width: 2048px) { #dd-panel { border-radius: 14px; } }
#dd-panel::before {
  content: ""; position: absolute; left: 12px; right: 12px; top: 0; height: 1px; pointer-events: none;
  background: linear-gradient(90deg, transparent 0%, rgba(150, 200, 245, 0.38) 50%, transparent 100%);
}
/* 清屏 / 地图交互期：随平台其余面板一同退场 / 降级毛玻璃 */
body.cleared #dd-panel { opacity: 0; visibility: hidden; pointer-events: none; }
body.map-busy #dd-panel { -webkit-backdrop-filter: none; backdrop-filter: none; }
/* 选中定位（放大跟随）后：左右信息面板背景加实，弱化底层运动地图透出，缓解眩晕 */
body.drone-sel #ac-panel,
body.drone-sel #dd-panel { background-color: rgba(13, 18, 26, 0.85); }

/* —— 头行：面板名（左）· 飞行态（右）· 关闭按钮（最右） —— */
.dd-head {
  flex-shrink: 0; position: relative;
  display: flex; align-items: center; gap: 9px;
  height: 46px; padding: 0 12px 0 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.035) 0%, rgba(255, 255, 255, 0) 100%);
}
@media (min-width: 2048px) { .dd-head { height: 54px; padding: 0 14px 0 18px; } }
.dd-title {
  display: flex; align-items: center; gap: 8px; margin: 0;
  font-size: 13px; font-weight: 700; letter-spacing: 4px;
  background: linear-gradient(180deg, #FFFFFF 0%, #EAF4FF 30%, #B8D6EF 55%, #8FB8DE 78%, #A9C8E6 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: #FFFFFF;
  filter: drop-shadow(0 0 9px rgba(130, 185, 230, 0.45));
}
.dd-title-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; background: #6FA3D0; box-shadow: 0 0 8px rgba(111, 163, 208, 0.9); }
.dd-state {
  margin-left: auto; flex-shrink: 0; padding: 2px 9px; border-radius: 999px;
  font-size: var(--fs-l3); letter-spacing: 0.8px; line-height: 1.6;
  color: var(--text-2); border: 1px solid rgba(255, 255, 255, 0.14); background: rgba(255, 255, 255, 0.05);
}
.dd-state.run { color: #8FE0B4; border-color: rgba(111, 224, 168, 0.34); background: rgba(31, 204, 107, 0.10); }
.dd-state.back { color: #F0C07B; border-color: rgba(224, 169, 104, 0.42); background: rgba(224, 169, 104, 0.12); }
.dd-close {
  margin-left: auto; flex-shrink: 0; width: 26px; height: 26px; display: grid; place-items: center; cursor: pointer;
  border-radius: 8px; padding: 0;
  background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.13);
  color: rgba(198, 220, 240, 0.82);
  transition: color 180ms ease, background 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}
.dd-close svg { width: 13px; height: 13px; }
.dd-close:hover {
  color: #F2D6A6; background: rgba(228, 178, 116, 0.14);
  border-color: rgba(228, 178, 116, 0.62); box-shadow: 0 0 10px -2px rgba(228, 178, 116, 0.55);
}
@media (min-width: 2048px) {
  .dd-close { width: 30px; height: 30px; }
  .dd-close svg { width: 15px; height: 15px; }
}

/* —— 主体：身份卡（定高）· 实时读数（定高）· 标签切换（定高）· 内容区（弹性滚动） —— */
.dd-body { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 11px; padding: 12px 14px 14px; }
@media (min-width: 2048px) { .dd-body { gap: 13px; padding: 14px 16px 16px; } }

/* 身份卡：机型图 + 唯一识别码（视觉锚点）+ 主体信息 / 联系方式 */
.dd-hero {
  flex-shrink: 0; display: flex; align-items: center; gap: 14px;
  padding: 10px 12px; border-radius: 10px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.014) 100%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.18);
}
.dd-fig {
  flex-shrink: 0; width: 70px; height: 70px; display: grid; place-items: center; border-radius: 10px;
  background:
    radial-gradient(circle at 50% 46%, rgba(61, 225, 245, 0.16) 0%, rgba(61, 225, 245, 0.03) 62%, rgba(61, 225, 245, 0) 100%),
    rgba(8, 14, 20, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.09);
  box-shadow: inset 0 0 18px rgba(3, 10, 16, 0.6);
}
.dd-fig svg { width: 56px; height: 56px; display: block; }
@media (min-width: 2048px) {
  .dd-fig { width: 80px; height: 80px; }
  .dd-fig svg { width: 64px; height: 64px; }
}
.dd-idn { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 9px; justify-content: center; }
.dd-uidrow { display: flex; align-items: center; gap: 10px; min-width: 0; }
.dd-uid {
  font-family: var(--font-mono); font-size: 13px; font-weight: 700; letter-spacing: 1px; color: #EAF2F8;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
@media (min-width: 2048px) { .dd-uid { font-size: 15px; } }
/* 型号 / 名称 / 类别 / 类型：两列档案格（标签 + 读值同排） */
.dd-kv { display: grid; grid-template-columns: 1fr 1fr; gap: 5px 10px; }
.dd-k { display: flex; align-items: baseline; gap: 6px; min-width: 0; }
.dd-k > i { flex-shrink: 0; font-style: normal; font-size: var(--fs-l3); letter-spacing: 0.5px; color: var(--text-3); }
.dd-k > b { min-width: 0; font-size: 13px; font-weight: 500; color: #E6F0F9; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (min-width: 2048px) { .dd-k > b { font-size: 15px; } }

/* 身份卡机型图（与地图图标同源的俯视四旋翼，静止桨盘：虚线旋扫环） */
.ddg-arm { fill: none; stroke: var(--dr-frame); stroke-width: 3.8; stroke-linecap: round; }
.ddg-disc { fill: rgba(61, 225, 245, 0.13); stroke: rgba(216, 248, 255, 0.26); stroke-width: 0.8; }
.ddg-rot { fill: none; stroke: rgba(216, 248, 255, 0.34); stroke-width: 2.6; stroke-dasharray: 12 19; }
.ddg-hub { fill: #9BEFFB; stroke: rgba(6, 28, 38, 0.6); stroke-width: 0.7; }
.ddg-fuse { fill: rgba(61, 225, 245, 0.20); stroke: rgba(216, 248, 255, 0.58); stroke-width: 0.9; }
.ddg-spine { fill: none; stroke: rgba(255, 255, 255, 0.34); stroke-width: 1.1; stroke-linecap: round; }
.ddg-nose { fill: var(--dr-amber); }
.ddg-cam { fill: #0B1720; stroke: rgba(200, 244, 255, 0.5); stroke-width: 0.8; }
.ddg-cam-c { fill: var(--dr-cyan-hi); }

/* 实时读数：6 格（3×2，发丝分隔，读数居中发光） */
.dd-metrics {
  flex-shrink: 0; display: grid; grid-template-columns: repeat(4, 1fr);
  border-radius: 10px; overflow: hidden;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.18);
}
.dd-m {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px;
  padding: 9px 6px 10px; text-align: center;
  border-left: 1px solid rgba(255, 255, 255, 0.07);
}
/* 电量占 2 列并排入读数网格，其余 6 格各占 1 列 → 4×2 整齐排布
   （电量格列界：第 1 格占 col1-2，第 4 格（速度）回到 col1，故第 1/4 格无左描边） */
.dd-m:nth-child(1), .dd-m:nth-child(4) { border-left: none; }
.dd-m:nth-child(n + 4) { border-top: 1px solid rgba(255, 255, 255, 0.07); }
.dd-m > span { font-size: var(--fs-l3); letter-spacing: 0.6px; color: var(--text-3); white-space: nowrap; }
.dd-m > b { font-family: var(--font-mono); font-size: 15px; font-weight: 600; line-height: 1.15; color: #E6F0F9; white-space: nowrap; }
.dd-m > b em { font-style: normal; }
.dd-m > b i { font-style: normal; font-size: 0.72em; margin-left: 2px; color: var(--text-3); }
.dd-m-sub { font-family: var(--font-mono); font-style: normal; font-size: 11px; letter-spacing: 0.2px; color: var(--text-3); margin-top: -3px; }
/* 经纬度：经度 / 纬度两行同字体同字号同权重统一显示（DMS 字符串较长，略收字号以稳列宽） */
.dd-m-geo > b { font-size: 12px; letter-spacing: 0.1px; }
@media (min-width: 2048px) {
  .dd-m { padding: 11px 8px 12px; }
  .dd-m > b { font-size: 17px; }
  .dd-m-sub { font-size: 12px; }
  .dd-m-geo > b { font-size: 13px; }
}

/* 标签切换：三档等宽 + 实心琥珀滑块（平台 .seg 语言的高配版）——
   轨底内陷 + 顶部琥珀发丝线「点燃」+ 一道暖光掠过，滑块走顶部内高光的实心胶囊 */
.dd-tabs {
  flex-shrink: 0; position: relative; display: flex;
  padding: 4px; border-radius: 11px; overflow: hidden;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.35), inset 0 -1px 0 rgba(255, 255, 255, 0.05);
}
/* 顶部琥珀发丝线：切档时自中轴点亮 → 铺满 → 隐去（不留常驻装饰，仅作切换的记忆点） */
.dd-tabs::before {
  content: ""; position: absolute; left: 16px; right: 16px; top: 0; height: 1px; z-index: 3;
  background: linear-gradient(90deg, transparent 0%, rgba(246, 216, 168, 0.95) 50%, transparent 100%);
  transform: scaleX(0); transform-origin: 50% 50%; opacity: 0;
}
.dd-tabs.swap::before { animation: dd-swap-line 640ms cubic-bezier(0.22, 1, 0.36, 1); }
@keyframes dd-swap-line {
  0%   { transform: scaleX(0);    opacity: 0.35; }
  40%  { transform: scaleX(1);    opacity: 1; }
  100% { transform: scaleX(1);    opacity: 0; }
}
/* 一道暖光自左向右掠过轨面（切档瞬间的「惊艳」记忆点），静态不可见 */
.dd-tabs::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: -42%; width: 34%; z-index: 3;
  pointer-events: none; opacity: 0;
  background: linear-gradient(100deg, rgba(255, 226, 180, 0) 0%, rgba(255, 226, 180, 0.30) 48%, rgba(255, 226, 180, 0) 100%);
}
.dd-tabs.swap::after { animation: dd-swap-sheen 560ms cubic-bezier(0.22, 1, 0.36, 1); }
@keyframes dd-swap-sheen {
  0%   { opacity: 0; transform: translateX(0); }
  16%  { opacity: 1; }
  100% { opacity: 0; transform: translateX(420%); }
}
.dd-tabpill {
  position: absolute; top: 4px; bottom: 4px; left: 4px; width: calc((100% - 8px) / 4);
  border-radius: 8px; z-index: 1;
  background: linear-gradient(180deg, #E8B879 0%, #B4763C 42%, #96591F 100%);
  border: 1px solid rgba(246, 216, 168, 0.72);
  box-shadow: inset 0 1px 0 rgba(255, 236, 205, 0.55), inset 0 0 14px rgba(217, 154, 78, 0.32),
              0 1px 4px rgba(0, 0, 0, 0.32);
  transition: transform 300ms cubic-bezier(0.16, 1, 0.3, 1);
}
.dd-tab {
  position: relative; z-index: 2; flex: 1; height: 28px; padding: 0 4px;
  border: none; border-radius: 8px; background: transparent; cursor: pointer;
  font-family: inherit; font-size: var(--fs-l3); font-weight: 600; letter-spacing: 1.2px;
  color: var(--text-3); transition: color 200ms ease;
}
.dd-tab:hover { color: var(--text-2); }
.dd-tab.active {
  color: #FFF7EA;
  text-shadow: 0 1px 2px rgba(60, 30, 0, 0.55), 0 0 9px rgba(255, 214, 158, 0.45);
}
@media (min-width: 2048px) { .dd-tab { height: 32px; } }

/* 非告警机三档模式：隐藏「预警信息」档，滑块随 4→3 档同步收窄 */
#dd-panel.t3 .dd-tab:first-of-type { display: none; }
#dd-panel.t3 .dd-tabpill { width: calc((100% - 8px) / 3); }

/* 内容区：三档面板叠放（同一滚动容器规格，切换时错峰淡入） */
.dd-panes { flex: 1; min-height: 0; position: relative; }
.dd-pane {
  position: absolute; inset: 0; display: none; flex-direction: column; gap: 7px;
  overflow-y: auto; overflow-x: hidden; padding: 2px 6px 4px 0;
}
.dd-pane.on { display: flex; animation: dd-pane-in 260ms cubic-bezier(0.22, 1, 0.36, 1) both; }
@keyframes dd-pane-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.dd-pane::-webkit-scrollbar { width: 4px; }
.dd-pane::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.14); border-radius: 2px; }

/* 字段行：标签左、读值右（玻璃色块，与左翼机载数据色块同宗） */
.dd-row {
  flex-shrink: 0; min-height: 34px; display: flex; align-items: center; gap: 12px;
  padding: 6px 11px; border-radius: 8px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.045) 0%, rgba(255, 255, 255, 0.012) 100%);
  border: 1px solid rgba(255, 255, 255, 0.07);
  box-shadow: inset 0 0 18px rgba(0, 0, 0, 0.14);
}
.dd-row > span { flex-shrink: 0; font-size: var(--fs-l3); letter-spacing: 0.8px; color: var(--text-3); }
.dd-row > b {
  margin-left: auto; min-width: 0; font-size: 13px; font-weight: 500; color: #E6F0F9;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dd-row > b.mono { font-family: var(--font-mono); letter-spacing: 0.4px; }
@media (min-width: 2048px) { .dd-row { min-height: 38px; } .dd-row > b { font-size: 15px; } }
/* 状态标签：语义化胶囊（正常态绿 / 待处理态琥珀），与平台状态色同源 */
.dd-tag {
  margin-left: auto; flex-shrink: 0; padding: 1.5px 9px; border-radius: 999px;
  font-size: var(--fs-l3); letter-spacing: 0.6px; line-height: 1.7;
  color: var(--text-2); border: 1px solid rgba(255, 255, 255, 0.14); background: rgba(255, 255, 255, 0.05);
}
.dd-tag.ok { color: #8FE0B4; border-color: rgba(111, 224, 168, 0.34); background: rgba(31, 204, 107, 0.10); }
.dd-tag.warm { color: #F0C07B; border-color: rgba(224, 169, 104, 0.42); background: rgba(224, 169, 104, 0.12); }
/* 电量格（并入读数网格第 1 格、横跨 2 列）：标签 + 胶囊条 + 读数水平排布
   胶囊条：内陷轨 + 高亮渐变压帽 + 发光，比旧版 4px 细线更有量感 */
.dd-m.dd-m-bat {
  grid-column: span 2;
  flex-direction: row; gap: 9px; justify-content: center;
  padding-left: 12px; padding-right: 12px;
}
.dd-m-bat > span { flex-shrink: 0; }
.dd-m-bat .dd-bat { margin-left: 0; flex: 1 1 auto; }
.dd-m-bat .dd-batv {
  margin-left: 0; min-width: 40px; text-align: right; flex-shrink: 0;
  font-family: var(--font-mono);
}
.dd-bat {
  height: 9px; border-radius: 999px; overflow: hidden;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.06);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.5);
}
.dd-bat i {
  display: block; height: 100%; width: 0; border-radius: 999px;
  background: linear-gradient(90deg, #1FCC6B 0%, #6FE8A8 60%, #B5F7D8 100%);
  box-shadow: 0 0 8px rgba(63, 226, 156, 0.75);
  transition: width 0.5s ease, background 300ms ease, box-shadow 300ms ease;
}
.dd-m-bat > b.dd-batv {
  font-size: 14px; font-weight: 600; letter-spacing: 0.2px; color: #8FE0B4;
}
.dd-m-bat.low .dd-batv { color: #E0705A; }
.dd-m-bat.low .dd-bat i {
  background: linear-gradient(90deg, #C4565A 0%, #E0705A 60%, #F2A78E 100%);
  box-shadow: 0 0 8px rgba(224, 112, 90, 0.70);
}

/* ============================================================
   三档内容块（飞行态势 / 详细信息 / 计划信息）
   ============================================================ */

/* 小节标题：琥珀竖条 + 小字距（与左翼「机载数据」同族，作为内容块的分节锚点） */
.dd-sec {
  flex-shrink: 0; display: flex; align-items: center; gap: 7px;
  margin: 2px 0 -1px;
  font-size: 11.5px; font-weight: 600; letter-spacing: 2px; color: var(--text-2);
}
.dd-sec > i {
  flex-shrink: 0; width: 3px; height: 11px; border-radius: 2px;
  background: linear-gradient(180deg, #E4B274 0%, #96591F 100%);
  box-shadow: 0 0 7px -1px rgba(228, 178, 116, 0.7);
}
@media (min-width: 2048px) { .dd-sec { font-size: 13px; } .dd-sec > i { height: 13px; } }

/* 编号 / 坐标 / 量值：统一走等宽（与地图标签、左翼读数同族） */
#dd-panel .mono { font-family: var(--font-mono); letter-spacing: 0.3px; }

/* —— 航迹配置：四列图标胶囊（图标在上、名称在下）——
   每类一条专属色（--tc，与地图航迹线同源）：未选时图标带低透本色做识别，
   选中后整枚胶囊以本色点亮（描边 + 内晕 + 图标辉光）；融合与前三互斥 */
.dd-tracks { flex-shrink: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; }
.dd-track {
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  padding: 9px 4px 8px; border-radius: 9px; cursor: pointer; font-family: inherit;
  color: var(--text-3);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.045) 0%, rgba(255, 255, 255, 0.012) 100%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: inset 0 0 16px rgba(0, 0, 0, 0.14);
  transition: color 200ms ease, border-color 200ms ease, background 200ms ease, box-shadow 200ms ease;
}
.dd-track svg {
  width: 22px; height: 22px; display: block;
  color: var(--tc); opacity: 0.58;
  transition: opacity 200ms ease, filter 200ms ease;
}
.dd-track span { font-size: 11px; letter-spacing: 0.6px; white-space: nowrap; }
.dd-track svg .das { stroke-dasharray: 2.6 2.4; }
.dd-track:hover { color: var(--text-2); border-color: rgba(255, 255, 255, 0.17); }
.dd-track:hover svg { opacity: 0.88; }
.dd-track.sel {
  color: var(--tc);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.085) 0%, rgba(255, 255, 255, 0.02) 100%);
  border-color: var(--tc);
  box-shadow: inset 0 0 14px -4px var(--tc), 0 0 10px -3px var(--tc);
}
.dd-track.sel svg { opacity: 1; filter: drop-shadow(0 0 5px var(--tc)); }
@media (min-width: 2048px) {
  .dd-track { padding: 11px 4px 10px; gap: 6px; }
  .dd-track svg { width: 25px; height: 25px; }
  .dd-track span { font-size: 12.5px; }
}

/* —— 详细信息：航空器档案格（两列；生产厂商名称跨两列独占一行） —— */
.dd-spec {
  flex-shrink: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 6px;
  padding: 10px; border-radius: 10px;
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.16);
}
.dd-s {
  min-width: 0; display: flex; align-items: baseline; gap: 8px;
  padding: 6px 9px; border-radius: 7px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0.01) 100%);
  border: 1px solid rgba(255, 255, 255, 0.06);
}
.dd-s-wide { grid-column: 1 / -1; }
.dd-s > i { flex-shrink: 0; font-style: normal; font-size: var(--fs-l3); letter-spacing: 0.6px; color: var(--text-3); white-space: nowrap; }
.dd-s > b {
  margin-left: auto; min-width: 0; font-size: 13px; font-weight: 500; color: #E6F0F9;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
@media (min-width: 2048px) {
  .dd-spec { padding: 12px; gap: 7px; }
  .dd-s { padding: 7px 10px; }
  .dd-s > b { font-size: 14.5px; }
}

/* —— 详细信息：航空器照片（横向紧凑卡：机绘图 + 型号名签，避免大图撑高面板） —— */
.dd-photo {
  flex-shrink: 0; display: flex; align-items: center; gap: 13px;
  padding: 10px 13px 10px 10px; border-radius: 10px;
  background:
    radial-gradient(circle at 16% 50%, rgba(61, 225, 245, 0.12) 0%, rgba(61, 225, 245, 0.02) 60%, rgba(61, 225, 245, 0) 100%),
    rgba(8, 14, 20, 0.42);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: inset 0 0 26px rgba(3, 10, 16, 0.55);
}
.dd-photo-fig {
  flex-shrink: 0; width: 76px; height: 76px; display: grid; place-items: center; border-radius: 9px;
  background: rgba(6, 11, 17, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.07);
}
.dd-photo-fig svg { width: 62px; height: 62px; display: block; }
.dd-photo-info { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.dd-photo-lab { font-size: var(--fs-l3); letter-spacing: 1.4px; color: var(--text-3); }
.dd-photo-cap {
  font-family: var(--font-mono); font-size: 14px; font-weight: 600; letter-spacing: 0.6px;
  color: #E6F0F9; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
@media (min-width: 2048px) {
  .dd-photo { padding: 12px 15px 12px 12px; gap: 15px; }
  .dd-photo-fig { width: 88px; height: 88px; }
  .dd-photo-fig svg { width: 72px; height: 72px; }
  .dd-photo-cap { font-size: 15.5px; }
}

/* —— 计划信息：检索行（输入框 + 重置 + 查询） —— */
/* 该面板自身不滚动：检索行 / 底部关联钮定高，仅活动列表滚动（避免整页滚动带走操作钮） */
#dd-panel .dd-pane-split { padding: 2px 0 0 0; gap: 9px; overflow: hidden; }
.dd-search { flex-shrink: 0; display: flex; align-items: center; gap: 7px; }
.dd-search input {
  flex: 1; min-width: 0; height: 30px; padding: 0 10px;
  border-radius: 7px; outline: none;
  color: var(--text-1); font-family: inherit; font-size: var(--fs-l3); letter-spacing: 0.4px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.11);
  transition: border-color 180ms ease, background 180ms ease;
}
.dd-search input::placeholder { color: rgba(255, 255, 255, 0.30); letter-spacing: 0.6px; }
.dd-search input:focus { border-color: rgba(228, 178, 116, 0.55); background: rgba(255, 255, 255, 0.075); }
.dd-sbtn {
  flex-shrink: 0; height: 30px; padding: 0 13px; border-radius: 7px; cursor: pointer;
  font-family: inherit; font-size: var(--fs-l3); font-weight: 500; letter-spacing: 1px;
  color: var(--text-2); background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  transition: color 180ms ease, background 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}
.dd-sbtn:hover { color: var(--text-1); background: rgba(255, 255, 255, 0.09); }
.dd-sbtn.pri {
  color: #FFF4E4; border-color: rgba(228, 178, 116, 0.58);
  background: linear-gradient(180deg, #B4763C 0%, #96591F 100%);
  box-shadow: inset 0 0 10px rgba(217, 154, 78, 0.26);
}
.dd-sbtn.pri:hover {
  border-color: rgba(242, 214, 166, 0.85);
  box-shadow: inset 0 0 12px rgba(217, 154, 78, 0.4), 0 0 10px -2px rgba(228, 178, 116, 0.55);
}
@media (min-width: 2048px) { .dd-search input, .dd-sbtn { height: 34px; } }

/* —— 计划信息：飞行活动卡片（选中 = 琥珀左侧标线；关联 = 右上「已关联」签） —— */
.dd-acts {
  flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 8px;
  overflow-y: auto; overflow-x: hidden; padding-right: 3px;
}
.dd-acts::-webkit-scrollbar { width: 4px; }
.dd-acts::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.14); border-radius: 2px; }
.dd-act {
  position: relative; flex-shrink: 0; padding: 9px 11px 9px 12px; border-radius: 9px; cursor: pointer;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.045) 0%, rgba(255, 255, 255, 0.012) 100%);
  border: 1px solid rgba(255, 255, 255, 0.075);
  box-shadow: inset 0 0 18px rgba(0, 0, 0, 0.14);
  transition: border-color 200ms ease, background 200ms ease, box-shadow 200ms ease;
}
.dd-act:hover {
  border-color: rgba(255, 255, 255, 0.17);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.07) 0%, rgba(255, 255, 255, 0.02) 100%);
}
.dd-act.sel {
  border-color: rgba(228, 178, 116, 0.55);
  box-shadow: inset 0 0 18px rgba(0, 0, 0, 0.14), inset 3px 0 0 rgba(228, 178, 116, 0.78);
}
.dd-act-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.dd-act-name { flex: 1 1 auto; min-width: 0; font-size: 12.5px; font-weight: 600; line-height: 1.5; letter-spacing: 0.3px; color: #EAF2F8; }
.dd-act-m { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; margin-top: 6px; }
.dd-act-st { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; letter-spacing: 0.8px; }
.dd-act-st > i { flex-shrink: 0; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.dd-act-st.run { color: #8FE0B4; }
.dd-act-st.run > i { box-shadow: 0 0 7px rgba(111, 224, 168, 0.85); animation: dd-act-pulse 2.1s ease-in-out infinite; }
.dd-act-st.wait { color: #F0C07B; }
.dd-act-st.wait > i { box-shadow: 0 0 6px rgba(224, 169, 104, 0.6); }
.dd-act-st.done { color: var(--text-3); }
@keyframes dd-act-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
.dd-act-time { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.2px; color: var(--text-3); }
/* 关联签：仅已关联的卡片显示（默认隐藏，不走 JS 重排） */
.dd-act-atag {
  display: none; margin-left: auto; padding: 1px 7px; border-radius: 999px;
  font-size: 10.5px; letter-spacing: 0.8px; line-height: 1.6;
  color: #F0C07B; background: rgba(224, 169, 104, 0.13); border: 1px solid rgba(224, 169, 104, 0.40);
}
.dd-act.assoc .dd-act-atag { display: inline-block; }
/* 展开开关：文字 + 箭头同向翻折（看详情 ⇄ 收起） */
.dd-act-x {
  display: inline-flex; align-items: center; gap: 3px; flex-shrink: 0; white-space: nowrap;
  margin-top: 0; padding: 0;
  border: none; background: transparent; cursor: pointer; font-family: inherit;
  font-size: 11px; letter-spacing: 0.8px; color: var(--text-3);
  transition: color 180ms ease;
}
.dd-act-x:hover { color: #F2D6A6; }
.dd-act-x svg { width: 12px; height: 12px; transition: transform 300ms cubic-bezier(0.22, 1, 0.36, 1); }
.dd-act-x .x-less { display: none; }
.dd-act.open .dd-act-x .x-more { display: none; }
.dd-act.open .dd-act-x .x-less { display: inline; }
.dd-act.open .dd-act-x svg { transform: rotate(180deg); }
/* 展开区：高度 + 透明度联动，收起不留空腔 */
.dd-act-d {
  overflow: hidden; max-height: 0; opacity: 0;
  transition: max-height 340ms cubic-bezier(0.22, 1, 0.36, 1), opacity 240ms ease, margin-top 340ms ease;
}
.dd-act.open .dd-act-d { max-height: 190px; opacity: 1; margin-top: 8px; }
.dd-act-drow { display: flex; align-items: baseline; gap: 10px; padding: 3px 0; font-size: 11.5px; line-height: 1.6; }
.dd-act-drow > i { flex-shrink: 0; font-style: normal; letter-spacing: 0.6px; color: var(--text-3); }
.dd-act-drow > b {
  margin-left: auto; min-width: 0; font-weight: 500; color: #DCE8F2;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dd-act-empty { padding: 32px 0; text-align: center; color: var(--text-3); font-size: var(--fs-l3); letter-spacing: 2px; }
.dd-actfoot { flex-shrink: 0; display: flex; justify-content: flex-end; }
.dd-assoc {
  height: 30px; padding: 0 18px; border-radius: 7px; cursor: pointer;
  font-family: inherit; font-size: var(--fs-l3); font-weight: 600; letter-spacing: 2px;
  color: #FFF4E4; border: 1px solid rgba(228, 178, 116, 0.58);
  background: linear-gradient(180deg, #B4763C 0%, #96591F 100%);
  box-shadow: inset 0 0 10px rgba(217, 154, 78, 0.26);
  transition: color 180ms ease, background 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}
.dd-assoc:hover {
  border-color: rgba(242, 214, 166, 0.85);
  box-shadow: inset 0 0 12px rgba(217, 154, 78, 0.4), 0 0 10px -2px rgba(228, 178, 116, 0.55);
}
.dd-assoc.on {
  color: #F2B9AF; border-color: rgba(214, 110, 86, 0.52);
  background: rgba(190, 70, 62, 0.20); box-shadow: none;
}
.dd-assoc.on:hover { border-color: rgba(230, 130, 108, 0.8); background: rgba(190, 70, 62, 0.30); }
.dd-assoc:disabled {
  cursor: not-allowed; color: rgba(255, 244, 228, 0.45);
  border-color: rgba(228, 178, 116, 0.22);
  background: rgba(150, 128, 104, 0.16); box-shadow: none;
}
@media (min-width: 2048px) {
  .dd-act { padding: 11px 13px 11px 14px; }
  .dd-act-name { font-size: 14px; }
  .dd-act-drow { font-size: 13px; }
  .dd-act.open .dd-act-d { max-height: 220px; }
  .dd-actfoot .dd-assoc { height: 34px; }
}

/* ============================================================
   告警联动 · 三处信息表面的级别色醒目提示
   （左翼卡片 / 机载标签 / 右翼详情面板）——统一由 data-alv → --alv 驱动，
   与地图图标 .dr-alert 同源级别色（danger 红 / warn 橙 / info 蓝）
   ============================================================ */
.ac-card.ac-alert[data-alv="danger"],
#drone-tip.tip-alert[data-alv="danger"],
#dd-panel.dd-alert[data-alv="danger"] { --alv: #E2593F; }
.ac-card.ac-alert[data-alv="warn"],
#drone-tip.tip-alert[data-alv="warn"],
#dd-panel.dd-alert[data-alv="warn"] { --alv: #D99A4E; }
.ac-card.ac-alert[data-alv="info"],
#drone-tip.tip-alert[data-alv="info"],
#dd-panel.dd-alert[data-alv="info"] { --alv: #6FA3D0; }

/* —— ① 左翼航空器卡片：级别色描边 + 左侧级别色竖条 + 状态点换色 + 轻辉光 —— */
.ac-card.ac-alert {
  border-color: color-mix(in srgb, var(--alv, #E2593F) 72%, #fff 8%);
  box-shadow: inset 0 0 18px rgba(0, 0, 0, 0.16), 0 0 16px -5px var(--alv, #E2593F);
}
.ac-card.ac-alert::before {
  content: ""; position: absolute; left: 0; top: 10px; bottom: 10px; width: 3px;
  border-radius: 0 2px 2px 0;
  background: var(--alv, #E2593F);
  box-shadow: 0 0 8px var(--alv, #E2593F);
}
.ac-card.ac-alert .ac-c-dot { background: var(--alv, #E2593F); box-shadow: 0 0 7px var(--alv, #E2593F); }

/* —— ② 机载浮动标签：级别色描边 + 状态点换色 + 轻辉光 —— */
#drone-tip.tip-alert {
  border-color: color-mix(in srgb, var(--alv, #E2593F) 72%, #fff 10%);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.55), 0 0 14px -2px var(--alv, #E2593F);
}
#drone-tip.tip-alert .dt-dot { background: var(--alv, #E2593F); box-shadow: 0 0 8px var(--alv, #E2593F); }

/* —— ③ 详情面板：级别色描边 + 顶部发丝线换色 + 标题状态点换色 + 轻辉光 —— */
#dd-panel.dd-alert {
  border-color: color-mix(in srgb, var(--alv, #E2593F) 62%, rgba(255, 255, 255, 0.14));
  box-shadow: var(--shadow-float), 0 0 24px -10px var(--alv, #E2593F);
}
#dd-panel.dd-alert::before {
  background: linear-gradient(90deg, transparent 0%, var(--alv, #E2593F) 50%, transparent 100%);
}
#dd-panel.dd-alert .dd-title-dot { background: var(--alv, #E2593F); box-shadow: 0 0 8px var(--alv, #E2593F); }

/* —— 详情面板「预警信息」档：级别徽标 + 告警内容卡 —— */
.dd-tag.info { color: #BBD4EE; border-color: rgba(111, 163, 208, 0.40); background: rgba(111, 163, 208, 0.13); }
.dd-tag.danger { color: #FFB3A6; border-color: rgba(226, 89, 63, 0.45); background: rgba(226, 89, 63, 0.14); }
.dd-tag.warn { color: #F0C07B; border-color: rgba(217, 154, 78, 0.45); background: rgba(217, 154, 78, 0.14); }
.dd-alert-card {
  flex-shrink: 0; padding: 12px 13px; border-radius: 10px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.045) 0%, rgba(255, 255, 255, 0.012) 100%);
  border: 1px solid rgba(255, 255, 255, 0.07);
  box-shadow: inset 0 0 18px rgba(0, 0, 0, 0.14);
}
.dd-alert-h {
  display: flex; align-items: center; gap: 9px;
  padding-bottom: 9px; margin-bottom: 9px; border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}
.dd-alert-h .dd-tag { margin-left: 0; }
.dd-alert-h > b { font-size: 13px; font-weight: 600; letter-spacing: 1px; color: #EAF2F8; }
.dd-alert-msg {
  margin: 0; font-size: 13px; line-height: 1.85; letter-spacing: 0.2px;
  color: #DCE8F2; white-space: pre-wrap;
}
@media (min-width: 2048px) {
  .dd-alert-h > b { font-size: 15px; }
  .dd-alert-msg { font-size: 15px; }
}