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

    .page {
        width: 100%;
    }
    
    .page-search {
        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;
    }

    .search-result {
    	position: relative;
    	height: 190px;
    	width: 100%;
    	display: flex;
    	align-items:center;
    	justify-content: center;
    	font-size: 24px;
    	font-weight:700;
    	color:#FFF;
    }

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

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

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

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

    .sucai-image {
    	width:255px;
    	height:175px;
    	border-radius: 5px;
    }

    .sucai-image:hover {
        transition:transform 0.3s ease;
        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:#212529;
        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(0,0,0,0.08);
		box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    	min-width: 350px;
    	display: inline-block;
		font-weight: 400;
		color: #212529;
		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;
		  border-top-color: transparent;
		  border-right-color: transparent;
		  border-bottom-color: transparent;
		  border-left-color: transparent;
		background: linear-gradient(135deg, #1e2a3a 0%, #2c3e50 100%);
		border-color: #2c3e50;
		padding: .375rem .75rem;
		font-size: 1rem;
		line-height: 1.5;
		border-radius: .25rem;
		transition: all 0.3s ease;
    }

    .btn-dark:hover {
        box-shadow: 0 4px 16px rgba(0,0,0,0.15);
        transform: translateY(-2px);
    }

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

    }

    .cat-list {
        min-height: 45px;
        line-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;
    }

    .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: #212529;
        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 ⇒ 白字白底不可见。
   这里用与首页同一套渐变兜底；后台一旦配了背景图，视图内的背景图层会盖住渐变，文字仍在最上层。 */
.search-result {
    background: #409EFF;
    background-image: linear-gradient(135deg, #1e4fd8 0%, #409EFF 55%, #38bdf8 100%);
}