.bed-bg {
  fill: #1a1f29;
  stroke: rgba(255,255,255,0.06);
  stroke-width: 0.3;
}
.slot-rect {
  fill: var(--slot-fill);
  stroke: var(--slot-stroke-empty);
  stroke-width: 0.3;
  cursor: pointer;
  transition: fill 0.15s, stroke 0.15s;
}
.slot-rect.occupied {
  stroke: var(--slot-stroke);
  fill: rgba(99,102,241,0.35);
}
.slot-rect.selected {
  stroke: #fbbf24;
  stroke-width: 0.6;
}
.slot-rect.drag-target {
  stroke: var(--accent);
  stroke-width: 0.6;
  stroke-dasharray: 1.2 0.8;
  fill: rgba(99,102,241,0.45);
}
.slot-label {
  fill: var(--text-muted);
  font-size: 2.5px;
  font-family: ui-monospace, SF Mono, Menlo, monospace;
  text-anchor: middle;
  dominant-baseline: middle;
  pointer-events: none;
  user-select: none;
}
.slot-label.occupied { fill: var(--text-main); font-weight: 600; }
/* Slots in a non-selected engrave group: still clickable + editable, just
   visually subdued so the active group stands out. */
.slot-label.inactive-group { fill: rgba(255,255,255,0.25); }
.slot-rect.inactive-group {
  fill: rgba(40,45,60,0.5);
  stroke: rgba(255,255,255,0.08);
}
.slot-rect.inactive-group.occupied {
  fill: rgba(40,45,60,0.75);
  stroke: rgba(255,255,255,0.15);
}
.slot-content-inactive {
  opacity: 0.3;
  filter: grayscale(0.7);
}
.row-divider {
  stroke: rgba(255,255,255,0.04);
  stroke-width: 0.2;
  stroke-dasharray: 1 1;
}
.row-band-label {
  fill: var(--text-muted);
  font-size: 2.2px;
  font-family: ui-monospace, SF Mono, Menlo, monospace;
  pointer-events: none;
  user-select: none;
}
.row-band-label.inactive { fill: rgba(255,255,255,0.25); }

/* Per-slot ON/OFF toggle (iOS-style) inside the bed preview. */
.slot-toggle { cursor: pointer; }
.slot-toggle-track {
  stroke: rgba(255,255,255,0.15);
  stroke-width: 0.1;
  transition: fill 0.15s;
}
.slot-toggle-track.on  { fill: var(--success); }
.slot-toggle-track.off { fill: rgba(0,0,0,0.55); }
.slot-toggle-knob {
  fill: #fff;
  stroke: rgba(0,0,0,0.15);
  stroke-width: 0.08;
  pointer-events: none;
}

/* A disabled (toggled-off) slot renders its content ghosted, and the slot
   rect itself gets a dashed outline so it's obvious at a glance. */
.slot-content-off { opacity: 0.25; }
.slot-rect.slot-off {
  stroke-dasharray: 0.8 0.8;
  stroke: rgba(255,255,255,0.25);
  fill: rgba(255,255,255,0.04);
}

/* Padlock color ring around an occupied slot (store order / manual pick). */
.slot-color-ring {
  fill: none;
  stroke-width: 0.7;
  pointer-events: none;
}

/* Brat Town text rendered inside a slot in the bed preview. */
.slot-text-real {
  fill: var(--text-main);
  font-family: 'Brat Town', sans-serif;
  text-anchor: middle;
  dominant-baseline: middle;
  pointer-events: none;
  user-select: none;
}