/* bg-2: app background "sea & sun" (light) / "night coast" (dark). Own code, MIT (c) 2026 Lapdrop.
   Root cause of the old look: html had a fixed dark-purple gradient and the light body an opaque lavender
   gradient that painted over the light glow layer (body::before, z-index:-1). Here html carries the base
   colour, body is transparent, and two fixed layers (soft colour fields + slowly rising drops) sit behind content. */
html[data-theme="light"]{background:#fbf6ee!important}
html[data-theme="dark"]{background:#070b16!important}
html[data-theme] body{background:transparent!important}
html[data-theme] body::before,html[data-theme] body::after{content:"";position:fixed;pointer-events:none;z-index:-1;opacity:1;filter:none}
html[data-theme="light"] body::before{inset:-15%;
  background:
    radial-gradient(38% 30% at 12% 8%,rgba(255,183,94,.55) 0%,rgba(255,183,94,0) 70%),
    radial-gradient(45% 35% at 92% 22%,rgba(56,189,248,.38) 0%,rgba(56,189,248,0) 70%),
    radial-gradient(50% 40% at 80% 88%,rgba(45,212,191,.32) 0%,rgba(45,212,191,0) 70%),
    radial-gradient(45% 35% at 8% 78%,rgba(244,114,182,.26) 0%,rgba(244,114,182,0) 70%),
    linear-gradient(180deg,#fff4e3 0%,#f6f8ff 55%,#eafaf6 100%);
  animation:ld-bg-drift 28s ease-in-out infinite alternate}
html[data-theme="dark"] body::before{inset:-15%;
  background:
    radial-gradient(40% 30% at 15% 10%,rgba(99,102,241,.40) 0%,rgba(99,102,241,0) 70%),
    radial-gradient(45% 35% at 90% 30%,rgba(20,184,166,.30) 0%,rgba(20,184,166,0) 70%),
    radial-gradient(50% 35% at 70% 92%,rgba(245,158,11,.22) 0%,rgba(245,158,11,0) 70%),
    linear-gradient(180deg,#0b1226 0%,#070b16 60%,#06121a 100%);
  animation:ld-bg-drift 28s ease-in-out infinite alternate}
/* rising drops (replaces the old scan-line overlay) */
html[data-theme] body::after{inset:0 0 -40% 0;height:auto;
  background:
    radial-gradient(circle at 15% 30%,var(--ld-drop) 0 7px,transparent 8px),
    radial-gradient(circle at 70% 18%,var(--ld-drop) 0 5px,transparent 6px),
    radial-gradient(circle at 85% 55%,var(--ld-drop) 0 9px,transparent 10px),
    radial-gradient(circle at 35% 70%,var(--ld-drop) 0 4px,transparent 5px),
    radial-gradient(circle at 55% 45%,var(--ld-drop) 0 6px,transparent 7px),
    radial-gradient(circle at 25% 92%,var(--ld-drop) 0 8px,transparent 9px);
  background-size:100% 70vh;animation:ld-bg-rise 60s linear infinite}
html[data-theme="light"]{--ld-drop:rgba(14,165,233,.16)}
html[data-theme="dark"]{--ld-drop:rgba(165,180,252,.12)}
@keyframes ld-bg-drift{0%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(3%,-2%,0) scale(1.06)}100%{transform:translate3d(-3%,2%,0) scale(1.02)}}
@keyframes ld-bg-rise{from{transform:translate3d(0,0,0)}to{transform:translate3d(0,-70vh,0)}}
@media (prefers-reduced-motion:reduce){html[data-theme] body::before,html[data-theme] body::after{animation:none!important}}