/* Reset minimal */
    html,body { height:100%; margin:0; padding:0; overflow:hidden; background:transparent; }
  
    /* Accessibility: respect reduced motion */
    @media (prefers-reduced-motion: reduce) {
      :root { --dur-move: 1ms; --dur-hue: 1ms; }
    }
    :root {
      --dur-move: 12000ms;   /* movement speed */
      --dur-hue: 10000ms;    /* hue rotation speed */
      --blur-size: 140px;    /* blur amount */
      --alpha: 1;            /* overall opacity */
    }
  
    /* Theme-specific color variables */
    [data-theme="light"] {
      --blob-red: rgba(255, 32, 66, 0.7);
      --blob-orange: rgba(255, 114, 32, 0.7);
      --blob-yellow: rgba(255, 224, 79, 0.7);
      --blob-green: rgba(51, 216, 109, 0.7);
      --blob-blue: rgba(35, 152, 220, 0.6);
      --blob-indigo: rgba(85, 72, 200, 0.6);
      --blob-violet: rgba(181, 84, 196, 0.6);
      --blob-pink: rgba(219, 69, 154, 0.6);
      --blob-indigo-violet: rgba(201, 35, 35, 0.6);
      --blob-blue-turquoise: rgba(0, 180, 195, 0.6);
      --blob-green-alt: rgba(28, 200, 110, 0.7);
      --blob-yellow-alt: rgba(255, 244, 105, 0.7);
      --blob-orange-alt: rgba(255, 130, 58, 0.7);
      --blob-red-peach: rgba(255, 66, 45, 0.7);
    }

    [data-theme="dark"] {
      --blob-red: rgba(220, 36, 66, 0.5);
      --blob-orange: rgba(228, 98, 34, 0.5);
      --blob-yellow: rgba(188, 169, 40, 0.5);
      --blob-green: rgba(35, 140, 70, 0.5);
      --blob-blue: rgba(27, 90, 130, 0.4);
      --blob-indigo: rgba(54, 36, 122, 0.4);
      --blob-violet: rgba(92, 28, 100, 0.4);
      --blob-pink: rgba(155, 35, 100, 0.4);
      --blob-indigo-violet: rgba(70, 16, 85, 0.4);
      --blob-blue-turquoise: rgba(0, 120, 150, 0.4);
      --blob-green-alt: rgba(38, 145, 70, 0.5);
      --blob-yellow-alt: rgba(170, 150, 50, 0.5);
      --blob-orange-alt: rgba(210, 88, 43, 0.5);
      --blob-red-peach: rgba(188, 48, 40, 0.5);
    }

    /* Blurred rainbow blobs */
    body::before,
    body::after {
      content: "";
      inset: -30%;
      pointer-events: none;
      z-index: -1;
      background-repeat: no-repeat;
      background-size: 140% 140%;
      mix-blend-mode: screen;
      opacity: var(--alpha);
      filter: blur(var(--blur-size)) saturate(1.3);
                  position:  fixed ;

    }

    /* Hide blur background when other effects are active */
    .fullscreen-blur-hide::before,
    .fullscreen-blur-hide::after {

      opacity: 0 !important;
      display: none;
            position: revert !important;


    }

    /* Ensure blur background is visible when effect is 'none' */
   .fullscreen-blur-hide::before,
  .fullscreen-blur-hide::after {
      opacity: var(--alpha) !important;
      display: block;
    }
  
    /* Left-top blob: theme-responsive rainbow gradient */
    body::before {
      background-image: radial-gradient(
        circle at 30% 30%,
        var(--blob-red)    0%,   /* Red */
        var(--blob-orange) 16%,  /* Orange */
        var(--blob-yellow) 28%,  /* Yellow */
        var(--blob-green)  44%,  /* Green */
        var(--blob-blue)   60%,  /* Blue */
        var(--blob-indigo) 76%,  /* Indigo */
        var(--blob-violet) 88%,  /* Violet */
        rgba(0,0,0,0) 100%
      );
      transform: translate3d(-10%, -5%, 0) scale(1.15);
      animation:
        blobMoveA var(--dur-move) linear infinite,
        hueRotate var(--dur-hue) linear infinite;
    }
  
    /* Right-bottom blob: theme-responsive rainbow gradient with offset colors */
    body::after {
      background-image: radial-gradient(
        circle at 70% 70%,
        var(--blob-pink)          0%,   /* Violet-pink highlight */
        var(--blob-indigo-violet) 15%,  /* Indigo-violet */
        var(--blob-blue-turquoise) 26%,  /* Blue-turquoise */
        var(--blob-green-alt)     40%,  /* Green */
        var(--blob-yellow-alt)    54%,  /* Yellow */
        var(--blob-orange-alt)    72%,  /* Orange */
        var(--blob-red)     86%,  /* Red-peach blend */
        rgba(0,0,0,0) 100%
      );
      transform: translate3d(10%, 5%, 0) scale(1.05);
      animation:
        blobMoveB calc(var(--dur-move) * 1.2) linear infinite,
        hueRotate calc(var(--dur-hue) * 1.1) linear reverse infinite;
    }
  
    /* Movement keyframes (use translate to animate) */
    @keyframes blobMoveA {
      0%   { transform: translate3d(-12%, -6%, 0) scale(1.12) rotate(0.01deg); }
      25%  { transform: translate3d(6%, -10%, 0) scale(1.18) rotate(2deg); }
      50%  { transform: translate3d(12%, 8%, 0) scale(1.15) rotate(-1deg); }
      75%  { transform: translate3d(-8%, 12%, 0) scale(1.14) rotate(1deg); }
      100% { transform: translate3d(-12%, -6%, 0) scale(1.12) rotate(0.01deg); }
    }
  
    @keyframes blobMoveB {
      0%   { transform: translate3d(12%, 6%, 0) scale(1.06) rotate(0.01deg); }
      25%  { transform: translate3d(-6%, 10%, 0) scale(1.10) rotate(-1deg); }
      50%  { transform: translate3d(-14%, -8%, 0) scale(1.08) rotate(2deg); }
      75%  { transform: translate3d(8%, -12%, 0) scale(1.07) rotate(-1deg); }
      100% { transform: translate3d(12%, 6%, 0) scale(1.06) rotate(0.01deg); }
    }
  
    /* Smooth, continuous hue rotation applied via filter */
    @keyframes hueRotate {
      from { filter: blur(var(--blur-size)) saturate(1.3) hue-rotate(0deg); }
      to   { filter: blur(var(--blur-size)) saturate(1.3) hue-rotate(360deg); }
    }

    /* Reduce blur opacity on dark theme for set pages and login page */
    [data-theme="dark"] body.set-page::before,
    [data-theme="dark"] body.set-page::after,
    [data-theme="dark"] body.login-page::before,
    [data-theme="dark"] body.login-page::after,
    [data-theme="dark"] body.setaccount-page::before,
    [data-theme="dark"] body.setaccount-page::after {
      opacity: 0.15 !important;
    }