/* Areté — mesmo sistema visual do plano original:
   preto, dourado, Bebas Neue nos títulos, DM Sans no texto, DM Mono nos rótulos, cantos retos e grades de 1px. */

@font-face { font-family: "Bebas Neue"; src: url(/fonts/bebas-neue-latin-400-normal.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "DM Sans"; src: url(/fonts/dm-sans-latin-300-normal.woff2) format("woff2"); font-weight: 300; font-display: swap; }
@font-face { font-family: "DM Sans"; src: url(/fonts/dm-sans-latin-400-normal.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "DM Sans"; src: url(/fonts/dm-sans-latin-500-normal.woff2) format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "DM Sans"; src: url(/fonts/dm-sans-latin-600-normal.woff2) format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "DM Mono"; src: url(/fonts/dm-mono-latin-400-normal.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "DM Mono"; src: url(/fonts/dm-mono-latin-500-normal.woff2) format("woff2"); font-weight: 500; font-display: swap; }

:root {
  --bg: #0a0a0a;
  --surface: #111111;
  --field: #181818;
  --border: #1e1e1e;
  --border2: #2a2a2a;
  --accent: #c8a96e;
  --accent2: #e8c87a;
  --text: #e8e4dc;
  --soft: #c0b8ac;
  --muted: #6b6560;
  --green: #5a8a5a;
  --danger: #c8503a;
  --display: "Bebas Neue", Impact, "Arial Narrow", sans-serif;
  --body: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "DM Mono", ui-monospace, "SFMono-Regular", Consolas, monospace;
  --r: 6px;      /* raio padrão: botões, campos, cartões */
  --r-sm: 4px;   /* raio pequeno: checkbox, dias do calendário, barras */
  color-scheme: dark;
}

/* ── Tokens derivados (tema + cor principal) ──
   Tudo que depende da cor principal é calculado a partir de --accent, então trocar a cor
   (dourado, rosa, azul…) recolore fundos tingidos, mapa de calor e brilhos sozinho. */
:root {
  --on-accent: #0a0a0a;                     /* texto/ícone sobre a cor principal */
  --hover: #121212; --bar: #0e0e0e; --bar-glass: rgba(10, 10, 10, .92);
  --placeholder: #4a4540; --faint: #3a3632; --rule: #1f1c17; --shadow: rgba(0, 0, 0, .72);
  --tint: color-mix(in srgb, var(--accent) 8%, var(--bg));
  --accent-line: color-mix(in srgb, var(--accent) 28%, var(--bg));
  --grad: linear-gradient(135deg, color-mix(in srgb, var(--accent) 11%, var(--bg)) 0%, color-mix(in srgb, var(--surface) 55%, var(--bg)) 100%);
  --grad-soft: linear-gradient(135deg, color-mix(in srgb, var(--accent) 7%, var(--bg)) 0%, color-mix(in srgb, var(--surface) 55%, var(--bg)) 60%);
  --grad-avatar: linear-gradient(135deg, color-mix(in srgb, var(--accent) 20%, var(--bg)), var(--surface));
  --mark: color-mix(in srgb, var(--accent) 5%, transparent);
  --ring: color-mix(in srgb, var(--accent) 12%, transparent);
  --glow: color-mix(in srgb, var(--accent) 55%, transparent);
  --heat0: color-mix(in srgb, var(--accent) 5%, var(--surface));
  --heat1: color-mix(in srgb, var(--accent) 18%, var(--surface));
  --heat2: color-mix(in srgb, var(--accent) 40%, var(--surface));
  --heat3: color-mix(in srgb, var(--accent) 72%, var(--surface));
  --danger-tint: color-mix(in srgb, var(--danger) 8%, var(--bg));
  --danger-line: color-mix(in srgb, var(--danger) 25%, var(--bg));
}

/* Cores principais (tema escuro). Dourado é o padrão (:root). */
:root[data-accent="rose"]  { --accent: #e58fb0; --accent2: #f3aec8; }
:root[data-accent="blue"]  { --accent: #7aaee0; --accent2: #9cc4ec; }
:root[data-accent="green"] { --accent: #8cc28a; --accent2: #a9d6a7; }
:root[data-accent="lilac"] { --accent: #b09be6; --accent2: #c7b8f0; }
:root[data-accent="coral"] { --accent: #ec9573; --accent2: #f5b095; }

/* Tema claro: neutros claros e cada cor numa versão mais escura (contraste em fundo claro). */
:root[data-theme="light"] {
  color-scheme: light;
  --bg: #f6f3ee; --surface: #ffffff; --field: #f0ece5; --border: #e5dfd4; --border2: #d6cfc2;
  --text: #1c1a17; --soft: #4d4840; --muted: #8c857a; --green: #3f7a3f; --danger: #b8432c;
  --hover: #f2eee7; --bar: #fbf9f6; --bar-glass: rgba(251, 249, 246, .92);
  --placeholder: #b0a89b; --faint: #cbc3b6; --rule: #ebe5da; --shadow: rgba(60, 45, 20, .18);
  --on-accent: #ffffff;
  --accent: #9a7633; --accent2: #b08a44;
  --heat0: color-mix(in srgb, var(--accent) 6%, var(--surface));
}
:root[data-theme="light"][data-accent="rose"]  { --accent: #c24a74; --accent2: #d2618a; }
:root[data-theme="light"][data-accent="blue"]  { --accent: #2f6db0; --accent2: #4583c6; }
:root[data-theme="light"][data-accent="green"] { --accent: #3d7d3b; --accent2: #52934f; }
:root[data-theme="light"][data-accent="lilac"] { --accent: #6b52c4; --accent2: #8169d6; }
:root[data-theme="light"][data-accent="coral"] { --accent: #c1582f; --accent2: #d36d45; }
/* No claro, os números do mapa de calor nas faixas altas ficam em branco */
:root[data-theme="light"] .cal button.l2 { color: var(--text); }

* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { height: 100%; }
body { font-family: var(--body); background: var(--bg); color: var(--text); line-height: 1.6; font-size: 15px;
  -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 1px solid var(--accent); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

.app { max-width: 720px; margin: 0 auto; min-height: 100%;
  padding: calc(env(safe-area-inset-top, 0px)) 0 calc(env(safe-area-inset-bottom, 0px) + 84px); }

/* ── Rótulos e títulos ── */
.label, .sub { font-family: var(--mono); font-size: 11px; letter-spacing: 3px; text-transform: uppercase; color: var(--accent); }
.muted { color: var(--muted); }
.small { font-size: 13px; }
.mono { font-family: var(--mono); letter-spacing: 1px; }

/* ── Cabeçalho de cada tela (estilo hero) ── */
.top { position: relative; overflow: hidden; display: flex; align-items: flex-end; justify-content: space-between; gap: 16px;
  padding: 36px 20px 24px; border-bottom: 1px solid var(--border); }
.top > div:first-child { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.top h1 { font-family: var(--display); font-weight: 400; font-size: clamp(40px, 11vw, 72px); line-height: .9; letter-spacing: 1px; color: var(--text); }
.top h1 span { color: var(--accent); }
.top[data-mark]::before { content: attr(data-mark); position: absolute; top: -8px; left: -6px; font-family: var(--display);
  font-size: 140px; line-height: 1; color: var(--mark); pointer-events: none; white-space: nowrap; }
.daynav { display: flex; gap: 6px; position: relative; }
.icon-btn { background: var(--field); border: 1px solid var(--border2); width: 44px; height: 44px; display: grid; place-items: center;
  cursor: pointer; color: var(--muted); transition: border-color .2s, color .2s; }
.icon-btn:hover { color: var(--accent); border-color: var(--accent); }
.icon-btn svg { width: 18px; height: 18px; }

/* ── Score do dia ── */
.hero-score { display: grid; grid-template-columns: auto 1fr; gap: 24px; align-items: center; padding: 28px 20px; border-bottom: 1px solid var(--border); }
.ring-wrap { position: relative; width: 168px; }
.ring-wrap svg { width: 100%; height: auto; display: block; }
.ring-center { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; }
.ring-score { font-family: var(--display); font-size: 64px; line-height: .9; color: var(--accent); }
.ring-label { font-family: var(--mono); font-size: 9px; letter-spacing: 2px; text-transform: uppercase; color: var(--muted); }
.hero-meta { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 24px; }
.hero-stat { display: flex; flex-direction: column; gap: 2px; }
.hero-stat .val { font-family: var(--display); font-size: 30px; line-height: 1; color: var(--accent); }
.hero-stat .key { font-family: var(--mono); font-size: 10px; letter-spacing: 2px; text-transform: uppercase; color: var(--muted); }
.legend { display: flex; flex-wrap: wrap; gap: 6px 14px; padding: 14px 20px; border-bottom: 1px solid var(--border);
  font-family: var(--mono); font-size: 10px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--muted); }
.legend i { display: inline-block; width: 7px; height: 7px; margin-right: 6px; background: var(--accent); vertical-align: 1px; }
.legend i.off { background: var(--border2); }
/* Celular: anel e números lado a lado, para a primeira ação do dia aparecer sem rolar. */
@media (max-width: 480px) {
  .hero-score { grid-template-columns: 124px 1fr; gap: 16px; padding: 20px; }
  .ring-wrap { width: 124px; }
  .ring-score { font-size: 46px; }
  .ring-label { font-size: 8px; letter-spacing: 1.5px; }
  .hero-meta { gap: 14px 12px; }
  .hero-stat .val { font-size: 24px; }
  .hero-stat .key { font-size: 9px; letter-spacing: 1.5px; }
}
@media (max-width: 340px) { .hero-score { grid-template-columns: 1fr; justify-items: center; } .hero-meta { width: 100%; } }

/* ── Seções ── */
.block { padding: 28px 20px; border-bottom: 1px solid var(--border); }
.block h2 { font-family: var(--display); font-weight: 400; font-size: 30px; letter-spacing: 2px; line-height: 1.1; color: var(--text); margin-bottom: 14px; }
.section-sub { font-family: var(--mono); font-size: 12px; letter-spacing: 1px; color: var(--muted); margin: -8px 0 18px; }
.row { display: flex; align-items: center; gap: 10px; }
.row.between { justify-content: space-between; }
.grow { flex: 1; min-width: 0; }
.stack > * + * { margin-top: 12px; }
.empty { text-align: center; padding: 36px 16px; color: var(--muted); font-family: var(--mono); font-size: 12px; letter-spacing: 1px; }

/* Caixa de destaque (A Estratégia) */
.strategy, .phase { position: relative; overflow: hidden; margin: 24px 20px; padding: 22px 24px 22px 28px;
  background: var(--grad); border: 1px solid var(--accent); }
.strategy::before, .phase::before { content: ""; position: absolute; top: 0; left: 0; width: 4px; height: 100%; background: var(--accent); }
.phase b, .strategy h3 { display: block; font-family: var(--display); font-weight: 400; font-size: 22px; letter-spacing: 2px; color: var(--accent); margin-bottom: 4px; }
.phase .muted, .strategy p { font-size: 14px; color: var(--soft); line-height: 1.7; }

/* ── Linha do tempo do dia (estilo refeições do plano) ── */
.timeline { list-style: none; border: 1px solid var(--border); }
.tl { display: grid; grid-template-columns: 68px 1fr; gap: 16px; padding: 16px 18px; border-bottom: 1px solid var(--border); transition: background .15s; }
.tl:last-child { border-bottom: 0; }
.tl:hover { background: var(--hover); }
.tl-time { font-family: var(--display); font-size: 22px; letter-spacing: 1px; line-height: 1.2; color: var(--accent); }
.tl-dot { display: none; }
.tl.done .tl-time { color: var(--green); }
.tl-body { min-width: 0; }
.tl-title { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 0 10px;
  font-family: var(--display); font-weight: 400; font-size: 21px; letter-spacing: 1px; line-height: 1.2; color: var(--text); }
.tl-title .tl-meta { font-family: var(--mono); font-size: 12px; letter-spacing: 1px; white-space: nowrap; }
.tl-meta { font-family: var(--mono); font-size: 11px; letter-spacing: 1px; color: var(--muted); }
.tl-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; align-items: center; }
.meal-items { list-style: none; margin-top: 6px; display: flex; flex-direction: column; gap: 3px; }
.meal-items li { font-size: 13px; color: var(--soft); }
.meal-items b { font-family: var(--mono); font-weight: 400; font-size: 12px; color: var(--accent); }
/* Celular: horário acima do título (como as refeições do plano original), o conteúdo ganha a largura toda. */
@media (max-width: 480px) {
  .tl { grid-template-columns: 1fr; gap: 2px; padding: 14px 16px; }
  .tl-time { font-size: 17px; line-height: 1; }
  .tl-time:empty { display: none; }
}

/* ── Controles ── */
.chip { min-height: 40px; background: var(--field); border: 1px solid var(--border2); border-radius: var(--r); padding: 7px 12px; cursor: pointer;
  font-family: var(--mono); font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--soft); transition: border-color .2s, color .2s; }
.chip:hover { border-color: var(--accent); color: var(--accent); }
.chip.on { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.chip.ghost { background: transparent; }
.btn { border: 0; border-radius: var(--r); background: var(--accent); color: var(--on-accent); padding: 11px 22px; cursor: pointer;
  font-family: var(--display); font-size: 17px; letter-spacing: 2px; line-height: 1.2; transition: background .2s; }
.btn:hover { background: var(--accent2); }
.btn.secondary { background: transparent; color: var(--text); border: 1px solid var(--border2); }
.btn.secondary:hover { border-color: var(--accent); color: var(--accent); }
.btn.danger { background: transparent; color: var(--danger); border: 1px solid var(--border2); }
.btn.block-w { display: block; width: 100%; text-align: center; }
.check { position: relative; width: 26px; height: 26px; border: 1px solid var(--border2); background: var(--field); cursor: pointer; display: grid; place-items: center; flex: none; }
.check::after { content: ""; position: absolute; inset: -9px; } /* área de toque de 44px sem aumentar o quadrado */
.check.on { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.check svg { width: 14px; height: 14px; }

/* Água */
.bar { height: 4px; background: var(--border); overflow: hidden; }
.bar > span { display: block; height: 100%; background: var(--accent); transition: width .3s; }
.cups { display: flex; gap: 4px; flex-wrap: wrap; margin: 12px 0; }
.cup { width: 14px; height: 22px; border: 1px solid var(--border2); background: var(--field); }
.cup.full { background: var(--accent); border-color: var(--accent); }
.water-val { font-family: var(--display); font-size: 30px; line-height: 1; color: var(--accent); }

/* ── Formulários (estilo calculadora) ── */
label.f { display: block; }
label.f > span { display: block; margin-bottom: 6px; font-family: var(--mono); font-size: 10px; letter-spacing: 2px; text-transform: uppercase; color: var(--muted); }
input[type=text], input[type=number], input[type=date], input[type=time], select, textarea {
  width: 100%; min-height: 42px; background: var(--field); border: 1px solid var(--border2); border-radius: var(--r); padding: 8px 12px;
  color: var(--text); outline: none; transition: border-color .2s; }
input:focus, select:focus, textarea:focus { border-color: var(--accent); }
input[type=number], input[type=time], input[type=date] { font-family: var(--mono); color: var(--accent); }
input::placeholder, textarea::placeholder { color: var(--placeholder); }
textarea { resize: none; overflow: hidden; min-height: 96px; line-height: 1.6; font-size: 14px; }
select { font-size: 14px; }
code { font-family: var(--mono); color: var(--accent); font-size: 12px; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.days7 { display: flex; gap: 4px; margin-top: 6px; }
.days7 .chip { width: 38px; padding: 7px 0; text-align: center; }
.hint { font-family: var(--mono); font-size: 11px; letter-spacing: .5px; color: var(--muted); line-height: 1.6; margin-top: 6px; }

/* ── Treino ── */
.ex { padding: 18px 0; border-top: 1px solid var(--border); }
.ex:first-of-type { border-top: 0; padding-top: 4px; }
.ex b { font-family: var(--display); font-weight: 400; font-size: 22px; letter-spacing: 1px; }
.ex .row.between .muted { font-family: var(--mono); font-size: 12px; }
.set-grid { display: grid; grid-template-columns: 22px 1fr 1fr 46px; gap: 6px; align-items: center; margin-top: 10px;
  font-family: var(--mono); font-size: 11px; letter-spacing: 1px; text-transform: uppercase; }
.set-grid input { min-height: 40px; padding: 6px 10px; font-family: var(--display); font-size: 22px; letter-spacing: 1px; }
.phases { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 1px; background: var(--border); border: 1px solid var(--border); margin: 0 0 18px; }
.phases > div { background: var(--surface); padding: 14px; text-align: center; }
.phases .w { font-family: var(--mono); font-size: 10px; letter-spacing: 2px; text-transform: uppercase; color: var(--muted); }
.phases .n { font-family: var(--display); font-size: 18px; letter-spacing: 1px; color: var(--muted); }
.phases > div.cur { background: var(--tint); box-shadow: inset 0 -2px 0 var(--accent); }
.phases > div.cur .n { color: var(--accent); }
.training-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1px; background: var(--border); border: 1px solid var(--border); }
.day-card { background: var(--surface); padding: 20px; }
.day-card.today { background: var(--tint); box-shadow: inset 3px 0 0 var(--accent); }
.day-label { font-family: var(--mono); font-size: 10px; letter-spacing: 3px; text-transform: uppercase; color: var(--muted); margin-bottom: 4px; }
.day-name { font-family: var(--display); font-size: 22px; letter-spacing: 1px; line-height: 1.1; margin-bottom: 2px; }
/* Esportes: ícone de traço na cor principal; atividades do dia; escolha do esporte */
.sp-ic { display: inline-grid; place-items: center; width: 1.15em; height: 1.15em; color: var(--accent); vertical-align: -0.18em; margin-right: 6px; flex: none; }
.sp-ic svg { width: 100%; height: 100%; }
.acts { list-style: none; margin: 0 0 14px; padding: 0; }
.act { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-top: 1px solid var(--border); }
.act:first-child { border-top: 0; }
.act-ic { width: 42px; height: 42px; border: 1px solid var(--border2); border-radius: 50%; display: grid; place-items: center; flex: none; }
.act-ic .sp-ic { width: 22px; height: 22px; margin: 0; }
.act-name { font-weight: 500; }
.act-note { font-size: 13px; color: var(--soft); margin-top: 2px; }
.sport-day { display: flex; align-items: center; gap: 14px; }
.sport-day > .sp-ic { width: 40px; height: 40px; margin: 0; }
.sport-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 6px; }
.sport-opt { position: relative; display: grid; justify-items: center; gap: 6px; padding: 10px 4px 8px; border: 1px solid var(--border2); border-radius: var(--r);
  background: var(--field); cursor: pointer; font-size: 12px; text-align: center; line-height: 1.2; }
.sport-opt input { position: absolute; opacity: 0; pointer-events: none; }
.sport-opt .sp-ic { width: 26px; height: 26px; margin: 0; color: var(--soft); }
.sport-opt:has(input:checked) { border-color: var(--accent); background: var(--tint); color: var(--accent); }
.sport-opt:has(input:checked) .sp-ic { color: var(--accent); }
.sport-opt:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.day-focus { font-size: 12px; color: var(--accent); font-weight: 500; margin-bottom: 12px; }
.exercise-list { list-style: none; }
.exercise-list li { font-size: 13px; color: var(--soft); padding: 5px 0; border-bottom: 1px solid var(--border); display: flex; justify-content: space-between; gap: 8px; }
.exercise-list li:last-child { border-bottom: 0; }
.exercise-list .sets { font-family: var(--mono); font-size: 11px; color: var(--muted); white-space: nowrap; }
.rest-tag { display: inline-block; margin-top: 12px; font-family: var(--mono); font-size: 10px; letter-spacing: 2px; color: var(--muted); background: var(--field); padding: 4px 10px; border: 1px solid var(--border2); }

/* ── Mês ── */
.cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }
.cal .dow { text-align: center; font-family: var(--mono); font-size: 10px; letter-spacing: 2px; color: var(--muted); padding-bottom: 4px; }
.cal button { aspect-ratio: 1; border: 1px solid var(--border); border-radius: var(--r); cursor: pointer; padding: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
  font-family: var(--display); font-size: 18px; letter-spacing: 1px; line-height: 1; color: var(--soft); background: var(--surface); }
.cal button small { font-family: var(--mono); font-size: 9px; letter-spacing: .5px; opacity: .75; }
/* 5 faixas do mapa de calor (limites em HEAT, no app.js) */
.cal button.l0, .heat-legend i.l0 { background: var(--heat0); color: var(--muted); }
.cal button.l1, .heat-legend i.l1 { background: var(--heat1); color: var(--soft); }
.cal button.l2, .heat-legend i.l2 { background: var(--heat2); color: var(--text); }
.cal button.l3, .heat-legend i.l3 { background: var(--heat3); color: var(--on-accent); }
.cal button.l4, .heat-legend i.l4 { background: var(--accent); color: var(--on-accent); }
.cal button.l0, .cal button.l1 { border-color: var(--border2); }
.heat-legend { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 6px; margin-top: 14px;
  font-family: var(--mono); font-size: 9px; letter-spacing: 1px; text-transform: uppercase; color: var(--muted); }
.heat-legend > span:first-child { margin-right: 4px; letter-spacing: 2px; }
.heat-legend i { width: 12px; height: 12px; border-radius: 3px; border: 1px solid var(--border2); }
.heat-legend i + span { margin-right: 6px; }
.stat-key { margin-top: 6px; font-family: var(--mono); font-size: 10px; letter-spacing: 2px; text-transform: uppercase; color: var(--muted); }
.mini-bar { height: 3px; margin-top: 6px; background: var(--border); border-radius: 2px; overflow: hidden; max-width: 160px; }
.mini-bar > span { display: block; height: 100%; background: var(--accent); border-radius: 2px; }
.cal button.na { background: transparent; color: var(--faint); border-style: dashed; }
.cal button.today { outline: 1px solid var(--accent); outline-offset: 2px; }
.big-num { font-family: var(--display); font-size: 88px; line-height: .85; color: var(--accent); }
table.t { width: 100%; border-collapse: collapse; border: 1px solid var(--border); font-size: 14px; }
table.t td, table.t th { padding: 10px 12px; border-top: 1px solid var(--border); text-align: left; }
table.t th { font-family: var(--mono); font-weight: 400; font-size: 10px; letter-spacing: 2px; text-transform: uppercase; color: var(--muted); border-top: 0; background: var(--surface); }
table.t td.n { text-align: right; font-family: var(--mono); font-size: 13px; color: var(--accent); }

/* ── Números em grade (macros) ── */
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--border); border: 1px solid var(--border); }
.stat { background: var(--surface); padding: 18px 10px; text-align: center; }
.stat b { display: block; font-family: var(--display); font-weight: 400; font-size: 38px; line-height: 1; color: var(--accent); }
.stat span { display: block; margin-top: 6px; font-family: var(--mono); font-size: 10px; letter-spacing: 2px; text-transform: uppercase; color: var(--muted); }
.chart svg { width: 100%; height: auto; display: block; }
.chart text { font-family: var(--mono); }

/* ── Navegação inferior (estilo barra da calculadora) ── */
nav.tabs { position: fixed; left: 0; right: 0; bottom: 0; z-index: 10; background: var(--bar); border-top: 1px solid var(--accent);
  padding: 6px 8px calc(env(safe-area-inset-bottom, 0px) + 6px); }
nav.tabs .in { max-width: 720px; margin: 0 auto; display: grid; grid-template-columns: repeat(5, 1fr); }
nav.tabs button { background: none; border: 0; color: var(--muted); display: grid; justify-items: center; gap: 3px; padding: 6px 0; cursor: pointer;
  font-family: var(--mono); font-size: 9px; letter-spacing: 2px; text-transform: uppercase; }
nav.tabs button svg { width: 20px; height: 20px; }
nav.tabs button.on { color: var(--accent); }

.toast { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(env(safe-area-inset-bottom, 0px) + 80px); z-index: 20;
  background: var(--bar); border: 1px solid var(--accent); padding: 10px 18px; max-width: 90vw;
  font-family: var(--mono); font-size: 12px; letter-spacing: 1px; color: var(--text); }
.banner { margin: 16px 20px 0; padding: 12px 16px; border: 1px solid var(--danger); border-left: 4px solid var(--danger); background: var(--danger-tint);
  font-family: var(--mono); font-size: 12px; letter-spacing: .5px; cursor: pointer; }

/* Ajustes e notas */
details > summary { cursor: pointer; list-style: none; }
details > summary::-webkit-details-marker { display: none; }
.hab-card { border: 1px solid var(--border); background: var(--surface); padding: 12px 14px; margin-bottom: -1px; }
.hab-card summary { display: flex; justify-content: space-between; align-items: center; gap: 10px;
  font-family: var(--display); font-size: 20px; letter-spacing: 1px; }
.hab-card summary .muted { font-family: var(--mono); font-size: 11px; letter-spacing: 1px; }
.hab-card[open] { border-color: var(--accent); position: relative; z-index: 1; }
.hab-card[open] summary { margin-bottom: 14px; color: var(--accent); }
.block > .btn.block-w { margin-top: 14px; }
.note-item { display: block; width: 100%; text-align: left; background: none; border: 0; border-top: 1px solid var(--border); padding: 14px 0; cursor: pointer; color: var(--text); }
.note-item:first-child { border-top: 0; }
.note-item b { font-family: var(--display); font-weight: 400; font-size: 20px; letter-spacing: 1px; }
.note-item p { margin-top: 2px; color: var(--muted); font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.timer-live { color: var(--accent); }

/* ── Estudo ── */
.book-row { display: flex; align-items: center; gap: 10px; border: 1px solid var(--border); background: var(--surface); padding: 12px 14px; margin-bottom: -1px; }
.book-row.reading { border-color: var(--accent); position: relative; z-index: 1; background: var(--tint); }
.book-row.done { opacity: .6; }
.book-open { flex: 1; min-width: 0; background: none; border: 0; text-align: left; cursor: pointer; color: var(--text); display: flex; flex-direction: column; }
.book-t { font-family: var(--display); font-size: 21px; letter-spacing: 1px; line-height: 1.15; }
.book-a { font-size: 13px; color: var(--soft); }
.book-m { font-family: var(--mono); font-size: 11px; letter-spacing: 1px; color: var(--muted); margin-top: 2px; }
.book-row.reading .book-m { color: var(--accent); }
.book-ctl { display: flex; gap: 4px; align-items: center; flex: none; }
.book-ctl .icon-btn { width: 32px; height: 32px; font-size: 14px; }

/* ── Cantos levemente arredondados ──
   Contêineres com grade de 1px cortam o conteúdo no raio (overflow: hidden) para as linhas não vazarem no canto. */
.icon-btn, .strategy, .phase, .toast, .banner { border-radius: var(--r); }
.timeline, .stats, .phases, .training-grid, table.t { border-radius: var(--r); overflow: hidden; }
table.t { border-collapse: separate; border-spacing: 0; }
.check, .cal button, .cup, .rest-tag { border-radius: var(--r-sm); }
.bar, .bar > span { border-radius: 2px; }
.legend i { border-radius: 2px; }
/* Listas empilhadas (margem −1px): só as pontas arredondam. */
.hab-card, .book-row { border-radius: 0; }
.hab-card:first-of-type, .book-row:first-child { border-top-left-radius: var(--r); border-top-right-radius: var(--r); }
.hab-card:last-of-type, .book-row:last-child { border-bottom-left-radius: var(--r); border-bottom-right-radius: var(--r); }
.hab-card[open] { border-radius: var(--r); }

/* ── Caderno da nota (substitui o campo genérico) ──
   Mesma linguagem da caixa "A Estratégia": gradiente, barra dourada à esquerda. Linhas pautadas alinhadas ao texto. */
.journal { --lh: 28px; position: relative; overflow: hidden; border: 1px solid var(--border2); border-radius: var(--r);
  background: var(--grad-soft); transition: border-color .2s, box-shadow .2s; }
.journal::before { content: ""; position: absolute; top: 0; left: 0; bottom: 0; width: 3px; background: var(--border2); transition: background .2s; }
.journal:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--ring); }
.journal:focus-within::before { background: var(--accent); }
.journal-head { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 12px 18px 10px 22px;
  border-bottom: 1px dashed var(--border2); font-family: var(--mono); font-size: 10px; letter-spacing: 2px; text-transform: uppercase; color: var(--muted); }
.journal-head > span:first-child { color: var(--accent); }
.journal-head .ok { color: var(--green); }
textarea.journal-text { display: block; width: 100%; min-height: calc(var(--lh) * 4 + 16px); padding: 8px 18px 8px 22px;
  background: transparent repeating-linear-gradient(to bottom, transparent 0, transparent calc(var(--lh) - 1px), var(--rule) calc(var(--lh) - 1px), var(--rule) var(--lh));
  background-position: 0 8px; background-attachment: local;
  border: 0; border-radius: 0; font-family: var(--body); font-size: 15px; line-height: var(--lh); color: var(--text); caret-color: var(--accent); }
textarea.journal-text:focus { border: 0; }
textarea.journal-text::placeholder { color: var(--placeholder); font-style: italic; }
.journal.tall textarea.journal-text { min-height: 55vh; }

/* ── Série feita (✓) ── */
.set-ok { position: relative; height: 40px; border: 1px solid var(--border2); border-radius: var(--r); background: var(--field);
  color: var(--muted); cursor: pointer; display: grid; place-items: center; transition: background .2s, border-color .2s, color .2s; }
.set-ok svg { width: 16px; height: 16px; }
.set-ok:hover { border-color: var(--accent); color: var(--accent); }
.set-ok.on { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }

/* ── Painel de descanso: fixo acima do menu, mesma linguagem da caixa "A Estratégia" ── */
.rest-panel { position: fixed; left: 0; right: 0; bottom: calc(env(safe-area-inset-bottom, 0px) + 62px); z-index: 11;
  padding: 0 10px 10px; pointer-events: none; }
.rest-in { pointer-events: auto; position: relative; overflow: hidden; max-width: 700px; margin: 0 auto;
  display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 8px 14px; padding: 12px 14px 15px 18px;
  background: var(--grad); border: 1px solid var(--accent); border-radius: var(--r);
  box-shadow: 0 -10px 30px var(--shadow); }
.rest-in::before { content: ""; position: absolute; top: 0; left: 0; bottom: 0; width: 4px; background: var(--accent); }
.rest-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.rest-info .label { font-size: 10px; }
.rest-next { font-size: 13px; color: var(--soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rest-clock { font-family: var(--display); font-size: 48px; line-height: .85; letter-spacing: 1px; color: var(--accent);
  font-variant-numeric: tabular-nums; }
.rest-ctl { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr 1.3fr; gap: 6px; }
.rest-in .bar { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; border-radius: 0; }
.rest-in .bar > span { border-radius: 0; transition: width .25s linear; }
.rest-panel.over .rest-in { border-color: var(--green); }
.rest-panel.over .rest-in::before, .rest-panel.over .bar > span { background: var(--green); }
.rest-panel.over .rest-clock, .rest-panel.over .label { color: var(--green); }
body.resting .app { padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 84px + 130px); }
body.resting .toast { bottom: calc(env(safe-area-inset-bottom, 0px) + 200px); }

/* ── Select personalizado (o nativo fica escondido e continua valendo para o formulário) ── */
select.sel-native { display: none; }
.sel-btn { width: 100%; min-height: 42px; display: flex; align-items: center; justify-content: space-between; gap: 10px;
  background: var(--field); border: 1px solid var(--border2); border-radius: var(--r); padding: 8px 12px; cursor: pointer;
  color: var(--text); font-size: 14px; text-align: left; transition: border-color .2s; }
.sel-btn:hover, .sel-btn.open { border-color: var(--accent); }
.sel-val { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sel-btn svg { flex: none; width: 16px; height: 16px; color: var(--accent); transition: transform .2s; }
.sel-btn.open svg { transform: rotate(180deg); }
.sel-pop { position: fixed; z-index: 30; overflow-y: auto; overscroll-behavior: contain; padding: 4px;
  background: var(--surface); border: 1px solid var(--accent); border-radius: var(--r);
  box-shadow: 0 14px 34px var(--shadow); animation: sel-in .12s ease-out; scrollbar-width: thin; scrollbar-color: var(--border2) transparent; }
.sel-pop.up { animation-name: sel-in-up; }
@keyframes sel-in { from { opacity: 0; transform: translateY(-4px); } }
@keyframes sel-in-up { from { opacity: 0; transform: translateY(4px); } }
.sel-opt { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 10px;
  min-height: 42px; padding: 9px 12px 9px 14px; border-radius: var(--r-sm); cursor: pointer; font-size: 14px; color: var(--soft); }
.sel-opt.hi, .sel-opt:hover { background: var(--field); color: var(--text); }
.sel-opt.on { color: var(--accent); background: var(--tint); }
.sel-opt.on::before { content: ""; position: absolute; left: 0; top: 8px; bottom: 8px; width: 2px; background: var(--accent); }
.sel-opt svg { flex: none; width: 14px; height: 14px; }
.sel-opt.off { opacity: .4; cursor: default; }

/* Ícone de hora e data em dourado (em vez do relógio/calendário genérico do navegador). */
input[type=time]::-webkit-calendar-picker-indicator, input[type=date]::-webkit-calendar-picker-indicator {
  cursor: pointer; opacity: 1; width: 16px; height: 16px; background: center / 16px no-repeat; }
input[type=time]::-webkit-calendar-picker-indicator {
  background: var(--accent); -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='1.8' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E") center / 16px 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='1.8' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E") center / 16px no-repeat; }
input[type=date]::-webkit-calendar-picker-indicator {
  background: var(--accent); -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='1.8' stroke-linecap='round'%3E%3Crect x='3.5' y='5' width='17' height='15.5' rx='2'/%3E%3Cpath d='M3.5 10h17M8 3v4M16 3v4'/%3E%3C/svg%3E") center / 16px 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='1.8' stroke-linecap='round'%3E%3Crect x='3.5' y='5' width='17' height='15.5' rx='2'/%3E%3Cpath d='M3.5 10h17M8 3v4M16 3v4'/%3E%3C/svg%3E") center / 16px no-repeat; }

/* ── Treino: fase compacta numa linha ── */
.phase-line { position: relative; overflow: hidden; margin: 16px 20px 0; padding: 10px 14px 10px 17px;
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px;
  background: var(--grad); border: 1px solid var(--accent-line); border-radius: var(--r); }
.phase-line::before { content: ""; position: absolute; top: 0; left: 0; bottom: 0; width: 3px; background: var(--accent); }
.phase-line b { font-family: var(--display); font-weight: 400; font-size: 18px; letter-spacing: 1.5px; color: var(--accent); }
.phase-line span { font-size: 13px; color: var(--soft); line-height: 1.5; }

/* Título de bloco com ação à direita (ex.: "O dia" + Editar dieta) */
.block-head { margin-bottom: 14px; }
.block-head h2 { margin: 0; }

/* ── Evolução: registro de peso no estilo da calculadora do plano original ── */
.weigh { display: grid; grid-template-columns: 1fr 1fr auto; gap: 8px; align-items: stretch; }
.calc-field { display: flex; align-items: center; gap: 8px; min-height: 52px; padding: 6px 12px; background: var(--field);
  border: 1px solid var(--border2); border-radius: var(--r); transition: border-color .2s; min-width: 0; }
.calc-field:focus-within { border-color: var(--accent); }
.calc-field > span { font-family: var(--mono); font-size: 10px; letter-spacing: 2px; text-transform: uppercase; color: var(--muted); }
.calc-field > em { font-style: normal; font-family: var(--mono); font-size: 11px; color: var(--muted); }
.calc-field input { flex: 1; min-width: 0; min-height: 0; padding: 0; background: transparent; border: 0; }
.calc-field.kg input { font-family: var(--display); font-size: 26px; letter-spacing: 1px; color: var(--accent); }
.calc-field input[type=date] { font-size: 13px; }
@media (max-width: 480px) { .weigh { grid-template-columns: 1fr 1fr; } .weigh .btn { grid-column: 1 / -1; } }
.weigh-list { margin-top: 14px; }
.weigh-row { padding: 6px 0; border-top: 1px solid var(--border); }
.weigh-row b { font-family: var(--display); font-weight: 400; font-size: 20px; letter-spacing: 1px; color: var(--accent); }
.weigh-row .icon-btn { width: 40px; height: 40px; }
.weigh-row .icon-btn:hover { color: var(--danger); border-color: var(--danger); }

/* ── Estudo ── */
.book-pos { flex: none; width: 22px; font-family: var(--display); font-size: 20px; color: var(--muted); text-align: center; }
.book-row { padding: 10px 12px; }
.book-a { font-size: 12px; }
.book-ctl .icon-btn { width: 36px; height: 36px; }
.book-ctl .icon-btn svg { width: 16px; height: 16px; }
.read-log { display: flex; flex-wrap: wrap; gap: 8px; align-items: stretch; }
.read-log .calc-field { flex: 1 1 160px; }
.read-log .chip { min-width: 56px; }
.book-move { display: flex; flex-direction: column; gap: 4px; }
.book-move .icon-btn { width: 36px; height: 32px; }

/* ── Ajustes ── */
/* Campos lado a lado alinham pela base: rótulo de duas linhas não desalinha a fileira. */
.grid2, .grid3 { align-items: end; }
/* Índice das seções, fixo no topo enquanto rola */
.sec-nav { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 5; display: flex; gap: 6px; overflow-x: auto;
  padding: 10px 20px; background: var(--bar-glass); backdrop-filter: blur(6px); border-bottom: 1px solid var(--border);
  scrollbar-width: none; }
.sec-nav::-webkit-scrollbar { display: none; }
.sec-nav .chip { flex: none; }
#aj-perfil, #aj-aparencia, #aj-nutricao, #aj-habitos, #aj-pontos, #aj-notif, #aj-refeicoes, #aj-plano, #aj-dados, #aj-usuarios { scroll-margin-top: calc(env(safe-area-inset-top, 0px) + 62px); }
.danger-zone { margin-top: 18px; padding: 16px; border: 1px solid var(--danger-line); border-radius: var(--r); background: var(--danger-tint); }
.danger-zone .label { color: var(--danger); }
.danger-zone .btn.danger { background: transparent; }
.hab-card summary .muted { white-space: nowrap; }

/* ── Configuração inicial ── */
.hero-on { padding-top: 56px; padding-bottom: 32px; }
.hero-on h1 { font-size: clamp(56px, 16vw, 96px); }
.hero-lead { max-width: 440px; margin-top: 6px; font-size: 14px; color: var(--muted); line-height: 1.6; }
.f-lab { display: block; margin-bottom: 6px; font-family: var(--mono); font-size: 10px; letter-spacing: 2px; text-transform: uppercase; color: var(--muted); }
.choices { display: grid; gap: 8px; }
.choice { position: relative; display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; cursor: pointer;
  background: var(--field); border: 1px solid var(--border2); border-radius: var(--r); transition: border-color .2s, background .2s; }
.choice:hover { border-color: var(--accent); }
.choice input { appearance: none; flex: none; width: 18px; height: 18px; margin-top: 3px; border: 1px solid var(--border2); border-radius: 50%; background: var(--bg); }
.choice input:checked { border: 5px solid var(--accent); }
.choice:has(input:checked) { border-color: var(--accent); background: var(--grad); }
.choice b { display: block; font-family: var(--display); font-weight: 400; font-size: 20px; letter-spacing: 1px; color: var(--text); }
.choice:has(input:checked) b { color: var(--accent); }
.choice small { display: block; font-size: 13px; color: var(--soft); line-height: 1.5; }
.choice input:focus-visible { outline: 1px solid var(--accent); outline-offset: 2px; }
.account { margin-top: 6px; padding-top: 14px; border-top: 1px dashed var(--border2); gap: 12px; flex-wrap: wrap; }

/* ── Usuários (admin) ── */
.members { margin-top: 14px; border: 1px solid var(--border); border-radius: var(--r); overflow: hidden; }
.member { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: center; padding: 14px 16px; background: var(--surface); border-top: 1px solid var(--border); }
.member:first-child { border-top: 0; }
.member.off { opacity: .6; }
.member-mail { font-size: 14px; color: var(--text); word-break: break-all; }
.member-meta { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; margin-top: 4px; font-family: var(--mono); font-size: 11px; color: var(--muted); }
.member-ctl { display: flex; gap: 6px; flex-wrap: wrap; }
.tag { font-family: var(--mono); font-size: 10px; letter-spacing: 1.5px; text-transform: uppercase; padding: 2px 8px; border: 1px solid var(--border2); border-radius: var(--r-sm); color: var(--soft); }
.tag.gold { color: var(--accent); border-color: var(--accent); }
.tag.red { color: var(--danger); border-color: var(--danger-line); }
.chip.danger { color: var(--danger); }
.chip.danger:hover { border-color: var(--danger); }
.member > .grow { flex: 1 1 100%; } /* e-mail e dados na linha de cima, ações embaixo */

/* ── Campos: mesma altura e sem invadir a coluna vizinha ──
   O Safari do iPhone desenha data/hora com largura própria (maior que a coluna) e centraliza o texto.
   block + width/max-width 100% + min-width 0 + overflow hidden prendem o campo na coluna;
   line-height no lugar do padding vertical centraliza o texto sem flex (flex em input confunde o iOS). */
.grid2 > *, .grid3 > *, label.f { min-width: 0; }
input[type=text], input[type=number], input[type=date], input[type=time], .sel-btn { height: 42px; min-height: 42px; }
input[type=date], input[type=time] { -webkit-appearance: none; appearance: none; display: block; box-sizing: border-box;
  width: 100%; max-width: 100%; min-width: 0; overflow: hidden; padding-top: 0; padding-bottom: 0; line-height: 40px; text-align: left; }
input[type=date]::-webkit-date-and-time-value, input[type=time]::-webkit-date-and-time-value { text-align: left; margin: 0; min-width: 0; }
@media (max-width: 480px) { input[type=date], input[type=time] { font-size: 14px; letter-spacing: 0; } }
.calc-field input { height: auto; min-height: 0; }
/* Dica logo abaixo de uma fileira de campos respira um pouco mais */
.grid2 + .hint, .grid3 + .hint { margin-top: 8px; }

/* Ações dos cartões: Salvar, Cancelar ... Remover */

/* ── Perfil em menu: grupos com ícone e resumo; cada item abre a sua tela ── */
.aj-menu { display: block; padding: 0 20px 24px; }
.aj-layout.has-sec > .aj-menu { display: none; } /* celular: ou o menu ou a tela */
.aj-menu .account-card { margin: 0 0 20px; padding: 18px; border: 1px solid var(--border); border-radius: var(--r); position: relative; flex-wrap: nowrap; align-items: flex-start; }
.aj-menu .account-card .grow { min-width: 0; padding-right: 56px; }
.aj-menu .account-card .ac-meta { flex-wrap: wrap; }
.aj-menu .account-card .ac-mail { word-break: normal; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.aj-menu .account-card > [data-act="logout"] { position: absolute; top: 14px; right: 14px; min-height: 32px; padding: 5px 10px; font-size: 10px; }
.aj-group { margin-bottom: 20px; }
.aj-glabel { font-family: var(--mono); font-size: 10px; letter-spacing: 1.8px; text-transform: uppercase; color: var(--muted); margin: 0 0 8px 4px; }
.aj-list { border: 1px solid var(--border); border-radius: var(--r); overflow: hidden; background: var(--surface); }
.aj-item { display: flex; align-items: center; gap: 14px; width: 100%; padding: 13px 14px; background: none; border: 0; border-top: 1px solid var(--border);
  color: var(--text); text-align: left; cursor: pointer; font: inherit; min-height: 60px; }
.aj-item:first-child { border-top: 0; }
.aj-item:hover { background: var(--hover); }
.aj-item:active { background: var(--tint); }
.aj-item.on { background: var(--tint); box-shadow: inset 3px 0 0 var(--accent); }
.aj-ic { width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--border2); display: grid; place-items: center; color: var(--accent); flex: none; }
.aj-ic svg { width: 20px; height: 20px; }
.aj-txt { flex: 1; min-width: 0; display: grid; gap: 2px; }
.aj-txt b { font-weight: 500; font-size: 15px; }
.aj-txt b em { font-style: normal; font-family: var(--mono); font-size: 10px; letter-spacing: 1px; color: var(--muted); margin-left: 6px; }
.aj-txt small { color: var(--muted); font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.aj-chev { color: var(--muted); display: grid; flex: none; }
.aj-chev svg { width: 16px; height: 16px; }
.aj-item .sup-n { flex: none; }
/* Tela aberta: o título vem do cabeçalho (h1), então o h2 repetido do bloco some */
.aj-pane > .block:first-child > h2:first-child { display: none; }
.plan-days { margin: 8px 0 12px; }
.plan-meta { margin-top: 18px; border-radius: var(--r) !important; }
.plan-meta summary > span:first-child { white-space: nowrap; }
.aj-daytitle { display: flex; align-items: center; gap: 10px; padding: 0 20px; font-family: var(--display); font-size: 26px; letter-spacing: 1px; }
.aj-daytitle .sp-ic { width: 26px; height: 26px; margin: 0; }

/* ── Exercício: resumo fechado; aberto, tipo + campos próprios + "Vai aparecer assim" ── */
.erow.ex-row { display: block; padding: 0; }
.ex-row > summary { list-style: none; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 2px 10px; padding: 11px 14px; cursor: pointer; min-height: 52px; }
.ex-row > summary .ex-chev { grid-column: 2; grid-row: 1 / span 2; }
.ex-row > summary::-webkit-details-marker { display: none; }
.ex-sum-name { flex: 1; min-width: 0; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ex-sum { grid-column: 1; font-family: var(--mono); font-size: 12px; letter-spacing: .5px; color: var(--accent); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ex-sum:empty { display: none; }
.ex-chev { color: var(--muted); display: grid; transition: transform .2s var(--ease); }
.ex-chev svg { width: 16px; height: 16px; }
.ex-row[open] { border-color: var(--accent); }
.ex-row[open] .ex-chev { transform: rotate(90deg); }
.ex-body { display: grid; gap: 14px; padding: 4px 14px 14px; }
.ex-seg { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: 1px solid var(--border2); border-radius: var(--r); overflow: hidden; }
.erow .ex-seg label { position: relative; display: block; margin: 0; }
.ex-seg input { position: absolute; opacity: 0; pointer-events: none; }
.erow .ex-seg label > span { display: block; margin: 0; padding: 10px 4px; text-align: center; font-family: inherit; font-size: 13px; letter-spacing: 0; text-transform: none;
  color: var(--soft); cursor: pointer; border-left: 1px solid var(--border2); }
.erow .ex-seg label:first-child > span { border-left: 0; }
.erow .ex-seg input:checked + span { background: var(--tint); color: var(--accent); box-shadow: inset 0 -2px 0 var(--accent); }
.ex-seg input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: -2px; }
.ex-fields { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) minmax(0, 1fr); gap: 10px; align-items: end; }
.ex-row[data-kind="reps"] :is(.k-time, .k-dist), .ex-row[data-kind="time"] :is(.k-reps, .k-dist), .ex-row[data-kind="dist"] :is(.k-reps, .k-time) { display: none !important; }
.stepper { display: grid; grid-template-columns: 34px minmax(0, 1fr) 34px; border: 1px solid var(--border2); border-radius: var(--r); overflow: hidden; background: var(--field); }
.erow .stepper .icon-btn { width: auto; height: 42px; border: 0; border-radius: 0; font-size: 18px; background: none; }
.stepper input { border: 0; text-align: center; background: none; min-width: 0; padding: 0; font-size: 16px; -moz-appearance: textfield; }
.stepper input::-webkit-inner-spin-button, .stepper input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.erow label.check-line { display: flex; align-items: center; gap: 10px; cursor: pointer; }
.erow label.check-line > span { margin: 0; font-family: inherit; font-size: 14px; letter-spacing: 0; text-transform: none; color: var(--soft); }
.check-line input { width: 18px; height: 18px; accent-color: var(--accent); }
.ex-preview { padding: 10px 12px; border-radius: var(--r); background: var(--surface); border: 1px dashed var(--border2); font-size: 13px; color: var(--muted); }
.ex-preview b { color: var(--text); font-weight: 500; }
.ex-ctl { display: flex; align-items: center; gap: 8px; }
.ex-ctl .chip.danger { display: inline-flex; align-items: center; gap: 6px; }
.ex-ctl .chip.danger svg { width: 16px; height: 16px; }

/* ── Editor de linhas (um campo para cada coisa): exercícios, itens de refeição e fases ── */
.rows { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
.erow { display: grid; gap: 8px; align-items: end; padding: 10px; border: 1px solid var(--border); border-radius: var(--r); background: var(--bg); }
.erow label { display: block; min-width: 0; }
.erow label > span { display: block; margin-bottom: 4px; font-family: var(--mono); font-size: 9px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--muted); }
.erow .icon-btn { width: 40px; height: 42px; }
.erow .r-del:hover { color: var(--danger); border-color: var(--danger); }
.erow:first-child .r-up { visibility: hidden; }
.row-add { margin-top: 8px; }
.r-up { grid-area: up; } .r-del { grid-area: del; }


.it-row { grid-template-columns: minmax(0, 1fr) 80px 84px auto 40px 40px; grid-template-areas: "food qty unit scale up del"; }
.it-food { grid-area: food; } .it-qty { grid-area: qty; } .it-unit { grid-area: unit; } .it-scale { grid-area: scale; }
.erow label.it-scale { display: flex; align-items: center; gap: 8px; height: 42px; padding: 0 10px; border: 1px solid var(--border2); border-radius: var(--r);
  cursor: pointer; white-space: nowrap; }
.it-scale > span { margin: 0 !important; font-size: 10px !important; color: var(--soft) !important; }
.it-scale input { width: 16px; height: 16px; accent-color: var(--accent); }
.it-scale:has(input:checked) { border-color: var(--accent); }

.ph-row { grid-template-columns: minmax(0, 1fr) 84px 96px 40px 40px; grid-template-areas: "name from to up del" "desc desc desc desc desc"; }
.ph-name { grid-area: name; } .ph-from { grid-area: from; } .ph-to { grid-area: to; } .ph-desc { grid-area: desc; }

/* Celular: o texto principal ocupa a linha de cima; números e botões embaixo */
@media (max-width: 480px) {
  .it-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 40px 40px; grid-template-areas: "food food food food" "qty unit up del" "scale scale scale scale"; }
  .ph-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 40px 40px; grid-template-areas: "name name name name" "from to up del" "desc desc desc desc"; }
}
.ph-desc textarea { min-height: 42px; padding-top: 10px; padding-bottom: 10px; line-height: 1.45; }

/* ── Barra de status do iPhone (app instalado): faixa sólida, o conteúdo não passa por trás do relógio ── */
body::before { content: ""; position: fixed; top: 0; left: 0; right: 0; height: env(safe-area-inset-top, 0px); background: var(--bg); z-index: 25; pointer-events: none; }

/* ── Ações dos cartões: Salvar e Cancelar juntos; ordem e Remover no outro grupo ── */
.form-actions { display: flex; flex-wrap: wrap; gap: 10px 8px; align-items: center; justify-content: space-between; }
.fa-main, .fa-sub { display: flex; gap: 8px; align-items: center; }
.fa-sub { flex: 1; justify-content: flex-end; }
.fa-sub .grow { flex: 1; }
.fa-del { display: inline-flex; align-items: center; gap: 6px; }
.fa-del svg { width: 14px; height: 14px; }
@media (max-width: 480px) {
  .form-actions { flex-direction: column; align-items: stretch; }
  .fa-main > .btn { flex: 1; }
  .fa-sub { justify-content: space-between; }
}

/* ── Três campos lado a lado no celular: 2 em cima, o 3º com a linha inteira ── */
@media (max-width: 480px) {
  .grid3 { grid-template-columns: 1fr 1fr; }
  .grid3 > :nth-child(3) { grid-column: 1 / -1; }
}

/* Pontuação (admin): pesos por tipo em grade */
.weights { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; align-items: end; }

/* ═════════ Animações ═════════
   Curtas (0,2–0,8 s), com a mesma curva, em dourado. Com "reduzir movimento" ligado, a regra
   global lá do início desliga tudo; por isso cada animação só descreve o "de onde vem" e o
   estado final é o normal. */
:root { --ease: cubic-bezier(.2, .7, .2, 1); }

/* Abertura */
.splash { position: fixed; inset: 0; z-index: 60; display: grid; place-content: center; justify-items: center; gap: 18px;
  background: var(--bg); transition: opacity .4s ease, visibility .4s; }
.splash.out { opacity: 0; visibility: hidden; }
.sp-mark { width: 96px; height: 96px; overflow: visible; }
.sp-a polygon, .sp-bar, .sp-base { fill: var(--accent); }
.sp-a { animation: sp-rise .7s var(--ease) backwards; }
.sp-bar { transform-box: fill-box; transform-origin: center; animation: sp-grow .45s var(--ease) .45s backwards; }
.sp-base { transform-box: fill-box; transform-origin: center; animation: sp-grow .6s var(--ease) .25s backwards; }
.sp-name { font-family: var(--display); font-size: 30px; letter-spacing: 8px; padding-left: 8px; color: var(--text);
  animation: sp-name .7s var(--ease) .5s backwards; }
@keyframes sp-rise { from { opacity: 0; transform: translateY(18px); } }
@keyframes sp-grow { from { transform: scaleX(0); } }
@keyframes sp-name { from { opacity: 0; letter-spacing: 16px; } }

/* Entrada de tela */
.enter { animation: rise .45s var(--ease) backwards; animation-delay: var(--d, 0ms); }
@keyframes rise { from { opacity: 0; transform: translateY(12px); } }

/* Menu inferior: traço dourado que desliza até a aba ativa */
nav.tabs .in { position: relative; }
.tab-ind { position: absolute; top: -7px; left: 0; width: 20%; height: 2px; display: flex; justify-content: center; pointer-events: none;
  transform: translateX(calc(var(--i, 0) * 100%)); transition: transform .35s var(--ease), opacity .2s; }
.tab-ind::before { content: ""; width: 34px; height: 2px; background: var(--accent2); box-shadow: 0 0 10px var(--glow); }
.tab-ind.off { opacity: 0; }
nav.tabs button { transition: color .25s; }
nav.tabs button svg { transition: transform .25s var(--ease); }
nav.tabs button.on svg { transform: translateY(-2px); }

/* Toque: botões afundam de leve */
.btn:active, .chip:active, .icon-btn:active, .check:active, .set-ok:active, .sel-btn:active, .cal button:active, nav.tabs button:active { transform: scale(.96); }

/* Registrar: o botão pula com um anel dourado */
.fx-pop { animation: pop .42s cubic-bezier(.3, 1.5, .5, 1); }
@keyframes pop {
  0% { transform: scale(.85); box-shadow: 0 0 0 0 var(--glow); }
  60% { transform: scale(1.08); }
  100% { transform: scale(1); box-shadow: 0 0 0 12px transparent; }
}
/* Água: copos novos enchem de baixo para cima; a barra corre até o novo valor */
.cup.fx-fill { transform-origin: bottom; animation: fill .45s var(--ease) backwards; }
@keyframes fill { from { transform: scaleY(.2); background: var(--field); } }
/* Score: pulsa quando muda; ao abrir o Hoje o anel se desenha */
.fx-bump { animation: bump .55s var(--ease); }
@keyframes bump { 40% { transform: scale(1.16); color: var(--accent2); } }
.ring-wrap.draw .seg { stroke-dasharray: 1; animation: dash .9s var(--ease) backwards; animation-delay: calc(var(--d, 0ms) + .15s); }
@keyframes dash { from { stroke-dashoffset: 1; } }

/* Avisos e painel de descanso sobem da base; cartões abrem com leve fade */
.toast { animation: toast-in .3s var(--ease); }
@keyframes toast-in { from { opacity: 0; transform: translate(-50%, 14px); } }
.rest-in.up { animation: up .38s var(--ease); }
@keyframes up { from { opacity: 0; transform: translateY(24px); } }
details[open] > :not(summary) { animation: open .28s var(--ease); }
@keyframes open { from { opacity: 0; transform: translateY(-4px); } }

/* ── Notificações ── */
.notif-dev { gap: 10px; flex-wrap: wrap; }
.notif-group { padding: 14px; border: 1px solid var(--border); border-radius: var(--r); background: var(--surface); display: grid; gap: 12px; }
.switch { display: flex; align-items: flex-start; gap: 12px; cursor: pointer; }
.switch input { appearance: none; -webkit-appearance: none; flex: none; width: 40px; height: 24px; margin-top: 1px; border-radius: 12px;
  background: var(--border2); position: relative; cursor: pointer; transition: background .2s; }
.switch input::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: var(--soft); transition: transform .2s var(--ease), background .2s; }
.switch input:checked { background: var(--accent); }
.switch input:checked::after { transform: translateX(16px); background: var(--on-accent); }
.switch > span { font-family: var(--display); font-size: 19px; letter-spacing: 1px; line-height: 1.2; color: var(--text); }
.switch small { display: block; font-family: var(--mono); font-size: 11px; letter-spacing: .5px; color: var(--muted); }
.switch.sm > span { font-family: var(--body); font-size: 14px; letter-spacing: 0; }
.switch.sm input { width: 34px; height: 20px; } .switch.sm input::after { width: 14px; height: 14px; } .switch.sm input:checked::after { transform: translateX(14px); }
.notif-list { display: grid; gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: var(--r); overflow: hidden; }
.notif-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; background: var(--bg); }
.notif-before { display: flex; align-items: center; gap: 6px; flex: none; }
.notif-before input { width: 64px; height: 36px; min-height: 36px; padding: 0 8px; text-align: center; }
.notif-before em { font-style: normal; font-family: var(--mono); font-size: 10px; color: var(--muted); white-space: nowrap; }
.notif-admin { margin-top: 22px; padding-top: 18px; border-top: 1px dashed var(--border2); }
.ann-list { display: grid; gap: 8px; margin-top: 6px; }
.ann { display: grid; gap: 2px; padding: 10px 12px; border-left: 3px solid var(--accent); background: var(--surface); border-radius: 0 var(--r) var(--r) 0; }
.ann b { font-family: var(--display); font-weight: 400; font-size: 17px; letter-spacing: 1px; color: var(--accent); }
.ann span { font-size: 13px; color: var(--soft); }
.ann small { font-family: var(--mono); font-size: 10px; color: var(--muted); }

/* ── Barra superior (some ao rolar para baixo) ── */
:root { --ab-h: 52px; }
.appbar { position: fixed; top: env(safe-area-inset-top, 0px); left: 0; right: 0; z-index: 24; height: var(--ab-h);
  display: flex; align-items: center; justify-content: space-between; padding: 0 16px; max-width: 720px; margin: 0 auto;
  background: var(--bar-glass); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border); transition: transform .28s var(--ease); }
body.ab-hide .appbar { transform: translateY(calc(-100% - env(safe-area-inset-top, 0px))); }
body.has-appbar .app { padding-top: calc(env(safe-area-inset-top, 0px) + var(--ab-h)); }
.ab-brand { background: none; border: 0; cursor: pointer; font-family: var(--display); font-size: 24px; letter-spacing: 3px; color: var(--text); padding: 4px 0; }
.ab-brand span { color: var(--accent); }
.ab-right { display: flex; align-items: center; gap: 10px; }
.ab-bell { position: relative; width: 40px; height: 40px; }
.ab-bell.has { color: var(--accent); border-color: var(--accent-line); }
.ab-badge { position: absolute; top: -5px; right: -5px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px;
  background: var(--accent); color: var(--on-accent); font-family: var(--mono); font-size: 10px; font-weight: 500; line-height: 18px; text-align: center; }
.ab-avatar { width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--accent); background: var(--grad-avatar);
  color: var(--accent); font-family: var(--display); font-size: 19px; letter-spacing: 0; cursor: pointer; display: grid; place-items: center; }
.ab-avatar.on { background: var(--accent); color: var(--on-accent); }
/* o índice de Ajustes gruda logo abaixo da barra quando ela está visível */
body.has-appbar:not(.ab-hide) .sec-nav { top: calc(env(safe-area-inset-top, 0px) + var(--ab-h)); }
.sec-nav { transition: top .28s var(--ease); }
body.has-appbar:not(.ab-hide) #aj-perfil, body.has-appbar:not(.ab-hide) #aj-aparencia, body.has-appbar:not(.ab-hide) #aj-nutricao, body.has-appbar:not(.ab-hide) #aj-habitos,
body.has-appbar:not(.ab-hide) #aj-pontos, body.has-appbar:not(.ab-hide) #aj-notif, body.has-appbar:not(.ab-hide) #aj-refeicoes,
body.has-appbar:not(.ab-hide) #aj-plano, body.has-appbar:not(.ab-hide) #aj-dados, body.has-appbar:not(.ab-hide) #aj-usuarios {
  scroll-margin-top: calc(env(safe-area-inset-top, 0px) + var(--ab-h) + 62px); }

/* ── Painel do sino ── */
.inbox { position: fixed; z-index: 23; left: 0; right: 0; top: calc(env(safe-area-inset-top, 0px) + var(--ab-h)); padding: 8px 10px;
  max-width: 720px; margin: 0 auto; }
.ib-card { background: var(--surface); border: 1px solid var(--accent); border-radius: var(--r); box-shadow: 0 18px 40px var(--shadow);
  max-height: 70vh; display: flex; flex-direction: column; overflow: hidden; animation: open .25s var(--ease); }
.ib-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px 10px 16px; border-bottom: 1px solid var(--border); }
.ib-head .row { gap: 6px; }
.ib-list { overflow-y: auto; overscroll-behavior: contain; }
.ib-item { display: grid; gap: 3px; padding: 12px 16px; border-top: 1px solid var(--border); }
.ib-item:first-child { border-top: 0; }
.ib-item.new { background: var(--tint); box-shadow: inset 3px 0 0 var(--accent); }
.ib-item b { font-family: var(--display); font-weight: 400; font-size: 18px; letter-spacing: 1px; color: var(--text); line-height: 1.2; }
.ib-item span { font-size: 13px; color: var(--soft); }
.ib-meta { display: flex; align-items: center; gap: 8px; }
.ib-meta small { font-family: var(--mono); font-size: 10px; color: var(--muted); }
.ib-empty { padding: 22px 16px; }

/* ── Cartão da conta (topo de Perfil) ── */
.account-card { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.ac-avatar { width: 56px; height: 56px; border-radius: 50%; border: 1px solid var(--accent); background: var(--grad-avatar);
  color: var(--accent); font-family: var(--display); font-size: 28px; display: grid; place-items: center; flex: none; }
.ac-name { font-family: var(--display); font-size: 24px; letter-spacing: 1px; line-height: 1.1; }
.ac-mail { font-size: 13px; color: var(--soft); word-break: break-all; }
.ac-meta { display: flex; gap: 8px; align-items: center; margin-top: 4px; font-family: var(--mono); font-size: 11px; color: var(--muted); }

/* Inicial do avatar centralizada: sem recuo do botão, line-height 1 e ajuste medido da Bebas Neue
   (o desenho das letras fica 0,05 em acima do centro da linha). */
.ab-avatar, .ac-avatar { padding: 0; line-height: 1; overflow: hidden; }
.ab-avatar > span, .ac-avatar > span { display: block; transform: translateY(.05em); }
.ab-avatar img, .ac-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ── Aparência ── */
.seg { display: flex; gap: 6px; flex-wrap: wrap; }
.swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 8px; }
.swatch { display: flex; align-items: center; gap: 8px; padding: 8px 10px; min-height: 44px; cursor: pointer;
  background: var(--field); border: 1px solid var(--border2); border-radius: var(--r); color: var(--soft);
  font-family: var(--mono); font-size: 11px; letter-spacing: 1px; text-transform: uppercase; }
.swatch i { width: 18px; height: 18px; border-radius: 50%; background: var(--c); flex: none; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .15); }
.swatch.on { border-color: var(--c); color: var(--text); box-shadow: 0 0 0 1px var(--c); }

/* ── Foto de perfil ── */
label.ac-avatar { cursor: pointer; position: relative; }
.ac-photo { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; }
.ac-photo .chip { min-height: 32px; padding: 5px 10px; font-size: 10px; }
.ac-photo label.chip { display: inline-flex; align-items: center; }

/* ── Didática: textos de apoio, ajuda "?" e estados vazios ── */
.intro { font-size: 13px; color: var(--soft); line-height: 1.6; margin: -4px 0 12px; }
.block-cta { margin: 0 0 12px; gap: 6px; flex-wrap: wrap; }
.qh { display: inline-grid; place-items: center; width: 16px; height: 16px; margin-left: 6px; padding: 0; vertical-align: 1px; cursor: pointer;
  border-radius: 50%; border: 1px solid var(--border2); background: var(--field); color: var(--accent);
  font-family: var(--mono); font-size: 10px; letter-spacing: 0; line-height: 1; text-transform: none; }
.qh:hover { border-color: var(--accent); }
.qh-pop { position: fixed; z-index: 40; padding: 12px 14px; border: 1px solid var(--accent); border-radius: var(--r); background: var(--surface);
  box-shadow: 0 12px 30px var(--shadow); font-size: 13px; line-height: 1.55; color: var(--soft); animation: open .2s var(--ease); }
.empty-card { padding: 18px; border: 1px dashed var(--border2); border-radius: var(--r); background: var(--surface); display: grid; gap: 10px; }
.empty-card b { font-family: var(--display); font-weight: 400; font-size: 22px; letter-spacing: 1px; }
.empty-card p { font-size: 14px; color: var(--soft); }

/* ── Guia "Monte seu Areté" ── */
.guide { background: var(--grad); border-left: 3px solid var(--accent); }
.guide-count { font-family: var(--display); font-size: 30px; color: var(--accent); }
.guide-steps { list-style: none; display: grid; gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: var(--r); overflow: hidden; margin-top: 10px; }
.guide-steps li { display: flex; gap: 12px; padding: 12px 14px; background: var(--surface); }
.guide-steps li.done { opacity: .6; }
.gs-n { flex: none; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--accent);
  font-family: var(--display); font-size: 15px; color: var(--accent); }
