/* =============================================================================
   MINHA CONTA E ESTUDIO

   Folha propria de quatro coisas, e so delas:
     1. a tela Minha conta (#scr-conta, web/src/ui/conta.js);
     2. a tela do Estudio (#scr-estudio, web/src/ui/estudio.js);
     3. o convite do Estudio na home (#homeConvite);
     4. a troca de listas da home no celular, que voltou com a barra nova.

   Carregada depois de app.css e biblioteca.css. Usa os componentes que ja
   existem (.card, .btn, .sw, .tema-opcoes, .sync-lista) sem mudar o desenho
   deles: tudo aqui comeca com um seletor destas telas. Cor so por token
   (test_tema.py le esta folha tambem).
   ============================================================================= */


/* ============ 0. O QUE E COMUM AS DUAS TELAS ============ */

/* [hidden] vence o display das linhas e dos botoes destas telas. */
.conta [hidden], .estudio [hidden], .estudio-convite[hidden],
.sheet [hidden].conta-previa{display:none !important}

.conta, .estudio{
  width:100%; max-width:640px; margin-inline:auto;
  display:flex; flex-direction:column; gap:var(--space-6);
}
.conta-col, .estudio-col{display:contents}

.conta-topo .h-title, .estudio-topo .h-title{
  margin:0; font-size:clamp(30px, 8.4vw, 40px); line-height:var(--leading-display);
}
.estudio-topo .tela-sub{margin:var(--space-3) 0 0; max-width:56ch}

/* O SOBRETITULO DA MARCA: o traco coral e o rotulo em caixa alta, o mesmo do
   site ("PLAYBACK PARA QUEM CANTA AO VIVO"). */
.conta-olho{
  display:flex; align-items:center; gap:var(--space-2); margin:0 0 var(--space-2);
  font-family:var(--font-mono); font-size:var(--text-label); font-weight:var(--weight-medium);
  letter-spacing:var(--tracking-label); text-transform:uppercase; color:var(--muted);
}
.conta-olho::before{content:''; flex:none; width:14px; height:2px; border-radius:1px; background:var(--coral)}

/* Grupo com titulo: a tela se le por assunto, e nao como uma pilha de
   cartoes iguais. */
.conta-grupo{display:flex; flex-direction:column; gap:var(--space-3); min-width:0}
.conta-grupo-titulo, .estudio-titulo{
  margin:0; 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:var(--leading-tight); color:var(--text);
}
.conta-grupo > .card, .estudio .card{margin:0}
.conta-nota{margin:0; font-size:var(--text-sm); color:var(--muted); line-height:var(--leading-normal)}
.conta-nota b{color:var(--text); font-weight:var(--weight-medium)}
.conta-nota a, .conta-link{color:var(--accent-text); text-underline-offset:2px}
.conta-grupo > .conta-nota{padding-inline:var(--space-1)}

/* ---- linha de lista: rotulo, explicacao e acao ou seta ----
   Uma lista de linhas dentro de um cartao, como os ajustes de um telefone:
   cada linha e um alvo de 56 px, e a seta diz "abre outra coisa". */
.conta-lista{padding:0; overflow:hidden}
.conta-linha{
  display:flex; align-items:center; gap:var(--space-3); width:100%; min-height:56px;
  padding:var(--space-3) var(--space-4); margin:0;
  border:0; border-top:1px solid var(--line); border-radius:0; background:none;
  color:var(--text); font:inherit; text-align:left; text-decoration:none;
}
.conta-lista > :first-child{border-top:0}
button.conta-linha, a.conta-linha{cursor:pointer; transition:background var(--duration) var(--ease)}
button.conta-linha:hover, a.conta-linha:hover{background:rgb(var(--tinta) / .04)}
.conta-linha:focus-visible{outline:2px solid var(--ring); outline-offset:-2px}
.conta-linha-txt{flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:2px}
.conta-linha-txt b{font-size:var(--text-base); font-weight:var(--weight-semibold); overflow-wrap:anywhere}
.conta-linha-txt i{font-style:normal; font-size:var(--text-sm); color:var(--muted); line-height:var(--leading-snug)}
.conta-linha-txt i a{color:var(--accent-text)}
.conta-seta{flex:none; width:18px; height:18px; color:var(--muted)}
.conta-linha-nota{padding:0 var(--space-4) var(--space-4)}
.conta-linha + .conta-linha-nota{padding-top:0}
.conta-lista > .conta-linha-nota:first-child{padding-top:var(--space-4)}

