:root {
    --lmv-glass-slate: rgba(30, 41, 59, 0.95);
    --lmv-glass-dark: rgba(5, 10, 16, 0.48);
    --lmv-surface-deep: #050a10;
    --lmv-glass-slate-82: rgba(15, 23, 42, 0.82);
    --lmv-surface-muted: #475569;
}
/* Shared image / video pin gallery (workshop + reusable host) */

.luma-image-viewer,
.luma-video-viewer {
    position: fixed;
    inset: 0;
    z-index: 4000; /* token-oneoff: media viewer above sheet */
    pointer-events: none;
}

.luma-image-viewer.is-open,
.luma-video-viewer.is-open {
    pointer-events: auto;
}

.luma-image-viewer .liv-backdrop,
.luma-video-viewer .lvv-backdrop {
    position: absolute;
    inset: 0;
    background: var(--lmv-glass-dark);
    backdrop-filter: blur(10px); /* token-oneoff: glass */
    -webkit-backdrop-filter: blur(10px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.38s var(--luma-ease-out);
}

.luma-image-viewer.is-open:not(.is-closing) .liv-backdrop,
.luma-video-viewer.is-open:not(.is-closing) .lvv-backdrop {
    opacity: 1;
    pointer-events: auto;
}

.luma-image-viewer .liv-stage,
.luma-video-viewer .lvv-stage {
    position: absolute;
    overflow: hidden;
    background: var(--luma-surface-body, #0b1117);
    border: 1px solid rgba(125, 211, 252, 0.35); /* token-oneoff: glass */
    box-shadow: var(--luma-shadow-lg, 0 24px 48px -12px rgba(0, 0, 0, 0.5));
    display: flex;
    flex-direction: column;
    --liv-stage-ms: 0.38s;
    --lvv-stage-ms: 0.38s;
    transition:
        left var(--liv-stage-ms, var(--lvv-stage-ms)) cubic-bezier(0.22, 1, 0.36, 1),
        top var(--liv-stage-ms, var(--lvv-stage-ms)) cubic-bezier(0.22, 1, 0.36, 1),
        width var(--liv-stage-ms, var(--lvv-stage-ms)) cubic-bezier(0.22, 1, 0.36, 1),
        height var(--liv-stage-ms, var(--lvv-stage-ms)) cubic-bezier(0.22, 1, 0.36, 1),
        border-radius var(--liv-stage-ms, var(--lvv-stage-ms)) ease,
        opacity 0.2s var(--luma-ease-out);
    opacity: 0;
}

.luma-video-viewer .lvv-stage {
    transition:
        left var(--lvv-stage-ms) cubic-bezier(0.22, 1, 0.36, 1),
        top var(--lvv-stage-ms) cubic-bezier(0.22, 1, 0.36, 1),
        width var(--lvv-stage-ms) cubic-bezier(0.22, 1, 0.36, 1),
        height var(--lvv-stage-ms) cubic-bezier(0.22, 1, 0.36, 1),
        border-radius var(--lvv-stage-ms) ease,
        opacity 0.2s var(--luma-ease-out);
}

.luma-image-viewer.is-open .liv-stage,
.luma-video-viewer.is-open .lvv-stage {
    opacity: 1;
}

.luma-image-viewer .liv-stage.is-expanded,
.luma-video-viewer .lvv-stage.is-expanded {
    left: 16.9vw !important;
    top: 16.9vh !important;
    width: 66.2vw !important;
    height: 66.2vh !important;
    border-radius: 14px !important; /* token-oneoff: off-scale radius */
}

.luma-image-viewer .liv-stage.is-fullscreen,
.luma-video-viewer .lvv-stage.is-fullscreen,
.luma-image-viewer.is-mobile .liv-stage.is-expanded,
.luma-video-viewer.is-mobile .lvv-stage.is-expanded {
    left: 0 !important;
    top: 0 !important;
    width: 100% !important;
    height: 100% !important;
    border-radius: 0 !important; /* token-oneoff: zero radius */
    border-color: transparent;
}

body.luma-image-viewer-open .stage-viewer,
body.luma-video-viewer-open .stage-viewer,
body.luma-image-viewer-open #viewerCanvasHost,
body.luma-video-viewer-open #viewerCanvasHost {
    pointer-events: none !important;
}

.luma-image-viewer .liv-frame,
.luma-video-viewer .lvv-frame {
    flex: 1;
    min-height: 0;
    position: relative;
    z-index: var(--luma-z-stage);
    isolation: isolate;
    padding: 16px 20px 12px; /* token-oneoff: off-scale spacing */
    background: var(--lmv-surface-deep);
    box-sizing: border-box;
    overflow: hidden;
    cursor: zoom-in;
}

.luma-video-viewer .lvv-frame {
    cursor: default;
    display: flex;
    align-items: center;
    justify-content: center;
}

.luma-image-viewer .liv-layer {
    position: absolute;
    inset: 16px 20px 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    opacity: 0;
    z-index: 1;
}

.luma-image-viewer .liv-layer.is-current {
    opacity: 1;
    z-index: 2; /* token-oneoff: local stacking */
}

.luma-image-viewer .liv-img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    user-select: none;
    -webkit-user-drag: none;
}

