/* ==========================================================================
   EdgeReader — 视觉基调：纸与墨
   不是仪表盘，是一本摊开的书。去掉了发光、毛玻璃、大圆角和渐变。
   ========================================================================== */

:root{
  color-scheme: light;

  --paper:      #f7f3e8;   /* 纸面 */
  --paper-2:    #efe9da;   /* 次级底（滑轨、输入框） */
  --paper-3:    #e5dccb;
  --ink:        #1f1c17;   /* 墨 */
  --ink-2:      #443d33;   /* 正文 */
  --ink-3:      #8b8171;   /* 注释 */
  --rule:       #d9cfba;   /* 细线 */
  --rule-soft:  #e8dfcd;
  --accent:     #9c3a26;   /* 朱砂 */
  --accent-dim: rgba(156,58,38,.07);
  --accent-hl:  rgba(156,58,38,.15);
  --accent-word:rgba(156,58,38,.28);
  --warn:       #b8862f;
  --danger:     #9c3a26;

  --serif: "Songti SC", "Song Ti SC", "Noto Serif CJK SC", "Source Han Serif SC",
           "SimSun", "STSong", Georgia, "Times New Roman", serif;
  --sans:  "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans CJK SC",
           system-ui, -apple-system, sans-serif;

  --fs: 19px;
  --bar-h: calc(92px + env(safe-area-inset-bottom));
}

/* 深色：夜间纸。由 <html data-theme> 控制，初始值在 head 里按系统偏好设好 */
[data-theme="dark"]{
  color-scheme: dark;
  --paper:      #17150f;
  --paper-2:    #211e17;
  --paper-3:    #2b261d;
  --ink:        #ece3d2;
  --ink-2:      #c9bfae;
  --ink-3:      #877d6c;
  --rule:       #322c22;
  --rule-soft:  #272218;
  --accent:     #cd7358;
  --accent-dim: rgba(205,115,88,.10);
  --danger:     #cd7358;
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:14px;
  overflow:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;padding:0}
input,select{font:inherit;color:inherit}
.hidden{display:none!important}
.icon{width:20px;height:20px;fill:currentColor;display:block}

