/*
  App Background — translated from BG.svg
  ─────────────────────────────────────────
  Applied directly to .app so blob percentages are always
  relative to the container's own width/height — fully responsive.
*/

:root {
  --bg-base:      #F7F9FF;
  --bg-blob-warm: #FFB246;
  --bg-blob-cool: #85A3F6;
}

/*
  Blob positions mirror the original Figma frame (390×844):
    Warm (orange) : cx=286.5 → 73.5%,  cy=127.5 → 15.1%
    Cool (blue)   : cx=45    → 11.5%,  cy=640   → 75.8%

  Both circles overflow their canvas edges in the SVG, so origins
  are pushed beyond 0–100% to replicate that cropped-arc effect.
*/
.app {
  background-color: var(--bg-base);
  background-image:
    radial-gradient(
      ellipse 90% 60% at 85% 5%,
      rgba(255, 178, 70, 0.65)  0%,
      rgba(255, 178, 70, 0.15) 45%,
      transparent               70%
    ),
    radial-gradient(
      ellipse 90% 65% at -5% 90%,
      rgba(133, 163, 246, 0.60)  0%,
      rgba(133, 163, 246, 0.14) 48%,
      transparent                70%
    );
}

/* ── bg-preview.html backward compat ────────────────
   .app-bg keeps the same visuals + grain texture.    */
.app-bg {
  background-color: var(--bg-base);
  background-image:
    radial-gradient(
      ellipse 90% 60% at 85% 5%,
      rgba(255, 178, 70, 0.65)  0%,
      rgba(255, 178, 70, 0.15) 45%,
      transparent               70%
    ),
    radial-gradient(
      ellipse 90% 65% at -5% 90%,
      rgba(133, 163, 246, 0.60)  0%,
      rgba(133, 163, 246, 0.14) 48%,
      transparent                70%
    );
}

.app-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  opacity: 0.25;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='390' height='390'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='390' height='390' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
  background-size: 390px 390px;
  background-repeat: repeat;
}