/* =============================================================================
   O SISTEMA VISUAL DO APP (W9). A ultima folha da casca, e por isso a que vale.

   POR QUE UMA FOLHA PROPRIA. O app.css tem seis mil linhas escritas em camadas,
   cada uma corrigindo a de cima, e cada correcao tirou um pouco de corpo: caixa
   saiu da lista, sombra saiu do player, cor saiu da barra. Cada passo tinha
   motivo, e o resultado somado foi uma tela correta e chapada, preto sobre
   preto, que o dono descreveu como "meio pa". Esta folha nao desfaz aquelas
   decisoes (a lista continua sem caixa, o coral continua com um sentido so):
   ela poe por cima a PROFUNDIDADE que faltava, em um lugar so, com regras que
   se leem de uma vez em vez de espalhadas por seis mil linhas.

   AS QUATRO REGRAS DESTA FOLHA
   1. Profundidade por degrau: preto palco no chao, superficies erguidas com fio
      de cabelo em cima (--hairline) e tres elevacoes (--elev-1/2/3). Nada de
      vidro em tudo: so o que flutua sobre a lista (player e barra de abas).
   2. Coral e "tocando, primario, ativo", e mais nada. O brilho coral
      (--glow-play) so existe atras do que esta tocando e no botao primario sob
      o ponteiro, como o celular da pagina de venda.
   3. Tipo com papel: Archivo para titulo de tela, cabecalho de secao, nome da
      musica no palco e numero grande; rotulo miudo em caixa alta e aberto
      (--tracking-eyebrow); corpo na fonte do sistema.
   4. Raio por papel (--raio-*): controle, cartao, o que flutua e a folha. A
      linha de lista nao tem raio: e faixa.

   Toda cor vem de token (tokens.css ou o topo de app.css): test_tema.py
   reprova cor escrita aqui. O palco continua sempre escuro (data-palco).
   ============================================================================= */

/* ---------------------------------------------------------------------------
   1. ATMOSFERA
   O fundo deixa de ser um preto chapado: uma luz creme quase nada vinda de
   cima, como o refletor antes do show. No monitor a tela tem fundo proprio,
   entao a luz vai nela; no celular vai no #app.
   --------------------------------------------------------------------------- */
#app{
  background:
    radial-gradient(120% 46% at 50% -8%, var(--luz-topo), transparent 64%),
    var(--bg);
}
@media (min-width:1024px){
  #app{
    background:
      radial-gradient(70% 40% at 50% -6%, var(--luz-topo), transparent 66%),
      var(--bg2);
  }
  #app > .screen:not(#scr-stage){background:transparent}
}

/* ---------------------------------------------------------------------------
   2. TIPOGRAFIA
   --------------------------------------------------------------------------- */
/* Titulo de tela: mais firme, mais apertado. No celular 30px; no monitor o
   clamp que ja existia sobe o teto. */
.h-title{
  font-size:clamp(26px, 7.4vw, 32px);
  line-height:1.02;
}
#app > .screen.active > .tela-hero .h-title,
#app > .screen.active > .h-title{line-height:1.02}
@media (min-width:1024px){
  #app > .screen.active > .tela-hero .h-title,
  #app > .screen.active > .h-title,
  #app > #scr-home.active > .hero .hero-ola{font-size:clamp(34px, 2.8vw, 56px); line-height:1}
  #app > #scr-rep.active > .h-title{font-size:clamp(26px, 2vw, 34px)}
}

/* O ROTULO DE CIMA. Mesmo desenho do "PLAYBACK PARA QUEM CANTA AO VIVO" da
   pagina de venda, sem o traco coral: aqui o coral tem dono. */
.eyebrow, .secao,
.ajuda-sec, .cfg-sec{
  display:flex; align-items:center; gap:10px;
  font-family:var(--font-sans);
  font-size:var(--text-label); font-weight:var(--weight-semibold);
  letter-spacing:var(--tracking-eyebrow); text-transform:uppercase;
  color:var(--muted);
}
.eyebrow::before{
  content:''; width:16px; height:2px; border-radius:2px; background:var(--hairline-strong);
  flex:0 0 auto;
}

