:root{color-scheme:dark;--jp-bg:#06070b;--jp-surface:#10111a;--jp-line:rgba(255,255,255,.105);--jp-violet:#9d3bf4;--jp-pink:#ee3e97;--jp-orange:#ff7b36;--jp-live:#ff7b36}
@view-transition{navigation:auto}
::view-transition-old(root){animation:jp-out .18s ease both}
::view-transition-new(root){animation:jp-in .32s cubic-bezier(.2,.8,.2,1) both}
@keyframes jp-out{to{opacity:0;transform:translateY(-8px);filter:blur(2px)}
}
@keyframes jp-in{from{opacity:0;transform:translateY(10px);filter:blur(2px)}
to{opacity:1;transform:none;filter:none}
}
html,body{max-width:100%;overflow-x:clip;overflow-y:auto;overscroll-behavior-x:none}
*{box-sizing:border-box;min-width:0}
img,svg,video,canvas{max-width:100%;height:auto}

/* Luzes e orbes decorativos nunca participam do tamanho do documento. */
body>i.light,body>i.halo,body>i.auth-orb,body>i.orb{
  position:fixed!important;
  pointer-events:none!important;
  max-width:none!important;
}
.light,.halo,.auth-orb,.orb{
  position:fixed!important;
  pointer-events:none!important;
  contain:layout paint style!important;
  will-change:transform;
  animation:none!important;
}
/* Fundos continuam vivos, mas não se movem no eixo que poderia criar altura extra. */
@keyframes drift{to{transform:translate3d(10vw,0,0) scale(1.14)}}
@keyframes halo{to{transform:translate3d(9vw,0,0) scale(1.14)}}
@keyframes move{to{transform:translate3d(10vw,0,0) scale(1.18)}}

/* Página pública: sem faixa/banner vazia e marca ampliada sem criar overflow lateral. */
main.relative>header>img[src*="jukepix-header-logo"]{
  width:min(20rem,calc(100vw - 6.5rem))!important;
  height:5.5rem!important;
  max-width:calc(100vw - 6.5rem)!important;
  flex:0 1 auto;
}
@media (max-width:639px){
  main.relative>header>img[src*="jukepix-header-logo"]{width:min(15rem,calc(100vw - 5.75rem))!important;height:4.5rem!important}
}
body{animation:jp-in .32s cubic-bezier(.2,.8,.2,1) both;background:var(--jp-bg)!important;background-image:radial-gradient(circle at 11% 4%,rgba(157,59,244,.13),transparent 26rem),radial-gradient(circle at 96% 30%,rgba(238,62,151,.1),transparent 24rem)!important}
body:before{position:fixed;z-index:-1;inset:0;content:"";pointer-events:none;opacity:.17;background-image:radial-gradient(rgba(255,255,255,.42) .55px,transparent .7px);background-size:18px 18px;mask-image:linear-gradient(#000,transparent 90%)}
a,button{transition:transform .18s ease,background-color .18s ease,border-color .18s ease,color .18s ease,filter .18s ease}
.jp-icon{display:inline-grid;place-items:center;min-width:1em;line-height:1;vertical-align:-.08em}
#artistSocials>a{display:grid!important;height:3rem;width:3rem;padding:0!important;place-items:center;border-radius:.9rem!important}
#artistSocials>a[hidden]{display:none!important}
#artistSocials>a .jp-icon{margin:0!important;font-size:1.05rem}
#preview{max-width:100%;overflow-wrap:anywhere;word-break:break-word}
button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{outline:3px solid rgba(238,62,151,.72);outline-offset:3px}
input,textarea,select{border-color:var(--jp-line)!important;background:rgba(255,255,255,.045)!important;color:#fff!important}
select{appearance:auto;color-scheme:dark}
select option{background:#151724!important;color:#fff!important}
input:focus,textarea:focus,select:focus{border-color:var(--jp-pink)!important;box-shadow:0 0 0 4px rgba(238,62,151,.11)}
[class*="text-lime"]{color:var(--jp-orange)!important}
[class~="bg-lime"]{background-color:var(--jp-orange)!important;color:#fff!important}
[class*="bg-lime/"]{background-color:rgba(255,123,54,.14)!important}
[class*="border-lime"]{border-color:rgba(255,123,54,.35)!important}
[class*="from-lime"]{--tw-gradient-from:var(--jp-orange) var(--tw-gradient-from-position)!important;--tw-gradient-to:rgb(255 123 54 / 0) var(--tw-gradient-to-position)!important}
[class*="to-lime"]{--tw-gradient-to:var(--jp-orange) var(--tw-gradient-to-position)!important}
#appHeader{position:relative;z-index:100;max-width:100%;isolation:isolate}
#appHeader>header{max-width:100%}
/* Um elemento fixed só acompanha a tela quando nenhum ancestral cria contenção por transform. */
body:has(#appHeader){animation:none!important;transform:none!important}
#appHeader>header{position:sticky;top:0;z-index:30;border-color:var(--jp-line)!important;background:rgba(6,7,11,.82)!important;backdrop-filter:blur(18px)}
#appHeader [id="userMenu"]{border:1px solid var(--jp-line);background:rgba(255,255,255,.045)!important}
#appHeader [id="copyPublic"]{border-color:rgba(238,62,151,.45)!important;color:#f4b4db}
#appHeader nav a{border-radius:12px!important}
#accountPanel{position:absolute!important;top:calc(100% + 8px)!important;right:1.25rem!important;z-index:9999!important;isolation:isolate;pointer-events:auto!important;background:#11121b!important;opacity:1!important;box-shadow:0 22px 55px rgba(0,0,0,.58)!important}
/* Painel do artista: todas as páginas usam a mesma régua do cabeçalho no desktop. */
@media(min-width:1024px){
  body:has(#appHeader)>main.mx-auto{width:100%;max-width:80rem!important;padding-left:2rem!important;padding-right:2rem!important}
}
@media(max-width:767px){
  body:has(#appHeader)>main{padding-bottom:calc(7.5rem + env(safe-area-inset-bottom))!important}
  #mobileNav{position:fixed!important;z-index:70!important;right:0!important;bottom:0!important;left:0!important;display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr));gap:0!important;padding:.55rem .35rem max(.55rem,env(safe-area-inset-bottom))!important;overflow:hidden!important;border-top:1px solid var(--jp-line)!important;background:rgba(7,8,14,.94)!important;box-shadow:0 -14px 36px rgba(0,0,0,.32);backdrop-filter:blur(18px)}
  #mobileNav [data-panel-link]{display:flex!important;min-width:0!important;flex-direction:column;align-items:center;justify-content:center;gap:.28rem!important;border-radius:.85rem!important;padding:.48rem .15rem!important;font-size:.63rem!important;line-height:1.1!important;text-align:center}
  #mobileNav [data-panel-link] i{font-size:1.22rem!important;line-height:1!important}
  #mobileNav [data-panel-link] span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
}
.jp-card{border:1px solid var(--jp-line);background:linear-gradient(145deg,rgba(21,23,36,.96),rgba(10,11,17,.94));box-shadow:0 20px 55px rgba(0,0,0,.24)}
.jp-gradient{background:linear-gradient(100deg,var(--jp-violet),var(--jp-pink),var(--jp-orange))!important;color:white!important}
.jp-eyebrow{color:#f6a3d5!important;letter-spacing:.16em}
.jp-live{color:var(--jp-live)!important}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{transition:none!important;animation:none!important;scroll-behavior:auto!important}
}
@media(max-width:640px){body:before{opacity:.1}
#accountPanel{right:.75rem!important;top:calc(100% + 6px)!important}
.jp-card{border-radius:1.5rem!important}
}