:root{
  --orange:#ff570c; --orange-d:#e04711; --orange-tint:#fff0e9; --orange-line:#fadfd1;
  --ink:#141110; --ink-2:#3a332c; --body:#6b645c; --apoio:#948c82;
  --paper:#faf8f5; --card:#fff; --line:#ebe6df; --line-2:#f3efe9; --verde:#12a150;
  --r-lg:22px; --r-md:14px; --r-sm:10px;
  --sh-sm:0 1px 2px rgba(20,17,16,.04),0 8px 20px -14px rgba(20,17,16,.16);
  --sh-md:0 2px 4px rgba(20,17,16,.05),0 18px 40px -24px rgba(20,17,16,.22);
  --sh-lg:0 3px 6px rgba(20,17,16,.06),0 30px 60px -28px rgba(20,17,16,.28);
  --ease:cubic-bezier(.22,.61,.36,1);
}
*{box-sizing:border-box;margin:0}
html,body{background:var(--paper);color:var(--ink);font:500 15px/1.45 "Plus Jakarta Sans",system-ui,sans-serif;-webkit-font-smoothing:antialiased}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
img{display:block;max-width:100%}
[hidden]{display:none!important}

.app{max-width:480px;margin:0 auto;min-height:100dvh;padding:0 18px 40px}
.topo{position:sticky;top:0;z-index:5;display:flex;align-items:center;gap:10px;height:64px;background:rgba(250,248,245,.92);backdrop-filter:blur(10px);margin:0 -18px 6px;padding:0 18px;border-bottom:1px solid var(--line-2)}
.topo-logo{height:30px;width:auto}
.voltar{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;background:var(--card);box-shadow:var(--sh-sm);margin-left:-4px}
.creditos-pill{margin-left:auto;background:var(--orange-tint);color:var(--orange-d);border:1px solid var(--orange-line);border-radius:999px;padding:5px 12px;font-size:13px;font-weight:600}
.creditos-pill b{font-weight:800}

