/* FlipReader — original UI system */
:root{
  --tap-44: 44px;
  --bg: #0b0b0c;
  --card: rgba(255,255,255,.06);
  --card2: rgba(255,255,255,.09);
  --stroke: rgba(255,255,255,.10);
  --text: rgba(255,255,255,.92);
  --muted: rgba(255,255,255,.70);
  --muted2: rgba(255,255,255,.55);
  --accent: rgba(255,255,255,.92);
  --shadow: 0 20px 70px rgba(0,0,0,.45);
  --shadow2: 0 10px 30px rgba(0,0,0,.35);
  --radius: 16px;
  --radius2: 12px;
  --toolbarH: 52px;
  /* Total top bar stack height (height + paddings). Used to keep the toolbar visible when the mobile drawer opens. */
  --topbarTotalH: calc(var(--toolbarH) + var(--safeTop) + var(--safeTop) + 20px);
  --safeTop: env(safe-area-inset-top, 0px);
  --safeBottom: env(safe-area-inset-bottom, 0px);
  --safeLeft: env(safe-area-inset-left, 0px);
  --safeRight: env(safe-area-inset-right, 0px);
  color-scheme: dark;
}
@media (prefers-color-scheme: light){
  :root{
  --tap-44: 44px;
    --bg:#f6f6f7;
    --card: rgba(255,255,255,.85);
    --card2: rgba(255,255,255,.96);
    --stroke: rgba(0,0,0,.10);
    --text: rgba(0,0,0,.88);
    --muted: rgba(0,0,0,.65);
    --muted2: rgba(0,0,0,.48);
    --shadow: 0 25px 80px rgba(0,0,0,.12);
    --shadow2: 0 12px 35px rgba(0,0,0,.10);
    color-scheme: light;
  }
}
/* iOS/iPadOS: hard-lock the viewport so sideways drags never pan the whole app */
html,body{
  height:100%;
  margin:0;
  background:var(--bg);
  color:var(--text);
  overflow:hidden;
  overscroll-behavior:none;
  width:100%;
  position:fixed;
  inset:0;
  touch-action: pan-y;
}
*{box-sizing:border-box}
a{color:inherit}
button, input{font:inherit; color:inherit}
#app{height:100%; display:flex; flex-direction:column; width:100%; overflow:hidden;}

/* Top bar */
.topbar{
  position:sticky; top:0; z-index:50;
  height: calc(var(--toolbarH) + var(--safeTop));
  padding: calc(var(--safeTop) + 10px) calc(14px + var(--safeRight)) 10px calc(14px + var(--safeLeft));
  display:flex; gap:10px; align-items:center;
  background: linear-gradient(to bottom, rgba(0,0,0,.32), rgba(0,0,0,0));
  backdrop-filter: blur(14px);

  max-width: 100vw; box-sizing:border-box; overflow:hidden;
}

.topbar .title{
  font-weight:650; letter-spacing:.2px;
  display:flex; align-items:center; gap:10px;
  min-width: 120px;
  white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis;
}
.badge{
  font-size:12px; padding:6px 10px; border-radius:999px;
  border:1px solid var(--stroke);
  background: var(--card);
  color: var(--muted);
}
.toolbar{
  display:flex; gap:8px; align-items:center;
  margin-left:auto;

  flex:1 1 auto;
  overflow-x:auto; overflow-y:hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  touch-action: pan-x;
  padding: 2px 2px 2px 2px;

  position:relative;}

/* Toolbar edge fades (safer than mask-image on iOS; never steals taps) */
.toolbar{position:relative;}
.toolbar::before,
.toolbar::after{
  content:"";
  position:absolute;
  top:0; bottom:0;
  width:18px;
  pointer-events:none;
  z-index:2;
  opacity:.85;
}
.toolbar::before{
  left:0;
  background: linear-gradient(to right, rgba(0,0,0,.55), rgba(0,0,0,0));
}
.toolbar::after{
  right:0;
  background: linear-gradient(to left, rgba(0,0,0,.55), rgba(0,0,0,0));
}

.toolbar::-webkit-scrollbar{display:none;}

