demo/styles/variables.css

    /* ── CSS Design System ─────────────────────────────────────────── */

    :root {
      --base: #020617;
      --accent: #3b82f6;
      --accent-light: #60a5fa;
      --danger: #ef4444;
      --warning: #f59e0b;
      --success: #22c55e;
      --text-primary: rgba(255, 255, 255, 0.92);
      --text-secondary: rgba(255, 255, 255, 0.58);
      --text-tertiary: rgba(255, 255, 255, 0.35);
      --panel-bg: rgba(255, 255, 255, 0.02);
      --panel-border: rgba(255, 255, 255, 0.06);

      /* Mission status colors — single source of truth */
      --mission-match: #34d399;
      --mission-match-bg: rgba(52, 211, 153, 0.15);
      --mission-match-stroke: rgba(52, 211, 153, 0.8);
      --mission-nomatch: #f87171;
      --mission-nomatch-bg: rgba(248, 113, 113, 0.12);
      --mission-nomatch-stroke: rgba(248, 113, 113, 0.8);
      --mission-unassessed: #64748b;
      --mission-unassessed-bg: rgba(100, 116, 139, 0.12);
      --mission-unassessed-stroke: rgba(100, 116, 139, 0.5);
    }

    /* ── Reset ──────────────────────────────────────────────────────── */

    *, *::before, *::after {
      box-sizing: border-box;
    }

    body {
      margin: 0;
      padding: 0;
      font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
      font-size: 13px;
      color: var(--text-primary);
      background: var(--base);
      overflow: hidden;
      width: 100vw;
      height: 100vh;
      display: grid;
      grid-template-rows: 44px 1fr auto auto auto;
      grid-template-columns: 1fr;
      position: relative;
    }

    /* ── Ambient Background ────────────────────────────────────────── */

    body::before {
      content: '';
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background:
        radial-gradient(ellipse 80% 50% at 20% 40%, rgba(59, 130, 246, 0.04) 0%, transparent 70%),
        radial-gradient(ellipse 60% 60% at 80% 60%, rgba(96, 165, 250, 0.03) 0%, transparent 70%),
        radial-gradient(ellipse 90% 40% at 50% 90%, rgba(59, 130, 246, 0.02) 0%, transparent 60%);
      pointer-events: none;
      z-index: 0;
    }

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

    /* ── Scrollbar ─────────────────────────────────────────────────── */

    ::-webkit-scrollbar {
      width: 4px;
      height: 4px;
    }

    ::-webkit-scrollbar-track {
      background: rgba(255, 255, 255, 0.02);
      border-radius: 2px;
    }

    ::-webkit-scrollbar-thumb {
      background: var(--accent);
      border-radius: 2px;
      opacity: 0.5;
    }

    ::-webkit-scrollbar-thumb:hover {
      background: var(--accent-light);
    }

    /* ── Polish: Global Text Rendering ────────────────────────────── */

    * {
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
    }

    ::selection {
      background: rgba(59,130,246,0.3);
    }