/* Demo 1 - 经典官方风: 深蓝+金, 居中 */
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI','Microsoft YaHei',sans-serif;background:#0d1117;color:#e0e0e0;line-height:1.6;overflow-x:hidden}
a{color:inherit;text-decoration:none;transition:all .25s}
ul{list-style:none}
.container{max-width:1200px;margin:0 auto;padding:0 24px}
img{max-width:100%;display:block}

/* 导航 */
.navbar{position:fixed;top:0;width:100%;background:rgba(13,17,23,.95);backdrop-filter:blur(12px);border-bottom:1px solid rgba(218,165,32,.25);z-index:1000;height:72px}
.nav-inner{max-width:1200px;margin:0 auto;padding:0 24px;display:flex;align-items:center;height:72px;justify-content:space-between}
.nav-logo{display:flex;align-items:center;gap:10px;font-size:20px;font-weight:700;color:#daa520}
.logo-icon{font-size:28px}
.nav-menu{display:flex;gap:0}
.nav-menu li a{padding:0 18px;line-height:72px;display:block;font-size:15px;color:#bbb;position:relative;transition:.25s}
.nav-menu li a:hover{color:#daa520;background:rgba(218,165,32,.06)}
.nav-menu li a::after{content:'';position:absolute;bottom:0;left:18px;right:18px;height:2px;background:#daa520;transform:scaleX(0);transition:.25s}
.nav-menu li a:hover::after{transform:scaleX(1)}
.nav-btn{padding:10px 24px;background:linear-gradient(180deg,#f5d76e,#b8860b);color:#1a1200;font-weight:700;border-radius:4px;box-shadow:0 0 16px rgba(218,165,32,.3);flex-shrink:0;font-size:14px}
.nav-btn:hover{transform:translateY(-2px);filter:brightness(1.1)}
.mobile-toggle{display:none;background:none;border:1px solid rgba(218,165,32,.4);color:#daa520;font-size:22px;padding:6px 12px;cursor:pointer;border-radius:4px}

/* Hero */
.hero{min-height:650px;padding-top:72px;display:flex;align-items:center;position:relative;overflow:hidden}
.hero-bg{position:absolute;inset:0;background:linear-gradient(135deg,rgba(13,17,23,.92) 0%,rgba(26,26,62,.85) 50%,rgba(13,17,23,.95) 100%),radial-gradient(circle at 70% 40%,rgba(218,165,32,.15),transparent 50%);z-index:0}
.hero-bg::after{content:'';position:absolute;inset:0;background:repeating-linear-gradient(0deg,rgba(255,255,255,.015) 0,rgba(255,255,255,.015) 1px,transparent 1px,transparent 4px)}
.hero-content{position:relative;z-index:2;max-width:1200px;width:100%;margin:0 auto;padding:60px 24px;text-align:center}
.hero-badge{display:inline-block;color:#daa520;font-size:16px;letter-spacing:4px;margin-bottom:20px;text-shadow:0 0 12px rgba(218,165,32,.4)}
.hero h1{font-size:56px;line-height:1.15;margin-bottom:18px;background:linear-gradient(180deg,#fff,#daa520);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.hero-sub{font-size:20px;color:#aaa;margin-bottom:16px;letter-spacing:2px}
.hero-desc{max-width:650px;margin:0 auto 36px;color:#999;font-size:16px;line-height:1.8}
.hero-btns{display:flex;gap:18px;justify-content:center;flex-wrap:wrap;margin-bottom:50px}
.btn-primary{padding:16px 36px;background:linear-gradient(180deg,#f5d76e,#b8860b);color:#1a1200;font-weight:700;font-size:18px;border-radius:4px;box-shadow:0 0 24px rgba(218,165,32,.35)}
.btn-outline{padding:16px 36px;border:1px solid rgba(218,165,32,.5);color:#daa520;font-size:18px;border-radius:4px;background:rgba(0,0,0,.3)}
.btn-primary:hover,.btn-outline:hover{transform:translateY(-3px);filter:brightness(1.1)}
.hero-stats{display:flex;justify-content:center;gap:50px;flex-wrap:wrap}
.stat{text-align:center}
.stat strong{display:block;font-size:32px;color:#daa520;text-shadow:0 0 16px rgba(218,165,32,.3)}
.stat span{font-size:13px;color:#888}

/* 通用 */
.sec-head{text-align:center;margin-bottom:50px}
.sec-head h2{font-size:36px;color:#daa520;margin-bottom:10px;letter-spacing:2px}
.sec-head p{color:#888;font-size:16px}

/* 特色 */
.features{padding:90px 0;background:#0a0e14}
.feature-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.feature-card{background:rgba(255,255,255,.03);border:1px solid rgba(218,165,32,.15);border-radius:12px;padding:36px 28px;text-align:center;transition:.3s}
.feature-card:hover{border-color:rgba(218,165,32,.5);transform:translateY(-6px);box-shadow:0 12px 30px rgba(0,0,0,.3)}
.f-icon{font-size:42px;margin-bottom:18px}
.feature-card h3{font-size:18px;color:#f5d76e;margin-bottom:10px}
.feature-card p{font-size:14px;color:#999;line-height:1.7}

/* 版本 */
.versions{padding:90px 0}
.version-tabs{display:grid;grid-template-columns:repeat(3,1fr);background:rgba(0,0,0,.4);border:1px solid rgba(218,165,32,.2);border-radius:8px 8px 0 0;overflow:hidden}
.vtab{padding:28px 20px;text-align:center;cursor:pointer;transition:.25s;border-right:1px solid rgba(255,255,255,.06);position:relative}
.vtab:last-child{border-right:none}
.vtab strong{display:block;font-size:36px;color:#888;transition:.25s}
.vtab span{font-size:14px;color:#777;margin-top:6px;display:block;transition:.25s}
.vtab::after{content:'';position:absolute;bottom:0;left:50%;transform:translateX(-50%);width:0;height:3px;background:linear-gradient(90deg,#f5d76e,#b8860b);transition:.25s}
.vtab:hover,.vtab.active{background:rgba(218,165,32,.08)}
.vtab:hover strong,.vtab.active strong{color:#daa520;text-shadow:0 0 14px rgba(218,165,32,.4)}
.vtab:hover::after,.vtab.active::after{width:60%}
.ver-panel{display:none;background:rgba(255,255,255,.02);border:1px solid rgba(218,165,32,.15);border-top:none;border-radius:0 0 8px 8px;padding:40px;animation:fadeIn .3s}
.ver-panel.active{display:block}
@keyframes fadeIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
.ver-info h3{font-size:24px;color:#f5d76e;margin-bottom:14px}
.ver-info>p{color:#bbb;line-height:1.8;margin-bottom:20px;font-size:15px}
.ver-specs{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.ver-specs li{color:#999;font-size:14px;padding:8px 0;border-bottom:1px solid rgba(255,255,255,.05)}

/* 职业 */
.classes{padding:90px 0;background:#0a0e14}
.class-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:20px}
.class-card{background:rgba(255,255,255,.03);border:1px solid rgba(218,165,32,.12);border-radius:10px;padding:28px 20px;text-align:center;transition:.3s}
.class-card:hover{border-color:rgba(218,165,32,.45);transform:translateY(-4px)}
.class-icon{font-size:40px;margin-bottom:14px}
.class-card h3{font-size:18px;color:#f5d76e;margin-bottom:10px}
.class-card>p{font-size:13px;color:#999;line-height:1.6;margin-bottom:16px}
.class-bar{display:flex;align-items:center;gap:8px;margin-bottom:6px;font-size:12px;color:#888}
.class-bar .bar{flex:1;height:4px;background:rgba(255,255,255,.08);border-radius:2px;overflow:hidden}
.bar-fill{height:100%;background:linear-gradient(90deg,#daa520,#f5d76e);border-radius:2px}

/* 副本 */
.dungeons{padding:90px 0}
.dungeon-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.dungeon-card{background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.08);border-radius:10px;padding:30px 24px;position:relative;transition:.3s}
.dungeon-card:hover{border-color:rgba(218,165,32,.4);transform:translateY(-4px)}
.d-level{display:inline-block;padding:3px 10px;background:rgba(218,165,32,.15);color:#daa520;font-size:12px;font-weight:600;border-radius:4px;margin-bottom:12px}
.dungeon-card h3{font-size:20px;color:#f5d76e;margin-bottom:10px}
.dungeon-card p{font-size:14px;color:#999;line-height:1.7}
.d-tag{position:absolute;top:16px;right:16px;font-size:12px;color:#888}

/* 社区 */
.community{padding:90px 0;background:#0a0e14}
.comm-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.comm-card{background:rgba(255,255,255,.03);border:1px solid rgba(218,165,32,.12);border-radius:10px;padding:28px;transition:.3s}
.comm-card:hover{border-color:rgba(218,165,32,.4);transform:translateY(-3px)}
.comm-card h3{font-size:18px;color:#f5d76e;margin-bottom:10px}
.comm-card p{font-size:14px;color:#999;line-height:1.7;margin-bottom:12px}
.comm-card span{font-size:12px;color:#daa520;font-weight:600}

/* FAQ */
.faq{padding:90px 0}
.faq-list{max-width:800px;margin:0 auto}
.faq-item{border-bottom:1px solid rgba(255,255,255,.08);margin-bottom:0}
.faq-q{width:100%;background:none;border:none;color:#e0e0e0;padding:20px 0;font-size:16px;text-align:left;cursor:pointer;display:flex;justify-content:space-between;align-items:center;transition:.25s}
.faq-q:hover{color:#daa520}
.faq-q span{font-size:22px;color:#daa520;flex-shrink:0;transition:.25s}
.faq-a{max-height:0;overflow:hidden;transition:max-height .35s ease}
.faq-a.open{max-height:300px}
.faq-a p{padding:0 0 20px;color:#999;line-height:1.8;font-size:14px}

/* 下载 */
.download{padding:90px 0;background:linear-gradient(180deg,#0a0e14,#0d1117);text-align:center}
.download h2{font-size:36px;color:#daa520;margin-bottom:12px}
.download>p{color:#888;font-size:16px;margin-bottom:40px}
.dl-options{display:flex;gap:20px;justify-content:center;flex-wrap:wrap}
.dl-btn{display:flex;align-items:center;gap:14px;padding:20px 32px;background:rgba(255,255,255,.04);border:1px solid rgba(218,165,32,.25);border-radius:8px;transition:.3s;min-width:220px}
.dl-btn:hover{border-color:#daa520;transform:translateY(-3px);box-shadow:0 8px 24px rgba(0,0,0,.3)}
.dl-main{background:linear-gradient(180deg,rgba(218,165,32,.12),rgba(218,165,32,.04))}
.dl-icon{font-size:28px}
.dl-text{text-align:left}
.dl-text strong{display:block;font-size:16px;color:#f5d76e;margin-bottom:4px}
.dl-text small{font-size:12px;color:#888}

/* 页脚 */
.footer{padding:60px 0 0;background:#080b10;border-top:1px solid rgba(218,165,32,.15)}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr 1fr;gap:40px;padding-bottom:40px}
.footer-brand{display:flex;flex-wrap:wrap;align-items:center;gap:10px;font-size:20px;color:#daa520;font-weight:700}
.footer-brand p{width:100%;font-size:13px;color:#777;font-weight:400;margin-top:8px}
.footer-links h4{font-size:14px;color:#daa520;margin-bottom:14px;letter-spacing:1px}
.footer-links li{margin-bottom:8px}
.footer-links a{font-size:14px;color:#888;transition:.25s}
.footer-links a:hover{color:#daa520;padding-left:4px}
.footer-bottom{border-top:1px solid rgba(255,255,255,.06);padding:20px 0;text-align:center}
.footer-bottom p{font-size:12px;color:#666;margin-bottom:4px}

/* 响应式 */
@media(max-width:1024px){
    .feature-grid{grid-template-columns:repeat(2,1fr)}
    .class-grid{grid-template-columns:repeat(3,1fr)}
    .dungeon-grid{grid-template-columns:repeat(2,1fr)}
    .comm-grid{grid-template-columns:repeat(2,1fr)}
    .footer-grid{grid-template-columns:1fr 1fr}
    .footer-brand{grid-column:span 2}
}
@media(max-width:768px){
    .nav-menu{display:none;position:fixed;top:72px;left:0;right:0;background:rgba(13,17,23,.98);flex-direction:column;padding:20px;border-bottom:1px solid rgba(218,165,32,.2)}
    .nav-menu.open{display:flex}
    .nav-menu li a{line-height:48px}
    .mobile-toggle{display:block}
    .hero h1{font-size:36px}
    .hero-stats{gap:24px}
    .feature-grid,.dungeon-grid,.comm-grid{grid-template-columns:1fr}
    .class-grid{grid-template-columns:repeat(2,1fr)}
    .version-tabs{grid-template-columns:1fr}
    .vtab{border-right:none;border-bottom:1px solid rgba(255,255,255,.06)}
    .ver-specs{grid-template-columns:1fr}
    .footer-grid{grid-template-columns:1fr}
    .dl-options{flex-direction:column;align-items:center}
}

/* ===== Equipment Section ===== */
.equipment-section {
    padding: 80px 0;
    background: var(--section-bg, #1a1a1a);
}

.equipment-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
    margin-top: 40px;
}

.equip-card {
    background: var(--card-bg, #2a2a2a);
    border-radius: 12px;
    padding: 25px;
    border: 1px solid var(--border-color, #333);
    transition: all 0.3s ease;
}

.equip-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
    border-color: var(--primary-color, #ffd700);
}

.equip-icon {
    font-size: 3rem;
    margin-bottom: 15px;
    display: block;
}

.equip-info h3 {
    color: var(--text-primary, #fff);
    font-size: 1.3rem;
    margin-bottom: 10px;
}

.equip-rarity {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 4px;
    font-size: 0.85rem;
    font-weight: 600;
    margin-bottom: 10px;
}

.equip-rarity.epic { background: rgba(147, 51, 234, 0.2); color: #a855f7; }
.equip-rarity.legendary { background: rgba(251, 191, 36, 0.2); color: #fbbf24; }
.equip-rarity.rare { background: rgba(59, 130, 246, 0.2); color: #3b82f6; }

.equip-desc {
    color: var(--text-secondary, #aaa);
    font-size: 0.95rem;
    line-height: 1.6;
}

/* ===== Reviews Section ===== */
.reviews-section {
    padding: 80px 0;
    background: var(--section-bg-alt, #0f0f0f);
}

.reviews-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
    margin-top: 40px;
}

.review-card {
    background: var(--card-bg, #2a2a2a);
    border-radius: 12px;
    padding: 30px;
    border: 1px solid var(--border-color, #333);
}

.review-stars {
    color: #fbbf24;
    font-size: 1.2rem;
    margin-bottom: 15px;
}

.review-text {
    color: var(--text-secondary, #aaa);
    font-size: 1rem;
    line-height: 1.7;
    margin-bottom: 20px;
    font-style: italic;
}

.review-author {
    display: flex;
    align-items: center;
    gap: 15px;
}

.author-avatar {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary-color, #ffd700), var(--accent-color, #ff6b6b));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: #000;
    font-weight: bold;
}

.author-info .author-name {
    color: var(--text-primary, #fff);
    font-weight: 600;
    font-size: 1rem;
    margin-bottom: 4px;
}

.author-info .author-server {
    color: var(--text-secondary, #888);
    font-size: 0.85rem;
}

/* ===== News Section ===== */
.news-section {
    padding: 80px 0;
    background: var(--section-bg, #1a1a1a);
}

.news-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 30px;
    margin-top: 40px;
}

.news-card {
    background: var(--card-bg, #2a2a2a);
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid var(--border-color, #333);
    transition: all 0.3s ease;
}

.news-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
}

.news-image {
    width: 100%;
    height: 200px;
    background: linear-gradient(135deg, var(--primary-color, #ffd700), var(--accent-color, #ff6b6b));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 4rem;
}

.news-content {
    padding: 25px;
}

.news-date {
    color: var(--text-secondary, #888);
    font-size: 0.85rem;
    margin-bottom: 10px;
}

.news-content h3 {
    color: var(--text-primary, #fff);
    font-size: 1.2rem;
    margin-bottom: 12px;
    line-height: 1.4;
}

.news-content p {
    color: var(--text-secondary, #aaa);
    font-size: 0.95rem;
    line-height: 1.6;
    margin-bottom: 15px;
}

.news-link {
    color: var(--primary-color, #ffd700);
    text-decoration: none;
    font-weight: 600;
    font-size: 0.9rem;
    transition: color 0.3s;
}

.news-link:hover {
    color: var(--accent-color, #ff6b6b);
}

/* ===== Guide Section ===== */
.guide-section {
    padding: 80px 0;
    background: var(--section-bg-alt, #0f0f0f);
}

.guide-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
    margin-top: 40px;
}

.guide-card {
    background: var(--card-bg, #2a2a2a);
    border-radius: 12px;
    padding: 30px;
    border: 1px solid var(--border-color, #333);
    text-align: center;
    transition: all 0.3s ease;
}

.guide-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
    border-color: var(--primary-color, #ffd700);
}

.guide-step {
    display: inline-block;
    width: 60px;
    height: 60px;
    line-height: 60px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary-color, #ffd700), var(--accent-color, #ff6b6b));
    color: #000;
    font-size: 1.5rem;
    font-weight: bold;
    margin-bottom: 20px;
}

.guide-card h3 {
    color: var(--text-primary, #fff);
    font-size: 1.3rem;
    margin-bottom: 15px;
}

.guide-card p {
    color: var(--text-secondary, #aaa);
    font-size: 0.95rem;
    line-height: 1.7;
}

/* ===== Misc ===== */
.section-title {
    text-align: center;
    font-size: 2.5rem;
    color: var(--text-primary, #fff);
    margin-bottom: 15px;
}

.section-subtitle {
    text-align: center;
    color: var(--text-secondary, #aaa);
    font-size: 1.1rem;
    margin-bottom: 50px;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Additional Classic Styles */
.logo-text { font-size: 1.5rem; font-weight: bold; color: #f59e0b; }
.equipment { padding: 80px 0; background: #1a1a1a; }
.equip-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 30px; }
.equip-card { background: #2a2a2a; border-radius: 8px; padding: 20px; border: 1px solid #333; }
.equip-card:hover { border-color: #f59e0b; transform: translateY(-5px); }
.equip-icon { font-size: 3rem; text-align: center; margin-bottom: 15px; }
.equip-info h3 { color: #fff; font-size: 1.3rem; margin-bottom: 8px; }
.equip-type { color: #f59e0b; font-size: 0.9rem; margin-bottom: 10px; }
.equip-desc { color: #aaa; font-size: 0.95rem; line-height: 1.6; }
.equip-stats { display: flex; justify-content: space-between; margin-top: 15px; padding-top: 15px; border-top: 1px solid #333; }
.equip-stats span { color: #888; font-size: 0.85rem; }
.load-bar { width: 100%; height: 8px; background: #333; border-radius: 4px; overflow: hidden; }
.load-fill { height: 100%; background: linear-gradient(90deg, #f59e0b, #ef4444); transition: width 0.3s; }
.online { color: #10b981; }
.busy { color: #f59e0b; }
.full { color: #ef4444; }
.news-list { display: flex; flex-direction: column; gap: 20px; }
.news-item { background: #2a2a2a; padding: 25px; border-radius: 8px; border-left: 4px solid #f59e0b; }
.news-date { color: #888; font-size: 0.85rem; margin-bottom: 8px; }
.news-item h3 { color: #fff; margin-bottom: 10px; }
.news-item p { color: #aaa; line-height: 1.6; }

/* Final Classic Fixes */
.reviews { padding: 80px 0; background: #1a1a1a; }
.review-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 30px; }
.review-card { background: #2a2a2a; padding: 30px; border-radius: 8px; border: 1px solid #333; }
.review-card:hover { border-color: #f59e0b; }
.review-rating { color: #f59e0b; font-size: 1.2rem; margin-bottom: 15px; }
.servers-section { padding: 80px 0; background: #0f0f0f; }
.servers-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 30px; }
.server-card { background: #2a2a2a; padding: 25px; border-radius: 8px; border: 1px solid #333; }
.server-card:hover { border-color: #f59e0b; }
.server-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; }
.server-status { padding: 4px 12px; border-radius: 4px; font-size: 0.85rem; font-weight: 600; }
.server-status.online { background: rgba(16,185,129,0.2); color: #10b981; }
.server-status.busy { background: rgba(245,158,11,0.2); color: #f59e0b; }
.server-status.full { background: rgba(239,68,68,0.2); color: #ef4444; }
.server-stats { display: flex; flex-direction: column; gap: 10px; }
.stat-row { display: flex; justify-content: space-between; color: #888; font-size: 0.9rem; }
.stat-row span:last-child { color: #fff; font-weight: 600; }
.section-desc { text-align: center; color: #aaa; font-size: 1.1rem; margin-bottom: 50px; }
.orange { color: #f59e0b; }
.pink { color: #ec4899; }

.stat-val { color: #f59e0b; font-weight: bold; }

/* ========== 全局美化修复 ========== */

/* 重置盒模型 */
*, *::before, *::after {
  box-sizing: border-box;
}

/* 确保所有容器居中且有最大宽度 */
.section, .features, .classes, .servers, .equipment, .reviews, .news, .faq, .download {
  max-width: 1200px;
  margin: 0 auto;
  padding: 60px 20px;
}

/* 网格布局修复 */
.feature-grid,
.class-grid,
.server-grid,
.equip-grid,
.review-grid,
.news-grid,
.faq-grid,
.arsenal-grid,
.arsenal-retro-grid,
.arsenal-cyber-grid,
.equip-ink-grid,
.reviews-blood-grid,
.reviews-retro-grid,
.review-ink-grid,
.reviews-blood,
.reviews-retro,
.review-ink {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 30px;
  margin-top: 40px;
}

/* 卡片统一样式 */
.feature-card,
.class-card,
.server-card,
.equip-card,
.review-card,
.news-card,
.faq-item,
.arsenal-card,
.arsenal-retro-card,
.arsenal-cyber-card,
.equip-ink-card,
.review-blood-card,
.review-retro-card,
.review-ink-card,
.review-cyber-card {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  padding: 30px;
  transition: all 0.3s ease;
}

.feature-card:hover,
.class-card:hover,
.server-card:hover,
.equip-card:hover,
.review-card:hover,
.news-card:hover,
.arsenal-card:hover,
.arsenal-retro-card:hover,
.arsenal-cyber-card:hover,
.equip-ink-card:hover,
.review-blood-card:hover,
.review-retro-card:hover,
.review-ink-card:hover,
.review-cyber-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
  border-color: currentColor;
}

/* 标题统一样式 */
h1, h2, h3, h4 {
  line-height: 1.3;
  margin-bottom: 15px;
}

h2 {
  font-size: 2.5rem;
  text-align: center;
  margin-bottom: 20px;
}

h3 {
  font-size: 1.5rem;
  margin-bottom: 10px;
}

/* 段落文本 */
p {
  line-height: 1.8;
  margin-bottom: 15px;
}

/* 按钮统一 */
.btn, .btn-primary, .btn-outline {
  display: inline-block;
  padding: 12px 30px;
  border-radius: 8px;
  text-decoration: none;
  font-weight: 600;
  transition: all 0.3s ease;
  cursor: pointer;
  border: 2px solid transparent;
}

.btn-primary:hover,
.btn-outline:hover {
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

/* 导航栏修复 */
.navbar, nav, header {
  position: sticky;
  top: 0;
  z-index: 1000;
  padding: 15px 0;
  background: inherit;
  backdrop-filter: blur(10px);
}

.nav-inner, .nav-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.nav-menu {
  display: flex;
  gap: 30px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-menu a {
  text-decoration: none;
  color: inherit;
  font-weight: 500;
  transition: color 0.3s ease;
}

.nav-menu a:hover {
  opacity: 0.8;
}

/* Hero区域修复 */
.hero, .hero-section {
  min-height: 60vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 100px 20px;
  position: relative;
}

.hero-content {
  max-width: 800px;
  z-index: 2;
}

.hero h1 {
  font-size: 3.5rem;
  margin-bottom: 20px;
}

.hero-sub, .hero-desc {
  font-size: 1.2rem;
  margin-bottom: 30px;
  opacity: 0.9;
}

.hero-btns {
  display: flex;
  gap: 20px;
  justify-content: center;
  flex-wrap: wrap;
}

.hero-stats {
  display: flex;
  justify-content: center;
  gap: 40px;
  margin-top: 50px;
  flex-wrap: wrap;
}

.stat {
  text-align: center;
}

.stat strong {
  display: block;
  font-size: 2rem;
  margin-bottom: 5px;
}

/* Footer修复 */
footer {
  padding: 60px 20px 30px;
  text-align: center;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  margin-top: 60px;
}

.footer-content {
  max-width: 1200px;
  margin: 0 auto;
}

/* 图标和装饰 */
.f-icon, .class-icon, .equip-icon, .arsenal-icon, .equip-ink-icon, .ac-icon {
  font-size: 3rem;
  margin-bottom: 20px;
  display: block;
  text-align: center;
}

/* 星级评分 */
.review-rating, .review-stars, .rb-stars, .rr-stars, .rc-rating {
  color: #fbbf24;
  font-size: 1.2rem;
  margin-bottom: 15px;
}

/* 作者信息 */
.review-author, .rb-author, .rr-author, .rc-author {
  margin-top: 20px;
  font-size: 0.9rem;
  opacity: 0.8;
}

/* 服务器状态 */
.server-status {
  display: inline-block;
  padding: 5px 15px;
  border-radius: 20px;
  font-size: 0.85rem;
  font-weight: 600;
}

.server-status.online {
  background: rgba(16, 185, 129, 0.2);
  color: #10b981;
}

.server-status.busy {
  background: rgba(251, 191, 36, 0.2);
  color: #fbbf24;
}

.server-status.full {
  background: rgba(239, 68, 68, 0.2);
  color: #ef4444;
}

/* 装备稀有度 */
.equip-rarity, .arc-rarity {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 4px;
  font-size: 0.8rem;
  font-weight: 600;
  margin-bottom: 10px;
}

.equip-rarity.epic, .arc-rarity.epic {
  background: rgba(168, 85, 247, 0.2);
  color: #a855f7;
}

.equip-rarity.legendary, .arc-rarity.legendary {
  background: rgba(251, 191, 36, 0.2);
  color: #fbbf24;
}

.equip-rarity.rare, .arc-rarity.rare {
  background: rgba(59, 130, 246, 0.2);
  color: #3b82f6;
}

/* 统计行 */
.stat-row, .equip-stats {
  display: flex;
  justify-content: space-between;
  padding: 8px 0;
  font-size: 0.9rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

/* 新闻日期 */
.news-date {
  font-size: 0.85rem;
  opacity: 0.7;
  margin-bottom: 10px;
}

/* 指南步骤 */
.guide-step {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  font-weight: bold;
  margin: 0 auto 20px;
}

/* 响应式调整 */
@media (max-width: 768px) {
  h2 {
    font-size: 2rem;
  }
  
  .hero h1 {
    font-size: 2.5rem;
  }
  
  .nav-menu {
    flex-direction: column;
    gap: 15px;
  }
  
  .feature-grid,
  .class-grid,
  .server-grid,
  .equip-grid,
  .review-grid,
  .news-grid {
    grid-template-columns: 1fr;
  }
  
  .hero-stats {
    gap: 20px;
  }
  
  .stat strong {
    font-size: 1.5rem;
  }
}

/* 平滑滚动 */
html {
  scroll-behavior: smooth;
}

/* 确保body有正确的边距 */
body {
  margin: 0;
  padding: 0;
}

/* 链接样式 */
a {
  color: inherit;
  text-decoration: none;
}

/* 列表样式 */
ul {
  list-style: none;
  padding: 0;
  margin: 0;
}


/* ===== 新手指南修复 ===== */
.guide-steps {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
    margin-top: 40px;
}
.guide-steps .guide-step {
    background: rgba(255,255,255,.03);
    border: 1px solid rgba(218,165,32,.15);
    border-radius: 12px;
    padding: 36px 28px;
    text-align: center;
    transition: .3s;
}
.guide-steps .guide-step:hover {
    border-color: rgba(218,165,32,.5);
    transform: translateY(-6px);
    box-shadow: 0 12px 30px rgba(0,0,0,.3);
}
.guide-steps .guide-step h3 {
    font-size: 18px;
    color: #f5d76e;
    margin-bottom: 10px;
}
.guide-steps .guide-step p {
    font-size: 14px;
    color: #999;
    line-height: 1.7;
}
.step-number {
    display: inline-block;
    width: 56px;
    height: 56px;
    line-height: 56px;
    border-radius: 50%;
    background: linear-gradient(180deg,#f5d76e,#b8860b);
    color: #1a1200;
    font-size: 1.4rem;
    font-weight: 700;
    margin-bottom: 18px;
}

/* ===== 社区互动修复 ===== */
.community-section {
    padding: 90px 0;
    background: #0a0e14;
}
.community-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    margin-bottom: 50px;
}
.stat-box {
    background: rgba(255,255,255,.03);
    border: 1px solid rgba(218,165,32,.15);
    border-radius: 12px;
    padding: 30px 20px;
    text-align: center;
    transition: .3s;
}
.stat-box:hover {
    border-color: rgba(218,165,32,.5);
    transform: translateY(-4px);
}
.stat-number {
    display: block;
    font-size: 30px;
    font-weight: 700;
    color: #daa520;
    text-shadow: 0 0 16px rgba(218,165,32,.3);
    margin-bottom: 6px;
}
.stat-label {
    font-size: 13px;
    color: #888;
}
.community-highlights {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
}
.highlight-card {
    background: rgba(255,255,255,.03);
    border: 1px solid rgba(218,165,32,.15);
    border-radius: 12px;
    padding: 32px 28px;
    text-align: center;
    transition: .3s;
}
.highlight-card:hover {
    border-color: rgba(218,165,32,.5);
    transform: translateY(-6px);
    box-shadow: 0 12px 30px rgba(0,0,0,.3);
}
.highlight-icon {
    font-size: 40px;
    margin-bottom: 16px;
    display: block;
}
.highlight-card h3 {
    font-size: 17px;
    color: #f5d76e;
    margin-bottom: 10px;
}
.highlight-card p {
    font-size: 14px;
    color: #999;
    line-height: 1.7;
}

/* ===== 最新动态修复 ===== */
.news-title {
    font-size: 16px;
    color: #f5d76e;
    margin-bottom: 10px;
    line-height: 1.4;
}
.news-excerpt {
    font-size: 14px;
    color: #999;
    line-height: 1.7;
    margin-bottom: 14px;
}

/* ===== 响应式 ===== */
@media (max-width: 900px) {
    .community-stats { grid-template-columns: repeat(2, 1fr); }
    .community-highlights { grid-template-columns: 1fr; }
    .guide-steps { grid-template-columns: 1fr; }
}

/* ===== 核心系统 ===== */
.systems-section { padding: 90px 0; background: #0a0e14; }
.systems-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
    margin-top: 40px;
}
.system-card {
    background: rgba(255,255,255,.03);
    border: 1px solid rgba(218,165,32,.15);
    border-radius: 12px;
    padding: 32px 28px;
    transition: .3s;
}
.system-card:hover {
    border-color: rgba(218,165,32,.5);
    transform: translateY(-6px);
    box-shadow: 0 12px 30px rgba(0,0,0,.3);
}
.system-icon { font-size: 40px; margin-bottom: 16px; display: block; }
.system-card h3 { font-size: 18px; color: #f5d76e; margin-bottom: 10px; }
.system-card p { font-size: 14px; color: #999; line-height: 1.7; margin-bottom: 14px; }
.system-tags { display: flex; gap: 8px; flex-wrap: wrap; }
.system-tags span {
    font-size: 12px;
    color: #daa520;
    background: rgba(218,165,32,.1);
    border: 1px solid rgba(218,165,32,.25);
    padding: 3px 10px;
    border-radius: 4px;
}

/* ===== 经典活动 ===== */
.events-section { padding: 90px 0; }
.events-list { margin-top: 40px; }
.event-item {
    display: flex;
    gap: 24px;
    padding: 28px 0;
    border-bottom: 1px solid rgba(218,165,32,.12);
    transition: .3s;
}
.event-item:hover { padding-left: 12px; }
.event-date {
    width: 64px;
    height: 64px;
    border-radius: 12px;
    background: linear-gradient(180deg,#f5d76e,#b8860b);
    color: #1a1200;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.event-day { font-size: 1.5rem; font-weight: 700; line-height: 1; }
.event-month { font-size: .7rem; font-weight: 600; text-transform: uppercase; margin-top: 2px; }
.event-body h3 { font-size: 17px; color: #f5d76e; margin-bottom: 8px; }
.event-body p { font-size: 14px; color: #999; line-height: 1.7; margin-bottom: 10px; }
.event-meta { display: flex; gap: 16px; flex-wrap: wrap; font-size: 12px; color: #777; }

/* ===== 运营数据 ===== */
.stats-section { padding: 90px 0; background: #0a0e14; }
.stats-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-top: 40px;
}
.stats-box {
    background: rgba(255,255,255,.03);
    border: 1px solid rgba(218,165,32,.15);
    border-radius: 12px;
    padding: 36px 20px;
    text-align: center;
    transition: .3s;
}
.stats-box:hover { border-color: rgba(218,165,32,.5); transform: translateY(-4px); }
.stats-num {
    display: block;
    font-size: 34px;
    font-weight: 700;
    color: #daa520;
    text-shadow: 0 0 16px rgba(218,165,32,.3);
    margin-bottom: 6px;
}
.stats-label { font-size: 13px; color: #888; }

/* ===== 服务器状态 ===== */
.servers-section { padding: 90px 0; }
.servers-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    margin-top: 40px;
}
.server-card {
    background: rgba(255,255,255,.03);
    border: 1px solid rgba(218,165,32,.15);
    border-radius: 12px;
    padding: 28px;
    transition: .3s;
}
.server-card:hover { border-color: rgba(218,165,32,.5); transform: translateY(-4px); }
.server-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}
.server-header h3 { font-size: 16px; color: #f5d76e; }
.server-status { font-size: 12px; padding: 3px 10px; border-radius: 4px; }
.server-status.online { color: #4ade80; background: rgba(74,222,128,.1); border: 1px solid rgba(74,222,128,.3); }
.server-status.busy { color: #f59e0b; background: rgba(245,158,11,.1); border: 1px solid rgba(245,158,11,.3); }
.server-stats { margin-bottom: 12px; }
.server-stats .stat-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 13px;
    color: #999;
    padding: 6px 0;
    border-bottom: 1px solid rgba(255,255,255,.04);
}
.server-stats .stat-val { color: #ddd; font-weight: 600; }
.load-bar {
    width: 60%;
    height: 6px;
    background: rgba(255,255,255,.08);
    border-radius: 3px;
    overflow: hidden;
}
.load-fill {
    height: 100%;
    background: linear-gradient(90deg,#f5d76e,#b8860b);
    border-radius: 3px;
}
.server-desc { font-size: 12px; color: #777; line-height: 1.6; }

/* ===== 下载步骤 ===== */
.dl-steps {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-top: 40px;
}
.dl-step {
    background: rgba(255,255,255,.03);
    border: 1px solid rgba(218,165,32,.15);
    border-radius: 12px;
    padding: 24px 20px;
    text-align: center;
}
.dl-step-num {
    display: inline-block;
    width: 40px;
    height: 40px;
    line-height: 40px;
    border-radius: 50%;
    background: linear-gradient(180deg,#f5d76e,#b8860b);
    color: #1a1200;
    font-weight: 700;
    font-size: 18px;
    margin-bottom: 12px;
}
.dl-step h3 { font-size: 15px; color: #f5d76e; margin-bottom: 6px; }
.dl-step p { font-size: 12px; color: #999; line-height: 1.6; }

/* ===== 响应式 ===== */
@media (max-width: 1024px) {
    .systems-grid { grid-template-columns: repeat(2, 1fr); }
    .servers-grid { grid-template-columns: repeat(2, 1fr); }
    .stats-grid { grid-template-columns: repeat(2, 1fr); }
    .dl-steps { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
    .systems-grid { grid-template-columns: 1fr; }
    .servers-grid { grid-template-columns: 1fr; }
    .stats-grid { grid-template-columns: 1fr; }
    .dl-steps { grid-template-columns: 1fr; }
}

/* ===== 版本对比表 ===== */
.version-compare { margin-top: 40px; }
.version-compare h3 { font-size: 18px; color: #f5d76e; margin-bottom: 16px; text-align: center; }
.compare-table {
    width: 100%;
    border-collapse: collapse;
    background: rgba(255,255,255,.02);
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid rgba(218,165,32,.15);
}
.compare-table th,
.compare-table td {
    padding: 14px 16px;
    text-align: center;
    font-size: 14px;
    border-bottom: 1px solid rgba(255,255,255,.05);
}
.compare-table th {
    background: rgba(218,165,32,.12);
    color: #f5d76e;
    font-weight: 600;
}
.compare-table td { color: #bbb; }
.compare-table tr:hover td { background: rgba(218,165,32,.05); }

/* ===== 职业推荐 ===== */
.class-tips {
    margin-top: 36px;
    background: rgba(255,255,255,.03);
    border: 1px solid rgba(218,165,32,.15);
    border-radius: 12px;
    padding: 28px 32px;
}
.class-tips h3 { font-size: 17px; color: #f5d76e; margin-bottom: 12px; }
.class-tips p { font-size: 14px; color: #999; line-height: 1.9; margin-bottom: 10px; }
.class-tips b { color: #f5d76e; }

/* ===== 装备稀有度 ===== */
.equip-rarity.gold { color: #f5d76e; background: rgba(245,215,110,.12); border: 1px solid rgba(245,215,110,.35); }

/* ===== Guide 卡片最终加固 ===== */
.guide-steps .guide-step {
    min-height: 220px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    overflow: visible;
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(218,165,32,.18);
    border-radius: 12px;
    padding: 36px 28px;
    text-align: center;
    transition: all .3s ease;
}
.guide-steps .guide-step .step-number {
    width: 56px;
    height: 56px;
    line-height: 56px;
    border-radius: 50%;
    background: linear-gradient(180deg,#f5d76e,#b8860b);
    color: #1a1200;
    font-size: 1.4rem;
    font-weight: 700;
    margin: 0 auto 18px;
    flex-shrink: 0;
    display: block;
}
.guide-steps .guide-step h3 {
    font-size: 1.25rem;
    color: #f5d76e;
    margin-bottom: 12px;
    font-weight: 600;
}
.guide-steps .guide-step p {
    font-size: .95rem;
    color: #aab;
    line-height: 1.8;
    margin: 0;
}
@media (max-width: 768px) {
    .guide-steps { grid-template-columns: 1fr; }
}

/* ===== 新手指南标题框 ===== */
.guide-header {
    background: rgba(218,165,32,.05);
    border: 1px solid rgba(218,165,32,.22);
    border-radius: 14px;
    padding: 30px 24px 26px;
    margin-bottom: 40px;
    text-align: center;
    position: relative;
}
.guide-header .section-title {
    color: #f5d76e;
    margin-bottom: 10px;
    font-size: 2.2rem;
    letter-spacing: 3px;
    text-shadow: 0 0 20px rgba(218,165,32,.3);
}
.guide-header .section-subtitle {
    color: #9a9a9a;
    margin-bottom: 0;
    font-size: 1.05rem;
    letter-spacing: 1px;
}
.guide-header::before {
    content: '⚔';
    display: block;
    font-size: 26px;
    color: #daa520;
    margin-bottom: 10px;
}
.guide-header::after {
    content: '';
    position: absolute;
    bottom: 14px;
    left: 50%;
    transform: translateX(-50%);
    width: 70px;
    height: 2px;
    background: linear-gradient(90deg, transparent, #f5d76e, transparent);
}

/* ===== 服务器状态标题框 ===== */
.servers-header {
    background: rgba(218,165,32,.05);
    border: 1px solid rgba(218,165,32,.22);
    border-radius: 14px;
    padding: 30px 24px 26px;
    margin-bottom: 40px;
    text-align: center;
    position: relative;
}
.servers-header .section-title {
    color: #f5d76e;
    margin-bottom: 10px;
    font-size: 2.2rem;
    letter-spacing: 3px;
    text-shadow: 0 0 20px rgba(218,165,32,.3);
}
.servers-header .section-subtitle {
    color: #9a9a9a;
    margin-bottom: 0;
    font-size: 1.05rem;
    letter-spacing: 1px;
}
.servers-header::before {
    content: '🖥';
    display: block;
    font-size: 26px;
    color: #daa520;
    margin-bottom: 10px;
}
.servers-header::after {
    content: '';
    position: absolute;
    bottom: 14px;
    left: 50%;
    transform: translateX(-50%);
    width: 70px;
    height: 2px;
    background: linear-gradient(90deg, transparent, #f5d76e, transparent);
}

/* ===== 服务器卡片加固 ===== */
.server-card {
    background: rgba(255,255,255,.04) !important;
    border: 1px solid rgba(218,165,32,.2) !important;
    min-height: 240px;
    display: flex;
    flex-direction: column;
}
.server-card .server-stats { flex: 1; }
.servers-section {
    border-top: 1px solid rgba(218,165,32,.12);
    border-bottom: 1px solid rgba(218,165,32,.12);
}

/* ===== guide-steps 对称布局修复 ===== */
.guide-steps {
    grid-template-columns: repeat(2, 1fr) !important;
}
.guide-steps .guide-step {
    flex-direction: column !important;
    text-align: center !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 0 !important;
    min-height: 200px !important;
    width: 100% !important;
    height: auto !important;
    display: flex !important;
    background: rgba(255,255,255,.04) !important;
    border: 1px solid rgba(218,165,32,.18) !important;
    border-radius: 12px !important;
    padding: 28px 24px !important;
}
.guide-steps .guide-step .step-number {
    margin: 0 auto 18px !important;
    flex-shrink: 0 !important;
    width: 56px !important;
    height: 56px !important;
    line-height: 56px !important;
}
.guide-steps .guide-step h3 {
    margin-bottom: 10px !important;
}
.guide-steps .guide-step p {
    text-align: center !important;
}
@media (max-width: 768px) {
    .guide-steps {
        grid-template-columns: 1fr !important;
    }
    .guide-steps .guide-step {
        flex-direction: column !important;
        text-align: center !important;
        align-items: center !important;
    }
    .guide-steps .guide-step .step-number {
        margin: 0 auto 18px !important;
    }
}