body{padding-bottom:150px}
.topbar{display:flex;align-items:center;gap:12px;padding:20px 0 4px}
.back{display:inline-flex;align-items:center;gap:6px;text-decoration:none;font-weight:700;font-size:.9rem;
  background:var(--card);border:2.5px solid var(--line);border-radius:999px;padding:7px 14px 7px 11px;box-shadow:3px 3px 0 var(--shadow);
  transition:transform .13s ease,box-shadow .13s ease}
.back:hover,.back:focus-visible{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--shadow)}
.topbar .who{margin-left:auto;display:flex;align-items:center;gap:8px;font-family:"Caveat Brush","Nunito",cursive;font-size:1.15rem;color:var(--ink-soft)}
.topbar .who img{width:38px;height:38px;border-radius:50%;border:2.5px solid var(--line);object-fit:cover}
.page-title{margin-top:16px}
.page-title h1{font-size:clamp(2.1rem,9vw,2.8rem)}
.page-title p{color:var(--ink-soft);margin-top:8px;max-width:40ch}

.builder{padding:20px 18px 22px;margin-top:22px}
.step{margin-bottom:22px}
.step:last-child{margin-bottom:0}
.step-label{font-family:"Gluten","Nunito",system-ui,sans-serif;font-weight:700;font-size:1.02rem;display:flex;align-items:baseline;gap:8px;margin-bottom:10px}
.step-num{font-family:"Caveat Brush","Nunito",cursive;font-size:1.25rem;color:var(--clay);font-weight:400}
.chips{display:flex;flex-wrap:wrap;gap:9px}
.chip{border:2.5px solid var(--line);background:var(--paper);color:var(--ink);border-radius:999px;padding:8px 15px;cursor:pointer;
  font-weight:700;font-size:.94rem;box-shadow:3px 3px 0 var(--shadow);transition:transform .13s ease,box-shadow .13s ease,background .13s ease}
