/* main site styles (merged with waveform rules) */
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial;
  margin: 18px;
  background: #0b1220;
  color: #e6eef6;
}
.wrap { max-width: 980px; margin: 0 auto; }
h1 { color: #7cc6ff; margin: 0 0 6px; }
.lead { color: #9bb6d0; margin: 0 0 16px; }
.card {
  background: rgba(255,255,255,0.02);
  padding: 14px;
  border-radius: 10px;
  margin-bottom: 14px;
  border: 1px solid rgba(255,255,255,0.03);
}
.row { display:flex; gap:10px; align-items:center; }
.grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:10px; }
.btn {
  padding:8px 12px;
  border-radius:8px;
  border:1px solid rgba(124,198,255,0.18);
  background:transparent;
  color:#7cc6ff;
  cursor:pointer;
}
.btn.primary { background: linear-gradient(90deg,#7cc6ff,#66b7ff); color:#071129; border:none; }
.hint { color:#9bb6d0; margin-left:6px; }
.player audio { width:100%; margin-top:8px; }
.time-row { display:flex; justify-content:space-between; font-size:13px; color:#9bb6d0; margin-top:6px; }
.time-row.small { font-size:12px; }
.big-range { width:100%; margin-top:10px; height:10px; }
.big-range::-webkit-slider-runnable-track { height:8px; background:linear-gradient(90deg,#0b7fd7,#4db3ff); border-radius:999px; }
.big-range::-webkit-slider-thumb { -webkit-appearance:none; width:16px; height:16px; background:#fff; border-radius:50%; margin-top:-4px; }
label { font-size:13px; color:#cfe8ff; }
label input { width:100%; margin-top:6px; padding:8px; border-radius:8px; border:1px solid rgba(255,255,255,0.04); background:rgba(255,255,255,0.02); color:inherit; }
.foot { color:#8b97a8; margin-top:10px; font-size:12px; }

/* -------------------------
   Waveform & zoom controls
   ------------------------- */

/* Only target the waveform containers we use */
#waveform1, #waveform2 {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  position: relative;
  background: rgba(255,255,255,0.01);
  border-radius: 6px;
  padding: 6px 0;
  min-height: 96px; /* reserve space so layout doesn't jump */
}

/* Keep canvas height fixed but avoid aggressive global !important */
#waveform1 canvas, #waveform2 canvas,
#waveform1 .wavesurfer-canvas, #waveform2 .wavesurfer-canvas {
  height: 96px;
  display: block;
  box-sizing: border-box;
}

/* Zoom control bar inserted under waveform */
.zoom-controls {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-top: 8px;
}

/* px label */
.zoom-controls .px-label {
  color: #9bb6d0;
  font-size: 12px;
  margin-left: 6px;
}

/* make zoom buttons match existing look but smaller */
.zoom-controls .btn {
  padding: 4px 8px;
  font-size: 13px;
  line-height: 1;
}

/* Make sure waves canvas doesn't overflow vertically */
.waveform canvas { max-height: 96px; }

/* ensure waveform containers take full width of content area */
.waveform, #waveform1, #waveform2 {
  width: 100%;
}

/* optional pointer hint */
#waveform1[title], #waveform2[title] { cursor: pointer; }

/* small responsive tweak */
@media (max-width: 640px) {
  .wrap { margin: 8px; }
  .btn { padding: 6px 10px; }
}