header{display:flex;justify-content:space-between;align-items:center;padding:10px 0}input{width:100%;padding:10px;font-size:16px;border:1px solid #ccc;border-radius:4px}button{padding:10px 20px;background-color:#007bff;color:#fff;border:none;border-radius:4px;cursor:pointer}button:hover{background-color:#0056b3}ul{list-style:none;padding:0}li{padding:10px;border-bottom:1px solid #eee}.playlist-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:20px}.playlist-card{border:1px solid #ddd;border-radius:5px;padding:15px}.playlist-card img{width:100%;height:150px;object-fit:cover;margin-bottom:10px;border-radius:3px}.landing-container{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100vh;position:relative;overflow:hidden;color:#333;font-family:Poppins,sans-serif;opacity:0;transition:opacity .8s ease}.landing-container.loaded{opacity:1}.background-circles{position:absolute;width:100%;height:100%;z-index:-1}.circle{position:absolute;border-radius:50%;opacity:.15;animation:float 12s infinite ease-in-out}.circle-1{width:300px;height:300px;background:linear-gradient(45deg,#6a11cb,#2575fc);top:-100px;right:-50px;animation-delay:0s}.circle-2{width:200px;height:200px;background:linear-gradient(45deg,#ff9a9e,#fad0c4);bottom:10%;left:5%;animation-delay:2s}.circle-3{width:150px;height:150px;background:linear-gradient(45deg,#a18cd1,#fbc2eb);top:30%;left:15%;animation-delay:4s}.content-wrapper{display:flex;flex-direction:column;align-items:center;justify-content:space-between;height:100%;width:100%;padding:40px 20px;max-width:1200px;position:relative;z-index:2}.hero-section{display:flex;flex-direction:column;align-items:center;text-align:center;margin-top:40px}.logo-container{margin-bottom:20px;position:relative}.logo-icon{width:80px;height:80px;background:linear-gradient(135deg,#6a11cb,#2575fc);border-radius:50%;display:flex;align-items:center;justify-content:center;box-shadow:0 10px 20px #0000001a;position:relative;animation:pulse 2s infinite}.note{color:#fff;font-size:32px;animation:float 3s ease-in-out infinite}.pulse{position:absolute;width:100%;height:100%;border-radius:50%;background:#6a11cb66;animation:pulse 2s infinite}.title{font-size:48px;font-weight:700;margin-bottom:10px;animation:fadeInUp .8s ease forwards;opacity:0;animation-delay:.3s}.highlight{background:linear-gradient(to right,#6a11cb,#2575fc);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.subtitle{font-size:20px;margin-bottom:40px;color:#666;animation:fadeInUp .8s ease forwards;opacity:0;animation-delay:.5s}.feature-carousel{display:flex;flex-direction:column;align-items:center;margin:20px 0 40px;position:relative;min-height:80px;width:100%;max-width:600px}.feature-item{display:flex;align-items:center;justify-content:center;position:absolute;opacity:0;transform:translateY(20px);transition:all .5s ease;width:100%}.feature-item.active{opacity:1;transform:translateY(0)}.feature-icon{font-size:24px;margin-right:10px}.feature-text{font-size:18px;font-weight:500}.carousel-dots{display:flex;margin-top:60px}.dot{width:10px;height:10px;border-radius:50%;background-color:#ddd;margin:0 5px;cursor:pointer;transition:background-color .3s ease}.dot.active{background-color:#6a11cb}.auth-section{display:flex;flex-direction:column;align-items:center;width:100%;animation:fadeInUp .8s ease forwards;opacity:0;animation-delay:.7s}.button-group{display:flex;gap:20px;margin-bottom:20px}.btn{padding:12px 30px;font-size:16px;font-weight:600;cursor:pointer;border:none;border-radius:50px;display:flex;align-items:center;justify-content:center;transition:transform .3s ease,box-shadow .3s ease;box-shadow:0 4px 10px #0000001a}.btn:hover{transform:translateY(-3px);box-shadow:0 8px 15px #00000026}.login-btn{background-color:#fff;color:#6a11cb;border:2px solid #6a11cb}.register-btn{background:linear-gradient(to right,#6a11cb,#2575fc);color:#fff}.btn-icon{margin-right:8px;font-size:18px}.promo-text{margin-top:20px;font-size:14px;color:#777}.wave-footer{position:absolute;bottom:0;left:0;width:100%;height:100px;overflow:hidden}.wave{position:absolute;bottom:0;left:0;width:200%;height:100px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 120' preserveAspectRatio='none'%3E%3Cpath d='M0,0V46.29c47.79,22.2,103.59,32.17,158,28,70.36-5.37,136.33-33.31,206.8-37.5C438.64,32.43,512.34,53.67,583,72.05c69.27,18,138.3,24.88,209.4,13.08,36.15-6,69.85-17.84,104.45-29.34C989.49,25,1113-14.29,1200,52.47V0Z' opacity='.25' fill='%236a11cb'%3E%3C/path%3E%3Cpath d='M0,0V15.81C13,36.92,27.64,56.86,47.69,72.05,99.41,111.27,165,111,224.58,91.58c31.15-10.15,60.09-26.07,89.67-39.8,40.92-19,84.73-46,130.83-49.67,36.26-2.85,70.9,9.42,98.6,31.56,31.77,25.39,62.32,62,103.63,73,40.44,10.79,81.35-6.69,119.13-24.28s75.16-39,116.92-43.05c59.73-5.85,113.28,22.88,168.9,38.84,30.2,8.66,59,6.17,87.09-7.5,22.43-10.89,48-26.93,60.65-49.24V0Z' opacity='.5' fill='%236a11cb'%3E%3C/path%3E%3Cpath d='M0,0V5.63C149.93,59,314.09,71.32,475.83,42.57c43-7.64,84.23-20.12,127.61-26.46,59-8.63,112.48,12.24,165.56,35.4C827.93,77.22,886,95.24,951.2,90c86.53-7,172.46-45.71,248.8-84.81V0Z' fill='%236a11cb'%3E%3C/path%3E%3C/svg%3E");background-size:1200px 100px}.wave1{animation:wave 20s linear infinite;z-index:1;opacity:.1;animation-delay:0s}.wave2{animation:wave2 15s linear infinite;z-index:0;opacity:.2;animation-delay:-5s}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-10px)}}@keyframes pulse{0%{transform:scale(1);opacity:.6}50%{transform:scale(1.1);opacity:.3}to{transform:scale(1);opacity:.6}}@keyframes fadeInUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes wave{0%{transform:translate(0)}to{transform:translate(-50%)}}@keyframes wave2{0%{transform:translate(0)}to{transform:translate(-25%)}}@media (max-width: 768px){.title{font-size:36px}.subtitle{font-size:18px}.button-group{flex-direction:column;gap:15px}.btn{width:200px}}.playlist-container{position:relative;padding:20px;max-width:800px;margin:20px auto;background:linear-gradient(135deg,#1a1a1a,#2a2a2a);color:#fff;border-radius:15px;box-shadow:0 8px 32px #00000080}.playlist-back-button{background:transparent;border:1px solid #1db954;border-radius:25px;padding:10px 20px;margin:10px;color:#1db954;cursor:pointer;font-size:1rem;transition:all .3s ease}.playlist-back-button:hover{background:#1db954;color:#121212;transform:scale(1.05)}.playlist-edit-form{display:flex;flex-direction:column;align-items:flex-start;padding:20px;margin:10px;background:#ffffff0d;border-radius:10px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.playlist-edit-title{font-size:1.5rem;font-weight:700;color:#fff;margin:10px 0;text-shadow:0 0 10px rgba(29,185,84,.5)}.playlist-edit-field{margin:10px 0;padding:10px;width:100%}.playlist-edit-label{display:block;margin:5px 0;font-size:1rem;color:#b3b3b3}.playlist-edit-input{padding:10px;width:100%;max-width:100%;height:40px;border:1px solid #404040;border-radius:8px;font-size:1rem;background:#ffffff1a;color:#fff;transition:border-color .3s ease}.playlist-edit-input:focus{border-color:#1db954;outline:none;box-shadow:0 0 8px #1db95480}.playlist-edit-textarea{padding:10px;width:100%;max-width:100%;min-height:100px;border:1px solid #404040;border-radius:8px;font-size:1rem;background:#ffffff1a;color:#fff;transition:border-color .3s ease}.playlist-edit-textarea:focus{border-color:#1db954;outline:none;box-shadow:0 0 8px #1db95480}.playlist-edit-actions{display:flex;align-items:center;justify-content:flex-start;gap:10px;margin:10px 0;padding:10px 0}.playlist-save-button{background:#1db954;border:none;border-radius:25px;padding:10px 20px;margin:5px;color:#121212;cursor:pointer;transition:all .3s ease}.playlist-save-button:hover{background:#1ed760;transform:scale(1.05);box-shadow:0 0 15px #1db954b3}.playlist-cancel-button{background:transparent;border:1px solid #b3b3b3;border-radius:25px;padding:10px 20px;margin:5px;color:#b3b3b3;cursor:pointer;transition:all .3s ease}.playlist-cancel-button:hover{border-color:#fff;color:#fff;transform:scale(1.05)}.playlist-details{padding:20px;margin:10px 0}.playlist-header{display:flex;align-items:center;justify-content:flex-start;margin:10px 0;padding:10px 0}.playlist-cover-image{width:200px;height:200px;object-fit:cover;margin:10px;border-radius:10px;box-shadow:0 4px 20px #00000080;transition:transform .3s ease}.playlist-cover-image:hover{transform:scale(1.05)}.playlist-info{display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;margin:10px;padding:10px}.playlist-title{font-size:2rem;font-weight:800;color:#fff;margin:10px 0;text-shadow:0 0 10px rgba(29,185,84,.5)}.playlist-description{font-size:1rem;color:#b3b3b3;margin:10px 0}.playlist-song-count{font-size:1rem;color:#1db954;margin:10px 0}.playlist-edit-button{background:transparent;border:1px solid #1db954;border-radius:25px;padding:10px 20px;margin:10px;color:#1db954;cursor:pointer;transition:all .3s ease}.playlist-edit-button:hover{background:#1db954;color:#121212;transform:scale(1.05)}.playlist-search-section{margin:20px 0;padding:20px;background:#ffffff0d;border-radius:10px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.playlist-search-title{font-size:1.5rem;font-weight:700;color:#fff;margin:10px 0}.playlist-search-form{display:flex;align-items:center;justify-content:flex-start;margin:10px 0;padding:10px 0}.playlist-search-input{width:70%;padding:10px;font-size:1rem;margin:5px;border:1px solid #404040;border-radius:8px;background:#ffffff1a;color:#fff;transition:border-color .3s ease}.playlist-search-input:focus{border-color:#1db954;outline:none;box-shadow:0 0 8px #1db95480}.playlist-search-button{background:#1db954;border:none;border-radius:25px;padding:10px 20px;margin:5px;color:#121212;cursor:pointer;transition:all .3s ease}.playlist-search-button:hover{background:#1ed760;transform:scale(1.05)}.playlist-search-results{margin:10px 0;padding:10px}.playlist-search-results-title{font-size:1.2rem;font-weight:600;color:#fff;margin:10px 0}.playlist-search-results-list{list-style:none;padding:0;margin:10px 0}.playlist-search-result-item{display:flex;justify-content:space-between;align-items:center;padding:10px;margin:5px 0;background:#ffffff0d;border-radius:8px;transition:background .3s ease}.playlist-search-result-item:hover{background:#1db95433}.playlist-search-checkbox{margin:0 10px}.playlist-search-song-title{font-weight:500;color:#fff;cursor:pointer;margin:0 10px;transition:color .3s ease}.playlist-search-song-title:hover{color:#1db954}.playlist-add-songs-button{background:#1db954;border:none;border-radius:25px;padding:10px 20px;margin:10px;color:#121212;cursor:pointer;transition:all .3s ease;opacity:1}.playlist-add-songs-button:hover{background:#1ed760;transform:scale(1.05)}.playlist-songs-title{font-size:1.5rem;font-weight:700;color:#fff;margin:10px 0}.playlist-songs-container{padding:10px;margin:10px 0}.playlist-songs-list{list-style:none;padding:0;margin:10px 0}.playlist-song-item{display:flex;justify-content:space-between;align-items:center;padding:10px;margin:5px 0;border-radius:8px;background:#ffffff0d;transition:background .3s ease}.playlist-song-item:hover{background:#1db95433}.playlist-song-info{display:flex;align-items:center;justify-content:flex-start;flex:1}.playlist-song-title{font-weight:500;color:#fff;cursor:pointer;margin:0 10px;transition:color .3s ease}.playlist-song-title:hover{color:#1db954}.playlist-song-actions{display:flex;align-items:center;justify-content:flex-start;gap:5px;margin:0 10px}.playlist-move-up-button{background:transparent;border:1px solid #b3b3b3;border-radius:50%;padding:8px;margin:5px;color:#b3b3b3;cursor:pointer;opacity:1;transition:all .3s ease}.playlist-move-up-button:hover{border-color:#1db954;color:#1db954;transform:scale(1.1)}.playlist-move-down-button{background:transparent;border:1px solid #b3b3b3;border-radius:50%;padding:8px;margin:5px;color:#b3b3b3;cursor:pointer;opacity:1;transition:all .3s ease}.playlist-move-down-button:hover{border-color:#1db954;color:#1db954;transform:scale(1.1)}.playlist-remove-button{background:transparent;border:1px solid #ff4d4d;border-radius:50%;padding:8px;margin:5px;color:#ff4d4d;cursor:pointer;transition:all .3s ease}.playlist-remove-button:hover{background:#ff4d4d;color:#fff;transform:scale(1.1)}.playlist-save-order-button{background:#1db954;border:none;border-radius:25px;padding:10px 20px;margin:10px;color:#121212;cursor:pointer;transition:all .3s ease}.playlist-save-order-button:hover{background:#1ed760;transform:scale(1.05)}.playlist-no-songs{font-size:1rem;color:#b3b3b3;margin:20px 0;padding:10px}.playlist-message{padding:10px;background:#ffffff0d;border-radius:8px;margin:10px 0;color:#fff}.playlist-loading{font-size:1rem;color:#1db954;margin:20px 0;text-align:center}.playlist-error,.playlist-not-found{font-size:1rem;color:#ff4d4d;margin:20px 0;text-align:center}.media-player{position:fixed;bottom:0;left:0;right:0;height:10vh;background-color:#474545;z-index:100;display:flex;align-items:center;justify-content:space-between;padding:2vh 10vw 2vh 10vw}.media-player{// position: fixed/static/absolute/relative/sticky;// top/bottom/left/right: 0px/10%/50vh;// height: 10px/10%/10vh;// width: 10px/10%/10vw;// background-color: #000000/#ffffff/rgba(0,0,0,.5);// z-index: 0/10/100;// display: flex/block/inline/grid;// align-items: center/flex-start/flex-end;// justify-content: space-between/center/flex-start;// padding: 0px 10px 20px 30px;// margin: 0px 10px 20px 30px;// color: #000000/#ffffff}.media-player-left{// display: flex/block/inline;// align-items: center/flex-start/flex-end;// justify-content: space-between/center/flex-start;// width: 10px/10%/10vw;// height: 10px/10%/10vh;// padding: 0px 10px 20px 30px;// margin: 0px 10px 20px 30px;// gap: 0px/10px}.media-player-image{max-width:8vh;// width: 10px/10%/10vw;// height: 10px/10%/10vh;// object-fit: cover/contain;// border-radius: 0px/50%/10px;// cursor: pointer/default;// transition: all .3s ease}.media-player-song-info{// display: flex/block/inline;// flex-direction: column/row;// justify-content: space-between/center/flex-start;// align-items: center/flex-start/flex-end;// margin: 0px 10px 20px 30px;// padding: 0px 10px 20px 30px}.media-player-song-title,.media-player-song-artist{// font-size: 10px/1rem/2em;// font-weight: normal/bold/100-900;// color: #000000/#ffffff;// text-overflow: ellipsis;// white-space: nowrap;// max-width: 100px/10%/10vw;// margin: 0px 10px 20px 30px}.media-player-center{// display: flex/block/inline;// flex-direction: column/row;// align-items: center/flex-start/flex-end;// justify-content: space-between/center/flex-start;// flex: 1/0 auto;// padding: 0px 10px 20px 30px;// margin: 0px 10px 20px 30px}.media-player-controls{// display: flex/block/inline;// align-items: center/flex-start/flex-end;// justify-content: space-between/center/flex-start;// gap: 0px/10px;// padding: 0px 10px 20px 30px;// margin: 0px 10px 20px 30px;// background-color: #000000/#ffffff/rgba(0,0,0,.5)}.media-player-control-button{// background: none/transparent/#000000;// border: none/1px solid #000000;// border-radius: 0px/50%/10px;// padding: 0px 10px 20px 30px;// margin: 0px 10px 20px 30px;// color: #000000/#ffffff;// cursor: pointer/default;// opacity: .5/1;// transition: all .3s ease;// width: 10px/10%/10vw;// height: 10px/10%/10vh}.media-player-play-pause{// background: #000000/#ffffff;// border: none/1px solid #000000;// border-radius: 50%/10px;// padding: 0px 10px 20px 30px;// margin: 0px 10px 20px 30px;// color: #000000/#ffffff;// cursor: pointer/default;// transition: all .3s ease;// width: 10px/10%/10vw;// height: 10px/10%/10vh}.media-player-progress{// display: flex/block/inline;// align-items: center/flex-start/flex-end;// justify-content: space-between/center/flex-start;// width: 100px/10%/10vw;// max-width: 100px/10%/10vw;// margin: 0px 10px 20px 30px;// padding: 0px 10px 20px 30px;// gap: 0px/10px}.media-player-time-current{// font-size: 10px/1rem/2em;// color: #000000/#ffffff;// margin: 0px 10px 20px 30px}.media-player-progress-slider{// width: 100px/10%/10vw;// height: 10px/1px;// background: #000000/#ffffff;// border-radius: 0px/50%/10px;// cursor: pointer/default;// appearance: none;// outline: none}.media-player-time-total{// font-size: 10px/1rem/2em;// color: #000000/#ffffff;// margin: 0px 10px 20px 30px}.media-player-right{// display: flex/block/inline;// align-items: center/flex-start/flex-end;// justify-content: space-between/center/flex-start;// gap: 0px/10px;// padding: 0px 10px 20px 30px;// margin: 0px 10px 20px 30px}.media-player-queue-button{// background: none/transparent/#000000;// border: none/1px solid #000000;// border-radius: 0px/50%/10px;// padding: 0px 10px 20px 30px;// margin: 0px 10px 20px 30px;// color: #000000/#ffffff;// cursor: pointer/default;// transition: all .3s ease}.media-player-volume-button{// background: none/transparent/#000000;// border: none/1px solid #000000;// border-radius: 0px/50%/10px;// padding: 0px 10px 20px 30px;// margin: 0px 10px 20px 30px;// color: #000000/#ffffff;// cursor: pointer/default;// opacity: .5/1;// transition: all .3s ease}.media-player-volume-slider{// width: 10px/10%/10vw;// height: 10px/1px;// background: #000000/#ffffff;// border-radius: 0px/50%/10px;// cursor: pointer/default;// appearance: none;// outline: none}.media-player-queue{// position: absolute/fixed/static;// bottom: 0px/10%/10vh;// right: 0px/10%/10vw;// background-color: #000000/#ffffff/rgba(0,0,0,.5);// padding: 0px 10px 20px 30px;// border-radius: 0px/50%/10px;// box-shadow: 0 0 10px rgba(0,0,0,.5);// max-height: 100px/10%/10vh;// overflow-y: auto/hidden;// width: 100px/10%/10vw}.media-player-queue-title{// font-size: 10px/1rem/2em;// font-weight: normal/bold/100-900;// color: #000000/#ffffff;// margin: 0px 10px 20px 30px}.media-player-queue-item,.media-player-queue-empty{// font-size: 10px/1rem/2em;// color: #000000/#ffffff;// padding: 0px 10px 20px 30px;// margin: 0px 10px 20px 30px}.container{text-align:center;margin-top:15vh;font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif}h1{font-size:3rem;color:#6a1b9a}h3,span{color:#fff}p{font-size:1.3rem;margin-top:10px;color:#fff}.buttons{margin-top:30px}button{padding:10px 20px;margin:0 15px;background-color:#8e24aa;border:none;color:#fff;font-size:1rem;border-radius:8px;cursor:pointer}button:hover{background-color:#7b1fa2}body{margin:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;background-color:#280b39}.app-container{display:flex;flex-direction:column;min-height:100vh;position:relative}.page-content{flex:1;padding-bottom:14vh}.form-group{background:#1a1a1a}.home-container{text-align:center;padding:50px}.home-container h1{color:#fff;font-size:2.5rem}.home-container p{color:#fff;font-size:1.2rem;margin-bottom:20px}.button-group{display:flex;justify-content:center;gap:20px}.auth-container{max-width:400px;margin:50px auto;padding:20px;background:#fff;border-radius:8px;box-shadow:0 2px 10px #0000001a}.auth-container h2{margin-bottom:20px;font-size:2rem;color:#1db954}{text-align:center;color:#fff}.form-group{margin-bottom:15px}.form-group label{display:block;margin-bottom:5px;color:#fff}.form-group input{width:100%;padding:8px;border:1px solid #ddd;border-radius:4px;font-size:1rem}.btn{background-color:#1db954;color:#fff;padding:10px 20px;border:none;border-radius:4px;cursor:pointer;font-size:1rem}.btn:hover{background-color:#17a34a}.auth-container p{text-align:center;margin-top:15px}.auth-container a{color:#1db954;text-decoration:none}.auth-container a:hover{text-decoration:underline}