#bpr-absensi-app{
  max-width:720px;
  margin:20px auto;
  padding:0 12px 24px;
  font-family:Arial,Helvetica,sans-serif;
  color:#111;
}
.bpr-camera-wrap{
  position:relative;
  overflow:hidden;
  border-radius:16px;
  background:#000;
  border:3px solid #7b1e2b;
  box-shadow:0 8px 24px rgba(0,0,0,.20);
}
#bpr-camera{
  display:block;
  width:100%;
  height:auto;
  min-height:320px;
  max-height:72vh;
  object-fit:cover;
  background:#000;
  transform:scaleX(-1);
}
.bpr-camera-overlay{
  position:absolute;
  inset:0;
  pointer-events:none;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-direction:column;
}
.bpr-face-guide{
  width:min(70vw,330px);
  height:min(70vw,430px);
  max-height:62%;
  border:3px solid rgba(255,255,255,.95);
  border-radius:48% 48% 44% 44%;
  box-shadow:0 0 0 9999px rgba(0,0,0,.18),0 0 18px rgba(0,0,0,.7);
}
.bpr-camera-hint{
  margin-top:12px;
  padding:9px 14px;
  border-radius:999px;
  background:rgba(0,0,0,.78);
  color:#fff;
  font-weight:800;
  font-size:15px;
  text-align:center;
  text-shadow:0 1px 2px #000;
}
.bpr-actions{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  margin:10px 0 12px;
}
.bpr-actions button{
  width:100%;
  min-height:54px;
  padding:14px 10px;
  border:0;
  border-radius:11px;
  color:#fff;
  font-size:17px;
  font-weight:900;
  cursor:pointer;
  box-shadow:0 4px 10px rgba(0,0,0,.18);
}
#bpr-capture{background:#7b1e2b}
#bpr-capture:hover:not(:disabled){background:#5f1520}
#bpr-validate{background:#176b3a}
#bpr-validate:hover:not(:disabled){background:#10542d}
.bpr-actions button:disabled{opacity:.5;cursor:not-allowed}
.bpr-info-panel{
  margin:0 0 10px;
  padding:10px;
  border:2px solid #222;
  border-radius:12px;
  background:#f7f7f7;
}
.bpr-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:9px;
}
.bpr-grid>div{
  padding:11px 12px;
  border:2px solid #333;
  border-radius:9px;
  background:#fff;
  color:#111;
}
.bpr-grid span{
  display:block;
  font-size:12px;
  font-weight:800;
  color:#444;
  margin-bottom:3px;
}
.bpr-grid strong{
  display:block;
  font-size:16px;
  color:#000;
}
.bpr-message{
  margin:10px 0;
  padding:13px 15px;
  border-radius:10px;
  font-weight:700;
  line-height:1.4;
  color:#111;
  background:#fff;
  border:2px solid #222;
  box-shadow:0 2px 8px rgba(0,0,0,.08);
}
.bpr-info{background:#eaf3ff;border-color:#1d5fa7;color:#063b70}
.bpr-success{background:#e9f8ee;border-color:#16833b;color:#075b26}
.bpr-error{background:#fff0f0;border-color:#b42318;color:#7a0b04}
.bpr-warning{background:#fff8df;border-color:#a36a00;color:#6b4300}
@media(max-width:520px){
  #bpr-absensi-app{margin:10px auto;padding:0 8px 20px}
  #bpr-camera{min-height:280px}
  .bpr-actions{grid-template-columns:1fr;gap:8px}
  .bpr-actions button{min-height:56px}
  .bpr-grid{grid-template-columns:1fr 1fr;gap:7px}
  .bpr-grid>div{padding:9px}
}