.gr-photo-modal { padding: 64px 12px !important; width: 100% !important; height: 100dvh !important; box-sizing: border-box; background: #100d12 !important; }
.gr-photo-stage { display: grid !important; place-items: center !important; position: relative !important; width: min(100%, 1280px) !important; height: 100% !important; max-width: 100% !important; max-height: 100% !important; min-height: 0; margin: 0 auto !important; border: 0 !important; border-radius: 0 !important; overflow: hidden !important; touch-action: none; direction: ltr; }
.gr-photo-stage .gr-photo-image { display: block !important; width: 100% !important; height: 100% !important; min-width: 0 !important; min-height: 0 !important; max-width: 100% !important; max-height: 100% !important; object-fit: contain !important; transform-origin: center !important; pointer-events: none; user-select: none; -webkit-user-drag: none; }
.gr-photo-stage.is-zoomed { cursor: grab; }
.gr-photo-stage.is-dragging { cursor: grabbing; }
.gr-photo-close { top: max(10px, env(safe-area-inset-top)) !important; right: max(12px, env(safe-area-inset-right)) !important; left: auto !important; width: 44px !important; height: 44px !important; }
.gr-photo-toolbar { position: absolute; z-index: 3; bottom: max(10px, env(safe-area-inset-bottom)); left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 6px; padding: 4px; border: 1px solid #ffffff40; border-radius: 28px; background: #211b25; }
.gr-photo-toolbar button { min-width: 44px; min-height: 40px; padding: 0 12px; border: 0; border-radius: 22px; color: #fff; background: transparent; font: 14px/1.2 Arial, sans-serif; cursor: pointer; white-space: nowrap; }
.gr-photo-toolbar button:first-child, .gr-photo-toolbar button:last-child { font-size: 24px; }
.gr-photo-toolbar button:hover { background: #ffffff20; }
.gr-photo-toolbar button:disabled { opacity: .35; cursor: default; }
.gr-photo-toolbar button:focus-visible { outline: 2px solid #d0ab61; outline-offset: 1px; }

@media (orientation: landscape) and (max-height: 500px) {
  .gr-photo-modal { padding: 54px 10px 58px !important; }
  .gr-photo-stage { width: 100% !important; height: calc(100dvh - 112px) !important; }
  .gr-photo-stage .gr-photo-image { width: 100% !important; height: 100% !important; max-width: 100% !important; max-height: 100% !important; object-fit: contain !important; }
  .gr-photo-close { top: 6px !important; right: max(8px, env(safe-area-inset-right)) !important; }
  .gr-photo-toolbar { bottom: 6px; }
}