/* ============================================
   SoulSync Mobile Responsive Styles
   Loaded after style.css - overrides for ≤768px
   ============================================ */

/* ======================================
   HAMBURGER BUTTON (hidden on desktop)
   ====================================== */

.hamburger-btn {
    display: none;
    position: fixed;
    top: 16px;
    left: 16px;
    z-index: 9999;
    width: 44px;
    height: 44px;
    background: rgba(20, 20, 20, 0.9);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 12px;
    cursor: pointer;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 0;
}

.hamburger-line {
    display: block;
    width: 20px;
    height: 2px;
    background: #fff;
    border-radius: 2px;
    transition: transform 0.3s ease, opacity 0.3s ease;
}

/* Animated X state */
.hamburger-btn.active .hamburger-line:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}

.hamburger-btn.active .hamburger-line:nth-child(2) {
    opacity: 0;
}

.hamburger-btn.active .hamburger-line:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

/* ======================================
   MOBILE OVERLAY (hidden on desktop)
   ====================================== */

.mobile-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.6);
    z-index: 10000;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.mobile-overlay.active {
    opacity: 1;
    pointer-events: auto;
}

/* ======================================
   MOBILE BREAKPOINT (≤768px)
   ====================================== */

@media (max-width: 768px) {

    /* --- Phase 0: Foundation --- */

    body {
        overflow: hidden;
        height: 100vh;
    }

    .main-container {
        flex-direction: column;
        height: 100vh;
        width: 100%;
    }

    .enhanced-dropdown-content {
        max-width: 100% !important;
    }

    .dashboard-container {
        gap: 15px;
        margin: 15px;
        padding: 15px;
    }

    .dashboard-header {
        margin: -15px -15px 15px -15px;
        padding: 15px;
        border-top-left-radius: 20px;
        border-top-right-radius: 20px;
    }

    #artist-hero-section #artist-detail-image {
        width: 100% !important;
        max-width: none !important;
    }

    #media-player {
        min-height: 110px;
        flex-shrink: 0;
    }

    .tool-help-button {
        height: 35px;
        width: 35px;
    }

    .discover-carousel,
    #genre-tabs {
        width: 100%;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
    }

    .enh-compact-item.artist-card {
        width: calc(50% - 8px);
        height: 200px;
    }

    .sidebar-header {
        text-align: right;
        /* The header is already `position: sticky; z-index: 1`, which should put
           it above the scrolling nav buttons (positioned, z-index auto). It
           doesn't, and raising the z-index changes nothing — the giveaway that
           these aren't being arbitrated in the same stacking context.
           `backdrop-filter` promotes the header to its own compositing layer,
           where z-index no longer decides the order, so nav items scroll over
           it and stay clickable. Same root cause as #1040, which the opaque
           base only half-fixed.

           That opaque base is why dropping the blur here is nearly invisible:
           the bottom of the gradient is already solid. Handled at the mobile
           breakpoint only, so the desktop frosted look is untouched. */
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }

    .main-content {
        width: 100%;
        flex: 1;
        min-height: 0;
        overflow-y: auto;
        overflow-x: hidden;
    }

    /* --- Phase 1: Sidebar → Off-canvas --- */

    .hamburger-btn {
        display: flex;
    }

    .mobile-overlay {
        display: block;
    }

    .sidebar {
        position: fixed;
        top: 0;
        left: 0;
        width: 280px;
        height: 100vh;
        z-index: 10001;
        transform: translateX(-100%);
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        border-radius: 0;
        border-top-right-radius: 24px;
        border-bottom-right-radius: 24px;
        /* The drawer itself does not scroll — .sidebar-scroll does (base
           rule in style.css). Leaving overflow-y:auto here would re-arm the
           old single-scroll-box behaviour at mobile widths only. */
        overflow: hidden;
    }

    .sidebar-scroll {
        /* Without this a drag inside the open drawer chains its scroll to the
           page underneath: the list itself does not move, so the browser
           resolves the gesture as a tap on whatever nav link is under the
           finger — every scroll attempt navigates. */
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
    }

    .sidebar.mobile-open {
        transform: translateX(0);
    }

    /* Set for one frame while the viewport crosses the breakpoint. Without it
       the desktop -> mobile flip animates the drawer across the page, which is
       what a resized desktop context caught mid-slide sitting on the content. */
    .sidebar.sidebar-no-transition {
        transition: none !important;
    }

    /* init.js has always put this class on <body> when the drawer opens, but
       nothing ever consumed it, so the page behind the drawer stayed live and
       scrollable. `.main-content` is the real scroller on mobile, so locking
       <body> alone is not enough. */
    body.mobile-nav-open {
        overflow: hidden;
    }

    body.mobile-nav-open .main-content {
        overflow: hidden;
    }

    .page {
        /* Bottom padding clears the fixed floating search bar / FAB buttons
           (~50px band) so the last row of content stays visible & tappable. */
        padding: 70px 20px 72px 20px;
        height: auto;
        min-height: 0;
        overflow: visible;
        flex-shrink: 0;
    }

    .page.active {
        display: block;
    }

    /* ── Minor tap-target enlargements for touch ── */
    #watchlist-select-all-cb {
        width: 18px;
        height: 18px;
    }
    .watchlist-select-all-label {
        min-height: 32px;
    }
    .td-close {
        width: 36px;
        height: 36px;
    }
    .bp-info-toggle {
        width: 28px;
        height: 28px;
        font-size: 14px;
    }

    .nav-button {
        width: 100%;
    }

    /* --- Phase 2: Dashboard --- */

    .dashboard-content {
        flex-direction: column;
        height: auto;
        gap: 20px;
    }

    .header-actions {
        flex-wrap: wrap;
        width: 100%;
    }

    /* MusicBrainz tooltip - reposition for mobile */
    .musicbrainz-tooltip {
        left: 0;
        right: auto;
        transform: translateY(-5px);
    }

    .musicbrainz-button:hover+.musicbrainz-tooltip {
        transform: translateY(0);
    }

    /* AudioDB tooltip - reposition for mobile */
    .audiodb-tooltip {
        left: 0;
        right: auto;
        transform: translateY(-5px);
    }

    .audiodb-button:hover+.audiodb-tooltip {
        transform: translateY(0);
    }

    /* Deezer tooltip - reposition for mobile */
    .deezer-tooltip {
        left: 0;
        right: auto;
        transform: translateY(-5px);
    }

    .deezer-button:hover+.deezer-tooltip {
        transform: translateY(0);
    }

    .tooltip-content {
        min-width: auto;
        width: calc(100vw - 60px);
        max-width: 280px;
    }

    .tooltip-content::before,
    .tooltip-content::after {
        left: 24px;
        transform: none;
    }

    .tools-grid {
        grid-template-columns: 1fr;
    }

    .tool-card {
        padding: 20px 16px;
    }

    .tool-card-header {
        flex-wrap: wrap;
        gap: 8px;
    }

    .tool-card-title {
        font-size: 15px;
    }

    .tool-card-info {
        font-size: 12px;
        word-wrap: break-word;
        overflow-wrap: break-word;
    }

    .tool-card-controls {
        flex-direction: column;
        gap: 8px;
    }

    .tool-card-controls select,
    .tool-card-controls button {
        width: 100%;
        min-height: 44px;
        box-sizing: border-box;
    }

    /* --- Phase 3: Downloads (Search) --- */

    .downloads-content {
        grid-template-columns: 1fr;
        height: auto;
        padding: 0 12px 16px 12px;
        overflow: hidden;
    }

    .downloads-main-panel {
        min-width: 0;
        max-width: 100%;
        overflow: hidden;
    }

    .downloads-side-panel {
        max-height: 400px;
        margin-top: 0;
    }

    .search-bar-container {
        flex-direction: column;
        gap: 12px;
        padding: 12px 16px;
    }

    .search-bar-container button {
        width: 100%;
        min-height: 44px;
    }

    .enhanced-search-bar-container {
        flex-direction: column;
        gap: 8px;
        padding: 8px;
    }

    .enhanced-search-wrapper {
        width: 100%;
    }

    .filter-group {
        flex-wrap: wrap;
    }

    .filter-btn {
        font-size: 13px;
        padding: 8px 14px;
        min-height: 36px;
    }

    .sort-order-btn {
        min-width: 44px;
        min-height: 44px;
        width: 44px;
        height: 44px;
    }

    .enhanced-dropdown {
        position: relative;
        margin-top: 12px;
        border-radius: 0;
        z-index: 1;
        overflow: visible;
        max-height: none;
    }

    .search-mode-btn {
        min-height: 44px;
    }

    .enh-artists-wrapper {
        flex-direction: column;
        gap: 16px;
    }

    /* Artist cards — center and wrap */
    .enh-compact-list.enh-artists-grid {
        justify-content: center;
    }

    /* Album cards — wrap and fill space, 2 per row */
    .enh-compact-list.enh-albums-grid {
        flex-wrap: wrap;
        justify-content: center;
        gap: 10px;
        overflow-x: hidden;
    }

    .enh-compact-item.album-card {
        width: calc(50% - 8px);
        flex-shrink: 0;
    }

    .enh-compact-item.album-card .enh-item-name {
        font-size: 12px;
    }

    .enh-compact-item.album-card .enh-item-meta {
        font-size: 11px;
    }

    /* --- Enhanced Search Results --- */

    .track-result-card {
        padding: 14px;
        margin: 8px 4px;
        gap: 12px;
        flex-wrap: wrap;
    }

    .track-icon {
        width: 36px;
        height: 36px;
        font-size: 14px;
    }

    .track-info {
        flex: 1;
        min-width: 0;
    }

    .track-result-card .track-title {
        font-size: 13px;
        white-space: normal;
        word-break: break-word;
    }

    .track-details {
        white-space: normal;
        word-break: break-word;
    }

    .track-result-card .track-actions {
        width: 100%;
        display: flex;
        justify-content: flex-end;
    }

    .album-result-card {
        padding: 16px;
        margin: 8px 4px;
    }

    .album-card-header {
        gap: 12px;
        flex-wrap: wrap;
    }

    .album-icon {
        width: 44px;
        height: 44px;
        font-size: 22px;
    }

    .album-info {
        min-width: 0;
        flex: 1;
    }

    .album-title {
        font-size: 14px;
        white-space: normal;
        word-break: break-word;
    }

    .album-details {
        white-space: normal;
        word-break: break-word;
    }

    .album-actions {
        width: auto;
    }

    .album-track-list {
        margin-top: 12px;
        padding-top: 12px;
    }

    /* Standard search results */
    .search-result-item {
        padding: 12px;
        flex-wrap: wrap;
        gap: 10px;
    }

    .result-item__main-content {
        flex: 1;
        min-width: 0;
        gap: 10px;
    }

    .result-item__title {
        white-space: normal;
        word-break: break-word;
        font-size: 12px;
    }

    .result-item__secondary-info {
        white-space: normal;
        word-break: break-word;
    }

    .result-item__actions {
        width: auto;
        flex-shrink: 0;
    }

    .action-btn {
        width: 40px;
        height: 40px;
        border-radius: 20px;
    }

    /* Enhanced search artist/album grids */
    /* Enhanced search — tablet/mobile responsive */
    .enh-compact-list.enh-artists-grid {
        gap: 10px;
    }

    .enh-compact-item.artist-card {
        width: calc(50% - 8px);
        height: 200px;
    }

    .enh-compact-item.artist-card .enh-item-info {
        padding: 10px;
    }

    .enh-compact-item.artist-card .enh-item-name {
        font-size: 13px;
    }

    /* Track items — larger touch targets */
    .enh-compact-item.track-item {
        padding: 10px 12px;
        min-height: 56px;
    }

    .enh-item-image.track-cover,
    .enh-item-image-placeholder.track-placeholder {
        width: 44px;
        height: 44px;
    }

    /* Always show play button on touch devices */
    .enh-item-play-btn {
        opacity: 1 !important;
        transform: translateY(-50%) !important;
        position: static !important;
        transform: none !important;
        padding: 6px 10px;
        flex-shrink: 0;
    }

    .enh-item-duration {
        font-size: 12px;
        gap: 8px;
    }

    /* Source tabs — horizontal scroll on small screens */
    .enh-source-tabs {
        overflow-x: auto;
        flex-wrap: nowrap;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding-bottom: 4px;
    }
    .enh-source-tabs::-webkit-scrollbar {
        display: none;
    }

    .enh-source-tab {
        flex-shrink: 0;
        min-height: 36px;
        padding: 8px 14px;
    }

    /* --- Phase 4: Sync --- */

    .sync-content {
        max-width: 100%;
    }

    .sync-tabs {
        flex-wrap: wrap;
    }

    /* Keep the icon-chip shape on mobile too (was a 50%-width pill for the
       old labeled-tab design) so the strip stays uniform and reflow-free. */
    .sync-tab-button {
        min-width: 0;
        padding: 0;
    }

    /* Spotify playlist cards - stack vertically on mobile */
    .playlist-card {
        padding: 16px;
        margin: 8px 4px;
        border-radius: 14px;
    }

    .playlist-card-main {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }

    .playlist-card-content {
        min-width: 0;
        width: 100%;
    }

    .playlist-card-name {
        font-size: 15px;
        margin-bottom: 6px;
    }

    .playlist-card-info {
        font-size: 13px;
    }

    .playlist-card-actions {
        margin-left: 0;
        display: flex;
        gap: 8px;
    }

    .playlist-card-actions button {
        flex: 1;
        padding: 10px 14px;
        font-size: 12px;
    }

    .beatport-tabs {
        flex-wrap: wrap;
        gap: 4px;
    }

    .beatport-tab-button {
        flex: 0 0 calc(50% - 4px);
        padding: 10px 12px;
        font-size: 12px;
    }

    .beatport-genre-grid {
        grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    }

    .beatport-top10-container {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .beatport-top10-title {
        font-size: 24px;
    }

    .beatport-top10-card,
    .beatport-hype10-card {
        padding: 12px;
        min-height: 70px;
        max-height: none;
    }

    .beatport-top10-card-rank,
    .beatport-hype10-card-rank {
        font-size: 16px;
        min-width: 30px;
        margin-right: 10px;
    }

    .beatport-top10-card-artwork,
    .beatport-hype10-card-artwork {
        width: 44px;
        height: 44px;
        margin-right: 10px;
    }

    .beatport-top10-card-title,
    .beatport-hype10-card-title {
        font-size: 13px;
    }

    /* --- Beatport rebuild hero slider --- */
    .beatport-rebuild-slider {
        height: 280px;
    }

    .beatport-rebuild-slider-container {
        padding: 12px;
    }

    .beatport-rebuild-slide-content {
        padding: 16px 12px;
    }

    .beatport-rebuild-track-title {
        font-size: 20px;
    }

    .beatport-rebuild-artist-name {
        font-size: 14px;
    }

    .beatport-rebuild-slider-nav {
        display: none;
    }

    /* --- Beatport card sliders: convert from absolute stacking to show/hide --- */

    /* All slider tracks: auto height */
    .beatport-releases-slider-track,
    .beatport-hype-picks-slider-track,
    .beatport-charts-slider-track,
    .beatport-dj-slider-track {
        height: auto;
        min-height: auto;
    }

    /* All slides: position relative, hidden by default */
    .beatport-releases-slide,
    .beatport-hype-picks-slide,
    .beatport-charts-slide,
    .beatport-dj-slide {
        position: relative;
        top: auto;
        left: auto;
        width: 100%;
        height: auto;
        display: none;
        opacity: 0;
        transform: none;
    }

    /* Active slide: visible */
    .beatport-releases-slide.active,
    .beatport-hype-picks-slide.active,
    .beatport-charts-slide.active,
    .beatport-dj-slide.active {
        display: block;
        opacity: 1;
        transform: none;
    }

    /* Prev/next slides: hidden */
    .beatport-releases-slide.prev,
    .beatport-releases-slide.next,
    .beatport-hype-picks-slide.prev,
    .beatport-hype-picks-slide.next,
    .beatport-charts-slide.prev,
    .beatport-charts-slide.next,
    .beatport-dj-slide.prev,
    .beatport-dj-slide.next {
        display: none;
    }

    /* All slider containers: reduced padding */
    .beatport-releases-slider-container,
    .beatport-hype-picks-slider-container,
    .beatport-charts-slider-container,
    .beatport-dj-slider-container {
        padding: 12px;
    }

    /* All card grids: 2 columns, auto rows */
    .beatport-releases-grid,
    .beatport-hype-picks-grid,
    .beatport-charts-grid {
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: auto;
        gap: 10px;
        padding: 10px;
    }

    .beatport-dj-grid {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
        gap: 10px;
        padding: 10px;
    }

    /* Card heights: auto instead of fixed */
    .beatport-chart-card {
        height: auto;
        min-height: 120px;
        max-height: none;
    }

    .beatport-dj-card {
        height: auto;
        min-height: 120px;
        max-height: none;
    }

    /* Release/hype card compact */
    .beatport-release-card,
    .beatport-hype-pick-card {
        padding: 10px;
    }

    .beatport-release-artwork,
    .beatport-hype-pick-artwork {
        width: 50px;
        height: 50px;
    }

    .beatport-release-title,
    .beatport-hype-pick-title {
        font-size: 12px;
    }

    .beatport-release-artist,
    .beatport-hype-pick-artist {
        font-size: 11px;
    }

    /* Slider nav buttons (prev/next arrows) */
    .beatport-releases-slider-nav,
    .beatport-hype-picks-slider-nav,
    .beatport-charts-slider-nav,
    .beatport-dj-slider-nav {
        position: relative;
        top: auto;
        display: flex;
        justify-content: center;
        gap: 16px;
        padding: 10px 0;
        z-index: 1;
    }

    /* Slider indicators */
    .beatport-releases-slider-indicators,
    .beatport-hype-picks-slider-indicators,
    .beatport-charts-slider-indicators,
    .beatport-dj-slider-indicators {
        position: relative;
        bottom: auto;
        left: auto;
        transform: none;
        display: flex;
        justify-content: center;
        padding: 8px 0;
    }

    /* Section titles */
    .beatport-releases-title,
    .beatport-hype-picks-title,
    .beatport-charts-title {
        font-size: 20px;
    }

    /* Nav buttons */
    .beatport-nav-buttons-container {
        flex-direction: column;
        gap: 12px;
    }

    .beatport-nav-button {
        max-width: none;
        width: 100%;
    }

    .genre-chart-types-grid {
        grid-template-columns: 1fr;
    }

    /* --- Phase 5A: Artists --- */

    .artists-content {
        height: auto;
        overflow-y: visible;
    }

    .artists-search-state {
        min-height: auto;
        padding: 20px 16px;
        gap: 20px;
    }

    .artists-welcome-title {
        font-size: 24px;
    }

    .artists-welcome-subtitle {
        font-size: 14px;
    }

    .artists-results-state {
        padding: 16px;
    }

    .artists-results-header {
        flex-direction: column;
        gap: 12px;
        margin-bottom: 20px;
    }

    .artists-cards-container {
        flex-wrap: wrap;
        overflow-x: visible;
        overflow-y: visible;
        justify-content: center;
        padding: 16px 0;
    }

    .artist-card {
        width: 100%;
        max-width: 280px;
        height: 300px;
    }

    .artist-detail-info {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .album-cards-container,
    .singles-cards-container {
        grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
        gap: 10px;
    }

    .album-card-content {
        padding: 10px;
    }

    .album-card-name {
        font-size: 12px;
    }

    /* Artists page hero — mobile */
    .artists-hero-section {
        border-radius: 12px;
    }

    .artists-hero-main {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 16px;
    }

    .artists-hero-image {
        width: 140px;
        height: 175px;
        border-radius: 10px;
    }

    .artists-hero-name {
        font-size: 1.5em;
    }

    .artists-hero-genres {
        justify-content: center;
    }

    .artists-hero-badges {
        justify-content: center;
    }

    .artists-hero-content {
        padding: 16px 14px 20px;
    }

    .artists-hero-actions {
        position: static;
        justify-content: center;
        margin-top: 8px;
    }

    .artists-hero-bio {
        text-align: left;
    }

    .artists-hero-stats {
        justify-content: center;
    }

    .artists-hero-stat strong {
        font-size: 15px;
    }

    /* --- Phase 5B: Library --- */

    .library-container {
        height: auto;
        padding: 16px;
    }

    .library-controls {
        flex-direction: column;
    }

    .library-search-container {
        max-width: 100%;
    }

    .watchlist-filter {
        flex-wrap: wrap;
    }

    .library-watchlist-all-btn {
        font-size: 12px;
        padding: 5px 12px;
    }

    .watch-all-modal { max-width: 95vw; width: 95vw; }
    .watch-all-grid { grid-template-columns: 1fr; }
    .watch-all-stats { flex-wrap: wrap; gap: 8px; padding: 12px 14px; }
    .watch-all-stat-card { padding: 8px 12px; }
    .watch-all-stat-value { font-size: 18px; }
    .watch-all-cell { padding: 6px 8px; }
    .watch-all-cell-img, .watch-all-cell-placeholder { width: 32px; height: 32px; }
    .watch-all-header { padding: 16px 18px; }
    .watch-all-search-wrap { padding: 8px 14px 4px; }

    .library-card-watchlist-btn {
        opacity: 1;
    }

    .alphabet-selector-inner {
        flex-wrap: wrap;
        min-width: 0;
        gap: 4px;
    }

    .alphabet-btn {
        min-width: 32px;
        min-height: 32px;
    }

    .library-artists-grid {
        grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    }

    /* Artist Detail (Library) — Hero section */
    .artist-hero-section {
        margin: 10px;
        padding: 16px;
        border-radius: 12px;
    }

    .artist-hero-content {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 16px;
    }

    .artist-image,
    .artist-image-fallback {
        width: 100px;
        height: 100px;
    }

    .artist-hero-section .artist-name {
        font-size: 1.6em;
        text-align: center;
        display: block;
    }

    .artist-hero-badges {
        justify-content: center;
        flex-wrap: wrap;
        gap: 4px;
    }

    .artist-hero-badge {
        width: 22px;
        height: 22px;
    }

    .artist-genres-container {
        justify-content: center;
        flex-wrap: wrap;
    }

    .artist-hero-bio {
        font-size: 12px;
        -webkit-line-clamp: 3;
        max-height: fit-content;
    }

    .artist-hero-numbers {
        justify-content: center;
        gap: 20px;
    }

    .hero-stat-value {
        font-size: 18px;
    }

    .hero-stat-label {
        font-size: 10px;
    }

    .collection-overview {
        gap: 6px;
    }

    .category-label {
        font-size: 0.65em;
        min-width: 42px;
    }

    .category-stats {
        font-size: 0.65em;
    }

    /* Top tracks sidebar — stack below on mobile */
    .artist-hero-right {
        width: 100%;
        border-left: none;
        border-top: 1px solid rgba(255, 255, 255, 0.06);
        padding-top: 12px;
    }

    .hero-top-tracks {
        max-height: 200px;
        overflow-y: auto;
    }

    .releases-grid {
        grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    }

    /* --- Phase 6: Discover --- */

    .discover-hero-content {
        padding: 16px;
    }

    .discover-hero-bottom-actions {
        bottom: 12px;
        right: 12px;
        gap: 6px;
    }

    /* On a narrow hero the centered carousel indicators and the bottom-right
       action buttons both pin to the bottom edge and collide — lift the
       indicators above the action row so the dots stay usable. */
    .discover-hero-indicators {
        bottom: 62px;
    }

    .discover-hero-watch-all,
    .discover-hero-view-all {
        padding: 6px 12px;
        font-size: 11px;
    }

    /* Recommended Artists Modal - Mobile */
    .recommended-modal {
        max-width: 100vw;
        width: 100vw;
        max-height: 100vh;
        border-radius: 0;
    }

    .recommended-artists-grid {
        grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
        gap: 12px;
        padding: 12px 16px;
    }

    .recommended-actions-bar {
        padding: 12px 16px 0;
        flex-wrap: wrap;
    }

    .recommended-add-all-btn {
        width: 100%;
        text-align: center;
        padding: 10px;
    }

    .recommended-card-watchlist-btn {
        opacity: 1;
    }

    .discover-section-header {
        flex-direction: column;
        gap: 12px;
    }

    .discover-section-actions {
        width: 100%;
        flex-wrap: wrap;
    }

    .discover-section-actions .action-button {
        flex: 1;
        min-height: 44px;
        justify-content: center;
    }

    .discover-card {
        width: 45%;
    }

    /* Horizontal scroll tabs */
    .decade-tabs,
    .genre-tabs,
    .listenbrainz-tabs {
        overflow-x: auto;
        flex-wrap: nowrap;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .decade-tabs::-webkit-scrollbar,
    .genre-tabs::-webkit-scrollbar,
    .listenbrainz-tabs::-webkit-scrollbar {
        display: none;
    }

    .discover-download-sidebar {
        width: 60px;
        top: auto;
        bottom: 16px;
        right: 16px;
        height: auto;
        border-radius: 16px;
        border: 1px solid rgba(255, 255, 255, 0.1);
    }

    /* --- Phase 7: Settings --- */

    .settings-columns {
        flex-direction: column;
    }

    .settings-left-column,
    .settings-right-column,
    .settings-third-column {
        min-width: 0;
        width: 100%;
    }

    .page-header {
        flex-direction: column;
        gap: 12px;
        align-items: stretch;
    }

    .page-header button {
        width: 100%;
        min-height: 44px;
    }

    .api-test-buttons {
        flex-direction: column;
    }

    .api-test-buttons .test-button {
        width: 100%;
        min-width: 0;
    }

    .server-toggle-btn {
        flex: 1;
        min-height: 44px;
    }

    .path-input-group {
        flex-direction: column;
    }

    .path-input-group input {
        width: 100%;
    }

    .preset-button {
        flex: 1;
    }

    /* --- Phase 8: All Modals Responsive --- */

    .modal-overlay {
        padding: 8px;
        align-items: flex-start;
        overflow-y: auto;
    }

    .version-modal {
        width: 95vw;
    }

    .add-to-wishlist-modal {
        width: 100%;
        max-width: 100%;
    }

    .download-missing-modal-content {
        width: 100%;
        max-width: 100%;
        height: 95vh;
        max-height: 95vh;
        border-radius: 16px;
    }

    /* Download modal hero - compact */
    .download-missing-modal-hero {
        padding: 12px 14px;
        gap: 10px;
        min-height: auto;
    }

    .download-missing-modal-hero-content {
        gap: 10px;
    }

    .download-missing-modal-hero-images {
        gap: 8px;
    }

    .download-missing-modal-hero-image {
        width: 48px;
        height: 48px;
    }

    .download-missing-modal-hero-image.artist {
        width: 44px;
        height: 44px;
    }

    .download-missing-modal-hero-image.album {
        width: 48px;
        height: 48px;
    }

    .download-missing-modal-hero-icon {
        width: 48px;
        height: 48px;
        font-size: 24px;
    }

    .download-missing-modal-hero-title {
        font-size: 15px;
        white-space: normal;
        line-height: 1.2;
    }

    .download-missing-modal-hero-subtitle {
        font-size: 12px;
        white-space: normal;
    }

    .download-missing-modal-hero-details {
        gap: 6px;
        flex-wrap: wrap;
    }

    .download-missing-modal-hero-detail {
        font-size: 10px;
        padding: 2px 5px;
    }

    .download-missing-modal-header-actions {
        padding: 10px 14px 0 0;
    }

    /* Download modal body */
    .download-missing-modal-body {
        padding: 10px 12px 14px 12px;
        gap: 12px;
    }

    /* Download stats grid */
    .download-dashboard-stats {
        grid-template-columns: repeat(4, 1fr);
        gap: 8px;
        padding: 12px;
    }

    .dashboard-stat-number {
        font-size: 20px;
    }

    .dashboard-stat-label {
        font-size: 10px;
    }

    /* Download tracks table - compact on mobile */
    .download-tracks-header {
        padding: 10px 12px;
    }

    .download-tracks-title {
        font-size: 13px;
    }

    .track-selection-count {
        font-size: 10px;
    }

    .download-tracks-table {
        table-layout: auto;
    }

    .download-tracks-table th,
    .download-tracks-table td {
        padding: 6px 4px;
        font-size: 10px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* Checkbox column sizing on mobile */
    .track-select-header,
    .track-select-cell {
        width: auto;
        padding: 6px 4px !important;
    }

    .track-select-header input[type="checkbox"],
    .track-select-cell input[type="checkbox"] {
        width: 14px;
        height: 14px;
    }

    /* Hide # and Duration columns on mobile */
    .download-tracks-table td.track-number {
        display: none;
    }

    .download-tracks-table td.track-duration {
        display: none;
    }

    /* Hide matching th headers — different positions depending on checkbox column */
    .download-tracks-table:has(.track-select-header) th:nth-child(2),
    .download-tracks-table:not(:has(.track-select-header)) th:nth-child(1) {
        display: none;
    }

    .download-tracks-table:has(.track-select-header) th:nth-child(5) {
        display: none;
    }

    .track-name {
        width: auto;
        max-width: 120px;
        font-size: 11px;
    }

    .track-artist {
        width: auto;
        max-width: 80px;
        font-size: 11px;
    }

    .track-match-status {
        width: auto;
        font-size: 10px;
    }

    .track-download-status {
        width: auto;
        font-size: 10px;
    }

    .download-tracks-table .track-actions {
        width: auto;
        font-size: 10px;
    }

    .cancel-track-btn {
        padding: 3px 6px;
        font-size: 10px;
    }

    /* Download modal footer - stack everything vertically */
    .download-missing-modal-footer {
        padding: 12px;
        flex-direction: column;
        gap: 10px;
        align-items: stretch;
    }

    .download-phase-controls {
        width: 100%;
        flex-direction: column;
        gap: 8px;
        align-items: stretch;
    }

    /* Toggle container - stack vertically, prevent overflow */
    .force-download-toggle-container {
        width: 100%;
        padding: 8px 12px;
        box-sizing: border-box;
    }

    .force-download-toggle {
        gap: 8px;
    }

    .force-download-toggle span {
        font-size: 11px;
        line-height: 1.3;
        word-break: break-word;
    }

    .force-download-toggle input[type="checkbox"] {
        width: 40px;
        height: 20px;
        flex-shrink: 0;
    }

    .force-download-toggle input[type="checkbox"]:before {
        width: 14px;
        height: 14px;
    }

    .force-download-toggle input[type="checkbox"]:checked:before {
        transform: translateX(20px);
    }

    /* All download control buttons - full width stacked */
    .download-control-btn {
        width: 100%;
        min-width: 0;
        max-width: none;
        padding: 10px 14px;
        font-size: 12px;
        text-align: center;
        box-sizing: border-box;
    }

    .modal-close-section {
        width: 100%;
        flex-direction: column;
        gap: 8px;
    }

    .modal-close-section .download-control-btn {
        width: 100%;
    }

    .youtube-discovery-modal {
        width: 100%;
        max-width: 100%;
    }

    .artist-download-modal-content {
        width: 100%;
        max-width: 100%;
    }

    .confirmation-modal {
        width: 90vw;
        max-width: 90vw;
        padding: 24px;
    }

    .confirmation-modal button {
        width: 100%;
        min-height: 44px;
    }

    .genre-browser-modal-container {
        width: 100%;
        max-width: 100%;
    }

    .tool-help-modal-content {
        width: 95vw;
        max-width: 95vw;
    }

    /* Wishlist & Watchlist modals (playlist-modal based) */
    .playlist-modal {
        width: 100%;
        max-width: 100%;
        max-height: 95vh;
        border-radius: 16px;
        overflow: hidden;
        display: flex;
        flex-direction: column;
    }

    .playlist-modal-header {
        padding: 16px;
        flex-wrap: wrap;
        gap: 8px;
        flex-shrink: 0;
    }

    .playlist-header-content h2 {
        font-size: 18px;
    }

    .playlist-quick-info {
        flex-direction: column;
        gap: 4px;
    }

    /* Critical fix: allow modal body to scroll */
    .playlist-modal-body {
        padding: 0 16px;
        overflow-y: auto;
        overflow-x: hidden;
        flex: 1;
        min-height: 0;
    }

    /* Wishlist category tracks view */
    .wishlist-category-tracks {
        height: auto;
        padding: 0 16px;
        overflow: visible;
    }

    /* Tracks scroll container - fit within modal */
    .playlist-tracks-scroll {
        max-height: none;
        overflow-y: visible;
        flex: none;
    }

    /* Album grid needs to be able to grow */
    .wishlist-album-grid {
        overflow: visible;
    }

    .playlist-modal-footer {
        padding: 16px;
        flex-direction: column;
        gap: 10px;
        flex-shrink: 0;
    }

    .playlist-modal-footer-left,
    .playlist-modal-footer-right {
        width: 100%;
        flex-direction: column;
        gap: 8px;
    }

    /* Footer/action buttons - full width stacked */
    .playlist-modal-footer .playlist-modal-btn,
    .watchlist-actions .playlist-modal-btn {
        width: 100%;
        min-height: 44px;
        text-align: center;
    }

    /* Watchlist fullscreen modal on mobile */
    .watchlist-fullscreen {
        max-width: 100vw;
        width: 100vw;
        max-height: 100vh;
        border-radius: 0;
    }

    /* Watchlist card grid on mobile */
    .watchlist-artists-grid {
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
        gap: 16px;
        padding: 16px;
    }

    .watchlist-card-info {
        padding: 0 12px 6px;
        margin-top: -28px;
    }

    .watchlist-card-name {
        font-size: 13px;
    }

    .watchlist-card-meta {
        font-size: 10px;
    }

    /* Show checkbox, remove, and gear always on mobile (no hover) */
    .watchlist-card-checkbox,
    .watchlist-artist-card .watchlist-card-remove,
    .watchlist-artist-card .watchlist-card-gear {
        opacity: 1;
    }

    .watchlist-detail-hero {
        flex-direction: column;
        text-align: center;
    }

    .watchlist-detail-hero-stats {
        justify-content: center;
    }

    .watchlist-detail-hero-genres {
        justify-content: center;
    }

    .watchlist-detail-actions {
        flex-direction: column;
    }

    .watchlist-detail-actions button {
        width: 100%;
    }

    .watchlist-search-container {
        padding: 0 16px;
    }

    /* Retag modal on mobile — fullscreen */
    .retag-modal-container {
        max-width: 100vw;
        width: 100vw;
        max-height: 100vh;
        border-radius: 0;
    }

    .retag-modal-header {
        padding: 16px;
        flex-wrap: wrap;
        gap: 8px;
    }

    .retag-modal-body {
        padding: 16px;
    }

    .retag-batch-bar {
        margin: 0 16px 12px;
    }

    .retag-group-header {
        padding: 12px;
        gap: 10px;
    }

    .retag-group-image,
    .retag-group-image-placeholder {
        width: 44px;
        height: 44px;
    }

    .retag-group-album {
        font-size: 13px;
    }

    .retag-search-container {
        max-width: 100vw;
        width: 100vw;
        max-height: 100vh;
        border-radius: 0;
    }

    /* Watchlist live activity - stack on mobile */
    #watchlist-live-activity {
        flex-direction: column;
        align-items: center;
    }

    /* Wishlist category grid */
    .wishlist-category-grid {
        grid-template-columns: 1fr;
        gap: 12px;
        padding: 16px;
    }

    .wishlist-category-card {
        min-height: 140px;
    }

    /* Wishlist track items */
    .wishlist-track-item {
        padding: 10px 12px;
        padding-right: 50px;
        gap: 8px;
    }

    .wishlist-track-number {
        width: 24px;
        font-size: 12px;
    }

    .wishlist-track-name {
        font-size: 13px;
    }

    .wishlist-track-artists {
        font-size: 12px;
    }

    .wishlist-delete-btn {
        padding: 6px 8px;
        font-size: 13px;
        right: 8px;
    }

    .wishlist-delete-album-btn {
        padding: 6px 8px;
        font-size: 13px;
        right: 8px;
    }

    .wishlist-delete-btn-small {
        padding: 4px 8px;
        font-size: 12px;
    }

    .wishlist-back-btn {
        min-height: 36px;
        font-size: 13px;
    }

    /* Modal footer buttons */
    .modal-footer button,
    .modal-actions button {
        flex: 1;
        min-height: 44px;
    }

    /* --- Phase 9: Touch & Hover Adaptations --- */

    /* Global touch targets - only standalone/action buttons, not inline.
       Round icon buttons (fixed-size circles) are excluded so the min-height
       can't stretch them into vertical ellipses. The video dashboard's Studios
       halves (.vst-half) are excluded because this chain's specificity beats
       their own min-height: 208px — their content is absolutely positioned, so
       "winning" here collapses each half to a 38px sliver on phones. */
    button:not(.watchlist-card-remove):not(.wishlist-delete-btn):not(.wishlist-delete-album-btn):not(.wishlist-delete-btn-small):not(.wishlist-back-btn):not(.alphabet-btn):not(.filter-btn):not(.playlist-modal-close):not(.notif-bell-btn):not(.helper-float-btn):not(.hero-indicator):not(.discover-blacklist-btn):not(.tool-help-button):not(.vst-half):not([data-import-page-result-row]):not([data-import-page-inline-action]):not(.modal-track-play-btn):not(.cancel-track-btn) {
        min-height: 38px;
    }

    /* Range slider thumbs */
    input[type="range"]::-webkit-slider-thumb {
        width: 24px;
        height: 24px;
    }

    input[type="range"]::-moz-range-thumb {
        width: 24px;
        height: 24px;
    }

    input[type="range"] {
        min-height: 12px;
    }

    /* Fix hover-only invisible elements */
    .wishlist-delete-btn {
        opacity: 1;
        pointer-events: auto;
    }

    .wishlist-delete-album-btn {
        opacity: 1;
        pointer-events: auto;
    }

    /* --- Phase 10: Typography & Spacing --- */

    /* Prevent iOS zoom on focus */
    input,
    select,
    textarea {
        font-size: 16px;
    }

    /* Font size floors */
    .app-subtitle,
    .stat-label,
    .stat-value-small {
        font-size: 12px;
    }

    /* Scale down oversized headings */
    .discover-hero-title {
        font-size: 32px;
    }

    .page-header h2 {
        font-size: 22px;
    }

    /* Spacing reductions */
    .page {
        padding: 70px 16px 72px 16px;
    }

    /* Nested wrappers each add horizontal padding, which compounds on a phone
       into more chrome than content (~136px of a 375px screen). Trim the
       biggest offender — the global .page-shell card (margin 20 + padding 24 =
       44px/side) — and drop the settings content wrappers' inner gutters so
       controls get the width back. Global, so all 8 .page-shell pages benefit
       (X4). */
    .page-shell {
        margin: 10px;
        padding: 24px 16px 26px;
    }
    #settings-page .settings-content {
        padding-left: 0;
        padding-right: 0;
    }
    #settings-page .settings-columns {
        padding-left: 0;
        padding-right: 0;
    }

    .activity-section {
        padding: 16px;
    }

    /* --- Chart slideshow grids (fixed 4-col → responsive) --- */
    .new-charts-grid,
    .dj-charts-grid,
    .featured-charts-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }

    /* --- Media player compact --- */
    .media-player {
        margin: 8px 10px;
        padding: 14px;
        border-radius: 12px;
        min-height: 100px;
        flex-shrink: 0;
    }

    .media-header {
        gap: 10px;
        margin-bottom: 6px;
    }

    .media-player .track-title {
        font-size: 13px;
    }

    .media-player .artist-name {
        font-size: 11px;
    }

    .media-expanded {
        margin-top: 6px;
        padding-top: 6px;
    }

    .media-controls {
        gap: 8px;
    }

    .volume-control {
        gap: 6px;
    }

    .volume-slider {
        width: 80px;
    }

    /* --- Settings form inputs full width --- */
    .form-group select {
        width: 100%;
    }

    .form-group input[type="number"] {
        width: 100%;
    }

    .form-group input[type="text"],
    .form-group input[type="url"],
    .form-group input[type="password"] {
        width: 100%;
        box-sizing: border-box;
    }

    /* --- Toast container mobile adjustment --- */
    .toast-container {
        bottom: 16px;
        left: 16px;
        right: 16px;
        transform: none;
        width: auto;
        z-index: 10003;
    }

    .toast {
        max-width: 100%;
    }
}

