/* Identidade do Músico Cristão Pro — navy + dourado, herdada do /membros.
   Tema escuro incluso: quem toca na missa costuma estar em igreja com pouca luz. */
:root {
  --navy: #141E36; --navy2: #22304F; --navy3: #2E3F63;
  --gold: #C9A227; --gold2: #E6C55C; --gold3: #F4E3A1;
  --bg: #F4F6FB; --card: #fff; --ink: #161F33; --mut: #69748F; --line: #E6EAF3;
  /* Acorde em laranja: ele tem que pular da letra num relance, e no meio de uma
     página de texto navy o navy não pulava. Tom escolhido pela leitura, não pelo
     gosto — em tela clara o laranja claro some, em tela escura o escuro some. */
  --acorde: #D2540A; --letra: #33405C; --rotulo: #9A7C15;
  /* o laranja do acorde diluído: é a cor de "ação" do app (o + da lista) */
  --acorde-fundo: #FDEFE5; --acorde-fraco: #F3D3B8;
  --fs: 16px;
  --sh: 0 1px 2px rgba(20,30,54,.04), 0 4px 16px rgba(20,30,54,.05);
}
:root[data-tema="escuro"] {
  --bg: #0C1220; --card: #151E31; --ink: #E8ECF5; --mut: #8794AF; --line: #22304F;
  --acorde: #FFA457; --letra: #C6CFE2; --rotulo: #E6C55C;
  --acorde-fundo: #2A1809; --acorde-fraco: #4C2C12;
  --sh: 0 1px 2px rgba(0,0,0,.3), 0 4px 16px rgba(0,0,0,.25);
}
* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { overflow-x: hidden; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  background: var(--bg); color: var(--ink); -webkit-font-smoothing: antialiased;
  transition: background .2s, color .2s;
}
.app { max-width: 540px; margin: 0 auto; min-height: 100vh; }
::selection { background: var(--gold3); color: #161F33; }
button { font-family: inherit; }
[hidden] { display: none !important; }

/* ───────── telas cheias (quiz, paywall) ───────── */
.tela {
  position: fixed; inset: 0; z-index: 80; overflow-y: auto;
  background: radial-gradient(120% 90% at 50% 0%, #26355A 0%, var(--navy) 55%, #0C1425 100%);
  color: #fff; display: flex; flex-direction: column;
}
.tela-in { max-width: 480px; margin: auto; width: 100%; padding: 36px 26px 40px; }
@keyframes up { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.anim { animation: up .4s cubic-bezier(.16,1,.3,1) both; }

/* barra de progresso do quiz */
.prog { height: 4px; background: rgba(255,255,255,.12); border-radius: 4px; margin-bottom: 30px; overflow: hidden; }
.prog i { display: block; height: 100%; background: linear-gradient(90deg, var(--gold), var(--gold2));
  border-radius: 4px; transition: width .35s cubic-bezier(.16,1,.3,1); }

.q-passo { font-size: .68rem; font-weight: 800; letter-spacing: 1.2px; text-transform: uppercase;
  color: var(--gold2); margin-bottom: 12px; }
.q-t { font-size: 1.5rem; font-weight: 800; line-height: 1.28; letter-spacing: -.5px; margin-bottom: 10px; }
.q-t span { background: linear-gradient(100deg, var(--gold2), var(--gold3));
  -webkit-background-clip: text; background-clip: text; color: transparent; }
.q-x { font-size: .9rem; color: rgba(255,255,255,.6); line-height: 1.6; margin-bottom: 26px; }

.op { display: block; width: 100%; text-align: left; padding: 16px 18px; margin-bottom: 10px;
  border-radius: 15px; border: 1.5px solid rgba(255,255,255,.14); background: rgba(255,255,255,.05);
  color: #fff; font: 600 .95rem/1.35 inherit; cursor: pointer; transition: .16s; display: flex;
  align-items: center; gap: 13px; }
.op:active { transform: scale(.985); }
.op.on { border-color: var(--gold); background: rgba(201,162,39,.14); }
.op i { font-style: normal; font-size: 1.3rem; flex-shrink: 0; }
.op b { display: block; font-weight: 800; }
.op u { display: block; text-decoration: none; font-weight: 500; font-size: .78rem;
  color: rgba(255,255,255,.5); margin-top: 2px; }

.btn { display: block; width: 100%; padding: 17px; border-radius: 60px; border: none;
  background: linear-gradient(100deg, var(--gold), #B8931F); color: #1B1403;
  font: 800 1rem/1 inherit; cursor: pointer; box-shadow: 0 8px 24px rgba(201,162,39,.3);
  transition: transform .16s, opacity .16s; }
.btn:active { transform: scale(.97); }
.btn:disabled { opacity: .35; box-shadow: none; }
.btn-2 { background: none; border: 1.5px solid rgba(255,255,255,.2); color: #fff; box-shadow: none; }
.btn-ic { display: flex; align-items: center; justify-content: center; gap: 9px; }
.link { background: none; border: none; color: rgba(255,255,255,.45); font: inherit; font-size: .8rem;
  text-decoration: underline; cursor: pointer; display: block; margin: 18px auto 0; }

/* plano montado no fim do quiz */
.plano { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12);
  border-radius: 18px; padding: 20px; margin-bottom: 22px; }
.plano h3 { font-size: .7rem; text-transform: uppercase; letter-spacing: 1px; color: var(--gold2); margin-bottom: 14px; }
.plano-l { display: flex; gap: 11px; align-items: flex-start; padding: 9px 0; font-size: .88rem; line-height: 1.4; }
.plano-l b { color: var(--gold3); }
.plano-l em { font-style: normal; color: #4FB268; font-size: 1rem; flex-shrink: 0; }

/* ───────── paywall ───────── */
.pw-selo { display: inline-flex; align-items: center; gap: 7px; background: rgba(201,162,39,.13);
  border: 1px solid rgba(201,162,39,.3); color: var(--gold2); padding: 8px 15px; border-radius: 30px;
  font-size: .7rem; font-weight: 800; margin-bottom: 20px; letter-spacing: .3px; }
.pw-lista { margin: 4px 0 24px; }
.pw-lista div { display: flex; gap: 11px; align-items: flex-start; padding: 8px 0;
  font-size: .89rem; line-height: 1.45; color: rgba(255,255,255,.85); }
.pw-lista em { font-style: normal; color: var(--gold2); flex-shrink: 0; font-weight: 800; }
.preco { text-align: center; margin-bottom: 8px; }
.preco s { color: rgba(255,255,255,.35); font-size: .95rem; }
.preco b { display: block; font-size: 2.6rem; font-weight: 800; letter-spacing: -1.5px; line-height: 1.1; }
.preco b small { font-size: 1.1rem; font-weight: 700; }
.preco span { display: block; font-size: .8rem; color: rgba(255,255,255,.55); margin-top: 4px; }
.pw-nota { text-align: center; font-size: .74rem; color: rgba(255,255,255,.4); margin-top: 14px; line-height: 1.5; }
.codigo { display: flex; gap: 8px; margin-top: 16px; }
.codigo input { flex: 1; padding: 14px; border-radius: 13px; border: 1.5px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.05); color: #fff; font: 600 .9rem inherit; outline: none; text-align: center;
  letter-spacing: 2px; text-transform: uppercase; }
.codigo input:focus { border-color: var(--gold); }
.codigo button { padding: 0 20px; border-radius: 13px; border: none; background: rgba(255,255,255,.12);
  color: #fff; font: 800 .85rem inherit; cursor: pointer; }
.erro { color: #FF8B8B; font-size: .8rem; text-align: center; margin-top: 10px; }

/* ───────── cabeçalho e navegação ───────── */
.pg { display: none; padding-bottom: 90px; }
.pg.on { display: block; animation: fade .25s ease both; }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }

.hd { background: linear-gradient(150deg, var(--navy2) 0%, var(--navy) 62%, #0F1728 100%);
  color: #fff; padding: 22px 20px; position: relative; overflow: hidden; }
.hd::before { content: ''; position: absolute; top: -90px; right: -70px; width: 230px; height: 230px;
  background: radial-gradient(circle, rgba(201,162,39,.16), transparent 68%); border-radius: 50%; }
.hd-t { display: flex; align-items: center; gap: 14px; position: relative; }
.hd-ic { width: 50px; height: 50px; border-radius: 16px; background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.11); display: grid; place-items: center; flex-shrink: 0;
  color: var(--gold2); }
.hd-ic .ic { width: 27px; height: 27px; }
.hd h1 { font-size: 1.1rem; font-weight: 800; letter-spacing: -.4px; line-height: 1.24; }
.hd h1 span { background: linear-gradient(100deg, var(--gold2), var(--gold3));
  -webkit-background-clip: text; background-clip: text; color: transparent; }
.hd p { font-size: .74rem; color: rgba(255,255,255,.5); margin-top: 4px; }

.nav { position: fixed; bottom: 0; left: 0; right: 0; z-index: 50; background: var(--card);
  border-top: 1px solid var(--line); }
:root[data-tema="claro"] .nav { background: rgba(255,255,255,.93); backdrop-filter: blur(16px); }
.nav-in { max-width: 540px; margin: 0 auto; display: flex; padding: 9px 0 max(9px, env(safe-area-inset-bottom)); }
.nv { flex: 1; text-align: center; cursor: pointer; color: var(--mut); transition: .16s; border: none; background: none; }
.nv.on { color: var(--ink); }
:root[data-tema="claro"] .nv.on { color: var(--navy); }
.nv .ic { display: block; margin: 0 auto 3px; transition: transform .18s; }
.nv.on .ic { transform: translateY(-1px) scale(1.06); }
.nv.on .ic { stroke-width: 2.1; }
.nv span { font-size: .6rem; font-weight: 800; display: block; }
/* aba escolhida ganha um risquinho embaixo — dá o "você está aqui" sem cor nova */
.nv.on span::after { content: ''; display: block; width: 16px; height: 2.5px; border-radius: 3px;
  background: var(--gold); margin: 4px auto 0; }
.nv:not(.on) span::after { content: ''; display: block; height: 2.5px; margin: 4px auto 0; }

/* ───────── convite pra instalar ─────────
   Laranja cheio: é a única coisa na tela que pede uma decisão, e ela some pra
   sempre depois de tomada — por isso pode gritar um pouco. */
.inst { position: relative; margin: 16px 20px 0; padding: 15px 16px 16px; border-radius: 18px;
  background: linear-gradient(135deg, #F0873C, #D2540A); color: #fff;
  box-shadow: 0 8px 22px -6px rgba(210,84,10,.55); }
.inst b { font-size: .95rem; font-weight: 800; display: block; padding-right: 26px; }
.inst p { font-size: .76rem; line-height: 1.45; color: rgba(255,255,255,.88); margin-top: 5px; }
.inst-x { position: absolute; top: 8px; right: 8px; width: 30px; height: 30px; border-radius: 50%;
  border: none; background: rgba(255,255,255,.16); color: #fff; font-size: 1.15rem; line-height: 1;
  cursor: pointer; }
.inst-ok { margin-top: 12px; padding: 11px 20px; border-radius: 30px; border: none; background: #fff;
  color: #B24707; font: 800 .84rem inherit; cursor: pointer; }
.inst-ok:active { transform: scale(.97); }
/* no iPhone não existe instalar por código — sobra ensinar o caminho */
.inst-ios { margin-top: 11px; font-size: .76rem; line-height: 1.5; background: rgba(255,255,255,.16);
  border-radius: 12px; padding: 10px 12px; }
.inst-ios b { display: inline; font-size: inherit; padding: 0; }

/* ───────── os quatro lugares do app ─────────
   Cada card tem sua cor, e a cor é o assunto: o card ligado se enche dela e
   ainda acende em volta, os outros ficam com o rastro dela no fundo e no
   desenho. Cinza neutro com um ícone colorido no canto era o que fazia a tela
   parecer morta — a cor tem que ocupar espaço pra dar liga. */
.hub { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 18px 20px 2px; }
.hb { display: flex; align-items: center; gap: 11px; text-align: left; padding: 12px 13px;
  border-radius: 17px; border: 1.5px solid var(--hbb); background: var(--hbf); color: var(--ink);
  box-shadow: var(--sh); cursor: pointer; min-width: 0;
  transition: transform .14s, box-shadow .18s, background .18s, border-color .18s; }
.hb:active { transform: scale(.985); }
.hb .ic { width: 38px; height: 38px; padding: 8px; border-radius: 12px; flex-shrink: 0;
  background: var(--hbi); color: var(--hbc); }
/* título e contagem empilhados: soltos no flex do card eles viravam duas
   colunas e a contagem comia o nome */
.hb > span { min-width: 0; }
.hb b { display: block; font-size: .84rem; font-weight: 800; letter-spacing: -.2px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hb u { display: block; text-decoration: none; font-size: .66rem; font-weight: 600; color: var(--mut);
  margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* o card ligado é o que manda na lista abaixo — só Biblioteca e Favoritos ligam */
.hb.on { background: linear-gradient(135deg, var(--hbg1), var(--hbg2)); border-color: transparent;
  box-shadow: 0 6px 20px -4px var(--hbs), 0 2px 8px rgba(0,0,0,.12); }
.hb.on b, .hb.on u { color: #fff; }
.hb.on u { opacity: .82; }
.hb.on .ic { background: rgba(255,255,255,.22); color: #fff; }

.hb[data-h="biblioteca"] { --hbc: #C24E08; --hbf: #FDEEE3; --hbb: #F6D9C3; --hbi: #FBDCC5;
  --hbg1: #F0873C; --hbg2: #D2540A; --hbs: rgba(210,84,10,.5); }
.hb[data-h="repertorios"] { --hbc: #17845F; --hbf: #E4F4EC; --hbb: #C4E6D6; --hbi: #CDEBDC;
  --hbg1: #2FBB86; --hbg2: #14855F; --hbs: rgba(20,133,95,.5); }
.hb[data-h="favoritos"] { --hbc: #C13E56; --hbf: #FCE9EC; --hbb: #F5CFD6; --hbi: #F9D6DC;
  --hbg1: #F0596F; --hbg2: #C33350; --hbs: rgba(195,51,80,.5); }
.hb[data-h="studio"] { --hbc: #A67B0C; --hbf: #FBF1D8; --hbb: #EEDCA6; --hbi: #F6E7B8;
  --hbg1: #E9B23C; --hbg2: #B8860B; --hbs: rgba(184,134,11,.5); }
/* no escuro a cor precisa ser mais clara pra ler, e o fundo tonal mais fundo
   pra não virar um bloco leitoso */
:root[data-tema="escuro"] .hb[data-h="biblioteca"] { --hbc: #FFA457; --hbf: #241407; --hbb: #4A2A10; --hbi: #3A1F0B; }
:root[data-tema="escuro"] .hb[data-h="repertorios"] { --hbc: #43CE9B; --hbf: #08211A; --hbb: #14453A; --hbi: #0E3327; }
:root[data-tema="escuro"] .hb[data-h="favoritos"] { --hbc: #FB7F97; --hbf: #260F16; --hbb: #4C2028; --hbi: #3A171F; }
:root[data-tema="escuro"] .hb[data-h="studio"] { --hbc: #F0C64F; --hbf: #221A05; --hbb: #4A3A0C; --hbi: #362A08; }

/* ───────── claro / escuro, no Perfil ─────────
   Dois botões escritos, não um interruptor: interruptor não diz qual dos dois
   estados é o ligado. */
.tema-op { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.tema-op button { display: flex; flex-direction: column; align-items: center; gap: 5px;
  padding: 13px 6px; border-radius: 14px; border: 1.5px solid var(--line); background: var(--bg);
  color: var(--mut); font: 800 .78rem inherit; cursor: pointer; transition: .16s; }
.tema-op button .ic { width: 21px; height: 21px; }
.tema-op button.on { border-color: var(--gold); background: var(--gold3); color: #5A4708; }
:root[data-tema="escuro"] .tema-op button.on { background: #3A2F0B; color: var(--gold2); }
.tema-dica { font-size: .72rem; color: var(--mut); line-height: 1.45; margin-top: 11px; }

/* ───────── católicas / evangélicas ───────── */
.trad { display: flex; gap: 6px; padding: 14px 20px 0; }
.trad button { flex: 1; padding: 10px 6px; border-radius: 12px; border: 1.5px solid var(--line);
  background: var(--card); color: var(--mut); font: 800 .74rem inherit; cursor: pointer;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.trad button.on { background: var(--navy); border-color: var(--navy); color: #fff; }
:root[data-tema="escuro"] .trad button.on { background: var(--navy3); border-color: var(--navy3); }

/* ───────── listas ───────── */

.srch { padding: 16px 20px 2px; position: relative; }
.srch input { width: 100%; padding: 15px 16px 15px 44px; border: 2px solid var(--line); border-radius: 16px;
  font: inherit; font-size: .9rem; background: var(--card); color: var(--ink); outline: none;
  transition: .2s; box-shadow: var(--sh); }
.srch input:focus { border-color: var(--navy3); }
.srch svg { position: absolute; left: 36px; top: 50%; transform: translateY(-40%); opacity: .34; pointer-events: none; }

.chips { display: flex; gap: 8px; overflow-x: auto; padding: 15px 20px 4px; scrollbar-width: none; }
.chips::-webkit-scrollbar { display: none; }
.chip { padding: 9px 15px; border-radius: 30px; border: 1.5px solid var(--line); background: var(--card);
  font: 700 .73rem/1 inherit; color: var(--mut); cursor: pointer; white-space: nowrap; flex-shrink: 0;
  transition: .18s; display: flex; gap: 6px; align-items: center; }
.chip .ic { width: 15px; height: 15px; opacity: .85; }
.chip u { text-decoration: none; opacity: .5; font-weight: 600; font-variant-numeric: tabular-nums; }
.chip.on { background: var(--navy); border-color: var(--navy); color: #fff; }
/* no escuro o navy do chip ligado é quase o fundo do card — ele sumia */
:root[data-tema="escuro"] .chip.on { background: var(--navy3); border-color: var(--navy3); }

.lbl { font-size: .65rem; font-weight: 800; color: var(--mut); text-transform: uppercase;
  letter-spacing: .9px; padding: 20px 20px 9px; display: flex; align-items: center; justify-content: space-between; }
.lbl button { background: none; border: none; color: var(--gold); font: 800 .68rem inherit; cursor: pointer; }
.list { padding: 4px 20px; }
.row { background: var(--card); border: 1px solid var(--line); border-radius: 17px; padding: 12px;
  margin-bottom: 9px; display: flex; align-items: center; gap: 10px; cursor: pointer;
  box-shadow: var(--sh); transition: transform .14s, border-color .14s; }
.row:active { transform: scale(.985); border-color: var(--navy3); }
/* etiqueta do momento: fundo pastel do momento + o desenho em navy por cima.
   O pastel é o mesmo nos dois temas, então a cor do traço é fixa de propósito —
   currentColor aqui viraria traço branco sobre fundo claro no tema escuro. */
.row-ic { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center;
  flex-shrink: 0; color: #2A3550; }
.row-ic .ic { width: 21px; height: 21px; }
.row-b { flex: 1; min-width: 0; }
.row-t { font-size: .87rem; font-weight: 700; line-height: 1.28; display: -webkit-box;
  -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.row-m { font-size: .67rem; color: var(--mut); margin-top: 3px; font-weight: 600; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
.row-m em { font-style: normal; color: var(--gold); font-weight: 700; }
.row-k { font: 800 .69rem/1 ui-monospace, Menlo, monospace; color: var(--navy);
  background: linear-gradient(180deg,#FCF6E2,#F7EDD0); border: 1px solid #EFE0B4; padding: 7px 6px;
  border-radius: 9px; flex-shrink: 0; min-width: 34px; text-align: center; }
.star { background: none; border: none; cursor: pointer; opacity: .22; flex-shrink: 0;
  padding: 4px; transition: .16s; color: var(--mut); display: flex; align-items: center; }
.star.on { opacity: 1; color: var(--gold); transform: scale(1.06); }
.star.on .ic { fill: currentColor; }   /* favoritada é estrela cheia, não contornada */
/* jogar numa lista sem abrir a cifra: quem monta o repertório da missa passa a
   lista inteira de uma vez, e abrir-voltar-abrir 12 vezes é o que cansa */
.add { width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0; cursor: pointer;
  border: 1.5px solid var(--acorde-fraco); background: var(--acorde-fundo); color: var(--acorde);
  display: grid; place-items: center; transition: .16s; }
.add:active { transform: scale(.9); }
.add.feito { background: var(--acorde); border-color: var(--acorde); color: #fff; }
.empty { text-align: center; padding: 56px 24px; color: var(--mut); }
.empty i { display: block; margin-bottom: 14px; opacity: .35; }
/* o desenho do estado vazio é grande, venha ele de onde vier (lupa, estrela, lista) */
.empty i .ic { margin: 0 auto; width: 44px; height: 44px; }
.empty b { display: block; font-size: .95rem; margin-bottom: 6px; }
.empty span { font-size: .82rem; }
.more { display: block; width: 100%; margin: 6px 0 4px; padding: 15px; border: 1.5px dashed var(--line);
  background: none; border-radius: 16px; font: 700 .8rem/1 inherit; color: var(--mut); cursor: pointer; }

.card { background: var(--card); border: 1px solid var(--line); border-radius: 17px; padding: 16px;
  margin: 0 20px 10px; box-shadow: var(--sh); }
.card input, .card select { width: 100%; padding: 12px 14px; border: 1.5px solid var(--line);
  border-radius: 12px; font: inherit; font-size: .86rem; margin-bottom: 9px; outline: none;
  background: var(--bg); color: var(--ink); }
.card input:last-child { margin: 0; }
.linha { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 11px 0;
  border-bottom: 1px solid var(--line); font-size: .85rem; }
.linha:last-child { border: none; padding-bottom: 0; }
.linha b { font: 800 .74rem ui-monospace, monospace; flex-shrink: 0; background: var(--bg);
  padding: 5px 8px; border-radius: 7px; }
.vazio { color: var(--mut); font-size: .82rem; }

/* ───────── player da cifra ───────── */
.sheet { position: fixed; inset: 0; z-index: 60; background: var(--bg); overflow-y: auto; display: none; }
.sheet.on { display: block; animation: slide .3s cubic-bezier(.16,1,.3,1) both; }
@keyframes slide { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
.sh-in { max-width: 540px; margin: 0 auto; }
.sh-hd { background: linear-gradient(150deg, var(--navy2), var(--navy)); color: #fff; padding: 14px 18px 16px; }
.sh-back { background: none; border: none; color: rgba(255,255,255,.62); font: 700 .8rem/1 inherit;
  cursor: pointer; padding: 7px 0; margin-bottom: 6px; }
.sh-hd h2 { font-size: 1.12rem; font-weight: 800; letter-spacing: -.4px; line-height: 1.3; }
.sh-sub { font-size: .69rem; color: rgba(255,255,255,.5); margin-top: 6px; font-weight: 700;
  display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.sh-sub b { background: rgba(201,162,39,.16); color: var(--gold2); padding: 4px 9px; border-radius: 20px; }
.sh-fer { display: flex; gap: 7px; margin-top: 12px; flex-wrap: wrap; }
.sh-fer button { display: inline-flex; align-items: center; gap: 6px; border: 1px solid rgba(255,255,255,.16); background: rgba(255,255,255,.08); color: #fff;
  border-radius: 10px; padding: 8px 12px; font: 700 .72rem inherit; cursor: pointer; display: flex;
  align-items: center; gap: 5px; }
.sh-fer button.on { background: var(--gold); border-color: var(--gold); color: #1B1403; }

.ctl { background: var(--card); border-bottom: 1px solid var(--line); padding: 13px 18px 11px;
  position: sticky; top: 0; z-index: 3; box-shadow: 0 4px 14px rgba(20,30,54,.04); }
.knobs { display: flex; gap: 9px; align-items: center; flex-wrap: wrap; row-gap: 9px; }
.knob { display: flex; align-items: center; border: 1.5px solid var(--line); border-radius: 13px;
  overflow: hidden; background: var(--card); flex-shrink: 0; }
.knob > span { font-size: .58rem; font-weight: 800; color: var(--mut); text-transform: uppercase;
  letter-spacing: .6px; padding: 0 10px; line-height: 40px; background: var(--bg); }
.knob button { width: 36px; height: 40px; border: none; background: var(--card); font: 700 1.1rem/1 inherit;
  color: var(--ink); cursor: pointer; }
.knob .v { min-width: 42px; text-align: center; font: 800 .8rem/40px ui-monospace, Menlo, monospace;
  background: var(--bg); border-left: 1.5px solid var(--line); border-right: 1.5px solid var(--line);
  font-variant-numeric: tabular-nums; }
.fs { display: flex; gap: 6px; margin-left: auto; flex-shrink: 0; }
.fs button { width: 34px; height: 34px; border: 1.5px solid var(--line); background: var(--card);
  border-radius: 10px; font: 700 .74rem/1 inherit; color: var(--ink); cursor: pointer; }
.keys { display: flex; gap: 16px; align-items: baseline; padding-top: 11px; font-size: .71rem; color: var(--mut); }
.keys b { font: 800 1rem ui-monospace, Menlo, monospace; color: var(--ink); }
.keys .g b { color: var(--rotulo); }
.rst { margin-left: auto; background: none; border: none; color: var(--mut); font: inherit;
  font-size: .7rem; text-decoration: underline; cursor: pointer; }

/* ───────── escolha do instrumento ─────────
   Ícone em cima, nome embaixo, sempre escrito. Quem tem 60 anos e nunca mexeu
   em app não adivinha ícone sozinho — e não abre menu pra procurar. */
.instr { padding: 14px 18px 0; }
.instr-lb { display: block; font-size: .7rem; font-weight: 700; color: var(--mut);
  letter-spacing: .02em; margin-bottom: 7px; }
.instr-op { display: grid; grid-template-columns: repeat(5, 1fr); gap: 5px; }
.instr-op button { display: flex; flex-direction: column; align-items: center; gap: 3px;
  min-height: 54px; padding: 8px 2px; border-radius: 13px; border: 1.5px solid var(--line);
  background: var(--card); color: var(--mut); font-size: .62rem; font-weight: 700;
  line-height: 1.05; letter-spacing: -.01em; text-align: center;
  cursor: pointer; transition: background .15s, border-color .15s, color .15s; }
.instr-op button .ic { width: 22px; height: 22px; }
.instr-op button.on { border-color: var(--gold); background: var(--gold3); color: #5A4708; }
:root[data-tema="escuro"] .instr-op button.on { background: #3A2F0B; color: var(--gold2); }

.diag { display: flex; gap: 8px; overflow-x: auto; padding: 13px 18px 3px; scrollbar-width: none; }
.diag::-webkit-scrollbar { display: none; }
.diag svg { width: auto; height: 81px; flex-shrink: 0; background: var(--card); border: 1px solid var(--line);
  border-radius: 12px; box-shadow: var(--sh); }

/* teclado: tecla branca continua branca no tema escuro — piano é piano */
.kb-w { fill: #FBFCFF; stroke: #C2CADB; stroke-width: 1; }
.kb-b { fill: #2A3550; }
.kb-w.on { fill: var(--gold3); }
.kb-b.on { fill: var(--gold2); }
.kb-w.on.raiz, .kb-b.on.raiz { fill: var(--gold); }
.kb-lb { font: 800 10px -apple-system, sans-serif; fill: #4A3A06; }
.kb-notas { font: 700 11px -apple-system, sans-serif; fill: var(--ink); }
/* ───────── login ─────────
   Campo grande e rótulo escrito em cima: quem tem 60 anos erra em campo
   pequeno com o texto só dentro (o placeholder some quando começa a digitar). */
.lg-ic { width: 62px; height: 62px; border-radius: 20px; background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.12); display: grid; place-items: center;
  margin: 0 auto 22px; color: var(--gold2); }
.lg-ic .ic { width: 32px; height: 32px; }
.lg-t { font-size: 1.5rem; font-weight: 800; text-align: center; letter-spacing: -.5px; }
.lg-t span { background: linear-gradient(100deg, var(--gold2), var(--gold3));
  -webkit-background-clip: text; background-clip: text; color: transparent; }
.lg-x { font-size: .88rem; color: rgba(255,255,255,.6); text-align: center; line-height: 1.55;
  margin: 10px 0 30px; }
.lg-lb { display: block; font-size: .74rem; font-weight: 800; color: rgba(255,255,255,.55);
  margin-bottom: 7px; letter-spacing: .02em; }
.lg-in { width: 100%; padding: 16px; border-radius: 14px; border: 1.5px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.06); color: #fff; font: 600 1rem inherit; outline: none;
  margin-bottom: 18px; }
.lg-in::placeholder { color: rgba(255,255,255,.28); }
.lg-in:focus { border-color: var(--gold); background: rgba(255,255,255,.09); }
.lg-senha { position: relative; }
.lg-senha .lg-in { padding-right: 52px; }
.lg-senha button { position: absolute; right: 6px; top: 6px; width: 42px; height: 42px;
  background: none; border: 0; color: rgba(255,255,255,.5); cursor: pointer;
  display: grid; place-items: center; }
.lg-ajuda { font-size: .76rem; color: rgba(255,255,255,.4); text-align: center; line-height: 1.6;
  margin-top: 22px; }
/* "mandar a senha de novo": é botão de verdade (foco, teclado, leitor de tela),
   pintado de link porque a ação não é o caminho principal da tela */
.lg-link { background: none; border: 0; padding: 0; font: inherit; cursor: pointer;
  color: var(--gold, #E0B44A); text-decoration: underline; text-underline-offset: 2px; }
.lg-link:disabled { opacity: .5; cursor: default; text-decoration: none; }
/* o mesmo lugar do erro serve pro aviso bom — a pessoa já está olhando pra ele */
.erro.ok { color: #8BE0A8; }

/* ───────── janelinha (PDF) ───────── */
.modal { position: fixed; inset: 0; z-index: 95; background: rgba(10,16,30,.55);
  display: flex; align-items: flex-end; justify-content: center; padding: 0; }
.modal-cx { background: var(--card); width: 100%; max-width: 460px; border-radius: 22px 22px 0 0;
  padding: 18px 20px calc(20px + env(safe-area-inset-bottom)); box-shadow: 0 -8px 40px rgba(0,0,0,.25);
  animation: sobe .18s ease-out; }
@keyframes sobe { from { transform: translateY(14px); opacity: .6 } to { transform: none; opacity: 1 } }
@media (min-width: 520px) { .modal { align-items: center; } .modal-cx { border-radius: 22px; } }
.modal-hd { display: flex; align-items: center; justify-content: space-between; }
.modal-hd b { font-size: 1.05rem; }
.modal-hd button { background: none; border: 0; font-size: 1.5rem; line-height: 1; color: var(--mut);
  cursor: pointer; padding: 0 4px; }
.modal-sub { font-size: .78rem; color: var(--mut); margin: 2px 0 14px; }
.pdf-op { display: flex; gap: 11px; align-items: flex-start; padding: 12px; border: 1.5px solid var(--line);
  border-radius: 14px; cursor: pointer; }
.pdf-op input { width: 21px; height: 21px; accent-color: var(--gold); flex-shrink: 0; margin-top: 1px; }
.pdf-op b { display: block; font-size: .85rem; }
.pdf-op i { display: block; font-style: normal; font-size: .72rem; color: var(--mut); margin-top: 2px; line-height: 1.35; }
.pdf-lb { font-size: .72rem; font-weight: 800; color: var(--mut); margin: 16px 0 7px; }
.tam { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; }
.tam button { padding: 11px 4px; border-radius: 13px; border: 1.5px solid var(--line); background: var(--card);
  color: var(--ink); cursor: pointer; font-weight: 700; }
.tam button u { display: block; text-decoration: none; font-size: .68rem; color: var(--mut); font-weight: 600; margin-top: 2px; }
.tam button.on { border-color: var(--gold); background: var(--gold3); color: #5A4708; }
:root[data-tema="escuro"] .tam button.on { background: #3A2F0B; color: var(--gold2); }
.pdf-dica { font-size: .7rem; color: var(--mut); margin-top: 7px; text-align: center; }
.modal-pe { display: flex; gap: 9px; margin-top: 20px; }
.modal-c, .modal-ok { flex: 1; padding: 14px; border-radius: 14px; font-weight: 800; cursor: pointer; font-size: .9rem; }
.modal-c { background: none; border: 1.5px solid var(--line); color: var(--mut); }
.modal-ok { background: var(--gold); border: 1.5px solid var(--gold); color: #1B1403; flex: 1.4; }
.modal-ok:disabled { opacity: .6; }

/* lista de repertórios dentro da janelinha */
.rep-lista { display: flex; flex-direction: column; gap: 8px; max-height: 46vh; overflow-y: auto; }
.rep-lista button { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
  padding: 14px; border-radius: 14px; border: 1.5px solid var(--line); background: var(--card);
  color: var(--ink); cursor: pointer; font: 700 .9rem inherit; }
.rep-lista button .ck { width: 24px; height: 24px; border-radius: 8px; border: 2px solid var(--line);
  display: grid; place-items: center; font-size: 14px; color: transparent; flex-shrink: 0; }
.rep-lista button.on { border-color: var(--gold); background: var(--gold3); color: #5A4708; }
.rep-lista button.on .ck { background: var(--gold); border-color: var(--gold); color: #1B1403; }
.rep-lista button u { display: block; text-decoration: none; font-size: .72rem; font-weight: 600;
  color: var(--mut); margin-top: 2px; }
:root[data-tema="escuro"] .rep-lista button.on { background: #3A2F0B; color: var(--gold2); }
.rep-lista .vazio { font-size: .8rem; color: var(--mut); text-align: center; padding: 18px 0; }
.rep-novo { display: flex; gap: 8px; margin-top: 10px; }
.rep-novo input { flex: 1; padding: 13px; border-radius: 12px; border: 1.5px solid var(--line);
  background: var(--bg); color: var(--ink); font: 600 .88rem inherit; outline: none; }
.rep-novo input:focus { border-color: var(--gold); }
.rep-novo button { padding: 0 18px; border-radius: 12px; border: none; background: var(--navy);
  color: #fff; font: 800 .82rem inherit; cursor: pointer; }

/* teclado e pauta precisam de mais altura que o braço pra nota sair legível */
.diag svg.kb, .diag svg.pt { height: 96px; }

/* baixo: fundamental cheia, quinta vazada */
.bx-raiz { fill: var(--gold); }
.bx-quinta { fill: none; stroke: var(--mut); stroke-width: 1.6; }

/* partitura */
.pt-linha { stroke: var(--mut); stroke-width: .9; }
.pt-nota { fill: var(--ink); }
.pt-alt { font: 700 13px -apple-system, sans-serif; fill: var(--ink); }
.pt-clave { font: 400 34px "Noto Music", "Bravura", serif; fill: var(--ink); }
.cd-name { font: 700 13px -apple-system, sans-serif; fill: var(--ink); }
.cd-fr { font: 600 9px -apple-system, sans-serif; fill: var(--mut); }
.cd-grid { stroke: #CAD1E0; stroke-width: 1; }
:root[data-tema="escuro"] .cd-grid { stroke: #3B4A６B; stroke: #3B4A6B; }
.cd-nut, .cd-dot, .cd-bar { fill: var(--ink); }
.cd-open { fill: none; stroke: var(--ink); stroke-width: 1.5; }
.cd-x { font: 600 9px sans-serif; fill: var(--mut); }
.miss { font-size: .67rem; color: var(--mut); padding: 7px 18px 0; }

/* a cifra: o acorde mora ACIMA da sua palavra; a linha quebra ENTRE blocos */
.cifra { padding: 16px 18px 60vh; font-size: var(--fs); }
.ln { margin-bottom: 12px; line-height: 1; white-space: normal; }
.w { display: inline-block; vertical-align: top; white-space: nowrap; max-width: 100%; }
.u { display: inline-block; vertical-align: top; }
.u b { display: block; height: 1.22em; font: 800 .8em/1.22 ui-monospace, Menlo, Consolas, monospace;
  color: var(--acorde); white-space: pre; letter-spacing: -.2px; }
.u i { display: block; font: 400 1em/1.42 ui-monospace, Menlo, Consolas, monospace; font-style: normal;
  color: var(--letra); white-space: pre; }
.ly { font: 400 1em/1.42 ui-monospace, Menlo, Consolas, monospace; color: var(--letra);
  margin-bottom: 12px; white-space: pre-wrap; overflow-wrap: anywhere; }
.lb { color: var(--rotulo); font: 800 .86em/1.6 ui-monospace, Menlo, monospace; margin-bottom: 8px; }
.inst { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 13px; }
.inst i { font: 800 .78em/1 ui-monospace, Menlo, monospace; font-style: normal; color: var(--acorde);
  background: var(--bg); border: 1px solid var(--line); padding: 6px 9px; border-radius: 8px; }
.bl { height: .75em; }

/* modo palco: tela cheia, sem distração */
.sheet.palco .sh-hd, .sheet.palco .diag, .sheet.palco .miss, .sheet.palco .instr { display: none; }
.sheet.palco .ctl { padding: 8px 18px; }
.sheet.palco .keys { display: none; }
/* a saída do palco: fora do palco não existe, no palco fica sempre à mão */
.sair-palco { display: none; }
.sheet.palco .sair-palco { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px;
  padding: 9px 15px; border-radius: 30px; border: 1px solid var(--line); background: var(--card);
  color: var(--mut); font: 700 .74rem inherit; cursor: pointer; }
.sheet.palco .sair-palco:active { background: var(--bg); }

/* barra de rolagem automática */
.auto { position: fixed; bottom: 0; left: 0; right: 0; z-index: 62; background: var(--navy);
  color: #fff; padding: 12px 18px max(12px, env(safe-area-inset-bottom)); display: none;
  align-items: center; gap: 12px; }
.auto.on { display: flex; }
.auto-in { max-width: 540px; margin: 0 auto; display: flex; align-items: center; gap: 12px; width: 100%; }
.auto button { width: 42px; height: 42px; border-radius: 12px; border: none; background: rgba(255,255,255,.12);
  color: #fff; font-size: 17px; cursor: pointer; flex-shrink: 0; }
.auto button.play { background: var(--gold); color: #1B1403; }
.auto input[type=range] { flex: 1; accent-color: var(--gold); }
.auto span { font: 800 .7rem ui-monospace, monospace; min-width: 52px; text-align: right;
  color: rgba(255,255,255,.7); }

/* barra do metrônomo dentro da cifra — sobe quando a de rolagem está ligada */
.mbar { position: fixed; bottom: 0; left: 0; right: 0; z-index: 61; background: var(--navy2);
  color: #fff; padding: 11px 18px max(11px, env(safe-area-inset-bottom)); display: none;
  align-items: center; gap: 12px; border-top: 1px solid rgba(255,255,255,.08); }
.mbar.on { display: flex; }
.mbar.acima { bottom: 66px; padding-bottom: 11px; }   /* a barra de rolagem ocupa o rodapé */
.mbar-in { max-width: 540px; margin: 0 auto; display: flex; align-items: center; gap: 12px; width: 100%; }
.mbar button { width: 42px; height: 42px; border-radius: 12px; border: none; background: rgba(255,255,255,.12);
  color: #fff; font-size: 17px; cursor: pointer; flex-shrink: 0; }
.mbar button.play { background: var(--gold); color: #1B1403; }
.mbar .bpm { font: 800 1.05rem ui-monospace, monospace; min-width: 46px; text-align: center; }
.mbar .bpm u { display: block; text-decoration: none; font: 700 .56rem -apple-system, sans-serif;
  color: rgba(255,255,255,.5); letter-spacing: .06em; }
.mbar .pulso { flex: 1; display: flex; gap: 6px; justify-content: center; }
.mbar .pulso i { width: 9px; height: 9px; border-radius: 50%; background: rgba(255,255,255,.18); transition: .06s; }
.mbar .pulso i.forte { background: rgba(255,255,255,.3); }
.mbar .pulso i.on { background: var(--gold2); transform: scale(1.35); }
.mbar .tap { width: auto; padding: 0 13px; font: 800 .7rem -apple-system, sans-serif; }

/* ───────── studio (afinador, metrônomo, ouvido) ───────── */
.tabs { display: flex; gap: 8px; padding: 16px 20px 0; }
.tabs button { flex: 1; padding: 11px; border-radius: 13px; border: 1.5px solid var(--line);
  background: var(--card); color: var(--mut); font: 800 .74rem inherit; cursor: pointer; }
.tabs button.on { background: var(--navy); border-color: var(--navy); color: #fff; }
.ferr { padding: 18px 20px; }
.ferr.off { display: none; }

.afin { text-align: center; padding: 10px 0 4px; }
.afin-nota { font: 800 4rem/1 ui-monospace, Menlo, monospace; letter-spacing: -2px; margin: 6px 0; }
.afin-cent { height: 8px; background: var(--line); border-radius: 8px; position: relative; margin: 20px 0 10px; }
.afin-cent i { position: absolute; top: -4px; width: 4px; height: 16px; background: var(--ink);
  border-radius: 3px; left: 50%; transform: translateX(-50%); transition: left .1s, background .1s; }
.afin-cent u { position: absolute; left: 50%; top: -8px; width: 2px; height: 24px;
  background: var(--gold); transform: translateX(-50%); opacity: .5; }
.afin-msg { font-size: .8rem; color: var(--mut); min-height: 20px; }
.afin.ok .afin-nota { color: #3E9B54; }
.cordas { display: flex; justify-content: center; gap: 7px; margin: 18px 0 4px; flex-wrap: wrap; }
.cordas button { width: 46px; height: 46px; border-radius: 13px; border: 1.5px solid var(--line);
  background: var(--card); color: var(--ink); font: 800 .95rem ui-monospace, monospace; cursor: pointer; }
.cordas button.on { background: var(--gold); border-color: var(--gold); color: #1B1403; }

.metro { text-align: center; }
.metro-bpm { font: 800 4.2rem/1 ui-monospace, Menlo, monospace; letter-spacing: -2px; }
.metro-bpm small { font-size: .9rem; font-weight: 700; color: var(--mut); display: block;
  letter-spacing: 1px; margin-top: 2px; }
.metro-ctl { display: flex; align-items: center; justify-content: center; gap: 12px; margin: 18px 0; }
.metro-ctl button { width: 52px; height: 52px; border-radius: 16px; border: 1.5px solid var(--line);
  background: var(--card); color: var(--ink); font: 700 1.4rem inherit; cursor: pointer; }
.pulsos { display: flex; justify-content: center; gap: 9px; margin: 20px 0; }
.pulsos i { width: 14px; height: 14px; border-radius: 50%; background: var(--line); transition: .08s; }
.pulsos i.on { background: var(--gold); transform: scale(1.45); }
.pulsos i.forte.on { background: #3E9B54; }
.compassos { display: flex; gap: 7px; justify-content: center; flex-wrap: wrap; margin-bottom: 6px; }
.compassos button { padding: 9px 14px; border-radius: 11px; border: 1.5px solid var(--line);
  background: var(--card); color: var(--mut); font: 800 .78rem ui-monospace, monospace; cursor: pointer; }
.compassos button.on { background: var(--navy); border-color: var(--navy); color: #fff; }

.ouv-btn { display: grid; grid-template-columns: repeat(2,1fr); gap: 9px; margin-top: 16px; }
.ouv-btn button { padding: 16px; border-radius: 14px; border: 1.5px solid var(--line);
  background: var(--card); color: var(--ink); font: 800 .9rem inherit; cursor: pointer; }
.ouv-btn button.certo { background: #E7F6EC; border-color: #3E9B54; color: #276B39; }
.ouv-btn button.errado { background: #FDECEC; border-color: #D46A6A; color: #983434; }
.ouv-placar { display: flex; gap: 18px; justify-content: center; margin-top: 16px;
  font-size: .78rem; color: var(--mut); font-weight: 700; }
.ouv-placar b { color: var(--ink); }

@media print {
  .nav, .ctl, .sh-fer, .auto, .diag, .sh-back { display: none !important; }
  .sheet { position: static; overflow: visible; }
  .cifra { padding: 0; font-size: 12pt; }
  body { background: #fff; }
}