*{box-sizing:border-box}body{margin:0;font-family:Arial,sans-serif;background:#07070b;color:#fff}
.back-btn{position:fixed;top:20px;left:20px;background:#171723;color:#fff;padding:10px 16px;border-radius:10px;text-decoration:none;border:1px solid #444;z-index:999}
.back-btn:hover{border-color:#7b2cff}
.hero{background:radial-gradient(circle at top,#5d1d8b,#07070b 70%);padding:80px 20px;text-align:center}
h1{font-size:72px;margin:0;font-weight:800}
.subtitle{color:#c9bfd8;font-size:20px}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:20px;max-width:1100px;margin:50px auto}
.stat{background:rgba(20,20,30,.8);backdrop-filter:blur(8px);border:1px solid #4f2f8a;border-radius:20px;padding:25px}
.stat span{display:block;font-size:48px;font-weight:700;color:#ff3d7f}
.stat label{color:#bbb}
#search{width:min(1100px,100%);padding:16px 20px;border-radius:16px;border:1px solid #4f2f8a;background:#141420;color:#fff;font-size:18px}
section{max-width:1100px;margin:40px auto;padding:0 20px}
.game-group{margin-bottom:44px}
.game-badge{display:inline-flex;align-items:center;gap:8px;background:#1a1a25;border:1px solid #444;border-radius:999px;padding:6px 14px;font-size:13px;font-weight:700;margin-bottom:18px;letter-spacing:.5px}
.game-badge img{width:20px;height:20px;object-fit:contain}
#serverList .game-group > .server{margin-bottom:18px}
.server{background:#151521;border:1px solid #403060;border-radius:18px;padding:22px;transition:.25s}
.server:hover{transform:translateY(-4px);box-shadow:0 0 25px rgba(123,44,255,.25)}
.server.offline{opacity:.55}
.server.offline:hover{transform:none;box-shadow:none}
.row{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.name{font-size:24px;font-weight:bold}
.right{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.status.on{color:#00ff88;font-weight:bold}
.status.off{color:#ff4d4d;font-weight:bold}
.connect{background:linear-gradient(90deg,#ff2a6d,#7b2cff);color:#fff;text-decoration:none;font-weight:700;font-size:13px;padding:8px 16px;border-radius:999px;letter-spacing:.5px}
.connect:hover{filter:brightness(1.15)}
.bar{height:10px;background:#262636;border-radius:99px;margin:16px 0;overflow:hidden}
.fill{height:100%;background:linear-gradient(90deg,#ff2a6d,#7b2cff)}
.meta{display:flex;gap:18px;color:#bbb;flex-wrap:wrap}
footer{text-align:center;color:#777;padding:40px}
.loading{display:flex;flex-direction:column;align-items:center;gap:18px;padding:60px 0;color:#bbb;font-size:18px}
.spinner{width:44px;height:44px;border-radius:50%;border:4px solid #2b2b36;border-top-color:#ff2a6d;animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.spark{margin-top:16px}
.spark svg{display:block;width:100%;height:46px;border-radius:8px;background:#101018}
.spark-label{color:#8a8a99;font-size:12px;margin-top:6px;text-align:right}
.netchart-section{max-width:1100px;margin:40px auto 0;padding:0 20px}
.netchart-head{display:flex;align-items:baseline;gap:14px;margin-bottom:14px;flex-wrap:wrap}
.netchart-head h2{margin:0;font-size:22px}
.netchart-sub{color:#8a8a99;font-size:14px}
.netchart{background:#151521;border:1px solid #403060;border-radius:18px;padding:18px}
.netchart svg{display:block;width:100%;height:120px;border-radius:10px;background:#101018}
.netchart-stats{display:flex;justify-content:space-between;color:#8a8a99;font-size:13px;margin-top:10px}
.netchart-stats b{color:#ff3d7f}
.netchart-empty{background:#151521;border:1px dashed #403060;border-radius:18px;padding:30px;text-align:center;color:#8a8a99}
.chart-hover{cursor:crosshair}
#chartTip{position:fixed;z-index:1000;pointer-events:none;background:#1c1c2a;border:1px solid #7b2cff;border-radius:10px;padding:8px 12px;font-size:14px;box-shadow:0 6px 20px rgba(0,0,0,.5);white-space:nowrap}
#chartTip b{color:#ff3d7f;font-size:16px}
#chartTip span{display:block;color:#9a9aa8;font-size:12px;margin-top:2px}