/* ============================================================================
   open墨读 · style.css
   纸感浅色界面：设备是主体，控件退到后面
   ========================================================================= */
:root{
  --desk:#DCD9D2;
  --body:#F7F5F0;
  --card:#FCFAF6;
  --ink:#1B1B19;
  --ink2:#4A4944;
  --dim:#7C7970;
  --line:#D7D3CB;
  --line2:#E5E2DA;
  --accent:#0F6E56;
  --accent-2:#0B5A46;
  --accent-soft:#E7EFEA;
  --warn:#A3452D;
  --sat:env(safe-area-inset-top,0px);
  --sab:env(safe-area-inset-bottom,0px);
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}

*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html,body{height:100%}
body{
  background:var(--desk);color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;
  font-size:14px;line-height:1.55;
  display:flex;flex-direction:column;overflow:hidden;
  -webkit-font-smoothing:antialiased;
  overscroll-behavior:none;
}
button{font-family:inherit;color:inherit;cursor:pointer;border:0;background:none}
.hidden{display:none!important}
.sp{flex:1 1 auto}

#app{flex:1 1 auto;display:flex;flex-direction:column;min-height:0}
.view{flex:1 1 auto;display:flex;flex-direction:column;min-height:0}

/* ==================== 书架 ==================== */
.topbar{
  flex:0 0 auto;display:flex;align-items:center;gap:10px;
  padding:calc(12px + var(--sat)) 16px 12px;
  background:var(--body);border-bottom:1px solid var(--line);
}
.brand{display:flex;align-items:center;gap:8px;font-size:15px;font-weight:600;letter-spacing:-.01em}
.brand i{
  width:9px;height:9px;border-radius:50%;background:var(--accent);
  box-shadow:0 0 0 3px rgba(15,110,86,.14);display:block;
}
.tb{
  font-size:12.5px;padding:7px 12px;border-radius:8px;
  border:1px solid var(--line);background:var(--card);color:var(--ink2);
  transition:background .15s,border-color .15s;
}
.tb:active{background:#EFEBE3}
.tb.primary{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:600}
.tb.primary:active{background:var(--accent-2)}

.lib-body{
  flex:1 1 auto;overflow-y:auto;-webkit-overflow-scrolling:touch;
  padding:16px 16px calc(28px + var(--sab));
}

.spec{border:1px solid var(--line);border-radius:14px;background:var(--card);padding:14px 15px}
.spec-row{display:flex;gap:8px}
.spec-cell{flex:1;text-align:center;padding:2px 0}
.spec-cell b{display:block;font-size:17px;font-weight:600;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.spec-cell span{font-size:10.5px;color:var(--dim);letter-spacing:.04em}
.spec p{font-size:12px;color:var(--dim);line-height:1.7;margin-top:12px;padding-top:12px;border-top:1px solid var(--line2)}

.sect{
  display:flex;align-items:center;gap:8px;
  font-size:11px;letter-spacing:.12em;color:var(--dim);
  margin:22px 2px 10px;text-transform:uppercase;
}
.sect span{letter-spacing:0;font-size:11px;color:var(--dim)}

.books{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.bk{
  position:relative;display:flex;gap:11px;padding:11px;
  border:1px solid var(--line);border-radius:13px;background:var(--card);
  text-align:left;transition:border-color .15s,transform .12s;
  contain:layout paint style;
}
.bk:active{transform:scale(.985);border-color:#C4BFB5}
.bk-cover{
  flex:0 0 44px;width:44px;height:60px;border-radius:4px;overflow:hidden;
  background:#EFEDE6;border:1px solid var(--line2);
  display:flex;flex-direction:column;justify-content:center;gap:3px;padding:8px 7px;
}
.bk-cover i{display:block;height:2px;border-radius:1px;background:#B9B6AE}
.bk-cover i:nth-child(1){width:100%;background:#3A3936}
.bk-cover i:nth-child(2){width:86%}
.bk-cover i:nth-child(3){width:92%}
.bk-cover i:nth-child(4){width:64%}
.bk-cover i:nth-child(5){width:80%;background:#0F6E56}

.bk-info{min-width:0;flex:1 1 auto;display:flex;flex-direction:column}
.bk-t{
  font-size:13.5px;font-weight:600;line-height:1.35;color:var(--ink);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  padding-right:16px;word-break:break-all;
}
.bk-m{font-size:10.5px;color:var(--dim);margin-top:4px;font-variant-numeric:tabular-nums}
.bk-p{margin-top:auto;padding-top:7px}
.bk-bar{height:2px;border-radius:2px;background:#E4E1D9;overflow:hidden}
.bk-bar i{display:block;height:100%;background:var(--accent);border-radius:2px}
.bk-x{
  position:absolute;top:6px;right:6px;width:22px;height:22px;border-radius:50%;
  color:#B4B1A8;font-size:12px;line-height:22px;text-align:center;
}
.bk-x:active{background:#F0ECE4;color:var(--warn)}
.bk-x.armed{background:#FBEEEA;color:var(--warn);font-size:10px;font-weight:700}

.empty{text-align:center;padding:30px 10px 10px;color:var(--dim)}
.em-ico{
  width:52px;height:52px;margin:0 auto 12px;border-radius:14px;
  background:var(--card);border:1px solid var(--line);
  font-size:22px;line-height:50px;color:#B9B5AB;
}
.empty b{display:block;font-size:14px;color:var(--ink2);margin-bottom:6px;font-weight:600}
.empty p{font-size:12.5px;line-height:1.7;max-width:280px;margin:0 auto}
.em-btns{display:flex;gap:9px;justify-content:center;margin-top:16px}
.btn{
  padding:10px 16px;border-radius:10px;border:1px solid var(--line);
  background:var(--card);font-size:13px;color:var(--ink2);
}
.btn:active{background:#EFEBE3}
.btn.line{background:transparent;border-color:var(--accent);color:var(--accent);font-weight:600}
.btn.wide{width:100%;padding:12px;margin-top:6px}

.fine{font-size:11px;color:#A8A59C;line-height:1.7;margin-top:18px;text-align:center}

/* ==================== 阅读 ==================== */
.rbar{
  flex:0 0 auto;display:flex;align-items:center;gap:6px;
  background:var(--body);border-bottom:1px solid var(--line);
  transition:opacity .18s,transform .18s;
}
.rbar.top{padding:calc(8px + var(--sat)) 8px 8px}
.rbar.bot{
  border-bottom:0;border-top:1px solid var(--line);
  padding:8px 10px calc(8px + var(--sab));
  gap:8px;
}
.bars-off .rbar{opacity:0;pointer-events:none;transform:translateY(-4px)}
.bars-off .rbar.bot{transform:translateY(4px)}

.ic{
  flex:0 0 40px;width:40px;height:40px;border-radius:10px;
  font-size:17px;line-height:1;color:var(--ink2);
  display:flex;align-items:center;justify-content:center;
}
.ic:active{background:#EDE9E1}
#btnBack{font-size:24px;color:var(--accent)}

.rtitle{flex:1 1 auto;min-width:0;text-align:center}
.rtitle b{
  display:block;font-size:13px;font-weight:600;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.rtitle span{
  display:block;font-size:10.5px;color:var(--dim);margin-top:1px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}

.stage{
  flex:1 1 auto;min-height:0;display:flex;align-items:center;justify-content:center;
  padding:10px 12px;overflow:hidden;
}
.dev{
  display:flex;flex-direction:column;align-items:center;
  padding:14px 14px 32px;border-radius:18px;
  background:#F5F3EE;
  box-shadow:0 1px 2px rgba(0,0,0,.07),0 2px 4px rgba(0,0,0,.04),0 20px 40px -18px rgba(0,0,0,.3);
  position:relative;
}
.bezel{
  background:#AEACA7;border-radius:3px;padding:2px;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.22),inset 0 3px 10px rgba(0,0,0,.3);
  line-height:0;
}
#cv{
  display:block;background:#F4F3EF;border-radius:1px;
  touch-action:none;-webkit-user-select:none;user-select:none;
  -webkit-touch-callout:none;
}
.dev-brand{
  position:absolute;left:0;right:0;bottom:10px;text-align:center;
  font-size:8px;letter-spacing:.32em;color:#ABA89F;
  user-select:none;pointer-events:none;
}

.pgwrap{flex:1 1 auto;display:flex;align-items:center;gap:10px;min-width:0;padding:0 2px}
#prog{
  flex:1 1 auto;min-width:0;-webkit-appearance:none;appearance:none;
  height:4px;border-radius:3px;background:#D6D2C9;outline:none;
}
#prog::-webkit-slider-thumb{
  -webkit-appearance:none;width:16px;height:16px;border-radius:50%;
  background:var(--accent);border:2px solid var(--body);
  box-shadow:0 1px 4px rgba(0,0,0,.2);cursor:pointer;
}
#prog::-moz-range-thumb{
  width:13px;height:13px;border-radius:50%;background:var(--accent);
  border:2px solid var(--body);cursor:pointer;
}
#pgTxt{font-size:10.5px;color:var(--dim);font-variant-numeric:tabular-nums;white-space:nowrap}
.pgbtn{
  flex:0 0 auto;min-width:52px;height:34px;padding:0 10px;border-radius:9px;
  border:1px solid var(--line);background:var(--card);color:var(--ink2);
  font-size:12.5px;
}
.pgbtn:active{background:#EDE9E1}
.pgbtn.ghost{border-color:#CFCAC1;color:var(--accent)}

/* ==================== 弹层 ==================== */
.sheet{position:fixed;inset:0;z-index:60;display:flex;align-items:flex-end;justify-content:center}
.sheet-mask{position:absolute;inset:0;background:rgba(24,23,20,.34);animation:fade .18s ease}
@keyframes fade{from{opacity:0}to{opacity:1}}
.sheet-body{
  position:relative;width:100%;max-width:560px;max-height:86vh;
  display:flex;flex-direction:column;
  background:var(--body);border-radius:18px 18px 0 0;
  box-shadow:0 -12px 40px -12px rgba(0,0,0,.28);
  animation:up .22s cubic-bezier(.2,.9,.3,1);
  padding-bottom:var(--sab);
}
@keyframes up{from{transform:translateY(16px);opacity:.6}to{transform:none;opacity:1}}
.sheet-h{
  flex:0 0 auto;display:flex;align-items:center;gap:10px;
  padding:14px 16px 12px;border-bottom:1px solid var(--line);
}
.sheet-h b{font-size:14.5px;font-weight:600}
.sheet-sub{font-size:11px;color:var(--dim)}
.sheet-h .x{
  margin-left:auto;width:30px;height:30px;border-radius:50%;
  font-size:13px;color:var(--dim);background:#EDE9E1;
}
.sheet-c{overflow-y:auto;padding:14px 16px calc(20px + var(--sab));-webkit-overflow-scrolling:touch}

.grp{margin-bottom:18px}
.gl{
  display:flex;align-items:center;gap:8px;font-size:12px;color:var(--dim);
  margin-bottom:8px;letter-spacing:.02em;
}
.gl b{margin-left:auto;color:var(--ink2);font-weight:600;font-variant-numeric:tabular-nums;font-size:12px}
.grp input[type=range]{
  width:100%;-webkit-appearance:none;appearance:none;height:4px;border-radius:4px;
  background:#E0DCD4;outline:none;
}
.grp input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;width:20px;height:20px;border-radius:50%;
  background:var(--accent);border:3px solid var(--body);box-shadow:0 1px 5px rgba(0,0,0,.2);
}
.grp input[type=range]::-moz-range-thumb{
  width:16px;height:16px;border-radius:50%;background:var(--accent);border:3px solid var(--body);
}

.seg{display:flex;gap:7px}
.seg button{
  flex:1;padding:9px 0;border-radius:9px;border:1px solid var(--line);
  background:var(--card);color:var(--ink2);font-size:12.5px;
  transition:background .15s,border-color .15s,color .15s;
}
.seg button.on{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:600}
.seg button:active{transform:scale(.985)}

.note{font-size:11px;color:#9C998F;margin-top:7px;line-height:1.6}

.meters{margin-top:12px;display:flex;flex-direction:column;gap:7px}
.mt{display:flex;align-items:center;gap:8px;font-size:11px;color:var(--dim)}
.mt>span{flex:0 0 30px}
.mt>b{flex:0 0 52px;text-align:right;color:var(--ink2);font-weight:600;font-variant-numeric:tabular-nums;font-size:11px}
.mb{flex:1 1 auto;height:4px;border-radius:3px;background:#E4E1D9;overflow:hidden}
.mb i{display:block;height:100%;width:0;background:var(--accent);border-radius:3px;transition:width .18s}
.mb i.hot{background:#B07C2A}
.mb i.max{background:var(--warn)}

/* 目录 */
.toc{overflow-y:auto;padding:6px 0 calc(16px + var(--sab));-webkit-overflow-scrolling:touch}
.toc-i{
  display:flex;align-items:center;gap:10px;width:100%;
  padding:12px 18px;font-size:13px;color:var(--ink2);text-align:left;
  border-bottom:1px solid var(--line2);
}
.toc-i span{
  flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.toc-i em{font-style:normal;font-size:10.5px;color:#A8A59C;font-variant-numeric:tabular-nums}
.toc-i.on{color:var(--accent);font-weight:600;background:var(--accent-soft)}
.toc-i:active{background:#EFEBE3}
.toc-none{padding:26px 18px;font-size:12.5px;color:var(--dim);text-align:center;line-height:1.7}

/* Toast */
.toast{
  position:fixed;left:50%;bottom:calc(88px + var(--sab));transform:translate(-50%,10px);
  background:rgba(36,34,30,.94);color:#F4F2EC;font-size:12.5px;
  padding:9px 16px;border-radius:20px;opacity:0;pointer-events:none;
  transition:opacity .22s,transform .22s;z-index:90;max-width:86vw;
  text-align:center;line-height:1.5;
}
.toast.on{opacity:1;transform:translate(-50%,0)}

/* ==================== 手机 ==================== */
@media (max-width:900px){
  .dev{padding:0;background:none;border-radius:0;box-shadow:none}
  .dev-brand{display:none}
  .bezel{padding:0;background:none;box-shadow:none;border-radius:0}
  #cv{border-radius:0;box-shadow:0 10px 26px -14px rgba(0,0,0,.45),0 0 0 1px rgba(0,0,0,.07)}
  .stage{padding:6px 10px}
  .pgbtn{min-width:46px;padding:0 8px;font-size:12px;height:36px}
  .pgbtn.ghost{min-width:44px}
  .books{grid-template-columns:1fr}
  .lib-body{padding:14px 14px calc(24px + var(--sab))}
  .topbar{padding:calc(10px + var(--sat)) 14px 10px}
}
@media (max-width:400px){
  .tb{padding:7px 10px;font-size:12px}
  .rtitle b{font-size:12.5px}
  .spec-cell b{font-size:16px}
}
@media (min-width:901px){
  .sheet{align-items:center;padding:24px}
  .sheet-body{border-radius:18px;max-height:82vh}
  .sheet-h{border-radius:18px 18px 0 0}
  .toc{overflow-y:auto}
}

/* 拖拽导入 */
#libView.dropping{outline:2px dashed var(--accent);outline-offset:-10px;border-radius:14px}
#libView.dropping::after{
  content:'松手导入 TXT';position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);
  background:rgba(15,110,86,.94);color:#fff;font-size:13px;padding:10px 18px;border-radius:22px;
  z-index:70;pointer-events:none;
}

.tips{
  margin-top:20px;padding:12px 14px;border:1px dashed #CFCAC1;border-radius:12px;
  background:rgba(255,255,255,.34);
}
.tips b{display:block;font-size:11.5px;color:var(--ink2);margin-bottom:5px;letter-spacing:.02em}
.tips div{font-size:11.5px;color:var(--dim);line-height:1.85}