/* Preserve the original beatstore list while keeping artwork visible. */
body[data-surface="beats"] .beat-art-col {
    display: block !important;
    position: relative;
    width: 52px;
    height: 52px;
    overflow: hidden;
    border: 1px solid #242424;
    cursor: pointer;
}

body[data-surface="beats"] .beat-art-thumb {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: #050505;
    filter: saturate(.78) contrast(1.08);
}

body[data-surface="beats"] .beat-art-col.catalog-art::after {
    content: "V/";
    position: absolute;
    left: 3px;
    bottom: 3px;
    z-index: 2;
    padding: 2px 3px;
    background: rgba(0,0,0,.78);
    color: #d58cff;
    font: 700 6px/1 'Space Mono', monospace;
    letter-spacing: .08em;
}

body[data-surface="beats"] .beat-art-col .beat-play-overlay {
    z-index: 3;
    background: rgba(0,0,0,.42);
    opacity: 0;
}

body[data-surface="beats"] .beat-art-col:hover .beat-play-overlay,
body[data-surface="beats"] .beat-row.playing .beat-art-col .beat-play-overlay {
    opacity: 1;
}

@media (max-width: 900px) {
    body[data-surface="beats"] .beat-row,
    body[data-surface="beats"] .store-layout .beat-row {
        grid-template-columns: 56px minmax(0, 1fr) auto;
    }

    body[data-surface="beats"] .beat-meta,
    body[data-surface="beats"] .beat-key-col,
    body[data-surface="beats"] .beat-tags-col {
        display: none;
    }
}

@media (max-width: 600px) {
    body[data-surface="beats"] .beat-row,
    body[data-surface="beats"] .store-layout .beat-row {
        grid-template-columns: 52px minmax(0, 1fr);
        gap: .65rem;
    }

    body[data-surface="beats"] .beat-actions,
    body[data-surface="beats"] .store-layout .beat-actions {
        grid-column: 1 / -1;
        display: flex;
        flex-direction: row;
        width: 100%;
    }
}

/* Persistent player: stable desktop geometry and a purposeful mobile dock. */
#audioPlayer {
    box-sizing: border-box;
    display: grid !important;
    grid-template-columns: minmax(190px, 1fr) auto minmax(260px, 2fr) auto;
    align-items: center;
    gap: clamp(.75rem, 1.6vw, 1.5rem) !important;
    padding-inline: clamp(1rem, 3vw, 2.5rem) !important;
}

#audioPlayer .player-track-meta { min-width: 0 !important; }
#audioPlayer .player-transport { justify-content: center; }
#audioPlayer .player-timeline { min-width: 180px !important; }
#audioPlayer #progressTrack { border-block: 1px solid rgba(255,255,255,.08); }
#audioPlayer #progressFill { background: rgba(178,35,255,.28) !important; }
#audioPlayer #playerArt { border: 1px solid rgba(255,255,255,.12); }

@media (max-width: 700px) {
    body { padding-bottom: 84px; }

    #audioPlayer {
        height: 78px !important;
        grid-template-columns: minmax(0, 1fr) auto !important;
        grid-template-rows: 3px 1fr;
        gap: 0 .5rem !important;
        padding: 0 .75rem !important;
        border-top-width: 1px !important;
    }

    #audioPlayer .player-timeline {
        position: absolute;
        inset: 0 0 auto;
        height: 4px;
        min-width: 0 !important;
    }

    #audioPlayer .player-timeline #currentTime,
    #audioPlayer .player-timeline #trackDuration,
    #audioPlayer .player-timeline canvas { display: none !important; }

    #audioPlayer #progressTrack {
        width: 100%;
        height: 4px !important;
        border: 0;
        background: rgba(255,255,255,.09);
    }

    #audioPlayer .player-track-meta {
        grid-column: 1;
        grid-row: 2;
        gap: .65rem !important;
    }

    #audioPlayer #playerArt { width: 46px !important; height: 46px !important; }
    #audioPlayer #playerTitle { font-size: 11px !important; }
    #audioPlayer #playerArtist { font-size: 9px !important; letter-spacing: .08em; }

    #audioPlayer .player-transport {
        grid-column: 2;
        grid-row: 2;
        gap: .15rem !important;
    }

    #audioPlayer .player-transport button { padding: .4rem !important; }
    #audioPlayer #playPauseBtn { width: 40px !important; height: 40px !important; }
    #audioPlayer .player-volume-control { display: none !important; }
}

