body{font-family:Arial,sans-serif;background:#f4f7fb;margin:0;color:#17212b}
.container{max-width:1100px;margin:0 auto;padding:20px}
.topbar{display:flex;justify-content:space-between;align-items:center}
.top-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.panel{background:#fff;border:1px solid #dbe3ee;border-radius:12px;padding:14px;margin-bottom:12px}
.row{display:flex;gap:8px;flex-wrap:wrap}
.stack{display:flex;flex-direction:column;gap:10px}
.btn{border:none;border-radius:8px;padding:8px 12px;cursor:pointer;text-decoration:none}
.btn.primary{background:#2563eb;color:#fff}
.btn.secondary{background:#e2e8f0;color:#111}
.btn.success{background:#16a34a;color:#fff}
.btn.warning{background:#f59e0b;color:#fff}
.flash{padding:10px;border-radius:8px}
.flash.success{background:#dcfce7}
.flash.error{background:#fee2e2}
.flash-wrap{display:flex;flex-direction:column;gap:6px;margin-bottom:10px}
.inline-form{display:inline}
.narrow{max-width:420px;margin:40px auto}
input,select{padding:9px;border:1px solid #cbd5e1;border-radius:8px}
table{width:100%;border-collapse:collapse}
td,th{border-bottom:1px solid #e2e8f0;padding:8px;text-align:left}
.muted{color:#64748b}
.hidden{display:none!important}

.smart-scan-controls{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:10px}
.scan-status{font-size:.95rem}
.scan-status.success{color:#15803d}
.scan-status.error{color:#b91c1c}
.camera-wrapper{position:relative;width:100%;max-width:720px;background:#0f172a;border-radius:12px;overflow:hidden;aspect-ratio:4/3}
.camera-wrapper video{width:100%;height:100%;object-fit:cover;display:block}
.scan-overlay{position:absolute;inset:0;pointer-events:none}
.scan-mask{position:absolute;background:rgba(15,23,42,.36);backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px)}
.scan-mask.top{left:0;top:0;width:100%;height:24%}
.scan-mask.bottom{left:0;bottom:0;width:100%;height:28%}
.scan-mask.left{left:0;top:24%;width:12%;height:48%}
.scan-mask.right{right:0;top:24%;width:12%;height:48%}
.scan-rect{position:absolute;left:12%;top:24%;width:76%;height:48%;border:3px solid rgba(34,197,94,.95);border-radius:16px;box-shadow:0 0 0 1px rgba(15,23,42,.2) inset;pointer-events:none}

.courier-pill{display:inline-block;padding:4px 10px;border-radius:999px;background:var(--courier-color,#64748b);border:1px solid rgba(15,23,42,.16);color:#fff;font-weight:600;font-size:.83rem;line-height:1.2}

@media (max-width: 768px){
  .container{padding:12px}
  .topbar{align-items:flex-start;gap:8px;flex-wrap:wrap}
  .panel{padding:12px}
  .panel h2{margin:4px 0 10px;font-size:1.05rem}
  .row{gap:10px}
  .row input,.row select,.row button{width:100%;min-height:44px;font-size:16px}
  .btn{min-height:44px;padding:10px 12px}
  .smart-scan-controls{display:grid;grid-template-columns:minmax(130px,170px) 1fr;align-items:center}
  .camera-wrapper{max-width:none;aspect-ratio:3/4}
  .scan-mask.top{height:27%}
  .scan-mask.bottom{height:31%}
  .scan-mask.left{top:27%;width:7%;height:42%}
  .scan-mask.right{top:27%;width:7%;height:42%}
  .scan-rect{left:7%;width:86%;top:27%;height:42%}
  table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch}
  th,td{white-space:nowrap}
}