/* Subtle app background accent wash. Main app only. Does not touch login or modals. */
#mainView:not(.hidden){
  min-height:100dvh;
  background:
    radial-gradient(circle at 18% 4%, rgba(var(--pp-accent-rgb, 124,58,237), .18), transparent 34rem),
    radial-gradient(circle at 88% 18%, rgba(var(--pp-accent-rgb, 124,58,237), .12), transparent 30rem),
    linear-gradient(180deg, rgba(var(--pp-accent-rgb, 124,58,237), .055), transparent 19rem),
    #3d4547 !important;
}

body.light #mainView:not(.hidden){
  background:
    radial-gradient(circle at 18% 4%, rgba(var(--pp-accent-rgb, 124,58,237), .12), transparent 34rem),
    radial-gradient(circle at 88% 18%, rgba(var(--pp-accent-rgb, 124,58,237), .08), transparent 30rem),
    linear-gradient(180deg, rgba(var(--pp-accent-rgb, 124,58,237), .045), transparent 19rem),
    #f4f5f7 !important;
}

/* Keep overlay/modals on their own surfaces */
#loginView,
#ppDetailsOverlay,
#ppResultsOverlay,
#ppSettingsOverlay,
#settingsOverlay{
  background-color:inherit;
}

/* Keep accent background covering full mobile viewport, including loading states */
html,
body,
#app,
.screen,
#mainView{
  min-height: 100dvh !important;
}

body{
  background-color: #343d3d !important;
  background-attachment: fixed !important;
}

body::before{
  content: "" !important;
  position: fixed !important;
  inset: 0 !important;
  min-height: 100dvh !important;
  pointer-events: none !important;
  z-index: -1 !important;
}

@supports (height: 100svh){
  html,
  body,
  #app,
  .screen,
  #mainView{
    min-height: 100svh !important;
  }

  body::before{
    min-height: 100svh !important;
  }
}

/* Mobile startup/background fix: put the accent wash on the real page background */
html[data-pp-accent],
html[data-pp-accent] body{
  min-height: 100% !important;
  background-color: #343d3d !important;
  background-image:
    radial-gradient(120% 70% at 50% -8%,
      rgba(var(--pp-accent-rgb), .36) 0%,
      rgba(var(--pp-accent-rgb), .18) 34%,
      rgba(52,61,61,0) 68%
    ),
    linear-gradient(180deg,
      rgba(var(--pp-accent-rgb), .16) 0%,
      #343d3d 42%,
      #343d3d 100%
    ) !important;
  background-repeat: no-repeat !important;
  background-size: 100% 100dvh, 100% 100dvh !important;
  background-attachment: fixed !important;
}

html[data-pp-accent] body,
html[data-pp-accent] #app,
html[data-pp-accent] .screen,
html[data-pp-accent] #mainView{
  min-height: 100dvh !important;
}

html[data-pp-accent] #app,
html[data-pp-accent] .screen,
html[data-pp-accent] #mainView{
  background: transparent !important;
}

/* iOS fallback */
@supports (height: 100svh){
  html[data-pp-accent],
  html[data-pp-accent] body{
    background-size: 100% 100svh, 100% 100svh !important;
  }

  html[data-pp-accent] body,
  html[data-pp-accent] #app,
  html[data-pp-accent] .screen,
  html[data-pp-accent] #mainView{
    min-height: 100svh !important;
  }
}