:root {
  --color-primary: #1e40af;
  --color-primary-dark: #1e3a8a;
}

body {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  transition: background-color 0.2s, color 0.2s;
}

.gradient-overlay {
  background: linear-gradient(135deg, rgba(30, 64, 175, 0.1) 0%, rgba(59, 130, 246, 0.05) 100%);
}

#author-modal,
#image-preview-modal {
  display: none;
}

#author-modal.active,
#image-preview-modal.active {
  display: flex;
}

.preview-image-container {
  cursor: zoom-in;
  transition: transform 0.3s ease;
}

.preview-image-container:active {
  transform: scale(0.98);
}

#preview-img {
  max-width: 90vw;
  max-height: 90vh;
  object-fit: contain;
}

/* Hiệu ứng lấp lánh cho ngôi sao */
.star-shimmer {
  animation: shimmer 2s ease-in-out infinite;
  filter: drop-shadow(0 0 8px rgba(251, 191, 36, 0.6));
}

@keyframes shimmer {
  0%,
  100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.7;
    transform: scale(1.1);
  }
}

/* Hiệu ứng xoay nhẹ nếu muốn */
.star-spin {
  animation: star-spin 20s linear infinite;
}

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

/* Loading spinner */
.loading-spinner {
  border: 4px solid rgba(0, 0, 0, 0.1);
  border-left-color: var(--color-primary);
  border-radius: 50%;
  width: 40px;
  height: 40px;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}