/* Both the public player and the editor sample use these same custom properties. */
.profile-audio-player.music-card-custom {
    background: var(--music-card-background) !important;
    background-color: transparent !important;
    border: var(--music-card-border) !important;
    border-radius: var(--music-card-radius) !important;
    box-shadow: var(--music-card-shadow) !important;
    backdrop-filter: blur(var(--music-card-blur)) !important;
    -webkit-backdrop-filter: blur(var(--music-card-blur)) !important;
    padding: var(--music-card-padding) !important;
}
.profile-audio-player.music-card-custom .audio-cover-box { border-radius: var(--music-card-cover-radius) !important; color: var(--music-card-title) !important; background: rgba(255,255,255,.14) !important; }
.profile-audio-player.music-card-custom .audio-title { color: var(--music-card-title) !important; }
.profile-audio-player.music-card-custom .audio-artist { color: var(--music-card-artist) !important; }
.profile-audio-player.music-card-custom .audio-progress-line span { color: var(--music-card-time) !important; }
.profile-audio-player.music-card-custom .audio-step-btn { color: var(--music-card-step) !important; }
.profile-audio-player.music-card-custom .audio-toggle-btn,
.profile-audio-player.music-card-custom .audio-toggle-btn svg { color: var(--music-card-play) !important; }
.profile-audio-player.music-card-custom .audio-step-btn:hover,
.profile-audio-player.music-card-custom .audio-toggle-btn:hover,
.profile-audio-player.music-card-custom .audio-toggle-btn:hover svg { color: var(--music-card-hover) !important; }
.profile-audio-player.music-card-custom .audio-progress-track { background: var(--music-card-track) !important; }
.profile-audio-player.music-card-custom .audio-progress-fill,
.profile-audio-player.music-card-custom .audio-progress-thumb { background: var(--music-card-progress) !important; }
.music-card-volume-custom .volume-toggle-btn svg { color: var(--music-card-volume-icon) !important; }
.music-card-volume-custom .volume-bar-track { background: var(--music-card-volume-track) !important; }
.music-card-volume-custom .volume-bar-fill { background: var(--music-card-volume-fill) !important; }
.music-card-volume-custom .volume-slider::-webkit-slider-thumb { background: var(--music-card-volume-fill) !important; }
.music-card-volume-custom .volume-slider::-moz-range-thumb { background: var(--music-card-volume-fill) !important; }

/* Only layout rules needed to render the dashboard sample at the player's dimensions. */
.music-card-preview { width: 100%; max-width: 580px; box-sizing: border-box; margin: 14px 0; overflow: hidden; }
.music-card-preview .audio-player-inner { display: flex; align-items: center; gap: 15px; min-width: 0; }
.music-card-preview .audio-cover-box { width: 65px; height: 65px; flex: 0 0 65px; overflow: hidden; display: grid; place-items: center; background: #333; color: #eee; border-radius: 8px; }
.music-card-preview .audio-player-main { flex: 1; min-width: 0; display: grid; gap: 8px; }
.music-card-preview .audio-meta { display: grid; min-width: 0; }
.music-card-preview .audio-title, .music-card-preview .audio-artist { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.music-card-preview .audio-title { font-size: 17px; font-weight: 500; }
.music-card-preview .audio-artist { font-size: 13.5px; }
.music-card-preview .audio-player-row, .music-card-preview .audio-progress-line, .music-card-preview .audio-transport { display: flex; align-items: center; gap: 9px; min-width: 0; }
.music-card-preview .audio-progress-line { flex: 1; width: 100%; }
.music-card-preview .audio-seek { display: block; flex: 1; min-width: 20px; }
.music-card-preview .audio-progress-wrapper { display: block; position: relative; width: 100%; height: 6px; }
.music-card-preview .audio-progress-track, .music-card-preview .audio-progress-fill { position: absolute; top: 2px; left: 0; width: 100%; height: 2px; }
.music-card-preview .audio-progress-fill { width: 38%; }
.music-card-preview .audio-step-btn, .music-card-preview .audio-toggle-btn { border: 0; background: none; color: inherit; font-size: 21px; padding: 0 3px; }
.music-card-preview .audio-toggle-btn { font-size: 27px; }
.music-card-preview .audio-progress-line span { font-size: 14px; white-space: nowrap; }
@media (max-width: 560px) { .music-card-preview .audio-player-row { flex-wrap: wrap; } .music-card-preview .audio-transport { margin-left: auto; } }