.obin-lightbox {
  position: fixed; inset: 0; box-sizing: border-box;
  width: 100%; height: 100%; height: 100dvh;
  max-width: none; max-height: none; margin: 0; padding: 0;
  border: 0; background: rgba(10, 14, 17, .97); color: #fff;
  z-index: 2147483647; overflow: hidden; overscroll-behavior: contain;
}
.obin-lightbox:not([open]) { display: none; }
.obin-lightbox::backdrop { background: rgba(0, 0, 0, .9); }
.obin-lightbox-stage {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  padding: calc(76px + env(safe-area-inset-top, 0px)) 80px calc(78px + env(safe-area-inset-bottom, 0px));
  box-sizing: border-box; touch-action: pan-y pinch-zoom;
}
.obin-lightbox-stage img {
  display: block; width: auto; height: auto; max-width: 100%; max-height: 100%;
  object-fit: contain; border: 0; border-radius: 0; user-select: none; -webkit-user-select: none;
}
.obin-lightbox button {
  position: absolute; z-index: 2; display: flex; align-items: center; justify-content: center;
  width: 52px; height: 52px; min-width: 52px; padding: 0; margin: 0;
  border: 1px solid rgba(255, 255, 255, .55); border-radius: 50%;
  background: #242a30; color: #fff; box-shadow: 0 2px 12px #0006;
  font: 36px/1 Arial, sans-serif; cursor: pointer; touch-action: manipulation;
}
.obin-lightbox button:hover { background: #47535e; }
.obin-lightbox button:focus-visible { outline: 3px solid #f5cb87; outline-offset: 4px; }
.obin-lightbox button[hidden], .obin-lightbox [hidden] { display: none !important; }
.obin-lightbox-close { top: calc(16px + env(safe-area-inset-top, 0px)); right: calc(16px + env(safe-area-inset-right, 0px)); }
.obin-lightbox-prev { left: calc(16px + env(safe-area-inset-left, 0px)); top: 50%; transform: translateY(-50%); }
.obin-lightbox-next { right: calc(16px + env(safe-area-inset-right, 0px)); top: 50%; transform: translateY(-50%); }
.obin-lightbox-counter {
  position: absolute; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); left: 80px; right: 80px;
  margin: 0; text-align: center; font: 14px/1.5 system-ui, sans-serif;
  max-height: 44px; overflow: auto; color: #fff;
}
.obin-lightbox-error { position: absolute; max-width: 60%; text-align: center; font: 16px/1.6 system-ui, sans-serif; }
@media (max-width: 600px) {
  .obin-lightbox-stage { padding-left: 10px; padding-right: 10px; padding-bottom: calc(150px + env(safe-area-inset-bottom, 0px)); }
  .obin-lightbox-prev, .obin-lightbox-next { top: auto; bottom: calc(70px + env(safe-area-inset-bottom, 0px)); transform: none; }
  .obin-lightbox-counter { left: 16px; right: 16px; }
}