:root {
  --vr-popup-color: #222; /* Default/admin setting */
}

#vrp-container {
  max-width: 700px;
  margin: 24px auto;
  font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;
}

#vr-waveform {
  height: 100px;
  background: #f7f7f7;
  border-radius: 8px;
  margin-bottom: 18px;
  box-shadow: 0 2px 12px 0 rgba(0,0,0,0.03);
  overflow: hidden;
}

.vr-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  margin-bottom: 12px;
}
.vr-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  /* Basic fallback values, admin settings/JS will override these: */
  width: 44px; height: 44px;
  background: #0073aa;
  border: none;
  border-radius: 7px;
  box-shadow: 0 2px 5px 0 rgba(0,0,0,0.06);
  color: #fff;
  transition: all 0.22s cubic-bezier(.5,.85,.42,1.04);
  font-size: 18px;
  position: relative;
}

/* Fallback hover, admin settings/JS will override */
.vr-btn:hover {
  background: #005177;
  color: #fff;
}

/* Icon styling (admin icon color/font-size applied by JS) */
.vr-btn .dashicons {
  font-size: 20px;
  line-height: 1;
  pointer-events: none;
}

#vr-enhance-tools {
  margin: 12px auto 4px auto;
  padding: 7px 14px;
  background: #fafbfd;
  border-radius: 6px;
  box-shadow: 0 1px 5px 0 rgba(70,110,170,0.06);
  text-align: center;
  max-width: 450px;
  font-size: 14px;
}
#vr-enhance-tools label {
  margin: 0 14px 0 4px;
  vertical-align: middle;
}
#vr-enhance-tools input[type=range] {
  width: 80px;
  vertical-align: middle;
  accent-color: #0073aa;
}

#vr-popup {
  position: fixed;
  top: 15px;
  left: 50%;
  transform: translateX(-50%);
  min-width: 110px;
  background: var(--vr-popup-color,#222);
  color: #fff;
  padding: 8px 18px;
  border-radius: 7px;
  box-shadow: 0 3px 22px -7px rgb(20 42 46 / 18%);
  font-size: 15px;
  letter-spacing: 0.01em;
  opacity: 0.98;
  z-index: 9999;
  pointer-events:none;
  text-align: center;
}

.vr-btn:disabled, .vr-btn[disabled] {
  opacity: 0.48;
  pointer-events: none;
  filter: grayscale(50%);
}

@media (max-width: 570px) {
  #vrp-container { max-width: 99vw; }
  .vr-controls { gap: 8px; }
  .vr-btn { width: 38px; height: 38px; font-size:15px; }
  #vr-enhance-tools { font-size: 13px; }
}