:root {
  --bg-main: #05040a;
  --accent: #f72585;
  --accent-soft: #7209b7;
  --text-primary: #f5f5f5;
  --text-muted: #9a9aaf;

  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;

  --radius-sm: 4px;
  --radius-md: 8px;
}

/* ===== Global dark static background ===== */

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
  background:
    radial-gradient(circle at top, #111827 0%, #020617 45%, #000000 100%);
  color: #e5e7eb;
  font-family: "Kode Mono", monospace;
  position: relative;
}

/* TV-static grain overlay (now actually animated) */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;

  background-image:
    repeating-linear-gradient(
      0deg,
      rgba(255, 255, 255, 0.025) 0px,
      rgba(255, 255, 255, 0.025) 1px,
      transparent 1px,
      transparent 3px
    ),
    repeating-linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.02) 0px,
      rgba(255, 255, 255, 0.02) 1px,
      transparent 1px,
      transparent 3px
    );

  opacity: 0.16;                /* tune 0.10–0.25 if you want it louder/softer */
  mix-blend-mode: soft-light;
  z-index: 0;                    /* sit above background but below content */

  /* TV static jitter – discrete frames so it feels like noise, not a smooth pan */
  animation: tv-static-jitter 0.55s steps(5) infinite;
}

/* Jitter just the background-position + slight opacity wiggle */
@keyframes tv-static-jitter {
  0% {
    background-position: 0 0, 0 0;
    opacity: 0.16;
  }
  25% {
    background-position: 3px -2px, -2px 1px;
    opacity: 0.13;
  }
  50% {
    background-position: -3px 2px, 2px -3px;
    opacity: 0.20;
  }
  75% {
    background-position: 1px 3px, -3px -1px;
    opacity: 0.14;
  }
  100% {
    background-position: 0 0, 0 0;
    opacity: 0.16;
  }
}

/* Glassy card */
.module-card {
  background: rgba(15, 23, 42, 0.9);
  border: 1px solid rgba(148, 163, 184, 0.2);
  border-radius: 18px;
  padding: 16px 20px;
  box-shadow:
    0 18px 45px rgba(15, 23, 42, 0.9),
    0 0 0 1px rgba(15, 23, 42, 0.7);
  backdrop-filter: blur(4px);
}

/* simple flex utilities */
.flex        { display: flex; }
.flex-row    { flex-direction: row; }
.flex-col    { flex-direction: column; }
.flex-center { align-items: center; justify-content: center; }
.gap-sm      { gap: var(--space-sm); }
.gap-md      { gap: var(--space-md); }

/* typography helper for any element you explicitly give class="body" */
.body {
  font-family: "Kode Mono", monospace;
  color: var(--text-primary);
  background: transparent;
}

/* === Disable global page background & static on overlays === */

html,
body {
  background: transparent !important;
  position: static;
}

body::before {
  content: none !important;
  background: none !important;
}