* { margin:0; padding:0; box-sizing:border-box; }
body { font-family:'Microsoft YaHei','PingFang SC',sans-serif; background:#10151f; color:#c0c8d0; line-height:1.6; position:relative; overflow-x:hidden; }
body::before { content:""; position:fixed; inset:0; background:radial-gradient(circle at 20% 25%, rgba(212,175,55,.07) 0%, transparent 42%), radial-gradient(circle at 78% 70%, rgba(245,215,126,.05) 0%, transparent 48%), linear-gradient(180deg,#10151f 0%,#1a2330 45%,#10151f 100%); pointer-events:none; z-index:-2; }
body::after { content:""; position:fixed; inset:0; background:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 320"><circle cx="30" cy="40" r="2" fill="%23f5d77e" opacity=".5"/><circle cx="150" cy="90" r="1.6" fill="%23e8c766" opacity=".35"/><circle cx="250" cy="60" r="2.4" fill="%23c9a03d" opacity=".4"/><circle cx="90" cy="200" r="1.8" fill="%23f5d77e" opacity=".3"/><circle cx="290" cy="170" r="1.4" fill="%23e8c766" opacity=".45"/><circle cx="200" cy="260" r="2.2" fill="%23c9a03d" opacity=".35"/><circle cx="60" cy="290" r="1.5" fill="%23f5d77e" opacity=".4"/><circle cx="310" cy="300" r="1.8" fill="%23e8c766" opacity=".3"/></svg>'); background-size:320px 320px; opacity:.5; animation:emberRise 26s linear infinite; pointer-events:none; z-index:-1; }
@keyframes emberRise { from { background-position:0 0; } to { background-position:0 -1280px; } }
@media (prefers-reduced-motion: reduce) { body::after { animation:none; } .logo-icon { animation:none; } }
a:focus-visible { outline:2px solid #f5d77e; outline-offset:2px; border-radius:4px; }
.ic { fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.container { max-width:1400px; margin:0 auto; padding:0 24px; position:relative; z-index:10; }

/* ===== 头部 ===== */
.hero-section { position:relative; margin-bottom:30px; border-radius:0 0 60px 60px; overflow:hidden; box-shadow:0 20px 50px rgba(0,0,0,.55); }
.hero-background { position:absolute; inset:0; background:linear-gradient(135deg,#2a2415 0%,#1a2330 45%,#10151f 100%); }
.hero-background::before { content:""; position:absolute; inset:0; background-image:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 400"><defs><linearGradient id="g1" x1="0" y1="0" x2="1" y2="1"><stop offset="0" stop-color="%23c9a03d" stop-opacity=".14"/><stop offset="1" stop-color="%239a751f" stop-opacity=".04"/></linearGradient><linearGradient id="g2" x1="1" y1="0" x2="0" y2="1"><stop offset="0" stop-color="%23f5d77e" stop-opacity=".10"/><stop offset="1" stop-color="%23c9a03d" stop-opacity=".02"/></linearGradient></defs><polygon points="0,400 180,210 360,340 540,150 720,300 900,110 1080,270 1200,180 1200,400" fill="url(%23g1)"/><polygon points="0,400 260,300 460,390 660,250 860,380 1060,220 1200,340 1200,400" fill="url(%23g2)"/><path d="M0,360 Q220,260 420,330 Q620,400 820,290 Q1020,180 1200,310 L1200,400 L0,400 Z" fill="rgba(201,160,61,.07)"/></svg>'); background-size:cover; background-position:center bottom; opacity:.85; }
.top-bar { padding:38px 0 24px; position:relative; z-index:10; border-bottom:2px solid rgba(201,160,61,.35); backdrop-filter:blur(5px); }
.header-wrapper { display:flex; align-items:center; justify-content:space-between; gap:30px; flex-wrap:wrap; }
.logo-area { display:flex; align-items:center; gap:20px; }
.logo-icon { width:86px; height:86px; flex:none; background:linear-gradient(145deg,#f0d070,#9a751f); border-radius:38% 62% 42% 58% / 58% 40% 60% 42%; display:flex; align-items:center; justify-content:center; box-shadow:0 8px 0 #6b5414, 0 14px 26px rgba(0,0,0,.45), inset 0 -4px 0 rgba(0,0,0,.25), inset 0 5px 14px rgba(255,255,255,.35); animation:floatGold 5s ease-in-out infinite; }
@keyframes floatGold { 0%,100% { transform:translateY(0) rotate(-3deg); } 50% { transform:translateY(-6px) rotate(3deg); } }
.logo-icon svg { width:42px; height:42px; color:#241a05; stroke-width:2; }
.site-title { font-size:46px; font-weight:900; letter-spacing:7px; background:linear-gradient(180deg,#fff 0%,#fdf3d0 30%,#f0d070 62%,#c9a03d 100%); -webkit-background-clip:text; background-clip:text; color:transparent; text-shadow:3px 3px 0 rgba(50,38,6,.55); }
.site-sub { font-family:Georgia,'Times New Roman',serif; font-size:14px; color:#f5d77e; letter-spacing:5px; font-weight:600; text-transform:uppercase; text-shadow:2px 2px 0 rgba(0,0,0,.5); margin-top:4px; }
.search-wrapper { flex:0 0 320px; }
.search-box { display:flex; align-items:center; background:rgba(201,160,61,.1); border:2px solid #c9a03d; border-radius:50px 14px 50px 14px; padding:4px 4px 4px 20px; box-shadow:0 5px 0 #5c4512, inset 0 2px 10px rgba(245,215,126,.1); }
.search-box input { flex:1; background:transparent; border:none; outline:none; padding:11px 8px; font-size:14px; color:#fff; }
.search-box input::placeholder { color:rgba(216,207,174,.55); }
.search-box button { display:flex; align-items:center; gap:7px; background:linear-gradient(135deg,#f0d070,#b08a28); border:none; border-radius:32px 10px 32px 10px; padding:11px 20px; color:#241a05; font-size:15px; font-weight:800; cursor:pointer; box-shadow:0 3px 0 #7a5c14; }
.search-box button svg { width:16px; height:16px; }
.nav-wrapper { margin-top:28px; position:relative; }
.main-nav { display:flex; justify-content:space-between; align-items:flex-end; gap:6px; }
.nav-item { flex:1; text-decoration:none; }
.nav-item-inner { display:block; background:linear-gradient(180deg,rgba(201,160,61,.16) 0%,rgba(90,70,20,.42) 100%); border:2px solid rgba(245,215,126,.4); border-top:none; border-radius:0 0 26px 26px; padding:15px 6px 13px; text-align:center; clip-path:polygon(8% 0,92% 0,100% 24%,96% 100%,4% 100%,0 24%); box-shadow:inset 0 8px 18px rgba(245,215,126,.1), 0 -8px 18px rgba(0,0,0,.35); transition:all .2s; }
.nav-item:hover .nav-item-inner { background:linear-gradient(180deg,rgba(245,215,126,.28) 0%,rgba(140,105,30,.5) 100%); }
.nav-item.active .nav-item-inner { background:linear-gradient(180deg,#f0d070 0%,#c09838 100%); border-color:#f5d77e; box-shadow:inset 0 8px 20px rgba(255,255,255,.35), 0 -8px 22px rgba(201,160,61,.45); }
.nav-ic { width:28px; height:28px; color:#f5d77e; display:block; margin:0 auto 7px; }
.nav-item.active .nav-ic { color:#241a05; }
.nav-text { display:block; font-size:16px; font-weight:800; color:#f0e6c8; letter-spacing:3px; white-space:nowrap; }
.nav-item.active .nav-text { color:#241a05; }
.nav-sub { display:block; font-family:Georgia,serif; font-size:10px; letter-spacing:2px; color:#a08c50; margin-top:4px; text-transform:uppercase; }
.nav-item.active .nav-sub { color:#5c4512; }

/* ===== 面包屑 + 栏目头 ===== */
.breadcrumb { padding:28px 0 14px; color:#8a94a6; font-size:14px; }
.breadcrumb a { color:#f0d98c; text-decoration:none; }
.breadcrumb a:hover { color:#f5d77e; }
.breadcrumb .current { color:#f0e6c8; }
.category-header { background:linear-gradient(135deg,rgba(80,62,18,.75) 0%,rgba(28,36,50,.92) 100%); border:2px solid #c9a03d; border-radius:16px 6px 16px 6px; padding:24px 30px; margin-bottom:30px; display:flex; align-items:center; gap:24px; box-shadow:0 9px 0 #0a0e16, 0 14px 28px rgba(0,0,0,.4); }
.category-icon { width:76px; height:76px; flex:none; background:linear-gradient(145deg,#f0d070,#9a751f); border-radius:34% 66% 38% 62% / 62% 40% 60% 38%; display:flex; align-items:center; justify-content:center; box-shadow:0 6px 0 #6b5414, inset 0 4px 10px rgba(255,255,255,.35); transform:rotate(-3deg); }
.category-icon svg { width:38px; height:38px; color:#241a05; stroke-width:2; }
.category-info h1 { color:#f5d77e; font-size:32px; font-weight:900; letter-spacing:3px; text-shadow:2px 2px 0 rgba(0,0,0,.45); }
.category-info .desc { color:#b8c2d2; font-size:15px; margin-top:6px; letter-spacing:1px; }
.category-stats { margin-left:auto; text-align:right; }
.stats-num { font-size:44px; font-weight:900; color:#f5d77e; line-height:1.1; }
.stats-label { color:#8a94a6; font-size:13px; letter-spacing:2px; }

/* ===== 内容双栏 ===== */
.content-layout { display:grid; grid-template-columns:1fr 320px; gap:30px; align-items:start; margin:6px 0 20px; }
.article-list { background:linear-gradient(180deg,rgba(30,40,56,.92),rgba(22,30,44,.95)); border:1px solid rgba(201,160,61,.35); border-radius:14px 6px 14px 6px; overflow:hidden; box-shadow:0 10px 0 #0a0e16, 0 16px 34px rgba(0,0,0,.4); }
.list-head { padding:16px 26px; background:linear-gradient(90deg,rgba(120,92,20,.45),rgba(60,46,12,.5)); border-bottom:2px solid rgba(201,160,61,.5); display:flex; align-items:center; justify-content:space-between; }
.list-head-left { display:flex; align-items:center; gap:10px; color:#f5d77e; font-weight:800; font-size:18px; letter-spacing:1px; }
.list-head-left svg { width:20px; height:20px; }
.sort-group { display:flex; gap:8px; }
.sort { padding:5px 14px; border-radius:16px 4px 16px 4px; border:1px solid rgba(201,160,61,.3); color:#a8b2c4; font-size:13px; text-decoration:none; transition:all .15s; }
.sort:hover { color:#f5d77e; border-color:#c9a03d; }
.sort.active { background:linear-gradient(135deg,#f0d070,#c09838); color:#241a05; border-color:#f5d77e; font-weight:700; }
.a-item { padding:20px 26px; border-bottom:1px solid rgba(201,160,61,.12); transition:background .15s; }
.a-item:hover { background:rgba(201,160,61,.05); }
.a-item:last-of-type { border-bottom:none; }
.a-title { font-size:18.5px; font-weight:700; margin-bottom:8px; }
.a-title a { color:#e8e2d0; text-decoration:none; }
.a-title a:hover { color:#f5d77e; }
.a-meta { display:flex; gap:18px; font-size:12.5px; color:#8a94a6; margin-bottom:8px; }
.a-meta i { display:inline-flex; align-items:center; gap:6px; font-style:normal; }
.a-meta svg { width:14px; height:14px; color:#c9a03d; }
.a-excerpt { color:#a8b2c4; font-size:14px; line-height:1.75; }
.pagination { padding:20px 26px 22px; display:flex; justify-content:center; gap:8px; border-top:1px solid rgba(201,160,61,.15); }
.page { min-width:38px; height:38px; padding:0 6px; display:flex; align-items:center; justify-content:center; background:rgba(16,21,31,.7); border:1px solid rgba(201,160,61,.3); border-radius:9px 3px 9px 3px; color:#a8b2c4; text-decoration:none; font-size:14px; transition:all .15s; }
.page:hover { color:#f5d77e; border-color:#c9a03d; }
.page.active { background:linear-gradient(135deg,#f0d070,#c09838); color:#241a05; border-color:#f5d77e; font-weight:800; box-shadow:0 3px 0 #7a5c14; }

/* ===== 侧边栏 ===== */
.sidebar { display:flex; flex-direction:column; gap:26px; }
.sb-card { background:linear-gradient(180deg,rgba(30,40,56,.92),rgba(20,27,40,.95)); border:1px solid rgba(201,160,61,.35); border-radius:12px 5px 12px 5px; overflow:hidden; box-shadow:0 8px 0 #0a0e16, 0 12px 26px rgba(0,0,0,.4); }
.sb-head { padding:14px 20px; background:linear-gradient(90deg,rgba(120,92,20,.5),rgba(60,46,12,.55)); border-bottom:2px solid rgba(201,160,61,.5); color:#f5d77e; font-weight:800; font-size:17px; letter-spacing:1px; display:flex; align-items:center; gap:10px; }
.sb-head svg { width:20px; height:20px; }
.sb-body { padding:16px 18px; }
.server-list { list-style:none; }
.server-list li { padding:11px 0; border-bottom:1px dashed rgba(201,160,61,.2); display:flex; align-items:center; gap:10px; }
.server-list li:last-child { border-bottom:none; }
.dot { width:9px; height:9px; flex:none; border-radius:50%; }
.dot-hot { background:#e74c3c; box-shadow:0 0 10px #e74c3c; }
.dot-new { background:#f5d77e; box-shadow:0 0 10px #f5d77e; }
.dot-soon { background:#5a6478; }
.sv-info { flex:1; min-width:0; }
.sv-name { display:block; color:#e8e2d0; font-size:15px; font-weight:600; text-decoration:none; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sv-name:hover { color:#f5d77e; }
.sv-time { font-size:11.5px; color:#8a94a6; }
.sv-time b { color:#f5d77e; font-weight:600; }
.sv-chip { flex:none; padding:2px 9px; border-radius:10px 3px 10px 3px; font-size:11px; }
.chip-hot { border:1px solid rgba(231,76,60,.5); color:#ff9a85; background:rgba(231,76,60,.1); }
.chip-new { border:1px solid rgba(245,215,126,.45); color:#f0d98c; background:rgba(201,160,61,.1); }
.chip-soon { border:1px solid rgba(138,148,166,.4); color:#a8b2c4; background:rgba(138,148,166,.08); }
.sb-more { margin-top:13px; text-align:center; }
.sb-more a { color:#a08c50; text-decoration:none; font-size:13px; }
.sb-more a:hover { color:#f5d77e; }
.rank-list { list-style:none; }
.rank-list li { padding:10px 0; border-bottom:1px dashed rgba(201,160,61,.2); display:flex; align-items:center; gap:10px; }
.rank-list li:last-child { border-bottom:none; }
.rank-num { width:26px; height:26px; flex:none; background:rgba(10,14,22,.6); border:1px solid rgba(201,160,61,.25); border-radius:7px 2px 7px 2px; display:flex; align-items:center; justify-content:center; font-size:12.5px; font-weight:700; color:#a8b2c4; }
.rank-num.top1 { background:linear-gradient(135deg,#f5d77e,#c09838); color:#241a05; border:none; }
.rank-num.top2 { background:rgba(201,160,61,.35); color:#f5e8b8; border:none; }
.rank-num.top3 { background:rgba(201,160,61,.18); color:#e8d8a0; border:none; }
.rank-list a { flex:1; color:#a8b2c4; text-decoration:none; font-size:14px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.rank-list a:hover { color:#f5d77e; }
.pick-list { list-style:none; }
.pick-list li { padding:10px 0; border-bottom:1px dashed rgba(201,160,61,.2); display:flex; align-items:center; gap:10px; }
.pick-list li:last-child { border-bottom:none; }
.pick-list svg { width:16px; height:16px; flex:none; color:#f0d070; }
.pick-list a { flex:1; color:#a8b2c4; text-decoration:none; font-size:14px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pick-list a:hover { color:#f5d77e; }

/* ===== 页脚 ===== */
.footer { background:linear-gradient(0deg,#0a0e16 0%,#141b28 100%); border-top:3px solid #c9a03d; padding:34px 0 40px; margin-top:44px; clip-path:polygon(0 0,100% 4%,100% 100%,0 100%); }
.copyright { text-align:center; color:#7d8798; font-size:14px; line-height:1.9; }