.fa-document-viewer[hidden] { display: none; }
.fa-document-viewer { position: fixed; inset: 0; z-index: 10050; background: rgba(0,0,0,.72); display: flex; align-items: center; justify-content: center; padding: 16px; }
.fa-viewer-panel { width: 96vw; height: 94vh; display: flex; flex-direction: column; background: #fff; border-radius: 8px; overflow: hidden; color: #222; }
.fa-viewer-panel:fullscreen { width: 100vw; height: 100vh; }
.fa-viewer-panel header { display: flex; align-items: center; justify-content: space-between; padding: 10px 16px; gap: 16px; border-bottom: 1px solid #ddd; }
.fa-viewer-panel h3 { margin: 0; overflow-wrap: anywhere; }
.fa-viewer-panel nav { display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; padding: 10px; background: #f5f5f5; }
.fa-viewer-panel button { border: 1px solid #bbb; border-radius: 4px; background: #fff; padding: 7px 12px; cursor: pointer; color: #222; }
.fa-viewer-panel button:hover { background: #e7edf5; }
.fa-viewer-panel button:disabled { opacity: .45; cursor: default; }
.fa-viewer-content { flex: 1; min-height: 0; overflow: auto; background: #525659; padding: 20px; text-align: center; color: #fff; scrollbar-gutter: stable; }
.fa-pdf-page { width: max-content; margin: 0 auto 20px; }
.fa-pdf-page canvas { display: block; background: white; box-shadow: 0 2px 8px #222; }
.fa-pdf-page div { padding: 8px; font-size: 12px; }
.fa-viewer-content img { max-width: 100%; max-height: 100%; object-fit: contain; }
@media (max-width: 600px) { .fa-document-viewer { padding: 4px; } .fa-viewer-panel { width: 100%; height: 98vh; } .fa-viewer-panel nav { gap: 5px; } .fa-viewer-panel button { padding: 6px; } }