/* ===== /beats + discography — uses the main site's look (Poppins, accent red, rounded dark cards) =====
   Scoped to body.beats-page so other pages are untouched. */
body.beats-page {
    --bp-ink: var(--white);
    --bp-mute: var(--gray);
    --bp-line: #262626;
    --bp-red: var(--accent);
    --bp-card: #111;
    --bp-display: 'Poppins', sans-serif;
    --bp-mono: 'Poppins', sans-serif;
}

.bp { max-width: 1000px; margin: 0 auto; padding: 70px 24px 30px; color: var(--bp-ink); }

/* ---------- heading (same as main-site section titles) ---------- */
.bp-head { text-align: center; margin-bottom: 28px; }
.bp-head h1 { font-size: 2.4rem; font-weight: 700; color: var(--accent); margin: 0 0 6px; }
.bp-head h1 span { display: none; }
.bp-head p { color: var(--bp-mute); margin: 0; font-size: 1rem; }

/* ---------- search + tag filter ---------- */
.bp-tools { display: flex; flex-direction: column; align-items: center; gap: 18px; margin-bottom: 30px; }
body.beats-page #search-beats {
    box-shadow: none;
    backdrop-filter: none;
    width: 100%;
    max-width: min(420px, 90vw);
    font-size: 16px;
    padding: 12px 20px;
    border-radius: 30px;
    border: 2px solid var(--accent);
    background: #141414;
}
body.beats-page #search-beats:hover,
body.beats-page #search-beats:focus { box-shadow: none; background: #181818; border-color: var(--accent2); }
.bp-filters { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.bp-filters button {
    font-family: inherit; font-size: 12px;
    padding: 5px 12px; border-radius: 20px;
    background: var(--dark); color: var(--accent);
    border: 1px solid var(--accent); cursor: pointer; transition: .2s;
}
.bp-filters button:hover { background: #262626; }
.bp-filters button.on { background: var(--accent); color: #000; }

/* ---------- beat rows ---------- */
.bp-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.beat-row {
    display: grid;
    grid-template-columns: 64px minmax(140px, 1fr) minmax(180px, 1.3fr) auto;
    align-items: center; gap: 18px;
    padding: 12px 16px;
    background: var(--bp-card);
    border-radius: 18px;
    border: 1px solid transparent;
    transition: border-color .2s;
}
.beat-row:hover { border-color: #2a2a2a; }
.beat-row.is-playing { border-color: var(--accent); }

.beat-cover { position: relative; width: 64px; height: 64px; border-radius: 14px; overflow: hidden; }
.beat-cover img { width: 100%; height: 100%; object-fit: cover; display: block; margin: 0; border-radius: 0; }
.play-overlay {
    position: absolute; inset: 0; top: 0; left: 0;
    width: 100%; height: 100%;
    transform: none; border-radius: 0; border: 0;
    background: rgba(0,0,0,.5); color: #fff; font-size: 16px;
    display: flex; align-items: center; justify-content: center; cursor: pointer;
    transition: background .2s;
}
.play-overlay:hover { transform: none; background: var(--accent); }
.is-playing .play-overlay { background: var(--accent); }

.beat-title h3 { font-size: 1.15rem; font-weight: 600; color: var(--accent); margin: 0 0 6px; }
.beat-meta { display: flex; flex-wrap: wrap; gap: 5px; }
.beat-meta .tag { font-size: 11px; padding: 3px 8px; }

.beat-row .timeline { display: flex; align-items: center; gap: 10px; margin: 0; }
.beat-row .timeline span { font-size: 12px; width: auto; min-width: 32px; color: var(--bp-mute); }
.beat-row .timeline .duration { text-align: right; }
.beat-row .progress { flex: 1; accent-color: var(--accent); cursor: pointer; }

.beat-buy { display: flex; align-items: center; gap: 14px; }
.beat-price { font-size: 14px; color: var(--bp-mute); }
.beat-row .buy-btn { border: 0; cursor: pointer; font-family: inherit; font-size: 14px; padding: 10px 22px; }

.bp-empty { text-align: center; color: var(--bp-mute); padding: 40px 0; }

@media (max-width: 760px) {
    .bp { padding: 44px 14px 20px; }
    .bp-head h1 { font-size: 2rem; }
    .beat-row {
        grid-template-columns: 64px 1fr auto;
        grid-template-areas: "cover title buy" "time time time";
        gap: 10px 14px;
    }
    .beat-cover { grid-area: cover; }
    .beat-title { grid-area: title; }
    .beat-row .timeline { grid-area: time; }
    .beat-buy { grid-area: buy; }
    .beat-price { display: none; }
}