html,body{
margin:0;
padding:0;
}
.fypu-container{
width:100%;
min-height:100vh;
display:flex;
justify-content:center;
align-items:center;
padding:20px;
font-family:Arial,sans-serif;
}
.fypu-container.dark{
background:
radial-gradient(circle at top left,#ff005030,transparent 25%),
radial-gradient(circle at bottom right,#00f0ff30,transparent 25%),
#050816;
}
.fypu-container.light{
background:#f4f4f4;
}
.fypu-card{
width:100%;
max-width:420px;
padding:35px 25px;
border-radius:30px;
background:
rgba(255,255,255,.05);
backdrop-filter:blur(18px);
border:1px solid rgba(255,255,255,.08);
text-align:center;
box-shadow:
0 0 40px rgba(0,0,0,.3);
}
.light .fypu-card{
background:white;
}
.fypu-logo{
font-size:36px;
font-weight:800;
background:
linear-gradient(90deg,#00f0ff,#ff0050);
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
margin-bottom:10px;
}
.fypu-sub{
font-size:15px;
margin-bottom:25px;
color:#cfcfcf;
}
.light .fypu-sub{
color:#555;
}
.fypu-input-wrap{
display:flex;
gap:10px;
}
.fypu-input{
flex:1;
padding:16px;
border:none;
outline:none;
border-radius:15px;
background:#10182a;
color:white;
}
.light .fypu-input{
background:#f1f1f1;
color:#111;
}
.fypu-btn{
padding:16px 20px;
border:none;
border-radius:15px;
background:
linear-gradient(90deg,#00f0ff,#ff0050);
color:white;
font-weight:700;
cursor:pointer;
}
.fypu-profile{
display:none;
align-items:center;
gap:15px;
margin-top:25px;
padding:16px;
border-radius:20px;
background:#0d1425;
}
.light .fypu-profile{
background:#f4f4f4;
}
.fypu-avatar{
width:65px;
height:65px;
border-radius:50%;
object-fit:cover;
}
.fypu-name{
font-size:18px;
font-weight:700;
color:white;
}
.light .fypu-name{
color:#111;
}
.fypu-user{
font-size:14px;
color:#aaa;
margin-top:4px;
}
.fypu-loading{
display:none;
margin-top:30px;
}
.fypu-spinner{
width:90px;
height:90px;
margin:auto;
border-radius:50%;
border:5px solid #15203a;
border-top:5px solid #00f0ff;
border-right:5px solid #ff0050;
animation:fypuSpin 1s linear infinite;
margin-bottom:20px;
}
@keyframes fypuSpin{
100%{
transform:rotate(360deg);
}
}
.fypu-step{
font-size:18px;
font-weight:700;
color:white;
}
.light .fypu-step{
color:#111;
}
.fypu-popup{
display:none;
margin-top:35px;
padding:30px;
border-radius:25px;
background:#0d1425;
animation:fypuFade .6s ease;
}
.light .fypu-popup{
background:white;
}
@keyframes fypuFade{
from{
opacity:0;
transform:translateY(20px);
}
to{
opacity:1;
transform:translateY(0);
}
}
.fypu-check{
width:95px;
height:95px;
margin:auto;
border-radius:50%;
display:flex;
justify-content:center;
align-items:center;
background:#1877f2;
color:white;
font-size:50px;
font-weight:bold;
box-shadow:
0 0 35px rgba(24,119,242,.5);
margin-bottom:20px;
}
.fypu-success{
font-size:28px;
font-weight:800;
color:white;
margin-bottom:10px;
}
.light .fypu-success{
color:#111;
}
.fypu-text{
font-size:15px;
line-height:1.7;
color:#ccc;
}
.light .fypu-text{
color:#555;
}
@media(max-width:480px){
.fypu-input-wrap{
flex-direction:column;
}
}