/* SOUL ONE LIVE 4.1 — Stage console layout & contrast repair
 * Repairs verified screenshot regressions:
 * - v30's higher-specificity pale repertoire hero
 * - missing display layout on play/pause/stop strip
 * - legacy white tab forms and sections over the dark theme
 * - isolated / uneven stems for small sets
 * - brand alignment and cramped content at desktop widths
 * Strictly presentation: keeps all original handlers and playback nodes.
 */
:root {
  --s4-bg:#0a1724;
  --s4-surface:#102233;
  --s4-raised:#172d40;
  --s4-raised2:#203b52;
  --s4-edge:#2e4b61;
  --s4-text:#edf5fb;
  --s4-muted:#9bb4c6;
  --s4-accent:#46d4c2;
}
/* ONE aligned command bar: the official emblem is unchanged and displayed
   within a deliberate 48px frame, without stretching its original aspect. */
body>.app>.top.stage-header {
  box-sizing:border-box;
  min-width:0;
  gap:clamp(10px,1.2vw,19px)!important;
}
body>.app>.top.stage-header .stage-identity {
  display:flex!important;
  align-items:center!important;
  justify-content:flex-start!important;
  min-width:0!important;
  gap:clamp(11px,1.1vw,18px)!important;
}
body>.app>.top.stage-header .brand.soulone-family-brand {
  display:inline-flex!important;
  align-items:center!important;
  flex:0 0 auto!important;
  width:auto!important;
  gap:9px!important;
  padding:0!important;
  min-height:50px;
  line-height:1!important;
}
body>.app>.top.stage-header .brand.soulone-family-brand .soulone-family-emblem {
  display:block!important;
  width:48px!important;
  height:48px!important;
  min-width:48px!important;
  flex:0 0 48px!important;
  object-fit:contain!important;
  object-position:center!important;
  border-radius:8px!important;
  background:#091723!important;
  margin:0!important;
  vertical-align:middle;
}
body>.app>.top.stage-header .brand.soulone-family-brand .soulone-family-wordmark{
  display:inline-block!important;
  font-size:18px!important;
  font-weight:790!important;
  line-height:1.1!important;
  letter-spacing:.07em!important;
  white-space:nowrap;
}
body>.app>.top.stage-header .brand.soulone-family-brand .soulone-live-edition {
  flex:0 0 auto;
  margin-left:2px!important;
  min-height:22px!important;
  align-self:center!important;
}
body>.app>.top.stage-header .stage-identity .song-head{
  flex:1 1 auto!important;
  min-width:0!important;
  padding-left:clamp(10px,1.05vw,16px)!important;
}
body>.app>.top.stage-header .stage-identity .song-head strong {
  display:block;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:clamp(16px,1.25vw,21px)!important;
  line-height:1.2!important;
}
body>.app>.top.stage-header .stage-identity .song-head small {
  display:block;
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
  line-height:1.3!important;
  margin-top:3px;
}
body>.app>.top.stage-header .stage-center{flex:0 0 auto;min-width:0}
body>.app>.top.stage-header .stage-actions{flex:0 0 auto;min-width:0}
body>.app>.top.stage-header .stage-actions button{white-space:nowrap}
body>.app>.top.stage-header .stage-actions #fullscreenToggle .short-label{
  white-space:nowrap;
}
/* Repertorio hero: defeat the HIGHER-SPECIFICITY legacy v30 important
   background. Single-row horizontal transport, consistent dark contrast. */
