/* ===== 全局重置与基础 ===== */
*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  font-family:"Microsoft YaHei","PingFang SC","Helvetica Neue",Arial,sans-serif;
  font-size:14px;line-height:1.7;color:#333;background:#f2f2f2;
}
a{color:#333;text-decoration:none;transition:color .2s}
a:hover{color:#c81623}
img{max-width:100%;height:auto;display:block;border:0}
ul,ol{list-style:none}
.container{width:1180px;margin:0 auto}
.clearfix::after{content:"";display:block;clear:both}
.hidden{display:none!important}

/* ===== 顶部 ===== */
.top-bar{background:#1a1a1a;color:#aaa;font-size:12px;padding:6px 0}
.top-bar .container{display:flex;justify-content:space-between;align-items:center}
.top-bar a{color:#aaa;margin-left:15px}
.top-bar a:hover{color:#fff}

/* ===== 头部 ===== */
.header{background:#fff;border-bottom:3px solid #c81623;padding:18px 0}
.header .container{display:flex;align-items:center;justify-content:space-between}
.logo{display:flex;align-items:center;gap:12px}
.logo .logo-mark{
  width:52px;height:52px;background:linear-gradient(135deg,#c81623,#ff4e20);
  border-radius:10px;display:flex;align-items:center;justify-content:center;
  color:#fff;font-size:26px;font-weight:700;box-shadow:0 4px 10px rgba(200,22,35,.3)
}
.logo h1{font-size:26px;color:#c81623;font-weight:700;letter-spacing:1px}
.logo .slogan{font-size:12px;color:#999;margin-top:2px}
.header-search{display:flex;border:2px solid #c81623;border-radius:22px;overflow:hidden;height:38px}
.header-search input{flex:1;width:220px;border:0;padding:0 14px;outline:0;font-size:13px}
.header-search button{
  background:#c81623;color:#fff;border:0;padding:0 20px;cursor:pointer;font-size:14px
}
.header-search button:hover{background:#a5121d}

/* ===== 导航 ===== */
.nav-wrap{background:#252525;position:sticky;top:0;z-index:99}
.nav{display:flex}
.nav a{
  display:block;color:#fff;padding:13px 22px;font-size:15px;position:relative
}
.nav a:hover{background:#c81623}
.nav a.active{background:#c81623;font-weight:700}

/* ===== 通用区块 ===== */
.section{margin:20px 0}
.section-title{
  display:flex;align-items:center;justify-content:space-between;
  border-bottom:2px solid #c81623;padding-bottom:8px;margin-bottom:15px
}
.section-title h2{
  font-size:20px;color:#222;position:relative;padding-left:14px
}
.section-title h2::before{
  content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);
  width:5px;height:20px;background:#c81623;border-radius:2px
}
.section-title .more{color:#999;font-size:13px}
.section-title .more:hover{color:#c81623}

/* ===== 焦点图/幻灯 ===== */
.focus{display:flex;gap:16px}
.focus-main{flex:1;position:relative;overflow:hidden;border-radius:8px;height:340px}
.focus-main .slide{position:absolute;inset:0;opacity:0;transition:opacity .6s}
.focus-main .slide.active{opacity:1}
.focus-main .slide img{width:100%;height:100%;object-fit:cover}
.focus-main .slide-info{
  position:absolute;left:0;right:0;bottom:0;padding:40px 24px 18px;
  background:linear-gradient(to top,rgba(0,0,0,.85),transparent);color:#fff
}
.focus-main .slide-info h3{font-size:20px;margin-bottom:4px}
.focus-main .slide-info p{font-size:13px;color:#ddd}
.focus-side{width:300px;display:flex;flex-direction:column;gap:16px}
.focus-side .hot-card{
  flex:1;background:#fff;border-radius:8px;overflow:hidden;
  box-shadow:0 2px 8px rgba(0,0,0,.06)
}
.focus-side .hot-card h4{
  background:#c81623;color:#fff;padding:8px 14px;font-size:14px
}
.focus-side .hot-card li{padding:9px 14px;border-bottom:1px dashed #eee;font-size:13px}
.focus-side .hot-card li:last-child{border-bottom:0}
.focus-side .hot-card li a{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.focus-side .hot-card li .num{
  display:inline-block;width:18px;height:18px;line-height:18px;text-align:center;
  background:#eee;color:#666;border-radius:3px;font-size:12px;margin-right:8px
}
.focus-side .hot-card li:nth-child(-n+3) .num{background:#c81623;color:#fff}

/* ===== 双栏布局 ===== */
.layout{display:flex;gap:20px}
.main-col{flex:1;min-width:0}
.side-col{width:300px;flex-shrink:0}

/* ===== 文章列表 ===== */
.article-list{}
.article-item{
  display:flex;gap:16px;padding:16px;background:#fff;margin-bottom:12px;
  border-radius:8px;box-shadow:0 2px 8px rgba(0,0,0,.05);transition:transform .2s
}
.article-item:hover{transform:translateY(-2px);box-shadow:0 4px 14px rgba(0,0,0,.1)}
.article-item .thumb{
  width:200px;height:130px;flex-shrink:0;border-radius:6px;overflow:hidden;
  background:#eee
}
.article-item .thumb img{width:100%;height:100%;object-fit:cover}
.article-item .info{flex:1;min-width:0;display:flex;flex-direction:column}
.article-item .info h3{font-size:18px;line-height:1.4;margin-bottom:8px}
.article-item .info h3 a{color:#222}
.article-item .info h3 a:hover{color:#c81623}
.article-item .desc{color:#777;font-size:13px;line-height:1.7;flex:1}
.article-item .meta{
  display:flex;gap:16px;color:#999;font-size:12px;margin-top:8px
}
.article-item .meta .tag{background:#fdecec;color:#c81623;padding:1px 8px;border-radius:3px}

/* ===== 卡片网格 ===== */
.card-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.info-card{background:#fff;border-radius:8px;overflow:hidden;box-shadow:0 2px 8px rgba(0,0,0,.06)}
.info-card .card-head{
  padding:10px 16px;background:#fafafa;border-bottom:1px solid #eee;
  display:flex;align-items:center;justify-content:space-between
}
.info-card .card-head h3{font-size:16px;color:#222}
.info-card .card-head h3::before{
  content:"";display:inline-block;width:4px;height:16px;background:#c81623;
  vertical-align:-3px;margin-right:8px;border-radius:2px
}
.info-card ul{padding:6px 16px}
.info-card li{padding:9px 0;border-bottom:1px dashed #eee;font-size:13px}
.info-card li:last-child{border-bottom:0}
.info-card li a{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.info-card li .date{float:right;color:#999;font-size:12px}

/* ===== 侧边栏 ===== */
.widget{background:#fff;border-radius:8px;overflow:hidden;margin-bottom:18px;box-shadow:0 2px 8px rgba(0,0,0,.05)}
.widget-head{
  padding:11px 16px;background:#fafafa;border-bottom:1px solid #eee;
  font-size:16px;font-weight:700;color:#222
}
.widget-head::before{
  content:"";display:inline-block;width:4px;height:16px;background:#c81623;
  vertical-align:-3px;margin-right:8px;border-radius:2px
}
.widget-body{padding:14px 16px}
.tag-cloud a{
  display:inline-block;padding:5px 12px;background:#f5f5f5;color:#555;
  border-radius:4px;margin:0 8px 10px 0;font-size:13px
}
.tag-cloud a:hover{background:#c81623;color:#fff}

/* ===== 分页 ===== */
.pagination{display:flex;justify-content:center;gap:6px;margin:26px 0}
.pagination a,.pagination span{
  display:inline-block;min-width:36px;height:36px;line-height:36px;text-align:center;
  border:1px solid #ddd;background:#fff;border-radius:4px;padding:0 12px;color:#555;font-size:13px
}
.pagination a:hover,.pagination .current{border-color:#c81623;background:#c81623;color:#fff}

/* ===== 文章详情 ===== */
.article-detail{background:#fff;border-radius:8px;padding:30px;box-shadow:0 2px 8px rgba(0,0,0,.05)}
.article-detail .title{font-size:26px;color:#222;text-align:center;line-height:1.4;margin-bottom:14px}
.article-detail .meta-info{
  text-align:center;color:#999;font-size:13px;padding-bottom:18px;border-bottom:1px solid #eee;margin-bottom:24px
}
.article-detail .meta-info span{margin:0 10px}
.article-content{font-size:16px;line-height:1.9;color:#333}
.article-content p{margin-bottom:18px;text-indent:2em}
.article-content h2{font-size:20px;color:#c81623;margin:26px 0 14px;padding-left:12px;border-left:4px solid #c81623}
.article-content h3{font-size:17px;color:#222;margin:20px 0 10px}
.article-content ul,.article-content ol{margin:14px 0 14px 2em}
.article-content li{margin-bottom:8px;list-style:disc}
.article-content strong{color:#c81623}
.article-content a{color:#c81623;text-decoration:underline}
.article-tags{margin-top:30px;padding-top:16px;border-top:1px dashed #ddd}
.article-tags a{display:inline-block;background:#f5f5f5;padding:4px 12px;border-radius:3px;margin-right:8px;font-size:13px}

/* ===== 面包屑 ===== */
.breadcrumb{background:#fff;border-radius:6px;padding:10px 16px;font-size:13px;color:#777;margin-bottom:16px}
.breadcrumb a{color:#555}
.breadcrumb span.sep{margin:0 8px;color:#ccc}

/* ===== 底部 ===== */
.footer{background:#1a1a1a;color:#aaa;padding:34px 0 0;margin-top:30px}
.footer-links{display:flex;justify-content:center;gap:22px;flex-wrap:wrap;margin-bottom:20px}
.footer-links a{color:#ccc;font-size:13px}
.footer-links a:hover{color:#fff}
.footer-info{text-align:center;font-size:12px;line-height:2;color:#777;padding-bottom:22px}
.footer-bottom{background:#111;padding:14px 0;text-align:center;font-size:12px;color:#666}

/* ===== 友情链接 ===== */
.flink-wrap{background:#fff;border-radius:8px;padding:20px;box-shadow:0 2px 8px rgba(0,0,0,.05)}
.flink-wrap h3{font-size:16px;margin-bottom:12px}
.flink-wrap a{display:inline-block;margin:0 14px 10px 0;color:#555;font-size:13px}
.flink-wrap a:hover{color:#c81623}

/* ===== 表格 ===== */
.rank-table{width:100%;border-collapse:collapse;background:#fff;font-size:13px}
.rank-table th{background:#c81623;color:#fff;padding:10px;text-align:center;font-weight:400}
.rank-table td{padding:10px;border-bottom:1px solid #eee;text-align:center}
.rank-table tr:hover td{background:#fdf5f5}

/* ===== 响应式 ===== */
@media(max-width:1200px){
  .container{width:100%;padding:0 14px}
  .side-col{width:260px}
}
@media(max-width:900px){
  .focus{flex-direction:column}
  .focus-main{height:220px}
  .focus-side{width:100%}
  .layout{flex-direction:column}
  .side-col{width:100%}
  .card-grid{grid-template-columns:1fr}
  .article-item .thumb{width:120px;height:90px}
  .nav{overflow-x:auto;flex-wrap:nowrap}
  .nav a{padding:12px 16px;white-space:nowrap;font-size:14px}
  .header-search{display:none}
}
@media(max-width:600px){
  .article-item{flex-direction:column}
  .article-item .thumb{width:100%;height:180px}
  .article-detail{padding:16px}
  .article-detail .title{font-size:20px}
  .article-content{font-size:15px}
}