/* ======================================================================
   VISUAL PREMIUM DO FASE
   Carregado por último. Preto quente, cartões carvão com um brilho sutil e fio dourado, dourado como cor do
   sistema, títulos grandes, movimento com mola e números que contam. Tudo na mesma paleta: nada de cinza
   neutro nem cores de fora. Tirar este arquivo volta ao visual anterior.
   ====================================================================== */
:root {
  --bg: #070604;
  --s0: #0d0b08;
  --s1: #15120d;
  --s2: #1e1a13;
  --s3: #29241a;
  --line: rgba(244, 196, 76, 0.09);
  --line-2: rgba(244, 196, 76, 0.2);
  --text: #f7f2e8;
  --muted: rgba(247, 242, 232, 0.74);
  --faint: rgba(247, 242, 232, 0.56); /* contraste de leitura >= 4,5:1 sobre os cartões */
  --gold: #e3a614;
  --gold-hi: #f4c44c;
  --gold-lo: #b9820a;
  --ok: #e9c873; /* sucesso no dourado claro, não no verde: tudo na paleta do Fase */
  --ouro-suave: rgba(227, 166, 20, 0.13);
  --brilho: linear-gradient(180deg, rgba(255, 236, 190, 0.045) 0%, rgba(255, 236, 190, 0) 46%);
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Archivo", "Segoe UI", system-ui, sans-serif;
  --font-titulo: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Archivo", "Segoe UI", system-ui, sans-serif;
  --r-md: 16px;
  --r-lg: 24px;
  --mola: cubic-bezier(0.32, 0.72, 0, 1);
  --mola-solta: cubic-bezier(0.34, 1.4, 0.64, 1);
}
body { background: radial-gradient(120% 60% at 50% -10%, rgba(227, 166, 20, 0.07), transparent 60%) fixed, var(--bg); font-weight: 400; letter-spacing: -0.01em; }

/* ---------------------------------------------------------- títulos */
.page-title, .hello, .home-head .hello { font-family: var(--font-titulo); font-size: 34px; line-height: 1.08; font-weight: 700; letter-spacing: -0.028em; }
.page-head { padding-top: 6px; }
.card h2, .hero__titulo { font-family: var(--font-titulo); letter-spacing: -0.02em; }
.kicker { font-size: 12px; letter-spacing: 0.07em; font-weight: 600; color: var(--gold); }
.sub { font-size: 15px; }

/* ---------------------------------------------------------- cartões: carvão, brilho no alto, fio dourado */
.card { background: var(--brilho), var(--s1); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: inset 0 1px 0 rgba(255, 236, 190, 0.05), 0 14px 34px rgba(0, 0, 0, 0.38); }
.card--destaque { background: radial-gradient(120% 80% at 100% 0%, rgba(227, 166, 20, 0.16), transparent 60%), var(--s1); border-color: var(--line-2); }
.hero { background: radial-gradient(130% 90% at 100% 0%, rgba(227, 166, 20, 0.18), transparent 58%), var(--s1); border-color: var(--line-2); }
.player__meta li, .checkex__alt, .carga-ajuste, .guia-dobra, .mural-abrir, .chip-extra { background-color: var(--s1); border-color: var(--line); }
.card .chip-extra, .card .checkex__sec, .card .choices button, .card .sob__item { background-color: var(--s2); border-color: var(--line); }
.checkex__sec { background-color: var(--s2); }
.facts li { border-top-color: var(--line); }

/* ---------------------------------------------------------- botões */
.btn { font-weight: 650; letter-spacing: -0.01em; background: var(--gold); box-shadow: 0 6px 18px rgba(227, 166, 20, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.22); }
.btn--ghost { background: var(--s2); color: var(--text); box-shadow: inset 0 0 0 1px var(--line-2); }
.btn--ghost:hover { background: var(--s3); }
.textbtn { color: var(--gold-hi); font-weight: 550; }
.textbtn[data-mural-apagar], .textbtn--alerta { color: var(--alerta); }
/* Brilho que passa no botão principal do treino de hoje, de tempos em tempos. */
.hero .btn[data-start] { position: relative; overflow: hidden; isolation: isolate; }
.hero .btn[data-start]::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(100deg, transparent 35%, rgba(255, 248, 225, 0.28) 50%, transparent 65%); transform: translateX(-120%); animation: brilho-btn 4.5s ease-in-out 1.2s infinite; }
@keyframes brilho-btn { 0%, 70% { transform: translateX(-120%); } 100% { transform: translateX(120%); } }

