/* Projeto Shape — visual: preto + verde-limão neon do emblema "S" */
:root {
  --bg: #050605; --bg2: #0c0f0b; --card: #121611; --card2: #1a2017; --bd: #242b20;
  --tx: #f1f5ec; --mu: #95a08d; --neon: #b8f51e; --neon2: #8fd400; --neon-suave: rgba(184,245,30,.12);
  --aviso: #ffb648; --aviso-suave: rgba(255,182,72,.12); --erro: #ff6b5b; --erro-suave: rgba(255,107,91,.12);
  --raio: 18px; --sombra-neon: 0 0 24px rgba(184,245,30,.25);
  color-scheme: dark;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; background: var(--bg); color: var(--tx); font: 16px/1.45 Outfit, system-ui, sans-serif; -webkit-font-smoothing: antialiased; }
button { font: inherit; color: inherit; cursor: pointer; }
input { font: inherit; }
a { color: var(--neon); }
.app { max-width: 560px; margin: 0 auto; min-height: 100dvh; padding: 0 16px calc(96px + env(safe-area-inset-bottom)); position: relative; }
.app.sem-abas { padding-bottom: 32px; }

/* topo */
.topo { display: flex; align-items: center; gap: 10px; padding: 16px 0 10px; position: sticky; top: 0; background: linear-gradient(var(--bg) 70%, transparent); z-index: 5; }
.topo img { width: 34px; height: 34px; border-radius: 9px; }
.topo .marca { font-weight: 800; letter-spacing: .04em; font-size: 15px; }
.topo .marca b { color: var(--neon); }
.topo .direita { margin-left: auto; color: var(--mu); font-size: 14px; }
.voltar { background: none; border: 0; font-size: 28px; line-height: 1; padding: 0 6px 0 0; color: var(--tx); }

h1 { font-size: 28px; line-height: 1.15; margin: 8px 0 6px; letter-spacing: -.01em; }
h2 { font-size: 19px; margin: 22px 0 10px; }
h3 { font-size: 16px; margin: 0 0 4px; }
.sub { color: var(--mu); margin: 0 0 14px; }
.neon { color: var(--neon); }

