*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{background:var(--fundo-mesa);color:var(--tinta);font:400 var(--tam-corpo)/1.42 var(--f-x);-webkit-font-smoothing:antialiased;overscroll-behavior:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:transform var(--d-toque) var(--saida),background 160ms,opacity 160ms}
button:active{transform:scale(.97)}
button:disabled{cursor:default;opacity:.4}
input{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--floresta-funda);outline-offset:3px}
::selection{background:var(--sol);color:var(--tinta)}
h1,h2,h3{font-family:var(--f-t);font-weight:600;letter-spacing:-.02em;line-height:1.08;color:var(--floresta)}
svg.i{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
[hidden]{display:none!important}
.so-leitor{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.app{position:relative;width:100%;max-width:480px;height:100vh;height:100dvh;margin:0 auto;background:var(--menta);overflow:hidden;isolation:isolate}
@media (min-width:700px){.app{box-shadow:0 0 0 1px #b5cbbd,0 30px 60px -30px #1f493d80}}

.tela{position:absolute;inset:0;display:none;flex-direction:column;background:var(--menta);padding-top:env(safe-area-inset-top)}
.tela.on{display:flex;animation:entra var(--d-entrada) var(--saida)}
@keyframes entra{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.tela.com-abas{padding-bottom:calc(var(--abas) + env(safe-area-inset-bottom))}
.rola{flex:1;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;scrollbar-width:none;min-height:0}
.rola::-webkit-scrollbar{display:none}

.topo{display:flex;align-items:center;gap:10px;padding:14px var(--margem) 6px;min-height:60px}
.topo h1{font-size:32px}
.marca{font:700 22px var(--f-t);color:var(--floresta);letter-spacing:-.03em}
.marca b{color:var(--damasco)}
.avatar{width:44px;height:44px;border-radius:50%;background:var(--sol);display:grid;place-items:center;font:700 19px var(--f-t);color:var(--sol-tinta);margin-left:auto;flex-shrink:0}
.chip{display:inline-flex;align-items:center;gap:6px;min-height:var(--toque);padding:0 14px;border-radius:var(--r-o);font:600 var(--tam-rotulo) var(--f-x)}
.chip-claro{background:var(--branco);color:var(--floresta);box-shadow:inset 0 0 0 1.5px var(--linha)}
.redondo{width:48px;height:48px;border-radius:50%;background:#ffffffe6;color:var(--floresta);display:grid;place-items:center;box-shadow:var(--papel-1);flex-shrink:0}

.btn{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;min-height:var(--botao);border-radius:var(--r-m);background:var(--marca);color:#fff;font:600 var(--tam-acao) var(--f-t);letter-spacing:-.01em;text-decoration:none;padding:0 16px;text-align:center}
.btn:hover{background:var(--marca-press)}
.btn-escuro{background:var(--floresta-funda)}
.btn-escuro:hover{background:var(--floresta)}
.btn-sol{background:var(--sol);color:var(--sol-tinta)}
.btn-sol:hover{background:var(--sol-press)}
.btn-claro{background:var(--branco);color:var(--floresta);box-shadow:inset 0 0 0 1.5px var(--linha)}
.btn-claro:hover{background:var(--papel)}
.link{display:flex;align-items:center;justify-content:center;width:100%;min-height:48px;font:600 19px var(--f-x);color:var(--floresta);text-decoration:underline;text-underline-offset:5px}
.barra{padding:12px var(--margem) calc(14px + env(safe-area-inset-bottom))}
.com-abas .barra{padding-bottom:14px}
.empurra{margin-top:auto}

.abas{position:absolute;left:0;right:0;bottom:0;height:calc(var(--abas) + env(safe-area-inset-bottom));background:var(--branco);display:flex;padding:6px 6px calc(14px + env(safe-area-inset-bottom));box-shadow:0 -1px 0 var(--linha);z-index:20}
.abas button{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;font:600 16px var(--f-x);color:var(--tinta-suave);border-radius:14px}
.abas button[aria-current=page]{color:var(--floresta)}
.abas .pil{display:grid;place-items:center;width:56px;height:30px;border-radius:999px}
.abas button[aria-current=page] .pil{background:var(--menta)}

.veu{position:absolute;inset:0;background:#1f493d66;z-index:40;opacity:0;pointer-events:none;transition:opacity var(--d-entrada)}
.veu.on{opacity:1;pointer-events:auto}
.folha{position:absolute;left:0;right:0;bottom:0;background:var(--branco);border-radius:var(--r-m) var(--r-m) 0 0;padding:10px var(--margem) calc(22px + env(safe-area-inset-bottom));z-index:41;transform:translateY(calc(100% + 40px));visibility:hidden;transition:transform 260ms var(--saida),visibility 0s 260ms;box-shadow:var(--sombra-folha);max-height:88%;overflow-y:auto}
.folha.on{transform:none;visibility:visible;transition:transform 260ms var(--saida)}
.folha .puxa{width:44px;height:5px;border-radius:9px;background:var(--linha);margin:0 auto 14px}
.folha h3{font-size:22px;display:flex;gap:10px;align-items:center;margin-bottom:8px}
.folha .texto{font-size:19px;line-height:1.4;margin-bottom:16px}
.folha .botoes{display:flex;flex-direction:column;gap:6px}

.toast{position:absolute;left:var(--margem);right:var(--margem);top:calc(16px + env(safe-area-inset-top));z-index:60;background:var(--floresta-funda);color:#fff;border-radius:var(--r-m);padding:14px 16px;font:600 var(--tam-rotulo) var(--f-x);transform:translateY(calc(-100% - 60px));visibility:hidden;transition:transform 260ms var(--saida),visibility 0s 260ms}
.toast.on{transform:none;visibility:visible;transition:transform 260ms var(--saida)}

.fig{--c:var(--damasco);position:relative;display:grid;place-items:center;width:52px;height:52px;border-radius:50%;background:var(--c);color:#fff;box-shadow:0 0 0 4px #fff,0 6px 10px -2px #322e4840;transform:rotate(var(--r,-6deg));flex-shrink:0}
.fig svg{width:52%;height:52%;stroke-width:2.2}
.fig.camada::after{content:"";position:absolute;inset:-5px;border-radius:50%;border:5px solid #fff;box-shadow:6px 6px 0 -1px var(--c);z-index:-1}
.fig.fav::before{content:"";position:absolute;right:-6px;top:-6px;width:22px;height:22px;border-radius:50%;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23D9707A'%3E%3Cpath d='M12 20s-7.5-4.6-7.5-10.2A4.2 4.2 0 0 1 12 7.2a4.2 4.2 0 0 1 7.5 2.6C19.5 15.4 12 20 12 20z'/%3E%3C/svg%3E") center/15px no-repeat;transform:rotate(calc(var(--r,-6deg) * -1))}
.fig-s{width:40px;height:40px;box-shadow:0 0 0 3px #fff,0 3px 5px -1px #322e4840}
.fig-m{width:44px;height:44px;box-shadow:0 0 0 3px #fff,0 3px 5px -1px #322e4840}
.fig-g{width:72px;height:72px}

.slot{width:40px;height:40px;border-radius:50%;border:2.5px dashed var(--linha);display:grid;place-items:center;font:700 16px var(--f-t);color:#7b8b81;flex-shrink:0}
.slot.alvo{border-color:var(--damasco);border-style:solid;animation:pulsa-s 1.4s ease-in-out infinite}
@keyframes pulsa-s{50%{transform:scale(1.12)}}
.slot.cheio{border:0}

.conta{width:30px;height:30px;border-radius:50%;background:var(--papel);box-shadow:inset 0 0 0 2px var(--linha);display:grid;place-items:center;color:#fff;flex-shrink:0}
.conta.feita{background:var(--floresta);box-shadow:none}
.conta.hoje{background:var(--sol);box-shadow:inset 0 0 0 3px var(--floresta)}
.conta svg{width:18px;height:18px}

.ph{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:70px 28px 30px;text-align:center;background:var(--papel);color:var(--tinta-suave)}
.ph .moldura{width:150px;height:150px;border-radius:50%;border:3px dashed var(--salvia);display:grid;place-items:center;color:var(--floresta)}
.ph .moldura svg{width:70px;height:70px;stroke-width:1.5}
.ph b{font:600 32px/1.15 var(--f-t);color:var(--floresta);max-width:300px}
.ph small{font:700 16px var(--f-x);letter-spacing:.08em;text-transform:uppercase;color:#9a5a40}

.cartao{background:var(--branco);border-radius:var(--r-m);box-shadow:var(--papel-1)}
.linha-card{display:flex;gap:14px;align-items:center;margin:12px var(--margem) 0;background:var(--branco);border-radius:20px;padding:14px 16px;box-shadow:var(--papel-1);text-align:left;width:calc(100% - 2 * var(--margem))}
.linha-card small{display:block;font:600 16px var(--f-x);color:var(--tinta-suave)}
.linha-card b{display:block;font:600 var(--tam-acao)/1.15 var(--f-t);color:var(--floresta)}
.linha-card.tracejado{border:2.5px dashed var(--marca);box-shadow:none;background:#ffffff99}

.recorte{position:absolute;top:-30px;width:16px;height:22px;z-index:35;border-radius:2px;pointer-events:none;animation:cai 1.1s cubic-bezier(.3,.6,.6,1) forwards}
@keyframes cai{to{transform:translate(var(--dx),720px) rotate(var(--rot));opacity:.9}}
@keyframes acende{0%{transform:scale(.6)}100%{transform:scale(1)}}

@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:1ms!important;animation-iteration-count:1!important;transition-duration:1ms!important;scroll-behavior:auto!important}.recorte{display:none}}

/* Regras da crítica U: papéis de cor, papel levantado, nada desabilitado */
.btn{box-shadow:var(--papel-1);font:var(--t-acao)}
.btn:active{transform:translateY(2px) scale(.98);box-shadow:none}
.btn[disabled]{display:none}
.btn-painel{background:var(--cor-acao-painel);color:var(--cor-acao-painel-tinta);box-shadow:0 4px 0 rgba(0,0,0,.25)}
.btn-painel:hover{background:#fff}
.link{color:var(--tinta-suave);font:var(--t-rotulo);min-height:var(--toque)}
.chip-socorro{background:var(--floresta-funda);color:#fff}
.fig{box-shadow:0 0 0 4px #fff,var(--papel-1)}
.abas button{font:var(--t-rotulo)}
.abas [aria-current=page]{font-weight:700}
.abas [aria-current=page] .pil{background:var(--salvia-clara)}
.folha{border-radius:var(--r-g) var(--r-g) 0 0}
.lembrete-ok{display:flex;gap:8px;align-items:center;justify-content:center;min-height:var(--toque);font:var(--t-rotulo);color:var(--floresta)}