.gs-n svg { width: 14px; height: 14px; }
.guide-steps li.done .gs-n { background: var(--accent); color: var(--on-accent); }
.guide-steps b { display: block; font-family: var(--display); font-weight: 400; font-size: 19px; letter-spacing: 1px; line-height: 1.2; }
.guide-steps small { display: block; font-size: 13px; color: var(--soft); line-height: 1.5; margin-top: 2px; }
.gs-act { display: flex; gap: 6px; margin-top: 10px; flex-wrap: wrap; }

/* ── Escolha de hábitos ── */
.pick-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 8px; margin-top: 10px; }
.pick { display: grid; gap: 4px; text-align: left; padding: 12px 14px; cursor: pointer; border: 1px solid var(--border2); border-radius: var(--r);
  background: var(--surface); color: var(--text); transition: border-color .2s, background .2s; }
.pick.on { border-color: var(--accent); background: var(--tint); box-shadow: inset 3px 0 0 var(--accent); }
.pick.had { opacity: .55; cursor: default; }
.pick-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.pick-top b { font-family: var(--display); font-weight: 400; font-size: 19px; letter-spacing: 1px; }
.pick-top i { font-style: normal; font-family: var(--mono); font-size: 10px; color: var(--accent); display: grid; place-items: center; min-width: 22px; height: 22px; }
.pick-top i svg { width: 14px; height: 14px; }
.pick-d { font-size: 13px; color: var(--soft); line-height: 1.5; }
.pick-how { font-family: var(--mono); font-size: 11px; color: var(--muted); line-height: 1.5; }
.pick-bar { position: sticky; bottom: calc(env(safe-area-inset-bottom, 0px) + 70px); padding: 10px 20px; background: linear-gradient(to top, var(--bg) 70%, transparent); }

