/* Tema sobre o daisyUI: cores de anilha (vermelha 25 kg, azul 20 kg, amarela 15 kg, verde 10 kg) */
[data-theme="light"] {
  color-scheme: light;
  --color-base-100: #FFFFFF;
  --color-base-200: #ECEEEA;
  --color-base-300: #D5D9D2;
  --color-base-content: #15181B;
  --color-primary: #15181B;
  --color-primary-content: #FFFFFF;
  --color-neutral: #15181B;
  --color-neutral-content: #FFFFFF;
  --color-success: #2E8B4E;
  --color-success-content: #FFFFFF;
  --color-error: #C4302B;
  --color-error-content: #FFFFFF;
  --muted: #5B636C;
  --A: #D1343B; --B: #1F5FBF; --C: #D89B00; --D: #2E8B4E; --E: #0E8C96; --F: #D9622B; --P: #7D3FA0; --K: #C9366F;
}
[data-theme="dark"] {
  color-scheme: dark;
  --color-base-100: #181B1F;
  --color-base-200: #0F1113;
  --color-base-300: #2C3238;
  --color-base-content: #ECEFEA;
  --color-primary: #ECEFEA;
  --color-primary-content: #0F1113;
  --color-neutral: #ECEFEA;
  --color-neutral-content: #0F1113;
  --color-success: #4FBC77;
  --color-success-content: #0F1113;
  --color-error: #F0575D;
  --color-error-content: #0F1113;
  --muted: #9AA2AC;
  --A: #F0575D; --B: #5690EC; --C: #F2C230; --D: #4FBC77; --E: #3CC2CC; --F: #F08A4B; --P: #B07FD6; --K: #EE7FA5;
}
[hidden] { display: none !important; }
:root { --radius-box: 14px; --radius-field: 10px; --radius-selector: 99px; }

html, body { background: var(--color-base-200); color: var(--color-base-content); }
body { font-family: "Barlow", system-ui, -apple-system, "Segoe UI", sans-serif; font-size: 15px; }
.wrap { max-width: 560px; margin: 0 auto; padding-inline: 16px; padding-block: calc(14px + env(safe-area-inset-top, 0px)) 120px; }
h1, h2, h3, .display { font-family: "Barlow Condensed", "Arial Narrow", Arial, sans-serif; font-weight: 700; letter-spacing: .01em; text-wrap: balance; }
h1 { font-size: 30px; line-height: 1.05; text-transform: uppercase; }
h2 { font-size: 22px; text-transform: uppercase; }
h3 { font-size: 18px; }
.num { font-variant-numeric: tabular-nums; }
.muted { color: var(--muted); }
.eyebrow { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); font-weight: 600; }
.dock > button { font-family: "Barlow Condensed", sans-serif; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }

/* letra do treino: chip pequeno na cor do treino (antes era a anilha grande). Aceita A–F e P (pacote). */
.plate { width: 32px; height: 32px; border-radius: 10px; flex: none; display: grid; place-items: center;
  background: color-mix(in srgb, var(--c, var(--muted)) 16%, transparent); color: var(--c, var(--muted)); }
