:root{--color-bg:#0a0a0a;--color-bg-light:#1a1a1a;--color-bg-card:#2a2a2a;--color-font:#fff;--color-font-secondary:#b3b3b3;--color-bg-hover:hsla(0,0%,100%,0.1);--color-bg-active:#1db954;--color-accent:#1db954;--color-gradient:linear-gradient(135deg,#667eea,#764ba2);--shadow-sm:0 2px 4px rgba(0,0,0,0.1);--shadow-md:0 4px 6px rgba(0,0,0,0.1);--shadow-lg:0 10px 15px rgba(0,0,0,0.1);--border-radius:12px;--border-radius-sm:8px;--border-radius-lg:16px}*{margin:0;padding:0;box-sizing:border-box}@media screen and (max-width:93.75em){html{font-size:90%}}@media screen and (max-width:30em){html{font-size:70%}}::-webkit-scrollbar-track{background-color:red}h1,h2,h3{font-weight:600;letter-spacing:-.02em}h2{font-size:2rem}h4{font-size:1rem;font-weight:400;color:#b3b3b3;color:var(--color-font-secondary)}body{background:linear-gradient(135deg,#0a0a0a,#1a1a1a);background:linear-gradient(135deg,var(--color-bg),#1a1a1a);color:#fff;color:var(--color-font);font-family:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI","Roboto",sans-serif;line-height:1.6;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}@-webkit-keyframes fadeInUp{0%{opacity:0;-webkit-transform:translateY(30px);transform:translateY(30px)}to{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}}@keyframes fadeInUp{0%{opacity:0;-webkit-transform:translateY(30px);transform:translateY(30px)}to{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}}@-webkit-keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@-webkit-keyframes float{0%,to{-webkit-transform:translateY(0) rotate(0deg);transform:translateY(0) rotate(0deg)}25%{-webkit-transform:translateY(-20px) rotate(5deg);transform:translateY(-20px) rotate(5deg)}50%{-webkit-transform:translateY(-10px) rotate(-3deg);transform:translateY(-10px) rotate(-3deg)}75%{-webkit-transform:translateY(-15px) rotate(2deg);transform:translateY(-15px) rotate(2deg)}}@keyframes float{0%,to{-webkit-transform:translateY(0) rotate(0deg);transform:translateY(0) rotate(0deg)}25%{-webkit-transform:translateY(-20px) rotate(5deg);transform:translateY(-20px) rotate(5deg)}50%{-webkit-transform:translateY(-10px) rotate(-3deg);transform:translateY(-10px) rotate(-3deg)}75%{-webkit-transform:translateY(-15px) rotate(2deg);transform:translateY(-15px) rotate(2deg)}}.song-container{min-height:55vh;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;padding:2rem}@media screen and (max-width:25em){.song-container{min-height:50vh}}.song-container img{width:25rem;border-radius:16px;border-radius:var(--border-radius-lg);box-shadow:0 10px 15px rgba(0,0,0,.1);box-shadow:var(--shadow-lg);transition:-webkit-transform .3s ease;transition:transform .3s ease;transition:transform .3s ease,-webkit-transform .3s ease}.song-container img:hover{-webkit-transform:scale(1.02);transform:scale(1.02)}@media screen and (max-width:50em){.song-container img{width:50%;min-width:12.5rem}}@media screen and (max-width:30em){.song-container img{width:60%;min-width:10rem}}@media screen and (max-width:25em){.song-container img{width:70%;min-width:8rem}}.song-container h2{padding:2rem 1rem 0;text-align:center;background:linear-gradient(135deg,#667eea,#764ba2);background:var(--color-gradient);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.song-container h3{font-size:1.2rem;color:#b3b3b3;color:var(--color-font-secondary);text-align:center;margin-top:.5rem}.player{min-height:20vh;flex-direction:column;justify-content:flex-start;padding:2rem 1rem;grid-gap:2rem;gap:2rem;background:hsla(0,0%,100%,.02);border-radius:16px;border-radius:var(--border-radius-lg);margin:0 2rem;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.player,.player .time-control{display:flex;align-items:center}.player .time-control{width:50%;min-width:40em;justify-content:space-between}@media screen and (max-width:50em){.player .time-control{min-width:20em;width:90%}}@media screen and (max-width:30em){.player .time-control{min-width:15em;width:95%}}.player .time-control .track-input{width:100%;-webkit-appearance:none;background:transparent;cursor:pointer}.player .time-control .track-input:focus{outline:none}.player .time-control .track-input::-webkit-slider-thumb{-webkit-appearance:none;height:1rem;width:1rem;background:transparent}@media screen and (max-width:50em){.player .time-control .track-input::-webkit-slider-thumb{height:.625rem;width:.625rem}}.player .time-control p{padding:1rem 2rem}@media screen and (max-width:50em){.player .time-control p{padding:.5rem 1rem}}@media screen and (max-width:50em){.player .time-control-lib-active{width:90%}}.player .play-control{width:20%;min-width:300px;display:flex;justify-content:space-evenly;align-items:center}@media screen and (max-width:50em){.player .play-control{min-width:250px;width:30%}}@media screen and (max-width:30em){.player .play-control{min-width:200px;width:40%}}.player .play-control svg{box-sizing:content-box;color:#fff;padding:1rem;cursor:pointer;border-radius:50%;transition:all .2s ease}.player .play-control svg:hover{background:hsla(0,0%,100%,.1);background:var(--color-bg-hover);-webkit-transform:scale(1.1);transform:scale(1.1)}@media screen and (max-width:30em){.player .play-control svg{padding:.75rem}}.track{background:#2a2a2a;background:var(--color-bg-card);width:100%;position:relative;border-radius:12px;border-radius:var(--border-radius);overflow:hidden;height:8px;box-shadow:inset 0 2px 4px rgba(0,0,0,.1)}.animate-track{background:linear-gradient(90deg,#1db954,#1ed760);background:linear-gradient(90deg,var(--color-accent),#1ed760);width:101%;height:100%;position:absolute;top:0;left:0;-webkit-transform:translateX(50%);transform:translateX(50%);pointer-events:none;will-change:transform;transition:-webkit-transform .4s cubic-bezier(.4,0,.2,1);transition:transform .4s cubic-bezier(.4,0,.2,1);transition:transform .4s cubic-bezier(.4,0,.2,1),-webkit-transform .4s cubic-bezier(.4,0,.2,1)}.volume{-webkit-appearance:none;width:200px;height:7px;background:hsla(0,0%,100%,.1);background:var(--color-bg-hover);border-radius:5px;background-size:70% 100%;background-repeat:no-repeat;cursor:pointer}.volume::-webkit-slider-thumb{-webkit-appearance:none;height:2rem;width:2rem;border-radius:50%;background:#1db954;background:var(--color-bg-active);cursor:ew-resize;box-shadow:0 0 2px 0 #555;-webkit-transition:background .3s ease-in-out;transition:background .3s ease-in-out}.volume::-webkit-slider-runnable-track{-webkit-appearance:none;box-shadow:none;border:none}.volume-knob{display:flex;align-items:center;justify-content:center;grid-gap:2rem;gap:2rem;margin-top:2rem}.mute{cursor:pointer}.library{z-index:2000;width:100%;max-width:25rem;background-color:#1a1a1a;background-color:var(--color-bg-light);overflow-y:scroll;-webkit-overflow-scrolling:auto!important;-webkit-transform:translateX(-100%);transform:translateX(-100%);transition:all .3s cubic-bezier(.4,0,.2,1);box-shadow:0 10px 15px rgba(0,0,0,.1);box-shadow:var(--shadow-lg)}.library,.library:before{position:fixed;left:0;top:0;height:100vh}.library:before{content:"";width:100vw;background:rgba(0,0,0,.5);z-index:-1;opacity:0;transition:opacity .3s ease}.library.library-lib-active:before{opacity:1}.library .lib-header{display:flex;align-items:center;justify-content:space-between;padding:1rem 1rem 1rem 2rem;border-bottom:1px solid hsla(0,0%,100%,.1);height:6rem;background:hsla(0,0%,100%,.02)}.library h2{text-align:center}.library .lib-title{flex:1 1;display:inline-block}.library .back-icon,.library .close-icon{box-sizing:content-box;cursor:pointer;border-radius:50%;padding:.5em;transition:all .2s ease}.library .back-icon:hover,.library .close-icon:hover{color:#1db954;color:var(--color-accent);-webkit-transform:scale(1.1);transform:scale(1.1)}.library .hide-back-icon{visibility:hidden}.library .library-songs{display:flex;flex-direction:column;grid-gap:.5rem;gap:.5rem}.library-song{display:flex;grid-gap:1em;gap:1em;padding:1rem;min-height:8rem;will-change:background-color;cursor:pointer;transition:all .2s ease;margin:.5rem 1rem}.library-song,.library-song img{border-radius:8px;border-radius:var(--border-radius-sm)}.library-song img{width:7em;box-shadow:0 2px 4px rgba(0,0,0,.1);box-shadow:var(--shadow-sm)}@media screen and (max-width:30em){.library-song img{width:5em}}.library-song .song-info{display:flex;flex-direction:column;justify-content:center;grid-gap:.5rem;gap:.5rem}.library-song .song-info h3{font-weight:600;color:#fff;color:var(--color-font)}.library-song .song-info h4{color:#b3b3b3;color:var(--color-font-secondary)}.library-song:hover{background:hsla(0,0%,100%,.1);background:var(--color-bg-hover);-webkit-transform:translateX(4px);transform:translateX(4px)}@media screen and (max-width:30em){.library-song{padding:.75rem;min-height:6rem;margin:.25rem .5rem}.library-song .song-info h3{font-size:.9rem}.library-song .song-info h4{font-size:.8rem}}.selected{background:linear-gradient(135deg,#1db954,#1ed760);background:linear-gradient(135deg,var(--color-accent),#1ed760)}.selected,.selected .song-info h3,.selected .song-info h4{color:#fff}.selected:hover{background:linear-gradient(135deg,#1db954,#1ed760);background:linear-gradient(135deg,var(--color-accent),#1ed760);-webkit-transform:translateX(4px);transform:translateX(4px)}::-webkit-scrollbar{width:5px;background:#000}::-webkit-scrollbar-thumb{background:hsla(0,0%,65.9%,.5411764705882353);border-radius:10px}::-webkit-scrollbar-track{background:#1f1f1f}.library-lib-active{-webkit-transform:translateX(0);transform:translateX(0)}.nav{width:100%;grid-area:nav;display:flex;justify-content:center;align-items:center;padding:0 2rem;background-color:#1a1a1a;background-color:var(--color-bg-light);height:6rem;box-shadow:0 2px 4px rgba(0,0,0,.1);box-shadow:var(--shadow-sm);position:fixed;top:0;left:0;z-index:1000}.nav h1{font-size:2.5rem;font-weight:700;cursor:pointer;position:relative;background:linear-gradient(135deg,#1db954,#1ed760);background:linear-gradient(135deg,var(--color-accent),#1ed760);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;transition:-webkit-transform .2s ease;transition:transform .2s ease;transition:transform .2s ease,-webkit-transform .2s ease}.nav h1:hover{-webkit-transform:scale(1.05);transform:scale(1.05)}@media screen and (max-width:50em){.nav h1{font-size:2rem}}@media screen and (max-width:30em){.nav h1{font-size:1.5rem}}.nav .search-flex{width:100%;display:flex;flex:100% 1;position:relative}.nav .search{width:70%;min-width:6.25rem;max-width:50rem;margin:0 auto;padding:1rem 1.5rem;border:2px solid transparent;outline:none;font-family:inherit;font-size:1rem;background:#2a2a2a;background:var(--color-bg-card);color:#fff;color:var(--color-font);border-radius:16px;border-radius:var(--border-radius-lg);transition:all .2s ease;box-shadow:0 2px 4px rgba(0,0,0,.1);box-shadow:var(--shadow-sm)}.nav .search:focus{border-color:#1db954;border-color:var(--color-accent);box-shadow:0 0 0 3px rgba(29,185,84,.1)}.nav .search::-webkit-input-placeholder{color:#b3b3b3;color:var(--color-font-secondary)}.nav .search:-ms-input-placeholder{color:#b3b3b3;color:var(--color-font-secondary)}.nav .search::placeholder{color:#b3b3b3;color:var(--color-font-secondary)}@media screen and (max-width:50em){.nav .search{width:60%;padding:.875rem 1.25rem;font-size:.9rem}}@media screen and (max-width:30em){.nav .search{width:70%;padding:.75rem 1rem;font-size:.85rem}}.nav .user{width:-webkit-min-content;width:min-content;position:relative}.nav .user .user-img{width:4rem;height:4rem;border-radius:50%;cursor:pointer;position:relative;border:3px solid transparent;transition:all .2s ease;box-shadow:0 2px 4px rgba(0,0,0,.1);box-shadow:var(--shadow-sm)}.nav .user .user-img:hover{border-color:#1db954;border-color:var(--color-accent);-webkit-transform:scale(1.05);transform:scale(1.05);box-shadow:0 4px 6px rgba(0,0,0,.1);box-shadow:var(--shadow-md)}@media (hover:none){.nav .user .user-img:hover{border-color:transparent;-webkit-transform:none;transform:none}}@media screen and (max-width:30em){.nav .user .user-img{width:3rem;height:3rem}}.nav .user .checkbox{display:none}.nav .user .lib-checkbox-label,.nav .user .sign-out{border-radius:50%;padding:1rem;color:#e4e4e4;background-color:#414141;cursor:pointer;position:absolute;visibility:hidden;top:125%;-webkit-transform:translateY(-120%);transform:translateY(-120%);will-change:transform;transition:-webkit-transform .5s;transition:transform .5s;transition:transform .5s,-webkit-transform .5s}@media screen and (max-width:50em){.nav .user .lib-checkbox-label,.nav .user .sign-out{padding:1em}}.nav .user .lib-checkbox-label:hover,.nav .user .sign-out:hover{background-color:#1db954;background-color:var(--color-bg-active)}.nav .user .lib-checkbox-label:hover:before{content:"Playlists"}.nav .user .sign-out{top:250%;-webkit-transform:translateY(-100%);transform:translateY(-100%)}.nav .user .sign-out:hover:before{content:"Sign Out"}.nav .user .checkbox-user:checked~div :not(:first-child){visibility:visible;-webkit-transform:translateY(0);transform:translateY(0)}.nav .user .lib-checkbox-label:hover:before,.nav .user .sign-out:hover:before{position:absolute;top:50%;left:-120%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);font-size:2rem}.login-page{height:100vh;display:flex;flex-direction:column;justify-content:center;align-items:center;grid-gap:3rem;gap:3rem;padding:2rem;background:linear-gradient(135deg,#0a0a0a,#1a1a1a);background:linear-gradient(135deg,var(--color-bg),#1a1a1a);position:relative;overflow:hidden}.login-page:before{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background:radial-gradient(circle at 20% 80%,rgba(29,185,84,.1) 0,transparent 50%),radial-gradient(circle at 80% 20%,rgba(29,185,84,.1) 0,transparent 50%);pointer-events:none}@media screen and (max-width:50em){.login-page{grid-gap:4rem;gap:4rem;padding:1rem}}.login-title{font-size:5rem;font-weight:700;text-align:center;line-height:1.1;background:linear-gradient(135deg,#1db954,#1ed760);background:linear-gradient(135deg,var(--color-accent),#1ed760);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;letter-spacing:-.02em;-webkit-animation:fadeInUp .8s ease-out;animation:fadeInUp .8s ease-out;position:relative;z-index:1}@media screen and (max-width:50em){.login-title{font-size:3.5rem}}@media screen and (max-width:25em){.login-title{font-size:3rem}}.login-btn{font-size:1.2rem;font-weight:600;padding:1rem 3rem;background:linear-gradient(135deg,#1db954,#1ed760);background:linear-gradient(135deg,var(--color-accent),#1ed760);border:none;color:#fff;cursor:pointer;border-radius:50px;will-change:transform;transition:all .3s ease;box-shadow:0 4px 6px rgba(0,0,0,.1);box-shadow:var(--shadow-md);position:relative;z-index:1;-webkit-animation:fadeInUp .8s ease-out .2s both;animation:fadeInUp .8s ease-out .2s both;text-transform:uppercase;letter-spacing:.5px}@media screen and (max-width:50em){.login-btn{font-size:1rem;padding:.875rem 2.5rem}}.login-btn:hover{-webkit-transform:translateY(-2px) scale(1.05);transform:translateY(-2px) scale(1.05);box-shadow:0 8px 25px rgba(29,185,84,.4);background:linear-gradient(135deg,#1db954,#1ed760);background:linear-gradient(135deg,var(--color-accent),#1ed760)}.login-btn:active{-webkit-transform:translateY(0);transform:translateY(0)}.login-graphics{position:relative;width:100%;height:200px;overflow:hidden;z-index:1;-webkit-animation:fadeInUp .8s ease-out .4s both;animation:fadeInUp .8s ease-out .4s both}.login-graphics .music-note{position:absolute;font-size:3rem;color:#1db954;color:var(--color-accent);opacity:.6;-webkit-animation:float 6s ease-in-out infinite;animation:float 6s ease-in-out infinite;text-shadow:0 4px 8px rgba(29,185,84,.3)}.login-graphics .music-note.music-note-1{top:20%;left:15%;-webkit-animation-delay:0s;animation-delay:0s;font-size:2.5rem}.login-graphics .music-note.music-note-2{top:60%;left:25%;-webkit-animation-delay:1s;animation-delay:1s;font-size:3.5rem}.login-graphics .music-note.music-note-3{top:30%;right:20%;-webkit-animation-delay:2s;animation-delay:2s;font-size:2rem}.login-graphics .music-note.music-note-4{top:70%;right:15%;-webkit-animation-delay:3s;animation-delay:3s;font-size:3rem}.login-graphics .music-note.music-note-5{top:45%;left:50%;-webkit-animation-delay:4s;animation-delay:4s;font-size:2.8rem}.login-graphics .music-note.music-note-6{top:15%;left:70%;-webkit-animation-delay:5s;animation-delay:5s;font-size:2.2rem}@media screen and (max-width:50em){.login-graphics{height:150px}.login-graphics .music-note{font-size:2rem}.login-graphics .music-note.music-note-1{font-size:1.8rem}.login-graphics .music-note.music-note-2{font-size:2.5rem}.login-graphics .music-note.music-note-3{font-size:1.5rem}.login-graphics .music-note.music-note-4{font-size:2.2rem}.login-graphics .music-note.music-note-5{font-size:2rem}.login-graphics .music-note.music-note-6{font-size:1.6rem}}@media screen and (max-width:30em){.login-graphics{height:120px}.login-graphics .music-note{font-size:1.5rem}.login-graphics .music-note.music-note-1{font-size:1.3rem}.login-graphics .music-note.music-note-2{font-size:1.8rem}.login-graphics .music-note.music-note-3{font-size:1.1rem}.login-graphics .music-note.music-note-4{font-size:1.6rem}.login-graphics .music-note.music-note-5{font-size:1.4rem}.login-graphics .music-note.music-note-6{font-size:1.2rem}}.login-desc{font-size:1.3rem;font-weight:400;margin:0;text-align:center;color:#b3b3b3;color:var(--color-font-secondary);max-width:600px;line-height:1.6;-webkit-animation:fadeInUp .8s ease-out .3s both;animation:fadeInUp .8s ease-out .3s both;position:relative;z-index:1}@media screen and (max-width:50em){.login-desc{font-size:1.1rem;padding:0 1rem}}@media screen and (max-width:25em){.login-desc{max-width:90%;font-size:1rem}}.login-text{display:flex;flex-direction:column;align-items:center;grid-gap:1.5rem;gap:1.5rem;position:relative;z-index:1}.drop-down{width:60%;min-width:200px;max-width:750px;height:-webkit-min-content;height:min-content;max-height:50vh;position:absolute;top:100%;left:50%;background:rgba(26,26,26,.98);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);-webkit-transform:translateX(-50%);transform:translateX(-50%);overflow-y:scroll;z-index:200;border-radius:16px;border-radius:var(--border-radius-lg);box-shadow:0 10px 15px rgba(0,0,0,.1);box-shadow:var(--shadow-lg)}@media screen and (max-width:50em){.drop-down{position:fixed;top:60px;left:0;right:0;max-height:100vh;width:100vw;padding:0 1em;-webkit-transform:translateX(0);transform:translateX(0);border-radius:0}}@media screen and (max-width:30em){.drop-down{top:50px}}.results{display:flex;grid-gap:1rem;gap:1rem;cursor:pointer;padding:1rem;min-height:5rem;transition:all .2s ease;border-radius:8px;border-radius:var(--border-radius-sm);margin:.5rem}.results:hover{background:hsla(0,0%,100%,.1);background:var(--color-bg-hover);-webkit-transform:translateX(4px);transform:translateX(4px)}.results.no-preview{opacity:.8;cursor:pointer;border-left:3px solid #1db954;border-left:3px solid var(--color-accent);background:rgba(29,185,84,.05)}.results.no-preview:hover{background:rgba(29,185,84,.1);opacity:1;-webkit-transform:translateX(4px);transform:translateX(4px)}.no-preview-indicator{font-size:.8em;margin-left:.5rem;opacity:.7}.results-info{display:flex;flex-direction:column;justify-content:center;grid-gap:.5rem;gap:.5rem}.results-info h3{font-weight:600;color:#fff;color:var(--color-font)}.results-info h4{color:#b3b3b3;color:var(--color-font-secondary)}.modal-backdrop{position:fixed;top:0;left:0;width:100vw;height:100vh;background-color:rgba(0,0,0,.7);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);display:flex;justify-content:center;align-items:center;z-index:9999}.modal-content{background-color:#1a1a1a;background-color:var(--color-bg-light);border-radius:16px;box-shadow:0 20px 40px rgba(0,0,0,.3);max-width:500px;width:90%;max-height:80vh;overflow:hidden;border:1px solid hsla(0,0%,100%,.1)}.modal-header{display:flex;justify-content:space-between;align-items:center;padding:1.5rem 2rem;border-bottom:1px solid hsla(0,0%,100%,.1)}.modal-header h3{margin:0;font-size:1.25rem;font-weight:600}.modal-close,.modal-header h3{color:#fff;color:var(--color-font)}.modal-close{background:none;border:none;font-size:1.2rem;cursor:pointer;padding:.5rem;border-radius:50%;transition:all .2s ease;display:flex;align-items:center;justify-content:center}.modal-close:hover{background-color:hsla(0,0%,100%,.1);-webkit-transform:scale(1.1);transform:scale(1.1)}.modal-body{padding:2rem}.modal-body p{margin:0;color:#fff;color:var(--color-font);line-height:1.6;font-size:1rem}.modal-footer{display:flex;grid-gap:1rem;gap:1rem;padding:1.5rem 2rem;border-top:1px solid hsla(0,0%,100%,.1);justify-content:flex-end}.modal-btn{padding:.75rem 1.5rem;border:none;border-radius:8px;font-size:.95rem;font-weight:500;cursor:pointer;transition:all .2s ease;display:flex;align-items:center;grid-gap:.5rem;gap:.5rem}.modal-btn:hover{-webkit-transform:translateY(-1px);transform:translateY(-1px);box-shadow:0 4px 12px rgba(0,0,0,.2)}.modal-btn:active{-webkit-transform:translateY(0);transform:translateY(0)}.modal-btn-cancel{background-color:hsla(0,0%,100%,.1);color:#fff;color:var(--color-font)}.modal-btn-cancel:hover{background-color:hsla(0,0%,100%,.2)}.modal-btn-confirm{background-color:#1db954;color:#fff}.modal-btn-confirm:hover{background-color:#1ed760}@media screen and (max-width:50em){.modal-content{width:95%;margin:1rem}.modal-body,.modal-footer,.modal-header{padding:1rem 1.5rem}}.app-container{width:100%;height:100vh;display:grid;grid-template-columns:1fr;grid-template-rows:80px 1fr;grid-template-areas:"nav" "player";background:linear-gradient(135deg,#0a0a0a,#1a1a1a);background:linear-gradient(135deg,var(--color-bg),#1a1a1a);padding-top:80px}@media screen and (max-width:50em){.app-container{grid-template-rows:60px 1fr;padding-top:60px}}@media screen and (max-width:30em){.app-container{grid-template-rows:50px 1fr;padding-top:50px}}.hidden{display:none}.player-container{grid-area:player;padding:2rem 0}@media screen and (max-width:50em){.player-container{padding:1rem 0}}@media screen and (max-width:30em){.player-container{padding:.5rem 0}}.user-info{display:flex;flex-direction:column;justify-content:flex-start;align-items:center;grid-gap:2rem;gap:2rem;padding:0 2em;grid-area:player}.user-info .user-name{font-size:6rem;margin-top:2rem;margin-bottom:0;text-align:center}@media screen and (max-width:50em){.user-info .user-name{font-size:3rem;margin-top:1em}}@media screen and (max-width:30em){.user-info .user-name{font-size:2.5rem;margin-top:.5em}}@media screen and (max-width:25em){.user-info .user-name{font-size:2rem;margin-top:.5em}}.user-info .msg{font-size:2rem;font-weight:300;margin-top:-1em;margin-bottom:3em;text-align:center}@media screen and (max-width:50em){.user-info .msg{font-size:1.2rem;margin-bottom:2em}}@media screen and (max-width:30em){.user-info .msg{font-size:1rem;margin-bottom:1.5em}}@media screen and (max-width:25em){.user-info .msg{font-size:.9rem;margin-bottom:1em}}.user-info .playlist-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));grid-gap:2rem;gap:2rem;max-width:1200px;width:100%;-webkit-animation:fadeInUp .8s ease-out .4s both;animation:fadeInUp .8s ease-out .4s both}@media screen and (max-width:50em){.user-info .playlist-grid{grid-template-columns:repeat(2,1fr);grid-gap:1.5rem;gap:1.5rem;padding:0 1rem}}@media screen and (max-width:30em){.user-info .playlist-grid{grid-template-columns:repeat(2,1fr);grid-gap:1rem;gap:1rem;padding:0 .5rem}}@media screen and (max-width:25em){.user-info .playlist-grid{grid-template-columns:repeat(2,1fr);grid-gap:.75rem;gap:.75rem;padding:0 .5rem}}.user-info .playlist-info{cursor:pointer;background:hsla(0,0%,100%,.05);border-radius:16px;border-radius:var(--border-radius-lg);padding:1rem;transition:all .3s ease;border:1px solid hsla(0,0%,100%,.1);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.user-info .playlist-info:hover{background:hsla(0,0%,100%,.1);-webkit-transform:translateY(-8px);transform:translateY(-8px);box-shadow:0 10px 15px rgba(0,0,0,.1);box-shadow:var(--shadow-lg);border-color:#1db954;border-color:var(--color-accent)}.user-info .playlist-info:hover .playlist-img{-webkit-transform:scale(1.05);transform:scale(1.05)}.user-info .playlist-info:hover .playlist-name{color:#1db954;color:var(--color-accent)}.user-info .playlist-img-container{overflow:hidden;border-radius:12px;border-radius:var(--border-radius);margin-bottom:1rem}.user-info .playlist-img{width:100%;aspect-ratio:1/1;object-fit:cover;object-position:center;will-change:transform;transition:-webkit-transform .3s ease;transition:transform .3s ease;transition:transform .3s ease,-webkit-transform .3s ease}.user-info .playlist-name{font-size:1rem;font-weight:600;color:#fff;color:var(--color-font);margin-bottom:.5rem;text-align:center;transition:color .3s ease}.user-info .playlist-type{text-transform:capitalize;color:#b3b3b3;color:var(--color-font-secondary);font-size:.9rem;text-align:center}
/*# sourceMappingURL=main.30a5cdc9.chunk.css.map */