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

body{
min-height:100vh;
background:
radial-gradient(circle at top right,rgba(39,61,255,.18),transparent 35%),
radial-gradient(circle at bottom left,rgba(0,255,150,.08),transparent 30%),
#02040a;
color:#fff;
}

.top-header{
height:72px;
display:flex;
align-items:center;
justify-content:space-between;
padding:0 20px;
position:sticky;
top:0;
z-index:999;
background:rgba(5,7,14,.92);
backdrop-filter:blur(12px);
border-bottom:1px solid rgba(39,61,255,.45);
box-shadow:0 5px 25px rgba(0,0,0,.65);
}

.logo-area img{
height:65px;
}

.header-right{
display:flex;
gap:10px;
}

.header-btn{
padding:12px 22px;
border-radius:30px;
text-decoration:none;
font-size:13px;
font-weight:900;
color:#fff;
display:flex;
align-items:center;
gap:8px;
background:linear-gradient(90deg,#1026a8,#263cff);
box-shadow:0 0 18px rgba(38,60,255,.35);
}

.header-btn.active{
background:linear-gradient(90deg,#1c245e,#253dff);
}

.register-wrapper{
min-height:calc(100vh - 72px);
display:flex;
align-items:center;
justify-content:center;
padding:45px 15px;
}

.register-card{
width:100%;
max-width:520px;
padding:36px;
border-radius:30px;
background:linear-gradient(180deg,rgba(18,23,42,.96),rgba(5,7,15,.98));
border:1px solid rgba(70,100,255,.35);
box-shadow:
0 0 45px rgba(38,60,255,.18),
0 30px 80px rgba(0,0,0,.85);
}

.card-icon{
width:68px;
height:68px;
margin:0 auto 18px;
border-radius:22px;
display:flex;
align-items:center;
justify-content:center;
background:linear-gradient(135deg,#1837ff,#7c2cff);
box-shadow:0 0 28px rgba(50,80,255,.45);
}

.card-icon i{
font-size:28px;
}

.register-card h1{
text-align:center;
font-size:40px;
font-weight:900;
margin-bottom:8px;
}

.register-card p{
text-align:center;
font-size:14px;
color:#8f98bd;
margin-bottom:28px;
}

.input-box{
height:60px;
display:flex;
align-items:center;
padding:0 18px;
margin-bottom:16px;
border-radius:18px;
background:rgba(9,14,28,.95);
border:1px solid rgba(60,90,190,.7);
box-shadow:inset 0 0 18px rgba(40,80,255,.08);
}

.input-box i{
width:22px;
color:#00e676;
font-size:18px;
margin-right:14px;
}

.input-box input{
width:100%;
border:none;
outline:none;
background:transparent;
color:#fff;
font-size:16px;
}

.input-box input::placeholder{
color:#6f7898;
}

.submit-btn{
width:100%;
height:60px;
border:none;
border-radius:18px;
margin-top:5px;
cursor:pointer;
font-size:17px;
font-weight:900;
letter-spacing:.5px;
color:#fff;
background:linear-gradient(90deg,#1731c7,#3354ff);
box-shadow:0 0 30px rgba(51,84,255,.42);
transition:.25s ease;
}

.submit-btn:hover{
transform:translateY(-2px);
filter:brightness(1.15);
}

.submit-btn i{
margin-left:8px;
}

.error-box{
padding:13px;
margin-bottom:16px;
border-radius:14px;
text-align:center;
font-weight:800;
background:rgba(65,15,15,.95);
border:1px solid #ff3b3b;
color:#fff;
}

.error-box i{
color:#ff4d4d;
margin-right:7px;
}

.bottom-link{
text-align:center;
margin-top:22px;
color:#9ca7bd;
font-size:14px;
}

.bottom-link a{
color:#4f70ff;
text-decoration:none;
font-weight:900;
}

.success-active .top-header,
.success-active .register-wrapper{
filter:blur(6px);
}

.success-overlay{
position:fixed;
inset:0;
z-index:99999;
display:flex;
align-items:center;
justify-content:center;
background:rgba(0,0,0,.76);
backdrop-filter:blur(9px);
}

.success-popup{
width:310px;
padding:32px 26px;
text-align:center;
border-radius:22px;
background:linear-gradient(180deg,#171717,#0b0d13);
border:1px solid rgba(0,255,150,.55);
box-shadow:
0 0 32px rgba(0,255,150,.22),
0 25px 70px rgba(0,0,0,.85);
animation:popupIn .35s ease;
}

.success-circle{
width:70px;
height:70px;
margin:0 auto 18px;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
background:linear-gradient(135deg,#00c853,#00ff73);
box-shadow:0 0 28px rgba(0,255,115,.55);
}

.success-circle i{
font-size:34px;
color:#071207;
}

.success-popup h2{
font-size:18px;
font-weight:900;
margin-bottom:8px;
}

.success-popup p{
font-size:13px;
color:#9ca7b8;
margin-bottom:18px;
}

.success-loader{
height:5px;
width:100%;
overflow:hidden;
border-radius:30px;
background:#242424;
}

.success-loader::before{
content:"";
display:block;
height:100%;
width:0;
background:linear-gradient(90deg,#00c853,#00ff99);
animation:loadBar 1.6s linear forwards;
}

@keyframes popupIn{
from{
opacity:0;
transform:scale(.86);
}
to{
opacity:1;
transform:scale(1);
}
}

@keyframes loadBar{
to{
width:100%;
}
}

@media(max-width:768px){

.top-header{
height:62px;
padding:0 10px;
}

.logo-area img{
height:55px;
}

.header-btn{
padding:10px 13px;
font-size:12px;
}

.register-wrapper{
min-height:calc(100vh - 62px);
padding:28px 13px;
}

.register-card{
padding:25px;
border-radius:24px;
}

.card-icon{
width:58px;
height:58px;
border-radius:18px;
}

.register-card h1{
font-size:30px;
}

.input-box{
height:54px;
}

.submit-btn{
height:54px;
font-size:15px;
}

.success-popup{
width:285px;
}
}


.input-box input{
    appearance:none;
    -webkit-appearance:none;
    width:100%;
    border:0 !important;
    outline:0 !important;
    background:transparent !important;
    color:#fff !important;
    font-size:16px;
    box-shadow:none !important;
}

.input-box input:focus{
    background:transparent !important;
    outline:none !important;
    box-shadow:none !important;
}

.input-box input:-webkit-autofill,
.input-box input:-webkit-autofill:hover,
.input-box input:-webkit-autofill:focus{
    -webkit-text-fill-color:#fff !important;
    caret-color:#fff !important;
    transition:background-color 9999s ease-in-out 0s !important;
    box-shadow:0 0 0px 1000px #090e1c inset !important;
}

.input-box{
    overflow:hidden;
}