/* SHRED — tema claro fixo, um acento vermelho (spec §11). Vermelho só em FAB, CTA, anéis, barras, seleção,
   tags e detalhes; a tela continua predominantemente clara. */
* { box-sizing: border-box; }
:root {
  --bg: #f4f4f5; --surface: #ffffff; --texto: #141416; --texto-2: #6b6b73; --linha: #e4e4e8;
  --acento: #e0261f; --acento-suave: #fdecea; --verde-ponto: #22a06b;
  --radius: 14px;
  --font: "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, Roboto, Helvetica, Arial, sans-serif;
  --mono: ui-monospace, "SFMono-Regular", "Cascadia Mono", Menlo, Consolas, monospace;
  --topo-h: calc(64px + env(safe-area-inset-top, 0px));
  --tabbar-h: calc(66px + env(safe-area-inset-bottom, 0px));
}
html, body { overscroll-behavior-y: none; }
body { margin: 0; background: var(--bg); color: var(--texto); font: 15px/1.5 var(--font); -webkit-font-smoothing: antialiased; min-height: 100vh; }
main#view { max-width: 760px; margin: 0 auto; padding: 14px clamp(16px, 5vw, 40px) calc(var(--tabbar-h) + 44px); }
button { font-family: inherit; }
[hidden] { display: none !important; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }

/* ---- topo ---- */
.topo {
  position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: 14px; height: var(--topo-h);
  padding: env(safe-area-inset-top, 0px) clamp(16px, 5vw, 40px) 0;
  background: rgba(244, 244, 245, .9); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--linha);
  transition: background .25s, border-color .25s;
}
.volta, .engrenagem {
  flex: 0 0 auto; width: 40px; height: 40px; display: grid; place-items: center; color: var(--texto-2); text-decoration: none; cursor: pointer;
  font-size: 17px; font-weight: 700; border-radius: 999px; border: 1px solid var(--linha); background: var(--surface);
}
.engrenagem svg { width: 20px; height: 20px; }
.engrenagem.ativa { color: var(--acento); border-color: var(--acento); }
.marca { margin: 0; font: 900 22px/1 var(--font); letter-spacing: -.03em; color: var(--acento); font-style: italic; transform: skewX(-6deg); }
.topo-dir { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.seq-topo { font: 700 11px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--acento); }

/* ---- tabbar: 5 lugares com FAB central ---- */
.tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; display: flex; justify-content: space-around; align-items: flex-end;
  background: rgba(255, 255, 255, .94); backdrop-filter: blur(12px); border-top: 1px solid var(--linha);
  padding: 6px 8px calc(10px + env(safe-area-inset-bottom, 0px));
}
.tabbar button {
  background: none; border: none; color: var(--texto-2); cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 3px; flex: 1;
  font: 700 10px var(--mono); letter-spacing: .1em; text-transform: uppercase; padding: 4px 0;
}
.tabbar button svg { width: 22px; height: 22px; }
.tabbar button.ativa { color: var(--acento); }
.fab {
  flex: 0 0 auto !important; width: 64px; height: 64px; margin-top: -28px; border-radius: 50%; border: 3px solid var(--bg) !important;
  background: var(--acento) !important; color: #fff !important; display: grid !important; place-items: center; padding: 0 !important;
  box-shadow: 0 10px 22px -10px rgba(224, 38, 31, .7); transition: transform .12s;
}
.fab svg { width: 30px !important; height: 30px !important; }
.fab:active { transform: scale(.94); }
.fab-timer { font: 800 13px var(--mono); font-variant-numeric: tabular-nums; letter-spacing: 0; text-transform: none; }
.fab.ativa-sessao { animation: pulso 1.6s ease-in-out infinite; }
.fab.pausada { animation: none; opacity: .85; }
@keyframes pulso { 0%, 100% { box-shadow: 0 0 0 0 rgba(224, 38, 31, .45); } 60% { box-shadow: 0 0 0 12px rgba(224, 38, 31, 0); } }
.ds-badge { bottom: calc(var(--tabbar-h) + 18px) !important; }
.ds-panel { bottom: calc(var(--tabbar-h) + 58px) !important; }
/* o badge do sync.js é z-index 9999: com uma tela cheia aberta ele cobriria Finalizar */
body.tela-aberta .ds-badge, body.tela-aberta .ds-panel { display: none !important; }
body.tela-aberta .tabbar { display: none; }

