body {
  font-family: 'DM Sans', sans-serif;
}

/* Tom principal do modo escuro (era um cinza quase preto, #18181b/rgb(24,24,27) -
   pedido do Tiago pra ficar em #2c2c2c). Cobre a classe utilitária do Tailwind
   usada em menus/dropdowns/cabeçalho (.bg-zinc-900), além dos fundos inline dos
   modais já trocados direto no index.html. Cards "recuados" dentro de um painel
   (.bg-zinc-950, mais escuro) continuam como estavam, pra manter a profundidade. */
.bg-zinc-900,
.modal-panel {
  background-color: #2c2c2c !important;
}

/* O Editor e o painel de Tags & Estatísticas usam .bg-zinc-950 como fundo da
   PRÓPRIA PÁGINA em ecrã inteiro (não como "card" recuado dentro de um
   modal), por isso também acompanham o novo tom em vez de ficar no preto
   quase puro do zinc-950 padrão. */
#editor-modal,
#stats-modal {
  background-color: #2c2c2c !important;
}

/* Escolher o tom diretamente (em vez de só transpor +/- semitons): popover
   com as 12 notas, aberto ao tocar no chip "Tom: X" do visualizador. */
.key-picker-btn {
  padding: 0.4em 0;
  border-radius: 0.5rem;
  background: #27272a; /* zinc-800 */
  color: #d4d4d8; /* zinc-300 */
  font-family: 'Space Mono', monospace;
  font-weight: 700;
  font-size: 0.8rem;
  text-align: center;
  transition: background-color 0.15s, color 0.15s;
}
.key-picker-btn:hover {
  background: #3f3f46; /* zinc-700 */
  color: #fff;
}
.key-picker-btn.active {
  background: #f59e0b;
  color: #1a1a1a;
}

html[data-theme="light"] .key-picker-btn {
  background: #e4e4e7 !important;
  color: #3f3f46 !important;
}
html[data-theme="light"] .key-picker-btn:hover {
  background: #d4d4d8 !important;
  color: #18181b !important;
}
html[data-theme="light"] .key-picker-btn.active {
  background: #f59e0b !important;
  color: #1a1a1a !important;
}

.cifra-line {
  position: relative;
  font-family: 'Space Mono', monospace;
}

.cifra-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0 0.2em; /* evita acordes vizinhos sem letra entre eles (ex.: "[G][Em]") de ficarem colados */
}

.chord-segment {
  display: flex;
  flex-direction: column;
  white-space: pre-wrap;
  min-width: 0;
  max-width: 100%;
}

.chord-inline {
  color: #f59e0b;
  font-weight: 700;
  font-family: 'Space Mono', monospace;
  line-height: 1;         /* acorde encostado à sua letra */
  margin-bottom: 0;
  cursor: pointer;
}
.chord-inline:hover,
.chord-inline:active {
  text-decoration: underline;
  text-underline-offset: 2px;
}

.lyric-line {
  line-height: 1.15;
}

/* Espaço entre linhas da música (entre um par acorde+letra e o seguinte),
   para que encostar o acorde à letra não junte tudo numa massa só. */
.cifra-row {
  margin-bottom: 0.85em;
}

.cifra-plain-line {
  line-height: 1.15;
  margin-bottom: 0.85em;
  white-space: pre-wrap;
  word-break: break-word;
}

/* Linha só com acorde(s) (sem letra na mesma linha): a letra correspondente
   vem na linha seguinte do texto, por isso o acorde deve colar-se a ELA
   (margin-bottom mínimo) e o espaçamento maior fica acima, separando-o
   do bloco anterior. */
.cifra-row.chord-only {
  margin-top: 0.85em;
  margin-bottom: 0.05em;
  gap: 0.65em; /* espaço entre acordes adjacentes (ex.: "G  Em  F  C/D  D") */
}

.cifra-row.chord-only .lyric-line {
  display: none;
}

