:root{
    --bg:#ffffff;
    --text:#1f1f1f;
    --muted:#5f6368;
    --line:#e6e8eb;
    --chip:#f1f3f4;
    --green:#1e8e3e;
    --star:#f6c343;
    --card:#f7f9fb;
    --shadow: 0 1px 2px rgba(0,0,0,.06), 0 6px 18px rgba(0,0,0,.06);
    --radius:16px;
    --radius2:12px;
    --max: 760px;
}
*{box-sizing:border-box}
body{
    margin:0;
    font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "PingFang SC","Microsoft YaHei", sans-serif;
    background:var(--bg);
    color:var(--text);
    line-height:1.35;
}
a{color:inherit;text-decoration:none}
.page{
    max-width: var(--max);
    margin: 0 auto;
    padding: 14px 14px 40px;
}

/* 顶部应用信息块 */
.appHeader{
    padding-top:4px;
}
.appTopRow{
    display:flex;
    gap:14px;
    align-items:flex-start;
}
/* 顶部右侧文字区域 */
.appMetaTop{
    flex:1;
    min-width:0;
}
.appFull{
    margin-top: 10px;
}
.appIcon{
    width:72px;height:72px;
    border-radius: 18px;
    overflow:hidden;
    flex:0 0 auto;
    box-shadow: var(--shadow);
    background:#0f2a5a;
    position:relative;
}
.appIcon img{
    width: 100%;
    height: 100%;
    object-fit: cover;   /* 头像类用 cover */
    display: block;
}
/* 自绘“近似”占位图标 */
.appIcon svg{width:100%;height:100%;display:block}
.appMeta{flex:1}
.appName{
    font-size:22px;
    font-weight:700;
    letter-spacing:.2px;
    margin:2px 0 2px;
}
.devRow{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    align-items:center;
    margin: 4px 0 8px;
    color:var(--muted);
    font-size:13px;
}
.badgeVerified{
    display:inline-flex;
    align-items:center;
    gap:6px;
    padding:4px 8px;
    border-radius:999px;
    background:var(--chip);
    color:#2b2b2b;
    font-size:12px;
}
.badgeVerified svg{width:14px;height:14px}
.statsRow{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    margin-top:2px;
    padding: 6px 0 2px;
}
.stat{
    flex:1;
    text-align:center;
    min-width:0;
    padding: 6px 4px;
}
.stat .top{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:4px;
    font-weight:700;
    font-size:16px;
}
.stat .bottom{
    margin-top:2px;
    color:var(--muted);
    font-size:12px;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}
.ratingStars{
    display:inline-flex;
    gap:2px;
    transform: translateY(1px);
}
.ratingStars svg{width:14px;height:14px;fill:var(--star)}
.ageBadge{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:18px;height:18px;
    border-radius:4px;
    background:#e8f0fe;
    color:#1967d2;
    font-weight:800;
    font-size:12px;
    margin-left:6px;
}

