.avatar-picker { margin: 1.25rem 0; min-width: 0; }
.avatar-picker legend { font-size: 1rem; font-weight: 600; }
.avatar-options { display: grid; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: .5rem; max-height: 300px; overflow-y: auto; padding: .25rem; }
.avatar-option { position: relative; cursor: pointer; display: flex; justify-content: center; }
.avatar-option input { position: absolute; opacity: 0; width: 100%; height: 100%; cursor: pointer; }
.avatar-option img { border-radius: 50%; border: 3px solid transparent; object-fit: cover; }
.avatar-option input:checked + img { border-color: #237a43; box-shadow: 0 0 0 2px #fff; }
.avatar-option input:focus-visible + img { outline: 3px solid #17488e; outline-offset: 2px; }