.ub-badge-preview { display: block; color: inherit; }
.ub-badge-heading { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.ub-badge-heading h2 { margin: 0; font-size: 21px; }
.ub-badge-heading span { font-size: 13px; white-space: nowrap; }
.ub-badge-preview-grid, .ub-badge-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.ub-badge-preview-grid { margin-top: 18px; }
.ub-badge-preview-grid img { max-width: 110px; margin: 0 auto; }
.ub-badge-preview-grid > :nth-child(n+4) { display: none; }
.ub-badge-item { min-width: 0; text-align: center; }
.ub-badge-item img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: contain; }
.ub-badge-item.is-locked img { filter: grayscale(1); opacity: .45; }
.ub-badge-item small { display: block; font-size: 11px; line-height: 1.35; color: inherit; }
.ub-badge-grid { gap: 20px 12px; margin: 20px 0; }
button.ub-badge-item { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; border: 0; background: transparent; padding: 4px; color: inherit; border-radius: 12px; font: inherit; }
.ub-badge-item strong { display: block; width: 100%; min-height: 2.8em; font-size: 12px; line-height: 1.4; margin: 4px 0; }
.ub-badge-item:focus-visible, .ub-badge-preview:focus-visible { outline: 3px solid #f58a25; outline-offset: 4px; }
.ub-badge-status { margin: 12px 0 0; font-size: 13px; line-height: 1.5; }
.ub-badge-dialog { border: 0; border-radius: 24px; padding: 24px; width: calc(100% - 32px); max-width: 390px; max-height: 90vh; overflow: auto; color: #202124; background: #fff; text-align: center; }
.ub-badge-dialog::backdrop { background: rgb(0 0 0 / .5); }
.ub-badge-dialog img { width: 180px; max-width: 65%; height: auto; aspect-ratio: 1; object-fit: contain; }
.ub-badge-dialog h2 { font-size: 23px; }
.ub-badge-dialog p { line-height: 1.6; }
.ub-badge-dialog progress { display: block; width: 100%; accent-color: #f58a25; margin: 12px 0; }
.ub-badge-dialog [hidden] { display: none; }
.ub-badge-dialog button { border: 0; border-radius: 12px; padding: 12px 24px; background: #f15a24; color: #fff; font-weight: 700; }
.theme-dark .ub-badge-dialog { background: #252525; color: #fff; }
@media (min-width: 390px) {
    .ub-badge-preview-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .ub-badge-preview-grid > :nth-child(4) { display: block; }
}
@media (min-width: 600px) {
    .ub-badge-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}