/* ======================================
   EXTRA SMALL SCREENS (≤480px)
   ====================================== */

@media (max-width: 480px) {

    .page {
        padding: 70px 12px 72px 12px;
    }

    /* Even tighter card gutters on the smallest phones (X4). */
    .page-shell {
        margin: 6px;
        padding: 20px 12px 22px;
    }

    .stats-grid-dashboard {
        grid-template-columns: 1fr;
    }

    .discover-card {
        width: 140px;
    }

    .discover-hero-title {
        font-size: 26px;
    }

    .artist-card {
        width: 100%;
        max-width: 280px;
    }

    .header-button {
        font-size: 13px;
        padding: 10px 14px;
    }

    .sync-tab-button {
        min-width: 0;
    }

    /* Tool cards tighter on small screens */
    .tool-card {
        padding: 16px 12px;
    }

    .tool-card-title {
        font-size: 14px;
    }

    /* Enhanced search - smaller cards on small screens */
    /* Enhanced search — small phone */
    .enh-compact-list.enh-artists-grid {
        gap: 8px;
    }

    .enh-compact-item.artist-card {
        width: calc(50% - 6px);
        height: 170px;
    }

    .enh-compact-item.artist-card .enh-item-info {
        padding: 8px;
    }

    .enh-compact-item.artist-card .enh-item-name {
        font-size: 11px;
    }

    .enh-compact-item.album-card {
        width: calc(50% - 6px);
    }

    .enh-compact-item.album-card .enh-item-name {
        font-size: 11px;
    }

    .enh-compact-item.album-card .enh-item-info {
        padding: 8px 10px 10px;
    }

    .enh-compact-item.track-item {
        padding: 10px 8px;
        gap: 10px;
    }

    .enh-compact-item.track-item .enh-item-name {
        font-size: 13px;
    }

    .enh-compact-item.track-item .enh-item-meta {
        font-size: 11px;
    }

    .enh-item-image.track-cover,
    .enh-item-image-placeholder.track-placeholder {
        width: 38px;
        height: 38px;
    }

    .enh-section-title {
        font-size: 11px;
    }

    /* Beatport tighter */
    .beatport-tab-button {
        flex: 0 0 100%;
        font-size: 12px;
    }

    .beatport-rebuild-slider {
        height: 220px;
    }

    .beatport-rebuild-track-title {
        font-size: 16px;
    }

    .beatport-rebuild-artist-name {
        font-size: 12px;
    }

    .beatport-top10-card,
    .beatport-hype10-card {
        padding: 10px;
    }

    .beatport-top10-card-artwork,
    .beatport-hype10-card-artwork {
        width: 36px;
        height: 36px;
    }

    /* Beatport card grids: single column at 480px */
    .beatport-releases-grid,
    .beatport-hype-picks-grid,
    .beatport-charts-grid,
    .beatport-dj-grid {
        grid-template-columns: 1fr;
        gap: 8px;
        padding: 8px;
    }

    .beatport-release-card,
    .beatport-hype-pick-card {
        padding: 8px;
    }

    .beatport-release-artwork,
    .beatport-hype-pick-artwork {
        width: 40px;
        height: 40px;
    }

    .beatport-chart-card,
    .beatport-dj-card {
        min-height: 100px;
    }

    /* Playlist modal footer tighter */
    .playlist-modal-header {
        padding: 12px;
    }

    .playlist-modal-footer {
        padding: 12px;
    }

    .playlist-modal-footer .playlist-modal-btn {
        padding: 10px 16px;
        font-size: 13px;
    }

    /* Watchlist cards — tighter grid on small screens */
    .watchlist-artists-grid {
        grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
        gap: 12px;
        padding: 12px;
    }

    .watchlist-card-name {
        font-size: 12px;
    }

    .watchlist-card-info {
        padding: 0 10px 4px;
        margin-top: -24px;
    }

    .watchlist-pill {
        font-size: 8px;
        padding: 2px 5px;
    }

    .watchlist-card-pills {
        padding: 2px 10px 8px;
    }

    .watchlist-detail-content {
        padding: 20px 16px;
    }

    .watchlist-detail-hero img {
        width: 80px;
        height: 80px;
    }

    .watchlist-detail-hero-name {
        font-size: 22px;
    }

    .watchlist-detail-releases {
        grid-template-columns: 1fr;
    }

    /* Download modal - even more compact */
    .download-missing-modal-hero {
        padding: 10px 12px;
    }

    .download-missing-modal-hero-image,
    .download-missing-modal-hero-image.artist,
    .download-missing-modal-hero-image.album {
        width: 40px;
        height: 40px;
    }

    .download-missing-modal-hero-icon {
        width: 40px;
        height: 40px;
        font-size: 20px;
    }

    .download-missing-modal-hero-title {
        font-size: 14px;
    }

    .download-missing-modal-hero-subtitle {
        font-size: 11px;
    }

    .download-missing-modal-body {
        padding: 8px 10px 12px 10px;
    }

    /* Hide Library Match column too at 480px */
    .download-tracks-table td.track-match-status {
        display: none;
    }

    .download-tracks-table:has(.track-select-header) th:nth-child(6),
    .download-tracks-table:not(:has(.track-select-header)) th:nth-child(4) {
        display: none;
    }

    .track-name {
        max-width: 100px;
    }

    .track-artist {
        max-width: 70px;
    }

    .download-tracks-table th,
    .download-tracks-table td {
        padding: 5px 3px;
        font-size: 9px;
    }

    .download-control-btn {
        padding: 8px 10px;
        font-size: 11px;
    }

    .force-download-toggle span {
        font-size: 10px;
    }

    .download-missing-modal-footer {
        padding: 10px;
    }

    .dashboard-stat-number {
        font-size: 18px;
    }

    /* Chart grids single column at small screens */
    .new-charts-grid,
    .dj-charts-grid,
    .featured-charts-grid {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    /* Media player even more compact */
    .media-player {
        margin: 6px 8px;
        padding: 10px;
        min-height: 90px;
        flex-shrink: 0;
    }

    .media-player .track-title {
        font-size: 12px;
    }

    .volume-slider {
        width: 60px;
    }
}

/* ======================================
   TOUCH DEVICE ADAPTATIONS
   ====================================== */

@media (hover: none) {

    /* Disable alphabet-btn scale hover effect for touch */
    .alphabet-btn:hover {
        transform: none;
    }

    /* Make hover-reveal elements always visible */
    .wishlist-delete-btn,
    .wishlist-delete-album-btn {
        opacity: 1;
        pointer-events: auto;
    }

    /* Active feedback states */
    button:active,
    .nav-button:active,
    .filter-btn:active,
    .header-button:active {
        opacity: 0.7;
        transition: opacity 0.1s ease;
    }
}

@media (max-width: 768px) {
    /* Profile Picker - Mobile */
    .profile-picker-grid {
        gap: 20px;
    }

    .profile-avatar {
        width: 64px;
        height: 64px;
        font-size: 26px;
    }

    .profile-manage-content {
        width: calc(100vw - 32px);
        max-width: 400px;
    }

    .profile-pin-content {
        width: calc(100vw - 32px);
        max-width: 340px;
    }

    /* Enhanced Library Management - Mobile */
    .enhanced-artist-meta-grid {
        grid-template-columns: 1fr;
    }
    .enhanced-meta-field.wide {
        grid-column: span 1;
    }
    .enhanced-track-table .col-path,
    .enhanced-track-table .col-bpm,
    .enhanced-track-table .col-format,
    .enhanced-track-table .col-match,
    .enhanced-track-table .col-disc {
        display: none;
    }
    .enhanced-manual-match-modal {
        width: 95vw;
    }
    .enhanced-album-meta-row {
        grid-template-columns: 1fr 1fr;
    }
    .enhanced-bulk-bar {
        left: 10px;
        right: 10px;
        padding: 8px 12px;
        flex-wrap: wrap;
    }
    /* above the full-width mobile player (bottom:62px, 110px tall) */
    .enhanced-bulk-bar.visible {
        bottom: 184px;
    }
    .enhanced-bulk-modal {
        width: calc(100vw - 32px);
    }

    /* Discography filter bar */
    .discography-filters {
        gap: 6px;
        padding: 8px 0 12px;
    }
    .filter-group {
        gap: 4px;
        flex-wrap: wrap;
    }
    .filter-label {
        font-size: 10px;
        width: 100%;
    }
    .discography-filter-btn {
        padding: 4px 10px;
        font-size: 11px;
    }
    .filter-divider {
        display: none;
    }
    .enhanced-view-toggle-btn {
        padding: 5px 12px;
        font-size: 11px;
    }

    /* Enhanced view — artist card */
    .enhanced-artist-meta-header {
        flex-direction: column;
        align-items: stretch;
        padding: 16px;
        gap: 12px;
    }
    .enhanced-artist-meta-header-left {
        width: 100%;
        gap: 12px;
        flex-basis: auto;
    }
    .enhanced-artist-meta-image {
        width: 56px;
        height: 56px;
    }
    .lib-artist-initial {
        font-size: 22px;
    }
    .enhanced-artist-meta-name {
        font-size: 20px;
        white-space: normal;
    }
    .enhanced-artist-meta-actions {
        width: 100%;
        justify-content: flex-start;
        gap: 6px;
    }
    .enhanced-artist-meta-actions .lib-btn {
        flex: 1 1 auto;
        justify-content: center;
        min-width: 0;
        padding: 0 10px;
        font-size: 12px;
    }
    .lib-artist-foot {
        padding: 12px 16px 14px;
        gap: 12px;
    }
    .lib-quality {
        max-width: none;
        flex-basis: 100%;
    }
    .enhanced-artist-meta-form {
        padding: 0 16px 16px;
    }

    /* Enhanced view — album rows */
    .enhanced-album-row {
        gap: 12px;
        padding: 8px 12px 8px 8px;
    }
    .enhanced-album-art-wrap {
        width: 48px;
        height: 48px;
    }
    /* no hover on a phone: the play overlay is always there, quietly */
    .enhanced-album-play-btn {
        opacity: 1;
        background: rgba(0, 0, 0, 0.35);
    }
    .enhanced-album-title {
        font-size: 14px;
    }
    .enhanced-album-meta-line {
        font-size: 11.5px;
        white-space: normal;
    }
    .lib-album-side .enhanced-format-badge {
        display: none;
    }

    /* Enhanced view — expanded album */
    .enhanced-tracks-panel.visible > .enhanced-tracks-panel-inner {
        padding: 16px 12px 12px;
    }
    .enhanced-expanded-header {
        flex-direction: column;
        gap: 14px;
    }
    .enhanced-expanded-art-wrap {
        width: 120px;
        height: 120px;
        align-self: center;
    }
    .enhanced-expanded-info {
        width: 100%;
        align-items: center;
        text-align: center;
    }
    .enhanced-expanded-title {
        font-size: 20px;
        white-space: normal;
    }
    .enhanced-expanded-genres,
    .enhanced-expanded-info .lib-sources {
        justify-content: center;
    }
    .enhanced-expanded-actions {
        justify-content: center;
        width: 100%;
    }
    .enhanced-expanded-actions .lib-btn {
        flex: 1 1 auto;
        justify-content: center;
    }
    .enhanced-expanded-actions .lib-btn.icon {
        flex: 0 0 34px;
    }
    .enhanced-album-meta-row {
        grid-template-columns: 1fr !important;
        gap: 8px;
        padding: 12px;
    }
    .enhanced-album-meta-input {
        font-size: 12px;
    }
    .enhanced-album-save-btn {
        width: 100%;
    }

    /* Enhanced view — track table */
    .enhanced-track-table {
        table-layout: auto;
        font-size: 12px;
    }
    .enhanced-track-table th,
    .enhanced-track-table td {
        padding: 6px 4px;
        font-size: 12px;
    }
    .enhanced-track-table .col-num {
        width: 24px;
    }
    .enhanced-track-table .col-title {
        white-space: normal;
        word-break: break-word;
    }
    .enhanced-track-table .col-duration {
        width: 42px;
        font-size: 11px;
    }
    .enhanced-track-table .col-bitrate {
        display: none;
    }
    .enhanced-track-table .col-play {
        width: 26px;
    }
    /* Hide less essential columns on mobile */
    .enhanced-track-table .col-path,
    .enhanced-track-table .col-bpm,
    .enhanced-track-table .col-format,
    .enhanced-track-table .col-match,
    .enhanced-track-table .col-disc {
        display: none;
    }

    /* Collapse queue/actions/report into the single ⋯ actions column on mobile */
    .enhanced-track-table .col-queue,
    .enhanced-track-table .col-delete,
    .enhanced-track-table .col-track-actions,
    .enhanced-track-table .col-report {
        display: none;
    }
    .enhanced-track-table .col-mobile-actions {
        display: table-cell;
        width: 36px;
        text-align: center;
    }

    /* Mobile actions popover */
    .enhanced-mobile-actions-popover {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        background: rgba(20, 20, 20, 0.98);
        backdrop-filter: blur(20px);
        border-top: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: 16px 16px 0 0;
        padding: 16px;
        z-index: 10001;
        display: flex;
        flex-direction: column;
        gap: 4px;
        animation: slideUpPopover 0.25s ease-out;
    }
    .enhanced-mobile-actions-popover .popover-title {
        font-size: 13px;
        font-weight: 600;
        color: rgba(255, 255, 255, 0.5);
        padding: 0 4px 8px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.06);
        margin-bottom: 4px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .enhanced-mobile-actions-popover button {
        display: flex;
        align-items: center;
        gap: 12px;
        width: 100%;
        padding: 14px 16px;
        background: none;
        border: none;
        border-radius: 10px;
        color: rgba(255, 255, 255, 0.85);
        font-size: 14px;
        cursor: pointer;
        transition: background 0.15s;
    }
    .enhanced-mobile-actions-popover button:active {
        background: rgba(255, 255, 255, 0.08);
    }
    .enhanced-mobile-actions-popover button .popover-icon {
        font-size: 16px;
        width: 24px;
        text-align: center;
    }
    .enhanced-mobile-actions-popover button.popover-delete {
        color: rgba(255, 80, 80, 0.8);
    }
    .enhanced-mobile-actions-popover button.popover-cancel {
        color: rgba(255, 255, 255, 0.4);
        border-top: 1px solid rgba(255, 255, 255, 0.06);
        margin-top: 4px;
    }
    .mobile-popover-overlay {
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.5);
        z-index: 10000;
    }

    @keyframes slideUpPopover {
        from { transform: translateY(100%); }
        to { transform: translateY(0); }
    }

    /* Bulk bar */
    .enhanced-bulk-bar {
        flex-wrap: wrap;
        gap: 8px;
    }
    .enhanced-bulk-bar .enhanced-bulk-btn {
        font-size: 11px;
        padding: 6px 10px;
    }
    /* Now Playing Modal */
    .np-modal {
        width: 100vw;
        max-width: none;
        max-height: none;
        height: 100vh;
        border-radius: 0;
    }
    .np-body {
        flex-direction: column;
        padding: 48px 24px 24px;
        gap: 24px;
        overflow-y: auto;
        max-height: 100vh;
    }
    .np-album-art-container {
        width: 220px;
        height: 220px;
        margin: 0 auto;
    }
    .np-track-info {
        width: 100%;
    }
    .np-track-title {
        font-size: 18px;
    }
    .np-volume-slider-container {
        width: 120px;
    }
}

