/* ============================================================
   纸飞机 官网下载中心 - 独立样式表
   文件: css/download.css
   说明: 包含全局变量、布局、组件及响应式
   ============================================================ */

   /* 全局重置 & 基础 */
        * { margin: 0; padding: 0; box-sizing: border-box; }
        body { font-family: "Microsoft YaHei", "PingFang SC", sans-serif; background: #ffffff; color: #1e1e2a; line-height: 1.6; }
        .container { max-width: 1140px; margin: 0 auto; padding: 0 20px; }
        a { text-decoration: none; transition: 0.25s; }
        h2 { font-size: 30px; font-weight: 700; color: #1e1e2a; margin-bottom: 30px; text-align: center; letter-spacing: -0.3px; }
        h3 { font-weight: 600; color: #1e1e2a; }

        /* 导航 */
        .header { background: #ffffff; padding: 14px 0; border-bottom: 1px solid #f0f0f5; position: sticky; top: 0; z-index: 100; }
        .nav-flex { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; }
        .logo { display: flex; align-items: center; font-size: 22px; font-weight: 700; color: #0088cb; }
        .logo img { width: 28px; margin-right: 10px; }
        .nav-list { display: flex; list-style: none; gap: 28px; }
        .nav-list a { color: #36324a; font-weight: 500; font-size: 15px; }
        .nav-list a:hover { color: #0088cb; }
        .nav-list a.active { color: #0088cb; }

        /* 主下载区域 — 多版本卡片 */
        .download-multi { padding: 70px 0 60px; background: #fafafc; }
        .version-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; margin-top: 20px; }
        .version-card { background: #fff; border-radius: 24px; padding: 32px 24px 28px; box-shadow: 0 8px 28px rgba(0,0,0,0.04); text-align: center; transition: 0.25s; border: 1px solid #f0f0f5; }
        .version-card:hover { transform: translateY(-6px); box-shadow: 0 16px 40px rgba(0,136,203,0.08); }
        
        /* 图标容器 — 背景和图标都改成蓝色系 */
        .version-card .icon { 
            width: 72px; height: 72px; margin: 0 auto 18px; 
            background: #0088cb;  /* 蓝色背景 */
            border-radius: 20px; 
            display: flex; align-items: center; justify-content: center; 
            transition: 0.2s;
        }
        .version-card .icon img { 
            width: 44px; height: 44px; object-fit: contain; 
            filter: brightness(0) invert(1); /* 图标变白，在蓝色背景上清晰 */
        }
        .version-card h3 { font-size: 22px; margin-bottom: 6px; }
        .version-card .sub { color: #6f6c7f; font-size: 14px; margin-bottom: 20px; }

        /* 统一按钮样式 — 与 android 风格一致 */
        .btn-dl { 
            display: inline-flex; align-items: center; justify-content: center; 
            padding: 14px 28px; 
            background: #0088cb; color: #fff !important; border-radius: 60px; 
            font-weight: 600; font-size: 16px; 
            transition: 0.25s; border: none; cursor: pointer; 
            width: 100%; max-width: 200px; margin: 0 auto;
            gap: 10px;
        }
        .btn-dl:hover { background: #1a2a3a; transform: scale(1.02); box-shadow: 0 6px 18px rgba(0,136,203,0.25); }
        .btn-dl img { width: 22px; height: 22px; filter: brightness(0) invert(1); flex-shrink: 0; }
        .btn-dl .txt { display: inline-block; line-height: 1.2; }

        /* 步骤区域：安装 · 群组 · 机器人 */
        .steps-section { padding: 70px 0; background: #ffffff; }
        .steps-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; margin-top: 10px; }
        .step-block { background: #f8f9fc; border-radius: 24px; padding: 36px 28px 32px; transition: 0.2s; }
        .step-block:hover { background: #f2f5fa; }
        .step-block .step-num { display: inline-block; background: #0088cb; color: #fff; font-weight: 700; width: 32px; height: 32px; line-height: 32px; text-align: center; border-radius: 50%; font-size: 16px; margin-bottom: 16px; }
        .step-block h3 { font-size: 22px; margin-bottom: 14px; display: flex; align-items: center; gap: 10px; }
        .step-block p { color: #4c4f60; font-size: 15px; margin-bottom: 12px; }
        .step-block ul { padding-left: 20px; color: #4c4f60; font-size: 14px; }
        .step-block ul li { margin-bottom: 8px; }
        .step-block .badge { display: inline-block; background: #e6f0f8; color: #0088cb; border-radius: 30px; padding: 4px 14px; font-size: 13px; font-weight: 500; margin-top: 6px; }

        /* footer 保留原样 */
        footer { text-align: center; padding: 40px 0 30px; color: #999; font-size: 14px; border-top: 1px solid #f0f0f5; background: #fff; }
        footer .footer-links { display: flex; justify-content: center; gap: 28px; flex-wrap: wrap; margin-top: 12px; }
        footer .footer-links a { color: #6f6c7f; font-size: 14px; }
        footer .footer-links a:hover { color: #0088cb; }

        /* 响应式 */
        @media (max-width: 992px) {
            .version-grid { grid-template-columns: repeat(2, 1fr); }
            .steps-grid { grid-template-columns: repeat(2, 1fr); }
        }
        @media (max-width: 700px) {
            .version-grid { grid-template-columns: 1fr; }
            .steps-grid { grid-template-columns: 1fr; }
            .nav-list { display: none; }
            .download-multi { padding: 40px 0; }
            .steps-section { padding: 40px 0; }
        }