/**
 * 用户中心 · 等级经验值胶囊进度条
 * 颜色全部取自主题主色调变量，随后台「主题颜色」自动变化
 */

/* 让昵称、等级、进度条在同一行内自然对齐 */
.user-panel-info h1 {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    row-gap: 8px;
    line-height: 1.2;
}

.user-panel-info h1>span {
    margin-right: 10px;
}

.b2-lvbar {
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 164px;
    max-width: 46vw;
    margin: 0 10px 0 0;
    vertical-align: middle;
    flex: 0 0 auto;
    cursor: default;
    font-weight: 400;
    -webkit-user-select: none;
    user-select: none;
}

/* 覆盖主题 h1 内 span 的通用间距 */
.b2-lvbar span,
.user-panel-info h1 span.b2-lvbar {
    margin: 0;
}

.user-panel-info h1 span.b2-lvbar {
    margin-right: 12px;
}

.b2-lvbar .b2-lvbar-txt {
    display: flex;
    align-items: baseline;
    gap: 3px;
    font-size: 11px;
    line-height: 1;
    font-weight: 500;
    color: #98a2b3;
    letter-spacing: .2px;
    white-space: nowrap;
}

.b2-lvbar .b2-lvbar-txt b {
    font-size: 12px;
    font-weight: 700;
    color: var(--b2color);
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum";
}

.b2-lvbar .b2-lvbar-txt em {
    font-style: normal;
    font-weight: 500;
    color: #aab2c0;
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum";
}

.b2-lvbar .b2-lvbar-track {
    position: relative;
    display: block;
    width: 100%;
    height: 7px;
    border-radius: 999px;
    background-color: var(--b2lightcolor);
    box-shadow: inset 0 1px 2px rgba(15, 23, 42, .07);
    overflow: hidden;
    transition: box-shadow .25s ease;
}

.b2-lvbar .b2-lvbar-fill {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    display: block;
    border-radius: 999px;
    background-color: var(--b2color);
    background-image: linear-gradient(90deg, rgba(255, 255, 255, .45), rgba(255, 255, 255, 0) 62%);
    box-shadow: 0 0 6px 0 var(--b2lightcolor);
    overflow: hidden;
    transition: width .9s cubic-bezier(.22, .61, .36, 1);
    will-change: width;
}

/* 流动的镜面高光 */
.b2-lvbar .b2-lvbar-fill::after {
    content: '';
    position: absolute;
    top: 0;
    left: -40%;
    width: 34%;
    height: 100%;
    background-image: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .8), rgba(255, 255, 255, 0));
    transform: skewX(-20deg);
    animation: b2-lvbar-shine 2.8s ease-in-out infinite;
}

@keyframes b2-lvbar-shine {
    0% {
        left: -40%;
    }

    55% {
        left: 112%;
    }

    100% {
        left: 112%;
    }
}

.b2-lvbar:hover .b2-lvbar-track {
    box-shadow: inset 0 1px 2px rgba(15, 23, 42, .07), 0 0 0 3px var(--b2lightcolor);
}

/* 满级状态 */
.b2-lvbar.b2-lvbar-max .b2-lvbar-txt b {
    color: var(--b2color);
}

.b2-lvbar.b2-lvbar-max .b2-lvbar-txt em {
    color: var(--b2color);
    opacity: .75;
}

.b2-lvbar.b2-lvbar-max .b2-lvbar-fill {
    background-image: linear-gradient(90deg, rgba(255, 255, 255, .5), rgba(255, 255, 255, 0) 55%), var(--b2color);
    box-shadow: 0 0 8px 0 var(--b2lightcolor), 0 0 0 1px rgba(255, 255, 255, .2) inset;
}

/* 暗色模式 */
.b2dark .b2-lvbar .b2-lvbar-txt {
    color: #8d95a3;
}

.b2dark .b2-lvbar .b2-lvbar-txt em {
    color: #6d7583;
}

.b2dark .b2-lvbar .b2-lvbar-track {
    background-color: rgba(255, 255, 255, .14);
    box-shadow: none;
}

/* 移动端：独占一行，避免挤压昵称 */
@media screen and (max-width: 768px) {
    .user-panel-info h1 {
        row-gap: 10px;
    }

    .b2-lvbar,
    .user-panel-info h1 span.b2-lvbar {
        width: 100%;
        max-width: 100%;
        margin: 2px 0 0;
    }

    .b2-lvbar .b2-lvbar-track {
        height: 6px;
    }
}

@media (prefers-reduced-motion: reduce) {

    .b2-lvbar .b2-lvbar-fill::after {
        animation: none;
        opacity: 0;
    }
}