<style>

#cameraArea{
position:relative;
background:#000;
border-radius:10px;
overflow:hidden;
height:550px;
}

#video{
width:100%;
height:100%;
object-fit:cover;
}

#scannerLine{
position:absolute;
left:0;
width:100%;
height:3px;
background:#00ff00;
top:0;
animation:scan 2s infinite;
box-shadow:0 0 20px #00ff00;
}

@keyframes scan{
0%{
top:0;
}
100%{
top:100%;
}
}
#cameraArea{
    position:relative;
    width:100%;
    height:480px;
    background:#000;
    overflow:hidden;
}


#video{
    width:100%;
    height:100%;
    object-fit:cover;
}



#scannerBox{
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    width:280px;
    height:280px;
    border:3px solid #00ff00;
    border-radius:20px;
    z-index:10;
}

#scannerLine{
    position:absolute;
    left:0;
    width:100%;
    height:3px;
    background:#00ff00;
    animation:scan 2s infinite;
}

@keyframes scan{
    0%{
       top:0;
    }
    50%{
        top:100%;
    }
    100%{
        top:0;
    }
}

#scannerText{
    position:absolute;
    bottom:-40px;
    width:100%;
    text-align:center;
    color:white;
    font-weight:bold;
}

/* =====================================================
   PALM AI CAMERA PREMIUM STYLE
===================================================== */


/* CAMERA AREA */
#cameraArea{
    position:relative;
    width:100%;
    height:520px;
    background:#050505;
    border-radius:15px;
    overflow:hidden;
    box-shadow:
        0 0 25px rgba(0,255,150,.15);

}

/* VIDEO FULL */

#video{
    width:100%;
    height:100%;
    object-fit:cover;
    background:#000;
}

/* DARK OVERLAY */

#cameraArea:before{
    content:"";
    position:absolute;
    inset:0;
    background:
    linear-gradient(
        rgba(0,0,0,.15),
        rgba(0,0,0,.45)
    );

    z-index:2;
    pointer-events:none;
}

/* SCANNER BOX */

#scannerBox{
    position:absolute;
    top:50%;
    left:50%;
    transform:
    translate(-50%,-50%);
    width:300px;
    height:300px;
    border-radius:30px;
    border:
    3px solid #00ff88;
    box-shadow:
    0 0 15px #00ff88,
    inset 0 0 25px rgba(0,255,136,.4);
    z-index:5;
}
/* CORNER AI FRAME */
#scannerBox:before,
#scannerBox:after{
    content:"";
    position:absolute;
    width:45px;
    height:45px;
    border-color:#00ff88;
    border-style:solid;
}
#scannerBox:before{
    top:-3px;
    left:-3px;
    border-width:
    5px 0 0 5px;
}

#scannerBox:after{
    right:-3px;
    bottom:-3px;
    border-width:
    0 5px 5px 0;
}

/* LASER LINE */

#scannerLine{
    position:absolute;
    left:10px;
    right:10px;
    height:3px;
    background:
    linear-gradient(
        90deg,
        transparent,
        #00ff88,
        transparent
    );
    box-shadow:
    0 0 15px #00ff88;
    animation:
    laserMove 2s infinite ease-in-out;
}

@keyframes laserMove{
    0%{
        top:10px;
    }
    50%{
        top:calc(100% - 10px);
    }
    100%{
        top:10px;
    }
}

/* TEXT */
#scannerText{
    position:absolute;
    bottom:-55px;
    width:100%;
    text-align:center;
    color:white;
    font-size:16px;
    letter-spacing:2px;
    font-weight:bold;
    text-shadow:
    0 0 10px #00ff88;
}

/* CAMERA STATUS BADGE */
#cameraStatus{
    transition:.3s;
}
.badge-success{
    box-shadow:
    0 0 15px rgba(0,255,100,.7);
}

/* EMPLOYEE PHOTO */
#employeePhoto{
    transition:.4s;
    box-shadow:
    0 0 20px rgba(0,123,255,.5);
}
#employeePhoto.active{
    animation:
    pulsePhoto 1.5s infinite;
}
@keyframes pulsePhoto{
    0%{
        transform:scale(1);
    }
    50%{
        transform:scale(1.05);
    }
    100%{
        transform:scale(1);
    }
}
/* CONFIDENCE BAR */

#confidenceBar{
    transition:
    width .5s ease;
    font-weight:bold;
}

/* AI CARD */
.card-info{
    box-shadow:
    0 5px 20px rgba(0,0,0,.15);
}

/* RESPONSIVE */
@media(max-width:768px){
    #cameraArea{
        height:400px;
    }
    #scannerBox{
        width:220px;
        height:220px;
    }
}
/* ==========================================
   PREMIUM AI EFFECT
========================================== */

.ai-camera{
    position:relative;
}
.ai-camera::after{
    content:"";
    position:absolute;
    inset:0;
    pointer-events:none;
    background:
        radial-gradient(circle at center,
        transparent 35%,
        rgba(0,0,0,.25) 100%);
    z-index:3;
}
#scannerBox{
    animation:
        scannerGlow 2s infinite;
}
@keyframes scannerGlow{
0%{
box-shadow:
0 0 10px #00ff88,
inset 0 0 20px rgba(0,255,136,.3);

}

50%{

box-shadow:
0 0 35px #00ff88,
0 0 60px #00ff88,
inset 0 0 35px rgba(0,255,136,.7);

}

100%{

box-shadow:
0 0 10px #00ff88,
inset 0 0 20px rgba(0,255,136,.3);

}

}

/* Corner */
.corner{
position:absolute;
width:35px;
height:35px;
border:5px solid #00ff88;
z-index:20;
}
.corner.tl{
top:-3px;
left:-3px;
border-right:none;
border-bottom:none;
}
.corner.tr{
top:-3px;
right:-3px;
border-left:none;
border-bottom:none;
}
.corner.bl{
bottom:-3px;
left:-3px;
border-right:none;
border-top:none;
}

.corner.br{
bottom:-3px;
right:-3px;

border-left:none;
border-top:none;
}

/* Loading */
#loadingScan{
display:none;
position:absolute;
left:50%;
top:50%;
transform:translate(-50%,-50%);
z-index:100;
color:white;
font-size:22px;
font-weight:bold;
text-shadow:0 0 15px black;
}

#loadingScan i{
font-size:60px;
display:block;
margin-bottom:15px;
animation:rotateAI 1s linear infinite;
}

@keyframes rotateAI{
from{
transform:rotate(0);
}
to{
transform:rotate(360deg);
}
}
/* Result Animation */
#employeePhoto.success{
animation:successPhoto .8s;
}
@keyframes successPhoto{
0%{
transform:scale(.4);
opacity:0;
}
100%{
transform:scale(1);
opacity:1;
}
}
/* Confidence */
.progress{
height:25px;
border-radius:30px;
overflow:hidden;
}
#confidenceBar{
font-size:14px;
line-height:25px;
font-weight:bold;
}