:root{--bg:#0b1220;--text:#e5e7eb;--muted:#94a3b8;--ring:#1f2a44;--accent:#22d3ee}
*{box-sizing:border-box}
body{
  margin:0;
  font:16px/1.6 system-ui,Segoe UI,Roboto,Inter,Arial;
  color:var(--text);
  background: radial-gradient(ellipse at bottom,#0d1b2a 0%,#0b1220 100%);
}

/* ✨ Star field */
body::before{
  content:"";
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background-image:
    radial-gradient(1px 1px at 20% 30%, rgba(255,255,255,.9), transparent),
    radial-gradient(1px 1px at 80% 20%, rgba(255,255,255,.6), transparent),
    radial-gradient(2px 2px at 60% 70%, rgba(255,255,255,.5), transparent),
    radial-gradient(1px 1px at 40% 80%, rgba(255,255,255,.7), transparent),
    radial-gradient(2px 2px at 70% 50%, rgba(147,197,253,.2), transparent);
  background-size:220px 220px;
  opacity:.95;
}

/* 🪐 Distant planets (static) */
body::after{
  content:"";
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    /* blue gas giant (top-right) */
    radial-gradient(circle at 85% 10%, rgba(180,220,255,.35) 0%, rgba(90,140,210,.25) 30%, rgba(20,40,90,.12) 55%, rgba(11,18,32,0) 60%),
    /* purple planet (left-middle) */
    radial-gradient(180px 140px at 8% 55%, rgba(210,140,255,.22) 0%, rgba(140,80,200,.18) 40%, rgba(11,18,32,0) 70%),
    /* small icy moon (bottom-right) */
    radial-gradient(70px 70px at 92% 88%, rgba(210,240,255,.22) 0%, rgba(120,170,220,.18) 44%, rgba(11,18,32,0) 60%);
  filter: blur(0.2px);
}

/* Ensure page content sits above background layers */
main, nav, footer, .card { position:relative; z-index:1; }