/* ======================================
   ARTIST ENRICHMENT RINGS — Mobile
   ====================================== */

@media (max-width: 768px) {
    .artist-enrichment-coverage {
        margin-top: 12px;
    }

    .artist-enrich-grid {
        grid-template-columns: repeat(5, 1fr);
        gap: 8px 4px;
    }

    .artist-enrich-ring {
        width: 36px;
        height: 36px;
    }

    .artist-enrich-ring svg {
        width: 36px;
        height: 36px;
    }

    .artist-enrich-ring .ring-pct {
        font-size: 8px;
    }

    .artist-enrich-label {
        font-size: 0.5em;
    }
}

@media (max-width: 480px) {
    .artist-enrich-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 10px 8px;
    }
}

/* ======================================
   AUTOMATIONS PAGE — Mobile
   ====================================== */

@media (max-width: 768px) {
    .automations-container {
        padding: 16px;
    }

    .automations-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .automations-header-actions {
        width: 100%;
        flex-wrap: wrap;
        gap: 8px;
    }

    .automations-header-actions button {
        flex: 1;
        min-width: 120px;
    }

    .automations-stats {
        flex-wrap: wrap;
        gap: 8px;
    }

    .automations-stat {
        font-size: 12px;
    }

    /* Builder view */
    .builder-header {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
        padding: 12px;
    }

    .builder-name-input,
    .builder-group-input {
        width: 100%;
        font-size: 14px;
    }

    .builder-header-actions {
        width: 100%;
        display: flex;
        gap: 8px;
    }

    .builder-header-actions button {
        flex: 1;
        font-size: 12px;
        padding: 8px;
    }

    .builder-content {
        flex-direction: column;
    }

    .builder-sidebar {
        width: 100%;
        max-height: 200px;
        border-right: none;
        border-bottom: 1px solid rgba(255, 255, 255, 0.06);
        overflow-y: auto;
    }

    .builder-canvas {
        width: 100%;
        flex: 1;
    }

    .block-item {
        padding: 10px;
    }

    .block-inputs label {
        font-size: 12px;
    }

    .block-inputs input,
    .block-inputs select {
        font-size: 13px;
        padding: 6px 8px;
    }

    .condition-builder {
        flex-direction: column;
        gap: 6px;
    }

    .condition-builder select,
    .condition-builder input {
        width: 100%;
    }

    /* Automation cards */
    .automation-card {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .automation-card-actions {
        width: 100%;
        justify-content: flex-end;
    }
}

/* ======================================
   HYDRABASE PAGE — Mobile
   ====================================== */

@media (max-width: 768px) {
    .hydrabase-container {
        flex-direction: column;
        height: auto;
        overflow-y: auto;
    }

    .hydrabase-panel {
        width: 100%;
        min-height: 200px;
    }

    .hydrabase-card {
        padding: 12px;
    }

    .hydrabase-card > div {
        flex-direction: column;
        gap: 8px;
    }

    .hydrabase-card input,
    .hydrabase-card select {
        width: 100%;
        box-sizing: border-box;
    }

    .hydra-payload {
        width: 100%;
        min-height: 80px;
    }

    .hydrabase-response-area {
        max-height: 250px;
        font-size: 12px;
    }
}

/* ======================================
   WATCHLIST / ENHANCE BUTTONS — Mobile
   ====================================== */

@media (max-width: 768px) {
    .library-artist-radio-btn,
    .library-artist-watchlist-btn,
    .library-artist-enhance-btn {
        padding: 8px 14px;
        font-size: 12px;
        gap: 6px;
    }

    .library-artist-radio-btn .radio-icon,
    .library-artist-watchlist-btn .watchlist-icon,
    .library-artist-enhance-btn .enhance-icon {
        font-size: 12px;
    }
}

/* ======================================
   API RATE MONITOR — MOBILE
   ====================================== */

@media (max-width: 768px) {
    .rate-monitor-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 8px;
    }

    .rate-gauge-card {
        padding: 10px 8px 8px;
        border-radius: 12px;
    }

    .gauge-card-header {
        gap: 5px;
        margin-bottom: 2px;
    }

    .gauge-card-name {
        font-size: 11px;
    }

    .gauge-card-status {
        font-size: 8px;
        padding: 1px 5px;
    }

    .gauge-card-stats {
        padding: 0 2px;
    }

    .gauge-card-stat-val {
        font-size: 11px;
    }

    .gauge-card-stat-label {
        font-size: 7px;
    }

    .gauge-value {
        font-size: 20px !important;
    }

    .gauge-unit {
        font-size: 8px !important;
    }

    /* Rate modal */
    .rate-modal {
        width: 95vw !important;
        max-height: 90vh;
        border-radius: 14px;
    }

    .rate-modal-header h3 {
        font-size: 14px;
    }

    .rate-modal-body {
        padding: 14px 16px;
    }

    .rate-modal-ep-name {
        width: 100px;
        font-size: 11px;
    }

    .rate-modal-ep-value {
        font-size: 10px;
        width: 50px;
    }
}

