frontend/src/index.css

@import "tailwindcss";

/* ── Base ─────────────────────────────────────────────────────────────────── */
body {
  margin: 0;
  background: #0f172a;
  color: #f1f5f9;
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
}

#root {
  width: 100%;
  max-width: 100%;
  margin: 0;
  text-align: left;
  border: none;
  min-height: 100vh;
}

::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #475569; border-radius: 3px; }

/* ── Animated gradient hero ──────────────────────────────────────────────── */
.hero-gradient {
  background: linear-gradient(135deg, #0f172a 0%, #1e1b4b 40%, #172554 70%, #0f172a 100%);
  background-size: 300% 300%;
  animation: shift 10s ease infinite;
}
@keyframes shift {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* ── Shield pulse ────────────────────────────────────────────────────────── */
.pulse-ring {
  animation: pulse 2.5s ease-out infinite;
}
@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 rgba(99,102,241,.45); }
  70%  { box-shadow: 0 0 0 18px rgba(99,102,241,0); }
  100% { box-shadow: 0 0 0 0 rgba(99,102,241,0); }
}

/* ── Spinner ─────────────────────────────────────────────────────────────── */
.spinner {
  border: 3px solid #334155;
  border-top-color: #818cf8;
  border-radius: 50%;
  width: 44px; height: 44px;
  animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ── Smooth progress bar ─────────────────────────────────────────────────── */
.bar-fill { transition: width .6s cubic-bezier(.22,1,.36,1); }

/* ── Floating particles (decorative) ─────────────────────────────────────── */
.particle {
  position: absolute;
  border-radius: 50%;
  background: rgba(99,102,241,.12);
  pointer-events: none;
  animation: float 6s ease-in-out infinite;
}
@keyframes float {
  0%,100% { transform: translateY(0) scale(1); opacity: .4; }
  50%     { transform: translateY(-30px) scale(1.15); opacity: .7; }
}