/* RS MultiTrack Audio Recorder - minimal clean UI */
.rs-mtar{
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  border: 1px solid rgba(0,0,0,.12);
  border-radius: 16px;
  padding: 16px;
  background: rgba(255,255,255,.9);
  box-shadow: 0 10px 30px rgba(0,0,0,.06);
}

.rs-mtar__header{ margin-bottom: 12px; }
.rs-mtar__title{ font-size: 20px; font-weight: 700; letter-spacing: .2px; }
.rs-mtar__subtitle{ font-size: 13px; opacity: .8; margin-top: 4px; }

.rs-mtar__panel{
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 14px;
  padding: 12px;
  background: rgba(250,250,250,.9);
  margin-bottom: 14px;
}

.rs-mtar__row{
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.rs-mtar__row:last-child{ margin-bottom: 0; }

.rs-mtar__field{
  display:flex;
  flex-direction: column;
  gap: 6px;
  min-width: 220px;
}

.rs-mtar__field label{ font-size: 12px; opacity:.8; }
.rs-mtar__hint{ font-size: 11px; opacity: .7; margin-top: 2px; }
.rs-mtar__select{
  padding: 10px 10px;
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,.14);
  background: #fff;
  font-size: 13px;
}

.rs-mtar__btn{
  border: 1px solid rgba(0,0,0,.16);
  background: #fff;
  border-radius: 999px;
  padding: 10px 14px;
  font-size: 13px;
  cursor: pointer;
  user-select: none;
}
.rs-mtar__btn:hover{ transform: translateY(-1px); }
.rs-mtar__btn:active{ transform: translateY(0px); }
.rs-mtar__btn:disabled{ opacity: .55; cursor: not-allowed; transform:none; }

.rs-mtar__btn--danger{ border-color: rgba(180,0,0,.35); }
.rs-mtar__btn--ghost{ background: transparent; }

.rs-mtar__btn--record{
  background: rgba(220,0,0,.10);
  border-color: rgba(220,0,0,.35);
}
.rs-mtar__btn--stoprec{
  background: rgba(0,0,0,.05);
}

.rs-mtar__btn--recording{
  background: rgba(220,0,0,.16);
  border-color: rgba(220,0,0,.55);
  animation: rs-mtar-pulse 1.1s ease-in-out infinite;
}
@keyframes rs-mtar-pulse{
  0%,100%{ box-shadow: 0 0 0 rgba(220,0,0,0); }
  50%{ box-shadow: 0 0 0 6px rgba(220,0,0,.10); }
}

.rs-mtar__status{
  font-size: 12px;
  opacity:.85;
  margin-left: auto;
}

.rs-mtar__tracks{
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

.rs-mtar__track{
  border: 1px solid rgba(0,0,0,.10);
  border-radius: 16px;
  padding: 12px;
  background: #fff;
}

.rs-mtar__trackHead{
  display:flex;
  gap: 10px;
  align-items:center;
  flex-wrap: wrap;
  margin-bottom: 10px;
}

.rs-mtar__trackName{
  font-weight: 700;
  font-size: 14px;
}

.rs-mtar__pill{
  font-size: 11px;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.12);
  opacity: .85;
}

.rs-mtar__controls{
  display:flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: 8px;
}

.rs-mtar__small{
  font-size: 12px;
  opacity: .75;
}

.rs-mtar__grid{
  display:grid;
  grid-template-columns: 1.2fr 1fr 1fr;
  gap: 10px;
}

.rs-mtar__sliderWrap{
  display:flex;
  flex-direction: column;
  gap: 6px;
}
.rs-mtar__sliderWrap label{ font-size: 12px; opacity: .8; }
.rs-mtar__sliderWrap input[type="range"]{ width: 100%; }

.rs-mtar__audio{
  width: 100%;
  margin-top: 6px;
}

.rs-mtar__links{
  margin-top: 6px;
  display:flex;
  flex-wrap: wrap;
  gap: 10px;
  font-size: 12px;
}

.rs-mtar__links a{
  text-decoration: none;
  border-bottom: 1px dashed rgba(0,0,0,.3);
}

/* Level meter */
.rs-mtar__meter{
  width: 100%;
  height: 12px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.12);
  background: rgba(0,0,0,.04);
  overflow: hidden;
}
.rs-mtar__meterFill{
  height: 100%;
  width: 0%;
  background: rgba(220,0,0,.55);
  transition: width 80ms linear;
}

@media (min-width: 980px){
  .rs-mtar__tracks{
    grid-template-columns: 1fr 1fr;
  }
}

.rs-mtar__btn--play{
  background: rgba(0,0,0,.06);
}
.rs-mtar__track--armed{
  outline: 2px solid rgba(220,0,0,.28);
  box-shadow: 0 10px 30px rgba(220,0,0,.06);
}
.rs-mtar__wave{
  width: 100%;
  height: 56px;
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,.10);
  background: rgba(0,0,0,.02);
  display:block;
  margin-top: 8px;
}

.rs-mtar__inputText{
  padding: 10px 10px;
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,.14);
  background: #fff;
  font-size: 13px;
  min-width: 240px;
}
.rs-mtar__miniRow{
  display:flex;
  gap:8px;
  flex-wrap: wrap;
  align-items:center;
  margin-top: 8px;
}