/* style.css - 极简苹果风 (V5 字体修复版) */
:root {
    --bg-color: #000000;
    --text-main: #ffffff;
    --text-sub: #c9c9c9;
    --accent: #63fe3f; /* 霓虹绿 */
    /* 核心修复：更稳健的字体栈，确保在Win/Mac/Android都能显示粗黑体 */
    --font-stack: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "PingFang SC", "Microsoft YaHei", "Heiti SC", sans-serif;
}

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

body {
    background-color: var(--bg-color);
    color: var(--text-main);
    font-family: var(--font-stack);
    -webkit-font-smoothing: antialiased; /* 让字体更平滑 */
}

/* 首页锁屏 */
body.lock-screen {
    height: 100vh;
    overflow: hidden; /* 禁止滚动 */
    display: flex;
    flex-direction: column;
}

a { text-decoration: none; color: inherit; transition: all 0.2s; }
ul { list-style: none; }

.container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 20px;
    width: 100%;
}

/* --- 导航栏 --- */
header {
    padding: 20px 0;
    flex-shrink: 0;
}

nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* Logo - 电脑端 */
.logo-img {
    height: 50px; 
    width: auto;
    display: block;
}

.nav-links {
    display: flex;
    align-items: center;
    gap: 15px;
}

/* 导航链接 - 强制粗体 */
.nav-links a {
    color: var(--text-sub);
    font-size: 18px; 
    font-weight: 500; /* 粗体 */
    padding: 10px 20px;
    border-radius: 30px;
}

.nav-links a.active {
    background-color: var(--accent);
    color: #000000;
    font-weight: 500; /* 选中时更粗 */
}
.nav-links a:hover:not(.active) {
    color: var(--text-main);
    background-color: rgba(255, 255, 255, 0.1);
}

/* --- 首页主视觉 --- */
.hero-lock {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 0 10px;
}

h1 {
    font-size: clamp(3.5rem, 13vw, 7rem);
    line-height: 1.1;
    font-weight: 600; /* 极粗 */
    margin-bottom: 25px;
    letter-spacing: -2px;
}

.subtitle {
    color: var(--text-sub);
    font-size: clamp(1.3rem, 5vw, 2rem);
    max-width: 95%;
    margin: 0 auto 50px auto;
    font-weight: 400;
}

/* --- 按钮 --- */
.btn {
    display: inline-block;
    background-color: var(--accent);
    color: #000;
    padding: 20px 60px; 
    border-radius: 60px;
    font-size: 1.4rem; 
    font-weight: 800;
    letter-spacing: 1px;
    box-shadow: 0 4px 20px rgba(99, 254, 63, 0.3);
    transition: transform 0.2s, box-shadow 0.2s;
}
.btn:active { 
    transform: scale(0.95);
    box-shadow: 0 2px 10px rgba(99, 254, 63, 0.2);
}

/* --- 底部滚动条 --- */
.marquee-footer {
    flex-shrink: 0;
    padding-bottom: 40px;
    padding-top: 20px;
}

.marquee-wrapper {
    overflow: hidden;
    white-space: nowrap;
    position: relative;
    mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
    -webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
}

.marquee-content {
    display: inline-block;
    animation: scroll 25s linear infinite;
}

.marquee-item {
    display: inline-flex;
    align-items: center;
    margin: 0 25px;
    /* 滚动条强制使用系统黑体，不再指定 Impact */
    font-family: var(--font-stack); 
    font-size: 1.5rem;
    font-weight: 900; /* 最粗 */
    text-transform: uppercase;
    color: #555;
}
.marquee-item i {
    margin-right: 10px;
    font-size: 1.6rem;
    color: #777;
}
.marquee-word {
    color: var(--accent);
}

@keyframes scroll {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

/* --- 手机端超级适配 (把这里覆盖到 style.css 最底部) --- */
@media (max-width: 768px) {
    
    /* 1. 容器边缘几乎不留白，把宽度全留给内容 */
    .container {
        padding: 0 8px; /* 极小的边距 */
        max-width: 100%;
    }

    /* 2. Logo 强制放大 */
    .logo-img {
        height: 44px; /* 手机上这个高度已经很显眼了 */
        width: auto; /* 保持比例 */
    }

    /* 3. 导航链接容器：稍微紧凑一点 */
    .nav-links {
        gap: 2px; /* 链接之间几乎没有空隙，靠内边距区分 */
    }

    /* 4. 链接文字：能多大就多大 */
    .nav-links a {
        font-size: 20px; /* 比之前的 16px 再大，接近 APP 原生体验 */
        font-weight: 600; /* 极粗 */
        padding: 8px 12px; /* 减小左右内边距，防止被挤换行 */
        letter-spacing: -0.5px; /* 稍微收紧字间距，让字显得更紧凑有力 */
    }
    
    /* 5. 选中状态的胶囊背景微调 */
    .nav-links a.active {
        background-color: var(--accent);
        color: #000;
        /* 手机上选中背景稍微小一点，不显得拥挤 */
        padding: 8px 14px; 
    }

    /* 6. 首页的巨型标题和按钮适配 */
    h1 {
        font-size: 20vw; /* 使用视口宽度单位，保证在任何手机上都巨大 */
        line-height: 1.0;
        margin-top: 20px;
    }
    
    .subtitle {
        font-size: 1.4rem;
        margin-bottom: 30px;
    }

    .btn {
        width: 90%; /* 按钮几乎占满全屏宽度 */
        font-size: 1.3rem;
        padding: 18px 0;
        border-radius: 50px;
    }
    
    /* 7. 手机上隐藏不需要的装饰，让页面更干净 */
    .marquee-footer {
        padding-bottom: 30px;
    }
}

/* 普通页面 */
.page-section { padding: 80px 20px; text-align: center; }
/* 修改这一段 */
.download-grid {
    display: grid;
    /* 使用 auto-fit 配合 minmax，让格子自动适应 */
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); 
    justify-content: center; /* 核心：让卡片在行内居中 */
    gap: 20px;
    margin-top: 50px;
    
    /* 新增：限制网格整体的最大宽度，并让容器自己居中 */
    max-width: 1000px; 
    margin-left: auto;
    margin-right: auto;
}
.dl-card {
    border: 2px solid #222;
    padding: 25px;
    background: #050505;
    border-radius: 12px;
}
.dl-card h3 { font-size: 1.2rem; font-weight: 700; color: #fff; }