/* Reserve the button's footprint without flashing a placeholder or VIP badge. */
html:not(.b2-header-guest) .mngjd-header-vip:not([data-vip-ready]),
.mngjd-header-vip[data-vip-ready="false"] {
    visibility: hidden;
    pointer-events: none;
}

/* The head bootstrap restores the cached label before the body is painted. */
html.b2-header-vip-cached .mngjd-header-vip:not([data-vip-ready]) {
    visibility: visible;
    pointer-events: auto;
}

html.b2-header-vip-cached .mngjd-header-vip:not([data-vip-ready]) .mngjd-header-vip-label {
    font-size: 0;
}

html.b2-header-vip-cached .mngjd-header-vip:not([data-vip-ready]) .mngjd-header-vip-label::after {
    content: var(--b2-header-vip-label, "开通VIP");
    font-size: 13px;
}

html.b2-header-vip-cached-member .single-row-header .mngjd-header-vip:not([data-vip-ready]),
html.b2-header-vip-cached-member .social-top .header-banner-right > .mngjd-header-vip:not([data-vip-ready]) {
    color: var(--header-vip-color, #778790);
}

html.b2-header-vip-cached-member .mngjd-header-vip:not([data-vip-ready]) .mngjd-header-vip-mark {
    background: var(--header-vip-color, #778790) !important;
    color: #fff !important;
}

/* Keep the cached avatar painted independently of Vue/main.js startup. The
 * real avatar remains underneath and keeps all click/dropdown behavior. */
html.b2-header-avatar-cached .single-row-header .b2-compact-header .top-user-info {
    position: relative;
}

html.b2-header-avatar-cached .single-row-header .b2-compact-header .top-user-info::before {
    content: "";
    position: absolute;
    z-index: 2;
    top: 50%;
    left: 0;
    width: var(--b2-header-control, 34px);
    height: var(--b2-header-control, 34px);
    /* Match the theme's real .avatar.b2-radius shape so the cached first
     * frame does not change from a circle to a rounded square. */
    border-radius: 4px;
    background-color: transparent;
    background-image: var(--b2-header-avatar-image);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    box-shadow: none;
    pointer-events: none;
    transform: translateY(-50%);
}

/* The cached user card is the visible source until fresh API data has been
 * compared. Vue may reveal its sibling as soon as announcement data arrives;
 * keep that duplicate out of layout until the cache controller releases it. */
html.b2-sidebar-user-preview-active .b2-widget-user .user-widget-content > div:not([data-b2-sidebar-cache-preview]):not(.widget-mission-footer) {
    display: none !important;
}

.mngjd-header-vip .mngjd-header-vip-label {
    min-width: 56px;
    white-space: nowrap;
    text-align: center;
}

.single-row-header .mngjd-header-vip[data-vip-level],
.social-top .header-banner-right > .mngjd-header-vip[data-vip-level] {
    color: var(--header-vip-color, #778790);
}

.mngjd-header-vip[data-vip-level] .mngjd-header-vip-mark {
    background: var(--header-vip-color, #778790) !important;
    color: #fff !important;
}

.mngjd-header-vip[data-vip-level]:hover {
    border-color: var(--header-vip-color, #778790);
    background: #f7f9fb;
    box-shadow: 0 5px 12px rgba(23, 27, 30, .07);
}