@keyframes fadeIn {
        from {
          opacity: 0;
          transform: translateY(20px) scale(0.95);
        }
        to {
          opacity: 1;
          transform: translateY(0) scale(1);
        }
      }
      @keyframes fadeOut {
        from {
          opacity: 1;
          transform: translateY(0) scale(1);
        }
        to {
          opacity: 0;
          transform: translateY(20px) scale(0.95);
        }
      }
      @keyframes glowPulse {
        0% {
          box-shadow: 0 0 10px rgba(168, 85, 247, 0.4);
        }
        50% {
          box-shadow: 0 0 20px rgba(168, 85, 247, 0.7);
        }
        100% {
          box-shadow: 0 0 10px rgba(168, 85, 247, 0.4);
        }
      }
      .success-popup,
      .notification-popup {
        animation: fadeIn 0.3s ease-out forwards;
      }
      .fade-out {
        animation: fadeOut 0.5s ease-out forwards;
      }
      body {
        font-family: "El Messiri", sans-serif;
        font-display: swap;
        background: linear-gradient(to bottom, #f3e7ff, #ffffff);
      }
      .glow-card {
        box-shadow: 0 4px 20px -5px rgba(168, 85, 247, 0.3);
        transition: transform 0.3s ease, box-shadow 0.3s ease;
        border-radius: 12px;
      }
      .glow-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 8px 25px -5px rgba(168, 85, 247, 0.5);
      }
      .blink {
        animation: blink 1s step-start infinite;
      }
      @keyframes blink {
        50% {
          opacity: 0.5;
        }
      }
      .gradient-text {
        background: linear-gradient(90deg, #7e22ce 0%, #3b82f6 100%);
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
      }
      .coin-badge {
        background: linear-gradient(135deg, #7e22ce 0%, #3b82f6 100%);
        color: white;
        border: 2px solid #fff;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
        transition: transform 0.2s ease;
      }
      .coin-badge:hover {
        transform: scale(1.1);
      }
      .insights-card {
        background: linear-gradient(135deg, #ffffff 0%, #f3e7ff 100%);
        border: 1px solid rgba(168, 85, 247, 0.2);
        border-radius: 12px;
        padding: 16px;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
        transition: transform 0.3s ease;
      }
      .insights-card:hover {
        transform: translateY(-3px);
      }
      .pulse {
        animation: glowPulse 2s infinite;
      }
      .disabled-btn {
        background: #d1d5db !important;
        color: #6b7280 !important;
        cursor: not-allowed !important;
      }