.favorites-page main {
    gap: 20px;
}

.favorites-page .favorite-collection-hero,
.favorites-page .favorite-lists-panel,
.favorites-page .music-library-panel {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    border-color: rgb(var(--neon-primary-rgb) / 0.3);
    background:
        radial-gradient(circle at 14% 0%, rgb(var(--neon-primary-rgb) / 0.2), transparent 36%),
        radial-gradient(circle at 92% 18%, rgb(var(--neon-secondary-rgb) / 0.18), transparent 34%),
        linear-gradient(180deg, rgba(17, 24, 43, 0.82), rgba(6, 10, 23, 0.72)),
        rgba(7, 11, 24, 0.72);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.11),
        inset 0 0 54px rgb(var(--neon-primary-rgb) / 0.055),
        0 24px 74px rgba(0, 0, 0, 0.36),
        0 0 32px rgb(var(--neon-primary-rgb) / 0.14),
        0 0 58px rgb(var(--neon-secondary-rgb) / 0.09);
}

.favorites-page .favorite-collection-hero::before,
.favorites-page .favorite-lists-panel::before,
.favorites-page .music-library-panel::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    background:
        linear-gradient(112deg, rgba(255, 255, 255, 0.16), transparent 24%),
        linear-gradient(90deg, transparent 0 8%, rgb(var(--neon-primary-rgb) / 0.24) 48%, rgb(var(--neon-secondary-rgb) / 0.16) 66%, transparent 94%) left top / 100% 1px no-repeat;
    opacity: 0.74;
    pointer-events: none;
}

.favorites-page .favorite-collection-hero::after {
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--neon-primary), var(--neon-secondary), transparent);
    box-shadow:
        0 0 18px var(--neon-glow),
        0 0 34px rgb(var(--neon-secondary-rgb) / 0.16);
}

.favorites-page .favorite-collection-copy h1 {
    text-shadow:
        0 1px 0 rgba(255, 255, 255, 0.04),
        0 0 28px rgb(var(--neon-primary-rgb) / 0.18),
        0 0 42px rgb(var(--neon-secondary-rgb) / 0.12);
}

.favorites-page .favorite-collection-copy > p:not(.eyebrow) {
    color: rgba(224, 232, 247, 0.78);
}

.favorites-page .favorite-collection-stats span,
.favorites-page .favorite-list-tabs a,
.favorites-page .favorite-list-card,
.favorites-page .favorite-track-tags span,
.favorites-page .favorites-track-list .favorite-track-card {
    border-color: rgb(var(--neon-primary-rgb) / 0.2);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.085), rgba(255, 255, 255, 0.028)),
        radial-gradient(circle at 12% 0%, rgb(var(--neon-primary-rgb) / 0.09), transparent 36%),
        rgba(8, 13, 25, 0.66);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        0 0 20px rgb(var(--neon-primary-rgb) / 0.055);
}

.favorites-page .favorite-list-tabs a.is-active,
.favorites-page .favorite-list-tabs a:hover,
.favorites-page .favorite-list-tabs a:focus-visible,
.favorites-page .favorites-track-list .favorite-track-card:hover,
.favorites-page .favorites-track-list .favorite-track-card.is-selected,
.favorites-page .favorites-track-list .favorite-track-card:focus-within {
    border-color: var(--neon-line);
    background:
        linear-gradient(180deg, var(--neon-soft), rgba(255, 255, 255, 0.04)),
        radial-gradient(circle at 88% 0%, var(--neon-secondary-soft), transparent 38%),
        rgba(8, 13, 25, 0.82);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.1),
        0 16px 44px rgb(var(--neon-primary-rgb) / 0.13),
        0 0 26px var(--neon-glow);
}

.favorites-page .favorite-hero-art-tile,
.favorites-page .favorite-track-art {
    border-color: rgb(var(--neon-primary-rgb) / 0.28);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.12),
        inset 0 -24px 44px rgba(0, 0, 0, 0.22),
        0 18px 38px rgba(0, 0, 0, 0.3),
        0 0 24px rgb(var(--neon-primary-rgb) / 0.14),
        0 0 40px rgb(var(--neon-secondary-rgb) / 0.08);
}

.favorites-page .favorite-hero-art-tile {
    position: relative;
    overflow: hidden;
}

.favorites-page .favorite-hero-art-tile::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.18), transparent 34%);
    pointer-events: none;
}

.favorites-page .favorite-list-tabs strong {
    border-color: rgb(var(--neon-primary-rgb) / 0.26);
    background: var(--neon-soft);
    box-shadow: 0 0 16px rgb(var(--neon-primary-rgb) / 0.12);
}

.favorites-page .favorite-track-button.is-active {
    border-color: rgb(var(--neon-primary-rgb) / 0.48);
    background:
        radial-gradient(circle at 50% 20%, rgba(255, 255, 255, 0.16), transparent 52%),
        linear-gradient(135deg, var(--neon-soft), var(--neon-secondary-soft)),
        rgba(26, 18, 42, 0.78);
    color: #ffe4f0;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.12),
        0 0 18px var(--neon-glow);
}

.favorites-page .favorite-track-artist {
    display: block;
    max-width: 100%;
    overflow: hidden;
    color: rgb(var(--neon-secondary-rgb) / 0.92);
    font-size: 0.82rem;
    font-weight: 800;
    text-decoration: none;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.favorites-page .favorites-starter-empty {
    grid-column: 1 / -1;
}

.favorites-page .favorite-section-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    flex-wrap: wrap;
}

.favorites-page .favorite-play-button {
    white-space: nowrap;
}

.favorites-page a.favorite-track-artist:hover,
.favorites-page a.favorite-track-artist:focus-visible {
    color: var(--neon-secondary);
    text-decoration: underline;
    text-underline-offset: 3px;
}

@media (min-width: 1366px) {
    .favorites-page .favorite-collection-hero {
        grid-template-columns: minmax(0, 1fr) clamp(300px, 24vw, 460px);
    }

    .favorite-list-card-grid {
        grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    }

    .favorites-track-list .favorite-track-card {
        grid-template-columns: 8px 72px minmax(260px, 1fr) minmax(140px, auto) auto;
    }
}

@media (min-width: 2200px) {
    .favorites-page .favorite-collection-copy {
        max-width: 980px;
    }

    .favorite-list-tabs {
        grid-auto-columns: minmax(220px, 300px);
    }
}

@media (max-width: 700px) {
    .favorites-page .favorite-section-actions {
        justify-content: flex-start;
        width: 100%;
    }

    .favorites-page .favorite-hero-art-stack {
        display: none;
    }

    .favorite-list-create {
        grid-template-columns: 1fr;
    }

    .favorites-track-list .favorite-track-card {
        grid-template-columns: 8px clamp(54px, 16vw, 64px) minmax(0, 1fr);
        gap: 10px;
        align-items: start;
    }

    .favorite-track-art {
        width: 100%;
        height: auto;
        aspect-ratio: 1;
        max-width: none;
        align-self: start;
    }

    .favorite-track-time,
    .favorites-track-list .track-actions {
        grid-column: 3;
        justify-self: start;
    }

    .favorites-track-list .track-actions {
        width: 100%;
        max-width: 280px;
    }

    .favorites-track-list .track-actions .button {
        flex: 1 1 120px;
    }

    .favorites-track-list .track-actions .favorite-track-button {
        flex: 0 0 42px;
    }
}