body {
  background-color: #121212;
}

.card {
  background-color: var(--bs-dark-bg-subtle);
  border: 1px solid var(--bs-border-color);
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
}

/* Container do Vídeo */
.video-wrapper {
  position: relative;
  width: 100%;
  padding-bottom: 75%; /* Aspect Ratio 4:3 */
  background: #000;
  border-radius: 8px;
  overflow: hidden;
  border: 2px solid var(--bs-border-color);
}

#user-video,
#overlay-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform: scaleX(-1); /* Espelho */
}
#user-video {
  object-fit: cover;
}

#roi-preview {
  width: 100px;
  height: auto;
  display: none;
}

.bpm-value {
  font-size: 4rem;
  font-weight: 700;
  line-height: 1;
  text-shadow: 0 0 10px var(--bs-success-bg-subtle);
}

.chart-container {
  position: relative;
  height: 200px;
  width: 100%;
}

.form-check-input:checked {
  background-color: var(--bs-success);
  border-color: var(--bs-success);
}

/* Links do Disclaimer */
.disclaimer-link {
  color: var(--bs-info);
  cursor: pointer;
}
.disclaimer-link:hover {
  color: var(--bs-light);
}

.navbar-nav .btn {
  margin-left: 5px;
}
@media (max-width: 991px) {
  .navbar-nav .btn {
    margin-left: 0;
    margin-top: 5px;
    width: 100%;
    text-align: left;
  }
}

.modal-body p,
.modal-body li {
  text-align: justify;
  text-justify: inter-word;
}

.modal-body h5,
.modal-body h6 {
  text-align: left;
}