/* LifeQuest — tema escuro, feito pro celular primeiro.
   Sem framework: o app inteiro cabe em tres arquivos e abre instantaneo. */

:root {
  /* ---- primitivas: um VALOR. Componente nenhum usa direto. ----
     Elas existem pra as semânticas apontarem pra cá. Trocar o roxo do app
     inteiro é mexer numa linha; era isso que faltava. */
  --p-roxo: #7c55ff;
  --p-roxo-fundo: #4b2fb8;
  --p-roxo-claro: #b49bff;
  --p-verde: #38e08d;
  --p-vermelho: #f0476b;
  --p-ambar: #ff9f45;
  --p-ouro: #fbc44f;
  --p-azul: #4cd3f2;

  --fundo: #0a0a12;
  --fundo-2: #12101f;
  --superficie: rgba(255, 255, 255, 0.045);
  --superficie-2: rgba(255, 255, 255, 0.075);
  --borda: rgba(255, 255, 255, 0.09);
  --borda-forte: rgba(255, 255, 255, 0.16);

  /* ---- semânticas: um TRABALHO. É o que os componentes usam. ----
     A regra é uma cor, um sentido. O roxo era ação, progresso E seleção ao
     mesmo tempo; o amarelo era "parcial", "lendária", "piorou" e "1º lugar" —
     quatro sentidos, sendo que dois se contradizem. Agora cada papel tem o seu. */
  --acao: var(--p-roxo);            /* clicável e selecionado. Só isso. */
  --acao-fundo: var(--p-roxo-fundo);
  --progresso: var(--p-azul);       /* ritmo e avanço — não é ação */
  --sucesso: var(--p-verde);
  --perigo: var(--p-vermelho);
  --atencao: var(--p-ambar);        /* meio do caminho: piorou */
  --destaque: var(--p-ouro);        /* conquista: lendária, 1º lugar, parcial */

  /* ---- a regra que o redesenho trouxe ----
     VERMELHO SÓ MARCA SILÊNCIO. Fugir do plano e registrar deixou de ser
     vermelho e virou azul: é progresso, vale 6 dos 10 pontos, e o app não tem
     nada a repreender. O vermelho ficou reservado pra refeição que ninguém
     contou — o único buraco de verdade no dia. O X deixa de ser veredito
     sobre você e passa a ser dado. */
  --contado: var(--p-azul);         /* você fugiu do plano — e contou */
  --silencio: var(--p-vermelho);    /* ninguém registrou. o único zero */

  --texto: #ecebff;
  --texto-fraco: #9d98bd;
  --texto-fraquissimo: #6b6788;

  /* concêntrico: raio de fora = raio de dentro + espaçamento (12 + 14 = 26).
     Cartão de 20 com botão de 12 dentro e 16 de padding era a origem daquele
     "tá torto" que não dá pra apontar. */
  --raio: 26px;
  --raio-p: 12px;
  --recheio: 14px;

  /* profundidade é sombra; borda fica só pra separar coisa (divisória) */
  --anel: 0 0 0 1px rgba(255, 255, 255, 0.08);
  --anel-forte: 0 0 0 1px rgba(255, 255, 255, 0.13);
  --sombra: 0 18px 40px rgba(0, 0, 0, 0.45);

  --transicao: 220ms cubic-bezier(0.2, 0, 0, 1);
  --rapido: 150ms cubic-bezier(0.2, 0, 0, 1);   /* toque, hover, seleção */
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

/* interface não é texto pra copiar: arrastar o dedo num botão pintava tudo de
   azul. O que é conteúdo de verdade (observação, frase de carta) segue selecionável */
button,
.aba,
.topo,
.dia-navega,
.cartao > header,
.anel,
.garrafas,
.pastilha,
.legenda-corpo,
.grade-ciclo,
.ciclo-topo,
.grafico-topo {
  user-select: none;
  -webkit-user-select: none;
}

/* o atributo hidden precisa ganhar de qualquer display que a classe defina —
   sem isso, .camera { display: flex } faz o botao aparecer mesmo escondido */
[hidden] { display: none !important; }

html, body {
  margin: 0;
  padding: 0;
  min-height: 100%;
  background: var(--fundo);
  color: var(--texto);
  /* no macOS o texto renderiza mais gordo do que o desenhado; uma vez na raiz */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-family: "Outfit", ui-sans-serif, system-ui, "Segoe UI", Roboto, sans-serif;
  font-size: 16px;
  line-height: 1.45;
  overscroll-behavior-y: none;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(70% 45% at 15% -5%, rgba(124, 92, 255, 0.28), transparent 70%),
    radial-gradient(55% 40% at 100% 0%, rgba(61, 220, 151, 0.12), transparent 65%),
    radial-gradient(90% 60% at 50% 110%, rgba(76, 201, 240, 0.10), transparent 70%),
    var(--fundo);
}

.app {
  max-width: 620px;
  margin: 0 auto;
  /* espaço pra barra de abas e pro botão da câmera, que flutuam por cima */
  padding: 18px 16px calc(160px + env(safe-area-inset-bottom));
}

/* ---------- abas no rodapé ---------- */

.abas {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 45;
  display: flex;
  gap: 2px;
  padding: 8px 6px calc(8px + env(safe-area-inset-bottom));
  background: rgba(14, 12, 24, 0.92);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-top: 1px solid var(--borda);
}
.aba {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 7px 2px 5px;
  border: none;
  border-radius: 14px;
  background: transparent;
  color: var(--texto-fraquissimo);
  font: inherit;
  font-size: 10.5px;
  font-weight: 600;
  cursor: pointer;
  transition: color var(--transicao), background var(--transicao);
}
.aba span {
  font-size: 19px;
  line-height: 1;
  filter: grayscale(1) opacity(0.55);
  transition: filter var(--transicao), transform var(--transicao);
}
.aba.ligada {
  color: var(--texto);
  background: rgba(124, 92, 255, 0.16);
}
.aba.ligada span { filter: none; transform: translateY(-1px); }

/* ---------- cabecalho ---------- */

.topo {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 18px;
}

.medalha {
  position: relative;
  width: 56px;
  height: 56px;
  flex: 0 0 56px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: conic-gradient(var(--acao) var(--anel, 0%), rgba(255, 255, 255, 0.08) 0);
  transition: background var(--transicao);
}
.medalha::after {
  content: "";
  position: absolute;
  inset: 4px;
  border-radius: 50%;
  background: linear-gradient(160deg, #221c3d, #14121f);
}
.medalha span {
  position: relative;
  z-index: 1;
  font-weight: 700;
  font-size: 20px;
  background: linear-gradient(160deg, #fff, var(--p-roxo-claro));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.titulo { flex: 1; min-width: 0; }
.titulo h1 {
  margin: 0;
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -0.4px;
}
.titulo p {
  margin: 2px 0 0;
  font-size: 12.5px;
  color: var(--texto-fraco);
  /* uma linha só: o cabeçalho não pode empurrar o conteúdo pra baixo */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.streak {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 13px;
  border-radius: 999px;
  background: var(--superficie);
  border: 1px solid var(--borda);
  font-weight: 700;
  font-size: 14px;
}
.streak.aceso {
  background: linear-gradient(135deg, rgba(255, 92, 122, 0.22), rgba(255, 200, 87, 0.18));
  border-color: rgba(255, 160, 87, 0.35);
}

/* ---------- cartoes ---------- */

.cartao {
  background: var(--superficie);
  /* o anel é sombra, não borda: acompanha o que estiver atrás e não some
     em cima de outra superfície */
  box-shadow: var(--anel);
  border-radius: var(--raio);
  padding: var(--recheio);
  /* 24 entre cartões contra 12 dentro deles: o dobro, que é o mínimo pra
     leitura entender "isto é outro assunto" sem precisar de linha */
  margin-bottom: 24px;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.cartao > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
}
.cartao h2 {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--texto-fraco);
}
.cartao .valor { font-size: 13px; color: var(--texto-fraco); font-variant-numeric: tabular-nums; }

/* ---------- progresso do dia ---------- */

.progresso { display: flex; align-items: center; gap: 18px; }

.anel { position: relative; width: 104px; height: 104px; flex: 0 0 104px; }
/* o svg acompanha o tamanho da caixa: se ele ficar menor que ela, o círculo
   desenhado sai do centro e o texto (que centraliza na caixa) fica descolado */
.anel svg {
  display: block;
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}
.anel circle { fill: none; stroke-width: 10; stroke-linecap: round; }
.anel .trilho { stroke: rgba(255, 255, 255, 0.07); }
.anel .barra {
  stroke: url(#gradAnel);
  transition: stroke-dashoffset 700ms cubic-bezier(0.2, 0.8, 0.3, 1);
}
.anel .centro {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  line-height: 1.15;
}
/* o número fica no centro exato do círculo; o rótulo pendura embaixo sem
   empurrar o conjunto pra cima */
.anel .centro b {
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -1px;
  line-height: 1;
}
.anel .centro small {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(50% + 11px);
  font-size: 9.5px;
  color: var(--texto-fraquissimo);
  letter-spacing: 1px;
}

.detalhes { flex: 1; display: flex; flex-wrap: wrap; gap: 7px; }
.pastilha {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 11px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--borda);
  font-size: 12.5px;
  color: var(--texto-fraco);
}
.pastilha.viva { color: var(--texto); border-color: rgba(124, 92, 255, 0.45); background: rgba(124, 92, 255, 0.14); }

/* ---------- refeicoes ---------- */

.refeicoes { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }

.refeicao {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 14px;
  border-radius: var(--raio-p);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--borda);
  cursor: pointer;
  text-align: left;
  color: inherit;
  font: inherit;
  transition: transform var(--transicao), border-color var(--transicao), background var(--transicao);
}
.refeicao:active { transform: scale(0.975); }
.refeicao .icone { font-size: 20px; }
.refeicao .nome { font-weight: 600; font-size: 14.5px; }
.refeicao .estado { font-size: 12px; color: var(--texto-fraquissimo); }

.refeicao[data-estado="ok"] { border-color: rgba(61, 220, 151, 0.42); background: rgba(61, 220, 151, 0.10); }
.refeicao[data-estado="ok"] .estado { color: var(--sucesso); }
/* fugiu do plano E CONTOU: azul, porque é progresso — não é o vermelho */
.refeicao[data-estado="x"] { border-color: rgba(76, 211, 242, 0.40); background: rgba(76, 211, 242, 0.09); }
.refeicao[data-estado="x"] .estado { color: var(--contado); }
.refeicao[data-estado="parcial"] { border-color: rgba(251, 196, 79, 0.42); background: rgba(251, 196, 79, 0.10); }
.refeicao[data-estado="parcial"] .estado { color: var(--destaque); }
/* pulou e contou: neutro. não comer não é deslize, e também não é silêncio */
.refeicao[data-estado="pulado"] { border-color: var(--borda-forte); }
.refeicao[data-estado="pulado"] .estado { color: var(--texto-fraco); }
.refeicao[data-agora="1"]::after {
  content: "agora";
  position: absolute;
  top: 10px;
  right: 10px;
  font-size: 9.5px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--p-roxo-claro);
  background: rgba(124, 92, 255, 0.18);
  border: 1px solid rgba(124, 92, 255, 0.35);
  padding: 2px 7px;
  border-radius: 999px;
}
.selo-pendente {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--atencao);
  box-shadow: 0 0 0 0 rgba(255, 200, 87, 0.6);
  animation: pulso 1.8s infinite;
}
@keyframes pulso {
  70% { box-shadow: 0 0 0 9px rgba(255, 200, 87, 0); }
  100% { box-shadow: 0 0 0 0 rgba(255, 200, 87, 0); }
}

/* ---------- agua ---------- */

.garrafas { display: flex; gap: 8px; margin-bottom: 12px; }
.garrafa {
  flex: 1;
  height: 46px;
  border-radius: var(--raio-p);
  border: 1px solid var(--borda);
  background: rgba(255, 255, 255, 0.035);
  display: grid;
  place-items: center;
  font-size: 19px;
  opacity: 0.35;
  transition: background var(--rapido), border-color var(--rapido),
    color var(--rapido), box-shadow var(--rapido);
}
.garrafa.cheia {
  opacity: 1;
  background: linear-gradient(180deg, rgba(76, 201, 240, 0.28), rgba(76, 201, 240, 0.10));
  border-color: rgba(76, 201, 240, 0.5);
}

/* ---------- botoes ---------- */

.linha { display: flex; gap: 8px; flex-wrap: wrap; }

.botao {
  flex: 1;
  min-width: 0;
  padding: 11px 14px;
  border-radius: var(--raio-p);
  border: 1px solid var(--borda);
  background: var(--superficie-2);
  color: var(--texto);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: transform var(--transicao), background var(--transicao), border-color var(--transicao);
}
.botao:active { transform: scale(0.96); }
.botao.ligado { background: rgba(124, 92, 255, 0.22); border-color: rgba(124, 92, 255, 0.55); }
.botao.verde.ligado { background: rgba(61, 220, 151, 0.2); border-color: rgba(61, 220, 151, 0.5); }
.botao.principal {
  background: linear-gradient(135deg, var(--acao), #5b3ee8);
  border-color: transparent;
  box-shadow: 0 10px 26px rgba(124, 92, 255, 0.35);
}
.botao.perigo.ligado { background: rgba(255, 92, 122, 0.2); border-color: rgba(255, 92, 122, 0.5); }
.botao.fantasma { background: transparent; }
.botao.pequeno { flex: 0 0 auto; padding: 8px 12px; font-size: 13px; }

/* ---------- treino ---------- */

.grupos { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 12px; }
.grupo {
  padding: 8px 13px;
  border-radius: 999px;
  border: 1px solid var(--borda);
  background: rgba(255, 255, 255, 0.04);
  color: var(--texto-fraco);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
  transition: background var(--rapido), border-color var(--rapido),
    color var(--rapido), box-shadow var(--rapido);
}
.grupo.ligado {
  color: var(--texto);
  background: rgba(124, 92, 255, 0.2);
  border-color: rgba(124, 92, 255, 0.5);
}

.campo {
  flex: 1;
  min-width: 90px;
  padding: 11px 13px;
  border-radius: var(--raio-p);
  border: 1px solid var(--borda);
  background: rgba(0, 0, 0, 0.25);
  color: var(--texto);
  font: inherit;
  /* 16px NAO e escolha estetica: abaixo disso o Safari do iPhone da zoom na
     pagina inteira quando o campo recebe o toque, e a tela sai do lugar */
  font-size: 16px;
}
.campo::placeholder { color: var(--texto-fraquissimo); }

/* ---------- botao da camera ---------- */

.camera {
  position: fixed;
  left: 50%;
  bottom: calc(86px + env(safe-area-inset-bottom));
  transform: translateX(-50%);
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 22px;
  border: none;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--acao), #5b3ee8);
  color: #fff;
  font: inherit;
  font-size: 15px;
  white-space: nowrap;   /* o rótulo nunca quebra em duas linhas */
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 14px 38px rgba(124, 92, 255, 0.45);
  transition: transform var(--transicao), box-shadow var(--transicao);
}
.camera:active { transform: translateX(-50%) scale(0.96); }
.camera:disabled { opacity: 0.6; }

/* ---------- modal ---------- */

.fundo-modal {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: grid;
  place-items: end center;
  background: rgba(5, 4, 12, 0.72);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  animation: aparecer 200ms ease;
}
@keyframes aparecer { from { opacity: 0; } }

.modal {
  width: 100%;
  max-width: 620px;
  max-height: 92vh;
  overflow-y: auto;
  padding: 20px 18px calc(22px + env(safe-area-inset-bottom));
  border-radius: 26px 26px 0 0;
  background: linear-gradient(180deg, #191528, #100e1a);
  border: 1px solid var(--borda-forte);
  border-bottom: none;
  animation: subir 280ms cubic-bezier(0.2, 0.9, 0.25, 1);
}
@keyframes subir { from { transform: translateY(40px); opacity: 0.4; } }

.modal h3 { margin: 0 0 4px; font-size: 20px; letter-spacing: -0.4px; }
.modal .sub { margin: 0 0 16px; color: var(--texto-fraco); font-size: 13.5px; }

.puxador {
  width: 42px;
  height: 4px;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.22);
  margin: 0 auto 16px;
}

.foto-previa {
  width: 100%;
  max-height: 240px;
  object-fit: cover;
  border-radius: 16px;
  border: 1px solid var(--borda);
  margin-bottom: 14px;
  background: rgba(0, 0, 0, 0.3);
}

.veredito {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px;
  border-radius: 16px;
  margin-bottom: 14px;
  border: 1px solid var(--borda);
}
.veredito .marca { font-size: 30px; line-height: 1; }
.veredito b { display: block; font-size: 16px; }
.veredito small { color: var(--texto-fraco); font-size: 13px; }
.veredito[data-v="ok"] { background: rgba(61, 220, 151, 0.12); border-color: rgba(61, 220, 151, 0.4); }
.veredito[data-v="x"] { background: rgba(255, 92, 122, 0.12); border-color: rgba(255, 92, 122, 0.4); }
.veredito[data-v="parcial"] { background: rgba(255, 200, 87, 0.12); border-color: rgba(255, 200, 87, 0.4); }

.aviso {
  padding: 10px 13px;
  border-radius: 12px;
  background: rgba(255, 200, 87, 0.12);
  border: 1px solid rgba(255, 200, 87, 0.32);
  color: var(--atencao);
  font-size: 13px;
  margin-bottom: 14px;
}

.rotulo {
  font-size: 11.5px;
  letter-spacing: 1.1px;
  text-transform: uppercase;
  color: var(--texto-fraquissimo);
  margin: 16px 0 8px;
}

/* ---------- carregando ---------- */

.carregando {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 22px 4px;
  color: var(--texto-fraco);
}
.girando {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2.5px solid rgba(255, 255, 255, 0.15);
  border-top-color: var(--acao);
  animation: girar 800ms linear infinite;
}
@keyframes girar { to { transform: rotate(360deg); } }

/* ---------- aviso flutuante ---------- */

.torrada {
  position: fixed;
  left: 50%;
  bottom: calc(158px + env(safe-area-inset-bottom));
  transform: translateX(-50%) translateY(14px);
  z-index: 60;
  padding: 12px 18px;
  border-radius: 999px;
  background: rgba(25, 21, 40, 0.96);
  border: 1px solid var(--borda-forte);
  box-shadow: var(--sombra);
  font-size: 14px;
  font-weight: 600;
  opacity: 0;
  pointer-events: none;
  /* entrada e saida: so o que de fato muda, e mais macio na saida */
  transition: opacity 260ms ease-out, transform 260ms ease-out;
}
.torrada.vendo { opacity: 1; transform: translateX(-50%) translateY(0); }
.torrada.erro { border-color: rgba(255, 92, 122, 0.5); color: #ffd7de; }
.torrada.bom { border-color: rgba(61, 220, 151, 0.5); color: #cdfbe6; }

/* ---------- pareamento ---------- */

.pareamento {
  max-width: 420px;
  margin: 14vh auto 0;
  padding: 26px 22px;
  text-align: center;
}
.pareamento .marca { font-size: 46px; margin-bottom: 8px; }
.pareamento h1 { margin: 0 0 6px; font-size: 26px; letter-spacing: -0.6px; }
.pareamento p { color: var(--texto-fraco); font-size: 14px; margin: 0 0 20px; }
.pareamento .campo { width: 100%; margin-bottom: 12px; text-align: center; }

/* ---------- confetes ---------- */

.confete {
  position: fixed;
  top: -12px;
  width: 9px;
  height: 14px;
  z-index: 70;
  pointer-events: none;
  animation: cair linear forwards;
}
@keyframes cair {
  to { transform: translateY(105vh) rotate(720deg); opacity: 0.15; }
}

@media (min-width: 560px) {
  .refeicoes { grid-template-columns: repeat(4, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* ---------- semana ---------- */

.frase {
  padding: 12px 14px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--borda);
  margin-bottom: 8px;
  font-size: 14.5px;
}
.frase.alerta { border-color: rgba(255, 92, 122, 0.4); background: rgba(255, 92, 122, 0.1); }
.frase.bom { border-color: rgba(61, 220, 151, 0.4); background: rgba(61, 220, 151, 0.1); }

.grupo.feito { color: var(--sucesso); border-color: rgba(61, 220, 151, 0.45); background: rgba(61, 220, 151, 0.12); }
.grupo.faltou { color: var(--perigo); border-color: rgba(255, 92, 122, 0.45); background: rgba(255, 92, 122, 0.12); }

.barra-meta {
  height: 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.07);
  overflow: hidden;
  margin: 10px 0 4px;
}
.barra-meta > i {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--progresso), var(--sucesso));
  transition: width 600ms cubic-bezier(0.2, 0.8, 0.3, 1);
}

/* ---------- editor dos ajustes ---------- */

.editor { display: flex; flex-direction: column; gap: 10px; }

.bloco {
  padding: 13px;
  border-radius: 14px;
  background: rgba(0, 0, 0, 0.22);
  border: 1px solid var(--borda);
}
.bloco.folga { opacity: 0.62; }
.bloco > .cabeca {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}
.bloco > .cabeca .dia {
  font-size: 11.5px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--texto-fraquissimo);
  min-width: 62px;
}

textarea.campo {
  width: 100%;
  min-height: 84px;
  resize: vertical;
  line-height: 1.5;
  font-size: 13.5px;
}

.dica {
  font-size: 12px;
  color: var(--texto-fraquissimo);
  margin: 6px 0 0;
}

.interruptor {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  color: var(--texto-fraco);
  cursor: pointer;
  user-select: none;
}
.interruptor input { accent-color: var(--acao); width: 17px; height: 17px; }

.salvar-fixo {
  position: sticky;
  bottom: calc(12px + env(safe-area-inset-bottom));
  z-index: 20;
  margin-top: 4px;
}

/* ---------- checklist do treino ---------- */

.bloco-letra {
  flex: 0 0 46px;
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--acao), #5b3ee8);
  font-size: 20px;
  font-weight: 700;
  color: #fff;
  box-shadow: 0 8px 20px rgba(124, 92, 255, 0.3);
}

