/* =========================
   ITS.CHRXS — Store UI only
   (depends on /site.css)
   ========================= */

/* Store layout width (slightly wider than pages if you want) */
.wrap{ max-width: 1180px; } /* optional; remove if you want 980px like other pages */

/* ===== Store header rows ===== */
.topbar{
  display:flex;
  gap:16px;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
}

.row{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:center;
}

.brand .mini{
  margin-top: 3px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .15px;
  color: rgba(242,240,235,.65);
}

/* ===== Inputs in header row ===== */
.select{
  padding:10px 12px;
  border-radius:12px;
  border:1px solid var(--stroke);
  background: rgba(242,240,235,.04);
  color: var(--text);
  font-weight:800;
  min-height:44px;
}
.select:focus{
  outline:none;
  box-shadow: 0 0 0 3px var(--focus);
  border-color: rgba(242,240,235,.22);
}

/* ===== Pills (sort row) ===== */
.pill{
  display:inline-flex;
  gap:8px;
  align-items:center;
  padding:8px 10px;
  border-radius:999px;
  border:1px solid var(--stroke);
  background: rgba(242,240,235,.04);
  font-weight:900;
  font-size:12px;
}

/* ===== Store grid cards ===== */
.grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;
  margin-top:14px;
}
@media (max-width:980px){ .grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:640px){ .grid{ grid-template-columns:1fr; } }

/* Use site.css card but keep hover */
.card{
  transition: box-shadow .25s ease, border-color .25s ease, transform .25s ease;
  transition: transform .14s ease, border-color .14s ease, background .14s ease;
}
@media (hover:hover){
  .card:hover{
    transform: translateY(-2px);
    border-color: rgba(242,240,235,.22);
    background: linear-gradient(180deg, rgba(242,240,235,.07), rgba(242,240,235,.04));
  }
  /* Deep-link focus glow: used when arriving via /?beat=<id> */
.card.focusBeat{
  border-color: rgba(0,212,255,.55) !important;
  box-shadow: 0 0 0 3px var(--neonA), 0 18px 70px rgba(0,212,255,.10);


  transform: translateY(-2px);
  animation: focusPulse 2.1s ease-out 1;
}

@keyframes focusPulse{
  0%   { box-shadow: 0 0 0 0 rgba(155,220,255,.0), 0 0 0 rgba(155,220,255,.0); }
  18%  { box-shadow: 0 0 0 6px rgba(155,220,255,.16), 0 26px 90px rgba(155,220,255,.12); }
  100% { box-shadow: 0 0 0 0 rgba(155,220,255,.0), 0 0 0 rgba(155,220,255,.0); }
}

}

.title{ font-weight:1000; font-size:16px; margin:0; letter-spacing:.2px; }

.meta{
  margin-top:6px;
  font-size:12px;
  color: var(--muted);
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:center;
}

.badge{
  display:inline-flex;
  padding:5px 9px;
  border-radius:999px;
  border:1px solid var(--stroke);
  background: rgba(242,240,235,.06);
  font-weight:900;
  font-size:12px;
}
.badge.sold{
  border-color: rgba(255,120,120,.26);
  background: rgba(255,120,120,.10);
  color: rgba(255,120,120,.95);
}

/* ===== Player row ===== */
.playerRow{
  display:flex;
  gap:12px;
  align-items:center;
  justify-content:space-between;
}

/* ===== Play button (icon + optional label) ===== */
.playBtn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  min-width:132px;
  position:relative;
  overflow:hidden;
  transition: transform .12s ease, background .12s ease, border-color .12s ease;
}
.playBtn:active{ transform: scale(.985); }

.playIcon{
  width:18px;
  height:18px;
  display:inline-grid;
  place-items:center;
  border-radius:999px;
  border:1px solid rgba(242,240,235,.18);
  background: rgba(242,240,235,.06);
  flex:0 0 auto;
}
.playIcon svg{ width:12px; height:12px; display:block; }

.playLabel{ font-weight:1000; letter-spacing:.2px; display:none; }
@media (max-width:640px){ .playLabel{ display:inline; } }
@media (min-width:641px){
  .playBtn{ min-width:44px; padding-left:12px; padding-right:12px; }
}

/* Ripple */
.playBtn::after{
  content:"";
  position:absolute;
  left: var(--rx, 50%);
  top:  var(--ry, 50%);
  width: 10px;
  height: 10px;
  transform: translate(-50%, -50%) scale(0);
  border-radius: 999px;
  pointer-events:none;
  background: radial-gradient(circle, rgba(198,27,42,.28), transparent 60%);
  opacity:0;
}
.playBtn.rippling::after{ animation: umberRipple .38s ease-out; }
@keyframes umberRipple{
  0%   { transform: translate(-50%, -50%) scale(0);  opacity:.9; }
  100% { transform: translate(-50%, -50%) scale(22); opacity:0; }
}

/* Playing pulse */
.playBtn.isPlaying .playIcon{
  border-color: rgba(167,156,142,.28);
  box-shadow: 0 0 0 3px rgba(167,156,142,.18);
  animation: playPulse 1.2s ease-in-out infinite;
}
@keyframes playPulse{
  0%,100%{ box-shadow: 0 0 0 3px rgba(167,156,142,.16); }
  50%{    box-shadow: 0 0 0 5px rgba(167,156,142,.22); }
}
@media (prefers-reduced-motion: reduce){
  .playBtn.isPlaying .playIcon{ animation:none; }
}

/* ===== Waveform panel ===== */
.wavePanel{
  border-radius: var(--radius-sm);
  background: rgba(242,240,235,.03);
  border: 1px solid var(--stroke);
  padding: 10px;
  position: relative;
  overflow:hidden;
  transition: border-color .14s ease, box-shadow .14s ease, transform .14s ease;
}
/* Wave loading shimmer */

.wavePanel::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(
      110deg,
      transparent 30%,
      rgba(255,255,255,.06) 45%,
      transparent 60%
    );
  transform: translateX(-100%);
  animation: waveShimmer 1.6s infinite;
  pointer-events:none;
}

.wavePanel.isActive::before{
  display:none;
}

