body { background:#f4f6f8; }
.grid-actions { display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap:12px; }
.action-card { background:white; border-radius:18px; padding:22px; min-height:120px; display:flex; flex-direction:column; justify-content:center; align-items:center; text-decoration:none; color:#111827; box-shadow:0 8px 20px rgba(0,0,0,.06); font-size:18px; }
.action-card span { font-size:34px; }
.metric { background:white; border-radius:16px; padding:18px; box-shadow:0 8px 20px rgba(0,0,0,.06); }
.metric small { color:#6b7280; display:block; }
.metric strong { font-size:34px; }
.metric.warning strong { color:#d97706; }
.location-pill { background:white; border-radius:14px; padding:18px; text-align:center; font-weight:bold; font-size:22px; box-shadow:0 4px 14px rgba(0,0,0,.05); }
.product-card { border:0; border-radius:16px; }
.stock-big { font-size:24px; font-weight:bold; margin-top:8px; }
.pick-line { display:flex; gap:10px; align-items:center; padding:12px; border:1px solid #e5e7eb; border-radius:14px; margin-bottom:10px; background:#fff; }
.pick-line.ok { background:#ecfdf5; border-color:#16a34a; }
.pick-line.error { background:#fef2f2; border-color:#dc2626; }
.pick-line .loc { min-width:90px; font-weight:800; font-size:20px; color:#2563eb; }
.scan-input { max-width:180px; }
@media (max-width: 768px) { .pick-line { flex-direction:column; align-items:stretch; } .pick-line .loc { font-size:24px; } .scan-input { max-width:none; } }
@media (min-width: 992px) { .grid-actions { grid-template-columns: repeat(4, minmax(0,1fr)); } }
.product-image { width:88px; height:88px; object-fit:contain; border-radius:12px; background:#fff; border:1px solid #e5e7eb; }
.placeholder-image { display:flex; align-items:center; justify-content:center; font-size:12px; color:#6b7280; }
.scanner-panel { position:fixed; left:0; right:0; bottom:0; z-index:2000; padding:10px; background:linear-gradient(180deg, rgba(17,24,39,.15), rgba(17,24,39,.96) 18%); }
.scanner-box { width:min(620px,100%); margin:0 auto; background:#111827; border-radius:18px 18px 0 0; padding:12px; box-shadow:0 -12px 36px rgba(0,0,0,.3); color:#fff; }
.scanner-header { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:8px; }
.scanner-status { font-size:13px; color:#d1d5db; margin-top:2px; }
.scanner-status.ok { color:#86efac; }
.scanner-status.error { color:#fca5a5; }
.scanner-close { width:44px; height:44px; border:0; border-radius:50%; background:#fff; color:#111827; font-size:31px; line-height:38px; font-weight:400; flex:0 0 auto; }
#scannerReader { overflow:hidden; border-radius:14px; background:#000; min-height:220px; }
#scannerReader video { border-radius:14px; object-fit:cover; }
.scanner-photo-preview { width:100%; max-height:54vh; object-fit:contain; border-radius:14px; background:#000; }
.scanner-photo-reader { position:absolute; left:-10000px; width:2px; height:2px; overflow:hidden; opacity:.01; pointer-events:none; }
.scanner-actions { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:10px; }
.scanner-actions .btn { font-weight:700; min-height:44px; }
.scanner-help { padding-top:8px; font-size:13px; color:#d1d5db; text-align:center; }
@media (max-width:576px){ .product-image{width:72px;height:72px}.action-card{min-height:105px;padding:14px}.action-card span{font-size:28px}.scanner-panel{padding:0}.scanner-box{border-radius:18px 18px 0 0}.scanner-close{width:42px;height:42px}#scannerReader{min-height:190px}.scanner-actions{grid-template-columns:1fr 1fr} }