/* JammBeat sticky audio player */
#beatlink-player {
  position:fixed;
  left:0;
  right:0;
  bottom:0;
  z-index:1200;
  min-height:78px;
  display:grid;
  grid-template-columns:minmax(260px,1fr) minmax(300px,1.15fr) minmax(260px,1fr);
  align-items:center;
  gap:20px;
  padding:10px 24px;
  color:#fff;
  background:rgba(10,10,10,.98);
  border-top:1px solid rgba(255,255,255,.1);
  box-shadow:0 -14px 32px rgba(0,0,0,.42);
  backdrop-filter:blur(18px);
}

.player-left,
.player-center,
.player-right,
.player-track-actions,
.player-controls,
.player-progress-wrap,
.player-volume-wrap,
.player-cta-wrap,
.player-playlist-toggle {
  display:flex;
  align-items:center;
}

.player-left { min-width:0; gap:12px; }
.player-center { min-width:0; flex-direction:column; gap:8px; }
.player-right { justify-content:flex-end; gap:12px; min-width:0; }

.player-cover-wrap {
  position:relative;
  width:52px;
  height:52px;
  flex:0 0 52px;
  overflow:hidden;
  border-radius:7px;
  background:linear-gradient(135deg,#242424,#101010);
  border:1px solid rgba(255,255,255,.1);
}

.player-cover-wrap img { width:100%; height:100%; object-fit:cover; }
.player-cover-wrap img.is-missing { opacity:0; }
.player-cover-overlay {
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  background:rgba(0,0,0,.36);
  opacity:0;
  transition:opacity .18s ease;
}
.player-cover-wrap:hover .player-cover-overlay { opacity:1; }
.player-cover-overlay svg { width:18px; height:18px; fill:currentColor; }

.player-track-info { min-width:0; }
.player-track-title {
  max-width:280px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:13px;
  font-weight:800;
}
.player-track-artist a {
  display:block;
  max-width:240px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  color:rgba(255,255,255,.56);
  font-size:12px;
  margin-top:1px;
}
.player-track-tags,
.player-track-actions {
  gap:6px;
  margin-top:6px;
}
.player-tag {
  display:none;
  padding:2px 6px;
  border-radius:4px;
  background:rgba(255,255,255,.07);
  color:rgba(255,255,255,.58);
  font-size:10px;
  font-weight:700;
}
.player-tag:not(:empty) { display:inline-flex; }

.player-action-btn,
.player-btn,
.player-volume-btn,
.player-playlist-toggle {
  border:0;
  color:rgba(255,255,255,.72);
  background:transparent;
  transition:color .18s ease, background .18s ease, transform .18s ease;
}
.player-action-btn {
  width:24px;
  height:24px;
  align-items:center;
  justify-content:center;
  border-radius:5px;
}
.player-action-btn:hover,
.player-volume-btn:hover,
.player-playlist-toggle:hover,
.player-btn:hover { color:#fff; background:rgba(255,255,255,.08); }
.player-action-btn svg { width:14px; height:14px; }

.player-controls { gap:8px; justify-content:center; }
.player-btn {
  width:32px;
  height:32px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:999px;
}
.player-btn svg { width:16px; height:16px; }
.player-btn-play {
  width:40px;
  height:40px;
  color:#fff;
  background:linear-gradient(180deg,#f3c97b,#d4a24c);
  color:#1a0e05;
}
.player-btn-play:hover { background:#f3c97b; transform:translateY(-1px); }
.player-btn.is-active { color:#fff; background:rgba(108,99,255,.18); }

.player-progress-wrap {
  width:100%;
  max-width:520px;
  gap:10px;
}
.player-time {
  width:38px;
  flex:0 0 38px;
  font-size:11px;
  color:rgba(255,255,255,.46);
  font-variant-numeric:tabular-nums;
}
.player-time-total { text-align:right; }
.player-waveform-wrap {
  position:relative;
  flex:1;
  min-width:120px;
  height:30px;
}
#player-waveform { width:100%; height:30px; display:block; }
.player-progress-bar-wrap {
  display:none;
  flex:1;
  height:4px;
  border-radius:999px;
  background:rgba(255,255,255,.12);
  overflow:hidden;
}
.player-progress-bar-fill {
  width:0%;
  height:100%;
  background:linear-gradient(180deg,#f3c97b,#d4a24c);
  border-radius:inherit;
}

.player-volume-wrap { gap:7px; }
.player-volume-btn {
  width:28px;
  height:28px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:6px;
}
.player-volume-btn svg,
.player-playlist-toggle svg { width:16px; height:16px; }
.player-volume-slider { width:82px; accent-color:#d4a24c; }
.player-divider { width:1px; height:28px; background:rgba(255,255,255,.08); }

.player-cta-wrap { gap:8px; }
.player-cta-btn {
  display:inline-flex;
  align-items:center;
  gap:6px;
  min-height:32px;
  padding:0 11px;
  border-radius:7px;
  font-size:12px;
  font-weight:800;
  white-space:nowrap;
  color:#fff;
  border:1px solid rgba(255,255,255,.1);
  background:rgba(255,255,255,.07);
}
.player-cta-btn svg { width:14px; height:14px; }
.player-cta-buy { background:linear-gradient(180deg,#f3c97b,#d4a24c); border-color:#d4a24c; color:#1a0e05; }
.player-cta-btn:hover { background:rgba(255,255,255,.12); }
.player-cta-buy:hover { background:#f3c97b; border-color:#f3c97b; }

.player-playlist-toggle {
  gap:7px;
  min-height:32px;
  padding:0 10px;
  border-radius:7px;
  font-size:12px;
  font-weight:800;
}

#player-tracklist {
  display:none;
  position:fixed;
  right:24px;
  bottom:88px;
  z-index:1190;
  width:min(380px,calc(100vw - 32px));
  max-height:380px;
  overflow:hidden;
  color:#fff;
  background:#120d08;
  border:1px solid rgba(255,255,255,.1);
  border-radius:8px;
  box-shadow:0 18px 40px rgba(0,0,0,.5);
}
#player-tracklist.is-open { display:block; }
.tracklist-header {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:13px 14px;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.tracklist-header-title { font-size:12px; font-weight:800; }
.tracklist-count { font-size:11px; color:rgba(255,255,255,.45); }
#player-tracklist-body { max-height:322px; overflow:auto; }
.player-tracklist-item {
  display:grid;
  grid-template-columns:34px 1fr auto;
  align-items:center;
  gap:10px;
  width:100%;
  padding:10px 14px;
  border:0;
  border-bottom:1px solid rgba(255,255,255,.04);
  text-align:left;
  color:#fff;
  background:transparent;
}
.player-tracklist-item:hover,
.player-tracklist-item.is-active { background:rgba(255,255,255,.06); }
.player-tracklist-cover { width:34px; height:34px; border-radius:5px; object-fit:cover; background:#222; }
.player-tracklist-title { min-width:0; font-size:12px; font-weight:800; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.player-tracklist-artist { margin-top:1px; color:rgba(255,255,255,.45); font-size:11px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.player-tracklist-price { color:#f3c97b; font-size:11px; font-weight:800; white-space:nowrap; }

.jb-toast-wrap {
  position:fixed;
  right:18px;
  bottom:102px;
  z-index:1300;
  display:flex;
  flex-direction:column;
  gap:8px;
  pointer-events:none;
}
.jb-toast {
  min-width:220px;
  max-width:340px;
  padding:11px 13px;
  border-radius:7px;
  color:#fff;
  background:#120d08;
  border:1px solid rgba(255,255,255,.1);
  box-shadow:0 10px 28px rgba(0,0,0,.42);
  font-size:12px;
  font-weight:700;
}
.jb-toast.success { border-color:rgba(16,185,129,.35); }
.jb-toast.info { border-color:rgba(108,99,255,.35); }
.jb-toast.error { border-color:rgba(239,68,68,.35); }

@media(max-width:980px) {
  body { padding-bottom:80px; }
  #beatlink-player { grid-template-columns:minmax(0,1fr) auto; gap:14px; padding:9px 16px; }
  .player-right { display:none; }
  .player-track-title { max-width:42vw; }
}

@media(max-width:640px) {
  body { padding-bottom:74px; }
  #beatlink-player { min-height:70px; padding:8px 12px; }
  .player-cover-wrap { width:46px; height:46px; flex-basis:46px; }
  .player-track-title { max-width:44vw; font-size:12px; }
  .player-track-artist a { max-width:44vw; font-size:11px; }
  .player-track-tags,
  .player-track-actions,
  .player-progress-wrap,
  .player-btn-skip { display:none; }
  .player-center { align-items:flex-end; }
  .player-btn-play { width:38px; height:38px; }
  #player-tracklist { right:12px; bottom:78px; }
  .jb-toast-wrap { right:12px; bottom:86px; }
}

/* JammBeat next-gen player skin */
body.app-shell #beatlink-player {
  min-height:82px;
  background:linear-gradient(180deg, rgba(19,23,32,.94), rgba(10,12,18,.97));
  border-top:1px solid rgba(168,85,247,.22);
  box-shadow:0 -24px 70px rgba(0,0,0,.46), 0 -1px 0 rgba(255,255,255,.05) inset;
}
body.app-shell .player-cover-wrap {
  border-radius:9px;
  border-color:rgba(255,255,255,.12);
  background:linear-gradient(135deg,rgba(168,85,247,.22),rgba(217,70,239,.16));
}
body.app-shell .player-track-title {
  color:#fff;
  font-weight:850;
}
body.app-shell .player-track-artist a,
body.app-shell .player-time,
body.app-shell .player-tag {
  color:rgba(248,250,252,.56);
}
body.app-shell .player-tag {
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.045);
}
body.app-shell .player-btn,
body.app-shell .player-volume-btn,
body.app-shell .player-playlist-toggle,
body.app-shell .player-action-btn {
  border-radius:8px;
  color:rgba(248,250,252,.74);
}
body.app-shell .player-btn:hover,
body.app-shell .player-volume-btn:hover,
body.app-shell .player-playlist-toggle:hover,
body.app-shell .player-action-btn:hover {
  color:#fff;
  background:rgba(168,85,247,.16);
}
body.app-shell .player-btn-play {
  width:44px;
  height:44px;
  border-radius:50%;
  color:#fff;
  background:linear-gradient(135deg,#7c3aed,#D946EF);
  box-shadow:0 12px 32px rgba(168,85,247,.34);
}
body.app-shell .player-btn-play:hover {
  background:linear-gradient(135deg,#8b5cf6,#e879f9);
}
body.app-shell .player-btn.is-active {
  color:#fff;
  background:rgba(217,70,239,.18);
}
body.app-shell .player-progress-bar-fill {
  background:linear-gradient(90deg,#7c3aed,#D946EF,#F0B94B);
}
body.app-shell .player-volume-slider {
  accent-color:#A855F7;
}
body.app-shell .player-divider {
  background:rgba(255,255,255,.10);
}
body.app-shell .player-cta-btn {
  border-radius:8px;
  color:#fff;
  border-color:rgba(255,255,255,.12);
  background:rgba(255,255,255,.06);
}
body.app-shell .player-cta-btn:hover {
  border-color:rgba(217,70,239,.42);
  background:rgba(168,85,247,.14);
}
body.app-shell .player-cta-buy {
  color:#fff;
  background:linear-gradient(135deg,#7c3aed,#D946EF);
  border-color:rgba(217,70,239,.55);
  box-shadow:0 10px 24px rgba(168,85,247,.22);
}
body.app-shell .player-cta-buy:hover {
  background:linear-gradient(135deg,#8b5cf6,#e879f9);
  border-color:rgba(217,70,239,.68);
}
body.app-shell .player-cta-topline {
  border-color:rgba(240,185,75,.30);
}
body.app-shell #player-tracklist,
body.app-shell .jb-toast {
  background:rgba(19,23,32,.96);
  border-color:rgba(255,255,255,.10);
  box-shadow:0 22px 60px rgba(0,0,0,.46);
  backdrop-filter:blur(20px);
}
body.app-shell .player-tracklist-item:hover,
body.app-shell .player-tracklist-item.is-active {
  background:rgba(168,85,247,.14);
}
body.app-shell .player-tracklist-price {
  color:#F0B94B;
}

@media(max-width:980px) {
  body.app-shell #beatlink-player {
    left:0;
    min-height:74px;
  }
}

/* Marketplace polish inspired by modern beat stores */
#beatlink-player {
  font-family:var(--font, 'Inter', system-ui, -apple-system, sans-serif);
  letter-spacing:0;
}
body.app-shell #beatlink-player {
  min-height:76px;
  grid-template-columns:minmax(270px,.95fr) minmax(360px,1.3fr) minmax(270px,.95fr);
  gap:18px;
  padding:9px clamp(18px,2vw,30px);
  background:rgba(12,14,21,.98);
  border-top:1px solid rgba(255,255,255,.11);
  box-shadow:0 -18px 54px rgba(0,0,0,.54), 0 -1px 0 rgba(168,85,247,.18);
}
body.app-shell .player-left {
  gap:14px;
}
body.app-shell .player-cover-wrap {
  width:54px;
  height:54px;
  flex-basis:54px;
  border-radius:6px;
  border-color:rgba(255,255,255,.16);
  box-shadow:0 10px 28px rgba(0,0,0,.34);
}
body.app-shell .player-track-title {
  max-width:300px;
  font-family:var(--font, 'Inter', system-ui, -apple-system, sans-serif);
  font-size:13.5px;
  font-weight:900;
  letter-spacing:0;
}
body.app-shell .player-track-artist a {
  max-width:260px;
  color:rgba(248,250,252,.50);
  font-size:11.5px;
  font-weight:600;
}
body.app-shell .player-track-actions {
  gap:4px;
  margin-top:7px;
}
body.app-shell .player-action-btn {
  width:26px;
  height:26px;
  border:1px solid transparent;
}
body.app-shell .player-action-btn:hover {
  border-color:rgba(255,255,255,.10);
}
body.app-shell .player-controls {
  gap:7px;
}
body.app-shell .player-btn {
  width:31px;
  height:31px;
}
body.app-shell .player-btn-play {
  width:42px;
  height:42px;
  background:linear-gradient(135deg,#8b5cf6 0%,#c026d3 100%);
  box-shadow:0 12px 30px rgba(192,38,211,.28);
}
body.app-shell .player-waveform-wrap,
body.app-shell #player-waveform {
  height:32px;
}
body.app-shell .player-time {
  color:rgba(248,250,252,.42);
  font-size:10.5px;
  font-weight:600;
}
body.app-shell .player-volume-slider {
  width:78px;
}
body.app-shell .player-cta-wrap {
  gap:8px;
}
body.app-shell .player-cta-btn {
  min-height:34px;
  padding:0 12px;
  border-radius:7px;
  font-size:12px;
  font-weight:900;
  letter-spacing:0;
}
body.app-shell .player-cta-topline {
  background:rgba(255,255,255,.055);
}
body.app-shell .player-playlist-toggle {
  min-height:34px;
  padding:0 9px;
}

@media(max-width:980px) {
  body.app-shell #beatlink-player {
    grid-template-columns:minmax(0,1fr) auto auto;
    gap:10px;
    padding:9px 14px;
  }
  body.app-shell .player-right {
    display:flex;
    gap:8px;
  }
  body.app-shell .player-volume-wrap,
  body.app-shell .player-right > .player-divider,
  body.app-shell .player-playlist-toggle {
    display:none;
  }
  body.app-shell .player-cta-wrap {
    display:flex;
  }
}

@media(max-width:640px) {
  body.app-shell #beatlink-player {
    min-height:72px;
  }
  body.app-shell .player-cover-wrap {
    width:46px;
    height:46px;
    flex-basis:46px;
  }
  body.app-shell .player-track-title {
    max-width:39vw;
  }
  body.app-shell .player-track-artist a {
    max-width:39vw;
  }
  body.app-shell .player-cta-btn {
    width:38px;
    min-width:38px;
    padding:0;
    justify-content:center;
    font-size:0;
  }
  body.app-shell .player-cta-btn svg {
    width:16px;
    height:16px;
  }
}

/* Sonaar-inspired continuous player */
body.app-shell {
  padding-bottom:138px;
}

body.app-shell #beatlink-player {
  --player-bg:#050506;
  --player-surface:#0b0c10;
  --player-line:rgba(255,255,255,.105);
  --player-muted:rgba(255,255,255,.54);
  --player-gold:#f4c35f;
  --player-purple:#b83cff;
  min-height:126px;
  grid-template-columns:minmax(300px,340px) minmax(360px,1fr) minmax(290px,360px);
  align-items:center;
  gap:clamp(18px,2.4vw,34px);
  padding:16px clamp(18px,3vw,46px);
  font-family:var(--font, 'Inter', system-ui, -apple-system, sans-serif);
  color:#fff;
  background:
    radial-gradient(circle at 50% 0, rgba(168,85,247,.16), transparent 36%),
    linear-gradient(180deg, rgba(16,16,18,.98), rgba(4,4,5,.99));
  border-top:1px solid rgba(255,255,255,.14);
  box-shadow:0 -30px 90px rgba(0,0,0,.72), 0 -1px 0 rgba(168,85,247,.24);
  backdrop-filter:blur(22px) saturate(150%);
}

body.app-shell #beatlink-player::before {
  content:'';
  position:absolute;
  left:0;
  right:0;
  top:0;
  height:1px;
  background:linear-gradient(90deg, transparent, rgba(244,195,95,.55), rgba(184,60,255,.56), transparent);
  pointer-events:none;
}

body.app-shell .player-left {
  min-width:0;
  gap:15px;
}

body.app-shell .player-cover-wrap {
  width:74px;
  height:74px;
  flex:0 0 74px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,.16);
  background:linear-gradient(135deg, rgba(168,85,247,.28), rgba(244,195,95,.16));
  box-shadow:0 18px 38px rgba(0,0,0,.45);
}

body.app-shell .player-cover-overlay {
  background:rgba(0,0,0,.48);
}

body.app-shell .player-track-info {
  min-width:0;
  padding-top:2px;
}

body.app-shell .player-track-title {
  max-width:260px;
  color:#fff;
  font-family:var(--font-display, var(--font, 'Inter', system-ui, sans-serif));
  font-size:15px;
  font-weight:900;
  line-height:1.15;
  letter-spacing:-.01em;
}

body.app-shell .player-track-artist a {
  max-width:250px;
  margin-top:5px;
  color:var(--player-muted);
  font-size:12px;
  font-weight:700;
}

body.app-shell .player-track-tags {
  margin-top:8px;
  gap:6px;
}

body.app-shell .player-tag {
  min-height:22px;
  align-items:center;
  padding:0 8px;
  border:1px solid rgba(255,255,255,.09);
  border-radius:999px;
  color:rgba(255,255,255,.58);
  background:rgba(255,255,255,.055);
  font-size:10px;
  font-weight:850;
}

body.app-shell .player-track-actions {
  display:none;
}

body.app-shell .player-center {
  min-width:0;
  height:100%;
  display:flex;
  flex-direction:column-reverse;
  justify-content:center;
  gap:12px;
}

body.app-shell .player-progress-wrap {
  width:100%;
  max-width:none;
  height:50px;
  gap:12px;
}

body.app-shell .player-time {
  width:42px;
  flex:0 0 42px;
  color:rgba(255,255,255,.66);
  font-size:11px;
  font-weight:800;
  line-height:1;
}

body.app-shell .player-waveform-wrap {
  height:48px;
  min-width:180px;
  cursor:pointer;
}

body.app-shell #player-waveform {
  height:48px;
  opacity:.96;
}

body.app-shell .player-controls {
  gap:12px;
}

body.app-shell .player-btn,
body.app-shell .player-volume-btn,
body.app-shell .player-playlist-toggle {
  border:1px solid transparent;
  color:rgba(255,255,255,.82);
  background:transparent;
}

body.app-shell .player-btn {
  width:38px;
  height:38px;
  border-radius:50%;
}

body.app-shell .player-btn svg {
  width:17px;
  height:17px;
}

body.app-shell .player-btn:hover,
body.app-shell .player-volume-btn:hover,
body.app-shell .player-playlist-toggle:hover {
  color:#fff;
  border-color:rgba(255,255,255,.11);
  background:rgba(255,255,255,.07);
}

body.app-shell .player-btn-play {
  width:54px;
  height:54px;
  color:#050506;
  background:linear-gradient(180deg, #fff 0%, #f4c35f 100%);
  box-shadow:0 14px 40px rgba(244,195,95,.28), 0 0 0 7px rgba(244,195,95,.08);
}

body.app-shell .player-btn-play:hover {
  color:#050506;
  background:linear-gradient(180deg, #fff 0%, #ffd778 100%);
  transform:translateY(-1px) scale(1.02);
}

body.app-shell .player-btn-play svg {
  width:22px;
  height:22px;
}

body.app-shell .player-btn.is-active {
  color:#fff;
  border-color:rgba(244,195,95,.24);
  background:rgba(244,195,95,.12);
}

body.app-shell .player-right {
  min-width:0;
  justify-content:flex-end;
  gap:12px;
}

body.app-shell .player-volume-wrap {
  min-width:118px;
  justify-content:flex-end;
}

body.app-shell .player-volume-btn,
body.app-shell .player-playlist-toggle {
  width:38px;
  min-height:38px;
  justify-content:center;
  border-radius:50%;
}

body.app-shell .player-volume-slider {
  width:86px;
  accent-color:var(--player-gold);
}

body.app-shell .player-divider {
  width:1px;
  height:38px;
  background:rgba(255,255,255,.10);
}

body.app-shell .player-cta-wrap {
  gap:9px;
}

body.app-shell .player-cta-btn {
  min-height:42px;
  padding:0 14px;
  border-radius:9px;
  border:1px solid rgba(255,255,255,.12);
  color:#fff;
  background:rgba(255,255,255,.065);
  font-size:12px;
  font-weight:900;
  letter-spacing:-.005em;
}

body.app-shell .player-cta-btn svg {
  width:16px;
  height:16px;
}

body.app-shell .player-cta-topline {
  border-color:rgba(244,195,95,.35);
  background:rgba(244,195,95,.08);
}

body.app-shell .player-cta-buy {
  color:#fff;
  border-color:rgba(184,60,255,.48);
  background:linear-gradient(135deg, #7c3aed 0%, #c026d3 100%);
  box-shadow:0 14px 30px rgba(184,60,255,.22);
}

body.app-shell .player-cta-btn:hover {
  color:#fff;
  border-color:rgba(255,255,255,.24);
  background:rgba(255,255,255,.10);
}

body.app-shell .player-cta-buy:hover {
  background:linear-gradient(135deg, #8b5cf6 0%, #d946ef 100%);
}

body.app-shell .player-playlist-toggle {
  padding:0;
}

body.app-shell .player-playlist-toggle span {
  display:none;
}

body.app-shell #player-tracklist {
  right:clamp(18px,3vw,46px);
  bottom:142px;
  width:min(470px, calc(100vw - 36px));
  max-height:440px;
  overflow:hidden;
  border-radius:14px;
  background:rgba(8,9,12,.96);
  border:1px solid rgba(255,255,255,.12);
  box-shadow:0 28px 86px rgba(0,0,0,.62);
  backdrop-filter:blur(24px) saturate(150%);
}

body.app-shell .tracklist-header {
  padding:16px 18px;
}

body.app-shell .tracklist-header-title {
  font-size:13px;
  letter-spacing:-.01em;
}

body.app-shell #player-tracklist-body {
  max-height:372px;
}

body.app-shell .player-tracklist-item {
  grid-template-columns:46px minmax(0,1fr) auto;
  gap:12px;
  padding:12px 18px;
}

body.app-shell .player-tracklist-cover {
  width:46px;
  height:46px;
  border-radius:8px;
}

body.app-shell .player-tracklist-title {
  font-size:13px;
}

body.app-shell .player-tracklist-artist {
  color:rgba(255,255,255,.52);
  font-size:11.5px;
}

body.app-shell .player-tracklist-price {
  color:var(--player-gold);
}

body.app-shell .jb-toast-wrap {
  bottom:150px;
}

@media(max-width:1120px) {
  body.app-shell #beatlink-player {
    grid-template-columns:minmax(240px,300px) minmax(260px,1fr) auto;
    gap:14px;
    padding-left:18px;
    padding-right:18px;
  }
  body.app-shell .player-volume-wrap,
  body.app-shell .player-right > .player-divider:first-of-type {
    display:none;
  }
  body.app-shell .player-track-title,
  body.app-shell .player-track-artist a {
    max-width:220px;
  }
  body.app-shell .player-cta-buy span {
    max-width:82px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }
}

@media(max-width:820px) {
  body.app-shell {
    padding-bottom:116px;
  }
  body.app-shell #beatlink-player {
    min-height:106px;
    grid-template-columns:minmax(0,1fr) auto;
    grid-template-areas:
      "left controls"
      "progress progress";
    align-items:center;
    row-gap:8px;
    padding:10px 13px 12px;
  }
  body.app-shell .player-left {
    grid-area:left;
    gap:11px;
  }
  body.app-shell .player-center {
    display:contents;
  }
  body.app-shell .player-controls {
    grid-area:controls;
    justify-content:flex-end;
  }
  body.app-shell .player-progress-wrap {
    grid-area:progress;
    height:30px;
    gap:8px;
  }
  body.app-shell .player-waveform-wrap,
  body.app-shell #player-waveform {
    height:30px;
  }
  body.app-shell .player-right {
    display:none;
  }
  body.app-shell .player-cover-wrap {
    width:52px;
    height:52px;
    flex-basis:52px;
    border-radius:8px;
  }
  body.app-shell .player-track-title {
    max-width:52vw;
    font-size:13.5px;
  }
  body.app-shell .player-track-artist a {
    max-width:52vw;
  }
  body.app-shell .player-track-tags {
    display:none;
  }
  body.app-shell .player-btn-skip,
  body.app-shell .player-btn-shuffle,
  body.app-shell .player-btn-repeat {
    display:none;
  }
  body.app-shell .player-btn-play {
    width:48px;
    height:48px;
  }
  body.app-shell #player-tracklist {
    right:12px;
    bottom:118px;
  }
  body.app-shell .jb-toast-wrap {
    right:12px;
    bottom:126px;
  }
}

@media(max-width:520px) {
  body.app-shell {
    padding-bottom:106px;
  }
  body.app-shell #beatlink-player {
    min-height:98px;
  }
  body.app-shell .player-cover-wrap {
    width:46px;
    height:46px;
    flex-basis:46px;
  }
  body.app-shell .player-track-title {
    max-width:48vw;
    font-size:12.5px;
  }
  body.app-shell .player-track-artist a {
    max-width:48vw;
    font-size:11px;
  }
  body.app-shell .player-time {
    width:34px;
    flex-basis:34px;
    font-size:10px;
  }
  body.app-shell .player-btn-play {
    width:44px;
    height:44px;
  }
}

/* Long Sonaar-like waveform pass */
body.app-shell {
  padding-bottom:116px;
}

body.app-shell #beatlink-player {
  min-height:104px;
  grid-template-columns:minmax(250px,318px) minmax(132px,168px) minmax(420px,1fr) max-content;
  grid-template-areas:"left controls progress right";
  gap:clamp(14px,1.8vw,26px);
  padding:12px clamp(18px,2.8vw,42px);
}

body.app-shell .player-left {
  grid-area:left;
}

body.app-shell .player-center {
  display:contents;
}

body.app-shell .player-controls {
  grid-area:controls;
  align-self:center;
  justify-content:center;
  gap:9px;
}

body.app-shell .player-progress-wrap {
  grid-area:progress;
  align-self:center;
  height:62px;
  max-width:none;
  gap:12px;
}

body.app-shell .player-waveform-wrap,
body.app-shell #player-waveform {
  height:62px;
}

body.app-shell .player-waveform-wrap {
  min-width:0;
}

body.app-shell .player-right {
  grid-area:right;
}

body.app-shell .player-cover-wrap {
  width:64px;
  height:64px;
  flex-basis:64px;
}

body.app-shell .player-btn {
  width:34px;
  height:34px;
}

body.app-shell .player-btn-play {
  width:48px;
  height:48px;
}

body.app-shell .player-time {
  width:44px;
  flex-basis:44px;
  color:rgba(255,255,255,.70);
}

body.app-shell .player-cta-btn {
  min-height:38px;
}

body.app-shell #player-tracklist {
  bottom:122px;
}

body.app-shell .jb-toast-wrap {
  bottom:128px;
}

@media(max-width:1180px) {
  body.app-shell #beatlink-player {
    grid-template-columns:minmax(168px,190px) 64px minmax(0,1fr);
    grid-template-areas:"left controls progress";
    gap:12px;
  }
  body.app-shell .player-right {
    display:none;
  }
  body.app-shell .player-cover-wrap {
    width:52px;
    height:52px;
    flex-basis:52px;
  }
  body.app-shell .player-track-title,
  body.app-shell .player-track-artist a {
    max-width:104px;
  }
  body.app-shell .player-track-tags {
    display:none;
  }
  body.app-shell .player-controls {
    gap:7px;
  }
  body.app-shell .player-btn-prev,
  body.app-shell #pl-btn-prev,
  body.app-shell #pl-btn-next,
  body.app-shell .player-btn-shuffle,
  body.app-shell .player-btn-repeat {
    display:none;
  }
  body.app-shell .player-btn-play {
    width:50px;
    height:50px;
  }
  body.app-shell .player-progress-wrap {
    min-width:0;
  }
}

@media(max-width:900px) {
  body.app-shell {
    padding-bottom:124px;
  }
  body.app-shell #beatlink-player {
    min-height:114px;
    grid-template-columns:minmax(0,1fr) auto;
    grid-template-areas:
      "left controls"
      "progress progress";
    row-gap:8px;
    padding:10px 14px 12px;
  }
  body.app-shell .player-progress-wrap {
    height:44px;
  }
  body.app-shell .player-waveform-wrap,
  body.app-shell #player-waveform {
    height:44px;
  }
  body.app-shell .player-right {
    display:none;
  }
  body.app-shell .player-btn-skip,
  body.app-shell .player-btn-shuffle,
  body.app-shell .player-btn-repeat {
    display:none;
  }
  body.app-shell .player-cover-wrap {
    width:50px;
    height:50px;
    flex-basis:50px;
  }
}

