/* DESKTOP FEED TIKTOK STYLE
   Regras exclusivas para desktop. A versão mobile continua usando os arquivos atuais. */

.desktop-feed-sidebar,
.desktop-feed-top-actions {
    display: none;
}

@media (min-width: 769px) {
    html,
    body.feed-page,
    body.feed-page.force-mobile-feed {
        width: 100% !important;
        min-height: 100% !important;
        overflow: hidden !important;
        background: #000 !important;
    }

    body.feed-page::before,
    body.feed-page.force-mobile-feed::before {
        content: "";
        position: fixed;
        inset: 0;
        pointer-events: none;
        background:
            radial-gradient(circle at 48% 12%, rgba(255,61,200,.10), transparent 28%),
            radial-gradient(circle at 54% 88%, rgba(123,44,255,.08), transparent 30%),
            #000;
        z-index: -1;
    }

    /* No desktop, o topo mobile some e a navegação vira lateral, como no TikTok. */
    body.feed-page .mobile-feed-topbar,
    body.feed-page.force-mobile-feed .mobile-feed-topbar,
    body.feed-page .bottom-menu,
    body.feed-page.force-mobile-feed .bottom-menu {
        display: none !important;
    }

    .desktop-feed-sidebar {
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        width: 260px;
        display: flex;
        flex-direction: column;
        gap: 18px;
        padding: 24px 20px 22px;
        box-sizing: border-box;
        background: #000;
        border-right: 1px solid rgba(255,255,255,.08);
        z-index: 1200;
    }

    .desktop-feed-brand {
        display: flex;
        align-items: center;
        gap: 10px;
        color: #fff;
        text-decoration: none;
        font-size: 25px;
        font-weight: 950;
        letter-spacing: -.04em;
        line-height: 1;
    }

    .desktop-feed-brand img {
        width: 132px;
        max-height: 46px;
        object-fit: contain;
        object-position: left center;
        display: block;
    }

    .desktop-feed-brand-fallback {
        width: 46px;
        height: 46px;
        border-radius: 15px;
        display: grid;
        place-items: center;
        background: linear-gradient(135deg,#ff3dc8,#7b2cff);
        color: #fff;
        font-size: 24px;
        font-weight: 950;
    }

    .desktop-feed-search-wrap {
        position: relative;
        width: 100%;
        height: 44px;
        margin-top: 2px;
    }

    .desktop-feed-search-wrap::before {
        content: "⌕";
        position: absolute;
        left: 15px;
        top: 50%;
        transform: translateY(-50%);
        color: rgba(255,255,255,.65);
        font-size: 22px;
        line-height: 1;
        z-index: 1;
    }

    .desktop-feed-search {
        width: 100%;
        height: 44px;
        border: 0;
        outline: 0;
        border-radius: 999px;
        box-sizing: border-box;
        padding: 0 16px 0 42px;
        background: #202020;
        color: #fff;
        font-size: 14px;
        font-weight: 650;
    }

    .desktop-feed-search::placeholder {
        color: rgba(255,255,255,.55);
    }

    .desktop-feed-nav {
        display: grid;
        gap: 2px;
        margin-top: 2px;
    }

    .desktop-feed-nav a {
        min-height: 44px;
        display: flex;
        align-items: center;
        gap: 14px;
        color: #fff;
        text-decoration: none;
        font-size: 17px;
        font-weight: 900;
        border-radius: 12px;
        padding: 0 8px;
        transition: background .15s ease, color .15s ease;
    }

    .desktop-feed-nav a:hover {
        background: rgba(255,255,255,.08);
    }

    .desktop-feed-nav a.active {
        color: #ff3dc8;
    }

    .desktop-feed-nav .desktop-feed-icon {
        width: 28px;
        text-align: center;
        font-size: 22px;
        line-height: 1;
        filter: saturate(1.2);
    }

    .desktop-feed-create {
        margin-top: 8px;
        height: 48px;
        border-radius: 999px;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        text-decoration: none;
        color: #fff;
        font-size: 15px;
        font-weight: 950;
        background: linear-gradient(135deg,#ff3dc8,#7b2cff);
        box-shadow: 0 16px 36px rgba(180,44,255,.28);
    }

    .desktop-feed-footer {
        margin-top: auto;
        padding-top: 18px;
        border-top: 1px solid rgba(255,255,255,.08);
        display: grid;
        gap: 9px;
        color: rgba(255,255,255,.52);
        font-size: 12px;
        font-weight: 800;
        line-height: 1.15;
    }

    .desktop-feed-footer a {
        color: rgba(255,255,255,.62);
        text-decoration: none;
    }

    .desktop-feed-top-actions {
        position: fixed;
        top: 24px;
        right: 28px;
        z-index: 1200;
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 8px 10px;
        border-radius: 999px;
        background: rgba(31,31,31,.88);
        border: 1px solid rgba(255,255,255,.08);
        backdrop-filter: blur(14px);
    }

    .desktop-feed-top-actions a,
    .desktop-feed-top-actions span {
        color: #fff;
        text-decoration: none;
        font-size: 13px;
        font-weight: 900;
        white-space: nowrap;
    }

    .desktop-feed-top-actions .desktop-feed-avatar {
        width: 32px;
        height: 32px;
        border-radius: 50%;
        object-fit: cover;
        border: 1px solid rgba(255,255,255,.25);
    }

    body.feed-page .feed,
    body.feed-page.force-mobile-feed .feed {
        position: fixed !important;
        inset: 0 !important;
        width: 100vw !important;
        max-width: none !important;
        height: 100vh !important;
        padding: 24px 0 24px !important;
        margin: 0 !important;
        box-sizing: border-box !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        scroll-snap-type: y mandatory !important;
        scroll-padding-top: 24px !important;
        background: transparent !important;
        display: block !important;
    }

    body.feed-page .feed::-webkit-scrollbar,
    body.feed-page.force-mobile-feed .feed::-webkit-scrollbar {
        width: 0 !important;
        height: 0 !important;
    }

    body.feed-page .feed-card:not(.profile-card),
    body.feed-page.force-mobile-feed .feed-card:not(.profile-card) {
        width: min(430px, calc((100vh - 48px) * .5625), calc(100vw - 620px)) !important;
        max-width: 430px !important;
        min-width: 360px !important;
        height: min(calc(100vh - 48px), 764px) !important;
        min-height: 620px !important;
        margin: 0 auto 24px !important;
        padding: 0 !important;
        border-radius: 18px !important;
        position: relative !important;
        overflow: visible !important;
        scroll-snap-align: start !important;
        scroll-snap-stop: always !important;
        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
        display: block !important;
        box-sizing: border-box !important;
    }

    body.feed-page .feed-card:not(.profile-card) .bg,
    body.feed-page.force-mobile-feed .feed-card:not(.profile-card) .bg,
    body.feed-page .feed-card:not(.profile-card) > img.bg,
    body.feed-page.force-mobile-feed .feed-card:not(.profile-card) > img.bg {
        position: absolute !important;
        inset: 0 !important;
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        object-position: center bottom !important;
        border-radius: 18px !important;
        overflow: hidden !important;
        box-shadow: 0 24px 80px rgba(0,0,0,.68) !important;
        background: #111 !important;
    }

    body.feed-page .feed-card:not(.profile-card) .shade,
    body.feed-page.force-mobile-feed .feed-card:not(.profile-card) .shade {
        position: absolute !important;
        inset: 0 !important;
        border-radius: 18px !important;
        background: linear-gradient(180deg, rgba(0,0,0,.08), rgba(0,0,0,.10) 44%, rgba(0,0,0,.74) 100%) !important;
        z-index: 1 !important;
        pointer-events: none !important;
    }

    body.feed-page .feed-card:not(.profile-card) > .creator-row,
    body.feed-page.force-mobile-feed .feed-card:not(.profile-card) > .creator-row {
        top: auto !important;
        left: 12px !important;
        right: 88px !important;
        bottom: 92px !important;
        width: auto !important;
        max-width: none !important;
        transform: none !important;
        z-index: 5 !important;
        gap: 8px !important;
        align-items: center !important;
    }

    body.feed-page .feed-card:not(.profile-card) .creator-link,
    body.feed-page.force-mobile-feed .feed-card:not(.profile-card) .creator-link {
        gap: 8px !important;
        align-items: center !important;
    }

    body.feed-page .feed-card:not(.profile-card) .creator-link img,
    body.feed-page.force-mobile-feed .feed-card:not(.profile-card) .creator-link img {
        width: 36px !important;
        height: 36px !important;
        border-width: 1.5px !important;
    }

    body.feed-page .feed-card:not(.profile-card) .creator-link strong,
    body.feed-page.force-mobile-feed .feed-card:not(.profile-card) .creator-link strong {
        max-width: 210px !important;
        font-size: 15px !important;
        line-height: 1.05 !important;
    }

    body.feed-page .feed-card:not(.profile-card) .creator-link span,
    body.feed-page.force-mobile-feed .feed-card:not(.profile-card) .creator-link span {
        font-size: 11px !important;
        line-height: 1.05 !important;
        margin-top: 2px !important;
    }

    body.feed-page .feed-card:not(.profile-card) .follow-btn,
    body.feed-page.force-mobile-feed .feed-card:not(.profile-card) .follow-btn {
        min-width: 72px !important;
        padding: 7px 10px !important;
        font-size: 11px !important;
        height: 30px !important;
        margin-left: 4px !important;
        border-radius: 999px !important;
        background: linear-gradient(135deg,#ff3dc8,#7b2cff) !important;
        color: #fff !important;
        border: 0 !important;
    }

    body.feed-page .feed-card:not(.profile-card) .feed-info,
    body.feed-page.force-mobile-feed .feed-card:not(.profile-card) .feed-info {
        position: absolute !important;
        left: 12px !important;
        right: 18px !important;
        bottom: 18px !important;
        z-index: 4 !important;
        transform: none !important;
        padding: 0 !important;
        max-width: none !important;
        width: auto !important;
        box-sizing: border-box !important;
    }

    body.feed-page .feed-card:not(.profile-card) .category-label,
    body.feed-page.force-mobile-feed .feed-card:not(.profile-card) .category-label {
        display: none !important;
    }

    body.feed-page .feed-card:not(.profile-card) .feed-info h1,
    body.feed-page.force-mobile-feed .feed-card:not(.profile-card) .feed-info h1,
    body.feed-page .feed-card:not(.profile-card) .feed-title-full,
    body.feed-page.force-mobile-feed .feed-card:not(.profile-card) .feed-title-full {
        max-width: calc(100% - 74px) !important;
        font-size: 20px !important;
        line-height: 1.08 !important;
        letter-spacing: -.02em !important;
        margin: 0 0 6px !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        color: #fff !important;
    }

    body.feed-page .feed-card:not(.profile-card) .feed-info p,
    body.feed-page.force-mobile-feed .feed-card:not(.profile-card) .feed-info p {
        max-width: calc(100% - 48px) !important;
        font-size: 13px !important;
        line-height: 1.25 !important;
        max-height: 34px !important;
        overflow: hidden !important;
        margin: 0 0 6px !important;
        color: rgba(255,255,255,.92) !important;
    }

    body.feed-page .feed-card:not(.profile-card) .meta,
    body.feed-page.force-mobile-feed .feed-card:not(.profile-card) .meta {
        margin: 0 0 8px !important;
        font-size: 11px !important;
        line-height: 1.1 !important;
        color: rgba(255,255,255,.78) !important;
    }

    /* No desktop, ações ficam fora do card, ao lado direito, como no TikTok. */
    body.feed-page .feed-card:not(.profile-card) .side-actions,
    body.feed-page.force-mobile-feed .feed-card:not(.profile-card) .side-actions {
        position: absolute !important;
        right: -74px !important;
        bottom: 20px !important;
        z-index: 20 !important;
        display: grid !important;
        gap: 8px !important;
        text-align: center !important;
        transform: none !important;
        width: 58px !important;
    }

    body.feed-page .feed-card:not(.profile-card) .side-actions button,
    body.feed-page.force-mobile-feed .feed-card:not(.profile-card) .side-actions button {
        width: 52px !important;
        height: 52px !important;
        border-radius: 50% !important;
        background: #1f1f1f !important;
        border: 0 !important;
        color: #fff !important;
        font-size: 26px !important;
        box-shadow: none !important;
        backdrop-filter: none !important;
    }

    body.feed-page .feed-card:not(.profile-card) .side-actions small,
    body.feed-page.force-mobile-feed .feed-card:not(.profile-card) .side-actions small {
        font-size: 12px !important;
        font-weight: 900 !important;
        color: rgba(255,255,255,.86) !important;
        margin: -4px 0 2px !important;
    }

    body.feed-page .feed-card:not(.profile-card) .side-actions .fav-btn.liked,
    body.feed-page.force-mobile-feed .feed-card:not(.profile-card) .side-actions .fav-btn.liked {
        color: #ff3dc8 !important;
        background: rgba(255,61,200,.20) !important;
    }

    body.feed-page .feed-card:not(.profile-card) .playlist-play-row,
    body.feed-page.force-mobile-feed .feed-card:not(.profile-card) .playlist-play-row {
        display: flex !important;
        gap: 8px !important;
        align-items: center !important;
        max-width: calc(100% - 54px) !important;
    }

    body.feed-page .feed-card:not(.profile-card) .inline-prev,
    body.feed-page.force-mobile-feed .feed-card:not(.profile-card) .inline-prev,
    body.feed-page .feed-card:not(.profile-card) .inline-next,
    body.feed-page.force-mobile-feed .feed-card:not(.profile-card) .inline-next {
        width: 34px !important;
        height: 34px !important;
        min-width: 34px !important;
        border-radius: 50% !important;
        border: 0 !important;
        color: #fff !important;
        background: rgba(255,255,255,.18) !important;
        font-size: 24px !important;
        font-weight: 950 !important;
        display: inline-grid !important;
        place-items: center !important;
        line-height: 1 !important;
    }

    body.feed-page .feed-card:not(.profile-card) .main-play,
    body.feed-page.force-mobile-feed .feed-card:not(.profile-card) .main-play,
    body.feed-page .feed-card:not(.profile-card) .inline-pause,
    body.feed-page.force-mobile-feed .feed-card:not(.profile-card) .inline-pause {
        min-height: 36px !important;
        height: 36px !important;
        border-radius: 999px !important;
        padding: 0 14px !important;
        font-size: 11px !important;
        font-weight: 950 !important;
        white-space: nowrap !important;
    }

    body.feed-page .feed-card.playing .main-play,
    body.feed-page.force-mobile-feed .feed-card.playing .main-play {
        display: none !important;
    }

    body.feed-page .feed-card:not(.playing) .inline-pause,
    body.feed-page.force-mobile-feed .feed-card:not(.playing) .inline-pause {
        display: none !important;
    }

    body.feed-page .feed-card.playing .inline-pause,
    body.feed-page.force-mobile-feed .feed-card.playing .inline-pause {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        background: rgba(255,255,255,.20) !important;
        color: #fff !important;
        border: 0 !important;
    }

    body.feed-page .feed-card:not(.profile-card) .post-audio-progress,
    body.feed-page.force-mobile-feed .feed-card:not(.profile-card) .post-audio-progress {
        width: calc(100% - 54px) !important;
        margin-top: 8px !important;
        padding: 7px 9px !important;
        border-radius: 999px !important;
        grid-template-columns: 36px 1fr 44px !important;
        gap: 7px !important;
        background: rgba(0,0,0,.45) !important;
    }

    body.feed-page .feed-card:not(.profile-card) .wave-progress,
    body.feed-page.force-mobile-feed .feed-card:not(.profile-card) .wave-progress {
        height: 20px !important;
    }

    body.feed-page .feed-card:not(.profile-card) .audio-time,
    body.feed-page.force-mobile-feed .feed-card:not(.profile-card) .audio-time {
        font-size: 10px !important;
    }

    body.feed-page .comments-panel,
    body.feed-page.force-mobile-feed .comments-panel {
        width: 430px !important;
        max-width: calc(100vw - 320px) !important;
        left: 50% !important;
        right: auto !important;
        transform: translateX(-50%) !important;
        border-radius: 24px 24px 0 0 !important;
        z-index: 1300 !important;
    }

    body.feed-page .deejai-fixed-audio-progress,
    body.feed-page.force-mobile-feed .deejai-fixed-audio-progress {
        left: 50% !important;
        right: auto !important;
        bottom: 24px !important;
        width: min(430px, calc((100vh - 48px) * .5625), calc(100vw - 620px)) !important;
        min-width: 360px !important;
        transform: translateX(-50%) !important;
        border-radius: 0 0 18px 18px !important;
        overflow: visible !important;
        z-index: 30 !important;
    }

    body.feed-page .deejai-fixed-audio-track,
    body.feed-page.force-mobile-feed .deejai-fixed-audio-track {
        height: 5px !important;
        border-radius: 999px !important;
        overflow: visible !important;
        background: rgba(255,255,255,.26) !important;
    }

    body.feed-page .deejai-fixed-audio-fill,
    body.feed-page.force-mobile-feed .deejai-fixed-audio-fill {
        background: linear-gradient(90deg,#ff3dc8,#7b2cff) !important;
    }
}

@media (min-width: 769px) and (max-width: 1180px) {
    .desktop-feed-sidebar {
        width: 220px;
    }

    .desktop-feed-nav a {
        font-size: 15px;
        gap: 10px;
    }

    .desktop-feed-top-actions {
        display: none;
    }

    body.feed-page .feed-card:not(.profile-card),
    body.feed-page.force-mobile-feed .feed-card:not(.profile-card) {
        width: min(410px, calc((100vh - 48px) * .5625), calc(100vw - 390px)) !important;
        min-width: 330px !important;
    }

    body.feed-page .feed-card:not(.profile-card) .side-actions,
    body.feed-page.force-mobile-feed .feed-card:not(.profile-card) .side-actions {
        right: -62px !important;
    }

    body.feed-page .feed-card:not(.profile-card) .side-actions button,
    body.feed-page.force-mobile-feed .feed-card:not(.profile-card) .side-actions button {
        width: 46px !important;
        height: 46px !important;
        font-size: 23px !important;
    }
}

@media (min-width: 769px) and (max-height: 740px) {
    body.feed-page .feed,
    body.feed-page.force-mobile-feed .feed {
        padding-top: 14px !important;
        padding-bottom: 14px !important;
        scroll-padding-top: 14px !important;
    }

    body.feed-page .feed-card:not(.profile-card),
    body.feed-page.force-mobile-feed .feed-card:not(.profile-card) {
        height: calc(100vh - 28px) !important;
        min-height: 540px !important;
    }

    body.feed-page .feed-card:not(.profile-card) > .creator-row,
    body.feed-page.force-mobile-feed .feed-card:not(.profile-card) > .creator-row {
        bottom: 84px !important;
    }

    body.feed-page .feed-card:not(.profile-card) .feed-info,
    body.feed-page.force-mobile-feed .feed-card:not(.profile-card) .feed-info {
        bottom: 12px !important;
    }

    body.feed-page .deejai-fixed-audio-progress,
    body.feed-page.force-mobile-feed .deejai-fixed-audio-progress {
        bottom: 14px !important;
    }
}


/* v34 - alinhamento fixo dos botões superiores do desktop em todo o feed */
@media (min-width: 769px) {
    .desktop-feed-top-actions {
        min-height: 52px !important;
        height: 52px !important;
        padding: 0 8px 0 14px !important;
        gap: 8px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    .desktop-feed-top-actions a,
    .desktop-feed-top-actions span {
        height: 40px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 0 2px !important;
        line-height: 1 !important;
        white-space: nowrap !important;
        vertical-align: middle !important;
    }
    .desktop-feed-top-actions a:first-child {
        padding-left: 4px !important;
    }
    .desktop-feed-top-actions .desktop-feed-avatar {
        width: 34px !important;
        height: 34px !important;
        min-width: 34px !important;
        display: block !important;
        flex: 0 0 34px !important;
        margin-left: 2px !important;
        align-self: center !important;
    }
}

/* v36 - desktop: categoria Álbuns em grade circular, sem alterar a tela de lista de músicas */
@media (min-width: 769px) {
    body.feed-page .feed.album-directory-feed,
    body.feed-page.force-mobile-feed .feed.album-directory-feed {
        padding: 104px 32px 56px 292px !important;
        scroll-snap-type: none !important;
        display: block !important;
        overflow-y: auto !important;
    }

    body.feed-page .album-directory-shell,
    body.feed-page.force-mobile-feed .album-directory-shell {
        width: min(760px, calc(100vw - 380px)) !important;
        margin: 0 auto !important;
        color: #fff !important;
    }

    body.feed-page .album-directory-head,
    body.feed-page.force-mobile-feed .album-directory-head {
        margin: 0 0 30px !important;
        text-align: left !important;
    }

    body.feed-page .album-directory-head h1,
    body.feed-page.force-mobile-feed .album-directory-head h1 {
        margin: 0 0 6px !important;
        color: #fff !important;
        font-size: 34px !important;
        line-height: 1 !important;
        font-weight: 950 !important;
        letter-spacing: -0.04em !important;
    }

    body.feed-page .album-directory-head p,
    body.feed-page.force-mobile-feed .album-directory-head p {
        margin: 0 !important;
        color: rgba(255,255,255,.62) !important;
        font-size: 14px !important;
        font-weight: 750 !important;
    }

    body.feed-page .album-directory-grid,
    body.feed-page.force-mobile-feed .album-directory-grid {
        display: grid !important;
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
        gap: 34px 26px !important;
        align-items: start !important;
    }

    body.feed-page .album-directory-card,
    body.feed-page.force-mobile-feed .album-directory-card {
        min-width: 0 !important;
        display: grid !important;
        place-items: center !important;
        gap: 12px !important;
        text-decoration: none !important;
        color: #fff !important;
        text-align: center !important;
        transition: transform .18s ease, opacity .18s ease !important;
    }

    body.feed-page .album-directory-card:hover,
    body.feed-page.force-mobile-feed .album-directory-card:hover {
        transform: translateY(-3px) !important;
    }

    body.feed-page .album-directory-cover-wrap,
    body.feed-page.force-mobile-feed .album-directory-cover-wrap {
        width: 132px !important;
        height: 132px !important;
        border-radius: 50% !important;
        padding: 3px !important;
        display: block !important;
        background: linear-gradient(135deg,#ff3dc8,#7b2cff) !important;
        box-shadow: 0 18px 42px rgba(123,44,255,.22) !important;
    }

    body.feed-page .album-directory-cover,
    body.feed-page.force-mobile-feed .album-directory-cover {
        width: 100% !important;
        height: 100% !important;
        display: block !important;
        border-radius: 50% !important;
        object-fit: cover !important;
        background: #151515 !important;
        border: 3px solid #000 !important;
        box-sizing: border-box !important;
    }

    body.feed-page .album-directory-card strong,
    body.feed-page.force-mobile-feed .album-directory-card strong {
        width: 100% !important;
        max-width: 155px !important;
        display: block !important;
        color: #fff !important;
        font-size: 15px !important;
        line-height: 1.15 !important;
        font-weight: 950 !important;
        letter-spacing: -0.02em !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }
}

@media (min-width: 769px) and (max-width: 1180px) {
    body.feed-page .feed.album-directory-feed,
    body.feed-page.force-mobile-feed .feed.album-directory-feed {
        padding-left: 248px !important;
    }
    body.feed-page .album-directory-shell,
    body.feed-page.force-mobile-feed .album-directory-shell {
        width: min(680px, calc(100vw - 300px)) !important;
    }
    body.feed-page .album-directory-cover-wrap,
    body.feed-page.force-mobile-feed .album-directory-cover-wrap {
        width: 112px !important;
        height: 112px !important;
    }
}


/* v39 - mobile usa 3 capas redondas por linha e nome completo do cantor, sem mexer no restante do feed mobile */
@media (max-width: 768px) {
    body.feed-page .feed.album-directory-feed,
    body.feed-page.force-mobile-feed .feed.album-directory-feed {
        display: block !important;
        overflow-y: auto !important;
        scroll-snap-type: none !important;
        min-height: 100dvh !important;
        height: auto !important;
        padding: 92px 14px 98px !important;
        background: #000 !important;
    }

    body.feed-page .album-directory-shell,
    body.feed-page.force-mobile-feed .album-directory-shell {
        width: 100% !important;
        max-width: 440px !important;
        margin: 0 auto !important;
        color: #fff !important;
    }

    body.feed-page .album-directory-head,
    body.feed-page.force-mobile-feed .album-directory-head {
        margin: 0 0 22px !important;
        text-align: left !important;
        padding: 0 2px !important;
    }

    body.feed-page .album-directory-head h1,
    body.feed-page.force-mobile-feed .album-directory-head h1 {
        margin: 0 0 6px !important;
        color: #fff !important;
        font-size: 28px !important;
        line-height: 1 !important;
        font-weight: 950 !important;
        letter-spacing: -0.04em !important;
    }

    body.feed-page .album-directory-head p,
    body.feed-page.force-mobile-feed .album-directory-head p {
        margin: 0 !important;
        color: rgba(255,255,255,.66) !important;
        font-size: 12px !important;
        line-height: 1.35 !important;
        font-weight: 750 !important;
    }

    body.feed-page .album-directory-grid,
    body.feed-page.force-mobile-feed .album-directory-grid {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 24px 14px !important;
        align-items: start !important;
    }

    body.feed-page .album-directory-card,
    body.feed-page.force-mobile-feed .album-directory-card {
        min-width: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 8px !important;
        text-align: center !important;
        color: #fff !important;
        text-decoration: none !important;
        -webkit-tap-highlight-color: transparent !important;
    }

    body.feed-page .album-directory-cover-wrap,
    body.feed-page.force-mobile-feed .album-directory-cover-wrap {
        width: 86px !important;
        height: 86px !important;
        border-radius: 50% !important;
        padding: 2px !important;
        display: block !important;
        background: linear-gradient(135deg,#ff3dc8,#7b2cff) !important;
        box-shadow: 0 10px 28px rgba(123,44,255,.20) !important;
    }

    body.feed-page .album-directory-cover,
    body.feed-page.force-mobile-feed .album-directory-cover {
        width: 100% !important;
        height: 100% !important;
        display: block !important;
        border-radius: 50% !important;
        object-fit: cover !important;
        background: #151515 !important;
        border: 2px solid #000 !important;
        box-sizing: border-box !important;
    }

    body.feed-page .album-directory-card strong,
    body.feed-page.force-mobile-feed .album-directory-card strong {
        width: 100% !important;
        max-width: 108px !important;
        display: block !important;
        color: #fff !important;
        font-size: 11px !important;
        line-height: 1.18 !important;
        font-weight: 900 !important;
        letter-spacing: -0.02em !important;
        white-space: normal !important;
        overflow: visible !important;
        text-overflow: clip !important;
        overflow-wrap: anywhere !important;
    }
}

@media (max-width: 380px) {
    body.feed-page .album-directory-cover-wrap,
    body.feed-page.force-mobile-feed .album-directory-cover-wrap {
        width: 76px !important;
        height: 76px !important;
    }
    body.feed-page .album-directory-card strong,
    body.feed-page.force-mobile-feed .album-directory-card strong {
        max-width: 96px !important;
        font-size: 10.5px !important;
        line-height: 1.18 !important;
        white-space: normal !important;
        overflow: visible !important;
        text-overflow: clip !important;
        overflow-wrap: anywhere !important;
    }
    body.feed-page .album-directory-grid,
    body.feed-page.force-mobile-feed .album-directory-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 22px 10px !important;
    }
}