/* IM 公共样式 start */
:root {
    --msg-center-bg: #2c2a2a;
    --msg-center-card: #383737;
    --msg-center-notice-bg: #e5f0fb;
    --msg-center-notice-primary: #3276ff;
    --msg-center-notice-radius: 0.6rem;
    --msg-center-notice-icon: 2.85rem;
    --msg-center-notice-gap: 0.6rem;
    --msg-center-notice-pad-y: 0.65rem;
    --msg-center-notice-pad-x: 1.25rem;
    --msg-center-notice-badge: 1.25rem;
    --msg-center-ad-bg: #e0e0e0;
    --msg-center-ad-radius: 0.6rem;
    --msg-center-ad-h: 4.15rem;
    --msg-center-ad-text: #757575;
    --msg-center-ad-text-size: 1rem;
    --msg-center-ad-tag-w: 2.2rem;
    --msg-center-ad-tag-h: 1.4rem;
    --msg-center-ad-tag-font: 0.65rem;
    --msg-center-primary: #0ab18c;
    --msg-center-text: #ffffff;
    --msg-center-muted: #838383;
    --msg-center-radius-sm: 0.375rem;
    --msg-center-radius-md: 0.75rem;
    --msg-center-card-h5: 4.75rem;
    --msg-center-card-pc: 6.125rem;
    --msg-center-ad-pc: 6.4rem;
    --msg-center-adtag-text: #e9e9e9;
    --msg-arch-card-pc-h: 13.375rem;
    --msg-arch-card-h5-h: 11.8125rem;
    --msg-arch-banner-pc-h: 7rem;
    --msg-arch-banner-h5-h: 4.75rem;
    --msg-arch-card-gap: 2.5rem;
    --msg-arch-card-gap-h5: 1.25rem;
    --msg-arch-card-bg: #e5f0fb;
    --msg-arch-card-title: #1a1a1a;
    --msg-arch-card-text: #8a8a8a;
    --msg-arch-card-title-size: 0.8rem;
    --msg-arch-card-title-line: 1.7rem;
    --msg-arch-card-content-size: 0.7rem;
    --msg-arch-card-content-line: 1.2rem;
    --msg-arch-card-pad-y: 0.75rem;
    --msg-arch-card-pad-x: 1rem;
    --msg-arch-breadcrumb-size: 0.7rem;
    --msg-arch-breadcrumb-line: 1rem;
    --msg-arch-text: #bcbcbc;
    --msg-arch-time: #828282;
    --msg-arch-pill-bg: #333333;
    --msg-arch-radius-card: 0.625rem;
    --msg-arch-radius-banner-pc: 0.75rem;
    --msg-arch-radius-pill: 2.1875rem;
    --msg-arch-adtag-text: #e9e9e9;
    --home-announce-h: 1.6rem;
    --home-announce-font: 0.6rem;
    --home-announce-icon: 1.15rem;
    --home-announce-sep-h: 0.8rem;
    --home-announce-sep-gap: 0.4rem;
    --home-announce-arrow: 0.6rem;
    --home-announce-arrow-gap: 0.15rem;
    --home-announce-pad-r: 0.5rem;
    --home-announce-pad-l: 0.45rem;
    --home-announce-action-gap: 0.5rem;
}

.hidden {
    display: none !important;
}

.msg-arch-banner-container {
    display: flex;
    flex-direction: column;
    padding: .5rem 0;
}

.msg-arch-banner-container>a {
    width: 100%;
    display: block;
    margin-bottom: 0.5rem;
    flex: 1;
    position: relative;
}

.msg-arch-banner-container>a>img {
    width: 100%;
    height: 6.125rem;
    object-fit: fill;
    background-color: #484848;
    border-radius: 0.6rem;
}

.msg-arch-banner-container>a>img.loading {
    width: 100%;
    object-fit: contain;
    content: url(../images/holder@3x.png);
    object-fit: contain;
    background-size: contain;
    background-position: center;
    background-color: #979797;
    max-height: 5rem;
}

#xqbj-container .home-announce-bar {
    display: flex;
    align-items: center;
    width: 100%;
    max-width: var(--default-screen-max-width);
    height: var(--home-announce-h);
    margin: 0;
    padding: 0 var(--home-announce-pad-r) 0 var(--home-announce-pad-l);
    box-sizing: border-box;
    border-radius: 999px;
    color: #fff;
    font-size: var(--home-announce-font);
    font-weight: 500;
    line-height: 1;
    text-decoration: none;
    overflow: hidden;
    background: linear-gradient(90deg, #3678e8 0%, #4da3f5 48%, #75d0f8 100%);
    position: fixed;
    top: 4rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 999;
}

