*{

box-sizing:border-box;

}



body{

margin:0;

padding:30px;

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

background:#050505;

color:white;

text-align:center;

}





.brand{

margin-bottom:40px;

}



.brand img{

width:130px;

height:130px;

object-fit:contain;

border-radius:15px;

}



.brand h1{

margin:15px 0 5px;

color:#d4af37;

font-size:42px;

letter-spacing:5px;

}



.brand p{

color:#aaa;

letter-spacing:4px;

}





.panel,
.scanner-panel{


max-width:700px;

margin:25px auto;

padding:30px;

background:#111;

border:1px solid #333;

border-radius:20px;


}





h1,
h2,
h3{


color:#d4af37;

letter-spacing:2px;


}





button{


background:#d4af37;

color:#000;

border:none;

padding:14px 35px;

border-radius:10px;

font-weight:bold;

cursor:pointer;

margin:15px;


}



button:hover{


transform:scale(1.05);


}





#reader{


background:#000;

border-radius:15px;

overflow:hidden;

margin:25px auto;

max-width:400px;


}





#reader video{


border-radius:15px;


}





#result{


margin-top:25px;

padding:20px;

background:#181818;

border-radius:15px;

font-size:18px;


}





input{


width:280px;

padding:14px;

margin:8px;

border-radius:10px;

border:none;

font-size:16px;


}




#scanNext{


background:#ffffff;

}



#redeem{


background:#28a745;

color:white;

}