@charset "utf-8";

/* 分类筛选栏：支持一级 + 二级分类，多行结构（参考 m.gzjsj.com/course/ 的 select） */
.top-tabbar {
    background: #fff;
    padding: .2rem;
    box-shadow: 0 .05rem .2rem #efefef;
}

/* 每一行：标题 + 横向滚动标签 */
.tabbar-row {
    display: flex;
    align-items: flex-start;
    padding: .1rem 0;
}

.tabbar-row + .tabbar-row {
    border-top: 1px dashed #bfbfbf;
    margin-top: .1rem;
    padding-top: .2rem;
}

.tabbar-row .row-title {
    flex-shrink: 0;
    font-size: .28rem;
    font-weight: 700;
    color: #1a1a2e;
    line-height: .56rem;
    margin-right: .2rem;
    white-space: nowrap;
}

/* 二级分类行标题稍淡，弱化视觉层级 */
.tabbar-row[data-level="2"] .row-title {
    color: #8a8f99;
    font-weight: 600;
}

/* 分类标签横向滚动（左右滑动） */
.tabbar-row > ul {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-wrap: nowrap;
    gap: .16rem;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.tabbar-row > ul::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
}

.tabbar-row > ul > li {
    flex-shrink: 0;
    white-space: nowrap;
    display: inline-block;
    border-radius: .3rem;
    border: .02rem solid #e8ecf1;
    background: #fbfcfd;
    cursor: pointer;
    transition: all .2s ease;
}

.tabbar-row > ul > li > a {
    display: block;
    padding: .1rem .28rem;
    font-size: .26rem;
    line-height: 1.2;
    color: #666;
}

/* 选中态：蓝边框 + 蓝字 */
.tabbar-row > ul > li.active {
    border-color: #0054b2;
    background: #fff;
}

.tabbar-row > ul > li.active > a {
    color: #0054b2;
    font-weight: 600;
}