@media(max-width:520px) {
  body.app-shell {
    padding-bottom:116px;
  }
  body.app-shell #beatlink-player {
    min-height:108px;
  }
  body.app-shell .player-progress-wrap {
    height:38px;
    gap:7px;
  }
  body.app-shell .player-waveform-wrap,
  body.app-shell #player-waveform {
    height:38px;
  }
}

/* JammBeat premium player refinement */
body.app-shell #beatlink-player {
  min-height:96px;
  background:
    radial-gradient(circle at 50% 0%, rgba(168,85,247,.12), transparent 38%),
    linear-gradient(180deg, rgba(13,14,21,.98), rgba(7,8,13,.99));
  border-top:1px solid rgba(168,85,247,.24);
  box-shadow:0 -22px 54px rgba(0,0,0,.58), 0 -1px 0 rgba(217,70,239,.13);
}

body.app-shell .player-cover-wrap {
  border-radius:10px;
  border-color:rgba(255,255,255,.12);
  box-shadow:0 12px 34px rgba(0,0,0,.40);
}

body.app-shell .player-track-title {
  font-size:14px;
  letter-spacing:0;
}

body.app-shell .player-tag {
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.06);
  color:rgba(255,255,255,.62);
}

body.app-shell .player-btn-play {
  width:46px;
  height:46px;
  color:#fff;
  border:1px solid rgba(255,255,255,.16);
  background:
    radial-gradient(circle at 34% 22%, rgba(255,255,255,.26), transparent 34%),
    linear-gradient(135deg, rgba(168,85,247,.96), rgba(217,70,239,.88));
  box-shadow:
    0 16px 34px rgba(168,85,247,.30),
    0 0 0 7px rgba(168,85,247,.08),
    inset 0 1px 0 rgba(255,255,255,.22);
}