.conta-ic{
  flex:none; width:40px; height:40px; border-radius:var(--radius-lg);
  display:grid; place-items:center; background:var(--card-elevated); color:var(--text);
}
.conta-ic svg{width:20px; height:20px}
.conta-aparelho[data-kind="pc"] .conta-ic{color:var(--accent-text)}
.conta-aparelho[data-vazio] .conta-ic{color:var(--muted)}
.conta-aparelho .btn{flex:none}

/* A aparencia e a escolha que mais se faz aqui: fica aberta, sem folha. */
.conta-linha-tema, .conta-linha-backup{flex-wrap:wrap}
.conta-linha-tema .conta-linha-txt{flex-basis:12rem}
.conta-linha-tema .tema-opcoes{flex:1 1 16rem; width:auto}
.conta-linha-botoes{display:flex; flex-wrap:wrap; gap:var(--space-2)}

@media (pointer:coarse){
  .conta .tema-opcoes button, .conta .btn.small, .estudio .btn.small,
  .estudio-convite .btn.small{min-height:44px}
}


/* ============ 1. MINHA CONTA ============ */

.conta-quem{
  display:flex; flex-wrap:wrap; align-items:baseline; gap:2px var(--space-2);
  margin:var(--space-2) 0 0; font-size:var(--text-sm); color:var(--muted); overflow-wrap:anywhere;
}
.conta-quem b{font-size:var(--text-md); font-weight:var(--weight-semibold); color:var(--text)}

/* ---- o cartao do alto ---- */
.conta-hero{
  position:relative; padding:var(--space-5); border-radius:var(--radius-2xl);
  background:var(--card); border:1px solid var(--border-strong);
}
.conta-hero-topo{display:flex; align-items:center; justify-content:space-between; gap:var(--space-3)}
.conta-hero-topo .conta-olho{margin:0}
.conta-plano{
  margin:var(--space-2) 0 var(--space-4);
  font-family:var(--font-display); font-weight:var(--weight-display);
  font-stretch:var(--stretch-display); letter-spacing:var(--tracking-brand);
  font-size:calc(44px * var(--fs)); line-height:var(--leading-display); color:var(--text);
  overflow-wrap:anywhere;
}

/* A situacao: um selo com ponto, e nao so cor de texto. */
.conta-chip{
  display:inline-flex; align-items:center; gap:6px; flex:none;
  padding:3px 10px; border-radius:var(--radius-full);
  font-size:var(--text-xs); font-weight:var(--weight-semibold); line-height:18px;
  color:var(--success); background:var(--success-bg); border:1px solid var(--success-border);
}
.conta-chip:empty{display:none}
.conta-chip::before{content:''; width:6px; height:6px; border-radius:50%; background:currentColor}
.conta-chip[data-estado="gratis"]{color:var(--accent-text); background:rgb(var(--coral-rgb) / .1); border-color:rgb(var(--coral-rgb) / .35)}
.conta-chip[data-estado="vencido"]{color:var(--destructive); background:var(--destructive-bg); border-color:var(--destructive-border)}

/* A ONDA DO PERIODO. Trinta e duas barras com o desenho da onda do logo
   (oito alturas que se repetem). Coral e o tempo que ja passou: o trecho que
   ja saiu do play. O resto, na cor do texto, e o que falta tocar. */
