:root {
  --ouson-page-background:
    radial-gradient(circle at 12% 8%, rgba(142, 193, 245, 0.34) 0%, rgba(207, 230, 252, 0.24) 34%, transparent 55%),
    radial-gradient(circle at 94% 42%, rgba(151, 204, 250, 0.28) 0%, transparent 46%),
    linear-gradient(180deg, #e4f2ff 0%, #f7fbff 48%, #e9f5ff 100%);
}

html,
body,
#app,
.app-stage,
.phone-frame,
.app-content,
.app-shell,
.main-content,
.page-shell,
.screen-container {
  background-color: #e9f5ff !important;
  background-image: var(--ouson-page-background) !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
  background-attachment: fixed !important;
}

.app-content > section.app-screen:not(.signin-page):not(.create-account-page):not(.forgot-password-page),
.app-content > main,
.app-content > .screen,
.app-content > .page,
.app-content > .view,
.app-content > [data-page],
.app-content > [data-screen] {
  background-color: transparent !important;
  background-image: none !important;
}

.app-content > section.forgot-password-page {
  background-color: #071948 !important;
  background-image:
    radial-gradient(circle at 18% 24%, rgba(31, 98, 232, 0.42), transparent 30%),
    radial-gradient(circle at 86% 34%, rgba(20, 68, 174, 0.48), transparent 34%),
    linear-gradient(180deg, #071948 0%, #09276c 58%, #f4f7fc 58%, #f4f7fc 100%) !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
  background-attachment: scroll !important;
}