body.app-shell .player-btn-play:hover {
  color:#fff;
  background:
    radial-gradient(circle at 34% 22%, rgba(255,255,255,.30), transparent 34%),
    linear-gradient(135deg, rgba(192,132,252,1), rgba(217,70,239,.96));
  transform:translateY(-1px) scale(1.02);
  box-shadow:
    0 18px 40px rgba(217,70,239,.34),
    0 0 0 7px rgba(217,70,239,.10),
    inset 0 1px 0 rgba(255,255,255,.26);
}

body.app-shell .player-btn-play svg {
  width:18px;
  height:18px;
}

body.app-shell .player-progress-wrap {
  height:54px;
}

body.app-shell .player-waveform-wrap,
body.app-shell #player-waveform {
  height:54px;
}

body.app-shell .player-time {
  color:rgba(255,255,255,.55);
  font-size:10.5px;
}

body.app-shell .player-volume-slider {
  accent-color:#A855F7;
}

body.app-shell .player-cta-btn {
  border-radius:9px;
}

body.app-shell .player-cta-topline {
  color:#fff;
  border-color:rgba(240,185,75,.24);
  background:rgba(240,185,75,.07);
}

body.app-shell .player-cta-buy {
  color:#fff;
  border-color:rgba(217,70,239,.44);
  background:linear-gradient(135deg,#7c3aed,#D946EF);
  box-shadow:0 12px 28px rgba(168,85,247,.20);
}

body.app-shell .player-cta-buy:hover {
  color:#fff;
  border-color:rgba(217,70,239,.62);
  background:linear-gradient(135deg,#8b5cf6,#e879f9);
}

@media(max-width:900px) {
  body.app-shell #beatlink-player {
    min-height:108px;
  }

  body.app-shell .player-progress-wrap,
  body.app-shell .player-waveform-wrap,
  body.app-shell #player-waveform {
    height:40px;
  }
}

