/* Tema Robô Academia: preto profundo, verde-limão de destaque, cartões arredondados.
   Carregado DEPOIS do <style> de cada página: só muda a aparência, nunca a lógica. */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=Exo+2:ital,wght@1,900&display=swap');

:root {
  --fundo: #070807;
  --cartao: #121412;
  --cartao2: #191c19;
  --borda: #232723;
  --borda2: #2e332e;
  --texto: #f3f6f1;
  --suave: #8f978e;
  --lima: #c6ff00;
  --lima-fundo: rgba(198, 255, 0, .12);
  --laranja: #ff8a3d;
  --roxo: #a970ff;
  --vermelho: #ff5d5d;
  --amarelo: #ffd23f;
  --raio: 20px;
  --fonte: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

html { background: var(--fundo); }
body { background: var(--fundo) !important; color: var(--texto) !important; font-family: var(--fonte) !important;
       -webkit-font-smoothing: antialiased; letter-spacing: -.01em; }
h1 { font-size: 26px !important; font-weight: 800 !important; letter-spacing: -.03em; line-height: 1.1; }
h2, h3 { letter-spacing: -.02em; }
a.voltar, header a, body > a:first-child { color: var(--suave) !important; font-weight: 500; }

/* ---------- botões comuns ---------- */
button { font-family: var(--fonte); }
button.principal, label.botao, #btnTreino, .painel button.salvar, nav button.ativo,
.ex .sub a.aoVivo, .cronoInline .btnCrono, .escolhaCardio button.atual, .altTroc .botoesTroc button.usar,
#painel .acoes a.principal, form.enviar button {
  background: var(--lima) !important; border-color: var(--lima) !important; color: #0a0c08 !important;
  font-weight: 800 !important;
}
button.perigo, #btnTreino.terminar { background: #2a1212 !important; border-color: var(--vermelho) !important;
  color: #ffb1b1 !important; }
.cronoInline .btnCrono.pausar { background: #2b2108 !important; border-color: var(--amarelo) !important;
  color: var(--amarelo) !important; }

