body{
font-family:Arial;
background:#eee;
margin:0;
display:flex;
flex-direction:column;
min-height:100vh;
text-align:center;
}

.top{
padding:15px;
background:white;
font-weight:bold;
position:relative;
}

.middle{
flex:1;
min-height:60vh;
display:flex;
justify-content:center;
align-items:center;
flex-direction:column;
padding:30px 15px;
}

.bottom{
padding:20px 15px 40px 15px;
background:white;
box-shadow:0 -3px 10px rgba(0,0,0,0.1);
}

button{
padding:15px 20px;
margin:6px;
border:none;
border-radius:12px;
font-size:16px;
cursor:pointer;
}

.orange{background:orange;color:white}
.blue{background:#3498db;color:white}
.red{background:#e74c3c;color:white}
.green{background:#2ecc71;color:white}

input,select{
width:220px;
height:50px;
font-size:16px;
text-align:center;
border-radius:12px;
border:2px solid #ccc;
}

.logout-btn{
position:absolute;
top:70px;
left:20px;

background:#28a745;
color:white;
border:none;

width:55px;
height:55px;

border-radius:50%;
display:flex;
align-items:center;
justify-content:center;

cursor:pointer;

box-shadow:0 6px 12px rgba(0,0,0,0.25);
z-index:1000;

transition:all 0.25s ease;
}

.power-icon{
width:24px;
height:24px;
fill:none;
stroke:white;
stroke-width:2.5;
stroke-linecap:round;
stroke-linejoin:round;
}

#reader video{
border-radius:12px;
}

.logout-btn:hover{
transform:scale(1.1);
}

#reader{
width:320px;
max-width:95%;
margin:auto;
position:relative;
}

#reader::after{
content:"";
position:absolute;
top:50%;
left:50%;
width:200px;
height:200px;
transform:translate(-50%,-50%);
border:3px solid #2ecc71;
border-radius:12px;
pointer-events:none;
}

.scan-line{
position:absolute;
top:50%;
left:50%;
width:200px;
height:2px;
background:#2ecc71;
transform:translate(-50%,-50%);
animation:scanMove 2s linear infinite;
}

@keyframes scanMove{
0%{ transform:translate(-50%,-100px); }
50%{ transform:translate(-50%,100px); }
100%{ transform:translate(-50%,-100px); }
}

#switchCamBtn{
margin-top:10px;
}