:root { --fundo: #f7f8fa; --texto: #1b2430; --suave: #5d6b7c; --linha: #dde3ea; --cor: #0f766e; --cor2: #ccfbf1; --card: #fff; }
@media (prefers-color-scheme: dark) { :root { --fundo: #11161c; --texto: #e6ebf0; --suave: #95a3b3; --linha: #2a333d; --cor: #2dd4bf; --cor2: #134e4a; --card: #1a2129; } }
* { box-sizing: border-box; }
body { margin: 0; font: 16px/1.55 system-ui, -apple-system, "Segoe UI", sans-serif; background: var(--fundo); color: var(--texto); }
a { color: var(--cor); }
main { max-width: 1100px; margin: 0 auto; padding: 16px; }
img { max-width: 100%; display: block; }
button, .botao { font: inherit; padding: 8px 14px; border: 1px solid var(--linha); background: var(--card); color: var(--texto); border-radius: 8px; cursor: pointer; }
button.on, button.principal, .opcoes button.on { background: var(--cor); color: #fff; border-color: var(--cor); }
button:disabled { opacity: .45; cursor: default; }
input, select { font: inherit; padding: 8px; border: 1px solid var(--linha); border-radius: 8px; background: var(--card); color: var(--texto); }
.topo { display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: center; padding: 12px 16px; background: var(--card); border-bottom: 1px solid var(--linha); }
.topo nav { display: flex; flex-wrap: wrap; gap: 4px 14px; }
.topo nav a, .marca { text-decoration: none; }
.marca { font-weight: 800; font-size: 1.15rem; color: var(--texto); }
.rodape { text-align: center; color: var(--suave); padding: 24px 16px; font-size: .9rem; }
.migalhas { font-size: .9rem; color: var(--suave); margin-bottom: 8px; }
.etiquetas { display: flex; flex-wrap: wrap; gap: 6px; }
.etiquetas span { background: var(--cor2); padding: 2px 10px; border-radius: 99px; font-size: .85rem; }
.grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 14px; }
.card { background: var(--card); border: 1px solid var(--linha); border-radius: 12px; overflow: hidden; text-decoration: none; color: var(--texto); display: flex; flex-direction: column; }
.card img { aspect-ratio: 3/4; object-fit: cover; background: #eef2f7; }
.card b { padding: 8px 10px 0; } .card small { padding: 0 10px 10px; color: var(--suave); }
.card.feito { outline: 2px solid var(--cor); }
.acoes { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0; }
.btn-fav.on { color: #b45309; }
.aviso { color: var(--suave); font-size: .92rem; }
.autor { color: var(--suave); }
/* exercício */
.midia-dupla { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.midia-dupla figure { margin: 0; } .midia-dupla img { aspect-ratio: 1; object-fit: cover; border-radius: 10px; background: #eef2f7; }
figcaption { text-align: center; color: var(--suave); font-size: .85rem; }
.passos li { margin-bottom: 6px; }
.musculos-ex { display: grid; gap: 6px; }
.variacao { margin: 6px 0; }
/* treino */
.poster { border-radius: 12px; margin: 12px 0; max-height: 80vh; width: auto; }
.blocos { list-style: none; padding: 0; display: grid; gap: 8px; }
.blocos li { display: flex; justify-content: space-between; align-items: center; background: var(--card); border: 1px solid var(--linha); border-radius: 10px; padding: 6px 12px; }
.blocos a { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--texto); }
img.mini { width: 54px; height: 54px; object-fit: cover; border-radius: 8px; background: #eef2f7; }
.infobox { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; background: var(--card); border: 1px solid var(--linha); border-radius: 12px; padding: 12px; }
.infobox b { display: block; color: var(--suave); font-size: .8rem; text-transform: uppercase; }
.ferramentas { display: flex; flex-wrap: wrap; gap: 10px; }
.cronometro details, .series details { background: var(--card); border: 1px solid var(--linha); border-radius: 10px; padding: 8px 12px; }
.tempos, .series details { display: flex; flex-wrap: wrap; gap: 6px; }
.visor { font-size: 2.4rem; font-variant-numeric: tabular-nums; text-align: center; }
.visor.fim { color: #dc2626; }
.video { aspect-ratio: 16/9; background: #000; border-radius: 12px; display: grid; place-items: center; margin: 12px 0; }
.video iframe { width: 100%; height: 100%; border: 0; border-radius: 12px; }
/* catálogo */
.catalogo { display: grid; grid-template-columns: 240px 1fr; gap: 18px; }
.filtros fieldset { border: 0; padding: 0; margin: 0 0 12px; } .filtros legend { font-weight: 700; }
.filtros label { display: block; } .filtros small { color: var(--suave); }
.filtros > button, .filtros input[type=search] { width: 100%; margin-bottom: 8px; }
.paginas { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 14px; }
.biblioteca { display: grid; grid-template-columns: 300px 1fr; gap: 18px; }
.filtros-linha { display: flex; flex-wrap: wrap; gap: 8px; }
@media (max-width: 760px) { .catalogo, .biblioteca { grid-template-columns: 1fr; } }
/* mapa corporal */
.mapa-corpo { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; max-width: 420px; }
.mapa-corpo.pequeno { max-width: 200px; }
.mapa-corpo figure { margin: 0; }
.mapa-corpo .corpo { fill: #e3e8ee; }
.mapa-corpo .musculos > * { fill: #cfd7e1; stroke: #fff; stroke-width: 1.2; transition: fill .15s; }
.mapa-corpo .clicavel { cursor: pointer; } .mapa-corpo .clicavel:hover { fill: #99f6e4; }
.mapa-corpo .sel { fill: var(--cor) !important; }
@media (prefers-color-scheme: dark) { .mapa-corpo .corpo { fill: #2a333d; } .mapa-corpo .musculos > * { fill: #3b4652; stroke: #11161c; } }
/* programas e desafios */
.dias { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.dias .dia { background: var(--card); border: 1px solid var(--linha); border-radius: 10px; padding: 10px; display: flex; flex-direction: column; gap: 6px; }
.dias .dia a { text-decoration: none; color: var(--texto); display: flex; flex-direction: column; gap: 6px; }
.dias .dia.ok { border-color: var(--cor); background: var(--cor2); }
.dias .dia.proximo { outline: 2px dashed var(--cor); }
.calendario { grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); }
.calendario .dia { align-items: center; text-align: center; }
.capa { border-radius: 12px; max-height: 360px; object-fit: cover; }
.foto { width: 160px; height: 160px; object-fit: cover; border-radius: 50%; }
/* gerador */
.passos-gerador { list-style: none; display: flex; gap: 6px; padding: 0; flex-wrap: wrap; }
.passos-gerador li { padding: 4px 10px; border-radius: 99px; background: var(--card); border: 1px solid var(--linha); font-size: .85rem; }
.passos-gerador li.on { background: var(--cor); color: #fff; } .passos-gerador li.ok { background: var(--cor2); }
.opcoes { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0; }
.nav-gerador { display: flex; gap: 8px; margin-top: 16px; }
.itens-gerados { padding: 0; list-style: none; display: grid; gap: 8px; }
.itens-gerados li { display: grid; grid-template-columns: 1fr auto auto; gap: 10px; align-items: center; background: var(--card); border: 1px solid var(--linha); border-radius: 10px; padding: 6px 10px; }
.itens-gerados a { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--texto); }
.itens-gerados img { width: 54px; height: 54px; object-fit: cover; border-radius: 8px; }
/* painel */
.numeros { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; }
.numeros div { background: var(--card); border: 1px solid var(--linha); border-radius: 12px; padding: 12px; text-align: center; color: var(--suave); }
.numeros b { display: block; font-size: 2rem; color: var(--texto); }
.calendario-30 { display: grid; grid-template-columns: repeat(15, 1fr); gap: 4px; max-width: 420px; }
.calendario-30 span { aspect-ratio: 1; border-radius: 4px; background: var(--linha); } .calendario-30 span.on { background: var(--cor); }
.lista-simples { padding-left: 18px; }
#extra { display: flex; flex-wrap: wrap; gap: 8px; }
.recorde { background: var(--card); border: 1px solid var(--linha); border-radius: 12px; padding: 12px; margin: 12px 0; }
.remover { font-size: .8rem; margin-top: 8px; }
/* início */
.destaques { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; }
.destaque a { display: flex; flex-direction: column; gap: 6px; text-decoration: none; color: var(--texto); background: var(--card); border: 1px solid var(--linha); border-radius: 14px; padding: 12px; }
.destaque img { aspect-ratio: 4/3; object-fit: cover; border-radius: 10px; background: #eef2f7; }
.atalhos { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; margin-top: 18px; }
.atalhos a { background: var(--card); border: 1px solid var(--linha); border-radius: 12px; padding: 14px; text-decoration: none; font-weight: 700; display: flex; flex-direction: column; }
.atalhos small { font-weight: 400; color: var(--suave); }
/* avisos e comemoração */
.toast { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); background: var(--texto); color: var(--fundo); padding: 10px 16px; border-radius: 10px; z-index: 20; }
.festa { position: fixed; inset: 0; pointer-events: none; z-index: 30; overflow: hidden; }
.festa span { position: absolute; top: -40px; font-size: 28px; animation: cair 2.2s ease-in forwards; }
@keyframes cair { to { transform: translateY(110vh) rotate(540deg); } }
@media (prefers-reduced-motion: reduce) { .festa span { animation-duration: .01s; } }