/* Focused screenshot inspection, scoped to the app-page viewer. */
.screenshot-viewer { background: rgba(3, 7, 5, .98); padding-bottom: 32px; box-sizing: border-box; }
.screenshot-viewer .lightbox-content {
    width: calc(100vw - 160px);
    height: calc(100vh - 170px);
    height: calc(100dvh - 170px);
    max-width: none;
    max-height: none;
    overflow: hidden;
    overscroll-behavior: contain;
    border-radius: 10px;
}
.lightbox-canvas { position: relative; flex: none; line-height: 0; }
.screenshot-viewer .lightbox-img {
    display: block;
    max-width: none;
    max-height: none;
    user-select: none;
    -webkit-user-drag: none;
}
.screenshot-viewer.is-loading .lightbox-img { opacity: 0; }
.screenshot-viewer .lightbox-content.is-zoomed { display: block; overflow: auto; }
.screenshot-viewer .is-zoomed .lightbox-canvas { margin: auto; }
.lightbox-lens {
    position: absolute;
    width: 180px;
    height: 180px;
    border: 2px solid var(--accent-green);
    border-radius: 50%;
    box-shadow: 0 6px 28px #000b;
    background-color: #080d0a;
    background-repeat: no-repeat;
    pointer-events: none;
    box-sizing: border-box;
    z-index: 1;
}
.lightbox-lens[hidden] { display: none; }
.lightbox-toolbar {
    position: absolute;
    bottom: 46px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 14px;
    white-space: nowrap;
}
.screenshot-viewer .lightbox-counter {
    position: static;
    transform: none;
    padding: 0;
    background: none;
    border: 0;
}
.lightbox-zoom {
    min-height: 44px;
    padding: 8px 16px;
    background: var(--bg-elevated);
    border: 1px solid var(--border-default);
    border-radius: 8px;
    color: var(--text-primary);
    font: 13px var(--font-mono);
    cursor: pointer;
}
.lightbox-zoom:hover:not(:disabled) { border-color: var(--accent-green); color: var(--accent-green); }
.lightbox-zoom:disabled { opacity: .5; cursor: default; }
.screenshot-viewer :focus-visible { outline: 2px solid var(--accent-green); outline-offset: 4px; }
.lightbox-help {
    position: absolute;
    bottom: 14px;
    margin: 0;
    padding: 0 16px;
    text-align: center;
    font: 13px/1.5 var(--font-body, sans-serif);
    color: var(--text-secondary);
}
@media (hover: hover) and (pointer: fine) {
    .screenshot-viewer .lightbox-img { cursor: zoom-in; }
    .screenshot-viewer .is-zoomed .lightbox-img { cursor: auto; }
}
@media (max-width: 768px) {
    .screenshot-viewer .lightbox-content { width: calc(100vw - 32px); }
    .screenshot-viewer .lightbox-nav { top: auto; bottom: 46px; transform: none; width: 44px; height: 44px; }
    .screenshot-viewer .lightbox-close { width: 44px; height: 44px; }
}