:root {
  --preview-w: 360px;
  --preview-shadow: 0 24px 60px var(--shadow);
  --preview-title: 30px;
}

.preview {
  position: fixed; z-index: 30; width: min(var(--preview-w), calc(100vw - var(--dialog-gap)));
  border-radius: var(--radius-card); overflow: hidden; cursor: pointer;
  background: var(--surface); box-shadow: var(--preview-shadow);
}
.preview-media {
  position: relative; isolation: isolate; overflow: hidden;
  aspect-ratio: 16 / 9; display: flex; align-items: flex-end;
  background: var(--surface-deep) center / cover no-repeat;
}
.preview-media > .trailer-frame { z-index: -2; width: 100%; height: 100%; }
/* Keeps the title readable over any frame. */
.preview-media::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(0deg, var(--bg-fade) 0%, transparent 55%);
}
.preview-media strong {
  padding: var(--sp-12) var(--sp-16);
  font: var(--preview-title)/.95 var(--display); letter-spacing: .02em; text-wrap: balance;
}
.preview-body { padding: var(--sp-14) var(--sp-16) var(--sp-16); display: grid; gap: var(--sp-12); }
.preview-actions { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-10); }
.preview-meta { color: var(--text-soft); font-size: var(--fs-14); font-weight: 700; }
.rating {
  display: inline-block; margin-right: var(--sp-8); padding: 0 var(--sp-6);
  border: 1px solid var(--muted); border-radius: var(--radius-sm); font-size: var(--fs-12);
}