@media(max-width:520px) {
  body.app-shell .player-btn-play {
    width:42px;
    height:42px;
  }
}

/* Final JammBeat player direction: waveform first, controls underneath */
body.app-shell {
  padding-bottom:126px;
}

body.app-shell #beatlink-player {
  --player-gold:var(--jb-gold, var(--accent2, #F0B94B));
  --player-bg:#050506;
  min-height:118px;
  grid-template-columns:minmax(240px,1fr) auto minmax(320px,1fr);
  grid-template-rows:38px 54px;
  grid-template-areas:
    "progress progress progress"
    "left controls right";
  align-items:center;
  column-gap:clamp(14px,2.4vw,34px);
  row-gap:8px;
  padding:9px clamp(18px,3vw,44px) 13px;
  background:linear-gradient(180deg, rgba(8,8,9,.99), rgba(3,3,4,.99));
  border-top:1px solid rgba(255,255,255,.12);
  box-shadow:0 -24px 70px rgba(0,0,0,.72), 0 -1px 0 rgba(240,185,75,.28);
}

body.app-shell #beatlink-player::before {
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.16), rgba(240,185,75,.46), transparent);
}

body.app-shell .player-center {
  display:contents;
}

body.app-shell .player-progress-wrap {
  grid-area:progress;
  justify-self:center;
  width:min(100%, 1360px);
  max-width:none;
  height:38px;
  gap:13px;
}