.checklist { display: flex; flex-direction: column; gap: 6px; }

.checklist .item {
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  padding: 11px 13px;
  border-radius: var(--raio-p);
  border: 1px solid var(--borda);
  background: rgba(255, 255, 255, 0.035);
  color: var(--texto-fraco);
  font: inherit;
  font-size: 14px;
  text-align: left;
  cursor: pointer;
  transition: background var(--rapido), border-color var(--rapido),
    color var(--rapido), box-shadow var(--rapido);
}
.checklist .item:active { transform: scale(0.99); }
.checklist .item .caixa {
  flex: 0 0 22px;
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border-radius: 7px;
  border: 1.5px solid var(--borda-forte);
  font-size: 13px;
  font-weight: 700;
  color: transparent;
  transition: background var(--rapido), border-color var(--rapido),
    color var(--rapido), box-shadow var(--rapido);
}
.checklist .item .texto { flex: 1; min-width: 0; }
.checklist .item .musculo {
  font-size: 11px;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--texto-fraquissimo);
}
.checklist .item.marcado {
  color: var(--texto);
  background: rgba(61, 220, 151, 0.1);
  border-color: rgba(61, 220, 151, 0.4);
}
.checklist .item.marcado .caixa {
  background: var(--sucesso);
  border-color: var(--sucesso);
  color: #06281c;
}

