/* =========================================================================
   tema-novo.css — a aplicação do sistema.

   Redefine as classes que JÁ existem (.bt, .cx, .card, .topo, .grade, .cfg,
   .plano, .abas, .abascfg…). Nenhum nome novo de classe foi criado: tudo
   aqui casa com marcação que já está no HTML de hoje.

   INCLUSÃO (obrigatoriamente NESTA ordem, e por último no <head>):
       <link rel="stylesheet" href="/web/sistema.css">
       <link rel="stylesheet" href="/web/tema-novo.css">
   Estes dois arquivos usam a MESMA especificidade das regras que
   substituem — quem vem depois ganha. Se o <link> entrar antes do <style>
   interno da página, metade do arquivo não tem efeito.

   ---- o que muda de layout, e por quê ----
   A referência tem barra lateral fixa à esquerda. Isso é um padrão de
   DESKTOP: 264px de rail num iPhone SE de 375 sobraria 111px pra
   biblioteca. Então o mesmo componente muda de forma três vezes:

     ≥1080px   .topo vira a barra lateral (grid de 2 colunas em #lista).
     768–1079  .topo continua a barra de topo horizontal de hoje, só que
               em superfície sólida com fio embaixo (a lateral não cabe
               junto com uma grade de cartões legível).
     <768px    .topo vira cabeçalho compacto NO TOPO e a navegação
               (.abas — as playlists) desgruda e vira BARRA INFERIOR fixa,
               que é onde o polegar alcança. Alvos de 44px, respeitando
               env(safe-area-inset-bottom) do iPhone.

   Barra inferior e não gaveta: gaveta precisa de um botão hambúrguer que
   não existe no HTML, e esconder navegação atrás de um toque a mais é
   exatamente o que se paga caro em app de festa, passando de mão em mão.
   ========================================================================= */

/* =========================================================================
   0. APELIDOS DE VARIÁVEL QUE O CÓDIGO PEDE E NINGUÉM DEFINIU
   `--linha`, `--cartao`, `--tx`, `--rosa`, `--verde` aparecem em .btncal,
   .calres e em #pconfig .cfg, mas não existem em nenhum :root — a
   propriedade inteira era descartada (o botão "calibrar" ficava sem fundo
   e o divisor das configurações caía num #8881 solto). São claramente
   erros de digitação de --line/--cx/--fg/--accent/--good.
   No `#tela` o apelido é resolvido DE NOVO: declarado só na raiz ele chegava
   no palco já resolvido com a palette do tema claro.
   ========================================================================= */
:root, #tela{
  --linha:var(--line);
  --cartao:var(--cx2);
  --tx:var(--fg);
  --rosa:var(--accent);
  --verde:var(--good);
}

/* =========================================================================
   1. FUNDAMENTOS
   ========================================================================= */
body{
  background:var(--bg);
  color:var(--fg);
  font-family:var(--fonte);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

/* Foco: anel violeta, mesma regra nas duas partes do produto. Fica na
   cor de marca porque ela passa 4,5:1 nos dois temas — testado. */
:where(a,button,input,select,textarea,[tabindex]:not([tabindex="-1"])):focus-visible,
a:focus-visible,button:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:2px;
  /* SEM `border-radius` aqui. Mexer no raio no :focus-visible fazia o
     controle MUDAR DE FORMA ao receber foco — o select ia de 12px pra 6px
     quando o popover abria e punha o foco nele. O `outline` do navegador já
     acompanha o raio do próprio elemento; não precisa de ajuda. */
}

h1{letter-spacing:var(--tr-titulo);line-height:var(--lh-apertada);text-wrap:balance}
h2{letter-spacing:-.022em;text-wrap:balance}

/* Título com a segunda linha em roxo — o herói da referência. Sai o texto
   em degradê recortado, que borra em tela de baixa densidade e some no
   modo de alto contraste do sistema. */
h1 em{
  font-style:normal;
  background:none;-webkit-background-clip:border-box;background-clip:border-box;
  color:var(--accent);-webkit-text-fill-color:var(--accent);
}

/* =========================================================================
   2. BOTÕES
   Chapado, canto de 12px, um fio de luz no topo. Nada de degradê rosa→roxo
   com halo de 26px: o halo era a assinatura de página automática e, no
   tema claro, vazava uma auréola colorida por fora do cartão branco.
   ========================================================================= */
.bt{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--e2);
  background:var(--btn-a);color:#fff;
  padding:var(--e3) var(--e6);
  border-radius:var(--r3);
  font-weight:var(--p-forte);font-size:var(--t-base);line-height:1.2;
  text-decoration:none;text-align:center;border:0;cursor:pointer;
  box-shadow:var(--luz-topo);
  transition:background var(--transicao),transform .1s ease,box-shadow var(--transicao);
}
.bt:hover{background:color-mix(in srgb,var(--btn-a),#fff 12%)}
.bt:active{transform:translateY(1px);box-shadow:inset 0 1px 3px #00000045}
.bt:disabled,.bt[disabled]{opacity:.55;cursor:not-allowed;transform:none}
.bt.sm{padding:var(--e2) var(--e5);font-size:var(--t-md)}

/* Secundário: superfície branca (ou o cartão escuro) com fio de contorno —
   o "botão branco com borda" ao lado do sólido, na referência. */
.bt.sec{
  background:var(--cx);color:var(--fg);
  border:1px solid var(--borda);
  box-shadow:none;font-weight:var(--p-medio);
}
.bt.sec:hover{background:var(--cx3);border-color:var(--accent)}

/* A pílula grande do palco (tela "Cantar", fim de música) continua pílula:
   é um alvo de mira à distância, não um botão de formulário. */
.modal .bt,.pausado .bt{border-radius:var(--rp);padding:var(--e4) var(--e8);font-size:var(--t-lg)}

.btnovo{
  background:var(--btn-a);color:#fff;
  padding:var(--e3) var(--e5);border-radius:var(--r3);
  font-size:var(--t-md);font-weight:var(--p-forte);
  box-shadow:var(--luz-topo);
  transition:background var(--transicao),transform .1s ease;
}
.btnovo:hover{background:color-mix(in srgb,var(--btn-a),#fff 12%)}
.btnovo:active{transform:translateY(1px)}

.btic{
  width:var(--toque);height:var(--toque);border-radius:var(--rp);
  background:var(--cx2);border:1px solid var(--line);color:var(--fg);
  display:grid;place-items:center;font-size:var(--t-lg);
  transition:background var(--transicao),border-color var(--transicao);
}
.btic:hover{background:var(--cx3);border-color:var(--borda)}
.btic.lig{background:var(--btn-a);color:#fff;border-color:var(--btn-a)}

.btarq,.btcuringa,.btncal,.ed-cab button{
  background:var(--cx2);border:1px solid var(--borda);border-radius:var(--r2);
  color:var(--fg);transition:border-color var(--transicao),background var(--transicao);
}
.btarq:hover,.btcuringa:hover:not([disabled]),.btncal:hover,.ed-cab button:hover{
  border-color:var(--accent);background:var(--cx3);color:var(--fg);
}

/* =========================================================================
   3. SUPERFÍCIES — cartão branco, canto 16px, sombra muito suave,
   borda quase invisível. No escuro a sombra não separa nada, então quem
   separa é a superfície mais clara + o fio de luz no topo.
   ========================================================================= */
.cx{
  background:var(--cx);
  border:1px solid var(--line);
  border-radius:var(--r4);
  box-shadow:var(--sombra-cartao),var(--luz-topo);
  padding:var(--e6);
}
/* o .cx do app é um painel modal: canto um degrau maior e sombra de painel */
.painel .cx,.ajudateclas .cx{
  border-radius:var(--r5);
  padding:var(--e6) var(--e6) var(--e7);
  box-shadow:var(--sombra),var(--luz-topo);
}
.painel{background:#0b0b1cd1;backdrop-filter:blur(18px)}
:root[tema=claro] .painel,:root[data-tema=claro] .painel{background:#241f3aa3}

.cx h3{font-size:var(--t-xl);font-weight:var(--p-negrito);letter-spacing:-.02em}
.cx .sub{color:var(--dim);font-size:var(--t-md)}

.card{border-radius:var(--r4);transition:transform .16s ease}
.capa{
  border-radius:var(--r3);
  background:var(--cx);
  box-shadow:var(--sombra-capa);
}
.job,.aviso-t,.menup,.previa-arq,.galeria-av,.placarfesta{
  background:var(--cx);border:1px solid var(--line);border-radius:var(--r4);
  box-shadow:var(--sombra-cartao);
}
.obs,.est-c,.est-l,.est-n,.est-graf,.mz,.ed-f,.frases div{
  background:var(--cx2);border:1px solid var(--line);border-radius:var(--r3);
}

/* =========================================================================
   4. CAMPOS
   ========================================================================= */
.campo input,.cfg select,.nomear input,.nomear select,.selperfil,#busca{
  background:var(--input-bg);
  border:1px solid var(--line);
  color:var(--fg);
  border-radius:var(--r2);
  outline:none;
  transition:border-color var(--transicao),box-shadow var(--transicao);
}
.campo input:focus,.cfg select:focus,.nomear input:focus,.nomear select:focus,
.selperfil:focus,#busca:focus{
  border-color:var(--accent);
  box-shadow:0 0 0 3px var(--ativo-fundo);
}
#busca,.selperfil{border-radius:var(--rp);padding:var(--e2) var(--e4)}
.selperfil.ativo{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}
.cfgbusca{
  background:var(--input-bg);border:1px solid var(--line);border-radius:var(--r3);
}
.cfgbusca:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px var(--ativo-fundo)}
.erro{background:var(--erro-bg);border:1px solid var(--erro-border);
  color:var(--erro-fg);border-radius:var(--r2)}
.ok{background:var(--ok-bg);border:1px solid var(--ok-border);
  color:var(--good);border-radius:var(--r2)}

/* =========================================================================
   5. BARRA LATERAL / BARRA DE TOPO / BARRA INFERIOR
   Um só elemento (.topo) em três formas. Ver a nota no cabeçalho.
   ========================================================================= */

/* --- comum aos três tamanhos --- */
/* `header.topo`, não `.topo` solto: a página de vendas tem um MOCK do player
   com <div class="topo"> dentro de um cartão que é sempre escuro. A regra
   abaixo estava pintando aquela barra de branco no tema claro — 3,34:1 de
   contraste, na primeira tela do produto. O app usa <header>; o mock, <div>. */
header.topo{
  background:var(--cx);
  border-bottom:1px solid var(--line);
  gap:var(--e4);
}
header.topo h1{font-weight:var(--p-negrito);letter-spacing:-.025em}
header.topo h1 span{
  background:linear-gradient(96deg,var(--marca),var(--accent2));
  -webkit-background-clip:text;background-clip:text;color:transparent;
  -webkit-text-fill-color:transparent;
}
header.topo .cnt{color:var(--dim);font-size:var(--t-md)}

/* cartão do usuário no rodapé da lateral (é o .conta que já existe) */
.conta{
  background:var(--cx2);border:1px solid var(--line);border-radius:var(--r3);
  padding:var(--e3);gap:var(--e2);flex-wrap:wrap;
}
.conta a{color:var(--fg);font-weight:var(--p-forte);text-decoration:none}
.conta a:hover{color:var(--accent)}
.conta .cotinha{
  background:var(--ativo-fundo);border:1px solid var(--selo-borda);
  color:var(--ativo-fg);border-radius:var(--rp);font-weight:var(--p-forte);
}
.conta .cotabarra{
  width:100%;height:5px;border-radius:999px;overflow:hidden;
  background:var(--line);
}
.conta .cotabarra b{
  display:block;height:100%;border-radius:inherit;
  background:linear-gradient(90deg,var(--accent2),var(--accent));
  transition:width .3s ease;
}
.conta .subirplano{
  width:100%;text-align:center;padding:7px 10px;border-radius:var(--r2);
  /* --btn-a e NÃO --accent2: o próprio sistema.css avisa que accent2 é cor
     de TEXTO e degradê, não de fundo com branco em cima. Estava dando
     2,72:1; com --btn-a dá 5,78:1, número que o sistema já traz medido. */
  background:var(--btn-a);color:#fff;font-size:var(--t-sm);
}
.conta .subirplano:hover{color:#fff;filter:brightness(1.08)}

/* -------------------------------------------------------------------------
   Navegação da lateral (#latnav).
   Só existe onde existe lateral (≥1080px). Abaixo disso ela ia virar uma
   fileira que rola na horizontal, escondendo 6 dos 8 itens — e duplicando o
   #filtro, que já está logo ali e faz exatamente a mesma coisa numa linha só.
   ------------------------------------------------------------------------- */
.lat-nav{display:none}
.lat-nav button{
  display:inline-flex;align-items:center;gap:var(--e2);flex:0 0 auto;
  min-height:var(--toque);padding:0 var(--e3);
  background:transparent;border:1px solid transparent;border-radius:var(--rp);
  color:var(--dim);font:inherit;font-weight:var(--p-forte);
  font-size:var(--t-md);white-space:nowrap;cursor:pointer;
  transition:color .12s ease,background-color .12s ease;
}
.lat-nav button .ic{width:19px;height:19px;flex:0 0 auto}
.lat-nav button:hover{color:var(--fg)}
.lat-nav button.sel{background:var(--ativo-fundo);color:var(--ativo-fg)}
.lat-nav button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
/* MAIS PRESENÇA NO CLARO. O contraste do `--dim` no branco já passava (7,1:1
   medido), mas cinza claro sobre branco LÊ como apagado mesmo passando na
   régua — foi a queixa "as coisas estão muito apagadas ainda". Aqui a lateral
   usa o tom forte, que é o mesmo do texto principal com um passo de alívio,
   e o ícone acompanha. No escuro nada muda: lá o `--dim` já tem presença.
   Isto é escolha de design, não conserto de contraste. */
:root[tema=claro] .lat-nav button,
:root[data-tema=claro] .lat-nav button{color:var(--forte)}
:root[tema=claro] .lat-nav button .ic,
:root[data-tema=claro] .lat-nav button .ic{opacity:.92}
/* fio separando o grupo de navegar do grupo de agir (Enviar/Planos/Config) */
.lat-fio{display:none;height:1px;background:var(--line);margin:var(--e2) var(--e3)}

/* a estrela ao lado do nome, como na inspiração */
.marca h1{display:flex;align-items:center;gap:var(--e2)}
.marca-ic{display:inline-flex;flex:0 0 auto}
.marca-ic .ic{width:22px;height:22px}

/* os quatro ícones da barra, numa fileira só */
.btic-fila{display:flex;gap:var(--e2);align-items:center}

/* `.idiomasel` entra JUNTO, não numa regra própria: as duas pílulas ficam
   coladas na barra do site e com fundos diferentes (--cx2 x --input-bg) a
   emenda aparecia. Uma regra, dois seletores — não duas regras iguais. */
.temasel,.idiomasel{
  background:var(--cx2);border:1px solid var(--line);
  border-radius:var(--rp);padding:3px;
}
.temasel button{border-radius:var(--rp);color:var(--dim)}
/* pelo mesmo motivo, o item ATIVO dos dois tem a mesma pílula. Medido:
   --ativo-fg sobre --ativo-fundo dá 7,02:1 no escuro e 6,57:1 no claro. */
.temasel button.sel,.idiomasel a[aria-current]{
  background:var(--ativo-fundo);color:var(--ativo-fg)}
.temasel button:hover:not(.sel){color:var(--fg)}

/* -------------------------------------------------------------------------
   ≥1080px — a lateral fixa da referência.
   #lista vira grade de duas colunas; .topo ocupa a coluna da esquerda
   inteira e gruda (sticky) enquanto a biblioteca rola.
   O Modo TV está de fora de propósito: lá a pessoa está a 3 metros e a
   tela é uma coluna só de cartões grandes — rail ali é ruído.
   ------------------------------------------------------------------------- */
@media (min-width:1080px){
  body:not(.modo-tv) #lista.screen.on{
    display:grid;
    grid-template-columns:var(--lateral) minmax(0,1fr);
    grid-template-rows:auto auto auto minmax(0,1fr);
    grid-template-areas:
      "lateral barra"
      "lateral abas"
      "lateral cats"
      "lateral grade";
    align-content:start;
    padding-bottom:0;
  }
  body:not(.modo-tv) #lista > .topo{grid-area:lateral}
  body:not(.modo-tv) #lista > .barra-topo{grid-area:barra}
  body:not(.modo-tv) #lista > .abas{grid-area:abas}
  body:not(.modo-tv) #lista > .abascat{grid-area:cats}
  body:not(.modo-tv) #lista > .grade{grid-area:grade}

  body:not(.modo-tv) #lista > .topo{
    align-self:start;
    height:100dvh;max-height:100dvh;
    overflow-y:auto;overscroll-behavior:contain;
    display:flex;flex-direction:column;flex-wrap:nowrap;
    align-items:stretch;justify-content:flex-start;
    gap:var(--e5);
    padding:var(--e6) var(--e4) var(--e4);
    background:var(--cx);
    border-bottom:0;
    border-right:1px solid var(--line);
  }
  body:not(.modo-tv) #lista > .topo .marca{
    display:flex;flex-direction:column;align-items:flex-start;gap:2px;
  }
  body:not(.modo-tv) #lista > .topo h1{font-size:var(--t-xl)}

  /* Barra de cima: uma fileira só, na largura do conteúdo. A busca estica,
     o resto fica no tamanho natural — igual à inspiração, onde busca e
     "Enviar música" dividem a barra e nada disso mora na lateral. */
  body:not(.modo-tv) #lista > .barra-topo{
    /* nowrap: com wrap o seletor de tema caía sozinho numa segunda linha e a
       barra ficava com cara de sobra. Quem cede espaço é a busca. */
    display:flex;flex-wrap:nowrap;align-items:center;gap:var(--e2);
    padding:var(--e5) var(--e7) var(--e2);
    margin:0;border-bottom:0;
  }
  body:not(.modo-tv) #lista > .barra-topo > #busca{
    flex:1 1 160px;min-width:120px;width:auto;margin:0;
    min-height:var(--toque);
  }
  body:not(.modo-tv) #lista > .barra-topo > .temasel{flex:0 0 auto}
  body:not(.modo-tv) #lista > .barra-topo > .selperfil{
    flex:0 0 auto;min-height:var(--toque);max-width:none;width:auto;
  }
  /* empurra ação e ícones pra direita, como na inspiração */
  body:not(.modo-tv) #lista > .barra-topo > .btnovo{
    margin-left:auto;min-height:var(--toque);flex:0 0 auto;
  }

  /* Na lateral a navegação é uma coluna de linhas cheias: ícone à esquerda,
     rótulo, e o item ativo numa faixa arredondada com um fio violeta na
     borda — é assim que a inspiração marca onde você está. */
  body:not(.modo-tv) #lista > .topo .lat-nav{
    display:flex;flex-direction:column;align-items:stretch;
    gap:2px;margin:calc(var(--e2) * -1) 0 0;
  }
  body:not(.modo-tv) #lista > .topo .lat-nav button{
    width:100%;justify-content:flex-start;position:relative;
    padding:0 var(--e3);border-radius:var(--r2);
  }
  body:not(.modo-tv) #lista > .topo .lat-nav button.sel::before{
    content:"";position:absolute;left:0;top:22%;bottom:22%;
    width:3px;border-radius:0 3px 3px 0;background:var(--accent);
  }
  body:not(.modo-tv) #lista > .topo .lat-fio{display:block}

  /* cartão do plano colado no pé da lateral, como na inspiração.
     Sem sticky: é filho direto da coluna flex, então `margin-top:auto`
     encosta no pé quando sobra espaço — e escorre junto com o resto quando
     a lateral fica mais alta que a tela, em vez de cobrir o que vem antes. */
  body:not(.modo-tv) #lista > .topo > .conta{
    margin-top:auto;flex:0 0 auto;
    background:var(--cx2);border:1px solid var(--line);
  }

  body:not(.modo-tv) #lista > .abas{padding:var(--e5) var(--e7) var(--e3)}
  body:not(.modo-tv) #lista > .abascat{padding:0 var(--e7) var(--e3)}
  body:not(.modo-tv) #lista > .grade{padding:var(--e2) var(--e7) var(--e9)}
}

