/* 爆款素材预览弹层 —— 配套 static/viral_preview.js */

.edvp-mask{
  position:fixed; inset:0; z-index:9000; display:none;
  align-items:center; justify-content:center;
  background:rgba(10,10,12,.82); backdrop-filter:blur(6px);
  padding:24px;
}
.edvp-mask.on{ display:flex; }

.edvp-box{
  position:relative; width:min(420px, 92vw);
  background:#101014; border-radius:16px; overflow:hidden;
  box-shadow:0 24px 64px rgba(0,0,0,.5);
}
/* 竖屏为主(TikTok/抖音/Shorts),9:16 能让绝大多数片子不留黑边 */
.edvp-stage{
  position:relative; aspect-ratio:9/16; max-height:78vh;
  background:#000; display:flex; align-items:center; justify-content:center;
}
.edvp-v, .edvp-f{
  width:100%; height:100%; display:block; border:0; background:#000;
}
.edvp-tip{
  position:absolute; left:0; right:0; bottom:50%; transform:translateY(50%);
  padding:0 28px; text-align:center; color:#D8D6CE;
  font-size:15px; line-height:1.7;
}
.edvp-tip.warn{ color:#F3B562; }

.edvp-x{
  position:absolute; right:10px; top:10px; z-index:3;
  width:32px; height:32px; border:none; border-radius:50%;
  background:rgba(24,23,19,.62); color:#fff; font-size:21px; line-height:1;
  cursor:pointer; display:flex; align-items:center; justify-content:center;
}
.edvp-x:hover{ background:rgba(24,23,19,.85); }

.edvp-bar{
  display:flex; align-items:center; gap:12px; padding:12px 14px;
  background:#17171B;
}
.edvp-t{
  flex:1; min-width:0; color:#E8E6E0; font-size:14.5px; line-height:1.5;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  overflow:hidden;
}
.edvp-link{
  flex:none; color:#9DB4FF; font-size:14px; text-decoration:none;
  white-space:nowrap;
}
.edvp-link:hover{ text-decoration:underline; }

/* 卡片封面上的"可点"热区。默认只露一个淡淡的播放键,
   hover 才压暗 —— 别把封面本身盖住,用户是靠封面挑片的。 */
.edvp-hot{
  position:absolute; inset:0; z-index:2; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  background:transparent; transition:background .15s;
}
.edvp-hot:hover{ background:rgba(10,10,12,.28); }
.edvp-play{
  width:46px; height:46px; border-radius:50%;
  background:rgba(16,16,20,.55); color:#fff; font-size:17.5px;
  display:flex; align-items:center; justify-content:center;
  padding-left:3px; opacity:.82; transition:opacity .15s, transform .15s;
}
.edvp-hot:hover .edvp-play{ opacity:1; transform:scale(1.08); }

/* ── 原地播放(2026-09-07 Owner:首页不要弹层,就在卡片里放)── */
.hp-vcover .edvp-inv,
.hp-vcover .edvp-inf{position:absolute;inset:0;width:100%;height:100%;border:0;background:#000;object-fit:contain;display:block;z-index:2}
.hp-vcover .edvp-intip{position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);z-index:3;
  text-align:center;color:#fff;font-size:12.5px;line-height:1.6;padding:0 10px;text-shadow:0 1px 3px rgba(0,0,0,.6);pointer-events:none}
.hp-vcover .edvp-intip.warn{color:#FFD9C7}
.hp-vcover .edvp-inx{position:absolute;top:6px;right:6px;z-index:4;width:24px;height:24px;border:0;border-radius:50%;
  background:rgba(0,0,0,.6);color:#fff;font-size:15px;line-height:1;cursor:pointer;padding:0}
.hp-vcover .edvp-inx:hover{background:rgba(0,0,0,.8)}