/* VU Meters Simulator CSS */
.vu-ms-wrap {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: .5rem;
}
.vu-ms-meters {
  display: grid;
  grid-auto-flow: column;
  grid-gap: 12px;
}
.vu-ms-meter {
  position: relative;
  padding: 8px;
  background: #0d0f12;
  border: 1px solid rgba(255,255,255,.06);
  box-shadow: inset 0 0 10px rgba(0,0,0,.5), 0 6px 14px rgba(0,0,0,.25);
}
.vu-ms-meter.rounded {
  border-radius: 10px;
}
.vu-ms-bars {
  display: grid;
  grid-auto-flow: column;
  align-items: end;
  height: 100%;
  gap: 4px;
}
.vu-ms-bar {
  width: 8px;
  height: 100%;
  background: linear-gradient(180deg, #1c252e, #0b0d10);
  border-radius: 4px;
  overflow: hidden;
  position: relative;
}
.vu-ms-fill {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 10%;
  transition: height .08s linear;
  background: linear-gradient(180deg, #3dd973, #bdda3d);
}
/* Color zones using a mask overlay */
.vu-ms-bar::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    rgba(0,0,0,0) 0%,
    rgba(0,0,0,0) 55%,
    rgba(255,165,0,0.15) 80%,
    rgba(255,0,0,0.25) 92%,
    rgba(255,0,0,0.35) 100%);
  pointer-events: none;
}

/* Themes */
.theme-dark .vu-ms-meter { background:#0d0f12; color:#cbd5e1; }
.theme-light .vu-ms-meter { background:#f9fafb; border-color: rgba(0,0,0,.08); color:#111827; box-shadow: inset 0 0 10px rgba(0,0,0,.05), 0 6px 14px rgba(0,0,0,.08); }
.theme-light .vu-ms-bar { background: linear-gradient(180deg, #e5e7eb, #d1d5db); }
.theme-neon .vu-ms-meter { background: #05060a; border-color: rgba(0,255,200,.25); box-shadow: 0 0 20px rgba(0,255,200,.08), inset 0 0 16px rgba(0,255,200,.05); }
.theme-neon .vu-ms-fill { box-shadow: 0 0 12px rgba(0,255,180,.55); }

.vu-ms-label { font: 500 14px/1.2 system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif; opacity: .75; }

/* Responsive */
@media (max-width: 640px) {
  .vu-ms-bar { width: 6px; }
  .vu-ms-meters { grid-gap: 8px; }
}