@keyframes waveShimmer{
  to{ transform:translateX(100%); }
}


/* Waveform canvas “pop” (subtle, no box) */
.wavePanel canvas{
  filter:
    drop-shadow(0 0 6px rgba(255,255,255,.10))
    drop-shadow(0 0 14px rgba(255,255,255,.06));
  opacity: .98;
}

/* When playing, add beat-colored bloom */
.wavePanel.isActive canvas{
  filter:
    drop-shadow(0 0 6px rgba(255,255,255,.14))
    drop-shadow(0 0 18px var(--waveGlow));
}


.wavePanel:hover{
  border-color: rgba(242,240,235,.22);
  box-shadow: 0 0 0 3px var(--neonA);
}


.wavePanel:active{ transform: scale(.996); }

/* Seek hint */
.waveHint{
  position:absolute;
  top:10px;
  right:12px;
  font-size:10.5px;
  letter-spacing:.22px;
  font-weight:900;
  color: rgba(242,240,235,.66);
  background: rgba(10,12,16,.55);
  border: 1px solid rgba(242,240,235,.12);
  border-radius: 999px;
  padding: 5px 9px;
  opacity:0;
  transform: translateY(-6px) scale(.98);
  transition: .14s ease;
  pointer-events:none;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 10px 24px rgba(0,0,0,.35);
}
.waveHint::before{
  content:"";
  display:inline-block;
  width:10px;
  height:2px;
  border-radius:999px;
  background: rgba(167,156,142,.55);
  margin-right:7px;
  vertical-align: middle;
  opacity:.7;
}
.wavePanel:hover .waveHint{
  opacity:.90;
  transform: translateY(0) scale(1);
}
@media (max-width:640px){ .waveHint{ display:none; } }

.seekNote{
  color: rgba(242,240,235,.45);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .15px;
}

/* Moving sheen driven by --p */
.wavePanel::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background: linear-gradient(
    90deg,
    transparent calc(var(--p, 0) * 100% - 22px),
    rgba(198,27,42,.08) calc(var(--p, 0) * 100% - 10px),
    rgba(198,27,42,.16) calc(var(--p, 0) * 100%),
    rgba(198,27,42,.08) calc(var(--p, 0) * 100% + 10px),
    transparent calc(var(--p, 0) * 100% + 22px)
  );
  opacity:0;
  transition: opacity .18s ease;
}

.wavePanel.isActive::before{ opacity:1; }
.wavePanel.isActive{
  box-shadow: 0 0 0 3px rgba(198,27,42,.16), 0 16px 40px rgba(0,0,0,.40);
  background: rgba(242,240,235,.04);
}
.wavePanel.isPlaying{
  box-shadow: 0 0 0 1px rgba(255,255,255,0.08), 0 0 28px var(--waveGlow);
}

/* Downbeat pop */
.wavePanel.downbeat{ animation: downbeatPop .14s ease-out; }
@keyframes downbeatPop{ from{ transform: scale(0.997);} to{ transform: scale(1);} }
.wavePanel.downbeat::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  border-radius: var(--radius-sm);
  background: radial-gradient(700px 120px at 50% 10%, rgba(198,27,42,.18), transparent 60%);
  opacity:0;
  animation: downbeatFlash .18s ease-out;
}
@keyframes downbeatFlash{ 0%{opacity:.9;} 100%{opacity:0;} }

