/* JoyFit UI · camada final (carregada por último).
   1) Tokens únicos para claro/escuro. O tema é sempre resolvido em <html data-theme> (ver index.html),
      então nenhuma regra fica "meio clara, meio escura".
   2) Correções de contraste medidas (WCAG AA) nas telas existentes.
   3) Entrada (login/cadastro), guia rápido, componentes do Treino e animações. */

/* ---------- 1. tokens ---------- */
:root,:root[data-theme='light']{
 --j-bg:#f4efe9;--j-bg2:#efe6dc;--j-surface:#fffcf8;--j-surface2:#f8f1ea;--j-ink:#1c2128;--j-ink2:#58616b;--j-ink3:#7a838c;
 --j-line:#e8ddd2;--j-brand:#ef6531;--j-brand-ink:#b4421a;--j-fill:#c94a1b;--j-fill-hover:#ad3d14;--j-glow:rgba(239,101,49,.16);
 --j-green:#1f8a6f;--j-blue:#1677a6;--j-shadow:0 1px 2px rgba(40,26,14,.05),0 8px 24px -12px rgba(40,26,14,.14);
 --j-shadow-lg:0 2px 6px rgba(40,26,14,.05),0 24px 60px -24px rgba(40,26,14,.28);--j-r:18px;--j-ease:cubic-bezier(.2,.8,.2,1);
 --bg:var(--j-bg);--card:var(--j-surface);--soft:#fdeee4;--t:var(--j-ink);--t2:var(--j-ink2);--sep:var(--j-line);--line:var(--j-line);
 --a:var(--j-brand);--action:var(--j-fill);--action-hover:var(--j-fill-hover);--action-text:var(--j-brand-ink);--focus-ring:var(--j-brand);--soft-border:#f2c9b1;
 --btn-bg:var(--j-fill);
 --aura-bone:var(--j-bg);--aura-white:var(--j-surface);--aura-ink:var(--j-ink);--aura-muted:var(--j-ink2);--aura-line:var(--j-line);--aura-copper:var(--j-fill);
 color-scheme:light;
}
:root[data-theme='dark']{
 --j-bg:#0f1318;--j-bg2:#141a21;--j-surface:#181e25;--j-surface2:#1f262f;--j-ink:#f3f0ec;--j-ink2:#adb6c0;--j-ink3:#8d97a2;
 --j-line:#2a333e;--j-brand:#ff8752;--j-brand-ink:#ffa47c;--j-fill:#c94a1b;--j-fill-hover:#de5a27;--j-glow:rgba(255,135,82,.2);
 --j-green:#5fd1b0;--j-blue:#6cc3ef;--j-shadow:0 1px 2px rgba(0,0,0,.3),0 10px 30px -14px rgba(0,0,0,.6);--j-shadow-lg:0 30px 70px -30px rgba(0,0,0,.75);
 --bg:var(--j-bg);--card:var(--j-surface);--soft:#2b221e;--t:var(--j-ink);--t2:var(--j-ink2);--sep:var(--j-line);--line:var(--j-line);
 --a:var(--j-brand);--action-text:var(--j-brand-ink);--focus-ring:var(--j-brand);--soft-border:#5a3a2c;
 --aura-bone:var(--j-bg);--aura-white:var(--j-surface);--aura-ink:var(--j-ink);--aura-muted:var(--j-ink2);--aura-line:var(--j-line);
 color-scheme:dark;
}

/* ---------- fundo com identidade ---------- */
html,body{background-color:var(--j-bg)!important}
body{background-image:
  radial-gradient(60rem 36rem at 105% -10%,rgba(255,170,120,.30),transparent 60%),
  radial-gradient(40rem 30rem at -15% 30%,rgba(255,214,186,.35),transparent 65%),
  radial-gradient(50rem 30rem at 50% 115%,rgba(196,222,212,.35),transparent 70%)!important;background-attachment:fixed!important;color:var(--j-ink)}
:root[data-theme='dark'] body{background-image:
  radial-gradient(56rem 34rem at 105% -12%,rgba(255,120,60,.16),transparent 60%),
  radial-gradient(40rem 30rem at -20% 35%,rgba(120,90,160,.10),transparent 65%),
  radial-gradient(50rem 30rem at 50% 120%,rgba(40,140,120,.10),transparent 70%)!important}
::selection{background:var(--j-glow);color:inherit}
body{-webkit-tap-highlight-color:transparent;-webkit-font-smoothing:antialiased}

/* ---------- foco: anel suave, nunca um retângulo laranja ---------- */
input,select,textarea{-webkit-appearance:none;appearance:none}
input[type=checkbox],input[type=radio]{-webkit-appearance:auto;appearance:auto;accent-color:var(--j-fill)}
input:focus,select:focus,textarea:focus{outline:none!important}
input:focus-visible,select:focus-visible,textarea:focus-visible,
#login input:focus,#app input:focus,#app select:focus,#app textarea:focus,#sh input:focus,#sh select:focus,#sh textarea:focus,#intro input:focus{
 outline:none!important;border-color:var(--j-brand)!important;box-shadow:0 0 0 4px var(--j-glow)!important}
