:root{
  /* 主题色与基础变量 */
  --play-green:#00A86B; --play-green-press:#079a62;
  --ink:#0b1020; --muted:#5f6b7a;
  --card:#ffffff; --stroke:rgba(10,20,35,.10);

  --chip:#f7f8fa; --chip-border:#e7ecf1;

  /* 统一的“竖图”宽度（会随屏幕自动夹取），横图见 .shot.landscape */
  --shot-w: clamp(160px, 40vw, 280px);

  /* 新增：排版节奏与圆角 */
  --sp-1: 8px;   --sp-2: 12px;  --sp-3: 16px;  --sp-4: 20px;  --sp-5: 24px;
  --radius: 12px;
}

/* ===== 基础 ===== */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:#fff; color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,"Apple Color Emoji","Segoe UI Emoji";
  line-height:1.55;
}
a{color:inherit}

/* ===== 顶栏（毛玻璃） ===== */
.appbar{position:fixed; inset:0 0 auto 0; height:56px; z-index:1000; background:transparent}
.appbar::before{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:rgba(255,255,255,.72);
  backdrop-filter:blur(12px) saturate(1.2);
  -webkit-backdrop-filter:blur(12px) saturate(1.2);
}
.appbar-inner{
  position:relative; z-index:1; height:56px; max-width:960px; margin:0 auto;
  display:flex; align-items:center; justify-content:space-between; padding:0 var(--sp-2);
}
.gp-brand{display:flex; align-items:center; gap:10px; font-weight:700}
.gp-logo-img{width:200px; height:50px; object-fit:contain; display:block}
.gp-actions{display:flex; align-items:center; gap:6px; margin-left:auto}
.gp-actions .gp-avatar{order:99}
.gp-icon-btn{width:36px; height:36px; border:0; background:transparent; cursor:pointer; display:grid; place-items:center; border-radius:8px}
.gp-icon-btn:hover{background:#f3f4f6}
.gp-avatar{width:28px; height:28px; border-radius:50%; object-fit:cover; border:1px solid #e5e7eb; box-shadow:0 0 0 2px rgba(255,255,255,.95); background:#eee}

.appbar + .wrap{padding-top:68px}

/* ===== 页面 & 卡片容器 ===== */
.wrap{min-height:100%; display:flex; justify-content:center; padding:68px var(--sp-2) 80px}
.page{width:100%; max-width:600px}

/* 整体卡片更干净：统一圆角、阴影和分区间距 */
.card{
  background:var(--card);
  border:1px solid rgba(10,20,35,.06);
  border-radius:14px;
  overflow:hidden;
  box-shadow:0 6px 18px rgba(15,23,42,.05);
}

/* 每个分区统一“上边线 + 内边距” */
.card > .header,
.card > .kpis,
.card > .actions,
.card > .section{
  padding: var(--sp-3) var(--sp-3);
}
.card > :not(:first-child){
  border-top:1px solid var(--stroke);
}

/* ===== 头部信息更稳：图标+文案+按钮 ===== */
.header{
  display:grid;
  grid-template-columns:88px 1fr auto;
  gap:14px; align-items:center;
}
.icon{
  width:72px; height:72px; border-radius:16px; overflow:hidden;
  border:1px solid var(--stroke); display:grid; place-items:center; background:#fff;
}
.icon img{width:100%; height:100%; object-fit:contain; display:block}
.title{font-size:20px; font-weight:800}
.developer{color:var(--muted); font-size:13px; margin-top:2px}
.install{display:flex; flex-direction:column; align-items:flex-end; gap:8px}
.btn{appearance:none; border:0; cursor:pointer; padding:12px 18px; border-radius:12px; font-size:15px; font-weight:800; transition:.18s}
.btn-install{background:var(--play-green); color:#fff; box-shadow:0 10px 22px rgba(0,0,0,.12)}
.btn-install:hover{background:var(--play-green-press)}
.compat{font-size:12px; color:var(--muted)}

/* ===== 核心指标：更整齐的网格 + 背景胶囊 ===== */
.kpis{
  display:grid; grid-template-columns:repeat(4,1fr); gap: var(--sp-1);
  background:#f8fafc; border-radius:10px; padding: var(--sp-2);
}
.kpi{padding:6px 8px}
.kpi .v{font-weight:800}
.kpi .l{font-size:12px; color:var(--muted)}
@media (max-width:640px){ .kpis{grid-template-columns:repeat(2,1fr)} }

/* ===== 操作行：允许换行，避免挤压 ===== */
.actions{
  display:flex; flex-wrap:wrap; gap:12px; align-items:center;
}
.act{display:flex; align-items:center; gap:6px; color:#117a37; font-size:14px; padding:6px 10px; border-radius:999px; background:#f6fffa; border:1px solid #d5f5e6}
.device-tip{margin-left:auto; color:#8893a1; font-size:13px}
@media (max-width:640px){ .device-tip{flex:1 0 100%} }

/* ===== 分区标题 ===== */
.section h3{
  margin:4px 0 10px; font-size:16px; font-weight:800;
}

/* ===== 截图区：整齐、无左空白、滚动提示 ===== */
.shots{
  display:flex; gap:10px; overflow-x:auto;
  padding: 2px 4px 10px;   /* 较小的内边距，收紧布局 */
  scroll-behavior:smooth; scroll-snap-type:x proximity;
  -webkit-overflow-scrolling:touch;
}

/* 单张卡片（默认竖图 9:16） */
.shot{
  flex:0 0 var(--shot-w);
  width:var(--shot-w); aspect-ratio: 9 / 16;
  border-radius:12px; overflow:hidden;
  border:1px solid var(--stroke); background:#0f172a;
  scroll-snap-align:start;
}
.shot img{width:100%; height:100%; object-fit:cover; display:block}

/* 横图可加类 .landscape */
.shot.landscape{
  flex-basis: clamp(240px, 70vw, 560px);
  width: clamp(240px, 70vw, 560px);
  aspect-ratio: 16 / 9;
}

/* ===== 简介 + 标签 ===== */
.desc{color:#2b3442}
.chips{display:flex; flex-wrap:wrap; gap:8px; margin:10px 0}
.chip{
  font-size:12px; background:var(--chip); border:1px solid var(--chip-border);
  padding:6px 10px; border-radius:999px;
}

/* ===== 数据安全 ===== */
.ds-item{
  border:1px dashed var(--stroke); border-radius:12px;
  background:#fff; padding:12px; margin-top:8px
}
.ds-item b{display:block; margin-bottom:4px}

/* ===== 评分与评价 ===== */
.rating-wrap{display:grid; grid-template-columns:120px 1fr; gap:16px; align-items:center}
.big-score{font-size:44px; font-weight:300}
.bars{display:flex; flex-direction:column; gap:6px}
.bar{display:grid; grid-template-columns:18px 1fr 40px; gap:8px; align-items:center; font-size:12px; color:var(--muted)}
.bar-track{height:6px; background:#e8edf3; border-radius:999px; overflow:hidden}
.bar-fill{height:100%; background:#34a853; border-radius:999px; width:0%}
.review{border-top:1px solid #f0f3f6; padding:12px 0}
.rv-head{display:flex; align-items:center; gap:8px}
.avatar{width:28px; height:28px; border-radius:50%; background:#c7d2fe; display:grid; place-items:center; font-weight:700; color:#334155}
.rv-name{font-weight:700}
.rv-meta{font-size:12px; color:var(--muted)}
.rv-text{margin:8px 0}

/* ===== 横滑应用卡片（类似项） ===== */
.hlist{display:flex; gap:6px; overflow:auto; padding:0 2px 6px}
.appcard{
  flex:none; width:140px; border:1px solid var(--stroke);
  border-radius:12px; background:#f6f7f9; overflow:hidden; cursor:pointer;
  box-shadow:0 2px 8px rgba(15,23,42,.04);
}
.appcard .ic{height:150px; background:#111; display:block}
.appcard .ic img{width:100%; height:100%; object-fit:cover; display:block}
.appcard .nm{font-weight:700; font-size:13px; padding:8px 8px 0}
.appcard .dev,.appcard .rate{font-size:12px; color:#666; padding:0 8px 8px}

/* ===== 底部导航 ===== */
.bottomnav{
  position:fixed; left:0; right:0; bottom:0; height:60px;
  background:rgba(255,255,255,.96);
  backdrop-filter:blur(8px);
  border-top:1px solid var(--stroke);
  display:flex; justify-content:space-around; align-items:center; z-index:2;
}
.bn-item{display:flex; flex-direction:column; align-items:center; font-size:11px; color:#64748b}
.bn-item.active{color:#117a37}

/* ===== 小屏优化 ===== */
@media (max-width:640px){
  .header{grid-template-columns:72px 1fr auto}
  .title{font-size:20px}
  .rating-wrap{grid-template-columns:1fr}
}