/* Marcador de secção da música (Intro, Verso, Refrão, Ponte, Solo...),
   detetados em renderContent(): uma faixa que vai de ponta a ponta da caixa
   da secção (não uma "pílula" pequena), com espaço próprio antes da letra
   e dos acordes que vêm a seguir. As margens negativas fazem a faixa
   "sangrar" até às bordas da .cifra-section-box, ficando rente ao topo dela
   (por isso os dois valores têm de acompanhar o padding/raio um do outro). */
.cifra-section-label {
  display: block;
  margin: -0.9em -1em 1em -1em;
  padding: 0.55em 1em;
  background: rgba(245, 158, 11, 0.14);
  border-bottom: 1px solid rgba(245, 158, 11, 0.3);
  border-radius: 0.85rem 0.85rem 0 0;
  color: #f59e0b;
  font-weight: 700;
  /* font-size fica no span interno, não aqui: se estivesse neste elemento,
     as margens negativas em "em" (acima) passariam a ser relativas a ESTE
     tamanho de fonte menor, e não ao da .cifra-section-box - a faixa deixaria
     de sangrar exatamente até à borda da caixa. */
}
.cifra-section-label span {
  font-size: 0.75em;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

html[data-theme="light"] .cifra-section-label {
  background: rgba(180, 83, 9, 0.1) !important;
  border-color: rgba(180, 83, 9, 0.3) !important;
  color: #b45309 !important;
}

/* Caixa que agrupa cada secção da música (Intro, Verso, Refrão...) com uma
   linha/borda suave, do marcador até à próxima secção. */
.cifra-section-box {
  border: 1px solid rgba(245, 158, 11, 0.15);
  border-radius: 0.85rem;
  padding: 0.9em 1em 1.05em 1em;
  margin-bottom: 1.1em;
  overflow: hidden; /* mantém a faixa (que sangra até à borda) dentro do raio arredondado da caixa */
}

.cifra-section-box .cifra-row:last-child,
.cifra-section-box .cifra-plain-line:last-child {
  margin-bottom: 0;
}

html[data-theme="light"] .cifra-section-box {
  border-color: rgba(180, 83, 9, 0.18) !important;
}

.folder-tab {
  transition: background 0.15s, color 0.15s;
  background: #27272a; /* zinc-800 */
  color: #d4d4d8; /* zinc-300 */
}

.folder-tab:hover {
  background: #3f3f46; /* zinc-700 */
}

.folder-tab.active {
  background: #f59e0b;
  color: #1a1a1a;
}

.logo-light {
  display: none;
}

html[data-theme="light"] .logo-dark {
  display: none;
}

html[data-theme="light"] .logo-light {
  display: inline-block;
}

/* Animação personalizada de fade-in */
.fade-in {
  animation: fadeIn 0.2s ease-out forwards;
}

@keyframes fadeIn {
  from { opacity: 0; transform: scale(0.95); }
  to { opacity: 1; transform: scale(1); }
}

/* ======================================================
   BARRA DE COMANDOS FIXA (dock)
   Fica colada ao fundo do modal de visualização enquanto
   se lê/rola a cifra, como uma barra de "player".
   ====================================================== */
.cmd-dock {
  position: sticky;
  bottom: 0.5rem;
  z-index: 20;
  margin-top: 1.25rem;
  box-shadow: 0 -10px 24px rgba(0, 0, 0, 0.45);
}

html[data-theme="light"] .cmd-dock {
  box-shadow: 0 -10px 24px rgba(0, 0, 0, 0.12);
}

/* ======================================================
   TEMA CLARO
   Ativado via <html data-theme="light">. Usa !important
   porque sobrepõe classes utilitárias do Tailwind (CDN)
   e estilos inline dos modais (background: rgb(...)).
   ====================================================== */
html[data-theme="light"] body {
  background-color: #f4f4f5 !important; /* zinc-100 */
}

html[data-theme="light"] .bg-zinc-900,
html[data-theme="light"] .modal-panel {
  background-color: #f0f0f0 !important;
}

/* Cards "recuados" dentro de um modal/painel (ex.: tiles de estatística,
   caixas do menu de configuração) precisam de um cinza visivelmente diferente
   do fundo da página - #f4f4f5 (igual ao body) fazia esses cards "sumirem".
   Fica um tom abaixo do painel (#f0f0f0) e um acima dos elementos
   interativos (.bg-zinc-800 = #e4e4e7), para manter a hierarquia visual. */
html[data-theme="light"] .bg-zinc-950 {
  background-color: #eaeaec !important;
}

html[data-theme="light"] .bg-zinc-800 {
  background-color: #e4e4e7 !important;
}

html[data-theme="light"] .bg-zinc-700,
html[data-theme="light"] .folder-tab {
  background-color: #d4d4d8 !important;
}

html[data-theme="light"] .folder-tab {
  color: #3f3f46 !important; /* zinc-700: legível sobre o chip cinza-claro */
}

html[data-theme="light"] .folder-tab.active {
  background-color: #f59e0b !important;
  color: #1a1a1a !important;
}

html[data-theme="light"] .hover\:bg-zinc-800:hover,
html[data-theme="light"] .hover\:bg-zinc-750:hover {
  background-color: #d4d4d8 !important;
}

html[data-theme="light"] .hover\:bg-zinc-700:hover,
html[data-theme="light"] .folder-tab:hover {
  background-color: #a1a1aa !important;
}

html[data-theme="light"] .border-zinc-800,
html[data-theme="light"] .border-zinc-700,
html[data-theme="light"] .modal-panel {
  border-color: #d4d4d8 !important;
}

html[data-theme="light"] .text-white,
html[data-theme="light"] .text-gray-100,
html[data-theme="light"] .text-zinc-100 {
  color: #18181b !important;
}

html[data-theme="light"] .text-gray-200,
html[data-theme="light"] .text-zinc-200,
html[data-theme="light"] .text-zinc-300 {
  color: #3f3f46 !important;
}

html[data-theme="light"] .text-gray-400,
html[data-theme="light"] .text-zinc-400 {
  color: #52525b !important;
}

html[data-theme="light"] .text-zinc-500 {
  color: #71717a !important;
}

html[data-theme="light"] .placeholder-zinc-500::placeholder {
  color: #a1a1aa !important;
}

html[data-theme="light"] .bg-black\/85,
html[data-theme="light"] .bg-black\/90,
html[data-theme="light"] .bg-black\/80 {
  background-color: rgba(0, 0, 0, 0.4) !important;
}

html[data-theme="light"] .bg-red-950\/30 {
  background-color: rgba(239, 68, 68, 0.08) !important;
}

html[data-theme="light"] .cifra-line,
html[data-theme="light"] #view-content {
  color: #27272a !important;
}

