/* SEARCH BAR IN NAVBAR */
 .app-splash {
     position: fixed;
     inset: 0;
     background: #000;
     display: flex;
     align-items: center;
     justify-content: center;
     z-index: 3000;
     opacity: 1;
     transition: opacity 0.45s ease;
 }

 .app-splash.is-hidden {
     opacity: 0;
     pointer-events: none;
 }

 .app-splash-text {
     color: #e50914;
     font-family: 'Netflix Sans Variable', 'Helvetica Neue', Helvetica, Arial, sans-serif;
     font-weight: 800;
     font-size: clamp(28px, 6vw, 64px);
     letter-spacing: 0.8px;
     text-transform: uppercase;
     display: inline-flex;
     align-items: baseline;
     justify-content: center;
     white-space: nowrap;
     text-shadow: 0 0 12px rgba(229, 9, 20, 0.25);
 }

 .splash-m {
     display: inline-block;
     transform: scale(0.28);
     opacity: 0;
     filter: blur(2px);
     animation: splashZoomIn 1.85s cubic-bezier(0.18, 0.86, 0.2, 1) 0.05s forwards;
 }

 .splash-rest {
     display: inline-block;
     margin-left: 2px;
     overflow: hidden;
     max-width: 0;
     transform: translateX(-36px);
     opacity: 0;
     filter: blur(1px);
     animation: splashRestSlide 3.3s cubic-bezier(0.18, 0.9, 0.18, 1) 1.45s forwards;
 }

 @keyframes splashZoomIn {
     0% {
         transform: scale(0.28);
         opacity: 0;
         filter: blur(2px);
     }

     65% {
         opacity: 1;
     }

     100% {
         transform: scale(1);
         opacity: 1;
         filter: blur(0);
     }
 }

 @keyframes splashRestSlide {
     0% {
         max-width: 0;
         transform: translateX(-36px);
         opacity: 0;
         filter: blur(1px);
     }

     100% {
         max-width: 28ch;
         transform: translateX(0);
         opacity: 1;
         filter: blur(0);
     }
 }

 @media (prefers-reduced-motion: reduce) {
     .splash-m,
     .splash-rest {
         animation: none;
         transform: none;
         opacity: 1;
     }
 }

 .navbar-search-box {
     position: relative;
     display: flex;
     align-items: center;
     margin-left: 24px;
     transition: width 0.35s cubic-bezier(0.4, 0, 0.2, 1);
     width: 0;
     overflow: hidden;
     background: transparent;
 }

 .navbar-search-box.active {
     width: 320px;
     background: #141414;
 }

 .navbar-search-input {
     background: #222;
     border: none;
     outline: none;
     color: #fff;
     font-size: 16px;
     border-radius: 2px;
     padding: 8px 36px 8px 36px;
     width: 100%;
     transition: background 0.2s;
 }

 .navbar-search-input:focus {
     background: #333;
 }

 .navbar-search-icon {
     position: absolute;
     left: 8px;
     top: 50%;
     transform: translateY(-50%);
     color: #b3b3b3;
     width: 20px;
     height: 20px;
     pointer-events: none;
 }

 .navbar-search-close {
     position: absolute;
     right: 8px;
     top: 50%;
     transform: translateY(-50%);
     color: #b3b3b3;
     background: none;
     border: none;
     font-size: 22px;
     cursor: pointer;
     display: none;
 }

 .navbar-search-box.active .navbar-search-close {
     display: block;
 }

 /* SEARCH RESULTS SECTION */
 .search-results-section {
     animation: none;
     display: none;
     padding: 100px 4% 40px 4%;
     background: #141414;
     min-height: 100vh;
 }

 @keyframes fadeIn {
     from {
         opacity: 0;
         transform: translateY(10px);
     }

     to {
         opacity: 1;
         transform: translateY(0);
     }
 }

 .search-results-container {
     flex: 1;
     overflow-y: auto;
     padding: 24px 56px;
 }

 .search-results {
     display: grid;
     grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
     gap: 24px;
     padding-bottom: 60px;
 }

 .search-result-item {
     aspect-ratio: 2/3;
     border-radius: 4px;
     position: relative;
     overflow: hidden;
     cursor: pointer;
     transition: transform 0.3s ease, box-shadow 0.3s ease;
     background: #2f2f2f;
     content-visibility: auto;
     contain-intrinsic-size: 220px 330px;
 }

 .search-result-item:hover {
     transform: scale(1.05);
     box-shadow: 0 10px 20px rgba(0, 0, 0, 0.5);
     z-index: 5;
 }

 .search-result-item.agent-targeted {
     transform: scale(1.045);
     box-shadow: 0 0 0 2px rgba(229, 9, 20, 0.9), 0 10px 24px rgba(0, 0, 0, 0.56);
     z-index: 6;
 }

 .search-result-image {
     width: 100%;
     height: 100%;
     object-fit: cover;
     display: block;
 }

 .search-result-overlay {
     position: absolute;
     bottom: 0;
     left: 0;
     right: 0;
     background: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.8) 100%);
     padding: 20px 12px 12px;
     display: flex;
     flex-direction: column;
     justify-content: flex-end;
     opacity: 0;
     visibility: hidden;
     pointer-events: none;
     transition: opacity 0.2s ease;
 }

 .search-result-item:hover .search-result-overlay,
 .search-result-item:focus-visible .search-result-overlay,
 .search-result-item:focus-within .search-result-overlay,
 .search-result-item.agent-targeted .search-result-overlay {
     opacity: 1;
     visibility: visible;
 }

 .mobile-install-popup {
     position: fixed;
     left: 0;
     right: 0;
     top: 0;
     bottom: 0;
     padding: 24px 16px;
     z-index: 1200;
     display: none;
     align-items: center;
     justify-content: center;
     background: rgba(0, 0, 0, 0.45);
     backdrop-filter: blur(6px);
 }

 .mobile-install-popup.is-visible {
     display: flex;
 }

 .mobile-install-card {
     position: relative;
     background: radial-gradient(circle at top left, rgba(43, 64, 255, 0.35) 0%, rgba(0, 194, 255, 0.08) 36%, rgba(12, 12, 12, 0.98) 70%), #0b0b0b;
     border: 1px solid rgba(255, 255, 255, 0.18);
     border-radius: 18px;
     padding: 18px 16px 16px;
     display: flex;
     flex-direction: column;
     gap: 12px;
     box-shadow: 0 16px 30px rgba(0, 0, 0, 0.5);
     overflow: hidden;
 }

 .mobile-install-badge {
     align-self: flex-start;
     background: rgba(255, 255, 255, 0.12);
     color: #dfe7ff;
     padding: 4px 10px;
     border-radius: 999px;
     font-size: 11px;
     letter-spacing: 1.4px;
     text-transform: uppercase;
 }

 .mobile-install-close {
     position: absolute;
     top: 10px;
     right: 12px;
     background: rgba(255, 255, 255, 0.08);
     border: 1px solid rgba(255, 255, 255, 0.12);
     color: #f2f2f2;
     width: 28px;
     height: 28px;
     border-radius: 50%;
     font-size: 18px;
     line-height: 26px;
     cursor: pointer;
 }

.mobile-install-text {
    font-size: 15px;
    color: #eef1ff;
    line-height: 1.45;
}

.mobile-install-perks {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    padding: 6px 4px 2px;
}

.mobile-install-perk {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    color: #d7e3ff;
    font-size: 11px;
    letter-spacing: 0.2px;
    text-transform: uppercase;
    opacity: 0.9;
}