/* -------------------------------------------------------------------------
   768–1079px — barra de topo horizontal. A lateral de 264px aqui espremeria
   a grade pra duas colunas de cartão; melhor a barra cheia.
   ------------------------------------------------------------------------- */
@media (min-width:768px) and (max-width:1079px){
  /* ⚠️ `header.topo`, igual a' regra base la' em cima — e pelo MESMO motivo.
     Solto, o seletor tambem pega o <div class="topo"> do MOCK do player na
     pagina de vendas, que e' um aparelho sempre escuro: --cx no tema claro e'
     branco puro e o "AO VIVO / MODO AFINACAO" (#8b8b9e, 10,5px) caia pra
     3,34:1. Medido em 768–1079 nas tres linguas; acima de 1080 esta regra nao
     vale e o mesmo texto dava 5,67:1 — foi essa a pista. */
  header.topo{
    padding:var(--e5) var(--e6) var(--e4);
    background:var(--cx);
    box-shadow:var(--s1);
  }
  .grade{padding:var(--e3) var(--e6) var(--e9)}
  .abas,.abascat{padding-left:var(--e6);padding-right:var(--e6)}
}

/* -------------------------------------------------------------------------
   <768px — cabeçalho compacto em cima, navegação embaixo.
   .abas (as playlists) desgruda do fluxo e vira barra inferior fixa.
   ------------------------------------------------------------------------- */
@media (max-width:767px){
  /* ⚠️ `header.topo`: a mesma armadilha do mock, na pior das tres faixas.
     Aqui o fundo era --bg (#f6f6fa no claro) e o texto do mock media 3,15:1 —
     e ainda ganhava padding e um `border-bottom` que o aparelho nao tem. */
  header.topo{
    padding:var(--e4) var(--e3) var(--e3);
    gap:var(--e3);row-gap:var(--e3);
    background:var(--bg);
    border-bottom:1px solid var(--line);
  }
  .topo .marca{flex:1 1 100%}
  .topo h1{font-size:22px}
  .topo .ferramentas{flex:1 1 100%;justify-content:flex-start;gap:var(--e2)}
  .topo .ferramentas > #busca{
    flex:1 1 100%;width:auto;margin-left:0;order:-1;min-height:var(--toque);
  }
  /* Os seletores dividem a linha em vez de cada um pedir a sua: no iPhone 14
     o cabeçalho media 280px de 844 — um terço da tela sem uma música à
     vista. Com isto (e com as playlists indo pro rodapé) a primeira capa
     sobe pra dentro do primeiro terço. `min-width:0` porque o padrão
     `auto` do flex impede o <select> de encolher abaixo do texto da opção
     mais longa; o próprio select corta com reticências, não vaza. */
  .topo .ferramentas > .selperfil{
    flex:1 1 92px;min-width:0;max-width:none;
  }
  .topo .ferramentas > .btnovo{flex:1 1 auto}
  .grade{padding:var(--e2) var(--e3) var(--e6)}

  /* --- a barra inferior --- */
  #lista.screen.on{
    padding-bottom:calc(112px + env(safe-area-inset-bottom,0px));
    scroll-padding-bottom:calc(112px + env(safe-area-inset-bottom,0px));
  }
  #lista > .abas{
    position:fixed;left:0;right:0;bottom:0;z-index:24;
    margin:0;
    padding:var(--e2) var(--e3) calc(var(--e2) + env(safe-area-inset-bottom,0px));
    display:flex;flex-wrap:wrap;justify-content:center;align-items:center;
    gap:var(--e2);
    background:var(--navbg);
    -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);
    border-top:1px solid var(--line);
    /* teto de duas fileiras: rolagem lateral aqui deixaria metade dos
       destinos fora da tela sem nenhuma pista de que existem */
    max-height:calc(var(--toque) * 2 + var(--e5));
    overflow-y:auto;overscroll-behavior:contain;
  }
  #lista > .abas:empty{display:none}
  /* categorias continuam no topo: é filtro, não navegação */
  #lista > .abascat{padding:0 var(--e3) var(--e3)}

  /* Avisos e fila de processamento sobem acima da barra inferior. Sem isto
     o toast "Sua música continua sendo processada" cai exatamente em cima
     das playlists. Os avisos do jogo (.avisotreino) não entram aqui: durante
     a música o #lista perde .on, e um filho `fixed` de um ancestral
     `display:none` não é pintado — a barra simplesmente não existe lá. */
  .avisos{bottom:calc(120px + env(safe-area-inset-bottom,0px))}
  .fila{bottom:calc(120px + env(safe-area-inset-bottom,0px));right:var(--e3);
    left:var(--e3);width:auto}

  /* alvo de dedo em tudo que se toca */
  .aba,.abascat button,.bt,.btnovo,.btic,.temasel button,.segs button,
  .nivel button,.menup button,.skins button,.abascfg button{
    min-height:var(--toque);
  }
  .btic,.temasel button{min-width:var(--toque)}
  .aba{padding:var(--e2) var(--e4)}
}

/* =========================================================================
   6. BIBLIOTECA
   ========================================================================= */
.grade{gap:var(--e5)}
/* Numa tela de 2560 a grade dava 11 colunas de 168px: uma parede de
   miniaturas, e o olho não acha nada. Teto de leitura acima de 1800px.
   `width:100%` junto do `margin-inline:auto` de propósito — é a mesma
   armadilha que o Modo TV já documenta: margem automática no eixo
   transversal desliga o stretch e a grade passa a medir pelo conteúdo. */
@media (min-width:1800px){
  .grade{width:100%;max-width:1900px;margin-inline:auto}
}
.aba{
  background:var(--cx2);border:1px solid var(--line);
  border-radius:var(--rp);color:var(--fg);
  display:flex;align-items:center;gap:var(--e2);
  transition:background var(--transicao),border-color var(--transicao);
}
.aba:hover{background:var(--cx3)}
/* item ativo: fundo violeta suave + texto violeta — a mesma marcação que a
   referência usa no item selecionado da lateral. Antes era inversão total
   (fundo --fg, texto --bg): um retângulo preto no claro e branco no
   escuro, que puxa mais atenção que o próprio conteúdo. */
.aba.sel,.abascat button.sel,.segs button.sel,.nivel button.sel{
  background:var(--ativo-fundo);
  color:var(--ativo-fg);
  border-color:var(--selo-borda);
  font-weight:var(--p-forte);
  box-shadow:inset 3px 0 0 var(--accent);
}
.abascat button,.segs button,.nivel button{
  background:var(--cx2);border:1px solid var(--line);
  border-radius:var(--rp);color:var(--dim);
}
.abascat button:hover,.segs button:hover,.nivel button:hover{color:var(--fg)}
.addpl{border-style:dashed;color:var(--dim);background:transparent}

.rec{background:linear-gradient(135deg,var(--marca),var(--accent2))}
.rec.f0{background:var(--v600)}
.tagauto{border-radius:var(--r1)}
.card .dur,.card .mini{border-radius:var(--r1)}
.card .favbt{border-radius:var(--rp)}
.maisp{border-radius:var(--rp)}
.maisp:hover{background:var(--btn-a)}
.vazio h3{font-size:var(--t-xl)}

/* =========================================================================
   7. CONFIGURAÇÕES (8 abas)
   ========================================================================= */
.abascfg{
  background:var(--cx2);border:1px solid var(--line);
  border-radius:var(--r3);padding:var(--e1);gap:var(--e1);
}
.abascfg button{
  border-radius:var(--r2);color:var(--dim);font-weight:var(--p-forte);
  transition:background var(--transicao),color var(--transicao);
}
.abascfg button:hover{color:var(--fg);background:var(--cx3)}
.abascfg button.sel{
  background:var(--ativo-fundo);color:var(--ativo-fg);box-shadow:none;
}
:root[tema=claro] .abascfg button.sel,
:root[data-tema=claro] .abascfg button.sel{box-shadow:none}

.grupo-tit{color:var(--accent);letter-spacing:var(--tr-rotulo)}
.grupo-tit::after{background:var(--line)}
.cfg input[type=range]{accent-color:var(--accent)}
.chk input{accent-color:var(--accent)}
.cfg .val,.val{color:var(--accent2-txt)}
.cfg .exp.alerta{
  color:var(--atencao);background:color-mix(in srgb,var(--atencao) 12%,transparent);
  border:1px solid color-mix(in srgb,var(--atencao) 34%,transparent);
  border-radius:var(--r2);
}
.obs.demora{
  border-color:color-mix(in srgb,var(--atencao) 34%,transparent);
  background:color-mix(in srgb,var(--atencao) 9%,transparent);
}
.solta-aqui{border:1.5px dashed var(--borda);border-radius:var(--r4)}
.solta-aqui.sobre{
  border-color:var(--accent);border-style:solid;
  background:var(--ativo-fundo);color:var(--fg);
}
kbd{background:var(--cx2);border:1px solid var(--borda);border-bottom-width:2px;
  border-radius:var(--r1);color:var(--fg)}
.skins button.sel{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent);
  color:var(--fg)}