.btn{
  height:40px; min-width:40px;
  padding:0 12px;
  border-radius: 12px;
  border:1px solid var(--stroke);
  background: var(--card);
  box-shadow: var(--shadow2);
  display:inline-flex; align-items:center; justify-content:center;
  cursor:pointer;
  user-select:none;
  -webkit-tap-highlight-color: transparent;
}
.btn:hover{background:var(--card2)}
.btn:active{transform: translateY(1px)}
.btn svg{width:18px; height:18px}
.btn.primary{background:rgba(255,255,255,.14)}
.btn.text{gap:10px}
.btn.small{height:36px; border-radius: 11px}
.btn[disabled]{opacity:.5; cursor:not-allowed; transform:none}
.sep{width:1px; height:28px; background:var(--stroke); margin:0 4px}

/* Main layout */
.shell{flex:1; display:flex; min-height:0; position:relative}
.drawer{
  width: 360px; max-width: 92vw;
  border-right:1px solid var(--stroke);
  /* Glass surface (desktop/large screens) */
  background: rgba(18,18,19,.42);
  -webkit-backdrop-filter: blur(22px) saturate(160%);
  backdrop-filter: blur(22px) saturate(160%);
  display:flex; flex-direction:column;
  min-height:0;
}
/* Treat iPad/tablet as "mobile" for layout so the drawer becomes an overlay (full-width reader). */
@media (max-width: 1200px){
  .drawer{
    /* Mobile/iPad: bottom sheet that stops at the topbar edge (keeps toolbar visible + usable) */
    position:fixed;
    left:0; right:0; bottom:0;
    top: var(--topbarTotalH);
    width: 100%;
    max-width: none;
    height: calc(100dvh - var(--topbarTotalH));
    border-right:none;
    border-top:1px solid var(--stroke);
    transform: translateY(105%);
    transition: transform .22s ease;
    border-radius: 22px 22px 0 0;
    overflow:hidden;
    z-index:60;
    /* Restore original glass tone (better readability + classic iOS sheet feel) */
    background: rgba(0,0,0,.18);
    -webkit-backdrop-filter: blur(18px) saturate(160%);
    backdrop-filter: blur(18px) saturate(160%);
    box-shadow: 0 -26px 90px rgba(0,0,0,.55);
  }
  /* No scrim layer here: keep the clean original glass. */
  .drawer.open{transform: translateY(0)}
  .drawerHead{
    padding-top: calc(14px + var(--safeTop));
    padding-left: calc(14px + var(--safeLeft));
    padding-right: calc(14px + var(--safeRight));
  }
  .drawerBody{ padding-bottom: calc(18px + var(--safeBottom)); }
  .tabs{
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .tabs::-webkit-scrollbar{display:none}

  /* Safety: closed drawer must not steal taps */
  .drawer{pointer-events:auto;}
  .drawer:not(.open){pointer-events:none;}
  .drawer.open{pointer-events:auto;}
}
.drawerHead{
  display:flex; align-items:center; justify-content:space-between;
  padding: 14px 14px 10px;
  border-bottom:1px solid var(--stroke);
}
.tabs{display:flex; gap:6px; flex-wrap:wrap}
.tab{
  height:34px; padding:0 12px;
  border-radius: 999px;
  border:1px solid var(--stroke);
  background: var(--card);
  color: var(--muted);
  cursor:pointer;
}
.tab.active{background: rgba(255,255,255,.14); color: var(--text)}
.drawerBody{flex:1; min-height:0; overflow:auto; padding: 12px 12px 18px}
.panel{display:none}
.panel.active{display:block}
.panel h3{margin: 10px 6px 10px; font-size: 14px; color: var(--muted); font-weight:650}

/* Viewer */
.viewerWrap{flex:1; min-width:0; display:flex; flex-direction:column}
.viewer{
  flex:1; min-height:0;
  display:flex; align-items:center; justify-content:center;
  position:relative;
  padding: 10px calc(14px + var(--safeRight)) calc(14px + var(--safeBottom)) calc(14px + var(--safeLeft));
}
.stage{
  position:relative;
  width:min(1100px, 100%);
  height:min(78vh, 100%);
  max-height: calc(100% - 0px);
  display:flex; align-items:center; justify-content:center;
  border-radius: 18px;
}
.paper{
  position:relative;
  width: 100%;
  height: 100%;
  display:flex;
  justify-content:center;
  align-items:center;
  gap: 18px;
  perspective: 1400px;
}

/* Native PDF fallback (when PDF.js isn't bundled).
   Uses the browser's built-in PDF renderer inside an iframe.
   We still apply the app's zoom transform for the +/- buttons.
*/
.nativeWrap{
  position:absolute;
  inset:0;
  border-radius: 18px;
  overflow:hidden;
  background: #0f0f10;
}
.nativeFrame{
  width:100%;
  height:100%;
  border:0;
  display:block;
  transform: scale(var(--userZoom, 1));
  transform-origin: center center;
}
.page{
  position:relative;
  height: 100%;
  display:flex;
  align-items:center;
  justify-content:center;
  background: rgba(255,255,255,.02);
  border:1px solid var(--stroke);
  border-radius: 14px;
  box-shadow: var(--shadow);
  overflow:hidden;
  touch-action: none;
}
.page canvas{
  display:block;
  width:100%;
  height:100%;
}
.page.single{width: min(720px, 100%); }
.page.spread{width: min(520px, 49%); }
.pageLabel{
  position:absolute; left:12px; top:10px;
  font-size:12px; color: var(--muted2);
  background: rgba(0,0,0,.18);
  border:1px solid var(--stroke);
  padding: 6px 10px;
  border-radius: 999px;
  backdrop-filter: blur(10px);
}

/* Flip animation layers */
.flipLayer{
  position:absolute;
  inset:0;
  transform-origin: left center;
  will-change: transform;
  backface-visibility: hidden;
}
.flipShadow{
  position:absolute; inset:0;
  background: linear-gradient(to right, rgba(0,0,0,.24), rgba(0,0,0,0));
  opacity:0;
  pointer-events:none;
}


/* iBooks-like page curl (PDF.js mode) */
.behindPage{
  pointer-events:none;
  z-index: 19;
  border-radius: 14px;
  overflow:hidden;
  box-shadow: var(--shadow);
}
.behindPage canvas{
  width:100%;
  height:100%;
  display:block;
  filter: saturate(1.02) contrast(1.02);
}

.curlWrap{
  pointer-events:none;
  z-index: 20;
  border-radius: 14px;
  overflow: visible;
  perspective: 1600px;
}
.curlSheet{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  transform-style: preserve-3d;
  will-change: transform;
}
.curlFace{
  position:absolute;
  inset:0;
  border-radius: 14px;
  background-repeat:no-repeat;
  background-size: 100% 100%;
  backface-visibility:hidden;
}
.curlFront{
  transform: translateZ(0.5px);
  box-shadow:
    0 20px 55px rgba(0,0,0,.32),
    0 2px 10px rgba(0,0,0,.25);
}
.curlBack{
  transform: rotateY(180deg) translateZ(0.5px) scaleX(-1);
  filter: brightness(.92) contrast(.98);
}
.curlFront::after,
.curlBack::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius: 14px;
  pointer-events:none;
}
.curlFront::after{
  /* subtle paper curvature + edge light */
  background:
    radial-gradient(120% 90% at 96% 50%, rgba(255,255,255,.22), rgba(255,255,255,0) 55%),
    linear-gradient(to left, rgba(255,255,255,.14), rgba(255,255,255,0) 35%);
  mix-blend-mode: screen;
  opacity: .55;
}
.curlBack::after{
  background:
    linear-gradient(to right, rgba(0,0,0,.20), rgba(0,0,0,0) 45%),
    radial-gradient(120% 90% at 4% 50%, rgba(0,0,0,.18), rgba(0,0,0,0) 60%);
  opacity: .75;
}

