:root {
  --fundo: #14161a; --painel: #1d2026; --borda: #2e333b; --texto: #e8eaed; --suave: #9aa0a6;
  --acento: #4da3ff; --acorde: #ffb454; --perigo: #ff6b6b; --ok: #5ccf8a;
  --fonte-cifra: 22px;
}
@media (prefers-color-scheme: light) {
  :root { --fundo: #f5f6f8; --painel: #fff; --borda: #d9dde3; --texto: #1c1f24; --suave: #5f6670; --acorde: #b25b00; --acento: #1565c0; }
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--fundo); color: var(--texto); font: 16px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
a { color: var(--acento); }
h1 { font-size: 1.5rem; margin: .2em 0 .4em; } h2 { font-size: 1.15rem; margin: 1.2em 0 .4em; }
.topo { display: flex; align-items: center; gap: 1rem; padding: .6rem 1rem; background: var(--painel); border-bottom: 1px solid var(--borda); flex-wrap: wrap; }
.marca { font-weight: 700; text-decoration: none; color: var(--texto); }
.menu { display: flex; gap: 1rem; align-items: center; margin-left: auto; flex-wrap: wrap; }
.menu a, .drop summary { text-decoration: none; color: var(--texto); cursor: pointer; padding: .5rem .2rem; display: inline-block; }
.drop { position: relative; }
.drop-lista { position: absolute; right: 0; top: 100%; min-width: 250px; background: var(--painel); border: 1px solid var(--borda); border-radius: 8px; padding: .4rem; z-index: 10; box-shadow: 0 6px 20px rgba(0,0,0,.35); }
.drop:not(.dir) .drop-lista { left: 0; right: auto; }
.drop-lista a, .drop-lista .link { display: block; padding: .6rem .7rem; border-radius: 6px; width: 100%; text-align: left; }
.drop-lista a:hover, .drop-lista .link:hover { background: var(--borda); }
.pagina { max-width: 900px; margin: 0 auto; padding: 1rem 16px 4rem; }
.caixa { background: var(--painel); border: 1px solid var(--borda); border-radius: 10px; padding: 1rem; margin: 1rem 0; }
.estreita { max-width: 420px; margin: 2rem auto; }
.cabecalho { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; flex-wrap: wrap; }
.cartoes { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1rem; margin: 1rem 0; }
.cartao { display: block; background: var(--painel); border: 1px solid var(--borda); border-radius: 10px; padding: 1rem; text-decoration: none; color: var(--texto); }
.cartao span { display: block; color: var(--suave); font-size: .9rem; }
label { display: block; margin: .7rem 0; font-size: .9rem; color: var(--suave); }
label input, label select, label textarea, input, select, textarea { width: 100%; padding: .7rem; margin-top: .25rem; background: var(--fundo); color: var(--texto); border: 1px solid var(--borda); border-radius: 8px; font: inherit; }
input[type=checkbox] { width: auto; margin-right: .4rem; }
.mono, .cifra { font-family: ui-monospace, Menlo, Consolas, "DejaVu Sans Mono", monospace; }
.botao, button.botao { display: inline-block; padding: .65rem 1rem; background: var(--acento); color: #fff; border: 0; border-radius: 8px; font: inherit; text-decoration: none; cursor: pointer; min-height: 44px; }
.botao.secundario { background: var(--borda); color: var(--texto); }
.botao.perigo, button.perigo { background: var(--perigo); color: #111; }
.botao.pequeno { padding: .35rem .7rem; min-height: 36px; font-size: .9rem; }
.botao.grande { padding: .9rem 1.4rem; font-size: 1.1rem; width: auto; }
.estreita .botao.grande { width: 100%; margin-top: .5rem; }
button:disabled { opacity: .4; }
button.link { background: none; border: 0; color: var(--acento); font: inherit; cursor: pointer; padding: 0; }
.linha { display: flex; gap: .5rem; align-items: flex-end; flex-wrap: wrap; margin: .5rem 0; }
.linha input, .linha select { width: auto; flex: 1 1 140px; }
.linha form { margin: 0; }
.inline { margin: 0; flex: 1 1 140px; } .grow { flex: 3 1 220px; }
.lista, .itens { list-style: none; padding: 0; margin: .5rem 0; }
.lista li, .item { background: var(--painel); border: 1px solid var(--borda); border-radius: 10px; padding: .7rem .9rem; margin: .5rem 0; display: flex; justify-content: space-between; align-items: center; gap: .6rem; flex-wrap: wrap; }
.item { display: block; } .item-topo { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; }
.vazio, .nota { color: var(--suave); font-size: .9rem; } small { color: var(--suave); }
.tom { background: var(--borda); border-radius: 6px; padding: .1rem .5rem; font-weight: 700; font-family: ui-monospace, monospace; }
.aviso { padding: .7rem 1rem; border-radius: 8px; margin: .5rem 0; background: var(--painel); border: 1px solid var(--borda); }
.aviso.success { border-color: var(--ok); } .aviso.error { border-color: var(--perigo); }
.erro { display: block; color: var(--perigo); font-size: .85rem; } .errorlist { color: var(--perigo); list-style: none; padding: 0; }
.cifra { white-space: pre; overflow-x: auto; font-size: var(--fonte-cifra); line-height: 1.35; margin: .5rem 0; }
.c { color: var(--acorde); font-weight: 700; }
.cifra .l { display: block; transition: background-color .8s ease; border-radius: 4px; }
/* Modo só letra: some com as linhas de acordes e os acordes entre colchetes; a letra quebra a linha se for longa */
body.letra .cifra .l.acordes, body.letra .cifra .l .c { display: none; }
body.letra .cifra { white-space: pre-wrap; overflow-x: visible; font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; line-height: 1.5; }
/* Lista pública de repertórios (amostra) */
.publicos li > div { display: flex; flex-direction: column; gap: .1rem; min-width: 0; flex: 1 1 220px; }
.publicos li { padding: 1rem 1.1rem; }
/* Ponte entre tons (tela do repertório) */
.ponte { margin-top: .6rem; padding: .6rem .8rem; border-left: 4px solid var(--acorde); background: var(--fundo); border-radius: 6px; display: flex; flex-direction: column; gap: .2rem; }
.acordes .c { margin-right: .8rem; font-size: 1.2rem; }
/* ===================== Palco em slides (paisagem 16:9) =====================
   Cada slide é um quadro fixo de 1280x720 escalado para caber na tela (--escala vem do JS): o que o músico vê é igual
   ao que o projetor mostra. O tamanho da letra do slide é a variável --f (px do quadro), ajustada pelo JS. */
body.palco { margin: 0; height: 100vh; overflow: hidden; background: #000; color: #f4f4f4; --barra: 76px; }
.pagina-palco { position: fixed; left: 0; right: 0; top: 0; bottom: var(--barra); background: #000; overflow: hidden; }
body.projecao .pagina-palco { bottom: 0; }
/* Troca de slide: ao avançar o novo sobe de baixo e o atual sai por cima; ao voltar, o contrário. */
.pagina-palco.sobe-entra, .pagina-palco.desce-entra { z-index: 2; }
.pagina-palco.sobe-sai, .pagina-palco.desce-sai { z-index: 1; }
.pagina-palco.sobe-entra { animation: sobe-entra .45s cubic-bezier(.22, .8, .3, 1) both; }
.pagina-palco.sobe-sai { animation: sobe-sai .45s cubic-bezier(.22, .8, .3, 1) both; }
.pagina-palco.desce-entra { animation: desce-entra .45s cubic-bezier(.22, .8, .3, 1) both; }
.pagina-palco.desce-sai { animation: desce-sai .45s cubic-bezier(.22, .8, .3, 1) both; }
@keyframes sobe-entra { from { transform: translateY(100%); } to { transform: translateY(0); } }
@keyframes sobe-sai { from { transform: translateY(0); } to { transform: translateY(-100%); } }
@keyframes desce-entra { from { transform: translateY(-100%); } to { transform: translateY(0); } }
@keyframes desce-sai { from { transform: translateY(0); } to { transform: translateY(100%); } }
.quadro { position: absolute; left: 50%; top: 50%; width: 1280px; height: 720px; margin: -360px 0 0 -640px;
  transform: scale(var(--escala, 1)); background: #101216; color: #f6f6f6; display: flex; flex-direction: column;
  overflow: hidden; --f: 44px; font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
.palco-cab { flex: none; display: flex; align-items: baseline; gap: 18px; padding: 18px 44px 0; color: #9aa0a6; font-size: 26px; }
.palco-cab h1 { margin: 0; flex: 1; font-size: 30px; font-weight: 600; color: #d8dbe0; line-height: 1.2; }
.palco-cab h1 small { font-size: 22px; font-weight: 400; color: #8a9099; margin-left: 12px; }
.palco-cab .tom { font-size: 24px; background: #2a2e35; color: #e8eaed; border-radius: 8px; padding: 0 .55em; }
body.projecao .palco-cab:not(.primeira) h1, body.projecao .palco-cab .tom, body.projecao .palco-cab .num { visibility: hidden; }
.corpo { flex: 1; min-height: 0; display: flex; flex-direction: column; padding: 8px 64px 26px; overflow: hidden; }
.conteudo { margin: auto 0; width: 100%; text-align: center; font-size: var(--f); line-height: 1.3; font-weight: 700; }
/* Cada linha da música: acordes presos às palavras (quebra de linha automática nas margens do slide) */
.u { display: block; margin: .08em 0; }
.u.vazia { height: .45em; margin: 0; }
.u.com-acordes { margin: .22em 0; }
.u.rotulo { font-size: .5em; color: #9aa0a6; letter-spacing: .08em; text-transform: uppercase; margin-top: .5em; }
.u.acordes { color: var(--acorde); font-weight: 700; }
.u.acordes .c { margin: 0 .35em; font-size: 1em; }
.g { display: inline-block; white-space: nowrap; vertical-align: bottom; }
.p { display: inline-flex; flex-direction: column; vertical-align: bottom; }
.p .ac { font-size: .72em; line-height: 1.2; font-weight: 700; color: var(--acorde); text-align: left; padding-right: .3em; }
.p .tx { white-space: pre; }
body.letra .u.acordes, body.letra .u.rotulo, body.letra .p .ac { display: none; }
body.letra .u.com-acordes { margin: .08em 0; }
/* Ponte entre tons, textos e imagens também são slides */
.ponte-pagina .conteudo p { margin: .25em 0; }
.ponte-pagina .nota { font-size: .5em; color: #9aa0a6; }
.ponte-titulo { font-size: 1.3em; margin: .1em 0; font-weight: 700; }
.acordes.grande .c { font-size: 1.7em; margin: 0 .4em; }
.slide { position: absolute; inset: 0; background: #000; display: flex; align-items: center; justify-content: center; }
.slide img { width: 100%; height: 100%; object-fit: contain; display: block; }
.slide .legenda { position: absolute; left: 0; right: 0; bottom: 0; padding: 60px 48px 40px; text-align: center; color: #fff;
  font-size: calc(var(--f) * .7); background: linear-gradient(transparent, rgba(0,0,0,.75)); white-space: pre-wrap; }
.interludio { flex: 1; min-height: 0; display: flex; flex-direction: column; padding: 34px 0 0; }
.interludio h1 { flex: none; margin: 0 64px; text-align: center; font-size: 52px; line-height: 1.2; color: #fff; }
.texto-grande .conteudo { white-space: pre-wrap; }
.miniatura { max-height: 90px; max-width: 100%; border-radius: 6px; border: 1px solid var(--borda); margin: .4rem 0; }
/* Barra de controles */
.barra-palco { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; display: flex; flex-wrap: wrap; gap: .4rem; align-items: center;
  justify-content: center; padding: 8px calc(8px + env(safe-area-inset-right)) calc(8px + env(safe-area-inset-bottom)) calc(8px + env(safe-area-inset-left));
  background: #111; border-top: 1px solid #333; }
.barra-palco .botao { min-width: 48px; min-height: 48px; padding: .5rem .8rem; }
#posicao { min-width: 110px; text-align: center; color: var(--suave); font-size: .9rem; }
/* Janela do projetor (telão): barra de controles só aparece ao passar o mouse na base da tela */
body.projecao .barra-palco { opacity: 0; transition: opacity .3s; }
body.projecao .barra-palco:hover { opacity: 1; }
body.projecao { cursor: none; } body.projecao .barra-palco:hover { cursor: default; }
/* Celular em pé: a barra quebra em duas linhas, sem cortar botões nas laterais.
   Linha de cima: demais controles dividindo a largura; linha de baixo: ◀ posição ▶ (grandes, junto ao polegar). */
@media (max-width: 640px) {
  .barra-palco { gap: .35rem; padding-left: calc(6px + env(safe-area-inset-left)); padding-right: calc(6px + env(safe-area-inset-right)); }
  .barra-palco > * { order: -1; }
  .barra-palco .rotulo { display: none; }   /* no celular em pé o botão Fechar mostra só o ✕ */
  .barra-palco .botao { flex: 1 1 0; min-width: 0; padding: .4rem .2rem; text-align: center; }
  .barra-palco #ant, .barra-palco #prox { order: 1; flex: 1 1 0; min-height: 52px; }
  .barra-palco #posicao { order: 1; flex: 0 0 auto; min-width: 0; padding: 0 .4rem; font-size: .9rem; }
  .barra-palco::before { content: ""; order: 0; flex-basis: 100%; height: 0; }  /* força a quebra de linha */
}
/* Arquivo offline: não há para onde "voltar", então o botão Fechar só existe na janela do projetor */
body.offline:not(.projecao) #sair { display: none; }
#baixar-offline { margin-left: .6rem; }
#indice, #editor-slides { position: fixed; inset: 0; background: rgba(0,0,0,.96); padding: 1rem; overflow-y: auto; z-index: 40; }
#indice li { margin: .6rem 0; font-size: 1.2rem; }
#indice li.sub { margin: .1rem 0 .1rem 1.6rem; font-size: .95rem; }
#aviso-palco { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(var(--barra) + 14px); z-index: 50; max-width: 90vw;
  background: #222; color: #fff; border: 1px solid #555; border-radius: 8px; padding: .6rem 1rem; text-align: center; }
/* Editor de slides */
#editor-slides { max-width: 900px; margin: 0 auto; }
.ed-slide { margin: .8rem 0 .3rem; color: var(--acento); font-weight: 700; }
.ed-div { display: block; width: 100%; margin: .45rem 0; padding: .5rem; background: none; color: var(--suave); border: 1px dashed #444; border-radius: 6px; font: inherit; font-size: .9rem; cursor: pointer; }
.ed-div.ativo { border-style: solid; border-color: var(--acento); color: var(--acento); font-weight: 700; }
.ed-u { text-align: center; font-size: 22px; line-height: 1.3; }
.ed-acoes { position: sticky; bottom: 0; display: flex; flex-wrap: wrap; gap: .5rem; padding: .8rem 0; background: rgba(0,0,0,.96); }
/* Repertório: lista única de itens, com seleção e ações na mesma linha */
.lista-itens { list-style: none; padding: 0; margin: .5rem 0; }
.linha-item { background: var(--painel); border: 1px solid var(--borda); border-radius: 10px; margin: .4rem 0; }
.linha-item.sel { border-color: var(--acento); box-shadow: 0 0 0 1px var(--acento); }
.item-linha { display: flex; align-items: center; gap: .6rem; padding: .5rem .7rem; flex-wrap: nowrap; }
.item-linha .n { color: var(--suave); min-width: 1.6rem; text-align: right; }
.item-linha .rotulo-item { flex: 1; min-width: 0; text-align: left; background: none; border: 0; color: var(--texto); font: inherit; cursor: pointer; padding: .4rem 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.item-linha .rotulo-item strong { font-weight: 600; }
.item-linha .acoes { display: flex; gap: .3rem; flex: none; }
.item-linha .acoes form { margin: 0; }
.item-linha .acoes .botao { min-width: 40px; min-height: 40px; padding: .3rem .55rem; }
.item-detalhe { padding: .2rem .9rem .9rem; border-top: 1px solid var(--borda); }
.item-detalhe .ponte { margin-top: .6rem; }
.marcador { width: 1.2rem; height: 1.2rem; border-radius: 50%; border: 2px solid var(--suave); flex: none; }
.linha-item.sel .marcador { border-color: var(--acento); background: var(--acento); }
.lista-musicas { max-height: 300px; overflow-y: auto; border: 1px solid var(--borda); border-radius: 8px; padding: .3rem .6rem; margin: .5rem 0; }
.lista-musicas label { display: flex; gap: .6rem; align-items: center; margin: 0; padding: .55rem 0; border-bottom: 1px solid var(--borda); color: var(--texto); font-size: 1rem; }
.lista-musicas label:last-child { border-bottom: 0; }
.lista-musicas input[type=checkbox] { width: 1.2rem; height: 1.2rem; margin: 0; flex: none; }
.recolher > summary { cursor: pointer; font-weight: 600; padding: .3rem 0; }
[hidden] { display: none !important; }
@media (max-width: 600px) { .menu { gap: .4rem; } .topo { padding: .5rem .75rem; } }

/* Janela do projetor: fundo claro e letra preta (melhor de ler projetado) */
body.projecao, body.projecao .pagina-palco { background: #fff; }
body.projecao .quadro { background: #fff; color: #000; }
body.projecao .pagina-imagem .quadro, body.projecao .slide { background: #000; color: #fff; }
body.projecao .palco-cab, body.projecao .palco-cab h1, body.projecao .u.rotulo, body.projecao .ponte-pagina .nota { color: #333; }
body.projecao .u.acordes, body.projecao .p .ac { color: #b45309; }
body.projecao .interludio h1 { color: #000; }

/* Tela cheia: sem a barra (um toque no centro a mostra) e com uma seta em cada lado */
.seta-lado { display: none; position: fixed; top: 50%; z-index: 25; width: 56px; height: 96px; margin-top: -48px; padding: 0;
  border: 0; font-size: 28px; color: #fff; background: rgba(60, 130, 255, .45); cursor: pointer; }
.seta-lado:disabled { opacity: .15; }
.seta-lado.esq { left: 0; border-radius: 0 14px 14px 0; }
.seta-lado.dir { right: 0; border-radius: 14px 0 0 14px; }
body.tela-cheia:not(.projecao) .seta-lado { display: block; }
body.tela-cheia .barra-palco { transform: translateY(105%); transition: transform .2s; }
body.tela-cheia.barra-visivel .barra-palco { transform: none; }
body.tela-cheia { --barra: 0px; }

/* Página só com o título, antes de cada música */
.capa { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px; padding: 0 80px; text-align: center; }
.capa h1 { margin: 0; font-size: 84px; line-height: 1.15; color: #fff; }
.capa .capa-artista { margin: 0; font-size: 38px; color: #9aa0a6; }
.capa .tom { font-size: 30px; background: #2a2e35; color: #e8eaed; border-radius: 10px; padding: 2px .7em; }
body.projecao .capa h1 { color: #000; }
body.projecao .capa .capa-artista { color: #333; }
body.projecao .capa .tom { background: #e6e8ec; color: #222; }

/* ---- Versículos da Bíblia (slide, formulário, troca de versão) ---- */
.u.v { text-align: center; }
.vn { font-size: .5em; color: #9aa0a6; font-weight: 400; margin-right: .25em; vertical-align: super; }
.troca-versao { border: 0; font: inherit; font-size: 24px; cursor: pointer; }
.capa .troca-versao { font-size: 30px; }
/* Slide de versículo: referência e versão no rodapé */
.palco-cab.biblia { margin: 0 44px; padding: 10px 0 6px; border-top: 1px solid #2a2e35; align-items: center; }
.jesus { color: #ff5c5c; }
body.projecao .jesus { color: #c00000; }
body.projecao .palco-cab.biblia { border-top-color: #bbb; }
.palco-cab.biblia .tom { text-transform: uppercase; }
.rodape-biblia { flex: none; padding: 0 44px 12px; text-align: center; font-size: 16px; color: #8a9099; }
body.projecao .vn, body.projecao .rodape-biblia { color: #555; }
body.projecao .palco-cab.biblia .tom, body.projecao .palco-cab.biblia .num { visibility: visible; }
body.projecao .troca-versao { pointer-events: none; }
.painel-versiculo { position: fixed; inset: 0; background: rgba(0,0,0,.96); padding: 1rem; overflow-y: auto; z-index: 45; max-width: 900px; margin: 0 auto; }
.menu-versao { position: fixed; z-index: 60; background: var(--painel); border: 1px solid var(--borda); border-radius: 8px; padding: .3rem; min-width: 230px; box-shadow: 0 6px 20px rgba(0,0,0,.5); }
.menu-versao button { display: block; width: 100%; text-align: left; background: none; border: 0; color: var(--texto); padding: .6rem .7rem; font: inherit; cursor: pointer; border-radius: 6px; }
.menu-versao button:hover { background: var(--borda); }
.menu-versao small { color: var(--suave); }
.form-versiculo .vf-linha { display: flex; gap: .7rem; flex-wrap: wrap; align-items: flex-end; }
.form-versiculo .vf-linha > label { flex: 1 1 140px; }
.form-versiculo .vf-livro { position: relative; flex: 2 1 240px; }
.form-versiculo .vf-info { flex: 1 1 100%; }
.vf-sugestoes { position: absolute; left: 0; right: 0; top: 100%; z-index: 20; margin: 0; padding: .2rem; list-style: none; background: var(--painel); border: 1px solid var(--borda); border-radius: 8px; box-shadow: 0 6px 20px rgba(0,0,0,.4); }
.vf-sugestoes li { padding: .55rem .7rem; border-radius: 6px; cursor: pointer; color: var(--texto); }
.vf-sugestoes li.ativo, .vf-sugestoes li:hover { background: var(--borda); }
.vf-todos { border: 1px solid var(--borda); border-radius: 8px; padding: .3rem .8rem .8rem; margin: .5rem 0; max-height: 45vh; overflow-y: auto; }
.vf-todos h3 { margin: .8rem 0 .4rem; font-size: .95rem; color: var(--suave); }
.vf-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: .4rem; }
.vf-grade button { padding: .5rem; background: var(--fundo); color: var(--texto); border: 1px solid var(--borda); border-radius: 6px; font: inherit; cursor: pointer; }
.vf-grade button:hover { border-color: var(--acento, #4da3ff); }
.vf-previa { margin: .6rem 0; max-height: 28vh; overflow-y: auto; color: var(--texto); }
.vf-previa p { margin: .3rem 0; line-height: 1.4; } .vf-previa sup { color: var(--suave); }

/* Página da ponte: nome da próxima música */
.ponte-proxima { margin: 1.1em 0 0; font-size: 26px; color: #9aa0a6; font-weight: 400; }
.ponte-proxima strong { display: block; font-size: 48px; color: #fff; font-weight: 700; line-height: 1.2; }
body.projecao .ponte-proxima { color: #333; }
body.projecao .ponte-proxima strong { color: #000; }

/* ---- Desenho dos acordes (só para o músico; nunca na janela do projetor) ---- */
.faixa-acordes { position: fixed; left: 0; right: 0; bottom: 76px; height: 128px; z-index: 25; display: flex; gap: 8px; align-items: center;
  overflow-x: auto; padding: 4px 10px; background: #14161a; border-top: 1px solid #333; box-sizing: border-box; }
.faixa-acordes[hidden], .painel-acorde[hidden] { display: none; }
.fx-item { flex: none; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; height: 118px; min-width: 76px;
  padding: 2px 8px; background: #1c1f26; border: 1px solid #2f343d; border-radius: 8px; color: #f4f4f4; cursor: pointer; font: inherit; }
.fx-item:hover { border-color: var(--acento, #4da3ff); }
.fx-nome { font-weight: 700; font-size: 17px; line-height: 1; color: var(--acorde, #ffb454); }
.fx-item svg { height: 92px; width: auto; max-width: 210px; }
.fx-item svg.dg-teclado { height: 56px; width: 190px; margin: 14px 0; }
.fx-item svg.dg-baixo { height: 70px; width: auto; margin: 8px 0; }
.fx-nada { color: #8a9099; font-size: .95rem; margin: auto; }
.dg-traste { stroke: #7d848e; stroke-width: 1; }
.dg-corda { stroke: #c9ced6; stroke-width: 1.2; }
.dg-pestana { stroke: #e8eaed; stroke-width: 4; }
.dg-dedo, .dg-barra { fill: #ffb454; }
.dg-dedo.raiz { fill: #ff6b6b; } .dg-dedo.baixo { fill: #4da3ff; }
.dg-aberta { fill: none; stroke: #e8eaed; stroke-width: 1.5; }
.dg-x { fill: #ff6b6b; font-size: 15px; font-weight: 700; }
.dg-casa { fill: #9aa0a6; font-size: 11px; }
.dg-grau { fill: #111; font-size: 10px; font-weight: 700; }
.dg-tecla { fill: #f4f4f4; stroke: #333; stroke-width: 1; }
.dg-tecla-preta { fill: #1a1a1a; stroke: #000; }
.dg .on { fill: #ffb454; } .dg .raiz { fill: #ff6b6b; } .dg .baixo { fill: #4da3ff; }
.dg-vazio { color: #8a9099; font-size: .8rem; }
.painel-acorde { position: fixed; inset: 0; z-index: 55; background: rgba(0,0,0,.88); display: flex; align-items: center; justify-content: center; padding: 12px; }
.pa-caixa { width: min(94vw, 560px); max-height: 96vh; overflow-y: auto; background: #14161a; border: 1px solid #333; border-radius: 12px; padding: 14px 16px; text-align: center; color: #f4f4f4; }
.pa-topo { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.pa-topo h2 { margin: 0; font-size: 2.4rem; color: var(--acorde, #ffb454); }
.pa-desenho { margin: 10px auto; }
.pa-desenho svg { height: min(48vh, 340px); width: auto; max-width: 100%; }
.pa-desenho svg.dg-teclado, .pa-desenho svg.dg-baixo { width: 100%; height: auto; }
.pa-pos { display: flex; align-items: center; justify-content: center; gap: 12px; margin-bottom: 10px; }
.menu-instr { z-index: 70; }