/* ============================================================
   SITE wallpaper behind the interface.
   The wallpaper is NOT inside cards. Glass only reveals/blurs it.
   ============================================================ */
html{background:#05070d !important}
body{background:transparent !important;isolation:isolate}

/* Actual website wallpaper. */
.site-wallpaper{
  position:fixed;
  inset:0;
  z-index:-10;
  pointer-events:none;
  background-color:#05070d;
  background-image:url("../img/site-bg-desktop.png");
  background-size:cover;
  background-position:center center;
  background-repeat:no-repeat;
  transform:translateZ(0);
}
.site-wallpaper::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(180deg,rgba(2,5,11,.12),rgba(2,5,11,.24)),
    radial-gradient(circle at 50% 42%,transparent 0 30%,rgba(2,5,11,.08) 80%,rgba(2,5,11,.20) 100%);
}

/* Ambient lighting only. Absolutely no wallpaper in this layer. */
.liquid-scene{
  z-index:-8 !important;
  background:
    radial-gradient(circle at 10% 16%,rgba(33,201,239,.08),transparent 27%),
    radial-gradient(circle at 86% 18%,rgba(255,79,115,.09),transparent 27%),
    radial-gradient(circle at 70% 84%,rgba(161,117,255,.07),transparent 30%) !important;
  background-image:none !important;
}
.liquid-scene::before{
  background:
    radial-gradient(circle at 20% 32%,rgba(48,220,255,.07),transparent 18%),
    radial-gradient(circle at 78% 30%,rgba(255,75,158,.07),transparent 19%),
    radial-gradient(circle at 58% 78%,rgba(154,94,255,.055),transparent 21%) !important;
  filter:blur(18px) !important;
  opacity:.68;
}
.liquid-blob{opacity:.14 !important;filter:blur(78px) saturate(145%) !important}

/* Real transparent glass. No background image on any glass component. */
.card,.topbar,.provider-side,.admin-side,.login-card,.modal,.access-card,.docs-side{
  background:
    linear-gradient(145deg,
      rgba(255,255,255,.072) 0%,
      rgba(255,255,255,.026) 30%,
      rgba(8,12,20,.045) 70%,
      rgba(8,12,20,.07) 100%) !important;
  border:1px solid rgba(255,255,255,.28) !important;
  box-shadow:
    0 20px 60px rgba(0,0,0,.27),
    inset 0 1px 0 rgba(255,255,255,.52),
    inset 0 -1px 0 rgba(255,255,255,.06),
    inset 18px 0 28px -28px rgba(56,216,255,.70),
    inset -18px 0 28px -28px rgba(255,79,115,.65) !important;
  backdrop-filter:blur(16px) saturate(175%) contrast(106%) brightness(1.04) !important;
  -webkit-backdrop-filter:blur(16px) saturate(175%) contrast(106%) brightness(1.04) !important;
}
.card::before,.topbar::before,.provider-side::before,.admin-side::before,.login-card::before,.modal::before,.access-card::before,.docs-side::before{
  background:
    linear-gradient(132deg,
      rgba(255,255,255,.32) 0%,
      rgba(255,255,255,.09) 10%,
      rgba(255,255,255,.02) 25%,
      transparent 42%),
    linear-gradient(315deg,
      rgba(255,79,115,.03),
      transparent 34%,
      rgba(47,215,255,.03) 82%,
      transparent) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.50),
    inset 0 0 0 1px rgba(255,255,255,.024) !important;
}

.topbar{background:linear-gradient(180deg,rgba(8,11,18,.17),rgba(8,11,18,.09)) !important}
.provider-side,.admin-side{background:linear-gradient(90deg,rgba(8,11,18,.12),rgba(8,11,18,.05)) !important}

.btn,.pill,.filter,.input,.select,.textarea,.provider-check,.endpoint-item,.provider-tag,.badge,.toggle{
  background:linear-gradient(145deg,rgba(255,255,255,.09),rgba(255,255,255,.022)) !important;
  border-color:rgba(255,255,255,.19) !important;
  backdrop-filter:blur(11px) saturate(160%) !important;
  -webkit-backdrop-filter:blur(11px) saturate(160%) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.21),0 7px 20px rgba(0,0,0,.13) !important;
}
.input,.select,.textarea,.code{background:rgba(2,6,12,.20) !important}

.glass-modal-backdrop,.admin-login-backdrop{
  background:rgba(2,5,10,.24) !important;
  backdrop-filter:blur(24px) saturate(145%) brightness(.62) !important;
  -webkit-backdrop-filter:blur(24px) saturate(145%) brightness(.62) !important;
}
.glass-modal{
  background:linear-gradient(145deg,rgba(255,255,255,.11),rgba(255,255,255,.032) 42%,rgba(5,9,16,.07) 100%) !important;
  border-color:rgba(255,255,255,.34) !important;
  backdrop-filter:blur(19px) saturate(180%) contrast(106%) !important;
  -webkit-backdrop-filter:blur(19px) saturate(180%) contrast(106%) !important;
}
.site-footer{
  background:rgba(7,10,17,.13) !important;
  backdrop-filter:blur(14px) saturate(155%) !important;
  -webkit-backdrop-filter:blur(14px) saturate(155%) !important;
}

@media(max-width:600px){
  .site-wallpaper{
    background-image:url("../img/site-bg-mobile.png");
    background-size:cover;
    background-position:center top;
  }
}