:root {
  --system-bg: #eef2f7;
  --system-line: rgba(60, 86, 122, 0.055);
  --system-accent-line: rgba(37, 99, 235, 0.045);
}

html {
  min-height: 100%;
  background: var(--system-bg);
}

body {
  min-height: 100vh;
  background-color: var(--system-bg) !important;
  background-image:
    linear-gradient(var(--system-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--system-line) 1px, transparent 1px),
    linear-gradient(135deg, transparent 46%, var(--system-accent-line) 47%, transparent 48%) !important;
  background-size: 48px 48px, 48px 48px, 320px 320px !important;
  background-attachment: fixed !important;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(circle at 12% 8%, rgba(255, 255, 255, 0.82), transparent 30%),
    radial-gradient(circle at 88% 22%, rgba(203, 213, 225, 0.3), transparent 34%);
}

main, .page-shell, .login-shell {
  position: relative;
  z-index: 0;
}

@media (max-width: 640px) {
  body {
    background-size: 36px 36px, 36px 36px, 240px 240px !important;
    background-attachment: scroll !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
  }
}