:root{
  --primary:#262626;   /* toolbar (dark, like Flip PDF Plus) */
  --bg:#e9ebee;        /* light gray stage so white pages stand out */
  --bg2:#f7f8fa;
  --panel:#ffffff;
  --tb-h:56px;
  --pb-h:52px;
  --text:#33373d;
}
*{box-sizing:border-box}
[hidden]{display:none !important}
html,body{margin:0;height:100%;overflow:hidden;background:var(--bg);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Malgun Gothic","Apple SD Gothic Neo",sans-serif;
  color:var(--text);-webkit-tap-highlight-color:transparent}
#app{display:flex;flex-direction:column;height:100%}

/* Toolbar */
#toolbar{height:var(--tb-h);flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;
  padding:0 12px;background:var(--primary);color:#fff;box-shadow:0 2px 8px rgba(0,0,0,.25);z-index:30}
.tb-left{display:flex;align-items:center;gap:10px;min-width:0}
#logo{height:38px;width:auto;max-width:60vw;object-fit:contain}
.tb-right{display:flex;align-items:center;gap:4px}
.tb-btn{appearance:none;border:0;background:rgba(255,255,255,.14);color:#fff;width:38px;height:38px;
  border-radius:8px;font-size:18px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;
  transition:background .15s}
.tb-btn:hover{background:rgba(255,255,255,.28)}
.tb-btn:active{transform:translateY(1px)}
.tb-btn[hidden]{display:none}

/* Stage */
#stage{position:relative;flex:1 1 auto;display:flex;align-items:center;justify-content:center;min-height:0;
  background:radial-gradient(ellipse at center,var(--bg2) 0%,var(--bg) 100%)}
#bookWrap{width:100%;height:100%;display:flex;align-items:center;justify-content:center;padding:14px}
#book{max-width:100%;max-height:100%}
#book .stf__parent{margin:0 auto;filter:drop-shadow(0 8px 22px rgba(0,0,0,.28))}
.stf__item img{width:100%;height:100%;display:block}

.nav-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:20;width:46px;height:66px;
  background:#ffffff;color:#4a4f57;border:1px solid #d3d7dd;box-shadow:0 2px 10px rgba(0,0,0,.14);
  font-size:34px;line-height:1;cursor:pointer;border-radius:8px;opacity:.92;
  transition:opacity .15s,background .15s}