/* ---------- editor de blocos (ajustes) ---------- */

.bloco-cabeca {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}
.bloco-cabeca .letra {
  flex: 0 0 34px;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: rgba(124, 92, 255, 0.2);
  border: 1px solid rgba(124, 92, 255, 0.45);
  font-weight: 700;
  font-size: 15px;
}

.exercicio-linha {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 11px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--borda);
  margin-bottom: 5px;
  font-size: 13.5px;
}
.exercicio-linha .nome { flex: 1; min-width: 0; }
.exercicio-linha .serie {
  font-variant-numeric: tabular-nums;
  color: var(--texto-fraco);
  font-size: 12.5px;
}
.exercicio-linha .tirar {
  border: none;
  background: transparent;
  color: var(--texto-fraquissimo);
  font: inherit;
  font-size: 17px;
  line-height: 1;
  cursor: pointer;
  padding: 0 2px;
}
.exercicio-linha .tirar:hover { color: var(--perigo); }

.grupo-titulo {
  margin: 14px 0 7px;
  font-size: 12px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--p-roxo-claro);
}

.botao.letra-bloco {
  position: relative;
  flex: 1;
  font-size: 16px;
  font-weight: 700;
  padding: 12px 0;
}
/* O ✓ era um selo absoluto no canto: com o raio de 12px a borda foge da
   quadrícula justo ali, e ele ficava metade pendurado pra fora. Agora ele é
   parte do conteúdo — fica ao lado da letra e não tem canto pra escapar.
   O fundo verde acompanha, porque cor sozinha nunca é o único recado. */
.botao.letra-bloco {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.botao.letra-bloco.feito-hoje {
  background: rgba(61, 220, 151, 0.1);
  border-color: rgba(61, 220, 151, 0.35);
}
.botao.letra-bloco.feito-hoje::after {
  content: "✓";
  font-size: 12px;
  line-height: 1;
  color: var(--sucesso);
}
/* escolhido ganha de feito: é o estado que diz o que a tela está mostrando */
.botao.letra-bloco.ligado {
  background: rgba(124, 92, 255, 0.22);
  border-color: rgba(124, 92, 255, 0.55);
}

/* ---------- ciclo de 66 dias ---------- */

.cartao.ciclo { padding: 13px 16px; }
.ciclo-topo {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}
.ciclo-titulo {
  font-size: 12px;
  letter-spacing: 1.1px;
  text-transform: uppercase;
  color: var(--texto-fraco);
}
.cartao.ciclo .barra-meta { margin: 9px 0 0; }
.cartao.ciclo .barra-meta > i {
  /* em oklab o meio do caminho nao acinzenta como no sRGB padrao */
  background: linear-gradient(90deg in oklab, var(--progresso), var(--sucesso));
}

/* ---------- quests ---------- */

.quest-xp {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--p-roxo-claro);
  font-variant-numeric: tabular-nums;
}
.checklist .item.completa { opacity: 0.72; }
.checklist .item.completa .texto { text-decoration: line-through; }
.quest-vezes {
  font-size: 11px;
  color: var(--texto-fraquissimo);
  letter-spacing: 0.4px;
}

/* ---------- carta ---------- */

.carta {
  position: relative;
  padding: 24px 20px;
  border-radius: 20px;
  text-align: center;
  overflow: hidden;
  border: 1px solid var(--borda-forte);
  background: linear-gradient(160deg, #241d40, #14121f);
  margin-bottom: 14px;
}
.carta::before {
  content: "";
  position: absolute;
  inset: -40% -10% auto;
  height: 70%;
  background: radial-gradient(closest-side, rgba(124, 92, 255, 0.5), transparent);
  pointer-events: none;
}
.carta .categoria {
  position: relative;
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--p-roxo-claro);
}
.carta .nome {
  position: relative;
  margin: 8px 0 10px;
  font-size: 25px;
  font-weight: 700;
  letter-spacing: -0.6px;
}
.carta .frase {
  position: relative;
  font-size: 15px;
  color: var(--texto-fraco);
  line-height: 1.5;
}
.carta .raridade {
  position: relative;
  display: inline-block;
  margin-top: 14px;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 11px;
  letter-spacing: 1px;
  text-transform: uppercase;
  border: 1px solid var(--borda-forte);
}
.carta[data-raridade="rara"] { border-color: rgba(76, 201, 240, 0.5); }
.carta[data-raridade="rara"] .raridade { color: var(--progresso); border-color: rgba(76, 201, 240, 0.5); }
.carta[data-raridade="lendaria"] { border-color: rgba(255, 200, 87, 0.6); }
.carta[data-raridade="lendaria"] .raridade { color: var(--atencao); border-color: rgba(255, 200, 87, 0.6); }
.carta[data-raridade="lendaria"]::before { background: radial-gradient(closest-side, rgba(255, 200, 87, 0.45), transparent); }

