:root{
--pink:#ff7ab6;
--magenta:#ff6aa6;
--purple:#6b2aa9;
--deep:#2b1142;
--card-border: rgba(255,255,255,0.14);
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
font-family:"Inter",sans-serif;
background:linear-gradient(180deg,#ff9cc7 0%,#ff7bb0 20%,#8c4aa1 60%,#2b1142 100%);
color:#fff;
display:flex;align-items:center;justify-content:center;
overflow:hidden;
}

.top-nav{
position:absolute;top:18px;left:20px;right:20px;
display:flex;justify-content:space-between;align-items:center;
}
.top-nav a{
margin:0 8px;color:rgba(255,255,255,0.9);
text-decoration:none;font-size:14px;transition:opacity 0.2s;
}
.top-nav a:hover{opacity:1}
.login-btn{
background:rgba(255,255,255,0.08);
padding:6px 12px;border-radius:999px;
border:1px solid rgba(255,255,255,0.1);
font-weight:600;
transition:background 0.3s;
}
.login-btn:hover{background:rgba(255,255,255,0.2)}

.scene{position:absolute;inset:0;z-index:0;}
svg{width:100%;height:100%;display:block;}

.card{
width:90%;max-width:380px;
background:rgba(255,255,255,0.05);
border:1px solid var(--card-border);
border-radius:14px;
padding:24px;
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
box-shadow:0 8px 30px rgba(11,7,23,0.45);
z-index:5;
animation:fadeSlide 0.8s ease forwards;
opacity:0;transform:translateY(20px);
}
@keyframes fadeSlide{to{opacity:1;transform:translateY(0);}}
.card .title{text-align:center;font-weight:700;margin-bottom:18px;font-size:20px;}
.form-group{margin-bottom:14px;position:relative;}
label{font-size:13px;margin-bottom:6px;display:block;color:rgba(255,255,255,0.85)}
input{
width:100%;padding:12px 40px 12px 12px;
border-radius:10px;border:1px solid rgba(255,255,255,0.06);
background:rgba(255,255,255,0.03);
color:#fff;font-size:14px;
transition:border-color 0.3s, box-shadow 0.3s;
}
input:focus{border-color:var(--magenta);box-shadow:0 0 8px rgba(255,106,166,0.6);outline:none;}
input::placeholder{color:rgba(255,255,255,0.5);}
.icon{
position:absolute;right:12px;top:36px;
width:20px;height:20px;opacity:0.85;
display:flex;align-items:center;justify-content:center;
cursor:pointer;
}
.btn{
width:100%;padding:12px;border-radius:10px;border:none;
font-weight:700;font-size:15px;cursor:pointer;
background:linear-gradient(90deg,rgba(255,122,204,0.95),rgba(111,64,180,0.95));
color:white;box-shadow:0 6px 16px rgba(111,64,180,0.28);
transition:transform 0.2s, box-shadow 0.2s;
}
.btn:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(111,64,180,0.45);}
.small{text-align:center;margin-top:12px;font-size:13px;color:rgba(255,255,255,0.85);}
.small a{color:#efe;text-decoration:underline;opacity:0.9;transition:opacity 0.2s;}
.small a:hover{opacity:1}
.close{
position:absolute;right:12px;top:12px;width:22px;height:22px;
display:flex;align-items:center;justify-content:center;
cursor:pointer;opacity:0.8;transition:transform 0.2s;
}
.close:hover{transform:rotate(90deg) scale(1.1)}
@media (max-width:480px){
.card{padding:18px;}
.card .title{font-size:18px;}
.top-nav a{margin:0 4px;}
}