:root{
  --ink:#5C5C5C;
  --muted:#777777;
  --paper:#FAFAFA;
  --brand:#EF8C00;
  --warm:#EDE4D8;
  --line:#E4E0DA;
  --critical:#B4443F;
  --low:#D28A13;
  --ok:#4F7C62;
  --white:#FFFFFF;
}
*{box-sizing:border-box}
body{
  margin:0;
  font-family:Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  background:var(--paper);
  color:var(--ink);
}
button,input,select{font:inherit}
button{cursor:pointer}
.center-screen{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px;color:var(--muted)}
.shell{min-height:100vh}
header{
  height:70px;background:#fff;border-bottom:1px solid var(--line);
  display:flex;align-items:center;justify-content:space-between;
  padding:0 26px;position:sticky;top:0;z-index:5
}
.brand{display:flex;align-items:center;gap:10px}
.brand-mark{
  font-family:Aleo,Georgia,serif;font-size:19px;font-weight:700;color:#5C5C5C;
}
.brand-mark span{color:var(--brand);font-weight:400}
.user{font-size:13px;color:var(--muted)}
main{max-width:1050px;margin:auto;padding:27px 22px 96px}
.eyebrow{font-size:11px;text-transform:uppercase;letter-spacing:1.4px;color:var(--muted);font-weight:800}
h1{font-family:Aleo,Georgia,serif;font-size:35px;font-weight:500;margin:5px 0 7px}
h2{margin:0}
.sub{color:var(--muted);margin-bottom:22px}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.stat{
  background:#fff;border:1px solid var(--line);border-radius:16px;padding:17px;
  appearance:none;text-align:left;color:inherit
}
.stat b{font-size:29px;display:block}
.stat.critical b{color:var(--critical)}
.stat.low b{color:var(--low)}
.stat.ok b{color:var(--ok)}
.stat.selected{outline:3px solid var(--ink);outline-offset:2px}
.scan{
  width:100%;margin:17px 0 26px;border:0;background:var(--brand);color:#fff;
  border-radius:14px;padding:17px;font-weight:800;font-size:16px
}
.sectionhead{display:flex;justify-content:space-between;align-items:center;gap:10px;margin:8px 0 11px}
.sectionhead h2{font-size:19px}
.link{border:0;background:none;color:var(--brand);font-weight:800}
.list{display:grid;gap:8px}
.item{
  background:#fff;border:1px solid var(--line);border-radius:14px;padding:14px 15px;
  display:flex;align-items:center;gap:13px;cursor:pointer
}
.dot{width:10px;height:10px;border-radius:50%;flex:none}
.dot.critical{background:var(--critical)} .dot.low{background:var(--low)} .dot.ok{background:var(--ok)}
.itemmain{flex:1;min-width:0}
.itemname{font-weight:750}
.meta{font-size:12px;color:var(--muted);margin-top:4px}
.qty{text-align:right;font-size:18px;font-weight:850}
.qty small{display:block;color:var(--muted);font-size:11px;font-weight:500}
.categorymark,.badge{
  display:inline-block;background:var(--warm);border-radius:999px;padding:4px 8px;
  font-size:10px;font-weight:800;color:var(--muted)
}
.panel{display:none}.panel.active{display:block}
nav{
  position:fixed;bottom:0;left:0;right:0;height:66px;background:#fff;border-top:1px solid var(--line);
  display:flex;justify-content:center;padding:6px;z-index:6
}
.navbtn{width:120px;border:0;background:none;border-radius:10px;color:var(--muted);font-weight:700}
.navbtn.active{background:var(--warm);color:var(--ink)}
.search{
  width:100%;padding:14px;border:1px solid var(--line);border-radius:12px;background:#fff;
  font-size:15px;margin:10px 0 12px
}
.toolbar{display:flex;gap:10px;align-items:center;margin-bottom:12px}
.filters{display:flex;gap:6px;overflow-x:auto;flex:1;padding:2px 0}
.filter{border:1px solid var(--line);background:#fff;border-radius:999px;padding:8px 11px;white-space:nowrap}
.filter.active{background:var(--ink);color:#fff;border-color:var(--ink)}
.sort{border:1px solid var(--line);background:#fff;border-radius:10px;padding:9px}
.modal{position:fixed;inset:0;background:#18201f88;display:none;align-items:flex-end;justify-content:center;z-index:20}
.modal.show{display:flex}
.sheet{
  width:min(680px,100%);max-height:92vh;overflow:auto;background:var(--paper);
  border-radius:23px 23px 0 0;padding:23px
}
.sheet h2{font-family:Aleo,Georgia,serif;font-size:28px;font-weight:500;margin:4px 0}
.close{float:right;width:34px;height:34px;border:0;border-radius:50%;background:var(--warm);font-size:18px}
.editlink{float:right;margin-right:8px;border:0;background:none;color:var(--brand);font-weight:800;padding:8px}
.bigqty{text-align:center;background:#fff;border:1px solid var(--line);border-radius:17px;padding:21px;margin:18px 0}
.bigqty strong{font-size:48px}
.controls{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.btn{border:1px solid var(--line);background:#fff;border-radius:12px;padding:13px 14px;font-weight:750}
.btn.primary{background:var(--brand);border-color:var(--brand);color:#fff}
.btn.danger{color:var(--critical)}
.setrow{display:flex;gap:8px;margin-top:9px}
.setrow input{flex:1;min-width:0;border:1px solid var(--line);border-radius:11px;padding:13px}
.history{margin-top:19px;border-top:1px solid var(--line);padding-top:14px}
.historyentry{font-size:12px;padding:9px 0;border-bottom:1px solid var(--line)}
.form{display:grid;gap:11px;margin-top:18px}
.form label{font-size:11px;font-weight:850;color:var(--muted);text-transform:uppercase;letter-spacing:.6px}
.form input,.form select{width:100%;border:1px solid var(--line);border-radius:10px;padding:12px;background:#fff}
.twocol{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.error{color:var(--critical);font-size:12px;min-height:17px}
.adminGrid{display:grid;grid-template-columns:repeat(2,1fr);gap:11px;margin-top:18px}
.adminCard{background:#fff;border:1px solid var(--line);border-radius:14px;padding:17px}
.adminCard b{display:block;margin-bottom:5px}
.adminCard span{font-size:12px;color:var(--muted)}
.row{
  background:#fff;border:1px solid var(--line);border-radius:12px;padding:13px;margin:8px 0;
  display:flex;align-items:center;justify-content:space-between;gap:9px
}
.row.archived{opacity:.45}
.actions{display:flex;gap:5px}
.mini{border:1px solid var(--line);background:#fff;border-radius:8px;padding:6px 8px}
.toast{
  position:fixed;top:82px;left:50%;transform:translateX(-50%);background:var(--ink);color:#fff;
  padding:10px 15px;border-radius:999px;z-index:50;display:none;font-size:13px
}
.login-card{
  width:min(420px,calc(100% - 32px));background:#fff;border:1px solid var(--line);
  border-radius:18px;padding:24px
}
.login-card h1{font-size:30px}
.login-card input{width:100%;margin:7px 0;padding:13px;border:1px solid var(--line);border-radius:10px}
.login-card .btn{width:100%;margin-top:9px}
.notice{font-size:12px;color:var(--muted);margin-top:10px}
@media(max-width:650px){
  header{height:61px;padding:0 15px}.brand-mark{font-size:16px}.user{font-size:11px}
  main{padding:21px 14px 87px}h1{font-size:30px}.stats{gap:6px}.stat{padding:12px}
  .stat b{font-size:24px}.stat span{font-size:10px}.navbtn{width:auto;flex:1;font-size:12px}
  .toolbar{flex-direction:column;align-items:stretch}.sort{width:100%}.adminGrid{grid-template-columns:1fr}.qty{font-size:16px}
}

.brand-logo{display:block;width:235px;max-height:48px;object-fit:contain;object-position:left center}
.camera-wrap{position:relative;background:#222;border-radius:16px;overflow:hidden;min-height:280px;margin:14px 0}
.camera-wrap video{display:block;width:100%;min-height:280px;max-height:55vh;object-fit:cover}
.scan-frame{position:absolute;left:12%;right:12%;top:34%;height:32%;border:3px solid rgba(255,255,255,.92);border-radius:14px;box-shadow:0 0 0 999px rgba(0,0,0,.18)}
.scanner-fallbacks{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:12px}.scanner-fallbacks label{text-align:center}
@media(max-width:650px){.brand-logo{width:190px;max-height:40px}.camera-wrap,.camera-wrap video{min-height:330px}}

.scanner-diag{font-size:11px;color:var(--muted);margin-top:6px;word-break:break-word}

.login-help{display:block;margin:12px auto 0}
.actions{flex-wrap:wrap;justify-content:flex-end}
@media(max-width:650px){.row{align-items:flex-start}.actions{max-width:52%}.actions .mini{font-size:11px}}