/* ==========================================
   STAR PROMOTION PANEL
   PREMIUM LOGIN THEME
========================================== */


@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap');


*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:'Poppins',sans-serif;
}



body{

    min-height:100vh;

    background:
    radial-gradient(circle at top left,#333,#050505 45%),
    #000;

    color:white;

}



/* MAIN WRAPPER */

.main-wrapper{

    width:100%;

    min-height:100vh;

    display:flex;

    align-items:center;

    justify-content:center;

    padding:40px;

    gap:40px;

}





/* GLASS */

.glass{

    background:rgba(255,255,255,0.08);

    backdrop-filter:blur(20px);

    border:1px solid rgba(255,255,255,0.15);

    box-shadow:
    0 20px 50px rgba(0,0,0,.5);

}





/* LEFT PANEL */


.left-panel{

    width:55%;

}



.logo-title{

    font-size:42px;

    font-weight:800;

}



.logo-title span{

    color:#00eaff;

}



.subtitle{

    margin-top:10px;

    color:#ccc;

    font-size:18px;

}







/* DASHBOARD GRID */


.dashboard-grid{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:20px;

    margin-top:40px;

}



.dashboard-card{


    padding:25px;

    border-radius:20px;

    background:#111;

    border:1px solid #333;

}



.dashboard-card i{

    font-size:30px;

    color:#00eaff;

}



.dashboard-card h3{

    margin-top:15px;

    color:#aaa;

}



.dashboard-card h1{

    margin-top:10px;

    font-size:32px;

}





/* FEATURES */


.feature-grid{

    display:flex;

    gap:20px;

    margin-top:30px;

}



.feature{

    flex:1;

    padding:20px;

    border-radius:18px;

}



.feature i{

    color:#00eaff;

    font-size:25px;

}



.feature h3{

    margin-top:10px;

}



.feature p{

    color:#ccc;

    font-size:14px;

}





/* RIGHT PANEL */


.right-panel{

    width:420px;

}





.login-panel{

    padding:35px;

    border-radius:25px;

}





.login-header h2{

    font-size:32px;

}



.login-header p{

    color:#bbb;

    margin-top:5px;

}





.alert-box{

    background:#dc2626;

    padding:12px;

    border-radius:10px;

    margin:20px 0;

    text-align:center;

}







/* FORM */


.form-group{

    margin-top:20px;

}



.form-group label{

    display:block;

    margin-bottom:8px;

    color:#ddd;

}





.input-box{

    display:flex;

    align-items:center;

    gap:12px;

    background:#000;

    border:1px solid #444;

    border-radius:12px;

    padding:0 15px;

}





.input-box i{

    color:#00eaff;

}



.input-box input{


    width:100%;

    padding:15px 0;

    background:none;

    border:none;

    outline:none;

    color:white;

    font-size:15px;

}





.input-box input::placeholder{

    color:#777;

}





/* REMEMBER */


.remember-row{

    display:flex;

    justify-content:space-between;

    margin-top:20px;

    font-size:14px;

}



.remember-row a{

    color:#00eaff;

    text-decoration:none;

}





/* BUTTON */


.login-btn{

    width:100%;

    margin-top:30px;

    padding:15px;

    border:none;

    border-radius:12px;

    background:

    linear-gradient(90deg,#00eaff,#0077ff);

    color:white;

    font-size:16px;

    font-weight:700;

    cursor:pointer;

}



.login-btn:hover{

    opacity:.85;

}





.register-text{

    text-align:center;

    margin-top:25px;

    color:#bbb;

}



.register-text a{

    color:#00eaff;

    text-decoration:none;

    font-weight:600;

}






/* MOBILE */


@media(max-width:1000px){


.main-wrapper{

    flex-direction:column;

}



.left-panel,
.right-panel{

    width:100%;

}



}



@media(max-width:600px){


.main-wrapper{

    padding:20px;

}



.logo-title{

    font-size:30px;

}



.dashboard-grid{

    grid-template-columns:1fr;

}



.feature-grid{

    flex-direction:column;

}


.login-panel{

    padding:25px;

}



}