#loading {
  background-color: transparent !important;
  background-image: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}


#loading {
  --bg: var(--iq-body-bg, var(--iq-slate-body-bg, #0f1216));
  --loader-txt: color-mix(in srgb, var(--iq-body-text, #cbd5e1) 72%, transparent);
  --red: var(--iq-primary, #f43f5e);
  --red-b: color-mix(in srgb, var(--iq-primary, #f43f5e) 86%, transparent);
  --red-d: color-mix(in srgb, var(--iq-primary, #f43f5e) 52%, black);
}

html[data-theme="Light"] #loading {
  --loader-txt: color-mix(in srgb, var(--iq-body-text, #5c5248) 78%, transparent);
}

#loading .page-loader {
  position: fixed;
  inset: 0;
  z-index: 99999;
  background: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 1;
  pointer-events: auto;
}

@keyframes loaderFadeIn { from { opacity: 0 } to { opacity: 1 } }

#loading .page-loader-done {
  animation: loaderFadeOut 0.7s cubic-bezier(0.22,1,0.36,1) forwards;
  pointer-events: none;
}

@keyframes loaderFadeOut { 0% { opacity: 1 } 100% { opacity: 0 } }

#loading .page-loader-done .page-loader-inner {
  opacity: 0;
  transform: translateY(-6px);
  transition: all 0.4s cubic-bezier(0.22,1,0.36,1);
}

#loading .page-loader-inner {
  text-align: center;
  transition: opacity 0.4s ease, transform 0.4s ease;
}

#loading .page-loader-bar {
  width: 180px;
  height: 2px;
  background: color-mix(in srgb, var(--iq-primary, #f43f5e) 10%, transparent);
  border-radius: 2px;
  margin: 0 auto;
  overflow: hidden;
  position: relative;
}

#loading .page-loader-bar::before {
  content: '';
  position: absolute;
  left: -60px;
  top: -8px;
  bottom: -8px;
  width: 60px;
  background: radial-gradient(ellipse, color-mix(in srgb, var(--iq-primary, #f43f5e) 12%, transparent), transparent);
  filter: blur(6px);
  animation: loaderGlow 1.4s cubic-bezier(0.22,1,0.36,1) forwards;
  pointer-events: none;
}

@keyframes loaderGlow { 0% { left: -60px } 70% { left: 100% } 100% { left: 100% } }

#loading .page-loader-bar-fill {
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, var(--red-d), var(--red), var(--red-b));
  border-radius: 2px;
  animation: loaderBar 1.4s cubic-bezier(0.22,1,0.36,1) forwards;
  box-shadow: 0 0 8px color-mix(in srgb, var(--iq-primary, #f43f5e) 30%, transparent);
}

#loading .page-loader-txt {
  display: block;
  font-size: 10px;
  color: var(--loader-txt);
  text-transform: uppercase;
  letter-spacing: 5px;
  margin-top: 20px;
  font-weight: 600;
  font-family: inherit; 
  opacity: 0.92;
}

@keyframes loaderBar { 0% { width: 0 } 70% { width: 100% } 100% { width: 100% } }

@media (max-width: 480px) {
  #loading .page-loader-bar { width: 160px; }
}

@media (max-width: 360px) {
  #loading .page-loader-bar { width: 140px; }
  #loading .page-loader-txt { font-size: 9px; letter-spacing: 3px; margin-top: 14px; }
}