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%);
    }