/* Saved-beats bar (sf-freedl.js). The free download pop-up is drawn from the mock (assets/mk.css, "popWin"), not here. Dark on purpose: it floats over any page. */
.fdl-tray { --fdl-accent: var(--red, #e42020); --fdl-text: #f5f3ef; --fdl-soft: #b9b6b0; --fdl-mute: #8d8a85; --fdl-line: rgba(255,255,255,.16); color-scheme: dark; }
html.fdl-lock, html.fdl-lock body { overflow: hidden; }

/* ---------- saved beats bar ---------- */
.fdl-tray { position: fixed; left: 50%; bottom: 14px; z-index: 2147482000; width: calc(100% - 32px); max-width: 640px; display: flex; align-items: center; gap: 12px; padding: 8px 8px 8px 14px; box-sizing: border-box; border: 1px solid rgba(255,255,255,.12); border-radius: 999px; background: rgba(24,24,24,.94); color: var(--fdl-text); box-shadow: 0 12px 40px rgba(0,0,0,.5); transform: translateX(-50%); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); animation: fdl-rise .2s ease-out; transition: bottom .2s; font-size: 14px; }
.fdl-tray[hidden] { display: none; }
.fdl-tray-covers { display: flex; flex: none; padding-right: 8px; }
.fdl-tray-covers i { width: 28px; height: 28px; margin-right: -8px; border: 2px solid #181818; border-radius: 50%; background: #222 center / cover no-repeat; }
.fdl-tray-label { flex: 1; min-width: 0; overflow: hidden; font-weight: 700; white-space: nowrap; text-overflow: ellipsis; }
.fdl-tray-go { flex: none; height: 40px; padding: 0 18px; border: 0; border-radius: 999px; background: var(--fdl-accent); color: #fff; font: inherit; font-weight: 700; cursor: pointer; }
.fdl-tray-go:hover { filter: brightness(1.08); }
.fdl-tray-x { flex: none; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--fdl-mute); font: inherit; font-size: 18px; line-height: 1; cursor: pointer; }
.fdl-tray-x:hover { color: var(--fdl-text); background: rgba(255,255,255,.08); }

@keyframes fdl-fade { from { opacity: 0; } }
.fdl-tray { transition: bottom .2s, opacity .8s ease-in-out, transform .8s ease-in-out; }
.fdl-tray.fdl-tray-leave { opacity: 0; transform: translateX(-50%) translateY(10px); pointer-events: none; }
@keyframes fdl-fade { from { opacity: 0; } }
.fdl-tray { animation-name: fdl-fade; }
@media (prefers-reduced-motion: reduce) { .fdl-tray { animation: none; transition: none; } }

@media (max-width: 760px) {
  .fdl-tray { width: calc(100% - 24px); gap: 10px; padding-left: 10px; }
  .fdl-tray-covers i:nth-child(n+3) { display: none; }
  .fdl-tray-go { padding: 0 14px; }
}
.fdl-tray :focus:not(:focus-visible) { outline: none; }
.fdl-tray button:focus-visible { outline: 2px solid rgba(255,255,255,.6); outline-offset: 2px; box-shadow: none; }