:root {
  --bg: #010409;
  --panel: rgba(6, 14, 24, 0.78);
  --line: rgba(64, 220, 255, 0.18);
  --cyan: #40dcff;
  --cyan-dim: #1e7ea3;
  --amber: #ffb347;
  --text: #cfeaff;
  --dim: #4d7c99;
  --ok: #43ffa4;
  --err: #ff5470;
  --font-hud: "Rajdhani", sans-serif;
  --font-mono: "Share Tech Mono", monospace;
}
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
body {
  background:
    radial-gradient(1100px 650px at 50% 38%, rgba(20, 60, 100, 0.35) 0%, transparent 60%), var(--bg);
  color: var(--text);
  font-family: var(--font-hud);
  height: 100vh;
  overflow: hidden;
  display: flex;
}
/* hex grid + scanlines overlay */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: 0.5;
  background-image:
    repeating-linear-gradient(0deg, rgba(64, 220, 255, 0.028) 0 1px, transparent 1px 3px),
    linear-gradient(rgba(64, 220, 255, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(64, 220, 255, 0.045) 1px, transparent 1px);
  background-size:
    100% 3px,
    52px 52px,
    52px 52px;
}
/* subtle vignette */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  box-shadow: inset 0 0 220px rgba(0, 0, 0, 0.85);
}