body>.app.sl-mode-repertoire>.main-grid>.right.live-library-panel>.sl-now-playing,
html:fullscreen body>.app.sl-mode-repertoire>.main-grid>.right.live-library-panel>.sl-now-playing,
body>.app .main-grid>.right.live-library-panel>.sl-now-playing {
  box-sizing:border-box!important;
  display:flex!important;
  flex:0 0 auto!important;
  flex-direction:column!important;
  justify-content:center!important;
  gap:10px!important;
  padding:15px clamp(16px,2vw,28px) 14px!important;
  min-height:0!important;
  height:auto!important;
  max-height:none!important;
  color:#edf7ff!important;
  background:linear-gradient(108deg,#142b40 0%,#193c50 55%,#153d49 100%)!important;
  border:0!important;
  border-top:1px solid #2f5266!important;
  border-bottom:1px solid #3b5e6d!important;
  box-shadow:inset 0 1px 0 #ffffff0a!important;
}
body>.app.sl-mode-repertoire>.main-grid>.right .sl-np-upper,
body>.app .right.live-library-panel .sl-np-upper{
  box-sizing:border-box!important;
  display:flex!important;
  flex:1 1 auto;
  flex-direction:row!important;
  align-items:center!important;
  justify-content:space-between!important;
  flex-wrap:wrap!important;
  width:100%;
  min-height:45px;
  gap:12px!important;
}
body>.app.sl-mode-repertoire .right.live-library-panel .sl-np-info,
body>.app .right.live-library-panel .sl-np-info{
  display:flex;
  flex:1 1 220px!important;
  min-width:0;
  justify-content:center;
  flex-direction:column!important;
  gap:4px!important;
}
body>.app.sl-mode-repertoire .right.live-library-panel .sl-np-state,
body>.app .right.live-library-panel .sl-np-state{
  color:#7ee6d2!important;
  font-size:10px!important;
  font-weight:720!important;
  letter-spacing:.055em!important;
}
body>.app.sl-mode-repertoire .right.live-library-panel .sl-np-title,
body>.app .right.live-library-panel .sl-np-title{
  color:#f5fbff!important;
  font-size:clamp(17px,1.5vw,22px)!important;
  font-weight:820!important;
  letter-spacing:-.025em!important;
  line-height:1.15!important;
  white-space:nowrap;
  text-overflow:ellipsis;
  overflow:hidden;
}
body>.app.sl-mode-repertoire .right.live-library-panel .sl-np-time,
body>.app .right.live-library-panel .sl-np-time{
  color:#d1e5f0!important;
  font-size:15px!important;
  font-weight:810!important;
  letter-spacing:.01em;
  white-space:nowrap;
  font-variant-numeric:tabular-nums;
}
body>.app.sl-mode-repertoire .right.live-library-panel .sl-np-actions,
body>.app .right.live-library-panel .sl-np-actions{
  display:flex!important;
  flex:0 0 auto;
  flex-direction:row!important;
  flex-wrap:nowrap!important;
  align-items:center!important;
  justify-content:flex-end!important;
  margin:0!important;
  gap:12px!important;
}
body>.app.sl-mode-repertoire .right.live-library-panel .sl-pro-transport,
body>.app .right.live-library-panel .sl-pro-transport{
  display:inline-flex!important;
  flex:0 0 auto;
  flex-direction:row!important;
  align-items:center!important;
  justify-content:center!important;
  gap:4px!important;
  padding:4px!important;
  border-radius:10px!important;
  border:1px solid #3d6980!important;
  background:#0b2437!important;
  box-shadow:none!important;
  white-space:nowrap!important;
}
body>.app .right.live-library-panel .sl-pro-transport button,
body>.app.sl-mode-repertoire .right.live-library-panel .sl-pro-transport button{
  display:inline-flex!important;
  flex:0 0 40px!important;
  align-items:center!important;
  justify-content:center!important;
  width:40px!important;
  min-width:40px!important;
  height:40px!important;
  min-height:40px!important;
  margin:0!important;
  padding:0!important;
  color:#d7ebf7!important;
  background:#24465a!important;
  border:1px solid #355d70!important;
  border-radius:7px!important;
  line-height:1!important;
  font-size:17px!important;
  box-shadow:none!important;
  animation:none!important;
  transform:none!important;
}
body>.app .right.live-library-panel .sl-pro-transport .sl-pro-play,
body>.app.sl-mode-repertoire .right.live-library-panel .sl-pro-transport .sl-pro-play{
  background:#1989d4!important;
  color:#fff!important;
  border-color:#3297d3!important;
}
body>.app .right.live-library-panel .sl-pro-transport button:disabled{
  opacity:.45!important;
}
body>.app.sl-mode-repertoire .right.live-library-panel .sl-np-track,
body>.app .right.live-library-panel .sl-np-track {
  flex:0 0 6px!important;
  height:6px!important;
  width:100%!important;
  margin:0!important;
  border-radius:100px!important;
  background:#2f596f!important;
  box-shadow:none!important;
}
body>.app.sl-mode-repertoire .right.live-library-panel .sl-np-fill{
  background:linear-gradient(90deg,#158ce1,#52d6bd)!important;
}
body>.app.sl-mode-repertoire .right.live-library-panel .sl-pro-context,
body>.app .right.live-library-panel .sl-pro-context {
  margin:0!important;
  color:#adc9d9!important;
  font-size:10px!important;
  font-weight:640!important;
}
body>.app .right.live-library-panel .sl-pro-context [data-sl-next]{
  color:#d6ebf5!important;
}
body>.app .right.live-library-panel .sl-pro-context [data-sl-count]{
  color:#8fb3c9!important;
}
/* The main header already owns fullscreen. Do not show another huge button
   in the setlist hero, but keep the original fullscreen handler mounted. */
@media(min-width:1000px) and (pointer:fine){
  body>.app .right.live-library-panel .sl-np-fullscreen{
    display:none!important;
  }
}
body>.app .right.live-library-panel .tabcontent{
  color:#e8f4fc!important;
  background:#101f2e!important;
  min-width:0;
}
/* Section tab and audio routing inherit white base HTML .block and .config.
   Override them comprehensively with the same dark component language. */
body>.app .right.live-library-panel .tabcontent .block,
body>.app .right.live-library-panel .tabcontent .config,
body>.app .right.live-library-panel .tabcontent .warning,
body>.app .right.live-library-panel .tabcontent .sl-section-cue-preferences,
body>.app .right.live-library-panel .tabcontent .sl-section-help,
body>.app .right.live-library-panel .tabcontent .sl-section-row {
  box-sizing:border-box;
  color:#dceef9!important;
  background:#1a3246!important;
  border:1px solid #39576d!important;
  border-radius:10px!important;
  box-shadow:none!important;
}
body>.app .right.live-library-panel .tabcontent .block,
body>.app .right.live-library-panel .tabcontent .config{
  display:block;
  width:100%!important;
  padding:17px 18px!important;
  margin:0 0 12px!important;
  line-height:1.5!important;
}
body>.app .right.live-library-panel .tabcontent .block strong,
body>.app .right.live-library-panel .tabcontent .config>label,
body>.app .right.live-library-panel .tabcontent .config strong{
  color:#f0f8ff!important;
  font-weight:810!important;
  font-size:13px!important;
}
body>.app .right.live-library-panel .tabcontent p,
body>.app .right.live-library-panel .tabcontent .small-note,
body>.app .right.live-library-panel .tabcontent small,
body>.app .right.live-library-panel .tabcontent .warning{
  color:#aac4d7!important;
  font-size:11px!important;
  line-height:1.5!important;
}
body>.app .right.live-library-panel .tabcontent .warning{
  padding:11px 13px!important;
  margin-top:14px!important;
  background:#223b50!important;
  border-color:#42607a!important;
}
body>.app .right.live-library-panel .tabcontent .route,
body>.app .right.live-library-panel .tabcontent .tools{
  display:flex!important;
  align-items:center;
  flex-wrap:wrap;
  gap:9px!important;
}
body>.app .right.live-library-panel .tabcontent button,
body>.app .right.live-library-panel .tabcontent button.mini,
body>.app .right.live-library-panel .tabcontent .route button,
body>.app .right.live-library-panel .tabcontent [data-seeksection],
body>.app .right.live-library-panel .tabcontent #addSection{
  color:#d6ecf9!important;
  background:#26465d!important;
  border:1px solid #42677f!important;
  border-radius:8px!important;
  box-shadow:none!important;
  min-height:37px;
  padding:7px 12px;
  font-weight:760;
}
body>.app .right.live-library-panel .tabcontent button:hover:not(:disabled){
  background:#315978!important;
  border-color:#5d90a7!important;
}
body>.app .right.live-library-panel .tabcontent button.selected,
body>.app .right.live-library-panel .tabcontent button.active{
  background:#176da6!important;
  color:#fff!important;
  border-color:#2495d0!important;
}
body>.app .right.live-library-panel .tabcontent .sl-section-cue-preferences{
  display:flex!important;
  align-items:center!important;
  gap:10px!important;
  padding:13px 15px!important;
  margin:0 0 12px!important;
  font-size:12px!important;
  font-weight:730!important;
}
body>.app .right.live-library-panel .tabcontent .sl-section-cue-preferences input{
  accent-color:#42cbbc!important;
}
body>.app .right.live-library-panel .tabcontent .sl-section-cue-preferences small{
  color:#91afc2!important;
  font-size:10px!important;
}
body>.app .right.live-library-panel .tabcontent #secList{
  display:flex;
  flex-direction:column;
  gap:7px;
  min-width:0;
}
body>.app .right.live-library-panel .tabcontent #secList>div{
  display:flex!important;
  flex-wrap:wrap;
  align-items:center!important;
  gap:9px!important;
  margin:0!important;
  min-height:53px;
  padding:8px 11px!important;
  background:#1b3549!important;
  border:1px solid #35546a!important;
  border-radius:8px!important;
}
body>.app .right.live-library-panel .tabcontent #secList>div:last-child:has(#secName){
  background:#152b3f!important;
  border:1px dashed #3a637a!important;
}
body>.app .right.live-library-panel .tabcontent input:not([type=checkbox]):not([type=range]),
body>.app .right.live-library-panel .tabcontent select{
  min-height:39px!important;
  color:#edf6fb!important;
  background:#102438!important;
  border:1px solid #426176!important;
  border-radius:8px!important;
  padding:8px 12px!important;
}
body>.app .right.live-library-panel .tabcontent input::placeholder{
  color:#91acbc!important;
}
body>.app .right.live-library-panel .tabcontent #secList .small-note{
  font-variant-numeric:tabular-nums!important;
  color:#9dbbcf!important;
}
body>.app .right.live-library-panel .tabcontent .route button{
  min-width:125px;
}
/* Stabilize the category bar and eliminate unexpected inner white gutters. */
body>.app.sl-mode-repertoire>.main-grid>.right.live-library-panel{
  background:#101f2e!important;
  border-color:#334f63!important;
}
body>.app.sl-mode-repertoire>.main-grid>.right.live-library-panel>.tabs{
  padding:0 14px!important;
  background:#152a3d!important;
  border-top:0!important;
  border-bottom:1px solid #2e495f!important;
}
body>.app.sl-mode-repertoire>.main-grid>.right.live-library-panel>.tabs button{
  min-height:47px!important;
  padding:12px 10px!important;
  color:#a8c0d0!important;
  font-size:12px!important;
}
body>.app.sl-mode-repertoire>.main-grid>.right.live-library-panel>.tabs button.active{
  color:#64e1cd!important;
  background:#1b384b!important;
  border-bottom-color:#43cbb6!important;
}
body>.app.sl-mode-repertoire>.main-grid>.right.live-library-panel>.tabcontent{
  padding:16px clamp(16px,4vw,62px) 24px!important;
  background:#101f2e!important;
}
body>.app.sl-mode-repertoire>.main-grid>.right.live-library-panel>.tabcontent > *{
  max-width:1120px;
  margin-left:auto;
  margin-right:auto;
}
body>.app.sl-mode-repertoire .right.live-library-panel .songitem{
  min-height:68px!important;
  padding:10px 13px!important;
}
/* Mixer: center four/low-count strips in the available rail while preserving
   their large touch-safe fader target. Seven+ strips scroll left-to-right. */
