.ec-gallery-lightbox {
    inline-size: 100%;
    max-inline-size: none;
    block-size: 100%;
    max-block-size: none;
    margin: 0;
    padding: max(12px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
    border: 0;
    background: color-mix(in srgb, var(--rn-theme-surface) 92%, transparent);
    color: var(--rn-theme-text);
}

.ec-gallery-lightbox::backdrop {
    background: color-mix(in srgb, var(--rn-theme-overlay) 88%, transparent);
    backdrop-filter: blur(12px);
}

.ec-gallery-lightbox__shell {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    gap: 12px;
    block-size: 100%;
}

.ec-gallery-lightbox__header,
.ec-gallery-lightbox__toolbar,
.ec-gallery-lightbox__caption {
    display: flex;
    align-items: center;
    gap: 8px;
}

.ec-gallery-lightbox__header { justify-content: space-between; }
.ec-gallery-lightbox__toolbar { flex-wrap: wrap; justify-content: flex-end; }
.ec-gallery-lightbox__counter { font-variant-numeric: tabular-nums; color: var(--rn-theme-muted); }

.ec-gallery-lightbox__control,
[data-ec-gallery-open] {
    min-inline-size: 44px;
    min-block-size: 44px;
}

.ec-gallery-lightbox__control {
    display: inline-grid;
    place-items: center;
    border: 1px solid var(--rn-theme-line);
    border-radius: var(--rn-theme-radius-control, 10px);
    background: var(--rn-theme-surface-2);
    color: var(--rn-theme-text);
    cursor: pointer;
}

.ec-gallery-lightbox__control:hover { background: var(--rn-theme-surface); }
.ec-gallery-lightbox__control:disabled { opacity: .45; cursor: default; }
.ec-gallery-lightbox__control svg { inline-size: 20px; block-size: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.ec-gallery-lightbox__control:focus-visible,
[data-ec-gallery-open]:focus-visible {
    outline: 3px solid var(--rn-theme-accent);
    outline-offset: 3px;
}

.ec-gallery-lightbox__viewport {
    position: relative;
    display: grid;
    place-items: center;
    min-block-size: 0;
    overflow: hidden;
    border-radius: var(--rn-theme-radius-panel, 16px);
    background: var(--rn-theme-surface-2);
    touch-action: none;
    user-select: none;
}

.ec-gallery-lightbox__image {
    display: block;
    max-inline-size: 100%;
    max-block-size: 100%;
    object-fit: contain;
    transform-origin: center;
    will-change: transform;
}

.ec-gallery-lightbox[data-state="loading"] .ec-gallery-lightbox__viewport { cursor: progress; }
.ec-gallery-lightbox[data-zoomed="true"] .ec-gallery-lightbox__viewport { cursor: grab; }
.ec-gallery-lightbox[data-zoomed="true"] .ec-gallery-lightbox__viewport:active { cursor: grabbing; }
.ec-gallery-lightbox [data-gallery-action="previous"],
.ec-gallery-lightbox [data-gallery-action="next"] { position: absolute; inset-block-start: 50%; transform: translateY(-50%); }
.ec-gallery-lightbox [data-gallery-action="previous"] { inset-inline-start: 12px; }
.ec-gallery-lightbox [data-gallery-action="next"] { inset-inline-end: 12px; }

.ec-gallery-lightbox__caption {
    min-block-size: 44px;
    flex-direction: column;
    align-items: flex-start;
}

.ec-gallery-lightbox__caption span { color: var(--rn-theme-muted); }
[data-ec-gallery-open] { cursor: zoom-in; }
.ec-gallery-archive > .ec-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), 1fr));
    align-items: stretch;
    gap: var(--rn-theme-space-4, 1rem);
}
.ec-gallery-card {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    min-inline-size: 0;
    overflow: hidden;
}
.ec-gallery-card__open,
.ec-gallery-detail__open { inline-size: 100%; padding: 0; border: 0; background: transparent; color: inherit; }
.ec-gallery-card__open,
.ec-gallery-card > .ec-permission-state {
    aspect-ratio: 4 / 3;
    overflow: hidden;
}
.ec-gallery-card__open img {
    display: block;
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
    object-position: center;
}
.ec-gallery-detail__open img { display: block; inline-size: 100%; block-size: auto; }

@media (max-width: 640px) {
    .ec-gallery-lightbox { 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)); }
    .ec-gallery-lightbox__header { align-items: flex-start; }
    .ec-gallery-lightbox__toolbar { max-inline-size: 268px; }
    .ec-gallery-lightbox__caption { font-size: .9375rem; }
}

@media (prefers-reduced-motion: no-preference) {
    .ec-gallery-lightbox__image,
    .ec-gallery-lightbox__control { transition: transform 160ms ease, background-color 160ms ease; }
}

@media (prefers-reduced-motion: reduce) {
    .ec-gallery-lightbox__image,
    .ec-gallery-lightbox__control { scroll-behavior: auto; transition: none; }
}