.curlEdge{
  position:absolute;
  top:0; bottom:0;
  width: 16px;
  right:-8px;
  border-radius: 16px;
  background:
    linear-gradient(to right, rgba(255,255,255,.55), rgba(255,255,255,0) 55%),
    linear-gradient(to left, rgba(0,0,0,.30), rgba(0,0,0,0) 60%);
  filter: blur(.2px);
  opacity: .55;
  transform: translateZ(1px);
  pointer-events:none;
}

/* Bottom controls */
.bottombar{
  position:sticky; bottom:0; z-index:40;
  padding: 10px calc(14px + var(--safeRight)) calc(10px + var(--safeBottom)) calc(14px + var(--safeLeft));
  display:flex; align-items:center; gap:10px;
  background: linear-gradient(to top, rgba(0,0,0,.32), rgba(0,0,0,0));
  backdrop-filter: blur(14px);
}
.pageCtl{display:flex; align-items:center; gap:8px; flex:1}
.slider{
  flex:1;
  appearance:none;
  -webkit-appearance:none;
  appearance:none;
  height: 28px;                /* big hit area for thumbs */
  background:
    linear-gradient(to right, rgba(255,255,255,.22), rgba(255,255,255,.22)) center / 100% 4px no-repeat;
  border-radius: 999px;
  outline:none;
  touch-action: pan-x;         /* allow horizontal scrubbing */
  -webkit-tap-highlight-color: transparent;

}
.slider::-webkit-slider-thumb{
  appearance:none;
  border-radius: 999px;
  width: 22px; height: 22px;
  border-radius: 999px;
  border:1px solid rgba(255,255,255,.35);
  background: rgba(255,255,255,.92);
  box-shadow: 0 10px 22px rgba(0,0,0,.35), 0 2px 8px rgba(0,0,0,.22);

}
.counter{
  display:flex; align-items:center; gap:8px;
  padding: 0 10px;
  height:40px;
  border-radius: 12px;
  border:1px solid var(--stroke);
  background: var(--card);
  box-shadow: var(--shadow2);
}
.counter input{
  width: 54px;
  border:none;
  outline:none;
  background:transparent;
  color: var(--text);
  font-weight:650;
  text-align:right;
}
.counter span{color: var(--muted); font-size:12px}

