/* ============================================================================
   AVH Studios — Beats page
   ----------------------------------------------------------------------------
   The marketplace for re-performed AI instrumentals. This stylesheet is loaded
   AFTER token-bound.css so it reuses the majestic 3D profile-card system
   (.tb-card / .tb-card-inner / .tb-sheen / .tb-play / .tb-buy / .tb-hero /
   .tb-toolbar / .tb-modal / .tb-toast) and only adds the Beats-specific pieces:
     - the genre filter chips
     - the 3-tier price row on each card (non-commercial / commercial / exclusive)
     - the "sell a beat" upload form
     - the license-agreement modal + the accept checkbox
     - the "my beats" (listings + wire requests) panel and the admin queue
   ========================================================================== */

/* --------------------------------------------------------------- toolbar bits */
.be-toolbar-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.be-sell {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 11px 18px; border-radius: 999px; border: 1px solid rgba(255, 107, 53, .5);
  background: linear-gradient(135deg, rgba(255, 107, 53, .2), rgba(53, 194, 255, .14));
  color: var(--text); font: inherit; font-weight: 700; font-size: .9rem; cursor: pointer;
  transition: transform .15s ease, border-color .2s ease, background .2s ease;
}
.be-sell:hover { transform: translateY(-2px); border-color: var(--accent); }
.be-sell[disabled] { opacity: .5; cursor: not-allowed; transform: none; }

/* --------------------------------------------------------------- genre chips */
.be-genres {
  display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 22px;
}
.be-chip {
  border: 1px solid var(--border); background: var(--panel); color: var(--text-dim);
  border-radius: 999px; padding: 7px 14px; font: inherit; font-size: .82rem; font-weight: 600;
  cursor: pointer; transition: all .15s ease; white-space: nowrap;
}
.be-chip:hover { color: var(--text); border-color: var(--accent-2); }
.be-chip.active {
  color: #fff; border-color: transparent;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  box-shadow: 0 6px 18px rgba(255, 107, 53, .3);
}

/* --------------------------------------------------------------- card extras */
.be-tag {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: .72rem; font-weight: 700; letter-spacing: .04em;
  color: var(--accent-2); border: 1px solid rgba(53, 194, 255, .35);
  background: rgba(53, 194, 255, .08); border-radius: 999px; padding: 3px 10px;
}
.be-meta-row { display: flex; align-items: center; gap: 8px; margin: 2px 0 14px; transform: translateZ(24px); flex-wrap: wrap; }
.be-meta-row .dim { font-size: .78rem; }

/* 3-tier price row (replaces the 2-up .tb-prices on a beat card) */
.be-prices {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 18px;
  transform: translateZ(30px);
}
.be-buy { padding: 10px 6px; font-size: .78rem; gap: 1px; }
.be-buy .price { font-size: .95rem; }
.be-buy .be-tier-label { font-size: .7rem; font-weight: 600; }
.be-buy small { font-size: .64rem; }
.be-buy-exclusive {
  background: linear-gradient(135deg, rgba(255, 107, 53, .18), rgba(53, 194, 255, .16));
  border-color: rgba(255, 107, 53, .5);
}
.be-buy-exclusive:hover { border-color: var(--accent-2); }
.be-buy .be-wire-flag { font-size: .6rem; color: var(--accent-3); font-weight: 700; letter-spacing: .04em; }

/* ---- AIVH price emphasis (checkout) --------------------------------- */
.be-save { color: var(--accent-3); font-weight: 800; }
/* Checkout AIVH conversion (§212g): USD price -> AIVH at the 25/$1 peg. */
.be-aivh-calc {
  margin: 12px 0 4px; padding: 13px 15px; border-radius: 12px;
  background: rgba(53, 194, 255, .07); border: 1px solid rgba(53, 194, 255, .32); color: var(--text);
}
.be-aivh-calc-h { display: flex; align-items: center; gap: 8px; font-size: .78rem; font-weight: 700; color: var(--accent-2); text-transform: uppercase; letter-spacing: .07em; }
.be-aivh-calc .be-aivh-ico { font-size: 1.05rem; line-height: 1.3; flex: none; }
.be-aivh-calc-math { margin: 8px 0 6px; font-size: 1.02rem; font-weight: 600; letter-spacing: .01em; font-variant-numeric: tabular-nums; }
.be-aivh-calc-math b { color: var(--accent-3); font-weight: 800; font-size: 1.14rem; }
.be-aivh-calc-note { font-size: .78rem; line-height: 1.5; color: var(--text-dim); }
.be-pay-methods { display: grid; gap: 10px; margin: 12px 0 4px; }
.be-pay-opt {
  display: flex; align-items: flex-start; gap: 11px; padding: 13px 15px; border-radius: 12px;
  border: 1px solid var(--border); background: var(--panel); cursor: pointer; font-size: .86rem;
}
.be-pay-opt input { margin-top: 3px; width: 18px; height: 18px; accent-color: var(--accent); flex: none; }
.be-pay-opt.be-pay-aivh { border-color: rgba(53, 194, 255, .45); background: rgba(53, 194, 255, .06); }
.be-pay-opt .be-pay-body { display: flex; flex-direction: column; gap: 2px; }
.be-pay-opt .be-pay-body b { font-size: .9rem; }
.be-pay-opt .be-pay-body small { color: var(--text-dim); font-size: .78rem; }
/* Cash off (Phase 5): AIVH is the only method -- a single, pre-selected panel. */
.be-pay-methods-solo { grid-template-columns: 1fr; }
.be-pay-opt.be-pay-on { cursor: default; border-color: rgba(53, 194, 255, .6); background: rgba(53, 194, 255, .1); }
.be-pay-opt.be-pay-on input { accent-color: var(--accent); }

