/* London Baby neon stage header — v2
   Purpose-built abstract back layer for the frozen header.
   This keeps the existing logo, date pills, Trip Map/Concierge controls,
   sticky shell behavior, scrolling, gestures, modals, and layout untouched.
   The background is designed mobile-first so the visible areas around the
   controls carry obvious magenta/cyan/purple energy without competing with them. */

html body #app.app-shell > header.app-header,
html body #app.app-shell > .app-header,
html body .app-shell > header.app-header,
html body .app-header {
  background-color: #050617 !important;
  background-image:
    radial-gradient(ellipse at 12% 14%, rgba(255, 47, 172, 0.62) 0%, rgba(255, 47, 172, 0.30) 20%, rgba(255, 47, 172, 0.00) 47%),
    radial-gradient(ellipse at 91% 21%, rgba(49, 235, 255, 0.48) 0%, rgba(49, 235, 255, 0.21) 21%, rgba(49, 235, 255, 0.00) 48%),
    radial-gradient(ellipse at 54% 88%, rgba(140, 69, 255, 0.66) 0%, rgba(140, 69, 255, 0.24) 26%, rgba(140, 69, 255, 0.00) 58%),
    linear-gradient(125deg, rgba(255, 47, 172, 0.22) 0%, rgba(91, 24, 161, 0.42) 30%, rgba(5, 11, 45, 0.94) 58%, rgba(7, 67, 95, 0.42) 100%),
    linear-gradient(180deg, #09051f 0%, #07102b 50%, #030713 100%) !important;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  isolation: isolate !important;
  overflow: hidden !important;
}

/* Neon beams, arcs and sparkle field. This replaces the old photo/Union Jack layer. */
html body #app.app-shell > header.app-header::before,
html body #app.app-shell > .app-header::before,
html body .app-shell > header.app-header::before,
html body .app-header::before,
body > header::before,
.app-shell > header::before,
.site-header::before {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  inset: -18% -10% !important;
  z-index: 0 !important;
  pointer-events: none !important;
  opacity: 1 !important;
  visibility: visible !important;
  background-image:
    /* large visible neon loop behind logo/date row */
    radial-gradient(ellipse at 8% 5%, rgba(255,255,255,0) 0 33%, rgba(255, 62, 182, 0.44) 34%, rgba(255, 62, 182, 0.17) 35.2%, rgba(255,255,255,0) 37.5%),
    /* cyan loop on the concierge side */
    radial-gradient(ellipse at 95% 43%, rgba(255,255,255,0) 0 31%, rgba(39, 235, 228, 0.38) 32%, rgba(67, 126, 255, 0.20) 34%, rgba(255,255,255,0) 37%),
    /* purple underside sweep */
    radial-gradient(ellipse at 52% 118%, rgba(255,255,255,0) 0 40%, rgba(162, 80, 255, 0.38) 41%, rgba(255, 62, 182, 0.16) 43%, rgba(255,255,255,0) 47%),
    /* diagonal magenta beam */
    linear-gradient(125deg, rgba(255,255,255,0) 0 25%, rgba(255, 43, 170, 0.00) 32%, rgba(255, 43, 170, 0.30) 36%, rgba(255,255,255,0.07) 37%, rgba(255, 43, 170, 0.18) 39%, rgba(255,255,255,0) 48%),
    /* diagonal cyan beam */
    linear-gradient(58deg, rgba(255,255,255,0) 0 43%, rgba(45, 238, 229, 0.00) 48%, rgba(45, 238, 229, 0.24) 53%, rgba(255,255,255,0.08) 54%, rgba(45, 238, 229, 0.14) 56%, rgba(255,255,255,0) 64%),
    /* subtle starry points */
    radial-gradient(circle at 19% 30%, rgba(255,255,255,0.95) 0 1.3px, rgba(255,255,255,0) 2.4px),
    radial-gradient(circle at 73% 17%, rgba(255,255,255,0.88) 0 1.2px, rgba(255,255,255,0) 2.4px),
    radial-gradient(circle at 88% 70%, rgba(255,255,255,0.88) 0 1.1px, rgba(255,255,255,0) 2.2px),
    radial-gradient(circle at 35% 82%, rgba(255,255,255,0.72) 0 1.0px, rgba(255,255,255,0) 2.1px) !important;
  background-size: cover, cover, cover, cover, cover, 100% 100%, 100% 100%, 100% 100%, 100% 100% !important;
  filter: saturate(1.18) contrast(1.05) !important;
}

/* Readability veil + subtle London silhouette impression in the lower band. */
html body #app.app-shell > header.app-header::after,
html body #app.app-shell > .app-header::after,
html body .app-shell > header.app-header::after,
html body .app-header::after,
body > header::after,
.app-shell > header::after,
.site-header::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
  pointer-events: none !important;
  display: block !important;
  background-image:
    /* faint skyline-ish verticals along the bottom; decorative only */
    linear-gradient(180deg, rgba(255,255,255,0) 0 63%, rgba(0,0,0,0.12) 64%, rgba(0,0,0,0.40) 100%),
    repeating-linear-gradient(90deg, rgba(255,255,255,0) 0 42px, rgba(255,255,255,0.045) 43px 45px, rgba(255,255,255,0) 46px 78px),
    radial-gradient(ellipse at 10% 72%, rgba(255, 47, 172, 0.28) 0%, rgba(255, 47, 172, 0.10) 18%, rgba(255, 47, 172, 0) 42%),
    radial-gradient(ellipse at 88% 72%, rgba(38, 232, 225, 0.24) 0%, rgba(38, 232, 225, 0.10) 18%, rgba(38, 232, 225, 0) 42%),
    linear-gradient(180deg, rgba(0,0,0,0.04) 0%, rgba(0,0,0,0.08) 56%, rgba(0,0,0,0.34) 100%) !important;
  mix-blend-mode: normal !important;
}

