body {
      -webkit-tap-highlight-color: transparent;
      background-color: #08080a;
      color: #f4f4f5;
      overflow-x: hidden;
    }

    .no-scrollbar::-webkit-scrollbar { display: none; }
    .no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

    /* CSS Scroll Snapping for horizontal rows */
    .row-scroll-container {
      scroll-behavior: smooth;
      -webkit-overflow-scrolling: touch;
      scroll-snap-type: x mandatory;
      padding-top: 1.5rem;
      padding-bottom: 1.5rem;
      margin-top: -1rem;
      margin-bottom: -1rem;
    }

    /* Refined Card & Hover Effects */
    .poster-card, .vertical-preview-card, .live-card {
      scroll-snap-align: start;
      transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.4s ease, border-color 0.4s ease;
      will-change: transform, box-shadow;
      position: relative;
      z-index: 1;
      transform: translateZ(0);
    }
    
    .poster-card:hover, .vertical-preview-card:hover, .live-card:hover {
      transform: scale(1.07) translateY(-6px);
      border: 2px solid rgba(229, 9, 20, 0.8);
      border-color: rgba(229, 9, 20, 0.8);
      z-index: 50;
    }

    .live-card:hover {
      border-color: rgba(0, 230, 118, 0.6);
      box-shadow: 0 25px 50px rgba(0, 0, 0, 0.9), 0 0 30px rgba(0, 230, 118, 0.3);
    }

    /* Ambient Modal Glow & iPad Scroll Containment */
    .modal-ambient-glow {
      box-shadow: 0 0 140px 40px rgba(229, 9, 20, 0.22), 0 30px 60px -15px rgba(0, 0, 0, 0.95);
    }

    /* Shimmering Skeletons */
    .shimmer {
      background: linear-gradient(90deg, #121216 25%, #1d1d26 50%, #121216 75%);
      background-size: 200% 100%;
      animation: loading-shimmer 1.5s infinite linear;
    }
    @keyframes loading-shimmer {
      0% { background-position: 200% 0; }
      100% { background-position: -200% 0; }
    }

    /* Modal Overlay & Touch Responsiveness */
    .modal-overlay { 
      opacity: 0; pointer-events: none; 
      transition: opacity 0.35s cubic-bezier(0.16, 1, 0.3, 1), backdrop-filter 0.35s ease;
      backdrop-filter: blur(0px);
      -webkit-backdrop-filter: blur(0px);
      touch-action: none;
    }
    .modal-overlay.show { 
      opacity: 1; 
      pointer-events: auto; 
      backdrop-filter: blur(20px); 
      -webkit-backdrop-filter: blur(20px);
      touch-action: auto;
    }
    
    .modal-content { 
      transform: translateY(100%) scale(0.98); opacity: 0; 
      transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.35s ease;
      -webkit-overflow-scrolling: touch;
      overscroll-behavior: contain;
    }
    
    /* Responsive iPad / Tablet Fixes */
    #sheetBody {
      max-height: 88vh;
      max-height: 88dvh;
    }

    @media (min-width: 768px) { 
      .modal-content { transform: translateY(40px) scale(0.95); } 
    }

    @media (min-width: 768px) and (max-width: 1024px) {
      #sheetBody {
        width: 92vw !important;
        max-height: 85vh !important;
        max-height: 85dvh !important;
      }
    }

    .modal-overlay.show .modal-content { transform: translateY(0) scale(1); opacity: 1; }

    .player-layer { opacity: 0; pointer-events: none; transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1); }
    .player-layer.active { opacity: 1; pointer-events: auto; }

    .nav-gradient { background: linear-gradient(to bottom, rgba(8,8,10,0.98) 0%, rgba(8,8,10,0.7) 70%, rgba(8,8,10,0) 100%); }

    .hero-mask {
      mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 35%, rgba(0,0,0,0.6) 75%, rgba(0,0,0,0) 100%);
      -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 35%, rgba(0,0,0,0.6) 75%, rgba(0,0,0,0) 100%);
    }

    .glass-btn {
      background: rgba(255, 255, 255, 0.08);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      border: 1px solid rgba(255, 255, 255, 0.15);
    }
    .glass-btn:hover {
      background: rgba(255, 255, 255, 0.18);
      border-color: rgba(255, 255, 255, 0.4);
      transform: translateY(-2px);
      box-shadow: 0 10px 25px rgba(0,0,0,0.5);
    }

    .modal-hero-gradient {
      background: linear-gradient(to top, #121216 0%, rgba(18, 18, 22, 0.8) 40%, rgba(0, 0, 0, 0.25) 100%);
    }
 /* --- Base Card Styles --- */
.poster-card, 
.vertical-preview-card, 
.live-card {
  scroll-snap-align: start;
  /* Smooth transition for transform and shadows */
  transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), 
              box-shadow 0.4s ease, 
              border-color 0.4s ease;
  will-change: transform, box-shadow;
  position: relative;
  z-index: 1;
  transform: translateZ(0); /* Hardware acceleration */
  border: 1px solid transparent; 
  border-radius: 0.5rem; /* Equivalent to Tailwind's rounded-lg */
  background-color: #08080a;
}

/* --- Premium Hover State --- */
.poster-card:hover, 
.vertical-preview-card:hover, 
.live-card:hover {
  /* Slightly softer scale than 1.07 for a more natural feel */
  transform: scale(1.05) translateY(-4px);
  z-index: 20;
  
  /* Subtle, semi-transparent white border instead of harsh red/green */
  border-color: rgba(255, 255, 255, 0.2);
  
  /* Deep, neutral drop-shadow to lift the card off the page */
  box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.8), 
              0 0 15px rgba(255, 255, 255, 0.05);
}@supports (padding-bottom: env(safe-area-inset-bottom)) {
  .pb-safe {
    padding-bottom: calc(0.75rem + env(safe-area-inset-bottom));
  }
}
/* Glassmorphism Refined Styling */
.glass-btn {
  background: rgba(255, 255, 255, 0.08) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37) !important;
}

.glass-btn:hover {
  background: rgba(255, 255, 255, 0.18) !important;
  border-color: rgba(255, 255, 255, 0.3) !important;
}




/* --- Premium Active Navigation Tab --- */
.nav-tab-active {
  background: rgba(255, 255, 255, 0.12) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  color: #ffffff !important;
  box-shadow: inset 0 0 10px rgba(255, 255, 255, 0.05), 0 4px 12px rgba(0, 0, 0, 0.2) !important;
  border-radius: 0.75rem !important; 
  padding: 0.5rem 1rem !important;
}

/* --- Updated Full-Screen Mobile Modal Setup --- */
#sheetBody {
  width: 100%;
  height: 100%;
  max-height: 100vh;
  max-height: 100dvh;
  border-radius: 0;
  border: none;
}

/* Modal Content Animation Adjustment for Full Screen Mobile */
.modal-content { 
  transform: translateY(100%); 
  opacity: 0; 
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

.modal-overlay.show .modal-content { 
  transform: translateY(0); 
  opacity: 1; 
}

/* Tablet & Desktop Layout Overrides */
@media (min-width: 768px) { 
  #sheetBody {
    width: 920px !important;
    height: auto !important;
    max-height: 88vh !important;
    max-height: 88dvh !important;
    border-radius: 1.5rem !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
  }
  
  .modal-content { 
    transform: translateY(40px) scale(0.95); 
  }

  .modal-overlay.show .modal-content { 
    transform: translateY(0) scale(1); 
  }
}