.gradient-preview-container {
  margin: 15px 0;
  padding: 15px;
  background: #f5f5f5;
  border-radius: 8px;
  border: 1px solid #ddd;
}

.gradient-preview-label {
  font-weight: bold;
  margin-bottom: 10px;
  display: block;
  color: #333;
}

.gradient-preview-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(60px, 1fr));
  gap: 10px;
  margin-bottom: 15px;
}

.gradient-preview-item {
  height: 60px;
  border-radius: 8px;
  cursor: pointer;
  border: 3px solid transparent;
  transition: all 0.3s ease;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  position: relative;
}

.gradient-preview-item:hover {
  transform: scale(1.05);
  box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

.gradient-preview-item.selected {
  border-color: #0073e6;
  box-shadow: 0 0 0 2px rgba(0, 115, 230, 0.3);
  transform: scale(1.05);
}

/* Tooltip au survol */
.gradient-preview-item::after {
  content: attr(data-label);
  position: absolute;
  bottom: -25px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0, 0, 0, 0.8);
  color: white;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 11px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s;
  z-index: 10;
}

.gradient-preview-item:hover::after {
  opacity: 1;
}

/* Grand aperçu */
.gradient-preview-large {
  width: 100%;
  height: 150px;
  border-radius: 8px;
  display: none;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  margin-bottom: 10px;
  position: relative;
}

.gradient-preview-large.active {
  display: block;
}

.gradient-preview-large-label {
  position: absolute;
  bottom: 10px;
  left: 10px;
  background: rgba(255, 255, 255, 0.9);
  padding: 8px 15px;
  border-radius: 6px;
  font-weight: bold;
  color: #333;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

/* Classes de gradients */
.preview-gim-gradient-1 {
  background: radial-gradient(circle at center, #4A90A4 0%, #2C5F6F 50%, #1A3A47 100%);
}

.preview-gim-gradient-2 {
  background: radial-gradient(circle at center, #FF8C42 0%, #D65A31 50%, #8B3A1F 100%);
}

.preview-gim-gradient-3 {
  background: radial-gradient(circle at center, #52B788 0%, #2D6A4F 50%, #1B4332 100%);
}

.preview-gim-gradient-4 {
  background: radial-gradient(circle at center, #0096C7 0%, #023E8A 50%, #001F54 100%);
}

.preview-gim-gradient-5 {
  background: radial-gradient(circle at center, #7209B7 0%, #560BAD 50%, #3C096C 100%);
}

.preview-gim-gradient-6 {
  background: radial-gradient(circle at center, #E63946 0%, #A4161A 50%, #660708 100%);
}

.preview-gim-gradient-7 {
  background: radial-gradient(circle at center, #06A77D 0%, #048062 50%, #025951 100%);
}

.preview-gim-gradient-8 {
  background: radial-gradient(circle at center, #FFB703 0%, #FB8500 50%, #C86400 100%);
}

.preview-gim-gradient-9 {
  background: radial-gradient(circle at center, #6C757D 0%, #495057 50%, #343A40 100%);
}

.preview-gim-gradient-10 {
  background: radial-gradient(circle at center, #F72585 0%, #B5179E 50%, #7209B7 100%);
}