/* ==== cat_index.html（2026-09-19 从视图内联 <style> 抽出：
     视图渲染在 #app 内，Vue2 挂载重建 DOM 会丢弃内联 <style>，必须外部 link） ==== */

    .page {
        width: 100%;
    }

    .page-cat-index {
        margin-top: 80px;
        min-height: calc(100vh - 90px);
        background-color: #f5f7fa;
        width: 100%;
        height:100%;
        display:flex;
        align-items:  center;
        justify-content: flex-start;
        flex-direction: column;
    }

    .cat-index-top {
        position: relative;
        height: 190px;
        width: 100%;
        display: flex;
        align-items:center;
        justify-content: center;
        font-size: 28px;
        font-weight:700;
        color:#FFF;
        flex-direction: column;
    }

    .cat-index-list {
        margin-top: 10px;
        margin-bottom: 2em;
        width: 1200px;
        display: flex;
        align-items:center;
        justify-content: flex-start;
        flex-wrap: wrap;
    }

    .cat-index-list-title {
        margin:.5em 0em;
        width: 1200px;
        height:40px;
        line-height: 40px;
        font-size: 24px;
        color: #FFF;
        font-weight: 700;
        z-index: 1;
    }

    .cat-index-item {
        width: 380px;
        height:240px;
        background-color:#FFF;
        border-radius:10px;
        margin-right:15px;
        display:flex;
        justify-content:space-between;
        align-items:center;
        margin-top: 20px;
        position: relative;
        transition: transform 0.3s ease, box-shadow 0.3s ease;
    }

    .cat-index-item-overlay {
        position: absolute;
        top: 0;
        left: 0;
        width: 380px;
        height: 240px;
        border-radius: 10px;
        filter: brightness( 100%) contrast( 100%) saturate( 100%) blur( 0px) hue-rotate( 0deg);
        background-color: #080b1a;
        opacity: 0.7;
        transition: background 0.3s ease, opacity 0.3s ease;
    }

    .cat-index-item-overlay:hover {
        background-color: #1f2a65;
        opacity: 0.3;
    }

    .cat-index-item:hover {
        transform: translateY(-4px);
        box-shadow: 0px 12px 24px 0px rgba(0,0,0,0.08);
    }

    .cat-index-item-pic {
        width:120px;
        height:120px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .search-result-item {
        cursor: pointer;
        width: 281px;
        height:320px;
        background-color: #fff;
        border-radius: 10px;
        border: 1px solid rgba(0,0,0,0.04);
        padding:.5em;
        margin-top:25px;
        display:flex;
        align-items: center;
        justify-content:flex-start;
        flex-direction:column;
        transition: transform 0.3s ease, box-shadow 0.3s ease;
    }

    .search-result-item:hover {
        transform: translateY(-4px);
        box-shadow: 0px 12px 24px 0px rgba(0,0,0,0.08);
    }

    .sucai-image-wrap {
        width:255px;
        height:175px;
        border-radius: 10px;
        overflow: hidden;
    }

    .sucai-image {
        width:255px;
        height:175px;
        border-radius: 10px;
        transition: transform 0.3s ease;
    }

    .sucai-image:hover {
        transform: scale(1.08);
    }

    .sucai-info {
        width:290px;
        height:120px;
        margin-left:10px;
        display:flex;
        justify-content:space-between;
        align-items:center;
        flex-direction:column;
    }

    .sucai-title {
        padding:0em 1em;
        margin-top:.5em;
        width:100%;
        color:#1e2a3a;
        font-size:15px;
        height:40px;
        line-height:20px;
        overflow: hidden;
        font-weight:700;
        padding-bottom:1em;
        text-decoration: none;
        cursor: pointer;
        transition: color 0.3s ease;
    }

    .sucai-title:hover {
        color: #409EFF;
    }

    .sucai-cat {
        padding:0em 1em;
        width:100%;
        color:#aaa;
        font-size:12px;
        display:flex;
        align-items: center;
        justify-content:flex-start;
    }

    .sucai-other {
        padding:0em 1em;
        width:100%;
        font-size:12px;
        color:#aaa;
        display:flex;
        justify-content:flex-start;
        align-items:center;
    }

    .dot {
        border-radius: 50%;
        height: 6px;
        margin-right: 5px;
        width: 6px;
        background-color: #2196F3;
    }
    .dot-green {
        border-radius: 50%;
        height: 6px;
        margin-right: 5px;
        width: 6px;
        background-color: #4CAF50;
    }

    .loadmore {
        margin:3em 0em;
        width: 100%;
        height: 40px;
        display:flex;
        justify-content:center;
        align-items:center;
    }

    .btn-dark {
        cursor: pointer;
        -webkit-box-shadow: 0 2px 8px rgba(30, 42, 58, .18);
        box-shadow: 0 2px 8px rgba(30, 42, 58, .18);
        min-width: 350px;
        display: inline-block;
        font-weight: 400;
        text-align: center;
        vertical-align: middle;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
        color: #fff;
        border: 1px solid transparent;
        background: linear-gradient(135deg, #1e2a3a, #2c3e50);
        padding: .375rem .75rem;
        font-size: 1rem;
        line-height: 1.5;
        border-radius: .25rem;
        transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
    }

    .btn-dark:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(30, 42, 58, .28);
        background: linear-gradient(135deg, #2c3e50, #1e2a3a);
    }

    .cat-list-block {
        background-color:#fff;
        width: 100%;
        height: 80px;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        flex-direction: column;

    }

    .cat-list {
        height: 45px;
        width: 1200px;
        border-bottom: 1px dashed #e8e8e8;
        display: flex;
        align-items: center;
        justify-content: flex-start;
    }

    .filter {
        display: block;
        overflow: hidden;

        position: relative;
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .filter li {
        display: inline-block;
        list-style: none;
        font-size: 14px;
        line-height: 14px;
        border-right: 1px solid #f0f4f5;
        padding: 0 8px;
        margin: 10px 0;
        margin-left: 0px;
        cursor: pointer;
    }

    .filter li:last-child {
        border-right: none;
    }

    .filter a {
        color: #6d6d6d;
        display: inline-block;
        border-radius: 4px;
        padding: 4px 6px;
        transition: color 0.3s ease, background 0.3s ease;
    }

    .filter .current a, .filter .current a:hover {
        color: #ffffff;
        background: #409EFF;
    }

    .filter a:hover {
        color: #ffffff!important;
        background: #409EFF;
    }

    .filter .badge {
        font-weight: 500;
        font-size: 65%;
    }
    .badge-primary-lighten {
        color: #536de6;
        background-color: rgba(83, 109, 230, .18);
    }

    .badge-pill {
        padding-right: .6em;
        padding-left: .6em;
        border-radius: 10rem;
    }
    .badge {
        display: inline-block;
        padding: .25em .4em;
        padding-right: 0.4em;
        padding-left: 0.4em;
        font-size: 75%;
        font-weight: 700;
        line-height: 1;
        text-align: center;
        white-space: nowrap;
        vertical-align: baseline;
        border-radius: .25rem;
        transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
    }

    .filter .current a > span,.filter a:hover span {
        color: #409EFF;
        background: rgb(255 255 255);
        border-radius: 2px;
    }

    a {
        color: #1e2a3a;
        text-decoration: none;
    }

    .order-block {
        height: 35px;
        line-height: 35px;
        width: 1200px;
        display: flex;
        align-items: center;
        justify-content: flex-end;
    }

    .dialog-footer {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .register-text {
        font-size:12px;
        color:#8a8a8a;
        width:120px;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        cursor: pointer;
    }

/* ==== [乐学二开 2026-09-19] hero 兜底背景 ====
   后台 4 个背景配置（cat/topic/search/article_background）实测均为空 ⇒ 背景图层是
   `background-image: url()`（无图），而本容器文字是 #FFF ⇒ 白字白底不可见。
   这里用与首页同一套渐变兜底；后台一旦配了背景图，视图内的背景图层会盖住渐变，文字仍在最上层。 */
.cat-index-top {
    background: #409EFF;
    background-image: linear-gradient(135deg, #1e4fd8 0%, #409EFF 55%, #38bdf8 100%);
}