.home-announce-bar__icon {
    flex: 0 0 var(--home-announce-icon);
    width: var(--home-announce-icon);
    height: var(--home-announce-icon);
    display: flex;
    align-items: center;
    justify-content: center;
}

.home-announce-bar__icon img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.home-announce-bar__sep {
    flex: 0 0 1px;
    width: 1px;
    height: var(--home-announce-sep-h);
    margin: 0 var(--home-announce-sep-gap) 0 var(--home-announce-sep-gap);
    background-color: rgba(255, 255, 255, 0.85);
}

.home-announce-bar .home-announce-text {
    flex: 1 1 auto;
    min-width: 0;
    font-size: inherit;
    font-weight: inherit;
    line-height: 1.2;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.home-announce-bar .home-announce-action {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    margin-left: var(--home-announce-action-gap);
    color: #fff;
    font-size: inherit;
    font-weight: inherit;
    line-height: 1;
    white-space: nowrap;
}

.home-announce-action__arrow {
    flex: 0 0 var(--home-announce-arrow);
    width: var(--home-announce-arrow);
    height: var(--home-announce-arrow);
    margin-left: var(--home-announce-arrow-gap);
    display: block;
}

.detail-im-notice {
    position: fixed;
    top: 6.1875rem;
    left: 0.6875rem;
    right: 0.6875rem;
    z-index: 10;
    display: flex;
    align-items: center;
    height: 2rem;
    padding: 0 0.5rem;
    color: #fff;
    text-decoration: none;
    border: 1px solid rgba(74, 36, 48, 0.3);
    border-radius: 0.5rem;
    background: rgba(87, 23, 64, 0.4);
    backdrop-filter: blur(9.9px);
    -webkit-backdrop-filter: blur(9.9px);
    box-sizing: border-box;
    margin: 0 auto;
}

.detail-im-notice__icon {
    flex: 0 0 1.4375rem;
    width: 1.4375rem;
    height: 1.4375rem;
    border-radius: 50%;
    object-fit: cover;
}

.detail-im-notice__text {
    flex: 1;
    min-width: 0;
    margin: 0 0.5rem;
    overflow: hidden;
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1rem;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.detail-im-notice__action {
    flex: 0 0 auto;
    color: #b58ea3;
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1rem;
    white-space: nowrap;
}

.detail-im-notice__action::after {
    content: "";
    display: inline-block;
    width: 0.5rem;
    height: 0.5rem;
    margin-left: 0.125rem;
    vertical-align: -0.0625rem;
    border-top: 0.0875rem solid currentColor;
    border-right: 0.0875rem solid currentColor;
    transform: rotate(45deg);
}
.msg-center-banner__badge {
    position: absolute;
    top: 0.25rem;
    right: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 0.5px solid #fff;
    background-color: #ff3b30;
    color: var(--msg-center-text);
    font-size: 0.5rem;
    font-weight: 600;
    line-height: 0.5rem;
}
@media screen and (max-width: 767.98px) {
    /*
     * 首页系统消息推送横幅 H5（Figma node 2220-11755，750 设计稿）
     * 字号、图标等易失真项用 px；750 稿标注值 ÷2 写入 CSS（375 视口物理像素）
     */
    #xqbj-container .home-announce-bar {
        top: 5rem;
        width: calc(100% - 2rem);
        max-width: var(--default-screen-max-width);
        height: 33px;
        padding: 0 9px 0 9px;
        font-size: 12px;
        border-radius: 999px;
        box-shadow: 0 2px 8px rgba(54, 120, 232, 0.28);
    }

    .home-announce-bar__icon {
        flex: 0 0 23px;
        width: 23px;
        height: 23px;
    }

    .home-announce-bar__sep {
        height: 16px;
        margin: 0 8px;
    }

    .home-announce-bar .home-announce-text {
        font-size: 12px;
        line-height: normal;
    }

    .home-announce-bar .home-announce-action {
        margin-left: 8px;
        font-size: 12px;
    }

    .home-announce-action__arrow {
        flex: 0 0 12px;
        width: 12px;
        height: 12px;
        margin-left: 3px;
    }
    .msg-center-banner__badge {
        position: absolute;
        top: 0.375rem;
        right: 0.375rem;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 0.375rem;
        height: 0.375rem;
        border-radius: 50%;
        background-color: #ff3b30;
        color: var(--msg-center-text);
        font-size: 0.5rem;
        font-weight: 600;
        line-height: 0.5rem;
    }
}

@media(max-width:768px) {
    .msg-arch-banner-container>a>img {
        max-height: 60px;
    }
}

.notice_dot {
    display: none;
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background-color: #ff3b30;
    border: 0.09375rem solid #fff;
    box-sizing: border-box;
    z-index: 2;
    pointer-events: none;
    transform: translate(35%, -35%);
}

.msg-arch-card .notice_dot,
#announcementList .notice_dot {
    display: none !important;
}

