/* ==========================================================================
   PLive 下载页 —— 应用商店详情页样式
   ========================================================================== */

:root{
    --gp-green:#01875f;
    --gp-green-dark:#016b4b;
    --gp-ink:#202124;
    --gp-muted:#5f6368;
    --gp-line:#dadce0;
    --gp-soft:#f1f3f4;
    --gp-star:#fbbc04;
    --gp-blue:#1a73e8;
}

*{box-sizing:border-box}
body{
    margin:0;
    background:#fff;
    color:var(--gp-ink);
    font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",
                "PingFang SC","Hiragino Sans","Noto Sans JP","Microsoft YaHei",Arial,sans-serif;
    -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;border:0;display:block}
a{text-decoration:none;color:inherit}
h1,h2,h3,p{margin:0}
button{font-family:inherit;cursor:pointer}

.gp-page{max-width:1040px;margin:0 auto;padding:0 16px 60px}

/* 顶栏 */
.gp-top{
    position:sticky;top:0;z-index:30;
    display:flex;align-items:center;gap:6px;
    padding:8px 0;
    background:#fff;
    border-bottom:1px solid var(--gp-line);
}
.gp-iconbtn{
    width:44px;height:44px;flex:0 0 44px;
    display:grid;place-items:center;
    border:0;border-radius:50%;
    background:none;
    color:var(--gp-muted);
}
.gp-iconbtn:hover{background:var(--gp-soft)}
.gp-iconbtn svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

.gp-title{flex:1 1 auto;min-width:0;font-size:17px;font-weight:600;
          display:flex;align-items:center;gap:10px}
.gp-title img{width:30px;height:30px;border-radius:8px;flex:0 0 auto}
.gp-title small{display:block;font-size:12px;font-weight:400;color:var(--gp-muted)}

/* 应用名后面的「官方版」标记 */
.gp-badge{
    display:inline-flex;align-items:center;gap:5px;
    vertical-align:middle;
    margin-left:9px;
    padding:3px 10px 3px 8px;
    border-radius:999px;
    background:#e6f4ea;
    color:var(--gp-green);
    font-size:12px;font-weight:700;
    white-space:nowrap;
}
.gp-badge svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2.2;
              stroke-linecap:round;stroke-linejoin:round}

/* 应用头部 */
.gp-head{display:flex;gap:20px;padding:22px 0 4px}
.gp-appicon{
    width:96px;height:96px;flex:0 0 96px;
    border-radius:22px;
    overflow:hidden;
    box-shadow:0 3px 10px rgba(0,0,0,.16);
}
.gp-appicon img{width:100%;height:100%;object-fit:cover}

.gp-headinfo{flex:1 1 auto;min-width:0}
.gp-headinfo h1{font-size:26px;font-weight:600;line-height:1.2}
.gp-dev{color:var(--gp-green);font-size:14px;font-weight:600;margin-top:4px}
.gp-dev-meta{color:var(--gp-muted);font-size:13px;margin-top:3px}

/* 数据条 */
.gp-stats{
    display:flex;align-items:center;
    margin:20px 0;
    padding:16px 0;
    border-top:1px solid var(--gp-line);
    border-bottom:1px solid var(--gp-line);
}
.gp-stat{
    flex:1 1 0;
    display:flex;flex-direction:column;align-items:center;justify-content:center;
    gap:3px;
    padding:0 8px;
    border-right:1px solid var(--gp-line);
    text-align:center;
}
.gp-stat:last-child{border-right:0}
.gp-stat strong{display:flex;align-items:center;gap:4px;font-size:16px;font-weight:600}
.gp-stat span{font-size:12px;color:var(--gp-muted)}
.gp-stat svg{width:13px;height:13px;fill:var(--gp-star)}

/* 安装按钮 */
.gp-actions{display:flex;align-items:center;gap:10px;margin-bottom:26px}
.gp-install{
    position:relative;
    flex:1 1 auto;
    max-width:280px;
    height:52px;
    overflow:hidden;
    border:0;
    border-radius:10px;
    background:var(--gp-green);
    color:#fff;
    font-size:16px;font-weight:600;
    transition:background .2s ease,transform .12s ease;
}
.gp-install:hover{background:var(--gp-green-dark)}
.gp-install:active{transform:scale(.99)}
.gp-install[disabled]{cursor:default;background:var(--gp-green-dark)}
.gp-install .gp-bar{
    position:absolute;left:0;top:0;bottom:0;
    width:0;
    background:rgba(255,255,255,.28);
    transition:width .25s linear;
}
.gp-install .gp-bar-text{position:relative;z-index:1}

