:root { color-scheme: light; }
* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; padding: 0; }
#app { width: 100%; height: 100%; }
body { overflow: hidden; background: #f0f2f5; }
[hidden] { display: none !important; }
#document-view { height: 100%; display: flex; align-items: center; }
#embedpdf { display: block; width: 100%; height: 100%; border: 0; }
#fallback-view { height: 100%; overflow: auto; background: #525659; font-family: Arial, sans-serif; }
.toolbar { min-height: 56px; display: flex; align-items: center; gap: 20px; padding: 12px 24px; background: #323639; color: #fff; position: sticky; top: 0; box-shadow: 0 2px 5px #0003; }
.page-count { font-size: 13px; white-space: nowrap; }
.toolbar nav { margin-left: auto; }
.toolbar nav { display: flex; align-items: center; gap: 8px; }
.toolbar a, .toolbar button { color: #fff; font: inherit; font-size: 12px; background: transparent; text-decoration: none; border: 1px solid #ffffff4d; padding: 7px 10px; border-radius: 3px; cursor: pointer; white-space: nowrap; }
.toolbar a:hover, .toolbar button:hover { background: #ffffff1a; }
:focus-visible { outline: 2px solid #66cfff; outline-offset: 3px; }
.paper { width: min(900px, calc(100% - 32px)); margin: 20px auto; background: #fff; box-shadow: 0 2px 8px #0006; }
.paper img { display: block; width: 100%; height: auto; }
.no-script { height: 100%; overflow: auto; text-align: center; }
.no-script img { width: min(100%, 900px); height: auto; }
@media (max-width: 540px) { .toolbar { padding: 10px 12px; gap: 10px; flex-wrap: wrap; } .toolbar nav { margin-left: auto; } .paper { width: calc(100% - 16px); margin: 10px auto; } }
@media print { html, body, #app, #fallback-view { height: auto; overflow: visible; background: white; } .toolbar { display: none !important; } .paper { width: 100%; margin: 0; box-shadow: none; } @page { size: A4; margin: 0; } }