.mobile-install-perk svg {
    width: 24px;
    height: 24px;
    fill: none;
    stroke: #d7e3ff;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.mobile-install-btn {
    background: linear-gradient(135deg, #1c4cff 0%, #00c2ff 100%);
    border: none;
    color: #fff;
     font-weight: 700;
     font-size: 14px;
     padding: 12px 16px;
     border-radius: 12px;
     cursor: pointer;
     text-transform: uppercase;
     letter-spacing: 0.7px;
     display: inline-flex;
     align-items: center;
     justify-content: center;
     gap: 8px;
 }

.mobile-install-btn-icon {
    font-size: 15px;
}

@media (max-width: 360px) {
    .mobile-install-perks {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        row-gap: 12px;
    }
}

 @media (min-width: 769px) {
     .mobile-install-popup {
         display: none !important;
     }
 }

 .search-result-title {
     color: #fff;
     font-size: 16px;
     font-weight: 600;
     margin-bottom: 4px;
     line-height: 1.3;
 }

 .search-result-meta {
     display: flex;
     align-items: center;
     gap: 8px;
     font-size: 13px;
     color: #b3b3b3;
 }

 .search-result-badge {
     background: #e50914;
     color: white;
     padding: 2px 6px;
     border-radius: 2px;
     font-size: 11px;
     font-weight: 600;
 }

 .search-result-badge.coming {
     background: rgba(230, 230, 230, 0.3);
     border: 1px solid rgba(230, 230, 230, 0.5);
 }

 .search-result-badge.top10 {
     background: #ffc72d;
     color: #000;
 }

 .search-no-results {
     color: #b3b3b3;
     font-size: 18px;
     margin: 100px auto 0 auto;
     width: 100%;
     text-align: center;
     padding: 40px;
 }

 .watchlist-section {
     display: none;
     padding: 100px 4% 60px 4%;
     background: #141414;
     min-height: 100vh;
     animation: none;
 }

 .library-section {
     display: none;
     padding: 100px 4% 60px 4%;
     background: #141414;
     min-height: 100vh;
     animation: none;
 }

 .page-view {
     opacity: 1;
     transform: translateY(0) scale(1);
     filter: blur(0);
     transition: opacity 0.42s cubic-bezier(0.22, 1, 0.36, 1),
         transform 0.48s cubic-bezier(0.22, 1, 0.36, 1),
         filter 0.42s cubic-bezier(0.22, 1, 0.36, 1);
     will-change: opacity, transform, filter;
 }

 .page-view.view-enter,
 .page-view.view-leave {
     opacity: 0;
     transform: translateY(14px) scale(0.992);
     filter: blur(1.5px);
 }

 @media (prefers-reduced-motion: reduce) {
     .page-view {
         transition: none !important;
     }
 }

 .watchlist-header {
     display: flex;
     align-items: center;
     justify-content: space-between;
     margin-bottom: 28px;
 }

 .library-header {
     margin-bottom: 28px;
 }

 .watchlist-title {
     font-size: 32px;
     font-weight: 700;
     color: #fff;
     letter-spacing: -0.5px;
 }

 .library-title {
     font-size: 32px;
     font-weight: 700;
     color: #fff;
     letter-spacing: -0.5px;
 }

 .library-subtitle {
     margin-top: 8px;
     color: #b3b3b3;
     font-size: 14px;
 }

 .watchlist-grid {
     display: grid;
     grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
     gap: 24px;
     padding-bottom: 60px;
 }

 .library-grid {
     display: grid;
     grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
     gap: 24px;
     padding-bottom: 60px;
 }

 .library-actions {
     display: flex;
     justify-content: center;
     padding-bottom: 50px;
 }

 .library-load-more {
     background: #2a2a2a;
     color: #fff;
     border: 1px solid #555;
     border-radius: 4px;
     padding: 10px 18px;
     cursor: pointer;
     font-size: 14px;
     font-weight: 600;
 }

 .library-load-more:hover {
     background: #3a3a3a;
 }

 .watchlist-empty {
     color: #b3b3b3;
     font-size: 18px;
     text-align: center;
     margin-top: 80px;
 }

 .library-empty {
     color: #b3b3b3;
     font-size: 18px;
     text-align: center;
     margin-top: 80px;
 }

 .search-suggestions {
     display: flex;
     flex-wrap: wrap;
     gap: 12px;
     margin-top: 20px;
     margin-bottom: 40px;
     padding: 0 56px 20px 56px;
     border-bottom: 1px solid #333;
 }

 .search-suggestion {
     background: #333;
     color: #fff;
     padding: 8px 16px;
     border-radius: 20px;
     font-size: 14px;
     cursor: pointer;
     transition: background 0.2s;
 }

 .search-suggestion:hover {
     background: #e50914;
 }

 .search-suggestion.is-active {
     background: #e50914;
 }

 @media (max-width: 1400px) {

     .search-header,
     .search-results {
         padding-left: 32px;
         padding-right: 32px;
     }
 }

 @media (max-width: 1024px) {
     .search-result-item {
         width: 180px;
         height: 270px;
     }

     .navbar-search-box.active {
         width: 220px;
     }
 }

 @media (max-width: 768px) {

     .search-header,
     .search-results {
         padding-left: 12px;
         padding-right: 12px;
     }

     .search-result-item {
         width: 140px;
         height: 210px;
     }

     .navbar-search-box.active {
         width: 120px;
     }
 }

 * {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
 }

 html,
 body {

     background-color: #141414;
     color: white;
     font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', sans-serif;
     overflow-x: hidden;
 }

 body.loading::before {
     content: '';
     position: fixed;
     z-index: 2000;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
     background: rgba(20, 20, 20, 0.95);
     display: flex;
     align-items: center;
     justify-content: center;
     pointer-events: none;
 }

 body.loading .loader {
     display: flex;
 }

 .loader {
     display: none;
     position: fixed;
     z-index: 3000;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
     flex-direction: column;
     align-items: center;
     justify-content: center;
 }

 .loader .spinner {
     border: 6px solid #333;
     border-top: 6px solid #e50914;
     border-radius: 50%;
     width: 60px;
     height: 60px;
     animation: spin 1s linear infinite;
 }

 .loader span {
     margin-top: 16px;
     font-size: 18px;
     color: #fff;
     letter-spacing: 2px;
 }

 @keyframes spin {
     0% {
         transform: rotate(0deg);
     }

     100% {
         transform: rotate(360deg);
     }
 }

 /* NAVBAR */
 .navbar {
     position: fixed;
     top: 0;
     left: 0;
     right: 0;
     width: 100%;
     height: 68px;
     background: linear-gradient(180deg, rgba(0, 0, 0, 0.7) 0%, transparent 100%);
     display: flex;
     align-items: center;
     justify-content: space-between;
     padding: 0 56px;
     z-index: 1000;
     transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
     will-change: background, box-shadow;
 }

 .navbar.scrolled {
     background: #141414;
     box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
 }

 .navbar-left {
     display: flex;
     align-items: center;
     gap: 40px;
 }

 .netflix-logo {
     display: inline-flex;
     align-items: center;
     line-height: 1;
     cursor: pointer;
 }

 .netflix-logo img {
     display: block;
     width: auto;
     height: clamp(26px, 2.1vw, 34px);
     object-fit: contain;
 }

 .navbar-menu {
     display: flex;
     gap: 24px;
     list-style: none;
 }

 .navbar-menu a {
     color: #f5f5f1;
     text-decoration: none;
     font-size: 14px;
     font-weight: 500;
     cursor: pointer;
     transition: color 0.2s ease;
 }

 .navbar-menu a:hover {
     color: #b3b3b0;
 }

 .navbar-right {
     display: flex;
     align-items: center;
     gap: 20px;
 }

 .mobile-home-title,
 .mobile-tabs {
     display: none;
 }

 .navbar-right svg {
     width: 24px;
     height: 24px;
     cursor: pointer;
     transition: color 0.2s ease;
 }

 .nav-icon-btn {
     display: inline-flex;
     align-items: center;
     justify-content: center;
     width: 24px;
     height: 24px;
     padding: 0;
     border: none;
     background: transparent;
     color: inherit;
     cursor: pointer;
     transition: color 0.2s ease;
 }

 .nav-icon-btn svg {
     width: 24px;
     height: 24px;
 }

 .nav-icon-btn:hover {
     color: #b3b3b0;
 }

 #navbarMobileListIcon,
 #navbarMobileWatchlistIcon {
     display: none;
 }

 .navbar-right svg:hover {
     color: #b3b3b0;
 }

 .profile-avatar {
     width: 32px;
     height: 32px;
     background: linear-gradient(135deg, #f79646, #e50914);
     border-radius: 4px;
     cursor: pointer;
     display: flex;
     align-items: center;
     justify-content: center;
     font-weight: bold;
     font-size: 12px;
 }

 .profile-avatar.agent-icon {
     border: none;
     color: #fff;
     padding: 0;
 }

 .profile-avatar.agent-icon svg {
     width: 19px;
     height: 19px;
 }

 body.voice-modal-open {
     overflow: hidden;
 }

 .voice-search-modal {
     position: fixed;
     inset: 0;
     z-index: 1800;
     display: none;
     align-items: center;
     justify-content: center;
     padding: 24px;
     background: rgba(0, 0, 0, 0.78);
     backdrop-filter: blur(4px);
     -webkit-backdrop-filter: blur(4px);
 }

 .voice-search-modal.open {
     display: flex;
 }

 .voice-search-dialog {
     width: min(560px, 92vw);
     border-radius: 18px;
     border: 1px solid rgba(255, 255, 255, 0.12);
     background: radial-gradient(circle at 20% 10%, rgba(229, 9, 20, 0.2), transparent 45%),
         linear-gradient(160deg, #141414 0%, #1e1e1e 100%);
     box-shadow: 0 26px 60px rgba(0, 0, 0, 0.6);
     padding: 26px 26px 24px 26px;
     position: relative;
 }

 .voice-close-btn {
     position: absolute;
     top: 12px;
     right: 12px;
     width: 34px;
     height: 34px;
     border-radius: 50%;
     border: 1px solid rgba(255, 255, 255, 0.22);
     background: rgba(255, 255, 255, 0.06);
     color: #fff;
     font-size: 22px;
     line-height: 1;
     cursor: pointer;
 }

 .voice-search-title {
     font-size: 28px;
     font-weight: 700;
     letter-spacing: -0.3px;
     margin-bottom: 6px;
 }

 .voice-search-subtitle {
     font-size: 14px;
     color: #b3b3b3;
     margin-bottom: 24px;
 }

 .voice-orb-wrap {
     display: flex;
     justify-content: center;
     margin-bottom: 16px;
 }

 .voice-orb {
     width: 120px;
     height: 120px;
     border-radius: 50%;
     border: 1px solid rgba(255, 255, 255, 0.15);
     background: radial-gradient(circle at 30% 25%, rgba(229, 9, 20, 0.6), rgba(229, 9, 20, 0.15) 52%, rgba(255, 255, 255, 0.04) 100%);
     display: flex;
     align-items: center;
     justify-content: center;
     position: relative;
     box-shadow: 0 10px 30px rgba(229, 9, 20, 0.25);
 }

 .voice-orb::before,
 .voice-orb::after {
     content: '';
     position: absolute;
     border-radius: 50%;
     border: 1px solid rgba(229, 9, 20, 0.28);
     opacity: 0;
     transform: scale(0.95);
 }

 .voice-orb::before {
     inset: -8px;
 }

 .voice-orb::after {
     inset: -16px;
 }

 .voice-search-modal.is-listening .voice-orb::before,
 .voice-search-modal.is-listening .voice-orb::after {
     animation: voicePulse 1.8s ease-out infinite;
 }

 .voice-search-modal.is-listening .voice-orb::after {
     animation-delay: 0.35s;
 }

 .voice-orb svg {
     width: 44px;
     height: 44px;
     color: #fff;
 }

 .voice-status {
     text-align: center;
     font-size: 15px;
     font-weight: 600;
     margin-bottom: 14px;
     color: #f5f5f5;
 }

 .voice-status.error {
     color: #ff9aa0;
 }

 .voice-transcript {
     min-height: 86px;
     border-radius: 12px;
     border: 1px solid rgba(255, 255, 255, 0.12);
     background: rgba(0, 0, 0, 0.22);
     padding: 14px 14px 12px 14px;
     font-size: 15px;
     line-height: 1.5;
     color: #f0f0f0;
     margin-bottom: 18px;
 }

 .voice-transcript.is-placeholder {
     color: #909090;
 }

 .voice-actions {
     display: flex;
     justify-content: center;
     gap: 10px;
 }

 .voice-action-btn {
     border: 1px solid rgba(255, 255, 255, 0.2);
     background: rgba(255, 255, 255, 0.08);
     color: #fff;
     border-radius: 999px;
     padding: 10px 18px;
     font-size: 14px;
     font-weight: 600;
     cursor: pointer;
     min-width: 132px;
 }

 .voice-action-btn.primary {
     background: #e50914;
     border-color: #e50914;
 }

 .voice-action-btn.primary:hover {
     background: #f6131f;
 }

 .voice-action-btn:disabled {
     opacity: 0.55;
     cursor: not-allowed;
 }

 .voice-note {
     margin-top: 14px;
     text-align: center;
     color: #9f9f9f;
     font-size: 12px;
 }

 @keyframes voicePulse {
     0% {
         opacity: 0.65;
         transform: scale(0.95);
     }

     100% {
         opacity: 0;
         transform: scale(1.2);
     }
 }

 @media (max-width: 768px) {
     .voice-search-modal {
         align-items: center;
         padding: 12px 10px calc(12px + env(safe-area-inset-bottom)) 10px;
     }

     .voice-search-dialog {
         width: 100%;
         max-width: 100%;
         max-height: min(88vh, 680px);
         overflow-y: auto;
         border-radius: 16px;
         padding: 20px 18px 18px 18px;
         box-shadow: 0 16px 40px rgba(0, 0, 0, 0.55);
     }

     .voice-close-btn {
         top: 10px;
         right: 10px;
         width: 32px;
         height: 32px;
         font-size: 20px;
     }

     .voice-search-title {
         font-size: clamp(22px, 6.6vw, 26px);
         margin-bottom: 4px;
     }

     .voice-search-subtitle {
         font-size: 13px;
         margin-bottom: 16px;
         max-width: 90%;
     }

     .voice-orb-wrap {
         margin-bottom: 12px;
     }

     .voice-orb {
         width: 96px;
         height: 96px;
     }

     .voice-orb svg {
         width: 36px;
         height: 36px;
     }

     .voice-status {
         font-size: 14px;
         margin-bottom: 10px;
     }

     .voice-transcript {
         min-height: 72px;
         font-size: 14px;
         padding: 12px;
         margin-bottom: 14px;
     }

     .voice-actions {
         flex-direction: column;
         gap: 8px;
     }

     .voice-action-btn {
         width: 100%;
         min-width: 0;
         font-size: 14px;
         padding: 11px 14px;
     }

     .voice-note {
         margin-top: 10px;
         font-size: 11px;
     }
 }

 @media (max-width: 420px),
 (max-height: 650px) {
     .voice-search-modal {
         padding: 8px 8px calc(8px + env(safe-area-inset-bottom)) 8px;
     }

     .voice-search-dialog {
         max-height: 92vh;
         border-radius: 14px;
         padding: 16px 14px 14px 14px;
     }

     .voice-search-subtitle {
         margin-bottom: 12px;
         max-width: 100%;
     }

     .voice-orb {
         width: 84px;
         height: 84px;
     }

     .voice-orb svg {
         width: 32px;
         height: 32px;
     }
 }

 .agent-modal {
     position: fixed;
     inset: 0;
     z-index: 1850;
     display: none;
     align-items: center;
     justify-content: center;
     padding: 20px;
     background: rgba(8, 10, 20, 0.16);
 }

 .agent-modal.open {
     display: flex;
 }

 .agent-dialog {
     width: min(640px, 94vw);
     border-radius: 18px;
     border: 1px solid rgba(255, 255, 255, 0.15);
     background: radial-gradient(circle at 16% 8%, rgba(229, 9, 20, 0.24), transparent 44%),
         linear-gradient(155deg, #151515 0%, #202020 100%);
     box-shadow: 0 24px 60px rgba(0, 0, 0, 0.65);
     padding: 24px 24px 20px 24px;
     position: relative;
 }

 .agent-title {
     font-size: 28px;
     font-weight: 700;
     margin-bottom: 4px;
     letter-spacing: -0.35px;
 }

 .agent-subtitle {
     color: #b5b5b5;
     font-size: 14px;
     margin-bottom: 14px;
 }

 .agent-chat {
     border-radius: 12px;
     border: 1px solid rgba(255, 255, 255, 0.12);
     background: rgba(0, 0, 0, 0.28);
     padding: 12px;
     min-height: 148px;
     max-height: min(44vh, 360px);
     overflow-y: auto;
     margin-bottom: 12px;
 }

 .agent-message {
     font-size: 14px;
     line-height: 1.5;
     margin-bottom: 9px;
 }

 .agent-message:last-child {
     margin-bottom: 0;
 }

 .agent-message.user {
     color: #d3d3d3;
 }

 .agent-message.bot {
     color: #f0f0f0;
 }

 .agent-status {
     font-size: 13px;
     color: #a8a8a8;
     margin-bottom: 12px;
 }

 .agent-actions {
     display: flex;
     gap: 10px;
 }

 .agent-btn {
     border-radius: 999px;
     border: 1px solid rgba(255, 255, 255, 0.24);
     background: rgba(255, 255, 255, 0.08);
     color: #fff;
     padding: 10px 16px;
     font-size: 14px;
     font-weight: 600;
     cursor: pointer;
     min-width: 130px;
 }

 .agent-btn.primary {
     background: #e50914;
     border-color: #e50914;
 }

 .agent-btn:disabled {
     opacity: 0.58;
     cursor: not-allowed;
 }

 .agent-close-btn {
     position: absolute;
     top: 12px;
     right: 12px;
     width: 34px;
     height: 34px;
     border-radius: 50%;
     border: 1px solid rgba(255, 255, 255, 0.22);
     background: rgba(255, 255, 255, 0.06);
     color: #fff;
     font-size: 22px;
     line-height: 1;
     cursor: pointer;
 }

 .agent-fx {
     position: fixed;
     inset: 0;
     z-index: 1840;
     pointer-events: none;
     display: none;
     overflow: hidden;
 }

 body.agent-live .agent-fx {
     display: block;
 }

 .agent-fx-stars {
     position: absolute;
     inset: 0;
 }

 .agent-fx-star {
     position: absolute;
     width: 2px;
     height: 2px;
     border-radius: 50%;
     background: rgba(255, 255, 255, 0.9);
     box-shadow: 0 0 8px rgba(255, 255, 255, 0.45);
     animation: agentStarBlink 2.2s ease-in-out infinite;
 }

 .agent-fx-emoji {
     position: absolute;
     right: clamp(14px, 3vw, 30px);
     bottom: clamp(14px, 3vw, 28px);
     width: clamp(42px, 6vw, 54px);
     height: clamp(42px, 6vw, 54px);
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: clamp(24px, 4.2vw, 30px);
     background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.26), rgba(40, 40, 60, 0.45));
     border: 1px solid rgba(255, 255, 255, 0.3);
     box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35), 0 0 22px rgba(93, 201, 255, 0.28);
     animation: agentEmojiFloat 2.8s ease-in-out infinite;
 }

 .agent-fx-emoji.entry {
     animation: agentEmojiCenterEntry 1.85s cubic-bezier(0.16, 0.86, 0.24, 1) 1,
         agentEmojiFloat 2.8s ease-in-out 1.85s infinite;
 }

 .agent-fx-bubble {
     position: absolute;
     right: calc(clamp(14px, 3vw, 30px) + clamp(42px, 6vw, 54px) + 10px);
     bottom: calc(clamp(14px, 3vw, 28px) + 6px);
     max-width: min(62vw, 360px);
     background: rgba(12, 16, 28, 0.9);
     border: 1px solid rgba(255, 255, 255, 0.26);
     color: #f7f7f7;
     border-radius: 14px;
     padding: 10px 12px;
     font-size: 13px;
     line-height: 1.35;
     box-shadow: 0 10px 22px rgba(0, 0, 0, 0.35);
     opacity: 0;
     transform: translateY(10px) scale(0.98);
     transition: opacity 0.26s ease, transform 0.26s ease;
     pointer-events: none;
     white-space: normal;
     word-break: break-word;
 }

 .agent-fx-bubble.show {
     opacity: 1;
     transform: translateY(0) scale(1);
 }

 .agent-fx-bubble::after {
     content: '';
     position: absolute;
     right: -7px;
     bottom: 14px;
     width: 12px;
     height: 12px;
     background: rgba(12, 16, 28, 0.9);
     border-right: 1px solid rgba(255, 255, 255, 0.26);
     border-top: 1px solid rgba(255, 255, 255, 0.26);
     transform: rotate(45deg);
 }

 .agent-fx-bubble.typing::after {
     animation: agentBubblePulse 1.05s ease-in-out infinite;
 }

 @keyframes agentStarBlink {
     0% {
         opacity: 0.2;
         transform: scale(0.85);
     }

     50% {
         opacity: 1;
         transform: scale(1.25);
     }

     100% {
         opacity: 0.25;
         transform: scale(0.9);
     }
 }

 @keyframes agentEmojiFloat {
     0% {
         transform: translateY(0px);
     }

     50% {
         transform: translateY(-8px);
     }

     100% {
         transform: translateY(0px);
     }
 }

 @keyframes agentEmojiCenterEntry {
     0% {
         right: 50%;
         bottom: 50%;
         transform: translate(50%, 50%) scale(0.06);
         filter: blur(10px);
         opacity: 0;
     }

     28% {
         opacity: 0.5;
     }

     58% {
         transform: translate(26%, 26%) scale(1.25);
         filter: blur(0.6px);
         opacity: 1;
     }

     100% {
         right: clamp(14px, 3vw, 30px);
         bottom: clamp(14px, 3vw, 28px);
         transform: translate(0, 0) scale(1);
         filter: blur(0);
         opacity: 1;
     }
 }

 @keyframes agentBubblePulse {
     0% {
         opacity: 0.55;
     }

     50% {
         opacity: 1;
     }

     100% {
         opacity: 0.55;
     }
 }

 @media (max-width: 768px) {
     .agent-modal {
         padding: 12px 10px calc(12px + env(safe-area-inset-bottom)) 10px;
     }

     .agent-dialog {
         width: 100%;
         max-height: min(90vh, 720px);
         overflow-y: auto;
         border-radius: 16px;
         padding: 18px 16px 14px 16px;
     }

     .agent-title {
         font-size: clamp(22px, 6.3vw, 26px);
     }

     .agent-subtitle {
         font-size: 13px;
     }

     .agent-chat {
         min-height: 130px;
         max-height: min(43vh, 310px);
     }

     .agent-actions {
         flex-direction: column;
     }

     .agent-btn {
         width: 100%;
         min-width: 0;
     }
 }

 /* HERO SECTION */
 .hero {
     position: relative;
     width: 100%;
     height: 90vh;
     background: #141414;
     display: flex;
     align-items: flex-end;
     padding: 0 56px 120px 56px;
     overflow: hidden;
 }

 .hero-backdrop {
     position: absolute;
     inset: 0;
     background-size: cover;
     background-position: top center;
     opacity: 0;
     transform: scale(1.035);
     transition: opacity 1.15s cubic-bezier(0.22, 1, 0.36, 1), transform 1.45s cubic-bezier(0.22, 1, 0.36, 1);
     will-change: opacity, transform;
     pointer-events: none;
     z-index: 0;
 }

 .hero-backdrop::after {
     content: '';
     position: absolute;
     inset: 0;
     background: linear-gradient(rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0.75));
 }

 .hero-backdrop.is-active {
     opacity: 1;
     transform: scale(1);
 }

 .hero-content {
     position: relative;
     width: 100%;
     max-width: 550px;
     opacity: 1;
     transform: translateY(0);
     transition: opacity 0.72s cubic-bezier(0.22, 1, 0.36, 1), transform 0.72s cubic-bezier(0.22, 1, 0.36, 1);
     will-change: opacity, transform;
     z-index: 2;
 }

 .hero-content.is-transitioning {
     opacity: 0;
     transform: translateY(12px);
 }

 .hero-badge {
     display: none;
 }

 @keyframes heroFadeIn {
     from {
         opacity: 0;
         transform: translateY(20px);
     }

     to {
         opacity: 1;
         transform: translateY(0);
     }
 }

 .hero-title {
     font-size: 80px;
     font-weight: 700;
     line-height: 1;
     margin-bottom: 20px;
     letter-spacing: -2px;
     text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.8);
 }

 .hero-description {
     font-size: 18px;
     line-height: 1.5;
     margin-bottom: 30px;
     color: #f5f5f1;
     max-width: 500px;
 }

 .hero-buttons {
     display: flex;
     gap: 16px;
     margin-bottom: 40px;
 }

 .btn {
     padding: 12px 32px;
     border: none;
     border-radius: 4px;
     font-size: 16px;
     font-weight: 600;
     cursor: pointer;
     transition: all 0.2s ease;
     display: flex;
     align-items: center;
     gap: 10px;
 }

 .btn-play {
     background-color: white;
     color: #000;
     min-width: 130px;
 }

 .btn-play:hover {
     background-color: rgba(255, 255, 255, 0.75);
 }

 .btn-info {
     background-color: transparent;
     color: white;
     width: 48px;
     height: 48px;
     min-width: 48px;
     padding: 0;
     border-radius: 50%;
     border: 2px solid rgba(255, 255, 255, 0.7);
     display: flex;
     align-items: center;
     justify-content: center;
     position: relative;
     gap: 0;
     background: rgba(30, 30, 30, 0.55);
     backdrop-filter: blur(6px);
     -webkit-backdrop-filter: blur(6px);
 }

 .btn-info:hover {
     background-color: rgba(255, 255, 255, 0.08);
     border-color: rgba(255, 255, 255, 0.9);
 }

 .btn-info-label,
 .btn-info-icon {
     display: none;
 }

 .btn-play::before {
     content: '▶';
     font-size: 14px;
 }

 .btn-info::before,
 .btn-info::after {
     content: '';
     position: absolute;
     width: 16px;
     height: 2px;
     background: rgba(255, 255, 255, 0.9);
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
 }

 .btn-info::after {
     transform: translate(-50%, -50%) rotate(90deg);
 }

 .btn-info.is-added::before,
 .btn-info.is-added::after {
     width: 8px;
     height: 14px;
     background: transparent;
     border: solid rgba(255, 255, 255, 0.95);
     border-width: 0 2px 2px 0;
 }

 .btn-info.is-added::before {
     transform: translate(-50%, -60%) rotate(45deg);
 }

 .btn-info.is-added::after {
     opacity: 0;
 }

 .hero-bottom-right {
     position: absolute;
     bottom: 60px;
     right: 56px;
     display: flex;
     align-items: center;
     gap: 16px;
     z-index: 2;
 }

 .volume-icon,
 .age-rating {
     cursor: pointer;
     transition: all 0.2s ease;
 }

 .volume-icon:hover,
 .age-rating:hover {
     transform: scale(1.1);
 }

 .volume-icon {
     width: 32px;
     height: 32px;
     border: 2px solid white;
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 16px;
 }

 .age-rating {
     border: 2px solid white;
     padding: 4px 8px;
     border-radius: 4px;
     font-weight: 700;
     font-size: 14px;
 }

 /* CONTENT SECTION */
 .content {
     padding-top: 20px;
 }

 .content-row {
     position: relative;
     margin-bottom: 60px;
     padding: 0 41px;
 }

 .row-title {
     font-size: 20px;
     font-weight: 600;
     margin-bottom: 20px;
     letter-spacing: 0.5px;
 }

 .row-title-link {
     color: #f5f5f1;
     text-decoration: none;
     cursor: pointer;
     transition: color 0.2s ease;
 }

 .row-title-link:hover {
     color: #b3b3b0;
 }

 .row-arrow {
     font-size: 14px;
     color: #b3b3b0;
     margin-left: 8px;
     transition: color 0.2s ease;
 }

 .row-title-link:hover .row-arrow {
     color: white;
 }

 .carousel-container {
     position: relative;
     overflow: hidden;
 }

 .carousel-scroll {
     display: flex;
     gap: 8px;
     overflow-x: scroll;
     scroll-behavior: smooth;
     padding: 0;
     scrollbar-width: none;
 }

 .carousel-scroll::-webkit-scrollbar {
     display: none;
 }

 .carousel-button {
     position: absolute;
     top: 0;
     bottom: 0;
     width: 56px;
     background: linear-gradient(90deg, rgba(0, 0, 0, 0.8), transparent);
     border: none;
     color: white;
     font-size: 48px;
     cursor: pointer;
     z-index: 100;
     display: flex;
     align-items: center;
     justify-content: center;
     transition: all 0.2s ease;
     opacity: 0;
 }

 .carousel-container:hover .carousel-button {
     opacity: 1;
 }

 body:not(.tv-mode) .carousel-container.is-at-start:hover .carousel-button.left {
     opacity: 0;
     pointer-events: none;
 }

 .carousel-button:hover {
     background: linear-gradient(90deg, rgba(0, 0, 0, 1), transparent);
 }

 .carousel-button.left {
     left: 0;
     background: linear-gradient(90deg, rgba(0, 0, 0, 0.8), transparent);
 }

 .carousel-button.right {
     right: 0;
     left: auto;
     background: linear-gradient(270deg, rgba(0, 0, 0, 0.8), transparent);
 }

 .carousel-button.right:hover {
     background: linear-gradient(270deg, rgba(0, 0, 0, 1), transparent);
 }

 .carousel-item {
     flex: 0 0 220px;
     height: 330px;
     border-radius: 4px;
     overflow: hidden;
     cursor: pointer;
     position: relative;
     transition: transform 0.2s ease;
     background-color: #2f2f2f;
     content-visibility: auto;
     contain-intrinsic-size: 220px 330px;
 }

 .carousel-item:hover {
     transform: scaleX(1.05);
     z-index: 10;
 }

 .carousel-item-img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     display: block;
 }

 .carousel-item-overlay {
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
     background: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.7) 100%);
     display: flex;
     flex-direction: column;
     justify-content: flex-end;
     padding: 16px;
     opacity: 0;
     transition: opacity 0.2s ease;
 }

 .carousel-item:hover .carousel-item-overlay {
     opacity: 1;
 }

 .carousel-item-title {
     font-size: 14px;
     font-weight: 600;
     margin-bottom: 8px;
     line-height: 1.2;
 }

 .carousel-item-badge {
     display: inline-block;
     background-color: #e50914;
     color: white;
     padding: 4px 8px;
     border-radius: 2px;
     font-size: 12px;
     font-weight: 600;
     margin-top: 4px;
 }

 .carousel-item-badge.coming {
     background-color: rgba(230, 230, 230, 0.3);
     border: 1px solid rgba(230, 230, 230, 0.5);
 }

 .carousel-item-badge.top10 {
     background-color: #ffc72d;
     color: #000;
 }

 .watchlist-icon {
     position: absolute;
     top: 10px;
     right: 10px;
     width: 32px;
     height: 32px;
     border-radius: 50%;
     border: 2px solid rgba(255, 255, 255, 0.7);
     pointer-events: auto;
     z-index: 5;
     opacity: 0;
     transform: scale(0.95);
     transition: opacity 0.2s ease, transform 0.2s ease;
     background: rgba(30, 30, 30, 0.55);
     backdrop-filter: blur(6px);
     -webkit-backdrop-filter: blur(6px);
     cursor: pointer;
 }

 .watchlist-icon::before,
 .watchlist-icon::after {
     content: '';
     position: absolute;
     width: 14px;
     height: 2px;
     background: rgba(255, 255, 255, 0.9);
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
 }

 .watchlist-icon::after {
     transform: translate(-50%, -50%) rotate(90deg);
 }

 .carousel-item:hover .watchlist-icon,
 .search-result-item:hover .watchlist-icon {
     opacity: 1;
     transform: scale(1);
 }

 .search-result-item>.watchlist-icon {
     opacity: 0;
     transform: scale(0.95);
 }

 .search-result-item:hover>.watchlist-icon,
 .search-result-item:focus-visible>.watchlist-icon,
 .search-result-item:focus-within>.watchlist-icon,
 .search-result-item.agent-targeted>.watchlist-icon {
     opacity: 1;
     transform: scale(1);
 }

 @media (hover: none),
 (pointer: coarse) {
     .search-result-item.touch-details-visible .search-result-overlay {
         opacity: 1;
         visibility: visible;
         pointer-events: auto;
     }

     .search-result-item.touch-details-visible>.watchlist-icon {
         opacity: 1;
         transform: scale(1);
     }
 }

 .watchlist-icon.is-added::before,
 .watchlist-icon.is-added::after {
     width: 8px;
     height: 14px;
     background: transparent;
     border: solid rgba(255, 255, 255, 0.95);
     border-width: 0 2px 2px 0;
 }

 .watchlist-icon.is-added::before {
     transform: translate(-50%, -60%) rotate(45deg);
 }

 .watchlist-icon.is-added::after {
     opacity: 0;
 }

 /* CONTINUE WATCHING - Progress Bar */
 .continue-watching-item {
     flex: 0 0 220px;
     height: 330px;
     border-radius: 4px;
     overflow: hidden;
     cursor: pointer;
     position: relative;
     transition: transform 0.2s ease;
     background-color: #2f2f2f;
 }

 .continue-watching-item:hover {
     transform: scaleX(1.05);
 }

 .progress-bar {
     position: absolute;
     bottom: 0;
     left: 0;
     height: 4px;
     background-color: #e50914;
     width: 45%;
     z-index: 10;
 }

 /* PLACEHOLDER GRADIENTS */
 .gradient-1 {
     background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
 }

 .gradient-2 {
     background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
 }

 .gradient-3 {
     background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
 }

 .gradient-4 {
     background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
 }

 .gradient-5 {
     background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
 }

 .gradient-6 {
     background: linear-gradient(135deg, #30cfd0 0%, #330867 100%);
 }

 .gradient-7 {
     background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%);
 }

 .gradient-8 {
     background: linear-gradient(135deg, #ff9466 0%, #ff6a88 100%);
 }

 .gradient-9 {
     background: linear-gradient(135deg, #2e2e78 0%, #662d91 100%);
 }

 .gradient-10 {
     background: linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%);
 }

 /* TV MODE */
 body.tv-mode .tv-focusable {
     outline: none;
 }

 body.tv-mode .tv-focusable:focus-visible,
 body.tv-mode a:focus-visible,
 body.tv-mode button:focus-visible {
     outline: 3px solid rgba(255, 255, 255, 0.92);
     box-shadow: 0 0 0 4px rgba(229, 9, 20, 0.85);
     border-radius: 8px;
 }

 body.tv-mode .carousel-item:focus-visible,
 body.tv-mode .search-result-item:focus-visible,
 body.tv-mode .watchlist-grid .search-result-item:focus-visible {
     transform: scale(1.05);
     z-index: 25;
 }

 body.tv-mode .carousel-button {
     opacity: 1;
 }

 body.tv-mode .btn {
     min-height: 52px;
 }

 /* RESPONSIVE */
 @media (max-width: 1400px) {
     .navbar {
         padding: 0 32px;
     }

     .content-row {
         padding: 0 32px;
     }

     .hero {
         padding: 0 32px 100px 32px;
     }

     .hero-bottom-right {
         right: 32px;
     }
 }

 @media (max-width: 1024px) {
     .hero-title {
         font-size: 60px;
     }

     .carousel-item {
         flex: 0 0 180px;
         height: 270px;
     }
 }

 @media (max-width: 768px) {
     body {
         background: #141414;
     }

     .navbar {
         position: relative;
         top: auto;
         left: auto;
         right: auto;
         height: auto;
         padding: max(10px, env(safe-area-inset-top)) clamp(10px, 4vw, 16px) 10px clamp(10px, 4vw, 16px);
         align-items: stretch;
         flex-direction: column;
         gap: clamp(10px, 2.8vw, 14px);
         background: transparent;
         box-shadow: none;
     }

     .navbar-left {
         width: 100%;
         display: flex;
         align-items: center;
         gap: clamp(8px, 2.8vw, 12px);
     }

     .netflix-logo {
         font-size: 0;
         line-height: 1;
         overflow: hidden;
         letter-spacing: 0;
         display: inline-flex;
         align-items: center;
         flex: 0 0 auto;
         margin-right: clamp(2px, 1vw, 6px);
     }

     .netflix-logo img {
         display: none;
     }

     .netflix-logo::before {
         content: 'M';
         display: block;
         font-size: clamp(40px, 12.5vw, 58px);
         font-weight: 800;
         letter-spacing: clamp(-1px, -0.25vw, -0.2px);
         color: #e50914;
         line-height: 1;
     }

     .mobile-home-title {
         display: inline-block;
         font-size: clamp(15px, 4.4vw, 20px);
         font-weight: 700;
         letter-spacing: clamp(0.1px, 0.2vw, 0.35px);
         color: rgba(245, 245, 245, 0.95);
         line-height: 1;
         margin-left: 0;
         transition: font-size 0.2s ease, letter-spacing 0.2s ease, margin-left 0.2s ease;
     }

     .mobile-home-title.is-watchlist {
         font-size: clamp(17px, 4.9vw, 22px);
         letter-spacing: clamp(0.2px, 0.3vw, 0.5px);
         margin-left: clamp(2px, 0.9vw, 6px);
     }

     .navbar-menu,
     .navbar-search-box,
     .profile-avatar:not(#navbarAgentIcon),
     .navbar-right span,
     .navbar-right>svg:not(#navbarSearchIcon):not(#navbarMobileListIcon),
     #navbarVoiceIcon {
         display: none;
     }

     .navbar-right {
         position: absolute;
         right: clamp(10px, 4vw, 16px);
         top: calc(max(10px, env(safe-area-inset-top)) + 10px);
         gap: clamp(10px, 3.6vw, 16px);
     }

     .navbar.mobile-search-active {
         gap: 0;
         padding-bottom: clamp(6px, 2vw, 10px);
     }

     .navbar.mobile-search-active .netflix-logo,
     .navbar.mobile-search-active .mobile-home-title {
         display: none;
     }

     .navbar.mobile-search-active .navbar-right {
         position: static;
         width: 100%;
         display: flex;
         justify-content: flex-start;
         align-items: center;
     }

     .navbar.mobile-search-active .navbar-search-box {
         display: flex;
         width: min(100%, 440px);
         margin-left: 0;
     }

     .navbar.mobile-search-active .navbar-search-box.active {
         width: 100%;
     }

     .navbar.mobile-search-active .navbar-search-close {
         display: block;
     }

     .navbar.mobile-search-active #navbarMobileListIcon,
     .navbar.mobile-search-active #navbarMobileWatchlistIcon {
         display: none;
     }

     .navbar.mobile-search-view {
         gap: 6px;
         padding-bottom: clamp(6px, 2vw, 10px);
     }

     .navbar.mobile-search-view .navbar-right {
         position: static;
         width: 100%;
         display: flex;
         flex-wrap: nowrap;
         align-items: center;
         justify-content: space-between;
         gap: clamp(8px, 2.6vw, 12px);
         order: 3;
         margin-top: clamp(8px, 2.6vw, 14px);
     }

     .navbar.mobile-search-view .navbar-left {
         order: 1;
     }

     .navbar.mobile-search-view .mobile-tabs {
         order: 2;
         margin-top: clamp(4px, 1.8vw, 8px);
     }

     .navbar.mobile-search-view .navbar-search-box {
         display: flex !important;
         order: 2;
         flex: 1 1 auto;
         width: auto;
         margin-left: 0;
         margin-top: 0;
         border: none;
         background: transparent;
         box-shadow: none;
         backdrop-filter: none;
         -webkit-backdrop-filter: none;
     }

     .navbar.mobile-search-active .navbar-search-box,
     .navbar.mobile-search-view .navbar-search-box {
         border-radius: 2px;
     }

     .navbar.mobile-search-active .navbar-search-input,
     .navbar.mobile-search-view .navbar-search-input {
         min-height: 0;
         font-size: 16px;
         letter-spacing: normal;
         color: #fff;
         background: #222;
         padding: 8px 36px 8px 36px;
     }

     .navbar.mobile-search-view .navbar-search-input::placeholder {
         color: #b3b3b3;
     }

     .navbar.mobile-search-view .navbar-search-input:focus {
         background: #333;
     }

     .navbar.mobile-search-active .navbar-search-close,
     .navbar.mobile-search-view .navbar-search-close {
         right: 8px;
         font-size: 22px;
         color: #b3b3b3;
     }

     .navbar.mobile-search-view .navbar-search-box.active {
         width: auto;
         background: #141414;
     }

     .navbar.mobile-search-view #navbarVoiceIcon {
         display: inline-flex;
         order: 3;
         flex: 0 0 auto;
         color: #f5f5f5;
     }

     .navbar.mobile-search-view #navbarAgentIcon {
         display: block;
         order: 1;
         position: absolute;
         top: calc(max(10px, env(safe-area-inset-top)) + 10px);
         right: clamp(10px, 4vw, 16px);
         z-index: 2;
         flex: 0 0 auto;
         color: #f5f5f5;
     }

     .navbar.mobile-search-view .navbar-search-close {
         display: block;
     }

     .navbar.mobile-search-view .navbar-search-box .navbar-search-icon {
         display: block;
         left: 8px;
         width: 20px;
         height: 20px;
         color: #b3b3b3;
     }

     .navbar.mobile-search-view .netflix-logo,
     .navbar.mobile-search-view .mobile-home-title {
         display: inline-flex;
     }

     .navbar.mobile-search-view #navbarMobileListIcon,
     .navbar.mobile-search-view #navbarMobileWatchlistIcon {
         display: block;
         order: 1;
         position: absolute;
         top: calc(max(10px, env(safe-area-inset-top)) + 10px);
         z-index: 2;
     }

     .navbar.mobile-search-view #navbarSearchIcon {
         display: none;
     }

     .navbar.mobile-search-view #navbarMobileWatchlistIcon {
         right: calc(clamp(10px, 4vw, 16px) + clamp(24px, 7vw, 30px) + 10px);
     }

     .navbar.mobile-search-view #navbarMobileListIcon {
         right: calc(clamp(10px, 4vw, 16px) + (clamp(24px, 7vw, 30px) + 10px) * 2);
     }

     .navbar.mobile-search-view #navbarMobileListIcon.watchlist-icon,
     .navbar.mobile-search-view #navbarMobileWatchlistIcon.watchlist-icon {
         position: absolute;
     }

     #navbarMobileListIcon,
     #navbarSearchIcon {
         display: block;
         width: clamp(20px, 5.8vw, 24px);
         height: clamp(20px, 5.8vw, 24px);
         color: #f5f5f5;
     }

     #navbarAgentIcon {
         display: inline-flex;
         width: clamp(24px, 7vw, 30px);
         height: clamp(24px, 7vw, 30px);
         border-radius: 50%;
         flex: 0 0 auto;
     }

     #navbarMobileWatchlistIcon {
         display: none;
         width: clamp(20px, 5.8vw, 24px);
         height: clamp(20px, 5.8vw, 24px);
         color: #f5f5f5;
     }

     #navbarMobileListIcon.watchlist-icon,
     #navbarMobileWatchlistIcon.watchlist-icon {
         position: relative;
         top: auto;
         right: auto;
         opacity: 1;
         transform: none;
         width: clamp(24px, 7vw, 30px);
         height: clamp(24px, 7vw, 30px);
         margin: 0;
         border-width: 2px;
     }

     #navbarMobileListIcon.is-home-nav::before,
     #navbarMobileListIcon.is-home-nav::after {
         display: none;
     }

     #navbarMobileListIcon.is-home-nav {
         display: flex;
         align-items: center;
         justify-content: center;
         width: clamp(26px, 8vw, 34px) !important;
         height: clamp(26px, 8vw, 34px) !important;
         border: none !important;
         border-radius: 0;
         background: transparent !important;
         backdrop-filter: none;
         -webkit-backdrop-filter: none;
         box-shadow: none;
     }

     #navbarMobileListIcon .nav-home-icon {
         width: clamp(22px, 6.2vw, 28px);
         height: clamp(22px, 6.2vw, 28px);
         display: block;
         color: rgba(248, 248, 248, 0.98);
         filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.35));
         pointer-events: none;
     }

     .navbar-right #navbarMobileListIcon .nav-home-icon {
         display: block !important;
     }

     .mobile-tabs {
         display: grid;
         width: 100%;
         grid-template-columns: repeat(3, minmax(0, 1fr));
         gap: clamp(6px, 2vw, 12px);
         padding-bottom: 2px;
     }

     .mobile-tabs::-webkit-scrollbar {
         display: none;
     }

     .mobile-tab {
         display: flex;
         align-items: center;
         justify-content: center;
         min-width: 0;
         width: 100%;
         white-space: nowrap;
         border-radius: 999px;
         border: 2px solid rgba(235, 245, 245, 0.62);
         background: rgba(30, 30, 30, 0.42);
         color: rgba(245, 248, 248, 0.95);
         text-decoration: none;
         font-size: clamp(11px, 3.35vw, 16px);
         font-weight: 600;
         padding: clamp(8px, 2.3vw, 10px) clamp(8px, 2.9vw, 18px);
         line-height: 1;
     }

     .mobile-tab:last-child {
         padding-right: clamp(8px, 2.6vw, 16px);
     }

     .mobile-tab.is-active {
         background: #e50914;
         border-color: #e50914;
         color: #ffffff;
         box-shadow: 0 6px 14px rgba(229, 9, 20, 0.35);
     }

     .mobile-tab-caret {
         margin-left: clamp(4px, 1.5vw, 8px);
         font-size: clamp(10px, 2.6vw, 13px);
         opacity: 0.85;
         transition: transform 0.2s ease;
     }

     .mobile-tab.is-open .mobile-tab-caret {
         transform: rotate(180deg);
     }

     .mobile-tab-dropdown {
         display: none;
         grid-column: 1 / -1;
         margin-top: 2px;
         padding: clamp(8px, 2.5vw, 12px);
         border-radius: 12px;
         border: 1px solid rgba(64, 64, 64, 0.95);
         background: rgba(20, 20, 20, 0.96);
         gap: clamp(8px, 2.4vw, 10px);
         flex-wrap: wrap;
     }

     .mobile-tab-dropdown.open {
         display: flex;
     }

     .mobile-tab-dropdown .search-suggestion {
         margin: 0;
         padding: 8px 12px;
         border-radius: 999px;
         border: 1px solid #3a3a3a;
         font-size: 12px;
     }

     @media (max-width: 360px) {
         .mobile-tab {
             font-size: 11px;
             padding: 8px 6px;
         }

         .mobile-tab-caret {
             margin-left: 4px;
             font-size: 10px;
         }
     }

     .hero {
         --hero-bg-image: none;
         height: auto;
         min-height: 0;
         align-items: flex-start;
         padding: 6px 16px 24px 16px;
         background: #141414;
         overflow: visible;
         isolation: isolate;
     }

     .hero-backdrop {
         display: none;
     }

     .hero::before {
         content: '';
         position: absolute;
         inset: -84px -20px -96px -20px;
         background-image: var(--hero-bg-image);
         background-size: cover;
         background-position: center 30%;
         opacity: 0.58;
         filter: blur(44px) saturate(1.18);
         transform: scale(1.08);
         pointer-events: none;
         z-index: 0;
     }

     .hero::after {
         content: '';
         position: absolute;
         inset: -36px 0 -76px 0;
         background: linear-gradient(180deg, rgba(20, 20, 20, 0.06) 0%, rgba(20, 20, 20, 0.34) 46%, rgba(20, 20, 20, 0.78) 100%);
         pointer-events: none;
         z-index: 0;
     }

     .hero-title {
         display: block;
         font-size: clamp(20px, 6.2vw, 28px);
         font-weight: 800;
         letter-spacing: -0.4px;
         margin-bottom: 6px;
         text-shadow: 0 8px 20px rgba(0, 0, 0, 0.55);
     }

     .hero-description {
         font-size: 12px;
         margin-bottom: 18px;
         text-align: left;
         color: rgba(242, 245, 245, 0.9);
     }

     .hero-content {
         position: relative;
         width: 100%;
         max-width: none;
         min-height: 470px;
         border-radius: 22px;
         overflow: hidden;
         padding: 22px 18px 20px 18px;
         display: flex;
         flex-direction: column;
         justify-content: flex-end;
         border: 1px solid rgba(208, 235, 236, 0.34);
         box-shadow: 0 16px 36px rgba(0, 0, 0, 0.32);
         background-size: cover;
         background-position: center;
         z-index: 1;
         transform: none;
         transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1);
     }

     .hero-content.is-transitioning {
         opacity: 0;
         transform: none;
     }

     .hero-content::before {
         content: '';
         position: absolute;
         inset: 0;
         background: linear-gradient(180deg, rgba(8, 8, 8, 0.03) 45%, rgba(12, 12, 12, 0.62) 72%, rgba(10, 10, 10, 0.9) 100%);
         pointer-events: none;
     }

     .hero-badge {
         display: none;
         position: absolute;
         top: 16px;
         left: 16px;
         z-index: 2;
         font-size: 50px;
         line-height: 1;
         font-weight: 800;
         color: #e50914;
         text-shadow: 0 4px 14px rgba(0, 0, 0, 0.45);
     }

     #heroTitle,
     #heroDescription,
     .hero-buttons {
         position: relative;
         z-index: 2;
     }

     .hero-buttons {
         margin-bottom: 6px;
         gap: 10px;
     }

     .btn {
         height: 46px;
         font-size: 16px;
         border-radius: 5px;
         justify-content: center;
         flex: 1;
         min-width: 0;
         padding: 10px 12px;
     }

     .btn-play {
         background-color: #f1f1f1;
         color: #121212;
     }

     .btn-play::before {
         font-size: 14px;
     }

     .btn-info {
         width: auto;
         height: 46px;
         min-width: 0;
         border-radius: 5px;
         border: none;
         background: rgba(80, 80, 80, 0.55);
         backdrop-filter: blur(2px);
         -webkit-backdrop-filter: blur(2px);
         gap: 8px;
         font-size: 16px;
         font-weight: 700;
     }

     .btn-info::before,
     .btn-info::after {
         display: none;
     }

     .btn-info .btn-info-label {
         display: inline;
     }

     .btn-info .btn-info-icon {
         font-size: 17px;
         line-height: 1;
     }

     .btn-info.is-added .btn-info-icon {
         color: #f8f8f8;
     }

     .hero-bottom-right {
         display: none;
     }

     .content {
         position: relative;
         z-index: 1;
         padding-top: 10px;
         background: #141414;
     }

     .content-row {
         margin-bottom: 36px;
         padding: 0 16px;
     }

     #searchResultsSection {
         padding-top: calc(max(6px, env(safe-area-inset-top) + 64px)) !important;
         padding-right: clamp(10px, 4.2vw, 18px) !important;
         padding-bottom: clamp(24px, 8vw, 42px) !important;
         padding-left: clamp(10px, 4.2vw, 18px) !important;
         overflow-x: hidden;
     }

     #mobileGenresSection {
         padding-top: calc(max(6px, env(safe-area-inset-top) + 64px)) !important;
         padding-right: clamp(10px, 4.2vw, 18px) !important;
         padding-bottom: clamp(24px, 8vw, 42px) !important;
         padding-left: clamp(10px, 4.2vw, 18px) !important;
         overflow-x: hidden;
     }

     #searchSuggestions {
         display: none !important;
         flex-wrap: nowrap !important;
         gap: clamp(8px, 2.5vw, 12px) !important;
         margin: 0 0 clamp(12px, 3.2vw, 18px) 0 !important;
         padding: 0 0 clamp(10px, 2.8vw, 14px) 0 !important;
         border-bottom: 1px solid #2a2a2a;
         overflow-x: auto;
         overflow-y: hidden;
         -webkit-overflow-scrolling: touch;
         scrollbar-width: none;
     }

     #mobileGenresSuggestions {
         display: flex !important;
         flex-wrap: nowrap !important;
         gap: clamp(8px, 2.5vw, 12px) !important;
         margin: 0 0 clamp(12px, 3.2vw, 18px) 0 !important;
         padding: 0 0 clamp(10px, 2.8vw, 14px) 0 !important;
         border-bottom: 1px solid #2a2a2a;
         overflow-x: auto;
         overflow-y: hidden;
         -webkit-overflow-scrolling: touch;
         scrollbar-width: none;
     }

     #mobileGenresSuggestions::-webkit-scrollbar {
         display: none;
     }

     #mobileGenresSuggestions .search-suggestion {
         flex: 0 0 auto;
         padding: clamp(8px, 2.6vw, 10px) clamp(12px, 3.6vw, 16px) !important;
         border: 1px solid #3a3a3a;
         border-radius: 999px;
         font-size: clamp(12px, 3.3vw, 14px);
         line-height: 1;
         white-space: nowrap;
     }

     #searchSuggestions::-webkit-scrollbar {
         display: none;
     }

     #searchSuggestions .search-suggestion {
         flex: 0 0 auto;
         padding: clamp(8px, 2.6vw, 10px) clamp(12px, 3.6vw, 16px) !important;
         border: 1px solid #3a3a3a;
         border-radius: 999px;
         font-size: clamp(12px, 3.3vw, 14px);
         line-height: 1;
         white-space: nowrap;
     }

     #searchResults {
         grid-template-columns: repeat(auto-fill, minmax(clamp(132px, 43vw, 188px), 1fr));
         gap: clamp(10px, 2.8vw, 14px);
         border-top: 1px solid #2a2a2a;
         padding: clamp(5px, 1.6vw, 8px) 0 clamp(24px, 7vw, 34px) 0;
     }

     #mobileGenresResults {
         grid-template-columns: repeat(auto-fill, minmax(clamp(132px, 43vw, 188px), 1fr));
         gap: clamp(10px, 2.8vw, 14px);
         border-top: 1px solid #2a2a2a;
         padding: clamp(5px, 1.6vw, 8px) 0 clamp(24px, 7vw, 34px) 0;
     }

     #searchResults .search-result-item {
         width: 100% !important;
         height: auto !important;
         aspect-ratio: 2 / 3;
         border-radius: 8px;
     }

     #mobileGenresResults .search-result-item {
         width: 100% !important;
         height: auto !important;
         aspect-ratio: 2 / 3;
         border-radius: 8px;
     }

     #searchResults .search-result-overlay {
         padding: clamp(14px, 4.2vw, 20px) clamp(8px, 2.8vw, 12px) clamp(8px, 2.8vw, 12px);
     }

     #mobileGenresResults .search-result-overlay {
         padding: clamp(14px, 4.2vw, 20px) clamp(8px, 2.8vw, 12px) clamp(8px, 2.8vw, 12px);
     }

     #searchResults .search-result-title {
         font-size: clamp(13px, 3.7vw, 15px);
         line-height: 1.25;
     }

     #mobileGenresResults .search-result-title {
         font-size: clamp(13px, 3.7vw, 15px);
         line-height: 1.25;
     }

     #searchResults .search-result-meta {
         gap: clamp(4px, 1.9vw, 8px);
         font-size: clamp(11px, 3vw, 13px);
     }

     #mobileGenresResults .search-result-meta {
         gap: clamp(4px, 1.9vw, 8px);
         font-size: clamp(11px, 3vw, 13px);
     }

     #searchResults .search-no-results {
         margin: clamp(20px, 7vw, 40px) auto 0 auto;
         padding: clamp(12px, 4vw, 18px) clamp(10px, 3vw, 14px) 0;
         font-size: clamp(14px, 4vw, 16px);
     }

     #mobileGenresResults .search-no-results {
         margin: clamp(20px, 7vw, 40px) auto 0 auto;
         padding: clamp(12px, 4vw, 18px) clamp(10px, 3vw, 14px) 0;
         font-size: clamp(14px, 4vw, 16px);
     }

     @media (max-width: 380px) {
         #searchResults {
             grid-template-columns: repeat(2, minmax(0, 1fr));
             gap: 10px;
         }

         #searchSuggestions .search-suggestion {
             padding: 8px 12px !important;
             font-size: 12px;
         }
     }

     .watchlist-section {
         padding: 16px 4% 60px 4%;
     }

     .watchlist-grid {
         grid-template-columns: repeat(2, minmax(0, 1fr));
         gap: 14px;
     }

     .watchlist-grid .search-result-item {
         width: 100%;
         height: auto;
         aspect-ratio: 2 / 3;
     }

     .library-section {
         padding: 16px 4% 60px 4%;
     }

     .library-grid {
         grid-template-columns: repeat(2, minmax(0, 1fr));
         gap: 14px;
     }

     .library-grid .search-result-item {
         width: 100%;
         height: auto;
         aspect-ratio: 2 / 3;
     }

     .row-title {
         font-size: 18px;
         margin-bottom: 14px;
     }

     .carousel-button {
         display: none !important;
     }

     .carousel-scroll {
         scroll-snap-type: x proximity;
         scroll-padding-inline: 16px;
         -webkit-overflow-scrolling: touch;
         overscroll-behavior-x: contain;
         touch-action: auto;
         padding-bottom: 2px;
     }

     .carousel-item {
         flex: 0 0 132px;
         height: 198px;
         scroll-snap-align: start;
         scroll-snap-stop: always;
     }

     .carousel-item:hover {
         transform: none;
     }
 }