html.lpbk-open,html.lpbk-open body{overflow:hidden;}
.lpbk{position:fixed;inset:0;z-index:10000;display:flex;flex-direction:column;background:radial-gradient(ellipse at 50% 40%,#3a3836 0%,#1c1b1a 70%);color:#fff;font-family:inherit;}
.lpbk__bar{display:flex;align-items:center;gap:16px;padding:14px 22px;min-height:64px;}
.lpbk__title{flex:1;min-width:0;margin:0;font-size:15px;font-weight:700;letter-spacing:.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.lpbk__count{margin:0;font-family:var(--lpd-en,sans-serif);font-size:13px;letter-spacing:.12em;color:rgba(255,255,255,.7);white-space:nowrap;}
.lpbk__tools{flex:1;display:flex;justify-content:flex-end;align-items:center;gap:10px;}
.lpbk__save{display:inline-flex;align-items:center;height:38px;padding:0 18px;border-radius:999px;background:#fff;color:#141414;font-size:13px;font-weight:700;text-decoration:none;white-space:nowrap;}
.lpbk__save:hover{background:var(--lpd-red,#bf0007);color:#fff;}
.lpbk__close{position:relative;width:40px;height:40px;border:0;border-radius:50%;background:rgba(255,255,255,.12);cursor:pointer;}
.lpbk__close:hover{background:rgba(255,255,255,.24);}
.lpbk__close span::before,.lpbk__close span::after{content:"";position:absolute;left:50%;top:50%;width:16px;height:2px;background:#fff;border-radius:2px;}
.lpbk__close span::before{transform:translate(-50%,-50%) rotate(45deg);}
.lpbk__close span::after{transform:translate(-50%,-50%) rotate(-45deg);}
.lpbk__stage{flex:1;min-height:0;display:flex;align-items:center;gap:12px;padding:8px 18px 4px;}
.lpbk__holder{flex:1;min-width:0;height:100%;display:flex;align-items:center;justify-content:center;}
.lpbk__book{width:100%;height:100%;}
.lpbk__pg{background:#fff;overflow:hidden;}
.lpbk__pg img{display:block;width:100%;height:100%;object-fit:contain;background:#fff;user-select:none;-webkit-user-drag:none;pointer-events:none;}
.lpbk__nav{position:relative;flex:none;width:52px;height:52px;border:0;border-radius:50%;background:rgba(255,255,255,.12);cursor:pointer;transition:background .2s,opacity .2s;}
.lpbk__nav:hover{background:rgba(255,255,255,.26);}
.lpbk__nav:disabled{opacity:.25;cursor:default;}
.lpbk__nav span{position:absolute;left:50%;top:50%;width:12px;height:12px;border-top:2px solid #fff;border-right:2px solid #fff;}
.lpbk__nav--prev span{transform:translate(-30%,-50%) rotate(-135deg);}
.lpbk__nav--next span{transform:translate(-70%,-50%) rotate(45deg);}
.lpbk__hint{margin:0;padding:6px 16px 16px;text-align:center;font-size:12px;color:rgba(255,255,255,.5);}
html.lpbk-open .lpbk{touch-action:manipulation;}
.lpbk__zoombtn,.lpbk__zbar button{display:inline-flex;align-items:center;gap:8px;height:38px;padding:0 16px;border:0;border-radius:999px;background:rgba(255,255,255,.14);color:#fff;font:inherit;font-size:13px;font-weight:700;cursor:pointer;white-space:nowrap;}
.lpbk__zoombtn:hover,.lpbk__zbar button:hover{background:rgba(255,255,255,.26);}
.lpbk__zbar button:disabled{opacity:.35;cursor:default;}
.lpbk__zbar{display:flex;gap:6px;}
.lpbk__zbar[hidden],.lpbk__zoombtn[hidden]{display:none;}
.lpbk__zminus,.lpbk__zplus{width:38px;justify-content:center;padding:0 !important;font-size:18px !important;}
.lpbk__zic{position:relative;width:13px;height:13px;border:2px solid #fff;border-radius:50%;box-sizing:border-box;}
.lpbk__zic::after{content:"";position:absolute;right:-5px;bottom:-4px;width:6px;height:2px;background:#fff;border-radius:2px;transform:rotate(45deg);}
.lpbk__zoom{position:absolute;left:0;right:0;top:64px;bottom:0;z-index:5;overflow:auto;background:#1c1b1a;cursor:grab;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;}
.lpbk__zoom.is-drag{cursor:grabbing;}
.lpbk__zin{display:flex;justify-content:center;gap:0;width:max-content;min-width:100%;padding:16px;box-sizing:border-box;}
.lpbk__zin img{display:block;height:auto;max-width:none;background:#fff;user-select:none;-webkit-user-drag:none;}
.lpbk.is-zoom .lpbk__stage,.lpbk.is-zoom .lpbk__hint{visibility:hidden;}
.lpbk__znav{position:absolute;top:50%;z-index:6;width:52px;height:52px;margin-top:-26px;border:0;border-radius:50%;background:rgba(20,20,20,.62);box-shadow:0 6px 20px rgba(0,0,0,.25);cursor:pointer;transition:background .2s,opacity .2s;}
.lpbk__znav:hover{background:rgba(20,20,20,.85);}
.lpbk__znav:disabled{opacity:.2;cursor:default;}
.lpbk__znav span{position:absolute;left:50%;top:50%;width:12px;height:12px;border-top:2px solid #fff;border-right:2px solid #fff;}
.lpbk__znav--prev{left:18px;}
.lpbk__znav--next{right:30px;}
.lpbk__znav--prev span{transform:translate(-30%,-50%) rotate(-135deg);}
.lpbk__znav--next span{transform:translate(-70%,-50%) rotate(45deg);}
@media (max-width:767px){
  .lpbk__zoombtn{height:34px;padding:0 12px;font-size:12px;}
  .lpbk__zbar button{height:34px;padding:0 12px;font-size:12px;}
  .lpbk__zminus,.lpbk__zplus{width:34px;}
  .lpbk.is-zoom .lpbk__title,.lpbk.is-zoom .lpbk__count,.lpbk.is-zoom .lpbk__save{display:none;}
  .lpbk.is-zoom .lpbk__tools{flex:1;}
  .lpbk__znav{top:auto;bottom:22px;margin-top:0;width:46px;height:46px;}
  .lpbk__znav--prev{left:14px;}
  .lpbk__znav--next{right:14px;}
  .lpbk__bar{padding:10px 12px;min-height:56px;gap:10px;}
  .lpbk__title{font-size:13px;}
  .lpbk__tools{flex:none;}
  .lpbk__save{height:34px;padding:0 14px;font-size:12px;}
  .lpbk__close{width:36px;height:36px;}
  .lpbk__stage{padding:4px 8px;gap:0;}
  .lpbk__nav{position:absolute;bottom:20px;width:44px;height:44px;z-index:2;background:rgba(0,0,0,.45);}
  .lpbk__nav--prev{left:14px;}
  .lpbk__nav--next{right:14px;}
  .lpbk__hint{padding:4px 70px 26px;}
}