.tela{display:none;padding-top:14px}
.tela.ativa{display:block}
.tela.ativa > *{animation:sobe .45s var(--ease) both}
.tela.ativa > *:nth-child(2){animation-delay:.05s}
.tela.ativa > *:nth-child(3){animation-delay:.1s}
.tela.ativa > *:nth-child(4){animation-delay:.15s}
.tela.ativa > *:nth-child(5){animation-delay:.2s}
@keyframes sobe{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.tela[data-tela="entrar"].ativa > *{animation:none}

.titulo{font:800 22px/1.15 "Bricolage Grotesque",sans-serif;letter-spacing:-.02em;text-align:center;margin:6px 0 6px}
.apoio{color:var(--body);font-size:14px;text-align:center;margin-bottom:18px}
.cartao{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh-md)}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:52px;padding:0 22px;border-radius:var(--r-md);background:var(--orange);color:#fff;font-weight:700;font-size:15px;box-shadow:0 10px 24px -12px rgba(255,87,12,.7);transition:transform .15s var(--ease),background .15s}
.btn:active{transform:scale(.98)}
.btn:disabled{background:#e8ded4;color:#a39a90;box-shadow:none;cursor:not-allowed}
.btn-sm{height:38px;padding:0 14px;font-size:13px;border-radius:12px}
.btn-full{width:100%;margin-top:12px}
.btn-claro{background:var(--card);color:var(--ink);border:1px solid var(--line);box-shadow:var(--sh-sm)}
.link{color:var(--orange-d);font-weight:700;font-size:14px}
.link-centro{display:block;margin:18px auto 0}

/* Entrar */
.entrar{min-height:100dvh;display:flex;flex-direction:column;justify-content:center;padding:30px 0}
.entrar-logo{width:180px;margin:0 auto 18px}
.selo{align-self:center;background:var(--ink);color:#fff;font-weight:700;font-size:12px;letter-spacing:.06em;text-transform:uppercase;border-radius:999px;padding:5px 12px;margin-bottom:10px}
.vitrine{display:flex;align-items:center;justify-content:center;gap:12px;margin:4px 0 22px}
.vitrine img{width:128px;height:128px;object-fit:cover;border-radius:18px;box-shadow:var(--sh-lg);border:4px solid #fff}
.vitrine img.arte{object-fit:contain;background:#fff}
.seta{font-size:22px;color:var(--orange);font-weight:800}
.form{padding:18px;display:flex;flex-direction:column;gap:10px}
.form label{font-size:13px;font-weight:700;color:var(--ink-2)}
.form input{height:50px;border:1px solid var(--line);border-radius:var(--r-md);padding:0 14px;font:inherit;background:var(--paper)}
.form input:focus{outline:2px solid var(--orange);outline-offset:-1px;background:#fff}

/* Início */
.saldo{padding:18px 18px 16px;margin-bottom:14px;background:linear-gradient(140deg,#fff 0%,#fff6f0 100%)}
.saldo-num{font:800 52px/1 "Bricolage Grotesque",sans-serif;color:var(--orange);letter-spacing:-.03em}
.saldo-txt{color:var(--body);font-size:14px;margin-top:4px}
.saldo-barra{height:8px;background:var(--line-2);border-radius:99px;margin-top:14px;overflow:hidden}
.saldo-barra span{display:block;height:100%;background:var(--orange);border-radius:99px;transition:width .4s var(--ease)}
.criar{width:100%;text-align:left;display:grid;grid-template-columns:auto 1fr;gap:14px;padding:16px;align-items:center}
.criar .btn{grid-column:1 / -1;width:100%}
.criar-fotos{display:flex}
.criar-fotos img{width:58px;height:58px;border-radius:14px;object-fit:cover;border:3px solid #fff;box-shadow:var(--sh-sm)}
.criar-fotos img.arte{object-fit:contain;background:#fff;margin-left:-14px}
.criar-txt strong{display:block;font-size:16px;font-weight:800}
.criar-txt span{color:var(--body);font-size:13px}
.secao-topo{display:flex;align-items:baseline;justify-content:space-between;margin:24px 0 10px}
.secao-topo h2{font:800 17px "Bricolage Grotesque",sans-serif}
.grade{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.item{background:#fff;border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden;box-shadow:var(--sh-sm);text-align:left}
.item img{aspect-ratio:1;object-fit:contain;width:100%;background:#fff}
.item span{display:block;font-size:11px;font-weight:700;color:var(--ink-2);padding:6px 8px;border-top:1px solid var(--line-2)}
.vazio{border:1.5px dashed var(--line);border-radius:var(--r-lg);padding:22px;text-align:center;color:var(--apoio);font-size:13px}

/* Material */
.materiais{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.material{background:#fff;border:1.5px solid var(--line);border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--sh-sm);text-align:left;transition:border-color .15s,transform .15s var(--ease)}
.material:active{transform:scale(.98)}
.material.sel{border-color:var(--orange);box-shadow:0 0 0 3px var(--orange-tint),var(--sh-md)}
.material img{aspect-ratio:1;object-fit:cover;width:100%;background:var(--line-2)}
.material div{padding:10px 12px 12px;border-top:1px solid var(--line-2)}
.material strong{display:block;font-size:15px;font-weight:800}
.material span{font-size:12px;color:var(--body)}

/* Foto */
.envio{display:block;cursor:pointer;overflow:hidden;min-height:220px;border-style:dashed;border-width:1.5px}
.envio-vazio{min-height:220px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;color:var(--orange)}
.envio-vazio strong{color:var(--ink);font-size:16px}
.envio-vazio span{color:var(--apoio);font-size:13px}
#previa-foto{width:100%;max-height:340px;object-fit:contain;background:var(--line-2)}
.dicas{list-style:none;padding:0;margin:14px 0;display:grid;gap:8px}
.dicas li{position:relative;padding-left:26px;font-size:13px;color:var(--body)}
.dicas li::before{content:"";position:absolute;left:4px;top:4px;width:12px;height:12px;border-radius:50%;background:var(--orange)}
.dicas b{color:var(--ink)}
.tamanho{padding:14px 16px}
.tamanho-topo{display:flex;justify-content:space-between;align-items:baseline;font-size:13px;font-weight:700;color:var(--ink-2);margin-bottom:10px}
.tamanho-topo b{color:var(--orange-d);font-size:16px}
.tamanho-topo small{color:var(--apoio);font-weight:600}
.chips{display:flex;gap:8px}
.chip{flex:1;height:40px;border-radius:12px;border:1px solid var(--line);background:var(--paper);font-weight:700;font-size:14px}
.chip.sel{background:var(--ink);color:#fff;border-color:var(--ink)}

/* Gerando */
.gerando{min-height:70dvh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}
#gerando-foto{width:150px;height:150px;object-fit:cover;border-radius:24px;border:4px solid #fff;box-shadow:var(--sh-lg);margin-bottom:18px}
.passos{list-style:none;padding:0;margin:10px 0 16px;display:grid;gap:10px;text-align:left;width:100%;max-width:290px}
.passos li{display:flex;align-items:center;gap:10px;font-weight:600;color:var(--apoio)}
.passos li::before{content:"";width:22px;height:22px;border-radius:50%;border:2px solid var(--line);flex:none}
.passos li.fazendo{color:var(--ink)}
.passos li.fazendo::before{border-color:var(--orange);border-right-color:transparent;animation:gira .8s linear infinite}
.passos li.feito{color:var(--ink)}
.passos li.feito::before{background:var(--verde) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5 9-10'/%3E%3C/svg%3E") center/13px no-repeat;border-color:var(--verde)}
@keyframes gira{to{transform:rotate(360deg)}}

/* Resultado */
.aviso-demo{background:#fdf4e3;border:1px solid #f3dcae;color:#8a5a06;border-radius:var(--r-md);padding:10px 12px;font-size:12.5px;margin-bottom:12px}
.abas{display:flex;background:var(--line-2);border-radius:14px;padding:4px;margin-bottom:12px}
.aba{flex:1;height:38px;border-radius:11px;font-weight:700;font-size:14px;color:var(--body)}
.aba.ativa{background:#fff;color:var(--ink);box-shadow:var(--sh-sm)}
.quadro{padding:12px;overflow:hidden}
.quadro img,.vetor{width:100%;aspect-ratio:1;object-fit:contain;background:#fff}
.vetor{background-color:#fff;background-image:linear-gradient(45deg,#f6f2ec 25%,transparent 25%),linear-gradient(-45deg,#f6f2ec 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#f6f2ec 75%),linear-gradient(-45deg,transparent 75%,#f6f2ec 75%);background-size:18px 18px;background-position:0 0,0 9px,9px -9px,-9px 0;border-radius:12px;display:grid;place-items:center}
.vetor svg{width:100%;height:100%}
.ficha{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:12px 0}
.ficha div{background:#fff;border:1px solid var(--line);border-radius:var(--r-md);padding:10px;text-align:center}
.ficha b{display:block;font:800 16px "Bricolage Grotesque",sans-serif}
.ficha span{font-size:11px;color:var(--apoio);font-weight:600}

/* Sem crédito */
.pacote{display:flex;justify-content:space-between;align-items:center;padding:16px 18px;width:100%;margin-top:6px}
.pacote b{display:block;font-size:17px;font-weight:800;text-align:left}
.pacote span{font-size:12px;color:var(--apoio)}
.preco{font:800 28px "Bricolage Grotesque",sans-serif;color:var(--orange)}

.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);background:var(--ink);color:#fff;padding:12px 16px;border-radius:12px;font-size:14px;font-weight:600;box-shadow:var(--sh-lg);max-width:90vw;z-index:20}