/* ===== Reader action icons (Android-style) ===== */
.reader-actions{
  margin:10px 12px calc(12px + env(safe-area-inset-bottom));
  padding:6px;
  background:#fff;
  border:1px solid var(--line);
  border-radius:18px;
  box-shadow:0 2px 10px rgba(0,0,0,.06);
}
.reader-actions button{border:0!important;background:#fff!important;border-radius:12px;color:#3f454d;padding:7px 4px}
.reader-actions button small{font-size:11px;color:#3f454d;font-weight:800}
.reader-icon{width:24px;height:24px;display:grid;place-items:center}
.reader-icon svg{width:23px;height:23px;display:block}
.reader-icon svg path{fill:currentColor}
.icon-bookmark{color:#6f7780}
.icon-bookmark svg path{fill:none;stroke:currentColor;stroke-width:2;stroke-linejoin:round}
.icon-star{color:#f4b400}
.icon-share{color:#2e7d32}
.reader-actions #readerFavourite.active{background:#fff8df!important;box-shadow:inset 0 0 0 1px #f4b400}
.reader-actions #readerFavourite.active span{color:#f4b400}
.reader-actions #readerBookmark.active{background:#eef4ff!important;box-shadow:inset 0 0 0 1px #6f7780}
.reader-actions #readerBookmark.active span{color:#2f6fca}
.reader-actions #readerBookmark.active small{color:#2f6fca}
.reader-actions #readerShare.active span{color:#2e7d32}

/* ===== Book card: category badge + like/reader stats ===== */
.book-cover-wrap{position:relative}
.book-cover-wrap img{width:100%;aspect-ratio:3/4;object-fit:cover;background:#edf2ee;display:block;border-top-left-radius:14px;border-top-right-radius:14px}
.book-cat-badge{position:absolute;top:7px;left:7px;background:var(--primary);color:#fff;font-size:9px;font-weight:900;padding:3px 8px;border-radius:999px;box-shadow:0 2px 6px rgba(0,0,0,.18);max-width:80%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.book-stats{display:flex;align-items:center;gap:12px;margin-top:5px}
.book-stat{display:inline-flex;align-items:center;gap:3px;font-size:10px;font-weight:800;color:var(--muted)}
.book-stat svg{width:14px;height:14px}
.book-stat.like svg path{fill:#9aa4b0}
.book-stat.read svg path{fill:#3d7bd0}

/* ===== Detail action buttons (Mulai Membaca + Suka) ===== */
.detail-read-row{display:grid;grid-template-columns:1fr 108px;gap:10px;margin-top:10px}
.read-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px}
.read-btn .btn-ic{width:20px;height:20px}
.read-btn .btn-ic path{fill:#fff}
.like-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;border:1.5px solid #E53935;color:#E53935;background:#fff;border-radius:14px;font-weight:900}
.like-btn .btn-ic{width:20px;height:20px}
.like-btn .btn-ic path{fill:none;stroke:#E53935;stroke-width:2;stroke-linejoin:round}
.like-btn.active{background:#FDECEA}
.like-btn.active .btn-ic path{fill:#E53935;stroke:#E53935}


/* Smooth PDF zoom v45 */
.reader-viewport{overflow:auto!important;overscroll-behavior:contain;touch-action:none;background:#111!important}
.reader-track{transition:transform .22s ease!important;align-items:flex-start!important}
.reader-page{overflow:visible!important;display:flex!important;align-items:flex-start!important;justify-content:center!important;padding:12px!important;min-width:100%!important}
.reader-page canvas{transition:width .16s ease,height .16s ease,box-shadow .16s ease!important;box-shadow:0 8px 28px rgba(0,0,0,.38);border-radius:4px;background:#fff;max-width:none!important;max-height:none!important;will-change:width,height}
.reader-zoom-controls{position:absolute;right:12px;bottom:84px;z-index:5;display:flex;align-items:center;gap:6px;background:rgba(17,24,39,.78);backdrop-filter:blur(8px);border-radius:999px;padding:6px;box-shadow:0 6px 20px rgba(0,0,0,.28)}
.reader-zoom-controls button{width:34px;height:34px;border:0;border-radius:50%;background:#fff;color:#2e7d32;font-weight:900;font-size:20px;line-height:1}.reader-zoom-controls button:disabled{opacity:.45}.reader-zoom-controls span{min-width:48px;text-align:center;color:#fff;font-size:12px;font-weight:900}
.reader-screen.zoomed .reader-nav{opacity:.35}


/* Isolate active page while zoomed v46 */
.reader-screen.zoomed .reader-track{display:block!important;transform:none!important;min-width:100%!important;height:100%!important}
.reader-screen.zoomed .reader-page{min-width:100%!important;width:max-content!important;min-height:100%!important;margin:0 auto!important}
.reader-screen.zoomed .reader-page.zoom-hidden{display:none!important}
.reader-screen.zoomed .reader-page:not(.zoom-hidden){display:flex!important}