/* Estilos da tela "jornada" — extraído de sua-jornada.html (Tarefa 1).
   Cores: só via var(--token) de css/tokens.css. */

    *,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
    body{font-family:'Poppins',sans-serif;background:var(--navy);color:var(--text);min-height:100vh;display:flex;flex-direction:column;align-items:stretch;padding:24px 40px 80px}
    .logo{margin-bottom:20px;text-align:center}.logo img{height:26px}

    /* BASE */
    .card{background:var(--card);border:1px solid var(--border);border-radius:18px;padding:28px 32px;width:100%;margin-bottom:12px;box-shadow:0 2px 12px var(--glass-b),0 0 0 1px var(--preto-a03)}
    /* auth/loading centralizado e com largura máxima */
    #screen-loading,#screen-auth,#screen-wait{max-width:520px;align-self:center;width:100%}
    .screen{display:none}.screen.active{display:block}
    .eyebrow{font-size:10px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--muted);margin-bottom:10px}
    h2{font-size:clamp(18px,3.5vw,22px);font-weight:800;color:var(--text);line-height:1.3;margin-bottom:6px}
    h2 em{color:var(--text);font-style:normal}
    .hint{font-size:13px;color:var(--muted);line-height:1.7;margin-bottom:20px}

    /* AUTH */
    .auth-icon{width:52px;height:52px;background:var(--branco-a08);border:1px solid var(--branco-a20);border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 0 18px}
    .auth-icon svg{width:24px;height:24px;stroke:var(--text)}
    .name-input,.email-input{width:100%;background:var(--card2);border:1.5px solid var(--border);border-radius:10px;padding:13px 15px;font-family:'Poppins',sans-serif;font-size:15px;font-weight:600;color:var(--text);outline:none;transition:border-color 0.2s;margin-bottom:10px}
    .name-input::placeholder,.email-input::placeholder{color:var(--muted2);font-weight:400;font-size:13px}
    .name-input:focus,.email-input:focus{border-color:var(--branco-a35)}
    .error-msg{background:var(--c-dc3545-a10);border:1px solid var(--c-dc3545-a30);border-radius:10px;padding:12px 15px;font-size:13px;color:var(--vermelho);margin-top:10px;display:none}
    .error-msg.visible{display:block}

    /* LOADING */
    .loading-center{text-align:center;padding:32px 0}
    .spinner{width:30px;height:30px;border:3px solid var(--preto-a10);border-top-color:var(--laranja);border-radius:50%;animation:spin 0.8s linear infinite;margin:0 auto 14px}
    @keyframes spin{to{transform:rotate(360deg)}}

    /* BUTTONS */
    .btn-primary{display:block;width:100%;background:var(--laranja);color:var(--branco);font-family:'Poppins',sans-serif;font-size:13px;font-weight:700;letter-spacing:1px;text-transform:uppercase;padding:15px;border-radius:10px;border:none;cursor:pointer;text-align:center;text-decoration:none;transition:background 0.2s,transform 0.15s;margin-top:14px}
    .btn-primary:hover{background:var(--laranja-hover);transform:translateY(-1px)}
    .btn-secondary{display:block;width:100%;margin-top:10px;background:transparent;color:var(--text);font-family:'Poppins',sans-serif;font-size:13px;font-weight:600;padding:13px;border-radius:10px;border:1px solid var(--border);text-align:center;text-decoration:none;transition:all 0.2s;cursor:pointer}
    .btn-secondary:hover{background:var(--branco-a06)}
    .btn-skip{display:block;width:100%;margin-top:8px;background:transparent;color:var(--muted);font-family:'Poppins',sans-serif;font-size:12px;font-weight:500;padding:10px;border-radius:10px;border:1px solid var(--border);cursor:pointer;text-align:center}

    /* HEADER DO PERFIL */
    .perfil-header{background:var(--glass);border:1px solid var(--glass-b);border-radius:18px;padding:22px 32px 18px;width:100%;margin-bottom:12px;box-shadow:0 2px 12px var(--preto-a04)}
    .perfil-saudacao{font-size:20px;font-weight:900;color:var(--text);margin-bottom:2px}
    .perfil-saudacao span{color:var(--text)}
    .perfil-trilha{font-size:12px;color:var(--muted);margin-bottom:14px}
    .perfil-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
    .ps-item{background:var(--card2);border:1px solid var(--border);border-radius:10px;padding:10px 8px;text-align:center}
    .ps-val{font-size:20px;font-weight:900;color:var(--text);display:block}
    .ps-label{font-size:9px;color:var(--muted);text-transform:uppercase;letter-spacing:1px;margin-top:2px}

    /* HOJE */
    .hoje-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
    .hoje-item{background:var(--card2);border:1px solid var(--border);border-radius:12px;padding:12px 14px;display:flex;align-items:center;gap:10px}
    .hoje-item .hi-icon{font-size:18px;flex-shrink:0}
    .hoje-item .hi-label{font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:1px}
    .hoje-item .hi-val{font-size:13px;font-weight:700;color:var(--text);margin-top:2px}
    .hoje-item .hi-sub{font-size:10px;color:var(--muted);margin-top:1px}
    .hoje-item.destaque{border-color:var(--branco-a20);background:var(--branco-a05)}
    .hoje-item.verde{border-color:var(--c-48bb78-a40);background:var(--c-48bb78-a05)}
    .hoje-item.vermelho{border-color:var(--c-fc8181-a30);background:var(--c-fc8181-a04)}

    /* PRÓXIMO PASSO */
    .proximo-card{background:var(--branco-a06);border:1.5px solid var(--branco-a20);border-radius:16px;padding:20px 32px;width:100%;margin-bottom:12px}
    .proximo-card .pc-eyebrow{font-size:9px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--muted);margin-bottom:5px}
    .proximo-card .pc-titulo{font-size:17px;font-weight:800;color:var(--text);margin-bottom:6px}
    .proximo-card .pc-desc{font-size:12px;color:var(--texto-suave);line-height:1.6;margin-bottom:14px}

    /* JORNADA STEPS */
    .step-list{display:flex;flex-direction:column;gap:0}
    .step-row{display:flex;gap:12px;padding:12px 0;border-bottom:1px solid var(--border);position:relative}
    .step-row:last-child{border-bottom:none}
    .step-circle{width:32px;height:32px;border-radius:50%;border:2px solid var(--border);background:var(--card2);display:flex;align-items:center;justify-content:center;font-size:13px;flex-shrink:0;margin-top:2px;color:var(--muted)}
    .step-circle.done{border-color:var(--verde);background:var(--c-48bb78-a12);color:var(--verde)}
    .step-circle.active{border-color:var(--branco-a35);background:var(--branco-a15);box-shadow:0 0 0 3px var(--branco-a08);color:var(--text)}
    .step-circle.locked{opacity:0.35}
    .step-ic{width:16px;height:16px}
    .step-body{flex:1}
    .step-titulo{font-size:13px;font-weight:700;color:var(--text);display:flex;align-items:center;justify-content:space-between;gap:8px}
    .step-titulo.muted{color:var(--muted)}
    .step-desc{font-size:11px;color:var(--muted);line-height:1.5;margin-top:3px}
    .step-meta{font-size:10px;color:var(--verde);margin-top:4px;font-weight:600}
    .step-pts{font-size:9px;font-weight:700;color:var(--text);background:var(--branco-a10);border:1px solid var(--branco-a20);border-radius:100px;padding:2px 9px;white-space:nowrap}
    .step-link{display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:700;color:var(--laranja);margin-top:7px;text-decoration:none;border:1px solid var(--border-orange);border-radius:100px;padding:4px 11px;transition:all 0.2s}
    .step-link:hover{background:var(--laranja-a08)}

    /* Prévia "exemplo" — mostra como o passo vai ficar antes de desbloquear
       (em vez de só texto cinza travado). Dado é fixo/ilustrativo, nunca real. */
    .step-preview{margin-top:8px;padding:10px 12px;background:var(--card2);border:1px dashed var(--branco-a20);border-radius:10px}
    .step-preview-tag{font-size:9px;font-weight:800;letter-spacing:.5px;text-transform:uppercase;color:var(--muted);margin-bottom:6px}
    .step-preview-item{display:flex;align-items:center;gap:6px;font-size:11px;color:var(--text);padding:3px 0}
    .step-preview-item span:first-child{flex:1;color:var(--muted)}
    .step-preview-item b{font-weight:800}
    .step-preview-ex{font-size:8px;font-weight:700;color:var(--muted);background:var(--card);border:1px solid var(--border);border-radius:100px;padding:1px 6px;text-transform:uppercase;letter-spacing:.3px}

    /* BENEFÍCIOS */
    .beneficios-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
    .beneficio-row{display:flex;align-items:flex-start;gap:10px;padding:12px;background:var(--branco-a02);border:1px solid var(--border);border-radius:12px}
    .br-icon{width:30px;height:30px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:14px;flex-shrink:0}
    .br-body{flex:1}
    .br-nome{font-size:13px;font-weight:600;color:var(--text);display:flex;align-items:center;gap:6px;flex-wrap:wrap}
    .br-desc{font-size:11px;color:var(--muted);margin-top:2px;line-height:1.5}
    .badge-ativo{font-size:9px;font-weight:700;padding:2px 8px;border-radius:100px;background:var(--c-48bb78-a15);color:var(--verde);border:1px solid var(--c-48bb78-a30)}
    .badge-fundadora{background:var(--c-f6c90e-a15);color:var(--amarelo);border:1px solid var(--c-f6c90e-a30);font-size:9px;font-weight:700;padding:2px 8px;border-radius:100px}
    .badge-breve{background:var(--c-63b3ed-a15);color:var(--azul);border:1px solid var(--c-63b3ed-a30);font-size:9px;font-weight:700;padding:2px 8px;border-radius:100px}

    /* SEÇÃO HEADER */
    .sec-header{display:flex;align-items:center;gap:8px;margin-bottom:14px}
    .sec-header .sh-icon{font-size:16px}
    .sec-header .sh-title{font-size:11px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--muted)}

    @media(max-width:768px){
      body{padding:20px 16px 80px}
      .perfil-stats{grid-template-columns:repeat(3,1fr)}
      .hoje-grid{grid-template-columns:1fr 1fr}
      .beneficios-grid{grid-template-columns:1fr}
      .card,.perfil-header,.proximo-card{padding:18px 16px}
      #screen-loading,#screen-auth,#screen-wait{max-width:100%}
    }
  /* ─── HOME v4 — HERO com degradê (23/07: profundidade em vez de chapado,
     mesma paleta navy+laranja — brilho vem do glow laranja no canto, não de
     trocar de cor) ─── */
  .hero4{background:radial-gradient(120% 100% at 100% 0%, var(--laranja-a10), transparent 60%), linear-gradient(160deg, var(--card2) 0%, var(--card) 45%, var(--navy) 100%);border:1px solid var(--branco-a10);border-radius:22px;padding:22px;margin-bottom:16px;box-shadow:0 10px 30px var(--preto-a40)}
  .hero4-row1{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
  .hero4-kicker{font-size:11px;font-weight:800;letter-spacing:1.5px;text-transform:uppercase;color:var(--muted);display:inline-flex;align-items:center;gap:7px}
  .hero4-dot{width:7px;height:7px;border-radius:50%;background:var(--muted);flex-shrink:0}
  .hero4-oi{color:var(--muted);font-size:14px;margin:14px 0 2px}
  .hero4-nome{font-size:clamp(30px,7vw,40px);font-weight:900;line-height:.98;letter-spacing:-1px;color:var(--text)}
  .hero4-nome span{color:var(--text)}
  .hero4-av{width:44px;height:44px;border-radius:50%;background:var(--branco-a10);border:1px solid var(--branco-a20);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:17px;color:var(--text);flex-shrink:0}
  .hero4-metas{display:flex;gap:8px;flex-wrap:wrap;margin:18px 0}
  .hero4-meta{display:inline-flex;align-items:center;gap:7px;background:var(--branco-a06);border:1px solid var(--branco-a10);border-radius:100px;padding:7px 13px;font-size:12px;font-weight:700;color:var(--text)}
  .hero4-meta-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
  .hero4-prog{background:var(--preto-a15);border:1px solid var(--branco-a10);border-radius:16px;padding:18px;margin-bottom:18px}
  .hero4-and-pill{display:inline-flex;align-items:center;gap:6px;font-size:9px;font-weight:800;letter-spacing:1px;text-transform:uppercase;color:var(--text);background:var(--branco-a10);border:1px solid var(--branco-a20);border-radius:20px;padding:4px 12px 4px 8px;margin-bottom:14px}
  .hero4-and-dot{width:6px;height:6px;border-radius:50%;background:var(--text)}
  .hero4-rotulo{font-size:9px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--muted)}
  .hero4-progname{font-size:30px;font-weight:900;letter-spacing:-1px;line-height:.95;color:var(--text);margin:4px 0 4px}
  .hero4-obj{color:var(--text);font-size:12px;font-weight:600;font-style:italic;margin-bottom:16px}
  .hero4-stats{display:flex;gap:8px;margin-top:4px}
  .hero4-stat{flex:1;background:var(--branco-a04);border:1px solid var(--branco-a10);border-radius:10px;padding:10px}
  .hero4-stats .n{font-size:18px;font-weight:900;color:var(--text);line-height:1}
  .hero4-stats .l{font-size:9px;font-weight:700;letter-spacing:.5px;color:var(--muted);text-transform:uppercase;margin-top:2px}
  .hero4-acts{display:flex;gap:10px}
  .hero4-continuar{flex:1;background:var(--laranja);color:var(--branco);border:none;border-radius:12px;padding:11px 14px;font-weight:800;font-size:13px;cursor:pointer;font-family:inherit;transition:background .2s}
  .hero4-continuar small{display:block;font-weight:500;font-size:10px;opacity:.85;margin-top:1px}
  .hero4-continuar:hover{background:var(--laranja-hover)}
  .hero4-explorar{background:transparent;color:var(--text);border:1px solid var(--branco-a10);border-radius:12px;padding:11px 16px;font-weight:700;font-size:12.5px;cursor:pointer;font-family:inherit;transition:border-color .2s}
  .hero4-explorar:hover{border-color:var(--branco-a25)}

  /* rótulo de seção da Home nova (sem emoji) */
  .home-sec-lbl{font-size:11px;font-weight:800;letter-spacing:1.5px;text-transform:uppercase;color:var(--muted);display:flex;align-items:center;gap:7px;margin:24px 4px 10px}

  /* ─── CHECK-IN "Como você está hoje?" — botão no card, conteúdo em bottom sheet ─── */
  .checkin-card{background:var(--card);border:1px solid var(--branco-a10);border-radius:18px;overflow:hidden;margin-bottom:16px}
  .checkin-trigger{width:100%;display:flex;align-items:center;justify-content:space-between;gap:8px;background:none;border:none;color:var(--text);font-family:inherit;font-size:16px;font-weight:800;padding:18px;cursor:pointer;text-align:left;-webkit-tap-highlight-color:transparent}
  .checkin-trigger.answered .checkin-trigger-label{color:var(--text)}
  .checkin-chev{color:var(--muted);font-size:15px;display:inline-block;transition:transform .2s;flex-shrink:0}
  .checkin-chev.open{transform:rotate(180deg)}

  /* Aba de baixo: backdrop fixo cobrindo a tela + painel que sobe do rodapé */
  .checkin-sheet-backdrop{position:fixed;inset:0;background:var(--preto-a60);opacity:0;pointer-events:none;transition:opacity .25s ease;z-index:500;display:flex;align-items:flex-end}
  .checkin-sheet-backdrop.open{opacity:1;pointer-events:auto}
  .checkin-accordion{width:100%;max-height:82vh;overflow-y:auto;background:var(--card);border-radius:20px 20px 0 0;padding:10px 18px calc(18px + env(safe-area-inset-bottom));box-shadow:0 -8px 34px var(--preto-a35);transform:translateY(100%);transition:transform .3s cubic-bezier(.2,.8,.2,1)}
  .checkin-sheet-backdrop.open .checkin-accordion{transform:translateY(0)}
  .checkin-sheet-handle{width:36px;height:4px;border-radius:2px;background:var(--border);margin:0 auto 14px}
  .checkin-sheet-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:6px}
  .checkin-sheet-title{font-size:17px;font-weight:800;color:var(--text)}
  .checkin-sheet-close{flex-shrink:0;width:30px;height:30px;border-radius:50%;background:var(--branco-a10);border:none;color:var(--text);font-size:14px;cursor:pointer;display:flex;align-items:center;justify-content:center;-webkit-tap-highlight-color:transparent}
  .checkin-sub{color:var(--muted);font-size:13px;margin:6px 0 14px}
  body.sheet-aberta{overflow:hidden}
  .checkin-opt-list{display:flex;flex-direction:column;gap:8px}
  .checkin-opt{display:flex;align-items:center;gap:12px;width:100%;background:var(--navy);border:1px solid var(--branco-a10);border-radius:14px;padding:12px 14px;font-family:inherit;color:var(--text);cursor:pointer;text-align:left;transition:border-color .15s,background .15s;-webkit-tap-highlight-color:transparent}
  .checkin-opt:hover{border-color:var(--border-hover);background:var(--card2)}
  .checkin-opt-icwrap{flex-shrink:0;width:36px;height:36px;border-radius:10px;background:var(--branco-a10);border:1px solid var(--branco-a20);display:flex;align-items:center;justify-content:center;color:var(--text)}
  .checkin-opt-ic{width:18px;height:18px}
  .checkin-opt-txt{display:flex;flex-direction:column;gap:2px;min-width:0}
  .checkin-opt-tit{font-size:14px;font-weight:800;color:var(--text)}
  .checkin-opt-sub{font-size:11.5px;color:var(--muted);line-height:1.3}
  .checkin-resp{margin-top:12px;background:var(--navy);border:1px solid var(--branco-a10);border-radius:12px;padding:14px 15px}
  .checkin-resp-assin{display:flex;align-items:center;gap:9px;margin-bottom:9px}
  .checkin-resp-av{width:34px;height:34px;border-radius:50%;flex-shrink:0;object-fit:cover;object-position:center top;border:2px solid var(--border-orange)}
  .checkin-resp-nome{font-size:12px;font-weight:800;color:var(--text);line-height:1.2}
  .checkin-resp-cargo{font-size:9.5px;color:var(--muted)}
  .checkin-resp-frase{font-size:12.5px;color:var(--text);line-height:1.6;margin-bottom:11px}
  .checkin-resp-cta{display:inline-flex;align-items:center;gap:6px;font-size:10.5px;color:var(--muted);text-decoration:none}
  .checkin-resp-cta b{color:var(--text);font-weight:700}
  .checkin-trocar{display:block;margin-top:9px;font-size:10.5px;color:var(--muted);background:none;border:none;text-decoration:underline;cursor:pointer;font-family:inherit;padding:0}

  /* ─── faixa slim "Preencher diário de hoje" ─── */
  .faixa-diario{display:flex;align-items:center;gap:12px;background:var(--card);border:1px solid var(--branco-a10);border-radius:14px;padding:13px 16px;margin:12px 0 6px}
  .fd-txt{flex:1}
  .fd-k{font-size:11px;font-weight:800;letter-spacing:.5px;color:var(--muted);text-transform:uppercase}
  .fd-v{font-size:14px;font-weight:700;color:var(--text)}
  .fd-go{background:var(--laranja);color:var(--branco);border:none;border-radius:10px;padding:10px 16px;font-weight:800;font-size:13px;cursor:pointer;font-family:inherit;white-space:nowrap;text-decoration:none;transition:background .2s}
  .fd-go:hover{background:var(--laranja-hover)}

  /* ─── Nota complementar do "Como você está hoje?" nas 3 orientações
     (Amanda/Malu/Larissa) — nunca substitui a mensagem da fase, só
     acrescenta embaixo. Monocromático, igual o resto da varredura. ─── */
  .nota-hoje{margin-top:9px;padding-top:9px;border-top:1px dashed var(--branco-a15)}
  .nota-hoje-tag{display:inline-block;font-size:8px;font-weight:800;letter-spacing:1px;text-transform:uppercase;color:var(--laranja);background:var(--laranja-a10);border:1px solid var(--border-orange);border-radius:20px;padding:2px 8px;margin-bottom:5px}
  .nota-hoje-txt{font-size:11.5px;color:var(--text);line-height:1.5}

  /* ─── chips de filtro + fileiras de treino (mesmas linhas da Biblioteca) ─── */
  .home-chips{display:flex;gap:8px;overflow-x:auto;padding:2px 4px 12px;scrollbar-width:none}
  .home-chips::-webkit-scrollbar{display:none}
  .home-chips .chip{flex:0 0 auto;background:var(--card);border:1px solid var(--branco-a10);color:var(--muted);border-radius:100px;padding:9px 16px;font-size:13px;font-weight:700;cursor:pointer;white-space:nowrap;font-family:inherit}
  .home-chips .chip.on{background:var(--branco);border-color:var(--branco);color:var(--c-0f1b2d)}
  .fileira .fh{display:flex;align-items:center;font-size:15px;font-weight:800;color:var(--text);margin:14px 4px 8px}
  .fileira .ver{margin-left:auto;font-size:13px;font-weight:700;color:var(--laranja);background:none;border:none;cursor:pointer;font-family:inherit;padding:0}
  .trilho{display:flex;gap:12px;overflow-x:auto;padding:2px 4px 10px}
  .trilho::-webkit-scrollbar{height:6px}
  .trilho::-webkit-scrollbar-thumb{background:var(--branco-a10);border-radius:10px}
  .capacard{position:relative;flex:0 0 auto;width:150px;aspect-ratio:2/3;border-radius:14px;overflow:hidden;cursor:pointer;background:var(--card);border:1px solid var(--branco-a10);transition:transform .15s;padding:0}
  .capacard:hover{transform:translateY(-4px)}
  .capacard img{width:100%;height:100%;object-fit:cover;display:block}
  .capacard .semcapa{position:absolute;inset:0;background:var(--navy);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:14px;text-align:center}
  .capacard .semcapa .nm{font-size:13px;font-weight:800;text-transform:uppercase;color:var(--text)}
  .capacard .cont{position:absolute;left:7px;bottom:7px;background:var(--preto-a70);color:var(--branco);font-size:10px;font-weight:700;padding:3px 8px;border-radius:6px}
  .capacard .breve{position:absolute;top:7px;right:7px;background:var(--branco);color:var(--c-0f1b2d);font-size:9px;font-weight:800;padding:3px 7px;border-radius:6px;text-transform:uppercase}
  .capacard.indisp img,.capacard.indisp .semcapa{opacity:.55}
  .capacard.indisp{cursor:default}

  /* ─── Bottom Navigation ─── */
  .bottom-nav { position:fixed; bottom:0; left:0; right:0; background:var(--branco-a97); backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px); border-top:1px solid var(--border); display:flex; align-items:center; justify-content:space-around; padding:10px 0 max(12px,env(safe-area-inset-bottom)); z-index:1000; }
  .bn-item { display:flex; flex-direction:column; align-items:center; gap:3px; text-decoration:none; color:var(--preto-a35); flex:1; padding:4px 8px; transition:color 0.2s; }
  .bn-item.active { color:var(--c-f07c00); }
  .bn-item:hover { color:var(--preto-a70); }
  .bn-icon { font-size:20px; line-height:1; }
  .bn-label { font-size:9px; font-weight:700; letter-spacing:1px; text-transform:uppercase; }
  html.embedded .bottom-nav { display:none !important; }

  /* ─── CALENDÁRIO DE CONSTÂNCIA ─── */
  .cal-stats{display:grid;grid-template-columns:1fr auto 1fr auto 1fr;align-items:center;background:var(--branco-a04);border:1px solid var(--branco-a20);border-radius:12px;padding:12px 8px;margin-bottom:14px}
  .cs-item{text-align:center}
  .cs-n{font-size:18px;font-weight:900;color:var(--text);display:block;line-height:1}
  .cs-l{font-size:9px;color:var(--muted);text-transform:uppercase;letter-spacing:0.5px;margin-top:3px;line-height:1.3}
  .cs-sep{width:1px;height:32px;background:var(--border)}
  .cal-nav-wrap{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
  .cal-nav-btn{width:28px;height:28px;background:var(--card2);border:1px solid var(--border);border-radius:8px;color:var(--muted);font-size:14px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all 0.2s;padding:0}
  .cal-nav-btn:hover:not(:disabled){border-color:var(--branco-a35);color:var(--text)}
  .cal-nav-btn:disabled{opacity:0.25;cursor:not-allowed}
  .cal-title-txt{font-size:13px;font-weight:700;color:var(--text)}
  .cal-wds{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;margin-bottom:4px}
  .cal-wds div{text-align:center;font-size:9px;font-weight:700;color:var(--muted);text-transform:uppercase;padding:2px 0}
  .cal-grid-real{display:grid;grid-template-columns:repeat(7,1fr);gap:3px}
  .cd{aspect-ratio:1;border-radius:6px;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:600;color:var(--muted2);position:relative}
  .cd-empty{aspect-ratio:1}
  .cd-feito{background:var(--c-2e9e5b-a12);color:var(--verde);font-weight:700}
  .cd-feito::after{content:'';position:absolute;bottom:3px;width:4px;height:4px;border-radius:50%;background:var(--verde)}
  .cd-hoje{border:1.5px solid var(--text);color:var(--text);font-weight:800}
  .cd-hoje.cd-feito{background:var(--branco-a15);color:var(--text)}
  .cd-hoje.cd-feito::after{background:var(--text)}
  .cd-futuro{opacity:0.18}
  .cal-leg{display:flex;gap:14px;margin-top:12px;padding-top:10px;border-top:1px solid var(--border)}
  .cl-item{display:flex;align-items:center;gap:5px;font-size:10px;color:var(--muted)}
  .cl-dot{width:8px;height:8px;border-radius:50%}
  .cl-verde{background:var(--verde)}
  .cl-hoje{background:var(--text)}
  

/* ═══ Gamificação — card de engajamento (secundário ao treino) ═══ */
.gm-card { background: var(--branco-a06); border: 1px solid var(--branco-a10); border-radius: 18px; padding: 20px 22px; margin-bottom: 12px; }
.gm-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 16px; }
.gm-lbl { font-size: 11px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--text); }
.gm-count { font-size: 11px; color: var(--texto-suave); font-weight: 600; }

