/* ============================================================
   参考站风格首页(index2.php)专用样式
   布局照搬:左侧 85px 固定分类栏 + 右侧卡片列表
   ============================================================ */
* { padding: 0; margin: 0; }
body { background: #ffffff; font-family: "Microsoft Yahei", "Open Sans", sans-serif; color: #333; -webkit-text-size-adjust: none; }
a { text-decoration: none; color: inherit; }
ul, li { list-style: none; }
img { vertical-align: middle; }
*, *:before, *:after { -webkit-box-sizing: border-box; box-sizing: border-box; }
::-webkit-scrollbar { display: none; }

/* 顶部固定搜索条 */
.cate-title { position: fixed; top: 0; left: 50%; z-index: 10; width: 100%; max-width: 688px; height: 40px; margin: auto; background: #fff; -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, .1); box-shadow: 0 0 10px rgba(0, 0, 0, .1); -webkit-transform: translateX(-50%); transform: translateX(-50%); }
.cate-title .row { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin: 0 10px; height: 40px; }
.cate-title .logo { font-size: 14px; font-weight: bold; color: #2da4f4; white-space: nowrap; }
.cate-title .logo i { margin-right: 4px; }
.cate-title .col2 { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; }
.cate-title form { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; }
.cate-title form input { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; height: 30px; padding: 0 15px; margin: 0 10px; border: 0.0625rem solid #ddd; border-radius: 100px; outline: none; font-size: 13px; background: #fafafa; -webkit-appearance: none; appearance: none; }
.cate-title form input:focus { border-color: #2da4f4; background: #fff; }
.cate-title form .go { background: none; border: 0; color: #bbb; font-size: 16px; padding: 0 4px; }
/* 顶部右侧:切回经典版(醒目按钮) */
.cate-title .switch { -ms-flex: 0 0 auto; flex: 0 0 auto; margin-left: 4px; padding: 4px 10px; background: #fe3535; color: #fff !important; font-size: 12px; line-height: 1.2; border-radius: 100px; white-space: nowrap; -webkit-box-shadow: 0 1px 4px rgba(254, 53, 53, .4); box-shadow: 0 1px 4px rgba(254, 53, 53, .4); }

/* 主体 */
.cate-bg { position: relative; max-width: 688px; margin: auto; }
.cate .row { display: -webkit-box; display: -ms-flexbox; display: flex; }

/* 左栏:固定分类 */
.cate .row .col1 { position: fixed; top: 40px; left: 50%; z-index: 9; width: 85px; height: calc(100vh - 40px); overflow: auto; background: #f0f0f0; -webkit-transform: translateX(-344px); transform: translateX(-344px); }
.cate .row .col1 .item { position: relative; height: 60px; overflow: hidden; line-height: 60px; text-align: center; font-size: 14px; color: #333; }
.cate .row .col1 .item.active { font-weight: bold; color: #000; background: #fff; }
.cate .row .col1 .item.active:before { position: absolute; top: 0; left: -6px; display: block; width: 12px; height: 60px; content: ""; background: #2da4f4; border-radius: 100%; }

/* 右栏:卡片列表 */
.cate .row .col2 { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; padding: 10px; margin: 40px 0 48px 85px; }
.itemG { display: none; }
.itemG.active { display: block; }

.col2 a.item { display: block; padding: 10px 0; border-bottom: 0.0625rem solid #f5f5f5; }
.col2 a.item:active { background: #fafafa; }

.col2 a.item .r1 { display: -webkit-box; display: -ms-flexbox; display: flex; }
.col2 a.item .r1 .c1 { -webkit-box-flex: 0; -ms-flex: 0 0 auto; flex: 0 0 auto; width: 67px; height: 67px; }
.col2 a.item .r1 .c1 img { display: block; width: 67px; height: 67px; object-fit: cover; border-radius: 8px; }
.col2 a.item .r1 .c1 .c1ph { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; width: 67px; height: 67px; background: #2da4f4; color: #fff; font-size: 24px; font-weight: bold; border-radius: 8px; }
.col2 a.item .r1 .c2 { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; margin-left: 10px; min-width: 0; }
.col2 a.item .r1 .c2 .t1 { height: 1.5em; overflow: hidden; font-size: 15px; font-weight: bold; line-height: 1.5em; }
.col2 a.item .r1 .c2 .t3 { margin-top: 5px; }
.col2 a.item .r1 .c2 .t3 span { display: inline-block; padding: 2px 3px; margin-right: 2px; margin-bottom: 4px; font-size: 12px; line-height: 1; color: #019cff; border: 0.0625rem solid #019cff; border-radius: 3px; }
.col2 a.item .r1 .c2 .t3 span.color2 { color: #ff0d00; border-color: #ff0d00; }

/* 截图:统一 16:9,完整显示不裁切 */
.col2 a.item .r2 { position: relative; width: 100%; margin-top: 10px; padding-top: 56.25%; overflow: hidden; border-radius: 10px; background: #f4f6f8; }
.col2 a.item .r2 img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: contain; }

/* 搜索无结果 */
.noresult { display: none; padding: 30px 0; text-align: center; color: #bbb; font-size: 13px; }

/* 底部 */
.cate-footer { padding: 20px 12px 30px; text-align: center; font-size: 12px; color: #b6b6b6; line-height: 1.8; }
.cate-footer .red { color: #fe3535; }

/* 窄屏:左栏贴左边(宽屏时它对齐 688px 容器的左边缘) */
@media (max-width: 688px) {
    .cate .row .col1 { left: 0; -webkit-transform: none; transform: none; }
}

/* 小屏:顶部放不下 logo 就藏掉,保证搜索框和切换按钮好点 */
@media (max-width: 400px) {
    .cate-title .logo { display: none; }
    .cate-title form input { margin-left: 0; }
}