#midiPlayerBar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: -70px;
    height: 60px;
    background-color: rgba(23, 20, 60, 0.97);
    color: #fff;
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: 0 1.25rem;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, .25);
    transition: bottom 200ms ease;
    z-index: 1000;
    font-size: .9rem;
}

#midiPlayerBar.active {
    bottom: 0;
}

#midiPlayerBar button {
    background: rgba(255, 255, 255, .12);
    border: none;
    border-radius: 50%;
    color: #fff;
    cursor: pointer;
    flex: 0 0 auto;
    font-size: 1rem;
    height: 36px;
    width: 36px;
    line-height: 1;
}

#midiPlayerBar button:hover {
    background: rgba(255, 255, 255, .22);
}

#midiPlayerTitle {
    flex: 0 1 auto;
    max-width: 22%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#midiPlayerElapsed,
#midiPlayerDuration {
    flex: 0 0 auto;
    font-variant-numeric: tabular-nums;
    opacity: .85;
    width: 2.75rem;
}

#midiPlayerDuration {
    text-align: right;
}

#midiPlayerProgress {
    flex: 1 1 auto;
}

#midiPlayerVolume {
    flex: 0 0 90px;
}

#midiPlayerSpeed {
    background: rgba(255, 255, 255, .12);
    border: none;
    border-radius: 4px;
    color: #fff;
    cursor: pointer;
    flex: 0 0 auto;
    font-size: .85rem;
    padding: 4px 2px;
}

#midiPlayerSpeed option {
    color: #000;
}

#midiPlayerStatus {
    flex: 0 0 auto;
    font-style: italic;
    opacity: .8;
    min-width: 100px;
}

.midi-edit-title,
.midi-edit-artist {
    padding: 2px 6px;
    width: 95%;
}

.midi-edit-btn,
.midi-save-btn,
.midi-cancel-btn {
    height: auto;
    padding: 2px 8px;
}

tr.midi-row-playing {
    background-color: var(--accent-soft, rgba(46, 158, 63, .18));
    color: var(--text, inherit);
}

tr.midi-row-playing:hover {
    background-color: rgba(46, 158, 63, .28);
}

button.midi-row-playing-btn {
    background-color: var(--accent, #2e9e3f);
    color: #fff;
}

/* MidiID shown next to titles wherever songs are listed — many entries
   look like duplicates but are actually alternate versions/arrangements,
   and the ID is what actually tells them apart. */
.song-id {
    color: #999;
    font-family: "Courier New", Courier, monospace;
    font-size: .8em;
}

.id-cell {
    color: #999;
    font-family: "Courier New", Courier, monospace;
    font-size: .8em;
    white-space: nowrap;
}

@media (max-width: 629px) {
    #midiPlayerTitle {
        display: none;
    }

    #midiPlayerVolume {
        display: none;
    }

    #midiPlayerSpeed {
        display: none;
    }

    .midi-play-btn .btn-label,
    .midi-like-btn .btn-label {
        display: none;
    }
}