.PokemonDataLoader_overlay__uXsf2 {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

.PokemonDataLoader_container__CO4qq {
    background-color: var(--background-color);
    color: var(--text-color);
    border: 1px solid var(--border-color);
    padding: 2rem;
    border-radius: 0.5rem;
    max-width: 500px;
    width: 90%;
}

.PokemonDataLoader_title__83PqG {
    color: var(--primary-color);
    font-size: 1.5rem;
    margin-bottom: 1.5rem;
    text-align: center;
}

.PokemonDataLoader_rangeContainer__BTYVt {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.PokemonDataLoader_rangeItem__0gT1G {
    background-color: var(--background-color);
}

.PokemonDataLoader_rangeHeader__z5Fg_ {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
}

.PokemonDataLoader_rangeLabel__XaWwq {
    font-weight: 500;
}

.PokemonDataLoader_progressBar__6yDn_ {
    background-color: var(--border-color);
    height: 0.5rem;
    border-radius: 0.25rem;
    overflow: hidden;
}

.PokemonDataLoader_progressFill__ShGU6 {
    height: 100%;
    transition: width 0.3s ease;
}

.PokemonDataLoader_progressFill__ShGU6[data-status='complete'] {
    background-color: var(--primary-color);
}

.PokemonDataLoader_progressFill__ShGU6[data-status='loading'] {
    background-color: var(--primary-color);
}

.PokemonDataLoader_progressFill__ShGU6[data-status='error'] {
    background-color: var(--error-color);
}

.PokemonDataLoader_message__8QeRs {
    margin-top: 0.5rem;
    font-size: 0.875rem;
    color: var(--text-color);
}

.PokemonDataLoader_button__EyZtQ {
    margin-top: 1.5rem;
    width: 100%;
    padding: 0.75rem;
    border-radius: 0.375rem;
    background-color: var(--primary-color);
    color: var(--background-color);
    border: 1px solid var(--border-color);
    font-weight: 500;
    transition: opacity 0.2s ease;
}

.PokemonDataLoader_button__EyZtQ:hover {
    opacity: 0.9;
} 
/**
 * Simplified hydration consistency CSS
 * 
 * This file prevents hydration errors by completely disabling problematic
 * styles during server-side rendering, and only enabling them after hydration.
 */

/* During SSR, completely suppress all theme-related effects */
:root:not(.client-hydrated) [data-theme] {
  /* This attribute will be applied client-side only */
  display: none !important;
}

/* During SSR and before hydration, completely suppress all holographic effects */
:root:not(.client-hydrated) .shader,
:root:not(.client-hydrated) .specular,
:root:not(.client-hydrated) [class*="holo-"],
html.hydration-pending .shader,
html.hydration-pending .specular,
html.hydration-pending [class*="holo-"] {
  /* Disable ALL properties that might cause hydration mismatches */
  background-image: none !important;
  background-color: transparent !important;
  background: none !important;
  transform: none !important;
  z-index: 0 !important;
  opacity: 0 !important;
  filter: none !important;
  mix-blend-mode: normal !important;
  animation: none !important;
  transition: none !important;
  clip-path: none !important;
  mask-image: none !important;
  -webkit-mask-image: none !important;
  text-shadow: none !important;
  border: none !important;
  box-shadow: none !important;
}

/* Hide pseudo-elements completely before hydration */
:root:not(.client-hydrated) .shader::before,
:root:not(.client-hydrated) .shader::after,
:root:not(.client-hydrated) .specular::before,
:root:not(.client-hydrated) .specular::after,
:root:not(.client-hydrated) [class*="holo-"]::before,
:root:not(.client-hydrated) [class*="holo-"]::after {
  display: none !important;
  content: "" !important;
  background: none !important;
  opacity: 0 !important;
}

/* Only after client hydration, re-enable all holographic effects */
body.client-hydrated .shader,
body.client-hydrated .specular,
body.client-hydrated [class*="holo-"] {
  /* Use initial to reset to the cascade value */
  background-image: initial;
  background-color: initial;
  background: initial;
  transform: initial;
  z-index: initial;
  opacity: initial;
  filter: initial;
  mix-blend-mode: initial;
  animation: initial;
  transition: initial;
  clip-path: initial;
  mask-image: initial;
  -webkit-mask-image: initial;
  text-shadow: initial;
  border: initial;
  box-shadow: initial;
}

/* Re-enable pseudo-elements after hydration */
body.client-hydrated .shader::before,
body.client-hydrated .shader::after,
body.client-hydrated .specular::before,
body.client-hydrated .specular::after,
body.client-hydrated [class*="holo-"]::before,
body.client-hydrated [class*="holo-"]::after {
  display: initial !important;
  content: "" !important;
  opacity: initial !important;
  background: initial !important;
}

/* Add a short fade-in transition when enabling effects */
body.client-hydrated .shader,
body.client-hydrated .specular {
  transition: opacity 0.3s ease !important;
}