.aud-body {
    background: linear-gradient(160deg, #1a0010, #3d0020);
    padding: 14px;
}

.aud-track {
    font-family: 'Press Start 2P', monospace;
    font-size: 7px;
    color: var(--soft);
    margin-bottom: 3px;
}

.aud-artist {
    font-family: 'Nunito', sans-serif;
    font-size: 10px;
    color: var(--pink);
    font-weight: 700;
    margin-bottom: 8px;
}

.aud-disc {
    width: 84px;
    height: 84px;
    border-radius: 50%;
    border: 3px solid var(--pink);
    overflow: hidden;
    margin: 0 auto 8px;
    animation: spin 8s linear infinite paused;
    font-size: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #330025;
}

.aud-disc.playing {
    animation-play-state: running;
}

.aud-ctrl {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
}

.aud-btn {
    background: var(--pink);
    border: 2px solid white;
    border-radius: 50%;
    width: 36px;
    height: 36px;
    cursor: pointer;
    font-size: 13px;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
}

.aud-btn.sm {
    width: 28px;
    height: 28px;
    font-size: 10px;
    background: rgba(247, 37, 133, .5);
}

.aud-vol {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 8px;
}

.aud-vol-icon {
    font-size: 12px;
    color: var(--soft);
    cursor: pointer;
    user-select: none;
}

.aud-vol-slider {
    flex: 1;
    accent-color: var(--pink);
    cursor: pointer;
}

.aud-vol-pct {
    font-family: 'Press Start 2P', monospace;
    font-size: 6px;
    color: var(--soft);
    width: 28px;
}

.aud-prog {
    height: 5px;
    background: #3d0020;
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid var(--pink);
    margin-bottom: 5px;
    cursor: pointer;
}

.aud-pfill {
    height: 100%;
    background: var(--pink);
    width: 0%;
    transition: width .5s;
    pointer-events: none;
}

.aud-time {
    display: flex;
    justify-content: space-between;
    font-family: 'Nunito', sans-serif;
    font-size: 9px;
    color: var(--soft);
    margin-bottom: 6px;
}

.aud-playlist {
    border-top: 1px solid rgba(247, 37, 133, .3);
    margin-top: 2px;
}

.aud-pl-item {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 6px 2px;
    cursor: pointer;
    border-bottom: 1px solid rgba(255, 255, 255, .04);
    transition: background .1s;
}

.aud-pl-item:hover {
    background: rgba(247, 37, 133, .1);
}

.aud-pl-item.on {
    background: rgba(247, 37, 133, .18);
}

.aud-pl-num {
    font-family: 'Press Start 2P', monospace;
    font-size: 5px;
    color: rgba(255, 180, 200, .45);
    width: 14px;
    text-align: right;
    flex-shrink: 0;
}

.aud-pl-info {
    flex: 1;
    min-width: 0;
}

.aud-pl-title {
    font-family: 'Press Start 2P', monospace;
    font-size: 5.5px;
    color: var(--soft);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.aud-pl-title.on {
    color: var(--pink);
}

.aud-pl-artist {
    font-family: 'Nunito', sans-serif;
    font-size: 9px;
    color: rgba(255, 180, 200, .55);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}