/* Numero e dado: tabular, para nao dancar a cada segundo. */
.hd-time, .rp-hora, .stage-time, .stage-hora, .song-num, .aba-n{
  font-variant-numeric:tabular-nums;
}

/* ---------------------------------------------------------------------------
   3. A ABERTURA DA HOME
   A saudacao volta ao celular. Ela tinha saido para devolver altura a lista,
   e com ela saiu o unico ponto da tela onde o olho entra. Volta compacta: o
   rotulo miudo, o nome em Archivo e nada mais (a frase de apresentacao fica so
   no monitor, onde ha lugar). O nome no canto do cabecalho sai, porque agora
   ele esta aqui, maior.
   --------------------------------------------------------------------------- */
@media (max-width:1023.98px){
  #scr-home .hero{display:block; margin:0 0 var(--space-5)}
  #scr-home .hero .hero-sub{display:none}
  #scr-home .hero-ola{
    font-size:clamp(30px, 9vw, 38px); line-height:1; margin-top:var(--space-2);
    letter-spacing:var(--tracking-brand);
  }
  #scr-home .conta-nome{display:none}
  #scr-home > .header{margin-bottom:var(--space-5)}
}
.hero .eyebrow{margin:0}
@media (min-width:1024px){
  #app > #scr-home.active > .hero .eyebrow{margin-bottom:var(--space-3)}
  #app > #scr-home.active > .hero .hero-sub{margin-top:var(--space-3)}
}

/* ---------------------------------------------------------------------------
   4. BOTOES: um sistema so
   primario   coral com letra preto palco, e o brilho coral SO sob o ponteiro
   secundario contorno creme sobre o fundo, sem superficie cinza
   fantasma   so a letra
   --------------------------------------------------------------------------- */
.btn{
  border-radius:var(--raio-controle);
  font-weight:var(--weight-semibold);
  letter-spacing:-.005em;
  background:transparent;
  border:1px solid var(--hairline-strong);
  box-shadow:none;
  transition:transform var(--duration-fast) var(--ease), background var(--duration) var(--ease),
             border-color var(--duration) var(--ease), box-shadow var(--duration-slow) var(--ease),
             color var(--duration) var(--ease);
}
.btn:hover{border-color:var(--border-hover); background:rgb(var(--tinta) / .04)}
.btn.primary, .btn.b-save{
  background:var(--accent); color:var(--accent-foreground); border-color:transparent;
  box-shadow:var(--highlight-strong);
}
@media (hover:hover) and (pointer:fine){
  .btn.primary:hover:not(:disabled), .btn.b-save:hover:not(:disabled){
    background:var(--accent-hover);
    box-shadow:var(--highlight-strong), var(--glow-cta);
    transform:translateY(-1px);
  }
}
.btn.primary:active, .btn.b-save:active{transform:translateY(0) scale(.98)}
.btn.ghost{border-color:transparent; background:transparent; color:var(--muted)}
.btn.ghost:hover{color:var(--text); background:rgb(var(--tinta) / .05)}
.btn.danger{border-color:var(--destructive-border)}
@media (max-width:1023.98px){ .btn{border-radius:var(--raio-controle)} }

/* O CTA da home e o maior primario do app: altura de acao, Archivo nao (e
   botao, nao titulo), peso firme. */
.create-cta{min-height:52px; font-size:var(--text-md); font-weight:var(--weight-semibold)}

/* Os botoes de ajuste (o - e + da lista, A- e A+) viram uma peca so, em vez
   de quadrados soltos. */
.lista-zoom{
  display:inline-flex; gap:2px; padding:2px;
  border:1px solid var(--hairline); border-radius:var(--raio-controle);
  background:rgb(var(--tinta) / .03);
}
.lista-zoom button{
  border:0 !important; background:transparent !important; border-radius:calc(var(--raio-controle) - 3px) !important;
  color:var(--text);
}
.lista-zoom button:hover{background:rgb(var(--tinta) / .07) !important}
.rep-editar{
  border:1px solid var(--hairline-strong); background:transparent; border-radius:var(--radius-full);
}

/* ---------------------------------------------------------------------------
   5. CAMPOS
   --------------------------------------------------------------------------- */