@media(min-width:1000px) and (min-height:580px) and (pointer:fine){
  body>.app>#mixer .clean-group--music .clean-rail{
    display:flex!important;
    justify-content:flex-start!important;
    justify-content:safe center!important;
    align-items:stretch!important;
    gap:10px!important;
    padding:0 2px 3px!important;
    overflow-x:auto!important;
    scrollbar-width:thin;
    scrollbar-color:#54758c #122738;
  }
  body>.app>#mixer .clean-group--music .clean-rail>.strip{
    flex:1 0 110px!important;
    min-width:110px!important;
    max-width:175px!important;
    box-sizing:border-box;
  }
  body>.app>#mixer .clean-group--monitor .clean-rail>.strip{
    min-width:0!important;
  }
}
/* Responsive desktop: prevent the logo/BPM/buttons from colliding when users
   zoom or keep a narrow browser window. Original controls stay visible. */
@media(min-width:1000px) and (max-width:1440px) and (pointer:fine){
  body>.app>.top.stage-header{
    padding:9px 12px!important;
    gap:8px!important;
  }
  body>.app>.top.stage-header .brand.soulone-family-brand .soulone-family-emblem{
    width:41px!important;height:41px!important;min-width:41px!important;flex-basis:41px!important;
  }
  body>.app>.top.stage-header .brand.soulone-family-brand .soulone-family-wordmark{
    font-size:15px!important;letter-spacing:.045em!important;
  }
  body>.app>.top.stage-header .brand.soulone-family-brand{gap:6px!important}
  body>.app>.top.stage-header .stage-center .stage-field{
    padding:4px 6px!important;
  }
  body>.app>.top.stage-header .stage-actions{gap:5px}
  body>.app>.top.stage-header .stage-actions button{
    padding-left:8px;padding-right:8px;
  }
}
@media(max-width:1100px) and (pointer:coarse){
  .soul-mobile-console .stage-identity .brand.soulone-family-brand{
    min-height:0!important;
    gap:4px!important;
  }
  .soul-mobile-console .stage-identity .brand.soulone-family-brand .soulone-family-emblem{
    width:29px!important;height:29px!important;
    min-width:29px!important;flex-basis:29px!important;
    border-radius:5px!important;
  }
  .soul-mobile-console .stage-identity .brand.soulone-family-brand .soulone-family-wordmark{
    font-size:12px!important;
  }
  .soul-mobile-console .stage-identity .song-head{
    padding-left:7px!important;
  }
  .soul-mobile-console .right.live-library-panel .sl-np-upper{
    gap:6px!important;
  }
  .soul-mobile-console .right.live-library-panel .sl-np-actions{
    gap:6px!important;
  }
  .soul-mobile-console .right.live-library-panel .sl-pro-transport button{
    width:34px!important;min-width:34px!important;flex-basis:34px!important;
    height:37px!important;min-height:37px!important;
  }
  .soul-mobile-console .right.live-library-panel .sl-np-title{
    font-size:15px!important;
  }
  .soul-mobile-console .right.live-library-panel .tabcontent .block,
  .soul-mobile-console .right.live-library-panel .tabcontent .config{
    padding:11px!important;
  }
}
@media(prefers-reduced-motion:reduce){
  body>.app .right.live-library-panel .sl-pro-transport button,
  body>.app .right.live-library-panel .tabcontent button{
    transition:none!important;
  }
}


