.viewer { position: fixed; inset: 0; z-index: 100; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; color: white; background: #08100e; touch-action: none; }
.viewer[hidden] { display: none; }
.viewer-topbar, .viewer-footer { z-index: 2; padding: max(var(--space-10), env(safe-area-inset-top)) var(--space-12) var(--space-10); background: rgba(8,16,14,.86); }
.viewer-topbar { display: flex; align-items: center; justify-content: space-between; min-height: 56px; }
.viewer-icon, .viewer-arrow { display: grid; place-items: center; min-width: 48px; min-height: 48px; color: white; border: 0; background: rgba(255,255,255,.08); border-radius: 999px; font-size: 1.5rem; cursor: pointer; }
.viewer-stage { position: relative; display: grid; place-items: center; min-height: 0; overflow: hidden; }
.viewer-stage img { position: absolute; inset: 0; margin: auto; width: auto; height: auto; max-width: 100%; max-height: 100%; object-fit: contain; transform-origin: center; will-change: transform; }
.viewer-arrow { position: absolute; top: 50%; z-index: 2; transform: translateY(-50%); }
.viewer-prev { left: 8px; }
.viewer-next { right: 8px; }
.viewer-footer { padding-bottom: max(var(--space-12), env(safe-area-inset-bottom)); }
.viewer-meta { display: grid; gap: var(--space-2); margin-bottom: var(--space-10); }
.viewer-meta small { color: #c7cfcc; }
.viewer-actions { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-8); }
.download-link { display: block; margin-top: var(--space-10); color: white; text-align: center; }
.annotation-canvas { position: absolute; z-index: 3; cursor: crosshair; touch-action: none; }
.annotation-panel { display: grid; gap: var(--space-8); margin-top: var(--space-10); }
.annotation-panel[hidden], .annotation-canvas[hidden] { display: none !important; }
.annotation-tools { display: flex; gap: var(--space-6); overflow-x: auto; padding-bottom: var(--space-2); }
.annotation-tools button { flex: none; min-height: 42px; padding: var(--space-8) var(--space-11); color: white; border: 1px solid rgba(255,255,255,.24); border-radius: var(--radius-sm); background: rgba(255,255,255,.08); }
.annotation-tools button.active { color: var(--color-primary); background: white; }
.annotation-actions { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-8); }
.annotation-status { min-height: 1.2em; margin: 0; color: #c7cfcc; font-size: var(--font-size-sm); }
.viewer.annotating .viewer-arrow, .viewer.annotating .viewer-actions { display: none; }
@media (max-width: 520px) { .viewer-arrow { opacity: .78; } .viewer-actions .button { padding-inline: var(--space-8); font-size: .88rem; } .annotation-actions { grid-template-columns: 1fr 1fr; } .annotation-actions [data-annotation-share] { grid-column: 1 / -1; } }