/* ---------- coleção ---------- */

.colecao {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
  gap: 8px;
}
.carta-mini {
  padding: 11px 9px;
  border-radius: 13px;
  border: 1px solid var(--borda);
  background: rgba(255, 255, 255, 0.04);
  text-align: center;
  cursor: pointer;
  font: inherit;
  color: inherit;
  transition: transform var(--transicao);
}
.carta-mini:active { transform: scale(0.96); }
.carta-mini .mini-nome { font-size: 12.5px; font-weight: 600; }
.carta-mini .mini-cat {
  font-size: 9.5px;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--texto-fraquissimo);
  margin-top: 3px;
}
.carta-mini.travada { opacity: 0.38; }
.carta-mini.travada .mini-nome { filter: blur(3px); }
.carta-mini[data-raridade="rara"] { border-color: rgba(76, 201, 240, 0.35); }
.carta-mini[data-raridade="lendaria"] { border-color: rgba(255, 200, 87, 0.4); }


/* ---------- navegação entre dias ---------- */

.dia-navega {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}
.dia-navega .seta {
  flex: 0 0 38px;
  height: 38px;
  border-radius: 12px;
  border: 1px solid var(--borda);
  background: var(--superficie);
  color: var(--texto-fraco);
  font: inherit;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  transition: background var(--rapido), border-color var(--rapido),
    color var(--rapido), box-shadow var(--rapido);
}
.dia-navega .seta:disabled { opacity: 0.3; cursor: default; }
.dia-navega .seta:not(:disabled):active { transform: scale(0.94); }
.dia-central { flex: 1; text-align: center; }
.dia-central b { display: block; font-size: 17px; letter-spacing: -0.3px; }
.dia-central span { font-size: 12px; color: var(--texto-fraquissimo); }

/* ---------- grade do ciclo ---------- */

.grade-ciclo {
  display: grid;
  grid-template-columns: repeat(22, 1fr);
  gap: 3px;
  margin-top: 10px;
}
.grade-ciclo i {
  aspect-ratio: 1;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.07);
  transition: background var(--transicao);
}
.grade-ciclo i[data-estado="cumprido"] {
  background: linear-gradient(160deg, var(--acao), var(--sucesso));
}
.grade-ciclo i[data-estado="perdido"] { background: rgba(255, 92, 122, 0.28); }
.grade-ciclo i[data-hoje="1"] {
  outline: 1.5px solid var(--texto);
  outline-offset: 1px;
}

/* ---------- atributos ---------- */

.atributo {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 9px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.atributo:last-child { border-bottom: none; }
.atributo .icone { font-size: 16px; width: 22px; text-align: center; }
.atributo .nome {
  flex: 1;
  min-width: 0;
  font-size: 12px;
  letter-spacing: 1.1px;
  text-transform: uppercase;
  color: var(--texto-fraco);
}
.atributo .ganho {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--sucesso);
  min-width: 34px;
  text-align: right;
}
.atributo .ganho.parado { color: var(--texto-fraquissimo); font-weight: 400; }
.atributo .valor-atributo {
  font-size: 21px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  min-width: 46px;
  text-align: right;
}

/* barra de XP em blocos: mais "jogo" que uma barra lisa */
.xp-blocos { display: flex; gap: 3px; margin-top: 8px; }
.xp-blocos i {
  flex: 1;
  height: 7px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.08);
}
.xp-blocos i.cheio { background: linear-gradient(90deg, var(--acao), var(--p-roxo-claro)); }

/* ---------- mapa do corpo ---------- */

.corpo {
  display: block;
  width: 100%;
  max-width: 340px;
  margin: 4px auto 0;
  overflow: visible;
}
.corpo .musculo-forma {
  cursor: pointer;
  transition: filter var(--transicao);
}
.corpo .musculo-forma:hover { filter: brightness(1.25); }
.corpo-rotulo {
  fill: var(--texto-fraquissimo);
  font-size: 9px;
  text-anchor: middle;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.legenda-corpo {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: 10px;
}
.item-legenda {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11.5px;
  color: var(--texto-fraco);
}
.item-legenda i {
  width: 9px;
  height: 9px;
  border-radius: 3px;
  display: inline-block;
}

/* ---------- gráficos ---------- */

.grafico-topo {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin: 16px 0 4px;
}
.grafico-titulo {
  font-size: 13px;
  font-weight: 600;
}
.grafico {
  display: block;
  width: 100%;
  height: 92px;
}
.rotulo-grafico {
  fill: var(--texto-fraquissimo);
  font-size: 5px;
  text-anchor: middle;
}

/* =================================================================
   DESKTOP — o app deixa de ser um celular esticado.

   Regras que mantêm tudo alinhado:
   - uma grade de 12 colunas, e cada cartão declara quantas ocupa;
   - `align-items: stretch`, pra cartões da mesma linha terminarem juntos;
   - largura máxima fixa e centralizada, pra não esticar até 2000px.
   ================================================================= */

@media (min-width: 1000px) {
  .app {
    max-width: none;
    margin: 0;
    padding: 30px 40px 48px calc(var(--menu) + 40px);
  }
  /* o conteúdo tem largura própria e fica centralizado no espaço que sobra */
  .topo,
  .dia-navega,
  #tela-hoje,
  #tela-treino,
  #tela-corpo,
  #tela-season,
  #tela-semana,
  #tela-ajustes {
    max-width: 1180px;
    margin-left: auto;
    margin-right: auto;
  }

  :root { --menu: 210px; }

  /* ---- menu lateral ---- */
  .abas {
    top: 0;
    bottom: 0;
    right: auto;
    width: var(--menu);
    flex-direction: column;
    justify-content: flex-start;
    gap: 4px;
    padding: 92px 14px 20px;
    border-top: none;
    border-right: 1px solid var(--borda);
    background: rgba(14, 12, 24, 0.75);
  }
  .abas::before {
    content: "LifeQuest";
    position: absolute;
    top: 32px;
    left: 22px;
    font-size: 17px;
    font-weight: 700;
    letter-spacing: -0.3px;
    color: var(--texto);
  }
  .aba {
    flex: 0 0 auto;
    flex-direction: row;
    justify-content: flex-start;
    gap: 12px;
    padding: 11px 14px;
    font-size: 14px;
    border-radius: 12px;
  }

  /* ---- cabeçalho ---- */
  .topo { margin-bottom: 16px; }
  .dia-navega {
    margin-bottom: 22px;
    max-width: 1180px;
  }
  .dia-central { text-align: left; }

  /* ---- a grade ---- */
  #tela-hoje,
  #tela-treino,
  #tela-corpo,
  #tela-season,
  #tela-semana,
  #tela-ajustes {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    align-items: stretch;   /* cartões da mesma linha terminam juntos */
    gap: 18px;
  }
  .cartao {
    margin-bottom: 0;
    display: flex;
    flex-direction: column;
  }
  /* o conteúdo cresce e empurra o rodapé do cartão pra baixo, então
     dois cartões vizinhos não ficam com alturas quebradas */
  .cartao > .progresso,
  .cartao > .refeicoes,
  .cartao > .checklist,
  .cartao > #treino-corpo { flex: 1; }

  #cartao-dia { grid-column: span 4; }
  #cartao-refeicoes { grid-column: span 8; }
  #cartao-quests { grid-column: span 8; }
  #cartao-agua { grid-column: span 4; }
  #cartao-treino { grid-column: span 12; }
  /* por id, nunca por ordem — cartão novo no meio já quebrou isto uma vez */
  #cartao-mapa { grid-column: span 12; }
  #cartao-graficos { grid-column: span 12; }
  #tela-semana > .cartao { grid-column: span 6; }
  #cartao-ciclo,
  #cartao-frases { grid-column: span 12; }
  #tela-ajustes > .cartao { grid-column: span 12; }

  /* ---- ajustes finos de conteúdo ---- */
  .refeicoes { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .refeicao { padding: 16px; }
  .progresso { gap: 22px; }
  .corpo { max-width: 270px; }
  .grafico { height: 104px; }
  .anel { width: 116px; height: 116px; flex: 0 0 116px; }

  /* ---- flutuantes ---- */
  .camera {
    left: auto;
    right: 44px;
    bottom: 36px;
    transform: none;
  }
  .camera:active { transform: scale(0.96); }
  .torrada { left: auto; right: 44px; bottom: 110px; transform: translateY(14px); }
  .torrada.vendo { transform: translateY(0); }

  .fundo-modal { place-items: center; }
  .modal {
    max-width: 580px;
    border-radius: 22px;
    border-bottom: 1px solid var(--borda-forte);
    animation: aparecer 200ms ease;
  }
  .salvar-fixo { position: static; }
}

/* telas muito largas: o conteúdo respira mais, mas não vira uma faixa infinita */
@media (min-width: 1500px) {
  .topo,
  .dia-navega,
  #tela-hoje,
  #tela-treino,
  #tela-corpo,
  #tela-season,
  #tela-semana,
  #tela-ajustes {
    max-width: 1320px;
  }
  #cartao-dia { grid-column: span 3; }
  #cartao-refeicoes { grid-column: span 9; }
  #cartao-quests { grid-column: span 7; }
  #cartao-agua { grid-column: span 5; }
}

