:root {
  --bg-app: #050507;
  --bg-panel: #0f1115;
  --bg-input: #1a1d24;
  --color-neon-green: #00ff9d;
  --color-neon-blue: #00b8ff;
  --color-neon-red: #ff2a6d;
  --border-tech: 1px solid rgba(0, 255, 157, 0.2);
  --glow-green: 0 0 10px rgba(0, 255, 157, 0.15);
  --glow-blue: 0 0 10px rgba(0, 184, 255, 0.15);
  --glow-red: 0 0 10px rgba(255, 42, 109, 0.15);
  --glow-text: 0 0 5px rgba(0, 255, 157, 0.4);
  --font-mono: 'JetBrains Mono', 'Fira Code', monospace;
  --font-sans: 'Inter', system-ui, sans-serif;
}

body {
  background-color: var(--bg-app);
  color: #e0e6ed;
  font-family: var(--font-sans);
  background-image:
    radial-gradient(circle at 50% 0%, rgba(0, 184, 255, 0.05) 0%, transparent 50%),
    linear-gradient(rgba(255, 255, 255, 0.02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.02) 1px, transparent 1px);
  background-size: 100% 100%, 40px 40px, 40px 40px;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-mono);
}

/* Trust score colors with glow */
.trust-high {
  color: var(--color-neon-green);
  text-shadow: 0 0 8px rgba(0, 255, 157, 0.4);
}

.trust-medium {
  color: #fbbf24;
  text-shadow: 0 0 8px rgba(251, 191, 36, 0.4);
}

.trust-low {
  color: var(--color-neon-red);
  text-shadow: 0 0 8px rgba(255, 42, 109, 0.4);
}

/* Trust score numbers in mono */
.trust-score-value {
  font-family: var(--font-mono);
}

/* Status badges */
.status-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.125rem 0.625rem;
  border-radius: 9999px;
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.025em;
  font-family: var(--font-mono);
}

.status-verified {
  background: rgba(0, 255, 157, 0.1);
  color: var(--color-neon-green);
  border: 1px solid rgba(0, 255, 157, 0.2);
  box-shadow: 0 0 6px rgba(0, 255, 157, 0.1);
}

.status-at_risk {
  background: rgba(255, 42, 109, 0.1);
  color: var(--color-neon-red);
  border: 1px solid rgba(255, 42, 109, 0.2);
  box-shadow: 0 0 6px rgba(255, 42, 109, 0.1);
}

.status-unverified {
  background: rgba(148, 163, 184, 0.08);
  color: #677489;
  border: 1px solid rgba(148, 163, 184, 0.15);
}

.status-pending_scan {
  background: rgba(251, 191, 36, 0.08);
  color: #fbbf24;
  border: 1px solid rgba(251, 191, 36, 0.15);
}

/* Risk badges */
.risk-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.125rem 0.5rem;
  border-radius: 9999px;
  font-size: 0.7rem;
  font-weight: 600;
  font-family: var(--font-mono);
}

.risk-critical {
  background: rgba(255, 42, 109, 0.12);
  color: var(--color-neon-red);
  border: 1px solid rgba(255, 42, 109, 0.2);
}

.risk-high {
  background: rgba(249, 115, 22, 0.12);
  color: #f97316;
  border: 1px solid rgba(249, 115, 22, 0.2);
}

.risk-medium {
  background: rgba(251, 191, 36, 0.12);
  color: #fbbf24;
  border: 1px solid rgba(251, 191, 36, 0.2);
}

.risk-low {
  background: rgba(0, 255, 157, 0.1);
  color: var(--color-neon-green);
  border: 1px solid rgba(0, 255, 157, 0.15);
}

/* Project cards - HUD style */
.project-card {
  transition: border-color 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
  background: var(--bg-panel);
  border: 1px solid #2a2f3a;
  position: relative;
  overflow: hidden;
}

.project-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 20px;
  height: 2px;
  background: var(--color-neon-blue);
  opacity: 0.5;
}

.project-card:hover {
  transform: translateY(-2px);
  border-color: var(--color-neon-blue);
  box-shadow: 0 0 15px rgba(0, 184, 255, 0.1);
}

/* Alert pulse */
@keyframes alertPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

.alert-pulse {
  animation: alertPulse 2s ease-in-out infinite;
}

/* Logo glitch effect */
.logo-text {
  position: relative;
}

.logo-text:hover {
  animation: glitch 0.3s ease-in-out;
}

@keyframes glitch {
  0% { transform: translate(0); }
  20% { transform: translate(-2px, 1px); }
  40% { transform: translate(2px, -1px); }
  60% { transform: translate(-1px, -1px); }
  80% { transform: translate(1px, 1px); }
  100% { transform: translate(0); }
}

/* Typing cursor animation */
.typing-cursor::after {
  content: '▋';
  animation: blink 1s step-end infinite;
  color: var(--color-neon-green);
}

@keyframes blink {
  50% { opacity: 0; }
}

/* Hero terminal */
.hero-terminal {
  background: rgba(10, 11, 16, 0.8);
  border: 1px solid #333;
  border-left: 3px solid var(--color-neon-green);
  box-shadow: var(--glow-green);
  font-family: var(--font-mono);
  padding: 1.5rem;
  border-radius: 4px;
}

/* Feature cards - HUD style */
.feature-card {
  background: var(--bg-panel);
  border: 1px solid #2a2f3a;
  transition: all 0.2s ease;
  position: relative;
  overflow: hidden;
}

.feature-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 20px;
  height: 2px;
  background: var(--color-neon-blue);
  opacity: 0.5;
}

.feature-card:hover {
  border-color: var(--color-neon-blue);
  box-shadow: 0 0 15px rgba(0, 184, 255, 0.1);
  transform: translateY(-2px);
}

/* Glowing status dot */
.glow-dot-green {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-neon-green);
  box-shadow: 0 0 6px var(--color-neon-green), 0 0 12px rgba(0, 255, 157, 0.3);
  animation: dotPulse 2s ease-in-out infinite;
}

.glow-dot-red {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-neon-red);
  box-shadow: 0 0 6px var(--color-neon-red), 0 0 12px rgba(255, 42, 109, 0.3);
  animation: dotPulse 2s ease-in-out infinite;
}

@keyframes dotPulse {
  0%, 100% { box-shadow: 0 0 6px currentColor, 0 0 12px currentColor; }
  50% { box-shadow: 0 0 3px currentColor, 0 0 6px currentColor; }
}

/* Responsive */
@media (max-width: 768px) {
  .grid.lg\:grid-cols-3 {
    grid-template-columns: 1fr;
  }
  table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}