.viewer-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 24px; align-items: start; }
.viewer { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 12px; }
.v-bar { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
.v-count { font-weight: 700; font-variant-numeric: tabular-nums; }
.v-stage {
  position: relative; width: 100%; max-height: 82vh; margin-inline: auto; background: #e2e8f0; border-radius: 8px;
  overflow: hidden; touch-action: pan-y; display: grid; place-items: center;
}
.v-stage img { width: 100%; height: 100%; object-fit: contain; user-select: none; -webkit-user-drag: none; }
.v-stage.loading img { opacity: .35; transition: opacity .15s; }
.v-thumbs {
  list-style: none; margin: 12px 0 0; padding: 0 0 6px; display: flex; gap: 8px; overflow-x: auto; scroll-snap-type: x proximity;
}
.v-thumbs li { flex: 0 0 72px; scroll-snap-align: start; }
.v-thumbs a { display: block; border: 2px solid transparent; border-radius: 6px; overflow: hidden; background: #e2e8f0; }
.v-thumbs a[aria-current="true"] { border-color: var(--accent); }
.v-thumbs img { width: 72px; height: auto; }
.insights { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 16px; position: sticky; top: 110px; }
.insights h2 { margin-top: 0; font-size: 1.1rem; }
.insights dl { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; margin: 0 0 12px; font-size: .92rem; }
.insights dt { color: var(--muted); }
.insights dd { margin: 0; font-weight: 600; }
@media (max-width: 900px) {
  .viewer-layout { grid-template-columns: 1fr; }
  .insights { position: static; }
  .v-stage { max-height: none; }
}