.avatar-preset-group {
  grid-column: 1 / -1;
  flex: 0 0 100%;
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  border: 1px solid var(--border-default, #393047);
  border-radius: 12px;
  background: var(--bg-elevated, #131218);
}
.avatar-preset-group[hidden] { display: none; }
.avatar-preset-group > summary {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 52px;
  padding: 10px 16px;
  box-sizing: border-box;
  list-style: none;
  cursor: pointer;
  color: var(--text-primary, #f3f0f7);
  font-size: 14px;
}
.avatar-preset-group > summary::-webkit-details-marker { display: none; }
.avatar-preset-group > summary:focus-visible { outline: 2px solid #a78bfa; outline-offset: 3px; border-radius: 10px; }
.avatar-preset-heading { font-weight: 600; white-space: nowrap; }
.avatar-preset-count { margin-left: 6px; color: var(--text-secondary, #aaa1b7); font-weight: 400; }
.avatar-preset-selected { min-width: 0; margin-left: auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #c4afd9; font-size: 12px; }
.avatar-preset-toggle { margin-left: auto; color: #c4afd9; font-size: 13px; white-space: nowrap; }
.avatar-preset-chevron { width: 7px; height: 7px; border-right: 1.5px solid #c4afd9; border-bottom: 1.5px solid #c4afd9; transform: rotate(45deg); margin: -4px 2px 0 0; }
.avatar-preset-group[open] > summary { border-bottom: 1px solid var(--border-default, #393047); }
.avatar-preset-group[open] .avatar-preset-chevron { transform: rotate(225deg); margin-top: 4px; }
.avatar-preset-items { padding: 12px; box-sizing: border-box; }
.avatar-preset-library { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-start; }