/* ------------------------------------------------------------------ 顶栏 */
.topbar{
  position:sticky;top:0;z-index:30;
  display:flex;align-items:center;gap:4px;
  padding:calc(10px + env(safe-area-inset-top)) 10px 9px;
  background:var(--paper);
  border-bottom:1px solid var(--rule);
}
.tb-btn{
  width:42px;height:42px;flex:0 0 auto;
  display:grid;place-items:center;
  color:var(--ink-3);
  transition:color .15s;
}
.tb-btn:active{color:var(--ink)}
.tb-mid{flex:1;min-width:0;text-align:center;line-height:1.35}
.tb-book{
  font-size:11px;color:var(--ink-3);letter-spacing:.04em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.tb-chapter{
  font-family:var(--serif);font-size:15px;color:var(--ink);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:1px;
}

/* ------------------------------------------------------------------ 书架 */
#shelf{height:100%;display:flex;flex-direction:column;overflow:hidden}
.shelf-scroll{flex:1;overflow-y:auto;padding:0 20px 48px;-webkit-overflow-scrolling:touch}
.shelf-scroll > *{max-width:680px;margin-left:auto;margin-right:auto}

.shelf-head{display:flex;align-items:baseline;justify-content:space-between;padding:26px 0 14px}
.shelf-title{
  font-family:var(--serif);font-size:27px;letter-spacing:.02em;color:var(--ink);
  font-weight:400;
}
.shelf-sub{font-size:11px;color:var(--ink-3);font-variant-numeric:tabular-nums}

/* 局域网地址条：一眼看到，点一下复制 */
.lan{
  display:flex;align-items:center;gap:10px;
  padding:11px 13px;margin-bottom:22px;
  border:1px solid var(--rule);
  background:var(--paper-2);
  font-size:12.5px;color:var(--ink-2);
}
.lan .lbl{color:var(--ink-3);flex:0 0 auto;font-size:11px;letter-spacing:.06em}
.lan code{
  font-family:ui-monospace,"SF Mono",Consolas,monospace;
  font-size:12.5px;color:var(--ink);
  flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.lan button{
  flex:0 0 auto;font-size:11.5px;color:var(--accent);
  border-bottom:1px solid transparent;padding-bottom:1px;
}
.lan button:active{border-bottom-color:var(--accent)}

.book{
  display:flex;gap:15px;align-items:center;
  padding:17px 2px;
  border-bottom:1px solid var(--rule-soft);
  position:relative;
  transition:background .15s;
}
.book:active{background:var(--paper-2)}
.book .cover{
  width:42px;height:58px;flex:0 0 auto;
  background:var(--ink);color:var(--paper);
  font-family:var(--serif);font-size:19px;
  display:grid;place-items:center;
  line-height:1;
}
.book .info{min-width:0;flex:1}
.book .bt{
  font-family:var(--serif);font-size:16.5px;color:var(--ink);line-height:1.4;
  margin-bottom:4px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.book .ba{font-size:12px;color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.book .bm{
  font-size:11px;color:var(--ink-3);margin-top:5px;
  font-variant-numeric:tabular-nums;letter-spacing:.03em;
}
.book .live{
  position:absolute;right:38px;top:19px;
  font-size:10px;color:var(--accent);letter-spacing:.08em;
}
.book .del{
  position:absolute;right:0;top:12px;
  width:30px;height:30px;display:grid;place-items:center;
  color:var(--ink-3);font-size:16px;line-height:1;
  opacity:.5;transition:opacity .15s,color .15s;
}
.book .del:active{opacity:1;color:var(--danger)}

.empty{
  padding:52px 16px;text-align:center;color:var(--ink-3);
  border-top:1px solid var(--rule-soft);
}
.empty b{
  display:block;font-family:var(--serif);font-size:17px;font-weight:400;
  color:var(--ink-2);margin-bottom:10px;
}
.empty p{margin:0;font-size:12.5px;line-height:1.9}

.uploader{
  display:flex;align-items:center;justify-content:center;gap:8px;
  margin-top:22px;padding:14px;
  border:1px solid var(--rule);
  color:var(--ink-2);font-size:13px;letter-spacing:.02em;
  transition:background .15s;
}
.uploader:active{background:var(--paper-2)}

/* ------------------------------------------------------------------ 阅读 */
#reader{height:100%;display:flex;flex-direction:column;overflow:hidden}
#content{
  flex:1;overflow-y:auto;overflow-x:hidden;
  padding:26px 22px calc(var(--bar-h) + 26px);
  -webkit-overflow-scrolling:touch;
}
.wrap{max-width:680px;margin:0 auto}

.ch-title{
  font-family:var(--serif);font-size:22px;font-weight:400;line-height:1.55;
  color:var(--ink);
  margin:4px 0 26px;padding-bottom:14px;
  border-bottom:1px solid var(--rule);
}

.para{
  margin:0;padding:6px 12px;
  border-left:2px solid transparent;
  font-family:var(--serif);
  font-size:var(--fs);line-height:1.95;
  color:var(--ink-2);
  text-indent:2em;text-align:justify;
  word-break:break-word;
  transition:color .2s,background .2s,border-color .2s;
}
.para.active{
  background:var(--accent-dim);
  border-left-color:var(--accent);
  color:var(--ink);
}
/* 有句子时间戳时，段落只做轻微强调，高亮全部让给句子，避免两层叠加 */
.sent-ready .para.active{
  background:none;
  border-left-color:transparent;
}
/* 正在读的那一句：只铺一层淡底，不加下划线（会和词块打架） */
.s.on{
  background:var(--accent-hl);
  border-radius:2px;
}
/* 句内再细一层：正在念的那个词，颜色更重并把字压深 */
.w.on{
  background:var(--accent-word);
  border-radius:2px;
  color:var(--ink);
}
/* 极短且无标点的段落当作小标题：不缩进、拉开字距 */
.para.mini{
  text-indent:0;
  font-size:calc(var(--fs) - 1px);
  letter-spacing:.14em;
  color:var(--ink);
  padding-top:16px;padding-bottom:9px;
}
/* 首段即章名时，排成标题，但仍保留段落身份（供高亮/点读） */
.para.lead{
  font-size:calc(var(--fs) + 4px);color:var(--ink);
  text-indent:0;line-height:1.5;
  padding:2px 12px 15px;margin-bottom:20px;
  border-bottom:1px solid var(--rule);
  border-left-color:transparent;
}
.para.lead.active{background:none;border-left-color:transparent}
.para.plain{
  text-align:center;text-indent:0;color:var(--ink-3);
  font-size:13px;font-family:var(--sans);padding:40px 0;
}

/* ------------------------------------------------------------------ 底栏 */
#bar{
  position:fixed;left:0;right:0;bottom:0;z-index:32;
  padding:9px 14px calc(10px + env(safe-area-inset-bottom));
  background:var(--paper);
  border-top:1px solid var(--rule);
}
.bar-meta{
  display:flex;align-items:center;justify-content:space-between;
  font-size:10.5px;color:var(--ink-3);letter-spacing:.05em;
  padding:0 2px;margin:0 auto 7px;min-height:14px;
  max-width:680px;width:100%;
  font-variant-numeric:tabular-nums;
}
.bar-meta .dev{display:flex;align-items:center;gap:6px}
.dot{width:4px;height:4px;background:var(--ink-3);display:inline-block}
.dot.on{background:var(--accent)}
.dot.load{background:var(--warn)}

.progress{height:1px;background:var(--rule);margin:0 auto 9px;overflow:hidden;
  max-width:680px;width:100%}
.progress i{display:block;height:100%;background:var(--accent);width:0;transition:width .3s ease}

.bar-btns{
  display:flex;align-items:center;justify-content:space-between;
  max-width:680px;margin:0 auto;
}
.b-btn{
  width:50px;height:46px;display:grid;place-items:center;
  color:var(--ink-2);transition:color .15s,opacity .15s;
}
.b-btn:active{color:var(--accent)}
.b-btn:disabled{opacity:.25}

.b-play{
  width:50px;height:50px;border-radius:50%;
  border:1.5px solid var(--ink-2);
  display:grid;place-items:center;
  color:var(--ink-2);
  transition:border-color .18s,color .18s,background .15s;
}
.b-play .icon{width:20px;height:20px;margin-left:1px}
.b-play.playing{border-color:var(--accent);color:var(--accent)}
.b-play.playing .icon{margin-left:0}
.b-play:active{background:var(--paper-2)}
.b-play.loading{opacity:.45}

/* ------------------------------------------------------------------ 抽屉 */
.scrim{position:fixed;inset:0;background:rgba(20,16,10,.42);z-index:40;
  opacity:0;pointer-events:none;transition:opacity .2s}
.scrim.on{opacity:1;pointer-events:auto}

.drawer{
  position:fixed;top:0;bottom:0;left:0;width:min(82vw,340px);z-index:41;
  background:var(--paper);
  border-right:1px solid var(--rule);
  transform:translateX(-102%);
  transition:transform .24s cubic-bezier(.32,.72,0,1);
  display:flex;flex-direction:column;
}
.drawer.on{transform:translateX(0)}
.drawer-head{
  padding:calc(14px + env(safe-area-inset-top)) 16px 12px;
  border-bottom:1px solid var(--rule);
  display:flex;align-items:center;justify-content:space-between;
}
.drawer-head h3{
  margin:0;font-family:var(--serif);font-size:15px;font-weight:400;
  color:var(--ink);letter-spacing:.06em;
}
.toc-list{flex:1;overflow-y:auto;padding:4px 0 24px}
.toc-item{
  display:block;width:100%;text-align:left;
  padding:12px 18px;font-size:13.5px;color:var(--ink-2);
  line-height:1.6;border-left:2px solid transparent;
  transition:background .12s,color .12s;
}
.toc-item:active{background:var(--paper-2)}
.toc-item.on{color:var(--accent);border-left-color:var(--accent);background:var(--accent-dim)}
.toc-idx{
  font-size:10.5px;color:var(--ink-3);margin-right:9px;
  font-variant-numeric:tabular-nums;letter-spacing:.04em;
}

.sheet{
  position:fixed;left:0;right:0;bottom:0;z-index:41;
  max-height:84vh;overflow-y:auto;
  background:var(--paper);
  border-top:1px solid var(--rule);
  padding:6px 20px calc(24px + env(safe-area-inset-bottom));
  transform:translateY(102%);
  transition:transform .26s cubic-bezier(.32,.72,0,1);
}
.sheet.on{transform:translateY(0)}
.sheet-grab{width:32px;height:3px;background:var(--rule);margin:8px auto 20px}

.row{margin-bottom:26px}
.row:last-child{margin-bottom:6px}
.row-label{
  display:flex;align-items:center;justify-content:space-between;
  font-size:12px;color:var(--ink-3);margin-bottom:11px;letter-spacing:.04em;
}
.row-label b{
  color:var(--ink);font-weight:400;font-size:12px;letter-spacing:.08em;
}
.row-label .val{color:var(--accent);font-variant-numeric:tabular-nums;font-size:12px}

select{
  width:100%;padding:11px 12px;
  border:1px solid var(--rule);
  background:var(--paper-2);
  color:var(--ink);font-size:13.5px;
  appearance:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='%238b8171'><path d='M7 10l5 5 5-5z'/></svg>");
  background-repeat:no-repeat;background-position:right 12px center;
}
select:focus{outline:1px solid var(--accent);outline-offset:-1px}

input[type=range]{
  width:100%;appearance:none;-webkit-appearance:none;
  height:2px;background:var(--rule);outline:none;
}
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;width:15px;height:15px;border-radius:50%;
  background:var(--accent);cursor:pointer;
}
input[type=range]::-moz-range-thumb{
  width:15px;height:15px;border:0;border-radius:50%;background:var(--accent);
}

.seg{display:flex;gap:0;border:1px solid var(--rule)}
.seg button{
  flex:1;padding:11px 0;font-size:13px;color:var(--ink-2);
  background:transparent;transition:background .15s,color .15s;
}
.seg button + button{border-left:1px solid var(--rule)}
.seg button:active{background:var(--paper-2)}
.seg button.on{background:var(--accent-dim);color:var(--accent)}

.dev-item{
  display:flex;align-items:center;gap:9px;
  padding:10px 0;font-size:13px;color:var(--ink-2);
  border-bottom:1px solid var(--rule-soft);
}
.dev-item .nm{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dev-item .tag{font-size:10.5px;color:var(--accent);letter-spacing:.06em;flex:0 0 auto}

.ghost{
  width:100%;padding:12px;
  border:1px solid var(--rule);
  background:transparent;color:var(--ink-2);
  font-size:13px;letter-spacing:.02em;
  transition:background .15s;
}
.ghost:active{background:var(--paper-2)}
.hint{font-size:11.5px;color:var(--ink-3);line-height:1.85;margin-top:9px}

/* ------------------------------------------------------------------ 浮层 */
#gate{
  position:fixed;left:50%;bottom:calc(var(--bar-h) + 18px);
  transform:translate(-50%,14px);
  z-index:35;
  background:var(--ink);color:var(--paper);
  font-size:12.5px;letter-spacing:.04em;
  padding:11px 20px;
  opacity:0;pointer-events:none;
  transition:opacity .2s,transform .2s;
  white-space:nowrap;
}
#gate.on{opacity:1;transform:translate(-50%,0);pointer-events:auto}

#toast{
  position:fixed;left:50%;top:calc(62px + env(safe-area-inset-top));
  transform:translate(-50%,-8px);
  z-index:60;
  background:var(--ink);color:var(--paper);
  font-size:12.5px;letter-spacing:.02em;
  padding:10px 16px;
  opacity:0;pointer-events:none;
  transition:opacity .18s,transform .18s;
  max-width:86vw;text-align:center;line-height:1.6;
}
#toast.on{opacity:1;transform:translate(-50%,0)}

.spinner{
  width:22px;height:22px;margin:64px auto;
  border:1.5px solid var(--rule);
  border-top-color:var(--accent);
  border-radius:50%;
  animation:spin .9s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}

/* 窄屏微调 */
@media (max-width:380px){
  :root{--fs:18px}
  #content{padding-left:18px;padding-right:18px}
  .b-btn{width:44px}
  .b-play{width:46px;height:46px}
  .tb-btn{width:38px}
}
/* 宽屏：顶栏图标收拢到与正文同宽 */
@media (min-width:820px){
  .topbar{
    padding-left:calc((100% - 680px) / 2);
    padding-right:calc((100% - 680px) / 2);
  }
}
@media (min-width:760px){
  .para{font-size:calc(var(--fs) + 1px)}
}
@media (prefers-reduced-motion:reduce){
  *{transition-duration:.01ms!important;animation-duration:.01ms!important}
}