:root{
  --space1:#0b0820;
  --space2:#060513;
  --accent:#cbbcff;
}

/* Global background */
html, body {
  background:
    radial-gradient(1200px 800px at 70% -10%, rgba(203,188,255,.12), transparent 60%),
    radial-gradient(900px 700px at -10% 110%, rgba(90,60,40,.25), transparent 60%),
    radial-gradient(circle at 50% 50%, var(--space1), var(--space2) 70%);
  background-attachment: fixed;
  color: #f3f0ff;
  min-height: 100%;
}

/* Starfield */
body::before{
  content:"";
  position:fixed; inset:0;
  background-image: url("https://www.transparenttextures.com/patterns/stardust.png");
  opacity:.6; pointer-events:none; z-index:0;
}

/* Vignette */
body::after{
  content:"";
  position:fixed; inset:0;
  background: radial-gradient(ellipse at center, transparent 60%, rgba(0,0,0,.5) 100%);
  pointer-events:none; z-index:0;
}

/* Optional left half-moon: add <div class="moon-left"></div> in page content */
.moon-left{
  position:fixed; top:22%; left:4%;
  width:140px; height:140px; border-radius:50%;
  background: radial-gradient(circle at 28% 30%, #f7f4d0, #d7d39f 55%, #a2966e 85%);
  box-shadow: 0 0 36px 10px rgba(255,255,210,.35);
  clip-path: inset(0 50% 0 0);
  z-index:1; pointer-events:none;
}

/* Ensure site content layers above */
.site, .ct-container, .entry-content { position: relative; z-index: 2; }

/* Blend plugin card with background */
.mcra-card{
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.015)) !important;
  border:1px solid rgba(255,255,255,.12) !important;
  box-shadow: 0 20px 60px rgba(0,0,0,.45);
}

/* Headings & links tint */
h1,h2,h3,h4 { color:#f3f0ff; text-shadow: 0 0 18px rgba(203,188,255,.12); }
a { color: var(--accent); }