/* botões */
.btn { display: block; width: 100%; border: 0; border-radius: 14px; padding: 15px 18px; font-weight: 700; font-size: 16px; text-align: center; text-decoration: none; }
.btn-neon { background: var(--neon); color: #0a0d05; box-shadow: var(--sombra-neon); }
.btn-neon:active { transform: scale(.99); }
.btn-neon:disabled { opacity: .35; box-shadow: none; }
.btn-linha { background: transparent; border: 1px solid var(--bd); color: var(--tx); }
.btn-perigo { background: transparent; border: 1px solid var(--erro); color: var(--erro); }
.btn + .btn { margin-top: 10px; }
.rodape-fixo { position: sticky; bottom: 0; padding: 14px 0 calc(14px + env(safe-area-inset-bottom)); background: linear-gradient(transparent, var(--bg) 30%); }

/* cartões */
.card { background: var(--card); border: 1px solid var(--bd); border-radius: var(--raio); padding: 16px; margin-bottom: 12px; }
.card.destaque { border-color: rgba(184,245,30,.45); background: linear-gradient(160deg, rgba(184,245,30,.10), var(--card) 55%); }
.linha { display: flex; align-items: center; gap: 12px; }
.chip { display: inline-block; padding: 3px 10px; border-radius: 99px; background: var(--card2); color: var(--mu); font-size: 12.5px; font-weight: 600; }
.chip.neon { background: var(--neon-suave); color: var(--neon); }
.chip.aviso { background: var(--aviso-suave); color: var(--aviso); }
.nota { background: var(--card2); border-radius: 12px; padding: 10px 12px; font-size: 14px; color: #cfd8c6; margin: 8px 0; }
.nota.aviso { background: var(--aviso-suave); color: var(--aviso); }
.nota.erro { background: var(--erro-suave); color: var(--erro); }
.grade2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.grade3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.kpi { background: var(--card); border: 1px solid var(--bd); border-radius: 14px; padding: 12px; }
.kpi small { color: var(--mu); font-size: 12px; display: block; }
.kpi b { font-size: 20px; font-variant-numeric: tabular-nums; }

/* boas-vindas */
.hero { text-align: center; padding: 6vh 0 10px; }
.hero img { width: min(58vw, 240px); mix-blend-mode: lighten; }
.hero h1 { font-size: 34px; margin-top: 10px; }
.lista-check { list-style: none; padding: 0; margin: 18px 0; display: grid; gap: 10px; text-align: left; }
.lista-check li { position: relative; padding-left: 24px; }
.lista-check li::before { content: '✓'; color: var(--neon); font-weight: 800; position: absolute; left: 0; }
.aviso-saude { font-size: 12.5px; color: var(--mu); text-align: center; margin: 14px 0 0; }

/* avaliação */
.progresso { height: 5px; background: var(--card2); border-radius: 99px; overflow: hidden; margin: 4px 0 18px; }
.progresso div { height: 100%; background: var(--neon); border-radius: 99px; transition: width .3s; box-shadow: var(--sombra-neon); }
.bloco-nome { color: var(--neon); font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.pergunta { font-size: 24px; font-weight: 700; line-height: 1.2; margin: 6px 0 6px; }
.opcoes { display: grid; gap: 10px; margin-top: 16px; }
.opcoes.cols { grid-template-columns: repeat(var(--cols, 2), 1fr); }
.opcao { display: flex; align-items: center; gap: 12px; background: var(--card); border: 1.5px solid var(--bd); border-radius: 14px; padding: 14px; text-align: left; min-height: 56px; }
.opcoes.cols .opcao { justify-content: center; text-align: center; font-weight: 700; font-size: 18px; }
.opcao .e { font-size: 22px; width: 28px; text-align: center; }
.opcao small { display: block; color: var(--mu); font-size: 13px; font-weight: 400; }
.opcao.sel { border-color: var(--neon); background: var(--neon-suave); box-shadow: inset 0 0 0 1px var(--neon); }
.campo { display: flex; align-items: center; gap: 10px; background: var(--card); border: 1.5px solid var(--bd); border-radius: 14px; padding: 6px 16px; margin-top: 18px; }
.campo:focus-within { border-color: var(--neon); }
.campo input { flex: 1; background: none; border: 0; color: var(--tx); font-size: 28px; font-weight: 700; padding: 10px 0; outline: none; min-width: 0; }
.campo span { color: var(--mu); font-weight: 600; }
.erro-campo { color: var(--erro); font-size: 14px; margin: 8px 0 0; min-height: 20px; }
.pular { background: none; border: 0; color: var(--mu); text-decoration: underline; margin: 10px auto 0; display: block; }

/* gerando */
.gerando { min-height: 80dvh; display: grid; place-items: center; text-align: center; }
.gerando img { width: 140px; animation: pulsar 1.2s ease-in-out infinite; mix-blend-mode: lighten; }
.gerando .num { font-size: 44px; font-weight: 800; color: var(--neon); font-variant-numeric: tabular-nums; }
@keyframes pulsar { 50% { transform: scale(1.06); } }

/* semana */
.dias { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; margin: 6px 0 16px; }
.dia { background: var(--card); border: 1px solid var(--bd); border-radius: 12px; padding: 8px 0; text-align: center; font-size: 12px; color: var(--mu); }
.dia b { display: block; font-size: 15px; color: var(--tx); margin-top: 2px; }
.dia.treino b { color: var(--neon); }
.dia.hoje { border-color: var(--neon); }
.sessao { display: flex; gap: 12px; align-items: center; width: 100%; background: var(--card); border: 1px solid var(--bd); border-radius: 16px; padding: 14px; text-align: left; margin-bottom: 10px; }
.sessao .ico { width: 46px; height: 46px; border-radius: 12px; background: var(--neon-suave); display: grid; place-items: center; font-size: 22px; flex: none; }
.sessao.descanso .ico { background: var(--card2); }
.sessao small { color: var(--mu); display: block; }
.sessao .seta { margin-left: auto; color: var(--mu); }

/* treino */
.bloco h3 { color: var(--neon); font-size: 13px; letter-spacing: .06em; text-transform: uppercase; margin: 18px 0 8px; }
.ex { background: var(--card); border: 1px solid var(--bd); border-radius: 16px; margin-bottom: 10px; overflow: hidden; }
.ex-cab { display: flex; gap: 12px; align-items: center; padding: 14px; width: 100%; background: none; border: 0; text-align: left; }
.ex-cab .marcar { width: 28px; height: 28px; border-radius: 50%; border: 2px solid var(--bd); flex: none; display: grid; place-items: center; font-weight: 800; color: #0a0d05; }
.ex.feito .marcar { background: var(--neon); border-color: var(--neon); }
.ex.feito .ex-nome { text-decoration: line-through; color: var(--mu); }
.ex-nome { font-weight: 600; }
.ex-cab small { color: var(--mu); display: block; font-size: 13px; }
.ex-corpo { padding: 0 14px 14px; display: none; }
.ex.aberto .ex-corpo { display: block; }
.video { position: relative; aspect-ratio: 16 / 9; border-radius: 12px; overflow: hidden; background: #000; margin-bottom: 10px; }
.video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video .capa { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; padding: 0; background: #000 center/cover no-repeat; display: grid; place-items: center; }
.video .capa span { width: 64px; height: 44px; border-radius: 12px; background: rgba(0,0,0,.7); color: #fff; display: grid; place-items: center; font-size: 20px; }
.sem-video { border-radius: 12px; background: var(--card2); padding: 14px; color: var(--mu); font-size: 14px; margin-bottom: 10px; }
.receita { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 10px; }
.receita div { background: var(--card2); border-radius: 10px; padding: 8px; font-size: 13px; }
.receita small { display: block; color: var(--mu); font-size: 11px; }
.cues { margin: 8px 0 0; padding-left: 18px; color: #cfd8c6; font-size: 14px; }

/* comida */
.refeicao .cab { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; }
.refeicao .cab small { color: var(--mu); }
.alimento { display: flex; gap: 10px; align-items: center; padding: 8px 0; border-top: 1px solid var(--bd); }
.alimento:first-of-type { border-top: 0; }
.alimento .e { font-size: 22px; width: 28px; text-align: center; }
.alimento .q { margin-left: auto; font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }
.trocas { font-size: 13px; color: var(--mu); padding: 0 0 6px 38px; }
.abas-mini { display: flex; gap: 6px; background: var(--card); padding: 4px; border-radius: 12px; margin-bottom: 12px; }
.abas-mini button { flex: 1; border: 0; background: none; padding: 9px; border-radius: 9px; color: var(--mu); font-weight: 600; }
.abas-mini button.ativo { background: var(--neon); color: #0a0d05; }
.compras li { display: flex; gap: 10px; padding: 9px 0; border-top: 1px solid var(--bd); align-items: center; }
.compras { list-style: none; padding: 0; margin: 0; }
.compras input { width: 20px; height: 20px; accent-color: var(--neon); }
.compras .q { margin-left: auto; color: var(--mu); font-size: 14px; text-align: right; }

/* check-in */
.copos { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.copo { width: 34px; height: 40px; border-radius: 6px 6px 10px 10px; border: 2px solid var(--bd); background: none; }
.copo.cheio { background: linear-gradient(transparent 20%, rgba(80,180,255,.55) 20%); border-color: rgba(80,180,255,.7); }
.feedback { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 10px; }
.feedback button { background: var(--card2); border: 1.5px solid var(--bd); border-radius: 12px; padding: 12px 6px; }
.feedback button.sel { border-color: var(--neon); color: var(--neon); }

/* abas */
.abas { position: fixed; left: 0; right: 0; bottom: 0; background: rgba(8,10,7,.92); backdrop-filter: blur(12px); border-top: 1px solid var(--bd); padding: 8px 8px calc(8px + env(safe-area-inset-bottom)); z-index: 10; }
.abas nav { max-width: 560px; margin: 0 auto; display: grid; grid-template-columns: repeat(5, 1fr); }

/* progresso */
.grafico { width: 100%; height: auto; display: block; }
.grafico text { fill: var(--mu); font-size: 10px; font-family: Outfit, sans-serif; }
.g-grade { stroke: var(--bd); stroke-width: 1; }
.g-ponto { fill: rgba(241,245,236,.45); }
.g-linha { fill: none; stroke: var(--neon); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; filter: drop-shadow(0 0 4px rgba(184,245,30,.5)); }
.g-meta { stroke: var(--aviso); stroke-width: 1.5; stroke-dasharray: 5 5; }
.grafico .g-meta-t { fill: var(--aviso); }
.legenda { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12px; color: var(--mu); margin-top: 6px; }
.legenda i { display: inline-block; vertical-align: middle; margin-right: 5px; }
.l-ponto { width: 6px; height: 6px; border-radius: 50%; background: rgba(241,245,236,.45); }
.l-linha { width: 14px; height: 3px; background: var(--neon); border-radius: 2px; }
.l-meta { width: 14px; border-top: 2px dashed var(--aviso); }
.grade2 > *, .grade3 > * { min-width: 0; }
.campo input { width: 100%; }
.campo.mini { margin-top: 0; padding: 2px 12px; }
.campo.mini input { font-size: 18px; padding: 8px 0; }
.tabela { width: 100%; border-collapse: collapse; font-size: 14px; }
.tabela th { text-align: left; color: var(--mu); font-weight: 600; font-size: 12px; padding: 6px 4px; }
.tabela td { padding: 7px 4px; border-top: 1px solid var(--bd); font-variant-numeric: tabular-nums; }
.fotos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.foto-slot { display: grid; gap: 4px; justify-items: center; cursor: pointer; }
.foto-img { width: 100%; aspect-ratio: 3 / 4; border-radius: 12px; border: 1.5px dashed var(--bd); background: var(--card2) center/cover no-repeat; display: grid; place-items: center; font-size: 26px; color: var(--mu); }
.foto-slot small { color: var(--mu); }
.foto-cmp { margin: 0; }
.foto-cmp img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 12px; display: block; }
.toast { position: fixed; left: 50%; bottom: calc(92px + env(safe-area-inset-bottom)); transform: translateX(-50%); background: var(--tx); color: var(--bg); padding: 11px 16px; border-radius: 12px; font-size: 14px; font-weight: 600; z-index: 50; max-width: calc(100vw - 32px); text-align: center; }
/* exames */
.mini-t { display: block; color: var(--mu); font-size: 12.5px; margin: 10px 0 4px; }
.sel, .txt { width: 100%; background: var(--card2); color: var(--tx); border: 1.5px solid var(--bd); border-radius: 12px; padding: 11px 12px; font: inherit; }
.txt { margin-top: 8px; }
.x { background: none; border: 0; color: var(--mu); font-size: 24px; padding: 0 4px; }
.arq { padding: 8px 0; border-top: 1px solid var(--bd); width: 100%; background: none; border-left: 0; border-right: 0; border-bottom: 0; text-align: left; }
.arq:first-child { border-top: 0; }
.arq-nome { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pdf { width: 100%; height: 70vh; border-radius: 10px; background: #fff; }
.g-banda { fill: rgba(184,245,30,.10); stroke: rgba(184,245,30,.35); stroke-dasharray: 4 4; }
.g-ponto-forte { fill: var(--neon); }
.l-banda { width: 14px; height: 10px; background: rgba(184,245,30,.18); border: 1px dashed rgba(184,245,30,.5); }
.tabela a { color: var(--tx); }
.foto-cmp figcaption { color: var(--mu); font-size: 12px; text-align: center; margin-top: 4px; }
.abas a { display: grid; justify-items: center; gap: 2px; color: var(--mu); text-decoration: none; font-size: 12px; font-weight: 600; padding: 4px 0; }
.abas a i { font-style: normal; font-size: 21px; line-height: 1; }
.abas a.ativo { color: var(--neon); }