*{

box-sizing:border-box;

}



body{


margin:0;

padding:30px;

font-family:Arial, Helvetica, sans-serif;

background:#050505;

color:white;

text-align:center;


}




.brand img{


width:140px;

border-radius:20px;

}



.brand h1{


color:#d4af37;

font-size:45px;

letter-spacing:5px;

margin:15px;


}



.brand p{


letter-spacing:4px;

color:#aaa;


}







h2,h3{


color:#d4af37;

letter-spacing:2px;


}





#dashboard{


max-width:1100px;

margin:auto;


}







.panel{


background:#111;

border:1px solid #333;

border-radius:20px;

padding:30px;

margin:25px auto;

box-shadow:
0 0 20px rgba(212,175,55,.08);


}







.login{


max-width:400px;


}








input,
textarea{


width:90%;

max-width:400px;

padding:15px;

margin:10px;

border-radius:10px;

border:none;

font-size:16px;


}



textarea{


height:120px;

resize:none;


}








button{


background:#d4af37;

color:black;

border:none;

padding:14px 30px;

border-radius:10px;

font-weight:bold;

cursor:pointer;

margin:10px;


}



button:hover{


transform:scale(1.05);


}









.topbar{


display:flex;

justify-content:space-between;

align-items:center;

background:#111;

border-radius:20px;

padding:25px;

margin-bottom:30px;


}









.stats{


display:grid;

grid-template-columns:
repeat(auto-fit,minmax(200px,1fr));

gap:20px;


}







.stat{


background:#111;

border:1px solid #333;

border-radius:20px;

padding:30px;


}




.stat h3{


font-size:15px;


}



.stat b{


font-size:45px;

color:white;


}








.switch{


font-size:18px;

display:block;

margin-bottom:20px;


}







#staffList div,
#staffStats div{


background:#050505;

border:1px solid #333;

border-radius:15px;

padding:20px;

margin:15px;


}









hr{


border:none;

border-top:1px solid #333;

margin:25px 0;


}









@media(max-width:600px){



body{

padding:15px;

}



.brand h1{

font-size:32px;

}



.topbar{


flex-direction:column;


}



.stat b{


font-size:35px;


}


}