#global-loader {
  --loader-bg: #fff;
  --loader-text: #12395b;
  --loader-track: #eee;
  --loader-bar-start: #12395b;
  --loader-bar-end: #000000f1;

  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: var(--loader-bg);
  z-index: 50000;
  font-family: "Montserrat", sans-serif;
}

.dark #global-loader {
  --loader-bg: #0a1218;
  --loader-text: #9fb8ca;
  --loader-track: rgba(255, 255, 255, 0.1);
  --loader-bar-start: #56c596;
  --loader-bar-end: #205072;
  color-scheme: dark;
}

.loader-lottie {
  width: 180px;
  height: 180px;
  margin-bottom: 10px;
}

.brand-text {
  font-size: 22px;
  font-weight: 700;
  color: var(--loader-text);
  margin-bottom: 15px;
}

.progress-wrap {
  width: 220px;
  height: 10px;
  background: var(--loader-track);
  border-radius: 5px;
  overflow: hidden;
  margin-bottom: 8px;
}

.progress-bar {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--loader-bar-start), var(--loader-bar-end));
  transition: width 0.25s ease-out;
}

.percent {
  font-size: 14px;
  font-weight: 700;
  color: var(--loader-text);
  margin-bottom: 0;
}