/* ---- blocos ---- */
.rotulo { font: 700 11px var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--texto-2); margin: 18px 0 8px; }
.card { background: var(--surface); border: 1px solid var(--linha); border-radius: var(--radius); padding: 16px; margin-bottom: 12px; box-shadow: 0 8px 24px -20px rgba(20, 20, 22, .35); }
.card h2 { margin: 0 0 8px; font: 700 11px var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--texto-2); }
.card.toque { cursor: pointer; }
.titulo { font: 800 clamp(24px, 7vw, 32px)/1.1 var(--font); letter-spacing: -.02em; margin: 0; }
.num { font: 800 clamp(40px, 13vw, 64px)/1 var(--font); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.num small { font-size: .45em; color: var(--texto-2); font-weight: 700; letter-spacing: 0; }
.dim { color: var(--texto-2); font-size: 13px; }
.mono { font-family: var(--mono); }
.vazio { text-align: center; padding: 28px 12px; color: var(--texto-2); }
.aviso { border: 1px dashed var(--linha); border-radius: 10px; padding: 10px 14px; color: var(--texto-2); font-size: 13px; margin-bottom: 12px; }
.linha-h { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.entre { justify-content: space-between; }
.tag { font: 700 9px var(--mono); letter-spacing: .14em; color: var(--acento); background: var(--acento-suave); border-radius: 999px; padding: 3px 8px; text-transform: uppercase; }
.tag.cinza { color: var(--texto-2); background: var(--bg); }
.pilula { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--linha); background: var(--surface); border-radius: 999px; padding: 6px 12px; font: 700 12px var(--font); }
.pilula .fogo { color: var(--acento); }
.celulas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.celula { background: var(--surface); border: 1px solid var(--linha); border-radius: 12px; padding: 12px; min-width: 0; text-align: center; }
.celula .rotulo { margin: 4px 0 0; font-size: 9px; }
.celula .val { font: 800 20px/1.1 var(--font); font-variant-numeric: tabular-nums; }
.celula .val small { font-size: 11px; color: var(--texto-2); }
.celula .ic { width: 22px; height: 22px; color: var(--acento); margin: 0 auto 4px; display: block; }
.kpis { display: grid; gap: 0; }
.kpi { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--linha); font-size: 14px; }
.kpi:last-child { border-bottom: 0; }
.kpi b { font-variant-numeric: tabular-nums; }

/* ---- botões ---- */
.btn {
  border: 1px solid var(--texto); background: var(--texto); color: #fff; border-radius: 12px; padding: 12px 18px;
  font: 800 14px var(--font); letter-spacing: .01em; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
}
.btn.sec { background: var(--surface); color: var(--texto); border-color: var(--linha); }
.btn.acento { background: var(--acento); border-color: var(--acento); box-shadow: 0 10px 22px -12px rgba(224, 38, 31, .8); }
.btn.largo { width: 100%; padding: 15px 18px; font-size: 16px; }
.btn:disabled { opacity: .4; cursor: default; }
.btn.redondo { width: 64px; height: 64px; border-radius: 50%; padding: 0; }
.btn.redondo svg { width: 26px; height: 26px; }
.link { background: none; border: 0; color: var(--texto-2); font: 700 12px var(--mono); letter-spacing: .1em; text-transform: uppercase; cursor: pointer; padding: 8px; }
.link.perigo { color: var(--acento); }
.acoes { display: flex; gap: 10px; justify-content: flex-end; margin-top: 18px; flex-wrap: wrap; }

