/* Public role markers: compact, stable geometry across skins and light/dark. */
.cie-role-badge {
    display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
    box-sizing: border-box; height: 20px; gap: 4px; padding: 0 6px;
    border: 1px solid transparent; border-radius: 5px;
    font-family: inherit; font-size: 10px; font-weight: 650; line-height: 18px;
    letter-spacing: .01em; white-space: nowrap; vertical-align: middle;
    text-shadow: none; text-transform: none;
}
.cie-role-badge[hidden] { display: none !important; }
.community-notification-name { display: inline-flex; align-items: center; gap: 4px; vertical-align: baseline; }
.cie-role-icon {
    display: inline-block; width: 11px; height: 11px; flex: 0 0 11px;
    background: currentColor;
    -webkit-mask: var(--role-icon) center / contain no-repeat;
    mask: var(--role-icon) center / contain no-repeat;
}
.cie-role-icon.is-shield { --role-icon: url('/static/assets/community/badge-shield.svg'); }
.cie-role-icon.is-sparkle { --role-icon: url('/static/assets/community/badge-sparkle.svg'); }
.cie-role-icon.is-diamond { --role-icon: url('/static/assets/community/badge-diamond.svg'); display: none; }

/* Original: clear red authority and warm champagne enamel. */
.cie-role-badge.is-admin {
    color: #fff; border-color: #b72337; background: linear-gradient(145deg, #dd3348, #b92339);
    box-shadow: inset 0 1px 0 rgb(255 255 255 / 16%);
}
.cie-role-badge.is-premium {
    color: #684213; border-color: #c9a362;
    background: linear-gradient(125deg, #f9e3b2, #fff2d3 47%, #ecd098);
    box-shadow: inset 0 1px 0 rgb(255 255 255 / 65%);
}
.cie-role-badge.is-free { color: #5c626b; background: #eef0f3; border-color: #e2e5e9; font-weight: 550; }
body.theme-dark .cie-role-badge.is-admin { color: #fff3f4; border-color: #b34857; background: linear-gradient(145deg, #8b2638, #6c1e2f); }
body.theme-dark .cie-role-badge.is-premium { color: #f4d493; border-color: #826b3d; background: linear-gradient(125deg, #3d3324, #51412a 48%, #332b20); box-shadow: inset 0 1px 0 rgb(250 212 150 / 10%); }
body.theme-dark .cie-role-badge.is-free { color: #b7bdc6; background: #303238; border-color: #41444b; }

/* Warm Paper: translucent garnet and a soft, low-gloss gold plaque. */
body.skin-warm-paper .cie-role-badge { border-radius: 6px; }
body.skin-warm-paper .cie-role-badge.is-admin { color: #a33b36; border-color: #ddb9b1; background: #f9eeea; box-shadow: inset 0 1px 0 #fff8; }
body.skin-warm-paper .cie-role-badge.is-premium { color: #805713; border-color: #ddc28a; background: linear-gradient(125deg, #fffaf0, #faf1dc); box-shadow: inset 0 1px 0 #fffc, 0 1px 3px #a47d2910; }
body.skin-warm-paper .cie-role-badge.is-free { color: #6d6b64; border-color: transparent; background: #efeee9; }
body.skin-warm-paper.theme-dark .cie-role-badge.is-admin { color: #f0b4a9; border-color: #765149; background: #40302d; box-shadow: inset 0 1px 0 #ffffff06; }
body.skin-warm-paper.theme-dark .cie-role-badge.is-premium { color: #e4c78d; border-color: #716143; background: linear-gradient(125deg, #39362c, #413a2e); box-shadow: inset 0 1px 0 #e4c78d0d; }
body.skin-warm-paper.theme-dark .cie-role-badge.is-free { color: #b5b6aa; border-color: transparent; background: #33372f; }

/* Liquid Glass: navy authority and black/gold membership. */
body.style-liquid-glass .cie-role-badge { border-radius: 6px; }
body.style-liquid-glass .cie-role-badge.is-admin { color: #ecf3ff; border-color: #49698e; background: linear-gradient(145deg, #2d4f79, #142a4b); box-shadow: inset 0 1px 0 #b7d6ff45, 0 1px 2px #172b4420; }
body.style-liquid-glass .cie-role-badge.is-premium { color: #edcf8c; border-color: #ba9452; background: linear-gradient(135deg, #363631, #1c1e20 65%, #262521); box-shadow: inset 0 1px 0 #f0d59830, 0 1px 2px #29241b20; }
body.style-liquid-glass .cie-role-badge.is-free { color: #566171; border-color: #c7cfda60; background: #e6eaf1b3; box-shadow: inset 0 1px 0 #ffffff70; }
body.style-liquid-glass .cie-role-icon.is-sparkle { display: none; }
body.style-liquid-glass .cie-role-icon.is-diamond { display: inline-block; }
body.style-liquid-glass.theme-dark .cie-role-badge.is-admin { color: #dbeaff; border-color: #54759d; background: linear-gradient(145deg, #263f61, #172943); box-shadow: inset 0 1px 0 #b7d6ff20; }
body.style-liquid-glass.theme-dark .cie-role-badge.is-premium { color: #f2d496; border-color: #b39053; background: linear-gradient(135deg, #37362e, #1b1e24 65%, #292820); box-shadow: inset 0 1px 0 #f0d59826; }
body.style-liquid-glass.theme-dark .cie-role-badge.is-free { color: #b7c3d5; border-color: #7990b32e; background: #7d8ba524; box-shadow: inset 0 1px 0 #ffffff09; }

@media (forced-colors: active) {
    .cie-role-badge { forced-color-adjust: auto; border: 1px solid currentColor !important; }
    .cie-role-icon { display: none !important; }
}