/* ===== 全局重置 ===== */
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:"Microsoft YaHei","PingFang SC","Helvetica Neue",sans-serif;font-size:14px;line-height:1.8;color:#333;background:#f5f5f5}
a{color:#333;text-decoration:none;transition:color .2s}
a:hover{color:#c00}
ul{list-style:none}
img{max-width:100%;display:block}
.container{max-width:1200px;margin:0 auto;padding:0 15px}
.clearfix::after{content:"";display:block;clear:both}

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

/* ===== 头部 ===== */
.header{background:linear-gradient(135deg,#8b0000,#cc0000);padding:25px 0;box-shadow:0 2px 10px rgba(0,0,0,.3)}
.header .container{display:flex;align-items:center;justify-content:space-between}
.logo{color:#fff;font-size:26px;font-weight:700;text-shadow:2px 2px 4px rgba(0,0,0,.4)}
.logo span{color:#ffd700}
.header-right{text-align:right}
.header-right .hotline{color:#ffd700;font-size:16px;margin-bottom:5px}
.header-right .online{color:#fff;font-size:13px}
.header-right .online b{color:#ffd700;font-size:18px}

/* ===== 导航 ===== */
.navbar{background:#222;position:sticky;top:0;z-index:100;box-shadow:0 2px 5px rgba(0,0,0,.2)}
.navbar ul{display:flex;flex-wrap:wrap}
.navbar li{flex:1;text-align:center;min-width:120px}
.navbar a{display:block;color:#eee;font-size:15px;padding:14px 10px;font-weight:500;border-bottom:3px solid transparent}
.navbar a:hover,.navbar a.active{background:#8b0000;color:#fff;border-bottom-color:#ffd700}

/* ===== 面包屑 ===== */
.crumb{background:#fff;padding:10px 15px;margin:15px 0 0;border-radius:4px;border-left:4px solid #cc0000;font-size:13px;color:#666}
.crumb a{color:#cc0000}

/* ===== 通用布局 ===== */
.layout{display:flex;gap:20px;margin-top:20px;align-items:flex-start}
.main-content{flex:1 1 auto;min-width:0;width:auto}
.sidebar{width:320px;flex:0 0 320px}

/* ===== 卡片 ===== */
.card{background:#fff;border-radius:6px;overflow:hidden;margin-bottom:20px;box-shadow:0 1px 4px rgba(0,0,0,.08)}
.card-head{background:linear-gradient(to right,#8b0000,#cc0000);color:#fff;padding:12px 18px;font-size:16px;font-weight:700;display:flex;justify-content:space-between;align-items:center}
.card-head a{color:#ffd700;font-size:12px;font-weight:400}
.card-head .en{font-size:11px;color:#ffcccc;font-weight:400;margin-left:8px}
.card-body{padding:15px;overflow:hidden}
.card-body > *{max-width:100%;box-sizing:border-box}
.card-body p,.card-body h1,.card-body h2,.card-body h3{word-break:break-word}

/* ===== 开服列表 ===== */
.server-list{width:100%}
.server-list tr{border-bottom:1px dashed #eee;transition:background .2s}
.server-list tr:hover{background:#fff8f8}
.server-list th{background:#fafafa;padding:10px 8px;font-size:13px;color:#666;text-align:left;font-weight:600}
.server-list td{padding:11px 8px;font-size:13px}
.tag{display:inline-block;padding:2px 8px;border-radius:3px;font-size:11px;color:#fff;margin-right:5px}
.tag-hot{background:#e74c3c}
.tag-new{background:#27ae60}
.tag-rec{background:#f39c12}
.btn-play{display:inline-block;background:#cc0000;color:#fff!important;padding:4px 14px;border-radius:3px;font-size:12px;transition:background .2s}
.btn-play:hover{background:#8b0000}

/* ===== 文章列表 ===== */
.art-list li{border-bottom:1px dashed #eee;padding:10px 0;display:flex;align-items:center}
.art-list li:last-child{border-bottom:none}
.art-list .num{display:inline-block;width:22px;height:22px;line-height:22px;text-align:center;background:#eee;color:#999;border-radius:3px;font-size:12px;margin-right:10px;flex-shrink:0}
.art-list li:nth-child(-n+3) .num{background:#cc0000;color:#fff}
.art-list .title{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.art-list .date{color:#999;font-size:12px;flex-shrink:0;margin-left:10px}

/* ===== 文章详情 ===== */
.article{background:#fff;border-radius:6px;padding:30px;margin-bottom:20px;box-shadow:0 1px 4px rgba(0,0,0,.08);width:100%;overflow:hidden}
.article h1{font-size:24px;text-align:center;color:#222;margin-bottom:15px;line-height:1.4}
.art-meta{text-align:center;color:#999;font-size:12px;border-bottom:1px solid #eee;padding-bottom:15px;margin-bottom:25px}
.art-meta span{margin:0 8px}
.article p{margin-bottom:16px;text-indent:2em;font-size:15px;line-height:2;color:#333}
.article h2{font-size:19px;color:#8b0000;border-left:4px solid #cc0000;padding-left:12px;margin:25px 0 15px}
.article h3{font-size:16px;color:#333;margin:18px 0 10px}
.article ul{margin:10px 0 16px 2em}
.article ul li{list-style:disc;margin-bottom:8px}
.article .highlight{background:#fff8f0;border:1px solid #ffe0b2;padding:15px;border-radius:4px;margin:15px 0}
.article .highlight p{margin:0;text-indent:0}

/* ===== 分页 ===== */
.pagination{text-align:center;padding:20px 0}
.pagination a{display:inline-block;padding:6px 14px;margin:0 3px;background:#fff;border:1px solid #ddd;border-radius:3px;color:#666}
.pagination a:hover,.pagination a.cur{background:#cc0000;border-color:#cc0000;color:#fff}

/* ===== 侧栏组件 ===== */
.side-box{background:#fff;border-radius:6px;overflow:hidden;margin-bottom:20px;box-shadow:0 1px 4px rgba(0,0,0,.08)}
.side-box .sb-head{background:#f8f8f8;border-bottom:2px solid #cc0000;padding:10px 15px;font-size:15px;font-weight:700;color:#333}
.side-box .sb-body{padding:12px 15px}
.side-box .sb-body li{border-bottom:1px dashed #eee;padding:8px 0}
.side-box .sb-body li:last-child{border-bottom:none}
.side-box .sb-body li a{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px}

.contact-box{background:linear-gradient(135deg,#8b0000,#cc0000);color:#fff;padding:20px;border-radius:6px;margin-bottom:20px;text-align:center}
.contact-box .qq{font-size:22px;font-weight:700;color:#ffd700;margin:5px 0}
.contact-box .group{font-size:13px;color:#ffe0e0}

.stats-box{background:#fff;border-radius:6px;padding:15px;margin-bottom:20px;box-shadow:0 1px 4px rgba(0,0,0,.08)}
.stats-box .row{display:flex;justify-content:space-between;padding:6px 0;border-bottom:1px dashed #eee}
.stats-box .row:last-child{border-bottom:none}
.stats-box .row span:last-child{color:#cc0000;font-weight:700}

/* ===== 下载 ===== */
.download-box{text-align:center;padding:30px;width:100%}
.download-box .dl-icon{font-size:48px;margin-bottom:15px}
.download-box .dl-btn{display:inline-block;background:linear-gradient(to bottom,#e74c3c,#c0392b);color:#fff!important;padding:14px 50px;border-radius:30px;font-size:18px;font-weight:700;box-shadow:0 4px 10px rgba(231,76,60,.4);transition:transform .2s}
.download-box .dl-btn:hover{transform:translateY(-2px);color:#fff!important}
.dl-mirrors{margin-top:20px;text-align:left}
.dl-mirrors a{display:block;padding:10px 12px;border:1px solid #eee;border-radius:4px;margin-bottom:8px;color:#555;transition:border .2s;font-size:14px;line-height:1.6}
.dl-mirrors a:hover{border-color:#cc0000;color:#cc0000}
.dl-mirrors .mirror-tag{display:inline-block;background:#f5f5f5;padding:3px 10px;border-radius:3px;font-size:12px;margin-right:10px;color:#8b0000;font-weight:600;vertical-align:middle}
.dl-mirrors a:hover .mirror-tag{background:#fff0f0}

/* ===== 底部 ===== */
.footer{background:#1a1a1a;color:#888;margin-top:30px;padding:35px 0 20px}
.footer .f-link{border-bottom:1px solid #333;padding-bottom:15px;margin-bottom:15px}
.footer .f-link a{color:#aaa;margin-right:15px;font-size:13px}
.footer .f-link a:hover{color:#fff}
.footer .f-copy{text-align:center;font-size:12px;line-height:2.2}
.footer .f-copy a{color:#777}

/* ===== 回到顶部 ===== */
#toTop{position:fixed;right:20px;bottom:30px;width:45px;height:45px;background:#cc0000;color:#fff;border-radius:50%;text-align:center;line-height:45px;font-size:20px;cursor:pointer;opacity:0;visibility:hidden;transition:all .3s;z-index:999}
#toTop.show{opacity:1;visibility:visible}
#toTop:hover{background:#8b0000}

/* ===== 响应式 ===== */
@media(max-width:900px){
  .layout{flex-direction:column}
  .main-content{width:100%}
  .sidebar{width:100%;flex:1 1 auto}
  .header .container{flex-direction:column;text-align:center;gap:10px}
  .header-right{text-align:center}
  .navbar li{min-width:33.33%}
  .server-list{font-size:12px}
  .server-list .col-time{display:none}
  .article{padding:15px}
  .article h1{font-size:18px}
  .top-bar .container{justify-content:center}
  .download-box .dl-btn{padding:12px 30px;font-size:16px}
  .card-head{flex-wrap:wrap;gap:5px}
}
@media(max-width:600px){
  .navbar li{min-width:50%}
  .footer .f-link a{display:inline-block;margin-bottom:5px}
  .article{padding:12px}
  .article p{font-size:14px}
  .dl-mirrors a{font-size:13px}
}