@media (max-width: 380px) {
    #audioPlayer .player-transport #prevBtn { display: none; }
}

/* Release-style beat detail */
body.beat-detail-open { overflow: hidden; }

.beat-detail-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1100;
    background: rgba(0,0,0,.78);
    backdrop-filter: blur(10px);
    opacity: 0;
    visibility: hidden;
    transition: opacity .25s ease, visibility .25s ease;
}

.beat-detail-backdrop.open { opacity: 1; visibility: visible; }

.beat-detail {
    position: fixed;
    inset: clamp(1rem, 4vw, 3rem);
    z-index: 1101;
    max-width: 1180px;
    margin: auto;
    background: #050505;
    border: 1px solid #28202f;
    box-shadow: 0 40px 120px rgba(0,0,0,.8), 0 0 80px rgba(178,35,255,.08);
    overflow: auto;
    opacity: 0;
    visibility: hidden;
    transform: translateY(18px) scale(.985);
    transition: opacity .25s ease, transform .25s ease, visibility .25s ease;
}

.beat-detail.open { opacity: 1; visibility: visible; transform: none; }

.beat-detail-close {
    position: sticky;
    top: 1rem;
    float: right;
    z-index: 4;
    width: 42px;
    height: 42px;
    margin: 1rem 1rem -58px 0;
    color: #fff;
    background: rgba(0,0,0,.82);
    border: 1px solid #333;
    cursor: pointer;
}

.beat-detail-shell {
    min-height: 100%;
    display: grid;
    grid-template-columns: minmax(330px, .9fr) minmax(460px, 1.1fr);
}

