/* VelloxPlay Web App 1.26 — carregamento compacto e acesso responsivo.
   As regras ficam restritas às duas telas para não alterar player/catálogo. */

/* A interface da biblioteca não deve aparecer atrás do carregamento/login. */
body.vp-boot-visible .topbar,
body.vp-access-visible .topbar,
body.vp-boot-visible #installBanner,
body.vp-access-visible #installBanner {display:none!important}
body.vp-access-visible {background:#060609!important;overflow-x:hidden!important}

/* Carregamento sempre ocupa a tela, sem logo nem barra superior. */
#bootView.boot-view {
  position:fixed!important;
  inset:0!important;
  z-index:5000!important;
  display:grid!important;
  place-items:center!important;
  width:100%!important;
  height:100dvh!important;
  min-height:100vh!important;
  padding:24px!important;
  background:#060609!important;
  box-sizing:border-box!important;
  overflow:hidden!important;
}
#bootView.hidden {display:none!important}
#bootView .boot-card{
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
  gap:20px!important;
  width:min(100%,420px)!important;
  padding:0 20px!important;
  margin:auto!important;
  text-align:center!important;
}
#bootView .boot-card img{display:none!important}
#bootView .boot-spinner{
  display:block!important;
  width:34px!important;
  height:34px!important;
  flex:0 0 34px!important;
  border:3px solid rgba(255,255,255,.11)!important;
  border-top-color:#ef1023!important;
  border-radius:50%!important;
  animation:velloxBootSpin .8s linear infinite!important;
}
#bootView #bootLabel{
  display:block!important;
  max-width:360px!important;
  font-size:16px!important;
  line-height:1.55!important;
  letter-spacing:0!important;
  font-weight:600!important;
  color:#ebebf0!important;
}

