/* ============================================================
   SDSZ 生态图鉴 · PDF 在线翻阅
   设计语言与主站一致：深红 #770000 / 宋体标题 / 纸白背景
   ============================================================ */

:root{
  --red:#770000;
  --red-a16:rgba(119,0,0,.16);
  --red-a08:rgba(119,0,0,.08);
  --ink-a92:rgba(0,0,0,.92);
  --ink-a72:rgba(0,0,0,.72);
  --ink-a55:rgba(0,0,0,.55);
  --ink-a38:rgba(0,0,0,.38);
  --ink-a14:rgba(0,0,0,.14);
  --ink-a08:rgba(0,0,0,.08);
  --paper:#fff;
  --pr:.707;  /* PDF 页面宽/高比，app.js 依据实际文档更新 */
  --serif:"Noto Serif SC","Songti SC","SimSun",Georgia,serif;
  --sans:"Noto Sans SC","PingFang SC","Microsoft YaHei",-apple-system,"Segoe UI",sans-serif;
}

*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%}
body{
  font-family:var(--sans);color:var(--ink-a92);
  background:radial-gradient(120% 90% at 50% 0%,#fcfbf8 0%,#f7f5f0 55%,#efece4 100%);
  display:flex;flex-direction:column;height:100dvh;overflow:hidden;
}
button{font-family:inherit}

/* ---------------- 顶栏 ---------------- */
.topbar{
  flex:none;display:flex;align-items:center;gap:14px;
  padding:10px 20px;
  background:rgba(255,255,255,.88);
  border-bottom:1px solid var(--ink-a08);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
}
.topbar-left{display:flex;align-items:center;gap:12px;min-width:0}
.brand{display:flex;align-items:baseline;gap:10px;min-width:0}
.brand-title{
  font-family:var(--serif);font-size:19px;font-weight:700;color:var(--red);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.brand-sub{flex:none;font-size:11px;letter-spacing:.16em;color:var(--ink-a38);white-space:nowrap}
.controls{display:flex;align-items:center;gap:8px;margin-inline:auto}
.topbar-right{display:flex;align-items:center;gap:8px}

.ctrl-btn{
  width:40px;height:40px;flex:none;
  display:inline-flex;align-items:center;justify-content:center;
  border:1px solid var(--ink-a14);border-radius:6px;
  background:var(--paper);color:var(--ink-a72);cursor:pointer;
  transition:border-color .2s,color .2s,background-color .2s;
  text-decoration:none;
}
.ctrl-btn:hover{border-color:var(--red);color:var(--red);background:var(--red-a08)}
.ctrl-btn:focus-visible{outline:2px solid var(--red);outline-offset:2px}
.ctrl-btn[disabled]{opacity:.32;cursor:default;pointer-events:none}
.ctrl-btn svg{width:19px;height:19px}
.ctrl-btn .icon-exit{display:none}
.ctrl-btn.is-on .icon-exit{display:block}
.ctrl-btn.is-on .icon-enter{display:none}

.page-indicator{
  display:flex;align-items:baseline;gap:7px;justify-content:center;
  min-width:112px;padding:0 4px;
  font-family:Georgia,"Times New Roman",serif;font-size:14px;color:var(--ink-a55);
}
.page-indicator input{
  width:4ch;border:0;border-bottom:1px solid var(--ink-a14);
  background:transparent;text-align:center;outline:0;
  font:inherit;font-weight:600;color:var(--red);padding:2px 0;
  -moz-appearance:textfield;appearance:textfield;
}
.page-indicator input::-webkit-outer-spin-button,
.page-indicator input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.page-indicator input:focus{border-bottom-color:var(--red)}
.page-indicator input:disabled{opacity:.4}
.page-total{white-space:nowrap}

/* ---------------- 舞台 ---------------- */
.stage{
  position:relative;flex:1;min-height:0;
  display:flex;align-items:center;justify-content:center;
  padding:22px 18px;
}

/* 书本容器：宽度 = 可用宽度 与 “可用高度对应的书宽” 取小，
   --avail-w / --avail-h 由 app.js 通过 ResizeObserver 实时写入 */
.book-wrap{
  position:relative;
  width:min(var(--avail-w,100%),calc(var(--avail-h,60vh) * var(--pr) * 2));
}
.book-wrap[data-orient="portrait"]{
  width:min(var(--avail-w,100%),calc(var(--avail-h,60vh) * var(--pr)));
}

/* 书脊阴影：附着在书页自身（--left/--right 由 StPageFlip 切换），
   翻页时贴着页边走，不会浮在动画上方；竖屏单页无书脊 */
.page::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  backface-visibility:inherit;-webkit-backface-visibility:inherit;
}
.book-wrap[data-orient="landscape"] .page.--right::after{
  background:linear-gradient(90deg,rgba(59,44,28,.13),rgba(59,44,28,0) 6%);
}
.book-wrap[data-orient="landscape"] .page.--left::after{
  background:linear-gradient(270deg,rgba(59,44,28,.13),rgba(59,44,28,0) 6%);
}

#book{
  user-select:none;-webkit-user-select:none;
}

