.builder-wrapper {
  width: 100%;
  max-width: 860px;
  background: #151820;
  border-radius: 16px;
  padding: 20px;
  box-shadow: 0 20px 50px rgba(0,0,0,0.5);
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* ================= CONTROLS ================= */

.controls-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.controls.left,
.controls.right {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.controls.left {
  flex: 1;
}

.controls.right {
  justify-content: flex-end;
}

button,
select {
  background: #2a2f3b;
  color: #fff;
  border: none;
  border-radius: 999px;
  padding: 10px 16px;
  font-weight: 600;
  cursor: pointer;
  font-size: 14px;
}

button:hover {
  background: #3a3f4b;
}

/* ================= TIMELINE ================= */

.timeline {
  display: flex;
  gap: 10px;
  padding: 12px;
  border-radius: 14px;
  border: 2px dashed #3a3f4b;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
}

.bar {
  display: flex;
  flex-direction: column;
  gap: 6px;
  scroll-snap-align: center;
}

.bar-number {
  text-align: center;
  font-size: 11px;
  color: var(--muted);
}

/* ================= SLOTS & BLOCKS ================= */

.slot,
.block {
  min-width: 96px;
  height: 56px;
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.slot {
  background: #1f2430;
  color: #555;
  font-size: 12px;
}

/* Timeline blocks */
.block {
  background: var(--accent-color);
  color: #000; /* strong contrast on orange */
  font-weight: 600;
  cursor: grab;
  user-select: none;
}

.block:active {
  cursor: grabbing;
}

.block.selected {
  outline: 2px solid #fff;
}

/* Replace feedback */
.block.replace-hover,
.slot.replace-hover {
  outline: 2px dashed #ffca28;
  box-shadow: 0 0 0 4px rgba(255,202,40,0.15);
}

/* ================= DOTS (HIGH CONTRAST VERSION) ================= */

.dots {
  display: flex;
  gap: 6px;
  margin-top: 4px;
}

/* Default dot */
.dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  opacity: 0.95;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}

/* Timeline (orange) blocks → black dots */
.timeline .block .dot {
  background: #000;
}

/* Accent dots in timeline → white for strong contrast */
.timeline .block .dot.accent {
  background: #fff;
}

/* Palette blocks (blue) → white dots */
.palette .block .dot {
  background: #fff;
}

/* Accent dots in palette → bright yellow */
.palette .block .dot.accent {
  background: #ffeb3b;
}

/* Active beat */
.dot.active {
  transform: scale(1.35);
  box-shadow: 0 0 8px #fff;
}

/* ================= PALETTE ================= */

.palette {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
}

.palette .block {
  background: #1e88e5;
  color: #fff;
}

.palette .dots {
  display: none;
}

/* ================= GROUPING LABEL ================= */

.grouping-label {
  font-size: 10px;
  opacity: 0.8;
  margin-top: 2px;
}

/* ================= MOBILE ================= */

@media (max-width: 600px) {
  .controls-row {
    flex-direction: column;
    align-items: stretch;
  }

  .controls.right {
    justify-content: center;
  }

  .slot,
  .block {
    min-width: 84px;
  }
}