@media (max-width: 480px) {
    .rate-monitor-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 6px;
    }

    .gauge-card-dot {
        width: 6px;
        height: 6px;
    }

    .gauge-card-name {
        font-size: 10px;
    }

    .gauge-card-status {
        display: none;
    }

    .gauge-budget-label {
        font-size: 7px;
    }

    .gauge-rl-badge {
        font-size: 8px;
        padding: 2px 6px;
        gap: 3px;
    }
}

/* ======================================
   NOTIFICATION SYSTEM — MOBILE
   ====================================== */

@media (max-width: 768px) {
    /* Toast */
    .toast-container {
        bottom: 72px;
        right: 12px;
        left: 12px;
    }

    .toast-compact {
        max-width: 100%;
        font-size: 12px;
        padding: 10px 12px;
        gap: 8px;
    }

    /* Bell button */
    .notif-bell-btn {
        bottom: 16px;
        right: 60px;
        width: 38px;
        height: 38px;
        font-size: 16px;
    }

    .notif-bell-badge {
        font-size: 9px;
        min-width: 14px;
        height: 14px;
    }

    /* Notification panel */
    .notif-panel {
        /* JS positions this inline from the bell's rect (right/bottom), which on
           mobile pushes it off-screen (the bell isn't flush right). Override the
           inline styles with !important and anchor both sides so it always fits. */
        left: 12px !important;
        right: 12px !important;
        width: auto !important;
        max-width: none !important;
        bottom: 62px !important;
        max-height: 55vh;
        border-radius: 14px;
    }

    .notif-panel-header {
        padding: 12px 14px 10px;
    }

    .notif-panel-title {
        font-size: 13px;
    }

    .notif-item {
        padding: 8px 14px;
    }

    .notif-item-msg {
        font-size: 12px;
    }

    .notif-item-time {
        font-size: 9px;
    }

    /* Helper button */
    .helper-float-btn {
        bottom: 16px;
        right: 12px;
        width: 38px;
        height: 38px;
        font-size: 16px;
    }

    /* Server Activity button — match the bell/helper row (it kept its desktop
       44px @ bottom 24 / right 136, so it floated bigger and higher than the
       other two on phones). Same size, same baseline, next slot leftward. */
    .activity-float-btn {
        bottom: 16px;
        right: 108px;
        width: 38px;
        height: 38px;
    }

    .activity-float-badge {
        font-size: 9px;
        min-width: 14px;
        height: 14px;
    }

    /* Global search bar */
    .gsearch-bar {
        width: calc(100vw - 160px);
        bottom: 16px;
        height: 38px;
    }

    .gsearch-bar.active {
        width: calc(100vw - 24px);
    }

    .gsearch-input {
        font-size: 13px;
    }

    .gsearch-results {
        max-height: 50vh;
        width: calc(100vw - 24px);
        left: 12px;
        right: 12px;
        transform: none;
        bottom: 60px;
    }

    .gsearch-item {
        padding: 6px;
    }

    .gsearch-item-art {
        width: 36px;
        height: 36px;
    }

    .gsearch-item-title {
        font-size: 12px;
    }

    .gsearch-item-sub {
        font-size: 10px;
    }
}

