:root { font-family: system-ui, -apple-system, Segoe UI, sans-serif; color: #172033; background: #f5f7fb; }
* { box-sizing: border-box; }
body { margin: 0; }
header { display:flex; justify-content:space-between; align-items:center; gap:12px; padding: 12px 18px; background:#111827; color:white; position:relative; z-index:3; }
h1 { margin:0; font-size: 22px; } h1 span { font-size: 12px; padding:4px 7px; background:#334155; border-radius: 999px; vertical-align:middle; } header p { margin:2px 0 0; opacity:.75; }
button { border:0; border-radius:10px; padding:9px 13px; background:#2563eb; color:white; font-weight:700; cursor:pointer; }
button.secondary { background:#64748b; } button.danger { background:#dc2626; } button.good { background:#16a34a; }
button:disabled { opacity:.45; cursor:not-allowed; }
input, select, textarea { padding:9px; border:1px solid #cbd5e1; border-radius:10px; font-size:15px; width:100%; }
textarea { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; }
.pinBox { display:flex; gap:10px; align-items:center; padding:8px 18px; background:white; border-bottom:1px solid #e2e8f0; flex-wrap:wrap; }
.pinBox label { display:flex; align-items:center; gap:8px; min-width: 0; }
.pinBox label input { width:160px; }
#apiStatus { font-weight:700; }
nav { display:flex; gap:8px; padding:8px 10px; overflow-x:auto; background:#e5e7eb; position:sticky; top:0; z-index:4; }
nav button { background:white; color:#172033; white-space:nowrap; }
nav button.active { background:#2563eb; color:white; }
main { padding:14px; width:100%; max-width:none; margin:0; }
.tab { display:none; } .tab.active { display:block; }
.cards { display:grid; grid-template-columns: repeat(auto-fit, minmax(155px, 1fr)); gap:12px; max-width:1420px; margin:auto; }
.card, .itemCard { background:white; border-radius:14px; padding:14px; box-shadow: 0 1px 4px rgba(15,23,42,.08); margin-bottom:12px; }
.twoCols { display:grid; grid-template-columns: 1.4fr .8fr; gap:16px; max-width:1420px; margin:20px auto 0; }
.metric { font-size:28px; font-weight:800; margin-top:6px; }
.toolbar { display:flex; gap:10px; margin-bottom:10px; flex-wrap:wrap; align-items:center; max-width:1420px; margin-left:auto; margin-right:auto; }
.toolbar input { flex:1; min-width:230px; } .toolbar select { width:auto; min-width:210px; }
.stickyToolbar { position:sticky; top:50px; z-index:3; background:#f5f7fb; padding:8px 0; border-bottom:1px solid #e2e8f0; }
#itemsList, #countResults, #vendorCards { max-width:1420px; margin:0 auto; }
.itemCard { border:1px solid #e2e8f0; }
.itemGrid { display:grid; grid-template-columns: repeat(6, minmax(120px, 1fr)); gap:8px; margin:8px 0; }
.label { color:#64748b; font-size:12px; text-transform:uppercase; letter-spacing:.04em; }
.value { font-size:18px; font-weight:800; }
.badge { display:inline-block; padding:3px 7px; border-radius:999px; font-weight:800; font-size:12px; background:#e2e8f0; }
.badge.red { background:#fee2e2; color:#991b1b; } .badge.orange { background:#ffedd5; color:#9a3412; } .badge.green { background:#dcfce7; color:#166534; }
.red { color:#dc2626; } .orange { color:#ea580c; } .green { color:#16a34a; }
.editRow { display:grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap:8px; margin-top:10px; align-items:end; }
.hint { color:#475569; }
pre { background:#0f172a; color:#dbeafe; padding:12px; border-radius:12px; overflow:auto; max-height:360px; white-space: pre-wrap; overflow-x: auto; }
small { color:#64748b; }
#scanVideo { width:100%; max-height:260px; border-radius:14px; background:#111827; margin-bottom:12px; }
.buttonRow { display:flex; gap:10px; flex-wrap:wrap; margin-top:10px; }
.good { background:#157347 !important; color:white !important; }
.danger { background:#b42318 !important; color:white !important; }
.dangerCard { border-color:#f0b4ae !important; }
.summaryLine { margin-top:6px; font-size:0.95rem; }
.bigNum { font-size:1.5rem; font-weight:800; }
#items .itemCard b, #count .itemCard b { font-size: 17px; }
#items .itemCard button, #count .itemCard button { margin-top:4px; }
@media (max-width: 1000px) {
  .itemGrid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  header { align-items:flex-start; padding:10px 12px; }
  header p { display:none; }
  h1 { font-size:20px; }
  nav { top:0; }
  main { padding:10px; }
  .twoCols { grid-template-columns: 1fr; }
  .itemGrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .editRow { grid-template-columns: 1fr 1fr; }
  .stickyToolbar { top:48px; }
  button { padding:10px 12px; }
  .pinBox label input { width:120px; }
}

.checkLabel { display:flex; align-items:center; gap:8px; background:white; padding:9px 12px; border:1px solid #cbd5e1; border-radius:10px; white-space:nowrap; }
.checkLabel input { width:auto; }
.orderToolbar select { min-width:280px; }
.orderTable { width:100%; border-collapse:collapse; background:white; border-radius:12px; overflow:hidden; box-shadow:0 1px 4px rgba(15,23,42,.08); }
.orderTable th, .orderTable td { border-bottom:1px solid #e2e8f0; padding:8px; text-align:left; font-size:13px; }
.orderTable th { background:#e8eef8; font-size:12px; text-transform:uppercase; color:#334155; }
.printHeader { background:white; border-radius:14px; padding:14px; box-shadow:0 1px 4px rgba(15,23,42,.08); margin-bottom:12px; }
.printHeader h2 { margin:0 0 6px; }
@media print {
  body.printing-order header, body.printing-order .pinBox, body.printing-order nav, body.printing-order .toolbar, body.printing-order #orderSummary, body.printing-order .tab:not(#order) { display:none !important; }
  body.printing-order main { padding:0; }
  body.printing-order #order { display:block !important; }
  body.printing-order #order > h2, body.printing-order #order > .hint { display:none !important; }
  body.printing-order #orderPrintArea { display:block !important; margin:0; }
  body.printing-order .orderTable th, body.printing-order .orderTable td { font-size:10px; padding:4px; }
  body.printing-order .printHeader { box-shadow:none; border:0; padding:0 0 8px; }
  body.printing-order .orderTable { box-shadow:none; }
}