:root{
  --bg:#0b0b0b;
  --fg:#f5f5f5;
  --accent:#2fa4ff;
}
*{box-sizing:border-box}
html,body{height:100%;margin:0;background:var(--bg);color:var(--fg);font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial;}
header{display:flex;align-items:center;justify-content:space-between;padding:8px 12px;background:rgba(0,0,0,0.4);backdrop-filter: blur(6px);}
header h1{font-size:16px;margin:0}
.controls{display:flex;align-items:center;gap:8px}
#filePicker{font-size:14px}
button{background:transparent;border:1px solid rgba(255,255,255,0.12);color:var(--fg);padding:6px 10px;border-radius:8px;font-size:20px}
#pageIndicator{min-width:80px;text-align:center;font-size:14px}
#viewer{height:calc(100vh - 112px);display:flex;align-items:center;justify-content:center;overflow:hidden;position:relative}
#pageImage, #pageCanvas{max-width:100%;max-height:100%;width:auto;height:auto;display:block;touch-action:none}
#pageImage{background:#111;image-rendering:crisp-edges}
#pageCanvas{background:#111;display:none}
footer{font-size:13px;padding:8px 12px;text-align:center;color:rgba(255,255,255,0.7)}
.hidden{display:none}
.fullscreen {position:fixed;top:0;left:0;right:0;bottom:0;z-index:9999}
@media (orientation:landscape) {
  header h1{font-size:14px}
  #viewer{height:calc(100vh - 88px)}
}