@media screen and (min-width: 960px) {
    #xqbj-container .home-announce-bar {
        width: min(var(--default-content-max-width), calc(min(100vw, var(--default-screen-max-width)) - 12.5rem - 13.15rem - 2rem));
        max-width: var(--default-content-max-width);
        margin: 0;
        left: calc(max(0px, (100vw - var(--default-screen-max-width)) / 2) + 12.5rem);
        transform: none;
    }
}

#tabMsgBadge.msg-center-banner__badge {
    position: relative;
    top: 0;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: auto;
    min-width: var(--msg-center-notice-badge);
    width: var(--msg-center-notice-badge);
    height: var(--msg-center-notice-badge);
    padding: 0;
    border: none;
    border-radius: 50%;
    background-color: #ff3b30;
    color: #fff;
    font-size: 0.8rem;
    font-weight: 600;
    line-height: 1;
}

.msg-center-hero {
    display: none;
}

.msg-center-page {
    width: 100%;
    padding: 0 0 6rem;
    color: var(--msg-center-text);
    box-sizing: border-box;
}

.msg-center-list {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
}

.msg-center-list .msg-arch-banner-container,
#msg-archives-view .msg-arch-banner-container {
    order: 1;
    width: 100%;
    padding: 0;
}

.msg-center-list .msg-arch-banner-container > a,
#msg-archives-view .msg-arch-banner-container > a {
    position: relative;
    display: block;
    width: 100%;
    min-height: var(--msg-center-ad-h);
    height: var(--msg-center-ad-h);
    margin-bottom: 0;
    overflow: hidden;
    border-radius: var(--msg-center-ad-radius);
    background-color: var(--msg-center-ad-bg);
}

.msg-center-list .msg-arch-banner-container > a > img,
#msg-archives-view .msg-arch-banner-container > a > img {
    display: block;
    width: 100%;
    height: 82.162px;
    object-fit: cover;
    border-radius: var(--msg-center-ad-radius);
    background-color: var(--msg-center-ad-bg);
}

.msg-center-list .msg-arch-banner-container > a > img.loading,
#msg-archives-view .msg-arch-banner-container > a > img.loading {
    object-fit: contain;
    content: url(../images/holder@3x.png);
    background-size: contain;
    background-position: center;
    background-color: var(--msg-center-ad-bg);
}

.msg-center-list .msg-arch-banner-container > a.msg-center-ad-placeholder,
#msg-archives-view .msg-arch-banner-container > a.msg-center-ad-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    text-decoration: none;
    color: var(--msg-center-ad-text);
}

.msg-center-list .msg-arch-banner-container .msg-arch-banner__adtag,
#msg-archives-view .msg-arch-banner-container .msg-arch-banner__adtag {
    position: absolute;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--msg-center-ad-tag-w);
    height: var(--msg-center-ad-tag-h);
    background-image: url(../images/im/msg-center-adtag-bg.svg);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    color: var(--msg-center-adtag-text);
    font-size: 12px;
    font-weight: 500;
    line-height: 1;
}

.msg-center-ad-placeholder__text {
    font-size: var(--msg-center-ad-text-size);
    font-weight: 400;
    line-height: 1;
    color: var(--msg-center-ad-text);
}

#msg-archives-view {
    --msg-arch-breadcrumb-size: 0.7rem;
    --msg-arch-breadcrumb-line: 1rem;
    --msg-arch-card-title-size: 0.8rem;
    --msg-arch-card-title-line: 1.7rem;
    --msg-arch-card-time-size: 0.8rem;
    --msg-arch-card-time-line: 1.7rem;
    --msg-arch-card-content-size: 0.7rem;
    --msg-arch-card-content-line: 1.2rem;
}

#msg-archives-view .msg-arch-banner-container {
    margin-bottom: 1rem;
}

#msg-archives-view .im-breadcrumb {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0 0 1rem;
    padding: 0;
    padding-top: 5px;
    border: none;
    background: transparent;
    font-size: var(--msg-arch-breadcrumb-size);
    font-weight: 400;
    line-height: var(--msg-arch-breadcrumb-line);
    color: #8a8a8a;
}

#msg-archives-view .im-breadcrumb a,
#msg-archives-view .im-breadcrumb__current {
    font-size: inherit;
    line-height: inherit;
}