/* --------------------------------------------------------------- my beats panel */
.be-my { margin: 6px 0 26px; }
.be-my-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.be-my-head h3 { margin: 0; font-size: 1.15rem; }
.be-my-tabs { display: flex; gap: 8px; }
.be-my-tab {
  border: 1px solid var(--border); background: var(--panel); color: var(--text-dim);
  border-radius: 999px; padding: 6px 14px; font: inherit; font-size: .8rem; font-weight: 600; cursor: pointer;
}
.be-my-tab.active { color: var(--text); border-color: var(--accent); background: rgba(255, 107, 53, .12); }
.be-my-list { display: flex; flex-direction: column; gap: 10px; }
.be-my-row {
  display: grid; grid-template-columns: 1fr auto auto; gap: 14px; align-items: center;
  padding: 13px 16px; border-radius: 14px; border: 1px solid var(--border);
  background: linear-gradient(180deg, rgba(30, 34, 43, .8), rgba(23, 26, 33, .8));
}
.be-my-row .be-my-title { font-weight: 700; }
.be-my-row .be-my-sub { color: var(--text-dim); font-size: .8rem; }
.be-my-row .be-my-amt { font-weight: 700; color: var(--accent-3); }
.be-req-status {
  font-size: .72rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  border-radius: 999px; padding: 4px 10px; border: 1px solid var(--border); color: var(--text-dim);
}
.be-req-status.pending { color: #ffcf6b; border-color: rgba(255, 207, 107, .4); }
.be-req-status.facilitated { color: var(--accent-2); border-color: rgba(53, 194, 255, .4); }
.be-req-status.completed { color: var(--accent-3); border-color: rgba(53, 255, 158, .4); }
.be-req-status.declined { color: var(--danger); border-color: rgba(255, 77, 94, .4); }
.be-wire-instr {
  margin: -4px 0 12px;
  padding: 12px 14px;
  border: 1px solid rgba(53, 194, 255, .3);
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(53, 194, 255, .08), rgba(53, 194, 255, .02));
}
.be-wire-instr-h { font-weight: 700; font-size: .82rem; color: var(--accent-2); margin-bottom: 6px; }
.be-wire-instr pre {
  margin: 0; padding: 10px 12px; border-radius: 8px; overflow-x: auto;
  background: rgba(0, 0, 0, .35); border: 1px solid rgba(255, 255, 255, .08);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .82rem; line-height: 1.5; color: var(--text); white-space: pre-wrap; word-break: break-word;
}
.be-wire-instr-f { margin-top: 6px; font-size: .76rem; color: var(--text-dim); line-height: 1.5; }
.be-mini-btn {
  border: 1px solid var(--border); background: var(--panel-2); color: var(--text);
  border-radius: 10px; padding: 7px 12px; font: inherit; font-size: .78rem; font-weight: 600; cursor: pointer;
}
.be-mini-btn:hover { border-color: var(--accent); }
.be-mini-btn.danger { border-color: rgba(255, 77, 94, .34); color: var(--danger); }
.be-mini-btn.danger:hover { border-color: var(--danger); color: var(--danger); }