.medidor i,.nivelmic b{
  background:linear-gradient(90deg,var(--good),#ffd666,var(--accent));
}

/* =========================================================================
   8. TELA DE CANTAR
   Letra centralizada grande, palavra atual em roxo, faixa que separa a
   letra da foto escurecida do fundo.
   ========================================================================= */
/* a faixa da letra cravava #07070c/#f6f6fa — as duas cores de fundo antigas.
   Com o fundo novo (#0f1024 / #f7f6fb) ficava um degrau visível. */
.letra::before{
  background:linear-gradient(180deg,#0000 0%,
    color-mix(in srgb,var(--bg) 88%,transparent) 42%,var(--bg) 100%);
}
/* sem variante clara: o palco é escuro nos dois temas (fim da §47) */
.l1 u.ja{color:var(--fg)}
.l1 u.agora{
  color:var(--accent);
  text-shadow:0 0 26px color-mix(in srgb,var(--accent) 47%,transparent);
}
.l1 u.v2,.l1 u.agora.v2{color:var(--voz2,var(--accent2))}
.l1 u.agora.v2{text-shadow:0 0 18px color-mix(in srgb,var(--accent2) 55%,transparent)}
.barra{background:var(--barra-trilho);border-radius:var(--rp)}
.barra i{background:linear-gradient(90deg,var(--marca),var(--accent2));border-radius:var(--rp)}

.modal{background:#0b0b1ce6}
.pausado{background:#0b0b1cd4}
.modal h2{letter-spacing:var(--tr-titulo)}
.nota{background:linear-gradient(92deg,var(--marca),var(--accent2));
  -webkit-background-clip:text;background-clip:text;color:transparent}
.contagem{color:#fff;text-shadow:0 0 60px color-mix(in srgb,var(--marca) 70%,transparent)}
.flash{box-shadow:inset 0 0 120px 30px #ff2d5566}
.hud .voltar{background:var(--cx2);border:1px solid var(--line);border-radius:var(--rp)}
.mic,.avisotreino,.recind,.duelobar{border-radius:var(--rp)}
.duelobar{border-radius:var(--r4)}
.btvoz.sel{
  background:var(--ativo-fundo);
  border-color:var(--selo-borda);
  color:var(--ativo-fg);
}
.pf i,.est-graf i,.job .pb i{
  background:linear-gradient(90deg,var(--marca),var(--accent2));
}

/* =========================================================================
   9. SITE — navegação, herói, planos
   ========================================================================= */
.nav{background:var(--navbg);border-bottom:1px solid var(--line)}
.logo span{
  background:linear-gradient(96deg,var(--marca),var(--accent2));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.selo{
  color:var(--accent);border:1px solid var(--selo-borda);
  background:var(--selo-fundo);border-radius:var(--rp);
}
.selo b{background:var(--accent);box-shadow:0 0 10px var(--accent)}

/* segunda linha do título em roxo sólido; sobra um risco lilás fininho no
   lugar da marca-texto torta, que no violeta ficava lavada */
.hero h1 em{color:var(--accent);-webkit-text-fill-color:var(--accent)}
.hero h1 em::after{
  background:var(--marca);opacity:.20;height:.20em;bottom:.02em;transform:none;
  border-radius:var(--rp);
}

.planos{border-radius:var(--r4);overflow:hidden}
.plano{border-radius:0}
.plano .k{color:var(--dim);letter-spacing:.2em}
.plano.pro{background:var(--plano-pro-fundo)}
.plano.pro .k{color:var(--accent)}
.plano.pro::before{background:linear-gradient(90deg,var(--marca),var(--accent2))}
.plano li::before{background:var(--dim)}
.plano.pro li::before{
  background:var(--marca);
  box-shadow:0 0 10px color-mix(in srgb,var(--marca) 55%,transparent);
}
.plano li.off::before{background:var(--marcador-off);box-shadow:none}
.preco{font-family:var(--mono);letter-spacing:-.04em}
.step .n{-webkit-text-stroke-color:var(--n-contorno)}
.step:hover .n{-webkit-text-stroke-color:var(--n-contorno-aceso)}
.barra .l b{background:linear-gradient(90deg,var(--marca),var(--accent2))}
.rot i{color:var(--accent)}
/* --btn-a e não --accent: o link de pular tem texto BRANCO em cima, e o
   violeta que passa como texto sobre cartão (#9d80ff) só dá 3,01:1 contra
   branco. Medido na bancada — foi assim que este erro apareceu. */
.skip-link,.pular-conteudo{background:var(--btn-a);color:#fff}

/* =========================================================================
   10. ALVO DE TOQUE — dedo grosso, em qualquer largura
   ========================================================================= */
/* No mouse a regra abaixo não valia e sobravam alvos de 22 a 34px: o seletor
   de idioma media 35×22, os botões de tema 30×30, o olho da senha 38×42 e o
   `button.del` 67,9×34,8. O mínimo da WCAG 2.5.8 é 24×24 mesmo com mouse;
   32px passa com folga e não engorda o layout como 44 engordaria. Link de
   texto corrido (a .logo) fica de fora — a norma isenta. */
.idiomasel a,[data-tema-opt],.olho,button.del,.bt.sm,.bt.sec.sm,a.logo,
footer .lin a{
  min-height:32px;min-width:32px;
  display:inline-flex;align-items:center;justify-content:center;
}
.idiomasel a{padding-inline:var(--e2)}
a.logo{justify-content:flex-start}
/* ⚠️ o <select> do idioma NAO entra na lista acima: `display:inline-flex` num
   select nativo desmonta a caixa de opcoes. So' altura, e por isso separado.
   Medido 84,5×19 na home e 97×22 nas demais — abaixo ate' dos 24 da WCAG. */
select#idiomapick{min-height:32px}
/* Os 7 links do rodape da pagina de vendas mediam 116×20,8 ate' 34×20,8: sao
   `font-size:13px` × `line-height:1.6` num flex `align-items:center`, entao
   a caixa e' exatamente a linha do texto e nada a estica. `footer .lin a`
   (0,1,2) e' o que vence o `footer a` (0,0,2) da propria pagina de vendas. */

@media (pointer:coarse){
  .idiomasel a,[data-tema-opt],.olho,button.del{
    min-height:var(--toque);min-width:var(--toque);
  }
  select#idiomapick{min-height:var(--toque)}
  /* ⚠️ `.bt.sec.sm` ESCRITO POR INTEIRO. `.bt.sm` aqui e' 0,2,0 e perde pro
     `.bt.sec.sm` (0,3,0) da regra de 32px la' em cima — que vem ANTES no
     arquivo e mesmo assim ganha, porque especificidade nao olha ordem. O
     "Entrar" do topo ficava em 34,2px enquanto o "Criar conta" (a.bt.sm, sem
     .sec) recebia os 44 certinhos. Nao baixe o alvo: iguale a especificidade. */
  .bt,.btnovo,.bt.sm,.bt.sec.sm,footer .lin a,
  .aba,.abascat button,.abascfg button,
  .segs button,.nivel button,.menup button,.skins button,.btarq{
    min-height:var(--toque);
  }
  .btic,.temasel button{min-width:var(--toque);min-height:var(--toque)}
  .campo input,.cfg select,.nomear input,.nomear select,.selperfil,#busca{
    min-height:var(--toque);
  }
}

/* =========================================================================
   11. MOVIMENTO
   ========================================================================= */
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important}
  .card:hover{transform:none}
}

/* =========================================================================
   12. TELA ESTREITA NO JOGO (≤560px)
   A .hud é flex-wrap: no celular tudo quebra linha, e três coisas que
   estavam posicionadas por cima caíam em cima do título — medido a 390px:
   o selo "gravando" sobre #jtitulo e #jartista, o placar do dueto sobre os
   dois, e a .hudinfo vazando pra dir=406 numa viewport de 390.
   ========================================================================= */
@media (max-width:560px){
  /* "onde não mora mais nada" deixou de ser verdade quando a barra do jogo
     ganhou 8 botões: medido, o selo cobria metade do 🔊 e metade do 🔁
     (836px² cada) em toda música gravada. Sobe pra ACIMA da barra, que é o
     espaço que de fato sobra. */
  #jogo .recind{
    top:auto;bottom:calc(76px + env(safe-area-inset-bottom,0px));
    left:50%;right:auto;transform:translateX(-50%);
  }
  /* os contadores encolhem e podem quebrar linha em vez de empurrar */
  #jogo .hudinfo{flex-wrap:wrap;gap:10px;margin-left:0;min-width:0;flex:1 1 100%}
  #jogo .hi{min-width:0;flex:1 1 auto;text-align:left}
  /* título e artista ganham a linha inteira antes de qualquer coisa vir junto */
  #jogo .hud{padding:14px 16px;gap:10px}
  #jogo .hud .nome{flex:1 1 100%;order:-1}
  /* placar do dueto embaixo do nome, não em cima dele */
  #jogo .dupla,#jogo .placar{margin-left:0;flex:1 1 100%;text-align:left}

  /* O "CANTANDO / Jogador 1" era absoluto em top:74px (126 no duelo). Com a
     HUD mais alta no celular, ele caía EM CIMA dos botões de voz e medidor,
     e "1 de 2" ainda quebrava em três linhas. Aqui ele entra no fluxo, logo
     abaixo da HUD, e não quebra mais. #tela já é flex-column. */
  #jogo .vezde{
    position:static;transform:none;top:auto;left:auto;
    align-self:center;white-space:nowrap;
    margin:0 var(--e3) var(--e2);
  }
  /* O "+225" flutuava com `top:-20px`. No desktop ele sobe sobre espaço
     vazio; no celular, com o placar em linha própria, pousava em cima dos
     contadores. Aqui ele entra no fluxo, ao lado do número — mesma
     informação, mesma animação, sem cobrir nada. */
  #jogo .placar i{
    position:static;display:inline-block;margin-left:var(--e2);
    vertical-align:middle;
  }
  @keyframes pontinho{0%{opacity:1;transform:translateX(-6px)}
                      100%{opacity:0;transform:translateX(10px)}}
}

/* =========================================================================
   13. FILTROS EM POPOVER
   Três <select> nativos lado a lado na barra era a maior cara de protótipo
   do produto. Viram um botão com contador, como na inspiração — os selects
   continuam existindo (mesmos ids, mesmos handlers), só moram aqui dentro.
   ========================================================================= */
.filtros{position:relative;flex:0 0 auto}
.btfiltros{
  display:inline-flex;align-items:center;gap:var(--e2);
  min-height:var(--toque);padding:0 var(--e4);
  background:var(--cx2);border:1px solid var(--line);border-radius:var(--r3);
  color:var(--fg);font:inherit;font-size:var(--t-md);font-weight:var(--p-forte);
  cursor:pointer;white-space:nowrap;
  transition:border-color var(--transicao),background var(--transicao);
}
.btfiltros:hover{background:var(--cx3);border-color:var(--borda)}
.btfiltros.ativo{
  border-color:var(--accent);color:var(--ativo-fg);background:var(--ativo-fundo);
}
/* o contador: sem ele, filtro ligado esconde metade da biblioteca calado */
.btfiltros .pino{
  /* `[hidden]` é só `display:none` do agente do usuário — qualquer
     `display` nosso ganha dele. A bolinha ficava acesa SEM filtro nenhum,
     e a pessoa passava 20 minutos procurando um filtro que não existia. */
  display:grid;place-items:center;min-width:18px;height:18px;padding:0 5px;
  border-radius:999px;background:var(--btn-a);color:#fff;
  font-size:var(--t-xs);font-weight:var(--p-negrito);font-style:normal;
}
.filtros-pop{
  position:absolute;z-index:60;top:calc(100% + 6px);left:0;
  display:grid;gap:var(--e1);min-width:250px;
  padding:var(--e4);
  background:var(--cx);border:1px solid var(--line);border-radius:var(--r4);
  box-shadow:var(--sombra),var(--luz-topo);
}
.filtros-pop[hidden]{display:none}
.btfiltros .pino[hidden]{display:none}
.filtros-pop label{
  color:var(--dim);font-size:var(--t-sm);font-weight:var(--p-forte);
  letter-spacing:var(--tr-rotulo);text-transform:uppercase;
  margin-top:var(--e2);
}
.filtros-pop label:first-child{margin-top:0}
.filtros-pop select{width:100%;min-height:var(--toque);max-width:none}
.btlimpar{
  margin-top:var(--e3);min-height:36px;
  background:none;border:1px solid var(--borda);border-radius:var(--r2);
  color:var(--dim);font:inherit;font-size:var(--t-md);cursor:pointer;
}
.btlimpar:hover{color:var(--fg);border-color:var(--accent)}
/* na direita da tela o popover não pode vazar pra fora da janela */
@media (max-width:560px){
  .filtros-pop{left:auto;right:0;min-width:min(280px,calc(100vw - 32px))}
}

/* A estrela de favoritar ficava em branco 36% sobre a capa: 2,81:1, e em
   quatro capas reprovava até o mínimo de 3:1 de componente gráfico. Vira
   branco cheio sobre uma pastilha escura — a capa continua aparecendo em
   volta, e a estrela para de sumir em capa clara. */
.card .favbt{
  color:#fff;
  background:#0000009e;
  border-radius:999px;
  backdrop-filter:blur(2px);
}
.card .favbt:hover{background:#000000c7}
.card .favbt.on{color:var(--accent2-txt)}

/* Música trancada: continua visível na biblioteca, com a capa apagada e um
   selo. Sumir com ela faria a pessoa achar que perdeu o que enviou — o
   combinado é que a biblioteca fica, só não abre sem assinatura. */
/* ⚠️ O APAGADO É DA ARTE, NÃO DOS RÓTULOS. Medido no pixel, com o filtro
   na `.capa` inteira: o selo "trancada" ficava a 1,59:1 no claro e 1,79:1 no
   escuro, "áudio/vídeo" a 2,62:1 e a duração a 3,25:1 — justamente as
   etiquetas que EXPLICAM por que o cartão está apagado. E `opacity:.62` no
   título e no artista levava o nome do artista a 2,83:1.
   Agora o filtro pega só a imagem (ou o SVG da capa gerada) e o texto fica
   inteiro; quem diz "este está mais quieto" é a cor, que ainda passa. */
.card.trancada .capa{filter:none}
.card.trancada .capa > img,
.card.trancada .capa > svg{filter:grayscale(.85) brightness(.5)}
.card.trancada .tit{opacity:1;color:var(--dim)}
.card.trancada .sub{opacity:1}
.card .trancado{
  position:absolute;left:8px;bottom:34px;z-index:3;
  display:inline-flex;align-items:center;gap:4px;
  background:var(--btn-a);color:#fff;border-radius:6px;padding:2px 8px;
  font-weight:700;font-size:var(--t-xs,11.5px);line-height:1.6;letter-spacing:.02em;
}
.card.trancada .abrir{cursor:pointer}
.card.trancada:hover .capa{filter:none}
.card.trancada:hover .capa > img,
.card.trancada:hover .capa > svg{filter:grayscale(.5) brightness(.62)}

/* =========================================================================
   14. NAVEGAÇÃO NO CELULAR — barra inferior de verdade
   A lateral estava `display:none` abaixo de 1080px e a barra de baixo só
   tinha playlists: "Planos" ficava sem NENHUMA porta no celular, e o
   auditor chegou nele por acidente. Agora os 5 destinos essenciais viram
   barra de polegar (que é o que o cabeçalho deste arquivo já previa), e as
   playlists voltam pro fluxo, acima da grade, onde são filtro e não
   navegação.
   ========================================================================= */
@media (max-width:1079px){
  #lista > .topo > .lat-nav{
    display:flex;
    position:fixed;left:0;right:0;bottom:0;z-index:26;
    justify-content:space-around;align-items:stretch;
    gap:0;margin:0;
    padding:6px var(--e2) calc(6px + env(safe-area-inset-bottom,0px));
    background:var(--navbg);
    -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);
    border-top:1px solid var(--line);
  }
  /* só os 5 marcados: o resto continua no popover de filtros e na busca */
  #lista > .topo > .lat-nav button:not([data-mob]){display:none}
  #lista > .topo > .lat-nav button{
    flex:1 1 0;min-width:0;
    flex-direction:column;justify-content:center;gap:3px;
    padding:4px 2px;min-height:52px;border-radius:var(--r2);
    font-size:var(--t-xs);font-weight:var(--p-forte);
  }
  #lista > .topo > .lat-nav button .ic{width:22px;height:22px}
  #lista > .topo > .lat-nav button span{
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%;
  }
  #lista > .topo > .lat-nav button.sel{background:none;color:var(--ativo-fg)}
  #lista > .topo > .lat-nav button.sel::before{display:none}
}
@media (max-width:767px){
  /* playlists saem do rodapé: quem manda lá embaixo agora é a navegação */
  #lista > .abas{
    position:static;background:none;backdrop-filter:none;border-top:0;
    max-height:none;overflow:visible;
    padding:var(--e2) var(--e3) 0;justify-content:flex-start;
  }
  #lista.screen.on{
    padding-bottom:calc(76px + env(safe-area-inset-bottom,0px));
    scroll-padding-bottom:calc(76px + env(safe-area-inset-bottom,0px));
  }
  .avisos{bottom:calc(84px + env(safe-area-inset-bottom,0px))}
  .fila{bottom:calc(84px + env(safe-area-inset-bottom,0px))}
}

/* =========================================================================
   15. NADA FLUTUA POR CIMA DA MÚSICA
   O card de progresso ("0%") e os avisos são `position:fixed` e ficavam
   visíveis DENTRO do jogo — apareceram em 6 das 12 telas auditadas, um
   deles em cima da letra enquanto a pessoa cantava. Durante a partida a
   tela é do cantor: o trabalho continua no servidor e o card volta
   sozinho quando a música acaba.
   ========================================================================= */