#msg-archives-view .im-breadcrumb a {
    color: var(--msg-center-notice-primary);
    text-decoration: none;
    font-size: 0.75rem;
    font-weight: 500;
}

#msg-archives-view .im-breadcrumb a:hover {
    color: var(--msg-center-notice-primary);
}

#msg-archives-view .im-breadcrumb__current {
    color: #8a8a8a;
    font-size: 0.75rem;
}

#msg-archives-view .im-breadcrumb__sep {
    display: inline-block;
    width: 0.35rem;
    height: 0.6rem;
    flex-shrink: 0;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='7' height='12' viewBox='0 0 7 12' fill='none'%3E%3Cpath d='M1 1L6 6L1 11' stroke='%238a8a8a' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
}

#msg-archives-view .msg-center-ad-placeholder__text {
    font-size: var(--msg-center-ad-text-size);
}

#msg-archives-view .msg-arch-card__header {
    align-items: center;
    margin-bottom: 0.4rem;
}

#msg-archives-view .msg-arch-item__time {
    font-size: var(--msg-arch-card-time-size);
    line-height: var(--msg-arch-card-time-line);
}

#msg-archives-view .msg-arch-card__title {
    font-size: var(--msg-arch-card-title-size);
    line-height: var(--msg-arch-card-title-line);
}

#msg-archives-view .msg-arch-card__content {
    font-size: var(--msg-arch-card-content-size);
    line-height: var(--msg-arch-card-content-line);
}

.msg-center-card {
    display: flex;
    align-items: center;
    width: 100%;
    min-height: var(--msg-center-card-pc);
    overflow: hidden;
    border-radius: var(--msg-center-radius-md);
    color: var(--msg-center-text);
    box-sizing: border-box;
    position: relative;
}

.msg-center-card:hover {
    color: var(--msg-center-text);
}

.msg-center-card--notice {
    gap: var(--msg-center-notice-gap);
    min-height: auto;
    padding: var(--msg-center-notice-pad-y) 5px var(--msg-center-notice-pad-y) 25px;
    border-radius: var(--msg-center-notice-radius);
    background-color: var(--msg-center-notice-bg);
    order: 2;
}

.msg-center-card--notice:hover {
    color: var(--msg-center-notice-primary);
    background-color: var(--msg-center-notice-bg);
}

.msg-center-notice-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--msg-center-notice-icon);
    height: var(--msg-center-notice-icon);
    flex: 0 0 var(--msg-center-notice-icon);
    border-radius: 50%;
    background: transparent;
}

.msg-center-notice-icon img {
    width: 100%;
    height: 100%;
    display: block;
}

.msg-center-card--notice .msg-center-card__title {
    font-size: 0.7rem;
    font-weight: 500;
    line-height: 1;
    color: var(--msg-center-notice-primary);
}

.msg-center-card--ad {
    position: relative;
    /* min-height: var(--msg-center-ad-pc);
    background-color: #060b1a; */
    order: 1;
}

.msg-center-card--ad picture,
.msg-center-card--ad img {
    display: block;
    width: 100%;
    height: 100%;
}

.msg-center-card--ad img {
    object-fit: cover;
}


.msg-center-banner__adtag {
    position: absolute;
    right: 0;
    bottom: -3px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 1.5rem;
    background-image: url(../images/im/msg-center-adtag-bg.svg);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    color: var(--msg-center-adtag-text);
    font-size: 0.8rem;
    font-weight: 500;
    line-height: 1.5rem;
}

