/**
 * 游戏皮肤 B — 仅 xu5_is_game_skin_b() 时入队。
 */

/* ==========================================================================
   游戏皮肤 B：浅色外壳（顶栏 / 页脚 / 搜索下拉）
   列表与详情的内容排版仍在 index.css / single-software.css
   ========================================================================== */
html:has(body.xu5-game-skin-b){
    background:#f4f6fb;
    scrollbar-color:#c5cad6 #f4f6fb;
    scrollbar-width:thin;
    min-height:100%;
    height:auto;
}
html:has(body.xu5-game-skin-b)::-webkit-scrollbar{width:12px;height:12px}
html:has(body.xu5-game-skin-b)::-webkit-scrollbar-track{background:#f4f6fb}
html:has(body.xu5-game-skin-b)::-webkit-scrollbar-thumb{background:#c5cad6;border-radius:8px;border:3px solid #f4f6fb}
html:has(body.xu5-game-skin-b)::-webkit-scrollbar-thumb:hover{background:#b0b6c4}

body.xu5-game-skin-b{
    --xu5-b-max:1100px;
    --xu5-b-pad:20px;
    --xu5-b-inset:max(var(--xu5-b-pad), calc((100vw - var(--xu5-b-max)) / 2 + var(--xu5-b-pad)));
    background:#f4f6fb !important;
    min-height:100%;
    height:auto;
}
body.xu5-game-skin-b .container{
    width:100%;
    max-width:none;
    box-sizing:border-box;
    align-items:stretch;
}
body.xu5-game-skin-b .xu5-topbar,
body.xu5-game-skin-b .xu5-topbar.sticky{
    width:100%;
    align-self:stretch;
    box-sizing:border-box;
    padding-left:var(--xu5-b-inset);
    padding-right:var(--xu5-b-inset);
    background:#fff !important;
    box-shadow:0 1px 0 #eceef3;
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
    border-bottom:1px solid #eceef3;
}
body.xu5-game-skin-b .xu5-topbar-logo,
body.xu5-game-skin-b .xu5-topbar-logo.sitename-metal-shine{
    color:#1f2330 !important;
    background:none;
    -webkit-text-fill-color:#1f2330;
    animation:none;
    letter-spacing:.4px;
}
body.xu5-game-skin-b .xu5-topbar-logo-img{
    -webkit-mask-image:none;
    mask-image:none;
    animation:none;
}
body.xu5-game-skin-b .xu5-topbar-desc,
body.xu5-game-skin-b .xu5-topbar-desc::before{color:#9aa1ac}
body.xu5-game-skin-b .xu5-topbar-nav{gap:6px}
body.xu5-game-skin-b .nav-btn{
    display:inline-flex;
    align-items:center;
    color:#4a5160;
    padding:6px 12px;
    border-radius:8px;
    letter-spacing:0;
}
body.xu5-game-skin-b .nav-btn span{
    color:inherit;
    padding:0;
    letter-spacing:0;
}
body.xu5-game-skin-b .nav-btn:not(:last-child)::after,
body.xu5-game-skin-b .xu5-topbar-nav:has(+ .xu5-header-search) .nav-btn:last-child::after{
    content:none;
    display:none;
    margin:0;
}
body.xu5-game-skin-b .nav-btn:hover,
body.xu5-game-skin-b .nav-btn:hover span{
    color:#7c3aed;
    background:#f3f0ff;
}
body.xu5-game-skin-b .nav-btn.active,
body.xu5-game-skin-b .nav-btn.active span{
    color:#7c3aed;
    font-weight:700;
    background:#f3f0ff;
}
body.xu5-game-skin-b .xu5-topbar-toggle{color:#1f2330}
body.xu5-game-skin-b .xu5-header-search-btn,
body.xu5-game-skin-b .xu5-header-search-btn span{color:#4a5160 !important}
body.xu5-game-skin-b .xu5-header-search-btn:hover,
body.xu5-game-skin-b .xu5-header-search-btn:hover span,
body.xu5-game-skin-b .xu5-header-search.is-open .xu5-header-search-btn,
body.xu5-game-skin-b .xu5-header-search.is-open .xu5-header-search-btn span{color:#7c3aed !important}
body.xu5-game-skin-b .container>.xu5-main,
body.xu5-game-skin-b .item-tabs{
    flex:0 1 auto;
}
body.xu5-game-skin-b .footer{
    width:min(100%, var(--xu5-b-max));
    max-width:var(--xu5-b-max);
    margin:4px auto 4px;
    padding:4px var(--xu5-b-pad) 4px;
    box-sizing:border-box;
    align-self:center;
}
body.xu5-game-skin-b .xu5-footer-copyright{
    padding:2px 0 4px;
}
body.xu5-game-skin-b .xu5-page-wrapper{
    margin-bottom:8px;
}
body.xu5-game-skin-b .xu5-page-container{
    padding-bottom:12px;
}
body.xu5-game-skin-b .xu5-archive-tutorial,
body.xu5-game-skin-b .xu5-software-category{
    min-height:0;
}
body.xu5-game-skin-b .archive-content-wrapper{
    padding-bottom:8px;
}
body.xu5-game-skin-b .archive-pagination{
    margin-top:12px;
}
body.xu5-game-skin-b .xu5-header-search-panel{
    width:300px;
    top:calc(100% + 8px);
    border:1px solid #eceef3;
    border-radius:10px;
    box-shadow:0 8px 24px rgba(20,23,40,.12);
}
body.xu5-game-skin-b .xu5-header-search-field{
    gap:6px;
    margin:8px;
    padding:0 4px 0 10px;
    border:1px solid #e6e9f0;
    border-radius:8px;
    background:#f7f8fb;
}
body.xu5-game-skin-b .xu5-header-search-field:focus-within{
    border-color:#c4b5fd;
    background:#fff;
    box-shadow:0 0 0 3px rgba(139,92,246,.12);
}
body.xu5-game-skin-b .xu5-header-search-field-icon{
    width:14px;
    height:14px;
    color:#9aa1ac;
}
body.xu5-game-skin-b .xu5-header-search-input{
    height:34px;
    font-size:13px;
    outline:none !important;
    box-shadow:none !important;
}
body.xu5-game-skin-b .xu5-header-search-close{
    width:28px;
    height:28px;
    font-size:18px;
    color:#9aa1ac;
}
body.xu5-game-skin-b .xu5-header-search-close:hover{color:#7c3aed}
body.xu5-game-skin-b .xu5-header-search-drop{padding:2px 0 6px}
body.xu5-game-skin-b .xu5-header-search-empty,
body.xu5-game-skin-b .xu5-header-search-hint{
    padding:8px 12px 10px;
    font-size:12px;
    color:#9aa1ac;
}
body.xu5-game-skin-b .xu5-header-search-item{padding:6px 12px;gap:8px}
body.xu5-game-skin-b .xu5-header-search-item:hover{background:#f3f0ff}
body.xu5-game-skin-b .xu5-header-search-item img,
body.xu5-game-skin-b .xu5-header-search-item .xu5-header-search-ph{
    width:28px;
    height:28px;
    border-radius:6px;
}
body.xu5-game-skin-b .xu5-header-search-item span{font-size:13px}
body.xu5-game-skin-b .xu5-header-search-item mark{
    background:rgba(139,92,246,.16);
    color:#5b21b6;
    border-radius:2px;
}
@media screen and (max-width:1024px){
    body.xu5-game-skin-b{--xu5-b-pad:8px}
}
@media screen and (max-width:768px){
    body.xu5-game-skin-b{--xu5-b-pad:8px}
    body.xu5-game-skin-b .xu5-topbar-nav.open{
        background:#fff;
        border-top:1px solid #eceef3;
    }
    body.xu5-game-skin-b .xu5-header-search-panel{width:auto}
    body.xu5-game-skin-b .xu5-header-search-input{font-size:16px}
    body.xu5-game-skin-b .tutorial-footer-wrapper{
        margin-top:8px;
        padding:8px 0;
    }
}