/* ---------- mapa dos músculos ---------- */

.mapa-musculos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 9px;
  margin-top: 12px;
}

.bloco-musculo {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  padding: 13px 14px;
  border-radius: 14px;
  border: 1px solid var(--borda);
  background: rgba(255, 255, 255, 0.035);
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: transform var(--transicao), border-color var(--transicao), background var(--transicao);
}
.bloco-musculo:active { transform: scale(0.985); }
.bloco-musculo:hover { border-color: var(--cor-musculo); }
.bloco-musculo[data-faixa="esquecido"],
.bloco-musculo[data-faixa="nunca"] {
  background: rgba(255, 92, 122, 0.08);
  border-color: rgba(255, 92, 122, 0.3);
}
.bloco-musculo[data-faixa="em_dia"] {
  background: rgba(61, 220, 151, 0.07);
  border-color: rgba(61, 220, 151, 0.26);
}

/* Nome e estado estavam lado a lado. Num bloco de 153px isso deixa "Perna" a
   dez pixels de "nunca treinado" — o olho lê os dois como uma frase só
   ("Perna nunca treinado") em vez de rótulo e estado. Empilhado, a hierarquia
   fica óbvia e não depende de sobrar espaço. */
.topo-musculo {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
}
.nome-musculo { font-size: 14px; font-weight: 600; }
.dias-musculo {
  font-size: 11px;
  color: var(--cor-musculo);
  font-weight: 600;
}
.vezes-musculo { font-size: 11px; color: var(--texto-fraquissimo); }

.barra-musculo {
  height: 5px;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.07);
  overflow: hidden;
}
.barra-musculo > i {
  display: block;
  height: 100%;
  border-radius: 99px;
  transition: width 500ms cubic-bezier(0.2, 0.8, 0.3, 1);
}

/* os rótulos do gráfico ficam fora do svg: dentro dele o texto estica junto
   com as barras e vira borrão */
.caixa-grafico { margin-bottom: 4px; }
.rotulos-grafico {
  display: flex;
  margin-top: 5px;
}
.rotulos-grafico span {
  flex: 1;
  text-align: center;
  font-size: 10px;
  color: var(--texto-fraquissimo);
  letter-spacing: 0.3px;
}
.rotulos-grafico span.fim-de-semana { color: var(--p-roxo-claro); opacity: 0.75; }

/* ---------- onboarding ---------- */

.onboarding {
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: 24px 18px calc(24px + env(safe-area-inset-bottom));
}
.onboarding-caixa {
  width: 100%;
  max-width: 460px;
  padding: 26px 24px 24px;
  border-radius: 24px;
  background: var(--superficie);
  border: 1px solid var(--borda);
  backdrop-filter: blur(14px);
}

.passos-pontos { display: flex; gap: 5px; margin-bottom: 16px; }
.passos-pontos i {
  flex: 1;
  height: 3px;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.1);
  transition: background var(--transicao);
}
.passos-pontos i.feito { background: rgba(124, 92, 255, 0.5); }
.passos-pontos i.agora { background: var(--acao); }

.passo-conta {
  margin: 0;
  font-size: 11px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--texto-fraquissimo);
}
.passo-titulo { margin: 6px 0 4px; font-size: 25px; letter-spacing: -0.6px; }
.passo-sub { margin: 0 0 20px; color: var(--texto-fraco); font-size: 14.5px; }
.passo-conteudo { min-height: 190px; }
.passo-acoes { margin-top: 22px; }
.passo-acoes .botao { flex: 1; }
.passo-acoes .botao.fantasma { flex: 0 0 auto; padding-inline: 18px; }

.campo-rotulado { display: flex; flex-direction: column; gap: 6px; flex: 1; }
.campo-rotulado > span {
  font-size: 11.5px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--texto-fraquissimo);
}

.escolhas { display: flex; flex-direction: column; gap: 8px; }
.escolha {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding: 14px 16px;
  border-radius: 14px;
  border: 1px solid var(--borda);
  background: rgba(255, 255, 255, 0.035);
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background var(--rapido), border-color var(--rapido),
    color var(--rapido), box-shadow var(--rapido);
}
.escolha:active { transform: scale(0.99); }
.escolha.ligada {
  background: rgba(124, 92, 255, 0.16);
  border-color: rgba(124, 92, 255, 0.5);
}
.escolha-titulo { font-size: 15px; font-weight: 600; }
.escolha-detalhe { font-size: 12.5px; color: var(--texto-fraco); }

.contador-linha {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  padding: 8px 0 4px;
}
.contador-linha .contador {
  font-size: 42px;
  font-weight: 700;
  min-width: 60px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.contador-linha .botao { flex: 0 0 46px; font-size: 20px; padding: 10px 0; }







/* ---------- corpo anatômico ---------- */

.corpo-duplo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 14px 0 4px;
}
.corpo-vista { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.corpo {
  display: block;
  width: 100%;
  max-width: 190px;
  height: auto;
}
.corpo .musculo-forma {
  cursor: pointer;
  transition: filter 160ms ease;
}
.corpo .musculo-forma:hover { filter: brightness(1.35); }
.corpo-rotulo {
  font-size: 10px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--texto-fraquissimo);
}

/* o bloco do corpo anatômico foi escrito depois da media query de desktop,
   então a regra de tamanho precisa vir aqui no fim pra não ser sobrescrita */
@media (min-width: 1000px) {
  .corpo { max-width: 270px; }
  .corpo-duplo { gap: 16px; }
}

/* ---------- placar da season ----------
   Uma linha por pessoa: posição, quem, números. Sem avatar e sem cor de time —
   o que precisa saltar é o SEU nome no meio da lista, e mais nada. */
.placar-linha {
  display: grid;
  grid-template-columns: 30px 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 11px 12px;
  border-radius: var(--raio-p);
  border: 1px solid transparent;
}
.placar-linha + .placar-linha { margin-top: 4px; }
.placar-linha[data-eu] {
  background: var(--superficie);
  border-color: var(--borda-forte);
}
.placar-posicao {
  font-size: 15px;
  font-weight: 700;
  text-align: center;
  color: var(--texto-fraquissimo);
  font-variant-numeric: tabular-nums;
}
/* pódio sem medalha e sem emoji: só a cor diz quem está na frente */
.placar-posicao[data-podio="1"] { color: var(--atencao); }
.placar-posicao[data-podio="2"] { color: var(--texto); }
.placar-posicao[data-podio="3"] { color: var(--p-roxo-claro); }

