/*! Night Sky background theme v1.0.0 */

:root {
  --ns-base: #05050f;                       /* page background behind the stars */
  --ns-surface: rgba(12, 12, 30, 0.94);     /* content panels: keep near-opaque */
  --ns-surface-raised: rgba(22, 22, 50, 0.96);
  --ns-border: rgba(130, 140, 210, 0.18);
  --ns-text: #e8eaf6;
  --ns-muted: #8a96b8;
  --ns-z: -1;                               /* layer sits behind all page content */
}

/* The dark base goes on <html> only. The body must stay transparent, or its
   background paints over the z-index:-1 layer. */
html.ns-active { background: var(--ns-base); }
html.ns-active body { background: transparent; }

.ns-layer {
  position: fixed;
  inset: 0;
  z-index: var(--ns-z);
  pointer-events: none;
  overflow: hidden;
}

.ns-nebula {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 55% 45% at 12% 22%, rgba(100, 20, 160, .13) 0%, transparent 100%),
    radial-gradient(ellipse 50% 55% at 88% 70%, rgba(20, 55, 175, .13) 0%, transparent 100%),
    radial-gradient(ellipse 40% 35% at 60% 8%,  rgba(0, 90, 140, .09)  0%, transparent 100%),
    radial-gradient(ellipse 35% 30% at 35% 90%, rgba(60, 10, 120, .07) 0%, transparent 100%);
}

.ns-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

/* Optional helper: put dense content (tables, forms, text) on these. */
html.ns-active .ns-panel {
  background: var(--ns-surface);
  color: var(--ns-text);
  border: 1px solid var(--ns-border);
  border-radius: 10px;
}