/* =====================================================
   STREAMZONE AUTH
===================================================== */

:root{

--primary:#00E5FF;
--primary-hover:#00c7de;

--bg:#060B1A;
--card:#0d1528cc;

--border:rgba(255,255,255,.08);

--text:#ffffff;
--text-muted:#9ca3af;

--danger:#ef4444;

--radius:18px;

--transition:.3s ease;

}


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


body{

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

background:var(--bg);

color:var(--text);

min-height:100vh;

overflow-x:hidden;

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

padding:25px;

}



.bg-blur{


position:fixed;

top:-250px;
left:-250px;


width:600px;
height:600px;


background:

radial-gradient(

circle,

rgba(0,229,255,.25),

transparent 70%

);


filter:blur(120px);


z-index:-1;


}





.auth-container{

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


}



.auth-card{


background:var(--card);


backdrop-filter:blur(25px);

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



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


padding:40px;


border-radius:var(--radius);



box-shadow:


0 0 40px rgba(0,229,255,.08);



}



.logo{


text-align:center;


margin-bottom:30px;


}




.footer-logo{


font-size:38px;


font-weight:700;


letter-spacing:1px;


}



.footer-logo span{


color:var(--primary);



text-shadow:


0 0 15px var(--primary);



}



.logo p{


margin-top:10px;



font-size:14px;


color:var(--text-muted);



}



.tabs{


display:flex;


gap:10px;


margin-bottom:25px;


}




.tab{


flex:1;


padding:14px;



border:none;


cursor:pointer;



background:#101827;



color:white;



border-radius:12px;



font-size:14px;



transition:var(--transition);



}



.tab.active{


background:var(--primary);


color:black;


font-weight:600;


}



.panel{


display:none;


animation:fade .4s ease;


}



.panel.active{


display:block;


}



@keyframes fade{


from{


opacity:0;

transform:translateY(15px);


}



to{


opacity:1;

transform:none;


}



}




.field{


margin-bottom:18px;


}



.field label{


display:block;


margin-bottom:8px;


font-size:14px;


font-weight:500;


}



.field input{


width:100%;


padding:15px;



background:#0b1324;



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



border-radius:12px;



outline:none;



color:white;



transition:var(--transition);



}



.field input:focus{


border-color:var(--primary);



box-shadow:


0 0 0 3px rgba(0,229,255,.15);



}




.password-wrapper{


position:relative;


}



.password-wrapper button{


position:absolute;


right:15px;

top:50%;


transform:translateY(-50%);



background:none;



border:none;



cursor:pointer;



font-size:18px;



color:var(--text-muted);



}



.remember{


display:flex;



justify-content:space-between;



align-items:center;



margin-bottom:20px;



font-size:13px;



}



.remember a{


color:var(--primary);



text-decoration:none;


}



.check{


margin-bottom:20px;


font-size:13px;


}




.btn-primary{


width:100%;


padding:15px;



border:none;



cursor:pointer;



border-radius:12px;



background:var(--primary);



color:black;



font-size:15px;



font-weight:700;



transition:var(--transition);



}



.btn-primary:hover{


background:var(--primary-hover);



transform:translateY(-2px);



}




.separator{


text-align:center;



margin:25px 0;



position:relative;



font-size:13px;



color:var(--text-muted);



}



.separator::before{


content:"";


position:absolute;


left:0;


top:50%;



width:45%;



height:1px;



background:


rgba(255,255,255,.1);



}



.separator::after{


content:"";


position:absolute;



right:0;



top:50%;



width:45%;



height:1px;



background:


rgba(255,255,255,.1);



}



.btn-secondary{


width:100%;



padding:14px;



border-radius:12px;



cursor:pointer;



background:#111827;



color:white;



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



transition:var(--transition);



}



.btn-secondary:hover{


border-color:var(--primary);



}




#loader{


display:none;



margin-top:25px;



text-align:center;



}



.spinner{


width:45px;

height:45px;



border:


4px solid rgba(255,255,255,.1);



border-top:


4px solid var(--primary);



border-radius:50%;



animation:spin 1s linear infinite;



margin:auto;



margin-bottom:15px;



}



@keyframes spin{


100%{


transform:rotate(360deg);


}



}





@media(max-width:768px){



.auth-card{


padding:25px;


}




.footer-logo{


font-size:30px;


}



.tab{


font-size:13px;


padding:12px;


}



.field input{


padding:14px;


}



}

@media(max-width:768px){


.form-grid{


grid-template-columns:1fr;


}


}


.form-grid{

display:grid;

grid-template-columns:
1fr 1fr;

gap:20px;

margin-bottom:20px;

}



.form-grid .field{

margin-bottom:0;

}