/**
 * 星空 banner 搜索轮播图小工具 · 样式
 * v1.1.0  2026-10-02
 *   1) 选中态背景图由「阿里 / 百度 CDN 外链」改为同目录本地文件 xk-indicator-checked.png
 *      —— 不再把访客 IP 与文章地址（Referer）送给第三方，也不怕对方改图/删图导致样式坏掉
 *   2) 电脑端全宽排版改用 calc(100vw - var(--xk-sbw)) 补偿滚动条宽度，修掉横向滚动条
 */
.xk-gradual-banner-widget {
    width: 100%;
    border-radius: var(--main-radius, 16px);
    overflow: hidden;
    box-shadow: var(--main-shadow);
    margin-bottom: 0;
}

.xk-gradual-banner-widget-wrap {
    margin-bottom: 22px;
}

.xk-gradual-banner-fullwidth-wrap {
    width: 98% !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    margin-bottom: 22px;
    padding-left: 0 !important;
    padding-right: 0 !important;
    position: relative;
}

.xk-gradual-banner-fullwidth-wrap .widget-content,
.xk-gradual-banner-fullwidth-wrap .widget-inner,
.xk-gradual-banner-fullwidth-wrap .container,
.xk-gradual-banner-fullwidth-wrap .row {
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.xk-banner-fullwidth-container {
    /* 100vw 会把纵向滚动条宽度也算进去，桌面端会出现横向滚动条。
       --xk-sbw 是滚动条实际宽度（由 xkzhi_gradual_banner_widget.js 写入），
       用它把宽度和偏移各补偿回去，居中与满宽同时成立。 */
    width: calc(100vw - var(--xk-sbw, 0px));
    max-width: calc(100vw - var(--xk-sbw, 0px));
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: calc(-50vw + var(--xk-sbw, 0px) / 2);
    margin-right: calc(-50vw + var(--xk-sbw, 0px) / 2);
    padding-left: 0;
    padding-right: 0;
}

.xk-banner-fullwidth-container .xk-gradual-banner-widget.full-width-desktop {
    border-radius: 0;
    width: 100%;
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
    padding-left: 0;
    padding-right: 0;
    box-shadow: none;
}

.xk-banner-fullwidth-container > * {
    width: 100%;
    max-width: none;
    margin-left: 0;
    margin-right: 0;
    padding-left: 0;
    padding-right: 0;
}

@media (min-width: 992px) {
    .xk-gradual-banner-fullwidth-wrap .widget-content,
    .xk-gradual-banner-fullwidth-wrap .widget-inner,
    .xk-gradual-banner-fullwidth-wrap .container,
    .xk-gradual-banner-fullwidth-wrap .row {
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        width: 100% !important;
        max-width: none !important;
    }
    
    .xk-gradual-banner-fullwidth-wrap * {
        max-width: none !important;
    }
}

@media (max-width: 991px) {
    .xk-gradual-banner-fullwidth-wrap {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    
    .xk-banner-fullwidth-container {
        width: 100%;
        max-width: 100%;
        position: static;
        left: auto;
        right: auto;
        margin-left: 0;
        margin-right: 0;
    }
    
    .xk-gradual-banner-widget.full-width-desktop {
        border-radius: var(--main-radius, 12px);
        width: 100%;
        max-width: 100%;
    }
}

.xk-gradual-banner-widget a {
    transition: none;
}

.xk-gradual-banner-widget .gradual-show-swiper-box {
    position: relative;
    width: 100%;
    height: var(--xkgb-h, 479px);
    overflow: hidden;
    touch-action: pan-y;
    z-index: 1;
}

.xk-gradual-banner-widget.no-slides .gradual-show-swiper-box {
    background: transparent;
    height: auto;
    min-height: 0;
    overflow: visible;
}

.xk-gradual-banner-widget.no-slides .xk-banner-search-box {
    position: relative;
    left: auto;
    top: auto;
    transform: none;
    width: 500px;
    max-width: calc(100% - 40px);
    margin: 0 auto;
    padding: 20px 0;
    z-index: 2;
}

.xk-gradual-banner-widget.no-slides .xk-banner-search-title {
    color: var(--main-color, #333);
    text-shadow: none;
}

.xk-gradual-banner-widget.no-slides .xk-banner-search-form,
.xk-gradual-banner-widget.no-slides .xk-banner-search-box .search-form {
    background: var(--main-bg, #fff);
    border-color: var(--main-border-color, rgba(0, 0, 0, 0.08));
    box-shadow: var(--main-shadow, 0 4px 16px rgba(0, 0, 0, 0.08));
}

.xk-gradual-banner-widget.no-slides .xk-banner-search-box .line-form-input {
    color: var(--main-color, #333) !important;
}

.xk-gradual-banner-widget.no-slides .xk-banner-search-box .scale-placeholder {
    color: var(--muted-color, #999) !important;
}

.xk-gradual-banner-widget.no-slides .xk-banner-search-links {
    color: var(--main-color, #333);
}

.xk-gradual-banner-widget.no-slides .xk-banner-search-links-toggle {
    color: var(--main-color, #333) !important;
    border-right-color: rgba(0, 0, 0, 0.1);
}

.xk-gradual-banner-widget.no-slides .xk-banner-search-box .abs-right button svg {
    fill: var(--main-color, #333);
}

.xk-gradual-banner-widget .gradual-show-item-box {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.8s ease, visibility 0.8s ease;
    z-index: 9;
}

.xk-gradual-banner-widget .gradual-show-item-box .gradual-show-item,
.xk-gradual-banner-widget .gradual-show-item-box .banner-item {
    width: 100%;
    height: 100%;
}

.xk-gradual-banner-widget .gradual-show-item-box.cur-item {
    opacity: 1;
    visibility: visible;
    z-index: 12;
}

.xk-gradual-banner-widget .banner-item {
    position: relative;
}

.xk-gradual-banner-widget .banner-item::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        90deg,
        rgba(0, 0, 0, 0.1) 0%,
        rgba(0, 0, 0, 0.3) 62%,
        rgba(0, 0, 0, 0.72) 100%
    );
    pointer-events: none;
}

.xk-gradual-banner-widget .banner-img-box {
    display: block;
    width: 100%;
    height: 100%;
    position: relative;
    background: #0f172a;
}

.xk-gradual-banner-widget .cover {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    transition: transform 0.5s ease;
}

.xk-gradual-banner-widget:hover .gradual-show-item-box.cur-item .cover {
    transform: scale(1.03);
}

.xk-gradual-banner-widget .xk-banner-search-box {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 500px;
    max-width: calc(100% - 60px);
    z-index: 20;
}

.xk-gradual-banner-widget .xk-banner-search-title {
    color: #ffffff;
    font-size: 24px;
    font-weight: 600;
    text-align: center;
    margin-bottom: 20px;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.xk-gradual-banner-widget .xk-banner-search-box .search-form {
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-radius: 30px;
    border: 1px solid rgba(255, 255, 255, 0.25);
    overflow: visible;
    padding: 4px !important;
    display: flex;
    align-items: center;
}

.xk-gradual-banner-widget .xk-banner-search-box .line-form {
    display: flex;
    align-items: center;
    width: 100%;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    box-shadow: none !important;
    overflow: visible !important;
}

.xk-gradual-banner-widget .xk-banner-search-box .search-input-text {
    flex: 1;
    position: relative;
    padding: 0 !important;
}

.xk-gradual-banner-widget .xk-banner-search-box .line-form-input {
    width: 100%;
    border: none !important;
    background: transparent !important;
    font-size: 15px;
    color: #fff !important;
    outline: none;
    padding: 12px 56px 12px 16px !important;
    box-shadow: none !important;
}

.xk-gradual-banner-widget .xk-banner-search-box .line-form-line {
    display: none !important;
}

.xk-gradual-banner-widget .xk-banner-search-box .scale-placeholder {
    color: rgba(255, 255, 255, 0.7) !important;
    font-size: 15px !important;
    left: 16px !important;
    right: 50px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    transition: opacity 0.2s ease;
}

.xk-gradual-banner-widget .xk-banner-search-box .line-form-input:focus + .scale-placeholder,
.xk-gradual-banner-widget .xk-banner-search-box .line-form-input:not(:placeholder-shown) + .scale-placeholder,
.xk-gradual-banner-widget .xk-banner-search-box .scale-placeholder.is-focus {
    opacity: 0 !important;
    pointer-events: none !important;
}

.xk-gradual-banner-widget .xk-banner-search-box .abs-right {
    position: absolute !important;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    margin-left: 0;
    padding-right: 0;
}

.xk-gradual-banner-widget .xk-banner-search-box .xk-banner-search-links {
    position: relative;
    flex: 0 0 auto;
    align-self: stretch;
    display: flex;
    align-items: center;
    z-index: 3;
    color: #fff;
}

.xk-gradual-banner-widget .xk-banner-search-box .xk-banner-search-links-toggle {
    appearance: none;
    -webkit-appearance: none;
    display: flex;
    align-items: center;
    gap: 6px;
    height: 40px;
    max-width: 140px;
    padding: 0 12px;
    margin: 0;
    border: 0 !important;
    border-right: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: #fff !important;
    cursor: pointer;
    font-size: 14px;
    font-weight: 400;
    line-height: 1;
    white-space: nowrap;
}

.xk-gradual-banner-widget .xk-banner-search-links-toggle span {
    overflow: hidden;
    text-overflow: ellipsis;
}

.xk-gradual-banner-widget .xk-banner-search-links-toggle .fa {
    font-size: 12px;
}

.xk-gradual-banner-widget .xk-banner-search-links-menu {
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    min-width: 132px;
    padding: 6px 0;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.98);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.22);
    white-space: nowrap;
    text-align: left;
}

.xk-gradual-banner-widget .xk-banner-search-links.is-open .xk-banner-search-links-menu {
    display: block;
}

.xk-gradual-banner-widget .xk-banner-search-links-menu a {
    display: block;
    padding: 8px 14px;
    color: #555;
    font-size: 14px;
    text-decoration: none;
}

.xk-gradual-banner-widget .xk-banner-search-links-menu a:hover {
    background: rgba(78, 110, 242, 0.1);
    color: #4e6ef2;
}

.xk-search-external-item {
    border-top: 0 !important;
}

.search-drop .dropdown-menu .xk-search-external-link {
    color: inherit;
}

.ajax-option .option-items .xk-category-external-link {
    color: var(--focus-color);
}

.ajax-option .option-dropdown .xk-category-external-link {
    color: inherit;
}

.xk-gradual-banner-widget .xk-banner-search-links + .search-input-text .line-form-input {
    padding-left: 16px !important;
}

.xk-gradual-banner-widget .xk-banner-search-links + .search-input-text .scale-placeholder {
    left: 16px !important;
}

.xk-gradual-banner-widget .xk-banner-search-box .abs-right button {
    background: transparent;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    padding: 8px !important;
    opacity: 0.8;
}

.xk-gradual-banner-widget .xk-banner-search-box .abs-right button:hover {
    opacity: 1;
}

.xk-gradual-banner-widget .xk-banner-search-box .abs-right button svg {
    width: 16px;
    height: 16px;
    fill: #fff;
}

.xk-gradual-banner-widget .xk-banner-left-content {
    position: absolute;
    left: 40px;
    bottom: 40px;
    z-index: 15;
    max-width: 380px;
    color: var(--xk-left-color, #fff);
}

.xk-gradual-banner-widget .xk-banner-left-item {
    display: none;
    opacity: 0;
    transition: opacity 0.5s ease;
}

.xk-gradual-banner-widget .xk-banner-left-item.cur-item {
    display: block;
    opacity: 1;
    padding-bottom: 30px;
}

.xk-gradual-banner-widget .xk-banner-left-title {
    font-size: var(--xk-left-title-size, 42px);
    font-weight: 700;
    line-height: 1.2;
    margin: 0 0 16px 0;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

.xk-gradual-banner-widget .xk-banner-left-subtitle {
    font-size: var(--xk-left-subtitle-size, 16px);
    line-height: 1.6;
    margin: 0;
    opacity: 0.9;
    text-shadow: 0 1px 5px rgba(0, 0, 0, 0.3);
}

.xk-gradual-banner-widget .xk-banner-left-link {
    color: inherit;
    text-decoration: none;
    display: block;
}

.xk-gradual-banner-widget .xk-banner-left-link:hover {
    opacity: 0.85;
}

.xk-gradual-banner-widget .x-pagination-swiper {
    position: absolute;
    inset: 0;
    display: flex;
    justify-content: flex-end;
    align-items: stretch;
    z-index: 15;
    pointer-events: none;
}

.xk-gradual-banner-widget .x-pagination-box {
    width: var(--xkgb-panel-w, 282px);
    height: 100%;
    opacity: 0.95;
    background-image: linear-gradient(
        180deg,
        rgba(0, 0, 0, 0) 0%,
        rgba(0, 0, 0, 0.66) 24%,
        #000 52%,
        rgba(0, 0, 0, 0.66) 77%,
        rgba(0, 0, 0, 0) 100%
    );
    pointer-events: auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0;
    padding-top: 8px;
    padding-bottom: 8px;
}

.xk-gradual-banner-widget.panel-style-light .x-pagination-box {
    opacity: 0.85;
    background-image: linear-gradient(
        180deg,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0.12) 24%,
        rgba(255, 255, 255, 0.18) 52%,
        rgba(255, 255, 255, 0.12) 77%,
        rgba(255, 255, 255, 0) 100%
    );
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    padding-bottom: 40px;
}

.xk-gradual-banner-widget.panel-style-light .banner-indicator {
    border: none;
}

.xk-gradual-banner-widget.panel-style-light .banner-indicator.checked {
    background: rgba(255, 255, 255, 0.15);
    border: none;
}

.xk-gradual-banner-widget.panel-style-light .banner-indicator.unchecked {
    background: transparent;
}

.xk-gradual-banner-widget .x-pagination-item {
    width: 100%;
}

.xk-gradual-banner-widget .lewan-home-banner-box,
.xk-gradual-banner-widget .banner-indicator-box {
    width: 100%;
}

.xk-gradual-banner-widget .banner-indicator {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100%;
    padding: 0 24px;
    text-decoration: none;
    color: #fff;
}

.xk-gradual-banner-widget .banner-indicator.checked {
    background: url("xk-indicator-checked.png") no-repeat center center;
    background-size: 100% 100%;
    padding-top: 14px;
    padding-bottom: 14px;
}

.xk-gradual-banner-widget .banner-indicator.checked .title {
    font-weight: 700;
}

.xk-gradual-banner-widget .banner-indicator.checked .subtitle,
.xk-gradual-banner-widget .banner-indicator.checked .tips {
    display: inline-flex;
}

.xk-gradual-banner-widget .x-pagination-item.no-subtitle .banner-indicator.checked {
    padding-top: var(--xk-no-subtitle-padding, 12px);
    padding-bottom: var(--xk-no-subtitle-padding, 12px);
}

.xk-gradual-banner-widget .banner-indicator.unchecked {
    height: 48px;
}

.xk-gradual-banner-widget .banner-indicator.unchecked .title {
    font-size: var(--xk-nav-title-size, 16px);
    line-height: 1.2;
    font-weight: 400;
}

.xk-gradual-banner-widget .banner-indicator.unchecked .subtitle,
.xk-gradual-banner-widget .banner-indicator.unchecked .tips {
    display: none;
}

.xk-gradual-banner-widget .banner-indicator .title {
    align-items: center;
    display: flex;
    color: var(--xk-nav-title-color, #fff);
    font-size: var(--xk-nav-title-size, 16px);
    line-height: 1.4;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: all 0.15s ease;
}

.xk-gradual-banner-widget .banner-indicator .subtitle {
    color: var(--xk-nav-subtitle-color, #fff);
    margin-top: 8px;
    font-size: var(--xk-nav-subtitle-size, 13px);
    line-height: 1.4;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.xk-gradual-banner-widget .banner-indicator .tips {
    align-items: center;
    justify-content: center;
    height: 16px;
    line-height: 16px;
    margin-right: 5px;
    padding: 0 4px;
    border-radius: 4px;
    border: 1px solid rgba(78, 110, 242, 0.3);
    color: #4e6ef2;
    background: rgba(78, 110, 242, 0.08);
    font-size: 12px;
    box-sizing: border-box;
    flex-shrink: 0;
}

.xk-gradual-banner-widget .banner-indicator .tips.tips-redbg {
    border-color: rgba(255, 138, 138, 0.45);
    color: #ff9a9a;
    background: rgba(255, 138, 138, 0.12);
}

@media (max-width: 991px) {
    .xk-gradual-banner-widget {
        border-radius: 12px;
    }

    .xk-gradual-banner-widget.no-slides .gradual-show-swiper-box {
        height: auto;
    }

    .xk-gradual-banner-widget.no-slides .xk-banner-search-box {
        display: block;
        width: calc(100% - 32px);
        max-width: none;
        padding: 14px 0;
    }

    .xk-gradual-banner-widget .xk-banner-search-box {
        display: none;
    }

    .xk-gradual-banner-widget.mobile-show-search .xk-banner-search-box {
        display: block;
    }

    .xk-gradual-banner-widget.mobile-show-search .xk-banner-search-box {
        width: 80%;
        max-width: 350px;
        left: 50%;
        transform: translate(-50%, -50%);
        padding-bottom: var(--xk-mobile-search-bottom-padding, 100px);
        pointer-events: none;
    }

    .xk-gradual-banner-widget.mobile-show-search .xk-banner-search-box .search-form {
        pointer-events: auto;
    }

    .xk-gradual-banner-widget .xk-banner-search-box .xk-banner-search-links-toggle {
        height: 36px;
        max-width: 96px;
        padding: 0 9px;
        font-size: 13px;
    }

    .xk-gradual-banner-widget .xk-banner-search-links + .search-input-text .line-form-input,
    .xk-gradual-banner-widget .xk-banner-search-links + .search-input-text .scale-placeholder {
        left: 12px !important;
        padding-left: 12px !important;
    }

    .xk-gradual-banner-widget.mobile-show-search .xk-banner-search-title {
        font-size: 18px;
        margin-bottom: 12px;
    }

    .xk-gradual-banner-widget.mobile-show-pagination.mobile-show-search .xk-banner-search-box {
        width: calc(100% - var(--xk-mobile-panel-w, 260px) - 40px);
        max-width: none;
        left: 20px;
        transform: translateY(-50%);
        padding-bottom: var(--xk-mobile-search-bottom-padding, 100px);
        pointer-events: none;
    }

    .xk-gradual-banner-widget.mobile-show-pagination.mobile-show-search .xk-banner-search-title {
        font-size: 16px;
        margin-bottom: 10px;
    }

    .xk-gradual-banner-widget .xk-banner-left-content {
        display: none !important;
    }

    .xk-gradual-banner-widget:not(.mobile-show-pagination) .xk-banner-left-item.cur-item {
        display: none !important;
    }

    .xk-gradual-banner-widget.mobile-show-left-title .xk-banner-left-content,
    .xk-gradual-banner-widget.mobile-show-left-subtitle .xk-banner-left-content {
        display: block !important;
        padding-left: 20px;
    }

    .xk-gradual-banner-widget.mobile-show-left-title:not(.mobile-show-left-subtitle) .xk-banner-left-item .xk-banner-left-subtitle {
        display: none !important;
    }

    .xk-gradual-banner-widget.mobile-show-left-subtitle:not(.mobile-show-left-title) .xk-banner-left-item .xk-banner-left-title {
        display: none !important;
    }

    .xk-gradual-banner-widget.mobile-show-left-title .xk-banner-left-title {
        font-size: calc(var(--xk-left-title-size, 42px) * 0.6);
    }

    .xk-gradual-banner-widget.mobile-show-left-subtitle .xk-banner-left-subtitle {
        font-size: calc(var(--xk-left-subtitle-size, 16px) * 0.8);
    }

    .xk-gradual-banner-widget.mobile-show-pagination.mobile-show-left-title .xk-banner-left-content,
    .xk-gradual-banner-widget.mobile-show-pagination.mobile-show-left-subtitle .xk-banner-left-content {
        width: calc(100% - var(--xk-mobile-panel-w, 260px) - 40px);
    }

    .xk-gradual-banner-widget.mobile-show-pagination.mobile-show-left-title.mobile-show-left-subtitle .xk-banner-left-content {
        padding-right: 0;
    }

    .xk-gradual-banner-widget.mobile-show-left-title .xk-banner-left-content,
    .xk-gradual-banner-widget.mobile-show-left-subtitle .xk-banner-left-content {
        left: 12px !important;
        bottom: 20px;
        max-width: calc(100% - 24px);
    }

    .xk-gradual-banner-widget .gradual-show-swiper-box {
        height: var(--xkgb-h-m, 280px);
    }

    .xk-gradual-banner-widget .x-pagination-swiper {
        inset: auto 0 0 0;
        align-items: flex-end;
        justify-content: stretch;
    }

    .xk-gradual-banner-widget .x-pagination-box {
        width: 100%;
        height: auto;
        min-height: 88px;
        padding: 0 10px 10px;
        background-image: linear-gradient(
            180deg,
            rgba(0, 0, 0, 0) 0%,
            rgba(0, 0, 0, 0.64) 62%,
            rgba(0, 0, 0, 0.82) 100%
        );
    }

    .xk-gradual-banner-widget .x-pagination-item {
        display: none;
    }

    .xk-gradual-banner-widget .x-pagination-item.is-active {
        display: block;
    }

    .xk-gradual-banner-widget .x-pagination-item .banner-indicator {
        height: auto;
        min-height: 70px;
        padding: 10px 12px;
        border-radius: 12px;
        background: rgba(0, 0, 0, 0.25);
        backdrop-filter: blur(2px);
        -webkit-backdrop-filter: blur(2px);
    }

    .xk-gradual-banner-widget .x-pagination-item .banner-indicator.checked {
        background: url("xk-indicator-checked.png") no-repeat center center;
        background-size: 100% 100%;
    }

    .xk-gradual-banner-widget .x-pagination-item .banner-indicator .title {
        font-size: 17px;
        line-height: 22px;
    }

    .xk-gradual-banner-widget .x-pagination-item .banner-indicator .subtitle {
        display: block;
        margin-top: 8px;
        font-size: 13px;
        line-height: 17px;
    }

    .xk-gradual-banner-widget .x-pagination-item .banner-indicator .tips {
        display: inline-flex;
    }

    .xk-gradual-banner-widget.mobile-show-pagination .xk-banner-left-content {
        display: none;
    }

    .xk-gradual-banner-widget.mobile-show-pagination.mobile-show-left-title .xk-banner-left-content,
    .xk-gradual-banner-widget.mobile-show-pagination.mobile-show-left-subtitle .xk-banner-left-content {
        display: block !important;
    }

    .xk-gradual-banner-widget.mobile-show-pagination .x-pagination-swiper {
        inset: 0 12px 0 auto;
        align-items: center;
        justify-content: flex-start;
    }

    .xk-gradual-banner-widget.mobile-show-pagination .x-pagination-box {
        width: var(--xk-mobile-panel-w, 260px);
        height: 100%;
        min-height: auto;
        padding: 20px 10px;
        background-image: none;
        background: rgba(0, 0, 0, 0.15);
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
    }

    .xk-gradual-banner-widget.mobile-show-pagination .x-pagination-item {
        display: block;
    }

    .xk-gradual-banner-widget.mobile-show-pagination .x-pagination-item.is-active {
        display: block;
    }

    .xk-gradual-banner-widget.mobile-show-pagination .x-pagination-item .banner-indicator {
        height: auto;
        min-height: auto;
        padding: 8px 12px;
        border-radius: 12px;
        background: rgba(255, 255, 255, 0.08);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
    }

    .xk-gradual-banner-widget.mobile-show-pagination .x-pagination-item .banner-indicator.checked {
        background: rgba(255, 255, 255, 0.15);
        background-size: 100% 100%;
    }

    .xk-gradual-banner-widget.mobile-show-pagination .x-pagination-item .banner-indicator .title {
        font-size: 15px;
        line-height: 20px;
    }

    .xk-gradual-banner-widget.mobile-show-pagination .x-pagination-item .banner-indicator .subtitle {
        display: none;
    }
}

/* PC端底部卡片：对齐主题自带 header-slider-card（原 padding-left:20px 会让整排右偏 16.5px） */
.xk-bottom-cards-pc-left {
    padding-left: 0;
}

/* 移动端隐藏左边距 */
@media (max-width: 991px) {
    .xk-bottom-cards-pc-left {
        padding-left: 0;
    }
}

.dark-theme .xk-gradual-banner-widget,
.io-black-mode .xk-gradual-banner-widget,
[data-theme="dark"] .xk-gradual-banner-widget {
    box-shadow: 0 8px 26px rgba(0, 0, 0, 0.42);
}

.dark-theme .xk-gradual-banner-widget .x-pagination-box,
.io-black-mode .xk-gradual-banner-widget .x-pagination-box,
[data-theme="dark"] .xk-gradual-banner-widget .x-pagination-box {
    opacity: 0.96;
    background-image: linear-gradient(
        180deg,
        rgba(0, 0, 0, 0) 0%,
        rgba(0, 0, 0, 0.74) 24%,
        #02060d 52%,
        rgba(0, 0, 0, 0.74) 77%,
        rgba(0, 0, 0, 0) 100%
    );
}

.dark-theme .xk-gradual-banner-widget .x-pagination-item .banner-indicator,
.io-black-mode .xk-gradual-banner-widget .x-pagination-item .banner-indicator,
[data-theme="dark"] .xk-gradual-banner-widget .x-pagination-item .banner-indicator {
    background: rgba(8, 12, 20, 0.42);
}

.dark-theme .xk-gradual-banner-widget .banner-indicator.checked,
.io-black-mode .xk-gradual-banner-widget .banner-indicator.checked,
[data-theme="dark"] .xk-gradual-banner-widget .banner-indicator.checked {
    background-image:
        linear-gradient(rgba(8, 12, 20, 0.26), rgba(8, 12, 20, 0.26)),
        url("xk-indicator-checked.png");
    background-repeat: no-repeat, no-repeat;
    background-position: center center, center center;
    background-size: 100% 100%, 100% 100%;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
}


/* ════════════════════════════════════════════════════════════════════════════
   lzlgo 修补（2026-10-03）· 桌面端满宽横幅：覆盖层对齐到站点内容栏
   ─────────────────────────────────────────────────────────────────────────────
   【问题】本小工具在「电脑端全宽」模式下，覆盖层是相对满宽容器定位的：
       .xk-banner-left-content { left: 40px }             ← 距「视口」左边缘 40px
       .x-pagination-swiper    { inset:0; justify-content:flex-end } ← 贴视口右边缘
   而站点内容栏是 .container{ max-width: var(--mian-max-width) } 居中，
   1920 视口下内容栏左边缘在 260px ⇒ 首页标题比内容栏左边缘外凸约 220px，
   右侧「热门游戏」面板也顶到视口右边缘，与下方卡片不对齐。
   【另一处】.xk-gradual-banner-fullwidth-wrap{ width:98% } 会让满宽容器整体
   偏左约 19px（实测横幅中心 928 vs 视口中心 947）。
   【修法】① 外层宽度改回 100%，使满宽容器与布局视口完全重合；
          ② 覆盖层改用百分比定位 —— 其包含块 .xk-banner-fullwidth-container
             的宽度正好等于布局视口宽，因此 (100% - 内容栏宽)/2 与 .container
             的左右内缩量逐像素相等，不依赖 --xk-sbw、也不依赖滚动条宽度。
   【实测】标题左边缘 247 == main.container 左边缘 247。
          （当时右侧「热门游戏」面板也被一并对齐到内容栏右缘，2026-10-03 第三轮
            按站长要求撤销，恢复贴视口右边缘，见下方撤销说明。）
   【范围】仅桌面端（≥1240px）；移动端原有的 left:12px 规则不受影响。
   【回滚】删除本段注释块与下面的 @media 规则即可（或还原同目录 .bak 副本）。
   ════════════════════════════════════════════════════════════════════════════ */
@media (min-width: 1240px) {
    .xk-gradual-banner-fullwidth-wrap {
        width: 100% !important;
    }
    .xk-gradual-banner-fullwidth-wrap .xk-banner-left-content {
        left: max(20px, calc((100% - var(--mian-max-width, 1400px)) / 2)) !important;
    }
    /* 【2026-10-03 · 第三轮撤销】原此处有：
           .x-pagination-swiper { padding-right: max(0px, calc((100% - var(--mian-max-width,1400px))/2)) }
       它把 380px 宽的「热门游戏」暗色列推离视口右缘（1551 视口推离 75.5px、
       1624 视口 112px、1894 视口 247px），站长反馈「右侧导航滚动轮没有靠边」。
       本部件自身默认就是贴右缘（全局规则 .x-pagination-swiper{inset:0;justify-content:flex-end}），
       故撤销该条恢复贴边；左侧标题对齐内容栏的那条保留不动。 */
}

/* ════════════════════════════════════════════════════════════════════════════
   lzlgo 修补（2026-10-03 · 第二轮）· 首页横幅拉到页面最顶 + 导航栏透明叠放
   ─────────────────────────────────────────────────────────────────────────────
   【对照】主题自带首页幻灯区（.cc 那版）带 `slide-header` 类，主题 CSS 负责拉顶：
       body.nav-fixed .slide-header { margin-top: -90px }                 （>640px）
       @media (max-width:640px) { body.nav-fixed .slide-header { margin-top: -72px } }
   配合 body.nav-fixed{padding-top:88px / 72px}，幻灯区实测落在 t=-2 ⇒ 真的到顶；
   同时 header 带 `show-slide` ⇒ 透明 + 白字（--header-bg 渐变 / --header-color:#fff）。
   .com 首页用的是第三方 xk 通栏横幅，没有这个类，于是停在 padding-top:88px 处，
   与导航栏底部（68px）之间留出 20px 空白，导航栏还是不透明的。
   【修法】
     ① 把横幅所在的整个 `body > .fluid-widget-wrap` 拉上去。必须拉这一层：底部那排
        4 张卡片（.xk-banner-bottom-cards）也在同一个 widget 块里，只拉内层
        .xk-gradual-banner-fullwidth-wrap 会在横幅与卡片之间撕出 90px 空隙。
     ② 用与主题 show-slide 完全相同的变量把首页导航栏变透明（白字/白图标），
        并去掉 backdrop-filter —— 否则横幅会被导航栏的毛玻璃糊掉。
        只在「未滚动」状态生效，滚动后主题会自己加 .body-scroll，导航栏恢复不透明。
     ③ 横幅顶部加一层淡黑渐变（scrim）：实测第 2 张轮播图（10002.jpg）顶部条带
        平均亮度 196（很亮），不加压暗白色菜单/标题会看不清。
   【范围】仅首页、且页面上确实存在本横幅时；若将来启用主题自带幻灯区
           （存在 .header-slider-container）则本段自动让位，不会重复拉顶。
   【兼容】用到 CSS :has()（Chrome 105+/Safari 15.4+/Firefox 121+）。
           老浏览器不认识该选择器会整条丢弃 ⇒ 退化成现状，不会坏版。
   【回滚】删除本段注释与以下全部规则即可（或还原同目录 .bak）。
   ════════════════════════════════════════════════════════════════════════════ */

/* ① 拉到页面最顶（数值与主题 body.nav-fixed 的 padding-top 同源） */
body.home:not(:has(.header-slider-container)) > .fluid-widget-wrap:has(.xk-gradual-banner-fullwidth-wrap) {
    margin-top: -90px;
}
@media (max-width: 640px) {
    body.home:not(:has(.header-slider-container)) > .fluid-widget-wrap:has(.xk-gradual-banner-fullwidth-wrap) {
        margin-top: -72px;
    }
}

/* ③ 顶部压暗（保证白字在任何一张轮播图上都读得清） */
body.home .xk-gradual-banner-fullwidth-wrap::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 130px;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.26) 45%, rgba(0, 0, 0, 0) 100%);
    pointer-events: none;
    z-index: 10;
}
@media (max-width: 640px) {
    body.home .xk-gradual-banner-fullwidth-wrap::before {
        height: 104px;
    }
}

/* ② 导航栏透明叠在横幅上（等价主题 .header.show-slide，仅此状态） */
body.home:has(.xk-gradual-banner-fullwidth-wrap).nav-fixed:not(.body-scroll):not(.mobile-navbar-show)
    header.header:not(.show-slide) {
    --header-bg: linear-gradient(0, rgba(0, 0, 0, 0) 5%, rgba(0, 0, 0, 0.1) 80%);
    --header-color: #fff;
    -webkit-backdrop-filter: unset;
    backdrop-filter: unset;
}

/* ════════════════════════════════════════════════════════════════════════════
   lzlgo 修补（2026-10-03 · 第二轮）· 移动端「热门游戏」面板可读化
   ─────────────────────────────────────────────────────────────────────────────
   【病根】@media(max-width:991px) 下部件自带规则：
       .mobile-show-pagination .x-pagination-box { width: var(--xk-mobile-panel-w,260px);
           padding: 20px 10px; background: rgba(0,0,0,.15) }
       .mobile-show-pagination .x-pagination-item .banner-indicator { padding: 8px 12px }
   线上 --xk-mobile-panel-w 被内联写成 120px ⇒ 条目文字净宽只剩 120-20-24 = 76px，
   而「重制版 巫师3：狂猎」「虚拟机 鬼武者：剑之道」按 15px 字号需要 105~150px，
   于是标题被折断/裁切；再叠加背景只有 rgba(0,0,0,.15)，在深色轮播图上几乎看不见，
   观感就成了「右侧那个「热门游戏」滚动轮不见了」。
   【修法】① 面板宽度改为随视口自适应（34vw，122~220px 夹逼），不写死，避免小屏挤压；
           ② 内边距收紧，把宽度还给文字；
           ③ 标题允许换行、禁止裁切；
           ④ 面板背景加深到看得清（0.15 → 0.34）；
           ⑤ 搜索框占位文字改「不换行 + 省略号」——宽度不足时原本会竖排成单字列并溢出
              搜索框（线上手机端就是这个坏相）。搜索框宽度本就等于
              calc(100% - 面板宽 - 40px)，面板变宽会挤压它，故同时给下拉按钮限宽兜底。
   【范围】仅首页横幅、仅 ≤991px。桌面（≥992px）那套 282px + 深色渐变完全不动。
   【回滚】删除本段即恢复（或还原同目录 .bak）。
   ════════════════════════════════════════════════════════════════════════════ */

@media (max-width: 991px) {
    /* ① 宽度自适应：小屏不挤死搜索框，大屏足够放下「重制版 巫师3：狂猎」 */
    body.home .xk-gradual-banner-widget.mobile-show-pagination {
        --xk-mobile-panel-w: min(220px, max(122px, 34vw)) !important;
    }
    /* ② 内边距收紧 */
    body.home .xk-gradual-banner-widget.mobile-show-pagination .x-pagination-box {
        padding: 16px 8px;
    }
    body.home .xk-gradual-banner-widget.mobile-show-pagination .x-pagination-item .banner-indicator {
        padding: 8px 10px;
    }
    /* ④ 背景加深：原 rgba(0,0,0,.15) 在深色轮播图上几乎不可见 */
    body.home .xk-gradual-banner-widget.mobile-show-pagination .x-pagination-box {
        background: rgba(0, 0, 0, 0.34);
    }
    /* ③ 标题不裁切 */
    body.home .xk-gradual-banner-widget.mobile-show-pagination .x-pagination-item .banner-indicator .title {
        white-space: normal;
        overflow: visible;
        text-overflow: clip;
        word-break: break-word;
    }
    /* ⑤ 搜索框：占位文字禁止换行，避免竖排并溢出 */
    body.home .xk-gradual-banner-widget.mobile-show-pagination.mobile-show-search .xk-banner-search-box .scale-placeholder {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    body.home .xk-gradual-banner-widget.mobile-show-pagination.mobile-show-search .xk-banner-search-box .xk-banner-search-links-toggle {
        max-width: 84px;
        padding: 0 9px;
    }
}


/* ════════════════════════════════════════════════════════════════════════════
   lzlgo 修补（2026-10-03 · 第五轮）· 右侧滚动轮条目标签（.tips）显示策略
   ─────────────────────────────────────────────────────────────────────────────
   【现状】部件自带两处规则正好和站长要求相反：
     ① 全局（桌面生效）：.banner-indicator.unchecked .tips { display:none }
        ⇒ 电脑端只有「当前轮到的那一条」显示标签，其余全隐藏，随轮播时隐时现；
     ② ≤991px 断点：.x-pagination-item .banner-indicator .tips { display:inline-flex }
        ⇒ 手机端反而所有条目的标签都显示，挤占 120~220px 小面板的文字宽度。
   【要求】电脑端标签固定显示；手机端标签不显示。
   【修法】≥992px：给 unchecked 条目的 .tips 恢复 inline-flex（checked 本来就显示，不动）；
           ≤991px：.tips 一律 display:none（同时盖掉全局 .checked .tips 和 991 断点里的
           inline-flex 两条）。选择器加 body.home + 部件类，特异性高于部件自带规则。
   【实测·改动前】1920 视口：3 个带标签条目 disp=none（可见 0/3）；
                   496 视口：3 个标签 disp=flex 可见（46/46/34px 宽）。
   【范围】仅首页横幅部件；mu-plugins/lzlgo-assets 与主题目录两处同源副本一起改。
   【回滚】删除本段即恢复（或还原 /www/backup/hero5-com-时间戳/ 下两份备份）。
   ════════════════════════════════════════════════════════════════════════════ */
@media (min-width: 992px) {
    body.home .xk-gradual-banner-widget .banner-indicator.unchecked .tips {
        display: inline-flex;
    }
}
@media (max-width: 991px) {
    body.home .xk-gradual-banner-widget .x-pagination-item .banner-indicator .tips {
        display: none !important;
    }
}

/* ════════════════════════════════════════════════════════════════════════════
   lzlgo 修补（2026-10-09 · 第六轮）· 右侧滚动轮条目标签（.tips）固定槽位对齐
   ─────────────────────────────────────────────────────────────────────────────
   【问题】.tips 是 .title（display:flex）的直接子项，宽度完全由标签文字决定，
     每个带标签条目的主标题起始 x 随标签宽度浮动 —— 实测 5 条分落 1180 / 1192 / 1203
     三个位置，最大错位 23.4px（右侧面板宽 380px、.title 内容宽 332px）。
   【要求】带标签条目的主标题左边缘对齐（站长选定「方案A」）。
     「【热门游戏】」那条是本轮的 checked 高亮项、本身不带标签，保持原样、不做任何改动。
   【修法】≥992px：给 .title 里的 .tips 一个固定槽位宽度并让文字居中，超长省略号兜底。
     ⚠️ 槽位取 72px 而不是 62px：.tips 自带 box-sizing:border-box + padding:0 4px + 1px 边框，
        写 62px 总宽只剩 54px 内容区，会把最长标签 voices38（57.4px）截成省略号；
        72px 总宽 = 62px 内容区，与设计意图一致，4 个中文字（58px）也进得去。
   【范围】仅首页横幅部件、仅桌面端（≥992px）；手机端标签本就隐藏，不受影响。
   【回滚】删除本段即恢复；或还原 /www/backup/nav6-com-<时间戳>/ 下两份改名备份。
   ════════════════════════════════════════════════════════════════════════════ */
@media (min-width: 992px) {
    body.home .xk-gradual-banner-widget .x-pagination-item .banner-indicator .title .tips {
        width: 72px;              /* 固定槽位（border-box 总宽） */
        max-width: 72px;
        justify-content: center;  /* 短标签居中，两侧留白均等 */
        overflow: hidden;
        text-overflow: ellipsis;  /* 万一将来出现超长标签，省略号而非撑破格子 */
        white-space: nowrap;
    }
}