:root{--azul:#1565c0;--azul-esc:#0d3c7a;--laranja:#f57c00;--fundo:#f4f6fa;--card:#fff;--texto:#1d2433;--sub:#5b6577;--borda:#dde3ec;--ok:#2e7d32;--erro:#c62828;--aviso:#fff4e0}
*{box-sizing:border-box}
body{margin:0;font:15px/1.45 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;background:var(--fundo);color:var(--texto)}
header{background:var(--azul-esc);color:#fff;padding:10px 16px;display:flex;align-items:center;gap:16px;flex-wrap:wrap;position:sticky;top:0;z-index:5}
.logo{font-weight:800;font-size:20px;letter-spacing:.3px}.logo b{color:#ffb74d}
nav{display:flex;gap:4px;flex-wrap:wrap;flex:1}
nav a,nav button{color:#fff;text-decoration:none;padding:6px 10px;border-radius:6px;background:none;border:0;font:inherit;cursor:pointer}
nav a.ativo,nav a:hover,nav button:hover{background:rgba(255,255,255,.15)}
main{max-width:980px;margin:0 auto;padding:16px}
h1{font-size:20px;margin:6px 0 12px}h2{font-size:17px;margin:22px 0 10px}
.card{background:var(--card);border:1px solid var(--borda);border-radius:10px;padding:14px;margin-bottom:12px}
.flash{padding:10px 14px;border-radius:8px;margin-bottom:12px;background:#e8f5e9;color:var(--ok)}
.flash.erro{background:#ffebee;color:var(--erro)}
.aviso{background:var(--aviso);border:1px solid #ffd59e;border-radius:8px;padding:10px 14px;margin-bottom:12px;color:#7a4b00}
.ped-top{display:flex;justify-content:space-between;gap:8px;flex-wrap:wrap;align-items:center}
.ped-id{font-weight:800;font-size:18px}
.badge{display:inline-block;padding:2px 9px;border-radius:99px;font-size:12px;font-weight:700;color:#fff;background:#777}
.st-novo{background:var(--laranja)}.st-repassado{background:var(--azul)}.st-saiu{background:#6a1b9a}.st-entregue{background:var(--ok)}.st-cancelado{background:#757575}
.teste{background:#9e9e9e}
.sub{color:var(--sub);font-size:13px}
.obs{background:var(--aviso);padding:6px 10px;border-radius:6px;margin-top:8px;font-size:14px}
ul.itens{margin:6px 0;padding-left:18px}
.acoes{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:10px;border-top:1px solid var(--borda);padding-top:10px}
button,.btn{background:var(--azul);color:#fff;border:0;border-radius:8px;padding:9px 14px;font:inherit;font-weight:600;cursor:pointer;text-decoration:none;display:inline-block}
.btn-sec{background:#e3eaf5;color:var(--azul-esc)}.btn-lar{background:var(--laranja)}.btn-perigo{background:var(--erro)}
select,input[type=text],input[type=password],input[type=number],textarea{font:inherit;padding:8px 10px;border:1px solid var(--borda);border-radius:8px;background:#fff;color:var(--texto);max-width:100%}
label{display:block;font-weight:600;margin:10px 0 4px}
.campo-inline{display:flex;align-items:center;gap:6px;font-weight:400;margin:0}
.grade{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:4px 16px}
table{width:100%;border-collapse:collapse}th,td{padding:6px;border-bottom:1px solid var(--borda);text-align:left;vertical-align:middle}
.tabela-wrap{overflow-x:auto}
details summary{cursor:pointer;font-weight:600;margin:16px 0 8px}
.login{max-width:360px;margin:60px auto}
.chat{display:flex;flex-direction:column;gap:6px;max-height:60vh;overflow-y:auto;padding:10px;background:#e5ddd5;border-radius:10px}
.bolha{max-width:85%;padding:8px 11px;border-radius:10px;white-space:pre-wrap;word-wrap:break-word;font-size:14px}
.bolha.in{align-self:flex-end;background:#dcf8c6}.bolha.out{align-self:flex-start;background:#fff}
.vazio{color:var(--sub);text-align:center;padding:30px}
@media (max-width:600px){main{padding:12px}.acoes form{width:100%}}