.gm-nivel { margin-bottom: 16px; }
.gm-niv-top { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.gm-niv-ic { font-size: 28px; line-height: 1; color: var(--text); display: inline-flex; }
.gm-niv-nm { font-size: 15px; font-weight: 800; color: var(--text); }
.gm-niv-pt { font-size: 12px; color: var(--texto-suave); }
.gm-bar { height: 8px; background: var(--branco-a10); border-radius: 100px; overflow: hidden; }
.gm-bar-fill { height: 100%; background: var(--text); border-radius: 100px; transition: width .6s ease; }
.gm-niv-next { font-size: 11.5px; color: var(--texto-suave); margin-top: 7px; }
.gm-niv-next b { color: var(--text); }

.gm-streak { font-size: 13px; color: var(--text); background: var(--branco-a06); border: 1px solid var(--branco-a10); border-radius: 12px; padding: 12px 14px; margin-bottom: 16px; line-height: 1.5; }
.gm-streak b { color: var(--text); }
.gm-streak.alerta { background: var(--branco-a08); border-color: var(--branco-a20); }
.gm-streak.ok { background: var(--c-2e9e5b-a10); border-color: var(--c-2e9e5b-a20); }

.gm-badges { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 16px; }
.gm-badge { display: flex; flex-direction: column; align-items: center; gap: 5px; text-align: center; padding: 12px 5px; border-radius: 12px; border: 1px solid var(--branco-a10); }
.gm-badge.on { background: var(--branco-a08); border-color: var(--branco-a20); }
.gm-badge.off { opacity: .38; }
.gm-b-ic { font-size: 22px; line-height: 1; display: inline-flex; }
.gm-badge.on .gm-b-ic { color: var(--text); }
.gm-b-nm { font-size: 9.5px; font-weight: 600; color: var(--text); line-height: 1.2; }

.gm-desafio { border-top: 1px solid var(--branco-a10); padding-top: 14px; }
.gm-des-top { display: flex; justify-content: space-between; font-size: 12.5px; font-weight: 700; color: var(--text); margin-bottom: 8px; }
.gm-des-n { color: var(--text); }
.gm-des-msg { font-size: 11.5px; color: var(--texto-suave); margin-top: 7px; }

/* Toast de conquista desbloqueada */
.gm-toast { position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 9999; display: flex; align-items: center; gap: 12px; max-width: 420px; margin: 0 auto; background: var(--card); border: 1px solid var(--branco-a20); border-radius: 14px; padding: 14px 16px; box-shadow: 0 12px 40px var(--preto-a35); transform: translateY(150%); transition: transform .4s cubic-bezier(.2,.8,.2,1); }
.gm-toast.show { transform: none; }
.gm-toast-ic { font-size: 30px; line-height: 1; }
.gm-toast-t { font-size: 10px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; color: var(--text); }
.gm-toast-n { font-size: 15px; font-weight: 800; color: var(--text); }

@media (max-width: 420px) { .gm-badges { grid-template-columns: repeat(4, 1fr); } .gm-b-nm { font-size: 9px; } }

/* Faixa da Semana (Início) */
.semana-card { background: var(--superficie); border: 1px solid var(--border); border-radius: 16px; padding: 14px; margin-bottom: 16px; }
.semana-strip { display: flex; gap: 6px; }
.sem-dia { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.sem-dia .sem-l { font-size: 10px; font-weight: 800; color: var(--muted); letter-spacing: .5px; }
.sem-dia .sem-n { width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 800; }
.sem-dia.feito .sem-n { background: var(--branco); color: var(--c-0f1b2d); }
.sem-dia.hoje .sem-n { background: transparent; color: var(--text); border: 2px solid var(--text); }
.sem-dia.reg .sem-n { background: var(--branco-a15); color: var(--text); }
.sem-dia.perdido .sem-n { background: var(--branco-a05); color: var(--muted); border: 1px solid var(--border); }
.sem-dia.futuro .sem-n { background: transparent; color: var(--muted); border: 1px dashed var(--border); }
.semana-legenda { display: flex; gap: 14px; justify-content: center; margin-top: 12px; font-size: 10px; color: var(--muted); }
.semana-legenda i.lg { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 4px; vertical-align: middle; }
.semana-legenda i.feito { background: var(--branco); border: 1px solid var(--border); }
.semana-legenda i.hoje { background: transparent; border: 1.5px solid var(--text); }
.semana-legenda i.reg { background: var(--branco-a15); }

/* Grade de 90 dias + marcos (Meu Painel) */
.const90 { background: var(--superficie); border: 1px solid var(--border); border-radius: 16px; padding: 16px; margin-bottom: 16px; }
.const90 .titulo { font-size: 13px; font-weight: 800; margin-bottom: 12px; }
.grid90 { display: flex; gap: 3px; overflow-x: auto; padding-bottom: 4px; }
.grid90 .g-col { display: flex; flex-direction: column; gap: 3px; }
.g-cell { width: 11px; height: 11px; border-radius: 3px; background: var(--branco-a05); flex: 0 0 auto; }
.g-cell.g-on { background: var(--verde); }
.g-cell.g-fut { background: transparent; }
.grid-legenda { display: flex; justify-content: flex-end; align-items: center; gap: 6px; margin-top: 8px; font-size: 10px; color: var(--muted); }
.marcos { display: flex; gap: 10px; overflow-x: auto; margin-top: 12px; padding-bottom: 4px; }
.marco { flex: 0 0 auto; text-align: center; opacity: .4; }
.marco.on { opacity: 1; }
.marco .ic { width: 42px; height: 42px; border-radius: 12px; background: var(--card2); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; font-size: 20px; }
.marco.on .ic { border-color: var(--text); background: var(--branco-a15); }
.marco .d { font-size: 10px; font-weight: 800; color: var(--muted); margin-top: 5px; }
.marco.on .d { color: var(--text); }
.marco-prox { font-size: 12px; color: var(--muted); text-align: center; margin-top: 10px; }
.marco-prox b { color: var(--text); }

/* Compartilhar evolução na Comunidade (gamificação) */
.gm-share { width: 100%; margin-top: 14px; background: var(--laranja); color: var(--branco); border: none; border-radius: 12px; padding: 13px; font-family: inherit; font-size: 14px; font-weight: 800; cursor: pointer; }
.gm-share:disabled { opacity: .7; cursor: default; }

/* ─── 23/07: fundo "mesh" premium + cards em vidro — SÓ NO TEMA ESCURO
   (pedido do Gabriel: "azul cintilante", não navy chapado). Tema claro
   fica intocado — glass/mesh não fazem sentido sobre fundo branco. ─── */
:root[data-tema="escuro"] body { background: var(--ink); position: relative; }
:root[data-tema="escuro"] body::before {
  content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(ellipse 70% 120% at 15% 60%, var(--mesh-azul-a50) 0%, transparent 55%),
    radial-gradient(ellipse 50% 80% at 85% 20%, var(--mesh-azulp-a40) 0%, transparent 50%),
    radial-gradient(ellipse 40% 60% at 50% 110%, var(--laranja-a07) 0%, transparent 50%),
    radial-gradient(ellipse 30% 40% at 90% 80%, var(--mesh-azulc-a15) 0%, transparent 50%);
  animation: meshFloat 16s ease-in-out infinite alternate;
}
@keyframes meshFloat { 0% { transform: translate(0,0) scale(1); } 100% { transform: translate(-1.5%,1.5%) scale(1.03); } }
:root[data-tema="escuro"] .hero4,
:root[data-tema="escuro"] .checkin-card,
:root[data-tema="escuro"] .checkin-accordion,
:root[data-tema="escuro"] .card,
:root[data-tema="escuro"] .gm-card {
  background: var(--glass) !important;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-color: var(--glass-b) !important;
}