html, body {
  height: 100%;
  width: 100%;
  margin: 0;
  background-color: #ffffff;
}

/* Loader overlay */
#app-loader {
  position: fixed;
  inset: 0;              /* top:0 right:0 bottom:0 left:0 */
  background: #ffffff;
  z-index: 9999;
}

/* Center helpers */
.centerUp {
  position: absolute;
  top: 25%;
  left: 50%;
  transform: translate(-50%, -50%);
  height: 40px;
}

.centerLoadingBar {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.centerDown {
  position: absolute;
  top: 85%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* Progress bar container */
.meter {
  width: min(320px, 70vw);   /* ✅ responsive */
  height: 4px;
  border-radius: 2px;
  background: #f3efe6;
  overflow: hidden;
}

.meter span {
  display: block;
  height: 100%;
}

/* Progress animation */
.progress {
  height: 100%;
  background-color: #F37F26;
  animation: progressBar 3s ease-in-out;
  animation-fill-mode:both;
}

@keyframes progressBar {
  0% { width: 0%; }
  70% { width: 100%; }
  100% { width: 100%; }
}