.ml-player {
    background: #11141c;
    border: 1px solid #30364a;
    border-radius: 14px;
    padding: 12px;
    margin: 14px 0;
}

.waveform {
    width: 100%;
    min-height: 76px;
    cursor: pointer;
}

.player-controls {
    display: flex;
    align-items: center;
    gap: 9px;
    flex-wrap: wrap;
    margin-top: 10px;
}

.player-controls button {
    background: #f3c15f;
    color: #111;
    border: none;
    padding: 7px 11px;
    border-radius: 999px;
    font-size: 0.85rem;
    font-weight: 800;
    cursor: pointer;
}

.time-readout {
    color: #c3c8d8;
    font-variant-numeric: tabular-nums;
    font-size: 0.9rem;
}

.remaining {
    color: #8f98ad;
    margin-left: 4px;
}

.volume-control {
    display: flex;
    align-items: center;
    gap: 7px;
    color: #c3c8d8;
    font-size: 0.85rem;
}

.volume-slider {
    width: 100px;
}

.player-error {
    color: #ff9a9a;
    font-size: 0.85rem;
    margin-top: 8px;
}

.waveform-stage {
    position: relative;
    width: 100%;
}

.waveform-placeholder {
    display: block;
    width: 100%;
    height: 76px;
    object-fit: cover;
    border-radius: 10px;
    opacity: 0.82;
}

.waveform-live {
    width: 100%;
    min-height: 76px;
}

.waveform-live[hidden],
.waveform-placeholder[hidden] {
    display: none !important;
}