:root{
  --escuro:#101318;--escuro2:#181C23;--linha-e:#232933;--linha-e2:#3A4250;--texto-e:#F4F3EF;--sub-e:#9AA1AD;
  --claro:#F5F5F0;--card:#FFFFFF;--linha:#E2E2DA;--linha2:#D4D4CC;--texto:#14181F;--sub:#5B6170;
  --laranja:#EA6A2B;--laranja-esc:#C2410C;--laranja-txt:#9A3412;--laranja-bg:#FBE7DC;
  --t-display:'Barlow Condensed',sans-serif;--t-titulo:'Inter Tight',Inter,sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--escuro);font-family:Inter,system-ui,sans-serif;-webkit-font-smoothing:antialiased}
button,input,textarea{font-family:inherit}
#app{min-height:100dvh;max-width:480px;margin:0 auto;display:flex;flex-direction:column}
:focus-visible{outline:2px solid var(--laranja);outline-offset:2px}
a{color:var(--laranja-esc)}

.tela{flex:1;display:flex;flex-direction:column;min-height:100dvh;padding:calc(env(safe-area-inset-top) + 28px) 22px calc(env(safe-area-inset-bottom) + 24px)}
.escura{background:var(--escuro);color:var(--texto-e)}
.clara{background:var(--claro);color:var(--texto)}
.com-nav{padding-bottom:calc(env(safe-area-inset-bottom) + 96px)}