.plate b { font-family: "Barlow Condensed", sans-serif; font-size: 17px; font-weight: 700; line-height: 1; }
.plate.lg { width: 40px; height: 40px; border-radius: 12px; background: var(--c, var(--muted)); color: #fff; }
.plate.lg.pC { color: #15181B; }
.plate.lg b { font-size: 21px; }
.pA { --c: var(--A); } .pB { --c: var(--B); } .pC { --c: var(--C); } .pD { --c: var(--D); } .pE { --c: var(--E); } .pF { --c: var(--F); } .pP { --c: var(--P); } .pK { --c: var(--K); }
/* só cardio */
.ckcard { background: color-mix(in srgb, var(--K) 12%, var(--color-base-100)); border: 1.5px solid color-mix(in srgb, var(--K) 45%, transparent); }
.ckon { background: var(--K); border-color: var(--K); color: #fff; }
.ckbox { text-align: center; border-radius: var(--radius-box); padding: 16px; background: color-mix(in srgb, var(--K) 14%, var(--color-base-100)); }
.ckbox .ckt { font-family: "Barlow Condensed", sans-serif; font-weight: 700; font-size: 72px; line-height: 1; font-variant-numeric: tabular-nums; }
.ckbox .progress { color: var(--K); }
.ckph { display: flex; align-items: center; justify-content: space-between; border-radius: var(--radius-box); padding: 12px 16px; background: var(--color-base-100); font-weight: 700; font-size: 20px; }
.ckph.forte { background: var(--K); color: #fff; }

/* carrossel da ficha: um cartão por treino, na cor dele (arrasta para o lado) */
.wcar { display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; margin-inline: -16px; padding: 4px 16px 10px; scrollbar-width: none; }
.wcar::-webkit-scrollbar { display: none; }
.wcard { flex: none; width: 68%; max-width: 250px; min-height: 150px; scroll-snap-align: start; border-radius: 20px; padding: 14px; color: #fff; text-align: left;
  position: relative; overflow: hidden; display: flex; flex-direction: column; background: linear-gradient(150deg, var(--c, var(--muted)), color-mix(in srgb, var(--c, var(--muted)) 60%, #000)); transition: transform .15s, box-shadow .15s; }
.wcard.pC { color: #15181B; background: linear-gradient(150deg, var(--c), color-mix(in srgb, var(--c) 78%, #000)); }
.wcard::after { content: ""; position: absolute; right: -40px; bottom: -40px; width: 130px; height: 130px; border-radius: 50%; border: 14px solid rgba(255, 255, 255, .14); pointer-events: none; }
.wcard.sel { box-shadow: 0 0 0 3px var(--color-base-200), 0 0 0 5px var(--c, var(--muted)); transform: translateY(-2px); }
.wcard .l { font-family: "Barlow Condensed", sans-serif; font-weight: 700; font-size: 44px; line-height: .9; }
.wcard .n { font-family: "Barlow Condensed", sans-serif; font-weight: 700; font-size: 20px; line-height: 1.05; margin-top: 6px; }
.wcard .m { font-size: 13px; opacity: .88; margin-top: auto; padding-top: 6px; }
.wcard .pill { position: absolute; top: 12px; right: 12px; font-family: "Barlow Condensed", sans-serif; font-weight: 700; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; background: rgba(0, 0, 0, .22); padding: 3px 9px; border-radius: 99px; }

/* prévia do treino selecionado: lista com emoji do grupo muscular */
.exprev { list-style: none; padding: 0; margin: 10px 0 12px; display: grid; gap: 7px; }
.exprev li { display: flex; align-items: center; gap: 10px; font-size: 14.5px; }
.exprev li span:nth-child(2) { flex: 1; min-width: 0; }
.exprev li em { font-style: normal; color: var(--muted); font-size: 13px; white-space: nowrap; }
.exth { width: 34px; height: 34px; border-radius: 10px; background: var(--color-base-200); display: grid; place-items: center; font-size: 17px; flex: none; }
.wstats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.wstats > div { background: var(--color-base-100); border-radius: var(--radius-box); padding: 11px 12px; box-shadow: 0 1px 2px rgba(0, 0, 0, .06); }
.wstats b { display: block; font-family: "Barlow Condensed", sans-serif; font-weight: 700; font-size: 24px; line-height: 1; font-variant-numeric: tabular-nums; }
.wstats span { font-size: 12px; color: var(--muted); }
.offer { background: color-mix(in srgb, var(--P) 12%, var(--color-base-100)); border: 1.5px solid color-mix(in srgb, var(--P) 45%, transparent); }
.next { outline: 2px solid var(--color-base-content); outline-offset: -1px; }

/* sessão */
.sess-head { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 5; background: var(--color-base-200); padding-block: 10px; border-bottom: 1px solid var(--color-base-300); }
.clock { font-family: "Barlow Condensed", sans-serif; font-weight: 700; font-size: 40px; line-height: 1; font-variant-numeric: tabular-nums; }
.ex { scroll-margin-top: 230px; }
.vid { margin-top: 8px; width: 100%; aspect-ratio: 16 / 9; border-radius: 10px; overflow: hidden; background: #000; }
.vid.short { aspect-ratio: 9 / 16; width: auto; max-width: 100%; height: min(70vh, 560px); margin-inline: auto; }
.vid iframe { width: 100%; height: 100%; border: 0; display: block; }
.sets { display: grid; grid-template-columns: 28px 1fr 1fr 52px; gap: 8px; align-items: center; }
.sets.tm { grid-template-columns: 28px 1fr 52px 52px; }
.sets.nl { grid-template-columns: 28px 1fr 52px; }
.sets .hd { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); font-weight: 600; }
.sets .i { font-family: "Barlow Condensed", sans-serif; font-weight: 700; font-size: 18px; color: var(--muted); text-align: center; }
.sets .input { font-size: 17px; font-variant-numeric: tabular-nums; min-width: 0; width: 100%; }
/* valor da última vez, já preenchido: tom claro até a série ser digitada ou concluída */
.sets .input.sug { color: color-mix(in srgb, var(--color-base-content) 55%, transparent); border-style: dashed; }
.chk { width: 52px; height: 44px; }
.prog { font-family: "Barlow Condensed", sans-serif; font-weight: 700; font-size: 18px; font-variant-numeric: tabular-nums; }
/* cronômetro (descanso ou série por tempo) no cabeçalho fixo da sessão: sempre no topo, à vista */
.restbar { margin-top: 10px; border-radius: var(--radius-box); background: var(--color-neutral); color: var(--color-neutral-content); padding: 10px 14px; }
.restbar.set { background: color-mix(in srgb, var(--color-warning) 30%, var(--color-neutral)); }
.restbar .t { font-family: "Barlow Condensed", sans-serif; font-weight: 700; font-size: 44px; line-height: 1; font-variant-numeric: tabular-nums; }
.restbar .progress { color: inherit; background-color: color-mix(in srgb, currentColor 18%, transparent); }

/* questionário */
.choice { justify-content: flex-start; text-align: left; height: auto; min-height: 52px; font-size: 16px; font-weight: 600; }
.chart { width: 100%; height: auto; display: block; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

/* marca */
.brand { font-family: "Barlow Condensed", "Arial Narrow", Arial, sans-serif; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; line-height: .95; }
.logo { flex: none; }

/* questionário: transição de slide entre perguntas */
.onb-step { animation: onbIn .32s cubic-bezier(.2,.7,.3,1) both; }
.onb-step.from-left { animation-name: onbInBack; }
@keyframes onbIn { from { opacity: 0; transform: translateX(48px); } to { opacity: 1; transform: none; } }
@keyframes onbInBack { from { opacity: 0; transform: translateX(-48px); } to { opacity: 1; transform: none; } }
.onb-step .choice { transition: transform .12s, background-color .12s; }
.onb-step .choice:active { transform: scale(.98); }
progress.progress { transition: all .3s; }

/* ===== avatar ===== */
.avstage { position: relative; height: 290px; border-radius: 16px; overflow: hidden; display: flex; justify-content: center; align-items: flex-end;
  background: radial-gradient(120% 90% at 50% 15%, color-mix(in srgb, var(--color-base-100) 70%, var(--color-base-200)), var(--color-base-300)); }
.avstage .floor { position: absolute; left: 0; right: 0; bottom: 0; height: 22px; background: color-mix(in srgb, var(--color-base-300) 70%, var(--color-base-content) 12%); }
.avbtn { border: 0; background: none; padding: 0; position: relative; z-index: 1; cursor: pointer; }
.avstage .avbtn svg { width: min(58vw, 220px); height: auto; display: block; }
.avhead { width: 44px; height: 50px; border-radius: 12px; overflow: hidden; background: var(--color-base-200); display: flex; justify-content: center; align-items: flex-start; flex: none; border: 0; padding: 0; }
.avhead svg { width: 56px; height: auto; margin-top: -2px; }
.avhead.lg { width: 52px; height: 58px; }
.avhead.lg svg { width: 66px; }
.coinpill { display: inline-flex; align-items: center; gap: 6px; background: var(--color-neutral); color: var(--color-neutral-content); border-radius: 99px; padding: 5px 12px 5px 8px; font-family: "Barlow Condensed", sans-serif; font-weight: 700; font-size: 18px; }
.coin { width: 18px; height: 18px; border-radius: 50%; background: #E0A400; box-shadow: inset 0 0 0 3px #9A7000; flex: none; display: inline-block; }
.coin.sm { width: 12px; height: 12px; box-shadow: inset 0 0 0 2px #9A7000; }
.price { display: inline-flex; align-items: center; gap: 4px; font-family: "Barlow Condensed", sans-serif; font-weight: 700; font-size: 15px; }
.thumb svg { width: 56px; height: 56px; display: block; }
.sw { width: 38px; height: 38px; border-radius: 50%; border: 2px solid var(--color-base-300); cursor: pointer; }
.sw.on { outline: 3px solid var(--color-base-content); outline-offset: 2px; }
.cf { position: absolute; top: -10px; width: 8px; height: 12px; border-radius: 2px; z-index: 2; animation: pf-fall 1.5s ease-in forwards; }
@keyframes pf-fall { to { transform: translate(var(--dx), 330px) rotate(var(--r)); opacity: .2; } }
.avsvg .db { display: none; }
.avsvg .upper { animation: pf-breathe 2.6s ease-in-out infinite; }
.avsvg .eyes { animation: pf-blink 4.2s infinite; }
.avsvg .arm-l { animation: pf-swingL 2.6s ease-in-out infinite; }
.avsvg .arm-r { animation: pf-swingR 2.6s ease-in-out infinite; }
.avsvg .head { animation: pf-tilt 5.2s ease-in-out infinite; }
@keyframes pf-breathe { 50% { transform: translateY(1.8px); } }
@keyframes pf-blink { 0%, 93%, 100% { transform: scaleY(1); } 95% { transform: scaleY(.1); } }
@keyframes pf-swingL { 50% { transform: rotate(5deg); } }
@keyframes pf-swingR { 50% { transform: rotate(-5deg); } }
@keyframes pf-tilt { 0%, 100% { transform: rotate(0); } 30% { transform: rotate(-2.5deg); } 65% { transform: rotate(2deg); } }
.st-lift .db { display: inline; }
.st-lift .bottle { display: none; }
.st-lift .arm-l { animation: pf-pressL 1.2s ease-in-out infinite; }
.st-lift .arm-r { animation: pf-pressR 1.2s ease-in-out infinite; }
.st-lift .upper { animation: pf-squat 1.2s ease-in-out infinite; }
.st-lift .legs { animation: pf-legs 1.2s ease-in-out infinite; transform-origin: 100px 237px; }
@keyframes pf-pressL { 0%, 100% { transform: rotate(12deg); } 50% { transform: rotate(82deg); } }
@keyframes pf-pressR { 0%, 100% { transform: rotate(-12deg); } 50% { transform: rotate(-82deg); } }
@keyframes pf-squat { 0%, 100% { transform: translateY(5px); } 50% { transform: translateY(-2px); } }
@keyframes pf-legs { 0%, 100% { transform: scaleY(.95); } 50% { transform: scaleY(1); } }
.st-jump .av { animation: pf-jump .62s cubic-bezier(.3,.7,.4,1) 3; }
.st-jump .shadow { animation: pf-shadow .62s cubic-bezier(.3,.7,.4,1) 3; transform-origin: 100px 240px; }
.pav .st-jump .av { animation: pf-jump 1.4s ease-in-out infinite; }
.pav .st-jump .shadow { animation: pf-shadow 1.4s ease-in-out infinite; }
.st-jump .arm-l { animation: none; transform: rotate(128deg); transition: transform .2s; }
.st-jump .arm-r { animation: none; transform: rotate(-128deg); transition: transform .2s; }
@keyframes pf-jump { 0%, 100% { transform: translateY(0); } 45% { transform: translateY(-26px); } }
@keyframes pf-shadow { 45% { transform: scale(.6); opacity: .08; } }
.st-wave .arm-r { animation: pf-wave .38s ease-in-out infinite alternate; }
@keyframes pf-wave { from { transform: rotate(-105deg); } to { transform: rotate(-140deg); } }
@media (prefers-reduced-motion: reduce) { .avsvg * { animation: none !important; } }
/* pódio */
.podium { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; align-items: end; background: var(--color-base-300); border-radius: 14px; padding: 12px 10px 0; overflow: hidden; }
.pcol { display: flex; flex-direction: column; align-items: center; min-width: 0; }
.pav { position: relative; width: 100%; max-width: 104px; }
.pav svg { width: 100%; height: auto; display: block; }
.pav .crown { position: absolute; width: 34%; left: 33%; top: -4%; z-index: 2; height: auto; }
.pname { font-weight: 700; font-size: 14px; margin: 2px 0 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.pblock { width: 100%; border-radius: 10px 10px 0 0; display: flex; flex-direction: column; align-items: center; padding-top: 6px; color: #fff; border: 2.5px solid #2B2220; border-bottom: 0; }
.pblock span { font-family: "Barlow Condensed", sans-serif; font-weight: 700; font-size: 24px; line-height: 1; }
.pblock small { font-size: 12px; font-weight: 600; }
.pblock.gold { background: #E0A400; } .pblock.silver { background: #9AA1A8; } .pblock.bronze { background: #B8733E; }

/* confirmação para começar o treino e contagem regressiva */
.sheet-in { animation: sheetIn .28s cubic-bezier(.2,.7,.3,1) both; }
@keyframes sheetIn { from { transform: translateY(40px); opacity: 0; } to { transform: none; opacity: 1; } }
.startcd { position: fixed; inset: 0; z-index: 60; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
  background: color-mix(in srgb, var(--color-base-200) 88%, transparent); backdrop-filter: blur(4px); cursor: pointer; }
.startcd .cd-n { font-family: "Barlow Condensed", sans-serif; font-weight: 700; font-size: 140px; line-height: 1; animation: cdPop .8s ease-out both; }
.startcd .cd-n.go { color: var(--A); font-size: 110px; text-transform: uppercase; }
.startcd small { color: var(--muted); font-size: 13px; }
@keyframes cdPop { 0% { transform: scale(.4); opacity: 0; } 30% { transform: scale(1.08); opacity: 1; } 100% { transform: scale(1); opacity: .9; } }

/* Botão "Entrar com Apple": preto no tema claro, branco no escuro (diretrizes da Apple), mesmo tamanho do Google */
.btn-apple { background: #000; color: #fff; border-color: #000; }
[data-theme="dark"] .btn-apple { background: #fff; color: #000; border-color: #fff; }