body{
margin:0;
font-family:system-ui;
background:#0f172a;
color:white;
text-align:center;
}

header{
padding:16px;
font-size:20px;
font-weight:600;
background:#1e293b;
}

.camera-container{
position:relative;
width:100%;
max-width:500px;
margin:auto;
margin-top:20px;
}

video{
width:100%;
border-radius:10px;
}

.capture-btn{
margin-top:15px;
width:65px;
height:65px;
border-radius:50%;
border:none;
background:white;
cursor:pointer;
font-size:24px;
}

.capture-btn:disabled{
background:#888;
cursor:not-allowed;
}

.flash-btn{
margin-top:10px;
padding:10px 16px;
border:none;
border-radius:6px;
background:#475569;
color:white;
cursor:pointer;
}

.form{
max-width:450px;
margin:auto;
margin-top:20px;
background:#1e293b;
padding:20px;
border-radius:10px;
display:none;
}

input{
width:100%;
padding:10px;
margin:6px 0;
border-radius:6px;
border:none;
}

.button-row{
display:flex;
gap:10px;
margin-top:10px;
}

button.action{
flex:1;
padding:12px;
border:none;
border-radius:6px;
background:#3b82f6;
color:white;
font-size:16px;
cursor:pointer;
}

button.secondary{
background:#475569;
}

.loading{
display:none;
margin-top:15px;
}

.spinner{
width:40px;
height:40px;
border:4px solid #94a3b8;
border-top:4px solid white;
border-radius:50%;
animation:spin 1s linear infinite;
margin:auto;
}

@keyframes spin{
100%{transform:rotate(360deg);}
}