/* ========================================================================== 
   BTE Music Catalogue Front-End Styles
   ========================================================================== */

.bte-catalogue {
    background: #111111;
    color: #ffffff;
    margin: 0 auto;
    padding: clamp(14px, 2.5vw, 36px) clamp(16px, 4vw, 48px);
}

.bte-catalogue,
.bte-catalogue * {
    box-sizing: border-box;
}

.bte-catalogue__shell {
    margin: 0 auto;
    max-width: 1440px;
}

.bte-catalogue__header {
    align-items: end;
    display: flex;
    gap: 24px;
    justify-content: space-between;
    margin-bottom: clamp(22px, 4vw, 42px);
}

.bte-catalogue__eyebrow {
    color: #e80a68!important;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.16em;
    margin: 0 0 8px;
    text-transform: uppercase;
}

.bte-catalogue__title {
    color: #ffffff;
    font-size: clamp(34px, 6vw, 72px);
    letter-spacing: -0.06em;
    line-height: 0.95;
    margin: 0;
}

.bte-catalogue__intro {
    color: #b3b3b3;
    font-size: 15px;
    line-height: 1.55;
    margin: 0;
    max-width: 360px;
}

.bte-catalogue__grid {
    display: grid;
    gap: clamp(16px, 2vw, 24px);
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
}

.bte-version-card {
    background: linear-gradient(180deg, #202020 0%, #171717 100%);
    border: none;
    border-radius: 22px;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08), 0 22px 60px rgba(0, 0, 0, 0.22);
    overflow: hidden;
    transition: box-shadow 180ms ease, transform 180ms ease, background 180ms ease;
}

