html.lb-lock body{position:fixed;left:0;right:0;width:100%;overflow:hidden}

.lb{position:fixed;inset:0;z-index:1000;display:none;background:var(--bg-sunken);overscroll-behavior:contain;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none}
.lb-on{display:block}

.lb-vp{position:absolute;left:0;right:0;top:0;bottom:calc(60px + var(--sp-3) * 2 + env(safe-area-inset-bottom,0px));overflow:hidden;touch-action:none;cursor:grab}
.lb-vp:active{cursor:grabbing}

.lb-track{position:absolute;inset:0;transform:translate3d(0,0,0);will-change:transform}

.lb-s{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:var(--sp-2);transform:translate3d(0,0,0)}
.lb-s.is-empty{display:none}

.lb-i{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;-webkit-user-drag:none;pointer-events:none;transition:opacity .12s ease}
.lb-s.is-load .lb-i{opacity:0}
.lb-s.is-err  .lb-i{display:none}

.lb-s::after{content:"";position:absolute;top:50%;left:50%;width:44px;height:44px;margin:-22px 0 0 -22px;border:4px solid var(--line-strong);border-top-color:var(--accent);border-radius:50%;opacity:0;pointer-events:none}
.lb-s.is-load::after{opacity:1;animation:lb-spin .8s linear infinite}
.lb-s.is-err::before{content:"Не удалось загрузить фото";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:var(--fg-muted);font:600 var(--fs-lg)/1.4 var(--font-body);text-align:center;white-space:nowrap}
@keyframes lb-spin{to{transform:rotate(360deg)}}

.lb-b{position:absolute;z-index:2;display:flex;align-items:center;justify-content:center;padding:0;border:1px solid var(--line-strong);border-radius:var(--r-md);background:var(--bg-elev);color:var(--fg);font-size:30px;line-height:1;cursor:pointer;touch-action:manipulation;box-shadow:var(--shadow-1);transition:transform .12s ease}
.lb-b:active{transform:scale(.94)}
.lb-x{top:calc(var(--sp-3) + env(safe-area-inset-top,0px));right:var(--sp-3);width:56px;height:56px;border-radius:50%;font-size:24px}
.lb-p,.lb-n{bottom:calc(var(--sp-3) + env(safe-area-inset-bottom,0px));width:calc(50% - 78px);max-width:220px;height:60px}
.lb-p{left:var(--sp-3)}
.lb-n{right:var(--sp-3)}

.lb-num{position:absolute;z-index:1;bottom:calc(var(--sp-3) + env(safe-area-inset-bottom,0px));left:50%;transform:translateX(-50%);height:60px;display:flex;align-items:center;padding:0 var(--sp-3);border-radius:var(--r-md);background:var(--bg-elev);color:var(--fg);font:700 var(--fs-lg)/1 var(--font-body);font-variant-numeric:tabular-nums;white-space:nowrap;pointer-events:none}

@media (min-width:1024px){
  .lb-vp{bottom:calc(60px + var(--sp-4) * 2)}
  .lb-s{padding:var(--sp-4) 100px}
  .lb-p,.lb-n{top:50%;bottom:auto;width:64px;height:64px;max-width:none;border-radius:50%;transform:translateY(-50%)}
  .lb-p{left:var(--sp-4)}
  .lb-n{right:var(--sp-4)}
  .lb-p:active,.lb-n:active{transform:translateY(-50%) scale(.94)}
  .lb-num{bottom:var(--sp-4)}
}

@media (prefers-reduced-motion:reduce){
  .lb-track,.lb-i{transition:none !important}
  .lb-s.is-load::after{animation:none}
}