/* ── Modelos ── */
.goal-chips { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 14px; }
.model-list { display: grid; gap: 12px; }
.model { display: grid; gap: 8px; padding: 16px; border: 1px solid var(--border2); border-radius: var(--r); background: var(--surface); text-align: left; }
.model.scratch { border-style: dashed; cursor: pointer; color: var(--text); }
.model.scratch b { font-family: var(--display); font-weight: 400; font-size: 20px; letter-spacing: 1px; }
.model.scratch span { font-size: 13px; color: var(--soft); }
.model-tags { display: flex; gap: 6px; flex-wrap: wrap; }
.model-name { font-family: var(--display); font-weight: 400; font-size: 22px; letter-spacing: 1px; line-height: 1.15; }
.model-desc { font-size: 14px; color: var(--soft); line-height: 1.55; }
.model-author { font-family: var(--mono); font-size: 10px; letter-spacing: 1px; color: var(--muted); text-transform: uppercase; }
.model-more summary { font-family: var(--mono); font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--accent); padding: 4px 0; }
.mm-row { display: grid; gap: 2px; padding: 8px 0; border-top: 1px solid var(--border); }
.mm-row b { font-family: var(--display); font-weight: 400; font-size: 16px; letter-spacing: 1px; }
.mm-row span { font-size: 12px; color: var(--soft); line-height: 1.5; }