/* ===== Selected license row ===== */
.selRow{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-top:10px;
  padding:10px 12px;
  border:1px solid var(--stroke);
  border-radius:14px;
  background: rgba(242,240,235,.03);
}
.selLeft{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.selLabel{ font-size:11px; color: var(--muted); font-weight:900; letter-spacing:.2px; }
.selValue{ font-size:13px; font-weight:1000; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.addPrice{ font-weight:1000; opacity:.9; }

/* ===== License segmented buttons ===== */
.licenseGroup{ display:flex; gap:8px; flex-wrap:wrap; }
.licenseBtn{
  flex:1;
  min-width:96px;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid rgba(242,240,235,.14);
  background: rgba(242,240,235,.04);
  color: var(--text);
  cursor:pointer;
  font-weight:900;
  text-align:center;
  user-select:none;
  transition: transform .12s ease, background .12s ease, border-color .12s ease, box-shadow .12s ease;
}
.licenseBtn:hover{ background: rgba(242,240,235,.08); }
.licenseBtn:active{ transform: scale(.98); }
.licenseBtn.active{
  background: rgba(242,240,235,.14);
  border-color: rgba(242,240,235,.26);
  box-shadow: 0 0 0 3px rgba(167,156,142,.14);
}
.licenseBtn:disabled{ opacity:.55; cursor:not-allowed; }
.licenseHint{
  display:block;
  font-size:11px;
  color: var(--muted);
  font-weight:800;
  margin-top:2px;
}


/* ===== Drop CTA button (premium neon + micro-spark) ===== */
.dropCta{
  margin-left:10px;
  position: relative;
  overflow: hidden;

  border: 1px solid rgba(0,212,255,.42);
  background: linear-gradient(180deg, rgba(0,212,255,.10), rgba(0,212,255,.03));
  color: #eaffff;

  box-shadow:
    0 0 0 1px rgba(0,212,255,.14),
    0 10px 34px rgba(0,0,0,.42),
    inset 0 0 14px rgba(0,212,255,.12);

  transition: transform .15s ease, box-shadow .15s ease, background .15s ease, border-color .15s ease;
}

/* soft halo */
.dropCta::after{
  content:"";
  position:absolute;
  inset:-2px;
  border-radius: inherit;
  pointer-events:none;
  box-shadow: 0 0 18px rgba(0,212,255,.40);
  opacity:.45;
}

/* micro-spark layer (hidden until hover) */
.dropCta::before{
  content:"";
  position:absolute;
  inset:-40%;
  pointer-events:none;
  opacity:0;
  transform: translate3d(-6%, -6%, 0) rotate(0deg);
  transition: opacity .18s ease;

  background:
    radial-gradient(circle at 20% 30%, rgba(255,255,255,.55) 0 1px, transparent 2px),
    radial-gradient(circle at 55% 40%, rgba(255,255,255,.45) 0 1px, transparent 2px),
    radial-gradient(circle at 80% 55%, rgba(255,255,255,.40) 0 1px, transparent 2px),
    radial-gradient(circle at 35% 70%, rgba(255,255,255,.35) 0 1px, transparent 2px),
    linear-gradient(120deg, transparent 35%, rgba(0,212,255,.18) 50%, transparent 65%);
}

@keyframes ctaSparkSweep{
  0%   { transform: translate3d(-10%, -10%, 0) rotate(0deg); }
  100% { transform: translate3d(10%, 10%, 0) rotate(2deg); }
}

@keyframes ctaPulse{
  0%   { box-shadow: 0 0 18px rgba(0,212,255,.18); }
  50%  { box-shadow: 0 0 26px rgba(0,212,255,.32); }
  100% { box-shadow: 0 0 18px rgba(0,212,255,.18); }
}

.dropCta{
  animation: ctaPulse 3.8s ease-in-out infinite;
}

.dropCta:hover{
  transform: translateY(-1px);
  border-color: rgba(0,212,255,.60);
  background: linear-gradient(180deg, rgba(0,212,255,.16), rgba(0,212,255,.05));
  box-shadow:
    0 0 0 1px rgba(0,212,255,.25),
    0 14px 44px rgba(0,0,0,.56),
    inset 0 0 18px rgba(0,212,255,.18);
}

.dropCta:hover::before{
  opacity:.55;
  animation: ctaSparkSweep .9s ease-out 1;
}

/* Scroll-react state (set by app.js) */
.dropCta.ctaHot{
  border-color: rgba(0,212,255,.70);
  box-shadow:
    0 0 0 1px rgba(0,212,255,.30),
    0 16px 50px rgba(0,0,0,.62),
    inset 0 0 22px rgba(0,212,255,.20);
}

@media (prefers-reduced-motion: reduce){
  .dropCta{ animation:none; }
  .dropCta:hover::before{ animation:none; }
}




/* ===== Cart drawer ===== */
.overlay{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.45);
  opacity:0;
  pointer-events:none;
  transition:.18s ease;
  z-index:30;
}
.overlay.open{ opacity:1; pointer-events:auto; }

.drawer{
  position:fixed;
  top:0;
  right:0;
  width:380px;
  max-width:100%;
  height:100%;
  background: rgba(10,12,16,.96);
  border-left:1px solid var(--stroke);
  transform:translateX(100%);
  transition:.18s ease;
  z-index:40;
  padding:14px;
  display:flex;
  flex-direction:column;
}
.drawer.open{ transform:translateX(0); }
.drawerHeader{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
.cartList{ overflow:auto; flex:1; margin-top:10px; }
.cartItem{
  border:1px solid var(--stroke);
  border-radius:14px;
  background: rgba(242,240,235,.03);
  padding:10px;
  margin-bottom:10px;
}
.cartItemTitle{ font-weight:1000; }
.cartItemMeta{ color: var(--muted); font-size:12px; margin-top:4px; }
.cartItemRow{
  display:flex;
  justify-content:space-between;
  gap:10px;
  align-items:center;
  margin-top:8px;
}
.qty{ display:flex; gap:6px; align-items:center; }

@media (max-width: 640px){
  .drawer{
    width:100%;
    border-left:none;
    box-shadow: var(--shadow);
  }
  .drawerHeader{
    position: sticky;
    top: 0;
    background: rgba(10,12,16,.96);
    padding-bottom: 10px;
    z-index: 2;
  }
}

/* ===== License modal ===== */
.modalWrap{
  position:fixed;
  inset:0;
  display:none;
  place-items:center;
  background: rgba(0,0,0,.60);
  z-index:50;
  padding:18px;
}
.modalWrap.open{ display:grid; }
.modal{
  width:860px;
  max-width:100%;
  border:1px solid var(--stroke);
  border-radius:16px;
  background: rgba(10,12,16,.92);
  padding:14px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.modal table{ width:100%; border-collapse:collapse; margin-top:10px; }
.modal th, .modal td{ border-bottom:1px solid rgba(242,240,235,.10); padding:10px; text-align:left; }
.modal th{ color:var(--muted); font-size:12px; }

/* ===== Toasts ===== */
.toastHost{
  position: fixed;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  display: grid;
  gap: 10px;
  width: min(520px, calc(100vw - 24px));
  z-index: 80;
  pointer-events: none;
}
.toast{
  pointer-events:auto;
  border: 1px solid rgba(242,240,235,.14);
  background: rgba(10,12,16,.92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: 14px;
  padding: 12px;
  box-shadow: 0 14px 40px rgba(0,0,0,.45);
  display:flex;
  gap:10px;
  align-items:flex-start;
  justify-content:space-between;
  animation: toastIn .16s ease both;
}
.toastTitle{ font-weight:1000; }
.toastMsg{ color: var(--muted); font-size:12px; margin-top:2px; }
.toastActions{ display:flex; gap:8px; }
.toastBtn{
  padding: 8px 10px;
  border-radius: 12px;
  border: 1px solid rgba(242,240,235,.14);
  background: rgba(242,240,235,.06);
  color: var(--text);
  cursor:pointer;
  font-weight:900;
}
.toastBtn:hover{ background: rgba(242,240,235,.10); }
.toast.ok{ border-color: rgba(34,197,94,.25); }
.toast.warn{ border-color: rgba(245,158,11,.25); }
.toast.err{ border-color: rgba(239,68,68,.28); }
@keyframes toastIn{ from{ transform: translateY(6px); opacity:0; } to{ transform: translateY(0); opacity:1; } }

/* ===== Skeletons ===== */
.skelGrid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;
  margin-top:14px;
}
@media (max-width:980px){.skelGrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.skelGrid{grid-template-columns:1fr}}

.skelCard{
  border:1px solid var(--stroke);
  border-radius: var(--radius);
  background: rgba(242,240,235,.04);
  padding:14px;
  overflow:hidden;
  position:relative;
}
.skelLine{
  height: 12px;
  border-radius: 999px;
  background: rgba(242,240,235,.06);
  margin-top:10px;
}
.skelLine.big{ height:16px; width:62%; margin-top:0; }
.skelLine.mid{ width:78%; }
.skelLine.sm{ width:48%; }
.skelBlock{
  height: 86px;
  border-radius: 16px;
  border: 1px solid rgba(242,240,235,.10);
  background: rgba(242,240,235,.04);
  margin-top:12px;
}
.skelRow{ display:flex; gap:10px; margin-top:12px; }
.skelPill{
  height: 36px;
  flex:1;
  border-radius: 12px;
  border:1px solid rgba(242,240,235,.10);
  background: rgba(242,240,235,.04);
}
.skelBtn{
  width:120px;
  height:36px;
  border-radius: 12px;
  border:1px solid rgba(242,240,235,.12);
  background: rgba(242,240,235,.06);
}
.skelCard::before{
  content:"";
  position:absolute;
  top:-60%;
  left:-40%;
  width:60%;
  height:220%;
  background: linear-gradient(90deg, transparent, rgba(242,240,235,.08), transparent);
  transform: rotate(18deg);
  animation: shimmer 1.05s linear infinite;
}
@keyframes shimmer{
  0%{ transform: translateX(-120%) rotate(18deg); }
  100%{ transform: translateX(320%) rotate(18deg); }
}

/* ===== Empty state ===== */
.emptyState{
  border: 1px dashed rgba(242,240,235,.16);
  background: rgba(242,240,235,.03);
  border-radius: 16px;
  padding: 18px;
  margin-top: 14px;
}
.emptyTitle{ font-weight:1000; }
.emptyMsg{ color: var(--muted); font-size:12px; margin-top:6px; }
.emptyActions{ display:flex; gap:10px; flex-wrap:wrap; margin-top:12px; }

/* ===== Now Playing: match site.css + safe area ===== */
.npBar{
  position: fixed;
  left: 50%;
  bottom: 14px;
  transform: translateX(-50%) translateY(120%);
  width: min(920px, calc(100vw - 24px));
  z-index: 70;
  pointer-events: none;
  transition: transform .16s ease;
}
.npBar.show{
  transform: translateX(-50%) translateY(0);
  pointer-events: auto;
}
.npInner{
  border: 1px solid rgba(242,240,235,.16);
  background: rgba(10,12,16,.92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: 16px;
  padding: 12px;
  box-shadow: 0 14px 40px rgba(0,0,0,.45);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
}
.npInner::before{
  content:"";
  position:absolute;
  top:0; left:0; right:0;
  height:2px;
  background: linear-gradient(90deg, rgba(167,156,142,.55), rgba(107,123,99,.35), rgba(138,79,45,.25));
  opacity:.7;
}
.npLeft{ min-width:0; flex:1; display:flex; flex-direction:column; gap:4px; }
.npTitle{ font-weight:1000; font-size:12px; opacity:.9; }
.npMeta{ color: var(--muted); font-size:12px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.npActions{ display:flex; gap:10px; align-items:center; }

.npTimeRow{
  display:flex;
  align-items:center;
  gap:10px;
  margin-top: 6px;
}
.npTime, .npDur{
  font-size:11px;
  color: var(--muted);
  font-weight:900;
  width: 44px;
  text-align:center;
}
.npProgTrack{
  flex:1;
  height: 8px;
  border-radius: 999px;
  border: 1px solid rgba(242,240,235,.14);
  background: rgba(242,240,235,.06);
  overflow:hidden;
  position: relative;
}
.npProgFill{
  height: 100%;
  width: 0%;
  border-radius: 999px;
  background: var(--npProg, rgba(167,156,142,.55));
  transition: width .08s linear;
}
.npProgTrack::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background: linear-gradient(90deg, transparent, rgba(242,240,235,.12), transparent);
  opacity:.25;
  transform: translateX(-40%);
  animation: npSheen 2.2s linear infinite;
}
@keyframes npSheen{ from{ transform: translateX(-40%);} to{ transform: translateX(40%);} }

body.npOn{
  padding-bottom: calc(96px + env(safe-area-inset-bottom));
}

/* Primary buttons */
.btnPrimary{
  background: var(--accent2);
  border-color: rgba(198,27,42,0.42);
}
.btnPrimary:hover{
  background: rgba(198,27,42,0.26);
}

/* Active license */
.licenseBtn.active{
  background: rgba(198,27,42,0.16);
  border-color: rgba(198,27,42,0.40);
  box-shadow: 0 0 0 3px rgba(198,27,42,0.14);
}

/* Sold badge stays red but cleaner */
.badge.sold{
  border-color: rgba(198,27,42,0.40);
  background: rgba(198,27,42,0.14);
  color: rgba(233,237,247,0.92);
}

/* Now Playing top stripe */
.npInner::before{
  background: linear-gradient(
    90deg,
    rgba(198,27,42,0.75),
    rgba(255,255,255,0.10),
    rgba(198,27,42,0.35)
  );
}

/* ===========================
   Glossy waveform bubble (store grid)
   Targets: <div class="wavePanel progress" data-wavewrap="...">
   =========================== */

.wavePanel.progress{
  position: relative;
  overflow: hidden;
  border-radius: 16px;

  /* glossy white glass */
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.18);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);

  /* depth */
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.22),
    inset 0 -18px 30px rgba(255,255,255,.05),
    0 10px 28px rgba(0,0,0,.35);
}

/* top gloss wash */
.wavePanel.progress::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background: linear-gradient(
    180deg,
    rgba(255,255,255,.14) 0%,
    rgba(255,255,255,.05) 42%,
    rgba(255,255,255,.02) 65%,
    rgba(255,255,255,.06) 100%
  );
  opacity: .75;
}


