/* ============================================================
   站外下载弹窗｜保留原版苹果风，4列卡片 GBK兼容
   ============================================================ */
.modal-overlay {
    display: none;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width:100vw !important;
    height:100vh !important;
    z-index: 99999 !important;
    background: rgba(0, 0, 0, 0.4);
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
    margin:0 !important;
    padding:0 !important;
}
.modal-overlay.active {
    display: flex !important;
}

.modal-content {
    background: #f5f7fa;
    border-radius: 22px;
    max-width: 1100px;
    width: 94%;
    max-height: 92vh;
    overflow-y: auto;
    position: relative;
    padding: 26px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.18);
    animation: modalSlideUp 0.32s cubic-bezier(0.4, 0, 0.2, 1);
    box-sizing: border-box;
}

.modal-close {
    position: absolute;
    top:12px;
    right:14px;
    width:34px;
    height:34px;
    border-radius:50%;
    border:none;
    background:rgba(0,0,0,0.05);
    color:#666;
    font-size:17px;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
    z-index: 100 !important;
}
.modal-close:hover {
    background:rgba(0,0,0,0.10);
}

/* -----顶部版本表头 苹果风卡片 布局微调----- */
.modal-version-header {
    background:#ffffff;
    border-radius:18px;
    padding:22px 26px;
    display:flex;
    flex-wrap:wrap;
    justify-content:space-between;
    align-items:flex-start;
    gap:14px;
    margin-bottom:22px;
    border:1px solid #e4e8ed;
    box-sizing:border-box;
}
.ver-left .version-badge {
    font-size:12px;
    color:#788290;
    margin-bottom:7px;
}
.ver-left h2 {
    font-size:23px;
    margin:0 0 5px;
    color:#111726;
}
.ver-tag {
    color:#34C759;
    font-weight:500;
}
.ver-right {
    display:grid;
    grid-template-columns:repeat(5, 1fr);
    gap:10px 14px;
    text-align:center;
    min-width:400px;
}
.ver-col .ver-label {
    font-size:12px;
    color:#848ea0;
    margin-bottom:3px;
}
.ver-col .ver-val {
    font-size:14px;
    font-weight:600;
    color:#1e2838;
}

/* ======下载卡片网格【PC四列，苹果风完全保留】====== */
.modal-card-grid {
    display:grid;
    grid-template-columns: repeat(4, 1fr);
    gap:18px;
}
.download-card {
    display:block;
    background:#fff;
    border-radius:18px;
    text-decoration:none;
    padding:24px 12px 20px;
    border:1px solid #e2e7ee;
    position:relative;
    text-align:center;
    transition:0.22s ease;
    box-sizing:border-box;
}
.download-card:hover {
    transform:translateY(-3px);
    box-shadow:0 10px 26px rgba(0, 122, 255, 0.14);
}
/* 推荐角标 原版苹果风 */
.card-recommend {
    border-color:#007AFF;
    background-image:linear-gradient(to bottom, #f7f9ff, #ffffff);
}
.card-tip-badge {
    position:absolute;
    top:-9px;
    left:50%;
    transform:translateX(-50%);
    background-color:#007AFF;
    color:#fff;
    font-size:12px;
    padding:2px 12px;
    border-radius:99px;
}

.card-icon {
    width:64px;
    height:64px;
    margin:0 auto 12px;
}
.card-icon img {
    width:100%;
    height:100%;
    object-fit:contain;
}
.card-title {
    font-size:17px;
    color:#111726;
    margin:0 0 7px;
}
.card-desc {
    font-size:13px;
    color:#646e7c;
    margin-bottom:5px;
}
.card-extract {
    font-size:12px;
    color:#969eac;
    margin-bottom:16px;
}
.card-btn {
    padding:10px 12px;
    font-size:13px;
    border-radius:99px;
    background:linear-gradient(90deg, #007AFF, #FF3B30);
    color:#fff;
    font-weight:500;
}

.modal-footer-tip {
    text-align:center;
    font-size:12px;
    color:#8c98ac;
    margin-top:22px;
}

@keyframes modalSlideUp {
    0% { opacity:0; transform:scale(0.96) translateY(16px); }
    100% { opacity:1; transform:scale(1) translateY(0); }
}

/* =========平板、移动端适配========= */
@media (max-width:1200px) {
    .modal-card-grid {
        grid-template-columns: repeat(2, 1fr);
        gap:16px;
    }
}
@media (max-width:768px) {
    .modal-content {
        width:96%;
        padding:18px 14px;
    }
    .modal-version-header {
        flex-direction:column;
        padding:16px 14px;
    }
    .ver-right {
        min-width:100%;
        grid-template-columns:repeat(2,1fr);
    }
    .modal-card-grid {
        grid-template-columns:1fr;
        gap:14px;
    }
}
@media (max-width:480px) {
    .modal-overlay {
        align-items:flex-end !important;
    }
    .modal-content {
        width: calc(100% - 24px);
        max-width: calc(100% - 24px);
        border-radius:18px;
        max-height:92vh;
        margin-bottom:12px;
    }
    .modal-close {
        top:8px;
        right:10px;
        width:40px;
        height:40px;
    }
}