viewer.css

:root {
  --bg:#1e2227; --panel:#262b32; --line:#3a414a;
  --txt:#d7dde3; --muted:#8b95a1; --accent:#4ea1ff;
}
* { box-sizing:border-box; }
html,body { margin:0; height:100%; font-family:-apple-system,Segoe UI,Roboto,sans-serif; color:var(--txt); background:var(--bg); overscroll-behavior:none; -webkit-tap-highlight-color:transparent; }
#app { display:flex; flex-direction:column; height:100vh; height:100dvh; }
header { display:flex; align-items:center; gap:12px; padding:8px 14px; background:var(--panel); border-bottom:1px solid var(--line); flex-wrap:nowrap; white-space:nowrap; overflow-x:auto; scrollbar-width:none; }
header::-webkit-scrollbar { display:none; }
header > * { flex-shrink:0; }
header h1 { font-size:14px; font-weight:600; margin:0 8px 0 0; }
.btn { background:#323841; color:var(--txt); border:1px solid var(--line); border-radius:6px; padding:6px 10px; font-size:0.875rem; cursor:pointer; }
.btn:hover { border-color:var(--accent); }
.btn.icon { display:flex; align-items:center; justify-content:center; padding:6px; width:38px; height:38px; }
.btn.dl { display:flex; align-items:center; gap:6px; }
.btn.dl[hidden] { display:none; }
.btn.info { display:flex; align-items:center; justify-content:center; padding:7px 8px; } /* same 30px height as the other toolbar buttons */
.btn.icon svg { width:24px; height:24px; }
.menu { position:relative; }
.menu-list { position:fixed; z-index:1000; min-width:180px; background:var(--panel); border:1px solid var(--line); border-radius:8px; padding:4px; box-shadow:0 8px 24px rgba(0,0,0,.4); }