*{margin:0;padding:0;box-sizing:border-box;font-family:Segoe UI,sans-serif}.welcomePage{height:100vh;width:100%;background-size:cover;background-position:center;background-repeat:no-repeat;position:relative;display:flex;justify-content:center;align-items:center;padding:40px 20px}.welcomePage-logo{position:absolute;top:20px;left:30px}.welcomePage-logo img{width:60px}.welcomePage-content{color:#fff;max-width:500px;text-align:center}.welcomePage-content h1{font-size:1.5rem;font-weight:400;line-height:1.4;margin-bottom:35px}.welcomePage-content button,.buttons{background:linear-gradient(to right,#2563eb,#4c56c3);border:none;color:#fff;padding:22px 32px;font-size:1.5rem;font-weight:400;border-radius:18px;cursor:pointer;min-width:300px;box-shadow:0 8px 20px #2563eb66;transition:all .3s ease}.welcomePage-content button:hover,.buttons:hover{background:linear-gradient(to right,#1d4ed8,#1e40af);box-shadow:0 12px 25px #2563eb80;transform:scale(1.05)}@media(max-width:1000px){.welcomePage-content h1{font-size:2rem}.welcomePage-logo{left:2rem;top:2rem}}@media(max-width:300px){.welcomePage{padding:20px}.welcomePage-logo{position:static;text-align:center;margin-bottom:30px}.welcomePage-logo img{width:110px}.welcomePage-content h1{font-size:1.6rem}.welcomePage-content button{width:100%;min-width:unset}}.Login-container{padding:40px 20px;font-family:sans-serif;min-height:100vh;width:100%;background-size:cover;background-position:center;background-repeat:no-repeat;position:relative;display:flex;justify-content:center;align-items:center}.login-button{padding:22px 32px;background:linear-gradient(to right,#2563eb,#4c56c3);color:#fff;box-shadow:0 8px 20px #2563eb66;text-decoration:none;border-radius:18px;min-width:300px;font-size:1.5rem;display:inline-block;transition:all .3s ease}.login-button:hover{background:linear-gradient(to right,#1d4ed8,#1e40af);box-shadow:0 12px 25px #2563eb80;transform:scale(1.05)}.logged-in{margin-top:30px}.success-text{color:#1db954;margin-bottom:20px}.logout-button{padding:10px 20px;cursor:pointer;border:none;border-radius:30px;background-color:#333;color:#fff;transition:all .3s ease}.logout-button:hover{background-color:#555;transform:scale(1.05)}body{margin:0;background-color:#000;color:#fff;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif}.app-layout{display:flex;flex-direction:column;height:100vh;overflow:hidden}.page-content{flex:1;overflow-y:auto;padding-bottom:80px}.bottom-nav{position:fixed;bottom:0;left:0;width:100%;height:70px;background-color:#1a1a1a;display:flex;justify-content:space-around;align-items:center;z-index:1000;border-top:1px solid #2a2a2a}.nav-item{color:#888;display:flex;flex-direction:column;align-items:center;text-decoration:none;transition:color .2s}.nav-item.active{color:#fff}.nav-item.active:after{content:"";display:block;width:20px;height:3px;background-color:#fff;border-radius:2px;margin-top:4px}@media(min-width:768px){.bottom-nav{max-width:800px;left:50%;transform:translate(-50%);border-radius:15px 15px 0 0}}.dashboard-container{color:#fff;padding:20px;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif}.dashboard-content{max-width:800px;margin:0 auto}.dashboard-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:25px}.header-icons{display:flex;align-items:center;gap:20px;cursor:pointer}.greeting{font-size:1.1rem;font-weight:500;margin-bottom:25px}.section-container{margin-bottom:35px}.section-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:15px}.section-title{font-size:1.3rem;font-weight:700;margin:0}.view-all-btn{background-color:#ffffff1a;color:#fff;border:none;padding:6px 14px;border-radius:20px;font-size:.8rem;font-weight:600;cursor:pointer}.scroll-row{display:flex;gap:15px;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none}.scroll-row::-webkit-scrollbar{display:none}.card-square img{width:120px;height:120px;border-radius:12px;object-fit:cover}.card-wide img{width:220px;height:140px;border-radius:12px;object-fit:cover}.popular-list{display:flex;flex-direction:column;gap:16px}.song-row{display:flex;align-items:center;gap:15px;cursor:pointer}.song-image{width:55px;height:55px;border-radius:10px;object-fit:cover}.song-info{flex:1}.song-title{font-size:1rem;font-weight:600;margin-bottom:4px}.song-artist{font-size:.85rem;color:#a0a0a0}@media(min-width:768px){.scroll-row{flex-wrap:wrap;overflow-x:visible}.greeting{font-size:1.8rem}.card-square img{width:150px;height:150px}}.profile-container{padding:20px;color:#fff;max-width:800px;margin:0 auto}.page-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:30px}.header-logo{width:90px;object-fit:contain}.profile-info{display:flex;flex-direction:column;align-items:center;margin-bottom:30px}.profile-pic{width:150px;height:150px;border-radius:50%;object-fit:cover;margin-bottom:15px}.profile-name{font-size:1.8rem;font-weight:700;margin-bottom:10px}.edit-profile-btn{background-color:#2a2a2a;color:#fff;border:none;padding:8px 16px;border-radius:20px;font-weight:600;font-size:.9rem;margin-bottom:15px;cursor:pointer}.profile-stats{font-size:.9rem;color:#a0a0a0;display:flex;gap:10px;align-items:center}.dot{font-size:1.2rem}.profile-tabs{display:flex;justify-content:space-around;border-bottom:1px solid #333;margin-bottom:20px}.tab{font-size:1.1rem;font-weight:600;color:#a0a0a0;padding-bottom:10px;cursor:pointer;position:relative}.tab.active{color:#fff}.tab.active:after{content:"";position:absolute;bottom:-1px;left:0;width:100%;height:3px;background-color:#fff}.profile-list{display:flex;flex-direction:column;gap:15px}.list-row{display:flex;align-items:center;gap:15px}.list-image{width:60px;height:60px;border-radius:8px;object-fit:cover}.list-text{flex:1}.list-title{font-size:1rem;font-weight:700;margin-bottom:4px}.list-subtitle{font-size:.85rem;color:#a0a0a0}@media(max-width:300px){.profile-container{padding:10px}.profile-pic{width:100px;height:100px}.profile-name{font-size:1.4rem}.tab{font-size:.9rem}.list-image{width:50px;height:50px}.list-title{font-size:.9rem}}.artist-container{color:#fff;margin:0 auto;max-width:800px;padding-bottom:20px}.artist-hero{position:relative;height:350px;background:url(https://images.unsplash.com/photo-1516280440502-65f58c3a1311?w=800&q=80) center/cover no-repeat;display:flex;flex-direction:column}.hero-overlay{position:absolute;inset:0;background:linear-gradient(to bottom,#0000004d,#000)}.page-header.transparent{position:relative;z-index:2;padding:20px}.artist-hero-info{position:absolute;bottom:20px;top:16rem;left:20px;right:20px;z-index:2}.artist-name{font-size:3rem;font-weight:800;margin-bottom:5px}.monthly-listeners{font-size:.9rem;color:#ccc;margin-bottom:15px}.artist-actions{display:flex;gap:20px;align-items:center}.big-play-btn{position:absolute;right:48px;bottom:26px;width:60px;height:60px;background-color:#5c6bc0;border-radius:50%;display:flex;justify-content:center;align-items:center;cursor:pointer;box-shadow:0 8px 15px #0000004d}.artist-content{position:relative;padding:20px;top:10rem}.section-heading{font-size:1.4rem;font-weight:700;margin-bottom:15px;margin-top:10px}@media(min-width:768px){.artist-hero{height:450px;border-radius:0 0 20px 20px}.artist-name{font-size:4rem}}@media(max-width:300px){.artist-hero{height:280px}.page-header.transparent{padding:10px}.artist-name{font-size:2.2rem}.artist-hero-info{left:10px;right:10px;bottom:10px}.big-play-btn{width:45px;height:45px}.section-heading{font-size:1.2rem}.artist-content{padding:10px}}.album-container{padding:20px;color:#fff;max-width:800px;margin:0 auto}.album-cover-wrapper{display:flex;justify-content:center;margin-bottom:25px}.main-album-art{width:250px;height:250px;border-radius:12px;object-fit:cover;box-shadow:0 10px 30px #00000080}.album-header-info{margin-bottom:15px}.album-title{font-size:2rem;font-weight:800;margin-bottom:5px}.album-artist{font-size:.95rem;color:#a0a0a0}.album-actions-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:25px}.action-icons{display:flex;gap:20px;align-items:center;color:#fff}.album-track-list{display:flex;flex-direction:column;gap:20px}.track-row{display:flex;justify-content:space-between;align-items:center}.track-text{flex:1}@media(min-width:768px){.main-album-art{width:300px;height:300px}}@media(max-width:300px){.album-container{padding:15px 10px}.main-album-art{width:200px;height:200px}.album-title{font-size:1.6rem}.big-play-btn{width:50px;height:50px}.action-icons{gap:12px}}.song-container{padding:20px;color:#fff;max-width:600px;margin:0 auto;height:100vh;display:flex;flex-direction:column}.now-playing-cover{flex-grow:1;display:flex;align-items:center;justify-content:center;margin:20px 0;max-height:50vh}.now-playing-cover img{width:100%;max-width:400px;aspect-ratio:1/1;border-radius:12px;object-fit:cover;box-shadow:0 10px 40px #0009}.song-info-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:25px}.now-playing-title{font-size:1.8rem;font-weight:800;margin-bottom:5px}.now-playing-artist{font-size:.95rem;color:#a0a0a0}.song-actions{display:flex;gap:15px;align-items:center}.progress-container{margin-bottom:30px}.progress-bar-bg{width:100%;height:5px;background-color:#fff3;border-radius:5px;position:relative;cursor:pointer}.progress-bar-fill{height:100%;background-color:#fff;border-radius:5px}.progress-knob{width:12px;height:12px;background-color:#fff;border-radius:50%;position:absolute;top:50%;transform:translate(-50%,-50%);box-shadow:0 2px 5px #00000080}.time-info{display:flex;justify-content:space-between;font-size:.8rem;color:#a0a0a0;margin-top:8px;font-weight:500;letter-spacing:.5px}.playback-controls{display:flex;justify-content:center;align-items:center;gap:40px;margin-bottom:40px}.play-pause-btn{width:65px;height:65px;background-color:#5c6bc0;border-radius:50%;display:flex;justify-content:center;align-items:center;cursor:pointer;box-shadow:0 8px 15px #0000004d}@media(max-width:300px){.song-container{padding:15px 10px}.now-playing-title{font-size:1.5rem}.playback-controls{gap:20px}.play-pause-btn{width:55px;height:55px}.song-actions{gap:10px}}.search-page-container{padding:20px;color:#fff;max-width:800px;margin:0 auto}.search-bar-wrapper{position:relative;margin-bottom:25px}.search-icon-inside{position:absolute;left:15px;top:50%;transform:translateY(-50%);color:#fff}.search-input-dark{width:100%;padding:12px 15px 12px 45px;border-radius:8px;border:none;font-size:1rem;background-color:#1a1a1a;color:#fff;outline:none}.recent-list{display:flex;flex-direction:column;gap:15px}.recent-row{display:flex;align-items:center;gap:15px;cursor:pointer}.recent-img{width:55px;height:55px;object-fit:cover}.recent-info{flex:1}.recent-title{font-size:1rem;font-weight:700;margin-bottom:4px}.recent-type{font-size:.85rem;color:#a0a0a0}.mix-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:15px}.mix-card{height:110px;border-radius:12px;background-size:cover;background-position:center;position:relative;overflow:hidden}.mix-overlay{position:absolute;inset:0;background:#0006;display:flex;justify-content:center;align-items:center;transition:background .3s}.mix-card:hover .mix-overlay{background:#0003}.mix-title{font-size:1.1rem;font-weight:700;text-align:center}@media(min-width:768px){.mix-grid{grid-template-columns:repeat(3,1fr);gap:20px}.mix-card{height:140px}}@media(min-width:1024px){.mix-grid{grid-template-columns:repeat(4,1fr)}.mix-card{height:160px}.mix-title{font-size:1.3rem}}@media(max-width:300px){.search-page-container{padding:15px 10px}.mix-grid{gap:10px}.mix-card{height:90px}.mix-title{font-size:.95rem}.recent-img{width:45px;height:45px}.recent-title{font-size:.9rem}.section-title{font-size:1.1rem}}.lib-page-container{padding:20px;color:#fff;max-width:800px;margin:0 auto}.lib-main-title{font-size:1.4rem;font-weight:700;margin-bottom:20px}.lib-hero-card{height:130px;border-radius:12px;background:url(https://images.unsplash.com/photo-1614613535308-eb5fbd3d2c17?w=600&q=80) center/cover;margin-bottom:20px;position:relative;overflow:hidden}.lib-hero-overlay{position:absolute;inset:0;background:linear-gradient(to right,#000c,#0003);display:flex;align-items:center;justify-content:space-between;padding:20px}.lib-hero-text p{font-size:.9rem;margin-bottom:5px;font-weight:600}.lib-hero-text h3{font-size:1.8rem;font-weight:800}.lib-hero-play{width:50px;height:50px;background-color:#5c6bc0;border-radius:50%;display:flex;justify-content:center;align-items:center;box-shadow:0 4px 10px #0006;cursor:pointer}.lib-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:15px}.lib-card{height:110px;border-radius:12px;background-size:cover;background-position:center;position:relative;overflow:hidden}.lib-card-overlay{position:absolute;inset:0;background:#00000080;display:flex;justify-content:center;align-items:center}.lib-card-title{font-size:1.2rem;font-weight:800;text-align:center;white-space:pre-line;line-height:1.2}@media(min-width:768px){.lib-grid{grid-template-columns:repeat(3,1fr);gap:20px}.lib-card{height:140px}.lib-hero-card{height:180px}}@media(min-width:1024px){.lib-grid{grid-template-columns:repeat(4,1fr)}.lib-card{height:160px}.lib-card-title{font-size:1.3rem}}@media(max-width:300px){.lib-page-container{padding:15px 10px}.lib-hero-card{height:110px}.lib-hero-text h3{font-size:1.4rem}.lib-hero-play{width:40px;height:40px}.lib-grid{gap:10px}.lib-card{height:95px}.lib-card-title{font-size:1rem}}.melo-bottom-nav{position:fixed;bottom:0;left:0;width:100%;padding:10px 20px;height:60px;background-color:#121212;z-index:1000;display:flex;justify-content:space-around;align-items:center;box-sizing:border-box}.melo-nav-item{display:flex;flex-direction:column;align-items:center;text-decoration:none;color:#b3b3b3;transition:color .2s ease;padding:5px 10px}.melo-nav-text{font-size:.75rem;margin-top:4px}.melo-nav-item.melo-active,.melo-nav-item:hover{color:#fff}