/*==================================================
    DATANET MINING LOGIN
    PART 1
==================================================*/

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

:root{

    --primary:#2A7FFF;
    --secondary:#38D9FF;
    --gold:#FFD54A;
    --dark:#020817;
    --card:rgba(8,18,45,.72);
    --border:rgba(255,255,255,.08);
    --text:#ECF4FF;
    --muted:#9CB5E8;

}

html{

    width:100%;
    height:100%;

}

body{

    width:100%;
    height:100vh;

    overflow:hidden;

    display:flex;
    justify-content:center;
    align-items:center;

    position:relative;

    font-family:"Poppins",sans-serif;

    background:#010613;

    color:var(--text);

}

/*==============================
SPACE BACKGROUND
==============================*/

.space{

    position:fixed;

    inset:0;

    overflow:hidden;

    z-index:-10;

    background:

    radial-gradient(circle at 15% 20%,
    rgba(42,127,255,.28),
    transparent 28%),

    radial-gradient(circle at 85% 80%,
    rgba(255,213,74,.18),
    transparent 30%),

    radial-gradient(circle at 70% 10%,
    rgba(56,217,255,.16),
    transparent 25%),

    linear-gradient(
    180deg,
    #010612,
    #05172D,
    #071D43,
    #020817);

}

/*==============================
STAR FIELD
==============================*/

.stars{

    position:absolute;

    inset:0;

    background-image:
    radial-gradient(#fff 1px,transparent 1px);

    background-size:55px 55px;

    opacity:.22;

    animation:starsMove 120s linear infinite;

}

.twinkle{

    position:absolute;

    inset:0;

    background-image:
    radial-gradient(#fff 2px,transparent 2px);

    background-size:170px 170px;

    opacity:.45;

    animation:twinkle 4s infinite alternate;

}

/*==============================
NEBULA
==============================*/

.nebula{

    position:absolute;

    width:900px;
    height:900px;

    right:-220px;
    top:-220px;

    border-radius:50%;

    background:

    radial-gradient(circle,

    rgba(42,127,255,.35),

    transparent 70%);

    filter:blur(50px);

    animation:nebula 10s ease-in-out infinite;

}

/*==============================
PLANETS
==============================*/

.planet{

    position:absolute;

    border-radius:50%;

}

.planet1{

    width:150px;
    height:150px;

    left:6%;
    bottom:8%;

    background:

    radial-gradient(circle at 35% 30%,

    #FFE47A,

    #F4B400,

    #6A4700);

    box-shadow:

    0 0 70px rgba(255,193,7,.35);

    animation:planetFloat 8s ease-in-out infinite;

}

.planet2{

    width:80px;
    height:80px;

    top:12%;
    right:8%;

    background:

    radial-gradient(circle,

    #4FB6FF,

    #1456D4);

    box-shadow:

    0 0 60px rgba(42,127,255,.45);

    animation:planetFloat2 10s ease-in-out infinite;

}

/*==============================
LOGIN CONTAINER
==============================*/

.login-container{

    width:100%;
    height:100vh;

    display:flex;

    justify-content:center;
    align-items:center;

    padding:25px;

    position:relative;

    z-index:5;

}
/*==================================================
    LOGIN CARD
==================================================*/

.login-card{

    width:100%;
    max-width:480px;

    max-height:92vh;

    overflow-y:auto;

    background:rgba(8,18,45,.72);

    backdrop-filter:blur(30px);

    -webkit-backdrop-filter:blur(30px);

    border:1px solid rgba(255,255,255,.08);

    border-radius:30px;

    padding:40px;

    box-shadow:

    0 30px 80px rgba(0,0,0,.45),

    0 0 60px rgba(42,127,255,.15),

    inset 0 0 40px rgba(255,255,255,.03);

    animation:cardAppear .8s ease;

}

.login-card::-webkit-scrollbar{

    width:0;

}

.login-card{

    scrollbar-width:none;

}

/*==================================================
    HEADER
==================================================*/

.top{

    text-align:center;

    margin-bottom:35px;

}

.logo{

    width:90px;

    height:90px;

    margin:0 auto 20px;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:36px;

    color:#fff;

    background:

    linear-gradient(135deg,

    var(--primary),

    var(--secondary),

    var(--gold));

    box-shadow:

    0 0 35px rgba(42,127,255,.5);

}

.top h1{

    font-size:34px;

    font-weight:700;

    margin-bottom:8px;

}

.top p{

    color:var(--muted);

    font-size:14px;

    line-height:1.8;

}

/*==================================================
    ALERT
==================================================*/

.alert{

    padding:15px;

    border-radius:14px;

    margin-bottom:22px;

    font-size:14px;

    text-align:center;

}

.alert.error{

    background:rgba(255,80,80,.12);

    border:1px solid rgba(255,80,80,.25);

    color:#ffb3b3;

}

.alert.success{

    background:rgba(0,255,120,.12);

    border:1px solid rgba(0,255,120,.25);

    color:#9affc4;

}

/*==================================================
    FORM
==================================================*/

.form-group{

    margin-bottom:22px;

}

.form-group label{

    display:block;

    margin-bottom:10px;

    font-size:14px;

    color:#dbe7ff;

}

.input{

    height:60px;

    display:flex;

    align-items:center;

    border-radius:18px;

    background:rgba(255,255,255,.04);

    border:1px solid rgba(255,255,255,.08);

    transition:.35s;

}

.input:hover,

.input:focus-within{

    border-color:var(--secondary);

    box-shadow:

    0 0 25px rgba(56,217,255,.25);

}

.input i{

    width:60px;

    text-align:center;

    font-size:18px;

    color:#79b8ff;

}

.input input{

    flex:1;

    height:100%;

    border:none;

    outline:none;

    background:none;

    color:#fff;

    font-size:15px;

    font-family:"Poppins",sans-serif;

}

.input input::placeholder{

    color:#8fa8d9;

}

/*==================================================
    PASSWORD BUTTON
==================================================*/

.password-input button{

    width:60px;

    height:60px;

    border:none;

    background:none;

    cursor:pointer;

    color:#8fb7ff;

    font-size:18px;

    transition:.3s;

}

.password-input button:hover{

    color:var(--gold);

}

/*==================================================
    OPTIONS
==================================================*/

.login-options{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin:25px 0;

    font-size:14px;

}

.login-options label{

    display:flex;

    align-items:center;

    gap:8px;

    cursor:pointer;

}

.login-options a{

    color:var(--gold);

    text-decoration:none;

}

.login-options a:hover{

    text-decoration:underline;

}

/*==================================================
    BUTTON
==================================================*/

.login-btn{

    width:100%;

    height:60px;

    border:none;

    border-radius:18px;

    cursor:pointer;

    font-size:17px;

    font-weight:600;

    color:#fff;

    background:

    linear-gradient(135deg,

    var(--primary),

    var(--secondary),

    var(--gold));

    background-size:250%;

    transition:.35s;

    animation:buttonMove 6s linear infinite;

    box-shadow:

    0 20px 45px rgba(42,127,255,.35);

}

.login-btn:hover{

    transform:translateY(-3px);

    box-shadow:

    0 28px 60px rgba(42,127,255,.45);

}

.login-btn:disabled{

    opacity:.8;

    cursor:not-allowed;

}
/*==================================================
    DIVIDER
==================================================*/

.divider{

    display:flex;

    align-items:center;

    gap:15px;

    margin:30px 0;

    color:#9CB5E8;

    font-size:14px;

}

.divider::before,
.divider::after{

    content:"";

    flex:1;

    height:1px;

    background:rgba(255,255,255,.08);

}

.divider span{

    padding:0 8px;

}

/*==================================================
    REGISTER LINK
==================================================*/

.register-link{

    display:block;

    text-align:center;

    color:#BFD7FF;

    text-decoration:none;

    font-size:15px;

    transition:.3s;

}

.register-link strong{

    color:var(--gold);

}

.register-link:hover{

    color:#fff;

}

/*==================================================
    LOADER
==================================================*/

#loader{

    position:fixed;

    inset:0;

    background:#020817;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    gap:25px;

    z-index:9999;

    transition:.6s;

}

.loaderPlanet{

    width:70px;

    height:70px;

    border-radius:50%;

    border:6px solid rgba(255,255,255,.15);

    border-top:6px solid var(--secondary);

    animation:spin 1s linear infinite;

}

#loader p{

    color:#fff;

    letter-spacing:1px;

}

/*==================================================
    PARTICLES
==================================================*/

.login-particle{

    position:fixed;

    bottom:-20px;

    border-radius:50%;

    background:white;

    pointer-events:none;

    animation:particleFloat linear forwards;

    z-index:0;

}

/*==================================================
    ANIMATIONS
==================================================*/

@keyframes cardAppear{

    from{

        opacity:0;

        transform:translateY(40px) scale(.95);

    }

    to{

        opacity:1;

        transform:none;

    }

}

@keyframes starsMove{

    from{

        transform:translateY(0);

    }

    to{

        transform:translateY(-1200px);

    }

}

@keyframes twinkle{

    from{

        opacity:.2;

    }

    to{

        opacity:.65;

    }

}

@keyframes nebula{

    50%{

        transform:translate(-35px,25px);

    }

}

@keyframes planetFloat{

    50%{

        transform:translateY(-18px);

    }

}

@keyframes planetFloat2{

    50%{

        transform:translateY(18px);

    }

}

@keyframes buttonMove{

    0%{

        background-position:0% 50%;

    }

    50%{

        background-position:100% 50%;

    }

    100%{

        background-position:0% 50%;

    }

}

@keyframes particleFloat{

    0%{

        transform:translateY(0);

        opacity:0;

    }

    10%{

        opacity:1;

    }

    100%{

        transform:translateY(-120vh);

        opacity:0;

    }

}

@keyframes spin{

    to{

        transform:rotate(360deg);

    }

}

/*==================================================
    MOBILE
==================================================*/

@media(max-width:900px){

.login-card{

    max-width:430px;

}

}

@media(max-width:768px){

.login-card{

    padding:30px 24px;

    border-radius:24px;

}

.logo{

    width:75px;

    height:75px;

    font-size:30px;

}

.top h1{

    font-size:28px;

}

.planet{

    display:none;

}

.login-options{

    flex-direction:column;

    gap:15px;

    align-items:flex-start;

}

}

@media(max-width:480px){

.login-container{

    padding:16px;

}

.login-card{

    padding:24px 18px;

}

.top h1{

    font-size:24px;

}

.input{

    height:56px;

}

.login-btn{

    height:56px;

}

}