:root{--background-color:#111827;--color-text:#fff;--color-title:#fff;--color-bolder:#1b1b1c}.dark-theme{--background-color:#111827;--color-text:#fff;--color-title:#9333ea}body{background:var(--background-color);color:var(--color-text);color:var(--color-title);color:#fff;display:flex;justify-content:center;align-items:center;height:100vh;overflow:hidden}.main-content{overflow-y:auto;scrollbar-width:none;-ms-overflow-style:none}.main-content::-webkit-scrollbar{display:none}html,body{height:100%;overflow:auto;margin:0;padding:0}.sidebar,.right-sidebar,.main-content{overflow-y:auto;scrollbar-width:none;-ms-overflow-style:none}.sidebar::-webkit-scrollbar,.right-sidebar::-webkit-scrollbar,.main-content::-webkit-scrollbar{display:none}.container_main{display:flex;flex-direction:column;height:100vh;overflow:hidden}.sidebar{width:300px;background:linear-gradient(135deg,#020211,#1f183b);padding:20px;position:fixed;left:0;top:80px;bottom:0;overflow-y:auto}.profile{text-align:center;margin-bottom:20px}.profile img{width:90px;height:90px;border-radius:50%;border:3px solid #fff}.profile h2{font-size:18px;margin-top:10px}nav ul{list-style:none;margin-top:15px}.sidebar nav ul li{padding:12px;background:rgba(255,255,255,.1);margin:5px 0;border-radius:6px;cursor:pointer;transition:.3s}nav ul li:hover{background:rgba(255,255,255,.2)}.mini-player{background:linear-gradient(135deg,#020211,#28104e);padding:15px;border-radius:15px;color:#fff;text-align:center;box-shadow:0 4px 8px rgba(0,0,0,.2);max-width:300px;margin:auto}.mini-player h3{font-size:16px;margin-bottom:8px;text-transform:uppercase}.player-content{display:flex;align-items:center;justify-content:center;gap:10px;margin-bottom:10px}.player-content img{width:50px;height:50px;border-radius:8px;object-fit:cover}.song-info{text-align:left}.song-title{font-weight:bold;font-size:14px}.artist-name{font-size:12px;opacity:.8}.controls{display:flex;justify-content:center;gap:15px;margin-top:10px}.controls button{background:rgba(255,255,255,.2);border:none;color:#fff;font-size:18px;padding:8px 12px;border-radius:50%;cursor:pointer;transition:.3s}.controls button:hover{background:rgba(255,255,255,.4)}#progress{width:100%;margin-top:10px;appearance:none;height:5px;background:#fff;border-radius:5px;cursor:pointer}#progress::-webkit-slider-thumb{appearance:none;width:12px;height:12px;background:#fff;border-radius:50%;cursor:pointer}#current-time,#duration{font-size:12px;opacity:.7}.main-content{margin-left:300px;margin-right:300px;overflow-y:auto;height:100vh;width:calc(100% - 600px);padding:2px;box-sizing:border-box}.top-bar{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}.top-bar input{padding:10px;width:220px;border-radius:10px;border:none;outline:none;background:rgba(255,255,255,.2);color:#fff}.hero{background:linear-gradient(135deg,#6a5acd,#9370db);border-radius:4px;text-align:center;margin-bottom:20px;box-shadow:0 10px 20px rgba(0,0,0,.3)}.hero h2{font-size:22px;margin-bottom:10px}.hero button{background:#ff9800;color:#fff;padding:12px;border:none;border-radius:10px;cursor:pointer;font-weight:bold;margin-top:10px;transition:.3s}.hero button:hover{background:#ffab40}.playlist h2{margin-bottom:10px}.playlist-grid{display:flex;gap:15px}.playlist-item img{width:100px;height:100px;border-radius:12px;transition:.3s}.playlist-item img:hover{transform:scale(1.1)}.trending{margin-top:20px}.song-list{display:flex;flex-direction:column;gap:15px}.song-item{display:flex;align-items:center;gap:15px;background:#1e1e2e;padding:10px;border-radius:10px;color:#fff}.song-item img{width:50px;height:50px;border-radius:8px}.song-details{flex:1}.song-title{font-weight:bold;font-size:14px}.artist-name{font-size:12px;opacity:.7}.song-duration{font-size:12px;opacity:.7}.audio-player{display:flex;align-items:center;gap:8px}.play-btn{background:rgba(255,255,255,.2);border:none;color:#fff;font-size:16px;padding:5px 10px;border-radius:50%;cursor:pointer;transition:.3s}.play-btn:hover{background:rgba(255,255,255,.4)}.progress-bar{width:100px;appearance:none;height:5px;background:#fff;border-radius:5px;cursor:pointer}.progress-bar::-webkit-slider-thumb{appearance:none;width:10px;height:10px;background:#fff;border-radius:50%;cursor:pointer}.right-sidebar{width:300px;background:linear-gradient(135deg,#020211,#1f183b);padding:20px;position:fixed;right:0;top:80px;bottom:0;overflow-y:auto}.right-sidebar h2{margin-bottom:15px}.right-sidebar ul{list-style:none}.right-sidebar ul li{padding:12px;background:rgba(255,255,255,.1);margin-top:5px;border-radius:6px;transition:.3s}.right-sidebar ul li:hover{background:rgba(255,255,255,.2)}.music-player{margin-top:20px;background:rgba(255,255,255,.1);padding:15px;border-radius:12px;text-align:center}.music-player audio{width:100%;margin-top:10px}@media (max-width:1024px){.container_main{grid-template-columns:1fr;height:auto}.sidebar,.right-sidebar{display:none}.main-content{width:100%}.main-content{margin-left:0;margin-right:0;overflow-y:auto;height:100vh}}*{margin:0;padding:0;box-sizing:border-box;text-decoration:none;list-style:none;font-family:sans-serif}:root{--background-color:#061222;--color-text:#fff;--color-title:#fff;--color-bolder:#1b1b1c}.dark-theme{--background-color:#111827;--color-text:#fff;--color-title:#9333ea}body{background:var(--background-color);color:var(--color-text);color:var(--color-title);transition:.8s}.header{position:fixed;top:0;left:0;width:100%;height:70px;display:flex;justify-content:space-between;align-items:center;background:#061222;z-index:1000;padding:0 20px;box-shadow:0 2px 10px rgba(0,0,0,.3);transition:background .3s ease-in-out}.menu{list-style:none;display:flex;align-items:center}.menu li{position:relative}.menu a{color:#fff;text-decoration:none;font-size:16px;padding:10px 10px;transition:.3s}.menu a:hover{color:#0af}.menu input[type="search"]{padding:8px;border:none;border-radius:5px;outline:none}.logo h2 a{text-decoration:none;font-size:24px;font-weight:bold}#check{display:none}.checkbtn{margin-right:40px;float:right;line-height:80px}.toggle-btn{display:none;margin-right:20px;background:var(--color-title);padding:.2em 1.2em;border-radius:100vh;cursor:pointer}.toggle-btn span{color:#111827;font-size:18px}#moon{width:20px}.menu input{padding:.4em 1em;outline:none;border:none;border-radius:30px;border:.6px solid #a8a8a8}.loginregister{list-style:none;display:flex;align-items:center;gap:10px;margin-left:20px}.loginregister li a{font-size:16px;text-decoration:none;padding:10px 15px;border-radius:5px;background:#0af;color:#fff!important;transition:.3s;display:inline-block}.loginregister li a:hover{background:#08c}.subscribe-btn{background:var(--orange-600)}.subscribe-btn:hover{background:var(--orange-700)}.imgpic{width:100%;padding:50px 20px;background:url(your-image.jpg) no-repeat center center;background-size:cover;text-align:center}.mainpic h2{font-size:32px;color:#fff}.mainpic p{font-size:18px;color:#fff}.imgpic{background:linear-gradient(#ff00f7,#29293c);display:flex;justify-content:center;align-items:center;width:100%;min-width:40vh;overflow:hidden}.impictop{display:grid;gap:20px;justify-content:center;align-items:center}.mainpic{grid-column:1}.searchholder{grid-column:2;display:flex;flex-direction:column;align-items:center;justify-content:space-between}.searchholder input{position:relative;padding:1em 1em;border:none;outline:none;border-radius:20px;width:100%}.searchholder button{position:absolute;padding:1em;margin-left:140px;border:none;outline:none;border-radius:20px;background-color:#ffc000;color:#fff;cursor:pointer;width:10%}.mainpic h2{display:inline-block;color:var(--color-text);font-size:50px;font-weight:600}.mainpic p{color:var(--color-text)}.mainpic span{color:#ffc000;font-size:70px;font-weight:600}.container1{background:#061222;display:grid;grid-template-columns:repeat(auto-fit,minmax(400px,1fr));justify-content:center;gap:10px;padding:20px;border-top: 2px solid rgb(0, 0, 0, 0.5);border-bottom: 2px solid rgb(0, 0, 0, 0.5)}.containerbox{box-shadow:0 0 0 .1px #000;background-color:#111827;display:flex;justify-content:space-between;align-items:center;border-radius:10px;overflow:hidden;margin:20px 30px;width:400px;height:150px}.box1{margin-left:10px}.imageholder1{width:140px;height:150px;border-radius:10px;margin-left:40px;overflow:hidden}.container img{margin-right:10px;width:100%;height:100%}.box1 h3{text-transform:uppercase;font-size:17px;font-weight:400;color:var(--color-text);transition:.3s ease}.box1 h3:hover{color:var(--color-title)}.box1 p{text-transform:capitalize;color:var(--color-text)}.box1 span{text-transform:capitalize}.box1 h4{display:flex;justify-content:center;color:#1b1b1b;padding:.5em .3em;background:var(--color-title);margin-top:20px;font-size:11px;font-weight:600;border-radius:2px;width:auto;height:auto}.footer{position:relative;background-color:#061222;width:100%;margin-top:auto}.container{display:flex;flex-direction:column;min-height:100vh}.hoder{padding:20px 0;display:flex;justify-content:space-between}.hoder ul li{padding:7px 0}.hoder ul li a{color:var(--color-text);transition:.3s ease}.footer .hoder a:hover{color:var(--color-title)}.hoder ul{margin-right:70px}.hoder h2{margin-left:30px}.footerrights{display:grid;justify-content:center;align-items:center;margin-top:10px}.footerrights p{color:var(--color-text);padding:20px 0}#line{display:flex;background-color:#545454;height:2px;width:160%;margin-left:-90px}.artisttext #Download{width:230px;margin:40px 0;display:flex;background:var(--color-title);padding:.7em 1em;justify-content:center;align-items:center;border:none;border-radius:4px;color:var(--background-color)}.artistpage{width:100%;background:hsl(214,70%,8%);min-height:400px;display:flex;justify-content:center;align-items:center;border-bottom: 2px solid rgb(0, 0, 0, 0.4);border-top: 2px solid rgb(0, 0, 0, 0.4)}.artistcontaniner{color:var(--color-text);width:100%;display:grid;justify-content:center;align-items:center;grid-template-columns:repeat(auto-fit,minmax(400px,200px));gap:20px;border-radius:10px;padding:70px 0}.artistimg{justify-content:center;align-items:center;width:400px;min-height:50vh;border-radius:10px;background-color:#e90c55;background:#e0e0e0;overflow:hidden;border:.3px solid #a4a4a4}.detailimghorder{width:100%;height:46vh;overflow:hidden}.artistimg img{width:100%;height:100%}.artisttext{padding:0 20px}.artisttext h2{font-weight:lighter;font-size:18px;padding:5px 0}.artisttext h3{font-weight:400;font-size:18px;padding:5px 0}.artisttext h4{font-weight:500;font-size:13px}.storycontainer{display:flex;justify-content:center;align-items:center;background-color:var(--background-color);width:100%;min-height:84vh;border-top:1px solid #140f1b;border-bottom:1px solid #140f1b}.sec3scon{display:grid;grid-template-columns:repeat(auto-fill,minmax(366px,1fr));justify-content:center;align-items:center;width:100%;min-height:70px;gap:10px;margin:20px}.secholder{justify-content:center;background-color:#061222;width:380px;height:430px;transition:.3s;overflow:hidden;border-radius:6px;margin:0 auto;border: 2px solid rgb(0, 0, 0, 0.4)}.secsbox{display:grid;justify-content:center;align-items:center;margin:0 auto;background-color:#061222;width:350px;height:430px;overflow:hidden;transition:.3s}.secsimg{width:360px;height:300px;border-radius:6px;overflow:hidden}.secsimg img{width:350px}.secsdetails{display:flex;justify-content:space-between;padding:1em;width:100%;height:160px;color:#fff;overflow:hidden}.secsdetails #pricent{color:#fff}#share{width:20px;height:20px}.image-container{position:relative}.image-text{position:absolute;top:0;left:30px;width:100px;color:#fff}.timestamp-container{display:flex;align-items:center;position:relative;gap:7px;left:8px;padding-bottom:10px}.todaysboxholder{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));justify-content:center;align-items:center;width:100%;gap:10px}.story{width:100%;height:auto;margin:20px}#storytitle{color:#fff;display:flex;align-items:center;justify-content:center;border-radius:5px;font-size:20px;padding:10px 0;background-color:#111827}.story p{color:var(--color-text)}.secholder h1{font-size:10px;margin:10px;color:#fff}.Dashbord{position:relative;display:flex;background:#1b1b1c;justify-content:space-between;align-items:center;width:100%;height:130px}.Dashbordcontainer{display:flex;align-items:center}.Dashbord h2{padding:0% 70px}.username{display:flex;align-items:center}.username img{width:50px;border-radius:50%}.username h2{color:#fff;display:flex;font-size:16px}#logout{margin-top:120px;background-color:#9333ea;transition:all .3s}#logout a{color:#f7f7f7;font-size:23px}#logout:hover{background:#b72121}.Dashbordplace{display:grid;grid-template-columns:200px 1fr}.Dashbordplace #Dashbordholder{color:#ff1fb1;background:#1b1b1c;min-height:130vh;width:200px}.Dashbordplace img{width:30px;border-radius:50px;margin:0 10px}.uploadtebleholder input{padding:1em;outline:none}#Dashbordholder li{border:1px solid #140f1b}.Dashbordplace ul li{padding:20px 0;display:flex;transition:all .3s ease}.Dashbordplace ul li a{color:#eaeaea;transition:.4s}#Dashbordholder li:hover{background:var(--color-title)}.adminsection{width:100%;background:#0c080c}.AddAdmin{display:flex;align-items:center}.AddAdmin span{font-size:24px;font-weight:600;color:var(--color-title);text-transform:uppercase}.UserId #ur{display:flex;background:#1b1b1c;padding:1em 1em}.UserId ul li{padding:0 70px;color:var(--color-text)}.adimns ul{border:1px solid #bebebe;display:flex;padding:1em 2em}.adimns ul li{padding:0 50px;color:var(--color-bolder)}.adimns ul li a{color:#1b1b1c}.AddAdmin button{color:#ddd;border:none;padding:.6em 1.4em;background:var(--color-title);border-radius:6px;cursor:pointer}.AddAdmin button a{color:var(--color-text);transition:all .3s ease-in}.AddAdmin button a:hover{color:var(--color-bolder)}.uploadtebleholder table th{justify-content:center;padding:0 60px}.viewcontent{border-collapse:collapse;width:100%}.viewcontent th,.viewcontent td{border:1px solid #160a1a;text-align:left}.viewcontent th{background-color:#36094b}.AddAdmin{display:flex;justify-content:space-between}.AddAdmin button{margin:0 10px}.Uploadarea{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;align-items:center;width:100%;height:auto}.uploadcontent h2{font-size:17px}.uploadcontent{display:flex;width:100%;margin:0 40px}.uploadtebleholder div{display:block;margin-top:20px}.uploadcontent #Title{outline:none;width:267px;height:40px;border-radius:4px;border:.3px solid #a4a4a4}.uploadcontent #ArtistName{outline:none;width:170px;height:40px;border-radius:4px;border:.3px solid #a4a4a4}.Generoption{margin-top:10px;margin-left:50px}#Gener{outline:none;width:184px;height:40px;border-radius:4px;border:.3px solid #a4a4a4}#songsupload{outline:none;width:200px;height:200px;border-radius:4px;border:.3px solid #a4a4a4}#songartwork{outline:none;width:200px;height:200px;border-radius:4px;border:.3px solid #a4a4a4}.Loginform{display:flex;justify-content:center;align-items:center;width:100%;height:100vh;background:var(--color-bolder)}.Loginholder{display:flex;justify-content:center;width:300px;height:400px;padding-top:50px;border-radius:10px}.Loginholder input{width:200px;height:30px;border:none;outline:none}.Loginholder input{border-bottom:1px solid #a4a4a4}.Login p{font-size:12px;padding-top:10px;color:var(--color-bolder)}#loginuser{display:flex;justify-content:center;align-items:center;font-size:30px;font-weight:700;padding-bottom:30px}#loginbtn{margin-top:10px;border:none;background:var(--color-bolder);padding:1em 6em;border-radius:8px;text-transform:uppercase}#loginbtn a{color:var(--color-text)}#loginpassword{padding-left:100px;color:#cf4615}.form-container{width:700px;margin:40px auto;padding:20px;background-color:#1b1b1c;border:1px solid #ddd;box-shadow:0 0 10px rgba(0,0,0,.1)}.form-group{margin-bottom:20px}.form-group label{display:block;margin-bottom:10px}.form-group input[type="text"],.form-group select,.form-group input[type="file"]{width:100%;height:40px;padding:10px;border:1px solid #ccc;border-radius:10px}.AddAdmin{text-align:center}.AddAdmin button[type="submit"]{background-color:#4caf50;color:#fff;padding:10px 20px;border:none;border-radius:5px;cursor:pointer}.AddAdmin button[type="submit"]:hover{background-color:#3e8e41}.checkbtn img{display:none}@media (max-width:1100px){.container{display:grid;justify-content:center}.menu li{font-size:14px;padding:0 8px}.mainpic h2{font-size:40px}}@media (max-width:850px){.container{display:grid;justify-content:center}.containerbox{height:170px;width:500px}.box1 p{font-size:13px}#Downlond{display:flex;font-size:10px;font-weight:600;border-radius:2px;width:auto;height:auto}.box1 h3{text-transform:uppercase;font-size:11px;font-weight:400;color:var(--color-text);transition:.3s}.checkbtn img{display:block;float:left;margin-left:50px}.menu{display:flex;flex-direction:column;position:fixed;width:100%;background-color:#111827;top:50px;left:100%;text-align:center;padding-top:20px;transition:all .5s ease-in-out}.menu.active{left:0}.menu li{margin:15px 0}.header{justify-content:center;padding:0 10px}.logo{position:absolute;left:50%;transform:translateX(-50%)}.checkbtn{position:absolute;left:0;right:20px;top:50%;transform:translateY(-50%)}.checkbtn{display:block;cursor:pointer}.loginregister{position:absolute;right:20px;top:15px}}#check:checked ~ .menu {left:0;display:block}.menu li{display:block;padding:8px}.menu li a{font-size:15px}#line{width:130%;margin-left:-30px}.footerrights p{font-size:11px}.mainpic h2{font-size:20px}.mainpic span{font-size:40px}.artistimg{justify-content:center;align-items:center;width:100%;min-height:40vh}.artistimg img{width:100%;object-fit:cover}.imgpic{width:100%}.impictop{margin-top:60px}@media (max-width:650px){.containerbox{height:120px;width:300px}.imgpic{width:100%;overflow:hidden}.artistcontaniner{width:100%;grid-template-columns:repeat(auto-fill,minmax(100%,200px))}}@media (max-width:450px){.hoder{font-size:10px}#line{width:60%;margin-left:1px}.toggle-btn{font-size:10px;margin-right:20px;padding:.2em 1.2em}.toggle-btn span{font-size:10px}#moon{width:10px}.container1{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,200px));justify-content:center;width:100%}.sec3scon{display:grid;grid-template-columns:1fr;justify-content:center;align-items:center;width:100%;min-height:70px;gap:10px;margin:0}.secholder{width:100%;height:500px;border-radius:0;margin:0}.todaysboxholder{width:100%;gap:10px}.secsimg{width:100%;height:370px;border-radius:0;overflow:hidden}.secsbox{width:100%;height:500px;overflow:hidden;transition:.3s}.secsimg img{width:100%;height:auto;object-fit:cover}.secsdetails{width:100%;height:90px}.checkbtn img{margin-left:10px}.imgpic{display:none}@media (max-width:300px){
	
}.toggle-btn{display:none;font-size:10px;margin-right:20px;padding:.2em 1.2em}.toggle-btn span{font-size:10px}.header{justify-content:left}}@media (max-width:768px){.checkbtn{display:block}.menu{position:fixed;width:100%;height:100vh;background:#061222;top:70px;left:-100%;text-align:center;flex-direction:column;transition:all .5s ease;padding-top:20px}.menu li{margin:20px 0}.menu a{font-size:20px}.menu input[type="search"]{width:calc(100% - 40px);margin-top:10px}#check:checked ~ .menu {left:0}.loginregister{position:absolute;bottom:20px;left:50%;transform:translateX(-50%);flex-direction:column;width:calc(100% - 40px);margin:0}.loginregister li{width:100%;margin-bottom:10px}.loginregister li:last-child{margin-bottom:0}.loginregister li a{width:100%;box-sizing:border-box}.toggle-btn{display:flex;align-items:center;gap:5px}}*{margin:0;padding:0;box-sizing:border-box;text-decoration:none;list-style:none;font-family:sans-serif}:root{--background-color:#111827;--color-text:#fff;--color-title:#fff;--color-bolder:#1b1b1c;--primary-color:#f79d65;--secondary-background:#061222;--input-background:#222;--border-color-invalid:red}.dark-theme{--background-color:#111827;--color-text:#fff;--color-title:#9333ea}body{background:var(--background-color);color:var(--color-text);transition:.8s}.loginbody{display:grid;place-items:center;width:100%;min-height:100vh;background:var(--secondary-background);padding:20px}.login-container{display:flex;background:linear-gradient(45deg,#024,#020211);border-radius:12px;overflow:hidden;width:90%;max-width:1000px;box-shadow:0 4px 20px rgba(0,0,0,.5)}.login-box{width:60%;padding:40px;background:#020211;display:flex;flex-direction:column;justify-content:center}.login-box h2{font-size:28px;margin-bottom:8px;color:var(--color-title);text-align:center}.login-box p{font-size:15px;color:#bbb;margin-bottom:20px;text-align:center}.login-box p a{color:var(--primary-color);text-decoration:underline}.step-container{display:none;flex-direction:column;gap:15px}.step-container.active{display:flex}.step-container h3{font-size:22px;color:var(--color-title);margin-bottom:15px;text-align:center}.step-container h4{font-size:16px;color:var(--color-text);margin-bottom:10px}.step-container .text-muted{font-size:13px;color:#888;margin-bottom:15px}.input-group{margin-bottom:15px;position:relative}.input-group label{display:block;font-size:14px;margin-bottom:8px;color:var(--color-text)}.input-group input,.input-group select,.input-group textarea{width:100%;padding:13px;border:1px solid #333;background:var(--input-background);color:#fff;border-radius:6px;font-size:14px;transition:border-color .3s ease}.input-group input:focus,.input-group select:focus,.input-group textarea:focus{outline:none;border-color:var(--primary-color)}.input-group input.is-invalid,.input-group select.is-invalid,.input-group textarea.is-invalid{border-color:var(--border-color-invalid)}.error-message{color:var(--border-color-invalid);font-size:.8em;margin-top:5px;display:block}#password-strength{font-size:.85em;margin-top:5px;color:#bbb}.feedback{color:var(--border-color-invalid);font-size:.85em;margin-top:5px}input[type="file"]{padding:10px;line-height:normal}input[type="file"]::file-selector-button{background-color:var(--primary-color);color:#000;border:none;padding:8px 12px;border-radius:4px;cursor:pointer;margin-right:10px;transition:background-color .2s ease}input[type="file"]::file-selector-button:hover{background-color:#e08e5a}.remember-me{margin:15px 0;display:flex;align-items:center;color:#bbb}.remember-me label{margin-left:8px;font-size:14px}.remember-me input[type="checkbox"]{width:auto;margin:0;padding:0;height:16px;width:16px;border:1px solid #555;background:#333;-webkit-appearance:none;-moz-appearance:none;appearance:none;cursor:pointer;position:relative;vertical-align:middle}.remember-me input[type="checkbox"]:checked{background-color:var(--primary-color);border-color:var(--primary-color)}.remember-me input[type="checkbox"]:checked::after{content:'✓';display:block;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:#000;font-size:12px}.login-box button{flex:1;padding:12px 20px;border:none;color:#fff;background:#f79d65;cursor:pointer;border-radius:6px;transition:background .3s ease}.forgot-password-link{text-align:right;margin-top:-10px;margin-bottom:20px}.navigation-buttons{display:flex;justify-content:space-between;margin-top:30px}.navigation-buttons button{flex:1;padding:12px;border:none;background:var(--primary-color);color:#000;font-size:16px;border-radius:6px;cursor:pointer;transition:background .3s ease}.navigation-buttons button#prevBtn{background:#333;color:#fff;margin-right:10px}.navigation-buttons button#prevBtn:hover:not(:disabled) {background:#555}.navigation-buttons button#prevBtn:disabled{opacity:.5;cursor:not-allowed}.navigation-buttons button#nextBtn,.navigation-buttons button#submitBtn{background:var(--primary-color);color:#000}.navigation-buttons button#nextBtn:hover,.navigation-buttons button#submitBtn:hover{background:#e08e5a}.divider{text-align:center;margin:25px 0;font-size:14px;color:#bbb;position:relative}.divider::before,.divider::after{content:'';position:absolute;top:50%;width:40%;height:1px;background:#555}.divider::before{left:0}.divider::after{right:0}.google-btn{display:flex;align-items:center;justify-content:center;width:100%;padding:12px;color:#020211;font-size:16px;border-radius:6px;cursor:pointer;transition:background .3s ease , border-color .3s ease}.google-btn:hover{background:#333;border-color:#888}.google-btn img{width:18px;margin-right:10px}.login-info{width:100%;display:flex;align-items:center;justify-content:center;text-align:center;padding:30px;color:#fff}.info-content{max-width:80%;padding:20px}.headphones-icon{font-size:60px;margin-bottom:20px;color:var(--primary-color)}.info-content h2{font-size:28px;font-weight:bold;margin-bottom:15px;color:var(--color-title)}.info-content p{font-size:16px;color:#ccc;margin-bottom:30px;line-height:1.5}.features{margin-top:20px;display:flex;justify-content:center;gap:20px;flex-wrap:wrap}.feature-box{background:rgba(255,255,255,.1);padding:20px;border-radius:8px;text-align:center;width:48%;flex-grow:1;min-width:180px;box-shadow:0 2px 8px rgba(0,0,0,.3)}.feature-box span{font-size:30px;display:block;margin-bottom:10px}.feature-box h4{font-size:18px;color:#fff;margin-bottom:8px}.feature-box p{font-size:14px;color:#bbb;margin-bottom:0}.music-list{display:flex;flex-direction:column;gap:15px;padding:10px 0}.music-item{display:flex;width:100%;align-items:center;background:var(--secondary-background);border-radius:8px;overflow:hidden;padding:15px;transition:background .3s ease}.music-item:hover{background:#222}.music-item img{width:70px;height:70px;border-radius:6px;object-fit:cover;margin-right:15px}.music-info{flex:1}.music-info h3{font-size:16px;color:#fff;margin-bottom:5px}.artist{font-size:14px;color:var(--primary-color)}.stats{font-size:12px;color:#bbb}.music-duration{display:flex;align-items:center;color:#aaa;font-size:14px;margin-left:auto}.clock-icon{width:14px;height:14px;background:url(path/to/your/clock-icon.svg) no-repeat center;background-size:contain;margin-right:5px}.password-input-wrapper{position:relative;width:100%}.password-input-wrapper input[type="password"],.password-input-wrapper input[type="text"]{padding-right:40px;width:100%}.password-toggle-icon{position:absolute;right:12px;top:50%;transform:translateY(-50%);cursor:pointer;z-index:10;display:flex;align-items:center;justify-content:center;height:100%;padding-left:5px}.password-toggle-icon img{width:20px;height:20px;filter:invert(70%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(150%) contrast(80%)}.input-group input{padding:13px}.input-group .error-message{margin-top:5px}@media (max-width:768px){.login-container{flex-direction:column;width:95%;border-radius:8px}.login-box{width:100%;padding:30px}.login-info{width:100%;min-height:250px;padding:20px;border-top-left-radius:0;border-top-right-radius:0;border-bottom-left-radius:8px;border-bottom-right-radius:8px}.login-box h2{font-size:24px}.step-container h3{font-size:20px}.input-group input,.input-group select,.input-group textarea{padding:10px}.navigation-buttons{flex-direction:column;gap:10px}.navigation-buttons button#prevBtn{margin-right:0}.feature-box{width:90%;max-width:300px}.divider::before,.divider::after{width:30%}}@media (max-width:480px){.login-box{padding:20px}.info-content{padding:10px}.feature-box{width:100%}}