frontend/src/index.css
@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  body {
    font-family: 'Inter', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  }
}

@layer components {
  .professional-bg {
    background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
  }
  
  .card-shadow {
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  }
  
  .input-field {
    @apply w-full px-4 py-3 border border-slate-300 rounded-lg text-slate-700 bg-white transition-all duration-200 focus:outline-none focus:border-blue-600 focus:ring-2 focus:ring-blue-100 focus:shadow-sm;
  }
  
  .btn-primary {
    @apply w-full py-4 px-6 bg-blue-600 hover:bg-blue-700 text-white font-semibold rounded-lg transition-all duration-200 transform hover:-translate-y-0.5 hover:shadow-lg active:translate-y-0 disabled:opacity-50 disabled:cursor-not-allowed disabled:transform-none disabled:hover:bg-blue-600;
  }
  
  .risk-card {
    @apply mt-8 p-6 rounded-lg text-center text-xl font-semibold text-white animate-fade-in;
  }
  
  .risk-card.high {
    @apply bg-gradient-to-r from-red-500 to-red-600 shadow-lg shadow-red-500/25;
  }
  
  .risk-card.low {
    @apply bg-gradient-to-r from-emerald-500 to-emerald-600 shadow-lg shadow-emerald-500/25;
  }
  
  .section-divider {
    @apply w-12 h-1 bg-gradient-to-r from-blue-600 to-blue-500 mx-auto rounded-full;
  }
}