button:focus:not(:focus-visible),a:focus:not(:focus-visible){outline:none!important;box-shadow:none}
button:focus-visible,a:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--j-brand)!important;outline-offset:2px}
/* a "caixa" do formulário não deve ganhar contorno ao focar um campo interno */
#login .box:focus-within,#login .pwr:focus-within{outline:none!important;box-shadow:inherit}

/* ---------- 2. contraste medido (antes < 4,5:1) ---------- */
.jf-eyebrow,.hd-kicker,.jf-vivo-kicker,.jf-e3-kicker,.jf-rank-feature>span,.jf-e3-photo-head>span,#app .jf-page-header .jf-eyebrow{color:var(--j-brand-ink)!important;opacity:1!important}
:root[data-theme='light'] #app .jf-page-header .jf-eyebrow{color:#a63c15!important}
.jp-fast-hero .jf-vivo-kicker{color:#a9ede5!important}.jf-rewards-hero .jf-vivo-kicker{color:inherit!important}
.jl-fine,.tv2-fine,.tv2-ring small{color:var(--j-ink2)!important}
.jf-f5-kicker,#app .jf-link{color:var(--j-brand-ink)!important}
.jf-vivo-hero .jf-vivo-eyebrow{color:#ffc29c!important}
#nav button.on{background:var(--j-fill)!important;color:#fff!important}
:root[data-theme='dark'] #nav button.on{background:#46291d!important;color:#ffb48f!important}
.tv2-weekmini span.off{color:var(--j-ink2)}
.jf-avatar small,.avatar-initial{background:var(--j-fill)!important;color:#fff!important}
.jf-profile-avatar .avatar-initial{background:transparent!important;color:var(--j-brand-ink)!important}
.card .btns button.chip.on,.card>button,.card .item>button,.jf-rank-join button,button.jf-primary,.jf-primary,#app button.on.chip{background:var(--j-fill)!important;color:#fff!important;border-color:var(--j-fill)!important}
button.jf-primary:hover,.jf-primary:hover{background:var(--j-fill-hover)!important}
.jf-result-chart .jf-empty{background:var(--j-surface2)!important;color:var(--j-ink2)!important;border:1px dashed var(--j-line)!important}
.jf-rank-join label,#login #tabR,#login #tabL{color:var(--j-ink2)!important}
#login .tab.on{color:var(--j-ink)!important}
:root[data-theme='dark'] .jf-panel,:root[data-theme='dark'] .card{color:var(--j-ink)}
:root[data-theme='dark'] .jf-panel p,:root[data-theme='dark'] .card .sub,:root[data-theme='dark'] .jf-head-text p{color:var(--j-ink2)}
/* perfil: sem caixa branca isolada no escuro */
:root[data-theme='dark'] .jf-e3-photo-panel,:root[data-theme='dark'] .wt-profile-entry{background:var(--j-surface)!important;color:var(--j-ink)!important}

/* ---------- superfícies e tipografia comuns ---------- */
/* painéis claros comuns; heróis ilustrados/escuros (jejum, conquistas, início) mantêm seu fundo próprio */
.jf-panel:not([class*=hero]):not(.jp-level):not(.jf-fire-profile),#app .card:not(.hero){border-color:var(--j-line)!important;box-shadow:var(--j-shadow)!important}
:root[data-theme='dark'] .jf-panel:not([class*=hero]):not(.jp-level):not(.jf-fire-profile){background-color:var(--j-surface)!important}
#app .jf-panel,#app .card{border-radius:var(--j-r)!important}
.jf-page-header h1,.hd .ht{letter-spacing:-.03em}
#app{padding-bottom:calc(112px + env(safe-area-inset-bottom,0px))}

/* ---------- convite do guia: no fluxo da página, nunca atrás da barra ---------- */
.wt-invitation{display:none!important}
.jg-invite{display:grid;grid-template-columns:auto 1fr auto auto;align-items:center;gap:12px;margin:18px 0 8px;padding:14px 14px 14px 16px;background:var(--j-surface);border:1px solid var(--j-line);border-radius:var(--j-r);box-shadow:var(--j-shadow);animation:j-rise .5s var(--j-ease) both .15s}
.jg-invite-ico{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;background:var(--soft);color:var(--j-brand-ink)}
.jg-invite-ico svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.jg-invite strong{display:block;font-size:15px;color:var(--j-ink)}.jg-invite p{margin:2px 0 0;font-size:13px;color:var(--j-ink2)}
.jg-invite-go{min-height:40px;padding:0 14px;border-radius:12px;border:0;background:var(--j-fill);color:#fff;font-weight:700}
.jg-invite-x{width:36px;height:36px;border-radius:10px;border:0;background:transparent;color:var(--j-ink3);font-size:15px}

/* ---------- guia rápido ---------- */
body.jg-lock{overflow:hidden}
.jg{position:fixed;inset:0;z-index:140;display:flex;align-items:flex-end;justify-content:center}
.jg-backdrop{position:absolute;inset:0;background:rgba(12,10,9,.48);backdrop-filter:blur(6px);animation:j-fade .25s both}
.jg-sheet{position:relative;width:100%;max-width:520px;max-height:92dvh;display:flex;flex-direction:column;background:var(--j-surface);color:var(--j-ink);border-radius:26px 26px 0 0;padding:14px 20px calc(16px + env(safe-area-inset-bottom,0px));box-shadow:var(--j-shadow-lg);animation:j-sheet .42s var(--j-ease) both}
@media(min-width:700px){.jg{align-items:center}.jg-sheet{border-radius:26px;padding-bottom:20px}}
.jg.closing .jg-sheet{animation:j-sheet-out .22s ease-in both}.jg.closing .jg-backdrop{animation:j-fade .22s reverse both}
.jg-top{display:flex;justify-content:space-between;align-items:center}
.jg-brand{font-size:12px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--j-brand-ink)}
.jg-x{width:40px;height:40px;border-radius:12px;border:1px solid var(--j-line);background:transparent;color:var(--j-ink2)}
.jg-stage{overflow:hidden;min-height:340px;touch-action:pan-y}
.jg-tip{padding:6px 2px 4px}
.jg-tip.in-r{animation:j-in-r .38s var(--j-ease) both}.jg-tip.in-l{animation:j-in-l .38s var(--j-ease) both}
.jg-art{position:relative;width:84px;height:84px;margin:10px 0 18px;display:grid;place-items:center;border-radius:26px;background:linear-gradient(140deg,#ff9a62,#e8551f);box-shadow:0 18px 40px -16px rgba(232,85,31,.7)}
.jg-ico{width:42px;height:42px;fill:none;stroke:#fff;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.jg-ring{position:absolute;inset:-8px;border-radius:32px;border:1.5px solid var(--j-glow);animation:j-pulse 2.6s ease-out infinite}
.jg-tip[data-tip=water] .jg-art{background:linear-gradient(140deg,#5cc6ef,#1677a6);box-shadow:0 18px 40px -16px rgba(22,119,166,.7)}
.jg-tip[data-tip=workout] .jg-art{background:linear-gradient(140deg,#4a5260,#1c2128)}
.jg-tip[data-tip=progress] .jg-art{background:linear-gradient(140deg,#3cc79f,#1f8a6f);box-shadow:0 18px 40px -16px rgba(31,138,111,.7)}
.jg-count{font-size:12px;font-weight:700;color:var(--j-ink3);letter-spacing:.04em}
.jg-tip h2{font-family:var(--fd);font-size:26px;line-height:1.12;letter-spacing:-.03em;margin:6px 0 10px;outline:none}
.jg-tip p{font-size:16px;line-height:1.5;color:var(--j-ink2);margin:0 0 14px}
.jg-tip ul{list-style:none;margin:0 0 16px;padding:0;display:grid;gap:8px}
.jg-tip li{position:relative;padding-left:26px;font-size:14px;color:var(--j-ink);line-height:1.45}
.jg-tip li::before{content:'';position:absolute;left:4px;top:5px;width:12px;height:7px;border-left:2px solid var(--j-green);border-bottom:2px solid var(--j-green);transform:rotate(-45deg)}
.jg-open{background:none;border:0;padding:8px 0;color:var(--j-brand-ink);font-weight:700;font-size:15px;min-height:44px}
.jg-dots{display:flex;gap:6px;justify-content:center;margin:6px 0 14px}
.jg-dots button{width:8px;height:8px;min-height:0!important;padding:0!important;border:0;border-radius:99px;background:var(--j-line);transition:width .3s var(--j-ease),background .3s}
.jg-dots button.on{width:26px;background:var(--j-brand)}
.jg-foot{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:8px}
.jg-ghost,.jg-skip{min-height:48px;padding:0 14px;border-radius:14px;border:1px solid var(--j-line);background:transparent;color:var(--j-ink);font-weight:600}
.jg-skip{border:0;color:var(--j-ink3);justify-self:center}
.jg-ghost:disabled{opacity:.35}
.jg-next{min-height:52px;padding:0 24px;border-radius:14px;border:0;background:var(--j-fill);color:#fff;font-weight:800;font-size:16px}

/* ---------- 3. entrada: escolha → formulário ---------- */
#login.jl{position:fixed;inset:0;display:block;padding:0!important;overflow:auto;color:var(--j-ink)!important;background:var(--j-bg)!important;
 background-image:radial-gradient(38rem 30rem at 85% -5%,rgba(255,150,95,.55),transparent 60%),radial-gradient(30rem 26rem at -10% 40%,rgba(255,206,170,.5),transparent 65%),radial-gradient(40rem 26rem at 50% 115%,rgba(180,220,205,.5),transparent 70%)!important}
:root[data-theme='dark'] #login.jl{background-image:radial-gradient(38rem 30rem at 85% -5%,rgba(255,110,50,.28),transparent 60%),radial-gradient(30rem 26rem at -10% 40%,rgba(130,90,170,.16),transparent 65%),radial-gradient(40rem 26rem at 50% 115%,rgba(40,150,125,.16),transparent 70%)!important}
#login.jl.hide{display:none!important}
#login.jl::before,#login.jl::after{display:none!important;content:none!important}
#login.jl .jf-e1-auth-story{display:none!important}
.jl-choice{min-height:100dvh;display:flex;flex-direction:column;justify-content:flex-end;padding:calc(18px + env(safe-area-inset-top,0px)) 22px calc(26px + env(safe-area-inset-bottom,0px));max-width:560px;margin:0 auto}
.jl-art{position:relative;flex:1;min-height:300px;max-height:440px}
.jl-orb{position:absolute;border-radius:50%;filter:blur(2px)}
.jl-orb1{width:240px;height:240px;right:-30px;top:30px;background:radial-gradient(circle at 35% 35%,#ffb98f,#ef6531 70%);opacity:.9;animation:j-float 9s ease-in-out infinite}
.jl-orb2{width:120px;height:120px;left:6px;top:150px;background:radial-gradient(circle at 35% 35%,#c8efe2,#47b394 75%);opacity:.75;animation:j-float 11s ease-in-out infinite reverse}
.jl-food{position:absolute;width:220px;height:220px;object-fit:cover;border-radius:50%;left:50%;top:44%;transform:translate(-50%,-50%);box-shadow:0 30px 60px -20px rgba(80,30,10,.55),0 0 0 8px rgba(255,255,255,.55);animation:j-pop .9s var(--j-ease) both .1s}
:root[data-theme='dark'] .jl-food{box-shadow:0 30px 60px -20px rgba(0,0,0,.8),0 0 0 8px rgba(255,255,255,.08)}
.jl-bottle{position:absolute;width:74px;left:8%;top:12%;animation:j-pop .9s var(--j-ease) both .3s,j-float 7s ease-in-out infinite 1.2s;filter:drop-shadow(0 14px 18px rgba(0,0,0,.18))}
.jl-dumbbell{position:absolute;width:110px;right:4%;bottom:6%;animation:j-pop .9s var(--j-ease) both .45s,j-float 8s ease-in-out infinite 1.4s reverse;filter:drop-shadow(0 14px 18px rgba(0,0,0,.18))}
.jl-chip{position:absolute;padding:8px 12px;border-radius:999px;background:var(--j-surface);color:var(--j-ink);font-size:13px;font-weight:700;box-shadow:var(--j-shadow-lg);white-space:nowrap}
.jl-chip1{left:2%;bottom:16%;animation:j-pop .8s var(--j-ease) both .7s}.jl-chip2{right:4%;top:8%;animation:j-pop .8s var(--j-ease) both .85s}
.jl-choice-copy{animation:j-rise .7s var(--j-ease) both .2s}
.jl-logo{margin-bottom:12px}.jl-logo .jf-brand{--brand-size:52px!important}
.jl-choice h1{font-family:var(--fd);font-size:clamp(32px,8.6vw,46px);line-height:1.02;letter-spacing:-.045em;margin:0 0 12px;color:var(--j-ink)}
.jl-choice h1 em{font-style:normal;color:var(--j-brand-ink)}
.jl-choice p{font-size:16px;line-height:1.5;color:var(--j-ink2);margin:0 0 22px}
.jl-actions{display:grid;gap:10px}
.jl-btn{min-height:56px;border-radius:16px;font-size:16px;font-weight:800;border:0;cursor:pointer;transition:transform .15s var(--j-ease),background .2s,box-shadow .2s}
.jl-btn-primary{background:var(--j-fill);color:#fff;box-shadow:0 16px 30px -14px rgba(201,74,27,.8)}
.jl-btn-primary:hover{background:var(--j-fill-hover)}
.jl-btn-ghost{background:var(--j-surface);color:var(--j-ink);border:1px solid var(--j-line)}
.jl-btn:active{transform:scale(.98)}
.jl-fine{text-align:center;font-size:13px!important;margin:14px 0 0!important;color:var(--j-ink2)!important}
/* formulário */
#login.jl[data-stage=choice] .box{display:none!important}
#login.jl[data-stage=form] .jl-choice{display:none}
#login.jl .box{position:relative;width:auto!important;max-width:460px!important;max-height:none!important;margin:0 auto!important;min-height:100dvh;padding:calc(64px + env(safe-area-inset-top,0px)) 22px 28px!important;
 background:transparent!important;border:0!important;border-radius:0!important;box-shadow:none!important;backdrop-filter:none!important;color:var(--j-ink)!important;display:flex;flex-direction:column;justify-content:center;animation:j-rise .45s var(--j-ease) both}
@media(min-width:620px){#login.jl .box{min-height:0;margin:8vh auto!important;padding:40px 36px 32px!important;background:var(--j-surface)!important;border:1px solid var(--j-line)!important;border-radius:28px!important;box-shadow:var(--j-shadow-lg)!important}}
#login.jl .box>button.jl-back{position:absolute;left:14px;top:calc(14px + env(safe-area-inset-top,0px));width:44px!important;height:44px!important;min-height:0!important;padding:0!important;margin:0!important;border-radius:14px!important;border:1px solid var(--j-line)!important;background:var(--j-surface)!important;color:var(--j-ink)!important;display:grid;place-items:center;box-shadow:none!important}
.jl-back svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
#login.jl #lg0{margin-bottom:18px}#login.jl #lg0 .jf-brand{--brand-size:46px!important}
.jl-form-title{font-family:var(--fd);font-size:30px;line-height:1.1;letter-spacing:-.035em;margin:0 0 6px;color:var(--j-ink)}
#login.jl #auth-intro{font-size:15px;color:var(--j-ink2)!important;margin:0 0 20px}
/* no formulário aparece só a ação escolhida; a troca fica num link discreto */
#login.jl[data-stage=form] .tabs{display:none!important}
.jl-switch{margin:18px 0 0;text-align:center;font-size:14px;color:var(--j-ink2)}
#login.jl .jl-switch button{display:inline;width:auto!important;min-height:0!important;padding:4px 2px!important;margin:0!important;border:0!important;background:none!important;box-shadow:none!important;color:var(--j-brand-ink)!important;font-weight:800;font-size:14px;text-decoration:underline;text-underline-offset:3px}
#login.jl .tabs{display:grid!important;grid-template-columns:1fr 1fr;padding:4px;margin:0 0 18px!important;border-radius:14px!important;background:var(--j-surface2)!important;border:1px solid var(--j-line)}
#login.jl .tab{min-height:42px;border-radius:11px!important;border:0!important;background:transparent!important;font-weight:700;font-size:14px;box-shadow:none!important}
#login.jl .tab.on{background:var(--j-surface)!important;box-shadow:var(--j-shadow)!important}
#login.jl form input{width:100%;min-height:54px!important;margin:0 0 12px!important;padding:0 16px!important;font-size:16px!important;border-radius:14px!important;
 background:var(--j-surface)!important;color:var(--j-ink)!important;border:1.5px solid var(--j-line)!important;transition:border-color .2s,box-shadow .2s}
#login.jl form input::placeholder{color:var(--j-ink3)}
#login.jl .pwr{position:relative}#login.jl .pwr input{padding-right:96px!important}
#login.jl .eye{position:absolute;right:8px;top:8px;height:38px;padding:0 12px;border-radius:10px!important;border:0!important;background:var(--j-surface2)!important;color:var(--j-ink)!important;font-weight:700;font-size:13px}
#login.jl .hint{color:var(--j-ink3)!important;font-size:13px;margin:-4px 0 10px}
#login.jl .err{color:#d43d2a!important;font-size:14px;min-height:20px}:root[data-theme='dark'] #login.jl .err{color:#ff8f80!important}
#login.jl #ab{width:100%;min-height:56px!important;margin-top:6px;border-radius:16px!important;border:0!important;background:var(--j-fill)!important;color:#fff!important;font-size:16px!important;font-weight:800;box-shadow:0 16px 30px -14px rgba(201,74,27,.8)!important}
#login.jl #ab:disabled{opacity:.7}
#login.jl .jf-social-divider span{background:transparent!important;color:var(--j-ink3)!important}
@media(min-width:960px){
 #login.jl[data-stage=choice] .jl-choice{max-width:1180px;flex-direction:row;align-items:center;gap:56px;justify-content:center;padding:40px}
 #login.jl[data-stage=choice] .jl-art{flex:1.1;height:560px;max-height:none}
 #login.jl[data-stage=choice] .jl-choice-copy{flex:1;max-width:460px}
 .jl-food{width:320px;height:320px}.jl-orb1{width:340px;height:340px}.jl-dumbbell{width:150px}.jl-bottle{width:96px}
}

/* ---------- abas e navegação do Treino (contraste no escuro) ---------- */
.tv2-tabs button{color:var(--j-ink2)!important;background:transparent!important;box-shadow:none!important;border-radius:0!important;transition:color .2s}
.tv2-tabs button.on{color:var(--j-ink)!important;border-bottom-color:var(--j-brand)!important}

/* ---------- Treino: componentes novos ---------- */
.tv2-ico{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;flex:none;vertical-align:-4px}
.tv2-ico.sm{width:15px;height:15px}.tv2-ico.xs{width:14px;height:14px;vertical-align:-2px}
.tv2-fine{font-size:12px;line-height:1.45;color:var(--j-ink3);margin:10px 0 0}
.tv2-today-hero{position:relative;overflow:hidden;padding:20px;border-radius:22px;color:#fff;background:linear-gradient(135deg,#2a2f37 0%,#1a1e24 100%);box-shadow:var(--j-shadow-lg);margin-bottom:6px;isolation:isolate}
.tv2-today-hero::after{content:'';position:absolute;z-index:-1;width:260px;height:260px;right:-80px;top:-90px;border-radius:50%;background:radial-gradient(circle,rgba(255,135,82,.75),transparent 65%);animation:j-breathe 6s ease-in-out infinite}
.tv2-today-hero.cardio::after{background:radial-gradient(circle,rgba(70,200,160,.7),transparent 65%)}
.tv2-today-hero.rest{background:linear-gradient(135deg,#2a3340,#1b222b)}.tv2-today-hero.rest::after{background:radial-gradient(circle,rgba(110,170,230,.55),transparent 65%)}
.tv2-today-hero .tv2-kicker{color:rgba(255,255,255,.72)}.tv2-today-hero h2{color:#fff;font-size:26px!important;margin:6px 0 12px!important}
.tv2-today-hero p{color:rgba(255,255,255,.82)!important}.tv2-today-hero .tv2-meta{color:rgba(255,255,255,.65)!important}
.tv2-facts{display:flex;flex-wrap:wrap;gap:6px 14px;margin-bottom:18px;font-size:14px;color:rgba(255,255,255,.78)}.tv2-facts b{color:#fff;font-size:17px}
.tv2 .tv2-start{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;min-height:56px;border:0;border-radius:16px;background:var(--j-brand);color:#1a0c05;font-weight:800;font-size:17px;box-shadow:0 14px 30px -12px rgba(255,120,60,.8);transition:transform .15s var(--j-ease),filter .2s}
.tv2 .tv2-start .tv2-ico{width:22px;height:22px;fill:#1a0c05;stroke:none}
.tv2 .tv2-start:hover{filter:brightness(1.05)}.tv2 .tv2-start:active{transform:scale(.98)}
.tv2-exlist li.timed .n::before{content:'◷';color:var(--j-green)}
.tv2-resume{align-items:center}.tv2-pulse{width:10px;height:10px;border-radius:50%;background:var(--j-brand);flex:none;box-shadow:0 0 0 0 var(--j-glow);animation:j-ping 1.6s infinite}
.tv2-onb>h2{font-family:var(--fd);font-size:24px!important}
.tv2-place{display:inline-flex;padding:3px;border-radius:12px;background:var(--j-surface2);border:1px solid var(--j-line);margin:4px 0 14px}
.tv2-place button{min-height:38px;padding:0 14px;border:0;border-radius:9px;background:transparent;color:var(--j-ink2);font-weight:700;font-size:14px}
.tv2-place button.on{background:var(--j-surface);color:var(--j-ink);box-shadow:var(--j-shadow)}
.tv2-alt{display:flex;flex-wrap:wrap;gap:4px 14px;margin-top:6px}
.tv2-progs{display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));margin:14px 0 28px}
.tv2-progs-sec .tv2-sec-head{align-items:flex-end;flex-wrap:wrap}.tv2-progs-sec .tv2-sec-head h2{margin:0}
.tv2-pgm{position:relative;display:flex;flex-direction:column;padding:18px;border-radius:20px;background:var(--j-surface);border:1px solid var(--j-line);box-shadow:var(--j-shadow);transition:transform .25s var(--j-ease),box-shadow .25s}
.tv2-pgm:hover{transform:translateY(-2px);box-shadow:var(--j-shadow-lg)}
.tv2-pgm.rec{border-color:color-mix(in srgb,var(--j-brand) 45%,var(--j-line));background:linear-gradient(180deg,color-mix(in srgb,var(--j-brand) 7%,var(--j-surface)),var(--j-surface) 60%)}
.tv2-pgm.hero{margin:4px 0 10px}
.tv2-pgm h3{font-family:var(--fd);font-size:19px;letter-spacing:-.02em;margin:4px 0 6px}.tv2-pgm>p{font-size:14px;color:var(--j-ink2);margin:0 0 12px;line-height:1.45}
.tv2-badge{align-self:flex-start;display:inline-flex;align-items:center;gap:6px;padding:5px 10px;border-radius:999px;background:var(--j-fill);color:#fff;font-size:12px;font-weight:800;margin-bottom:4px}
.tv2-comp{list-style:none;padding:0;margin:0 0 12px;display:flex;flex-wrap:wrap;gap:6px}
.tv2-comp li{padding:5px 9px;border-radius:8px;background:var(--j-surface2);font-size:12.5px;font-weight:700;color:var(--j-ink)}
.tv2-weekmini{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;margin:0 0 14px}
.tv2-weekmini span{text-align:center;padding:7px 0;border-radius:8px;font-size:12px;font-weight:800;background:var(--j-surface2);color:var(--j-ink3)}
.tv2-weekmini .str{background:var(--j-ink);color:var(--j-surface)}.tv2-weekmini .car{background:color-mix(in srgb,var(--j-green) 22%,var(--j-surface));color:var(--j-green)}
.tv2-pgm .tv2-actions{margin-top:auto}
.tv2-who-row{display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:center}
.tv2-ring{position:relative;width:78px;height:78px}.tv2-ring svg{width:100%;height:100%;transform:rotate(-90deg)}
.tv2-ring circle{fill:none;stroke-width:7}.tv2-ring .bg{stroke:var(--j-line)}.tv2-ring .fg{stroke:var(--j-green);stroke-linecap:round;transition:stroke-dashoffset 1s var(--j-ease)}
.tv2-ring b{position:absolute;inset:0;display:grid;place-content:center;text-align:center;font-family:var(--fd);font-size:20px;line-height:1}.tv2-ring small{display:block;font-size:11px;color:var(--j-ink3);font-family:var(--fb)}
.tv2-who-t{margin:0;font-weight:700;font-size:14px}.tv2-who .tv2-meta{margin:0 0 6px}
.tv2-dots{display:inline-flex;gap:4px;margin-left:6px;vertical-align:1px}.tv2-dots i{width:9px;height:9px;border-radius:50%;background:var(--j-line)}.tv2-dots i.on{background:var(--j-brand)}
.tv2-minibody{display:flex;justify-content:center;gap:4px;width:100%;padding:8px 0;border:0;background:transparent;cursor:pointer}
.tv2-minibody .bm-fig{width:40%;max-width:104px}
.tv2-week b{min-height:16px}
.tv2-how{margin:4px 0 2px}.tv2-how summary{cursor:pointer;color:var(--j-brand-ink);font-weight:700;font-size:14px;min-height:36px;display:flex;align-items:center}.tv2-how p{font-size:14px;line-height:1.5;color:var(--j-ink2);margin:4px 0 8px}
.tv2-set.timed{grid-template-columns:40px 1fr 36px 48px}.tv2-unit{font-size:13px;color:var(--j-ink3);font-weight:700}
.tv2-sets.timed .tv2-sets-h{grid-template-columns:40px 1fr}
.tv2-sum-body{display:flex;justify-content:center;gap:8px;margin:8px 0 4px}.tv2-sum-body .bm-fig{width:40%;max-width:130px}
.tv2-src{font-size:12.5px!important}.tv2-src a{color:var(--j-brand-ink);font-weight:700}
.tv2-why{background:var(--j-surface2);border-left-color:var(--j-brand)!important;border-radius:0 12px 12px 0;padding:12px 14px!important}

/* ---------- mapa corporal ---------- */
.bm-seg{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;padding:4px;border-radius:14px;background:var(--j-surface2);border:1px solid var(--j-line);margin:0 0 12px}
.bm-seg button{min-height:42px;border:0;border-radius:10px;background:transparent;color:var(--j-ink2);font-weight:700;font-size:14px;transition:background .2s,color .2s}
.bm-seg button.on{background:var(--j-surface);color:var(--j-ink);box-shadow:var(--j-shadow)}
.bm-seg.sm button{min-height:36px;font-size:13px}
.bm-label{font-size:13px;color:var(--j-ink2);margin:0 0 10px;font-weight:600}
.bm-week{display:flex;align-items:center;justify-content:space-between;margin:2px 0 8px}.bm-week strong{font-size:15px}
.bm-figs{display:flex;justify-content:center;gap:2%;padding:8px 0;user-select:none}
.bm-fig{width:48%;max-width:230px;height:auto;overflow:visible}
.bm-base path,.bm-base ellipse{fill:var(--bm-base);stroke:var(--bm-base);stroke-width:5;stroke-linejoin:round}
.bm-r path{fill:var(--bm-0);stroke:var(--bm-edge);stroke-width:1.1;transition:fill .5s var(--j-ease),opacity .3s}
.bm-r{cursor:pointer;outline:none}.bm-r:hover path{filter:brightness(1.12)}
.bm-r.lv1 path{fill:var(--bm-1)}.bm-r.lv2 path{fill:var(--bm-2)}.bm-r.lv3 path{fill:var(--bm-3)}.bm-r.lv4 path{fill:var(--bm-4)}
.bm-r.sel path{stroke:var(--j-ink);stroke-width:2.2}
.bm-figs:has(.bm-r.sel) .bm-r:not(.sel) path{opacity:.55}
:root,:root[data-theme='light']{--bm-base:#d9d1c9;--bm-edge:#c9beb3;--bm-0:#e6ded6;--bm-1:#ffd2b8;--bm-2:#ffa679;--bm-3:#f2743d;--bm-4:#c2410f}
:root[data-theme='dark']{--bm-base:#2a313a;--bm-edge:#1a2027;--bm-0:#38414c;--bm-1:#6b3b28;--bm-2:#a84f28;--bm-3:#e86a30;--bm-4:#ffa070}
.bm-legend{display:flex;align-items:center;justify-content:flex-end;gap:5px;font-size:12px;color:var(--j-ink3);margin:4px 0 0}
.bm-legend i{width:14px;height:14px;border-radius:4px;background:var(--bm-0)}.bm-legend .lv1{background:var(--bm-1)}.bm-legend .lv2{background:var(--bm-2)}.bm-legend .lv3{background:var(--bm-3)}.bm-legend .lv4{background:var(--bm-4)}
.bm-detail{margin-top:14px;padding:14px 16px;border-radius:16px;background:var(--j-surface2);border:1px solid var(--j-line);animation:j-rise .35s var(--j-ease) both}
.bm-detail-h{display:flex;justify-content:space-between;align-items:center}.bm-detail-h strong{font-family:var(--fd);font-size:18px}
.bm-detail dl{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:8px 0}.bm-detail dt{font-size:12px;color:var(--j-ink3)}.bm-detail dd{margin:2px 0 0;font-weight:800;font-size:16px}
.bm-list{list-style:none;margin:0;padding:0}
.bm-list button{display:grid;grid-template-columns:96px 1fr auto;gap:12px;align-items:center;width:100%;min-height:46px;padding:4px 6px;border:0;border-radius:10px;background:transparent;color:var(--j-ink);text-align:left;font-size:14px}
.bm-list button.on,.bm-list button:hover{background:var(--j-surface2)}.bm-list .g{font-weight:700}.bm-list .v{font-size:13px;color:var(--j-ink2);font-variant-numeric:tabular-nums;white-space:nowrap}
.bm-idle{display:flex;flex-wrap:wrap;gap:6px}.bm-idle button{min-height:34px;padding:0 11px;border-radius:999px;border:1px solid var(--j-line);background:var(--j-surface);color:var(--j-ink2);font-size:13px;font-weight:600}
@media(min-width:980px){.tv2-grid-body{grid-template-columns:minmax(0,1.3fr) minmax(320px,1fr)}}

/* ---------- 4. animações (com propósito, curtas, respeitam movimento reduzido) ---------- */
@keyframes j-rise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes j-fade{from{opacity:0}to{opacity:1}}
@keyframes j-pop{from{opacity:0;transform:translateY(14px) scale(.9)}to{opacity:1;transform:none}}
.jl-food{animation-name:j-pop-c}@keyframes j-pop-c{from{opacity:0;transform:translate(-50%,-44%) scale(.88)}to{opacity:1;transform:translate(-50%,-50%)}}
@keyframes j-float{0%,100%{translate:0 0}50%{translate:0 -10px}}
@keyframes j-breathe{0%,100%{transform:scale(1);opacity:.9}50%{transform:scale(1.12);opacity:1}}
@keyframes j-ping{0%{box-shadow:0 0 0 0 var(--j-glow)}80%,100%{box-shadow:0 0 0 12px transparent}}
@keyframes j-pulse{0%{transform:scale(.92);opacity:1}100%{transform:scale(1.18);opacity:0}}
@keyframes j-sheet{from{transform:translateY(40px);opacity:0}to{transform:none;opacity:1}}
@keyframes j-sheet-out{to{transform:translateY(40px);opacity:0}}
@keyframes j-in-r{from{opacity:0;transform:translateX(28px)}to{opacity:1;transform:none}}
@keyframes j-in-l{from{opacity:0;transform:translateX(-28px)}to{opacity:1;transform:none}}
/* entrada das telas: blocos em cascata */
#app.ent .jf-screen>*,#app.ent>div>*:not(.jf-screen){animation:j-rise .5s var(--j-ease) both}
#app.ent .jf-screen>*:nth-child(2){animation-delay:.04s}#app.ent .jf-screen>*:nth-child(3){animation-delay:.08s}
#app.ent .jf-screen>*:nth-child(4){animation-delay:.12s}#app.ent .jf-screen>*:nth-child(5){animation-delay:.16s}#app.ent .jf-screen>*:nth-child(n+6){animation-delay:.2s}
.tv2-body-wrap.swap>*{animation:j-fade .28s ease both}
/* resposta ao toque */
#app button,#sh button,.tv2-run button{transition:transform .12s var(--j-ease),background-color .2s,color .2s,box-shadow .2s,border-color .2s}
#app button:active:not(:disabled),#sh button:active:not(:disabled),.tv2-run button:active:not(:disabled){transform:scale(.97)}
.tv2-set.done .tv2-ok{animation:j-check .35s var(--j-ease)}@keyframes j-check{0%{transform:scale(.7)}60%{transform:scale(1.12)}100%{transform:none}}
#sh .tv2-sheet .box{animation:j-sheet .38s var(--j-ease) both}
#nt.on{transition:transform .5s cubic-bezier(.2,1.3,.3,1)!important}
/* o aviso não bloqueia toques no que está embaixo dele */
#nt{pointer-events:none}#nt button{pointer-events:auto}
@media(prefers-reduced-motion:reduce){
 *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}