.route-drag-toolbar {
  position: absolute;
  z-index: 470;
  left: 20px;
  right: 112px;
  bottom: 24px;
  width: min(480px, calc(100% - 132px));
  margin-inline: auto;
  padding: 11px 13px;
  border: 1px solid #c4d9d3;
  border-radius: 12px;
  background: #fffffff5;
  box-shadow: 0 4px 20px #183a3026;
  color: #244b44;
  direction: ltr;
}

.route-drag-toolbar[hidden],
.manager-view .route-drag-toolbar,
.route-drag-actions [hidden] { display: none; }

.route-drag-toolbar p {
  margin: 0 0 9px;
  font-size: 11px;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.route-drag-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.route-drag-actions button {
  padding: 7px 10px;
  border: 1px solid #c4d9d3;
  border-radius: 8px;
  background: #f7fbf9;
  color: #0b6359;
  font: inherit;
  font-size: 10px;
  cursor: pointer;
  touch-action: manipulation;
}

.route-drag-actions button:hover:not(:disabled) { background: #eaf5f0; }
.route-drag-actions button:disabled { opacity: .45; cursor: default; }
.route-drag-actions button:focus-visible { outline: 3px solid #57b5a5; outline-offset: 2px; }

#route-drag-done {
  margin-left: auto;
  border-color: #0d766c;
  background: #0d766c;
  color: white;
}

#route-drag-done:hover:not(:disabled) { background: #075c55; }

.map-area:has(.route-drag-toolbar:not([hidden])) .map-legend { display: none; }

.route-drag-hit,
.route-draggable { cursor: grab; touch-action: none; }

.route-drag-hit:active,
.route-draggable:active { cursor: grabbing; }

.route-drag-handle {
  width: 18px;
  height: 18px;
  border: 3px solid white;
  border-radius: 50%;
  background: #7c4db0;
  box-shadow: 0 0 0 1px #0d766c, 0 2px 6px #1c3b344d;
  cursor: grab;
  touch-action: none;
}

.route-drag-handle:active,
.route-drag-marker.leaflet-drag-target { cursor: grabbing; }
.route-drag-marker { border: 0; background: transparent; }
.route-drag-marker.selected .route-drag-handle,
.route-drag-handle.selected { box-shadow: 0 0 0 3px #d8bee9, 0 2px 6px #1c3b344d; }

.route-drag-preview,
.route-drag-pending { stroke-dasharray: 8 6; pointer-events: none; }

@media (max-width: 760px) {
  .route-drag-toolbar {
    left: 11px;
    right: 102px;
    bottom: 12px;
    width: calc(100% - 113px);
    max-width: none;
    padding: 8px 9px;
    border-radius: 10px;
  }

  .route-drag-toolbar p { margin-bottom: 6px; font-size: 10px; line-height: 1.3; }
  .route-drag-actions { gap: 5px; }
  .route-drag-actions button { padding: 6px 7px; font-size: 9px; }
  .route-drag-actions:has(#route-drag-cancel:not([hidden])) #route-drag-undo { display: none; }
  #route-drag-done { margin-left: 0; }
  .route-drag-handle { width: 22px; height: 22px; }
}