*{box-sizing:border-box}html,body{margin:0;padding:0;background:#f5f1e8;color:#241f1a;font-family:"Noto Nastaliq Urdu","Noto Sans Arabic",Tahoma,Arial,sans-serif}body{min-height:100vh}.topbar{position:sticky;top:0;z-index:10;background:#fffdf8;border-bottom:1px solid #d9c9ad;box-shadow:0 2px 12px #00000012;padding:12px 18px;display:flex;align-items:center;justify-content:space-between;gap:18px}.topbar h1{margin:0;font-size:28px}.topbar p{margin:2px 0 0;font-size:15px;color:#6b5b47}.controls{display:flex;align-items:center;gap:7px;flex-wrap:wrap}.controls button,.controls input{border:1px solid #cdbd9f;background:white;border-radius:7px;padding:7px 10px;font-size:14px}.controls button{cursor:pointer}.controls button:hover{background:#f0e8d9}.controls input{width:75px;text-align:center;direction:ltr}main{max-width:1000px;margin:0 auto;padding:18px 12px 28px}.info{display:flex;justify-content:space-between;align-items:center;margin:0 auto 12px;max-width:820px;font-size:14px;color:#6b5b47}.viewer{position:relative;display:flex;justify-content:center;align-items:center;gap:8px}.viewer img{display:block;width:min(820px,92vw);height:auto;background:#fff;box-shadow:0 3px 18px #00000025;border:1px solid #d7c8ad}.side{position:fixed;top:50%;transform:translateY(-50%);width:44px;height:64px;border:1px solid #cdbd9f;background:#fffdf8;color:#4b3d2e;border-radius:9px;font-size:38px;line-height:1;cursor:pointer;box-shadow:0 2px 10px #00000018}.prevSide{right:18px}.nextSide{left:18px}.hint{text-align:center;color:#7b6b57;margin-top:12px;font-size:13px}footer{text-align:center;border-top:1px solid #d9c9ad;padding:15px;color:#806f5a;background:#fffdf8}@media(max-width:700px){.topbar{position:static;display:block;text-align:center}.topbar h1{font-size:23px}.controls{justify-content:center;margin-top:9px}.side{position:static;transform:none;width:38px;height:52px;font-size:30px;flex:none}.viewer{gap:4px}.viewer img{width:calc(100vw - 70px)}.info{padding:0 5px}.prevSide{order:3}.nextSide{order:1}.viewer img{order:2}}