:root {
  --flowroom-route-canvas-base: #202528;
  --flowroom-route-canvas:
    radial-gradient(960px 560px at 50% -120px, rgba(79, 217, 117, 0.2), rgba(79, 217, 117, 0.055) 48%, transparent 74%),
    radial-gradient(880px 760px at -120px 104%, rgba(40, 157, 183, 0.18), transparent 70%),
    radial-gradient(940px 820px at calc(100% + 150px) 102%, rgba(169, 98, 241, 0.2), rgba(191, 71, 151, 0.08) 48%, transparent 72%),
    linear-gradient(145deg, #252b2a 0%, #25282d 51%, #2b242d 100%);
  --flowroom-route-panel:
    radial-gradient(110% 90% at 9% -24%, rgba(79, 217, 117, 0.1), transparent 58%),
    linear-gradient(155deg, rgba(39, 45, 44, 0.96), rgba(27, 30, 34, 0.97));
  --flowroom-route-border: rgba(255, 255, 255, 0.105);
  --flowroom-route-shadow: 0 26px 66px -40px rgba(0, 0, 0, 0.8), inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

html[data-current-route="/notifications"],
body[data-current-route="/notifications"],
html[data-current-route="/notifications"] #root,
body[data-current-route="/notifications"] #root,
html[data-current-route="/notifications"] .content,
body[data-current-route="/notifications"] .content,
html[data-current-route="/help"],
body[data-current-route="/help"],
html[data-current-route="/help"] #root,
body[data-current-route="/help"] #root,
html[data-current-route="/help"] .content,
body[data-current-route="/help"] .content,
html[data-current-route^="/messages"],
body[data-current-route^="/messages"],
html[data-current-route^="/messages"] #root,
body[data-current-route^="/messages"] #root,
html[data-current-route^="/messages"] .content,
body[data-current-route^="/messages"] .content {
  background-color: var(--flowroom-route-canvas-base) !important;
}

body[data-current-route="/notifications"] div:has(> div > #notification-wrap-wrap),
body[data-current-route="/help"] div:has(> .support-page-shell),
body[data-current-route^="/messages"] #messages-wrapper {
  background-color: var(--flowroom-route-canvas-base) !important;
  background-image: var(--flowroom-route-canvas) !important;
  background-repeat: no-repeat !important;
  background-position: center top !important;
}

body[data-current-route="/help"] .support-page-shell {
  background: transparent !important;
}

body[data-current-route="/help"] .support-note-card,
body[data-current-route^="/messages"] .messages-container {
  background: var(--flowroom-route-panel) !important;
  border-color: var(--flowroom-route-border) !important;
  box-shadow: var(--flowroom-route-shadow) !important;
}

@media (max-width: 767px) {
  :root {
    --flowroom-route-canvas:
      radial-gradient(640px 420px at 50% -90px, rgba(79, 217, 117, 0.18), transparent 72%),
      radial-gradient(620px 700px at calc(100% + 210px) 98%, rgba(169, 98, 241, 0.16), transparent 72%),
      linear-gradient(155deg, #222826 0%, #23262b 56%, #29232b 100%);
  }

  body[data-current-route="/help"] .support-note-card {
    background: transparent !important;
    box-shadow: none !important;
  }

  body[data-current-route^="/messages"] .messages-container {
    background:
      radial-gradient(120% 82% at 12% -20%, rgba(79, 217, 117, 0.08), transparent 58%),
      linear-gradient(165deg, rgba(31, 36, 36, 0.99), rgba(24, 26, 30, 0.995)) !important;
    box-shadow: none !important;
  }
}

@media (prefers-contrast: more) {
  :root {
    --flowroom-route-border: rgba(255, 255, 255, 0.2);
  }
}