/* Entrada: card compacto, sem headline gigante ou formulário estreito. */
#setupView.hidden{display:none!important;visibility:hidden!important;pointer-events:none!important}
#setupView:not(.hidden){
  position:relative!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
  width:100%!important;
  min-height:100dvh!important;
  height:auto!important;
  padding:24px 16px 40px!important;
  margin:0!important;
  box-sizing:border-box!important;
  overflow:visible!important;
}
#setupView .setup-card{
  position:relative!important;
  width:min(100%,590px)!important;
  max-width:590px!important;
  min-width:0!important;
  padding:32px!important;
  margin:0 auto!important;
  border:1px solid rgba(255,255,255,.09)!important;
  border-radius:24px!important;
  background:linear-gradient(145deg,#12131a,#0b0c12 72%)!important;
  box-shadow:0 26px 70px rgba(0,0,0,.4)!important;
  text-align:left!important;
  box-sizing:border-box!important;
  overflow:visible!important;
}
#setupView .setup-card::after,
#setupView .setup-card::before {display:none!important;content:none!important}
#setupView .setup-logo.setup-wordmark{
  display:block!important;
  width:min(224px,70%)!important;
  max-width:224px!important;
  height:auto!important;
  max-height:95px!important;
  object-fit:contain!important;
  object-position:left center!important;
  margin:0 0 12px!important;
}
#setupView .setup-tag{
  display:inline-block!important;
  padding:0!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  color:#ff5f6a!important;
  font-size:10px!important;
  font-weight:900!important;
  letter-spacing:.15em!important;
  margin:0 0 8px!important;
}
#setupView .setup-card h1{
  font-size:clamp(26px,3vw,32px)!important;
  line-height:1.15!important;
  letter-spacing:-.035em!important;
  max-width:none!important;
  margin:0 0 8px!important;
  text-align:left!important;
  color:#fff!important;
}
#setupView .setup-card h1 em{color:#ff2938!important}
#setupView .setup-card > p{
  max-width:none!important;
  margin:0 0 22px!important;
  font-size:14px!important;
  line-height:1.55!important;
  color:#aaaab5!important;
  text-align:left!important;
}
#setupView .login-tabs{
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  width:100%!important;
  margin:0 0 14px!important;
  padding:5px!important;
  gap:6px!important;
  background:#090a10!important;
  border:1px solid #292a32!important;
  border-radius:15px!important;
  box-sizing:border-box!important;
}
#setupView .login-tab{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  width:100%!important;
  min-width:0!important;
  min-height:44px!important;
  padding:10px 8px!important;
  border-radius:11px!important;
  border:1px solid transparent!important;
  background:transparent!important;
  box-shadow:none!important;
  color:#b0b0bc!important;
  font-size:14px!important;
  font-weight:800!important;
  white-space:normal!important;
}
#setupView .login-tab.active{
  background:#e30613!important;
  border-color:#e30613!important;
  box-shadow:0 6px 15px rgba(227,6,19,.2)!important;
  color:#fff!important;
}
#setupView #playlistForm{
  width:100%!important;
  max-width:none!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  background:transparent!important;
  box-shadow:none!important;
  backdrop-filter:none!important;
  box-sizing:border-box!important;
  text-align:left!important;
}
#setupView #credentialsLoginFields{
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:14px!important;
  min-width:0!important;
}
#setupView #credentialsLoginFields.hidden,
#setupView #m3uLoginFields.hidden{display:none!important}
#setupView .credential-server{grid-column:1/-1!important}
#setupView .credential-field,
#setupView .password-field,
#setupView #m3uLoginFields{min-width:0!important;width:100%!important}
#setupView .credential-field label,
#setupView .m3u-login-fields label{
  display:block!important;
  margin:0 0 7px!important;
  color:#e6e6ec!important;
  font-size:12px!important;
  font-weight:800!important;
}
#setupView .credential-field input,
#setupView #m3uLoginFields input{
  display:block!important;
  width:100%!important;
  max-width:none!important;
  min-width:0!important;
  min-height:50px!important;
  height:50px!important;
  margin:0!important;
  padding:0 14px!important;
  border:1px solid #343641!important;
  border-radius:12px!important;
  outline:none!important;
  background:#08090f!important;
  color:#fff!important;
  font-size:15px!important;
  box-sizing:border-box!important;
}
#setupView .credential-field input:focus,
#setupView #m3uLoginFields input:focus{
  border-color:#f22637!important;
  box-shadow:0 0 0 3px rgba(227,6,19,.13)!important;
}
#setupView .password-field{position:relative!important}
#setupView .password-field input{padding-right:54px!important}
#setupView .password-toggle{
  position:absolute!important;
  top:5px!important;
  right:5px!important;
  width:40px!important;
  height:40px!important;
  border-radius:10px!important;
  background:#1c1e27!important;
  color:#e5e5eb!important;
}
#setupView .login-actions{
  display:flex!important;
  flex-direction:column!important;
  align-items:stretch!important;
  gap:14px!important;
  margin:18px 0 0!important;
}
#setupView .login-actions .remember{
  display:flex!important;
  align-items:center!important;
  gap:10px!important;
  min-height:24px!important;
  margin:0!important;
  color:#c9c9d2!important;
  font-size:13px!important;
}
#setupView .login-actions .remember input{
  width:18px!important;height:18px!important;flex:0 0 18px!important;
  accent-color:#e30613!important;
}
#setupView #loadBtn{
  display:flex!important;
  width:100%!important;
  min-height:52px!important;
  padding:12px 20px!important;
  justify-content:center!important;
  margin:0!important;
  border:1px solid #e30613!important;
  border-radius:13px!important;
  background:#e30613!important;
  box-shadow:0 12px 24px rgba(227,6,19,.18)!important;
  color:#fff!important;
  font-size:16px!important;
  font-weight:900!important;
}
#setupView .provider-hint{
  display:block!important;
  margin:13px 0 0!important;
  padding:0!important;
  border:none!important;
  background:transparent!important;
  text-align:center!important;
}
#setupView .provider-hint small{
  display:block!important;
  width:auto!important;
  margin:0!important;
  color:#8e909a!important;
  font-size:12px!important;
  line-height:1.5!important;
}
#setupView .privacy-note{
  margin:18px 0 0!important;
  padding:14px 0 0!important;
  border:0!important;
  border-top:1px solid #292a32!important;
  border-radius:0!important;
  background:transparent!important;
  color:#858793!important;
  font-size:12px!important;
  line-height:1.55!important;
  text-align:left!important;
}
#setupView .status-box{
  margin-top:14px!important;
  padding:12px 14px!important;
  border-radius:12px!important;
  font-size:13px!important;
  line-height:1.5!important;
  text-align:left!important;
}

@media(max-width:620px){
  #setupView:not(.hidden){
    display:block!important;
    min-height:100dvh!important;
    padding:max(18px, env(safe-area-inset-top)) 12px calc(24px + env(safe-area-inset-bottom))!important;
  }
  #setupView .setup-card{
    max-width:470px!important;
    padding:24px 18px!important;
    border-radius:21px!important;
  }
  #setupView .setup-logo.setup-wordmark{width:188px!important;margin:0 0 11px!important}
  #setupView .setup-card h1{font-size:27px!important}
  #setupView .setup-card > p{font-size:13px!important;margin-bottom:18px!important}
  #setupView #credentialsLoginFields{grid-template-columns:1fr!important;gap:12px!important}
  #setupView .credential-server{grid-column:auto!important}
  #setupView .login-tab{min-height:46px!important;font-size:13px!important}
  #setupView .login-actions{gap:12px!important;margin-top:16px!important}
}
@media(max-width:360px){
  #setupView .setup-card{padding:20px 14px!important}
  #setupView .login-tab{font-size:12px!important}
}