/* ============================================================
   Credenxia ambient decoration — green + blue, behind content
   Soft corner glow + concentric "round line" motifs.
   ============================================================ */
:root { --cx-green:#1aa874; --cx-blue:#3f6fd6; }

body {
  background:
    radial-gradient(940px 640px at 100% -6%, rgba(63,111,214,.09), transparent 58%),
    radial-gradient(860px 620px at -6% 106%, rgba(26,168,116,.09), transparent 58%),
    var(--bg);
  background-attachment: fixed;
}

/* concentric rounded line rings drifting off two corners */
body::before, body::after {
  content:""; position:fixed; pointer-events:none; z-index:0; border-radius:50%; opacity:.18;
  -webkit-mask-image:radial-gradient(circle, #000 32%, transparent 70%);
  mask-image:radial-gradient(circle, #000 32%, transparent 70%);
}
body::before {                       /* blue — top right */
  width:740px; height:740px; top:-270px; right:-230px; color:var(--cx-blue);
  background:repeating-radial-gradient(circle, transparent 0 48px, currentColor 48px 49.5px, transparent 49.5px 96px);
}
body::after {                        /* green — bottom left */
  width:660px; height:660px; bottom:-300px; left:-150px; color:var(--cx-green);
  background:repeating-radial-gradient(circle, transparent 0 44px, currentColor 44px 45.5px, transparent 45.5px 88px);
}

/* lift only the content above the decoration.
   The rail / topbar / tabbar keep their own positioning + higher z-index
   from app.css (must NOT override their position, or the layout breaks). */
.content, .focus { position:relative; z-index:1; }

@media (max-width:820px) {
  body::before { width:460px; height:460px; top:-180px; right:-150px; }
  body::after  { width:420px; height:420px; bottom:-200px; left:-120px; }
}