:root{
  --bg:#EEF1F3; --surface:#FFFFFF; --ink:#16202B; --muted:#5E6C7A; --line:#D5DBE1;
  --accent:#1F4FD8; --accent-ink:#FFFFFF; --accent-soft:#E3EAFB;
  --ok:#137A4B; --ok-soft:#DDF3E7; --bad:#B42318; --bad-soft:#FBE4E1; --wait:#8A5A00; --wait-soft:#FBEFCF;
  --f-display:"Barlow Condensed","Arial Narrow",sans-serif;
  --f-body:"Barlow",system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#10161D; --surface:#182029; --ink:#E8EDF2; --muted:#93A1B0; --line:#2B3744;
    --accent:#7FA2FF; --accent-ink:#0B1220; --accent-soft:#1F2C4A;
    --ok:#5FD39A; --ok-soft:#14372A; --bad:#FF8A7D; --bad-soft:#421D1A; --wait:#F2C25B; --wait-soft:#3B2E10;
  }
}
:root[data-theme="dark"]{
  --bg:#10161D; --surface:#182029; --ink:#E8EDF2; --muted:#93A1B0; --line:#2B3744;
  --accent:#7FA2FF; --accent-ink:#0B1220; --accent-soft:#1F2C4A;
  --ok:#5FD39A; --ok-soft:#14372A; --bad:#FF8A7D; --bad-soft:#421D1A; --wait:#F2C25B; --wait-soft:#3B2E10;
}
*{box-sizing:border-box}
body{background:var(--bg);color:var(--ink);font-family:var(--f-body);font-size:15px;line-height:1.45;padding-inline:16px;padding-block:0 48px}
.wrap{max-width:980px;margin:0 auto}
header.top{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;padding-block:20px 12px}
h1{font-family:var(--f-display);font-weight:700;font-size:30px;letter-spacing:.02em;text-transform:uppercase;margin:0;text-wrap:balance}
.live{display:inline-flex;align-items:center;gap:8px;font-size:13px;color:var(--muted)}
.live{flex-wrap:wrap}
#tagApi{white-space:nowrap}
.dot{width:9px;height:9px;border-radius:50%;background:var(--muted)}
.live.on .dot{background:var(--ok);box-shadow:0 0 0 4px var(--ok-soft)}
.live.off .dot{background:var(--bad)}
nav.tabs{display:flex;gap:4px;background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:4px;position:sticky;top:env(safe-area-inset-top,0px);z-index:5}
nav.tabs button{flex:1;font:600 15px var(--f-body);padding:11px 8px;border:0;border-radius:7px;background:transparent;color:var(--muted);cursor:pointer}
nav.tabs button[aria-selected="true"]{background:var(--accent);color:var(--accent-ink)}
button:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.stats{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin-block:14px}
.stat{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:10px 12px}
.stat b{display:block;font-family:var(--f-mono);font-size:24px;font-weight:500;line-height:1.1;font-variant-numeric:tabular-nums}
.stat span{font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.stat.sep b{color:var(--accent)} .stat.bad b{color:var(--bad)} .stat.ok b{color:var(--ok)} .stat.wait b{color:var(--wait)}
h2{font-family:var(--f-display);font-size:20px;letter-spacing:.04em;text-transform:uppercase;margin:0 0 10px}
.panel{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:16px;margin-block:12px}
form.novo{display:grid;grid-template-columns:2fr 90px 110px;gap:10px}
form.novo .full{grid-column:1/-1}
label{display:block;font-size:12px;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);margin-bottom:4px}
input,select{width:100%;font:500 16px var(--f-body);padding:11px 10px;border:1px solid var(--line);border-radius:8px;background:var(--bg);color:var(--ink)}
.btn{font:600 15px var(--f-body);padding:11px 16px;border:1px solid var(--line);border-radius:8px;background:var(--surface);color:var(--ink);cursor:pointer}
.btn.primary{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.btn:disabled{opacity:.5;cursor:default}
.list{display:flex;flex-direction:column}
.row{display:grid;grid-template-columns:1fr auto;gap:10px;align-items:center;padding:12px 0;border-top:1px solid var(--line)}
.row:first-child{border-top:0}
.row .nome{font-weight:600;font-size:16px}
.row .meta{font-size:13px;color:var(--muted)}
.qtd{font-family:var(--f-mono);font-weight:500;font-variant-numeric:tabular-nums;white-space:nowrap}
.pill{display:inline-block;font-size:12px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;padding:3px 9px;border-radius:99px}
.pill.pendente{background:var(--wait-soft);color:var(--wait)}
.pill.tem{background:var(--ok-soft);color:var(--ok)}
.pill.separado{background:var(--accent-soft);color:var(--accent)}
.pill.falta{background:var(--bad-soft);color:var(--bad)}
.pills{display:inline-flex;flex-wrap:nowrap;gap:6px;align-items:center;white-space:nowrap}
.pill{white-space:nowrap}
.acoes{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.btn.tem{background:var(--ok);border-color:var(--ok);color:var(--surface)}
.btn.separado{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.btn.falta{background:var(--bad);border-color:var(--bad);color:var(--surface)}
.btn.link{border:0;background:transparent;color:var(--muted);text-decoration:underline;padding:6px}
.info{display:flex;gap:12px;align-items:center;min-width:0}
.thumb{width:64px;height:64px;flex:none;border-radius:8px;object-fit:cover;background:var(--bg);border:1px solid var(--line);cursor:zoom-in;display:block}
.thumb.ph{cursor:default;display:flex;align-items:center;justify-content:center;font-size:11px;color:var(--muted);text-align:center}
.thumb.sm{width:44px;height:44px}
.foto-box{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
#fotoPrev{width:84px;height:84px;object-fit:cover;border-radius:8px;border:1px solid var(--line)}
#lightbox{position:fixed;inset:0;background:rgba(0,0,0,.85);display:flex;align-items:center;justify-content:center;z-index:30;padding:16px}
#lightbox img{max-width:100%;max-height:100%;border-radius:8px}
.admform{display:flex;gap:10px;align-items:end;flex-wrap:wrap}
.admform>div{flex:1 1 220px}
p.meta{margin:0 0 10px;font-size:14px;color:var(--muted)}
.recado{font-size:13px;font-weight:600;color:var(--accent);margin-top:2px}
.nota{margin-top:6px;max-width:380px;padding:8px 10px;font-size:14px}
.empty{color:var(--muted);padding:18px 0;text-align:center}
.filtros{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:8px}
.chip{font:600 13px var(--f-body);padding:6px 12px;border:1px solid var(--line);border-radius:99px;background:var(--surface);color:var(--muted);cursor:pointer}
.chip[aria-pressed="true"]{background:var(--accent-soft);border-color:var(--accent);color:var(--accent)}
.rel-head{display:flex;flex-wrap:wrap;gap:10px;align-items:end;justify-content:space-between;margin-bottom:8px}
.rel-head .campo{width:170px}
.tblwrap{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:14px}
th{text-align:left;font-size:12px;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);padding:8px 10px;border-bottom:2px solid var(--line)}
td{padding:9px 10px;border-bottom:1px solid var(--line);vertical-align:top}
td.n,th.n{text-align:right}
.printhead{display:none}
.marca{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.logo{height:52px;width:auto;background:#fff;border-radius:8px;padding:4px 8px;display:block}
.printhead .logo{height:70px;padding:0}
#toast{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(20px + env(safe-area-inset-bottom,0px));background:var(--ink);color:var(--bg);padding:10px 16px;border-radius:8px;font-weight:600;z-index:20;max-width:calc(100vw - 32px)}
.aviso{background:var(--bad-soft);color:var(--bad);border-radius:10px;padding:12px 14px;margin-block:10px;font-weight:500}
@media (max-width:560px){
  .stats{grid-template-columns:repeat(2,1fr)}
  .stats .stat:last-child{grid-column:1/-1}
  form.novo{grid-template-columns:1fr 1fr}
  form.novo .prod{grid-column:1/-1}
  .row{grid-template-columns:1fr}
  .acoes{justify-content:flex-start}
  h1{font-size:25px}
}
@media print{
  .thumb{border:1px solid #999}

  body{background:#fff;color:#000;padding:0}
  header.top,nav.tabs,.stats,.noprint,#toast{display:none!important}
  .panel{border:0;padding:0}
  .printhead{display:block;margin-bottom:12px}
  #v-loja,#v-deposito,#v-admin{display:none!important}
  :root{--ink:#000;--muted:#333;--line:#999;--surface:#fff;--bg:#fff}
}

/* ---- versão servidor ---- */
[hidden]{display:none!important}
body{min-height:100vh}
.acoes.esq{justify-content:flex-start}
.userbox{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:13px;color:var(--muted)}
.userbox b{color:var(--ink);font-weight:600}
.userbox .btn{padding:6px 10px;font-size:13px}
.headright{display:flex;flex-direction:column;align-items:flex-end;gap:6px}
@media (max-width:560px){.headright{align-items:flex-start}}
.login{max-width:400px;margin:8vh auto 0}
.login .card{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:24px}
.login .logo{margin:0 auto 14px;height:64px}
.login h1{font-size:26px;text-align:center;margin-bottom:4px}
.login p.meta{text-align:center}
.login .campo{margin-bottom:12px}
.login .btn{width:100%}
.erro{background:var(--bad-soft);color:var(--bad);border-radius:8px;padding:10px 12px;margin-bottom:12px;font-weight:500}
.caixa-senha{background:var(--ok-soft);color:var(--ok);border-radius:10px;padding:12px 14px;margin-top:12px}
.caixa-senha code{font-family:var(--f-mono);font-size:20px;font-weight:500;color:var(--ink);background:var(--surface);padding:2px 8px;border-radius:6px;user-select:all}
.linha-form{display:flex;gap:10px;align-items:end;flex-wrap:wrap}
.linha-form>div{flex:1 1 170px}
.linha-form>.fim{flex:0 0 auto}
.tag{display:inline-block;font-size:11px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;padding:2px 8px;border-radius:99px;background:var(--accent-soft);color:var(--accent)}
.tag.off{background:var(--bad-soft);color:var(--bad)}
.tag.adm{background:var(--wait-soft);color:var(--wait)}
td .btn{padding:6px 10px;font-size:13px;margin:2px 4px 2px 0}
.mono{font-family:var(--f-mono);font-size:12px}
.desativado td{opacity:.55}
.hint{font-size:13px;color:var(--muted);margin:6px 0 0}
@media print{#v-senha{display:none!important}.userbox,.headright{display:none!important}}