@media (max-width: 480px) {
    .notif-bell-btn {
        bottom: 12px;
        right: 54px;
        width: 34px;
        height: 34px;
    }

    .helper-float-btn {
        bottom: 12px;
        right: 10px;
        width: 34px;
        height: 34px;
    }

    .activity-float-btn {
        bottom: 12px;
        right: 96px;
        width: 34px;
        height: 34px;
    }

    .gsearch-bar {
        width: calc(100vw - 130px);
        bottom: 12px;
        height: 34px;
    }

    .gsearch-bar.active {
        width: calc(100vw - 20px);
    }

    .toast-container {
        bottom: 56px;
        right: 8px;
        left: 8px;
    }

    .notif-panel {
        left: 8px !important;
        right: 8px !important;
        width: auto !important;
        bottom: 54px !important;
    }
}

/* ─────────────────────────────────────────────────────────────
   Source picker row — Search page + global widget responsive.
   Chips shrink on tablet, labels drop on phone so the full row
   of 8 sources remains scannable without hijacking the screen. */
@media (max-width: 768px) {
    .enh-source-row {
        padding: 8px 8px;
        margin: 8px 0 10px;
        gap: 6px;
        border-radius: 12px;
    }
    .enh-source-icon {
        min-width: 72px;
        padding: 8px 10px;
        gap: 4px;
        font-size: 10.5px;
    }
    .enh-source-icon-glyph,
    .enh-source-icon-glyph img {
        width: 24px;
        height: 24px;
    }
    .enh-source-icon-label { font-size: 10.5px; }
    .enh-fallback-banner {
        font-size: 11px;
        padding: 6px 10px;
    }

    /* Global widget source row (inside the popover) */
    .gsearch-source-row {
        padding: 10px 10px 6px;
        gap: 4px;
    }
    .gsearch-source-icon {
        min-width: 62px;
        padding: 6px 8px;
        gap: 3px;
    }
    .gsearch-source-icon-glyph,
    .gsearch-source-icon-glyph img {
        width: 20px;
        height: 20px;
    }
    .gsearch-fallback-banner {
        font-size: 10px;
        padding: 5px 10px;
    }

    /* Ambient glow under the global search — trim size so it doesn't
       dominate a short mobile viewport. */
    .gsearch-aura {
        height: 180px;
        background:
            radial-gradient(ellipse 440px 160px at 50% 100%,
                rgba(var(--accent-rgb), 0.20) 0%,
                rgba(var(--accent-rgb), 0.08) 35%,
                rgba(var(--accent-rgb), 0.02) 65%,
                transparent 85%);
    }
    .gsearch-aura.active {
        background:
            radial-gradient(ellipse 540px 200px at 50% 100%,
                rgba(var(--accent-rgb), 0.34) 0%,
                rgba(var(--accent-rgb), 0.14) 28%,
                rgba(var(--accent-rgb), 0.04) 58%,
                transparent 85%);
    }

    /* Library empty-state hand-off CTA — allow wrap on narrow screens
       so long artist queries don't overflow. */
    .library-empty-search-cta {
        flex-wrap: wrap;
        justify-content: center;
        padding: 10px 14px;
        font-size: 13px;
        max-width: 100%;
    }
    .library-empty-search-cta-text {
        white-space: normal;
        text-align: center;
    }
}