.conta-onda{display:flex; align-items:center; gap:3px; height:40px}
.conta-onda i{
  flex:1 1 0; min-width:2px; height:var(--h, 60%); border-radius:2px;
  background:rgb(var(--tinta) / .8);
  transition:background var(--duration-slow) var(--ease);
}
.conta-onda i[data-tocada]{background:var(--coral)}
.conta-onda i:nth-child(8n+1){--h:42%}
.conta-onda i:nth-child(8n+2){--h:83%}
.conta-onda i:nth-child(8n+3){--h:100%}
.conta-onda i:nth-child(8n+4){--h:58%}
.conta-onda i:nth-child(8n+5){--h:75%}
.conta-onda i:nth-child(8n+6){--h:100%}
.conta-onda i:nth-child(8n+7){--h:50%}
.conta-onda i:nth-child(8n+8){--h:33%}
.conta-prazo{margin:var(--space-3) 0 0; font-size:var(--text-md); font-weight:var(--weight-semibold); color:var(--text)}
.conta-offline{display:flex; gap:var(--space-2); margin:var(--space-1) 0 0; font-size:var(--text-sm); color:var(--muted); line-height:var(--leading-snug)}
.conta-hero[data-estado="vencido"] .conta-prazo{color:var(--destructive)}

.conta-hero-acoes{display:flex; flex-wrap:wrap; gap:var(--space-2); margin-top:var(--space-5)}
.conta-hero-acoes .btn{flex:1 1 12rem; min-height:48px; white-space:normal; text-align:center}
.conta-hero-acoes .btn.ghost{flex:0 1 auto}

/* O mes: quanto ja foi usado, em coral, como a onda. */
.conta-uso{margin-top:var(--space-5); padding-top:var(--space-4); border-top:1px solid var(--line)}
.conta-uso-texto{margin:0; font-size:var(--text-base); font-weight:var(--weight-semibold); color:var(--text)}
.conta-medidor{height:8px; margin:var(--space-2) 0; border-radius:var(--radius-full); background:rgb(var(--tinta) / .12); overflow:hidden}
.conta-medidor i{display:block; height:100%; width:var(--uso, 0%); min-width:0; border-radius:inherit; background:var(--coral);
  transition:width var(--duration-slow) var(--ease)}
.conta-medidor[data-nivel="cheio"] + .conta-nota{color:var(--warning)}

/* ---- assinatura e pagamento ---- */
.conta-oferta{padding:var(--space-5); min-width:0}
.conta-oferta > .conta-nota + .conta-nota{margin-top:var(--space-2)}
.conta-oferta > .conta-nota:last-child{margin-top:var(--space-4)}
.conta-oferta-titulo{margin:0 0 var(--space-1); font-size:var(--text-lg); line-height:var(--leading-snug); color:var(--text)}
.conta-subsecao{margin:var(--space-5) 0 var(--space-1); font-size:var(--text-xs); font-weight:var(--weight-semibold);
  color:var(--muted); text-transform:uppercase; letter-spacing:.06em}
.conta-opcoes{display:grid; gap:var(--space-3); margin-top:var(--space-4);
  grid-template-columns:repeat(auto-fit, minmax(min(100%, 180px), 1fr))}
.conta-opcoes:empty{display:none}
.conta-opcao{position:relative; display:flex; flex-direction:column; min-width:0; padding:var(--space-4);
  border:1px solid var(--line); border-radius:var(--radius-lg); background:var(--bg2)}
.conta-opcao[data-recomendado]{border-color:var(--ring)}
/* Nome em cima, preco grande embaixo: lado a lado, em tres colunas, o preco
   quebrava no meio do cartao. */
.conta-opcao-topo{display:flex; flex-direction:column; align-items:flex-start; gap:2px}
.conta-opcao-topo b{font-size:var(--text-md); font-weight:var(--weight-semibold); color:var(--text)}
.conta-opcao-preco{font-size:var(--text-xl); color:var(--text); font-variant-numeric:tabular-nums; white-space:nowrap}
.conta-opcao-preco:empty{display:none}
.conta-selo{position:absolute; top:-10px; left:var(--space-4); padding:1px 8px; line-height:18px;
  font-size:var(--text-2xs); font-weight:var(--weight-semibold); color:var(--text); background:var(--card);
  border:1px solid var(--ring); border-radius:var(--radius-full); text-transform:uppercase; letter-spacing:.04em}
.conta-opcao-ciclo{margin:2px 0 0; font-size:var(--text-xs); color:var(--muted)}
.conta-mudancas{margin:var(--space-3) 0 var(--space-4); padding-left:18px; display:grid; gap:4px;
  font-size:var(--text-sm); color:var(--muted); line-height:var(--leading-snug)}