/* 书本投影：贴合可见页的独立底层（封面=右半本、封底=左半本），
   几何由 app.js 依据 StPageFlip 边界实时更新 */
.book-shadow{
  position:absolute;top:0;left:0;width:0;height:0;
  pointer-events:none;
  box-shadow:
    0 0 0 1px rgba(59,44,28,.06),
    0 1px 2px rgba(31,26,20,.08),
    0 14px 34px -10px rgba(31,26,20,.26),
    0 40px 90px -28px rgba(31,26,20,.38);
  transition:left .35s ease,width .35s ease,top .35s ease,height .35s ease;
}

/* 书页（定位由 StPageFlip 接管） */
.page{background:var(--paper);overflow:hidden}
.page-num{
  position:absolute;left:50%;bottom:12px;transform:translateX(-50%);
  font-family:Georgia,serif;font-size:12px;color:var(--ink-a38);
}

/* ---------------- 底部提示 ---------------- */
.hint{
  flex:none;padding:0 16px 14px;text-align:center;
  font-size:12px;color:var(--ink-a38);
}
.hint kbd{
  font:inherit;color:var(--ink-a55);background:var(--paper);
  border:1px solid var(--ink-a14);border-bottom-width:2px;border-radius:4px;
  padding:0 5px;margin:0 1px;
}

/* ---------------- 覆盖层（加载 / 错误） ---------------- */
.overlay{
  position:absolute;inset:0;z-index:40;
  display:flex;align-items:center;justify-content:center;padding:24px;
  background:rgba(247,245,240,.75);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
}
.overlay[hidden]{display:none}
.overlay-card{
  max-width:440px;padding:26px 34px;text-align:center;
  background:var(--paper);border:1px solid var(--ink-a08);border-radius:10px;
  box-shadow:0 18px 50px -14px rgba(31,26,20,.22);
}
.spinner{
  width:32px;height:32px;margin:0 auto 14px;border-radius:50%;
  border:3px solid var(--red-a16);border-top-color:var(--red);
  animation:spin .9s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}
.overlay-title{font-family:var(--serif);font-size:19px;font-weight:700;margin-bottom:8px}
.overlay-text{font-size:13px;line-height:1.7;color:var(--ink-a55);word-break:break-all}
.progress{width:230px;height:3px;margin:14px auto 0;border-radius:2px;overflow:hidden;background:var(--ink-a08)}
.progress-bar{height:100%;width:0;background:var(--red);transition:width .25s}
.btn-solid{
  margin-top:18px;height:38px;padding:0 24px;border:0;border-radius:6px;
  background:var(--red);color:#fff;font-size:13.5px;letter-spacing:.05em;cursor:pointer;
  transition:background-color .2s;
}
.btn-solid:hover{background:#8f0a0a}
.btn-solid:focus-visible{outline:2px solid var(--red);outline-offset:2px}

.sr-only{
  position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;
  clip:rect(0 0 0 0);clip-path:inset(50%);overflow:hidden;white-space:nowrap;
}

/* ---------------- 响应式 ---------------- */
@media (max-width:640px){
  .topbar{flex-wrap:wrap;padding:8px 12px;gap:8px 10px}
  .brand-title{font-size:16px}
  .brand-sub{display:none}
  .controls{order:5;width:100%;margin:0;justify-content:center}
  .stage{padding:12px 10px}
  .hint{display:none}
}
@media (max-height:480px){.hint{display:none}}

@media (prefers-reduced-motion:reduce){
  .spinner{animation-duration:1.8s}
  .progress-bar{transition:none}
}