/* 截图 */
.gp-screens{
    display:flex;gap:14px;
    overflow-x:auto;
    padding:4px 0 18px;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
}
.gp-screens::-webkit-scrollbar{height:6px}
.gp-screens::-webkit-scrollbar-thumb{background:#c9ccd1;border-radius:99px}
.gp-shot{
    flex:0 0 auto;
    width:216px;
    height:288px;
    border-radius:14px;
    overflow:hidden;
    background:var(--gp-soft);
    scroll-snap-align:start;
}
.gp-shot img{width:100%;height:100%;object-fit:cover}

/* 区块 */
.gp-sec{padding:26px 0;border-top:1px solid var(--gp-line)}
.gp-sec-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}
.gp-sec h2{font-size:19px;font-weight:600}
.gp-about{color:var(--gp-muted);font-size:14px;line-height:1.7}
.gp-about p+p{margin-top:12px}
.gp-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.gp-tag{
    padding:7px 14px;
    border:1px solid var(--gp-line);
    border-radius:99px;
    color:var(--gp-muted);
    font-size:13px;
}

/* 评分分布 */
.gp-ratings{display:flex;gap:34px;align-items:center;flex-wrap:wrap}
.gp-score{text-align:center;flex:0 0 auto}
.gp-score strong{display:block;font-size:44px;font-weight:500;line-height:1}
.gp-score .stars{display:flex;gap:2px;justify-content:center;margin:6px 0 4px}
.gp-score .stars svg{width:14px;height:14px;fill:var(--gp-star)}
.gp-score span{font-size:12px;color:var(--gp-muted)}
.gp-bars{flex:1 1 220px;min-width:220px;display:flex;flex-direction:column;gap:7px}
.gp-bar-row{display:flex;align-items:center;gap:10px}
.gp-bar-row i{font-style:normal;font-size:12px;color:var(--gp-muted);width:8px}
.gp-bar-track{flex:1 1 auto;height:8px;border-radius:99px;background:var(--gp-soft);overflow:hidden}
.gp-bar-fill{height:100%;border-radius:99px;background:var(--gp-star)}

/* 数据行 */
.gp-rows{margin-top:4px}
.gp-row{
    display:grid;grid-template-columns:150px 1fr;gap:16px;
    padding:14px 0;
    font-size:14px;
}
.gp-row dt{color:var(--gp-muted)}
.gp-row dd{margin:0;color:var(--gp-ink)}

/* 数据安全 */
.gp-safe{
    display:flex;gap:16px;align-items:flex-start;
    padding:18px;
    border:1px solid var(--gp-line);
    border-radius:14px;
}
.gp-safe svg{width:26px;height:26px;flex:0 0 26px;stroke:var(--gp-green);fill:none;stroke-width:1.8}
.gp-safe p{font-size:14px;color:var(--gp-muted);line-height:1.65;margin-top:5px}

/* 底部提示 */
.gp-toast{
    position:fixed;left:50%;bottom:26px;z-index:60;
    padding:13px 22px;
    border-radius:10px;
    background:#323232;
    color:#fff;
    font-size:14px;
    box-shadow:0 6px 24px rgba(0,0,0,.3);
    opacity:0;
    transform:translate(-50%,16px);
    transition:opacity .25s ease,transform .25s ease;
    pointer-events:none;
}
.gp-toast.show{opacity:1;transform:translate(-50%,0)}

.gp-direct{
    display:inline-block;
    margin-top:14px;
    color:var(--gp-blue);
    font-size:13px;
    text-decoration:underline;
}

@media(max-width:640px){
    .gp-head{gap:14px;padding-top:16px}
    .gp-appicon{width:76px;height:76px;flex-basis:76px;border-radius:18px}
    .gp-headinfo h1{font-size:21px}
    .gp-stats{padding:12px 0}
    .gp-stat strong{font-size:14px}
    .gp-stat span{font-size:11px}
    .gp-actions{flex-wrap:wrap}
    .gp-install{max-width:none;width:100%;order:-1}
    .gp-shot{width:168px;height:224px}
    .gp-row{grid-template-columns:110px 1fr;font-size:13px}
    .gp-score strong{font-size:36px}
}