.onlevon-xp-pack {
  padding: 12px;
  margin-bottom: 14px;
}

.onlevon-xp-pack__title {
  font-weight: bold;
  margin-bottom: 6px;
}

.onlevon-xp-pack__hint {
  font-size: 11px;
  color: #333;
  line-height: 1.45;
  max-width: 720px;
  margin: 0 0 10px;
}

.onlevon-xp-pack__target-label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 11px;
  max-width: 420px;
  margin-bottom: 8px;
}

.onlevon-xp-pack__target {
  padding: 6px;
  font-size: 12px;
}

.onlevon-xp-pack__status {
  min-height: 16px;
  font-size: 11px;
  margin-bottom: 8px;
  color: #333;
}

.onlevon-xp-pack__status.is-busy {
  color: #0a246a;
}

.onlevon-xp-pack__status.is-ok {
  color: #0a7a2a;
}

.onlevon-xp-pack__status.is-err {
  color: #a00;
}

.onlevon-xp-pack__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(40px, 1fr));
  gap: 6px;
  max-height: 220px;
  overflow: auto;
  padding: 8px;
  background: #fff;
  border: 1px solid #aca899;
}

.onlevon-xp-pack__item {
  width: 40px;
  height: 40px;
  padding: 4px;
  margin: 0;
  border: 1px solid transparent;
  background: #ece9d8;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.onlevon-xp-pack__item:hover {
  border-color: #316ac5;
  background: #e3eefc;
}

.onlevon-xp-pack__item img {
  width: 28px;
  height: 28px;
  object-fit: contain;
  image-rendering: auto;
  pointer-events: none;
}