:root {
  --color-red: #ef4444;
  --color-blue: #3b82f6;
  --color-green: #22c55e;
  --color-yellow: #facc15;
  --color-white: #ffffff;
  --color-black: #000000;
  --color-orange: #f97316;
  --color-purple: #a855f7;
  --color-cyan: #06b6d4;
  --color-pink: #ec4899;
  --color-brown: #92400e;
}


/* Peg styles */
.peg-slot {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  border: 2px dashed #4b5563;
  cursor: pointer;
  transition: transform 0.1s ease;
}
.peg-slot:hover {
  transform: scale(1.05);
}
.peg-color[data-color="red"]    { background-color: var(--color-red); }
.peg-color[data-color="blue"]   { background-color: var(--color-blue); }
.peg-color[data-color="green"]  { background-color: var(--color-green); }
.peg-color[data-color="yellow"] { background-color: var(--color-yellow); }
.peg-color[data-color="white"]  { background-color: var(--color-white); }
.peg-color[data-color="black"]  { background-color: var(--color-black); }
.peg-color[data-color="orange"] { background-color: var(--color-orange); }
.peg-color[data-color="purple"] { background-color: var(--color-purple); }
.peg-color[data-color="cyan"]   { background-color: var(--color-cyan); }
.peg-color[data-color="pink"]   { background-color: var(--color-pink); }
.peg-color[data-color="brown"]  { background-color: var(--color-brown); }


/* Feedback pegs */
.feedback-peg {
  width: 0.75rem;
  height: 0.75rem;
  border-radius: 50%;
  margin: 1px;
}
.feedback-peg.black { background-color: #000; }
.feedback-peg.white { background-color: #fff; border: 1px solid #ccc; }
.feedback-peg.empty { background-color: #374151; }

/* Toggle switch */
.toggle-switch {
  position: relative;
  display: inline-block;
  width: 50px;
  height: 24px;
}
.toggle-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}
.slider {
  position: absolute;
  cursor: pointer;
  top: 0; left: 0; right: 0; bottom: 0;
  background-color: #ccc;
  transition: .4s;
  border-radius: 24px;
}
.slider:before {
  position: absolute;
  content: "";
  height: 16px;
  width: 16px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  transition: .4s;
  border-radius: 50%;
}
input:checked + .slider {
  background-color: var(--color-green);
}
input:checked + .slider:before {
  transform: translateX(26px);
}