/* ============================================================
   飞行审批 · 右翼信息面板（#apvr-panel）
   —— 高度 / 宽度 / 毛玻璃 / 动态透明度与运行调度左翼 #fp-panel 完全同源：
      高度走 --ac-top / --ac-bottom，宽度走 --ac-w，玻璃配方与进场节奏逐项对齐，
      仅把光源方向左右镜像（左翼高光在右上 → 右翼高光在左上），两面读作一对
   —— 右缘停靠：面板右缘落在 --sr-right（本页场景标尺 / 高度标尺都已关停，右缘无需再为标尺让位），
      指北针与九天助手整列改挂到面板左侧（见 index.html 中 body.as-approve-scene 的 right 覆盖）
      （与综合态势 #as-panel 的既有关系同款；面板收起后把手回贴屏缘待命）
   —— 仅在 body.as-approve-scene 下显示，返回综合态势自动退场
   —— 内容由 #apvr-content 承载（业务内容待接入，外壳先行）
   ============================================================ */

:root {
  /* 面板停靠位：本页贴右缘（与上下 16px 呼吸位同口径）。
     原先取 --as-right（综合态势右翼基准，含标尺占位）会在面板右侧留一条空档，
     而本页既无场景标尺也无高度标尺，那条空档纯属浪费，故改为 --sr-right */
  --apvr-right: var(--sr-right);
  /* 展开态把手位：贴面板左缘外侧 */
  --apvr-tg-on: calc(var(--apvr-right) + var(--ac-w));
  /* 收起态把手位：与左翼 #fp-panel 的 --ac-edge（0px）左右对称——紧贴屏幕右缘待命。
     本页高度标尺已关停，不再需要「贴标尺左缘」那套让位口径；
     把手右侧本身是直角（border-radius: 8px 0 0 8px），贴边后正好收口 */
  --apvr-tg-off: 0px;
  /* 展开态标尺位：标尺在本页已隐藏，此令牌仅作保留（恢复标尺时可直接启用） */
  --apvr-rail-open: calc(var(--apvr-right) + var(--ac-w) + var(--ac-tw) + var(--alt-gap));
}

/* —— 面板主体：与 #fp-panel 同尺寸、同玻璃、同透明度曲线 —— */
#apvr-panel {
  position: absolute; right: var(--apvr-right); top: var(--ac-top); bottom: var(--ac-bottom);
  width: var(--ac-w); z-index: 10;
  display: flex; flex-direction: column; overflow: hidden;
  background:
    /* 左上角极光紫光晕：左翼的镜像——光源中心落在面板外左上角（不出现光斑实心点）。
       原来另有一团挂在 ::after 上，::after 现让给顶部高光线，光晕并进这一层 */
    radial-gradient(40% 23% at 0% 0%, rgba(196, 176, 255, 0.30) 0%, rgba(148, 118, 238, 0.06) 46%, rgba(148, 118, 238, 0) 74%),
    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) { #apvr-panel { border-radius: 14px; } }

/* —— 边框上跑的一道光 ——
   默认没有。只有检测真的在跑（.apvs-on，由智能检测脚本在开跑时挂上、
   结论落定那一刻撤掉）时才亮起来：光束是「这台机器正在算这一单」的外化，
   算完了这束光就该收住——只按「智能检测开关打开」或「进了详情」
   去点亮是不对的，那两个条件都是常驻的，光会整天绕着边框转。
   · 底子不动，还是那条 1px rgba(255,255,255,.11) 的细边，光只往上面叠；
   · 走 SVG 的 stroke-dasharray 而不是 conic-gradient：conic 按角度转，窄高面板上
     竖边占的圆心角只有五十来度，光会「刷」一下冲过去、横边又几乎卡住；按路径
     长度走 dash 才是一束等长、匀速的光滑过四条边（周长由 JS 量给您）；
   · 2px + 圆头：1px 纯白在真实像素下会被抗锯齿稀释成灰，亮不起来 */
#apvr-panel .apvr-edge {
  position: absolute; inset: 0; width: 100%; height: 100%;
  pointer-events: none; z-index: 3; overflow: hidden;
}
#apvr-panel .apvr-edge-p {
  fill: none; stroke: transparent; stroke-width: 2; stroke-linecap: round;
  x: 1px; y: 1px; width: calc(100% - 2px); height: calc(100% - 2px);
  rx: 11px; ry: 11px;
  stroke-dasharray: var(--apvr-seg, 150px) var(--apvr-gap, 2800px);
  transition: stroke 320ms ease;
}
@media (min-width: 2048px) {
  #apvr-panel .apvr-edge-p { rx: 13px; ry: 13px; }
}
/* 门控：只在检测跑着的那几秒（.apvs-on）让光跑起来。
   结论一落定 .apvs-on 就被撤掉，光跟着回到透明——收得干净，
   不会留下「检测完了边框还在转」这种骗人的信号 */
#apvr-panel.apvs-on .apvr-edge-p {
  stroke: #FFFFFF;
  animation: apvrRun 8s linear infinite;
}
@keyframes apvrRun {
  from { stroke-dashoffset: 0; }
  to   { stroke-dashoffset: calc(-1 * var(--apvr-len, 2950px)); }
}
/* 面板收起后整块已经透明+不可点，没必要继续算，先按住 */
#apvr-panel.collapsed .apvr-edge-p { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
  /* 关掉动效时让它停住不跑，光仍在右上角那一格，不至于一片死白 */
  #apvr-panel.apvs-on .apvr-edge-p { animation: none; }
}
/* 顶部那条静态高光：原样留在 ::before 上（左上角紫光晕并进了面板背景，位子腾给它） */
#apvr-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%);
}

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

/* —— 进场：滑入 + 淡入一次（右翼自右向左滑入，与左翼方向互为镜像）—— */
@keyframes apvrIn {
  from { opacity: 0; transform: translateX(24px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes apvrInSoft {
  from { opacity: 0; }
  to   { opacity: 1; }
}
/* 200ms 起手：略滞后于柔幕揭幕，镜头快到位时面板才滑进来（与左翼 #apvd-panel 同拍） */
body.as-approve-scene #apvr-panel.apvr-in { animation: apvrIn 540ms cubic-bezier(0.22, 0.61, 0.36, 1) 200ms both; }
body.as-approve-scene .apvr-toggle.apvr-in { animation: apvrInSoft 360ms ease 420ms both; }
/* 收起时立刻让出动画控制权，否则 fill 会把面板按在可见态 */
body.as-approve-scene #apvr-panel.collapsed.apvr-in { animation: none; }
/* 首帧压住：元素一插入就是终态会闪一帧，先 .pre 兜住，再挂 .apvr-in 从 0 播 */
body.as-approve-scene #apvr-panel.pre { animation: none !important; transition: none !important; opacity: 0 !important; transform: translateX(16px) !important; }
body.as-approve-scene .apvr-toggle.pre { animation: none !important; transition: none !important; opacity: 0 !important; }

/* —— 收起 / 展开把手：贴面板左缘外侧，垂直居中于面板（与左翼 .fp-toggle 同款镜像）—— */
.apvr-toggle {
  position: absolute; right: var(--apvr-tg-on);
  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-right: none;
  border-radius: 8px 0 0 8px;
  color: rgba(205, 224, 240, 0.72);
  opacity: 0; pointer-events: none;
  transition: color 180ms ease, background 180ms ease, border-color 180ms ease,
              right 340ms cubic-bezier(0.32, 0.72, 0, 1), opacity 260ms ease;
}
.apvr-toggle:hover { color: #EAF3FB; border-color: rgba(150, 200, 245, 0.4); }
.apvr-toggle svg { width: 13px; height: 13px; }
.apvr-toggle .apvr-ic-expand { display: none; }
body.as-approve-scene .apvr-toggle { opacity: 1; pointer-events: auto; }
body.as-approve-scene #apvr-panel.collapsed ~ .apvr-toggle { right: var(--apvr-tg-off); }
#apvr-panel.collapsed ~ .apvr-toggle .apvr-ic-collapse { display: none; }
#apvr-panel.collapsed ~ .apvr-toggle .apvr-ic-expand { display: block; }

/* —— 标尺让位：本页高度标尺已关停（见 index.html 的 body.as-approve-scene #alt-rail），
      原「展开 → 标尺让到面板左侧」规则一并无用，注释保留，恢复标尺时解回 —— */
/*
body.as-approve-scene.apvr-open #alt-rail { right: var(--apvr-rail-open) !important; }
*/

/* —— 主体：标题 + 内容（弹性滚动） —— */
#apvr-panel .apvr-body {
  flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 10px;
  padding: 12px 12px 14px;
}
/* 2K 档：纵向节奏收一档（12 → 10）。屏更高，一道 12px 的空在 2K 上比 1K 显眼；
   收窄的 4 道缝换来的是列表多出一行卡的空间 */
@media (min-width: 2048px) { #apvr-panel .apvr-body { gap: 10px; padding: 14px 14px 16px; } }

/* 标题行：与 #fp-panel / #apvd-panel 完全同款（蓝白渐变竖条 + 蓝白渐变字 + 收尾发丝线） */
.apvr-head { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.apvr-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);
}
.apvr-title {
  font-size: 13px; 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) { .apvr-title { font-size: 15px; } }
.apvr-hair {
  flex: 1; height: 1px; min-width: 12px;
  background: linear-gradient(90deg, rgba(150, 200, 245, 0.30) 0%, rgba(150, 200, 245, 0.03) 100%);
}

/* ============================================================
   标题行右端：智能检测开关（常驻）+ 详情动作键（临时）
   —— 右端只有一列，件与件之间只隔一条留白，不描框、不加分隔线：
      它们是同一行里的两件事，不是两块区域
   ============================================================ */
.apvr-head-r {
  margin-left: auto; flex-shrink: 0;
  display: flex; align-items: center; gap: 9px;
}

/* 智能检测：一枚玻璃芯片，芯片本身就是控件边界。
   之前两版都不成立——无底的散件太弱（读不出「这里能点」），
   胶囊 + 圆球又太像通用网页控件。这一版：边框只到 10% 白，
   底色是一层几乎看不见的雾，靠文字与方槽把重量撑起来。
   21px 高——比标题高，但仍矮于切卡（36px），不抢层级。 */
.apvr-sw {
  display: inline-flex; align-items: center; gap: 8px; flex-shrink: 0;
  height: 24px; padding: 0 6px 0 8px; border-radius: 7px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.075) 0%, rgba(255, 255, 255, 0.022) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 1px 3px rgba(0, 0, 0, 0.32);
  cursor: pointer; -webkit-appearance: none; appearance: none;
  font-family: inherit;
  transition: border-color 220ms ease, background 220ms ease, box-shadow 220ms ease;
}
.apvr-sw:hover {
  border-color: rgba(255, 255, 255, 0.24);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.11) 0%, rgba(255, 255, 255, 0.04) 100%);
}
.apvr-sw:focus-visible { outline: 2px solid rgba(160, 200, 245, 0.5); outline-offset: 3px; }

/* 文字：12px / 700 / 字距 2，纯冷白压一层极淡的深色投影把笔画从玻璃上抬起来。
   小字号上用渐变是浪费（差几阶色看不出），干脆给足字重和字距——
   它要比标题「紧」：标题是 13px 字距 2.5 的宽排，这里是 12px 的密排 */
.apvr-sw > span {
  font-size: 12px; font-weight: 700; letter-spacing: 2px; white-space: nowrap;
  color: rgba(150, 172, 192, 0.62);
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.45);
  transition: color 200ms ease, text-shadow 200ms ease;
}
.apvr-sw:hover > span { color: rgba(206, 224, 240, 0.9); }
/* 开启：近纯白 + 冷蓝外发光，是全行的第二个亮面（第一是标题） */
.apvr-sw[aria-checked="true"] > span {
  color: #F4FAFF;
  text-shadow: 0 1px 2px rgba(0, 10, 22, 0.6), 0 0 9px rgba(140, 195, 240, 0.42);
}
.apvr-sw[aria-checked="true"]:hover > span {
  color: #FFFFFF;
  text-shadow: 0 1px 2px rgba(0, 10, 22, 0.6), 0 0 11px rgba(150, 205, 248, 0.58);
}

/* 开启：芯片描边转冷蓝（0.45，能看清），底转蓝调，外缘起一层光晕 */
.apvr-sw[aria-checked="true"] {
  border-color: rgba(150, 197, 240, 0.45);
  background: linear-gradient(180deg, rgba(126, 172, 214, 0.22) 0%, rgba(70, 110, 150, 0.11) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2),
              0 0 14px -4px rgba(125, 185, 238, 0.55),
              0 1px 3px rgba(0, 0, 0, 0.3);
}

/* 轨道：15×15 的正方槽，方芯 9×9 用 flex 居中——四边各 3px，严格等距。
   居中是「布局算出来的」，不是用 absolute + translate 凑数值：
   缩放、2K 档、亚像素取整都不会把它推歪 */
.apvr-sw-r {
  display: flex; align-items: center; justify-content: center;
  width: 15px; height: 15px; flex-shrink: 0;
  border-radius: 4px; box-sizing: border-box;
  background: rgba(3, 7, 12, 0.72);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14), inset 0 1px 2px rgba(0, 0, 0, 0.6);
  transition: background 260ms ease, box-shadow 260ms ease;
}
.apvr-sw-r > i {
  display: block; width: 9px; height: 9px; border-radius: 2px;
  background: linear-gradient(180deg, #8A9CAD 0%, #5E7183 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2);
  transform: scale(0.86);
  transition: transform 320ms cubic-bezier(0.2, 1.35, 0.4, 1),
              background 240ms ease, box-shadow 240ms ease;
}
/* 开启：槽通电转蓝，方芯推到满格并转白发光。
   它是一枚「检测在跑」的指示灯，不是一个可以左右拨的档位——
   这块是常驻能力，没有第二档，所以方芯永远在正中间，只变亮度与大小 */
.apvr-sw[aria-checked="true"] .apvr-sw-r {
  background: linear-gradient(180deg, #B7D4EE 0%, #7FA9CD 46%, #5A85AF 100%);
  box-shadow: inset 0 0 0 1px rgba(196, 222, 246, 0.72),
              inset 0 1px 0 rgba(255, 255, 255, 0.26),
              0 0 9px -2px rgba(130, 185, 230, 0.6);
}
.apvr-sw[aria-checked="true"] .apvr-sw-r > i {
  transform: scale(1);
  background: linear-gradient(180deg, #FFFFFF 0%, #E4F0FB 100%);
  box-shadow: 0 0 6px rgba(190, 222, 250, 0.55), 0 1px 2px rgba(4, 16, 30, 0.5),
              inset 0 -1px 0 rgba(120, 160, 200, 0.3), inset 0 1px 0 #FFFFFF;
}
@media (prefers-reduced-motion: reduce) { .apvr-sw-r > i { transition: none; } }
@media (min-width: 2048px) {
  .apvr-sw { height: 27px; gap: 9px; padding: 0 7px 0 9px; }
  .apvr-sw > span { font-size: 13px; letter-spacing: 2.2px; }
  .apvr-sw-r { width: 17px; height: 17px; }
  .apvr-sw-r > i { width: 10px; height: 10px; }
}
/* 详情位面：右端让给「返回列表」——标题已经从「申请」变成「这一份申请」，
   检测开关在这层没有作用对象 */
#apvr-panel[data-view="detail"] .apvr-sw { display: none; }

/* ============================================================
   三切卡：待我受理 / 全部申请 / 重要飞行事件
   —— 对齐综合态势「航空器详情」面板的 .dd-tabs 语言：
      轨底内陷 + 实心琥珀滑块（顶部内高光）+ 切档时顶部琥珀发丝线点亮
      + 一道暖光掠过；滑块三档等宽，走 transform 平移
   ============================================================ */
.apvr-tabs {
  position: relative; flex-shrink: 0; 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);
}
/* 顶部琥珀发丝线：切档时自中轴点亮 → 铺满 → 隐去（不留常驻装饰） */
.apvr-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;
}
.apvr-tabs.swap::before { animation: apvr-swap-line 640ms cubic-bezier(0.22, 1, 0.36, 1); }
@keyframes apvr-swap-line {
  0%   { transform: scaleX(0); opacity: 0.35; }
  40%  { transform: scaleX(1); opacity: 1; }
  100% { transform: scaleX(1); opacity: 0; }
}
/* 一道暖光自左向右掠过轨面（切档瞬间的记忆点），静态不可见 */
.apvr-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%);
}
.apvr-tabs.swap::after { animation: apvr-swap-sheen 560ms cubic-bezier(0.22, 1, 0.36, 1); }
@keyframes apvr-swap-sheen {
  0%   { opacity: 0; transform: translateX(0); }
  16%  { opacity: 1; }
  100% { opacity: 0; transform: translateX(420%); }
}
/* 实心琥珀滑块：三档等宽，位置由脚本 translateX 平移 */
.apvr-tab-ind {
  position: absolute; top: 4px; bottom: 4px; left: 4px; z-index: 1;
  width: calc((100% - 8px) / 3); border-radius: 8px;
  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);
}
.apvr-tab {
  position: relative; z-index: 2; flex: 1; min-width: 0;
  height: 28px; padding: 0 4px; border: none; border-radius: 8px; background: transparent;
  font-family: inherit; font-size: var(--fs-l3); font-weight: 600; letter-spacing: 1.2px;
  color: var(--text-3); white-space: nowrap; cursor: pointer;
  transition: color 200ms ease;
}
.apvr-tab:hover { color: var(--text-2); }
.apvr-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) { .apvr-tab { height: 32px; } }
@media (prefers-reduced-motion: reduce) {
  .apvr-tab-ind, .apvr-tab { transition: none; }
  .apvr-tabs.swap::before, .apvr-tabs.swap::after { animation: none; }
}

/* 滚动区：指示通道放在右缘（常规习惯），内容左缘与标题对齐 */
.apvr-scroller {
  position: relative; flex: 1; min-height: 0; display: flex; margin-right: -12px;
  /* 与抬头对分高度：展开时它把 grow 让出去，高度自然收到 0，而不是被一刀切掉 */
  transition: flex-grow 420ms cubic-bezier(0.22, 1, 0.36, 1), opacity 180ms ease;
}
.apvr-content {
  flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden;
  display: flex; flex-direction: column; gap: 10px;
  padding: 2px 12px 4px 0;
  scrollbar-width: none; -ms-overflow-style: none;
}
.apvr-content::-webkit-scrollbar { width: 0; height: 0; display: none; }
.apvr-scroll {
  position: absolute; right: 6px; top: 2px; bottom: 6px; width: 3px; z-index: 2;
  /* 常驻弱显：滚动条本身就是「这块能滚」的唯一硬证据，藏起来等于不告诉人 */
  opacity: 0.34; pointer-events: none;
  transition: opacity 240ms ease;
}
.apvr-scroller:not(.scrollable) .apvr-scroll { opacity: 0; }
.apvr-scroll i {
  display: block; height: 0; border-radius: 999px;
  background: linear-gradient(180deg, rgba(118, 156, 194, 0.50) 0%, rgba(70, 104, 140, 0.24) 100%);
  box-shadow: 0 0 5px rgba(78, 118, 158, 0.26);
}
.apvr-scroller.is-scrolling .apvr-scroll { opacity: 1; }
@media (min-width: 2048px) {
  .apvr-scroller { margin-right: -14px; }
  .apvr-content { gap: 10px; padding: 2px 14px 2px 0; }
  .apvr-scroll { right: 7px; width: 4px; }
}

/* 内容占位（业务内容接入前）：一道虚线框 + 一行说明，接入后由内容整体替换 */
.apvr-empty {
  flex: 1; min-height: 120px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  border: 1px dashed rgba(150, 200, 245, 0.14); border-radius: 10px;
  color: rgba(184, 206, 228, 0.34);
  font-size: 12px; letter-spacing: 1.2px;
}

/* ============================================================
   筛选区（仅「待我受理」页签显示）
   —— 骨架：入口 + 参数仓
      ① 工具条只有三件东西：日期入口（一枚读数按钮）/ 筛选 / 批量操作。
         日期不再是并排的两枚开关 —— 并排的小控件放在切卡下面，
         怎么调都会被读成第二排页签。这里收成「一个入口」，
         点开是条下一排勾选项 + 起止区间，全部日期语义集中在一处。
      ② 参数仓不是「横线分隔的清单」，是四枚有边界的格子（2×2）。
         标签在左上（小字距）、读数在左下、箭头悬右上。
         有值 = 整格描边转暖 + 读数转暖，一眼看出动过哪几格。
      ③ 浮层仍为全宽实心玻璃，锚在格子下方；空间不够先上翻再压高。
   ============================================================ */
.apvr-filter { flex-shrink: 0; }
/* 筛选槽由三个页签共用，各占一块，切页签只换显示不销毁 DOM：
   · 待我受理   → .apvf-mine（今日 / 明日 + 折叠的精细筛选）
   · 全部申请   → .apvx-filter（编号 / 业务方 / 类型，直接摊开）
   · 重要飞行事件 → .apvk-filter（全部 / 飞行活动 / 飞行计划，一条三档轨）
   排除式写法：谁在台前就只留谁，避免 data-tab 未就绪时误藏 */
#apvr-panel[data-tab="all"] .apvf-mine,
#apvr-panel[data-tab="all"] .apvk-filter,
#apvr-panel[data-tab="mine"] .apvx-filter,
#apvr-panel[data-tab="mine"] .apvk-filter,
#apvr-panel[data-tab="key"] .apvf-mine,
#apvr-panel[data-tab="key"] .apvx-filter { display: none; }

/* —— ① 工具条 —— */
.apvf-bar {
  position: relative;
  display: flex; align-items: center; gap: 6px;
  height: 34px;
}

/* 日期入口：图标 + 读数 + 箭头。透明底，悬停才浮出一层薄雾。
   它是「入口」不是「选项」，所以不描边、不填充，也不带选中态色块 */
