/* ===================== Ficha (redesign 25/10/2026) =====================
   O dia como uma ficha de academia: cartão pautado cinza-frio, grafite, uma cor por módulo (treino caneta azul,
   dieta verde, finanças âmbar, lazer violeta), números em coluna (mono tabular), 3 tamanhos de texto (15/20/34),
   hierarquia por peso e caixa alta condensada. Detalhes em DESIGN.md. Os nomes antigos de token (--page, --accent...)
   continuam valendo para o resto do arquivo; só os valores mudaram. */
@font-face { font-family: "Atkinson Hyperlegible Next"; src: url("/fonts/atkinson-next.woff2?v=1") format("woff2");
  font-weight: 200 800; font-display: swap; }
@font-face { font-family: "Atkinson Hyperlegible Mono"; src: url("/fonts/atkinson-mono.woff2?v=1") format("woff2");
  font-weight: 200 800; font-display: swap; }
@font-face { font-family: "Barlow Condensed"; src: url("/fonts/barlow-cond-600.woff2?v=1") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Barlow Condensed"; src: url("/fonts/barlow-cond-700.woff2?v=1") format("woff2"); font-weight: 700; font-display: swap; }
:root {
  color-scheme: light;
  --page: #e3e7e3;        /* mesa (cartão da prancheta) */
  --surface-1: #f8f9f6;   /* folha da ficha */
  --text-primary: #1f2428;/* grafite */
  --text-secondary: #3e464c;
  --muted: #545c62;       /* 6,3:1 na folha, 5,4:1 na mesa */
  --grid: #dde2de;
  --baseline: #b3bcb7;    /* borda de campo: 3:1 na folha */
  --border: #cdd4cf;      /* pauta */
  --series-1: #2741b0;
  --series-2: #2c6e33;
  --series-3: #6a3c9e;
  --series-4: #a86f00;
  --fold: #8d958f;
  --good: #2c6e33;
  --warning: #e0a100;
  --critical: #b8322a;
  --delta-good: #2c6e33;
  --accent: #2741b0;      /* caneta azul: 8,6:1 na folha */
  --warning-ink: #7a4d00;
  --star: #a86f00;
  --accent-fill: #2741b0; /* fundo com texto branco: 8,9:1 */
  --good-fill: #2c6e33;   /* 6,4:1 com branco */
  --m-treino: #2741b0; --m-dieta: #2c6e33; --m-grana: #7a4d00; --m-lazer: #6a3c9e;
  --marca: #d6f26e;       /* marca-texto (fundo, nunca texto) */
  --no-cor: #ffffff;      /* texto sobre fundo de módulo */
  --linha-atual: #e9ecf8; /* série atual, tinta azul rala */
  --faixa: #f6eed9;       /* fundo das faixas de aviso */
  --shadow-card: none;
  --shadow-float: 0 2px 4px rgb(31 36 40 / .08), 0 8px 16px rgb(31 36 40 / .14);
  --vidro: var(--surface-1);
  --hover: #eef0ec;
  --trilho: #e7eae6;
  --seg-ativo: var(--text-primary);
  --anel-foco: 0 0 0 3px #2741b033;
  --ease: cubic-bezier(.2, .7, .3, 1);
  --f-texto: "Atkinson Hyperlegible Next", "Segoe UI", system-ui, sans-serif;
  --f-numero: "Atkinson Hyperlegible Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --f-titulo: "Barlow Condensed", "Arial Narrow", "Roboto Condensed", sans-serif;
  --t1: 15px; --t2: 20px; --t3: 34px;
}
/* tema: segue o aparelho; Conta → Tema fixa claro/escuro em <html data-theme> */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --page: #101315; --surface-1: #1a1e21; --text-primary: #e7eae5; --text-secondary: #c3c9cc; --muted: #a3abb0;
    --grid: #2a3034; --baseline: #4a5358; --border: #31383c;
    --series-1: #93a5ff; --series-2: #a9da78; --series-3: #c4a2ee; --series-4: #e2b765; --fold: #6c7479;
    --good: #a9da78; --delta-good: #a9da78; --warning-ink: #e2b765; --critical: #ff8a7a; --star: #e2b765;
    --accent: #93a5ff; --accent-fill: #3550c9; --good-fill: #2f7a37;
    --m-treino: #93a5ff; --m-dieta: #a9da78; --m-grana: #e2b765; --m-lazer: #c4a2ee;
    --marca: #3d5418; --no-cor: #0f1430; --linha-atual: #242a40; --faixa: #2b2616;
    --shadow-float: 0 8px 16px rgb(0 0 0 / .55); --hover: #22272a; --trilho: #252a2e; --anel-foco: 0 0 0 3px #93a5ff40;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --page: #101315; --surface-1: #1a1e21; --text-primary: #e7eae5; --text-secondary: #c3c9cc; --muted: #a3abb0;
  --grid: #2a3034; --baseline: #4a5358; --border: #31383c;
  --series-1: #93a5ff; --series-2: #a9da78; --series-3: #c4a2ee; --series-4: #e2b765; --fold: #6c7479;
  --good: #a9da78; --delta-good: #a9da78; --warning-ink: #e2b765; --critical: #ff8a7a; --star: #e2b765;
  --accent: #93a5ff; --accent-fill: #3550c9; --good-fill: #2f7a37;
  --m-treino: #93a5ff; --m-dieta: #a9da78; --m-grana: #e2b765; --m-lazer: #c4a2ee;
  --marca: #3d5418; --no-cor: #0f1430; --linha-atual: #242a40; --faixa: #2b2616;
  --shadow-float: 0 8px 16px rgb(0 0 0 / .55); --hover: #22272a; --trilho: #252a2e; --anel-foco: 0 0 0 3px #93a5ff40;
}
:root[data-theme="light"] { color-scheme: light; }

* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--page);
  color: var(--text-primary);
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 14px;
}

.topbar {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 12px 24px;
  border-bottom: 1px solid var(--border);
  background: var(--surface-1);
  position: sticky;
  top: 0;
  z-index: 10;
}
.topbar h1 { font-size: 18px; margin: 0; }

#tabs { display: flex; gap: 4px; flex: 1; }
#tabs button {
  border: none;
  background: none;
  color: var(--text-secondary);
  font: inherit;
  padding: 8px 12px;
  border-radius: 8px;
  cursor: pointer;
}
#tabs button:hover { background: color-mix(in oklab, var(--text-primary) 6%, transparent); }
#tabs button.active { color: var(--text-primary); font-weight: 600; background: color-mix(in oklab, var(--text-primary) 8%, transparent); }

#f-busca { min-width: 240px; }

.view { padding: 16px 24px 48px; display: grid; gap: 16px; }
.view[hidden] { display: none; }

.card {
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 16px 18px;
  overflow-x: auto;
}
.card h2 { font-size: 14px; font-weight: 600; margin: 0 0 4px; }
.sub { color: var(--muted); font-size: 12px; margin: 0 0 10px; }

/* metas numa lista só (ordem de prioridade); a atual em destaque, as cumpridas em verde */
.metas { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.metas li {
  display: grid; grid-template-columns: 1.6em 1fr auto; column-gap: 8px; row-gap: 6px;
  align-items: baseline; font-size: 13px; color: var(--muted);
}

.metas li.agora { color: inherit; }

.legend { display: flex; gap: 16px; margin: 2px 0 8px; flex-wrap: wrap; }
.legend .key { display: flex; align-items: center; gap: 6px; color: var(--text-secondary); font-size: 12px; }

table { width: 100%; border-collapse: collapse; }
th {
  text-align: left;
  color: var(--muted);
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 8px 10px;
  border-bottom: 1px solid var(--grid);
}
td { padding: 7px 10px; border-bottom: 1px solid var(--grid); }
tr:last-child td { border-bottom: none; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
td .desc { max-width: 340px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; }

td select {
  font: inherit;
  font-size: 12px;
  color: var(--text-primary);
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 3px 4px;
  max-width: 160px;
}

input[type="checkbox"] { cursor: pointer; }

#fila { display: grid; gap: 10px; }

.vazio { color: var(--muted); padding: 24px; text-align: center; }

.toast {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--text-primary);
  color: var(--page);
  border-radius: 8px;
  padding: 9px 16px;
  font-size: 13px;
  z-index: 60;
}

/* celular: logo + ações na 1ª linha, abas roláveis na 2ª (a barra inteira
   em uma linha alargava a página para ~750px e o navegador reduzia o zoom) */
@media (max-width: 820px) {
  .topbar { flex-wrap: wrap; gap: 8px 12px; padding: 10px 16px; }
  #tabs { order: 3; flex: 1 0 100%; overflow-x: auto; scrollbar-width: none; }
  #tabs::-webkit-scrollbar { display: none; }
  #tabs button { flex: none; white-space: nowrap; }
  .view { padding: 12px 16px 40px; }
  .card { overflow-x: visible; }
}

/* ---------- filmes.html / lugares.html (descobrir.js) ---------- */
.desc-voltar { color: var(--text-secondary); text-decoration: none; padding: 7px 10px; border-radius: 8px; }
.desc-voltar:hover { color: var(--text-primary); background: color-mix(in oklab, var(--text-primary) 6%, transparent); }
.desc-busca input {
  width: 100%; font: inherit; padding: 10px 12px; border-radius: 10px;
  border: 1px solid var(--border); background: var(--surface-1); color: var(--text-primary);
}
.desc-filtros { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; color: var(--text-secondary); }
.desc-filtros label { display: flex; gap: 6px; align-items: center; }
.desc-filtros select { font: inherit; }
.desc-h2 { font-size: 15px; margin: 0 0 10px; }
.desc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 12px; }
.desc-card {
  display: flex; gap: 12px; background: var(--surface-1); border: 1px solid var(--border);
  border-radius: 12px; padding: 12px; transition: opacity .2s;
}
.desc-card.saindo { opacity: .35; pointer-events: none; }
.desc-top { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.desc-top .desc-card { border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); }
.desc-poster { width: 92px; flex: none; aspect-ratio: 2 / 3; border-radius: 8px; object-fit: cover; background: var(--grid); }
.desc-top .desc-poster { width: 120px; }
.desc-info { display: flex; flex-direction: column; gap: 6px; min-width: 0; flex: 1; }
.desc-nome { font-weight: 600; font-size: 15px; color: var(--text-primary); text-decoration: none; }
.desc-info .sub { margin: 0; }
.desc-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.chip {
  font-size: 11px; padding: 2px 8px; border-radius: 99px; border: 1px solid var(--border);
  color: var(--text-secondary); text-decoration: none; white-space: nowrap;
}
.chip.ok { color: var(--delta-good); border-color: var(--delta-good); }
.chip.assinar { color: var(--warning-ink); border-color: var(--warning-ink); }
.desc-sinopse {
  margin: 0; font-size: 12px; color: var(--text-secondary); line-height: 1.4;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.desc-acoes { display: flex; gap: 6px; flex-wrap: wrap; margin-top: auto; align-items: center; }
.desc-acoes button {
  font: inherit; font-size: 13px; padding: 6px 10px; border-radius: 8px; cursor: pointer;
  border: 1px solid var(--border); background: var(--page); color: var(--text-primary);
}
.desc-acoes button:hover { background: color-mix(in oklab, var(--text-primary) 8%, var(--page)); }
.desc-acoes .chip { font-size: 13px; padding: 5px 10px; }
.desc-erro { color: var(--critical); margin: 0; }
button.desc-voltar { font: inherit; border: 1px solid var(--border); background: none; cursor: pointer; }
/* aba Classificar (filmes.html) */
.cl { display: grid; gap: 14px; max-width: 560px; width: 100%; margin: 0 auto; }
.cl[hidden], .cl-sugestoes[hidden] { display: none; }
.cl-sugestoes { display: grid; gap: 16px; }
.cl-deck { min-height: 320px; display: grid; align-content: start; }
.cl-card {
  display: flex; gap: 14px; background: var(--surface-1); border: 1px solid var(--border); border-radius: 16px;
  padding: 14px; touch-action: pan-y; user-select: none; cursor: grab; transition: box-shadow .1s;
}
.cl-card[data-dir="vi"] { box-shadow: 0 0 0 3px var(--good); }
.cl-card[data-dir="naovi"] { box-shadow: 0 0 0 3px var(--critical); }
.cl-poster { width: 150px; flex: none; aspect-ratio: 2 / 3; border-radius: 10px; object-fit: cover; background: var(--grid); pointer-events: none; }
.cl-card .desc-sinopse { -webkit-line-clamp: 6; }
.cl-lugar { min-height: 220px; padding: 22px; }
.cl-lugar .desc-nome { font-size: 19px; }
.cl-botoes { display: grid; grid-template-columns: 1fr auto 1fr; gap: 8px; }
.cl-botoes button, .cl-dica button {
  font: inherit; padding: 12px; border-radius: 10px; border: 1px solid var(--border);
  background: var(--surface-1); color: var(--text-primary); cursor: pointer;
}
.cl-botoes [data-cl="naovi"] { color: var(--critical); }
.cl-botoes [data-cl="vi"] { color: var(--delta-good); }
.cl-dica { text-align: center; margin: 0; }
.cl-dica button { padding: 4px 10px; margin-left: 6px; }
@media (max-width: 520px) {
  .cl-card { flex-direction: column; align-items: center; text-align: center; }
  .cl-card .desc-acoes, .cl-card .desc-chips { justify-content: center; }
  .cl-poster { width: 58%; }
}

/* painel de filtros (filmes.html e lugares.html) */
.filtros-box { border: 1px solid var(--border); border-radius: 12px; background: var(--surface-1); }
.filtros-box > summary { cursor: pointer; padding: 10px 14px; font-weight: 600; list-style: none; }
.filtros-box > summary::-webkit-details-marker { display: none; }
.filtros-box[open] > summary { border-bottom: 1px solid var(--border); }
.filtros-form { display: grid; gap: 12px; padding: 12px 14px 14px; }
.filtros-form fieldset { border: 0; margin: 0; padding: 0; display: grid; gap: 6px; }
.filtros-form legend { font-size: 13px; color: var(--text-secondary); padding: 0; margin-bottom: 6px; }
.filtros-linha { display: flex; flex-wrap: wrap; gap: 10px 16px; }
.filtros-form label { display: grid; gap: 4px; font-size: 12px; color: var(--text-secondary); }
.filtros-form label.check { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text-primary); }
.filtros-form label.largo { flex: 1 1 260px; }
.filtros-form label[hidden] { display: none; }
.filtros-form input, .filtros-form select {
  font: inherit; font-size: 14px; color: var(--text-primary); background: var(--page);
  border: 1px solid var(--border); border-radius: 8px; padding: 7px 9px;
}
.filtros-form input[type="number"] { width: 92px; }
.filtros-form .chips { display: flex; flex-wrap: wrap; gap: 6px; }
.filtros-form .chip { font: inherit; font-size: 13px; padding: 5px 11px; cursor: pointer; background: var(--page); }
.filtros-form .chip.on { color: var(--delta-good); border-color: var(--delta-good); background: color-mix(in srgb, var(--good) 12%, var(--page)); }
.filtros-form .chip.on::before { content: ""; display: inline-block; width: 1em; height: 1em; margin-right: .3em; vertical-align: -.15em; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat; }
.filtros-form .chip.fora { color: var(--critical); border-color: var(--critical); text-decoration: line-through; }
.filtros-form [data-limpar] {
  justify-self: start; font: inherit; font-size: 13px; padding: 6px 12px; border-radius: 8px; cursor: pointer;
  border: 1px solid var(--border); background: var(--page); color: var(--text-secondary);
}

