.hafs{font-family:Hafs,AmiriQ,serif}
#reader{position:fixed;inset:0;z-index:50;background:#fffcf2;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
[data-dark] #reader{background:#15171c}
.rv{position:absolute;inset:0;direction:rtl}.rv.pages{display:flex;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.rv.pages .pg{flex:0 0 100%;height:100%;scroll-snap-align:start;scroll-snap-stop:always;padding:var(--safe-t) 0 var(--safe-b)}
.rv.scroll{overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch}.rv.scroll .pg{width:100%;aspect-ratio:1080/1490}
.pg canvas{width:100%;height:100%;display:block;touch-action:auto}
.rtop{position:absolute;top:0;left:0;right:0;display:flex;align-items:center;gap:2px;padding:calc(var(--safe-t) + 4px) 4px 4px;background:linear-gradient(rgba(14,59,46,.94),rgba(47,107,79,.85));transition:opacity .2s;z-index:3}
.rbot{position:absolute;bottom:0;left:0;right:0;display:flex;flex-direction:column;align-items:center;padding:0 12px calc(var(--safe-b) + 10px);pointer-events:none;transition:opacity .2s;z-index:3}.rbot>*{pointer-events:auto}
.nochrome .rtop{opacity:0;pointer-events:none}.nochrome:not(.playing) .rbot{opacity:0}.nochrome:not(.playing) .rbot>*{pointer-events:none}
.rctl{display:flex;align-items:center;background:rgba(14,59,46,.9);border-radius:40px;padding:4px;color:#fff}
.rseg{padding:7px 12px;border-radius:30px;font-size:12px;color:#fff}.rseg.on{background:var(--gold);color:#0e3b2e}.rplay{width:42px;height:38px;color:var(--gold);font-size:20px}
.rh{background:rgba(255,248,225,.97);color:#3b2f12;font-size:11px;padding:8px 12px;border-radius:14px;margin-bottom:8px;max-width:320px;text-align:right}