@keyframes hide{0%{opacity:1}to{opacity:0}}@keyframes show{0%{opacity:0}to{opacity:1}}.app.show{background-color:var(--default-bg-color);color:var(--default-text-color);height:100vh;width:100vw;min-height:600px;min-width:850px;overflow:hidden;position:relative}.app.hide{display:none}.app-header{display:flex;align-items:stretch;-webkit-user-select:none;-moz-user-select:none;user-select:none}.app-header h1{margin:0;padding:.5rem;font-size:16px;flex:1;-webkit-app-region:drag}.app-main-container{display:flex;flex-direction:column;align-items:stretch;padding:.5rem;z-index:0;height:100%}.app-panels{flex:1;display:flex;flex-direction:row;margin-top:.5rem;margin-bottom:.5rem;z-index:2;height:100%;overflow:hidden}.app-panels>section:not(.right-panel){background-color:var(--default-secondary-bg-color);border-radius:10px;border:3px solid var(--default-border-color);padding:.5rem}.center-panel{flex:3;margin:0 1rem}.left-panel,.right-panel{flex:1}.top-bar,.bottom-bar{z-index:10;padding:.5rem;padding-left:0;padding-right:0;display:flex;align-items:center;flex:0 0 auto}.bottom-bar{margin-bottom:.5rem}.app-center-logo{z-index:1;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:200px;height:200px}.dots{all:unset;cursor:pointer;font-size:2rem;display:flex;justify-content:center;align-items:center}.top-bar-left{z-index:10;display:flex;align-items:center;column-gap:.5rem;flex:1}.hide{animation:hide .5s forwards}.show{animation:show .5s forwards}.toogle-center-panel{all:unset;cursor:pointer;transition:.3s}.toogle-center-panel:hover{transform:scale(1.1)}.toogle-center-panel:active{transform:scale(.9)}.toogle-center-panel img{width:40px;height:40px}.top-bar-right{display:flex;align-items:center;justify-content:flex-end;column-gap:.5rem;flex:1}.profile-button{all:unset;cursor:pointer;display:flex;align-items:center;column-gap:.5rem;transition:.3s}.profile-button img{width:40px;height:40px;border-radius:8px;border:3px solid var(--default-border-color)}.profile-button:hover{transform:scale(1.1)}.profile-button:active{transform:scale(.9)}.settings-button{all:unset;cursor:pointer;display:flex;align-items:center;font-size:2rem;padding:.5rem;transition:.3s}.settings-button:hover{transform:scale(1.1)}.settings-button:active{transform:scale(.8)}.bottom-bar-right{display:flex;justify-content:flex-end;align-items:center;column-gap:.5rem;flex:1}.pip,.fullscreen{all:unset;cursor:pointer;font-size:2rem;display:flex;justify-content:center;align-items:center;transition:.3s}.pip:hover,.fullscreen:hover{transform:scale(1.1);color:var(--default-title-color)}.pip:active,.fullscreen:active{transform:scale(.9)}.dropdown-container,.dropdown-menu{z-index:10}.fullscreen-app.show{position:fixed;top:0;left:0;width:100vw;height:100vh;background-color:var(--default-bg-color);color:var(--default-text-color);display:flex;flex-direction:column;align-items:stretch;justify-content:center;padding:.5rem}.fullscreen-app.hide{display:none}.center-logo-fs{width:300px;height:300px;margin:auto}.bottom-fs{display:flex;justify-content:center;align-items:center;padding:1rem}.nowplaying-fs{display:flex;flex-direction:column;padding:1rem}.nowplaying-fs h3{margin:0;padding:0;font-size:2rem;color:var(--default-title-color)}.nowplaying-fs p{margin:0;padding:0;font-size:1.5rem}.search-bar-container{display:flex;justify-content:center;align-items:center;padding:.5rem;border-radius:20px;cursor:pointer;flex:3;border:3px solid var(--default-secondary-border-color)}.search-icon{color:var(--default-text-color);font-size:2rem;margin-right:.5rem}.search-bar-container input{all:unset;flex:1;font-size:1rem;color:var(--default-text-color);width:clamp(200px,300px,500px)}.search-bar-container:focus-within{border:3px solid var(--default-border-color)}.search-bar-container:focus-within input{cursor:text}.search-bar-container:focus-within{cursor:default;background-color:var(--default-secondary-bg-color)}.search-bar-container:hover{background-color:var(--default-secondary-bg-color)}.clear-input{all:unset;cursor:pointer;color:var(--default-text-color);font-size:1.5rem;display:flex;justify-content:center;align-items:center;margin-left:.5rem;visibility:hidden}.search-input:not(:placeholder-shown)~.clear-input{visibility:visible}.music-controler{display:flex;flex-direction:column;justify-content:center;align-items:center;flex:3}.controls{display:flex;justify-content:center;align-items:center;column-gap:1rem}.controls button:not(.shuffle,.repeatbtn){all:unset;cursor:pointer;font-size:2rem;display:flex;justify-content:center;align-items:center;color:var(--default-title-color);transition:.3s}.controls button:not(.shuffle,.repeatbtn):hover{color:var(--default-text-color);transform:scale(1.1)}.controls button:not(.shuffle,.repeatbtn):active{transform:scale(.9)}.shuffle,.repeatbtn{all:unset;cursor:pointer;font-size:2rem;display:flex;justify-content:center;align-items:center;color:var(--default-text-color);transition:.3s}.shuffle:hover,.repeatbtn:hover{transform:scale(1.1)}.shuffle:active,.repeatbtn:active{transform:scale(.9)}.repeat,.repeat-one,.active{color:var(--default-title-color)}.progress-bar{display:flex;justify-content:center;align-items:center;column-gap:1rem;margin-top:.5rem}.progress-bar input[type=range]{width:350px;-webkit-appearance:none;appearance:none;-moz-appearance:none;background:var(--default-secondary-bg-color);height:5px;border-radius:5px;outline:none;transition:.2s}.progress-bar input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;-moz-appearance:none;width:15px;height:15px;border-radius:50%;background:var(--default-text-color);cursor:pointer;position:relative;top:-5px;visibility:hidden}.progress-bar input[type=range]::-webkit-slider-runnable-track{background:linear-gradient(to right,var(--default-text-color) 0%,var(--default-text-color) var(--value),gray var(--value),gray 100%);width:100%;height:5px;border-radius:5px}.progress-bar input[type=range]:hover::-webkit-slider-thumb{visibility:visible}.progress-bar input[type=range]:hover::-webkit-slider-runnable-track{background:linear-gradient(to right,var(--default-title-color) 0%,var(--default-title-color) var(--value),gray var(--value),gray 100%)}.volume-controller{display:flex;align-items:center;column-gap:.5rem;flex:1}.volume-controller button{all:unset;cursor:pointer;font-size:2rem;display:flex;justify-content:center;align-items:center;color:var(--default-text-color);transition:.3s}.volume-controller button:hover{color:var(--default-title-color);transform:scale(1.1)}.volume-controller button:active{transform:scale(.9)}.volume-controller input[type=range]{width:100px;-webkit-appearance:none;appearance:none;-moz-appearance:none;background:var(--default-secondary-bg-color);height:5px;border-radius:5px;outline:none;transition:.2s}.volume-controller input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;-moz-appearance:none;width:15px;height:15px;border-radius:50%;background:var(--default-text-color);cursor:pointer;position:relative;top:-5px;visibility:hidden}.volume-controller input[type=range]::-webkit-slider-runnable-track{background:linear-gradient(to right,var(--default-text-color) 0%,var(--default-text-color) var(--valueVolume),gray var(--valueVolume),gray 100%);width:100%;height:5px;border-radius:5px}.volume-controller input[type=range]:hover::-webkit-slider-thumb{visibility:visible}.volume-controller input[type=range]:hover::-webkit-slider-runnable-track{background:linear-gradient(to right,var(--default-title-color) 0%,var(--default-title-color) var(--valueVolume),gray var(--valueVolume),gray 100%)}.dropdown-container{position:relative;z-index:1000}.dropdown-menu{position:absolute;top:120%;left:0;border:1px solid var(--default-border-color);border-radius:5px;background-color:var(--default-secondary-bg-color);display:flex;flex-direction:column;box-shadow:0 8px 16px #0003;min-width:100px}.dropdown-menu-item{position:relative;flex:1}.dropdown-menu-item button{background-color:var(--default-secondary-bg-color);border:none;border-radius:5px;color:var(--default-text-color);padding:.5rem;text-align:left;text-decoration:none;display:flex;align-items:center;justify-content:space-between;width:100%;cursor:pointer;column-gap:.5rem;white-space:nowrap}.dropdown-menu-item button:hover{background-color:#3d3d3d}.dropdown-menu-submenu{display:none;position:absolute;top:0;left:100%;margin-left:0;background-color:var(--default-secondary-bg-color);border:1px solid var(--default-border-color);border-radius:5px;box-shadow:0 8px 16px #0003;z-index:1001}.dropdown-menu-item:hover .dropdown-menu-submenu{display:flex;flex-direction:column}.profile-content{display:flex;flex-direction:column;align-items:flex-start;row-gap:1rem}.profile-content h1{font-size:3rem;padding:0;margin:0}.profile-header{display:flex;column-gap:1rem;align-items:flex-end}.profile-header img{width:100px;height:100px;border-radius:10px}.modify-btn{all:unset;cursor:pointer;padding:.5rem 1rem;border-radius:5px;border:2px solid var(--default-border-color);background-color:var(--default-bg-color);color:var(--default-text-color);transition:.3s}.modify-btn:hover{background-color:transparent}.profile-change{border:2px solid var(--default-border-color);border-radius:5px;padding:1rem;background-color:var(--default-bg-color);box-shadow:0 0 10px #ffffff86;position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);overflow:hidden}.profile-change h2{font-size:1.5rem;padding:0;margin:0;color:var(--default-text-color)}.dialog-header{display:flex;justify-content:space-between;align-items:center}.dialog-header button{all:unset;cursor:pointer;font-size:2rem;color:var(--default-text-color)}.dialog-content{margin-top:10px;display:flex;flex-direction:column;align-items:flex-start;row-gap:.5rem}.dialog-content input{padding:.5rem;border-radius:5px;border:2px solid var(--default-title-color);background-color:var(--default-bg-color);color:var(--default-text-color)}.dialog-content button{all:unset;cursor:pointer;padding:.5rem 1rem;border-radius:5px;border:2px solid var(--default-border-color);background-color:var(--default-secondary-bg-color);color:var(--default-text-color);transition:.3s}.dialog-content button:hover{background-color:var(--default-bg-color)}.dialog-content label{color:var(--default-text-color)}.pwd{display:flex;flex-direction:column;align-items:flex-start;row-gap:.5rem}.profile-change::backdrop{background-color:#00000080}.toggle-switch-container-on,.toggle-switch-container-off{display:flex;align-items:center;width:3rem;height:1.5rem;border-radius:1rem;cursor:pointer;transition:.3s}.toggle-switch-container-on{background-color:var(--default-title-color)}.toggle-switch-container-off{background-color:#ccc}.switch-on,.switch-off{width:1.5rem;height:1.5rem;border-radius:50%;background-color:var(--default-text-color);transition:.3s}.switch-on{transform:translate(1.5rem)}.switch-off{transform:translate(0)}.settings{height:100%;max-height:100%;overflow-y:scroll;scrollbar-color:rgba(255,255,255,.5) transparent;display:flex;flex-direction:column;gap:1.5rem}.settings-content{display:flex;flex-direction:column;gap:5rem}.theme-options{display:flex;justify-content:space-between}.theme-option{cursor:pointer}.theme-preview{width:5rem;height:2rem;border-radius:5px;box-sizing:border-box}.theme-option:hover .theme-preview{border:2px solid var(--default-border-color)}.autoplay{display:flex;align-items:center;justify-content:space-between}.logout button{all:unset;display:flex;align-items:center;justify-content:center;cursor:pointer;font-weight:600;padding:.5rem 1rem;border-radius:5px;border:2px solid var(--default-border-color);background-color:#ff5f56;color:var(--default-text-color)}.theme{display:flex;flex-direction:column;gap:1rem}.card{width:100%;height:100%;border-radius:5px;position:relative;box-shadow:0 0 10px #00000086}.card img{width:100%;height:100%;border-radius:5px}.img-placeholder{width:100%;height:100%;border-radius:5px;background-color:#6e6e6e;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);display:flex;justify-content:center;align-items:center;font-size:1.5rem}@keyframes pulse{0%,to{background-color:#414040}50%{background-color:#b4b4b4}}.card-play{all:unset;position:absolute;display:flex;justify-content:center;align-items:center;top:50%;left:50%;width:100%;height:100%;transform:translate(-50%,-50%);color:var(--default-text-color);background-color:#00000080;border-radius:5px;font-size:2rem;display:none}.card:hover .card-play{display:flex}.card-play:focus,.card-play:active{outline:none}.track-card{display:flex;justify-content:start;align-items:center;column-gap:.5rem;border-radius:5px;padding:.5rem}.track-img,.album-img,.artist-img,.playlist-img{width:5rem;height:5rem;border-radius:5px}.track-card-info{display:flex;flex-direction:column;justify-content:end;align-items:flex-start;text-overflow:ellipsis}.track-card-info h3{white-space:nowrap;font-size:1.5rem;color:var(--default-text-color);padding:0;margin:0}.track-card-artists{display:flex;column-gap:.5rem;font-size:1rem;color:var(--default-text-color);padding:0;margin:0}.track-card-artist{padding:0;margin:0}.track-card:hover{background-color:#00000080}.album-card{display:flex;flex-direction:column;justify-content:start;row-gap:.5rem;border-radius:5px;padding:.5rem;width:10rem;cursor:pointer}.album-card:hover{background-color:#00000080}.artist-card{display:flex;flex-direction:column;justify-content:start;row-gap:.5rem;border-radius:5px;padding:.5rem;width:10rem;cursor:pointer}.artist-card:hover{background-color:#00000080}.playlist-card{display:flex;flex-direction:column;justify-content:start;row-gap:.5rem;border-radius:5px;padding:.5rem;width:10rem;cursor:pointer}.playlist-card:hover{background-color:#00000080}.track-card p:hover,.album-card p:hover,.artist-card p:hover,.playlist-card p:hover{text-decoration:underline;cursor:pointer}.search-result{height:100%;max-height:100%;overflow-y:scroll;scrollbar-color:rgba(255,255,255,.5) transparent;display:flex;flex-direction:column;gap:1.5rem}.search-result-tracks-list{display:flex;flex-direction:column;row-gap:1rem}.search-result h2{color:var(--default-text-color);font-size:2rem}.search-result-albums-list,.search-result-artists-list,.search-result-playlists-list{display:flex;flex-wrap:wrap;justify-content:space-between}.library-item{display:flex;border-radius:5px;padding:.5rem;gap:1rem;cursor:pointer;position:relative;align-items:center}.library-item:hover{background-color:#00000080}.library-item-img{width:3rem;height:3rem;object-fit:cover;border-radius:5px;box-shadow:0 0 5px #00000080}.library-item-info{display:flex;flex-direction:column;gap:.5rem}.img-placeholder-l{width:3rem;height:3rem;border-radius:5px;box-shadow:0 0 5px #00000080;background-color:#6e6e6e;position:absolute;display:flex;justify-content:center;align-items:center;font-size:1.5rem}.library{height:100%;max-height:100%;overflow-y:scroll;scrollbar-color:rgba(255,255,255,.5) transparent}.library-items{display:flex;flex-direction:column;gap:.5rem;justify-content:center;flex-wrap:wrap}.now-playing{display:flex;flex-direction:column;gap:1rem}.song-card{flex:3;padding:1rem;border-radius:10px;border:3px solid var(--default-border-color);background-color:var(--default-secondary-bg-color);position:relative}.song-card img{width:100%;height:100%;object-fit:cover;border-radius:10px;box-shadow:0 0 5px #00000080}.song-card h3{color:var(--default-title-color)}.song-card p{color:var(--default-text-color);cursor:pointer}.song-card p:hover{text-decoration:underline}.song-actions{display:flex;gap:1rem}.song-actions button{all:unset;border-radius:10px;border:3px solid var(--default-border-color);padding:.5rem;background-color:var(--default-secondary-bg-color);color:var(--default-text-color);cursor:pointer;display:flex;justify-content:center;align-items:center;width:3rem;height:3rem;font-size:2rem}.liked{color:#e43552}.img-placeholder-n{width:100%;height:100%;border-radius:10px;box-shadow:0 0 5px #00000080;display:flex;justify-content:center;align-items:center;font-size:1.5rem;position:absolute;top:0;background-color:#6e6e6e}.song-img{width:100%;aspect-ratio:1/1;border-radius:10px;position:relative}.playlist-page,.album-page,.artist-page{height:100%;max-height:100%;overflow-y:scroll;scrollbar-color:rgba(255,255,255,.5) transparent;display:flex;flex-direction:column;gap:1.5rem;position:relative}.playlist-page-header,.album-page-header,.artist-page-header{display:flex;align-items:center;gap:1rem}.playlist-page-img,.album-page-img,.artist-page-img{width:150px;height:150px;border-radius:5px;flex:0 0 150px}.playlist-page-title,.album-page-title,.artist-page-title{color:var(--default-title-color);font-size:3rem;font-weight:700}.playlist-page-songs,.album-page-songs,.artist-page-songs{display:flex;flex-direction:column;position:relative;gap:1rem}.playlist-page-songs-header,.album-page-songs-header{display:grid;grid-template-columns:4fr 4fr 1fr;font-weight:600;color:var(--default-text-color);border-bottom:1px solid var(--default-border-color);padding:.5rem}.playlist-page-song,.album-page-song,.artist-page-song{display:grid;grid-template-columns:4fr 4fr 1fr;padding:.5rem;align-items:center;border-radius:5px}.album-page-song{padding:1rem .5rem}.album-page-song-play{padding:0;margin:0}.album-page-song>.album-page-song-card>.album-page-song-play{visibility:hidden}.album-page-song:hover>.album-page-song-card>.album-page-song-play{visibility:visible}.playlist-page-song:hover,.album-page-song:hover,.artist-page-song:hover{background-color:#00000080}.playlist-page-song-card,.album-page-song-card,.artist-page-song-card{display:flex;align-items:center;gap:1rem}.song-img-info{width:50px;height:50px;border-radius:5px;flex:0 0 50px}.playlist-page-song-title,.album-page-song-title{color:var(--default-text-color);font-weight:600}.playlist-page-song-artist{color:var(--default-text-color);font-weight:100}.playlist-page-song-artist:hover,.playlist-page-song-album:hover{text-decoration:underline;cursor:pointer}.artist-page h3{color:var(--default-text-color);font-size:2rem;font-weight:700}.song-cardimg{width:50px;height:50px;border-radius:5px;flex:0 0 50px}.artist-page-albums{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:1rem}.artist-page-album{display:flex;flex-direction:column;gap:.5rem;padding:.5rem;border-radius:5px}.artist-page-album:hover{background-color:#00000080}.artist-page-album-card{width:150px;height:150px;border-radius:5px;align-self:center}.artist-page-album-title{color:var(--default-text-color);font-weight:600}.artist-page-album-title:hover{text-decoration:underline;cursor:pointer}.login{background-color:var(--default-bg-color);color:var(--default-text-color);height:100vh;width:100vw;display:flex;flex-direction:column;overflow:hidden}.login-header{display:flex;align-items:stretch;-webkit-user-select:none;-moz-user-select:none;user-select:none}.login-header h1{margin:0;padding:.5rem;font-size:16px;flex:1;-webkit-app-region:drag}.login-form{width:100%;height:100%;z-index:0;position:relative}.login-login,.login-signup{z-index:0;display:flex;flex-direction:column;align-items:flex-start;position:absolute;row-gap:.5rem;top:50%;transform:translateY(-50%)}.login-login{animation:fromLeft 1s forwards}.login-signup{animation:fromRight 1s forwards}.login-form label{color:var(--default-text-color)}.login-form input{all:unset;border-radius:5px;border:1px solid var(--default-title-color);padding:.5rem}.login-form input:focus{border:1px solid var(--default-border-color)}.login-form button{all:unset;border-radius:5px;border:1px solid var(--default-border-color);padding:.5rem;background-color:var(--default-secondary-bg-color);color:var(--default-text-color);cursor:pointer}.login-form button:hover{background-color:var(--default-border-color);color:var(--default-secondary-bg-color)}.login-form button:active{background-color:var(--default-title-color);color:var(--default-secondary-bg-color)}.login-form span{color:var(--default-title-color);cursor:pointer}.login-image{z-index:1000;height:100vh;position:relative;transition:2s}.login-image img{z-index:1000;height:500px;aspect-ratio:1/1;position:relative;top:50%;transform:translateY(-50%)}.right{position:fixed;right:-250px;rotate:360deg}.left{position:fixed;right:calc(100% - 250px);rotate:0deg}.login-form p:not(.error){color:var(--default-text-color);padding:0;margin:0}.error{color:#ec3333;padding:0;margin:0;white-space:wrap;max-width:250px}@keyframes animLogo{0%{transform:rotate(360deg);left:unset;right:-250px}to{transform:rotate(0);left:-250px;right:unset}}@keyframes fromRight{0%{right:-100%}to{right:50px}}@keyframes fromLeft{0%{left:-100%}to{left:50px}}.login-image svg{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.login-text{fill:var(--default-text-color);font-size:110px;font-weight:500;letter-spacing:.1em}@keyframes show2{0%{opacity:0}to{opacity:1}}.onright{animation:show 3s forwards}.onleft{animation:show2 3s forwards}body{margin:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}code{font-family:source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace}:root{--default-text-color: white;--default-title-color: #38B6FF;--default-border-color: white;--default-secondary-border-color: #38B6FF;--default-bg-color: #222222;--default-secondary-bg-color: #2C3333}*{margin:0;padding:0;box-sizing:border-box;-webkit-user-select:none;user-select:none}