.placar-quem { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.placar-nome {
  font-size: 14.5px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.placar-sub { font-size: 11.5px; color: var(--texto-fraquissimo); }

.placar-numeros { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.placar-pontos {
  font-size: 16px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.placar-streak { font-size: 11px; color: var(--sucesso); }
.placar-streak.parado { color: var(--texto-fraquissimo); }

/* escrito depois das media queries de desktop: repete aqui pra não perder
   a regra por especificidade igual — já me pegou uma vez neste arquivo */
@media (min-width: 1000px) {
  .placar-linha { grid-template-columns: 36px 1fr auto; padding: 13px 14px; }
  .placar-nome { font-size: 15.5px; }
  .placar-pontos { font-size: 18px; }
}

/* =================================================================
   PASSE DE ACABAMENTO — aplicando as skills de interface.
   Escrito no fim do arquivo de propósito: regra de mesma
   especificidade que nasce antes de uma media query perde pra ela.
   ================================================================= */

/* ---------- números que mudam não podem dançar ----------
   Dígito tem largura própria: 1 é fino, 8 é gordo. Todo valor que muda
   sozinho empurra o que está do lado a cada atualização. */
#nivel,
#anel-num,
#agua-valor,
#pontos-hoje,
.dias-musculo,
.heroi-numero b,
.contador {
  font-variant-numeric: tabular-nums;
}

/* ---------- deixar o texto quebrar direito ----------
   `balance` reparte o título entre as linhas; `pretty` impede uma palavra
   sozinha na última linha de um parágrafo. */
.cartao h2,
.passo-titulo,
.frase {
  text-wrap: balance;
}
.dica,
.passo-sub,
.placar-sub,
.escolha-detalhe {
  text-wrap: pretty;
}

/* ---------- o cartão herói ----------
   Uma peça principal por tela. O resto da tela fica quieto embaixo dela. */
.cartao.heroi {
  background: linear-gradient(160deg in oklab, rgba(76, 201, 240, 0.1), var(--superficie) 62%);
  box-shadow: var(--anel-forte);
}
.heroi-numero {
  display: flex;
  align-items: baseline;
  gap: 9px;
  margin: 2px 0 14px;
}
.heroi-numero b {
  font-size: 46px;
  font-weight: 700;
  line-height: 1;          /* número de uma linha só: pode ser apertado */
  letter-spacing: -1.5px;  /* corpo grande pede negativo, senão parece solto */
  color: var(--texto);
}
.heroi-numero span {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--texto-fraquissimo);
}
.cartao.heroi .barra-meta > i {
  background: linear-gradient(90deg in oklab, var(--progresso), var(--sucesso));
}

/* ---------- pódio sem depender de cor ----------
   Dourado, branco e roxo viram três cinzas pra quem é daltônico. O peso da
   fonte e o tamanho dizem a mesma coisa sem pedir a cor emprestada. */
.placar-posicao[data-podio] { font-weight: 800; }
.placar-posicao[data-podio="1"] { color: var(--destaque); font-size: 17px; }
.placar-posicao[data-podio="2"] { color: var(--texto); }
.placar-posicao[data-podio="3"] { color: var(--p-roxo-claro); }

/* a linha do dono usa a cor de SELEÇÃO, que é o que ela significa */
.placar-linha[data-eu] {
  background: rgba(124, 92, 255, 0.13);
  box-shadow: inset 0 0 0 1px rgba(124, 92, 255, 0.34);
  border-color: transparent;
}

/* prosa não deve atravessar um cartão largo de ponta a ponta */
.cartao .dica { max-width: 68ch; }

@media (min-width: 1000px) {
  #cartao-season { grid-column: span 12; }
  #cartao-placar { grid-column: span 7; }
  #cartao-atributos { grid-column: span 5; }
  #cartao-ciclo,
  #cartao-colecao { grid-column: span 12; }
  /* o número do herói cresce junto com a tela */
  .heroi-numero b { font-size: 58px; }
}

/* =================================================================
   SEGUNDO PASSE — acessibilidade e movimento com propósito
   ================================================================= */

/* ---------- o anel do dia varre até o valor ----------
   O número sobe (no JS) e o arco acompanha. Sem isso o número anima e o
   desenho ao redor dele pula — pior do que os dois pulando juntos. */
.anel .barra { transition: stroke-dashoffset 450ms cubic-bezier(0.2, 0, 0, 1); }

/* a medalha do nível é um conic-gradient: sem registrar a variável como
   porcentagem o navegador não sabe interpolá-la e o anel salta */
@property --anel {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 0%;
}
.medalha { transition: --anel 450ms cubic-bezier(0.2, 0, 0, 1); }

@media (prefers-reduced-motion: reduce) {
  .anel .barra,
  .medalha { transition: none; }
}

/* ---------- foco visível ----------
   `:focus-visible` e não `:focus`: quem navega no teclado ganha o anel, quem
   clica com o mouse não leva um contorno a cada toque. */
:where(button, a, input, [tabindex]):focus-visible {
  outline: 2px solid var(--p-roxo-claro);
  outline-offset: 2px;
  border-radius: var(--raio-p);
}
.aba:focus-visible { outline-offset: -2px; }

/* ---------- alvo grande o bastante pro dedo ----------
   O piso da WCAG é 24px; em toque o confortável é 44. O botão "− 400 ml" e os
   contadores do onboarding estavam com uns 35 de altura. */
@media (pointer: coarse) {
  .botao.pequeno,
  .seta,
  .grupo { min-height: 44px; }
}

/* estado de hover só onde existe hover de verdade: no celular ele "gruda"
   depois do toque e o botão fica aceso sem motivo */
@media (hover: hover) {
  .botao:hover { background: var(--superficie-2); }
  .cartao:hover { box-shadow: var(--anel-forte); }
}

/* ---------- coleção que abre ---------- */
.colecao-resumo {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 12px;
}
.colecao-ultima {
  flex: 1;
  min-width: 0;
  padding: 12px 14px;
  border-radius: var(--raio-p);
  background: var(--superficie-2);
  box-shadow: var(--anel);
}
.colecao-ultima .rotulo-mini {
  font-size: 10.5px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--texto-fraquissimo);
}
.colecao-ultima .nome-ultima {
  display: block;
  margin-top: 3px;
  font-size: 15px;
  font-weight: 700;
}
.colecao-ultima .frase-ultima {
  display: block;
  margin-top: 2px;
  font-size: 12px;
  color: var(--texto-fraco);
  text-wrap: pretty;
}

/* ---------- o placar quando o espaço aperta ----------
   Medido: a 200px a linha de três colunas desmonta — o subtítulo quebra em
   duas, a altura pula de 65 pra 97px e a coluna do nome fica com 66px. E 200px
   não é hipótese: é o que sobra num celular de 375px com zoom de 200%, que a
   WCAG exige que funcione.

   `container` e não `@media`: o que importa é a largura que a LINHA tem, não a
   da janela. Card estreito num desktop largo daria o mesmo aperto. */
.placar { container-type: inline-size; }

.placar-sub { line-height: 1.4; }  /* ela quebra em 2 linhas quando aperta */

/* medido: a 260px as três colunas ainda cabem (65px de altura); a 200 não.
   O corte fica no meio, e tarde — estrutura só desmonta quando quebra */
@container (max-width: 235px) {
  /* os números descem pra baixo do nome em vez de disputarem a mesma linha */
  .placar-linha {
    grid-template-columns: 26px minmax(0, 1fr);
    row-gap: 6px;
  }
  .placar-numeros {
    grid-column: 2;
    flex-direction: row;
    align-items: baseline;
    justify-content: flex-start;
    gap: 10px;
  }
  .placar-pontos { font-size: 15px; }
}

/* linha onde os campos ganharam rótulo em cima: o botão alinha pela BASE dos
   campos, e não pelo topo do rótulo, senão ele flutua acima da caixa */
.linha-com-rotulo { align-items: flex-end; }
.linha-com-rotulo .botao { flex: 0 0 auto; }
/* sem isso o rotulo define a largura minima do campo e a linha de tres itens
   quebra em tres linhas — foi o que aconteceu na primeira tentativa */
.linha-com-rotulo .campo-rotulado { min-width: 0; }
.linha-com-rotulo .campo { min-width: 0; }

/* o bloco de músculo descansando: mesma lógica dos outros estados — o fundo
   acompanha a cor da faixa, senão só o textinho carrega o recado */
.bloco-musculo[data-faixa="descansando"] {
  background: rgba(91, 141, 239, 0.09);
  border-color: rgba(91, 141, 239, 0.3);
}

/* =================================================================
   REDESENHO — rodada 1: o cartão AGORA e a régua de copos
   ================================================================= */

/* ---------- AGORA: a refeição da vez, resolvida na tela inicial ---------- */
.cartao.agora {
  background: linear-gradient(160deg, rgba(124, 85, 255, 0.16), var(--superficie) 62%);
  box-shadow: 0 0 0 1px rgba(124, 85, 255, 0.28);
}
.agora-topo { display: flex; align-items: baseline; gap: 8px; }
.agora-rotulo {
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--p-roxo-claro);
}
.agora-hora { font-size: 11.5px; color: var(--texto-fraquissimo); font-variant-numeric: tabular-nums; }
.agora-nome {
  margin: 2px 0 0;
  font-size: 21px;
  font-weight: 600;
  letter-spacing: -0.3px;
}
.agora-plano { margin: 4px 0 13px; }
.agora-acoes { gap: 8px; }
.agora-acoes .botao { height: 48px; }
/* "Fugi" não é o botão vermelho: registrar o deslize é progresso */
.botao.contado {
  flex: 0 1 auto;
  border-color: rgba(76, 211, 242, 0.35);
  background: rgba(76, 211, 242, 0.07);
  color: #9ee6f8;
}
.agora-regra { margin: 10px 0 0; font-size: 11.5px; }

.agora-opcoes { display: flex; flex-direction: column; gap: 7px; margin-bottom: 10px; }
.opcao-plano {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  width: 100%;
  text-align: left;
  padding: 11px 12px;
  border-radius: var(--raio-p);
  border: 1px solid var(--borda);
  background: rgba(0, 0, 0, 0.25);
  color: var(--texto);
  font: inherit;
  font-size: 13.5px;
  cursor: pointer;
  transition: border-color var(--rapido), background var(--rapido);
}
.opcao-num {
  flex: none;
  width: 20px;
  height: 20px;
  border-radius: 6px;
  background: rgba(124, 85, 255, 0.25);
  color: var(--p-roxo-claro);
  font-size: 11.5px;
  font-weight: 600;
  display: grid;
  place-items: center;
}
.opcao-texto { min-width: 0; }

/* ---------- a régua de copos ----------
   Um toque para qualquer volume, e tocar no copo em que você está desmarca. */
.agua-dica { margin: -2px 0 10px; }
.copos { display: flex; gap: 5px; margin-bottom: 12px; }
.copo {
  flex: 1;
  min-width: 0;
  height: 46px;
  border-radius: 9px;
  border: 1px solid var(--borda);
  background: rgba(0, 0, 0, 0.22);
  color: var(--texto-fraquissimo);
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: background var(--rapido), border-color var(--rapido), color var(--rapido);
}
.copo.cheio {
  border-color: rgba(76, 211, 242, 0.55);
  background: rgba(76, 211, 242, 0.22);
  color: #9ee6f8;
}
.copo:active { transform: scale(0.96); }

@media (min-width: 1000px) {
  /* largos e empilhados. Espremidos em 4 e 8 colunas — ainda mais com a coluna
     lateral levando 300px — a frase do dia quebrava uma palavra por linha. */
  #cartao-dia,
  #cartao-agora { grid-column: span 12; }
  .agora-nome { font-size: 23px; }
}

@media (hover: hover) {
  .opcao-plano:hover { border-color: rgba(124, 85, 255, 0.7); background: rgba(124, 85, 255, 0.1); }
  .copo:hover { border-color: rgba(76, 211, 242, 0.55); }
}

.agora-acoes.secundarias { margin-top: 8px; }
.agora-acoes.secundarias .botao { flex: 1 1 0; }
.botao.contado { flex: 1 1 0; }

/* =================================================================
   REDESENHO — cabeçalho de uma linha, resumo do dia, coluna lateral
   ================================================================= */

/* ---------- cabeçalho: tudo na mesma faixa ----------
   Eram duas linhas empilhadas antes de qualquer conteúdo. Agora medalha,
   saudação, navegador de dias e os selos dividem uma só. */
.topo { flex-wrap: wrap; gap: 12px; }
.topo .titulo { flex: 1 1 140px; min-width: 0; }
.topo .dia-navega { margin: 0; }
.selos { display: flex; gap: 8px; flex: none; }
.selo {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 13px;
  border-radius: 999px;
  background: var(--superficie);
  box-shadow: var(--anel);
  font-size: 13.5px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.selo i { display: grid; place-items: center; opacity: 0.8; }
#selo-agua i { color: var(--contado); }
#streak i { color: var(--p-ouro); }

/* ---------- resumo do dia ---------- */
.resumo-do-dia { flex: 1; min-width: 0; }
.falta {
  margin: 0 0 10px;
  font-size: 15.5px;
  font-weight: 500;
  text-wrap: pretty;
}
.detalhes { display: flex; flex-wrap: wrap; gap: 6px; }

/* ---------- coluna lateral (só no desktop) ---------- */
.coluna-lateral { display: none; }
.bloco-lateral { margin-bottom: 0; }
.rotulo-lateral {
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--texto-fraquissimo);
}
.streak-grande { display: flex; align-items: baseline; gap: 9px; margin-top: 6px; }
.streak-grande b {
  font-size: 34px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -1px;
  font-variant-numeric: tabular-nums;
}
.streak-grande span { font-size: 13.5px; color: var(--texto-fraco); }

.linha-semana + .linha-semana { margin-top: 12px; }
.topo-semana {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  font-size: 13.5px;
  margin-bottom: 6px;
}
.topo-semana b { font-variant-numeric: tabular-nums; color: var(--texto-fraco); }
.topo-semana b.bom { color: var(--sucesso); }
.barra-mini {
  height: 3px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.07);
  overflow: hidden;
}
.barra-mini > i {
  display: block;
  height: 100%;
  border-radius: 3px;
  background: var(--progresso);
  transition: width 450ms cubic-bezier(0.2, 0, 0, 1);
}
.linha-lateral {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 0;
  font-size: 13.5px;
}
.linha-lateral + .linha-lateral { border-top: 1px solid var(--borda); }
.linha-lateral .pos { color: var(--texto-fraquissimo); font-variant-numeric: tabular-nums; }
.linha-lateral .quem { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.linha-lateral b { font-variant-numeric: tabular-nums; }
.linha-lateral.eu .quem { color: var(--p-roxo-claro); font-weight: 600; }

@media (min-width: 1000px) {
  /* o conteúdo abre espaço pra coluna, que fica presa e não rola junto */
  .coluna-lateral {
    display: flex;
    flex-direction: column;
    gap: 18px;
    position: sticky;
    top: 30px;
    width: 300px;
    flex: none;
  }
  .app { display: flex; gap: 26px; align-items: flex-start; flex-wrap: wrap; }
  /* só o cabeçalho ocupa a linha inteira. O navegador de dias mora DENTRO
     dele agora — dar 100% a ele o jogava pra uma linha só sua, que é
     exatamente as duas faixas empilhadas que o redesenho veio tirar. */
  .topo { width: 100%; }
  #tela-hoje, #tela-treino, #tela-corpo,
  #tela-season, #tela-semana, #tela-ajustes {
    flex: 1;
    min-width: 0;
    margin-left: 0;
    margin-right: 0;
  }
}