.field{
  background:var(--input);
  border:1px solid var(--hairline-strong);
  border-radius:var(--raio-controle);
  box-shadow:inset 0 1px 2px rgb(var(--sombra) / .25);
}
.field:hover{border-color:var(--border-hover)}
.field:focus{border-color:var(--ring); box-shadow:0 0 0 3px var(--ring-halo)}
@media (max-width:1023.98px){ .field{border-radius:var(--raio-controle)} }
.btn-ordenar{color:var(--muted); font-weight:var(--weight-medium)}

/* ---------------------------------------------------------------------------
   6. CARTOES: um sistema so
   Superficie erguida, fio de cabelo e o fio de luz em cima. O quadro das
   listas da home, no monitor, e o mesmo cartao.
   --------------------------------------------------------------------------- */
.card{
  background:linear-gradient(180deg, rgb(var(--tinta) / .025), transparent 40%), var(--card);
  border:1px solid var(--hairline);
  border-radius:var(--raio-cartao);
  box-shadow:var(--elev-1);
}
@media (max-width:1023.98px){
  #cardListas{background:none; border:0; box-shadow:none; border-radius:0}
}
.card-title{font-size:var(--text-md)}
.card-title .ic, .li-ic, .fonte-linha .ic, .fonte-topo .ic{
  background:rgb(var(--tinta) / .04); border:1px solid var(--hairline); color:var(--muted);
  border-radius:var(--raio-controle);
}

/* ---------------------------------------------------------------------------
   7. LISTAS: uma linha so
   Sem caixa (a decisao continua), mas com ESTRUTURA: um fio de cabelo entre
   as linhas, o numero miudo e tabular, o nome em peso firme. Uma lista de
   nomes passa a ler como uma setlist impressa, e nao como texto solto.
   --------------------------------------------------------------------------- */
.song:not(.expanded), .list-item{border-radius:0}
#homeAllList .song:not(.current):not(.expanded),
#allList .song:not(.current):not(.expanded),
#songList .song:not(.current):not(.expanded),
#repList .list-item:not(.current){
  background:none; border:0; box-shadow:inset 0 -1px 0 var(--hairline);
  margin-bottom:0;
}
#songList .song.emenda:not(.current):not(.expanded){box-shadow:none}
.li-title-txt{font-weight:var(--weight-semibold); letter-spacing:-.008em}
.li-sub{color:var(--subtle-foreground); margin-top:3px}
.song-num, .row-num{color:var(--subtle-foreground); font-size:var(--text-xs); font-weight:var(--weight-medium)}
.song-main{min-height:56px}
.song-edit, .song-play{color:var(--subtle-foreground)}
.song-edit:hover, .song-play:hover{color:var(--text)}
@media (hover:hover) and (pointer:fine){
  #homeAllList .song:not(.current):not(.expanded):hover,
  #allList .song:not(.current):not(.expanded):hover,
  #songList .song:not(.current):not(.expanded):hover,
  #repList .list-item:not(.current):hover{background:rgb(var(--tinta) / .035)}
}

/* O ESTADO DA LETRA SEM VERDE. "Acompanha a musica" era o unico verde da
   lista, e verde aqui nao informava urgencia nenhuma: virava a coisa mais
   chamativa de cada linha. Agora os tres estados sao neutros e o que
   acompanha leva um ponto creme, que se acha sem gritar. */
.selo-letra{font-weight:var(--weight-medium); letter-spacing:0}
.selo-letra.auto{color:var(--muted)}
.selo-letra.auto::before{
  content:''; display:inline-block; width:5px; height:5px; border-radius:50%;
  background:currentColor; margin-right:6px; vertical-align:.12em;
}
.selo-letra.nada{opacity:1; color:var(--subtle-foreground)}

/* NAO ESTA NESTE APARELHO nao e aviso, e lugar: a musica esta na nuvem. Sai
   do amarelo de alerta e fica neutra, com a nuvem na frente. Amarelo sobra
   para o que de fato pede atencao (sem internet, assinatura vencendo). */
