.vip-premium-asset {
    --sweep-duration: 1s;
    --sweep-interval: 3s;
    --sweep-width: 38%;
    --sweep-angle: 20deg;
    --sweep-opacity: .82;
    --blur-radius: .5px;
    --glow-intensity: 14px;
    position: relative;
    isolation: isolate;
}

.vip-premium-asset::before,
.vip-premium-asset::after {
    position: absolute;
    inset: 0;
    content: "";
    pointer-events: none;
}

.vip-premium-asset::before {
    z-index: 2;
    background: var(--vip-asset-image) center / contain no-repeat;
}

.vip-premium-asset::after {
    z-index: 3;
    display: none;
    background-image: linear-gradient(
        calc(90deg + var(--sweep-angle)),
        rgba(255, 255, 255, 0) 0,
        rgba(255, 255, 255, .24) 28%,
        rgba(255, 252, 232, .96) 50%,
        rgba(205, 232, 255, .3) 72%,
        rgba(255, 255, 255, 0) 100%
    );
    background-position: -80% 50%;
    background-repeat: no-repeat;
    background-size: var(--sweep-width) 180%;
    opacity: 0;
    -webkit-mask-image: var(--vip-asset-image);
    -webkit-mask-mode: alpha;
    -webkit-mask-position: center;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-image: var(--vip-asset-image);
    mask-mode: alpha;
    mask-position: center;
    mask-repeat: no-repeat;
    mask-size: contain;
    filter: blur(var(--blur-radius)) drop-shadow(0 0 var(--glow-intensity) rgba(255, 244, 201, .62));
    will-change: background-position, opacity;
}