/* Legacy output-preset and keyboard-shortcut cards from v05.js live outside
   the base .config block; bring them into the same studio theme. */
body>.app .right.live-library-panel .tabcontent .preset-description,
body>.app .right.live-library-panel .tabcontent .shortcuts-help{
  box-sizing:border-box!important;
  width:100%!important;
  display:block!important;
  padding:15px 16px!important;
  margin:10px 0!important;
  background:#1b3548!important;
  color:#d9ebf6!important;
  border:1px solid #38596f!important;
  border-radius:10px!important;
  box-shadow:none!important;
  font-size:12px!important;
  line-height:1.55!important;
}
body>.app .right.live-library-panel .tabcontent .shortcuts-help strong,
body>.app .right.live-library-panel .tabcontent .shortcuts-help h3,
body>.app .right.live-library-panel .tabcontent .shortcuts-help h4{
  color:#f0f8fe!important;
  font-size:13px!important;
  font-weight:800!important;
}
body>.app .right.live-library-panel .tabcontent .shortcuts-help p,
body>.app .right.live-library-panel .tabcontent .shortcuts-help span,
body>.app .right.live-library-panel .tabcontent .preset-description span{
  color:#c5daea!important;
  line-height:1.55!important;
}
body>.app .right.live-library-panel .tabcontent .shortcuts-help kbd{
  background:#0e2537!important;
  border:1px solid #4c6a80!important;
  box-shadow:none!important;
  color:#e2f4ff!important;
  padding:3px 7px!important;
  border-radius:5px!important;
  white-space:nowrap;
}
body>.app .right.live-library-panel .tabcontent .shortcuts-help button{
  background:#254860!important;
  border:1px solid #4c7791!important;
  color:#e4f3fc!important;
}
body>.app .right.live-library-panel .tabcontent .sl-section-row button.sl-sec-edit{
  background:#264a62!important;
  color:#ccecff!important;
  border-color:#4a7190!important;
}
body>.app .right.live-library-panel .tabcontent .sl-section-row button.sl-sec-delete{
  background:#4a2939!important;
  color:#ffd8e0!important;
  border-color:#925061!important;
}
/* Keyboard shortcut modal and song menus use same contrast, even when
   portaled outside the .right library element. */
