/* ─── Reset & Base ─────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  /* Colors */
  --bg:           #0d0d0f;
  --bg-card:      #141416;
  --bg-elevated:  #1a1a1e;
  --bg-input:     #1e1e24;
  --accent:       #00e5a0;
  --accent-dim:   rgba(0, 229, 160, 0.12);
  --accent-glow:  rgba(0, 229, 160, 0.25);
  --danger:       #ff4d6d;
  --danger-dim:   rgba(255, 77, 109, 0.12);
  --text-1:       #f0ede8;
  --text-2:       #9a9896;
  --text-3:       #5a5856;
  --border:       rgba(255,255,255,0.07);
  --border-hover: rgba(255,255,255,0.14);
  --border-accent:rgba(0, 229, 160, 0.3);

  /* Typography */
  --font-display: 'Space Mono', monospace;
  --font-body:    'DM Sans', sans-serif;

  /* Spacing */
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 16px;
  --r-xl: 22px;
}

html {
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
}

body {
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--text-1);
  min-height: 100vh;
  overflow-x: hidden;
  position: relative;
}

/* Noise overlay */
.noise {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.035;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 180px 180px;
}

/* Ambient glow behind the card */
body::before {
  content: '';
  position: fixed;
  top: -200px;
  left: 50%;
  transform: translateX(-50%);
  width: 700px;
  height: 500px;
  background: radial-gradient(ellipse, rgba(0,229,160,0.06) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}

* { position: relative; z-index: 1; }

/* ─── Typography ────────────────────────────────────── */
h1, h2, h3 { font-family: var(--font-display); font-weight: 700; }

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ─── Scrollbar ─────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border-hover); border-radius: 99px; }