.unicode-group {
  position: relative;
  display: inline-block;
  margin: 1px 1px;
}

.unicode-group-btn {
  background: #000; /* black background */
  color: #f0f0f0;
  border: none;
  padding: 6px 14px; /* slightly tighter padding */
  border-radius: 6px;
  cursor: pointer;
  font-family: inherit;
  font-size: 1.2em; /* larger text */
  margin-bottom: 0;
  line-height: 1; 
}

.unicode-group-panel {
  display: none;
  position: absolute;
  left: 110%;
  top: 0;
  background: #000;
  border-radius: 8px;
  box-shadow: 0 2px 8px #0007;
  padding: 6px;                 /* ↓ reduce padding */
  z-index: 10;
  min-width: 180px;
  max-width: 360px;
  grid-template-columns: repeat(5, 1fr);
  gap: 4px;                    /* ↓ tighter grid gap */
}

.unicode-group.open .unicode-group-panel {
  display: grid;
}

.unicode-group-panel.left {
  left: auto;
  right: 110%;
}