:root{
  --ink:#1c1c1a; --muted:#6b6b66; --line:#e3e1d8; --accent:#0c447c; --bg:#f4f2ec;
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;height:100%;}
body{
  font-family:"PingFang SC","Microsoft YaHei",system-ui,sans-serif;
  color:var(--ink); background:var(--bg); display:flex; flex-direction:column;
  -webkit-tap-highlight-color:transparent;
}

/* 顶栏 */
.topbar{
  display:flex; align-items:center; justify-content:space-between; gap:10px 14px;
  flex-wrap:wrap; row-gap:8px;
  padding:10px 16px; background:#fff; border-bottom:1px solid var(--line); flex:0 0 auto;
}
.brand{font-weight:700; font-size:16px; letter-spacing:1px; white-space:nowrap; flex:0 0 auto;}
.brand span{font-weight:400; font-size:11px; color:var(--muted); margin-left:6px; letter-spacing:2px;}
/* 控件行：永不折行；空间不足时横向滚动，而不是把文字拆成竖排 */
.tools{display:flex; align-items:center; gap:8px; flex:0 1 auto; min-width:0; flex-wrap:nowrap; overflow-x:auto; overflow-y:hidden; scrollbar-width:none;}
.tools::-webkit-scrollbar{display:none;}
.tools button, .tools .import{
  border:1px solid var(--line); background:#fff; color:var(--ink); cursor:pointer;
  height:34px; min-width:34px; padding:0 12px; border-radius:8px; font-size:14px;
  display:inline-flex; align-items:center; justify-content:center;
  white-space:nowrap; flex:0 0 auto;
}
.tools button:hover, .tools .import:hover{border-color:var(--accent); color:var(--accent);}
#import-pdf{display:none;}
#page-indicator{font-size:13px; color:var(--muted); min-width:54px; text-align:center; white-space:nowrap; flex:0 0 auto;}
.tools .import{position:relative; color:var(--accent); border-color:var(--accent);}

/* 舞台 */
.stage{flex:1 1 auto; display:flex; align-items:center; justify-content:center; overflow:hidden; padding:16px;}
/* 书块容器：尺寸由 JS 精确设定（跨页 = 2×页宽），居中交给 .stage 的 flex */
.book{position:relative;}