/* glare streak (upper-left) */
.wavePanel.progress::after{
  content:"";
  position:absolute;
  left:-28%;
  top:-55%;
  width:70%;
  height:95%;
  pointer-events:none;
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.16), rgba(255,255,255,0) 64%);
  transform: rotate(-10deg);
  opacity: .45;
}


/* keep waveform + hint above the glass layers */
.wavePanel.progress > *{
  position: relative;
  z-index: 1;
}

/* OPTIONAL: make the colored glow pop but not overpower */
.wavePanel.progress{
  position: relative;
  overflow: hidden;
  border-radius: 16px;

  /* subtler glass */
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);

  /* subtler depth + gentler glow */
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.14),
    inset 0 -14px 22px rgba(255,255,255,.03),
    0 0 18px rgba(0,0,0,.22),
    0 0 14px var(--waveGlow, rgba(255,255,255,.10));
}

/* ===========================
   Waveform "pop" (no box)
   =========================== */

/* The actual rendered waveform is canvas or svg inside wavePanel */
.wavePanel.progress canvas,
.wavePanel.progress svg{
  /* crisp + pop */
  filter:
    drop-shadow(0 0 6px rgba(255,255,255,.14))
    drop-shadow(0 0 26px var(--waveGlow, rgba(255,255,255,.14)));
  transform: translateZ(0);
}

