/* ============================================================
   power-save-notice.css —— 省电模式说明弹层
   配套脚本：/js/monitor/power-save-notice.js
   说明内容：/power-save-notice.html（以 iframe 嵌入）

   遮罩与弹层均只使用 transform / opacity 过渡，
   不改布局属性，避免触发重排。
   ============================================================ */
#eocPowerSaveNoticeOverlay {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  animation: eoc-psn-fade 0.18s ease both;
}

#eocPowerSaveNoticeOverlay iframe {
  width: min(680px, 100%);
  height: min(560px, 88vh);
  border: 0;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.28);
  animation: eoc-psn-pop 0.22s cubic-bezier(0.22, 1.2, 0.36, 1) both;
}

@media (prefers-color-scheme: dark) {
  #eocPowerSaveNoticeOverlay iframe { background: #16181d; }
}

@keyframes eoc-psn-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes eoc-psn-pop {
  from { opacity: 0; transform: translateY(10px) scale(0.985); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* 无障碍：尊重系统「减弱动态效果」偏好 */
@media (prefers-reduced-motion: reduce) {
  #eocPowerSaveNoticeOverlay,
  #eocPowerSaveNoticeOverlay iframe {
    animation: none;
  }
}