/* o anel não estica junto com o cartão: ele tem tamanho próprio e fica no topo */
.cartao#cartao-dia .progresso { align-items: flex-start; }
@media (min-width: 1000px) {
  /* a linha do cabeçalho não quebra enquanto couber */
  .topo { flex-wrap: nowrap; }
  .topo .titulo { flex: 1 1 auto; }
}

/* =================================================================
   As larguras do desktop, refeitas para conviver com a coluna lateral.
   Escrito no fim de propósito: as regras antigas (span 4/8, e o 1500px
   com span 3/9) foram desenhadas quando o conteúdo tinha a tela toda.
   Com 300px indo pra coluna, aquele span 8 virava um cartão espremido.
   ================================================================= */
@media (min-width: 1000px) {
  #cartao-dia,
  #cartao-agora,
  #cartao-refeicoes,
  #cartao-treino { grid-column: span 12; }
  #cartao-quests { grid-column: span 7; }
  #cartao-agua { grid-column: span 5; }

  /* a refeição precisa de largura pro nome não quebrar em três linhas */
  #cartao-refeicoes .refeicoes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1500px) {
  #cartao-dia,
  #cartao-refeicoes { grid-column: span 12; }
  #cartao-quests { grid-column: span 7; }
  #cartao-agua { grid-column: span 5; }
  #cartao-refeicoes .refeicoes { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ---------- o botão da câmera ----------
   Ele era fixo e cobria uma faixa do conteúdo em QUALQUER rolagem — você viu
   nos prints, por cima da primeira quest e depois por cima do "Segui o plano".
   A ação não sumiu: ela mora no cartão AGORA, junto da refeição que ela
   registra. Enquanto houver refeição em aberto, o flutuante fica fora do
   caminho; quando não houver, ele volta como último recurso. */
body:has(#cartao-agora:not([hidden])) #botao-camera { display: none !important; }

/* =================================================================
   AJUSTES — o índice de 6 páginas
   Uma tela de 71 controles virou um índice curto. Cada linha carrega o
   resumo do estado, então dá pra conferir sem entrar.
   ================================================================= */

.cabeca-ajustes h2 {
  margin: 0;
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.4px;
}
.cabeca-ajustes .dica { margin: 3px 0 0; }

.indice-ajustes { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.linha-ajuste {
  flex: 1 1 290px;
  display: flex;
  align-items: center;
  gap: 13px;
  text-align: left;
  padding: 15px 16px;
  border-radius: var(--raio-p);
  border: none;
  box-shadow: var(--anel);
  background: var(--superficie);
  color: var(--texto);
  font: inherit;
  cursor: pointer;
  transition: background var(--rapido), box-shadow var(--rapido);
}
.sigla-ajuste {
  flex: none;
  width: 38px;
  height: 38px;
  border-radius: 11px;
  background: rgba(124, 85, 255, 0.18);
  color: var(--p-roxo-claro);
  display: grid;
  place-items: center;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
}
.texto-ajuste { flex: 1; min-width: 0; }
.texto-ajuste b { display: block; font-size: 15.5px; font-weight: 600; }
.resumo-ajuste {
  display: block;
  margin-top: 2px;
  font-size: 12.5px;
  color: var(--texto-fraquissimo);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.seta-ajuste { flex: none; color: var(--texto-fraquissimo); font-size: 17px; }

/* ---------- cabeçalho de uma página de ajuste ---------- */
.cabeca-pagina { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.voltar-ajustes {
  flex: none;
  width: 44px;
  height: 44px;
  border: 1px solid var(--borda-forte);
  border-radius: var(--raio-p);
  background: var(--superficie);
  color: var(--texto);
  font-size: 19px;
  line-height: 1;
  cursor: pointer;
}
.titulo-pagina { min-width: 0; }
.titulo-pagina b { display: block; font-size: 20px; font-weight: 600; letter-spacing: -0.3px; }
.titulo-pagina .dica { display: block; margin: 0; }

/* ---------- perfil ---------- */
.linha-perfil {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 13px;
  font-size: 14px;
}
.linha-perfil + .linha-perfil { border-top: 1px solid var(--borda); }
.linha-perfil span { color: var(--texto-fraco); }

/* ---------- a barra de salvar, presa no rodapé ----------
   Já era sticky, mas era um botão solto flutuando. Virou barra: o botão
   deixa de parecer que escorregou pra fora do cartão. */
.salvar-fixo {
  position: sticky;
  bottom: calc(12px + env(safe-area-inset-bottom));
  z-index: 20;
  margin-top: 10px;
  height: 46px;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.5), 0 10px 26px rgba(124, 85, 255, 0.28);
}

@media (min-width: 1000px) {
  /* o índice não precisa das 12 colunas: duas por linha lê melhor */
  #tela-ajustes > .cabeca-ajustes,
  #tela-ajustes > .indice-ajustes,
  #tela-ajustes > .cabeca-pagina { grid-column: span 12; }
  .linha-ajuste { flex: 1 1 calc(50% - 5px); }
}

/* =================================================================
   CONSERTO — o desktop tinha virado uma faixa espremida à direita.

   Eu montei o `.app` como flex com quebra de linha, contando que o
   cabeçalho ocupasse a linha inteira com `width:100%`. Só que ele também
   carrega `max-width:1320px` das regras antigas — então "100%" virou
   1320px, sobrou espaço na direita, e o conteúdo (que devia estar embaixo)
   coube ali do lado com 284px de largura. A coluna lateral desceu sozinha.

   `flex-basis:100%` força a quebra de verdade: ele não depende do
   max-width, e é o que faz o cabeçalho realmente ser dono da sua linha.
   ================================================================= */
@media (min-width: 1000px) {
  .app {
    display: flex;
    flex-wrap: wrap;
    gap: 26px;
    align-items: flex-start;
    align-content: flex-start;
  }
  /* o cabeçalho é dono da linha dele — e sem teto, senão volta a sobrar
     espaço à direita pro conteúdo se enfiar */
  .topo {
    flex: 0 0 100%;
    max-width: none;
    width: auto;
  }
  /* a tela ocupa o que sobrar depois da coluna; nada de teto brigando aqui */
  #tela-hoje,
  #tela-treino,
  #tela-corpo,
  #tela-season,
  #tela-semana,
  #tela-ajustes {
    flex: 1 1 520px;
    min-width: 0;
    max-width: none;
    margin: 0;
  }
  .coluna-lateral { flex: 0 0 300px; width: auto; }
}

/* Dois acabamentos do conserto acima:

   1. A coluna precisa de espaço real pra existir. Em 1000px sobram 710px
      depois da barra lateral — conteúdo (mínimo 520) + coluna (300) + vão
      não cabem, e ela descia pra baixo do conteúdo, que é o pior dos dois
      mundos. Ela só entra a partir de 1200px, onde de fato cabe ao lado.
   2. Sem teto, em 2560px a fileira de cartões esticava até 1944px e a
      linha de texto ficava longa demais pra ler. */
@media (min-width: 1000px) and (max-width: 1199.98px) {
  .coluna-lateral { display: none; }
}
@media (min-width: 1000px) {
  #tela-hoje,
  #tela-treino,
  #tela-corpo,
  #tela-season,
  #tela-semana,
  #tela-ajustes { max-width: 1180px; }
}

/* =================================================================
   O CASCO — transcrito do protótipo, com os números dele.

   A diferença de fundo com o que eu tinha não era cor nem espaçamento:
   era esqueleto. Ali a barra lateral e o cabeçalho ficam PRESOS e só o
   miolo rola, centralizado em 1160px. No meu, a página inteira rolava e
   a lateral era position:fixed. Nenhum ajuste de detalhe ia fazer bater.
   ================================================================= */

@media (min-width: 1000px) {
  html, body { height: 100%; overflow: hidden; }

  .app {
    display: flex;
    flex-wrap: nowrap;
    height: 100vh;
    overflow: hidden;
    gap: 0;
    padding: 0;
    max-width: none;
    margin: 0;
  }

  /* ---- barra lateral: 216px, presa, com fundo próprio ---- */
  .abas {
    position: static;
    flex: none;
    width: 216px;
    height: 100%;
    flex-direction: column;
    justify-content: flex-start;
    gap: 2px;
    padding: 20px 12px;
    border-top: none;
    border-right: 1px solid rgba(255, 255, 255, 0.06);
    background: #0a0a11;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  .abas::before {
    position: static;
    display: block;
    padding: 0 10px 20px;
    font-size: 17px;
    letter-spacing: -0.2px;
  }
  .aba {
    flex: none;
    flex-direction: row;
    justify-content: flex-start;
    gap: 11px;
    padding: 11px 12px;
    border-radius: 11px;
    font-size: 15px;
    font-weight: 500;
    text-align: left;
  }
  .aba span { font-size: 19px; }
  .aba.ligada { background: #1c1730; color: #c9b6ff; }

  /* ---- a coluna do meio ---- */
  .painel {
    flex: 1;
    min-width: 0;
    height: 100%;
    display: flex;
    flex-direction: column;
  }

  /* ---- cabeçalho preso, com borda embaixo ---- */
  .topo {
    flex: none;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    margin: 0;
    max-width: none;
    width: auto;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    background: #0a0a11;
  }

  /* ---- o único que rola ---- */
  .rolagem { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; }
  .miolo {
    max-width: 1160px;
    margin: 0 auto;
    padding: 18px 20px 20px;
    display: flex;
    flex-direction: column;
    gap: 14px;
  }
  /* dentro do miolo as telas voltam a ser blocos simples: quem manda no
     arranjo agora é a grade de cada tela, não o flex do .app */
  #tela-hoje, #tela-treino, #tela-corpo,
  #tela-season, #tela-semana, #tela-ajustes {
    flex: none;
    max-width: none;
    margin: 0;
  }

  /* ---- inspetor / coluna direita: 318px, rola sozinha ---- */
  .coluna-lateral {
    position: static;
    flex: none;
    width: 318px;
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 16px;
    gap: 12px;
    border-left: 1px solid rgba(255, 255, 255, 0.06);
    background: #0a0a11;
  }

  /* a câmera flutuante não existe no protótipo de desktop */
  #botao-camera { display: none !important; }
}

/* =================================================================
   TRANSCRIÇÃO — os valores literais do protótipo.

   Tudo aqui foi lido dos estilos inline do `LQ App.dc.html`, não
   estimado de olho. Fica no fim do arquivo de propósito: onde eu tinha
   escolhido outro número antes (raio de 26px do meu passe concêntrico,
   fundo por sombra em vez de borda), o desenho ganha.
   ================================================================= */

:root {
  --fundo: #08080d;
  --fundo-2: #12121a;
  --texto: #f1f1f6;
  --texto-fraco: #8a8aa3;
  --texto-fraquissimo: #5f5f78;
  --borda: rgba(255, 255, 255, 0.06);
  --raio: 18px;
  --raio-p: 12px;
  --recheio: 16px;
}

body { font-size: 15px; line-height: 1.45; }

/* ---- cartão: fundo sólido e borda de 1px, não anel de sombra ---- */
.cartao {
  background: #12121a;
  border: 1px solid rgba(255, 255, 255, 0.06);
  box-shadow: none;
  border-radius: 18px;
  padding: 16px 18px;
  margin-bottom: 14px;
}
.cartao > header { margin-bottom: 12px; }
.cartao h2 {
  font-size: 10.5px;
  letter-spacing: 0.16em;
  color: var(--texto-fraquissimo);
}
.cartao .valor { font-size: 12.5px; color: #7c7c96; }

/* ---- o anel: 96px, traço de 8, e o número é PONTO, não porcentagem ---- */
.anel { width: 96px; height: 96px; flex: 0 0 96px; }
.anel .trilho,
.anel .barra { stroke-width: 8; }
.anel .trilho { stroke: rgba(255, 255, 255, 0.07); }
.anel .barra { stroke: #7c55ff; stroke-linecap: round; }
.anel .centro b {
  font-size: 27px;
  font-weight: 600;
  letter-spacing: -1px;
  line-height: 1;
}
.anel .centro small {
  font-size: 10px;
  letter-spacing: 0.14em;
  color: #6e6e88;
}

/* ---- a frase e as pastilhas do dia ---- */
.falta { font-size: 15.5px; font-weight: 500; margin-bottom: 10px; }
.detalhes { gap: 6px; }
.pastilha {
  padding: 4px 9px;
  border-radius: 8px;
  background: #191922;
  border: none;
  font-size: 11.5px;
  color: #8a8aa3;
}

/* ---- cartões internos (refeição, quest, exercício) ---- */
.refeicao {
  padding: 13px 14px;
  border-radius: 14px;
  background: #171720;
  border: 1px solid rgba(255, 255, 255, 0.07);
}
.checklist .item {
  padding: 10px 12px;
  border-radius: 12px;
  background: #171720;
  border: 1px solid rgba(255, 255, 255, 0.06);
}
.checklist { gap: 8px; }

/* ---- AGORA ---- */
.cartao.agora {
  background: linear-gradient(160deg, #181233, #12121a 62%);
  border: 1px solid rgba(124, 85, 255, 0.28);
  box-shadow: none;
}
.agora-acoes .botao { height: 48px; border-radius: 13px; }

/* ---- copos ---- */
.copos { gap: 5px; }
.copo { height: 46px; border-radius: 9px; background: #171720; }

@media (min-width: 1000px) {
  /* o cabeçalho do protótipo tem 12px de folga em cima e embaixo, e a
     medalha (40px) é a peça mais alta que ele carrega */
  .topo { padding: 12px 16px; }
  .medalha { width: 40px; height: 40px; flex: 0 0 40px; }
  .medalha span { font-size: 15px; }
  .titulo h1 { font-size: 16.5px; letter-spacing: -0.2px; }
  .titulo p { font-size: 12.5px; color: #7c7c96; }
  .miolo { gap: 14px; }
  .miolo > div > .cartao:last-child { margin-bottom: 0; }
}

/* ---- a barra de rolagem, literal do protótipo ----
   Sem isto o Windows desenha a barra grossa e clara dele bem no meio do
   layout, entre o conteúdo e a coluna. */
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.09); border-radius: 9px; }
::-webkit-scrollbar-track { background: transparent; }
/* Firefox não usa as regras acima */
* { scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, 0.09) transparent; }

/* ---- botão com ícone ----
   `pintarIcones` insere o SVG como primeiro filho do próprio botão. Como
   `.botao` não era flex, ícone e texto encostavam ("[cam]Foto"). Isto vale
   pra qualquer botão que declare data-icone, hoje e no futuro — era erro de
   raiz, não de um botão específico. */
.botao[data-icone],
.botao[data-pintado] {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.botao[data-icone] svg,
.botao[data-pintado] svg { flex: none; }

/* mesma história das pastilhas de grupo muscular: elas levam ícone + texto
   e estavam em `display:block`, então o check encostava na palavra */
.grupo {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}