// Rôle : stylise l'éditeur de cover personnalisée des cards toolbox.
.toolbox-cover-editor {
  width: min(720px, calc(100vw - 32px));
}

.toolbox-cover-editor header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.toolbox-cover-crop-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 620 / 248;
  margin-top: var(--space-4);
  overflow: hidden;
  border: 1px solid rgba(246, 196, 83, 0.72);
  border-radius: var(--radius-sm);
  background:
    linear-gradient(45deg, rgba(255, 255, 255, 0.05) 25%, transparent 25% 75%, rgba(255, 255, 255, 0.05) 75%),
    linear-gradient(45deg, rgba(255, 255, 255, 0.05) 25%, transparent 25% 75%, rgba(255, 255, 255, 0.05) 75%),
    rgba(5, 7, 17, 0.92);
  background-position: 0 0, 10px 10px;
  background-size: 20px 20px;
  cursor: grab;
  touch-action: none;
  user-select: none;
}

.toolbox-cover-crop-frame:active {
  cursor: grabbing;
}

.toolbox-cover-crop-frame::after {
  position: absolute;
  inset: 0;
  border: 1px solid rgba(255, 255, 255, 0.24);
  box-shadow: inset 0 0 0 999px rgba(5, 7, 17, 0.06);
  content: "";
  pointer-events: none;
}

.toolbox-cover-crop-frame img {
  position: absolute;
  top: 50%;
  left: 50%;
  max-width: none;
  object-fit: fill;
  pointer-events: none;
}

.toolbox-cover-zoom-field {
  display: grid;
  gap: var(--space-2);
  margin-top: var(--space-4);
}

.toolbox-cover-zoom-field span {
  color: var(--color-text-secondary);
  font-size: 0.85rem;
  font-weight: 700;
}

.toolbox-cover-zoom-field input[type="range"] {
  width: 100%;
  padding-inline: 0;
  accent-color: var(--color-accent-gold);
}

.toolbox-cover-editor-error {
  margin-top: var(--space-3);
}