#app{width:100%;min-height:100vh;display:flex;justify-content:center;align-items:center;padding:.5rem}:root{--theme-color: #1976d2;--theme-light: #e3f2fd;--border-color: #e0e0e0;--text-primary: #333;--text-secondary: #666;--success-color: #4caf50;--warning-color: #ff9800;--error-color: #f44336;--offline-color: #9e9e9e}:root{--theme-color: #338fff}@font-face{font-family:iconfont;src:url(data:font/ttf;base64,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) format("truetype")}.iconfont{font-family:iconfont!important;font-size:22px;font-style:normal;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.floating-buttons{position:fixed;right:24px;bottom:24px;display:flex;flex-direction:column;gap:12px;z-index:1000}.floating-btn{display:flex;align-items:center;gap:8px;padding:12px 16px;border:none;border-radius:50px;cursor:pointer;font-size:14px;font-weight:500;transition:all .3s ease;box-shadow:0 4px 16px #00000026;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);min-width:140px;position:relative;overflow:hidden}.floating-btn:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.2),transparent);transition:left .5s}.floating-btn:hover:before{left:100%}.floating-btn:hover{transform:translate(-4px) scale(1.05);box-shadow:0 6px 20px #00000040}.floating-icon{font-size:18px;flex-shrink:0}.floating-text{white-space:nowrap}.my-servers-btn{background:linear-gradient(135deg,#1976d2,#1565c0);color:#fff}.my-servers-btn:hover{background:linear-gradient(135deg,#1565c0,#0d47a1)}.add-server-btn{background:linear-gradient(135deg,#4caf50,#45a049);color:#fff}.add-server-btn:hover{background:linear-gradient(135deg,#45a049,#388e3c)}body{font-family:Microsoft YaHei,Arial,sans-serif;background:#f5f6fa;margin:0;padding:0;font-size:14px}.container{max-width:1200px;width:100%;margin:50 auto;padding:20px;overflow:hidden;animation:fadeInUp .8s cubic-bezier(.23,1.01,.32,1) .1s both;position:relative}h1{text-align:center;color:var(--theme-color);font-size:28px;margin-bottom:24px}.server-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:24px}@media (max-width: 900px){.server-list{grid-template-columns:1fr}}.server-card{display:flex;flex-direction:column;background:#fafdffcc;border-radius:12px;box-shadow:0 2px 16px #338fff22,0 1.5px 8px #b3e0ff33;padding:0 0 18px;align-items:stretch;position:relative;overflow:hidden;transition:transform .25s cubic-bezier(.23,1.01,.32,1),box-shadow .25s,filter .25s,border-color .2s;animation:fadeInUp .7s cubic-bezier(.23,1.01,.32,1) both;cursor:pointer;outline:none}.server-card:hover{transform:translateY(-6px) scale(1.025);box-shadow:0 8px 32px #338fff55,0 2px 16px #b3e0ff77;filter:brightness(1.03) saturate(1.08);border-color:#7fd6ff;z-index:2}.server-card:active{transform:scale(.97);box-shadow:0 8px 32px #338fff77,0 2px 16px #b3e0ff99;filter:brightness(.98) saturate(.95);transition:transform .12s,box-shadow .12s,filter .12s}.server-card:focus{box-shadow:0 0 0 3px #338fff55,0 8px 32px #338fff55,0 2px 16px #b3e0ff77;border:1.5px solid #338fff}.server-card-content{display:flex;flex-direction:row;align-items:center;padding:10px 20px 0;position:relative}@media (max-width: 900px){.server-card-content{flex-direction:column;align-items:flex-start;padding:8px 12px 0}}.server-banner{width:100%;height:80px;margin-bottom:0;position:relative;z-index:1;animation:bannerFadeIn 1s cubic-bezier(.23,1.01,.32,1);overflow:hidden;transition:height .4s cubic-bezier(.23,1.01,.32,1),background .4s cubic-bezier(.23,1.01,.32,1),opacity .4s cubic-bezier(.23,1.01,.32,1)}.server-banner:after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:36px;background:linear-gradient(to bottom,#fff0,#fafdff);pointer-events:none;z-index:2}.server-icon{width:56px;height:56px;border-radius:8px;margin:0 20px 0 0;background:#eee;object-fit:cover;border:2px solid var(--theme-color);box-shadow:0 2px 12px #338fff22;transition:box-shadow .3s,border-color .3s}@media (max-width: 900px){.server-icon{margin:0 0 12px}}.server-info{flex:1}.server-title{font-size:18px;font-weight:700;color:#222;margin-bottom:4px;letter-spacing:.5px;background:none;-webkit-text-fill-color:unset;text-shadow:none;transition:text-shadow .3s}.server-card .server-desc{color:#5a6a7a;margin-bottom:8px;font-size:13px;letter-spacing:.3px;position:relative;padding-bottom:12px;line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis}.server-desc:after{content:"";display:block;position:absolute;left:0;right:0;bottom:0;height:5px;background:#f0f1f3;border-radius:6px}.server-tags{margin-bottom:8px}.tag{display:inline-block;color:#333;border-radius:6px;padding:2px 6px;font-size:11px;margin-right:4px;margin-bottom:6px;font-weight:500;letter-spacing:.3px;box-shadow:0 1px 6px #338fff22;transition:box-shadow .3s,transform .2s,background .3s;cursor:pointer;border:none}.tag:hover{box-shadow:0 2px 12px #338fff55;filter:brightness(1.08)}@keyframes bannerFadeIn{0%{opacity:0;transform:translateY(-20px)}to{opacity:1;transform:none}}.below-title-flex{display:flex;gap:24px;margin:24px 0 20px;width:100%;align-items:stretch}@media (max-width: 768px){.below-title-flex{flex-direction:column}}.below-title-slider{flex:2;min-width:0;background:#fff;border-radius:12px;box-shadow:0 2px 16px #338fff22;position:relative;display:flex;flex-direction:column;align-items:center;min-height:auto;overflow:hidden;padding:0;justify-content:stretch}.below-title-slider .slide{display:none;width:100%;height:100%;align-items:center;justify-content:center}.below-title-slider .slide.active{display:flex}.below-title-slider .slide img{width:100%;height:100%;object-fit:cover;border-radius:12px;display:block}.below-title-slider .slider-dots{display:flex;flex-direction:row;gap:10px;position:absolute;left:50%;bottom:16px;transform:translate(-50%)}.below-title-slider .dot{width:12px;height:12px;border-radius:50%;background:#e3e6eb;border:2px solid #fff;box-shadow:0 1px 4px #338fff22;transition:background .2s,transform .2s;cursor:pointer}.below-title-slider .dot.active{background:#338fff;transform:scale(1.18)}.below-title-rank{flex:1;min-width:240px;background:#fff;border-radius:12px;box-shadow:0 2px 16px #338fff22,0 1.5px 8px #b3e0ff33;padding:16px 12px;display:flex;flex-direction:column;align-items:flex-start;height:fit-content}.rank-title{font-weight:700;color:#338fff;font-size:18px;margin-bottom:12px;letter-spacing:.5px;display:flex;align-items:center;justify-content:center;gap:6px;width:100%}.rank-list{list-style:none;padding:0;margin:0;width:100%}.rank-list li{display:flex;align-items:center;justify-content:flex-start;gap:10px;padding:12px 8px;font-size:14px;color:#333;border-bottom:1px solid #f0f1f3;background:#e5f4ff;border-radius:10px;margin-bottom:8px;box-shadow:0 1px 6px #338fff11;width:100%;margin-left:0;box-sizing:border-box}.rank-list li:last-child{border-bottom:none;margin-bottom:0}.rank-icon{width:32px;height:32px;border-radius:6px;object-fit:cover;background:#eee;border:2px solid #e3e6eb;box-shadow:0 1px 4px #338fff11;flex-shrink:0}.rank-info{flex:1;min-width:0;display:flex;flex-direction:column;justify-content:center;gap:2px}.rank-title-main{font-weight:700;color:#222;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.rank-desc{color:#888;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.rank-value{color:#338fff;font-size:13px;font-weight:700;margin-left:6px;white-space:nowrap;text-align:right;min-width:45px;flex-shrink:0}.rank-order{display:inline-block;width:22px;height:22px;background:#e3e6eb;color:#888;border-radius:50%;text-align:center;line-height:22px;font-weight:700;margin-right:6px;font-size:13px;flex-shrink:0}.rank-order.rank-top{background:#ffeaea;color:#ff3b3b}@media (max-width: 900px){.below-title-flex{flex-direction:column;gap:18px}.below-title-slider,.below-title-rank{width:100%}.below-title-slider{height:280px}}.official-list-box{width:100%;margin:0;border-radius:16px}.official-title{font-size:20px;color:#222;font-weight:700;margin-bottom:20px;margin-top:20px;text-align:left;letter-spacing:1px;display:flex;align-items:center;justify-content:space-between;gap:10px;background:linear-gradient(90deg,#d2eaff,#eaf6ff);padding:0;position:relative}.official-title span{flex:1;text-align:left}.official-title:before{content:"";display:inline-block;width:6px;height:1.5em;background:linear-gradient(180deg,#338fff,#7fd6ff);border-radius:4px;margin-right:12px;vertical-align:middle}.official-announcement{width:100%;background:linear-gradient(90deg,#e5f4ff,#cce6ff);color:#0052d9;font-size:22px;font-weight:600;border-radius:12px;text-align:left;padding:12px 20px;margin:36px 0 0;box-shadow:0 2px 8px #338fff11;letter-spacing:.5px;display:flex;align-items:center;gap:8px}.hot-title-red{background:linear-gradient(90deg,#ffd6d6,#ffeaea);color:#222;position:relative}.hot-title-red:before{content:"";display:inline-block;width:6px;height:1.5em;background:linear-gradient(180deg,#ff3b3b,#ffb3b3);border-radius:4px;margin-right:12px;vertical-align:middle}.public-title-yellow{background:linear-gradient(90deg,#fff3b2,#fffbe5);color:#222;position:relative}.public-title-yellow:before{content:"";display:inline-block;width:6px;height:1.5em;background:linear-gradient(180deg,#ffd600,#fff7b2);border-radius:4px;margin-right:12px;vertical-align:middle}.view-all-link{font-size:14px;color:#338fff;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px;font-weight:500;transition:all .18s ease;display:inline-block;vertical-align:middle;margin-top:0;margin-bottom:0;margin-right:10px;line-height:1.6}.view-all-link:hover{color:#0052d9;text-decoration-color:#0052d9}.official-title{position:relative}@keyframes fadeInUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}@media (max-width: 768px){.container{margin:16px auto;padding:16px 12px 12px}.below-title-flex{gap:16px;margin:16px 0}.below-title-slider{border-radius:8px}.below-title-slider .slider-dots{bottom:12px}.below-title-rank{border-radius:8px;padding:12px 10px}.rank-title{font-size:16px;margin-bottom:10px}.rank-list li{padding:10px 6px;margin-bottom:6px}.rank-icon{width:28px;height:28px}.rank-title-main{font-size:13px}.rank-desc{font-size:11px}.rank-value{font-size:12px;min-width:40px}.rank-order{width:20px;height:20px;line-height:20px;font-size:12px}.official-announcement{font-size:18px;padding:10px 16px;margin:24px 0 0;border-radius:8px}.iconfont{font-size:18px}.official-title{font-size:18px;margin-bottom:16px;margin-top:16px;letter-spacing:.5px}.official-title:before{width:4px;border-radius:3px;margin-right:10px}.view-all-link{font-size:14px;padding:1px 8px;border-radius:8px}.server-list{gap:16px}.server-card{border-radius:8px;padding:0 0 14px}.server-card:hover{transform:translateY(-4px) scale(1.02)}.server-banner{height:70px}.server-card-content{padding:8px 16px 0}.server-icon{width:50px;height:50px;border-radius:6px;margin:0 16px 0 0}.server-title{font-size:16px;margin-bottom:3px}.server-desc{font-size:12px;margin-bottom:6px;padding-bottom:10px}.tag{padding:2px 5px;font-size:10px;margin-right:3px;margin-bottom:4px;border-radius:5px}}@media (max-width: 480px){.container{margin:12px auto;padding:50px 8px 8px}.floating-buttons{right:12px;bottom:12px;gap:8px}.floating-btn{padding:10px 12px;font-size:12px;min-width:120px;gap:6px}.floating-icon{font-size:16px}.below-title-flex{gap:12px;margin:12px 0}.below-title-slider{border-radius:6px;height:220px}.below-title-slider .slide img{border-radius:6px}.below-title-slider .slider-dots{bottom:10px}.below-title-slider .dot{width:10px;height:10px}.below-title-rank{border-radius:6px;padding:10px 8px}.rank-title{font-size:15px;margin-bottom:8px}.rank-list li{padding:8px 5px;margin-bottom:5px;gap:8px}.rank-icon{width:24px;height:24px;border-radius:5px}.rank-title-main{font-size:12px}.rank-desc{font-size:10px}.rank-value{font-size:11px;min-width:35px}.rank-order{width:18px;height:18px;line-height:18px;font-size:11px;margin-right:5px}.official-announcement{font-size:16px;padding:8px 12px;margin:20px 0 0;border-radius:6px}.iconfont{font-size:16px}.official-title{font-size:16px;margin-bottom:14px;margin-top:14px}.view-all-link{font-size:14px;padding:1px 6px;border-radius:6px}.server-list{gap:12px}.server-card{border-radius:6px;padding:0 0 12px}.server-card:hover{transform:translateY(-3px) scale(1.015)}.server-banner{height:60px}.server-card-content{padding:6px 12px 0}.server-icon{width:44px;height:44px;border-radius:5px;margin:0 12px 0 0}.server-title{font-size:15px;margin-bottom:2px}.server-desc{font-size:11px;margin-bottom:5px;padding-bottom:8px}.tag{padding:1px 4px;font-size:9px;margin-right:2px;margin-bottom:3px;border-radius:4px}}@media (max-width: 360px){.container{padding:10px 6px 6px}.floating-btn{padding:8px 10px;font-size:11px;min-width:100px}.below-title-slider{height:200px}.server-banner{height:50px}.server-icon{width:40px;height:40px}.server-title{font-size:14px}.official-announcement{font-size:14px;padding:6px 10px}.official-title{font-size:15px}}@media (max-width: 576px){.floating-text{display:none}.floating-btn{min-width:auto;width:48px;height:48px;justify-content:center;padding:0;border-radius:50%}.floating-icon{font-size:20px}}