/* Keep custom backgrounds in the same cascade layer as the theme.
   Layered !important theme rules override unlayered !important rules. */
@layer pop {
  html:root[data-design="armufa-modern"] body.has-site-background.has-site-background {
    isolation:isolate;
    background:transparent!important;
  }
  html:root[data-design="armufa-modern"] body.has-site-background.has-site-background::before,
  html:root[data-design="armufa-modern"] body.has-site-background.has-site-background::after {
    display:none!important;
  }
  html:root[data-design="armufa-modern"] body.has-site-background.has-site-background :is(.mc-page,.docs-wrap,.sy-profile-shell) {
    background:transparent!important;
  }
  html:root[data-design="armufa-modern"] body.has-site-background.has-site-background.armufa-landing .hero {
    background:transparent!important;
  }
}
/* Isolation keeps this negative layer above the document canvas and below
   content without changing the stacking order of menus, dialogs or headers. */
#site-background { position:fixed; inset:0; z-index:-1; overflow:hidden; pointer-events:none; background:#eef3fc; }
#site-background img, #site-background video, #bg-preview img, #bg-preview video { display:block; width:100%; height:100%; object-fit:cover; }
#site-background::after, #bg-preview::after { content:''; position:absolute; inset:0; background:rgba(245,248,255,var(--bg-overlay,.35)); pointer-events:none; }
#bg-preview { position:relative; height:220px; overflow:hidden; border-radius:16px; margin-top:15px; background:#eef3fc; }
#bg-preview[hidden] { display:none; }