.viewer { height: 100%; display: grid; grid-template-rows: auto auto minmax(0,1fr) 38px; background: #061f32; animation: page-in .25s both; }
.viewer:has(.viewer-notice) { grid-template-rows: auto auto auto minmax(0,1fr) 38px; }
.viewer-heading { display: flex; align-items: center; gap: 22px; padding: 10px var(--space); border-bottom: 1px solid var(--line); min-height: 78px; }
.viewer-heading h1 { font-size: 17px; line-height: 1.5; font-weight: 500; margin-right: auto; }
.viewer-heading .home-link { display: flex; flex-shrink: 0; }
.viewer-heading .back-link { flex-shrink: 0; }
.viewer-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 9px var(--space); border-bottom: 1px solid var(--line); background: #0c2e44; }
.page-controls, .zoom-controls { display: flex; align-items: center; gap: 7px; }
.viewer-button { min-width: 56px; min-height: 56px; display: inline-flex; justify-content: center; align-items: center; background: #e2f0f30a; border: 1px solid var(--line); border-radius: 4px; }
.viewer-button:not(:disabled):hover { background: #c2dae51c; }
#page-number { padding: 0 15px; color: var(--white); font-size: 16px; font-variant-numeric: tabular-nums; min-width: 85px; text-align: center; }
.fit-button { padding: 10px 17px; font-size: 13px; }
.viewer-original { display: inline-flex; align-items: center; gap: 9px; min-height: 56px; color: var(--muted); font-size: 13px; }
.viewer-original .icon { width: 20px; }
.viewer-stage { min-height: 0; overflow: auto; position: relative; touch-action: none; background-color: #051a2a; background-image: radial-gradient(#5e7e8b12 .7px, transparent .7px); background-size: 14px 14px; scrollbar-color: #597b8e #051a2a; overscroll-behavior: contain; }
.viewer-stage.zoomed { cursor: grab; }
.viewer-stage.zoomed:active { cursor: grabbing; }
.viewer-canvas { position: relative; margin-inline: auto; background: white; box-shadow: 0 8px 30px #010b1744; flex-shrink: 0; }
.viewer-canvas img { width: 100%; height: 100%; display: block; object-fit: contain; pointer-events: none; user-select: none; }
.viewer-footer { display: flex; justify-content: space-between; align-items: center; padding: 0 var(--space); color: var(--muted); font-size: 10px; gap: 10px; border-top: 1px solid var(--line); }
.viewer-footer span { min-width: 0; }
#zoom-label { min-width: 36px; font-variant-numeric: tabular-nums; }
.viewer-notice { font-size: 13px; line-height: 1.7; padding: 11px var(--space); color: var(--gold); border-bottom: 1px solid var(--line); background: #edba7309; }
.viewer-error { position: absolute; inset: 20% 10% auto; padding: 20px; text-align: center; background: var(--ink); line-height: 1.8; }
@media (max-width: 760px) {
  .viewer-heading { gap: 12px; min-height: 74px; }
  .viewer-heading h1 { font-size: 14px; }
  .viewer-heading .home-link { font-size: 0; gap: 0; min-width: 40px; justify-content: flex-end; }
  .viewer-heading .back-link { font-size: 12px; }
  .viewer-toolbar { justify-content: center; gap: 10px 20px; flex-wrap: wrap; padding: 9px 15px; }
  .viewer-original { display: none; }
  .viewer-footer { font-size: 9px; }
  #source-name { display: none; }
  #page-number { min-width: 60px; padding: 0 8px; }
}
@media (max-width: 420px) {
  .viewer-heading { padding-inline: 15px; }
  .viewer-toolbar { gap: 8px; }
  .viewer-button { min-width: 56px; }
  .fit-button { padding-inline: 8px; font-size: 11px; }
  .page-controls, .zoom-controls { gap: 4px; }
  #page-number { min-width: 45px; padding-inline: 3px; font-size: 13px; }
}