/* Lalatone. Tokens do sistema de design (cores, tipos, raios) e, por cima, os apelidos que o motor.js e
   os templates antigos ainda leem (--bg, --panel, --accent, --ref, --warn, --bad...). */
:root{
  --paper:#fbfaff; --paper-raised:#ffffff; --paper-2:#f3f1fb; --stage:#16122e; --on-stage:#f1effb;
  --ink:#16122e; --muted:#5b5878; --line:#e4e1f5;
  --lala:#6e4bff; --on-lala:#ffffff; --lala-text:#5a38f0; --lala-soft:#ece7ff;
  --tone:#0e8fc9; --tone-soft:#d8f0fc;
  --ok:#1c9a57; --quase:#c77d00; --fora:#d23a6a; --premium:#b8860b; --on-premium:#16122e; --mute-trail:#a29ec2;
  --shadow-card:0 1px 2px rgba(22,18,46,.06),0 8px 24px rgba(22,18,46,.08); --shadow-lala:0 6px 20px rgba(110,75,255,.28);
  --radius-sm:6px; --radius-md:12px; --radius-lg:20px;
  --font-display:"Gabarito","Noto Sans JP","Noto Sans SC",system-ui,sans-serif;
  --font-body:"IBM Plex Sans","Noto Sans JP","Noto Sans SC",system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-mono:"IBM Plex Mono",ui-monospace,Consolas,"Courier New",monospace;
  /* apelidos */
  --bg:var(--paper); --panel:var(--paper-raised); --panel-2:var(--paper-2); --accent:var(--lala); --accent-ink:var(--on-lala);
  --ref:var(--tone); --ref-soft:var(--tone-soft); --warn:var(--quase); --bad:var(--fora);
  color-scheme:light;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --paper:#0f0c22; --paper-raised:#1a1536; --paper-2:#221c45; --stage:#080617; --ink:#f1effb; --muted:#a29ec2; --line:#2a2450;
    --lala-text:#b3a3ff; --lala-soft:#2a2160; --tone:#2bb8f5; --tone-soft:#0e3a52;
    --ok:#3ddc84; --quase:#ffb54a; --fora:#ff5c8a; --premium:#f2c14e; --mute-trail:#5b5878;
    --shadow-card:0 1px 2px rgba(0,0,0,.5),0 8px 24px rgba(0,0,0,.45); --shadow-lala:0 6px 20px rgba(110,75,255,.35);
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --paper:#0f0c22; --paper-raised:#1a1536; --paper-2:#221c45; --stage:#080617; --ink:#f1effb; --muted:#a29ec2; --line:#2a2450;
  --lala-text:#b3a3ff; --lala-soft:#2a2160; --tone:#2bb8f5; --tone-soft:#0e3a52;
  --ok:#3ddc84; --quase:#ffb54a; --fora:#ff5c8a; --premium:#f2c14e; --mute-trail:#5b5878;
  --shadow-card:0 1px 2px rgba(0,0,0,.5),0 8px 24px rgba(0,0,0,.45); --shadow-lala:0 6px 20px rgba(110,75,255,.35);
  color-scheme:dark;
}
/* O palco: o rolo de notas é escuro nos dois temas. O motor.js lê as variáveis a partir do canvas. */
.rolo-wrap,canvas.rolo,canvas.mini,.letra{
  --ink:#f1effb; --muted:#a29ec2; --line:#2a2450; --panel:#1a1536; --panel-2:#080617; --ref:#2bb8f5; --ref-soft:#0e3a52;
  --ok:#3ddc84; --warn:#ffb54a; --bad:#ff5c8a; --mute-trail:#5b5878; --accent:#8f75ff;
}
*{box-sizing:border-box}
html{height:100%}
body{margin:0;min-height:100%;display:flex;flex-direction:column;background:var(--bg);color:var(--ink);font:15px/1.5 var(--font-body);-webkit-font-smoothing:antialiased}
[hidden]{display:none!important}
a{color:var(--lala-text)}
code{font-family:var(--font-mono);font-size:12px;background:var(--panel-2);padding:1px 5px;border-radius:4px}
button,select,input{font:inherit;color:inherit}
button,a.botao{cursor:pointer;border:1px solid var(--line);background:var(--panel);border-radius:var(--radius-md);padding:9px 16px;display:inline-block;text-decoration:none;color:inherit;line-height:normal;font-weight:500}
button:hover,a.botao:hover{border-color:var(--muted);background:var(--lala-soft)}
button:focus-visible,select:focus-visible,input:focus-visible,a:focus-visible{outline:2px solid var(--lala-text);outline-offset:2px}
button.primario,a.botao.primario{background:var(--lala);border-color:var(--lala);color:var(--on-lala);font-weight:600}
button.primario:hover,a.botao.primario:hover{filter:brightness(1.07);background:var(--lala)}
button.grande,a.botao.grande{padding:12px 22px;font-size:16px;box-shadow:var(--shadow-lala)}
button.premium,a.botao.premium{background:var(--premium);border-color:var(--premium);color:var(--on-premium);font-weight:600}
button.link{border:0;background:none;color:var(--muted);padding:6px 4px}
button.link:hover{color:var(--ink);background:none}
button[disabled]{opacity:.45;cursor:not-allowed;box-shadow:none}
input[type=text],input[type=email],input[type=password],input[type=url]{border:1px solid var(--line);background:var(--panel);border-radius:var(--radius-md);padding:10px 12px;width:100%;min-width:0}
input[type=range]{accent-color:var(--lala);width:120px;max-width:100%}
input[type=checkbox]{accent-color:var(--lala);width:16px;height:16px}
label{display:inline-flex;align-items:center;gap:6px;color:var(--muted);white-space:nowrap}
label > span.v{font-family:var(--font-mono);color:var(--ink);min-width:5ch;text-align:right;font-variant-numeric:tabular-nums}
h1,h2,h3{text-wrap:balance}
h2{font:700 24px/1.2 var(--font-display);margin:0;letter-spacing:-.01em}
h2 small{font:500 13px var(--font-body);color:var(--muted);margin-left:8px}
.dica{color:var(--muted);font-size:13px}
.linha{display:flex;gap:10px 16px;flex-wrap:wrap;align-items:center;min-width:0}
.linha.entre{justify-content:space-between}
.acoes{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.aviso{border:1px solid var(--quase);background:color-mix(in srgb,var(--quase) 12%,var(--panel));border-radius:var(--radius-md);padding:10px 12px}
.flash{width:100%;max-width:1400px;margin:0 auto;padding:0 16px}
.flash div{border:1px solid var(--quase);background:color-mix(in srgb,var(--quase) 12%,var(--panel));border-radius:var(--radius-md);padding:10px 12px;margin-bottom:8px}

/* ---- cabeçalho e rodapé */
.topo{display:flex;align-items:center;gap:16px;flex-wrap:wrap;padding:12px 16px;max-width:1400px;margin:0 auto;width:100%}
.marca{display:inline-flex;align-items:center;color:var(--ink);text-decoration:none;line-height:0}
.marca svg{height:32px;width:auto;display:block}
.marca small{display:none}
.versao{font:500 11px/1.4 var(--font-mono);color:var(--muted);border:1px solid var(--line);border-radius:999px;padding:1px 8px;white-space:nowrap;letter-spacing:.02em}
.topo nav{margin-left:auto;display:flex;align-items:center;gap:6px 14px;flex-wrap:wrap}
.topo nav a{color:var(--ink);text-decoration:none;font-weight:500}
.topo nav a.botao{font-weight:600}
.topo nav a.conta{color:var(--muted);font-size:13px;max-width:28ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tag{display:inline-block;background:var(--premium);color:var(--on-premium);border-radius:999px;padding:1px 8px;font-size:11px;font-weight:600;vertical-align:middle;letter-spacing:.04em}
form.inline{display:inline}
.app{flex:1;width:100%;max-width:1400px;margin:0 auto;padding:4px 16px 24px;display:flex;flex-direction:column;gap:18px}
.rodape{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;max-width:1400px;margin:0 auto;width:100%;padding:12px 16px 20px;color:var(--muted);font-size:12px;border-top:1px solid var(--line)}

/* ---- início */
.heroi{text-align:center;padding:28px 0 8px;display:flex;flex-direction:column;gap:14px;align-items:center}
.heroi h1{font:800 clamp(30px,5vw,52px)/1.05 var(--font-display);margin:0;letter-spacing:-.02em;max-width:22ch}
.heroi h1 em{font-style:normal;color:var(--lala-text)}
.heroi p{margin:0;color:var(--muted);max-width:60ch}
.form-link{display:flex;gap:8px;width:100%;max-width:640px}
.form-link input{flex:1}
.resultado{width:100%;max-width:640px;border:1px solid var(--line);background:var(--panel);border-radius:var(--radius-md);padding:12px 14px;text-align:left}
.resultado.ruim{border-color:var(--fora)}
.resultado p{margin:6px 0}
.spin{display:inline-block;width:14px;height:14px;border:2px solid var(--line);border-top-color:var(--lala);border-radius:50%;animation:gira .8s linear infinite;vertical-align:middle;margin-right:6px}
@keyframes gira{to{transform:rotate(360deg)}}
.passos{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;width:100%;max-width:860px;margin-top:6px}
.passos div{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-md);padding:12px;text-align:left;color:var(--muted);font-size:14px}
.passos b{display:inline-grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--lala);color:var(--on-lala);margin-right:8px;font-family:var(--font-display)}
@media (max-width:700px){.passos{grid-template-columns:1fr}}
.cartoes{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:12px}
.cartao{display:flex;flex-direction:column;gap:2px;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-md);padding:10px;text-decoration:none;color:var(--ink);transition:border-color .15s}
.cartao:hover{border-color:var(--lala)}
.cartao .capa{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:8px;background:var(--panel-2);margin-bottom:6px}
.cartao .titulo{font:700 16px/1.2 var(--font-display)}
.cartao .artista{color:var(--muted);font-size:13px}
.cartao .meta{color:var(--muted);font-size:12px;font-family:var(--font-mono)}
.planos-chamada{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-lg);padding:18px 20px}
.planos-chamada p{margin:4px 0 0;color:var(--muted);max-width:70ch}
.anuncio{width:100%}
.anuncio-vazio{border:1px dashed var(--line);border-radius:var(--radius-md);padding:10px 12px;color:var(--muted);font-size:13px;text-align:center}
.anuncio-vazio .rotulo{text-transform:uppercase;letter-spacing:.06em;font-size:10px;margin-right:8px;border:1px solid var(--line);border-radius:4px;padding:1px 5px}