/* ---- formulário ---- */
label { display: block; font: 700 11px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--texto-2); margin: 14px 0 6px; }
input[type=text], input[type=number], input[type=time], select {
  width: 100%; background: var(--surface); color: var(--texto); border: 1px solid var(--linha); border-radius: 10px; padding: 10px 12px; font: 15px var(--font);
}
.segmento { display: flex; border: 1px solid var(--linha); border-radius: 10px; overflow: hidden; }
.segmento button { flex: 1; background: var(--surface); border: 0; padding: 10px 6px; font: 800 13px var(--font); color: var(--texto-2); cursor: pointer; }
.segmento button + button { border-left: 1px solid var(--linha); }
.segmento button.ativa { background: var(--acento); color: #fff; }
.passo { display: flex; align-items: center; gap: 14px; }
.passo button { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--linha); background: var(--surface); font-size: 22px; cursor: pointer; color: var(--texto); }
.passo .val { font: 800 28px var(--font); min-width: 96px; text-align: center; font-variant-numeric: tabular-nums; }
.toggle { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--linha); }
.toggle:last-child { border-bottom: 0; }
.toggle label { margin: 0; }
.toggle input { width: 20px; height: 20px; accent-color: var(--acento); }

/* ---- modal e toast ---- */
.modal-overlay { position: fixed; inset: 0; z-index: 60; background: rgba(20, 20, 22, .45); display: grid; place-items: center; padding: 16px; }
.modal { background: var(--surface); border: 1px solid var(--linha); border-radius: 18px; padding: 20px; width: min(440px, 100%); max-height: 90vh; overflow: auto; }
.modal h2 { margin: 0 0 6px; font: 800 20px var(--font); letter-spacing: -.01em; }
.toast { position: fixed; left: 50%; bottom: calc(var(--tabbar-h) + 34px); transform: translate(-50%, 20px); z-index: 90; /* acima da .tela (80): o toast é status e precisa aparecer também com o overlay aberto */ opacity: 0; pointer-events: none;
  background: var(--texto); color: #fff; padding: 10px 16px; border-radius: 10px; font: 600 13px var(--font); transition: .18s; max-width: 90vw; text-align: center; }
.toast.on { opacity: 1; transform: translate(-50%, 0); }

/* ---- figura (imagem com fallback) e anel ---- */
.retrato { margin: 0; display: grid; place-items: center; }
/* a animação de entrada fica SÓ na figura do nível (Hoje): em imagem dentro de scroller ou de camada fixa
   o fill "both" pode deixar a figura em opacity 0 se a animação não roda (headless, aba em background) */
.retrato img { max-width: 100%; max-height: 100%; object-fit: contain; display: block; }
.hero .retrato img { animation: retratoIn .55s cubic-bezier(.2, .8, .3, 1) both; }
@keyframes retratoIn { from { opacity: 0; transform: translateY(8px) scale(.985); } }
.retrato-ph { border: 1px dashed var(--linha); border-radius: 12px; padding: 16px; text-align: center; max-width: 220px; }
.retrato-ph p { margin: 0 0 6px; font-size: 13px; color: var(--texto); }
.retrato-ph small { font: 700 9px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--texto-2); }
.anel { position: relative; display: grid; place-items: center; }
.anel svg { transform: rotate(-90deg); display: block; }
.anel .fundo { fill: none; stroke: var(--linha); }
.anel .arco { fill: none; stroke: var(--acento); stroke-linecap: round; transition: stroke-dashoffset .8s cubic-bezier(.2, .8, .3, 1); }
.anel .centro { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; font: 800 var(--anel-fonte, 26px)/1 var(--font); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.anel-bloco { display: inline-grid; justify-items: center; gap: 6px; }
.anel-bloco .legenda { font: 700 9px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--texto-2); }

