:root{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;color:#ffffffde;font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:Inter,system-ui,Avenir,Helvetica,Arial,sans-serif;font-weight:400;line-height:1.5}*{box-sizing:border-box}body{min-width:320px;min-height:100vh;margin:0}.app{max-width:1200px;min-height:100vh;margin:0 auto;padding:2rem}.app-header{text-align:center;margin-bottom:3rem}.app-header h1{background:linear-gradient(45deg,#10b981,#059669,#047857) 0 0/200% 200%;-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text;margin:0;font-size:3.5rem;font-weight:700;animation:3s ease-in-out infinite gradientShift}.app-header p{color:#ffffffb3;margin:.5rem 0 0;font-size:1.2rem}@keyframes gradientShift{0%,to{background-position:0%}50%{background-position:100%}}.app-main{grid-template-columns:1fr 1fr;align-items:start;gap:2rem;display:grid}.content-section{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#ffffff1a;border:1px solid #fff3;border-radius:20px;max-height:600px;padding:2rem;overflow-y:auto;box-shadow:0 8px 32px #0000004d}@media (width<=768px){.app-main{grid-template-columns:1fr}.app-header h1{font-size:2.5rem}}.music-player{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#ffffff1a;border:1px solid #fff3;border-radius:20px;padding:2rem;box-shadow:0 8px 32px #0000004d}.track-info{text-align:center;margin-bottom:2rem}.track-title{color:#fff;margin:0 0 .5rem;font-size:1.5rem;font-weight:600}.track-artist{color:#ffffffb3;margin:0;font-size:1rem}.progress-container{align-items:center;gap:1rem;margin-bottom:2rem;display:flex}.time{color:#fffc;text-align:center;min-width:3rem;font-size:.9rem}.progress-bar{cursor:pointer;appearance:none;background:#fff3;border-radius:3px;outline:none;flex:1;height:6px;position:relative}.progress-bar::-webkit-slider-track{background:#fff3;border-radius:3px;height:6px}.progress-bar::-webkit-slider-thumb{-webkit-appearance:none;cursor:pointer;z-index:2;background:#10b981;border-radius:50%;width:16px;height:16px;position:relative;box-shadow:0 2px 6px #0000004d}.progress-bar::-moz-range-track{background:#fff3;border:none;border-radius:3px;height:6px}.progress-bar::-moz-range-thumb{cursor:pointer;background:#10b981;border:none;border-radius:50%;width:16px;height:16px;box-shadow:0 2px 6px #0000004d}.progress-bar{background:linear-gradient(to right, #10b981 0%, #10b981 var(--progress,0%), #fff3 var(--progress,0%), #fff3 100%)}.controls{justify-content:center;align-items:center;gap:1rem;margin-bottom:2rem;display:flex}.control-btn{color:#fff;cursor:pointer;background:#ffffff1a;border:1px solid #fff3;border-radius:50%;justify-content:center;align-items:center;width:50px;height:50px;font-size:1.2rem;transition:all .3s;display:flex}.control-btn:hover{background:#fff3;transform:scale(1.05)}.play-btn{background:#10b981;width:60px;height:60px;font-size:1.5rem}.play-btn:hover{background:#059669;transform:scale(1.1);box-shadow:0 4px 20px #10b98166}.volume-container{align-items:center;gap:.5rem;display:flex}.volume-icon{color:#fffc;font-size:1.2rem}.volume-bar{cursor:pointer;-webkit-appearance:none;background:#fff3;border-radius:2px;outline:none;flex:1;height:4px}.volume-bar::-webkit-slider-thumb{-webkit-appearance:none;cursor:pointer;background:#10b981;border-radius:50%;width:12px;height:12px}.volume-bar::-moz-range-thumb{cursor:pointer;background:#10b981;border:none;border-radius:50%;width:12px;height:12px}.no-track{text-align:center;color:#fff9;font-style:italic}.playlist{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#ffffff1a;border:1px solid #fff3;border-radius:20px;max-height:600px;padding:2rem;overflow-y:auto;box-shadow:0 8px 32px #0000004d}.playlist h2{color:#fff;text-align:center;margin:0 0 1.5rem;font-size:1.5rem;font-weight:600}.empty-playlist{text-align:center;color:#fff9;font-style:italic}.playlist-tracks{flex-direction:column;gap:.5rem;display:flex}.playlist-track{cursor:pointer;background:#ffffff0d;border:1px solid #0000;border-radius:12px;align-items:center;padding:1rem;transition:all .3s;display:flex}.playlist-track:hover{background:#ffffff1a;transform:translate(5px)}.playlist-track.active{background:linear-gradient(45deg,#10b98133,#05966933);border-color:#10b98180;box-shadow:0 4px 15px #10b98133}.track-number{text-align:center;color:#fffc;width:2rem;font-size:1.1rem;font-weight:600}.track-details{flex:1;margin-left:1rem}.track-name{color:#fff;margin-bottom:.25rem;font-weight:500}.track-artist{color:#fff9;font-size:.9rem}.track-duration{color:#ffffffb3;font-size:.9rem;font-weight:500}.playlist::-webkit-scrollbar{width:6px}.playlist::-webkit-scrollbar-track{background:#ffffff1a;border-radius:3px}.playlist::-webkit-scrollbar-thumb{background:#ffffff4d;border-radius:3px}.playlist::-webkit-scrollbar-thumb:hover{background:#ffffff80}.navbar{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#ffffff1a;border:1px solid #fff3;border-radius:15px;justify-content:space-between;align-items:center;margin-bottom:2rem;padding:1rem 2rem;display:flex}.navbar-brand{font-size:1.5rem;font-weight:700}.brand-link{color:#fff;background:linear-gradient(45deg,#10b981,#059669,#047857) 0 0/200% 200%;-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text;text-decoration:none}.navbar-links{gap:2rem;display:flex}.nav-link{color:#ffffffb3;border-radius:8px;padding:.5rem 1rem;font-weight:500;text-decoration:none;transition:all .3s}.nav-link:hover{color:#fff;background:#ffffff1a}.nav-link.active{color:#fff}.all-songs h2{color:#fff;text-align:center;margin:0 0 1.5rem;font-size:1.5rem;font-weight:600}.empty-message{text-align:center;color:#fff9;font-style:italic}.songs-grid{grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:1rem;display:grid}.song-card{cursor:pointer;background:#ffffff0d;border:1px solid #0000;border-radius:12px;justify-content:space-between;align-items:center;padding:1rem;transition:all .3s;display:flex}.song-card:hover{background:#ffffff1a;transform:translateY(-2px)}.song-card.active{background:linear-gradient(45deg,#10b98133,#05966933);border-color:#10b98180;box-shadow:0 4px 15px #10b98133}.song-info{flex:1}.song-title{color:#fff;margin:0 0 .25rem;font-size:1rem;font-weight:500}.song-artist{color:#fff9;margin-left:.5rem;font-size:.9rem}.song-duration{color:#ffffffb3;font-size:.8rem;font-weight:500}.play-button{color:#fffc;margin-left:1rem;font-size:1.2rem}.playlists h2{color:#fff;text-align:center;margin:0 0 1.5rem;font-size:1.5rem;font-weight:600}.create-playlist{background:#ffffff0d;border:1px solid #ffffff1a;border-radius:12px;margin-bottom:2rem;padding:1.5rem}.create-playlist h3{color:#fff;margin:0 0 1rem;font-size:1.1rem}.playlist-form{align-items:center;gap:1rem;display:flex}.playlist-input{color:#fff;background:#ffffff1a;border:1px solid #fff3;border-radius:8px;flex:1;padding:.75rem;font-size:1rem}.playlist-input::placeholder{color:#ffffff80}.create-btn{color:#fff;cursor:pointer;background-color:#10b981;border:none;border-radius:8px;padding:.75rem 1.5rem;font-weight:600;transition:all .3s}.create-btn:hover{background-color:#059669;transform:scale(1.05);box-shadow:0 4px 15px #10b9814d}.playlists-list{flex-direction:column;gap:1rem;display:flex}.playlist-item{background:#ffffff0d;border:1px solid #ffffff1a;border-radius:12px;padding:1.5rem}.playlist-header{justify-content:space-between;align-items:center;margin-bottom:1rem;display:flex}.playlist-name{color:#fff;margin:0;font-size:1.2rem;font-weight:600}.playlist-actions{align-items:center;gap:.5rem;display:flex}.add-song-btn{color:#fff;cursor:pointer;background:#10b98133;border:1px solid #10b98180;border-radius:6px;padding:.5rem 1rem;font-size:.9rem;transition:all .3s}.add-song-btn:hover{background:#10b9814d;transform:scale(1.05)}.delete-playlist-btn{color:#fff;cursor:pointer;background:#10b98133;border:1px solid #10b98180;border-radius:6px;padding:.5rem 1rem;font-size:.9rem;transition:all .3s}.delete-playlist-btn:hover{background:#10b9814d;transform:scale(1.05)}.add-song-section{margin-bottom:1rem}.search-container{width:100%;position:relative}.song-search-input{color:#fff;background:#ffffff1a;border:1px solid #fff3;border-radius:8px;outline:none;width:100%;padding:.75rem;font-size:.9rem;transition:all .3s}.song-search-input::placeholder{color:#ffffff80}.song-search-input:focus{background:#ffffff26;border-color:#10b98180}.song-dropdown{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);z-index:10;background:#000000e6;border:1px solid #ffffff4d;border-radius:8px;max-height:200px;margin-top:.25rem;position:absolute;top:100%;left:0;right:0;overflow-y:auto;box-shadow:0 4px 20px #00000080}.dropdown-item{cursor:pointer;color:#fff;border-bottom:1px solid #fff3;justify-content:space-between;align-items:center;padding:.75rem;transition:all .3s;display:flex}.dropdown-item:last-child{border-bottom:none}.dropdown-item:hover{background:#fff3}.dropdown-item.no-results{color:#fff9;cursor:default;font-style:italic}.dropdown-item.no-results:hover{background:0 0}.playlist-songs{flex-direction:column;gap:.5rem;display:flex}.empty-playlist{color:#fff9;text-align:center;padding:1rem;font-style:italic}.playlist-song{cursor:pointer;background:#ffffff0d;border:1px solid #0000;border-radius:8px;justify-content:space-between;align-items:center;padding:.75rem;transition:all .3s;display:flex}.playlist-song:hover{background:#ffffff1a}.playlist-song.active{background:linear-gradient(45deg,#10b98133,#05966933);border-color:#10b98180}.modal-overlay{z-index:1000;background:#000000b3;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.modal{-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);background:#ffffff1a;border:1px solid #fff3;border-radius:20px;width:90%;max-width:500px;max-height:80vh;padding:2rem;overflow-y:auto;box-shadow:0 8px 32px #0000004d}.modal h3{color:#fff;text-align:center;margin:0 0 1.5rem}.songs-list{flex-direction:column;gap:.5rem;margin-bottom:1.5rem;display:flex}.song-option{cursor:pointer;background:#ffffff0d;border-radius:8px;justify-content:space-between;align-items:center;padding:.75rem;transition:all .3s;display:flex}.song-option:hover{background:#ffffff1a}.close-btn{color:#fff;cursor:pointer;background:#ff6b6b33;border:1px solid #ff6b6b80;border-radius:8px;width:100%;padding:.75rem;font-weight:600;transition:all .3s}.close-btn:hover{background:#ff6b6b4d}