/* This ensures the image layer exists and is visible */
body::after {
    content: "" !important;
    position: fixed !important;
    bottom: 130px !important;    /* Keeps it 20px from the bottom of the screen */
    left: 50% !important;
    transform: translateX(-50%) !important;

    /* size to image height, let width follow aspect ratio */
    width: 45% !important;
    min-width: 300px;
    aspect-ratio: 640/481 !important;

    background-image: url('https://i.ibb.co/JW1wHF3N/collage.jpg') !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center bottom !important;

    /* new: rounded corners + white outline */
    border: none !important;
    box-shadow: inset 0 0 0 3px rgba(255,255,255,0.95), 0 6px 18px rgba(0,0,0,0.45) !important;
    border-radius: 12px !important;
    overflow: hidden !important;

    /* High z-index to ensure it shows up; we can lower it if it blocks text */
    z-index: 2 !important;
    display: block !important;
    pointer-events: auto !important;
    cursor: zoom-in;
}

html::after {            /* replace .app with the actual wrapper selector */
  content: "";
  display: block;
  height: 1300px;
  pointer-events: none;
}

/* Force opaque, non-blurred card backgrounds (safe selectors) */
.card,
.card .card-inner,
.service-card,
.bookmark-card {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  background-color: rgba(30,30,30,1) !important; /* change to desired solid color */
}

/* rounded corners + subtle white outline and forced opaque black background */
[data-widget],
.card,
.card .card-inner,
.widget,
.section .card,
.section .card .card-inner,
div[class*="widget"],
div[class*="card"] {
  background-color: rgba(0,0,0,1) !important;
  color: #fff !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;

  border-radius: 12px !important;
  border: 3px solid rgba(255,255,255,0.12) !important;
  /*box-shadow: 0 1px 0 rgba(255,255,255,0.03), 0 6px 18px rgba(0,0,0,0.45) !important;*/
  overflow: hidden !important;
}

/* keep the image visually where it was by using the --fg-top CSS variable */
body.foreground-stopped::after {
  position: absolute !important;
  top: var(--fg-top, auto) !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  z-index: 1 !important;
  transition: none !important;
}