.design-presets {
  margin-top: .6rem;
  border: 1px solid #bda184;
  border-radius: .25rem;
  background: #fbf2e6;
}
.design-presets summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 44px;
  padding: .55rem .75rem;
  font-size: .89rem;
  font-weight: 750;
  cursor: pointer;
}
.design-presets summary::-webkit-details-marker { display: none; }
.design-presets summary::after {
  content: '';
  width: .45rem;
  height: .45rem;
  margin: 0 .2rem .2rem .6rem;
  border: solid #72503b;
  border-width: 0 1.5px 1.5px 0;
  transform: rotate(45deg);
}
.design-presets[open] summary::after { transform: translateY(.22rem) rotate(225deg); }
.design-presets summary:hover { background: #eee0ce; }
.preset-body { padding: .65rem .75rem .8rem; border-top: 1px solid var(--line); }
.preset-body > .help { margin-top: 0; }
.preset-fields { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: .55rem; }
.preset-fields label { margin-top: .55rem; }
.preset-fields select { font: inherit; }
.preset-preview {
  margin: .65rem 0 0;
  padding: .6rem .7rem;
  border-left: 2px solid #b88e64;
  background: var(--paper);
  color: var(--brown);
  font-size: .88rem;
}
#apply-preset { margin-top: .65rem; }
#apply-preset:disabled { cursor: default; }
#preset-status { margin-top: .55rem; }
#preset-status:empty { display: none; }

@media (max-width: 480px) {
  .preset-fields { grid-template-columns: 1fr; }
}