@font-face{font-family:Naskh;src:url(vendor/naskh.ttf) format("truetype");font-display:swap}
:root{--g:#0f3d2e;--g2:#1d5c45;--bg:#f6f3ea;--card:#fff;--tx:#1b1b1b;--mut:#6b6b6b;--gold:#b8860b}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{touch-action:manipulation;margin:0;height:100%;background:#fff;color:var(--tx);font-family:Naskh,"Noto Naskh Arabic","Noto Nastaliq Urdu",serif;overflow:hidden;overscroll-behavior:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
.view{position:fixed;inset:0;display:none;flex-direction:column;background:var(--bg)}
.view.active{display:flex}
#viewer{background:#fff}
#pswp-host{position:absolute;inset:0;touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
#pswp-host .pswp,#pswp-host .pswp__img{touch-action:none}
#pswp-host .pswp{position:absolute!important}
.pswp{--pswp-bg:#fff;--pswp-placeholder-bg:#fff}
.pswp__img{image-rendering:auto}
.bar{display:flex;align-items:center;gap:6px;padding:6px 8px;z-index:100;color:#fff}
.bar.top{padding-top:calc(6px + env(safe-area-inset-top))}
.bar.bottom{padding-bottom:calc(6px + env(safe-area-inset-bottom))}
#viewer .bar{position:absolute;left:0;right:0;background:rgba(15,61,46,.92);transition:transform .2s,opacity .2s}
#viewer .bar.top{top:0}
#viewer .bar.bottom{bottom:0}
#viewer.chrome-hidden .bar.top{transform:translateY(-110%);opacity:0}
#viewer.chrome-hidden .bar.bottom{transform:translateY(110%);opacity:0}
.bar.solid{background:var(--g)}
.ib{min-width:42px;height:42px;font-size:24px;border-radius:10px;line-height:1}
.ib:active{background:rgba(255,255,255,.15)}
.ttl{flex:1;text-align:center;font-size:17px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#pageSlider{flex:1;accent-color:#e9c46a}
.tabs{display:flex;flex:1;gap:2px;overflow-x:auto}
.tabs button{flex:1;padding:8px 4px;border-radius:8px;font-size:16px;white-space:nowrap;opacity:.8}
.tabs button.on{background:rgba(255,255,255,.18);opacity:1}
.tabbody{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:8px 10px calc(16px + env(safe-area-inset-bottom))}
.hidden{display:none!important}
.row{display:flex;align-items:center;gap:10px;background:var(--card);border-radius:12px;padding:10px 12px;margin:6px 0;box-shadow:0 1px 2px rgba(0,0,0,.06);cursor:pointer}
.row:active{background:#eef3ef}
.num{min-width:38px;height:38px;border-radius:50%;background:var(--g);color:#fff;display:flex;align-items:center;justify-content:center;font-size:15px}
.nm{flex:1;font-size:20px}
.sub{font-size:13px;color:var(--mut)}
.pg{font-size:14px;color:var(--g2);white-space:nowrap}
.jump{display:flex;gap:8px;margin:8px 0}
.jump input{flex:1;font:inherit;font-size:18px;padding:8px 10px;border:1px solid #ccc;border-radius:10px;text-align:center}
.jump button,.btn{background:var(--g);color:#fff;border-radius:10px;padding:8px 16px;font-size:17px}
#search input#q{flex:1;font:inherit;font-size:18px;padding:8px 12px;border-radius:10px;border:0;outline:0;direction:rtl}
.modes{display:flex;gap:6px;padding:8px 10px 0}
.modes button{background:#e4e9e2;border-radius:16px;padding:4px 14px;font-size:15px}
.modes button.on{background:var(--g);color:#fff}
#results{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:6px 10px calc(16px + env(safe-area-inset-bottom))}
.res{display:flex;gap:10px;background:var(--card);border-radius:12px;padding:8px;margin:8px 0;cursor:pointer;box-shadow:0 1px 2px rgba(0,0,0,.06);align-items:center}
.res .th{width:84px;height:110px;flex:none;position:relative;background:#fafafa;border:1px solid #ddd;border-radius:4px;overflow:hidden}
.res .th img{width:100%;height:100%;object-fit:contain;display:block}
.res .snip{flex:1;min-width:0;height:110px;position:relative;overflow:hidden;border:1px solid #ddd;border-radius:4px;background:#fff}
.res .snip img{position:absolute;left:0;width:100%}
.res .meta{font-size:16px}
.info{color:var(--mut);text-align:center;padding:16px;font-size:16px}
.about{background:#fff;border-radius:12px;padding:14px;line-height:1.9;font-size:16px}
.about a{color:var(--g2)}
#toast{position:fixed;left:50%;bottom:90px;transform:translateX(-50%);background:rgba(0,0,0,.8);color:#fff;padding:8px 16px;border-radius:20px;font-size:15px;opacity:0;transition:opacity .3s;pointer-events:none;z-index:9999;white-space:nowrap}
#toast.show{opacity:1}
.prog{height:6px;background:#ddd;border-radius:3px;overflow:hidden;margin:8px 0}
.prog>div{height:100%;background:var(--g2);width:0}
.res{display:block}
.res .meta{padding:2px 4px 6px}
.res .snip{position:relative;width:100%;height:0;overflow:hidden;border:1px solid #ddd;border-radius:4px;background:#fff}
.res .snip img{position:absolute;left:0;top:0;width:100%;height:auto}
.res .th{width:90px;height:120px}
.hl{position:absolute;background:rgba(233,196,106,.28);border:2px solid rgba(200,120,0,.9);border-radius:4px;box-sizing:border-box;pointer-events:none}
.pg-hl{position:absolute;background:rgba(233,196,106,.25);border:3px solid rgba(220,120,0,.95);border-radius:6px;box-sizing:border-box;pointer-events:none;z-index:5;transition:opacity 1.2s}
.pg-hl.fade{opacity:0}
.sec{font-size:15px;color:#0f3d2e;margin:12px 4px 2px;font-weight:bold}
#pswp-host{z-index:0}
#pswp-host .pswp{z-index:1}
#viewer .bar{z-index:10}