body.app-shell .player-waveform-wrap,
body.app-shell #player-waveform {
  height:38px;
}

body.app-shell .player-waveform-wrap {
  min-width:0;
  cursor:pointer;
}

body.app-shell .player-progress-bar-fill {
  background:var(--player-gold);
}

body.app-shell .player-left {
  grid-area:left;
}

body.app-shell .player-controls {
  grid-area:controls;
  align-self:center;
  justify-content:center;
  gap:10px;
}

body.app-shell .player-right {
  grid-area:right;
  align-self:center;
  justify-content:flex-end;
  gap:10px;
}

body.app-shell .player-cover-wrap {
  width:56px;
  height:56px;
  flex-basis:56px;
  border-radius:8px;
}

body.app-shell .player-track-title {
  max-width:300px;
  font-size:14px;
}

body.app-shell .player-track-artist a {
  max-width:280px;
}

body.app-shell .player-track-tags {
  margin-top:6px;
}

body.app-shell .player-time {
  width:42px;
  flex-basis:42px;
  color:rgba(255,255,255,.68);
  font-size:10.5px;
  font-weight:800;
}

body.app-shell .player-btn {
  width:34px;
  height:34px;
}

body.app-shell .player-btn-play {
  width:48px;
  height:48px;
  color:#050506;
  border:0;
  background:#fff;
  box-shadow:0 12px 32px rgba(255,255,255,.10), 0 0 0 7px rgba(255,255,255,.06);
}