/* ---------------------------------------------------------- segmentos, campos */
.seg { background: var(--s1); border-color: var(--line); }
.measure input, .measure textarea, .sel select { background: var(--s1); border-color: var(--line); }

/* ---------------------------------------------------------- barra de abas: vidro quente e marcador que desliza */
.tabs { background: rgba(21, 18, 13, 0.74); border-color: rgba(244, 196, 76, 0.12); }
.tabs button { color: var(--faint); position: relative; z-index: 1; }
.tabs button[aria-current="page"] { color: var(--gold-hi); }
.tabs button[aria-current="page"] svg { fill: currentColor; fill-opacity: 0.18; }
@media (max-width: 899px) {
  .tabs button[aria-current="page"] { background: transparent; }
  .tabs::before { content: ""; position: absolute; top: 5px; bottom: 5px; left: 5px; width: calc((100% - 18px) / 5); border-radius: 22px; background: rgba(227, 166, 20, 0.16); box-shadow: inset 0 0 0 1px rgba(244, 196, 76, 0.18); transform: translateX(calc(var(--tab-i, 0) * (100% + 2px))); transition: transform 0.5s var(--mola-solta); }
  .app > .top.is-rolou { background: rgba(10, 9, 6, 0.72); border-bottom-color: var(--line); }
  .top__titulo { left: 18px; right: auto; max-width: 52%; transform: translateY(6px); text-align: left; font-size: 17px; }
  .top.is-titulo .top__titulo { transform: none; }
}

