/* 独立 Steam 多栏目组件：标题在左，四个原生 TAB 在右。 */
.zcc-steam-tab-post {
    position: relative;
}

.zcc-steam-tab-post.index-tab {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    column-gap: 12px;
    row-gap: 15px;
}

.zcc-steam-tab-post.index-tab > .box-body.notop {
    display: flex;
    align-items: center;
    min-width: 0;
    min-height: 32px;
    padding-bottom: 0;
    font-size: 15px;
}

.zcc-steam-tab-post.index-tab > .relative {
    position: static;
    z-index: 5;
    max-width: 100%;
    margin: 0;
}

.zcc-steam-tab-post.index-tab > .tab-content {
    grid-column: 1 / -1;
    min-width: 0;
}

.zcc-steam-tab-post.index-tab > .relative > ul {
    display: flex;
    align-items: center;
    gap: 2px;
    margin: 0;
    padding: 2px;
    border-radius: var(--main-radius);
    background: var(--muted-border-color);
    white-space: nowrap;
}

.zcc-steam-tab-post.index-tab > .relative > ul > li {
    margin: 0;
    padding: 0;
    background: transparent;
}

.zcc-steam-tab-post.index-tab > .relative > ul > li > a {
    display: block;
    padding: 4px 10px;
    border-radius: var(--main-radius);
    color: var(--muted-color);
    font-size: 15px;
    transition: color 0.2s ease, background-color 0.2s ease;
}

.zcc-steam-tab-post.index-tab > .relative > ul > li > a:hover {
    color: var(--main-color);
    background: var(--main-border-color);
}

.zcc-steam-tab-post.index-tab > .relative > ul > li.active > a {
    color: #fff !important;
    background: var(--focus-color);
}

@media (max-width: 768px) {
    .zcc-steam-tab-post.index-tab > .box-body.notop {
        min-height: 29px;
        padding-left: 5px;
    }

    .zcc-steam-tab-post.index-tab > .relative > ul > li > a {
        padding-right: 8px;
        padding-left: 8px;
    }
}

@media (max-width: 420px) {
    .zcc-steam-tab-post.index-tab > .relative > ul > li > a {
        padding-right: 6px;
        padding-left: 6px;
    }
}