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

html,body{
height:100%;
overflow:hidden;
font-family:'Inter',sans-serif;
background:#020816;
}

body{

background:
radial-gradient(circle at top left,#00c3ff22,transparent 25%),
radial-gradient(circle at bottom right,#00ff9950,transparent 30%),
linear-gradient(135deg,#020816,#081120,#091629);

display:flex;
justify-content:center;
align-items:center;

position:relative;
}

.stars{
position:absolute;
inset:0;
overflow:hidden;
z-index:1;
}

.stars span{
position:absolute;
display:block;
width:2px;
height:2px;
background:#fff;
opacity:0.5;
border-radius:50%;
animation:blink 4s infinite;
}

@keyframes blink{
0%{opacity:0.1;}
50%{opacity:1;}
100%{opacity:0.1;}
}

.grid{
position:absolute;
inset:0;

background-image:
linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);

background-size:40px 40px;

transform:perspective(1000px) rotateX(65deg);
transform-origin:center top;

opacity:0.18;

animation:gridMove 12s linear infinite;

z-index:1;
}

@keyframes gridMove{

0%{
transform:
perspective(1000px)
rotateX(65deg)
translateY(0px);
}

100%{
transform:
perspective(1000px)
rotateX(65deg)
translateY(40px);
}

}

.light1,
.light2{

position:absolute;
border-radius:50%;
filter:blur(80px);
z-index:1;
}

.light1{

width:300px;
height:300px;

background:#00d9ff22;

top:-120px;
left:-100px;

animation:float1 10s ease-in-out infinite;
}

.light2{

width:260px;
height:260px;

background:#00ff9930;

bottom:-100px;
right:-80px;

animation:float2 12s ease-in-out infinite;
}

@keyframes float1{

0%{transform:translateY(0px);}
50%{transform:translateY(30px);}
100%{transform:translateY(0px);}

}

@keyframes float2{

0%{transform:translateY(0px);}
50%{transform:translateY(-25px);}
100%{transform:translateY(0px);}

}

.login-panel{

position:relative;
z-index:5;

width:387px;
max-width:92%;

background:rgba(8,15,28,0.72);

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

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

border-radius:34px;

padding:40px 32px;

overflow:hidden;

box-shadow:
0 0 30px rgba(0,255,255,0.08),
0 0 120px rgba(0,255,255,0.05),
0 0 220px rgba(0,255,255,0.03);

}

.logo{
position:relative;
z-index:2;
text-align:center;
margin-bottom:26px;
}

.ai-core{

position:relative;

width:170px;
height:170px;

margin:auto;
margin-bottom:24px;

display:flex;
align-items:center;
justify-content:center;

}

.outer-ring,
.middle-ring,
.inner-ring,
.energy-ring{

position:absolute;
border-radius:50%;

}

.outer-ring{

width:160px;
height:160px;

border:2px solid rgba(0,217,255,0.12);

animation:spinSlow 18s linear infinite;

}

.middle-ring{

width:125px;
height:125px;

border:2px solid rgba(0,255,157,0.16);

animation:spinReverse 10s linear infinite;

}

.inner-ring{

width:85px;
height:85px;

border:2px solid rgba(255,255,255,0.08);

animation:pulseRing 4s ease-in-out infinite;

}

.energy-ring{

width:145px;
height:145px;

border-top:3px solid rgba(0,255,255,0.7);
border-bottom:3px solid rgba(0,255,157,0.6);
border-left:3px solid transparent;
border-right:3px solid transparent;

animation:spinEnergy 6s linear infinite;

filter:drop-shadow(0 0 18px rgba(0,255,255,0.35));

}

.icon-core{

position:absolute;

width:80px;
height:80px;

display:flex;
align-items:center;
justify-content:center;

z-index:5;

}

.icon-core i{

position:absolute;

font-size:36px;

color:#00e1ff;

opacity:0;

transform:scale(0.5);

transition:
opacity 0.8s ease,
transform 0.8s ease;

filter:
drop-shadow(0 0 10px #00e1ff)
drop-shadow(0 0 25px rgba(0,225,255,0.5));

}

.icon-core i.active{

opacity:1;

transform:scale(1);

}

.logo h1{

font-family:'Orbitron',sans-serif;
font-size:28px;
font-weight:800;

letter-spacing:3px;

color:#ffffff;

margin-bottom:10px;

text-shadow:
0 0 15px rgba(0,255,255,0.35);

}

.logo p{
font-size:13px;
color:#8da4c4;
letter-spacing:1px;
}

.form-group{
margin-bottom:20px;
position:relative;
z-index:2;
}

.form-group label{

display:block;

margin-bottom:8px;

font-size:11px;
letter-spacing:2px;

font-weight:600;

color:#88a5cb;
}

.input-box{
position:relative;
}

.input-box i{

position:absolute;

left:18px;
top:50%;

transform:translateY(-50%);

color:#00d9ff;
font-size:15px;
}

.input-box input{

width:100%;
height:58px;

padding:0 20px 0 52px;

border-radius:18px;

border:1px solid rgba(255,255,255,0.08);

background:rgba(255,255,255,0.04);

color:#fff;

font-size:14px;

outline:none;

transition:0.3s;
}

.input-box input:focus{

border-color:#00d9ff;

background:rgba(255,255,255,0.06);

box-shadow:
0 0 20px rgba(0,217,255,0.15);

}

.login-btn{

width:100%;
height:58px;

border:none;
border-radius:20px;

background:
linear-gradient(135deg,#00cfff,#00ff99);

font-family:'Orbitron',sans-serif;

font-size:15px;
font-weight:700;

letter-spacing:3px;

color:#04111f;

cursor:pointer;

transition:0.3s;

margin-top:8px;

position:relative;

overflow:hidden;

box-shadow:
0 0 30px rgba(0,255,255,0.3),
0 0 80px rgba(0,255,157,0.2);

}

.login-btn:hover{

transform:translateY(-2px) scale(1.01);

box-shadow:
0 0 35px rgba(0,255,255,0.45),
0 0 120px rgba(0,255,157,0.3);

}

.error-box{

background:rgba(255,0,80,0.12);

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

padding:12px;

border-radius:14px;

color:#ff7ea5;

margin-bottom:18px;

font-size:13px;
}

.footer{

margin-top:24px;

text-align:center;

font-size:11px;

color:#62799b;
}

.scanline{

position:absolute;
inset:0;

background:
linear-gradient(
to bottom,
transparent,
rgba(255,255,255,0.03),
transparent
);

height:120px;

animation:scan 5s linear infinite;

pointer-events:none;

z-index:2;
}

@keyframes spinSlow{
from{transform:rotate(0deg);}
to{transform:rotate(360deg);}
}

@keyframes spinReverse{
from{transform:rotate(360deg);}
to{transform:rotate(0deg);}
}

@keyframes spinEnergy{
from{transform:rotate(0deg);}
to{transform:rotate(360deg);}
}

@keyframes pulseRing{

0%{
transform:scale(1);
opacity:0.5;
}

50%{
transform:scale(1.08);
opacity:1;
}

100%{
transform:scale(1);
opacity:0.5;
}

}

@keyframes scan{

0%{
transform:translateY(-120px);
}

100%{
transform:translateY(100vh);
}

}