/* SOUL ONE LIVE 4.2 — a single premium four-view switch and real icons.
 * v12 created a separate "Repertorio" button (old Ventanas). v36 JS moves
 * the ORIGINAL button into the group, preserving its existing click handler.
 * No position/size changes to mobile view selection.
 */
@media (min-width:1000px) and (min-height:580px) and (pointer:fine) {
  body>.app>.stage-footer-note {
    display:grid!important;
    grid-template-columns:minmax(0,1fr) auto minmax(0,1fr)!important;
    align-items:center!important;
    column-gap:12px!important;
    min-height:43px!important;
    height:43px!important;
    padding:3px 14px!important;
    box-sizing:border-box!important;
    overflow:visible!important;
  }
  body>.app>.stage-footer-note>span:first-child{
    display:inline-flex!important;
    align-items:center!important;
    justify-self:start!important;
    min-width:0!important;
    max-width:100%!important;
    overflow:hidden!important;
    white-space:nowrap!important;
    text-overflow:ellipsis!important;
    font-size:11px!important;
    letter-spacing:0!important;
    font-weight:650!important;
  }
  body>.app>.stage-footer-note>.protected{
    display:block!important;
    justify-self:end!important;
    min-width:0!important;
    max-width:100%!important;
    text-overflow:ellipsis!important;
    white-space:nowrap!important;
    overflow:hidden!important;
    font-size:10px!important;
    text-align:right!important;
  }
  body>.app .sl-desktop-views.sl-unified-views {
    display:flex!important;
    position:relative;
    align-items:center!important;
    justify-content:center!important;
    justify-self:center!important;
    gap:0!important;
    min-width:0!important;
    width:auto!important;
    height:37px!important;
    padding:0!important;
    border:0!important;
    background:transparent!important;
    box-shadow:none!important;
  }
  body>.app .sl-desktop-views.sl-unified-views>.sl-view-label{
    display:none!important;
  }
  body>.app .sl-desktop-views.sl-unified-views>.sl-mode-group{
    display:grid!important;
    grid-template-columns:repeat(4,minmax(105px,1fr))!important;
    align-items:stretch!important;
    gap:2px!important;
    box-sizing:border-box!important;
    padding:3px!important;
    width:468px!important;
    min-width:0!important;
    height:37px!important;
    margin:0!important;
    border:1px solid #35556b!important;
    border-radius:9px!important;
    background:#0c1928!important;
    box-shadow:0 1px 4px #0000001c!important;
  }
  body>.app .sl-desktop-views.sl-unified-views .sl-mode-group>.sl-mode-btn,
  body>.app .sl-desktop-views.sl-unified-views .sl-mode-group>.sl-unified-repertoire{
    display:inline-flex!important;
    justify-content:center!important;
    align-items:center!important;
    box-sizing:border-box!important;
    flex:1 1 auto!important;
    min-width:0!important;
    min-height:29px!important;
    height:29px!important;
    margin:0!important;
    padding:6px 9px!important;
    border:1px solid transparent!important;
    border-radius:6px!important;
    background:transparent!important;
    box-shadow:none!important;
    color:#b9d0df!important;
    font-size:12px!important;
    font-weight:720!important;
    line-height:1!important;
    letter-spacing:0!important;
    text-align:center!important;
    white-space:nowrap!important;
    text-transform:none!important;
    transform:none!important;
  }
  body>.app .sl-desktop-views.sl-unified-views .sl-mode-group>.sl-mode-btn:hover:not([aria-pressed=true]){
    color:#f0f8ff!important;
    background:#1f3549!important;
    border-color:#2c4960!important;
  }
  body>.app .sl-desktop-views.sl-unified-views .sl-mode-group>.sl-mode-btn[aria-pressed=true]{
    background:#175f69!important;
    border:1px solid #2d8d8f!important;
    color:#e8fff9!important;
    box-shadow:inset 0 1px 0 #8ceadb20!important;
    font-weight:790!important;
  }
  body>.app .sl-desktop-views.sl-unified-views .sl-mode-group>.sl-mode-btn:focus-visible{
    outline:2px solid #7ce8df!important;
    outline-offset:2px!important;
    z-index:2;
  }
}
@media(min-width:1000px) and (max-width:1330px) and (min-height:580px) and (pointer:fine){
  body>.app>.stage-footer-note{padding:2px 9px!important;column-gap:8px!important}
  body>.app .sl-desktop-views.sl-unified-views>.sl-mode-group{
    grid-template-columns:repeat(4,minmax(0,1fr))!important;
    width:416px!important;
  }
  body>.app .sl-desktop-views.sl-unified-views .sl-mode-group>.sl-mode-btn{
    padding:6px 5px!important;font-size:11px!important;
  }
  body>.app>.stage-footer-note>.protected{font-size:9px!important}
}
@media(min-width:1000px) and (max-width:1110px) and (min-height:580px) and (pointer:fine){
  body>.app>.stage-footer-note>span:first-child{
    max-width:180px!important;
    font-size:10px!important;
  }
  body>.app>.stage-footer-note>.protected{
    max-width:150px!important;
  }
  body>.app .sl-desktop-views.sl-unified-views>.sl-mode-group{
    width:390px!important;
  }
}
/* Consistent vector icon design in protective labels and track controls. */
body>.app .sl-icon-label {
  display:inline-flex!important;
  align-items:center!important;
  gap:6px!important;
  min-width:0;
  line-height:1.25;
}
body>.app .sl-vector-icon {
  display:inline-block!important;
  box-sizing:border-box!important;
  flex:0 0 14px!important;
  width:14px!important;
  height:14px!important;
  overflow:visible!important;
  vertical-align:middle!important;
  color:#9abace;
  stroke:currentColor;
  fill:none!important;
  filter:none!important;
}
body>.app .stage-footer-note>span:first-child .sl-vector-icon{
  color:#69c9c0!important;
  width:15px!important;
  height:15px!important;
  flex-basis:15px!important;
}
body>.app .meter-title .chip .sl-vector-icon,
body>.app .right.live-library-panel .side-actions .sl-vector-icon{
  color:#66d3c2!important;
}
body>.app .live-workspace .wave-name .lock {
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  color:#8eb9d1!important;
  margin-left:auto!important;
}
body>.app .live-workspace .wave-name .lock .sl-vector-icon{
  width:13px!important;
  height:13px!important;
  flex-basis:13px!important;
  color:#a5c8dd!important;
}
body>.app>#mixer.clean-mixer .strip .role.sl-icon-label {
  display:flex!important;
  width:100%!important;
  align-items:center!important;
  justify-content:center!important;
  gap:4px!important;
  font-weight:650!important;
  text-transform:none!important;
}
body>.app>#mixer.clean-mixer .strip .role .sl-vector-icon{
  color:#9dc7da!important;
  width:12px!important;
  height:12px!important;
  flex-basis:12px!important;
}
body>.app .right.live-library-panel .cloud-toolbar #cloudStatus.sl-icon-label{
  display:inline-flex!important;
  align-items:center!important;
  gap:5px!important;
  color:#a7cadc!important;
}
body>.app button.sl-icon-label .sl-vector-icon{
  color:currentColor!important;
}
@media(max-width:1100px) and (pointer:coarse){
  .soul-mobile-console .sl-vector-icon{
    width:13px!important;height:13px!important;
    flex-basis:13px!important;
  }
}

