:root{
--bg:#0b1020;
--card:rgba(255,255,255,0.08);
--border:rgba(255,255,255,0.18);
--text:#ffffff;
--accent1:#6366f1;
--accent2:#06b6d4;
--input:rgba(255,255,255,0.1);
}

@media (prefers-color-scheme: light){
:root{
--bg:#eef2ff;
--card:rgba(255,255,255,0.65);
--border:rgba(0,0,0,0.1);
--text:#0f172a;
--accent1:#4f46e5;
--accent2:#0891b2;
--input:rgba(255,255,255,0.9);
}
}

*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:"Segoe UI",Roboto,Arial;
}

body{
height:100vh;
display:flex;
align-items:center;
justify-content:center;
background:var(--bg);
color:var(--text);
overflow:hidden;
}

/* PARTICLE CANVAS */

#network{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
z-index:0;
}

/* GLASS CARD */

.card{
position:relative;
z-index:2;
width:400px;
padding:42px;

background:var(--card);
backdrop-filter:blur(20px);
-webkit-backdrop-filter:blur(20px);

border-radius:18px;
border:1px solid var(--border);

box-shadow:0 30px 80px rgba(0,0,0,0.45);
}

.logo{
font-size:26px;
font-weight:700;
text-align:center;
margin-bottom:6px;
letter-spacing:1px;
}

.sub{
font-size:13px;
text-align:center;
opacity:.75;
margin-bottom:28px;
}

/* INPUT */

.group{
margin-bottom:16px;
position:relative;
}

input{
width:100%;
padding:14px;
border-radius:9px;
border:1px solid var(--border);
background:var(--input);
color:var(--text);
font-size:14px;
}

input:focus{
outline:none;
border-color:var(--accent1);
}

.eye{
position:absolute;
right:12px;
top:14px;
cursor:pointer;
}

/* BUTTON */

button{
width:100%;
padding:14px;
border:none;
border-radius:10px;
background:linear-gradient(90deg,var(--accent1),var(--accent2));
color:white;
font-weight:600;
cursor:pointer;
font-size:15px;
}

/* LINKS */

.links{
margin-top:14px;
text-align:right;
font-size:13px;
}

.links a{
color:var(--accent2);
text-decoration:none;
}

/* LOADING */

.loading{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:var(--bg);
display:none;
align-items:center;
justify-content:center;
flex-direction:column;
z-index:5;
}

.spinner{
width:55px;
height:55px;
border:4px solid rgba(255,255,255,0.2);
border-top:4px solid var(--accent1);
border-radius:50%;
animation:spin 1s linear infinite;
margin-bottom:20px;
}

@keyframes spin{
to{transform:rotate(360deg)}
}

/* RECOVERY */

.recovery{
display:none;
}

.back{
display:block;
margin-top:12px;
text-align:center;
font-size:13px;
color:var(--accent2);
cursor:pointer;
}