:root {
  /* Paleta dos projetos wladmir.com (preto e azul) */
  --fundo: #0a0d13; --cartao: #151b28; --texto: #eef2f8; --suave: #93a0b4; --linha: rgba(255,255,255,.09);
  --prim: #2e8bf0; --prim-2: #5aa9ff; --prim-txt: #fff; --azul-escuro: #0b2c52; --laranja: #f59e0b; --verm: #ef4444;
  --p: #5aa9ff; --c: #f5b942; --g: #a78bfa;
  --boneco: #eef2f8; --boneco-longe: #4f5d75; --movel: #34405a; --anilha: #93a0b4; --img: #0e1420;
  --ok-bg: rgba(46,139,240,.14); --ok-tx: #8cc4ff; --al-bg: rgba(245,158,11,.13); --al-tx: #fbbf5a; --in-bg: rgba(147,160,180,.12); --in-tx: #c9d3e2;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body { background: radial-gradient(1200px 600px at 50% -10%, #16233c, var(--fundo)) fixed, var(--fundo); color: var(--texto); font: 15px/1.45 Inter, system-ui, sans-serif; padding-bottom: calc(76px + env(safe-area-inset-bottom)); }
button, input { font: inherit; color: inherit; }
h2, h3, h4 { margin: 0; line-height: 1.2; }

.topo { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 16px; padding-top: calc(10px + env(safe-area-inset-top)); background: rgba(10,13,19,.85); backdrop-filter: blur(10px); border-bottom: 1px solid var(--linha); }
.marca { display: flex; align-items: center; gap: 8px; font-weight: 800; letter-spacing: -.02em; }
.selo { font-size: 12px; font-weight: 600; color: var(--prim-2); text-align: right; }

main { max-width: 760px; margin: 0 auto; padding: 14px 16px 24px; display: flex; flex-direction: column; gap: 12px; }

.abas { position: fixed; bottom: 0; left: 0; right: 0; z-index: 5; display: grid; grid-template-columns: repeat(4, 1fr); background: var(--cartao); border-top: 1px solid var(--linha); padding-bottom: env(safe-area-inset-bottom); }
.abas button { background: none; border: 0; padding: 8px 0 10px; display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 12px; color: var(--suave); cursor: pointer; }
.abas .ic { font-size: 20px; filter: grayscale(1); opacity: .7; }
.abas button.ativa { color: var(--prim); font-weight: 700; }
.abas button.ativa .ic { filter: none; opacity: 1; }

.cartao { background: linear-gradient(160deg, var(--cartao), #10151f); border: 1px solid var(--linha); border-radius: 16px; padding: 14px; }
.bt { border: 0; border-radius: 12px; padding: 10px 14px; font-weight: 600; cursor: pointer; }
.bt.prim { background: linear-gradient(140deg, var(--azul-escuro), var(--prim)); color: var(--prim-txt); }
.bt.sec { background: color-mix(in srgb, var(--prim) 12%, transparent); color: var(--prim); }
.bt.perigo { background: color-mix(in srgb, var(--verm) 12%, transparent); color: var(--verm); }
.bt.largo { width: 100%; padding: 14px; font-size: 16px; }
.lnk { background: none; border: 0; color: var(--prim); font-weight: 600; cursor: pointer; padding: 6px 0; text-align: left; }
.x { background: none; border: 0; font-size: 22px; line-height: 1; color: var(--suave); cursor: pointer; padding: 4px 8px; }
.redondo { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--linha); background: var(--cartao); font-size: 22px; cursor: pointer; }
.redondo:disabled { opacity: .3; cursor: default; }
.dica { color: var(--suave); font-size: 13.5px; margin: 4px 0; }
.tit { margin-top: 4px; }

.dianav { display: flex; align-items: center; justify-content: space-between; text-align: center; }
.dia-rot { font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--suave); font-weight: 600; }
.dia-data { font-weight: 700; }
.dia-data::first-letter { text-transform: uppercase; }

.resumo .grande .num { font-size: 36px; font-weight: 800; letter-spacing: -.03em; }
.resumo .de { color: var(--suave); }
.resumo .sub { color: var(--suave); font-size: 13px; margin-bottom: 10px; }
.meta { margin-top: 8px; }
.meta-top { display: flex; justify-content: space-between; font-size: 13px; margin-bottom: 4px; }
.meta-top b { font-weight: 600; }
.meta-top b.passou { color: var(--laranja); }
.trilho { height: 8px; border-radius: 99px; background: color-mix(in srgb, var(--suave) 18%, transparent); overflow: hidden; }
.enche { height: 100%; border-radius: 99px; background: var(--prim-2); transition: width .4s; }
.meta.p .enche { background: var(--p); } .meta.c .enche { background: var(--c); } .meta.g .enche { background: var(--g); }
.enche.passou { background: var(--laranja) !important; }
.macros { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.macros .meta-top { flex-direction: column; }

.ref-top { display: flex; justify-content: space-between; align-items: baseline; }
.ref-top h3 { font-size: 16px; }
.kc { color: var(--suave); font-weight: 600; font-size: 13px; }
.itens { list-style: none; margin: 8px 0 0; padding: 0; }
.itens li { display: flex; align-items: center; gap: 8px; padding: 7px 0; border-top: 1px solid var(--linha); }
.itens li > div { flex: 1; min-width: 0; }
.it-nome { font-weight: 500; }
.it-sub { font-size: 12px; color: var(--suave); }
.it-kc { font-weight: 700; white-space: nowrap; }
.ref-botoes { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.ref-botoes .bt { flex: 1; }

dialog { border: 0; border-radius: 18px; padding: 16px; width: min(560px, calc(100vw - 24px)); max-height: 88vh; background: var(--cartao); color: var(--texto); }
dialog::backdrop { background: rgb(0 0 0 / .45); }
.dlg-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
input[type=search], input[type=number], input:not([type]) { width: 100%; padding: 11px 12px; border-radius: 12px; border: 1px solid var(--linha); background: var(--fundo); }
input:focus { outline: 2px solid var(--prim-2); outline-offset: 1px; }
.resultados { margin-top: 8px; display: flex; flex-direction: column; gap: 6px; }
.res { display: flex; justify-content: space-between; gap: 10px; text-align: left; border: 1px solid var(--linha); background: var(--fundo); border-radius: 12px; padding: 10px 12px; cursor: pointer; }
.res span { color: var(--suave); font-size: 13px; white-space: nowrap; }
.qtd { display: flex; flex-direction: column; gap: 10px; }
.qtd label, .form label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; font-weight: 600; color: var(--suave); }
.qtd small { font-weight: 400; }
.linha2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.linha3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.prev { font-weight: 700; color: var(--prim); }
.foto { width: 100%; max-height: 260px; object-fit: cover; border-radius: 12px; }
.carregando { color: var(--suave); animation: pisca 1.2s infinite; }
@keyframes pisca { 50% { opacity: .4; } }
.erro { color: var(--verm); }
.idf { display: grid; grid-template-columns: auto 1fr 70px auto auto; gap: 8px; align-items: center; padding: 6px 0; border-top: 1px solid var(--linha); }
.idf .gr { padding: 6px 8px; }

.cab-treino h2 { font-size: 26px; letter-spacing: -.02em; margin: 2px 0 8px; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { background: color-mix(in srgb, var(--prim) 12%, transparent); color: var(--prim); border-radius: 99px; padding: 4px 10px; font-size: 12.5px; font-weight: 600; }
.nota { border-radius: 12px; padding: 10px 12px; font-size: 14px; }
.nota.ok { background: var(--ok-bg); color: var(--ok-tx); }
.nota.alerta { background: var(--al-bg); color: var(--al-tx); }
.nota.info { background: var(--in-bg); color: var(--in-tx); }
.passo p { margin: 4px 0 0; color: var(--suave); }
.bloco h3 { font-size: 18px; margin-top: 6px; }
.bloco-info { color: var(--suave); margin: 4px 0 10px; font-size: 14px; }
.lista-exe { display: flex; flex-direction: column; gap: 10px; }
.lista-exe.grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.exe { display: grid; grid-template-columns: 150px 1fr; gap: 12px; background: var(--cartao); border: 1px solid var(--linha); border-radius: 16px; padding: 10px; }
.exe-img { background: var(--img); border-radius: 12px; display: flex; align-items: center; }
.exe-txt { position: relative; min-width: 0; }
.exe-num { position: absolute; right: 0; top: 0; width: 24px; height: 24px; border-radius: 50%; background: var(--prim); color: var(--prim-txt); font-size: 12px; font-weight: 700; display: grid; place-items: center; }
.exe h4 { font-size: 16px; padding-right: 28px; }
.exe-grupo { font-size: 12px; color: var(--suave); margin: 2px 0 8px; }
.dose { display: flex; flex-wrap: wrap; gap: 6px; }
.dose span { background: var(--fundo); border: 1px solid var(--linha); border-radius: 8px; padding: 3px 8px; font-size: 13px; }
.dose b { color: var(--prim); }
.obs { font-size: 13px; margin: 6px 0 0; color: var(--al-tx); }
details { margin-top: 8px; font-size: 13.5px; }
summary { cursor: pointer; color: var(--prim); font-weight: 600; }
details ul { margin: 6px 0 0; padding-left: 18px; color: var(--suave); }
@media (max-width: 480px) { .exe { grid-template-columns: 118px 1fr; gap: 10px; } .exe h4 { font-size: 15px; } }

.boneco { width: 100%; height: auto; display: block; }
.boneco line { stroke-linecap: round; }
.boneco .perto line { stroke: var(--boneco); stroke-width: 7; }
.boneco .perto line:first-child { stroke-width: 11; }
.boneco .longe line { stroke: var(--boneco-longe); stroke-width: 6.5; }
.boneco .cabeca { fill: var(--boneco); }
.boneco .chao { stroke: var(--linha); stroke-width: 3; }
.boneco .movel { fill: var(--movel); }
.boneco .perna-movel { stroke: var(--movel); stroke-width: 4; }
.boneco .anilha { fill: var(--anilha); }
.boneco .eixo { fill: var(--movel); }
.boneco .eixo-grosso { stroke: var(--anilha); stroke-width: 5; stroke-linecap: round; }
.boneco .colchonete { fill: rgba(46,139,240,.45); }

.form { display: flex; flex-direction: column; gap: 14px; }
fieldset { border: 0; padding: 0; margin: 0; }
legend { font-weight: 700; margin-bottom: 6px; padding: 0; }
.opcoes { display: flex; flex-direction: column; gap: 6px; }
.op { flex-direction: row !important; align-items: center; gap: 10px !important; border: 1px solid var(--linha); border-radius: 12px; padding: 10px 12px; cursor: pointer; color: var(--texto) !important; font-weight: 500 !important; font-size: 14px !important; }
.op:has(input:checked) { border-color: var(--prim); background: color-mix(in srgb, var(--prim) 9%, transparent); }
.op input { accent-color: var(--prim); }
.un { display: flex; align-items: center; gap: 6px; }
.un span { font-weight: 400; }
.tit-q { margin-top: 6px; padding-top: 12px; border-top: 1px solid var(--linha); }
.q legend { font-weight: 600; }
.resultado { text-align: center; }
.nivel-grande { font-size: 30px; font-weight: 800; letter-spacing: -.02em; }
.nivel-grande.iniciante { color: #4ade80; } .nivel-grande.intermediario { color: var(--c); } .nivel-grande.avancado { color: var(--verm); }
.tab-metas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 10px; }
.tab-metas div { background: var(--fundo); border-radius: 10px; padding: 8px; display: flex; flex-direction: column; }
.tab-metas small { color: var(--suave); font-size: 11.5px; }

.aviso { position: fixed; border: 1px solid var(--prim); left: 50%; transform: translateX(-50%); bottom: calc(84px + env(safe-area-inset-bottom)); z-index: 20; background: var(--cartao); color: var(--texto); padding: 10px 16px; border-radius: 12px; display: flex; gap: 12px; align-items: center; max-width: calc(100vw - 32px); box-shadow: 0 6px 20px rgb(0 0 0 / .25); }
.aviso .lnk { color: var(--prim-2); }
.rodape { font-size: 12px; color: var(--suave); text-align: center; }
.aviso[hidden] { display: none; }
.res.ia { border-color: var(--prim); background: color-mix(in srgb, var(--prim) 9%, transparent); }
.res.ia b { color: var(--prim); }
.idf .it-nome { min-width: 0; }
.idf .it-nome { display: flex; flex-direction: column; }
.comp { color: var(--suave); font-weight: 400; font-size: 12px; }
.ola { font-size: 22px; font-weight: 800; letter-spacing: -.02em; }
body.sem-conta .abas { display: none; }
.capa { text-align: center; padding: 18px 0 4px; }
.capa h1 { margin: 10px 0 6px; font-size: 26px; letter-spacing: -.02em; }
.capa p { color: var(--suave); margin: 0 auto; max-width: 420px; }
.conta { max-width: 460px; width: 100%; margin: 0 auto; }
.troca { text-align: center; color: var(--suave); margin: 0; }
.campo-nome input, .conta input { width: 100%; padding: 11px 12px; border-radius: 12px; border: 1px solid var(--linha); background: var(--fundo); }
.lnk.centro { display: block; margin: -4px auto 0; }
.linha-qtd { display: flex; align-items: center; gap: 8px; margin-top: 6px; flex-wrap: wrap; }
.qtd-ctl { display: inline-flex; align-items: center; border: 1px solid var(--linha); border-radius: 10px; overflow: hidden; background: var(--fundo); }
.qtd-ctl .qb { width: 32px; height: 32px; border: 0; background: transparent; color: var(--prim-2); font-size: 18px; font-weight: 700; cursor: pointer; }
.qtd-ctl .qtd-in { width: 52px; padding: 5px 2px; border: 0; border-radius: 0; text-align: center; background: transparent; font-weight: 700; -moz-appearance: textfield; }
.qtd-ctl .qtd-in::-webkit-inner-spin-button, .qtd-ctl .qtd-in::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.un-txt { font-size: 13px; color: var(--suave); }
.idf { grid-template-columns: auto 1fr auto !important; align-items: start !important; }
.idf-txt { display: flex; flex-direction: column; min-width: 0; }
.plano summary { cursor: pointer; list-style: none; }
.plano summary::-webkit-details-marker { display: none; }
.plano summary::after { content: ' ▾'; color: var(--prim-2); }
.plano[open] summary::after { content: ' ▴'; }
.plano-ref { list-style: none; padding: 0; margin: 8px 0 0; }
.plano-ref li { padding: 8px 0; border-top: 1px solid var(--linha); }
.plano-ref .it-sub { margin-top: 2px; }
.dica.centro { text-align: center; }
.boneco .cabo { stroke: var(--suave); stroke-width: 1.8; fill: none; }
.boneco .encosto { stroke: var(--movel); stroke-width: 7; stroke-linecap: round; }
.boneco .aro { fill: none; stroke: var(--movel); stroke-width: 3; }
.instalar-app details { padding: 12px 14px; }
.instalar-app summary { cursor: pointer; font-weight: 600; color: var(--prim-2); }
.instalar-app ol { margin: 8px 0 0; padding-left: 20px; color: var(--suave); }
.conta-senha input { width: 100%; padding: 11px 12px; border-radius: 12px; border: 1px solid var(--linha); background: var(--fundo); }
.conta-senha.destaque { border-color: var(--laranja); }
.admin-u { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 0; border-top: 1px solid var(--linha); }
.admin-u.pediu b { color: var(--al-tx); }
.selo-pedido { font-size: 12px; color: var(--al-tx); margin-top: 2px; }
.senha-prov { font-family: ui-monospace, Menlo, monospace; font-size: 18px; letter-spacing: .05em; }
a.bt { text-decoration: none; text-align: center; }
/* página do exercício (modelo MuscleWiki) */
.exe { cursor: pointer; }
.exe:hover { border-color: var(--prim); }
.ver-mais { display: inline-block; margin-top: 6px; font-size: 13px; font-weight: 600; color: var(--prim-2); }
.selos { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.selo-d { font-size: 11.5px; padding: 2px 8px; border-radius: 99px; background: var(--in-bg); color: var(--in-tx); }
.selo-d.iniciante { background: rgba(74,222,128,.13); color: #86efac; }
.selo-d.intermediario { background: var(--al-bg); color: var(--al-tx); }
.selo-d.avancado { background: rgba(239,68,68,.14); color: #fca5a5; }
.pag-exe { display: flex; flex-direction: column; gap: 12px; }
.fases { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.fases figure { margin: 0; background: var(--img); border-radius: 12px; overflow: hidden; }
.fases figcaption { text-align: center; font-size: 12px; font-weight: 700; color: var(--suave); padding: 4px 0 6px; text-transform: uppercase; letter-spacing: .06em; }
.anim-grande { background: var(--img); border-radius: 12px; max-width: 360px; width: 100%; margin: 0 auto; }
.passos { list-style: none; counter-reset: p; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.passos li { counter-increment: p; display: grid; grid-template-columns: 34px 1fr; gap: 10px; align-items: center; }
.passos li::before { content: counter(p); width: 34px; height: 34px; border-radius: 50%; background: linear-gradient(140deg, var(--azul-escuro), var(--prim)); color: #fff; font-weight: 800; display: grid; place-items: center; }
.fi-grade { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; align-items: start; }
@media (max-width: 560px) { .fi-grade { grid-template-columns: 1fr; } }
.mapa { width: 100%; max-width: 280px; display: block; margin: 0 auto; }
.mapa .corpo { fill: #1f2839; }
.mapa .musc { fill: #34405a; }
.mapa .musc.prim { fill: #ef4444; }
.mapa .musc.sec { fill: #f59e0b; }
.mapa-rot { fill: var(--suave); font-size: 10px; }
.legenda { display: flex; justify-content: center; gap: 14px; font-size: 12px; margin-top: 4px; }
.lg::before { content: ''; display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 5px; vertical-align: -1px; }
.lg.prim::before { background: #ef4444; } .lg.sec::before { background: #f59e0b; }
.fi-tab { display: flex; flex-direction: column; }
.fi-l { display: flex; justify-content: space-between; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--linha); font-size: 13.5px; }
.fi-l span { color: var(--suave); } .fi-l b { text-align: right; font-weight: 600; }
/* modo treino */
.modo-top { display: flex; justify-content: space-between; align-items: center; }
.prog-chips { display: flex; gap: 6px; overflow-x: auto; padding: 4px 0 6px; scrollbar-width: thin; }
.prog-chip { flex: 0 0 auto; border: 1px solid var(--linha); background: var(--cartao); color: var(--suave); border-radius: 99px; padding: 6px 12px; font-size: 13px; cursor: pointer; }
.prog-chip.atual, .prog-chip.ativo { border-color: var(--prim); color: var(--texto); background: color-mix(in srgb, var(--prim) 18%, transparent); font-weight: 700; }
.prog-chip.feito { color: var(--ok-tx); }
.modo-nome { font-size: 22px; margin: 2px 0 8px; }
.dose.grande span { font-size: 16px; padding: 6px 12px; }
.pag-exe { margin-top: 12px; }
.anim-grande { max-width: 260px; }
.anim-modo { background: var(--img); border-radius: 12px; max-width: 280px; margin: 10px auto; }
.mais-exe { margin-top: 12px; }
.mais-exe summary { font-weight: 600; }
.modo-nome + .dose + .anim-modo + .bt { margin-bottom: 8px; }
.acoes-adm { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.inst { border-top: 1px solid var(--linha); padding-top: 10px; margin-top: 10px; } .inst h4 { margin-bottom: 4px; } .inst ol { margin: 4px 0 0; padding-left: 20px; color: var(--suave); } .inst li { margin: 4px 0; }