/* DNF60怀旧服官网: 深灰与霓虹蓝粉视觉 */
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:'Consolas','Courier New',monospace;background:#0e0e12;color:#e0e0e0;line-height:1.6;overflow-x:hidden}
a{color:inherit;text-decoration:none;transition:.25s}
ul{list-style:none}
img{max-width:100%;display:block}
.text-neon{color:#00f0ff}
.blink-text{animation:cblink .8s step-end infinite}
@keyframes cblink{50%{opacity:0}}

/* 汉堡按钮 */
.cyber-toggle{position:fixed;top:16px;right:20px;z-index:1001;width:44px;height:44px;background:rgba(14,14,18,.9);border:1px solid rgba(0,240,255,.3);cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;transition:.3s}
.cyber-toggle span{display:block;width:22px;height:2px;background:#00f0ff;transition:.3s}
.cyber-toggle:hover{border-color:#00f0ff;box-shadow:0 0 12px rgba(0,240,255,.3)}
.cyber-menu-panel{position:fixed;inset:0;background:rgba(14,14,18,.98);z-index:1000;display:flex;align-items:center;justify-content:center;opacity:0;visibility:hidden;transition:.3s}
.cyber-menu-panel.open{opacity:1;visibility:visible}
.cyber-full-menu{display:flex;flex-direction:column;gap:20px;text-align:center}
.cyber-full-menu a{font-size:28px;letter-spacing:6px;color:#888;transition:.3s;padding:10px 0}
.cyber-full-menu a:hover{color:#00f0ff;text-shadow:0 0 20px rgba(0,240,255,.5)}

/* 顶部信息条 */
.cyber-topbar{position:fixed;top:0;left:0;right:0;height:36px;background:rgba(14,14,18,.95);border-bottom:1px solid rgba(0,240,255,.15);display:flex;align-items:center;justify-content:center;gap:40px;font-size:11px;color:#555;letter-spacing:2px;z-index:999;padding-right:60px}

/* Hero */
.cyber-hero{min-height:100vh;display:flex;align-items:center;position:relative;padding-top:36px;overflow:hidden}
.cyber-grid-bg{position:absolute;inset:0;background:linear-gradient(rgba(0,240,255,.03) 1px,transparent 1px),linear-gradient(90deg,rgba(0,240,255,.03) 1px,transparent 1px);background-size:60px 60px}
.cyber-orb{position:absolute;border-radius:50%;filter:blur(80px)}
.orb-1{width:400px;height:400px;background:rgba(0,240,255,.08);top:10%;right:10%}
.orb-2{width:300px;height:300px;background:rgba(255,0,128,.06);bottom:20%;left:5%}
.cyber-hero-content{position:relative;z-index:2;padding:60px 40px;max-width:800px;margin:0 auto;text-align:center}
.glitch-wrap{margin-bottom:20px}
.glitch{font-size:72px;font-weight:900;color:#fff;letter-spacing:6px;position:relative;display:inline-block}
.glitch::before,.glitch::after{content:attr(data-text);position:absolute;left:0;top:0;width:100%;overflow:hidden}
.glitch::before{color:#00f0ff;clip-path:inset(0 0 65% 0);transform:translateX(-4px);animation:glitch1 3s infinite linear alternate-reverse}
.glitch::after{color:#ff0080;clip-path:inset(65% 0 0 0);transform:translateX(4px);animation:glitch2 2.5s infinite linear alternate-reverse}
@keyframes glitch1{0%{clip-path:inset(0 0 85% 0)}20%{clip-path:inset(15% 0 60% 0)}40%{clip-path:inset(40% 0 30% 0)}60%{clip-path:inset(60% 0 15% 0)}80%{clip-path:inset(80% 0 0 0)}100%{clip-path:inset(0 0 85% 0)}}
@keyframes glitch2{0%{clip-path:inset(85% 0 0 0)}25%{clip-path:inset(55% 0 20% 0)}50%{clip-path:inset(30% 0 45% 0)}75%{clip-path:inset(10% 0 70% 0)}100%{clip-path:inset(85% 0 0 0)}}
.cyber-tag{font-size:13px;letter-spacing:4px;color:#00f0ff;margin-bottom:20px;opacity:.7}
.cyber-desc{font-size:16px;color:#999;line-height:1.8;margin-bottom:36px;max-width:600px}
.cyber-btns{display:flex;gap:16px;justify-content:center}
.cyber-btn{position:relative;display:inline-block;padding:16px 36px;overflow:hidden;transition:.3s}
.cyber-btn .cb-bg{position:absolute;inset:0;background:linear-gradient(135deg,rgba(0,240,255,.15),rgba(255,0,128,.1));transition:.3s}
.cyber-btn .cb-text{position:relative;z-index:1;font-size:15px;letter-spacing:3px;color:#00f0ff}
.cyber-btn:hover .cb-bg{background:linear-gradient(135deg,rgba(0,240,255,.3),rgba(255,0,128,.2))}
.cyber-btn:hover{transform:translateY(-2px);box-shadow:0 0 20px rgba(0,240,255,.2)}
.cyber-btn.outline .cb-bg{background:transparent;border:1px solid rgba(0,240,255,.3)}
.cyber-btn.outline .cb-text{color:#888}
.cyber-btn.outline:hover .cb-bg{background:rgba(0,240,255,.05)}
.cyber-btn.outline:hover .cb-text{color:#00f0ff}
.cyber-btn.big{padding:20px 48px}
.cyber-btn.big .cb-text{font-size:17px}

/* 通用 */
.cyber-section,.cyber-neon,.cyber-data,.cyber-grid-section,.cyber-faq,.cyber-download{padding:100px 0}
.cyber-neon,.cyber-grid-section{background:rgba(0,240,255,.015)}
.cyber-container{max-width:1200px;margin:0 auto;padding:0 24px}
.cyber-label{font-size:12px;letter-spacing:4px;color:#00f0ff;opacity:.5;margin-bottom:10px}
.cyber-title{font-size:36px;color:#fff;margin-bottom:40px;font-weight:700;position:relative;display:inline-block}
.cyber-title::after{content:'';position:absolute;bottom:-8px;left:0;width:60px;height:2px;background:linear-gradient(90deg,#00f0ff,#ff0080)}

/* 系统概述 */
.cyber-info-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
.cyber-info-card{background:rgba(255,255,255,.02);border:1px solid rgba(0,240,255,.1);padding:32px;position:relative;overflow:hidden;transition:.3s}
.cyber-info-card::before{content:'';position:absolute;top:0;left:0;width:3px;height:100%;background:linear-gradient(180deg,#00f0ff,#ff0080)}
.cyber-info-card:hover{border-color:rgba(0,240,255,.3);transform:translateX(4px)}
.cic-header{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.cic-num{font-size:12px;color:#00f0ff;opacity:.5}
.cic-header h3{font-size:18px;color:#fff}
.cyber-info-card>p{font-size:14px;color:#888;line-height:1.7;margin-bottom:16px}
.cic-bar{display:flex;align-items:center;gap:12px}
.cic-bar>div:first-child{flex:1;height:4px;background:rgba(255,255,255,.06);overflow:hidden}
.cic-fill{height:100%;background:linear-gradient(90deg,#00f0ff,#ff0080);transition:.6s}
.cic-bar span{font-size:11px;color:#00f0ff;flex-shrink:0}

/* 霓虹职业 */
.neon-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:16px}
.neon-card{background:rgba(255,255,255,.02);border:1px solid rgba(0,240,255,.1);padding:28px 16px;text-align:center;transition:.3s;position:relative;overflow:hidden}
.neon-card::after{content:'';position:absolute;bottom:0;left:0;right:0;height:2px;background:linear-gradient(90deg,#00f0ff,#ff0080);transform:scaleX(0);transition:.3s}
.neon-card:hover{border-color:rgba(0,240,255,.4);transform:translateY(-4px)}
.neon-card:hover::after{transform:scaleX(1)}
.nc-icon{font-size:36px;margin-bottom:14px}
.neon-card h3{font-size:16px;color:#fff;margin-bottom:6px}
.neon-card>p{font-size:12px;color:#888;margin-bottom:16px}
.nc-specs{display:flex;flex-direction:column;gap:6px;margin-bottom:14px}
.nc-spec{display:flex;align-items:center;gap:6px;font-size:10px}
.nc-spec span{color:#555;width:24px;flex-shrink:0}
.nc-spec-bar{flex:1;height:3px;background:rgba(255,255,255,.06);overflow:hidden}
.nc-spec-bar div{height:100%;background:#00f0ff}
.nc-jobs{font-size:10px;color:#555;letter-spacing:1px}

/* 版本数据 */
.data-table{border:1px solid rgba(0,240,255,.15)}
.dt-head{display:grid;grid-template-columns:100px 100px 100px 120px 1fr;padding:16px 20px;background:rgba(0,240,255,.05);font-size:12px;color:#00f0ff;letter-spacing:2px;border-bottom:1px solid rgba(0,240,255,.15)}
.dt-row{display:grid;grid-template-columns:100px 100px 100px 120px 1fr;padding:16px 20px;border-bottom:1px solid rgba(255,255,255,.04);font-size:14px;color:#bbb;transition:.25s}
.dt-row:hover{background:rgba(0,240,255,.03)}

/* 副本矩阵 */
.dungeon-matrix{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.dm-cell{background:rgba(255,255,255,.02);border:1px solid rgba(0,240,255,.1);padding:28px;position:relative;transition:.3s}
.dm-cell:hover{border-color:rgba(0,240,255,.4);transform:translateY(-3px)}
.dm-lv{font-size:12px;color:#00f0ff;margin-bottom:8px;display:block}
.dm-cell h3{font-size:18px;color:#fff;margin-bottom:6px}
.dm-cell>p{font-size:13px;color:#888}
.dm-tag{position:absolute;top:12px;right:12px;font-size:10px;padding:2px 8px;background:rgba(0,240,255,.1);color:#00f0ff;letter-spacing:1px}

/* FAQ */
.cyber-faq-list{max-width:800px}
.cfaq-item{border-bottom:1px solid rgba(0,240,255,.08)}
.cfaq-q{width:100%;background:none;border:none;color:#ddd;padding:18px 0;font-size:15px;font-family:inherit;text-align:left;cursor:pointer;display:flex;align-items:center;gap:10px;transition:.25s}
.cfaq-q:hover{color:#00f0ff}
.cfaq-marker{color:#00f0ff;font-size:14px;transition:.25s}
.cfaq-a{max-height:0;overflow:hidden;transition:max-height .35s ease}
.cfaq-a.open{max-height:200px}
.cfaq-a p{padding:0 0 18px 24px;color:#888;font-size:14px;line-height:1.7}

/* 下载 */
.cyber-download{text-align:center}
.cyber-dl-box{max-width:600px;margin:0 auto}
.cyber-dl-prompt{font-size:16px;color:#00f0ff;margin-bottom:30px;letter-spacing:2px}
.cyber-dl-note{font-size:12px;color:#555;margin-top:20px}

/* 页脚 */
.cyber-footer{padding:50px 0 0;border-top:1px solid rgba(0,240,255,.1)}
.cyber-footer-grid{display:flex;justify-content:space-between;padding-bottom:30px;flex-wrap:wrap;gap:20px}
.cyber-footer-grid strong{color:#00f0ff;font-size:16px;letter-spacing:2px;display:block;margin-bottom:4px}
.cyber-footer-grid p{font-size:12px;color:#555}
.cyber-flinks{display:flex;gap:20px}
.cyber-flinks a{font-size:13px;color:#666;letter-spacing:1px}
.cyber-flinks a:hover{color:#00f0ff}
.cyber-copyright{font-size:11px;color:#444;text-align:center;padding:16px 0;border-top:1px solid rgba(0,240,255,.06);letter-spacing:1px}

/* 响应式 */
@media(max-width:1024px){
    .neon-grid{grid-template-columns:repeat(3,1fr)}
    .cyber-info-grid{grid-template-columns:1fr}
}
@media(max-width:768px){
    .glitch{font-size:42px}
    .cyber-hero-content{padding:40px 20px}
    .neon-grid{grid-template-columns:1fr 1fr}
    .dungeon-matrix{grid-template-columns:1fr}
    .cyber-topbar{font-size:10px;gap:16px}
    .dt-head,.dt-row{grid-template-columns:70px 70px 70px 80px 1fr;font-size:12px}
}

html, body { overflow-x: hidden; }
.cyber-container { max-width: min(1200px, 100%); }

@media(max-width:768px){
  .cyber-topbar { gap: 10px; padding-right: 52px; letter-spacing: 0; }
  .cyber-hero-content { padding-left: 16px; padding-right: 16px; }
  .glitch { font-size: 35px; letter-spacing: 2px; }
  .cyber-desc { font-size: 14px; }
  .cyber-btns { flex-wrap: wrap; }
  .cyber-btn { padding: 14px 20px; }
  .cyber-section, .cyber-neon, .cyber-data, .cyber-grid-section, .cyber-faq, .cyber-download { padding: 72px 0; }
  .cyber-container { padding-left: 16px; padding-right: 16px; }
  .cyber-title { font-size: 30px; }
  .data-table { overflow-x: auto; }
  .dt-head, .dt-row { min-width: 330px; }
  .cyber-footer-grid { align-items: flex-start; }
  .cyber-flinks { flex-wrap: wrap; gap: 12px; }
}


/* ===== 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 Cyber/Neon Styles */
.logo-text { font-size: 1.5rem; font-weight: bold; color: #06b6d4; text-shadow: 0 0 10px #06b6d4, 0 0 20px #06b6d4; font-family: 'Courier New', monospace; }
.equipment { padding: 80px 0; background: #0c0a09; }
.equip-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 30px; }
.equip-card { background: linear-gradient(135deg, rgba(6,182,212,0.1), rgba(168,85,247,0.1)); border-radius: 8px; padding: 20px; border: 2px solid #06b6d4; box-shadow: 0 0 20px rgba(6,182,212,0.5); backdrop-filter: blur(10px); }
.equip-card:hover { box-shadow: 0 0 40px rgba(6,182,212,0.8), 0 0 60px rgba(168,85,247,0.4); transform: translateY(-5px) scale(1.02); }
.equip-icon { font-size: 3rem; text-align: center; margin-bottom: 15px; filter: drop-shadow(0 0 10px #06b6d4); }
.equip-info h3 { color: #fff; font-size: 1.3rem; margin-bottom: 8px; text-shadow: 0 0 10px rgba(6,182,212,0.8); }
.equip-type { color: #06b6d4; font-size: 0.9rem; margin-bottom: 10px; font-weight: bold; text-shadow: 0 0 5px #06b6d4; }
.equip-desc { color: #e2e8f0; font-size: 0.95rem; line-height: 1.6; }
.equip-stats { display: flex; justify-content: space-between; margin-top: 15px; padding-top: 15px; border-top: 2px solid rgba(6,182,212,0.5); }
.equip-stats span { color: #06b6d4; font-size: 0.85rem; text-shadow: 0 0 5px #06b6d4; }
.load-bar { width: 100%; height: 8px; background: rgba(6,182,212,0.2); border-radius: 4px; overflow: hidden; border: 1px solid #06b6d4; }
.load-fill { height: 100%; background: linear-gradient(90deg, #06b6d4, #a855f7); box-shadow: 0 0 10px #06b6d4; }
.online { color: #10b981; text-shadow: 0 0 5px #10b981; }
.busy { color: #fbbf24; text-shadow: 0 0 5px #fbbf24; }
.full { color: #ef4444; text-shadow: 0 0 5px #ef4444; }
.news-list { display: flex; flex-direction: column; gap: 20px; }
.news-item { background: linear-gradient(135deg, rgba(6,182,212,0.1), rgba(168,85,247,0.1)); padding: 25px; border-radius: 8px; border-left: 4px solid #06b6d4; box-shadow: 0 0 15px rgba(6,182,212,0.3); backdrop-filter: blur(10px); }
.news-date { color: #06b6d4; font-size: 0.85rem; margin-bottom: 8px; text-shadow: 0 0 5px #06b6d4; }
.news-item h3 { color: #fff; margin-bottom: 10px; text-shadow: 0 0 10px rgba(6,182,212,0.8); }
.news-item p { color: #e2e8f0; line-height: 1.6; }
.rc-header { display: flex; align-items: center; gap: 15px; margin-bottom: 15px; }
.rc-id { color: #a855f7; font-size: 0.9rem; text-shadow: 0 0 5px #a855f7; }
.rc-meta { color: #06b6d4; font-size: 0.85rem; }
.rc-rating { color: #fbbf24; font-size: 1.2rem; }
.review-cyber-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 30px; }
.review-cyber-card { background: linear-gradient(135deg, rgba(168,85,247,0.1), rgba(6,182,212,0.1)); padding: 25px; border-radius: 8px; border: 2px solid #a855f7; box-shadow: 0 0 20px rgba(168,85,247,0.4); }
.review-rating { color: #fbbf24; margin-bottom: 10px; }
.news-date.orange { color: #fb923c; }
.news-date.pink { color: #ec4899; }


/* Final Cyber/Neon Fixes */
.reviews { padding: 80px 0; background: #0c0a09; }
.review-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 30px; }
.review-card { background: linear-gradient(135deg, rgba(6,182,212,0.1), rgba(168,85,247,0.1)); padding: 30px; border-radius: 8px; border: 2px solid #06b6d4; box-shadow: 0 0 20px rgba(6,182,212,0.5); backdrop-filter: blur(10px); }
.review-card:hover { box-shadow: 0 0 40px rgba(6,182,212,0.8), 0 0 60px rgba(168,85,247,0.4); }
.review-rating { color: #fbbf24; font-size: 1.2rem; margin-bottom: 15px; text-shadow: 0 0 10px #fbbf24; }
.servers-section { padding: 80px 0; background: #0a0807; }
.servers-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 30px; }
.server-card { background: linear-gradient(135deg, rgba(6,182,212,0.1), rgba(168,85,247,0.1)); padding: 25px; border-radius: 8px; border: 2px solid #06b6d4; box-shadow: 0 0 20px rgba(6,182,212,0.5); backdrop-filter: blur(10px); }
.server-card:hover { box-shadow: 0 0 40px rgba(6,182,212,0.8), 0 0 60px rgba(168,85,247,0.4); }
.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: bold; text-shadow: 0 0 5px currentColor; border: 1px solid; }
.server-status.online { background: rgba(16,185,129,0.3); color: #10b981; border-color: #10b981; }
.server-status.busy { background: rgba(251,191,36,0.3); color: #fbbf24; border-color: #fbbf24; }
.server-status.full { background: rgba(239,68,68,0.3); color: #ef4444; border-color: #ef4444; }
.server-stats { display: flex; flex-direction: column; gap: 10px; }
.stat-row { display: flex; justify-content: space-between; color: #e2e8f0; font-size: 0.9rem; }
.stat-row span:last-child { color: #06b6d4; font-weight: bold; text-shadow: 0 0 5px #06b6d4; }
.section-desc { text-align: center; color: #e2e8f0; font-size: 1.1rem; margin-bottom: 50px; text-shadow: 0 0 5px rgba(6,182,212,0.5); }
.orange { color: #fb923c; text-shadow: 0 0 5px #fb923c; }
.pink { color: #ec4899; text-shadow: 0 0 5px #ec4899; }
.ac-specs { display: flex; flex-direction: column; gap: 8px; margin-top: 15px; }
.ac-spec { color: #06b6d4; font-size: 0.9rem; text-shadow: 0 0 5px #06b6d4; }
.arsenal-cyber-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 30px; }
.arsenal-cyber-card { background: linear-gradient(135deg, rgba(168,85,247,0.1), rgba(6,182,212,0.1)); padding: 25px; border-radius: 8px; border: 2px solid #a855f7; box-shadow: 0 0 20px rgba(168,85,247,0.4); }
.arsenal-cyber-card:hover { box-shadow: 0 0 40px rgba(168,85,247,0.8), 0 0 60px rgba(6,182,212,0.4); }


.ac-icon { font-size: 2.5rem; text-align: center; margin-bottom: 10px; filter: drop-shadow(0 0 10px #06b6d4); }
.ac-bar { height: 8px; background: rgba(6,182,212,0.2); border-radius: 4px; overflow: hidden; margin-top: 10px; }
.ac-bar div { height: 100%; background: linear-gradient(90deg, #06b6d4, #a855f7); box-shadow: 0 0 10px #06b6d4; }


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

/* 重置盒模型 */
*, *::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;
}

/* ===== Hero 内容居中修复 ===== */
.cyber-hero-content, .hero-content {
    margin: 0 auto !important;
    text-align: center;
    max-width: 900px !important;
    width: 100% !important;
}

/* Hero flex 居中 */
.cyber-hero {
    justify-content: center !important;
}

/* ===== 赛博阿拉德 - 补齐缺失组件 ===== */
.header-tag { font-size: .8rem; letter-spacing: 4px; color: #00e5ff; text-transform: uppercase; margin-bottom: 12px; display: block; }
.section-header { text-align: center; margin-bottom: 44px; }
.section-header h2 { font-size: 2.2rem; color: #fff; margin-bottom: 10px; text-shadow: 0 0 24px rgba(0,229,255,.35); }
.section-header p { color: #889; font-size: 1rem; }
.news-list { display: flex; flex-direction: column; gap: 22px; margin-top: 40px; }
.news-item { background: rgba(0,229,255,.04); border: 1px solid rgba(0,229,255,.18); border-radius: 8px; padding: 24px 26px; transition: .3s; }
.news-item:hover { border-color: #00e5ff; box-shadow: 0 0 20px rgba(0,229,255,.15); }
.news-tag { display: inline-block; padding: 3px 12px; border-radius: 4px; font-size: 12px; background: rgba(0,229,255,.14); color: #00e5ff; margin-bottom: 10px; letter-spacing: 1px; }
.date-day { display: block; font-size: 1.7rem; font-weight: 700; color: #00e5ff; line-height: 1; text-shadow: 0 0 12px rgba(0,229,255,.4); }
.date-month { display: block; font-size: .78rem; color: #667; margin-top: 4px; }
.review-header { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.reviewer-avatar { width: 46px; height: 46px; border-radius: 8px; background: linear-gradient(135deg,#00e5ff,#7c3aed); display: flex; align-items: center; justify-content: center; font-weight: 700; color: #0a0a0f; flex-shrink: 0; }
.reviewer-info strong { display: block; font-size: .95rem; color: #fff; }
.reviewer-server { font-size: .78rem; color: #667; }
.review-rating { color: #00e5ff; letter-spacing: 2px; margin-bottom: 10px; }
.review-footer { display: flex; align-items: center; gap: 10px; margin-top: 14px; }
.review-date { font-size: .78rem; color: #556; }
.review-verified { font-size: .75rem; color: #2ecc71; background: rgba(46,204,113,.1); padding: 2px 8px; border-radius: 4px; }
.guide-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px,1fr)); gap: 28px; margin-top: 40px; }
.step-number { width: 52px; height: 52px; border-radius: 50%; background: linear-gradient(135deg,#00e5ff,#7c3aed); color: #0a0a0f; font-size: 1.3rem; font-weight: 700; display: flex; align-items: center; justify-content: center; margin: 0 auto 16px; box-shadow: 0 0 18px rgba(0,229,255,.35); }
.step-content h3 { font-size: 1.05rem; color: #fff; margin-bottom: 8px; }
.step-content p { font-size: .9rem; color: #9ab; line-height: 1.7; }
.v60, .v70, .v86 { display: inline-block; padding: 3px 12px; border-radius: 4px; font-size: .78rem; font-weight: 600; }
.v60 { background: rgba(0,229,255,.15); color: #00e5ff; }
.v70 { background: rgba(167,139,250,.15); color: #a78bfa; }
.v86 { background: rgba(255,45,85,.15); color: #ff2d55; }
.update { display: inline-block; padding: 3px 12px; border-radius: 4px; font-size: .78rem; background: rgba(0,229,255,.12); color: #00e5ff; }
.pvp { display: inline-block; padding: 3px 12px; border-radius: 4px; font-size: .78rem; background: rgba(255,45,85,.15); color: #ff2d55; }
.event { display: inline-block; padding: 3px 12px; border-radius: 4px; font-size: .78rem; background: rgba(167,139,250,.15); color: #a78bfa; }