/* ===== BASE ===== */

body{
margin:0;
font-family:'Orbitron',sans-serif;

min-height:100vh;
min-height:100dvh;

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

overflow:hidden;
background:#000;

position:relative;
}


/* ===== BACKGROUND IMAGE ===== */

body::before{

content:"";
position:fixed;

top:0;
left:0;

width:100%;
height:100%;

background:
linear-gradient(rgba(0,0,0,.35),rgba(0,0,0,.65)),
url('assets/bg_pc.png?v=2');

background-size:cover;
background-position:center;
background-repeat:no-repeat;

z-index:-1;

animation:bgZoom 18s ease-in-out infinite;

}


/* ===== BACKGROUND ANIMATION ===== */

@keyframes bgZoom{

0%{ transform:scale(1); }

50%{ transform:scale(1.04); }

100%{ transform:scale(1); }

}


/* ===== LOGIN BOX (DESKTOP) ===== */

.login-box{

width:100%;
max-width:420px;

padding:38px;

border-radius:22px;

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

backdrop-filter:blur(12px);

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

box-shadow:
0 0 20px rgba(0,255,255,.45),
0 0 60px rgba(0,255,255,.18),
inset 0 0 25px rgba(0,255,255,.12);

animation:floatBox 7s ease-in-out infinite;

color:white;

}


/* floating animation */

@keyframes floatBox{

0%{ transform:translateY(0); }

50%{ transform:translateY(-10px); }

100%{ transform:translateY(0); }

}


/* ===== INPUTS ===== */

input{

width:100%;

padding:15px;

border-radius:9px;

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

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

color:white;

transition:.25s;

font-size:15px;

}


input:focus{

outline:none;

border:1px solid #00f7ff;

box-shadow:0 0 14px #00f7ff;

}


/* ===== BUTTON ===== */

button{

background:linear-gradient(45deg,#00f7ff,#008cff);

color:white;

font-weight:bold;

border:none;

box-shadow:0 0 18px rgba(0,255,255,.6);

transition:.25s;

cursor:pointer;

}


button:hover{

transform:scale(1.04);

box-shadow:0 0 35px rgba(0,255,255,1);

}


/* ===== LOADER ===== */

.loader{

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

border-top:3px solid #00f7ff;

border-radius:50%;

width:22px;
height:22px;

animation:spin 1s linear infinite;

display:none;

margin:auto;

}


@keyframes spin{

100%{ transform:rotate(360deg); }

}


/* ===== FORGOT MODAL ===== */

#forgotModal{

display:none;

padding:20px;

}


#forgotModal .bg-gray-900{

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

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

backdrop-filter:blur(10px);

}



/* =====================================================
MOBILE OPTIMIZATION
===================================================== */

@media (max-width:768px){

body{

padding:20px;
overflow:auto;

/* pushes login box lower */
align-items:flex-start;

}


/* adjust image crop */

body::before{

background:
linear-gradient(rgba(0,0,0,.18),rgba(0,0,0,.45)),
url('assets/bg_mobile.png?v=7');

background-size:cover;

/* shows shield + logo */
background-position:center 55%;

animation:none;

}


/* move login box LOWER */

.login-box{

margin-top:140px;

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

backdrop-filter:blur(18px);

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

box-shadow:

0 0 6px rgba(0,255,255,.18),
0 0 20px rgba(0,255,255,.08),
inset 0 0 10px rgba(0,255,255,.05);

}

}



/* =====================================================
SMALL PHONES
===================================================== */

@media (max-width:480px){

body::before{

background-position:center 60%;

}


.login-box{

margin-top:300px;

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

backdrop-filter:blur(16px);

padding:24px 18px;

border-radius:14px;

}


input{

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

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

}

}