.installWrap{
    margin-top:12px;
}
.installBtn{
    width:100%;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    background: var(--green);
    color:#fff;
    border:none;
    border-radius: 12px;
    padding: 12px 14px;
    font-weight:800;
    font-size:15px;
    cursor:pointer;
    box-shadow: 0 1px 0 rgba(0,0,0,.08);
}
.installBtn small{
    font-weight:600;
    opacity:.9;
    font-size:12px;
}
.installBtn:active{transform: translateY(1px)}
.actionsRow{
    display:flex;
    gap:12px;
    margin-top:10px;
    color:#1967d2;
    font-weight:600;
    font-size:14px;
}
.action{
    display:flex;
    align-items:center;
    gap:8px;
    padding:10px 10px;
    border-radius: 12px;
    background: transparent;
    border:1px solid transparent;
    cursor:pointer;
    flex:1;
    justify-content:center;
}
.action:hover{background:#f6f8ff;border-color:#e7ecff}
.action svg{width:18px;height:18px;fill:#1967d2}

/* 横幅 */
.promo{
    margin-top:14px;
    border-radius: var(--radius);
    overflow:hidden;
    box-shadow: var(--shadow);
    background: linear-gradient(135deg, #2b4efc 0%, #8a4dff 45%, #ff4ec8 100%);
    position:relative;
    min-height: 150px;
}
.promoInner{
    padding: 16px 16px 18px;
    display:flex;
    gap:14px;
    align-items:stretch;
}
.promoText{
    flex:1;
    color:#fff;
    min-width:0;
}
.promoTitle{
    font-size:22px;
    font-weight:900;
    margin:0 0 6px;
    letter-spacing:.2px;
}
.promoSub{
    margin:0;
    font-size:13px;
    opacity:.95;
    font-weight:600;
}
.promoArt{
    width:128px;
    flex:0 0 auto;
    display:flex;
    align-items:center;
    justify-content:center;
    background: rgba(255,255,255,.12);
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,.18);
    backdrop-filter: blur(4px);
    position:relative;
    overflow:hidden;
}
.promoArt svg{width:110px;height:110px}
.kebab{
    position:absolute;
    right:10px; top:10px;
    width:34px;height:34px;
    border-radius: 999px;
    background: rgba(255,255,255,.16);
    border:1px solid rgba(255,255,255,.18);
    display:flex;
    align-items:center;
    justify-content:center;
}
.kebab span{
    width:3px;height:3px;border-radius:999px;background:#fff;
    box-shadow: 0 -6px 0 #fff, 0 6px 0 #fff;
    display:block;
    opacity:.9;
}

/* 区块通用 */
.section{
    margin-top:18px;
    padding-top: 4px;
}
.sectionHeader{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    margin-bottom: 8px;
}
.sectionTitle{
    font-size:16px;
    font-weight:800;
    margin:0;
}
.chev{
    width:26px;height:26px;border-radius:999px;
    display:flex;align-items:center;justify-content:center;
    color:var(--muted);
    border:1px solid var(--line);
    background:#fff;
}
.chev svg{width:16px;height:16px;fill:var(--muted)}
.para{
    color:#2b2b2b;
    font-size:13.5px;
    margin: 0 0 10px;
}
.muted{
    color:var(--muted);
    font-size:12.5px;
    margin: 6px 0 6px;
}
.chips{
    display:flex;
    gap:8px;
    flex-wrap:wrap;
    margin-top:10px;
}
.chip{
    padding:7px 10px;
    border-radius:999px;
    background: var(--chip);
    border:1px solid #e9ecef;
    font-size:12.5px;
    color:#2b2b2b;
}

/* 数据安全 */
.safetyBox{
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 12px;
    background:#fff;
}
.safetyItem{
    display:flex;
    gap:12px;
    padding:10px 6px;
    border-top:1px solid var(--line);
    align-items:flex-start;
}
.safetyItem:first-child{border-top:none}
.safetyItem svg{width:20px;height:20px;fill:#5f6368;flex:0 0 auto;margin-top:1px}
.safetyItem .txt{
    font-size:13px;
    color:#2b2b2b;
}
.safetyLead{
    color:var(--muted);
    font-size:12.5px;
    margin: 0 0 8px;
}

/* 评分与评论 */
.ratingsWrap{
    display:grid;
    grid-template-columns: 150px 1fr;
    gap: 12px;
    align-items:start;
    border-top:1px solid var(--line);
    padding-top: 14px;
    margin-top: 10px;
}
.bigRating{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:6px;
    padding-right:6px;
}
.bigRating .num{
    font-size:46px;
    font-weight:900;
    line-height:1;
}
.bigRating .small{
    color:var(--muted);
    font-size:12.5px;
}
.bars{
    display:flex;
    flex-direction:column;
    gap:8px;
    margin-top: 6px;
}
.barRow{
    display:grid;
    grid-template-columns: 18px 1fr;
    gap:10px;
    align-items:center;
    color:var(--muted);
    font-size:12px;
}
.bar{
    height:8px;
    background:#eef1f3;
    border-radius: 999px;
    overflow:hidden;
    position:relative;
}
.bar > i{
    display:block;
    height:100%;
    background: #1a73e8;
    border-radius: 999px;
    width: 0%;
}

/* 评论卡片 */
.review{
    padding: 12px 0;
    border-top:1px solid var(--line);
}
.reviewHead{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
}
.avatar{
    width:34px;height:34px;border-radius:999px;
    background: #111;
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    font-weight:900;
    font-size:12px;
    flex:0 0 auto;
    overflow:hidden;
}
.reviewUser{
    display:flex;
    gap:10px;
    align-items:center;
    min-width:0;
}
.reviewName{
    font-weight:800;
    font-size:13.5px;
    margin:0;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.reviewDate{
    color:var(--muted);
    font-size:12px;
    margin-top:2px;
}
.reviewBody{
    margin-top:8px;
    color:#2b2b2b;
    font-size:13.5px;
}
.helpRow{
    display:flex;
    align-items:center;
    gap:10px;
    margin-top:10px;
    color:var(--muted);
    font-size:12.5px;
}
.helpBtn{
    padding:7px 12px;
    border-radius:999px;
    border:1px solid var(--line);
    background:#fff;
    cursor:pointer;
    font-weight:700;
    color:#2b2b2b;
    font-size:12.5px;
}
.helpBtn:hover{background:#f6f7f8}

.footerLang{
    margin-top: 18px;
    padding-top: 14px;
    border-top:1px solid var(--line);
    display:flex;
    align-items:center;
    gap:10px;
    color:var(--muted);
    font-size:12.5px;
}
.flag{
    width:22px;height:14px;border-radius:3px;
    background: linear-gradient(#1f7a3e 0 50%, #f7c600 50% 100%);
    position:relative;
    overflow:hidden;
    flex:0 0 auto;
}
.flag:before{
    content:"";
    position:absolute;inset:2px;
    background: radial-gradient(circle at 55% 50%, #1a4fb3 0 40%, transparent 42%),
    conic-gradient(from 45deg, transparent 0 25%, rgba(0,0,0,0) 25% 100%),
    linear-gradient(45deg, transparent 0 40%, #f7c600 40% 60%, transparent 60% 100%);
    opacity:.9;
    transform: rotate(0deg);
    border-radius:2px;
}

/* 小屏优化 */
@media (max-width: 520px){
    .ratingsWrap{grid-template-columns: 140px 1fr}
    .promoArt{width:110px}
    .appName{font-size:20px}
    .stat .top{font-size:15px}
}



.installModal{
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.installModal.is-open{
    display: flex;
}

.installModal__backdrop{
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,.35);
    backdrop-filter: blur(3px);
}

.installModal__card{
    position: relative;
    width: min(92vw, 340px);
    background: #fff;
    border-radius: 18px;
    box-shadow: 0 18px 50px rgba(0,0,0,.18);
    padding: 26px 20px 24px;
    text-align: center;
    animation: modalIn .22s ease-out;
}

@keyframes modalIn{
    from{
        opacity: 0;
        transform: translateY(10px) scale(.96);
    }
    to{
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.installModal__brand{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-bottom: 18px;
}

.installModal__brand img{
    width: 28px;
    height: 28px;
    object-fit: contain;
}

.installModal__brand h3{
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    color: #5f6368;
}

.installStep{
    display: none;
}

.installStep.is-active{
    display: block;
}

.ringWrap{
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 150px;
}

.ring{
    position: relative;
    width: 116px;
    height: 116px;
}

.ringSvg{
    width: 116px;
    height: 116px;
    transform: rotate(-90deg);
}

.ringBg{
    fill: none;
    stroke: #e7eef0;
    stroke-width: 8;
}

.ringProgress{
    fill: none;
    stroke: #0f9d58;
    stroke-width: 8;
    stroke-linecap: round;
    stroke-dasharray: 264;
    stroke-dashoffset: 264;
    transition: stroke-dashoffset .08s linear;
}

.ringPercent{
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    font-weight: 700;
    color: #0f9d58;
}

.successBadge{
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #e8f5e9;
    color: #0f9d58;
    border-radius: 999px;
    padding: 10px 16px;
    font-size: 18px;
    font-weight: 700;
    margin: 12px 0 22px;
}

.successIcon{
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #0f9d58;
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    line-height: 1;
}

.modalInstallBtn{
    width: 100%;
    height: 46px;
    border: 0;
    border-radius: 999px;
    background: #0f9d58;
    color: #fff;
    font-size: 18px;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 8px 18px rgba(15,157,88,.22);
}

.modalInstallBtn:active{
    transform: translateY(1px);
}


.iosGuideSheet{
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: none;
}

.iosGuideSheet.is-open{
    display: block;
}

.iosGuideSheet__mask{
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,.35);
}

.iosGuideSheet__panel{
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    background: transparent;
    display: flex;
    justify-content: center;
    padding: 0 12px 12px;
    animation: iosSheetUp .28s ease-out;
}

@keyframes iosSheetUp{
    from{
        transform: translateY(100%);
        opacity: .6;
    }
    to{
        transform: translateY(0);
        opacity: 1;
    }
}

.iosGuideSheet__image{
    display: block;
    width: 100%;
    max-width: 420px;
    height: auto;
    border-radius: 16px 16px 0 0;
    box-shadow: 0 -8px 30px rgba(0,0,0,.18);
}

.iosGuideSheet__close{
    position: absolute;
    top: -44px;
    right: 20px;
    width: 36px;
    height: 36px;
    border: 0;
    border-radius: 50%;
    background: rgba(0,0,0,.55);
    color: #fff;
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
}