/* 每页基础尺寸（翻页引擎会按容器缩放） */
.page{
  width:500px; height:700px; background:#fff; overflow:hidden; position:relative;
  box-shadow:0 0 0 1px var(--line); display:flex; flex-direction:column;
}
.page-cover .cover-art{position:absolute; inset:0;}
.page-cover .cover-art svg{width:100%; height:100%; display:block;}
.cover-text{position:absolute; left:40px; bottom:90px; color:#fff; text-shadow:0 2px 12px rgba(0,0,0,.4);}
.cover-text h1{font-size:52px; margin:0; letter-spacing:6px;}
.cover-text p{margin:6px 0 0; letter-spacing:3px; opacity:.9;}
.cover-text .issue{font-size:14px; opacity:.8; margin-top:14px;}

.page-text, .page-article, .page-video, .page-back{padding:46px 40px;}
.page h2{font-size:26px; margin:0 0 18px; color:var(--accent);}
.page p{font-size:15px; line-height:1.9; color:#333; margin:0 0 14px;}
.page .lead{font-size:17px; color:var(--ink); font-weight:600;}
.page .tip{margin-top:24px; padding:12px 14px; background:#eef4fb; border-left:3px solid var(--accent); font-size:13px; color:#335; border-radius:6px;}
.page .foot{position:absolute; left:40px; bottom:40px; color:var(--muted); font-size:12px; letter-spacing:2px;}
.page-article .hero{width:100%; height:300px; object-fit:cover; border-radius:10px; margin-bottom:18px; display:block;}

/* 视频页 */
.page-video{justify-content:center; align-items:center; padding:30px;}
.video-block{position:relative; width:100%; height:520px; border-radius:12px; overflow:hidden; background:#000; cursor:pointer;}
.video-poster{width:100%; height:100%; object-fit:cover; opacity:.85;}
.video-play{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:74px; height:74px; border-radius:50%; border:none; cursor:pointer;
  background:rgba(255,255,255,.92); color:var(--accent); font-size:28px; line-height:74px;
  box-shadow:0 6px 24px rgba(0,0,0,.35);
}
.video-play:hover{background:#fff;}
.video-caption{position:absolute; left:0; right:0; bottom:0; padding:12px 14px; color:#fff; font-size:13px; background:linear-gradient(0deg,rgba(0,0,0,.55),transparent);}
.video-block video{width:100%; height:100%; object-fit:contain; background:#000;}

/* 目录 */
.toc{position:fixed; top:0; right:0; width:240px; height:100%; background:#fff; box-shadow:-8px 0 24px rgba(0,0,0,.12); padding:20px; z-index:30; overflow:auto;}
.toc.hidden{display:none;}
.toc h3{margin:0 0 14px; font-size:15px; color:var(--muted);}
.toc ul{list-style:none; margin:0; padding:0;}
.toc li{padding:11px 10px; border-radius:8px; cursor:pointer; font-size:14px; display:flex; align-items:baseline; gap:8px;}
.toc li:hover{background:#eef4fb; color:var(--accent);}
.toc li.lvl2{padding-left:26px; font-size:13px; color:var(--muted);}
.toc li .pg{margin-left:auto; color:var(--muted); font-size:12px; font-variant-numeric:tabular-nums; flex:none;}
.toc li:hover .pg{color:var(--accent);}

/* 视频弹层（PDF 热点用） */
.modal{position:fixed; inset:0; background:rgba(0,0,0,.82); display:flex; align-items:center; justify-content:center; z-index:40;}
.modal.hidden{display:none;}
.modal-box{position:relative; width:min(86vw,860px); aspect-ratio:16/9; background:#000; border-radius:10px; overflow:hidden;}
.modal-box iframe, .modal-box video{width:100%; height:100%; border:0; display:block;}
.modal-close{position:absolute; right:10px; top:10px; width:36px; height:36px; border-radius:50%; border:none; background:rgba(255,255,255,.9); font-size:22px; cursor:pointer; z-index:2;}

/* 导入进度 */
.pdf-loader{position:fixed; inset:0; background:rgba(20,22,26,.78); display:flex; align-items:center; justify-content:center; z-index:50;}
.pdf-loader.hidden{display:none;}
.pdf-loader-box{background:#fff; padding:26px 34px; border-radius:14px; text-align:center; box-shadow:0 20px 60px rgba(0,0,0,.4);}
.pdf-loader-box p{margin:16px 0 0; font-size:14px; color:#333;}
.spinner{width:42px; height:42px; border:4px solid #e3e1d8; border-top-color:var(--accent); border-radius:50%; margin:0 auto; animation:spin .9s linear infinite;}
@keyframes spin{to{transform:rotate(360deg);}}
.pdf-status{position:fixed; left:14px; bottom:14px; background:rgba(20,22,26,.82); color:#fff; font-size:13px; padding:8px 14px; border-radius:20px; z-index:35; pointer-events:none;}
.pdf-status.hidden{display:none;}
.page-pdf{padding:0; background:#fff; display:block;}
.page-pdf.loading{align-items:center; justify-content:center; color:var(--muted); font-size:13px;}
.page-pdf .pdf-loading{padding:10px;}
.page-pdf canvas{width:100%; height:100%; display:block; background:#fff;}
/* 预渲染图片页（manifest 图片模式） */
.page-img{padding:0; background:#fff; display:block;}
.page-img img{width:100%; height:100%; object-fit:contain; display:block; background:#fff;}

@media (max-width:520px){
  .brand span{display:none;}
  .page-text, .page-article, .page-video, .page-back{padding:34px 26px;}
}

/* 手机 / 平板（含横屏）：顶栏改为两行，控件单行不换行、横向可滑动，避免文字溢出 */
@media (max-width:1024px), (orientation:landscape) and (max-height:560px){
  .topbar{flex-wrap:wrap; gap:8px; padding:8px 10px; justify-content:flex-start;}
  .brand{flex:0 0 auto; font-size:15px; letter-spacing:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%;}
  .brand span{display:none;}
  .tools{
    flex:1 1 100%; order:2; gap:6px;
    overflow-x:auto; overflow-y:hidden; -webkit-overflow-scrolling:touch;
    padding:1px 0 3px; scrollbar-width:none;
  }
  .tools::-webkit-scrollbar{display:none;}
  .tools button, .tools .import{
    flex:0 0 auto; height:32px; min-width:32px; padding:0 10px;
    font-size:13px; white-space:nowrap;
  }
  #page-indicator{flex:0 0 auto; min-width:46px; font-size:12px; white-space:nowrap;}
}

/* 横屏手机：高度紧张，再收紧一档，把空间留给杂志翻页区 */
@media (orientation:landscape) and (max-height:560px){
  .topbar{padding:6px 10px; gap:6px 8px;}
  .tools button, .tools .import{height:30px; font-size:12.5px; padding:0 8px;}
  .stage{padding:6px;}
}

/* 全屏（自动进入）时收一下边距，更沉浸；保留顶栏控制按钮 */
html:fullscreen .stage{padding:8px;}
html:-webkit-full-screen .stage{padding:8px;}
html:fullscreen .topbar{padding-top:6px; padding-bottom:6px;}
html:-webkit-full-screen .topbar{padding-top:6px; padding-bottom:6px;}

/* 图文阅读浮层 */
.reader{position:fixed; inset:0; background:var(--bg); z-index:45; display:flex; flex-direction:column; color:var(--ink);}
.reader.hidden{display:none;}
.reader-bar{display:flex; align-items:center; justify-content:space-between; gap:10px; padding:10px 16px; background:#fff; border-bottom:1px solid var(--line); flex:0 0 auto;}
.reader-kicker{font-size:13px; color:var(--accent); font-weight:700; letter-spacing:1px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.reader-bar-actions{display:flex; align-items:center; gap:6px;}
.reader-bar-actions button{border:1px solid var(--line); background:#fff; color:var(--ink); cursor:pointer; height:32px; min-width:32px; padding:0 10px; border-radius:8px; font-size:14px; display:inline-flex; align-items:center; justify-content:center;}
.reader-bar-actions button:hover{border-color:var(--accent); color:var(--accent);}
#reader-origin{color:var(--accent); border-color:var(--accent);}
.reader-font-val{font-size:12px; color:var(--muted); min-width:42px; text-align:center;}
.reader-scroll{flex:1 1 auto; overflow:auto; padding:28px 16px 64px;}
.reader-body{max-width:720px; margin:0 auto; font-size:calc(17px * var(--reader-scale,1)); line-height:1.9; color:var(--ink);}
.reader-body h1{font-size:1.7em; margin:0 0 .35em; color:var(--accent); line-height:1.3;}
.reader-body .reader-meta{color:var(--muted); font-size:.85em; margin:0 0 1.6em;}
.reader-body p{margin:0 0 1.1em;}
.reader-body p.q{font-weight:600; color:var(--accent); margin-top:1.4em;}
.reader-body h2{font-size:1.18em; margin:1.8em 0 .6em; color:var(--accent); border-left:4px solid var(--accent); padding-left:.5em; line-height:1.4;}
.reader-body h2:first-child{margin-top:0;}
.reader-body img{max-width:100%; height:auto; border-radius:10px; margin:1.1em 0; display:block; background:#fff;}
.reader-body figure{margin:1.1em 0;}
.reader-body figcaption{font-size:.78em; color:var(--muted); text-align:center; margin-top:.4em;}
.reader-empty{text-align:center; color:var(--muted); padding:60px 20px; font-size:1em;}

/* 图文阅读浮动按钮（右下角、半透明、可拖动、按页显隐） */
.reader-fab{
  position:fixed; right:24px; bottom:60px; left:auto; top:auto; transform:none;
  z-index:25; display:inline-flex; align-items:center; gap:7px;
  padding:11px 22px; border-radius:999px;
  font-size:15px; font-weight:600; letter-spacing:3px; color:#fff;
  cursor:grab; touch-action:none; user-select:none; -webkit-user-select:none;
  background:linear-gradient(135deg, rgba(12,68,124,.82), rgba(22,104,178,.82));
  border:1px solid rgba(255,255,255,.6);
  box-shadow:0 8px 26px rgba(8,44,83,.36);
  backdrop-filter:blur(6px) saturate(1.25); -webkit-backdrop-filter:blur(6px) saturate(1.25);
  transition:opacity .3s ease, box-shadow .2s ease, background .2s ease;
}
.reader-fab .ico{width:18px; height:18px; flex:none; display:block;}
.reader-fab:hover{background:linear-gradient(135deg, rgba(12,68,124,.95), rgba(22,104,178,.95)); box-shadow:0 10px 30px rgba(8,44,83,.46);}
.reader-fab:active{cursor:grabbing;}
.reader-fab.dragging{cursor:grabbing; box-shadow:0 14px 36px rgba(8,44,83,.5);}
.reader-fab.hidden{opacity:0; pointer-events:none;}

@media (max-width:520px){
  .reader-bar{flex-wrap:wrap; gap:8px;}
  .reader-kicker{width:100%; order:-1;}
}