@media (max-width: 767px) {
    .msg-center-page {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
        padding-bottom: 4rem;
    }

    .msg-center-card {
        min-height: var(--msg-center-card-h5);
        border-radius: 0.625rem;
    }

    .msg-center-list {
        gap: 2rem;
    }

    .msg-center-card--notice {
        order: 2;
        gap: calc(var(--msg-center-notice-gap) * 2);
        padding: calc(var(--msg-center-notice-pad-y) * 2) calc(var(--msg-center-notice-pad-x) * 2);
        border-radius: calc(var(--msg-center-notice-radius) * 2);
    }

    .msg-center-list .msg-arch-banner-container > a,
    #msg-archives-view .msg-arch-banner-container > a {
        min-height: calc(var(--msg-center-ad-h) * 2);
        height: calc(var(--msg-center-ad-h) * 2);
        border-radius: calc(var(--msg-center-ad-radius) * 2);
    }

    .msg-center-list .msg-arch-banner-container > a > img,
    #msg-archives-view .msg-arch-banner-container > a > img {
        /* border-radius: calc(var(--msg-center-ad-radius) * 2); */
    }

    .msg-center-ad-placeholder__text {
        font-size: calc(var(--msg-center-ad-text-size) * 2);
    }

    .msg-center-list .msg-arch-banner-container .msg-arch-banner__adtag,
    #msg-archives-view .msg-arch-banner-container .msg-arch-banner__adtag {
        width: calc(var(--msg-center-ad-tag-w) * 2);
        height: calc(var(--msg-center-ad-tag-h) * 2);
        font-size: calc(var(--msg-center-ad-tag-font) * 2);
    }

    .msg-center-card--ad {
        order: 2;
        min-height: var(--msg-center-card-h5);
        height: var(--msg-center-card-h5);
    }

    .msg-center-notice-icon {
        width: calc(var(--msg-center-notice-icon) * 2);
        height: calc(var(--msg-center-notice-icon) * 2);
        flex-basis: calc(var(--msg-center-notice-icon) * 2);
    }

    .msg-center-card--notice .msg-center-card__title {
        font-size: 1.4rem;
        line-height: 1;
    }

    .msg-center-card--ad img {
        object-fit: fill;
    }
    #tabMsgBadge.msg-center-banner__badge {
        min-width: calc(var(--msg-center-notice-badge) * 2);
        width: calc(var(--msg-center-notice-badge) * 2);
        height: calc(var(--msg-center-notice-badge) * 2);
        font-size: 1.6rem;
    }

    #msg-archives-view {
        --msg-arch-breadcrumb-size: 1.4rem;
        --msg-arch-breadcrumb-line: 1.2rem;
        --msg-arch-card-title-size: 1.6rem;
        --msg-arch-card-title-line: 3.4rem;
        --msg-arch-card-time-size: 1.6rem;
        --msg-arch-card-time-line: 3.4rem;
        --msg-arch-card-content-size: 1.4rem;
        --msg-arch-card-content-line: 2.4rem;
    }

    #msg-archives-view .msg-arch-banner-container {
        margin-bottom: 2rem;
    }

    #msg-archives-view .im-breadcrumb {
        gap: 1rem;
        margin-bottom: 2rem;
    }

    #msg-archives-view .im-breadcrumb__sep {
        width: 0.7rem;
        height: 1.2rem;
    }

    #msg-archives-view .msg-center-ad-placeholder__text {
        font-size: calc(var(--msg-center-ad-text-size) * 2);
    }

    #msg-archives-view .msg-arch-banner-container .msg-arch-banner__adtag {
        width: calc(var(--msg-center-ad-tag-w) * 2);
        height: calc(var(--msg-center-ad-tag-h) * 2);
        font-size: calc(var(--msg-center-ad-tag-font) * 2);
    }

    #msg-archives-view .msg-arch-card {
        padding: calc(var(--msg-arch-card-pad-y) * 2) calc(var(--msg-arch-card-pad-x) * 2);
        border-radius: calc(var(--msg-center-notice-radius) * 2);
    }

    #msg-archives-view .msg-arch-card__header {
        margin-bottom: 0.8rem;
    }

    .msg-arch-list {
        gap: 2rem;
    }

    #msg-archives-view .msg-arch-card__content {
        -webkit-line-clamp: 4;
    }
}

@media (min-width: 768px) {
    .msg-center-hero {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 9.6875rem;
        margin-top: 5rem;
        background-color: #313030;
    }

    .msg-center-hero__title {
        margin: 0;
        color: var(--msg-center-text);
        font-size: 2.25rem;
        font-weight: 600;
        line-height: 1.35;
        letter-spacing: 3px;
    }

    .msg-center-card--ad {
        min-height: var(--msg-center-ad-pc);
        height: var(--msg-center-ad-pc);
    }

    /* 消息中心广告标签 PC（Figma node 2220-8491）：右上角，背景垂直翻转 */
    .msg-center-list .msg-arch-banner-container .msg-arch-banner__adtag,
    #msg-archives-view .msg-arch-banner-container .msg-arch-banner__adtag,
    .msg-arch-banner__adtag {
        top: 0;
        right: 0;
        bottom: auto;
        left: auto;
        background-image: none;
        isolation: isolate;
    }

    .msg-center-list .msg-arch-banner-container .msg-arch-banner__adtag::before,
    #msg-archives-view .msg-arch-banner-container .msg-arch-banner__adtag::before,
    .msg-arch-banner__adtag::before {
        content: '';
        position: absolute;
        inset: 0;
        z-index: -1;
        background-image: url(../images/im/msg-center-adtag-bg.svg);
        background-repeat: no-repeat;
        background-size: 100% 100%;
        transform: scaleY(-1);
    }
}

