/* ============ 视频帧序列巡检 ============ */
#page-frames .fr-stats { grid-template-columns: repeat(5, 1fr); margin-bottom: 14px; }
#page-frames .fr-stat {
  background: var(--card); border: 1px solid var(--line); border-radius: 12px;
  padding: 13px 16px; text-align: center; box-shadow: var(--shadow-sm);
}
#page-frames .fr-stat-num { font-size: 26px; font-weight: 800; color: var(--ink); }
#page-frames .fr-stat.bad .fr-stat-num { color: var(--red); }
#page-frames .fr-stat.ok .fr-stat-num { color: var(--green); }
#page-frames .fr-stat.p0 .fr-stat-num { color: var(--red-dark); }
#page-frames .fr-stat-k { font-size: 11px; color: var(--ink-3); font-weight: 600; margin-top: 3px; }

#page-frames .fr-ctrl { display: flex; align-items: center; gap: 8px; }
#page-frames .fr-progress { font-size: 12px; color: var(--ink-3); font-weight: 700; min-width: 48px; text-align: center; }

#page-frames .fr-main { grid-template-columns: 1fr 290px; gap: 16px; }
#page-frames .fr-player {
  position: relative; aspect-ratio: 16 / 9; border-radius: 12px; overflow: hidden;
  border: 2px solid var(--line); background: #EEF0F3;
  transition: border-color .25s;
}
#page-frames .fr-player.viol { border-color: var(--red); box-shadow: 0 0 0 4px rgba(204,0,0,.09); }
#page-frames #fr-player-badge { position: absolute; top: 10px; right: 10px; }
#page-frames .fr-badge {
  display: inline-flex; align-items: center; gap: 5px;
  background: var(--red); color: #fff; font-size: 11.5px; font-weight: 800;
  padding: 5px 12px; border-radius: 7px; letter-spacing: .3px;
  animation: pageIn .25s ease;
}
#page-frames .fr-badge.ok { background: var(--green); }

#page-frames .fr-cam {
  position: absolute; top: 10px; left: 10px; z-index: 3;
  background: rgba(23,26,31,.72); color: #fff; font-size: 10.5px; font-weight: 700;
  padding: 4px 10px; border-radius: 6px; letter-spacing: .8px;
  backdrop-filter: blur(2px);
}
#page-frames .fr-rec { color: #FF4D4F; animation: blink 1.1s step-end infinite; }

#page-frames .fr-meta { display: flex; flex-direction: column; gap: 8px; }
#page-frames .fr-meta-item {
  background: var(--bg); border-radius: 9px; padding: 9px 13px;
  display: flex; flex-direction: column; gap: 3px;
}
#page-frames .fr-meta-k { font-size: 10px; color: var(--ink-4); font-weight: 700; letter-spacing: 1px; }
#page-frames .fr-meta-v { font-size: 12.5px; font-weight: 600; color: var(--ink); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }

/* 时间轴 */
#page-frames .fr-timeline {
  display: flex; gap: 9px; margin-top: 15px; overflow-x: auto; padding: 6px 2px 10px;
}
#page-frames .fr-thumb {
  position: relative; flex-shrink: 0; width: 118px; cursor: pointer;
  border: 2px solid var(--line); border-radius: 9px; overflow: hidden;
  transition: transform .15s, border-color .15s;
  background: #fff;
}
#page-frames .fr-thumb:hover { transform: translateY(-2px); }
#page-frames .fr-thumb.active { border-color: var(--red); box-shadow: 0 0 0 3px rgba(204,0,0,.12); }
#page-frames .fr-thumb.lv-P0 { border-color: #EFB3B3; }
#page-frames .fr-thumb.lv-P1 { border-color: #F3CBA8; }
#page-frames .fr-thumb.lv-P2 { border-color: #EFD9AC; }
#page-frames .fr-thumb.lv-P3 { border-color: #B9DECB; }
#page-frames .fr-thumb.active.lv-P0 { border-color: var(--red); }
#page-frames .fr-thumb-art { height: 64px; overflow: hidden; }
#page-frames .fr-thumb-art svg { width: 100%; height: 100%; transform: scale(1.02); }
#page-frames .fr-thumb-id { text-align: center; font-size: 10px; font-weight: 700; color: var(--ink-3); padding: 3.5px 0; border-top: 1px solid var(--line-2); }
#page-frames .fr-thumb-mark {
  position: absolute; top: 5px; left: 5px; color: #fff; font-size: 9px; font-weight: 800;
  padding: 2px 6px; border-radius: 5px; letter-spacing: .5px;
}
#page-frames .fr-thumb-vlm {
  position: absolute; top: 5px; right: 5px; background: var(--orange); color: #fff;
  font-size: 9px; font-weight: 800; padding: 2px 5px; border-radius: 5px;
}

/* 复检结果 */
#page-frames .fr-rc-empty {
  border: 1.5px dashed var(--line); border-radius: 11px; padding: 30px;
  text-align: center; color: var(--ink-4); font-size: 12.5px;
}
#page-frames .fr-rc-sum { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 14px; }
#page-frames .fr-rc-sum-item {
  border-radius: 11px; padding: 12px; text-align: center; border: 1px solid var(--line);
}
#page-frames .fr-rc-sum-num { font-size: 24px; font-weight: 800; }
#page-frames .fr-rc-sum-k { font-size: 10.5px; font-weight: 700; margin-top: 2px; opacity: .85; }
#page-frames .fr-rc-sum-item.ok { background: var(--green-tint); border-color: #CDE9DC; }
#page-frames .fr-rc-sum-item.ok .fr-rc-sum-num, #page-frames .fr-rc-sum-item.ok .fr-rc-sum-k { color: var(--green); }
#page-frames .fr-rc-sum-item.warn { background: var(--orange-tint); border-color: #F3D3B8; }
#page-frames .fr-rc-sum-item.warn .fr-rc-sum-num, #page-frames .fr-rc-sum-item.warn .fr-rc-sum-k { color: var(--orange); }
#page-frames .fr-rc-sum-item.bad { background: var(--red-tint); border-color: #EFC9C9; }
#page-frames .fr-rc-sum-item.bad .fr-rc-sum-num, #page-frames .fr-rc-sum-item.bad .fr-rc-sum-k { color: var(--red); }
#page-frames .fr-rc-sum-item.info { background: var(--blue-tint); border-color: #C9DCF3; }
#page-frames .fr-rc-sum-item.info .fr-rc-sum-num, #page-frames .fr-rc-sum-item.info .fr-rc-sum-k { color: var(--blue); }
#page-frames .fr-rc-table tr.fr-rc-diff td { background: #FFF8F0; }

@media (max-width: 1100px) {
  #page-frames .fr-main { grid-template-columns: 1fr !important; }
  #page-frames .fr-stats { grid-template-columns: repeat(3, 1fr) !important; }
}