.customize-heading {
  margin-bottom: 26px;
}
.customize-heading h2 {
  margin: 10px 0 8px;
}
.customize-heading .muted {
  font-size: 12px;
}
.customize-group {
  border-top: 1px solid var(--line);
  padding: 0 0 10px;
}
.customize-group summary {
  cursor: pointer;
  padding: 22px 0;
  color: #e9e9ed;
  font-size: 12px;
}
.customize-group summary span {
  font-weight: 600;
}
.customize-group summary small {
  display: block;
  color: #97879f;
  font-size: 10px;
  margin: 6px 0 0 14px;
}
.customize-group[open] summary {
  margin-bottom: 6px;
}
.customize-group .panel-label {
  display: none;
}
.media-preview {
  height: 145px;
  background: #171719;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border: 1px dashed #57575b;
  border-radius: 10px;
  margin: 0 0 15px;
  display: grid;
  place-items: center;
}
.media-preview.has-image {
  border-style: solid;
}
.media-preview span {
  color: #a58eaf;
  font-size: 11px;
}
.banner-preview {
  height: 100px;
}
.custom-color-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 15px;
}
.custom-color-grid input {
  display: block;
  width: 100%;
  height: 40px;
  padding: 4px;
  margin-top: 9px;
  background: #1b1b1f;
  border: 1px solid #515155;
  border-radius: 7px;
}
.range-label {
  margin: 20px 0 25px;
}
.range-label output {
  float: right;
  color: var(--pink);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}
