/* Shared front-end PDF reader: theme colors, optional expanded page navigator. */
.designhu-pdf { --pdf-border: var(--designhu-line, #e2e8f0); --pdf-accent: var(--designhu-accent, #2563eb); margin: 1.5em 0; border: 1px solid var(--pdf-border); border-radius: 0; background: var(--designhu-surface, #fff); color: var(--designhu-ink, #0f172a); overflow: hidden; }
.designhu-pdf *, .designhu-pdf *::before, .designhu-pdf *::after { box-sizing: border-box; }
.designhu-pdf-fallback { margin: 0; padding: 16px; }
.designhu-pdf-toolbar { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--pdf-border); background: #fff; font-size: 13px; flex-shrink: 0; }
.designhu-pdf-toolbar-start { display: flex; align-items: center; gap: 12px; min-width: 0; }
.designhu-pdf-identity { display: flex; align-items: center; flex: 1 1 140px; min-width: 0; gap: 9px; }
.designhu-pdf-title { min-width: 0; max-width: 220px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 13px; font-weight: 600; }
.designhu-pdf-badge { flex-shrink: 0; padding: 2px 5px; border: 1px solid var(--pdf-border); border-radius: 0; color: #64748b; font-size: 10px; line-height: 1.5; letter-spacing: .05em; }
.designhu-pdf-controls, .designhu-pdf-control-group { display: flex; align-items: center; gap: 5px; }
.designhu-pdf-controls { justify-self: end; justify-content: flex-end; gap: 10px; flex-wrap: wrap; }
.designhu-pdf-toolbar > .designhu-pdf-control-group { justify-self: center; padding: 0; }
.designhu-pdf-status, .designhu-pdf-zoom { min-width: 54px; text-align: center; color: #64748b; font-size: 12px; font-variant-numeric: tabular-nums; }
.designhu-pdf-status { min-width: 64px; }
.designhu-pdf-button { display: inline-flex; justify-content: center; align-items: center; gap: 6px; min-width: 34px; height: 34px; padding: 0 8px; border: 1px solid transparent; border-radius: 8px; background: transparent; color: #475569; font: inherit; font-size: 12px; line-height: 1; white-space: nowrap; cursor: pointer; transition: background .15s, border-color .15s, color .15s; }
.designhu-pdf-button svg, .designhu-pdf-link svg { flex-shrink: 0; }
.designhu-pdf-button:hover:not(:disabled) { background: #f1f5f9; color: #0f172a; }
.designhu-pdf-button[aria-pressed="true"] { border-color: #dbeafe; background: #eff6ff; color: var(--pdf-accent); }
.designhu-pdf-button:disabled { opacity: .35; cursor: default; }
.designhu-pdf-button:focus-visible, .designhu-pdf-thumbnail:focus-visible, .designhu-pdf-pages:focus-visible, .designhu-pdf-link:focus-visible { outline: 2px solid var(--pdf-accent); outline-offset: -2px; }
.designhu-pdf-body { position: relative; display: flex; min-width: 0; min-height: 0; }
.designhu-pdf-reader { position: relative; display: flex; flex: 1; min-width: 0; min-height: 0; height: min(76vh, 900px); overflow: hidden; }
.designhu-pdf-pages { position: relative; flex: 1; min-width: 0; height: 100%; overflow: auto; overscroll-behavior: contain; padding: 24px 24px 96px; background: #eef1f5; scrollbar-color: #bac4d2 transparent; scrollbar-width: thin; }
.designhu-pdf-pager { position: absolute; z-index: 3; bottom: 18px; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 12px; padding: 6px 10px; border: 1px solid #e2e8f0; border-radius: 0; background: #fffffff2; }
.designhu-pdf-pager[hidden] { display: none; }
.designhu-pdf-pager .designhu-pdf-status { color: #334155; font-size: 13px; font-weight: 600; }
.designhu-pdf-pager .designhu-pdf-button { border-radius: 0; }
.designhu-pdf-page { margin: 0 auto; background: #fff; }
.designhu-pdf-page-loading { margin: 0; padding: 32px 16px; color: #64748b; text-align: center; font-size: 13px; }
.designhu-pdf-page:last-child { margin-bottom: 0; }
.designhu-pdf-page canvas { display: block; max-width: none; }
.designhu-pdf-error { margin: 40px 16px; padding: 16px; color: #b91c1c; font-size: 14px; }
.designhu-pdf-sidebar, .designhu-pdf-sidebar-toggle { display: none; }
.designhu-pdf.is-expanded { position: fixed; inset: 0; z-index: 100000; display: flex; flex-direction: column; margin: 0; border: 0; border-radius: 0; box-shadow: none; }
.designhu-pdf.is-expanded .designhu-pdf-toolbar { min-height: 64px; padding: 12px 20px; }
.designhu-pdf.is-expanded .designhu-pdf-title { max-width: min(35vw, 500px); }
.designhu-pdf.is-expanded .designhu-pdf-body { flex: 1; overflow: hidden; }
.designhu-pdf.is-expanded .designhu-pdf-reader { height: auto; }
.designhu-pdf.is-expanded .designhu-pdf-pages { height: auto; padding: 28px 40px 104px; }
.designhu-pdf.is-expanded .designhu-pdf-pager { bottom: max(20px, env(safe-area-inset-bottom)); }
.designhu-pdf.is-expanded .designhu-pdf-sidebar-toggle { display: inline-flex; }
.designhu-pdf.is-expanded.has-thumbnails .designhu-pdf-sidebar { display: flex; flex-direction: column; flex: 0 0 204px; width: 204px; min-height: 0; border-right: 1px solid var(--pdf-border); background: #f8fafc; }
.designhu-pdf-thumbnails { position: relative; min-height: 0; flex: 1; padding: 8px 20px 20px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: #bac4d2 transparent; }
.designhu-pdf-thumbnail { display: flex; flex-direction: column; align-items: center; gap: 10px; width: 100%; padding: 12px 8px 8px; margin: 0 0 10px; border: 1px solid transparent; border-radius: 10px; background: transparent; color: #64748b; font: inherit; font-size: 12px; cursor: pointer; }
.designhu-pdf-thumbnail:hover { background: #eef2f7; }
.designhu-pdf-thumbnail[aria-current="page"] { background: #eff6ff; border-color: #bfdbfe; color: var(--pdf-accent); }
.designhu-pdf-thumbnail-preview { display: flex; align-items: center; justify-content: center; width: 120px; min-height: 155px; background: #fff; }
.designhu-pdf-thumbnail-preview canvas { display: block; max-width: 100%; }
.designhu-pdf-thumbnail-number { font-variant-numeric: tabular-nums; line-height: 1; }
html.designhu-pdf-lock { overflow: hidden; }
.designhu-pdf-footer { display: flex; flex: none; justify-content: flex-end; padding: 12px 16px; border-top: 1px solid var(--pdf-border); background: #fff; }
.designhu-pdf-download { display: inline-flex; align-items: center; gap: 12px; min-height: 42px; padding: 8px; border: 1px solid var(--line, #cfe0f2); border-radius: 0; color: var(--navy, #04295e); font-size: 14px; line-height: 24px; font-weight: 500; text-decoration: none; }
.designhu-pdf-download:hover { background: var(--mist, #f7f9fc); color: var(--blue, #0078bf); }
@media (max-width: 699px) { .designhu-pdf-toolbar, .designhu-pdf.is-expanded .designhu-pdf-toolbar { gap: 10px; padding: 10px 12px; } .designhu-pdf-controls { gap: 4px; } .designhu-pdf-control-group { gap: 2px; padding-right: 5px; } .designhu-pdf-button { min-width: 32px; padding: 0 6px; } .designhu-pdf-caption { display: none; } .designhu-pdf-status { min-width: 52px; } .designhu-pdf-zoom { min-width: 44px; } .designhu-pdf-pages, .designhu-pdf.is-expanded .designhu-pdf-pages { padding: 12px 12px 92px; } .designhu-pdf-reader { height: 70vh; } .designhu-pdf.is-expanded.has-thumbnails .designhu-pdf-sidebar { position: absolute; inset: 0 auto 0 0; z-index: 4; width: 180px; } .designhu-pdf.is-expanded.has-thumbnails .designhu-pdf-pager { visibility: hidden; } .designhu-pdf-thumbnails { padding: 8px 12px 20px; } .designhu-pdf.is-expanded .designhu-pdf-title { max-width: 65vw; } }