/* Very narrow phones — drop the icon labels entirely and show just the
   glyphs. Tap target stays big enough, row compacts dramatically. */
@media (max-width: 480px) {
    .enh-source-row {
        padding: 6px 6px;
        gap: 4px;
        border-radius: 10px;
    }
    .enh-source-icon {
        min-width: 44px;
        padding: 6px 8px;
    }
    .enh-source-icon-label { display: none; }

    .gsearch-source-row {
        padding: 8px 8px 5px;
        gap: 4px;
    }
    .gsearch-source-icon {
        min-width: 40px;
        padding: 5px 7px;
    }
    .gsearch-source-icon-label { display: none; }

    .gsearch-aura { height: 140px; }

    .library-empty-search-cta {
        font-size: 12px;
        padding: 9px 12px;
    }
}

/* ============================================================================
   Mobile fixes (v2) — phone-only, all inside max-width:768px. Desktop untouched.
   ============================================================================ */
@media (max-width: 768px) {
    /* Center the artist hero action buttons + match-status chips on phone
       (moved here from the base rule so desktop stays left-aligned). */
    .artist-hero-actions { justify-content: center; }
    .enhanced-match-status-row { justify-content: center; }

    /* #8 Page-container heroes carry desktop-sized padding/margins that waste
       space and look off on a phone. Tighten them up. */
    .tools-maintenance-hero,
    .watchlist-artist-config-hero,
    .watchlist-detail-hero,
    .discover-hero {
        padding: 14px 14px;
        margin-bottom: 16px;
    }

    /* #9 Sync page header: title + the three action buttons (Auto-Sync / Library
       Match / Sync History) don't fit side-by-side. Stack the header and let the
       buttons wrap so all three are reachable. */
    .sync-header-row {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }
    .sync-header-row > div:last-child {
        flex-wrap: wrap;
    }
    .sync-header-row .sync-history-btn {
        flex: 1 1 auto;
    }
}

@media (max-width: 768px) {
    /* #6 Enhanced-view track table: a 6+ column table can't fit a phone and the
       panel clips the overflow, so only the first column showed. Drop table
       layout entirely and make each row a single flex line: play · title (takes
       the space) · duration · the ⋯ actions button. Secondary columns hidden. */
    .enhanced-track-table,
    .enhanced-track-table thead,
    .enhanced-track-table tbody,
    .enhanced-track-table tr,
    .enhanced-track-table td,
    .enhanced-track-table th {
        display: block;
        width: auto;
    }
    .enhanced-track-table thead { display: none; }
    .enhanced-track-table tr {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 8px 6px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    }
    .enhanced-track-table td,
    .enhanced-track-table th {
        padding: 0;
        border: none;
        white-space: normal;
        /* the desktop row height would stretch each block cell to 42px and
           float the checkbox above the title */
        height: auto;
    }
    .enhanced-track-table .col-play {
        flex: 0 0 auto;
        width: auto;
        line-height: 0;
    }
    /* no hover on a phone, so the play glyph cannot stay dim */
    .enhanced-track-table .enhanced-play-btn:not(:disabled) {
        color: rgba(255, 255, 255, 0.75);
    }
    .enhanced-track-table .col-title {
        flex: 1 1 auto;
        min-width: 0;
        word-break: break-word;
        font-size: 13px;
    }
    .enhanced-track-table .col-duration {
        flex: 0 0 auto;
        width: auto;
        font-size: 11px;
        opacity: 0.65;
    }
    .enhanced-track-table .col-mobile-actions {
        display: block;
        flex: 0 0 auto;
        width: auto;
        text-align: right;
    }
    /* Everything else folds into the ⋯ actions sheet — hide on the row. */
    .enhanced-track-table .col-num,
    .enhanced-track-table .col-disc,
    .enhanced-track-table .col-format,
    .enhanced-track-table .col-bitrate,
    .enhanced-track-table .col-bpm,
    .enhanced-track-table .col-path,
    .enhanced-track-table .col-match,
    .enhanced-track-table .col-queue,
    .enhanced-track-table .col-writetag,
    .enhanced-track-table .col-delete,
    .enhanced-track-table .col-track-actions,
    .enhanced-track-table .col-report,
    .enhanced-track-table tr > th:first-child {
        display: none;
    }
}

@media (max-width: 768px) {
    /* #7 Mini media player: on desktop it's a 340px widget pinned bottom-right
       (right:132px) — that overflows a phone and overlaps the bottom search.
       Make it a full-width bar that sits just ABOVE the global search bar
       (which is at bottom:16px, height:38px on mobile). */
    .media-player {
        left: 10px;
        right: 10px;
        width: auto;
        bottom: 62px;
        margin: 0;
    }
}

