.recognition-viewer { width: min(1440px, calc(100vw - 2rem)); height: min(900px, calc(100dvh - 2rem)); max-width: none; max-height: none; padding: 0; border: 1px solid var(--bs-border-color); border-radius: .75rem; background: var(--bs-body-bg); color: var(--bs-body-color); overflow: hidden; }
.recognition-viewer[open] { display: flex; flex-direction: column; }
.recognition-viewer::backdrop { background: rgba(0,0,0,.85); }
.recognition-viewer-header { display: flex; flex-shrink: 0; align-items: center; gap: .6rem; padding: .75rem; border-bottom: 1px solid var(--bs-border-color); }
.recognition-viewer-position { font-size: .8rem; white-space: nowrap; }
.recognition-viewer-content { display: grid; grid-template-columns: minmax(0, 1fr) 300px; flex: 1; min-height: 0; }
.recognition-viewer-stage { min-width: 0; min-height: 0; background: #080d12; position: relative; }
.recognition-viewer-picture { width: 100%; height: 100%; display: grid; place-items: center; overflow: auto; }
a[data-preview-url], a[data-preview-url] img, a[data-recognition-image], a[data-recognition-image] img,
.latest-result-preview, .latest-result-preview img, [data-station-capture-preview], [data-station-capture-preview] img { cursor: zoom-in; }
.recognition-viewer-image { max-width: 100%; max-height: 100%; object-fit: contain; cursor: zoom-in; user-select: none; }
.recognition-viewer-picture.is-zoomed { display: block; scrollbar-width: none; }
.recognition-viewer-picture.is-zoomed::-webkit-scrollbar { display: none; }
.recognition-viewer-picture.is-zoomed .recognition-viewer-image { display: block; margin-inline: auto; max-width: none; max-height: none; cursor: zoom-out; }
.recognition-viewer-image-control.btn { position: absolute; width: 44px; height: 44px; border-radius: 50%; color: #fff; background: #080d12cc; border-color: #ffffff80; box-shadow: 0 2px 8px #0006; z-index: 1; }
.recognition-viewer-image-control.btn:hover, .recognition-viewer-image-control.btn:focus-visible { color: #fff; background: #080d12; border-color: #fff; }
.recognition-viewer-image-control.btn:disabled { opacity: .3; }
.recognition-viewer-zoom { top: .75rem; right: .75rem; }
.recognition-viewer-previous, .recognition-viewer-next { top: 50%; transform: translateY(-50%); }
.recognition-viewer-previous { left: .75rem; }
.recognition-viewer-next { right: .75rem; }
.recognition-viewer-message { position: absolute; left: 1rem; right: 1rem; bottom: 1rem; color: #fff; background: #080d12cc; text-align: center; }
.recognition-viewer-message:empty { display: none; }
.recognition-viewer-details { padding: 1rem; overflow: auto; border-left: 1px solid var(--bs-border-color); }
.recognition-viewer-meta { color: var(--bs-secondary-color); font-size: .8rem; overflow-wrap: anywhere; }
.recognition-viewer-species { display: flex; align-items: center; gap: .5rem; padding: .75rem 0; border-bottom: 1px solid var(--bs-border-color); overflow-wrap: anywhere; }
.recognition-viewer-species > div { min-width: 0; }
.recognition-viewer-species-icon { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; }
.recognition-viewer-species-heading { display: flex; align-items: baseline; justify-content: space-between; gap: .75rem; }
.recognition-viewer-species-heading > span { text-align: right; }
.recognition-viewer-confidence { margin-left: auto; white-space: nowrap; }
@media (max-width: 700px) {
    .recognition-viewer { width: 100vw; height: 100dvh; border: 0; border-radius: 0; }
    .recognition-viewer-header { flex-wrap: wrap; gap: .4rem; padding-top: max(.75rem, env(safe-area-inset-top)); }
    .recognition-viewer-content { display: flex; flex-direction: column;  }
    .recognition-viewer-stage { flex: 1; min-height: 40%; }
    .recognition-viewer-details { max-height: 40%; flex-shrink: 0; border-left: 0; border-top: 1px solid var(--bs-border-color); padding-bottom: max(1rem, env(safe-area-inset-bottom)); }
}