.conta-opcao > .conta-nota{margin-top:var(--space-2); font-size:var(--text-xs)}
.conta-opcao > .btn.cheio{margin-top:auto; white-space:normal; text-align:center; min-height:44px}

/* ---- rodape: sair e excluir ---- */
.conta-rodape{display:flex; flex-direction:column; gap:var(--space-3); padding-top:var(--space-2)}
.conta-rodape > .btn{min-height:48px}
.conta-excluir{padding:var(--space-3) var(--space-4); border:1px solid var(--line); border-radius:var(--radius-xl)}
.conta-excluir summary{cursor:pointer; min-height:24px; color:var(--muted); font-size:var(--text-sm); font-weight:var(--weight-medium)}
.conta-excluir[open] summary{color:var(--text); margin-bottom:var(--space-2)}
.conta-excluir .btn.cheio{min-height:44px}

/* Folhas de restaurar backup (bkConfirm). */
.conta-previa{font-size:var(--text-sm); color:var(--muted); line-height:var(--leading-snug); margin:0 0 var(--space-2)}
.conta-previa-ok{color:var(--success)}

/* No celular a pagina e uma coluna so, na ordem de quem chega: plano,
   pagamento, musicas, aparelhos, preferencias, ajuda. */
.conta-topo{order:0}
.conta-hero{order:1}
#contaAssinatura{order:2}
.conta-grupo[aria-labelledby="contaTitMusicas"]{order:3}
.conta-grupo[aria-labelledby="contaTitAparelhos"]{order:4}
.conta-grupo[aria-labelledby="contaTitPref"]{order:5}
#contaAjuda{order:6}
.conta-rodape{order:7}


/* ============ 2. ESTUDIO ============ */

.estudio-estado{display:flex; align-items:flex-start; gap:var(--space-4); padding:var(--space-5)}
.estudio-estado h2{margin:0; font-size:var(--text-lg); font-weight:var(--weight-semibold); color:var(--text)}
.estudio-estado p{margin:var(--space-1) 0 0; font-size:var(--text-sm); color:var(--muted); line-height:var(--leading-snug)}
.estudio-estado-txt{min-width:0}
.estudio-luz{
  flex:none; width:12px; height:12px; margin-top:6px; border-radius:50%;
  background:var(--muted2); box-shadow:0 0 0 4px rgb(var(--tinta) / .08);
}
.estudio-estado[data-estado="aberto"]{border-color:var(--success-border)}
.estudio-estado[data-estado="aberto"] .estudio-luz{background:var(--success); box-shadow:0 0 0 4px var(--success-bg);
  animation:estudio-pulso 1.8s var(--ease) infinite alternate}
.estudio-estado[data-estado="nunca"] .estudio-luz{background:transparent; box-shadow:inset 0 0 0 2px var(--muted2)}
@keyframes estudio-pulso{from{box-shadow:0 0 0 2px var(--success-bg)}to{box-shadow:0 0 0 7px var(--success-bg)}}

.estudio-link, .estudio-baixar{padding:var(--space-5)}
.estudio-link .estudio-titulo, .estudio-baixar .estudio-titulo{margin-bottom:var(--space-2)}
.estudio-link-linha{display:flex; gap:var(--space-2); margin-top:var(--space-4)}
.estudio-link-linha .field{flex:1 1 auto; min-width:0; min-height:48px}
.estudio-link-linha .btn{flex:none; min-height:48px; padding-inline:var(--space-5)}
.estudio-msg{margin:var(--space-2) 0 0; font-size:var(--text-sm); color:var(--warning); line-height:var(--leading-snug)}
.estudio-msg[data-ok="sim"]{color:var(--success)}

.estudio-fila{margin:0; padding:var(--space-4)}

