.appearance-picker { padding: 20px 24px; border-top: 1px solid #cbd5c5; background: #eef1e7; }
.pet-choices { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.pet-choices button { display: flex; align-items: center; justify-content: center; gap: 8px; background: #f8f7ef; border: 1px solid #d5ddcd; border-radius: 10px; padding: 8px 12px; color: #52674f; font: inherit; font-size: 12px; cursor: pointer; }
.pet-choices img { width: 50px; height: 60px; object-fit: contain; image-rendering: pixelated; }
.pet-choices button[aria-pressed="true"] { border-color: #6f8866; background: #dee8d4; box-shadow: inset 0 0 0 1px #6f8866; color: #30462e; }
.pond-choices { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 15px; }
.pond-choices > span { font-size: 11px; color: #687d60; margin-right: 8px; }
.pond-choices button { border: 1px solid #d0d9c7; background: transparent; border-radius: 20px; color: #65795e; padding: 7px 13px; font: inherit; font-size: 11px; cursor: pointer; }
.pond-choices button[aria-pressed="true"] { color: #fff; background: #526b4b; border-color: #526b4b; }
.appearance-picker button:focus-visible { outline: 3px solid #bd774f; outline-offset: 3px; }
@media (max-width:640px) {
  .appearance-picker { padding: 14px 10px; }
  .pet-choices { gap: 6px; }
  .pet-choices button { flex-direction: column; gap: 2px; padding: 8px 2px; font-size: 10px; }
  .pet-choices img { width: 50px; height: 60px; }
  .pond-choices { gap: 6px; }
  .pond-choices > span { width: 100%; margin-bottom: 3px; }
  .pond-choices button { font-size: 10px; padding: 7px 10px; }
}