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

body {
    background: #f4f6f9;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    line-height: 1.6;
    color: #222;
    padding-bottom: 30px;
}

.container {
    margin: 0 auto;
    padding: 0 15px;
}
:root{--primary:#2563eb;--secondary:#1d4ed8;--accent:#f59e0b;--bg:#f6f8fb;--card:#fff;--text:#1f2937;--text-light:#6b7280;--line:#eef1f5;--gold:#f59e0b;--silver:#9ca3af;--bronze:#b45309;--teal:#0d9488}
/* 卡片 */
.card{background:var(--card);border-radius:14px;box-shadow:0 2px 10px rgba(0,0,0,.05);margin-bottom:12px;overflow:hidden;border:1px solid var(--line)}
.rank-row{display:flex;align-items:center;padding:12px;gap:12px}
.rank-badge{position:relative;width:44px;height:44px;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:18px;color:#fff;border-radius:12px;background:var(--primary)}
.rank-1 .rank-badge{background:linear-gradient(135deg,#f59e0b,#f97316)}
.rank-2 .rank-badge{background:linear-gradient(135deg,#9ca3af,#6b7280)}
.rank-3 .rank-badge{background:linear-gradient(135deg,#b45309,#d97706)}
.rank-badge .medal{position:absolute;top:-6px;right:-6px;font-size:14px}

/* APP 图标（images/首个字拼音+t.png，加载失败降级 emoji） */
.logo{position:relative;width:44px;height:44px;border-radius:12px;background:linear-gradient(135deg,#eef4ff,#e0ecff);display:flex;align-items:center;justify-content:center;font-size:22px;flex-shrink:0;overflow:hidden}
.logo img{width:100%;height:100%;object-fit:cover;display:block}
.logo .emo{display:none;font-size:22px;line-height:1}
.logo.noimg img{display:none}
.logo.noimg .emo{display:block}

.info{flex:1;min-width:0}
.name-row{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.name{font-size:15px;font-weight:700}
.tags{display:flex;gap:4px;flex-wrap:wrap}
.tag{font-size:10px;padding:2px 7px;border-radius:10px;background:#eff6ff;color:var(--primary);font-weight:600}
.tag.hot{background:#fef2f2;color:#ef4444}
.tag.fast{background:#ecfdf5;color:#059669}
.tag.new{background:#fffbeb;color:#d97706}
.desc{font-size:12px;color:var(--text-light);margin-top:3px;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical}
.rating{font-size:12px;color:var(--text-light);margin-top:3px}
.download-btn{background:var(--primary);color:#fff;font-size:13px;font-weight:700;padding:9px 16px;border-radius:10px;flex-shrink:0;min-width:64px;transition:transform .1s}
.download-btn:active{transform:scale(.94)}

/* 前三名强化 */
.rank-1{border:1px solid #fde68a}
.rank-2{border:1px solid #e5e7eb}
.rank-3{border:1px solid #fed7aa}

 .review-list {
            display: -webkit-box;
            display: -webkit-flex;
            display: flex;
            -webkit-flex-wrap: wrap;
            flex-wrap: wrap;
            gap: 24px;
            margin-bottom: 40px;
        }
        @media screen and (max-width: 768px) {
            .review-list {
                -webkit-box-orient: vertical;
                -webkit-box-direction: normal;
                -webkit-flex-direction: column;
                flex-direction: column;
                gap: 20px;
                margin-bottom: 30px;
            }
        }
        .review-item {
            -webkit-box-flex: 1;
            -webkit-flex: 1;
            flex: 1;
            min-width: 280px;
            background: #ffffff;
            border-radius: 16px;
            padding: 24px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
            border: 1px solid #e5e7eb;
            border-left: 4px solid #165DFF;
            -webkit-transition: all 0.3s ease;
            transition: all 0.3s ease;
        }
        @media screen and (max-width: 768px) {
            .review-item {
                padding: 20px;
            }
        }
        .review-item:hover, .review-item:active {
            -webkit-transform: translateY(-3px);
            transform: translateY(-3px);
            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
        }
        .review-user {
            display: -webkit-box;
            display: -webkit-flex;
            display: flex;
            -webkit-box-align: center;
            -webkit-align-items: center;
            align-items: center;
            gap: 12px;
            margin-bottom: 16px;
        }
        .review-avatar {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            overflow: hidden;
        }
        .review-avatar img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            -webkit-touch-callout: none;
        }
        .review-name {
            font-weight: 600;
            color: #1f2937;
        }
        .review-rating {
            color: #c42525;
            font-size: 14px;
        }
        .review-content {
            color: #6b7280;
            line-height: 1.7;
            font-size: 15px;
        }
        @media screen and (max-width: 768px) {
            .review-content {
                font-size: 14px;
            }
        }
/* 顶部Banner图片位 */
.top-banner-img {
    width: 100%;
     height:auto;
    border-radius: 20px;
    overflow: hidden;
    margin: 20px 0;
    background: #eef2f8;
    border: 2px dashed #ccd6e0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #999;
    font-size: 16px;
}
@media (max-width: 768px) {
    .top-banner-img { height: 140px; }
}

/* 简介 */
.intro-box {
    background: #fff;
    border-radius: 16px;
    padding: 20px;
    margin-bottom: 25px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    font-size: 15px;
    color: #444;
}

/* 统一APP卡片容器 自适应PC手机 */
.app-card-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 20px;
    margin-bottom: 30px;
}

/* 手机端改成单列 */
@media (max-width: 768px) {
    .app-card-list {
        grid-template-columns: 1fr;
        gap: 14px;
    }
}

/* 卡片通用样式 */
.app-card-list .item {
    background: #fff;
    border-radius: 18px;
    padding: 20px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.06);
    transition: all 0.3s ease;
    position: relative;
    border: 1px solid #eee;
}
.app-card-list .item:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(22, 93, 255, 0.12);
}
.app-card-list .rank {
    position: absolute;
    top: 15px;
    right: 20px;
    font-size: 24px;
    font-weight: 800;
    color: #e5e9f2;
}
.app-card-list .head {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 12px;
}
.app-card-list .icon {
    width: 64px;
    height: 64px;
    border-radius: 16px;
    background: #f5f7fa;
    border: 2px dashed #ccd6e0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.app-card-list .info h3 {
    font-size: 20px;
    color: #111;
    margin-bottom: 4px;
}
.app-card-list .info p {
    font-size: 13px;
    color: #777;
}
.app-card-list .tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 12px 0;
}
.app-card-list .tags span {
    background: #f0f5ff;
    color: #165DFF;
    font-size: 12px;
    padding: 3px 10px;
    border-radius: 20px;
}
.app-card-list .desc {
    font-size: 14px;
    color: #555;
    line-height: 1.7;
    margin-bottom: 12px;
}
.app-card-list .tip {
    background: #f8faff;
    border-left: 4px solid #165DFF;
    padding: 10px 12px;
    border-radius: 8px;
    font-size: 13px;
    color: #333;
    margin-bottom: 12px;
}
.app-card-list .eval {
    background: #f9fafb;
    padding: 10px;
    border-radius: 10px;
    font-size: 13px;
    color: #666;
    margin-bottom: 15px;
}
.app-card-list .star {
    color: #ffb400;
    margin-bottom: 5px;
}
.app-card-list .down {
    display: block;
    text-align: center;
    background: #165DFF;
    color: #fff;
    text-decoration: none;
    padding: 10px 0;
    border-radius: 30px;
    font-size: 15px;
    font-weight: 500;
    transition: 0.2s;
}
.app-card-list .down:hover {
    background: #0E42D2;
}

/* 手机端样式微调 */
@media (max-width: 768px) {
    .app-card-list .item {
        border-radius: 16px;
        padding: 16px;
        box-shadow: 0 3px 10px rgba(0,0,0,0.05);
    }
    .app-card-list .rank {
        top: 12px;
        right: 14px;
        font-size: 20px;
    }
    .app-card-list .head {
        gap: 12px;
    }
    .app-card-list .icon {
        width: 56px;
        height: 56px;
        border-radius: 14px;
    }
    .app-card-list .info h3 {
        font-size: 17px;
    }
    .app-card-list .info p {
        font-size: 12px;
    }
    .app-card-list .tags {
        gap: 6px;
        margin: 10px 0;
    }
    .app-card-list .tags span {
        font-size: 11px;
        padding: 2px 8px;
    }
    .app-card-list .desc {
        font-size: 13px;
        margin-bottom: 10px;
        line-height: 1.6;
    }
    .app-card-list .tip {
        border-left: 3px solid #165DFF;
        padding: 8px 10px;
        border-radius: 6px;
        font-size: 12px;
        margin-bottom: 10px;
    }
    .app-card-list .eval {
        padding: 8px;
        border-radius: 8px;
        font-size: 12px;
        margin-bottom: 12px;
    }
    .app-card-list .star {
        font-size: 11px;
        margin-bottom: 4px;
    }
    .app-card-list .down {
        padding: 9px 0;
        font-size: 14px;
    }
}

/* 表格 */
.table-wrap {
    background: #fff;
    border-radius: 18px;
    padding: 25px 20px;
    margin: 30px 0;
    box-shadow: 0 2px 12px rgba(0,0,0,0.05);
}
.table-title {
    font-size: 20px;
    font-weight: 700;
    border-left: 5px solid #165DFF;
    padding-left: 12px;
    margin-bottom: 20px;
}
.table-box { overflow-x: auto; }
.compare-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}
.compare-table th, .compare-table td {
    padding: 12px 8px;
    text-align: left;
    border-bottom: 1px solid #eee;
}
.compare-table th { background: #f7f8fa; font-weight: 600; }

/* 评价 */
.eval-wrap {
    background: #fff;
    border-radius: 18px;
    padding: 25px 20px;
    margin: 30px 0;
}
.eval-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 15px;
    margin-top: 15px;
}
.eval-item {
    background: #f9fafb;
    border-radius: 14px;
    padding: 15px;
}
.eval-item .text {
    font-size: 14px;
    color: #555;
    margin-bottom: 8px;
}
.eval-item .name {
    font-size: 12px;
    color: #888;
    text-align: right;
}

/* 总结 */
.summary-tip {
    background: #f0f5ff;
    border-radius: 16px;
    padding: 20px;
    font-size: 15px;
    color: #333;
    margin: 20px 0;
}
.footer-copy {
    text-align: center;
    font-size: 12px;
    color: #999;
    margin-top: 20px;
}