.bte-version-card:hover,
.bte-version-card:focus-within {
    background: linear-gradient(180deg, #292929 0%, #1d1d1d 100%);
    box-shadow: inset 0 0 0 1px rgba(232, 10, 104, 0.42), 0 22px 60px rgba(0, 0, 0, 0.22);
}

/* Only lift the card on pointer hover — focus-within must NOT translateY
   because focusing a button inside triggers :focus-within, which shifts
   the card and causes the title text to reflow onto two lines. */
.bte-version-card:hover {
    transform: translateY(-3px);
}

.bte-version-card__art {
    aspect-ratio: 1 / 1;
    background: #292929;
    overflow: hidden;
}

.bte-version-card__art img {
    display: block;
    height: 100%;
    object-fit: cover;
    width: 100%;
}

.bte-version-card__body {
    padding: 11px;
}

.bte-version-card__badge {
    display: none;
}

.bte-version-card__title {
    color: #ffffff;
    font-size: 18px;
    letter-spacing: -0.03em;
    line-height: 1.15;
    margin: 0 0 7px;
    min-height: calc(1.15em * 2); /* reserve two lines — prevents reflow on hover */
}
.bte-version-card__comment {
    color: #b3b3b3;
    font-size: 11px;
    line-height: 1.45;
    margin: 0 0 7px;
}

.bte-version-card__plays {
    color: #e80a68;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.02em;
    margin: 0 0 8px;
}

.bte-version-card__plays-icon {
    display: inline-flex;
    margin-right: 4px;
    vertical-align: middle;
}

.bte-version-card__plays-icon svg {
    height: 10px;
    width: 10px;
}

.bte-version-card__comment {
    margin-top: 10px;
}

.bte-version-card__no-audio {
    color: #777777;
    font-size: 12px;
    font-weight: 700;
}

.bte-catalogue__empty {
    background: #1c1c1c;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 22px;
    padding: 28px;
}

.bte-catalogue__empty h3 {
    color: #ffffff;
    margin: 0 0 8px;
}

.bte-catalogue__empty p {
    color: #b3b3b3;
    margin: 0;
}

.bte-now-playing {
    align-items: center;
    backdrop-filter: blur(18px);
    background: rgba(17, 17, 17, 0.92);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 18px;
    bottom: 18px;
    box-shadow: 0 20px 70px rgba(0, 0, 0, 0.45);
    color: #ffffff;
    display: none;
    gap: 16px;
    left: 50%;
    max-width: min(680px, calc(100vw - 32px));
    padding: 12px 14px;
    position: fixed;
    transform: translateX(-50%);
    width: 100%;
    z-index: 9999;
}

.bte-now-playing.is-active {
    display: flex;
}

.bte-now-playing__meta {
    min-width: 0;
}

.bte-now-playing__label {
    color: #e80a68;
    display: block;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.12em;
    line-height: 1;
    margin-bottom: 4px;
    text-transform: uppercase;
}

.bte-now-playing__title {
    color: #ffffff;
    display: block;
    font-size: 14px;
    font-weight: 800;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bte-now-playing__artist {
    color: #b3b3b3;
    display: block;
    font-size: 12px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bte-now-playing audio {
    flex: 1 1 auto;
    min-width: 220px;
}

@media (max-width: 720px) {
    .bte-catalogue__header {
        align-items: start;
        flex-direction: column;
    }

    .bte-catalogue__grid {
        grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    }

    .bte-version-card__body {
        padding: 14px;
    }

    .bte-now-playing {
        align-items: stretch;
        flex-direction: column;
    }

    .bte-now-playing audio {
        min-width: 0;
        width: 100%;
    }
}

/* ========================================================================== 
   Catalogue Toolbar, Count, Sort, and Load More
   ========================================================================== */

.bte-catalogue__toolbar {
    align-items: center;
    background: rgba(255, 255, 255, 0.045);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 20px;
    display: flex;
    gap: 18px;
    justify-content: space-between;
    margin: 0 0 clamp(18px, 3vw, 28px);
    padding: 14px 16px;
}

.bte-catalogue__summary {
    color: #b3b3b3;
    font-size: 14px;
    line-height: 1.35;
}

.bte-catalogue__summary strong {
    color: #ffffff;
    font-size: 16px;
}

.bte-catalogue__summary-label {
    color: #e80a68;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.12em;
    margin-right: 8px;
    text-transform: uppercase;
}

.bte-catalogue__sort-form {
    align-items: center;
    display: flex;
    gap: 10px;
}

.bte-catalogue__sort-form label {
    color: #b3b3b3;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.bte-catalogue__sort-form select {
    appearance: none;
    background: #ffffff;
    border: 0;
    border-radius: 999px;
    color: #111111;
    cursor: pointer;
    font-size: 13px;
    font-weight: 800;
    min-height: 40px;
    min-width: 132px;
    padding: 0 36px 0 16px;
}

.bte-catalogue__load-more-wrap {
    display: flex;
    justify-content: center;
    padding: clamp(24px, 4vw, 42px) 0 0;
}

.bte-catalogue__load-more {
    background: #ffffff;
    border-radius: 999px;
    color: #111111;
    display: inline-flex;
    font-size: 13px;
    font-weight: 900;
    letter-spacing: 0.08em;
    min-height: 44px;
    padding: 14px 24px;
    text-decoration: none;
    text-transform: uppercase;
    transition: background 160ms ease, color 160ms ease, transform 160ms ease;
}

.bte-catalogue__load-more:hover,
.bte-catalogue__load-more:focus {
    background: #e80a68;
    color: #ffffff;
    transform: translateY(-1px);
}

@media (max-width: 720px) {
    .bte-catalogue__toolbar {
        align-items: stretch;
        flex-direction: column;
    }

    .bte-catalogue__sort-form {
        justify-content: space-between;
    }

    .bte-catalogue__sort-form select {
        flex: 1 1 auto;
    }
}

/* ========================================================================== 
   Catalogue Filter Rail + Results Layout
   ========================================================================== */

.bte-catalogue__layout {
    align-items: start;
    display: grid;
    gap: clamp(18px, 2.6vw, 34px);
    grid-template-columns: minmax(240px, 300px) minmax(0, 1fr);
}

.bte-catalogue__filter-form {
    display: grid;
    gap: 15px;
}

.bte-catalogue__filter-field label {
    color: #b3b3b3;
    display: block;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 0.12em;
    margin: 0 0 7px;
    text-transform: uppercase;
}

.bte-catalogue__filter-field input,
.bte-catalogue__filter-field select {
    appearance: none;
    background: rgba(255,255,255,0.94);
    border: 1px solid rgba(255,255,255,0.16);
    border-radius: 14px;
    color: #111111;
    font-size: 14px;
    font-weight: 700;
    min-height: 44px;
    padding: 0 14px;
    width: 100%;
}

.bte-catalogue__filter-field input::placeholder {
    color: #6b6b6b;
    font-weight: 600;
}

.bte-catalogue__filter-field select {
    cursor: pointer;
    padding-right: 36px;
}

.bte-catalogue__filter-field input:focus,
.bte-catalogue__filter-field select:focus,
.bte-catalogue__sort-form select:focus {
    border-color: #e80a68;
    box-shadow: 0 0 0 2px rgba(232, 10, 104, 0.22);
    outline: none;
}

.bte-catalogue__filter-submit {
    appearance: none;
    background: #e80a68;
    border: 0;
    border-radius: 5px;
    color: #ffffff;
    cursor: pointer;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 0.09em;
    min-height: 38px;
    padding: 10px 18px;
    text-transform: uppercase;
    transition: background 160ms ease;
}

.bte-catalogue__filter-submit:hover,
.bte-catalogue__filter-submit:focus {
    background: #c20858;
    color: #ffffff;
    transform: none;
}

.bte-catalogue__results {
    min-width: 0;
}

.bte-catalogue__results .bte-catalogue__toolbar {
    margin-top: 0;
}

@media (max-width: 980px) {
    .bte-catalogue__layout {
        grid-template-columns: 1fr;
    }

    .bte-catalogue__filter-form {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .bte-catalogue__filter-submit {
        grid-column: 1 / -1;
    }
}

@media (max-width: 620px) {
    .bte-catalogue__filter-form {
        grid-template-columns: 1fr;
    }
}

/* ========================================================================== 
   Catalogue Discovery Modes
   ========================================================================== */

.bte-catalogue__browse {
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    margin-bottom: 16px;
    padding-bottom: 18px;
}

.bte-catalogue__browse h3 {
    color: #ffffff;
    font-size: 18px;
    letter-spacing: -0.03em;
    line-height: 1.1;
    margin: 0 0 12px;
}

/* ========================================================================== 
   Phase 2A: Persistent Player + Playlist Drawer
   ========================================================================== */

.bte-player__playlist-button span,
.bte-playlist-drawer__header h3 span {
    background: #d92f70;
    border-radius: 999px;
    color: #fff;
    display: inline-flex;
    font-size: 12px;
    justify-content: center;
    min-width: 24px;
    padding: 3px 7px;
}

.bte-version-card.is-playing {
    border-color: rgba(217, 47, 112, 0.75);
    box-shadow: 0 0 0 1px rgba(217, 47, 112, 0.38), 0 18px 60px rgba(217, 47, 112, 0.15);
}

.bte-player {
    bottom: 18px;
    left: 50%;
    opacity: 0;
    pointer-events: none;
    position: fixed;
    transform: translate(-50%, 120%);
    transition: opacity 180ms ease, transform 180ms ease;
    width: min(1180px, calc(100vw - 36px));
    z-index: 9999;
}

.bte-player.is-active {
    opacity: 1;
    pointer-events: auto;
    transform: translate(-50%, 0);
}

.bte-player__inner {
    align-items: center;
    background: rgba(18, 18, 18, 0.96);
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 22px 80px rgba(0, 0, 0, 0.55);
    display: grid;
    gap: 14px;
    padding: 12px 14px;
}

.bte-player__control,
.bte-player__playlist-button,
.bte-playlist-drawer button {
    cursor: pointer;
    font: inherit;
}

.bte-player__control {
    align-items: center;
    background: rgba(255, 255, 255, 0.08);
    border: 0;
    color: #fff;
    display: inline-flex;
    font-size: 22px;
    height: 40px;
    justify-content: center;
    line-height: 1;
    width: 40px;
}

.bte-player__control--primary {
    background: #fff;
    color: #111;
    font-size: 16px;
}

.bte-player__cover {
    border-radius: 14px;
    height: 58px;
    object-fit: cover;
    width: 58px;
}

.bte-player__meta {
    min-width: 0;
}

.bte-player__label,
.bte-playlist-drawer__eyebrow {
    color: #ff3b83;
    display: block;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 0.14em;
    margin-bottom: 3px;
    text-transform: uppercase;
}

.bte-player__meta strong,
.bte-player__meta span[data-bte-player-artist] {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bte-player__meta strong {
    color: #fff;
    font-size: 15px;
}

.bte-player__meta span[data-bte-player-artist] {
    color: #c8c8c8;
    font-size: 13px;
}

.bte-player__timeline {
    align-items: center;
    color: #cfcfcf;
    display: grid;
    font-size: 12px;
    gap: 10px;
    grid-template-columns: 42px minmax(120px, 1fr) 42px;
}

.bte-player input[type="range"] {
    accent-color: #d92f70;
    width: 100%;
}

.bte-player__volume {
    align-items: center;
    color: #b9b9b9;
    display: grid;
    font-size: 11px;
    gap: 5px;
}

.bte-player__playlist-button {
    background: rgba(217, 47, 112, 0.18);
    border: 1px solid rgba(217, 47, 112, 0.42);
    border-radius: 999px;
    color: #fff;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 0.08em;
    padding: 11px 14px;
    text-transform: uppercase;
    white-space: nowrap;
}

.bte-playlist-open {
    overflow: hidden;
}

.bte-playlist-drawer {
    inset: 0;
    opacity: 0;
    pointer-events: none;
    position: fixed;
    transition: opacity 180ms ease;
    z-index: 10000;
}

.bte-playlist-drawer.is-open {
    opacity: 1;
    pointer-events: auto;
}

.bte-playlist-drawer__overlay {
    background: transparent;
    inset: 0;
    position: absolute;
    transition: background 180ms ease;
}

/* Only the most-recently-opened drawer paints the dark backdrop and sits on top. */
.bte-lyrics-drawer.is-top,
.bte-playlist-drawer.is-top {
    z-index: 10010;
}

.bte-playlist-drawer.is-top .bte-playlist-drawer__overlay {
    background: rgba(0, 0, 0, 0.62);
}

.bte-playlist-drawer__panel {
    background: #141414;
    border-left: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: -20px 0 80px rgba(0, 0, 0, 0.55);
    color: #fff;
    height: 100%;
    max-width: min(440px, 94vw);
    overflow-y: auto;
    padding: 28px;
    position: absolute;
    right: 0;
    top: 0;
    transform: translateX(100%);
    transition: transform 220ms ease;
    width: 440px;
}

.bte-playlist-drawer.is-open .bte-playlist-drawer__panel {
    transform: translateX(0);
}

.bte-playlist-drawer__header {
    align-items: flex-start;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
    padding-bottom: 20px;
}

.bte-playlist-drawer__header-right {
    align-items: flex-end;
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    gap: 8px;
    margin-left: 12px;
}

.bte-playlist-drawer__header h3 {
    color: #fff;
    font-size: 30px;
    line-height: 1.1;
    margin: 0;
}

.bte-playlist-drawer .bte-playlist-drawer__close {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 5px;
    color: #fff;
    cursor: pointer;
    font-family: Inter, "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 10px;
    font-weight: 900;
    height: auto;
    letter-spacing: 0.14em;
    line-height: 1;
    padding: 7px 12px;
    text-transform: uppercase;
    transition: background 160ms ease, border-color 160ms ease;
    width: auto;
}
.bte-playlist-drawer .bte-playlist-drawer__close:hover,
.bte-playlist-drawer .bte-playlist-drawer__close:focus {
    background: rgba(255, 255, 255, 0.16);
    border-color: rgba(255, 255, 255, 0.3);
    outline: none;
}

/* Item 3 — "+ New Playlist" mirrors the signature page's .bte-sig-create-pl--sm.
   Scoped under .bte-playlist-drawer so it outranks the `.bte-playlist-drawer
   button { font: inherit }` reset that was clobbering the font. */
.bte-playlist-drawer .bte-playlist-drawer__new {
    align-items: center;
    appearance: none;
    background: #e80a68;
    border: 1px solid #e80a68;
    border-radius: 9px;
    color: #ffffff;
    cursor: pointer;
    display: inline-flex;
    font-family: Inter, "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 11px;
    font-weight: 800;
    gap: 8px;
    height: 34px;
    justify-content: center;
    letter-spacing: 0.03em;
    margin: 0;
    padding: 0 13px;
    text-transform: uppercase;
    transition: background 140ms ease, border-color 140ms ease;
    white-space: nowrap;
}
.bte-playlist-drawer .bte-playlist-drawer__new:hover,
.bte-playlist-drawer .bte-playlist-drawer__new:focus {
    background: #ff2e85;
    border-color: #ff2e85;
    outline: none;
}
.bte-playlist-drawer .bte-playlist-drawer__new-plus { font-size: 14px; line-height: 1; }
.bte-playlist-drawer__new[hidden] { display: none !important; }

.bte-playlist-drawer__empty {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 18px;
    color: #cfcfcf;
    line-height: 1.45;
    padding: 18px;
}

.bte-playlist-drawer__list {
    display: grid;
    gap: 12px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.bte-playlist-item {
    align-items: center;
    background: rgba(255, 255, 255, 0.055);
    border: 1px solid rgba(255, 255, 255, 0.08);
    display: grid;
    gap: 12px;
}

.bte-playlist-item__remove {
    align-items: center;
    border: 0;
    border-radius: 999px;
    display: inline-flex;
    height: 34px;
    justify-content: center;
    width: 34px;
}

.bte-playlist-item__remove {
    background: transparent;
    color: #aaa;
    font-size: 22px;
}

.bte-playlist-item__meta {
    min-width: 0;
}

.bte-playlist-item__meta strong,
.bte-playlist-item__meta span {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bte-playlist-item__meta strong {
    color: #fff;
}

.bte-playlist-item__meta span {
    color: #bbb;
    margin-top: 3px;
}

/* #5 — Track length under the artist name in drawer rows. Same color/size as
   the artist (inherits from `.bte-playlist-item__meta span` above). Hidden
   until the lazy metadata probe finishes, so the row doesn't reserve space
   for an empty line. */
.bte-playlist-item__length:empty {
    display: none;
}

/* #4 — Persistent player action buttons (Lyrics / YT / TT / Add). Lays out the
   icons in a tidy row inside the player. Each button picks up its existing
   `.bte-list-row__action-btn` styling. */
.bte-player__actions {
    align-items: center;
    display: flex;
    gap: 6px;
}

/* The action buttons use `.bte-list-row__action-btn { display: inline-flex }`,
   and the YT/TT variants force `display: inline-flex !important`. Honor [hidden]
   with !important + higher specificity so buttons for absent data (a track with
   no lyrics, or no TikTok link) are removed rather than shown empty/placeholder. */
.bte-player__actions [hidden] {
    display: none !important;
}

.bte-playlist-drawer__actions {
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    display: grid;
    gap: 6px;
    grid-template-columns: repeat(4, 1fr);
    margin-top: 20px;
    padding-top: 12px;
}

.bte-playlist-drawer__guest-note {
    color: #9a9a9a;
    font-size: 13px;
    line-height: 1.5;
    margin: 16px 0 0;
}

.bte-playlist-drawer__guest-link {
    appearance: none;
    background: none;
    border: 0;
    color: #e80a68;
    cursor: pointer;
    font: inherit;
    font-weight: 700;
    padding: 0;
    text-decoration: underline;
}

.bte-playlist-drawer__guest-link:hover {
    color: #ff3d8b;
}

/* Item 2 — bottom action buttons mirror the signature page's
   .bte-sig-btn--sm (solid) with Clear as the .bte-sig-btn--ghost variant. */
.bte-playlist-drawer__actions button {
    align-items: center;
    background: #e80a68;
    border: 0;
    border-radius: 9px;
    color: #ffffff;
    cursor: pointer;
    display: inline-flex;
    font-family: Inter, "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 13px;
    font-weight: 700;
    justify-content: center;
    letter-spacing: 0;
    padding: 8px 12px;
    text-transform: none;
    white-space: nowrap;
    width: 100%;
}

.bte-playlist-drawer__actions button:hover {
    background: #ff1f7e;
}

.bte-playlist-drawer__actions button[data-bte-playlist-clear] {
    background: #1b1b22;
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: #f4f4f6;
}

.bte-playlist-drawer__actions button[data-bte-playlist-clear]:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: #e80a68;
}

@media (max-width: 980px) {
    .bte-player {
        bottom: 10px;
        width: calc(100vw - 20px);
    }

    .bte-player__inner {
        grid-template-columns: auto auto auto minmax(0, 1fr) auto;
    }

    .bte-player__cover,
    .bte-player__timeline,
    .bte-player__volume {
        display: none;
    }
}

@media (max-width: 640px) {
    .bte-catalogue__toolbar {
        align-items: stretch;
        flex-direction: column;
    }

    .bte-player__playlist-button {
        justify-content: center;
        width: 100%;
    }

    .bte-player__inner {
        grid-template-columns: auto auto auto minmax(0, 1fr);
    }

    .bte-player__playlist-button {
        display: none;
    }
}


/* ========================================================================== 
   Phase 2B Polish: controls, typography, spacing
   ========================================================================== */

.bte-catalogue,
.bte-catalogue button,
.bte-catalogue input,
.bte-catalogue select,
.bte-catalogue textarea {
    font-family: Inter, "Helvetica Neue", Helvetica, Arial, sans-serif;
}

.bte-catalogue {
    padding-bottom: clamp(170px, 16vw, 230px);
}
.bte-catalogue__sort-form select,
.bte-player__playlist-button {
    border-radius: 10px !important;
}

.bte-player__inner {
    border-radius: 16px;
}

.bte-player__control {
    border-radius: 10px;
}

.bte-playlist-item,
.bte-playlist-drawer__empty {
    border-radius: 10px;
}

.bte-playlist-item__remove,
.bte-playlist-drawer__close {
    border-radius: 10px;
}


/* ==========================================================================
   Phase 2C: Card control panel, cover play button, lyrics modal
   ========================================================================== */

.bte-version-card__art {
    position: relative;
}

.bte-version-card__art::after {
    background: linear-gradient(180deg, rgba(0,0,0,0.08), rgba(0,0,0,0.36));
    content: "";
    inset: 0;
    opacity: 0;
    pointer-events: none;
    position: absolute;
    transition: opacity 180ms ease;
}

.bte-version-card:hover .bte-version-card__art::after,
.bte-version-card:focus-within .bte-version-card__art::after,
.bte-version-card.is-playing .bte-version-card__art::after {
    opacity: 1;
}

.bte-version-card__cover-play {
    align-items: center;
    background: #57d76f;
    border: 0;
    border-radius: 50% !important;
    bottom: 18px;
    box-shadow: 0 18px 45px rgba(0, 0, 0, 0.35);
    cursor: pointer;
    display: inline-flex;
    height: 72px;
    justify-content: center;
    opacity: 0;
    position: absolute;
    right: 18px;
    transform: translateY(8px) scale(0.94);
    transition: opacity 180ms ease, transform 180ms ease, background 180ms ease;
    width: 72px;
    z-index: 2;
}

.bte-version-card:hover .bte-version-card__cover-play,
.bte-version-card:focus-within .bte-version-card__cover-play,
.bte-version-card.is-playing .bte-version-card__cover-play {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.bte-version-card__cover-play:hover,
.bte-version-card__cover-play:focus {
    background: #ffffff;
    outline: none;
    transform: translateY(-1px) scale(1.03);
}

.bte-version-card__cover-play span {
    border-bottom: 15px solid transparent;
    border-left: 23px solid #050505;
    border-top: 15px solid transparent;
    display: block;
    height: 0;
    margin-left: 5px;
    width: 0;
}

.bte-version-card__no-audio {
    display: inline-flex;
    margin-top: 12px;
}

.bte-lyrics-open {
    overflow: hidden;
}

.bte-lyrics-drawer {
    inset: 0;
    opacity: 0;
    pointer-events: none;
    position: fixed;
    transition: opacity 180ms ease;
    z-index: 10000;
}

.bte-lyrics-drawer.is-open {
    opacity: 1;
    pointer-events: auto;
}

.bte-lyrics-drawer__overlay {
    background: transparent;
    inset: 0;
    position: absolute;
    transition: background 180ms ease;
}

.bte-lyrics-drawer.is-top .bte-lyrics-drawer__overlay {
    background: rgba(0, 0, 0, 0.68);
}

.bte-lyrics-drawer__panel {
    background: #141414;
    border-right: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 20px 0 80px rgba(0, 0, 0, 0.55);
    color: #fff;
    height: 100%;
    left: 0;
    max-width: min(480px, 94vw);
    overflow: hidden;
    position: absolute;
    top: 0;
    transform: translateX(-100%);
    transition: transform 220ms ease;
    width: 480px;
}

.bte-lyrics-drawer.is-open .bte-lyrics-drawer__panel {
    transform: translateX(0);
}

/* Cascading watermark graphic behind the lyrics (mirrors common cover-art cascade). */
.bte-lyrics-drawer__watermark {
    background-position: center top;
    background-repeat: no-repeat;
    background-size: 118% auto;
    inset: 0;
    opacity: 0;
    pointer-events: none;
    position: absolute;
    transition: opacity 200ms ease;
    z-index: 0;
}

.bte-lyrics-drawer__watermark.has-watermark {
    opacity: 0.15;
}

.bte-lyrics-drawer__inner {
    height: 100%;
    overflow-y: auto;
    padding: 28px;
    position: relative;
    z-index: 1;
}

.bte-lyrics-drawer__header {
    align-items: flex-start;
    display: flex;
    gap: 16px;
    justify-content: space-between;
    margin-bottom: 18px;
}

.bte-lyrics-drawer__eyebrow {
    color: #ff3b83;
    display: block;
    font-family: Inter, "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 0.14em;
    margin-bottom: 8px;
    text-transform: uppercase;
}

.bte-lyrics-drawer__close {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 10px;
    color: #fff;
    cursor: pointer;
    flex-shrink: 0;
    font-family: Inter, "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 10px;
    font-weight: 900;
    height: auto;
    letter-spacing: 0.14em;
    line-height: 1;
    padding: 7px 12px;
    text-transform: uppercase;
    transition: background 160ms ease, border-color 160ms ease;
    width: auto;
}

.bte-lyrics-drawer__close:hover,
.bte-lyrics-drawer__close:focus {
    background: rgba(255, 255, 255, 0.16);
    border-color: rgba(255, 255, 255, 0.3);
    outline: none;
}

.bte-lyrics-drawer h3 {
    color: #ffffff;
    font-size: clamp(26px, 3.4vw, 40px);
    letter-spacing: -0.05em;
    line-height: 1.02;
    margin: 0 0 14px;
}

.bte-lyrics-drawer__credits {
    margin: 0 0 22px;
}

.bte-lyrics-drawer__credit {
    color: #d8d8d8!important;
    font-family: Inter, "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 12px;
    line-height: 1.3;
    margin: 0 0 2px;
}

.bte-lyrics-drawer__credit-label {
    color: #ff3b83;
    font-family: Inter, "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-weight: 700;
    margin-right: 6px;
}

.bte-lyrics-drawer__credit-value {
    font-family: Inter, "Helvetica Neue", Helvetica, Arial, sans-serif;
}

.bte-lyrics-drawer__content {
    color: #eeeeee;
    font-size: 17px;
    line-height: 1.72;
    white-space: normal;
}

.bte-lyrics-drawer__content p {
    margin: 0 0 1.15em;
}

@media (max-width: 720px) {
    .bte-version-card__cover-play {
        height: 58px;
        width: 58px;
    }

    .bte-version-card__cover-play span {
        border-bottom-width: 12px;
        border-left-width: 19px;
        border-top-width: 12px;
    }
}

/* ========================================================================== 
   Phase 2C: Playlist cover controls + drag reorder
   ========================================================================== */

.bte-playlist-item {
    cursor: grab;
    grid-template-columns: 75px minmax(0, 1fr) auto;
    min-height: 98px;
    padding: 11px;
    transition: border-color 160ms ease, opacity 160ms ease, transform 160ms ease;
}

.bte-playlist-item__actions {
    align-items: center;
    align-self: center;
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    justify-content: flex-end;
    max-width: 130px;
}

/* Drawer items group their icons into full-width rows so they stack:
   Row 1 = Lyrics / Download / Remove, Row 2 = YouTube / TikTok. Using
   flex-basis 100% (rather than column on the container) keeps the Related
   drawer's direct-child action buttons laid out in a normal row. */
.bte-playlist-item__actions-row {
    flex: 0 0 100%;
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    justify-content: flex-end;
}

.bte-playlist-item:active {
    cursor: grabbing;
}

.bte-playlist-item.is-dragging {
    border-color: rgba(217, 47, 112, 0.72);
    opacity: 0.55;
    transform: scale(0.985);
}

.bte-playlist-item__cover-play {
    appearance: none;
    background: transparent;
    border: 0;
    border-radius: 10px;
    cursor: pointer;
    height: 75px;
    overflow: hidden;
    padding: 0;
    position: relative;
    width: 75px;
}

.bte-playlist-item__cover {
    background: #242424;
    border-radius: 10px;
    display: block;
    height: 75px;
    overflow: hidden;
    position: relative;
    width: 75px;
}

.bte-playlist-item__cover img {
    display: block;
    height: 100%;
    object-fit: cover;
    width: 100%;
}

.bte-playlist-item__cover-placeholder {
    align-items: center;
    color: #d92f70;
    display: flex;
    font-size: 34px;
    height: 100%;
    justify-content: center;
    width: 100%;
}

.bte-playlist-item__play-overlay {
    align-items: center;
    display: flex;
    font-size: 22px;
    justify-content: center;
    line-height: 1;
    position: absolute;
    transition: background 160ms ease, color 160ms ease, transform 160ms ease;
}

.bte-playlist-item__cover-play:hover .bte-playlist-item__play-overlay,
.bte-playlist-item__cover-play:focus .bte-playlist-item__play-overlay,
.bte-playlist-item__cover-play.is-playing .bte-playlist-item__play-overlay {
    background: #d92f70;
    color: #ffffff;
    transform: translate(-50%, -50%) scale(1.05);
}

.bte-playlist-item__meta {
    align-self: center;
}

.bte-playlist-item__meta strong {
    font-size: 15px;
    line-height: 1.2;
    white-space: normal;
}

.bte-playlist-item__meta span {
    font-size: 11px;
}

.bte-playlist-item__drag-note {
    color: #777777;
    display: block;
    font-size: 10px;
    font-style: normal;
    font-weight: 800;
    letter-spacing: 0.08em;
    margin-top: 7px;
    text-transform: uppercase;
}

.bte-playlist-drawer__reorder-note {
    margin: 0 0 10px;
}

.bte-playlist-item__remove {
    align-self: center;
}

@media (max-width: 520px) {
    .bte-playlist-item {
        grid-template-columns: 64px minmax(0, 1fr) auto;
        min-height: 86px;
    }

    .bte-playlist-item__cover,
    .bte-playlist-item__cover-play {
        height: 64px;
        width: 64px;
    }
}

/* ========================================================================== 
   Spotify-inspired Destination Layout — 2026-06 front-end polish
   ========================================================================== */

.bte-catalogue__topbar {
    align-items: center;
    background: rgba(18, 18, 18, 0.78);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 18px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: space-between;
    margin: 0 0 18px;
    padding: 10px;
    position: sticky;
    top: 12px;
    z-index: 15;
}

.bte-user-panel__action,
.bte-user-panel__link {
    align-items: center;
    appearance: none;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 999px;
    color: #ffffff;
    cursor: pointer;
    display: inline-flex;
    font-size: 13px;
    font-weight: 800;
    gap: 7px;
    justify-content: center;
    line-height: 1;
    min-height: 38px;
    padding: 11px 15px;
    text-decoration: none;
    transition: background 160ms ease, color 160ms ease, transform 160ms ease, border-color 160ms ease;
}

.bte-user-panel__action:hover,
.bte-user-panel__action:focus,
.bte-user-panel__link:hover,
.bte-user-panel__link:focus {
    background: rgba(255, 255, 255, 0.18);
    border-color: rgba(255, 255, 255, 0.18);
    transform: translateY(-1px);
}

.bte-catalogue__layout--destination {
    align-items: start;
    display: grid;
    gap: 22px;
    grid-template-columns: 260px minmax(0, 1fr);
}

.bte-catalogue__user-panel {
    position: sticky;
    top: 92px;
}

.bte-user-panel__card {
    background: linear-gradient(180deg, #1d1d1d 0%, #141414 100%);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 22px;
    padding: 18px;
}

.bte-user-panel__eyebrow,
.bte-home-section__eyebrow {
    color: #e80a68;
    display: block;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 0.14em;
    margin: 0 0 8px;
    text-transform: uppercase;
}

.bte-user-panel__card h3 {
    color: #ffffff;
    font-size: 22px;
    letter-spacing: -0.04em;
    margin: 0 0 16px;
}

.bte-user-panel__action,
.bte-user-panel__link {
    justify-content: space-between;
    margin: 0 0 10px;
    width: 100%;
}

.bte-user-panel__coming-soon {
    color: #8f8f8f;
    display: block;
    font-size: 12px;
    line-height: 1.5;
    margin-top: 14px;
}

/* Sidebar "Recently Played" compact list */
.bte-user-panel__recent {
    margin-top: 22px;
}

.bte-user-panel__recent-title {
    color: #ffffff;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.02em;
    margin: 6px 0 10px;
}

.bte-user-panel__recent-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.bte-recent-mini {
    align-items: center;
    appearance: none;
    background: rgba(255, 255, 255, 0.04);
    border: 0;
    border-radius: 10px;
    cursor: pointer;
    display: grid;
    gap: 10px;
    grid-template-columns: 44px minmax(0, 1fr);
    padding: 6px;
    text-align: left;
    transition: background 140ms ease;
    width: 100%;
}

.bte-recent-mini:hover {
    background: rgba(255, 255, 255, 0.08);
}

.bte-recent-mini__art {
    border-radius: 6px;
    height: 44px;
    overflow: hidden;
    position: relative;
    width: 44px;
}

.bte-recent-mini__art img {
    display: block;
    height: 100%;
    object-fit: cover;
    width: 100%;
}

.bte-recent-mini__placeholder {
    align-items: center;
    background: #2a2a2a;
    color: #d92f70;
    display: flex;
    font-size: 18px;
    height: 100%;
    justify-content: center;
    width: 100%;
}

/* Play/pause icon — hidden until row hover, or shown while this song plays */
.bte-recent-mini__play-overlay {
    align-items: center;
    background: rgba(0, 0, 0, 0.4);
    color: #ffffff;
    display: flex;
    inset: 0;
    justify-content: center;
    opacity: 0;
    position: absolute;
    transition: opacity 140ms ease;
}

.bte-recent-mini:hover .bte-recent-mini__play-overlay,
.bte-recent-mini:focus-visible .bte-recent-mini__play-overlay,
.bte-recent-mini.is-playing .bte-recent-mini__play-overlay {
    opacity: 1;
}

.bte-recent-mini__play-overlay svg {
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.6));
    height: 16px;
    width: 16px;
}

.bte-recent-mini__meta {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.bte-recent-mini__title {
    color: #ffffff;
    font-size: 12px;
    font-weight: 700;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bte-recent-mini__artist {
    color: #888888;
    font-size: 11px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Recent Playlists — mosaic cover cards (logged-in) */
.bte-user-panel__playlists {
    margin-top: 16px;
}

.bte-user-panel__playlists-grid {
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(2, 1fr);
}

.bte-pl-card {
    appearance: none;
    background: transparent;
    border: 0;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 0;
    text-align: left;
}

.bte-pl-card__art {
    aspect-ratio: 1 / 1;
    border-radius: 8px;
    overflow: hidden;
    position: relative;
    width: 100%;
}

.bte-pl-mosaic {
    display: block;
    height: 100%;
    width: 100%;
}

.bte-pl-mosaic--single img {
    display: block;
    height: 100%;
    object-fit: cover;
    width: 100%;
}

.bte-pl-mosaic--quad {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
}

.bte-pl-mosaic--quad img {
    height: 100%;
    object-fit: cover;
    width: 100%;
}

.bte-pl-mosaic--empty {
    align-items: center;
    background: #2a2a2a;
    color: #d92f70;
    display: flex;
    font-size: 22px;
    height: 100%;
    justify-content: center;
    width: 100%;
}

.bte-pl-card__badge {
    align-items: center;
    background: #e80a68;
    border-radius: 999px;
    bottom: 5px;
    color: #ffffff;
    display: flex;
    font-size: 10px;
    font-weight: 800;
    height: 18px;
    justify-content: center;
    min-width: 18px;
    padding: 0 5px;
    position: absolute;
    right: 5px;
}

.bte-pl-card__name {
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    color: #e6e6e6;
    display: -webkit-box;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.25;
    overflow: hidden;
}

.bte-user-panel__all-playlists {
    appearance: none;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 999px;
    color: #ffffff;
    cursor: pointer;
    font-size: 12px;
    font-weight: 700;
    margin-top: 12px;
    padding: 8px 14px;
    width: 100%;
}

.bte-user-panel__all-playlists:hover {
    background: rgba(255, 255, 255, 0.12);
}

.bte-user-panel__new-playlist {
    appearance: none;
    background: #e80a68;
    border: 1px solid #e80a68;
    border-radius: 999px;
    color: #ffffff;
    cursor: pointer;
    font-size: 12px;
    font-weight: 700;
    margin-top: 8px;
    padding: 8px 14px;
    width: 100%;
}

.bte-user-panel__new-playlist:hover {
    background: #ff2a85;
    border-color: #ff2a85;
}

/* "Total Playlists — N" plain text + "View All" button (members-only page).
   Replaces the old pill that briefly flashed "My Playlist". */
.bte-user-panel__vault {
    align-items: center;
    display: flex;
    gap: 10px;
    justify-content: space-between;
}
.bte-user-panel__vault[hidden] { display: none !important; }

.bte-user-panel__vault-text {
    color: #ffffff;
    font-size: 13px;
    font-weight: 800;
    line-height: 1.2;
}
.bte-user-panel__vault-text [data-bte-library-count] { color: #e80a68; }

.bte-user-panel__view-all {
    appearance: none;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 10px;
    color: #ffffff;
    cursor: pointer;
    flex-shrink: 0;
    font-size: 12px;
    font-weight: 800;
    padding: 7px 14px;
    transition: background 160ms ease, border-color 160ms ease, transform 160ms ease;
}
.bte-user-panel__view-all:hover,
.bte-user-panel__view-all:focus {
    background: rgba(255, 255, 255, 0.18);
    border-color: rgba(255, 255, 255, 0.2);
    outline: none;
    transform: translateY(-1px);
}

/* Guest pill toggles opposite the vault row. */
.bte-user-panel__action[hidden] { display: none !important; }

.bte-catalogue__results--destination {
    min-width: 0;
}

.bte-home-section {
    margin: 0 0 clamp(26px, 4vw, 46px);
}

.bte-home-section__header {
    align-items: end;
    display: flex;
    gap: 16px;
    justify-content: space-between;
    margin: 0 0 14px;
}

.bte-home-section__header h3 {
    color: #ffffff;
    font-size: clamp(22px, 3vw, 34px);
    letter-spacing: -0.05em;
    line-height: 1;
    margin: 0;
}

.bte-home-section__header a {
    color: #b3b3b3;
    font-size: 13px;
    font-weight: 900;
    text-decoration: none;
}

.bte-home-section__header a:hover,
.bte-home-section__header a:focus {
    color: #ffffff;
}

.bte-catalogue__rail {
    display: grid;
    gap: 16px;
    grid-auto-columns: minmax(150px, 180px);
    grid-auto-flow: column;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    padding: 2px 2px 18px;
    scroll-snap-type: inline mandatory;
    scrollbar-color: rgba(255,255,255,0.24) transparent;
}

.bte-catalogue__rail > * {
    scroll-snap-align: start;
}

.bte-catalogue__rail .bte-version-card {
    min-width: 0;
}

.bte-catalogue__rail .bte-version-card__comment {
    display: block;
}

.bte-catalogue__rail--compact {
    grid-auto-columns: minmax(150px, 180px);
}

.bte-home-section__empty {
    background: rgba(255, 255, 255, 0.06);
    border: 1px dashed rgba(255, 255, 255, 0.14);
    border-radius: 18px;
    color: #a6a6a6;
    min-height: 120px;
    padding: 20px;
}

.bte-recent-card {
    background: linear-gradient(180deg, #202020 0%, #171717 100%);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 18px;
    overflow: hidden;
    padding-bottom: 12px;
}

.bte-recent-card__play {
    aspect-ratio: 1 / 1;
    background: #252525;
    border: 0;
    color: #111111;
    cursor: pointer;
    display: grid;
    margin: 0 0 11px;
    overflow: hidden;
    padding: 0;
    place-items: center;
    position: relative;
    width: 100%;
}

.bte-recent-card__play img {
    display: block;
    height: 100%;
    object-fit: cover;
    width: 100%;
}

.bte-recent-card__play span[aria-hidden="true"] {
    align-items: center;
    background: #ffffff;
    border-radius: 999px;
    bottom: 12px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.35);
    display: inline-flex;
    height: 44px;
    justify-content: center;
    position: absolute;
    right: 12px;
    width: 44px;
}

.bte-recent-card strong,
.bte-recent-card em {
    display: block;
    padding: 0 12px;
}

.bte-recent-card strong {
    color: #ffffff;
    font-size: 14px;
    line-height: 1.25;
}

.bte-recent-card em {
    color: #a8a8a8;
    font-size: 12px;
    font-style: normal;
    line-height: 1.35;
    margin-top: 5px;
}

.bte-recent-card__placeholder {
    align-items: center;
    color: #777777;
    display: flex;
    font-size: 32px;
    height: 100%;
    justify-content: center;
    width: 100%;
}

.bte-home-section__header--browse {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding-top: 26px;
}

.bte-version-card__art {
    position: relative;
}

.bte-version-card__cover-play {
    align-items: center;
    background: #ffffff;
    border: 0;
    border-radius: 999px;
    bottom: 14px;
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.38);
    color: #111111;
    cursor: pointer;
    display: inline-flex;
    height: 54px;
    justify-content: center;
    opacity: 0;
    position: absolute;
    right: 14px;
    transform: translateY(8px) scale(0.98);
    transition: opacity 160ms ease, transform 160ms ease, background 160ms ease;
    width: 54px;
}

.bte-version-card:hover .bte-version-card__cover-play,
.bte-version-card:focus-within .bte-version-card__cover-play,
.bte-version-card.is-playing .bte-version-card__cover-play {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.bte-version-card__cover-play:hover,
.bte-version-card__cover-play:focus {
    background: #e80a68;
    color: #ffffff;
}

.bte-version-card__cover-play span::before {
    content: '\25B6\FE0E';
    font-size: 20px;
    margin-left: 3px;
}

.bte-version-card.is-playing .bte-version-card__cover-play span::before {
    content: '❚❚';
    font-size: 16px;
    margin-left: 0;
}

@media (max-width: 1100px) {
    .bte-catalogue__layout--destination {
        grid-template-columns: 1fr;
    }

    .bte-catalogue__user-panel {
        position: static;
    }

    .bte-user-panel__card {
        display: grid;
        gap: 10px;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        align-items: start;
    }

    .bte-user-panel__action,
    .bte-user-panel__link {
        align-self: start;
    }

    .bte-user-panel__recent,
    .bte-user-panel__playlists {
        grid-column: 1 / -1;
    }

    .bte-user-panel__eyebrow,
    .bte-user-panel__card h3,
    .bte-user-panel__coming-soon {
        grid-column: 1 / -1;
    }
}

@media (max-width: 720px) {
    .bte-catalogue__topbar {
        position: static;
    }

    .bte-user-panel__card {
        grid-template-columns: 1fr;
    }

    .bte-home-section__header,
    .bte-home-section__header--browse {
        align-items: start;
        flex-direction: column;
    }

    .bte-catalogue__rail {
        grid-auto-columns: minmax(150px, 72vw);
    }
}

/* ========================================================================== 
   Front-end polish pass — 2026-06-02
   ========================================================================== */

/* Shared pink circular play/pause button used on cards and persistent player. */
.bte-version-card__cover-play,
.bte-player__control--primary.bte-play-circle {
    align-items: center;
    background: #e80a68;
    border: 0;
    border-radius: 999px !important;
    color: #050505;
    display: inline-flex;
    justify-content: center;
}

.bte-version-card__cover-play span,
.bte-player__control--primary.bte-play-circle span {
    border: 0 !important;
    display: block;
    height: auto;
    margin: 0;
    width: auto;
}

.bte-version-card__cover-play span::before,
.bte-player__control--primary.bte-play-circle span::before {
    color: #050505;
    content: '\25B6\FE0E';
    display: block;
    font-size: 22px;
    line-height: 1;
    margin-left: 4px;
}

.bte-version-card.is-playing .bte-version-card__cover-play span::before,
.bte-player__control--primary.bte-play-circle.is-playing span::before {
    content: '❚❚';
    font-size: 17px;
    letter-spacing: -2px;
    margin-left: 0;
}

.bte-version-card__cover-play:hover,
.bte-version-card__cover-play:focus,
.bte-player__control--primary.bte-play-circle:hover,
.bte-player__control--primary.bte-play-circle:focus {
    background: #ff4f93;
    color: #050505;
}

.bte-version-card__cover-play span::after,
.bte-player__control--primary.bte-play-circle span::after {
    content: none !important;
}

/* Latest Releases rail arrows replace the visible bottom scrollbar. */
.bte-catalogue__rail-wrap {
    position: relative;
}

.bte-catalogue__rail-wrap .bte-catalogue__rail {
    padding-bottom: 2px;
    scrollbar-width: none;
}

.bte-catalogue__rail-wrap .bte-catalogue__rail::-webkit-scrollbar {
    display: none;
}

.bte-rail-arrow {
    align-items: center;
    background: rgba(17, 17, 17, 0.78);
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 999px;
    color: #ffffff;
    cursor: pointer;
    display: inline-flex;
    font-size: 34px;
    height: 48px;
    justify-content: center;
    line-height: 1;
    position: absolute;
    top: 38%;
    transform: translateY(-50%);
    transition: background 160ms ease, border-color 160ms ease, transform 160ms ease;
    width: 48px;
    z-index: 5;
}

.bte-rail-arrow:hover,
.bte-rail-arrow:focus {
    background: rgba(232, 10, 104, 0.92);
    border-color: rgba(232, 10, 104, 0.92);
    outline: none;
    transform: translateY(-50%) scale(1.04);
}

.bte-rail-arrow--prev {
    left: -12px;
}

.bte-rail-arrow--next {
    right: -12px;
}

/* Hidden when the rail can't scroll further in that direction (toggled in JS). */
.bte-rail-arrow.is-hidden {
    display: none;
}

/* Persistent player: pink play button plus add/remove playlist icon. */
.bte-player__inner {
    grid-template-columns: auto auto auto 58px minmax(180px, 1fr) minmax(260px, 1.6fr) minmax(120px, 0.5fr) auto auto;
}

.bte-player__control--primary.bte-play-circle {
    box-shadow: 0 14px 34px rgba(232, 10, 104, 0.35);
    height: 56px;
    width: 56px;
}

.bte-player__add-button {
    align-items: center;
    background: rgba(232, 10, 104, 0.12);
    border: 1px solid rgba(232, 10, 104, 0.68);
    border-radius: 999px;
    color: #ff4f93;
    cursor: pointer;
    display: inline-flex;
    font-size: 24px;
    font-weight: 400;
    height: 42px;
    justify-content: center;
    line-height: 1;
    transition: background 160ms ease, color 160ms ease, transform 160ms ease;
    width: 42px;
}

.bte-player__add-button:hover,
.bte-player__add-button:focus,
.bte-player__add-button.is-added {
    background: #e80a68;
    color: #050505;
    outline: none;
    transform: translateY(-1px);
}

.bte-player__add-button:disabled {
    cursor: not-allowed;
    opacity: 0.42;
    transform: none;
}

/* Recently Played cards reuse the same cover-art play/pause treatment as Latest Releases. */
.bte-recent-card__art {
    aspect-ratio: 1 / 1;
    background: #252525;
    margin: 0 0 11px;
    overflow: hidden;
    position: relative;
}

.bte-recent-card__art img {
    display: block;
    height: 100%;
    object-fit: cover;
    width: 100%;
}

.bte-recent-card .bte-version-card__cover-play {
    bottom: 12px;
    height: 48px;
    right: 12px;
    width: 48px;
}

.bte-recent-card:hover .bte-version-card__cover-play,
.bte-recent-card:focus-within .bte-version-card__cover-play,
.bte-recent-card.is-playing .bte-version-card__cover-play,
.bte-recent-card.is-current .bte-version-card__cover-play {
    opacity: 1;
    transform: translateY(0) scale(1);
}

/* Recent Playlists: simple rows only, no cover-art collage. */
.bte-playlist-preview--simple,
.bte-playlist-preview {
    display: grid;
    gap: 0;
    grid-template-columns: 1fr;
}

.bte-playlist-preview__row {
    align-items: center;
    background: transparent;
    border: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    color: #ffffff;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    min-height: 42px;
    padding: 10px 4px;
    text-align: left;
    transition: color 160ms ease, padding 160ms ease;
    width: 100%;
}

.bte-playlist-preview__row:hover,
.bte-playlist-preview__row:focus {
    color: #ff4f93;
    outline: none;
    padding-left: 10px;
}

.bte-playlist-preview__row strong {
    font-size: 15px;
    font-weight: 800;
}

.bte-playlist-preview__row span {
    color: #b9b9b9;
    font-size: 13px;
}

/* Playlist drawer cover art: semi-transparent triangle only, no white/blue circle. */
.bte-playlist-item__play-overlay {
    background: transparent !important;
    border-radius: 0;
    box-shadow: none;
    color: transparent;
    height: 0;
    left: 50%;
    padding: 0;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 0;
}

.bte-playlist-item__play-overlay::before {
    border-bottom: 14px solid transparent;
    border-left: 22px solid rgba(255, 255, 255, 0.82);
    border-top: 14px solid transparent;
    content: '';
    display: block;
    filter: drop-shadow(0 2px 8px rgba(0,0,0,0.65));
    margin-left: 4px;
}

.bte-playlist-item__play-overlay.is-pause::before {
    border: 0;
    color: rgba(255, 255, 255, 0.88);
    content: '❚❚';
    display: block;
    filter: drop-shadow(0 2px 8px rgba(0,0,0,0.65));
    font-size: 24px;
    height: auto;
    letter-spacing: -2px;
    margin-left: 0;
    width: auto;
}

.bte-playlist-item__cover::after {
    background: rgba(0, 0, 0, 0.2);
    content: '';
    inset: 0;
    position: absolute;
}

@media (max-width: 980px) {
    .bte-player__inner {
        grid-template-columns: auto auto auto 48px minmax(0, 1fr) auto auto;
    }

    .bte-player__timeline,
    .bte-player__volume {
        grid-column: 1 / -1;
    }
}

@media (max-width: 720px) {
    .bte-rail-arrow {
        height: 42px;
        width: 42px;
    }

    .bte-rail-arrow--prev {
        left: 2px;
    }

    .bte-rail-arrow--next {
        right: 2px;
    }
}

/* ========================================================================== 
   Filtered selection + visible filters polish — 2026-06-02 revision round 2
   ========================================================================== */

.bte-catalogue__topbar--filters {
    align-items: end;
    gap: 12px;
}

.bte-catalogue__filter-form--inline {
    align-items: end;
    display: grid;
    flex: 1 1 620px;
    gap: 10px;
    grid-template-columns: minmax(180px, 1.4fr) minmax(150px, 1fr) minmax(140px, 1fr) minmax(130px, 0.85fr) auto auto;
}

.bte-catalogue__filter-form--inline .bte-catalogue__filter-field label {
    color: #cfcfcf;
    font-size: 10px;
    letter-spacing: 0.12em;
    margin: 0 0 6px;
    text-transform: uppercase;
}

.bte-catalogue__filter-form--inline .bte-catalogue__filter-field input,
.bte-catalogue__filter-form--inline .bte-catalogue__filter-field select {
    min-height: 38px;
}

/* Apply/Reset button base overridden by DESIGN REFRESH block below */
.bte-home-section__close-filter {
    align-items: center;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.14);
    border-radius: 8px;
    color: #d9d9d9;
    cursor: pointer;
    display: inline-flex;
    font-size: 11px;
    font-weight: 900;
    justify-content: center;
    min-height: 34px;
    padding: 6px 13px;
    text-decoration: none;
    white-space: nowrap;
}

.bte-catalogue__filter-reset,
.bte-home-section__close-filter {
    background: rgba(255,255,255,0.08);
    border-color: rgba(255,255,255,0.14);
    color: #d9d9d9;
}

.bte-catalogue__filter-form--inline .bte-catalogue__filter-submit:hover,
.bte-catalogue__filter-form--inline .bte-catalogue__filter-submit:focus,
.bte-catalogue__filter-reset:hover,
.bte-catalogue__filter-reset:focus,
.bte-home-section__close-filter:hover,
.bte-home-section__close-filter:focus {
    background: #e80a68;
    border-color: #e80a68;
    color: #050505;
    outline: none;
}

.bte-home-section__actions {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: flex-end;
}

.bte-home-section--filtered {
    background: linear-gradient(180deg, rgba(232, 10, 104, 0.09), rgba(255,255,255,0.025));
    border: 1px solid rgba(232, 10, 104, 0.18);
    border-radius: 24px;
    padding: 18px;
}

.bte-catalogue__grid--filtered {
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
}

.bte-catalogue__grid--new-releases {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

/* Hide horizontal scrollbars on all carousel rows that use side arrows. */
.bte-catalogue__rail-wrap .bte-catalogue__rail,
#bte-recently-played .bte-catalogue__rail {
    scrollbar-width: none;
}

.bte-catalogue__rail-wrap .bte-catalogue__rail::-webkit-scrollbar,
#bte-recently-played .bte-catalogue__rail::-webkit-scrollbar {
    display: none;
}

#bte-recently-played .bte-catalogue__rail {
    padding-bottom: 2px;
}

@media (max-width: 1280px) {
    .bte-catalogue__filter-form--inline {
        grid-template-columns: repeat(2, minmax(160px, 1fr)) auto auto;
    }
}

@media (max-width: 860px) {
    .bte-catalogue__filter-form--inline {
        width: 100%;
    }

    .bte-catalogue__filter-form--inline {
        grid-template-columns: 1fr;
    }

    .bte-catalogue__filter-form--inline .bte-catalogue__filter-submit,
    .bte-catalogue__filter-reset {
        width: 100%;
    }
}


/* ========================================================================== 
   Filter/search polish — 2026-06-02
   ========================================================================== */
.bte-catalogue__topbar--filters {
    align-items: center;
    gap: 12px 18px;
}

.bte-catalogue__filter-form--inline {
    align-items: end;
    gap: 9px;
    grid-template-columns: minmax(170px, 1.35fr) minmax(135px, 0.95fr) minmax(130px, 0.9fr) minmax(118px, 0.72fr) auto;
}

.bte-catalogue__filter-form--inline .bte-catalogue__filter-field label {
    font-size: 9px;
    letter-spacing: 0.16em;
    margin-bottom: 5px;
}

.bte-catalogue__filter-form--inline .bte-catalogue__filter-field input,
.bte-catalogue__filter-form--inline .bte-catalogue__filter-field select {
    border-radius: 12px;
    font-size: 13px;
    min-height: 34px;
    padding-left: 12px;
    padding-right: 12px;
}

.bte-catalogue__filter-form--inline .bte-catalogue__filter-field select {
    padding-right: 30px;
}

/* Apply/Reset inline overrides — superseded by DESIGN REFRESH block */

@media (max-width: 1280px) {
    .bte-catalogue__filter-form--inline {
        grid-template-columns: repeat(2, minmax(150px, 1fr)) auto;
    }
}

/* ==========================================================================
   DESIGN REFRESH — Batch Improvements
   ========================================================================== */

/* 1. Header intro: white, single line, all-caps, no wrap */
.bte-catalogue__intro {
    color: #c8c8c8 !important;
    font-size: 12px !important;
    font-weight: 500;
    letter-spacing: 0.2em;
    line-height: 2.5;
    margin: 0;
    max-width: none !important;
    text-transform: none;
    white-space: nowrap;
}

/* 3. Apply + Reset buttons — matched style */
/* Apply + Reset: identical solid pink pills, 5px vertical padding, aligned to field baseline */
.bte-catalogue__filter-submit,
.bte-catalogue__filter-reset--btn {
    appearance: none;
    align-items: center;
    align-self: end !important;
    background: #e80a68 !important;
    border: 0 !important;
    border-radius: 5px !important;
    box-shadow: none !important;
    color: #ffffff !important;
    cursor: pointer;
    display: inline-flex;
    font-size: 12px !important;
    font-weight: 900 !important;
    justify-content: center;
    letter-spacing: 0.12em;
    line-height: 1;
    min-height: 38px !important;
    padding: 10px 18px !important;
    text-decoration: none;
    text-shadow: none !important;
    text-transform: uppercase;
    transition: background 160ms ease;
    white-space: nowrap;
}
.bte-catalogue__filter-submit:hover,
.bte-catalogue__filter-submit:focus,
.bte-catalogue__filter-reset--btn:hover,
.bte-catalogue__filter-reset--btn:focus {
    background: #c20858 !important;
    border: 0 !important;
    box-shadow: none !important;
    color: #ffffff !important;
    text-shadow: none !important;
    transform: none !important;
}

/* 5. Stylized filter fields — use grid to match original layout system */
.bte-catalogue__filter-form--inline {
    display: grid;
    align-items: end;
    gap: 10px;
    /* Keep original grid-template-columns from earlier rule — don't override */
}

.bte-catalogue__filter-form--inline .bte-catalogue__filter-field {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.bte-catalogue__filter-form--inline .bte-catalogue__filter-field label {
    color: #e80a68;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    margin: 0;
}

.bte-catalogue__filter-form--inline .bte-catalogue__filter-field input,
.bte-catalogue__filter-form--inline .bte-catalogue__filter-field select {
    appearance: none;
    background: rgba(255, 255, 255, 0.07) !important;
    border: 1px solid rgba(255, 255, 255, 0.18) !important;
    border-radius: 12px !important;
    color: #ffffff !important;
    font-size: 13px;
    font-weight: 600;
    min-height: 38px !important;
    padding: 0 14px !important;
    width: 100%;
    transition: border-color 160ms ease, background 160ms ease;
}

.bte-catalogue__filter-form--inline .bte-catalogue__filter-field input::placeholder {
    color: rgba(255,255,255,0.35);
}

.bte-catalogue__filter-form--inline .bte-catalogue__filter-field select option {
    background: #1e1e1e;
    color: #fff;
}

.bte-catalogue__filter-form--inline .bte-catalogue__filter-field input:focus,
.bte-catalogue__filter-form--inline .bte-catalogue__filter-field select:focus {
    background: rgba(232, 10, 104, 0.12);
    border-color: rgba(232, 10, 104, 0.6);
    box-shadow: 0 0 0 2px rgba(232, 10, 104, 0.18);
    outline: none;
    color: #ffffff;
}

/* Search field wider */
#bte-catalogue-search {
    min-width: 200px;
}

/* 6. Card sizes — do not override the grid/rail display system.
   The original .bte-catalogue__rail uses CSS grid (grid-auto-columns).
   Forcing flex here breaks rail card sizing. Just let the original rules run. */

/* 7. Card credits section */
.bte-version-card__credits {
    margin: 6px 0 10px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* Each credit entry: label on its own line, value beneath it */
.bte-version-card__credit-line {
    display: flex;
    flex-direction: column;
    gap: 1px;
    margin: 0;
}

.bte-version-card__credit-label {
    color: #e80a68;
    font-size: 9px;
    font-weight: 900;
    letter-spacing: 0.14em;
    line-height: 1.2;
    text-transform: uppercase;
}

.bte-version-card__credit-value {
    color: #d8d8d8;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.35;
}
/* Panel buttons */
.bte-version-card__panel-btn {
    appearance: none;
    align-items: center;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    color: #ffffff;
    cursor: pointer;
    display: inline-flex;
    font-size: 10.5px;
    font-weight: 800;
    gap: 5px;
    letter-spacing: 0.06em;
    min-height: 30px;
    padding: 6px 10px;
    text-decoration: none;
    text-transform: uppercase;
    transition: background 150ms ease, color 150ms ease, transform 150ms ease;
}/* Panel icons */
.bte-panel-icon {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}.bte-version-card__panel-icon-link svg {
    display: block;
    height: 28px;
    width: 28px;
}

/* Topbar: no mode buttons, just filter form */
.bte-catalogue__topbar--filters {
    align-items: flex-end;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 18px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: clamp(18px, 3vw, 28px);
    padding: 14px 18px;
}

@media (max-width: 768px) {
    .bte-catalogue__intro {
        white-space: normal !important;
    }
    .bte-version-card__panel-media {
        margin-left: 0;
    }
}


/* ==========================================================================
   View Toggle (Grid / List) + List Card Layout
   ========================================================================== */

/* Section count badge next to heading */
.bte-home-section__title-with-count {
    align-items: flex-end;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.bte-section-count {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 5px;
    color: #b3b3b3;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    padding: 3px 9px;
    text-transform: lowercase;
    white-space: nowrap;
}

/* Toggle button group */
.bte-view-toggle {
    align-items: center;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    display: inline-flex;
    gap: 0;
    overflow: hidden;
    padding: 3px;
}

.bte-view-toggle__btn {
    align-items: center;
    appearance: none;
    background: transparent;
    border: 0;
    border-radius: 4px;
    color: rgba(255, 255, 255, 0.4);
    cursor: pointer;
    display: inline-flex;
    height: 26px;
    justify-content: center;
    padding: 0;
    transition: background 140ms ease, color 140ms ease;
    width: 28px;
}

.bte-view-toggle__btn svg {
    height: 14px;
    width: 14px;
}

.bte-view-toggle__btn:hover {
    color: rgba(255, 255, 255, 0.75);
}

.bte-view-toggle__btn.is-active {
    background: #e80a68;
    color: #ffffff;
}

/* List view: section body in list mode */
.bte-catalogue__section-body.is-list-view .bte-catalogue__rail-wrap {
    display: none;
}

.bte-catalogue__section-body.is-list-view .bte-catalogue__grid {
    display: none;
}

/* List view container that appears when toggled */
.bte-section-list-view {
    display: none;
    flex-direction: column;
    gap: 0;
}

.bte-catalogue__section-body.is-list-view .bte-section-list-view {
    display: flex;
}

/* List row card */
.bte-list-row {
    align-items: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    cursor: default;
    display: grid;
    gap: 12px;
    grid-template-columns: 44px minmax(0, 1.8fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) 165px;
    min-height: 56px;
    padding: 10px 8px;
    transition: background 140ms ease;
}
/* Thumb and actions stay centered too (kept explicit for older overrides). */
.bte-list-row > :first-child,
.bte-list-row > .bte-list-row__actions {
    align-self: center;
}

.bte-list-row:first-child {
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.bte-list-row:hover {
    background: rgba(255, 255, 255, 0.04);
}

.bte-list-row__thumb {
    border-radius: 4px;
    height: 44px;
    object-fit: cover;
    width: 44px;
}

.bte-list-row__title {
    color: #ffffff;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bte-list-row__cell {
    color: #a0a0a0;
    font-size: 12px;
    line-height: 1.45;
    text-align: left;
    white-space: normal;
    word-break: break-word;
}

.bte-list-row__actions {
    align-items: center;
    display: flex;
    gap: 5px;
    justify-content: flex-end;
    margin-left: auto;
}

.bte-list-row__action-btn {
    align-items: center;
    appearance: none;
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 5px;
    color: #fff;
    cursor: pointer;
    display: inline-flex;
    height: 28px;
    justify-content: center;
    padding: 0;
    text-decoration: none;
    transition: background 140ms ease, border-color 140ms ease;
    width: 28px;
}

.bte-list-row__action-btn:hover {
    background: rgba(232, 10, 104, 0.28);
    border-color: rgba(232, 10, 104, 0.45);
}

.bte-list-row__action-btn svg {
    height: 13px;
    width: 13px;
    flex-shrink: 0;
}

/* List header row */
.bte-list-header {
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    display: grid;
    gap: 12px;
    grid-template-columns: 44px minmax(0, 1.8fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) 165px;
    margin-bottom: 4px;
    padding: 0 8px 8px;
}

.bte-list-header__cell {
    color: #e80a68;
    font-size: 9px;
    font-weight: 900;
    justify-self: start;
    letter-spacing: 0.14em;
    text-align: left;
    text-transform: uppercase;
}

@media (max-width: 860px) {
    .bte-list-row,
    .bte-list-header {
        grid-template-columns: 44px minmax(0, 1fr) minmax(0, 0.8fr) 165px;
    }
    .bte-list-header__cell:nth-child(4),
    .bte-list-header__cell:nth-child(5) {
        display: none;
    }
}

@media (max-width: 560px) {
    .bte-list-row,
    .bte-list-header {
        grid-template-columns: 44px minmax(0, 1fr) 165px;
    }
    .bte-list-header__cell:not(:first-child):not(:last-child) {
        display: none;
    }
}


/* Icon-only action button variants */
.bte-list-row__action-btn--play:hover {
    background: rgba(87, 215, 111, 0.28);
    border-color: rgba(87, 215, 111, 0.5);
    color: #57d76f;
}
.bte-list-row__action-btn--lyrics:hover {
    background: rgba(232, 10, 104, 0.22);
    border-color: rgba(232, 10, 104, 0.45);
}.bte-list-row__action-btn--yt svg,
.bte-list-row__action-btn--tt svg {
    border-radius: 4px;
    display: block;
    height: 20px;
    width: 20px;
}
.bte-list-row__action-btn--add:hover {
    background: rgba(232, 10, 104, 0.22);
    border-color: rgba(232, 10, 104, 0.45);
}
.bte-list-row__action-btn--add.is-added {
    background: rgba(232, 10, 104, 0.3);
    border-color: rgba(232, 10, 104, 0.6);
}


/* ==========================================================================
   List View — Load More
   ========================================================================== */
.bte-list-load-more-wrap {
    display: flex;
    justify-content: center;
    padding: 20px 8px 8px;
}

.bte-list-load-more {
    appearance: none;
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 5px;
    color: #ffffff;
    cursor: pointer;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 0.12em;
    padding: 8px 22px;
    text-transform: uppercase;
    transition: background 150ms ease, border-color 150ms ease;
}

.bte-list-load-more:hover,
.bte-list-load-more:focus {
    background: rgba(232, 10, 104, 0.2);
    border-color: rgba(232, 10, 104, 0.5);
    outline: none;
}

/* ==========================================================================
   RESET button — force bottom-alignment with filter fields (high specificity)
   ========================================================================== */
.bte-catalogue__topbar--filters .bte-catalogue__filter-form--inline {
    align-items: end !important;
}
.bte-catalogue__topbar--filters .bte-catalogue__filter-reset--btn {
    align-self: end !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-top: 10px !important;
    padding-bottom: 10px !important;
}


/* ==========================================================================
   3. Card count: ~5.5 visible in Filtered / Latest Releases rails
   ========================================================================== */
/* ~5.5 cards visible: use 18vw with a min floor so cards stay readable.
   On a 1440px screen: 18vw ≈ 259px → ~1200px rail / 259px ≈ 4.6 cols.
   Actually let's target differently: the main content col is roughly 75vw
   (excluding sidebar). 75vw / 5.5 ≈ 13.6vw per card. */
/* ~5.5 cards: 190px cards on a ~1000px rail = 1000/206 ≈ 4.85 + peek = ~5.5 */
.bte-home-section--filtered .bte-catalogue__rail,
.bte-home-section--new      .bte-catalogue__rail {
    grid-auto-columns: minmax(190px, 195px);
}

/* ==========================================================================
   4. Smooth carousel — CSS scroll-behavior aids the JS scrollBy animation.
      Original rail already has scroll-snap-type: inline mandatory.
   ========================================================================== */
.bte-catalogue__rail {
    scroll-behavior: smooth;
}

/* ==========================================================================
   1. Genre multi-select dropdown
   ========================================================================== */
.bte-catalogue__filter-field--genre {
    position: relative;
}

.bte-genre-multi {
    align-items: center;
    appearance: none;
    background: rgba(255, 255, 255, 0.07) !important;
    border: 1px solid rgba(255, 255, 255, 0.18) !important;
    border-radius: 12px !important;
    box-sizing: border-box;
    color: #ffffff !important;
    cursor: pointer;
    display: flex;
    font-size: 13px;
    font-weight: 600;
    gap: 6px;
    height: 38px;
    justify-content: space-between;
    min-height: 38px !important;
    outline: none;
    padding: 0 14px !important;
    position: relative;
    transition: border-color 160ms ease, background 160ms ease;
    user-select: none;
    width: 100%;
}

.bte-genre-multi:focus,
.bte-genre-multi[aria-expanded="true"] {
    background: rgba(232, 10, 104, 0.12) !important;
    border-color: rgba(232, 10, 104, 0.6) !important;
    box-shadow: 0 0 0 2px rgba(232, 10, 104, 0.18);
}

.bte-genre-multi__label {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bte-genre-multi__arrow {
    color: rgba(255,255,255,0.45);
    flex-shrink: 0;
    font-size: 11px;
    transition: transform 160ms ease;
}
.bte-genre-multi[aria-expanded="true"] .bte-genre-multi__arrow {
    transform: rotate(180deg);
}

/* The dropdown panel */
.bte-genre-multi__dropdown {
    background: #1c1c1e;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 10px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.55);
    display: none;
    left: 0;
    max-height: 260px;
    min-width: 220px;
    overflow-y: auto;
    padding: 6px;
    position: absolute;
    top: calc(100% + 5px);
    width: 100%;
    z-index: 200;
}
.bte-genre-multi__dropdown::-webkit-scrollbar { width: 4px; }
.bte-genre-multi__dropdown::-webkit-scrollbar-track { background: transparent; }
.bte-genre-multi__dropdown::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.2); border-radius: 2px; }

.bte-genre-multi[aria-expanded="true"] .bte-genre-multi__dropdown {
    display: block;
}

/* Each option row */
.bte-genre-multi__option input[type="checkbox"] {
    display: none;
}

/* ==========================================================================
   RESET field wrapper — same structure as other filter fields so it
   naturally bottom-aligns in the grid without any align-self tricks.
   ========================================================================== */
.bte-catalogue__filter-field--reset-wrap {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.bte-catalogue__filter-reset-label {
    color: transparent;           /* invisible spacer — same height as other field labels */
    display: block;
    font-size: 9px;
    font-weight: 900;
    letter-spacing: 0.16em;
    line-height: 1.4;
    margin-bottom: 5px;           /* match the 5px gap in other filter fields */
    pointer-events: none;
    user-select: none;
}
/* Override gap for reset-wrap since label has explicit margin */
.bte-catalogue__filter-field--reset-wrap {
    gap: 0;
}

/* Genre dropdown: match label font exactly so field heights are identical */
.bte-catalogue__filter-field--genre > label {
    color: #e80a68;
    display: block;
    font-size: 9px;
    font-weight: 900;
    letter-spacing: 0.16em;
    line-height: 1.4;
    margin: 0 0 5px;  /* match the 5px gap of other filter fields */
    text-transform: uppercase;
}
/* Override the default flex gap for genre field since label has explicit margin */
.bte-catalogue__filter-field--genre {
    gap: 0;
}

/* ==========================================================================
   Filter alignment fix — 2026-06-03
   Align top filter controls by the bottom of the input/button boxes
   ========================================================================== */

.bte-catalogue__topbar--filters .bte-catalogue__filter-form--inline {
    align-items: end !important;
}

.bte-catalogue__filter-form--inline .bte-catalogue__filter-field,
.bte-catalogue__filter-form--inline .bte-catalogue__filter-field--genre,
.bte-catalogue__filter-form--inline .bte-catalogue__filter-field--reset-wrap {
    align-self: end !important;
    display: grid !important;
    gap: 5px !important;
    grid-template-rows: auto 38px;
    margin: 0 !important;
}

.bte-catalogue__filter-form--inline .bte-catalogue__filter-field label,
.bte-catalogue__filter-form--inline .bte-catalogue__filter-field--genre > label,
.bte-catalogue__filter-form--inline .bte-catalogue__filter-reset-label {
    display: block !important;
    font-size: 10px !important;
    font-weight: 900 !important;
    letter-spacing: 0.16em !important;
    line-height: 1.2 !important;
    margin: 0 !important;
    min-height: 12px;
}

.bte-catalogue__filter-form--inline .bte-catalogue__filter-field input,
.bte-catalogue__filter-form--inline .bte-catalogue__filter-field select,
.bte-catalogue__filter-form--inline .bte-genre-multi,
.bte-catalogue__filter-form--inline .bte-catalogue__filter-reset--btn {
    align-self: end !important;
    box-sizing: border-box !important;
    height: 38px !important;
    min-height: 38px !important;
    margin: 0 !important;
}

.bte-catalogue__filter-form--inline .bte-catalogue__filter-reset--btn {
    padding-bottom: 0 !important;
    padding-top: 0 !important;
}


/* ==========================================================================
   Genre dropdown polish — 2026-06-03
   Keep database Title Case, remove checkbox, and distinguish selected states
   ========================================================================== */

.bte-genre-multi,
.bte-genre-multi__dropdown,
.bte-genre-multi__option,
.bte-genre-multi__name,
.bte-genre-multi__count {
    text-transform: none !important;
}

.bte-genre-multi__option {
    align-items: center !important;
    border-left: 4px solid transparent !important;
    border-radius: 8px !important;
    color: #ffffff !important;
    cursor: pointer;
    display: flex !important;
    gap: 0 !important;
    letter-spacing: normal !important;
    padding: 8px 12px !important;
    transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
}

.bte-genre-multi__option:hover {
    background: rgba(255, 255, 255, 0.07) !important;
}

.bte-genre-multi__option.is-checked {
    background: rgba(232, 10, 104, 0.12) !important;
    border-left-color: #e80a68 !important;
    padding-left: 12px !important;
}

.bte-genre-multi__check,
.bte-genre-multi__check::before,
.bte-genre-multi__check::after {
    display: none !important;
    content: none !important;
}

.bte-genre-multi__name {
    color: #ffffff !important;
    flex: 1 1 auto;
    font-size: 13px !important;
    font-weight: 600 !important;
    letter-spacing: normal !important;
    line-height: 1.25 !important;
    overflow: hidden;
    padding-left: 8px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bte-genre-multi__count {
    color: rgba(255, 255, 255, 0.45) !important;
    flex-shrink: 0;
    font-size: 12px !important;
    font-weight: 600 !important;
    letter-spacing: normal !important;
    margin-left: 8px;
}

.bte-genre-multi__option.is-checked .bte-genre-multi__name,
.bte-genre-multi__option.is-checked .bte-genre-multi__count {
    color: #ff4f93 !important;
    font-weight: 800 !important;
}

/* ==========================================================================
   Genre dropdown All Genres option — 2026-06-03
   ========================================================================== */

.bte-genre-multi__option--all {
    appearance: none;
    background: transparent;
    border: 0;
    font: inherit;
    text-align: left;
    width: 100%;
}

.bte-genre-multi__option--all .bte-genre-multi__name {
    padding-left: 8px;
}

.bte-genre-multi__option--all.is-checked {
    background: rgba(232, 10, 104, 0.12) !important;
    border-left-color: #e80a68 !important;
}

.bte-genre-multi__option--all:not(.is-checked) .bte-genre-multi__name {
    color: #ffffff !important;
}

/* ========================================================================== 
   Custom Collection + Sort dropdowns — match Genre menu — 2026-06-03
   ========================================================================== */

.bte-native-select--enhanced {
    display: none !important;
}

.bte-custom-select {
    align-items: center;
    appearance: none;
    background: rgba(255, 255, 255, 0.07) !important;
    border: 1px solid rgba(255, 255, 255, 0.18) !important;
    border-radius: 12px !important;
    box-sizing: border-box !important;
    color: #ffffff !important;
    cursor: pointer;
    display: flex;
    font-size: 13px;
    font-weight: 600;
    gap: 6px;
    height: 38px !important;
    justify-content: space-between;
    min-height: 38px !important;
    outline: none;
    padding: 0 14px !important;
    position: relative;
    text-transform: none !important;
    transition: border-color 160ms ease, background 160ms ease;
    user-select: none;
    width: 100%;
}

.bte-custom-select:focus,
.bte-custom-select[aria-expanded="true"] {
    background: rgba(232, 10, 104, 0.12) !important;
    border-color: rgba(232, 10, 104, 0.6) !important;
    box-shadow: 0 0 0 2px rgba(232, 10, 104, 0.18);
}

.bte-custom-select__label {
    color: #ffffff !important;
    flex: 1;
    font-size: 13px !important;
    font-weight: 600 !important;
    letter-spacing: normal !important;
    line-height: 1.25 !important;
    overflow: hidden;
    text-overflow: ellipsis;
    text-transform: none !important;
    white-space: nowrap;
}

.bte-custom-select__arrow {
    color: rgba(255,255,255,0.45);
    flex-shrink: 0;
    font-size: 11px;
    transition: transform 160ms ease;
}

.bte-custom-select[aria-expanded="true"] .bte-custom-select__arrow {
    transform: rotate(180deg);
}

.bte-custom-select__dropdown {
    background: #1c1c1e;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 10px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.55);
    display: none;
    left: 0;
    max-height: 260px;
    min-width: 220px;
    overflow-y: auto;
    padding: 6px;
    position: absolute;
    top: calc(100% + 5px);
    width: 100%;
    z-index: 205;
}

.bte-custom-select[aria-expanded="true"] .bte-custom-select__dropdown {
    display: block;
}

.bte-custom-select__dropdown::-webkit-scrollbar {
    width: 4px;
}

.bte-custom-select__dropdown::-webkit-scrollbar-track {
    background: transparent;
}

.bte-custom-select__dropdown::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,0.2);
    border-radius: 2px;
}

.bte-custom-select__option {
    align-items: center !important;
    appearance: none;
    background: transparent;
    border: 0;
    border-left: 4px solid transparent !important;
    border-radius: 8px !important;
    color: #ffffff !important;
    cursor: pointer;
    display: flex !important;
    font: inherit;
    font-size: 13px !important;
    font-weight: 600 !important;
    justify-content: flex-start;
    letter-spacing: normal !important;
    line-height: 1.25 !important;
    margin: 0;
    padding: 8px 12px 8px 20px !important;
    text-align: left;
    text-transform: none !important;
    transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
    width: 100%;
}

.bte-custom-select__option:hover,
.bte-custom-select__option:focus {
    background: rgba(255, 255, 255, 0.07) !important;
    outline: none;
}

.bte-custom-select__option.is-selected {
    background: rgba(232, 10, 104, 0.12) !important;
    border-left-color: #e80a68 !important;
    color: #ff4f93 !important;
    font-weight: 800 !important;
    padding-left: 16px !important;
}

/* ========================================================================== 
   Filtered Selection header details — 2026-06-03 FIXED
   Keeps custom filter dropdown styling intact
   ========================================================================== */

.bte-home-section__eyebrow-row {
    align-items: baseline;
    display: flex;
    flex-wrap: wrap;
    gap: 8px 14px;
    margin: 0 0 8px;
}

.bte-home-section__eyebrow-row .bte-home-section__eyebrow {
    margin: 0;
}

.bte-filter-summary {
    align-items: baseline;
    display: flex;
    flex-wrap: wrap;
    gap: 6px 14px;
    min-width: 0;
}

.bte-filter-summary__item {
    color: #ffffff;
    display: inline-flex;
    flex-wrap: wrap;
    font-size: 12px;
    font-weight: 600;
    gap: 4px;
    line-height: 1.35;
}

.bte-filter-summary__label {
    color: #e80a68;
    font-weight: 900;
}

.bte-filter-summary__value {
    color: rgba(255, 255, 255, 0.88);
}

.bte-section-count--filtered {
    align-items: center;
    display: inline-flex;
    flex-wrap: wrap;
    gap: 5px 8px;
    text-transform: none;
}

.bte-section-count__number {
    color: #ffffff;
    font-weight: 900;
    white-space: nowrap;
}

.bte-section-count__note {
    color: rgba(255, 255, 255, 0.58);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.01em;
    line-height: 1.25;
    max-width: 260px;
    text-transform: none;
}

@media (max-width: 720px) {
    .bte-home-section__eyebrow-row,
    .bte-filter-summary {
        align-items: flex-start;
        flex-direction: column;
    }

    .bte-section-count--filtered {
        align-items: flex-start;
        flex-direction: column;
    }
}

/* ==========================================================================
   Wishlist cleanup — 2026-06-03
   1) Section title spacing reset
   2) Match Filtered + Latest Releases play buttons to Recently Played size
   ========================================================================== */

/* Remove tight negative tracking from section headings. */
.bte-home-section__header h3,
.bte-home-section__title-with-count h3 {
    letter-spacing: 0 !important;
}

/* Keep Filtered Selection + Latest Releases play buttons consistent with Recently Played. */
.bte-home-section--filtered .bte-version-card__cover-play,
.bte-home-section--new .bte-version-card__cover-play {
    height: 48px !important;
    width: 48px !important;
}

.bte-home-section--filtered .bte-version-card__cover-play span::before,
.bte-home-section--new .bte-version-card__cover-play span::before {
    font-size: 20px;
}

.bte-home-section--filtered .bte-version-card.is-playing .bte-version-card__cover-play span::before,
.bte-home-section--new .bte-version-card.is-playing .bte-version-card__cover-play span::before {
    font-size: 16px;
}


/* ==========================================================================
   Card compact action polish — 2026-06-03
   1) Move "No audio preview" into a hover badge over cover art
   2) Convert card controls from boxed panel buttons to compact inline links
   ========================================================================== */

/* The no-audio badge anchors to the bottom of the square cover (.bte-version-card__art). */
.bte-version-card {
    position: relative;
}

/* No audio preview: hidden by default, revealed over the lower cover-art area. */
.bte-version-card__no-audio {
    align-items: center !important;
    background: rgba(5, 5, 5, 0.72) !important;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 999px;
    color: #ffffff !important;
    display: inline-flex !important;
    font-size: 11px !important;
    font-weight: 900 !important;
    left: 14px;
    letter-spacing: 0.04em;
    line-height: 1;
    margin: 0 !important;
    opacity: 0;
    padding: 8px 11px;
    pointer-events: none;
    position: absolute;
    text-transform: uppercase;
    bottom: 14px;
    transform: translateY(6px);
    transition: opacity 160ms ease, transform 160ms ease;
    z-index: 4;
}

.bte-version-card:hover .bte-version-card__no-audio,
.bte-version-card:focus-within .bte-version-card__no-audio {
    opacity: 1;
    transform: translateY(0);
}

/* Compact action row: remove the dark container and keep all actions inline. */
.bte-version-card__control-panel {
    align-items: center !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 0 !important;
    margin-top: 12px !important;
    min-width: 0;
    padding: 0 !important;
}

.bte-version-card__panel-btn,
.bte-version-card__panel-icon-link {
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    color: rgba(255, 255, 255, 0.82) !important;
    font-size: 10px !important;
    font-weight: 900 !important;
    height: auto !important;
    letter-spacing: 0.08em !important;
    line-height: 1 !important;
    min-height: 0 !important;
    opacity: 1 !important;
    padding: 0 !important;
    text-decoration: none !important;
    text-transform: uppercase !important;
    transform: none !important;
    width: auto !important;
}

.bte-version-card__panel-btn:hover,
.bte-version-card__panel-btn:focus,
.bte-version-card__panel-icon-link:hover,
.bte-version-card__panel-icon-link:focus {
    background-color: transparent !important; /* not `background` shorthand — that would wipe background-image */
    border: 0 !important;
    color: #ff4f93 !important;
    outline: none !important;
    transform: none !important;
}

/* Add pip separators between visible action items. */
.bte-version-card__control-panel > * + *::before,
.bte-version-card__panel-media > * + *::before {
    color: rgba(255, 255, 255, 0.34);
    content: '|';
    display: inline-block;
    font-size: 10px;
    font-weight: 800;
    margin: 0 8px;
    transform: translateY(-1px);
}/* Keep YouTube/TikTok icons crisp and compact. */
.bte-version-card__panel-icon-link svg {
    border-radius: 5px;
    display: block;
    height: 20px !important;
    width: 20px !important;
}

/* Playlist state becomes a text-link state instead of a filled button. */
.bte-version-card__panel-btn--playlist,
.bte-version-card__panel-btn--playlist.is-added{
    background: transparent !important;
    border: 0 !important;
    color: #ff4f93 !important;
}

/* If the row gets too tight, allow a neat second line rather than restoring the box. */
@media (max-width: 520px) {
    .bte-version-card__control-panel {
        flex-wrap: wrap !important;
        gap: 7px 0 !important;
    }
}


/* ==========================================================================
   Card two-row action polish — 2026-06-03
   1) Top row: + Playlist | Lyrics
   2) Optional second row only when videos exist: Videos [YT] | [TT]
   3) No orphan separators when Lyrics or video links are missing
   ========================================================================== */

.bte-version-card__control-panel {
    align-items: center !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 0 !important;
    margin-top: 12px !important;
    padding: 0 !important;
}

/* Top-row text links — order:2 keeps them below the video row. */
.bte-version-card__panel-btn{
    order: 2 !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    color: rgba(255, 255, 255, 0.86) !important;
    display: inline-flex !important;
    font-size: 10px !important;
    font-weight: 900 !important;
    height: auto !important;
    letter-spacing: 0.08em !important;
    line-height: 1.1 !important;
    min-height: 0 !important;
    padding: 0 !important;
    text-decoration: none !important;
    text-transform: uppercase !important;
    transform: none !important;
    width: auto !important;
}

.bte-version-card__panel-btn:hover,
.bte-version-card__panel-btn:focus{
    background: transparent !important;
    border: 0 !important;
    color: #ff4f93 !important;
    outline: none !important;
    transform: none !important;
}

.bte-version-card__panel-btn--playlist,
.bte-version-card__panel-btn--playlist.is-added{
    background: transparent !important;
    border: 0 !important;
    color: #ff4f93 !important;
}

/* Top-row separator: appears only when another top-row item follows. */
.bte-version-card__control-panel > .bte-version-card__panel-btn + .bte-version-card__panel-btn::before{
    color: rgba(255, 255, 255, 0.34);
    content: '|';
    display: inline-block;
    font-size: 10px;
    font-weight: 800;
    margin: 0 10px;
    transform: translateY(-1px);
}

/* Override the prior one-line media behavior and move videos to their own row. */
.bte-version-card__panel-media {
    align-items: center !important;
    display: inline-flex !important;
    flex: 0 0 100% !important;
    gap: 0 !important;
    margin-left: 0 !important;
    margin-top: 10px !important;
    min-width: 0;
    order: 1 !important;
}

/* Prevent a pipe before the Videos row itself. */
.bte-version-card__control-panel > .bte-version-card__panel-media::before {
    content: none !important;
    display: none !important;
}
/* No separator between VIDEOS and the first video icon. */
.bte-version-card__panel-media > * + *::before {
    content: none !important;
    display: none !important;
}

/* Separator only between multiple video icons. */
.bte-version-card__panel-icon-link + .bte-version-card__panel-icon-link::before {
    color: rgba(255, 255, 255, 0.34) !important;
    content: '|' !important;
    display: inline-flex !important;
    align-items: center !important;
    font-size: 10px !important;
    font-weight: 800 !important;
    height: 26px !important;
    margin: 0 9px !important;
    transform: none !important;
}

/* Compact icon links on the Videos row. */
.bte-version-card__panel-icon-link {
    align-items: center !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    color: rgba(255, 255, 255, 0.86) !important;
    display: inline-flex !important;
    height: 20px !important;
    opacity: 1 !important;
    padding: 0 !important;
    text-decoration: none !important;
    transform: none !important;
    width: auto !important;
}
.bte-version-card__panel-icon-link svg {
    border-radius: 5px;
    display: block;
    height: 20px !important;
    width: 20px !important;
}

/* Keep internal text icons hidden on compact card action links. */
.bte-panel-icon {
    display: none !important;
}

.bte-panel-label {
    line-height: 1 !important;
}

/* ========================================================================== 
   Card bottom action + generic video icon polish — 2026-06-03
   1) Pin Playlist/Lyrics/Videos controls to the bottom of each card
   2) Add breathing room around the video separator
   3) Replace branded video SVGs with cleaner white generic icons
   ========================================================================== */

/* Let the lower action block sit at the bottom even when titles/credits vary. */
.bte-version-card {
    display: flex !important;
    flex-direction: column !important;
}

.bte-version-card__art {
    flex: 0 0 auto !important;
}

.bte-version-card__body {
    display: flex !important;
    flex: 1 1 auto !important;
    flex-direction: column !important;
}

.bte-version-card__credits {
    margin-bottom: 14px !important;
}

.bte-version-card__control-panel {
    margin-top: auto !important;
    padding-top: 10px !important;
}
/* More comfortable separator spacing between YouTube and TikTok. */
.bte-version-card__panel-icon-link + .bte-version-card__panel-icon-link::before {
    margin-left: 12px !important;
    margin-right: 12px !important;
}

/* Hide existing branded SVGs but preserve accessible links and layout. */
/* [old icon block removed — see pink PNG icon block at end of file] */


/* ========================================================================== 
   Card action/footer refinement — 2026-06-03
   1) Move video row under credits instead of pinned footer
   2) Keep Playlist + Lyrics pinned to the bottom
   3) Restore Playlist + Lyrics as compact side-by-side buttons
   4) Fix both video icons showing with proper separator spacing
   ========================================================================== */

/* Allow children inside the action wrapper to behave as card-body flex items. */
.bte-version-card__control-panel {
    display: contents !important;
}

/* Video row: sits directly after the credits/Performed By block, not at card bottom. */
.bte-version-card__panel-media {
    align-items: center !important;
    display: inline-flex !important;
    flex: 0 0 auto !important;
    gap: 0 !important;
    line-height: 1 !important;
    margin: 2px 0 14px !important;
    order: 12 !important;
    width: 100% !important;
}

.bte-panel-media-label {
    color: rgba(255, 255, 255, 0.52) !important;
    display: inline-flex !important;
    font-size: 10px !important;
    font-weight: 900 !important;
    letter-spacing: 0.11em !important;
    line-height: 1 !important;
    margin-right: 10px !important;
    text-transform: uppercase !important;
}

/* Pin only the Playlist/Lyrics buttons to the card bottom. */
.bte-version-card__panel-btn{
    order: 30 !important;
}

.bte-version-card__panel-btn--playlist{
    margin-top: auto !important;
}

/* Compact side-by-side buttons again. */
.bte-version-card__panel-btn{
    align-items: center !important;
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.14) !important;
    border-radius: 8px !important;
    box-shadow: none !important;
    color: #ffffff !important;
    cursor: pointer !important;
    display: inline-flex !important;
    font-size: 10px !important;
    font-weight: 900 !important;
    justify-content: center !important;
    letter-spacing: 0.08em !important;
    line-height: 1 !important;
    margin-right: 8px !important;
    min-height: 31px !important;
    padding: 8px 11px !important;
    text-decoration: none !important;
    text-transform: uppercase !important;
    transform: none !important;
    width: auto !important;
}

.bte-version-card__panel-btn:hover,
.bte-version-card__panel-btn:focus{
    background: rgba(232, 10, 104, 0.24) !important;
    border-color: rgba(232, 10, 104, 0.54) !important;
    color: #ffffff !important;
    outline: none !important;
    transform: translateY(-1px) !important;
}

.bte-version-card__panel-btn--playlist,
.bte-version-card__panel-btn--playlist.is-added{
    background: rgba(232, 10, 104, 0.16) !important;
    border-color: rgba(232, 10, 104, 0.46) !important;
    color: #ff70a8 !important;
}

/* Remove old text-link pipe separators between Playlist/Lyrics now that they are buttons. */
.bte-version-card__control-panel > .bte-version-card__panel-btn + .bte-version-card__panel-btn::before,
.bte-version-card__control-panel > * + *::before {
    content: none !important;
    display: none !important;
}

/* Video links: allow both icons and the separator to occupy real width. */
.bte-version-card__panel-icon-link,
.bte-version-card__panel-icon-link--yt,
.bte-version-card__panel-icon-link--tt {
    align-items: center !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    display: inline-flex !important;
    flex: 0 0 auto !important;
    height: 24px !important;
    justify-content: center !important;
    overflow: visible !important;
    padding: 0 !important;
    position: relative !important;
    text-decoration: none !important;
    transform: none !important;
    width: 24px !important;
}

/* [old absolute separator removed] */

/* [old icon block removed] */

/* Keep the layout graceful when only Playlist is present. */
.bte-version-card__panel-btn:last-child{
    margin-right: 0 !important;
}


/* ==========================================================================
   Card/list action icon refinement — 2026-06-03
   1) Grid cards: keep Playlist + Lyrics side-by-side at the card bottom
   2) List view: use the same generic white video icons
   3) TikTok: white outlined circle + white note mark
   ========================================================================== */

/* Use grid inside card body so footer buttons share one bottom row. */
.bte-version-card__body {
    display: grid !important;
    grid-template-columns: auto auto minmax(0, 1fr) !important;
    grid-template-rows: auto auto minmax(0, 1fr) auto auto !important;
    align-content: stretch !important;
    column-gap: 8px !important;
}

.bte-version-card__title {
    grid-column: 1 / -1 !important;
    grid-row: 1 !important;
}

.bte-version-card__credits {
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
}

/* Video row sits at the bottom, directly above the Playlist/Lyrics buttons. */
.bte-version-card__panel-media {
    grid-column: 1 / -1 !important;
    grid-row: 4 !important;
    margin: 0 0 20px !important; /* ~20px gap down to the button row */
    width: 100% !important;
}

/* Bottom action row. */
.bte-version-card__panel-btn{
    align-self: end !important;
    grid-row: 5 !important;
    margin-bottom: 0 !important;
    margin-top: 0 !important;
}

.bte-version-card__panel-btn--playlist{
    grid-column: 1 !important;
}

/* Keep buttons compact and side-by-side. */
.bte-version-card__panel-btn{
    margin-right: 0 !important;
    white-space: nowrap !important;
}

/* Generic video icons for GRID cards. */
/* [old grid icon block removed] */

/* Generic video icons for LIST view too. */
.bte-list-row__action-btn--yt svg,
.bte-list-row__action-btn--tt svg {
    display: none !important;
}

.bte-list-row__action-btn--yt,
.bte-list-row__action-btn--tt {
    align-items: center !important;
    background: transparent !important;
    border-color: transparent !important;
    display: inline-flex !important;
    height: 28px !important;
    justify-content: center !important;
    overflow: visible !important;
    padding: 0 !important;
    width: 28px !important;
}

.bte-list-row__action-btn--yt::after {
    align-items: center !important;
    border: 2px solid rgba(255, 255, 255, 0.94) !important;
    border-radius: 999px !important;
    color: rgba(255, 255, 255, 0.94) !important;
    content: '\25B6\FE0E' !important;
    display: inline-flex !important;
    font-size: 10px !important;
    height: 22px !important;
    justify-content: center !important;
    line-height: 1 !important;
    padding-left: 2px !important;
    width: 22px !important;
}

.bte-list-row__action-btn--tt::after {
    align-items: center !important;
    border: 2px solid rgba(255, 255, 255, 0.94) !important;
    border-radius: 999px !important;
    color: rgba(255, 255, 255, 0.94) !important;
    content: '♪' !important;
    display: inline-flex !important;
    font-size: 15px !important;
    font-weight: 900 !important;
    height: 22px !important;
    justify-content: center !important;
    line-height: 1 !important;
    width: 22px !important;
}

.bte-list-row__action-btn--yt:hover::after,
.bte-list-row__action-btn--yt:focus::after,
.bte-list-row__action-btn--tt:hover::after,
.bte-list-row__action-btn--tt:focus::after {
    border-color: #ff4f93 !important;
    color: #ff4f93 !important;
}


/* ==========================================================================
   Follow-up polish — 2026-06-03
   1) Replace music-note TikTok placeholders with a TikTok-style glyph
   2) Brighten playlist-added state in grid cards
   ========================================================================== */

/* Grid + list TikTok icons: keep the white circle, replace music note with TikTok-style mark. */
.bte-version-card__panel-icon-link--tt::after,
.bte-list-row__action-btn--tt::after {
    background: transparent !important;
    border: 2px solid rgba(255, 255, 255, 0.94) !important;
    border-radius: 999px !important;
    color: transparent !important;
    content: '' !important;
    display: inline-flex !important;
    height: 22px !important;
    width: 22px !important;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20.9 8.1c.9 1.6 2.4 2.7 4.1 2.9v3.4c-1.5-.1-2.9-.6-4.1-1.4v7.1c0 4-3.2 7.2-7.2 7.2S6.5 24 6.5 20s3.2-7.2 7.2-7.2c.4 0 .8 0 1.2.1v3.6c-.4-.1-.8-.2-1.2-.2-2 0-3.7 1.7-3.7 3.7s1.7 3.7 3.7 3.7 3.7-1.7 3.7-3.7V4.7h3.5v3.4z' fill='white'/%3E%3C/svg%3E") !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-size: 15px 15px !important;
}

.bte-version-card__panel-icon-link--tt:hover::after,
.bte-version-card__panel-icon-link--tt:focus::after,
.bte-list-row__action-btn--tt:hover::after,
.bte-list-row__action-btn--tt:focus::after {
    border-color: #ff4f93 !important;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20.9 8.1c.9 1.6 2.4 2.7 4.1 2.9v3.4c-1.5-.1-2.9-.6-4.1-1.4v7.1c0 4-3.2 7.2-7.2 7.2S6.5 24 6.5 20s3.2-7.2 7.2-7.2c.4 0 .8 0 1.2.1v3.6c-.4-.1-.8-.2-1.2-.2-2 0-3.7 1.7-3.7 3.7s1.7 3.7 3.7 3.7 3.7-1.7 3.7-3.7V4.7h3.5v3.4z' fill='%23ff4f93'/%3E%3C/svg%3E") !important;
}

/* Grid card playlist-added state: brighter pink text. */
.bte-version-card__panel-btn--playlist.is-added{
    color: #ff007e !important;
    border-color: rgba(255, 0, 126, 0.68) !important;
    background: rgba(255, 0, 126, 0.16) !important;
}


/* ==========================================================================
   Recently Played — compact card action row
   ========================================================================== */
.bte-recent-card__title {
    color: #ffffff;
    display: block;
    font-size: 13px;
    line-height: 1.25;
    padding: 0 10px;
    margin-bottom: 8px;
}

.bte-recent-card__actions {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 0 8px;
    flex-wrap: wrap;
}

.bte-recent-card__actions .bte-list-row__action-btn {
    width: 28px;
    height: 28px;
    padding: 5px;
    flex-shrink: 0;
}

/* ==========================================================================
   Recently Played grid cards — anchor actions to bottom
   ========================================================================== */
.bte-recent-card {
    display: flex;
    flex-direction: column;
}

.bte-recent-card__title {
    flex: 1;               /* pushes actions row to bottom */
}

/* ==========================================================================
   List view — thumbnail play overlay
   ========================================================================== */
.bte-list-row__thumb-wrap {
    border-radius: 4px;
    overflow: hidden;
}

.bte-list-row__thumb-wrap[data-bte-play] {
    position: relative;
}

.bte-list-row__thumb-wrap[data-bte-play]::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0);
    border-radius: 4px;
    transition: background 150ms ease;
}

.bte-list-row__thumb-wrap[data-bte-play]:hover::after,
.bte-list-row__thumb-wrap[data-bte-play]:focus::after {
    background: rgba(232, 10, 104, 0.45);
}

.bte-list-row__thumb-wrap[data-bte-play]:hover .bte-list-row__thumb,
.bte-list-row__thumb-wrap[data-bte-play]:focus .bte-list-row__thumb {
    opacity: 0.7;
}

.bte-list-row__thumb-wrap[data-bte-play]::before {
    content: '\25B6\FE0E';
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 14px;
    opacity: 0;
    z-index: 1;
    transition: opacity 150ms ease;
}

.bte-list-row__thumb-wrap[data-bte-play]:hover::before,
.bte-list-row__thumb-wrap[data-bte-play]:focus::before {
    opacity: 1;
}

/* Center action buttons on Recently Played grid cards */
.bte-recent-card__actions {
    justify-content: center;
}

/* ==========================================================================
   Sidebar — pink hover on My Playlist / Recently Played buttons
   ========================================================================== */
.bte-user-panel__action:hover,
.bte-user-panel__action:focus,
.bte-user-panel__link:hover,
.bte-user-panel__link:focus {
    background: rgba(232, 10, 104, 0.18) !important;
    border-color: rgba(232, 10, 104, 0.5) !important;
    color: #ffffff !important;
}

/* ==========================================================================
   Card panel — pink border on − Playlist (is-added state)
   ========================================================================== */
.bte-version-card__panel-btn--playlist.is-added {
    border: 1.5px solid #e80a68 !important;
}

/* ==========================================================================
   Playlist drawer — "No Audio Preview" note styled differently
   ========================================================================== */
.bte-playlist-item[data-no-audio] .bte-playlist-item__drag-note {
    color: #e80a68;
    opacity: 0.7;
}

/* ==========================================================================
   BTE Auth Modal — Login / Register
   ========================================================================== */

.bte-auth-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 9000;
    align-items: center;
    justify-content: center;
}

.bte-auth-modal.is-open {
    display: flex;
}

.bte-auth-modal__overlay {
    background: rgba(0, 0, 0, 0.72);
    inset: 0;
    position: absolute;
}

.bte-auth-modal__panel {
    background: #1a1a1a;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 22px;
    box-shadow: 0 32px 80px rgba(0, 0, 0, 0.6);
    box-sizing: border-box;
    font-family: Inter, "Helvetica Neue", Helvetica, Arial, sans-serif;
    max-height: 90vh;
    overflow-y: auto;
    padding: 36px 32px 32px;
    position: relative;
    width: 100%;
    max-width: 420px;
    z-index: 1;
}

.bte-auth-modal__close {
    appearance: none;
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    color: #ffffff;
    cursor: pointer;
    font-size: 18px;
    height: 32px;
    line-height: 1;
    padding: 0;
    position: absolute;
    right: 16px;
    top: 16px;
    transition: background 140ms ease;
    width: 32px;
}

.bte-auth-modal__close:hover {
    background: rgba(232, 10, 104, 0.28);
    border-color: rgba(232, 10, 104, 0.45);
}

.bte-auth-modal__eyebrow {
    color: #e80a68;
    display: block;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 0.18em;
    margin-bottom: 8px;
    text-transform: uppercase;
}

.bte-auth-modal__title {
    color: #ffffff;
    font-size: 26px;
    font-weight: 800;
    letter-spacing: -0.04em;
    line-height: 1.1;
    margin: 0 0 24px;
}

/* Tabs */
.bte-auth-modal__tabs {
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    gap: 4px;
    margin-bottom: 24px;
}

.bte-auth-modal__tab {
    appearance: none;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    color: #b3b3b3;
    cursor: pointer;
    font-family: Inter, "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.06em;
    margin-bottom: -1px;
    padding: 8px 16px;
    text-transform: uppercase;
    transition: color 140ms ease, border-color 140ms ease;
}

.bte-auth-modal__tab:hover {
    color: #ffffff;
}

.bte-auth-modal__tab.is-active {
    border-bottom-color: #e80a68;
    color: #ffffff;
}

/* Panels */
.bte-auth-modal__pane {
    display: none;
}

.bte-auth-modal__pane.is-active {
    display: block;
}

/* Description copy inside panes is a <p>, so it gets caught by the theme's
   `body p { color:#000 !important }`. Out-specify + match !important so the
   intended muted grey wins. */
.bte-auth-modal__pane p {
    color: #b3b3b3 !important;
}

/* Form fields */
.bte-auth-modal__field {
    margin-bottom: 16px;
}

.bte-auth-modal__label {
    color: #e80a68;
    display: block;
    font-size: 9px;
    font-weight: 900;
    letter-spacing: 0.16em;
    margin-bottom: 6px;
    text-transform: uppercase;
}

.bte-auth-modal__input {
    appearance: none;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 10px;
    box-sizing: border-box;
    color: #ffffff;
    font-family: Inter, "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 14px;
    height: 42px;
    outline: none;
    padding: 0 14px;
    transition: border-color 140ms ease, background 140ms ease;
    width: 100%;
}

.bte-auth-modal__input:focus {
    background: rgba(255, 255, 255, 0.09);
    border-color: #e80a68;
    color: #ffffff;
}

/* Override browser autofill background while keeping white text */
.bte-auth-modal__input:-webkit-autofill,
.bte-auth-modal__input:-webkit-autofill:focus {
    -webkit-text-fill-color: #ffffff;
    -webkit-box-shadow: 0 0 0 1000px #2a2a2a inset;
    transition: background-color 5000s ease-in-out 0s;
}

/* Safari/macOS password + contacts autofill icons (the "key" button) render
   dark by default, which is nearly invisible on our dark fields. Invert to white. */
.bte-auth-modal__input::-webkit-credentials-auto-fill-button,
.bte-auth-modal__input::-webkit-contacts-auto-fill-button {
    filter: invert(1);
}

.bte-auth-modal__input::placeholder {
    color: rgba(255, 255, 255, 0.3);
}

/* Submit button */
.bte-auth-modal__submit {
    appearance: none;
    background: #9e0043;
    border: none;
    border-radius: 10px;
    color: #ffffff;
    cursor: pointer;
    font-family: Inter, "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 13px;
    font-weight: 800;
    height: 42px;
    letter-spacing: 0.08em;
    margin-top: 8px;
    text-transform: uppercase;
    transition: background 140ms ease;
    width: 100%;
}

.bte-auth-modal__submit:hover {
    background: #e80a68;
}

.bte-auth-modal__submit:disabled {
    background: rgba(158, 0, 67, 0.45);
    cursor: not-allowed;
}

/* Messages */
.bte-auth-modal__message {
    border-radius: 8px;
    font-size: 13px;
    line-height: 1.5;
    margin-top: 14px;
    padding: 10px 14px;
    display: none;
}

.bte-auth-modal__message.is-visible {
    display: block;
}

.bte-auth-modal__message--error {
    background: rgba(232, 10, 104, 0.12);
    border: 1px solid rgba(232, 10, 104, 0.35);
    color: #ff6bab;
}

.bte-auth-modal__message--success {
    background: rgba(87, 215, 111, 0.1);
    border: 1px solid rgba(87, 215, 111, 0.3);
    color: #57d76f;
}

/* Footer link (e.g. resend verification) */
.bte-auth-modal__footnote {
    color: #b3b3b3;
    font-family: Inter, "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 12px;
    margin-top: 16px;
    text-align: center;
}

.bte-auth-modal__footnote button {
    appearance: none;
    background: none;
    border: none;
    color: #e80a68;
    cursor: pointer;
    font-family: Inter, "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 12px;
    padding: 0;
    text-decoration: underline;
    transition: color 140ms ease;
}

.bte-auth-modal__footnote button:hover {
    color: #ff4f93;
}

/* ==========================================================================
   BTE Auth Trigger Button — header area of catalogue
   ========================================================================== */

.bte-auth-trigger {
    align-items: center;
    display: flex;
    gap: 10px;
}

.bte-auth-trigger__btn {
    appearance: none;
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 10px;
    color: #ffffff;
    cursor: pointer;
    font-size: 12px;
    font-weight: 700;
    height: 36px;
    letter-spacing: 0.06em;
    padding: 0 16px;
    text-transform: uppercase;
    transition: background 140ms ease, border-color 140ms ease;
}

.bte-auth-trigger__btn:hover {
    background: rgba(232, 10, 104, 0.22);
    border-color: rgba(232, 10, 104, 0.45);
}

.bte-auth-trigger__btn--primary {
    background: #9e0043;
    border-color: #9e0043;
}

.bte-auth-trigger__btn--primary:hover {
    background: #e80a68;
    border-color: #e80a68;
}

.bte-auth-trigger__user {
    align-items: center;
    display: none;
    flex-wrap: wrap;
    gap: 4px 10px;
    justify-content: flex-end;
}

.bte-auth-trigger__user.is-visible {
    display: flex;
}

.bte-auth-trigger__manage {
    appearance: none;
    background: none;
    border: 0;
    color: #8f8f8f;
    cursor: pointer;
    flex-basis: 100%;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    padding: 0;
    text-align: right;
    text-transform: uppercase;
}

.bte-auth-trigger__manage:hover {
    color: #e80a68;
}

.bte-auth-trigger__guest {
    align-items: center;
    display: flex;
    gap: 8px;
}

.bte-auth-trigger__guest.is-hidden {
    display: none;
}

.bte-auth-trigger__email {
    color: #b3b3b3;
    font-size: 12px;
    max-width: 320px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ==========================================================================
   BTE Verification notice (shown after clicking verify link)
   ========================================================================== */

.bte-verify-notice {
    background: rgba(87, 215, 111, 0.1);
    border: 1px solid rgba(87, 215, 111, 0.3);
    border-radius: 12px;
    color: #57d76f;
    font-family: Inter, "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 14px;
    line-height: 1.5;
    margin-bottom: 24px;
    padding: 14px 18px;
    transition: opacity 500ms ease, transform 500ms ease;
}

.bte-verify-notice--fade-out {
    opacity: 0;
    transform: translateY(-8px);
}

.bte-verify-notice--error {
    background: rgba(232, 10, 104, 0.1);
    border-color: rgba(232, 10, 104, 0.3);
    color: #ff6bab;
}

/* ==========================================================================
   BTE Account Page (shortcode [bte_account])
   ========================================================================== */

.bte-account-page {
    background: #111111;
    color: #ffffff;
    padding: clamp(28px, 5vw, 72px) clamp(16px, 4vw, 48px);
}

.bte-account-page__shell {
    margin: 0 auto;
    max-width: 480px;
}

.bte-account-page .bte-auth-modal__panel {
    border-radius: 22px;
    max-width: 100%;
    padding: 36px 32px 32px;
    position: static;
}


/* ==========================================================================
   Catalogue header — right column (intro + auth trigger)
   ========================================================================== */

.bte-catalogue__header-right {
    align-items: flex-end;
    display: flex;
    flex-direction: column;
    gap: 12px;
    text-align: right;
}

@media (max-width: 600px) {
    .bte-catalogue__header {
        flex-direction: column;
        align-items: flex-start;
    }

    .bte-catalogue__header-right {
        align-items: flex-start;
        text-align: left;
        width: 100%;
    }

    .bte-auth-trigger__guest {
        flex-wrap: wrap;
    }
}

/* ==========================================================================
   BTE Playlist Selector — Phase 2
   Shown in the playlist drawer when user is logged in
   ========================================================================== */

[data-bte-playlist-drawer-header] {
    padding: 0 20px 12px;
}

/* Item 1 — custom playlist dropdown. The trigger keeps the signature page's
   .bte-sig-plh__select look (surface-2 field, grey caret); the open menu is a
   light listbox so each row can show a parenthesised serif date. Interactive
   elements are scoped under .bte-playlist-drawer to outrank the
   `.bte-playlist-drawer button { font: inherit }` reset. */
.bte-playlist-selector {
    align-items: center;
    display: flex;
    gap: 8px;
    margin-bottom: 10px;
}

.bte-playlist-selector__field {
    flex: 1;
    min-width: 0;
    position: relative;
}

/* Items 1–3 — the playlist dropdown matches the filter bar's .bte-custom-select:
   a pill trigger that glows pink when open, and a dark listbox whose selected
   row gets the pink left-bar treatment. Interactive elements are scoped under
   .bte-playlist-drawer to outrank the `button { font: inherit }` reset. */
.bte-playlist-drawer .bte-playlist-selector__trigger {
    align-items: center;
    appearance: none;
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 12px;
    box-sizing: border-box;
    color: #ffffff;
    cursor: pointer;
    display: flex;
    font-family: Inter, "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 13px;
    font-weight: 600;
    gap: 6px;
    height: 38px;
    justify-content: space-between;
    padding: 0 14px;
    transition: border-color 160ms ease, background 160ms ease;
    width: 100%;
}
.bte-playlist-drawer .bte-playlist-selector__trigger:hover {
    border-color: rgba(255, 255, 255, 0.3);
}
.bte-playlist-drawer .bte-playlist-selector__trigger[aria-expanded="true"] {
    background: rgba(232, 10, 104, 0.12);
    border-color: rgba(232, 10, 104, 0.6);
    box-shadow: 0 0 0 2px rgba(232, 10, 104, 0.18);
}

.bte-playlist-selector__current {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-align: left;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bte-playlist-selector__caret {
    align-items: center;
    color: rgba(255, 255, 255, 0.45);
    display: inline-flex;
    flex: 0 0 auto;
    transition: transform 160ms ease;
}
.bte-playlist-drawer .bte-playlist-selector__trigger[aria-expanded="true"] .bte-playlist-selector__caret {
    transform: rotate(180deg);
}

/* Item 3 — name + song count bold; "• date" 11px italic non-bold (same font). */
.bte-pl-main { font-weight: 800; }
.bte-pl-meta { font-size: 11px; font-style: italic; font-weight: 400; }
.bte-pl-hiddenmark { font-size: 11px; font-style: italic; opacity: 0.7; }

/* Item 2 — the menu grows to its widest row (capped to the drawer width) so
   nothing is clipped, while never shrinking below the trigger width. */
.bte-playlist-selector__menu {
    background: #1c1c1e;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 10px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.55);
    left: 0;
    list-style: none;
    margin: 0;
    max-height: 320px;
    max-width: min(440px, calc(100vw - 24px));
    min-width: 100%;
    overflow-y: auto;
    padding: 6px;
    position: absolute;
    top: calc(100% + 5px);
    width: max-content;
    z-index: 205;
}
.bte-playlist-selector__menu[hidden] { display: none !important; }
.bte-playlist-selector__menu::-webkit-scrollbar { width: 4px; }
.bte-playlist-selector__menu::-webkit-scrollbar-track { background: transparent; }
.bte-playlist-selector__menu::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 2px;
}

.bte-playlist-selector__option {
    appearance: none;
    background: transparent;
    border: 0;
    border-left: 4px solid transparent;
    border-radius: 8px;
    color: #ffffff;
    cursor: pointer;
    display: block;
    font-family: Inter, "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 13px;
    line-height: 1.3;
    padding: 8px 14px 8px 16px;
    text-align: left;
    white-space: nowrap;
}
.bte-playlist-selector__option:hover {
    background: rgba(255, 255, 255, 0.07);
}
.bte-playlist-selector__option.is-active {
    background: rgba(232, 10, 104, 0.12);
    border-left-color: #e80a68;
    color: #ff4f93;
    padding-left: 12px;
}

.bte-playlist-selector__actions {
    align-items: center;
    display: flex;
    flex: 0 0 auto;
    gap: 4px;
}

.bte-playlist-drawer .bte-playlist-selector__btn {
    align-items: center;
    appearance: none;
    background: #1b1b22;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    box-sizing: border-box;
    color: #f4f4f6;
    cursor: pointer;
    display: inline-flex;
    font-size: 13px;
    height: 36px;
    justify-content: center;
    line-height: 1;
    padding: 0;
    transition: background 140ms ease, border-color 140ms ease, color 140ms ease;
    width: 36px;
}
.bte-playlist-drawer .bte-playlist-selector__btn:hover {
    border-color: #e80a68;
}
.bte-playlist-drawer .bte-playlist-selector__btn--danger:hover {
    border-color: #ff5a7a;
    color: #ff5a7a;
}

/* ==========================================================================
   BTE Share Panel — inside playlist drawer
   ========================================================================== */

.bte-share-panel {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    margin: 0 0 16px;
    padding: 16px;
}

.bte-share-panel__header {
    align-items: center;
    display: flex;
    justify-content: space-between;
    margin-bottom: 12px;
}

.bte-share-panel__title {
    color: #ffffff;
    font-family: Inter, "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 13px;
    font-weight: 700;
}

.bte-share-panel__close {
    appearance: none;
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    color: #ffffff;
    cursor: pointer;
    font-size: 16px;
    height: 24px;
    line-height: 1;
    padding: 0;
    transition: background 140ms ease;
    width: 24px;
}

.bte-share-panel__close:hover {
    background: rgba(232, 10, 104, 0.28);
}

.bte-share-panel__url-row,
.bte-share-panel__email-row {
    display: flex;
    gap: 8px;
    margin-bottom: 10px;
    flex-wrap: wrap;
}

.bte-share-panel__url-input,
.bte-share-panel__email-input,
.bte-share-panel__name-input {
    appearance: none;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 8px;
    box-sizing: border-box;
    color: #ffffff;
    flex: 1 1 160px;
    font-family: Inter, "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 12px;
    height: 34px;
    outline: none;
    padding: 0 10px;
}

.bte-share-panel__url-input {
    color: #b3b3b3;
    cursor: text;
}

/* Scoped under .bte-playlist-drawer so these (0,2,1) win over the
   `.bte-playlist-drawer button { font: inherit }` reset (0,1,1) above — without
   the scope, that reset's `font: inherit` shorthand clobbers font-size (and the
   rest of the font), so the buttons lose their intended 12px. The share panel is
   only ever inserted inside the drawer, so the scope is always satisfied. */
.bte-playlist-drawer .bte-share-panel__copy-btn,
.bte-playlist-drawer .bte-share-panel__send-btn {
    appearance: none;
    background: #9e0043;
    border: none;
    border-radius: 8px;
    color: #ffffff;
    cursor: pointer;
    flex-shrink: 0;
    font-family: Inter, "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 12px;
    font-weight: 700;
    height: 34px;
    letter-spacing: 0.04em;
    padding: 0 14px;
    transition: background 140ms ease;
}

/* Scoped to match the base rule's raised specificity so hover/disabled still
   win the `background` cascade against it. */
.bte-playlist-drawer .bte-share-panel__copy-btn:hover,
.bte-playlist-drawer .bte-share-panel__send-btn:hover {
    background: #e80a68;
}

.bte-playlist-drawer .bte-share-panel__send-btn:disabled {
    background: rgba(158, 0, 67, 0.45);
    cursor: not-allowed;
}

.bte-share-panel__message {
    border-radius: 6px;
    display: none;
    font-family: Inter, "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 12px;
    line-height: 1.4;
    padding: 8px 10px;
}

.bte-share-panel__message.is-visible {
    display: block;
}

.bte-share-panel__message--success {
    background: rgba(87, 215, 111, 0.1);
    border: 1px solid rgba(87, 215, 111, 0.3);
    color: #57d76f;
}

.bte-share-panel__message--error {
    background: rgba(232, 10, 104, 0.1);
    border: 1px solid rgba(232, 10, 104, 0.3);
    color: #ff6bab;
}

/* ==========================================================================
   BTE Playlist Drawer — Hide button + Show hidden link
   ========================================================================== */

.bte-playlist-drawer__show-hidden {
    appearance: none;
    background: none;
    border: none;
    color: #b3b3b3;
    cursor: pointer;
    display: block;
    font-family: Inter, "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 11px;
    padding: 0;
    text-align: right;
    text-decoration: underline;
    text-underline-offset: 2px;
    transition: color 140ms ease;
    white-space: nowrap;
}

.bte-playlist-drawer__show-hidden:hover {
    color: #ffffff;
}

/* ==========================================================================
   BTE Shared Playlist Overlay — public view
   ========================================================================== */

.bte-shared-playlist-overlay {
    align-items: flex-start;
    display: none;
    inset: 0;
    justify-content: center;
    overflow-y: auto;
    padding: 40px 16px;
    position: fixed;
    z-index: 8000;
}

.bte-shared-playlist-overlay.is-open {
    display: flex;
}

.bte-shared-playlist-overlay__backdrop {
    background: rgba(0, 0, 0, 0.75);
    cursor: pointer;
    inset: 0;
    position: fixed;
}

.bte-shared-playlist-overlay__panel {
    background: #1a1a1a;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 22px;
    box-shadow: 0 32px 80px rgba(0, 0, 0, 0.6);
    box-sizing: border-box;
    max-width: 720px;
    padding: 32px;
    position: relative;
    width: 100%;
    z-index: 1;
}

.bte-shared-playlist-overlay__header {
    align-items: flex-start;
    display: flex;
    justify-content: space-between;
    margin-bottom: 24px;
}

.bte-shared-playlist-overlay__eyebrow {
    color: #e80a68;
    display: block;
    font-family: Inter, "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 0.18em;
    margin-bottom: 6px;
    text-transform: uppercase;
}

.bte-shared-playlist-overlay__title {
    color: #ffffff;
    font-size: 24px;
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1.1;
    margin: 0;
}

.bte-shared-playlist-overlay__close {
    appearance: none;
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    color: #ffffff;
    cursor: pointer;
    flex-shrink: 0;
    font-size: 18px;
    height: 32px;
    line-height: 1;
    margin-left: 16px;
    padding: 0;
    transition: background 140ms ease;
    width: 32px;
}

.bte-shared-playlist-overlay__close:hover {
    background: rgba(232, 10, 104, 0.28);
}

.bte-shared-track {
    align-items: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    display: flex;
    gap: 12px;
    padding: 10px 0;
}

.bte-shared-track:last-child {
    border-bottom: none;
}

.bte-shared-track__num {
    color: #b3b3b3;
    flex-shrink: 0;
    font-family: Inter, "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 12px;
    min-width: 20px;
    text-align: right;
}

.bte-shared-track__cover {
    flex-shrink: 0;
    height: 100px;
    position: relative;
    width: 100px;
}

.bte-shared-track__cover img {
    border-radius: 6px;
    height: 100px;
    object-fit: cover;
    width: 100px;
}

.bte-shared-track__placeholder {
    align-items: center;
    background: #2a2a2a;
    border-radius: 6px;
    color: #b3b3b3;
    display: flex;
    font-size: 32px;
    height: 100px;
    justify-content: center;
    width: 100px;
}

.bte-shared-track__play {
    align-items: center;
    appearance: none;
    background: transparent;
    border: none;
    border-radius: 6px;
    color: #ffffff;
    cursor: pointer;
    display: flex;
    height: 100%;
    inset: 0;
    justify-content: center;
    position: absolute;
    width: 100%;
}

/* White play glyph at 50% opacity by default, solid white on rollover */
.bte-shared-track__play svg {
    filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.55));
    height: 40px;
    opacity: 0.5;
    transition: opacity 140ms ease;
    width: 40px;
}

.bte-shared-track__play:hover svg,
.bte-shared-track__play:focus svg {
    opacity: 1;
}

.bte-shared-track__meta {
    flex: 1 1 auto;
    min-width: 0;
}

.bte-shared-track__meta strong {
    color: #ffffff;
    display: block;
    font-family: Inter, "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 8px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bte-shared-track__meta span {
    color: #b3b3b3;
    display: block;
    font-family: Inter, "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 12px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bte-shared-track__empty {
    color: #b3b3b3;
    font-family: Inter, "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 14px;
    padding: 20px 0;
    text-align: center;
}

/* Rebuilt shared-track row: credit lines, performed-by, action buttons */
.bte-shared-track__meta .bte-shared-track__line {
    color: #cacaca;
    display: block;
    font-family: Inter, "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 12px;
    font-weight: 400;
    margin-top: 2px;
    overflow: visible;
    white-space: normal;
}

.bte-shared-track__meta .bte-shared-track__credit-label {
    color: #585858;
    display: inline;
    font-weight: 700;
    text-transform: none;
    white-space: normal;
}

.bte-shared-track__actions {
    align-items: center;
    display: flex;
    flex-direction: row;
    flex-shrink: 0;
    flex-wrap: wrap;
    gap: 5px;
    justify-content: flex-end;
    margin-left: auto;
}

/* Share panel — 24-hour expiry control */
.bte-share-panel__expiry {
    align-items: center;
    color: #d0d0d0;
    cursor: pointer;
    display: flex;
    font-family: Inter, "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 11px;
    gap: 5px;
    margin-top: 14px;
    text-transform: uppercase;
}

.bte-share-panel__expiry input {
    cursor: pointer;
    margin: 0;
}

/* Keep the two option checkboxes close together... */
.bte-share-panel__expiry + .bte-share-panel__expiry {
    margin-top: 6px;
}

/* ...but leave a little breathing room beneath the last one. */
.bte-share-panel__expiry--last {
    margin-bottom: 14px;
}

.bte-share-panel__expiry-note {
    color: #8a8a8a;
    font-family: Inter, "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 11px;
    font-weight: 700;
    margin: 4px 0 12px;
    text-transform: uppercase;
}

.bte-shared-playlist-error {
    background: rgba(232, 10, 104, 0.1);
    border: 1px solid rgba(232, 10, 104, 0.3);
    border-radius: 12px;
    color: #ff6bab;
    font-family: Inter, "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 14px;
    margin: 24px auto;
    max-width: 560px;
    padding: 14px 18px;
}


/* ==========================================================================
   Pink circular YouTube + TikTok icons — FINAL override, appended last.
   Uses your uploaded PNG images embedded as base64 data URIs.
   Overrides all previous SVG/::after icon blocks via cascade position.
   ========================================================================== */

.bte-version-card__panel-icon-link--yt svg,
.bte-version-card__panel-icon-link--tt svg,
.bte-list-row__action-btn--yt svg,
.bte-list-row__action-btn--tt svg {
    display: none !important;
}

.bte-version-card__panel-icon-link--yt,
.bte-version-card__panel-icon-link--tt,
.bte-list-row__action-btn--yt,
.bte-list-row__action-btn--tt {
    background-color: transparent !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-size: contain !important;
    border: 0 !important;
    box-shadow: none !important;
    display: inline-block !important;
    height: 26px !important;
    opacity: 0.85 !important;
    text-decoration: none !important;
    transform: none !important;
    transition: opacity 160ms ease, transform 160ms ease !important;
    width: 26px !important;
}

.bte-version-card__panel-icon-link--yt,
.bte-list-row__action-btn--yt {
    background-image: url("data:image/png;base64,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") !important;
}

.bte-version-card__panel-icon-link--tt,
.bte-list-row__action-btn--tt {
    background-image: url("data:image/png;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/4gHYSUNDX1BST0ZJTEUAAQEAAAHIAAAAAAQwAABtbnRyUkdCIFhZWiAH4AABAAEAAAAAAABhY3NwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAQAA9tYAAQAAAADTLQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAlkZXNjAAAA8AAAACRyWFlaAAABFAAAABRnWFlaAAABKAAAABRiWFlaAAABPAAAABR3dHB0AAABUAAAABRyVFJDAAABZAAAAChnVFJDAAABZAAAAChiVFJDAAABZAAAAChjcHJ0AAABjAAAADxtbHVjAAAAAAAAAAEAAAAMZW5VUwAAAAgAAAAcAHMAUgBHAEJYWVogAAAAAAAAb6IAADj1AAADkFhZWiAAAAAAAABimQAAt4UAABjaWFlaIAAAAAAAACSgAAAPhAAAts9YWVogAAAAAAAA9tYAAQAAAADTLXBhcmEAAAAAAAQAAAACZmYAAPKnAAANWQAAE9AAAApbAAAAAAAAAABtbHVjAAAAAAAAAAEAAAAMZW5VUwAAACAAAAAcAEcAbwBvAGcAbABlACAASQBuAGMALgAgADIAMAAxADb/2wBDAAUDBAQEAwUEBAQFBQUGBwwIBwcHBw8LCwkMEQ8SEhEPERETFhwXExQaFRERGCEYGh0dHx8fExciJCIeJBweHx7/2wBDAQUFBQcGBw4ICA4eFBEUHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh7/wAARCABkAGQDASIAAhEBAxEB/8QAHQAAAgIDAQEBAAAAAAAAAAAAAAgGBwIEBQMBCf/EAEIQAAEDAwEDCAQLBwUBAAAAAAECAwQABREGEiExBwgTQVFhcaEUUoGRIjI1NnJ0dbGys9EVFiMzQpLBQ1VjgpTD/8QAHAEAAgMBAQEBAAAAAAAAAAAABAUABgcCAwEI/8QANBEAAQMCAwUECQUBAAAAAAAAAQACAwQRBSExBhJBYXFRgZGxFCIyMzWhwdHhEyNCUvBi/9oADAMBAAIRAxEAPwBWqKK94ESROltxYrZcdWcAD7/CoBfILpjHPcGtFyV4pSVKCUgkk4AA3mpXYtEXGalL01QhsnfgjKyPDq9tS7SulolnbS86EvzSN7hG5Hcn9akNMYaMavWj4PsUwNEtdmf6j6n7eK4Fu0fYoYGYvpK/WeO15cK7LMOIyAGYrLYHqtgV7UUa1jW6BXenoKamFoYw3oAsVNNKGFNoI70itGZZLRLGJFujqPaEAH3ir15rlut9xu17RPhRpSUMNlIeaCwk7R4Zq+v3Z05/sNs/8qP0oWapaxxaW3VXxraWlo6h1LNBv2t2WzF+IX52XfQER1JXbZC2F9SHPhJPt4jzqD3i0XC0vdHNjqQD8VY3pV4GmS5U7YbRyiXyD0KWUJlrW2hIwAhfw04/6qFRSXGjy46o8lpDrShgpUMio+lZIN5uS+VuylDiEImpv23OAItpnnp9lRNFSnWWlHLSTMh7TsInfneprx7R31FqXPY5hs5ZpXUM9DMYZ22I+fMckUUUVwg19SCpQSkEknAA66tnROn0WaAHXkgzXhlw+oPVH+aiPJraRNuyprycsxcEZ4FZ4e7j7qs+mNHDlvlaTsVg7Qz06UZnJv1P08UUUUUetCRRRRUUV380z5Zvv1dr8RphqXnmmfLN9+rtfiNMNSir96Vje2HxaTo3yCprnHaBkXmK3qm0MKdmRG9iWygZU40N4UB1lOTntHhvW+n1qt9d8jmmNTSXJ0bbtE9w5W5HSC2s9ZU3wz3gjtOa9aeqDBuvTXZzatlJEKarvujQ625EdnZbolQdQh1tTbiQtChhSSMgiql1rYTZbjloExHslo+r2pPhTPcqHJdN0Na2Lk/do01l+QGEpQ2pCgSlSs4ORj4PbVVantaLvZn4hA6TG00exY4fp7aJlY2dl2qzYxR02PUBlpzvOF908xqO/wA1S9FfVpUhZQoEKScEHqNFKFjuitvk/hCHpmOcYW/l1Xt4eWK79eNvbDMCOyBgIaSn3CvanrG7rQF+gKCnFNTRwj+IA+SKK3rDabhfbtHtVrjLky5CtltCfMk9QA3kngKZrk65HdPadYblXdpq8XTAKlupyy2exCDuP0lb/DhXEs7YhmgcXx2lwpo/VN3HQDX8D/BLVa9P326AG22efLSf6mY6lD3gYrG82O8WVTabta5cEu56Pp2ijaxxxnjxFPGlKUpCUgJSBgADcBVEc7f+Xpzxk/8AzrwiqzI8Nsq/hO10mI1zKf8ASDWuvxucgTy7Fo80z5Zvv1dr8RphqXnmmfLN9+rtfiNMNQtX70qqbYfFpOjfIKoLTy1QYeqbnYdUsejojTnmWJrKSpOwlZAC08QcDiM57Bxq0rPd7XeIok2q4xZrJGdth0LA8ccD3Gk15RPn9f8A7Rf/ADDXHiypMR0OxZDrDgOQptZSR7RRLqNrgC3JWqo2MpauNskDtwkDmNOzh49yY7nW/Mi2faSfynKWuunddQ366xURbperhOYQvbQ3IkrcSlWCMgKJxuJ99cyiYIzGzdKseB4a7DaQU7nXIJNxzVRa8hCHqaSEJwh3DqcD1uPnmip5qW1Nzp6HlJBIaCeHef1ooCSmJeSFQcT2XmfVyOj9kkkd677JCmUKHApBrKufpuSJdhhSBxUykHxAwfMV0KZtNwCtQgkEsTZBoQD4pm+bXpFq0aV/eOS0PT7oMtkje2wD8ED6RG13jZ7KthxaG21OOLShCAVKUo4AA4kmtayxG4FmhQWhhuPHbaSOwJSAPuquucteZNs5PPRYrim1XCSmO4QcHo8FShnvwB3gmkxvNJ1WKPMmNYpYnN7rdB+AuLrLl7t8GY5D03bRcQ2cGU8sobUevZSBkjvJHhVV8p/KJM121b0zLcxEVCU4UlpZIUF7PHPZs+dQiimkdPGzMDNarQbPUFC5r4mes3iSb6W6fJXfzTPlm+/V2vxGmGpeeaZ8s336u1+I0w1Lqv3pWbbYfFpOjfIJKOUT5/X/AO0X/wAw1wa73KJ8/r/9ov8A5hrg01Z7IWuUnuGdB5IooorpELSnvoaeCVYzs58zRUL5QLw5Gvwjs8EMpCt/WST9xFFBPqQ1xCo+IbUQ09S+I/xNlu8ldxDsB+2rV8NlXSIHak8fcfvqaVSdguTlpurM1vJCDhafWSeIq54clmXFbkx1hbTiQpKh2V1SS7zN3iETsdijaqjFO4+tHl3cPDRPNpK4t3fS9rubSgpMmI25uOcEpGR4g5HsqL8uul5WqdBPR4DZdmxHUymW0je5sghSR3lKjgdZAqBc2bXDKGDoy5vhC9suW5SjuVneprxzlQ7cq7hV80C9phkVAroJsExO7R7Ju3sI4fY96QtSSlRSoEKBwQRvFfKb/WHJbo/U8xc2bAXGmOHLj8RfRqWe1QwUk95Ga09N8juiLJLRKEJ+4PIOUGa4HEg9uyAEn2g0b6ay2ivTduKExbzmu3uzLzv/ALsXF5s2lpdm0zLvU9pTLt1UgstqGCGUg7Ku7aKifAA9dWy+62wyt55aUNtpKlqUcBIAySazqpecVrlmzafc0zAfBudwRsvbJ3ssH42e9XADsJPZkH1p5Oqof7+PYlcDN58APsPFLlqCd+079cLlgj0qS48AeraUT/mtGiinQFltzGhjQ0aBFYvOIZZW64oJQhJUonqArKoXymXsMRP2RHX/ABXhl7H9KOz2/dXEkgjaXFBYniEeH0r538NOZ4BQS9TVXG6yZqv9VwqA7B1D3YorTopGTc3KwaWR0ry9xzJue9FSnQ2pTaXvQ5iiYTh48eiPb4dtRaiumPLHbwRNDXTUM7Z4TYj58jyV9xn/AOXIjO8MLbcQr2ggirz5OuXVyNHat2sGHZCUAJTPZGV4/wCRPX9Ib+4nfSYaX1RNsqg0cyIhO9pR+L3pPVVk2W/Wy7NgxJCekxvaXuWPZ+lMmviqBZ2q0+CuwvaSERTiz+w5EH/k8f8AXCeS0680bdGA9D1JbSDu2XXw0r+1eD5V63DWmkYDKnZWpLUhKeITKQtX9qST5UlNFcegtvqhDsHTb1xK63QX8fwmF19y8Q2WHIej46pD6gR6bIRsto70oO9R+lgdxqgrhMl3Ca9NnSHJEl5RW464rKlE9ZNa9FExwtjHqq0YZg9JhrN2BuZ1JzJ7/tkiisXnW2Wy464ltCd5Uo4AqG6k1zHjpVHtAD7vDpiPgJ8O37q+ySNjF3FemIYnS4fHvzvty4noF2dWahj2SId6XJax/Caz5nuqpJch6XJckyHC464raUo9ZolyH5UhciS6p11ZypSjkmvKlU85lPJZDjuOy4tLc5MGg+p5+SKKKK8EhRRRRUURX1ClIUFIUUqG8EHBFFFRTRd226tvsPZQJfTI4bLw2vPj51PLHfJc5pKnm2QT6qSP80UUwpXuIzK0jZOrnlaQ95IHaSV1JMx1pvaSlBOOsGoXqHWF3jO9DHEdsesGyT5miivedxDcin2PzyxU5MbiDyNlEbjc7hcV7U2W692BStw8BwrToopSSTmVjkkj5XFzySe05oooor4uEUUUVFF//9k=") !important;
}

.bte-version-card__panel-icon-link--yt:hover,
.bte-version-card__panel-icon-link--tt:hover,
.bte-list-row__action-btn--yt:hover,
.bte-list-row__action-btn--tt:hover,
.bte-version-card__panel-icon-link--yt:focus,
.bte-version-card__panel-icon-link--tt:focus,
.bte-list-row__action-btn--yt:focus,
.bte-list-row__action-btn--tt:focus {
    opacity: 1 !important;
    transform: translateY(-1px) scale(1.08) !important;
    background-color: transparent !important;
}

.bte-version-card__panel-icon-link--yt::after,
.bte-version-card__panel-icon-link--tt::after,
.bte-list-row__action-btn--yt::after,
.bte-list-row__action-btn--tt::after,
.bte-version-card__panel-icon-link--yt:hover::after,
.bte-version-card__panel-icon-link--yt:focus::after,
.bte-version-card__panel-icon-link--tt:hover::after,
.bte-version-card__panel-icon-link--tt:focus::after,
.bte-list-row__action-btn--yt:hover::after,
.bte-list-row__action-btn--tt:hover::after {
    content: none !important;
    display: none !important;
}

/* ==========================================================================
   Video icon hover fix — 2026-06-05
   The two pink PNG icons were vanishing on hover because older :hover rules
   used the `background` shorthand (which resets background-image to none).
   Those were changed to `background-color`. This block removes the stray
   pipe `|` separator that used to peek through when the icon disappeared,
   and replaces it with a small gap so the two icons stay nicely spaced.
   ========================================================================== */

/* Kill the leftover "|" separator between the YouTube and TikTok icons. */
.bte-version-card__panel-icon-link + .bte-version-card__panel-icon-link::before {
    content: none !important;
    display: none !important;
}

/* Space the second icon from the first now that the separator is gone. */
.bte-version-card__panel-icon-link + .bte-version-card__panel-icon-link {
    margin-left: 12px !important;
}

/* ==========================================================================
   Video lightbox — YouTube / TikTok
   ========================================================================== */
.bte-video-lightbox {
    align-items: center;
    background: rgba(0, 0, 0, 0.85);
    display: flex;
    inset: 0;
    justify-content: center;
    padding: 24px;
    position: fixed;
    z-index: 100000;
}

.bte-video-lightbox[hidden] {
    display: none;
}

.bte-video-lightbox__overlay {
    inset: 0;
    position: absolute;
}

.bte-video-lightbox__inner {
    position: relative;
    z-index: 1;
}

.bte-video-lightbox__inner--yt {
    max-width: 900px;
    width: 100%;
}

.bte-video-lightbox__frame {
    background: #000;
    border-radius: 12px;
    overflow: hidden;
    position: relative;
}

.bte-video-lightbox__inner--yt .bte-video-lightbox__frame {
    aspect-ratio: 16 / 9;
    width: 100%;
}

.bte-video-lightbox__inner--tt .bte-video-lightbox__frame {
    aspect-ratio: 9 / 16;
    height: min(80vh, 580px);
    margin: 0 auto;
    width: auto;
    /* Safari A/V sync fix: do NOT clip the live TikTok <video> with an ancestor
       overflow:hidden + border-radius. That forces WebKit onto a slow compositing
       path and the embed's audio/video drift out of sync (Mac Safari only; Chrome
       and YouTube are unaffected). We round the iframe itself below instead. */
    overflow: visible;
    border-radius: 0;
    background: transparent;
}

/* Round + GPU-promote the TikTok iframe directly, so corners stay pretty without
   an ancestor clip masking the live video. translateZ(0) gives the embed its own
   compositing layer, which keeps audio/video in sync in Safari. */
.bte-video-lightbox__inner--tt .bte-video-lightbox__frame iframe {
    border-radius: 12px;
    transform: translateZ(0);
}

.bte-video-lightbox__frame iframe {
    border: 0;
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
}

.bte-video-lightbox__close {
    align-items: center;
    appearance: none;
    background: rgba(0, 0, 0, 0.6);
    border: 0;
    border-radius: 999px;
    color: #ffffff;
    cursor: pointer;
    display: flex;
    font-size: 26px;
    height: 40px;
    justify-content: center;
    line-height: 1;
    position: absolute;
    right: 0;
    top: -48px;
    width: 40px;
}

.bte-video-lightbox__close:hover {
    background: rgba(0, 0, 0, 0.85);
}

.bte-video-lightbox__fallback {
    color: #b3b3b3;
    font-size: 12px;
    margin: 10px 0 0;
    text-align: center;
}

.bte-video-lightbox__fallback a {
    color: #e80a68;
    font-weight: 700;
    text-decoration: underline;
}

body.bte-video-lightbox-open {
    overflow: hidden;
}

/* ============================================================
   In the Spotlight — pinned Masters (wp_bte_versions.is_pinned)
   Square cover-art tiles: title always visible; full song
   details + controls revealed on hover/focus. Reuses the
   .bte-version-card base + JS hooks; layout via .bte-spotlight-*.
   ============================================================ */

.bte-spotlight-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
}
@media (max-width: 900px) {
    .bte-spotlight-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
}
@media (max-width: 560px) {
    .bte-spotlight-grid { grid-template-columns: 1fr; }
}

.bte-spotlight-card {
    position: relative;
    aspect-ratio: 1 / 1;
    background: #111;
    isolation: isolate;
    overflow: hidden;
    /* The cover art zooms (scale 1.05) on hover. Safari intermittently fails to
       apply the card's rounded overflow clip to a transformed child, letting a
       bright rim of cover art bleed past the dark hover veil. Promoting the card
       to its own compositing layer forces Safari to honour the clip. */
    -webkit-transform: translateZ(0);
            transform: translateZ(0);
}

.bte-spotlight-card__cover {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 500ms ease;
}
.bte-spotlight-card:hover .bte-spotlight-card__cover,
.bte-spotlight-card:focus-within .bte-spotlight-card__cover {
    transform: scale(1.05);
}

/* Resting scrim — dark at the top for title legibility, fading to clear. */
.bte-spotlight-card__scrim {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(8,4,10,0.72) 0%, rgba(8,4,10,0.20) 32%, rgba(8,4,10,0) 60%);
}

/* Hover veil — near-full dark wash so revealed details read cleanly. */
.bte-spotlight-card__veil {
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0;
    transition: opacity 260ms ease;
    background: linear-gradient(180deg, rgba(14,9,17,0.80) 0%, rgba(16,10,19,0.72) 100%);
}
.bte-spotlight-card:hover .bte-spotlight-card__veil,
.bte-spotlight-card:focus-within .bte-spotlight-card__veil {
    opacity: 1;
}

.bte-spotlight-card__content {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 22px;
    overflow: hidden;
}

.bte-spotlight-card__title {
    margin: 0;
    color: #fff;
    font-size: clamp(19px, 1.8vw, 25px);
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.02em;
    text-shadow: 0 2px 14px rgba(0,0,0,0.55);
}

/* Hidden until hover/focus. */
.bte-spotlight-card__details {
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-height: 0;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 240ms ease, transform 240ms ease;
}
.bte-spotlight-card:hover .bte-spotlight-card__details,
.bte-spotlight-card:focus-within .bte-spotlight-card__details {
    opacity: 1;
    transform: none;
}

/* Credits — pink uppercase labels over white values. */
.bte-spotlight-card__credits {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.bte-spotlight-card .bte-spotlight-card__credit {
    margin: 0;
    display: flex;
    flex-direction: column;
    line-height: 1.22;
}
.bte-spotlight-card .bte-spotlight-card__credit .bte-version-card__credit-label {
    color: #d92f70;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.10em;
}
.bte-spotlight-card .bte-spotlight-card__credit .bte-version-card__credit-value {
    color: #fff;
    font-size: 14px;
    font-weight: 500;
}

/* Video icon row — pink circular YouTube / TikTok. */
.bte-spotlight-card__video {
    display: flex;
    align-items: center;
    gap: 10px;
}
.bte-spotlight-card__video-label {
    color: #d92f70;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.10em;
}
.bte-spotlight-card .bte-spotlight-card__vid {
    display: inline-flex;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    overflow: hidden;
    transition: transform 150ms ease;
}
.bte-spotlight-card .bte-spotlight-card__vid svg { width: 100%; height: 100%; display: block; }
.bte-spotlight-card .bte-spotlight-card__vid:hover { transform: scale(1.12); }

/* Controls row — pinned to the bottom of the card. */
.bte-spotlight-card__buttons {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-top: auto;
}

.bte-spotlight-card__btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    border: none;
    border-radius: 999px;
    padding: 9px 15px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.02em;
    cursor: pointer;
    transition: transform 150ms ease, background 150ms ease, box-shadow 150ms ease;
}
.bte-spotlight-card__btn-icon { width: 16px; height: 16px; flex: none; }

.bte-spotlight-card__btn--playlist {
    background: rgba(138, 28, 74, 0.55);
    color: #fff;
    box-shadow: inset 0 0 0 1.5px #d92f70;
}
.bte-spotlight-card__btn--playlist:hover { background: rgba(160, 33, 86, 0.72); transform: translateY(-1px); }
.bte-spotlight-card__btn--playlist.is-added { background: rgba(217, 47, 112, 0.85); box-shadow: inset 0 0 0 1.5px #d92f70; }

.bte-spotlight-card__btn--lyrics {
    background: rgba(255,255,255,0.12);
    color: #fff;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.22);
}
.bte-spotlight-card__btn--lyrics:hover { background: rgba(255,255,255,0.20); transform: translateY(-1px); }

/* Round play button. */
.bte-spotlight-card__play {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    flex: none;
    border: none;
    border-radius: 50%;
    background: #fff;
    color: #111;
    cursor: pointer;
    box-shadow: 0 6px 18px rgba(0,0,0,0.35);
    transition: transform 150ms ease;
}
.bte-spotlight-card__play:hover { transform: scale(1.08); }
.bte-spotlight-card__play span {
    display: block;
    width: 0; height: 0;
    margin-left: 2px;
    border-style: solid;
    border-width: 7px 0 7px 12px;
    border-color: transparent transparent transparent #111;
}
/* Pause glyph when this card is the active track. */
.bte-spotlight-card.is-playing .bte-spotlight-card__play span {
    width: 12px; height: 13px;
    margin-left: 0;
    border: 0;
    border-left: 4px solid #111;
    border-right: 4px solid #111;
    background: transparent;
}

/* Spotlight rail (train) — used when more than 3 masters are pinned.
   Reuses the shared .bte-catalogue__rail-wrap arrows + rail JS hooks;
   sized to show three square cards at a time. */
.bte-spotlight-rail {
    display: flex;
    gap: 16px;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scroll-snap-type: inline mandatory;
    padding: 2px 2px 18px;
}
.bte-spotlight-rail-wrap .bte-spotlight-rail { scrollbar-width: none; }
.bte-spotlight-rail-wrap .bte-spotlight-rail::-webkit-scrollbar { display: none; }
.bte-spotlight-rail > .bte-spotlight-card {
    flex: 0 0 calc((100% - 32px) / 3);
    scroll-snap-align: start;
}
/* Centre the arrows vertically on the square cards. */
.bte-spotlight-rail-wrap .bte-rail-arrow { top: 50%; }
@media (max-width: 900px) {
    .bte-spotlight-rail > .bte-spotlight-card { flex-basis: calc((100% - 16px) / 2); }
}
@media (max-width: 560px) {
    .bte-spotlight-rail > .bte-spotlight-card { flex-basis: 86%; }
}

/* Guest preview limit notice — shown when a guest reaches the 1-minute cap.
   Floats just above the persistent player; auto-dismisses. */
.bte-preview-notice {
    position: fixed;
    bottom: 116px;
    left: 50%;
    transform: translate(-50%, 14px);
    z-index: 10000;
    display: flex;
    align-items: center;
    gap: 14px;
    max-width: min(560px, calc(100vw - 32px));
    padding: 12px 14px 12px 18px;
    border-radius: 999px;
    background: rgba(20, 14, 23, 0.96);
    box-shadow: inset 0 0 0 1px rgba(217, 47, 112, 0.55), 0 18px 44px rgba(0, 0, 0, 0.45);
    color: #fff;
    font-family: Inter, "Helvetica Neue", Helvetica, Arial, sans-serif;
    opacity: 0;
    pointer-events: none;
    transition: opacity 220ms ease, transform 220ms ease;
}
.bte-preview-notice.is-visible {
    opacity: 1;
    transform: translate(-50%, 0);
    pointer-events: auto;
}
.bte-preview-notice__text {
    font-size: 13.5px;
    font-weight: 500;
    line-height: 1.3;
}
.bte-preview-notice__btn {
    flex: none;
    border: none;
    border-radius: 999px;
    padding: 7px 16px;
    background: #d92f70;
    color: #fff;
    font-family: inherit;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: background 150ms ease, transform 150ms ease;
}
.bte-preview-notice__btn:hover { background: #c41f5e; transform: translateY(-1px); }
.bte-preview-notice__link {
    appearance: none;
    background: none;
    border: 0;
    padding: 0;
    margin: 0;
    color: #ff6aa0;
    font-family: inherit;
    font-size: inherit;
    font-weight: 800;
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
    white-space: nowrap;
}
.bte-preview-notice__link:hover,
.bte-preview-notice__link:focus { color: #fff; outline: none; }
.bte-preview-notice__close {
    flex: none;
    border: none;
    background: transparent;
    color: rgba(255, 255, 255, 0.6);
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    padding: 0 2px;
}
.bte-preview-notice__close:hover { color: #fff; }
@media (max-width: 880px) {
    .bte-preview-notice { bottom: 160px; }
}

/* "Current Playlist" — the active playlist shown larger above Recent Playlists. */
.bte-user-panel__current {
    margin-top: 16px;
    margin-bottom: 20px;
}
.bte-user-panel__current-card {
    margin-top: 6px;
}
/* The current card spans the full sidebar width (vs. the 2-up recent grid),
   so it naturally reads larger. */
.bte-pl-card--current .bte-pl-card__art {
    border-radius: 12px;
    outline: 2px solid rgba(217, 47, 112, 0.55);
    outline-offset: -2px;
}
.bte-pl-card--current .bte-pl-card__name {
    color: #ffffff;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.2;
}
.bte-pl-card--current .bte-pl-card__badge {
    height: 22px;
    min-width: 22px;
    font-size: 12px;
    bottom: 8px;
    right: 8px;
}
/* When the current block is shown, the recent grid sits just beneath it. */
.bte-user-panel__recent-section { margin-top: 4px; }

/* Playlist drawer pin button — matches the signature .bte-sig-plh__btn.is-on
   tint (subtle pink fill + accent border) when the active playlist is pinned. */
.bte-playlist-selector__btn--pin svg { display: block; }
.bte-playlist-selector__btn--pin.is-pinned {
    background: rgba(232, 10, 104, 0.18);
    border-color: #e80a68;
    color: #ffffff;
}
.bte-playlist-selector__btn--pin.is-pinned:hover {
    background: rgba(232, 10, 104, 0.28);
    border-color: #e80a68;
}

/* ==========================================================================
   Cover-art controls — Play + YouTube + TikTok pinned to the cover.
   Used on every Master Recording card (carousel + expanded grid) across
   Latest Releases, Now Trending, and Filtered Selections. The three controls
   share one centered row at the bottom of the cover, revealed together on
   hover/focus/while-playing. The in-body "Video:" row is dropped (handled in
   card-version.php). All three are identical #e80a68 pink circles with black
   glyphs: YouTube/TikTok use their own inline SVGs here (overriding the body's
   PNG icons) so the circles fill the full 54px and match the Play button exactly.
   ========================================================================== */

.bte-version-card__cover-actions {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 14px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 6px;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 160ms ease, transform 160ms ease;
    pointer-events: none;
    z-index: 4;
}

.bte-version-card:hover .bte-version-card__cover-actions,
.bte-version-card:focus-within .bte-version-card__cover-actions,
.bte-version-card.is-playing .bte-version-card__cover-actions {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

/* Play button joins the centered row instead of sitting bottom-right. */
.bte-version-card__cover-actions .bte-version-card__cover-play {
    position: static;
    inset: auto;
    bottom: auto;
    right: auto;
    width: 48px !important;
    height: 48px !important;
    opacity: 1;
    transform: none;
    flex: 0 0 auto;
}

/* YouTube / TikTok: reveal the inline SVG (the body PNGs are hidden/forced to
   26px by the earlier "FINAL override" block — beat it with higher specificity
   + !important), size to match the Play button, and drop the PNG background. */
.bte-version-card__cover-actions .bte-version-card__cover-vid {
    width: 48px !important;
    height: 48px !important;
    opacity: 1 !important;
    background-image: none !important;
    background-color: transparent !important;
    border: 0 !important;
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.38) !important;
    border-radius: 999px;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    overflow: hidden;
    transform: none !important;
}

.bte-version-card__cover-actions .bte-version-card__cover-vid svg {
    display: block !important;
    width: 100%;
    height: 100%;
}

/* Brighten the circle on hover, matching the Play button's hover (#ff4f93). */
.bte-version-card__cover-actions .bte-version-card__cover-vid:hover .bte-cv-bg,
.bte-version-card__cover-actions .bte-version-card__cover-vid:focus .bte-cv-bg {
    fill: #ff4f93;
}

/* No-audio cards: the badge floats to the TOP so the buttons own the bottom. */
.bte-version-card__no-audio {
    top: 14px;
    bottom: auto;
}

/* ==========================================================================
   Per-song cover wash — applied ONLY to cover art that repeats within a
   section (see bte_music_catalogue_duplicate_cover_set in frontend-functions).
   The hue is deterministic per song (bte_music_catalogue_cover_wash_hue,
   full-spectrum), so duplicate-cover cards diverge strongly. An EVEN (no
   gradient) `color` blend keeps the photo's light/dark detail while swapping
   in the hue, giving a bold, uniform tint that's still readable. Placed in
   source right after the cover image, so it sits above the photo but below the
   play/video controls, badges, and spotlight scrim/veil.

   Tuning knobs: the `0.62` alpha = wash strength; `70%` = saturation.
   ========================================================================== */

/* Contain the blend so it only affects the cover photo, not the page behind. */
.bte-version-card__art {
    isolation: isolate;
}

.bte-cover-wash {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: hsla(var(--bte-wash-hue, 320), 90%, 20%, 0.35);
    mix-blend-mode: color;
}

/* ==========================================================================
   Cover wash — Phase 2 surfaces. The same .bte-cover-wash span (above) is also
   injected by frontend.js into the list view, the sidebar Recently Played
   minis, the player drawer queue, and the playlist quad mosaics. Each of those
   containers is already positioned + clipped (overflow:hidden); they just need
   an isolated stacking context so the `color` blend stays inside the thumbnail.
   ========================================================================== */
.bte-list-row__thumb-wrap,
.bte-recent-mini__art,
.bte-playlist-item__cover,
.bte-pl-mosaic--quad .bte-pl-tile {
    isolation: isolate;
}

/* Quad-mosaic tiles now wrap each cover so a per-song wash can sit over it.
   The tile fills its grid cell; the image fills the tile. */
.bte-pl-mosaic--quad .bte-pl-tile {
    position: relative;
    overflow: hidden;
    min-width: 0;
    min-height: 0;
}
.bte-pl-mosaic--quad .bte-pl-tile img {
    display: block;
    height: 100%;
    width: 100%;
    object-fit: cover;
}

/* ==========================================================================
   Exclude-lyrics toggle (search caption row)
   Placed last so it wins the cascade over the DESIGN REFRESH filter-field
   label/input rules above. The toggle sits on the same line as the SEARCH
   caption so the search cell stays caption-height and the bottom-aligned
   dropdowns beside it don't shift.
   ========================================================================== */
.bte-catalogue__filter-form--inline .bte-catalogue__search-head {
    align-items: center;
    display: flex;
    gap: 15px;
    justify-content: flex-start;
    margin: 0;
    min-height: 12px;
}

.bte-catalogue__filter-form--inline .bte-catalogue__search-head .bte-catalogue__exclude-lyrics {
    align-items: center !important;
    color: #a9a9a9 !important;
    cursor: pointer;
    display: inline-flex !important;
    font-size: 10px !important;
    font-weight: 400 !important;
    gap: 5px !important;
    letter-spacing: normal !important;
    line-height: 1.2 !important;
    margin: 0 !important;
    min-height: 0 !important;
    text-transform: none !important;
    white-space: nowrap !important;
}

.bte-catalogue__filter-form--inline .bte-catalogue__search-head .bte-catalogue__exclude-lyrics input[type="checkbox"] {
    accent-color: #e80a68;
    -webkit-appearance: auto !important;
    appearance: auto !important;
    align-self: auto !important;
    background: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    flex: 0 0 auto !important;
    height: 14px !important;
    margin: 0 !important;
    min-height: 0 !important;
    padding: 0 !important;
    width: 14px !important;
}

/* ==========================================================================
   Mobile refinements — 2026-06-08
   Appended last so these win over the earlier (tangled) responsive rules at
   phone widths without disturbing the desktop layout.

   1. Filter bar: stack to a single column on phones. A later
      `@media (max-width: 1280px)` rule had been re-asserting a multi-column
      grid at every width <= 1280, which silently cancelled the original
      single-column intent and caused horizontal overflow on phones.

   2. Persistent player: on phones, drop the big prev/next arrows (and the
      desktop-only timeline/volume), give the now-playing title the freed
      space, and shrink the existing play circle into a small control placed
      just to the left of the Lyrics button. Reuses the existing play button
      (already wired to play/pause and its icon-state), so no markup/JS change.
   ========================================================================== */

/* ---- 1. Filter bar: single column on phones ---- */
@media (max-width: 640px) {
    .bte-catalogue__filter-form--inline {
        grid-template-columns: 1fr;
    }

    .bte-catalogue__filter-form--inline .bte-catalogue__filter-submit,
    .bte-catalogue__filter-form--inline .bte-catalogue__filter-reset--btn,
    .bte-catalogue__filter-form--inline .bte-catalogue__filter-reset {
        width: 100%;
    }
}

/* ---- 2. Persistent player: compact mobile layout ---- */

/* The player's <audio> element has no controls and is driven entirely by JS, so
   it must never occupy a layout cell. As a direct child of the .bte-player__inner
   grid it was claiming a grid track (default order:0, ahead of the cover/title/
   play/actions cells), which pushed the play control onto its own row on narrow
   screens. Hiding it removes it from grid auto-placement without affecting
   playback. */
.bte-player audio[data-bte-audio] {
    display: none;
}

@media (max-width: 640px) {
    /* Columns: cover | title (flex) | small play | action buttons */
    .bte-player__inner {
        grid-template-columns: auto minmax(0, 1fr) auto auto;
        gap: 8px;
    }

    /* Drop the large arrows and the desktop timeline/volume. */
    .bte-player__control[data-bte-prev],
    .bte-player__control[data-bte-next],
    .bte-player__timeline,
    .bte-player__volume {
        display: none;
    }

    /* Re-order surviving cells so the play control sits immediately before the
       action buttons (i.e. just left of the Lyrics button). */
    .bte-player__cover   { order: 1; height: 44px; width: 44px; }
    .bte-player__meta    { order: 2; }
    .bte-player__control--primary.bte-play-circle { order: 3; }
    .bte-player__actions { order: 4; }

    /* Shrink the play circle into a small control that sits with the action row. */
    .bte-player__control--primary.bte-play-circle {
        height: 30px;
        width: 30px;
        box-shadow: 0 6px 16px rgba(232, 10, 104, 0.30);
    }
    .bte-player__control--primary.bte-play-circle span::before {
        font-size: 12px;
        margin-left: 2px;
    }
    .bte-player__control--primary.bte-play-circle.is-playing span::before {
        font-size: 11px;
        letter-spacing: 0;
        margin-left: 0;
    }
}

/* ---- 3. Latest Releases "Show all" grid: responsive columns ----
   `.bte-catalogue__grid--new-releases` is pinned to 5 columns at every width,
   which overrides the responsive base grid and cramps cards on phones/tablets.
   Step it down so cards stay readable. (Appended last to win the cascade.) */
@media (max-width: 980px) {
    .bte-catalogue__grid--new-releases {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}
@media (max-width: 600px) {
    .bte-catalogue__grid--new-releases {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* ---- 4. List views on phones: cover + title + buttons only ----
   The earlier responsive rules hid the *header* credit labels but left the
   actual Lyrics By / Music By / Performed By row cells in place, so with fewer
   grid columns they wrapped onto extra lines. Hide those cells outright on
   phones and collapse the grid to: cover | title | action buttons. */
@media (max-width: 640px) {
    .bte-list-row,
    .bte-list-header {
        grid-template-columns: 44px minmax(0, 1fr) auto;
    }

    .bte-list-row__cell,
    .bte-list-header__cell:nth-child(3),
    .bte-list-header__cell:nth-child(4),
    .bte-list-header__cell:nth-child(5) {
        display: none;
    }
}

/* ── Related Tracks ─────────────────────────────────────────────────────────
   The Related drawer reuses the .bte-playlist-drawer shell (same slide-in,
   header, and row styling). These are the only Related-specific touches. */
.bte-related-vt {
    opacity: 0.55;
    font-weight: 400;
}
.bte-related-drawer .bte-playlist-item__actions {
    margin-left: auto;
}
.bte-related-loading .bte-playlist-item__meta strong {
    opacity: 0.55;
}

/* ==========================================================================
   Related Tracks — 2026-06-09 revision pass
   Card-button overflow fix (#1/#2), and the Related drawer reworked into a
   bottom rail that rises above the persistent player. Spotlight/small-card/
   list-view link styles (#1–#3) are preserved; the old right-side drawer +
   single-track player mode (#8) are removed. Appended last to win the cascade.
   ========================================================================== */

/* ── #1  Spotlight (big card) Related button ──────────────────────────────
   Force it onto its own row (the break span) so it anchors bottom-left, then
   give it the subtle gray pill-square look with a brand-pink hover. */
.bte-spotlight-card__btn-break {
    flex-basis: 100%;
    height: 0;
    margin: 0;
    padding: 0;
}
.bte-spotlight-card__btn.bte-spotlight-card__btn--related {
    align-self: flex-start;
    background: rgba(140, 140, 140, 0.26);
    border-radius: 10px;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
    color: #fff;
}
.bte-spotlight-card__btn.bte-spotlight-card__btn--related:hover,
.bte-spotlight-card__btn.bte-spotlight-card__btn--related:focus {
    background: #d92f70;
    box-shadow: inset 0 0 0 1px #d92f70;
    transform: translateY(-1px);
}

/* ── #2  Small-card "Related Tracks" text link ────────────────────────────
   Sits under the Performed By credits as a quiet pink link. */
.bte-version-card__related-link {
    align-items: center;
    background: none;
    border: 0;
    color: #ff5e9d;
    cursor: pointer;
    display: inline-flex;
    font: inherit;
    font-size: 12px;
    font-weight: 700;
    gap: 6px;
    letter-spacing: 0.06em;
    margin: 2px 0 0;
    padding: 2px 0;
    text-transform: uppercase;
    transition: color 150ms ease;
    white-space: nowrap;
}
.bte-version-card__related-link:hover,
.bte-version-card__related-link:focus {
    color: #fff;
    outline: none;
}
.bte-version-card__related-link-icon {
    flex: none;
    height: 15px;
    width: 15px;
}

/* Card-body grid fix. The related link previously auto-placed into a single
   column, inflating it and stretching "+ Playlist" so "Lyrics" ran off-card.
   Here every stacked element spans the full width (so nothing inflates a
   column), media + buttons are pinned to the last rows, and the 1fr spacer
   keeps the footer at the bottom. Buttons stay compact, side-by-side, left. */
.bte-version-card__body {
    grid-template-columns: auto auto minmax(0, 1fr) !important;
    grid-template-rows: auto auto auto auto minmax(0, 1fr) auto auto !important;
}
.bte-version-card__title        { grid-column: 1 / -1 !important; grid-row: 1 !important; }
.bte-version-card__credits      { grid-column: 1 / -1 !important; grid-row: 2 !important; }
.bte-version-card__plays        { grid-column: 1 / -1 !important; grid-row: 3 !important; align-self: start !important; }
.bte-version-card__related-link {
    grid-column: 1 / -1 !important;
    grid-row: 4 !important;
    align-self: start !important;
    justify-self: start !important;
    max-width: 100% !important;
}
.bte-version-card__comment      { grid-column: 1 / -1 !important; grid-row: 5 !important; align-self: start !important; }
.bte-version-card__panel-media  { grid-column: 1 / -1 !important; grid-row: 6 !important; }
.bte-version-card__panel-btn    { grid-row: 7 !important; justify-self: start !important; }
.bte-version-card__panel-btn--playlist { grid-column: 1 !important; }

/* ── #3  List-view Related button ─────────────────────────────────────────*/
.bte-list-row__action-btn--related:hover,
.bte-list-row__action-btn--related:focus {
    background: rgba(217, 47, 112, 0.22);
    border-color: rgba(217, 47, 112, 0.55);
    color: #ff5e9d;
}

/* ── Related Tracks — bottom rail drawer ──────────────────────────────────
   Fixed to the bottom edge, slides up when open, and bumps above the player
   (--bte-related-offset, set in JS) whenever a track is playing. No backdrop:
   the page stays interactive so you can keep browsing while it's open. */
.bte-related-drawer {
    --bte-related-offset: 0px;
    background: rgba(14, 14, 16, 0.98);
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    bottom: 0;
    left: 0;
    padding: 14px 0 18px;
    pointer-events: none;
    position: fixed;
    right: 0;
    transform: translateY(120%);
    transition: transform 280ms ease, bottom 200ms ease;
    z-index: 9990;
}
/* Centered content block (#1/#2): both the header row and the rail are
   centered in the drawer, so they hold the same position for short or long
   sets of tracks. */
.bte-related-drawer__inner {
    margin: 0 auto;
    max-width: min(1180px, calc(100vw - 36px));
    position: relative;
}
.bte-related-drawer.is-open {
    box-shadow: 0 -22px 70px rgba(0, 0, 0, 0.82);
    pointer-events: auto;
    transform: translateY(0);
}
.bte-related-drawer.is-above-player {
    bottom: var(--bte-related-offset, 0px);
}
.bte-related-drawer__bar {
    align-items: flex-end;
    display: flex;
    flex-wrap: wrap;
    gap: 22px;
    justify-content: space-between;
    margin: 0 auto 12px;
    max-width: 900px;
    width: 100%;
}
.bte-related-drawer__heading {
    display: flex;
    flex-direction: column;
    gap: 3px;
    max-width: min(560px, 62vw);
    min-width: 0;
}
.bte-related-drawer__eyebrow {
    color: #ff2d7e;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}
.bte-related-drawer__sub {
    color: #c9c9c9;
    font-size: 13px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.bte-related-drawer__sub strong {
    color: #fff;
    font-weight: 700;
}
.bte-related-drawer__tools {
    align-items: center;
    display: flex;
    flex: none;
    gap: 10px;
}
.bte-related-drawer__close {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 8px;
    color: #fff;
    cursor: pointer;
    font: inherit;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.12em;
    padding: 9px 14px;
    text-transform: uppercase;
    transition: background 150ms ease, border-color 150ms ease;
}
.bte-related-drawer__close:hover,
.bte-related-drawer__close:focus {
    background: rgba(255, 255, 255, 0.16);
    outline: none;
}
.bte-related-add-all {
    background: #e80a68;
    border: 0;
    border-radius: 8px;
    color: #fff;
    cursor: pointer;
    font: inherit;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.08em;
    padding: 9px 16px;
    text-transform: uppercase;
    transition: background 150ms ease, transform 150ms ease;
    white-space: nowrap;
}
.bte-related-add-all:hover,
.bte-related-add-all:focus {
    background: #ff3b83;
    outline: none;
    transform: translateY(-1px);
}
.bte-related-drawer__empty {
    color: #cfcfcf;
    padding: 18px 2px 8px;
}

/* Horizontal cover-art rail */
/* Arrow-driven horizontal rail (#5): scrollbar hidden, arrows over the covers. */
.bte-related-rail-wrap {
    position: relative;
}
.bte-related-rail-wrap .bte-rail-arrow {
    top: 58px;
    transform: translateY(-50%);
}
.bte-related-rail-wrap .bte-rail-arrow:hover,
.bte-related-rail-wrap .bte-rail-arrow:focus {
    transform: translateY(-50%) scale(1.04);
}
.bte-related-rail {
    -webkit-overflow-scrolling: touch;
    display: flex;
    gap: 16px;
    justify-content: center;
    justify-content: safe center;
    overflow-x: auto;
    overflow-y: hidden;
    padding-bottom: 6px;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.bte-related-rail::-webkit-scrollbar { display: none; height: 0; width: 0; }
.bte-related-loading {
    color: #cfcfcf;
    padding: 16px 2px;
}

.bte-related-railtile {
    display: flex;
    flex: none;
    flex-direction: column;
    gap: 8px;
    width: 132px;
}
.bte-related-railtile__art {
    width: 100%;
}
/* isolate so the per-song colour wash blends onto the cover only */
.bte-related-railtile__art-inner {
    aspect-ratio: 1 / 1;
    background: #222;
    border-radius: 12px;
    display: block;
    isolation: isolate;
    overflow: hidden;
    position: relative;
    width: 100%;
}
.bte-related-railtile__art-inner img {
    display: block;
    height: 100%;
    object-fit: cover;
    width: 100%;
}
.bte-related-railtile__placeholder {
    align-items: center;
    color: rgba(255, 255, 255, 0.45);
    display: flex;
    font-size: 30px;
    height: 100%;
    justify-content: center;
    width: 100%;
}
/* Rollover overlay with the play + add buttons */
.bte-related-railtile__overlay {
    align-items: center;
    background: rgba(0, 0, 0, 0.46);
    display: flex;
    gap: 10px;
    inset: 0;
    justify-content: center;
    opacity: 0;
    position: absolute;
    transition: opacity 160ms ease;
    z-index: 2;
}
.bte-related-railtile__art-inner:hover .bte-related-railtile__overlay,
.bte-related-railtile__art-inner:focus-within .bte-related-railtile__overlay {
    opacity: 1;
}
.bte-related-railtile__play {
    align-items: center;
    background: #fff;
    border: 0;
    border-radius: 999px;
    color: #111;
    cursor: pointer;
    display: inline-flex;
    height: 40px;
    justify-content: center;
    padding: 0;
    transition: transform 150ms ease;
    width: 40px;
}
.bte-related-railtile__play svg {
    display: block;
    margin-left: 2px; /* optical centering of the right-pointing triangle */
}
.bte-related-railtile__play:hover,
.bte-related-railtile__play:focus {
    outline: none;
    transform: scale(1.06);
}
/* Add button reuses the circular pink "+" (kept icon-only by syncPlaylistButtons) */
.bte-related-tile__add {
    align-items: center;
    background: rgba(232, 10, 104, 0.18);
    border: 1px solid rgba(232, 10, 104, 0.7);
    border-radius: 999px;
    color: #ff6aa6;
    cursor: pointer;
    display: inline-flex;
    flex: none;
    height: 40px;
    justify-content: center;
    transition: background 150ms ease, color 150ms ease, transform 150ms ease;
    width: 40px;
}
.bte-related-tile__add svg { height: 18px; width: 18px; }
.bte-related-tile__add:hover,
.bte-related-tile__add:focus,
.bte-related-tile__add.is-added {
    background: #e80a68;
    color: #fff;
    outline: none;
}
.bte-related-railtile[data-no-audio] .bte-related-railtile__art-inner { opacity: 0.72; }

.bte-related-railtile__title {
    color: #fff;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.25;
    overflow: hidden;
}
.bte-related-vt { color: #9a9a9a; font-weight: 400; }

/* #5 — Full-width dark scrim behind the persistent player so page content
   scrolling underneath is obscured. Sits below the player (9999) and the
   related drawer (9990) but above the page. Fades in once a track is active. */
.bte-player-scrim {
    background: linear-gradient(to top, rgba(0, 0, 0, 0.94) 0%, rgba(0, 0, 0, 0.84) 42%, rgba(0, 0, 0, 0) 100%);
    bottom: 0;
    height: 170px;
    left: 0;
    opacity: 0;
    pointer-events: none;
    position: fixed;
    right: 0;
    transition: opacity 220ms ease;
    z-index: 9980;
}
.bte-player.is-active + .bte-player-scrim {
    opacity: 1;
}

@media (max-width: 640px) {
    .bte-related-railtile { width: 116px; }
    .bte-related-drawer__sub { display: none; }
    .bte-related-rail-wrap .bte-rail-arrow { top: 50px; }

    /* #8 — Persistent player on mobile. Use FLEXBOX with no wrapping rather than
       a grid: a one-line flex row physically cannot drop the play control onto a
       second row, no matter what sibling cells are present. Layout, left→right:
       title (grows) | play | action buttons. Everything else is removed from the
       row. This deliberately overrides every earlier player grid rule. */
    .bte-player__inner {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        gap: 8px !important;
    }
    .bte-player__meta {
        order: 1 !important;
        flex: 1 1 auto !important;
        min-width: 0 !important;
    }
    .bte-player__control--primary.bte-play-circle {
        order: 2 !important;
        flex: 0 0 auto !important;
        margin: 0 !important;
    }
    .bte-player__actions {
        order: 3 !important;
        flex: 0 0 auto !important;
        flex-wrap: nowrap !important;
    }
    /* Remove every non-essential element from the player row, including the
       controls-less <audio> element, which would otherwise sit in the flow as an
       empty inline box. */
    .bte-player__cover,
    .bte-player__control[data-bte-prev],
    .bte-player__control[data-bte-next],
    .bte-player__timeline,
    .bte-player__volume,
    .bte-player__playlist-button {
        display: none !important;
    }
    .bte-player audio[data-bte-audio] {
        display: none !important;
    }
}

/* =========================================================================
   Access Gate — Sign In / Request Access "screen" + page blur
   Ported from the Signature Access Portal so the gated catalogue looks and
   behaves identically. The screen is a fixed overlay whose backdrop-filter
   blurs the catalogue behind it; .bte-sig-locked stops the page scrolling.
   ========================================================================= */
.bte-sig-screen {
    position: fixed;
    inset: 0;
    z-index: 100000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(0, 0, 0, 0.72);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

html.bte-sig-locked,
body.bte-sig-locked { overflow: hidden !important; }

/* Belt-and-suspenders: blur the catalogue itself while gated, in case a
   browser doesn't honour backdrop-filter on the overlay. */
.bte-catalogue.is-gated .bte-catalogue__shell {
    filter: blur(3px);
    pointer-events: none;
    user-select: none;
}

/* The account modal (Forgot password handoff) must sit above the screen. */
.bte-auth-modal { z-index: 100001; }

/* ---- Request Access / Sign In card (mirrors .bte-auth-modal__*) -------- */
.bte-sig-screen .bte-auth-modal__panel {
    background: #1a1a1a;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 22px;
    box-shadow: 0 32px 80px rgba(0, 0, 0, 0.6);
    box-sizing: border-box;
    font-family: Inter, "Helvetica Neue", Helvetica, Arial, sans-serif;
    max-height: 90vh;
    overflow-y: auto;
    padding: 36px 32px 32px;
    position: relative;
    width: 100%;
    max-width: 420px;
}

.bte-sig-screen .bte-auth-modal__eyebrow {
    color: #e80a68;
    display: block;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 0.18em;
    margin-bottom: 8px;
    text-transform: uppercase;
}

.bte-sig-screen .bte-auth-modal__title {
    color: #ffffff;
    font-size: 26px;
    font-weight: 800;
    letter-spacing: -0.04em;
    line-height: 1.1;
    margin: 0 0 24px;
}

.bte-sig-screen .bte-auth-modal__tabs {
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    gap: 4px;
    margin-bottom: 24px;
}

.bte-sig-screen .bte-auth-modal__tab {
    appearance: none;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    color: #b3b3b3;
    cursor: pointer;
    font-family: Inter, "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.06em;
    margin-bottom: -1px;
    padding: 8px 16px;
    text-transform: uppercase;
    transition: color 140ms ease, border-color 140ms ease;
}

.bte-sig-screen .bte-auth-modal__tab:hover { color: #ffffff; }
.bte-sig-screen .bte-auth-modal__tab.is-active {
    border-bottom-color: #e80a68;
    color: #ffffff;
}

.bte-sig-screen .bte-auth-modal__pane { display: none; }
.bte-sig-screen .bte-auth-modal__pane.is-active { display: block; }

.bte-sig-screen .bte-auth-modal__field { margin-bottom: 16px; }

.bte-sig-screen .bte-auth-modal__label {
    color: #e80a68;
    display: block;
    font-size: 9px;
    font-weight: 900;
    letter-spacing: 0.16em;
    margin-bottom: 6px;
    text-transform: uppercase;
}

.bte-sig-screen .bte-auth-modal__input {
    appearance: none;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 10px;
    box-sizing: border-box;
    color: #ffffff;
    font-family: Inter, "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 14px;
    height: 42px;
    outline: none;
    padding: 0 14px;
    transition: border-color 140ms ease, background 140ms ease;
    width: 100%;
}

.bte-sig-screen .bte-auth-modal__input:focus {
    background: rgba(255, 255, 255, 0.09);
    border-color: #e80a68;
    color: #ffffff;
}

.bte-sig-screen .bte-auth-modal__input:-webkit-autofill,
.bte-sig-screen .bte-auth-modal__input:-webkit-autofill:focus {
    -webkit-text-fill-color: #ffffff;
    -webkit-box-shadow: 0 0 0 1000px #2a2a2a inset;
    transition: background-color 5000s ease-in-out 0s;
}

.bte-sig-screen .bte-auth-modal__input::placeholder { color: rgba(255, 255, 255, 0.3); }

.bte-sig-screen .bte-auth-modal__submit {
    appearance: none;
    background: #9e0043;
    border: none;
    border-radius: 10px;
    color: #ffffff;
    cursor: pointer;
    font-family: Inter, "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 13px;
    font-weight: 800;
    height: 42px;
    letter-spacing: 0.08em;
    margin-top: 8px;
    text-transform: uppercase;
    transition: background 140ms ease;
    width: 100%;
}

.bte-sig-screen .bte-auth-modal__submit:hover { background: #e80a68; }

.bte-sig-screen .bte-auth-modal__footnote-text {
    margin: 12px 0 0;
    font-size: 12px;
    color: #b3b3b3;
    line-height: 1.5;
}
.bte-sig-screen .bte-auth-modal__linkbtn {
    appearance: none;
    background: none;
    border: 0;
    padding: 0;
    color: #e80a68;
    cursor: pointer;
    font: inherit;
    text-decoration: underline;
}

.bte-sig-screen .bte-auth-modal__message {
    margin: 12px 0 0;
    font-size: 13px;
    min-height: 18px;
    display: none;
}
.bte-sig-screen .bte-auth-modal__message.is-visible { display: block; }
.bte-sig-screen .bte-auth-modal__message--error   { color: #ff6b8a; }
.bte-sig-screen .bte-auth-modal__message--success {
    padding: 12px 14px;
    background: rgba(232, 10, 104, 0.12);
    border: 1px solid rgba(232, 10, 104, 0.35);
    border-radius: 10px;
    color: #ffd9e6;
    line-height: 1.5;
}

/* Purpose <select> + "please describe" textarea + post-link notice. */
.bte-sig-screen .bte-auth-modal__select {
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
    padding-right: 38px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%238a8a96' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 12px;
}
.bte-sig-screen .bte-auth-modal__select:invalid { color: rgba(255, 255, 255, 0.4); }
.bte-sig-screen .bte-auth-modal__select option { color: #1a1a1a; }

.bte-sig-screen .bte-auth-modal__textarea {
    height: auto;
    min-height: 86px;
    padding: 11px 14px;
    line-height: 1.5;
    resize: vertical;
    font-family: Inter, "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.bte-sig-screen .bte-auth-modal__field[hidden] { display: none; }

.bte-sig-screen .bte-auth-modal__notice {
    margin: 0 0 20px;
    padding: 12px 14px;
    background: rgba(232, 10, 104, 0.12);
    border: 1px solid rgba(232, 10, 104, 0.35);
    border-radius: 10px;
    color: #ffd9e6!important;
    font-size: 13px;
    line-height: 1.5;
    font-family: Inter, "Helvetica Neue", Helvetica, Arial, sans-serif;
}

/* Password show/hide eye toggle (gate forms). */
.bte-sig-screen .bte-auth-modal__pw { position: relative; }
.bte-sig-screen .bte-auth-modal__pw .bte-auth-modal__input { padding-right: 46px; }
.bte-sig-screen .bte-auth-modal__pw-toggle {
    position: absolute;
    top: 50%;
    right: 8px;
    transform: translateY(-50%);
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: 0;
    padding: 0;
    color: #9a9aa2;
    cursor: pointer;
    border-radius: 8px;
}
.bte-sig-screen .bte-auth-modal__pw-toggle:hover,
.bte-sig-screen .bte-auth-modal__pw-toggle.is-on { color: #e80a68; }
.bte-sig-screen .bte-auth-modal__pw-toggle .bte-pw-eye-off { display: none; }
.bte-sig-screen .bte-auth-modal__pw-toggle.is-on .bte-pw-eye { display: none; }
.bte-sig-screen .bte-auth-modal__pw-toggle.is-on .bte-pw-eye-off { display: inline; }

/* ---- Download buttons (cards + spotlight + player) -------------------- */
/* The button shells reuse existing classes; these only size the icon glyph. */
.bte-version-card__panel-btn--download .bte-panel-icon svg { width: 14px; height: 14px; display: block; }
.bte-spotlight-card__btn--download .bte-spotlight-card__btn-icon svg { width: 16px; height: 16px; display: block; }
.bte-list-row__action-btn--dl svg { width: 16px; height: 16px; display: block; }

/* Belt-and-suspenders: never show the header Sign In / Register trigger while
   the catalogue is gated — the Sign In / Request Access screen is the only
   entry point for logged-out visitors. */
.bte-catalogue.is-gated .bte-auth-trigger { display: none !important; }

.bte-sig-screen .bte-auth-modal__linkbtn[disabled] { opacity: .6; cursor: default; text-decoration: none; }

/* ===========================================================================
   Action-button polish (2026-06) — keep card/spotlight action rows on one line
   and widen the playlist drawer.
   =========================================================================== */

/* Grid card: + Playlist · Lyrics (text) + Download (round icon) on one row. */
.bte-version-card__panel-btn {
    font-size: 9px !important;
    padding-left: 7px !important;
    padding-right: 7px !important;
}
/* Download rendered as a compact round icon button (no text label). */
.bte-version-card__panel-btn--icon {
    padding: 6px !important;
    border-radius: 50% !important;
    aspect-ratio: 1 / 1;
}
/* The icon row is hidden globally on cards (.bte-panel-icon { display:none });
   re-show it for the round download button and size the SVG. */
.bte-version-card__panel-btn--icon .bte-panel-icon {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 14px !important;
    height: 14px !important;
    margin: 0 !important;
}
.bte-version-card__panel-btn--icon .bte-panel-icon svg { width: 14px; height: 14px; display: block; }
/* No divider immediately before the round icon. */
.bte-version-card__panel-btn--icon::before { content: none !important; display: none !important; }

/* Nudge the action row left a touch so it reads centred under the card. */
.bte-version-card__panel-btn { transform: translateX(-6px); }

/* Extra breathing room beneath the "Related Tracks" link. */
.bte-version-card__related-link { margin-bottom: 15px !important; }

/* Player drawer (test page): wider. */
.bte-playlist-drawer__panel {
    width: 500px !important;
    max-width: min(500px, 94vw) !important;
}

/* Spotlight card: Play · Playlist · Lyrics · Download on one line. */
.bte-spotlight-card__buttons { gap: 6px !important; }
.bte-spotlight-card__btn {
    border-radius: 10px !important;
    padding-left: 8px !important;
    padding-right: 8px !important;
    font-size: 12px !important;
}
/* Drop the Related link below the four-button row with clear separation
   (the button group is already bottom-anchored on the card). */
.bte-spotlight-card__btn.bte-spotlight-card__btn--related { margin-top: 16px !important; }
/* Download + Lyrics adopt the (outlined grey) Related-button style. */
.bte-spotlight-card__btn.bte-spotlight-card__btn--download,
.bte-spotlight-card__btn.bte-spotlight-card__btn--lyrics {
    background: rgba(140, 140, 140, 0.26) !important;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12) !important;
    color: #fff !important;
}
.bte-spotlight-card__btn.bte-spotlight-card__btn--download:hover,
.bte-spotlight-card__btn.bte-spotlight-card__btn--download:focus,
.bte-spotlight-card__btn.bte-spotlight-card__btn--lyrics:hover,
.bte-spotlight-card__btn.bte-spotlight-card__btn--lyrics:focus {
    background: #d92f70 !important;
    box-shadow: inset 0 0 0 1px #d92f70 !important;
    transform: translateY(-1px);
}

/* ===========================================================================
   Revision set (2026-06) — #1 Spotlight Download collapses to an icon when the
   action row would wrap; #2 wider filter dropdown panels so counts stay inline.
   =========================================================================== */

/* #1 — Spotlight action-row wrap guard.
   The four-button row (Play, Playlist, Lyrics, Download) sits comfortably on one
   line on wide desktops, but as the square card narrows (the 1461px-and-below
   viewports Jeanne flagged, where each 3-up card is ~330px) the text "Download"
   button wraps to a second line and shoves the Related button off the bottom of
   the card. Below the wrap point, Download drops its text label and becomes a
   compact round icon button (matching the icon-only Download on the small grid
   cards), which keeps the row on one line so Related stays put. The icon span is
   always present in the markup and the button keeps its aria-label, so this is a
   pure visual swap.

   Trigger mechanism: a JS width-watcher (frontend.js) adds the .is-narrow class
   to each spotlight card when its measured width is at/under the 345px wrap
   point, removing it above. This deliberately replaces an earlier CSS container
   query: container queries depend on Safari 16+ AND on WebKit reliably sizing
   the query container, which it does not do dependably for a card carrying
   aspect-ratio + a translateZ(0) layer. The class approach is identical in every
   browser and every Safari version. The card width is non-monotonic with the
   viewport (narrow when 3-up, wide when 2-up, narrow again on phones), so the
   watcher measures the card itself rather than keying off a viewport media
   query, which would wrongly collapse the wide 2-up tablet cards. */
.bte-spotlight-card.is-narrow .bte-spotlight-card__btn.bte-spotlight-card__btn--download {
    /* Collapse Download to a round icon button (matches the small grid cards),
       sized to sit level with the now-shorter Playlist/Lyrics pills. */
    gap: 0 !important;
    padding: 6px !important;
    aspect-ratio: 1 / 1;
    border-radius: 50% !important;
    justify-content: center;
}
/* Hide just the "Download" text label; the icon span stays visible. The
   accessible name is preserved by the button's aria-label. */
.bte-spotlight-card.is-narrow .bte-spotlight-card__btn--download > span:not(.bte-spotlight-card__btn-icon) {
    display: none !important;
}

/* Icon-mode compaction (≈1440px and below): with the row collapsed, recover a
   little vertical space so the Related button clears the bottom edge.
   (1) Shave a touch of height off the Playlist, Lyrics and Related pills. */
.bte-spotlight-card.is-narrow .bte-spotlight-card__btn.bte-spotlight-card__btn--playlist,
.bte-spotlight-card.is-narrow .bte-spotlight-card__btn.bte-spotlight-card__btn--lyrics,
.bte-spotlight-card.is-narrow .bte-spotlight-card__btn.bte-spotlight-card__btn--related {
    padding-top: 6px !important;
    padding-bottom: 6px !important;
}
/* (2) Close up the gap above the Related button (half of the 16px default). */
.bte-spotlight-card.is-narrow .bte-spotlight-card__btn.bte-spotlight-card__btn--related {
    margin-top: 8px !important;
}
/* (3) Bring the round Play and Download icons down slightly, in proportion. */
.bte-spotlight-card.is-narrow .bte-spotlight-card__play {
    width: 34px !important;
    height: 34px !important;
}

/* #2 — Filter multiselect dropdowns (Catalogue, Genre, Writer, Performing
   Artist) a touch wider so a long option name plus its result count sit on the
   same line instead of the count dropping below. The panel may now grow past
   its trigger's width (min-width wins over the width:100% match), and the option
   row is pinned to a single line as a guarantee. */
.bte-genre-multi__dropdown {
    min-width: 280px;
}
.bte-genre-multi__option {
    flex-wrap: nowrap !important;
}

/* On-demand lyrics: brief placeholder while a track's lyrics are fetched. */
.bte-lyrics-drawer__loading {
    opacity: 0.55;
    font-style: italic;
    text-align: center;
    padding: 24px 0;
}

/* My Library — courtesy "Loading your playlists" row shown while the sidebar
   playlists are fetched on page load. */
.bte-user-panel__playlists-loading {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 2px 4px;
    font-size: 13px;
    opacity: 0.75;
}
.bte-user-panel__playlists-loading[hidden] {
    display: none !important;
}
.bte-user-panel__spinner {
    flex: none;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.22);
    border-top-color: rgba(217, 47, 112, 0.95);
    animation: bte-library-spin 0.7s linear infinite;
}
@keyframes bte-library-spin {
    to { transform: rotate(360deg); }
}

/* ==========================================================================
   Unified filter bar — flex layout so toggleable facets reflow to fill.
   (Overrides the earlier CSS-grid layout: under flex, the grid-template-columns
   rules above simply become inert.) 2026-06
   ========================================================================== */
.bte-catalogue__filter-form--inline {
    display: flex !important;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 10px;
}

/* Hidden facets must collapse fully so the rest grow to fill. The [hidden]
   attribute needs an explicit !important here (theme resets can re-show it). */
.bte-catalogue__filter-form--inline .bte-catalogue__filter-field[hidden] {
    display: none !important;
}

.bte-catalogue__filter-form--inline > .bte-catalogue__filter-field {
    flex: 1 1 150px;
    min-width: 0;
}
.bte-catalogue__filter-form--inline > .bte-catalogue__filter-field--search {
    flex: 2 1 220px;
}
.bte-catalogue__filter-form--inline > .bte-catalogue__filter-field--sort {
    flex: 1 1 130px;
}
.bte-catalogue__filter-form--inline > .bte-catalogue__filter-field--facet {
    flex: 1 1 150px;
}
.bte-catalogue__filter-form--inline > .bte-catalogue__filter-field--more,
.bte-catalogue__filter-form--inline > .bte-catalogue__filter-field--reset-wrap {
    flex: 0 0 auto;
}

/* "More Filters" button — matches the muted Reset pill until hovered. */
.bte-catalogue__filter-field--more {
    position: relative;
}
.bte-catalogue__more-filters {
    appearance: none;
    align-items: center;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 12px;
    color: #d9d9d9;
    cursor: pointer;
    display: inline-flex;
    font-size: 11px;
    font-weight: 900;
    justify-content: center;
    letter-spacing: 0.08em;
    min-height: 38px;
    padding: 6px 15px;
    text-transform: uppercase;
    white-space: nowrap;
    transition: background 150ms ease, border-color 150ms ease, color 150ms ease;
}
.bte-catalogue__more-filters:hover,
.bte-catalogue__more-filters:focus,
.bte-catalogue__more-filters[aria-expanded="true"] {
    background: #e80a68;
    border-color: #e80a68;
    color: #050505;
    outline: none;
}

/* The dropdown panel of facet checkboxes. */
.bte-catalogue__more-panel {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    z-index: 40;
    min-width: 190px;
    background: #1b1b1f;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 12px;
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.45);
    padding: 8px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.bte-catalogue__more-panel[hidden] {
    display: none !important;
}
.bte-catalogue__more-option {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 8px 10px;
    border-radius: 8px;
    color: #eaeaea;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background 130ms ease;
}
.bte-catalogue__more-option:hover {
    background: rgba(255, 255, 255, 0.07);
}
.bte-catalogue__more-option input[type="checkbox"] {
    width: 16px;
    height: 16px;
    min-height: 0 !important;
    accent-color: #e80a68;
    margin: 0;
    cursor: pointer;
}

@media (max-width: 860px) {
    .bte-catalogue__filter-form--inline > .bte-catalogue__filter-field,
    .bte-catalogue__filter-form--inline > .bte-catalogue__filter-field--search,
    .bte-catalogue__filter-form--inline > .bte-catalogue__filter-field--sort,
    .bte-catalogue__filter-form--inline > .bte-catalogue__filter-field--facet {
        flex: 1 1 100%;
    }
    .bte-catalogue__more-panel {
        right: auto;
        left: 0;
    }
}

/* ==========================================================================
   Filter bar polish — truncation, anti-overlap, visible "More Filters" checks
   2026-06
   ========================================================================== */

/* Long facet labels truncate instead of widening the pill
   (e.g. "Lisa Dawn Miller Catalogue" -> "Lisa Dawn Mi…"). */
.bte-genre-multi { min-width: 0; }
.bte-genre-multi__label {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.bte-genre-multi__arrow { flex: 0 0 auto; }

/* Let facet fields shrink + wrap cleanly so added dropdowns never overlap. */
.bte-catalogue__filter-form--inline > .bte-catalogue__filter-field--facet {
    flex: 1 1 150px;
    min-width: 0;
    max-width: 240px;
}

/* "More Filters" panel — readable labels, no wrapping. */
.bte-catalogue__more-panel { min-width: 210px; }
.bte-catalogue__more-option { white-space: nowrap; }
.bte-catalogue__more-option span {
    color: #eaeaea !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    letter-spacing: normal !important;
    text-transform: none !important;
    white-space: nowrap;
    line-height: 1.2;
}

/* Custom checkbox so the selected state is unmistakable (themes often strip
   native checkbox rendering, which is why the boxes looked empty). */
.bte-catalogue__more-option input[type="checkbox"] {
    appearance: none !important;
    -webkit-appearance: none !important;
    width: 18px !important;
    height: 18px !important;
    min-height: 0 !important;
    flex: 0 0 auto;
    margin: 0 !important;
    padding: 0 !important;
    border: 1.5px solid rgba(255, 255, 255, 0.4) !important;
    border-radius: 5px !important;
    background: rgba(255, 255, 255, 0.05) !important;
    box-shadow: none !important;
    cursor: pointer;
    position: relative;
}
.bte-catalogue__more-option input[type="checkbox"]:checked {
    background: #e80a68 !important;
    border-color: #e80a68 !important;
}
.bte-catalogue__more-option input[type="checkbox"]:checked::after {
    content: "";
    position: absolute;
    left: 5px;
    top: 2px;
    width: 5px;
    height: 9px;
    border: solid #ffffff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

/* ==========================================================================
   Filter bar v2 — buttons on a top-right row, all filters on one row below
   2026-06
   ========================================================================== */

/* Form becomes two stacked rows: toolbar (buttons) then the field row. */
.bte-catalogue__filter-form--inline {
    display: flex !important;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 12px;
}

/* Top row: Set Filters + Reset, matched pills, aligned right. */
.bte-catalogue__filter-toolbar {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 10px;
}
.bte-catalogue__filter-more { position: relative; }

/* All filters on a single row. */
.bte-catalogue__filter-fields {
    display: flex;
    flex-wrap: nowrap;
    align-items: flex-end;
    gap: 10px;
}
.bte-catalogue__filter-fields .bte-catalogue__filter-field[hidden] { display: none !important; }
.bte-catalogue__filter-fields > .bte-catalogue__filter-field {
    flex: 1 1 130px;
    min-width: 0;
}
.bte-catalogue__filter-fields > .bte-catalogue__filter-field--search {
    flex: 2 1 200px;
}
.bte-catalogue__filter-fields > .bte-catalogue__filter-field--facet {
    flex: 1 1 130px;
    min-width: 0;
    max-width: 230px;
}
.bte-catalogue__filter-fields > .bte-catalogue__filter-field--sort {
    flex: 1 1 120px;
    max-width: 160px;
}

/* Matched buttons — Set Filters and Reset share one solid-pink pill style. */
.bte-catalogue__more-filters,
a.bte-catalogue__more-filters {
    appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #e80a68 !important;
    border: 1px solid #e80a68 !important;
    border-radius: 12px !important;
    color: #ffffff !important;
    cursor: pointer;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 0.08em;
    line-height: 1;
    min-height: 38px;
    padding: 6px 18px;
    text-decoration: none;
    text-transform: uppercase;
    white-space: nowrap;
    transition: background 150ms ease, border-color 150ms ease, transform 120ms ease;
}
.bte-catalogue__more-filters:hover,
.bte-catalogue__more-filters:focus,
.bte-catalogue__more-filters[aria-expanded="true"] {
    background: #c40a59 !important;
    border-color: #c40a59 !important;
    color: #ffffff !important;
    outline: none;
}

/* Type-to-jump highlight inside an open dropdown. */
.bte-genre-multi__option.is-typeahead {
    background: rgba(232, 10, 104, 0.22);
    box-shadow: inset 0 0 0 1px rgba(232, 10, 104, 0.5);
}

/* Responsive: wrap the filter row on mid widths, stack on small screens. */
@media (max-width: 1200px) {
    .bte-catalogue__filter-fields { flex-wrap: wrap; }
}
@media (max-width: 860px) {
    .bte-catalogue__filter-fields > .bte-catalogue__filter-field,
    .bte-catalogue__filter-fields > .bte-catalogue__filter-field--search,
    .bte-catalogue__filter-fields > .bte-catalogue__filter-field--facet,
    .bte-catalogue__filter-fields > .bte-catalogue__filter-field--sort {
        flex: 1 1 100%;
        max-width: none;
    }
    .bte-catalogue__more-panel { right: 0; left: auto; }
}

/* ==========================================================================
   Filter bar — stretch rows full-width; shown filters fill the bar evenly.
   (Overrides an earlier `align-items: end !important` that pinned the column
   rows to the right at content width.) 2026-06
   ========================================================================== */
.bte-catalogue__topbar--filters .bte-catalogue__filter-form--inline {
    align-items: stretch !important;
}

/* Field row fills the full width; shown filters grow proportionally to fill it. */
.bte-catalogue__filter-fields > .bte-catalogue__filter-field {
    flex: 1.3 1 0 !important;
    min-width: 120px;
    max-width: none !important;
}
.bte-catalogue__filter-fields > .bte-catalogue__filter-field--search {
    flex: 2 1 0 !important;
    min-width: 180px;
    max-width: none !important;
}
.bte-catalogue__filter-fields > .bte-catalogue__filter-field--facet {
    flex: 1.3 1 0 !important;
    min-width: 120px;
    max-width: none !important;
}
.bte-catalogue__filter-fields > .bte-catalogue__filter-field--sort {
    flex: 1 1 0 !important;
    min-width: 110px;
    max-width: none !important;
}

@media (max-width: 1200px) {
    .bte-catalogue__filter-fields > .bte-catalogue__filter-field { min-width: 150px; }
}

/* ==========================================================================
   Sort removed → stacked Set Filters + Reset buttons live in its slot.
   2026-06
   ========================================================================== */

/* Shorter buttons per spec. */
.bte-catalogue__more-filters,
a.bte-catalogue__more-filters {
    min-height: 28px !important;
    padding: 6px 10px !important;
    border-radius: 7px !important;
}

/* The button slot: stack the two buttons, fit content, sit at the row's end. */
.bte-catalogue__filter-fields > .bte-catalogue__filter-buttons {
    flex: 0 0 auto !important;
    min-width: 0 !important;
    max-width: none !important;
}
.bte-catalogue__filter-buttons {
    display: flex !important;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-end;
    gap: 8px;
    position: relative;
}
.bte-catalogue__filter-buttons .bte-catalogue__more-filters {
    width: 100%;
}

/* Panel drops below the stacked buttons, right-aligned. */
.bte-catalogue__filter-buttons .bte-catalogue__more-panel {
    top: calc(100% + 6px);
    right: 0;
    left: auto;
}

/* Reset must match Set Filters height — beat the earlier topbar rule that
   forced 10px top/bottom padding on .bte-catalogue__filter-reset--btn. */
.bte-catalogue__filter-buttons a.bte-catalogue__more-filters,
.bte-catalogue__filter-buttons a.bte-catalogue__filter-reset--btn {
    min-height: 28px !important;
    padding: 6px 10px !important;
    padding-top: 6px !important;
    padding-bottom: 6px !important;
    border-radius: 7px !important;
    align-self: stretch !important;
    margin: 0 !important;
}

/* Reset must be EXACTLY the same height as Set Filters. The <a> defaulted to
   content-box, so min-height was adding to padding and ballooning it. Force
   border-box + explicit height on both. 2026-06 */
.bte-catalogue__filter-buttons .bte-catalogue__more-filters,
.bte-catalogue__filter-buttons a.bte-catalogue__more-filters,
.bte-catalogue__filter-buttons a.bte-catalogue__filter-reset--btn {
    box-sizing: border-box !important;
    height: 28px !important;
    min-height: 28px !important;
    padding: 6px 10px !important;
    line-height: 1 !important;
    border-radius: 7px !important;
    align-self: stretch !important;
    margin: 0 !important;
}

/* Version Type shown after a song title, e.g. Believe (Ad Edit). */
.bte-version-type {
    font-weight: 400;
    font-style: italic;
    font-size: 11px;
    opacity: 0.78;
}

/* The stacked buttons are taller than a single dropdown, so bottom-aligning
   left them poking up to the labels. Nudge the stack down to sit centered on
   the dropdown row. (Adjust `top` to taste.) 2026-06 */
.bte-catalogue__filter-fields > .bte-catalogue__filter-buttons {
    position: relative;
    top: 9px;
}
.bte-catalogue__filter-form--inline {
    padding-bottom: 6px;
}

/* ==========================================================================
   Filter bar — reduced, symmetric top/bottom padding. The 9px form padding
   reserves room for the nudged-down button stack so the visual gap stays even
   top and bottom. 2026-06
   ========================================================================== */
.bte-catalogue__topbar--filters {
    padding: 10px 18px;
}
.bte-catalogue__filter-form--inline {
    padding-bottom: 9px;
}

/* ==========================================================================
   Mobile filter bar — Set Filters + Reset as a stable, full-width row. 2026-06
   On narrow widths the field row wraps, and because the button slot was a
   content-width flex item, it shuffled position as facets were shown/hidden
   (bouncing around). Pin it to its own full-width row at the very end of the
   bar, with the two buttons side by side at equal width, so it stays put no
   matter how many filters are visible.
   ========================================================================== */
@media (max-width: 860px) {
    /* Own full-width row at the end of the bar. (0,3,0) beats the field-fill
       rule .bte-catalogue__filter-fields > .bte-catalogue__filter-field.) */
    .bte-catalogue__filter-form--inline .bte-catalogue__filter-fields > .bte-catalogue__filter-buttons {
        flex: 1 1 100% !important;   /* its own full-width row */
        order: 99;                   /* always last, regardless of facet count */
        top: 0 !important;           /* drop the desktop centering nudge */
    }
    /* The container carries the .bte-catalogue__filter-field class, which is
       forced to display:grid !important upstream (that grid auto-flow is what
       stacked the two buttons). Re-assert flex with matching (0,2,0)
       specificity — later in source, so it wins — then lay the buttons in a
       row. The more-panel is position:absolute, so it stays out of this flow. */
    .bte-catalogue__filter-form--inline .bte-catalogue__filter-buttons {
        display: flex !important;
        flex-direction: row !important;  /* side by side instead of stacked */
        align-items: stretch;
        gap: 8px;
    }
    /* Each button fills an equal half of the row. */
    .bte-catalogue__filter-form--inline .bte-catalogue__filter-buttons .bte-catalogue__more-filters,
    .bte-catalogue__filter-form--inline .bte-catalogue__filter-buttons a.bte-catalogue__more-filters,
    .bte-catalogue__filter-form--inline .bte-catalogue__filter-buttons a.bte-catalogue__filter-reset--btn {
        flex: 1 1 0 !important;
        width: auto !important;      /* override the column-mode width: 100% */
    }
}

/* My Library — Current & Recent playlist cards get a medium-grey frame that
   turns brand pink on hover. */
.bte-pl-card {
    border: 1px solid rgba(255, 255, 255, 0.22) !important;
    border-radius: 12px;
    padding: 7px !important;
    transition: border-color 150ms ease;
}
.bte-pl-card:hover,
.bte-pl-card:focus-visible {
    border-color: #e80a68 !important;
    outline: none;
}


/* Filtered Selection — Sort control */
.bte-sort-control { display: inline-flex; align-items: center; gap: 6px; }
.bte-sort-control__label { font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #e80a68; }
.bte-sort-control__select { background: #1a1a1a; color: #ffffff; border: 1px solid #3a3a3a; border-radius: 8px; padding: 6px 10px; font-size: 13px; line-height: 1.2; cursor: pointer; }
.bte-sort-control__select:hover { border-color: #e80a68; }
.bte-sort-control__select:focus { outline: none; border-color: #e80a68; box-shadow: 0 0 0 2px rgba(232, 10, 104, .35); }


/* Reference name (e.g. "Day 890 - June 8, 2026") under the card title */
.bte-version-card__reference { margin: 2px 0 9px; font-size: 11px; font-style: italic; color: #bbbbbb; line-height: 1.3; }


/* Spotlight card reference — inherits size/italic/colour from .bte-version-card__reference.
   (1) Revealed only on hover/focus, matching the details block below it (uses
   opacity rather than display so the title doesn't shift when it appears).
   (2) Pulled up tight under the title: the negative top margin offsets most of
   the 14px flex-column gap so it sits close to the title. */
.bte-spotlight-card__reference {
    margin: -7px 0 10px;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 240ms ease, transform 240ms ease;
}
.bte-spotlight-card:hover .bte-spotlight-card__reference,
.bte-spotlight-card:focus-within .bte-spotlight-card__reference {
    opacity: 1;
    transform: none;
}


/* Title + reference share one heading block so the reference sits directly under
   the title in every card-body layout variant (grid row 1, or flex source order). */
.bte-version-card__heading { grid-column: 1 / -1 !important; grid-row: 1 !important; min-width: 0; }
.bte-version-card__heading .bte-version-card__title { min-height: 0; }


/* =========================================================================
   THEME COMPATIBILITY OVERRIDES
   -------------------------------------------------------------------------
   Some host themes (e.g. the X/Pro theme on lisadawnmiller.com) apply
   `body p { color:#000 !important; line-height:1.7 !important }` and paint
   form inputs with a light background. Because those declarations are
   !important, they win over the plugin's normal-weight colour rules, which
   is why text that renders correctly on oliverrichman.com falls back to
   black here. The rules below re-assert the catalogue's own palette with
   matching !important so the plugin looks identical across host sites.
   ========================================================================= */

/* (1) Auth / Signature Access modal response message.
       Base = white so the error pill reads white instead of theme black;
       success keeps its original tint per context. */
.bte-auth-modal__message {
    color: #ffffff !important;
}
.bte-auth-modal__message--success {
    color: #57d76f !important;
}
.bte-sig-screen .bte-auth-modal__message--success {
    color: #ffd9e6 !important;
}

/* (2) Version-card play count — restore brand pink. */
.bte-version-card__plays {
    color: #e80a68 !important;
}

/* (4) Playlist share / reorder UI. */
.bte-playlist-item__drag-note,
.bte-playlist-drawer__reorder-note {
    color: #777777 !important;
}
.bte-share-panel .bte-share-panel__name-input,
.bte-share-panel .bte-share-panel__email-input {
    background: #242424 !important;
    border: 1px solid rgba(255, 255, 255, 0.14) !important;
    color: #ffffff !important;
    font-size: 12px !important;
}
.bte-share-panel .bte-share-panel__name-input::placeholder,
.bte-share-panel .bte-share-panel__email-input::placeholder {
    color: rgba(255, 255, 255, 0.45) !important;
    font-size: 12px !important;
}
.bte-share-panel .bte-share-panel__url-input {
    background: #242424 !important;
    color: #b3b3b3 !important;   /* muted, read-only URL colour */
}
/* Stop browser autofill from repainting the share inputs white/black. */
.bte-share-panel .bte-share-panel__name-input:-webkit-autofill,
.bte-share-panel .bte-share-panel__email-input:-webkit-autofill,
.bte-share-panel .bte-share-panel__url-input:-webkit-autofill {
    -webkit-text-fill-color: #ffffff !important;
    transition: background-color 9999s ease-in-out 0s;
}

/* (5) Lyrics drawer body text — restore off-white. */
.bte-lyrics-drawer__content,
.bte-lyrics-drawer__content p {
    color: #eeeeee !important;
}