/* Slightly reduce hint prominence so waveform is the hero */
.wavePanel.progress .waveHint{
  opacity: .55;
}

/* ===========================
   Waveform render pop (no boxes)
   =========================== */

.wavePanel.progress canvas,
.wavePanel.progress svg{
  /* crisp + dynamic */
  filter:
    drop-shadow(0 0 6px rgba(255,255,255,.12))
    drop-shadow(0 0 16px var(--waveGlow, rgba(255,255,255,.10)));
}

/* Make the progress feel “more alive” when playing */
.wavePanel.progress.isActive canvas,
.wavePanel.progress.isActive svg{
  filter:
    drop-shadow(0 0 8px rgba(255,255,255,.16))
    drop-shadow(0 0 24px var(--waveGlow, rgba(255,255,255,.14)));
}

/* ===========================
   Waveform POP (no border/box)
   =========================== */

/* Default: slightly brighter + crisp */
.wavePanel.progress canvas,
.wavePanel.progress svg{
  filter:
    drop-shadow(0 0 5px rgba(255,255,255,.10))
    drop-shadow(0 0 12px rgba(0,0,0,.22));
  opacity: .98;
}

/* Active: beat-colored bloom using --waveGlow from JS */
.wavePanel.progress.isActive canvas,
.wavePanel.progress.isActive svg{
  filter:
    drop-shadow(0 0 7px rgba(255,255,255,.14))
    drop-shadow(0 0 20px var(--waveGlow, rgba(255,255,255,.12)));
}
/* ===========================
   Accessibility: focus + active outline
   =========================== */

/* Keyboard focus ring on the whole card */
.card:focus-visible{
  outline: 2px solid rgba(255,255,255,.20);
  outline-offset: 3px;
  box-shadow: 0 0 0 6px rgba(255,255,255,.06);
}

/* Active/Now Playing: accent outline (ties to brand + mood color) */
.card.nowPlaying{
  outline: 2px solid color-mix(in srgb, var(--accent, rgba(0,212,255,.74)) 70%, rgba(255,255,255,.20));
  outline-offset: 3px;
  box-shadow:
    0 0 0 6px rgba(255,255,255,.05),
    0 0 26px color-mix(in srgb, var(--accent, rgba(0,212,255,.74)) 55%, transparent);
}

/* Make interactive controls show a clean focus ring */
.btn:focus-visible,
.licenseBtn:focus-visible,
.playBtn:focus-visible,
select:focus-visible,
input:focus-visible{
  outline: 2px solid rgba(255,255,255,.22);
  outline-offset: 2px;
}

/* ===========================
   Accessibility: focus + active outline
   =========================== */

/* Keyboard focus ring on the whole beat card */
.card:focus-visible{
  outline: 2px solid rgba(255,255,255,.22);
  outline-offset: 3px;
  box-shadow: 0 0 0 6px rgba(255,255,255,.05);
}

/* Now Playing: accent ring that matches mood color */
.card.nowPlaying{
  outline: 2px solid color-mix(in srgb, var(--accent, rgba(0,212,255,.74)) 70%, rgba(255,255,255,.18));
  outline-offset: 3px;
  box-shadow:
    0 0 0 6px rgba(255,255,255,.04),
    0 0 26px color-mix(in srgb, var(--accent, rgba(0,212,255,.74)) 55%, transparent);
}

/* Focus rings for interactive controls */
.btn:focus-visible,
.licenseBtn:focus-visible,
.playBtn:focus-visible,
select:focus-visible,
input:focus-visible{
  outline: 2px solid rgba(255,255,255,.22);
  outline-offset: 2px;
}

/* ===========================
   Wave init shimmer (micro)
   =========================== */

.wavePanel.progress{
  position: relative;
}

.wavePanel.progress.isLoading::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  border-radius: inherit;
  background: linear-gradient(
    90deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,.10) 45%,
    rgba(255,255,255,0) 100%
  );
  transform: translateX(-120%);
  animation: waveShimmer 1.05s ease-in-out infinite;
  opacity: .45;
}

@keyframes waveShimmer{
  0%   { transform: translateX(-120%); }
  100% { transform: translateX(120%); }
}

/* Active beat outline + focus */

.card.nowPlaying{
  border-color: rgba(255,255,255,.35);
  box-shadow:
    0 0 0 1px rgba(255,255,255,.18),
    0 18px 48px rgba(0,0,0,.55),
    0 0 26px var(--waveGlow);
  transform: translateY(-2px);
}

.card.nowPlaying::after{
  content:"";
  position:absolute;
  inset:-1px;
  border-radius: inherit;
  pointer-events:none;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.12);
}
/* ===========================
   BPM-driven pulse (uses --energy set on .card)
   =========================== */

@media (prefers-reduced-motion: reduce){
  .card{ animation: none !important; transition: none !important; }
}

/* Subtle idle pulse (very light) */
.card{
  position: relative; /* needed for some effects */
  --pulseA: max(.006, min(.018, var(--energy, .12)));
  --pulseDur: max(1.2s, min(2.6s, calc(3.2s - (var(--energy, .12) * 6s))));
  animation: cardPulse var(--pulseDur) ease-in-out infinite;
}

