.gkm-supporter-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    gap: 4px;
    max-width: 100%;
    padding: 3px 7px;
    border: 1px solid #e3cc94;
    border-radius: 6px;
    background: #faf3e2;
    color: #765817;
    font-family: inherit;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: 0;
    white-space: nowrap;
    vertical-align: middle;
    box-sizing: border-box;
}
.header-user-section .gkm-supporter-badge { padding: 2px 5px; font-size: 10px; }
.gkm-member-badges { display: inline-flex; align-items: center; flex: 0 0 auto; gap: 5px; white-space: nowrap; vertical-align: middle; }
.gkm-grade-badge { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; gap: 4px; padding: 3px 7px; border: 1px solid #d8e2ed; border-radius: 6px; background: #edf2f7; color: #596f89; font-family: inherit; font-size: 11px; font-weight: 700; line-height: 1.4; letter-spacing: 0; white-space: nowrap; vertical-align: middle; box-sizing: border-box; }
.gkm-grade--apprentice { background: #faf5e9; color: #80652b; border-color: #e5d4ac; }
.gkm-grade--scholar { background: #eaf1f9; color: #335e89; border-color: #c6d8ec; }
.gkm-grade--sage { background: #132844; color: #f3dca8; border-color: #132844; }
.gkm-grade--administrator { background: #eaf0ed; color: #42644d; border-color: #cadace; }
.gkm-grade-badge svg, .gkm-supporter-badge svg { display: block; flex: 0 0 auto; max-width: none; }
.header-user-section .user-info { display: flex; align-items: center; width: auto; max-width: 380px; overflow: visible; }
.header-user-section .user-info > a { display: inline-flex; align-items: center; gap: 7px; min-width: 0; max-width: 100%; }
.header-user-section .gkm-header-name { display: inline-block; min-width: 0; max-width: 8em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.header-user-section .gkm-grade-badge { padding: 2px 5px; font-size: 10px; }
@media (max-width: 767px) {
    .header-user-section .user-info > a { gap: 4px; }
    .header-user-section .gkm-header-name { max-width: 4em; }
    .header-user-section .gkm-member-badges { gap: 3px; }
    .header-user-section .gkm-supporter-badge > span { display: none; }
    .header-user-section .gkm-supporter-badge { min-height: 22px; padding: 3px; }
    .gkm-ranking-name .gkm-grade-badge { font-size: 10px; padding: 2px 5px; }
}
@media (forced-colors: active) { .gkm-supporter-badge { border-color: ButtonText; color: CanvasText; } }