.chicken-style-controls {
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
}

.chicken-style-controls > button {
  min-height: 44px;
  white-space: nowrap;
}

.chicken-custom-charm[hidden],
.mod-workshop [hidden] {
  display: none;
}

.chicken-custom-charm {
  position: absolute;
  z-index: 1;
  pointer-events: none;
  filter: drop-shadow(0 2px 2px #10252b80);
}

.chicken-custom-charm > img,
.chicken-custom-charm > svg,
.mod-art-preview img,
.mod-art-preview svg,
.mod-list-art img,
.mod-list-art svg {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.mod-workshop {
  display: grid;
  gap: 12px;
}

#dialog-body .mod-workshop :is(p, h3, figure) {
  margin: 0;
}

.mod-maker,
.mod-import {
  display: grid;
  gap: 8px;
  border: 1px solid #eec77555;
  border-radius: 14px;
  background: #082f3b;
  padding: 12px;
}

.mod-maker-art {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(72px, 36%);
  align-items: center;
  gap: 12px;
}

.mod-form-fields {
  display: grid;
  gap: 5px;
  min-width: 0;
}

#dialog-body .mod-workshop label {
  display: block;
  margin: 0;
  color: var(--cream);
  font: 600 13px/1.4 system-ui, sans-serif;
}

.mod-workshop :is(input, select) {
  width: 100%;
  min-width: 0;
  min-height: 36px;
  padding: 6px;
  background: #061f29;
  color: var(--cream);
  border: 1px solid #91c4b780;
  border-radius: 7px;
  font: 14px/1.35 system-ui, sans-serif;
}

.mod-workshop input[type="color"] {
  max-width: 90px;
}

#dialog-body .mod-workshop small {
  margin: 0;
  color: var(--muted);
  font: 12px/1.45 system-ui, sans-serif;
}

.mod-art-preview {
  text-align: center;
  font: 12px/1.4 system-ui, sans-serif;
  color: var(--mint);
}

.mod-art-preview > span,
.mod-list-art {
  display: block;
  width: 54px;
  height: 54px;
  padding: 7px;
  border: 1px solid #f3ca7590;
  border-radius: 12px;
  background: radial-gradient(circle at center, #20545e, #0c2a35);
  margin: 0 auto 5px;
}

.mod-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.mod-actions button {
  min-height: 44px;
}

.mod-shortcuts button {
  border-color: #a5d1be62;
  color: var(--mint);
}

.mod-workshop .mod-feedback {
  min-height: 1.5em;
  color: var(--gold);
}

.mod-list {
  padding: 0;
  margin: 8px 0 0;
  list-style: none;
  display: grid;
  gap: 6px;
}

.mod-list > li {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  align-items: center;
  gap: 7px 10px;
  background: #113f48;
  border-radius: 9px;
  padding: 8px;
}

.mod-list-art {
  width: 38px;
  height: 38px;
  padding: 5px;
  margin: 0;
}

.mod-list strong {
  overflow-wrap: anywhere;
}

.mod-list .mod-actions {
  grid-column: 1 / -1;
}

.chicken-clothes {
  position: absolute;
  z-index: 0;
  pointer-events: none;
  filter: drop-shadow(0 2px 2px #10252b70);
}

.chicken-clothes[hidden] {
  display: none;
}

.chicken-clothes svg, .outfit-preview svg {
  display: block;
  width: 100%;
  height: 100%;
}