body.app-shell .player-btn-play:hover {
  color:#050506;
  background:#fff;
  transform:translateY(-1px) scale(1.02);
  box-shadow:0 14px 36px rgba(255,255,255,.14), 0 0 0 7px rgba(240,185,75,.10);
}

body.app-shell .player-btn-play svg {
  width:19px;
  height:19px;
}

body.app-shell .player-volume-slider {
  accent-color:var(--player-gold);
}

body.app-shell .player-cta-wrap {
  gap:8px;
}

body.app-shell .player-cta-btn {
  min-height:38px;
  appearance:none;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  padding:0 13px;
  border-radius:999px;
  font-family:var(--font, 'Inter', system-ui, -apple-system, sans-serif);
  font-size:12px;
  font-weight:900;
  line-height:1;
  color:#fff;
  border:1px solid rgba(255,255,255,.13);
  background:rgba(255,255,255,.06);
}

body.app-shell .player-cta-btn svg {
  width:15px;
  height:15px;
  flex:0 0 15px;
}

body.app-shell .player-cta-fav.is-fav,
body.app-shell .player-cta-fav:hover,
body.app-shell .player-cta-topline:hover {
  color:#fff;
  border-color:rgba(255,255,255,.24);
  background:rgba(255,255,255,.11);
}

body.app-shell .player-cta-topline {
  color:#fff;
  border-color:rgba(240,185,75,.34);
  background:rgba(240,185,75,.08);
}

