.medal-settings { min-width: 0; }
.medal-settings-layout { display: grid; grid-template-columns: minmax(0, 1fr) 180px; gap: 20px; align-items: start; }
.medal-settings-options { display: grid; gap: 18px; min-width: 0; }
.medal-choice-group { border: 0; padding: 0; margin: 0; min-width: 0; }
.medal-choice-group legend { margin-bottom: 8px; font-weight: 700; }
.medal-choice-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(88px, 1fr)); gap: 8px; }
.medal-choice { position: relative; display: grid; justify-items: center; gap: 6px; padding: 10px 4px; border: 1px solid #dce5df; border-radius: 12px; cursor: pointer; text-align: center; font-size: .8rem; background: #fff; color: #253b32; }
.medal-choice:hover { background: #f0f7f3; border-color: #16865b; }
.medal-choice:has(input:checked) { border-color: #16865b; background: #eaf6ee; box-shadow: inset 0 0 0 1px #16865b; }
.medal-choice:has(input:focus-visible) { outline: 3px solid #16865b; outline-offset: 3px; }
.medal-choice > .medal-choice-control { position: absolute; z-index: 1; top: 7px; right: 7px; width: 14px; height: 14px; pointer-events: auto; }
.medal-settings .medal-choice input { width: 100%; height: 14px; min-height: 0; padding: 0; margin: 0; accent-color: #16865b; cursor: pointer; }
.medal-choice:active { transform: translateY(1px); }
.medal-choice > span { pointer-events: none; }
.medal-choice-art { display: block; width: 38px; height: 38px; background: linear-gradient(135deg, #f7d774, #9a6c0a, #e8b830); border-radius: 50%; }
.medal-choice:has(input[name="medal_shape"]) .medal-choice-art { border-radius: 0; }
.medal-settings-preview { margin: 0; padding: 12px; border-radius: 16px; background: #f1f5f2; color: #253b32; text-align: center; }
.medal-settings-art { aspect-ratio: 1; display: grid; place-items: center; }
.medal-settings-art canvas { display: block; width: 100%; height: auto; }
.medal-settings-preview figcaption { min-height: 3em; margin-top: 10px; font-size: .82rem; overflow-wrap: anywhere; }
@media (max-width: 600px) {
  .medal-settings-layout { grid-template-columns: minmax(0, 1fr); }
  .medal-settings-preview { order: -1; width: min(100%, 180px); justify-self: center; box-sizing: border-box; }
}