/* Stronger, visibly transparent glass. */
:root{
  --rg-surface:rgba(8,12,20,.10);
  --rg-surface-strong:rgba(8,12,20,.17);
  --rg-line:rgba(255,255,255,.30);
  --rg-line-soft:rgba(255,255,255,.15);
  --rg-shadow:0 24px 75px rgba(0,0,0,.34),
              inset 0 1px 0 rgba(255,255,255,.58),
              inset 0 -1px 0 rgba(255,255,255,.07),
              inset 16px 0 28px -26px rgba(72,225,255,.75),
              inset -16px 0 28px -26px rgba(255,79,115,.68);
}

.liquid-scene{
  background-image:
    linear-gradient(180deg,rgba(3,6,12,.28),rgba(3,6,12,.44)),
    linear-gradient(110deg,rgba(18,229,255,.06),transparent 25%,transparent 72%,rgba(255,79,115,.08)),
    url("../img/glass-bg-desktop.png") !important;
  background-size:cover, cover, cover !important;
  background-position:center center, center center, center center !important;
  background-repeat:no-repeat !important;
}
.liquid-scene::before{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(circle at 18% 22%,rgba(70,214,255,.16),transparent 18%),
    radial-gradient(circle at 76% 26%,rgba(255,84,167,.16),transparent 18%),
    radial-gradient(circle at 72% 84%,rgba(157,95,255,.13),transparent 22%),
    linear-gradient(180deg,rgba(4,8,15,.10),rgba(4,8,15,.24));
  mix-blend-mode:screen;
  filter:blur(10px);
  animation:rgSceneMove 18s ease-in-out infinite alternate;
}
@keyframes rgSceneMove{
  from{transform:translate3d(-18px,-10px,0) scale(1)}
  to{transform:translate3d(32px,22px,0) scale(1.05)}
}
.liquid-blob{opacity:.55 !important;filter:blur(62px) saturate(155%) !important}

.card,.topbar,.provider-side,.admin-side,.login-card,.modal,.access-card,.docs-side{
  background:linear-gradient(145deg,rgba(255,255,255,.095),rgba(255,255,255,.03) 36%,rgba(4,8,15,.035) 100%) !important;
  border-color:var(--rg-line) !important;
  box-shadow:var(--rg-shadow) !important;
  backdrop-filter:blur(28px) saturate(185%) contrast(108%) brightness(1.05) !important;
  -webkit-backdrop-filter:blur(28px) saturate(185%) contrast(108%) brightness(1.05) !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(128deg,rgba(255,255,255,.33) 0%,rgba(255,255,255,.09) 12%,transparent 29%),
    linear-gradient(310deg,rgba(72,225,255,.055),transparent 28%,rgba(255,79,115,.045) 82%,transparent) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.54),inset 0 0 0 1px rgba(255,255,255,.035) !important;
}
.topbar{background:rgba(7,11,18,.16) !important}
.provider-side,.admin-side{background:rgba(7,11,18,.12) !important}

.btn,.pill,.filter,.input,.select,.textarea,.provider-check,.endpoint-item,.provider-tag,.badge,.toggle{
  background:linear-gradient(145deg,rgba(255,255,255,.10),rgba(255,255,255,.025)) !important;
  border-color:rgba(255,255,255,.19) !important;
  backdrop-filter:blur(14px) saturate(160%) !important;
  -webkit-backdrop-filter:blur(14px) saturate(160%) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 8px 24px rgba(0,0,0,.15) !important;
}
.input,.select,.textarea,.code{background:rgba(3,7,13,.18) !important}

.glass-modal-backdrop{
  background:rgba(2,5,10,.34) !important;
  backdrop-filter:blur(32px) saturate(150%) brightness(.60) !important;
  -webkit-backdrop-filter:blur(32px) saturate(150%) brightness(.60) !important;
}
.glass-modal{
  background:linear-gradient(145deg,rgba(255,255,255,.14),rgba(255,255,255,.035) 46%,rgba(5,9,16,.18)) !important;
  border-color:rgba(255,255,255,.35) !important;
  box-shadow:0 35px 120px rgba(0,0,0,.48),inset 0 1px 0 rgba(255,255,255,.62),inset 14px 0 28px -26px rgba(72,225,255,.8),inset -14px 0 28px -26px rgba(255,79,115,.72) !important;
  backdrop-filter:blur(34px) saturate(190%) !important;
  -webkit-backdrop-filter:blur(34px) saturate(190%) !important;
}

.site-footer{background:rgba(7,11,18,.23) !important;border-color:rgba(255,255,255,.13) !important}


@media (max-width:600px){
  .liquid-scene{
    background-image:
      linear-gradient(180deg,rgba(3,6,12,.28),rgba(3,6,12,.44)),
      linear-gradient(110deg,rgba(18,229,255,.06),transparent 25%,transparent 72%,rgba(255,79,115,.08)),
      url("../img/glass-bg-mobile.png") !important;
    background-position:center center, center center, center top !important;
  }
}