body{

margin:0;
font-family:Roboto,Arial;
background:#f2f4f8;

}

.app{

max-width:500px;
margin:auto;
padding:16px;

}

header{

text-align:center;
margin-bottom:12px;

}

h1{

font-size:20px;
font-weight:600;

}

.camera-card{

position:relative;
border-radius:12px;
overflow:hidden;
background:black;

}

video{

width:100%;
display:block;

}

.scan-overlay{

position:absolute;
top:20%;
left:10%;
width:80%;
height:40%;
border:2px solid #00e5ff;
border-radius:10px;
box-shadow:0 0 0 9999px rgba(0,0,0,0.3);

}

canvas{

display:none;

}

.controls{

display:flex;
gap:10px;
margin-top:14px;

}

button{

flex:1;
padding:12px;
border:none;
border-radius:8px;
background:#1976d2;
color:white;
font-size:14px;

}

button:active{

background:#1257a6;

}

.result{

margin-top:16px;

}

textarea{

width:100%;
height:120px;
padding:10px;
border-radius:8px;
border:1px solid #ccc;
font-size:14px;

}