
:root {
  --page-bg: #f8fafc;
  --page-text: #111827;
  --card-radius: 24px;
}
html { scroll-behavior: smooth; }
body {
  background:
    radial-gradient(circle at top left, rgba(244, 114, 182, 0.10), transparent 26%),
    radial-gradient(circle at top right, rgba(59, 130, 246, 0.08), transparent 24%),
    linear-gradient(180deg, #f8fafc 0%, #ffffff 38%, #f8fafc 100%);
}
::selection { background: rgba(244, 63, 94, 0.16); }
.movie-card:hover .movie-poster { transform: scale(1.04); }
.movie-poster {
  transition: transform .45s ease, filter .45s ease;
}
.floating-shadow {
  box-shadow: 0 24px 70px rgba(15, 23, 42, 0.16);
}
.hero-shell {
  background:
    linear-gradient(135deg, rgba(255,255,255,.78), rgba(255,255,255,.46)),
    radial-gradient(circle at top left, rgba(244,114,182,.16), transparent 40%),
    radial-gradient(circle at bottom right, rgba(59,130,246,.12), transparent 38%);
  backdrop-filter: blur(16px);
}
.glass-panel {
  background: rgba(255,255,255,.68);
  backdrop-filter: blur(12px);
}
.poster-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}
.poster-tile {
  border-radius: 1.5rem;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.8);
  box-shadow: 0 18px 45px rgba(15,23,42,.12);
  transform: translateZ(0);
}
.poster-tile img { width: 100%; height: 100%; object-fit: cover; display: block; }
.detail-prose p { margin: 0 0 1rem; line-height: 1.9; color: #374151; }
.detail-prose strong { color: #111827; }
.player-shell {
  border-radius: 28px;
  overflow: hidden;
  background: #020617;
  box-shadow: 0 26px 70px rgba(15,23,42,.28);
}
.player-shell video {
  width: 100%;
  aspect-ratio: 16 / 9;
  display: block;
  background: #020617;
}
.btn-soft {
  background: linear-gradient(135deg, rgba(244,63,94,.10), rgba(59,130,246,.08));
  border: 1px solid rgba(244,63,94,.14);
}
.sidebar-link:hover { transform: translateX(2px); }
@media (max-width: 640px) {
  .poster-grid { grid-template-columns: 1fr 1fr; }
}
