html,
body{
    margin:0;
    padding:0;
    width:100%;
    height:100%;
    overflow:hidden;
    background:#000;
}

.content-wrapper,
.content,
main{
    padding:0 !important;
    margin:0 !important;
}

.attendance-kiosk{
    position:fixed;
    inset:0;
     width:100%;
    height:100%;
    background:#000;
}

#video,
#previewCanvas{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
}

.camera-overlay{
    position:absolute;
    inset:0;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    z-index:10;
}

.top-bar{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:20px 80px 20px 30px;
    background:linear-gradient(
        to bottom,
        rgba(0,0,0,.75),
        transparent
    );
}

.company-brand{
    display:flex;
    align-items:center;
    gap:15px;
}

.brand-logo{
    width:60px;
    height:60px;
    border-radius:50%;
    background:#00c853;
    display:flex;
    justify-content:center;
    align-items:center;
    color:#fff;
    font-size:28px;
}

.brand-title{
    color:white;
    font-size:26px;
    font-weight:700;
    letter-spacing:1px;
}

.brand-subtitle{
    color:#d8d8d8;
    font-size:14px;
}

.clock{
    color:white;
    font-size:42px;
    font-weight:700;
}

.face-guide{
    flex:1;
    display:flex;
    justify-content:center;
    align-items:center;
}

.face-frame{
    width:420px;
    height:520px;
    position:relative;
}

.corner{
    position:absolute;
    width:80px;
    height:80px;
    border-color:#00ff95;
    border-style:solid;
    border-width:0;
}

.tl{
    top:0;
    left:0;
    border-top-width:8px;
    border-left-width:8px;
}

.tr{
    top:0;
    right:0;
    border-top-width:8px;
    border-right-width:8px;
}

.bl{
    bottom:0;
    left:0;
    border-bottom-width:8px;
    border-left-width:8px;
}

.br{
    bottom:0;
    right:0;
    border-bottom-width:8px;
    border-right-width:8px;
}

.bottom-panel{
    text-align:center;
    backdrop-filter:blur(12px);
    background:rgba(0,0,0,.45);
    position:absolute;
    left:0;
    right:0;
    bottom:20px
}

.status-icon{
    font-size:48px;
    color:white;
    margin-bottom:15px;
}

.status-text{
    font-size:36px;
    font-weight:700;
    color:white;
}

.status-text.success{
    color:#00ff88;
}

.status-text.error{
    color:#ff4d4d;
}

.status-text.warning{
    color:#ffb300;
}

.status-text.processing{
    color:#4fc3f7;
}

.status-info{
    color:#ddd;
    margin-top:10px;
    font-size:18px;
}

@media(max-width:768px){

    .face-frame{
        width:280px;
        height:380px;
    }

    .clock{
        font-size:24px;
    }

    .status-text{
        font-size:24px;
    }
}