:root{
  --bg:#f7f4ef;
  --panel:#fffdfa;
  --text:#25221f;
  --muted:#7d766e;
  --line:#ddd5ca;
  --accent:#655847;
  --accent-soft:#ece4d9;
  --reader-w:760px;
  --fs:19px;
  --lh:1.95;
  --header-h:58px;
  --bottom-h:64px;
}
html.dark{
  --bg:#151515;
  --panel:#1f1f1f;
  --text:#ece8e2;
  --muted:#aaa39a;
  --line:#353535;
  --accent:#d1bfa8;
  --accent-soft:#2a2622;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{
  margin:0;
  width:100%;
  max-width:100%;
  overflow-x:hidden;
  background:var(--bg);
  color:var(--text);
  overscroll-behavior-x:none;
  -webkit-text-size-adjust:100%;
}
body{
  font-family:-apple-system,BlinkMacSystemFont,"PingFang TC","Noto Serif TC","Noto Sans TC",sans-serif;
  touch-action:pan-y;
  -webkit-font-smoothing:antialiased;
}
button,a,summary{touch-action:manipulation}
button,input,select{font:inherit}

#progress{
  position:fixed;
  top:0;left:0;right:0;
  height:3px;
  z-index:250;
  background:var(--line);
}
#progressFill{
  height:100%;
  width:0;
  background:var(--accent);
}

header{
  position:fixed;
  inset:0 0 auto 0;
  height:calc(var(--header-h) + env(safe-area-inset-top));
  padding-top:env(safe-area-inset-top);
  background:color-mix(in srgb,var(--panel) 94%,transparent);
  border-bottom:1px solid var(--line);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
  z-index:200;
}
.topbar{
  height:var(--header-h);
  max-width:980px;
  margin:auto;
  padding:8px 10px;
  display:grid;
  grid-template-columns:46px minmax(0,1fr) 46px;
  gap:8px;
  align-items:center;
}
.iconbtn{
  width:46px;height:42px;
  border:1px solid var(--line);
  border-radius:12px;
  background:var(--panel);
  color:var(--text);
  font-size:20px;
  font-weight:700;
}
.headtitle{min-width:0;text-align:center}
.headtitle strong{
  display:block;
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
  font-size:15px;
}
.headtitle small{
  display:block;
  margin-top:2px;
  color:var(--muted);
  font-size:12px;
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
}

main{
  width:min(100%,var(--reader-w));
  margin:auto;
  padding:
    calc(var(--header-h) + env(safe-area-inset-top) + 24px)
    18px
    calc(var(--bottom-h) + env(safe-area-inset-bottom) + 46px);
  font-size:var(--fs);
  line-height:var(--lh);
}
#loading{
  padding:24px 0;
  color:var(--muted);
  font-size:14px;
}
.chapter{margin:0}
.chapter h2{
  margin:0 0 26px;
  padding-bottom:12px;
  border-bottom:1px solid var(--line);
  font-size:1.28em;
  line-height:1.4;
  overflow-wrap:anywhere;
}
#reader p{
  margin:0 0 1.15em;
  text-align:justify;
  text-justify:inter-ideograph;
  word-break:break-word;
  overflow-wrap:anywhere;
  white-space:pre-wrap;
}

#bottomBar{
  position:fixed;
  inset:auto 0 0 0;
  height:calc(var(--bottom-h) + env(safe-area-inset-bottom));
  padding-bottom:env(safe-area-inset-bottom);
  background:color-mix(in srgb,var(--panel) 96%,transparent);
  border-top:1px solid var(--line);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
  z-index:200;
}
.bottomInner{
  height:var(--bottom-h);
  max-width:760px;
  margin:auto;
  padding:8px 10px;
  display:grid;
  grid-template-columns:1fr 1.4fr 1fr;
  gap:8px;
  align-items:center;
}
.navbtn,#chapterPill{
  height:44px;
  border:1px solid var(--line);
  border-radius:12px;
  background:var(--panel);
  color:var(--text);
  font-size:14px;
  font-weight:700;
}
.navbtn:disabled{opacity:.38}
#chapterPill{
  min-width:0;
  background:var(--accent-soft);
  padding:0 10px;
}
#chapterPill span{
  display:block;
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
  font-size:13px;
}

#shade{
  position:fixed;
  inset:0;
  display:none;
  background:rgba(0,0,0,.40);
  z-index:300;
}
#shade.show{display:block}

#drawer{
  position:fixed;
  z-index:350;
  inset:0 auto 0 0;
  width:min(92vw,440px);
  max-width:100vw;
  background:var(--bg);
  border-right:1px solid var(--line);
  transform:translateX(-102%);
  transition:transform .18s ease;
  overflow:auto;
  padding-bottom:env(safe-area-inset-bottom);
}
#drawer.open{transform:translateX(0)}
.drawerHead{
  position:sticky;
  top:0;
  z-index:2;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:calc(12px + env(safe-area-inset-top)) 12px 12px;
  background:color-mix(in srgb,var(--bg) 96%,transparent);
  border-bottom:1px solid var(--line);
  backdrop-filter:blur(12px);
}
.drawerHead h3{margin:4px 0 2px}
.drawerHead p{margin:0;color:var(--muted);font-size:12px}
.drawerTools{
  padding:10px 12px;
  border-bottom:1px solid var(--line);
  display:grid;
  gap:8px;
}
.drawerTools select,.drawerTools input,.drawerTools button{
  width:100%;
  min-height:42px;
  border:1px solid var(--line);
  border-radius:10px;
  background:var(--panel);
  color:var(--text);
  padding:8px 10px;
}
.searchRow{display:grid;grid-template-columns:1fr 72px;gap:8px}
#tocCount{font-size:12px;color:var(--muted)}
#toc{padding:8px}
.tocItem{
  display:block;
  width:100%;
  border:0;
  border-radius:10px;
  background:transparent;
  color:var(--text);
  padding:10px;
  text-align:left;
  line-height:1.4;
}
.tocItem.active{background:var(--accent-soft)}
.tocItem small{display:block;color:var(--muted);margin-top:3px}

#settings{
  position:fixed;
  right:10px;
  top:calc(var(--header-h) + env(safe-area-inset-top) + 8px);
  z-index:360;
  width:min(310px,calc(100vw - 20px));
  padding:12px;
  border:1px solid var(--line);
  border-radius:14px;
  background:var(--panel);
  box-shadow:0 12px 34px rgba(0,0,0,.18);
  display:none;
}
#settings.open{display:grid;gap:12px}
.settingBlock{display:grid;gap:7px}
.settingBlock label{font-size:13px;color:var(--muted)}
.seg{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.seg button{
  min-height:40px;
  border:1px solid var(--line);
  border-radius:10px;
  background:var(--bg);
  color:var(--text);
  font-weight:700;
}
.seg button.active{
  background:var(--accent-soft);
  border-color:var(--accent);
}

#toast{
  position:fixed;
  left:50%;
  bottom:calc(var(--bottom-h) + env(safe-area-inset-bottom) + 16px);
  transform:translate(-50%,12px);
  z-index:500;
  opacity:0;
  pointer-events:none;
  background:var(--text);
  color:var(--bg);
  border-radius:999px;
  padding:8px 13px;
  font-size:12px;
  transition:.18s ease;
}
#toast.show{opacity:1;transform:translate(-50%,0)}

@media(max-width:480px){
  main{padding-left:16px;padding-right:16px}
  .bottomInner{grid-template-columns:.9fr 1.25fr .9fr}
  .navbtn{font-size:13px}
}