.estudio-instaladores{display:flex; flex-direction:column; gap:var(--space-2); margin:var(--space-4) 0}
.estudio-instaladores:empty{display:none}
.estudio-inst{
  display:flex; flex-direction:column; align-items:flex-start; justify-content:center; gap:2px;
  width:100%; height:auto; min-height:56px; padding:10px var(--space-4);
  text-align:left; text-decoration:none; white-space:normal;
}
.estudio-inst b{font-size:var(--text-md); font-weight:var(--weight-semibold)}
.estudio-inst span{font-size:var(--text-xs); font-weight:var(--weight-normal)}
#estSemInstalador{margin:var(--space-4) 0; padding:var(--space-3) var(--space-4); border-radius:var(--radius-lg);
  background:var(--warning-bg); border:1px solid var(--warning-border); color:var(--text)}

/* No celular: o endereco para abrir no computador, com o botao de copiar. */
.estudio-endereco{
  display:flex; align-items:center; gap:var(--space-3); margin-top:var(--space-3);
  padding:var(--space-2) var(--space-2) var(--space-2) var(--space-4);
  border:1px dashed var(--border-hover); border-radius:var(--radius-lg);
}
.estudio-endereco-url{flex:1 1 auto; min-width:0; font-family:var(--font-mono); font-size:var(--text-sm);
  color:var(--text); overflow-wrap:anywhere; user-select:all; -webkit-user-select:all}
.estudio-endereco .btn{flex:none}

/* COMO FUNCIONA: tres passos, cada um com a onda enchendo de coral. */
.estudio-passos{list-style:none; margin:0; padding:var(--space-1) var(--space-5)}
.estudio-passos li{
  display:grid; grid-template-columns:52px minmax(0,1fr); column-gap:var(--space-4); row-gap:2px;
  align-items:center; padding:var(--space-4) 0; border-top:1px solid var(--line);
}
.estudio-passos li:first-child{border-top:0}
.estudio-passos li > b{grid-column:2; font-size:var(--text-base); font-weight:var(--weight-semibold); color:var(--text)}
.estudio-passos li > span:last-child{grid-column:2; font-size:var(--text-sm); color:var(--muted); line-height:var(--leading-snug)}
.estudio-mini-onda{grid-row:1 / span 2; display:flex; align-items:center; gap:2px; height:24px; width:52px}
.estudio-mini-onda i{flex:1 1 0; height:var(--h, 60%); border-radius:1px; background:rgb(var(--tinta) / .3)}
.estudio-mini-onda i:nth-child(1){--h:42%}
.estudio-mini-onda i:nth-child(2){--h:83%}
.estudio-mini-onda i:nth-child(3){--h:100%}
.estudio-mini-onda i:nth-child(4){--h:58%}
.estudio-mini-onda i:nth-child(5){--h:75%}
.estudio-mini-onda i:nth-child(6){--h:100%}
.estudio-mini-onda i:nth-child(7){--h:50%}
.estudio-mini-onda i:nth-child(8){--h:33%}
.estudio-passos li[data-passo="1"] .estudio-mini-onda i:nth-child(-n+3),
.estudio-passos li[data-passo="2"] .estudio-mini-onda i:nth-child(-n+6),
.estudio-passos li[data-passo="3"] .estudio-mini-onda i{background:var(--coral)}

.estudio-ajuda{
  align-self:flex-start; min-height:44px; padding:0 var(--space-1); border:0; background:none;
  font:inherit; font-size:var(--text-sm); text-decoration:underline; cursor:pointer;
}

/* No celular: estado, link, a caminho, baixar, como funciona. */
.estudio-topo{order:0}
.estudio-estado{order:1}
.estudio-link{order:2}
#estFilaBloco{order:3}
.estudio-baixar{order:4}
.estudio-col-b > .conta-grupo{order:5}


/* ============ 3. O CONVITE DO ESTUDIO NA HOME ============ */