/* Lists */
.grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:10px;
}
@media (max-width: 420px){
  .grid{grid-template-columns: repeat(2, 1fr);}
}
.thumb{
  border:1px solid var(--stroke);
  background: var(--card);
  border-radius: 12px;
  overflow:hidden;
  box-shadow: var(--shadow2);
  cursor:pointer;
  position:relative;
}
.thumb canvas{width:100%; height:auto; display:block}
.thumb .n{
  position:absolute; left:8px; top:8px;
  font-size:11px; color: var(--muted2);
  padding: 5px 8px; border-radius: 999px;
  border:1px solid var(--stroke);
  background: rgba(0,0,0,.18);
  backdrop-filter: blur(10px);
}
.thumb.active{outline: 2px solid rgba(255,255,255,.45); outline-offset: 2px}

.list{
  display:flex; flex-direction:column; gap:8px;
}
.item{
  border:1px solid var(--stroke);
  background: var(--card);
  border-radius: 14px;
  padding: 12px 12px;
  cursor:pointer;
}
.item:hover{background:var(--card2)}
.item .t{font-weight:650; font-size:13px}
.item .s{margin-top:6px; color: var(--muted); font-size:12px; line-height:1.35}
.kbd{
  font-size:11px; color: var(--muted2);
  border:1px solid var(--stroke);
  padding: 3px 7px; border-radius: 8px;
  background: rgba(255,255,255,.05);
}

.toast{
  position: fixed;
  left:50%;
  transform: translateX(-50%);
  bottom: calc(18px + var(--safeBottom));
  background: rgba(0,0,0,.55);
  color: rgba(255,255,255,.92);
  border:1px solid rgba(255,255,255,.12);
  border-radius: 999px;
  padding: 10px 14px;
  backdrop-filter: blur(14px);
  box-shadow: var(--shadow2);
  font-size: 13px;
  opacity:0;
  pointer-events:none;
  transition: opacity .18s ease, transform .18s ease;
  z-index: 100;
}
.toast.show{opacity:1; transform: translateX(-50%) translateY(-2px);}

