@media (hover: hover) and (pointer: fine) {
  .card:hover { transform: none; box-shadow: var(--shadow-card); }
  .card.pv-host .card-overlay { opacity: 0; }
}

.pv {
  position: fixed; z-index: 60; left: 0; top: 0; width: 340px;
  border-radius: 8px; overflow: hidden; cursor: pointer;
  background: #181818; color: #fff;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.75), 0 0 0 1px rgba(255, 255, 255, 0.06);
  font-family: "Montserrat", system-ui, sans-serif;
  will-change: transform, opacity;
}
.pv-media { position: relative; aspect-ratio: 16 / 9; background: linear-gradient(160deg, var(--surface-2), var(--surface)); overflow: hidden; }
.pv-media img, .pv-blank { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.pv-shade { position: absolute; inset: 0; background: linear-gradient(0deg, #181818 0%, rgba(24, 24, 24, 0.55) 26%, transparent 58%); }
.pv-title {
  position: absolute; left: 14px; right: 14px; bottom: 8px;
  font-weight: 800; font-size: 19px; line-height: 1.15; letter-spacing: -0.01em;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.7);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.pv-panel { padding: 12px 14px 16px; border-radius: 0 0 8px 8px; background: #181818; display: flex; flex-direction: column; gap: 10px; }
.pv-actions { display: flex; align-items: center; gap: 8px; }
.pv-btn {
  flex: none; width: 40px; height: 40px; border-radius: 50%; padding: 0;
  display: grid; place-items: center; cursor: pointer; font: inherit;
  transition: transform 0.15s var(--ease), background 0.15s var(--ease), border-color 0.15s var(--ease), color 0.15s var(--ease);
}
.pv-btn svg { width: 20px; height: 20px; pointer-events: none; }
.pv-btn:active { transform: scale(0.92); }
.pv-play { background: #fff; color: #000; border: 0; }
.pv-play svg { width: 22px; height: 22px; margin-left: 2px; }
.pv-play:hover { background: rgba(255, 255, 255, 0.82); }
.pv-ghost { background: rgba(42, 42, 42, 0.6); color: #fff; border: 2px solid rgba(255, 255, 255, 0.5); }
.pv-ghost:hover { border-color: #fff; background: rgba(255, 255, 255, 0.1); }
.pv-info { margin-left: auto; }
.pv-info svg { width: 22px; height: 22px; margin-top: 2px; }
.pv-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.pv-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; font-size: 13px; font-weight: 600; color: #d2d2d2; }
.pv-rate { display: inline-flex; align-items: center; gap: 4px; color: #46d369; font-weight: 700; }
.pv-rate svg { width: 13px; height: 13px; }
.pv-dot { width: 3px; height: 3px; border-radius: 50%; background: #8c8c8c; }
.pv-hd { font-size: 10px; font-weight: 700; line-height: 1; padding: 2px 4px; border: 1px solid rgba(255, 255, 255, 0.45); border-radius: 3px; color: #e5e5e5; letter-spacing: 0.04em; }
.pv-genres { font-size: 13px; font-weight: 500; color: #e5e5e5; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.pv-sep { font-weight: 400; color: #646464; font-size: 11px; }
.pv-resume { display: flex; align-items: center; gap: 10px; font-size: 12px; font-weight: 500; color: #bcbcbc; white-space: nowrap; }
.pv-bar { flex: 1; height: 3px; background: rgba(255, 255, 255, 0.3); overflow: hidden; }
.pv-bar i { display: block; height: 100%; background: #e50914; }

@media (prefers-reduced-motion: reduce) {
  .pv-btn { transition: none; }
}

.pv-media { background: #181818 center / cover no-repeat; }
.pv-media img { transition: opacity 0.25s var(--ease); }
.pv-media img.pv-wait { opacity: 0; }