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

body{

height:100vh;

display:flex;

justify-content:center;

align-items:center;

overflow:hidden;

background:linear-gradient(135deg,#0F172A,#1E293B,#2563EB);

}

.container{

width:100%;

display:flex;

justify-content:center;

align-items:center;

padding:20px;

}

.glass-card{

width:400px;

padding:45px;

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

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

backdrop-filter:blur(20px);

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

border-radius:28px;

box-shadow:

0 20px 50px rgba(0,0,0,.35);

color:#fff;

animation:fade .6s ease;

}

.logo{

width:85px;

height:85px;

border-radius:50%;

margin:auto;

display:flex;

justify-content:center;

align-items:center;

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

font-size:35px;

margin-bottom:20px;

}

h2{

font-size:28px;

font-weight:700;

text-align:center;

margin-bottom:10px;

}

p{

text-align:center;

color:rgba(255,255,255,.75);

margin-bottom:35px;

}

.input-box{

height:58px;

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

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

border-radius:14px;

display:flex;

align-items:center;

padding:0 18px;

margin-bottom:18px;

}

.input-box i{

margin-right:12px;

}

.input-box input{

flex:1;

background:none;

border:none;

outline:none;

color:#fff;

font-size:15px;

}

.input-box input::placeholder{

color:rgba(255,255,255,.65);

}

#toggle{

cursor:pointer;

}

.options{

display:flex;

justify-content:space-between;

font-size:14px;

margin-bottom:25px;

}

.options a{

color:#fff;

text-decoration:none;

}

button{

width:100%;

height:55px;

border:none;

border-radius:14px;

font-size:16px;

font-weight:600;

cursor:pointer;

background:linear-gradient(135deg,#3B82F6,#06B6D4);

color:#fff;

transition:.3s;

}

button:hover{

transform:translateY(-2px);

box-shadow:0 10px 30px rgba(0,0,0,.30);

}

.footer{

margin-top:25px;

text-align:center;

font-size:13px;

color:rgba(255,255,255,.70);

}

.bg-circle{

position:absolute;

border-radius:50%;

filter:blur(80px);

opacity:.45;

}

.one{

width:350px;

height:350px;

background:#8B5CF6;

left:-80px;

top:-80px;

}

.two{

width:350px;

height:350px;

background:#06B6D4;

right:-100px;

bottom:-100px;

}

@keyframes fade{

from{

opacity:0;

transform:translateY(40px);

}

to{

opacity:1;

transform:translateY(0);

}

}

@media(max-width:500px){

.glass-card{

width:100%;

padding:35px 25px;

border-radius:22px;

}

}