body{margin:0;font-family:"微软雅黑","Microsoft YaHei",sans-serif;background-color:#121212;color:#e0e0e0}
.navbar{background-color:rgba(30,30,30,0.1);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);padding:10px;display:flex;align-items:center;justify-content:space-between;position:fixed;top:0;left:0;right:0;z-index:1000;border-bottom:1px solid rgba(255,255,255,0.1);box-shadow:0 2px 10px rgba(0,0,0,0.3)}
.navbar img{height:40px;margin-right:10px}
.navbar a{color:#e0e0e0;text-decoration:none;font-size:18px;padding:10px;transition:background-color 0.3s ease}
.navbar a:hover{background-color:#333;border-radius:5px}
.navbar-menu{display:flex;align-items:center}
.navbar-menu.responsive{display:none;animation:slide-down 0.3s ease-out}
.navbar-menu.responsive a{display:block;text-align:left}
.navbar-toggle{display:none;cursor:pointer}
.navbar-toggle span{display:block;height:3px;width:25px;background-color:#e0e0e0;margin:5px 0;transition:all 0.3s ease}
.navbar-toggle.active span:nth-child(1){transform:rotate(-45deg) translate(-5px,6px)}
.navbar-toggle.active span:nth-child(2){opacity:0}
.navbar-toggle.active span:nth-child(3){transform:rotate(45deg) translate(-5px,-6px)}
@media (max-width:768px){.navbar-menu{display:none}
.navbar-toggle{display:block}
.navbar-menu.responsive{display:block;position:absolute;top:60px;right:10px;background-color:#1e1e1e;border-radius:5px;box-shadow:0 4px 6px rgba(0,0,0,0.2)}
}.container{padding:20px;margin-top:60px}
h1{color:#ffffff}
h2,h4{font-size:2em}
img{max-width:100%;height:auto}
@media (max-width:768px){h2,h4{font-size:1.5em}
}@media (max-width:480px){h2,h4{font-size:1.2em}
}@keyframes slide-down{from{opacity:0;transform:translateY(-10px)}
to{opacity:1;transform:translateY(0)}
}a{text-decoration:none}
div.content h1{text-align:center}
div.content{text-align:center}
div.content img{display:inline-block;vertical-align:middle}
@media (min-width:769px){h1{font-size:3em}
h2,h4{font-size:2.5em}
body{font-size:16px}
.navbar-menu .link{position:relative;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;width:50px;height:25px;color:#e0e0e0;overflow:hidden;z-index:1;transform-origin:center left;transition:width 0.2s ease-in;background-color:rgba(255,255,255,0.05);border-radius:4px;margin:0 2px}
.navbar-menu .link:before{position:absolute;content:"";display:block;width:100%;height:100%;background:rgba(255,255,255,0.1);top:0;z-index:-1;border-radius:4px;transform:translateX(100%);transform-origin:center right;transition:transform 0.2s ease-in}
.navbar-menu .link:hover{width:75px}
.navbar-menu .link:hover:before{transform:translateX(0)}
.navbar-menu .link .icon{width:25px;height:25px;display:block;flex-shrink:0;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);transition:left 0.2s ease-in,transform 0.2s ease-in}
.navbar-menu .link:hover .icon{left:5px;transform:translateY(-50%)}
.navbar-menu .link .icon i{font-size:25px}
.navbar-menu .link .txt{display:block;width:100%;text-indent:25px;text-align:center;opacity:0;transform:translateX(100%);transform-origin:center right;transition:opacity 0.2s ease-in,transform 0.2s ease-in;font-size:16px}
.navbar-menu .link:hover .txt{opacity:1;transform:translateX(0)}
}.navbar-test-text{position:absolute;left:60px;top:30px;color:#e0e0e0;font-size:18px;line-height:1;transform:translateY(-50%)}
.floating-card{background-color:#272727;border-radius:12px;box-shadow:0 4px 12px rgba(0,0,0,0.15);padding:24px;margin:20px 0;transition:all 0.3s ease;position:relative;overflow:hidden}
.floating-card{max-width:1000px;margin-left:auto;margin-right:auto}
@media (max-width:480px){.floating-card{width:90%;padding:16px}
}@media (min-width:481px) and (max-width:767px){.floating-card{width:85%}
}@media (min-width:768px) and (max-width:991px){.floating-card{width:80%}
}@media (min-width:992px) and (max-width:1199px){.floating-card{width:70%}
}@media (min-width:1200px){.floating-card{width:60%}
}.floating-card:hover{transform:translateY(-5px);box-shadow:0 8px 20px rgba(0,0,0,0.2)}
.floating-card h2{margin-top:0;color:white;font-weight:600}
.floating-card p{color:white;line-height:1.6}
.floating-card a{color:#b0b0b0;text-decoration:none;transition:color 0.3s ease}
.floating-card a:hover{color:white}
.tab-container{margin:20px 0}
.tab-bar{display:flex;border-radius:8px 8px 0 0;overflow:hidden;border:1px solid #333;background-color:#222}
.tab{flex:1;padding:10px 20px;cursor:pointer;background-color:#333;color:#e0e0e0;text-align:center;transition:background-color 0.3s ease}
.tab.active{background-color:#555}
.content-panel{display:none;padding:20px;background-color:#222;color:#e0e0e0;border-radius:0 0 8px 8px;border:1px solid #333;border-top:none;animation:fadeIn 0.5s ease}
.content-panel.active{display:block}
@keyframes fadeIn{from{opacity:0;transform:translateY(10px)}
to{opacity:1;transform:translateY(0)}
}.refresh-btn{display:inline-block;width:50px;height:33px;line-height:30px;text-align:center;border-radius:5px;background-color:#333;color:#e0e0e0;cursor:pointer;margin-left:10px;transition:background-color 0.3s ease}
.refresh-btn:hover{background-color:#555}
.mods-table{width:100%;border-collapse:collapse;margin-top:15px}
.mods-table td{padding:10px;border-bottom:1px solid #444;color:#e0e0e0}
.mods-table tr:hover{background-color:#2a2a2a}
.mod-item-name{width:70%}
.mod-item-size{width:30%;text-align:right}
.card-container{display:flex;flex-wrap:wrap;justify-content:center;gap:20px;margin-top:30px}
.card{width:250px;height:180px;background-color:#111111;border-radius:10px;box-shadow:0 4px 8px rgba(0,0,0,0.1);display:flex;flex-direction:column;align-items:center;justify-content:center;padding:20px;transition:transform 0.3s ease,box-shadow 0.3s ease;cursor:pointer;border:2px solid #176502}
.card:hover{transform:translateY(-10px);box-shadow:0 10px 20px rgba(0,0,0,0.15)}
.card-icon{font-size:40px;margin-bottom:15px;color:#ffffff}
.card-title{font-size:18px;font-weight:bold;margin-bottom:10px;text-align:center;color:#ffffff}
.card-desc{font-size:14px;text-align:center;color:#ffffff}
.animated-section{display:flex;margin:50px auto;max-width:800px;opacity:1;transform:translateY(0);transition:opacity 0.5s ease-in-out,transform 0.5s ease-in-out;align-items:center}
.animated-section.hidden{opacity:0;transform:translateY(20px)}
.image-container{flex:0 0 300px;margin-right:30px}
.image-container img{width:100%;height:auto;object-fit:contain}
.text-container{flex:1;display:flex;flex-direction:column;transform:translateY(-10px)}
.animated-text{margin:10px 0;opacity:0;transform:translateX(-30px);transition:opacity 0.8s ease,transform 0.8s ease}
.animated-text.visible{opacity:1;transform:translateX(0)}
h2{margin-left:0;margin-bottom:15px}
p{line-height:1.6}
@media (max-width:768px){.animated-section{flex-direction:column;align-items:center}
.image-container{flex:0 0 auto;width:250px;margin-right:0;margin-bottom:20px}
.text-container{width:90%;align-items:flex-start;padding:0 15px}
}@media (max-width:480px){.image-container{width:200px}
}@media (max-width:320px){.image-container{width:180px}
}@media (max-width:768px){.content{text-align:center}
.content p{margin:0 auto;max-width:80%}
.join-button{width:auto;display:inline-block;max-width:100%;margin:20px auto;text-align:center;padding:12px 20px}
}@media (max-width:480px){.join-button{padding:10px 15px;font-size:14px}
.content p{max-width:90%}
}@keyframes pulse{0%{transform:scale(1)}
50%{transform:scale(1.05)}
100%{transform:scale(1)}
}.join-button:hover:active{animation:pulse 0.2s ease-out}
.join-button{display:inline-flex;align-items:center;padding:12px 25px;margin:20px auto;background-color:#2ecc71;color:#000;font-weight:600;border-radius:30px;transition:all 0.3s ease;box-shadow:0 4px 15px rgba(46,204,113,0.4)}
.join-button:hover{background-color:#27ae60;box-shadow:0 6px 20px rgba(46,204,113,0.6)}
.loader-container{position:fixed;top:0;left:0;width:100%;height:100%;background-color:#121212;display:flex;justify-content:center;align-items:center;z-index:9999;transition:opacity 0.5s ease}
.loader{border:4px solid rgba(255,255,255,0.3);border-radius:50%;border-top:4px solid #2ecc71;width:40px;height:40px;animation:spin 1s linear infinite}
@keyframes spin{0%{transform:rotate(0deg)}
100%{transform:rotate(360deg)}
}body.loaded .loader-container{opacity:0;pointer-events:none;transition:opacity 0.5s ease}
.custom-button{width:90%;max-width:700px;height:200px;border:1px solid #34383A;background-color:#202127;color:white;font-size:16px;cursor:pointer;transition:border-color 0.3s;border-radius:10px;position:relative;padding:30px;margin:16px;margin:70px auto;display:block}
.custom-button:hover{border-color:#34d399}
.custom-button:active{border-color:#34d399}
.main-text{position:absolute;font-size:22px;top:30px;left:25px}
.num-text{position:left;text-align:left;top:65px;left:25px;right:25px;color:#999;font-size:16px}
.start-reading{position:absolute;bottom:25px;left:25px;color:#34d399;font-size:16px}