.desc-card.marcado { border-color: color-mix(in srgb, var(--star) 55%, var(--border)); }
.desc-acoes .avaliar { display: inline-flex; gap: 6px; flex-wrap: wrap; }
.desc-acoes .avaliar button.on {
  background: color-mix(in srgb, var(--star) 22%, var(--page)); border-color: var(--star); font-weight: 600;
}
@media (max-width: 820px) {
  .desc-grid { grid-template-columns: 1fr; }
  .topbar nav + .desc-voltar { margin-left: auto; }  /* links do app à direita do título */
  .topbar .desc-voltar { padding: 6px 8px; white-space: nowrap; }
  
}

/* ---------- academia.html (academia.js) ---------- */
.ac { max-width: 760px; width: 100%; margin: 0 auto; grid-template-columns: minmax(0, 1fr); }
.ac section, .ac-card, .ac-lista { display: grid; gap: 12px; grid-template-columns: minmax(0, 1fr); }
.ac section[hidden] { display: none; }
.ac-card {
  background: var(--surface-1); border: 1px solid var(--border); border-radius: 12px; padding: 14px;
  display: grid; gap: 8px;
}
.ac-card h2 { font-size: 15px; margin: 0; }
.ac-card > summary { cursor: pointer; list-style: none; }
.ac-card > summary::-webkit-details-marker { display: none; }
.ac-lista { display: grid; gap: 12px; }
.ac-linha { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.ac-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.ac-chips .chip, .ac-linha .chip { font: inherit; font-size: 13px; padding: 6px 12px; cursor: pointer; background: var(--page); }
.ac .chip.on { color: var(--accent); border-color: var(--accent); font-weight: 600; background: color-mix(in srgb, var(--accent) 12%, var(--page)); }
.ac input, .ac select {
  font: inherit; font-size: 16px; color: var(--text-primary); background: var(--page);  /* 16px: iPhone não dá zoom */
  border: 1px solid var(--border); border-radius: 8px; padding: 7px 9px; min-width: 0;
}
.ac button:not(.chip) {
  font: inherit; font-size: 14px; padding: 8px 12px; border-radius: 8px; cursor: pointer;
  border: 1.5px solid var(--text-primary); background: var(--surface-1); color: var(--text-primary);
}
.ac button:disabled { opacity: .5; }
.ac-form { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.ac-form label { display: grid; gap: 4px; font-size: 12px; color: var(--text-secondary); min-width: 0; }
.ac-form label :is(input, select) { width: 100%; }
.ac-form .ac-largo { grid-column: 1 / -1; }
.ac-inline { display: flex; flex-wrap: wrap; align-items: center; }
.ac-inline input[type="number"] { width: 100px; }
.ac-inline input:not([type]) { flex: 1 1 140px; }
.ac-arquivo { display: inline-block !important; font-size: 14px !important; color: var(--text-primary) !important;
  padding: 8px 12px; border: 1px solid var(--border); border-radius: 8px; cursor: pointer; background: var(--page); }
.ac-acoes { display: flex; gap: 8px; align-items: end; }
.ac-resumo { display: flex; flex-wrap: wrap; gap: 8px 24px; }
.ac-resumo > div { display: grid; gap: 2px; }
.ac-resumo .sub { margin: 0; }
.ac-resumo b { font-size: 20px; }
.ac-destaque { margin: 0; font-size: 15px; }

/* treino do dia */
.ac-ex-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.ac-ex .sub { margin: 0; }
.ac-notas summary { cursor: pointer; }

.ac-series { display: grid; gap: 6px; }
.ac-serie { display: flex; align-items: center; gap: 6px; }
.ac-serie input { width: 72px; text-align: center; }
.ac-serie select { width: 70px; }
.ac-o { width: 22px; color: var(--muted); font-size: 12px; }
.ac-serie [data-salvar] { margin-left: auto; width: 46px; font-weight: 700; }
.ac-serie [data-salvar].feito { background: var(--good-fill); border-color: var(--good-fill); color: #fff; }

.ac-timer {
  position: fixed; left: 50%; bottom: max(16px, env(safe-area-inset-bottom)); transform: translateX(-50%);
  display: flex; align-items: center; gap: 10px; z-index: 20; padding: 10px 14px; border-radius: 14px;
  background: var(--text-primary); color: var(--page); box-shadow: 0 6px 24px rgb(0 0 0 / .3);
}
.ac-timer[hidden] { display: none; }
.ac-timer b { font-size: 22px; font-variant-numeric: tabular-nums; min-width: 64px; text-align: center; }
.ac-timer button { font: inherit; border: 0; border-radius: 8px; padding: 6px 10px; cursor: pointer;
  background: color-mix(in oklab, var(--page) 18%, transparent); color: inherit; }
.ac-toast {
  position: fixed; left: 50%; top: 70px; transform: translateX(-50%); z-index: 30; padding: 8px 14px;
  border-radius: 10px; background: var(--surface-1); border: 1px solid var(--border); box-shadow: 0 4px 16px rgb(0 0 0 / .15);
}
.ac-toast[hidden] { display: none; }

/* corpo */
.ac-graf { width: 100%; height: auto; }
.ac-grade-l { stroke: var(--grid); }
.ac-eixo { fill: var(--muted); font-size: 12px; }
.ac-pt { fill: var(--fold); }
.ac-mm { fill: none; stroke: var(--accent); stroke-width: 2.5; stroke-linejoin: round; }
.ac-legenda { display: flex; align-items: center; gap: 6px; }
.ac-pt-l, .ac-mm-l { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--fold); }
.ac-mm-l { width: 16px; height: 3px; border-radius: 2px; background: var(--accent); margin-left: 8px; }
.ac-tabela { overflow-x: auto; }
.ac-tabela table { border-collapse: collapse; width: 100%; font-variant-numeric: tabular-nums; }
.ac-tabela th, .ac-tabela td { padding: 6px 8px; border-bottom: 1px solid var(--grid); text-align: right; white-space: nowrap; }
.ac-tabela th { color: var(--muted); font-weight: 500; font-size: 12px; }
.ac-tabela :is(th, td):first-child { text-align: left; }
.ac-tabela tr.ac-total td { font-weight: 700; }
.ac-fotos { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ac-fotos figure { margin: 0; position: relative; }
.ac-fotos img { width: 100%; border-radius: 8px; display: block; }
.ac-fotos figure button { position: absolute; top: 6px; right: 6px; padding: 4px 7px !important; opacity: .8; }
.ac-sem-foto { border: 1px dashed var(--border); border-radius: 8px; min-height: 120px; }
.ac h3.sub { margin: 6px 0 0; text-transform: capitalize; }

/* semana */
.ac-cal { display: grid; grid-template-columns: 44px repeat(7, 1fr) 36px; gap: 5px; align-items: center; justify-items: center; }
.ac-cal .sub { margin: 0; }
.ac-cal .ok { color: var(--delta-good); font-weight: 600; }
.ac-dia { width: 100%; max-width: 34px; aspect-ratio: 1; border-radius: 7px; background: var(--grid); }
.ac-dia.on { background: var(--good); }
.ac-dia.hoje { outline: 2px solid var(--accent); outline-offset: 1px; }
.ac-barra { display: block; position: relative; width: 110px; height: 8px; border-radius: 4px; background: var(--grid); }
.ac-barra i { position: absolute; inset: 0 auto 0 0; border-radius: 4px; background: var(--accent); }
.ac-barra b { position: absolute; top: -3px; bottom: -3px; width: 2px; background: var(--text-secondary); }
.ac-fontes ul { margin: 8px 0 0; padding-left: 18px; display: grid; gap: 6px; color: var(--text-secondary); line-height: 1.45; }
.ac-fontes a { color: var(--accent); }

/* fichas */
.ac-item { padding-top: 10px; border-top: 1px solid var(--grid); }
.ac-ficha { padding-bottom: 4px; }
@media (max-width: 520px) {
  .ac-serie input { width: 64px; }
  .ac-barra { width: 70px; }
  .ac-form { grid-template-columns: 1fr 1fr; }
}

/* ---------- dieta.html (dieta.js; usa as classes .ac-*) ---------- */
.ac [hidden] { display: none !important; }
.dt-botoes { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; }
.dt-botoes [hidden] { display: none; }
.ac .dt-bt {
  display: block; text-align: center; font: inherit; font-size: 15px; font-weight: 600; padding: 12px; cursor: pointer;
  border-radius: 10px; border: 1px solid var(--border); background: var(--surface-1); color: var(--text-primary);
}
.dt-barras { display: grid; gap: 8px; }
.dt-barra { display: grid; grid-template-columns: 96px 1fr; gap: 2px 10px; align-items: center; }
.dt-barra > span:first-child { color: var(--text-secondary); }
.dt-barra b { text-align: right; font-variant-numeric: tabular-nums; }

.dt-mini { width: 100%; max-height: 180px; object-fit: cover; border-radius: 8px; }
.dt-itens { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.dt-itens li { display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.dt-item { display: grid; grid-template-columns: minmax(0, 1fr) 70px auto auto auto; gap: 6px; align-items: center;
  padding: 8px 0; border-bottom: 1px solid var(--grid); }
.dt-item input { width: 70px; text-align: center; }
.dt-item .sub { margin: 0; }
.dt-falta { color: var(--warning-ink); }
.dt-busca { display: grid; gap: 4px; }
.ac .dt-busca button { display: grid; text-align: left; gap: 2px; }
.dt-busca .sub { margin: 0; }
.dt-manual summary { cursor: pointer; }

.dt-calc { margin: 0; padding-left: 18px; display: grid; gap: 6px; line-height: 1.45; }
.dt-ok { color: var(--delta-good); font-weight: 600; }
.dt-baixo { color: var(--warning-ink); }
@media (max-width: 520px) { .dt-item { grid-template-columns: minmax(0, 1fr) 64px auto auto; } .dt-item > span { display: none; } }

/* ---------- visual amigável (academia.html + dieta.html) ---------- */
.ac { gap: 14px; }
.ac-card { border-radius: 16px; padding: 16px; box-shadow: 0 1px 2px rgb(0 0 0 / .04), 0 4px 14px rgb(0 0 0 / .04); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .ac-card { box-shadow: none; } }
:root[data-theme="dark"] .ac-card { box-shadow: none; }
.ac-card h2 { font-size: 16px; }
.ac small { font-size: 12px; font-weight: 500; color: var(--text-secondary); }
.ac-bom { color: var(--delta-good) !important; font-weight: 600; }
.ac-vazio { text-align: center; padding: 28px 16px; border: 1.5px dashed var(--border); border-radius: 16px; line-height: 1.6; font-size: 15px; }
.ac-vazio a { color: var(--accent); font-weight: 600; }
.ac button.ac-primario, .ac .ac-primario { background: var(--accent-fill); border-color: var(--accent-fill); color: #fff; font-weight: 600; }
.ac button.ac-link, .ac .ac-link {
  border: 0; background: none; padding: 6px 2px; color: var(--accent); font-weight: 600; font-size: 14px; cursor: pointer;
}
.ac-larga { width: 100%; }
.ac-rolar { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 -2px; padding: 2px; }
.ac-rolar::-webkit-scrollbar { display: none; }
.ac-rolar .chip { flex: none; }

/* dia: ‹ Hoje · sex, 17/10 › */
.ac-dia-nav { display: grid; grid-template-columns: 44px 1fr 44px; align-items: center; gap: 6px;
  background: var(--surface-1); border: 1px solid var(--border); border-radius: 14px; padding: 4px; }
.ac .ac-dia-nav button { border: 0; background: none; font-size: 22px; padding: 4px 0; color: var(--text-secondary); }
.ac-dia-nav label { position: relative; text-align: center; font-weight: 600; font-size: 15px; padding: 8px 0; cursor: pointer; }
.ac-dia-nav label::after { content: " ▾"; color: var(--muted); font-size: 12px; }
.ac .ac-dia-nav input { position: absolute; inset: 0; opacity: 0; width: 100%; cursor: pointer; }

/* treino */
.ac-prog { display: grid; gap: 6px; }
.ac-prog .sub { margin: 0; }
.ac-prog .ac-barra { height: 10px; border-radius: 5px; }
.ac-prog .ac-barra i { background: var(--good); border-radius: 5px; }
.ac-fim { text-align: center; font-size: 15px; border-color: var(--good); background: color-mix(in srgb, var(--good) 10%, var(--surface-1)); }
.ac-ex .ac-ex-top { align-items: flex-start; }
.ac-ex .ac-ex-top > div { flex: 1; min-width: 0; display: grid; gap: 2px; }
.ac-ex .ac-ex-top b { font-size: 16px; }
.ac-ex .chip.ac-ok { display: none; color: var(--delta-good); border-color: var(--delta-good); }
.ac-ex.feito { border-color: color-mix(in srgb, var(--good) 55%, var(--border)); }
.ac-ex.feito .chip.ac-ok { display: inline-block; }
.ac-ex.feito .chip.ac-musc { display: none; }
.ac-dica { display: grid; gap: 4px; font-size: 14px; padding: 10px 12px; border-radius: 10px;
  background: color-mix(in srgb, var(--accent) 8%, var(--surface-1)); }
.ac-dica .sub { margin: 0; }
.ac-serie { display: grid; grid-template-columns: 22px 1fr 1fr 74px 48px; gap: 8px; align-items: center; }
.ac-serie input, .ac-serie select { width: 100%; text-align: center; }
.ac-serie input::placeholder { color: var(--muted); opacity: .55; }
.ac-cab span { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; text-align: center; }

.ac .ac-serie [data-salvar] { margin: 0; width: 48px; height: 40px; font-size: 18px; border-radius: 10px; }
.ac-o { width: auto; text-align: center; font-weight: 600; }
.ac-rodape { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; }
.ac-notas { font-size: 14px; }
.ac-notas summary { color: var(--accent); font-weight: 600; cursor: pointer; list-style: none; padding: 6px 2px; }
.ac-notas summary::-webkit-details-marker { display: none; }
.ac-notas summary::after { content: " ▾"; font-size: 11px; }
.ac-notas p { margin: 4px 0 0; }

/* corpo */
.ac-perfil > summary { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-weight: 600; }
.ac-perfil[open] > summary .ac-link { visibility: hidden; }
.ac-perfil.pendente { border-color: var(--warning); }
.ac-peso { display: grid; grid-template-columns: 1fr auto; gap: 8px; }
.ac-peso input[type="date"] { grid-column: 1 / -1; font-size: 14px; color: var(--text-secondary); padding: 5px 9px; justify-self: start; }
.ac-peso input[type="number"] { font-size: 18px; font-weight: 600; }
.ac-peso select { min-width: 0; }
.ac-resumo { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 10px; }
.ac-resumo > div { background: var(--page); border-radius: 12px; padding: 10px; align-content: start; }
.ac-resumo b { font-size: 19px; white-space: nowrap; }
.ac-medidas { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 8px; }
.ac-medidas > div { display: grid; gap: 2px; padding: 8px 10px; border: 1px solid var(--grid); border-radius: 10px; }
.ac-medidas b { font-size: 17px; }
.ac-medidas span { font-size: 12px; margin: 0; }
.ac-sub-box > summary { cursor: pointer; list-style: none; }
.ac-sub-box > summary::-webkit-details-marker { display: none; }
.ac-sub-box[open] > summary { margin-bottom: 10px; }
.ac-arquivo.ac-primario { color: #fff !important; text-align: center; border-color: var(--accent); }
.ac-comparar { display: grid; grid-template-columns: 1fr auto 1fr; gap: 8px; align-items: center; color: var(--muted); }
.ac-angulo { margin: 8px 0 0; font-size: 13px; color: var(--text-secondary); text-transform: capitalize; }
.ac-fotos.uma { grid-template-columns: 1fr; max-width: 260px; }
.ac-fotos figcaption { text-align: center; font-size: 12px; color: var(--muted); margin-top: 4px; }
.ac button.ac-apagar-foto { position: absolute; top: 6px; right: 6px; width: 28px; height: 28px; padding: 0 !important;
  border-radius: 50%; border: 0; background: rgb(0 0 0 / .45); color: #fff; font-size: 13px; }
.ac-sem-foto { display: grid; place-items: center; color: var(--muted); font-size: 12px; aspect-ratio: 3 / 4; min-height: 0; }

/* dieta */
.dt-topo { display: grid; grid-template-columns: 128px 1fr; gap: 16px; align-items: center; }
.dt-anel { width: 128px; height: 128px; }
.dt-anel circle { fill: none; stroke-width: 11; }
.dt-anel-fundo { stroke: var(--grid); }
.dt-anel-cheio { stroke: var(--accent); stroke-linecap: round; transition: stroke-dasharray .4s; }
.dt-anel-cheio.passou { stroke: var(--warning); }
.dt-anel-n { font-size: 24px; font-weight: 700; fill: var(--text-primary); }
.dt-anel-t { font-size: 10px; fill: var(--muted); }
.dt-barras { gap: 10px; }
.dt-barra { grid-template-columns: 1fr auto; }
.dt-barra b { font-size: 14px; }
.dt-barra .ac-barra { height: 8px; grid-column: 1 / -1; }
.dt-dica { margin: 0; }
.dt-botoes { grid-template-columns: repeat(3, 1fr); }
.dt-botoes.sem-ia { grid-template-columns: repeat(2, 1fr); }
.ac .dt-bt, .ac button.dt-bt { display: grid; justify-items: center; gap: 4px; font-size: 13px; font-weight: 600; padding: 12px 6px;
  border-radius: 14px; background: var(--surface-1); color: var(--text-primary); border: 1px solid var(--border); }
.dt-bt > span { font-size: 24px; line-height: 1; }
.ac .dt-bt.dt-principal { background: var(--accent-fill); border-color: var(--accent-fill); color: #fff; }
#favs { align-items: center; }
#favs:empty { display: none; }
.dt-kcal { font-size: 18px; white-space: nowrap; }
.dt-macros { display: flex; flex-wrap: wrap; gap: 6px 12px; font-size: 13px; }
.dt-macros > span[style]::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--c); margin-right: 5px; }
.dt-acoes { display: flex; gap: 14px; border-top: 1px solid var(--grid); padding-top: 6px; }
.ac button.dt-perigo { color: var(--critical); margin-left: auto; font-weight: 500; }
@media (max-width: 380px) { .dt-topo { grid-template-columns: 108px 1fr; gap: 12px; } .dt-anel { width: 108px; height: 108px; } }

/* rascunho da refeição: nome na linha de cima, gramas e ações embaixo à direita */
.dt-item { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.dt-item > div:first-child { flex: 1 1 100%; }
.dt-item input { margin-left: auto; width: 76px; }
@media (max-width: 520px) { .dt-item > span { display: inline; } }
.view.ac { padding-bottom: 96px; }  /* o timer de descanso não cobre o último card */

/* treino rápido: carga + Feito por exercício */
.ac-rapido { display: grid; grid-template-columns: minmax(0, 1fr) auto 112px; gap: 8px; align-items: center; }
.ac-rapido input { font-size: 18px; font-weight: 600; text-align: center; }
.ac .ac-rapido [data-feito] { height: 44px; font-size: 15px; font-weight: 700; border-radius: 12px; }
.ac .ac-rapido [data-feito].feito { background: var(--good-fill); border-color: var(--good-fill); color: #fff; }
.ac-series { padding-top: 6px; border-top: 1px dashed var(--grid); }
.ac-prog-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.ac-fim .sub { margin: 4px 0 0; }

.so-leitura :is(.ac-rapido button, .ac-rodape [data-detalhar], #f-peso, .ac-sub-box:not(#hist-box), #card-fotos, #perfil,
  .ac-perfil .ac-link, #nova-ficha, #fichas .ac-acoes, #fichas .ac-ficha button, #fichas form.ac-item[data-id=""],
  [data-terminar], [data-continuar], [data-trocar], #f-avulso, #f-cardio-cfg, [data-apagar-avulso], .dt-botoes, #favs, .dt-acoes, #rascunho, #card-objetivo) { display: none !important; }
.so-leitura main :is(input, select):not(#dia) { pointer-events: none; }

/* Como fazer: vídeo por variação */
.ac-variacoes { margin: 6px 0; }
.ac-player iframe { width: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: 10px; display: block; background: #000; }
.ac-player:empty { display: none; }
/* topo do celular numa linha só: ícones compactos */
@media (max-width: 520px) {
  .topbar h1 { font-size: 17px; }
  .topbar .desc-voltar { padding: 5px 4px; }
  button.desc-voltar { border: 0; }
}

/* ===================== Tudin ===================== */
body { -webkit-tap-highlight-color: transparent; }
.topo-espaco { flex: 1; }
.topbar .logo { width: 26px; height: 26px; border-radius: 7px; vertical-align: -6px; margin-right: 4px; }
.view.ac { padding-bottom: calc(150px + env(safe-area-inset-bottom)); }

/* barra inferior do app */
.barra {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 15; display: grid; grid-template-columns: repeat(5, 1fr);
  padding: 6px 8px calc(6px + env(safe-area-inset-bottom)); background: var(--surface-1); border-top: 1px solid var(--border);
}
.barra a { display: grid; justify-items: center; gap: 3px; padding: 6px 0 4px; border-radius: 10px; font-size: 11px; font-weight: 500;
  color: var(--text-secondary); text-decoration: none; }
.barra a.on { color: var(--accent); font-weight: 700; }
.ac-timer { bottom: calc(76px + env(safe-area-inset-bottom)); }
@media (min-width: 821px) { .barra { left: 50%; right: auto; transform: translateX(-50%); width: 420px; bottom: 12px;
  border: 1px solid var(--border); border-radius: 18px; box-shadow: 0 6px 24px rgb(0 0 0 / .12); } }

/* faixas (teste, modo leitura, verificar e-mail) */
.ac-faixa { padding: 10px 14px; border-radius: 12px; font-size: 14px; background: color-mix(in srgb, var(--warning) 16%, var(--surface-1));
  border: 1px solid color-mix(in srgb, var(--warning) 45%, var(--border)); }
.ac-faixa a, .ac-faixa .ac-link { color: var(--accent); font-weight: 700; }

/* escolha de modelo de treino */
.ac-modelos { display: grid; gap: 8px; }
.ac button.ac-modelo { display: grid; gap: 4px; text-align: left; padding: 12px 14px; border-radius: 12px; background: var(--page); }
.ac-modelo .sub { margin: 0; }

/* hoje */
.hoje-ola { margin: 4px 0 0; font-size: 22px; }
.hoje-card { text-decoration: none; color: inherit; }
.hoje-card p { margin: 0; }
.passos { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.passos a { color: var(--text-primary); text-decoration: none; font-weight: 600; display: flex; align-items: center; gap: 10px; }
.passos a::before { content: ""; flex: none; width: 16px; height: 16px; border-radius: 5px; border: 1.8px solid var(--border); box-sizing: border-box; }
.passos li.feito a { color: var(--muted); text-decoration: line-through; font-weight: 400; }
.passos li.feito a::before { border-color: var(--good-fill); background: var(--good-fill)
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.5l2.5 2.5L12 5.5' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% no-repeat; }
.ac-barra.ac-passou i { background: var(--warning); }
.ac-neg { color: var(--critical); font-weight: 600; }

/* conta */
.ac a.ac-botao, .ac button.ac-botao, .ac label.ac-botao { display: block; text-align: center; padding: 11px; border-radius: 12px; border: 1px solid var(--border);
  background: var(--page); color: var(--text-primary); text-decoration: none; font-weight: 600; }
.ac .perigo, .ac button.perigo { color: var(--critical) !important; }
.ac button.ac-largo.perigo { border-color: var(--critical); }
.planos { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.plano { display: grid; gap: 2px; padding: 12px; border: 1px solid var(--border); border-radius: 14px; background: var(--page); }
.plano.destaque { border-color: var(--accent); }
.plano.escolha { cursor: pointer; position: relative; }
.plano.escolha input { position: absolute; opacity: 0; }
.plano.escolha:has(input:checked) { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.plano.escolha:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
#f-assinar { display: grid; gap: 12px; margin-top: 10px; }
#f-assinar[hidden], .ac-campo[hidden] { display: none; }
.ac-campo { display: grid; gap: 4px; font-size: 12px; color: var(--text-secondary); }
.ac-campo input { width: 100%; }
.plano .preco { font-size: 22px; font-weight: 800; }
.plano .sub { margin: 0; }
.rodape-legal { text-align: center; margin-top: 16px; }
#sair { margin-top: 20px; }
.rodape-legal a { color: var(--text-secondary); }

/* entrar / cadastro */
body.auth, body.doc { min-height: 100vh; display: grid; place-items: start center; padding: 32px 16px; }
.auth-caixa { width: min(400px, 100%); display: grid; gap: 14px; }
.auth-marca { display: inline-flex; align-items: center; gap: 8px; font-weight: 800; font-size: 20px; color: var(--text-primary); text-decoration: none; }
.auth-marca img { width: 34px; height: 34px; border-radius: 9px; }
.auth-caixa h1 { margin: 6px 0 0; font-size: 26px; }
.auth-sub { margin: 0; color: var(--text-secondary); }
.auth-form { display: grid; gap: 12px; }
.auth-form label { display: grid; gap: 5px; font-size: 13px; color: var(--text-secondary); }
.auth-form input:not([type="checkbox"]) { font: inherit; font-size: 16px; padding: 11px 12px; border-radius: 10px; border: 1px solid var(--border);
  background: var(--surface-1); color: var(--text-primary); }
.auth-form .auth-check { grid-template-columns: auto 1fr; align-items: start; gap: 10px; font-size: 13px; line-height: 1.4; }
.auth-check input { width: 20px; height: 20px; margin: 1px 0 0; }
.auth-form a, .auth-rodape a { color: var(--accent); }
button.primario, .lp-cta { font: inherit; font-weight: 700; font-size: 16px; padding: 13px; border: 0; border-radius: 12px; cursor: pointer;
  background: var(--accent-fill); color: #fff; text-align: center; text-decoration: none; }
button.secundario { font: inherit; font-size: 14px; padding: 11px; border-radius: 12px; cursor: pointer; border: 1px solid var(--border);
  background: var(--surface-1); color: var(--text-primary); }
button:disabled { opacity: .6; }
.auth-erro { margin: 0; color: var(--critical); }
.auth-ok { margin: 0; color: var(--delta-good); }
.auth-rodape { text-align: center; color: var(--text-secondary); }

/* landing */
body.landing { max-width: 1040px; margin: 0 auto; padding: 0 16px; }
.lp-topo { display: flex; justify-content: space-between; align-items: center; padding: 16px 0; }
.lp-topo nav { display: flex; gap: 16px; align-items: center; }
.lp-topo nav a { color: var(--text-primary); text-decoration: none; font-weight: 600; }
.lp-cta.pequeno { padding: 9px 14px; font-size: 14px; }
.lp-hero { text-align: center; padding: 40px 0 36px; display: grid; gap: 24px; justify-items: center; }
.lp-hero-texto { display: grid; gap: 16px; justify-items: center; }
@media (min-width: 900px) {
  .lp-hero { grid-template-columns: 1fr auto; align-items: center; column-gap: 64px; text-align: left; padding: 56px 24px 48px; }
  .lp-hero-texto { justify-items: start; }
  .lp-hero .lp-print { width: 280px; margin-top: 0; }
}
.lp-hero h1 { margin: 0; font-size: clamp(36px, 9vw, 60px); line-height: 1.02; letter-spacing: -.035em; text-wrap: balance; max-width: 13ch; }
.lp-hero p { margin: 0; max-width: 34ch; font-size: 18px; line-height: 1.45; color: var(--text-secondary); text-wrap: balance; }
.lp-hero .lp-cta { padding: 15px 28px; margin-top: 6px; }
.lp-hero .sub { font-size: 14px; color: var(--text-secondary); }
.lp-print { display: block; width: min(260px, 72vw); margin-top: 8px; padding: 7px; border-radius: 40px; background: color-mix(in srgb, var(--text-primary) 16%, #0d0d0d);
  border: 1px solid var(--border); box-shadow: 0 24px 48px -24px rgba(0, 0, 0, .45); }
.lp-print img { display: block; width: 100%; height: auto; border-radius: 33px; }
.landing main > section > h2 { margin: 0 0 16px; font-size: 22px; letter-spacing: -.01em; text-align: center; }
/* "Um dia com o Tudin": cada momento = texto + um recorte de tela do app (mesmos tokens do app) */
.lp-dia { padding: 24px 0 16px; }
.lp-momento { display: grid; gap: 18px; padding: 28px 0; border-top: 1px solid var(--border); }
.lp-momento h3 { margin: 0 0 8px; font-size: 22px; line-height: 1.2; letter-spacing: -.02em; text-wrap: balance; }
.lp-momento h3 time { color: var(--accent); font-variant-numeric: tabular-nums; margin-right: .3em; }
.lp-momento p { margin: 0; max-width: 44ch; color: var(--text-secondary); line-height: 1.5; }
.lp-frag { display: grid; gap: 10px; width: 100%; max-width: 380px; padding: 16px; border-radius: 16px; font-size: 14px;
  background: var(--surface-1); border: 1px solid var(--border); box-shadow: 0 12px 28px -18px rgba(0, 0, 0, .35); }
.lp-linha { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-variant-numeric: tabular-nums; }
.lp-linha .sub { margin: 0; }
.lp-series { display: flex; flex-wrap: wrap; gap: 6px; }
.lp-series span { padding: 5px 9px; border-radius: 8px; font-size: 13px; color: #fff; background: var(--good-fill); font-variant-numeric: tabular-nums; }
.lp-dica { display: flex; align-items: center; gap: 6px; color: var(--accent); }
.lp-cat { display: grid; grid-template-columns: 1fr auto; gap: 6px 12px; font-variant-numeric: tabular-nums; }
.lp-barra { grid-column: 1 / -1; display: block; height: 6px; border-radius: 3px; background: var(--grid); }
.lp-barra i { display: block; height: 100%; border-radius: 3px; background: var(--accent); }
.lp-barra.lp-passou i { background: var(--critical); }
.lp-neg { color: var(--critical); font-weight: 600; }
@media (min-width: 760px) {
  .lp-momento { grid-template-columns: 1fr 1fr; align-items: center; column-gap: 56px; padding: 40px 24px; }
  .lp-momento:nth-of-type(even) .lp-frag { order: -1; justify-self: end; }
}
.lp-precos { display: grid; gap: 16px; justify-items: center; padding: 32px 0; text-align: center; }
.lp-precos .planos { width: min(520px, 100%); text-align: left; }
.lp-precos .plano { background: var(--surface-1); padding: 14px; }
.lp-calcs { padding: 24px 0; }
.lp-calc-lista { display: grid; gap: 10px; max-width: 720px; margin: 0 auto; }
@media (min-width: 680px) { .lp-calc-lista { grid-template-columns: 1fr 1fr; } }
.lp-calc { display: grid; gap: 2px; padding: 14px 40px 14px 16px; border-radius: 14px; background: var(--surface-1); border: 1px solid var(--border);
  color: inherit; text-decoration: none; text-align: left; position: relative; }
.lp-calc::after { content: "›"; position: absolute; right: 16px; top: 50%; transform: translateY(-50%); font-size: 22px; color: var(--muted); }
.lp-calc small { color: var(--text-secondary); font-size: 13px; }
.lp-faq { max-width: 720px; margin: 0 auto; padding: 24px 0 8px; }
.lp-faq h2 { text-align: center; }
.lp-faq p { margin: 8px 0 4px; max-width: 68ch; }
.lp-rodape { text-align: center; padding: 32px 0 40px; color: var(--text-secondary); font-size: 14px; }
.lp-rodape a { color: var(--text-secondary); }

/* termos / privacidade */
.doc-caixa { width: min(720px, 100%); line-height: 1.6; }
.doc-caixa h2 { font-size: 18px; margin-top: 24px; }
.plano .preco { white-space: nowrap; font-size: 20px; }

/* entrar sem senha */
a.sso { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 12px; border-radius: 12px; font-weight: 700;
  text-decoration: none; border: 1px solid var(--border); background: var(--surface-1); color: var(--text-primary); }
a.sso span { font-weight: 800; font-size: 18px; }
a.sso.google span { color: #4285f4; }
a.sso.microsoft span { color: #00a4ef; }
a.sso[hidden] { display: none; }
.auth-ou { display: flex; align-items: center; gap: 10px; margin: 4px 0 0; color: var(--muted); font-size: 13px; }
.auth-ou::before, .auth-ou::after { content: ""; flex: 1; border-top: 1px solid var(--border); }
.auth-ou[hidden], .auth-form[hidden] { display: none; }

/* Finanças */
.fn-mes { display: flex; align-items: center; justify-content: center; gap: 14px; margin: 4px 0 12px; }
.fn-mes[hidden] { display: none; }
.fn-mes button { font-size: 22px; padding: 2px 12px; }
.fn-numeros { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin-bottom: 12px; }
.fn-numeros > div { display: grid; gap: 2px; padding: 10px 8px; min-width: 0; border: 1px solid var(--border); border-radius: 14px; background: var(--surface-1); }
.fn-numeros b { font-size: clamp(13px, 3.8vw, 17px); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.fn-pos { color: var(--delta-good); }
.fn-neg { color: var(--critical); }
.fn-cats { display: grid; gap: 12px; }
.fn-cat { display: grid; grid-template-columns: 1fr auto auto; gap: 4px 8px; align-items: center; }
.fn-cat a { color: inherit; text-decoration: none; font-weight: 600; }
.fn-cat b { font-variant-numeric: tabular-nums; }
.fn-barra { grid-column: 1 / -1; position: relative; height: 8px; border-radius: 4px; background: var(--grid); }
.fn-barra i { position: absolute; inset: 0 auto 0 0; border-radius: 4px; background: var(--accent); }
.fn-barra em { position: absolute; top: -3px; bottom: -3px; width: 2px; background: var(--text-secondary); }
.fn-cat.estourou .fn-barra i { background: var(--critical); }
.fn-lista { display: grid; gap: 2px; margin-top: 10px; }
.fn-item { display: grid; grid-template-columns: 44px 1fr auto; gap: 2px 10px; align-items: center; padding: 10px 4px; border-bottom: 1px solid var(--border); }
.fn-item select { grid-column: 2 / -1; font: inherit; font-size: 13px; padding: 4px 6px; border-radius: 8px; max-width: 220px; }
.fn-desc { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fn-item b { font-variant-numeric: tabular-nums; }
.fn-check { display: flex !important; align-items: center; gap: 8px; }
.notif-opcoes { display: grid; gap: 12px; margin-top: 12px; }
/* Passo a passo inicial (comecar.html) */
.cm-topo { display: flex; justify-content: space-between; align-items: center; }
.cm-pular-tudo { color: var(--text-secondary); font-size: 14px; }
.cm-progresso { height: 4px; border-radius: 2px; background: var(--grid); overflow: hidden; }
.cm-progresso i { display: block; height: 100%; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform .25s ease-out; }
.cm-passo h1 { margin: 4px 0 2px; font-size: 26px; }
.cm-escolha { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.cm-escolha legend { font-size: 13px; color: var(--text-secondary); margin-bottom: 6px; }
.cm-escolha label { display: flex !important; align-items: center; gap: 8px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px;
  font-size: 15px !important; color: var(--text-primary) !important; cursor: pointer; }
.cm-escolha label:has(input:checked) { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.cm-lista { flex-direction: column; }
.cm-lista label { align-items: flex-start; }
.cm-lista .sub { display: block; font-weight: 400; margin-top: 2px; }
.auth-form select { width: 100%; max-width: 100%; box-sizing: border-box; font: inherit; font-size: 16px; padding: 11px 12px; border-radius: 10px; border: 1px solid var(--border);
  background: var(--surface-1); color: var(--text-primary); }
.cm-ios { margin: 0; padding-left: 20px; display: grid; gap: 8px; line-height: 1.5; }
.cm-ios[hidden] { display: none; }
.cm-ajuda summary { cursor: pointer; color: var(--accent); font-size: 14px; }
.cm-mapa { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
/* Ler minha ficha (Treino → Fichas) */
.lf-botao { cursor: pointer; margin: 8px 0 4px; }
.cm-ajuda-link { color: var(--accent); font-size: 14px; }
.lf-ficha { margin: 12px 0; }
.lf-ficha ul { margin: 6px 0 0; padding-left: 18px; display: grid; gap: 4px; }
/* Conectar agenda (Treino → Semana e passo a passo) */
.ag-conectar { display: grid; gap: 8px; margin: 8px 0 12px; }
.ag-conectar a.ac-botao { display: flex; justify-content: center; align-items: center; gap: 8px; padding: 11px; border-radius: 12px;
  border: 1px solid var(--border); background: var(--page); color: var(--text-primary); text-decoration: none; font-weight: 600; }
.ag-conectar p { margin: 0; display: flex; align-items: center; gap: 8px; }
.ag-ical summary, .cm-ajuda summary { cursor: pointer; color: var(--accent); font-size: 14px; }
.cm-mapa li { display: grid; grid-template-columns: 24px 1fr; gap: 12px; align-items: start; }
.cm-mapa .i { width: 22px; height: 22px; color: var(--accent); margin-top: 2px; }
.cm-mapa .sub { display: block; margin-top: 2px; }
.cm-acoes { display: grid; gap: 8px; justify-items: center; }
.cm-acoes .primario { width: 100%; }
.cm-acoes .ac-link { background: none; border: 0; padding: 8px 16px; font: inherit; font-size: 15px; color: var(--text-secondary); cursor: pointer; }
.notif-opcoes select { width: auto; padding: 4px 8px; }
.barra { grid-template-columns: repeat(5, 1fr); }

/* Casal: "Eu | par" e só leitura */
.ver-par { display: flex; gap: 2px; padding: 2px; border: 1px solid var(--border); border-radius: 999px; font-size: 13px; }
.ver-par a { padding: 4px 10px; border-radius: 999px; color: inherit; text-decoration: none; }
.ver-par a.on { background: var(--accent-fill); color: #fff; font-weight: 700; }
body.so-leitura main :is(button, input, select, textarea, form):not(.ac-dia-nav *):not(.fn-mes *):not([data-hist]) { display: none !important; }
.casal-opcoes { display: grid; gap: 8px; margin: 10px 0; }
.casal-opcoes label { display: flex; align-items: center; gap: 8px; }
.ac-form textarea { width: 100%; font: inherit; font-size: 16px; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--border); background: var(--page); color: inherit; resize: vertical; }

/* Calculadoras públicas */
.calc { max-width: 720px; margin: 0 auto; padding: 8px 0 24px; }
.calc h1 { font-size: clamp(28px, 6vw, 40px); margin: 16px 0 8px; letter-spacing: -.02em; }
.calc-intro { color: var(--text-secondary); font-size: 17px; margin: 0 0 18px; }
.calc-form { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; padding: 18px; border: 1px solid var(--border); border-radius: 16px; background: var(--surface-1); }
.calc-form label { display: grid; gap: 4px; font-size: 13px; color: var(--text-secondary); }
.calc-form input, .calc-form select { font: inherit; font-size: 16px; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--border); background: var(--page); color: inherit; width: 100%; }
.calc-form [hidden] { display: none; }
.calc-largo, .calc-sexo { grid-column: 1 / -1; }
.calc-sexo { display: flex; gap: 18px; border: 0; padding: 0; margin: 0; }
.calc-sexo legend { font-size: 13px; color: var(--text-secondary); margin-bottom: 4px; }
.calc-sexo label { display: flex; align-items: center; gap: 6px; font-size: 16px; color: inherit; }
.calc-sexo input { width: auto; }
.calc-resultado { margin: 18px 0; padding: 18px; border: 1px solid var(--accent); border-radius: 16px; display: grid; gap: 12px; }
.calc-resultado[hidden] { display: none; }
.calc-resultado h2 { margin: 0; }
.calc-numeros { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; }
.calc-numeros div { display: grid; gap: 2px; padding: 10px; border-radius: 12px; background: var(--surface-1); }
.calc-numeros span { font-size: 12px; color: var(--text-secondary); }
.calc-numeros b { font-size: 18px; font-variant-numeric: tabular-nums; }
.calc-texto { margin-top: 24px; line-height: 1.6; color: var(--text-secondary); }
.calc-texto h2 { color: var(--text-primary); font-size: 20px; margin: 22px 0 8px; }
.calc-texto details { border-bottom: 1px solid var(--border); padding: 10px 0; }
.calc-texto summary { cursor: pointer; color: var(--text-primary); font-weight: 600; }
.calc-outras { margin-top: 20px; }

/* Painel do profissional */
.pro-lista { display: grid; gap: 12px; }
.pro-topo { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.pro-topo h2 { margin: 0; }
.pro-aluno.atencao { border-color: var(--warning); }
.pro-alerta { margin: 6px 0; color: var(--warning-ink); font-weight: 600; font-size: 14px; }
body.so-leitura #faixa-assinatura { display: none !important; }
.dt-opcao { display: flex; gap: 10px; align-items: flex-start; padding: 8px 0; cursor: pointer; }
.dt-opcao input { margin-top: 4px; }
.ac-toast .ac-link { margin-left: 8px; font-weight: 700; }
.ac-troca { display: grid; gap: 6px; margin: 8px 0; padding: 10px; border-radius: 12px; background: var(--page); }
[data-trocar] { min-width: 44px; min-height: 44px; margin: -10px -10px -10px 0; font-size: 1.1rem; }
.ac-par { display: grid; gap: 4px; padding-top: 8px; border-top: 1px dashed var(--border); }
.ac-rapido-par { display: grid; grid-template-columns: minmax(0, 1fr) auto 112px; gap: 8px; align-items: center; }
.ac-rapido-par input { font-size: 18px; font-weight: 600; text-align: center; }
.ac .ac-rapido-par [data-feito-par] { height: 44px; font-size: 15px; font-weight: 700; border-radius: 12px; }
.ac .ac-rapido-par [data-feito-par].feito { background: var(--good-fill); border-color: var(--good-fill); color: #fff; }
.ac-link-card { display: grid; gap: 4px; text-decoration: none; color: inherit; border-color: var(--accent); }

/* acabamento comum (19/10/2026): seleção, foco de teclado e controles nativos na cor do app */
::selection { background: color-mix(in srgb, var(--accent) 28%, transparent); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
input, select, textarea { accent-color: var(--accent); }
.barra a svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.barra a.on svg { stroke-width: 2.2; }
/* ícones de traço nos títulos e botões do app (sprite /icons/i.svg, mesmo desenho da barra); cor do texto, accent nos cards */
.i { width: 1.15em; height: 1.15em; flex: none; vertical-align: -.2em; fill: none; stroke: currentColor; stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round; }
.ac-card h2 .i, .ac-card h3 .i, .ac-card summary .i { color: var(--accent); }
.dt-bt > span .i { width: 1em; height: 1em; vertical-align: 0; }
.ac a.ac-botao.ac-primario, .ac button.ac-botao.ac-primario { background: var(--accent-fill); border-color: var(--accent-fill); color: #fff; }
.lp-faq details { padding: 12px 0; }
.lp-faq summary { list-style: none; display: flex; justify-content: space-between; gap: 12px; }
.lp-faq summary::-webkit-details-marker { display: none; }
.lp-faq summary::after { content: "+"; color: var(--muted); font-size: 20px; line-height: 1; }
.lp-faq details[open] summary::after { content: "−"; }

/* ===================== Ficha: componentes (redesign 25/10/2026) =====================
   Substitui o "visual moderno" de 20/10. Folha sem sombra sobre a mesa, cabeçalho de coluna em caixa alta condensada
   com régua de 2px, botões com contorno de caneta, abas como fichas de divisória, barra inferior sólida. */
html { -webkit-text-size-adjust: 100%; }
body { font-family: var(--f-texto); font-size: var(--t1); line-height: 1.45; -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale; font-variant-numeric: tabular-nums; }
::selection { background: var(--marca); color: var(--text-primary); }
h1, h2, h3, .hoje-ola, .topbar h1, .auth-caixa h1, .cm-passo h1 { font-family: var(--f-titulo); font-weight: 700;
  text-transform: uppercase; letter-spacing: .02em; text-wrap: balance; line-height: 1.05; }
td.num, th.num, .ac-resumo b, .ac-timer b, .plano .preco, .fn-numeros b, .num { font-family: var(--f-numero); }

/* topo: folha sólida com régua grossa embaixo */
.topbar { background: var(--surface-1); border-bottom: 2px solid var(--text-primary); }
.topbar h1 { font-size: 24px; line-height: 1; display: flex; align-items: center; gap: 8px; }
.topbar h1 .i { color: var(--accent); }
.topbar .logo { width: 28px; height: 28px; border-radius: 6px; margin-right: 0; }
.topbar .desc-voltar { border-radius: 8px; min-width: 44px; min-height: 44px; display: inline-flex; align-items: center;
  justify-content: center; gap: 6px; color: var(--text-primary); font-weight: 600; }
a.avatar { width: 36px; height: 36px; flex: none; border-radius: 50%; background: var(--text-primary); color: var(--surface-1);
  display: grid; place-items: center; font: 700 15px/1 var(--f-texto); text-decoration: none; text-transform: uppercase; }
a.avatar.on { outline: 2px solid var(--accent); outline-offset: 2px; }

/* abas do topo: divisórias de ficha, roláveis no celular */
#tabs { flex: 0 1 auto; margin-right: auto; gap: 6px; padding: 0; background: none; border-radius: 0; }
#tabs button { border-radius: 8px; padding: 8px 14px; min-height: 40px; font: 600 var(--t1) var(--f-texto); color: var(--text-secondary);
  border: 1.5px solid var(--border); background: var(--surface-1); transition: background .15s var(--ease), color .15s var(--ease); }
#tabs button:hover { background: var(--hover); }
#tabs button.active { background: var(--text-primary); border-color: var(--text-primary); color: var(--surface-1); font-weight: 700; box-shadow: none; }
@media (max-width: 820px) { #tabs { flex: 1 0 100%; margin-right: 0; } #tabs button { flex: none; } }

/* folhas (cartões): sem sombra, pauta fina, cabeçalho com régua grossa */
.ac { gap: 16px; }
.ac-card { border-radius: 12px; padding: 16px; gap: 10px; box-shadow: none; background: var(--surface-1); }
:where(.ac-card) { border: 1px solid var(--border); }
.ac-card > h2, .ac-card > summary > h2, .ac-card > header h2 { font-size: var(--t2); line-height: 1.1; display: flex; align-items: center; gap: 8px;
  padding-bottom: 8px; border-bottom: 2px solid var(--text-primary); }
.ac-card h2 .i { width: 20px; height: 20px; padding: 0; border-radius: 0; background: none; vertical-align: 0; }
.ac-card h3 { font-size: 17px; }
a.hoje-card { transition: border-color .15s var(--ease); }
a.hoje-card:hover { border-color: var(--baseline); }
.hoje-card .ac-link { padding: 4px 0 0; }
.hoje-ola { font-size: 30px; line-height: 1; margin: 8px 0 2px; }
.ac-barra { background: var(--trilho); border-radius: 2px; }
.ac-barra i { border-radius: 2px; }
.ac-barra i, .fn-barra i, .lp-barra i { transition: width .4s var(--ease); }
.sub { color: var(--muted); font-size: 13px; }

/* números soltos: colunas de ficha */
.ac-resumo { gap: 0; border-block: 2px solid var(--text-primary); background: var(--surface-1); border-radius: 0; }
.ac-resumo > div, .ac-lista > .ac-resumo > div { background: none; border: 0; border-radius: 0; box-shadow: none; padding: 10px 12px; }
.ac-resumo > div + div { border-left: 1px solid var(--border); }
.ac-resumo .sub:first-child { font: 700 12px var(--f-titulo); letter-spacing: .08em; text-transform: uppercase; }
.ac-resumo b { font-size: var(--t2); }

/* faixas de aviso: papel de recado */
.ac-faixa { border-radius: 10px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; background: var(--faixa);
  border: 1.5px solid var(--warning-ink); color: var(--text-primary); }
.ac-faixa a { text-decoration: underline; text-underline-offset: 3px; }

/* botões: contorno de caneta, 44px; principal cheio */
button, .ac-botao, a.sso, a.lp-cta, .chip { -webkit-tap-highlight-color: transparent; }
.ac button:not(.chip), button.primario, button.secundario, .lp-cta, .ac-botao, a.sso, .dt-bt {
  transition: background-color .15s var(--ease), border-color .15s var(--ease), color .15s var(--ease), transform .12s var(--ease); }
.ac button:not(.chip):not(:disabled):active, button.primario:active, button.secundario:active, .lp-cta:active, .ac-botao:active, a.sso:active, .dt-bt:active { transform: scale(.97); }
.ac button:not(.chip):not(.ac-link):not(.ac-primario):not(.feito):hover { background: var(--hover); }
.ac button:not(.chip) { border-radius: 10px; min-height: 44px; border-width: 1.5px; font-weight: 700; }
.ac button.ac-link { min-height: 0; border-width: 0; }
.ac a.ac-botao, .ac button.ac-botao, .ac label.ac-botao { border: 1.5px solid var(--text-primary); background: var(--surface-1); border-radius: 10px; }
button.primario, .lp-cta, .ac button.ac-primario, .ac .ac-primario, .ac .dt-bt.dt-principal { box-shadow: none; }
button.primario:hover, .lp-cta:hover, .ac button.ac-primario:hover { background: var(--text-primary); border-color: var(--text-primary); color: var(--surface-1); }
button.primario, button.secundario, a.sso { border-radius: 10px; min-height: 48px; }
button.secundario, a.sso { border: 1.5px solid var(--text-primary); }
.ac-faixa .ac-link, .ac-toast .ac-link { min-height: 0; }
.ac-link, .ac .ac-link { color: var(--accent); font-weight: 700; }

/* campos */
.ac input, .ac select, .ac textarea, .auth-form input:not([type="checkbox"]), .auth-form select, .calc-form input, .calc-form select,
.filtros-form input, .filtros-form select, .desc-busca input { border: 1.5px solid var(--baseline); border-radius: 8px; background: var(--surface-1);
  color: var(--text-primary); transition: border-color .15s var(--ease), box-shadow .15s var(--ease); }
.ac input:not([type="checkbox"]):not([type="radio"]):focus, .ac select:focus, .ac textarea:focus,
.auth-form input:not([type="checkbox"]):focus, .auth-form select:focus, .calc-form input:focus, .calc-form select:focus,
.filtros-form input:focus, .filtros-form select:focus, .desc-busca input:focus {
  outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); box-shadow: none; }
.ac-rapido input, .ac-rapido-par input { min-height: 48px; border-radius: 10px; font-family: var(--f-numero); font-size: var(--t2); }
::placeholder { color: var(--muted); opacity: 1; }

/* chips: etiquetas de divisória */
.chip { border-radius: 6px !important; border: 1.5px solid var(--border); }
.ac-chips .chip, .ac-linha .chip, .filtros-form .chip { transition: background-color .15s var(--ease), border-color .15s var(--ease), color .15s var(--ease); }
.ac .chip.on, .filtros-form .chip.on, .chip.on { background: var(--text-primary); border-color: var(--text-primary); color: var(--surface-1); box-shadow: none; }

/* navegação do dia */
.ac-dia-nav { border-radius: 12px; box-shadow: none; border: 1px solid var(--border); background: var(--surface-1); }
.ac .ac-dia-nav button { border-radius: 10px; min-height: 44px; }

/* barra inferior: folha sólida, régua grossa em cima; ativa = grafite e traço mais grosso */
.barra { background: var(--surface-1); border-top: 2px solid var(--text-primary); padding-top: 6px; -webkit-backdrop-filter: none; backdrop-filter: none; }
.barra a { gap: 2px; padding: 4px 0 2px; font: 600 12px var(--f-texto); color: var(--muted); transition: color .1s, transform .1s var(--ease); }
.barra a svg { box-sizing: content-box; padding: 3px 0; border-radius: 0; background: none !important; }
.barra a.on { color: var(--text-primary); font-weight: 700; }
.barra a.on svg { stroke-width: 2.4; }
@media (min-width: 821px) { .barra { border: 2px solid var(--text-primary); border-radius: 14px; box-shadow: none; width: 440px; } }

/* avisos flutuantes e timer: grafite sobre a folha */
.ac-toast { border-radius: 12px; box-shadow: var(--shadow-float); }
.ac-timer { border-radius: 14px; box-shadow: var(--shadow-float); background: var(--text-primary); color: var(--surface-1); }
.ac-timer b { font-size: var(--t3); line-height: 1; min-width: 96px; }
.ac-timer button { min-height: 44px; min-width: 52px; padding: 0 12px; font-weight: 700; }

/* login, cadastro e passo a passo */
.auth-caixa { gap: 16px; }
body.doc h1 { font-size: 34px; }
body.doc h2 { font-size: var(--t2); margin-top: 28px; }
.auth-caixa h1, .cm-passo h1 { font-size: 34px; line-height: 1; overflow-wrap: anywhere; }
.auth-caixa h1 b, .auth-caixa h1 strong { text-transform: none; }
.cm-escolha label { transition: border-color .15s var(--ease), box-shadow .15s var(--ease); }
.plano { border: 1.5px solid var(--border); border-radius: 12px; background: var(--surface-1); transition: border-color .15s var(--ease), box-shadow .15s var(--ease); }
.plano.destaque { border-color: var(--text-primary); }

/* landing (topo) */
.lp-topo { position: sticky; top: 0; z-index: 10; margin: 0 -16px; padding: 12px 16px; background: var(--page);
  border-bottom: 2px solid var(--text-primary); }
.lp-topo nav a:not(.lp-cta) { color: var(--text-primary); min-height: 44px; display: inline-flex; align-items: center; }
.lp-topo nav a.lp-cta:hover { color: var(--surface-1); }
.lp-topo nav a.lp-cta { color: #fff; min-height: 44px; display: inline-flex; align-items: center; }
.plano .preco { font-size: clamp(17px, 5vw, 22px); letter-spacing: -.02em; }
@media (max-width: 440px) { .planos { grid-template-columns: 1fr; } }
.lp-frag, .lp-calc, .lp-precos .plano { border-radius: 12px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}
.ac button.ac-apagar-foto { min-height: 0; }
.ac button.ac-apagar-foto:hover { background: rgb(0 0 0 / .6); }

/* cada tela de módulo escreve na cor do módulo (texto/borda em --accent, botão cheio em --accent-fill com texto branco) */
body[data-mod="dieta"] { --accent: var(--m-dieta); --accent-fill: #2c6e33; }
body[data-mod="grana"] { --accent: var(--m-grana); --accent-fill: #7a4d00; }
body[data-mod="lazer"] { --accent: var(--m-lazer); --accent-fill: #6a3c9e; }

/* Treino: o exercício atual (1º sem "Feito") em destaque para usar com uma mão; os feitos recolhem e ganham carimbo.
   Só CSS: a ordem e a classe .feito já vêm do treino.js. */
.ac-ex:not(.feito):not(.ac-ex:not(.feito) ~ .ac-ex) { border: 2px solid var(--accent); }
.ac-ex:not(.feito):not(.ac-ex:not(.feito) ~ .ac-ex) .ac-ex-top b { font: 700 26px/1.05 var(--f-titulo); text-transform: uppercase; letter-spacing: .01em; }
.ac-ex:not(.feito):not(.ac-ex:not(.feito) ~ .ac-ex) .ac-rapido input { min-height: 64px; font-size: var(--t3); font-weight: 700; }
.ac-ex:not(.feito):not(.ac-ex:not(.feito) ~ .ac-ex) .ac-rapido [data-feito] { min-height: 64px; font-size: 18px;
  background: var(--accent-fill); border-color: var(--accent-fill); color: #fff; }
.ac-ex.feito .ac-dica, .ac-ex.feito .ac-rodape, .ac-ex:not(.feito) ~ .ac-ex:not(.feito) .ac-dica { display: none; }
.ac-ex.feito { padding-block: 12px; }
.ac-ex .chip.ac-ok { font: 700 12px/1 var(--f-titulo) !important; letter-spacing: .1em; text-transform: uppercase; padding: 4px 7px !important;
  border: 2px solid var(--accent) !important; color: var(--accent) !important; background: none; transform: rotate(-6deg); }
.ac-ex.feito { border-color: var(--border); }
@media (prefers-reduced-motion: no-preference) {
  .ac-ex.feito .chip.ac-ok { animation: carimbar .45s cubic-bezier(.2, .9, .3, 1.4) both; }
  @keyframes carimbar { from { transform: rotate(-6deg) scale(1.7); opacity: .2; } }
}

/* Hoje: a ficha do dia. Uma linha por módulo: aba de divisória na cor do módulo, valor em coluna à direita, ação na linha */
.hj-ficha { background: var(--surface-1); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }
.hj-colunas { display: grid; grid-template-columns: 1fr auto; padding: 8px 16px; border-bottom: 2px solid var(--text-primary);
  font: 700 13px var(--f-titulo); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.hj-linha { --cor: var(--text-primary); display: grid; grid-template-columns: 4.6rem minmax(0, 1fr) auto; gap: 4px 10px; padding: 14px 16px;
  border-bottom: 1px solid var(--border); align-items: baseline; }
.hj-linha:last-child { border-bottom: 0; }
.hj-mod { justify-self: start; grid-column: 1; grid-row: 1; font: 700 13px/1 var(--f-titulo); letter-spacing: .1em; text-transform: uppercase;
  color: var(--no-cor); background: var(--cor); padding: 5px 8px 4px; border-radius: 5px; }
.hj-valor { grid-column: 3; grid-row: 1 / span 2; align-self: start; text-align: right; font: 700 var(--t2)/1.1 var(--f-numero); }
.hj-valor small { display: block; font: 400 12px var(--f-texto); color: var(--muted); }
.hj-valor.hj-passou { color: var(--critical); }
.hj-oque { grid-column: 2; grid-row: 1; font-weight: 700; color: var(--text-primary); text-decoration: none; }
.hj-oque:hover { text-decoration: underline; text-underline-offset: 3px; }
.hj-det { grid-column: 2; color: var(--muted); font-size: 13px; }
.hj-det b { color: var(--text-primary); }
.hj-marca { background: linear-gradient(transparent 55%, var(--marca) 55%); padding: 0 2px; font-family: var(--f-numero); }
.hj-acoes { grid-column: 2 / -1; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 8px; }
.ac .hj-acoes .ac-botao, .ac .hj-acoes button { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 14px;
  border: 1.5px solid var(--cor); color: var(--cor); background: transparent; font-weight: 700; border-radius: 10px; text-decoration: none; cursor: pointer; }
.ac .hj-acoes .ac-primario { background: var(--cor); color: var(--no-cor); }
.hj-retro { margin-bottom: 4px; }
.hj-retro .hj-valor { grid-row: 1; }
.hj-retro-fim .hj-oque { grid-column: 1 / -1; }
.hj-retro-fim .hj-acoes { grid-column: 1 / -1; }
.hj-rodape { margin: 0; display: flex; flex-wrap: wrap; gap: 6px 18px; padding: 10px 2px; border-block: 2px solid var(--text-primary); color: var(--muted); font-size: 13px; }
.hj-rodape b { color: var(--text-primary); font-family: var(--f-numero); }
@media (max-width: 820px) { .topbar a.avatar { margin-left: auto; } }

/* Dieta: o topo é uma ficha pautada (kcal à direita, uma linha por macro com marca-texto proporcional) */
#resumo.ac-card:has(.dt-ficha) { padding: 0; overflow: hidden; }
.dt-linha { display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: 2px 12px; padding: 10px 16px; border-bottom: 1px solid var(--border); }
.dt-linha b { font-size: var(--t1); }
.dt-kcal-linha b { font-size: var(--t3); line-height: 1; }
.dt-kcal-linha.passou b { color: var(--critical); }
.dt-marca { grid-column: 1 / -1; height: 8px; border-radius: 2px; background: linear-gradient(90deg, var(--marca) var(--p), var(--trilho) var(--p)); }
.dt-ficha .dt-dica { margin: 0; padding: 10px 16px; }

/* Conta e Treino: uma folha só, seções pautadas em vez de pilha de cartões */
body:has(.topbar a.avatar.on) main.ac { gap: 0; }
body:has(.topbar a.avatar.on) main.ac > .ac-card { border-radius: 0; border-top-width: 0; }
body:has(.topbar a.avatar.on) main.ac > .ac-card:first-of-type, body:has(.topbar a.avatar.on) main.ac > .ac-faixa + .ac-card { border-top-width: 1px; border-radius: 12px 12px 0 0; margin-top: 12px; }
body:has(.topbar a.avatar.on) main.ac > .ac-card:last-of-type { border-radius: 0 0 12px 12px; }
#exs.ac-lista { gap: 0; }
#exs > .ac-ex { border-radius: 0; border-top-width: 0; }
#exs > .ac-ex:first-child { border-top-width: 1px; border-radius: 12px 12px 0 0; }
#exs > .ac-ex:last-child { border-radius: 0 0 12px 12px; }
#exs > .ac-ex:not(.feito):not(.ac-ex:not(.feito) ~ .ac-ex) { border-width: 2px; margin-block: -1px; position: relative; z-index: 1; }
.hj-retro .hj-colunas span:first-child { color: var(--text-primary); }
.hj-retro-fim { padding-top: 14px; }
.hj-semana { display: flex; gap: 3px; margin-left: auto; }
.hj-semana i { width: 22px; height: 24px; border: 1.5px solid var(--cor); border-radius: 3px; display: grid; place-items: center;
  font: 700 13px/1 var(--f-titulo); color: var(--cor); font-style: normal; }
.hj-semana i.f { background: var(--cor); color: var(--no-cor); }
.hj-semana i.h { outline: 2px solid var(--text-primary); outline-offset: 1px; }

/* ===================== velocidade e toque (20/10/2026) ===================== */
/* troca de tela: topo e barra inferior ficam parados, o conteúdo troca com um fade curto (Chrome 126+, Safari 18.2+) */
@view-transition { navigation: auto; }
.topbar { view-transition-name: topo; }
.barra { view-transition-name: barra; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .12s; }
::view-transition-group(topo), ::view-transition-group(barra) { animation-duration: 0s; }
@media (prefers-reduced-motion: reduce) { @view-transition { navigation: none; } }

/* esqueleto até o 1º desenho (o JS troca o conteúdo do contêiner) */
.esqueleto { min-height: 132px; border-radius: 20px; background: var(--trilho); position: relative; overflow: hidden; }
.esqueleto.baixo { min-height: 128px; border-radius: 14px; }
.esqueleto.linha { min-height: 34px; border-radius: 10px; }
.esqueleto::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--surface-1) 55%, transparent), transparent);
  animation: brilho 1.1s ease-in-out infinite; }
@keyframes brilho { to { transform: translateX(100%); } }

/* toque: sem espera de toque duplo, retorno na hora */
a, button, label, summary, .chip, input[type="checkbox"], input[type="radio"] { touch-action: manipulation; }
button.ocupado, .ac-botao.ocupado { pointer-events: none; }
button.girando, .ac-botao.girando { color: transparent !important; position: relative; }
button.girando::after, .ac-botao.girando::after { content: ""; position: absolute; inset: 0; margin: auto; width: 16px; height: 16px;
  border-radius: 50%; border: 2px solid currentColor; border-color: var(--text-secondary) transparent var(--text-secondary) var(--text-secondary);
  animation: girar .7s linear infinite; }
button.primario.girando::after, .ac-primario.girando::after, [data-feito].feito.girando::after, .dt-principal.girando::after {
  border-color: #fff transparent #fff #fff; }
@keyframes girar { to { transform: rotate(360deg); } }
.barra a { transition: color .1s, transform .1s var(--ease); }
.barra a:active { transform: scale(.92); }
/* linha de progresso no topo enquanto a próxima tela carrega */
body.indo::before { content: ""; position: fixed; z-index: 100; top: 0; left: 0; height: 3px; width: 100%;
  background: var(--accent); transform-origin: left; animation: indo 1.2s var(--ease) forwards; }
@keyframes indo { from { transform: scaleX(0); } to { transform: scaleX(.85); } }
@media (prefers-reduced-motion: reduce) { .esqueleto::after, body.indo::before { animation: none; } }

/* alinhamento (auditoria de 20/10/2026 em 320–430 px) */
.ac-linha #link-indicacao { flex: 1 1 160px; min-width: 0; text-overflow: ellipsis; }
.ac-form textarea[name="notas"] { min-height: 42px; field-sizing: content; max-height: 160px; }
.desc-filtros select, .desc-filtros input { font: inherit; font-size: 15px; color: var(--text-primary); background: var(--surface-1);
  border: 1px solid var(--border); border-radius: 10px; padding: 7px 10px; min-width: 84px; }
.calc-form label:has(select) { grid-column: 1 / -1; }
@media (max-width: 360px) { .planos { grid-template-columns: 1fr; } }
.plano .preco { font-size: clamp(18px, 5.6vw, 22px); }
@media (max-width: 420px) {
  .ac-tabela th, .ac-tabela td { padding: 6px 5px; }
  .ac-tabela th { letter-spacing: 0; }
  .ac-tabela .ac-barra { width: 56px; }
}
.ac-inline textarea[name="foco"] { flex: 1 1 100%; font: inherit; font-size: 16px; color: var(--text-primary); background: var(--page);
  border: 1px solid var(--border); border-radius: 10px; padding: 7px 9px; resize: none; field-sizing: content; min-height: 40px; }
@media (max-width: 400px) { #vol th:nth-child(4), #vol td:nth-child(4) { display: none; } }  /* a barra some; ficam os números */
@media (max-width: 340px) {
  #dias th:nth-child(6), #dias td:nth-child(6) { display: none; }  /* fibra fica para telas maiores */
  .calc-form select { font-size: 14px; }
}

/* ===================== landing: o app ao vivo no hero (20/10/2026) =====================
   Celular em HTML com as classes do app, numa tela de 375 px reduzida por --k (landing.js mede). Cada cena tem o
   estado FINAL como estilo base e só anima o "de onde vem" (fill both): com prefers-reduced-motion, sem JS ou parada,
   aparece completa. Textos e números iguais aos do app e do "Um dia com o Tudin". */
.lp-hero { padding-top: 24px; }
.demo { display: grid; gap: 10px; justify-items: center; --dur: 3.6s; }
.demo-moldura { width: min(250px, 64vw); margin: 0; }
.demo-vidro { position: relative; aspect-ratio: 375 / 720; border-radius: 33px; overflow: hidden; background: var(--page); }
.demo-tela { position: absolute; top: 0; left: 0; width: 375px; height: 720px; transform: scale(var(--k, .648)); transform-origin: 0 0;
  text-align: left; pointer-events: none; }
.demo-tela .topbar, .demo-tela .barra { view-transition-name: none; position: absolute; }
.demo-tela .topbar { top: 0; left: 0; right: 0; padding: 14px 18px 10px; }
.demo-tela .barra { left: 0; right: 0; bottom: 0; width: auto; transform: none; border: 0; border-top: 1px solid var(--border);
  border-radius: 0; box-shadow: none; padding-bottom: 10px; grid-template-columns: repeat(5, 1fr); }
.demo-tela .barra a svg { padding-inline: 14px; }
.demo-corpo { position: absolute; top: 62px; left: 0; right: 0; padding: 12px 16px; display: grid; gap: 12px; max-width: none; }
.cena { position: absolute; inset: 0; opacity: 0; transition: opacity .35s var(--ease); }
.cena.ativa { opacity: 1; }
.demo-campo { display: grid; place-items: center; height: 44px; border-radius: 12px; border: 1px solid var(--border); background: var(--page);
  font-size: 18px; font-weight: 600; font-variant-numeric: tabular-nums; }
.demo-campo > * { grid-area: 1 / 1; }
.demo-botao { display: grid; place-items: center; height: 44px; padding: 0 14px; border-radius: 12px; border: 1px solid var(--border);
  background: var(--page); font-size: 15px; font-weight: 700; }
.demo-botao > * { grid-area: 1 / 1; }
.demo-feito { display: flex; align-items: center; justify-content: center; }
.demo-feito { background: var(--good-fill); border-color: var(--good-fill); color: #fff; }
.demo-feito::before { content: ""; display: inline-block; width: 1em; height: 1em; margin-right: .3em; vertical-align: -.15em; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat; }
.demo-ex { border-color: color-mix(in srgb, var(--good) 55%, var(--border)); }
.demo-ex .chip.ac-ok { display: inline-block; }
.demo-ex .chip.ac-musc { display: none; }
.demo-de { opacity: 0; }
.demo-enche { width: var(--ate); }
.demo-quero { justify-self: start; height: 38px; margin-top: 4px; }
.demo-quero .demo-para { color: var(--delta-good); }
/* prato desenhado (formas, não foto): arroz, feijão, frango e salada */
.demo-foto { display: grid; gap: 8px; justify-items: center; }
.demo-prato { position: relative; width: 150px; aspect-ratio: 1; border-radius: 50%; background: #f4f1ea; box-shadow: inset 0 0 0 10px #e6e1d6;
  overflow: hidden; }
.demo-prato i { position: absolute; border-radius: 50%; }
.p-arroz { width: 62px; height: 52px; left: 24px; top: 26px; background: #fbf8ef; box-shadow: inset 0 0 0 2px #ece6d6; }
.p-feijao { width: 54px; height: 48px; left: 74px; top: 30px; background: #6b3f2a; }
.p-frango { width: 70px; height: 42px; left: 40px; top: 80px; background: #d9a066; border-radius: 40% !important; }
.p-salada { width: 38px; height: 38px; left: 96px; top: 78px; background: #4f9a3a; }
.demo-scan { position: absolute; left: 0; right: 0; top: 100%; height: 3px; background: var(--accent); opacity: 0;
}
.demo-lendo { display: inline-flex; gap: 6px; align-items: center; }
.demo-ref { display: grid; gap: 10px; }
.demo-poster { flex: none; width: 92px; aspect-ratio: 2 / 3; border-radius: 8px; background: #2f3a2c; color: #f2efe6;
  font: 700 15px/1.05 Georgia, serif; padding: 10px; display: flex; align-items: flex-end; }
.demo-filme .desc-nome { font-size: 17px; }
.demo-estoura .fn-barra i { background: var(--critical); }
.demo-import { position: static; transform: none; justify-self: center; }

/* indicador das cenas (tipo stories): toca para pular */
.demo-passos { display: flex; gap: 6px; width: min(250px, 64vw); }
.demo-passos button { flex: 1; display: grid; gap: 5px; padding: 0; border: 0; background: none; font: inherit; font-size: 12px;
  font-weight: 600; color: var(--text-secondary); cursor: pointer; text-align: left; }
.demo-passos button i { display: block; height: 3px; border-radius: 2px; background: var(--trilho); overflow: hidden; }
.demo-passos button i::after { content: ""; display: block; height: 100%; width: 0; background: var(--accent); }
.demo-passos button.visto i::after { width: 100%; }
.demo-passos button.on { color: var(--text-primary); }
.demo-passos button.on i::after { animation: passo var(--dur) linear forwards; }
.demo.parada .demo-passos button.on i::after { animation-play-state: paused; }
@keyframes passo { from { width: 0; } to { width: 100%; } }

/* linha do tempo de cada cena (atrasos em segundos depois que a cena entra) */
@keyframes surge { from { opacity: 0; transform: translateY(8px); } }
@keyframes estala { from { opacity: 0; transform: scale(.6); } }
@keyframes enche { from { width: 0; } }
@keyframes visivel { from, to { opacity: 1; } }
@keyframes oculto { from, to { opacity: 0; } }
@keyframes aperta { 0%, 92% { background: var(--page); border-color: var(--border); color: var(--text-primary); }
  96% { transform: scale(.92); } }
@keyframes feito-tarde { 0%, 95% { border-color: var(--border); } }
@keyframes escaneia { 0% { top: 0; opacity: 1; } 90% { top: 100%; opacity: 1; } 100% { top: 100%; opacity: 0; } }
@keyframes estoura { 0%, 75% { background: var(--accent); } }
@keyframes treme { 0%, 100% { transform: none; } 25% { transform: translateX(-3px); } 75% { transform: translateX(3px); } }
.cena.ativa .demo-enche { animation: enche 1s var(--ease) .3s both; }
.cena.ativa .demo-series span { animation: estala .3s var(--ease) both; }
.cena.ativa .demo-series span:nth-child(1) { animation-delay: .35s; }
.cena.ativa .demo-series span:nth-child(2) { animation-delay: .6s; }
.cena.ativa .demo-series span:nth-child(3) { animation-delay: .85s; }
.cena.ativa .demo-dica { animation: surge .4s var(--ease) 1.25s both; }
.cena.ativa .demo-ex .demo-de { animation: visivel 2s steps(1); }
.cena.ativa .demo-ex .demo-para { animation: oculto 2s steps(1); }
.cena.ativa .demo-feito { animation: aperta 2.7s linear both; }
.cena.ativa .demo-feito::before { animation: oculto 2.7s steps(1); }
.cena.ativa .demo-ex { animation: feito-tarde 2.8s linear both; }
.cena.ativa .demo-ex .chip.ac-ok { animation: oculto 2.8s steps(1); }
.cena.ativa .demo-scan { animation: escaneia 1.1s ease-in-out .15s both; }
.cena.ativa .demo-lendo { animation: visivel 1.3s steps(1); }
.demo-lendo { opacity: .55; }
.cena.ativa .demo-ref { animation: surge .35s var(--ease) 1.1s both; }
.cena.ativa .demo-item { animation: surge .3s var(--ease) both; }
.cena.ativa .demo-item:nth-child(2) { animation-delay: 1.3s; }
.cena.ativa .demo-item:nth-child(3) { animation-delay: 1.55s; }
.cena.ativa .demo-item:nth-child(4) { animation-delay: 1.8s; }
.cena.ativa .demo-item:nth-child(5) { animation-delay: 2.05s; }
.cena.ativa .demo-item:nth-child(6) { animation-delay: 2.4s; }
.cena.ativa .demo-import { animation: surge .35s var(--ease) .15s both; }
.cena.ativa .fn-numeros { animation: surge .35s var(--ease) .45s both; }
.cena.ativa .fn-cat .demo-enche { animation-delay: .8s; }
.cena.ativa .demo-estoura .demo-enche { animation: enche 1s var(--ease) .9s both, estoura 2.2s linear both; }
.cena.ativa .demo-estoura { animation: treme .3s linear 2.1s 2; }
.cena.ativa .demo-filme { animation: surge .45s var(--ease) .15s both; }
.cena.ativa .demo-filme .desc-chips { animation: surge .35s var(--ease) .65s both; }
.cena.ativa .demo-quero { animation: aperta 2.6s linear both; }
.cena.ativa .demo-quero .demo-de { animation: visivel 2.6s steps(1); }
.cena.ativa .demo-quero .demo-para { animation: oculto 2.6s steps(1); }
@media (min-width: 900px) { .lp-hero .demo-moldura, .demo-passos { width: 270px; } }
@media (prefers-reduced-motion: reduce) { .demo *, .demo *::before, .demo *::after { animation: none !important; } }

/* "Um dia com o Tudin": entra ao rolar (só com landing.js; sem ele, tudo aparece) */
.anima .lp-momento { opacity: 0; transform: translateY(16px); transition: opacity .5s var(--ease), transform .5s var(--ease); }
.anima .lp-momento.visto { opacity: 1; transform: none; }
.anima .lp-momento .lp-barra i { transition: width .9s var(--ease) .25s; }
.anima .lp-momento:not(.visto) .lp-barra i { width: 0 !important; }
.anima .lp-momento .lp-series span { transition: opacity .3s, transform .3s var(--ease); }
.anima .lp-momento:not(.visto) .lp-series span { opacity: 0; transform: scale(.7); }
.anima .lp-momento.visto .lp-series span:nth-child(2) { transition-delay: .15s; }
.anima .lp-momento.visto .lp-series span:nth-child(3) { transition-delay: .3s; }
@media (prefers-reduced-motion: reduce) { .anima .lp-momento { opacity: 1; transform: none; } }

/* Lazer: Assistir / Aonde ir / Ler / Ouvir (controle segmentado no topo da tela) e o que é só de Ler e Ouvir */
.lazer-nav { display: flex; gap: 2px; padding: 3px; border-radius: 12px; background: var(--trilho); }
.lazer-nav a { flex: 1; text-align: center; padding: 7px 8px; border-radius: 9px; color: var(--text-secondary); text-decoration: none; font-weight: 500; }
.lazer-nav a[aria-current] { background: var(--seg-ativo); color: var(--text-primary); font-weight: 600; box-shadow: var(--shadow-card); }
.ler-capa { aspect-ratio: 2 / 3; }
.ouvir-capa { aspect-ratio: 1; height: auto; align-self: flex-start; }
.progresso { height: 6px; border-radius: 3px; background: var(--trilho); overflow: hidden; }
.progresso > span { display: block; height: 100%; background: var(--accent-fill); }
.ler-pagina { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.ler-pagina input { width: 5.5em; }
.lazer-par { display: grid; gap: 6px; }
.lazer-par ul { margin: 0; padding-left: 18px; }
.ler-meta { display: grid; gap: 8px; }
.ler-meta form { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.ler-meta input { width: 5em; }
.lazer-par[hidden] { display: none; }
/* tela de instalar no celular (comum.js telaInstalar): tela cheia por cima do app */
.instalar-tela { width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; border: 0; padding: max(24px, env(safe-area-inset-top)) 20px max(24px, env(safe-area-inset-bottom));
  background: var(--page); color: var(--text-primary); overflow-y: auto; }
.instalar-tela::backdrop { background: var(--page); }
.instalar-tela form { max-width: 420px; margin: 0 auto; }
.instalar-tela h1 { margin: 12px 0 0; font-size: 26px; }
.instalar-tela p { margin: 0; line-height: 1.5; color: var(--text-secondary); }
.instalar-tela .cm-ios { margin: 4px 0 8px; }
/* histórico de carga (tocar no nome do exercício) */
.ac button.ac-nome { all: unset; cursor: pointer; text-decoration: underline dotted var(--muted); text-underline-offset: 3px; }
.ac button.ac-nome:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
.ac-hist { margin: auto; width: min(520px, calc(100vw - 32px)); max-height: 85vh; padding: 16px; border: 1px solid var(--border); border-radius: 16px;
  background: var(--surface-1); color: inherit; }
.ac-hist::backdrop { background: rgb(0 0 0 / .45); }
.ac-hist-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.ac-hist-top h2 { font-size: 16px; margin: 0; }
.ac-pt.ac-rec, .ac-pt-l.ac-rec { fill: var(--good); background: var(--good); }
.ac-hist-lista { list-style: none; margin: 8px 0 0; padding: 0; }
.ac-hist-lista li { display: grid; grid-template-columns: 3.5em minmax(0, 1fr); gap: 8px; padding: 8px 0; border-top: 1px solid var(--grid); }
.ac-hist-lista li > span { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: baseline; }

/* Ficha nas telas que entraram junto (Ler/Ouvir, tela de instalar, histórico de carga): divisórias, régua grossa, recorde em vermelho */
.lazer-nav { gap: 6px; padding: 0; background: none; border-radius: 0; }
.lazer-nav a { border: 1.5px solid var(--border); border-radius: 8px; background: var(--surface-1); min-height: 40px; display: grid; place-items: center; font-weight: 600; }
.lazer-nav a[aria-current] { background: var(--text-primary); border-color: var(--text-primary); color: var(--surface-1); box-shadow: none; font-weight: 700; }
.progresso { border-radius: 2px; }
.progresso > span { background: var(--marca); }
.instalar-tela h1 { font-size: 34px; line-height: 1; }
.ac-hist { border: 2px solid var(--text-primary); border-radius: 12px; }
.ac-hist-top { padding-bottom: 8px; border-bottom: 2px solid var(--text-primary); }
.ac-hist-top h2 { font-size: var(--t2); }
.ac-pt.ac-rec, .ac-pt-l.ac-rec { fill: var(--critical); background: var(--critical); }
.ac-hist-lista li { border-top-color: var(--border); }
.ac button.ac-nome { text-decoration-color: var(--baseline); }
.ler-meta input, .ler-pagina input { min-height: 44px; padding: 0 10px; font-family: var(--f-numero); font-size: var(--t1); }

/* desfazer risca: o que o "Feito" desmarcou fica riscado no card até a próxima ação */
.ac-desfeito { margin: 0; color: var(--muted); font-size: 13px; }
.ac-desfeito s { text-decoration-thickness: 2px; text-decoration-color: var(--critical); color: var(--text-secondary); font-family: var(--f-numero); }
.ac-ex .chip.ac-ok::before { content: ""; display: inline-block; width: 1em; height: 1em; margin-right: .3em; vertical-align: -.15em; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat; margin-right: .2em; }

/* ajustes da revisão no Chrome (25/10/2026) */
[hidden] { display: none !important; }  /* .ac-faixa e outros com display próprio não podem aparecer vazios */
.ac-ex-top .chip { justify-self: start; }
.ac .ac-rapido [data-feito].feito, .ac .ac-rapido-par [data-feito-par].feito, .ac-serie [data-salvar].feito {
  background: var(--surface-1); border-color: var(--accent); color: var(--accent); }
.ac-dia { border-radius: 3px; }
.ac-dia.on { background: var(--m-treino); }
.ac-dia.hoje { outline-color: var(--text-primary); }
.ver-par { gap: 6px; padding: 0; border: 0; border-radius: 0; font-size: 14px; }
.ver-par a { padding: 6px 12px; border: 1.5px solid var(--border); border-radius: 8px; background: var(--surface-1); font-weight: 600; }
.ver-par a.on { background: var(--text-primary); border-color: var(--text-primary); color: var(--surface-1); }
.ac-medidas { gap: 0; border-block: 2px solid var(--text-primary); }
.ac-medidas > div { border: 0; border-radius: 0; border-bottom: 1px solid var(--border); padding: 10px 12px; }
.ac-medidas > div:not(:last-child) { border-right: 1px solid var(--border); }
.ac-medidas b { font-family: var(--f-numero); }
.ac-card > h2 .sub { font: 400 13px var(--f-texto); text-transform: none; letter-spacing: 0; color: var(--muted); margin: 0 0 0 4px; }
.ac-card > h2 + .ac-resumo, .ac-card > h2 + div > .ac-resumo:first-child { border-top: 0; }
#metas-v .ac-resumo { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); }
.ac-resumo b { white-space: normal; }
.ac-card > summary > b { font: 700 var(--t2)/1.1 var(--f-titulo); text-transform: uppercase; letter-spacing: .02em; display: inline-flex; gap: 8px; align-items: center; }
.ac-card > summary > b .i { color: var(--accent); }
label.casal-opcoes { display: flex; align-items: center; gap: 8px; }
.desc-filtros input[type="checkbox"] { min-width: 0; width: 20px; height: 20px; padding: 0; }
#fichas { gap: 0; }
#fichas > .ac-card { border-radius: 0; border-top-width: 0; }
#fichas > .ac-card:first-child { border-top-width: 1px; border-radius: 12px 12px 0 0; }
#fichas > .ac-card:last-child { border-radius: 0 0 12px 12px; }
.view:not(.ac) { max-width: 1120px; margin-inline: auto; width: 100%; }

/* ajustes da 2ª revisão no Chrome (25/10/2026) */
.ac-resumo > div { min-width: 0; }
.ac-resumo b, .ac-resumo .sub { overflow-wrap: anywhere; }
.ac-resumo { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); }
.ac-link-card { border-color: var(--border); }
.ac-link-card > b { font: 700 var(--t2)/1.1 var(--f-titulo); text-transform: uppercase; letter-spacing: .02em; display: inline-flex; gap: 8px; align-items: center; }
.ac-link-card > b .i { color: var(--accent); }
.ac input[type="checkbox"], .ac input[type="radio"] { width: auto; flex: none; min-height: 0; }
input[type="file"] { font: inherit; color: var(--muted); }
input[type="file"]::file-selector-button { font: 700 var(--t1) var(--f-texto); min-height: 40px; padding: 0 14px; margin-right: 10px; border: 1.5px solid var(--text-primary);
  border-radius: 8px; background: var(--surface-1); color: var(--text-primary); cursor: pointer; }
.desc-top .desc-card, .desc-card.marcado { border-color: var(--border); }
.desc-acoes button { border: 1.5px solid var(--text-primary); background: var(--surface-1); color: var(--text-primary); border-radius: 8px; min-height: 36px; font-weight: 700; }
.desc-acoes button:hover { background: var(--hover); }
.desc-acoes .avaliar button.on { background: var(--accent-fill); border-color: var(--accent-fill); color: #fff; }
.desc-acoes .chip { border-color: var(--border); color: var(--text-secondary); background: var(--surface-1); }
.ac-vazio { border: 1px solid var(--border); border-radius: 12px; background: var(--surface-1); color: var(--muted); }
/* Dieta: Foto / Código / Buscar viram a última linha da folha do topo */
#resumo.ac-card:has(.dt-ficha) { border-radius: 12px 12px 0 0; border-bottom: 0; }
#resumo.ac-card:has(.dt-ficha) + .dt-botoes { margin-top: -16px; padding: 12px 16px 16px; background: var(--surface-1); border: 1px solid var(--border);
  border-top: 2px solid var(--text-primary); border-radius: 0 0 12px 12px; display: flex; flex-wrap: wrap; gap: 8px; }
#resumo.ac-card:has(.dt-ficha) + .dt-botoes .dt-bt { display: inline-flex; flex-direction: row; gap: 6px; align-items: center; min-height: 44px; padding: 0 14px;
  border: 1.5px solid var(--accent); color: var(--accent); background: var(--surface-1); border-radius: 10px; font-weight: 700; white-space: nowrap; }
#resumo.ac-card:has(.dt-ficha) + .dt-botoes .dt-bt.dt-principal { background: var(--accent-fill); border-color: var(--accent-fill); color: #fff; }
#resumo.ac-card:has(.dt-ficha) + .dt-botoes .dt-bt > span { display: contents; }

/* ===================== 3ª revisão (capturas 390/1440, claro e escuro) ===================== */
/* links sem classe: caneta da tela, nunca o azul do navegador */
a { color: var(--accent); text-underline-offset: 3px; }
/* topo alinhado com a coluna de conteúdo no computador (Lazer é mais largo) */
@media (min-width: 821px) {
  .topbar { padding-inline: max(24px, calc((100% - 760px) / 2)); }
  body[data-mod="lazer"] .topbar { padding-inline: max(24px, calc((100% - 1120px) / 2)); }
}
.topbar { min-height: 64px; }
.topbar #tema { min-width: 44px; min-height: 44px; }
/* tile do ícone visível no escuro */
.topbar .logo, .auth-marca img { outline: 1px solid var(--border); }
.auth-marca { font: 700 24px var(--f-titulo); text-transform: uppercase; letter-spacing: .04em; }
/* chips de escolha (fichas, período, filtros): folha com traço, 40px; tags pequenas continuam pequenas */
.ac-chips .chip, #periodo .chip, .filtros-form .chip { min-height: 40px; background: var(--surface-1); display: inline-flex; align-items: center; }
.ac-chips .chip.on, #periodo .chip.on, .filtros-form .chip.on { background: var(--text-primary); color: var(--surface-1); }
.ac-ex .chip.ac-musc, .chip.ok { font-size: 12px; }
/* placeholder é dica, não valor: fonte do texto, cinza */
::placeholder { font-family: var(--f-texto); font-size: var(--t1); font-weight: 400; letter-spacing: 0; }
.ac-ex:not(.feito):not(.ac-ex:not(.feito) ~ .ac-ex) .ac-rapido input::placeholder { font-size: var(--t2); }
/* dica do exercício sem caixa aninhada */
.ac-dica { background: none !important; padding: 0 !important; border-radius: 0; color: var(--text-secondary); }
/* barra de progresso visível sobre a mesa */
.ac-barra { background: var(--border); }
/* resumos numéricos: a última célula ocupa o resto da linha (sem célula órfã) */
.ac-resumo { display: flex; flex-wrap: wrap; }
.ac-resumo > div { flex: 1 1 120px; }
/* medidas: sem régua dupla; "nenhuma medida" ocupa a linha */
.ac-medidas { border-top: 0; }
.ac-medidas > p, .ac-medidas > .sub:only-child { grid-column: 1 / -1; margin: 10px 0; }
/* eixos dos gráficos em rótulo pequeno */
.ac-graf text, .ac-eixo { font-family: var(--f-texto); font-size: 11px; }
/* details: indicador de abrir */
.ac-card > summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.ac-card > summary::after { content: ""; flex: none; width: 9px; height: 9px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translate(-2px, -2px); transition: transform .15s var(--ease); color: var(--muted); }
.ac-card[open] > summary::after { transform: rotate(-135deg); }
.ac-card:not([open]) { padding-block: 14px; }
/* tabelas: cabeçalho em rótulo condensado; barra do volume ocupa a coluna */
th { font: 700 12px var(--f-titulo); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
#vol .ac-barra { width: 100%; min-width: 80px; }
.ac-cal > .sub { font: 700 12px var(--f-titulo); letter-spacing: .06em; }
/* campos e selects com 44px (as séries continuam compactas) */
.ac :is(input:not([type="checkbox"]):not([type="radio"]):not([type="file"]), select) { min-height: 44px; }
.ac-serie :is(input, select) { min-height: 0; }
.fn-item select { min-height: 40px; font-size: var(--t1); }
/* Hoje: primário de cada linha cheio na tinta do módulo, sempre com texto branco (igual às telas de módulo) */
:root { --m-treino-fill: #2741b0; --m-dieta-fill: #2c6e33; --m-grana-fill: #7a4d00; --m-lazer-fill: #6a3c9e; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --m-treino-fill: #3550c9; --m-dieta-fill: #2f7a37; --m-grana-fill: #7a4d00; --m-lazer-fill: #6a3c9e; } }
:root[data-theme="dark"] { --m-treino-fill: #3550c9; --m-dieta-fill: #2f7a37; }
.ac .hj-acoes .ac-primario { background: var(--cor-fill, var(--cor)); border-color: var(--cor-fill, var(--cor)); color: #fff; }
.hj-rodape b { font-family: var(--f-numero); }
.hj-oque .num { font-family: var(--f-numero); }
/* Dieta */
#resumo.ac-card:has(.dt-ficha) + .dt-botoes .dt-bt { font-size: var(--t1); }
.dt-itens li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; align-items: baseline; }
.dt-itens li > .sub { text-align: right; white-space: nowrap; }
/* Finanças: troca de mês igual à barra de data; resumo e lista numa folha */
.fn-mes { display: grid; grid-template-columns: 44px 1fr 44px; align-items: center; background: var(--surface-1); border: 1px solid var(--border); border-radius: 12px;
  padding: 4px; text-align: center; }
.ac .fn-mes button { min-width: 44px; min-height: 44px; border: 0; background: none; }
#lista.fn-lista:not(:empty) { background: var(--surface-1); border: 1px solid var(--border); border-radius: 12px; padding: 4px 16px; }
#importar-form button[type="submit"], form#importar button:not([type]) { background: var(--accent-fill); border-color: var(--accent-fill); color: #fff; }
/* Lazer: hierarquia (seção do Lazer na 1ª linha do topo, abas da seção abaixo), botões e campos no padrão Ficha */
.topbar .lazer-nav { order: 2; flex: 1 1 auto; margin: 0; }
.topbar .lazer-nav a { min-height: 36px; padding: 4px 10px; font-size: 14px; }
.topbar #tabs { order: 3; }
.topbar .avatar { order: 2; }
@media (max-width: 820px) {
  .topbar .lazer-nav { flex: 1 0 100%; order: 3; }
  .topbar #tabs { order: 4; }
}
main.view:not(.ac) button:not(.chip):not(.ac-link):not([data-acao="previa"]) { font: 700 var(--t1) var(--f-texto); min-height: 40px; padding: 0 14px;
  border: 1.5px solid var(--text-primary); border-radius: 8px; background: var(--surface-1); color: var(--text-primary); cursor: pointer; }
main.view:not(.ac) input:not([type="checkbox"]):not([type="radio"]):not([type="search"]) { min-height: 40px; padding: 0 10px; border: 1.5px solid var(--baseline);
  border-radius: 8px; background: var(--surface-1); color: var(--text-primary); }
.cl-botoes [data-cl] { min-height: 48px; }
.cl-botoes [data-cl="naovi"] { color: var(--text-primary); }
.cl-botoes [data-cl="vi"] { color: #fff; background: var(--accent-fill) !important; border-color: var(--accent-fill) !important; }
.desc-acoes .avaliar button { min-height: 40px; }
.desc-erro + #destaque > .desc-erro { display: none; }  /* o mesmo aviso uma vez só */
.desc-pedido { color: var(--text-secondary); }
main.view:not(.ac) > h2, .cl-sugestoes > h2, .desc-secao { font: 700 var(--t2)/1.1 var(--f-titulo); text-transform: uppercase; letter-spacing: .02em;
  padding-bottom: 8px; border-bottom: 2px solid var(--text-primary); margin: 8px 0 12px; }
/* Começar: opções em folha com traço */
.cm-escolha label { background: var(--surface-1); border: 1.5px solid var(--border); }
.cm-escolha label:has(input:checked) { border-color: var(--text-primary); box-shadow: inset 0 0 0 1px var(--text-primary); }
/* Conta: botões de contorno não precisam da largura toda no computador */
@media (min-width: 821px) { .ac-card > .ac-botao, .ac-card > button.ac-botao { display: inline-flex; justify-content: center; align-items: center; width: auto; padding-inline: 20px; justify-self: start; } }
/* Landing: papel na mesa (sem sombra), cada cena na tinta do seu módulo */
.lp-frag, .lp-calc, .lp-precos .plano, .demo-moldura, .lp-print { box-shadow: none !important; }
.lp-series span, .demo-series span { background: var(--m-treino-fill); }
.cena[data-aba="/treino"] { --accent: var(--m-treino); --accent-fill: var(--m-treino-fill); }
.cena[data-aba="/dieta"] { --accent: var(--m-dieta); --accent-fill: var(--m-dieta-fill); }
.cena[data-aba="/financas"] { --accent: var(--m-grana); --accent-fill: var(--m-grana-fill); }
.cena[data-aba="/assistir"] { --accent: var(--m-lazer); --accent-fill: var(--m-lazer-fill); }
.demo-feito { background: var(--accent-fill) !important; border-color: var(--accent-fill) !important; }
.demo-campo, .demo-botao { background: var(--surface-1); border: 1.5px solid var(--baseline); }
.lp-momento:nth-of-type(1) h3 time { color: var(--m-treino); }
.lp-momento:nth-of-type(2) h3 time { color: var(--m-dieta); }
.lp-momento:nth-of-type(3) h3 time { color: var(--m-grana); }
.lp-momento:nth-of-type(3) .lp-barra:not(.lp-passou) i { background: var(--m-grana); }
.lp-momento:nth-of-type(4) h3 time { color: var(--m-lazer); }
.cena[data-aba="/financas"] .fn-cat:not(.demo-estoura) .fn-barra i { background: var(--m-grana); }
@media (min-width: 900px) { .lp-hero { max-width: 960px; margin-inline: auto; column-gap: 48px; } }
body[data-mod="lazer"] .topbar { flex-wrap: wrap; row-gap: 10px; }
body[data-mod="lazer"] .topbar #tabs { flex: 1 0 100%; }
.ac-dia-nav label::after { content: ""; display: inline-block; width: 6px; height: 6px; margin-left: 8px; vertical-align: 3px; border-right: 2px solid var(--muted);
  border-bottom: 2px solid var(--muted); transform: rotate(45deg); }
/* Lazer: a navegação da seção faz o papel do título (o h1 fica para leitor de tela) */
body[data-mod="lazer"] .topbar h1 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
/* Lazer no celular: seção e avatar na mesma linha; a seção ativa na tinta do Lazer (as abas da seção seguem em grafite) */
@media (max-width: 820px) {
  .topbar .lazer-nav { flex: 1 1 0; order: 1; min-width: 0; }
  .topbar .lazer-nav a { padding-inline: 4px; font-size: 13px; }
  .topbar .avatar { order: 2; }
  .topbar #tabs { order: 3; }
}
.topbar .lazer-nav a[aria-current] { background: var(--accent-fill); border-color: var(--accent-fill); color: #fff; }

/* ===================== 4ª revisão ===================== */
/* resumos: grade pautada (linhas e colunas iguais), a última linha ocupa a largura sem parecer órfã */
.ac-resumo { gap: 1px; background: var(--border); }
.ac-resumo > div, .ac-lista > .ac-resumo > div { background: var(--surface-1); border-left: 0 !important; }
.ac-resumo > div + div { border-left: 0; }
#numeros.ac-resumo { border: 1px solid var(--border); border-radius: 12px; overflow: hidden; border-block-width: 1px; }
/* rótulos de tabela e da frequência legíveis */
.ac-tabela th, .ac th, th { font: 700 13px var(--f-titulo) !important; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.ac .ac-cal > span.sub { font: 700 13px var(--f-titulo); letter-spacing: .04em; }
/* Histórico: proteína abaixo da meta em cinza, batida em verde (âmbar é das Finanças) */
.dt-baixo { color: var(--text-secondary); }
.dt-ok { color: var(--m-dieta); }
/* Como fazer / Meta e agenda: chevron desenhado */
.ac-notas summary::after { content: ""; display: inline-block; width: 6px; height: 6px; margin-left: 8px; vertical-align: 3px;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); font-size: 0; }
.ac-notas[open] summary::after { transform: rotate(-135deg); vertical-align: -1px; }
/* FAQ das calculadoras e da landing: mesmo chevron do app */
.calc-faq summary, .lp-faq summary, main details > summary:not(.ac-link) { list-style: none; cursor: pointer; }
.calc-faq summary::-webkit-details-marker, main details > summary::-webkit-details-marker { display: none; }
.lp-faq summary::after, .calc-faq summary::after { content: "" !important; flex: none; width: 8px; height: 8px; border-right: 2px solid var(--muted);
  border-bottom: 2px solid var(--muted); transform: rotate(45deg); margin: 0 4px 4px 0; }
.lp-faq details[open] summary::after, .calc-faq details[open] summary::after { content: "" !important; transform: rotate(-135deg); margin-bottom: 0; }
.calc-faq summary { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 0; font-weight: 700; }
/* fichas: nome e descrição numa linha que quebra, chevron à direita */
.ac-card > summary { flex-wrap: wrap; justify-content: flex-start; column-gap: 8px; }
.ac-card > summary::after { margin-left: auto; }
.ac-card > summary > b { white-space: nowrap; }
/* etiquetas de músculo e chips com ícone */
.ac-ex-top .chip { font-size: 12px !important; }
.ac-chips .chip { gap: 6px; }
.topbar #tema { min-width: 44px !important; min-height: 44px !important; padding: 0 !important; border: 1.5px solid var(--border) !important; }
/* Lazer: a seção é o título (texto condensado, ativa sublinhada na cor do Lazer); as abas da seção seguem como divisórias */
.topbar .lazer-nav { gap: 4px 14px; flex-wrap: wrap; }
.topbar .lazer-nav a { border: 0 !important; background: none !important; border-radius: 0; min-height: 44px; padding: 0 2px; font: 700 22px/1 var(--f-titulo);
  text-transform: uppercase; letter-spacing: .02em; color: var(--muted); box-shadow: none; flex: none; }
.topbar .lazer-nav a[aria-current] { color: var(--text-primary) !important; box-shadow: inset 0 -3px 0 var(--accent); }
@media (max-width: 820px) { .topbar .lazer-nav a { font-size: 18px; } }
.lazer-nav { max-width: none; }
/* Lazer: campos e botões na mesma altura */
main.view:not(.ac) button:not(.chip):not(.ac-link):not([data-acao="previa"]), main.view:not(.ac) input:not([type="checkbox"]):not([type="radio"]):not([type="search"]) { min-height: 44px; }
/* Finanças: descrição em até 2 linhas, sem pauta sobrando no fim; data da importação sem quebrar */
.fn-item .desc, .fn-item td .desc { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.fn-lista > :last-child { border-bottom: 0 !important; }
#importacoes li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: center; }
/* landing: barra da demo de treino em azul */
.cena .ac-barra i, .cena .demo-enche { background: var(--accent-fill); }

/* ===================== 5ª revisão ===================== */
/* avatar sempre na ponta direita do topo (a ordem do Lazer só vale no Lazer) */
.topbar .avatar { order: 9; margin-left: auto; }
body[data-mod="lazer"] .topbar .avatar { order: 2; }
@media (min-width: 821px) {
  .topbar { padding-inline: max(24px, calc((100% - 760px) / 2 + 24px)); }
  body[data-mod="lazer"] .topbar { padding-inline: max(24px, calc((100% - 1120px) / 2 + 24px)); }
}
/* ícones das setas do mesmo tamanho nas barras de data e de mês */
.fn-mes .i, .ac-dia-nav .i { width: 20px; height: 20px; }
/* Importar é a ação principal da aba */
#f-importar button:not([type="button"]) { background: var(--accent-fill); border-color: var(--accent-fill); color: #fff; }
/* títulos de seção do Lazer iguais aos cabeçalhos de folha */
.desc-h2 { font: 700 var(--t2)/1.1 var(--f-titulo); text-transform: uppercase; letter-spacing: .02em; padding-bottom: 8px;
  border-bottom: 2px solid var(--text-primary); margin: 8px 0 12px; }
.desc-h2:empty { display: none; }
/* metas da dieta: número cabe na célula */
#metas-v .ac-resumo b { font-size: 17px; white-space: nowrap; }
/* eixos do gráfico: o SVG é ampliado, então o texto vai em unidade do desenho */
.ac-graf text { font-size: 8px !important; }

/* ===================== 6ª revisão ===================== */
/* celular: avatar na linha do título; as abas vão para a linha de baixo, com fade indicando que rolam */
@media (max-width: 820px) {
  .topbar .avatar { order: 2; }
  .topbar #tabs { order: 3; -webkit-mask-image: linear-gradient(90deg, #000 88%, transparent); mask-image: linear-gradient(90deg, #000 88%, transparent); padding-right: 24px; }
}
.topbar { padding-block: 10px; }
/* summary: título e descrição juntos na linha de base, chevron centralizado à direita */
.ac-card > summary { flex-wrap: nowrap; align-items: baseline; }
.ac-card > summary::after { align-self: center; }
.ac-card > summary > .sub, .ac-card > summary > span:not(.i):not(.ac-link) { flex: 1 1 auto; min-width: 0; }
/* FAQ das calculadoras com o mesmo chevron */
.calc-texto summary { list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 0; font-weight: 700; cursor: pointer; }
.calc-texto summary::-webkit-details-marker { display: none; }
.calc-texto summary::after, .lp-faq summary::after { content: "" !important; flex: none; width: 8px; height: 8px; border-right: 2px solid var(--muted);
  border-bottom: 2px solid var(--muted); transform: rotate(45deg); margin: 0 4px 0 0; align-self: center; }
.calc-texto details[open] summary::after { transform: rotate(-135deg); }
/* Finanças: descrição em até 2 linhas, data na linha de base; resumo entre réguas como os outros */
.fn-item { align-items: baseline; }
.fn-item .fn-desc { white-space: normal; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; text-overflow: clip; }
#numeros.ac-resumo { border: 0; border-block: 2px solid var(--text-primary); border-radius: 0; }
/* Ler: campo da meta na altura do botão */
.ler-meta input, .ler-pagina input { height: 44px; box-sizing: border-box; }
/* Já li / Já vi / Curto: texto branco sobre a tinta do Lazer, alvo maior */
.cl-botoes [data-cl] { min-height: 48px !important; }
.cl-botoes [data-cl="vi"] { color: #fff !important; }
/* seções do Lazer com alvo de 44px */
.topbar .lazer-nav a { display: inline-flex; align-items: center; min-height: 44px; }
/* etiquetas e rótulos pequenos legíveis */
.ac-ex-top .chip.ac-musc { font-size: 13px !important; }
#freq .ac-cal > span, #freq .ac-cal .sub { font: 700 13px var(--f-titulo) !important; letter-spacing: .04em; }
.ac-graf text { font-size: 9px !important; }

/* ===================== 7ª revisão ===================== */
.ac-card > summary:has(> .ac-link) { align-items: center; }
.ac-card > summary > .ac-link { flex: none; margin-left: auto; }
.ac-card > summary:has(> .ac-link)::after { margin-left: 12px; }
/* fade das abas só quando elas rolam (comum.js marca .rola) */
@media (max-width: 820px) {
  .topbar #tabs:not(.rola) { -webkit-mask-image: none; mask-image: none; padding-right: 0; }
}
/* eixos do gráfico: o SVG encolhe no celular, então o texto sobe em unidades do desenho */
@media (max-width: 820px) { .ac-graf text { font-size: 13px !important; } }
#freq .ac-destaque { margin-bottom: 12px; }
.chip.ok { font-size: 13px; }
@media (min-width: 821px) { #sair, #f-feedback > button { width: auto; justify-self: start; padding-inline: 24px; } }

/* ===================== 8ª revisão ===================== */
.ac-medidas:has(> p) { border-bottom: 0; }
@media (min-width: 821px) { body.auth { place-items: center; } }
input[type="radio"], input[type="checkbox"] { accent-color: var(--text-primary); }

/* avaliação: em cartão estreito vira uma fileira de 3 ícones (o nome fica no title/aria-label); com espaço, ícone + texto */
.desc-card { container-type: inline-size; }
.desc-acoes .avaliar { display: inline-flex; flex-wrap: nowrap; gap: 6px; }
.desc-acoes .avaliar button { min-width: 44px; justify-content: center; }
@container (max-width: 460px) {
  .desc-acoes .avaliar-txt { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .desc-acoes .avaliar button { padding: 0 10px; }
}

/* ===================== pendentes (26/10/2026) ===================== */
/* cartões do Lazer: capa no tamanho dela (não estica com o texto) e duas colunas largas no computador */
.desc-poster { align-self: flex-start; height: auto; }
.desc-grid, .desc-top { grid-template-columns: repeat(auto-fill, minmax(min(100%, 420px), 1fr)); }
.desc-card > div:last-child, .desc-card .desc-info { min-width: 0; }
/* Começar: legenda alinhada com os rótulos */
.cm-escolha { padding: 0; margin: 0; border: 0; }
.cm-escolha legend { padding: 0; margin: 0 0 6px; }
/* Conta: parágrafos de apoio sem vão grande */
#assinatura p { margin: 4px 0; }
#assinatura p + p { margin-top: 8px; }
/* Treino → Semana: a coluna da barra ocupa o espaço da tabela de volume */
#vol table { width: 100%; }
#vol td:nth-child(4), #vol th:nth-child(4) { width: 40%; }
/* Ler/Assistir → Classificar: ações logo abaixo do cartão */
.cl-deck { min-height: 0; }
/* landing: rótulos das cenas não passam da largura do celular */
.demo-passos button { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }