body {
    margin: 0;
    background: #000;
    font-family: Arial;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

/* floating animation */
@keyframes float {
    0% { transform: translateY(0px) rotateX(5deg); }
    50% { transform: translateY(-10px) rotateX(5deg); }
    100% { transform: translateY(0px) rotateX(5deg); }
}

.player {
    width: 300px;
    padding: 25px;
    border-radius: 20px;
    text-align: center;
    color: rgb(255, 255, 255);

    background: rgba(7, 93, 91, 0.648);
    backdrop-filter: blur(20px);

    box-shadow:
        0 20px 60px rgba(0, 0, 0, 0.475),
        0 0 25px rgb(0, 255, 200);

    animation: float 4s ease-in-out infinite;
}

/* headings */
h2 {
    margin-bottom: 5px;
    font-weight: bold;
}
h4 {
    margin-top: 0;
    opacity: 0.6;
}

/* 🔥 stylish progress */
#progress {
    width: 100%;
    margin: 20px 0;
    appearance: none;
    height: 7px;
    background: #000000;
    border-radius: 10px;
}

#progress::-webkit-slider-thumb {
    appearance: none;
    width: 14px;
    height: 14px;
    background: cyan;
    border-radius: 50%;
    box-shadow: 0 0 10px cyan;
}

/* buttons */
.controls button {
    margin: 8px;
    padding: 12px;
    border: none;
    background: #080101;
    color: rgb(255, 255, 255);
    cursor: pointer;
    border-radius: 10px;

    box-shadow: 0 0 10px rgba(0,255,200,0.2);
    transition: 0.2s;
}

.controls button:hover {
    transform: scale(1.1);
    box-shadow: 0 0 20px rgba(0,255,200,0.6);
}

/* 🔥 MAIN PLAY BUTTON */
#play {
    border: 2px solid rgb(222, 227, 227);
    box-shadow: 0 0 20px rgb(121, 233, 233);
}

/* volume */
.volume-container {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
}

#volume {
    width: 60%;
    appearance: none;
    height: 5px;
    background: #000000;
    #volumeIcon {
    cursor: pointer;
    display: inline-block;
}
}

#volume::-webkit-slider-thumb {
    appearance: none;
    width: 12px;
    height: 12px;
    background: rgb(241, 19, 19);
    border-radius: 50%;
}

/* playlist button */
#togglePlaylist {
    margin-top: 12px;
    padding: 8px 15px;
    background: transparent;
    border: 2px solid rgb(0, 0, 0);
    color: rgb(0, 0, 0);
    border-radius: 10px;
    cursor: pointer;
    transition: 0.2s;
}

#togglePlaylist:hover {
    background: cyan;
    color: black;
}

/* playlist */
li {
    padding: 6px;
    cursor: pointer;
}

li.active {
    color: cyan;
}

/* hidden */
.hidden {
    display: none;
}
#volumeIcon {
    cursor: pointer;
    display: inline-block;
}
/* 🎯 sliders pe hand cursor */
#volume,
#progress {
    cursor: pointer;
}

/* 🔥 thumb (circle) pe bhi hand cursor */
#volume::-webkit-slider-thumb,
#progress::-webkit-slider-thumb {
    cursor: pointer;
}

/* Firefox support */
#volume::-moz-range-thumb,
#progress::-moz-range-thumb {
    cursor: pointer;
}
#speed {
    margin-top: 10px;
    padding: 5px;
    background: #111;
    color: cyan;
    border: 1px solid cyan;
    border-radius: 5px;
    cursor: pointer;
}