* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; font-family: Arial, Helvetica, sans-serif; background: #e5e5e5; }
.toolbar { position: sticky; top: 0; z-index: 2; height: 52px; display: flex; align-items: center; gap: 1rem; padding: .55rem 1rem; color: #fff; background: #1d1d1d; box-shadow: 0 1px 5px #0006; }
.toolbar strong { font-size: .8rem; letter-spacing: .08em; }
#status { color: #d5d5d5; font-size: .78rem; }
.controls { display: flex; align-items: center; gap: .5rem; margin-left: auto; }
.controls button, .controls a { min-width: 34px; min-height: 32px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid #5e5e5e; border-radius: 3px; color: #fff; background: #303030; font: inherit; text-decoration: none; cursor: pointer; }
.controls a { padding: 0 .7rem; font-size: .78rem; }
#zoom { width: 3.2rem; color: #ddd; font-size: .72rem; text-align: center; }
#pages { display: grid; justify-items: center; gap: 1rem; padding: 1.25rem; overflow: auto; }
.page { max-width: 100%; background: #fff; box-shadow: 0 2px 9px #0003; }
.page canvas { display: block; max-width: 100%; height: auto; }
.error { max-width: 42rem; margin: 4rem auto; padding: 1rem; color: #7f1212; background: #fff; border: 1px solid #d69b9b; }
@media (max-width: 600px) { .toolbar { padding-inline: .65rem; } .toolbar strong { display: none; } #pages { padding: .65rem; } }