.level-badge {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    vertical-align: middle;
    --badge-color: #ac6938;
    --badge-edge: #98592d;
    --badge-highlight: #fff0d7;
    --badge-face: #e5ad77;
    --badge-shade: #bc7b46;
    --badge-shadow: rgba(112, 64, 29, .22);
}
.level-badge--silver {
    --badge-color: #8293a7;
    --badge-edge: #71859b;
    --badge-highlight: #f8fcff;
    --badge-face: #cbd9e7;
    --badge-shade: #95abc1;
    --badge-shadow: rgba(53, 77, 104, .20);
}
.level-badge--gold {
    --badge-color: #d1a016;
    --badge-edge: #af7e16;
    --badge-highlight: #fff8d3;
    --badge-face: #f8d46c;
    --badge-shade: #d4a22c;
    --badge-shadow: rgba(133, 91, 13, .22);
}
.level-badge__art { display: block; position: relative; width: 110px; height: 92px; color: var(--badge-color); }
.level-badge__star {
    position: absolute;
    filter: drop-shadow(0 2px 1px var(--badge-shadow));
    --star-shape: polygon(50% 2%, 64% 33%, 98% 38%, 74% 62%, 80% 96%, 50% 80%, 20% 96%, 26% 62%, 2% 38%, 36% 33%);
}
.level-badge__star::before, .level-badge__star::after {
    content: "";
    position: absolute;
    inset: 0;
    clip-path: var(--star-shape);
}
.level-badge__star::before { background: var(--badge-edge); }
.level-badge__star::after {
    inset: 2px;
    background: linear-gradient(145deg, var(--badge-highlight) 8%, var(--badge-face) 49%, var(--badge-shade) 100%);
}
.level-badge__star--left::after, .level-badge__star--right::after { inset: 1.3px; }
.level-badge__star--main { width: 56px; height: 56px; left: 27px; top: 24px; }
.level-badge__star--left, .level-badge__star--right { width: 31px; height: 31px; top: 61px; }
.level-badge__star--left { left: 0; }
.level-badge__star--right { right: 0; }
.level-badge__milestone {
    position: absolute;
    left: 40px;
    top: 85px;
    width: 30px;
    height: 4px;
    border-radius: 2px;
    box-sizing: border-box;
    border: 1px solid var(--badge-edge);
    background: linear-gradient(145deg, var(--badge-highlight) 8%, var(--badge-face) 49%, var(--badge-shade) 100%);
    box-shadow: 0 2px 1px var(--badge-shadow);
}
.level-badge__crown { position: absolute; width: 34px; height: 24px; left: 38px; top: 0; }
.level-badge__crown { filter: drop-shadow(0 1px 1px var(--badge-shadow)); overflow: visible; }
.level-badge__crown path { fill: var(--badge-face); stroke: var(--badge-edge); stroke-width: 1.2; stroke-linejoin: round; }
.level-badge__number { font-size: .875rem; font-weight: 600; margin-top: 4px; color: var(--bs-body-color, #212529); }
.level-badge--compact .level-badge__art { zoom: .55; }
.sidebar-level .level-badge__art { zoom: .275; }
.member-avatar { width: 60px; height: 60px; }
.member-card-slot { padding-top: 24px; }
.member-card__role {
    position: absolute;
    bottom: 90%;
    left: -1px;
    margin-bottom: -1px;
    padding: 4px 16px 3px;
    border: 1px solid #e1e6ec;
    border-bottom: 0;
    border-radius: 9px 9px 0 0;
    background: linear-gradient(to bottom, #f3f5f8, var(--bs-body-bg, #fff));
    color: var(--bs-secondary-color, #606b78);
    font-size: .75rem;
    line-height: 16px;
    font-weight: 600;
    z-index: 1;
}
[data-bs-theme="dark"] .member-card__role {
    border-color: #58616c;
    background: linear-gradient(to bottom, #303842, var(--bs-body-bg, #212529));
}
.member-card {
    border: 1px solid transparent;
    background: linear-gradient(var(--bs-body-bg, #fff), var(--bs-body-bg, #fff)) padding-box,
                linear-gradient(to bottom, #edf0f4, #bcc5cf) border-box;
}
[data-bs-theme="dark"] .member-card {
    background: linear-gradient(var(--bs-body-bg, #212529), var(--bs-body-bg, #212529)) padding-box,
                linear-gradient(to bottom, #58616c, #363e48) border-box;
}
.member-card > .card-body { padding-right: 64px; }
.member-card__badge {
    position: absolute;
    right: 10px;
    top: 8px;
    z-index: 1;
    line-height: 0;
    pointer-events: none;
    filter: drop-shadow(0 0 1px #000) drop-shadow(0 1px 1px rgba(0, 0, 0, .25));
}
.member-card__badge .level-badge__art { zoom: .38; }
[data-bs-theme="dark"] .level-badge { --badge-color: #dca36d; }
[data-bs-theme="dark"] .level-badge--silver { --badge-color: #becfe2; }
[data-bs-theme="dark"] .level-badge--gold { --badge-color: #eaca69; }