:root{
  --blue:#1f5fbf; --blue2:#2f7be0; --blue3:#eef4fb; --ink:#1f2a37; --line:#d9e2ee;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{
  font-family:-apple-system,"PingFang SC","Microsoft YaHei",sans-serif;
  color:var(--ink);background:#f4f7fb;display:flex;flex-direction:column;height:100vh;
  user-select:none;-webkit-user-select:none
}
.layout{flex:1;display:flex;min-height:0}
.sidebar{flex:0 0 300px;width:300px;background:#fff;border-right:1px solid var(--line);display:flex;overflow:hidden;transition:flex-basis .25s ease,width .25s ease}
.side-inner{width:300px;height:100%;display:flex;flex-direction:column}
.side-brand{padding:11px 16px;font-weight:700;font-size:15px;border-bottom:1px solid var(--line);background:linear-gradient(90deg,var(--blue),var(--blue2));color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.side-brand span{font-weight:400;font-size:11px;opacity:.85}
.side-head{
  padding:12px 16px;font-weight:600;border-bottom:1px solid var(--line);
  display:flex;justify-content:space-between;align-items:center
}
.side-title{font-size:15px}
.side-actions{display:flex;gap:6px;align-items:center}
#refresh{border:1px solid var(--line);background:var(--blue3);border-radius:6px;cursor:pointer;padding:2px 9px;font-size:14px}
#collapseBtn{border:1px solid var(--line);background:var(--blue3);border-radius:6px;cursor:pointer;padding:2px 11px;font-size:15px;line-height:1;color:var(--blue);font-weight:700}
#collapseBtn:hover{background:#e2edfa}
.doc-list{list-style:none;margin:0;padding:8px;overflow:auto;flex:1}
.doc-item{padding:12px 14px;border-radius:10px;cursor:pointer;margin-bottom:6px;border:1px solid transparent;transition:.15s}
.doc-item:hover{background:var(--blue3)}
.doc-item.active{background:var(--blue3);border-color:var(--blue2)}
.doc-item .t{font-weight:600;font-size:14.5px;line-height:1.4}
.doc-item .m{font-size:12px;color:#8696a8;margin-top:4px}
.hint{color:#8696a8;padding:12px 14px;font-size:13px}

/* 视图区（无顶/底栏，最大化阅读空间） */
.viewer{flex:1;display:flex;flex-direction:column;min-width:0;position:relative}
.canvas-wrap{flex:1;position:relative;overflow:hidden;background:#e9eef5;display:flex}

/* 画布滚动容器：默认书页布局（flex），滚动模式会覆盖 */
.canvas-scroll{flex:1;overflow:auto;padding:18px;display:flex;justify-content:center;align-items:center}

/* 书页模式 · 双页并排（像翻开的书） */
.canvas-scroll.book-spread{flex-direction:row;gap:12px;align-items:stretch}
.canvas-scroll.book-spread .book-page{flex:1 1 0;max-width:50%;min-width:0;min-height:0}
.book-page{flex:0 0 auto;display:flex;align-items:center;justify-content:center;min-height:0;min-width:0;width:100%;height:100%}
.book-canvas{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;background:#fff;box-shadow:0 4px 18px rgba(0,0,0,.18);display:block}
.book-page.left .book-canvas{border-radius:2px 1px 1px 2px}
.book-page.right .book-canvas{border-radius:1px 2px 2px 1px}
/* 书页模式 · 单页（放大时自动切） */
.canvas-scroll.book-single{}
.canvas-scroll.book-single .book-page{width:100%;height:100%}
.book-page.solo .book-canvas{border-radius:2px}

/* 滚动模式（连续铺开 + 懒加载） */
body.mode-scroll .canvas-scroll{display:block;padding:16px}
.canvas-scroll.scroll-view{display:block;padding:16px}
.scroll-page{max-width:100%;margin:0 auto 18px}
.scroll-canvas{max-width:100%;height:auto;display:block;margin:0 auto;box-shadow:0 4px 16px rgba(0,0,0,.15);background:#fff}
.scroll-loading{color:#8696a8;font-size:14px;text-align:center;padding:42px 0}
.scroll-loading button{margin-top:10px;border:1px solid var(--blue2);background:var(--blue);color:#fff;border-radius:8px;cursor:pointer;padding:8px 16px;font-size:13px}

.placeholder{color:#8696a8;margin:auto;font-size:15px;text-align:center;padding:0 24px}
.placeholder button{margin-top:14px;border:1px solid var(--blue2);background:var(--blue);color:#fff;border-radius:8px;cursor:pointer;padding:9px 18px;font-size:14px}
.placeholder button:hover{background:var(--blue2)}
.loading{margin:auto;font-size:15px;color:#5a6b7d;display:flex;align-items:center;gap:8px}
.loading::after{content:"";width:16px;height:16px;border:2px solid #c2d2e6;border-top-color:var(--blue2);border-radius:50%;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* 页面两侧翻页热区（像翻书：左侧=前，右侧=后） */
.page-edge{position:absolute;top:0;bottom:0;width:16%;pointer-events:auto;cursor:pointer;z-index:5;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .2s;background:transparent}
.page-edge.left{left:0}
.page-edge.right{right:0}
.page-edge:hover{opacity:1}
.page-edge.left:hover{background:linear-gradient(90deg,rgba(31,95,191,.12),transparent)}
.page-edge.right:hover{background:linear-gradient(270deg,rgba(31,95,191,.12),transparent)}
.page-edge::before{content:"‹";font-size:54px;color:var(--blue);font-weight:700;line-height:1}
.page-edge.right::before{content:"›"}
.page-edge:hover::before{opacity:.9}

/* 左下 / 右下角翻页按钮（明确的可点翻书角，常驻淡显） */
.flip-corner{position:absolute;bottom:14px;width:46px;height:46px;border-radius:50%;border:1px solid var(--line);background:rgba(255,255,255,.82);box-shadow:0 3px 12px rgba(0,0,0,.16);color:var(--blue);font-size:30px;font-weight:700;line-height:1;cursor:pointer;z-index:6;display:flex;align-items:center;justify-content:center;transition:all .15s;opacity:.55}
.flip-corner:hover{opacity:1;background:#fff;transform:scale(1.08)}
.flip-corner.prev{left:14px}
.flip-corner.next{right:14px}
.flip-corner.prev::before{content:"‹";margin-right:2px}
.flip-corner.next::before{content:"›";margin-left:2px}
/* 滚动模式下隐藏角落翻页（滚动用滚轮） */
body.mode-scroll .flip-corner{display:none}

/* 浮动齿轮按钮（右下角，默认隐藏，打开文档后显示） */
.floating-ctrl{position:absolute;right:18px;bottom:18px;width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,.94);border:1px solid var(--line);box-shadow:0 4px 16px rgba(0,0,0,.18);font-size:20px;cursor:pointer;z-index:35;display:flex;align-items:center;justify-content:center;transition:all .2s}
.floating-ctrl:hover{background:#fff;transform:scale(1.06)}
.floating-ctrl.active{background:var(--blue);color:#fff;border-color:var(--blue)}

/* 浮动控制面板（点击 ⚙ 后从底部弹出，6 秒不动自动隐藏） */
.floating-panel{position:absolute;left:50%;bottom:74px;transform:translateX(-50%);background:rgba(255,255,255,.97);border:1px solid var(--line);border-radius:14px;box-shadow:0 10px 36px rgba(0,0,0,.22);padding:12px 18px;z-index:34;display:flex;flex-direction:column;gap:10px;min-width:520px;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.floating-panel[hidden]{display:none}
.fp-row{display:flex;gap:10px;align-items:center;justify-content:center;flex-wrap:wrap}
.fp-row button{border:1px solid var(--line);background:var(--blue3);border-radius:6px;cursor:pointer;padding:6px 12px;font-size:13px;color:var(--ink)}
.fp-row button:hover{background:#e2edfa}
.fp-spacer{flex:1}
.floating-panel .pager{font-size:13px;display:flex;align-items:center;gap:4px}
.floating-panel .pager input{width:54px;padding:5px 6px;border:1px solid var(--line);border-radius:6px;text-align:center}
.floating-panel .pager .fp-sep{color:#8696a8}
.floating-panel #zoom{font-size:13px;min-width:48px;text-align:center}
.floating-panel .mode-toggle{display:inline-flex;border:1px solid var(--line);border-radius:8px;overflow:hidden;background:var(--blue3)}
.floating-panel .mode-toggle button{border:none;background:transparent;cursor:pointer;padding:6px 12px;font-size:13px;color:var(--ink);line-height:1;white-space:nowrap;border-radius:0}
.floating-panel .mode-toggle button.active{background:var(--blue);color:#fff}
.floating-panel .mode-toggle button:hover:not(.active){background:#e2edfa}
.fp-hint{font-size:11px;color:#8696a8;text-align:center;padding-top:2px}

/* 收起列表后浮现的展开按钮 */
.reopen-btn{display:none;position:fixed;left:12px;top:12px;z-index:45;background:var(--blue);color:#fff;border:none;border-radius:8px;padding:8px 12px;font-size:13px;cursor:pointer;box-shadow:0 2px 8px rgba(31,95,191,.3)}
.reopen-btn:hover{background:var(--blue2)}
body.side-collapsed .sidebar{flex-basis:0;width:0;border-right:none}
body.side-collapsed .reopen-btn{display:block}

footer{background:#fff;border-top:1px solid var(--line);padding:6px 16px;font-size:11px;color:#8696a8}
footer .site-stats{display:flex;flex-wrap:wrap;gap:14px;align-items:center}
footer .site-stats .s{display:flex;align-items:center;gap:5px}
footer .site-stats b{color:var(--blue);font-size:13px;font-variant-numeric:tabular-nums}
footer .site-stats a{color:var(--blue);font-weight:600;text-decoration:none}
footer .site-stats a:hover{text-decoration:underline}
footer .foot-note{color:#9aa7b5;font-size:10.5px}
.site-stats .dot{width:7px;height:7px;border-radius:50%;background:#2e9e4f;display:inline-block;box-shadow:0 0 0 3px rgba(46,158,79,.18);animation:pulse 1.8s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.45}}

/* 移动端目录按钮（桌面隐藏） */
.menu-btn{display:none;border:none;background:rgba(255,255,255,.18);color:#fff;font-size:20px;line-height:1;padding:6px 10px;border-radius:8px;cursor:pointer}
.nav-mask{display:none;position:fixed;inset:0;background:rgba(15,25,40,.4);z-index:40}

@media(max-width:720px){
  /* 移动端维持满屏高度，阅读区自适应铺满（避免高度塌缩） */
  body{height:100vh;height:100dvh;overflow:hidden}
  .layout{flex-direction:column}
  .viewer{min-height:0}

  /* 抽屉式目录：关闭时滑出屏幕外，打开时覆盖 */
  .menu-btn{display:block}
  .brand{font-size:16px}
  .brand-sub{display:none}
  body.nav-open .nav-mask{display:block}
  .sidebar{position:fixed;top:0;left:0;bottom:0;width:84%;max-width:340px;z-index:50;transform:translateX(-100%);transition:transform .25s ease;box-shadow:0 0 30px rgba(0,0,0,.25);border-right:1px solid var(--line)}
  body.nav-open .sidebar{transform:translateX(0)}
  body.side-collapsed .sidebar{width:84%;max-width:340px;flex-basis:auto}

  /* 移动端始终显示「☰ 文档列表」入口，否则抽屉打不开（根本不可用） */
  .reopen-btn{display:block}
  body.nav-open .reopen-btn{display:none}

  .canvas-wrap{padding:0}
  .canvas-scroll{padding:12px}

  /* 移动端始终单页：隐藏左下/右下角按钮，改用两侧常显箭头翻页（避免与 ⚙ 重叠） */
  .flip-corner{display:none}
  .page-edge{width:20%;opacity:.5}
  .page-edge::before{font-size:40px}
  .page-edge:active{opacity:1}
  .page-edge.left:active{background:linear-gradient(90deg,rgba(31,95,191,.18),transparent)}
  .page-edge.right:active{background:linear-gradient(270deg,rgba(31,95,191,.18),transparent)}

  .floating-panel{left:8px;right:8px;bottom:70px;transform:none;min-width:0;width:auto;padding:10px 12px}
  .floating-panel .fp-row{gap:8px}
  .floating-panel .fp-row button{padding:6px 10px;font-size:13px}
  .floating-panel .pager input{width:46px}
  .floating-ctrl{right:14px;bottom:14px;width:42px;height:42px;font-size:18px}

  footer{font-size:11px;padding:7px 12px}
  footer .site-stats{gap:10px;font-size:12px}
  footer .site-stats b{font-size:14px}
}