:root{
  --tinta:#1B2550;--tinta-2:#2A3770;--sol:#F5C518;--sol-claro:#FFF3C4;
  --menta:#17735A;--menta-claro:#DDF3EA;--ceu:#E9EEF7;--papel:#fff;
  --cinza:#5A6485;--linha:#D5DCEB;--borda:#78839F;
  --display:"Bricolage Grotesque",system-ui,sans-serif;--texto:"Atkinson Hyperlegible",system-ui,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
[hidden]{display:none!important}
html,body{height:100%;width:100%;overflow-x:hidden}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
/* iPhone: campos com fonte menor que 16px fazem o Safari dar zoom e "cortar" a tela */
input,textarea,select{font-size:16px!important}
svg,img{max-width:100%}
.conteudo,.cartao,.criterio>*,.passo>div,.opcao,.resp,.msg{min-width:0;overflow-wrap:anywhere}
body{font-family:var(--texto);color:var(--tinta);background:var(--ceu);font-size:16px;line-height:1.5}
button,input,textarea,select{font:inherit;color:inherit}
button{cursor:pointer;border:0;background:none;touch-action:manipulation;-webkit-tap-highlight-color:rgba(27,37,80,.12);transition:transform .12s ease,background-color .15s ease}
button:not(:disabled):active{transform:scale(.97)}
:focus-visible{outline:3px solid var(--tinta);outline-offset:2px}
.escuro :focus-visible{outline-color:var(--sol)}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}button:active{transform:none!important}}
@media (prefers-contrast:more){:root{--cinza:#3E476A;--linha:#9AA4C2;--borda:#4C5679}}

.app{width:100%;max-width:480px;margin:0 auto;min-height:100vh;min-height:100dvh;background:var(--papel);display:flex;flex-direction:column;padding-bottom:calc(84px + env(safe-area-inset-bottom));padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right)}
.tela{flex:1;display:flex;flex-direction:column}
.conteudo{flex:1;padding:24px 22px 28px}
.topo{display:flex;align-items:center;gap:12px;padding:16px 22px 4px}
.topo .titulo{font-family:var(--display);font-weight:700;font-size:17px;flex:1}
.voltar{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:var(--ceu);font-size:20px;flex:none}
.voltar:hover{background:#DCE3F1}
h1,h2{font-family:var(--display);font-weight:800;font-size:28px;line-height:1.1;letter-spacing:-.02em;margin-bottom:10px}
h3{font-family:var(--display);font-weight:700;font-size:19px;line-height:1.25;margin-bottom:6px}
p+p{margin-top:10px}
.sub{color:var(--cinza)}
.pe{padding:12px 22px 20px;display:grid;gap:10px}
.btn{display:block;width:100%;padding:15px 20px;border-radius:999px;font-weight:700;font-size:17px;text-align:center}
.btn-principal{background:var(--tinta);color:#fff}
.btn-principal:not(:disabled):hover{background:var(--tinta-2)}
.btn:disabled{opacity:.4;cursor:not-allowed}
.btn-sol{background:var(--sol);color:var(--tinta)}
.btn-leve{background:var(--ceu)}
.link{text-decoration:underline;font-weight:700;color:var(--tinta);padding:10px 0}

.escuro{background:var(--tinta);color:#fff}
.escuro .sub{color:#C5CCE6}
.marca{height:28px;width:auto;margin:28px 0 0 22px}
.campo{display:block;margin-top:16px;font-weight:700;font-size:15px}
.campo input,.campo textarea,.campo select{display:block;width:100%;margin-top:8px;border:2px solid var(--borda);border-radius:14px;padding:12px 14px;font-weight:400;background:var(--papel)}
.campo textarea{min-height:90px;resize:vertical}
.escuro .campo input{border-color:#4A5A99;background:var(--tinta-2);color:#fff}
.erro{color:#B42318;font-weight:700;margin-top:10px}
.escuro .erro{color:#FFB4A9}

.opcoes{display:grid;gap:10px;margin-top:18px}
.opcao{display:flex;align-items:center;gap:14px;text-align:left;padding:14px 16px;border-radius:16px;border:2px solid var(--borda);background:var(--papel);width:100%}
.opcao[aria-pressed="true"]{border-color:var(--tinta);background:#F4F6FC;box-shadow:inset 0 0 0 1px var(--tinta)}
.opcao strong{display:block}
.opcao small{color:var(--cinza)}
.escala{display:flex;gap:4px;margin:12px 0 4px}
.escala button{flex:1;min-height:44px;border-radius:10px;background:var(--ceu);font-weight:700}
.escala button[aria-pressed="true"]{background:var(--tinta);color:#fff}
.legenda{display:flex;justify-content:space-between;font-size:13px;color:var(--cinza)}

.cartao{border-radius:20px;padding:18px;background:var(--ceu);margin-top:14px}
.cartao.escuro{background:var(--tinta);color:#fff}
.chip{display:inline-block;font-size:13px;font-weight:700;padding:4px 10px;border-radius:8px;background:var(--sol);color:var(--tinta)}
.chip.leve{background:var(--ceu);color:var(--tinta)}
.chip.verde{background:var(--menta);color:#fff}

.saudacao{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:14px}
.hoje{background:var(--tinta);color:#fff;border-radius:24px;padding:20px}
.hoje h3{font-size:23px;margin:4px 0 6px;color:#fff}
.hoje .sub{color:#C5CCE6}
.semana{margin-top:24px}
.semana > h3{font-size:16px;color:var(--cinza)}
.no{display:flex;align-items:center;gap:14px;padding:7px 0;text-align:left;width:100%}
.bola{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;font-family:var(--display);font-weight:800;background:var(--ceu);color:var(--cinza);flex:none}
.no.feito .bola{background:var(--menta);color:#fff}
.no.atual .bola{background:var(--sol);color:var(--tinta);box-shadow:0 0 0 4px var(--sol-claro)}
.no.desafio .bola{border-radius:14px}
.no:disabled{cursor:default}
.no small{display:block;color:var(--cinza);font-size:13px}

.barras{display:flex;gap:4px;padding:14px 22px 0}
.barras i{flex:1;height:4px;border-radius:4px;background:var(--linha)}
.barras i.ok{background:var(--tinta)}
.etiqueta{font-size:14px;font-weight:700;color:var(--cinza);margin-bottom:10px}
.frase-grande{font-family:var(--display);font-weight:700;font-size:24px;line-height:1.18}
.pesquisa{border:2px solid var(--linha);border-radius:18px;padding:16px;margin-top:16px;font-size:15px}
.passo{display:grid;grid-template-columns:44px 1fr;gap:14px;padding:12px 0;border-bottom:1px solid var(--linha)}
.passo:last-child{border:0}
.passo .n{width:44px;height:44px;border-radius:14px;background:var(--sol);display:grid;place-items:center;font-family:var(--display);font-weight:800;font-size:20px}
.ad{border-radius:18px;padding:16px;margin-top:10px}
.ad.antes{background:#F6F1F1;border-left:5px solid #A86B6B}
.ad.depois{background:var(--menta-claro);border-left:5px solid var(--menta)}
.resp{text-align:left;padding:14px 16px;border-radius:16px;border:2px solid var(--borda);background:var(--papel);width:100%;margin-top:10px}
.resp.certa{border-color:var(--menta);background:var(--menta-claro)}
.resp.errada{border-color:#A86B6B;background:#F6F1F1}

.chat{flex:1;padding:14px 18px;display:flex;flex-direction:column;gap:10px;overflow-y:auto}
.msg{max-width:86%;padding:11px 15px;border-radius:18px;line-height:1.4;white-space:pre-wrap}
.msg.dele{background:var(--tinta-2);color:#E6EAF7;border-bottom-left-radius:6px}
.msg.minha{align-self:flex-end;background:var(--sol);color:var(--tinta);border-bottom-right-radius:6px}
.msg.sistema{align-self:center;background:transparent;color:#C5CCE6;font-size:14px;text-align:center}
.compositor{display:flex;gap:8px;padding:10px 14px 14px;background:var(--tinta)}
.compositor textarea{flex:1;min-height:48px;max-height:140px;border-radius:16px;border:2px solid #4A5A99;background:var(--tinta-2);color:#fff;padding:12px 14px;resize:none}
.compositor button{min-width:56px;border-radius:16px;background:var(--sol);color:var(--tinta);font-weight:700}
.digitando{display:inline-flex;gap:4px}
.digitando i{width:7px;height:7px;border-radius:50%;background:#8E9AC9;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)}30%{transform:translateY(-5px)}}

.criterio{display:grid;grid-template-columns:1fr auto;gap:4px 12px;padding:12px 0;border-bottom:1px solid var(--linha)}
.criterio small{grid-column:1/-1;color:var(--cinza);font-size:14px}
.pontos{display:flex;gap:4px;align-items:center}
.pontos i{width:14px;height:14px;border-radius:4px;background:var(--linha)}
.pontos i.on{background:var(--tinta)}
.forte{background:var(--menta-claro)}
.ajuste{background:var(--sol-claro)}
.alerta{background:#FDECEC;border-left:5px solid #B42318}
.radar{display:grid;place-items:center;margin-top:8px}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:14px}
.stat{background:var(--ceu);border-radius:16px;padding:12px;text-align:center}
.stat b{display:block;font-family:var(--display);font-size:24px}
.stat small{color:var(--cinza);font-size:13px}
.texto-livre h4{font-family:var(--display);margin-top:14px}
.texto-livre ul,.texto-livre ol{padding-left:20px;margin-top:6px}

.nav{position:fixed;left:0;right:0;bottom:0;width:100%;max-width:480px;margin:0 auto;z-index:10;display:flex;border-top:1px solid var(--linha);background:var(--papel);padding:8px 8px max(12px,env(safe-area-inset-bottom))}
.nav button{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;font-size:12px;color:var(--cinza);padding:6px 0;min-height:48px}
.nav svg{width:24px;height:24px;stroke:currentColor;fill:none;stroke-width:2}
.nav button[aria-current="true"]{color:var(--tinta);font-weight:700}
/* proteção do conteúdo */
body{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
input,textarea,select{-webkit-user-select:text;user-select:text;-webkit-touch-callout:default}
img,svg{-webkit-user-drag:none}
body.oculto .app,body.oculto .nav{filter:blur(18px)}
@media print{body{display:none!important}}

.aviso{position:fixed;left:50%;bottom:96px;transform:translateX(-50%);background:var(--tinta);color:#fff;padding:12px 18px;border-radius:14px;max-width:92%;box-shadow:0 10px 30px -10px rgba(27,37,80,.5);z-index:20}