.gpe-gallery { --gpe-popup-width: 1000px; --gpe-overlay: .85; }
.gpe-gallery *, .gpe-gallery *::before, .gpe-gallery *::after { box-sizing: border-box; }
.gpe-gallery .gpe-trigger { display:inline-flex; align-items:center; justify-content:center; cursor:pointer; font-family:inherit; font-size:var(--gpe-button-size,16px); font-weight:600; line-height:1.4; padding:14px 26px; color:var(--gpe-button-color,#fff); background:var(--gpe-button-bg,#4f46e5); border:0 solid transparent; border-radius:10px; text-decoration:none; transition:background-color .2s,color .2s,box-shadow .2s; }
.gpe-gallery .gpe-trigger:hover { background:#3730a3; color:#fff; }
.gpe-gallery button:focus-visible { outline:3px solid #38bdf8; outline-offset:4px; }
.gpe-gallery .gpe-dialog { position:fixed; inset:0; margin:auto; padding:12px; width:calc(100% - 16px); max-width:calc(var(--gpe-popup-width) + 24px); max-height:100vh; max-height:100dvh; border:0; background:transparent; color:#fff; overflow:auto; font-family:inherit; text-align:left; }
.gpe-gallery .gpe-dialog:not([open]) { display:none !important; }
.gpe-dialog::backdrop { background:rgba(0,0,0,.84); }
.gpe-shell { border-radius:16px; overflow:hidden; background:#101114; box-shadow:0 24px 90px #0008; }
.gpe-header { min-height:64px; display:flex; align-items:center; justify-content:space-between; gap:16px; padding:10px 16px 10px 24px; }
.gpe-name { font-size:15px; font-weight:500; line-height:1.4; overflow-wrap:anywhere; }
.gpe-gallery .gpe-control { flex-shrink:0; display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; min-width:44px; padding:0; border:1px solid #ffffff30; border-radius:50%; color:#fff; background:#ffffff0d; cursor:pointer; font-family:Arial,sans-serif; font-size:24px; line-height:1; box-shadow:none; }
.gpe-gallery .gpe-close { font-size:30px; }
.gpe-gallery .gpe-control:hover { background:#ffffff25; color:#fff; border-color:#ffffff70; }
.gpe-stage { position:relative; height:min(65vh,650px); height:min(65dvh,650px); background:#08090a; touch-action:pan-y pinch-zoom; }
.gpe-gallery .gpe-slide { position:relative; width:100%; height:100%; margin:0; overflow:hidden; }
.gpe-gallery [hidden] { display:none !important; }
.gpe-gallery .gpe-photo { display:block; width:100%; height:100%; max-width:100%; border-radius:0; object-fit:var(--gpe-fit,contain); }
.gpe-gallery .gpe-caption { position:absolute; inset:auto 0 0; margin:0; padding:64px 32px 28px; color:#fff; background:linear-gradient(to bottom,transparent,rgba(0,0,0,var(--gpe-overlay)) 70%); font-size:clamp(18px,3vw,30px); font-weight:600; line-height:1.3; text-shadow:0 2px 6px #0009; overflow-wrap:anywhere; max-height:80%; overflow:auto; }
.gpe-footer { display:flex; justify-content:center; align-items:center; gap:24px; padding:12px 20px; }
.gpe-counter { font-size:14px; font-variant-numeric:tabular-nums; min-width:64px; text-align:center; color:#e5e7eb; }
@media(max-width:767px) {
    .gpe-gallery .gpe-dialog { padding:4px; width:calc(100% - 8px); }
    .gpe-shell { border-radius:12px; }
    .gpe-header { padding:8px 12px 8px 16px; }
    .gpe-stage { height:58vh; height:58dvh; }
    .gpe-gallery .gpe-caption { padding:48px 20px 20px; }
}
@media(prefers-reduced-motion:reduce) { .gpe-gallery .gpe-trigger { transition:none; } }