/* Meu Treino: estilos. Variaveis de paleta no topo, resto organizado por tela/componente. */

/* -----------------------------------------------------------------------
   FONTES, SERVIDAS DO PROPRIO REPOSITORIO
   Estavam vindo do Google Fonts por URL absoluta, o que quebrava a
   tipografia justamente offline, que e onde o app e usado: na academia,
   com o PWA instalado e sem rede. Como a folha do Google e de outra
   origem, ela nao podia entrar no SHELL do service worker, entao o
   primeiro carregamento sem rede caia na fonte de sistema.

   Os dois arquivos sao VARIAVEIS e subset latin: um arquivo por familia
   cobre toda a faixa de peso, e o latin (U+0000-00FF e amigos) ja contem
   todo acento do portugues. Por isso sao 2 arquivos e nao 7.

   O intervalo de font-weight declarado e so o que o app usa de verdade:
   Inter de 400 a 700 no texto, Outfit de 600 a 800 nos titulos e numeros.
   Peso fora do intervalo e limitado pelo navegador ao mais proximo.

   Caminho relativo a esta folha (../fonts/), pela regra 6 do CLAUDE.md.
   Os dois estao na lista SHELL do sw.js, senao nao valeria de nada.
   ----------------------------------------------------------------------- */
@font-face{
  font-family:'Inter';
  font-style:normal;
  font-weight:400 700;
  font-display:swap;
  src:url(../fonts/inter-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'Outfit';
  font-style:normal;
  font-weight:600 800;
  font-display:swap;
  src:url(../fonts/outfit-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

  /* -----------------------------------------------------------------------
     TOKENS DE TEMA
     Toda cor do app sai daqui. Nome por funcao, nunca por cor: trocar de
     tema troca os valores sem tocar em nenhuma regra la embaixo.

     As familias:
     --bg*, --card*         superficies (fundo da tela, cartao, cartao raso)
     --surface-*            superficies com significado (ok, alerta, ouro...)
     --line*                bordas
     --text*                texto (primario, secundario, apagado)
     --accent*, --amber,
     --danger, --gold*      acentos semanticos
     --on-*                 texto POR CIMA de um acento preenchido
     --*-rgb                o mesmo acento como tripla r,g,b, pra vies com
                            alpha: rgba(var(--accent-rgb),.07) muda de tema
                            junto com o acento, um hex com alpha nao mudaria
     --tint-*, --overlay,
     --shadow*, --knob      veus, sombras e a bolinha do interruptor
     ----------------------------------------------------------------------- */
  /* TEMA UNICO, ESCURO. Nao existe mais tema claro nem "seguir o sistema":
     o app e escuro sempre. Isso saiu de decisao de produto (v91) e apagou
     junto o seletor de Ajustes, o segundo manifest, o script inline que
     pintava antes da primeira tinta e todo o vai e vem de data-tema.
     Um tema so significa um conjunto de tokens: e este. */
  :root{
    --bg: #0a0c0d;
    /* mesma cor em canal separado: o gradiente da tela de boas-vindas
       precisa ir de alpha 0 ate 1 na cor do TEMA, e rgba() exige os canais */
    --bg-rgb: 10,12,13;
    --bg-elev: #14181a;
    --card: #1d2225;
    --card-2: #232830;
    --line: #2a3034;
    --line-strong: #3a4247;
    --text: #eef1f0;
    --text-dim: #a3adb2;
    --text-faint: #879196;
    --accent: #b9ff3c;
    --accent-dim: #9ad02f;
    --amber: #ffc266;
    --danger: #ff8b80;
    --gold: #ffd45e;
    --accent-rgb: 185,255,60;
    /* CALENDARIO: verde marca treino FEITO, e ausencia nao ganha cor.
       As duas leituras (upper e lower) variam tom e saturacao dentro do
       mesmo verde, nunca matiz: cor diferente ali competia com o dourado
       e fazia parecer que um tipo de treino valia mais que o outro. */
    --cal-feito-forte: rgba(185,255,60,.30);
    --cal-feito-suave: rgba(185,255,60,.11);
    --cal-feito-borda: #b9ff3c;
    --cal-feito-borda-suave: rgba(185,255,60,.42);
    --gold-rgb: 255,212,94;
    --danger-rgb: 255,107,90;
    --on-accent: #111;
    --on-gold: #221a05;
    --on-danger: #fff;
    --knob: #fff;
    --surface-raised: #242b2e;
    --surface-danger: #3a1f1d;
    --border-danger: #5c2f2b;
    --border-danger-soft: #4a2b28;
    --surface-warn-hi: #302a19;
    --surface-warn-lo: #251f19;
    --surface-ok-hi: #23301a;
    --surface-ok-lo: #1d2519;
    --surface-hero-hi: #22301a;
    --surface-hero-lo: #1b2119;
    --surface-next: #212a1c;
    --surface-gold-hi: #4a3a12;
    --surface-gold-lo: #2a2109;
    --gold-deep: #b8862b;
    --overlay: rgba(10,12,13,.72);
    --shadow-strong: rgba(0,0,0,.5);
    --shadow: rgba(0,0,0,.45);
    --shadow-soft: rgba(0,0,0,.35);
    /* cartao branco sobre fundo cinza: a separacao vem da sombra, nao so da
       borda. No escuro a sombra e nula e a separacao vem do tom (ver o bloco
       escuro), porque sombra em fundo escuro vira borrao. */
    --card-shadow: none;
    --radius: 14px;
    --navh: 62px;
    /* duas familias, dois papeis: Outfit em titulo e numero, Inter no corpo.
       A monoespacada saiu; numero alinhado por coluna (input de serie,
       cronometro) continua estavel porque Outfit ganha tnum ali. */
    --sans: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    --display: 'Outfit', 'Inter', -apple-system, sans-serif;
  }
  *{box-sizing:border-box; -webkit-tap-highlight-color: transparent;}
  html,body{margin:0; padding:0; background:var(--bg); color:var(--text); font-family:var(--sans); min-height:100%; overscroll-behavior-y:none;}
  body{padding-bottom:env(safe-area-inset-bottom);}
  #app{max-width:520px; margin:0 auto; min-height:100dvh; display:flex; flex-direction:column; position:relative; background:var(--bg);}
  button{font-family:inherit;}
  :focus-visible{outline:2px solid var(--accent); outline-offset:2px;}
  .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;}
  @media (prefers-reduced-motion: reduce){*{animation:none !important; transition:none !important;}}

  /* ---------- top bar ---------- */
  .topbar{padding:calc(18px + env(safe-area-inset-top)) 20px 16px; display:flex; align-items:center; justify-content:space-between; gap:12px;}
  /* escala: H1 28/34 bold */
  .topbar h1{font-family:var(--display); font-size:28px; line-height:34px; font-weight:700; margin:0; letter-spacing:-0.01em;}
  .topbar .sub{font-size:12.5px; color:var(--text-dim); margin-top:3px;}
  .homeavatar{width:44px; height:44px; min-height:44px; border-radius:50%; background-color:var(--card-2); background-position:center; background-size:cover; background-repeat:no-repeat; border:1px solid var(--line); flex-shrink:0; cursor:pointer; display:flex; align-items:center; justify-content:center; color:var(--text-dim); font-family:var(--display); font-weight:700; font-size:16px;}
  .back-btn{background:none;border:none;color:var(--text); font-size:15px; display:flex; align-items:center; gap:6px; padding:10px 8px; margin-left:-8px; min-height:44px; cursor:pointer;}
  .iconbtn{background:var(--card-2); border:1px solid var(--line); color:var(--text); font-size:12.5px; padding:10px 14px; border-radius:22px; cursor:pointer; display:flex; align-items:center; gap:6px; min-height:44px;}
  .iconbtn:active{opacity:.75;}

  /* ---------- screens ---------- */
  .screen{display:none; flex:1; flex-direction:column; padding-bottom:calc(var(--navh) + 40px);}
  .screen.active{display:flex;}

  /* ---------- resume banner ---------- */
  .resume{margin:0 16px 14px; background:linear-gradient(180deg, var(--surface-ok-hi), var(--surface-ok-lo)); border:1px solid var(--accent-dim); border-radius:var(--radius); padding:14px 16px; display:none;}
  .resume.show{display:block;}
  /* escala: H4 16/22 semibold */
  .resume .rt{font-family:var(--display); font-weight:600; font-size:16px; line-height:22px; margin-bottom:2px;}
  .resume .rs{font-size:12.5px; color:var(--text-dim); margin-bottom:12px;}
  .resume .ract{display:flex; gap:8px;}
  .resume button{flex:1; min-height:44px; border-radius:10px; font-weight:600; font-size:13.5px; cursor:pointer;}
  .resume .go{background:var(--accent); color:var(--on-accent); border:none;}
  .resume .drop{background:transparent; color:var(--danger); border:1px solid var(--line-strong);}
  /* sessao esquecida em aberto nao e "treino rolando agora": o verde de
     acao em andamento vira ambar de pendencia, pra pessoa perceber que o
     estado e outro antes de ler o texto */
  .resume.esquecida{background:linear-gradient(180deg, var(--surface-warn-hi), var(--surface-warn-lo)); border-color:var(--amber);}
  .resume.esquecida .go{background:var(--amber); color:var(--on-accent);}

  /* ---------- home: day cards ---------- */
  .weeklabel{padding:2px 20px 8px; font-size:12px; text-transform:uppercase; letter-spacing:.08em; color:var(--text-faint); font-weight:600;}
  .daylist{padding:0 16px; display:flex; flex-direction:column; gap:10px;}
  .daycard{background:var(--card); border:1px solid var(--line); box-shadow:var(--card-shadow); border-radius:var(--radius); padding:16px; display:flex; align-items:center; justify-content:space-between; gap:12px; cursor:pointer; text-align:left; width:100%; color:inherit; font-family:inherit; min-height:44px; transition:border-color .15s;}
  .daycard:active{border-color:var(--accent);}
  .daycard.next{border-color:var(--accent-dim); background:linear-gradient(180deg,var(--surface-next),var(--card));}
  .daycard .left{display:flex; flex-direction:column; gap:4px;}
  .daycard .tag{font-size:11px; color:var(--accent); letter-spacing:.05em;}
  .daycard.next .tag::after{content:' · sugerido hoje'; color:var(--accent-dim);}
  .daycard.free{border-style:dashed;}
  .daycard.free .tag{color:var(--amber);}
  /* escala: H3 18/24 semibold */
  .daycard .name{font-family:var(--display); font-size:18px; line-height:24px; font-weight:600;}
  .daycard .meta{font-size:12.5px; color:var(--text-dim);}
  .daycard .last{font-size:11.5px; color:var(--text-faint); margin-top:2px;}
  .daycard .arrow{color:var(--text-faint); font-size:22px;}
  .divider-note{margin:18px 20px 4px; font-size:12.5px; color:var(--text-dim); line-height:1.55; background:var(--card-2); border-radius:10px; padding:12px 14px; border:1px solid var(--line);}
  /* ---------- home: painel de incentivo ----------
     A ordem da tela é a ordem da conversa: quem é você, como está sua
     semana, como você vem evoluindo, e só então o que treinar hoje. */
  .hometop{padding-bottom:6px;}
  .hero{padding:2px 20px 20px;}
  .hero-saud{font-family:var(--display); font-weight:700; font-size:26px; line-height:1.15; letter-spacing:-.01em;}
  .hero-frase{font-size:14px; color:var(--text-dim); line-height:1.5; margin-top:8px; max-width:34ch;}

  .metacard{margin:0 16px 6px; background:var(--card); border:1px solid var(--line); box-shadow:var(--card-shadow); border-radius:14px; padding:15px 16px;}
  .metacard .meta-topo{display:flex; align-items:baseline; justify-content:space-between; gap:10px;}
  .metacard .meta-l{font-size:11px; color:var(--text-dim); text-transform:uppercase; letter-spacing:.07em;}
  /* escala: numero 24/30 extrabold */
  .metacard .meta-n{font-family:var(--display); font-size:24px; line-height:30px; font-weight:800; color:var(--text);}
  .metacard .meta-n .de{color:var(--text-faint); font-size:15px; font-weight:400;}
  .metacard .barra{height:7px; border-radius:5px; background:var(--bg-elev); overflow:hidden; margin-top:11px;}
  /* verde marca o que a pessoa JA FEZ; cinza e ausencia, nao decoracao.
     Preenchimento verde, trilho neutro. */
  .metacard .barra-fill{height:100%; background:var(--accent); border-radius:5px; transition:width .3s;}
  .metacard .meta-s{font-size:13px; color:var(--text); margin-top:10px; line-height:1.45;}
  .metacard .meta-t{font-family:var(--display); font-weight:600; font-size:15px;}

  /* faixa da semana: sete marcadores, sempre visível sem rolar */
  .semanafaixa{display:flex; gap:6px; margin:0 16px 26px;}
  .semanafaixa .dia{flex:1; display:flex; flex-direction:column; align-items:center; gap:6px;}
  .semanafaixa .dm{font-size:10.5px; color:var(--text-faint); }
  .semanafaixa .dp{width:100%; height:5px; border-radius:3px; background:var(--line);}
  .semanafaixa .feito .dp{background:var(--accent);}
  .semanafaixa .feito .dm{color:var(--accent-dim);}
  .semanafaixa .futuro .dp{background:var(--bg-elev);}
  .semanafaixa .hoje .dm{color:var(--text); font-weight:700;}
  /* o dia de hoje destaca por posicao (anel e rotulo), nao por verde:
     hoje ainda-nao-treinado com verde pareceria feito */
  .semanafaixa .hoje .dp{box-shadow:0 0 0 1.5px var(--line-strong);}
  .semanafaixa .hoje .dm{color:var(--text); font-weight:700;}

  /* gráfico: elemento forte da tela, com respiro em volta */
  .graficocard{margin:0 16px 14px; background:var(--card); border:1px solid var(--line); box-shadow:var(--card-shadow); border-radius:14px; padding:15px 14px 8px;}
  .graficocard .g-topo{display:flex; align-items:flex-start; justify-content:space-between; gap:10px; padding:0 2px 6px;}
  .graficocard .g-t{font-family:var(--display); font-weight:600; font-size:16px; line-height:22px;}
  .graficocard .g-s{font-size:11.5px; color:var(--text-dim); margin-top:3px;}
  .g-trocar{background:var(--card-2); border:1px solid var(--line); color:var(--text-dim); font-family:inherit; font-size:11.5px; padding:7px 11px; border-radius:8px; cursor:pointer; flex-shrink:0; min-height:34px;}
  .g-trocar:active{border-color:var(--accent); color:var(--accent);}
  .barchart{width:100%; height:auto; display:block;}
  /* barras em verde (e progresso feito); a semana atual em verde cheio.
     O tom parcial via alpha vale nos dois temas, hex fixo nao valeria. */
  .barchart .b{fill:rgba(var(--accent-rgb),.45);}
  .barchart .b.atual{fill:var(--accent);}
  .barchart .b.vazia{fill:var(--line);}
  .barchart .eixo{stroke:var(--line); stroke-width:1;}
  .barchart .lg{fill:var(--text-faint); font-size:9px; }
  .gvazio{text-align:center; padding:18px 10px 22px;}
  .gvazio .gv-i{font-family:var(--display); font-size:26px; color:var(--line-strong); letter-spacing:3px; margin-bottom:10px;}
  .gvazio .gv-t{font-family:var(--display); font-weight:600; font-size:14.5px;}
  .gvazio .gv-s{font-size:12.5px; color:var(--text-dim); line-height:1.5; margin-top:5px;}

  /* números secundários: discretos de propósito, o destaque é o gráfico */
  .ministats{display:flex; gap:18px; padding:0 20px 32px; flex-wrap:wrap;}
  .mini{display:flex; align-items:baseline; gap:6px;}
  .mini .mv{font-family:var(--display); font-size:16px; font-weight:700; color:var(--text);}
  .mini .ml{font-size:12px; color:var(--text-dim);}

  /* próximo treino: a ação principal da tela */
  .proximo{padding:0 16px 6px;}
  .proxcard{width:100%; text-align:left; display:flex; flex-direction:column; gap:3px; background:linear-gradient(180deg, rgba(var(--accent-rgb),.07), rgba(var(--accent-rgb),.02)); border:1px solid var(--accent); border-radius:14px; padding:16px; cursor:pointer; font-family:inherit; color:inherit;}
  .proxcard:active{opacity:.85;}
  .proxcard .px-tag{font-size:11px; color:var(--accent); letter-spacing:.05em;}
  .proxcard .px-nome{font-family:var(--display); font-weight:700; font-size:19px; margin-top:2px;}
  .proxcard .px-meta{font-size:12.5px; color:var(--text-dim); margin-top:1px;}
  .proxcard .px-acao{margin-top:12px; font-family:var(--display); font-weight:700; font-size:14px; color:var(--accent);}

  /* ---------- session ---------- */
  .session-meta{padding:0 20px 14px; display:flex; gap:22px;}
  .session-meta .m{display:flex; flex-direction:column;}
  .session-meta .m .v{font-family:var(--display); font-size:19px; font-weight:600;}
  .session-meta .m .l{font-size:10.5px; color:var(--text-dim); text-transform:uppercase; letter-spacing:.06em;}
  .session-meta .m.editavel{background:none; border:none; padding:0; margin:0; font:inherit; color:inherit; cursor:pointer; text-align:left; border-radius:8px;}
  .session-meta .m.editavel:active{opacity:.7;}
  .session-meta .m.editavel .l{text-decoration:underline dotted var(--text-faint); text-underline-offset:3px;}

  .exlist{padding:0 16px; display:flex; flex-direction:column; gap:12px;}
  .excard{background:var(--card); border:1px solid var(--line); box-shadow:var(--card-shadow); border-radius:var(--radius); overflow:hidden;}
  .excard{position:relative;}
  .excard.done{border-color:var(--accent-dim); background:linear-gradient(180deg, rgba(var(--accent-rgb),.07), rgba(var(--accent-rgb),.02));}
  .excard.done::before{content:''; position:absolute; left:0; top:0; bottom:0; width:4px; background:var(--accent); z-index:2;}
  .cardinner{background:inherit; transition:transform .18s ease; position:relative; z-index:1;}
  .swipehint{position:absolute; inset:0; display:flex; align-items:center; justify-content:flex-end; padding-right:22px; background:var(--surface-danger); color:var(--danger); font-size:13px; font-weight:600; border-radius:var(--radius);}
  .excard.willdelete .swipehint{background:var(--border-danger); color:var(--on-danger);}
  .doneflag{color:var(--accent); font-weight:700; letter-spacing:.02em;}
  .exmain{display:flex; flex-direction:column; min-width:0;}
  .exsummary{display:flex; flex-wrap:wrap; gap:5px; margin-top:7px; font-size:11.5px; color:var(--accent);}
  .exsummary span{background:rgba(var(--accent-rgb),.12); border:1px solid var(--accent-dim); border-radius:6px; padding:2px 7px;}
  .previewnote{font-size:12px; color:var(--text-faint); text-align:center; padding:4px 20px 0; line-height:1.5;}
  .addex{width:100%; background:var(--card-2); border:1px dashed var(--line-strong); color:var(--text-dim); border-radius:var(--radius); padding:16px; font-size:13.5px; font-family:inherit; cursor:pointer; min-height:52px;}
  .addex:active{border-color:var(--accent); color:var(--accent);}
  .exheadrow{display:flex; align-items:flex-start;}
  .exheadrow.has-thumb .exhead{padding-left:8px;}
  .exthumb{width:56px; height:44px; min-height:44px; margin:0 0 0 16px; align-self:center; flex-shrink:0; padding:0; border:1px solid var(--line); border-radius:8px; overflow:hidden; background:var(--card-2); cursor:pointer;}
  .exthumb:active{border-color:var(--accent);}
  .exthumb img{width:100%; height:100%; object-fit:cover; display:block;}
  /* ALTERNANCIA DAS DUAS FASES na miniatura do card.
     CSS puro, sem timer em JS: com varios cards na tela um setInterval por
     card seria desperdicio, e o CSS sobrevive a re-render sem religar nada.

     Ciclo de 2s: cerca de 1s em cada fase, com ~160ms de transicao. So a
     fase de cima anima; a de baixo fica parada por tras, entao nunca ha
     quadro vazio, nem no primeiro ciclo nem se a segunda foto demorar. */
  .exthumb.anima{position:relative;}
  .exthumb.anima .fase-a,
  .exthumb.anima .fase-b{position:absolute; inset:0; display:block;}
  .exthumb.anima .fase-b{opacity:0; animation:exfase 2s ease-in-out infinite;}
  @keyframes exfase{
    0%,42%  {opacity:0;}
    50%,92% {opacity:1;}
    100%    {opacity:0;}
  }
  /* quem pediu menos movimento ve a primeira fase, parada */
  @media (prefers-reduced-motion: reduce){
    .exthumb.anima .fase-b{animation:none; opacity:0;}
  }
  .exhead{padding:14px 16px 12px; display:flex; justify-content:space-between; align-items:flex-start; gap:10px; width:100%; background:none; border:none; color:inherit; text-align:left; font-family:inherit; cursor:pointer;}
  .exhead .idx{font-size:12px; color:var(--accent-dim); margin-bottom:3px;}
  .exhead .exname{font-family:var(--display); font-weight:600; font-size:18px; line-height:24px;}
  .exhead .target{font-size:12px; color:var(--text-dim); margin-top:5px; }
  .rpe-detalhe{color:var(--text-faint);}
  .suggestion{font-size:12px; color:var(--accent-dim); margin-top:4px; }
  /* superset: o par se enxerga pelo rotulo nos dois cards */
  .parflag{font-size:12px; color:var(--accent); margin-top:4px; font-weight:600;}
  .exhead .prog{font-size:12.5px; color:var(--text-faint); white-space:nowrap;}
  .excard.done .exhead .prog{color:var(--accent);}
  .exbody{display:block;}
  .excard.collapsed .exbody{display:none;}

  .setrow-head{display:grid; grid-template-columns: 24px 1fr 1fr 44px 46px; gap:7px; align-items:center; padding:2px 12px 4px; font-size:11px; text-transform:uppercase; letter-spacing:.05em; color:var(--text-faint);}
  .setrow{display:grid; grid-template-columns: 24px 1fr 1fr 44px 46px; gap:7px; align-items:center; padding:5px 12px;}
  .setrow.done{background:rgba(var(--accent-rgb),.05);}
  .setrow .setnum{font-size:13px; color:var(--text-dim); text-align:center;}
  .setrow .field{display:flex; flex-direction:column;}
  .setrow input{width:100%; background:var(--bg-elev); border:1px solid var(--line); border-radius:8px; color:var(--text); font-family:var(--display); font-variant-numeric:tabular-nums; font-size:16px; padding:11px 4px; text-align:center;}
  .setrow input::placeholder{color:var(--text-faint); font-size:14px;}
  .setrow input:focus{outline:none; border-color:var(--accent);}
  .setrow input.auto{color:var(--text-dim);}
  .setrow .prevhint{font-size:11px; color:var(--text-faint); text-align:center; margin-top:3px; min-height:14px;}
  .stepper{display:flex; flex-direction:column; gap:4px;}
  .stepper button{width:44px; height:44px; border-radius:9px; border:1px solid var(--line-strong); background:var(--card-2); color:var(--text-dim); font-size:16px; line-height:1; cursor:pointer; display:flex; align-items:center; justify-content:center; padding:0;}
  .stepper button:active{background:var(--accent); color:var(--on-accent); border-color:var(--accent);}
  .checkbtn{width:44px; height:44px; border-radius:10px; border:1px solid var(--line-strong); background:var(--bg-elev); color:var(--text-faint); display:flex; align-items:center; justify-content:center; cursor:pointer; font-size:18px;}
  .checkbtn.done{background:var(--accent); border-color:var(--accent); color:var(--on-accent); font-weight:700;}
  .setrow .del{grid-column:5; align-self:center;}

  .exfoot{padding:8px 14px 12px; border-top:1px solid var(--line); margin-top:6px; display:flex; flex-wrap:wrap; gap:8px; align-items:center;}
  .minibtn{background:var(--card-2); border:1px solid var(--line); color:var(--text-dim); font-size:12.5px; padding:9px 12px; border-radius:9px; cursor:pointer; min-height:40px;}
  .minibtn:active{opacity:.75;}
  .minibtn.link{background:none; border:none; color:var(--accent); font-weight:600; padding-left:2px;}
  .minibtn.danger{color:var(--danger); border-color:var(--border-danger-soft); background:rgba(var(--danger-rgb),.08); font-weight:600;}
  /* a linha de perigo se separa das ações leves: fica sozinha, com uma
     divisória acima, pra "excluir exercício" não parecer só mais um botão
     ao lado de "− série" */
  .exfoot.perigo{border-top:1px dashed var(--line); padding-top:10px; margin-top:2px;}

  /* editor de treino já registrado (js/editor.js) */
  .editreglist{display:flex; flex-direction:column; gap:12px; max-height:52vh; overflow-y:auto;}
  .editreg{border:1px solid var(--line); border-radius:11px; padding:10px 12px; background:var(--card-2);}
  .editreg-nome{font-weight:600; margin-bottom:8px;}
  .editserie{display:flex; align-items:center; gap:6px; flex-wrap:wrap; margin-bottom:6px;}
  .editserie-n{width:18px; color:var(--text-dim); font-size:12.5px;}
  .editserie-in{width:66px; margin:0; text-align:center;}
  .editserie-u{color:var(--text-dim); font-size:12.5px;}
  /* "Remover série" fica na linha da própria série e sem cor de perigo, pra
     não se confundir com "Tirar exercício inteiro", que é vermelho e mora
     na faixa de ações do cartão */
  .editserie-rm{margin-left:auto; font-size:11.5px; padding:7px 9px; min-height:36px;}
  .editreg-acoes{display:flex; gap:8px; flex-wrap:wrap; margin-top:8px; padding-top:8px; border-top:1px dashed var(--line);}

  /* exercício sem foto: estado legítimo, não moldura vazia */
  .exthumb.semfoto{display:flex; align-items:center; justify-content:center; background:var(--card-2); border:1px dashed var(--line);}
  .semfoto-txt{font-size:11px; color:var(--text-dim); text-transform:uppercase; letter-spacing:.5px;}
  .execsemfoto{padding:4px 0 2px;}
  .execdesc{font-size:15px; line-height:1.55; margin:10px 0 14px;}
  /* botões da foto do card de compartilhar, logo acima da barra de ações */
  .sumfotobar{display:flex; gap:8px; flex-wrap:wrap; padding:0 16px;}
  /* bloco de confirmacao da progressao, no fim do resumo */
  .sumprogressao{padding:0 16px 4px;}
  .progcard{background:var(--card); border:1px solid var(--line); box-shadow:var(--card-shadow); border-radius:14px; padding:15px 16px;}
  .progcard.confirmado{border-color:var(--accent-dim);}
  .prog-intro{font-size:13px; color:var(--text-dim); line-height:1.5;}
  .progitem{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 0; border-bottom:1px solid var(--line);}
  .progitem:last-of-type{border-bottom:none;}
  .progitem .pg-n{font-family:var(--display); font-weight:600; font-size:14px; flex:1;}
  .progitem .pg-c{display:flex; align-items:center; gap:7px; font-size:13px; color:var(--text-dim); white-space:nowrap;}
  .progitem .pg-seta{color:var(--accent);}
  .progitem .pg-un{color:var(--text-faint); font-size:12px;}
  .pg-input{width:62px; background:var(--bg-elev); border:1px solid var(--line-strong); border-radius:8px; color:var(--accent); font-family:var(--display); font-variant-numeric:tabular-nums; font-size:15px; font-weight:700; padding:8px 6px; text-align:center; min-height:40px;}
  .pg-input:focus{outline:none; border-color:var(--accent);}
  /* alivio nao usa vermelho: recuar carga e estrategia, nao erro */
  .progitem.alivio .pg-seta{color:var(--text-dim);}
  .prog-acao{display:flex; gap:10px; margin-top:14px;}
  .prog-acao button{flex:1; min-height:46px; border-radius:var(--radius); font-family:var(--display); font-weight:600; font-size:14px; cursor:pointer;}
  .suggestion.alivio{color:var(--text-dim);}
  .noteblock{font-size:12.5px; color:var(--text-dim); line-height:1.55; padding:0 16px 14px; display:none;}
  .noteblock.open{display:block;}

  .warmupblock{margin:0 16px 12px; background:var(--card-2); border:1px solid var(--line); border-radius:var(--radius); padding:14px 16px; font-size:12.5px; color:var(--text-dim); line-height:1.6;}
  .warmupblock b{color:var(--text); display:block; margin-bottom:4px; font-family:var(--display); font-size:13.5px;}

  .startbar{padding:16px; margin-top:8px; display:flex; gap:10px;}
  /* #startbar (previa do treino) fica fixo acima da navegacao inferior, sempre
     visivel, com espaco reservado no fim da lista pra nao esconder o ultimo
     exercicio atras dela. finishbar/editbar (sessao ativa/edicao) continuam
     no fluxo normal. */
  #startbar{
    position:fixed; left:0; right:0; bottom:calc(var(--navh) + env(safe-area-inset-bottom));
    max-width:520px; margin:0 auto; z-index:55; flex-direction:column; gap:0;
    background:var(--bg-elev); border-top:1px solid var(--line);
    padding:12px 16px calc(14px + env(safe-area-inset-bottom));
    box-shadow:0 -8px 24px var(--shadow-soft);
  }
  .startbar-info{font-size:12px; color:var(--text-dim); text-align:center; margin-bottom:10px; }
  .startbar-btns{display:flex; gap:10px;}
  #exlist.com-barra-fixa{padding-bottom:112px;}
  .finishbar{padding:16px; margin-top:8px; display:flex; gap:10px;}
  .finishbtn{flex:1; background:var(--accent); color:var(--on-accent); border:none; padding:17px; border-radius:var(--radius); font-family:var(--display); font-weight:700; font-size:15px; cursor:pointer; min-height:52px;}
  .finishbtn:active{opacity:.85;}
  .cancelbtn{background:var(--card-2); color:var(--danger); border:1px solid var(--line); padding:17px 18px; border-radius:var(--radius); font-family:var(--display); font-weight:600; font-size:14px; cursor:pointer;}
  .ghostbtn{flex:1; background:var(--card-2); color:var(--text); border:1px solid var(--line); padding:17px; border-radius:var(--radius); font-family:var(--display); font-weight:600; font-size:14px; cursor:pointer; min-height:52px;}
  .ghostbtn:active{opacity:.75;}

  .editrow{display:flex; align-items:center; justify-content:space-between; gap:10px; padding:10px 16px; border-top:1px solid var(--line);}
  .editlabel{font-size:13px; color:var(--text-dim);}
  .editstepper{display:flex; align-items:center; gap:10px;}
  .editstepper button{width:44px; height:44px; border-radius:9px; border:1px solid var(--line-strong); background:var(--card-2); color:var(--text); font-size:16px; line-height:1; cursor:pointer; display:flex; align-items:center; justify-content:center; flex-shrink:0;}
  .editstepper button:active{background:var(--accent); color:var(--on-accent); border-color:var(--accent);}
  .editval{font-family:var(--display); font-variant-numeric:tabular-nums; font-size:13.5px; min-width:70px; text-align:center;}
  .editreps{width:120px; background:var(--bg-elev); border:1px solid var(--line); border-radius:8px; color:var(--text); font-family:var(--display); font-variant-numeric:tabular-nums; font-size:14px; padding:9px 10px; text-align:center;}
  .editreps:focus{outline:none; border-color:var(--accent);}

  /* ---------- summary ---------- */
  .sumwrap{padding:0 16px;}
  .sumhero{background:linear-gradient(180deg,var(--surface-hero-hi),var(--surface-hero-lo)); border:1px solid var(--accent-dim); border-radius:18px; padding:22px 18px; text-align:center; margin-bottom:14px;}
  .sumhero.gold{background:linear-gradient(165deg,var(--surface-gold-hi),var(--surface-gold-lo)); border-color:var(--gold);}
  .sumhero .badge{font-size:34px; color:var(--gold); line-height:1; margin-bottom:6px; text-shadow:0 0 18px rgba(var(--gold-rgb),.55);}
  .sumhero.gold .k{color:var(--gold);}
  .sumhero .k{font-family:var(--display); font-size:24px; font-weight:700;}
  .sumhero .s{font-size:13px; color:var(--text-dim); margin-top:4px;}
  .sumgrid{display:flex; gap:10px; margin-bottom:14px;}
  .sumgrid .c{flex:1; background:var(--card); border:1px solid var(--line); box-shadow:var(--card-shadow); border-radius:12px; padding:14px; text-align:center;}
  .sumgrid .c .v{font-family:var(--display); font-size:19px; font-weight:700;}
  .sumgrid .c .l{font-size:10.5px; color:var(--text-dim); text-transform:uppercase; letter-spacing:.06em; margin-top:3px;}
  .sumgrid .c.editavel{font:inherit; color:inherit; cursor:pointer; -webkit-appearance:none; appearance:none;}
  .sumgrid .c.editavel:active{opacity:.7;}
  .sumgrid .c.editavel .l{text-decoration:underline dotted var(--text-faint); text-underline-offset:3px;}
  .prlist{display:flex; flex-direction:column; gap:8px; margin-bottom:14px;}
  .pritem{background:var(--card); border:1px solid var(--accent-dim); box-shadow:var(--card-shadow); border-radius:12px; padding:13px 15px; display:flex; justify-content:space-between; align-items:center; gap:10px;}
  .pritem .n{font-size:13.5px; font-weight:600;}
  .pritem .d{font-size:12.5px; color:var(--accent);}
  .sumsection{font-size:12px; text-transform:uppercase; letter-spacing:.08em; color:var(--text-faint); font-weight:600; margin:4px 0 10px;}

  /* ---------- history ---------- */
  .histlist{padding:0 16px; display:flex; flex-direction:column; gap:12px;}
  .histcard{background:var(--card); border:1px solid var(--line); box-shadow:var(--card-shadow); border-radius:var(--radius); padding:16px;}
  .histcard .htop{display:flex; justify-content:space-between; align-items:baseline; gap:10px; margin-bottom:2px; width:100%; background:none; border:none; color:inherit; font-family:inherit; text-align:left; cursor:pointer;}
  .histcard .hname{font-family:var(--display); font-weight:700; font-size:16px;}
  .histcard .hdate{font-size:12px; color:var(--text-dim); white-space:nowrap;}
  .histcard .hstats{display:flex; gap:18px; margin:10px 0 4px; flex-wrap:wrap;}
  .histcard .hstats .v{font-family:var(--display); font-size:14.5px; font-weight:600;}
  .histcard .hstats .l{font-size:10px; color:var(--text-dim); text-transform:uppercase; letter-spacing:.05em;}
  .hdetail{display:none; margin-top:12px; border-top:1px solid var(--line); padding-top:10px;}
  .hdetail.open{display:block;}
  .histtabs{display:flex; gap:8px; padding:0 16px 12px;}
  .histtab{flex:1; background:var(--card-2); border:1px solid var(--line); color:var(--text-dim); padding:10px; border-radius:10px; font-size:13px; font-weight:600; cursor:pointer; font-family:var(--display);}
  .histtab.active{background:var(--accent); color:var(--on-accent); border-color:var(--accent);}
  .evochart{width:100%; height:auto; display:block; margin-top:2px;}
  .evochart .linha{fill:none; stroke:var(--accent); stroke-width:2;}
  .evochart .ponto{fill:var(--accent);}
  .evochart .grade{stroke:var(--line); stroke-width:1;}
  .evochart text{fill:var(--text-faint); font-size:9px; }
  .hex{padding:8px 0; border-bottom:1px dashed var(--line);}
  .hex:last-child{border-bottom:none;}
  .hex .hexname{font-size:13px; font-weight:600; margin-bottom:4px;}
  .hex .hexsets{font-size:12px; color:var(--text-dim); display:flex; flex-wrap:wrap; gap:6px;}
  .hex .hexsets span{background:var(--card-2); border:1px solid var(--line); border-radius:6px; padding:2px 7px;}
  .empty{padding:60px 30px; text-align:center; color:var(--text-dim); font-size:13.5px; line-height:1.6;}
  .empty .big{font-family:var(--display); font-size:16px; color:var(--text); margin-bottom:6px;}

  /* ---------- settings ---------- */
  .setlist{padding:0 16px; display:flex; flex-direction:column; gap:10px;}
  .setitem{background:var(--card); border:1px solid var(--line); box-shadow:var(--card-shadow); border-radius:12px; padding:15px 16px; display:flex; justify-content:space-between; align-items:center; gap:14px; width:100%; text-align:left; color:inherit; font-family:inherit; cursor:pointer; min-height:56px; text-decoration:none; box-sizing:border-box;}
  .setitem .t{font-size:14px; font-weight:600;}
  .setitem .d{font-size:12px; color:var(--text-dim); margin-top:3px; line-height:1.45;}
  .setitem .chev{color:var(--text-faint); font-size:20px;}
  .avatarsetitem{flex-direction:column; align-items:stretch; gap:14px;}
  /* item de ajuste cujo controle não cabe ao lado do texto e vai embaixo */
  .setitem.coluna{flex-direction:column; align-items:stretch; gap:12px;}
  .segmentado{display:flex; gap:6px;}
  .seg{flex:1; min-height:44px; padding:10px 8px; border-radius:9px; border:1px solid var(--line-strong); background:var(--card-2); color:var(--text-dim); font-family:inherit; font-size:12.5px; cursor:pointer;}
  .seg[aria-checked="true"]{background:var(--accent); border-color:var(--accent); color:var(--on-accent); font-weight:700;}
  .avatarrow{display:flex; align-items:center; gap:14px;}
  .avatarpreview{width:56px; height:56px; min-height:56px; border-radius:50%; background-color:var(--card-2); background-position:center; background-size:cover; background-repeat:no-repeat; border:1px solid var(--line); flex-shrink:0; display:flex; align-items:center; justify-content:center; color:var(--text-dim); font-family:var(--display); font-weight:700; font-size:20px;}
  .avatarbtns{display:flex; gap:10px;}
  .switch{width:46px; height:28px; border-radius:20px; background:var(--line-strong); border:none; position:relative; flex-shrink:0; cursor:pointer;}
  .switch::after{content:''; position:absolute; top:3px; left:3px; width:22px; height:22px; border-radius:50%; background:var(--knob); transition:transform .15s;}
  .switch[aria-checked="true"]{background:var(--accent);}
  .switch[aria-checked="true"]::after{transform:translateX(18px);}

  /* ---------- sheets / modals ---------- */
  .backdrop{position:fixed; inset:0; background:var(--overlay); display:none; align-items:flex-end; justify-content:center; z-index:70;}
  .backdrop.show{display:flex;}
  .sheet{width:100%; max-width:520px; background:var(--bg-elev); border-radius:20px 20px 0 0; border:1px solid var(--line); border-bottom:none; padding:18px 18px calc(28px + env(safe-area-inset-bottom)); max-height:84dvh; overflow-y:auto;}
  /* escala: H2 20/26 semibold */
  .sheet h2{font-family:var(--display); font-size:20px; line-height:26px; font-weight:600; margin:0 0 6px;}
  /* escala: corpo 14/20 */
  .sheet p{font-size:14px; color:var(--text-dim); line-height:20px; margin:0 0 16px;}
  .sheethead{display:flex; align-items:center; justify-content:space-between; margin-bottom:14px;}
  .sheethead h2{margin:0;}
  .closebtn{background:var(--card-2); border:1px solid var(--line); color:var(--text); width:44px; height:44px; border-radius:50%; cursor:pointer; font-size:15px; display:flex; align-items:center; justify-content:center; flex-shrink:0;}
  .sheetact{display:flex; gap:10px;}
  .sheetact button{flex:1; min-height:50px; border-radius:12px; font-size:14px; font-weight:600; cursor:pointer; font-family:var(--display);}
  .btn-primary{background:var(--accent); color:var(--on-accent); border:none;}
  .btn-ghost{background:var(--card-2); color:var(--text); border:1px solid var(--line);}
  .execframes{position:relative; width:100%; aspect-ratio:400/267; border-radius:12px; overflow:hidden; background:var(--card-2); margin-bottom:12px;}
  .execframes picture{position:absolute; inset:0; display:block;}
  .execframes picture img{width:100%; height:100%; object-fit:cover; display:block;}
  .execframes picture:last-child{opacity:0; transition:opacity .15s ease;}
  .execframes.frame-b picture:first-child{opacity:0;}
  .execframes.frame-b picture:last-child{opacity:1;}
  .execframes.lado-a-lado{position:static; display:flex; gap:8px; aspect-ratio:auto;}
  .execframes.lado-a-lado picture{position:static; flex:1; border-radius:10px; overflow:hidden;}
  .execact{display:flex; justify-content:center; margin-bottom:16px;}
  .execact button{min-height:44px; padding:10px 20px; border-radius:12px; font-size:13.5px; font-weight:600; cursor:pointer; font-family:var(--display);}
  .btn-danger{background:var(--surface-danger); color:var(--danger); border:1px solid var(--border-danger);}
  .searchbox{width:100%; background:var(--bg); border:1px solid var(--line-strong); border-radius:12px; color:var(--text); font-size:16px; padding:14px; margin-bottom:12px; font-family:inherit;}
  .searchbox:focus{outline:none; border-color:var(--accent);}
  .chiprow{display:flex; gap:8px; overflow-x:auto; padding-bottom:2px; margin-bottom:12px; scrollbar-width:none;}
  .chiprow::-webkit-scrollbar{display:none;}
  .chip{flex-shrink:0; background:var(--card-2); border:1px solid var(--line); color:var(--text-dim); font-size:12.5px; padding:8px 14px; border-radius:20px; cursor:pointer; font-family:inherit; white-space:nowrap;}
  .chip.sel{background:var(--accent); color:var(--on-accent); border-color:var(--accent); font-weight:600;}
  .optgroup{font-size:11px; text-transform:uppercase; letter-spacing:.08em; color:var(--text-faint); font-weight:600; margin:6px 0 2px;}
  .optlist{display:flex; flex-direction:column; gap:8px; max-height:52dvh; overflow-y:auto;}
  .opt{background:var(--card); border:1px solid var(--line); box-shadow:var(--card-shadow); border-radius:12px; color:inherit; font-family:inherit; font-size:14px; min-height:52px; display:flex; align-items:stretch; justify-content:space-between; gap:2px; overflow:hidden;}
  .opt:active{border-color:var(--accent);}
  .optselect{flex:1; min-width:0; background:none; border:none; color:inherit; font:inherit; text-align:left; cursor:pointer; padding:14px 16px; display:flex; align-items:center;}
  .opt .optmain{flex:1; min-width:0;}
  .opt .om{display:block; font-size:12px; color:var(--text-dim); margin-top:3px;}
  .opt .star{font-size:20px; line-height:1; color:var(--text-faint); flex-shrink:0; background:none; border:none; cursor:pointer; width:44px; height:44px; align-self:center; margin-right:6px; display:flex; align-items:center; justify-content:center; padding:0;}
  .opt .star.fav{color:var(--accent);}

  /* ---------- calendar ---------- */
  .calnav{display:flex; align-items:center; justify-content:space-between; margin-bottom:12px;}
  .calnav button{background:var(--card-2); border:1px solid var(--line); color:var(--text); width:44px; height:44px; border-radius:10px; cursor:pointer; font-size:16px;}
  .calnav .monthlabel{font-family:var(--display); font-weight:600; font-size:15px;}
  .calgrid{display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:6px; margin-bottom:12px;}
  .calgrid .dow{font-size:10.5px; color:var(--text-faint); text-align:center; padding-bottom:4px; text-transform:uppercase;}
  /* Dia SEM treino nao tem caixa, borda nem preenchimento: e so o numero, na
     cor mais apagada. Ausencia nao ganha cor, entao ele recua e para de
     disputar atencao com quem treinou. */
  .calday{aspect-ratio:1; display:flex; align-items:center; justify-content:center; border-radius:10px; font-family:var(--display); font-size:13px; color:var(--text-faint); position:relative; border:1px solid transparent;}
  /* Treino FEITO e sempre verde. As duas leituras vem de tom e saturacao,
     mais a espessura da presenca (preenchimento cheio contra quase vazio) e
     o peso do numero: tres pistas pro mesmo par, pra dar pra distinguir sem
     ler a legenda. `full` (corpo inteiro) le como forte e `free` (treino
     livre) como suave, em vez do azul e do cinza que tinham antes e que a
     legenda nunca explicou. */
  .calday.upper,
  .calday.full{background:var(--cal-feito-forte); color:var(--text); border-color:var(--cal-feito-borda); font-weight:700;}
  .calday.lower,
  .calday.free{background:var(--cal-feito-suave); color:var(--text); border-color:var(--cal-feito-borda-suave); font-weight:500;}
  .calday.double{background:linear-gradient(160deg, var(--gold), var(--gold-deep)); color:var(--on-gold); border-color:var(--gold); font-weight:700;}
  .calday .star{position:absolute; top:-5px; right:-4px; font-size:12px; color:var(--gold); text-shadow:0 0 6px rgba(var(--gold-rgb),.7);}
  /* hoje ainda em aberto: so o tracejado, que e a marca de "em aberto".
     Preenchimento aqui seria pintar um treino que nao aconteceu. */
  .calday.today{outline:1px dashed var(--line-strong);}
  .calday.empty{visibility:hidden;}
  .callegend{display:flex; gap:16px; justify-content:center; font-size:11.5px; color:var(--text-dim); margin-bottom:8px;}
  .callegend i{display:inline-block; width:10px; height:10px; border-radius:3px; margin-right:5px; vertical-align:-1px; border:1px solid transparent;}
  .callegend i.forte{background:var(--cal-feito-forte); border-color:var(--cal-feito-borda);}
  .callegend i.suave{background:var(--cal-feito-suave); border-color:var(--cal-feito-borda-suave);}
  .callegend i.ouro{background:linear-gradient(160deg, var(--gold), var(--gold-deep)); border-color:var(--gold);}
  .calsummary{font-size:12.5px; color:var(--text-dim); text-align:center;}

  /* ---------- rest timer ---------- */
  #resttimer{position:fixed; left:0; right:0; bottom:calc(var(--navh) + env(safe-area-inset-bottom)); max-width:520px; margin:0 auto; background:var(--bg-elev); border-top:1px solid var(--line); border-bottom:1px solid var(--line); display:none; flex-direction:column; z-index:50; box-shadow:0 -8px 24px var(--shadow);}
  #resttimer.show{display:flex;}
  #resttimer.ending{border-top-color:var(--accent); box-shadow:0 -8px 30px rgba(var(--accent-rgb),.18);}
  #resttimer.ending .restnum{color:var(--accent); transform:scale(1.08);}
  #resttimer.ending .restbarfill{background:var(--accent);}

  .restbarwrap{width:100%; height:4px; background:var(--line); flex-shrink:0; overflow:hidden;}
  .restbarfill{height:100%; width:100%; background:var(--accent-dim); transition:width .2s linear, background .2s ease;}

  .resttap{display:flex; align-items:center; gap:14px; width:100%; background:none; border:none; padding:12px 16px; cursor:pointer; text-align:left; color:inherit; font-family:inherit;}
  .restnum{font-family:var(--display); font-variant-numeric:tabular-nums; font-weight:700; font-size:48px; line-height:1; min-width:1.9em; text-align:center; transition:transform .15s ease, color .15s ease; flex-shrink:0;}
  .resttext{flex:1; min-width:0;}
  .resttext .l1{font-size:11px; color:var(--text-dim); text-transform:uppercase; letter-spacing:.05em;}
  .resttext .l2{font-family:var(--display); font-size:14.5px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
  .restbtns{display:flex; gap:8px; padding:0 16px 14px;}
  .restbtn{flex:1; background:var(--card-2); border:1px solid var(--line); color:var(--text); font-size:12.5px; padding:0 12px; height:44px; border-radius:10px; cursor:pointer;}

  #resttimer.expanded{position:fixed; inset:0; bottom:0; max-width:none; margin:0; z-index:200; justify-content:flex-end;
    padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); border:none; box-shadow:none;}
  #resttimer.expanded .resttap{flex:1; flex-direction:column; justify-content:center; gap:28px; padding:24px;}
  #resttimer.expanded .restnum{font-size:min(28vw, 160px);}
  #resttimer.expanded .resttext{flex:none; text-align:center;}
  #resttimer.expanded .resttext .l2{white-space:normal; font-size:18px;}
  #resttimer.expanded .restbarwrap{width:80%; max-width:400px; height:8px; border-radius:4px; margin:0 auto;}
  #resttimer.expanded .restbtns{padding:20px 24px calc(24px + env(safe-area-inset-bottom));}

  /* ---------- toast ---------- */
  #toast{position:fixed; left:16px; right:16px; bottom:calc(var(--navh) + 76px); max-width:488px; margin:0 auto; background:var(--surface-raised); border:1px solid var(--line-strong); border-radius:12px; padding:13px 16px; font-size:13.5px; z-index:90; display:none; box-shadow:0 8px 24px var(--shadow-strong);}
  #toast.show{display:flex; align-items:center; justify-content:space-between; gap:14px;}
  .toastact{background:none; border:none; color:var(--accent); font-weight:700; font-size:13.5px; cursor:pointer; padding:6px 2px; white-space:nowrap;}

  /* ---------- bottom nav ---------- */
  /* Enquanto boas-vindas ou onboarding estao de pe, nao existe app pra
     navegar: a barra some. Depende da ordem no DOM (as duas telas vem antes
     da nav), que e a ordem do index.html. */
  #boas-vindas:not([hidden]) ~ .bottomnav,
  #onboarding:not([hidden]) ~ .bottomnav{display:none;}

  .bottomnav{position:fixed; left:0; right:0; bottom:0; max-width:520px; margin:0 auto; background:var(--bg-elev); border-top:1px solid var(--line); display:flex; z-index:60; padding-bottom:env(safe-area-inset-bottom);}
  /* com quatro abas o rótulo tem menos largura, então fonte um pouco menor e
     sem quebrar linha: "Histórico" e "Ajustes" precisam caber inteiros */
  .navbtn{flex:1; padding:10px 2px 8px; background:none; border:none; color:var(--text-faint); display:flex; flex-direction:column; align-items:center; gap:4px; font-size:10.5px; cursor:pointer; font-family:var(--sans); min-height:var(--navh); white-space:nowrap;}
  .navbtn[aria-current="page"]{color:var(--accent);}
  .navbtn svg{width:21px; height:21px;}
  .navbtn .dot{position:absolute; margin-left:26px; margin-top:-2px; width:7px; height:7px; border-radius:50%; background:var(--accent); display:none;}
  .navbtn.training .dot{display:block;}

  /* ---------- onboarding ---------- */
  /* O atributo `hidden` e semantico: significa "nao renderiza", e nenhuma
     regra de layout pode ganhar dele. Sem isto, qualquer classe com
     display:flex vence a regra do navegador e o elemento aparece mesmo
     escondido. Foi assim que o painel de login por e-mail apareceu com os
     dois passos empilhados na v90: `.bv-conteudo{display:flex}` passava por
     cima do `hidden`, e a flag que trancava a porta nao tinha nada a ver
     com isso. */
  [hidden]{display:none !important;}

  .onb{position:fixed; inset:0; background:var(--bg); z-index:120; display:flex; flex-direction:column; max-width:520px; margin:0 auto;}
  .onb[hidden]{display:none;}
  .onb-top{display:flex; align-items:center; gap:14px; padding:calc(14px + env(safe-area-inset-top)) 18px 10px;}
  .onb-back{background:none; border:none; color:var(--text); font-size:26px; line-height:1; width:44px; height:44px; cursor:pointer; margin-left:-10px;}
  .onb-back[disabled]{opacity:.25;}
  .onb-track{flex:1; height:4px; background:var(--line); border-radius:4px; overflow:hidden;}
  .onb-bar{display:block; height:100%; background:var(--accent); width:0%; transition:width .25s ease;}
  .onb-step{font-size:12px; color:var(--text-faint); min-width:34px; text-align:right;}
  .onb-body{flex:1; overflow-y:auto; padding:14px 18px 8px;}
  .onb-q{font-family:var(--display); font-size:25px; font-weight:700; line-height:1.25; letter-spacing:-0.01em; margin-bottom:8px;}
  .onb-hint{font-size:13.5px; color:var(--text-dim); line-height:1.55; margin-bottom:20px;}
  .onb-opts{display:flex; flex-direction:column; gap:10px;}
  .onb-opt{background:var(--card); border:1px solid var(--line); box-shadow:var(--card-shadow); border-radius:14px; padding:16px 18px; text-align:left; color:inherit; font-family:inherit; font-size:15px; cursor:pointer; min-height:60px; display:flex; align-items:center; justify-content:space-between; gap:12px; transition:border-color .12s, background .12s;}
  .onb-opt small{display:block; font-size:12.5px; color:var(--text-dim); margin-top:4px; font-weight:400;}
  .onb-opt .tick{width:22px; height:22px; border-radius:50%; border:1px solid var(--line-strong); flex-shrink:0; display:flex; align-items:center; justify-content:center; font-size:12px; color:transparent;}
  .onb-opt.sel{border-color:var(--accent); background:linear-gradient(180deg, rgba(var(--accent-rgb),.09), rgba(var(--accent-rgb),.02));}
  .onb-opt.sel .tick{background:var(--accent); border-color:var(--accent); color:var(--on-accent); font-weight:700;}
  .onb-grid{display:grid; grid-template-columns:repeat(auto-fit, minmax(88px,1fr)); gap:10px;}
  .onb-grid .onb-opt{justify-content:center; text-align:center; min-height:64px; font-family:var(--display); font-size:17px;}
  .onb-input{width:100%; background:var(--bg-elev); border:1px solid var(--line-strong); border-radius:14px; color:var(--text); font-size:17px; padding:17px; font-family:inherit;}
  .onb-input:focus{outline:none; border-color:var(--accent);}
  /* boas-vindas: as duas acoes tem exatamente o mesmo tratamento visual.
     Nenhuma cor de destaque, nenhuma borda mais forte, mesma altura. Se uma
     delas ganhasse o accent, "continuar sem conta" viraria letra miuda, e a
     escolha deixaria de ser escolha. */
  .onb-foot{padding:12px 18px calc(20px + env(safe-area-inset-bottom));}
  .onb-next{width:100%; background:var(--accent); color:var(--on-accent); border:none; padding:17px; border-radius:14px; font-family:var(--display); font-weight:700; font-size:16px; cursor:pointer; min-height:56px;}
  .onb-next[disabled]{background:var(--card-2); color:var(--text-faint); cursor:default;}
  .onb-skip{width:100%; background:none; border:none; color:var(--text-dim); font-size:13.5px; padding:14px; cursor:pointer; font-family:inherit;}
  .onb-resumo{display:flex; flex-direction:column; gap:1px; background:var(--line); border:1px solid var(--line); border-radius:14px; overflow:hidden; margin-bottom:16px;}
  .onb-linha{background:var(--card); padding:13px 16px; display:flex; justify-content:space-between; gap:14px; font-size:13.5px;}
  .onb-linha span:first-child{color:var(--text-dim);}
  .onb-linha span:last-child{text-align:right; font-weight:600;}
  .aviso{font-size:12.5px; color:var(--text-dim); line-height:1.55; background:var(--card-2); border:1px solid var(--line); border-radius:12px; padding:13px 15px;}
  .aviso + .aviso{margin-top:10px;}
  .novidades{margin:0 0 16px; padding-left:20px; font-size:13.5px; color:var(--text-dim); line-height:1.6;}
  .novidades li{margin-bottom:4px;}

  ::-webkit-scrollbar{display:none;}

  /* ---------- alongamento opcional ---------- */
  /* bloco proprio, de proposito diferente de .excard: alongamento nao e
     exercicio e nao pode parecer um cartao de series */
  #alongamento-bloco{padding:0 16px; margin-top:4px;}
  .albloco{background:var(--card); border:1px dashed var(--line-strong); box-shadow:var(--card-shadow); border-radius:var(--radius); padding:14px 16px; display:flex; flex-direction:column; gap:10px;}
  .albloco.feito{border-style:solid; border-color:var(--accent-dim);}
  .alhead{display:flex; align-items:flex-start; justify-content:space-between; gap:12px;}
  .altitulo{font-family:var(--display); font-weight:600; font-size:15px;}
  .alsub{font-size:12px; color:var(--text-dim); margin-top:2px;}
  .alcheck{flex:none; width:44px; height:44px; border-radius:12px; border:1px solid var(--line-strong); background:transparent; color:var(--text-faint); font-size:18px; cursor:pointer;}
  .alcheck.done{background:var(--accent); border-color:var(--accent); color:var(--on-accent);}
  .alitem{border-top:1px solid var(--line); padding-top:8px;}
  .alnome{font-size:13.5px; font-weight:600;}
  .alcomo{font-size:12px; color:var(--text-dim); margin-top:2px;}
  .albloco .minibtn{align-self:flex-start;}

  /* busca vazia registrada com filtro de grupo ativo: o chip aparece ao lado
     do termo pra separar catalogo raso de filtro mal combinado */
  .buscachip{font-size:10.5px; color:var(--amber); border:1px solid var(--line-strong); border-radius:8px; padding:1px 6px; margin-left:6px; vertical-align:1px;}

  /* ---------- banner de migracao de hospedagem ---------- */
  /* ambar de pendencia, mesmo codigo visual da sessao esquecida: e aviso
     que pede acao, nao erro */
  .migracao{margin:0 16px 14px; background:linear-gradient(180deg, var(--surface-warn-hi), var(--surface-warn-lo)); border:1px solid var(--amber); border-radius:var(--radius); padding:14px 16px;}
  .migracao .mt-titulo{font-family:var(--display); font-weight:600; font-size:15px; margin-bottom:4px;}
  .migracao .mt-texto{font-size:12.5px; color:var(--text-dim); line-height:1.5; margin:0 0 12px;}
  .migracao .mt-acoes{display:flex; flex-direction:column; gap:8px;}
  .migracao .mt-link{display:flex; align-items:center; justify-content:center; text-decoration:none; background:var(--amber); color:var(--on-accent); min-height:44px; border-radius:10px; font-weight:600; font-size:13.5px;}
  .migracao .btn-ghost{min-height:44px;}


  /* -----------------------------------------------------------------------
     TROCA DE EXERCICIO DENTRO DA SESSAO
     Duas saidas na mesma folha: a sugestao pronta (um toque) e a lista ja
     filtrada. Tudo com token de tema, nada de cor solta.
     ----------------------------------------------------------------------- */
  .trocasug{display:flex; gap:12px; align-items:center; background:var(--card-2); border:1px solid var(--line); border-radius:var(--radius); padding:12px; margin:12px 0;}
  .trocasug-txt{min-width:0;}
  .trocasug-nome{font-family:var(--display); font-weight:700; font-size:18px; line-height:24px;}
  .trocasug-motivo{color:var(--text-dim); font-size:13px; line-height:18px; margin-top:2px;}
  .trocaajuda{color:var(--text-dim); font-size:13px; line-height:18px; margin:8px 0;}
  /* a explicacao da recusa nunca e uma lista vazia: ela ocupa espaco e diz
     o motivo, senao a pessoa acha que o app quebrou */
  .trocafalha{background:var(--card-2); border:1px solid var(--line); border-radius:var(--radius); padding:12px; line-height:20px; margin:12px 0;}
  /* adaptar o treino de hoje: botao na previa e linhas do resumo */
  .adaptbtn{display:block; width:calc(100% - 32px); margin:10px auto 0; background:var(--card-2); border:1px dashed var(--line-strong); color:var(--text-dim); border-radius:var(--radius); padding:14px; font-size:13.5px; font-family:inherit; cursor:pointer; min-height:48px;}
  .adaptbtn:active{border-color:var(--accent); color:var(--accent);}
  .adaptlinha{background:var(--card-2); border:1px solid var(--line); border-radius:var(--radius); padding:10px 12px; margin:8px 0;}
  /* evolucao: 1RM estimado, e mapa muscular (aba Musculos) */
  .rm1{font-size:12.5px; line-height:18px; color:var(--text-dim); padding:8px 2px 2px;}
  .rm1 b{color:var(--text);}
  .maparow{padding:8px 2px;}
  .mapatopo{display:flex; justify-content:space-between; align-items:baseline; gap:8px;}
  .mapanome{font-weight:600; font-size:14px;}
  .mapaval{font-size:12.5px; color:var(--text-dim); text-align:right;}
  .mapabarra{height:8px; background:var(--card-2); border-radius:4px; margin-top:5px; overflow:hidden;}
  .mapafill{height:100%; background:var(--accent); border-radius:4px;}
  .adaptlinha-t{font-weight:600; font-size:14px; line-height:20px;}
  .adaptlinha-s{color:var(--text-dim); font-size:12.5px; line-height:17px; margin-top:2px;}
  .trocasep{display:flex; flex-wrap:wrap; gap:8px; border-top:1px solid var(--line); padding-top:12px; margin-top:12px;}
  .trocadesfaz{display:flex; align-items:center; justify-content:space-between; gap:8px; padding:8px 12px; background:var(--card-2); border-bottom:1px solid var(--line); font-size:13px; color:var(--text-dim);}
  .trocadesfaz span{min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}


  /* -----------------------------------------------------------------------
     TELA DE BOAS-VINDAS
     So aparece na primeira abertura. Segue o TEMA (claro ou escuro): usa os
     tokens de sempre, sem cor solta, porque uma tela que ignora o tema
     escolhido e a primeira coisa que a pessoa ve dele.

     A foto cobre so o bloco de topo. O contraste do texto NAO vem de baixar
     opacidade: vem do gradiente, que chega em 100% de --bg antes da faixa
     onde o texto mora. Ali o contraste e o mesmo do resto do app, ja
     travado pelo teste 24, nos dois temas.
     ----------------------------------------------------------------------- */
  /* sem z-index proprio: .onb ja da 120, e baixar pra 60 empatava com a
     .bottomnav (tambem 60), que por vir depois no DOM pintava por cima */
  .bv-tela{position:fixed; inset:0; display:flex; flex-direction:column;
           justify-content:flex-end; background:var(--bg); color:var(--text);
           overflow-y:auto; padding:0;}
  /* o :not([hidden]) nao e enfeite: sem ele esta regra vence o `hidden` do
     navegador e o painel aparece mesmo escondido, que foi o bug da v90 */
  .bv-conteudo:not([hidden]){position:relative; z-index:1; display:flex; flex-direction:column;}

  .bv-topo{position:relative; overflow:hidden;}
  /* a foto e decorativa: se falhar, o JS a esconde e sobra o gradiente sobre
     a cor do tema, que e a tela sem foto. Nada muda de lugar. */
  .bv-img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block;}
  /* Fecha nas DUAS pontas. Antes so a base tinha gradiente e a foto cortava
     reto na borda de cima, deixando uma linha dura no topo da tela. Agora
     ela nasce da cor de fundo, aparece na faixa do meio e morre na cor de
     fundo de novo: sem borda visivel em nenhuma das pontas. */
  .bv-veu{position:absolute; inset:0;
    background:linear-gradient(180deg,
      rgb(var(--bg-rgb)) 0%,
      rgba(var(--bg-rgb), .55) 9%,
      rgba(var(--bg-rgb), 0) 24%,
      rgba(var(--bg-rgb), .35) 42%,
      rgba(var(--bg-rgb), .85) 58%,
      rgb(var(--bg-rgb)) 74%,
      rgb(var(--bg-rgb)) 100%);}
  /* o padding-top e o que empurra o texto pra faixa ja opaca do gradiente:
     e ele, e nao a sorte da foto, que garante o contraste */
  .bv-topo-txt{position:relative; padding:200px 20px 0;}
  .bv-nome{font-family:var(--display); font-size:40px; line-height:44px; font-weight:800;
           margin:0; letter-spacing:-.02em; color:var(--text);}
  .bv-lead{font-size:17px; line-height:24px; margin:8px 0 0; color:var(--text-dim);}

  .bv-baixo{padding:20px 20px calc(28px + env(safe-area-inset-bottom)); display:flex;
            flex-direction:column; gap:10px; background:var(--bg);}
  .bv-acoes{display:flex; flex-direction:column; gap:10px;}
  .bv-btn{width:100%; min-height:52px; border-radius:14px; font-family:inherit; font-size:16px;
          font-weight:600; cursor:pointer; padding:14px 16px; border:1px solid transparent;
          display:flex; align-items:center; justify-content:center; gap:12px;}
  /* Botao do Google: branco com borda cinza, o estilo aprovado da marca, e
     igual nos dois temas de proposito. O logo mantem as cores originais e
     nunca e recolorido; o gap de 12px e o espaco livre em volta dele. */
  .bv-primario{background:#fff; color:#1f1f1f; border-color:#747775;}
  .bv-g{flex:0 0 auto; display:block;}
  .bv-secundario{background:transparent; color:var(--text); border-color:var(--line);}
  .bv-link{background:none; border:0; color:var(--text-dim); font-family:inherit; font-size:15px;
           text-decoration:underline; cursor:pointer; min-height:44px; padding:10px 8px;}
  .bv-nota{font-size:13px; line-height:19px; color:var(--text-dim); margin:2px 0 0;}
  .bv-status{font-size:14px; line-height:20px; color:var(--text); margin:6px 0 0;}

  /* painel de login por e-mail: mesma tela, mesmos tokens */
  .bv-painel{padding:24px 20px calc(28px + env(safe-area-inset-bottom)); gap:10px; background:var(--bg);}
  .bv-titulo{font-family:var(--display); font-size:26px; line-height:32px; font-weight:700; margin:0; color:var(--text);}
  .bv-lead-p{font-size:15px; line-height:22px; color:var(--text-dim); margin:0 0 6px;}
  .bv-label{font-size:13px; color:var(--text-dim);}
  .bv-input{width:100%; min-height:52px; border-radius:12px; padding:14px 16px; font-family:inherit;
            font-size:17px; color:var(--text); background:var(--card-2); border:1px solid var(--line);}
  .bv-input::placeholder{color:var(--text-dim);}
  .bv-input:focus-visible{outline:2px solid var(--accent); outline-offset:2px;}
  .bv-codigo{letter-spacing:.5em; text-align:center; font-size:24px; font-weight:700;}
  .bv-lgpd{font-size:12px; line-height:18px; color:var(--text-dim); margin:0;}
  .bv-erro{font-size:14px; line-height:20px; color:var(--danger, #c0392b); margin:0;}
  .bv-painel .bv-passo:not([hidden]){display:flex; flex-direction:column; gap:10px;}

  /* tela baixa: a foto cede espaco antes do texto ou dos botoes */
  @media (max-height: 680px){
    .bv-topo-txt{padding-top:120px;}
  }

  @media (prefers-reduced-motion: reduce){
    .bv-tela video{display:none !important;}
  }

  /* paragrafos da tela Sobre (dados e conta) */
  .sobre-p{font-size:14px; line-height:21px; color:var(--text-dim); margin:8px 0;}