.song[data-aparelho="fora"] .selo-aparelho{color:var(--muted); font-weight:var(--weight-medium); letter-spacing:0}
.song[data-aparelho="fora"] .li-title-txt{color:var(--muted)}
.rep-faltam{
  background:var(--card); border:1px solid var(--hairline); color:var(--text);
  border-radius:var(--raio-cartao); box-shadow:var(--elev-1);
}
.rep-faltam svg{color:var(--muted)}
.rep-faltam .btn.primary{box-shadow:var(--highlight-strong)}

/* O PLAY DA LINHA: circulo neutro de fio, que acende em coral so sob o dedo. */
.row-play{border-radius:50%; background:transparent; border:1px solid var(--hairline-strong); color:var(--text)}

/* O REPERTORIO GANHA UM SELO: a onda da marca numa pastilha, sem coral (nada
   esta tocando nele). O que esta tocando acende a onda em coral. */
#repList .list-item .song-main{position:relative; gap:var(--space-3); padding-left:12px}
#repList .list-item .song-main::before{
  content:''; flex:0 0 auto; width:40px; height:40px; border-radius:var(--raio-controle);
  background:rgb(var(--tinta) / .04); box-shadow:inset 0 0 0 1px var(--hairline);
}
#repList .list-item .song-main::after{
  content:''; position:absolute; left:21px; top:50%; width:22px; height:6px; margin-top:-3px;
  background:var(--subtle-foreground);
  -webkit-mask:var(--icon-onda) center / 22px 6px no-repeat;
  mask:var(--icon-onda) center / 22px 6px no-repeat;
  pointer-events:none;
}
#repList .list-item.current .song-main::after{background:var(--coral)}

/* ---------------------------------------------------------------------------
   8. A MUSICA QUE ESTA TOCANDO
   A linha atual e o unico lugar da lista com luz: uma lavada coral que nasce
   na esquerda e some, o fio coral na borda de onde a musica sai, e o brilho
   por baixo. E a mesma linguagem do player: coral e o que ja saiu do play.
   --------------------------------------------------------------------------- */
.song.current, .list-item.current,
.song.current:hover, .list-item.current:hover{
  background:
    linear-gradient(90deg, var(--coral-wash) 0%, var(--coral-wash-fraco) 55%, transparent 100%),
    var(--card) !important;
  border-color:transparent !important;
  box-shadow:inset 2px 0 0 var(--coral), inset 0 1px 0 var(--hairline), var(--glow-linha) !important;
}
@media (min-width:1024px){
  .song.current, .list-item.current,
  .song.current:hover, .list-item.current:hover{
    border-radius:var(--raio-controle) !important;
    box-shadow:inset 0 0 0 1px var(--coral-fio), var(--glow-linha) !important;
    background:
      linear-gradient(90deg, var(--coral-wash) 0%, var(--coral-wash-fraco) 60%, transparent 100%),
      var(--card) !important;
  }
}
.song.current .li-title-txt, .list-item.current .li-title-txt{color:var(--text)}

/* ---------------------------------------------------------------------------
   9. A ONDA E O PROGRESSO
   A barra de progresso do player vira a onda da marca: as barras do simbolo
   repetidas, creme no que falta e coral no que ja tocou. E literalmente o
   desenho do logo e da pagina de venda, andando com a musica.
   A mascara fica no trilho, entao o trecho tocado (filho dele, com a largura
   que o app.js ja escreve) aparece so atraves das barras.
   --------------------------------------------------------------------------- */
.rp-seek-track{
  height:12px !important; border-radius:0 !important; overflow:hidden;
  background:rgb(var(--tinta) / .22) !important;
  -webkit-mask:var(--icon-onda) 0 50% / 40px 12px repeat-x;
  mask:var(--icon-onda) 0 50% / 40px 12px repeat-x;
}
.rp-seek-fill{background:var(--coral) !important; border-radius:0 !important}
#app > .rp-seek, .rp-seek{z-index:41}
.rp-seek-knob{
  width:3px !important; height:18px !important; border-radius:2px !important;
  background:var(--foreground) !important; box-shadow:0 0 0 2px rgb(var(--papel) / .6) !important;
}

/* O equalizador da musica atual: tres barras com o coral na primeira, como a
   onda. Um pouco mais de corpo. */
