/* ===== 基础样式 ===== */
* { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; }
html { scroll-behavior: smooth; }
body {
    color: #fff; min-height: 100vh; 
    background: linear-gradient(135deg, #0c1a3a, #1a2a6c, #0c1a3a);
    overflow-x: hidden;
}

/* ===== 导航栏 ===== */
.main-nav {
    position: fixed; top: 0; left: 0; width: 100%;
    background: rgba(12, 26, 58, 0.9); backdrop-filter: blur(8px);
    padding: 15px 0; z-index: 1000;
    display: flex; justify-content: center; gap: 25px;
    border-bottom: 1px solid rgba(79, 195, 247, 0.3);
}
.main-nav a {
    color: #b0bec5; text-decoration: none; font-weight: 500;
    padding: 5px 15px; border-radius: 20px; transition: all 0.3s;
}
.main-nav a:hover, .main-nav a.active {
    color: #4fc3f7; background: rgba(79, 195, 247, 0.15);
    text-shadow: 0 0 10px rgba(79, 195, 247, 0.7);
}

/* ===== 公共容器 ===== */
.container {
    max-width: 800px; margin: 80px auto 20px;
    background: rgba(10, 20, 40, 0.85); padding: 30px;
    border-radius: 15px; backdrop-filter: blur(10px);
    border: 1px solid rgba(79, 195, 247, 0.3);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.7);
}

/* ===== 粒子画布 ===== */
#particles-js { 
    position: fixed; width: 100%; height: 100%; 
    top: 0; left: 0; z-index: 0; 
}

/* ===== 加载动画 ===== */
.loader {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: #0c1a3a; z-index: 1000;
    display: flex; flex-direction: column; 
    justify-content: center; align-items: center;
    transition: opacity 0.3s, visibility 0.3s;
}
.loader.hidden { opacity: 0; visibility: hidden; }
.loader-spinner {
    width: 75px; height: 75px; border-radius: 50%;
    border: 5px solid rgba(79, 195, 247, 0.3);
    border-top-color: #4fc3f7; animation: spin 1s ease-in-out infinite;
}
.loader-progress {
    width: 80%; max-width: 300px; height: 4px;
    background: rgba(79, 195, 247, 0.2); margin-top: 20px;
}

/* ===== 动画 ===== */
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes pulse { 
    0% { transform: scale(1); } 
    50% { transform: scale(1.05); } 
    100% { transform: scale(1); } 
}

/* ===== 响应式设计 ===== */
@media (max-width: 768px) {
    .main-nav { gap: 10px; padding: 10px 0; }
    .container { margin-top: 70px; padding: 20px; }
}
@media (max-width: 480px) {
    .main-nav { flex-wrap: wrap; }
    .container { margin: 70px 10px 10px; }
}