.flip-main { padding-bottom: 8px; }
.flip-head { display: flex; flex-wrap: wrap; gap: 8px 20px; justify-content: space-between; align-items: end; }
.flip-head h1 { font-size: 26px; }
.flip-head .hint { margin: 4px 0 0; }
.book-tabs { display: flex; gap: 6px; flex-wrap: wrap; }
.book-tabs a { padding: 8px 14px; border-radius: 99px; border: 2px solid var(--blue); text-decoration: none; font-weight: 700; min-height: 40px; }
.book-tabs a.on { background: var(--blue); color: #fff; }
.viewer { max-width: 1240px; margin: 12px auto 0; padding: 0 16px; outline: none; }
.viewer:fullscreen { max-width: none; background: #3b3530; padding: 12px; display: flex; flex-direction: column; }
.viewer:fullscreen .stage { flex: 1; }
.toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 8px 0; }
.toolbar .spacer { flex: 1; }
.tb { min-height: 44px; padding: 0 16px; border-radius: 12px; border: 2px solid var(--blue); background: #fff; color: var(--blue); font: inherit; font-weight: 700; cursor: pointer; }
.tb:hover { background: #eef4fb; }
.tb[aria-pressed="true"] { background: var(--blue); color: #fff; }
.pageno { font-size: 16px; color: var(--muted); padding: 0 6px; }
.viewer:fullscreen .pageno { color: #fff; }
.stage { position: relative; background: radial-gradient(ellipse at center, #f6efe2 0%, #e9dfcc 100%); border-radius: 18px; padding: 18px; min-height: 360px; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.fb-book { width: 100%; max-width: 1180px; margin: 0 auto; }
.fb-page { background: #fff; overflow: hidden; }
.fb-page canvas { display: block; width: 100%; height: 100%; }
.fb-page:not(.ready) { background: #fff linear-gradient(90deg, #fff 0%, #f3efe8 50%, #fff 100%); background-size: 200% 100%; animation: fbshine 1.2s linear infinite; }
@keyframes fbshine { to { background-position: -200% 0; } }
.fb-status { position: absolute; inset: auto 0; text-align: center; color: var(--muted); font-weight: 700; }
.thumbs { display: flex; gap: 10px; overflow-x: auto; padding: 12px 2px 6px; scroll-snap-type: x proximity; }
.no-thumbs .thumbs { display: none; }
.thumb { flex: 0 0 auto; width: 96px; padding: 0; border: 3px solid transparent; border-radius: 8px; background: #fff; cursor: pointer; scroll-snap-align: center; box-shadow: 0 1px 4px rgba(0,0,0,.15); }
.thumb canvas { display: block; width: 100%; aspect-ratio: 612 / 792; background: #f3efe8; border-radius: 5px 5px 0 0; }
.thumb span { display: block; font-size: 13px; font-weight: 700; color: var(--muted); padding: 2px 0 3px; }
.thumb.on { border-color: var(--red); }
.thumb.on span { color: var(--red); }
.viewer:fullscreen .thumb span { color: #ddd; }
@media (max-width: 640px) {
  .stage { padding: 8px; border-radius: 12px; }
  .toolbar .tb { padding: 0 12px; }
  .thumb { width: 72px; }
}

/* lesson audio bar above the book */
.flip-layout { max-width: 1240px; margin: 0 auto; display: flex; flex-direction: column; }
.flip-layout .viewer { margin-top: 4px; width: 100%; box-sizing: border-box; }
.listen { order: -1; margin: 12px 16px 0; min-width: 0; box-sizing: border-box; background: var(--card); border: 1px solid var(--line);
  border-radius: 16px; padding: 10px 14px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.listen h2 { margin: 0; font-size: 18px; white-space: nowrap; }
.listen .hint { display: none; }
.lp-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
#lp-lesson { flex: 1 1 260px; max-width: 420px; min-width: 0; min-height: 42px; font: inherit; font-size: 15px; padding: 4px 8px;
  border: 2px solid var(--blue); border-radius: 12px; background: #fff; color: var(--ink); }
#lp-audio { flex: 2 1 220px; min-width: 0; height: 42px; }
.lp-row { display: flex; gap: 6px; align-items: center; }
.lp-row .tb { min-height: 42px; padding: 0 12px; }
#lp-prev, #lp-next { font-size: 24px; line-height: 1; min-width: 44px; padding: 0; }
.lp-speed { display: flex; gap: 6px; align-items: center; font-size: 14px; color: var(--muted); }
#lp-rate { min-height: 42px; font: inherit; font-size: 15px; border: 2px solid var(--blue); border-radius: 12px; background: #fff; color: var(--blue); font-weight: 700; padding: 0 6px; }
.lp-check { display: flex; gap: 6px; align-items: center; font-size: 14px; cursor: pointer; white-space: nowrap; }
.lp-check input { width: 18px; height: 18px; }
.lp-msg { margin: 0; flex-basis: 100%; font-size: 14px; color: var(--red); }
.lp-msg:empty { display: none; }
.lp-links { margin: 0; font-size: 14px; white-space: nowrap; }
@media (min-width: 701px) { .listen h2, .lp-links { display: none; } }
.viewer:fullscreen { order: 0; }
@media (max-width: 700px) {
  .listen { padding: 10px; }
  .listen h2 { flex-basis: 100%; }
  #lp-lesson, #lp-audio { flex-basis: 100%; max-width: none; }
  .lp-row { flex: 1 1 auto; }
  .lp-row .tb { flex: 1 1 0; }
  .lp-speed { flex: 0 0 auto; }
}