/* ---- Hoje ---- */
.saudacao { margin: 2px 0 0; font: 600 13px var(--font); color: var(--texto-2); }
/* Hoje = tela FIXA (pedido do Victor, 2026-09-13): o cartão do Cardio de hoje e a ação do descanso ficam
   colados embaixo, e a figura ocupa toda a altura entre a barra do topo e a linha do cartão. O main vira
   uma coluna flex da altura da tela; o hero é quem estica, então encolher a coluna de texto aumenta a arte.
   O overflow fica VISÍVEL de propósito: é o que deixa a figura sangrar pra cima, pra dentro da barra do
   topo. Não trocar por auto/hidden — clipa a cabeça na borda do main. Não há risco de estouro: o hero tem
   min-height 0 e encolhe antes, então cartão e descanso nunca saem da tela. A arte dos níveis é recortada na caixa do corpo, então dimensionar pela ALTURA (top/bottom) coloca
   os pés exatamente na linha do cartão. Botões de ajuste: --fig-topo (onde a cabeça começa), --fig-dir
   (quanto a figura sangra pra direita) e --col-w (largura do texto). */
body.hero-hoje main#view { height: calc(100dvh - var(--topo-h)); display: flex; flex-direction: column;
  padding-bottom: calc(var(--tabbar-h) + 4px); overflow: visible; }
/* a view devolve UM invólucro; sem ele virar coluna flex também, o `flex: 1` do hero não tem contra quem
   crescer e o cartão não desce */
