* { box-sizing: border-box; } body { margin: 0; font: 14px system-ui, sans-serif; color: #202124; } header { height: 52px; display: flex; align-items: center; gap: 14px; padding: 8px 14px; border-bottom: 1px solid #ddd; } header strong { font-size: 18px; } header input { flex: 1; max-width: 620px; padding: 8px; } header span { margin-left: auto; color: #666; } main { height: calc(100vh - 52px); display: grid; grid-template-columns: 330px 430px minmax(500px, 1fr); } aside, .details { overflow: auto; border-right: 1px solid #ddd; } .person { border-bottom: 1px solid #ddd; } .person-title { font-weight: 650; padding: 10px 12px; background: #f6f7f8; } .doc { display: block; width: 100%; border: 0; border-top: 1px solid #eee; background: white; text-align: left; padding: 8px 14px; cursor: pointer; } .doc:hover, .doc.active { background: #e9f1ff; } .details { padding: 14px; } .field { margin-bottom: 13px; } .field b { display: block; font-size: 12px; color: #666; margin-bottom: 3px; text-transform: uppercase; } .field div { white-space: pre-wrap; } .viewer { position: relative; background: #555; overflow: hidden; } .viewer #pdfViewer { position: relative; width: 100%; height: 100%; overflow-y: auto; overflow-x: hidden; background: #525659; } .viewer #pdfMessage { position: absolute; inset: 0; display: grid; place-items: center; color: white; pointer-events: none; z-index: 2; } .viewer.loaded #pdfMessage { display: none; } dialog { width: min(720px, 90vw); } dialog label { display: block; margin: 12px 0; font-weight: 600; } dialog input { display: block; width: 100%; padding: 8px; margin-top: 5px; } .actions { display: flex; justify-content: flex-end; gap: 8px; } .hint { color: #666; } .error { color: #a40000; } .muted { color: #777; } .error-banner { padding: 10px 16px; background: #fff1f1; border-bottom: 1px solid #c62828; color: #9b1c1c; white-space: pre-wrap; } .dialog-error { margin-top: 12px; padding: 10px; border: 1px solid #c62828; background: #fff1f1; color: #9b1c1c; white-space: pre-wrap; } #pdfMessage { white-space: pre-wrap; padding: 20px; color: #8a1c1c; } .person-title { color: #1a56db; font-size: 15px; } .field { margin-bottom: 0; padding: 7px 6px; border-radius: 3px; } .field b { display: block; font-size: 11px; color: #666; margin-bottom: 2px; text-transform: uppercase; } .field div { white-space: pre-wrap; } .field.row-even { background: #fff; } .field.row-odd { background: #eef2f6; } hr.field-sep { border: none; border-top: 2px solid #9ca3af; margin: 14px 0; } .checkbox-label { display: flex !important; align-items: center; gap: 8px; font-weight: 400 !important; } .checkbox-label input { display: inline; width: auto; margin-top: 0; } /* PDF.js viewer */ .pdf-v-overlay { position: absolute; inset: 0; z-index: 1; } .pdf-v-loading { padding: 40px 20px; color: #aaa; text-align: center; font-size: 15px; } .pdf-v-error { padding: 30px 20px; text-align: center; } .pdf-v-error-msg { color: #f88; font-size: 16px; margin-bottom: 12px; white-space: pre-wrap; } .pdf-v-retry { padding: 8px 24px; font-size: 14px; cursor: pointer; border: 1px solid #888; background: #444; color: #eee; border-radius: 4px; } .pdf-v-retry:hover { background: #555; } .pdf-v-pages { box-sizing: border-box; width: 100%; height: 100%; overflow-y: scroll; overflow-x: auto; scrollbar-gutter: stable; display: flex; flex-direction: column; align-items: center; align-items: safe center; /* keeps left edge reachable when zoomed wider than the pane */ gap: 16px; padding: 12px; } .pdf-v-page { background: white; box-shadow: 0 1px 5px rgba(0, 0, 0, 0.35); flex-shrink: 0; } .pdf-v-page canvas { display: block; } /* Zoom toolbar */ .pdf-v-toolbar { position: absolute; top: 10px; right: 24px; z-index: 3; display: flex; align-items: center; gap: 2px; background: rgba(35, 35, 38, 0.88); border: 1px solid #666; border-radius: 6px; padding: 3px 4px; box-shadow: 0 1px 5px rgba(0, 0, 0, 0.4); } .pdf-v-toolbar button { border: 0; background: transparent; color: #e5e5e5; font-size: 15px; line-height: 1; padding: 5px 9px; cursor: pointer; border-radius: 4px; } .pdf-v-toolbar button:hover { background: #555; } .pdf-v-zoom-label { min-width: 52px; text-align: center; font-size: 12px !important; color: #ccc !important; }