
/* ===== 列表主体 ===== */

.list-main{display:grid;grid-template-columns:1fr 320px;gap:26px;align-items:start}

.list-body{display:flex;flex-direction:column;gap:20px}

.card{background:#fff;border:1px solid var(--c-line);border-radius:16px;overflow:hidden}


/* 分类导航条 */

.cat-bar{padding:16px 20px 8px}

.cat-bar .cat-tabs{display:flex;gap:8px;flex-wrap:wrap}

.cat-tab{padding:7px 16px;border-radius:20px;font-size:13px;cursor:pointer;color:var(--c-gray);background:#f2f4f8;transition:.2s;border:none;font-weight:500}

.cat-tab.active{background:var(--c-brand);color:#fff}

.cat-tab:hover{color:var(--c-brand)}

.cat-tab.active:hover{color:#fff}

.list-filter{display:flex;align-items:center;gap:10px;padding:12px 20px 16px;border-bottom:1px solid var(--c-line);flex-wrap:wrap}

.lf-count{font-size:14px;color:var(--c-ink);font-weight:600}

.lf-count b{color:var(--c-brand)}

.lf-sort{margin-left:auto;display:flex;gap:8px;font-size:13px}

.lf-sort span{padding:5px 14px;border-radius:20px;cursor:pointer;color:var(--c-gray);transition:.2s;background:#f2f4f8}

.lf-sort span.active{background:var(--c-brand);color:#fff}

.lf-sort span:hover{color:var(--c-brand)}

.lf-sort span.active:hover{color:#fff}


/* 问题条目 */

.q-item{padding:20px;border-bottom:1px solid var(--c-line);cursor:pointer;transition:.2s;display:block}

.q-item:last-child{border:none}

.q-item:hover{background:#fafcfe}

.qi-top{display:flex;gap:10px;margin-bottom:10px;flex-wrap:wrap}

.qi-tag{background:var(--c-brand-light);color:var(--c-brand-dark);padding:3px 11px;border-radius:20px;font-size:12px;font-weight:600}

.qi-tag.o{background:var(--c-accent-light);color:#d95f12}

.qi-tag.b{background:#eef4ff;color:#2b5fc7}

.qi-tag.p{background:#f4f0ff;color:#7a4bd0}

.qi-tag.g{background:#fff8e6;color:#b07c2e}

.qi-status{background:#eefaf1;color:#1c8a4d;padding:3px 11px;border-radius:20px;font-size:12px;font-weight:600}

.qi-title{font-size:16.5px;font-weight:700;color:var(--c-ink);line-height:1.5;transition:.2s}

.q-item:hover .qi-title{color:var(--c-brand)}

.qi-desc{font-size:13.5px;color:var(--c-gray);margin-top:6px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

.qi-meta{display:flex;align-items:center;gap:16px;margin-top:14px;font-size:12.5px;color:var(--c-gray-l);flex-wrap:wrap}

.qi-user{display:flex;align-items:center;gap:7px}

.qi-ava{width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:14px}

.qi-stat{display:flex;align-items:center;gap:16px}

.qi-stat .a-cnt{color:var(--c-brand);font-weight:600}

.qi-time{margin-left:auto}

.tag-cloud a{display:inline-block;background:#f2f4f8;color:var(--c-gray);padding:6px 14px;border-radius:8px;font-size:13px;margin:0 8px 10px 0;transition:.2s;cursor:pointer}

.tag-cloud a:hover{background:var(--c-brand);color:#fff}

.tag-cloud a.s2{font-size:14px}.tag-cloud a.s3{font-size:15px;color:var(--c-brand);font-weight:600}.tag-cloud a.s4{font-size:16px;color:var(--c-accent);font-weight:700}

.daren a{display:flex;align-items:center;gap:12px;padding:10px 0;border-bottom:1px dashed var(--c-line)}

.daren a:last-child{border:none}

.daren .av{width:42px;height:42px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:21px;flex-shrink:0}

.daren .dn b{font-size:14px;color:var(--c-ink);display:block}

.daren .dn .role{font-size:12px;color:var(--c-brand)}

.daren .dn .st{font-size:11.5px;color:var(--c-gray-l)}

.daren .d-btn{margin-left:auto;font-size:12px;color:var(--c-gray);border:1px solid var(--c-line);padding:3px 12px;border-radius:14px;transition:.2s;flex-shrink:0}

.daren a:hover .d-btn{border-color:var(--c-brand);color:var(--c-brand)}

.ask-ad{background:linear-gradient(135deg,var(--c-brand),#0ea5c8);border-radius:16px;padding:24px;color:#fff;position:relative;overflow:hidden}

.ask-ad::after{content:"?";position:absolute;right:-18px;bottom:-36px;font-size:110px;color:rgba(255,255,255,.14);font-weight:800}

.ask-ad h4{font-size:18px;margin-bottom:6px;color:#e6fff9}

.ask-ad p{font-size:13px;color:#d7f4ee;margin-bottom:16px}

.ask-ad .btn{width:100%;justify-content:center;background:#fff;color:var(--c-brand)}


/* 分页 */

.pagination{display:flex;justify-content:center;gap:8px;padding:22px 0 4px;margin-top:6px}

.page-num{min-width:38px;height:38px;border-radius:10px;border:1px solid var(--c-line);background:#fff;color:var(--c-gray);display:flex;align-items:center;justify-content:center;font-size:14px;cursor:pointer;transition:.2s;padding:0 8px}

.page-num:hover{border-color:var(--c-brand);color:var(--c-brand)}

.page-num.active{background:var(--c-brand);color:#fff;border-color:var(--c-brand)}

.page-num.disabled{opacity:.45;cursor:not-allowed}

@media(max-width:1024px){
  .list-main{grid-template-columns:1fr}
}

@media(max-width:768px){
  .section{padding:28px 0}
  .h-search{display:none}
  .menu-toggle{display:block}
  .main-nav{display:none}
  .main-nav.open{display:block}
  .main-nav .container{flex-direction:column;align-items:flex-start}
  .main-nav a{width:100%}
  .f-grid{grid-template-columns:1fr}
  .lf-sort{width:100%;margin-left:0;margin-top:6px}
  .qi-time{margin-left:0;width:100%}
  .topbar .tb-left .noti{display:none}
}
