* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: "Inter", sans-serif;
  overflow-x: hidden;
}

/* Dynamic Backgrounds */
.bg-sunny {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}
.bg-cloudy {
  background: linear-gradient(135deg, #4b6cb7 0%, #182848 100%);
}
.bg-rainy {
  background: linear-gradient(135deg, #373b44 0%, #4286f4 100%);
}
.bg-snowy {
  background: linear-gradient(135deg, #e0eafc 0%, #cfdef3 100%);
}
.bg-stormy {
  background: linear-gradient(135deg, #232526 0%, #414345 100%);
}
.bg-night {
  background: linear-gradient(135deg, #0f2027 0%, #203a43 50%, #2c5364 100%);
}

/* Glassmorphism */
.glass {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.glass-card {
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  transition: all 0.3s ease;
}

.glass-card:hover {
  transform: translateY(-5px);
  background: rgba(255, 255, 255, 0.25);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
}

/* Animations */
@keyframes float {
  0%,
  100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-10px);
  }
}

@keyframes pulse-glow {
  0%,
  100% {
    opacity: 0.6;
  }
  50% {
    opacity: 1;
  }
}

@keyframes slide-in {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes spin-slow {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.animate-float {
  animation: float 6s ease-in-out infinite;
}
.animate-pulse-glow {
  animation: pulse-glow 2s ease-in-out infinite;
}
.animate-slide-in {
  animation: slide-in 0.6s ease-out forwards;
}
.animate-spin-slow {
  animation: spin-slow 20s linear infinite;
}

/* Weather Icons */
.sun-icon {
  width: 120px;
  height: 120px;
  background: radial-gradient(circle, #ffd700 0%, #ffa500 70%);
  border-radius: 50%;
  box-shadow: 0 0 60px rgba(255, 215, 0, 0.6);
  position: relative;
}

.sun-rays {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 160px;
  height: 160px;
  border: 3px dashed rgba(255, 215, 0, 0.3);
  border-radius: 50%;
  animation: spin-slow 20s linear infinite;
}

.cloud {
  background: rgba(255, 255, 255, 0.9);
  border-radius: 100px;
  position: relative;
}

.cloud::before {
  content: "";
  position: absolute;
  background: white;
  border-radius: 50%;
}

/* Rain Animation */
.rain-drop {
  position: absolute;
  width: 2px;
  height: 20px;
  background: linear-gradient(to bottom, transparent, rgba(255, 255, 255, 0.8));
  animation: fall 1s linear infinite;
}

@keyframes fall {
  to {
    transform: translateY(100vh);
  }
}

/* Search Input */
.search-input {
  background: rgba(255, 255, 255, 0.2);
  border: 2px solid rgba(255, 255, 255, 0.3);
  transition: all 0.3s ease;
}

.search-input:focus {
  background: rgba(255, 255, 255, 0.3);
  border-color: rgba(255, 255, 255, 0.6);
  outline: none;
  box-shadow: 0 0 30px rgba(255, 255, 255, 0.2);
}

/* Toggle Switch */
.toggle-checkbox:checked {
  right: 0;
  left: auto;
  border-color: #68d391;
}

.toggle-checkbox:checked + .toggle-label {
  background-color: #68d391;
}

/* Chart Bars */
.temp-bar {
  transition: height 1s ease-out;
}

/* Loading Spinner */
.loader {
  border: 4px solid rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  border-top: 4px solid white;
  width: 40px;
  height: 40px;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/* Scrollbar */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.1);
}

::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.3);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.5);
}

/* Particle Background */
#particles {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
}