.eq{gap:3px}
.eq i{width:3.5px; border-radius:1.5px}

/* ---------------------------------------------------------------------------
   10. A BARRA DO PLAYER (doca)
   Ela volta a ter corpo: e a peca mais importante do app depois da propria
   musica. Superficie erguida, fio de cabelo, a elevacao de quem flutua e,
   ENQUANTO TOCA, o brilho coral por baixo, como o celular da pagina de venda.
   Parada, ela fica neutra: o brilho e o sinal de que ha som saindo.
   --------------------------------------------------------------------------- */
#app > .rep-player, .rep-player{
  background:
    linear-gradient(180deg, rgb(var(--tinta) / .04), transparent 60%),
    rgb(var(--vidro) / var(--vidro-alfa, .9)) !important;
  border:1px solid var(--hairline-strong) !important;
  box-shadow:var(--elev-2) !important;
}
@supports ((backdrop-filter:blur(2px)) or (-webkit-backdrop-filter:blur(2px))){
  #app > .rep-player, .rep-player{
    background:
      linear-gradient(180deg, rgb(var(--tinta) / .04), transparent 60%),
      rgb(var(--vidro) / var(--vidro-alfa, .78)) !important;
    backdrop-filter:blur(18px) saturate(1.3) !important;
    -webkit-backdrop-filter:blur(18px) saturate(1.3) !important;
  }
}
#app > .rep-player:has(.eq:not(.paused)), .rep-player:has(.eq:not(.paused)){
  box-shadow:var(--elev-2), var(--glow-play) !important;
  border-color:var(--coral-fio) !important;
}
.rep-player .rp-title-txt{font-weight:var(--weight-semibold); letter-spacing:-.01em}
.rep-player .rp-title-txt, .rep-player .rp-sub, .rep-player .rp-hora{text-shadow:none !important}
.rep-player .rp-btn.sec{
  background:rgb(var(--tinta) / .05) !important; border:1px solid var(--hairline) !important;
  box-shadow:none !important; color:var(--text);
}
.rep-player .rp-btn:not(.sec){box-shadow:var(--highlight-strong) !important}
.rep-player:has(.eq:not(.paused)) .rp-btn:not(.sec){box-shadow:var(--highlight-strong), var(--glow-cta) !important}

@media (max-width:1023.98px){
  #app > .rep-player, .rep-player{border-radius:var(--raio-flutua) !important; padding:10px 12px !important}
  /* A ONDA ENTRA NO CARTAO. Ela boiava acima dele, solta; agora e a borda de
     cima do proprio player, como na pagina de venda. */
  #app.has-seek .rep-player{padding-top:24px !important}
  #app > .rp-seek, .rp-seek{
    left:calc(10px + 14px) !important; right:calc(10px + 14px) !important;
    bottom:calc(var(--abas-flut) + 8px + var(--rp-h, 56px) - 26px) !important;
    height:24px !important;
  }
}
@media (min-width:600px) and (max-width:1023.98px){
  #app > .rp-seek{
    left:calc(max(calc(12px + var(--sal)), calc((100% - var(--coluna-media)) / 2 + 8px)) + 14px) !important;
    right:calc(max(calc(12px + var(--sar)), calc((100% - var(--coluna-media)) / 2 + 8px)) + 14px) !important;
  }
}
@media (min-width:1024px){
  #app > .rep-player{border-radius:var(--raio-flutua) !important; padding:10px var(--space-3) 10px var(--space-4) !important}
  #app.has-seek > .rep-player{padding-top:26px !important}
  #app > .rp-seek{
    bottom:calc(var(--rp-h, 52px) + var(--doca-vao) - 28px) !important;
    left:calc(max(var(--space-6), calc((100% - var(--largura-app)) / 2 + var(--space-8))) + var(--space-5)) !important;
    right:calc(max(var(--space-6), calc((100% - var(--largura-app)) / 2 + var(--space-8))) + var(--space-5)) !important;
  }
}

/* ---------------------------------------------------------------------------
   11. A BARRA DE ABAS (celular) E A DE TOPO (monitor)
   --------------------------------------------------------------------------- */