/* Caixas com opacidade que o Tailwind gera como classes próprias
   (bg-zinc-950/60, etc.) não eram apanhadas pelas regras acima. */
html[data-theme="light"] .bg-zinc-950\/60 {
  background-color: #eeeef0 !important;
}

/* Exceção: o Editor e o painel de Tags & Estatísticas usam .bg-zinc-950 como
   fundo da própria página em ecrã inteiro (não como "card"), por isso devem
   ficar no mesmo tom claro do body, não no cinza dos cards acima. */
html[data-theme="light"] #editor-modal,
html[data-theme="light"] #stats-modal {
  background-color: #f4f4f5 !important;
}

html[data-theme="light"] .bg-zinc-950\/95 {
  background-color: rgba(240, 240, 240, 0.95) !important;
}

html[data-theme="light"] .bg-zinc-800\/80,
html[data-theme="light"] .bg-zinc-800\/70 {
  background-color: #e4e4e7 !important;
}

/* Acordes: âmbar mais escuro no tema claro, para contrastar com o branco. */
html[data-theme="light"] .chord-inline {
  color: #b45309 !important; /* amber-700 */
}

/* "text-amber-400"/"text-amber-500" (Tailwind) são usados como cor de
   destaque em dezenas de botões/rótulos (Gerenciar Tags, Importar cifra,
   Tempo e Cifra, Versões, percentagens das estatísticas, etc.). Sem
   correção, ficam um laranja claro DEMASIADO fraco sobre o fundo cinza-claro
   do tema claro (quase "sumindo"). Usa-se o mesmo âmbar escuro dos acordes,
   para todo destaque em laranja ficar sempre legível e consistente. */
