*{box-sizing:border-box}body{margin:0;font-family:Arial,sans-serif;background:#f4f6f8;color:#17202a}header{height:58px;background:#111827;color:white;display:flex;align-items:center;padding:0 18px;position:sticky;top:0;z-index:20}header b{font-size:20px}#navBtn{margin-left:auto;display:none}aside{position:fixed;top:58px;bottom:0;width:210px;background:#1f2937;padding:12px;z-index:15}aside a{display:block;color:#e5e7eb;text-decoration:none;padding:13px;border-radius:8px;margin:4px 0}aside a:hover{background:#374151}main{margin-left:210px;padding:22px}.cards,.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.card{background:white;border-radius:12px;padding:18px;box-shadow:0 2px 10px #0001;margin-bottom:16px}.card strong{display:block;font-size:42px;margin-top:8px}.row,.filters{display:flex;gap:8px;flex-wrap:wrap}input,select,textarea,button{font:inherit;padding:11px;border:1px solid #cbd5e1;border-radius:8px}input,select,textarea{background:white}button{background:#111827;color:white;cursor:pointer}.danger{background:#b91c1c}.muted{color:#64748b}.right{float:right}.camera{position:relative;background:#000;border-radius:12px;overflow:hidden;margin-top:14px;min-height:320px}.camera video{width:100%;height:auto;display:block;max-height:68vh;object-fit:contain}.hidden{display:none!important}#guide{position:absolute;left:8%;right:8%;top:15%;bottom:15%;border:3px solid #22c55e;color:white;display:flex;align-items:flex-start;justify-content:center;padding:8px;text-shadow:0 1px 4px #000}.overlay{position:absolute;inset:10%;width:80%;height:80%;object-fit:contain;border:3px solid #60a5fa;background:#fff}#focusState{position:absolute;right:10px;bottom:10px;background:#000a;color:#fff;padding:6px;border-radius:6px}.scanbox{position:absolute;left:12%;right:12%;top:25%;bottom:25%;border:3px solid #22c55e}.counter{font-size:24px;margin:12px 0}.tablewrap{overflow:auto}table{width:100%;border-collapse:collapse;min-width:650px}th,td{padding:10px;border-bottom:1px solid #e5e7eb;text-align:left}.ticker{overflow:hidden;background:#111827;color:white;padding:10px;border-radius:8px;margin-bottom:16px}.ticker span{display:inline-block;white-space:nowrap;animation:run 18s linear infinite}@keyframes run{from{transform:translateX(100vw)}to{transform:translateX(-100%)}}.prefix{padding:10px 0;border-bottom:1px solid #eee}
@media(max-width:800px){#navBtn{display:block}aside{transform:translateX(-100%);transition:.2s}aside.show{transform:none}main{margin-left:0;padding:12px}.cards,.grid{grid-template-columns:1fr}.camera{min-height:240px}h1{font-size:24px}button,input,select{min-height:44px}}
/* Packing: canvas komposit adalah preview yang sekaligus direkam. */
.camera{position:relative;background:#000;border-radius:12px;overflow:hidden;margin-top:14px;min-height:320px;aspect-ratio:16/9}
.camera #recordCanvas{display:block;width:100%;height:100%;object-fit:contain;background:#000}
.camera .sourceVideo{display:none!important}
#guide{position:absolute;left:8%;right:8%;top:15%;bottom:15%;border:3px solid #22c55e;color:white;display:flex;align-items:flex-start;justify-content:center;padding:8px;text-shadow:0 1px 4px #000;pointer-events:none}
.overlayInfo{position:absolute;left:50%;top:8%;transform:translateX(-50%);background:rgba(0,0,0,.72);color:#fff;padding:9px 14px;border-radius:8px;font-weight:700;pointer-events:none}
#focusState{position:absolute;right:10px;bottom:10px;background:#000a;color:#fff;padding:6px;border-radius:6px;pointer-events:none}

/* Packing process status */
.packingStatus{display:grid;grid-template-columns:repeat(6,minmax(110px,1fr));gap:8px;margin:14px 0 10px}
.packStep{display:flex;align-items:flex-start;gap:8px;padding:9px 8px;border:1px solid #e2e8f0;border-radius:9px;background:#f8fafc;min-height:66px;opacity:.55;transition:.2s}
.packStep>span{width:26px;height:26px;min-width:26px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:#cbd5e1;color:#334155;font-weight:700}
.packStep b{display:block;font-size:12px;line-height:1.2}.packStep small{display:block;color:#64748b;font-size:10px;line-height:1.2;margin-top:4px}
.packStep.active{opacity:1;border-color:#2563eb;background:#eff6ff}.packStep.active>span{background:#2563eb;color:#fff}
.packStep.completed{opacity:1;border-color:#16a34a;background:#f0fdf4}.packStep.completed>span{background:#16a34a;color:#fff}
.packStep.completed>span:after{content:'✓';font-size:13px}.packStep.completed>span{font-size:0}
@media(max-width:1100px){.packingStatus{grid-template-columns:repeat(3,minmax(150px,1fr))}}
@media(max-width:800px){.packingStatus{grid-template-columns:repeat(2,minmax(130px,1fr))}.packStep small{font-size:9px}}

/* Packing camera: guide portrait, while the composite canvas remains the recorded preview. */
.packing-camera{aspect-ratio:16/9;position:relative;}
.packing-camera #recordCanvas{display:block;width:100%;height:100%;object-fit:contain;background:#000;}
.packing-camera #guide{display:flex!important;left:30%;right:auto;top:8%;bottom:8%;width:40%;height:84%;border:3px solid #22c55e;align-items:flex-start;justify-content:center;padding:8px;text-align:center;z-index:4;background:transparent;color:white;pointer-events:none;text-shadow:0 1px 4px #000;}
.packing-camera #focusState{z-index:5;}
@media(max-width:800px){.packing-camera{aspect-ratio:4/3;}}
.searchResi{min-width:240px;flex:1}


/* Realtime status */
.liveBadge{display:inline-block;font-size:11px;font-weight:700;letter-spacing:.4px;padding:4px 8px;border-radius:999px;background:#ecfdf5;color:#15803d;border:1px solid #bbf7d0;vertical-align:middle;margin-left:6px}
.liveStatus{font-size:12px;color:#15803d;align-self:center;margin-left:auto}
.totalCards{grid-template-columns:repeat(3,minmax(0,1fr))}
.totalCard h3{margin-top:0}
.totalCard p{margin:12px 0}
.totalCard hr{border:0;border-top:1px solid #cbd5e1;margin:16px 0}
.differenceCard{border-top:4px solid #64748b}
.differenceCard p{padding:7px 9px;border-radius:7px}
.differenceCard p.negative{background:#fef2f2;color:#b91c1c}
.differenceCard p.positive{background:#fff7ed;color:#c2410c}
.differenceCard p.zero{background:#f0fdf4;color:#166534}
.differenceCard small{font-weight:400;color:#64748b}
.differenceNote{margin-top:14px;padding:11px 12px;border-radius:8px;font-size:13px;font-weight:600}
.differenceNote.warning{background:#fef2f2;color:#b91c1c}
.differenceNote.info{background:#fff7ed;color:#c2410c}
.differenceNote.success{background:#f0fdf4;color:#166534}
@media(max-width:1000px){.totalCards{grid-template-columns:1fr 1fr}.differenceCard{grid-column:1/-1}}
@media(max-width:800px){.totalCards{grid-template-columns:1fr}.differenceCard{grid-column:auto}.liveStatus{width:100%;margin-left:0}}