/* Color Scale Legend Components */
.color-scale-legend-inline {
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid #dee2e6;
  border-radius: 15px;
  padding: 6px 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

[data-theme="dark"] .color-scale-legend-inline {
  background: rgba(45, 50, 59, 0.9);
  border-color: #495057;
}

.scale-container {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
}

.scale-label {
  font-size: 11px !important;
  color: #6c757d !important;
  font-weight: 500 !important;
  white-space: nowrap !important;
}

[data-theme="dark"] .scale-label {
  color: #adb5bd !important;
}

.color-scale {
  display: flex !important;
  gap: 1px !important;
}

.color-block {
  width: 12px !important;
  height: 12px !important;
  border-radius: 2px !important;
  border: 1px solid rgba(0, 0, 0, 0.2) !important;
  display: inline-block !important;
}

[data-theme="dark"] .color-block {
  border-color: rgba(255, 255, 255, 0.3) !important;
}

/* Word Speed Color Classes */
.color-block.word-speed-fastest { background-color: #1e40af !important; }
.color-block.word-speed-very-fast { background-color: #3b82f6 !important; }
.color-block.word-speed-fast { background-color: #60a5fa !important; }
.color-block.word-speed-medium { background-color: #6b7280 !important; }
.color-block.word-speed-slow { background-color: #ff8080 !important; }
.color-block.word-speed-very-slow { background-color: #ff4040 !important; }
.color-block.word-speed-slowest { background-color: #ff0000 !important; }

[data-theme="dark"] .color-block.word-speed-fastest { background-color: #3b82f6 !important; }
[data-theme="dark"] .color-block.word-speed-very-fast { background-color: #60a5fa !important; }
[data-theme="dark"] .color-block.word-speed-fast { background-color: #93c5fd !important; }
[data-theme="dark"] .color-block.word-speed-medium { background-color: #9ca3af !important; }
[data-theme="dark"] .color-block.word-speed-slow { background-color: #ff9999 !important; }
[data-theme="dark"] .color-block.word-speed-very-slow { background-color: #ff6666 !important; }
[data-theme="dark"] .color-block.word-speed-slowest { background-color: #ff3333 !important; }