/* ============================================================
   飞行审批 · 左翼「低空飞行受理概览」（#apvd-panel）
   —— 位置 / 高度 / 玻璃质感 / 标题修饰与运行调度 #fp-panel 保持一致，
      宽度另立一档（1K 400px / 2K 464px）
   —— 纵向用等高行网格铺满整个左翼：受理概览 / 受理用时 / 任务性质 / 来源地区
      按 0.9 : 1.7 : 0.95 : 1.35 分食剩余高度，屏幕越高内容越舒展，不留死白
   —— 语义配色：受理通过 = 钢蓝（通道口径）；受理中 = 琥珀（在途口径）；受理通过率 = 玉绿（达标口径）；
      超时未批 / 慢于 KPI = 暖红
   ============================================================ */

/* 面板宽：句柄要跟着面板右缘走，故令牌挂在 :root 上（不可只写在 #apvd-panel 里） */
/* 字号只留两级：正文 fs / 注释 fs-s —— 面板内不允许再出现更小的「随手字号」 */
/* 字号阶梯（三级，逐级递减，不可倒挂）：一级 15 / 二级 13 / 正文 12.5 / 图内小标 11.5 */
:root { --apvd-w: 400px; --apvd-fs: 12.5px; --apvd-fs-s: 11.5px; --apvd-fs-h: 13px; }
@media (min-width: 2048px) { :root { --apvd-w: 464px; --apvd-fs: 14px; --apvd-fs-s: 13px; --apvd-fs-h: 15.5px; } }

#apvd-panel {
  position: absolute; left: var(--ac-left); top: var(--ac-top); bottom: var(--ac-bottom);
  width: var(--apvd-w); z-index: 10;
  display: flex; flex-direction: column; overflow: hidden;
  background:
    radial-gradient(34% 20% at 100% 0%, rgba(150, 200, 245, 0.20) 0%, rgba(120, 170, 220, 0.04) 44%, rgba(120, 170, 220, 0) 72%),
    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; pointer-events: none; transform: translateX(-16px);
  transition: opacity 260ms ease, transform 320ms cubic-bezier(0.32, 0.72, 0, 1), background-color 320ms ease;
}
@media (min-width: 2048px) { #apvd-panel { border-radius: 14px; } }
/* 顶缘一道冷光收边（与调度面板同款，不抢数据） */
#apvd-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%);
}
/* 右上角冷光晕：与标题蓝白字同色系，光源中心落在面板外 */
#apvd-panel::after {
  content: ""; position: absolute; right: -34px; top: -44px; width: 200px; height: 140px;
  pointer-events: none; z-index: 1;
  background: radial-gradient(closest-side, rgba(206, 232, 255, 0.20) 0%, rgba(160, 200, 245, 0.05) 46%, rgba(160, 200, 245, 0) 100%);
}

/* 场景门控：仅飞行审批可见（进场动效交给 .apvd-in 关键帧，门控本身不带延迟） */
body.as-approve-scene #apvd-panel { opacity: 1; pointer-events: auto; transform: none; }
body.as-approve-scene #apvd-panel.collapsed { opacity: 0; pointer-events: none; transform: translateX(-46px); }
/* 滚动激活：滚动期间底色加深，弱化底层地图透出（与 #fp-panel / #ftl-panel 的 is-active 同款口径）——
   只改 background-color，不动上面背景里的那道冷光渐变（渐变是 background-image 层，仍压在新底色之上） */
#apvd-panel.is-active { background-color: rgba(13, 18, 26, 0.80); }

/* —— 进场：滑入 + 淡入一次 ——
   用 keyframes 而非 transition-delay：delay 的计时起点取决于「哪一刻匹配到门控规则」，
   面板又是在进场编排中途才插入的，起点不可控，实测常直接跳到终态、看不到过程。 */
