:root{--ink:#17211e;--muted:#687570;--line:#dfe6e2;--surface:#fff;--soft:#f6f8f7;--canvas:#edf1ef;--navy:#102821;--accent:#1a9d70;--accent-strong:#087653;--accent-soft:#e5f7ef;--signal:#e4ff5f;--danger:#e44747;--danger-soft:#fff0f0;--warning-soft:#fff7dd;--shadow:0 16px 50px rgba(20,45,37,.08)}
*{box-sizing:border-box}html{background:var(--canvas);color:var(--ink);font-family:"Leelawadee UI",Tahoma,system-ui,sans-serif}body{min-height:100vh;margin:0;background:linear-gradient(rgba(255,255,255,.42) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.42) 1px,transparent 1px),var(--canvas);background-size:32px 32px}button,input{font:inherit}
.topbar{position:sticky;top:0;z-index:10;height:78px;padding:0 clamp(20px,4vw,56px);display:flex;align-items:center;justify-content:space-between;color:#fff;background:rgba(16,40,33,.96);border-bottom:1px solid rgba(255,255,255,.08);backdrop-filter:blur(16px)}.brand{display:flex;align-items:center;gap:14px}.brand strong{display:block;font-size:20px;font-weight:700;letter-spacing:-.3px}.brand small{display:block;margin-top:1px;color:#9fb8af;font-size:11px;letter-spacing:.5px}.brand-mark{width:43px;height:43px;padding:10px;display:flex;align-items:flex-end;gap:3px;border-radius:12px;background:var(--signal);box-shadow:0 0 0 5px rgba(228,255,95,.08)}.brand-mark span{width:5px;border-radius:3px;background:var(--navy)}.brand-mark span:nth-child(1){height:12px}.brand-mark span:nth-child(2){height:23px}.brand-mark span:nth-child(3){height:17px}.header-actions{display:flex;align-items:center;gap:12px}.clock{padding:8px 13px;color:#d8e7e1;font-size:15px;font-variant-numeric:tabular-nums;border:1px solid rgba(255,255,255,.1);border-radius:9px}
.layout{width:min(1480px,100%);margin:0 auto;padding:30px clamp(16px,4vw,56px) 56px;display:grid;grid-template-columns:minmax(360px,.86fr) minmax(480px,1.14fr);gap:20px}.card{overflow:hidden;background:rgba(255,255,255,.96);border:1px solid rgba(211,222,217,.95);border-radius:16px;box-shadow:var(--shadow)}.scan-panel,.result-panel{min-height:530px}.scan-panel{position:relative;padding:30px}.scan-panel:before{content:"";position:absolute;inset:0 0 auto;height:4px;background:linear-gradient(90deg,var(--signal),var(--accent))}
.section-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:20px}.section-heading h1,.section-heading h2{margin:0;line-height:1.2;letter-spacing:-.45px}.section-heading h1{font-size:28px}.section-heading h2{font-size:22px}.eyebrow{margin:0 0 6px;color:var(--accent-strong);font-size:10px;font-weight:800;letter-spacing:2px}.online{display:inline-flex;align-items:center;gap:7px;padding:7px 11px;color:var(--accent-strong);background:var(--accent-soft);border-radius:8px;font-size:11px;font-weight:700;white-space:nowrap}.online i{width:7px;height:7px;background:var(--accent);border-radius:50%;box-shadow:0 0 0 4px rgba(26,157,112,.12)}
#scanForm{margin-top:34px}.field{display:block}.field span{display:flex;align-items:center;gap:10px;margin-bottom:10px;color:#42504c;font-size:13px;font-weight:700}.field b{width:25px;height:25px;display:grid;place-items:center;color:var(--navy);background:var(--signal);border-radius:7px;font-size:11px}.field input{width:100%;height:76px;padding:0 20px;color:var(--navy);background:#f8faf9;border:1px solid #d9e1dd;border-radius:12px;outline:0;font-size:23px;font-weight:700;letter-spacing:.5px;transition:.18s}.field input::placeholder{color:#a0aaa6;font-weight:500}.field input:focus{background:#fff;border-color:var(--accent);box-shadow:0 0 0 4px rgba(26,157,112,.11)}.field input:disabled{color:#98a39f;background:#edf1ef}.connector{width:2px;height:27px;margin:5px 0 5px 12px;background:repeating-linear-gradient(to bottom,#aec1b9 0 4px,transparent 4px 8px)}
.button{height:44px;padding:0 18px;color:var(--navy);background:#fff;border:0;border-radius:9px;font-weight:700;cursor:pointer;transition:.16s}.button:hover{transform:translateY(-1px)}.button:active{transform:none}.button:disabled{opacity:.5;cursor:wait;transform:none}.button-light{border:1px solid rgba(255,255,255,.15);background:rgba(255,255,255,.1);color:#fff}.button-light:hover{background:rgba(255,255,255,.16)}.button-primary{color:#fff;background:var(--accent-strong);box-shadow:0 8px 20px rgba(8,118,83,.19)}.button-primary:hover{background:#065f43}#scanForm .button{width:100%;height:54px;margin-top:25px}.keyboard-hint{margin-top:17px;color:#7e8a85;font-size:11px;text-align:center}
.result-panel{padding:0;display:grid;background:#fbfcfb}.empty-result{place-self:stretch;display:grid;place-content:center;justify-items:center;text-align:center;color:var(--muted);background:radial-gradient(circle at 50% 42%,#fff 0,#f7faf8 42%,#f0f4f2 100%)}.empty-result h2{margin:21px 0 3px;color:#3d4c47;font-size:22px}.empty-result p{margin:0;font-size:13px}.scan-illustration{position:relative;width:118px;height:94px;border:2px solid #b8c9c2;border-radius:18px;background:rgba(255,255,255,.75);box-shadow:inset 0 0 0 7px rgba(235,241,238,.7)}.scan-illustration:before,.scan-illustration:after{content:"";position:absolute;left:25px;right:25px;height:3px;background:#cbd8d3}.scan-illustration:before{top:29px;box-shadow:0 12px #cbd8d3,0 24px #cbd8d3}.scan-illustration:after{left:34px;right:34px;top:10px;background:var(--accent);box-shadow:0 70px var(--accent)}.scan-illustration span{position:absolute;z-index:2;left:-12px;right:-12px;top:46px;height:2px;background:var(--signal);box-shadow:0 0 14px rgba(190,221,38,.8)}
.hidden{display:none!important}.result-content{height:100%;padding:24px;display:flex;flex-direction:column}.result-status{min-height:76px;padding:14px 17px;display:flex;align-items:center;gap:13px;color:var(--accent-strong);background:var(--accent-soft);border:1px solid #c9eddd;border-radius:12px}.result-status.wrong{color:var(--danger);background:var(--danger-soft);border-color:#ffd4d4}.result-status>span{width:42px;height:42px;display:grid;place-items:center;flex:0 0 auto;color:var(--navy);background:var(--signal);border-radius:10px;font-size:25px;font-weight:800}.result-status.wrong>span{color:#fff;background:var(--danger)}.result-status p{margin:0;font-size:10px;font-weight:700;letter-spacing:.7px;text-transform:uppercase;opacity:.72}.result-status h2{margin:-1px 0 0;font-size:24px}
.product-view{margin:21px 0;display:grid;grid-template-columns:minmax(200px,.82fr) 1.18fr;gap:25px}.product-image-wrap{position:relative;min-height:270px;display:grid;place-items:center;overflow:hidden;background:#fff;border:1px solid var(--line);border-radius:12px}.product-image-wrap img{width:100%;height:100%;object-fit:contain;background:#fff}.product-image-wrap div{color:#8b9792;font-size:12px}.product-info{padding-top:5px}.product-info h3{margin:8px 0 4px;font-size:clamp(21px,2vw,27px);line-height:1.28;letter-spacing:-.45px}.product-info>p:not(.eyebrow){margin:0;color:var(--muted);font-size:14px;line-height:1.45}.shelf{margin:23px 0 15px;padding:14px 16px;background:var(--warning-soft);border:1px solid #f3e3a6;border-radius:10px}.shelf small{display:block;color:#756c4d;font-size:10px;font-weight:700;letter-spacing:.5px}.shelf strong{display:block;margin-top:2px;color:#4c442b;font-size:25px}.product-info dl{margin:0}.product-info dl div{padding:8px 1px;display:flex;justify-content:space-between;gap:18px;border-bottom:1px solid var(--line)}.product-info dt{color:var(--muted);font-size:11px}.product-info dd{margin:0;font-size:13px;font-weight:700;text-align:right}.result-content>.button{width:100%;margin-top:auto}
.history{grid-column:1/-1;padding:26px 28px 15px}.history-heading{align-items:center}.stats{display:flex;gap:8px}.stats div{min-width:95px;padding:9px 13px;background:var(--soft);border:1px solid #e8edeb;border-radius:9px}.stats span{display:block;color:var(--muted);font-size:10px}.stats strong{font-size:21px;font-variant-numeric:tabular-nums}.stats .success strong{color:var(--accent-strong)}.stats .danger strong{color:var(--danger)}.table-wrap{margin-top:19px;overflow-x:auto}table{width:100%;border-collapse:collapse;text-align:left}th{padding:10px 13px;color:#75817c;background:#f4f7f5;border-block:1px solid #e5ebe8;font-size:9px;font-weight:800;letter-spacing:.9px;text-transform:uppercase}td{padding:13px;border-bottom:1px solid #e9eeec;font-size:12px;vertical-align:middle}tbody tr{transition:background .15s}tbody tr:hover{background:#f8faf9}td code{font-family:inherit;font-size:12px;font-weight:700}.product-cell strong,.product-cell small{display:block}.product-cell small{margin-top:2px;color:var(--muted)}.status-pill{display:inline-flex;align-items:center;gap:5px;padding:5px 8px;color:var(--accent-strong);background:var(--accent-soft);border-radius:6px;font-size:10px;font-weight:800}.status-pill:before{content:"";width:6px;height:6px;background:var(--accent);border-radius:50%}.status-pill.wrong{color:var(--danger);background:var(--danger-soft)}.status-pill.wrong:before{background:var(--danger)}.empty-table{padding:29px;color:#8b9792;text-align:center}
dialog{width:min(520px,calc(100% - 28px));padding:0;overflow:hidden;background:#fff;border:0;border-radius:16px;box-shadow:0 30px 90px rgba(7,28,22,.3)}dialog::backdrop{background:rgba(8,26,21,.68);backdrop-filter:blur(5px)}.dialog-card{position:relative;padding:30px}.dialog-card h2{margin:3px 0 6px;font-size:25px}.dialog-card>p:not(.eyebrow):not(.import-note){margin:0 0 18px;color:var(--muted);font-size:12px;line-height:1.55}.close{position:absolute;top:13px;right:17px;padding:3px 8px;color:#71807a;background:transparent;border:0;font-size:27px;cursor:pointer}.dropzone{height:180px;display:flex;flex-direction:column;align-items:center;justify-content:center;background:#f7faf8;border:1.5px dashed #afc4bb;border-radius:12px;cursor:pointer}.dropzone.drag{background:var(--accent-soft);border-color:var(--accent)}.dropzone input{position:absolute;opacity:0;pointer-events:none}.upload-icon{width:43px;height:43px;display:grid;place-items:center;color:#fff;background:var(--accent-strong);border-radius:10px;font-size:24px}.dropzone strong{margin-top:9px}.dropzone small{color:var(--muted);font-size:11px}.dialog-card>.button{width:100%;height:50px;margin-top:18px}.import-note{margin:10px 0 0;color:var(--muted);font-size:11px;text-align:center}.toast{position:fixed;z-index:30;right:24px;bottom:24px;max-width:390px;padding:13px 18px;color:#fff;background:#173a31;border:1px solid rgba(255,255,255,.12);border-radius:10px;box-shadow:0 20px 55px rgba(7,28,22,.25);opacity:0;transform:translateY(15px);pointer-events:none;transition:.22s}.toast.show{opacity:1;transform:none}.toast.error{background:#a72e2e}
@media(max-width:930px){.layout{grid-template-columns:1fr}.scan-panel,.result-panel{min-height:auto}.result-panel{min-height:470px}.history{grid-column:auto}.history-heading{align-items:flex-start;flex-direction:column}.stats{width:100%}.stats div{flex:1}}
@media(max-width:620px){.topbar{position:static;height:auto;padding:13px 15px}.brand strong{font-size:17px}.brand-mark{width:38px;height:38px}.clock{display:none}.header-actions{gap:7px}.button-light{padding-inline:11px;font-size:12px}.layout{padding:15px 10px 32px}.scan-panel,.result-content,.history{padding:20px}.section-heading{gap:10px}.section-heading h1{font-size:23px}.product-view{grid-template-columns:1fr}.product-image-wrap{min-height:220px}.stats{gap:5px}.stats div{min-width:0;padding:7px}.table-wrap{margin-inline:-20px}th,td{padding:10px 8px}}

/* Modern indigo theme */
:root{--ink:#111827;--muted:#6b7280;--line:#e5e7eb;--surface:#fff;--soft:#f8fafc;--canvas:#f3f4f8;--navy:#111827;--accent:#6366f1;--accent-strong:#4f46e5;--accent-soft:#eef2ff;--signal:#67e8f9;--danger:#ef4444;--danger-soft:#fef2f2;--warning-soft:#fff7ed;--shadow:0 18px 55px rgba(15,23,42,.07)}
html{font-family:"Segoe UI","Leelawadee UI",Tahoma,system-ui,sans-serif}body{background:radial-gradient(circle at 4% 0%,rgba(99,102,241,.09),transparent 28rem),radial-gradient(circle at 96% 9%,rgba(14,165,233,.07),transparent 25rem),#f5f6fa;background-size:auto}
.topbar{height:72px;background:rgba(17,24,39,.96);border-bottom:1px solid rgba(255,255,255,.09);box-shadow:0 8px 30px rgba(15,23,42,.1)}.brand small{color:#9ca3af}.brand-mark{background:linear-gradient(145deg,#818cf8,#4f46e5);box-shadow:0 8px 22px rgba(79,70,229,.32)}.brand-mark span{background:#fff}.clock{color:#d1d5db;border-color:rgba(255,255,255,.12)}
.layout{padding-top:26px;gap:18px}.card{border-color:#e6e8ef;border-radius:22px;box-shadow:var(--shadow)}.scan-panel{padding:32px}.scan-panel:before{height:3px;background:linear-gradient(90deg,#4f46e5,#0ea5e9,#67e8f9)}.eyebrow{color:#6366f1}.online{color:#4338ca;background:#eef2ff}.online i{background:#6366f1;box-shadow:0 0 0 4px rgba(99,102,241,.12)}
.field span{color:#374151}.field b{color:#fff;background:linear-gradient(145deg,#6366f1,#4f46e5);box-shadow:0 5px 12px rgba(79,70,229,.2)}.field input{color:#111827;background:#f9fafb;border-color:#e5e7eb;border-radius:15px}.field input:focus{border-color:#6366f1;box-shadow:0 0 0 4px rgba(99,102,241,.12)}.field input:disabled{color:#9ca3af;background:#f1f3f7}.connector{background:repeating-linear-gradient(to bottom,#c7cad4 0 4px,transparent 4px 8px)}
.button-primary{background:linear-gradient(135deg,#4f46e5,#6366f1);box-shadow:0 10px 24px rgba(79,70,229,.22)}.button-primary:hover{background:linear-gradient(135deg,#4338ca,#4f46e5)}.button-light{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.13)}
.button-clear{color:#fecaca;background:rgba(239,68,68,.1);border:1px solid rgba(248,113,113,.22)}.button-clear:hover{background:rgba(239,68,68,.18)}.button-end{color:#111827;background:#fff}.button-end:hover{background:#eef2ff}.header-actions .button{white-space:nowrap}
.result-panel{background:#fff}.empty-result{background:radial-gradient(circle at 50% 43%,#fff 0,#fafbff 48%,#f2f4fa 100%)}.scan-illustration{border-color:#c7cad7;background:rgba(255,255,255,.8);box-shadow:inset 0 0 0 7px rgba(238,242,255,.8),0 14px 34px rgba(79,70,229,.08)}.scan-illustration:before{background:#d8dae4;box-shadow:0 12px #d8dae4,0 24px #d8dae4}.scan-illustration:after{background:#6366f1;box-shadow:0 70px #6366f1}.scan-illustration span{background:#38bdf8;box-shadow:0 0 16px rgba(56,189,248,.9)}
.result-status{color:#4338ca;background:#eef2ff;border-color:#dfe3ff}.result-status>span{color:#fff;background:linear-gradient(145deg,#6366f1,#4f46e5);box-shadow:0 8px 18px rgba(79,70,229,.2)}.result-status.wrong{color:#dc2626;background:#fef2f2;border-color:#fee2e2}.result-status.wrong>span{background:#ef4444}.product-image-wrap{border-color:#e5e7eb;border-radius:16px}.shelf{background:#fff7ed;border-color:#fed7aa}.shelf small{color:#9a5c21}.shelf strong{color:#7c4218}
.stats div{background:#f8fafc;border-color:#e8eaf0;border-radius:12px}.stats .success strong{color:#4f46e5}.stats .danger strong{color:#ef4444}th{color:#6b7280;background:#f8fafc;border-color:#e5e7eb}.status-pill{color:#4338ca;background:#eef2ff}.status-pill:before{background:#6366f1}.status-pill.wrong{color:#dc2626;background:#fef2f2}.status-pill.wrong:before{background:#ef4444}tbody tr:hover{background:#fafaff}
dialog{border-radius:22px;box-shadow:0 35px 100px rgba(15,23,42,.32)}dialog::backdrop{background:rgba(15,23,42,.72)}.dropzone{background:#fafbff;border-color:#c7cad7}.dropzone.drag{background:#eef2ff;border-color:#6366f1}.upload-icon{background:linear-gradient(145deg,#6366f1,#4f46e5)}.toast{background:#111827;box-shadow:0 20px 55px rgba(15,23,42,.28)}

/* SweetAlert2 follows the Scan Warehouse visual language. */
.swal2-container{font-family:inherit}.swal2-popup{border-radius:22px!important;box-shadow:0 30px 90px rgba(15,23,42,.28)!important}.swal2-title{color:#172033!important;font-size:1.55rem!important}.swal2-html-container{color:#64748b!important}.swal2-confirm,.swal2-cancel{min-width:108px;border:0!important;border-radius:10px!important;padding:.75rem 1.2rem!important;font:700 14px inherit!important;box-shadow:none!important}.swal2-confirm{background:#4f46e5!important}.swal2-toast{border:1px solid #e5e7eb!important;border-radius:14px!important;box-shadow:0 18px 48px rgba(15,23,42,.2)!important}.swal2-toast .swal2-title{font-size:.95rem!important;color:#172033!important}.swal2-timer-progress-bar{background:#6366f1!important}

body:after{content:"";position:fixed;z-index:999;inset:0;opacity:0;pointer-events:none;transition:opacity .2s}
body.scan-success:after{background:rgba(34,197,94,.24);box-shadow:inset 0 0 110px rgba(22,163,74,.55);animation:screenSignal 1s ease-in-out infinite}
body.scan-error:after{background:rgba(239,68,68,.25);box-shadow:inset 0 0 110px rgba(220,38,38,.6);animation:screenSignal .48s ease-in-out infinite}
body.scan-success .result-panel{border-color:#22c55e;box-shadow:0 0 0 5px rgba(34,197,94,.18),0 24px 70px rgba(22,163,74,.22)}
body.scan-error .result-panel{border-color:#ef4444;box-shadow:0 0 0 5px rgba(239,68,68,.18),0 24px 70px rgba(220,38,38,.24)}
body.scan-success .result-status{color:#15803d;background:#dcfce7;border-color:#86efac}
body.scan-success .result-status>span{color:#fff;background:linear-gradient(145deg,#22c55e,#16a34a);box-shadow:0 8px 20px rgba(22,163,74,.28)}
body.scan-error .result-status{color:#b91c1c;background:#fee2e2;border-color:#fca5a5}
body.scan-error .result-status>span{color:#fff;background:linear-gradient(145deg,#ef4444,#dc2626);box-shadow:0 8px 20px rgba(220,38,38,.3)}
@keyframes screenSignal{0%,100%{opacity:.3}50%{opacity:.72}}
@media(prefers-reduced-motion:reduce){body.scan-success:after,body.scan-error:after{animation:none;opacity:.42}}
@media(max-width:850px){.topbar{height:auto;min-height:72px;padding-block:12px;gap:12px;align-items:flex-start}.header-actions{justify-content:flex-end;flex-wrap:wrap}.header-actions .button{height:38px;padding-inline:11px;font-size:11px}}

.user-chip{min-width:110px;padding:6px 11px;display:flex;flex-direction:column;color:#fff;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);border-radius:10px}.user-chip b{max-width:170px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:11px}.user-chip small{color:#a5b4fc;font-size:9px}
.login-page{display:grid;place-items:center;padding:24px;background:radial-gradient(circle at 20% 10%,rgba(99,102,241,.22),transparent 34rem),radial-gradient(circle at 90% 90%,rgba(14,165,233,.16),transparent 30rem),#eef0f7}.login-shell{width:min(440px,100%)}.login-card{padding:38px;background:rgba(255,255,255,.96);border:1px solid rgba(255,255,255,.8);border-radius:28px;box-shadow:0 30px 90px rgba(15,23,42,.18)}.login-brand{margin-bottom:38px;display:flex;align-items:center;gap:13px}.login-brand strong{display:block;font-size:20px}.login-brand small{display:block;color:#6b7280;font-size:11px}.login-card h1{margin:0;color:#111827;font-size:34px}.login-card>p:not(.eyebrow){margin:8px 0 28px;color:#6b7280;line-height:1.6}.login-card form label{display:block;margin-bottom:8px;color:#374151;font-size:12px;font-weight:700}.login-card form input{width:100%;height:60px;padding:0 17px;color:#111827;background:#f9fafb;border:1px solid #dfe2ea;border-radius:14px;outline:0;font-size:18px;font-weight:700}.login-card form input:focus{background:#fff;border-color:#6366f1;box-shadow:0 0 0 4px rgba(99,102,241,.12)}.login-card form .button{width:100%;height:52px;margin-top:16px}.login-note{display:block;margin-top:20px;color:#9ca3af;text-align:center;font-size:10px}