:root{
  --brand:#C62828;--brand-dk:#9C1C1C;--verde:#10301C;--folha:#2E7D32;--creme:#FAF4E8;--creme2:#F1E6D1;--ouro:#D9B266;
  --tinta:#1D2A20;--muted:#6B6A5C;--line:rgba(29,42,32,.12);--azul:#264D80;
  --serif:"Playfair Display",Georgia,serif;--sans:Inter,system-ui,-apple-system,Segoe UI,sans-serif;--mono:"JetBrains Mono",ui-monospace,monospace;
  --safe-b:env(safe-area-inset-bottom,0px);--safe-t:env(safe-area-inset-top,0px);
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html,body,#root{height:100%}
body{font-family:var(--sans);background:#F6F2EA;color:var(--tinta);font-size:15px;-webkit-font-smoothing:antialiased;overscroll-behavior-y:none}
button{font-family:inherit;color:inherit;cursor:pointer;border:0;background:none}
input,textarea{font-family:inherit;font-size:16px;border:1.5px solid #D9D0BE;border-radius:12px;padding:11px 12px;width:100%;background:#fff;color:var(--tinta);outline:none}
input:focus{border-color:var(--folha)}

/* entrada */
.login{min-height:100%;background:var(--verde);color:#fff;display:flex;flex-direction:column;align-items:center;padding:calc(28px + var(--safe-t)) 20px 30px}
.login img{width:110px}
.login h1{font-family:var(--serif);font-size:1.6rem;margin-top:6px}
.login p{color:#B9CDBF;font-size:.9rem;margin:4px 0 20px;text-align:center}
.nomes{display:grid;grid-template-columns:1fr 1fr;gap:10px;width:100%;max-width:380px}
.nomes button{background:rgba(255,255,255,.08);border:1.5px solid rgba(255,255,255,.14);border-radius:16px;padding:16px 10px;color:#fff;text-align:center}
.nomes button b{display:block;font-size:1.05rem}
.nomes button small{color:var(--ouro);font-family:var(--mono);font-size:.8rem}
.pin{width:100%;max-width:320px;text-align:center}
.pin .quem{font-size:1.2rem;font-weight:800}
.dots{display:flex;gap:14px;justify-content:center;margin:18px 0 8px}
.dots i{width:16px;height:16px;border-radius:50%;border:2px solid var(--ouro)}
.dots i.on{background:var(--ouro)}
.pin .err{color:#FFB4A9;font-weight:700;font-size:.88rem;min-height:1.3em}
.teclado{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:12px}
.teclado button{height:66px;border-radius:50%;background:rgba(255,255,255,.1);color:#fff;font-size:1.6rem;font-weight:600;width:66px;justify-self:center}
.teclado button:active{background:rgba(255,255,255,.25)}
.teclado button.tx{background:none;font-size:.9rem;font-weight:700;color:#B9CDBF}
.voltar{margin-top:18px;color:#B9CDBF;font-weight:700;font-size:.9rem;text-decoration:underline}
.lg-foot{margin-top:auto;padding-top:24px;font-size:.72rem;color:#7FA08A}
.lg-foot b{color:#3FBF8F}

/* app */
.app{display:flex;flex-direction:column;height:100%}
.top{background:var(--verde);color:#fff;padding:calc(10px + var(--safe-t)) 16px 10px;display:flex;align-items:center;gap:10px}
.top img{height:34px}
.top .who{flex:1;line-height:1.15}
.top .who b{display:block;font-size:1rem}
.top .who small{color:var(--ouro);font-size:.72rem;font-weight:700}
.top .st{font-size:.68rem;font-weight:700;padding:5px 9px;border-radius:99px;background:rgba(255,255,255,.12)}
.top .st.off{background:var(--brand)}
.corpo{flex:1;overflow-y:auto;padding:14px 14px 20px;-webkit-overflow-scrolling:touch}
.tabs{display:grid;grid-template-columns:repeat(5,1fr);background:#fff;border-top:1px solid var(--line);padding-bottom:var(--safe-b)}
.tabs button{padding:8px 0 9px;display:flex;flex-direction:column;align-items:center;gap:2px;font-size:.68rem;font-weight:700;color:var(--muted)}
.tabs button span{font-size:1.25rem;position:relative;line-height:1.2}
.tabs button i{position:absolute;top:-3px;right:-12px;background:var(--brand);color:#fff;font-style:normal;font-size:.62rem;border-radius:99px;padding:1px 6px;animation:pls 1.2s infinite}
.tabs button.on{color:var(--brand)}
@keyframes pls{50%{transform:scale(1.15)}}

h2{font-family:var(--serif);font-size:1.35rem;line-height:1.15}
h2 small{display:block;font-family:var(--sans);font-size:.78rem;color:var(--muted);font-weight:600;margin-top:2px}
.hd{display:flex;justify-content:space-between;align-items:flex-end;gap:10px;margin-bottom:12px}
.leg{display:flex;gap:10px;font-size:.7rem;font-weight:700;color:var(--muted);flex-wrap:wrap;margin-bottom:10px}
.leg i{display:inline-block;width:11px;height:11px;border-radius:4px;margin-right:4px;vertical-align:-1px}
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.ms{border-radius:14px;padding:10px 2px 9px;display:flex;flex-direction:column;align-items:center;border:2px solid transparent;min-height:70px;justify-content:center}
.ms b{font-family:var(--serif);font-size:1.35rem;line-height:1}
.ms small{font-size:.64rem;font-weight:700;margin-top:3px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:0 3px}
.ms.l,.leg .l{background:#EEF6EC;border-color:#BFDDB9;color:#236127}
.ms.m,.leg .m{background:var(--brand);color:#fff}
.ms.o,.leg .o{background:#ECE7DD;color:#5E5A4E}
.ms.c,.leg .c{background:#F7EACB;border-color:#E8CC86;color:#7A5712}
.ms.m.c{background:#B07B14;color:#fff;border-color:#B07B14}

/* folha de baixo */
.veu{position:fixed;inset:0;background:rgba(10,24,15,.5);z-index:30;display:flex;align-items:flex-end;animation:fd .2s}
@keyframes fd{from{opacity:0}}
.folha{background:#fff;width:100%;border-radius:22px 22px 0 0;max-height:88vh;overflow-y:auto;padding:16px 16px calc(18px + var(--safe-b));animation:sobe .25s cubic-bezier(.2,.8,.2,1)}
@keyframes sobe{from{transform:translateY(40px)}}
.folha .fh{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px}
.folha .fh button{width:34px;height:34px;border-radius:50%;background:var(--creme2);font-weight:800}
.sub{color:var(--muted);font-size:.84rem;margin-bottom:10px}
.its{list-style:none;margin:8px 0}
.its li{display:flex;justify-content:space-between;gap:10px;padding:8px 0;border-bottom:1px dashed var(--line);font-size:.9rem}
.its li b{font-family:var(--mono);white-space:nowrap}
.its li small{display:block;color:var(--muted);font-size:.76rem}
.its li.cx{opacity:.45;text-decoration:line-through}
.tot{display:flex;justify-content:space-between;font-weight:800;font-size:1.1rem;padding-top:8px;border-top:2px solid var(--tinta);margin-top:4px}
.tot b{font-family:var(--mono)}
.lock{background:#F6F2EA;border-radius:12px;padding:10px 12px;font-size:.84rem;color:var(--muted);margin-top:10px}

.btn{background:var(--brand);color:#fff;font-weight:800;font-size:1rem;padding:15px 16px;border-radius:14px;width:100%;display:flex;align-items:center;justify-content:center;gap:8px}
.btn:disabled{opacity:.45}
.btn.gr{background:var(--folha)}
.btn.gh{background:#fff;color:var(--tinta);box-shadow:0 0 0 1.5px var(--line) inset}
.btn.sm{padding:10px 12px;font-size:.88rem;width:auto;border-radius:11px}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:12px}
.mt{margin-top:10px}

/* lançar */
.dest{display:flex;align-items:center;justify-content:space-between;background:var(--verde);color:#fff;border-radius:14px;padding:10px 12px;margin-bottom:12px;font-weight:700}
.dest button{color:var(--ouro);font-weight:800;font-size:.85rem}
.abas{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-bottom:12px}
.abas button{padding:11px;border-radius:12px;background:#fff;font-weight:800;box-shadow:0 0 0 1.5px var(--line) inset}
.abas button.on{background:var(--verde);color:#fff;box-shadow:none}
.lbl{font-size:.7rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin:14px 0 6px}
.op{display:flex;gap:6px;flex-wrap:wrap}
.op button{padding:10px 13px;border-radius:12px;background:#fff;font-weight:700;font-size:.9rem;box-shadow:0 0 0 1.5px var(--line) inset}
.op button.on{background:var(--brand);color:#fff;box-shadow:none}
.op.g button.on{background:var(--folha)}
.op button small{font-family:var(--mono);font-size:.76rem;opacity:.85}
.metades{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-bottom:8px}
.metades button{border:2px dashed #D9D0BE;background:var(--creme);border-radius:12px;padding:8px 10px;text-align:left}
.metades button small{display:block;font-size:.66rem;font-weight:700;color:var(--muted)}
.metades button b{font-size:.9rem}
.metades button.act{border-style:solid;border-color:var(--brand);background:#FFF5F3}
.sab{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.sab button{background:#fff;border:2px solid var(--line);border-radius:12px;padding:9px 10px;text-align:left;font-size:.88rem;line-height:1.2;position:relative}
.sab button small{display:block;font-family:var(--mono);color:var(--brand);font-weight:700;font-size:.78rem;margin-top:3px}
.sab button.on{border-color:var(--folha);background:#EEF6EC}
.sab button.esg{opacity:.4}
.sab button .tag{position:absolute;top:6px;right:6px;background:var(--folha);color:#fff;border-radius:99px;font-size:.62rem;padding:1px 6px;font-weight:800}
.qtd{display:flex;align-items:center;gap:12px}
.qtd button{width:42px;height:42px;border-radius:12px;background:var(--creme2);font-size:1.3rem;font-weight:800}
.qtd b{font-family:var(--mono);font-size:1.2rem;min-width:22px;text-align:center}
.addbar{display:flex;gap:10px;align-items:center;margin-top:14px}
.addbar .btn{flex:1}
.prods .cat{font-size:.7rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin:14px 0 6px}
.prod{display:flex;justify-content:space-between;align-items:center;background:#fff;border-radius:12px;padding:10px 12px;margin-bottom:6px;box-shadow:0 0 0 1px var(--line) inset}
.prod small{display:block;font-family:var(--mono);color:var(--brand);font-weight:700;font-size:.8rem}
.prod .qtd button{width:36px;height:36px;font-size:1.1rem}
.prod.esg{opacity:.45}
.carrinho{position:sticky;bottom:-20px;margin:14px -14px -20px;background:#fff;border-top:1px solid var(--line);padding:12px 14px 14px;box-shadow:0 -10px 20px -14px rgba(0,0,0,.3)}
.carrinho .ci{display:flex;justify-content:space-between;gap:8px;font-size:.86rem;padding:5px 0;border-bottom:1px dashed var(--line)}
.carrinho .ci small{display:block;color:var(--muted);font-size:.74rem}
.carrinho .ci button{color:var(--brand);font-weight:800;padding:0 4px}
.carrinho .lista{max-height:26vh;overflow-y:auto;margin-bottom:10px}
.carrinho h4{display:flex;justify-content:space-between;font-size:.9rem;margin-bottom:4px}
.ok{text-align:center;padding:40px 10px}
.ok .ic{width:76px;height:76px;border-radius:50%;background:var(--folha);color:#fff;font-size:2.4rem;display:grid;place-items:center;margin:0 auto 12px}
.ok p{color:var(--muted);margin:6px 0 18px}

/* prontos */
.pr{background:#EEF6EC;border:2px solid #BFDDB9;border-radius:16px;padding:12px;margin-bottom:10px;animation:pop .35s}
@keyframes pop{from{transform:scale(.96);opacity:0}}
.pr .t{display:flex;justify-content:space-between;align-items:center;font-family:var(--serif);font-weight:800;font-size:1.3rem}
.pr .t span{font-family:var(--sans);font-size:.74rem;background:var(--folha);color:#fff;border-radius:99px;padding:3px 9px}
.pr ul{list-style:none;margin:6px 0 10px;font-size:.9rem}
.vazio{background:#fff;border-radius:16px;padding:26px 16px;text-align:center;color:var(--muted);font-size:.9rem;box-shadow:0 0 0 1px var(--line) inset}
.vazio div{font-size:2.2rem;margin-bottom:6px}

/* fechar */
.lin{display:flex;justify-content:space-between;align-items:center;padding:12px 0;border-bottom:1px solid var(--line);font-weight:700}
.tg{width:48px;height:28px;border-radius:99px;background:#CFC7B7;position:relative;flex:0 0 auto}
.tg:after{content:"";position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;background:#fff;transition:.2s}
.tg.on{background:var(--folha)}.tg.on:after{left:23px}
.cada{background:#EEF6EC;border-radius:12px;padding:12px;text-align:center;font-size:1rem;margin:10px 0}
.cada b{font-family:var(--mono);font-size:1.3rem;display:block}
.lista-m button{display:flex;justify-content:space-between;align-items:center;width:100%;background:#fff;border-radius:14px;padding:14px;margin-bottom:8px;box-shadow:0 0 0 1px var(--line) inset;font-weight:700}
.lista-m button b{font-family:var(--serif);font-size:1.15rem}
.lista-m button span{font-family:var(--mono)}
.enviado{background:#F7EACB;border-radius:12px;padding:10px 12px;font-size:.86rem;color:#7A5712;font-weight:700;margin:10px 0}

/* cardápio */
.card-it{display:flex;justify-content:space-between;gap:10px;padding:9px 0;border-bottom:1px solid var(--line);font-size:.9rem}
.card-it small{display:block;color:var(--muted);font-size:.76rem}
.card-it .p{font-family:var(--mono);font-size:.8rem;text-align:right;white-space:nowrap}
.card-it.esg{opacity:.45}

/* avisos */
.toast{position:fixed;left:50%;bottom:calc(84px + var(--safe-b));transform:translate(-50%,20px);opacity:0;background:var(--tinta);color:#fff;padding:12px 18px;border-radius:14px;font-size:.9rem;font-weight:600;z-index:80;transition:.3s;pointer-events:none;max-width:90%;text-align:center}
.toast.on{opacity:1;transform:translate(-50%,0)}
.toast.err{background:var(--brand)}
.alerta{position:fixed;left:12px;right:12px;top:calc(12px + var(--safe-t));background:#fff;border-radius:18px;box-shadow:0 20px 50px -10px rgba(0,0,0,.5);padding:14px;z-index:90;transform:translateY(-140%);transition:.35s cubic-bezier(.2,.8,.2,1.2)}
.alerta.on{transform:none}
.alerta b{display:block;font-size:1.05rem;margin-bottom:2px}
.alerta p{color:var(--muted);font-size:.86rem;margin-bottom:10px}
.carregando{display:grid;place-items:center;height:100%;background:var(--verde);color:#fff;font-weight:700}
.dica{background:#FFF8E6;border-left:4px solid var(--ouro);border-radius:10px;padding:10px 12px;font-size:.84rem;margin-top:12px}