/* src/styles/v40-clean-media-layers-style.css — extracted from index.html (id=v40-clean-media-layers-style). */

#ambienceCard,
#vocalGuidanceCard,
#soundEffectsCard{
  display:block!important;
  visibility:visible!important;
  opacity:1!important;
  margin:12px auto 0!important;
  width:min(760px, calc(100% - 34px))!important;
  max-width:760px!important;
  padding:12px 14px!important;
  border-radius:18px!important;
  border:1px solid rgba(130,150,210,.22)!important;
  background:rgba(6,10,22,.88)!important;
  box-shadow:0 18px 50px rgba(0,0,0,.34), inset 0 0 0 1px rgba(255,255,255,.02)!important;
  backdrop-filter:blur(10px)!important;
}
.media-layer-title{
  margin:0 0 10px!important;
  color:var(--cyan,#5fe3ff)!important;
  font-weight:900!important;
  letter-spacing:.02em!important;
}
.media-layer-badge{
  display:inline-flex!important;
  align-items:center!important;
  gap:6px!important;
  margin-left:8px!important;
  padding:3px 8px!important;
  border-radius:999px!important;
  border:1px solid rgba(69,242,155,.28)!important;
  color:#45f29b!important;
  font-size:.72rem!important;
  font-weight:900!important;
  letter-spacing:.03em!important;
}
.media-layer-badge.locked{
  border-color:rgba(245,185,106,.28)!important;
  color:#f5b96a!important;
}
#ambienceSelect,
#vocalGuidanceSelect,
#soundEffectsSelect{
  width:100%!important;
  min-height:46px!important;
  color:var(--text,#f6f7ff)!important;
  background:rgba(3,6,14,.92)!important;
  border:1px solid rgba(207,72,255,.34)!important;
  border-radius:13px!important;
  padding:0 14px!important;
  font-weight:800!important;
  outline:none!important;
}
#ambienceSelect option,
#vocalGuidanceSelect option,
#soundEffectsSelect option{
  background:#07101f!important;
  color:#f8f7ff!important;
}
#ambienceSelect option:disabled,
#vocalGuidanceSelect option:disabled,
#soundEffectsSelect option:disabled{
  color:#8f96aa!important;
}
.media-row{
  display:grid!important;
  grid-template-columns:1fr 2fr 48px!important;
  gap:12px!important;
  align-items:center!important;
  margin-top:12px!important;
}
.media-row span{
  color:#f6f7ff!important;
  font-weight:800!important;
}
.media-row input[type="range"]{
  width:100%!important;
  accent-color:var(--magenta,#d941ff)!important;
  position:relative!important;
  z-index:50!important;
  pointer-events:auto!important;
  touch-action:pan-x!important;
  -webkit-user-select:auto!important;
  user-select:auto!important;
}
.media-note{
  margin-top:8px!important;
  font-size:12px!important;
  opacity:.75!important;
}
@media(max-width:760px){
  #ambienceCard,#vocalGuidanceCard,#soundEffectsCard{
    width:calc(100% - 16px)!important;
  }
  .media-row{
    grid-template-columns:1fr!important;
    gap:6px!important;
  }
}