:root {
  --primary-color: #64B5F6;
  --secondary-color: #2196F3;
  --dark-background: #1a1a1a;
  --medium-background: #252525;
  --light-background: #333;
  --border-radius: 16px;
  --transition-speed: 0.3s;
}

#toolbar {
  background: linear-gradient(135deg, var(--dark-background) 0%, var(--medium-background) 100%);
  box-shadow: -4px 0 20px rgba(0,0,0,0.3);
  border-right: 2px solid #383838;
}

.toolbar-section {
  background: linear-gradient(145deg, var(--light-background) 0%, #2a2a2a 100%);
  border: 1px solid #444;
  transition: all var(--transition-speed) ease;
}

.toolbar-section:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(0,0,0,0.2);
}

.toolbar-section h3 {
  background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 1px 1px 2px rgba(0,0,0,0.2);
}

.character-category, 
.prop-category,
.crossover-category {
  background: linear-gradient(145deg, var(--light-background) 0%, #2d2d2d 100%);
  border: 2px solid #444;
  transition: all var(--transition-speed) cubic-bezier(0.4, 0, 0.2, 1);
}

.character-category:hover,
.prop-category:hover,
.crossover-category:hover {
  background: linear-gradient(145deg, #3d3d3d 0%, #2d2d2d 100%);
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 6px 15px rgba(0,0,0,0.3);
}

.character-category.active,
.prop-category.active,
.crossover-category.active {
  background: linear-gradient(to right, var(--primary-color), var(--secondary-color));
  border-color: var(--secondary-color);
  color: white;
  box-shadow: 0 8px 20px rgba(33, 150, 243, 0.4);
}

.character-btn, 
.prop-btn,
.crossover-btn {
  transition: all var(--transition-speed) cubic-bezier(0.4, 0, 0.2, 1);
  background: linear-gradient(145deg, var(--light-background) 0%, #2d2d2d 100%);
}

.character-btn:hover, 
.prop-btn:hover,
.crossover-btn:hover {
  transform: scale(1.05) translateY(-5px);
  box-shadow: 0 10px 25px rgba(0,0,0,0.3);
  z-index: 10;
}

#scene {
  background: linear-gradient(135deg, #121212 0%, #1a1a1a 100%);
  border: 2px solid #333;
  box-shadow: 0 0 50px rgba(0,0,0,0.3);
}

.bubble-btn, 
.text-btn, 
.share-btn {
  background: linear-gradient(145deg, var(--light-background) 0%, #2d2d2d 100%);
  transition: all var(--transition-speed) ease;
}

.bubble-btn:hover, 
.text-btn:hover, 
.share-btn:hover {
  background: linear-gradient(145deg, #444 0%, #3a3a3a 100%);
  transform: translateY(-3px);
  box-shadow: 0 6px 15px rgba(0,0,0,0.3);
}

/* Soft scrollbar */
::-webkit-scrollbar {
  width: 10px;
}

::-webkit-scrollbar-track {
  background: rgba(50, 50, 50, 0.1);
  border-radius: 10px;
}

::-webkit-scrollbar-thumb {
  background: linear-gradient(45deg, var(--primary-color), var(--secondary-color));
  border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(45deg, var(--secondary-color), var(--primary-color));
}