:root{
  /* dashboard-matched chrome: sidebar slate-blue, not near-black */
  --navy:#3F5570; --navy-grad1:#3A4F69; --navy-grad2:#445C79;
  --navy-2:#374960; --accent:#2563EB; --accent-dk:#1D4ED8; --accent-soft:#EFF4FE;
  --green:#16A34A; --green-bg:#DCFCE7; --green-bd:#22C55E;
  --red:#DC2626; --red-bg:#FEF2F2; --red-bd:#EF4444;
  --ink:#111827; --muted:#475569; --line:#E5E7EB; --line-2:#BFDBFE;
  --bg:#E8EFFC; --card:#FFFFFF; --amber:#B45309; --amber-bg:#FEF9C3;
  --radius:14px; --shadow:0 1px 3px rgba(15,23,42,.06),0 8px 24px rgba(37,99,235,.05);
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;background:linear-gradient(180deg,#F0F4FB 0%,#E8EFFC 50%,#DDE7F8 100%);color:var(--ink);-webkit-font-smoothing:antialiased;overflow:hidden}
button{font-family:inherit;cursor:pointer;border:none;background:none}
input{font-family:inherit}
.hidden{display:none !important}

#app{display:flex;flex-direction:column;height:100vh;max-width:1600px;margin:0 auto;background:transparent}

/* header */
header{background:linear-gradient(100deg,var(--navy-grad1),var(--navy-grad2));color:#fff;display:flex;align-items:center;justify-content:space-between;padding:15px 24px;gap:16px;flex-shrink:0}
.brand{display:flex;align-items:center;gap:12px}
.logo{height:34px;width:auto;flex-shrink:0;display:block}
.brand b{font-size:22px;letter-spacing:.04em;font-weight:800}
.title{font-size:19px;font-weight:700;letter-spacing:.04em;color:#fff;text-transform:uppercase;flex:1;text-align:center}
.hbtns{display:flex;gap:10px;align-items:center}
.hbtn{display:inline-flex;align-items:center;gap:8px;color:#fff;border:1px solid #334155;padding:10px 16px;border-radius:10px;font-size:13px;font-weight:700;letter-spacing:.03em;background:#1E293B;transition:.15s}
.hbtn:hover{background:#334155}
.hbtn.icon{padding:10px 12px}
.hbtn svg{width:17px;height:17px}

/* progress */
.progress-strip{display:flex;align-items:center;gap:28px;padding:18px 32px;border-bottom:1px solid var(--line);background:#fff;flex-shrink:0}.stat{text-align:center;min-width:74px}
.stat .n{font-size:36px;font-weight:800;line-height:1;color:var(--accent)}
.stat.rem .n{color:var(--navy)}
.stat .l{font-size:11px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.08em;margin-top:5px}
.bar-wrap{flex:1}
.bar-label{text-align:center;font-size:13px;font-weight:600;color:var(--muted);margin-bottom:8px}
.bar{height:13px;background:#E2E8F0;border-radius:99px;overflow:hidden}
.bar > span{display:block;height:100%;background:linear-gradient(90deg,var(--accent),#3B82F6);border-radius:99px;width:0;transition:width .4s cubic-bezier(.22,1,.36,1)}

main{flex:1;display:flex;min-height:0;position:relative;background:#fff}

/* empty state */
#empty-state{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:30px}
#empty-state .es-ic{width:90px;height:90px;border-radius:24px;background:var(--accent-soft);color:var(--accent);display:flex;align-items:center;justify-content:center;margin-bottom:24px}
#empty-state .es-ic svg{width:48px;height:48px}
#empty-state h1{font-size:34px;font-weight:800;margin-bottom:10px}
#empty-state p{font-size:17px;color:var(--muted);max-width:440px;line-height:1.55;margin-bottom:28px}
#empty-state .es-btn{display:inline-flex;align-items:center;gap:11px;background:var(--accent);color:#fff;font-size:16px;font-weight:700;padding:16px 30px;border-radius:13px}
#empty-state .es-btn:hover{background:var(--accent-dk)}
#empty-state .es-btn svg{width:20px;height:20px}

/* ===== SIDE-BY-SIDE WORK AREA ===== */
#work{flex:1;display:flex;min-height:0}
.pane-left{width:42%;min-width:430px;display:flex;flex-direction:column;padding:22px 24px 80px;border-right:1px solid var(--line);overflow-y:auto;background:#fff}
.pane-right{flex:1;display:flex;flex-direction:column;background:#FAFCFF;min-width:0}

/* left: scan block */
.scan-block{text-align:center}
.eyebrow{font-size:13px;font-weight:800;color:var(--accent);letter-spacing:.1em;text-transform:uppercase}
.scan-block h1{font-size:32px;font-weight:800;letter-spacing:-.01em;margin:6px 0 3px}
.sub{font-size:15px;color:var(--muted);margin-bottom:18px}
.scan-field{position:relative;width:100%}
.scan-field input{width:100%;font-size:19px;padding:18px 56px 18px 20px;border:2.5px solid var(--accent);border-radius:13px;outline:none;color:var(--ink);background:#fff;box-shadow:0 0 0 5px rgba(37,99,235,.10)}
.scan-field input::placeholder{color:#94A3B8}
.scan-field .kbd{position:absolute;right:12px;top:50%;transform:translateY(-50%);width:32px;height:32px;color:var(--accent);display:flex;align-items:center;justify-content:center;background:var(--accent-soft);border-radius:8px}
.scan-field .kbd svg{width:19px;height:19px}

/* result tile */
#result-tile{margin-top:18px}
@keyframes pop{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
#result-tile .tile{animation:pop .18s ease-out;border-radius:14px;padding:16px 20px;text-align:center;border:2.5px solid var(--line);background:#fff}
.tile.found{border-color:var(--green-bd);background:#F6FEF9}
.tile.notfound{border-color:var(--red-bd);background:#FFF8F8}
.tile-head{display:flex;align-items:center;gap:10px;justify-content:center;margin-bottom:8px}
.tile-head .ic{width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center}
.tile.found .ic{background:var(--green-bg);color:var(--green)}
.tile.notfound .ic{background:var(--red-bg);color:var(--red)}
.tile-head .ic svg{width:20px;height:20px}
.tile-head h2{font-size:16px;font-weight:800;text-transform:uppercase;letter-spacing:.04em}
.tile.found .tile-head h2{color:var(--green)}
.tile.notfound .tile-head h2{color:var(--red)}
.tile .matnum{font-size:26px;font-weight:800}
.tile.notfound .matnum{color:var(--red)}
.tile .matdesc{font-size:14px;color:var(--muted);margin-top:1px}
.nf-msg{display:flex;align-items:center;gap:10px;justify-content:center;background:var(--red-bg);border:1px solid #FECACA;color:#991B1B;padding:11px 16px;border-radius:10px;font-size:13.5px;font-weight:600;margin:12px 0 4px}
.nf-msg svg{width:17px;height:17px;flex-shrink:0}
.nf-sub{text-align:center;color:var(--muted);font-size:13px;margin-top:10px}

/* selected material card */
#capture-detail{display:flex;flex-direction:column;flex:1}
.sel-card{margin-top:18px;background:#fff;border:1px solid var(--line);border-radius:14px;padding:16px 18px;transition:background .15s,border-color .15s}
.sel-card.valid{background:#E7FBEF;border:2.5px solid var(--green-bd);box-shadow:0 0 0 4px rgba(34,197,94,.18)}
.sel-card.valid .ey{color:#15803D}
.sel-card.valid .num{color:#14532D}
.sel-card.valid .badge{background:var(--green);color:#fff;font-size:13px;padding:7px 16px;letter-spacing:.04em}
.sel-card.valid .specs{border-top-color:#86EFAC}
.sel-card .ey{font-size:11px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.07em}
.sel-row{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-top:6px}
.sel-card .num{font-size:24px;font-weight:800}
.sel-card .desc{font-size:14px;color:var(--muted);margin-top:1px}
.badge{display:none;background:var(--green-bg);color:#15803D;font-weight:700;font-size:11px;padding:5px 11px;border-radius:99px;white-space:nowrap;flex-shrink:0}
.sel-card.valid .badge{display:inline-block}
.specs{display:flex;flex-wrap:wrap;gap:10px 24px;margin-top:14px;padding-top:12px;border-top:1px dashed var(--line-2);font-size:13px}
.specs:empty{display:none}
.spec{display:flex;gap:6px}
.spec .k{color:var(--muted)}
.spec .v{font-weight:700}

/* qty */
.qty-wrap{margin-top:16px}
.qty-wrap label{font-size:12px;font-weight:800;color:var(--accent);text-transform:uppercase;letter-spacing:.06em}
.qty-field{display:flex;align-items:stretch;margin-top:8px;border:2px solid var(--line-2);border-radius:11px;overflow:hidden;transition:.15s}
.qty-field:focus-within{border-color:var(--accent);box-shadow:0 0 0 4px rgba(37,99,235,.12)}
.qty-field input{flex:1;border:none;outline:none;font-size:26px;font-weight:800;padding:11px 16px;width:100%;min-width:0}
.qty-unit{display:flex;align-items:center;padding:0 14px;color:var(--muted);font-weight:600;border-left:1px solid var(--line)}
.qty-steppers{display:flex;flex-direction:column;border-left:1px solid var(--line)}
.qty-steppers button{flex:1;width:42px;color:var(--muted);display:flex;align-items:center;justify-content:center;background:#F8FAFC}
.qty-steppers button:hover{background:var(--accent-soft);color:var(--accent)}
.qty-steppers button:first-child{border-bottom:1px solid var(--line)}
.qty-note{font-size:12.5px;color:var(--muted);margin-top:8px;display:flex;align-items:center;gap:7px}
.qty-note.manual{color:var(--amber);font-weight:600}
.qty-note svg{width:14px;height:14px}

.confirm-btn{margin-top:18px;display:flex;align-items:center;justify-content:center;gap:10px;width:100%;background:var(--accent);color:#fff;font-size:16px;font-weight:800;letter-spacing:.03em;padding:16px;border-radius:13px;transition:.15s}
.confirm-btn:hover{background:var(--accent-dk)}
.confirm-btn:disabled{background:#94A3B8;cursor:not-allowed}
.confirm-btn svg{width:19px;height:19px}

/* right: bin list — ONE bin per row, full-width barcode */
.pane-head{padding:14px 22px;background:var(--navy);color:#fff;display:flex;align-items:center;justify-content:space-between;flex-shrink:0}
.pane-head .lbl{font-size:13px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:#93C5FD}
.pane-head .scan-tip{font-size:12px;color:#cbd5e1}
.bin-list{flex:1;padding:18px 22px 80px;overflow-y:auto;display:flex;flex-direction:column;gap:14px}
.bin-row{background:#fff;border:2px solid var(--line);border-radius:14px;padding:16px 22px;display:flex;flex-direction:row;align-items:center;gap:24px;justify-content:space-between;width:100%;text-align:left;transition:.12s;position:relative}
.bin-row:hover{border-color:var(--accent);background:#F8FAFE}
.bin-row.sel{border-color:var(--accent);background:var(--accent-soft);box-shadow:0 0 0 3px rgba(37,99,235,.12)}
.bin-meta{flex:0 0 auto;min-width:190px}
.bin-meta .bn{font-size:20px;font-weight:800;letter-spacing:.02em}
.bin-meta .bd{font-size:13px;color:var(--muted);margin-top:1px}
.bin-bc{flex:1;display:flex;align-items:center;justify-content:flex-end;overflow:hidden}
.bin-bc svg{height:58px;max-width:100%}
.bin-check{flex:0 0 auto;width:28px;height:28px;border-radius:50%;background:var(--accent);color:#fff;display:none;align-items:center;justify-content:center}
.bin-check svg{width:17px;height:17px}
.bin-row.sel .bin-check{display:flex}

/* btn helpers */
.btn{padding:12px 22px;border-radius:11px;font-weight:700;font-size:14.5px;transition:.15s}
.btn-primary{background:var(--accent);color:#fff}
.btn-primary:hover{background:var(--accent-dk)}
.btn-primary:disabled{background:#94A3B8;cursor:not-allowed}
.btn-ghost{background:#F1F5F9;color:var(--ink)}
.btn-ghost:hover{background:#E2E8F0}

/* toast */
.toast{position:fixed;bottom:26px;left:50%;transform:translateX(-50%) translateY(20px);background:var(--navy);color:#fff;padding:14px 24px;border-radius:12px;font-weight:600;font-size:14.5px;box-shadow:0 12px 40px rgba(0,0,0,.3);opacity:0;transition:.25s;z-index:80;display:flex;align-items:center;gap:10px;pointer-events:none}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.toast svg{width:18px;height:18px;color:#4ADE80}

/* small tablet / narrow landscape: keep side-by-side but allow narrower panes */
@media (max-width:920px) and (min-width:641px){
  .pane-left{width:46%;min-width:360px}
}

/* ============================================================
   MOBILE (phones, <=640px): one step at a time, full screen,
   big green/red verification, on-screen number pad.
   Desktop/tablet layout above is untouched.
   ============================================================ */
#m-stepbar{display:none}
.numpad{display:none}

#m-binhead{display:none}

@media (max-width:640px){
  body{overflow:auto}
  #app{height:100dvh}
  .title{display:none}
  header{padding:13px 16px}
  .brand b{font-size:19px}
  .hbtn{padding:9px 13px;font-size:12px}

  /* progress strip compact */
  .progress-strip{padding:12px 16px;gap:14px}
  .stat .n{font-size:26px}
  .stat .l{font-size:9px}

  /* work area becomes a single column; we show ONE step at a time */
  #work{flex-direction:column;position:relative}
  main{flex-direction:column}

  /* mobile step bar visible */
  #m-stepbar{display:flex;align-items:center;justify-content:space-between;
    background:var(--navy);color:#fff;padding:11px 14px;flex-shrink:0}
  #m-stepbar #m-back{display:inline-flex;align-items:center;gap:5px;color:#fff;font-size:14px;font-weight:700;width:60px}
  #m-stepbar #m-steptitle{font-size:13px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#93C5FD}
  /* hide back on the first (scan) step */
  #work[data-mstep="scan"] #m-back{visibility:hidden}

  /* both panes become full-width stacked; JS shows only the active one */
  .pane-left,.pane-right{width:100%!important;min-width:0!important;border:none!important;flex:none;overflow-y:auto}
  .pane-left{padding:20px 18px 96px}

  /* show only the step matching data-mstep */
  #work[data-mstep="scan"] #step-bin{display:none}
  #work[data-mstep="scan"] #capture-detail{display:none}
  #work[data-mstep="bin"] #step-scan{display:none}
  #work[data-mstep="bin"] #result-tile{display:none!important}
  #work[data-mstep="qty"] #step-scan .scan-block{display:none}
  #work[data-mstep="qty"] #step-bin{display:none}
  #work[data-mstep="qty"] #result-tile{display:none!important}
  #work[data-mstep="qty"] #m-binhead{display:none}

  /* SCAN step: field big and central */
  .scan-block h1{font-size:30px}
  .scan-field input{font-size:18px;padding:20px 54px 20px 18px}

  /* RESULT: big full-width green/red block (not a small tile) */
  #result-tile{margin-top:16px}
  #result-tile .tile{padding:26px 20px;border-width:3px}
  .tile .matnum{font-size:32px}
  .tile-head h2{font-size:20px}
  .tile.found{box-shadow:0 0 0 4px rgba(34,197,94,.18)}
  .tile.notfound{box-shadow:0 0 0 4px rgba(239,68,68,.18)}

  /* BIN step: full-width tap targets, NO barcodes on phone */
  .pane-right{background:#fff}
  .pane-head{display:none}
  /* green confirmation carried over from the scan */
  #m-binhead{display:block;padding:16px 16px 4px}
  .m-confirm{display:flex;align-items:center;gap:14px;background:var(--green-bg);
    border:2px solid var(--green-bd);border-radius:16px;padding:16px 18px}
  .m-confirm-ic{flex-shrink:0;width:42px;height:42px;border-radius:50%;background:var(--green);
    color:#fff;display:flex;align-items:center;justify-content:center}
  .m-confirm-ic svg{width:24px;height:24px}
  .m-confirm-txt{min-width:0}
  .m-confirm-l{font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:#15803D}
  .m-confirm-num{font-size:24px;font-weight:800;color:#14532D;line-height:1.1}
  .m-confirm-desc{font-size:13px;color:#166534;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .m-binprompt{font-size:18px;font-weight:800;color:var(--ink);margin:18px 2px 2px}
  .bin-list{padding:16px 16px 24px;gap:12px}
  .bin-row{padding:20px 20px;min-height:0}
  .bin-bc{display:none}              /* barcodes useless on phone — hide them */
  .bin-meta{min-width:0}
  .bin-meta .bn{font-size:21px}
  .bin-meta .bd{font-size:14px}
  .bin-row .bin-check{width:30px;height:30px}

  /* QTY step: card + big readout + number pad */
  #capture-detail{padding:18px 16px 96px}   /* bottom clearance so drawer never covers confirm */
  .sel-card{margin-top:0}
  .qty-field{margin-top:10px}
  .qty-field input{font-size:34px;padding:16px 18px;text-align:center;caret-color:transparent}
  .qty-steppers{display:none}        /* pad has its own controls */
  .qty-unit{font-size:16px;padding:0 18px}

  /* on-screen number pad */
  .numpad{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:16px}
  .np{background:#fff;border:1.5px solid var(--line-2);border-radius:14px;
    font-size:26px;font-weight:700;color:var(--ink);padding:18px 0;
    display:flex;align-items:center;justify-content:center;transition:.08s}
  .np:active{background:var(--accent-soft);border-color:var(--accent);transform:scale(.97)}
  .np-clear{color:var(--muted);font-size:22px}
  .np-del{color:var(--red)}

  /* during capture steps the remaining drawer is hidden so it can't cover actions */
  #work[data-mstep="bin"] ~ #remaining-panel,
  #work[data-mstep="qty"] ~ #remaining-panel{display:none}

  .confirm-btn{margin-top:18px;padding:18px;font-size:18px}
  /* lift the collapsed remaining drawer so it never sits over the action button */
  #remaining-panel:not(.open){box-shadow:0 -4px 16px rgba(15,23,42,.06)}
  #remaining-panel:not(.open) .rem-handle{padding:12px 16px}

  /* remaining-materials drawer: keep but make handle reachable */
  #remaining-panel .rem-handle{padding:14px 16px}
}

@media (prefers-reduced-motion:reduce){*{animation:none !important;transition:none !important}}

/* ============================================================
   Camera scanner — button + full-screen overlay
   ============================================================ */
.cam-btn{display:flex;align-items:center;justify-content:center;gap:9px;width:100%;margin-top:12px;
  background:#fff;border:2px solid var(--accent);color:var(--accent);font-size:15px;font-weight:700;
  padding:13px;border-radius:12px;transition:.12s}
.cam-btn:hover{background:var(--accent-soft)}
.cam-btn:active{transform:scale(.99)}
.cam-btn svg{width:20px;height:20px}

.cam-overlay{display:none;position:fixed;inset:0;z-index:200;background:#000}
.cam-overlay.on{display:block}
#cam-video{width:100%;height:100%;object-fit:cover;display:block}
.cam-ui{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center}
.cam-top{position:absolute;top:0;left:0;right:0;display:flex;align-items:center;justify-content:space-between;
  padding:16px;padding-top:max(16px,env(safe-area-inset-top));z-index:2}
.cam-close{width:42px;height:42px;border-radius:50%;background:rgba(0,0,0,.5);color:#fff;display:flex;align-items:center;justify-content:center}
.cam-mode{display:flex;background:rgba(0,0,0,.5);border-radius:99px;padding:4px;gap:2px}
.cam-mode-btn{color:#cbd5e1;font-size:13px;font-weight:700;padding:8px 16px;border-radius:99px;transition:.12s}
.cam-mode-btn.active{background:var(--accent);color:#fff}
.cam-reticle{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:74%;max-width:360px;aspect-ratio:1.6/1}
.cam-corner{position:absolute;width:34px;height:34px;border:4px solid #fff;border-radius:3px}
.cam-corner.tl{top:0;left:0;border-right:none;border-bottom:none}
.cam-corner.tr{top:0;right:0;border-left:none;border-bottom:none}
.cam-corner.bl{bottom:0;left:0;border-right:none;border-top:none}
.cam-corner.br{bottom:0;right:0;border-left:none;border-top:none}
.cam-hint{position:absolute;bottom:14%;left:0;right:0;text-align:center;color:#fff;font-size:15px;font-weight:600;
  text-shadow:0 1px 4px rgba(0,0,0,.6);padding:0 20px}
.cam-result{position:absolute;bottom:0;left:0;right:0;padding:20px;padding-bottom:max(20px,env(safe-area-inset-bottom));
  transform:translateY(110%);transition:transform .2s ease}
.cam-result.show{transform:translateY(0)}
.cam-result .rc{border-radius:16px;padding:16px 20px;text-align:center;font-weight:800}
.cam-result .rc.ok{background:var(--green);color:#fff}
.cam-result .rc.bad{background:var(--red);color:#fff}
.cam-result .rc .n{font-size:22px;margin-top:2px}
.cam-result .rc .l{font-size:12px;text-transform:uppercase;letter-spacing:.08em;opacity:.85}

/* ===== Bottom: remaining list ===== */
  #remaining-panel{
    position:absolute; left:0; right:0; bottom:0; background:#fff; border-top:2px solid var(--line);
    box-shadow:0 -10px 40px rgba(15,23,42,.12); transform:translateY(calc(100% - 52px)); transition:transform .3s cubic-bezier(.22,1,.36,1);
    z-index:8; display:flex; flex-direction:column; max-height:62vh;
  }
  #remaining-panel.open{transform:translateY(0)}
  .rem-handle{
    display:flex; align-items:center; justify-content:space-between; padding:14px 24px; cursor:pointer;
    background:var(--navy); color:#fff; flex-shrink:0;
  }
  .rem-handle .lt{display:flex; align-items:center; gap:12px; font-weight:800; letter-spacing:.04em; font-size:15px}
  .rem-handle .lt .logo-s{height:20px;width:auto}
  .rem-handle .chev{transition:.3s}
  #remaining-panel.open .rem-handle .chev{transform:rotate(180deg)}
  .rem-body{flex:1; overflow:hidden; display:flex; flex-direction:column; min-height:0}
  .rem-controls{display:flex; gap:12px; align-items:center; padding:14px 24px; border-bottom:1px solid var(--line); flex-shrink:0; flex-wrap:wrap}
  .rem-search{flex:1; min-width:200px; position:relative}
  .rem-search input{width:100%; padding:10px 14px 10px 38px; border:1px solid var(--line-2); border-radius:10px; font-size:14px; outline:none}
  .rem-search input:focus{border-color:var(--accent)}
  .rem-search svg{position:absolute; left:12px; top:50%; transform:translateY(-50%); width:16px;height:16px; color:var(--muted)}
  .rem-count{font-size:13px; color:var(--muted); font-weight:600; padding:0 24px 10px}
  .rem-list{flex:1; overflow-y:auto; padding:0 14px 14px}
  .rem-item{display:flex; align-items:center; gap:14px; padding:11px 12px; border-bottom:1px solid #F1F5F9}
  .rem-item .rn{font-weight:700; font-size:14px; min-width:120px; font-variant-numeric:tabular-nums}
  .rem-item .rd{flex:1; color:var(--muted); font-size:14px}
  .rem-item .rcube{color:#CBD5E1}
  .rem-item .rcube svg{width:18px;height:18px}
  .rem-empty{text-align:center; color:var(--muted); padding:40px; font-size:15px}

  /* ===== Modals (import mapping, settings) ===== */
  .modal-bg{position:fixed; inset:0; background:rgba(15,23,42,.55); backdrop-filter:blur(3px); z-index:50; display:flex; align-items:center; justify-content:center; padding:24px; animation:pop .18s ease-out}
  .modal{background:#fff; border-radius:18px; width:min(720px,96vw); max-height:90vh; display:flex; flex-direction:column; box-shadow:0 30px 80px rgba(0,0,0,.4)}
  .modal-head{display:flex; align-items:center; justify-content:space-between; padding:22px 26px; border-bottom:1px solid var(--line)}
  .modal-head h3{font-size:20px; font-weight:800}
  .modal-head .x{width:36px;height:36px;border-radius:10px;display:flex;align-items:center;justify-content:center;color:var(--muted)}
  .modal-head .x:hover{background:#F1F5F9}
  .modal-body{padding:24px 26px; overflow-y:auto}
  .modal-foot{padding:18px 26px; border-top:1px solid var(--line); display:flex; gap:12px; justify-content:flex-end}

  .drop{border:2.5px dashed var(--line-2); border-radius:14px; padding:34px; text-align:center; transition:.15s; cursor:pointer}
  .drop:hover,.drop.drag{border-color:var(--accent); background:#F8FAFE}
  .drop svg{width:42px;height:42px;color:var(--accent); margin-bottom:12px}
  .drop .dt{font-size:16px; font-weight:700}
  .drop .ds{font-size:13.5px; color:var(--muted); margin-top:5px}

  .map-intro{font-size:14.5px; color:var(--muted); margin-bottom:18px; line-height:1.5}
  .map-grid{display:flex; flex-direction:column; gap:13px}
  .map-row{display:flex; align-items:center; gap:14px}
  .map-row .field-name{flex:1; font-weight:700; font-size:15px; display:flex; align-items:center; gap:8px}
  .map-row .req{color:var(--red); font-weight:800}
  .map-row .opt{font-size:11px; color:var(--muted); font-weight:600; background:#F1F5F9; padding:2px 8px; border-radius:6px; text-transform:uppercase; letter-spacing:.05em}
  .map-row select{flex:1.2; padding:11px 14px; border:1px solid var(--line-2); border-radius:10px; font-size:14px; background:#fff; outline:none}
  .map-row select:focus{border-color:var(--accent)}
  .map-row select.unset-req{border-color:var(--red-bd); background:var(--red-bg)}

  .settings-sec{margin-bottom:26px}
  .settings-sec h4{font-size:13px; font-weight:800; text-transform:uppercase; letter-spacing:.06em; color:var(--accent); margin-bottom:12px}
  .ff-row{display:flex; align-items:center; gap:14px; background:#F8FAFC; border:1px solid var(--line); border-radius:12px; padding:14px 18px}
  .ff-row label{font-weight:600; font-size:14.5px; flex:1}
  .ff-row .ff-input{display:flex; align-items:center; gap:6px}
  .ff-row input{width:80px; padding:9px 12px; border:1px solid var(--line-2); border-radius:9px; font-size:16px; font-weight:700; text-align:center; outline:none}
  .ff-row input:focus{border-color:var(--accent)}

  .bin-edit-list{display:flex; flex-direction:column; gap:10px; margin-bottom:14px}
  .bin-edit{display:grid; grid-template-columns:1.4fr .8fr .8fr .8fr auto; gap:9px; align-items:center}
  .bin-edit input{padding:10px 11px; border:1px solid var(--line-2); border-radius:9px; font-size:14px; outline:none; width:100%}
  .bin-edit input:focus{border-color:var(--accent)}
  .bin-edit input.bname{font-weight:700}
  .bin-edit .del{width:38px;height:38px;border-radius:9px;background:#FEF2F2;color:var(--red);display:flex;align-items:center;justify-content:center;flex-shrink:0}
  .bin-edit .del:hover{background:#FEE2E2}
  .bin-edit .del svg{width:16px;height:16px}
  .bin-edit-head{display:grid; grid-template-columns:1.4fr .8fr .8fr .8fr auto; gap:9px; font-size:11px; font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:.05em; padding:0 2px}
  .bin-edit-head span:last-child{width:38px}
  .add-bin{display:inline-flex; align-items:center; gap:8px; color:var(--accent); font-weight:700; font-size:14px; padding:10px 0}
  .add-bin svg{width:18px;height:18px}
  .add-bin:disabled{color:#CBD5E1; cursor:not-allowed}

  .btn{padding:12px 22px; border-radius:11px; font-weight:700; font-size:14.5px; transition:.15s}
  .btn-primary{background:var(--accent); color:#fff}
  .btn-primary:hover{background:var(--accent-dk)}
  .btn-primary:disabled{background:#94A3B8; cursor:not-allowed}
  .btn-ghost{background:#F1F5F9; color:var(--ink)}
  .btn-ghost:hover{background:#E2E8F0}

  /* empty state (no list loaded) */
  #empty-state{flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:30px}
  #empty-state .es-ic{width:90px;height:90px;border-radius:24px;background:#EFF4FE;color:var(--accent);display:flex;align-items:center;justify-content:center;margin-bottom:24px}
  #empty-state .es-ic svg{width:48px;height:48px}
  #empty-state h1{font-size:34px; font-weight:800; margin-bottom:10px}
  #empty-state p{font-size:17px; color:var(--muted); max-width:440px; line-height:1.55; margin-bottom:28px}
  #empty-state .es-btn{display:inline-flex; align-items:center; gap:11px; background:var(--accent); color:#fff; font-size:16px; font-weight:700; padding:16px 30px; border-radius:13px}
  #empty-state .es-btn:hover{background:var(--accent-dk)}
  #empty-state .es-btn svg{width:20px;height:20px}

  .toast{position:fixed; bottom:26px; left:50%; transform:translateX(-50%) translateY(20px); background:var(--navy); color:#fff; padding:14px 24px; border-radius:12px; font-weight:600; font-size:14.5px; box-shadow:0 12px 40px rgba(0,0,0,.3); opacity:0; transition:.25s; z-index:80; display:flex; align-items:center; gap:10px; pointer-events:none}
  .toast.show{opacity:1; transform:translateX(-50%) translateY(0)}
  .toast svg{width:18px;height:18px; color:#4ADE80}

  @media (max-width:900px){
    #step-bin{flex-direction:column}
    .bin-right{width:100%; max-width:none; border-left:none; border-top:1px solid var(--line)}
    #step-scan h1{font-size:40px}
    .title{display:none}
  }
  @media (prefers-reduced-motion:reduce){*{animation:none !important; transition:none !important}}



  /* language switcher */
  .lang-select{background:rgba(255,255,255,.12);color:#fff;border:1px solid rgba(255,255,255,.25);
    border-radius:8px;font-size:13px;font-weight:600;padding:8px 10px;cursor:pointer;outline:none}
  .lang-select option{color:#111827;background:#fff}
  @media (max-width:640px){ .lang-select{padding:7px 8px;font-size:12px} }