.msg-archives-page {
    width: 100%;
    padding: 0 0 4rem;
    color: var(--msg-center-text);
    box-sizing: border-box;
}

.msg-archives-page .im-breadcrumb {
    margin: 0 0 1.25rem;
    font-size: 0.8125rem;
    line-height: 0.875rem;
    color: var(--msg-arch-text);
    opacity: 0.91;
}

.msg-archives-page .im-breadcrumb a {
    color: var(--msg-center-primary);
}

.msg-archives-page .im-breadcrumb--pc {
    display: none;
}

.msg-arch-banner {
    position: relative;
    display: block;
    width: 100%;
    height: var(--msg-arch-banner-h5-h);
    margin: 0 0 var(--msg-arch-card-gap-h5);
    overflow: hidden;
    border-radius: var(--msg-arch-radius-card);
    color: var(--msg-center-text);
    box-sizing: border-box;
}

.msg-arch-banner:hover {
    color: var(--msg-center-text);
}

.msg-arch-banner picture,
.msg-arch-banner img {
    display: block;
    width: 100%;
    height: 100%;
}

.msg-arch-banner img {
    object-fit: fill;
}

.msg-arch-banner__badge {
    position: absolute;
    top: 0.25rem;
    right: 0.375rem;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 0.78125rem;
    height: 0.78125rem;
    border-radius: 50%;
    background-color: #ff3b30;
    color: var(--msg-center-text);
    font-size: 0.5rem;
    font-weight: 600;
    line-height: 0.5rem;
}

.msg-arch-banner__adtag {
    position: absolute;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 1.5rem;
    background-image: url(../images/im/msg-center-adtag-bg.svg);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    color: var(--msg-arch-adtag-text);
    font-size: 0.8rem;
    font-weight: 500;
    line-height: 1.5rem;
}

.msg-arch-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin: 0;
    padding: 0;
    list-style: none;
    max-height: 40rem;
    overflow-y: auto;
}

.msg-arch-item {
    display: block;
    list-style: none;
    color: inherit;
    text-decoration: none;
}

.msg-arch-item:hover {
    color: inherit;
}

.msg-arch-card__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.5rem;
}

.msg-arch-item__time {
    flex-shrink: 0;
    width: auto;
    height: auto;
    margin: 0;
    border-radius: 0;
    background-color: transparent;
    color: var(--msg-arch-time);
    font-size: var(--msg-arch-card-title-size);
    font-weight: 400;
    line-height: var(--msg-arch-card-title-line);
    white-space: nowrap;
}

.msg-arch-card {
    height: fit-content;
    padding: var(--msg-arch-card-pad-y) var(--msg-arch-card-pad-x);
    overflow: hidden;
    border-radius: var(--msg-center-notice-radius);
    background-color: var(--msg-arch-card-bg);
    box-sizing: border-box;
    position: relative;
}

.msg-arch-card__title {
    flex: 1;
    min-width: 0;
    margin: 0;
    color: var(--msg-arch-card-title);
    font-size: var(--msg-arch-card-title-size);
    font-weight: 500;
    line-height: var(--msg-arch-card-title-line);
    word-break: break-all;
}

.msg-arch-card__content {
    margin: 0;
    color: var(--msg-arch-card-text);
    font-size: var(--msg-arch-card-content-size);
    font-weight: 400;
    line-height: var(--msg-arch-card-content-line);
    text-align: justify;
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 7;
}

.msg-archives-page .page-nav {
    margin-top: var(--msg-arch-card-gap-h5);
}

@media (max-width: 767px) {
    #msg-center-view,#msg-archives-view{
        margin-top: 15px;
    }
    body.card #body {
        padding-top: 0;
    }
}

@media (min-width: 768px) {
    #msg-center-view,#msg-archives-view{
        margin-top: 0.5rem;
    }
    .msg-archives-page {
        padding-bottom: 6rem;
    }

    .msg-archives-page .im-breadcrumb {
        font-size: 0.75rem;
        line-height: 1.3125rem;
    }

    .msg-archives-page .im-breadcrumb--h5 {
        display: none;
    }

    .msg-archives-page .im-breadcrumb--pc {
        display: block;
    }

    .msg-arch-banner {
        height: var(--msg-arch-banner-pc-h);
        margin-bottom: var(--msg-arch-card-gap);
        border-radius: var(--msg-arch-radius-banner-pc);
    }

    .msg-arch-banner__badge {
        /* display: none; */
    }

    .msg-arch-banner img {
        object-fit: cover;
    }

    .msg-archives-page .page-nav {
        margin-top: var(--msg-arch-card-gap);
    }
}

