body{

  margin:0;

  font-family:Arial,sans-serif;

  background:#f5f6fa;

}

.container{

  max-width:500px;

  margin:auto;

  padding:20px;

}

video,
img{

  width:100%;

  border-radius:12px;

}

.actions{

  margin-top:15px;

  display:flex;

  gap:10px;

}

button{

  flex:1;

  padding:12px;

  border:none;

  border-radius:10px;

  cursor:pointer;

}

#cameraWrapper{

  position:relative;

  width:100%;
}

#video{

  width:100%;

  border-radius:12px;
}

#watermarkOverlay{

  position:absolute;

  left:0;
  right:0;
  bottom:0;

  padding:14px 16px;

  background:
    linear-gradient(
      to top,
      rgba(0,0,0,.70),
      rgba(0,0,0,.25)
    );

  color:#fff;

  z-index:999;

  pointer-events:none;
}

#ovTitle{

  text-align:right;

  font-size:14px;

  font-weight:700;

  letter-spacing:1px;

  margin-bottom:10px;
}

#ovNamaKelas{

  font-size:18px;

  font-weight:700;

  margin-bottom:8px;
}

#ovAlamat{

  font-size:12px;

  line-height:1.3;

  opacity:.92;

  margin-bottom:8px;
}

#ovGps{

  font-size:12px;

  opacity:.9;

  margin-bottom:6px;
}

#ovJam{

  font-size:13px;

  font-weight:600;
}