@media (max-width:1023.98px){
  .app-nav{
    border:1px solid var(--hairline-strong) !important;
    border-radius:var(--raio-flutua) !important;
    background:rgb(var(--vidro-nav) / var(--vidro-alfa, .92)) !important;
    box-shadow:var(--elev-2) !important;
  }
  @supports ((backdrop-filter:blur(2px)) or (-webkit-backdrop-filter:blur(2px))){
    .app-nav{
      background:rgb(var(--vidro-nav) / var(--vidro-alfa, .78)) !important;
      backdrop-filter:blur(18px) saturate(1.3) !important;
      -webkit-backdrop-filter:blur(18px) saturate(1.3) !important;
    }
  }
  /* O ATIVO E COR E UM TRACO, e mais nada (pedido do dono, W11). O circulo com
     sombra atras do icone (app.css, varias camadas de ::before) saia como uma
     bolha suja sobre a lista; agora o item ativo fica em creme cheio, com o
     traco coral curto embaixo do rotulo. Coral aqui e "ativo". */
  .app-nav-item::before{display:none !important}
  .app-nav-item svg{filter:none !important; width:22px !important; height:22px !important; stroke-width:2 !important}
  /* Cinco partes iguais, alvo de 48 px, rotulo de uma linha so. */
  .app-nav{gap:0 !important; padding-inline:var(--space-1) !important}
  .app-nav-item{
    flex:1 1 0 !important; min-width:0; min-height:48px; gap:4px !important; padding:0 2px !important;
    color:var(--subtle-foreground) !important; font-weight:var(--weight-medium) !important;
    transform:none !important;
  }
  .app-nav-item > span{
    font-size:11px !important; line-height:1.1 !important; letter-spacing:0;
    max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
    text-shadow:none !important;
  }
  .app-nav-item.on{color:var(--foreground) !important}
  .app-nav-item:active{opacity:.7}
  .app-nav-item::after{
    content:''; position:absolute; left:50%; bottom:3px; width:16px; height:2px; margin-left:-8px;
    border-radius:2px; background:var(--coral); opacity:0; transform:scaleX(.4);
    transition:opacity var(--duration) var(--ease), transform var(--duration) var(--ease);
  }
  .app-nav-item.on::after{opacity:1; transform:none}
}
@media (min-width:1024px){
  .app-nav{
    background:rgb(var(--vidro-nav) / var(--vidro-alfa, .82)) !important;
    border-bottom:1px solid var(--hairline) !important;
    box-shadow:0 1px 0 rgb(var(--sombra) / .3);
  }
  /* A mesma linguagem do celular: sem pastilha, so a cor e o traco coral
     encostado na borda de baixo da barra. */
  .app-nav-item{border-radius:var(--raio-controle); color:var(--muted); position:relative}
  .app-nav-item svg{width:20px; height:20px; stroke-width:2 !important}
  .app-nav-item.on{color:var(--foreground); background:none !important; box-shadow:none !important}
  .app-nav-item.on::after{
    content:''; position:absolute; left:50%; bottom:-13px; width:18px; height:2px; margin-left:-9px;
    border-radius:2px; background:var(--coral);
  }
}

/* ---------------------------------------------------------------------------
   12. ABAS DA HOME (monitor) E CABECALHOS DE SECAO
   --------------------------------------------------------------------------- */
.abas{border-bottom:1px solid var(--hairline)}
.aba{font-family:var(--font-display); font-weight:var(--weight-display); font-stretch:var(--stretch-display);
  letter-spacing:var(--tracking-brand); font-size:var(--text-lg)}
.aba.on{font-weight:var(--weight-display)}
.aba-n{font-family:var(--font-sans); font-stretch:normal; letter-spacing:0;
  background:rgb(var(--tinta) / .07); color:var(--muted)}
.aba.on .aba-n{background:rgb(var(--tinta) / .12); color:var(--text)}
/* O cabecalho de cada coluna da home no monitor ("Todas as musicas", "Meus
   repertorios") e titulo de secao: Archivo. */
@media (min-width:1024px){
  #blocoTodas::before, #blocoReps::before{
    font-family:var(--font-display); font-weight:var(--weight-display);
    font-stretch:var(--stretch-display); letter-spacing:var(--tracking-brand);
    font-size:var(--text-xl); margin-bottom:var(--space-4);
  }
}