/* IM 公共样式 end */
/* 导航头像红点 */
.avatar_notice_dot {
    position: absolute;
    top: 0;
    right: 0;
    width: 0.6rem;
    height: 0.6rem;
    border-radius: 50%;
    background-color: #ff3b30;
    border: 0.09375rem solid #fff;
    box-sizing: border-box;
    z-index: 2;
    pointer-events: none;
}
.xqbj-btn.account-btn,
.nav-user-avatar {
    position: relative;
}

/* PC 导航头像：未读胶囊 + 认证 V（Figma node 2220-7568，172×50） */
@media screen and (min-width: 960px) {
    #xqbj-container .xqbj-header .navbar.is-desktop .nav-user .nav-user-avatar .avatar_notice_dot:not(.hidden) {
        top: 5px;
        right: auto;
        left: 70%;
        width: 24px;
        height: 14px;
        border-radius: 21px;
        border: 1px solid #fff;
        background-color: #ff1616;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 8px;
        font-weight: 500;
        line-height: 1;
        color: #fff;
        white-space: nowrap;
        transform: none;
        box-sizing: border-box;
        z-index: 3;
    }

    #xqbj-container .xqbj-header .navbar.is-desktop .nav-user .nav-user-avatar .avatar_notice_dot:not(.hidden)::after {
        content: '未读';
    }

    #xqbj-container .xqbj-header .navbar.is-desktop .nav-user .nav-user-avatar.certification-badge::before {
        right: auto;
        top: 70%;
        bottom: auto;
        left: calc(100% + 12.5px);
        width: 14px;
        height: 14px;
        border-radius: 2px;
        z-index: 2;
    }
}

/* H5 导航头像未读胶囊（Figma node 2481-5449，750 设计稿 px÷2） */
@media screen and (max-width: 960px) {
    #xqbj-container .xqbj-header .is-mobile.van-nav-bar .xqbj-btn.account-btn .avatar_notice_dot:not(.hidden) {
        top: calc(50% - 1.3rem);
        /* top: 15%; */
        right: auto;
        left: 50%;
        width: 24px;
        height: 14px;
        border-radius: 21px;
        border: 1px solid #fff;
        background-color: #ff1616;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 8px;
        font-weight: 500;
        line-height: 1;
        color: #fff;
        white-space: nowrap;
        transform: none;
        box-sizing: border-box;
        z-index: 3;
    }

    #xqbj-container .xqbj-header .is-mobile.van-nav-bar .xqbj-btn.account-btn .avatar_notice_dot:not(.hidden)::after {
        content: '未读';
    }
}

@media screen and (min-width: 500px) and (max-width: 959.98px) {
    #xqbj-container .xqbj-header .is-mobile.van-nav-bar .xqbj-btn.account-btn .avatar_notice_dot:not(.hidden) {
        top: calc(50% - 1.1rem);
    }
}

.im-nodata {
    text-align: center;
    padding: 2rem 0;
    color: var(--msg-arch-text);
}
.im-nodata img {
    width: 6rem;
    margin-bottom: 0.5rem;
}
.im-list-loading {
    text-align: center;
    padding: 2rem 0;
    color: var(--msg-arch-text);
}
.msg-center-page,
.msg-archives-page {
    background-color: var(--msg-center-bg);
    border-radius: 0.75rem;
    padding: 1rem;
    margin-top: 0.5rem;
}
.im-breadcrumb {
    margin: 0 0 1.25rem;
    font-size: 0.8125rem;
    line-height: 0.875rem;
    color: var(--msg-arch-text);
}
.im-breadcrumb a {
    color: var(--msg-center-primary);
}
.im-breadcrumb--pc { display: none; }
@media (min-width: 768px) {
    .im-breadcrumb--h5 { display: none; }
    .im-breadcrumb--pc { display: block; }
}

/* 个人中心侧栏菜单红点 */
.im-menu-left {
    position: relative;
}
.account-menu-btn .msg-center-banner__badge {
    display: none !important;
}
.account-menu-btn .left .name {
    position: relative;
}
#navbarDropdownMenuContent .item.nav-msg-center-item {
    position: relative;
}
#navbarDropdownMenuContent .nav-msg-center-item .msg-center-banner__badge {
    display: none !important;
}
.my-msg-panel .msg-center-page {
    padding: 0;
    background: transparent;
}