@keyframes cardPulse{
  0%, 100%{
    transform: translateY(0);
    box-shadow: 0 18px 48px rgba(0,0,0,.55);
  }
  50%{
    transform: translateY(calc(-1px - (var(--pulseA) * 40px)));
    box-shadow:
      0 22px 58px rgba(0,0,0,.58),
      0 0 0 1px rgba(255,255,255,.06);
  }
}

/* Don’t pulse while user interacts (keeps it classy) */
.card:hover,
.card:focus-within,
.card.nowPlaying{
  animation: none;
}
/* ===========================
   Micro tilt on hover (subtle)
   =========================== */

.card{
  transform-style: preserve-3d;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.card:hover{
  transform: translateY(-3px) rotateX(.6deg) rotateY(-.6deg);
  box-shadow:
    0 26px 70px rgba(0,0,0,.62),
    0 0 0 1px rgba(255,255,255,.08);
}

/* Keep Now Playing steady (no tilt jitter) */
.card.nowPlaying:hover{
  transform: translateY(-2px);
}
/* ===========================
   Active beat outline (A11y + premium focus)
   =========================== */

.card{
  position: relative;
}

.card:focus-visible{
  outline: 2px solid rgba(255,255,255,.22);
  outline-offset: 3px;
  box-shadow: 0 0 0 6px rgba(255,255,255,.05);
}

/* Stronger “Now Playing” focus using beat accent */
.card.nowPlaying{
  outline: 2px solid color-mix(in srgb, var(--accent, rgba(0,212,255,.74)) 72%, rgba(255,255,255,.18));
  outline-offset: 3px;
  box-shadow:
    0 0 0 6px rgba(255,255,255,.04),
    0 0 30px color-mix(in srgb, var(--accent, rgba(0,212,255,.74)) 55%, transparent),
    0 22px 58px rgba(0,0,0,.62);
}
/* ===========================
   Wave init shimmer (micro)
   =========================== */

.wavePanel.progress{
  position: relative;
  overflow: hidden;
}

.wavePanel.progress.isLoading::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  border-radius: inherit;
  background: linear-gradient(
    110deg,
    rgba(255,255,255,0) 28%,
    rgba(255,255,255,.10) 46%,
    rgba(255,255,255,0) 62%
  );
  transform: translateX(-120%);
  animation: waveShimmer 1.15s ease-in-out infinite;
  opacity: .42;
}

@keyframes waveShimmer{
  0%   { transform: translateX(-120%); }
  100% { transform: translateX(120%); }
}

@media (prefers-reduced-motion: reduce){
  .wavePanel.progress.isLoading::before{ animation: none; opacity: .20; }
}
/* ===========================
   Magnetic play button (subtle)
   =========================== */

.playBtn{
  position: relative;
  transform: translate3d(var(--mx, 0px), var(--my, 0px), 0);
  transition: transform .14s ease, box-shadow .14s ease;
  will-change: transform;
}

.playBtn.isMagnetic{
  box-shadow:
    0 12px 30px rgba(0,0,0,.35),
    0 0 0 1px rgba(255,255,255,.08);
}

@media (prefers-reduced-motion: reduce){
  .playBtn{ transition: none; transform: none !important; }
}
/* ===========================
   Parallax for Drop CTA + EXCLUSIVE buttons
   =========================== */

.dropCta,
.licenseBtn[data-code="EXCLUSIVE"]{
  transform: translate3d(var(--lx, 0px), var(--ly, 0px), 0);
  transition: transform .18s ease, box-shadow .18s ease;
  will-change: transform;
}

.dropCta.isParallax,
.licenseBtn[data-code="EXCLUSIVE"].isParallax{
  box-shadow:
    0 18px 44px rgba(0,0,0,.40),
    0 0 0 1px rgba(255,255,255,.10);
}

@media (prefers-reduced-motion: reduce){
  .dropCta,
  .licenseBtn[data-code="EXCLUSIVE"]{
    transition: none;
    transform: none !important;
  }
}
/* ===========================
   Mobile Sticky Filters
   =========================== */

@media (max-width: 720px){

  .filters{
    position: sticky;
    top: 64px; /* clears header */
    z-index: 40;
    background: rgba(7,9,13,.88);
    backdrop-filter: blur(10px);
    padding: 10px 12px;
    border-bottom: 1px solid rgba(255,255,255,.08);
  }

}
/* ===========================
   Vibe buttons
   =========================== */

.vibeBtn{
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  color: inherit;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 12px;
  cursor: pointer;
  transition: all .15s ease;
}

.vibeBtn:hover{
  background: rgba(255,255,255,.10);
}

.vibeBtn:active{
  transform: scale(.96);
}
/* ===========================
   Cart: empty persuasion + checkout trust
   =========================== */

.emptyCartBox{
  padding: 12px 12px;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 14px;
  background: rgba(255,255,255,.04);
}

.emptyCartTitle{
  font-weight: 1000;
  margin-bottom: 6px;
}

.emptyCartMsg{
  opacity: .92;
  margin-bottom: 10px;
}

.emptyCartActions{
  display:flex;
  gap: 10px;
  margin-bottom: 8px;
}

.emptyCartHint{
  font-size: 12px;
  opacity: .75;
}

.trustBlock{
  margin: 10px 0 10px 0;
  padding: 10px 10px;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 14px;
  background: rgba(0,0,0,.18);
}

.trustRow{
  display:flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  margin: 2px 0;
}

.trustItem{
  font-size: 12px;
  opacity: .90;
}
/* ===========================
   Waveform hover glow (premium)
   =========================== */

.wavePanel.progress{
  transition: box-shadow .18s ease, border-color .18s ease, background .18s ease;
  border: 1px solid rgba(255,255,255,.08);
}

.wavePanel.progress:hover{
  border-color: rgba(255,255,255,.16);
  box-shadow:
    0 0 0 1px rgba(255,255,255,.06),
    0 0 26px color-mix(in srgb, var(--waveGlow, rgba(0,212,255,.74)) 55%, transparent);
  background: rgba(255,255,255,.02);
}