#helpOverlay .shortcut-modal{
  background:#122538!important;
  border:1px solid #3b5870!important;
  color:#eff6fc!important;
  box-shadow:0 20px 64px #0009!important;
}
#helpOverlay .shortcut-modal h2,
#helpOverlay .shortcut-modal .shortcut-block strong{
  color:#eef7fc!important;
}
#helpOverlay .shortcut-modal .shortcut-block{
  background:#1c3549!important;
  border:1px solid #3a566d!important;
  color:#d5e8f4!important;
}
#helpOverlay .shortcut-modal .shortcut-item{
  color:#d7e8f4!important;
  border-top-color:#39586b!important;
}
#helpOverlay .shortcut-modal .shortcut-item span:last-child{
  color:#b6d0e0!important;
}
#helpOverlay .shortcut-modal kbd,
.sl-song-menu kbd{
  background:#0b2438!important;
  border:1px solid #54728b!important;
  color:#e1f4ff!important;
  box-shadow:none!important;
}
#helpOverlay .shortcut-modal button{
  color:#e5f2f9!important;
  background:#27465d!important;
  border:1px solid #4d7089!important;
  border-radius:7px!important;
}
.sl-song-menu{
  background:#142b3f!important;
  border:1px solid #3a5a72!important;
  box-shadow:0 18px 52px #0007!important;
}
.sl-song-menu button{
  color:#e1f1fb!important;
  background:transparent!important;
}
.sl-song-menu button:hover:not(:disabled){
  background:#27485e!important;
}
.sl-song-menu .sl-menu-danger{color:#ffadb8!important}
.sl-editor{
  background:#12293d!important;
  border:1px solid #44627a!important;
  color:#e8f4fc!important;
  box-shadow:0 20px 65px #0008!important;
}
.sl-editor h3{color:#f0f8fe!important}
.sl-editor-description,
.sl-editor-fields label{color:#bed7e5!important}
.sl-editor-fields input,
.sl-editor-fields select{
  background:#0e2335!important;
  border:1px solid #4c7087!important;
  color:#e9f6fd!important;
}
.sl-editor-actions button:not(.sl-save):not(.sl-danger){
  background:#23445c!important;
  border-color:#466982!important;
  color:#e9f5fc!important;
}