@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;600;700&family=Inter:wght@300;400;500;600&display=swap');

*{
margin:0;
padding:0;
box-sizing:border-box;
}

html,
body{
width:100%;
height:100%;
overflow:hidden;
}

body{
font-family:'Inter',sans-serif;
background:
radial-gradient(circle at center,
#180000 0%,
#080000 40%,
#000000 100%);
color:white;
display:flex;
justify-content:center;
align-items:center;
cursor:none;
position:relative;
}

/* PARTICLES */

#particles{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
pointer-events:none;
z-index:-2;
}

/* WATERMARK */

.auth-watermark{
position:fixed;
font-family:'Cinzel',serif;
font-size:28vw;
font-weight:700;
color:rgba(255,0,0,.03);
user-select:none;
pointer-events:none;
z-index:-1;
}

/* CARD */

.auth-container{
width:450px;
max-width:90%;

padding:45px;

background:
rgba(10,0,0,.65);

backdrop-filter:blur(20px);

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

box-shadow:
0 0 50px rgba(255,0,0,.15);

position:relative;
z-index:10;
}

/* LOGO */

.auth-logo{
width:140px;
display:block;
margin:auto;
margin-bottom:20px;

filter:
drop-shadow(0 0 20px #ff0000)
drop-shadow(0 0 40px #8b0000);

animation:pulse 4s infinite;
}

@keyframes pulse{

0%{
transform:scale(1);
}

50%{
transform:scale(1.05);
}

100%{
transform:scale(1);
}

}

/* TITLE */

.auth-title{
font-family:'Cinzel',serif;
font-size:32px;
text-align:center;
letter-spacing:5px;
margin-bottom:10px;
}

.auth-sub{
text-align:center;
color:#999;
margin-bottom:30px;
letter-spacing:2px;
}

/* FORM */

input{
width:100%;

padding:15px;

margin-bottom:15px;

background:#090000;

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

color:white;

font-size:15px;

outline:none;

transition:.3s;
}

input:focus{
border-color:red;

box-shadow:
0 0 15px rgba(255,0,0,.4);
}

input::placeholder{
color:#777;
}

/* BUTTON */

button{
width:100%;

padding:15px;

background:transparent;

border:1px solid red;

color:white;

font-weight:600;

letter-spacing:2px;

transition:.3s;
}

button:hover{
background:#8b0000;

box-shadow:
0 0 20px red;

cursor:pointer;
}

/* LINKS */

.auth-links{
margin-top:20px;
text-align:center;
color:#888;
}

.auth-links a{
color:#ff2a2a;
text-decoration:none;
}

.auth-links a:hover{
text-shadow:0 0 10px red;
}

/* ERROR */

.error{
background:#290000;

border-left:3px solid red;

padding:12px;

margin-bottom:15px;

color:#ffb0b0;
}

/* CURSOR */

#cursor{
position:fixed;

width:8px;
height:8px;

background:red;

border-radius:50%;

pointer-events:none;

z-index:99999;

transform:translate(-50%,-50%);
}

#cursor-ring{
position:fixed;

width:40px;
height:40px;

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

border-radius:50%;

pointer-events:none;

z-index:99998;

transform:translate(-50%,-50%);

transition:
width .15s,
height .15s;
}

/* MOBILE */

@media(max-width:768px){

.auth-title{
font-size:26px;
}

.auth-container{
padding:30px;
}

.auth-watermark{
font-size:40vw;
}

}
body{
background:
radial-gradient(
circle at center,
#2a0000 0%,
#120000 20%,
#050000 50%,
#000000 100%
);
}
.eclipse-bg{

position:fixed;

width:700px;
height:700px;

border-radius:50%;

left:50%;
top:50%;

transform:
translate(-50%,-50%);

box-shadow:
0 0 80px #8b0000,
0 0 200px rgba(255,0,0,.2);

border:
3px solid rgba(255,0,0,.3);

z-index:-1;

animation:
eclipsePulse 8s infinite;
}
@keyframes eclipsePulse{

0%{

transform:
translate(-50%,-50%)
scale(1);

}

50%{

transform:
translate(-50%,-50%)
scale(1.03);

}

100%{

transform:
translate(-50%,-50%)
scale(1);

}

}
.auth-container{

width:500px;

padding:50px;

background:
rgba(5,0,0,.35);

backdrop-filter:
blur(30px);

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

box-shadow:

0 0 50px rgba(255,0,0,.1),

inset 0 0 50px rgba(255,0,0,.05);

}
input{

background:
rgba(0,0,0,.5);

height:55px;

padding-left:20px;

font-size:16px;

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

transition:.4s;
}

input:hover{

border-color:
rgba(255,0,0,.4);

}

input:focus{

border-color:red;

box-shadow:
0 0 20px rgba(255,0,0,.3);

}
button{

height:55px;

font-size:15px;

letter-spacing:4px;

font-weight:600;

background:
linear-gradient(
90deg,
#5a0000,
#a00000
);

border:none;

margin-top:10px;

transition:.4s;
}

button:hover{

transform:translateY(-3px);

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

}
.system-status{

text-align:center;

margin-bottom:25px;

font-size:12px;

letter-spacing:4px;

color:#ff4a4a;
}