body.hero-hoje .hoje-wrap { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
.saudacao { margin: 0 0 2px; font: 600 13px var(--font); color: var(--texto-2); }
.hero { --fig-topo: -58px; --fig-dir: -10px; --col-w: 47%; position: relative; flex: 1 1 auto; min-height: 0; padding: 0; }
.hero .col { position: relative; z-index: 2; width: var(--col-w); }
.hero .titulo { margin-top: 2px; font-size: clamp(20px, 5.8vw, 26px); }
.hero .frase { margin: 6px 0 10px; color: var(--texto-2); font-size: 12.5px; line-height: 1.35; }
.hero .anel-cond { margin: 2px 0 4px; }
.hero .nivel { font: 800 10px var(--mono); letter-spacing: .1em; color: var(--acento); text-transform: uppercase; margin: 6px 0 8px; }
.hero .pilula { font-size: 11.5px; padding: 5px 10px; }
/* z-index 1: a figura passa ATRÁS do texto. Elas se cruzam de propósito (ele pediu), e o texto por cima
   continua legível — o contrário não seria. */
.hero .retrato { position: absolute; z-index: 1; pointer-events: none; display: block;
  right: var(--fig-dir); top: var(--fig-topo); bottom: 0; width: auto; }
.hero .retrato img { height: 100%; width: auto; max-width: none; max-height: none; display: block; }
.hoje-card { margin-top: 0; flex: 0 0 auto; }
.descanso-acao, .faixa-descanso { flex: 0 0 auto; }
.hoje-card .num { margin: 4px 0; }
.hoje-card .grade { display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: center; }
.hoje-card .estado { font-weight: 700; color: var(--texto); margin: 0 0 12px; }
.hoje-card .estado.on { color: var(--acento); }
.hoje-card .sessao-ativa { display: flex; align-items: center; gap: 10px; font-weight: 800; }
.ponto { width: 9px; height: 9px; border-radius: 50%; background: var(--verde-ponto); display: inline-block; box-shadow: 0 0 0 4px rgba(34, 160, 107, .15); }
.ponto.pausado { background: var(--texto-2); box-shadow: none; }
.descanso-acao { text-align: center; margin: 4px 0 8px; }
.faixa-descanso { background: var(--surface); border: 1px solid var(--linha); border-radius: 12px; padding: 12px 14px; display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 12px; }
.faixa-descanso b { display: block; }

/* ---- telas cheias: seleção, sessão ---- */
.tela { position: fixed; inset: 0; z-index: 80; background: var(--bg); display: flex; flex-direction: column;
  padding: calc(16px + env(safe-area-inset-top, 0px)) clamp(16px, 5vw, 40px) calc(18px + env(safe-area-inset-bottom, 0px)); overflow: auto; }
.tela-sair { position: absolute; top: calc(12px + env(safe-area-inset-top, 0px)); right: 14px; width: 40px; height: 40px; border-radius: 50%; background: var(--surface); border: 1px solid var(--linha); color: var(--texto-2); font-size: 20px; cursor: pointer; z-index: 2; }
.tela-cab { text-align: center; padding: 6px 44px 0; }
.tela-cab .titulo { font-size: 26px; }
.tela-cab .dim { margin: 4px 0 0; }
.tela .sessao-status { display: inline-flex; align-items: center; gap: 8px; font: 700 13px var(--font); color: var(--texto-2); margin-top: 4px; }
.tela .meta-etq { position: absolute; left: clamp(16px, 5vw, 40px); top: calc(16px + env(safe-area-inset-top, 0px)); text-align: left; }
.tela .meta-etq small { display: block; font: 700 9px var(--mono); letter-spacing: .14em; color: var(--texto-2); }
.tela .meta-etq b { font: 800 16px var(--font); }
/* A figura ocupa TODO o espaço livre entre o cabeçalho e o timer (pedido do Victor, 2026-09-13): sem ela
   crescer sobrava um vão morto acima dos botões e a imagem ficava pequena.
   A CORRENTE DE ALTURAS, que é o ponto: `.tela-figura` é item flex e ganha altura definida do layout;
   `display: flex` faz o `.retrato` esticar e herdar essa altura; e `grid-template-rows: 100%` dá à linha
   da imagem uma altura definida — sem ele a linha implícita é dimensionada por CONTEÚDO, o `height: 100%`
   da imagem vira `auto` e a figura estoura o box, vazando por cima do timer. É a mesma corrente do cartão
   do carrossel. Não trocar por `position: absolute`: dentro de scroller a camada não pinta. */
.tela-figura { flex: 1 1 auto; min-height: 180px; margin: 6px 0; display: flex; }
.tela-figura .retrato { flex: 1 1 auto; min-width: 0; grid-template-rows: 100%; }
.tela-figura .retrato img { width: 100%; height: 100%; max-height: none; object-fit: contain; }
.tela-timer { font: 800 clamp(56px, 20vw, 88px)/1 var(--font); letter-spacing: -.04em; font-variant-numeric: tabular-nums; text-align: center; margin: 4px 0 6px; }
.tela-timer.pausado { color: var(--texto-2); }
.dia-prog { margin: 10px 0 6px; }
.dia-prog .barra { height: 10px; background: var(--linha); border-radius: 5px; overflow: hidden; }
.dia-prog .barra i { display: block; height: 100%; background: var(--acento); border-radius: 5px; transition: width .6s cubic-bezier(.2, .8, .3, 1); }
.dia-prog .leg { display: flex; justify-content: space-between; font: 700 12px var(--mono); color: var(--texto-2); margin-top: 6px; }
.meta-batida { background: var(--acento); color: #fff; border-radius: 14px; padding: 12px 16px; text-align: center; margin: 8px 0; animation: batida .5s cubic-bezier(.2, .8, .3, 1) both; }
.meta-batida b { display: block; font: 900 22px/1.1 var(--font); letter-spacing: .04em; }
.meta-batida small { font: 700 11px var(--mono); letter-spacing: .16em; opacity: .9; }
@keyframes batida { from { transform: scale(.92); opacity: 0; } }
.tela-acoes { margin-top: auto; padding-top: 16px; display: grid; gap: 10px; }
.tela-acoes .duo { display: grid; grid-template-columns: 64px 1fr; gap: 12px; align-items: center; }
.tela-fim { text-align: center; margin: auto 0; }
.tela-fim h1 { font: 900 clamp(26px, 8vw, 38px)/1.05 var(--font); letter-spacing: -.03em; margin: 8px 0; }
.tela-fim .num { margin: 8px 0 0; }
.tela-fim .lista { display: grid; gap: 8px; margin: 18px 0; text-align: left; }
.tela-fim .lista .kpi { background: var(--surface); border: 1px solid var(--linha); border-radius: 12px; padding: 12px 14px; }
.tela-fim .frase { color: var(--texto-2); margin: 10px 0 0; }
.tela-fim .devolucao { color: var(--acento); font-weight: 700; margin: 6px 0 0; }

/* carrossel da seleção (spec §5.3) */
/* align-items: stretch (pedido do Victor, 2026-09-13) — o cartão ocupa a altura inteira do carrossel e a
   figura dentro dele absorve o que sobra, então a imagem fica o maior possível. A espiada no cartão
   vizinho vem do padding lateral: cartão 88% + 6% de padding deixa ~6% do próximo à mostra. */
.carrossel { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 4px 6% 10px; margin: 0 calc(-1 * clamp(16px, 5vw, 40px)); scrollbar-width: none; -webkit-overflow-scrolling: touch; flex: 1 1 auto; min-height: 0; align-items: stretch; }
.carrossel::-webkit-scrollbar { display: none; }
.cartao-mod { flex: 0 0 88%; max-width: 460px; scroll-snap-align: center; background: var(--surface); border: 1px solid var(--linha); border-radius: 22px; padding: 14px 16px 16px; display: flex; flex-direction: column; box-shadow: 0 14px 34px -22px rgba(20, 20, 22, .5); }
/* `grid-template-rows: 100%` é o que faz o height:100% da imagem resolver: sem ele a linha implícita do
   grid é dimensionada por CONTEÚDO, o percentual vira auto e a imagem estoura o cartão. Não simplificar. */
.cartao-mod .retrato { flex: 1 1 auto; min-height: 150px; width: 100%; grid-template-rows: 100%; background: var(--bg); border-radius: 16px; }
.cartao-mod .retrato img { width: 100%; height: 100%; max-height: none; object-fit: contain; }
.cartao-mod h3 { margin: 12px 0 2px; font: 800 24px/1.1 var(--font); letter-spacing: -.02em; }
.cartao-mod p { margin: 0; color: var(--texto-2); font-size: 14px; }
.cartao-mod .ultima { margin: 8px 0 0; font: 700 11px var(--mono); letter-spacing: .08em; color: var(--texto-2); text-transform: uppercase; }
.cartao-mod .btn { margin-top: 14px; }
.dots { display: flex; justify-content: center; gap: 6px; padding: 4px 0 8px; }
.dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--linha); transition: .2s; }
.dots i.on { background: var(--acento); width: 18px; border-radius: 3px; }

