:root{
  --fundo:#F7F2E7; --cartao:#FFFDF8; --tinta:#15181A; --muted:#6B6F76;
  --linha:#E5DCC8; --acento:#15181A; --ok:#1F7A4D; --ok-bg:#E4F3EA;
  --erro:#B23A2E; --erro-bg:#FBE9E6; --aviso:#8A5A00; --aviso-bg:#FFF3D6;
  --raio:14px; --sombra:0 1px 2px rgba(21,24,26,.05), 0 8px 24px rgba(21,24,26,.06);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--fundo); color:var(--tinta);
  font-family:"Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
  font-size:16px; line-height:1.45; -webkit-font-smoothing:antialiased;
  padding-bottom:calc(92px + env(safe-area-inset-bottom));
}
h1{font-size:1.15rem; margin:.15rem 0 .35rem}
p{margin:.4rem 0}
.muted{color:var(--muted)}
small{font-size:.8rem}
.centro{text-align:center}
[hidden]{display:none !important}

.topo{
  position:sticky; top:0; z-index:10; display:flex; align-items:center; justify-content:space-between;
  gap:12px; padding:12px 16px; background:rgba(247,242,231,.92); backdrop-filter:blur(8px);
  border-bottom:1px solid var(--linha);
}
.marca{display:flex; align-items:center; gap:10px}
.logo{
  display:grid; place-items:center; width:38px; height:38px; border-radius:11px;
  background:var(--acento); color:#fff; font-weight:800; letter-spacing:.5px; font-size:.9rem;
}
.marca strong{display:block; font-size:.98rem; line-height:1.1}
.marca small{display:block; color:var(--muted); font-size:.72rem}
.btn-ghost{color:var(--muted); text-decoration:none; font-size:.82rem; border:1px solid var(--linha);
  padding:7px 11px; border-radius:999px; background:#fff}

main{max-width:720px; margin:0 auto; padding:16px 14px 8px}
.cartao{
  background:var(--cartao); border:1px solid var(--linha); border-radius:var(--raio);
  box-shadow:var(--sombra); padding:16px; margin-bottom:14px;
}
.destaque{background:linear-gradient(180deg,#FFFDF8,#FBF7EC)}
.rotulo{font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); margin:0}
.emoji{font-size:2.2rem; line-height:1}
.selo{display:inline-block; margin-top:8px; padding:6px 12px; border-radius:999px; background:var(--ok-bg); color:var(--ok); font-size:.82rem; font-weight:600}
.aviso{background:var(--aviso-bg); border-color:#F0DFB0; color:var(--aviso)}
.resumo{display:flex; gap:8px; flex-wrap:wrap; margin-top:10px}
.resumo span{background:#F1EAD8; border-radius:999px; padding:4px 10px; font-size:.76rem; color:#4A4738}

.produtos{display:grid; gap:12px}
.prod{background:var(--cartao); border:1px solid var(--linha); border-radius:var(--raio); box-shadow:var(--sombra); overflow:hidden}
.prod-top{display:flex; gap:12px; align-items:center; padding:12px 14px; border-bottom:1px solid var(--linha)}
.prod-top img,.prod-top .sem-foto{
  width:54px; height:54px; border-radius:11px; object-fit:cover; background:#F1EAD8; flex:0 0 auto;
  display:grid; place-items:center; color:var(--muted); font-size:1.25rem;
}
.prod-top b{display:block; font-size:.95rem; line-height:1.25}
.prod-top small{display:block; color:var(--muted)}

table{width:100%; border-collapse:collapse}
th,td{padding:9px 12px; text-align:left; font-size:.86rem}
thead th{font-size:.7rem; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); font-weight:600; background:#FCF8EE}
tbody tr + tr td{border-top:1px solid #F0EADB}
td.num,th.num{text-align:right}
.badge{display:inline-block; min-width:26px; text-align:center; padding:2px 7px; border-radius:999px; font-size:.74rem; font-weight:700}
.badge.igual{background:#F1EAD8; color:#7A7461}
.badge.mais{background:var(--ok-bg); color:var(--ok)}
.badge.menos{background:var(--erro-bg); color:var(--erro)}

input[type=number]{
  width:82px; padding:8px 10px; border:1px solid var(--linha); border-radius:9px; background:#fff;
  font:inherit; font-size:.92rem; text-align:right; color:var(--tinta);
}
input[type=number]:focus{outline:2px solid #C9BE9E; outline-offset:1px}
input[type=number].alterado{border-color:#C9BE9E; background:#FFFDF2}

.barra{
  position:fixed; left:0; right:0; bottom:0; z-index:20; display:flex; align-items:center; gap:12px;
  padding:12px 14px calc(12px + env(safe-area-inset-bottom)); background:rgba(255,253,248,.96);
  border-top:1px solid var(--linha); backdrop-filter:blur(10px);
}
.barra-info{flex:1; min-width:0}
.barra-info span{display:block; font-size:.85rem; font-weight:600}
.barra-info small{display:block; color:var(--muted); font-size:.72rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.btn{
  appearance:none; border:0; border-radius:11px; background:var(--acento); color:#fff; font:inherit;
  font-weight:600; font-size:.9rem; padding:12px 18px; cursor:pointer; white-space:nowrap;
}
.btn:disabled{opacity:.5; cursor:not-allowed}
.btn-outline{background:#fff; color:var(--tinta); border:1px solid var(--linha)}
.spinner{
  width:26px; height:26px; margin:0 auto 10px; border-radius:50%;
  border:3px solid #E7DFCE; border-top-color:var(--acento); animation:girar .9s linear infinite;
}
@keyframes girar{to{transform:rotate(360deg)}}

@media (max-width:420px){
  main{padding:12px 10px 6px}
  .cartao{padding:14px}
  th,td{padding:8px 9px}
  input[type=number]{width:70px}
  .btn{padding:11px 14px; font-size:.85rem}
}