html[data-theme="light"] .text-amber-400,
html[data-theme="light"] .text-amber-500,
html[data-theme="light"] .hover\:text-amber-300:hover {
  color: #b45309 !important; /* amber-700 */
}

/* Mesmo problema do amber-400 acima, mas para os textos/ícones "de perigo"
   (eliminar cifra/repertório, remover tag, toast de erro): red-200/300/400
   são tons claros demais para o fundo claro. */
html[data-theme="light"] .text-red-200,
html[data-theme="light"] .text-red-300,
html[data-theme="light"] .text-red-400,
html[data-theme="light"] .hover\:text-red-300:hover,
html[data-theme="light"] .hover\:text-red-400:hover {
  color: #b91c1c !important; /* red-700 */
}

/* Toast de sucesso (ex.: "Cifra salva com sucesso!") usa emerald-400, claro
   demais sobre o cartão de fundo claro do toast. */
html[data-theme="light"] .text-emerald-400 {
  color: #047857 !important; /* emerald-700 */
}

/* O botão já tem "text-zinc-100" nas classes base; como o Tailwind (via CDN)
   gera as utilitárias numa ordem própria e não pela ordem das classes no
   HTML, "text-zinc-100" ganha de "text-amber-400" mesmo adicionado depois via
   JS. Precisa de um seletor mais específico para o estado ativo realmente
   aparecer (mesmo problema já visto no #admin-toggle, ver abaixo). */
#btn-tempo-cifra-view.text-amber-400 {
  color: #fbbf24 !important; /* amber-400 */
}

/* ======================================================
   DIAGRAMA DE ACORDE (popup ao tocar num acorde da cifra)
   ====================================================== */
.chord-diagram-popup {
  position: fixed;
  z-index: 200;
  width: 190px;
  background: #18181b; /* zinc-900 */
  border: 1px solid #3f3f46; /* zinc-700 */
  border-radius: 0.9rem;
  padding: 0.7rem;
  box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.6);
}
.chord-diagram-popup.hidden {
  display: none;
}
.chord-diagram-holder {
  min-height: 90px;
}
.chord-diagram-svg {
  width: 100%;
  max-width: 150px;
  height: auto;
  overflow: visible;
}
.chord-diagram-svg.piano {
  max-width: 100%;
}

.chord-diagram-string {
  stroke: #71717a; /* zinc-500 */
  stroke-width: 1.5;
}
.chord-diagram-fret {
  stroke: #52525b; /* zinc-600 */
  stroke-width: 1.5;
}
.chord-diagram-fret.chord-diagram-nut {
  stroke: #d4d4d8; /* zinc-300 */
  stroke-width: 3.5;
}
.chord-diagram-barre {
  stroke: #f59e0b;
  stroke-width: 11;
  stroke-linecap: round;
  opacity: 0.9;
}
.chord-diagram-dot {
  fill: #f59e0b;
}
.chord-diagram-finger {
  fill: #18181b;
  font-size: 9px;
  font-weight: 700;
  font-family: 'Space Mono', monospace;
}
.chord-diagram-mute,
.chord-diagram-fret-label {
  fill: #a1a1aa; /* zinc-400 */
  font-size: 11px;
  font-family: 'DM Sans', sans-serif;
}
.chord-diagram-open {
  fill: none;
  stroke: #a1a1aa;
  stroke-width: 1.5;
}

.chord-diagram-key-white {
  fill: #f4f4f5;
  stroke: #52525b;
  stroke-width: 1;
}
.chord-diagram-key-white.active {
  fill: #f59e0b;
}
.chord-diagram-key-black {
  fill: #27272a;
  stroke: #18181b;
  stroke-width: 1;
}
.chord-diagram-key-black.active {
  fill: #b45309;
}