/* ---------- ficha (treino.html) ---------- */
.ola { font-size: 28px !important; font-weight: 800 !important; letter-spacing: -.03em; line-height: 1.15; }
.cardFreq, .dia, .numeros div, .listaSessoes, .listaCargas, .grade button, #resumo, .regras {
  background: var(--cartao) !important; border: 1px solid var(--borda) !important; border-radius: var(--raio) !important;
}
.regras { border-style: dashed !important; color: #c8cfc6 !important; }
.dia.hoje, .cartaoDia.hoje { border-color: var(--lima) !important; box-shadow: 0 0 0 1px var(--lima-fundo); }
.dia h2 .selo, .cartaoDia .letra .selo, .ex .serie, #painel .musc, .altTroc .muscTroc, #historico,
.listaCargas .l b { color: var(--lima) !important; }
.cartaoDia .fotos { height: 120px !important; }
.cartaoDia .letra { font-size: 22px !important; letter-spacing: -.02em; }
.cartaoDia .abrir, .ex .nome::after, .altTroc .nomeTroc::after, #painel .real, .listaSubs .l b { color: var(--lima) !important; }
.semana .b { border-color: var(--borda2) !important; color: var(--suave) !important; }
.semana .b.planejado { border-color: #3c4a2a !important; }
.semana .b.hoje { border-color: var(--lima) !important; color: var(--lima) !important; }
.semana .b.fez { background: var(--lima) !important; border-color: var(--lima) !important; color: #0a0c08 !important; }
.grade button { min-height: 112px !important; font-weight: 700 !important; }
.grade button .ic { width: 52px; height: 52px; border-radius: 16px; background: var(--lima-fundo);
  display: flex; align-items: center; justify-content: center; font-size: 26px !important; }
.numeros b { font-size: 30px !important; font-weight: 800; letter-spacing: -.03em; }
.ex { border-top-color: var(--borda) !important; }
.ex img, .ex .icone, .alt img, .altTroc img { border-radius: 14px !important; background: var(--cartao2) !important; }
.ex .sub button, .ex .sub a, .altTroc .botoesTroc button, .escolhaCardio button, .ajusteCrono button,
#voltarDias, .btnSubs, #painel .acoes a, #painel .acoes button {
  background: var(--cartao2) !important; border-color: var(--borda2) !important; color: #d6dcd4 !important;
}
.ex .sub a.aoVivo { background: var(--lima) !important; border-color: var(--lima) !important; color: #0a0c08 !important; }
.ex .sub a.aoVivo.acompanhar { background: var(--cartao2) !important; border-color: var(--borda2) !important;
  color: #d6dcd4 !important; font-weight: 600 !important; }
.escolhaCardio button.atual, .altTroc .botoesTroc button.usar, #painel .acoes a.principal {
  background: var(--lima) !important; border-color: var(--lima) !important; color: #0a0c08 !important; }
.feitoBtn { background: var(--cartao2) !important; border-color: var(--borda2) !important; }
.feitoBtn.marcado { background: var(--lima) !important; border-color: var(--lima) !important; color: #0a0c08 !important; }
.pesos input, .minCrono input { background: var(--fundo) !important; border-color: var(--borda2) !important; }
#barra { background: rgba(7, 8, 7, .92) !important; border-top: 1px solid var(--borda) !important;
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  padding-bottom: calc(14px + env(safe-area-inset-bottom)) !important; }
#btnTreino { border-radius: 999px !important; min-height: 58px !important; }
#painel { background: var(--cartao) !important; border-top: 1px solid var(--borda2); }
#fundo { background: rgba(0, 0, 0, .72) !important; }

/* ---------- correção ao vivo ---------- */
#palco { border-radius: 24px !important; border: 1px solid var(--borda); }
#reps { font-size: 52px !important; font-weight: 900 !important; color: var(--lima); letter-spacing: -.04em; }
#reps small { color: #d6dcd4 !important; letter-spacing: 0; }
.sel button, .barra button { border-radius: 999px !important; background: var(--cartao2); border-color: var(--borda2); }
.sel button.ativo, .barra button.ativo { background: var(--lima-fundo) !important; border-color: var(--lima) !important;
  color: var(--lima) !important; }
.barra button.principal { background: var(--lima) !important; color: #0a0c08 !important; }
#maquinaAviso b, #ajuda b { color: var(--lima) !important; }
.estadoRobo { border-radius: 16px !important; background: var(--cartao) !important; border-color: var(--borda2) !important; }
.estadoRobo.verde { background: rgba(198, 255, 0, .1) !important; border-color: var(--lima) !important; color: var(--lima) !important; }
#ajuda { background: var(--cartao) !important; border-color: var(--borda) !important; border-radius: var(--raio) !important; }

/* ---------- foto do aparelho ---------- */
label.botao { border-radius: 999px !important; padding: 18px !important; }
#saida { background: var(--cartao) !important; border-color: var(--borda) !important; border-radius: var(--raio) !important; }
#previa { border-radius: var(--raio) !important; }

/* ---------- assistente ---------- */
nav button { background: var(--cartao) !important; border-color: var(--borda) !important; }
nav button.ativo { background: var(--lima) !important; color: #0a0c08 !important; }
.msg.eu { background: var(--lima) !important; color: #0a0c08; font-weight: 500; }
.msg.ele, .cartao, .sugestoes button { background: var(--cartao) !important; border-color: var(--borda) !important; }
.msg .ouvir { color: var(--lima) !important; border-color: var(--lima) !important; }
h1 .ponto.on { background: var(--lima) !important; box-shadow: 0 0 10px var(--lima) !important; }
.painel textarea, .painel input, form.enviar textarea { background: var(--cartao) !important; border-color: var(--borda2) !important; }
.chips span { background: var(--lima-fundo) !important; color: var(--lima) !important; }
.chave-ok, .aviso.ok { color: var(--lima) !important; }

/* ---------- barra de abas de baixo ---------- */
.abas { position: fixed; left: 12px; right: 12px; bottom: calc(10px + env(safe-area-inset-bottom)); z-index: 20;
  display: flex; justify-content: space-around; align-items: flex-end; padding: 8px 6px; border-radius: 24px;
  background: rgba(18, 20, 18, .92); border: 1px solid var(--borda);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); box-shadow: 0 10px 30px rgba(0,0,0,.5); }
.abas a { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 6px 0;
  color: var(--suave) !important; text-decoration: none; font-size: 11px !important; font-weight: 600; }
.abas a svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round; }
.abas a.atual { color: var(--lima) !important; }
.abas a.centro { margin-top: -26px; }
.abas a.centro .bola { width: 58px; height: 58px; border-radius: 50%; background: var(--lima);
  color: #0a0c08; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 22px rgba(198, 255, 0, .4); border: 4px solid var(--fundo); }
.abas a.centro svg { width: 26px; height: 26px; stroke-width: 2.4; }

/* =====================================================================
   FICHA v2 — telas no formato da referência (Workout / Progress / Library)
   ===================================================================== */
body { padding-bottom: 130px !important; }
body.comBarra { padding-bottom: 210px !important; }
#barra { bottom: calc(86px + env(safe-area-inset-bottom)) !important; left: 12px !important; right: 12px !important;
  border-radius: 22px; border: 1px solid var(--borda) !important; padding: 10px 10px 10px 16px !important; }
#btnTreino { min-height: 50px !important; }

.topoTela { display: flex; align-items: center; justify-content: space-between; margin: calc(4px + env(safe-area-inset-top)) 0 16px; }
.topoTela h1 { font-size: 19px !important; margin: 0 !important; }
.circ { width: 42px; height: 42px; border-radius: 50%; background: var(--cartao); border: 1px solid var(--borda);
  color: var(--texto); font-size: 18px; font-weight: 700; display: flex !important; align-items: center; justify-content: center;
  text-decoration: none; padding: 0 !important; margin: 0 !important; }
.circ.fantasma { visibility: hidden; }

.segmento { display: flex; gap: 4px; padding: 4px; background: var(--cartao); border: 1px solid var(--borda);
  border-radius: 999px; margin-bottom: 16px; }
.segmento button { flex: 1; border: 0; background: none; color: var(--suave); font-weight: 700; font-size: 14px;
  padding: 10px; border-radius: 999px; }
.segmento button.ativo { background: var(--lima); color: #0a0c08; }

/* cartões dos treinos: foto de fundo com degradê, como os cards da referência */
.cartaoDia { position: relative; min-height: 168px; background-color: var(--cartao) !important;
  border: 1px solid var(--borda) !important; border-radius: 24px !important; overflow: hidden; padding: 0 !important; background-size: cover !important;
  background-position: center !important; margin-bottom: 14px !important; }
.cartaoDia::before { content: ''; position: absolute; inset: 0;
  background: linear-gradient(95deg, rgba(7,8,7,.96) 0%, rgba(7,8,7,.82) 50%, rgba(7,8,7,.25) 100%); }
.cartaoDia .corpo { position: relative; padding: 16px 18px !important; display: flex; flex-direction: column; min-height: 168px; }
.cartaoDia .letra { font-size: 26px !important; font-weight: 900 !important; margin-top: 10px; }
.cartaoDia .tema { color: #c8cfc6 !important; font-size: 14px !important; max-width: 75%; }
.cartaoDia .conta { margin-top: auto !important; padding-top: 12px; display: flex; gap: 14px; align-items: center;
  color: var(--texto) !important; font-weight: 700; font-size: 13px !important; }
.cartaoDia .conta .abrir { margin-left: auto; float: none !important; width: 34px; height: 34px; border-radius: 50%;
  background: var(--lima); color: #0a0c08 !important; display: flex; align-items: center; justify-content: center; font-size: 20px !important; }
.selos { display: flex; gap: 6px; flex-wrap: wrap; }
.selo { font-size: 11px !important; font-weight: 800 !important; letter-spacing: .03em; color: var(--lima) !important;
  background: var(--lima-fundo); border: 1px solid rgba(198,255,0,.35); padding: 4px 9px; border-radius: 999px; margin: 0 !important; }
.selo.cinza { color: #d6dcd4 !important; background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.14); }
.selo.vivo { color: #0a0c08 !important; background: var(--lima); }

/* dia aberto: nada de cartão dentro de cartão */
.dia { background: none !important; border: 0 !important; padding: 0 !important; box-shadow: none !important; }
.heroDia { position: relative; border-radius: 24px; overflow: hidden; min-height: 200px; padding: 18px;
  background: var(--cartao) center/cover no-repeat; border: 1px solid var(--borda); display: flex; flex-direction: column; justify-content: flex-end; }
.heroDia::before { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(7,8,7,.1) 0%, rgba(7,8,7,.92) 100%); }
.heroDia > * { position: relative; }
.heroDia .selos { position: absolute; top: 16px; left: 18px; }
.heroDia h2 { font-size: 28px !important; font-weight: 900; margin: 0 0 2px !important; letter-spacing: -.03em; }
.heroDia p { margin: 0; color: #c8cfc6; font-size: 14px; }
.statsDia { display: grid; grid-template-columns: repeat(3, 1fr); background: var(--cartao); border: 1px solid var(--borda);
  border-radius: 20px; margin: 12px 0; padding: 14px 0; }
.statsDia div { text-align: center; border-left: 1px solid var(--borda); }
.statsDia div:first-child { border-left: 0; }
.statsDia b { display: block; font-size: 22px; font-weight: 900; letter-spacing: -.03em; }
.statsDia span { color: var(--suave); font-size: 12px; font-weight: 600; }
/* boneco de músculos (desenho do MuscleMap, licença MIT) */
.boneco { display: block; width: 100%; height: auto; }
.boneco path { fill: #262b25; stroke: #0b0d0a; stroke-width: 3; transition: fill .3s; }
.boneco path.s { fill: rgba(198,255,0,.38); }
.boneco path.p { fill: var(--lima); }
.musculosDia { background: var(--cartao); border: 1px solid var(--borda); border-radius: 20px;
  padding: 16px 16px 14px; margin: 0 0 12px; }
.musculosDia .boneco, .bonecoPainel .boneco { max-width: 340px; margin: 0 auto 14px; }
.musculosDia h4, .bonecoPainel h4 { margin: 0 0 8px; font-size: 13px; font-weight: 800; color: var(--suave);
  text-transform: uppercase; letter-spacing: .06em; }
.chipsMusc { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.chipsMusc:last-child { margin-bottom: 0; }
.chipsMusc span { font-size: 12.5px; font-weight: 700; padding: 5px 10px; border-radius: 999px;
  background: var(--lima); color: #0a0c08; }
.chipsMusc.ajuda span { background: rgba(198,255,0,.14); color: var(--lima); border: 1px solid rgba(198,255,0,.3); }
/* vídeo de como faz dentro do app (Shorts 9:16, igual ao site Sou Personal) */
.videoEx { background: #0f130e; border: 1px solid var(--borda); border-radius: 16px; padding: 14px; margin-bottom: 14px; }
.videoEx h4 { margin: 0 0 10px; font-size: 13px; font-weight: 800; color: var(--suave); text-transform: uppercase; letter-spacing: .06em; }
.quadroVideo { position: relative; aspect-ratio: 9 / 16; max-width: 300px; margin: 0 auto; border-radius: 16px; overflow: hidden; background: #000; }
.quadroVideo button { position: absolute; inset: 0; border: 0; padding: 0; background: #000; cursor: pointer; }
#painel .quadroVideo img { width: 100%; height: 100%; object-fit: cover; opacity: .85; margin: 0; border-radius: 0; }
.quadroVideo .play { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 64px; height: 64px;
  border-radius: 50%; background: var(--lima); color: #0a0c08; display: flex; align-items: center; justify-content: center;
  font-size: 26px; padding-left: 4px; box-shadow: 0 8px 30px rgba(0,0,0,.5); }
.quadroVideo .rotulo { position: absolute; bottom: 12px; left: 0; right: 0; text-align: center; color: #fff; font-weight: 700; }
.quadroVideo iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
/* postura certa × errada (fotos do Sou Personal) */
.postura { background: #0f130e; border: 1px solid var(--borda); border-radius: 16px; padding: 14px; margin-bottom: 14px; }
.postura h4 { margin: 0 0 10px; font-size: 13px; font-weight: 800; color: var(--suave); text-transform: uppercase; letter-spacing: .06em; }
#painel .postura img { margin-bottom: 12px; border-radius: 12px; }
.postura ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.postura li { display: grid; grid-template-columns: 22px 1fr; column-gap: 8px; font-size: 13.5px; line-height: 1.45; }
.postura li::before { grid-row: span 2; width: 20px; height: 20px; border-radius: 50%; display: flex; align-items: center;
  justify-content: center; font-size: 11px; font-weight: 900; margin-top: 1px; }
.postura li.errado::before { content: '✕'; background: rgba(255,77,77,.16); color: #ff6b6b; }
.postura li.certo::before { content: '✓'; background: var(--lima-fundo); color: var(--lima); }
.postura li b { font-weight: 800; }
.postura li.errado b { color: #ff8a8a; }
.postura li.certo b { color: var(--lima); }
.postura li span { color: var(--suave); }
.bonecoPainel { background: #0f130e; border: 1px solid var(--borda); border-radius: 16px;
  padding: 14px 14px 12px; margin-bottom: 14px; }
.comecarDia { width: 100%; min-height: 56px; border: 0; border-radius: 999px; background: var(--lima); color: #0a0c08;
  font-size: 16px; font-weight: 900; display: flex; align-items: center; justify-content: center; gap: 10px; }
.comecarDia i { font-style: normal; width: 26px; height: 26px; border-radius: 50%; background: #0a0c08; color: var(--lima);
  display: flex; align-items: center; justify-content: center; font-size: 11px; }
.andamento { text-align: center; padding: 14px; border-radius: 999px; background: var(--lima-fundo); color: var(--lima);
  font-weight: 800; font-size: 14px; border: 1px solid rgba(198,255,0,.35); }
.dia p.aulas { color: var(--suave) !important; font-size: 13px !important; margin: 12px 4px 0 !important; line-height: 1.5; }
.tituloLista { font-size: 18px; font-weight: 800; margin: 22px 2px 10px; letter-spacing: -.02em; }
.tituloLista span { color: var(--suave); font-weight: 600; }

/* linha do exercício */
.ex { display: block !important; background: var(--cartao); border: 1px solid var(--borda) !important; border-radius: 20px;
  padding: 10px !important; margin-bottom: 10px; }
.ex.feito { opacity: .6; }
.linhaEx { display: flex; align-items: center; gap: 12px; }
.linhaEx > img, .linhaEx > .icone { width: 60px !important; height: 60px !important; flex: 0 0 60px !important;
  border-radius: 14px !important; margin: 0 !important; align-self: center !important; object-fit: cover; }
.linhaEx .cab { flex: 1; min-width: 0; }
.ex .nome { font-size: 15px !important; font-weight: 700 !important; line-height: 1.25; }
.ex .nome::after { content: '' !important; }
.ex .serie { color: var(--suave) !important; font-size: 13px !important; margin-top: 2px; }
.feitoBtn { flex: 0 0 44px !important; width: 44px !important; height: 44px !important; font-size: 18px !important; border-width: 2px !important; }
.ex > .txt { padding: 0 2px; }
.ex .pesos { margin-top: 10px !important; gap: 8px !important; }
.ex .pesos label { flex: 1; background: var(--fundo); border: 1px solid var(--borda); border-radius: 12px; padding: 4px 4px 4px 10px;
  justify-content: space-between; }
.ex .pesos input { border: 0 !important; background: none !important; width: 60px !important; padding: 6px !important; font-weight: 800; }
.ex .ultima { color: var(--amarelo) !important; font-size: 12px !important; margin-top: 6px !important; }
.ex .apoio { color: var(--suave) !important; font-size: 12.5px !important; margin-top: 6px !important; line-height: 1.45; }
.acoesEx { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px !important; }
.acoesEx a, .acoesEx button { font-size: 12.5px !important; padding: 8px 12px !important; border-radius: 999px !important; font-weight: 700 !important; }
.acoesEx button.trocar { border-style: solid !important; width: auto !important; text-align: center; }
.escolhaCardio { margin-top: 10px !important; }
.cronoInline { background: var(--fundo); border: 1px solid var(--borda); border-radius: 16px; padding: 10px; margin-top: 10px !important; }
.cronoInline .tempoCrono { color: var(--lima) !important; font-size: 26px !important; }
.subsBox { border-top: 0 !important; padding-top: 4px !important; }
.btnSubs { border-radius: 999px !important; border-style: dashed !important; }
.versaoApp { color: #4d544c !important; }

/* biblioteca de aparelhos */
.busca { display: flex; align-items: center; gap: 10px; background: var(--cartao); border: 1px solid var(--borda);
  border-radius: 16px; padding: 0 14px; margin-bottom: 12px; }
.busca svg { width: 18px; height: 18px; stroke: var(--suave); fill: none; stroke-width: 2.2; stroke-linecap: round; flex: none; }
.busca input { flex: 1; border: 0; background: none; color: var(--texto); font: inherit; font-size: 16px; padding: 13px 0; outline: none; }
.chips { display: flex; gap: 8px; overflow-x: auto; margin: 0 -16px 14px; padding: 0 16px; scrollbar-width: none; }
.chips::-webkit-scrollbar { display: none; }
.chips button { flex: none; border: 1px solid var(--borda); background: var(--cartao); color: #d6dcd4; border-radius: 999px;
  padding: 8px 14px; font-size: 13px; font-weight: 700; }
.chips button.ativo { background: var(--lima); color: #0a0c08; border-color: var(--lima); }
.linhaAp { width: 100%; display: flex; align-items: center; gap: 12px; text-align: left; background: var(--cartao);
  border: 1px solid var(--borda); border-radius: 18px; padding: 8px 12px 8px 8px; margin-bottom: 8px; color: var(--texto); }
.linhaAp img, .linhaAp .icone { width: 54px; height: 54px; border-radius: 12px; object-fit: cover; flex: none;
  background: var(--cartao2); display: flex; align-items: center; justify-content: center; font-size: 22px; }
.linhaAp .t { flex: 1; min-width: 0; }
.linhaAp b { display: block; font-size: 14.5px; font-weight: 700; }
.linhaAp small { color: var(--suave); font-size: 12px; }
.linhaAp .seta { color: var(--lima); font-size: 22px; font-weight: 800; }

/* progresso */
.periodo { display: flex; justify-content: space-between; align-items: center; background: var(--cartao); border: 1px solid var(--borda);
  border-radius: 14px; padding: 12px 14px; font-weight: 700; font-size: 14px; margin-bottom: 12px; }
.periodo::after { content: '⌄'; color: var(--suave); }
.cartaoG { background: var(--cartao); border: 1px solid var(--borda); border-radius: 22px; padding: 16px; margin-bottom: 12px; }
.cabG { display: flex; justify-content: space-between; font-size: 13.5px; font-weight: 700; color: #d6dcd4; }
.cabG small { color: var(--suave); font-weight: 600; }
.numG { font-size: 30px; font-weight: 900; letter-spacing: -.04em; margin: 4px 0 10px; }
.numG small { font-size: 14px; color: var(--suave); font-weight: 600; letter-spacing: 0; }
.numG.pequeno { font-size: 20px; }
.grafBarras { display: flex; align-items: flex-end; gap: 8px; height: 150px; padding-top: 22px; }
.grafBarras .col { flex: 1; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; position: relative; }
.grafBarras .barraG { width: 100%; max-width: 22px; border-radius: 8px; background: #2a2f2a; }
.grafBarras .col.cheia .barraG { background: var(--lima); }
.grafBarras .col.hoje .diaG { color: var(--lima); }
.grafBarras .diaG { font-size: 11px; color: var(--suave); font-weight: 700; margin-top: 8px; }
.grafBarras .topo { position: absolute; top: 0; background: var(--lima); color: #0a0c08; font-size: 11px; font-weight: 900;
  border-radius: 6px; padding: 2px 6px; }
.duplaG { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.duplaG .cartaoG { margin-bottom: 12px; padding: 14px; }
.duplaG .numG { font-size: 24px; }
.linhaG { width: 100%; height: 56px; display: block; overflow: visible; }
.legG { color: var(--suave); font-size: 11.5px; margin-top: 6px; }
.metaG { display: flex; align-items: center; gap: 14px; }
.metaG > div:first-child { flex: 1; }
.trilho { height: 8px; border-radius: 99px; background: #2a2f2a; overflow: hidden; margin: 6px 0 2px; }
.trilho div { height: 100%; background: var(--lima); border-radius: 99px; }
.anelP { width: 70px; height: 70px; border-radius: 50%; flex: none; display: flex; align-items: center; justify-content: center;
  background: conic-gradient(var(--amarelo) calc(var(--p) * 1%), #2a2f2a 0); position: relative; }
.anelP::before { content: ''; position: absolute; inset: 7px; border-radius: 50%; background: var(--cartao); }
.anelP span { position: relative; font-weight: 900; font-size: 16px; }
.secG { font-size: 18px; font-weight: 800; margin: 20px 2px 10px; }
.linhaP { display: flex; align-items: center; gap: 12px; background: var(--cartao); border: 1px solid var(--borda);
  border-radius: 16px; padding: 10px 12px; margin-bottom: 8px; }
.linhaP .ic { width: 38px; height: 38px; border-radius: 12px; background: var(--lima-fundo); color: var(--lima);
  display: flex; align-items: center; justify-content: center; font-weight: 900; flex: none; font-size: 13px; }
.linhaP .ic.kg { background: rgba(169,112,255,.14); color: var(--roxo); }
.linhaP .t { flex: 1; min-width: 0; }
.linhaP b { display: block; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.linhaP small { color: var(--suave); font-size: 12px; }
.linhaP .v { font-weight: 800; font-size: 14px; white-space: nowrap; }

/* ---------- área do notch / ilha do iPhone (o app nativo desenha a página na tela toda) ---------- */
#telaInicio { padding-top: env(safe-area-inset-top); }
header.topoTela { padding: 0 16px; margin-top: calc(10px + env(safe-area-inset-top)) !important; }
header.topoTela h1 { font-size: 19px !important; }
.circ { width: 44px !important; height: 44px !important; flex: none; }
body:has(#palco) { padding-bottom: calc(28px + env(safe-area-inset-bottom)) !important; }
/* assistente não tem barra de abas: a caixa de mensagem encosta no fim da tela */
body:has(#formEnviar) { padding-bottom: 0 !important; }
/* janela de baixo ("como faz", "aparelho ocupado") por cima da barra de abas, com folga embaixo */
#fundo { z-index: 40 !important; }
#painel { z-index: 41 !important; padding-bottom: calc(24px + env(safe-area-inset-bottom)) !important;
  max-height: calc(100vh - 60px - env(safe-area-inset-top)) !important; }