.theme-panel:has(.profile-hero) .profile-badge-list {
  max-height: min(52vh, 460px) !important;
  overflow-y: auto !important;
  overscroll-behavior: contain;
  scrollbar-color: #ab8248 #0b1c13;
}

.theme-panel:has(.profile-hero) .profile-badge-group {
  position: sticky;
  top: -9px;
  z-index: 1;
  margin: 5px 0 0 !important;
  padding: 7px 5px 4px !important;
  color: #e8c789 !important;
  background: #0a1c13 !important;
  font-size: .68rem !important;
  letter-spacing: .04em !important;
}

.theme-panel:has(.profile-hero) .profile-badge-retry {
  justify-self: start;
  padding: 5px 10px;
  border: 1px solid rgba(217, 171, 103, .5);
  border-radius: 8px;
  color: #f0d29a;
  background: #193023;
  cursor: pointer;
}

.theme-panel:has(.profile-hero) .profile-badge-item-icon {
  overflow: hidden;
}

/* Three distinct profile badges; the catalogue still opens by tapping them. */
.theme-panel:has(.profile-hero) .profile-badge-details > summary {
  min-height: 44px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.theme-panel:has(.profile-hero) .profile-badge-details > summary::after,
.theme-panel:has(.profile-hero) .profile-badge-count {
  content: none !important;
  display: none !important;
}

.theme-panel:has(.profile-hero) .profile-badge-preview {
  gap: 10px !important;
}

.theme-panel:has(.profile-hero) .profile-badge-preview-icon {
  width: 40px !important;
  height: 40px !important;
  flex-basis: 40px !important;
  border-width: 2px !important;
  font-size: 22px !important;
  box-shadow: inset 0 1px rgba(255, 255, 255, .12), 0 3px 8px rgba(0, 0, 0, .35) !important;
}

.theme-panel:has(.profile-hero) .profile-badge-item {
  grid-template-columns: 32px minmax(0, 1fr) auto !important;
}

.theme-panel:has(.profile-hero) .profile-badge-item-icon {
  width: 30px !important;
  height: 30px !important;
  flex-basis: 30px !important;
  font-size: 18px !important;
}

.theme-panel:has(.profile-hero) .profile-badge-progress {
  display: block !important;
  width: 76px;
  height: 5px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(175, 180, 151, .25);
}

.theme-panel:has(.profile-hero) .profile-badge-progress-fill {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #8ea653, #dfbd76);
}

.theme-panel:has(.profile-hero) .profile-badge-tiers {
  grid-column: 2 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  min-width: 0;
}

.theme-panel:has(.profile-hero) .profile-badge-tier {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 6px;
  border: 1px solid rgba(181, 193, 178, .25);
  border-radius: 999px;
  color: #aeb9ad;
  background: rgba(15, 29, 21, .8);
  font-size: .56rem;
  line-height: 1.1;
  max-width: 100%;
  white-space: normal;
  overflow-wrap: anywhere;
}

.theme-panel:has(.profile-hero) .profile-badge-tier-icon {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 21px;
  height: 21px;
  flex: 0 0 21px;
  border: 2px solid;
  border-radius: 50%;
  font-family: "Segoe UI Emoji", "Apple Color Emoji", sans-serif;
  font-size: 12px;
  line-height: 1;
}

.theme-panel:has(.profile-hero) .profile-badge-tier:not(.is-done) .profile-badge-tier-icon {
  opacity: .63;
}

.theme-panel:has(.profile-hero) .profile-badge-state {
  max-width: 108px;
  white-space: normal !important;
  overflow-wrap: anywhere;
  text-align: right;
}

.theme-panel:has(.profile-hero) .profile-badge-tier.is-next {
  border-color: rgba(218, 170, 95, .5);
  color: #e4c58c;
}

.theme-panel:has(.profile-hero) .profile-badge-tier.is-done {
  border-color: rgba(210, 167, 91, .75);
  color: #f2d69b;
  background: rgba(115, 77, 27, .35);
}

.theme-panel:has(.profile-hero) .profile-badge-item.tier-2,
.theme-panel:has(.profile-hero) .profile-badge-preview-icon.tier-2 {
  border-color: rgba(138, 198, 113, .75) !important;
}

.theme-panel:has(.profile-hero) .profile-badge-item.tier-3,
.theme-panel:has(.profile-hero) .profile-badge-preview-icon.tier-3 {
  border-color: rgba(249, 201, 103, .95) !important;
  box-shadow: 0 0 10px rgba(221, 167, 70, .35) !important;
}

/* Evolve the same emblem through bronze, green silver, and radiant gold. */
.theme-panel:has(.profile-hero) :is(.profile-badge-preview-icon, .profile-badge-item-icon, .profile-badge-tier-icon).tier-1 {
  position: relative !important;
  border-color: #c99b62 !important;
  background: radial-gradient(circle at 36% 25%, #8c704a, #304236 72%, #182a22) !important;
  box-shadow: inset 0 1px 2px rgba(255, 223, 164, .22), 0 2px 5px rgba(0, 0, 0, .3) !important;
}

.theme-panel:has(.profile-hero) :is(.profile-badge-preview-icon, .profile-badge-item-icon, .profile-badge-tier-icon).tier-2 {
  position: relative !important;
  border-color: #b4d1ab !important;
  background: radial-gradient(circle at 36% 25%, #80aa87, #315b43 58%, #142b27) !important;
  box-shadow: inset 0 1px 3px rgba(229, 255, 218, .3), 0 0 0 2px rgba(101, 156, 112, .24), 0 2px 7px rgba(0, 0, 0, .32) !important;
}

.theme-panel:has(.profile-hero) :is(.profile-badge-preview-icon, .profile-badge-item-icon, .profile-badge-tier-icon).tier-3 {
  position: relative !important;
  border-color: #f5d77e !important;
  background: radial-gradient(circle at 35% 22%, #e9ce8e, #a4722e 55%, #392d1d) !important;
  box-shadow: inset 0 1px 4px rgba(255, 246, 205, .55), 0 0 0 2px rgba(224, 169, 62, .35), 0 0 13px rgba(233, 181, 75, .42) !important;
}

.theme-panel:has(.profile-hero) :is(.profile-badge-preview-icon, .profile-badge-item-icon, .profile-badge-tier-icon).tier-2::before,
.theme-panel:has(.profile-hero) :is(.profile-badge-preview-icon, .profile-badge-item-icon, .profile-badge-tier-icon).tier-3::before {
  content: "";
  position: absolute;
  inset: 3px;
  border: 1px solid rgba(255, 249, 213, .65);
  border-radius: 50%;
  pointer-events: none;
}

.theme-panel:has(.profile-hero) :is(.profile-badge-preview-icon, .profile-badge-item-icon, .profile-badge-tier-icon).tier-3::after {
  content: "✦";
  position: absolute;
  top: 0;
  right: 0;
  color: #fff0b6;
  font-family: sans-serif;
  font-size: 9px;
  line-height: 1;
  text-shadow: 0 0 3px #fff4b9;
  pointer-events: none;
}

.theme-panel:has(.profile-hero) .profile-badge-tier-icon.tier-3::after {
  font-size: 6px !important;
}

.theme-panel:has(.profile-hero) .profile-badge-empty {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 0 12px;
  border: 1px solid rgba(217, 171, 103, .55);
  border-radius: 999px;
  color: #f0d29a;
  background: rgba(15, 38, 27, .85);
  font-size: .68rem;
  font-weight: 700;
}

.theme-panel:has(.profile-hero) .profile-badge-toggle {
  grid-column: 2 / -1;
  justify-self: end;
  min-height: 29px;
  padding: 4px 11px;
  border: 1px solid rgba(217, 171, 103, .65);
  border-radius: 999px;
  color: #f0d29a;
  background: rgba(27, 51, 35, .95);
  font-size: .62rem;
  font-weight: 700;
  cursor: pointer;
}

.theme-panel:has(.profile-hero) .profile-badge-toggle[aria-pressed="true"] {
  background: rgba(123, 76, 37, .8);
}

.theme-panel:has(.profile-hero) .profile-badge-toggle:focus-visible {
  outline: 2px solid #f3d495;
  outline-offset: 2px;
}

.theme-panel:has(.profile-hero) .profile-badge-toggle:disabled {
  opacity: .48;
  cursor: default;
}

.theme-panel:has(.profile-hero) .profile-badge-showcase-hint,
.theme-panel:has(.profile-hero) .profile-badge-save-error {
  color: #d7be8e;
  font-size: .61rem;
  line-height: 1.3;
}

.theme-panel:has(.profile-hero) .profile-badge-save-error {
  color: #f3aa94;
}

@media (max-width: 800px), (pointer: coarse) and (hover: none) {
  .theme-panel:has(.profile-hero) .profile-badge-details > summary {
    min-height: 38px !important;
  }
  .theme-panel:has(.profile-hero) .profile-badge-preview {
    gap: 8px !important;
  }
  .theme-panel:has(.profile-hero) .profile-badge-preview-icon {
    width: 36px !important;
    height: 36px !important;
    flex-basis: 36px !important;
    font-size: 20px !important;
  }
  .theme-panel:has(.profile-hero) .profile-badge-list {
    max-height: min(48vh, 360px) !important;
  }
  .theme-panel:has(.profile-hero) .profile-badge-item {
    grid-template-columns: 30px minmax(0, 1fr) !important;
  }
  .theme-panel:has(.profile-hero) .profile-badge-item-icon {
    width: 28px !important;
    height: 28px !important;
    flex-basis: 28px !important;
    font-size: 17px !important;
  }
  .theme-panel:has(.profile-hero) .profile-badge-meta {
    grid-column: 2;
    justify-items: start !important;
    display: flex !important;
    flex-wrap: wrap;
    gap: 3px 8px !important;
    white-space: normal !important;
  }
  .theme-panel:has(.profile-hero) .profile-badge-state {
    max-width: 100%;
    text-align: left;
  }
}


/* profile-badge-profile-overlay-20260927-2 */
.theme-panel:has(.profile-hero) .profile-badge-details[open] {
  position: absolute !important;
  top: 76px !important;
  right: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  z-index: 1000 !important;
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
  max-width: none !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 12px !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
  color: #e8e6d5 !important;
  background: linear-gradient(145deg, rgba(5, 19, 13, .99), rgba(12, 31, 21, .99)) !important;
  border: 1px solid rgba(217, 171, 103, .48) !important;
  border-top: 0 !important;
  border-radius: 0 0 18px 18px !important;
  box-shadow: 0 14px 34px rgba(0, 0, 0, .48) !important;
}

.theme-panel:has(.profile-hero) .profile-badge-details[open] > summary {
  display: none !important;
}

.theme-panel:has(.profile-hero) .profile-badge-list {
  display: flex !important;
  flex: 1 1 auto !important;
  flex-direction: column !important;
  gap: 12px !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 2px 3px 8px !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  box-sizing: border-box !important;
  overscroll-behavior: contain !important;
  scrollbar-color: #ab8248 #0b1c13 !important;
}

.theme-panel:has(.profile-hero) .profile-badge-list-heading {
  flex: 0 0 auto !important;
  margin: 0 !important;
  padding: 2px 0 0 !important;
  color: #f0d29a !important;
  font-size: 1rem !important;
  line-height: 1.3 !important;
}

.theme-panel:has(.profile-hero) .profile-badge-catalog-back,
.theme-panel:has(.profile-hero) .profile-badge-back {
  display: inline-flex !important;
  flex: 0 0 auto !important;
  align-items: center !important;
  justify-content: center !important;
  justify-self: start !important;
  min-width: 44px !important;
  min-height: 44px !important;
  width: fit-content !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 14px !important;
  color: #f0d29a !important;
  background: rgba(27, 49, 34, .9) !important;
  border: 1px solid rgba(217, 171, 103, .52) !important;
  border-radius: 999px !important;
  font: inherit !important;
  font-size: .82rem !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  cursor: pointer !important;
}

.theme-panel:has(.profile-hero) .profile-badge-catalog-back:hover,
.theme-panel:has(.profile-hero) .profile-badge-catalog-back:focus-visible,
.theme-panel:has(.profile-hero) .profile-badge-back:hover,
.theme-panel:has(.profile-hero) .profile-badge-back:focus-visible {
  color: #fff5df !important;
  background: rgba(217, 171, 103, .17) !important;
  border-color: #e7bb77 !important;
  outline: 2px solid rgba(242, 201, 120, .8) !important;
  outline-offset: 2px !important;
}

.theme-panel:has(.profile-hero) .profile-badge-category {
  display: grid !important;
  flex: 0 0 auto !important;
  gap: 7px !important;
  min-width: 0 !important;
  margin: 0 !important;
}

.theme-panel:has(.profile-hero) .profile-badge-group {
  position: static !important;
  margin: 0 !important;
  padding: 3px 2px !important;
  color: #e8c789 !important;
  background: transparent !important;
  font-size: .82rem !important;
  font-weight: 700 !important;
  letter-spacing: .04em !important;
}

.theme-panel:has(.profile-hero) .profile-badge-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 8px !important;
  min-width: 0 !important;
}

.theme-panel:has(.profile-hero) .profile-badge-item {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 94px !important;
  margin: 0 !important;
  padding: 9px 7px !important;
  box-sizing: border-box !important;
  color: #e8e6d5 !important;
  background: rgba(10, 28, 19, .78) !important;
  border: 1px solid rgba(217, 171, 103, .25) !important;
  border-radius: 12px !important;
  font: inherit !important;
  text-align: center !important;
  cursor: pointer !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  transition: border-color .16s ease, background .16s ease, transform .16s ease !important;
}

.theme-panel:has(.profile-hero) .profile-badge-item.is-earned {
  border-color: rgba(217, 171, 103, .48) !important;
}

.theme-panel:has(.profile-hero) .profile-badge-item:hover,
.theme-panel:has(.profile-hero) .profile-badge-item:focus-visible {
  border-color: rgba(238, 192, 111, .82) !important;
  background: rgba(217, 171, 103, .11) !important;
  outline: 2px solid rgba(242, 201, 120, .65) !important;
  outline-offset: 1px !important;
}

.theme-panel:has(.profile-hero) .profile-badge-item:active {
  transform: scale(.98) !important;
}

.theme-panel:has(.profile-hero) .profile-badge-item-icon {
  display: grid !important;
  flex: 0 0 34px !important;
  place-items: center !important;
  width: 34px !important;
  height: 34px !important;
  overflow: hidden !important;
  color: #f6d891 !important;
  border: 1px solid rgba(225, 190, 117, .7) !important;
  border-radius: 50% !important;
  font-family: "Segoe UI Emoji", "Apple Color Emoji", sans-serif !important;
  font-size: 19px !important;
  line-height: 1 !important;
}

.theme-panel:has(.profile-hero) .profile-badge-item.is-locked .profile-badge-item-icon {
  filter: grayscale(1) !important;
  opacity: .64 !important;
}

.theme-panel:has(.profile-hero) .profile-badge-name {
  display: -webkit-box !important;
  width: 100% !important;
  min-width: 0 !important;
  overflow: hidden !important;
  color: #f0d29a !important;
  font-size: .78rem !important;
  font-weight: 700 !important;
  line-height: 1.25 !important;
  overflow-wrap: anywhere !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 2 !important;
}

.theme-panel:has(.profile-hero) .profile-badge-state {
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  overflow: hidden !important;
  color: #bfc9ba !important;
  font-size: .68rem !important;
  line-height: 1.2 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.theme-panel:has(.profile-hero) .profile-badge-item.is-earned .profile-badge-state {
  color: #e6c17e !important;
}

.theme-panel:has(.profile-hero) .profile-badge-retry {
  flex: 0 0 auto !important;
  align-self: flex-start !important;
  min-height: 40px !important;
  padding: 7px 12px !important;
  color: #f0d29a !important;
  background: #193023 !important;
  border: 1px solid rgba(217, 171, 103, .5) !important;
  border-radius: 9px !important;
  cursor: pointer !important;
}

.theme-panel:has(.profile-hero) .profile-badge-detail {
  display: grid !important;
  flex: 1 1 auto !important;
  align-content: start !important;
  gap: 12px !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-width: none !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 2px 3px 8px !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  box-sizing: border-box !important;
  color: #e8e6d5 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  overscroll-behavior: contain !important;
  scrollbar-color: #ab8248 #0b1c13 !important;
}

.theme-panel:has(.profile-hero) .profile-badge-detail-hero {
  display: grid !important;
  grid-template-columns: 50px minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 11px !important;
  min-width: 0 !important;
}

.theme-panel:has(.profile-hero) .profile-badge-detail-icon {
  display: inline-grid !important;
  place-items: center !important;
  width: 48px !important;
  height: 48px !important;
  color: #f6d891 !important;
  border: 2px solid rgba(225, 190, 117, .72) !important;
  border-radius: 50% !important;
  font-family: "Segoe UI Emoji", "Apple Color Emoji", sans-serif !important;
  font-size: 25px !important;
  line-height: 1 !important;
}

.theme-panel:has(.profile-hero) .profile-badge-detail-icon.tier-1 {
  border-color: #c99b62 !important;
  background: radial-gradient(circle at 36% 25%, #8c704a, #304236 72%, #182a22) !important;
}

.theme-panel:has(.profile-hero) .profile-badge-detail-icon.tier-2 {
  border-color: #b4d1ab !important;
  background: radial-gradient(circle at 36% 25%, #80aa87, #315b43 58%, #142b27) !important;
}

.theme-panel:has(.profile-hero) .profile-badge-detail-icon.tier-3 {
  border-color: #f5d77e !important;
  background: radial-gradient(circle at 35% 22%, #e9ce8e, #a4722e 55%, #392d1d) !important;
  box-shadow: 0 0 12px rgba(233, 181, 75, .36) !important;
}

.theme-panel:has(.profile-hero) .profile-badge-detail-icon.is-locked {
  filter: grayscale(1) drop-shadow(0 1px 2px rgba(0,0,0,.25)) !important;
  opacity: .58 !important;
}

.theme-panel:has(.profile-hero) .profile-badge-detail-copy {
  display: grid !important;
  gap: 4px !important;
  min-width: 0 !important;
}

.theme-panel:has(.profile-hero) .profile-badge-detail-name {
  color: #f0d29a !important;
  font-size: .98rem !important;
  line-height: 1.2 !important;
}

.theme-panel:has(.profile-hero) .profile-badge-detail-description {
  color: #c1c9bc !important;
  font-size: .76rem !important;
  line-height: 1.35 !important;
}

.theme-panel:has(.profile-hero) .profile-badge-detail-status {
  color: #e4c58c !important;
  font-size: .7rem !important;
  line-height: 1.25 !important;
}

.theme-panel:has(.profile-hero) .profile-badge-detail-progress-card {
  display: grid !important;
  gap: 8px !important;
  padding: 10px !important;
  background: rgba(255, 255, 255, .035) !important;
  border: 1px solid rgba(217, 171, 103, .22) !important;
  border-radius: 10px !important;
}

.theme-panel:has(.profile-hero) .profile-badge-detail-progress-heading {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
  color: #c5cbbb !important;
  font-size: .72rem !important;
}

.theme-panel:has(.profile-hero) .profile-badge-detail-progress-heading strong {
  color: #f0d29a !important;
  text-align: right !important;
}

.theme-panel:has(.profile-hero) .profile-badge-detail-progress {
  display: block !important;
  width: 100% !important;
  height: 7px !important;
  overflow: hidden !important;
  background: rgba(175, 180, 151, .25) !important;
  border-radius: 999px !important;
}

.theme-panel:has(.profile-hero) .profile-badge-progress-fill {
  display: block !important;
  height: 100% !important;
  border-radius: inherit !important;
  background: linear-gradient(90deg, #a9793e, #f0cf84) !important;
}

.theme-panel:has(.profile-hero) .profile-badge-tier-section {
  display: grid !important;
  gap: 7px !important;
  min-width: 0 !important;
}

.theme-panel:has(.profile-hero) .profile-badge-stage-heading {
  margin: 0 !important;
  color: #e6c17e !important;
  font-size: .8rem !important;
  letter-spacing: .04em !important;
}

.theme-panel:has(.profile-hero) .profile-badge-stage-list {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 7px !important;
  min-width: 0 !important;
}

.theme-panel:has(.profile-hero) .profile-badge-stage {
  display: grid !important;
  grid-template-rows: 30px minmax(2.5em, 1fr) auto !important;
  justify-items: center !important;
  align-items: center !important;
  gap: 5px !important;
  min-width: 0 !important;
  min-height: 106px !important;
  padding: 8px 5px !important;
  box-sizing: border-box !important;
  background: rgba(255, 255, 255, .035) !important;
  border: 1px solid rgba(217, 171, 103, .24) !important;
  border-radius: 10px !important;
  text-align: center !important;
}

.theme-panel:has(.profile-hero) .profile-badge-tier-icon {
  display: grid !important;
  place-items: center !important;
  width: 28px !important;
  height: 28px !important;
  color: #f6d891 !important;
  border: 1px solid rgba(225, 190, 117, .58) !important;
  border-radius: 50% !important;
  font-family: "Segoe UI Emoji", "Apple Color Emoji", sans-serif !important;
  font-size: 17px !important;
  line-height: 1 !important;
}

.theme-panel:has(.profile-hero) .profile-badge-stage.is-done {
  border-color: rgba(217, 171, 103, .55) !important;
  background: rgba(217, 171, 103, .09) !important;
}

.theme-panel:has(.profile-hero) .profile-badge-stage.is-next {
  border-color: rgba(183, 193, 148, .5) !important;
}

.theme-panel:has(.profile-hero) .profile-badge-stage.is-locked,
.theme-panel:has(.profile-hero) .profile-badge-stage.is-unknown {
  opacity: .72 !important;
}

.theme-panel:has(.profile-hero) .profile-badge-stage-name {
  min-width: 0 !important;
  color: #ead9b8 !important;
  font-size: .74rem !important;
  line-height: 1.2 !important;
  overflow-wrap: anywhere !important;
}

.theme-panel:has(.profile-hero) .profile-badge-stage-status {
  max-width: 100% !important;
  color: #b7c2b6 !important;
  font-size: .63rem !important;
  line-height: 1.15 !important;
  overflow-wrap: anywhere !important;
  text-align: center !important;
}

.theme-panel:has(.profile-hero) .profile-badge-stage.is-done .profile-badge-stage-status,
.theme-panel:has(.profile-hero) .profile-badge-stage.is-next .profile-badge-stage-status {
  color: #f0d29a !important;
}

.theme-panel:has(.profile-hero) .profile-badge-detail .profile-badge-toggle {
  justify-self: start !important;
  min-width: 96px !important;
  min-height: 44px !important;
  font-size: .78rem !important;
}

.theme-panel:has(.profile-hero) .profile-badge-save-error,
.theme-panel:has(.profile-hero) .profile-badge-showcase-hint {
  flex: 0 0 auto !important;
  color: #d7c49f !important;
  font-size: .72rem !important;
  line-height: 1.35 !important;
}

@media (max-width: 800px), (pointer: coarse) and (hover: none) {
  .theme-panel:has(.profile-hero) .profile-badge-details[open] {
    padding: 10px !important;
  }

  .theme-panel:has(.profile-hero) .profile-badge-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 7px !important;
  }

  .theme-panel:has(.profile-hero) .profile-badge-item {
    min-height: 88px !important;
    padding: 8px 5px !important;
  }

  .theme-panel:has(.profile-hero) .profile-badge-item-icon {
    flex-basis: 31px !important;
    width: 31px !important;
    height: 31px !important;
    font-size: 18px !important;
  }

  .theme-panel:has(.profile-hero) .profile-badge-name {
    font-size: .74rem !important;
  }

  .theme-panel:has(.profile-hero) .profile-badge-detail-hero {
    grid-template-columns: 46px minmax(0, 1fr) !important;
    gap: 9px !important;
  }

  .theme-panel:has(.profile-hero) .profile-badge-detail-icon {
    width: 44px !important;
    height: 44px !important;
    font-size: 23px !important;
  }

  .theme-panel:has(.profile-hero) .profile-badge-stage-list {
    gap: 5px !important;
  }

  .theme-panel:has(.profile-hero) .profile-badge-stage {
    min-height: 102px !important;
    padding: 7px 4px !important;
  }
}

@media (max-width: 480px) {
  .theme-panel:has(.profile-hero) .profile-badge-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  .theme-panel:has(.profile-hero) .profile-badge-item {
    min-height: 90px !important;
    padding: 9px 7px !important;
  }

  .theme-panel:has(.profile-hero) .profile-badge-stage {
    grid-template-rows: 28px minmax(2.3em, 1fr) auto !important;
    min-height: 98px !important;
  }

  .theme-panel:has(.profile-hero) .profile-badge-stage-name {
    font-size: .7rem !important;
  }
}


/* profile-badge-native-panel-scroll-20260927-3 */
.theme-panel:has(.profile-hero) .profile-badge-details[open] {
  display: block !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior-y: contain !important;
  -webkit-overflow-scrolling: touch !important;
  touch-action: pan-y !important;
}

.theme-panel:has(.profile-hero) .profile-badge-list {
  flex: 0 0 auto !important;
  height: auto !important;
  min-height: auto !important;
  overflow: visible !important;
  touch-action: pan-y !important;
}

.theme-panel:has(.profile-hero) .profile-badge-detail {
  flex: 0 0 auto !important;
  height: auto !important;
  min-height: auto !important;
  overflow: visible !important;
  touch-action: pan-y !important;
}


/* profile-badge-three-showcase-slots-20260927-1 */
.theme-panel:has(.profile-hero) .profile-badge-catalog-tools {
  display: flex !important;
  flex: 0 0 auto !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
  width: 100% !important;
  min-width: 0 !important;
}

.theme-panel:has(.profile-hero) .profile-badge-catalog-selected {
  display: grid !important;
  flex: 0 1 auto !important;
  justify-items: center !important;
  gap: 4px !important;
  min-width: 0 !important;
}

.theme-panel:has(.profile-hero) .profile-badge-slots-heading {
  color: #e6c17e !important;
  font-size: .67rem !important;
  font-weight: 700 !important;
  line-height: 1.15 !important;
  text-align: center !important;
}

.theme-panel:has(.profile-hero) .profile-badge-preview.profile-badge-slots {
  display: grid !important;
  grid-template-columns: repeat(3, 40px) !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 5px !important;
  width: max-content !important;
  max-width: 100% !important;
  margin: 0 !important;
}

.theme-panel:has(.profile-hero) .profile-badge-slot {
  position: relative !important;
  display: grid !important;
  place-items: center !important;
  width: 40px !important;
  height: 40px !important;
  box-sizing: border-box !important;
  color: #e6c17e !important;
  background: rgba(7, 22, 15, .84) !important;
  border: 1px solid rgba(217, 171, 103, .48) !important;
  border-radius: 11px !important;
  box-shadow: inset 0 1px rgba(255, 255, 255, .05) !important;
}

.theme-panel:has(.profile-hero) .profile-badge-slot.is-empty {
  border-style: dashed !important;
  border-color: rgba(217, 171, 103, .36) !important;
  background: rgba(255, 255, 255, .025) !important;
}

.theme-panel:has(.profile-hero) .profile-badge-slot.is-empty::after {
  content: "+" !important;
  color: rgba(230, 193, 126, .72) !important;
  font-size: 1.1rem !important;
  font-weight: 400 !important;
  line-height: 1 !important;
}

.theme-panel:has(.profile-hero) .profile-badge-slot.is-filled {
  border-color: rgba(239, 198, 123, .76) !important;
  background: linear-gradient(145deg, rgba(38, 59, 39, .95), rgba(13, 30, 20, .96)) !important;
  box-shadow: inset 0 1px rgba(255, 255, 255, .1), 0 3px 8px rgba(0, 0, 0, .24) !important;
}

.theme-panel:has(.profile-hero) .profile-badge-slots .profile-badge-preview-icon {
  display: inline-grid !important;
  place-items: center !important;
  width: 29px !important;
  height: 29px !important;
  flex: 0 0 29px !important;
  border-width: 1px !important;
  font-size: 17px !important;
  box-shadow: inset 0 1px rgba(255, 255, 255, .1), 0 2px 5px rgba(0, 0, 0, .28) !important;
}

.theme-panel:has(.profile-hero) .profile-badge-details > summary .profile-badge-profile-slots {
  flex: 0 0 auto !important;
}

@media (max-width: 480px) {
  .theme-panel:has(.profile-hero) .profile-badge-catalog-tools {
    gap: 6px !important;
  }

  .theme-panel:has(.profile-hero) .profile-badge-preview.profile-badge-slots {
    grid-template-columns: repeat(3, 36px) !important;
    gap: 4px !important;
  }

  .theme-panel:has(.profile-hero) .profile-badge-slot {
    width: 36px !important;
    height: 36px !important;
    border-radius: 10px !important;
  }

  .theme-panel:has(.profile-hero) .profile-badge-slots .profile-badge-preview-icon {
    width: 27px !important;
    height: 27px !important;
    flex-basis: 27px !important;
    font-size: 16px !important;
  }

  .theme-panel:has(.profile-hero) .profile-badge-slots-heading {
    font-size: .62rem !important;
  }
}