:root {
  --bg-0: #070b0f;
  --bg-1: #0c1118;
  --bg-2: #111820;
  --bg-3: #182030;
  --bg-4: #1e2a3a;

  --border:        rgba(80,160,255,0.07);
  --border-bright: rgba(80,160,255,0.15);
  --border-focus:  rgba(0,229,200,0.35);

  --text-0: #ddeeff;
  --text-1: #8aaac8;
  --text-2: #4d6a85;
  --text-3: #2c4058;

  --cyan:   #00e5c8;
  --blue:   #3d9bff;
  --green:  #1ed97a;
  --amber:  #f5a623;
  --red:    #ff3d5a;
  --purple: #9b74f5;

  --status-online:  var(--green);
  --status-offline: var(--red);
  --status-warning: var(--amber);
  --status-unknown: var(--text-3);

  --font-sans: 'Inter', system-ui, sans-serif;
  --font-mono: 'IBM Plex Mono', 'Fira Code', monospace;

  --radius: 8px;
  --radius-sm: 5px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
  height: 100%;
  background: var(--bg-0);
  color: var(--text-0);
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

body::before {
  content: '';
  position: fixed; inset: 0; z-index: 0;
  background-image:
    linear-gradient(rgba(0,229,200,0.012) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,229,200,0.012) 1px, transparent 1px);
  background-size: 40px 40px;
  pointer-events: none;
}
body::after {
  content: '';
  position: fixed; inset: 0; z-index: 0;
  background: radial-gradient(ellipse 80% 60% at 50% 0%, rgba(0,100,255,0.05), transparent);
  pointer-events: none;
}

a { color: var(--blue); text-decoration: none; }
a:hover { color: var(--cyan); }

code, .mono { font-family: var(--font-mono); }

::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: var(--bg-1); }
::-webkit-scrollbar-thumb { background: var(--bg-4); border-radius: 2px; }

@keyframes pulse-anim {
  0%,100% { opacity:1; transform:scale(1); }
  50%      { opacity:.4; transform:scale(.6); }
}