:root{
  --bg:#f3f7fb;--card:#fff;--text:#102638;--muted:#6f8292;--line:#dbe5ec;
  --blue:#0d5c8f;--blue2:#0a76b7;--soft:#eaf5fb;--danger:#c83333;--shadow:0 8px 28px rgba(20,56,78,.08);
}
*{box-sizing:border-box}
html{background:var(--bg)}
body{margin:0;font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--text);background:var(--bg);min-height:100vh}
button,input,select{font:inherit}
button{cursor:pointer}
.topbar{max-width:1180px;margin:0 auto;padding:26px 20px 12px;display:flex;justify-content:space-between;gap:20px;align-items:flex-start}
.eyebrow{font-size:12px;font-weight:900;letter-spacing:.14em;color:var(--blue2)}
h1{font-size:34px;margin:4px 0 2px} h2{margin:0}
.subtitle{margin:0;color:var(--muted)}
.status-wrap{display:flex;gap:8px;align-items:center;padding-top:4px}
.status-pill,.version{font-size:12px;font-weight:800;border-radius:999px;padding:7px 10px;background:#fff;border:1px solid var(--line)}
.status-pill.online{background:#e9f8ef;color:#217a43;border-color:#ccebd6}
.status-pill.offline{background:#fff0f0;color:#a72c2c;border-color:#f0cccc}
.shell{max-width:1180px;margin:0 auto;padding:10px 20px 90px}
.summary-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;margin:8px 0 14px}
.summary-card{border:1px solid var(--line);background:var(--card);border-radius:16px;padding:14px;text-align:left;box-shadow:var(--shadow);color:var(--text)}
.summary-card.active{outline:2px solid var(--blue2);background:var(--soft)}
.summary-label{display:block;color:var(--muted);font-size:11px;font-weight:900;letter-spacing:.08em}
.summary-card strong{display:inline-block;font-size:26px;margin:6px 4px 0 0}.summary-card small{color:var(--muted)}
.card{background:var(--card);border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow)}
.toolbar{padding:13px;display:flex;gap:12px;align-items:center}
.search-wrap{position:relative;flex:1}
.search-wrap input{width:100%;padding-right:42px}
.icon-btn{position:absolute;right:5px;top:50%;transform:translateY(-50%);border:0;background:transparent;font-size:26px;color:var(--muted)}
.toolbar-actions{display:flex;gap:8px}
input,select{width:100%;border:1px solid #cfdbe4;border-radius:11px;background:#fff;padding:12px 13px;color:var(--text);outline:none}
input:focus,select:focus{border-color:var(--blue2);box-shadow:0 0 0 3px rgba(10,118,183,.11)}
.primary,.secondary,.danger{border-radius:11px;padding:11px 14px;font-weight:800;border:1px solid transparent}
.primary{background:var(--blue);color:#fff}.secondary{background:#fff;border-color:var(--line);color:var(--text)}.danger{background:#fff0f0;color:var(--danger);border-color:#f0c9c9}
.compact{padding:10px 12px;white-space:nowrap}
.list-section{margin-top:22px}
.section-head{display:flex;justify-content:space-between;align-items:end;margin-bottom:10px}
.section-head p{margin:3px 0 0;color:var(--muted)}.section-head select{width:auto;min-width:160px}
.item-list{display:grid;gap:9px}
.item-card{background:#fff;border:1px solid var(--line);border-radius:15px;padding:13px 14px;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;align-items:center;box-shadow:0 4px 18px rgba(20,56,78,.05)}
.item-card h3{margin:0 0 4px;font-size:17px}.item-meta{display:flex;gap:7px;flex-wrap:wrap;color:var(--muted);font-size:13px}
.badge{padding:4px 7px;border-radius:999px;background:var(--soft);color:var(--blue);font-weight:800;font-size:11px}
.qty{font-weight:900;color:var(--text)}
.item-actions{display:flex;gap:5px;align-items:center}
.qty-btn{min-width:43px;height:38px;border-radius:10px;border:1px solid var(--line);background:#fff;font-weight:900}
.edit-btn{height:38px;border-radius:10px;border:1px solid var(--line);background:var(--soft);color:var(--blue);font-weight:800;padding:0 11px}
.empty-state{text-align:center;padding:55px 20px;color:var(--muted)}.empty-state h3{color:var(--text);margin:8px 0}.empty-icon{font-size:46px}
.hidden{display:none!important}
.modal{border:0;background:transparent;padding:12px;max-width:none;max-height:none;width:100vw;height:100vh}
.modal::backdrop{background:rgba(7,23,34,.48);backdrop-filter:blur(3px)}
.modal-card{width:min(660px,100%);max-height:calc(100vh - 24px);overflow:auto;margin:auto;background:#fff;border-radius:20px;padding:20px;box-shadow:0 25px 80px rgba(0,0,0,.22)}
.modal-head{display:flex;justify-content:space-between;gap:15px;align-items:flex-start;margin-bottom:16px}
.close-btn{border:0;background:#eef4f7;border-radius:50%;width:38px;height:38px;font-size:25px}
.modal-card label{display:block;font-size:13px;font-weight:800;color:#526879;margin-top:12px}.modal-card label input,.modal-card label select{margin-top:5px;color:var(--text);font-weight:500}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 12px}
.inline-field{display:flex;gap:8px;align-items:center}
.modal-actions{display:flex;gap:8px;align-items:center;margin-top:20px}.spacer{flex:1}
.video-wrap{position:relative;background:#07131c;border-radius:14px;overflow:hidden;aspect-ratio:4/3}
#barcodeReader{width:100%;height:100%;min-height:260px;background:#07131c}
#barcodeReader video{width:100%!important;height:100%!important;object-fit:cover!important;border-radius:14px}
#barcodeReader canvas{max-width:100%!important}
#barcodeReader img{display:none!important}
.scan-frame{position:absolute;left:12%;right:12%;top:36%;height:28%;border:3px solid rgba(255,255,255,.95);border-radius:12px;box-shadow:0 0 0 999px rgba(0,0,0,.18)}
.scan-status{text-align:center;font-weight:800}.hint{color:var(--muted);font-size:13px;line-height:1.5}
.small-modal{width:min(430px,100%);margin-top:20vh}.small-modal p{color:var(--muted)}
.toast{position:fixed;z-index:99;left:50%;bottom:24px;transform:translate(-50%,20px);background:#102638;color:#fff;padding:11px 15px;border-radius:11px;opacity:0;pointer-events:none;transition:.2s}
.toast.show{opacity:1;transform:translate(-50%,0)}
.fab{display:none;position:fixed;right:18px;bottom:18px;width:58px;height:58px;border-radius:50%;border:0;background:var(--blue);color:#fff;font-size:23px;box-shadow:0 10px 30px rgba(13,92,143,.32);z-index:8}
@media(max-width:850px){.summary-grid{grid-template-columns:repeat(2,1fr)}.summary-grid .summary-card:first-child{grid-column:1/-1}.toolbar{align-items:stretch;flex-direction:column}.toolbar-actions{display:grid;grid-template-columns:1fr 1fr}.form-grid{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.topbar{padding-top:18px}.topbar h1{font-size:28px}.subtitle{font-size:13px}.status-wrap{flex-direction:column;align-items:end}.shell{padding-inline:12px}.summary-grid{gap:7px}.summary-card{padding:11px}.summary-card strong{font-size:22px}.section-head{align-items:center}.section-head select{min-width:135px;padding:9px}.item-card{grid-template-columns:1fr}.item-actions{justify-content:flex-end;border-top:1px solid #eef2f4;padding-top:9px}.fab{display:block}.toolbar-actions #scanBtn{display:none}.modal{padding:6px}.modal-card{max-height:calc(100vh - 12px);border-radius:16px;padding:16px}.form-grid{grid-template-columns:1fr}.modal-actions{flex-wrap:wrap}}

.barcode-reader{position:absolute;inset:0;overflow:hidden;background:#07131c}
.barcode-reader video,.barcode-reader canvas{position:absolute;inset:0;width:100%!important;height:100%!important;object-fit:cover}
.barcode-reader canvas.drawingBuffer{display:none!important}

.lookup-status{min-height:20px;margin-top:7px;font-size:13px;font-weight:700;color:var(--muted)}
.lookup-status.loading{color:var(--blue)}
.lookup-status.found{color:#217a43}
.lookup-status.missing{color:#9a5a14}
.lookup-status.error{color:#a72c2c}