.mm-meter-list{
  display:flex;
  flex-direction:column;
  gap:6px;
}

.mm-meter-row{
  display:flex;
  align-items:center;
  gap:10px;
  width:100%;
}

.mm-meter-label{
  width:90px;
  flex:0 0 90px;
  font-size:12px;
  opacity:.9;
}

.mm-meter-progress{
  height:12px;
  flex:1;
  min-width:80px; /* prevent collapse into a thin line */
  border-radius:999px;
  overflow:hidden;
  background: rgba(255,255,255,.08);
  display:block !important; /* some themes override `.progress` */
}

.mm-meter-fill{
  height:100%;
  border-radius:999px;
  display:block !important;
  min-width:2px; /* keep visible at low % */
}

/* Ensure theme doesn't collapse bootstrap-like progress */
.mm-meter-progress.progress{
  height:12px !important;
  background: rgba(255,255,255,.08) !important;
}
.mm-meter-progress .progress-bar{
  float:none !important;
  height:100% !important;
  line-height:12px !important;
}

.mm-meter-value{
  width:120px;
  flex:0 0 120px;
  text-align:right;
  font-size:12px;
  opacity:.95;
  white-space:nowrap;
}

.mm-meter-subvalue{
  display:block;
  font-size:11px;
  opacity:.75;
  line-height:1.1;
}

/* Theme-aware colors: use existing theme accents when possible */
.mm-meter-fill--primary{
  background: var(--primary, #1da1f2);
}

.mm-meter-fill--warn{
  background: var(--warning, #f0ad4e);
}

.mm-meter-fill--danger{
  background: var(--danger, #d9534f);
}

/* Fallbacks for themes that don't define CSS variables */
body .progress .progress-bar.mm-meter-fill--primary{ background-color:#2D9CDB !important; }
body .progress .progress-bar.mm-meter-fill--warn{ background-color:#F2C94C !important; }
body .progress .progress-bar.mm-meter-fill--danger{ background-color:#EB5757 !important; }

body .progress .progress-bar.mm-meter-fill--primary,
body .progress .progress-bar.mm-meter-fill--warn,
body .progress .progress-bar.mm-meter-fill--danger{
  background-image: linear-gradient(to right, rgba(255,255,255,.10), rgba(255,255,255,0));
}

/* Minimal animated loader bar (no text) */
.mm-loaderbar{
  display:inline-flex;
  width:96px;
  height:10px;
  border-radius:999px;
  overflow:hidden;
  background: rgba(255,255,255,.12);
  box-shadow: 0 0 0 1px rgba(0,0,0,.08) inset;
  vertical-align: middle;
}

.mm-loaderbar__bar{
  width:55%;
  height:100%;
  border-radius:inherit;
  background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.55), rgba(255,255,255,0));
  transform: translateX(-120%);
  animation: mm-loaderbar-move 1.1s ease-in-out infinite;
  will-change: transform;
}

@keyframes mm-loaderbar-move{
  0%   { transform: translateX(-120%); }
  100% { transform: translateX(220%); }
}