[v-cloak] {
      display: none !important;
    }

    html {
      width: 100%;
      max-width: 100vw;
      overflow-x: hidden;
      box-sizing: border-box;
    }

    body {
      width: 100%;
      max-width: 100vw;
      overflow-x: hidden;
      margin: 0;
      padding: 0;
      background-color: #0b0d12;
      color: #f3f4f6;
      font-family: 'Plus Jakarta Sans', sans-serif;
      -webkit-text-size-adjust: 100%;
      box-sizing: border-box;
      position: relative;
    }

    #app {
      width: 100%;
      max-width: 100vw;
      overflow-x: hidden;
      box-sizing: border-box;
    }

    main {
      width: 100%;
      max-width: 100vw;
      overflow-x: hidden;
      box-sizing: border-box;
    }

    *, *::before, *::after {
      box-sizing: border-box;
    }
    
    /* Custom Scrollbar */
    ::-webkit-scrollbar {
      width: 8px;
      height: 8px;
    }
    ::-webkit-scrollbar-track {
      background: #0b0d12;
    }
    ::-webkit-scrollbar-thumb {
      background: #1c202e;
      border-radius: 4px;
    }
    ::-webkit-scrollbar-thumb:hover {
      background: #e50914;
    }

    .glass-header {
      background: rgba(20, 23, 33, 0.88);
      backdrop-filter: blur(16px);
      -webkit-backdrop-filter: blur(16px);
    }

    .poster-overlay {
      background: linear-gradient(to top, rgba(11, 13, 18, 0.95) 0%, rgba(11, 13, 18, 0.2) 60%, transparent 100%);
    }

    .modal-backdrop {
      background: rgba(0, 0, 0, 0.85);
      backdrop-filter: blur(8px);
    }

    input, textarea, select, [contenteditable="true"] {
      user-select: text !important;
      -webkit-user-select: text !important;
    }

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

    .known-for-carousel {
      scrollbar-width: thin;
      scrollbar-color: rgba(255, 255, 255, 0.2) transparent;
      -webkit-overflow-scrolling: touch;
    }
    .known-for-carousel::-webkit-scrollbar {
      height: 6px;
    }
    .known-for-carousel::-webkit-scrollbar-track {
      background: transparent;
    }
    .known-for-carousel::-webkit-scrollbar-thumb {
      background: rgba(255, 255, 255, 0.2);
      border-radius: 9999px;
    }
    .known-for-carousel::-webkit-scrollbar-thumb:hover {
      background: rgba(229, 9, 20, 0.8);
    }
    .known-for-card {
      flex: 0 0 auto !important;
      width: 140px !important;
    }

    .cast-carousel {
      display: flex;
      overflow-x: auto;
      gap: 1.2rem;
      scroll-behavior: smooth;
      padding-bottom: 0.5rem;
      -webkit-overflow-scrolling: touch;
      scrollbar-width: thin;
      scrollbar-color: rgba(255, 255, 255, 0.2) transparent;
    }
    .cast-carousel::-webkit-scrollbar {
      height: 6px;
    }
    .cast-carousel::-webkit-scrollbar-track {
      background: transparent;
    }
    .cast-carousel::-webkit-scrollbar-thumb {
      background: rgba(255, 255, 255, 0.2);
      border-radius: 9999px;
    }
    .cast-carousel::-webkit-scrollbar-thumb:hover {
      background: rgba(229, 9, 20, 0.8);
    }
    .cast-card {
      flex: 0 0 auto !important;
      width: 112px !important;
    }

    .seasons-carousel, .episodes-carousel, .cast-carousel, .famous-carousel, .known-for-carousel {
      display: flex;
      overflow-x: auto;
      gap: 1rem;
      padding-bottom: 0.5rem;
      -webkit-overflow-scrolling: touch;
      scrollbar-width: thin;
      scrollbar-color: rgba(255, 255, 255, 0.2) transparent;
      scroll-behavior: smooth;
    }
    .seasons-carousel::-webkit-scrollbar, .episodes-carousel::-webkit-scrollbar {
      height: 5px;
    }
    .seasons-carousel::-webkit-scrollbar-track, .episodes-carousel::-webkit-scrollbar-track {
      background: transparent;
    }
    .seasons-carousel::-webkit-scrollbar-thumb, .episodes-carousel::-webkit-scrollbar-thumb {
      background: rgba(255, 255, 255, 0.2);
      border-radius: 9999px;
    }
    .seasons-carousel::-webkit-scrollbar-thumb:hover, .episodes-carousel::-webkit-scrollbar-thumb:hover {
      background: rgba(229, 9, 20, 0.8);
    }
    .season-card {
      flex: 0 0 auto !important;
      width: 120px !important;
      transform: translateZ(0);
      backface-visibility: hidden;
    }
    .episode-card {
      flex: 0 0 auto !important;
      width: 220px !important;
      transform: translateZ(0);
      backface-visibility: hidden;
    }
    @media (min-width: 640px) {
      .season-card {
        width: 135px !important;
      }
      .episode-card {
        width: 260px !important;
      }
    }
    @media (min-width: 1024px) {
      .season-card {
        width: 145px !important;
      }
      .episode-card {
        width: 290px !important;
      }
    }

    /* Mobile & Desktop Video Players & Controls */
    .art-video-player {
      border-radius: 0 0 1rem 1rem !important;
      touch-action: manipulation;
    }
    .art-video-player .art-controls-right {
      padding-right: 8px !important;
      display: flex !important;
      align-items: center !important;
      gap: 3px !important;
    }
    /* Subtitle cues must not inherit ArtPlayer's transient controls state.
       Some fullscreen browsers briefly drop art-subtitle-show while updating
       the active cue; keeping non-empty cues visible prevents mouse-dependent
       subtitles without forcing the controls or timeline back on screen. */
    .art-video-player .art-subtitle:not(:empty) {
      display: flex !important;
      opacity: 1 !important;
      visibility: visible !important;
      pointer-events: none !important;
    }
    /* Never expose a progress bar while the controls are idle. */
    .art-video-player:not(.art-control-show) .art-progress,
    .art-video-player:not(.art-control-show) .art-progress-indicator {
      opacity: 0 !important;
      visibility: hidden !important;
      pointer-events: none !important;
    }
    .art-control-fullscreenWeb,
    .art-control-fullscreen,
    .art-control-backward10,
    .art-control-forward10 {
      display: inline-flex !important;
      cursor: pointer !important;
    }
    /* ArtPlayer: compact controls only on narrow phones; keep every action available. */
    @media (max-width: 640px) {
      .art-video-player {
        --art-control-height: 36px !important;
        --art-control-icon-size: 24px !important;
      }
      .art-video-player .art-controls-right {
        padding-right: 4px !important;
        gap: 2px !important;
      }
      .art-video-player .art-controls-left {
        padding-left: 4px !important;
      }
      .art-video-player .art-control-time {
        padding: 0 2px !important;
        font-size: 11px !important;
      }
    }
    @media (max-width: 390px) {
      .art-video-player {
        --art-control-height: 30px !important;
        --art-control-icon-size: 20px !important;
      }
    }

    /* Universal Smooth Page & Tab Crossfade Transitions */
    .page-fade-enter-active,
    .page-fade-leave-active {
      transition: opacity 0.22s ease-in-out, transform 0.22s cubic-bezier(0.16, 1, 0.3, 1);
    }
    .page-fade-enter-from {
      opacity: 0;
      transform: translateY(6px);
    }
    .page-fade-leave-to {
      opacity: 0;
      transform: translateY(-4px);
    }

    .tab-fade-enter-active,
    .tab-fade-leave-active {
      transition: opacity 0.18s ease-out;
    }
    .tab-fade-enter-from,
    .tab-fade-leave-to {
      opacity: 0;
    }

    .animate-fadeIn {
      animation: smoothFadeIn 0.22s ease-out forwards;
    }
    @keyframes smoothFadeIn {
      from { opacity: 0; }
      to { opacity: 1; }
    }

    /* Prevent raw uncompiled template flashes */
    [v-cloak] {
      display: none !important;
    }