/*======================================================
    DATANET MINING
    REGISTER PAGE
======================================================*/

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

:root{

    --primary:#0B63FF;
    --secondary:#04152E;
    --gold:#F4B400;
    --gold-light:#FFD76A;

    --white:#FFFFFF;

    --text:#D8E6FF;

    --glass:rgba(7,25,70,.55);

    --border:rgba(255,255,255,.08);

    --success:#2ECC71;

    --danger:#FF5E6C;

}

body{

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

    background:#020B1D;

    overflow-x:hidden;

    color:white;

    min-height:100vh;

    display:flex;

    justify-content:center;

    align-items:center;

    position:relative;

}
.space{

position:fixed;

inset:0;

overflow:hidden;

background:

radial-gradient(circle at top right,#0B63FF33,transparent 30%),

radial-gradient(circle at bottom left,#F4B40022,transparent 35%),

linear-gradient(180deg,#020B1D,#04152E,#071D4B);

z-index:-10;

}
.stars,
.twinkle{

position:absolute;

inset:0;

}

.stars{

background-image:

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

background-size:70px 70px;

opacity:.18;

animation:starsMove 150s linear infinite;

}

.twinkle{

background-image:

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

background-size:170px 170px;

opacity:.45;

animation:twinkle 5s infinite alternate;

}
.nebula{

position:absolute;

width:700px;

height:700px;

border-radius:50%;

background:

radial-gradient(circle,

rgba(10,99,255,.35),

transparent 70%);

top:-220px;

right:-220px;

filter:blur(40px);

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

}
.planet{

position:absolute;

border-radius:50%;

}

.planet1{

width:140px;

height:140px;

left:120px;

bottom:120px;

background:

radial-gradient(circle at 30% 30%,

#FFD76A,

#F4B400,

#7A5300);

box-shadow:

0 0 80px rgba(244,180,0,.35);

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

}

.planet2{

width:70px;

height:70px;

right:180px;

top:140px;

background:

radial-gradient(circle,

#0B63FF,

#04286E);

box-shadow:

0 0 60px rgba(10,99,255,.45);

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

}
.register-container{

width:100%;

display:flex;

justify-content:center;

align-items:center;

padding:50px 20px;

}
.register-card{

width:100%;

max-width:560px;

background:rgba(6,18,48,.68);

backdrop-filter:blur(25px);

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

border-radius:28px;

padding:45px;

box-shadow:

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

0 0 80px rgba(10,99,255,.15);

animation:cardAppear .9s ease;

}
.logo{

width:90px;

height:90px;

margin:auto;

border-radius:50%;

display:flex;

justify-content:center;

align-items:center;

font-size:38px;

background:

linear-gradient(135deg,#0B63FF,#F4B400);

box-shadow:

0 0 40px rgba(10,99,255,.4);

color:white;

margin-bottom:25px;

}
.top{

text-align:center;

margin-bottom:35px;

}

.top h1{

font-size:34px;

font-weight:700;

margin-bottom:12px;

}

.top p{

color:#BFD4FF;

line-height:1.8;

font-size:15px;

}
.alert{

padding:15px;

border-radius:12px;

margin-bottom:20px;

font-size:14px;

}

.error{

background:rgba(255,94,108,.12);

border:1px solid rgba(255,94,108,.3);

color:#FFCCD2;

}

.success{

background:rgba(46,204,113,.15);

border:1px solid rgba(46,204,113,.3);

color:#CFF7DE;

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

form{

margin-top:25px;

}

.form-group{

margin-bottom:22px;

}

.form-group label{

display:block;

margin-bottom:10px;

font-size:14px;

font-weight:500;

color:#DCE7FF;

letter-spacing:.3px;

}
.input{

height:60px;

display:flex;

align-items:center;

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

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

border-radius:16px;

overflow:hidden;

transition:.35s;

}

.input:hover{

border-color:#0B63FF;

}

.input:focus-within{

border-color:#0B63FF;

box-shadow:

0 0 20px rgba(11,99,255,.25);

}

.input i{

width:60px;

text-align:center;

font-size:18px;

color:#7CA9FF;

}

.input input{

flex:1;

height:100%;

background:none;

border:none;

outline:none;

font-size:15px;

color:white;

padding-right:18px;

}

.input input::placeholder{

color:#8EA7D8;

}
.password-input button{

width:60px;

height:60px;

background:none;

border:none;

cursor:pointer;

color:#7CA9FF;

font-size:18px;

transition:.3s;

}

.password-input button:hover{

color:#FFD76A;

}
.strength{

margin-top:12px;

}

.strength-bar{

height:7px;

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

border-radius:50px;

overflow:hidden;

margin-bottom:8px;

}

#strength-fill{

display:block;

height:100%;

width:0%;

background:#FF4B5C;

border-radius:50px;

transition:.4s;

}

#strength-text{

font-size:13px;

color:#9DB7E3;

}
.agree{

display:flex;

align-items:flex-start;

gap:12px;

margin:28px 0;

font-size:14px;

color:#D8E6FF;

cursor:pointer;

line-height:1.7;

}

.agree input{

margin-top:4px;

accent-color:#0B63FF;

transform:scale(1.15);

}
.register-btn{

width:100%;

height:60px;

border:none;

border-radius:16px;

background:

linear-gradient(135deg,

#0B63FF,

#166CFF,

#F4B400);

background-size:250% 250%;

font-size:17px;

font-weight:600;

color:white;

cursor:pointer;

transition:.35s;

animation:buttonGlow 6s linear infinite;

box-shadow:

0 20px 45px rgba(11,99,255,.35);

}

.register-btn:hover{

transform:

translateY(-3px);

box-shadow:

0 25px 55px rgba(11,99,255,.55);

}
.divider{

margin:30px 0;

display:flex;

align-items:center;

justify-content:center;

position:relative;

}

.divider::before{

content:"";

position:absolute;

left:0;

width:42%;

height:1px;

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

}

.divider::after{

content:"";

position:absolute;

right:0;

width:42%;

height:1px;

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

}

.divider span{

padding:0 15px;

font-size:13px;

color:#9EB5E2;

background:transparent;

}
.login-link{

display:block;

text-align:center;

color:#AFC5EE;

font-size:15px;

transition:.3s;

}

.login-link strong{

color:#FFD76A;

}

.login-link:hover{

color:white;

}
@keyframes cardAppear{

from{

opacity:0;

transform:

translateY(60px)

scale(.94);

}

to{

opacity:1;

transform:

translateY(0)

scale(1);

}

}

@keyframes planetFloat{

0%,100%{

transform:translateY(0);

}

50%{

transform:translateY(-20px);

}

}

@keyframes planetFloat2{

0%,100%{

transform:translateY(0);

}

50%{

transform:translateY(18px);

}

}

@keyframes floatNebula{

0%,100%{

transform:translate(0,0);

}

50%{

transform:

translate(-40px,25px);

}

}

@keyframes starsMove{

from{

transform:translateY(0);

}

to{

transform:translateY(-1500px);

}

}

@keyframes twinkle{

from{

opacity:.2;

}

to{

opacity:.55;

}

}

@keyframes buttonGlow{

0%{

background-position:0% 50%;

}

50%{

background-position:100% 50%;

}

100%{

background-position:0% 50%;

}

}
@media(max-width:768px){

.register-card{

padding:30px 22px;

border-radius:22px;

}

.top h1{

font-size:28px;

}

.logo{

width:75px;

height:75px;

font-size:30px;

}

.input{

height:56px;

}

.register-btn{

height:56px;

}

.planet1{

display:none;

}

.planet2{

display:none;

}

}