/* Align the actual app grid track with the taller, comfortable unified tabs.
   Earlier v31 reserved only 35px, causing overflow into the next panel. */
@media(min-width:1000px) and (min-height:580px) and (pointer:fine){
  html:not(.soulone-ipad-classic) body>.app:not(.sl-mode-repertoire):not(.sl-mode-stage):not(.stage-mixer-collapsed),
  html:fullscreen body>.app:not(.sl-mode-repertoire):not(.sl-mode-stage):not(.stage-mixer-collapsed){
    grid-template-rows:76px 43px minmax(0,1fr) 40px clamp(270px,35dvh,370px)!important;
  }
  html:not(.soulone-ipad-classic) body>.app.sl-mode-mix:not(.stage-mixer-collapsed),
  html:fullscreen body>.app.sl-mode-mix:not(.stage-mixer-collapsed){
    grid-template-rows:76px 43px minmax(0,1fr) 40px clamp(330px,47dvh,540px)!important;
  }
  html:not(.soulone-ipad-classic) body>.app.sl-large-faders:not(.sl-mode-repertoire):not(.sl-mode-stage):not(.stage-mixer-collapsed),
  html:fullscreen body>.app.sl-large-faders:not(.sl-mode-repertoire):not(.sl-mode-stage):not(.stage-mixer-collapsed){
    grid-template-rows:76px 43px minmax(0,1fr) 40px clamp(370px,60dvh,740px)!important;
  }
}