*{box-sizing:border-box}
:root{--g:#0a9b65;--t:#222;--m:#6f6f6f;--l:#ececec}
body{margin:0;background:#f3f3f3;color:var(--t);font-family:Arial,Helvetica,sans-serif}
button{font:inherit}
.page{width:min(100%,430px);margin:auto;background:#fff;min-height:100vh;padding:0 14px 35px}
.top-note{font-size:10px;color:#777;text-align:center;padding:10px 0;border-bottom:1px solid #eee}
.hero{display:flex;gap:14px;align-items:flex-start;padding-top:18px}.app-icon{width:72px;height:72px;border-radius:16px;object-fit:cover}.hero-copy h1{font-size:23px;margin:5px 0}.publisher{color:var(--g);font-size:11px;font-weight:bold;margin:0 0 6px}.meta{font-size:10px;color:var(--m);margin:0}
.stats{display:grid;grid-template-columns:1fr 1px 1fr 1px 1fr;gap:8px;align-items:center;text-align:center;margin:24px 0 16px}.stats div{display:flex;flex-direction:column;gap:6px}.stats strong{font-size:13px}.stats small{font-size:9px;color:var(--m)}.stats span{height:28px;background:#e5e5e5}
.install-btn,.secondary-btn{width:100%;border-radius:6px;padding:11px;border:0;font-weight:bold}.install-btn{background:var(--g);color:#fff}.secondary-btn{background:#fff;color:var(--g);border:1px solid #dfeee8;margin-top:7px}
.quick-actions{display:flex;justify-content:center;gap:28px;margin:18px 0}.quick-actions button{border:0;background:transparent;color:var(--g);font-size:11px}.device-note{text-align:center;font-size:10px;color:#777}
.screens{display:grid;grid-template-columns:1fr 1fr 1fr;gap:7px;margin:26px 0}.screens img{width:100%;height:190px;object-fit:cover;border-radius:9px}
.block{padding-bottom:24px;margin-bottom:22px;border-bottom:1px solid var(--l)}.heading{display:flex;justify-content:space-between;align-items:center}.heading h2,.block h2{font-size:16px;margin:0 0 12px}.heading span{font-size:25px}.block p{font-size:12px;line-height:1.55;color:#666}.block h3{font-size:11px;margin:18px 0 5px}.chips{display:flex;gap:7px;flex-wrap:wrap}.chips span,.device-tabs span{font-size:10px;border:1px solid #ddd;border-radius:20px;padding:5px 9px;color:#666}
.safety-card{border:1px solid #e6e6e6;border-radius:8px;padding:14px}.safety-card div{display:grid;grid-template-columns:28px 1fr;gap:8px}.safety-card a{font-size:11px;color:var(--g);text-decoration:none}
.device-tabs{display:flex;gap:8px;margin:15px 0}.device-tabs .active{background:#e8f6f0;color:var(--g);border-color:#d3ede2}
.rating-area{display:grid;grid-template-columns:95px 1fr;gap:18px;align-items:center}.score{display:flex;flex-direction:column}.score strong{font-size:38px;font-weight:500}.score span{font-size:11px;color:var(--g)}.score small{font-size:9px;color:#777}.bars{display:grid;gap:6px}.bars div{display:grid;grid-template-columns:12px 1fr;gap:7px;align-items:center}.bars b{font-size:9px}.bars i{height:7px;border-radius:10px;background:#e9e9e9;position:relative}.bars i:before{content:"";position:absolute;inset:0 auto 0 0;width:var(--w);background:var(--g);border-radius:inherit}
.review{padding:18px 0;border-top:1px solid #f1f1f1}.review-head{display:grid;grid-template-columns:36px 1fr auto;gap:9px;align-items:center}.avatar{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:#d9d9d9;font-weight:bold}.review small{font-size:9px;color:var(--g)}.helpful{font-size:10px;color:#777}.helpful button{border:1px solid #ddd;background:#fff;border-radius:15px;padding:3px 8px;margin-left:5px;font-size:9px}
.more-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.more-grid div{display:flex;gap:9px;align-items:center}.more-grid img{width:42px;height:42px;border-radius:9px;object-fit:cover}.more-grid span{font-size:11px}
.footer{font-size:10px;color:#888}.footer-links{display:flex;gap:14px;justify-content:center}
.modal{position:fixed;inset:0;background:#0008;display:grid;place-items:center;padding:20px}.modal[hidden]{display:none}.dialog{width:min(100%,360px);background:#fff;border-radius:14px;padding:18px}.dialog-head{display:flex;justify-content:space-between;align-items:center}.dialog-head h3{margin:0}.dialog-head button{border:0;background:transparent;font-size:26px}.dialog-app{display:flex;gap:12px;align-items:center;margin:18px 0}.dialog-app img{width:50px;height:50px;border-radius:11px}.dialog-app div{display:flex;flex-direction:column;gap:4px}.dialog-app small{font-size:10px;color:#777}.dialog p{font-size:12px;color:#666;line-height:1.5}
.toast{position:fixed;left:50%;bottom:25px;transform:translate(-50%,24px);opacity:0;background:#222;color:#fff;padding:11px 15px;border-radius:9px;font-size:11px;transition:.25s;z-index:30}.toast.show{opacity:1;transform:translate(-50%,0)}
@media(max-width:360px){.screens img{height:165px}.hero-copy h1{font-size:20px}}
.screenshots-slider {
  position: relative;
  width: 100%;
  margin: 25px 0;
}

.screenshots-track {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  padding: 5px 4px 14px;
  -webkit-overflow-scrolling: touch;
}

.screenshots-track::-webkit-scrollbar {
  display: none;
}

.screenshots-track {
  scrollbar-width: none;
}

.screenshots-track img {
  flex: 0 0 170px;
  width: 170px;
  height: 310px;
  object-fit: cover;
  border-radius: 14px;
  scroll-snap-align: start;
  cursor: pointer;
  border: 1px solid #eeeeee;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.12);
}

.slider-arrow {
  position: absolute;
  top: 50%;
  z-index: 4;
  width: 38px;
  height: 38px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.96);
  color: #333333;
  font-size: 30px;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.20);
  transform: translateY(-50%);
}

.left-arrow {
  left: 4px;
}

.right-arrow {
  right: 4px;
}

/* বড় Preview Popup */

.image-preview {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 50px 45px 25px;
  background: rgba(0, 0, 0, 0.82);
}

.image-preview.active {
  display: flex;
}

.image-preview img {
  display: block;
  max-width: min(88vw, 430px);
  max-height: 86vh;
  object-fit: contain;
  border-radius: 10px;
  background: #ffffff;
}

.preview-close {
  position: absolute;
  top: 15px;
  right: 18px;
  width: 42px;
  height: 42px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.96);
  color: #222222;
  font-size: 28px;
  cursor: pointer;
}

.preview-arrow {
  position: absolute;
  top: 50%;
  width: 48px;
  height: 48px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.96);
  color: #222222;
  font-size: 34px;
  cursor: pointer;
  transform: translateY(-50%);
}

.preview-left {
  left: 10px;
}

.preview-right {
  right: 10px;
}

@media (max-width: 480px) {
  .screenshots-track img {
    flex-basis: 155px;
    width: 155px;
    height: 280px;
  }

  .slider-arrow {
    display: none;
  }

  .image-preview {
    padding-left: 42px;
    padding-right: 42px;
  }

  .preview-arrow {
    width: 40px;
    height: 40px;
    font-size: 29px;
  }
}