/* 消息中心列表 H5（Figma node 2220-7409 / 2220-7419，750 设计稿 px÷2） */
@media screen and (max-width: 767.98px) {
    .msg-center-page {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }

    .msg-center-list {
        gap: 15px;
    }

    .msg-center-list .msg-arch-banner-container > a,
    .msg-center-list .msg-arch-banner-container > a.msg-center-ad-placeholder {
        height: 60px;
        min-height: 60px;
        border-radius: 5px;
        background-color: rgba(84, 84, 84, 0.1);
    }

    .msg-center-ad-placeholder__text {
        font-size: 15px;
        font-weight: 500;
        line-height: normal;
        color: rgba(21, 21, 21, 0.2);
    }

    .msg-center-list .msg-arch-banner-container .msg-arch-banner__adtag {
        top: 0;
        right: auto;
        bottom: auto;
        left: 0;
        width: 22px;
        height: 11px;
        font-size: 7px;
        line-height: 11px;
        color: #e9e9e9;
    }

    .msg-center-card.msg-center-card--notice {
        display: flex;
        align-items: center;
        min-height: 60px;
        height: 60px;
        padding: 11px 12px;
        gap: 11px;
        border-radius: 5px;
        background-color: #fff;
        box-sizing: border-box;
    }

    .msg-center-card--notice:hover {
        color: #373737;
        background-color: #fff;
    }

    .msg-center-notice-icon {
        width: 38px;
        height: 38px;
        flex: 0 0 38px;
    }

    .msg-center-card--notice .msg-center-card__title {
        flex: 1 1 auto;
        min-width: 0;
        font-size: 12px;
        font-weight: 600;
        line-height: 17px;
        color: #373737;
    }

    #msg-center-view .msg-center-card--notice #tabMsgBadge.msg-center-banner__badge {
        position: relative;
        top: auto;
        right: auto;
        flex: 0 0 13px;
        min-width: 13px;
        width: 13px;
        height: 13px;
        margin-left: auto;
        border: none;
        font-size: 8px;
        font-weight: 600;
        line-height: 13px;
    }

    /* 消息详情 H5：隐藏面包屑导航（PC 端保持显示） */
    #msg-archives-view .im-breadcrumb {
        display: none;
    }

    #msg-archives-view .msg-arch-banner-container {
        margin-bottom: 20px;
    }

    #msg-archives-view .msg-arch-banner-container > a,
    #msg-archives-view .msg-arch-banner-container > a.msg-center-ad-placeholder {
        height: 60px;
        min-height: 60px;
        border-radius: 5px;
        background-color: rgba(84, 84, 84, 0.1);
    }

    #msg-archives-view .msg-center-ad-placeholder__text {
        font-size: 15px;
        font-weight: 500;
        line-height: normal;
        color: rgba(21, 21, 21, 0.2);
    }

    #msg-archives-view .msg-arch-banner-container .msg-arch-banner__adtag {
        top: 0;
        right: auto;
        bottom: auto;
        left: 0;
        width: 22px;
        height: 11px;
        font-size: 7px;
        line-height: 11px;
        color: #e9e9e9;
    }

    #msg-archives-view .msg-arch-list {
        gap: 20px;
        max-height: none;
    }

    #msg-archives-view .msg-arch-card {
        padding: 15px 10px;
        border-radius: 5px;
        background-color: #fff;
    }

    #msg-archives-view .msg-arch-card__header {
        display: block;
        margin-bottom: 5px;
    }

    #msg-archives-view .msg-arch-card__title {
        font-size: 15px;
        font-weight: 500;
        line-height: 17px;
        color: #1b1b1b;
    }

    /* 时间胶囊（Figma node 2220-7492，750 稿 px÷2） */
    #msg-archives-view .msg-arch-item::before {
        content: attr(data-publish-at);
        display: block;
        width: fit-content;
        max-width: 100%;
        height: 20px;
        margin: 0 auto 10px;
        padding: 0 15px;
        border-radius: 18px;
        background-color: #ededed;
        color: #818181;
        font-size: 11px;
        font-weight: 600;
        line-height: 20px;
        text-align: center;
        white-space: nowrap;
        box-sizing: border-box;
    }

    #msg-archives-view .msg-arch-item:not([data-publish-at])::before,
    #msg-archives-view .msg-arch-item[data-publish-at=""]::before {
        content: none;
        display: none;
        height: 0;
        margin: 0;
        padding: 0;
    }

    #msg-archives-view .msg-arch-card__header .msg-arch-item__time {
        display: none;
    }

    #msg-archives-view .msg-arch-card__content {
        font-size: 12px;
        font-weight: 400;
        line-height: 18px;
        color: #939393;
        -webkit-line-clamp: 7;
    }
}