:root { color-scheme: light dark; --bg:#e9ecf4; --bar:#fdfdff; --ink:#0f1530; --muted:#4f5874; --line:#dde2ee; --accent:#1f4bc0; --accent-ink:#fff; }
@media (prefers-color-scheme: dark) { :root { --bg:#0b0e1c; --bar:#141830; --ink:#eef0fa; --muted:#a7aec8; --line:#272d4f; --accent:#8ea9ff; --accent-ink:#0a1235; } }
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--ink); font-family: system-ui, 'Segoe UI', Tahoma, sans-serif; }
.bar { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: 10px; padding: 8px 12px; background: var(--bar); border-bottom: 1px solid var(--line); }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 42px; min-width: 42px; padding: 0 14px; border-radius: 12px; border: 1px solid var(--line); background: var(--bar); color: var(--ink); font: inherit; font-weight: 600; font-size: 0.95rem; cursor: pointer; text-decoration: none; }
.btn.dl { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); border-radius: 10px; padding: 0 18px; }
.btn:active { transform: scale(0.97); }
.pager { display: inline-flex; align-items: center; gap: 6px; height: 42px; padding: 0 14px; border-radius: 12px; border: 1px solid var(--line); font-weight: 600; font-variant-numeric: tabular-nums; direction: ltr; }
.pager .sep { color: var(--muted); }
.back { margin-inline-start: auto; color: var(--muted); text-decoration: none; font-size: 0.9rem; }
.title { margin: 10px 12px 0; text-align: center; color: var(--muted); font-size: 0.9rem; }
.pages { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 12px 8px 40px; }
.pages canvas { display: block; background: #fff; max-width: none; }
.page { background: #fff; box-shadow: 0 6px 18px -8px rgb(15 21 48 / 0.35); }
.status { text-align: center; color: var(--muted); padding: 24px; }
.status[hidden] { display: none; }