@keyframes apvdIn {
  from { opacity: 0; transform: translateX(-24px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes apvdInSoft {
  from { opacity: 0; }
  to   { opacity: 1; }
}
/* 200ms 起手：略滞后于柔幕揭幕，镜头快到位时面板才滑进来，不抢戏 */
body.as-approve-scene #apvd-panel.apvd-in { animation: apvdIn 540ms cubic-bezier(0.22, 0.61, 0.36, 1) 200ms both; }
body.as-approve-scene .apvd-toggle.apvd-in { animation: apvdInSoft 360ms ease 420ms both; }
/* 收起时立刻让出动画控制权，否则 fill 会把面板按在可见态 */
body.as-approve-scene #apvd-panel.collapsed.apvd-in { animation: none; }

/* 首帧压住：元素一插入就是终态会闪一帧，先 .pre 兜住，再挂 .apvd-in 从 0 播 */
body.as-approve-scene #apvd-panel.pre { animation: none !important; transition: none !important; opacity: 0 !important; transform: translateX(-16px) !important; }
body.as-approve-scene .apvd-toggle.pre { animation: none !important; transition: none !important; opacity: 0 !important; }

/* —— 收起 / 展开把手（与 .fp-toggle 同款口径） —— */
.apvd-toggle {
  position: absolute; left: calc(var(--ac-left) + var(--apvd-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);
  opacity: 0; pointer-events: none;
  transition: color 180ms ease, background 180ms ease, border-color 180ms ease,
              left 340ms cubic-bezier(0.32, 0.72, 0, 1), opacity 260ms ease;
}
.apvd-toggle:hover { color: #EAF3FB; border-color: rgba(150, 200, 245, 0.4); }
.apvd-toggle svg { width: 13px; height: 13px; }
.apvd-toggle .apvd-ic-expand { display: none; }
body.as-approve-scene .apvd-toggle { opacity: 1; pointer-events: auto; }
body.as-approve-scene #apvd-panel.collapsed ~ .apvd-toggle { left: var(--ac-edge); }
#apvd-panel.collapsed ~ .apvd-toggle .apvd-ic-collapse { display: none; }
#apvd-panel.collapsed ~ .apvd-toggle .apvd-ic-expand { display: block; }

/* ============================================================
   主体：纵向等高行网格（把左翼高度吃满，不留中间死白）
   ============================================================ */
#apvd-panel .apvd-body {
  flex: 1; min-height: 0;
  display: flex; flex-direction: column; gap: 11px;
  padding: 12px 14px 13px;
  /* 面板本体不出滚动条：内容按 flex 分配，长列表在自身视口里滚（来源地区） */
  overflow: hidden;
}
@media (min-width: 2048px) {
  #apvd-panel .apvd-body { gap: 15px; padding: 15px 16px 16px; }
}

/* —— 标题行：与运行调度 .fp-head 完全同款（蓝白渐变竖条 + 蓝白渐变字 + 收尾发丝线） —— */
.apvd-head { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.apvd-bar {
  width: 3px; height: 15px; 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);
}
.apvd-title {
  font-size: 15px; font-weight: 700; letter-spacing: 2.5px; white-space: nowrap;
  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));
}
@media (min-width: 2048px) { .apvd-title { font-size: 17.5px; } }
.apvd-hair {
  flex: 1; height: 1px; min-width: 10px;
  background: linear-gradient(90deg, rgba(150, 200, 245, 0.30) 0%, rgba(150, 200, 245, 0.03) 100%);
}

/* —— 时间范围下拉：加大字号与行高，不再小字挤成一团 —— */
.apvd-sel { flex-shrink: 0; margin-left: auto; }
.apvd-sel-btn {
  display: inline-flex; align-items: center; gap: 7px;
  height: 30px; padding: 0 9px 0 13px; border-radius: 9px;
  font-family: inherit; font-size: 13px; font-weight: 600; letter-spacing: 0.8px;
  color: #E8F2FB; background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.10);
  cursor: pointer; transition: background 180ms ease, border-color 180ms ease;
}
.apvd-sel-btn:hover { background: rgba(255, 255, 255, 0.10); border-color: rgba(150, 200, 245, 0.42); }
.apvd-sel-btn svg { width: 12px; height: 12px; color: rgba(196, 216, 234, 0.7); transition: transform 220ms cubic-bezier(0.32, 0.72, 0, 1); }
.apvd-sel.open .apvd-sel-btn { border-color: rgba(150, 200, 245, 0.55); background: rgba(150, 200, 245, 0.14); }
.apvd-sel.open .apvd-sel-btn svg { transform: rotate(180deg); }
@media (min-width: 2048px) {
  .apvd-sel-btn { height: 34px; font-size: 14.5px; padding: 0 10px 0 15px; border-radius: 10px; }
  .apvd-sel-btn svg { width: 13px; height: 13px; }
}

.apvd-menu {
  position: fixed; z-index: 900; padding: 6px; border-radius: 11px;
  background: rgba(15, 21, 29, 0.96);
  -webkit-backdrop-filter: blur(14px) saturate(140%); backdrop-filter: blur(14px) saturate(140%);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 22px 48px -16px rgba(0, 0, 0, 0.82), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  opacity: 0; transform: translateY(-6px) scale(0.98); pointer-events: none; transform-origin: top right;
  transition: opacity 160ms ease, transform 180ms cubic-bezier(0.32, 0.72, 0, 1);
}
.apvd-menu.on { opacity: 1; transform: none; pointer-events: auto; }
.apvd-menu > button {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%; height: 34px; padding: 0 12px; border: 0; border-radius: 8px;
  font-family: inherit; font-size: 13px; letter-spacing: 0.6px;
  color: rgba(206, 224, 240, 0.82); background: transparent; cursor: pointer;
  transition: background 150ms ease, color 150ms ease;
}
.apvd-menu > button:hover { background: rgba(255, 255, 255, 0.07); color: #FFFFFF; }
.apvd-menu > button.on { color: #DCEBFA; background: rgba(150, 200, 245, 0.16); }
.apvd-menu > button.on::after {
  content: ""; width: 5px; height: 5px; border-radius: 50%;
  background: #A9D4F5; box-shadow: 0 0 7px rgba(169, 212, 245, 0.9);
}
@media (min-width: 2048px) {
  .apvd-menu > button { height: 38px; font-size: 14.5px; }
}

/* ============================================================
   分区与二级标题
   ============================================================ */
/* 四个分区按自然高度起算，剩余高度按 grow 分食：屏幕越高越舒展，内容永不裁切 */
.apvd-sec {
  display: flex; flex-direction: column; gap: 7px;
  flex: 0 1 auto; min-height: min-content;
}
/* 受理用时（图定高）与来源地区（按内容高度）都固定占位，不再分食余量；
   余量交给概览与任务性质——概览是等高卡阵、性质是环形 + 明细，两块都能自然舒展 */
.apvd-sec-kpi  { flex-grow: 0.8; }
.apvd-sec-time { flex-grow: 0; }
.apvd-sec-nat  { flex-grow: 1.6; }
/* 来源地区可压缩：视口 overflow:hidden，min-content 会把整条轨道算进去，这里必须放开下限 */
.apvd-sec-reg  { flex-grow: 0; min-height: 0; --r-pad-l: 9px; --r-pad-r: 8px; }

/* 二级标题：与一级标题「竖条 + 渐变字」明确分开 ——
   这里用「横线起头 + 纯色字 + 发丝线收尾」，横向语言、无渐变无辉光，层级低一档 */
.apvd-sec-hd { display: flex; align-items: center; gap: 9px; flex-shrink: 0; height: 19px; }
.apvd-dash {
  width: 13px; height: 2px; border-radius: 1px; flex-shrink: 0;
  background: linear-gradient(90deg, rgba(140, 190, 235, 0.15) 0%, #9ECBF0 100%);
}
.apvd-sec-hd > span {
  font-size: var(--apvd-fs-h); font-weight: 600; letter-spacing: 1px; white-space: nowrap;
  color: #DCEBF9;
}
.apvd-sec-hd > em { flex: 1; height: 1px; min-width: 10px; background: linear-gradient(90deg, rgba(150, 200, 245, 0.18) 0%, rgba(150, 200, 245, 0) 100%); }

/* 图内小标题：与「平均用时」同一套字，左侧不留装饰，右侧用一道发丝线收到边 */
.apvd-sub { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
/* 与卡片里的「平均用时」同一套字（字号 / 字重 / 字距 / 颜色），只在前面多一道起头横线 */
.apvd-sub > span {
  font-size: var(--apvd-fs); font-weight: 400; letter-spacing: 0.5px; white-space: nowrap;
  color: rgba(202, 221, 238, 0.72);
}
.apvd-sub > em { flex: 1; height: 1px; min-width: 8px; background: linear-gradient(90deg, rgba(150, 200, 245, 0.10) 0%, rgba(150, 200, 245, 0) 100%); }

/* ============================================================
   一、受理概览：2×2 卡（铺满分区，卡内居中）
   ============================================================ */
.apvd-sec-kpi .apvd-kpi { flex: 1; min-height: 0; }
.apvd-kpi { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr)); gap: 8px; }
.apvd-k {
  --apvd-c: #C99055; --apvd-hi: #F5CE94; --apvd-glow: rgba(245, 206, 148, 0.26);
  position: relative; overflow: hidden; padding: 7px 10px; border-radius: 9px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
  background:
    radial-gradient(120% 130% at 50% -22%, color-mix(in srgb, var(--apvd-c) 16%, transparent) 0%, rgba(255, 255, 255, 0) 62%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.012) 100%);
  border: 1px solid rgba(255, 255, 255, 0.07);
  box-shadow: inset 2px 0 0 0 var(--apvd-c), inset 0 0 16px rgba(0, 0, 0, 0.14);
}
/* 受理通过 → 玉绿；受理中 → 琥珀（默认兜底）；超时未批 → 暖红；受理通过率 → 钢蓝 */
.apvd-k[data-tone="green"] { --apvd-c: #4E9E76; --apvd-hi: #96DFB6; --apvd-glow: rgba(127, 211, 168, 0.26); }
.apvd-k[data-tone="amber"] { --apvd-c: #C99055; --apvd-hi: #F5CE94; --apvd-glow: rgba(245, 206, 148, 0.26); }
.apvd-k[data-tone="blue"]  { --apvd-c: #4A76B8; --apvd-hi: #9CC2EC; --apvd-glow: rgba(156, 194, 236, 0.26); }
.apvd-k[data-tone="red"]   { --apvd-c: #B4573F; --apvd-hi: #F3A992; --apvd-glow: rgba(243, 169, 146, 0.24); }

.apvd-k-k { font-size: var(--apvd-fs); letter-spacing: 0.4px; color: rgba(202, 221, 238, 0.74); white-space: nowrap; }
.apvd-k-v { display: flex; align-items: baseline; justify-content: center; gap: 1px; margin-top: 5px; }
.apvd-k-v > b {
  font-family: var(--font-mono); font-size: 25px; font-weight: 700; line-height: 1.04;
  letter-spacing: 0.2px; font-variant-numeric: tabular-nums;
  background: linear-gradient(180deg, var(--apvd-hi) 0%, var(--apvd-c) 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: var(--apvd-hi);
  filter: drop-shadow(0 0 10px var(--apvd-glow));
}
.apvd-k-v > i { font-style: normal; font-size: var(--apvd-fs); color: rgba(186, 208, 227, 0.6); }
.apvd-k-s { margin-top: 5px; font-size: var(--apvd-fs); letter-spacing: 0.2px; color: rgba(188, 209, 228, 0.62); white-space: nowrap; }
.apvd-k-s > b { font-family: var(--font-mono); font-weight: 600; color: rgba(222, 236, 248, 0.92); }

@media (min-width: 2048px) {
  .apvd-kpi { gap: 10px; }
  .apvd-k { padding: 12px 14px; border-radius: 10px; }
  .apvd-k-v { margin-top: 7px; }
  .apvd-k-v > b { font-size: 34px; }
  .apvd-k-s { margin-top: 7px; }
}

/* ============================================================
   二、受理用时：读数 + 比例轨 + 趋势，同处一张包围盒
   ============================================================ */
/* 卡片内含趋势图，分区不再允许被压到内容之下（压下去会被卡片裁掉坐标轴） */
.apvd-sec-time { min-height: min-content; }
/* 读数 + 趋势同处一张卡：卡片本身是一列 flex，趋势图吃掉剩余高度 */
.apvd-time {
  position: relative; overflow: hidden;
  flex: 1 1 auto; min-height: 0;
  display: flex; flex-direction: column;
  padding: 9px 12px 10px; border-radius: 10px;
  background:
    radial-gradient(120% 150% at 6% -30%, rgba(150, 200, 245, 0.13) 0%, rgba(150, 200, 245, 0) 62%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.055) 0%, rgba(255, 255, 255, 0.012) 100%);
  border: 1px solid rgba(255, 255, 255, 0.075);
  /* 不再用左侧竖条做修饰，整块靠顶部高光 + 内发光立住 */
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), inset 0 0 22px rgba(0, 0, 0, 0.16);
}
.apvd-time::after {
  content: ""; position: absolute; right: -26px; top: -34px; width: 150px; height: 108px; pointer-events: none;
  background: radial-gradient(closest-side, rgba(190, 225, 255, 0.12) 0%, rgba(150, 200, 245, 0) 100%);
}
.apvd-time-top { position: relative; z-index: 1; flex-shrink: 0; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.apvd-time-k { font-size: var(--apvd-fs); font-weight: 400; letter-spacing: 0.5px; color: rgba(202, 221, 238, 0.72); white-space: nowrap; }
.apvd-time-d {
  flex-shrink: 0; display: inline-flex; align-items: baseline; gap: 3px;
  font-size: var(--apvd-fs-s); font-weight: 600; letter-spacing: 0.2px;
  padding: 3px 9px; border-radius: 999px; white-space: nowrap;
  color: #9BE3BE; background: rgba(78, 158, 118, 0.16); border: 1px solid rgba(127, 211, 168, 0.3);
  transition: color 200ms ease, background 200ms ease, border-color 200ms ease;
}
.apvd-time-d > b { font-family: var(--font-mono); font-weight: 700; font-size: 13px; }
.apvd-time-d[data-tone="even"] { color: #C2D3E2; background: rgba(120, 146, 172, 0.18); border-color: rgba(194, 211, 226, 0.26); }
.apvd-time-d[data-tone="over"] { color: #F7B29C; background: rgba(180, 87, 63, 0.2); border-color: rgba(240, 164, 140, 0.34); }

.apvd-time-mid { position: relative; z-index: 1; flex-shrink: 0; display: flex; align-items: baseline; gap: 8px; margin-top: 1px; }
.apvd-time-v { display: flex; align-items: baseline; gap: 4px; }
.apvd-time-v > b {
  font-family: var(--font-mono); font-size: 28px; font-weight: 700; line-height: 1.04;
  letter-spacing: 0.2px; font-variant-numeric: tabular-nums;
  background: linear-gradient(180deg, #FFFFFF 0%, #DCEBF9 38%, #9FC4E4 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: #DCEBF9;
  filter: drop-shadow(0 0 12px rgba(150, 200, 245, 0.34));
}
.apvd-time-v > i { font-style: normal; font-size: var(--apvd-fs); color: rgba(186, 208, 227, 0.55); }

/* 比例轨：量程即 KPI（0~4 h），实心段到当前均时，右端一道高位刻度 + 徽标 */
.apvd-time-track {
  position: relative; flex-shrink: 0; height: 4px; margin-top: 10px; border-radius: 2px;
  background: rgba(255, 255, 255, 0.055);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04);
}
.apvd-time-fill {
  position: absolute; left: 0; top: 0; bottom: 0; width: 0; border-radius: 2px;
  background: linear-gradient(90deg, rgba(64, 124, 96, 0.7) 0%, #8FD9B0 100%);
  box-shadow: 0 0 10px -2px rgba(143, 217, 176, 0.75);
  transition: width 560ms cubic-bezier(0.32, 0.72, 0, 1), background 240ms ease;
}
.apvd-time-dot {
  position: absolute; left: 0; top: 50%; width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px;
  border-radius: 50%; background: #EBFBF3;
  box-shadow: 0 0 10px 1px rgba(143, 217, 176, 0.85);
  transition: left 560ms cubic-bezier(0.32, 0.72, 0, 1), background 240ms ease;
}
/* KPI 管控位：轨道右端的琥珀竖标（量程终点即管控线） */
.apvd-time-kpi {
  position: absolute; right: -1px; top: -5px; bottom: -5px; width: 2px; border-radius: 1px;
  background: linear-gradient(180deg, rgba(245, 206, 148, 0) 0%, #F5CE94 32%, #F5CE94 68%, rgba(245, 206, 148, 0) 100%);
  box-shadow: 0 0 8px rgba(224, 169, 104, 0.75);
}
#apvd-time[data-tone="even"] .apvd-time-fill { background: linear-gradient(90deg, rgba(90, 112, 136, 0.75) 0%, #AFC6DA 100%); box-shadow: 0 0 10px -2px rgba(175, 198, 218, 0.7); }
#apvd-time[data-tone="even"] .apvd-time-dot { background: #EEF5FB; box-shadow: 0 0 10px 1px rgba(175, 198, 218, 0.8); }
#apvd-time[data-tone="over"] .apvd-time-fill { background: linear-gradient(90deg, rgba(150, 66, 46, 0.75) 0%, #E08A6E 100%); box-shadow: 0 0 10px -2px rgba(224, 138, 110, 0.8); }
#apvd-time[data-tone="over"] .apvd-time-dot { background: #FFE6DC; box-shadow: 0 0 10px 1px rgba(224, 138, 110, 0.85); }

.apvd-time-axis { flex-shrink: 0; display: flex; align-items: center; justify-content: space-between; margin-top: 7px; }
.apvd-time-axis > span { font-family: var(--font-mono); font-size: var(--apvd-fs-s); letter-spacing: 0.4px; color: rgba(188, 212, 234, 0.52); }
/* KPI 徽标：琥珀描边 + 内发光 + 前置读数点，作为整卡的量化基准被突出
   结构＝「KPI 管控标准」（说明，弱）＋「4h」（读数，强）——文字与数值用两级字重分开 */
.apvd-kpi-badge {
  display: inline-flex; align-items: baseline; gap: 5px;
  padding: 3px 10px 3px 9px; border-radius: 999px;
  font-size: var(--apvd-fs-s); letter-spacing: 0;
  color: #FFE2B6;
  background: linear-gradient(180deg, rgba(224, 169, 104, 0.24) 0%, rgba(224, 169, 104, 0.08) 100%);
  border: 1px solid rgba(224, 169, 104, 0.46);
  box-shadow: 0 0 14px -3px rgba(224, 169, 104, 0.8), inset 0 1px 0 rgba(255, 255, 255, 0.14);
  white-space: nowrap;
}
/* 前置读数点：与文字基线对齐，不吃行高 */
.apvd-kpi-badge::before {
  content: ""; width: 4px; height: 4px; border-radius: 50%; flex-shrink: 0;
  align-self: center;
  background: #F5CE94; box-shadow: 0 0 6px 1px rgba(245, 206, 148, 0.95);
}
.apvd-kpi-badge > em {
  font-style: normal; font-weight: 500; letter-spacing: 0.5px;
  color: rgba(255, 226, 182, 0.76);
}
.apvd-kpi-badge > i {
  font-style: normal; font-family: var(--font-mono); font-weight: 700;
  font-size: 1.12em; letter-spacing: 0.2px; color: #FFE2B6;
  text-shadow: 0 0 10px rgba(245, 206, 148, 0.45);
}
@media (min-width: 2048px) {
  .apvd-time { padding: 12px 14px 13px; border-radius: 11px; }
  .apvd-time-d { padding: 4px 11px; }
  .apvd-time-d > b { font-size: 15px; }
  .apvd-time-v > b { font-size: 38px; }
  .apvd-kpi-badge { padding: 4px 11px 4px 10px; }
}

/* —— 趋势图（同一张卡内，读数区与图之间一条发丝分隔） —— */
.apvd-time-sep {
  flex-shrink: 0; display: block; height: 1px; margin: 7px 0 5px;
  background: linear-gradient(90deg, rgba(150, 200, 245, 0.16) 0%, rgba(150, 200, 245, 0.05) 62%, rgba(150, 200, 245, 0) 100%);
}
.apvd-time .apvd-sub { margin-bottom: 1px; }
/* 趋势图定高：不再 flex:1 去吃分区余量，否则面板越高图被拉得越高（这块占位就是这么变大的） */
.apvd-chart { position: relative; margin-top: 0; flex: 0 1 132px; min-height: 104px; }
.apvd-chart svg { display: block; width: 100%; height: 100%; overflow: visible; }
.apvd-chart .apvd-g-grid { stroke: rgba(150, 200, 245, 0.085); stroke-width: 1; }
.apvd-chart .apvd-g-base { stroke: rgba(150, 200, 245, 0.18); stroke-width: 1; }
.apvd-chart .apvd-g-axis { fill: rgba(186, 211, 232, 0.56); font-family: var(--font-mono); font-size: var(--apvd-fs-s); letter-spacing: 0.3px; }
.apvd-chart .apvd-g-area { fill: url(#apvdArea); }
.apvd-chart .apvd-g-line { fill: none; stroke: #8FC4F0; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.apvd-chart .apvd-g-dot { fill: #0E1620; stroke: #B6DBF8; stroke-width: 1.6; }
.apvd-chart .apvd-hov { transition: opacity 120ms ease; }
.apvd-chart .apvd-hov-line { stroke: rgba(160, 208, 245, 0.32); stroke-width: 1; stroke-dasharray: 2 3; }
.apvd-chart .apvd-hov-dot { fill: #0E1620; stroke: #E4F1FD; stroke-width: 2.2; }

/* 悬浮明细气泡 */
.apvd-tip {
  position: absolute; left: 0; top: 0; z-index: 4;
  /* 位置由 JS 按指针逐帧计算并夹在图内；这里再兜一层宽度上限，窄图时不会撑破容器 */
  max-width: calc(100% - 8px);
  display: flex; flex-direction: column; gap: 3px; align-items: flex-start;
  padding: 8px 11px; border-radius: 9px; pointer-events: none;
  background: rgba(12, 17, 24, 0.94);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.11);
  box-shadow: 0 14px 30px -14px rgba(0, 0, 0, 0.85), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  opacity: 0; transform: translateY(3px);
  transition: opacity 130ms ease, transform 140ms ease;
}
.apvd-tip.on { opacity: 1; transform: none; }
.apvd-tip-d { font-size: var(--apvd-fs-s); letter-spacing: 0.4px; color: rgba(184, 208, 230, 0.7); white-space: nowrap; }
.apvd-tip-v { display: flex; align-items: baseline; gap: 3px; font-family: var(--font-mono); color: #EAF4FD; }
.apvd-tip-v > b { font-size: 19px; font-weight: 700; letter-spacing: 0.2px; }
.apvd-tip-v > i { font-style: normal; font-size: var(--apvd-fs-s); color: rgba(184, 208, 230, 0.66); }
.apvd-tip-c { font-size: var(--apvd-fs-s); letter-spacing: 0.2px; color: #9BE3BE; }
.apvd-tip-c[data-tone="even"] { color: #C2D3E2; }
.apvd-tip-c[data-tone="over"] { color: #F7B29C; }

/* ============================================================
   三 / 四、明细表（任务性质）与地区条（来源地区）
   ============================================================ */
.apvd-tbl { flex: 1; min-width: 0; min-height: min-content; display: flex; flex-direction: column; }
/* 无表头：列宽只由数据行决定（件数带「件」后比纯数字宽，列给到 4.4em） */
.apvd-nat-tbl { --t-pad-l: 9px; --t-pad-r: 8px; --t-num: 4.4em; }
.apvd-tbody {
  list-style: none; margin: 0; padding: 0; flex: 1; min-height: min-content;
  display: flex; flex-direction: column;
}

/* —— 任务性质：上下结构（环形居中在上、明细表全宽在下） —— */
.apvd-nat { flex: 1; min-height: 0; display: flex; flex-direction: column; align-items: stretch; gap: 8px; }
/* 上下堆叠后环形改由「高度」定尺寸：宽度按 1:1 从高度推出、水平居中。
   基准 150 / 下限 76 / 上限 188 —— 去掉表头后腾出的高度补到这里；分区高度有波动时先由它吸收 */
.apvd-donut {
  flex: 1 1 150px; align-self: center;
  min-height: 76px; max-height: 188px;
  width: auto; min-width: 100px;
  aspect-ratio: 1 / 1;
}
/* 上下结构里明细表与环形分摊余量：环形到上限后，多出的高度归明细行（行变厚而不是拉缝） */
.apvd-nat > .apvd-tbl { flex: 1 1 auto; }
.apvd-donut svg { display: block; width: 100%; height: 100%; }
.apvd-d-seg { transition: stroke-dasharray 620ms cubic-bezier(0.32, 0.72, 0, 1), opacity 170ms ease, stroke-width 170ms ease; }
.apvd-dc-v { fill: #F4FAFE; font-family: var(--font-mono); font-size: 22px; font-weight: 700; letter-spacing: 0.4px; }
.apvd-dc-u { fill: rgba(180, 205, 226, 0.55); font-size: var(--apvd-fs-s); letter-spacing: 0.5px; }

/* 明细行：左侧色标立条 + 该段色的极淡横向牵引底 + 件数/占比两列对齐。
   行块随分区等高（有余量时变厚而不是拉出大缝），行距 3px 保证五条读得开 */
.apvd-nat-tbl .apvd-tbody { gap: 3px; }
.apvd-nat-tbl .apvd-tbody > li {
  position: relative; flex: 1 1 auto; min-height: 21px;
  display: grid; grid-template-columns: minmax(0, 1fr) var(--t-num, 4.4em) 3.4em;
  column-gap: 8px; align-items: center;
  padding: 0 var(--t-pad-r, 8px) 0 var(--t-pad-l, 9px); border-radius: 6px;
  font-size: var(--apvd-fs); line-height: 1.3;
  background: linear-gradient(90deg, color-mix(in srgb, var(--seg-c) 12%, transparent) 0%, rgba(255, 255, 255, 0) 62%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.03);
  transition: background 180ms ease, box-shadow 180ms ease;
}
.apvd-nat-tbl .apvd-tbody > li::before {
  content: ""; position: absolute; left: 0; top: 50%; width: 2px; height: 13px; margin-top: -6.5px;
  border-radius: 1px; background: var(--seg-c); box-shadow: 0 0 7px -1px var(--seg-c);
}
.apvd-nat-tbl .apvd-tbody > li:hover {
  background: linear-gradient(90deg, color-mix(in srgb, var(--seg-c) 20%, transparent) 0%, rgba(255, 255, 255, 0.02) 70%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
}
.apvd-l-name { display: flex; align-items: center; gap: 7px; color: rgba(210, 227, 242, 0.86); letter-spacing: 0.2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.apvd-l-name > i { width: 6px; height: 6px; border-radius: 1.5px; flex-shrink: 0; background: var(--seg-c); box-shadow: 0 0 7px -1px var(--seg-c); }
.apvd-l-n { display: flex; align-items: baseline; justify-content: center; gap: 2px; font-family: var(--font-mono); color: #DCEBF7; letter-spacing: 0.2px; }
.apvd-l-n > b { font-weight: 600; font-variant-numeric: tabular-nums; }
.apvd-l-n > i { font-style: normal; font-size: var(--apvd-fs-s); color: rgba(184, 208, 230, 0.5); }
.apvd-l-p { text-align: center; font-family: var(--font-mono); color: rgba(196, 218, 236, 0.66); font-variant-numeric: tabular-nums; }

/* —— 环形 ↔ 明细行 联动：指到哪一类，那一类环段加粗提亮、其余压暗，对应明细行同步点亮 —— */
.apvd-nat.linking .apvd-d-seg { opacity: 0.30; }
.apvd-nat.linking .apvd-d-seg.hot { opacity: 1; stroke-width: 16; }
.apvd-nat-tbl .apvd-tbody > li { cursor: default; }
.apvd-nat-tbl .apvd-tbody > li.is-hot {
  background: linear-gradient(90deg, color-mix(in srgb, var(--seg-c) 26%, transparent) 0%, rgba(255, 255, 255, 0.05) 76%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.10);
}
.apvd-nat-tbl .apvd-tbody > li.is-hot .apvd-l-name { color: #FFFFFF; }
.apvd-nat-tbl .apvd-tbody > li.is-hot .apvd-l-p { color: rgba(226, 240, 252, 0.86); }
@media (prefers-reduced-motion: reduce) { .apvd-d-seg { transition: none; } .apvd-reg-track.roll { animation: none; } }
@media (min-width: 2048px) {
  .apvd-nat { gap: 12px; }
  .apvd-donut { max-height: 208px; }
  .apvd-nat-tbl { --t-pad-l: 10px; --t-pad-r: 9px; }
}

/* —— 来源地区：色条只占「地区名」那一列，件数 / 占比固定成右侧两列，条与数字永不重叠 —— */
/* —— 来源地区：固定视口内无缝循环滚动（面板整体禁滚，长列表就地滚） —— */
.apvd-reg {
  --r-row: 25px; --r-gap: 3px;
  position: relative; overflow: hidden;
  /* 视口固定 5 行；面板高度吃紧时自动缩到 3 行，绝不把面板撑出滚动条 */
  flex: 0 1 calc(5 * var(--r-row) + 4 * var(--r-gap));
  min-height: calc(3 * var(--r-row) + 2 * var(--r-gap));
  /* 分区统一 gap 7px，但列表行自带底色与描边、没有卡片那样的内边距，观感上更贴标题，
     这里补 3px 让「标题 → 首行」的视觉距离与带内边距的卡片分区对齐 */
  margin: 3px 0 0;
}
/* 用长写而非 animation 简写：简写会把 JS 按条数算出的 duration 重置成 0 */
.apvd-reg-track.roll {
  will-change: transform;
  animation-name: apvdRegRoll;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}
/* 指针停在区里就暂停，方便读某一行的数字 */
.apvd-reg:hover .apvd-reg-track.roll { animation-play-state: paused; }
@keyframes apvdRegRoll { from { transform: translateY(0); } to { transform: translateY(-50%); } }
.apvd-reg-grp { list-style: none; margin: 0; padding: 0; }
.apvd-reg li {
  position: relative; overflow: hidden; isolation: isolate;
  height: var(--r-row); margin-bottom: var(--r-gap);
  display: grid; grid-template-columns: minmax(0, 1fr) 4.2em 3.4em;
  column-gap: 8px; align-items: center;
  padding: 0 var(--r-pad-r, 8px) 0 var(--r-pad-l, 9px); border-radius: 7px;
  font-size: var(--apvd-fs);
  background: rgba(255, 255, 255, 0.035);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.045);
  transition: box-shadow 180ms ease;
}
.apvd-reg li:hover { box-shadow: inset 0 0 0 1px rgba(150, 200, 245, 0.26); }
/* 右端让出：4.2em + 3.4em 两个数字列、两道 8px 列距、一个右内边距（em 随字号自适应） */
.apvd-r-bar { position: absolute; left: 0; top: 0; bottom: 0; right: calc(7.6em + 16px + var(--r-pad-r, 8px)); z-index: -1; }
.apvd-r-bar > em {
  position: relative; display: block; height: 100%; width: 0;
  border-radius: 6px 2px 2px 6px;
  background: linear-gradient(90deg, rgba(56, 92, 130, 0.55) 0%, rgba(110, 160, 210, 0.42) 62%, rgba(143, 196, 240, 0.3) 100%);
  transition: width 620ms cubic-bezier(0.32, 0.72, 0, 1);
}
/* 条右端一道亮边，让「条的长度」读得出来 */
.apvd-r-bar > em::after {
  content: ""; position: absolute; right: 0; top: 0; bottom: 0; width: 1.5px;
  background: rgba(180, 220, 252, 0.75); box-shadow: 0 0 8px rgba(150, 200, 245, 0.85);
}
.apvd-r-name {
  position: relative; z-index: 1;
  color: rgba(226, 240, 252, 0.94); letter-spacing: 0.2px;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.55);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* 数字两列在色条之外，自带底色隔开，读数不受条的深浅影响 */
.apvd-reg .apvd-l-n { position: relative; z-index: 1; color: #EAF4FD; text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5); }
.apvd-reg .apvd-l-p { position: relative; z-index: 1; text-shadow: 0 1px 4px rgba(0, 0, 0, 0.45); }
/* 榜首：同族蓝提亮一档（条更实、右端亮边更锐），不与其余地区换色相 */
.apvd-reg li:first-child { box-shadow: inset 0 0 0 1px rgba(143, 196, 240, 0.34); }
.apvd-reg li:first-child .apvd-r-bar > em {
  background: linear-gradient(90deg, rgba(52, 96, 152, 0.62) 0%, rgba(96, 152, 214, 0.54) 58%, rgba(158, 206, 250, 0.4) 100%);
}
.apvd-reg li:first-child .apvd-r-bar > em::after { background: rgba(206, 232, 253, 0.92); box-shadow: 0 0 9px rgba(150, 200, 245, 0.92); }
.apvd-reg li:first-child .apvd-r-name { color: #F2F8FF; }
@media (min-width: 2048px) {
  .apvd-reg { --r-row: 30px; --r-gap: 4px; }
  .apvd-sec-reg { --r-pad-l: 11px; --r-pad-r: 10px; }
  .apvd-reg li { border-radius: 8px; }
}

/* ============================================================
   矮屏紧凑档（1366×768 / 1280×720）
   —— 只压间距与数值字号，正文基准不动（正文再小就难读了）
   ============================================================ */
@media (max-height: 900px) {
  #apvd-panel .apvd-body { gap: 9px; padding: 11px 13px 12px; }
  .apvd-sec { gap: 6px; }
  .apvd-sec-hd { height: 17px; }
  .apvd-chart { flex-basis: 118px; min-height: 94px; }
  .apvd-kpi { gap: 7px; }
  .apvd-k { padding: 7px 9px; }
  .apvd-k-v > b { font-size: 22px; }
  .apvd-nat { gap: 8px; }
  .apvd-time { padding: 8px 11px 9px; }
  .apvd-time-v > b { font-size: 26px; }
  .apvd-time-track { margin-top: 8px; }
  .apvd-time-axis { margin-top: 5px; }
  .apvd-time-sep { margin: 7px 0 6px; }
}

/* 更矮的屏（≤820px 高）：字号整体降一档（12 / 11），间距再收，保证四块读完 */
@media (max-height: 820px) {
  :root { --apvd-fs: 12px; --apvd-fs-s: 11px; --apvd-fs-h: 13px; }
  #apvd-panel .apvd-body { gap: 7px; padding: 9px 12px 10px; }
  .apvd-sec { gap: 4px; }
  .apvd-sec-hd { height: 16px; }
  .apvd-chart { flex-basis: 100px; min-height: 80px; }
  .apvd-kpi { gap: 6px; }
  .apvd-k { padding: 4px 8px; border-radius: 8px; }
  .apvd-k-v { margin-top: 2px; }
  .apvd-k-v > b { font-size: 19px; }
  .apvd-k-s { margin-top: 2px; }
  .apvd-time { padding: 6px 10px 7px; }
  .apvd-time-v > b { font-size: 22px; }
  .apvd-time-track { margin-top: 6px; }
  .apvd-time-axis { margin-top: 4px; }
  .apvd-time-sep { margin: 5px 0 4px; }
  .apvd-kpi-badge { padding: 2px 8px 2px 7px; }
  .apvd-nat-tbl { --t-pad-l: 8px; --t-pad-r: 6px; }
  .apvd-sec-reg { --r-pad-l: 8px; --r-pad-r: 6px; }
  .apvd-reg { --r-row: 22px; --r-gap: 2px; }
  .apvd-reg li { border-radius: 6px; }
  .apvd-sel-btn { height: 27px; font-size: 12.5px; }
}

/* —— 数值刷新：轻推一下，避免生硬跳数 —— */
.apvd-num { transition: opacity 180ms ease, transform 180ms ease; }
.apvd-num.swap { opacity: 0; transform: translateY(-3px); }
@media (prefers-reduced-motion: reduce) {
  #apvd-panel, .apvd-toggle, .apvd-r-bar > em, .apvd-num,
  .apvd-time-fill, .apvd-time-dot, .apvd-d-seg, .apvd-tip { transition: none; }
  body.as-approve-scene #apvd-panel.apvd-in, body.as-approve-scene .apvd-toggle.apvd-in { animation: none; }
}