@media (prefers-reduced-motion: reduce){
  .wavePanel.progress{ transition: none; }
}
/* ===========================
   Trust microcopy (cards + cart)
   =========================== */

.trustMiniRow{
  margin-top: 10px;
  display:flex;
  flex-wrap:wrap;
  gap: 8px 12px;
  opacity: .85;
  font-size: 12px;
}

.trustMini{
  padding: 6px 8px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
}

.cartSupportLink{
  display:block;
  margin: 10px 0 8px 0;
  font-size: 12px;
  opacity: .78;
  text-decoration: none;
  border-bottom: 1px solid rgba(0,212,255,.0);
}

.cartSupportLink:hover{
  opacity: 1;
  border-bottom-color: rgba(0,212,255,.55);
}
/* ===========================
   License confidence hint
   =========================== */

.selHint{
  margin-top: 8px;
  font-size: 12px;
  opacity: .0;
  transform: translateY(-2px);
  transition: opacity .16s ease, transform .16s ease;
  color: rgba(242,240,235,.78);
}

.selHint.show{
  opacity: .92;
  transform: translateY(0);
}
.clearPill{
  border-radius: 999px;
  padding: 10px 12px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  color: inherit;
  font-weight: 1000;
  cursor: pointer;
}
.clearPill:hover{
  border-color: rgba(0,212,255,.35);
}

/* ================================
   PREMIUM BEAT CARDS (OVERRIDES)
   Paste block: END of store.css
================================ */

/* Grid: more breathing room + premium spacing */
.grid{
  gap: 18px;
  margin-top: 18px;
}
@media (max-width:980px){ .grid{ gap: 16px; } }
@media (max-width:640px){ .grid{ gap: 14px; } }

/* Card: tighter hierarchy, richer surface, better hover/focus */
.card{
  padding: 20px;
  border-radius: 20px;
  border: 1px solid rgba(242,240,235,.14);
  background: linear-gradient(180deg, rgba(242,240,235,.07), rgba(242,240,235,.03));
  box-shadow: 0 26px 80px rgba(0,0,0,.38);
  transition: transform .18s ease, box-shadow .22s ease, border-color .22s ease;
}
.card:hover{
  transform: translateY(-2px);
  border-color: rgba(242,240,235,.22);
  box-shadow: 0 34px 110px rgba(0,0,0,.46);
}
.card:focus{
  outline: none;
}
.card:focus-visible{
  outline: 2px solid rgba(242,240,235,.22);
  outline-offset: 3px;
}
.card.nowPlaying{
  border-color: rgba(242,240,235,.28);
  box-shadow: 0 36px 120px rgba(0,0,0,.52);
}

