.lg-gallery, .lg-detail { --lg-bg: var(--ui-bg, #100f0d); --lg-panel: var(--ui-surface, #191816); --lg-fill: var(--ui-surface-2, #242321); --lg-line: var(--ui-line-strong, #373634); --lg-ink: var(--ui-ink, #f3f2f0); --lg-muted: var(--ui-ink-2, #a7a6a4); color: var(--lg-ink); font: 14px/1.5 var(--ui-font, Inter, system-ui, sans-serif); }
.lg-gallery *, .lg-detail * { box-sizing: border-box; }
.lg-gallery [hidden], .lg-detail [hidden] { display: none !important; }
.lg-toolbar { display: flex; align-items: center; flex-wrap: wrap; gap: 16px; margin-bottom: 28px; }
.lg-search { display: flex; align-items: center; gap: 10px; min-width: 180px; width: min(320px, 100%); min-height: 44px; background: var(--lg-panel); border: 1px solid var(--lg-line); border-radius: var(--ui-r-ctl, 6px); padding: 0 14px; }
.lg-search-mark { display: inline-flex; flex: none; color: var(--lg-muted); }
.lg-search-mark svg { display: block; width: 18px; height: 18px; }
.lg-search input { min-width: 0; width: 100%; background: none; border: 0; padding: 0; color: var(--lg-ink); font: inherit; }
.lg-search input::placeholder { color: var(--lg-muted); }
.lg-search:focus-within { outline: 2px solid var(--ui-ring, #f3f2f0); outline-offset: 2px; }
.lg-gallery .lg-search input:focus-visible { outline: none; }
.lg-filters { display: flex; gap: 4px; flex-wrap: wrap; }
.lg-button, .lg-close, .lg-play, .lg-primary { min-height: 40px; border: 1px solid transparent; border-radius: var(--ui-r-ctl, 6px); padding: 8px 12px; background: none; color: var(--lg-muted); font: inherit; cursor: pointer; }
.lg-button:hover, .lg-close:hover, .lg-button[aria-pressed=true] { background: var(--lg-fill); color: var(--lg-ink); }
.lg-button[aria-pressed=true] { background: var(--ui-selected, #3b3a38); }
.lg-count { margin-left: auto; font-size: 12px; color: var(--lg-muted); white-space: nowrap; }
.lg-masonry { position: relative; width: 100%; }
.lg-card { position: absolute; top: 0; left: 0; margin: 0; min-width: 0; padding: 0; }
.lg-card-button { display: block; width: 100%; padding: 0; color: var(--lg-ink); background: none; border: 0; border-radius: var(--ui-r-card, 8px); text-align: left; font: inherit; cursor: pointer; }
.lg-card-art { position: relative; display: block; width: 100%; overflow: hidden; background: var(--lg-panel); border: 1px solid var(--lg-line); border-radius: var(--ui-r-card, 8px); corner-shape: var(--ui-corner, squircle); }
.lg-card-art img { display: block; width: 100%; height: 100%; object-fit: contain; }
.lg-card-action { position: absolute; inset: auto 0 0; padding: 32px 14px 12px; font-size: 12px; color: #fff; background: linear-gradient(transparent, #000b); opacity: 0; transition: opacity 150ms ease; }
.lg-card-button:hover .lg-card-action, .lg-card-button:focus-visible .lg-card-action { opacity: 1; }
.lg-card-button:hover .lg-card-art { border-color: var(--lg-muted); }
.lg-card-caption { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 10px 1px 2px; }
.lg-card-name { min-width: 0; overflow-wrap: anywhere; font-size: 13px; }
.lg-card-meta { flex: none; font-size: 11px; color: var(--lg-muted); }
.lg-status { border: 1px dashed var(--lg-line); border-radius: var(--ui-r-card, 8px); padding: 64px 24px; text-align: center; color: var(--lg-muted); }
.lg-status h2 { color: var(--lg-ink); font-size: 22px; font-weight: 500; margin: 0 0 10px; }
.lg-status p { margin: 0 0 16px; }
.lg-image-failed { position: absolute; inset: 0; display: grid; place-content: center; padding: 16px; font-size: 12px; color: var(--lg-muted); }
.lg-detail { width: min(1080px, calc(100vw - 40px)); max-height: calc(100dvh - 40px); margin: auto; padding: 0; border: 1px solid var(--lg-line); border-radius: var(--ui-r-pop, 10px); background: var(--lg-panel); overflow: auto; box-shadow: var(--ui-shadow-pop); }
.lg-detail::backdrop { background: #000b; }
.lg-detail-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 20px; border-bottom: 1px solid var(--lg-line); }
.lg-close { font-size: 26px; width: 44px; padding: 0; }
.lg-eyebrow { color: var(--lg-muted); font-size: 12px; }
.lg-detail-body { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(280px, 1fr); }
.lg-detail-visual { position: relative; min-height: 320px; height: min(65dvh, 660px); background: var(--lg-bg); display: grid; place-items: center; }
.lg-detail-visual > img { max-width: 100%; max-height: 100%; width: 100%; height: 100%; object-fit: contain; }
.lg-detail-visual iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: #000; }
.lg-play { position: absolute; bottom: 20px; left: 20px; background: var(--lg-panel); color: var(--lg-ink); border-color: var(--lg-line); }
.lg-detail-copy { padding: 32px; display: flex; flex-direction: column; align-items: stretch; }
.lg-detail-copy h2 { font-size: 28px; font-weight: 500; line-height: 1.2; margin: 12px 0; overflow-wrap: anywhere; }
.lg-detail-copy > p { color: var(--lg-muted); margin: 0 0 24px; }
.lg-facts { margin: 12px 0 24px; border-block: 1px dashed var(--lg-line); padding: 14px 0; }
.lg-facts > div { display: flex; justify-content: space-between; gap: 16px; padding: 7px 0; font-size: 12px; }
.lg-facts dt { color: var(--lg-muted); }.lg-facts dd { margin: 0; text-align: right; }
.lg-hint { color: var(--lg-muted); font-size: 12px; }.lg-detail-copy > small { text-align: center; margin-top: 10px; }
.lg-primary { background: var(--ui-accent, #ef282d); color: var(--ui-on-accent, #fff); min-height: 44px; margin-top: auto; }
.lg-primary:hover { background: var(--ui-accent-hover, #ff383d); }
.lg-error { color: var(--ui-accent-text, #ff5257) !important; }
.lg-detail :disabled { opacity: .5; cursor: default; }
.lg-gallery :is(button, input):focus-visible, .lg-detail button:focus-visible { outline: 2px solid var(--ui-ring, #f3f2f0); outline-offset: 3px; }
@media (max-width: 700px) {
  .lg-toolbar { gap: 12px; margin-bottom: 20px; }.lg-search { width: 100%; }.lg-filters { gap: 0; }.lg-filters .lg-button { padding-inline: 9px; font-size: 12px; min-height: 44px; }.lg-count { width: 100%; margin: 0; }
  .lg-detail { width: calc(100vw - 20px); max-height: calc(100dvh - 20px); }.lg-detail-body { display: flex; flex-direction: column; }.lg-detail-visual { min-height: 200px; height: 36dvh; }.lg-detail-copy { padding: 24px; }.lg-detail-copy h2 { font-size: 24px; }.lg-card-action { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) { .lg-card-action { transition: none; } }

.lg-detail-visual { align-self: start; width: 100%; min-height: 0; height: auto; aspect-ratio: var(--lg-ratio); max-height: calc(100dvh - 140px); }.lg-detail-visual > img { position: absolute; inset: 0; }.lg-detail-visual iframe { aspect-ratio: var(--lg-ratio); }
.lg-detail-copy { align-self: start; }
.lg-image-failed { pointer-events: none; }.lg-play { z-index: 1; }.lg-detail-visual iframe { z-index: 2; }

/* A card's loop sits over its cover and shows only once a frame is playing. */
.lg-card-art video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 180ms ease; pointer-events: none; }
.lg-card-art.is-playing video { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .lg-card-art video { transition: none; } }

/* The opened preview's film (gallery.js previewFilm) fits as the still does and shows once a frame plays; its keys
   sit at the corner. The picture is never taller than the sheet (above): a portrait template ran 1114 px tall in a
   900 px window, its lower third and its key under the fold. A source that cannot play keeps the still and says so quietly, on the card and in the preview. */
.lg-detail-visual > video { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; object-fit: contain; opacity: 0; transition: opacity 180ms ease; }
.lg-detail-visual.is-playing > video { opacity: 1; }
.lg-film-keys { position: absolute; left: 20px; bottom: 20px; z-index: 3; display: flex; gap: 8px; }
.lg-film-keys .lg-button { background: var(--lg-panel); color: var(--lg-ink); border-color: var(--lg-line); }
.lg-film-note { position: absolute; left: 20px; bottom: 20px; z-index: 3; margin: 0; padding: 6px 10px; border-radius: var(--ui-r-ctl, 6px); background: var(--lg-panel); color: var(--lg-muted); font-size: 12px; }
.lg-card-art.is-broken .lg-card-action { opacity: 1; color: var(--lg-muted); }
@media (prefers-reduced-motion: reduce) { .lg-detail-visual > video { transition: none; } }

/* The studio's admin mode: a card that is not live says so, and its preview
   gets a quiet row of tools under the one primary action. All neutral, the
   accent stays with Use template. */
.lg-card-status { position: absolute; top: 10px; left: 10px; padding: 3px 8px; font-size: 11px; color: var(--lg-ink); background: var(--lg-panel); border: 1px solid var(--lg-line); border-radius: var(--ui-r-ctl, 6px); pointer-events: none; }
.lg-admin { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 20px; padding-top: 14px; border-top: 1px dashed var(--lg-line); }
.lg-admin .lg-button { border-color: var(--lg-line); font-size: 12px; }
.lg-admin .lg-danger { margin-left: auto; }
.lg-admin-group { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; flex: 1 0 100%; }
.lg-admin-label { min-width: 52px; margin-right: 4px; color: var(--lg-muted); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }