/* Patch over the compiled demo build: replace the flat grey wrapper with a
   dark, seamless backdrop tinted toward Futsalaki's own green/blue branding,
   matching the presentation style used for the WIZART demo. */

html, body {
  background:
    radial-gradient(circle at 18% 12%, rgba(21,153,72,0.22), transparent 38%),
    radial-gradient(circle at 86% 18%, rgba(71,191,255,0.14), transparent 42%),
    radial-gradient(circle at 50% 100%, rgba(21,153,72,0.10), transparent 45%),
    #0a0c0a !important;
}

/* body renders as display:flex centering a shrink-to-fit #root, which left
   the gradient trapped inside a box narrower than the real viewport. Force
   root and the wrapper to span the full width so the backdrop is seamless. */
#root { width: 100% !important; }

.min-h-screen.bg-gradient-to-br.from-gray-200.to-gray-300 {
  width: 100% !important;
  background: transparent !important;
}

/* iOS-style status bar overlay (time / wifi / battery) — was a hard white
   strip cutting across the top of the splash screen; blend it into the
   brand green instead so the notch area feels seamless with the screen. */
.absolute.top-0.left-0.right-0.z-50.flex.items-center.justify-between {
  background: rgba(21,153,72,0.95) !important;
}
.absolute.top-0.left-0.right-0.z-50 span.text-gray-900 {
  color: #ffffff !important;
}

/* title row above the phone */
.flex.items-center.gap-3 > span.text-gray-600 {
  color: #d8d3c8 !important;
}

/* caption below the phone */
p.text-gray-400.text-xs.text-center {
  color: #767a73 !important;
}

/* give the bezel a quiet glow ring so it doesn't look like it's floating
   on a mismatched background */
.relative.bg-black.rounded-\[52px\].shadow-2xl {
  box-shadow:
    0 0 0 2px rgba(71,191,255,0.12),
    0 0 80px -10px rgba(21,153,72,0.35),
    0 40px 100px -20px rgba(0,0,0,0.85) !important;
}