#mini-player{

    direction:ltr;

    position:fixed;

    left:50%;
    bottom:25px;

    transform:
            translateX(-50%)
            translateY(140px);

    width:min(1000px,92vw);

    height:82px;

    padding:0 20px;

    border-radius:30px;

    display:flex;
    align-items:center;
    justify-content:space-between;

    background:rgba(255,255,255,.08);

    backdrop-filter:blur(25px);

    border:1px solid rgba(255,255,255,.12);

    box-shadow:
            0 15px 45px rgba(0,0,0,.18);

    transition:.35s;

    opacity:0;

    z-index:9999;
}

#mini-player.show{

    opacity:1;

    transform:
            translateX(-50%)
            translateY(0);

}

.mini-left{

    display:flex;

    gap:12px;

    margin-right:10px;
}

.mini-btn{

    width:54px;
    height:54px;

    border:none;

    border-radius:18px;

    background:rgba(255,255,255,.08);

    color:white;

    cursor:pointer;

    transition:.25s;
}

.mini-btn:hover{

    transform:translateY(-2px);

    background:rgba(255,255,255,.16);

}

.mini-center{

    flex:1;

    display:flex;

    align-items:center;

    gap:18px;

}

#mini-time{

    color:white;

    font-size:2rem;

    font-weight:600;

    width:120px;
}

.progress{

    flex:1;

    height:8px;

    border-radius:10px;

    overflow:hidden;

    background:rgba(255,255,255,.12);
}

#mini-progress{

    width:65%;

    height:100%;

    border-radius:10px;

    background:linear-gradient(
            90deg,
            #ffb347,
            #ff6b35
    );

    transition:.4s;
}

#mini-mode{

    width:90px;

    color:white;

    text-align:center;

    font-size:1.2rem;
}

.mini-close{

    width:54px;

    height:54px;

    border:none;

    border-radius:18px;

    background:rgba(255,255,255,.08);

    color:white;

    cursor:pointer;
}

#mini-player.hidden{

    display:none;
}

main{

    transition:all .35s ease;

}

main.compact,
header.compact,
#music-panel.compact,
#music-overlay.compact,
#music-mini-player.compact{

    opacity:0;

    transform:scale(.95);

    pointer-events:none;

    user-select:none;

}

/*.compact-hide{*/
/*    transform: scale(.9);*/
/*    opacity: 0;*/
/*    pointer-events: none;*/
/*    transition: .25s;*/
/*}*/


/* =============================== */
/* MINI PLAYER                     */
/* =============================== */

.mini-player{

    position:fixed;

    left:50%;

    bottom:-120px;

    transform:translateX(-50%);

    width:min(1000px,92%);

    height:95px;

    padding:18px 25px;

    display:flex;

    align-items:center;

    gap:20px;

    border-radius:35px;

    backdrop-filter:blur(25px);

    background:rgba(255,255,255,.12);

    border:1px solid rgba(255,255,255,.18);

    box-shadow:
            0 15px 40px rgba(0,0,0,.25);

    transition:.45s ease;

    z-index:99999;

}

.mini-player.show{

    bottom:25px;

}

.mini-btn{

    width:58px;

    height:58px;

    border:none;

    border-radius:20px;

    background:rgba(255,255,255,.12);

    color:white;

    font-size:22px;

    cursor:pointer;

    transition:.3s;

}

.mini-btn:hover{

    transform:translateY(-3px);

    background:rgba(255,255,255,.22);

}

.primary{

    background:#00d95f;

}

.primary:hover{

    background:#00ef6b;

}

.close{

    margin-right:auto;

}

.mini-time{

    display:flex;

    align-items:center;

    gap:20px;

    flex:1;

}

#mini-timer{

    width:90px;

    color:white;

    font-size:34px;

    font-weight:700;

}

.mini-progress{

    flex:1;

    height:6px;

    border-radius:20px;

    background:rgba(255,255,255,.15);

    overflow:hidden;

}


#mini-progress-fill{

    width:40%;

    height:100%;

    border-radius:20px;

    background:linear-gradient(90deg,#ff9335,#ff4f6d);

    transition:width .4s linear;

}

.mini-status{

    display:flex;

    align-items:center;

    gap:10px;

    color:white;

    font-size:24px;

    min-width:170px;

}

.mini-status i{

    font-size:28px;

}

.mini-btn{
    display:flex;
    align-items:center;
    justify-content:center;
}

.mini-close{
    display:flex;
    align-items:center;
    justify-content:center;

    margin-left:20px;
}

.progress{

    flex:1;

    height:6px;

    border-radius:20px;

    background:rgba(255,255,255,.15);

    overflow:hidden;

    position:relative;

    direction:ltr;

}

#mini-progress{

    position:absolute;

    top:0;

    left:0;

    right:auto;

    width:0;

    height:100%;

    border-radius:20px;

    background:linear-gradient(
            90deg,
            #ff9335,
            #ff4f6d
    );

    transition:width .4s linear;

}




