:root {
  --app-bg-top: #ffffff;
  --app-bg-mid: #ffffff;
  --app-bg-bottom: #ffffff;
}

html,
body,
#app {
  background: #ffffff !important;
  background-image: none !important;
}

#app .screen,
#app .signup-screen,
#app .login-screen,
#app .home-wide-layout,
#app .home-main-column,
#app .focus-timer-page,
#app .usage-guide-page,
#app .ranking-page,
#app .sleep-settings-panel {
  background: #ffffff !important;
  background-image: none !important;
}

#app .screen::before,
#app .screen::after,
#app .home-wide-layout::before,
#app .home-wide-layout::after,
#app .home-main-column::before,
#app .home-main-column::after,
#app .signup-screen::before,
#app .signup-screen::after,
#app .login-screen::before,
#app .login-screen::after,
#app .focus-timer-page::before,
#app .focus-timer-page::after,
#app .usage-guide-page::before,
#app .usage-guide-page::after,
#app .ranking-page::before,
#app .ranking-page::after {
  background: transparent !important;
  background-image: none !important;
}

body.dark,
body.dark #app,
body[data-theme="dark"],
body[data-theme="dark"] #app {
  background: #151515 !important;
  background-image: none !important;
}

body.dark #app .screen,
body.dark #app .home-wide-layout,
body.dark #app .home-main-column,
body[data-theme="dark"] #app .screen,
body[data-theme="dark"] #app .home-wide-layout,
body[data-theme="dark"] #app .home-main-column {
  background:
    radial-gradient(circle at 50% -14%, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0) 40%),
    linear-gradient(180deg, #181818 0%, #111 100%) !important;
  background-image:
    radial-gradient(circle at 50% -14%, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0) 40%),
    linear-gradient(180deg, #181818 0%, #111 100%) !important;
}