.mm-current {
  display: flex; gap: 10px; justify-content: center; align-items: center;
  min-height: 56px;
}
.mm-slot {
  width: 46px; height: 46px; border-radius: 50%;
  border: 3px dashed var(--line); background: var(--surface);
  display: grid; place-items: center;
}
.mm-slot.filled { border-style: solid; box-shadow: var(--shadow-sm); }
.mm-slot .dot { width: 30px; height: 30px; border-radius: 50%; }

.mm-palette {
  display: flex; gap: 10px; flex-wrap: wrap; justify-content: center;
}
.mm-color {
  width: 46px; height: 46px; border-radius: 50%; border: 3px solid #fff;
  box-shadow: var(--shadow-sm); transition: transform .1s ease;
}
.mm-color:active { transform: scale(.9); }

.mm-history { display: flex; flex-direction: column; gap: 8px; }
.mm-row {
  display: flex; align-items: center; gap: 10px;
  background: var(--surface); border: 2px solid var(--line);
  border-radius: 14px; padding: 8px 12px;
}
.mm-row .pegs { display: flex; gap: 6px; }
.mm-row .peg { width: 24px; height: 24px; border-radius: 50%; box-shadow: inset 0 0 0 2px rgba(0,0,0,.06); }
.mm-row .fb { display: flex; gap: 4px; flex-wrap: wrap; margin-left: auto; max-width: 120px; }
.mm-row .pin { width: 14px; height: 14px; border-radius: 50%; }
.mm-row .pin.k { background: #2b2440; }
.mm-row .pin.w { background: #fff; border: 2px solid #b9b2d0; }

.help .mk { color: #2b2440; font-weight: 900; }
.help .mw { color: #b9b2d0; font-weight: 900; }