/* Futuristic HUD Cyberpunk Stylesheet */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;600;800;900&family=JetBrains+Mono:wght@400;700&display=swap');

:root {
  --font-sans: 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
  --cyber-bg: #02040a;
  --cyber-cyan: #06b6d4;
  --cyber-neon: #10b981;
  --cyber-purple: #a855f7;
  --cyber-blue: #3b82f6;
  --cyber-pink: #ec4899;
}

body {
  background-color: var(--cyber-bg);
  font-family: var(--font-sans);
  color: #f3f4f6;
  overflow-x: hidden;
  margin: 0;
  padding: 0;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 6px;
}
::-webkit-scrollbar-track {
  background: #030712;
}
::-webkit-scrollbar-thumb {
  background: linear-gradient(to bottom, var(--cyber-cyan), var(--cyber-purple));
  border-radius: 3px;
}

/* Glassmorphism & Cyber Glows */
.hud-glass {
  background: rgba(11, 15, 25, 0.75);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.hud-glass-glowing {
  background: rgba(11, 15, 25, 0.85);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(6, 182, 212, 0.3);
  box-shadow: 0 0 40px rgba(6, 182, 212, 0.15), inset 0 0 15px rgba(6, 182, 212, 0.05);
}

.glow-cyan-lg {
  box-shadow: 0 0 100px rgba(6, 182, 212, 0.35);
}

.glow-purple-lg {
  box-shadow: 0 0 100px rgba(168, 85, 247, 0.35);
}

.text-gradient-cyan {
  background: linear-gradient(135deg, #38bdf8 0%, #06b6d4 50%, #10b981 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.text-gradient-purple {
  background: linear-gradient(135deg, #c084fc 0%, #a855f7 50%, #ec4899 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* ThreeJS Canvas Background */
#webgl-canvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 0;
  pointer-events: none;
}

/* Interactive AI Canvas Drawing Container */
.canvas-blueprint-box {
  position: relative;
  background: radial-gradient(circle at center, rgba(6, 182, 212, 0.05) 0%, rgba(2, 4, 10, 0.95) 100%);
  border: 1px solid rgba(6, 182, 212, 0.3);
  border-radius: 1.5rem;
  overflow: hidden;
}

.canvas-blueprint-box::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(6, 182, 212, 0.2) 1px, transparent 1px);
  background-size: 24px 24px;
  pointer-events: none;
  opacity: 0.5;
}

/* HUD Scanning Line Effect */
@keyframes scanline {
  0% { transform: translateY(-100%); }
  100% { transform: translateY(1000%); }
}

.scanline-effect {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(to right, transparent, var(--cyber-cyan), transparent);
  animation: scanline 8s linear infinite;
  opacity: 0.6;
  pointer-events: none;
}