:root {
    --primary: #ff6b9d;
    --secondary: #c471ed;
    --dark: #1a1a2e;
    --darker: #0f0f1e;
    --light: #ffffff;
    --gray: #a0a0b0;
    --shadow: rgba(255, 107, 157, 0.3);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'PingFang SC', 'Microsoft YaHei', -apple-system, BlinkMacSystemFont, sans-serif;
    background: linear-gradient(135deg, var(--darker) 0%, var(--dark) 50%, #16213e 100%);
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    position: relative;
    overflow: hidden;
}

/* 星空背景动画 */
.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, 300px 100px white, 500px 300px white,
        700px 150px white, 200px 400px white, 600px 250px white,
        150px 50px white, 450px 450px white, 800px 350px white,
        250px 150px white, 550px 50px white, 350px 350px white,
        50px 300px white, 750px 450px white, 400px 200px white,
        650px 100px white, 900px 250px white, 180px 280px white,
        480px 380px white, 780px 80px white, 120px 420px white,
        420px 120px white, 720px 320px white, 320px 220px white;
    animation: twinkle 3s infinite alternate;
}

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

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

.container {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 480px;
    animation: fadeInUp 0.8s ease-out;
}

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

.download-card {
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(20px);
    border-radius: 32px;
    padding: 48px 32px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
    text-align: center;
}

/* APP图标 */
.app-icon {
    width: 100px;
    height: 100px;
    margin: 0 auto 24px;
    position: relative;
    animation: float 3s ease-in-out infinite;
}

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

.icon-glow {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 120px;
    height: 120px;
    background: radial-gradient(circle, var(--shadow) 0%, transparent 70%);
    animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {
    0%, 100% { opacity: 0.5; transform: translate(-50%, -50%) scale(1); }
    50% { opacity: 0.8; transform: translate(-50%, -50%) scale(1.1); }
}

.app-icon svg {
    width: 100%;
    height: 100%;
    filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.3));
    position: relative;
    z-index: 1;
}

/* 标题 */
.app-name {
    font-size: 36px;
    font-weight: 700;
    background: linear-gradient(135deg, var(--primary), var(--secondary));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 12px;
    letter-spacing: 2px;
}

.app-slogan {
    color: var(--gray);
    font-size: 15px;
    margin-bottom: 40px;
    line-height: 1.6;
}

/* 二维码区域 */
.qr-section {
    margin-bottom: 40px;
}

.qr-container {
    width: 240px;
    height: 240px;
    margin: 0 auto 20px;
    background: white;
    border-radius: 24px;
    padding: 20px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3);
    position: relative;
    overflow: hidden;
}

.qr-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 8px;
}

.qr-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
}

.scan-line {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--primary), transparent);
    animation: scan 2s linear infinite;
}

@keyframes scan {
    0% { transform: translateY(0); }
    100% { transform: translateY(240px); }
}

.qr-hint {
    color: var(--gray);
    font-size: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-weight: 500;
}

.icon-phone {
    width: 20px;
    height: 20px;
    color: var(--primary);
}

/* 版本信息 */
.version-info {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 20px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.version-tag {
    padding: 6px 14px;
    background: linear-gradient(135deg, var(--primary), var(--secondary));
    border-radius: 20px;
    color: white;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.5px;
}

.support-text {
    color: var(--gray);
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.support-text::before {
    content: '📱';
    font-size: 16px;
}

/* 响应式 */
@media (max-width: 480px) {
    .download-card {
        padding: 36px 24px;
    }
    
    .app-name {
        font-size: 28px;
    }
    
    .qr-container {
        width: 200px;
        height: 200px;
    }
    
    .version-info {
        flex-direction: column;
        gap: 10px;
    }
}