@supports ((-webkit-mask-image: linear-gradient(#000, #000)) or (mask-image: linear-gradient(#000, #000))) {
    .vip-premium-asset::after {
        display: block;
    }
}

.vip-premium-asset.is-sweeping::after {
    animation: vipPremiumAssetSweep var(--sweep-duration) ease-in-out 1 both;
}

.vip-avatar-frame {
    --vip-avatar-size: 112px;
    --vip-main: #7f8da5;
    --vip-secondary: #c7d0dd;
    --vip-light: #f4f7fb;
    --vip-shadow: rgba(127, 141, 165, .38);
    --vip-avatar-inset: 16%;
    --vip-asset-image: var(--vip-frame-image);
    position: relative;
    display: inline-grid;
    width: var(--vip-avatar-size);
    height: var(--vip-avatar-size);
    place-items: center;
    flex: 0 0 var(--vip-avatar-size);
    isolation: isolate;
    vertical-align: middle;
}

/* 身份头像框映射（普通/个人认证/企业认证/个人VIP/企业VIP/永久VIP），inset 初值待预览页目调 */
.vip-avatar-frame--id-normal { --vip-main: #8fa3bd; --vip-secondary: #d7e2f0; --vip-light: #f4f8fc; --vip-shadow: rgba(143, 163, 189, .35); --vip-avatar-inset: 13%; --vip-frame-image: url("/static/images/avatar_frames/normal_user_frame.png"); }
.vip-avatar-frame--id-personal-verified { --vip-main: #1e8fff; --vip-secondary: #7fd0ff; --vip-light: #eaf7ff; --vip-shadow: rgba(30, 143, 255, .45); --vip-avatar-inset: 15%; --vip-frame-image: url("/static/images/avatar_frames/personal_verified_frame.png"); }
.vip-avatar-frame--id-enterprise-verified { --vip-main: #8a4fff; --vip-secondary: #c9a6ff; --vip-light: #f5edff; --vip-shadow: rgba(138, 79, 255, .45); --vip-avatar-inset: 21%; --vip-frame-image: url("/static/images/avatar_frames/enterprise_verified_frame.png"); }
.vip-avatar-frame--id-vip { --vip-main: #2f7bff; --vip-secondary: #8ec4ff; --vip-light: #eaf3ff; --vip-shadow: rgba(47, 123, 255, .48); --vip-avatar-inset: 15%; --vip-frame-image: url("/static/images/avatar_frames/vip_user_frame.png"); }
.vip-avatar-frame--id-enterprise-vip { --vip-main: #7a3bf0; --vip-secondary: #b79cff; --vip-light: #f3ecff; --vip-shadow: rgba(122, 59, 240, .5); --vip-avatar-inset: 20%; --vip-frame-image: url("/static/images/avatar_frames/enterprise_vip_frame.png"); }
.vip-avatar-frame--id-permanent-vip { --vip-main: #f5b62e; --vip-secondary: #ffdf8a; --vip-light: #fff7e0; --vip-shadow: rgba(245, 182, 46, .5); --vip-avatar-inset: 17%; --vip-frame-image: url("/static/images/avatar_frames/permanent_vip_frame.png"); }

.vip-avatar-frame__aura {
    position: absolute;
    inset: -12%;
    z-index: -3;
    border-radius: 50%;
    background: radial-gradient(circle, var(--vip-shadow), transparent 68%);
    filter: blur(5px);
    animation: vipIdentityAura 2.8s ease-in-out infinite;
}

.vip-avatar-frame__orbit {
    position: absolute;
    pointer-events: none;
}

.vip-avatar-frame__orbit {
    display: none;
}

.vip-avatar-frame__image-wrap {
    position: absolute;
    inset: var(--vip-avatar-inset);
    z-index: 0;
    overflow: hidden;
    border-radius: 50%;
    background: #102038;
}

.vip-avatar-frame__image {
    display: block;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    object-fit: cover;
    border-radius: inherit;
}

.vip-avatar-frame__level {
    position: absolute;
    right: -3%;
    bottom: 1%;
    z-index: 4;
    display: inline-flex;
    min-width: 32%;
    height: 23%;
    align-items: center;
    justify-content: center;
    padding: 0 7%;
    box-sizing: border-box;
    border: 1px solid var(--vip-light);
    border-radius: 999px;
    background: linear-gradient(135deg, #07111f, #14223a);
    box-shadow: 0 0 14px var(--vip-shadow);
    color: var(--vip-light);
    font-size: max(9px, calc(var(--vip-avatar-size) * .105));
    font-weight: 900;
    line-height: 1;
    letter-spacing: .02em;
    white-space: nowrap;
}

.vip-avatar-frame__crown {
    display: none;
}

/* 等级徽标（vip_levels/v{N}.png），替代旧等级文字角标 */
.vip-avatar-frame__level-img {
    position: absolute;
    right: -6%;
    bottom: -4%;
    z-index: 4;
    width: 34%;
    height: auto;
    pointer-events: none;
    filter: drop-shadow(0 2px 6px var(--vip-shadow));
}

.vip-avatar-frame--compact .vip-avatar-frame__level-img {
    right: -7px;
    bottom: -5px;
    width: 22px;
}

.vip-level-node__icon {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.pcv2-hero-level-badge {
    flex: 0 0 34px;
    width: 34px;
    height: 34px;
    object-fit: contain;
}

.vip-avatar-frame--compact {
    --vip-avatar-size: 44px;
}

.vip-avatar-frame--compact .vip-avatar-frame__aura,
.vip-avatar-frame--compact .vip-avatar-frame__orbit,
.vip-avatar-frame--compact .vip-avatar-frame__crown {
    display: none;
}

.vip-avatar-frame--compact .vip-avatar-frame__image-wrap {
    inset: var(--vip-avatar-inset);
}

.vip-avatar-frame--compact .vip-avatar-frame__level {
    right: -9px;
    bottom: -4px;
    min-width: 25px;
    height: 17px;
    padding: 0 5px;
    font-size: 9px;
}

.vip-avatar-frame--profile {
    --vip-avatar-size: 104px;
}

.vip-avatar-frame--stage .vip-avatar-frame__level {
    display: none;
}

.vip-medal {
    --vip-medal-size: 92px;
    --vip-asset-image: var(--vip-medal-image);
    display: inline-block;
    width: var(--vip-medal-size);
    height: var(--vip-medal-size);
    flex: 0 0 var(--vip-medal-size);
    vertical-align: middle;
}

/* 勋章墙使用较宽光带，确保小尺寸勋章上的流光仍清晰可见 */
.pcv2-medal-icon {
    --vip-medal-size: 64px;
    --sweep-width: 42%;
    --sweep-opacity: .7;
    --glow-intensity: 10px;
}

/* 未获得勋章置灰（filter 作用于元素及其伪元素绘制的图） */
.is-unearned .pcv2-medal-icon,
.pcv2-medal-icon.is-unearned {
    filter: grayscale(1);
    opacity: .45;
}

.vip-header-avatar-link {
    display: inline-grid !important;
    height: 100%;
    align-items: center;
    justify-items: center;
}

.pcv2-avatar .vip-avatar-frame--profile {
    margin: 4px;
}

.pcv2-avatar.is-vip-framed {
    overflow: visible;
    background: transparent;
}

.pcv2-avatar.is-vip-framed .pcv2-avatar-mask {
    right: 9px;
    bottom: 7px;
    left: 9px;
    z-index: 5;
    min-height: 27px;
    border-radius: 0 0 50px 50px;
}

.pcv2-avatar .vip-avatar-frame--profile .vip-avatar-frame__level,
.pcv2-avatar .vip-avatar-frame--profile .vip-avatar-frame__crown {
    display: none;
}

.pcv2-vip-identity {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 7px;
    color: #5e687b;
    font-size: 13px;
}

.pcv2-vip-identity__level {
    display: inline-flex;
    min-width: 34px;
    height: 22px;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: #0d1b31;
    box-shadow: 0 0 0 1px var(--vip-main, #7f8da5), 0 0 12px var(--vip-shadow, rgba(127, 141, 165, .28));
    color: var(--vip-light, #fff);
    font-size: 11px;
    font-weight: 900;
}

@keyframes vipIdentityOrbit {
    to { transform: rotate(360deg); }
}

@keyframes vipIdentityOrbitReverse {
    to { transform: rotate(-360deg); }
}

@keyframes vipIdentityAura {
    0%, 100% { opacity: .55; transform: scale(.92); }
    50% { opacity: 1; transform: scale(1.08); }
}

@keyframes vipIdentityCrown {
    0%, 100% { transform: translateX(-50%) translateY(0) rotate(45deg) scale(.88); }
    50% { transform: translateX(-50%) translateY(-5px) rotate(45deg) scale(1.08); }
}

@keyframes vipPremiumAssetSweep {
    0% {
        background-position: -80% 50%;
        opacity: 0;
    }
    14% {
        opacity: var(--sweep-opacity);
    }
    72% {
        opacity: var(--sweep-opacity);
    }
    100% {
        background-position: 180% 50%;
        opacity: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .vip-premium-asset::after,
    .vip-avatar-frame *,
    .vip-avatar-frame::before,
    .vip-avatar-frame::after {
        animation: none !important;
        transition: none !important;
    }
}