.decorated-avatar{position:relative;display:block;width:184px;height:184px;margin:8px auto 18px;flex:none}
.profile-identity .decorated-avatar{display:grid;place-items:center;margin:8px auto 18px}
.decorated-avatar .avatar,.profile-identity .decorated-avatar .avatar{width:152px;height:152px;object-fit:cover;border-radius:50%;border:2px solid #ffffff24;box-shadow:0 12px 40px #0007;margin:0}
.decorated-avatar>.avatar{position:absolute;left:16px;top:16px}
.decorated-avatar .avatar-decoration{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;pointer-events:none;z-index:2;border:0;border-radius:0;transition:filter .2s ease}
.decorated-avatar:hover .avatar-decoration{filter:brightness(1.06)}
.profile-identity .profile-name-row{display:flex;max-width:100%;margin:0 0 8px}
.profile-identity .profile-name-row h1{margin:0;line-height:1.2;overflow-wrap:anywhere;min-width:0}
.profile-badges{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px;max-width:100%;padding:4px;margin:0 auto 12px;min-width:0}
.profile-badges:empty{display:none}
/* Sem badge nenhum o perfil ainda manda uma quebra de linha (o include dos exclusivos), e o :empty não pega: sem filho, some também. */
.profile-badges:not(:has(*)){display:none}
.profile-badges .profile-badge{display:block;width:29px;height:29px;object-fit:contain;flex:0 0 29px;margin:0;transition:transform .2s ease,filter .2s ease}
.profile-badges .badge-tooltip:hover .profile-badge,.profile-badges .badge-tooltip:focus-visible .profile-badge,.profile-badges>.profile-badge:hover{transform:scale(1.1);filter:brightness(1.18) drop-shadow(0 0 7px #ffffff66)}
/* Etiquetas dos badges: o mesmo acabamento na entrada e no perfil. */
.badge-tooltip{
  --badge-tint:190,179,218;
  position:relative;display:inline-flex;align-items:center;justify-content:center;
  flex-shrink:0;border-radius:9px;cursor:default;isolation:isolate;
  -webkit-tap-highlight-color:transparent;
}
.badge-tooltip:hover,.badge-tooltip:focus-visible{z-index:20}
.badge-tooltip::before,.badge-tooltip::after{
  position:absolute;left:50%;opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .18s ease,translate .18s ease,visibility .18s;
}
.badge-tooltip::after{
  content:attr(data-label);bottom:calc(100% + 11px);z-index:2;
  width:max-content;max-width:min(190px,calc(100vw - 40px));padding:9px 13px;
  border:1px solid rgba(var(--badge-tint),.24);border-radius:12px;
  background:linear-gradient(145deg,rgba(var(--badge-tint),.1),transparent 70%),rgba(17,19,25,.96);
  color:#f1f3f9;box-shadow:0 8px 24px #0005,inset 0 1px 0 #ffffff0a;
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  white-space:normal;overflow-wrap:anywhere;text-align:center;
  font:600 11px/1.45 ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  letter-spacing:.01em;text-shadow:none;transform:translateX(-50%);translate:0 4px;
}
.badge-tooltip::before{
  content:"";bottom:calc(100% + 7px);z-index:3;width:8px;height:8px;
  background:#14171f;border-right:1px solid rgba(var(--badge-tint),.24);
  border-bottom:1px solid rgba(var(--badge-tint),.24);
  transform:translateX(-50%) rotate(45deg);translate:0 4px;
}
.badge-tooltip:hover::before,.badge-tooltip:hover::after,
.badge-tooltip:focus-visible::before,.badge-tooltip:focus-visible::after{
  opacity:1;visibility:visible;translate:0 0;
}
.badge-tooltip:focus-visible{outline:2px solid rgb(var(--badge-tint));outline-offset:4px}
.profile-badges .badge-tooltip{
  width:35px;height:35px;border:1px solid transparent;
  transition:background .18s ease,border-color .18s ease;
}
.profile-badges .badge-tooltip:hover,.profile-badges .badge-tooltip:focus-visible{
  background:#ffffff07;border-color:#ffffff12;
}
.profile-verified,.intro-verified{--badge-tint:104,185,255;vertical-align:middle}
.profile-verified{width:28px;height:28px}
.intro-verified{width:22px;height:22px;margin-left:7px;vertical-align:-.18em}
.profile-verified img,.intro-verified img{
  filter:drop-shadow(0 0 5px rgba(71,164,255,.2));
  transition:filter .18s ease,transform .18s ease;
}
.profile-verified:is(:hover,:focus-visible) img,.intro-verified:is(:hover,:focus-visible) img{
  filter:drop-shadow(0 0 7px rgba(71,164,255,.45));transform:scale(1.08);
}
.profile-name-row .admin-badge{top:0}
/* Um único cartão: prata para as badges comuns, dourado para as exclusivas. */
.badge-showcase { --badge-tint: 216,224,235; --badge-surface: #111317; --badge-text: #f0f4fa; --badge-label: #c3cedf; --badge-sparkle: #e8effb; }
.exclusive-profile-badge { --badge-tint: 247,209,129; --badge-surface: #13120f; --badge-text: #fff4d9; --badge-label: #e5c281; --badge-sparkle: #ffe7b2; }
.badge-showcase::before, .badge-showcase::after { display: none; }
.badge-showcase:is(:hover,:focus-within) {
  z-index: 30; border-color: rgba(var(--badge-tint),.4); background: rgba(var(--badge-tint),.07);
  box-shadow: 0 0 18px rgba(var(--badge-tint),.17);
}
.badge-showcase.db-badge-tile:is(:hover,:focus-within) {
  border-color: transparent; background: transparent; box-shadow: none;
}
.badge-showcase:is(:hover,:focus-within) > img {
  transform: scale(1.14); filter: brightness(1.16) drop-shadow(0 0 8px rgba(var(--badge-tint),.5));
}
.badge-presentation {
  position: absolute; bottom: calc(100% + 12px); left: 50%; z-index: 2;
  display: flex; flex-direction: column; align-items: center; gap: 9px;
  width: min(216px, calc(100vw - 32px)); padding: 22px 16px 18px;
  border: 1px solid rgba(var(--badge-tint),.33); border-radius: 16px;
  background: radial-gradient(ellipse at 50% 0, rgba(var(--badge-tint),.14), transparent 70%), var(--badge-surface);
  color: var(--badge-text); box-shadow: 0 14px 36px #0009, 0 0 30px rgba(var(--badge-tint),.07), inset 0 1px 0 rgba(var(--badge-tint),.08);
  text-align: center; overflow: hidden; pointer-events: none;
  opacity: 0; visibility: hidden; transform: translateX(-50%) translateY(6px) scale(.97);
  transition: opacity .2s, visibility .2s, transform .2s;
}
.badge-showcase:is(:hover,:focus-within) .badge-presentation {
  opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0) scale(1);
}
.badge-presentation::before {
  content: ''; position: absolute; inset: -80% -100%; pointer-events: none;
  background: linear-gradient(110deg, transparent 43%, rgba(var(--badge-tint),.08) 49%, transparent 55%);
}
.badge-showcase:is(:hover,:focus-within) .badge-presentation::before {
  animation: exclusive-shimmer 2.8s ease-in-out infinite;
}
.badge-presentation > img {
  position: relative; width: 48px; height: 48px; object-fit: contain;
  filter: drop-shadow(0 0 12px rgba(var(--badge-tint),.4));
}
.badge-showcase:is(:hover,:focus-within) .badge-presentation > img { transform: none; filter: drop-shadow(0 0 12px rgba(var(--badge-tint),.4)); }
.badge-presentation > small { font: 700 9px/1.5 ui-sans-serif,system-ui,sans-serif; letter-spacing: .15em; color: var(--badge-label); }
.badge-presentation > strong { max-width: 100%; font: 650 14px/1.4 ui-sans-serif,system-ui,sans-serif; overflow-wrap: anywhere; }
.badge-sparkles { position: absolute; inset: 0; pointer-events: none; }
.badge-sparkles i { position: absolute; color: var(--badge-sparkle); font-size: 14px; font-style: normal; text-shadow: 0 0 10px rgba(var(--badge-tint),.8); }
.badge-sparkles i:nth-child(1) { top: 18px; left: 25px; }
.badge-sparkles i:nth-child(2) { top: 48px; right: 22px; font-size: 20px; }
.badge-sparkles i:nth-child(3) { bottom: 22px; left: 18px; font-size: 10px; }
.badge-showcase:is(:hover,:focus-within) .badge-sparkles i { animation: exclusive-twinkle 1.8s ease-in-out infinite; }
.badge-showcase:is(:hover,:focus-within) .badge-sparkles i:nth-child(2) { animation-delay: -.6s; }
.badge-showcase:is(:hover,:focus-within) .badge-sparkles i:nth-child(3) { animation-delay: -1.2s; }
@keyframes exclusive-shimmer { 0% { translate: -25% 0; } 65%,100% { translate: 25% 0; } }
@keyframes exclusive-twinkle { 0%,100% { opacity: .3; scale: .8; } 50% { opacity: 1; scale: 1.15; } }
@media (prefers-reduced-motion: reduce) {
  .badge-presentation { transition: none; }
  .badge-showcase .badge-presentation::before,
  .badge-showcase .badge-sparkles i { animation: none !important; }
  .badge-showcase:is(:hover,:focus-within) > img { transform: none; }
}
@media(prefers-reduced-motion:reduce){
  .badge-tooltip,.badge-tooltip::before,.badge-tooltip::after,
  .profile-verified img,.intro-verified img{transition:none!important}
  .badge-tooltip::before,.badge-tooltip::after{translate:none}
  .profile-verified:is(:hover,:focus-visible) img,.intro-verified:is(:hover,:focus-visible) img{transform:none}
}
#realtimeProfileActions{width:100%;margin-top:4px}.profile-actions .profile-action-btn{flex:0 0 38px;line-height:1}.profile-action-btn>svg{display:block;flex:none;width:18px;height:18px}
.cosmetic-preview{padding:24px 12px;background:#08080b;border:1px solid #ffffff16;border-radius:18px;text-align:center;margin-bottom:24px}
.cosmetic-preview strong{display:block;font-size:24px;margin-bottom:10px;overflow-wrap:anywhere}.cosmetic-preview>small{display:block;color:#999;font-size:12px}
.cosmetic-options{display:grid;grid-template-columns:repeat(auto-fill,minmax(88px,1fr));gap:8px;max-height:400px;overflow:auto;padding:5px}
.cosmetic-option{position:relative;margin:0;cursor:pointer;min-width:0}.cosmetic-option input{position:absolute;left:8px;top:8px;width:14px;height:14px;margin:0;z-index:1;accent-color:#c6a5ff}
.cosmetic-option>span{display:flex;flex-direction:column;align-items:center;gap:8px;padding:24px 6px 10px;background:#ffffff04;border:1px solid #ffffff18;border-radius:12px;height:100%}
.cosmetic-option input:checked+span{border-color:#c6a5ff;background:#c6a5ff18}.cosmetic-option input:focus-visible+span{outline:2px solid white;outline-offset:2px}
.effect-mix-options[hidden]{display:none}
.effect-mix-options .cosmetic-option input:disabled+span{opacity:.45;cursor:not-allowed}
.cosmetic-option img,.no-decoration{width:52px;height:52px;object-fit:contain;transition:transform .2s ease}.no-decoration{display:grid;place-items:center;font-size:30px}
.cosmetic-option:hover img{transform:translateX(4px)}.cosmetic-option small{text-align:center;font-size:11px;overflow-wrap:anywhere}
.effect-setting-card:has(.cosmetic-preview){grid-column:1 / -1;grid-template-columns:minmax(0,1fr)}.cosmetic-preview [hidden]{display:none!important}
@media(prefers-reduced-motion:reduce){.cosmetic-option img,.avatar-decoration,.profile-badge{transition:none!important;transform:none!important;translate:none!important}}