/* ---------------------------------------------------------------------------
   13. ESTADO VAZIO
   A onda da marca grande, sem coral (nada tocou ainda), titulo e o caminho.
   --------------------------------------------------------------------------- */
.empty{
  border:1px solid var(--hairline); border-radius:var(--raio-cartao);
  background:
    radial-gradient(80% 70% at 50% 0%, rgb(var(--tinta) / .04), transparent 70%),
    var(--card);
  box-shadow:var(--elev-1);
  padding:var(--space-10) var(--space-6);
  gap:var(--space-3);
  color:var(--muted); font-size:var(--text-sm);
}
.empty::before{
  width:120px; height:30px; opacity:.38; margin-bottom:var(--space-3);
  -webkit-mask:var(--icon-onda) center / 120px 30px no-repeat;
  mask:var(--icon-onda) center / 120px 30px no-repeat;
}
.empty b{
  display:block; color:var(--text);
  font-family:var(--font-display); font-weight:var(--weight-display);
  font-stretch:var(--stretch-display); letter-spacing:var(--tracking-brand);
  font-size:var(--text-xl); line-height:1.1;
}
/* A saida do vazio: o botao que faz o que o texto pede. */
.empty .btn{margin-top:var(--space-3); min-height:44px; padding-left:var(--space-6); padding-right:var(--space-6)}
/* Com a biblioteca vazia o vazio JA tem o "Criar playback": o de cima sairia
   repetido, dois corais iguais na mesma dobra. */
#scr-home:has(#homeAllList .empty [data-vazio]) .home-cta-row{display:none}

/* ---------------------------------------------------------------------------
   14. FOLHAS, MODAIS E CARTOES QUE FLUTUAM
   --------------------------------------------------------------------------- */
.cfg-card, .acct-card, .cmodal-card, .bv-card, .song.expanded .song-form{
  border:1px solid var(--hairline-strong) !important;
  box-shadow:var(--elev-3) !important;
}
.cfg-card, .cmodal-card, .bv-card{border-radius:var(--raio-folha) !important}
.job-card, .sync-card{
  border:1px solid var(--hairline-strong); box-shadow:var(--elev-2);
  border-radius:var(--raio-flutua);
}

/* Boas-vindas: o primeiro contato tem cara de palco. Luz coral fraca vindo de
   baixo do cartao (a musica que vai tocar) e o titulo grande em Archivo. */
.bv-card{
  background:
    radial-gradient(90% 60% at 50% 120%, var(--fumaca-coral), transparent 70%),
    linear-gradient(180deg, rgb(var(--tinta) / .03), transparent 30%),
    var(--card) !important;
}
.bv-titulo{font-size:clamp(28px, 7.6vw, 36px) !important; line-height:1.02 !important}
.bv-passos li::before{
  background:rgb(var(--tinta) / .06) !important; border:1px solid var(--hairline) !important;
  color:var(--text) !important; font-variant-numeric:tabular-nums;
}

/* ---------------------------------------------------------------------------
   15. CRIAR PLAYBACK
   As origens sao cartoes do sistema; o arquivo, que e o caminho principal,
   ganha a superficie e o icone mais fortes.
   --------------------------------------------------------------------------- */
#scr-create .card{padding:var(--space-4)}
/* No celular as duas origens voltam a ser cartoes do mesmo sistema: uma
   chapada e a outra emoldurada liam como duas telas coladas. */
@media (max-width:1023.98px){
  #scr-create > .card{
    padding:var(--space-4) !important; margin:0 0 var(--space-3) !important;
    background:var(--card); border:1px solid var(--hairline) !important;
    border-radius:var(--raio-cartao) !important; box-shadow:var(--elev-1);
  }
  #scr-create > .card::after{display:none !important}
  #scr-create .tela-hero .h-title{font-size:clamp(26px, 7.4vw, 32px)}
}
/* As duas acoes do Estudio sao do mesmo peso (o Estudio pode estar
   desligado): as duas no contorno do secundario. */