.estudio-convite{
  display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center;
  column-gap:var(--space-3); row-gap:var(--space-2);
  margin:0 0 var(--space-4); padding:var(--space-3) var(--space-2) var(--space-3) var(--space-4);
  border:1px solid var(--border-strong); border-radius:var(--radius-xl); background:var(--card);
}
.estudio-convite-ic{
  width:40px; height:40px; border-radius:var(--radius-lg); display:grid; place-items:center;
  background:rgb(var(--coral-rgb) / .12); color:var(--accent-text);
}
.estudio-convite-ic svg{width:20px; height:20px}
.estudio-convite-txt{display:flex; flex-direction:column; gap:2px; font-size:var(--text-sm); color:var(--muted); line-height:var(--leading-snug)}
.estudio-convite-txt b{font-size:var(--text-base); font-weight:var(--weight-semibold); color:var(--text)}
.estudio-convite > .btn{grid-column:2; grid-row:2; justify-self:start}
.estudio-convite-x{
  grid-column:3; grid-row:1; align-self:start;
  width:44px; height:44px; display:grid; place-items:center;
  border:0; border-radius:var(--radius-full); background:none; color:var(--muted); cursor:pointer;
}
.estudio-convite-x:hover{color:var(--text); background:rgb(var(--tinta) / .06)}
.estudio-convite-x svg{width:16px; height:16px}


/* O cartao "a caminho" flutuante repete a lista que a tela do Estudio ja
   mostra no proprio corpo: nela, ele sai. */
#app:has(#scr-estudio.active) .sync-card{display:none}


/* ============ 4. A BARRA NOVA E A TROCA DE LISTAS NO CELULAR ============
   A barra do celular passou a ser Inicio, Criar playback, Estudio e Minha
   conta (index.html, .app-nav). "Musicas" e "Repertorios" eram dois itens da
   barra que abriam a MESMA tela; viraram um so, e a troca entre as duas listas
   volta para as abas do proprio cartao, que no celular estavam escondidas
   justamente por repetirem a barra. */
@media (max-width:1023.98px){
  #scr-home .abas{display:flex}
}


/* ============ 5. MONITOR (>= 1024 px) ============
   Duas colunas que se leem de cima para baixo, cada uma com a sua altura: a
   da esquerda e o resumo (o plano, os aparelhos, as preferencias), a da
   direita e o que se faz (pagar, as musicas, a ajuda). Sem grade de linhas,
   um cartao alto nao abre buraco no vizinho. */
@media (min-width:1024px){
  #scr-conta > .header, #scr-estudio > .header{display:none}
  #app > #scr-conta.active > .conta,
  #app > #scr-estudio.active > .estudio{grid-column:1 / -1}
  .conta, .estudio{
    max-width:1120px; display:grid; align-items:start;
    grid-template-columns:minmax(0, 5fr) minmax(0, 7fr); gap:var(--space-8) var(--space-8);
  }
  .estudio{grid-template-columns:minmax(0, 7fr) minmax(0, 5fr)}
  .conta-topo, .estudio-topo, .conta-rodape{grid-column:1 / -1}
  .conta-col, .estudio-col{display:flex; flex-direction:column; gap:var(--space-6); min-width:0}
  .conta-topo .h-title, .estudio-topo .h-title{font-size:clamp(36px, 3vw, 56px)}
  .conta-plano{font-size:calc(52px * var(--fs))}
  .conta-hero{padding:var(--space-6)}
  .conta-rodape{flex-direction:row; align-items:flex-start; gap:var(--space-4);
    padding-top:var(--space-4); border-top:1px solid var(--line)}
  .conta-rodape > .btn{flex:0 0 auto; padding-inline:var(--space-6)}
  .conta-excluir{flex:1 1 auto; max-width:640px}

  /* O convite mora no alto da home, a direita da saudacao: a celula que era do
     botao de criar (escondido no monitor, a barra de topo faz o papel dele). */
  #app > #scr-home.active > .estudio-convite{grid-column:2; grid-row:1; align-self:end; justify-self:end;
    width:min(560px, 46vw); margin:0}
  .estudio-convite{grid-template-columns:auto minmax(0,1fr) auto auto}
  .estudio-convite > .btn{grid-column:3; grid-row:1; justify-self:end}
  .estudio-convite-x{grid-column:4; align-self:center}
}
@media (min-width:2400px){
  .conta, .estudio{max-width:1240px}
}

@media (prefers-reduced-motion:reduce){
  .conta-onda i, .conta-medidor i, .conta-linha{transition:none}
  .estudio-estado[data-estado="aberto"] .estudio-luz{animation:none}
}