.weather-card {
  margin-top: 1.5rem;
  padding: 1.5rem;
  border-radius: 20px;
  background: #F7F7F5;
  border: 1px solid rgba(0,0,0,0.08);
  max-width: 320px;
  font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
}

.weather-card h2 {
  font-size: 16px;
  font-weight: 700;
  margin: 0 0 0.75rem;
  color: #0a0a0a;
}

.weather-card label {
  font-size: 12px;
  font-weight: 600;
  color: #888;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.weather-card select {
  display: block;
  margin: 0.4rem 0 1rem;
  padding: 6px 10px;
  font-size: 14px;
  font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
  border: 1px solid rgba(0,0,0,0.12);
  border-radius: 8px;
  background: #fff;
  color: #0a0a0a;
  cursor: pointer;
}

.weather-temp {
  font-size: 2.5rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  margin: 0.25rem 0;
  color: #0a0a0a;
}

.weather-desc {
  font-size: 14px;
  color: #414141;
}

.weather-display {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.weather-icon {
  font-size: 2.5rem;
  line-height: 1;
}

@keyframes shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position:  200% 0; }
}

.skeleton {
  background: linear-gradient(90deg, #eee 25%, #f6f6f6 50%, #eee 75%);
  background-size: 200% 100%;
  animation: shimmer 1.2s infinite;
  border-radius: 10px;
}

.weather-values {
  position: relative;
  flex: 1;
}

.weather-skeleton {
  display: none;
  align-items: center;
  gap: 1rem;
  margin-top: 0.25rem;
}

.skeleton-icon  { width: 3rem; height: 3rem; border-radius: 999px; }
.skeleton-lines { flex: 1; }
.skeleton-temp  { height: 2.5rem; width: 45%; margin-bottom: 0.5rem; }
.skeleton-text  { height: 1rem; width: 70%; }

.weather-card.is-loading #icon,
.weather-card.is-loading #temperature,
.weather-card.is-loading #description {
  visibility: hidden;
}

.weather-card.is-loading .weather-skeleton {
  display: flex;
}

@media (prefers-reduced-motion: reduce) {
  .skeleton { animation: none; }
}