/* Face.id Aurora Theme (Stable Layout) */
body, html {
    margin:0; padding:0;
    font-family:'Inter',sans-serif;
    background:#07111f;
    color:#dbeafe;
    overscroll-behavior:none;
}

/* ===== Aurora Background ===== */
#aurora-bg {
    position:fixed; inset:0;
    background:radial-gradient(800px at 50% 10%,rgba(0,200,255,.35),transparent),
               radial-gradient(600px at 0% 80%,rgba(0,150,255,.25),transparent),
               radial-gradient(600px at 100% 80%,rgba(0,120,255,.25),transparent);
    filter:blur(70px);
    animation:auroraMove 12s infinite alternate;
}
@keyframes auroraMove {0%{transform:translate(0,0);}100%{transform:translate(40px,-40px);}}

/* ===== Layout ===== */
.absen-wrap{text-align:center;padding-top:25px;color:#dbeafe;font-family:'Inter',sans-serif;}
.absen-logo{width:90px;height:90px;border-radius:50%;box-shadow:0 0 25px rgba(0,200,255,.6);}
.absen-title{margin:8px 0 0;font-size:22px;font-weight:600;color:#7dd3fc;}
.absen-subtitle{margin-top:4px;font-size:14px;color:#cbd5e1;}

/* ===== Camera ===== */
#face-container {
    width:90vw;max-width:420px;height:58vh;min-height:300px;margin:20px auto 0;
    position:relative;border-radius:22px;overflow:hidden;
    border:2px solid rgba(0,220,255,.35);
    box-shadow:0 0 30px rgba(0,200,255,.45);
    animation:scanPulse 3s infinite alternate;
}
#faceVideo,#faceCanvas {width:100%;height:100%;object-fit:cover;}
@keyframes scanPulse {0%{box-shadow:0 0 20px rgba(0,200,255,.25);}100%{box-shadow:0 0 30px rgba(0,200,255,.55);}}

/* Scanner Line */
.scanner-line{
    position:absolute;top:0;left:0;width:100%;height:3px;background:rgba(0,255,255,.7);
    animation:scanLine 2.5s linear infinite;
}
@keyframes scanLine {0%{top:0;}100%{top:100%;}}

/* Status & Log */
.absen-status{margin-top:10px;font-size:15px;color:#7dd3fc;}
.location-text{margin-top:12px;font-size:13px;color:#94a3b8;}
.log-box{margin:14px auto;width:90%;max-width:420px;max-height:130px;overflow:auto;
background:rgba(14,25,40,.4);border:1px solid rgba(0,150,255,.25);border-radius:12px;padding:10px;font-size:12px;}

.absen-footer{margin-top:15px;font-size:11px;color:#64748b;}

/* Popup */
#absen-popup{
  position:fixed;top:20px;right:20px;background:#0ea5e9;color:#fff;
  padding:12px 18px;border-radius:12px;box-shadow:0 0 18px rgba(14,165,233,.55);
  opacity:0;transform:translateY(-20px);transition:.4s;z-index:2000;
}
#absen-popup.show{opacity:1;transform:translateY(0);}