body.app-shell .player-cta-buy {
  color:#120d05;
  border-color:var(--player-gold);
  background:linear-gradient(180deg, #ffe3a1, var(--player-gold));
  box-shadow:0 14px 30px rgba(240,185,75,.20);
}

body.app-shell .player-cta-buy:hover {
  color:#120d05;
  border-color:#ffe3a1;
  background:linear-gradient(180deg, #fff0c4, #f7c957);
  box-shadow:0 16px 36px rgba(240,185,75,.26);
}

body.app-shell #player-tracklist {
  bottom:132px;
}

body.app-shell .jb-toast-wrap {
  bottom:140px;
}

@media(max-width:1180px) {
  body.app-shell #beatlink-player {
    grid-template-columns:minmax(190px,1fr) auto max-content;
    grid-template-areas:
      "progress progress progress"
      "left controls right";
    column-gap:12px;
    padding-left:16px;
    padding-right:16px;
  }

  body.app-shell .player-volume-wrap,
  body.app-shell .player-right > .player-divider,
  body.app-shell .player-playlist-toggle {
    display:none;
  }

  body.app-shell .player-track-title,
  body.app-shell .player-track-artist a {
    max-width:190px;
  }
}

@media(max-width:820px) {
  body.app-shell {
    padding-bottom:160px;
  }

  body.app-shell #beatlink-player {
    min-height:148px;
    grid-template-columns:minmax(0,1fr) auto;
    grid-template-rows:36px 50px 40px;
    grid-template-areas:
      "progress progress"
      "left controls"
      "right right";
    row-gap:7px;
    padding:9px 12px 12px;
  }

  body.app-shell .player-progress-wrap {
    display:flex;
    height:36px;
    gap:8px;
  }

  body.app-shell .player-waveform-wrap,
  body.app-shell #player-waveform {
    height:36px;
  }

  body.app-shell .player-left {
    gap:10px;
  }

  body.app-shell .player-cover-wrap {
    width:46px;
    height:46px;
    flex-basis:46px;
  }

  body.app-shell .player-track-title {
    max-width:48vw;
    font-size:12.5px;
  }

  body.app-shell .player-track-artist a {
    max-width:48vw;
    font-size:11px;
  }

  body.app-shell .player-track-tags,
  body.app-shell .player-btn-skip,
  body.app-shell .player-btn-shuffle,
  body.app-shell .player-btn-repeat {
    display:none;
  }

  body.app-shell .player-btn-play {
    width:42px;
    height:42px;
  }

  body.app-shell .player-right {
    display:flex;
    justify-self:stretch;
    justify-content:stretch;
    width:100%;
  }

  body.app-shell .player-cta-wrap {
    display:grid;
    grid-template-columns:1fr 1fr 1.1fr;
    width:100%;
  }

  body.app-shell .player-cta-btn {
    width:auto;
    min-width:0;
    min-height:38px;
    padding:0 8px;
    font-size:11px;
  }

  body.app-shell .player-time {
    width:34px;
    flex-basis:34px;
    font-size:10px;
  }

  body.app-shell #player-tracklist {
    bottom:164px;
  }

  body.app-shell .jb-toast-wrap {
    bottom:170px;
  }
}

