:root{--accent: #0066FF;--accent-2: #4D9BFF;--accent-soft: #E5EFFF;--bg-0: #F4F6FB;--bg-1: #FFFFFF;--bg-glass: rgba(255,255,255,.62);--bg-glass-strong: rgba(255,255,255,.78);--border: rgba(15, 23, 42, .08);--border-strong: rgba(15, 23, 42, .14);--ink-0: #0B1220;--ink-1: #1E293B;--ink-2: #475569;--ink-3: #94A3B8;--good: #10B981;--warn: #F59E0B;--bad: #EF4444;--pad: 20px;--radius: 16px;--radius-sm: 10px;--shadow-sm: 0 1px 2px rgba(15,23,42,.04), 0 4px 12px rgba(15,23,42,.04);--shadow-md: 0 6px 18px rgba(15,23,42,.06), 0 24px 48px rgba(15,23,42,.06);--shadow-lg: 0 12px 30px rgba(15,23,42,.08), 0 40px 80px rgba(15,23,42,.1);--row-h: 44px;--font: "IBM Plex Sans Thai", ui-sans-serif, -apple-system, "Segoe UI", "Helvetica Neue", sans-serif;--mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace}[data-theme=dark]{--bg-0: #070B17;--bg-1: #0E1426;--bg-glass: rgba(20, 27, 50, .55);--bg-glass-strong: rgba(20, 27, 50, .78);--border: rgba(148, 163, 184, .12);--border-strong: rgba(148, 163, 184, .22);--ink-0: #F1F5F9;--ink-1: #E2E8F0;--ink-2: #94A3B8;--ink-3: #64748B;--accent-soft: rgba(0, 102, 255, .14);--shadow-sm: 0 1px 2px rgba(0,0,0,.4), 0 4px 12px rgba(0,0,0,.3);--shadow-md: 0 6px 18px rgba(0,0,0,.4), 0 24px 48px rgba(0,0,0,.35);--shadow-lg: 0 12px 30px rgba(0,0,0,.5), 0 40px 80px rgba(0,0,0,.4)}[data-density=compact]{--pad: 14px;--row-h: 36px}[data-density=spacious]{--pad: 28px;--row-h: 52px}*{box-sizing:border-box}html,body{margin:0;padding:0;height:100%}body{font-family:var(--font);background:var(--bg-0);color:var(--ink-0);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow:hidden}.bg-orbs{position:fixed;top:0;right:0;bottom:0;left:0;z-index:0;overflow:hidden;pointer-events:none}.bg-orbs:before,.bg-orbs:after,.bg-orbs span{content:"";position:absolute;border-radius:50%;filter:blur(80px);opacity:.55;will-change:transform}.bg-orbs:before{width:520px;height:520px;left:-120px;top:-120px;background:radial-gradient(circle,var(--accent),transparent 70%);animation:drift1 22s ease-in-out infinite alternate}.bg-orbs:after{width:480px;height:480px;right:-140px;bottom:-160px;background:radial-gradient(circle,#FF6B9D,transparent 70%);opacity:.35;animation:drift2 28s ease-in-out infinite alternate}.bg-orbs span{width:380px;height:380px;left:40%;top:30%;background:radial-gradient(circle,#00D4B0,transparent 70%);opacity:.28;animation:drift3 26s ease-in-out infinite alternate}[data-theme=dark] .bg-orbs:before{opacity:.35}[data-theme=dark] .bg-orbs:after{opacity:.25}[data-theme=dark] .bg-orbs span{opacity:.22}@keyframes drift1{to{transform:translate(140px,80px) scale(1.1)}}@keyframes drift2{to{transform:translate(-100px,-60px) scale(1.15)}}@keyframes drift3{to{transform:translate(-60px,120px) scale(.9)}}.app{position:relative;z-index:1;display:grid;grid-template-columns:232px 1fr;height:100vh}.app[data-nav=icon]{grid-template-columns:72px 1fr}.sidebar{margin:12px 0 12px 12px;padding:14px 12px;border:1px solid var(--border);background:var(--bg-glass);-webkit-backdrop-filter:blur(20px) saturate(180%);backdrop-filter:blur(20px) saturate(180%);border-radius:20px;display:flex;flex-direction:column;gap:4px;box-shadow:var(--shadow-sm)}.brand{display:flex;align-items:center;gap:10px;padding:6px 10px 14px;border-bottom:1px solid var(--border);margin-bottom:8px}.brand-mark{width:34px;height:34px;border-radius:10px;flex-shrink:0;background:conic-gradient(from 200deg,var(--accent),#FF6B9D,#00D4B0,var(--accent));display:grid;place-items:center;color:#fff;font-weight:700;font-size:16px;box-shadow:0 6px 18px -6px var(--accent),inset 0 0 0 2px #ffffff4d}.brand-name{font-weight:600;font-size:14px;line-height:1.2}.brand-sub{font-size:11px;color:var(--ink-2);margin-top:2px}.app[data-nav=icon] .brand-name,.app[data-nav=icon] .brand-sub,.app[data-nav=icon] .nav-lbl,.app[data-nav=icon] .sidebar-foot{display:none}.app[data-nav=icon] .brand{justify-content:center;padding:6px 0 14px}.app[data-nav=icon] .nav-item{justify-content:center;padding:10px}.nav-section{font-size:10px;text-transform:uppercase;letter-spacing:.08em;color:var(--ink-3);padding:12px 12px 6px;font-weight:600}.app[data-nav=icon] .nav-section{display:none}.nav-item{display:flex;align-items:center;gap:11px;padding:9px 12px;border-radius:10px;color:var(--ink-1);cursor:pointer;-webkit-user-select:none;user-select:none;position:relative;transition:background .18s ease,color .18s ease,transform .18s ease;font-size:13.5px;font-weight:500}.nav-item:hover{background:var(--accent-soft);color:var(--accent)}.nav-item.active{background:var(--accent);color:#fff;box-shadow:0 8px 18px -6px var(--accent)}.nav-item.active .nav-ico{color:#fff}.nav-ico{width:18px;height:18px;flex-shrink:0;color:var(--ink-2)}.nav-item.active .nav-ico,.nav-item:hover .nav-ico{color:inherit}.nav-badge{margin-left:auto;font-size:10.5px;padding:2px 7px;border-radius:99px;background:var(--bad);color:#fff;font-weight:600;font-variant-numeric:tabular-nums}.nav-item.active .nav-badge{background:#ffffff40}.app[data-nav=icon] .nav-badge{position:absolute;top:4px;right:4px;padding:1px 5px;font-size:9.5px}.sidebar-foot{margin-top:auto;padding:10px;border-top:1px solid var(--border);display:flex;align-items:center;gap:10px}.avatar{width:32px;height:32px;border-radius:50%;background:linear-gradient(135deg,#ffb36b,#ff6b9d);flex-shrink:0;display:grid;place-items:center;color:#fff;font-weight:600;font-size:12px}.user-name{font-size:12.5px;font-weight:500;line-height:1.2}.user-role{font-size:10.5px;color:var(--ink-2);margin-top:2px}.main{display:flex;flex-direction:column;min-width:0;padding:12px;gap:12px}.topbar{display:flex;align-items:center;gap:12px;padding:10px 16px;border:1px solid var(--border);background:var(--bg-glass);-webkit-backdrop-filter:blur(20px) saturate(180%);backdrop-filter:blur(20px) saturate(180%);border-radius:16px;box-shadow:var(--shadow-sm)}.crumb{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--ink-2)}.crumb b{color:var(--ink-0);font-weight:600}.search{flex:1;max-width:460px;margin:0 8px 0 18px;position:relative}.search input{width:100%;height:38px;padding:0 12px 0 38px;border-radius:10px;border:1px solid var(--border);background:var(--bg-1);color:var(--ink-0);font-family:inherit;font-size:13px;outline:none;transition:border-color .15s,box-shadow .15s}.search input:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}.search svg{position:absolute;left:12px;top:50%;transform:translateY(-50%);width:16px;height:16px;color:var(--ink-3)}.search kbd{position:absolute;right:8px;top:50%;transform:translateY(-50%);font-family:var(--mono);font-size:10px;padding:2px 6px;border-radius:5px;border:1px solid var(--border);background:var(--bg-0);color:var(--ink-2)}.btn{display:inline-flex;align-items:center;gap:7px;height:38px;padding:0 14px;border-radius:10px;border:1px solid var(--border);background:var(--bg-1);color:var(--ink-0);font-family:inherit;font-size:13px;font-weight:500;cursor:pointer;transition:all .15s ease}.btn:hover{border-color:var(--border-strong);transform:translateY(-1px);box-shadow:var(--shadow-sm)}.btn-primary{background:var(--accent);color:#fff;border-color:transparent;box-shadow:0 8px 20px -8px var(--accent)}.btn-primary:hover{background:var(--accent);filter:brightness(1.08)}.btn-ghost{background:transparent;border-color:transparent}.btn-ghost:hover{background:var(--accent-soft);color:var(--accent)}.btn-icon{width:38px;padding:0;justify-content:center}.btn svg{width:15px;height:15px}.icon-pill{width:36px;height:36px;border-radius:10px;display:grid;place-items:center;border:1px solid var(--border);background:var(--bg-1);cursor:pointer;color:var(--ink-1);position:relative}.icon-pill:hover{border-color:var(--border-strong);color:var(--accent)}.icon-pill .dot{position:absolute;top:8px;right:8px;width:7px;height:7px;border-radius:50%;background:var(--bad);border:2px solid var(--bg-1)}.content{flex:1;overflow:auto;padding:4px 4px 60px;scrollbar-width:thin;scrollbar-color:var(--border-strong) transparent}.content::-webkit-scrollbar{width:8px}.content::-webkit-scrollbar-thumb{background:var(--border-strong);border-radius:4px}.page{display:flex;flex-direction:column;gap:16px}.page-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;padding:4px 4px 8px}.page-title{font-size:26px;font-weight:700;letter-spacing:-.02em;line-height:1.2}.page-sub{color:var(--ink-2);font-size:13.5px;margin-top:4px}.page-actions{display:flex;gap:8px;align-items:center}.card{background:var(--bg-glass-strong);-webkit-backdrop-filter:blur(20px) saturate(180%);backdrop-filter:blur(20px) saturate(180%);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow-sm);position:relative}.card-pad{padding:var(--pad)}.card-hd{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:16px var(--pad);border-bottom:1px solid var(--border)}.card-title{font-size:14.5px;font-weight:600;letter-spacing:-.005em}.card-sub{font-size:12px;color:var(--ink-2);margin-top:2px}.kpi-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.kpi{position:relative;overflow:hidden;padding:18px var(--pad);display:flex;flex-direction:column;gap:6px}.kpi-lbl{font-size:12.5px;color:var(--ink-2);display:flex;align-items:center;gap:8px;font-weight:500}.kpi-lbl .ico{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;color:#fff}.kpi-val{font-size:30px;font-weight:700;letter-spacing:-.03em;font-variant-numeric:tabular-nums;line-height:1.1;margin-top:6px}.kpi-val small{font-size:14px;color:var(--ink-2);font-weight:500;margin-left:4px}.kpi-delta{display:inline-flex;align-items:center;gap:4px;font-size:11.5px;font-weight:600;padding:2px 8px;border-radius:99px;width:fit-content}.kpi-delta.up{background:#10b9811f;color:var(--good)}.kpi-delta.down{background:#ef44441f;color:var(--bad)}.kpi-spark{position:absolute;right:-8px;bottom:-8px;opacity:.55;pointer-events:none}.tbl{width:100%;border-collapse:collapse;font-size:13px}.tbl th{text-align:left;font-weight:600;color:var(--ink-2);font-size:11.5px;text-transform:uppercase;letter-spacing:.05em;padding:12px var(--pad);border-bottom:1px solid var(--border);position:sticky;top:0;background:var(--bg-glass-strong);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);z-index:1}.tbl td{padding:12px var(--pad);border-bottom:1px solid var(--border);vertical-align:middle;height:var(--row-h)}.tbl tbody tr{transition:background .12s;cursor:pointer}.tbl tbody tr:hover{background:var(--accent-soft)}.tbl tbody tr:last-child td{border-bottom:none}.tbl .num{font-variant-numeric:tabular-nums;font-family:var(--mono)}.tbl .right{text-align:right}.badge{display:inline-flex;align-items:center;gap:5px;padding:3px 9px;border-radius:99px;font-size:11.5px;font-weight:600}.badge-good{background:#10b9811f;color:var(--good)}.badge-warn{background:#f59e0b24;color:#b45309}.badge-bad{background:#ef44441f;color:var(--bad)}.badge-info{background:var(--accent-soft);color:var(--accent)}.badge-mute{background:#64748b1f;color:var(--ink-2)}[data-theme=dark] .badge-warn{color:#fbbf24}.chip{display:inline-flex;align-items:center;gap:6px;padding:6px 11px;border-radius:99px;font-size:12.5px;border:1px solid var(--border);background:var(--bg-1);cursor:pointer;transition:all .15s;color:var(--ink-1)}.chip:hover{border-color:var(--border-strong)}.chip.on{background:var(--accent);color:#fff;border-color:transparent}.drawer-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;background:#0b122066;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:60;opacity:0;pointer-events:none;transition:opacity .25s ease}.drawer-backdrop.open{opacity:1;pointer-events:auto}.drawer{position:fixed;top:0;right:0;height:100vh;width:min(640px,100vw);background:var(--bg-1);z-index:61;border-left:1px solid var(--border);box-shadow:var(--shadow-lg);transform:translate(100%);transition:transform .3s cubic-bezier(.2,.7,.2,1);display:flex;flex-direction:column}.drawer.open{transform:translate(0)}.drawer-hd{padding:18px 22px;border-bottom:1px solid var(--border);display:flex;align-items:flex-start;justify-content:space-between;gap:16px}.drawer-body{padding:22px;overflow:auto;flex:1}.modal-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;background:#0b122066;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);z-index:70;opacity:0;pointer-events:none;transition:opacity .2s;display:grid;place-items:center;padding:40px}.modal-backdrop.open{opacity:1;pointer-events:auto}.modal{width:min(480px,100%);background:var(--bg-1);border:1px solid var(--border);border-radius:18px;box-shadow:var(--shadow-lg);transform:translateY(12px) scale(.98);transition:transform .2s;overflow:hidden}.modal-backdrop.open .modal{transform:translateY(0) scale(1)}.field{display:flex;flex-direction:column;gap:6px}.field label{font-size:12px;color:var(--ink-2);font-weight:500}.field input,.field select,.field textarea{height:40px;padding:0 12px;border-radius:10px;border:1px solid var(--border);background:var(--bg-1);color:var(--ink-0);font-family:inherit;font-size:13.5px;outline:none;transition:border-color .15s,box-shadow .15s}.field textarea{height:auto;padding:10px 12px;min-height:80px;resize:vertical}.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}.field-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}.toasts{position:fixed;bottom:20px;left:50%;transform:translate(-50%);z-index:80;display:flex;flex-direction:column;gap:8px;pointer-events:none}.toast{display:flex;align-items:center;gap:10px;padding:10px 16px 10px 12px;border-radius:12px;background:var(--ink-0);color:var(--bg-1);box-shadow:var(--shadow-lg);font-size:13px;font-weight:500;animation:toast-in .3s cubic-bezier(.2,.7,.2,1);pointer-events:auto;border:1px solid var(--border-strong)}.toast .ico{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;flex-shrink:0}.toast.success .ico{background:var(--good);color:#fff}.toast.info .ico{background:var(--accent);color:#fff}.toast.warn .ico{background:var(--warn);color:#fff}@keyframes toast-in{0%{transform:translateY(20px);opacity:0}}.bins{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:10px}.bin{position:relative;padding:14px;border-radius:14px;border:1px solid var(--border);background:var(--bg-1);cursor:pointer;transition:all .2s;overflow:hidden}.bin:hover{transform:translateY(-2px);border-color:var(--accent);box-shadow:var(--shadow-md)}.bin.selected{border-color:var(--accent);background:var(--accent-soft)}.bin-fill{position:absolute;left:0;bottom:0;height:4px;background:linear-gradient(90deg,var(--accent),var(--accent-2));border-radius:0 0 14px 14px;transition:width .6s cubic-bezier(.2,.7,.2,1)}.bin-code{font-family:var(--mono);font-size:12px;color:var(--ink-2);font-weight:500}.bin-name{font-size:14px;font-weight:600;margin-top:4px}.bin-stats{display:flex;align-items:flex-end;justify-content:space-between;margin-top:14px;gap:8px}.bin-count{font-size:22px;font-weight:700;letter-spacing:-.02em;font-variant-numeric:tabular-nums}.bin-pct{font-size:11px;color:var(--ink-2);font-variant-numeric:tabular-nums}.timeline{position:relative;padding-left:26px}.timeline:before{content:"";position:absolute;left:11px;top:6px;bottom:6px;width:2px;background:var(--border)}.tl-item{position:relative;padding:10px 0 18px}.tl-item:before{content:"";position:absolute;left:-21px;top:14px;width:10px;height:10px;border-radius:50%;background:var(--bg-1);border:2px solid var(--accent);box-shadow:0 0 0 4px var(--accent-soft)}.tl-item.in:before{border-color:var(--good);box-shadow:0 0 0 4px #10b9812e}.tl-item.out:before{border-color:var(--warn);box-shadow:0 0 0 4px #f59e0b2e}.tl-item.adj:before{border-color:var(--accent)}.tl-time{font-size:11.5px;color:var(--ink-2);font-variant-numeric:tabular-nums}.tl-title{font-size:13.5px;font-weight:600;margin-top:2px}.tl-meta{font-size:12px;color:var(--ink-2);margin-top:2px}.stepper{display:flex;align-items:center;gap:10px;padding:4px 0 18px}.step{display:flex;align-items:center;gap:8px;color:var(--ink-3);font-size:13px;font-weight:500}.step .num{width:24px;height:24px;border-radius:50%;background:var(--bg-1);border:1.5px solid var(--border);display:grid;place-items:center;font-size:12px;font-weight:600;color:var(--ink-2)}.step.done .num{background:var(--good);border-color:var(--good);color:#fff}.step.active{color:var(--ink-0)}.step.active .num{background:var(--accent);border-color:var(--accent);color:#fff;box-shadow:0 0 0 4px var(--accent-soft)}.step-bar{flex:1;height:2px;background:var(--border);border-radius:1px}.step-bar.done{background:var(--good)}@keyframes fadeUp{0%{opacity:0;transform:translateY(8px)}}.fade-up{animation:fadeUp .35s cubic-bezier(.2,.7,.2,1) both}.fade-up:nth-child(1){animation-delay:.02s}.fade-up:nth-child(2){animation-delay:.06s}.fade-up:nth-child(3){animation-delay:.1s}.fade-up:nth-child(4){animation-delay:.14s}.fade-up:nth-child(5){animation-delay:.18s}.fade-up:nth-child(6){animation-delay:.22s}@keyframes pulse-dot{0%,to{box-shadow:0 0 #10b98180}50%{box-shadow:0 0 0 8px #10b98100}}.live-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--good);animation:pulse-dot 1.6s ease-in-out infinite}[data-anim=off] *{animation-duration:0s!important;transition-duration:0s!important}.scanner{position:relative;width:100%;aspect-ratio:16/9;border-radius:14px;overflow:hidden;background:linear-gradient(135deg,#0f172a,#1e293b);box-shadow:var(--shadow-md)}.scanner-grid{position:absolute;top:0;right:0;bottom:0;left:0;background-image:linear-gradient(rgba(255,255,255,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.06) 1px,transparent 1px);background-size:20px 20px}.scanner-frame{position:absolute;top:14%;right:22%;bottom:14%;left:22%;border:2px solid var(--accent);border-radius:12px;box-shadow:0 0 0 2000px #00000059}.scanner-corners:before,.scanner-corners:after{content:"";position:absolute;width:32px;height:32px;border:3px solid var(--accent-2)}.scanner-corners:before{top:-3px;left:-3px;border-right:0;border-bottom:0;border-radius:8px 0 0}.scanner-corners:after{bottom:-3px;right:-3px;border-left:0;border-top:0;border-radius:0 0 8px}.scanner-line{position:absolute;left:8%;right:8%;height:2px;background:linear-gradient(90deg,transparent,var(--accent-2),transparent);top:50%;box-shadow:0 0 16px var(--accent-2);animation:scan 2.4s ease-in-out infinite}@keyframes scan{0%,to{top:18%}50%{top:82%}}.scanner-status{position:absolute;top:12px;left:12px;display:flex;align-items:center;gap:8px;color:#fff;font-size:12px;font-weight:500;padding:5px 10px;border-radius:99px;background:#00000080}.pop{position:fixed;top:0;right:0;bottom:0;left:0;pointer-events:none;z-index:90}.pop span{position:absolute;width:8px;height:14px;border-radius:2px;opacity:.95;animation:pop .9s cubic-bezier(.2,.7,.2,1) forwards}@keyframes pop{0%{transform:translate(0) rotate(0);opacity:1}to{transform:translate(var(--dx),var(--dy)) rotate(var(--rot));opacity:0}}.skel{background:linear-gradient(90deg,var(--bg-0),var(--border),var(--bg-0));background-size:200% 100%;animation:shine 1.4s linear infinite;border-radius:6px}@keyframes shine{to{background-position:-200% 0}}.qty-stepper{display:inline-flex;align-items:center;border:1px solid var(--border);border-radius:10px;overflow:hidden;height:40px;background:var(--bg-1)}.qty-stepper button{width:34px;height:100%;border:0;background:transparent;font-size:18px;color:var(--ink-1);cursor:pointer}.qty-stepper button:hover{background:var(--accent-soft);color:var(--accent)}.qty-stepper input{width:56px;height:100%;border:0;background:transparent;text-align:center;font-family:var(--mono);font-size:14px;color:var(--ink-0);outline:none;-moz-appearance:textfield}.qty-stepper input::-webkit-outer-spin-button,.qty-stepper input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.bar-chart{display:grid;grid-template-columns:repeat(14,1fr);align-items:end;gap:4px;height:90px;padding:8px 0}.bar-chart .bar{background:linear-gradient(180deg,var(--accent),var(--accent-2));border-radius:4px 4px 2px 2px;min-height:4px;transition:all .3s;cursor:pointer}.bar-chart .bar:hover{filter:brightness(1.15)}.bar-chart .bar.out{background:linear-gradient(180deg,var(--warn),#FBBF24)}.donut{width:140px;height:140px}.filterbar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:12px var(--pad);border-bottom:1px solid var(--border)}@media(max-width:1100px){.kpi-grid{grid-template-columns:repeat(2,1fr)}}@media(max-width:800px){.app{grid-template-columns:64px 1fr}.app .nav-lbl,.app .brand-name,.app .brand-sub,.sidebar-foot{display:none}}