/* Beat Store additions on top of tools.css */
.store-bar{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap}
.cart-btn{position:relative}
.cart-btn .count{position:absolute;top:-6px;right:-6px;min-width:20px;height:20px;padding:0 5px;border-radius:999px;background:var(--gold-grad);color:var(--gold-ink);font:700 .66rem/20px var(--label);text-align:center}

/* filters */
.filters{display:grid;gap:14px;padding:clamp(16px,2.6vw,24px)}
.filters .row{display:grid;grid-template-columns:2fr 1fr 1fr 1fr 1fr;gap:12px;align-items:end}
.filters .bpm{display:grid;grid-template-columns:1fr auto 1fr;gap:6px;align-items:center}
.filters .bpm span{color:var(--muted)}
.result-count{font:600 .72rem var(--label);letter-spacing:.16em;color:var(--muted);text-transform:uppercase}

/* beat list */
.beats{display:grid;gap:10px}
.beat{display:grid;grid-template-columns:64px 44px minmax(0,1.6fr) minmax(0,1.4fr) 70px 86px 56px auto;gap:14px;align-items:center;
  padding:12px 14px;border-radius:14px;background:rgba(255,255,255,.55);border:1px solid var(--panel-line);transition:background .15s, box-shadow .15s}
.beat:hover{background:rgba(255,255,255,.78);box-shadow:0 10px 24px -16px rgba(0,0,0,.4)}
.beat.playing{background:rgba(255,255,255,.85);box-shadow:inset 3px 0 0 var(--gold),0 10px 24px -16px rgba(0,0,0,.4)}
.cover{width:64px;height:64px;border-radius:10px;overflow:hidden;position:relative;flex:none;background:var(--graphite);box-shadow:0 0 0 1px rgba(184,136,60,.6) inset}
.cover img{width:100%;height:100%;object-fit:cover;display:block}
.cover.gen::after{content:"";position:absolute;inset:10%;background:url("../assets/mb-mark.png?v=20261027h") center/contain no-repeat;opacity:.95}
.beat .title{min-width:0}
.beat .title b{display:block;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.beat .title small{display:flex;gap:6px;flex-wrap:wrap;margin-top:3px}
.tag{font:600 .64rem var(--label);letter-spacing:.08em;padding:3px 8px;border-radius:999px;background:rgba(30,30,35,.06);color:var(--ink-2);white-space:nowrap}
.tag.demo{background:rgba(168,127,58,.16);color:var(--gold-2)}
.mini-wave{height:34px;width:100%;display:block;cursor:pointer}
.metric{font:500 .84rem var(--mono);color:var(--ink-2);white-space:nowrap}
.metric small{display:block;color:var(--muted);font-size:.66rem}
.beat .buy{display:flex;gap:8px;align-items:center;justify-content:flex-end}
.price{font:700 .9rem var(--label);color:var(--ink);white-space:nowrap}
.price small{font-weight:500;color:var(--muted);font-size:.7rem}
.empty-state{text-align:center;padding:40px 16px;color:var(--muted)}

/* licenses */
.lic-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.lic{padding:22px;display:grid;gap:10px;align-content:start;border-radius:16px;background:rgba(255,255,255,.58);border:1px solid var(--panel-line);position:relative}
.lic h4{font-size:1.05rem;letter-spacing:.1em}
.lic .amt{font:600 1.8rem var(--display);color:var(--ink)}
.lic .amt small{font:500 .8rem var(--body);color:var(--muted)}
.lic ul{margin:0;padding:0;list-style:none;display:grid;gap:7px;font-size:.88rem;color:var(--ink-2)}
.lic li{display:flex;gap:9px}
.lic li::before{content:"";width:6px;height:6px;margin-top:.55em;flex:none;transform:rotate(45deg);background:var(--gold)}
.lic.top{background:var(--graphite);color:#ece6da;border-color:transparent;box-shadow:0 0 0 1.5px #B8883C inset}
.lic.top .amt,.lic.top h4{color:#EED7A2}
.lic.top ul{color:#ddd5c6}

/* modal + drawer */
dialog{border:0;padding:0;background:transparent;max-width:min(720px,calc(100vw - 32px));width:100%}
dialog::backdrop{background:rgba(40,40,44,.45);backdrop-filter:blur(3px)}
.modal{padding:clamp(18px,3vw,28px);display:grid;gap:16px}
.modal-head{display:flex;justify-content:space-between;align-items:start;gap:12px}
.x{border:0;background:rgba(255,255,255,.7);width:36px;height:36px;border-radius:50%;cursor:pointer;font-size:1.1rem;color:var(--ink)}
.lic-pick{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.lic-pick .opt b{display:flex;justify-content:space-between;gap:8px}

.drawer{position:fixed;top:0;right:0;bottom:0;width:min(420px,100vw);z-index:40;display:grid;grid-template-rows:auto 1fr auto;
  background:rgba(244,244,246,.9);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border-left:1px solid var(--panel-line);box-shadow:-20px 0 40px -20px rgba(0,0,0,.4);
  transform:translateX(105%);transition:transform .25s ease}
.drawer.open{transform:none}
.drawer > header,.drawer > footer{padding:18px 20px;display:flex;justify-content:space-between;align-items:center;gap:12px}
.drawer > footer{display:grid;gap:12px;border-top:1px solid var(--line-2)}
.drawer .items{overflow:auto;padding:0 20px;display:grid;gap:10px;align-content:start}
.cart-item{display:grid;grid-template-columns:48px 1fr auto;gap:12px;align-items:center;padding:10px;border-radius:12px;background:rgba(255,255,255,.7);border:1px solid var(--panel-line)}
.cart-item .cover{width:48px;height:48px}
.total{display:flex;justify-content:space-between;font:700 1rem var(--label)}
.scrim{position:fixed;inset:0;background:rgba(40,40,44,.35);z-index:35}

/* sticky preview player */
.player-bar{position:sticky;bottom:0;z-index:30;padding:10px 20px calc(10px + env(safe-area-inset-bottom,0px));background:rgba(238,238,240,.86);backdrop-filter:blur(16px) saturate(1.2);-webkit-backdrop-filter:blur(16px) saturate(1.2);
  border-top:1px solid rgba(255,255,255,.8);box-shadow:0 -10px 24px -16px rgba(0,0,0,.35)}
.player-bar .in{max-width:1120px;margin:auto;display:grid;grid-template-columns:auto minmax(0,220px) auto minmax(0,1fr) auto;gap:14px;align-items:center}
.player-bar .cover{width:46px;height:46px}
.player-bar .np b{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.player-bar .np small{color:var(--muted);font:.74rem var(--mono)}
.player-bar .ctrl{display:flex;gap:8px;align-items:center}
.player-bar .seek{display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:center;font:.74rem var(--mono);color:var(--muted)}
.seekbar{height:6px;border-radius:3px;background:rgba(30,30,35,.14);cursor:pointer;position:relative}
.seekbar i{position:absolute;inset:0 auto 0 0;width:0;border-radius:3px;background:var(--gold-grad)}
.vol{width:90px}
.icon-btn.sm{width:34px;height:34px}
.icon-btn.ghosty{background:rgba(255,255,255,.7);color:var(--ink);box-shadow:0 0 0 1px var(--line) inset}

@media (max-width:980px){
  .beat{grid-template-columns:56px 40px minmax(0,1fr) 64px auto;}
  .beat .wavecell,.beat .durcell,.beat .keycell{display:none}
  .cover{width:56px;height:56px}
  .filters .row{grid-template-columns:1fr 1fr}
  .lic-grid{grid-template-columns:1fr 1fr}
  .player-bar .in{grid-template-columns:auto minmax(0,1fr) auto}
  .player-bar .seek,.vol{display:none}
}
@media (max-width:560px){
  .beat{grid-template-columns:48px minmax(0,1fr) auto;gap:10px}
  .beat .playcell,.beat .bpmcell{display:none}
  .beat .buy .btn.light{display:none}
  .cover{width:48px;height:48px}
  .lic-grid,.lic-pick,.filters .row{grid-template-columns:1fr}
}