.modalBackdrop{
  position:fixed; inset:0; background: rgba(0,0,0,.55);
  opacity:0; pointer-events:none; transition: opacity .18s ease;
  z-index:55;
}
.modalBackdrop.show{opacity:1; pointer-events:auto}
.help{
  font-size: 12px;
  color: var(--muted);
  line-height: 1.45;
  padding: 10px 6px;
}
.smallRow{display:flex; gap:8px; flex-wrap:wrap; align-items:center}

/* Apple-grade input + search row */
.in{
  height: var(--tap-44);
  border-radius: 14px;
  border: 1px solid var(--stroke);
  /* Glassy input surface */
  background: rgba(255,255,255,.08);
  color: var(--text);
  padding: 0 14px;
  outline: none;
  min-width: 0;
}
.in::placeholder{color: rgba(255,255,255,.55)}
.in:focus{
  border-color: rgba(255,255,255,.22);
  box-shadow: 0 0 0 4px rgba(255,255,255,.08);
}

.searchRow{
  display:grid;
  grid-template-columns: 1fr var(--tap-44) var(--tap-44);
  gap: 10px;
  padding: 8px 6px 12px;
  align-items:center;
}
.searchRow .btn{height: var(--tap-44); min-width: var(--tap-44); border-radius: 14px; padding:0}
.searchRow #btnBuildIndex{grid-column: 1 / -1; justify-self:start; height: 40px; min-width: 0; padding: 0 12px; border-radius: 12px;}
@media (min-width: 900px){
  .searchRow{grid-template-columns: 1fr var(--tap-44) var(--tap-44) auto;}
  .searchRow #btnBuildIndex{grid-column:auto; justify-self:end; height: var(--tap-44); }
}


/* Mobile fit/overflow fixes */
html, body { overscroll-behavior: none; }
@supports (-webkit-touch-callout: none) {
  html, body { -webkit-text-size-adjust: 100%; }
}

/* Let the toolbar scroll horizontally on small screens instead of clipping */
.topbar { min-width: 0; }
.title { min-width: 0; max-width: 40vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.toolbar { min-width: 0; flex: 1; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.toolbar::-webkit-scrollbar { display: none; }

/* Compact bottom bar on phones */
@media (max-width: 520px){
  .topbar{ gap:8px; padding: 10px calc(10px + var(--safeRight)) 10px calc(10px + var(--safeLeft)); }
  .btn{ height:40px; min-width:40px; padding: 0 12px; border-radius: 14px; }
  .btn.small{ height:38px; min-width:38px; padding: 0 10px; }
  .sep{ height:24px; }
  .viewer{ padding: 10px calc(10px + var(--safeRight)) calc(12px + var(--safeBottom)) calc(10px + var(--safeLeft)); }
  .bottombar{ gap:8px; padding: 10px calc(10px + var(--safeRight)) calc(10px + var(--safeBottom)) calc(10px + var(--safeLeft)); }
  .counter{ height:38px; padding: 0 8px; border-radius: 12px; }
  .counter input{ width: 44px; font-size: 14px; }
  #pillZoom{ display:none; }
}

/* Prevent accidental horizontal panning of the whole UI on iOS */
body{ overflow-x:hidden; }

.toolbar .btn{flex:0 0 auto;}

/* Prevent horizontal panning outside toolbar */
#app, .content, .stage, .stage-wrap, .viewer, .book{touch-action: pan-y;}


/* Search active hit */
#searchMeta{padding:10px 2px 0 2px; opacity:.85; font-size:12px;}
.panel .list .item.active{outline:2px solid rgba(255,255,255,.28); background:rgba(255,255,255,.06);}

/* Firefox range styling */
.slider::-moz-range-track{
  height:4px;
  border:none;
  background: rgba(255,255,255,.22);
  border-radius:999px;
}
.slider::-moz-range-thumb{
  width:22px; height:22px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.35);
  background: rgba(255,255,255,.92);
  box-shadow: 0 10px 22px rgba(0,0,0,.35), 0 2px 8px rgba(0,0,0,.22);
}