/* ── Publicar modelo (admin) ── */
.publish { margin: 0 0 14px; padding: 14px; border: 1px solid var(--accent-line); border-radius: var(--r); background: var(--tint); }
.published { margin: 0 0 14px; }
.pub-row { padding: 8px 0; border-top: 1px solid var(--border); gap: 10px; }
.pub-row b { display: block; font-size: 14px; } .pub-row small { font-family: var(--mono); font-size: 10px; color: var(--muted); }

/* ── Sino: apagar ── */
.ib-del { margin-left: auto; width: 28px; height: 28px; border: 0; background: none; color: var(--muted); font-size: 20px; line-height: 1; cursor: pointer; border-radius: 50%; }
.ib-del:hover { color: var(--danger); background: var(--danger-tint); }
.ib-item.gone { opacity: 0; transform: translateX(20px); transition: opacity .18s, transform .18s; }
.ib-x { width: 36px; height: 36px; border: 0; border-radius: 50%; background: none; color: var(--muted); font-size: 24px; line-height: 1; cursor: pointer; }
.ib-x:hover { color: var(--text); background: var(--field); }
.ib-foot { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 10px 12px; border-top: 1px solid var(--border); }

.member.pending { background: var(--tint); box-shadow: inset 3px 0 0 var(--accent); }

