.dual-list__panes { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 0.75rem; align-items: start; max-width: none; }
.dual-list__pane { display: flex; flex-direction: column; gap: 0.35rem; min-width: 0; }
/* Both panes get a header of the same height (the left one holds the filter box), so the two
   lists, and the buttons under them, line up. */
.dual-list__head { display: flex; align-items: center; gap: 0.6rem; height: 2.5rem; }
.dual-list__label { font-weight: 600; font-size: 0.875rem; white-space: nowrap; }
.dual-list__filter { flex: 1; min-width: 0; height: 2rem; padding: 0.25rem 0.6rem !important; font-size: 0.875rem !important; }
.dual-list__list { width: 100%; height: 13.5rem; padding: 0.25rem; font-size: 0.875rem; border: 1px solid var(--w-color-border-field-default, #ccc); border-radius: 4px; }
.dual-list__list option { padding: 0.15rem 0.35rem; border-radius: 3px; }
.dual-list__moves { display: flex; flex-direction: column; gap: 0.5rem; align-self: center; margin-top: 2.5rem; }
.dual-list__all { align-self: flex-start; }
.dual-list__hint { margin: 0.4rem 0 0; font-size: 0.8rem; color: var(--w-color-text-meta, #666); }
@media (max-width: 700px) {
  .dual-list__panes { grid-template-columns: 1fr; }
  .dual-list__moves { flex-direction: row; align-self: start; margin-top: 0; }
}
.dual-list__limit { margin: 0.2rem 0 0; font-size: 0.85rem; color: #b94a48; }
.dual-list__limit:empty { display: none; }