.controls {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  background: #1e1e1e;
  border-top: 1px solid #333;
  border-bottom: 1px solid #333;
  flex-shrink: 0;
}

.btn {
  background: #2d2d2d;
  border: 1px solid #404040;
  color: #ccc;
  border-radius: 4px;
  padding: 4px 10px;
  font-size: 13px;
  transition: background 0.1s;
  min-width: 32px;
  flex-shrink: 0;
}

.btn:hover:not(:disabled) { background: #3a3a3a; color: #fff; }
.btn:disabled { opacity: 0.35; cursor: default; }

.active {
  color: #5ba3e0;
  border-color: #4a7aaa;
}

/* ── Scrubber ───────────────────────────────────────────────── */
.scrubber {
  flex: 1;
  min-width: 0;
  height: 4px;
  -webkit-appearance: none;
  appearance: none;
  border-radius: 2px;
  outline: none;
  cursor: pointer;
  border: none;
  padding: 0;
  /* filled portion via CSS variable set inline */
  background: linear-gradient(
    to right,
    #5b9bd5 0%,
    #5b9bd5 var(--progress, 0%),
    #3a3a3a var(--progress, 0%),
    #3a3a3a 100%
  );
}

.scrubber:disabled {
  opacity: 0.3;
  cursor: default;
}

.scrubber::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #5b9bd5;
  cursor: pointer;
  border: 2px solid #1e1e1e;
  transition: transform 0.1s;
}
.scrubber:not(:disabled)::-webkit-slider-thumb:hover {
  transform: scale(1.3);
}

.scrubber::-moz-range-thumb {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #5b9bd5;
  cursor: pointer;
  border: 2px solid #1e1e1e;
}

.scrubber::-moz-range-track {
  height: 4px;
  border-radius: 2px;
  background: #3a3a3a;
}

.time {
  flex-shrink: 0;
  font-size: 11px;
  color: #888;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}