.fade-in {
        animation: fadeIn 0.8s ease forwards;
      }
      .slide-up {
        animation: slideUp 0.8s ease forwards;
      }
      .scale-in {
        animation: scaleIn 0.6s ease forwards;
      }

      @keyframes fadeIn {
        from {
          opacity: 0;
        }
        to {
          opacity: 1;
        }
      }
      @keyframes slideUp {
        from {
          opacity: 0;
          transform: translateY(20px);
        }
        to {
          opacity: 1;
          transform: translateY(0);
        }
      }
      @keyframes scaleIn {
        from {
          transform: scale(0.9);
          opacity: 0;
        }
        to {
          transform: scale(1);
          opacity: 1;
        }
      }

      .stats-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
        gap: 1.2rem;
        margin-top: 1.2rem;
      }
      .stat-card {
        text-align: center;
      }

      /* Footer alignment */
      .footer,
      .footer-container,
      .footer-bottom {
        text-align: center;
      }
      .footer-container {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        gap: 2rem;
      }
      .footer-links {
        padding: 0;
        margin: 0;
      }
      .footer-links li {
        list-style: none;
      }
      .footer-bottom p {
        margin: 0;
        padding: 0.8rem 0;
      }
      #summaryChart {
        max-height: 250px; /* limits height */
        width: 100% !important; /* full width inside card */
        object-fit: contain; /* scale nicely */
      }


         /* <!-- Smooth Cursor Trail --> */

      .cursor-trail-container {
        position: fixed;
        inset: 0;
        pointer-events: none;
        z-index: 999999;
      }

      .trail-dot {
        position: absolute;
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background: linear-gradient(135deg, #64ffda 0%, #00b4d8 100%);
        box-shadow:
          0 0 15px rgba(100, 255, 218, 0.8),
          0 0 30px rgba(100, 255, 218, 0.4);
        transform: translate(-50%, -50%);
        will-change: transform, opacity;
        mix-blend-mode: screen;
        transition:
          opacity 0.3s ease,
          transform 0.3s ease;
      }

      .trail-dot:first-child {
        width: 12px;
        height: 12px;
        background: linear-gradient(135deg, #64ffda 0%, #00b4d8 100%);
        box-shadow:
          0 0 20px rgba(100, 255, 218, 0.9),
          0 0 40px rgba(100, 255, 218, 0.6);
        z-index: 2;
      }
      .cursor-clicking {
        transform: translate(-50%, -50%) scale(1.5);
        background: linear-gradient(
          135deg,
          #ff6b9d 0%,
          #ffcc00 100%
        ) !important;
        box-shadow:
          0 0 25px rgba(255, 107, 157, 0.9),
          0 0 50px rgba(255, 107, 157, 0.6) !important;
      }

      .cursor-hovering {
        transform: translate(-50%, -50%) scale(1.3);
        background: linear-gradient(
          135deg,
          #00b4d8 0%,
          #64ffda 100%
        ) !important;
      }
/* Theme Toggle Button */
.theme-toggle {
  background: linear-gradient(135deg, #64ffda, #667eea);
  border: none;
  color: #0f0f23;
  padding: 0.6rem 0.8rem;
  border-radius: 50%;
  cursor: pointer;
  font-size: 14px;
  margin-right: 0.8rem;
  transition: all 0.3s ease;
}

.theme-toggle:hover {
  transform: scale(1.1);
  box-shadow: 0 6px 15px rgba(100, 255, 218, 0.4);
}body {
  background: var(--bg-color);
  color: var(--text-color);
}.balance-card,
.stat-card {
  background: var(--card-bg);
}