#cardPC .pc-acoes .btn, #btnPC{
  background:transparent !important; color:var(--text) !important;
  border:1px solid var(--hairline-strong) !important; box-shadow:none !important;
  border-radius:var(--raio-controle) !important; min-height:44px; height:auto !important;
}
#scr-create .fonte-principal{
  background:
    linear-gradient(180deg, rgb(var(--tinta) / .035), transparent 50%),
    var(--card-elevated);
  border-color:var(--hairline-strong);
}
#scr-create .fonte-principal .ic{background:var(--accent); color:var(--accent-foreground); border-color:transparent;
  box-shadow:var(--highlight-strong)}
#scr-create .fonte-principal .ic svg{stroke:currentColor}
.fonte-nome{font-weight:var(--weight-semibold)}

/* ---------------------------------------------------------------------------
   16. AJUDA
   Cada pergunta e uma linha de cartao com fio, e a aberta sobe um degrau.
   --------------------------------------------------------------------------- */
.aj-item{
  background:var(--card); border:1px solid var(--hairline) !important;
  border-radius:var(--raio-cartao) !important; box-shadow:var(--elev-1);
}
.aj-item[open]{background:var(--card-elevated); border-color:var(--hairline-strong) !important}
.aj-item > summary{font-weight:var(--weight-semibold)}

/* ---------------------------------------------------------------------------
   17. PARTIDA (boot)
   O simbolo sobre um halo de palco: luz creme por tras do G e a fumaca coral
   bem baixa, como o celular da pagina de venda antes de a musica comecar.
   --------------------------------------------------------------------------- */
#scr-boot{
  background:
    radial-gradient(34% 58% at 50% -4%, rgb(var(--tinta) / .07), transparent 72%),
    radial-gradient(180px 150px at 50% 50%, rgb(var(--tinta) / .05), transparent 70%),
    radial-gradient(80% 30% at 50% 104%, var(--fumaca-coral), transparent 70%),
    var(--bg);
}
#scr-boot .boot-spin{filter:drop-shadow(0 18px 40px rgb(var(--sombra) / .55))}
.boot-msg{color:var(--muted); letter-spacing:.01em}

/* ---------------------------------------------------------------------------
   18. O PALCO
   Sempre escuro. O nome da musica vira titulo da marca, e o rodape ganha o
   mesmo corpo do player.
   --------------------------------------------------------------------------- */
#scr-stage .stage-title{
  font-family:var(--font-display); font-weight:var(--weight-display);
  font-stretch:var(--stretch-display); letter-spacing:var(--tracking-brand);
  font-size:var(--text-lg); line-height:1.1;
}
@media (min-width:1024px){ #scr-stage .stage-title{font-size:var(--text-2xl)} }
#scr-stage .stage-tools button, #scr-stage .stage-close{
  background:rgb(var(--tinta) / .06); border:1px solid var(--hairline); border-radius:var(--raio-controle);
}

/* ---------------------------------------------------------------------------
   19. MOVIMENTO
   Quem pediu menos movimento fica sem o levantar do botao e sem transicao de
   brilho; o resto do app ja respeita a preferencia peca por peca.
   --------------------------------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  .btn, .rep-player, .app-nav-item::after{transition:none !important}
  .btn.primary:hover, .btn.b-save:hover{transform:none !important}
}

/* ---------------------------------------------------------------------------
   20. TRACO DE ICONE
   Um traco so, 2px, para os icones de linha do app. Havia 2, 2,2, 2,4 e 2,6
   lado a lado na mesma barra, e a diferenca lia como descuido. O ativo da
   barra de abas continua mais grosso de proposito (regra mais especifica).
   --------------------------------------------------------------------------- */
svg[stroke-width="2.2"], svg[stroke-width="2.4"], svg[stroke-width="2.6"]{stroke-width:2}
@media (min-width:1024px){
  #scr-create .fonte-principal .fonte-linha::after{border-radius:var(--raio-controle); box-shadow:var(--highlight-strong)}
}
/* As duas acoes do Estudio lado a lado, cada uma com metade da linha. */
#cardPC .pc-acoes{flex-wrap:nowrap}
#cardPC .pc-acoes .btn{flex:1 1 0; min-width:0; padding:10px var(--space-3) !important}