/* ---- painéis, formulários, tabelas */
.painel{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-lg);padding:18px;display:flex;flex-direction:column;gap:14px;min-width:0}
.painel.estreito{max-width:480px;margin:12px auto;width:100%}
.painel h1{font:800 28px/1.1 var(--font-display);margin:0;letter-spacing:-.015em}
.painel h1 small{display:block;font:400 13px var(--font-body);color:var(--muted);margin-top:4px}
.form{display:flex;flex-direction:column;gap:12px}
.form label{display:flex;flex-direction:column;align-items:stretch;gap:4px;white-space:normal}
.tile{background:var(--panel-2);border:1px solid var(--line);border-radius:var(--radius-md);padding:12px 14px;display:flex;flex-direction:column;gap:8px;min-width:0;align-items:flex-start}
.tile b{font:700 16px var(--font-display)}
.tile span{color:var(--muted);font-size:13px}
.cartoes-plano{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:12px}
.tabela{width:100%;border-collapse:collapse;font-size:14px}
.tabela th{text-align:left;color:var(--muted);font-weight:600;font-size:12px;text-transform:uppercase;letter-spacing:.06em;padding:6px 8px;border-bottom:1px solid var(--line)}
.tabela td{padding:8px;border-bottom:1px solid var(--line);vertical-align:top}
.tabela td form{display:inline}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:8px}
.stat{background:var(--panel-2);border:1px solid var(--line);border-radius:var(--radius-md);padding:6px 8px;min-width:0}
.stat b{display:block;font-family:var(--font-mono);font-size:18px;font-weight:500;font-variant-numeric:tabular-nums}
.stat span{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
.precos{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:14px}
.preco{border:1px solid var(--line);border-radius:var(--radius-lg);padding:18px;display:flex;flex-direction:column;gap:10px;background:var(--panel-2)}
.preco.destaque{border-color:var(--lala);box-shadow:0 0 0 3px color-mix(in srgb,var(--lala) 20%,transparent)}
.preco .valor{font:800 36px/1 var(--font-display);letter-spacing:-.02em}
.preco .valor small{font:500 14px var(--font-body);color:var(--muted)}
.preco ul{margin:0;padding-left:18px;color:var(--muted);display:flex;flex-direction:column;gap:4px}
.chamada{border:1px solid var(--line);border-radius:var(--radius-md);padding:10px 12px;background:var(--panel-2);display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.paywall{border:1px solid var(--lala);background:var(--lala-soft);border-radius:var(--radius-md);padding:12px 14px}
.paywall p{margin:6px 0}
.livre{border:1px dashed var(--line);border-radius:var(--radius-md);padding:10px 12px;color:var(--muted);font-size:13px}

/* ---- cantar */
.cantar{display:grid;grid-template-columns:minmax(300px,440px) minmax(0,1fr);gap:16px;align-items:start}
@media (max-width:900px){.cantar{grid-template-columns:1fr}}
.col-video,.col-rolo{display:flex;flex-direction:column;gap:10px;min-width:0}
.musica-titulo{font:800 24px/1.15 var(--font-display);margin:0;letter-spacing:-.015em}
.musica-titulo small{display:block;font:400 13px var(--font-body);color:var(--muted);margin-top:3px}
.video{position:relative;width:100%;aspect-ratio:16/9;background:#000;border-radius:var(--radius-md);overflow:hidden;border:1px solid var(--line)}
.video iframe,.video #player{position:absolute;inset:0;width:100%;height:100%;border:0}
.pill{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);border-radius:999px;padding:3px 10px;font-size:12px;color:var(--muted)}
.pill i{width:8px;height:8px;border-radius:50%;background:var(--mute-trail)}
.pill.on i{background:var(--ok);box-shadow:0 0 0 3px color-mix(in srgb,var(--ok) 25%,transparent)}
.tempo{font-family:var(--font-mono);font-variant-numeric:tabular-nums;color:var(--muted)}
.rolo-wrap{position:relative;min-width:0}
canvas.rolo{display:block;width:100%;height:clamp(240px,46vh,560px);background:var(--stage);border:1px solid var(--line);border-radius:var(--radius-lg)}
canvas.mini{display:block;width:100%;height:34px;border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--stage);cursor:pointer}
.badge{position:absolute;right:10px;top:8px;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-sm);padding:2px 8px;font-family:var(--font-mono);font-size:12px;color:var(--muted)}
.hud{position:absolute;left:54px;top:8px;background:rgba(14,58,82,.92);border:1px solid var(--line);border-radius:var(--radius-md);padding:8px 12px;min-width:210px;max-width:280px;pointer-events:none;display:flex;flex-direction:column;gap:2px;color:var(--ink)}
.hud .acao{font:800 22px/1.1 var(--font-display);letter-spacing:-.01em;min-height:24px}
.hud .acao.ok{color:var(--ok)}.hud .acao.quase{color:var(--warn)}.hud .acao.fora{color:var(--bad)}.hud .acao.neutro{color:var(--muted)}
.hud .alvo{font-family:var(--font-mono);font-size:12px;color:var(--ink);min-height:16px}
.hud .dica{font-size:12px;color:var(--muted);min-height:16px}
.hud .tend{font-size:11px;color:var(--muted);border-top:1px dashed var(--line);padding-top:4px;margin-top:2px}
/* letra: linha anterior apagada, a atual grande e preenchida da esquerda para a direita conforme as notas-guia
   passam (--prog, posto pelo cantar.js a cada quadro), as duas próximas em tamanho decrescente */
