:root{
  --bg:#f5f5f7; --card:#ffffff; --text:#1b1b1f; --muted:#8a8a8f;
  --line:#e3e3e8; --accent:#c8613b; --bar:rgba(255,255,255,.86);
  --safe-t:env(safe-area-inset-top); --safe-b:env(safe-area-inset-bottom);
  --safe-l:env(safe-area-inset-left); --safe-r:env(safe-area-inset-right);
}
body.theme-dark{
  --bg:#1b1b1f; --card:#2a2a30; --text:#e6e6ea; --muted:#8f8f97;
  --line:#3a3a42; --bar:rgba(28,28,32,.88);
}
body.theme-sepia{
  --bg:#c7edcc; --card:#d3efd6; --text:#2f3d33; --muted:#6d8471;
  --line:#b3d9b8; --bar:rgba(199,237,204,.92);
}

*{box-sizing:border-box; -webkit-tap-highlight-color:transparent;}
html,body{margin:0; height:100%;}
body{
  font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Helvetica Neue",Arial,sans-serif;
  background:var(--bg); color:var(--text);
  -webkit-text-size-adjust:100%; overscroll-behavior:none;
  transition:background .25s,color .25s;
}
button{font-family:inherit; cursor:pointer; border:none; background:none; color:inherit;}

.view{display:none; height:100dvh; flex-direction:column;}
.view.active{display:flex;}

/* ---------- 顶栏 ---------- */
.app-bar{
  display:flex; align-items:center; justify-content:space-between;
  padding:calc(var(--safe-t) + 12px) calc(var(--safe-r) + 16px) 12px calc(var(--safe-l) + 16px);
  position:sticky; top:0; z-index:5;
  background:var(--bar); backdrop-filter:saturate(180%) blur(18px);
  -webkit-backdrop-filter:saturate(180%) blur(18px); border-bottom:1px solid var(--line);
}
.app-bar-title{font-size:24px; font-weight:700;}
.app-bar-actions{display:flex; gap:8px;}
.icon-btn{
  font-size:15px; padding:8px 14px; border-radius:20px; color:var(--text);
  background:transparent; transition:background .15s;
}
.icon-btn:active{background:rgba(128,128,128,.18);}
.icon-btn.primary{background:var(--accent); color:#fff; font-weight:600;}

/* ---------- 书架 ---------- */
.shelf{
  flex:1; overflow-y:auto; -webkit-overflow-scrolling:touch;
  display:grid; grid-template-columns:repeat(auto-fill,minmax(120px,1fr));
  gap:20px 16px;
  padding:20px calc(var(--safe-r) + 16px) calc(var(--safe-b) + 30px) calc(var(--safe-l) + 16px);
  align-content:start;
}
.book{display:flex; flex-direction:column; gap:8px; position:relative;}
.book-cover{
  aspect-ratio:2/3; border-radius:10px; overflow:hidden; background:var(--card);
  box-shadow:0 6px 18px rgba(0,0,0,.16); position:relative;
  display:flex; align-items:center; justify-content:center; text-align:center;
}
.book-cover img{width:100%; height:100%; object-fit:cover;}
.book-cover .gen-cover{
  padding:12px; font-size:14px; font-weight:600; line-height:1.4;
  color:#fff; width:100%; height:100%; display:flex; align-items:center; justify-content:center;
}
.book-fmt{
  position:absolute; top:6px; left:6px; font-size:10px; font-weight:700;
  padding:2px 6px; border-radius:6px; background:rgba(0,0,0,.55); color:#fff; letter-spacing:.5px;
}
.book-prog{position:absolute; left:0; bottom:0; height:3px; background:var(--accent);}
.book-title{font-size:13px; line-height:1.35; color:var(--text);
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;}
.book-del{
  position:absolute; top:-8px; right:-8px; width:26px; height:26px; border-radius:50%;
  background:#e5484d; color:#fff; font-size:16px; line-height:26px; text-align:center;
  box-shadow:0 2px 6px rgba(0,0,0,.3); display:none;
}
.shelf.editing .book-del{display:block;}
.shelf.editing .book-cover{animation:wiggle .3s infinite alternate;}
@keyframes wiggle{from{transform:rotate(-1deg);}to{transform:rotate(1deg);}}

.empty-state{
  flex:1; display:none; flex-direction:column; align-items:center; justify-content:center;
  gap:10px; color:var(--muted); text-align:center; padding:0 30px;
}
.empty-state.show{display:flex;}
.empty-emoji{font-size:60px;}
.empty-state .hint{font-size:14px; max-width:280px;}
.btn-big{margin-top:16px; background:var(--accent); color:#fff; font-weight:600;
  font-size:16px; padding:14px 28px; border-radius:26px;}

/* ---------- 阅读器 ---------- */
#reader-view{background:var(--bg);}
.reader-bar{
  position:absolute; left:0; right:0; z-index:20;
  background:var(--bar); backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px);
  transition:transform .25s,opacity .25s; display:flex; align-items:center;
}
.reader-top{
  top:0; padding:calc(var(--safe-t) + 10px) calc(var(--safe-r) + 12px) 10px calc(var(--safe-l) + 12px);
  gap:8px; border-bottom:1px solid var(--line);
}
.reader-bottom{
  bottom:0; flex-direction:column; gap:6px;
  padding:10px calc(var(--safe-r) + 20px) calc(var(--safe-b) + 12px) calc(var(--safe-l) + 20px);
  border-top:1px solid var(--line);
}
.reader-view-hidebars .reader-top{transform:translateY(-105%); opacity:0; pointer-events:none;}
.reader-view-hidebars .reader-bottom{transform:translateY(105%); opacity:0; pointer-events:none;}
.reader-title{flex:1; text-align:center; font-size:15px; font-weight:600;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.reader-top-actions{display:flex; gap:4px;}
#progress-slider{width:100%; accent-color:var(--accent);}
.progress-label{font-size:12px; color:var(--muted);}

.reader-stage{position:absolute; inset:0; overflow:hidden;}
.reader-area{position:absolute; inset:0;}
.scroll-area{overflow-y:auto; -webkit-overflow-scrolling:touch;}
.txt-area{
  padding:calc(var(--safe-t) + 64px) 24px calc(var(--safe-b) + 40px);
  font-size:19px; line-height:1.9; white-space:pre-wrap; word-break:break-word;
  max-width:760px; margin:0 auto;
}
#pdf-area{text-align:center;}
#pdf-area.pdf-scroll{padding:calc(var(--safe-t) + 56px) 0 calc(var(--safe-b) + 30px); background:#333; overflow-y:auto;}
#pdf-area.pdf-scroll canvas{max-width:100%; height:auto; margin:0 auto 10px; display:block;
  box-shadow:0 2px 10px rgba(0,0,0,.4);}
