/* ATLAS BEATS — app shell (v8.0): bottom navigation on phones + Daily Drop strip on the home-page shop. */
.app-tabs { display: none; }
@media (max-width: 767px) {
  :root { --apptabs-h: 62px; }
  .app-tabs { position: fixed; z-index: 70; inset-inline: 0; bottom: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 2px; padding: 6px 8px calc(7px + env(safe-area-inset-bottom, 0px)); background: rgba(9, 8, 18, .86); backdrop-filter: blur(24px) saturate(1.5); -webkit-backdrop-filter: blur(24px) saturate(1.5); border-top: 1px solid rgba(255, 255, 255, .08); box-shadow: 0 -12px 40px -20px rgba(0, 0, 0, .9); }
  .app-tabs[hidden] { display: none; }
  .app-tab { appearance: none; border: 0; background: transparent; color: var(--muted, #9a94b8); font-family: inherit; font-size: 10.5px; font-weight: 600; line-height: 1; display: grid; justify-items: center; align-content: start; gap: 4px; padding: 2px 0 1px; border-radius: 14px; cursor: pointer; transition: color .2s; -webkit-tap-highlight-color: transparent; }
  .app-tab-ic { position: relative; width: 46px; height: 28px; border-radius: 14px; display: grid; place-items: center; transition: background .25s, transform .25s, box-shadow .25s; }
  .app-tab-ic .i { width: 21px; height: 21px; }
  .app-tab.on { color: #fff; } .app-tab.on .app-tab-ic { background: linear-gradient(135deg, rgba(124, 58, 237, .65), rgba(59, 130, 246, .5)); box-shadow: 0 8px 20px -8px rgba(124, 58, 237, .9); }
  .app-tab:active .app-tab-ic { transform: scale(.92); }
  .app-tab-dot { position: absolute; top: -2px; inset-inline-end: 6px; width: 9px; height: 9px; border-radius: 50%; background: #ef4444; border: 2px solid #09081a; }
  body.has-apptabs .player { bottom: var(--apptabs-h); }
  body.has-apptabs .main { padding-bottom: calc(var(--player-h) + var(--apptabs-h) + 54px); }
  body.has-apptabs .toasts { bottom: calc(var(--player-h) + var(--apptabs-h) + 26px); }
  body.has-apptabs .fbw-btn { bottom: calc(var(--player-h, 88px) + var(--apptabs-h) + 16px); }
  body.has-apptabs .fbw-pop { bottom: calc(var(--player-h, 88px) + var(--apptabs-h) + 66px); }
  body.has-apptabs .mini-player:not(.in-pip) { bottom: calc(var(--apptabs-h) + 10px) !important; }
  body.has-apptabs .drawer { padding-bottom: calc(var(--apptabs-h) + 18px); }
}
/* Daily Drop strip (home-page shop) */
.shop-drop { position: relative; display: grid; grid-template-columns: auto 1fr auto; gap: 18px; align-items: center; padding: 18px 20px; margin: 0 0 16px; border-radius: 24px; border: 1px solid color-mix(in srgb, var(--tc, #e7c98a) 45%, transparent); background: linear-gradient(120deg, color-mix(in srgb, var(--tc, #e7c98a) 22%, transparent), rgba(255, 255, 255, .03) 60%), rgba(255, 255, 255, .02); overflow: hidden; }
.shop-drop::before { content: ""; position: absolute; inset: -40% auto auto -10%; width: 60%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--tc, #e7c98a) 35%, transparent), transparent 70%); pointer-events: none; animation: shopDropPulse 4s ease-in-out infinite alternate; }
@keyframes shopDropPulse { from { opacity: .5; transform: scale(.9); } to { opacity: 1; transform: scale(1.1); } }
.shop-drop-art { position: relative; width: 110px; height: 110px; border-radius: 32px; display: grid; place-items: center; background: radial-gradient(circle at 50% 35%, color-mix(in srgb, var(--tc) 55%, #fff 10%), color-mix(in srgb, var(--tc) 40%, #000) 75%); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .15), 0 16px 38px -14px color-mix(in srgb, var(--tc) 80%, transparent); }
.shop-drop-art svg { width: 88px; height: 88px; filter: drop-shadow(0 8px 16px rgba(0, 0, 0, .5)); }
.shop-drop-txt { position: relative; min-width: 0; display: grid; gap: 4px; }
.shop-drop-k { display: inline-flex; align-items: center; gap: 8px; font-size: 11.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #f5e6c4; }
.shop-drop-k .live { width: 8px; height: 8px; border-radius: 50%; background: #ef4444; box-shadow: 0 0 0 0 rgba(239, 68, 68, .6); animation: shopLive 1.6s ease-out infinite; }
@keyframes shopLive { to { box-shadow: 0 0 0 10px rgba(239, 68, 68, 0); } }
.shop-drop-txt h4 { margin: 0; font-size: 20px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.shop-drop-pct { font-size: 12px; padding: 3px 9px; border-radius: 999px; background: #ef4444; color: #fff; font-weight: 900; }
.shop-drop-txt p { margin: 0; color: var(--muted); font-size: 13px; }
.shop-drop-price { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 4px; }
.shop-drop-price s { color: var(--muted); font-size: 14px; } .shop-drop-price b { font-size: 22px; } .shop-drop-price span.c { color: var(--muted); font-size: 12px; margin-inline-start: -6px; }
.shop-drop-cd { display: inline-flex; align-items: center; gap: 6px; font-family: ui-monospace, monospace; font-size: 13px; font-weight: 800; padding: 4px 10px; border-radius: 999px; background: rgba(0, 0, 0, .35); border: 1px solid rgba(255, 255, 255, .1); direction: ltr; }
.shop-drop-acts { position: relative; display: grid; gap: 8px; min-width: 160px; }
.shop-drop-next { font-size: 11.5px; color: var(--muted); text-align: center; }
.shop-gift.deal { border-color: rgba(239, 68, 68, .5); box-shadow: 0 0 0 1px rgba(239, 68, 68, .2), 0 14px 34px -16px rgba(239, 68, 68, .5); }
.shop-deal { position: absolute; top: 10px; inset-inline-end: 10px; font-size: 11px; font-weight: 900; padding: 3px 8px; border-radius: 999px; background: #ef4444; color: #fff; z-index: 1; }
.shop-was { color: var(--muted); font-size: 12px; text-decoration: line-through; margin-inline-end: 6px; font-weight: 600; }
/* picks of this drop — three playlists that rotate with the slot */
.shop-picks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.shop-pick { position: relative; display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 18px; border: 1px solid rgba(255, 255, 255, .09); background: linear-gradient(135deg, color-mix(in srgb, var(--s1, #7c3aed) 22%, transparent), rgba(255, 255, 255, .02)); color: inherit; text-align: start; font: inherit; cursor: pointer; transition: transform .25s, border-color .25s; min-width: 0; }
.shop-pick:hover { transform: translateY(-2px); border-color: rgba(231, 201, 138, .4); }
.shop-pick-art { width: 56px; height: 56px; border-radius: 14px; flex: none; display: grid; place-items: center; font-size: 26px; background: linear-gradient(135deg, var(--s1, #7c3aed), var(--s2, #3b82f6)); overflow: hidden; }
.shop-pick-art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.shop-pick-tx { min-width: 0; display: grid; gap: 2px; } .shop-pick-tx b { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .shop-pick-tx small { color: var(--muted); font-size: 11.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.shop-pick .go { margin-inline-start: auto; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, .9); color: #0b0a14; flex: none; }
.shop-pick .go .i { width: 14px; height: 14px; fill: currentColor; stroke: none; }
@media (max-width: 720px) {
  .shop-drop { grid-template-columns: auto 1fr; gap: 12px; padding: 14px; } .shop-drop-art { width: 80px; height: 80px; border-radius: 22px; } .shop-drop-art svg { width: 64px; height: 64px; } .shop-drop-txt h4 { font-size: 16px; } .shop-drop-acts { grid-column: 1 / -1; grid-template-columns: 1fr auto; min-width: 0; }
  .shop-picks { grid-template-columns: 1fr; gap: 8px; }
}