@media (max-width: 768px) {
    /* ── Now Playing modal — full responsive pass ──
       Desktop is a two-column (art | controls) layout with heavy 40-48px
       padding. Existing mobile rules made it full-screen + stacked the body but
       left the panels' desktop padding and the controls/queue/lyrics untouched. */
    .np-body {
        padding: 24px 16px 28px;
        gap: 20px;
    }
    .np-left,
    .np-right {
        width: 100%;
    }
    /* Album art scales with the screen instead of a fixed 220px. */
    .np-album-art-container {
        width: min(220px, 66vw);
        height: auto;
        aspect-ratio: 1 / 1;
        margin: 0 auto;
    }
    .np-track-info { text-align: center; }
    .np-action-buttons { justify-content: center; }
    .np-util-row { justify-content: center; flex-wrap: wrap; }
    /* Playback controls: tighten the gap so the row fits a phone. */
    .np-controls-row { gap: 12px; justify-content: center; }
    /* Queue + lyrics panels: drop the 40px desktop side padding that crushed
       content on a narrow screen; give them a bit more vertical room. */
    .np-queue-panel { padding: 0 16px 16px; }
    .np-lyrics-panel { padding: 0 16px; }
    .np-queue-body { max-height: 240px; }
    .np-lyrics-body { max-height: 300px; }
}

/* When the expanded Now Playing modal is open, hide the floating mini-player —
   it has a higher z-index (99998) than the modal overlay (10001), so it would
   otherwise float on top of the modal's content. Both are body-level siblings
   (#media-player follows #np-modal-overlay), and the overlay drops its .hidden
   class when open. Not width-scoped — applies on desktop too. */
.np-modal-overlay:not(.hidden) ~ #media-player {
    display: none !important;
}

@media (max-width: 768px) {
    /* Recommended-artist carousel cards → 2-up wrap on mobile. The base rule
       pins them with flex:0 0 160px, which overrides plain width — so override
       the flex-basis too for the 45% to take. */
    .recommended-card--carousel {
        flex: 0 0 45%;
        width: 45%;
    }
}

@media (max-width: 768px) {
    /* ── Downloads page (.adl-*) ──
       The redesign is single-column already; the phone pass is about row
       anatomy. Desktop rows are art + text + a right-hand status column,
       which squeezed titles to ~10 chars (and review rows to NOTHING).
       On a phone the text owns line one and everything else wraps under it. */

    .adl-hero {
        gap: 10px 14px;
    }
    .adl-hero-stats {
        gap: 18px;
        width: 100%;
        justify-content: space-between;
    }
    .adl-stat { min-width: 0; }
    .adl-stat-num { font-size: 1.4rem; }
    .adl-hero-actions {
        width: 100%;
    }
    .adl-cancel-all-btn,
    .adl-clear-btn { flex: 1 1 auto; padding: 8px 13px; }

    /* view tabs spread across the full width; status chips scroll */
    .adl-view-tabs {
        width: 100%;
    }
    .adl-view-tab {
        flex: 1 1 auto;
        padding: 9px 6px 11px;
        font-size: 0.82rem;
    }
    .adl-status-chips {
        width: 100%;
        flex-wrap: nowrap;
        overflow-x: auto;
        scrollbar-width: none;
        padding-bottom: 9px;
    }
    .adl-status-chips::-webkit-scrollbar { display: none; }
    .adl-pill { flex-shrink: 0; padding: 5px 12px; }

    /* row: art + info on line one, status chip + chevron wrap to line two,
       indented under the text instead of amputating the title */
    .adl-row {
        flex-wrap: wrap;
        row-gap: 6px;
    }
    .adl-row-info {
        /* wide enough to stay beside the art (rail included), narrow enough
           that the status chip can't fit on line one and wraps below */
        flex: 1 1 180px;
        min-width: 180px;
    }
    .adl-row-status {
        margin-left: 52px;
    }
    .adl-row-chevron { display: none; }

    /* review rows had it worst: badges + five buttons ate the entire width
       and the title rendered zero chars. Same cure: actions wrap below. */
    .verif-quar-row .verif-actions {
        flex-basis: 100%;
        margin-left: 52px;
        flex-wrap: wrap;
        row-gap: 6px;
    }
    .adl-deleted-header {
        flex-wrap: wrap;
        gap: 8px;
    }

    /* group headers: drop the stat line (900px already does) and the source
       tag; keep name, phase, progress and the actions tappable */
    .adl-group-header {
        padding: 10px 8px 10px 14px;
        gap: 10px;
    }
    .adl-group-source { display: none; }
    .adl-group-act,
    .adl-group-chevron { width: 36px; height: 36px; }

    /* the banners (batch filter, review sub-views, clients tabs) wrap;
       nothing may clip off the right edge */
    .adl-batch-filter-banner {
        flex-wrap: wrap;
        row-gap: 6px;
    }
    .verif-banner-spacer { display: none; }
}

@media (max-width: 768px) {
    /* Sidebar visualizer is pinned at the (desktop) sidebar's right edge, so on
       mobile it floats over the page content when the off-canvas sidebar drawer
       is closed. Show it ONLY while the drawer is open. The .active/.viz-* rules
       set display with 2-class specificity, so this 3-class + !important selector
       is needed to beat them; when the drawer IS open it doesn't match, so the
       visualizer's normal display rules take over again. */
    .sidebar:not(.mobile-open) ~ .sidebar-visualizer {
        display: none !important;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   TOOLS PAGE REDESIGN — phone + tablet
   Health hero, findings inbox, operation tiles, recent runs, tool containers.
   The base rules live in style.css; everything responsive lives here, on the
   house 768/480 breakpoints.
   ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 1024px) {
    /* Tablet: two tile columns at most, so a tile never gets so narrow that
       its cadence editor and action row fight for the same line. */
    .repair-family-grid {
        grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr));
    }
}

@media (max-width: 768px) {
    /* THE important one. The hero is its own scroll container on desktop so
       the section nav can stick to it — on a phone that is a scroll-within-a-
       scroll, and the findings list nests a THIRD one inside it. Release both
       and let the page scroll like a page. */
    .tools-maintenance-hero {
        max-height: none;
        overflow: visible;
    }
    /* The hero clipped its own 3px top edge to the rounded corner. Released,
       nothing clips it, so it rounds itself. */
    .tools-maintenance-hero::before {
        border-radius: 16px 16px 0 0;
    }

    .repair-inbox-body {
        max-height: none;
        overflow: visible;
        padding: 0 10px 12px 10px;
    }

    /* Sticky needs a scroll container to stick to; with the hero released it
       would pin against the app chrome instead. Let it scroll away — it is
       four buttons and the sections are a swipe apart. */
    .repair-section-nav {
        position: static;
        overflow-x: auto;
        scrollbar-width: none;
        padding: 6px 0;
    }
    .repair-section-nav::-webkit-scrollbar { display: none; }
    .repair-section-link { flex-shrink: 0; }

    /* ── Health hero ── */
    .repair-health {
        gap: 14px;
        padding: 14px;
    }
    .repair-health-score-block {
        min-width: 0;
        flex-direction: row;
        align-items: baseline;
        gap: 10px;
    }
    .repair-health-score { font-size: 42px; }
    .repair-health-band { margin-top: 0; }
    .repair-health-body { flex: 1 1 100%; }
    .repair-health-actions-note { flex-basis: 100%; }
    .repair-health-fix-safe { min-height: 40px; }

    /* ── Filters ── */
    .repair-findings-toolbar { gap: 8px; }
    .repair-status-segments {
        display: flex;
        width: 100%;
        overflow-x: auto;
        scrollbar-width: none;
    }
    .repair-status-segments::-webkit-scrollbar { display: none; }
    .repair-status-seg { flex: 1 0 auto; justify-content: center; min-height: 38px; }
    .repair-findings-search { flex: 1 1 100%; min-height: 38px; }
    .repair-findings-filters { flex: 1 1 100%; }
    .repair-findings-filters select { flex: 1 1 45%; min-height: 38px; }
    .repair-clear-btn { flex: 1 1 100%; min-height: 38px; }

    /* ── Findings inbox ── */
    .repair-inbox-head {
        flex-wrap: wrap;
        row-gap: 6px;
        padding: 11px 12px;
    }
    .repair-inbox-blurb { white-space: normal; }
    .repair-inbox-actions {
        width: 100%;
        justify-content: flex-end;
        flex-wrap: wrap;
    }
    .repair-inbox-btn { min-height: 36px; }
    .repair-list-controls { gap: 8px; }
    .repair-list-controls select { flex: 1 1 45%; min-height: 36px; }

    /* ── Operation tiles ── */
    .repair-family { padding: 12px 11px 13px 11px; }
    .repair-family-head { flex-wrap: wrap; row-gap: 4px; }
    .repair-family-summary { flex-basis: 100%; order: 3; white-space: normal; }
    .repair-family-grid { grid-template-columns: 1fr; }

    /* Number + unit + Save + Cancel do not fit one line in a full-width
       tile on a phone, and a clipped Save is a schedule you cannot change. */
    .repair-tile-schedule { row-gap: 6px; }
    .repair-tile-cadence-edit { flex-wrap: wrap; row-gap: 6px; }
    .repair-tile-cadence,
    .repair-tile-cadence-save,
    .repair-tile-cadence-cancel { min-height: 34px; }
    .repair-tile-cadence-edit input,
    .repair-tile-cadence-edit select { min-height: 34px; }

    /* ── Recent runs ── */
    .repair-runs-toolbar { flex-direction: column; align-items: stretch; }
    .repair-runs-tools { justify-content: flex-end; }
    .repair-runs-chip,
    .repair-runs-toggle { min-height: 32px; }
    .repair-run-head { flex-wrap: wrap; row-gap: 3px; padding: 10px 12px; }
    .repair-run-name { min-width: 0; }
    /* Order 3 drops the summary onto its own line UNDER the row, leaving the
       clock, name, age and chevron together on the first — without it the
       summary splits the row and pushes age + chevron onto a third line. */
    .repair-run-summary {
        order: 3;
        white-space: normal;
        flex-basis: 100%;
        padding-left: 29px;
    }
    .repair-run-age { margin-left: auto; }
    .repair-run-detail { padding: 4px 12px 13px 12px; }
    .repair-run-counters { gap: 14px; }
    .repair-run-foot { flex-direction: column; align-items: flex-start; gap: 6px; }

    /* ── Tool containers ── */
    .tools-container { padding: 12px 11px 13px 11px; }
    .tools-container-head { gap: 6px; }
    .tools-container-blurb { flex-basis: 100%; }
}

@media (max-width: 480px) {
    /* The trend line is the first thing to go: it is context, and the score
       and the bar underneath it are the point. */
    .repair-health-trend { display: none; }
    .repair-health-score { font-size: 36px; }
    .repair-health-actions { gap: 8px; }

    .repair-section-link { padding: 6px 11px; }

    .repair-inbox-count { min-width: 44px; font-size: 20px; }
    .repair-inbox-head { gap: 9px; }
    .repair-inbox-label { font-size: 13px; flex-wrap: wrap; row-gap: 4px; }
    /* Two lines of explanation beats one line of ellipsis. */
    .repair-inbox-blurb { font-size: 11px; }

    .repair-tile { padding: 11px; }
    .repair-tile-desc { -webkit-line-clamp: 3; }
    .repair-tile-foot { flex-wrap: wrap; row-gap: 8px; }
    .repair-tile .repair-job-actions { margin-left: auto; }

    .repair-run-clock { min-width: 40px; }
    .repair-run-counter-value { font-size: 15px; }
    /* A stack trace does not need to eat the screen on a phone. */
    .repair-run-error-text { max-height: 120px; font-size: 10px; }
}

