#imagesLibrary .creationArchiveCard,
#characterLibrary .characterPackCard.creationArchiveCard{
  display:grid!important;
  grid-template-rows:minmax(0,1fr) auto!important;
  overflow:hidden!important;
  background:
    radial-gradient(circle at top right, rgba(143,94,255,.14), transparent 34%),
    linear-gradient(180deg, rgba(10,17,29,.98), rgba(7,12,20,.98))!important;
}

#imagesLibrary .creationArchiveCard .creationArchiveMedia,
#characterLibrary .characterPackCard .characterPackThumb.creationArchiveMedia{
  position:relative!important;
  min-height:0!important;
  overflow:hidden!important;
  background:linear-gradient(180deg, rgba(14,22,37,.92), rgba(10,15,26,.92))!important;
  border-bottom:1px solid rgba(94,117,156,.18)!important;
}

#imagesLibrary .creationArchiveCard .creationArchiveMedia .esvylaPreviewBackdrop,
#characterLibrary .characterPackCard .characterPackThumb.creationArchiveMedia .esvylaPreviewBackdrop{
  position:absolute!important;
  inset:0!important;
  background-position:center!important;
  background-size:cover!important;
  filter:blur(18px) saturate(1.05)!important;
  transform:scale(1.12)!important;
  opacity:.55!important;
}

#imagesLibrary .creationArchiveCard .creationArchiveMedia::after,
#characterLibrary .characterPackCard .characterPackThumb.creationArchiveMedia::after{
  content:""!important;
  position:absolute!important;
  inset:0!important;
  background:linear-gradient(180deg, rgba(5,8,14,.06), rgba(5,8,14,.34))!important;
  pointer-events:none!important;
}

#imagesLibrary .creationArchiveCard .creationArchiveMedia .esvylaPreviewSurface,
#characterLibrary .characterPackCard .characterPackThumb.creationArchiveMedia .esvylaPreviewSurface{
  position:absolute!important;
  inset:0!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  padding:0!important;
  border-radius:0!important;
  overflow:hidden!important;
  background:transparent!important;
  box-shadow:none!important;
  z-index:1!important;
}

#imagesLibrary .creationArchiveCard .creationArchiveMedia .esvylaPreviewImage,
html body #characterLibrary .characterPackCard .characterPackThumb.creationArchiveMedia .esvylaPreviewImage{
  width:100%!important;
  height:100%!important;
  display:block!important;
  object-fit:contain!important;
  object-position:center center!important;
  background:transparent!important;
}

#imagesLibrary .creationArchiveCard .creationArchiveInfo,
#characterLibrary .characterPackCard .characterPackInfo.creationArchiveInfo{
  position:relative!important;
  z-index:2!important;
  gap:10px!important;
  padding:12px 14px!important;
}

#imagesLibrary .esvylaCardMetadata,
#characterLibrary .esvylaCardMetadata{
  display:flex!important;
  align-items:center!important;
  gap:8px!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
}

#imagesLibrary .esvylaCardMetadata::before,
#characterLibrary .esvylaCardMetadata::before{
  content:""!important;
  width:16px!important;
  height:16px!important;
  flex:0 0 16px!important;
  border-radius:6px!important;
  border:1px solid rgba(100,120,157,.42)!important;
  background:linear-gradient(180deg, rgba(18,27,44,.9), rgba(12,18,30,.9))!important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.03)!important;
}

#imagesLibrary .imageLibraryInlineActions,
#characterLibrary .imageLibraryInlineActions{
  margin-top:2px!important;
}

#characterLibrary .characterPackThumb > span{
  position:absolute!important;
  top:10px!important;
  right:10px!important;
  z-index:2!important;
  margin:0!important;
  padding:5px 9px!important;
  border-radius:999px!important;
  border:1px solid rgba(94,117,156,.42)!important;
  background:rgba(7,11,18,.78)!important;
  backdrop-filter:blur(8px)!important;
  color:#dbe5fb!important;
  font-size:10px!important;
  line-height:1!important;
}

#characterLibrary .characterPackThumb .characterPackFallback{
  position:absolute!important;
  inset:0!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  border-radius:14px!important;
  background:rgba(11,16,25,.68)!important;
  font-size:48px!important;
  color:#98a9d3!important;
  z-index:1!important;
}

@media (max-width: 900px){
  #imagesLibrary .creationArchiveCard .creationArchiveMedia .esvylaPreviewSurface,
  #characterLibrary .characterPackCard .characterPackThumb.creationArchiveMedia .esvylaPreviewSurface,
  #characterLibrary .characterPackThumb .characterPackFallback{inset:0!important}
}

@media (max-width: 620px){
  #imagesLibrary .creationArchiveCard .creationArchiveMedia .esvylaPreviewSurface,
  #characterLibrary .characterPackCard .characterPackThumb.creationArchiveMedia .esvylaPreviewSurface,
  #characterLibrary .characterPackThumb .characterPackFallback{inset:0!important}
}

/* The approved preview now uses every pixel of the image area: no framed inset. */
#imagesLibrary .creationArchiveCard .creationArchiveMedia .esvylaPreviewSurface,
#characterLibrary .characterPackCard .characterPackThumb.creationArchiveMedia .esvylaPreviewSurface{inset:0!important;border-radius:0!important;box-shadow:none!important;background:transparent!important}
#imagesLibrary .creationArchiveCard .creationArchiveMedia .esvylaPreviewImage,
html body #characterLibrary .characterPackCard .characterPackThumb.creationArchiveMedia .esvylaPreviewImage{object-fit:contain!important;width:100%!important;height:100%!important}