.btn-group {
  margin-top: 12px;
}

#liveWPM {
  font-size: 1.5rem; /* Big and bold */
  font-weight: 700;
  color: #22c55e; /* Tailwind's green-500 */
  background: rgba(34, 197, 94, 0.1); /* Light green translucent background */
  padding: 2px 8px;
  border-radius: 12px;
  width: fit-content;
  margin: 15px auto;
  transition: color 0.3s ease, box-shadow 0.3s ease;
  user-select: none;
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}

/* Chart Styles */
#wpmChart,
#accuracyChart {
  height: 300px !important;
  width: 100% !important;
}

.chart-container {
  position: relative;
  margin: auto;
  height: 300px;
  width: 100%;
}