html[data-theme="light"] .chord-diagram-popup {
  background: #f0f0f0 !important;
  border-color: #e4e4e7 !important;
}
html[data-theme="light"] .chord-diagram-mute,
html[data-theme="light"] .chord-diagram-fret-label {
  fill: #71717a !important;
}
html[data-theme="light"] .chord-diagram-string {
  stroke: #a1a1aa !important;
}
html[data-theme="light"] .chord-diagram-fret {
  stroke: #d4d4d8 !important;
}
html[data-theme="light"] .chord-diagram-fret.chord-diagram-nut {
  stroke: #3f3f46 !important;
}

/* ======================================================
   TEMPO E CIFRA (grade rítmica por seção/compasso)
   ====================================================== */
.tempo-cifra-section-label {
  color: #f59e0b;
  font-weight: 700;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 0.4em;
}

.tempo-cifra-beats-header {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border: 1px solid rgba(245, 158, 11, 0.4);
  border-radius: 0.4rem;
  overflow: hidden;
  margin-bottom: 0.5em;
  max-width: 220px;
}
.tempo-cifra-beats-header span {
  text-align: center;
  padding: 0.25em 0;
  font-family: 'Space Mono', monospace;
  font-size: 0.75rem;
  color: #f59e0b;
  border-right: 1px solid rgba(245, 158, 11, 0.4);
}
.tempo-cifra-beats-header span:last-child {
  border-right: none;
}

.tempo-cifra-measure-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  max-width: 220px;
  margin-bottom: 0.3em;
}
.tempo-cifra-beat-cell {
  min-height: 1.2em;
  font-family: 'Space Mono', monospace;
}
.tempo-cifra-beat-cell:empty::before {
  content: '\00a0';
}

/* Botão ADM ativo no menu de configurações: a regra genérica de .text-zinc-300
   acima venceria por causa do !important, por isso usa-se um seletor mais
   específico para garantir o destaque âmbar também no tema claro. */
html[data-theme="light"] #admin-toggle.text-amber-400 {
  color: #b45309 !important;
}

/* ======================================================
   IMPRESSÃO / EXPORTAR EM PDF
   #print-area é preenchida por exportCifra() (app.js) e só fica visível
   durante a impressão, acionada por window.print() - o utilizador escolhe
   "Guardar como PDF" no destino de impressão do navegador.
   ====================================================== */
#print-area {
  display: none;
}

@media print {
  body > *:not(#print-area) {
    display: none !important;
  }

  #print-area {
    display: block !important;
    color: #111 !important;
    background: #fff !important;
    font-family: 'Space Mono', monospace;
  }

  #print-area .print-header h1 {
    font-size: 20px;
    font-weight: 700;
    margin: 0 0 2px 0;
    font-family: 'DM Sans', sans-serif;
  }

  #print-area .print-artist {
    font-size: 13px;
    color: #b45309;
    margin: 0 0 2px 0;
    font-family: 'DM Sans', sans-serif;
  }

  #print-area .print-tom {
    font-size: 12px;
    color: #444;
    margin: 0 0 16px 0;
    font-family: 'DM Sans', sans-serif;
  }

  #print-area .chord-inline {
    color: #b45309 !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  #print-area .cifra-section-label {
    color: #b45309 !important;
    border-color: #b45309 !important;
    background: transparent !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  #print-area .cifra-section-box {
    border-color: #ddd !important;
    background: transparent !important;
    break-inside: avoid;
  }
}

