@charset "utf-8";

#content{min-height:90%;}
body{padding-top:89px;}
#stage{background:#f4f4f4;min-height:100vh;padding-bottom:80px;}

/* ===== Header ===== */
#header{background:#fff;position:fixed;top:0;left:0;right:0;z-index:1000;box-shadow:0 1px 4px rgba(0,0,0,0.06);}
.header-main{display:flex;align-items:center;padding:8px 12px;gap:10px;}
.header-logo{flex-shrink:0;line-height:0;}
.header-logo img{height:30px;display:block;}
.header-search{flex:1;display:flex;align-items:center;background:#f4f4f4;border-radius:20px;height:36px;}
.header-search__btn{display:flex;align-items:center;justify-content:center;width:36px;height:36px;border:none;background:none;color:#999;font-size:18px;cursor:pointer;flex-shrink:0;}
.header-search__btn:active{color:#ff6600;}
.header-search__field{flex:1;height:100%;}
.header-search__field input{width:100%;height:100%;border:none;background:transparent;outline:none;font-size:14px;color:#333;padding-right:8px;}
.header-search__field input::placeholder{color:#bbb;}
.cats-wrap{background:#fff;border-bottom:1px solid #eee;overflow:hidden;}
.cats{display:flex;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding:0 4px;}
.cats::-webkit-scrollbar{display:none;}
.cats__item{flex-shrink:0;list-style:none;}
.cats__item a{display:block;padding:0 6px;height:36px;line-height:36px;font-size:13px;color:#666;text-decoration:none;white-space:nowrap;}
.cats__item.active a{color:#ff6600;font-weight:500;position:relative;}
.cats__item.active a:after{content:'';position:absolute;bottom:0;left:6px;right:6px;height:2px;background:#ff6600;border-radius:1px;}
@media (max-width:360px){
.cats__item a{padding:0 4px;font-size:12px;}
.cats{padding:0 2px;}
.cats__item.active a:after{left:4px;right:4px;}
}

/* ===== Common Components ===== */
.section{background:#fff;margin:0;overflow:hidden;}
.section .title{height:40px;line-height:40px;padding:0 14px;border-bottom:1px solid #f0f0f0;}
.section .title .text-title{font-size:15px;color:#ff6600;font-weight:600;position:relative;padding-left:10px;}
.section .title .text-title:before{content:'';position:absolute;left:0;top:50%;transform:translateY(-50%);width:3px;height:14px;background:#ff6600;border-radius:2px;}
.section .title .pull-right{color:#999;font-size:12px;}
.section .wrap{padding:0;}
.section .page{padding:12px 14px;text-align:center;border-top:1px solid #f0f0f0;}
.section .page .btn{display:inline-block;padding:6px 16px;margin:0 4px;color:#ff6600;border:1px solid #ff6600;border-radius:4px;font-size:13px;text-decoration:none;}
.section .page .btn:active{background:#ff6600;color:#fff;}

.breadcrumb{height:36px;line-height:36px;padding:0 12px;font-size:13px;color:#999;background:#fff;border-bottom:1px solid #eee;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin:0;}
.breadcrumb a{color:#999;}
.breadcrumb a:active{color:#ff6600;}

/* ===== Article List ===== */
.articles li{height:48px;line-height:48px;list-style:none;border-bottom:1px solid #f5f5f5;padding:0 14px;display:flex;align-items:center;}
.articles li:last-child{border-bottom:none;}
.articles li a{flex:1;height:48px;font-size:15px;line-height:48px;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;color:#2c2c2c;}
.articles li .addtime{color:#999;font-size:12px;white-space:nowrap;flex-shrink:0;margin-left:8px;display:flex;align-items:center;gap:3px;}
.articles li .addtime i{font-size:13px;}
.articles li.new a{color:#ff6600;padding-left:24px;position:relative;}
.articles li.new a:before{font-size:10px;color:#fff;line-height:16px;text-align:center;display:inline-block;content:"新";width:16px;height:16px;background:#ff6600;left:0;top:16px;position:absolute;border-radius:3px;}
.articles li.top a{color:#e74950;font-weight:500;padding-left:24px;position:relative;}
.articles li.top a:before{font-size:10px;line-height:16px;text-align:center;display:inline-block;color:#fff;background:#e74950;content:"顶";width:16px;height:16px;left:0;top:16px;position:absolute;border-radius:3px;}
.articles li.top .addtime{color:#e74950;}
.articles li.rec a{color:#07c160;font-weight:500;padding-left:24px;position:relative;}
.articles li.rec a:before{font-size:10px;line-height:16px;text-align:center;display:inline-block;color:#fff;background:#07c160;content:"荐";width:16px;height:16px;left:0;top:16px;position:absolute;border-radius:3px;}
.articles li.rec .addtime{color:#07c160;}

/* ===== Footer ===== */
#footer{margin-top:10px;background-color:#49535d;}
#footer .category-footer ul{padding:10px 0;}
#footer .category-footer ul li{width:25%;float:left;}
#footer .category-footer ul li a{display:block;color:#95a0ac;height:30px;line-height:30px;text-align:center;}
#footer .copyright{padding:20px 0 55px;line-height:25px;text-align:center;color:#707982;background-color:#404a54;}
.btn-backToTop{font-size:40px;color:#fff;line-height:48px;text-align:center;width:48px;height:48px;position:fixed;right:20px;bottom:65px;background:rgba(0,0,0,.5);border-radius:5px;}
.btn-backToTop:hover{color:#fff;}
#footer .button-group{border:1px solid #313a43;display:inline-block;border-radius:2px;background:#35414c;}
#footer .button-group .button{display:inline-block;padding:5px 10px;color:#999;border-right:1px solid #313a43;color:#707982;}
#footer .button-group .button:last-child{border-right:0;}

/* ===== Bottom Nav ===== */
#nav_bar{width:100%;background:#fff;height:70px;padding-top:6px;position:fixed;color:#333;z-index:10;bottom:0;font-size:11px;box-shadow:0 -2px 8px rgba(0,0,0,0.08);border-top:1px solid #eee;}
#nav_bar li{width:25%;height:64px;text-align:center;float:left;display:inline;list-style:none;}
#nav_bar li i{width:100%;height:32px;line-height:34px;overflow:hidden;font-size:24px;text-align:center;display:block;color:#888;transition:color 0.15s;}
#nav_bar li a{display:block;color:#666;padding-top:6px;text-decoration:none;transition:color 0.15s;}
#nav_bar li a:active{color:#ff6600;}
#nav_bar li a:active i{color:#ff6600;}