@media (hover: none) {
    /* Icon-only controls at desktop sizes are a miss on a fingertip. */
    .repair-run-btn,
    .repair-stop-btn,
    .repair-settings-btn,
    .repair-help-btn,
    .repair-inbox-expand,
    .repair-runs-refresh,
    .repair-finding-expand-btn {
        min-width: 34px;
        min-height: 34px;
    }

    /* The cadence pill reads as editable on hover; on touch there is no
       hover, so it carries its affordance all the time. */
    .repair-tile-cadence {
        border-style: solid;
        border-color: rgba(var(--tile-glow), 0.35);
    }

    /* Same for the health bar segments — they are buttons. */
    .repair-health-seg { min-width: 10px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   AUTOMATIONS REDESIGN — phone + tablet
   Verdict strip, family containers, and the builder palette.
   ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
    /* The verdict chips are buttons now, so they need thumb-sized targets and
       have to wrap rather than push the master toggle off the row. */
    .automations-stats { padding: 12px 13px; gap: 8px; }
    .automations-stats .auto-stat { padding: 7px 11px; min-height: 38px; }
    .automations-stats .auto-master-toggle {
        order: -1; margin-left: 0; width: 100%; justify-content: center; min-height: 42px;
    }

    .automations-section { padding: 11px 11px 12px; }
    .automations-section-header { flex-wrap: wrap; row-gap: 4px; }
    /* The family summary drops to its own line rather than squeezing the
       label and the count into ellipsis. */
    .automations-section-header .section-summary { flex-basis: 100%; order: 5; white-space: normal; }
    .automations-section-header .section-line { display: none; }
    .automations-section-header .section-action-btn { min-width: 34px; min-height: 34px; }

    /* One card per row: the grid's 430px floor is wider than a phone. */
    .automations-section .automations-grid { grid-template-columns: 1fr; }
    .automation-card { padding: 12px 12px 11px 15px; }
    .automation-card .automation-actions { flex-wrap: wrap; }

    /* The tile's foot is a two-up row on desktop. On a phone the meta line
       alone eats the width, so the controls take their own row underneath
       rather than being squeezed to one button per line. */
    .automation-card.automation-tile .auto-tile-foot {
        flex-direction: column; align-items: stretch; gap: 8px;
    }
    .automation-card.automation-tile .automation-actions { justify-content: flex-end; }
    /* Thumb targets: these were 28px squares built for a mouse. */
    .automation-card.automation-tile .automation-actions button {
        width: 38px; height: 38px; font-size: 14px;
    }
    /* The cadence editor is three controls in a chip-sized row — let it wrap
       instead of overflowing the card. */
    .automation-card.automation-tile .auto-cadence-edit { width: 100%; }
    .automation-card.automation-tile .auto-cadence-edit input,
    .automation-card.automation-tile .auto-cadence-edit select { min-height: 34px; }
    .automation-card.automation-tile .auto-cadence-save,
    .automation-card.automation-tile .auto-cadence-cancel { min-height: 34px; }

    /* The builder is two columns on desktop; stack them, and cap the palette
       so the canvas is reachable without scrolling past 100 blocks. */
    .builder-content { flex-direction: column; }
    .builder-sidebar {
        width: 100%; max-width: none;
        max-height: 45vh; overflow-y: auto;
    }
}

@media (max-width: 480px) {
    .automations-stats .auto-stat strong { font-size: 16px; }
    .automation-card .automation-flow { flex-wrap: wrap; row-gap: 4px; }
    .automation-card .auto-meta-fail { max-width: 100%; white-space: normal; }
    /* The name and the runs badge stop competing for one line. */
    .automation-card.automation-tile .auto-tile-head { flex-wrap: wrap; row-gap: 4px; }
    .automation-card.automation-tile .automation-name { font-size: 13.5px; }
    .automation-card.automation-tile .flow-trigger,
    .automation-card.automation-tile .flow-action,
    .automation-card.automation-tile .flow-notify { max-width: 100%; }
    .builder-sidebar { max-height: 40vh; }
}

@media (hover: none) {
    /* Drawer headers and block rows are the builder's whole interaction. */
    .builder-sidebar .block-drawer-head { min-height: 38px; }
    .builder-sidebar .block-item { min-height: 46px; }
    .automations-stats .auto-stat-lens:hover { transform: none; }
    .automation-card:hover { transform: none; }
    /* No hover to reveal the tile's controls with, and the editable trigger
       chip must be tappable rather than hover-hinted. */
    .automation-card.automation-tile .automation-actions { opacity: 1; }
    .automation-card.automation-tile .auto-flow-editable { min-height: 30px; }
    .automation-card.automation-tile .auto-tile-badge { min-height: 30px; }
}

/* #1227: shared by playlist, album, artist-album and wishlist download dialogs.
   Dynamic viewport sizing also covers Safari with its browser bars visible. */
html.download-modal-open,
html.download-modal-open body {
    overflow: hidden;
    overscroll-behavior: none;
}
.download-missing-modal {
    height: 100vh;
    height: 100dvh;
    overscroll-behavior: contain;
}
.download-missing-modal-content {
    max-height: 95vh;
    max-height: 95dvh;
}
@media (max-width: 768px) {
    /* One outer scroll area keeps the hero, rows and all footer controls reachable.
       The bounded inner table scroll still works for very long playlists. */
    .download-missing-modal .download-missing-modal-content {
        height: 95vh;
        height: 95dvh;
        overflow-y: auto;
        overscroll-behavior-y: contain;
        -webkit-overflow-scrolling: touch;
    }
    .download-missing-modal-header,
    .download-missing-modal .download-missing-modal-body,
    .download-missing-modal-footer {
        flex: 0 0 auto;
    }
    .download-missing-modal .download-missing-modal-body {
        overflow: visible;
    }
    .download-missing-modal .download-tracks-section {
        flex: 0 0 auto;
        min-height: 280px;
    }
    .download-missing-modal .download-tracks-table-container {
        flex: 0 0 auto;
        min-height: 220px;
        max-height: 50vh;
        max-height: max(220px, 50dvh);
        overflow: auto;
        overscroll-behavior: contain;
    }
    .download-missing-modal-footer {
        padding-bottom: max(12px, env(safe-area-inset-bottom));
    }
}

/* download modal rows on a phone: a table can't fit eight columns in 390px, so
   each row becomes a little card. title on top, artist under it, the two
   statuses stacked on the right. the cells keep their ids so the live
   updaters still find them. */
@media (max-width: 768px) {
    .download-missing-modal-content .download-tracks-table,
    .download-missing-modal-content .download-tracks-table thead,
    .download-missing-modal-content .download-tracks-table tbody {
        display: block;
        width: 100%;
    }

    /* the header keeps select-all and the track label, the rest is said by the rows */
    .download-missing-modal-content .download-tracks-table thead tr {
        display: flex;
        align-items: center;
    }
    .download-missing-modal-content .download-tracks-table thead th {
        display: none;
    }
    .download-missing-modal-content .download-tracks-table thead th.track-select-header,
    .download-missing-modal-content .download-tracks-table:has(.track-select-header) thead th:nth-child(3),
    .download-missing-modal-content .download-tracks-table:not(:has(.track-select-header)) thead th:nth-child(2) {
        display: block;
        background: none;
        border: none;
        text-align: left;
    }
    .download-missing-modal-content .download-tracks-table thead tr {
        background: linear-gradient(180deg, rgba(28,28,28,0.95), rgba(22,22,22,0.95));
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    }

    .download-missing-modal-content .download-tracks-table tbody tr {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr) auto auto;
        grid-template-areas:
            "sel name   match    act"
            "sel artist download act";
        align-items: center;
        column-gap: 10px;
        row-gap: 3px;
        padding: 10px 12px 10px 4px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.045);
    }
    .download-missing-modal-content .download-tracks-table tbody tr:last-child {
        border-bottom: none;
    }
    .download-missing-modal-content .download-tracks-table tbody td {
        display: block;
        padding: 0;
        border: none;
        max-width: none;
        width: auto;
        min-width: 0;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .download-missing-modal-content .download-tracks-table tbody td.track-select-cell {
        grid-area: sel;
        align-self: center;
    }
    .download-missing-modal-content .download-tracks-table tbody td.track-number,
    .download-missing-modal-content .download-tracks-table tbody td.track-duration {
        display: none;
    }
    .download-missing-modal-content .download-tracks-table tbody td.track-name {
        grid-area: name;
        font-size: 14px;
        line-height: 26px;
    }
    /* the artist lines up under the title, past the play + add buttons (26px + 8px each) */
    .download-missing-modal-content .download-tracks-table tbody td.track-artist {
        grid-area: artist;
        font-size: 12.5px;
        text-align: left;
        padding-left: 68px;
    }
    .download-missing-modal-content .download-tracks-table tbody td.track-match-status,
    .download-missing-modal-content .download-tracks-table tbody td.track-download-status {
        display: block;
        font-size: 10px;
        text-align: right;
        overflow: visible;
    }
    .download-missing-modal-content .download-tracks-table tbody td.track-match-status {
        grid-area: match;
    }
    .download-missing-modal-content .download-tracks-table tbody td.track-download-status {
        grid-area: download;
    }
    .download-missing-modal-content .download-tracks-table tbody td.track-actions {
        grid-area: act;
        overflow: visible;
    }
    /* the pill sits behind the status text; sized to the cell now that the
       cell is only as wide as its text */
    .download-missing-modal-content .download-tracks-table tbody td.track-download-status[data-state] {
        padding: 4px 10px;
    }
    .download-missing-modal-content .download-tracks-table tbody td.track-download-status[data-state]::before {
        width: 100%;
        height: 100%;
    }
    /* a bare "-" means no action, it doesn't need a column */
    .download-missing-modal-content .download-tracks-table tbody td.track-actions:not(:has(*)) {
        display: none;
    }

    /* the two progress cards stack; side by side they ran off the right edge */
    .download-missing-modal-content .download-progress-section {
        grid-template-columns: minmax(0, 1fr);
        gap: 8px;
        padding: 10px 0;
    }
    .download-missing-modal-content .progress-item {
        padding: 10px 14px;
    }
    .download-missing-modal-content .progress-label {
        margin-bottom: 7px;
    }
    .download-missing-modal-content .progress-item .progress-bar {
        margin-bottom: 0;
    }

    /* four stat tiles in a row only fit "downloaded" once the tiles and labels
       stop padding so wide */
    .download-missing-modal-content .download-dashboard-stats {
        gap: 6px;
        padding: 12px 8px;
    }
    .download-missing-modal-content .dashboard-stat {
        padding: 10px 2px;
    }
    .download-missing-modal-content .dashboard-stat-label {
        font-size: 9px;
        letter-spacing: 0.02em;
    }
}

/* discover mix modal on a phone: the header actions and the selection bar wrap
   instead of running off the right edge, and the compact rows drop the number
   and album columns so the title and artist get the width. */
@media (max-width: 768px) {
    .mix-modal {
        position: relative;
        width: 100%;
        max-width: calc(100vw - 16px);
        max-height: 90vh;
        max-height: 90dvh;
    }
    .mix-modal-header {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
        padding: 16px 16px 14px;
    }
    .mix-modal-header > div:first-child {
        padding-right: 36px;
    }
    .mix-modal-title {
        font-size: 20px;
    }
    .mix-modal-actions {
        flex-wrap: wrap;
    }
    .mix-modal-actions .btn {
        flex: 1 1 0;
        justify-content: center;
    }
    .mix-modal-close {
        position: absolute;
        top: 10px;
        right: 10px;
    }

    .mix-modal-selbar {
        flex-wrap: wrap;
        row-gap: 8px;
        column-gap: 10px;
        padding: 10px 12px;
    }
    .mix-selbar-spacer {
        display: none;
    }
    /* select-all and the count share the first line, the buttons split the second */
    .mix-sel-count {
        flex: 1 1 auto;
        text-align: right;
    }
    .mix-modal-selbar .btn {
        flex: 1 1 0;
        justify-content: center;
        white-space: nowrap;
    }

    .mix-modal-body {
        padding: 8px 8px 16px;
    }

    .discover-playlist-track-compact {
        grid-template-columns: 40px minmax(0, 1fr) auto 32px;
        gap: 10px;
        padding: 8px;
    }
    .discover-playlist-track-compact.has-select {
        grid-template-columns: 22px 40px minmax(0, 1fr) auto 32px;
    }
    .discover-playlist-track-compact .track-compact-number,
    .discover-playlist-track-compact .track-compact-album {
        display: none;
    }
    .track-compact-name {
        font-size: 14px;
    }
    .track-compact-artist {
        font-size: 12px;
    }
}