/* Global page loading overlay */
body:not(.page-ready)::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 2147483646;
  background: rgba(20, 20, 26, .68);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  pointer-events: all;
}

body:not(.page-ready)::after {
  content: "";
  position: fixed;
  top: 50%;
  left: 50%;
  z-index: 2147483647;
  width: 44px;
  height: 44px;
  margin: -22px 0 0 -22px;
  border: 4px solid rgba(168, 85, 247, .25);
  border-top-color: #a855f7;
  border-right-color: #7c3aed;
  border-radius: 50%;
  animation: global-page-loader-spin .8s linear infinite;
}

@keyframes global-page-loader-spin {
  to { transform: rotate(360deg); }
}

body.page-ready::before,
body.page-ready::after {
  display: none;
}

/* Bottom sheets with long content must scroll inside the viewport. */
.modal-layer {
  overflow: hidden !important;
}

.modal-layer .sheet {
  max-height: calc(100dvh - var(--safe-top) - 8px) !important;
  min-height: 0 !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior: contain !important;
  -webkit-overflow-scrolling: touch !important;
  touch-action: pan-y !important;
}

/* Keep the page behind every modal neutral: blur plus black dimming only. */
.modal-layer {
  background: rgba(0, 0, 0, 0.72) !important;
  background-image: none !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: blur(4px) !important;
  backdrop-filter: blur(4px) !important;
}

.modal-layer .sheet {
  box-shadow: none !important;
}

.modal-layer::before,
.modal-layer::after,
.modal-layer .sheet::before,
.modal-layer .sheet::after {
  box-shadow: none !important;
  background-image: none !important;
}