/*//////////////////////////////////*/




/*!* ======================================*/
/*   MINI PLAYER*/
/*====================================== *!*/

/*#mini-player{*/

/*    direction:ltr;*/

/*    position:fixed;*/

/*    left:50%;*/
/*    bottom:24px;*/

/*    transform:*/
/*            translateX(-50%)*/
/*            translateY(140px);*/

/*    width:min(1000px,92vw);*/

/*    height:82px;*/

/*    padding:0 20px;*/

/*    display:flex;*/
/*    align-items:center;*/
/*    justify-content:space-between;*/

/*    gap:18px;*/

/*    border-radius:30px;*/

/*    background:rgba(255,255,255,.08);*/

/*    backdrop-filter:blur(25px);*/

/*    border:1px solid rgba(255,255,255,.12);*/

/*    box-shadow:*/
/*            0 15px 45px rgba(0,0,0,.18);*/

/*    opacity:0;*/

/*    transition:*/
/*            transform .35s,*/
/*            opacity .35s;*/

/*    z-index:9999;*/

/*}*/

/*#mini-player.show{*/

/*    opacity:1;*/

/*    transform:*/
/*            translateX(-50%)*/
/*            translateY(0);*/

/*}*/

/*#mini-player.hidden{*/

/*    display:none;*/

/*}*/


/*!* ======================================*/
/*   LEFT*/
/*====================================== *!*/

/*.mini-left{*/

/*    display:flex;*/

/*    gap:12px;*/

/*    flex-shrink:0;*/

/*}*/


/*!* ======================================*/
/*   BUTTONS*/
/*====================================== *!*/

/*.mini-btn,*/
/*.mini-close{*/

/*    width:54px;*/
/*    height:54px;*/

/*    display:flex;*/
/*    align-items:center;*/
/*    justify-content:center;*/

/*    border:none;*/

/*    border-radius:18px;*/

/*    background:rgba(255,255,255,.08);*/

/*    color:#fff;*/

/*    cursor:pointer;*/

/*    transition:.25s;*/

/*    flex-shrink:0;*/

/*}*/

/*.mini-btn:hover,*/
/*.mini-close:hover{*/

/*    transform:translateY(-2px);*/

/*    background:rgba(255,255,255,.16);*/

/*}*/


/*!* ======================================*/
/*   CENTER*/
/*====================================== *!*/

/*.mini-center{*/

/*    flex:1;*/

/*    min-width:0;*/

/*    display:flex;*/

/*    align-items:center;*/

/*    gap:18px;*/

/*}*/

/*#mini-time{*/

/*    width:110px;*/

/*    flex-shrink:0;*/

/*    color:#fff;*/

/*    font-size:2rem;*/

/*    font-weight:600;*/

/*}*/

/*.progress{*/

/*    flex:1;*/

/*    min-width:0;*/

/*    height:6px;*/

/*    position:relative;*/

/*    overflow:hidden;*/

/*    border-radius:20px;*/

/*    background:rgba(255,255,255,.15);*/

/*}*/

/*#mini-progress{*/

/*    position:absolute;*/

/*    left:0;*/
/*    top:0;*/

/*    width:0;*/

/*    height:100%;*/

/*    border-radius:20px;*/

/*    background:linear-gradient(*/
/*            90deg,*/
/*            #ff9335,*/
/*            #ff4f6d*/
/*    );*/

/*    transition:width .35s linear;*/

/*}*/

/*#mini-mode{*/

/*    width:90px;*/

/*    flex-shrink:0;*/

/*    color:#fff;*/

/*    text-align:center;*/

/*    font-size:1.1rem;*/

/*}*/

@media (max-width:992px){

    #mini-player{

        width:94vw;

        height:76px;

        padding:0 16px;

    }

    .mini-center{

        gap:14px;

    }

    #mini-time{

        width:90px;

        font-size:1.6rem;

    }

    #mini-mode{

        width:70px;

        font-size:1rem;

    }

}

@media (max-width:768px){

    #mini-player{

        width:calc(100vw - 20px);

        height:72px;

        padding:0 14px;

        border-radius:22px;

        bottom:16px;

    }

    .mini-left{

        gap:8px;

    }

    .mini-btn,
    .mini-close{

        width:42px;
        height:42px;

        border-radius:14px;

        font-size:.9rem;

    }

    .mini-close{
        margin-left: 10px;
    }

    .mini-center{

        gap:10px;

    }

    #mini-time{

        width:62px;

        font-size:1.2rem;

    }

    #mini-mode{

        width:48px;

        font-size:.85rem;

    }

}

@media (max-width:430px){

    #mini-player{

        padding:0 12px;

    }

    #mini-mode{

        display:none;

    }

    .mini-center{

        gap:8px;

    }

}

@media (max-width:430px){

    #mini-player{

        padding:0 12px;

    }

    #mini-mode{

        display:none;

    }

    .mini-center{

        gap:8px;

    }

}