/* ============ 影片播放器 · 通用结构与交互（三套模板共用） ============ */
.mvp{
  --mvp-accent:#d9a441;
  --mvp-accent-soft:rgba(217,164,65,.30);
  --mvp-radius:8px;
  position:relative;width:100%;aspect-ratio:16/9;background:#050506;
  border-radius:var(--mvp-radius);overflow:hidden;user-select:none;
  font:13px/1.5 "PingFang SC","Microsoft YaHei",Arial,sans-serif;
}
.mvp-stage{position:absolute;inset:0}

/* 视频层 */
.mvp-video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#000;display:block}

/* 缩略图背景层 */
.mvp-poster{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 28%;
  filter:brightness(.58) saturate(1.08);transition:opacity .45s ease,transform 6s ease;
  transform:scale(1.02);
}
.mvp:not(.on) .mvp-poster{transform:scale(1.06)}
.mvp.on .mvp-poster{opacity:0;pointer-events:none}
.mvp-layer{
  position:absolute;inset:0;pointer-events:none;transition:opacity .45s ease;
  background:
    radial-gradient(circle at 50% 44%,rgba(0,0,0,.05),rgba(0,0,0,.55) 82%),
    linear-gradient(to top,rgba(0,0,0,.72),transparent 46%);
}
.mvp.on .mvp-layer{opacity:0}

/* 中央播放按钮 */
.mvp-big{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:76px;height:76px;padding:0;border-radius:50%;cursor:pointer;
  display:grid;place-items:center;
  color:#fff;font-size:25px;line-height:1;text-indent:3px;
  border:1px solid rgba(255,255,255,.45);
  background:rgba(10,10,12,.42);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  box-shadow:0 8px 34px rgba(0,0,0,.55),0 0 0 0 var(--mvp-accent-soft);
  transition:transform .2s ease,background .2s ease,box-shadow .3s ease,border-color .2s ease,opacity .3s ease;
}
.mvp-big:hover{
  transform:translate(-50%,-50%) scale(1.08);
  background:rgba(0,0,0,.55);
  border-color:var(--mvp-accent);
  box-shadow:0 10px 42px rgba(0,0,0,.6),0 0 0 9px var(--mvp-accent-soft);
}
.mvp-big::after{
  content:"";position:absolute;inset:-9px;border-radius:50%;
  border:1px solid var(--mvp-accent-soft);animation:mvp-pulse 2.6s ease-out infinite;
}
@keyframes mvp-pulse{
  0%{transform:scale(.92);opacity:.85}
  70%{transform:scale(1.22);opacity:0}
  100%{opacity:0}
}
.mvp.on .mvp-big{opacity:0;pointer-events:none}

/* 控制条 */
.mvp-ctrl{
  position:absolute;left:0;right:0;bottom:0;z-index:3;
  display:flex;align-items:center;gap:11px;
  padding:26px 14px 11px;
  color:#fff;font-size:12px;
  background:linear-gradient(to top,rgba(0,0,0,.86),rgba(0,0,0,.38) 55%,transparent);
}
.mvp-btn{
  flex:0 0 auto;width:26px;height:26px;padding:0;border:0;border-radius:50%;cursor:pointer;
  display:grid;place-items:center;color:#fff;background:transparent;
  font-size:12px;line-height:1;transition:color .18s,background .18s;
}
.mvp-btn:hover{color:var(--mvp-accent);background:rgba(255,255,255,.1)}
.mvp-btn.mvp-toggle{font-size:13px}

.mvp-t{
  flex:0 0 auto;font-variant-numeric:tabular-nums;letter-spacing:.4px;
  color:rgba(255,255,255,.88);font-size:12px;min-width:34px;text-align:center;
}
.mvp-t.mvp-dur{color:rgba(255,255,255,.55)}

/* 进度条 */
.mvp-bar{
  position:relative;flex:1 1 auto;height:4px;border-radius:3px;cursor:pointer;
  background:rgba(255,255,255,.22);touch-action:none;
}
.mvp-bar::before{content:"";position:absolute;left:0;right:0;top:-9px;bottom:-9px}
.mvp-buf{position:absolute;left:0;top:0;bottom:0;width:0;border-radius:3px;background:rgba(255,255,255,.34)}
.mvp-prog{position:absolute;left:0;top:0;bottom:0;width:0;border-radius:3px;background:var(--mvp-accent)}
.mvp-dot{
  position:absolute;top:50%;left:0;width:11px;height:11px;border-radius:50%;background:#fff;
  transform:translate(-50%,-50%) scale(.6);opacity:0;pointer-events:none;
  box-shadow:0 0 0 4px var(--mvp-accent-soft);
  transition:opacity .2s,transform .2s;
}
.mvp:hover .mvp-dot,.mvp.on .mvp-dot{opacity:1;transform:translate(-50%,-50%) scale(1)}

/* 轻提示 */
.mvp-toast{
  position:absolute;left:50%;bottom:64px;transform:translate(-50%,8px);
  padding:8px 15px;border-radius:20px;white-space:nowrap;
  background:rgba(10,10,12,.9);border:1px solid var(--mvp-accent-soft);
  color:#f2f2f5;font-size:12.5px;opacity:0;pointer-events:none;
  transition:opacity .25s,transform .25s;z-index:5;
}
.mvp-toast.on{opacity:1;transform:translate(-50%,0)}

/* 全屏时铺满 */
.mvp:fullscreen{border-radius:0}
.mvp:fullscreen .mvp-video{object-fit:contain}

@media(max-width:720px){
  .mvp-big{width:62px;height:62px;font-size:21px}
  .mvp-ctrl{padding:20px 10px 9px;gap:8px}
  .mvp-t{min-width:30px;font-size:11.5px}
}