@keyframes entra{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.entra{animation:entra .38s cubic-bezier(.2,.7,.2,1) both}

/* Botões */
.btn{height:56px;border-radius:14px;border:none;font-size:16px;font-weight:600;display:flex;align-items:center;justify-content:center;gap:8px;cursor:pointer;text-decoration:none;width:100%;transition:transform .12s, background .2s, opacity .2s}
.btn:active{transform:scale(.98)}
.btn-laranja{background:var(--laranja);color:#101318}
.clara .btn-laranja{background:var(--laranja-esc);color:#fff}
.btn-contorno{background:transparent;color:var(--texto-e);border:1px solid #4A5262}
.btn-escuro{background:var(--texto);color:#fff}
.btn:disabled{background:var(--linha-e);color:#8A919D;cursor:not-allowed}
.btn-redondo{width:44px;height:44px;border-radius:22px;border:1px solid var(--linha-e);background:transparent;color:inherit;display:flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0}
.clara .btn-redondo{border-color:var(--linha);background:var(--card)}
.link-btn{background:none;border:none;color:var(--sub-e);font-size:14px;padding:12px;cursor:pointer;text-decoration:underline}

/* Login */
.marca{display:flex;align-items:center;gap:10px}
.marca-ic{width:40px;height:40px;border-radius:10px;background:var(--laranja-esc);display:flex;align-items:center;justify-content:center}
.marca span{font-family:var(--t-display);font-weight:700;font-size:26px;letter-spacing:1px}
.hero{margin-top:56px;display:flex;flex-direction:column;gap:12px}
.hero h1{margin:0;font-family:var(--t-display);font-weight:700;font-size:52px;line-height:.95;text-transform:uppercase}
.hero p{margin:0;font-size:16px;line-height:1.5;color:#C9CDD6}
.form{display:flex;flex-direction:column;gap:14px;margin-top:auto;padding-top:32px}
.campo{display:flex;flex-direction:column;gap:6px;font-size:13px;font-weight:500;color:#C9CDD6}
.campo input{height:52px;border-radius:12px;border:1px solid #343B48;background:#1D232D;color:#fff;padding:0 16px;font-size:16px}
.erro{background:#3A1D14;color:#FDBA8C;border-radius:10px;padding:12px 14px;font-size:14px}
.abas{display:grid;grid-template-columns:1fr 1fr;background:#1D232D;border-radius:12px;padding:4px;gap:4px}
.abas button{height:44px;border:none;border-radius:9px;background:transparent;color:var(--sub-e);font-weight:600;font-size:15px;cursor:pointer}
.abas button[aria-pressed="true"]{background:var(--texto-e);color:var(--escuro)}

/* Questionário */
.q-topo{display:flex;flex-direction:column;gap:18px}
.q-linha{display:flex;align-items:center;justify-content:space-between;min-height:44px}
.q-cont{font-size:13px;font-weight:500;color:var(--sub-e);letter-spacing:.4px}
.q-barra{display:grid;grid-template-columns:repeat(9,minmax(0,1fr));gap:5px}
.q-barra div{height:3px;border-radius:2px;background:#2A313C;transition:background .3s}
.q-barra .feito{background:var(--laranja)}
.q-barra .atual{background:var(--texto-e)}
.q-corpo{flex:1;display:flex;flex-direction:column;gap:24px;padding:32px 0 24px}
.olho{font-size:12px;font-weight:600;color:var(--laranja);letter-spacing:1.6px;text-transform:uppercase}
.q-titulo{margin:0;font-family:var(--t-titulo);font-weight:600;font-size:clamp(28px,8.5vw,36px);line-height:1.1;letter-spacing:-.8px}
.q-sub{margin:0;font-size:14px;line-height:1.5;color:var(--sub-e)}
.q-input{height:64px;border:none;border-bottom:2px solid var(--linha-e2);background:transparent;color:var(--texto-e);font-family:var(--t-titulo);font-size:28px;font-weight:500;padding:0;width:100%}
.q-input:focus{outline:none;border-bottom-color:var(--laranja)}
.opcoes{display:flex;flex-direction:column;gap:10px}
.opcao{display:flex;align-items:center;gap:14px;min-height:64px;padding:12px 18px;border-radius:14px;cursor:pointer;color:var(--texto-e);background:var(--escuro2);border:1.5px solid var(--linha-e);text-align:left;transition:all .18s;width:100%}
.opcao[aria-pressed="true"]{background:#241A14;border-color:var(--laranja)}
.opcao .t{display:flex;flex-direction:column;gap:2px;flex:1}
.opcao .t b{font-size:17px;font-weight:600}
.opcao .t small{font-size:13px;color:var(--sub-e)}
.opcao .dot{width:20px;height:20px;border-radius:10px;border:1.5px solid #4A5262;flex-shrink:0}
.opcao[aria-pressed="true"] .dot{border:6px solid var(--laranja);background:var(--escuro)}
.grade2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.opcao-box{flex-direction:column;align-items:flex-start;gap:6px;min-height:108px}
.opcao-box b{font-family:var(--t-display);font-weight:700;font-size:48px;line-height:1}
.opcao-box small{font-size:13px;color:var(--sub-e)}
.numero{display:flex;flex-direction:column;align-items:center;gap:28px;padding-top:24px}
.numero .valor{display:flex;align-items:baseline;gap:8px}
.numero .valor b{font-family:var(--t-display);font-weight:700;font-size:112px;line-height:.9}
.numero .valor span{font-size:20px;font-weight:500;color:var(--sub-e)}
.numero .botoes{display:flex;gap:16px}
.numero .botoes button{width:64px;height:64px;border-radius:32px;border:1px solid #2A313C;background:var(--escuro2);color:var(--texto-e);cursor:pointer;display:flex;align-items:center;justify-content:center}
.numero small{font-size:13px;color:var(--sub-e)}
.numero input[type=range]{width:100%;accent-color:var(--laranja)}
.chips{display:flex;flex-wrap:wrap;gap:10px}
.chip{min-height:48px;padding:0 20px;border-radius:24px;cursor:pointer;font-size:15px;font-weight:500;background:transparent;color:var(--texto-e);border:1.5px solid var(--linha-e2);transition:all .18s}
.chip[aria-pressed="true"]{background:var(--texto-e);color:var(--escuro);border-color:var(--texto-e)}
.ok-ic{width:56px;height:56px;border-radius:28px;background:var(--laranja);display:flex;align-items:center;justify-content:center}
.resumo{display:flex;flex-direction:column;border-top:1px solid var(--linha-e)}
.resumo div{display:flex;justify-content:space-between;gap:16px;padding:13px 0;border-bottom:1px solid var(--linha-e);font-size:15px}
.resumo span{color:var(--sub-e)}
.resumo b{font-weight:600;text-align:right}

/* Telas claras */
.cab{display:flex;align-items:center;justify-content:space-between;gap:12px}
.cab-data{display:flex;flex-direction:column;gap:2px}
.cab-data small{font-size:14px;color:var(--sub)}
.cab-data b{font-family:var(--t-display);font-weight:700;font-size:32px;text-transform:uppercase;line-height:1.05}
.avatar{width:48px;height:48px;border-radius:24px;background:var(--texto);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:600;border:none;cursor:pointer;font-size:15px}
.pilha{display:flex;flex-direction:column;gap:20px}
.cartao-escuro{background:var(--texto);color:#fff;border-radius:18px;padding:20px;display:flex;flex-direction:column;gap:14px}
.cartao{background:var(--card);border:1px solid var(--linha);border-radius:18px;padding:20px;display:flex;flex-direction:column;gap:16px}
.rotulo{font-size:13px;font-weight:600;text-transform:uppercase;letter-spacing:.8px;color:#C9CDD6}
.rotulo-l{font-size:13px;font-weight:600;text-transform:uppercase;letter-spacing:.8px;color:var(--laranja-esc)}
.grande{font-family:var(--t-display);font-weight:700;font-size:44px;line-height:1;text-transform:uppercase}
.medio{font-family:var(--t-display);font-weight:700;font-size:30px;line-height:1.05;text-transform:uppercase}
.barra{height:8px;border-radius:4px;background:#343B48;overflow:hidden}
.barra div{height:8px;background:var(--laranja)}
.h2{margin:0;font-size:15px;font-weight:600}
.seg{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.seg button{min-height:46px;border-radius:10px;font-weight:600;font-size:13px;cursor:pointer;background:var(--card);color:var(--texto);border:1px solid var(--linha2)}
.seg button[aria-pressed="true"]{background:var(--texto);color:#fff;border-color:var(--texto)}
.semana{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px}
.semana div{height:58px;border-radius:10px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;background:var(--card);color:var(--sub);border:1px solid var(--linha);font-size:12px;font-weight:600}
.semana .feito{background:var(--texto);color:#fff;border-color:var(--texto)}
.semana .hoje{background:var(--laranja-bg);color:var(--laranja-txt);border:2px solid var(--laranja-esc)}
.tags{display:flex;flex-wrap:wrap;gap:8px}
.tag{font-size:13px;font-weight:500;background:var(--laranja-bg);color:var(--laranja-txt);border-radius:999px;padding:6px 12px}
.meta{display:flex;gap:18px;font-size:14px;color:var(--sub);flex-wrap:wrap}
.aviso{background:#FFF4E5;border:1px solid #F5D3A8;color:#7A3E0B;border-radius:12px;padding:12px 14px;font-size:13px;line-height:1.45}

.nav{position:fixed;left:0;right:0;bottom:0;max-width:480px;margin:0 auto;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));background:var(--card);border-top:1px solid var(--linha);padding:8px 8px calc(env(safe-area-inset-bottom) + 12px);z-index:5}
.nav button{min-height:52px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;font-size:12px;font-weight:500;color:var(--sub);background:none;border:none;cursor:pointer}
.nav button[aria-current="page"]{color:var(--laranja-esc);font-weight:600}

/* Treino */
.bloco{display:flex;flex-direction:column;gap:10px}
.bloco-cab{display:flex;align-items:center;gap:10px}
.bloco-cab .n{width:28px;height:28px;border-radius:14px;background:var(--texto);color:#fff;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:600}
.bloco-cab h2{margin:0;font-size:16px;font-weight:600;flex:1}
.bloco-cab small{font-size:13px;color:var(--sub)}
.lista{background:var(--card);border:1px solid var(--linha);border-radius:14px;overflow:hidden}
.item{display:flex;align-items:center;gap:12px;padding:12px 14px;border-bottom:1px solid #EFEFE8;width:100%;background:none;border-left:none;border-right:none;border-top:none;text-align:left;cursor:pointer;color:inherit}
.item:last-child{border-bottom:none}
.item img{width:56px;height:56px;border-radius:10px;object-fit:cover;background:#F0EEE6;flex-shrink:0}
.item .t{display:flex;flex-direction:column;gap:3px;flex:1;min-width:0}
.item .t b{font-size:15px;font-weight:600;line-height:1.25}
.item .t small{font-size:12px;font-weight:500;color:var(--laranja-txt)}
.item .dose{font-size:14px;font-weight:600;white-space:nowrap}
.item .feito-ic{width:22px;height:22px;border-radius:11px;background:var(--texto);color:#fff;display:flex;align-items:center;justify-content:center;font-size:12px}
.selo{font-size:10px;font-weight:700;letter-spacing:.6px;border-radius:5px;padding:2px 6px;background:#F0EEE6;color:var(--sub);align-self:flex-start}

/* Execução */
.prog{height:6px;border-radius:3px;background:var(--linha);overflow:hidden}
.prog div{height:6px;background:var(--laranja-esc);transition:width .3s}
.demo{position:relative;border-radius:16px;overflow:hidden;background:#fff;border:1px solid var(--linha);aspect-ratio:3/2}
.demo img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.demo .b{animation:alterna 2.4s steps(1) infinite}
@keyframes alterna{0%{opacity:0}50%{opacity:1}}
.demo .legenda{position:absolute;left:10px;bottom:10px;font-size:11px;font-weight:600;background:rgba(20,24,31,.75);color:#fff;border-radius:6px;padding:4px 8px}
.tabela{background:var(--card);border:1px solid var(--linha);border-radius:14px;overflow:hidden}
.linha-s{display:grid;grid-template-columns:48px minmax(0,1fr) minmax(0,1fr) 52px;gap:8px;align-items:center;padding:10px 14px;border-bottom:1px solid #EFEFE8}
.linha-s:last-child{border-bottom:none}
.linha-s.cab-s{font-size:12px;font-weight:600;color:var(--sub);padding:10px 14px}
.linha-s input{height:44px;border-radius:8px;border:1px solid var(--linha2);padding:0 10px;font-size:16px;min-width:0;width:100%;background:#fff;color:var(--texto)}
.linha-s .check{width:44px;height:44px;justify-self:center;border-radius:10px;font-size:18px;font-weight:700;cursor:pointer;background:#fff;color:#8A909C;border:1px solid var(--linha2)}
.linha-s .check[aria-pressed="true"]{background:var(--texto);color:#fff;border-color:var(--texto)}
.linha-s.ok{background:#FAFAF6}
.descanso{display:flex;align-items:center;gap:12px;background:var(--texto);color:#fff;border-radius:14px;padding:14px 16px}
.descanso b{font-family:var(--t-display);font-weight:700;font-size:36px;line-height:1}
.descanso .f{flex:1;display:flex;flex-direction:column}
.descanso button{height:44px;padding:0 14px;border-radius:10px;font-weight:600;font-size:14px;cursor:pointer}
.descanso .c{border:1px solid #4A5262;background:transparent;color:#fff}
.descanso .p{border:none;background:#fff;color:var(--texto)}
.dupla{display:grid;grid-template-columns:1fr 1fr;gap:10px}

/* Histórico */
.kpis{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.kpi{background:var(--card);border:1px solid var(--linha);border-radius:14px;padding:14px;display:flex;flex-direction:column;gap:2px}
.kpi b{font-family:var(--t-display);font-weight:700;font-size:32px;line-height:1}
.kpi small{font-size:12px;color:var(--sub)}
.rolagem{display:flex;gap:8px;overflow-x:auto;padding-bottom:4px}
.rolagem button{font-size:13px;font-weight:500;background:#F0EEE6;color:var(--texto);border-radius:999px;padding:8px 12px;white-space:nowrap;border:none;cursor:pointer}
.rolagem button[aria-pressed="true"]{background:var(--texto);color:#fff;font-weight:600}
.grafico{display:flex;align-items:flex-end;gap:8px;height:170px;border-bottom:1px solid var(--linha2)}
.grafico .col{flex:1;display:flex;flex-direction:column;align-items:center;gap:6px;justify-content:flex-end;height:100%}
.grafico .col span{font-size:12px;font-weight:600}
.grafico .col div{width:100%;max-width:44px;border-radius:6px 6px 0 0;background:var(--texto)}
.grafico .col:last-child div{background:var(--laranja-esc)}
.datas{display:flex;gap:8px}
.datas span{flex:1;font-size:11px;color:var(--sub);text-align:center}
.vazio{color:var(--sub);font-size:14px;line-height:1.5;text-align:center;padding:24px 8px}
.sub{color:var(--sub);font-size:14px;margin:0;line-height:1.5}
.credito{font-size:11px;color:var(--sub);text-align:center;margin-top:8px}
.credito a{color:var(--sub)}

/* ---------- Tela inicial ---------- */
.inicio-acoes{display:flex;flex-direction:column;gap:12px;margin-top:auto;padding-top:32px}
.selos{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px}
.selos span{font-size:12px;font-weight:500;color:#C9CDD6;border:1px solid #2A313C;border-radius:999px;padding:6px 12px}
.btn-social{background:#fff;color:#1F1F1F;border:1px solid #DADCE0}
.btn-social[disabled]{background:#1D232D;color:#8A919D;border-color:#2A313C;cursor:not-allowed}
.btn-social .em-breve{font-size:11px;font-weight:600;background:#2A313C;color:#C9CDD6;border-radius:6px;padding:2px 6px;margin-left:6px}
.ou{display:flex;align-items:center;gap:12px;color:var(--sub-e);font-size:13px}
.ou::before,.ou::after{content:"";flex:1;height:1px;background:#2A313C}
#google-btn{display:flex;justify-content:center;min-height:44px}

/* ---------- Chat ---------- */
.chat{height:100dvh;display:flex;flex-direction:column;background:var(--escuro);color:var(--texto-e)}
.chat-topo{display:flex;align-items:center;gap:12px;padding:calc(env(safe-area-inset-top) + 14px) 16px 12px;border-bottom:1px solid #1D232D;background:rgba(16,19,24,.92);backdrop-filter:blur(10px)}
.coach-av{width:40px;height:40px;border-radius:20px;background:var(--laranja-esc);display:flex;align-items:center;justify-content:center;color:#fff;flex-shrink:0}
.chat-topo .info{flex:1;display:flex;flex-direction:column;gap:1px}
.chat-topo b{font-size:15px;font-weight:600}
.chat-topo small{font-size:12px;color:#7FD49B}
.chat-prog{height:3px;background:#1D232D}
.chat-prog div{height:3px;background:var(--laranja);transition:width .4s}
.mensagens{flex:1;overflow-y:auto;padding:20px 16px 12px;display:flex;flex-direction:column;gap:10px}
.msg{max-width:84%;padding:12px 15px;border-radius:18px;font-size:15.5px;line-height:1.45;white-space:pre-line}
.msg.novo,.resumo-card.novo{animation:entra .3s cubic-bezier(.2,.7,.2,1) both}
.msg.coach{align-self:flex-start;background:#1A1F27;border:1px solid #232933;border-bottom-left-radius:6px}
.msg.eu{align-self:flex-end;background:var(--laranja);color:#101318;font-weight:500;border-bottom-right-radius:6px}
.msg.eu button{all:unset;cursor:pointer}
.msg small.porque{display:block;margin-top:6px;font-size:13px;color:var(--sub-e)}
.digitando{align-self:flex-start;background:#1A1F27;border:1px solid #232933;border-radius:18px;border-bottom-left-radius:6px;padding:14px 16px;display:flex;gap:5px}
.digitando i{width:7px;height:7px;border-radius:4px;background:#8A919D;animation:pula 1s infinite}
.digitando i:nth-child(2){animation-delay:.15s}.digitando i:nth-child(3){animation-delay:.3s}
@keyframes pula{0%,60%,100%{transform:translateY(0);opacity:.5}30%{transform:translateY(-4px);opacity:1}}
.resumo-card{align-self:stretch;background:#1A1F27;border:1px solid #232933;border-radius:16px;padding:6px 16px}
.resumo-card div{display:flex;justify-content:space-between;gap:12px;padding:10px 0;border-bottom:1px solid #232933;font-size:14px}
.resumo-card div:last-child{border-bottom:none}
.resumo-card span{color:var(--sub-e)}
.resumo-card b{text-align:right;font-weight:600}

.compositor{flex-shrink:0;padding:12px 16px calc(env(safe-area-inset-bottom) + 14px);border-top:1px solid #1D232D;background:#12161C;display:flex;flex-direction:column;gap:10px}
.compositor .linha{display:flex;gap:8px;align-items:center}
.compositor input[type=text],.compositor input[type=email],.compositor input[type=password],.compositor input[type=date]{flex:1;height:50px;border-radius:25px;border:1px solid #2A313C;background:#1A1F27;color:#fff;padding:0 18px;font-size:16px;min-width:0;color-scheme:dark}
.compositor input:focus{outline:none;border-color:var(--laranja)}
.enviar{width:50px;height:50px;border-radius:25px;border:none;background:var(--laranja);color:#101318;display:flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0}
.enviar:disabled{background:#2A313C;color:#8A919D;cursor:not-allowed}
.respostas{display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-end}
.resp{min-height:46px;padding:10px 16px;border-radius:23px;border:1.5px solid var(--laranja);background:transparent;color:var(--texto-e);font-size:15px;font-weight:500;cursor:pointer;text-align:left;transition:all .15s}
.resp:hover{background:#241A14}
.resp small{display:block;font-size:12px;color:var(--sub-e);font-weight:400}
.resp[aria-pressed="true"]{background:var(--laranja);color:#101318}
.resp[aria-pressed="true"] small{color:#3A1D0C}
.respostas.coluna{flex-direction:column;align-items:stretch}
.respostas.coluna .resp{border-radius:14px}
.num-chat{display:flex;align-items:center;gap:14px;justify-content:center}
.num-chat b{font-family:var(--t-display);font-weight:700;font-size:56px;line-height:1;min-width:120px;text-align:center}
.num-chat span{font-size:16px;color:var(--sub-e)}
.num-chat button{width:52px;height:52px;border-radius:26px;border:1px solid #2A313C;background:#1A1F27;color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center}
.compositor input[type=range]{width:100%;accent-color:var(--laranja)}
.desfazer{background:none;border:none;color:var(--sub-e);font-size:13px;cursor:pointer;padding:6px;align-self:center;text-decoration:underline}
.erro-chat{background:#3A1D14;color:#FDBA8C;border-radius:12px;padding:10px 14px;font-size:14px}

/* Dicas de saúde no Início */
.dicas{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.dica{background:var(--card);border:1px solid var(--linha);border-radius:14px;padding:14px;display:flex;flex-direction:column;gap:4px}
.dica b{font-family:var(--t-display);font-weight:700;font-size:28px;line-height:1}
.dica small{font-size:12px;color:var(--sub);line-height:1.4}
.dica .rot{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.6px;color:var(--laranja-esc)}

.compositor form[data-form=cadastro] input{flex:none}