@media(max-width:420px) {
  body.app-shell .player-cta-btn {
    gap:5px;
    font-size:10.5px;
  }

  body.app-shell .player-cta-btn svg {
    width:14px;
    height:14px;
  }
}

/* The sticky player appears only after a beat has been launched. */
body.app-shell:not(.has-active-player) {
  padding-bottom:0;
}

body.app-shell #beatlink-player {
  transition:
    transform .52s cubic-bezier(.16, 1, .3, 1),
    opacity .36s ease,
    visibility .36s ease;
  will-change:transform;
}

body.app-shell:not(.has-active-player) #beatlink-player {
  opacity:0;
  pointer-events:none;
  transform:translateY(calc(100% + 18px));
  visibility:hidden;
}

body.app-shell.has-active-player #beatlink-player {
  opacity:1;
  pointer-events:auto;
  transform:translateY(0);
  visibility:visible;
}

/* Beatmarket-inspired player identity v2 */
body.app-shell #beatlink-player {
  min-height:80px;
  color:#fff;
  background:rgba(10,10,9,.97);
  border-top:1px solid rgba(255,255,255,.10);
  box-shadow:0 -10px 30px rgba(0,0,0,.38);
}
body.app-shell .player-cover-wrap { border-radius:6px; background:#1a1a1a; }
body.app-shell .player-btn-play {
  color:#080808;
  background:#fff;
  box-shadow:none;
}
body.app-shell .player-btn-play:hover { color:#fff; background:var(--brand-blue,#006aff); }
body.app-shell .player-btn:hover,
body.app-shell .player-volume-btn:hover,
body.app-shell .player-playlist-toggle:hover,
body.app-shell .player-action-btn:hover { color:#fff; background:rgba(255,255,255,.08); }
body.app-shell .player-progress-bar-fill { background:var(--brand-blue,#006aff); }
body.app-shell .player-volume-slider { accent-color:var(--brand-blue,#006aff); }
body.app-shell .player-cta-btn { border-radius:999px; }
body.app-shell .player-cta-topline { color:#fff; border-color:rgba(255,255,255,.14); background:#1a1a1a; }
body.app-shell .player-cta-buy,
body.app-shell .player-cta-buy:hover {
  color:#07160d;
  border-color:var(--brand-green,#00d362);
  background:var(--brand-green,#00d362);
  box-shadow:none;
}
body.app-shell #player-tracklist,
body.app-shell .jb-toast { background:#141414; border-radius:8px; }
.player-tracklist-price { color:var(--brand-green,#00d362); }