.nav-arrow:hover{opacity:1;background:#eef0f3}
.nav-arrow.prev{left:10px}
.nav-arrow.next{right:10px}

/* Page bar (light, like Flip PDF Plus) */
#pagebar{height:var(--pb-h);flex:0 0 auto;display:flex;align-items:center;justify-content:center;gap:16px;
  background:#fafbfc;border-top:1px solid #e1e4e8;z-index:30}
.pb-btn{background:#fff;border:1px solid #c9cdd3;color:var(--text);border-radius:20px;
  padding:6px 14px;font-size:13px;cursor:pointer}
.pb-btn:hover{background:#eef0f3}
.pb-center{display:flex;align-items:center;gap:6px;font-size:13px;color:#565b63}
#pageInput{width:46px;text-align:center;background:#fff;border:1px solid #c9cdd3;
  color:#222;border-radius:6px;padding:5px 4px;font-size:13px}

/* Drawer */
.drawer{position:fixed;top:0;right:0;height:100%;width:min(340px,86vw);background:var(--panel);color:#1a1a1a;
  z-index:50;box-shadow:-4px 0 24px rgba(0,0,0,.35);display:flex;flex-direction:column;transform:translateX(0)}
.drawer[hidden]{display:none}
.drawer-head{display:flex;align-items:center;justify-content:space-between;padding:12px 14px;
  border-bottom:1px solid #eee;font-weight:700;background:#fafafa}
.drawer-head .tb-btn{background:#e9ecef;color:#333}
.drawer-head .tb-btn:hover{background:#dde1e6}
.panel{overflow:auto;padding:10px;flex:1 1 auto}
.toc-item{display:flex;justify-content:space-between;gap:8px;padding:9px 10px;border-radius:8px;cursor:pointer;
  font-size:14px;color:#222}
.toc-item:hover{background:#f0f4ff}
.toc-item .pg{color:#888;font-size:12px;flex:0 0 auto}
/* Thumbnail strip (horizontal spread overlay, like Flip PDF Plus) */
#thumbStrip{position:fixed;left:0;right:0;top:50%;transform:translateY(-50%);background:var(--primary);z-index:45;
  padding:32px 12px 8px;box-shadow:0 10px 44px rgba(0,0,0,.4)}
#stripClose{position:absolute;top:6px;right:10px;width:30px;height:30px;border:0;border-radius:6px;
  background:rgba(255,255,255,.18);color:#fff;font-size:14px;line-height:1;cursor:pointer}
#stripClose:hover{background:rgba(255,255,255,.35)}
#stripScroll{overflow-x:auto;overflow-y:hidden}
#stripScroll::-webkit-scrollbar{height:8px}
#stripScroll::-webkit-scrollbar-track{background:rgba(255,255,255,.15);border-radius:4px}
#stripScroll::-webkit-scrollbar-thumb{background:rgba(255,255,255,.55);border-radius:4px}
#stripRow{display:flex;gap:28px;align-items:flex-end;width:max-content;padding:0 16px 10px}
.sp-item{cursor:pointer;text-align:center}
.sp-pages{display:flex;gap:2px;background:#fff;padding:2px;border:3px solid transparent;transition:border-color .15s}
.sp-item:hover .sp-pages{border-color:rgba(255,255,255,.75)}
.sp-item.active .sp-pages{border-color:#f6a821}
.sp-pages img{height:150px;width:auto;display:block}
.sp-label{margin-top:6px;font-size:12px;color:rgba(255,255,255,.92)}
#searchInput{width:100%;padding:10px;border:1px solid #ddd;border-radius:8px;font-size:14px;margin-bottom:8px}
.sr-item{padding:9px 10px;border-radius:8px;cursor:pointer;font-size:13px;border-bottom:1px solid #f0f0f0}
.sr-item:hover{background:#f0f4ff}
.sr-item b{color:var(--primary)}
.sr-pg{font-size:12px;color:#888;margin-bottom:2px}
.sr-empty{color:#999;font-size:13px;padding:10px}
mark{background:#ffe58a;padding:0 1px}
#scrim{position:fixed;inset:0;background:rgba(0,0,0,.35);z-index:40}
#scrim[hidden]{display:none}

/* Zoom overlay */
#zoomOverlay{position:fixed;inset:0;background:rgba(8,10,14,.95);z-index:60;display:flex;flex-direction:column}
#zoomOverlay[hidden]{display:none}
.zoom-toolbar{flex:0 0 auto;display:flex;justify-content:flex-end;gap:6px;padding:10px}
#zoomViewport{flex:1 1 auto;overflow:hidden;position:relative;cursor:grab;touch-action:none}
#zoomViewport.grabbing{cursor:grabbing}
#zoomImg{position:absolute;top:0;left:0;transform-origin:0 0;user-select:none;will-change:transform}

/* Loader */
#loader{position:fixed;inset:0;background:var(--bg2);z-index:80;display:flex;flex-direction:column;gap:14px;
  align-items:center;justify-content:center;color:#667}
#app:not(.loading) #loader{display:none}
.spinner{width:44px;height:44px;border:4px solid rgba(0,0,0,.1);border-top-color:var(--primary);
  border-radius:50%;animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* Mobile */
@media (max-width:640px){
  #logo{height:30px}
  .tb-btn{width:34px;height:34px;font-size:16px}
  .nav-arrow{display:none}
  #bookWrap{padding:6px}
  .sp-pages img{height:96px}
}