body:has(#jogo.on) .fila{display:none}
/* `.avisos` fica: é `aria-live` e leva recado do próprio jogo ("sem
   microfone", "salvo"). O que ele não pode é cair sobre a letra. */
body:has(#jogo.on) .avisos{bottom:auto;top:64px}

/* Os dois no mesmo canto disputavam pixel: a 375px o toast cobria 98% do
   card de progresso. Empilhados, um empurra o outro. */
@media (max-width:560px){
  .fila{left:var(--e3);right:var(--e3);width:auto}
  .avisos{left:var(--e3);right:var(--e3);transform:none;width:auto}
  .avisos .aviso-t{width:100%}
}


/* O toast e o card de progresso continuavam no mesmo canto: a 375px o
   toast cobria 98% do card. Agora o card sobe acima do toast, e os dois
   sobem acima da barra de navegação. */
@media (max-width:560px){
  .fila{bottom:calc(150px + env(safe-area-inset-bottom,0px))}
}

/* Botão de modo desabilitado precisa PARECER desabilitado — senão a pessoa
   clica, nada acontece e ela acha que o app travou. */
.nivel button:disabled{opacity:.42;cursor:not-allowed}
.nivel button:disabled:hover{background:none;color:var(--dim)}

/* Bloco de ação destrutiva: contorno vermelho, não fundo vermelho. Fundo
   vermelho num cartão inteiro pesa demais numa página que a pessoa abre pra
   trocar de cartão de crédito. */
.cx.perigo{border-color:var(--erro-border)}
.cx.perigo .cxtit .ic{color:var(--erro-fg)}
.bt.perigo{background:var(--erro-fg);color:#fff}
.bt.perigo:hover{background:color-mix(in srgb,var(--erro-fg),#000 12%)}
:root[tema=escuro] .bt.perigo,:root[data-tema=escuro] .bt.perigo{color:#2a0a14}
#apagarpasso2{margin:var(--e3) 0}
#apagarpasso2 input{width:100%;min-height:var(--toque)}

/* A palavra da dificuldade ao lado dos pontinhos. Cinco bolinhas sem
   legenda não dizem se é nota, qualidade ou dificuldade — e `title` só
   funciona com mouse. Some abaixo de 420px de cartão, onde o título da
   música já está apertado. */
.card .difnome{
  margin-left:6px;font-weight:var(--p-forte);font-size:var(--t-xs);
  color:var(--dim);letter-spacing:.02em;white-space:nowrap;
}
/* ⚠️ ESTA LINHA ERA CÓDIGO MORTO E NINGUÉM PODIA VER ISSO LENDO O CSS.
   `@container` só dispara se ALGUM ancestral declarar `container-type` —
   e nenhum declarava: medido, `getComputedStyle(.card).containerType`
   devolvia "normal" em 320, 375, 768, 1024, 1280 e 1800. A consulta nunca
   casou uma vez sequer, e por isso a palavra da dificuldade aparecia em
   cartão de 174 px comendo 103 dos 174 — o nome do artista ficava com 63
   e "Charlie Brown Jr." era cortado em 20 dos 60 cartões (item 14).
   O `container-type` vive na §55, junto do resto do cartão. */
/* 205 e não 190: a conta é `artista (11ch = 86px) + dificuldade (103px no
   rótulo mais longo, "muito fácil") + o vão de 8` = 197, mais folga. Com
   190 o cartão de 193px ficava dentro da consulta e mesmo assim estourava. */
@container (max-width: 205px){ .card .difnome{display:none} }

/* Bloco "sem microfone": aviso E saída no mesmo lugar. Antes só dizia
   "sem mic" e a pessoa travava — dentro da tela que existe pra resolver
   exatamente isso. */
.semmic{
  display:flex;flex-wrap:wrap;align-items:center;gap:var(--e3);
  padding:var(--e3);margin-bottom:var(--e3);
  background:var(--erro-bg);border:1px solid var(--erro-border);
  border-radius:var(--r3);color:var(--fg);font-size:var(--t-md);
}
.semmic[hidden]{display:none}
.semmic span{flex:1 1 200px;min-width:0}
.semmic button{flex:0 0 auto;min-height:var(--toque)}

/* =========================================================================
   17. PILHA DE AVISOS — um canto só, um empurrando o outro
   Medido: `.fila` e `.avisos` eram dois `fixed` com `bottom` cravado e
   colidiam entre si em 11 de 11 larguras de celular, além de cobrir de 2 a
   8 cartões da biblioteca. Agora é um container em coluna: o `flex` resolve
   a altura, ninguém precisa adivinhar a do outro.
   ========================================================================= */
.pilha{
  position:fixed;z-index:70;right:22px;bottom:22px;
  display:flex;flex-direction:column;align-items:flex-end;gap:var(--e2);
  pointer-events:none;                   /* o buraco entre os cartões continua clicável */
  max-width:min(360px, calc(100vw - 24px));
}
.pilha > *{pointer-events:auto;position:static !important;
           left:auto !important;right:auto !important;
           bottom:auto !important;top:auto !important;
           transform:none !important;width:100% !important;max-width:100%}

/* Dentro da música a tela é do cantor: o progresso some (o trabalho segue no
   servidor) e o aviso vai pro alto à DIREITA — no topo centralizado ele caía
   em cima do "Yellow / Coldplay" da tela de preparo, que foi o que a
   auditoria mediu. */
body:has(#jogo.on) .pilha{top:12px;bottom:auto;right:12px;align-items:flex-end}
body:has(#jogo.on) .fila{display:none}

@media (max-width:767px){
  /* acima da barra de navegação, e na largura da tela */
  .pilha{left:var(--e3);right:var(--e3);max-width:none;align-items:stretch;
         bottom:calc(84px + env(safe-area-inset-bottom,0px))}
}

/* =========================================================================
   18. DEDO: 44px em TUDO que se toca
   Medido: 123 alvos abaixo de 44px num iPhone de 390 — e 120 deles eram a
   estrela (30×30) e o "+" (32×32) em cima de CADA capa, os dois botões que
   mais se usa na biblioteca. O ícone continua do tamanho que era; quem
   cresce é a área de toque.
   ========================================================================= */
@media (pointer:coarse){
  .card .favbt,.card .maisp{
    min-width:var(--toque);min-height:var(--toque);
    display:grid;place-items:center;
  }
  /* o desenho não engorda junto: só a caixa */
  .card .favbt{font-size:17px}
  .card .maisp{font-size:19px}
}

/* ⚠️ ESTES DOIS SAÍRAM, E O MOTIVO IMPORTA.
   Eles decidiam pela largura da TELA o que é uma pergunta sobre a largura do
   CARTÃO — e erravam nos dois sentidos: em 320px o cartão tem 296 (uma
   coluna) e cabia tudo, em 1280 o cartão tem 174 e não cabia nada. O
   comentário antigo dizia "em 173px de cartão sobra espaço pra 'Fácil'":
   sobra pra "Fácil" (37px), não pro rótulo mais longo, que é "muito fácil"
   e mede 103px dos 174. Foi medindo com a palavra curta que a conta fechou.
   Quem responde isso é a `@container` lá de cima, que agora tem container
   de verdade (§55) e mede o cartão, não a janela. */

/* O toast usava a regra genérica `.ok` — fundo `--ok-bg` a 8% de opacidade,
   pensada pra caixa de aviso DENTRO de um cartão sólido. Flutuando por cima
   da capa da música, 8% não cobre nada: medido ilegível em 6 de 14 telas.
   Toast precisa de superfície opaca; a cor fica na borda e no ícone. */
.avisos .aviso-t{
  background:var(--cx);
  border:1px solid var(--line);
  box-shadow:var(--sombra),var(--luz-topo);
  color:var(--fg);
  backdrop-filter:blur(10px);
}
.avisos .aviso-t.ok{border-color:var(--ok-border);color:var(--fg)}
.avisos .aviso-t.ok::before{content:"";width:4px;align-self:stretch;
  border-radius:99px;background:var(--good);margin-right:var(--e2)}
.avisos .aviso-t{display:flex;align-items:center}


/* No mouse a norma pede 24×24 (WCAG 2.5.8 AA) e esses botões já passavam —
   30×30 e 32×32. Mas errar o alvo com mouse também custa, e 36px não engorda
   layout nenhum: é o meio-termo entre o mínimo legal e os 44 do dedo.

   ⚠️ `@media (pointer:fine)` E NÃO INCONDICIONAL. Esta regra vinha DEPOIS do
   bloco `(pointer:coarse)` logo acima, com a mesma especificidade, e o
   vencia por ordem: no dedo o ★ e o ＋ mediam **36×36**, não 44. São 28
   alvos por tela de biblioteca (14 cartões × 2), e havia DUAS regras de
   44px escritas e mortas — esta e a de `player/index.html:1629`.
   Escopando no mouse, cada uma manda no seu aparelho. */
@media (pointer:fine){
  .card .favbt,.card .maisp,.conta .subirplano,.bt.sm,.bt.sec.sm{
    min-width:36px;min-height:36px;
  }
}
/* sem ponteiro declarado (leitores, automação) fica no mínimo legal */
@media not all and (pointer:coarse){
  .conta .subirplano,.bt.sm,.bt.sec.sm{min-width:36px;min-height:36px}
}

/* "Sair" e o nome da conta eram texto puro: 23×19 e 120×19 medidos — e o
   nome é o ÚNICO link pra /conta dentro do app, ou seja, o caminho pra
   cancelar assinatura no celular era um alvo de 19px de altura. */
#conta a,.conta a.sairlink{
  display:inline-flex;align-items:center;
  min-height:var(--toque);padding:0 var(--e2);border-radius:var(--rp);
}
@media (pointer:fine){ #conta a{min-height:24px;padding:0 6px} }

/* O nome do artista quebrava em 2-3 linhas depois que a palavra da
   dificuldade entrou na mesma faixa ("Charlie Brown Jr." virava três
   linhas e os cartões ficavam de alturas diferentes). O artista trunca
   com reticências e a faixa fica sempre em UMA linha; a dificuldade nunca
   encolhe, porque é ela que dá a informação nova. */
.card .sub{flex-wrap:nowrap;align-items:baseline;min-width:0}
.card .sub .art{
  flex:1 1 auto;min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.card .sub .dif{flex:0 0 auto;white-space:nowrap}

/* =========================================================================
   20. SELECT COM A CARA DO PRODUTO
   Sem `appearance:none` o navegador desenha o controle do SISTEMA
   OPERACIONAL: seta cinza do macOS, fundo próprio, altura própria. Num app
   com design inteiro definido, é o detalhe que denuncia protótipo — foi o
   que a auditoria chamou de "3 selects nativos dentro de um app com design
   próprio". A seta vira um SVG nosso, embutido (o CSP bloqueia externo).
   ========================================================================= */
select.selperfil{
  appearance:none;-webkit-appearance:none;-moz-appearance:none;
  background-color:var(--cx2);
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' stroke='%239c9ac0' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 12px center;
  padding-right:32px;
  border:1px solid var(--line);border-radius:var(--r3);
  color:var(--fg);font:inherit;font-size:var(--t-md);
  cursor:pointer;
  transition:border-color var(--transicao),background-color var(--transicao);
}
select.selperfil:hover{background-color:var(--cx3);border-color:var(--borda)}
select.selperfil:focus-visible{border-color:var(--accent)}
/* select com valor diferente do padrão fica marcado — era o que já
   acontecia com a classe `.ativo`, agora com a cor certa do sistema */
select.selperfil.ativo{border-color:var(--accent);color:var(--ativo-fg)}
/* a lista aberta é do sistema e não dá pra estilizar; o que dá é garantir
   que o texto dela não saia branco-no-branco no tema claro */
select.selperfil option{background:var(--cx);color:var(--fg)}

/* =========================================================================
   21. NADA COBRE A LETRA
   O convite "Baixe o app" é `position:fixed` e ficava por cima da letra
   DURANTE a música — em pé e deitado. A letra é a única coisa que a pessoa
   lê enquanto canta; qualquer coisa em cima dela é bug, não enfeite.
   Some no jogo e volta sozinho na biblioteca.
   ========================================================================= */
body:has(#jogo.on) .baixarapp{display:none !important}

/* =========================================================================
   22. CELULAR DEITADO
   Medido: 480px de cabeçalho num viewport de 390px de ALTURA — a lista
   abria no logo e no cartão de conta, com ZERO música à vista. Deitado a
   tela é baixa e larga: o cabeçalho vira uma faixa e a grade ganha colunas.
   ========================================================================= */
@media (max-height:500px) and (orientation:landscape){
  #lista > .topo{
    flex-direction:row;flex-wrap:wrap;align-items:center;
    padding:var(--e2) var(--e3);gap:var(--e2);
  }
  #lista > .topo .marca{flex:0 0 auto}
  #lista > .topo h1{font-size:15px}
  #lista > .topo .cnt{display:none}
  /* o cartão de conta não cabe deitado: quem quiser vê em Planos */
  #lista > .topo > .conta{display:none}
  /* A barra caía em `display:block` (244px empilhados): as regras de uma
     linha só valem abaixo de 768px, e deitado a largura é 844. Aqui ela
     vira fileira única de novo. */
  #lista > .barra-topo{
    display:flex;flex-wrap:nowrap;align-items:center;gap:var(--e2);
    padding:var(--e2) var(--e3);
  }
  #lista > .barra-topo > #busca{flex:1 1 200px;min-width:0;margin:0}
  #lista > .barra-topo > .filtros,
  #lista > .barra-topo > .btnovo,
  #lista > .barra-topo > .btic-fila{flex:0 0 auto}
  #lista > .barra-topo > .selperfil{flex:0 0 auto;max-width:130px}
  /* deitado não sobra altura pra seletor de tema nem playlists gordas */
  #lista > .barra-topo > .temasel{display:none}
  #lista > .abas{padding:var(--e1) var(--e3) 0}
  #lista > .abas button{min-height:32px}
  /* a navegação de baixo encolhe: rótulo some, ícone fica */
  #lista > .topo > .lat-nav{padding:2px var(--e2)}
  #lista > .topo > .lat-nav button{min-height:38px;font-size:0}
  #lista > .topo > .lat-nav button .ic{width:20px;height:20px}
  #lista.screen.on{
    padding-bottom:calc(46px + env(safe-area-inset-bottom,0px));
    scroll-padding-bottom:calc(46px + env(safe-area-inset-bottom,0px));
  }
  .grade{grid-template-columns:repeat(auto-fill,minmax(140px,1fr));
         gap:var(--e2);padding:var(--e2) var(--e3) var(--e3)}
  /* Cartão baixo: deitado sobram ~170px de altura útil num Android de 360,
     e o cartão de 220px não cabia inteiro — a pessoa via meia música. */
  .card .capa{aspect-ratio:16/10}
  .card .tit{font-size:var(--t-md)}
  .card .sub{font-size:var(--t-xs)}
  .card .onda{display:none}
}

/* =========================================================================
   23. BARRA TOCÁVEL DO JOGO
   A tela de cantar tinha DOIS alvos de toque (voltar e microfone) e seis
   funções críticas só no teclado — pausar, recomeçar, volume, pular. Num
   karaokê de festa, que roda no celular passando de mão em mão, isso é o
   mesmo que não existir. Fica embaixo, longe da letra, e some no modo TV
   (lá a tela é assistida de longe, não tocada).
   ========================================================================= */
.barrajogo{
  position:absolute;left:50%;transform:translateX(-50%);
  bottom:calc(14px + env(safe-area-inset-bottom,0px));
  z-index:9;display:flex;align-items:center;gap:var(--e2);
  padding:6px 10px;border-radius:var(--rp);
  background:#0b0b1cb8;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  border:1px solid var(--line);
  /* .55 media 3,57:1 no ⏭ parado. A barra ser discreta não pode custar
     legibilidade: .8 continua discreta e passa. */
  opacity:.8;transition:opacity .18s ease;
}
/* discreta enquanto ninguém precisa; cheia ao encostar */
.barrajogo:hover,.barrajogo:focus-within{opacity:1}
@media (pointer:coarse){ .barrajogo{opacity:.9} }
/* CABER NO CELULAR. Cada botão novo na barra empurrava ela pra fora da tela:
   com o do microfone ela passou a medir 388 px num iPhone SE de 375 e 395 num
   iPhone 14 de 390 — sobrando pela direita, com o último botão inalcançável.
   Aqui ela quebra em duas linhas em vez de vazar, e nunca passa da largura da
   tela. No desktop nada muda: cabe numa linha e o `wrap` não tem efeito. */
.barrajogo{flex-wrap:wrap;justify-content:center;
  max-width:calc(100vw - 24px);row-gap:6px}

.barrajogo .bj{
  width:var(--toque);height:var(--toque);border-radius:50%;
  display:grid;place-items:center;border:0;background:#ffffff14;
  color:#fff;font-size:17px;cursor:pointer;
  /* +transform: o :active faz scale(.94) mas sem transição estalava na hora
     de apertar E de soltar. No celular (onde a barra vive) isso lia como
     botão morto. Agora a tecla afunda e volta com molejo. */
  transition:background var(--transicao),transform .1s ease;
}
.barrajogo .bj:hover{background:#ffffff2b}
.barrajogo .bj:active{transform:scale(.94)}
.barrajogo .bj-sair{background:var(--erro-bg);color:var(--erro-fg)}
.barrajogo .bjvol{
  min-width:44px;text-align:center;color:#fff;
  font-size:var(--t-sm);font-weight:var(--p-forte);font-variant-numeric:tabular-nums;
}
/* O "voltar 10 s" foi o 6º botão e a barra passou a medir 377px numa tela de
   375: vazava 2px pra fora, medido no iPhone SE. Em tela estreita ela aperta
   em vez de estourar — os alvos continuam com 44px de altura, que é o que a
   regra de toque exige; encolhe a largura e o vão. */
@media (max-width:460px){
  /* Com o treino (🔁) e a ajuda (?) a barra passou a 395px numa tela de 375.
     O `?` sai no celular: a lista de atalhos existe em Ajustes → Teclas, e
     quem está no celular não usa atalho de teclado mesmo. Os outros sete
     apertam pra 38px de largura — a ALTURA fica em 44, que é o que a regra
     de toque exige; largura menor não atrapalha o polegar numa fileira. */
  .barrajogo{gap:2px;padding:5px 5px}
  .barrajogo .bj{width:38px;min-width:38px;height:44px;font-size:15px}
  .barrajogo .bjvol{min-width:28px;font-size:11.5px}
  .barrajogo #bjajuda{display:none}
}
/* O número "10" dentro do botão de voltar: sem ele o ↩ podia ser qualquer
   coisa — desfazer, sair, repetir. */
.barrajogo #bjvolta10{position:relative}
.barrajogo .bjnum{position:absolute;bottom:5px;font-size:9px;font-weight:800;
  line-height:1;opacity:.85;letter-spacing:-.02em}

/* no modo TV a tela é pra ver de longe, não pra tocar */
body.modo-tv .barrajogo{display:none}
/* deitado o espaço vertical é precioso: encolhe */
@media (max-height:500px) and (orientation:landscape){
  .barrajogo{bottom:6px;padding:3px 8px;gap:4px}
  .barrajogo .bj{width:36px;height:36px;font-size:15px}
}

/* A barra NÃO pode encostar na letra — foi o defeito que ela veio consertar.
   A letra sobe o tanto que a barra ocupa; no modo TV a barra não existe e a
   letra volta pro lugar. */
/* 78 = altura da barra (58) + o respiro dela (14) + folga (6).
   Com 64 ela ainda encostava na SEGUNDA linha da letra. */
body:has(.barrajogo) .letra{padding-bottom:78px}
body.modo-tv .letra{padding-bottom:0}
@media (max-height:500px) and (orientation:landscape){
  body:has(.barrajogo) .letra{padding-bottom:46px}
}


/* A estrela era BRANCA CHEIA nos 60 cartões, favoritada ou não — só mudava
   uma classe. Não dava pra bater o olho e saber. Agora: contorno vazio pro
   normal, cheia e âmbar pro favorito. */
.card .favbt{color:#ffffffe0;-webkit-text-stroke:0}
.card .favbt::before{content:"☆"}
.card .favbt{font-size:0}
.card .favbt::before{font-size:17px;line-height:1}
.card .favbt.on::before{content:"★";color:#ffc247}
@media (pointer:coarse){ .card .favbt::before{font-size:19px} }

/* =========================================================================
   24. PRÉVIA EM VÍDEO NA CAPA
   Música com clipe mostra o vídeo andando quando o mouse para em cima —
   é o que qualquer catálogo de vídeo faz, e resolve "qual é mesmo essa?"
   sem abrir a música. Sem som: quem dá som é a prévia de áudio, que já
   existe e obedece o volume da prévia.
   ========================================================================= */
.capa{position:relative;overflow:hidden}
.capa .previa{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;border-radius:inherit;
  opacity:0;transition:opacity .25s ease;
  pointer-events:none;z-index:2;
}
.capa.previando .previa{opacity:1}
/* o selo de duração e o ▶ continuam por cima do vídeo */
.card .dur,.card .mini,.card .incompleta,.card .trancado{z-index:4}
/* no dedo não existe hover: prévia de vídeo é coisa de mouse */
@media (pointer:coarse){ .capa .previa{display:none} }
@media (prefers-reduced-motion:reduce){ .capa .previa{display:none} }


/* ===== 25. cor de quem acerta =====================================
   O `data-coracerto` era gravado no <body> e NINGUÉM lia: os 3 botões não
   mudavam um pixel. Remapeia `--good`, que é o token que a pauta já consulta
   via `cor('good')` — assim o canvas e o HTML mudam juntos, de um lugar só.
   Mora aqui, e não no <style> embutido do player, porque o sistema.css
   carrega depois dele e `:root[tema=escuro]{--good:…}` empatava em
   especificidade e ganhava por ordem. */
/* o palco (#tela) é escuro nos dois temas: leva sempre o valor do escuro. Sem
   isto o `--good` do palco virava o verde da palette e a opção de daltonismo
   sumia da pauta no tema claro. */
:root[data-coracerto=azul], :root[data-coracerto=azul] #tela{--good:#3fb8ff}
:root[tema=claro][data-coracerto=azul]{--good:#0b5fa5}   /* 6,4:1 no branco */
:root[data-coracerto=claro], :root[data-coracerto=claro] #tela{--good:#ffffff}
:root[tema=claro][data-coracerto=claro]{--good:#101018}


/* ===== 26. playlists: o clique da lateral tem que SER VISTO ==========
   O item "Playlists" da lateral só rolava a tela até as abas — que num
   notebook já estão na tela. Clicar não mudava nada e o item parecia
   morto. Agora ele seleciona uma playlist de verdade, e este pisca é o
   que confirma pro olho que algo aconteceu. Respeita quem pediu menos
   movimento. */
#abas.piscar{animation:pl-piscar .9s ease-out}
@keyframes pl-piscar{
  0%{box-shadow:0 0 0 0 var(--accent)}
  30%{box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 45%,transparent)}
  100%{box-shadow:0 0 0 0 transparent}
}
body.sem-movimento #abas.piscar{animation:none}
@media (prefers-reduced-motion:reduce){#abas.piscar{animation:none}}


/* ===== 27. fila da festa ============================================
   Numa sala com dez pessoas alguém tem que lembrar quem canta a próxima, e
   esse alguém acabava sendo quem é dono do notebook. */
.filalista{list-style:none;margin:14px 0;padding:0;display:flex;
  flex-direction:column;gap:6px;max-height:46vh;overflow-y:auto}
.filai{display:grid;grid-template-columns:26px 1fr auto;gap:4px 10px;
  align-items:center;padding:10px 12px;border-radius:11px;
  background:var(--cx2);border:1px solid var(--line)}
.filapos{font-weight:800;opacity:.5;font-variant-numeric:tabular-nums}
.filanome{font-weight:700}
/* a música vai na LINHA DE BAIXO, alinhada com o nome: em 375px o nome do
   cantor e o título brigavam pela mesma linha e os dois ficavam cortados */
.filamus{grid-column:2;font-size:12.5px;opacity:.65;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.filabts{grid-row:1 / span 2;grid-column:3;display:flex;gap:4px}
.filabts .bj{width:36px;height:36px;min-width:36px;font-size:15px}
.filai.sumiu .filamus{text-decoration:line-through;opacity:.45}
.filavazia{padding:22px 12px;text-align:center;opacity:.6;font-size:13.5px;
  line-height:1.5}
#latnav .contafila{margin-left:auto;background:var(--accent);
  /* `--btn-a` e' FUNDO pra texto branco (sistema.css:210), nao tinta.
     O fallback `#fff` salvava enquanto o token nao existia; a §48 deu
     valor a ele em todo skin e o fallback parou de disparar: 1,01:1. */
  color:#fff;border-radius:999px;padding:1px 7px;
  font-size:11.5px;font-weight:800;line-height:1.5}

/* o anúncio na tela de resultado */
.fproximo{margin:16px 0 4px;padding:14px 16px;border-radius:14px;
  background:var(--cx2);border:1px solid var(--accent);
  display:flex;flex-wrap:wrap;gap:8px 12px;align-items:center;
  justify-content:center;text-align:center}
.fproximo .fpr{opacity:.7;font-size:var(--t-md,13.5px)}
.fproximo b{font-size:19px}
.fproximo .fpm{opacity:.75;font-size:13.5px;width:100%}


/* ===== 28. rodapé da conta ==========================================
   `/conta` não tinha link nenhum pros termos nem pra privacidade — que é
   justamente onde estão as regras de cancelamento e de reembolso. */
.rodape-conta{
  max-width:900px;margin:32px auto 40px;padding:0 var(--e3);
  text-align:center;font-size:var(--t-sm);color:var(--dim)
}
.rodape-conta a{color:var(--dim);text-decoration:underline;
  display:inline-block;min-height:var(--toque);line-height:var(--toque);
  padding:0 6px}
.rodape-conta a:hover{color:var(--fg)}


/* ===== 29. a ação principal não pode nascer fora da tela ============
   Medido: no painel de subir, `#btconfirmaenvio` ficava em **y=944 numa
   janela de 900** depois de escolher o arquivo — `elementFromPoint` no
   centro dele devolvia `null`, e a última coisa visível era o cartão
   "Baixe o app". O primeiro upload da pessoa terminava com ela olhando um
   convite de PWA em vez do botão de enviar.

   No `#mstart` é pior no celular: 1412px de conteúdo em 812px de tela, com
   "Cantar" em y=1244 — 600px abaixo do fim. O que a pessoa vê ao abrir a
   primeira música é uma coluna de configurações.

   Os dois viram barra grudada no rodapé do painel. Rola o conteúdo, a ação
   fica. `position:sticky` e não `fixed`: sticky respeita o painel, fixed
   ficaria por cima da página inteira. */
/* ⚠️ O DEGRADÊ É DA TARJA, NÃO DO BOTÃO. Agrupar os dois deu ao
   `#btconfirmaenvio` um `background` de faixa que sobrescreve o
   `var(--btn-a)`: no tema claro ficou texto branco sobre degradê branco,
   **1,07:1** medido em pixel, nos 7 skins. No escuro dava 16:1, por isso
   passou. O irmão `.rodape-cantar` ganhou o fundo corrigido na regra
   seguinte e o botão ficou pra trás — a caixa irmã de novo.
   Agora a posição é comum; a TINTA é de cada um. */
#psubir .btenvio,
#mstart .rodape-cantar{
  position:sticky;bottom:0;z-index:4;
  margin-top:var(--e3);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
}
/* a faixa é quem recebe o degradê */
#psubir .btenvio{width:100%;
  /* o respiro embaixo vem do próprio botão, sem virar área de fundo */
  margin-bottom:calc(var(--e2) + env(safe-area-inset-bottom,0px))}
#mstart .rodape-cantar{
  display:flex;flex-direction:column;align-items:center;gap:6px;
  /* ⚠️ AQUI ESTAVA `#0e0e16` CRAVADO, com o comentário "o fundo do próprio
     modal, que é escuro sempre". A premissa MORREU: o `<style>` do player
     dá `--jg-fundo:#ffffff` ao `#mstart` no tema claro, e esta faixa preta
     atravessava o rodapé do painel branco. Medido: painel rgb(255,255,255),
     rodapé pintando rgb(14,14,22), e a `.dica` em cima dele a 1,42:1.
     O `.rodape-cantar` está DENTRO do `.painel-cantar` (player:3256 dentro
     de 3071) — a nota da §51 que dizia o contrário é falsa.

     ⚠️ E O FUNDO É SÓLIDO, não degradê. O degradê era transparente nos 38%
     de cima e a chave do mata-mata com 8 jogadores passava LEGÍVEL por
     baixo: 6 linhas de `.par b` cruzando 161×18,8 px cada, medido em
     1280×700 com o painel rolado. Quem faz o desmanche agora é o `::before`,
     uma tarja de 18 px ACIMA da barra — ele apaga o que entra sem deixar
     buraco transparente dentro dela. */
  background:var(--jg-fundo)
}
#mstart .rodape-cantar::before{
  content:"";position:absolute;left:0;right:0;bottom:100%;height:18px;
  pointer-events:none;
  background:linear-gradient(to top,var(--jg-fundo),transparent)
}
/* ⚠️ `80vw` NÃO É 80% DA BARRA. Em 320 a barra tem 238px de área útil (a
   tela menos o respiro do modal e os 28px de cada lado do painel) e 80vw dá
   256: o botão vazava 9px da própria barra, medido `238<247`. E é
   `min-width`, então ele vencia o `width:min(320px,100%)` que o player pede
   trinta linhas antes — a mesma armadilha de sempre. `100%` é da barra. */
#mstart .rodape-cantar .bt{min-width:min(320px,100%)}
/* ⚠️ `opacity:.6` AQUI DESFAZIA o `opacity:1` que o player escreve em
   `#mstart .dica` trinta linhas antes — mesma especificidade, e esta folha
   carrega depois. Medido com o .6: 1,42:1 no claro e 4,20:1 no escuro; os
   dois abaixo do mínimo. É a única documentação dos atalhos na tela. */
#mstart .rodape-cantar .dica{font-size:var(--t-xs);opacity:1;color:var(--jg-dim)}
/* No dedo não existe tecla: "espaço pausa · R recomeça · Esc sai" é ruído
   que custa 22 px de barra grudada. Medido em 375×812 com 4 jogadores: o
   rodapé comia 155 px (19% da tela) e cobria 27% do `<select>` do
   microfone, com o rótulo "atraso do fone" colidindo 40×13 px com ela. */
@media (pointer:coarse){
  #mstart .rodape-cantar .dica{display:none}
  #mstart .rodape-cantar .aviso{font-size:var(--t-xs);line-height:1.3}
}

/* o painel precisa de altura limitada pra sticky ter contra o que grudar */
#psubir .cx,#mstart > div{max-height:calc(100dvh - var(--e3) * 2);overflow-y:auto}
/* ...e de folga pra rolagem, senão o último bloco nasce embaixo da barra
   grudada e não há como trazê-lo pra cima (`scroll-padding` também é o que
   o navegador respeita quando leva o foco do teclado pro campo). */
#mstart .painel-cantar{scroll-padding-bottom:170px}


/* ===== 30. o chip do job precisa de saída =========================
   Medido: 15,6 min travado em 20%%, o job sumiu de /api/jobs e o chip
   evaporou sem uma palavra — com o painel dizendo "pode fechar a aba, a
   música aparece quando ficar pronta". Agora fala e oferece o que fazer. */
.job .jobbts{display:flex;gap:var(--e2);margin-top:var(--e2)}
.job .jobbts .bt{min-height:36px;font-size:var(--t-sm);padding:0 var(--e3)}
.job.err .pb i{background:var(--erro-fg,#e0567b)}


/* ===== 31. uma família de fonte só ================================
   Medido: **83 controles em Arial**, 6 deles com texto visível
   (`#busca`, `#buscacfg`, `#upartista`, `#uptitulo`, `#upidioma`, `#cfgmic`).
   A regra `button,input,select{font:inherit}` existe desde sempre — no
   `base.css`, que **o player nem carrega**: ele só linka `sistema.css` e
   `tema-novo.css`. A regra certa no arquivo errado é o mesmo que regra
   nenhuma. */
input,select,textarea,button{font:inherit;color:inherit}
/* `font:inherit` zera o alinhamento do select em alguns motores */
select{text-align:start}

/* ===== 32. escala de forma =========================================
   `sistema.css` declara 6 raios (`--r1`..`--r5`, `--rp`) e o produto usava
   8 valores: `9px` em 12 botões e `14px` em 480. Um sistema que a própria
   casa não segue não é sistema — é decoração. Estes dois puxam os
   fora-de-escala pro valor mais próximo dela. */
#mstart .nivel button,#mstart select,#mstart .btmais,#mstart .medidor.grande,
.job .jobbts .bt{border-radius:var(--r2,10px)}
.card button.abrir{border-radius:var(--r4,16px)}

/* ===== 33. escala de corpo ========================================
   A escala é `--t-xs:11.5 --t-sm:12.5 --t-md:13.5 --t-base:15 --t-lg:17
   --t-xl:20`, e 13px, 12px, 16px e 22px cobriam 441 dos 991 botões. */
#mstart .nivel button,#mstart select{font-size:var(--t-md,13.5px)}
#mstart .btmais{font-size:var(--t-md,13.5px)}
#mstart .slider b{font-size:var(--t-sm,12.5px)}
#mstart .bt{font-size:var(--t-lg,17px)}


/* ===== 34. microfone negado precisa de saída =====================
   Medido: negar o microfone deixava só um chip no topo. A música tocava
   inteira e o resultado saía 0%% / 0 pontos, sem nada explicar nem oferecer
   alternativa. Quem nega sem querer canta 4 minutos à toa. */
.micaviso{margin:var(--e3) 0;padding:var(--e3);border-radius:var(--r3,12px);
  background:var(--jg-realce,#ffffff14);border:1px solid var(--accent)}
.micaviso b{display:block;font-size:var(--t-base,15px);margin-bottom:4px}
.micaviso span{display:block;font-size:var(--t-sm,12.5px);opacity:.85;
  line-height:1.5}
.micaviso .micbts{display:flex;gap:var(--e2);margin-top:var(--e3);flex-wrap:wrap}
.micaviso .micbts .bt{flex:1 1 auto;min-height:var(--toque)}


/* ===== 35. modo espectador tira o placar de verdade ===============
   O botão promete "tira o placar da frente em vez de mostrar zero" e não
   tirava nada: `grep espectador` no HUD dava zero ocorrências e a tela
   seguia com `0 SEQUÊNCIA · 0% ACERTO · 0 DOURADAS · 0 PONTOS`. Sem
   microfone esses quatro números não medem nada — mostrá-los em zero é
   pior que não mostrar. O TEMPO fica: esse é real. */
body.espectador .hudinfo .hi:not(:last-child),
body.espectador .placar,
body.espectador .ratingfrase{display:none}
body.espectador #mfim .stats,
body.espectador #mfim .nota,
body.espectador #mfim .apelido{display:none}

/* ===== 36. o `.selo-rec` no TEMA CLARO ===========================
   `--good` vira `#0a7d55` no claro e o `#04241a` foi calibrado contra a
   menta escura: 3,21:1. Mora AQUI e não no player porque as folhas
   carregam DEPOIS dos 23 `<style>` inline — correção escrita lá perde o
   empate em silêncio, e foi o que engoliu a primeira tentativa. */
:root[tema=claro] .selo-rec{color:#fff}

/* ===== 37. `opacity` fingindo `disabled`, 3ª e 4ª cópias ==========
   `.grupo.desligado` e `#mstart .bloco.desligado`: medido, o slider, o
   select e o checkbox de dentro respondiam a clique de mouse normalmente,
   e os botões seguiam no Tab. `pointer-events:none` estava só no `.nivel`.
   Parecer desligado e continuar funcionando é a pior das duas opções. */
.desligado,#mstart .bloco.desligado{opacity:.62}
.desligado input,.desligado select,.desligado button,.desligado textarea,
#mstart .bloco.desligado input,#mstart .bloco.desligado select,
#mstart .bloco.desligado button{pointer-events:none}

/* ===== 38. laranja de aviso no tema claro =========================
   `:root[tema=claro] #mstart .aviso{color:#ffc46b}` CLAREIA o laranja pro
   fundo claro — anda pro lado errado. O irmão `.aviso-demo` já fazia certo
   com `#8a5000`. Mesmo papel, dois valores, um deles ilegível. */
:root[tema=claro] #mstart .aviso,
:root[tema=claro] #avisofone{color:#8a5000}

/* ===== 39. alvos que ficaram abaixo de 44 no dedo =================
   Medido: sliders de 22, 26 e 32px, checkboxes de 17×17 e `.bj` de 38px de
   largura. O trilho continua fino; o que cresce é a área de toque. */
@media (pointer:coarse){
  /* ⚠️ `height` sozinho pegou 1 de 27: os 23 `#cfg*` e os 3 `#start*` têm
     altura própria declarada depois. `min-height` + a especificidade dos
     dois grupos alcança todos. O TRILHO continua fino — o que cresce é a
     caixa, com o `::-webkit-slider-runnable-track` mantendo a espessura. */
  input[type=range],
  #pconfig input[type=range],
  #mstart input[type=range]{min-height:var(--toque);height:var(--toque);
    background:transparent;padding:0}
  input[type=range]::-webkit-slider-runnable-track{height:6px;border-radius:3px}
  /* checkbox: 24 é o mínimo LEGAL (WCAG 2.5.8); 44 é o que o dedo pede, e
     quem carrega os 44 é o rótulo inteiro, que é onde se toca de verdade */
  input[type=checkbox]{width:24px;height:24px;min-width:24px;min-height:24px}
  .chk,label:has(> input[type=checkbox]){min-height:var(--toque);
    display:flex;align-items:center;gap:var(--e2)}
}


/* ===== 40. 667×375 deitado: 3 controles saíam da tela ==============
   Medido: `clientW=667` e `scrollW=667` (a página NÃO rola), mas o
   `.btnovo` terminava em **780** e o `.btic-fila` em **936** — 269px fora,
   cortados e inalcançáveis, nos 10 estados e nos 2 temas. iPhone SE e 8
   deitados. A barra de cima vira duas linhas em vez de sumir com metade
   dos botões. */
@media (max-height:500px) and (orientation:landscape){
  /* ⚠️ MIREI NA CAIXA IRMÃ. A `.topo` de fato virou `wrap` — e quem estoura
     é a `.ferramentas`, que é IRMÃ dela (filha direta de `#lista`), com
     `nowrap` e `scrollWidth 936` contra `clientWidth 667`. `.btnovo`
     terminava em 780 e `.btic-fila` em 936, os mesmíssimos números de antes
     do "conserto". E o `max-width` que eu pus espremeu o `#busca` a 34px.
     Agora a regra pega as duas caixas, e a busca tem piso. */
  #lista > .topo,#lista > .ferramentas{flex-wrap:wrap;row-gap:var(--e2)}
  #lista > .topo > *,#lista > .ferramentas > *{min-width:0}
  #lista .lat-nav{flex-wrap:wrap}
  #lista .cfgbusca,#lista #busca{flex:1 1 180px;min-width:150px;max-width:none}
}


/* ===== 41. de quem é a vez, na tela do jogo ======================
   `cantorAtual` existia e só aparecia na tela de RESULTADO: no meio da
   festa ninguém sabia de quem era a vez olhando a tela. */
.hud .nome .cantor{display:block;font-style:normal;font-size:var(--t-sm);
  font-weight:700;color:var(--accent2-txt);margin-top:2px}

/* ===== 42. a barra de progresso é um alvo, não um enfeite ========
   5px de altura contra os 24 que a WCAG 2.5.8 pede. O trilho continua
   fino; a área de toque é que cresce, com um pseudo transparente. */
.barra{touch-action:none}
@media (pointer:coarse){ .barra::before{inset:-20px 0} }


/* ===== 43. pôr gente na fila dentro do painel da fila ============
   Medido: 15 pessoas = 15 `prompt()` nativos e 9,5 s de relógio, cada um
   travando a aba. O painel é onde a pessoa já está. */
.filaadd{display:grid;grid-template-columns:1fr 1fr auto;gap:var(--e2);
  margin:var(--e3) 0}
.filaadd input,.filaadd select{min-height:var(--toque);min-width:0;
  background:var(--cx2);border:1px solid var(--line);border-radius:var(--r2);
  padding:0 var(--e3);color:var(--fg)}
.filaadd .bt{min-height:var(--toque);white-space:nowrap}
@media (max-width:560px){
  .filaadd{grid-template-columns:1fr}
}
/* com 15 pessoas as ações saíam de uma tela de 667px */
#pfila .cx{max-height:calc(100dvh - var(--e4) * 2);display:flex;
  flex-direction:column}
#pfila .filalista{flex:1 1 auto;min-height:0;overflow-y:auto}
/* `position:sticky` sem `z-index` fica ATRÁS do que rola por baixo: a
   lista passava por cima dos botões e `elementFromPoint` no centro do
   "Chamar a próxima" devolvia um <span> da fila. */
#pfila .acoes{flex:0 0 auto;position:sticky;bottom:0;z-index:2;
  background:var(--cx);padding-top:var(--e2);
  box-shadow:0 -10px 16px -10px var(--cx)}


/* ===== 44. aviso informa, não intercepta =========================
   Medido: o toast de "entrou na fila" ficava por cima de "Chamar a
   próxima" a 375px — `elementFromPoint` no centro do botão devolvia
   `.aviso-t`. Mesma classe de defeito do indicador de gravação: quem
   avisa não pode receber o toque. A pilha inteira fica transparente ao
   ponteiro; o que tiver botão DENTRO de um aviso reativa o seu. */
.pilha,.avisos,.aviso-t{pointer-events:none}
.aviso-t button,.aviso-t a{pointer-events:auto}


/* ===== 45. exemplo não é sugestão =================================
   O `placeholder` passou a valer como valor real quando a pessoa não
   digita (é a sugestão vinda do nome do arquivo). Exemplo de preenchimento
   não pode morar lá, senão vira artista de verdade — medido: todo primeiro
   envio saía creditado ao "Racionais MC's". O exemplo vive em
   `data-exemplo` e aparece só enquanto o campo está vazio E sem sugestão. */
.campos input[data-exemplo]:placeholder-shown:not(:focus) + .exdica,
.campo input[data-exemplo]:placeholder-shown:not(:focus) + .exdica{opacity:1}
input[data-exemplo]::placeholder{opacity:.55}


/* ===== 46. modo espectador vale no FIM também =====================
   `body.espectador` limpava o HUD e o `#mfim` ignorava: no fim da música a
   tela dizia "Sua nota: 0 de 10, Uma zuera. 0 pontos, 0 por cento…" —
   exatamente o boletim de zero que o botão promete tirar da frente. */
body.espectador #mfim .nota,
body.espectador #mfim .apelido,
body.espectador #mfim .stats,
body.espectador #mfim .frases,
body.espectador #mfim #fduelo{display:none}
body.espectador #mfim .sr::after{content:""}


/* ===== 47. superfície escura fixa carrega palette escura ==========
   ESTE É O CONSERTO ESTRUTURAL. `#mstart`, `#mfim` e o palco do `#jogo` são
   escuros nos DOIS temas (o palco por necessidade: a letra precisa de
   contraste contra o vídeo). Só que os tokens de dentro resolviam pro
   CLARO, e daí saíam ~15 sintomas de contraste medidos um a um:

     #mfim inteira ("acertos", "notas", "melhor sequência")  2,53:1
     #mstart .dica ("espaço pausa · R recomeça")             1,42:1
     HUD do jogo (#btvoz, "voz", "pontos", "acerto")    2,76–2,95:1
     .bjic / .bjnum da barra                            1,01 / 3,61:1

   Consertar os 15 um a um foi o que a rodada passada tentou — e produziu
   uma regressão (`#8a5000` num aviso que vive sobre fundo escuro). A caixa
   escura simplesmente REDECLARA a palette escura pra tudo que está dentro
   dela. Um lugar, e o resto resolve sozinho.
   ================================================================== */
:root[tema=claro] #mfim,
:root[tema=claro] #jogo{
  /* `color` EXPLÍCITO, não só os tokens. O HUD (`#jtitulo`, `#hcombo`,
     `#hdour`, `#htempo`, `.voltar`) não declara `color` próprio: herda o
     valor já RESOLVIDO do `body{color:var(--fg)}`, e redeclarar `--fg`
     aqui não reescreve o que já foi herdado. Medido em pixel antes:
     1,08–1,34:1 no tema claro. */
  color:var(--fg);
  --bg:var(--n950);
  --bg2:var(--n900);
  --cx:var(--n850);
  --cx2:#ffffff0f;
  --cx3:#ffffff17;
  --fg:#f2f1fa;
  --forte:#d6d4ea;
  --dim:#9c9ac0;
  --line:#ffffff1f;
  --borda:#ffffff2e;
  --hair:#ffffff14;
  --good:var(--ok-escuro);
  --atencao:var(--at-escuro);
  --erro-bg:#e0567b14;
  --erro-border:#e0567b40;
  --erro-fg:var(--er-escuro);
  --ok-bg:#2ce8a014;
  --ok-border:#2ce8a040;
  --s1:0 1px 2px #00000059;
  --s2:0 2px 6px #0000005e,0 10px 28px #00000073;
  --s3:0 24px 60px #000000a6;
  --luz-topo:inset 0 1px 0 #ffffff1f;
  --sombra-cartao:var(--s2);
  --sombra:var(--s3);
  --sombra-capa:0 8px 26px #00000099;
  --panel:var(--n900);
  --silhueta:#07071a;
  --fio:#ffffff26;
  --input-bg:#ffffff0d;
  --btn-sec-bg:#ffffff12;
  --navbg:#0f1024e6;
  --barra-trilho:#ffffff12;
  --marcador-off:#ffffff26;
  --n-contorno:#ffffff45;
  --palco-ceu:#0b0b1c;
  --palco-silhueta:#0a0818;
  --palco-halo:167,139,250;
  --palco-borda:rgba(167,139,250,.32);
  --letra-espera:#9a99b6;
}
/* ⚠️ O `#jogo` inteiro NÃO é o palco: o `#mstart` mora nele e é painel claro
   (§54). O PALCO é o `#tela` — faixa da letra, HUD, pílulas, pauta — e ele
   recebe a palette escura NA FONTE (sistema.css, skins, cor de acerto), não
   por cópia. Até 13/09/2026 o canvas lia a raiz e pintava céu CLARO debaixo
   da faixa escura da letra: dois palcos colados, sílaba atual a 2,5:1, o HUD
   a 1,1:1 no pixel. Guarda: prova_palco_escuro.mjs (o `#tela` do claro tem
   que ser, token a token, o do escuro). */


/* ===== 48. o botao primario segue o skin ==========================
   `--btn-a` e `--ativo-fundo` eram VIOLETA nos 7 skins: o elemento mais
   visivel do produto ignorava 6 deles. No skin Mata a pilula do item
   ativo era texto menta sobre violeta; no Fogo, laranja sobre violeta.
   Cada valor foi escurecido ate `#fff` em cima passar 4,5:1 — calculado,
   nao escolhido no olho (foi assim que eu errei duas vezes seguidas).
   ================================================================== */
  :root[tema=claro][data-skin="violeta"]{--btn-a:#7357e4;--btn-b:#654cc8;--ativo-fundo:#7357e41a;--selo-borda:#7357e440;--selo-fundo:#7357e40f}
  :root[tema=claro][data-skin="rosa"]{--btn-a:#d42264;--btn-b:#ba1d58;--ativo-fundo:#d422641a;--selo-borda:#d4226440;--selo-fundo:#d422640f}
  :root[tema=claro][data-skin="mar"]{--btn-a:#007ca5;--btn-b:#006d91;--ativo-fundo:#007ca51a;--selo-borda:#007ca540;--selo-fundo:#007ca50f}
  :root[tema=claro][data-skin="mata"]{--btn-a:#107e5b;--btn-b:#0e6e50;--ativo-fundo:#107e5b1a;--selo-borda:#107e5b40;--selo-fundo:#107e5b0f}
  :root[tema=claro][data-skin="fogo"]{--btn-a:#b75800;--btn-b:#a14d00;--ativo-fundo:#b758001a;--selo-borda:#b7580040;--selo-fundo:#b758000f}
  :root[tema=claro][data-skin="uva"]{--btn-a:#9b3ce0;--btn-b:#8834c5;--ativo-fundo:#9b3ce01a;--selo-borda:#9b3ce040;--selo-fundo:#9b3ce00f}
  :root[tema=claro][data-skin="carvao"]{--btn-a:#6f6f85;--btn-b:#616175;--ativo-fundo:#6f6f851a;--selo-borda:#6f6f8540;--selo-fundo:#6f6f850f}
  :root[tema=escuro][data-skin="violeta"], :root[data-skin="violeta"] #tela{--btn-a:#755fbf;--btn-b:#6653a8;--ativo-fundo:#9d80ff2e;--selo-borda:#9d80ff40;--selo-fundo:#9d80ff14}
  :root[tema=escuro][data-skin="rosa"], :root[data-skin="rosa"] #tela{--btn-a:#d82665;--btn-b:#be2158;--ativo-fundo:#ff2d782e;--selo-borda:#ff2d7840;--selo-fundo:#ff2d7814}
  :root[tema=escuro][data-skin="mar"], :root[data-skin="mar"] #tela{--btn-a:#007ea5;--btn-b:#006e91;--ativo-fundo:#00c2ff2e;--selo-borda:#00c2ff40;--selo-fundo:#00c2ff14}
  :root[tema=escuro][data-skin="mata"], :root[data-skin="mata"] #tela{--btn-a:#187f57;--btn-b:#156f4c;--ativo-fundo:#2ce8a02e;--selo-borda:#2ce8a040;--selo-fundo:#2ce8a014}
  :root[tema=escuro][data-skin="fogo"], :root[data-skin="fogo"] #tela{--btn-a:#a55900;--btn-b:#914e00;--ativo-fundo:#ff8a002e;--selo-borda:#ff8a0040;--selo-fundo:#ff8a0014}
  :root[tema=escuro][data-skin="uva"], :root[data-skin="uva"] #tela{--btn-a:#9f44e5;--btn-b:#8b3bc9;--ativo-fundo:#b14cff2e;--selo-borda:#b14cff40;--selo-fundo:#b14cff14}
  :root[tema=escuro][data-skin="carvao"], :root[data-skin="carvao"] #tela{--btn-a:#6e6e76;--btn-b:#606067;--ativo-fundo:#c9c9d82e;--selo-borda:#c9c9d840;--selo-fundo:#c9c9d814}


/* ===== 49. o `.selo-rec` do `.rot`, com ID pra ganhar =============
   3ª tentativa. As duas primeiras perderam por ordem de carga e por
   especificidade: `#mstart .rot .selo-rec` tem um ID (1,2,0) e ganha de
   `:root[tema=claro] .selo-rec` (0,3,0), por mais classes que eu empilhe.
   Aqui o seletor carrega o mesmo ID, então empata em ID e ganha em classe.
   ⚠️ Agora o `#mstart` carrega a palette ESCURA (seção 47), então o
   `--good` de dentro é a menta e o `#04241a` volta a ser o certo. */
:root[tema=claro] #mstart .rot .selo-rec,
:root[tema=claro] #pconfig .rot .selo-rec{color:#04241a}

/* ===== 50. `.grupo-tit` ficou fora do mutirão do token ============
   Continuava `color:var(--accent)` cru a 11,5px: 2,80:1 (mar), 3,00 (mata),
   3,18 (fogo), 4,21 (uva). Mesmo bug que `.rot i`, `.val` e `.cotinha` já
   tinham levado — o irmão que ficou. */
.grupo-tit,.grupo .tit{color:var(--accent2-txt,var(--accent))}

/* ===== 51. o aviso do `#mstart` NÃO vive sobre fundo escuro =======
   ⚠️ A NOTA ANTERIOR AQUI ERA FALSA, e por isso o valor estava errado. Ela
   dizia que `#mstart .aviso` e `#avisofone` "vivem FORA do `.painel-cantar`,
   direto sobre `#mstart`". Conferido no HTML: `#avisofone` é o
   `player/index.html:3258`, filho do `.rodape-cantar` da linha 3256, que é
   filho do `.painel-cantar` da 3071. Está DENTRO do painel — que no tema
   claro é BRANCO (`--jg-fundo:#ffffff`).

   O que enganava a medição era o outro defeito: a barra pintava `#0e0e16`
   cravado, então o laranja claro media 12,2:1 sobre uma faixa preta que não
   devia existir. Com a barra seguindo `--jg-fundo` (§29), `#ffc46b` sobre
   branco cai pra 1,6:1. `--aviso-fg` já é `#8a5000` no claro e `#ffc46b` no
   escuro: usar o token faz os dois temas certos sem uma linha por tema. */
:root[tema=claro] #mstart .aviso,
:root[tema=claro] #avisofone{color:var(--aviso-fg)}


/* ===== 52. o trecho A–B marcado na barra ==========================
   O treino só pegava a frase em que você já está: pra prender a ponte, o
   refrão ou duas frases seguidas não havia caminho nenhum. A marca vive na
   barra de progresso porque é lá que a pessoa procura "onde estou". */
.barra > #trechomarca{
  position:absolute;top:0;bottom:0;z-index:2;
  background:var(--aviso-fg);opacity:.85;border-radius:2px;
  box-shadow:0 0 0 1px var(--aviso-fg)
}
/* enquanto só o A foi marcado, a marca é um risco piscando: diz "falta o
   fim" sem precisar de texto */
.barra > #trechomarca.aberto{animation:trecho-espera 1s ease-in-out infinite}
@keyframes trecho-espera{50%{opacity:.25}}
body.sem-movimento .barra > #trechomarca.aberto{animation:none;opacity:.5}
@media (prefers-reduced-motion:reduce){
  .barra > #trechomarca.aberto{animation:none;opacity:.5}
}

/* =========================================================================
   §53 MOVIMENTO DO APP — menu, biblioteca e modo claro.
   Pedido do Ruan: "capriche mais no modo claro e principalmente em animações
   e efeitos durante as músicas e no menu".

   Tudo aqui é transform/opacity (compositor), nada de layout. Some inteiro no
   reduced-motion, que o próprio player já neutraliza com `*{animation:none}`.
   ========================================================================= */

/* ---- MENU LATERAL: o item ativo ganha um indicador que DESLIZA ----------
   Antes só trocava a cor de fundo — a mudança acontecia sem que o olho
   acompanhasse pra onde foi. O tracinho à esquerda cresce a partir do centro
   e diz "é aqui". */
.lat-nav button{position:relative}
.lat-nav button::before{
  content:"";position:absolute;left:2px;top:50%;width:3px;height:0;
  border-radius:2px;background:var(--accent);transform:translateY(-50%);
  transition:height .26s var(--mola);
}
.lat-nav button.sel::before{height:22px}
@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
  .lat-nav button{transition:color .12s ease,background-color .12s ease,
                             transform .18s var(--mola)}
  .lat-nav button:hover:not(.sel){transform:translateX(2px)}
}

/* ---- BIBLIOTECA: os cards entram em cascata -----------------------------
   A grade aparecia inteira de uma vez, dura. Agora sobe em onda curta — o
   suficiente pra ler como "chegaram", sem atrasar quem quer clicar (o último
   card entra em ~240 ms). `--i` vem do JS que desenha a lista. */
@media (prefers-reduced-motion:no-preference){
  .grade .card{animation:cardEntra .34s var(--mola) both;
    animation-delay:calc(var(--i,0) * 22ms)}
  @keyframes cardEntra{from{opacity:0;transform:translateY(10px) scale(.985)}
                       to{opacity:1;transform:none}}
}
@media (hover:hover) and (pointer:fine){
  .card .capa{transition:transform .3s var(--mola)}
  .card:hover .capa{transform:scale(1.03)}
}

/* ---- MODO CLARO: o app inteiro ganhou o mesmo cuidado do escuro ---------
   No claro faltava PROFUNDIDADE: tudo era branco sobre branco, sem a sombra
   que separa camada (no escuro quem separa é a superfície mais clara). */
:root[tema=claro] .card .capa{box-shadow:0 2px 10px #1a163814,0 8px 24px #1a163812}
:root[tema=claro] .card:hover .capa{box-shadow:0 6px 18px #1a16381f,0 16px 40px #1a163818}
:root[tema=claro] .lat-nav button.sel::before{background:var(--accent)}
/* a barra de progresso e os chips ficavam lavados no claro */
:root[tema=claro] .job{box-shadow:0 2px 10px #1a163812}
:root[tema=claro] .passos button{box-shadow:inset 0 1px 0 #ffffff}


/* ===== 53. o guia inteiro rolava de lado por causa da tabela =======
   Medido em 15 paginas (5 comparativos × 3 linguas): estouro horizontal de
   224 a 614px em 320/375, e ate' 166px em 768. `document.scrollWidth -
   clientWidth`, Chrome com viewport de verdade.

   ⚠️ O COMENTARIO QUE ESTAVA NO `ESTILO` DE `guias.py` MENTE: ele diz que o
   `overflow-x:auto` da `.doc table` e' o que impede a PAGINA de rolar de
   lado. Nao e'. Aquele overflow funciona — a tabela de fato rola por dentro
   (`table.scrollWidth 969` contra `clientWidth 760`) — e a pagina rolava
   assim mesmo. Quem estoura e' a COLUNA DO GRID, uma camada acima e ANTES:
   `.tela` e' `display:grid`, `.doc` e' item de grid, e item de grid nasce com
   `min-width:auto`. A trilha `auto` foi dimensionada pelo max-content da
   tabela e `grid-template-columns` resolvia pra 969,297px numa tela de 375.
   Achar isso por screenshot e' impossivel: a tabela parece certa, a pagina e'
   que anda. Se um dia esta linha sumir, o overflow da tabela NAO segura. */
.tela > .doc{min-width:0}


/* =========================================================================
   ===== 54. O `#mstart` É O PAINEL CLARO DENTRO DO `#jogo` ESCURO =========

   ESTE É O CONSERTO DE RAIZ DO ITEM 2 DA AUDITORIA (17 elementos abaixo de
   4,5:1 no tema claro, ZERO no escuro).

   Duas decisões certas, tomadas em folhas diferentes, se anulam:

     a) `player/index.html` (o `<style>` do "menu antes da música") decidiu
        que o TEMA CLARO CHEGA nesta tela: `:root[tema=claro] #mstart{
        --jg-fundo:#ffffff; --jg-fg:#14141c }`. O painel é BRANCO.

     b) a §47 daqui decidiu que superfície escura fixa carrega palette
        escura, e escreveu isso em `:root[tema=claro] #jogo{ --fg:#f2f1fa;
        --dim:#9c9ac0; --cx2:#ffffff0f; … ; color:var(--fg) }`.

   `#mstart` mora DENTRO de `#jogo` (conferido: `player/index.html`, o
   `<div class="screen" id="jogo">` é o único ancestral). Então tudo que
   está no painel BRANCO herda a palette ESCURA. Medido, tema claro, 1280:

     #jogmenos / #jogmais  1,12:1     (`.passos button{color:var(--fg)}`)
     #jogval / #dicadif b  1,10:1     (`.modal b{color:#f4f4f8}` cravado)
     #jogtxt / .xfechar    2,69:1     (`color:var(--dim)`)
     #avisovoz             1,94:1     (`.modal .exp{color:#b9b9c9}` cravado)
     .chave .par b         1,46–3,06:1 (cor do jogador, `style=` inline)

   Não adianta caçar um a um — foi o que a rodada passada fez e sobrou
   regressão. A superfície CLARA redeclara a palette CLARA, um lugar só.

   ⚠️ POR QUE ISTO GANHA da §47 mesmo com a mesma especificidade: herança de
   custom property é por PROXIMIDADE, não por ordem nem por peso. `#mstart`
   declara pra si; `#jogo` só declara pra quem NÃO declarou. Já `color` é
   valor herdado JÁ RESOLVIDO (a §47 põe `color:var(--fg)` no `#jogo`), então
   ele precisa ser reescrito à mão aqui — mesma pegadinha que a §47 anotou.

   ⚠️ OS VALORES SÃO CÓPIA DE `sistema.css` (o bloco `:root[tema=claro]`).
   Se um dia mudarem lá, mudam aqui. Não dá pra escrever `--fg:var(--fg)`
   (auto-referência é inválida) e não dá pra pôr `#mstart` no seletor de lá:
   a §47 carrega DEPOIS e, pro `#mfim`, venceria o empate.
   ========================================================================= */
:root[tema=claro] #mstart{
  color:var(--jg-fg);
  --bg:var(--n25);
  --bg2:var(--n50);
  --cx:var(--n0);
  --cx2:#00000012;
  --cx3:#0000001f;
  --fg:#16162b;
  --forte:var(--n700);
  --dim:var(--n500);
  --line:#0000001c;
  --borda:#00000026;
  --hair:#00000012;
  --good:var(--ok-claro);
  --atencao:var(--at-claro);
  --erro-bg:#ffe3e9; --erro-border:#e0567b66; --erro-fg:var(--er-claro);
  --ok-bg:#dcf6ea;   --ok-border:#067a5240;
  --s1:0 1px 2px #1a163808;
  --s2:0 1px 2px #1a16380a,0 8px 24px #1a163812;
  --s3:0 24px 60px #1a16381f;
  --luz-topo:inset 0 1px 0 #ffffff00;
  --sombra-cartao:var(--s2);
  --sombra:var(--s3);
  --panel:var(--n50);
  --fio:#00000022;
  --input-bg:#00000008;
  --btn-sec-bg:#00000010;
  --barra-trilho:#00000012;
  --marcador-off:#00000022;
  --n-contorno:#00000030;
}

/* ---- os hex cravados de `.modal …` -------------------------------------
   Três blocos do player pintam `.modal b`, `.modal .exp`, `.modal span` e
   `.modal .chk span` com hex claro, sob a nota "dentro dos véus escuros o
   tema NÃO vale". Vale pro `#mfim` e pros outros véus; não vale mais pro
   `#mstart`, que é o único que ficou branco. Aqui eles voltam pro token do
   próprio painel — que já resolve certo nos DOIS temas. */
:root[tema=claro] #mstart b,
:root[tema=claro] #mstart h2,
:root[tema=claro] #mstart h3{color:var(--jg-fg)}
:root[tema=claro] #mstart p,
:root[tema=claro] #mstart span,
:root[tema=claro] #mstart .dim,
:root[tema=claro] #mstart .exp,
:root[tema=claro] #mstart .chk span{color:var(--jg-dim)}
/* o `.rot` é o rótulo fininho de caixa alta: continua o mais fraco dos três,
   como no escuro, mas agora no tom claro (7,21:1 medido) */
:root[tema=claro] #mstart .rot,
:root[tema=claro] #mstart .porque,
:root[tema=claro] #mstart .ajuda{color:var(--jg-fraco)}
/* ⚠️ O `.selo-rec` VIRA DE LADO JUNTO. A §49 pôs `#04241a` (verde quase
   preto) nele com a justificativa escrita: "agora o `#mstart` carrega a
   palette ESCURA (§47), então o `--good` de dentro é a menta". Este bloco
   acabou de desfazer essa premissa: dentro do `#mstart` claro o `--good`
   é `#0a7d55`, o verde ESCURO, e o `#04241a` em cima dele mede 3,20:1.
   Branco sobre `#0a7d55` = 5,15:1. Mesma especificidade da §49 e mais
   embaixo no arquivo — que é como se ganha esse empate. */
:root[tema=claro] #mstart .rot .selo-rec,
:root[tema=claro] #mstart .selo-rec{color:#fff}

/* ---- a chave do mata-mata ----------------------------------------------
   `desenharChave()` escreve `style="color:#ff2d78"` (a cor do jogador) no
   `<b>`. Estilo inline não se vence com seletor, só com `!important` — e
   `!important` mataria justamente a cor que É a informação: quem é quem.
   As quatro cores foram calibradas contra fundo ESCURO (medem 4,84 a 9,98:1
   lá, e 1,46 a 3,06:1 sobre o painel branco). Então o que muda é o FUNDO: a
   chave vira um quadro escuro dentro do painel claro, e as cores voltam a
   ser as mesmas dos dois temas. */
:root[tema=claro] #mstart .chave .par{
  background:#14141c;border-color:#00000026;color:#f4f4f8;
}
:root[tema=claro] #mstart .chave .par.agora{
  background:#1b1732;border-color:var(--accent);
}
:root[tema=claro] #mstart .chave .par i{color:#b9b9c9}


/* =========================================================================
   ===== 55. OS CANTOS DA CAPA TÊM DONO ===================================

   Sete coisas moram por cima da mesma capa quadrada — ★ favoritar, ☰ menu,
   🎤 "tem voz", o selo da melhor nota, a duração, "áudio/vídeo", "gerada",
   "letra incompleta" e "trancada" — e três pares delas estavam LITERALMENTE
   na mesma coordenada. Medido na bancada:

     item 5  `.rec` (30×30, top:8 right:8) 100% coberto pelo `.maisp`
             (top:8 right:8 também). No dedo o `.maisp` fica sempre visível
             (`@media(hover:none)`), então o recorde some de vez.
     item 5  `.rec i` ("melhor") vaza 7,8 px do círculo de 30 px e para a
             0,2 px da borda da capa.
     item 6  11 px de 44 (25%) da borda esquerda do `.maisp` caíam sobre o
             `span.mini` 🎤 — `elementFromPoint` na linha do meio devolvia o
             `.mini`, dentro do `button.abrir`. Tocar ali COMEÇAVA A CANTAR
             em vez de abrir o menu. No mouse, 3 px de 36.
     item 12 `.trancado` e `.incompleta` os dois em `left:8;bottom:34`,
             mesmo `z-index:4`: 86,6×21,3 px de sobreposição, um escrito
             por cima do outro.

   A regra daqui pra frente é uma só: CADA CANTO TEM UM DONO, e o que sobra
   desce uma fileira. Quem manda no canto é sempre o alvo TOCÁVEL.
   ========================================================================= */

/* --- direita, 1ª fileira: o menu. É o único botão daquele lado. --------- */
/* --- direita, 2ª fileira: o 🎤. Sai de baixo do menu. ------------------
   58 = 8 (respiro) + 44 (o alvo de toque do menu) + 6 (folga). No mouse o
   menu tem 36 e sobra um vão de 8 px — vão não é defeito, sobreposição é. */
.card .mini:not(.tipo){top:58px;right:8px}
/* `.card .mini + .mini{right:40px}` existia pra dois selos DIVIDIREM a
   fileira de cima. Agora o `.tipo` mora embaixo à esquerda e o 🎤 tem a
   fileira só pra ele. */
.card .mini.tipo + .mini{right:8px}

/* --- esquerda, 2ª fileira: a melhor nota -------------------------------
   E vira PÍLULA, não círculo: o número e a palavra "melhor" nunca couberam
   em 30 px de diâmetro (era daí que vinha o vazamento de 7,8 px). */
.card .rec{
  top:58px;left:8px;right:auto;
  width:auto;min-width:30px;height:auto;
  border-radius:999px;padding:3px 9px 4px;line-height:1.05;
  z-index:3;
}
.card .rec i{margin-top:1px;white-space:nowrap;opacity:.85}

/* --- embaixo à esquerda: a pilha de selos ------------------------------
   `.mini.tipo` fica na base (bottom:8). Os outros três compartilhavam
   `bottom:34` e se escreviam por cima. As cadeias de irmão abaixo estão em
   ordem de especificidade CRESCENTE de propósito: a mais longa (os três
   presentes ao mesmo tempo) tem que ganhar das curtas.
   A ordem no HTML é `.tagauto` → `.incompleta` → `.trancado`. */
.card .tagauto,
.card .incompleta,
.card .trancado{bottom:34px}
.card .tagauto ~ .incompleta{bottom:60px}
.card .tagauto ~ .trancado,
.card .incompleta ~ .trancado{bottom:60px}
.card .tagauto ~ .incompleta ~ .trancado{bottom:86px}

/* --- o nome do artista (item 14) ---------------------------------------
   Medido: 27 de 60 `.art` cortados em 375 e 22 de 60 em 1280 — o rótulo da
   dificuldade tinha `flex:0 0 auto` e NUNCA cedia, então quem encolhia era
   sempre o artista, até "Coldplay" virar "Coldpl…". Agora a dificuldade
   também cede (as cinco bolinhas ficam; a PALAVRA é que sai), e o artista
   tem um piso de leitura. */
.card{container-type:inline-size}   /* é isto que faz a @container existir */
.card .sub .art{flex:1 1 auto;min-width:11ch}
/* a dificuldade também cede agora; e se ainda faltar, quem ganha reticência
   é a PALAVRA repetida em todo cartão, não o nome do artista */
.card .sub .dif{flex:0 1 auto;min-width:0;display:inline-flex;
  align-items:center;overflow:hidden}
.card .sub .difnome{overflow:hidden;text-overflow:ellipsis;min-width:0}


/* =========================================================================
   ===== 56. O RESTO DA AUDITORIA VISUAL ==================================
   ========================================================================= */

/* --- item 9: `[hidden]` derrotado por `display` -------------------------
   Medido: `#opmais` (`.opmais{display:flex}`), `#btpron` (`.mic{display:flex}`)
   e `#btpjog` (`#mstart .linkmais{display:block}`) ficavam VISÍVEIS com
   `hidden=true`. `[hidden]` do agente do usuário é só `display:none` com
   especificidade ZERO — qualquer regra de `display` do produto ganha dele.
   `!important` aqui não é preguiça: `#mstart .linkmais` tem um ID, então
   nenhum seletor sem `!important` alcança sem virar uma corrida de peso.
   ⚠️ CONFERIDO ANTES DE ESCREVER: varri o DOM atrás de `[hidden]` com
   `display != none` nas cinco telas. Deu quatro — `#opmais`, `#btpron`,
   `#btpjog` e `#qtdjog` — e os quatro DEVEM estar escondidos. Não há nada
   que apareça de propósito com `hidden`. */
[hidden]{display:none!important}

/* --- item 10: a barra de cima em 768–1079 ------------------------------
   Medido: 6 controles em 6 LINHAS, 244px de altura, e o `#temasel` com 768px
   de largura numa tela de 768. A causa é seca: `.barra-topo` não é filha do
   `<header class="topo">` (o header fecha antes dela), então a regra base
   `.topo .ferramentas{display:flex}` nunca casou com ela. Acima de 1080 e
   abaixo de 768 existem regras próprias; nesta faixa ela caía no `display`
   padrão de `<div>` — block — e cada filho pegava uma linha inteira. */
@media (min-width:768px) and (max-width:1079px){
  #lista > .barra-topo{
    display:flex;flex-wrap:wrap;align-items:center;gap:var(--e2);
    padding-inline:var(--e6);
  }
  /* a busca leva a primeira linha inteira, o resto divide a de baixo */
  #lista > .barra-topo > #busca{flex:1 1 100%;order:-1;margin-left:0;width:auto}
  #lista > .barra-topo > .filtros,
  #lista > .barra-topo > .btic-fila,
  #lista > .barra-topo > .temasel{flex:0 0 auto}
  #lista > .barra-topo > .btnovo{flex:0 0 auto;margin-left:auto}
  #lista > .barra-topo > .selperfil{flex:0 1 auto;min-width:0;max-width:170px}
}


/* --- item 13: `#pfila .cab` computava `display:block` ------------------
   Medido: o X caía EMBAIXO do título e encostado à esquerda, em (435,120)
   em vez de (811,84). Existia `#psubir .cab{display:flex…}` e o irmão
   `#pfila` tinha ficado sem — a caixa irmã de novo. */
#pfila .cab{
  display:flex;align-items:flex-start;justify-content:space-between;
  gap:var(--e3);
}
#pfila .cab > :first-child{min-width:0}
#pfila .cab .fechar{flex:0 0 auto}

/* --- item 16: `.bt2` tinha 6 usos e ZERO regras ------------------------
   Conferido no navegador: `document.querySelectorAll('.bt2')` achava os
   botões, e a varredura das folhas achava 0 regras casando `.bt2`. Todos
   saíam com a tinta do `.bt` primário — inclusive "Limpar a fila", que é
   destrutivo, do lado de "Fechar", com exatamente o mesmo peso visual
   (bg rgb(115,87,228), cor #fff, nos dois). Ação secundária tem que PARECER
   secundária; quem decide é o contorno, não o preenchimento. Mesma tinta do
   `.bt.sec` do `base.css`, que já era o secundário da casa. */
.bt.bt2,.bt2{
  background:var(--btn-sec-bg);color:var(--fg);
  border:1px solid var(--line);box-shadow:none;font-weight:500;
}
.bt.bt2:hover,.bt2:hover{
  background:color-mix(in srgb,var(--btn-sec-bg),var(--fg) 8%);
  border-color:var(--borda);
}

/* --- item 17: o X de tirar a foto no meio do rosto ---------------------
   Medido no dedo: `.avrem` com 44×44 em cima de um avatar de 60×60, cobrindo
   42×42 px da `<img>`, com o centro do X a 10 px do centro da foto. A folha
   pedia 22 (mouse) e 28 (dedo) — quem vencia era
   `@media(pointer:coarse){button{min-width:44px;min-height:44px}}`, porque
   `min-width` é OUTRA PROPRIEDADE e não briga com `width`, ela ganha sempre.
   Aqui o pedido da folha vira `min-*` também, que é a única linguagem em que
   as duas regras conversam. 28px passa o mínimo legal (WCAG 2.5.8 é 24×24)
   e a ação tem caminho alternativo: trocar a foto substitui.
   E o selo sai mais pra fora do círculo, pra não pousar no rosto. */
.avrem{min-width:22px;min-height:22px;width:22px;height:22px}
@media (pointer:coarse){
  .avrem{min-width:28px;min-height:28px;width:28px;height:28px}
}

/* --- item 18: a barra do jogo virava um amontoado redondo --------------
   Medido em 375: 10 botões em 4 linhas, caixa de 187×148 px com raio 999.
   Em 320: 5 linhas, 160×194. Em 1280: uma linha.
   A causa não é o `flex-wrap`. `.barrajogo` é `position:absolute;left:50%`,
   então o espaço disponível pra ela é da METADE da tela até a borda direita
   — 160 px numa tela de 320. O `max-width:calc(100vw - 24px)` nunca chegou a
   valer porque a largura já tinha sido resolvida antes dele.
   `width:max-content` faz ela pedir a linha inteira e o `max-width` corta. */
.barrajogo{width:max-content}

/* --- item 21: o selo da melhor nota --------------------------------------
   Os fundos são hex FIXO (não seguem tema), mas a tinta do texto era herdada
   e virava com o tema. Medido: no escuro f1 2,63:1, f2 3,16:1, f3 3,88:1; no
   claro f0 3,04:1 e f3 4,08:1. Fundo fixo pede tinta fixa — a mesma nos dois
   temas, calculada contra o fundo de cada faixa:
     f0 #c4145a + #fff     = 8,71:1
     f1 #c98a00 + #16162b  = 6,02:1
     f2 #0f9b6c + #16162b  = 5,01:1
     f3 tinha degradê de skin (mudava com a paleta): vira #5b34ce + #fff
                            = 7,43:1
   E o `opacity:.75` do "melhor" derrubava todas elas em ~25%: 2,09 a 3,43.
   A hierarquia sai do corpo (7,5px contra 14) e do peso, não da opacidade. */
.card .rec.f0{background:#c4145a;color:#fff}
.card .rec.f1{background:#c98a00;color:#16162b}
.card .rec.f2{background:#0f9b6c;color:#16162b}
.card .rec.f3{background:#5b34ce;color:#fff}
.card .rec i{opacity:1}

/* --- item 23: o aviso de microfone por cima do X ------------------------
   Medido: `#micaviso` cobria 18×18 px do `.xfechar`. O aviso é um bloco de
   largura cheia dentro do painel; o X é absoluto no canto do modal. Basta o
   aviso terminar antes de onde o X começa. */
#mstart .micaviso{margin-right:calc(var(--toque,44px) + 6px)}


/* `.hi.destaque span` ("acerto") media 2,83:1 no tema claro: pintava com o
   `--accent` do claro (#5b34ce) sobre o palco escuro, e aqui morava um
   remendo só pra ele. Desde 13/09/2026 o `#tela` recebe o accent de palco
   escuro na fonte (fim da §47) e o remendo saiu. */

/* --- achado da varredura final, não estava na lista ---------------------
   `#pfila .filai` em 320: a fileira de 4 botões (156px fixos) não cabia na
   coluna `auto` da grade e vazava 48px pra fora da linha — `#pfila
   .filalista` media `222<288` e ganhava barra de rolagem horizontal DENTRO
   do painel. Em 375 ainda sobravam 11px. Abaixo de 400 os botões descem
   pra uma linha própria, alinhados à direita. */
@media (max-width:400px){
  #pfila .filai{grid-template-columns:26px 1fr}
  #pfila .filabts{grid-row:auto;grid-column:1 / -1;justify-content:flex-end;
    margin-top:2px}
}

/* =========================================================================
   60. CELULAR — a biblioteca abre na música, não no cabeçalho
   Medido (11/09/2026, 390×844): 379 px de cromo antes da primeira capa, 45%
   da tela, em cinco faixas: marca, termos, conta, busca com Filtros/+ Nova/
   ícones, o seletor de idioma numa linha inteira e as playlists. As seções
   16 e 19 e o "item 11" empilhavam consertos no mesmo lugar; esta substitui
   as três (apagadas) e deixa três faixas, cada uma com um trabalho:
     1. quem é você: marca à esquerda, cota e conta à direita
     2. achar música: busca, filtro, sortear, jukebox
     3. playlists: uma fileira só, que rola de lado
   "+ Nova música" e a engrenagem saem daqui porque a barra de baixo já tem
   Enviar e Ajustes; idioma e tema já moram em Ajustes, e Termos/Privacidade
   ficam no rodapé de Ajustes. Nada some: tudo continua a um toque.
   ========================================================================= */
@media (max-width:767px){
  #lista{
    --ic-conta:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round'%3E%3Ccircle cx='12' cy='8.2' r='3.7'/%3E%3Cpath d='M4.6 19.6c1.5-3.4 4.1-5.1 7.4-5.1s5.9 1.7 7.4 5.1'/%3E%3C/svg%3E");
    --ic-filtro:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round'%3E%3Cpath d='M4 7h9M17 7h3M4 17h3M11 17h9'/%3E%3Ccircle cx='15' cy='7' r='2'/%3E%3Ccircle cx='9' cy='17' r='2'/%3E%3C/svg%3E");
  }

  /* --- faixa 1: quem é você --- */
  #lista > header.topo{
    position:relative;
    display:flex;flex-wrap:nowrap;align-items:center;gap:var(--e2);
    padding:var(--e3) var(--e3) var(--e2);
    border-bottom:0;
  }
  #lista > header.topo .marca{flex:1 1 auto;min-width:0;align-items:baseline;gap:var(--e2)}
  #lista > header.topo h1{font-size:var(--t-xl);white-space:nowrap}
  /* o contador cortado virava "60..."; no celular a faixa é da marca e da conta */
  #lista > header.topo .cnt{display:none}
  #lista > header.topo > .lat-legal{display:none}
  #lista > header.topo > .conta{
    flex:0 0 auto;order:0;margin:0;padding:0;gap:var(--e2);
    background:none;border:0;border-radius:0;flex-wrap:nowrap;align-items:center;
  }
  /* A conta vira um botão redondo. O nome continua sendo o nome acessível do
     link (só a fonte vai a zero), e o "sair" mora na própria /conta. */
  #lista > header.topo > .conta a[href="/conta"]{
    width:var(--toque);height:var(--toque);min-width:var(--toque);padding:0;
    justify-content:center;font-size:0;border-radius:50%;
    background:var(--cx2);border:1px solid var(--line);color:var(--fg);
  }
  #lista > header.topo > .conta a[href="/conta"]::before{
    content:"";width:22px;height:22px;background:currentColor;
    -webkit-mask:var(--ic-conta) center/contain no-repeat;
            mask:var(--ic-conta) center/contain no-repeat;
  }
  #lista > header.topo > .conta a[href="/sair"],
  #lista > header.topo > .conta .cotabarra,
  #lista > header.topo > .conta .subirplano{display:none}
  #lista > header.topo > .conta .cotinha{order:-1;white-space:nowrap}

  /* --- faixa 2: achar música --- */
  #lista > .barra-topo{
    position:relative;
    display:flex;flex-wrap:wrap;align-items:center;gap:var(--e2);
    padding:0 var(--e3) var(--e2);
  }
  #lista > .barra-topo > #busca{flex:1 1 0;min-width:0;width:auto;margin:0;order:0}
  #lista > .barra-topo > .filtros{flex:0 0 auto;order:1;position:static}
  #lista > .barra-topo > .btic-fila{flex:0 0 auto;order:2}
  #lista > .barra-topo > .btnovo,
  #lista > .barra-topo > .btic-fila > [data-ic="config"],
  #lista > .barra-topo > #idiomatopo,
  #lista > .barra-topo > .temasel{display:none}
  /* perfil de quem canta, quando existe: faixa própria, porque é escolha de verdade */
  #lista > .barra-topo > #selperfil{flex:1 1 100%;order:3;max-width:none}
  /* Filtros vira ícone; a palavra fica pro leitor de tela e a bolinha de contagem continua */
  #lista > .barra-topo .btfiltros{
    position:relative;width:var(--toque);min-width:var(--toque);padding:0;justify-content:center;
  }
  #lista > .barra-topo .btfiltros > span{
    position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;
    clip:rect(0 0 0 0);white-space:nowrap;border:0;
  }
  #lista > .barra-topo .btfiltros::before{
    content:"";width:20px;height:20px;background:currentColor;
    -webkit-mask:var(--ic-filtro) center/contain no-repeat;
            mask:var(--ic-filtro) center/contain no-repeat;
  }
  #lista > .barra-topo .btfiltros .pino{position:absolute;top:-4px;right:-4px}
  /* o botão agora fica no meio da faixa: o menu abre na largura da faixa,
     e não a partir do botão (a 320 ele sairia 46 px pra fora da tela) */
  #lista > .barra-topo .filtros-pop{left:var(--e3);right:var(--e3);min-width:0;top:calc(100% - var(--e1))}

  /* --- faixa 3: playlists numa fileira que rola --- */
  /* ⚠️ `flex:0 0 auto`. #lista é coluna flex; com `overflow` diferente de
     visible o `min-height:auto` vira 0 e a coluna espremeu a fileira pra 8 px —
     os chips saíam cortados ao meio (medido no print de 390). */
  #lista > .abas{
    flex:0 0 auto;
    flex-wrap:nowrap;overflow-x:auto;overscroll-behavior-x:contain;
    scroll-snap-type:x proximity;scrollbar-width:none;
    padding:0 var(--e8) var(--e2) var(--e3);
    -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - var(--e7)),transparent);
            mask-image:linear-gradient(90deg,#000 calc(100% - var(--e7)),transparent);
  }
  #lista > .abas::-webkit-scrollbar{display:none}
  #lista > .abas > .aba{flex:0 0 auto;scroll-snap-align:start;white-space:nowrap}
}
/* a 320 a marca e a cota não cabem com o número de músicas do lado */
/* Barra de baixo: a 390 cada destino tem ~75 px e "Fila da festa" saía
   "Fila da fes…". No celular aparece "Fila"; o nome inteiro continua sendo o
   que o leitor de tela lê (o curto é aria-hidden, o longo só some da vista). */
.lat-nav .rot-curto{display:none}
@media (max-width:767px){
  #lista > .topo > .lat-nav .rot-longo{
    position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;
    clip:rect(0 0 0 0);white-space:nowrap;border:0;
  }
  #lista > .topo > .lat-nav .rot-curto{display:inline}
}
/* a 320 "StarSinger" passava por baixo do "2 de 3" (medido no print) */
@media (max-width:359px){
  #lista > header.topo h1{font-size:var(--t-base)}
  #lista > header.topo .marca-ic{display:none}
}

/* =========================================================================
   61. CELULAR — Configurações vira folha que sobe de baixo
   Medido (390×844): cartão no meio da tela com as 9 abas quebradas em TRÊS
   fileiras (~300 px) antes do primeiro ajuste, e "Fechar" rolando junto com
   a lista. Na folha: largura inteira, abas numa fileira que rola e gruda no
   topo, e Fechar/Restaurar presos embaixo, onde o polegar alcança.
   ========================================================================= */
@media (max-width:767px){
  #pconfig.painel{place-items:end stretch;padding:0}
  #pconfig .cx{
    width:100%;max-width:none;
    max-height:calc(100dvh - var(--e6) - env(safe-area-inset-top,0px));
    border-radius:var(--r5) var(--r5) 0 0;border-bottom:0;
    padding:var(--e2) var(--e4) 0;overscroll-behavior:contain;
  }
  /* a alça diz que é uma folha e de onde ela veio */
  #pconfig .cx::before{
    content:"";display:block;width:36px;height:5px;margin:0 auto var(--e3);
    border-radius:999px;background:var(--line);
  }
  #pconfig .abascfg{
    position:sticky;top:calc(var(--e2) * -1);z-index:3;
    flex-wrap:nowrap;overflow-x:auto;scroll-snap-type:x proximity;
    margin:0 calc(var(--e4) * -1) var(--e4);padding:calc(var(--e2) * 2) var(--e4) var(--e2);
    border:0;border-radius:0;background:var(--cx);
    box-shadow:0 1px 0 var(--line);
  }
  #pconfig .abascfg button{scroll-snap-align:start}
  #pconfig .cfglegal{display:flex}
  #pconfig .acoes{
    position:sticky;bottom:0;z-index:3;flex-wrap:nowrap;justify-content:stretch;
    margin:var(--e4) calc(var(--e4) * -1) 0;
    padding:var(--e3) var(--e4) calc(var(--e3) + env(safe-area-inset-bottom,0px));
    background:var(--cx);box-shadow:0 -1px 0 var(--line);
  }
  #pconfig .acoes .bt{flex:1 1 0;min-width:0;white-space:nowrap;
    font-size:var(--t-md);padding-inline:var(--e2)}
}
@media (max-width:767px) and (prefers-reduced-motion:no-preference){
  #pconfig .cx{transition:transform .34s cubic-bezier(.32,.72,0,1)}
  @starting-style{
    #pconfig.on .cx{transform:translateY(100%)}
  }
}
/* rodapé legal de Ajustes: no celular a lateral (e os links dela) não existe */
.cfglegal{display:none;justify-content:center;align-items:center;gap:var(--e2);
  margin:var(--e5) 0 0;font-size:var(--t-sm);color:var(--dim)}
.cfglegal a{color:var(--dim);text-decoration:none;min-height:var(--toque);
  display:inline-flex;align-items:center;padding:0 var(--e2)}
.cfglegal a:hover{color:var(--fg)}