/* Top row: title + badges + play button alignment */
.playerRow{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}
.playerRow > div:first-child{
  min-width: 0;
}
.title{
  font-size: 18px;
  line-height: 1.15;
  margin: 0 0 8px;
  letter-spacing: .2px;
}
.meta{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* Badge pills: consistent + premium */
.badge{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(242,240,235,.14);
  background: rgba(242,240,235,.05);
  font-size: 12px;
  line-height: 1;
  color: rgba(242,240,235,.9);
}
.moodBadge{
  border-color: rgba(242,240,235,.18);
  background: rgba(242,240,235,.04);
}

/* Wave panel: cleaner container */
.wavePanel{
  border-radius: 16px;
  border: 1px solid rgba(242,240,235,.10);
  background: rgba(0,0,0,.28);
  padding: 12px 12px 8px;
}
.waveHint{
  font-size: 12px;
  opacity: .65;
  margin-bottom: 8px;
}

/* Trust row: consistent spacing */
.trustMiniRow{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 10px;
}
.trustMini{
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(242,240,235,.12);
  background: rgba(242,240,235,.035);
  font-size: 12px;
  opacity: .9;
}

/* “Selected license” block: make it feel intentional */
.selRow{
  border-radius: 16px;
  border: 1px solid rgba(242,240,235,.12);
  background: rgba(242,240,235,.03);
  padding: 12px 14px;
}
.selLabel{
  font-size: 12px;
  opacity: .7;
}
.selValue{
  margin-top: 2px;
  font-weight: 900;
  letter-spacing: .2px;
}

/* License buttons: modern pill group */
.licenseGroup{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}
@media (max-width:980px){
  .licenseGroup{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width:640px){
  .licenseGroup{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.licenseBtn{
  border-radius: 14px;
  border: 1px solid rgba(242,240,235,.14);
  background: rgba(242,240,235,.04);
  padding: 10px 10px;
  font-weight: 900;
  transition: transform .14s ease, border-color .18s ease, background .18s ease;
}
.licenseBtn:hover{
  transform: translateY(-1px);
  border-color: rgba(242,240,235,.22);
  background: rgba(242,240,235,.06);
}
.licenseBtn.active{
  border-color: rgba(242,240,235,.30);
  background: rgba(242,240,235,.085);
}
.licenseBtn:disabled{
  opacity: .55;
  transform: none;
}

/* Add-to-cart: stronger primary CTA inside card */
.card [data-add].btnPrimary{
  padding: 14px 14px;
  border-radius: 16px;
  font-weight: 1000;
  letter-spacing: .2px;
}

/* Mobile: tighten card padding */
@media (max-width:640px){
  .card{ padding: 16px; border-radius: 18px; }
  .title{ font-size: 17px; }
}

/* ================================
   LICENSE BUTTON LAYOUT FIX
   Paste block: END of store.css
================================ */

/* Give the right-side controls room and consistent vertical rhythm */
.controls{
  gap: 10px;
}

/* Make license buttons a real grid with spacing (prevents cramping) */
.licenseGroup{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  align-items: stretch;
}

/* License buttons: premium pill cards */
.licenseBtn{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 6px;

  padding: 10px 12px;
  border-radius: 14px;

  border: 1px solid rgba(242,240,235,.14);
  background: rgba(242,240,235,.04);

  font-weight: 900;
  line-height: 1.15;

  min-height: 56px;
  width: 100%;
  text-align: left;

  transition: transform .14s ease, border-color .18s ease, background .18s ease;
}

.licenseBtn:hover{
  transform: translateY(-1px);
  border-color: rgba(242,240,235,.22);
  background: rgba(242,240,235,.06);
}

.licenseBtn.active{
  border-color: rgba(242,240,235,.30);
  background: rgba(242,240,235,.085);
}

.licenseBtn:disabled{
  opacity: .55;
  transform: none;
}

/* Price hint inside each license button */
.licenseBtn .licenseHint{
  display: inline-block;
  font-size: 12px;
  font-weight: 800;
  opacity: .75;
}

/* On wider screens, allow 4 across if the card has room */
@media (min-width: 1200px){
  .licenseGroup{
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .licenseBtn{
    min-height: 52px;
    padding: 10px 10px;
  }
}

/* Small breathing room between license grid and Add to cart */
.controls > .btnPrimary{
  margin-top: 2px;
  border-radius: 16px;
  padding: 14px 14px;
  font-weight: 1000;
}

/* ================================
   FIX: LICENSE BUTTON OVERLAP (HARD OVERRIDE)
   Paste block: END of store.css
================================ */

/* Force a real grid + spacing (wins over any prior flex/chip styles) */
.controls .licenseGroup{
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 12px !important;
  align-items: stretch !important;

  /* prevent any weird inline/negative spacing inherited from older styles */
  margin: 0 !important;
  padding: 0 !important;
}

/* Force each button to be a full tile, not a cramped chip */
.controls .licenseGroup .licenseBtn{
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: center !important;

  width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;

  margin: 0 !important;            /* kills overlap caused by negative margins */
  padding: 6px 6px !important;
  border-radius: 8px !important;

  line-height: 1.15 !important;
  white-space: normal !important;  /* allows wrap instead of pushing into neighbors */
  text-align: left !important;

  border: 1px solid rgba(242,240,235,.14) !important;
  background: rgba(242,240,235,.04) !important;

  position: relative !important;
  z-index: 0 !important;
}

/* Active state should sit on top without visually colliding */
.controls .licenseGroup .licenseBtn.active{
  z-index: 2 !important;
  border-color: rgba(242,240,235,.30) !important;
  background: rgba(242,240,235,.085) !important;
}

/* Ensure price sits on its own line (prevents run-together text) */
.controls .licenseGroup .licenseBtn .licenseHint{
  display: block !important;
  margin-top: 6px !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  opacity: .75 !important;
}

/* If the card is wide enough, allow 4 across */
@media (min-width: 1200px){
  .controls .licenseGroup{
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }
}

/* ================================
   PREMIUM CARD INTERACTIONS
   (Wave glow + selection + play micro)
   Paste block: END of store.css
================================ */

/* 1) Waveform / player panel: glow + depth on hover/nowPlaying */
.card .wavePanel{
  border-radius: 16px;
  border: 1px solid rgba(242,240,235,.10);
  background: rgba(0,0,0,.28);
  box-shadow: 0 18px 50px rgba(0,0,0,.30);
  transition: box-shadow .20s ease, border-color .20s ease, transform .20s ease;
}

.card:hover .wavePanel{
  border-color: rgba(242,240,235,.16);
  box-shadow: 0 22px 70px rgba(0,0,0,.38);
}

.card.nowPlaying .wavePanel{
  border-color: rgba(242,240,235,.22);
  box-shadow:
    0 24px 85px rgba(0,0,0,.45),
    0 0 0 1px rgba(242,240,235,.06) inset;
}

/* 2) Selected license: treat as a premium selection tile */
.selRow{
  border-radius: 16px;
  border: 1px solid rgba(242,240,235,.14);
  background: rgba(242,240,235,.035);
  box-shadow: 0 16px 45px rgba(0,0,0,.20);
}

.selRow .selValue{
  font-weight: 1000;
  letter-spacing: .2px;
}

/* Active license tiles get a subtle glow ring */
.controls .licenseGroup .licenseBtn.active{
  box-shadow:
    0 18px 55px rgba(0,0,0,.35),
    0 0 0 2px rgba(242,240,235,.10) inset;
}

/* 3) Play button micro-interaction (works with your existing .playBtn) */
.playBtn{
  border-radius: 999px;
  border: 1px solid rgba(242,240,235,.14);
  background: rgba(242,240,235,.04);
  transition: transform .14s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease;
  will-change: transform;
}

.card:hover .playBtn{
  transform: translateY(-1px);
  border-color: rgba(242,240,235,.22);
  background: rgba(242,240,235,.06);
  box-shadow: 0 18px 45px rgba(0,0,0,.30);
}

.card.nowPlaying .playBtn{
  border-color: rgba(242,240,235,.28);
  background: rgba(242,240,235,.085);
  box-shadow: 0 22px 65px rgba(0,0,0,.42);
}

/* Keyboard focus: consistent premium ring */
.playBtn:focus-visible,
.controls .licenseGroup .licenseBtn:focus-visible,
.card [data-add].btnPrimary:focus-visible{
  outline: 2px solid rgba(242,240,235,.22);
  outline-offset: 3px;
}

/* ================================
   PER-BEAT ACCENT GLOW (RICH VERSION)
================================ */

.card{
  position: relative;
  overflow: visible;
}

/* premium underglow */
.card::before{
  content:"";
  position:absolute;

  left:8%;
  right:8%;
  bottom:-28px;
  height:95px;

  background:
    radial-gradient(
      ellipse at center,
      color-mix(in srgb, var(--accent) 70%, transparent) 0%,
      color-mix(in srgb, var(--accent) 40%, transparent) 35%,
      transparent 75%
    );

  filter: blur(26px);
  opacity: calc(.16 + (var(--energy,0.4) * .18));

  pointer-events:none;
  z-index:0;
}

/* content above glow */
.card > *{
  position:relative;
  z-index:1;
}

/* hover richness */
.card:hover::before{
  opacity: calc(.20 + (var(--energy,0.4) * .22));
  filter: blur(24px);
}

/* now playing = strongest glow */
.card.nowPlaying::before{
  opacity: calc(.26 + (var(--energy,0.4) * .26));
  filter: blur(22px);
}