/* ---- Progresso ---- */
.sem-nav { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.sem-nav span { font-weight: 800; }
.sem-nav button { width: 36px; height: 36px; border-radius: 10px; border: 1px solid var(--linha); background: var(--surface); color: var(--texto); font-size: 18px; cursor: pointer; }
.sem-nav button:disabled { opacity: .3; cursor: default; }
.grafico { width: 100%; height: 170px; display: block; margin-top: 4px; }
.grafico .barra { fill: var(--acento); }
.grafico .barra.zero { fill: var(--linha); }
.grafico .barra.descanso { fill: none; stroke: var(--texto-2); stroke-dasharray: 3 3; }
.grafico .meta-linha { stroke: var(--texto); stroke-width: 1; stroke-dasharray: 4 4; opacity: .5; }
.grafico .valor { font: 700 11px var(--mono); fill: var(--texto); text-anchor: middle; }
.grafico .dia { font: 700 10px var(--mono); fill: var(--texto-2); text-anchor: middle; }
.grafico .dia.hoje { fill: var(--acento); }
.ofensiva-card { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ofensiva-card .num { font-size: 36px; }
.ofensiva-card .rotulo { margin: 0 0 4px; }

/* ---- Histórico ---- */
.dia-cab { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin: 16px 0 6px; }
.dia-cab b { font: 800 15px var(--font); }
.dia-cab .dim { font-variant-numeric: tabular-nums; }
.sessao-item { display: grid; grid-template-columns: 36px 1fr auto; gap: 12px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--linha); }
.sessao-item:last-child { border-bottom: 0; }
.sessao-item .ic { width: 36px; height: 36px; border-radius: 10px; background: var(--acento-suave); color: var(--acento); display: grid; place-items: center; }
.sessao-item .ic svg { width: 20px; height: 20px; }
.sessao-item .nome { font-weight: 700; }
.sessao-item .hora { font: 700 11px var(--mono); color: var(--texto-2); letter-spacing: .06em; }
.sessao-item .min { font: 800 16px var(--font); font-variant-numeric: tabular-nums; }

/* ---- Mestre: figura fixa atrás da folha (padrão do RITUAL) ----
   body.com-hero liga a mecânica; .hero-espaco reserva a imagem da cabeça aos joelhos (--corte .63 da altura
   4:5) e a folha clara sobe dali. Puxar a folha com o scroll no zero revela o resto (app.js).
   --hero-sobe (pedido do Victor, 2026-09-13): sobe SÓ a imagem, a cabeça entrando na barra do topo (que
   fica transparente com o scroll no zero). O .hero-espaco NÃO muda, então a folha fica onde estava e o
   corte desce sozinho — é assim que aparece mais corpo. Pra ajustar, mexa só neste número. */
.hero-fundo { --hero-sobe: 48px; position: fixed; top: 0; left: 0; right: 0; z-index: 1; display: none; justify-content: center; padding-top: calc(var(--topo-h) - 22px - var(--hero-sobe)); pointer-events: none; }
.hero-fundo img { --hero-w: min(100vw, 520px); width: var(--hero-w); height: calc(var(--hero-w) * 5 / 4); object-fit: contain; display: block;
  -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
body.com-hero .hero-fundo { display: flex; }
body.com-hero main#view { padding-top: 0; padding-bottom: 0; padding-left: 0; padding-right: 0; position: relative; z-index: 2; max-width: none; }
body.com-hero .topo { position: fixed; left: 0; right: 0; }
.topo.sobre-hero { background: transparent; border-color: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; }
.hero-espaco { --hero-w: min(100vw, 520px); position: relative; height: calc(var(--topo-h) - 22px + var(--hero-w) * 5 / 4 * var(--corte, .63)); }
.folha { position: relative; margin: 0; padding: 10px clamp(16px, 5vw, 40px) calc(var(--tabbar-h) + 28px); min-height: 72vh;
  background: var(--bg); border-top: 1px solid var(--linha); border-radius: 24px 24px 0 0; box-shadow: 0 -18px 40px -22px rgba(20, 20, 22, .35);
  transition: transform .38s cubic-bezier(.2, .8, .3, 1); will-change: transform; }
.folha .alca { width: 42px; height: 4px; border-radius: 999px; background: var(--linha); margin: 0 auto 14px; }
.folha-miolo { max-width: 760px; margin: 0 auto; }
.mestre-nivel { display: grid; grid-template-columns: auto 1fr; gap: 16px; align-items: center; }
.mestre-nivel .nome { font: 900 26px/1 var(--font); letter-spacing: -.02em; color: var(--acento); margin: 2px 0; }
.mestre-nivel .status { font: 700 12px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--texto-2); }
.regua { display: grid; grid-template-columns: repeat(11, 1fr); gap: 4px; margin-top: 6px; }
.regua i { display: block; height: 8px; border-radius: 4px; background: var(--linha); }
.regua i.feito { background: var(--texto); opacity: .35; }
.regua i.atual { background: var(--acento); opacity: 1; }
.regua-nomes { display: flex; justify-content: space-between; font: 700 9px var(--mono); letter-spacing: .1em; color: var(--texto-2); margin-top: 6px; text-transform: uppercase; }
.conquistas { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
.conquista { border: 1px solid var(--linha); border-radius: 12px; padding: 12px; background: var(--surface); }
.conquista.off { opacity: .45; border-style: dashed; }
.conquista b { display: block; margin-bottom: 4px; font: 800 11px var(--mono); letter-spacing: .12em; color: var(--acento); }
.conquista.off b { color: var(--texto); }
.conquista small { color: var(--texto-2); font-size: 12px; }

/* ---- cerimônia de subida de nível (molde do RITUAL) ---- */
/* overlay sempre escuro por cima da .tela (80) e abaixo do toast (90); halo no vermelho do app */
@keyframes evoFade { from { opacity: 0; } }
.evolucao { position: fixed; inset: 0; z-index: 85; display: grid; place-items: center; text-align: center; padding: 20px;
  background: rgba(13, 13, 15, .96); animation: evoFade .2s ease; cursor: pointer; --halo: var(--acento); --halo-claro: #ff6a62; }
.evolucao .cena { position: relative; width: min(74vw, 340px); height: min(58vh, 500px); margin: 0 auto; }
.evolucao .cena::before { content: ""; position: absolute; inset: 8% 4%; border-radius: 50%; filter: blur(26px); opacity: .25;
  background: radial-gradient(closest-side, var(--halo), color-mix(in srgb, var(--halo) 30%, transparent) 62%, transparent);
  animation: haloPulsa 1.6s ease-in-out .5s forwards; }
@keyframes haloPulsa { 40% { opacity: .95; transform: scale(1.12); } 100% { opacity: .6; transform: scale(1); } }
.evolucao .cena img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: bottom center; }
.evolucao .cena .antes { animation: evoSai 1.1s ease .55s forwards; }
.evolucao .cena .depois { opacity: 0; animation: evoEntra 1.2s cubic-bezier(.2, .8, .3, 1) .55s forwards;
  filter: drop-shadow(0 0 22px color-mix(in srgb, var(--halo) 55%, transparent)); }
@keyframes evoSai { to { opacity: 0; transform: scale(1.05); filter: brightness(2.4) blur(3px); } }
@keyframes evoEntra {
  0% { opacity: 0; transform: scale(.94); filter: brightness(2.6) drop-shadow(0 0 22px color-mix(in srgb, var(--halo) 55%, transparent)); }
  55% { opacity: 1; filter: brightness(1.5) drop-shadow(0 0 30px color-mix(in srgb, var(--halo) 70%, transparent)); }
  100% { opacity: 1; transform: scale(1); filter: brightness(1) drop-shadow(0 0 22px color-mix(in srgb, var(--halo) 55%, transparent)); } }
.evolucao .evo-rotulo { display: block; margin-top: 18px; font: 700 11px var(--mono); letter-spacing: .16em; text-transform: uppercase; color: #a8a8b0;
  opacity: 0; animation: evoTexto .5s ease 1s forwards; }
.evolucao h2 { font: 900 clamp(24px, 7vw, 34px)/1.1 var(--font); letter-spacing: .08em; text-transform: uppercase; color: var(--halo-claro); margin: 6px 0 6px;
  opacity: 0; animation: evoTexto .5s ease 1.1s forwards; }
.evolucao p { margin: 0; color: #c9c9cf; font: 700 14px var(--mono); font-variant-numeric: tabular-nums; opacity: 0; animation: evoTexto .5s ease 1.3s forwards; }
@keyframes evoTexto { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.evolucao .estrela { position: absolute; font-size: 20px; color: var(--halo-claro); opacity: 0; animation: estrelaBurst 1s ease-out both; }
@keyframes estrelaBurst { 0% { transform: translateY(0) scale(.4); opacity: 1; } 100% { transform: translateY(-90px) scale(1.1); opacity: 0; } }
/* sem animação a cerimônia continua: só o retrato novo, textos visíveis (o reset global de animação já está no topo) */
@media (prefers-reduced-motion: reduce) {
  .evolucao, .evolucao * { animation: none !important; }
  .evolucao .cena .antes { display: none; }
  .evolucao .cena .depois { opacity: 1; }
  .evolucao h2, .evolucao p, .evolucao .evo-rotulo { opacity: 1; }
}