assets/style.css
body{
    margin:0;
    padding:15px;
    background:#f3f4f6;
    font-family:Arial;
}

.container{
    max-width:500px;
    margin:auto;
}

.header{
    text-align:center;
    margin-bottom:20px;
}

.header h2{
    margin:0;
    font-size:28px;
}

.header p{
    color:#666;
}

.camera-box{
    position:relative;
    overflow:hidden;
    border-radius:20px;
    background:black;
}

video{
    width:100%;
    display:block;
}

.guide{
    position:absolute;
    top:50%;
    left:50%;
    width:85%;
    height:55%;
    border:3px solid #00ff88;
    transform:translate(-50%,-50%);
    border-radius:15px;
    box-shadow:0 0 20px rgba(0,255,136,0.5);
}

.btn-scan{
    width:100%;
    border:none;
    background:#2563eb;
    color:white;
    padding:18px;
    border-radius:15px;
    margin-top:20px;
    font-size:18px;
    font-weight:bold;
}

.btn-scan:active{
    transform:scale(0.98);
}

.preview{
    width:100%;
    margin-top:20px;
    border-radius:15px;
}

.loading{
    text-align:center;
    margin-top:15px;
    font-weight:bold;
    color:#2563eb;
}

.hasil{
    background:white;
    margin-top:20px;
    border-radius:15px;
    padding:20px;
}

.item{
    margin-bottom:20px;
}

.item label{
    display:block;
    font-size:13px;
    color:#777;
    margin-bottom:5px;
}

.item div{
    font-size:18px;
    font-weight:bold;
}

.success{
    background:#dcfce7;
    color:#166534;
    padding:15px;
    border-radius:10px;
    text-align:center;
}

canvas{
    display:none;
}