.range-label input[type="range"] {
  width: 100%;
  height: 22px;
  margin: 11px 0 0;
  padding: 0;
  border: 0;
  background: transparent;
  accent-color: var(--pink);
  box-shadow: none;
  cursor: pointer;
}
.preview-toolbar {
  display: flex;
  gap: 5px;
  margin: 0 0 12px;
}
.preview-toolbar button {
  font-size: 10px;
  border: 1px solid #3b3b3f;
  border-radius: 6px;
  padding: 8px 10px;
  background: transparent;
  color: #b9a8c5;
}
.preview-toolbar button[aria-pressed="true"] {
  background: #ef4b5413;
  border-color: #a94b54;
  color: #f2d5d7;
}
.preview-toolbar button:last-child {
  margin-left: auto;
}
.bio-stage.mobile-preview {
  max-width: 375px;
  margin-inline: auto;
}
.preview-dialog {
  width: min(1100px, 96vw);
  max-width: 96vw;
  height: 90svh;
  max-height: 90svh;
  padding: 0;
  border: 1px solid #72575b;
  border-radius: 16px;
  background: #09090d;
  color: #f4f1f7;
}
.preview-dialog::backdrop {
  background: #000c;
  backdrop-filter: blur(5px);
}
.preview-dialog .preview-close {
  position: absolute;
  top: 12px;
  right: 12px;
  margin: 0;
  z-index: 20;
  background: #131316ec;
}
.preview-dialog .bio-stage.public {
  min-height: 100%;
}
.preview-dialog .bio-stage.public > .bio-landscape,
.preview-dialog .bio-stage.public > .bio-dimmer,
.preview-dialog .bio-stage.public > .bio-ambient {
  position: absolute;
}
.bio-stage {
  --card-padding: 28px;
  color: var(--bio-text, #f4f1f7);
}
.bio-stage .bio-content,
.bio-stage.public .bio-content {
  width: min(calc(var(--card-width, 480px) + 36px), 100%);
  padding: 38px 18px;
}
.bio-stage .bio-card,
.bio-stage.public .bio-card {
  position: relative;
  padding: var(--card-padding);
  border-radius: var(--card-radius, 20px);
  background: var(--card-fill, color-mix(in srgb, var(--card-color, #100c16) var(--card-opacity, 70%), transparent));
  backdrop-filter: blur(var(--card-blur, 18px));
  -webkit-backdrop-filter: blur(var(--card-blur, 18px));
  border: var(--card-border-width, 1px) solid color-mix(in srgb, var(--card-border-color, var(--accent)) var(--card-border-opacity, 22%), transparent);
  box-shadow: 0 18px 65px color-mix(in srgb, var(--card-shadow-color, #000) var(--card-shadow-opacity, 0%), transparent);
  overflow: hidden;
}
.bio-stage.floating-card .bio-card {
  border-color: transparent;
  box-shadow: none;
}
.bio-stage.custom-background .bio-landscape {
  opacity: 1;
  background-color: #09090d;
}
.bio-stage.public > .bio-landscape,
.bio-stage.public > .bio-ambient,
.bio-stage.public > .bio-dimmer {
  position: fixed;
}
.bio-stage.custom-background .bio-ambient {
  background: none;
}
.bio-stage .bio-dimmer {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}
.bio-stage.custom-background.no-motion .bio-ambient::after {
  display: none;
}
.bio-banner {
  height: var(--banner-height, 150px);
  width: calc(100% + var(--card-padding) * 2);
  margin: calc(var(--card-padding) * -1) calc(var(--card-padding) * -1) 0;
  background: #241f20;
}
.bio-banner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.bio-stage.has-banner .bio-avatar {
  position: relative;
  margin-top: -38px;
  border: 3px solid var(--card-color);
  z-index: 1;
}
.bio-stage[data-avatar-shape="rounded"] .bio-avatar {
  border-radius: 20%;
}
.bio-stage[data-avatar-shape="square"] .bio-avatar {
  border-radius: 0;
}
.bio-stage .bio-name {
  color: var(--bio-text);
  text-shadow: 0 0 var(--name-glow, 0px) var(--accent);
}
.bio-stage .bio-description,
.bio-stage .bio-link,
.bio-stage .track-name {
  color: var(--bio-text);
}
.bio-stage .bio-handle,
.bio-stage .social-icon,
.bio-stage .play-button {
  color: var(--accent);
}
.bio-stage .bio-location,
.bio-stage .bio-link small,
.bio-stage .track-status,
.bio-stage .bio-music small {
  color: color-mix(in srgb, var(--bio-text) 70%, transparent);
}
.bio-stage .bio-link > span:last-child {
  color: var(--accent);
}
.bio-stage[data-link-style="outline"] .bio-link {
  background: transparent;
  border-color: color-mix(in srgb, var(--accent) 55%, transparent);
}
.bio-stage[data-link-style="icons"] .bio-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}
.bio-stage[data-link-style="icons"] .bio-link {
  width: 46px;
  height: 46px;
  padding: 8px;
  border: 0;
  background: transparent;
  justify-content: center;
}
.bio-stage[data-link-style="icons"] .bio-link > div,
.bio-stage[data-link-style="icons"] .bio-link > span:last-child {
  display: none;
}
.bio-stage[data-link-style="icons"] .social-icon {
  width: 32px;
  height: 32px;
  font-size: 27px;
  background: none;
  border-radius: 0;
}
.bio-stage .bio-entry {
  position: absolute;
  z-index: 10;
  inset: 0;
  width: 100%;
  min-height: 100%;
  border: 0;
  background: color-mix(in srgb, var(--card-color) 88%, transparent);
  backdrop-filter: blur(12px);
  color: var(--bio-text);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 35px;
  gap: 23px;
  border-radius: 0;
}
.bio-entry .entry-label {
  font-family: var(--profile-font), sans-serif;
  font-size: clamp(18px, 3vw, 28px);
  overflow-wrap: anywhere;
  max-width: 100%;
  text-shadow: 0 0 var(--name-glow, 0px) var(--accent);
}
.bio-entry small {
  font-size: 9px;
  letter-spacing: 3px;
  color: var(--accent);
}
.bio-stage.entry-open .bio-content {
  display: none;
}
.bio-stage .bio-avatar img {
  object-position: center;
}
@media (max-width: 680px) {
  .bio-stage {
    --card-padding: 24px;
  }
  .bio-stage .bio-content,
  .bio-stage.public .bio-content {
    padding: 28px 16px;
  }
  .preview-dialog {
    width: 96vw;
  }
}

.bio-roles {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  margin: 10px 0;
}
.bio-roles .bio-role {
  margin: 0;
}
.tag-search {
  display: flex;
  gap: 10px;
}
.tag-search input {
  min-width: 0;
  flex: 1;
}
.tag-search .btn {
  flex-shrink: 0;
}
.tag-member {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 20px 0;
}
.tag-member > strong {
  overflow-wrap: anywhere;
}
.tag-options {
  border: 0;
  padding: 0;
  margin: 0 0 20px;
  display: grid;
  gap: 10px;
}
.tag-options .tag-option {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px;
  border: 1px solid #ffffff14;
  border-radius: 14px;
  background: #ffffff03;
  cursor: pointer;
}
.tag-option:has(input:checked) {
  border-color: #ef4b5477;
  background: #ef4b540b;
}
.tag-option input {
  width: 18px;
  height: 18px;
  margin: 0;
  flex-shrink: 0;
  accent-color: #ef4b54;
}
.tag-option span {
  display: grid;
  gap: 5px;
}
.tag-option strong {
  color: #f7e3e4;
  font-size: 13px;
  letter-spacing: 0.08em;
}
.tag-option small {
  color: #a098a8;
  font-weight: 400;
  line-height: 1.5;
}
.tag-option:has(input:disabled) {
  opacity: 0.45;
  cursor: default;
}
.users-list {
  display: grid;
  gap: 10px;
  margin-top: 20px;
}
.user-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 15px 16px;
  border: 1px solid #ffffff12;
  border-radius: 14px;
  background: #ffffff03;
}
.user-row-main {
  min-width: 0;
  display: grid;
  gap: 6px;
}
.user-row-main strong {
  overflow-wrap: anywhere;
  color: #f7e3e4;
}
.user-row-main small {
  color: #958b9d;
}
.user-row-meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
}
.user-chip {
  color: #e6c1c3;
  border: 1px solid #ef4b5455;
  border-radius: 999px;
  padding: 4px 8px;
  font-size: 10px;
  letter-spacing: 0.06em;
  white-space: nowrap;
}
.banned-chip {
  color: #f0a9aa;
  border-color: #d66b7355;
}
.user-row-controls {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  width: 100%;
  padding-top: 8px;
  border-top: 1px solid #ffffff0d;
}
.user-inline-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-right: auto;
}
.user-inline-tags label {
  display: flex;
  align-items: center;
  gap: 5px;
  color: #aa9eae;
  font-size: 10px;
  letter-spacing: 0.04em;
}
.user-inline-tags input {
  accent-color: #ef4b54;
  margin: 0;
  width: 16px;
  height: 16px;
}
.user-save,
.user-ban {
  padding: 7px 10px;
  font-size: 10px;
}
.user-ban {
  color: #f0a9aa;
  border: 1px solid #d66b7355;
  background: transparent;
}
.user-ban:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
@media (max-width: 620px) {
  .user-row {
    align-items: flex-start;
    flex-direction: column;
  }
  .user-row-meta {
    justify-content: flex-start;
  }
  .user-row-controls {
    align-items: flex-start;
    flex-direction: column;
  }
}