/* NexStremioX mobile beta polish. Desktop and TV layouts stay untouched. */
@media (max-width: 760px) {
    html {
        -webkit-text-size-adjust: 100%;
    }

    body {
        overflow-x: hidden !important;
    }

    .custom-titlebar {
        display: none !important;
    }

    .main-content,
    body.nav-layout-top .main-content {
        padding-left: 0 !important;
        padding-top: 0 !important;
        padding-bottom: 86px !important;
    }

    .navbar,
    body.nav-layout-top .navbar {
        position: fixed !important;
        left: 0 !important;
        right: 0 !important;
        top: auto !important;
        bottom: 0 !important;
        width: 100% !important;
        height: 74px !important;
        max-height: 74px !important;
        border-radius: 20px 20px 0 0 !important;
        padding: 8px 10px calc(8px + env(safe-area-inset-bottom)) !important;
        display: flex !important;
        align-items: center !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        background: rgba(7, 2, 16, 0.92) !important;
        border: 1px solid rgba(139, 92, 246, 0.28) !important;
        border-bottom: 0 !important;
        box-shadow: 0 -16px 36px rgba(0, 0, 0, 0.58), 0 0 24px rgba(139, 92, 246, 0.16) !important;
        z-index: 1000 !important;
    }

    .navbar:hover,
    body.nav-layout-top .navbar:hover {
        width: 100% !important;
    }

    .navbar-brand {
        display: none !important;
    }

    .navbar-menu,
    body.nav-layout-top .navbar-menu {
        flex-direction: row !important;
        align-items: center !important;
        gap: 8px !important;
        height: 100% !important;
        min-width: max-content !important;
    }

    .nav-item {
        width: auto !important;
        padding: 0 !important;
        flex: 0 0 auto !important;
    }

    .nav-btn,
    body.nav-layout-top .nav-btn {
        width: 54px !important;
        min-width: 54px !important;
        height: 54px !important;
        padding: 0 !important;
        justify-content: center !important;
        gap: 0 !important;
        border-radius: 18px !important;
        transform: none !important;
    }

    .nav-label,
    .navbar:hover .nav-label,
    body.nav-layout-top .nav-label {
        opacity: 0 !important;
        width: 0 !important;
        transform: none !important;
        overflow: hidden !important;
    }

    .nav-icon {
        min-width: 24px !important;
        width: 24px !important;
        height: 24px !important;
    }

    .nav-item.active .nav-btn::before {
        left: 50% !important;
        top: auto !important;
        bottom: 5px !important;
        width: 22px !important;
        height: 3px !important;
        transform: translateX(-50%) !important;
        border-radius: 999px !important;
    }

    .hero-section {
        width: 100% !important;
        height: 68vh !important;
        min-height: 460px !important;
        margin: 0 !important;
        border-radius: 0 0 22px 22px !important;
    }

    .hero-content {
        left: 18px !important;
        right: 18px !important;
        bottom: 76px !important;
        max-width: none !important;
    }

    .hero-title {
        font-size: clamp(2rem, 11vw, 3rem) !important;
        line-height: 1.02 !important;
        margin-bottom: 10px !important;
    }

    .hero-meta {
        gap: 8px !important;
        flex-wrap: wrap !important;
        margin-bottom: 14px !important;
        font-size: 0.88rem !important;
    }

    .hero-overview {
        max-width: 100% !important;
        -webkit-line-clamp: 2 !important;
        font-size: 0.95rem !important;
        line-height: 1.45 !important;
        margin-bottom: 18px !important;
    }

    .hero-buttons {
        gap: 10px !important;
        flex-wrap: wrap !important;
    }

    .hero-btn {
        min-height: 44px !important;
        padding: 0 16px !important;
        font-size: 0.92rem !important;
        border-radius: 12px !important;
    }

    .hero-nav {
        display: none !important;
    }

    .hero-dots {
        left: 18px !important;
        right: auto !important;
        bottom: 22px !important;
        gap: 7px !important;
    }

    .hero-dot {
        width: 22px !important;
    }

    .hero-dot.active {
        width: 34px !important;
    }

    .content-wrapper {
        margin-top: -28px !important;
        padding-bottom: 110px !important;
    }

    .movie-category {
        padding: 0 16px !important;
        margin-bottom: 30px !important;
    }

    .category-title {
        font-size: 1.2rem !important;
        margin-bottom: 10px !important;
    }

    .movie-slider {
        gap: 12px !important;
        padding: 8px 2px 28px !important;
        scroll-snap-type: x proximity;
    }

    .movie-card {
        min-width: 132px !important;
        max-width: 132px !important;
        scroll-snap-align: start;
    }

    .movie-poster {
        height: 198px !important;
        border-radius: 12px !important;
    }

    .movie-info {
        padding: 10px 2px 0 !important;
    }

    .movie-title {
        font-size: 0.9rem !important;
    }

    .search-page,
    .discover-page,
    .genres-page,
    .genre-browse-page,
    .anime-page,
    .kids-zone-page,
    .comics-page,
    .books-page {
        padding-left: 0 !important;
        padding-bottom: 96px !important;
    }

    .search-header,
    .discover-header,
    .radio-header {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 12px !important;
    }

    .search-header {
        position: relative !important;
        padding: 18px 16px 20px !important;
    }

    .search-bar-container {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 12px !important;
    }

    .search-input {
        padding: 14px 16px !important;
        font-size: 1rem !important;
        border-radius: 14px !important;
    }

    .search-btn {
        width: 100% !important;
        height: 50px !important;
        border-radius: 14px !important;
    }

    .filter-bar,
    .discover-controls,
    .radio-categories {
        justify-content: flex-start !important;
        overflow-x: auto !important;
        flex-wrap: nowrap !important;
        padding-bottom: 6px !important;
    }

    .filter-dropdown-btn,
    .clear-filters-btn,
    .radio-category {
        white-space: nowrap !important;
    }

    .filter-dropdown-menu {
        left: 0 !important;
        right: 0 !important;
        min-width: min(92vw, 360px) !important;
        transform: translateY(-10px) !important;
    }

    .filter-dropdown-menu.active {
        transform: translateY(0) !important;
    }

    .genre-menu,
    .year-menu {
        grid-template-columns: 1fr !important;
        min-width: min(92vw, 360px) !important;
    }

    .results-grid,
    .discover-results,
    .genre-browse-results,
    .anime-grid,
    .kids-grid,
    .comics-grid,
    .books-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 14px !important;
    }

    .details-page {
        padding-bottom: 90px !important;
    }

    .back-to-browse {
        top: 14px !important;
        left: 14px !important;
        padding: 10px 14px !important;
        border-radius: 14px !important;
    }

    .details-hero {
        height: 44vh !important;
        min-height: 280px !important;
    }

    .details-main {
        display: block !important;
        padding: 0 16px 96px !important;
        margin-top: -130px !important;
    }

    .details-poster-section {
        width: 168px !important;
        margin: 0 auto 18px !important;
    }

    .details-info-section {
        padding-top: 0 !important;
    }

    .details-title {
        font-size: clamp(1.9rem, 10vw, 2.7rem) !important;
        letter-spacing: 0 !important;
    }

    .details-meta,
    .details-actions,
    .details-extra-info {
        flex-wrap: wrap !important;
        gap: 10px !important;
    }

    .details-overview {
        font-size: 0.98rem !important;
        line-height: 1.55 !important;
    }

    .action-btn {
        flex: 1 1 140px !important;
        justify-content: center !important;
        padding: 12px 14px !important;
    }

    .radio-section {
        padding: 22px 16px 150px !important;
    }

    .radio-search {
        min-width: 0 !important;
        width: 100% !important;
    }

    .radio-grid {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }

    .radio-card {
        height: 176px !important;
        padding: 14px 14px 56px !important;
    }

    .radio-mini-player {
        left: 10px !important;
        right: 10px !important;
        bottom: 84px !important;
        grid-template-columns: 44px minmax(0, 1fr) 44px !important;
        gap: 10px !important;
        padding: 10px !important;
    }

    .radio-mini-player audio {
        grid-column: 1 / -1 !important;
        width: 100% !important;
    }

    .comics-section {
        padding: 20px 14px 126px !important;
    }

    .comics-header {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 14px !important;
        margin-bottom: 20px !important;
        padding-bottom: 16px !important;
    }

    .comics-title {
        font-size: clamp(2rem, 9vw, 2.45rem) !important;
        line-height: 1.05 !important;
    }

    .comics-actions {
        width: 100% !important;
        justify-content: stretch !important;
        gap: 10px !important;
    }

    .search-container-comics {
        width: 100% !important;
        min-width: 0 !important;
    }

    .saved-comics-btn {
        width: 100% !important;
        min-height: 46px !important;
        justify-content: center !important;
    }

    .comics-grid {
        grid-template-columns: repeat(2, minmax(145px, 1fr)) !important;
        gap: 12px !important;
        align-items: start !important;
    }

    .comic-card {
        min-width: 0 !important;
        border-radius: 14px !important;
    }

    .comic-poster {
        height: auto !important;
        aspect-ratio: 2 / 3 !important;
    }

    .comic-info {
        padding: 12px !important;
    }

    .comic-title {
        font-size: 0.88rem !important;
        line-height: 1.25 !important;
    }

    .podcasts-section {
        padding: 22px 14px 130px !important;
    }

    .podcasts-header {
        display: grid !important;
        grid-template-columns: 1fr !important;
        align-items: stretch !important;
        max-width: none !important;
        gap: 12px !important;
        margin-bottom: 18px !important;
    }

    .podcasts-mode {
        width: 100% !important;
        border-radius: 16px !important;
        padding: 6px !important;
    }

    .podcast-mode-btn {
        flex: 1 1 0 !important;
        height: 46px !important;
        min-width: 0 !important;
        border-radius: 12px !important;
        padding: 0 10px !important;
    }

    .podcasts-search {
        width: 100% !important;
        min-width: 0 !important;
        border-radius: 14px !important;
        padding: 0 8px 0 14px !important;
    }

    .podcasts-search input {
        min-width: 0 !important;
        height: 50px !important;
        font-size: 0.95rem !important;
    }

    .podcasts-search button {
        flex: 0 0 auto !important;
        height: 42px !important;
        padding: 0 14px !important;
        border-radius: 12px !important;
    }

    .podcasts-categories {
        max-width: none !important;
        justify-content: flex-start !important;
        gap: 9px !important;
        margin: 0 0 20px !important;
    }

    .podcast-category-btn {
        min-height: 42px !important;
        border-radius: 12px !important;
        padding: 0 14px !important;
    }

    .podcasts-grid {
        grid-template-columns: 1fr !important;
        gap: 14px !important;
    }

    .podcast-card {
        min-height: 0 !important;
        border-radius: 14px !important;
    }

    .podcast-card img {
        aspect-ratio: 16 / 10 !important;
        object-fit: cover !important;
    }

    .podcast-card-info {
        padding: 14px !important;
    }

    .podcast-player {
        left: 10px !important;
        right: 10px !important;
        bottom: 84px !important;
    }

    .settings-header,
    .media-servers-header,
    .sports-header {
        position: relative !important;
        top: auto !important;
        padding: 18px 16px !important;
        gap: 12px !important;
    }

    .settings-title,
    .media-servers-title,
    .sports-title {
        font-size: clamp(1.8rem, 8vw, 2.4rem) !important;
    }

    .settings-container,
    .media-servers-page,
    .sports-page,
    .media-servers-shell {
        width: 100% !important;
        max-width: none !important;
        padding: 18px 16px 96px !important;
        margin: 0 !important;
    }

    .settings-section,
    .media-card,
    .media-servers-panel,
    .sports-frame {
        border-radius: 16px !important;
        padding: 18px !important;
    }

    .segmented-control {
        width: 100% !important;
    }

    .segment-btn {
        flex: 1 1 0 !important;
        min-width: 0 !important;
    }

    .utility-action-row {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 14px !important;
        padding: 16px !important;
    }

    .utility-action-row .btn-secondary {
        width: 100% !important;
        justify-content: center !important;
        min-height: 46px !important;
    }

    .media-servers-layout,
    .media-server-grid,
    .media-library-grid {
        grid-template-columns: 1fr !important;
    }

    body.overflow-hidden {
        overflow: auto !important;
    }

    body.overflow-hidden > .pt-12.h-screen {
        height: auto !important;
        min-height: 100vh !important;
        padding-top: 0 !important;
        padding-bottom: 88px !important;
        overflow: visible !important;
    }

    header.flex.items-center.justify-between {
        flex-direction: column !important;
        align-items: stretch !important;
        padding: 14px 16px !important;
        gap: 12px !important;
    }

    #playlist-switcher {
        width: 100% !important;
        justify-content: flex-start !important;
        overflow-x: auto !important;
    }

    #playlist-buttons {
        display: flex !important;
        gap: 8px !important;
        overflow-x: auto !important;
        padding-bottom: 4px !important;
    }

    #add-playlist-btn {
        align-self: flex-start !important;
        min-height: 44px !important;
    }

    #home-view,
    #listing-view,
    #series-view {
        padding: 12px 16px 96px !important;
        overflow: visible !important;
    }

    #home-view .grid {
        grid-template-columns: 1fr !important;
        gap: 14px !important;
        min-height: 0 !important;
        flex: none !important;
    }

    #box-live,
    #box-movies,
    #box-shows,
    #box-live > .iptv-card,
    #box-movies > .iptv-card,
    #box-shows > .iptv-card {
        height: auto !important;
        min-height: 168px !important;
    }

    #box-live {
        min-height: 210px !important;
    }

    #box-live > .iptv-card {
        min-height: 210px !important;
    }

    #home-view .iptv-card .absolute.inset-0.flex {
        padding: 22px !important;
    }

    #home-view .iptv-card .material-icons {
        font-size: 2.5rem !important;
        margin-bottom: 10px !important;
    }

    #home-view .iptv-card h2 {
        font-size: 2rem !important;
        line-height: 1.05 !important;
    }

    #home-view .iptv-card p {
        font-size: 0.95rem !important;
    }

    #home-view > #sub-details {
        margin-top: 14px !important;
        padding: 18px !important;
    }

    #listing-view > .flex,
    #series-view > .flex {
        flex-direction: column !important;
        overflow: visible !important;
        gap: 14px !important;
    }

    #category-sidebar {
        width: 100% !important;
        max-width: none !important;
        overflow-x: auto !important;
    }

    #category-list {
        width: 100% !important;
        flex-direction: row !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        padding-right: 0 !important;
        padding-bottom: 8px !important;
    }

    #category-list button,
    #season-list button {
        flex: 0 0 auto !important;
        white-space: nowrap !important;
    }

    #item-grid-container,
    #episode-list {
        overflow: visible !important;
        padding-bottom: 0 !important;
    }

    #item-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 10px !important;
    }

    .sports-standalone,
    .sports-page {
        overflow: auto !important;
    }

    .sports-page {
        position: relative !important;
        min-height: 100vh !important;
        height: auto !important;
        padding-bottom: 0 !important;
    }

    .sports-header {
        flex-wrap: wrap !important;
        height: auto !important;
    }

    .sports-actions {
        width: 100% !important;
        margin-left: 0 !important;
        justify-content: flex-start !important;
    }

    .sports-shell {
        position: relative !important;
        left: auto !important;
        right: auto !important;
        top: auto !important;
        bottom: auto !important;
        min-height: calc(100vh - 136px) !important;
        margin: 0 8px 12px !important;
    }

    #sportsFrame {
        min-height: 72vh !important;
    }
}

@media (max-width: 420px) {
    .movie-card {
        min-width: 118px !important;
        max-width: 118px !important;
    }

    .movie-poster {
        height: 177px !important;
    }

    .results-grid,
    .discover-results,
    .genre-browse-results,
    .anime-grid,
    .kids-grid,
    .comics-grid,
    .books-grid,
    #item-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .comics-grid {
        gap: 10px !important;
    }

    .comic-info {
        padding: 10px !important;
    }
}