/* Minimal dark, suaves sombras e cantos arredondados */
body { font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans"; }
.navbar { background: rgba(22,22,26,.6); backdrop-filter: blur(6px); }
.dropzone { border: 2px dashed rgba(255,255,255,.2); border-radius: 1rem; cursor: pointer; transition: .2s ease; }
.dropzone:hover { border-color: rgba(255,255,255,.35); background: rgba(255,255,255,.03); }
.card { background: linear-gradient(180deg, rgba(28,28,34,1) 0%, rgba(20,20,24,1) 100%); }
.list-group-item { background: rgba(255,255,255,.02); border: 1px solid rgba(255,255,255,.06); }
.btn { border-radius: 12px; }
.progress { height: 10px; border-radius: 12px; }
.progress-bar { border-radius: 12px; }
#kfList .badge { min-width: 42px; }

/* Barra de seleção de corte (timeline) */
#timelineWrapper {
  position: relative;
  width: 100%;
  height: 12px;
  background: rgba(255,255,255,.1);
  border-radius: 6px;
  margin-top: 6px;
  cursor: pointer;
}
#timelineBar {
  position: absolute;
  top: 0;
  left: 0;
  height: 12px;
  width: 100%;
  border-radius: 6px;
}
.handle {
  position: absolute;
  top: -4px;
  width: 12px;
  height: 20px;
  background: #0d6efd;
  border-radius: 4px;
  cursor: ew-resize;
}
#selection {
  position: absolute;
  top: 0;
  height: 12px;
  background: rgba(13,110,253,.4);
  border-radius: 6px;
}

#cropOverlay {
  position: absolute;
  border: 2px dashed red;
  background-color: rgba(29, 23, 214, 0.5);
  pointer-events: none;
  transition: left 0.2s linear, top 0.2s linear, width 0.2s linear, height 0.2s linear;
}

#kfList {
  max-height: 200px; /* ajuste a altura como preferir */
  overflow-y: auto;
}

.keyframe-item.active {
  background-color: #0d6efd20; /* leve azul translúcido */
  border-left: 4px solid #0d6efd;
}

/* Estilos para o círculo de progresso */
.progress-circle-container {
  position: relative;
  width: 120px;
  height: 120px;
}

.progress-circle-bg {
  fill: none;
  stroke: #2d3748;
  stroke-linecap: round;
}

.progress-circle-fill {
  fill: none;
  stroke: #0d6efd;
  stroke-linecap: round;
  transform: rotate(-90deg);
  transform-origin: 50% 50%;
  transition: stroke-dashoffset 0.3s ease;
}

.progress-percentage {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 1.5rem;
  font-weight: bold;
  color: white;
}

/* Modal transparente */
.modal-content.bg-transparent {
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* Bloqueio de interação */
.modal-backdrop {
  background-color: rgba(0, 0, 0, 0.8);
}