/* --------------------------------------------------------------- forms */
.be-form { display: grid; gap: 14px; }
.be-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.be-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.be-field { display: flex; flex-direction: column; gap: 6px; }
.be-label { font-size: .78rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--text-dim); }
.be-input, .be-textarea, .be-select {
  width: 100%; background: var(--panel); border: 1px solid var(--border); color: var(--text);
  border-radius: 10px; padding: 11px 13px; font: inherit; outline: none;
}
.be-input:focus, .be-textarea:focus, .be-select:focus { border-color: var(--accent-2); }
.be-textarea { resize: vertical; min-height: 84px; }
.be-file {
  border: 1px dashed var(--border); border-radius: 10px; padding: 12px; background: var(--panel);
  color: var(--text-dim); font-size: .84rem;
}
.be-price-wrap { position: relative; }
.be-price-wrap .be-currency {
  position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--text-dim); font-weight: 700;
}
.be-price-wrap .be-input { padding-left: 26px; }
.be-fee-note {
  margin-top: 4px; padding: 12px 14px; border-radius: 12px; font-size: .82rem; line-height: 1.55;
  background: rgba(53, 255, 158, .06); border: 1px solid rgba(53, 255, 158, .28); color: var(--text);
}
.be-fee-note b { color: var(--accent-3); }
.be-wire-note {
  margin-top: 4px; padding: 12px 14px; border-radius: 12px; font-size: .82rem; line-height: 1.55;
  background: rgba(53, 194, 255, .06); border: 1px solid rgba(53, 194, 255, .28); color: var(--text);
}
.be-actions { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-top: 6px; }
.be-btn-primary {
  border: none; border-radius: 999px; padding: 13px 24px; font: inherit; font-weight: 700; font-size: .92rem;
  color: #0b0d11; cursor: pointer;
  background: linear-gradient(135deg, var(--accent), #ffb27a 55%, var(--accent-2));
}
.be-btn-primary:hover { filter: brightness(1.06); }
.be-btn-primary[disabled] { opacity: .5; cursor: not-allowed; filter: none; }
.be-btn-ghost {
  border: 1px solid var(--border); background: var(--panel-2); color: var(--text);
  border-radius: 999px; padding: 12px 20px; font: inherit; font-weight: 600; cursor: pointer;
}
.be-btn-ghost:hover { border-color: var(--accent-2); }
.be-err { color: var(--danger); font-size: .84rem; }

/* --------------------------------------------------------------- license modal */
.be-license-box {
  max-height: 320px; overflow-y: auto; margin: 14px 0; padding: 16px 18px;
  border: 1px solid var(--border); border-radius: 14px; background: rgba(15, 17, 21, .6);
  font-size: .84rem; line-height: 1.62; white-space: pre-wrap; color: var(--text-dim);
}
.be-license-box b { color: var(--text); }
.be-agree {
  display: flex; align-items: flex-start; gap: 11px; padding: 13px 15px; border-radius: 12px;
  border: 1px solid var(--border); background: var(--panel); cursor: pointer; font-size: .86rem; line-height: 1.5;
}
.be-agree input { margin-top: 3px; width: 18px; height: 18px; accent-color: var(--accent); flex: none; }
.be-final {
  margin-top: 12px; font-size: .76rem; color: var(--text-dim); text-align: center; letter-spacing: .02em;
}
.be-purchase-summary {
  display: grid; grid-template-columns: 1fr auto; gap: 6px 16px; margin: 6px 0 2px;
  padding: 14px 16px; border-radius: 14px; border: 1px solid var(--border); background: var(--panel-2);
}
.be-purchase-summary .k { color: var(--text-dim); font-size: .84rem; }
.be-purchase-summary .v { text-align: right; font-weight: 700; }
.be-success {
  padding: 18px; border-radius: 14px; margin-top: 6px;
  background: rgba(53, 255, 158, .07); border: 1px solid rgba(53, 255, 158, .35);
}
.be-success.wire { background: rgba(53, 194, 255, .07); border-color: rgba(53, 194, 255, .35); }
.be-success h3 { margin: 0 0 6px; }
.be-success p { margin: 0 0 10px; font-size: .88rem; color: var(--text); }
.be-success .be-btn-primary, .be-success .be-btn-ghost { text-decoration: none; display: inline-flex; }

/* --------------------------------------------------------------- admin queue */
.be-admin { margin: 6px 0 26px; border: 1px solid rgba(53, 194, 255, .3); border-radius: 16px; padding: 18px; background: rgba(53, 194, 255, .05); }
.be-admin h3 { margin: 0 0 4px; }
.be-admin .dim { font-size: .82rem; }
.be-admin-row { border-top: 1px solid var(--border); padding: 14px 0; }
.be-admin-row:first-of-type { border-top: none; }
.be-admin-row .be-admin-meta { font-size: .82rem; color: var(--text-dim); margin-bottom: 8px; line-height: 1.6; }
.be-admin-row .be-admin-meta b { color: var(--text); }
.be-admin-row .be-textarea { min-height: 62px; }

/* --------------------------------------------------------------- misc */
.be-hero-note { margin: 14px auto 0; max-width: 60ch; font-size: .84rem; color: var(--text-dim); }
.be-empty-cta { margin-top: 12px; }

@media (max-width: 720px) {
  .be-prices { grid-template-columns: 1fr; }
  .be-grid-3, .be-grid-2 { grid-template-columns: 1fr; }
  .be-my-row { grid-template-columns: 1fr; }
  .be-my-row .be-my-amt { text-align: left; }
}
@media (prefers-reduced-motion: reduce) {
  .be-sell, .be-chip, .be-btn-primary, .be-like { transition: none; }
  .be-like-pop { animation: none; }
}

/* ============================================================================
   Section 99 additions: buyer-safety notation, platform-only note, the like
   ticker and the verified-production source picker.
   ========================================================================== */

/* --------------------------------------------------------------- buyer safety */
.be-safety {
  display: flex; gap: 14px; align-items: flex-start;
  margin: 20px auto 0; max-width: 900px; padding: 16px 18px; border-radius: 16px;
  background: linear-gradient(135deg, rgba(53, 255, 158, .08), rgba(53, 194, 255, .06));
  border: 1px solid rgba(53, 255, 158, .34);
  text-align: left;
}
.be-safety-ico { font-size: 1.5rem; line-height: 1.2; flex: 0 0 auto; }
.be-safety-body { min-width: 0; }
.be-safety-title { display: block; color: var(--text); font-size: .96rem; margin-bottom: 4px; }
.be-safety-body p { margin: 0; font-size: .84rem; line-height: 1.6; color: var(--text-dim); }
.be-safety-body b { color: var(--text); }

.be-safety-inline { margin: 16px 0 0; max-width: none; padding: 13px 15px; }
.be-safety-inline .be-safety-ico { font-size: 1.2rem; }
.be-safety-inline .be-safety-title { font-size: .88rem; }
.be-safety-license { margin: 4px 0 14px; }

.be-hero-platform {
  margin: 16px auto 0; max-width: 900px; display: flex; gap: 12px; align-items: flex-start;
  padding: 14px 16px; border-radius: 14px; text-align: left;
  background: rgba(255, 107, 53, .06); border: 1px solid rgba(255, 107, 53, .28);
  font-size: .84rem; line-height: 1.6; color: var(--text-dim);
}
.be-hero-platform-ico { font-size: 1.25rem; line-height: 1.2; flex: 0 0 auto; }
.be-hero-platform b { color: var(--text); }

/* ---- Watermarked full-track preview (101) ---- */
.be-hero-watermark {
  margin: 16px auto 0; max-width: 900px; display: flex; gap: 12px; align-items: flex-start;
  padding: 14px 16px; border-radius: 14px; text-align: left;
  background: linear-gradient(135deg, rgba(53, 194, 255, .08), rgba(255, 107, 53, .05));
  border: 1px solid rgba(53, 194, 255, .3);
  font-size: .84rem; line-height: 1.6; color: var(--text-dim);
}
.be-hero-watermark-ico { font-size: 1.25rem; line-height: 1.2; flex: 0 0 auto; }
.be-hero-watermark b { color: var(--text); }

/* Card chip: "Full track · watermarked every 20s" */
.be-wm-chip {
  display: inline-flex; align-items: center; gap: 7px;
  margin: 10px 0 2px; padding: 5px 10px; border-radius: 999px;
  font-size: .72rem; font-weight: 700; letter-spacing: .02em;
  color: var(--accent-2); background: rgba(53, 194, 255, .1);
  border: 1px solid rgba(53, 194, 255, .32);
}
.be-wm-chip .be-wm-ico { font-size: .9rem; line-height: 1; }

/* Modal note */
.be-wm-note {
  display: flex; gap: 12px; align-items: flex-start;
  margin: 14px 0 0; padding: 12px 14px; border-radius: 12px;
  background: linear-gradient(135deg, rgba(53, 194, 255, .08), rgba(255, 107, 53, .05));
  border: 1px solid rgba(53, 194, 255, .3);
  font-size: .82rem; line-height: 1.6; color: var(--text-dim); text-align: left;
}
.be-wm-note .be-wm-ico { font-size: 1.15rem; line-height: 1.3; flex: 0 0 auto; }
.be-wm-note b { color: var(--text); }

/* Seller chip/note (142): "what buyers hear" + one-tap buyer preview. The seller
   streams the clean master, so we surface the buyer-facing tag and let them hear
   it in one tap. Orange accent distinguishes it from the buyer's blue chip. */
.be-wm-chip-owner {
  color: var(--accent); background: rgba(255, 107, 53, .1);
  border-color: rgba(255, 107, 53, .34);
  gap: 8px; flex-wrap: wrap;
}
.be-wm-chip-owner .be-wm-ico { color: var(--accent); }
.be-wm-owner-txt { font-weight: 700; }
.be-wm-chip .be-wm-preview.tb-play { font-size: .7rem; padding: 3px 10px; }
.be-wm-note-owner {
  background: linear-gradient(135deg, rgba(255, 107, 53, .08), rgba(53, 194, 255, .05));
  border-color: rgba(255, 107, 53, .32);
}
.tb-modal-audio .be-wm-preview.tb-play { font-size: .8rem; }

/* Seller listed the beat WITHOUT the voice tag (per-listing toggle, 147). */
.be-wm-chip-off {
  color: #34d399; background: rgba(52, 211, 153, .1);
  border-color: rgba(52, 211, 153, .34);
}
.be-wm-chip-off .be-wm-ico { color: #34d399; }
.be-wm-note-off {
  background: linear-gradient(135deg, rgba(52, 211, 153, .08), rgba(53, 194, 255, .05));
  border-color: rgba(52, 211, 153, .32);
}

/* "Keep cover art" option in the sell form (147): preview the art kept from the
   original upload and let the seller carry it onto the listing. */
.be-keep-cover {
  margin-top: 10px; padding: 11px 13px; border-radius: 12px;
  border: 1px solid var(--border); background: var(--panel);
}
.be-keep-cover .be-pub-toggle { border: 0; padding: 0; background: transparent; }
.be-cover-preview {
  display: block; margin-top: 10px; width: 96px; height: 96px; object-fit: cover;
  border-radius: 10px; border: 1px solid var(--border); background: #0b0f17;
}

/* --------------------------------------------------------------- like ticker */
.be-like {
  display: inline-flex; align-items: center; gap: 6px; margin-left: auto;
  padding: 5px 11px; border-radius: 999px; cursor: pointer; font: inherit; font-size: .8rem; font-weight: 700;
  color: var(--text-dim); background: rgba(15, 17, 21, .5); border: 1px solid var(--border);
  transition: transform .12s ease, color .15s ease, border-color .15s ease, background .15s ease;
}
.be-like:hover { color: var(--text); border-color: var(--accent); }
.be-like .be-like-heart { font-size: .95rem; line-height: 1; }
.be-like.liked { color: #ff5c8a; border-color: rgba(255, 92, 138, .5); background: rgba(255, 92, 138, .1); }
.be-like-pop { animation: beLikePop .4s ease; }
@keyframes beLikePop {
  0% { transform: scale(1); }
  35% { transform: scale(1.28); }
  60% { transform: scale(.94); }
  100% { transform: scale(1); }
}
.be-modal-like-row { display: flex; align-items: center; gap: 12px; margin: 4px 0 10px; flex-wrap: wrap; }
.be-modal-like-row .be-like { margin-left: 0; }
.be-like-hint { font-size: .8rem; color: var(--text-dim); }

/* --------------------------------------------------------------- source picker */
.be-source-row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.be-source-row .be-select { flex: 1 1 260px; min-width: 0; }
.be-source-play { flex: 0 0 auto; white-space: nowrap; }
.be-source-note {
  margin: 10px 0 0; font-size: .8rem; line-height: 1.55; color: var(--text-dim);
  display: flex; gap: 8px; align-items: flex-start;
}
.be-source-note-ico { font-size: 1rem; line-height: 1.3; flex: 0 0 auto; }

@media (max-width: 720px) {
  .be-source-row .be-select { flex-basis: 100%; }
  .be-source-play { width: 100%; justify-content: center; }
}

/* ============================================================================
   Section 100: the sample demo card. A clearly-labelled preview of a beat
   listing so visitors can see exactly what a card looks like before any real
   beat is posted. Never purchasable; excluded from totals and filters.
   ========================================================================== */
.tb-card-sample .tb-card-inner {
  box-shadow: 0 0 0 1px rgba(53, 194, 255, .35), 0 20px 50px rgba(0, 0, 0, .5);
}
.tb-card-sample .tb-card-inner::after {
  content: "";
  position: absolute; inset: 0; border-radius: inherit;
  border: 1px dashed rgba(53, 194, 255, .5);
  pointer-events: none; z-index: 6;
}
.tb-card-sample:hover .tb-card-inner {
  box-shadow: 0 30px 70px rgba(0, 0, 0, .6), 0 0 44px rgba(53, 194, 255, .22);
}
.tb-sample-banner {
  margin: -22px -20px 16px;
  padding: 8px 12px;
  text-align: center;
  font-size: .68rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase;
  color: #0b0d11;
  background: linear-gradient(90deg, var(--accent-3), var(--accent-2) 55%, var(--accent));
}
.tb-badge-sample {
  color: #0b0d11;
  background: linear-gradient(135deg, var(--accent-2), var(--accent-3));
  border-color: transparent;
  letter-spacing: .14em;
}
.tb-sample-note {
  margin: 14px 0 0;
  font-size: .78rem; line-height: 1.55; color: var(--text-dim);
}
.tb-sample-note b { color: var(--text); }
.tb-sample-hide {
  margin-left: 4px; padding: 0; border: 0; background: none;
  color: var(--accent-2); font: inherit; font-size: .78rem; font-weight: 700;
  cursor: pointer; text-decoration: underline;
}
.tb-sample-hide:hover { color: var(--accent); }
.tb-sample-note-modal { border-left: 3px solid var(--accent-2); }

/* ============================================================================
   Section 111: the mobile-first SWIPE FEED.
   ----------------------------------------------------------------------------
   A full-screen, vertical scroll-snap feed (one beat per viewport panel) that
   auto-plays the beat snapped into view so people on mobile can browse beats
   quickly. Reuses the page's single shared Audio() player (see beats.js) so the
   grid and the feed never play over each other. Opened from the toolbar "Swipe"
   toggle; closed with the ✕ or Escape.
   ========================================================================== */

/* ------------------------------------------------- toolbar "Swipe" toggle */
.be-feed-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 16px; border-radius: 999px; cursor: pointer;
  border: 1px solid rgba(53, 194, 255, .45);
  background: linear-gradient(135deg, rgba(53, 194, 255, .16), rgba(53, 255, 158, .12));
  color: var(--text); font: inherit; font-weight: 700; font-size: .9rem;
  transition: transform .15s ease, border-color .2s ease, background .2s ease;
}
.be-feed-btn:hover { transform: translateY(-2px); border-color: var(--accent-2); }
.be-feed-btn-ico { font-size: .78rem; line-height: 1; color: var(--accent-2); }
.be-feed-btn.active {
  border-color: transparent; color: #0b0d11;
  background: linear-gradient(135deg, var(--accent-2), var(--accent-3));
}
.be-feed-btn.active .be-feed-btn-ico { color: #0b0d11; }

/* Lock the page behind the feed. */
body.be-feed-open { overflow: hidden; }

/* ------------------------------------------------- the overlay */
.be-feed {
  position: fixed; left: 0; right: 0; top: 0;
  height: 100vh; height: 100dvh;
  z-index: 150;                 /* above the sticky nav (60), below modals (200) */
  display: none; overflow: hidden;
  background:
    radial-gradient(120% 70% at 50% -10%, rgba(255, 107, 53, .12), transparent 60%),
    radial-gradient(120% 70% at 50% 110%, rgba(53, 194, 255, .12), transparent 60%),
    #0a0c10;
  -webkit-tap-highlight-color: transparent;
}
.be-feed.open { display: block; animation: beFeedIn .22s ease; }
@keyframes beFeedIn { from { opacity: 0; } to { opacity: 1; } }

/* The scroll-snap track: one full-height panel per beat. */
.be-feed-scroll {
  position: absolute; inset: 0;
  overflow-y: auto; overflow-x: hidden;
  scroll-snap-type: y mandatory;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.be-feed-scroll::-webkit-scrollbar { width: 0; height: 0; display: none; }

.be-feed-panel {
  position: relative;
  height: 100%;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  display: flex; align-items: stretch; justify-content: center;
  padding: calc(64px + env(safe-area-inset-top)) 16px calc(56px + env(safe-area-inset-bottom));
}

/* ------------------------------------------------- the beat card */
.be-feed-card {
  position: relative;
  display: flex; flex-direction: column;
  width: 100%; max-width: 460px; height: 100%;
  border-radius: 22px; overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .08);
  background: linear-gradient(180deg, rgba(30, 34, 43, .92), rgba(17, 20, 26, .96));
  box-shadow: 0 30px 70px rgba(0, 0, 0, .6), 0 0 0 1px rgba(255, 107, 53, .05);
}
.be-feed-card.is-sample { box-shadow: 0 30px 70px rgba(0, 0, 0, .6), 0 0 0 1px rgba(53, 194, 255, .35); }

/* ---- cover art (or a hashed gradient when the beat has no cover) ---- */
.be-feed-art {
  position: relative; flex: 1 1 auto; min-height: 190px;
  background-color: #12151b;
  background-image:
    radial-gradient(80% 60% at 30% 20%, hsl(var(--art-h, 210) 70% 26% / .9), transparent 70%),
    linear-gradient(150deg, hsl(var(--art-h, 210) 62% 20%), hsl(calc(var(--art-h, 210) + 45) 55% 9%));
  background-size: cover; background-position: center;
  display: flex; align-items: center; justify-content: center;
}
.be-feed-art-veil {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(0, 0, 0, .28) 0%, transparent 26%, transparent 58%, rgba(10, 12, 16, .72) 100%);
}
.be-feed-art-badges {
  position: absolute; top: 12px; left: 12px; right: 12px;
  display: flex; gap: 8px; flex-wrap: wrap; z-index: 2;
}
.be-feed-badge {
  font-size: .68rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  padding: 5px 10px; border-radius: 999px; color: var(--text);
  background: rgba(10, 12, 16, .6); border: 1px solid rgba(255, 255, 255, .14);
  backdrop-filter: blur(6px);
}
.be-feed-badge.sample { color: #0b0d11; border-color: transparent; background: linear-gradient(135deg, var(--accent-2), var(--accent-3)); }
.be-feed-badge.sold { color: var(--accent-3); border-color: rgba(53, 255, 158, .5); }

/* Big play / pause control, centered on the art. */
.be-feed-play {
  position: relative; z-index: 2;
  width: 76px; height: 76px; border-radius: 50%; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  border: 2px solid rgba(255, 255, 255, .55);
  background: rgba(10, 12, 16, .42);
  backdrop-filter: blur(6px);
  transition: transform .15s ease, border-color .2s ease, background .2s ease;
}
.be-feed-play:hover { transform: scale(1.05); border-color: #fff; }
.be-feed-play-ico {
  width: 0; height: 0; margin-left: 5px;
  border-style: solid; border-width: 13px 0 13px 21px;
  border-color: transparent transparent transparent #fff;
  transition: all .15s ease;
}
.be-feed-play.playing .be-feed-play-ico {
  width: 20px; height: 26px; margin-left: 0; border: none;
  background: linear-gradient(90deg, #fff 0 38%, transparent 38% 62%, #fff 62% 100%);
}
.be-feed-play.playing { border-color: var(--accent); background: rgba(255, 107, 53, .28); }

/* ---- body: seller, title, meta, prices ---- */
.be-feed-body { flex: 0 0 auto; padding: 16px 18px 18px; }
.be-feed-head { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.be-feed-seller { display: flex; align-items: center; gap: 10px; min-width: 0; text-decoration: none; color: inherit; }
.be-feed-seller .tb-avatar { flex: none; }
.be-feed-seller-meta { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.be-feed-seller-meta b { font-size: .95rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.be-feed-seller-meta span { font-size: .78rem; color: var(--text-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.be-feed-head .be-like { margin-left: auto; flex: none; }
.be-feed-title { margin: 2px 0 4px; font-size: 1.35rem; line-height: 1.2; letter-spacing: -.01em; }
.be-feed-meta { font-size: .82rem; color: var(--text-dim); margin-bottom: 14px; }
.be-feed-note {
  padding: 12px 14px; border-radius: 12px; font-size: .84rem; color: var(--text-dim);
  border: 1px solid var(--border); background: rgba(53, 255, 158, .05);
}
.be-feed-prices { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }

/* ------------------------------------------------- topbar (brand · count · actions) */
.be-feed-topbar {
  position: absolute; top: 0; left: 0; right: 0; z-index: 6;
  display: flex; align-items: center; gap: 12px;
  padding: calc(10px + env(safe-area-inset-top)) 14px 10px;
  pointer-events: none;
}
.be-feed-topbar > * { pointer-events: auto; }
.be-feed-brand {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: .8rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--text);
}
.be-feed-brand-dot {
  width: 9px; height: 9px; border-radius: 50%; background: var(--accent-3);
  box-shadow: 0 0 12px var(--accent-3); animation: avh-online-blink 1.6s ease-in-out infinite;
}
.be-feed-count { font-size: .8rem; color: var(--text-dim); }
.be-feed-topactions { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.be-feed-mute, .be-feed-close {
  width: 40px; height: 40px; border-radius: 50%; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid rgba(255, 255, 255, .16); background: rgba(10, 12, 16, .55);
  color: var(--text); font-size: 1.05rem; line-height: 1;
  backdrop-filter: blur(6px); transition: border-color .2s ease, background .2s ease;
}
.be-feed-mute:hover, .be-feed-close:hover { border-color: var(--accent-2); background: rgba(10, 12, 16, .8); }
.be-feed-mute[aria-pressed="true"] { color: var(--accent); border-color: rgba(255, 107, 53, .5); }

/* ------------------------------------------------- swipe hint */
.be-feed-hint {
  position: absolute; left: 50%; bottom: calc(14px + env(safe-area-inset-bottom));
  transform: translateX(-50%); z-index: 6;
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 14px; border-radius: 999px; pointer-events: none;
  font-size: .76rem; font-weight: 700; letter-spacing: .04em; color: var(--text-dim);
  background: rgba(10, 12, 16, .55); border: 1px solid rgba(255, 255, 255, .1);
  backdrop-filter: blur(6px);
  animation: beFeedHint 2.6s ease-in-out infinite;
  transition: opacity .4s ease;
}
.be-feed-hint.hide { opacity: 0; }
.be-feed-hint-ico { font-size: .7rem; color: var(--accent-2); }
@keyframes beFeedHint {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50% { transform: translateX(-50%) translateY(-5px); }
}

/* ------------------------------------------------- end-of-feed card */
.be-feed-end {
  height: 100%; scroll-snap-align: start;
  display: flex; align-items: center; justify-content: center;
  padding: 40px 20px calc(40px + env(safe-area-inset-bottom));
  text-align: center;
}
.be-feed-end-inner { max-width: 340px; }
.be-feed-end h3 { margin: 0 0 8px; font-size: 1.4rem; }
.be-feed-end p { margin: 0 0 18px; }

/* ------------------------------------------------- responsive */
@media (max-width: 480px) {
  .be-feed-prices { grid-template-columns: 1fr; }
  .be-feed-prices .be-buy { display: flex; flex-direction: row; align-items: center; justify-content: space-between; gap: 10px; padding: 11px 14px; }
  .be-feed-prices .be-buy .price { margin-left: auto; }
  .be-feed-title { font-size: 1.2rem; }
}
@media (max-height: 560px) {
  .be-feed-art { min-height: 120px; }
  .be-feed-title { font-size: 1.1rem; }
}

@media (prefers-reduced-motion: reduce) {
  .be-feed.open { animation: none; }
  .be-feed-hint { animation: none; }
  .be-feed-brand-dot { animation: none; }
  .be-feed-play, .be-feed-mute, .be-feed-close, .be-feed-btn { transition: none; }
}

/* ============================================================================
   Section 123: certificate of authorship on Beats + publish-to-registry.
   ========================================================================== */

/* Provenance badge on a beat card (sits in the meta row, before the like). */
.tb-prov {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: .68rem; font-weight: 700; letter-spacing: .03em;
  color: var(--accent-3);
  background: rgba(53, 255, 158, .08);
  border: 1px solid rgba(53, 255, 158, .35);
  border-radius: 999px; padding: 3px 9px;
  transform: translateZ(24px);
}
.tb-prov span[aria-hidden] { font-size: .8rem; line-height: 1; }

/* Certificate of authorship block in the beat detail modal. */
.be-cert {
  margin-top: 14px; border: 1px solid var(--border); border-radius: 14px;
  background: linear-gradient(180deg, rgba(53, 255, 158, .06), rgba(23, 26, 33, .6));
  padding: 13px 15px;
}
.be-cert-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.be-cert-seal { font-size: 1.25rem; line-height: 1; }
.be-cert-head b { display: block; font-size: .92rem; }
.be-cert-head small { display: block; color: var(--text-dim); font-size: .74rem; }
.be-cert-rows { display: grid; gap: 6px; margin-bottom: 11px; }
.be-cert-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; font-size: .8rem; }
.be-cert-row span { color: var(--text-dim); }
.be-cert-row b { font-weight: 700; text-align: right; }
.be-cert-hash { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .74rem; color: var(--accent-2); }
.be-cert-link { display: inline-flex; align-items: center; gap: 6px; font-size: .82rem; font-weight: 700; color: var(--accent-2); text-decoration: none; }
.be-cert-link:hover { text-decoration: underline; }
.be-cert-note { font-size: .76rem; color: var(--text-dim); font-style: italic; }

/* Publish button on a "My beats" listing row. */
.be-mini-pub { border-color: rgba(53, 194, 255, .35); color: var(--accent-2); }
.be-mini-pub:hover { border-color: var(--accent-2); }
.be-mini-pub.on { color: var(--accent-3); border-color: rgba(53, 255, 158, .5); background: rgba(53, 255, 158, .08); }

/* Publish toggle in the sell form. */
.be-pub-toggle {
  display: flex; align-items: flex-start; gap: 10px; cursor: pointer;
  border: 1px solid var(--border); border-radius: 12px; padding: 11px 13px;
  background: var(--panel); font-size: .82rem; line-height: 1.5; color: var(--text-dim);
}
.be-pub-toggle input { margin-top: 2px; width: 16px; height: 16px; accent-color: var(--accent-3); flex: 0 0 auto; }
.be-pub-toggle b { color: var(--text); }

/* A "My beats" row now carries a publish button too (4 columns on desktop). */
.be-my-row { grid-template-columns: 1fr auto auto auto; }
@media (max-width: 720px) { .be-my-row { grid-template-columns: 1fr; } }