/* ==================== 基础样式 ==================== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    min-height: 100vh;
    color: #fff;
    overflow-x: hidden;
    position: relative;
}

/* 星空背景效果 */
.stars {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
}

.stars::before,
.stars::after {
    content: '';
    position: absolute;
    width: 2px;
    height: 2px;
    background: white;
    box-shadow: 
        100px 200px white, 200px 100px white, 300px 300px white,
        400px 150px white, 500px 250px white, 150px 400px white,
        250px 500px white, 350px 450px white, 450px 350px white,
        550px 450px white, 650px 250px white, 750px 350px white,
        50px 550px white, 150px 650px white, 250px 750px white,
        850px 150px white, 950px 250px white, 1050px 350px white,
        1150px 450px white, 1250px 150px white, 1350px 250px white;
    animation: twinkle 3s infinite;
}

.stars::after {
    animation-delay: 1.5s;
}

@keyframes twinkle {
    0%, 100% { opacity: 0.3; }
    50% { opacity: 1; }
}

/* ==================== 布局 ==================== */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
    position: relative;
    z-index: 1;
}

header {
    text-align: center;
    padding: 50px 20px 40px;
    animation: fadeInDown 1s ease;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.05) 0%, transparent 100%);
    border-radius: 30px;
    margin-bottom: 20px;
}

h1 {
    font-size: 3.2rem;
    margin-bottom: 15px;
    text-shadow: 0 4px 20px rgba(0, 0, 0, 0.4), 0 0 40px rgba(255, 215, 155, 0.3);
    letter-spacing: 3px;
    background: linear-gradient(135deg, #fff 0%, #ffd89b 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-weight: 700;
}

.subtitle {
    font-size: 1.3rem;
    opacity: 0.85;
    font-style: italic;
    color: rgba(255, 255, 255, 0.9);
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
    letter-spacing: 1px;
}

main {
    min-height: 60vh;
}

footer {
    text-align: center;
    padding: 40px 20px;
    opacity: 0.8;
    font-size: 0.9rem;
}

.hidden {
    display: none !important;
}

/* ==================== 动画 ==================== */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translateY(-30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-20px); }
}

@keyframes bounceIn {
    0% {
        transform: scale(0);
        opacity: 0;
    }
    50% {
        transform: scale(1.2);
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

/* ==================== 响应式设计 ==================== */
@media (max-width: 768px) {
    h1 {
        font-size: 2rem;
    }

    .subtitle {
        font-size: 1rem;
    }
}