/* ═══════════════════════════════════════════════════════════════════════
   PANTEREX — EVM DESIGN SYSTEM (px-evm.css)
   The deliberate OPPOSITE of the Solana brand. NO hot-pink, NO cyan — ever.
   Palette: institutional deep blue + emerald + steel, on a cool slate dark
   (with clean light surfaces). Display font Space Grotesk (Solana uses Bebas),
   so the two products never visually echo each other.
   Everything is namespaced (--evm-* vars, .evm- classes) so it cannot collide
   with px-brand.css even if both ever load on one page.
   ═══════════════════════════════════════════════════════════════════════ */
:root {
  --evm-blue:    #2563EB;   /* primary — institutional royal blue */
  --evm-blue-2:  #3B82F6;   /* lighter blue */
  --evm-indigo:  #4F46E5;   /* depth */
  --evm-emerald: #10B981;   /* accent / success / "go" */
  --evm-emerald-2:#34D399;
  --evm-bg:      #0B1120;   /* cool slate-navy (NOT Solana's near-black #050507) */
  --evm-bg-2:    #0F1A2E;
  --evm-surface: #131F36;   /* card */
  --evm-surface-2:#1B2A45;
  --evm-line:    rgba(148,163,184,.16);
  --evm-text:    #E6EDF7;
  --evm-muted:   #94A3B8;   /* steel */
  --evm-muted-2: #64748B;
  --evm-steel:   #CBD5E1;
  --evm-warn:    #F59E0B;
  --evm-danger:  #F43F5E;
  --evm-radius:  16px;
  --evm-grad:    linear-gradient(120deg, #2563EB, #10B981);
  --evm-glow:    0 0 30px rgba(37,99,235,.35);
}
.evm-scope { background: var(--evm-bg); color: var(--evm-text); font-family: 'Inter', -apple-system, system-ui, sans-serif; }
/* cool institutional field — blue/emerald, no pink/cyan */
.evm-aurora::after {
  content: ''; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(46% 38% at 14% 4%, rgba(37,99,235,.18), transparent 60%),
    radial-gradient(42% 36% at 88% 2%, rgba(16,185,129,.12), transparent 60%),
    radial-gradient(52% 50% at 82% 98%, rgba(79,70,229,.12), transparent 66%);
}
.evm-wrap { position: relative; z-index: 1; max-width: 1080px; margin: 0 auto; padding: 0 20px; }
.evm-display { font-family: 'Space Grotesk', 'Inter', sans-serif; font-weight: 700; letter-spacing: -.01em; }
.evm-mono { font-family: 'JetBrains Mono', monospace; }
.evm-tag { font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: var(--evm-blue-2); }
.evm-grad-text { background: var(--evm-grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.evm-card { background: var(--evm-surface); border: 1px solid var(--evm-line); border-radius: var(--evm-radius); padding: 20px; }
.evm-card-light { background: #F5F8FC; color: #0B1120; border: 1px solid #DBE4F0; border-radius: var(--evm-radius); padding: 20px; } /* the 'clean/light' note in the hybrid */
.evm-chip { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 600; color: var(--evm-steel); background: rgba(37,99,235,.10); border: 1px solid rgba(37,99,235,.30); border-radius: 9px; padding: 6px 11px; }
.evm-btn { display: inline-block; border: none; border-radius: 12px; padding: 13px 24px; font-size: 15px; font-weight: 700; font-family: inherit; cursor: pointer; text-decoration: none; transition: transform .12s, box-shadow .2s; }
.evm-btn-primary { background: var(--evm-grad); color: #fff; box-shadow: var(--evm-glow); }
.evm-btn-primary:active { transform: translateY(1px); }
.evm-btn-ghost { background: rgba(255,255,255,.04); border: 1px solid var(--evm-line); color: var(--evm-steel); }
.evm-grid { display: grid; gap: 14px; }
.evm-muted { color: var(--evm-muted); }
.evm-hr { height: 1px; background: var(--evm-line); border: 0; margin: 28px 0; }
.evm-badge-go { color: var(--evm-emerald); background: rgba(16,185,129,.12); border: 1px solid rgba(16,185,129,.3); border-radius: 6px; padding: 2px 8px; font-size: 11px; font-weight: 700; }
/* Brand icons (px-icons.js) recoloured to the EVM emerald — never the Solana pink. */
.evm-scope .px-ico { color: var(--evm-emerald) !important; filter: drop-shadow(0 0 5px rgba(16,185,129,.45)) !important; }
.evm-scope .px-ico-wrap { vertical-align: -0.16em; }
/* Per-chain marker dot — an intentional brand mark, not a multicolour emoji. */
.evm-cdot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 7px; vertical-align: middle; box-shadow: 0 0 6px currentColor; }