.screenshot-strip {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: 0 10px 15px 0;
}

.screenshot-thumbnail {
  flex: 0 0 calc((100% - 30px) / 4);
  min-width: 0;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: zoom-in;
  scroll-snap-align: start;
}

.app_screenshot .screenshot-thumbnail img {
  display: block;
  float: none;
  width: 100%;
  padding: 0;
  margin: 0;
}

.screenshot-viewer {
  position: fixed;
  inset: 0;
  z-index: 1050;
  display: flex;
  align-items: center;
  justify-content: center;
  height: var(--viewer-height, 100%);
  padding: 16px;
  background: rgba(0, 0, 0, .5);
  overscroll-behavior: contain;
  touch-action: pinch-zoom;
}
.screenshot-viewer[hidden] { display: none; }
.screenshot-dialog { width: 100%; max-width: 720px; }
.screenshot-content { color: #333; }
.screenshot-toolbar { position: relative; display: flex; align-items: center; justify-content: flex-end; padding: 8px 4px 12px; }
#screenshot-counter { position: absolute; left: 50%; transform: translateX(-50%); padding: 6px 12px; border-radius: 20px; background: #fff; color: #666; font-size: 13px; font-variant-numeric: tabular-nums; }
.screenshot-viewer button { display: inline-flex; align-items: center; justify-content: center; border: 0; background: rgba(255, 255, 255, .94); color: #444; cursor: pointer; box-shadow: 0 2px 12px rgba(0, 0, 0, .08); transition: background-color .15s, color .15s; }
.screenshot-viewer button:hover { background: #fff; color: #ff7500; }
.screenshot-viewer button:focus-visible, .screenshot-thumbnail:focus-visible { outline: 3px solid #ff7500; outline-offset: -3px; }
.screenshot-close { width: 44px; height: 44px; border-radius: 50%; font-size: 30px; line-height: 1; padding: 0; }
.screenshot-stage { position: relative; display: flex; align-items: center; justify-content: center; min-height: 0; }
#imgInModalID { display: block; max-width: 100%; max-height: 72vh; max-height: min(72vh, calc(var(--viewer-height, 100vh) - 120px)); object-fit: contain; border-radius: 12px; box-shadow: 0 8px 32px rgba(0, 0, 0, .1); user-select: none; -webkit-user-select: none; }

@media (max-width: 767px) {
  .screenshot-thumbnail { flex-basis: 42%; }

  .screenshot-viewer {
    padding: 8px;
    padding-top: max(8px, env(safe-area-inset-top, 0px));
    padding-bottom: max(8px, env(safe-area-inset-bottom, 0px));
  }

  .screenshot-dialog {
    max-width: none;
  }

  .screenshot-toolbar { padding: 0 0 8px; }

  #imgInModalID {
    max-height: calc(100vh - 80px);
    max-height: min(calc(var(--viewer-height, 100vh) * .85), calc(var(--viewer-height, 100vh) - 80px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)));
    border-radius: 8px;
  }
}