/* BPM & Key Finder: one card per song. */
.bk-list { display: grid; gap: .8rem; }
.bk-card { padding: 1rem 1.1rem; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow-sm); animation: bk-in .35s var(--ease) both; }
@keyframes bk-in { from { opacity: 0; transform: translateY(6px); } }
.bk-file { display: flex; align-items: center; gap: .55rem; min-width: 0; color: var(--text-soft); font-size: .92rem; }
.bk-file .icon { width: 17px; height: 17px; flex: none; }
.bk-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); font-weight: 600; }
.bk-copy { display: grid; place-items: center; width: 32px; height: 32px; border: 0; border-radius: 8px; background: none; color: var(--text-soft); cursor: pointer; }
.bk-copy:hover { background: var(--surface-2); color: var(--text); }
.bk-copy .icon { width: 16px; height: 16px; }
.bk-busy { display: flex; align-items: center; gap: .6rem; margin-top: .7rem; color: var(--text-soft); }
.bk-card.is-error .bk-busy { color: var(--danger, #dc2626); }
.bk-dots { display: inline-flex; gap: 4px; }
.bk-dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--primary); animation: bk-dot 1s ease-in-out infinite; }
.bk-dots i:nth-child(2) { animation-delay: .15s; } .bk-dots i:nth-child(3) { animation-delay: .3s; }
@keyframes bk-dot { 0%, 100% { opacity: .25; transform: scale(.8); } 50% { opacity: 1; transform: scale(1); } }
.bk-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .7rem; margin-top: .8rem; }
.bk-stat { display: flex; flex-direction: column; gap: .15rem; padding: .85rem .95rem; border-radius: var(--radius); background: color-mix(in srgb, var(--c) 9%, var(--surface)); border: 1px solid color-mix(in srgb, var(--c) 22%, var(--border)); }
.bk-bpm { --c: #6366f1; } .bk-key { --c: #e8457c; } .bk-alt { --c: #10b981; }
.bk-label { font-size: .78rem; font-weight: 650; letter-spacing: .04em; text-transform: uppercase; color: color-mix(in srgb, var(--c) 75%, var(--text)); }
.bk-stat strong { font-size: clamp(1.35rem, 1.1rem + 1vw, 1.8rem); line-height: 1.15; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.bk-stat strong small { font-size: .55em; font-weight: 600; color: var(--text-soft); letter-spacing: 0; }
.bk-sub { color: var(--text-soft); font-size: .82rem; }
.bk-more { margin-top: 1rem; }
@media (max-width: 640px) { .bk-stats { grid-template-columns: 1fr; } }