*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;background:#f3f6fa;color:#162233;font-family:system-ui,-apple-system,"Segoe UI",Arial,sans-serif}button{font:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}button:disabled{opacity:.35;cursor:default}button:focus-visible{outline:3px solid #1b82c8;outline-offset:2px}[hidden]{display:none!important}#app{height:100dvh;display:flex;flex-direction:column}.topbar{min-height:62px;padding:10px max(14px,env(safe-area-inset-right));display:flex;align-items:center;justify-content:space-between;background:white;border-bottom:1px solid #e4eaf0;gap:14px;flex-shrink:0}.brand{display:flex;gap:10px;align-items:center;font-size:17px;font-weight:700;white-space:nowrap}.brand img,.welcome img{border-radius:15px}.primary{border:0;border-radius:11px;background:#166caa;color:white;font-weight:650;padding:11px 18px}.primary:active{background:#0f5283}main{flex:1;display:flex;min-height:0;flex-direction:column}.empty{display:grid;place-items:center;flex:1;padding:28px}.welcome{max-width:460px;text-align:center}.welcome h1{font-size:clamp(22px,4.5vw,32px);margin:23px 0 12px;line-height:1.3}.welcome p{margin:0 0 24px;color:#526377;line-height:1.6}.welcome .large{padding:14px 26px;font-size:17px}.welcome .note{font-size:12px;margin:24px 0 0;color:#798699}.reader{display:flex;flex:1;flex-direction:column;min-height:0}.controls{display:flex;align-items:center;justify-content:space-between;gap:9px;background:white;border-bottom:1px solid #e3e9ef;padding:8px 14px;flex-shrink:0;min-height:58px}.filename{font-size:13px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:20px;max-width:36%}.group{display:flex;align-items:center;gap:5px;direction:ltr;flex-shrink:0}.subtle{background:#f5f7fa;border:1px solid #e7ecf2;color:#223549;border-radius:9px;min-width:35px;height:35px;padding:0 7px;font-size:22px;line-height:1}.fit{font-size:12px;font-weight:600}#pageCount,#zoomLabel{font-size:12px;color:#4e5d6d;min-width:62px;text-align:center;direction:rtl}#zoomLabel{min-width:40px}.viewer{position:relative;flex:1;min-height:0;overflow:auto;overscroll-behavior:contain;padding:20px 12px 34px;display:flex;flex-direction:column;align-items:center;gap:16px;background:#e9edf2}.page{flex-shrink:0;position:relative;background:white;box-shadow:0 3px 13px #1e293b25;min-height:140px}.page canvas{display:block;width:100%;height:100%}.placeholder{position:absolute;inset:0;display:grid;place-items:center;font-size:12px;color:#9aa8b7}#toast{position:fixed;bottom:max(18px,env(safe-area-inset-bottom));right:50%;transform:translateX(50%);background:#162233;color:white;border-radius:12px;padding:12px 16px;font-size:14px;z-index:5;box-shadow:0 5px 22px #14243e44;text-align:center;max-width:90vw}@media(max-width:640px){.topbar{min-height:58px}.controls{flex-wrap:wrap;justify-content:space-between;padding:7px 10px}.filename{flex:1 1 100%;max-width:100%;text-align:center;order:-1}.viewer{padding:12px 7px 20px;gap:12px}.group{gap:3px}.brand{font-size:15px}}