html body #app.app-shell > header.app-header > *,
html body #app.app-shell > .app-header > *,
html body .app-header > * {
  position: relative !important;
  z-index: 2 !important;
}

/* Mobile is the primary target: make the empty zones visibly alive around the controls. */
@media (max-width: 760px) {
  html body #app.app-shell > header.app-header,
  html body #app.app-shell > .app-header,
  html body .app-shell > header.app-header,
  html body .app-header {
    background-image:
      radial-gradient(ellipse at 17% 9%, rgba(255, 47, 172, 0.72) 0%, rgba(255, 47, 172, 0.34) 23%, rgba(255, 47, 172, 0.00) 50%),
      radial-gradient(ellipse at 88% 25%, rgba(49, 235, 255, 0.52) 0%, rgba(49, 235, 255, 0.23) 22%, rgba(49, 235, 255, 0.00) 50%),
      radial-gradient(ellipse at 50% 92%, rgba(148, 78, 255, 0.72) 0%, rgba(148, 78, 255, 0.27) 26%, rgba(148, 78, 255, 0.00) 60%),
      linear-gradient(125deg, rgba(255, 47, 172, 0.28) 0%, rgba(91, 24, 161, 0.50) 31%, rgba(5, 11, 45, 0.96) 61%, rgba(7, 67, 95, 0.50) 100%),
      linear-gradient(180deg, #09051f 0%, #07102b 50%, #030713 100%) !important;
  }

  html body #app.app-shell > header.app-header::before,
  html body #app.app-shell > .app-header::before,
  html body .app-shell > header.app-header::before,
  html body .app-header::before,
  body > header::before,
  .app-shell > header::before,
  .site-header::before {
    inset: -10% -18% !important;
    background-image:
      radial-gradient(ellipse at 2% 8%, rgba(255,255,255,0) 0 29%, rgba(255, 61, 183, 0.62) 30%, rgba(255, 61, 183, 0.24) 32%, rgba(255,255,255,0) 36%),
      radial-gradient(ellipse at 103% 44%, rgba(255,255,255,0) 0 30%, rgba(42, 239, 230, 0.48) 31%, rgba(66, 135, 255, 0.26) 33%, rgba(255,255,255,0) 38%),
      radial-gradient(ellipse at 52% 116%, rgba(255,255,255,0) 0 36%, rgba(172, 90, 255, 0.52) 37%, rgba(255, 61, 183, 0.22) 40%, rgba(255,255,255,0) 46%),
      linear-gradient(126deg, rgba(255,255,255,0) 0 23%, rgba(255, 43, 170, 0.00) 31%, rgba(255, 43, 170, 0.44) 35%, rgba(255,255,255,0.10) 36%, rgba(255, 43, 170, 0.22) 38%, rgba(255,255,255,0) 48%),
      linear-gradient(57deg, rgba(255,255,255,0) 0 39%, rgba(45, 238, 229, 0.00) 47%, rgba(45, 238, 229, 0.34) 52%, rgba(255,255,255,0.10) 53%, rgba(45, 238, 229, 0.18) 56%, rgba(255,255,255,0) 65%),
      radial-gradient(circle at 22% 30%, rgba(255,255,255,0.96) 0 1.3px, rgba(255,255,255,0) 2.5px),
      radial-gradient(circle at 78% 15%, rgba(255,255,255,0.88) 0 1.2px, rgba(255,255,255,0) 2.4px),
      radial-gradient(circle at 91% 70%, rgba(255,255,255,0.85) 0 1.1px, rgba(255,255,255,0) 2.3px),
      radial-gradient(circle at 34% 86%, rgba(255,255,255,0.76) 0 1px, rgba(255,255,255,0) 2.2px) !important;
  }
}