:root{font-family:Tahoma,Arial,sans-serif;color:#153d34;background:#fff;font-size:16px}*{box-sizing:border-box}body{margin:0;min-height:100dvh;display:flex;flex-direction:column;background:#fff}header{padding:20px 32px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #153d3415;background:#ffffff80}.brand{display:flex;align-items:center;gap:14px}.mark{font-size:42px;color:#008365}h1{font-size:20px;margin:0 0 7px;font-weight:700}header p{font-size:14px;margin:0;color:#61766e}button,select{font:inherit;color:inherit;background:#ffffffdd;border:1px solid #b9c9c1;border-radius:8px;min-height:44px;padding:9px 18px;cursor:pointer}button:hover{background:#e0ede7}button:focus-visible,select:focus-visible,a:focus-visible{outline:3px solid #b68e38;outline-offset:3px}button:disabled{opacity:.35;cursor:default}main{flex:1;display:flex;align-items:center;justify-content:center;padding:26px 20px;min-height:0}#stage{position:relative;display:flex;align-items:center;justify-content:center;width:100%;min-height:280px}#book{direction:ltr;filter:drop-shadow(0 20px 22px #143d342b)}.page{background:#fff;overflow:hidden}.page-inner{height:100%;width:100%;position:relative;transform:none}.page-inner>img{width:100%;height:100%;display:block;user-select:none}.qr-link{position:absolute;display:block;border-radius:2px}.qr-link:hover{outline:3px solid #008568;box-shadow:0 0 0 5px #fff9}.page-inner:after{content:'';position:absolute;inset:0;pointer-events:none;box-shadow:inset 2px 0 9px #00000010}#loading{position:absolute;background:#fff;padding:18px;border-radius:9px}footer{text-align:center;padding:12px 20px 20px}.navigation{display:flex;align-items:center;justify-content:center;gap:18px}.page-picker{display:flex;align-items:center;gap:8px;font-size:14px}#page{padding:8px;max-width:82px}.hint{font-size:14px;color:#60736b;margin:17px 0 0}dialog{padding:0;border:0;width:95vw;height:94dvh;max-width:1600px;max-height:96dvh;border-radius:12px;background:#fff}dialog::backdrop{background:#09231fd9}.reader-toolbar{display:flex;justify-content:space-between;align-items:center;padding:12px 18px;background:#fff;gap:10px}#image-scroll{height:calc(100% - 70px);overflow:auto;padding:20px;direction:ltr}#large-page{width:min(100%,1000px);margin:auto;position:relative;direction:rtl}#large-page>img{width:100%;display:block}#large-page.enlarged{width:1600px;max-width:none}#reader-label{font-size:14px}@media(max-width:600px){header{padding:15px 17px}h1{font-size:17px}.mark{font-size:30px}.brand{gap:9px}header p{font-size:12px}header button{padding:8px 11px}main{padding:20px 10px}.navigation{gap:8px}.navigation button{padding:8px 12px}.hint{font-size:12px;line-height:1.8}.page-picker{gap:5px}footer{padding:10px}.reader-toolbar{padding:10px}#image-scroll{padding:7px}}

#book{width:100%;max-width:min(1360px,calc((100dvh - 235px)*2));touch-action:pan-y pinch-zoom;user-select:none;-webkit-user-select:none}.qr-link{min-width:24px;min-height:24px}#stage{min-height:0}button,select{touch-action:manipulation}.hint{line-height:1.7}#large-page.enlarged{width:max(100%,1100px)}@media(max-width:800px){#book{max-width:min(100%,calc(100dvh - 210px))}header{padding:12px 16px}main{padding:16px 12px}footer{padding:10px 12px max(16px,env(safe-area-inset-bottom))}.navigation{gap:10px}.navigation button{min-width:80px}.hint{font-size:13px;margin-top:12px}dialog{width:100%;height:100dvh;max-height:100dvh;border-radius:0}.reader-toolbar{padding-top:max(12px,env(safe-area-inset-top))}}@media(max-height:500px){header{padding:8px 16px}header p,.hint{display:none}main{padding:8px 12px}footer{padding:8px}#book{max-width:calc((100dvh - 140px)*2)}}
#book{min-width:0!important;height:min(680px,calc(100dvh - 235px),calc((100vw - 40px)/2));min-height:0!important}#book .stf__wrapper{height:100%}@media(max-width:800px){#book{height:min(calc(100vw - 24px),calc(100dvh - 210px))}}@media(max-height:500px){#book{height:min(calc(100vw - 24px),calc(100dvh - 140px));max-width:min(100%,calc(100dvh - 140px))}}
@media(max-height:500px){#book{height:min(calc(100vw - 24px),calc(100dvh - 155px));max-width:min(100%,calc(100dvh - 155px))}}

/* Mirror page motion for Arabic binding, then restore readable page contents. */
#book{transform:scaleX(-1)}#book .page-inner{transform:scaleX(-1)}.navigation{flex-direction:row}

#book{width:var(--book-width,100%)!important;height:var(--book-height,400px)!important;max-width:none!important}.compact-landscape header{height:0;padding:0;border:0}.compact-landscape .brand{display:none}.compact-landscape #zoom{position:fixed;bottom:max(8px,env(safe-area-inset-bottom));right:max(10px,env(safe-area-inset-right));z-index:10;min-height:40px;padding:7px 12px}.compact-landscape main{padding:4px max(8px,env(safe-area-inset-right)) 4px max(8px,env(safe-area-inset-left));align-items:center}.compact-landscape footer{padding:4px 84px max(4px,env(safe-area-inset-bottom))}.compact-landscape .hint{display:none}.compact-landscape .navigation{gap:10px}.compact-landscape .navigation button{padding:7px 12px;min-width:78px}.compact-landscape #book{filter:drop-shadow(0 5px 8px #143d3425)}

.view-actions{display:flex;align-items:center;gap:6px}#page-zoom{padding:8px 12px}#fullscreen-help{height:auto;width:min(90vw,460px);padding:24px;line-height:1.8;border-radius:12px}#fullscreen-help h2{font-size:20px;margin-top:0}.compact-landscape #page-zoom{position:fixed;bottom:max(8px,env(safe-area-inset-bottom));left:max(8px,env(safe-area-inset-left));z-index:10;min-height:40px}.compact-landscape #zoom{font-size:12px;padding:7px 9px}.compact-landscape footer{padding-left:56px;padding-right:112px}@media(max-width:420px){.view-actions{gap:4px}#zoom{font-size:12px;padding:8px}.brand .mark{display:none}}