.beat-detail-visual { position: relative; min-height: 620px; background: #0a0a0a; overflow: hidden; }
.beat-detail-visual::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgba(0,0,0,.7)); pointer-events: none; }
.beat-detail-visual img { width: 100%; height: 100%; object-fit: contain; background: #050505; filter: saturate(.82) contrast(1.08); }
.beat-detail-visual > span { position: absolute; left: 1.25rem; bottom: 1.25rem; z-index: 2; padding: .4rem .55rem; color: #bbb; background: rgba(0,0,0,.7); font: 700 8px/1 'Space Mono', monospace; letter-spacing: .16em; text-transform: uppercase; }

.beat-detail-copy { padding: clamp(2.5rem, 5vw, 5rem); align-self: center; }
.beat-detail-kicker { color: #a75ad5; font: 700 9px/1.4 'Space Mono', monospace; letter-spacing: .18em; }
.beat-detail-copy h2 { margin: 1rem 0 .4rem; color: #fff; font: 700 clamp(2.2rem, 5vw, 4.7rem)/.95 'Space Mono', monospace; letter-spacing: -.06em; overflow-wrap: anywhere; }
.beat-detail-artist { color: #777; font-size: 13px; }

.beat-detail-meta { display: flex; gap: 1px; margin: 2rem 0 1rem; background: #222; border: 1px solid #222; }
.beat-detail-meta span { flex: 1; padding: 1rem; color: #5c5c5c; background: #090909; font: 700 8px/1 'Space Mono', monospace; letter-spacing: .16em; }
.beat-detail-meta strong { display: block; margin-bottom: .55rem; color: #fff; font-size: 16px; letter-spacing: 0; }
.beat-detail-tags { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: 1.5rem; }
.beat-detail-tags span { padding: .35rem .5rem; color: #888; border: 1px solid #252525; font: 700 8px/1 'Space Mono', monospace; text-transform: uppercase; }

.beat-detail-description { margin: 0 0 1rem; color: #b8b8b8; font-size: 14px; line-height: 1.75; max-width: 62ch; }
.beat-detail-keywords { display: flex; flex-wrap: wrap; gap: .35rem; margin: 0 0 1.5rem; }
.beat-detail-keywords span { padding: .32rem .48rem; color: #9f83b2; background: rgba(127, 46, 166, .08); border: 1px solid #2d2035; font: 700 8px/1 'Space Mono', monospace; text-transform: uppercase; letter-spacing: .08em; }

.beat-detail-play { width: 100%; min-height: 58px; display: grid; grid-template-columns: auto auto 1fr; align-items: center; gap: .85rem; padding: .75rem 1rem; color: #fff; background: #111; border: 1px solid #30253a; cursor: pointer; text-align: left; }
.detail-play-symbol { width: 34px; height: 34px; display: grid; place-items: center; color: #fff; background: #a21be9; }
.detail-play-symbol .fa-pause { display: none; }
.beat-detail-play.playing .detail-play-symbol .fa-play { display: none; }
.beat-detail-play.playing .detail-play-symbol .fa-pause { display: inline; }
.detail-play-label { font: 700 10px/1 'Space Mono', monospace; text-transform: uppercase; }
.detail-play-wave { height: 28px; display: flex; align-items: center; justify-content: flex-end; gap: 2px; overflow: hidden; opacity: .65; mask-image: linear-gradient(90deg, transparent, #000 12%, #000); }
.detail-play-wave .waveform-bar { flex: 1; min-width: 1px; max-width: 3px; border-radius: 999px; background: linear-gradient(180deg, #c36cff, #65228c); transform-origin: center; }
.beat-detail-play.playing .detail-play-wave .waveform-bar { animation: detailWaveFlow 1.15s ease-in-out infinite alternate; animation-delay: var(--wave-delay, 0ms); }
@keyframes detailWaveFlow {
    0% { transform: scaleY(.7); opacity: .45; }
    55% { transform: scaleY(1.08); opacity: 1; }
    100% { transform: scaleY(.86); opacity: .65; }
}

.beat-detail-license-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: .65rem; margin-top: .75rem; }
.beat-detail-license-grid article { display: flex; min-height: 182px; flex-direction: column; padding: 1.1rem; background: #080808; border: 1px solid #242424; }
.beat-detail-license-grid article.featured { border-color: #673481; background: linear-gradient(145deg, rgba(126,26,190,.13), #080808 55%); }
.beat-detail-license-grid p { color: #777; font: 700 8px/1 'Space Mono', monospace; letter-spacing: .13em; }
.beat-detail-license-grid strong { margin: .75rem 0; color: #fff; font: 700 25px/1 'Space Mono', monospace; }
.beat-detail-license-grid span { color: #777; font-size: 11px; line-height: 1.5; }
.beat-detail-license-grid button { margin-top: auto; padding: .75rem; color: #fff; background: #151515; border: 1px solid #333; font: 700 9px/1 'Space Mono', monospace; text-transform: uppercase; cursor: pointer; }
.beat-detail-license-grid .featured button { background: #9214d5; border-color: #b43cf4; }

.beat-detail-related { margin-top: 2rem; }
.beat-detail-related > p { margin-bottom: .65rem; color: #666; font: 700 8px/1 'Space Mono', monospace; letter-spacing: .16em; }
.beat-detail-related > button { width: 100%; display: grid; grid-template-columns: 38px 1fr; align-items: center; gap: .7rem; padding: .45rem; color: #eee; background: transparent; border: 0; border-top: 1px solid #191919; cursor: pointer; text-align: left; }
.beat-detail-related img { width: 38px; height: 38px; object-fit: cover; }
.beat-detail-related span { font: 700 10px/1.3 'Space Mono', monospace; }
.beat-detail-related small { display: block; margin-top: .25rem; color: #555; font-size: 8px; }

body[data-surface="beats"] .beat-art-col,
body[data-surface="beats"] .beat-info-col { cursor: pointer; }

@media (max-width: 820px) {
    .beat-detail { inset: 0; border: 0; }
    .beat-detail-shell { grid-template-columns: 1fr; }
    .beat-detail-visual { min-height: auto; aspect-ratio: 1; }
    .beat-detail-copy { padding: 2rem 1rem 7rem; }
    .beat-detail-copy h2 { font-size: clamp(2rem, 12vw, 3.5rem); }
}

@media (max-width: 480px) {
    .beat-detail-license-grid { grid-template-columns: 1fr; }
    .beat-detail-license-grid article { min-height: 154px; }
    .beat-detail-meta span { padding: .75rem .55rem; }
    .detail-play-wave { display: none; }
    .beat-detail-play { grid-template-columns: auto 1fr; }
}