/* Selos de membro (alpha.87): ícones ao lado do nome */
.mbs { display: inline-flex !important; align-items: center; gap: .18em; margin-left: .3em; vertical-align: -.12em; line-height: 1; white-space: nowrap; }
.mb { display: inline-grid !important; place-items: center; width: 1.05em; height: 1.05em; font-size: inherit; color: var(--mb, #3b82f6); filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .25)); transition: transform .15s; }
.mb svg { width: 100%; height: 100%; display: block; overflow: visible; }
.mb:hover { transform: scale(1.18) rotate(-4deg); }
.mb--banido, .mb--suspenso { filter: none; }
.mb-chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px 3px 4px; border-radius: 999px; background: color-mix(in srgb, var(--mb, #3b82f6) 14%, transparent); border: 1px solid color-mix(in srgb, var(--mb, #3b82f6) 40%, transparent); font-weight: 800; font-size: .82rem; }
.mb-chip .mb { font-size: 1.25rem; filter: none; }
@media (prefers-reduced-motion: reduce) { .mb { transition: none; } .mb:hover { transform: none; } }

/* Selo clicável + folha de informações */
.mb[data-badge-info] { cursor: pointer; transition: transform .15s ease; }
.mb[data-badge-info]:hover { transform: scale(1.12); }
.mb[data-badge-info]:focus-visible { outline: 2px solid var(--mb, var(--accent)); outline-offset: 2px; border-radius: 50%; }
.bi-backdrop { position: fixed; inset: 0; z-index: 1200; display: grid; align-items: end; justify-items: center; padding: 16px; background: rgba(8, 6, 16, .6); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); animation: bi-fade .18s ease; }
.bi-sheet { width: min(100%, 420px); display: grid; gap: 10px; justify-items: center; padding: 26px 22px 20px; border-radius: 28px; text-align: center; background: var(--surface); color: var(--text); border: 1px solid var(--border); box-shadow: 0 30px 70px -20px rgba(0, 0, 0, .6); animation: bi-up .24s cubic-bezier(.2, .9, .3, 1.2); }
.bi-icon { display: grid; place-items: center; width: 84px; height: 84px; border-radius: 50%; color: #fff; background: radial-gradient(circle at 30% 25%, color-mix(in srgb, var(--mb, #3b82f6) 70%, #fff), var(--mb, #3b82f6) 60%, color-mix(in srgb, var(--mb, #3b82f6) 60%, #000)); box-shadow: 0 14px 30px -12px var(--mb, #3b82f6); }
.bi-icon svg { width: 44px; height: 44px; }
.bi-kicker { margin: 4px 0 0; font-size: .75rem; font-weight: 800; letter-spacing: 0; text-transform: none; color: var(--text-muted); }
.bi-sheet h2 { margin: 0; font-size: 1.4rem; overflow-wrap: anywhere; }
.bi-sheet p { margin: 0; color: var(--text-soft); line-height: 1.5; overflow-wrap: anywhere; }
.bi-how { padding: 10px 14px; border-radius: 16px; background: var(--surface-2); font-size: .9rem; }
.bi-close { margin-top: 6px; min-height: 46px; width: 100%; border: 0; border-radius: 16px; font: inherit; font-weight: 800; cursor: pointer; background: var(--accent); color: var(--accent-contrast, #1a1203); }
@keyframes bi-fade { from { opacity: 0; } }
@keyframes bi-up { from { transform: translateY(30px) scale(.96); opacity: 0; } }
@media (min-width: 640px) { .bi-backdrop { align-items: center; } }
@media (prefers-reduced-motion: reduce) { .bi-backdrop, .bi-sheet { animation: none; } }

/* Lista de selos no cartão do perfil */
.mbl { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 8px; }
.mbl-item { width: 100%; display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 14px; border: 1px solid color-mix(in srgb, var(--mb, #3b82f6) 30%, var(--border)); background: color-mix(in srgb, var(--mb, #3b82f6) 8%, var(--surface)); color: var(--text); font: inherit; text-align: left; cursor: pointer; transition: transform .15s ease, border-color .2s ease; }
.mbl-item:hover { transform: translateY(-1px); border-color: var(--mb, #3b82f6); }
.mbl-item .mb { flex: none; }
.mbl-txt { min-width: 0; display: grid; gap: 2px; }
.mbl-txt strong { font-size: .92rem; }
.mbl-txt small { color: var(--muted); font-size: .8rem; line-height: 1.35; overflow-wrap: anywhere; }