@view-transition { 
  navigation: auto; 
}

body { 
  box-sizing: border-box; 
}

* { 
  font-family: 'Tajawal', sans-serif; 
}

.glass-card { 
  background: rgba(30, 41, 59, 0.6); 
  backdrop-filter: blur(20px); 
  border: 1px solid rgba(6, 182, 212, 0.15); 
}

.neon-glow { 
  filter: drop-shadow(0 0 10px rgba(6, 182, 212, 0.6)); 
}

@keyframes pulse-glow { 
  0%, 100% { box-shadow: 0 0 20px rgba(6, 182, 212, 0.4); } 
  50% { box-shadow: 0 0 40px rgba(6, 182, 212, 0.7); } 
}

@keyframes wave { 
  0% { transform: translateX(0) translateY(0); } 
  50% { transform: translateX(-2%) translateY(-3px); } 
  100% { transform: translateX(0) translateY(0); } 
}

@keyframes float { 
  0%, 100% { transform: translateY(0); } 
  50% { transform: translateY(-5px); } 
}

@keyframes shimmer { 
  0% { box-shadow: 0 0 0px rgba(6, 182, 212, 0); } 
  50% { box-shadow: 0 0 20px rgba(6, 182, 212, 0.8); } 
  100% { box-shadow: 0 0 0px rgba(6, 182, 212, 0); } 
}

@keyframes slideInUp { 
  from { opacity: 0; transform: translateY(30px); } 
  to { opacity: 1; transform: translateY(0); } 
}

.animate-pulse-glow { animation: pulse-glow 3s ease-in-out infinite; }
.animate-wave { animation: wave 4s ease-in-out infinite; }
.animate-float { animation: float 3s ease-in-out infinite; }
.animate-shimmer { animation: shimmer 2s ease-in-out infinite; }
.animate-slide-in { animation: slideInUp 0.5s ease-out; }

.activity-btn { transition: all 0.3s ease; }
.activity-btn.active { animation: shimmer 0.8s ease-in-out; }

::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: #1e293b; }
::-webkit-scrollbar-thumb { background: #0891b2; border-radius: 3px; }

.tip-card { transition: all 0.3s ease; }
.tip-card:hover { transform: translateY(-5px); box-shadow: 0 0 30px rgba(6, 182, 212, 0.3); }

.chart-item { animation: slideInUp 0.6s ease-out; }