:root{
  --bg:#f4efe6; --panel:#fffdf8; --ink:#3a3226; --muted:#8a7f6d;
  --accent:#e8821e; --accent2:#3aa6a0; --line:#e7ddca; --shadow:0 10px 30px rgba(80,60,20,.18);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;}
body{
  font-family:"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;
  background:var(--bg); color:var(--ink); overflow:hidden;
}
#app{height:100dvh;display:flex;flex-direction:column}
.view{flex:1;min-height:0;display:flex;flex-direction:column}
.hidden{display:none!important}

/* top bar */
.topbar{display:flex;align-items:center;gap:12px;padding:12px 18px;background:var(--panel);
  border-bottom:1px solid var(--line);box-shadow:0 2px 10px rgba(0,0,0,.04);z-index:5}
.topbar h1{font-size:20px;margin:0;font-weight:800}
.topbar-right{margin-left:auto}
#search{padding:8px 12px;border:1px solid var(--line);border-radius:20px;background:#fff;font-size:14px;width:200px;outline:none}
#search:focus{border-color:var(--accent)}

/* shelf */
.shelf-body{flex:1;overflow:auto;padding:14px 18px 40px}
.ipad-hint{margin:10px 18px 0;padding:10px 14px;background:#fff3e0;border:1px solid #ffd9a0;
  border-radius:12px;font-size:13px;color:#7a5a1e;line-height:1.5}
.ipad-hint code{background:#fff;padding:2px 6px;border-radius:6px;font-weight:700;color:#c0611a}
.level-title{font-size:15px;font-weight:800;color:var(--muted);margin:18px 4px 10px;letter-spacing:.5px}
.book-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:16px}
.card{background:var(--panel);border-radius:14px;overflow:hidden;box-shadow:var(--shadow);cursor:pointer;
  transition:transform .15s ease, box-shadow .15s ease;display:flex;flex-direction:column}
.card:hover{transform:translateY(-4px);box-shadow:0 16px 34px rgba(80,60,20,.26)}
.card-img{width:100%;aspect-ratio:3/4;object-fit:cover;background:#ece3d2;display:block}
.card-body{padding:8px 10px 10px}
.card-title{font-size:13px;font-weight:700;line-height:1.25;max-height:2.4em;overflow:hidden}
.card-meta{font-size:11px;color:var(--muted);margin-top:3px;display:flex;gap:6px;align-items:center}
.badge{background:var(--accent);color:#fff;border-radius:8px;padding:1px 6px;font-size:10px;font-weight:700}
.audio-dot{color:var(--accent2);font-size:11px}
.progress{height:5px;background:var(--line);border-radius:4px;margin-top:7px;overflow:hidden}
.progress > i{display:block;height:100%;background:var(--accent2);width:0}

/* reader */
#reader{background:#2b2620}
.reader-bar{background:#37312a;color:#f6efe2;border-bottom:1px solid #4a4238}
.reader-bar h1{color:#f6efe2}
.reader-title{display:flex;flex-direction:column;line-height:1.2;margin-left:6px}
.reader-title small{color:#c9bfae;font-weight:500;font-size:12px}
.icon-btn{background:#4a4238;color:#f6efe2;border:none;border-radius:10px;padding:8px 14px;font-size:14px;cursor:pointer;font-weight:700}
.icon-btn:hover{background:#5a5142}
.switch{margin-left:auto;display:flex;align-items:center;gap:6px;font-size:13px;color:#e8ddca;cursor:pointer}
.switch input{width:16px;height:16px}

.stage{flex:1;min-height:0;display:flex;align-items:center;justify-content:center;gap:6px;
  padding:10px;position:relative;perspective:1600px;overflow:hidden}
.nav{width:46px;height:64px;border:none;border-radius:12px;background:rgba(255,255,255,.12);
  color:#fff;font-size:34px;cursor:pointer;align-self:center;transition:background .15s}
.nav:hover{background:rgba(255,255,255,.25)}
.nav:disabled{opacity:.25;cursor:default}
.page-wrap{position:relative;height:100%;max-width:92%;display:flex;align-items:center;justify-content:center;
  transform-style:preserve-3d}
#pageImg{max-height:100%;max-width:100%;object-fit:contain;border-radius:8px;
  box-shadow:0 14px 40px rgba(0,0,0,.45);background:#fff;user-select:none;
  backface-visibility:hidden}

/* flip animations */
@keyframes flipOutNext{from{transform:rotateY(0)}to{transform:rotateY(-100deg);opacity:.2}}
@keyframes flipInNext{from{transform:rotateY(100deg);opacity:.2}to{transform:rotateY(0);opacity:1}}
@keyframes flipOutPrev{from{transform:rotateY(0)}to{transform:rotateY(100deg);opacity:.2}}
@keyframes flipInPrev{from{transform:rotateY(-100deg);opacity:.2}to{transform:rotateY(0);opacity:1}}
.turn-next-out{animation:flipOutNext .26s ease-in forwards}
.turn-next-in{animation:flipInNext .26s ease-out forwards}
.turn-prev-out{animation:flipOutPrev .26s ease-in forwards}
.turn-prev-in{animation:flipInPrev .26s ease-out forwards}

/* text layer (transcript reading mode) */
.text-layer{position:absolute;inset:0;overflow:auto;background:#fffdf8;border-radius:8px;
  padding:26px 30px;font-size:24px;line-height:2;color:var(--ink);box-shadow:0 14px 40px rgba(0,0,0,.45)}
.text-layer p{margin:0 0 14px}
.w{display:inline-block;padding:1px 4px;border-radius:7px;cursor:pointer;transition:background .12s}
.w:hover{background:#ffe6c2}
.w.hl{background:var(--accent);color:#fff}

/* OCR overlay: invisible tappable word boxes laid over the scanned page */
.text-layer.ocr-layer{background:transparent;padding:0;box-shadow:none;overflow:visible;pointer-events:none;inset:auto}
.ow{position:absolute;pointer-events:auto;cursor:pointer;color:transparent;
  background:transparent;border-radius:6px;transition:background .12s,box-shadow .12s}
.ow:hover,.ow.hl{background:rgba(255,170,70,.45);box-shadow:0 0 0 2px rgba(255,150,50,.85)}

/* waveform compare */
.wave-box{position:absolute;inset:auto 0 0 0;background:rgba(20,16,10,.92);color:#fff;padding:12px 16px;
  border-radius:12px 12px 0 0;display:flex;flex-direction:column;gap:8px}
.wave-row{display:flex;align-items:center;gap:10px}
.wave-row span{width:34px;font-size:12px;color:#d8cdb8}
.wave-row canvas{flex:1;height:42px;background:#1c1812;border-radius:6px}
.mini{background:var(--accent);color:#fff;border:none;border-radius:8px;padding:6px 12px;font-size:13px;cursor:pointer;font-weight:700}
.mini:disabled{opacity:.4;cursor:default}
.mini.ghost{background:#4a4238}

/* toolbar */
.toolbar{display:flex;align-items:center;gap:8px;padding:10px 14px;background:#37312a;
  border-top:1px solid #4a4238;flex-wrap:wrap;justify-content:center}
.tool{background:#4a4238;color:#f6efe2;border:none;border-radius:12px;padding:10px 14px;font-size:14px;
  cursor:pointer;font-weight:700;transition:background .15s,transform .1s}
.tool:hover{background:#5a5142}
.tool:active{transform:scale(.96)}
.tool.rec{background:var(--accent)}
.tool.rec.on{background:#c0392b}
.page-ind{margin-left:auto;color:#c9bfae;font-size:13px;align-self:center}

/* word popup */
.word-pop{position:absolute;z-index:20;background:#fff;color:var(--ink);border-radius:12px;padding:12px;
  width:230px;box-shadow:0 12px 34px rgba(0,0,0,.4);display:flex;flex-direction:column;gap:8px}
.word-pop b{font-size:18px}
.word-pop input{padding:7px 9px;border:1px solid var(--line);border-radius:8px;font-size:14px;outline:none}
.wp-actions{display:flex;gap:8px}
.wp-actions .mini{background:var(--accent2)}

/* shelf help button */
.top-btn{margin-left:10px;padding:8px 12px;border:1px solid var(--line);border-radius:20px;
  background:#fff;color:var(--ink);font-size:13px;cursor:pointer;font-weight:700}
.top-btn:hover{border-color:var(--accent);color:var(--accent)}
.top-btn:disabled{opacity:.5;cursor:default}

/* 离线缓存进度条 */
.cache-bar{display:flex;align-items:center;gap:12px;margin:10px 18px 0;padding:8px 12px;
  background:#eaf7ee;border:1px solid #bfe6cb;border-radius:12px}
.cache-track{flex:1;height:10px;background:#d4ecdc;border-radius:6px;overflow:hidden}
.cache-fill{height:100%;width:0;background:linear-gradient(90deg,#34c759,#1f9d4d);transition:width .2s}
.cache-txt{font-size:13px;font-weight:700;color:#1f7a3d;white-space:nowrap}

/* help modal */
.modal{position:fixed;inset:0;z-index:50;background:rgba(40,30,15,.5);
  display:flex;align-items:center;justify-content:center;padding:18px}
.modal-card{position:relative;background:var(--panel);color:var(--ink);border-radius:18px;
  max-width:560px;width:100%;max-height:86dvh;overflow:auto;padding:22px 24px 26px;
  box-shadow:0 24px 60px rgba(0,0,0,.4)}
.modal-x{position:absolute;top:12px;right:14px;border:none;background:transparent;
  font-size:20px;cursor:pointer;color:var(--muted);line-height:1}
.modal-card h2{margin:0 0 14px;font-size:20px}
.help-sec{border-top:1px solid var(--line);padding:14px 0 4px}
.help-sec:first-of-type{border-top:none;padding-top:0}
.help-sec h3{margin:0 0 8px;font-size:15px;color:var(--accent)}
.help-sec p,.help-sec li{font-size:14px;line-height:1.6;color:#4a4032}
.help-sec ol,.help-sec ul{margin:6px 0 8px;padding-left:20px}
.help-url{margin:6px 0}
.help-url code{display:inline-block;background:#fff3e0;color:#c0611a;font-weight:800;
  padding:6px 12px;border-radius:10px;font-size:16px;word-break:break-all}
.help-note{color:var(--muted);font-size:13px}
.help-qr{margin:8px 0;display:flex;justify-content:center}
.help-qr img{width:160px;height:160px;background:#fff;border-radius:12px;padding:8px;
  box-shadow:0 2px 8px rgba(0,0,0,.12)}
.help-sec pre{background:#2b2620;color:#f6efe2;padding:12px 14px;border-radius:10px;
  font-size:12.5px;overflow:auto;white-space:pre-wrap;word-break:break-all}
.help-sec a{color:var(--accent2);font-weight:700}