/* ── Computador (≥1024px): barra lateral no lugar do menu de baixo e da barra superior ──
   Tudo aqui vale só para telas largas; o celular não muda. Só usar tokens (nada de cor fixa). */
.side-only, nav.tabs .side-only { display: none; }
.cols, .cols > .col { display: contents; } /* celular: blocos em sequência, como sempre */
@media (min-width: 1024px) {
  :root { --side: 240px; }
  body:has(#tabs:not([hidden])) { padding-left: var(--side); }
  .appbar { display: none !important; }
  body.has-appbar .app { padding-top: env(safe-area-inset-top, 0px); }
  .app { max-width: 880px; padding-bottom: 56px; }
  body[data-route="ajustes"] .app { max-width: 1360px; }
  body[data-route="hoje"] .app, body[data-route="treino"] .app, body[data-route="mes"] .app,
  body[data-route="evolucao"] .app, body[data-route="estudo"] .app { max-width: 1180px; }

  /* Duas colunas (helper cols() no app.js): A à esquerda, B à direita, separadas por uma linha */
  .cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
  .cols > .col { display: block; min-width: 0; }
  .cols > .col + .col { border-left: 1px solid var(--border); }
  .cols > .col > .block { padding-left: 28px; padding-right: 28px; }
  .cols > .col > .block:last-child { border-bottom: 0; }
  /* Hoje: o score fica à vista enquanto a linha do dia rola */
  body[data-route="hoje"] .cols { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); }
  body[data-route="hoje"] .cols > .col:first-child { position: sticky; top: 0; }
  body[data-route="hoje"] .hero-score, body[data-route="hoje"] .legend { padding-left: 28px; padding-right: 28px; }

  /* Barra lateral */
  nav.tabs { top: 0; right: auto; width: var(--side); border-top: 0; border-right: 1px solid var(--border);
    padding: calc(env(safe-area-inset-top, 0px) + 22px) 14px calc(env(safe-area-inset-bottom, 0px) + 14px); }
  nav.tabs .in { max-width: none; height: 100%; display: flex; flex-direction: column; gap: 2px; }
  nav.tabs .side-only { display: flex; }
  .tab-ind { display: none; }
  nav.tabs button.tab, nav.tabs button.side-link { display: flex; align-items: center; gap: 12px; padding: 11px 12px; border-radius: var(--r);
    font-size: 11px; letter-spacing: 2px; text-align: left; transition: color .2s, background .2s; }
  nav.tabs button.tab:hover, nav.tabs button.side-link:hover { color: var(--text); background: var(--hover); }
  nav.tabs button.on { color: var(--accent); background: var(--tint); box-shadow: inset 3px 0 0 var(--accent); }
  nav.tabs button.on svg { transform: none; }
  nav.tabs button svg { flex: none; }
  nav.tabs .side-brand { display: block; background: none; border: 0; cursor: pointer; padding: 0 12px 22px; font-family: var(--display); font-size: 32px;
    letter-spacing: 4px; line-height: 1; text-transform: none; color: var(--text); text-align: left; }
  .side-brand span { color: var(--accent); }
  .side-sep { margin: 18px 12px 6px; font-family: var(--mono); font-size: 10px; letter-spacing: 3px; text-transform: uppercase; color: var(--faint); }
  .side-foot { margin-top: auto; align-items: center; gap: 10px; padding: 14px 4px 0; border-top: 1px solid var(--border); }
  /* os botões do pé voltam ao próprio estilo (a regra geral dos botões do menu não vale aqui) */
  nav.tabs .side-foot .ab-avatar { flex: none; display: grid; padding: 0; border: 1px solid var(--accent); background: var(--grad-avatar);
    color: var(--accent); font-family: var(--display); font-size: 19px; letter-spacing: 0; }
  nav.tabs .side-foot .ab-avatar.on { background: var(--accent); color: var(--on-accent); }
  nav.tabs .side-foot .ab-bell { flex: none; display: grid; padding: 0; background: var(--field); border: 1px solid var(--border2); }
  nav.tabs .side-foot .ab-bell.has { color: var(--accent); border-color: var(--accent-line); }
  nav.tabs .side-foot .ab-bell:hover { color: var(--accent); border-color: var(--accent); }
  nav.tabs .sf-who { flex: 1; min-width: 0; display: grid; justify-items: start; gap: 0; text-align: left; background: none; border: 0; cursor: pointer; padding: 0;
    font-family: var(--body); letter-spacing: 0; text-transform: none; }
  nav.tabs .sf-who b { font-family: var(--display); font-weight: 400; font-size: 18px; letter-spacing: 1px; line-height: 1.1; color: var(--text);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  nav.tabs .sf-who small { font-size: 11px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  nav.tabs .sf-who:hover b { color: var(--accent); }

  /* Sino abre ao lado da barra, perto do botão */
  .inbox { left: calc(var(--side) + 12px); right: auto; top: auto; bottom: 14px; width: 400px; max-width: none; margin: 0; padding: 0; }

  /* Descanso do treino: cartão no canto, sem cobrir a tela */
  .rest-panel { left: auto; right: 24px; bottom: 24px; width: 400px; padding: 0; }
  .rest-in { max-width: none; box-shadow: 0 16px 40px var(--shadow); }
  body.resting .app { padding-bottom: 200px; }
  .toast, body.resting .toast { bottom: 24px; left: calc(50% + var(--side) / 2); }
  .pick-bar { bottom: 0; }

  /* Perfil: menu numa coluna fixa à esquerda, a tela aberta à direita */
  .aj-layout { display: grid; grid-template-columns: 360px minmax(0, 1fr); align-items: start; }
  .aj-layout > :not(.aj-menu):not(.aj-pane) { grid-column: 1 / -1; }
  /* sem rolagem própria (a barra padrão do navegador fugia do design): o menu rola junto com a página */
  .aj-layout > .aj-menu, .aj-layout.has-sec > .aj-menu { grid-column: 1; display: block; padding: 20px 20px 28px 20px; }
  .aj-layout > .aj-pane { grid-column: 2; border-left: 1px solid var(--border); min-height: 70vh; }
  .aj-back:not(.keep) { display: none; }
  .aj-menu .account-card { padding: 16px; }
  /* Mais campos por linha: fases numa linha só; nutrição em 3 colunas */
  .ph-row { grid-template-columns: minmax(0, 1fr) 84px 96px minmax(0, 1.4fr) 40px 40px; grid-template-areas: "name from to desc up del"; }
  .hab-card { padding: 14px 18px; }
}
/* Computador estreito (1024–1279px): a coluna do score fica apertada; usa o anel compacto do celular */
@media (min-width: 1024px) and (max-width: 1279px) {
  body[data-route="hoje"] .hero-score { grid-template-columns: 124px 1fr; gap: 16px; }
  body[data-route="hoje"] .ring-wrap { width: 124px; }
  body[data-route="hoje"] .ring-score { font-size: 46px; }
  body[data-route="hoje"] .ring-label { font-size: 8px; letter-spacing: 1.5px; }
  body[data-route="hoje"] .hero-meta { gap: 14px 12px; }
  body[data-route="hoje"] .hero-stat .val { font-size: 24px; }
  body[data-route="hoje"] .hero-stat .key { font-size: 9px; letter-spacing: 1.5px; }
}

/* ── Suporte ── */
.support-card { display: flex; align-items: center; justify-content: space-between; gap: 12px 20px; flex-wrap: wrap; background: var(--grad-soft); }
.support-card h2 { margin-bottom: 10px; }
/* o texto nunca encolhe abaixo de 260px: sem espaço, os botões descem para a linha de baixo */
.support-card > .grow { flex: 1 1 260px; }
.support-card > .row { flex: 0 1 auto; gap: 8px; }
@media (max-width: 600px) {
  .support-card { flex-direction: column; align-items: stretch; }
  .support-card > .grow { flex: none; }
  .support-card > .row .btn { flex: 1 1 140px; text-align: center; }
}
.sup-n { display: inline-block; min-width: 20px; height: 20px; padding: 0 6px; margin-left: 6px; border-radius: 10px; background: var(--accent); color: var(--on-accent);
  font-family: var(--mono); font-size: 11px; line-height: 20px; letter-spacing: 0; text-align: center; vertical-align: 2px; }
.sup-kinds { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.sup-kinds .choice { display: grid; gap: 2px; text-align: left; padding: 12px 14px; cursor: pointer; border: 1px solid var(--border2); border-radius: var(--r);
  background: var(--surface); color: var(--text); transition: border-color .2s, background .2s; }
.sup-kinds .choice b { font-family: var(--display); font-weight: 400; font-size: 19px; letter-spacing: 1px; }
.sup-kinds .choice span { font-size: 13px; color: var(--soft); }
.sup-kinds .choice.on { border-color: var(--accent); background: var(--tint); box-shadow: inset 3px 0 0 var(--accent); }
.sup-attach { gap: 8px; flex-wrap: wrap; }
.sup-attach label.chip { display: inline-flex; align-items: center; gap: 8px; }
.sup-attach img { width: 36px; height: 36px; object-fit: cover; border-radius: var(--r-sm); }
.sup-list { border: 1px solid var(--border); border-radius: var(--r); overflow: hidden; }
.sup-item { display: grid; gap: 6px; width: 100%; text-align: left; padding: 14px 16px; border: 0; border-top: 1px solid var(--border);
  background: var(--surface); color: var(--text); cursor: pointer; }
.sup-item:first-child { border-top: 0; }
.sup-item:hover { background: var(--hover); }
.sup-item .row { gap: 6px; flex-wrap: wrap; }
.sup-item .row small { margin-left: auto; font-family: var(--mono); font-size: 10px; color: var(--muted); }
.sup-item b { font-family: var(--display); font-weight: 400; font-size: 20px; letter-spacing: 1px; line-height: 1.2; }
.sup-new { font-family: var(--mono); font-size: 10px; letter-spacing: 1px; text-transform: uppercase; color: var(--accent); }
.sup-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 8px var(--glow); }
.sup-msgs { display: grid; gap: 12px; }
.sup-msg { max-width: 85%; padding: 12px 14px; border: 1px solid var(--border2); border-radius: var(--r); background: var(--surface); }
.sup-msg.admin { justify-self: start; border-color: var(--accent-line); background: var(--tint); }
.sup-msg:not(.admin) { justify-self: end; }
.sup-msg small { display: block; margin-bottom: 4px; font-family: var(--mono); font-size: 10px; letter-spacing: 1px; color: var(--muted); }
.sup-msg p { white-space: pre-wrap; word-break: break-word; font-size: 14px; line-height: 1.6; }
.sup-msg img { display: block; max-width: 100%; max-height: 360px; margin-top: 8px; border-radius: var(--r-sm); border: 1px solid var(--border2); }
/* contador de respostas novas no "Suporte" da barra lateral (computador) */
nav.tabs .side-link[data-n]::after { content: attr(data-n); margin-left: auto; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px;
  background: var(--accent); color: var(--on-accent); font-size: 10px; line-height: 20px; letter-spacing: 0; text-align: center; }
a.btn { text-decoration: none; display: inline-block; }

/* ── LGPD: aceite dos termos ── */
.consent .intro { font-size: 14px; }
.consent-row { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border: 1px solid var(--border2); border-radius: var(--r);
  background: var(--surface); cursor: pointer; font-size: 14px; line-height: 1.55; color: var(--soft); }
.consent-row:has(input:checked) { border-color: var(--accent); background: var(--tint); }
.consent-row input { width: 20px; height: 20px; flex: none; margin-top: 1px; accent-color: var(--accent); }
.consent-row small { display: block; margin-top: 4px; font-size: 12px; color: var(--muted); }
.consent-row a, #aj-dados a { color: var(--accent); }
.consent-no summary { font-family: var(--mono); font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--muted); padding: 6px 0; }

/* ── Plano: teste grátis e modo só leitura ── */
.plan-bar { display: flex; align-items: center; gap: 12px 16px; flex-wrap: wrap; margin: 12px 20px 0; padding: 12px 14px 12px 16px;
  border: 1px solid var(--border2); border-radius: var(--r); background: var(--surface); }
.plan-bar b { display: block; font-family: var(--mono); font-weight: 400; font-size: 10px; letter-spacing: 2px; text-transform: uppercase; color: var(--accent); }
.plan-bar span { font-size: 13px; color: var(--soft); }
.plan-bar.last { border-color: var(--accent); background: var(--tint); }
.plan-bar.over { border-color: var(--danger-line); background: var(--danger-tint); box-shadow: inset 3px 0 0 var(--danger); }
.plan-bar.over b { color: var(--danger); }
.plan-bar .btn { padding: 9px 16px; font-size: 15px; }

/* ── Convites ── */
.ref-link { display: grid; gap: 10px; margin: 12px 0 4px; }
.ref-link input { font-family: var(--mono); font-size: 13px; color: var(--accent); }
.ref-link .row { gap: 8px; flex-wrap: wrap; }
.ref-list { margin-top: 12px; border: 1px solid var(--border); border-radius: var(--r); overflow: hidden; }
.ref-item { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-top: 1px solid var(--border); background: var(--surface); flex-wrap: wrap; }
.ref-item:first-child { border-top: 0; }
.ref-item .mono { font-size: 13px; color: var(--text); }
.ref-item small { margin-left: auto; font-family: var(--mono); font-size: 10px; color: var(--muted); }

/* ── Compartilhado com o Areté / abrir backup ── */
.share-card { background: var(--grad-soft); box-shadow: inset 3px 0 0 var(--accent); display: grid; gap: 10px; }
.share-text { white-space: pre-wrap; word-break: break-word; font-size: 14px; line-height: 1.6; color: var(--soft);
  max-height: 9.6em; overflow: hidden; padding-left: 12px; border-left: 2px solid var(--accent-line); }
.import-card { margin: 16px 20px; display: grid; gap: 8px; }
.import-card p { font-size: 14px; color: var(--soft); }

/* ── Progresso (Mês | Evolução) e abas internas do Olimpo ── */
.prog-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; margin: 12px 20px 0; padding: 4px; border: 1px solid var(--border2); border-radius: var(--r); background: var(--surface); }
.prog-tabs button { min-height: 38px; border: 0; border-radius: calc(var(--r) - 2px); background: none; color: var(--muted); cursor: pointer;
  font-family: var(--mono); font-size: 11px; letter-spacing: 2px; text-transform: uppercase; transition: background .2s, color .2s; }