/* ---------- Padrão do portal Oficina Ministerial ---------- */
.om-portal-card { display: flex; flex-direction: column; gap: 8px; margin-top: 28px; padding: 15px; border-radius: 16px; text-decoration: none; color: #f4ecd7;
  background: radial-gradient(120% 140% at 100% 0%, rgba(255,146,0,.25), transparent 60%), #161616 !important; border: 1px solid rgba(255,146,0,.35); }
.om-portal-topo { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 14px; line-height: 1.1; color: #f4ecd7; }
.om-portal-topo img { width: 32px; height: 32px; object-fit: cover; object-position: 0 50%; border-radius: 8px; }
.om-portal-topo b { color: #ff9200; }
.om-portal-texto { font-size: 12px; line-height: 1.5; color: rgba(244,236,215,.75); }
.om-portal-texto b { color: #fff; }
.om-portal-link { font-size: 12px; font-weight: 700; color: #ff9200; }
/* painel de Dúvidas abre acima do botão de configurações */
.om-duvidas-painel { bottom: calc(84px + env(safe-area-inset-bottom)) !important; z-index: 80 !important; }

/* Pilha de botões à direita (padrao-app.js do portal): os menus abrem ao lado dela */
#settings-menu, #cifra-tools-menu { position: fixed !important; left: auto !important; right: calc(40px + var(--om-pilha-largura, 56px)) !important; bottom: calc(16px + env(safe-area-inset-bottom)) !important; max-height: calc(100dvh - 32px) !important; }
@media (max-width: 640px) { #settings-menu, #cifra-tools-menu { width: calc(100vw - 32px - var(--om-pilha-largura, 56px) - 10px) !important; } }
#settings-fab, #cifra-tools-fab, #az-mobile-fab { width: 48px !important; height: 48px !important; }
/* PC: lista de cifras em duas colunas, aproveitando a largura */
@media (min-width: 1024px) {
  #cifra-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  #cifra-list > * { margin: 0 !important; }
  #cifra-list > :not(button):not([data-id]):not([onclick]) { grid-column: 1 / -1; }
}

/* ===================================================================
   Padrão do portal (2026-10): grafite #161616 + laranja #ff9800, claro #f0f0f0,
   cabeçalho de ponta a ponta, configurações em gaveta, botões só com ícone.
   =================================================================== */
html:not([data-theme="light"]) body { background: #161616 !important; }
html:not([data-theme="light"]) .bg-zinc-900, html:not([data-theme="light"]) .modal-panel,
html:not([data-theme="light"]) #editor-modal, html:not([data-theme="light"]) #stats-modal { background-color: #1e1e1e !important; }
html:not([data-theme="light"]) .bg-zinc-800, html:not([data-theme="light"]) .bg-zinc-800\/80 { background-color: #262626 !important; }
html:not([data-theme="light"]) .bg-zinc-950 { background-color: #161616 !important; }
html:not([data-theme="light"]) .border-zinc-800 { border-color: rgba(255,255,255,.08) !important; }
html:not([data-theme="light"]) .border-zinc-700 { border-color: rgba(255,255,255,.14) !important; }
.text-amber-500, .text-amber-400 { color: #ff9800 !important; }
.bg-amber-500 { background-color: #ff9800 !important; }
.hover\:bg-amber-400:hover { background-color: #ffa726 !important; }
.focus\:ring-amber-500:focus { --tw-ring-color: #ff9800 !important; }
html[data-theme="light"] body { background: #f0f0f0 !important; }

/* Cabeçalho */
.cif-cab { position: sticky; top: 0; z-index: 60; background: #1b1b1b; border-bottom: 1px solid rgba(255,255,255,.1); }
.cif-cab-meio { max-width: 72rem; margin: 0 auto; padding: 12px 16px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.cif-marca { display: flex; align-items: center; gap: 12px; text-decoration: none; min-width: 0; }
.cif-marca img { width: 44px; height: 44px; object-fit: contain; filter: drop-shadow(0 6px 18px rgba(255,146,0,.28)); flex-shrink: 0; }
.cif-marca span { display: grid; min-width: 0; }
.cif-marca b { color: #fff; font-size: 20px; font-weight: 800; letter-spacing: -.02em; line-height: 1.1; }
.cif-marca small { color: rgba(255,255,255,.7); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cif-cab-acoes { display: flex; gap: 8px; flex-shrink: 0; }
.cif-cab-btn { width: 44px; height: 44px; border-radius: 14px; border: 0; background: rgba(255,255,255,.08); color: #fff; display: grid; place-items: center; cursor: pointer; }
.cif-cab-btn:hover { background: rgba(255,255,255,.14); }
.cif-cab-btn svg { width: 19px; height: 19px; }
@media (max-width: 520px) { .cif-marca small { display: none; } .cif-cab-btn { width: 40px; height: 40px; } }

/* Configurações: gaveta pela direita, logo abaixo do cabeçalho */
#settings-fab { display: none !important; }
#settings-menu { position: fixed !important; top: 69px !important; right: 0 !important; bottom: 0 !important; left: auto !important;
  width: min(360px, 92vw) !important; max-height: none !important; border-radius: 0 !important; border-width: 0 0 0 1px !important;
  padding: 16px !important; z-index: 2147481600 !important; box-shadow: -20px 0 60px rgba(0,0,0,.35) !important; }
html:not([data-theme="light"]) #settings-menu { background: #1e1e1e !important; }
#settings-menu button { min-height: 46px; }

/* Botões flutuantes da pilha: só ícone, redondos e do mesmo tamanho */
#cifra-tools-fab, #az-mobile-fab { width: 48px !important; height: 48px !important; border-radius: 999px !important; }
#cifra-tools-fab { background: #ff9800 !important; }
body:has(#settings-menu:not(.hidden)) .ochat-botao, body:has(#settings-menu:not(.hidden)) .om-duvidas, body:has(#settings-menu:not(.hidden)) [data-om-pilha] { display: none !important; }
/* Tema claro no padrão do portal: fundo #f0f0f0, cartões brancos, texto grafite */
html[data-theme="light"] .bg-zinc-900, html[data-theme="light"] .modal-panel, html[data-theme="light"] .bg-zinc-800, html[data-theme="light"] .bg-zinc-800\/80, html[data-theme="light"] #settings-menu { background-color: #ffffff !important; }
html[data-theme="light"] .bg-zinc-950 { background-color: #f7f7f7 !important; }
html[data-theme="light"] .border-zinc-800, html[data-theme="light"] .border-zinc-700 { border-color: rgba(44,44,44,.12) !important; }
html[data-theme="light"] #cifra-list > button:hover { border-color: #ff9800 !important; }
/* Telas cheias e janelas ficam POR CIMA do cabeçalho (antes ele cobria o X de fechar) */
#auth-modal, #editor-modal, #folder-modal, #stats-modal, #view-modal { z-index: 90 !important; }
.cif-fechar { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 14px; border-radius: 12px; border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.06); color: #fff; font-weight: 700; font-size: 14px; cursor: pointer; }
.cif-fechar:hover { border-color: #ff9800; color: #ff9800; }
html[data-theme="light"] .cif-fechar { color: #2c2c2c; border-color: rgba(44,44,44,.15); background: #fff; }
/* Estatísticas mais amplas: cartões em grade no PC */
@media (min-width: 1024px) { #stats-cards-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; } }
body:has(#stats-modal:not(.hidden)) .ochat-botao, body:has(#stats-modal:not(.hidden)) .om-duvidas, body:has(#editor-modal:not(.hidden)) .ochat-botao, body:has(#editor-modal:not(.hidden)) .om-duvidas { display: none !important; }
/* Metrónomo: BPM digitável */
.bpm-campo { display: inline-flex; align-items: center; gap: 4px; font: 700 12px "Space Mono", monospace; color: #a1a1aa; }
.bpm-campo input { width: 64px; height: 30px; padding: 0 6px; border-radius: 8px; border: 1px solid rgba(255,255,255,.16); background: #161616; color: #fff; font: 700 15px "Space Mono", monospace; text-align: center; -moz-appearance: textfield; }
.bpm-campo input::-webkit-outer-spin-button, .bpm-campo input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.bpm-campo input:focus { outline: none; border-color: #ff9800; }
html[data-theme="light"] .bpm-campo input { background: #fff; color: #2c2c2c; border-color: rgba(44,44,44,.2); }
/* Ferramentas da cifra (tom, rolar, metrónomo) sempre por cima da tela da cifra */
#cifra-tools { z-index: 95 !important; }