:root{
  --gold:#e8b04b;
  --gold-d:#c8902a;
  --red:#c0392b;
  --dark:#1a1209;
  --darker:#120b05;
  --paper:#f6efe2;
  --line:#e6dcc9;
  --text:#2b2115;
  --muted:#7a6a55;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:"Microsoft YaHei","PingFang SC","WenQuanYi Micro Hei",sans-serif;
  color:var(--text);
  background:var(--paper);
  background-image:radial-gradient(circle at 50% -10%,#fff8ea 0%,transparent 55%),linear-gradient(180deg,#f6efe2,#efe5d2);
  line-height:1.75;
  font-size:15px;
}
a{color:#8a5a17;text-decoration:none;transition:color .2s}
a:hover{color:var(--red)}
img{max-width:100%;display:block}
.container{max-width:1180px;margin:0 auto;padding:0 20px}
ul{list-style:none}

/* Header */
.site-header{
  background:linear-gradient(135deg,var(--darker),var(--dark));
  color:var(--gold);
  padding:22px 0 16px;
  border-bottom:3px solid var(--gold);
  position:relative;
}
.site-header::after{
  content:"";position:absolute;left:0;right:0;bottom:-8px;height:5px;
  background:linear-gradient(90deg,transparent,var(--gold-d),transparent);
  opacity:.5;
}
.header-inner{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px}
.logo{font-size:30px;font-weight:800;letter-spacing:1px;color:var(--gold);text-decoration:none}
.logo span{color:#fff}
.logo:hover{color:#fff}
.logo:hover span{color:var(--gold)}
.slogan{color:#e9d7b0;font-size:14px;letter-spacing:2px}
.header-meta{color:#a89470;font-size:13px}

/* Nav */
.site-nav{
  background:linear-gradient(180deg,#2a1c0e,#1d1308);
  position:sticky;top:0;z-index:99;
  box-shadow:0 2px 10px rgba(0,0,0,.3);
}
.nav-inner{display:flex;flex-wrap:wrap;gap:2px}
.nav-item{
  color:#e7d3a8;padding:13px 20px;font-size:15px;font-weight:600;
  border-bottom:3px solid transparent;
}
.nav-item:hover{color:var(--gold);background:rgba(232,176,75,.08)}
.nav-item.active{color:var(--gold);border-bottom-color:var(--gold);background:rgba(232,176,75,.12)}
.nav-item.nav-hot{margin-left:auto;color:#ffd666}

/* Hero */
.hero{display:grid;grid-template-columns:2fr 1fr;gap:24px;margin-top:30px;align-items:start}
.hero-text{
  background:linear-gradient(135deg,#fff,#faf1dc);
  border:1px solid var(--line);
  border-radius:12px;padding:28px;
  box-shadow:0 6px 22px rgba(140,100,50,.12);
}
.hero-text h1{
  font-size:26px;color:var(--dark);line-height:1.4;margin-bottom:14px;
  border-left:6px solid var(--gold);padding-left:12px;
}
.hero-text p{color:#5a4b37;margin-bottom:18px}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap}
.btn{
  display:inline-block;padding:11px 24px;border-radius:30px;font-weight:700;font-size:15px;
}
.btn-primary{background:linear-gradient(135deg,var(--gold),var(--gold-d));color:#fff}
.btn-primary:hover{color:#fff;filter:brightness(1.08)}
.btn-ghost{border:2px solid var(--gold-d);color:var(--gold-d);background:#fff}
.btn-ghost:hover{background:var(--gold-d);color:#fff}
.hero-side{
  background:linear-gradient(160deg,#2a1c0e,#1a1209);color:#f0dfb8;
  border-radius:12px;padding:20px;box-shadow:0 6px 22px rgba(0,0,0,.2);
}
.hero-side h2{font-size:17px;color:var(--gold);margin-bottom:12px;border-bottom:1px dashed #5a4524;padding-bottom:8px}
.hot-list li{display:flex;align-items:center;gap:8px;padding:8px 0;border-bottom:1px solid rgba(255,255,255,.06)}
.hot-list a{color:#ecd9ae}
.hot-list a:hover{color:var(--gold)}
.tag{font-size:12px;padding:1px 7px;border-radius:10px;background:#555;color:#fff;flex-shrink:0}
.tag-fire{background:#c0392b}.tag-new{background:#1e8449}

/* Section */
.section{margin-top:34px}
.section-head{display:flex;align-items:baseline;justify-content:space-between;border-bottom:2px solid var(--gold);padding-bottom:8px;margin-bottom:16px}
.section-head h2{font-size:20px;color:var(--dark)}
.more{color:var(--gold-d);font-size:14px;font-weight:600}

/* Table */
.table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:10px;background:#fff;box-shadow:0 4px 16px rgba(140,100,50,.1)}
.server-table{width:100%;border-collapse:collapse;min-width:720px}
.server-table th{background:linear-gradient(180deg,#2a1c0e,#1d1308);color:var(--gold);padding:13px 12px;text-align:left;font-weight:600;font-size:14px}
.server-table td{padding:12px;border-top:1px solid #f0e8d8}
.server-table tbody tr:nth-child(even){background:#fbf6ea}
.server-table tbody tr:hover{background:#f5ead0}
.status{padding:2px 10px;border-radius:12px;font-size:13px;font-weight:600;color:#fff}
.status.on{background:#c0392b}.status.new{background:#1e8449}.status.ok{background:#b9770e}
.stars{color:var(--gold-d);letter-spacing:1px}
.btn-sm{display:inline-block;padding:5px 14px;background:var(--gold-d);color:#fff;border-radius:16px;font-size:13px}
.btn-sm:hover{color:#fff;background:#a57825}

/* Cards */
.card-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.card{
  position:relative;background:#fff;border:1px solid var(--line);border-radius:12px;
  padding:20px 18px 16px;box-shadow:0 4px 14px rgba(140,100,50,.1);transition:transform .2s,box-shadow .2s;
}
.card:hover{transform:translateY(-5px);box-shadow:0 10px 26px rgba(140,100,50,.18)}
.rank{position:absolute;top:-12px;left:-12px;width:40px;height:40px;border-radius:50%;background:#7f8c8d;color:#fff;font-weight:800;display:flex;align-items:center;justify-content:center;font-size:18px;border:3px solid var(--paper)}
.rank.r1{background:#d4a017}.rank.r2{background:#7f8c8d}.rank.r3{background:#a0562a}
.card h3{font-size:16px;margin-bottom:8px;line-height:1.4}
.card p{color:var(--muted);font-size:13.5px}
.card-foot{display:flex;justify-content:space-between;margin-top:12px;font-size:13px;color:var(--muted);border-top:1px dashed var(--line);padding-top:8px}
.card-foot b{color:var(--red)}

/* Link list */
.dual-section{display:grid;grid-template-columns:1fr 1fr;gap:30px}
.link-list li{display:flex;justify-content:space-between;gap:12px;padding:11px 0;border-bottom:1px dashed var(--line);flex-wrap:wrap}
.link-list a{font-size:15px;flex:1}
.link-list time{color:var(--muted);font-size:13px;white-space:nowrap}

/* Features */
.feature-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.feature{background:#fff;border:1px solid var(--line);border-radius:12px;padding:20px;text-align:center;box-shadow:0 4px 14px rgba(140,100,50,.1)}
.feature b{display:block;font-size:17px;color:var(--dark);margin-bottom:8px}
.feature span{color:var(--muted);font-size:13.5px}

/* Footer */
.site-footer{background:linear-gradient(135deg,var(--darker),var(--dark));color:#cbb78e;margin-top:40px;padding:30px 0 0}
.footer-inner{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.foot-col h4{color:var(--gold);margin-bottom:10px;font-size:16px}
.foot-col p{font-size:13.5px;line-height:1.9}
.foot-col a{color:#cbb78e}
.foot-col a:hover{color:var(--gold)}
.copyright{border-top:1px solid rgba(255,255,255,.1);margin-top:22px;padding:16px 20px 24px;font-size:12.5px;color:#a89470;text-align:center;line-height:1.8}
.disclaimer{margin-top:6px;color:#8f7d5c}

/* Article page */
.breadcrumb{margin:22px 0 8px;font-size:13px;color:var(--muted)}
.breadcrumb a{color:var(--gold-d)}
.article{
  background:#fff;border:1px solid var(--line);border-radius:12px;padding:32px 36px;
  box-shadow:0 6px 22px rgba(140,100,50,.12);margin-top:14px;
}
.article h1{font-size:26px;color:var(--dark);line-height:1.4;text-align:center;margin-bottom:14px}
.article-meta{text-align:center;color:var(--muted);font-size:13px;margin-bottom:26px;padding-bottom:16px;border-bottom:1px dashed var(--line)}
.article h2{font-size:20px;color:var(--dark);margin:28px 0 12px;padding-left:12px;border-left:5px solid var(--gold);line-height:1.5}
.article h3{font-size:17px;color:var(--gold-d);margin:20px 0 10px}
.article p{margin:14px 0;color:#3a2f20;text-align:justify}
.article ul,.article ol{margin:14px 0 14px 24px}
.article li{margin:8px 0;color:#3a2f20}
.article strong{color:var(--red)}
.article table{width:100%;border-collapse:collapse;margin:18px 0}
.article th,.article td{border:1px solid var(--line);padding:10px;text-align:left}
.article th{background:#f5ead0}
.article-info{background:#fbf6ea;border:1px solid var(--line);border-radius:10px;padding:18px 22px;margin:26px 0}
.article-info table{border:none}
.article-info td{border:none;padding:6px 10px;color:#5a4b37}
.article-info td:first-child{color:var(--muted);width:90px}
.tags{margin:26px 0 6px}
.tags a{display:inline-block;background:#f5ead0;color:var(--gold-d);padding:4px 12px;border-radius:14px;margin:4px 6px 4px 0;font-size:13px}
.tags a:hover{background:var(--gold-d);color:#fff}
.share{margin-top:24px;padding-top:18px;border-top:1px dashed var(--line);font-size:14px;color:var(--muted)}
.article-nav{display:flex;justify-content:space-between;margin-top:22px;flex-wrap:wrap;gap:10px;font-size:14px}
.article-nav a{color:var(--gold-d);border:1px solid var(--gold);padding:6px 14px;border-radius:18px;background:#fff}
.article-nav a:hover{background:var(--gold-d);color:#fff}

/* List / archive */
.page-head{background:linear-gradient(135deg,#2a1c0e,#1d1308);color:#f0dfb8;border-radius:12px;padding:26px 30px;margin-top:26px}
.page-head h1{font-size:24px;color:var(--gold);margin-bottom:8px}
.page-head p{font-size:14px;color:#d8c69c}
.toolbar{display:flex;gap:10px;flex-wrap:wrap;margin:20px 0 14px;align-items:center}
.toolbar select,.toolbar input{
  padding:8px 12px;border:1px solid var(--line);border-radius:8px;background:#fff;color:var(--text);font-size:14px;
}
.toolbar input{flex:1;min-width:180px}
.pager{display:flex;justify-content:center;gap:8px;margin:26px 0}
.pager a,.pager span{display:inline-block;padding:8px 14px;border:1px solid var(--line);border-radius:8px;background:#fff;color:var(--text)}
.pager a:hover{background:var(--gold-d);color:#fff;border-color:var(--gold-d)}
.pager .current{background:var(--gold-d);color:#fff;border-color:var(--gold-d);font-weight:700}

/* Rank page */
.rank-table{width:100%;border-collapse:collapse;background:#fff;border:1px solid var(--line);border-radius:10px;overflow:hidden;box-shadow:0 4px 16px rgba(140,100,50,.1)}
.rank-table th{background:#2a1c0e;color:var(--gold);padding:13px;text-align:left}
.rank-table td{padding:12px;border-top:1px solid #f0e8d8}
.rank-table .no{font-weight:800;color:var(--gold-d);font-size:18px;width:50px}
.rank-bar{height:8px;background:#eee;border-radius:4px;overflow:hidden;margin-top:4px}
.rank-bar i{display:block;height:100%;background:linear-gradient(90deg,var(--gold),var(--gold-d))}

/* Guide / news archive */
.archive{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
.archive-item{
  background:#fff;border:1px solid var(--line);border-radius:12px;padding:18px 20px;
  box-shadow:0 4px 14px rgba(140,100,50,.1);transition:transform .2s;
}
.archive-item:hover{transform:translateY(-4px)}
.archive-item h3{font-size:17px;margin-bottom:8px;line-height:1.5}
.archive-item p{color:var(--muted);font-size:13.5px;margin-bottom:10px}
.archive-item .item-foot{display:flex;justify-content:space-between;font-size:12.5px;color:var(--muted);border-top:1px dashed var(--line);padding-top:8px}
.archive-item .item-foot a{color:var(--gold-d)}

@media (max-width:900px){
  .hero{grid-template-columns:1fr}
  .card-grid,.feature-grid{grid-template-columns:repeat(2,1fr)}
  .dual-section,.archive{grid-template-columns:1fr}
  .footer-inner{grid-template-columns:1fr}
}
@media (max-width:560px){
  .logo{font-size:24px}
  .slogan{font-size:12px;letter-spacing:1px}
  .nav-item{padding:11px 12px;font-size:14px}
  .card-grid,.feature-grid{grid-template-columns:1fr}
  .article{padding:20px 16px}
  .article h1{font-size:21px}
}