/* public/assets/css/cyber.css */
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@300;400;500;600;700&family=Space+Grotesk:wght@400;500;600;700;800&family=Inter:wght@300;400;500;600;700&display=swap');

:root {
  --bg-primary: #05070A;
  --bg-panel: #0A0F18;
  --bg-secondary: #0F172A;
  --border-cyber: #162236;
  --border-glow: rgba(0, 240, 255, 0.4);
  --neon-cyan: #00F0FF;
  --neon-green: #00FF9D;
  --neon-amber: #FFB800;
  --neon-red: #FF3366;
  --neon-blue: #38BDF8;
  --text-primary: #F8FAFC;
  --text-secondary: #94A3B8;
  --text-muted: #64748B;
}

body {
  background-color: var(--bg-primary);
  color: var(--text-primary);
  font-family: 'Inter', sans-serif;
  overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Space Grotesk', sans-serif;
}

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

/* Subtle Cyber Grid Background */
.cyber-grid-bg {
  background-size: 40px 40px;
  background-image: 
    linear-gradient(to right, rgba(0, 217, 255, 0.03) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(0, 217, 255, 0.03) 1px, transparent 1px);
}

/* Cyber Glow Utilities */
.glow-cyan {
  box-shadow: 0 0 20px -5px rgba(0, 217, 255, 0.4);
}

.glow-green {
  box-shadow: 0 0 20px -5px rgba(0, 255, 156, 0.4);
}

.text-glow-cyan {
  text-shadow: 0 0 10px rgba(0, 217, 255, 0.6);
}

.text-glow-green {
  text-shadow: 0 0 10px rgba(0, 255, 156, 0.6);
}

/* Cyber Corner Clip Border */
.cyber-card {
  position: relative;
  background-color: var(--bg-panel);
  border: 1px solid var(--border-cyber);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.cyber-card:hover {
  border-color: rgba(0, 217, 255, 0.4);
  box-shadow: 0 10px 30px -10px rgba(0, 217, 255, 0.15);
  transform: translateY(-2px);
}

.cyber-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 6px;
  height: 6px;
  border-top: 2px solid var(--neon-cyan);
  border-left: 2px solid var(--neon-cyan);
}

.cyber-card::after {
  content: '';
  position: absolute;
  bottom: 0;
  right: 0;
  width: 6px;
  height: 6px;
  border-bottom: 2px solid var(--neon-green);
  border-right: 2px solid var(--neon-green);
}

/* Cyber Badge */
.cyber-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.2rem 0.6rem;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-radius: 4px;
}

.cyber-badge-cyan {
  background: rgba(0, 217, 255, 0.1);
  border: 1px solid rgba(0, 217, 255, 0.3);
  color: #00d9ff;
}

.cyber-badge-green {
  background: rgba(0, 255, 157, 0.1);
  border: 1px solid rgba(0, 255, 157, 0.35);
  color: #00ff9d;
}

.cyber-badge-amber {
  background: rgba(255, 184, 0, 0.1);
  border: 1px solid rgba(255, 184, 0, 0.35);
  color: #ffb800;
}

.cyber-badge-blue {
  background: rgba(56, 189, 248, 0.1);
  border: 1px solid rgba(56, 189, 248, 0.35);
  color: #38bdf8;
}

.cyber-badge-red {
  background: rgba(255, 51, 102, 0.1);
  border: 1px solid rgba(255, 51, 102, 0.35);
  color: #ff3366;
}

/* Pulsing Radar Dot */
.radar-pulse {
  position: relative;
  display: inline-block;
}

.radar-pulse::after {
  content: '';
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  border-radius: 50%;
  border: 1px solid var(--neon-green);
  animation: radarWave 2s infinite cubic-bezier(0, 0.2, 0.8, 1);
}

@keyframes radarWave {
  0% { transform: scale(0.8); opacity: 1; }
  100% { transform: scale(2.2); opacity: 0; }
}

/* Scanline Effect */
.scanline {
  position: relative;
  overflow: hidden;
}

.scanline::before {
  content: " ";
  display: block;
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;
  background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%), linear-gradient(90deg, rgba(255, 0, 0, 0.03), rgba(0, 255, 0, 0.01), rgba(0, 0, 255, 0.03));
  z-index: 10;
  background-size: 100% 2px, 3px 100%;
  pointer-events: none;
  opacity: 0.6;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: #05070a;
}
::-webkit-scrollbar-thumb {
  background: #162032;
  border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
  background: #00d9ff;
}