.luma-video-viewer .lvv-embed {
    width: 100%;
    height: 100%;
    border: 0;
    background: var(--luma-surface-body, #0b1117);
    border-radius: var(--luma-radius-xs);
}

.luma-image-viewer .liv-close,
.luma-image-viewer .liv-nav,
.luma-video-viewer .lvv-close,
.luma-video-viewer .lvv-nav {
    position: absolute;
    z-index: 5; /* token-oneoff: local stacking */
    width: var(--luma-touch-min, 44px);
    height: var(--luma-touch-min, 44px);
    min-width: var(--luma-touch-min, 44px);
    min-height: var(--luma-touch-min, 44px);
    border: 1px solid rgba(148, 163, 184, 0.45); /* token-oneoff: glass */
    border-radius: var(--luma-radius-pill);
    background: var(--lmv-glass-slate-82);
    color: var(--luma-text-main, #e0e0e0);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-sizing: border-box;
}

.luma-image-viewer .liv-close,
.luma-video-viewer .lvv-close {
    top: max(12px, env(safe-area-inset-top));
    right: max(12px, env(safe-area-inset-right));
}

.luma-image-viewer .liv-prev,
.luma-video-viewer .lvv-prev {
    left: max(12px, env(safe-area-inset-left));
    top: 50%;
    transform: translateY(-50%);
}

.luma-image-viewer .liv-next,
.luma-video-viewer .lvv-next {
    right: max(12px, env(safe-area-inset-right));
    top: 50%;
    transform: translateY(-50%);
}

@media (hover: hover) {
    .luma-image-viewer .liv-close:hover,
    .luma-image-viewer .liv-nav:hover,
    .luma-video-viewer .lvv-close:hover,
    .luma-video-viewer .lvv-nav:hover {
        background: var(--lmv-glass-slate);
        border-color: var(--luma-vista-accent-2, #7dd3fc);
    }
}

.luma-image-viewer .liv-close:active,
.luma-image-viewer .liv-nav:active,
.luma-video-viewer .lvv-close:active,
.luma-video-viewer .lvv-nav:active {
    background: var(--lmv-glass-slate);
    border-color: var(--luma-vista-accent-2, #7dd3fc);
}

.luma-image-viewer .liv-caption,
.luma-video-viewer .lvv-caption {
    flex: 0 0 auto;
    padding: var(--luma-space-2) var(--luma-space-4) var(--luma-space-1);
    font-size: var(--luma-font-lg);
    color: var(--luma-text-main, #e0e0e0);
    text-align: center;
}

.luma-image-viewer .liv-dots,
.luma-video-viewer .lvv-dots {
    flex: 0 0 auto;
    display: flex;
    justify-content: center;
    gap: var(--luma-space-1);
    padding: 0 var(--luma-space-3) max(var(--luma-space-3), env(safe-area-inset-bottom));
}

.luma-image-viewer .liv-dot,
.luma-video-viewer .lvv-dot {
    width: 8px;
    height: 8px;
    border-radius: var(--luma-radius-pill);
    border: 0;
    padding: 0;
    background: var(--lmv-surface-muted);
    cursor: pointer;
}

@media (pointer: coarse) {
    .luma-image-viewer .liv-dot,
    .luma-video-viewer .lvv-dot {
        width: 10px;
        height: 10px;
        padding: var(--luma-space-2);
        background-clip: content-box;
    }
}

.luma-image-viewer .liv-dot.is-on,
.luma-video-viewer .lvv-dot.is-on {
    background: var(--luma-vista-accent-2, #7dd3fc);
}

.luma-image-viewer .liv-dip {
    display: none;
}