:root{
  --bg:#f5f7fb;
  --card:#ffffff;
  --muted:#6b7280;
  --primary:#1b9e3a; /* install button green-ish to match Play */
  --primary-strong:#16922f;
  --accent:#1a73e8; /* link / accent color */
  --surface-shadow: 0 6px 18px rgba(15,23,42,0.08);
  --font-family: "Roboto", -apple-system, "Segoe UI", "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --radius-lg: 12px;
  --radius-md: 8px;
  --page-padding: 20px;
}
*{box-sizing:border-box}
.body{font-family:var(--font-family); -webkit-font-smoothing:antialiased}

/* Remove default page white edges: make page full-bleed */
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: #0f1724;
}

.container{max-width:none; width:100%; margin:0; padding:0 20px}
.topbar{background:var(--card); border-bottom:1px solid #e6e9ee}
.topbar .container{display:flex; align-items:center; gap:20px}
.brand{font-weight:700}
.nav{margin-left:auto}
/* Category pill (rounded tag) */
.category-pill{
  display:inline-block;
  padding:6px 14px;
  border-radius:20px;
  background:#ffffff;
  color:rgb(95, 99, 104);
  font-size:13px;
  line-height:1;
  margin-top:8px;
  box-shadow:0 1px 0 rgba(0,0,0,0.02);
  border: 1px solid #f0f0f0;
}

/* Data safety card */
.data-safety-card{
  background: #fff;
  border: none;
  border-radius:12px;
  padding:14px 16px;
  box-shadow: 0 8px 20px rgba(8,15,30,0.04);
  margin-top:14px;
}
.data-safety-card .ds-row{
  display:flex;
  gap:12px;
  align-items:flex-start;
  padding:8px 0;
}
.data-safety-card .ds-icon{width:20px; flex:0 0 20px; color:#6b7280}
.data-safety-card .ds-text{flex:1}
.data-safety-card .ds-title{font-size:14px; color:rgb(95,99,104); margin-bottom:4px}
.data-safety-card .ds-sub{font-size:14px; color:rgb(95,99,104)}
.data-safety-card .ds-link{display:inline-block; margin-top:8px; color:var(--primary); font-weight:600; text-decoration:none}
/* Ensure ds icon images size and alignment */
.data-safety-card .ds-icon img,.data-safety-card .ds-icon .ds-icon-img{width:20px;height:20px;display:block;object-fit:contain}

@media (max-width:480px){
  .data-safety-card{padding:10px}
  .data-safety-card .ds-row{padding:6px 0}
}
.nav a{color:var(--muted); text-decoration:none; margin-left:14px}

.app-page{display:block; padding:20px}
.app-header{display:block; padding:12px; background:var(--card); border-radius:var(--radius-md); box-shadow:var(--surface-shadow); margin-bottom:12px}
.app-meta{display:flex; gap:12px; align-items:center}
.app-icon{width:72px; height:72px; border-radius:12px; background:linear-gradient(180deg,#ffffff,#f3f6fb); padding:6px; box-shadow:0 8px 20px rgba(16,24,40,0.06)}
.meta-text .app-title{margin:0; font-size:18px; line-height:1.12; font-weight:700}
.developer{color:var(--accent); text-decoration:none; display:inline-block; margin-top:6px; font-size:13px}
.rating{margin-top:8px; color:var(--muted); font-size:14px}
.stars{color:#f5a623; font-size:15px}

.action-block{display:flex; align-items:center; gap:16px}
.install{background:linear-gradient(180deg,var(--primary),var(--primary-strong)); color:#fff; border:0; padding:12px 22px; border-radius:24px; font-weight:600; cursor:pointer; box-shadow:0 12px 30px rgba(23,120,52,0.18); transition:transform .12s ease, box-shadow .12s ease, background-color .12s ease; font-size:15px; line-height:1.3}
.install:hover{transform:translateY(-1px); box-shadow:0 14px 34px rgba(23,120,52,0.20)}
.install:active{transform:translateY(0); box-shadow:0 6px 16px rgba(23,120,52,0.12)}
.install:disabled, .install.installed{background:#f5f5f5; color:#999; border:1px solid #e0e0e0; box-shadow:0 1px 3px rgba(0,0,0,0.06); cursor:default}
.install.installed{font-weight:600}
.price{color:var(--muted)}

.screenshots{display:block}
.scr-view{width:100%; overflow:hidden; background:var(--card); border-radius:var(--radius-lg); padding:20px 20px; display:flex; align-items:center}
.scr-track{display:flex; gap:12px; transition:transform .36s cubic-bezier(.22,.9,.2,1)}
.scr-track img{width:100%; max-width:197px; height:auto; aspect-ratio:197/296; object-fit:cover; border-radius:12px; background:linear-gradient(135deg,#e9eef6,#d6dfe9); box-shadow:0 8px 20px rgba(0,0,0,0.08); border:none; transition:transform .2s ease, box-shadow .2s ease; cursor:pointer}
.scr-track img:hover{transform:translateY(-4px); box-shadow:0 12px 28px rgba(0,0,0,0.12)}
.scr-btn{background:transparent; border:0; font-size:30px; cursor:pointer}
.carousel-indicators{display:none; gap:8px; justify-content:center; margin-top:12px}
.carousel-indicators button{width:10px; height:10px; border-radius:50%; background:#e0e0e0; border:none; cursor:pointer; transition:all .18s cubic-bezier(.2,.9,.2,1); padding:0}
.carousel-indicators button:hover{background:#d0d0d0}
.carousel-indicators button.active{width:28px; height:10px; border-radius:6px; background:var(--primary); box-shadow:0 6px 18px rgba(22,146,47,0.12); transform:scale(1)}
.carousel-indicators button:focus{outline:2px solid var(--accent); outline-offset:3px}

@media (max-width:480px){
  .carousel-indicators{gap:6px; margin-top:16px}
  .carousel-indicators button{width:8px; height:8px}
  .carousel-indicators button.active{width:22px; height:8px}
}

.about{background:var(--card); padding:18px; border-radius:var(--radius-md)}
.about h2{margin-top:0}

.additional-info{background:var(--card); padding:16px; border-radius:var(--radius-md); margin-top:6px; border:1px solid #f0f0f0}
.additional-info dl{display:grid; grid-template-columns:1fr 1fr; gap:12px}
.additional-info dt{color:var(--muted); font-size:12px; font-weight:600; letter-spacing:0.3px}
.additional-info dd{margin:0; font-size:14px; line-height:1.5; color:var(--text)}

@media (max-width:480px){
  .additional-info{padding:12px 14px; margin-top:8px}
  .additional-info dl{grid-template-columns:1fr; gap:10px 0}
  .additional-info dt{font-size:11px}
  .additional-info dd{font-size:13px}
}

.footer{padding:18px 0; color:var(--muted)}

@media (max-width:900px){
  .app-page{grid-template-columns:1fr;}
  .scr-track img{width:100%; max-width:197px; height:auto; aspect-ratio:197/296}
  .app-icon{width:80px; height:80px}
  .meta-text .app-title{font-size:18px}
  .app-header{flex-wrap:wrap}
/* (mobile-specific continuation for narrower widths is below) */

@media (max-width:480px){
  .review-card{padding:10px}
  .avatar{width:36px;height:36px;font-size:14px}
  .review-body{font-size:13px}
  .review-name{font-size:13px}
}

  .action-block{width:100%; justify-content:flex-start; margin-top:12px}
  .install{padding:10px 18px; font-size:14px}
}

@media (max-width:768px){
  .container{padding:14px}
  .app-header{flex-direction:column; align-items:flex-start}
  .action-block{width:100%; justify-content:flex-start}
}

/* focus & accessibility */
.install:focus{outline:3px solid rgba(26,115,232,0.18); outline-offset:3px}
.scr-btn:focus{outline:2px solid rgba(8,15,30,0.06)}

/* Mobile (phone) specific styles to mimic Play Store mobile layout */
@media (max-width:480px){
  :root{--page-padding: 12px;}
  
  .container{padding:var(--page-padding); overflow-x:hidden}
  body{overflow-x:hidden}
  .app-page{display:block; padding:0}
  
  .topbar .container{padding-left:6px; padding-right:6px}
  .app-header{padding:12px 12px; margin-bottom:12px; display:flex; flex-direction:column}
  .app-meta{gap:12px; flex-direction:row}
  .app-icon{width:72px; height:72px; border-radius:12px; flex-shrink:0}
  .meta-text{flex:1; min-width:0}
  .meta-text .app-title{font-size:16px; margin:0 0 4px 0}
  .developer{font-size:12px}
  .rating{font-size:12px}
  .rating-count{font-size:11px}

  /* hide desktop action block and rely on mobile bar */
  .action-block{display:none}

  /* screenshots section responsive */
  .screenshots{display:block; margin:12px 0}
  .scr-track img{width:100%; max-width:167px; height:auto; aspect-ratio:197/296; border-radius:10px; box-shadow:0 4px 12px rgba(0,0,0,0.08); object-fit:cover}
  .scr-view{padding:12px; width:100%}
  .scr-view{touch-action:pan-y}
  .scr-btn{font-size:24px; padding:8px}

  /* indicators slightly larger for touch */
  .carousel-indicators{margin-top:8px; gap:6px}
  .carousel-indicators button{width:10px; height:10px}
  .carousel-indicators button.active{width:22px; height:10px}

  /* about & additional info sections */
  .about{padding:12px 12px; margin:12px 0; font-size:14px; line-height:1.5}
  .about h2{font-size:16px; margin:0 0 8px 0}
  .additional-info{padding:12px 12px; margin:12px 0; font-size:13px}
  .additional-info h3{font-size:14px; margin:0 0 8px 0}

  /* ensure footer not overlapping on very small screens */
  .footer{padding:12px var(--page-padding) 80px var(--page-padding); font-size:12px}
}

/* Review cards - desktop and mobile (shared base styles) */
.review-card{background:var(--card); border:none; border-radius:12px;  margin-top:14px; padding:16px}
.review-head{display:flex; gap:12px; align-items:center}
.review-menu{margin-left:auto; color:rgb(150,156,162); font-size:18px; line-height:1}
.avatar{width:40px; height:40px; border-radius:50%; flex-shrink:0; object-fit:cover; display:block}
.review-meta{flex:1; min-width:0}
.review-name{font-weight:600; color:rgb(32,33,36); font-size:14px}
.review-date{display:flex; align-items:center; gap:8px; margin-top:8px; color:rgb(95,99,104); font-size:13px}
.review-stars .star{color:#e9ecef; font-size:13px; margin-right:2px}
.review-stars .star.filled{color:var(--primary)}
.review-body{margin-top:10px; color:rgb(95,99,104); font-size:14px; line-height:1.5}
.helpful-count{font-size:13px; color:rgb(95,99,104); margin-top:12px; margin-bottom:8px}
.review-footer{display:flex; align-items:center; gap:12px}
.helpful-question{font-size:13px; color:rgb(95,99,104)}
.review-actions{display:flex; gap:8px}
.review-actions .pill{padding:6px 14px; border-radius:18px; border:none; background:#fff; font-size:13px; cursor:pointer}
.review-actions .pill.yes{background:rgba(0,161,115,0.08); border-color:rgba(0,161,115,0.16); color:var(--primary); font-weight:600}
.review-actions .pill.no{background:#fff}


/* Mobile install bar visible by default to keep mobile UX consistent on desktop */
.mobile-install-bar{display:flex; align-items:center; gap:10px; position:fixed; left:0; right:0; bottom:12px; padding:8px 10px; background:var(--card); border-radius:0; box-shadow:0 18px 36px rgba(8,15,30,0.12); z-index:80}
.mobile-install-bar .mobile-icon{width:44px; height:44px; border-radius:8px; flex-shrink:0}
.mobile-install-bar .mobile-meta{flex:1; min-width:0}
.mobile-install-bar .mobile-title{font-weight:700; font-size:13px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.mobile-install-bar .mobile-sub{font-size:11px; color:var(--muted)}
.mobile-install-bar .mobile-price{color:var(--muted); font-size:12px; margin-right:4px}
.install.mobile{padding:8px 14px; font-size:13px; font-weight:600; flex-shrink:0}


/* Ratings breakdown widget */
.ratings-widget{background:var(--card); border-radius:12px;margin-top: 30px;}
.device-pills{display:flex; gap:10px; margin-bottom:12px}
.device-pills .pill{background:#fff; border:none; color:rgb(95,99,104); padding:6px 12px; border-radius:20px; font-size:13px; cursor:pointer}
.device-pills .pill.active{background:rgba(0,161,115,0.08); color:var(--primary); box-shadow:inset 0 0 0 1px rgba(0,161,115,0.02)}

.rating-summary{display:flex; gap:18px; align-items:flex-start;margin-top: 20px;}
.rating-score{width:120px; min-width:120px; display:flex; flex-direction:column; align-items:flex-start}
.rating-score .score{font-size:48px; font-weight:700; color:rgb(32,33,36); line-height:1}
.rating-score .score-stars{font-size:14px; margin-top:6px; letter-spacing:2px; color:#e9ecef}
/* show partial (4.5/5) filled stars by using a text gradient clipped to the star glyphs */
.rating-score .score-stars{
  background: linear-gradient(90deg, var(--primary) 0%, var(--primary) 90%, #e9ecef 90%, #e9ecef 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.rating-score .score-count{font-size:13px; color:rgb(95,99,104); margin-top:6px}

.rating-bars{flex:1; min-width:0}
.bar-row{display:flex; align-items:center; gap:10px; margin:6px 0}
.bar-label{width:18px; text-align:right; color:rgb(95,99,104); font-size:13px}
.bar-track{flex:1; height:10px; background:#e9ecef; border-radius:999px; overflow:hidden}
.bar-fill{display:block; height:100%; background:linear-gradient(90deg,var(--primary),var(--primary-strong)); border-radius:999px}

@media (max-width:480px){
  .rating-summary{flex-direction:row; gap:12px;margin-top:20px}
  .rating-score{width:86px; min-width:86px}
  .rating-score .score{font-size:34px}
}




    body, html {
      font-family: Roboto, Helvetica, Arial, sans-serif;
    }
    .header-box {
      color: #fff;
      background-image: url("assets/bg.png");
    }

    .header {
      z-index: 1;
      position: relative;
      width: 100%;
      height: 220px;
      background-size: cover;
      background-position: center;
      filter: brightness(0.7);
    }

    .trailer-btn {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      background: rgba(0, 0, 0, 0.55);
      padding: 10px 20px;
      border-radius: 20px;
      backdrop-filter: blur(5px);
      color: #fff;
      font-weight: 500;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
    }

    .trailer-btn img {
      width: 20px;
      height: 20px;
      margin-right: 8px;
    }

    .content {
      z-index: 0;
      margin-top: -40px;
      border-radius: 0px 0px 0 0;
      padding: 20px;
    }

    .app-info {
      display: flex;
      align-items: center;
      gap: 20px;
    }

    .app-info img {
      width: 72px;
      height: 72px;
      border-radius: 12px;
    }

    .app-title {
      font-size: 22px;
      color: #fff;
      font-weight: 500;
    }

    .app-sub {
      margin-top: 4px;
      font-size: 14px;
      color: rgb(0, 161, 115);
    }

    .stats {
      margin-top: 15px;
      display: flex;
      width: 100%;
      justify-content: space-around;
      align-items: center;
      padding-left: 0;
      margin-left: 0;
      height: 80px;
      color: rgb(232, 234, 237);
      font-size: 14px;
      position: relative;
    }

    /* 每一项统计 */
    .stat-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      position: relative;
      padding: 0 10px;
    }

    .stat-item:not(:last-child)::after {
      content: "";
      position: absolute;
      right: 0;
      top: 15%;
      height: 50%;
      width: 1px;
      background-color: rgba(255, 255, 255, 0.3);
    }

    .stat-item .icon {
      width: 18px;
      height: 18px;
      background-size: contain;
      background-repeat: no-repeat;
      margin-bottom: 4px;
    }

    .stat-item .label {
      font-size: 12px;
      color: rgb(154, 160, 166);
      margin-top: 2px;
      text-align: center;
      white-space: nowrap;
      display: inline-block;
    }

    .stat-item .value {
      font-size: 14px;
      font-weight: 500;
      display: flex;
      align-items: center;
      white-space: nowrap;
      flex-wrap: nowrap;
      gap: 0;
    }

    .stat-item .value .star {
      font-size: 10px;
      margin-left: 2px;
      position: relative;
      top: -1px;
      display: inline;
      flex-shrink: 0;
    }

    .stats div {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 2px;
      position: relative;
      padding: 0 10px;
    }

    .stat-item > .value {
      display: flex !important;
      flex-direction: row !important;
      gap: 0 !important;
      white-space: nowrap !important;
    }

    .stat-item > .label {
      display: inline-block !important;
      white-space: nowrap !important;
      flex-shrink: 0 !important;
    }

    .install-btn {
      margin: 0 20px;
      width: calc(100% - 40px);
      padding: 15px;
      background: rgb(0, 161, 115);
      border: none;
      border-radius: 12px;
      height: 44px;
      font-size: 14px;
      cursor: pointer;
      color: rgb(32, 33, 36);
    }

    .bottom-tools {
      margin-top: 15px;
      margin-bottom: 20px;
      display: flex;
      color: rgb(0, 179, 128);
      justify-content: center;
      font-size: 15px;
      gap: 40px;
    }

    .bottom-tools div {
      display: flex;
      align-items: center;
      gap: 6px;
      cursor: pointer;
      color: rgb(0, 179, 128);
    }

    .bottom-tools .bt-icon {
      width: 24px;
      height: 24px;
    }

    .bottom-text {
      margin-left: 20px;
      margin-top: 15px;
      padding-bottom: 20px;
      display: flex;
      color: rgb(154, 160, 166);
      justify-content: flex-start;
      justify-items: center;
      font-size: 14px;
      font-weight: 400;
      gap: 40px;
    }

    .bottom-text div {
      display: flex;
      align-items: center;
      gap: 8px;
    }