.apvf-range {
  position: relative;
  display: inline-flex; align-items: center; gap: 6px;
  max-width: 178px;
  height: 26px; padding: 0 6px 0 7px;
  border: 0; border-radius: 6px;
  background: transparent; cursor: pointer;
  font-family: inherit; font-size: var(--fs-l3); letter-spacing: 0.7px;
  color: rgba(202, 220, 238, 0.76);
  transition: color 180ms ease, background 180ms ease;
}
.apvf-range > svg { width: 12px; height: 12px; flex-shrink: 0; opacity: 0.6; transition: opacity 180ms ease; }
.apvf-range > span {
  min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.apvf-range > i {
  flex-shrink: 0; width: 5px; height: 5px; margin: 0 1px 3px 1px;
  border-right: 1.2px solid currentColor; border-bottom: 1.2px solid currentColor;
  transform: rotate(45deg); opacity: 0.4;
  transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1), opacity 180ms ease;
}
.apvf-range:hover { color: #EDF4FB; background: rgba(255, 255, 255, 0.05); }
.apvf-range:hover > svg { opacity: 0.9; }
.apvf-range[aria-expanded="true"] { color: #F6E1C4; background: rgba(232, 184, 121, 0.1); }
.apvf-range[aria-expanded="true"] > svg { opacity: 0.95; }
.apvf-range[aria-expanded="true"] > i { transform: rotate(-135deg); margin-bottom: 0; opacity: 0.85; }
/* 自定义区间：读数转暖，左侧补一枚小点，说明「不是默认的今日」 */
.apvf-range[data-custom] { color: #F3DCBE; }
.apvf-range[data-custom]::before {
  content: ""; flex-shrink: 0; width: 3.5px; height: 3.5px; border-radius: 50%;
  margin-right: 1px; background: #EFC08A; box-shadow: 0 0 7px rgba(232, 184, 121, 0.75);
}
.apvf-range[data-custom] > svg { display: none; }

/* 筛选：文字按钮 + 内联计数 */
.apvf-more {
  position: relative; flex-shrink: 0;
  margin-left: auto;
  display: inline-flex; align-items: center; gap: 5px;
  height: 26px; padding: 0 7px 0 6px; border: 0; border-radius: 6px;
  background: transparent; cursor: pointer;
  font-family: inherit; font-size: var(--fs-l3); letter-spacing: 0.9px;
  color: rgba(186, 204, 222, 0.64);
  transition: color 190ms ease, background 190ms ease;
}
.apvf-more svg { width: 12px; height: 12px; opacity: 0.74; transition: opacity 190ms ease; }
.apvf-more:hover { color: #EDF4FB; background: rgba(255, 255, 255, 0.05); }
.apvf-more:hover svg { opacity: 1; }
.apvf-more[aria-expanded="true"] { color: #F6D9B0; background: rgba(232, 184, 121, 0.11); }
.apvf-more[aria-expanded="true"] svg { opacity: 1; }
/* 计数：跟在文字后面的小方块 */
.apvf-more::after {
  content: attr(data-count);
  display: none; place-items: center;
  min-width: 14px; height: 14px; padding: 0 4px; border-radius: 4px;
  font-size: 9.5px; font-weight: 700; letter-spacing: 0;
  color: #2A1A08;
  background: linear-gradient(180deg, #F0C48D 0%, #D2994F 100%);
  box-shadow: 0 0 8px -2px rgba(224, 169, 104, 0.55);
}
.apvf-more[data-on]::after { display: inline-grid; }

/* 批量操作：最右的次级动作，比「筛选」再暗一档 */
.apvf-batch {
  position: relative; flex-shrink: 0;
  height: 26px; padding: 0 4px; border: 0; border-radius: 6px;
  background: transparent; cursor: pointer;
  font-family: inherit; font-size: var(--fs-l3); letter-spacing: 0.8px;
  color: rgba(176, 194, 212, 0.44);
  transition: color 180ms ease, background 180ms ease;
}
.apvf-batch::before {
  content: ""; position: absolute; left: -7px; top: 50%; width: 1px; height: 12px; margin-top: -6px;
  background: rgba(255, 255, 255, 0.085); pointer-events: none;
}
.apvf-batch:hover { color: #EDF4FB; background: rgba(255, 255, 255, 0.05); }
.apvf-batch[aria-pressed="true"] { color: #F6E0BE; background: rgba(232, 184, 121, 0.11); }

/* 全局 :focus-visible 会给文本框套一圈 2px 方框，在格子里就是「格中格」。
   本区块的焦点态一律用暖色描边表达，这里统一收掉系统焦点环 */
#apvr-filter :focus-visible { outline: none; }

/* —— ② 日期弹条：两档日期，同一排 ——
   快捷档（今日 / 明日，可共选）+ 区间档（起 → 止），互斥不叠加：
   区间一落点，勾选自动熄；点勾选，区间自动清；有区间时入口右侧长出一枚 ✕ 退回去 */
.apvf-rpop {
  display: grid; grid-template-rows: 0fr; opacity: 0;
  transition: grid-template-rows 300ms cubic-bezier(0.22, 1, 0.36, 1), opacity 200ms ease;
}
.apvf-rpop.on { grid-template-rows: 1fr; opacity: 1; }
.apvf-rpop-in { overflow: hidden; min-height: 0; }
.apvf-rbody {
  display: flex; align-items: center; gap: 8px;
  margin: 5px 0 9px;
  padding: 7px 8px;
  border-radius: 9px;
  background: linear-gradient(180deg, rgba(11, 17, 25, 0.78) 0%, rgba(8, 12, 19, 0.6) 100%);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.06),
    0 12px 24px -20px rgba(0, 0, 0, 0.9);
}

/* 勾选项：与浮层里的选项同一套语汇（小方框 + 文字），不是药丸、不是切卡 */
.apvf-rpick { display: flex; align-items: center; gap: 2px; flex-shrink: 0; transition: opacity 180ms ease; }
.apvf-rc {
  position: relative;
  display: inline-flex; align-items: center; gap: 6px;
  height: 26px; padding: 0 7px; border-radius: 5px;
  cursor: pointer; user-select: none;
  font-size: var(--fs-l3); letter-spacing: 0.4px;
  color: rgba(186, 204, 222, 0.66);
  transition: color 170ms ease, background 170ms ease;
}
.apvf-rc > input { position: absolute; width: 0; height: 0; opacity: 0; pointer-events: none; }
.apvf-rc > i {
  flex-shrink: 0; width: 12px; height: 12px; border-radius: 3px;
  display: grid; place-items: center;
  background: rgba(7, 11, 17, 0.55);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16);
  transition: background 160ms ease, box-shadow 160ms ease;
}
.apvf-rc > i::after {
  content: ""; width: 5px; height: 2.5px;
  border-left: 1.5px solid #23160A; border-bottom: 1.5px solid #23160A;
  transform: rotate(-45deg) translate(0.5px, -0.5px) scale(0);
  transition: transform 180ms cubic-bezier(0.2, 1.6, 0.4, 1);
}
.apvf-rc > span { white-space: nowrap; }
.apvf-rc:hover { color: #E6F0FA; background: rgba(255, 255, 255, 0.045); }
.apvf-rc:hover > i { box-shadow: inset 0 0 0 1px rgba(240, 206, 158, 0.42); }
.apvf-rc:has(input:checked) { color: #F4E3CD; }
.apvf-rc:has(input:checked) > i {
  background: linear-gradient(180deg, #E8B879 0%, #C1834A 60%, #A96A2C 100%);
  box-shadow: inset 0 1px 0 rgba(255, 240, 214, 0.5), 0 0 7px -1px rgba(226, 168, 100, 0.45);
}
.apvf-rc:has(input:checked) > i::after { transform: rotate(-45deg) translate(0.5px, -0.5px) scale(1); }
.apvf-rc input:focus-visible ~ span { outline: 1px solid rgba(240, 206, 158, 0.7); outline-offset: 3px; border-radius: 2px; }

/* 日期：一枚区间入口，独自干完「起 → 止」这件事，不再并排两个框 */
.apvf-drw { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 3px; }
.apvf-dr {
  flex: 1 1 auto; min-width: 0;
  display: flex; align-items: center; gap: 6px;
  height: 30px; padding: 0 9px;
  border: 0; border-radius: 6px; outline: none;
  background: rgba(255, 255, 255, 0.045);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.075);
  font-family: inherit; text-align: left;
  cursor: pointer;
  transition: background 170ms ease, box-shadow 180ms ease;
}
.apvf-dr:hover { background: rgba(255, 255, 255, 0.07); }
.apvf-dr:focus-visible {
  background: rgba(255, 255, 255, 0.07);
  box-shadow: inset 0 0 0 1px rgba(240, 206, 158, 0.5);
}
.apvf-dr[aria-expanded="true"] {
  background: rgba(255, 255, 255, 0.075);
  box-shadow: inset 0 0 0 1px rgba(240, 206, 158, 0.46);
}
.apvf-dr[data-fill] {
  background: rgba(232, 184, 121, 0.072);
  box-shadow: inset 0 0 0 1px rgba(232, 184, 121, 0.3);
}
.apvf-dr[data-fill]:hover { background: rgba(232, 184, 121, 0.098); }
.apvf-dr[data-fill][aria-expanded="true"] { box-shadow: inset 0 0 0 1px rgba(240, 206, 158, 0.52); }

.apvf-dr-v {
  flex: 1 1 auto; min-width: 0;
  display: flex; align-items: baseline; gap: 5px;
  white-space: nowrap; overflow: hidden;
  font-family: var(--font-mono); font-size: calc(var(--fs-l3) - 1px); letter-spacing: 0.1px;
  color: #F0F6FC;
}
.apvf-dr-v > b { font-weight: 400; }
.apvf-dr-v > i {
  flex-shrink: 0;
  font-style: normal; font-size: calc(var(--fs-l3) - 2px);
  color: rgba(190, 208, 226, 0.4);
}
.apvf-dr-v.is-ph {
  font-family: inherit; font-size: calc(var(--fs-l3) - 1.5px); letter-spacing: 0.5px;
  color: rgba(174, 192, 210, 0.46);
}
.apvf-dr-v.is-ph > i { color: rgba(174, 192, 210, 0.3); }
.apvf-dr[data-fill] .apvf-dr-v { color: #F7E7D2; }
.apvf-dr[data-fill] .apvf-dr-v > i { color: rgba(236, 202, 158, 0.55); }
.apvf-dr-ic {
  flex-shrink: 0; width: 12px; height: 12px;
  color: rgba(190, 208, 226, 0.48);
  transition: color 180ms ease;
}
.apvf-dr:hover .apvf-dr-ic { color: rgba(214, 230, 244, 0.8); }
.apvf-dr[data-fill] .apvf-dr-ic { color: rgba(236, 202, 158, 0.68); }

/* 清除区间：只在有区间时长出来，是「从区间这档退出去」的那一下 */
.apvf-dr-x {
  flex: 0 0 auto;
  display: none; place-items: center;
  width: 28px; height: 28px; padding: 0;
  border: 0; border-radius: 6px;
  background: transparent; cursor: pointer;
  color: rgba(236, 202, 158, 0.6);
  transition: color 170ms ease, background 170ms ease;
}
.apvf-dr-x svg { width: 16px; height: 16px; }
.apvf-dr-x:hover { color: #F7E7D2; background: rgba(232, 184, 121, 0.15); }
.apvf-dr-x:focus-visible { color: #F7E7D2; background: rgba(232, 184, 121, 0.15); }
.apvf-rbody[data-fill] .apvf-dr-x { display: grid; }

/* 区间生效时快捷勾选整体降权：它们此刻不参与筛选，点一下就切回那一档 */
.apvf-rbody[data-mode="range"] .apvf-rpick { opacity: 0.8; }
.apvf-rbody[data-mode="range"] .apvf-rpick:hover { opacity: 1; }

/* —— ②' 自绘日历：原生 date 的弹层是系统白底，与这块玻璃完全不搭 —— */
.apvf-cal {
  /* 挂在面板内而不是 body：面板有 backdrop-filter，会自成合成层，
     面板外的 fixed 元素在部分渲染路径下会漏绘 */
  position: absolute; z-index: 960;
  width: 244px; padding: 8px 8px 7px;
  border-radius: 10px;
  background: linear-gradient(180deg, #131B27 0%, #0A1017 100%);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.09),
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    0 22px 44px -20px rgba(0, 0, 0, 0.96);
  opacity: 0; transform: translateY(-5px) scale(0.985);
  transform-origin: 50% 0;
  pointer-events: none;
  will-change: opacity, transform;
  transition: opacity 150ms ease, transform 220ms cubic-bezier(0.22, 1, 0.36, 1);
}
.apvf-cal.on { opacity: 1; transform: none; pointer-events: auto; }

.apvf-cal-hd {
  display: grid; grid-template-columns: 24px 1fr 24px;
  align-items: center; gap: 2px;
  padding: 0 1px 6px;
}
.apvf-cal-m {
  text-align: center;
  font-size: calc(var(--fs-l3) - 1px); letter-spacing: 1px;
  color: #E4EFFA;
}
.apvf-cal-n {
  height: 24px; padding: 0; border: 0; border-radius: 6px;
  background: transparent; color: rgba(192, 210, 228, 0.62);
  display: grid; place-items: center; cursor: pointer;
  transition: color 150ms ease, background 150ms ease;
}
.apvf-cal-n:hover { color: #EAF4FD; background: rgba(255, 255, 255, 0.075); }
.apvf-cal-n svg { width: 11px; height: 11px; }

.apvf-cal-wk { display: grid; grid-template-columns: repeat(7, 1fr); padding-bottom: 3px; }
.apvf-cal-wk > i {
  font-style: normal; text-align: center;
  font-size: 10px; letter-spacing: 0;
  color: rgba(180, 198, 216, 0.42);
}
.apvf-cal-g { display: grid; grid-template-columns: repeat(7, 1fr); }

.apvf-cal-d {
  position: relative; height: 27px; padding: 0;
  border: 0; border-radius: 0; background: transparent;
  font-family: var(--font-mono); font-size: calc(var(--fs-l3) - 1px); letter-spacing: -0.4px;
  line-height: 1; font-variant-numeric: tabular-nums;
  color: rgba(214, 228, 242, 0.84);
  cursor: pointer;
  transition: color 130ms ease;
}
.apvf-cal-d > span {
  position: relative; z-index: 1;
  display: grid; place-items: center;
  width: 24px; height: 24px; margin: 0 auto;
  border-radius: 50%;
  transition: background 130ms ease, color 130ms ease, box-shadow 130ms ease;
}
.apvf-cal-d:hover > span { background: rgba(255, 255, 255, 0.1); }
.apvf-cal-d.is-out { color: rgba(162, 182, 202, 0.28); }
.apvf-cal-d.is-today > span { box-shadow: inset 0 0 0 1px rgba(232, 184, 121, 0.45); }

/* 区间：一条 24px 高的横带铺在行里，两端正好在圆的中心断开，
   而不是整格铺色——整格看着像选了五六天，横带才像一段区间 */
.apvf-cal-d.is-in::before,
.apvf-cal-d.is-from::before,
.apvf-cal-d.is-to::before {
  content: ""; position: absolute; left: 0; right: 0; top: 50%;
  height: 24px; margin-top: -12px;
  background: rgba(232, 184, 121, 0.125);
}
.apvf-cal-d.is-from::before { left: 50%; }
.apvf-cal-d.is-to::before { right: 50%; }
.apvf-cal-d.is-in > span { color: #F3E1C9; }
.apvf-cal-d.is-from > span, .apvf-cal-d.is-to > span {
  background: linear-gradient(180deg, #E9BB7D 0%, #C1834A 68%, #AC6E2F 100%);
  color: #24170A; font-weight: 600;
  box-shadow:
    inset 0 1px 0 rgba(255, 240, 214, 0.45),
    0 0 12px -3px rgba(232, 184, 121, 0.85);
}
.apvf-cal-d.is-from:hover > span, .apvf-cal-d.is-to:hover > span { background: linear-gradient(180deg, #EFC488 0%, #C88A50 68%); }

/* —— ③ 折叠容器：0 → auto 硬切换，观感交给面板自身（落下 + 淡入） —— */
.apvf-drop { height: 0; overflow: hidden; opacity: 0; }
.apvf-drop.on { height: auto; opacity: 1; }
/* 动画跑完才放开裁剪，让下拉浮层可以溢出到列表上方 */
.apvf-drop.is-open { overflow: visible; }

/* —— ④ 参数仓：一块深色实体玻璃 —— */
.apvf-panel {
  position: relative;
  margin: 6px 0 10px;
  border-radius: 10px;
  background: linear-gradient(180deg, rgba(10, 16, 24, 0.74) 0%, rgba(8, 12, 19, 0.56) 100%);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.05),
    0 14px 28px -22px rgba(0, 0, 0, 0.9);
  opacity: 0; transform: translateY(-6px);
  transition: opacity 240ms ease, transform 300ms cubic-bezier(0.22, 1, 0.36, 1);
}
.apvf-panel.is-shown { opacity: 1; transform: none; }

/* —— ⑤ 四枚格子：2×2 —— */
.apvf-grid {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 6px; padding: 8px 8px 6px;
}
.apvf-slot {
  position: relative;
  display: flex; flex-direction: column; justify-content: flex-start; gap: 7px;
  min-width: 0; min-height: 50px; padding: 8px 10px 9px;
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.05);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.09),
    inset 0 1px 0 rgba(255, 255, 255, 0.035);
  cursor: pointer;
  transition: background 170ms ease, box-shadow 180ms ease;
}
.apvf-slot:hover { background: rgba(255, 255, 255, 0.055); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.11); }
/* 有值：整格描边转暖（不填色，避免六格全亮成一片） */
.apvf-slot.has {
  background: rgba(232, 184, 121, 0.072);
  box-shadow: inset 0 0 0 1px rgba(232, 184, 121, 0.32);
}
.apvf-slot.has:hover { background: rgba(232, 184, 121, 0.085); box-shadow: inset 0 0 0 1px rgba(240, 206, 158, 0.4); }
/* 展开中：再亮一档，并补一圈极淡外晕把它顶起来 */
.apvf-slot.on {
  background: rgba(232, 184, 121, 0.1);
  box-shadow:
    inset 0 0 0 1px rgba(240, 206, 158, 0.5),
    0 0 0 3px rgba(232, 184, 121, 0.06);
}

.apvf-sl-k {
  position: relative; z-index: 1;
  font-size: 11px; letter-spacing: 1.1px; line-height: 1;
  color: rgba(186, 204, 222, 0.64);
  white-space: nowrap;
  transition: color 180ms ease;
}
.apvf-slot:hover .apvf-sl-k { color: rgba(206, 224, 240, 0.74); }
.apvf-slot.has .apvf-sl-k { color: rgba(234, 200, 158, 0.74); }
.apvf-slot.on .apvf-sl-k { color: rgba(246, 217, 176, 0.92); }

/* 可点格子的读数按钮：铺满底部一行，左对齐 */
.apvf-sl-b {
  position: relative; z-index: 1;
  display: block; width: 100%; min-width: 0;
  padding: 0 22px 0 0; border: 0; border-radius: 0;
  background: transparent; cursor: pointer; text-align: left;
  font-family: inherit;
}
.apvf-sl-v {
  display: block;
  min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  font-size: calc(var(--fs-l3) - 0.5px); letter-spacing: 0.2px; line-height: 1.3;
  color: #E7F1FB;
  transition: color 170ms ease;
}
.apvf-sl-v.is-ph { color: rgba(172, 190, 208, 0.42); }
.apvf-slot.has .apvf-sl-v { color: #F7E6CF; }
.apvf-slot.has .apvf-sl-caret { opacity: 0.55; }

/* 箭头：悬在右上角，与标签同一行 */
.apvf-sl-caret {
  position: absolute; right: 9px; top: 8px;
  width: 5px; height: 5px;
  border-right: 1.2px solid currentColor; border-bottom: 1.2px solid currentColor;
  transform: rotate(45deg); opacity: 0.42;
  color: rgba(200, 218, 236, 0.95);
  transition: opacity 170ms ease, transform 220ms cubic-bezier(0.22, 1, 0.36, 1);
}
.apvf-slot:hover .apvf-sl-caret { opacity: 0.7; }
.apvf-slot.on .apvf-sl-caret { transform: rotate(-135deg); margin-top: 3px; opacity: 0.9; }

/* 编号：格内裸输入，没有第二个框 */
.apvf-sl-inp {
  position: relative; z-index: 1;
  width: 100%; height: 17px; padding: 0; margin: -1px 0 0;
  border: 0; border-radius: 0; background: transparent; outline: none;
  -webkit-appearance: none; appearance: none;
  caret-color: #E8B879;
  font-family: var(--font-mono); font-size: calc(var(--fs-l3) - 0.5px); letter-spacing: 0.2px;
  color: #E9F3FC;
}
.apvf-sl-inp::placeholder { color: rgba(170, 188, 206, 0.36); letter-spacing: 0.2px; }
/* 选中文字也用暖色：默认那抹系统蓝在暖色格子里像贴了张别的纸 */
.apvf-sl-inp::selection { background: rgba(232, 184, 121, 0.3); color: #FFF6E9; }
.apvf-slot:focus-within { background: rgba(255, 255, 255, 0.055); box-shadow: inset 0 0 0 1px rgba(240, 206, 158, 0.42); }
.apvf-slot:focus-within .apvf-sl-k { color: rgba(206, 224, 240, 0.76); }

/* —— ⑥ 底栏：居中一枚「图标 + 重置」，无框无底。
   底部只有这一个元素，给它边框或底色就会变成一块孤零零的膏药；
   素文字 + 回转图标，读起来是面板的收尾操作，不是主按钮 —— */
.apvf-foot {
  display: flex; align-items: center; justify-content: center;
  padding: 1px 8px 8px;
}
.apvf-foot[data-empty] { display: none; }
.apvf-reset {
  display: inline-flex; align-items: center; gap: 5px;
  height: 22px; padding: 0 10px; border: 0; border-radius: 5px;
  background: transparent;
  font-family: inherit; font-size: calc(var(--fs-l3) - 1.5px); letter-spacing: 1.3px;
  color: rgba(202, 220, 238, 0.58);
  cursor: pointer;
  transition: color 160ms ease, background 160ms ease;
}
.apvf-reset svg { width: 10px; height: 10px; margin-top: -0.5px; }
.apvf-reset:hover { color: #F8E5CC; background: rgba(232, 184, 121, 0.09); }
.apvf-reset:active { background: rgba(232, 184, 121, 0.14); }
.apvf-reset[disabled] { cursor: default; opacity: 0.4; }

/* —— ⑦ 多选浮层：与面板同宽的一片实心玻璃，锚在格子下方 —— */
.apvf-menu {
  position: absolute; left: 0; right: 0; z-index: 20;
  display: flex; flex-direction: column;
  max-height: 272px;
  border-radius: 9px;
  background: linear-gradient(180deg, #0F1621 0%, #0A1017 100%);
  border: 1px solid rgba(255, 255, 255, 0.09);
  box-shadow: 0 16px 36px -12px rgba(0, 0, 0, 0.86), inset 0 1px 0 rgba(255, 255, 255, 0.055);
  opacity: 0; transform: translateY(-4px); pointer-events: none;
  transition: opacity 160ms ease, transform 190ms cubic-bezier(0.22, 1, 0.36, 1);
}
.apvf-menu.on { opacity: 1; transform: none; pointer-events: auto; }
.apvf-menu-hd {
  display: flex; align-items: center; justify-content: space-between;
  height: 28px; padding: 0 8px 0 11px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.apvf-menu-hd [data-hd] {
  font-size: calc(var(--fs-l3) - 1px); letter-spacing: 0.9px;
  color: rgba(176, 192, 208, 0.5);
}
.apvf-clr {
  height: 18px; padding: 0 6px; border: 0; border-radius: 4px;
  background: transparent; cursor: pointer;
  font-family: inherit; font-size: calc(var(--fs-l3) - 1px); letter-spacing: 0.6px;
  color: rgba(236, 202, 158, 0.76);
  transition: color 160ms ease, background 160ms ease;
}
.apvf-clr:hover { color: #FFE7C4; background: rgba(232, 184, 121, 0.12); }
.apvf-clr[disabled] { color: rgba(166, 184, 202, 0.2); cursor: default; background: transparent; }
.apvf-menu-in {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1px 4px;
  flex: 1 1 auto; min-height: 0;
  max-height: 240px; overflow-y: auto; padding: 5px;
}
.apvf-menu-in::-webkit-scrollbar { width: 6px; }
.apvf-menu-in::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.12); border-radius: 3px; }
.apvf-menu-in::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.2); }

/* 选项：小方框 + 文字（与日期勾选项同一套语汇） */
.apvf-opt {
  display: flex; align-items: center; gap: 7px;
  height: 27px; padding: 0 6px; border: 0; border-radius: 5px;
  background: transparent; cursor: pointer; text-align: left;
  font-family: inherit; font-size: var(--fs-l3); letter-spacing: 0.2px;
  color: rgba(188, 206, 222, 0.74);
  transition: color 150ms ease, background 150ms ease;
}
.apvf-opt > i {
  width: 11px; height: 11px; flex-shrink: 0; border-radius: 3px;
  display: grid; place-items: center;
  background: rgba(7, 11, 17, 0.5);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.15);
  transition: background 160ms ease, box-shadow 160ms ease;
}
.apvf-opt > i::after {
  content: ""; width: 5px; height: 2.5px;
  border-left: 1.5px solid #23160A; border-bottom: 1.5px solid #23160A;
  transform: rotate(-45deg) translate(0.5px, -0.5px) scale(0);
  transition: transform 180ms cubic-bezier(0.2, 1.6, 0.4, 1);
}
.apvf-opt > span { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.apvf-opt:hover { color: #ECF4FC; background: rgba(255, 255, 255, 0.055); }
.apvf-opt:hover > i { box-shadow: inset 0 0 0 1px rgba(240, 206, 158, 0.4); }
.apvf-opt.is-on { color: #F6E7D2; background: rgba(232, 184, 121, 0.085); }
.apvf-opt.is-on > i {
  background: linear-gradient(180deg, #E8B879 0%, #C1834A 60%, #A96A2C 100%);
  box-shadow: inset 0 1px 0 rgba(255, 240, 214, 0.5), 0 0 7px -1px rgba(226, 168, 100, 0.5);
}
.apvf-opt.is-on > i::after { transform: rotate(-45deg) translate(0.5px, -0.5px) scale(1); }

/* —— 2K 档：与切卡同步抬一档 —— */
@media (min-width: 2048px) {
  .apvf-bar { height: 38px; }
  .apvf-range, .apvf-more, .apvf-batch { height: 28px; font-size: calc(var(--fs-l3) + 0.5px); }
  .apvf-slot { min-height: 58px; }
  .apvf-sl-k { font-size: 11.5px; }
  .apvf-sl-v, .apvf-sl-inp { font-size: calc(var(--fs-l3) + 0.5px); }
  .apvf-opt { height: 30px; }
  .apvf-menu-in { max-height: 216px; }
}

@media (prefers-reduced-motion: reduce) {
  .apvf-range, .apvf-more, .apvf-batch, .apvf-opt, .apvf-rc, .apvf-dr, .apvf-dr-x,
  .apvf-cal, .apvf-menu, .apvf-slot, .apvf-panel, .apvf-rpop, .apvf-drop { transition: none; }
}

/* ============================================================
   「待我受理」申请卡（色块列表）
   —— 三段式，严格按信息优先级排：
      ① 任务名称（占满）+ 受理状态（已超时 / 剩余倒计时，后续点击进详情审批）
      ② 申报编号 · 申请类型 · 申报方
      ③ 任务性质 | 任务起止时间
   —— 用色：中性钢蓝打底，颜色只作「异常」的标记，不作装饰
      · 充裕（ok）   ：灰蓝脊 + 无色胶囊，安静退到背景里
      · 临近（soon） ：琥珀脊 + 琥珀胶囊，一档提示
      · 超时（over） ：砖红脊 + 砖红胶囊，唯一需要立刻处理的
      三色都取自项目既有四态色板（琥珀 #E0A968 / 钢蓝 #8FB0CC），
      超时用降饱和的 #E8776B 而非纯红，避免一列里几条高饱和色互相打架
   —— 质感只做「光的层次」，不堆装饰：
      · 顶部内高光 + 左上冷光源（卡片像一片玻璃，不是一块色块）
      · 左缘色脊入场自上而下扫出（切卡回来会重播，作为落点记忆）
      · hover 时边框 / 内高光 / 色脊同时提亮，暗示「可点进详情」
      · 首行分隔线两端渐隐（光自左侧进入，所以左浓右无）
   —— 受理胶囊内置「余量轨」：--apva-p 为剩余时长占受理时限 4h 的比例，
      由脚本逐秒写入，余量见底 → 轨条几乎消失，只剩读数，紧迫感可视化
   ============================================================ */

/* 列表头：一条极简计数，说明本列表规模与超时数量（超时为 0 时整段收起） */
.apva-hd {
  display: flex; align-items: baseline; gap: 7px; flex-shrink: 0;
  margin: -1px 0 -3px 1px;
  font-size: 11.5px; letter-spacing: 0.6px; color: rgba(168, 186, 204, 0.52);
}
.apva-hd b {
  font-family: var(--font-mono); font-weight: 500; font-size: 12px;
  font-variant-numeric: tabular-nums; color: rgba(206, 228, 246, 0.82);
}
.apva-hd i {
  width: 3px; height: 3px; border-radius: 50%; align-self: center;
  background: rgba(172, 196, 218, 0.24);
}
.apva-hd .is-over { color: rgba(226, 148, 136, 0.76); }
.apva-hd .is-over b { color: #E89286; }
.apva-hd .is-over.hide { display: none; }
.apva-hd .is-done { color: rgba(148, 178, 208, 0.78); }
.apva-hd .is-done b { color: #AFCBE4; }
.apva-hd .is-done.hide { display: none; }
/* 超时段隐藏时，中间那枚分隔点也要撤掉，不留一个悬空的「·」 */
.apva-hd:has(.is-over.hide) > i { display: none; }

/* ============================================================
   列表底栏：规模统计 + 翻页
   —— 它是一条「栏」，不是浮在内容上的「卡」：左右贴齐面板内缘，
      下端与面板底边齐平（负外边距吃掉 .apvr-body 的内边距），
      上缘一道发丝线与列表分节。列表在自己的视口里滚，
      这条栏永远钉在面板最下面——不用找，它一直在原位
   —— 左端规模、右端页码，两端拉开撑满整条：中间那片空白是刻意的，
      让「这一列有多少」和「看到第几屏了」各守一端，互不打扰
   —— 语汇沿用面板：读数用等宽数字、控件用内陷薄槽，
      蓝色只出现在「可点 / 已选中」，不在这里另起一套颜色
   ============================================================ */
#apvr-panel .apvr-foot {
  flex-shrink: 0;
  /* 抵消 .apvr-body 的内边距：底栏属于面板底缘，不属于内容 */
  margin: 0 -12px -14px;
  padding: 0 12px;
  height: 40px;
  border-top: 1px solid rgba(128, 174, 218, 0.22);
  border-radius: 0 0 11px 11px;
  background: linear-gradient(180deg, rgba(13, 18, 26, 0.02) 0%, rgba(9, 13, 19, 0.34) 100%);
  animation: apvr-foot-in 240ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
#apvr-panel .apvr-foot[hidden] { display: none; }
#apvr-panel[data-view="detail"] .apvr-foot { display: none; }
@keyframes apvr-foot-in {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: none; }
}

.apva-ft {
  display: flex; align-items: center; gap: 10px;
  height: 100%;
}

/* —— 底栏两只槽：同一副壳 ——
   左端的规模读数与右端的翻页胶囊，是这条栏上的两个「格子盘」：
   同一圈发丝、同一道内影、同一个底色、同一个 26px 高度与 7px 圆角。
   壳只写一遍，两边谁都不许自己再改一处——一处不同，整条栏就读成两个部件了 */
.apva-ft-st,
.apva-pgt {
  /* 高度按「外框」算：壳上写 26px 就是眼睛看到的 26px。
     少了这一行，带 2px 内距的胶囊会悄悄长成 30px——左端 26、右端 30，
     同一行上的两只槽永远差两指，怎么调都像没对齐 */
  box-sizing: border-box;
  background: rgba(7, 12, 19, 0.42);
  box-shadow: inset 0 0 0 1px rgba(140, 180, 220, 0.14),
              inset 0 1px 2px rgba(0, 0, 0, 0.32);
  border-radius: 7px;
  height: 26px;
}

/* —— 左：规模读数 ——
   底栏只有 40px 高，摆不下一块面板，但也不该只是一行灰字。
   它和右边那枚翻页胶囊同处一条栏上，所以用上面那一副共用的壳（挖下去的一枚薄槽），
   两端齐平，读作一对。
   槽里只放三个东西：左缘一道刻度、一枚等宽大字、前后两个当标点的汉字。
   层级靠字号与亮度拉开（数字 16px 提亮 / 汉字 10px 压灰、拉字距），
   不靠堆颜色——底栏是读数区，不是状态区，状态色留给卡片自己；
   这里出现的那点蓝，就是翻页胶囊 hover / 当前页用的同一支淡蓝 */
.apva-ft-st {
  display: inline-flex; align-items: center; flex-shrink: 0;
  padding: 0 11px 0 0;
  font-size: 10px; letter-spacing: 1.2px; white-space: nowrap;
  color: rgba(184, 206, 228, 0.5);
}
/* 左缘刻度：读数的起笔，用的是胶囊里「当前页」那道亮条的同一支蓝 */
.apva-ft-st::before {
  content: ''; width: 2px; height: 12px; border-radius: 1px;
  margin: 0 7px 0 9px;
  background: linear-gradient(180deg, #A6CDF0 0%, rgba(140, 190, 235, 0.14) 100%);
}
.apva-ft-st b {
  font-family: var(--font-mono); font-weight: 500;
  font-size: 16px; line-height: 1; letter-spacing: 0;
  font-variant-numeric: tabular-nums;
  margin: 0 4px 0 7px;
  color: #EAF4FF;   /* 与胶囊里的页码同一支白 */
  /* 一点冷光：数字在暗槽里被「点亮」，不是印上去的灰白字 */
  text-shadow: 0 0 12px rgba(150, 200, 245, 0.30);
}

/* —— 右：一枚胶囊，两段 ——
   「10 条 ｜ ‹ 1 / 3 ›」。一屏看几条、已经看到第几屏，本来就是同一个问题的
   两半，所以合进同一条槽：同一副发丝描边、同一道内影、同一个 26px 高度，
   中间只隔一道发丝线。分成两枚并排的盒子，读起来更像两件互不相干的控件。
   翻不动的时候（这一列只装得下一屏）左段整格不出现，只剩右边那枚读数——
   两态共用这一只壳，切换时只是变窄，不换一副长相 */
.apva-pgt {
  position: relative; z-index: 3;
  margin-left: auto; flex-shrink: 0;
  display: inline-flex; align-items: center;
  padding: 2px;   /* 壳（底色 / 发丝 / 内影 / 高度 / 圆角）在文件上方两只槽的共用规则里 */
}

/* 左段：每页条数。读数 + 单位 + 一枚小三角——弹层是从上方展开的，三角就朝上；
   展开后翻个身，作为「这一格现在开着」的第二个记号（第一个是 aria-expanded
   给的那层薄底）。三角比箭头更小更钝，不至于被读成第四个翻页键 */
.apva-pgs {
  position: relative; align-self: stretch;
  display: inline-flex; align-items: center;
}
.apva-pg-sz {
  align-self: stretch; min-width: 50px; padding: 0 6px 0 7px;
  border: 0; border-radius: 5px;
  display: inline-flex; align-items: center; justify-content: center; gap: 3px;
  background: transparent; cursor: pointer;
  font-family: var(--font-mono); font-variant-numeric: tabular-nums;
  transition: background 140ms ease;
}
.apva-pg-sz:hover { background: rgba(150, 200, 245, 0.1); }
.apva-pg-sz[aria-expanded="true"] { background: rgba(150, 200, 245, 0.16); }
.apva-pg-sz:focus-visible { outline: 1px solid rgba(160, 200, 245, 0.6); outline-offset: -1px; }
.apva-pg-sz > b { font-weight: 500; font-size: 12px; line-height: 1; color: #EAF4FF; }
/* 「条」是单位，比读数低一档：它是这句话的语法，不是这句话的内容 */
.apva-pg-sz > em {
  font-style: normal; font-family: var(--font-ui);
  font-size: 10px; line-height: 1; color: rgba(184, 206, 228, 0.5);
}
/* 自动态：两个汉字不落进等宽字体的兜底里，按中文收一点字距。
   这一格是定宽的（50px 容得下最长的一档「20 条」），
   所以从自动切到 5 / 10 / 20，整条胶囊不会跟着伸缩 */
.apva-pg-sz > b.is-w { font-family: var(--font-ui); font-size: 11.5px; letter-spacing: 0.6px; }
/* 小三角：纯边框画的 3.6px 实心尖 */
.apva-pg-sz > i {
  width: 0; height: 0;
  border-left: 3px solid transparent; border-right: 3px solid transparent;
  border-bottom: 3.6px solid currentColor;
  color: rgba(196, 218, 238, 0.6);
  transition: transform 160ms cubic-bezier(0.22, 1, 0.36, 1);
}
.apva-pg-sz[aria-expanded="true"] > i { transform: rotate(180deg); }

/* 分段线：与页码格两侧那两道同一粗细、同一亮度——
   整条胶囊才像一只排好的格子盘，而不是几块各画各的 */
.apva-pg-spl {
  flex: 0 0 1px; align-self: stretch; width: 1px;
  background: rgba(255, 255, 255, 0.07);
}

/* 右段：翻页。这一层只是弹层的定位盒（页码选项贴它上方、与它同右缘），
   本身不画任何边界——整条胶囊只有最外层那一圈发丝 */
.apva-pgn {
  position: relative; align-self: stretch;
  display: inline-flex; align-items: center;
}

/* 箭头：槽内的两格。不是主操作，所以不填色、不加影，只在 hover 时亮一档 */
.apva-pg-nav {
  width: 22px; height: 22px; padding: 0; border: 0; border-radius: 5px;
  display: grid; place-items: center; cursor: pointer;
  background: transparent; color: rgba(196, 218, 238, 0.68);
  transition: background 140ms ease, color 140ms ease;
}
.apva-pg-nav svg { width: 12px; height: 12px; }
.apva-pg-nav:hover:not([disabled]) { background: rgba(150, 200, 245, 0.14); color: #EAF4FF; }
.apva-pg-nav:active:not([disabled]) { background: rgba(150, 200, 245, 0.2); }
/* 到头即禁用：不隐藏、不换形状——少一个键比灰一个键更让人犹疑 */
.apva-pg-nav[disabled] { opacity: 0.22; cursor: default; }
.apva-pg-nav:focus-visible { outline: 1px solid rgba(160, 200, 245, 0.6); outline-offset: -1px; }

/* 中间那格：当前页 / 总页数，也是选页的入口。
   整格都是热区（顶到胶囊内高），两侧各一道竖发丝把三格分开 */
.apva-pg-cur {
  align-self: stretch; min-width: 40px; padding: 0 6px;
  border: 0; border-left: 1px solid rgba(255, 255, 255, 0.07);
  border-right: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 3px;
  display: inline-flex; align-items: center; justify-content: center; gap: 2px;
  background: transparent; cursor: pointer;
  font-family: var(--font-mono); font-variant-numeric: tabular-nums;
  transition: background 140ms ease;
}
.apva-pg-cur:hover { background: rgba(150, 200, 245, 0.1); }
.apva-pg-cur[aria-expanded="true"] { background: rgba(150, 200, 245, 0.16); }
/* 只有一页时它只是一句读数，不是入口：不弹层，也别装作能点 */
.apva-pg-cur[data-static] { cursor: default; }
.apva-pg-cur[data-static]:hover { background: transparent; }
.apva-pg-cur > b { font-weight: 500; font-size: 12px; line-height: 1; color: #EAF4FF; }
.apva-pg-cur > i { font-style: normal; font-size: 11px; line-height: 1; color: rgba(168, 186, 204, 0.3); }
.apva-pg-cur > em { font-style: normal; font-size: 12px; line-height: 1; color: rgba(184, 206, 228, 0.52); }

/* 选项弹层（页码与条数共用）：贴在自己那一段正上方，与它同宽、同右缘——
   对准关系由边缘自己说明，不再画小尖角（同宽的两块本来就不需要指引，
   而且它会被滚动容器裁掉）。一列竖排：页码是一串有序递增的读数，
   横向折行会把顺序读断；竖着排下来，从上到下就是 1→n，选页时眼睛只上下走一趟。
   底栏重绘会连它一起换掉，所以它不需要自己收尾 */
.apva-pgpick {
  position: absolute; right: 0; bottom: calc(100% + 9px); z-index: 4;
  /* 比胶囊略宽一点，多出来的 16px 全留在左边：一串数字挤在 88px 的窄管里
     像梯子，宽出一指才有「一页一页」的从容；右缘仍与胶囊严格齐平 */
  min-width: calc(100% + 16px); box-sizing: border-box;
  display: flex; flex-direction: column; gap: 2px;
  padding: 6px; border-radius: 10px;
  /* 页数再多也不让它爬满半块面板：到这里就自己滚。
     高度取整行——6 × 24 + 5 × 2 + 上下内边距 12 = 166，
     滚到哪儿都是整行，不会露出半截数字 */
  max-height: 166px; overflow-y: auto; overscroll-behavior: contain;
  scrollbar-width: thin; scrollbar-color: rgba(150, 190, 230, 0.26) transparent;
  /* 顶上一道横向细光（背景层画，不随滚动跑掉），下面是自上而下变深的墨色 */
  background:
    linear-gradient(90deg, rgba(160, 200, 245, 0) 7%, rgba(160, 200, 245, 0.30) 50%, rgba(160, 200, 245, 0) 93%)
      0 0 / 100% 1px no-repeat,
    linear-gradient(180deg, #1a2432 0%, #0e141d 100%);
  /* 用一圈发丝描边代替 border：圆角才不会被一条实线打断。
     外影对称、极淡——它正下方 9px 就是胶囊，影子里一旦带方向，
     被罩住的那枚控件会暗一档，看着像被关掉了 */
  box-shadow: 0 0 0 1px rgba(150, 190, 230, 0.12),
              0 0 16px -8px rgba(0, 0, 0, 0.55);
  -webkit-backdrop-filter: blur(14px) saturate(140%); backdrop-filter: blur(14px) saturate(140%);
  animation: apva-pick-in 150ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes apva-pick-in {
  from { opacity: 0; transform: translateY(5px) scale(0.97); }
  to   { opacity: 1; transform: none; }
}

/* 一枚页码：一行一条，与胶囊里的读数同一支等宽体。
   静时只是一枚数字（不加框、不加底），hover 才浮出一层极淡的水光；
   当前页是一道 2px 亮条 + 向右渐隐的淡底——像指针停在那一格，
   不是被按下去的钮，所以整圈描边和投影都不给它 */
.apva-pgp {
  position: relative; flex: 0 0 auto;
  width: 100%; height: 24px; padding: 0; border: 0; border-radius: 7px;
  display: grid; place-items: center;
  background: transparent; cursor: pointer;
  font-family: var(--font-mono); font-size: 12px; font-weight: 500;
  font-variant-numeric: tabular-nums; letter-spacing: 0.2px;
  color: rgba(184, 206, 230, 0.58);
  transition: background 130ms ease, color 130ms ease;
}
.apva-pgp:hover { background: rgba(150, 200, 245, 0.075); color: #E4F1FF; }
.apva-pgp.is-on {
  background: linear-gradient(90deg, rgba(126, 176, 230, 0.22) 0%, rgba(126, 176, 230, 0.05) 76%);
  color: #F4FAFF;
}
.apva-pgp.is-on::before {
  content: ""; position: absolute; left: 3px; top: 5px; bottom: 5px; width: 2px;
  border-radius: 1px; background: linear-gradient(180deg, #A6CDF0 0%, rgba(140, 190, 235, 0.55) 100%);
  box-shadow: 0 0 6px rgba(150, 200, 245, 0.45);
}
/* 键盘焦点只在真正用方向键浏览时亮：点开时焦点是程序化落到当前页上的，
   若无条件画框，一打开就有一圈描边盖在「当前页」上，比做什么都响。
   非键盘态一律抹掉，免得落到浏览器默认那圈白框上 */
.apva-pgp:focus { outline: none; }
.apva-pgpick.is-kb .apva-pgp:focus-visible { outline: 1px solid rgba(165, 205, 245, 0.55); outline-offset: -1px; }

/* 条数选项里的单位：说明这一列在选什么，不是读数本身，所以比数字矮一档、暗一档 */
.apva-pgp em {
  font-style: normal; font-family: var(--font-ui);
  font-size: 10px; letter-spacing: 0; margin-left: 3px;
  color: rgba(184, 206, 228, 0.4);
}
/* 「自动」不是数字，走界面字体；选中时的亮色由按钮自己给 */
.apva-pgp .is-w { font-family: var(--font-ui); font-size: 11.5px; letter-spacing: 0.4px; }

@media (prefers-reduced-motion: reduce) {
  .apvr-sw-r, .apvr-sw-r > i, #apvr-panel .apvr-foot { transition: none; animation: none; }
}

/* 筛选后无结果 */
.apva-none {
  flex-shrink: 0; min-height: 132px;
  display: grid; place-items: center;
  border: 1px dashed rgba(170, 200, 228, 0.12); border-radius: 10px;
  color: rgba(178, 202, 224, 0.38);
  font-size: 12px; letter-spacing: 1.2px;
}
/* 筛选触发的重绘：临时摘掉入场动画，避免每敲一个字整列重新浮入 */
.apvr-content.no-anim .apva-card,
.apvr-content.no-anim .apva-card::before { animation: none; }

.apva-card {
  /* 充裕态：灰蓝（取左翼「已终止」的 #8FB0CC），低饱和、不抢眼 */
  --apva-st: #8FB0CC;
  --apva-p: 1;
  position: relative; flex-shrink: 0;
  padding: 11px 13px 10px 15px; border-radius: 10px;
  background:
    radial-gradient(120% 92% at 0% 0%, rgba(124, 158, 192, 0.058) 0%, rgba(124, 158, 192, 0) 62%),
    linear-gradient(180deg, rgba(92, 122, 152, 0.048) 0%, rgba(42, 56, 72, 0.014) 100%);
  border: 1px solid rgba(168, 196, 220, 0.085);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.045),
    inset 0 0 18px rgba(0, 0, 0, 0.10);
  animation: apva-in 380ms cubic-bezier(0.22, 1, 0.36, 1) both;
  transition: border-color 220ms ease, box-shadow 220ms ease;
}
@keyframes apva-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}
/* hover：整片玻璃提亮一档，右侧投出一点落影，读作「可进入」 */
.apva-card:hover {
  border-color: rgba(178, 200, 222, 0.20);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.075),
    inset 0 0 22px rgba(0, 0, 0, 0.12),
    0 3px 16px -8px rgba(4, 12, 22, 0.7);
}
/* 插入错峰：逐张迟 40ms 浮入（最多压 6 档）。
   用 nth-of-type 而非 nth-child —— 列表头 .apva-hd 也是 div 层级的兄弟，
   of-type 只数 article，加载列表头也不会把错峰推错位 */
.apva-card:nth-of-type(2) { animation-delay: 40ms; }
.apva-card:nth-of-type(3) { animation-delay: 80ms; }
.apva-card:nth-of-type(4) { animation-delay: 120ms; }
.apva-card:nth-of-type(5) { animation-delay: 160ms; }
.apva-card:nth-of-type(n+6) { animation-delay: 200ms; }

/* 左缘状态色脊：与受理状态同色，上亮下隐（.fp-card::before 同款），
   入场时自上而下扫出。三档强度不同——充裕态只作一条很淡的引导线，
   临近 / 超时才亮起来，这样一列里不会有六条彩色竖线同时抢眼 */
.apva-card::before {
  content: ""; position: absolute; left: 0; top: 11px; bottom: 11px; width: 2px; border-radius: 0 2px 2px 0;
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--apva-st) 40%, transparent) 0%,
    color-mix(in srgb, var(--apva-st) 4%, transparent) 100%);
  box-shadow: 0 0 5px color-mix(in srgb, var(--apva-st) 12%, transparent);
  transform-origin: top center;
  animation: apva-rib 520ms cubic-bezier(0.22, 1, 0.36, 1) 90ms both;
  transition: width 220ms ease, box-shadow 220ms ease;
}
@keyframes apva-rib {
  from { transform: scaleY(0); opacity: 0; }
  to   { transform: none;     opacity: 1; }
}
.apva-card[data-urg="soon"] { --apva-st: #E0A968; }
.apva-card[data-urg="over"] { --apva-st: #E8776B; }
/* 临近 / 超时：色脊点满，成为这一列里唯一有颜色的竖线 */
.apva-card[data-urg="soon"]::before,
.apva-card[data-urg="over"]::before {
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--apva-st) 72%, transparent) 0%,
    color-mix(in srgb, var(--apva-st) 7%, transparent) 100%);
  box-shadow: 0 0 8px color-mix(in srgb, var(--apva-st) 26%, transparent);
}
/* hover 统一压过上面两档（写在最后，同特异性后者胜） */
.apva-card:hover::before {
  width: 3px;
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--apva-st) 88%, transparent) 0%,
    color-mix(in srgb, var(--apva-st) 10%, transparent) 100%);
  box-shadow: 0 0 12px color-mix(in srgb, var(--apva-st) 38%, transparent);
}

/* —— ① 首行：任务名称 + 受理状态 ——
   状态元素独立成块，后续挂点击（进任务详情审批）时只加行为、不动结构 */
.apva-top {
  position: relative;
  display: flex; align-items: center; gap: 10px;
  padding-bottom: 8px; margin-bottom: 8px;
}
/* 分隔线两端渐隐：光从左缘进来，所以左侧实、右侧化开，不再是根一码齐的白线 */
.apva-top::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: linear-gradient(90deg,
    rgba(200, 216, 232, 0.105) 0%,
    rgba(200, 216, 232, 0.048) 58%,
    rgba(200, 216, 232, 0) 100%);
}
.apva-name {
  flex: 1; min-width: 0; margin: 0;
  font-size: 13.5px; font-weight: 600; line-height: 1.4; letter-spacing: 0.3px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  background: linear-gradient(180deg, #F1F8FE 0%, #CFE4F5 52%, #A6C6E2 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: #D5E4F0;
}
/* 受理胶囊：底色是一层很淡的语义色，内部再叠一条「余量轨」 */
.apva-state {
  position: relative; overflow: hidden;
  flex-shrink: 0; display: inline-flex; align-items: center; gap: 5px;
  padding: 2px 9px; border-radius: 999px; white-space: nowrap;
  font-family: var(--font-mono); font-size: var(--fs-l3); letter-spacing: 0.7px;
  line-height: 1.5; font-variant-numeric: tabular-nums;
  color: var(--apva-st);
  background: color-mix(in srgb, var(--apva-st) 7%, rgba(10, 16, 24, 0.34));
  border: 1px solid color-mix(in srgb, var(--apva-st) 20%, transparent);
}
/* 临近 / 超时：胶囊的底色与描边同步加深，颜色只在这两档出现 */
.apva-card[data-urg="soon"] .apva-state,
.apva-card[data-urg="over"] .apva-state {
  background: color-mix(in srgb, var(--apva-st) 13%, rgba(10, 16, 24, 0.34));
  border-color: color-mix(in srgb, var(--apva-st) 36%, transparent);
}
/* 余量轨：宽度 = 剩余时长占 24h 的比例（--apva-p 由脚本逐秒写），
   底缘齐平铺满胶囊高度，读作一条「电池条」；超时后比例归零，只剩读数 */
.apva-state::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; right: 0; z-index: 0;
  transform-origin: left center;
  transform: scaleX(var(--apva-p, 1));
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--apva-st) 26%, transparent) 0%,
    color-mix(in srgb, var(--apva-st) 12%, transparent) 100%);
  transition: transform 900ms linear;
  pointer-events: none;
}
/* 读数是等宽数字，em 只作语义标签，不能继承斜体 */
.apva-state i, .apva-state em { position: relative; z-index: 1; }
.apva-state em { font-style: normal; }
.apva-state i {
  width: 5px; height: 5px; border-radius: 50%; flex-shrink: 0;
  background: currentColor; box-shadow: 0 0 6px currentColor;
}
/* 时限读数：列表这一档「标签 + 读数」同属一句（剩余 02:13:45 / 已超时 03:35），
   整段作一个等宽文本跑，读作一条读数，而不是「说明 + 数字」两段拼接 */
.apva-cd { display: inline-flex; align-items: baseline; }
.apva-cd > b { font-weight: 600; letter-spacing: 0.2px; font-variant-numeric: tabular-nums; }
/* 超时 / 临近截止：点呼吸，把视线钉在时限上；充裕时保持静点 */
.apva-card[data-urg="over"] .apva-state i,
.apva-card[data-urg="soon"] .apva-state i { animation: apva-breathe 1.6s ease-in-out infinite; }
/* 超时是必须立刻处理的状态，胶囊比另两档更实一档（同色系加深，不引入新色） */
/* —— 已受理：色脊与状态胶囊换成「结论色」，且不再呼吸 ——
   待办三档（充裕/临近/超时）说的是「还有多久」；已受理说的是「结果如何」，
   两套语义不能共用同一组动效，所以办结的胶囊是静的 */
.apva-card[data-urg="done"] { --apva-st: #93AFC8; }
.apva-card[data-st="rejected"] { --apva-st: #A2A6AB; }
.apva-card[data-urg="done"]::before {
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--apva-st) 52%, transparent) 0%,
    color-mix(in srgb, var(--apva-st) 6%, transparent) 100%);
  box-shadow: none;
}
.apva-card[data-urg="done"] .apva-state {
  background: color-mix(in srgb, var(--apva-st) 11%, rgba(10, 16, 24, 0.34));
  border-color: color-mix(in srgb, var(--apva-st) 30%, transparent);
}
.apva-card[data-urg="done"] .apva-state::before { display: none; }
.apva-card[data-urg="done"] .apva-state i { animation: none; opacity: 0.9; }
/* 卡片尾巴上那句结论：受理意见是要给申报人看的，不该只存在数据里 */
.apva-note {
  display: flex; gap: 8px; align-items: baseline;
  margin-top: 7px; padding-top: 7px;
  border-top: 1px solid rgba(255, 255, 255, 0.045);
  font-size: 11px; line-height: 1.5; letter-spacing: 0.3px;
}
.apva-note > span { flex-shrink: 0; color: rgba(176, 198, 218, 0.5); }
.apva-note > b {
  min-width: 0; font-weight: 400; color: rgba(204, 224, 240, 0.72);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

/* 超时是必须立刻处理的状态，再压深一档（同色系加深，不引入新色） */
.apva-card[data-urg="over"] .apva-state {
  background: color-mix(in srgb, var(--apva-st) 18%, rgba(10, 16, 24, 0.34));
  border-color: color-mix(in srgb, var(--apva-st) 50%, transparent);
  box-shadow: 0 0 12px -4px color-mix(in srgb, var(--apva-st) 42%, transparent);
}
@keyframes apva-breathe {
  0%, 100% { opacity: 0.55; box-shadow: 0 0 4px currentColor; }
  50%      { opacity: 1;    box-shadow: 0 0 9px currentColor; }
}

/* —— ② 次行：申报编号 · 申请类型 · 申报方（同一条基线上的三段，圆点分隔） —— */
.apva-sub {
  display: flex; align-items: center; gap: 8px; min-width: 0;
  font-size: 13px; line-height: 1.6;
}
.apva-no {
  flex-shrink: 0; font-family: var(--font-mono); font-size: 13px; letter-spacing: 0.4px;
  color: rgba(154, 184, 214, 0.66); white-space: nowrap; font-variant-numeric: tabular-nums;
}
.apva-dot {
  flex-shrink: 0; width: 3px; height: 3px; border-radius: 50%;
  background: rgba(172, 196, 218, 0.24);
}
.apva-ty { flex-shrink: 0; color: rgba(198, 218, 236, 0.88); white-space: nowrap; }
.apva-by {
  min-width: 0; color: #BED3E4; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}

/* —— ③ 末行：任务性质 | 起止时间（两列，标签定宽 4.4em，成一条竖线） —— */
.apva-kv { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 12px 14px; margin-top: 8px; }
.apva-f { display: flex; align-items: baseline; gap: 7px; min-width: 0; }
.apva-f > span {
  flex-shrink: 0; width: 4.3em; font-size: var(--fs-l3); line-height: 1.6;
  color: var(--text-3); letter-spacing: 0.5px;
}
.apva-f > b {
  min-width: 0; font-size: 13px; font-weight: 400; line-height: 1.6; color: #BED3E4;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* 起止时间：两端等宽读数 + 一枚细箭头，不叠光带 / 时长（时长由两端自明） */
.apva-time { display: flex; align-items: center; gap: 6px; overflow: visible; }
.apva-time > span {
  font-family: var(--font-mono); font-size: 13px; letter-spacing: 0.1px;
  color: #C6DCEE; font-variant-numeric: tabular-nums;
}
.apva-arrow {
  position: relative; flex-shrink: 0; width: 14px; height: 1px;
  background: rgba(172, 198, 220, 0.30);
}
.apva-arrow::after {
  content: ""; position: absolute; right: 0; top: -2px; width: 4px; height: 4px;
  border-top: 1px solid rgba(194, 214, 232, 0.60); border-right: 1px solid rgba(194, 214, 232, 0.60);
  transform: rotate(45deg);
}

/* 2K 档：字号只跟 --fs-l3 与左翼 .fp-card 的两级口径走（标签 14 / 值 15） */
@media (min-width: 2048px) {
  .apva-hd { font-size: 12.5px; }
  .apva-hd b { font-size: 13px; }
  /* 卡上下内边距各收 3px：2K 一页要装 9 张，卡高是最后那关，
     横向留白不动（13/15），只压纵向——大屏上这三像素读不出来，
     但 9 张差的正好是这几十像素 */
  .apva-card { padding: 8px 13px 7px 15px; }
  .apva-name { font-size: 15px; }
  .apva-state { padding: 2px 10px; }
  .apva-sub { font-size: 15px; }
  .apva-no { font-size: 14px; }
  .apva-kv { gap: 14px 16px; }
  .apva-f > b { font-size: 15px; }
  .apva-time > span { font-size: 15px; }

  /* 底栏与开关同步抬一档（与面板内边距 14 / 16px 对齐） */
  #apvr-panel .apvr-foot { margin: 0 -14px -16px; padding: 0 14px; height: 44px; }
  .apva-ft-st, .apva-pgt { height: 28px; }   /* 两只槽一起抬，别只抬一个 */
  .apva-ft-st { padding: 0 12px 0 0; font-size: 11px; }
  .apva-ft-st::before { height: 13px; margin: 0 8px 0 10px; }
  .apva-ft-st b { font-size: 16.5px; margin: 0 4px 0 7px; }
  .apva-pgt { padding: 2px; }
  .apva-pg-sz { min-width: 56px; padding: 0 7px 0 8px; }
  .apva-pg-sz > b { font-size: 13px; }
  .apva-pg-sz > b.is-w { font-size: 12.5px; }
  .apva-pg-sz > em { font-size: 11px; }
  .apva-pgp em { font-size: 11px; }
  .apva-pgp .is-w { font-size: 12.5px; }
  .apva-pg-nav { width: 24px; height: 24px; }
  .apva-pg-nav svg { width: 13px; height: 13px; }
  .apva-pg-cur { min-width: 44px; }
  .apva-pg-cur > b, .apva-pg-cur > em { font-size: 13px; }
  .apva-pg-cur > i { font-size: 12px; }
  .apva-pgpick { gap: 2px; padding: 7px; max-height: 180px; }
  .apva-pgp { height: 26px; font-size: 13px; }
  .apva-pgp.is-on::before { top: 6px; bottom: 6px; }

  /* 智能检测开关的 2K 档只在它自己的定义处（文件前段 .apvr-sw 的媒体块）收口：
     27px 高的芯片 + 17px 方槽 + 10px 方芯。
     这里原先还留着一版「胶囊轨道 + 左右平移滑块」的尺寸（34×18 / 14px / translateX(16px)），
     那是方槽方案之前的旧皮——它在这段媒体块里位置更靠后，赢下了层叠，
     于是 2K 下轨道被拉成一根宽胶囊、方芯被推出槽外挂在按钮右缘上。已删。 */
}

@media (prefers-reduced-motion: reduce) {
  .apva-card, .apva-card::before { animation: none; }
  .apva-state::before { transition: none; }
  .apva-card[data-urg="over"] .apva-state i,
  .apva-card[data-urg="soon"] .apva-state i { animation: none; }
}

/* ============================================================
   「全部申请」列表
   —— 同一族玻璃卡（复用 .apva-card 的底 / 左缘色脊 / 入场错峰），换一套读数：
      ① 业务名称 + 受理状态（受理中 / 已通过 / 不通过 / 已关闭）
      ② 业务编号 · 类型 · 业务方名称
      ③ 当前节点微轨 + 节点名 ……………… 提交时间
   —— 这一页没有倒计时，所以卡片是「静态」的：没有呼吸点、没有余量轨。
      它是一张记录，不是一条待办——可读的重心从「还剩多久」换到「走到哪一步」。
      但记录卡同样是入口：点进去是只读的「申请详情」（见 .apvr-flow 那段），
      所以它有一档克制的 hover，不发光、只提亮。
   —— 四态配色：
      · 受理中 → 琥珀 #E0A968（在途，有下文）
      · 已通过 → 玉绿 #7EC9A6（办结，与左翼「受理通过」同一支绿）
      · 不通过 → 中灰 #A2A6AB（否决）
      · 已关闭 → 暗灰 #7E7A74（归档）
     消极两态不配彩色：它们已经没了下文，不该在列表里比在途的事更抢眼。
     灰阶只分两档明度（L*68 / L*51），再靠胶囊上的文字区分——
     这一页每张卡都写着状态名，颜色不必独自承担识别。
     红留给「已超时」这类还要人处理的事，终态不占红。
   ============================================================ */

/* 底栏只报总数：原先按状态分段的染色（受理中 / 超时 / 已受理）随分段一起撤掉 */

.apva-card.is-record { --apva-st: #8FB0CC; cursor: pointer; }
/* 记录卡比待办卡矮一档：末行是「节点 + 提交」一行读数，不需要待办那行任务时间窗的余量，
   收紧上下内边距，一屏正好多放一张 —— 归档面读的是密度，不是留白 */
.apva-card.is-record { padding: 10px 13px 9px 15px; }
.apva-card.is-record .apva-name { line-height: 1.36; }
.apva-card.is-record .apva-sub { line-height: 1.42; }
.apva-card.is-record .apva-top { padding-bottom: 7px; margin-bottom: 7px; }
.apva-card.is-record[data-st="pending"]  { --apva-st: #E0A968; }
.apva-card.is-record[data-st="passed"]   { --apva-st: #7EC9A6; }
.apva-card.is-record[data-st="rejected"] { --apva-st: #A2A6AB; }
.apva-card.is-record[data-st="closed"]   { --apva-st: #7E7A74; }

/* 记录卡也是入口（进「申请详情」，只读）：hover 提亮一档但不发光——
   它读的是档案，不是待办，亮起来的分寸比待办卡收着一点 */
.apva-card.is-record:hover {
  border-color: rgba(178, 200, 222, 0.18);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.070),
    inset 0 0 18px rgba(0, 0, 0, 0.10),
    0 3px 14px -9px rgba(4, 12, 22, 0.66);
}
/* 键盘：与鼠标同权。焦点环只在这一种卡上出现，沿用面板那支冷蓝 */
.apva-card.is-record:focus-visible {
  outline: none;
  border-color: rgba(160, 200, 245, 0.46);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.075),
    0 0 0 1px rgba(150, 196, 240, 0.34),
    0 0 16px -6px rgba(150, 200, 245, 0.75);
}
/* 色脊比待办安静一档：只作「这一条是什么结论」的引线，不再发光 */
.apva-card.is-record::before,
.apva-card.is-record:hover::before {
  width: 2px;
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--apva-st) 46%, transparent) 0%,
    color-mix(in srgb, var(--apva-st) 5%, transparent) 100%);
  box-shadow: none;
}
/* 状态胶囊：定格不呼吸，底色比待办实一档（结论是要被读到的） */
.apva-card.is-record .apva-state {
  background: color-mix(in srgb, var(--apva-st) 11%, rgba(10, 16, 24, 0.34));
  border-color: color-mix(in srgb, var(--apva-st) 30%, transparent);
}
.apva-card.is-record .apva-state::before { display: none; }
.apva-card.is-record .apva-state i { animation: none; opacity: 0.9; }

/* —— ③ 末行：一把修饰框，把这一行收成一件东西 ——
   框里仍是四段：时间 ｜ 受理节点 · 节点名。
   之所以套框：上面两行是「叙述」（名称、编号、申报方），这一行是「读数」，
   两者质地不同。不套框时它就是第三行小字，跟第二行同款，读起来没完；
   套上框，它有了自己的边界，扫一列时先看见这枚框、再读框里的字。
   框是内描边的浅玻璃，跟筛选格同一套配方（不叠背景色，深底上不脏）。 */
.apvx-meta {
  display: flex; width: fit-content; align-items: center; gap: 7px;
  max-width: 100%; margin-top: 8px;
  padding: 3px 10px 3px 9px; border-radius: 7px;
  background: rgba(255, 255, 255, 0.042);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.065),
    inset 0 1px 0 rgba(255, 255, 255, 0.03);
  /* 一行一个行高：框内所有元素都吃这个 16px，
     等宽数字与中文才落在同一条基线上（混排时最容易差的就是这里） */
  font-size: 12px; line-height: 16px;
}
/* 标签：L3 灰，短，不去定宽——定宽会在「受理节点」后面吊一条空沟 */
.apvx-k {
  flex-shrink: 0; font-size: 12px; line-height: 16px;
  letter-spacing: 0.6px; color: var(--text-3);
}
/* 断句竖线：10px，落在 16px 行盒的正中——
   align-self:center 而不是 baseline，否则它会跟着文字基线往上漂 */
.apvx-sep {
  flex-shrink: 0; align-self: center;
  width: 1px; height: 10px; margin: 0 1px;
  background: rgba(255, 255, 255, 0.16);
}
/* 受理节点：一枚停靠点 + 节点名。
   点没有「第几站」的含义，也没画连线——链路节点按业务动态挂、条数不固定，
   一条微轨会把「不确定的链路」画成「确定的进度」。这里只染状态色，说明停靠位置。 */
.apvx-at {
  display: inline-flex; align-items: center; gap: 6px; min-width: 0;
  font-size: 12px; line-height: 16px; letter-spacing: 0.3px;
  color: rgba(206, 226, 242, 0.9);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.apvx-at > i {
  flex-shrink: 0; width: 5px; height: 5px; border-radius: 50%;
  background: color-mix(in srgb, var(--apva-st) 74%, transparent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--apva-st) 13%, transparent);
}
/* —— 「待我受理」「重要飞行事件」两张待办卡：同一枚框，去掉两个字段名 ——
   原来末行是两列「任务性质 · xxx ｜ 起止时间 · xx:xx」，标签各占 4.3em，
   一行里被切出四段、还立着一条对齐用的空沟。
   现在只剩框内一段：性质 ｜ 起止时间——竖线读作「什么任务 ｜ 什么时候飞」，
   字段名在这里是替读者念字，删掉不影响任何一个字的含义。 */
.apvx-nature {
  flex-shrink: 0; max-width: 8.5em;
  font-size: 12px; line-height: 16px; letter-spacing: 0.3px;
  color: rgba(206, 226, 242, 0.9);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* 起止两端仍是等宽读数，字号收到与中文齐平（原 13px，比同行中文高半档，落不进同一条线） */
.apvx-meta .apva-time { gap: 6px; }
.apvx-meta .apva-time > span {
  font-size: 12px; line-height: 16px; letter-spacing: 0.1px;
  color: rgba(198, 219, 238, 0.9);
}

/* 已关闭：链路不再流动，停靠点褪回中性灰（与「已关闭」那支紫棠拉开，不与主线争色） */
.apva-card.is-record[data-st="closed"] .apvx-at > i {
  background: rgba(204, 204, 214, 0.42);
  box-shadow: 0 0 0 2px rgba(204, 204, 214, 0.09);
}

/* ============================================================
   「全部申请」筛选区
   —— 三个条件，摊开不折叠：编号 / 业务方名称（两枚检索格）+ 类型（一排芯片）。
      条件和「待我受理」那套同一副语言——格子里裸输入、有值描边转暖、
      选中转琥珀，只是不需要日期那一档，也就不需要「筛选」按钮再收一层。
   ============================================================ */
.apvx-filter { display: flex; flex-direction: column; gap: 8px; }
.apvx-fs { display: flex; gap: 8px; }
/* 检索格：与「待我受理」的 .apvf-slot 同一套玻璃格配方（内描边 + 顶部内高光），
   只是更矮——这里只放一行读数，没有第二行的标签 */
.apvx-f {
  position: relative; flex: 1 1 0; min-width: 0;
  display: flex; align-items: center; gap: 6px;
  height: 30px; padding: 0 8px 0 10px; border-radius: 7px;
  background: rgba(255, 255, 255, 0.05);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.09),
    inset 0 1px 0 rgba(255, 255, 255, 0.035);
  cursor: text;
  transition: background 170ms ease, box-shadow 180ms ease;
}
.apvx-f:hover { background: rgba(255, 255, 255, 0.055); }
.apvx-f:focus-within {
  background: rgba(255, 255, 255, 0.055);
  box-shadow: inset 0 0 0 1px rgba(240, 206, 158, 0.42);
}
.apvx-f[data-on] {
  background: rgba(232, 184, 121, 0.072);
  box-shadow: inset 0 0 0 1px rgba(232, 184, 121, 0.32);
}
.apvx-f[data-on]:focus-within {
  box-shadow: inset 0 0 0 1px rgba(240, 206, 158, 0.5);
}
.apvx-f input {
  flex: 1; min-width: 0; height: 100%; padding: 0; margin: 0;
  border: 0; border-radius: 0; background: transparent; outline: none;
  -webkit-appearance: none; appearance: none;
  font-family: inherit; font-size: calc(var(--fs-l3) - 0.5px); letter-spacing: 0.2px;
  color: #E9F3FC; caret-color: #E8B879;
}
.apvx-f input::placeholder { color: rgba(170, 188, 206, 0.4); letter-spacing: 0.3px; }
.apvx-f input::selection { background: rgba(232, 184, 121, 0.3); color: #FFF6E9; }
/* 清除：只在有值时出现，擦的是这一格的条件，不是整套筛选 */
.apvx-f-x {
  flex-shrink: 0; display: none; place-items: center;
  width: 15px; height: 15px; padding: 0; border: 0; border-radius: 50%;
  background: rgba(255, 255, 255, 0.09);
  font-family: inherit; font-size: 11px; line-height: 1;
  color: rgba(232, 243, 252, 0.72); cursor: pointer;
  transition: background 160ms ease, color 160ms ease;
}
.apvx-f[data-on] .apvx-f-x { display: grid; }
.apvx-f-x:hover { background: rgba(232, 184, 121, 0.24); color: #FFF3E2; }

/* 类型：五档等宽分段档（内陷轨 + 选中琥珀玻璃）。
   —— 旧版是五枚各自带框、宽窄随字的小芯片：一行塞满、右端顶死在格线上，
      与上方两枚检索格既不同宽也不成组，读作五个散件。
      现在收进一条内陷轨——轨是凹的、检索格是凸的，上下两行一凹一凸，
      结构自己就分开了；五档严格等分，两端与检索格对齐成一条方形栅格。
   —— 选中态刻意比页签那枚实心琥珀弱一档（半透明琥珀玻璃 + 描边）：
      页签说的是「你在哪一页」（本层面唯一的位置感），
      这里说的是「哪一档正在生效」，两者不该同级，否则一屏里并列三个实心琥珀块。 */
.apvx-types {
  display: flex; align-items: stretch;
  height: 30px; padding: 3px; border-radius: 8px;
  background: rgba(4, 8, 14, 0.34);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.055),
    inset 0 2px 4px -1px rgba(0, 0, 0, 0.46);
}
.apvx-t {
  position: relative; flex: 1 1 0; min-width: 0;
  height: 100%; padding: 0 2px; border: 0; border-radius: 6px;
  background: transparent;
  font-family: inherit; font-size: 11.5px; font-weight: 500;
  letter-spacing: 0.4px; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
  color: rgba(186, 208, 228, 0.58); cursor: pointer;
  transition: color 170ms ease, background 190ms ease, box-shadow 190ms ease;
}
.apvx-t:hover { color: #EDF6FF; background: rgba(255, 255, 255, 0.05); }
.apvx-t:focus-visible { outline: 1px solid rgba(240, 206, 158, 0.55); outline-offset: 1px; }
.apvx-t.is-on {
  color: #FFF4E4;
  background: linear-gradient(180deg, rgba(240, 205, 155, 0.26) 0%, rgba(184, 120, 56, 0.16) 100%);
  box-shadow:
    inset 0 0 0 1px rgba(240, 206, 158, 0.42),
    inset 0 1px 0 rgba(255, 238, 210, 0.16),
    0 0 12px -5px rgba(217, 154, 78, 0.5);
  text-shadow: 0 1px 2px rgba(40, 22, 0, 0.45);
}
.apvx-t.is-on:hover {
  background: linear-gradient(180deg, rgba(244, 212, 166, 0.32) 0%, rgba(190, 126, 60, 0.2) 100%);
}

/* 筛选无结果：空态落在列表区正中，不吊在顶上，也不撑成一张大虚框 */
.apvx-none {
  flex: 1; min-height: 120px;
  display: grid; place-items: center;
}
.apvx-none > span {
  padding: 18px 24px; border-radius: 10px;
  border: 1px dashed rgba(170, 200, 228, 0.12);
  font-size: 12px; letter-spacing: 1.2px; color: rgba(178, 202, 224, 0.38);
}

/* 2K 档：与列表卡片同步抬一档 */
@media (min-width: 2048px) {
  .apvx-meta { gap: 8px; padding: 4px 11px 4px 10px; font-size: 13px; line-height: 17px; }
  .apvx-k { font-size: 13px; line-height: 17px; }
  .apvx-at { gap: 7px; font-size: 13px; line-height: 17px; }
  .apvx-at > i { width: 6px; height: 6px; }
  .apvx-sep { height: 12px; }
  .apvx-nature { font-size: 13px; line-height: 17px; }
  .apvx-meta .apva-time > span { font-size: 13px; line-height: 17px; }
  .apvx-f { height: 33px; }
  .apvx-f input { font-size: var(--fs-l3); }
  .apvx-types { height: 33px; }
  .apvx-t { font-size: 12.5px; letter-spacing: 0.6px; }
}

@media (prefers-reduced-motion: reduce) {
  .apvx-f, .apvx-t { transition: none; }
}

/* ============================================================
   「重要飞行事件」列表
   —— 与「待我受理」同一副卡：名称 + 状态 / 编号 · 申报方 /
      重要飞行事件标记 ｜ 类型 · 性质 · 事件时段（.apvk-mark + .apvx-meta）
   —— 标记是这一页唯一的暖色：琥珀玻璃徽标 + 左端一颗暖白菱形。
      它只说明「级别」，不取状态色——柱子颜色仍只归状态，与「全部申请」同一支色板
   —— 这页的卡是可点的（进事件详情），所以留着 hover 提亮；
      但「能不能批」不由卡决定——六档状态里只有「受理中」在详情里长出按钮
   —— 筛选三档沿用「全部申请」那条内陷轨（.apvx-types / .apvx-t），
      只是不再等分拉满：三档若也等宽铺满，就会与上方三切卡同宽同位，
      被读成一排「第二页签」
   ============================================================ */
.apvk-filter { flex-shrink: 0; }
.apvk-types { width: fit-content; max-width: 100%; }
/* 按字宽排、贴左：三个词本来就长短不一，强行等分会把「全部」撑成一格宽按钮 */
.apvk-types > .apvx-t { flex: 0 0 auto; padding: 0 15px; min-width: 62px; }

/* —— 卡片 —— */
.apva-card.is-key { --apva-st: #8FB0CC; padding: 10px 13px 9px 15px; }
.apva-card.is-key .apva-top { padding-bottom: 7px; margin-bottom: 7px; }
.apva-card.is-key .apva-name { line-height: 1.36; }
.apva-card.is-key .apva-sub { line-height: 1.5; }
/* 六档状态色（都取自项目既有色板）：
   受理中 琥珀（还能判）/ 已通过 玉绿 / 不通过 中灰 /
   已超时 砖红（还要人处理，才配红）/ 已关闭 暗灰 / 未受理 冷钢蓝（还没进流程） */
.apva-card.is-key[data-st="pending"]    { --apva-st: #E0A968; }
.apva-card.is-key[data-st="passed"]     { --apva-st: #7EC9A6; }
.apva-card.is-key[data-st="rejected"]   { --apva-st: #A2A6AB; }
.apva-card.is-key[data-st="over"]       { --apva-st: #E8776B; }
.apva-card.is-key[data-st="closed"]     { --apva-st: #7E7A74; }
.apva-card.is-key[data-st="unaccepted"] { --apva-st: #9CB2C6; }

/* 状态胶囊：定格不呼吸，也不带余量轨——这一页没有倒计时，
   胶囊只回答「现在是什么状态」 */
.apva-card.is-key .apva-state {
  background: color-mix(in srgb, var(--apva-st) 11%, rgba(10, 16, 24, 0.34));
  border-color: color-mix(in srgb, var(--apva-st) 30%, transparent);
}
.apva-card.is-key .apva-state::before { display: none; }
.apva-card.is-key .apva-state i { animation: none; opacity: 0.9; }
/* 已超时：与「不通过」同色但更实——它是这一列里唯一「已经出事」的状态 */
.apva-card.is-key[data-st="over"] .apva-state {
  background: color-mix(in srgb, var(--apva-st) 17%, rgba(10, 16, 24, 0.34));
  border-color: color-mix(in srgb, var(--apva-st) 46%, transparent);
  box-shadow: 0 0 12px -4px color-mix(in srgb, var(--apva-st) 40%, transparent);
}
/* 未受理：空心。它不是一种结论，是「还没开始」——实心底会被读成结果 */
.apva-card.is-key[data-st="unaccepted"] .apva-state {
  background: transparent;
  border-color: color-mix(in srgb, var(--apva-st) 34%, transparent);
  color: rgba(188, 210, 230, 0.74);
}
.apva-card.is-key[data-st="unaccepted"] .apva-state i { box-shadow: none; opacity: 0.45; }

/* —— 第三行：标记 ｜ 修饰框 ——
   这一行装两件东西，主次分明：
   · 左端「重要飞行事件」标记 = 「为什么这条在你眼前」，是这一页唯一的被染色徽标；
   · 右端修饰框 = 读数（类型 ｜ 性质 ｜ 时段），仍走与另两页同一枚中性玻璃。
   上一版把标记塞进第二行的「编号 · 申报方」之间：一枚灰芯片既没读出「重要」，
   又把申报方挤成省略号——一列扫过去看到的是六段残缺的申报方名。 */
.apvk-line {
  display: flex; align-items: center; gap: 13px;
  min-width: 0; margin-top: 8px;
}
/* 标记 = 空心章：只留 1px 金线 + 金字，不填底。
   走过的三条路，问题各不相同：
   · 实心金星（#F8DCB4→#E3B478 填底、深棕字）= 一颗按钮，和右上角状态胶囊抢同一个「控件」身份；
   · 纯字 + 菱形 = 干净，但每张卡第三行只有一段孤零零的金字，缺一条边界把它从读数里摘出来；
   · 空心章 = 有轮廓没有重量：线只 1px、底透明，卡面仍是深底，
     却把「这是一枚标记」说明白了——轮廓是身份，不是容器。
   描边用 inset 阴影而不是 border：不占盒模型，字号与行高不必为 1px 让路 */
.apvk-mark {
  flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center; gap: 5px;
  /* 等宽轨道：事由有 4 字（医疗救护）也有 6 字（重大活动保障），
     若各自按内容撑宽，后面那列「类型 ｜ 时段」的起点就会在 92px 与 118px 之间乱跳，
     一列扫下去参差不齐。这里给章一条固定轨道（6 字所需宽度），
     章内内容居中——第二列因此落在同一条竖线上，与「编号 · 申报方」左缘也对得齐 */
  min-width: 106px;
  /* 方角（3px）而不是药丸：右上角的状态胶囊是圆角+圆点的「胶囊语法」，
     章若也用 5px 以上的圆角，一张卡上就出现两枚同族的小胶囊，
     读者分不清哪个是状态、哪个是事由。章用直角语法 = 印章，胶囊用药丸语法 = 状态 */
  height: 22px; padding: 0 9px; border-radius: 3px;
  background: none;
  box-shadow:
    inset 0 0 0 1px rgba(255, 202, 134, 0.52),
    inset 0 0 8px -3px rgba(255, 190, 116, 0.6);
  font-size: 12px; line-height: 1; letter-spacing: 0.8px; font-weight: 600;
  /* 暖金而不是米白：米色在 1x 下像褪了色的字，读不出「标记」 */
  color: #FFCB82; white-space: nowrap;
  /* 金字自带一圈极淡的光，线不亮字亮，视线仍落在字上 */
  text-shadow: 0 0 10px rgba(238, 172, 96, 0.38);
}
/* 菱形是标记本体：章里唯一一处实色，也是全卡最亮的一点 */
.apvk-mark > i {
  flex-shrink: 0; width: 6px; height: 6px; border-radius: 1px;
  background: linear-gradient(180deg, #FFF8EC 0%, #F2CFA2 100%);
  transform: rotate(45deg);
  box-shadow: 0 0 8px rgba(246, 204, 148, 0.8);
}
.apvk-mark > b { font-weight: 600; }
/* 详情抬头里的小一号：与状态胶囊同高，两枚并排时才是一条线；
   无框之后不再有内边距，靠与胶囊之间那 9px 分开 */
.apvk-mark-hero {
  height: 20px; gap: 5px; padding: 0 7px 0 6px; margin-left: 4px;
  border-radius: 2.5px; font-size: 11.5px; letter-spacing: 0.7px;
  /* 抬头里只有一枚，跟着字走，不占轨道 */
  min-width: 0;
}
.apvk-mark-hero > i { width: 5.5px; height: 5.5px; }
/* 框跟着这一行走：margin-top 归行，框自己不再撑开间距。
   宽度撑满行尾（不 floating 在半路）：类型贴左、时段贴右，
   一列时间在右缘对齐成一条竖线，竖着扫时间比横着找更快。
   不再描边——一枚实心金章旁边再套一圈细线框，像两个控件打架；
   这里只留一层极浅的底，读作卡片上的「一条带」而不是一个输入框 */
.apvk-line > .apvx-meta {
  margin-top: 0; flex: 0 1 auto; min-width: 0;
  /* 两格：类型 52px（四种字宽固定）＋ 时段。类型用等宽轨道而不是 auto，
     空着的那几张卡时间才不会左移一格——这一行列对齐靠轨道，不靠内容 */
  display: grid; grid-template-columns: 52px auto; align-items: center; gap: 10px;
  height: 24px; padding: 0;
  /* 底色与内描边一并抹掉：.apvx-meta 的基础样式是给「待我受理」那枚框的，
     这里不套框，就得把它的底和描边显式收干净 */
  background: none; box-shadow: none; border-radius: 0;
}
/* 框内三段的第一段是事件类型：比性质亮半档——活动与计划是本页唯一的切分维度 */
.apvx-kind {
  flex-shrink: 0;
  font-size: 12.5px; line-height: 16px; letter-spacing: 0.5px;
  font-weight: 500; color: rgba(224, 240, 252, 0.94);
}
/* 框里只剩两段（类型 ｜ 时段）：类型比时段亮一点，是本页唯一的切分维度 */

/* —— 事件详情的状态色 ——
   抬头与正文同一支（.apvr-d 的 --apvr-st）。用 data-kst，不复用受理详情的 data-st：
   那边的 data-st 是「结论」、与 data-urg 成对使用，两个页面的语义不该挂在同一批选择器上 */
.apvr-d[data-kst="pending"]    { --apvr-st: #E0A968; }
.apvr-d[data-kst="passed"]     { --apvr-st: #7EC9A6; }
.apvr-d[data-kst="rejected"]   { --apvr-st: #A2A6AB; }
.apvr-d[data-kst="over"]       { --apvr-st: #E8776B; }
.apvr-d[data-kst="closed"]     { --apvr-st: #7E7A74; }
.apvr-d[data-kst="unaccepted"] { --apvr-st: #9CB2C6; }
/* 未受理的抬头胶囊也走空心：与列表里那一枚同款，点进来颜色不断档 */
.apvr-d[data-kst="unaccepted"] .apvr-dst {
  background: transparent;
  border-color: color-mix(in srgb, var(--apvr-st) 38%, transparent);
  color: rgba(190, 212, 232, 0.76);
}
.apvr-d[data-kst="unaccepted"] .apvr-dst > i { box-shadow: none; opacity: 0.5; }

/* —— 不可审批：操作位不长按钮，只落一句为什么 ——
   它占的仍是「受理意见」那一格，所以面板底缘不会突然空出一条；
   颜色只给那个短标签，解释文字一律中性灰——它是一句说明，不是一个警告 */
.apvk-lock {
  display: flex; align-items: baseline; gap: 8px;
  padding: 3px 0 11px;
}
.apvk-lock > b {
  flex-shrink: 0;
  font-size: 12.5px; font-weight: 600; letter-spacing: 0.5px;
  color: color-mix(in srgb, var(--apvk-ls, #8FB0CC) 86%, transparent);
}
.apvk-lock > span {
  min-width: 0;
  font-size: 11.5px; line-height: 1.5; letter-spacing: 0.2px;
  color: rgba(176, 198, 218, 0.5);
}

/* 2K 档：标记与分段档各抬一档（与卡片字号同步） */
@media (min-width: 2048px) {
  .apvk-types > .apvx-t { padding: 0 18px; min-width: 70px; }
  .apvk-line { gap: 10px; }
  .apvk-mark { height: 24px; gap: 6px; padding: 0 10px; font-size: 13px; min-width: 116px; }
  .apvk-mark > i { width: 6.5px; height: 6.5px; }
  /* 详情抬头那枚跟着胶囊走，不占轨道：上面那条 .apvk-mark 的定宽与定高在这儿要收回去，
     否则 2K 下抬头里会冒出一枚 116px 宽的金章，把状态胶囊挤到左边 */
  .apvk-mark-hero { height: 22px; padding: 0 8px 0 7px; font-size: 12.5px; min-width: 0; }
  .apvk-mark-hero > i { width: 6px; height: 6px; }
  .apvk-line > .apvx-meta { height: 26px; padding: 0; grid-template-columns: 56px auto; gap: 11px; }
  .apvx-kind { font-size: 13px; line-height: 17px; }
  .apvk-lock > b { font-size: 13.5px; }
  .apvk-lock > span { font-size: 12.5px; }
}

@media (prefers-reduced-motion: reduce) {
  #apvr-panel, .apvr-toggle, .apvr-content { transition: none; }
  body.as-approve-scene #apvr-panel.apvr-in, body.as-approve-scene .apvr-toggle.apvr-in { animation: none; }
}

/* ============================================================
   受理详情（#apvr-panel[data-view="detail"]）
   —— 点击列表卡，面板内容原地切位面：页签与筛选整体让位，详情接管滚动区。
      这是「同一块面板翻到下一页」，不是弹出新窗口——所以不新增浮层、不换标题栏。
      「返回列表」挂在标题行右端（标题行不在滚动区，滚动时也一直在），
      详情自己不带吸附条，也就不存在压住内容的问题。
   —— 版式语汇：一张参数表。
      · 抬头：状态灯 + 时限读数 + 任务名 + 类型/申报方，左缘一道状态色脊
        （色脊颜色 = 该条任务在列表里的紧迫度，点进来颜色不断档）
      · 分区之间以「整宽横线 + 间距」断开，块与块的分界一眼可见
      · 字段表：严格两列，字段按顺序连续流入（不按语义强行配对），
        所有标签、所有读数各落在一条竖线上；每行一条发丝线横向托住视线
      · 空值（- / 无）统一压到最低对比——一屏里十几处「无」不该抢读数的位置
      · 航空器 / 操控员：分区内先一行标识（序列号 / 姓名 + 机型 / 执照），
        再接下方的字段行，标识行下自带一条分隔线
   —— 只改「读」：详情是受理前的核对面，动作留在列表的批量操作里
   ============================================================ */
#apvr-panel[data-view="detail"] .apvr-tabs,
#apvr-panel[data-view="detail"] .apvr-filter { display: none; }

/* 标题行右端的动作：与标题同一行、贴右缘。
   读作「回到上一层」，不是一个表单按钮 —— 圆角药丸 + 前置箭头，
   底色只给一层极淡的蓝，hover 时箭头向左轻推，把「回去」这件事做进动作里 */
.apvr-head-act {
  flex-shrink: 0; margin-left: 4px;
  display: inline-flex; align-items: center; gap: 5px;
  height: 23px; padding: 0 10px 0 9px; border-radius: 999px;
  border: 1px solid rgba(160, 200, 240, 0.18);
  background: linear-gradient(180deg, rgba(150, 196, 240, 0.10) 0%, rgba(150, 196, 240, 0.03) 100%);
  font-family: inherit; font-size: 11.5px; letter-spacing: 0.9px;
  color: rgba(206, 226, 244, 0.78); cursor: pointer;
  transition: color 200ms ease, background 200ms ease, border-color 200ms ease, box-shadow 200ms ease;
}
/* 箭头用两条边描出来：比字符「‹」稳，缩放不会糊成一团 */
.apvr-head-act::before {
  content: ""; width: 5px; height: 5px; margin-left: 1px; flex-shrink: 0;
  border-left: 1.2px solid currentColor; border-bottom: 1.2px solid currentColor;
  transform: rotate(45deg); opacity: 0.72;
  transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1), opacity 200ms ease;
}
.apvr-head-act:hover {
  color: #F4FAFF; border-color: rgba(170, 208, 246, 0.42);
  background: linear-gradient(180deg, rgba(150, 196, 240, 0.20) 0%, rgba(150, 196, 240, 0.06) 100%);
  box-shadow: 0 0 16px -6px rgba(150, 200, 245, 0.95), inset 0 1px 0 rgba(255, 255, 255, 0.10);
}
.apvr-head-act:hover::before { transform: rotate(45deg) translate(-1px, 1px); opacity: 1; }
.apvr-head-act:active { transform: translateY(0.5px); }
.apvr-head-act:focus-visible { outline: 2px solid rgba(160, 200, 245, 0.55); outline-offset: 2px; }

.apvr-d {
  --apvr-st: #8FB0CC;
  display: flex; flex-direction: column; gap: 10px;
  padding-bottom: 8px;
  animation: apvr-d-in 320ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
.apvr-d[data-urg="soon"] { --apvr-st: #E0A968; }
.apvr-d[data-urg="over"] { --apvr-st: #E8776B; }
/* 已受理：色脊转为结论色（通过=钢蓝，退回=中灰），不再有「还剩多久」的红 */
.apvr-d[data-urg="done"] { --apvr-st: #93AFC8; }
.apvr-d[data-urg="done"][data-st="rejected"] { --apvr-st: #A2A6AB; }
@keyframes apvr-d-in {
  from { opacity: 0; transform: translateX(14px); }
  to   { opacity: 1; transform: none; }
}
/* 退回列表：整体自左归位一档（比详情更轻，避免「又刷新了一次」） */
.apvr-content.is-back { animation: apvr-d-back 240ms ease both; }
@keyframes apvr-d-back {
  from { opacity: 0; transform: translateX(-8px); }
  to   { opacity: 1; transform: none; }
}

/* —— ② 抬头：状态 / 时限 / 任务名 / 归属 ——
   它是这一页的「概要」，必须一直在：滚轮一动，下面的分区从它下面穿过去，
   而不是把标题也一起带走。所以给它一个不透明底 + 一层纵向模糊——
   否则穿过去的分区文字会从卡片里透出来，读起来像重影 */
/* —— ② 抬头：状态 / 时限 / 任务名 / 归属 ——
   它是这一页的「概要」，必须一直在。做法不是 sticky 压在内容上，
   而是和滚动区并排的两个盒子：它在 #apvr-dhead 里固定，正文在 #apvr-content 里滚。
   两者在布局上不重叠，所以不存在透字，也就不需要靠不透明底和不透明阴影去遮 */
.apvr-dhead {
  flex: 0 0 auto; min-height: 0; margin-bottom: 0;
  display: flex; flex-direction: column;
  /* 展开档案时它要接手正文让出的高度。高度由脚本写死成像素再过渡——
     不去动 flex-grow：那条路在「内容高本身也在变」的时候会被算两遍，
     点击那一帧就会跳一下 */
  overflow: hidden;
  transition: height 420ms cubic-bezier(0.22, 1, 0.36, 1);
}
/* 空槽必须彻底退出布局：.apvr-dhead 的 display:flex 会盖掉 UA 的 [hidden]{display:none}，
   列表态它是 0 高但仍是 flex item，会白吃一道 .apvr-body 的 gap——
   原先列表头那行「共 N 条 · 超时 M 条」留下的那道空就是它 */
.apvr-dhead[hidden], .apvr-dhead:empty { display: none; }
/* 抬头那层只装一张卡，不参与详情正文的纵向节奏 */
.apvr-dhd { flex: 1 1 auto; min-height: 0; gap: 0; padding-bottom: 0; animation: none; }
.apvr-dhero {
  position: relative;
  padding: 10px 12px 11px 14px; border-radius: 10px;
  /* 始终是纵向 flex + 撑满父级：展开时要让档案吃满剩余高度，收起时也不能临时换
     display 或 flex 值——一换就重排一次，看着像闪了一下 */
  flex: 1 1 auto; min-height: 0;
  display: flex; flex-direction: column;
  background:
    radial-gradient(120% 90% at 0% 0%, rgba(124, 158, 192, 0.06) 0%, rgba(124, 158, 192, 0) 62%),
    linear-gradient(180deg, rgba(92, 122, 152, 0.05) 0%, rgba(42, 56, 72, 0.012) 100%),
    rgba(13, 18, 26, 0.86);
  border: 1px solid rgba(168, 196, 220, 0.085);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.045);
}
/* 左缘状态色脊：与列表卡同色，读作「还是那一条」 */
.apvr-dhero::before {
  content: ""; position: absolute; left: 0; top: 11px; bottom: 11px; width: 2px; border-radius: 0 2px 2px 0;
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--apvr-st) 80%, transparent) 0%,
    color-mix(in srgb, var(--apvr-st) 8%, transparent) 100%);
  box-shadow: 0 0 9px color-mix(in srgb, var(--apvr-st) 26%, transparent);
}
.apvr-dhero-top { display: flex; align-items: center; gap: 6px; }
/* 状态胶囊：和列表卡同一套语义色，但在这里收成「状态灯 + 药丸」——
   待受理 / 已通过 / 已退回是结论，颜色跟紧迫度走（超时转红、临近转琥珀） */
.apvr-dst {
  display: inline-flex; align-items: center; gap: 5px;
  height: 20px; padding: 0 9px 0 8px; border-radius: 999px;
  font-size: var(--fs-l3); font-weight: 600; letter-spacing: 1.1px;
  color: var(--apvr-st);
  background: color-mix(in srgb, var(--apvr-st) 12%, rgba(10, 16, 24, 0.42));
  border: 1px solid color-mix(in srgb, var(--apvr-st) 26%, transparent);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
  transition: background 260ms ease, border-color 260ms ease, box-shadow 260ms ease;
}
.apvr-dst > i {
  width: 5px; height: 5px; border-radius: 50%; flex-shrink: 0;
  background: currentColor; box-shadow: 0 0 7px currentColor;
}
.apvr-d[data-urg="soon"] .apvr-dst {
  background: color-mix(in srgb, var(--apvr-st) 16%, rgba(10, 16, 24, 0.42));
  border-color: color-mix(in srgb, var(--apvr-st) 36%, transparent);
}
.apvr-d[data-urg="over"] .apvr-dst {
  background: color-mix(in srgb, var(--apvr-st) 22%, rgba(10, 16, 24, 0.42));
  border-color: color-mix(in srgb, var(--apvr-st) 50%, transparent);
  box-shadow: 0 0 13px -4px color-mix(in srgb, var(--apvr-st) 62%, transparent),
              inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
.apvr-d[data-urg="over"] .apvr-dst > i,
.apvr-d[data-urg="soon"] .apvr-dst > i { animation: apva-breathe 1.6s ease-in-out infinite; }

/* 时限读数：药丸包住「标签 + 读数」两段 —— 标签说清计时口径，读数只报时间。
   颜色跟着 data-urg 走（充裕静蓝、临近琥珀、超时砖红），与列表胶囊同一套语义 */
.apvr-dcd {
  margin-left: auto;
  display: inline-flex; align-items: baseline; gap: 5px;
  flex-shrink: 0; white-space: nowrap;
  padding: 2px 9px 2px 8px; border-radius: 6px;
  font-family: var(--font-mono); font-size: var(--fs-l3); letter-spacing: 0.2px;
  font-variant-numeric: tabular-nums;
  color: rgba(200, 220, 238, 0.8);
  background: rgba(150, 196, 240, 0.055);
  border: 1px solid rgba(150, 196, 240, 0.12);
  transition: color 240ms ease, background 240ms ease, border-color 240ms ease;
}
/* 标签是「受理时限 / 已超时」这类口径说明，不折行（一折行药丸就成了方块） */
.apvr-dcd > em {
  font-style: normal; font-family: var(--font-ui);
  font-size: var(--fs-l3); letter-spacing: 0.2px; color: rgba(180, 204, 226, 0.54);
  white-space: nowrap;
}
.apvr-dcd > b { font-weight: 600; letter-spacing: 0.3px; color: rgba(228, 241, 252, 0.94); }
.apvr-d[data-urg="soon"] .apvr-dcd { background: rgba(224, 169, 104, 0.09); border-color: rgba(224, 169, 104, 0.24); }
.apvr-d[data-urg="soon"] .apvr-dcd > em { color: rgba(233, 192, 138, 0.62); }
.apvr-d[data-urg="soon"] .apvr-dcd > b { color: #F2CB96; }
.apvr-d[data-urg="over"] .apvr-dcd { background: rgba(232, 119, 107, 0.12); border-color: rgba(232, 119, 107, 0.34); }
.apvr-d[data-urg="over"] .apvr-dcd > em { color: rgba(240, 163, 150, 0.7); }
.apvr-d[data-urg="over"] .apvr-dcd > b { color: #F4A99C; }
/* 已受理：不跑倒计时，只写办结时刻，所以不给药丸底，让它落回一行小字 */
.apvr-dcd.is-plain { padding: 0; background: none; border: 0; color: rgba(190, 212, 232, 0.62); }
.apvr-dname {
  margin: 7px 0 0; font-size: 14.5px; font-weight: 600; line-height: 1.45; letter-spacing: 0.3px;
  background: linear-gradient(180deg, #F4FAFF 0%, #D3E7F7 54%, #A9C8E3 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: #D9E8F4;
}
.apvr-dmeta {
  display: flex; align-items: center; gap: 8px; margin-top: 7px;
  font-size: var(--fs-l3); color: rgba(178, 200, 218, 0.62);
}
.apvr-dmeta > i {
  width: 3px; height: 3px; border-radius: 50%; flex-shrink: 0;
  background: rgba(172, 196, 218, 0.26);
}
.apvr-dmeta > span {
  min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.apvr-dmeta > span:first-child { flex-shrink: 0; color: rgba(206, 224, 240, 0.8); }

/* —— 申报方：可展开的单位档案入口 ——
   它得「一眼看出能点」：整块做成胶囊（描边 + 淡底），右侧一枚圆形箭头底座，
   收起时箭头朝下、展开时翻上去。钩子不藏在 hover 里——
   这一段本来就是给「想多看这单位一眼」的人准备的，入口要摆明 */
.apvr-dunit {
  display: inline-flex; align-items: center; gap: 5px;
  min-width: 0; max-width: 100%;
  height: 22px; padding: 0 2px 0 8px; margin: 0;
  border: 1px solid rgba(150, 196, 240, 0.24); border-radius: 999px;
  background: linear-gradient(180deg, rgba(150, 196, 240, 0.16) 0%, rgba(150, 196, 240, 0.055) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
  font-family: inherit; font-size: var(--fs-l3); letter-spacing: 0.3px;
  color: rgba(222, 238, 250, 0.94);
  cursor: pointer; text-align: left;
  transition: background 200ms ease, border-color 200ms ease, box-shadow 200ms ease, color 200ms ease;
}
.apvr-dunit > span {
  min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.apvr-dunit:hover {
  color: #F4FBFF;
  border-color: rgba(170, 210, 248, 0.52);
  background: linear-gradient(180deg, rgba(150, 196, 240, 0.26) 0%, rgba(150, 196, 240, 0.10) 100%);
  box-shadow: 0 0 14px -5px rgba(150, 200, 245, 0.8), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
.apvr-dunit:focus-visible { outline: 2px solid rgba(160, 200, 245, 0.55); outline-offset: 2px; }
/* 展开态：胶囊底色压深一档，读作「已经打开了」 */
.apvr-dunit[aria-expanded="true"] {
  border-color: rgba(170, 210, 248, 0.42);
  background: linear-gradient(180deg, rgba(150, 196, 240, 0.10) 0%, rgba(150, 196, 240, 0.20) 100%);
}

/* 箭头底座：一枚 16px 的圆盘，箭头是盘里两道描边——
   有盘子，箭头才立得住；也才像个「按钮」而不是标题旁边的一枚标点 */
.apvr-dunit-btn {
  flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px; border-radius: 50%;
  background: rgba(160, 205, 245, 0.22);
  box-shadow: inset 0 0 0 1px rgba(180, 215, 248, 0.30);
  transition: background 220ms ease, box-shadow 220ms ease, transform 320ms cubic-bezier(0.22, 1, 0.36, 1);
}
.apvr-dunit:hover .apvr-dunit-btn {
  background: rgba(170, 212, 250, 0.36);
  box-shadow: inset 0 0 0 1px rgba(200, 228, 255, 0.5), 0 0 10px -3px rgba(160, 205, 245, 0.9);
}
.apvr-dunit[aria-expanded="true"] .apvr-dunit-btn { background: rgba(170, 212, 250, 0.44); }

/* chevron：两条边描一枚尖，比字符「⌄」在任何字号下都稳。
   收起朝下、展开翻到朝上，翻转过程 320ms——手上点一下，眼睛看得见它回了个身 */
.apvr-dunit-chev {
  width: 5.5px; height: 5.5px; flex-shrink: 0; margin-top: -2px;
  border-right: 1.5px solid #EAF6FF; border-bottom: 1.5px solid #EAF6FF;
  transform: rotate(45deg);
  transition: transform 320ms cubic-bezier(0.22, 1, 0.36, 1), margin 320ms cubic-bezier(0.22, 1, 0.36, 1);
}
.apvr-dunit[aria-expanded="true"] .apvr-dunit-chev {
  transform: rotate(-135deg); margin-top: 2px;
}

/* —— 档案区：用高度 0 + flex-grow 从 0 长到满 ——
   basis 钉成 height:0（flex-basis 的百分比在 auto 高的容器里会退化成内容高，
   所以直接写死 0），grow 0→1 之间插值，容器高度就平滑地从 0 长到
   「正文让出来的那一段」。内容由 overflow:hidden 裁着，随容器长高一点点露出来 */
/* 收起态直接不渲染：此时抬头高度由脚本钉在「三行文字」那一段，
   档案在不在文档流里都不影响外观，所以这里可以放心用 display，
   不会像之前那样一 display:none 就把卡片高度抽走 */
.apvr-unit { display: none; }
.apvr-unit[data-open="1"] {
  display: block; flex: 1 1 auto; min-height: 0; overflow: hidden;
}
.apvr-unit-in {
  height: 100%; min-height: 0; overflow: hidden;
  display: flex; flex-direction: column;
}
/* 内容不做淡入淡出：容器长高、内容随裁剪边缘露出来，本身就是「拉开抽屉」。
   再加一层 opacity 反而会出现「先空一段、再浮现」的中间帧——那正是看着闪的原因 */

/* 展开态：正文（审批进度 / 申报信息 / 航空器 / 操控员）整块让位。
   档案要看的是「这一家单位是谁」，正文此刻只是背景板；
   留一条缝的正文既读不了也碍事，不如整块让出去，等档案缩回去再原样还回来。
   让位走 flex-grow 1→0：高度逐帧收走，抬头同步逐帧长高，两段此消彼长，
   面板总高不变，所以点下去不会「闪一下」。
   —— 这里只改 flex-grow 与 opacity，不切 display、不改 flex 方向：
      任何一条会引发整棵子树重排的属性，在点击那一帧都会闪一下 */
#apvr-panel[data-unit="open"] .apvr-scroller {
  opacity: 0; overflow: hidden; pointer-events: none;
}

/* 抬头与档案之间那道发丝线：随内容一起被裁，收起后不留一根悬空的线 */
.apvr-unit-rule {
  flex: none; height: 1px; margin: 10px 0 0;
  background: linear-gradient(90deg,
    rgba(150, 200, 245, 0.34) 0%, rgba(150, 200, 245, 0.14) 62%, rgba(150, 200, 245, 0.02) 100%);
}
/* 内滚容器：外面再包一层，好把自绘滚动指示绝对定位在右缘——
   与正文 #apvr-scroller 里那枚 .apvr-scroll 完全同一套尺寸与配色，
   两处滚动读起来才是同一种手感 */
.apvr-unit-body {
  position: relative; flex: 1 1 auto; min-height: 0; display: flex;
  /* 不再用负外边距把滚动带推出卡片：那一段正好落在 .apvr-unit-in 的裁剪盒之外，
     轨道存在、位置也对，却一个像素都画不出来（此前「看不见滚动条」就是这个原因）。
     现在轨道回到内容边以内，靠右 3px，落在下面的右内边距里 */
}
.apvr-unit-sc {
  flex: 1 1 auto; min-height: 0;
  overflow-y: auto; overflow-x: hidden;
  /* 左 0（跟着卡片内边距走）、右 8：右侧这 8px 是轨道的家，
     读数不会压到拇指上 */
  padding: 8px 8px 8px 0;
  overscroll-behavior: contain;
  scrollbar-width: none; -ms-overflow-style: none;
}
.apvr-unit-sc::-webkit-scrollbar { width: 0; height: 0; display: none; }
/* 底缘不做渐隐压暗：这一屏最后一行常常刚好是证件缩略图，
   盖一层渐变会把图的下半截抹成一块脏灰。要提示可滚，交给右缘那枚拇指 */
/* 滚动指示：与正文那枚同一套语汇（top 2 / bottom 6、3px 宽、静蓝渐变拇指），
   滚起来时同样提亮到 1——两处滚动是同一个控件，不该一边滚一边不动。
   只把右缘落到 3px：抽屉的内容边就在卡片内，再往里推就会被裁掉 */
.apvr-unit-scroll {
  position: absolute; right: 3px; top: 2px; bottom: 6px; width: 3px; z-index: 2;
  /* 常驻档比正文略亮一档：抽屉里没有卡片垫着，底色更沉，
     0.34 在这里几乎读不出来（正文那边有内容块托着才看得见） */
  opacity: 0.52; pointer-events: none;
  transition: opacity 240ms ease;
}
.apvr-unit-body .apvr-unit-scroll.is-scrolling { opacity: 1; }
.apvr-unit-scroll i {
  display: block; height: 0; border-radius: 999px;
  background: linear-gradient(180deg, rgba(118, 156, 194, 0.50) 0%, rgba(70, 104, 140, 0.24) 100%);
  box-shadow: 0 0 5px rgba(78, 118, 158, 0.26);
}

/* 档案里的分区：与正文分区同一套标题，但不画那道钢蓝接缝——
   这里是一张表里的几段，不是几块并列的版面，段与段之间只留距离 */
.apvr-unit-cert { padding-top: 0; }
.apvr-unit-cert + .apvr-unit-cert {
  margin-top: 15px; padding-top: 13px;
  border-top: 1px solid rgba(255, 255, 255, 0.055);
}
/* 认证态徽标：绿=已认证、暗红=未认证。两枚都压得比文字矮一档，
   它是字段的旁注，不是标题的一部分 */
.apvr-unit-tag {
  flex-shrink: 0; display: inline-flex; align-items: center;
  height: 16px; padding: 0 5px; border-radius: 4px;
  font-style: normal; font-size: 10px; font-weight: 600; letter-spacing: 0.5px;
}
.apvr-unit-tag[data-st="ok"] {
  color: #8FD3AE;
  background: rgba(110, 190, 150, 0.11);
  border: 1px solid rgba(110, 190, 150, 0.26);
}
.apvr-unit-tag[data-st="no"] {
  color: #CE9187;
  background: rgba(214, 120, 105, 0.09);
  border: 1px solid rgba(214, 120, 105, 0.22);
}
/* 未提交：一句结论，不摆空字段 */
.apvr-unit-miss {
  padding: 1px 0 2px;
  font-size: 11.5px; letter-spacing: 0.2px; color: rgba(176, 198, 218, 0.44);
}

/* —— 证照缩略图：字段读数位上放一张「证件的样子」——
   宽高比照真实证件（约 5:3），浅底、细描边、一道投影，读作一张贴进来的照片。
   标签仍是上面那行小字，所以缩略图不需要再写「单位执照」四个字 */
.apvr-df.is-img { gap: 4px; }
.apvr-thumb {
  display: block; width: 84px; height: 51px; margin-top: 1px;
  border-radius: 3px; overflow: hidden;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.42), 0 0 0 1px rgba(255, 255, 255, 0.07);
  transition: box-shadow 220ms ease;
}
.apvr-thumb svg { display: block; width: 100%; height: 100%; }
.apvr-df.is-img:hover .apvr-thumb {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(150, 200, 245, 0.28);
}

/* —— ③ 分区 + 字段表 ——
   不做卡片盒子，做成「一张参数表」：每个分区 = 标题 + 若干行，
   行与行之间一条极淡发丝线。整齐来自两件事：
     · 两个固定列位（左列 x=0，右列 x=半宽+14）——所有标签、所有读数各在一条竖线上
     · 每行一条横线——视线横向有依托，长滚动不串行
   标签在上、读数在下，是为了让 17 字的长标签和 4 字的短标签共用同一套列位，
   不必为长标签单开一列、把右侧读数挤成一条缝 */
.apvr-dsec {
  position: relative;
  display: flex; flex-direction: column;
  padding-top: 9px;
}
/* 分区边界线 ≠ 表内行线。
   行线是 0.055 的满宽发丝线（读作「同一张表里的下一行」）；
   分区线要读作「换了一块」，所以给它三件事：更亮、左端起笔、右端化开。
   一亮一淡的方向感，让人一眼分出「块与块」和「行与行」，
   不必再靠拉大间距来暗示 */
.apvr-dsec::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px;
  /* 钢蓝：与面板的冷调、字段读数的蓝灰同一支色，左端起笔、右端收掉。
     它要有颜色，因为「有颜色」本身就是「这不是表格行线」的信号 */
  background: linear-gradient(90deg,
    rgba(150, 200, 248, 0.78) 0%,
    rgba(136, 186, 236, 0.44) 30%,
    rgba(126, 174, 224, 0.26) 72%,
    rgba(120, 168, 218, 0.14) 100%);
}
/* 边界线下方再压一道极淡的暗缝：一亮一暗叠成「缝」，读起来是两块之间的接缝，
   而不是表里的一根行线。暗缝只有 0.10 的墨，不会变成黑边 */
.apvr-dsec::after {
  content: ""; position: absolute; left: 0; right: 0; top: 1px; height: 2px;
  background: linear-gradient(180deg, rgba(8, 16, 26, 0.32) 0%, rgba(8, 16, 26, 0) 100%);
  pointer-events: none;
}

/* 分区标题：起头横线 + 标签 + 发丝线 + 右侧规模读数 */
.apvr-dh { display: flex; align-items: center; gap: 7px; height: 15px; margin-bottom: 9px; }
.apvr-dh > i {
  width: 3px; height: 11px; border-radius: 1px; flex-shrink: 0;
  background: linear-gradient(180deg, #C4DCF6 0%, #6FA3D0 100%);
  box-shadow: 0 0 7px rgba(111, 163, 208, 0.55);
}
.apvr-dh > span {
  font-size: 12.5px; font-weight: 600; letter-spacing: 1.4px; white-space: nowrap; color: #E2F0FC;
}
.apvr-dh > b {
  margin-left: auto; flex-shrink: 0;
  font-family: var(--font-mono); font-weight: 500; font-size: 10.5px;
  letter-spacing: 0.2px; color: rgba(180, 204, 226, 0.5); font-variant-numeric: tabular-nums;
}

/* 表体：一行 = 两个字段（左右各一），行线由 .apvr-drow 的顶边给出 */
.apvr-dg { display: flex; flex-direction: column; }
.apvr-drow {
  display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px;
  padding: 8px 0 9px;
  border-top: 1px solid rgba(255, 255, 255, 0.055);
}
/* 首行：不补线（避免标题上下两道横线夹住），也不吃上内边距
   —— 标题到正文的净距只由 .apvr-dh 的下边距一处决定，四个分区才对得齐 */
.apvr-dg > .apvr-drow:first-child { border-top: none; padding-top: 2px; }
/* 标识行（序列号 / 姓名）已带一条下线，紧随其后的首行不再叠一条 */
.apvr-drec-top + .apvr-dg > .apvr-drow:first-child { border-top: none; }
/* 整行字段（值长到一列放不下时）：值仍从 x=0 起，左右两条竖线都不会错位 */
.apvr-drow > .apvr-df.is-full { grid-column: 1 / -1; }

.apvr-df { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.apvr-df > span {
  font-size: 11px; line-height: 1.35; letter-spacing: 0.3px;
  color: rgba(176, 198, 218, 0.62);
}
.apvr-df > b {
  font-size: 12.5px; font-weight: 400; line-height: 1.45; letter-spacing: 0.2px;
  color: #C6DBEC; word-break: break-word;
}
/* 读数里的数字 / 编号走等宽，列与列之间位数才对得上 */
.apvr-df > b.is-mono {
  font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.1px;
  color: #CFE4F5; font-variant-numeric: tabular-nums;
}
/* 空值：只压对比，不压字号——空不是一个更小的字段，
   同屏三十个「-」若各自矮一档，整页读起来就比隔壁档案小一号 */
.apvr-df > b.is-none {
  font-size: 12.5px; color: rgba(176, 198, 218, 0.46); letter-spacing: 0.2px;
}

/* —— ④ 审批进度：一枚节点 + 虚线轨 + 计数（0/1 在分区标题右侧） —— */
.apvr-dstep {
  display: flex; align-items: center; gap: 8px;
  /* 上留白给标题，下留白归零。这一行的「字底 → 下道横线」原本会比
     「卡片底 → 上道横线」多出 3px：状态胶囊（line-height 1.6）比 12px 文字高，
     文字居中后墨迹底部就悬在上面。用 -3px 把多出来的这截收掉，
     两段视觉间距才真正相等（实测 28 / 28） */
  /* 上留白对齐其他分区「标题 → 首行」的净距（.apvr-dh 的下边距 9 + 首行上内边距 2） */
  padding: 2px 0 0 1px;
  margin-bottom: -3px;
}
.apvr-dstep > i.apvr-dring {
  width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
  border: 1px solid color-mix(in srgb, var(--apvr-st) 78%, transparent);
  background: color-mix(in srgb, var(--apvr-st) 12%, transparent);
  box-shadow: 0 0 9px -1px color-mix(in srgb, var(--apvr-st) 55%, transparent);
}
.apvr-dstep > span.apvr-dstep-n { font-size: 12px; letter-spacing: 0.4px; color: #D3E5F4; flex-shrink: 0; }
.apvr-dstep > span.apvr-dstep-s {
  flex-shrink: 0; padding: 0 6px; border-radius: 999px;
  font-size: 10.5px; line-height: 1.6; letter-spacing: 0.4px;
  color: var(--apvr-st);
  background: color-mix(in srgb, var(--apvr-st) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--apvr-st) 26%, transparent);
}
/* 未到达的节点只留轨道：一条渐隐虚线，不预先画空节点 */
.apvr-dstep > em {
  flex: 1; height: 1px; min-width: 10px;
  background: repeating-linear-gradient(90deg,
    rgba(160, 190, 215, 0.20) 0 3px, rgba(160, 190, 215, 0) 3px 7px);
  -webkit-mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0));
  mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0));
}

/* —— ④ 审批进度（已办结）：审理详情，一条竖着走的链路 ——
   与上面那条「一枚节点 + 一条横向虚线」不是两套美学，是同一个问题的两个时态：
   还在走的只能说「停在哪」，走完的才谈得上「怎么走的」。
   竖排而不是横排：每一步都带处理方、时刻和一句意见，横排排不开，
   排开也读不成一句话。竖链的断点是圆点，「经过」是空心圈、「停在这里」是实心点。 */
.apvr-flow {
  display: flex; flex-direction: column;
  margin: 0; padding: 0; list-style: none;
}
.apvr-fnode {
  --apvr-fv: #8FB0CC;
  position: relative;
  padding: 0 0 14px 18px;
}
.apvr-fnode:last-child { padding-bottom: 0; }
.apvr-fnode[data-res="pass"]   { --apvr-fv: #7EC9A6; }
.apvr-fnode[data-res="reject"] { --apvr-fv: #A2A6AB; }
.apvr-fnode[data-res="close"]  { --apvr-fv: #7E7A74; }

/* 停靠点：与 .apvr-dring 同一枚，只是这里要一列排下去，尺寸收到 8px */
.apvr-fdot {
  position: absolute; left: 0; top: 4px;
  width: 8px; height: 8px; border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--apvr-fv) 72%, transparent);
  background: color-mix(in srgb, var(--apvr-fv) 8%, transparent);
}
/* 末节点 = 这条申请停下的地方，点实、微亮：一列里只有它有光 */
.apvr-fnode[data-last] .apvr-fdot {
  background: color-mix(in srgb, var(--apvr-fv) 76%, transparent);
  box-shadow: 0 0 9px -1px color-mix(in srgb, var(--apvr-fv) 58%, transparent);
}
/* 竖向轨：相邻两枚之间的一段虚线，末尾那一枚之后不再往后画——
   后面没有站了，画出去就是在暗示还有下一环 */
.apvr-fnode:not(:last-child)::after {
  content: ""; position: absolute; left: 3.5px; top: 15px; bottom: -3px; width: 1px;
  background: repeating-linear-gradient(180deg,
    rgba(160, 190, 215, 0.20) 0 3px, rgba(160, 190, 215, 0) 3px 7px);
}
.apvr-fhd { display: flex; align-items: center; gap: 8px; }
.apvr-fname { font-size: 12px; letter-spacing: 0.4px; color: #D3E5F4; }
/* 结论短标签：与 .apvr-dstep-s 同一配方，色只取自这一步自己的结论 */
.apvr-fres {
  margin-left: auto; flex-shrink: 0;
  padding: 0 6px; border-radius: 999px;
  font-style: normal; font-size: 10.5px; line-height: 1.6; letter-spacing: 0.4px;
  color: var(--apvr-fv);
  background: color-mix(in srgb, var(--apvr-fv) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--apvr-fv) 26%, transparent);
}
/* 处理方 ｜ 时刻：一句小字托在节点名下面。时刻在右、等宽、不换行，
   处理方可以被压缩——名字长了截得掉，时间截了就不是时间了 */
.apvr-fmeta {
  display: flex; align-items: center; gap: 7px;
  margin-top: 4px; min-width: 0;
}
.apvr-fmeta > span.apvr-fby {
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: 11px; letter-spacing: 0.2px; color: rgba(176, 198, 218, 0.58);
}
.apvr-fmeta > span.apvr-fat {
  flex-shrink: 0;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1px;
  color: rgba(176, 200, 220, 0.52); font-variant-numeric: tabular-nums;
}
.apvr-fmeta > i {
  width: 1px; height: 8px; flex-shrink: 0; border-radius: 1px;
  background: rgba(190, 214, 236, 0.20);
}
/* 意见：一道左缘竖线托住，读作「这句话是被记录下来的」，
   不是又一段正文；色只给这道线，文字保持中性（意见本身不是状态） */
.apvr-fnote {
  margin: 6px 0 0; padding-left: 9px;
  border-left: 2px solid color-mix(in srgb, var(--apvr-fv) 32%, transparent);
  font-size: 11.5px; line-height: 1.62; letter-spacing: 0.2px;
  color: rgba(190, 214, 236, 0.76);
}

/* —— ⑤ 航空器 / 操控员：标识行（编号与类型合成一枚胶囊）+ 发丝线 + 字段表 —— */
.apvr-drec-top {
  display: flex; align-items: center; gap: 9px;
  padding-bottom: 9px; margin-bottom: 9px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.055);
}
.apvr-drec-name { font-size: 13px; letter-spacing: 0.4px; color: #DEEFFC; }
/* 编号与它所属的分类本就是一件事：合成一枚胶囊，读者不用自己把左右两端连起来。
   胶囊只承担「这是哪一台 / 哪一张证」，其余仍在下面的字段表里 */
.apvr-dpill {
  display: inline-flex; align-items: center; min-width: 0; max-width: 100%;
  height: 22px; padding: 0 9px; border-radius: 999px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.062) 0%, rgba(255, 255, 255, 0.026) 100%);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.09),
    inset 0 1px 0 rgba(255, 255, 255, 0.055);
}
.apvr-dpill > b {
  min-width: 0;
  font-family: var(--font-mono); font-size: 12px; font-weight: 500;
  letter-spacing: 0.2px; color: #DAEEFC; font-variant-numeric: tabular-nums;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* 分隔竖线：比文字分隔符安静，也比「·」更不容易被当成编号的一部分 */
.apvr-dpill > i {
  width: 1px; height: 9px; flex-shrink: 0; border-radius: 1px;
  margin: 0 8px; background: rgba(190, 214, 236, 0.20);
}
.apvr-dpill > span {
  flex-shrink: 0; font-size: 11px; letter-spacing: 0.4px; white-space: nowrap;
  color: rgba(196, 218, 238, 0.68);
}
/* 胶囊当字段读数用时不拉满整列：宽度只到内容为止，左缘与标签对齐 */
.apvr-df > .apvr-dpill { align-self: flex-start; margin-top: 3px; }

/* —— ④ 航空器：一组平级的胶囊 ——
   宽度按内容走，不按栅格等分。等分（1fr 1fr）会把两枚「编号 + 类型」撑成
   两条一样宽的长条，一行只放得下两个，读起来像两张表单；按内容排，
   三架短编号能一行读完，一眼看得出是「一组」，而不是「两个字段」
   多架时全部铺开：一般不超六架，详情本来就有纵向空间，折叠反而多一次点击 */
.apvr-airpills {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  padding-bottom: 10px;
}
.apvr-airpills > .apvr-dpill {
  flex: 0 0 auto; max-width: 100%;
  height: 24px; padding: 0 8px;
  border-radius: 6px;
  background: rgba(150, 196, 240, 0.06);
  box-shadow: inset 0 0 0 1px rgba(168, 196, 220, 0.16);
}
/* 编号是这一枚胶囊的主语，类型只做后缀：字号差一档、颜色压一档，
   读起来是「SN8890326044 · 多旋翼」，不是「两个等重的读数」。
   字距同时收到 0.1：12 位编号 + 三个字的类型，一枚约 138px，
   三枚并排一行放得下 */
.apvr-airpills > .apvr-dpill > b { font-size: 11px; letter-spacing: 0.1px; }
.apvr-airpills > .apvr-dpill > i { margin: 0 6px; height: 8px; }
.apvr-airpills > .apvr-dpill > span { font-size: 10.5px; letter-spacing: 0.3px; }
/* 有问题的那一架：整枚描红 + 右端一个点。
   不写「异常」两个字——一排同款胶囊里，只有它能被一眼挑出来就够了；
   是什么问题，点开档案第一行就写着 */
.apvr-dpill.is-warn {
  background: rgba(214, 120, 105, 0.09) !important;
  box-shadow: inset 0 0 0 1px rgba(214, 120, 105, 0.36) !important;
}
.apvr-dpill.is-warn > b { color: #FFD6D0; }
.apvr-dpill.is-warn > span { color: rgba(255, 208, 200, 0.8); }
.apvr-dpill.is-warn > i { background: rgba(232, 140, 126, 0.34); }
.apvr-pw {
  flex-shrink: 0; width: 5px; height: 5px; margin-left: 7px; border-radius: 50%;
  background: #E8776B; box-shadow: 0 0 6px rgba(232, 119, 107, 0.7);
}

/* 档案顶上的那句原因：只在证件有问题的那一架出现 */
.apvr-air-warn {
  display: flex; align-items: center; gap: 7px;
  margin: 1px 0 9px; padding: 6px 9px; border-radius: 6px;
  background: rgba(214, 120, 105, 0.09);
  box-shadow: inset 0 0 0 1px rgba(214, 120, 105, 0.26);
  font-size: 11.5px; letter-spacing: 0.2px; color: #F4C8C0;
}
.apvr-air-warn > i {
  width: 5px; height: 5px; flex-shrink: 0; border-radius: 50%;
  background: #E8776B; box-shadow: 0 0 6px rgba(232, 119, 107, 0.7);
}
/* 字段读数报红：只换色。空值那档（is-none）压得更淡，两者不冲突——
   有问题和没填是两件事，颜色深浅也不同 */
.apvr-df > b.is-warn { color: #F0A79C; }

/* —— ⑤ 操控员：一人一行，三行读完一个人 ——
   没有字段名：这三行是固定口径（姓名 · 证件 · 执照），
   每人头顶再压三个标签，N 个人就会被读成 N 张小表。
   行与行之间一条发丝线，人多了也数得清是几个 */
.apvr-crew { display: flex; flex-direction: column; }
.apvr-crew-row {
  display: flex; flex-direction: column; gap: 3px;
  padding: 9px 9px 10px 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.055);
}
.apvr-crew-row:first-child { border-top: none; padding-top: 2px; }
.apvr-crew-hd { display: flex; align-items: baseline; gap: 8px; }
.apvr-crew-hd > b {
  font-size: 12.5px; font-weight: 500; letter-spacing: 0.5px; color: #DEEFFC;
}
/* 执照有效期贴在姓名右侧同一基线：姓名是「谁」，日期是「能不能飞」，
   两件事一样重要，谁也不该被压到第二行去 */
.apvr-crew-lic {
  margin-left: auto; flex-shrink: 0;
  font-family: var(--font-mono); font-size: 10.5px; font-style: normal;
  letter-spacing: 0.1px; color: rgba(176, 200, 220, 0.52);
  font-variant-numeric: tabular-nums;
}
.apvr-crew-lic.is-soon { color: #E0A968; }
.apvr-crew-lic.is-over { color: #E8776B; }
/* 证号与执照这两行：等宽、压一档对比，读作「下面是细节」。
   两段之间用一枚极小的竖线断开——「·」夹在等宽编号里会被读成编号的一部分 */
.apvr-crew-meta {
  display: flex; align-items: center; gap: 8px;
  font-size: 11px; letter-spacing: 0.15px;
  color: rgba(178, 202, 222, 0.62);
}
.apvr-crew-meta > .is-mono {
  font-family: var(--font-mono); font-size: 10.5px;
  color: rgba(186, 210, 230, 0.66); font-variant-numeric: tabular-nums;
}
.apvr-crew-meta > i {
  width: 1px; height: 8px; flex-shrink: 0; border-radius: 1px;
  background: rgba(190, 214, 236, 0.16);
}
/* 临期 / 过期：整行左缘一道细脊。只给那道脊上色——
   整行染色会把「人在这一行」和「日期有问题」搅成一句话 */
.apvr-crew-row[data-st] { position: relative; }
.apvr-crew-row[data-st]::before {
  content: ""; position: absolute; left: 0; top: 9px; bottom: 10px; width: 2px;
  border-radius: 1px;
}
.apvr-crew-row[data-st="soon"]::before { background: rgba(224, 169, 104, 0.62); }
.apvr-crew-row[data-st="over"]::before { background: rgba(232, 119, 107, 0.72); }

/* ============================================================
   航空器：概要卡里的第二枚入口（与申报方同款胶囊）
   —— 入口只做一处：编号与类型在抬头里，点开用的是申报方那只档案容器。
     胶囊左端是一串等宽编号（它首先得回答「哪一台」），中间一竖分开类型，
     右端是同款箭头底座；展开态由 aria-expanded 驱动，两份档案各自独立翻转。
   ============================================================ */
/* 航空器这枚不参与挤压：一串编号截成「SN000…」就读不出是哪一台了。
   要压就让申报方那枚去压——单位名截了还认得出，编号截了就是废字符 */
.apvr-dunit-air { flex: 0 0 auto; }
.apvr-dunit-air > b {
  flex: 0 0 auto;
  font-family: var(--font-mono); font-size: 12px; font-weight: 500;
  letter-spacing: 0.2px; color: #DAEEFC; font-variant-numeric: tabular-nums;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* 分隔竖线：与 .apvr-dpill 同一条，读作「编号 | 类型」的一竖 */
.apvr-dunit-sep {
  width: 1px; height: 9px; flex-shrink: 0; border-radius: 1px;
  margin: 0 1px; background: rgba(190, 214, 236, 0.22);
}
.apvr-dunit-air > span {
  flex-shrink: 0; font-size: 11.5px; letter-spacing: 0.4px; white-space: nowrap;
  color: rgba(206, 226, 243, 0.78);
}
/* 多架时这枚胶囊改报规模：「航空器 | 3 架」。
   左边那三个字是名词（它是航空器档案的入口），右边是数量——
   数量走等宽，位数变化时右端的架数不会左右摇 */
.apvr-dunit-k {
  flex-shrink: 0; font-size: 11.5px; letter-spacing: 0.3px; white-space: nowrap;
  color: rgba(206, 226, 243, 0.86);
}
.apvr-dunit-cnt {
  flex: 0 0 auto;
  font-family: var(--font-mono); font-size: 12px; font-weight: 500;
  letter-spacing: 0.2px; color: #DAEEFC; font-variant-numeric: tabular-nums;
}

/* 一份容器、两份内容：data-src 说现在装的是哪一份。
   display 切换不影响高度——高度全由 #apvr-dhead 的像素值管，
  所以从单位档案切到航空器档案时不会重放一次「拉开抽屉」 */
#apvr-unit[data-src="unit"] .apvr-unit-body[data-pane="air"],
#apvr-unit[data-src="air"] .apvr-unit-body[data-pane="unit"] { display: none; }
/* 航空器档案里多一条切换条压在上面：这一份内容变成「上条 + 下方滚动」，
   所以整只 pane 从横向 flex 改成纵向。滚动区仍然 flex:1，高度不受影响 */
.apvr-unit-body[data-pane="air"] { flex-direction: column; }

/* —— 航空器切换条：多架时才有 ——
   一排胶囊平铺，而不是一个下拉：下拉把「一共几架、哪一架是红的」
   藏到一次点击之后；平铺出来，规模与异常在同一眼里。
   它是「现在看的是哪一架」，不是「哪一架更重要」——
   选中态只给一道细边与一档底色，不给主次徽标 */
.apvr-airswap {
  flex: 0 0 auto;
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  padding: 2px 8px 9px 0;
  margin-bottom: 1px;
}
.apvr-airswap-c {
  display: inline-flex; align-items: center; gap: 6px;
  height: 23px; padding: 0 9px; border-radius: 6px;
  border: 1px solid rgba(168, 196, 220, 0.16);
  background: rgba(150, 196, 240, 0.045);
  font-family: inherit; cursor: pointer;
  transition: background 200ms ease, border-color 200ms ease, color 200ms ease;
}
.apvr-airswap-c > b {
  font-family: var(--font-mono); font-size: 11px; font-weight: 400;
  letter-spacing: 0.2px; color: rgba(206, 226, 244, 0.78);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.apvr-airswap-c > i {
  width: 1px; height: 9px; flex-shrink: 0; border-radius: 1px;
  background: rgba(190, 214, 236, 0.18);
}
.apvr-airswap-c > span {
  font-size: 11px; letter-spacing: 0.3px; white-space: nowrap;
  color: rgba(196, 218, 238, 0.62);
}
.apvr-airswap-c:hover {
  border-color: rgba(170, 208, 246, 0.36);
  background: rgba(150, 196, 240, 0.10);
}
.apvr-airswap-c:focus-visible { outline: 2px solid rgba(160, 200, 245, 0.5); outline-offset: 1px; }
/* 选中：现在是这一份。底色与描边各提一档，编号转亮——
   一眼看出「读到谁了」，又没有被读成「选为主用」 */
.apvr-airswap-c.is-on {
  border-color: rgba(150, 190, 230, 0.52);
  background: rgba(120, 165, 210, 0.17);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
.apvr-airswap-c.is-on > b { color: #EAF4FF; }
.apvr-airswap-c.is-on > span { color: rgba(214, 232, 246, 0.86); }
/* 有问题的那一架：描红。选中它时红仍在——红色说的是证件，不是「选中」 */
.apvr-airswap-c.is-warn {
  border-color: rgba(214, 120, 105, 0.34);
  background: rgba(214, 120, 105, 0.075);
}
.apvr-airswap-c.is-warn > b { color: rgba(255, 214, 208, 0.9); }
.apvr-airswap-c.is-warn.is-on {
  border-color: rgba(226, 132, 116, 0.62);
  background: rgba(214, 120, 105, 0.15);
}
/* 航空器档案的分段：用单位档案那把尺（段前 15 + 段上 13 + 一道发丝线），
   不画 `.apvr-dsec` 那道钢蓝接缝——抽屉里这几段是同一张资料的几节，
   不是正文那种「换了一块」的版面。两份档案因此上下节奏一致，
   切来切去不会一段松一段紧 */
.apvr-unit-body[data-pane="air"] .apvr-dsec { padding-top: 0; }
.apvr-unit-body[data-pane="air"] .apvr-dsec + .apvr-dsec {
  margin-top: 15px; padding-top: 13px;
  border-top: 1px solid rgba(255, 255, 255, 0.055);
}
.apvr-unit-body[data-pane="air"] .apvr-dsec::before { display: none; }

/* 变更日志的记录框：一段叙事，不是字段表——
   所以给它自己的底与边，把「操作流水」和上面的「登记时间」分开读 */
.apvr-air-log {
  display: flex; flex-direction: column; gap: 9px;
  margin: 3px 0 2px; padding: 9px 11px;
  border-radius: 7px;
  background: rgba(8, 14, 22, 0.34);
  box-shadow: inset 0 0 0 1px rgba(150, 196, 240, 0.10);
}
.apvr-air-log > p {
  font-size: 12px; line-height: 1.62; letter-spacing: 0.2px;
  color: rgba(198, 219, 236, 0.82);
}
.apvr-air-log > p > em {
  font-style: normal; margin-right: 8px;
  font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.1px;
  color: rgba(176, 200, 220, 0.58);
}

/* —— 2K 档：只放大字号与间距，不改变版式结构 —— */
@media (min-width: 2048px) {
  .apvr-head-act { height: 24px; font-size: 12.5px; }
  .apvr-d { gap: 14px; }
  .apvr-dhead { margin-bottom: 0; }
  .apvr-dhero { padding: 12px 14px 13px 16px; }
  .apvr-dname { font-size: 17px; }
  .apvr-dst { height: 22px; padding: 0 10px 0 9px; }
  .apvr-dcd { padding: 3px 10px 3px 9px; }
  .apvr-dsec { padding-top: 11px; }
  .apvr-dstep { padding: 3px 0 0 1px; margin-bottom: -4px; }
  .apvr-dh { height: 17px; margin-bottom: 11px; }
  .apvr-dh > span { font-size: 14px; }
  .apvr-dh > b { font-size: 11.5px; }
  .apvr-drow { padding: 10px 0 11px; gap: 0 18px; }
  .apvr-df > span { font-size: 12.5px; }
  .apvr-df > b { font-size: 14.5px; }
  .apvr-df > b.is-mono { font-size: 14px; }
  .apvr-dstep > span.apvr-dstep-n { font-size: 13.5px; }
  .apvr-flow { padding: 0; }
  .apvr-fname { font-size: 13.5px; }
  .apvr-fnode { padding: 0 0 16px 20px; }
  .apvr-fdot { top: 5px; width: 9px; height: 9px; }
  .apvr-fnode:not(:last-child)::after { left: 4px; top: 17px; bottom: -4px; }
  .apvr-fres { font-size: 11px; padding: 0 7px; }
  .apvr-fmeta > span.apvr-fby,
  .apvr-fmeta > span.apvr-fat { font-size: 12px; }
  .apvr-fnote { font-size: 13px; margin-top: 7px; padding-left: 10px; }
  .apvr-drec-name { font-size: 14.5px; }
  .apvr-dpill { height: 25px; padding: 0 10px; }
  .apvr-dunit-air > b { font-size: 13.5px; }
  .apvr-dunit-sep { height: 10px; }
  .apvr-dunit-air > span { font-size: 12.5px; }
  .apvr-air-log { padding: 11px 13px; gap: 10px; }
  .apvr-air-log > p { font-size: 13.5px; }
  .apvr-air-log > p > em { font-size: 12.5px; }
  .apvr-dpill > b { font-size: 13.5px; }
  .apvr-dpill > i { height: 10px; margin: 0 9px; }
  .apvr-dpill > span { font-size: 12.5px; }
  .apvr-df > b.is-none { font-size: 14.5px; }
  .apvr-dunit { font-size: 13px; height: 24px; padding: 0 3px 0 9px; }
  .apvr-dunit-btn { width: 18px; height: 18px; }
  .apvr-dunit-chev { width: 6px; height: 6px; }
  .apvr-unit-sc { padding-right: 10px; }
  .apvr-unit-scroll { right: 4px; width: 4px; }
  .apvr-thumb { width: 96px; height: 58px; }
  .apvr-unit-tag { height: 18px; font-size: 11px; }
  .apvr-unit-miss { font-size: 12.5px; }
  /* 多航空器 / 多操控员：2K 只放大字号与间距，版式与 1K 同一套 */
  .apvr-dunit-k { font-size: 12.5px; }
  .apvr-dunit-cnt { font-size: 13.5px; }
  .apvr-airswap { gap: 7px; }
  .apvr-airswap-c { height: 25px; padding: 0 10px; }
  .apvr-airswap-c > b { font-size: 12px; }
  .apvr-airswap-c > span { font-size: 12px; }
  .apvr-airpills { gap: 7px; padding-bottom: 12px; }
  .apvr-airpills > .apvr-dpill { height: 26px; padding: 0 9px; }
  .apvr-airpills > .apvr-dpill > b { font-size: 12px; }
  .apvr-airpills > .apvr-dpill > i { margin: 0 7px; }
  .apvr-airpills > .apvr-dpill > span { font-size: 11.5px; }
  .apvr-air-warn { padding: 7px 10px; font-size: 12.5px; }
  .apvr-crew-row { padding: 10px 10px 11px 11px; gap: 4px; }
  .apvr-crew-hd > b { font-size: 14px; }
  .apvr-crew-lic { font-size: 11.5px; }
  .apvr-crew-meta { font-size: 12px; gap: 9px; }
  .apvr-crew-meta > .is-mono { font-size: 11.5px; }
}

@media (prefers-reduced-motion: reduce) {
  .apvr-d, .apvr-content.is-back { animation: none; }
  .apvr-dhead, .apvr-scroller, .apvr-unit { transition: none; }
  .apvr-d[data-urg="over"] .apvr-dst > i,
  .apvr-d[data-urg="soon"] .apvr-dst > i { animation: none; }
}

/* ============================================================
   受理意见（底部操作位 #apvr-dock）
   —— 详情页是「读」，这里只承担「判」：读完的那一刻手不用往上翻去找动作。
      所以它不跟着内容滚——内容在它上方滚，它始终贴着面板底边，
      读者的视线有一条固定的落地线，滚到哪儿都能一眼看到「通过 / 不通过」。
   —— 不新开浮层、不弹窗：面板从上到下就是「详情 → 意见 → 结论」一条路径，
      弹出窗口会把这条路径截断，还得再关一次窗。
   —— 语汇照搬详情：同款竖条小标题、同款胶囊、同款发丝线；
      唯一的「有色」是右下两枚动作按钮（蓝 = 通过，砖红 = 不通过），
      整块不铺色，避免和抬头抢重心。
   ============================================================ */
#apvr-panel .apvr-dock {
  flex-shrink: 0;
  /* 抵消 .apvr-body 的内边距，让操作区贴齐面板左右与底边——它属于面板，不属于内容 */
  margin: 0 -12px -14px;
  padding: 11px 12px 0;
  /* 与详情里的分区边界线同亮度：操作位也是「一块」，界线要用同一支笔画出来 */
  border-top: 1px solid rgba(128, 174, 218, 0.34);
  border-radius: 0 0 11px 11px;
  /* 底色跟面板同一支墨：只是略深一档，靠上缘那道发丝线分节。
     不再叠蓝色径向光、也不再自带模糊——面板已经透好了，再透一次会读作另一块玻璃 */
  background: linear-gradient(180deg, rgba(13, 18, 26, 0.05) 0%, rgba(13, 18, 26, 0.22) 100%);
  animation: apvr-dock-in 260ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
#apvr-panel .apvr-dock[hidden] { display: none; }
#apvr-panel[data-view="list"] .apvr-dock { display: none; }
@keyframes apvr-dock-in {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

/* 详情视图：内容顶边不再留 2px（那是列表卡的呼吸位），抬头的吸附位才贴得齐 */
#apvr-panel[data-view="detail"] .apvr-content { padding-top: 0; }

/* 有底部操作位时，内容在下缘「化开」而不是被切一刀。
   做法是给滚动视口加遮罩（不是叠暗色）：面板是透明的，压一层墨就是一条黑边；
   遮罩让内容退成透明的面板玻璃，一个像素的额外墨都不加。
   抬头已经挪出了滚动容器，所以这里用遮罩不会再打断它的背景模糊 */
#apvr-panel.has-dock .apvr-scroller {
  -webkit-mask-image: linear-gradient(180deg, #000 0, #000 calc(100% - 16px), transparent 100%);
  mask-image: linear-gradient(180deg, #000 0, #000 calc(100% - 16px), transparent 100%);
}
/* 下内边距要盖住这段遮罩：滚到头时最后一行停在化开区之上，不能跟着一起淡掉 */
#apvr-panel.has-dock .apvr-content { padding-bottom: 20px; }
/* 滚起来之后，视口顶端也留一小段化开区：半行字被卡片边缘切断，比被遮住更刺眼。
   只有滚动过才加，静止时第一行保持实心 */
#apvr-panel.has-dock .apvr-scroller.is-scrolled {
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 15px, #000 calc(100% - 16px), transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0, #000 15px, #000 calc(100% - 16px), transparent 100%);
}
/* —— 小标题行：与详情分区同款竖条，尺寸低一档（它是操作区，不是资料） —— */
.apvr-op-hd { display: flex; align-items: center; gap: 7px; margin-bottom: 9px; }
.apvr-op-hd > i {
  width: 3px; height: 10px; border-radius: 1px; flex-shrink: 0;
  background: linear-gradient(180deg, #C4DCF6 0%, #6FA3D0 100%);
  box-shadow: 0 0 7px rgba(111, 163, 208, 0.5);
}
.apvr-op-hd > span {
  font-size: 12.5px; font-weight: 600; letter-spacing: 1.4px; white-space: nowrap; color: #E2F0FC;
}
.apvr-op-hd > b {
  margin-left: auto; flex-shrink: 0;
  font-family: var(--font-mono); font-weight: 500; font-size: 10.5px;
  letter-spacing: 0.2px; color: rgba(180, 204, 226, 0.46); font-variant-numeric: tabular-nums;
  transition: color 200ms ease;
}
.apvr-op-hd > b.is-near { color: #E0A968; }

/* —— 录入区：写和点选是同一个动作的两半，收在一个框里，只留一层边 ——
   框内上半是输入（无边框），中线下一排短标签；聚焦时是整框亮，不是框里再亮一个框 */
.apvr-op-box {
  border-radius: 8px;
  background: rgba(6, 10, 16, 0.24);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.105);
  transition: background 180ms ease, box-shadow 180ms ease;
}
/* 聚焦：只有一件事——框的边亮起来。
   底色不再跟着变深：描边亮 + 底色变，会被读成「边在亮 + 块被选中」两层状态。
   框里也不长第二个框（textarea 无边框、无外发光），所以只看到一圈 */
.apvr-op-box:focus-within {
  box-shadow: inset 0 0 0 1px rgba(146, 192, 236, 0.50);
}
.apvr-op-ta:focus,
.apvr-op-ta:focus-visible { outline: 0; box-shadow: none; }
/* 该填没填：描边点一下，不弹提示、不出红字 */
.apvr-op-box.is-warn { box-shadow: inset 0 0 0 1px rgba(232, 119, 107, 0.55); }
.apvr-op-ta {
  display: block; width: 100%; box-sizing: border-box;
  min-height: 56px; max-height: 112px;
  padding: 9px 9px 2px; border: 0; border-radius: 8px 8px 0 0; outline: 0; resize: none;
  background: none;
  font-family: inherit; font-size: 12.5px; line-height: 1.55; letter-spacing: 0.3px;
  color: #D3E6F6;
}
.apvr-op-ta::placeholder { color: rgba(168, 190, 210, 0.40); }
/* —— 滚动条：跟着面板里其他滚动区走（细、轨道透明、滑块是一条蓝灰渐变的淡光），
   与 .apvr-scroll i（内容区那条自绘指示）同一支墨、同一档粗细。
   这里不写 scrollbar-width / scrollbar-color：Chromium 里只要出现标准属性，
   ::-webkit-scrollbar 那套就整体失效，退回系统那根带上下箭头的浅灰方条
   —— 多写几行字就露出一根没被设计过的控件。所以只在 webkit 上画，
   Firefox（不支持 ::-webkit-scrollbar）由末尾的 @supports 兜一层细条 */
.apvr-op-ta::-webkit-scrollbar { width: 4px; height: 4px; }
/* 不留箭头、不留两端方头：滚动条只是一条指示，不是一组控件 */
.apvr-op-ta::-webkit-scrollbar-button { display: none; width: 0; height: 0; }
.apvr-op-ta::-webkit-scrollbar-track { background: transparent; }
.apvr-op-ta::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(118, 156, 194, 0.52) 0%, rgba(70, 104, 140, 0.26) 100%);
  box-shadow: 0 0 5px rgba(78, 118, 158, 0.26);
}
.apvr-op-ta::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, rgba(150, 190, 230, 0.66) 0%, rgba(88, 126, 164, 0.34) 100%);
}
.apvr-op-ta::-webkit-scrollbar-corner { background: transparent; }
@supports not selector(::-webkit-scrollbar) {
  .apvr-op-ta { scrollbar-width: thin; scrollbar-color: rgba(150, 190, 230, 0.30) transparent; }
}
@keyframes apvr-op-shake {
  0%, 100% { transform: none; }
  25% { transform: translateX(-3px); }
  75% { transform: translateX(3px); }
}
.apvr-op-box.is-shake { animation: apvr-op-shake 260ms ease; }

/* —— 常用理由：短标签当按钮，点一下把整句写进意见里 —— */
.apvr-op-tags {
  display: flex; flex-wrap: wrap; gap: 5px;
  padding: 8px 8px 9px;
  border-top: 1px solid rgba(255, 255, 255, 0.055);
}
.apvr-op-tag {
  flex-shrink: 0; height: 22px; padding: 0 7px; border-radius: 5px;
  border: 1px solid rgba(255, 255, 255, 0.085);
  background: rgba(255, 255, 255, 0.042);
  font-family: inherit; font-size: 11px; letter-spacing: 0.3px;
  color: rgba(198, 220, 238, 0.70); cursor: pointer;
  transition: color 160ms ease, background 160ms ease, border-color 160ms ease;
}
.apvr-op-tag:hover {
  color: #F0F8FF; border-color: rgba(160, 200, 240, 0.30);
  background: rgba(255, 255, 255, 0.085);
}
/* 已被写进意见的标签保持点亮：再点一次即撤掉，省得手动删半句 */
.apvr-op-tag.is-on {
  color: #DCEFFF; border-color: rgba(150, 200, 245, 0.42);
  background: rgba(120, 170, 225, 0.14);
}

/* —— 附件：一句口径说明 + 文本链入口，整行靠右 ——
   靠右是为了和下面的动作按钮共用同一条右缘线：一列「次要 → 主要」的读法 */
.apvr-op-row { display: flex; align-items: center; justify-content: flex-end; gap: 10px; margin-top: 9px; }
/* 附件入口不做成按钮：它是一次次要动作，做成带图标的文本链更轻，
   也给上面那排方框芯片留出对比——面板里已经有太多「框」了 */
.apvr-op-file {
  flex-shrink: 0; display: inline-flex; align-items: center; gap: 5px;
  height: 22px; padding: 0; border: 0; background: none;
  font-family: inherit; font-size: 11px; letter-spacing: 0.5px;
  color: rgba(180, 206, 232, 0.80); cursor: pointer;
  transition: color 160ms ease, box-shadow 160ms ease;
}
.apvr-op-file:hover {
  color: #EAF6FF;
  box-shadow: inset 0 -1px 0 rgba(190, 220, 245, 0.45);
}
.apvr-op-file:focus-visible { outline: 0; box-shadow: inset 0 -1px 0 rgba(190, 220, 245, 0.7); }
.apvr-op-file svg { width: 12px; height: 12px; flex-shrink: 0; }
.apvr-op-hint {
  min-width: 0; font-size: 11px; letter-spacing: 0.2px;
  color: rgba(160, 182, 202, 0.40);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  transition: color 200ms ease;
}
.apvr-op-hint.is-warn { color: #E89286; }
.apvr-op-files { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 7px; }
.apvr-op-files:empty { display: none; }
.apvr-op-chip {
  display: inline-flex; align-items: center; gap: 5px; max-width: 100%; height: 20px;
  padding: 0 3px 0 7px; border-radius: 4px;
  background: rgba(255, 255, 255, 0.055);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
  font-size: 10.5px; letter-spacing: 0.2px; color: rgba(198, 220, 238, 0.72);
}
.apvr-op-chip > em { font-style: normal; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.apvr-op-chip > b {
  flex-shrink: 0; font-family: var(--font-mono); font-weight: 400; font-size: 10px;
  color: rgba(160, 182, 202, 0.48); font-variant-numeric: tabular-nums;
}
.apvr-op-chip > i {
  flex-shrink: 0; width: 13px; height: 13px; border-radius: 3px; cursor: pointer;
  display: grid; place-items: center;
  color: rgba(180, 200, 220, 0.46); font-style: normal;
  transition: color 160ms ease, background 160ms ease;
}
.apvr-op-chip > i:hover { color: #E89286; background: rgba(232, 119, 107, 0.16); }

/* —— 收尾条：免责一句在左、两枚动作在右，同一条基线 ——
   整条出血到面板左右与底边、上缘一道发丝线、底子略亮一点：
   上面是「写」，这里是「判」，一段横线就把两件事分开了，
   不必再加标题、也不必把按钮悬在半空 */
.apvr-op-foot {
  display: flex; flex-direction: row; align-items: center; justify-content: space-between; gap: 14px;
  margin: 11px -12px 0; padding: 12px 12px 15px;
  border-top: 1px solid rgba(255, 255, 255, 0.075);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.016) 0%, rgba(255, 255, 255, 0) 100%);
}
/* 免责一句：整块只有一档字号 11px（含句尾书名号那一段），句内不设第二档字号 ——
   「免责声明：」只是这句话开头的几个字，不是标签，所以不加粗、不提亮、不改字号 */
.apvr-op-note {
  flex: 1; min-width: 0; margin: 0;
  font-size: 11px; line-height: 1.65; letter-spacing: 0.2px; color: rgba(160, 182, 202, 0.44);
}
/* 「免责声明」四个字作标签：一枚钢蓝竖条起头 + 钢蓝标签字。
   只换颜色和加一根竖条，**字号仍是 11px**，与后面正文同档 ——
   标签要的是「一眼认出这是抬头」，不是靠放大字号去抢注意力。
   用色取面板既有的钢蓝（与通过率、时限基准同一支），
   琥珀在本面板是「临近截止」的语义色，借来当标签会串味 */
.apvr-op-note > em {
  font-style: normal; font-weight: 500; letter-spacing: 0.4px;
  color: rgba(158, 196, 236, 0.92);
}
.apvr-op-note > em::before {
  content: ""; display: inline-block; width: 2px; height: 9px; border-radius: 1px;
  margin-right: 5px; vertical-align: -1px;
  background: linear-gradient(180deg, rgba(178, 212, 246, 0.92) 0%, rgba(96, 138, 190, 0.66) 100%);
  box-shadow: 0 0 6px rgba(110, 152, 200, 0.30);
}
/* 免责一句的第二段（「详见《安全飞行告知书》」）：
   窄档（1K，面板 484px）随前句行内连排 —— 这一段自己另起一行会把书名号那段孤立出来，
   句子按可用宽度自然折成两行才顺眼；
   宽档（2K，面板 560px）才升为整行块，读作「以逗号为节点换行」 */
.apvr-op-more { display: inline; }
.apvr-op-note b {
  font-weight: 400; font-size: inherit; white-space: nowrap;
  color: rgba(190, 214, 236, 0.56); cursor: pointer;
  text-decoration: underline; text-underline-offset: 2px;
  text-decoration-color: rgba(190, 214, 236, 0.26);
  transition: color 160ms ease;
}
.apvr-op-note b:hover { color: #CFE4F5; }
.apvr-op-acts { display: flex; justify-content: flex-end; gap: 9px; }

/* —— 已受理的结论条：只读。一条办完的申请不该再出现「写」的框和「判」的按钮 —— */
.apvr-dec {
  border-radius: 8px; padding: 11px 12px 12px;
  background: rgba(6, 10, 16, 0.24);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.09);
}
.apvr-dec-st {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12.5px; font-weight: 600; letter-spacing: 1.1px; color: #AAC6DE;
}
.apvr-dec[data-st="rejected"] .apvr-dec-st { color: #E89286; }
.apvr-dec-st > i {
  width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0;
  background: currentColor; box-shadow: 0 0 7px currentColor;
}
.apvr-dec-tx {
  margin: 9px 0 0; font-size: 12.5px; line-height: 1.7; letter-spacing: 0.3px;
  color: rgba(214, 231, 244, 0.88); word-break: break-word;
}
.apvr-dec-files { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 9px; }

.apvr-op-btn {
  height: 34px; min-width: 82px; padding: 0 17px; border: 0; border-radius: 7px;
  font-family: inherit; font-size: 12.5px; font-weight: 500; letter-spacing: 1.2px;
  cursor: pointer; outline: 0;
  transition: filter 160ms ease, transform 120ms ease,
              box-shadow 200ms ease, background 200ms ease, color 200ms ease;
}
.apvr-op-btn:active { transform: translateY(1px); }
/* 通过：实底钢蓝，顶上一道高光、底下一层落影——整块面板里唯一的重色，
   所以不给它描边、不加图标，靠明度说话 */
.apvr-op-btn.is-ok {
  color: #F7FBFF;
  background: linear-gradient(180deg, #6FA8DE 0%, #4A82BC 46%, #35679F 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.32),
    inset 0 0 0 1px rgba(160, 205, 245, 0.26),
    0 10px 20px -14px rgba(60, 130, 200, 0.95);
}
.apvr-op-btn.is-ok:hover {
  filter: brightness(1.08) saturate(1.03);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.40),
    inset 0 0 0 1px rgba(180, 216, 250, 0.36),
    0 13px 24px -14px rgba(70, 145, 215, 1);
}
.apvr-op-btn.is-ok:focus-visible {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.32),
    inset 0 0 0 1px rgba(180, 216, 250, 0.5),
    0 0 0 3px rgba(110, 165, 220, 0.22);
}
/* 不通过：透底 + 砖红发丝描边。否定动作不该和主操作同重——
   两块实底并排，读者第一眼分不出哪个是默认路径 */
.apvr-op-btn.is-no {
  color: #E8968A;
  background: rgba(255, 255, 255, 0.022);
  box-shadow: inset 0 0 0 1px rgba(232, 119, 107, 0.34);
}
.apvr-op-btn.is-no:hover {
  color: #F8CDC6;
  background: rgba(232, 119, 107, 0.10);
  box-shadow: inset 0 0 0 1px rgba(232, 119, 107, 0.58);
}
.apvr-op-btn.is-no:focus-visible {
  box-shadow:
    inset 0 0 0 1px rgba(232, 119, 107, 0.6),
    0 0 0 3px rgba(232, 119, 107, 0.16);
}
/* 提交后短暂落幕：按钮退成中性，字换成结果，1.6s 后回位（不做假状态，也不加提示条） */
.apvr-op-btn.is-done {
  background: rgba(255, 255, 255, 0.065); color: #CFE4F5;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
  pointer-events: none; filter: none;
}

/* —— 2K 档：整体放大一档，版式结构不动 —— */
@media (min-width: 2048px) {
  #apvr-panel .apvr-dock { margin: 0 -14px -16px; padding: 13px 14px 0; border-radius: 0 0 13px 13px; }
  .apvr-op-foot { margin: 12px -14px 0; padding: 12px 14px 17px; }
  .apvr-op-btn { height: 37px; min-width: 92px; font-size: 14px; }
  .apvr-op-hd { margin-bottom: 9px; }
  .apvr-op-hd > span { font-size: 14px; }
  .apvr-op-hd > b { font-size: 11.5px; }
  .apvr-op-ta { min-height: 58px; max-height: 124px; font-size: 14px; padding: 9px 10px; }
  .apvr-op-tag { height: 24px; font-size: 12.5px; padding: 0 9px; }
  .apvr-op-file { height: 24px; font-size: 12.5px; }
  .apvr-op-file svg { width: 13px; height: 13px; }
  .apvr-op-hint { font-size: 11px; }
  .apvr-op-chip { height: 22px; font-size: 11.5px; }
  .apvr-op-note { font-size: 11px; }
  /* 宽档：免责第二段整行起，保住「以逗号为节点换行」的读法（窄档见上方 .apvr-op-more） */
  .apvr-op-more { display: block; }
}

/* 矮屏（笔记本 768p 那种）：先收内边距，再收输入框，别把详情挤没 */
@media (max-height: 820px) {
  #apvr-panel .apvr-dock { padding-top: 9px; }
  .apvr-op-ta { min-height: 46px; }
  .apvr-op-tags { margin-top: 8px; }
  .apvr-op-row { margin-top: 8px; }
  .apvr-op-foot { margin-top: 9px; padding-top: 9px; padding-bottom: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  #apvr-panel .apvr-dock { animation: none; }
  .apvr-op-ta.is-shake { animation: none; }
}