:root{
  --overlay-bg: rgba(0,0,0,.76);
  --panel:#0e1015;
  --ink:#e8ecff;
  --muted:#9aa4bd;
  --line:#20242f;
  --accent:#ff3355;
}

.stov{position:fixed; inset:0; display:none; z-index:1000}
.stov.is-open{display:block}
.stov__backdrop{position:absolute; inset:0; background:var(--overlay-bg); backdrop-filter: blur(2px)}
.stov__frame{
  position:absolute; inset:0;
  width:min(720px, 96vw); height:min(92vh, 860px);
  margin:auto; background:var(--panel); border:1px solid var(--line); border-radius:16px;
  display:grid; grid-template-rows: auto auto 1fr; overflow:hidden;
  box-shadow: 0 30px 120px rgba(0,0,0,.6);
}

.stov__close{
  position:absolute; right:10px; top:8px; z-index:2;
  border:0; background:transparent; color:var(--ink); font-size:20px; cursor:pointer; opacity:.8
}
.stov__close:hover{opacity:1}

.stov__head{display:flex; align-items:center; gap:10px; padding:10px 12px; border-bottom:1px solid var(--line)}
.stov__avatar{width:34px;height:34px;border-radius:50%;object-fit:cover;background:#0a0c12}
.stov__name{font-weight:800; color:#fff}
.stov__time{color:var(--muted); font-size:12px}

.stov__bars{display:flex; gap:6px; padding:8px 12px}
.stov__bars .bar{flex:1; height:3px; background:#1a1f2a; border-radius:999px; overflow:hidden}
.stov__bars .bar > span{display:block; height:100%; width:0%; background:linear-gradient(90deg,#ff6b86,#ff3355); transition: width .1s linear}

.stov__stage{position:relative; background:#000; display:grid; place-items:center}
.stov__media{position:relative; width:100%; height:100%; display:grid; place-items:center}
.stov__media img, .stov__media video{max-width:100%; max-height:100%; object-fit:contain; background:#000}

.stov__zone{position:absolute; top:0; bottom:0; width:30%; border:0; background:transparent; cursor:pointer}
.stov__zone--prev{left:0}
.stov__zone--next{right:0}

.stov__heart{
  position:absolute; left:50%; top:50%; transform: translate(-50%,-50%) scale(.5);
  font-size:120px; color:var(--accent); opacity:0; pointer-events:none;
  text-shadow: 0 12px 60px rgba(255,51,85,.5);
}
.stov__heart.is-pop{animation: heartpop .8s ease forwards}
@keyframes heartpop{
  0%{opacity:0; transform: translate(-50%,-50%) scale(.4)}
  18%{opacity:1; transform: translate(-50%,-50%) scale(1)}
  100%{opacity:0; transform: translate(-50%,-50%) scale(1.2)}
}

/* Responsive */
@media (max-width:640px){
  .stov__frame{width:100vw; height:100vh; border-radius:0; border:none}
  .stov__bars{padding:8px}
}