#pdf-area.pdf-paged{padding:0; background:var(--bg); overflow:hidden;}
#pdf-area.pdf-night{filter:invert(1) hue-rotate(180deg);}
.pdf-stage{position:absolute; inset:0; overflow:hidden;}
.pdf-layer{position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  background:var(--bg); will-change:transform;}
.pdf-layer.flipping{transition:transform .36s cubic-bezier(.22,.61,.36,1);}
.pdf-layer.flipping::before{content:''; position:absolute; top:0; bottom:0; left:-26px; width:26px;
  background:linear-gradient(to right, rgba(0,0,0,0), rgba(0,0,0,.22));}
.pdf-canvas{max-width:100%; max-height:100%; background:#fff;
  box-shadow:0 4px 22px rgba(0,0,0,.28);}

.tap-zone{position:absolute; top:0; bottom:0; z-index:10;}
.tap-left{left:0; width:32%;}
.tap-right{right:0; width:32%;}
.tap-center{left:32%; width:36%;}

/* ---------- 面板 ---------- */
.panel{
  position:absolute; left:0; right:0; bottom:0; z-index:40;
  background:var(--card); border-top:1px solid var(--line);
  border-radius:18px 18px 0 0; padding:18px 20px calc(var(--safe-b) + 20px);
  transform:translateY(110%); transition:transform .25s; box-shadow:0 -6px 24px rgba(0,0,0,.18);
}
.panel.open{transform:translateY(0);}
.panel-row{display:flex; align-items:center; justify-content:space-between; padding:12px 0;}
.panel-label{font-size:15px; color:var(--muted);}
.seg{display:flex; gap:6px; background:var(--bg); padding:4px; border-radius:12px;}
.seg-btn{font-size:14px; padding:8px 14px; border-radius:9px; color:var(--text); transition:background .15s;}
.seg-btn.active{background:var(--accent); color:#fff;}
.seg-val{font-size:14px; min-width:52px; text-align:center; align-self:center; color:var(--text);}

.side-panel{
  position:absolute; top:0; bottom:0; left:0; width:min(80%,340px); z-index:40;
  background:var(--card); border-right:1px solid var(--line);
  transform:translateX(-105%); transition:transform .25s; display:flex; flex-direction:column;
  box-shadow:6px 0 24px rgba(0,0,0,.18);
}
.side-panel.open{transform:translateX(0);}
.side-panel-head{padding:calc(var(--safe-t) + 18px) 20px 14px; font-size:18px; font-weight:700;
  border-bottom:1px solid var(--line);}
.toc-list{flex:1; overflow-y:auto; padding:6px 0 calc(var(--safe-b) + 20px);}
.toc-item{padding:13px 20px; font-size:14px; line-height:1.4; border-bottom:1px solid var(--line);
  color:var(--text);}
.toc-item:active{background:rgba(128,128,128,.14);}
.toc-item.sub{padding-left:38px; color:var(--muted); font-size:13px;}

.overlay{position:fixed; inset:0; z-index:30; background:rgba(0,0,0,.35);
  opacity:0; pointer-events:none; transition:opacity .25s;}
.overlay.show{opacity:1; pointer-events:auto;}

.toast{position:fixed; left:50%; bottom:60px; transform:translateX(-50%) translateY(20px);
  background:rgba(0,0,0,.82); color:#fff; padding:11px 20px; border-radius:22px; font-size:14px;
  z-index:100; opacity:0; pointer-events:none; transition:opacity .25s,transform .25s; max-width:80%;}
.toast.show{opacity:1; transform:translateX(-50%) translateY(0);}