.letra{display:flex;flex-direction:column;gap:4px;padding:12px 16px;border:1px solid var(--line);border-radius:var(--radius-md);background:var(--stage);min-height:120px;color:var(--ink);text-align:center}
.letra .ant{color:var(--muted);font-size:14px;opacity:.6;min-height:18px}
.letra .atual{font:800 clamp(22px,3.4vw,34px)/1.2 var(--font-display);letter-spacing:-.01em;min-height:1.2em;position:relative}
.letra .atual span:first-child{background:linear-gradient(90deg,var(--ok) var(--prog,0%),var(--ink) var(--prog,0%));-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
.letra .atual .conta{display:inline-block;margin-left:10px;color:var(--ref);font:700 clamp(14px,2vw,20px)/1 var(--font-mono);letter-spacing:.3em;vertical-align:middle}
.letra .prox{color:var(--ink);font:600 clamp(16px,2.2vw,22px)/1.3 var(--font-display);opacity:.85;min-height:1.3em}
.letra .prox2{color:var(--muted);font-size:14px;min-height:18px}
@media (max-width:760px){.letra{padding:10px 12px;min-height:104px}}
.placar{display:grid;grid-template-columns:2fr repeat(4,1fr);gap:8px;min-width:0}
@media (max-width:760px){.placar{grid-template-columns:1fr 1fr}.placar .grande{grid-column:1 / -1}}
.placar .stat b{font-size:22px}
.placar .grande b{font:800 40px/1 var(--font-display);color:var(--lala-text)}
.placar .grande span,.fim .grande span{text-transform:none;letter-spacing:0;font-size:12px}
.placar .ok b{color:var(--ok)}.placar .quase b{color:var(--warn)}.placar .fora b{color:var(--bad)}
.chips{display:flex;gap:6px;flex-wrap:wrap}
.chips button{padding:4px 10px;font-family:var(--font-mono);font-size:12px}
.fim{border:1px solid var(--lala);border-radius:var(--radius-lg);padding:12px 14px;background:var(--panel);display:flex;flex-direction:column;gap:8px}
.fim .grande b{font:800 44px/1 var(--font-display);color:var(--lala-text)}
.fim .resultado{display:flex;align-items:center;gap:14px}
.fim .resultado .grande{flex:1}
.fim .estrelas{display:block;color:var(--premium);font-size:18px;letter-spacing:.1em;text-transform:none;margin:2px 0}
/* faixa S/A/B/C/D pela pontuação */
.rank{display:inline-flex;align-items:center;justify-content:center;width:64px;height:64px;border-radius:16px;font:800 38px/1 var(--font-display);color:#fff;background:var(--muted);flex:none;box-shadow:var(--shadow-card)}
.rank.rS{background:linear-gradient(135deg,#f2c14e,#ff7ad9)}.rank.rA{background:var(--ok)}.rank.rB{background:var(--tone)}.rank.rC{background:var(--quase)}.rank.rD{background:var(--fora)}
.fim .recorde{font-weight:600;color:var(--lala-text)}
.relatorio{display:flex;flex-direction:column;gap:10px}
.relatorio pre{margin:0;white-space:pre-wrap;font:12px/1.5 var(--font-mono);background:var(--panel-2);border:1px solid var(--line);border-radius:var(--radius-md);padding:12px;max-height:440px;overflow:auto}
.relatorio .imgs{display:flex;flex-direction:column;gap:8px}
.relatorio img{width:100%;height:auto;border:1px solid var(--line);border-radius:8px;background:#fff}
@media (prefers-reduced-motion: reduce){.spin{animation:none}.cartao{transition:none}}

/* ---- pagamentos e conta */
.estado{display:inline-block;border-radius:999px;padding:2px 9px;font-size:12px;font-weight:600;border:1px solid var(--line);background:var(--panel-2);white-space:nowrap}
.estado.aprovada{color:var(--ok);border-color:var(--ok);background:color-mix(in srgb,var(--ok) 12%,var(--panel))}
.estado.criada,.estado.pendente{color:var(--warn);border-color:var(--warn);background:color-mix(in srgb,var(--warn) 12%,var(--panel))}
.estado.recusada,.estado.estornada{color:var(--bad);border-color:var(--bad);background:color-mix(in srgb,var(--bad) 12%,var(--panel))}
.estado.cancelada,.estado.expirada{color:var(--muted)}
.metodos{display:flex;gap:6px;flex-wrap:wrap;margin:0}
.metodos .pill{border:1px solid var(--line);border-radius:999px;padding:2px 10px;font-size:12px;color:var(--muted);background:var(--panel)}
.periodos{display:flex;flex-direction:column;gap:8px}
.periodo{display:flex;align-items:center;gap:10px;border:1px solid var(--line);border-radius:var(--radius-md);padding:10px 12px;cursor:pointer;white-space:normal;color:var(--ink);background:var(--panel)}
.periodo:has(input:checked){border-color:var(--lala);box-shadow:0 0 0 2px color-mix(in srgb,var(--lala) 25%,transparent)}
.periodo input{accent-color:var(--lala);width:16px;height:16px;flex:none}
.periodo span{display:flex;flex-direction:column;gap:2px}
.periodo small{color:var(--muted)}
.pix{display:flex;flex-direction:column;align-items:stretch;gap:4px;white-space:normal}
.pix textarea{font-family:var(--font-mono);font-size:12px;border:1px solid var(--line);background:var(--panel);border-radius:var(--radius-md);padding:8px 10px;width:100%;resize:vertical;color:inherit}
.tile.form{gap:10px}
.tile.form label{color:var(--muted);width:100%}
.tile.form span{white-space:normal}
.acoes-td{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
select,input[type=number]{border:1px solid var(--line);background:var(--panel);border-radius:var(--radius-md);padding:8px 10px;color:inherit}
.linha label{white-space:nowrap}
.linha label input{width:auto}

/* ---- idioma (menu com bandeiras) e consentimento */
.idiomas{position:relative;display:inline-block}
.idiomas summary{list-style:none;display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);border-radius:999px;padding:4px 10px 4px 6px;font-size:12px;font-weight:600;color:var(--ink);cursor:pointer;background:var(--panel);user-select:none}
.idiomas summary::-webkit-details-marker{display:none}
.idiomas summary .seta{width:10px;height:6px;color:var(--muted)}
.idiomas summary:hover,.idiomas[open] summary{border-color:var(--lala)}
.idiomas .menu{position:absolute;right:0;top:calc(100% + 6px);min-width:190px;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-md);box-shadow:var(--shadow-card);padding:6px;display:flex;flex-direction:column;gap:2px;z-index:40}
.idiomas .menu a,.idiomas .menu button{display:flex;align-items:center;gap:10px;padding:8px 10px;border:0;border-radius:8px;text-decoration:none;color:var(--ink);font-size:14px;font-weight:500;background:none;text-align:left;width:100%}
.idiomas .menu a:hover,.idiomas .menu button:hover{background:var(--lala-soft)}
.idiomas .menu a.ativo,.idiomas .menu button.ativo{background:var(--paper-2);color:var(--lala-text)}
.bandeira{width:20px;height:14px;border-radius:3px;flex:none;box-shadow:0 0 0 1px rgba(22,18,46,.15)}

/* ---- entrar com o Google */
a.botao.google{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;font-weight:600;padding:11px 16px}
a.botao.google svg{flex:none}
.ou{display:flex;align-items:center;gap:10px;color:var(--muted);font-size:12px;text-transform:lowercase}
.ou::before,.ou::after{content:"";flex:1;border-top:1px solid var(--line)}

/* ---- afinador */
.afinador{display:grid;grid-template-columns:minmax(260px,340px) minmax(0,1fr);gap:16px;align-items:start}
.afinador > *{min-width:0}
@media (max-width:820px){.afinador{grid-template-columns:minmax(0,1fr)}}
.tile.leitura{gap:8px;align-items:stretch;overflow:hidden}
.tile.leitura .nota{font:800 72px/1 var(--font-display);letter-spacing:-.03em;font-variant-numeric:tabular-nums;min-height:72px;color:var(--ink)}
.tile.leitura .nota.vazia{color:var(--muted);font-size:40px;line-height:72px}
.tile.leitura .nota sub{font-size:.4em;vertical-align:baseline;color:var(--muted);font-weight:600}
.tile.leitura .hz{font-family:var(--font-mono);color:var(--muted);font-size:12px}
.gauge{position:relative;height:14px;border-radius:7px;background:linear-gradient(90deg,var(--fora) 0,var(--quase) 25%,var(--ok) 45%,var(--ok) 55%,var(--quase) 75%,var(--fora) 100%);opacity:.9;margin-top:6px}
.gauge::after{content:"";position:absolute;left:50%;top:-3px;bottom:-3px;width:2px;background:var(--ink);transform:translateX(-50%);opacity:.5}
.gauge .agulha{position:absolute;top:-5px;width:4px;height:24px;border-radius:2px;background:var(--ink);left:50%;transform:translateX(-50%);transition:left .06s linear;box-shadow:0 0 0 2px var(--panel-2)}
.gauge-legenda{display:flex;justify-content:space-between;font-family:var(--font-mono);font-size:11px;color:var(--muted)}
.tile.leitura .cents{font-family:var(--font-mono);font-size:22px;font-variant-numeric:tabular-nums;min-height:28px}
.orientacao{font:700 18px/1.2 var(--font-display);min-height:22px;color:var(--muted)}
.orientacao.ok{color:var(--ok)}.orientacao.quase{color:var(--quase)}.orientacao.fora{color:var(--fora)}
.tile.leitura .stats{grid-template-columns:1fr 1fr}
.tile.leitura .stat span{white-space:normal}
.chips .ativo,button.ativo{border-color:var(--lala);color:var(--lala-text);font-weight:600}
.extensao{border:1px solid var(--line);border-radius:var(--radius-lg);padding:14px 16px;background:var(--panel-2);display:flex;flex-direction:column;gap:10px}
.extensao h2 small{display:block;margin:4px 0 0}
.ext-resultado{display:flex;flex-direction:column;gap:10px}
canvas.teclado{display:block;width:100%;height:64px;border-radius:var(--radius-sm)}
details.como{color:var(--muted);font-size:14px;max-width:80ch}
details.como summary{cursor:pointer;color:var(--ink);font-weight:600}
details.como p{margin:8px 0;line-height:1.6}
label.moeda{white-space:nowrap}
@media (prefers-reduced-motion: reduce){.gauge .agulha{transition:none}}
.consentimento{position:fixed;left:16px;right:16px;bottom:16px;z-index:50;max-width:720px;margin:0 auto;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:var(--shadow-card);padding:14px 16px;display:flex;gap:12px;flex-wrap:wrap;align-items:center;font-size:14px}
.consentimento p{margin:0;flex:1 1 320px;color:var(--muted)}

/* ---- páginas legais e rótulo de anúncio */
.legal h2{font:700 20px/1.3 var(--font-display);margin:18px 0 6px}
.legal p,.legal li{max-width:72ch;line-height:1.6}
.legal ul{padding-left:20px;display:flex;flex-direction:column;gap:6px}
.rotulo-anuncio{display:block;text-transform:uppercase;letter-spacing:.06em;font-size:10px;color:var(--muted);margin-bottom:4px}

/* ---- barra fixa de assinatura */
.cta-pagamento{position:fixed;left:16px;right:16px;bottom:16px;z-index:45;max-width:860px;margin:0 auto;background:var(--panel);border:1px solid var(--lala);border-radius:var(--radius-lg);box-shadow:var(--shadow-card);padding:10px 14px;display:flex;gap:10px;align-items:center;flex-wrap:wrap;font-size:14px}
.cta-pagamento .texto{flex:1 1 260px;color:var(--ink)}
.cta-pagamento .texto .detalhe{color:var(--muted)}
.cta-pagamento .fechar{font-size:20px;line-height:1;padding:2px 8px}
body:has(.cta-pagamento:not([hidden])) .app{padding-bottom:84px}
@media (max-width:600px){.cta-pagamento .detalhe{display:none}}

/* ---- planos: tudo numa tela, sem rolagem. Desktop: dois cartões lado a lado; celular: abas Grátis/Premium
   (rádios + :has) mostram um cartão por vez. Períodos são botões lado a lado. */
.app:has(.planos-pagina){justify-content:center}
.planos-pagina{gap:12px}
.planos-pagina h1{font-size:26px}
.planos-pagina .precos{grid-template-columns:minmax(240px,2fr) minmax(320px,3fr);align-items:stretch;gap:14px}
.planos-pagina .preco{gap:12px;padding:16px 18px}
.preco .cabeca{display:flex;align-items:baseline;justify-content:space-between;gap:8px 14px;flex-wrap:wrap}
.preco .cabeca h2{font-size:20px}
.planos-pagina .preco .valor{font-size:32px;white-space:nowrap}
.planos-pagina .preco ul{list-style:none;padding:0;gap:6px;font-size:14px;color:var(--ink)}
.planos-pagina .preco li{display:flex;gap:8px;align-items:flex-start;line-height:1.4}
.planos-pagina .preco li::before{content:"✓";flex:none;width:18px;text-align:center;font:700 13px/1.4 var(--font-mono);color:var(--muted)}
.planos-pagina .preco.destaque li::before{color:var(--ok)}
.planos-pagina .rodape-preco{margin-top:auto;display:flex;align-items:center;min-height:40px}
.planos-pagina .rodape-preco .botao{width:100%;text-align:center}
.planos-pagina .form.assinar{gap:10px;margin-top:auto}
.planos-pagina .form.assinar button{width:100%}
.planos-pagina .periodos{display:grid;grid-template-columns:repeat(auto-fit,minmax(104px,1fr));gap:8px}
.planos-pagina .periodo{position:relative;display:flex;flex-direction:column;align-items:stretch;gap:0;padding:10px 8px;text-align:center}
.planos-pagina .periodo input{position:absolute;opacity:0;width:1px;height:1px;margin:0;pointer-events:none}
.planos-pagina .periodo:has(input:focus-visible){outline:2px solid var(--lala-text);outline-offset:2px}
.planos-pagina .periodo span{display:flex;flex-direction:column;align-items:center;gap:3px}
.planos-pagina .periodo b{font:600 11px/1.2 var(--font-body);letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.planos-pagina .periodo strong{font:700 17px/1.1 var(--font-display);color:var(--ink);letter-spacing:-.01em}
.planos-pagina .periodo small{font-size:11.5px;min-height:15px;line-height:1.3;color:var(--muted)}
.planos-pagina .periodo:has(input:checked){background:var(--lala-soft)}
.planos-pagina .periodo:has(input:checked) b{color:var(--lala-text)}
.planos-pagina .metodos{margin:0}
.planos-pagina .dica.miudo{margin:0;font-size:12px;line-height:1.45}
.plano-abas{display:none;position:relative}
@media (max-width:760px){
  .topo{padding:8px 12px;gap:6px 10px}
  .topo nav{gap:4px 10px;font-size:14px}
  .topo nav a.botao{padding:7px 12px}
  .marca svg{height:28px}
  .rodape{font-size:11px;padding:10px 12px 14px;gap:6px 12px}
  .app:has(.planos-pagina){padding:0 12px 12px;gap:12px}
  .planos-pagina{padding:14px;gap:10px}
  .planos-pagina h1{font-size:24px}
  .planos-pagina h1 small{display:none}
  .planos-topo{flex-wrap:nowrap}
  .planos-topo select{max-width:150px;padding:6px 8px;text-overflow:ellipsis}
  .planos-pagina .precos{grid-template-columns:1fr}
  .planos-pagina .preco{gap:10px;padding:14px}
  .planos-pagina .preco ul{font-size:13.5px;gap:5px}
  .planos-pagina .periodos{grid-template-columns:repeat(3,1fr);gap:6px}
  .planos-pagina .periodo{padding:8px 4px}
  .planos-pagina .periodo strong{font-size:15px}
  .planos-pagina .periodo small{font-size:10.5px}
  .planos-pagina .metodos .pill{font-size:11px;padding:1px 8px}
  .planos-pagina .so-desktop{display:none}
  .plano-abas{display:grid;grid-template-columns:1fr 1fr;gap:4px;padding:4px;border:1px solid var(--line);border-radius:999px;background:var(--panel-2)}
  .plano-abas input{position:absolute;opacity:0;width:1px;height:1px;margin:0;pointer-events:none}
  .plano-abas label{justify-content:center;padding:8px 12px;border-radius:999px;color:var(--muted);font-weight:600;cursor:pointer;user-select:none}
  .plano-abas input:checked + label{background:var(--lala);color:var(--on-lala)}
  .plano-abas input:focus-visible + label{outline:2px solid var(--lala-text);outline-offset:2px}
  .planos-pagina:has(#aba-gratis:checked) .preco.destaque,.planos-pagina:has(#aba-premium:checked) .preco.gratis{display:none}
  .planos-pagina .preco.destaque{box-shadow:none}
}
@media (max-height:700px) and (min-width:761px){
  .planos-pagina{gap:8px;padding:14px 18px}
  .planos-pagina .preco{gap:8px;padding:12px 16px}
  .planos-pagina .preco ul{gap:3px;font-size:13px}
  .planos-pagina .preco .valor{font-size:28px}
  .planos-pagina .form.assinar button.grande{padding:10px 18px;font-size:15px}
}