/* ---------------------------------------------------------- Início: resumo no topo */
.resumo-topo { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 16px; align-items: center; padding: 16px 18px; border-radius: var(--r-lg); background: radial-gradient(90% 120% at 0% 0%, rgba(227, 166, 20, 0.14), transparent 60%), var(--brilho), var(--s1); border: 1px solid var(--line-2); box-shadow: inset 0 1px 0 rgba(255, 236, 190, 0.06), 0 14px 34px rgba(0, 0, 0, 0.38); }
.resumo-topo__m { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(72px, 1fr)); gap: 10px; }
.resumo-topo__m li { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.resumo-topo__m small { color: var(--faint); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; font-weight: 600; }
.resumo-topo__m b { font-family: var(--font-titulo); font-size: 22px; font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.resumo-topo__m em { font-style: normal; color: var(--muted); font-size: 12px; }
.resumo-topo__m .is-bom b { color: var(--gold-hi); }

/* Anel estilo Apple Watch, no dourado: desenha do zero até o feito. */
.anel-sem { position: relative; flex: none; width: 64px; height: 64px; display: grid; place-items: center; }
.anel-sem svg:first-child { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); overflow: visible; }
.anel-sem circle { fill: none; stroke-width: 6.5; }
.anel-sem__fundo { stroke: rgba(227, 166, 20, 0.16); }
.anel-sem__valor { stroke: var(--gold); stroke-linecap: round; stroke-dasharray: var(--p) 1; filter: drop-shadow(0 0 6px rgba(244, 196, 76, 0.45)); transition: stroke-dasharray 0.7s var(--mola); }
.anel-sem.is-fechado .anel-sem__valor { stroke: var(--gold-hi); }
.anel-sem.is-vazio .anel-sem__valor { opacity: 0; }
.anel-sem__n { position: relative; font-family: var(--font-titulo); font-size: 17px; font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.anel-sem__n small { color: var(--faint); font-size: 12px; font-weight: 600; }
.anel-sem > svg:not(:first-child) { position: relative; width: 22px; height: 22px; fill: none; stroke: var(--gold-hi); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.enter .anel-sem__valor { animation: anel-enche 1.2s var(--mola) 0.25s both; }
@keyframes anel-enche { from { stroke-dasharray: 0 1; } }

/* ---------------------------------------------------------- atalhos: todos iguais, no dourado */
.atalhos { display: grid; grid-template-columns: repeat(auto-fit, minmax(64px, 1fr)); gap: 8px; padding: 2px 0; }
.atalhos .atalho:last-child:nth-child(odd) { grid-column: auto; }
.atalho { min-height: 0; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 13px 4px 11px; border: 1px solid var(--line); border-radius: 20px; background: var(--brilho), var(--s1); text-align: center; }
.atalho b { font-size: 12px; font-weight: 550; color: var(--muted); letter-spacing: 0; }
.atalho__ico { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 13px; background: var(--ouro-suave); box-shadow: inset 0 0 0 1px rgba(244, 196, 76, 0.22); transition: transform 0.25s var(--mola-solta); }
.atalho__ico svg { width: 22px; height: 22px; fill: none; stroke: var(--gold-hi); stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.atalho:active .atalho__ico { transform: scale(0.88); }
.enter .atalho__ico { animation: pop 0.5s var(--mola-solta) both; animation-delay: calc(0.25s + var(--i, 0) * 0.06s); }

/* ---------------------------------------------------------- foto do treino de hoje */
.hero--foto .shot img { height: 196px; -webkit-mask-image: linear-gradient(to bottom, #000 55%, transparent 100%); mask-image: linear-gradient(to bottom, #000 55%, transparent 100%); }
.hero--foto .shot img.ok { animation: foto-respira 16s ease-in-out infinite alternate; }
@keyframes foto-respira { from { transform: scale(1); } to { transform: scale(1.07) translateY(-4px); } }
.hero--foto .hero__corpo { padding-top: 6px; }

/* ---------------------------------------------------------- folhas, entrada das telas, números */
.folha__painel { background: var(--brilho), var(--s1); border-color: var(--line-2); animation-duration: 0.55s; animation-timing-function: var(--mola); }
.folha__fundo { background: rgba(0, 0, 0, 0.55); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.enter > *, .enter > .session > *, .enter > .entrada > * { animation-timing-function: var(--mola); animation-duration: 0.55s; }
.card .stat b, .stats .stat b { font-variant-numeric: tabular-nums; }

/* Turma */
.mural-abrir { flex-direction: row; text-align: left; }
.mural-abrir__ico { background: var(--ouro-suave); box-shadow: inset 0 0 0 1px rgba(244, 196, 76, 0.22); }
.mural-abrir__ico svg { stroke: var(--gold-hi); }

@media (prefers-reduced-motion: reduce) {
  .enter .anel-sem__valor, .anel-sem__valor, .atalho__ico, .enter .atalho__ico, .hero--foto .shot img.ok, .hero .btn[data-start]::after { animation: none; transition: none; }
  .tabs::before { transition: none; }
}
.resumo-topo__de { font-size: 14px; font-weight: 600; color: var(--faint); letter-spacing: 0; }
.resumo-topo { gap: 14px; padding: 16px; }
.resumo-topo__m { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.resumo-topo__m small { font-size: 10.5px; letter-spacing: 0.04em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.resumo-topo__m b { font-size: 21px; }
.resumo-topo__m em { font-size: 11.5px; line-height: 1.25; }

/* ---------------------------------------------------------- todo botão responde ao toque
   Afunda um pouco ao tocar e volta com um quique leve. Usa "scale" (e não "transform"), então não briga com
   botões que já se posicionam com transform. :where() não pesa: as transições próprias de cada botão continuam. */
:where(button, .btn, a.btn, [role="button"], summary) { transition: scale 0.32s var(--mola-solta), background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease; }
:where(button:not(:disabled), .btn, a.btn, [role="button"], summary):active { scale: 0.96; transition-duration: 0.1s; }
:where(.choices button, .seg button, .textbtn, .iconbtn, .chat__x):active { scale: 0.92; }
:where(.card--login, .lex__btn, .exlin, .atalho, .mural-abrir, .checkex__ok, .checkex__alt, .checkex__sec, .checkex__troca, .sessao-linha__cab, .sob__item):active { scale: 0.975; }
@media (prefers-reduced-motion: reduce) { :where(button, .btn, a.btn, [role="button"], summary):active { scale: 1; } }

/* ---------------------------------------------------------- seletor com pílula que desliza */
.seg--marca { position: relative; isolation: isolate; }
/* As abas da Evolução grudam no topo ao rolar. Sem isto, o "relative" acima vencia o sticky e o deslocamento de
   grudar (top) empurrava as abas para baixo do título, abrindo um buraco e cobrindo o cartão "O que mudou". */
.evo-abas.seg--marca, .lab-evo-abas.seg--marca { position: sticky; }
@media (max-width: 360px) { .evo-abas button { font-size: 12.5px; padding-left: 0; padding-right: 0; letter-spacing: -0.01em; } }
.evo-abas.seg--marca { margin-bottom: 0; background: rgba(21, 18, 13, 0.92); -webkit-backdrop-filter: blur(16px) saturate(1.3); backdrop-filter: blur(16px) saturate(1.3); }
.seg--marca::before { content: ""; position: absolute; z-index: -1; top: 4px; bottom: 4px; left: 4px; width: calc((100% - 8px - (var(--seg-n, 2) - 1) * 4px) / var(--seg-n, 2)); border-radius: 999px; background: var(--gold); box-shadow: 0 4px 14px rgba(227, 166, 20, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.22); transform: translateX(calc(var(--seg-i, 0) * (100% + 4px))); transition: transform 0.45s var(--mola-solta); }
.seg--marca button[aria-selected="true"], .seg--marca button[aria-pressed="true"] { background: transparent; }
.seg--marca button { transition: color 0.25s ease, scale 0.3s var(--mola-solta); }

/* ---------------------------------------------------------- avisos rápidos: vidro escuro, fio dourado, entra com mola */
.toast { background: rgba(21, 18, 13, 0.86); -webkit-backdrop-filter: blur(18px) saturate(1.3); backdrop-filter: blur(18px) saturate(1.3); border: 1px solid var(--line-2); border-radius: 18px; box-shadow: 0 18px 40px rgba(0, 0, 0, 0.5); color: var(--text); font-weight: 550; animation: toast-entra 0.5s var(--mola-solta) both; }
.toast--ok::before { background: var(--gold); box-shadow: 0 0 10px rgba(244, 196, 76, 0.7); }
@keyframes toast-entra { from { opacity: 0; transform: translateY(-16px) scale(0.96); } }

@media (prefers-reduced-motion: reduce) { .seg--marca::before, .toast { transition: none; animation: none; } }

/* ---------------------------------------------------------- tela do treino: nada de "zoom"
   Peças grandes (cronômetro de descanso, peso, botões de como fechou) não encolhem ao toque: numa peça da largura
   da tela, encolher parece zoom. Elas respondem só escurecendo um pouco. O fim do descanso pulsa em brilho, sem crescer. */
.session :where(.meta-desc button, .meta-carga button, .checkex button, .checkex__troca, .acao-ex, .btn):active { scale: 1; }
.session .meta-desc button:active, .session .meta-carga button:active { opacity: 0.8; }
.session .checkex button:active, .session .checkex__troca:active, .session .acao-ex:active, .session .btn:active { filter: brightness(0.88); }
.meta-desc.is-pronto { animation: desc-pronto-brilho 0.7s ease-out 2; }
@keyframes desc-pronto-brilho { 50% { box-shadow: 0 0 0 4px rgba(244, 196, 76, 0.35), 0 0 24px rgba(244, 196, 76, 0.45); } }
.session .checkex button:active, .session .acao-ex:active, .session .btn:active, .session .checkex__troca:active { transform: none; }
/* Nada encolhe ao toque na tela do treino (peso, "Usei", "Outro peso", + e −, voltar, lista, pausar): cada toque
   redesenha a tela, e o encolher somado ao redesenho parecia zoom. Toda peça responde só escurecendo. */
html .session :is(button, .btn, a, [role="button"], summary, .exbtn, .lex__btn, .exlin, .sessao-linha__cab, .chip--rest):active { scale: 1 !important; transform: none !important; filter: brightness(0.86); }
/* Fora do treino, peça da largura da tela também não encolhe (parece zoom): escurece. Ícones e botões pequenos seguem com o aperto. */
html :is(.card--login, .lex__btn, .exlin, .exbtn, .semlin, .mural-abrir, .mob-card, .lab-tile, .evo-atalho, .sessao-linha__cab, .sob__item, .checkex__ok, .checkex__alt, .checkex__sec, .checkex__troca, .acao-ex, .btn, a.btn):active { scale: 1 !important; transform: none !important; filter: brightness(0.88); }

/* ---------------------------------------------------------- fim do treino: semana e recordes */
.fim-semana { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: var(--r-lg); background: radial-gradient(90% 120% at 0% 0%, rgba(227, 166, 20, 0.14), transparent 60%), var(--s1); border: 1px solid var(--line-2); }
.fim-semana p { margin: 0; display: flex; flex-direction: column; gap: 2px; }
.fim-semana b { font-family: var(--font-titulo); font-size: 17px; font-weight: 700; letter-spacing: -0.01em; }
.fim-semana small { color: var(--muted); font-size: 13px; }
.fim-recordes { border-color: var(--line-2); background: radial-gradient(120% 90% at 100% 0%, rgba(227, 166, 20, 0.2), transparent 60%), var(--s1); }
.fim-recordes ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.fim-recordes li { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto; column-gap: 12px; align-items: baseline; }
.fim-recordes li span { grid-row: 1 / 3; align-self: center; font-weight: 600; overflow-wrap: break-word; }
.fim-recordes li b { font-family: var(--font-titulo); font-size: 22px; font-weight: 700; color: var(--gold-hi); text-align: right; font-variant-numeric: tabular-nums; }
.fim-recordes li small { color: var(--faint); font-size: 12px; text-align: right; }
.enter .fim-recordes li { animation: pop 0.5s var(--mola-solta) both; animation-delay: calc(0.9s + var(--i, 0) * 0.12s); }
@media (prefers-reduced-motion: reduce) { .enter .fim-recordes li { animation: none; } }

/* ---------------------------------------------------------- sem "zoom" nas fotos
   A foto entra só com fade (sem começar ampliada) e não fica aproximando em loop: a tela do treino é redesenhada a
   cada toque e a aproximação recomeçava, parecendo zoom. */
.shot img, .list img { transform: none; transition: opacity 0.35s ease; }
.session .shot--img img.ok, .hero--foto .shot img.ok { animation: none; }
/* O quadro do descanso tem a mesma altura parado e contando: a tela não pula quando o cronômetro começa. */
.player__meta li.meta-desc { min-height: 92px; }
.meta-desc button { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 92px; }
/* Dois toques rápidos (pausar e voltar o descanso) não ampliam a tela no iPhone. */
html { touch-action: manipulation; }

/* ---------------------------------------------------------- abertura do app
   O halter se monta: a barra aparece, as anilhas grandes encaixam dos lados, as menores por fora, o anel dourado se
   desenha em volta e o nome surge embaixo (cerca de 1,3 s). Fundo no preto da imagem de abertura do iPhone.
   Some sozinha em 2,8 s mesmo se algo falhar, para nunca prender a aluna. */
.abertura { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; background: radial-gradient(60% 40% at 50% 46%, rgba(227, 166, 20, 0.09), transparent 70%), var(--bg); animation: abertura-some 0.45s ease 2.8s forwards; }
.abertura.sai { animation: abertura-some 0.5s var(--mola) forwards; }
.abertura__marca { display: grid; justify-items: center; gap: 18px; }
.abertura.sai .abertura__marca { animation: abertura-marca-sai 0.5s var(--mola) forwards; }
.abertura__svg { width: 168px; height: 168px; overflow: visible; }
.abertura__svg * { transform-box: fill-box; transform-origin: center; }
.abertura__trilho { fill: none; stroke: #2a251b; stroke-width: 2.6; animation: abertura-aparece 0.4s ease 0.3s both; }
.abertura__anel { fill: none; stroke: #e3a614; stroke-width: 2.6; stroke-linecap: round; stroke-dasharray: 0 1; transform: rotate(-90deg); filter: drop-shadow(0 0 3px rgba(244, 196, 76, 0.5)); animation: abertura-anel 0.9s var(--mola) 0.4s forwards; }
.abertura__barra { animation: abertura-barra 0.35s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
.abertura__esq { animation: abertura-esq 0.5s cubic-bezier(0.34, 1.4, 0.5, 1) 0.15s both; }
.abertura__dir { animation: abertura-dir 0.5s cubic-bezier(0.34, 1.4, 0.5, 1) 0.15s both; }
.abertura__esq .abertura__menor { animation: abertura-esq-menor 0.45s cubic-bezier(0.34, 1.4, 0.5, 1) 0.3s both; }
.abertura__dir .abertura__menor { animation: abertura-dir-menor 0.45s cubic-bezier(0.34, 1.4, 0.5, 1) 0.3s both; }
.abertura__nome { color: #f5f5f7; font-family: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", system-ui, sans-serif; font-size: 22px; font-weight: 600; letter-spacing: -0.02em; animation: abertura-nome 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) 0.8s both; }
@keyframes abertura-barra { from { opacity: 0; transform: scaleX(0); } }
@keyframes abertura-esq { from { opacity: 0; transform: translateX(-26px); } }
@keyframes abertura-dir { from { opacity: 0; transform: translateX(26px); } }
@keyframes abertura-esq-menor { from { opacity: 0; transform: translateX(-14px); } }
@keyframes abertura-dir-menor { from { opacity: 0; transform: translateX(14px); } }
@keyframes abertura-aparece { from { opacity: 0; } }
@keyframes abertura-anel { to { stroke-dasharray: 1 1; } }
@keyframes abertura-nome { from { opacity: 0; transform: translateY(8px); } }
@keyframes abertura-some { to { opacity: 0; visibility: hidden; } }
@keyframes abertura-marca-sai { to { opacity: 0; transform: scale(1.08); } }
@media (prefers-reduced-motion: reduce) {
  .abertura, .abertura * { animation: none !important; }
  .abertura { display: none; }
}
.abertura svg { overflow: visible; }