Atomizer/atomizer-dashboard/frontend/src/index.css

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

@tailwind base;
@tailwind components;
@tailwind utilities;

/* CSS Variables - Atomaste Theme (exact colors from website) */
:root {
  --cyan-glow: rgba(0, 212, 230, 0.5);
  --cyan-primary: #00d4e6;
  --cyan-dark: #0891b2;
  --bg-dark: #050a12;
  --bg-section: #080f1a;
  --bg-card: rgba(10, 20, 35, 0.6);
}

@layer base {
  html, body {
    overflow-x: hidden;
    max-width: 100vw;
  }

  body {
    @apply bg-dark-850 text-gray-400;
    font-family: 'Inter', system-ui, sans-serif;
  }

  /* Selection */
  ::selection {
    background: rgba(0, 212, 230, 0.3);
    color: #fff;
  }
}

@layer components {
  /* Glass Morphism Cards - Atomaste Style (darker, more subtle) */
  .glass {
    background: rgba(8, 15, 26, 0.85);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(0, 212, 230, 0.08);
  }

  .glass-strong {
    background: rgba(8, 15, 26, 0.95);
    backdrop-filter: blur(16px);
    border: 1px solid rgba(0, 212, 230, 0.1);
  }

  .card {
    @apply glass rounded-xl shadow-lg p-6;
  }

  /* Text Gradients - matching website */
  .text-gradient {
    background: linear-gradient(135deg, #00d4e6 0%, #0891b2 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
  }

  .text-gradient-subtle {
    background: linear-gradient(135deg, #ffffff 40%, #00d4e6 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
  }

  /* Buttons - Atomaste Style (exact match to website) */
  .btn {
    @apply px-5 py-2.5 rounded-lg font-semibold transition-all duration-300;
  }

  .btn-primary {
    background: linear-gradient(135deg, #00d4e6 0%, #0891b2 100%);
    color: #000;
    font-weight: 600;
    box-shadow: 0 4px 15px rgba(0, 212, 230, 0.3);
  }

  .btn-primary:hover {
    box-shadow: 0 6px 25px rgba(0, 212, 230, 0.5);
    transform: translateY(-2px);
  }

  .btn-secondary {
    @apply btn glass text-white hover:bg-white/5;
    border: 1px solid rgba(0, 212, 230, 0.2);
  }

  .btn-secondary:hover {
    border-color: rgba(0, 212, 230, 0.4);
  }

  .input {
    @apply glass border border-primary-400/20 rounded-lg px-3 py-2 text-dark-50
           focus:outline-none focus:ring-2 focus:ring-primary-400/50 focus:border-primary-400/40;
  }

  .badge {
    @apply inline-block px-2 py-1 text-xs font-semibold rounded-full;
  }

  .badge-success {
    @apply badge bg-green-500/10 text-green-400 border border-green-500/20;
  }

  .badge-warning {
    @apply badge bg-yellow-500/10 text-yellow-400 border border-yellow-500/20;
  }

  .badge-error {
    @apply badge bg-red-500/10 text-red-400 border border-red-500/20;
  }

  .badge-info {
    @apply badge bg-primary-500/10 text-primary-400 border border-primary-500/20;
  }

  /* Animated Border Glow */
  .border-glow {
    position: relative;
  }

  .border-glow::before {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: inherit;
    background: linear-gradient(45deg, transparent, var(--cyan-primary), transparent);
    background-size: 400% 400%;
    animation: borderGlow 3s ease infinite;
    z-index: -1;
    opacity: 0;
    transition: opacity 0.3s;
  }

  .border-glow:hover::before {
    opacity: 1;
  }

  /* Pulse Glow Effect */
  .pulse-glow {
    animation: pulseGlow 3s ease-in-out infinite;
  }

  /* 3D Card Effect */
  .card-3d {
    transform-style: preserve-3d;
    transition: transform 0.3s ease;
  }

  .card-3d:hover {
    transform: perspective(1000px) rotateX(2deg) rotateY(-2deg) translateZ(10px);
  }
}

/* Animated Grid Background */
.grid-bg {
  background-image:
    linear-gradient(rgba(0, 212, 230, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 212, 230, 0.03) 1px, transparent 1px);
  background-size: 50px 50px;
  animation: gridMove 20s linear infinite;
}

@keyframes gridMove {
  0% { background-position: 0 0; }
  100% { background-position: 50px 50px; }
}

@keyframes borderGlow {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

@keyframes pulseGlow {
  0%, 100% { box-shadow: 0 0 20px rgba(0, 212, 230, 0.2), 0 0 40px rgba(0, 212, 230, 0.1); }
  50% { box-shadow: 0 0 40px rgba(0, 212, 230, 0.4), 0 0 80px rgba(0, 212, 230, 0.2); }
}

/* Ambient Glow Orbs */
.glow-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  pointer-events: none;
  animation: orbFloat 8s ease-in-out infinite;
}

@keyframes orbFloat {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33% { transform: translate(30px, -20px) scale(1.1); }
  66% { transform: translate(-20px, 20px) scale(0.9); }
}

/* Custom scrollbar - Atomaste Style */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: var(--bg-dark);
}

::-webkit-scrollbar-thumb {
  background: #1a2535;
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background: #2a3545;
}

/* KaTeX Math Rendering */
.katex {
  font-size: 1.1em !important;
  color: inherit !important;
}

.katex-display {
  margin: 1em 0 !important;
  overflow-x: auto;
  overflow-y: hidden;
}

.katex-display > .katex {
  color: #e2e8f0 !important;
}

/* Markdown body styles */
.markdown-body {
  color: #e2e8f0;
  line-height: 1.7;
}

.markdown-body .katex-display {
  background: rgba(30, 41, 59, 0.5);
  padding: 1rem;
  border-radius: 0.5rem;
  border: 1px solid #334155;
}

/* Code blocks in markdown should have proper width */
.markdown-body pre {
  max-width: 100%;
  overflow-x: auto;
  white-space: pre;
}