.prog-tabs button.on { background: var(--accent); color: var(--on-accent); }

/* ── Olimpo ── */
.ol-crowns { display: flex; align-items: center; gap: 6px; color: var(--accent); position: relative; }
.ol-crowns svg { width: 30px; height: 30px; } .ol-crowns b { font-family: var(--display); font-weight: 400; font-size: 34px; line-height: 1; }
.ol-list, .ol-rest { display: grid; gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: var(--r); overflow: hidden; }
.ol-item, .ol-today-row { display: flex; align-items: center; gap: 14px; width: 100%; padding: 14px 16px; border: 0; background: var(--surface); color: var(--text); text-align: left; cursor: pointer; }
.ol-item:hover, .ol-today-row:hover { background: var(--hover); }
.ol-item.done { opacity: .7; }
.ol-item b, .ol-today-row b { display: block; font-family: var(--display); font-weight: 400; font-size: 21px; letter-spacing: 1px; line-height: 1.15; }
.ol-item small, .ol-today-row small { display: block; font-family: var(--mono); font-size: 10px; letter-spacing: 1px; text-transform: uppercase; color: var(--muted); margin-top: 2px; }
.ol-top { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 6px; }
.ol-top i { font-style: normal; font-size: 12px; color: var(--soft); }
.ol-rank { font-family: var(--display); font-size: 30px; line-height: 1; color: var(--accent); min-width: 42px; text-align: center; }
.ol-today { display: grid; gap: 8px; }
.ol-today-row svg { width: 18px; height: 18px; color: var(--muted); }
.ol-today .ol-today-row { border: 1px solid var(--border); border-radius: var(--r); }
.ol-join h2 { margin-top: 6px; }
.ol-choices { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 8px; }
.ol-choices .choice { display: grid; gap: 2px; padding: 12px 14px; border: 1px solid var(--border2); border-radius: var(--r); background: var(--surface); cursor: pointer; position: relative; }
.ol-choices .choice input { position: absolute; opacity: 0; }
.ol-choices .choice b { font-family: var(--display); font-weight: 400; font-size: 19px; letter-spacing: 1px; }
.ol-choices .choice span { font-size: 13px; color: var(--soft); }
.ol-choices .choice:has(input:checked) { border-color: var(--accent); background: var(--tint); box-shadow: inset 3px 0 0 var(--accent); }
.ol-dur { display: inline-flex; align-items: center; gap: 6px; } .ol-dur input { accent-color: var(--accent); }
.ol-dur:has(input:checked) { border-color: var(--accent); color: var(--accent); }
/* Pódio: 2º, 1º, 3º com degraus */
.podium { display: grid; grid-template-columns: 1fr 1.15fr 1fr; align-items: end; gap: 8px; margin-top: 6px; }
.pd { display: grid; justify-items: center; gap: 6px; text-align: center; min-width: 0; }
.pd b { font-family: var(--display); font-weight: 400; font-size: 18px; letter-spacing: 1px; line-height: 1.1; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pd-val { font-family: var(--mono); font-size: 11px; color: var(--soft); }
.pd-step { width: 100%; display: grid; place-items: center; gap: 2px; border: 1px solid var(--border2); border-bottom: 0; border-radius: var(--r) var(--r) 0 0;
  background: var(--surface); font-family: var(--display); font-size: 30px; color: var(--muted); }
.pd-step svg { width: 22px; height: 22px; color: var(--accent); }
.pd-1 .pd-step { height: 118px; background: var(--grad); border-color: var(--accent); color: var(--accent); }
.pd-2 .pd-step { height: 86px; } .pd-3 .pd-step { height: 64px; }
.pd.me b { color: var(--accent); }
.pd.empty { visibility: hidden; }
.ol-av { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; display: grid; place-items: center; flex: none; border: 1px solid var(--accent-line);
  background: var(--grad-avatar); color: var(--accent); font-family: var(--display); font-size: 19px; line-height: 1; }
.ol-av.lg { width: 58px; height: 58px; font-size: 27px; }
.pd-1 .ol-av.lg { width: 70px; height: 70px; border-color: var(--accent); box-shadow: 0 0 18px var(--glow); }
.ol-rest { margin-top: 14px; }
.ol-row { display: flex; align-items: center; gap: 12px; padding: 10px 14px; background: var(--surface); }
.ol-row.me { background: var(--tint); box-shadow: inset 3px 0 0 var(--accent); }
.ol-row .ol-rank { font-size: 22px; min-width: 32px; }
.ol-row b { font-family: var(--display); font-weight: 400; font-size: 18px; letter-spacing: 1px; }
.ol-row .mono { font-size: 12px; color: var(--soft); }
/* Mural */
.ol-photo { display: grid; place-items: center; min-height: 120px; border: 1px dashed var(--border2); border-radius: var(--r); background: var(--surface);
  color: var(--muted); cursor: pointer; overflow: hidden; font-family: var(--mono); font-size: 12px; letter-spacing: 1px; }
.ol-photo img { width: 100%; max-height: 420px; object-fit: cover; }
.ol-post { padding: 14px 0; border-top: 1px solid var(--border); display: grid; gap: 10px; }
.ol-post:first-child { border-top: 0; padding-top: 0; }
.ol-post header { display: flex; align-items: center; gap: 10px; }
.ol-post header b { display: block; font-family: var(--display); font-weight: 400; font-size: 18px; letter-spacing: 1px; line-height: 1.1; }
.ol-post header small { font-family: var(--mono); font-size: 10px; color: var(--muted); }
.ol-post header .chip { min-height: 30px; padding: 4px 10px; font-size: 10px; }
.ol-img { width: 100%; max-height: 520px; object-fit: cover; border-radius: var(--r); border: 1px solid var(--border2); background: var(--surface); }
.ol-post > p { font-size: 15px; line-height: 1.6; white-space: pre-wrap; word-break: break-word; }
.ol-post footer { display: flex; align-items: center; gap: 8px; }
.ol-post footer .chip { min-height: 34px; }
.ol-laurel { display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 4px 12px; border: 1px solid var(--border2); border-radius: var(--r);
  background: var(--field); color: var(--muted); cursor: pointer; font-family: var(--mono); font-size: 12px; }
.ol-laurel svg { width: 18px; height: 18px; }
.ol-laurel.on { color: var(--accent); border-color: var(--accent); background: var(--tint); }
.ol-comments { display: grid; gap: 6px; padding: 10px 12px; border-left: 2px solid var(--accent-line); }
.ol-comments p { font-size: 14px; color: var(--soft); } .ol-comments b { color: var(--text); font-weight: 500; }
.ol-comments form { gap: 6px; margin-top: 4px; } .ol-comments input { min-height: 38px; }
.ol-comments .btn { padding: 8px 14px; font-size: 15px; }

/* "treino só vale com foto": aparece só quando a modalidade escolhida é Treinos */
.ol-proof { display: none; }
form:is([data-form="olCreate"], [data-form="chSend"]):has(input[name="metric"][value="workouts"]:checked) .ol-proof { display: flex; }
/* Modalidades por esporte: escolher o esporte (Quilômetros e Sessões) e o aviso da foto (as três) */
.ol-sport, .ol-photo-rule { display: none !important; }
form:has(input[name="metric"]:is([value="km"], [value="sessions"]):checked) .ol-sport { display: block !important; }
form:has(input[name="metric"]:is([value="km"], [value="minutes"], [value="sessions"]):checked) .ol-photo-rule { display: block !important; }
.ol-photo-rule svg { width: 11px; height: 11px; vertical-align: -1px; color: var(--accent); }

/* ── Pessoas (Olimpo → Pessoas): perfil social, busca, seguir ── */
.ol-av.xl { width: 76px; height: 76px; font-size: 34px; }
.p-list { display: grid; }
.p-row { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-top: 1px solid var(--border); }
/* Listas longas (busca, seguidores, pódio): o navegador só desenha o que está na tela */
.p-row, .ol-row { content-visibility: auto; contain-intrinsic-size: auto 62px; }
.p-more-btn { margin-top: 12px; }
.p-row:first-child { border-top: 0; }
.p-open { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0; background: none; border: 0; padding: 0; color: var(--text); text-align: left; cursor: pointer; font: inherit; }
.p-open .grow { min-width: 0; display: grid; gap: 1px; }
.p-open b, .p-me b { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.p-open small, .p-me small { color: var(--muted); font-size: 12.5px; display: flex; align-items: center; gap: 4px; }
.p-lock, .p-me small svg, .p-head .muted svg, .choice b svg { display: inline-grid; width: 12px; height: 12px; vertical-align: -1px; }
.p-lock svg { width: 12px; height: 12px; }
.p-row .chip { flex: none; min-height: 34px; padding: 5px 12px; font-size: 11px; }
.p-acts { display: flex; gap: 6px; flex: none; align-items: center; }
.p-acts .icon-btn { width: 34px; height: 34px; }
.p-me { display: flex; align-items: center; gap: 14px; }
.p-me .grow { min-width: 0; display: grid; gap: 2px; }
.p-counts { display: flex; gap: 16px; margin-top: 6px; flex-wrap: wrap; }
.p-counts > * { background: none; border: 0; padding: 0; color: var(--soft); font: inherit; font-size: 13px; cursor: pointer; }
.p-counts span { cursor: default; }
.p-counts b { color: var(--text); font-weight: 600; }
.p-search { display: flex; align-items: center; gap: 10px; padding: 0 12px; border: 1px solid var(--border2); border-radius: var(--r); background: var(--field); }
.p-search svg { width: 18px; height: 18px; color: var(--muted); flex: none; }
.p-search input { border: 0; background: none; padding-left: 0; min-height: 44px; }
.p-search:focus-within { border-color: var(--accent); }
.p-search input { flex: 1; min-width: 0; width: 100%; }
.p-search input:focus, .p-search input:focus-visible { outline: none; border: 0; box-shadow: none; } /* o foco aparece na caixa de fora */
#p-results { margin-top: 12px; }
.p-head { display: flex; align-items: flex-start; gap: 16px; }
.p-head .grow { min-width: 0; }
.p-name { font-family: var(--display); font-size: 28px; letter-spacing: 1px; line-height: 1.05; }
.p-bio { margin-top: 8px; color: var(--soft); font-size: 14px; white-space: pre-line; }
.p-actions .row { gap: 8px; }
.p-actions .btn { flex: 1; }
.p-more { width: 46px; height: 46px; font-size: 20px; flex: none; }
.p-menu { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.p-private { justify-items: center; text-align: center; }
.p-private > svg { width: 28px; height: 28px; color: var(--accent); }
.p-badges { display: flex; gap: 8px; flex-wrap: wrap; }
.p-badge { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border: 1px solid var(--border2); border-radius: var(--r); font-size: 13px; color: var(--soft); }
.p-badge svg { width: 18px; height: 18px; }
.p-badge.gold { border-color: var(--accent); color: var(--accent); }
.p-badge b { color: var(--text); }
.at-in { display: flex; align-items: center; border: 1px solid var(--border2); border-radius: var(--r); background: var(--field); padding-left: 12px; }
.at-in b { color: var(--accent); font-weight: 500; }
.at-in input { border: 0; background: none; padding-left: 4px; }
.at-in:focus-within { border-color: var(--accent); }
.h2-sm { font-size: 20px; }
.prog-tabs .sup-n { margin-left: 4px; }

/* ── Perfil: números, esportes e conquistas (fase 2) ── */
.p-me-open { background: none; border: 0; padding: 0; cursor: pointer; border-radius: 50%; }
.p-me-name { background: none; border: 0; padding: 0; color: var(--text); font: inherit; font-weight: 500; text-align: left; cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.p-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.p-tile { display: grid; align-content: start; gap: 4px; padding: 14px 12px; border: 1px solid var(--border); border-radius: var(--r); background: var(--surface); position: relative; }
.p-tile b { font-family: var(--display); font-size: 34px; font-weight: 400; line-height: 1; color: var(--text); }
.p-tile span { font-size: 12px; color: var(--muted); line-height: 1.35; }
.p-tile > svg { position: absolute; top: 12px; right: 10px; width: 18px; height: 18px; color: var(--muted); }
.p-tile.hot { border-color: var(--accent); background: var(--tint); }
.p-tile.hot b, .p-tile.hot > svg { color: var(--accent); }
.p-tile .tag, .block h2 .tag { font-size: 9px; vertical-align: middle; }
.p-tile .tag svg, .block h2 .tag svg { width: 9px; height: 9px; vertical-align: -1px; }
.p-sports { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.p-sport { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--r); }
.p-sport > .sp-ic { width: 24px; height: 24px; margin: 0; }
.p-sport .grow { display: grid; min-width: 0; }
.p-sport b { font-weight: 500; font-size: 14px; }
.p-sport small { color: var(--muted); font-size: 12px; }
.p-bdgs { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; }
.p-bdg { display: flex; gap: 12px; align-items: flex-start; padding: 12px; border: 1px solid var(--border); border-radius: var(--r); opacity: .6; }
.p-bdg.got { opacity: 1; border-color: var(--accent-line, var(--border2)); }
.p-bdg-ic { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--border2); display: grid; place-items: center; color: var(--muted); flex: none; }
.p-bdg-ic svg { width: 22px; height: 22px; }
.p-bdg.got .p-bdg-ic { border-color: var(--accent); color: var(--accent); background: var(--tint); box-shadow: 0 0 14px var(--glow, transparent); }
.p-bdg .grow { display: grid; gap: 5px; min-width: 0; }
.p-bdg b { font-weight: 500; font-size: 14px; }
.p-bdg small { color: var(--muted); font-size: 12px; }
.p-bdg .bar { height: 4px; }
.p-lvl { display: flex; gap: 3px; }
.p-lvl i { width: 14px; height: 4px; border-radius: 2px; background: var(--border2); }
.p-lvl i.on { background: var(--accent); }
.show-list { display: grid; gap: 10px; }
@media (max-width: 420px) { .p-tile b { font-size: 28px; } .p-tile { padding: 12px 10px; } }
.p-tile .p-only { justify-self: start; display: inline-flex; align-items: center; gap: 4px; margin-top: 2px; white-space: nowrap; }
.block h2 .p-only { margin-left: 8px; }

/* ── Desafiar (fase 3) ── */
.p-duel { display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.p-duel svg, .p-challenges h2 svg, form[data-form="chSend"] h2 svg { width: 18px; height: 18px; vertical-align: -2px; }
.p-actions .row { flex-wrap: wrap; }
.p-challenges { border-left: 3px solid var(--accent); background: var(--grad); }
.p-ch { display: flex; align-items: flex-start; gap: 12px; padding: 12px 0; border-top: 1px solid var(--border); }
.p-ch:first-of-type { border-top: 0; }
.p-ch .grow { display: grid; gap: 3px; min-width: 0; }
.p-ch b { font-weight: 500; }
.p-ch small { color: var(--muted); font-size: 12.5px; }
.p-ch .row { gap: 6px; margin-top: 6px; flex-wrap: wrap; }
.p-ch > .chip { flex: none; min-height: 34px; padding: 5px 12px; font-size: 11px; }

/* Hábitos e Dieta em lista (ícone por tipo) */
.aj-add { margin-top: 12px; gap: 8px; flex-wrap: wrap; }
.aj-add .btn { flex: 1; }
#aj-habitos .aj-list, #aj-refeicoes .aj-list { margin-top: 4px; }

/* Ícones na linha do tempo do Hoje */
.tl-title > span:first-child { display: inline-flex; align-items: center; gap: 8px; }
.tl-ic, .tl-title .sp-ic { display: inline-grid; place-items: center; width: 18px; height: 18px; margin: 0; color: var(--accent); flex: none; }
.tl-ic svg { width: 18px; height: 18px; }
.tl.done .tl-ic, .tl.done .tl-title .sp-ic { opacity: .7; }
.h2-ic { display: inline-flex; align-items: center; gap: 10px; }
.h2-ic .tl-ic, .h2-ic .tl-ic svg { width: 22px; height: 22px; }

/* Evolução → Esportes */
.evo-sports { display: flex; gap: 6px; flex-wrap: wrap; }
.evo-sports .chip { display: inline-flex; align-items: center; gap: 6px; }
.evo-sports .chip .sp-ic { width: 16px; height: 16px; margin: 0; color: inherit; }

/* Olimpíada oficial: cartão em destaque (Olimpo, Jogo e Hoje) */
.ol-official { border-left: 3px solid var(--accent); background: var(--grad); }
.ol-official h2 { margin: 6px 0 4px; }
.ol-official.slim p { margin: 6px 0; font-size: 14px; color: var(--soft); }
.ol-off-tag { display: inline-flex; align-items: center; gap: 6px; font-family: var(--mono); font-size: 10px; letter-spacing: 2px; text-transform: uppercase; color: var(--accent); }
.ol-off-tag svg { width: 18px; height: 18px; }
.ol-off-meta { color: var(--soft); font-size: 14px; margin-bottom: 10px; }
.ol-prize { display: flex; gap: 8px; flex-wrap: wrap; margin: 8px 0 10px; }
.ol-prize-i { padding: 6px 10px; border: 1px solid var(--accent-line); border-radius: var(--r); font-size: 13px; color: var(--soft); }
.ol-prize-i b { color: var(--accent); margin-right: 4px; }
.ol-rules { margin: 6px 0 10px; }
.ol-rules summary { cursor: pointer; font-family: var(--mono); font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--muted); }
.ol-rules p { margin-top: 8px; font-size: 14px; color: var(--soft); white-space: pre-line; }
.ol-today-off .ol-rank svg { width: 20px; height: 20px; color: var(--accent); }

/* Perfil social: capa, redes e compartilhar */
.p-cover { margin: 0 20px; aspect-ratio: 3 / 1; max-width: calc(100% - 40px); border-radius: var(--r); overflow: hidden; background: var(--grad); border: 1px solid var(--border); }
.p-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.p-cover.edit { margin: 0; max-width: 100%; display: grid; place-items: center; text-align: center; }
.p-cover.edit span { padding: 12px; font-size: 13px; color: var(--muted); }
.p-head.has-cover { margin-top: -44px; border-top: 0; position: relative; }
.p-head.has-cover > .ol-av { border: 3px solid var(--bg); box-shadow: 0 0 0 1px var(--accent-line); }
.p-links { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; }
.p-link { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border: 1px solid var(--border2); border-radius: var(--r); color: var(--soft); text-decoration: none; font-size: 13px; }
.p-link svg { width: 16px; height: 16px; }
.p-link:hover { border-color: var(--accent); color: var(--text); }
.p-link.main { border-color: var(--accent); color: var(--accent); }
.p-link-fields { display: grid; gap: 8px; }
.p-link-f { display: flex; align-items: center; gap: 0; border: 1px solid var(--border2); border-radius: var(--r); background: var(--field); }
.p-link-f:focus-within { border-color: var(--accent); }
.p-link-ic { display: grid; place-items: center; width: 42px; color: var(--accent); flex: none; }
.p-link-ic svg { width: 18px; height: 18px; }
.p-link-f input { border: 0; background: none; padding-left: 0; min-width: 0; }
.p-me-acts { display: flex; gap: 6px; align-items: center; flex: none; }
.p-me-acts .icon-btn svg, .p-actions .icon-btn svg { width: 18px; height: 18px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.p-head.has-cover > .grow { padding-top: 50px; }
.p-actions .row { flex-wrap: nowrap; gap: 6px; }
.p-actions .row .btn { min-width: 0; padding-left: 10px; padding-right: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.p-actions .row .icon-btn { flex: none; width: 46px; height: 46px; }

/* Capa também no topo do Perfil (menu) e no meu cartão em Pessoas */
.ac-cover { display: block; width: 100%; aspect-ratio: 3 / 1; padding: 0; border: 1px solid var(--border); border-bottom: 0; border-radius: var(--r) var(--r) 0 0; overflow: hidden; background: var(--grad); cursor: pointer; }
.ac-cover img, .p-me-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.aj-menu .ac-cover + .account-card { border-top-left-radius: 0; border-top-right-radius: 0; }
button.p-cover { display: block; width: calc(100% - 40px); padding: 0; cursor: pointer; margin-top: 16px; }

/* Mural: miniatura na lista, foto inteira por cima de tudo no toque */
.ol-img-btn { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; }
.lightbox { position: fixed; inset: 0; z-index: 60; background: rgba(0, 0, 0, .92); display: grid; place-items: center; padding: 16px; animation: fadeIn .15s var(--ease); }
.lightbox img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: var(--r); }
.lightbox .icon-btn { position: absolute; top: calc(env(safe-area-inset-top, 0px) + 12px); right: 12px; font-size: 24px; background: rgba(0, 0, 0, .5); color: #fff; }
@keyframes fadeIn { from { opacity: 0; } }

/* Modal do app (ask): no lugar do confirm/prompt do navegador */
.modal-back { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; padding: 20px; background: rgba(0, 0, 0, .62); backdrop-filter: blur(3px); animation: fadeIn .14s var(--ease); }
.modal-back.out { opacity: 0; transition: opacity .12s; }
.modal { width: min(440px, 100%); padding: 22px 22px 18px; border: 1px solid var(--border2); border-radius: calc(var(--r) + 4px); background: var(--surface);
  box-shadow: 0 24px 60px var(--shadow, rgba(0, 0, 0, .5)), inset 0 1px 0 var(--accent-line); animation: modalUp .18s var(--ease); }
.modal-title { font-family: var(--display); font-weight: 400; font-size: 26px; letter-spacing: 1px; margin: 0 0 8px; }
.modal-text { margin: 0; font-size: 15px; line-height: 1.5; color: var(--soft); white-space: pre-line; }
.modal-in { margin-top: 14px; width: 100%; }
.modal-acts { display: flex; justify-content: flex-end; gap: 8px; margin-top: 18px; flex-wrap: wrap; }
.modal-acts .btn { min-width: 110px; }
@keyframes modalUp { from { opacity: 0; transform: translateY(10px) scale(.98); } }
@media (max-width: 480px) { .modal-acts .btn { flex: 1; } }

/* Barra de rolagem da página nas cores do app (Chrome/Edge/Safari e Firefox) */
html { scrollbar-color: var(--border2) var(--bg); scrollbar-width: thin; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--border2); border-radius: 10px; border: 2px solid var(--bg); }
::-webkit-scrollbar-thumb:hover { background: var(--muted); }
@media (min-width: 1024px) {
  /* Cartão da conta no menu do Perfil: foto, nome numa linha, ações lado a lado */
  .aj-menu .account-card .ac-name { font-size: 22px; }
  .aj-menu .account-card .ac-photo { flex-wrap: nowrap; }
}

/* Olimpo: contagem ao lado do título das seções; "Ver todos" no Hoje */
.h2-n { font-family: var(--mono); font-size: 12px; letter-spacing: 1px; color: var(--muted); vertical-align: middle; margin-left: 6px; }
.ol-today-more small { color: var(--accent); }

/* ── Sessão do treino: progresso, exercício atual aberto, os outros recolhidos ── */
.tprog { margin: 4px 0 14px; font-family: var(--mono); font-size: 11px; letter-spacing: 1px; text-transform: uppercase; color: var(--muted); }
.tprog .bar { margin-top: 8px; }
.trow { display: flex; align-items: center; gap: 12px; width: 100%; padding: 13px 14px; margin-bottom: 6px; border: 1px solid var(--border); border-radius: var(--r);
  background: var(--surface); color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.trow:hover { border-color: var(--border2); }
.trow b { flex: 1; min-width: 0; font-weight: 500; font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.trow .tmeta { flex: none; font-family: var(--mono); font-size: 12px; color: var(--muted); }
.tdot { width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--border2); display: grid; place-items: center; flex: none; }
.tdot svg { width: 12px; height: 12px; }
.trow.done { opacity: .75; }
.trow.done .tdot { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.trow.part .tdot { border-color: var(--accent); }
.tgain { font-style: normal; font-family: var(--mono); font-size: 11px; color: var(--green, #5a8a5a); margin-left: 6px; }
.tcard { padding: 16px; margin-bottom: 6px; border: 1px solid var(--accent); border-radius: calc(var(--r) + 2px); background: var(--grad); }
.tcard-h b { font-family: var(--display); font-weight: 400; font-size: 24px; letter-spacing: 1px; }
.tcard-h .tmeta { font-family: var(--mono); font-size: 12px; color: var(--muted); }
.tsets { display: grid; gap: 4px; margin: 12px 0 14px; }
.tset { display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 6px 10px; border-radius: var(--r); font-size: 15px; }
.tset .tn { width: 18px; flex: none; font-family: var(--mono); font-size: 12px; color: var(--muted); text-align: center; }
.tset.done { width: 100%; border: 0; background: none; color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.tset.done:hover { background: var(--hover); }
.tset .tok { color: var(--accent); display: grid; } .tset .tok svg { width: 16px; height: 16px; }
.tset.next { color: var(--muted); }
.tset.next small { font-family: var(--mono); font-size: 10px; letter-spacing: 1px; text-transform: uppercase; margin-left: 6px; }
.tset.cur { background: var(--surface); border: 1px solid var(--border2); padding: 10px; }
.tset.cur .tn { color: var(--accent); font-size: 14px; }
.tfields { display: flex; gap: 8px; flex: 1; min-width: 0; flex-wrap: wrap; align-items: center; }
.tstep { display: grid; grid-template-columns: 44px minmax(0, 1fr) 44px; flex: 1 1 150px; min-width: 0; border: 1px solid var(--border2); border-radius: var(--r); background: var(--field); overflow: hidden; }
.tstep .icon-btn { width: auto; height: 48px; border: 0; border-radius: 0; background: none; font-size: 20px; color: var(--accent); }
.tstep label { display: flex; align-items: baseline; justify-content: center; gap: 4px; min-width: 0; }
.tstep input { width: 100%; min-width: 0; border: 0; background: none; padding: 0; text-align: right; font-family: var(--display); font-size: 26px; letter-spacing: 1px; color: var(--text); -moz-appearance: textfield; }
.tstep input::-webkit-inner-spin-button, .tstep input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.tstep label span { flex: 1; font-family: var(--mono); font-size: 11px; color: var(--muted); text-transform: uppercase; }
.thold { flex: none; min-height: 48px; }
.tcard .btn.block-w { min-height: 52px; font-size: 16px; }
@media (max-width: 420px) { .tstep { flex-basis: 100%; } }

/* Cronômetro dos exercícios de tempo */
.thold-run { align-items: center; gap: 14px; }
.thold-clock { font-family: var(--display); font-size: 56px; line-height: 1; letter-spacing: 2px; color: var(--accent); }
.thold-run .bar { margin: 8px 0 6px; }
.thold-run .btn { flex: none; min-height: 52px; min-width: 96px; }
.btn.thold { flex: none; min-height: 50px; }
/* Linha recolhida: nome em cima, meta/resultado embaixo (nada cortado) */
.trow .ttxt { flex: 1; min-width: 0; display: grid; gap: 2px; }
.trow .ttxt b { flex: none; white-space: normal; }
.trow .ttxt .tmeta { white-space: normal; }
.tstep { grid-template-columns: 52px minmax(0, 1fr) 52px; }
.tstep .icon-btn.lbl { font-family: var(--mono); font-size: 13px; letter-spacing: 0; }
/* Série atual: carga e repetições sempre uma embaixo da outra, com a largura toda (lado a lado apertava) */
.tfields { flex-direction: column; align-items: stretch; flex-wrap: nowrap; }
.tstep { flex: none; width: 100%; }
.tfields .btn.thold { width: 100%; }

/* Achar pessoas: lupa no topo, nomes do Olimpo que abrem o perfil */
/* Busca de pessoas por cima da tela (celular: tela cheia; computador: painel no centro) */
.find { position: fixed; inset: 0; z-index: 50; background: var(--bg); display: flex; justify-content: center; animation: fadeIn .2s var(--ease); }
.find[hidden] { display: none; }
body.find-on { overflow: hidden; }
body.find-on .toast { z-index: 55; } /* "Pedido enviado." aparece por cima da busca */
.find-panel { width: 100%; max-width: 640px; display: flex; flex-direction: column; min-height: 0;
  padding: calc(env(safe-area-inset-top) + 12px) 16px calc(env(safe-area-inset-bottom) + 16px); }
.find-bar { display: flex; gap: 10px; align-items: center; }
.find-bar .p-search { flex: 1; }
.find-body { flex: 1; overflow-y: auto; padding-top: 16px; display: flex; flex-direction: column; gap: 18px; }
.find-sec .label { margin-bottom: 8px; }
.find-note { border: 1px solid var(--border); border-left: 3px solid var(--accent); border-radius: var(--r); padding: 12px 14px; background: var(--grad); display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.find-note p { margin: 0; font-size: 14px; color: var(--soft); }
.p-search-btn { width: 100%; min-height: 46px; cursor: pointer; text-align: left; font: inherit; color: var(--muted); }
@media (min-width: 1024px) {
  .find { background: color-mix(in srgb, var(--bg) 70%, transparent); backdrop-filter: blur(4px); align-items: flex-start; padding-top: 8vh; }
  .find-panel { background: var(--surface); border: 1px solid var(--border2); border-radius: var(--r); box-shadow: 0 24px 60px var(--shadow); max-height: 80vh; padding: 16px; }
}
.p-name-link { background: none; border: 0; padding: 0; font: inherit; font-weight: 700; color: inherit; cursor: pointer; text-align: inherit;
  text-decoration: underline; text-decoration-color: color-mix(in srgb, currentColor 30%, transparent); text-underline-offset: 3px; }
.p-name-link:hover, .p-name-link:focus-visible { color: var(--accent); }
.p-name-link.grow { flex: 1; min-width: 0; }
.pd .p-name-link { display: block; margin: 0 auto; font-family: var(--display); font-weight: 400; font-size: 18px; letter-spacing: 1px; line-height: 1.1; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ol-row .p-name-link { font-family: var(--display); font-weight: 400; font-size: 18px; letter-spacing: 1px; }
.ol-post header .p-name-link { display: block; font-family: var(--display); font-weight: 400; font-size: 18px; letter-spacing: 1px; line-height: 1.1; }
.ol-comments .p-name-link { color: var(--text); font-weight: 500; }

/* Ajustar foto (recorte da foto de perfil e da capa) */
.modal.crop { width: min(560px, 100%); }
.crop-hint { margin: 0 0 12px; font-size: 13px; color: var(--muted); }
.crop-stage { display: block; width: 100%; border-radius: var(--r); background: var(--field); touch-action: none; cursor: grab; user-select: none; }
.crop-stage:active { cursor: grabbing; }
.crop-stage:focus-visible { outline: 1px solid var(--accent); outline-offset: 2px; }
.crop-tools { display: flex; align-items: center; gap: 10px; margin-top: 14px; }
.crop-z { font-family: var(--mono); color: var(--muted); width: 12px; text-align: center; }
.crop-zoom { flex: 1; min-width: 0; height: 28px; background: none; border: 0; padding: 0; accent-color: var(--accent); -webkit-appearance: none; appearance: none; }
.crop-zoom::-webkit-slider-runnable-track { height: 3px; border-radius: 2px; background: var(--border2); }
.crop-zoom::-webkit-slider-thumb { -webkit-appearance: none; width: 20px; height: 20px; margin-top: -8.5px; border-radius: 50%; background: var(--accent); border: 0; }
.crop-zoom::-moz-range-track { height: 3px; border-radius: 2px; background: var(--border2); }
.crop-zoom::-moz-range-thumb { width: 20px; height: 20px; border-radius: 50%; background: var(--accent); border: 0; }
.crop-zoom:focus-visible { outline: none; }
.crop-zoom:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 3px var(--ring); }
@media (max-width: 420px) { .modal.crop { padding: 16px 14px 14px; } .crop-back { padding: 12px; } }

/* Catálogo de exercícios: mapa muscular, seletor e ligação no editor */
.mmap { display: block; width: 100%; max-width: 240px; height: auto; }
.mmap.sm { max-width: 150px; flex: none; }
.mmap .mb { fill: var(--field); stroke: var(--border2); stroke-width: .8; }
.mmap .mm { fill: color-mix(in srgb, var(--muted) 26%, var(--field)); stroke: var(--border2); stroke-width: .5; transition: fill .2s var(--ease); }
.mmap .mm.s { fill: color-mix(in srgb, var(--accent) 42%, var(--field)); }
.mmap .mm.p { fill: var(--accent); }
.mmap text { fill: var(--muted); font-family: var(--mono); font-size: 7px; letter-spacing: 1.5px; }
.ex-cat { display: flex; gap: 14px; align-items: center; padding: 10px; border: 1px solid var(--border); border-radius: var(--r); background: var(--grad); }
.ex-cat-t { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; min-width: 0; }
.ex-cat-t b { font-size: 15px; }
.ex-cat-t small { color: var(--muted); font-size: 12px; line-height: 1.4; }
@media (max-width: 420px) { .ex-cat { flex-direction: column; align-items: stretch; } .mmap.sm { max-width: 180px; margin: 0 auto; } }
.ex-link { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: -4px; font-size: 13px; color: var(--muted); }
.ex-link span { flex: 1 1 100%; }
.ex-link b { color: var(--text); font-weight: 500; }
.link-card { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-bottom: 14px; padding: 12px 14px; border: 1px solid var(--border); border-left: 3px solid var(--accent); border-radius: var(--r); background: var(--grad); }
.link-card p { margin: 4px 0 0; font-size: 13px; color: var(--soft); }
.expick .find-panel { gap: 10px; }
.xp-title { display: flex; align-items: center; justify-content: space-between; }
.xp-title b { font-family: var(--display); font-weight: 400; font-size: 24px; letter-spacing: 1px; }
.xp-filters { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.xp-body { padding-top: 4px; gap: 12px; }
.xp-list { display: grid; }
.xp-row { display: flex; align-items: center; gap: 10px; width: 100%; padding: 11px 2px; background: none; border: 0; border-top: 1px solid var(--border); color: inherit; font: inherit; text-align: left; cursor: pointer; content-visibility: auto; contain-intrinsic-size: auto 58px; }
.xp-row:first-child { border-top: 0; }
.xp-row b { display: block; font-weight: 500; }
.xp-row small { color: var(--muted); font-size: 12px; }
.xp-row .tag { font-style: normal; font-size: 9px; padding: 1px 6px; margin-left: 4px; }
.xp-row:hover b, .xp-row:focus-visible b { color: var(--accent); }
.t-addex { margin: 12px 0 4px; }
.tcard-h .tag { font-size: 9px; vertical-align: middle; margin-left: 4px; }

/* Tela do exercício */
.ex-hero { display: flex; justify-content: center; margin: 4px 0 6px; }
.ex-hero .mmap { max-width: 300px; }
.ex-mus { text-align: center; color: var(--soft); font-size: 13px; margin: 0 0 14px; }
.ex-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.ex-recs { display: grid; }
.ex-rec { display: grid; grid-template-columns: 1fr auto; column-gap: 12px; align-items: baseline; padding: 11px 0; border-top: 1px solid var(--border); }
.ex-rec:first-child { border-top: 0; }
.ex-rec span { color: var(--soft); }
.ex-rec b { font-family: var(--display); font-weight: 400; font-size: 22px; letter-spacing: 1px; color: var(--accent); text-align: right; }
.ex-rec small { grid-column: 2; text-align: right; color: var(--muted); font-size: 11px; }
.ex-rr { margin-top: 12px; }
.ex-steps { margin: 14px 0 0; padding-left: 0; list-style: none; counter-reset: st; display: grid; gap: 12px; }
.ex-steps li { counter-increment: st; display: grid; grid-template-columns: 30px 1fr; gap: 8px; line-height: 1.5; }
.ex-steps li::before { content: counter(st); font-family: var(--display); font-size: 22px; color: var(--accent); line-height: 1.1; }
.ex-sess { padding: 12px 0; border-top: 1px solid var(--border); }
.ex-sess:first-of-type { border-top: 0; }
.ex-sess .tag { font-style: normal; font-size: 9px; }
.ex-sets { margin: 8px 0 0; padding-left: 22px; display: grid; gap: 4px; color: var(--soft); }
.ex-sets li { font-variant-numeric: tabular-nums; }
.ex-sets small { margin-left: 8px; color: var(--accent); font-size: 11px; }
.tcard-name { display: inline-flex; align-items: center; gap: 4px; background: none; border: 0; padding: 0; color: inherit; font: inherit; cursor: pointer; text-align: left; }
.tcard-name svg { width: 14px; height: 14px; color: var(--muted); flex: none; }
.tcard-name:hover b, .tcard-name:focus-visible b { color: var(--accent); }
.prog-tabs.three { grid-template-columns: repeat(3, 1fr); }
.ex-period + .sel-btn { width: auto; min-width: 118px; flex: none; }

/* Feed de treinos */
.fd-list { display: grid; }
.fd-post { padding: 16px 0; border-top: 1px solid var(--border); display: grid; gap: 10px; }
.fd-post:first-child { border-top: 0; padding-top: 0; }
.fd-post header { display: flex; align-items: center; gap: 10px; }
.fd-post header b, .fd-post header .p-name-link { display: block; font-family: var(--display); font-weight: 400; font-size: 18px; letter-spacing: 1px; line-height: 1.1; }
.fd-post header small { font-family: var(--mono); font-size: 10px; color: var(--muted); }
.fd-post header .chip { min-height: 30px; padding: 4px 10px; font-size: 10px; }
.p-open-av { background: none; border: 0; padding: 0; cursor: pointer; border-radius: 50%; }
.fd-title { margin: 2px 0 0; font-family: var(--display); font-weight: 400; font-size: 24px; letter-spacing: 1px; }
.fd-stats { display: flex; gap: 22px; flex-wrap: wrap; }
.fd-stats small { display: block; font-family: var(--mono); font-size: 10px; letter-spacing: 1px; text-transform: uppercase; color: var(--muted); }
.fd-stats b { font-size: 16px; font-weight: 500; font-variant-numeric: tabular-nums; }
.fd-pr { display: inline-flex; align-items: center; gap: 4px; color: var(--accent); }
.fd-pr svg { width: 16px; height: 16px; }
.fd-text { font-size: 15px; line-height: 1.6; white-space: pre-wrap; word-break: break-word; margin: 0; }
.fd-ex { list-style: none; margin: 0; padding: 0; display: grid; border-top: 1px solid var(--border); }
.fd-ex li { display: flex; align-items: baseline; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--border); font-size: 14px; }
.fd-n { flex: none; min-width: 64px; font-family: var(--mono); font-size: 11px; color: var(--muted); }
.fd-best { flex: none; color: var(--soft); font-variant-numeric: tabular-nums; text-align: right; }
.fd-best .tag { font-style: normal; font-size: 8px; padding: 1px 5px; margin-left: 4px; }
.fd-more { background: none; border: 0; color: var(--muted); font: inherit; font-size: 13px; cursor: pointer; padding: 2px 0; text-align: center; }
.fd-more:hover { color: var(--accent); }
.fd-post footer { display: flex; align-items: center; gap: 10px; }
.fd-cdel { background: none; border: 0; color: var(--muted); cursor: pointer; font-size: 16px; line-height: 1; padding: 0 4px; }
.fd-share { width: min(480px, 100%); display: grid; gap: 12px; }
.fd-share .modal-text { margin: 0; }
.fd-prev { padding: 12px; border: 1px solid var(--border); border-radius: var(--r); background: var(--grad); }
.fd-prev b { display: block; font-family: var(--display); font-weight: 400; font-size: 20px; letter-spacing: 1px; }
.fd-prev small { color: var(--muted); font-size: 12px; }
.fd-prev ul { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 4px; font-size: 13px; }
.fd-prev li { display: flex; justify-content: space-between; gap: 10px; }
.fd-prev li span { color: var(--soft); font-variant-numeric: tabular-nums; }
.fd-photo { min-height: 72px; }
.fd-photo img { max-height: 240px; }
.fd-txt { width: 100%; }
.t-share { margin-top: 10px; }
.t-share svg { width: 14px; height: 14px; }

/* Importar planilha */
.imp-btn { cursor: pointer; }
.imp-hint { margin: -4px 0 12px; }
.imp-prev { border: 1px solid var(--accent); border-radius: var(--r); background: var(--grad); margin-bottom: 16px; }
.imp-list { display: grid; gap: 12px; margin: 12px 0; }
.imp-item { padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--r); background: var(--surface); }
.imp-item > b { display: block; }
.imp-item > small { color: var(--muted); font-size: 12px; }
.imp-item ul { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 4px; font-size: 13px; }
.imp-item li { display: flex; justify-content: space-between; gap: 12px; border-top: 1px solid var(--border); padding-top: 4px; }
.imp-item li > span:last-child { color: var(--soft); text-align: right; flex: none; max-width: 50%; }
.imp-item .tag { font-style: normal; font-size: 8px; padding: 1px 5px; margin-left: 4px; }
.imp-err { padding: 10px 12px; border: 1px solid var(--danger-line); background: var(--danger-tint); border-radius: var(--r); margin-top: 10px; }
.imp-err ul, .imp-warn ul { margin: 6px 0 0; padding-left: 18px; font-size: 13px; color: var(--soft); }
.imp-warn { margin-top: 10px; font-size: 13px; }
.imp-warn summary { cursor: pointer; color: var(--muted); }
/* Botões do topo das telas (Trocar por um modelo, Importar planilha, Baixar modelo…): todos iguais e alinhados */
a.chip, label.chip { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }
.block-cta { align-items: stretch; }
.block-cta > .chip { display: inline-flex; align-items: center; min-height: 40px; line-height: 1.2; }
.tcard-name b { line-height: 1.05; }
/* Central de ajuda: "?" do score e link no Suporte */
.ring-wrap[data-act] { cursor: pointer; border-radius: 50%; -webkit-tap-highlight-color: transparent; }
.ring-wrap[data-act]:focus-visible { outline: 1px solid var(--accent); outline-offset: 4px; }
.ring-wrap[data-act]:active { transform: scale(.98); }
.ring-more { margin-top: 4px; font-family: var(--mono); font-size: 9px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--accent); opacity: .8; }
.score-info { width: min(440px, 100%); }
.si-list { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 8px; }
.si-list li { display: grid; grid-template-columns: 1fr 64px auto; align-items: center; gap: 10px; font-size: 14px; }
.si-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.si-bar { height: 5px; border-radius: 3px; background: var(--border2); overflow: hidden; }
.si-bar i { display: block; height: 100%; background: var(--accent); }
.si-pts { font-variant-numeric: tabular-nums; text-align: right; min-width: 64px; }
.si-pts small { color: var(--muted); }
.si-list li.zero .si-name { color: var(--muted); }
.score-info .modal-acts a.btn { text-decoration: none; display: inline-flex; align-items: center; justify-content: center; }
.sup-help { margin: 0 20px 10px; }
a.aj-item { text-decoration: none; color: inherit; }
/* Sessão: atalhos com nome para a tela do exercício */
.t-info { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 8px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border); }
.t-info .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; padding: 0 10px; white-space: nowrap; }
.t-info .btn svg { width: 16px; height: 16px; flex: none; }

/* Olimpo: aviso de rotina abaixo do mínimo; pedido para ver os treinos (auditoria de 30/09/2026) */
.ol-routine { margin-top: 14px; }
.p-req-k { color: var(--muted); font-size: 12px; margin-right: 4px; white-space: nowrap; }