.nui-lightbox { color: var(--nui-text); }
.nui-lightbox.is-modal, .nui-lightbox.is-fullscreen { position: fixed; inset: 0; z-index: calc(var(--nui-layer-modal) + 60); min-width: 0; min-height: 0; overscroll-behavior: contain; }
.nui-lightbox.is-modal { display: grid; place-items: center; padding: 12px; background: rgb(var(--nui-overlay-color) / var(--nui-overlay-opacity)); }
.nui-lightbox.is-fullscreen { display: flex; padding: max(8px, env(safe-area-inset-top)) max(8px, env(safe-area-inset-right)) max(8px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left)); background: var(--nui-bg); }
.nui-lightbox.is-window { display: contents; }
.nui-lightbox-panel { display: flex; flex-direction: column; min-width: 0; min-height: 0; overflow: hidden; background: var(--nui-raised); color: var(--nui-text); }
.nui-lightbox.is-modal .nui-lightbox-panel { width: min(1000px, calc(100vw - 24px)); height: min(760px, calc(100dvh - 24px)); border: 1px solid var(--nui-border-strong); border-radius: var(--nui-radius-lg); box-shadow: 0 24px 56px var(--nui-shadow); }
.nui-lightbox.is-fullscreen .nui-lightbox-panel { flex: 1 1 auto; width: 100%; height: 100%; background: var(--nui-bg); }
.nui-lightbox .nui-lightbox-panel.nui-window { position: fixed; width: min(900px, calc(100vw - 16px)); height: min(680px, calc(100dvh - 16px)); max-width: calc(100vw - 16px); max-height: calc(100dvh - 16px); min-width: min(240px, calc(100vw - 16px)); min-height: min(120px, calc(100dvh - 16px)); padding: 0; overflow: hidden; border: 1px solid var(--nui-border-strong); border-radius: var(--nui-radius-lg); box-shadow: 0 20px 48px var(--nui-shadow); resize: none; }
.nui-lightbox-window-header { display: none; flex: 0 0 auto; justify-content: space-between; margin: 0; padding: 0 8px; }
.nui-lightbox.is-window .nui-lightbox-window-header { display: flex; }
.nui-lightbox-window-close { font-size: 20px; }
.nui-lightbox-toolbar { display: flex; flex: 0 0 auto; align-items: center; justify-content: flex-end; gap: 4px; min-height: 40px; padding: 2px 4px; border-bottom: 1px solid var(--nui-border); }
.nui-lightbox-mode-group { flex: 0 0 auto; margin-inline-end: auto; border: 1px solid var(--nui-border-strong); }
.nui-lightbox-mode-group > .nui-lightbox-mode-button { width: 36px; min-width: 36px; min-height: 34px; border-radius: 0; }
.nui-lightbox-mode-group > .nui-lightbox-mode-button[aria-pressed="true"] { background: var(--nui-accent-fill); color: var(--nui-accent-fg); box-shadow: inset 0 0 0 1px var(--nui-accent-border); }
.nui-lightbox-mode-button svg { width: 17px; height: 17px; }
.nui-lightbox-mode-fallback { font-size: 18px; line-height: 1; }
.nui-lightbox-control, .nui-lightbox-nav { display: inline-grid; place-items: center; flex: 0 0 auto; min-width: 38px; min-height: 38px; padding: 0 8px; border: 0; border-radius: var(--nui-radius-sm); background: var(--nui-raised); color: var(--nui-text); font: inherit; font-size: 22px; cursor: pointer; }
.nui-lightbox-control:hover, .nui-lightbox-nav:hover { background: var(--nui-raised-hover); }
.nui-lightbox-control:focus-visible, .nui-lightbox-nav:focus-visible, .nui-lightbox-thumb:focus-visible, .nui-lightbox-mode-button:focus-visible { outline: 2px solid var(--nui-ring); outline-offset: 2px; }
.nui-lightbox-control:disabled, .nui-lightbox-nav:disabled { opacity: .35; cursor: default; }
.nui-lightbox.is-window .nui-lightbox-toolbar > .nui-lightbox-close { display: none; }
.nui-lightbox-body { display: grid; grid-template-columns: 42px minmax(0, 1fr) 42px; align-items: stretch; flex: 1 1 auto; min-height: 0; gap: 4px; background: var(--nui-input); }
.nui-lightbox-nav { align-self: center; width: 42px; min-height: 56px; padding: 0; font-size: 32px; }
.nui-lightbox-stage { position: relative; display: grid; place-items: center; min-width: 0; min-height: 0; overflow: hidden; background: var(--nui-input); touch-action: none; cursor: zoom-in; }
.nui-lightbox-stage:focus { outline: none; }
.nui-lightbox-stage.is-zoomed { cursor: zoom-out; }
.nui-lightbox-stage.is-zoomed.is-dragging { cursor: grabbing; }
.nui-lightbox-photo { display: block; position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; opacity: 0; pointer-events: auto; user-select: none; transition: opacity .15s ease, transform .12s ease; }
.nui-lightbox-photo.is-visible { opacity: 1; }
.nui-lightbox-photo[hidden], .nui-lightbox-failure[hidden] { display: none; }
.nui-lightbox-failure { display: grid; place-items: center; position: absolute; inset: 0; color: var(--nui-text-muted); background: var(--nui-raised); }
.nui-lightbox-footer { display: flex; flex-direction: column; flex: 0 0 auto; align-items: center; justify-content: center; gap: 5px; min-height: 78px; padding: 4px; border-top: 1px solid var(--nui-border); }
.nui-lightbox-caption { max-width: 100%; overflow: hidden; color: var(--nui-text-muted); font-size: var(--nui-font-size-sm); text-overflow: ellipsis; white-space: nowrap; }
.nui-lightbox-counter { font-size: var(--nui-font-size-xs); font-variant-numeric: tabular-nums; }
.nui-lightbox-thumbnails { display: flex; justify-content: safe center; max-width: 100%; min-height: 48px; gap: 4px; overflow-x: auto; scrollbar-width: thin; touch-action: pan-x; }
.nui-lightbox-thumb { flex: 0 0 44px; width: 44px; height: 44px; padding: 1px; border: 2px solid transparent; border-radius: var(--nui-radius-sm); background: var(--nui-raised); color: var(--nui-text-muted); cursor: pointer; }
.nui-lightbox-thumb[aria-current="true"] { border-color: var(--nui-accent-border); }
.nui-lightbox-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.nui-lightbox-thumb.is-failed { font-size: 19px; }
@media (max-width: 640px) { .nui-lightbox-mode-group > .nui-lightbox-mode-button { width: 34px; min-width: 34px; }.nui-lightbox-control { min-width: 34px; min-height: 34px; }.nui-lightbox-body { grid-template-columns: 34px minmax(0, 1fr) 34px; gap: 0; }.nui-lightbox-nav { width: 34px; min-width: 34px; background: transparent; }.nui-lightbox-footer { min-height: 70px; }.nui-lightbox.is-modal { padding: 8px; }.nui-lightbox.is-modal .nui-lightbox-panel { width: calc(100vw - 16px); height: min(660px, calc(100dvh - 16px)); } }
@media (prefers-reduced-motion: reduce) { .nui-lightbox-photo { transition: none; } }