.chip .pz{font-weight:600;opacity:.62;font-size:.86em;font-variant-numeric:tabular-nums}
.chip:hover{transform:translate(1px,1px);box-shadow:2px 2px 0 var(--shadow)}
.chip[aria-pressed="true"]{background:var(--salmon);color:#38222B;transform:translate(3px,3px);box-shadow:0 0 0 var(--shadow)}
.chip[aria-pressed="true"] .pz{opacity:.75}

/* preview ao vivo com exemplo real da Anne */
.preview{display:flex;gap:14px;align-items:center;padding:12px;margin-bottom:22px;background:var(--peach);
  border:2.5px solid var(--line);border-radius:16px;box-shadow:4px 4px 0 var(--shadow)}
.preview .ph{flex:0 0 118px;height:132px;border:2.5px solid var(--line);border-radius:12px;overflow:hidden;background:var(--card)}
.preview .ph img{width:100%;height:100%;object-fit:cover;object-position:top center;transition:opacity .2s ease}
.preview .cap{font-size:.85rem;line-height:1.45;color:var(--ink-soft)}
.preview .cap b{display:block;font-family:"Gluten","Nunito",system-ui,sans-serif;font-size:1.02rem;color:var(--ink);margin-bottom:3px}
.preview .cap .tag{font-family:"Caveat Brush","Nunito",cursive;font-size:1rem;color:var(--clay);display:block;margin-top:5px}

.stepper{display:flex;align-items:center;gap:12px}
.stepper button{width:42px;height:42px;border-radius:12px;border:2.5px solid var(--line);background:var(--peach);cursor:pointer;
  font-family:"Gluten","Nunito",system-ui,sans-serif;font-weight:800;font-size:1.35rem;line-height:1;box-shadow:3px 3px 0 var(--shadow);
  transition:transform .13s ease,box-shadow .13s ease}
.stepper button:active{transform:translate(3px,3px);box-shadow:0 0 0 var(--shadow)}
.stepper button:disabled{opacity:.38;cursor:not-allowed}
.stepper output{font-family:"Gluten","Nunito",system-ui,sans-serif;font-weight:800;font-size:1.5rem;min-width:2ch;text-align:center;font-variant-numeric:tabular-nums}

.switch{display:flex;align-items:flex-start;gap:12px;cursor:pointer;padding:12px 14px;border:2.5px dashed var(--line);border-radius:14px;background:var(--paper)}
.switch input{appearance:none;flex:0 0 24px;width:24px;height:24px;margin:2px 0 0;border:2.5px solid var(--line);border-radius:7px;
  background:var(--card);cursor:pointer;position:relative}
.switch input:checked{background:var(--clay)}
.switch input:checked::after{content:"";position:absolute;inset:3px 4px 5px 4px;border:0 solid var(--on-clay);border-width:0 0 3px 3px;transform:rotate(-45deg)}
.switch .sw-t{font-weight:700;font-size:.96rem;line-height:1.3}
.switch .sw-d{font-size:.83rem;color:var(--ink-soft);line-height:1.4;margin-top:2px}

/* ===== abas personagem / cenário ===== */
.tabs{display:flex;gap:10px;margin-bottom:18px}
.tab{flex:1;min-height:44px;border:2.5px solid var(--line);background:var(--paper);color:var(--ink);border-radius:14px;
  padding:12px 10px;cursor:pointer;font-family:"Gluten","Nunito",system-ui,sans-serif;font-weight:800;font-size:.98rem;
  box-shadow:3px 3px 0 var(--shadow);transition:transform .13s ease,box-shadow .13s ease,background .13s ease}
.tab:hover,.tab:focus-visible{transform:translate(1px,1px);box-shadow:2px 2px 0 var(--shadow)}
.tab[aria-selected="true"]{background:var(--salmon);color:#38222B;transform:translate(3px,3px);box-shadow:0 0 0 var(--shadow)}

/* ===== cartões de categoria de cenário ===== */
.cenario-cards{display:flex;flex-direction:column;gap:10px}
.cenario-card{display:flex;align-items:center;gap:12px;width:100%;text-align:left;border:2.5px solid var(--line);background:var(--paper);color:var(--ink);
  border-radius:14px;padding:10px 14px;cursor:pointer;box-shadow:3px 3px 0 var(--shadow);
  transition:transform .13s ease,box-shadow .13s ease,background .13s ease}
.cenario-card:hover,.cenario-card:focus-visible{transform:translate(1px,1px);box-shadow:2px 2px 0 var(--shadow)}
.cenario-card[aria-pressed="true"]{background:var(--salmon);color:#38222B;transform:translate(3px,3px);box-shadow:0 0 0 var(--shadow)}
.cenario-card-img{flex:0 0 60px;width:60px;height:60px;border-radius:10px;border:2.5px solid var(--line);object-fit:cover;background:var(--card)}
.cenario-card .txt{flex:1;min-width:0}
.cenario-card .nome{display:block;font-family:"Gluten","Nunito",system-ui,sans-serif;font-weight:800;font-size:1rem}
.cenario-card .desc{display:block;font-size:.85rem;opacity:.85;margin-top:2px}
.cenario-card .faixa{display:block;font-size:.85rem;font-weight:700;margin-top:6px;font-variant-numeric:tabular-nums}

/* ===== prévia de preço do rascunho, antes de adicionar ao pedido ===== */
.draft-preco{margin:14px 0 0;font-size:.92rem;font-weight:700;color:var(--clay);text-align:right;font-variant-numeric:tabular-nums}

/* ===== lista do pedido ===== */
.pedido{padding:20px 18px 22px;margin-top:22px}
.vazio{font-family:"Caveat Brush","Nunito",cursive;font-size:1.1rem;color:var(--ink-soft);text-align:center;padding:10px 0}
.lista-itens{display:flex;flex-direction:column;gap:12px}
.item-pedido{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:12px;border:2.5px dashed var(--line);border-radius:14px;background:var(--paper)}
.item-pedido .info{flex:1;min-width:160px}
.item-pedido .desc{display:block;font-weight:700;font-size:.94rem}
.item-pedido .valor{display:block;font-size:.86rem;color:var(--ink-soft);margin-top:2px;font-variant-numeric:tabular-nums}
.item-pedido .acoes{display:flex;align-items:center;gap:8px}
.item-remover{flex:0 0 auto;width:44px;height:44px;border-radius:12px;border:2.5px solid var(--line);background:var(--card);cursor:pointer;
  font-size:1.2rem;line-height:1;color:var(--clay);box-shadow:3px 3px 0 var(--shadow);transition:transform .13s ease,box-shadow .13s ease}
.item-remover:hover,.item-remover:focus-visible{transform:translate(1px,1px);box-shadow:2px 2px 0 var(--shadow)}
.item-remover:active{transform:translate(3px,3px);box-shadow:0 0 0 var(--shadow)}

.desconto-aviso{margin:16px 0;padding:10px 14px;background:var(--peach);border:2.5px solid var(--line);border-radius:14px;
  font-size:.88rem;font-weight:700;text-align:center;box-shadow:3px 3px 0 var(--shadow)}

.cta[aria-disabled="true"]{opacity:.45;pointer-events:none}

.receipt{margin-top:20px;border-top:2.5px dashed var(--line);padding-top:14px;display:flex;flex-direction:column;gap:6px;font-size:.93rem}
.receipt .row{display:flex;justify-content:space-between;gap:12px;align-items:baseline}
.receipt .row span:last-child{font-variant-numeric:tabular-nums;font-weight:700;white-space:nowrap}
.receipt .row.muted{color:var(--ink-soft);font-size:.86rem}
.receipt .row.muted span:last-child{font-weight:600}

.bar{position:fixed;left:0;right:0;bottom:0;z-index:40;background:var(--card);border-top:3px solid var(--line);padding:12px 18px calc(12px + env(safe-area-inset-bottom))}
.bar-in{max-width:var(--maxw);margin:0 auto;display:flex;align-items:center;gap:14px}
.bar .tot-l{font-family:"Caveat Brush","Nunito",cursive;font-size:1.05rem;color:var(--ink-soft);line-height:1}
.bar .tot-v{font-family:"Gluten","Nunito",system-ui,sans-serif;font-weight:800;font-size:1.85rem;line-height:1.1;font-variant-numeric:tabular-nums}
.bar .tot-v.consulta{font-size:1.15rem;max-width:11ch;line-height:1.15}
.cta{margin-left:auto;display:inline-flex;align-items:center;justify-content:center;gap:8px;background:var(--clay);color:var(--on-clay);
  border:2.5px solid var(--line);border-radius:14px;padding:12px 18px;font-family:"Gluten","Nunito",system-ui,sans-serif;font-weight:800;font-size:1rem;
  cursor:pointer;text-decoration:none;box-shadow:4px 4px 0 var(--shadow);transition:transform .13s ease,box-shadow .13s ease;text-align:center;line-height:1.15}
.cta:hover,.cta:focus-visible{transform:translate(2px,2px);box-shadow:2px 2px 0 var(--shadow)}
.cta.alt{background:var(--mint);color:#38222B}
.cta-row{display:flex;gap:10px;margin-top:16px}
.cta-row .cta{margin-left:0;flex:1}

/* tabelas originais */
.sheets{display:flex;gap:12px;overflow-x:auto;padding:4px 2px 14px;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch}
.sheets button{flex:0 0 76%;scroll-snap-align:center;padding:0;border:2.5px solid var(--line);border-radius:14px;overflow:hidden;
  background:var(--card);box-shadow:4px 4px 0 var(--shadow);cursor:zoom-in}
.sheets img{width:100%;height:auto}
.sheets-hint{font-family:"Caveat Brush","Nunito",cursive;font-size:1.05rem;color:var(--ink-soft);text-align:center;margin-top:-4px}

details{border:2.5px solid var(--line);border-radius:14px;background:var(--card);box-shadow:4px 4px 0 var(--shadow);margin-bottom:12px;overflow:hidden}
summary{cursor:pointer;padding:13px 16px;font-family:"Gluten","Nunito",system-ui,sans-serif;font-weight:700;font-size:1rem;
  list-style:none;display:flex;align-items:center;gap:10px}
summary::-webkit-details-marker{display:none}
summary::before{content:"+";font-size:1.4rem;line-height:1;color:var(--clay);flex:0 0 auto;transition:transform .2s ease}
details[open] summary::before{transform:rotate(45deg)}
details .body{padding:0 16px 15px;font-size:.94rem;color:var(--ink-soft);line-height:1.55}
details .body strong{color:var(--ink)}

@media (max-width:400px){
  .bar-in{gap:10px}
  .cta{padding:11px 13px;font-size:.92rem}
  .preview .ph{flex:0 0 96px;height:112px}
  .item-pedido{justify-content:space-between}
  .item-pedido .acoes{width:100%;justify-content:space-between}
}