/* ============================================================
   media-ui.css · 相册（图片 + 视频）与全屏查看器
   ============================================================ */

/* 视频缩略图上的播放角标 */
.ph.is-video{ position:relative; }
.ph.is-video .ph-play{
  position:absolute; left:50%; top:50%;
  transform:translate(-50%,-50%);
  width:34px; height:34px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:rgba(10,6,10,.62);
  border:1px solid rgba(255,255,255,.45);
  color:#fff; font-size:.78rem; line-height:1;
  padding-left:2px;
  backdrop-filter:blur(4px);
  -webkit-backdrop-filter:blur(4px);
  pointer-events:none;
  box-shadow:0 4px 16px -4px rgba(0,0,0,.7);
}

/* ---------- 全屏查看器 ---------- */
#mediaViewer{
  position:fixed; inset:0; z-index:2147483000;
  display:flex; align-items:center; justify-content:center;
  background:rgba(4,3,6,.96);
  opacity:0; pointer-events:none;
  transition:opacity .42s var(--ease);
}
#mediaViewer.on{ opacity:1; pointer-events:auto; }

#mediaViewer .mv-stage{
  max-width:94vw; max-height:90vh;
  display:flex; flex-direction:column;
  align-items:center; gap:10px;
}
#mediaViewer .mv-media{
  max-width:94vw; max-height:82vh;
  border-radius:12px;
  box-shadow:0 40px 90px -40px rgba(0,0,0,.9);
  background:#000;
}
#mediaViewer .mv-cap{
  font-family:var(--zh);
  font-size:.72rem; letter-spacing:.08em;
  color:var(--muted);
  margin:0; text-align:center;
}

#mediaViewer .mv-close,
#mediaViewer .mv-prev,
#mediaViewer .mv-next{
  position:absolute;
  border:1px solid rgba(255,255,255,.18);
  background:rgba(255,255,255,.06);
  color:#f2e9ec;
  cursor:pointer;
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  transition:.3s var(--ease);
}
#mediaViewer .mv-close{
  top:18px; right:18px;
  width:40px; height:40px; font-size:.9rem;
}
#mediaViewer .mv-prev,
#mediaViewer .mv-next{
  top:50%; transform:translateY(-50%);
  width:46px; height:46px; font-size:1.5rem;
}
#mediaViewer .mv-prev{ left:14px; }
#mediaViewer .mv-next{ right:14px; }
#mediaViewer .mv-close:hover,
#mediaViewer .mv-prev:hover,
#mediaViewer .mv-next:hover{
  background:rgba(255,255,255,.16);
  border-color:rgba(255,255,255,.4);
}

@media (max-width:560px){
  #mediaViewer .mv-prev,
  #mediaViewer .mv-next{ width:38px; height:38px; font-size:1.2rem; }
  #mediaViewer .mv-close{ width:34px; height:34px; }
}