@charset "utf-8";

::-webkit-scrollbar{background-color:transparent; width:2px; height:2px; border-radius:1px; z-index:999;}
::-webkit-scrollbar-thumb{background-color:rgba(0,0,0,.3); border-radius:1px; width:2px; height:2px;}

/* ===== Filter Bar (childs) ===== */
.filter-bar{background:#fff; border-bottom:1px solid #eee; position:sticky; top:88px; z-index:100;}
.childs-wrap{position:relative; padding-right:36px;}
.childs-wrap.has-more{overflow:hidden; height:44px;}
.childs-wrap.has-more.expanded{height:auto; overflow:visible;}
.childs-wrap + .childs-wrap{border-top:1px solid #f0f0f0;}
.childs{display:flex; flex-wrap:nowrap; padding:0 6px 0 0;}
.childs::-webkit-scrollbar{display:none;}
.childs__item{flex-shrink:0; list-style:none;}
.childs__item a{display:block; padding:0 14px; height:44px; line-height:44px; font-size:13px; color:#666; text-decoration:none; white-space:nowrap; transition:color 0.2s;}
.childs__item.active a{color:#ff6600; font-weight:600; position:relative;}
.childs__item.active a:after{content:''; position:absolute; bottom:0; left:14px; right:14px; height:3px; background:#ff6600; border-radius:2px;}
.childs__item a:active{color:#ff6600; background:#fff5f0;}
.childs__label{padding:0 10px 0 14px; height:44px; line-height:44px; font-size:13px; color:#999; font-weight:600; white-space:nowrap; flex-shrink:0;}
.childs-toggle{position:absolute; right:0; top:0; width:44px; height:44px; display:flex; align-items:center; justify-content:center; color:#999; font-size:18px; background:#fff; cursor:pointer; z-index:2; box-shadow:-6px 0 12px rgba(255,255,255,0.95);}
.childs-toggle:active{color:#ff6600;}
.childs-wrap.expanded .childs-toggle{position:static; width:auto; height:auto; padding:0 14px; justify-content:center; box-shadow:none; border-top:1px solid #eee; color:#ff6600; font-size:13px; gap:4px;}
.childs-wrap.expanded .childs-toggle:before{content:'收起';}
.childs-wrap.expanded .childs{flex-wrap:wrap; padding:8px 14px;}
.childs-toggle i{font-size:20px;}

/* ===== Article List ===== */
.articles{background:#fff; margin-top:8px;}
.articles li{list-style:none; border-bottom:1px solid #f5f5f5;}
.articles li:last-child{border-bottom:none;}
.articles li a{display:flex; align-items:center; padding:0 14px; height:48px; font-size:15px; color:#2c2c2c; text-decoration:none; gap:6px; transition:background 0.15s;}
.articles li a:active{background:#f9f9f9;}
.articles li.top a{color:#e74950; font-weight:500; padding-left:24px; position:relative;}
.articles li.top a:before{content:"顶"; color:#fff; background:#e74950; font-size:10px; line-height:16px; text-align:center; display:inline-block; width:16px; height:16px; position:absolute; left:0; top:16px; border-radius:3px;}
.articles li.top .addtime{color:#e74950;}
.articles li.no-content{padding:40px 12px; text-align:center; color:#999; font-size:14px;}

/* ===== Pagination ===== */
.pagination-bar{padding:8px 12px 16px;}
.load-more{display:flex; align-items:center; justify-content:center;}
.load-more a{display:flex; align-items:center; gap:6px; padding:12px 0; color:#666; font-size:14px; text-decoration:none;}
.load-more a:active{color:#ff6600;}
.load-more a i{font-size:16px;}
.load-more.disabled{color:#bbb; font-size:13px; justify-content:center; padding:12px 0;}

/* ===== Loading Spinner ===== */
.loading-spinner{display:inline-block; width:20px; height:20px; border:2px solid #ddd; border-top-color:#ff6600; border-radius:50%; animation:spin 0.8s linear infinite;}
@keyframes spin{to{transform:rotate(360deg)}}