/* =============================================================================
   SPARK 企业级汇聚中枢 (第二层) 专属深色态势视觉系统
   ============================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
  --bg-main: #070d19;
  --bg-card: rgba(15, 23, 42, 0.75);
  --border-subtle: rgba(51, 65, 85, 0.6);
  --border-highlight: rgba(99, 102, 241, 0.4);
  --primary: #6366f1;
  --accent-cyan: #06b6d4;
  --accent-emerald: #10b981;
}

body {
  background-color: var(--bg-main) !important;
  color: #f8fafc;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  margin: 0;
  padding: 0;
  background-image: 
    radial-gradient(circle at 15% 10%, rgba(99, 102, 241, 0.08) 0%, transparent 40%),
    radial-gradient(circle at 85% 90%, rgba(6, 182, 212, 0.06) 0%, transparent 40%);
  background-attachment: fixed;
}

.font-mono {
  font-family: 'JetBrains Mono', monospace;
}

.glass-panel {
  background: var(--bg-card);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--border-subtle);
  border-radius: 1rem;
}

.glass-panel:hover {
  border-color: var(--border-highlight);
}

.metric-card {
  transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.2s;
}

.metric-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.5), 0 0 15px 1px rgba(99, 102, 241, 0.15);
}

@keyframes pulseGlow {
  0%, 100% { opacity: 0.4; }
  50% { opacity: 0.9; }
}

.pipeline-arrow {
  animation: pulseGlow 2.5s infinite ease-in-out;
}