/* Phone-X menu glass overlay: compatible with the locked production bundle. */
main[class*="lg:pl-[260px]"][class*="lg:pt-20"] {
  background-color: #020818;
  background-image:
    linear-gradient(180deg, rgba(2, 8, 24, 0.48), rgba(2, 8, 24, 0.58)),
    url("/assets/login-network-globe-WGzmvkK7.jpg");
  background-size: cover, cover;
  background-position: center top, center 32%;
  background-repeat: no-repeat;
  background-attachment: fixed, fixed;
}

main[class*="lg:pl-[260px]"][class*="lg:pt-20"] :is(section, article, div):is([class*="rounded-xl"], [class*="rounded-2xl"], [class*="rounded-3xl"])[class*="border"][class*="p-"]:not(button):not([role="button"]):not([class*="destructive"]):not([class*="amber-"]):not([class*="warning"]):not([class*="success"]):not([class*="red-"]):not([class*="green-"]):not([class*="yellow-"]):not([class*="min-h-[420px]"]) {
  position: relative;
  isolation: isolate;
  background-color: rgba(7, 13, 30, 0.58) !important;
  background-image: linear-gradient(135deg, rgba(221, 248, 255, 0.03), rgba(135, 177, 226, 0.006) 48%, rgba(167, 139, 250, 0.014));
  border-color: rgba(126, 188, 220, 0.12) !important;
  box-shadow:
    inset 0 1px 0 rgba(242, 252, 255, 0.035),
    0 12px 30px rgba(0, 4, 16, 0.24),
    0 0 8px rgba(34, 211, 238, 0.045);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
  backdrop-filter: blur(20px) saturate(150%);
}

@supports ((mask-composite: exclude) or (-webkit-mask-composite: xor)) {
  main[class*="lg:pl-[260px]"][class*="lg:pt-20"] :is(section, article, div):is([class*="rounded-xl"], [class*="rounded-2xl"], [class*="rounded-3xl"])[class*="border"][class*="p-"]:not(button):not([role="button"]):not([class*="destructive"]):not([class*="amber-"]):not([class*="warning"]):not([class*="success"]):not([class*="red-"]):not([class*="green-"]):not([class*="yellow-"]):not([class*="min-h-[420px]"])::before {
    content: "";
    position: absolute;
    inset: 0;
    padding: 1px;
    border-radius: inherit;
    pointer-events: none;
    background:
      linear-gradient(105deg, transparent 0%, rgba(226, 248, 255, 0.18) 12%, rgba(255, 255, 255, 0.92) 23%, rgba(34, 211, 238, 0.62) 38%, transparent 62%) left top / 70% 1px no-repeat,
      linear-gradient(180deg, transparent 0%, rgba(34, 211, 238, 0.78) 34%, rgba(255, 255, 255, 0.9) 52%, rgba(34, 211, 238, 0.12) 74%, transparent 100%) right 18% / 1px 38% no-repeat,
      linear-gradient(105deg, transparent 0%, rgba(34, 211, 238, 0.42) 22%, rgba(240, 249, 255, 0.78) 48%, rgba(167, 139, 250, 0.55) 68%, transparent 100%) right bottom / 48% 1px no-repeat,
      linear-gradient(180deg, transparent 0%, rgba(34, 211, 238, 0.66) 46%, rgba(230, 250, 255, 0.82) 58%, transparent 100%) left 76% / 1px 24% no-repeat;
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask-composite: exclude;
    filter: drop-shadow(0 0 2px rgba(111, 225, 255, 0.48));
  }
}

@media (max-width: 767px) {
  main[class*="lg:pl-[260px]"][class*="lg:pt-20"] {
    background-attachment: scroll, scroll;
  }

  main[class*="lg:pl-[260px]"][class*="lg:pt-20"] :is(section, article, div):is([class*="rounded-xl"], [class*="rounded-2xl"], [class*="rounded-3xl"])[class*="border"][class*="p-"]:not(button):not([role="button"]):not([class*="destructive"]):not([class*="amber-"]):not([class*="warning"]):not([class*="success"]):not([class*="red-"]):not([class*="green-"]):not([class*="yellow-"]):not([class*="min-h-[420px]"]) {
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    backdrop-filter: blur(14px) saturate(140%);
  }
}

@media (prefers-reduced-transparency: reduce) {
  main[class*="lg:pl-[260px]"][class*="lg:pt-20"] :is(section, article, div):is([class*="rounded-xl"], [class*="rounded-2xl"], [class*="rounded-3xl"])[class*="border"][class*="p-"]:not(button):not([role="button"]):not([class*="destructive"]):not([class*="amber-"]):not([class*="warning"]):not([class*="success"]):not([class*="red-"]):not([class*="green-"]):not([class*="yellow-"]):not([class*="min-h-[420px]"]) {
    background-color: rgba(10, 18, 40, 0.30) !important;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}

/* R4 fixes the opaque Phone-X page root that hid the globe below the panels. */
main[class*="lg:pl-[260px]"] > div > div.bg-background { background-color: transparent !important; }
