*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent;}
:root{
  --green:#1D9E75;--green-light:#E1F5EE;--green-dark:#0F6E56;--green-border:#5DCAA5;
  --blue:#378ADD;--blue-light:#E6F1FB;--blue-dark:#185FA5;--blue-border:#85B7EB;
  --amber:#BA7517;--amber-light:#FAEEDA;--amber-border:#EF9F27;
  --red:#A32D2D;--red-light:#FCEBEB;--red-border:#F09595;
  --bg:#F7F7F5;--surface:#FFFFFF;--border:rgba(0,0,0,0.1);--border-strong:rgba(0,0,0,0.18);
  --text:#1A1A1A;--text-2:#555;--text-3:#999;--radius:12px;--radius-sm:8px;
}
html,body{height:100%;background:var(--bg);font-family:'DM Sans',sans-serif;color:var(--text);}
.app{max-width:480px;margin:0 auto;padding:0 0 80px;min-height:100vh;}
.header{background:var(--surface);border-bottom:1px solid var(--border);padding:14px 16px;display:flex;align-items:center;gap:12px;position:sticky;top:0;z-index:10;}
.logo{width:84px;height:84px;object-fit:contain;flex-shrink:0;display:block;}
.header-title{flex:1;min-width:0;}
.header-title h1{font-size:14px;font-weight:600;color:var(--text);}
.header-title p{font-size:11px;color:var(--text-3);margin-top:1px;}
.header-right{display:flex;align-items:center;gap:6px;flex-shrink:0;}
.conn-dot{width:8px;height:8px;border-radius:50%;background:var(--text-3);}
.conn-dot.live{background:var(--green);box-shadow:0 0 0 3px rgba(29,158,117,0.15);}
.emp-bar{background:var(--surface);border-bottom:1px solid var(--border);padding:10px 16px;display:flex;align-items:center;gap:8px;}
.emp-bar label{font-size:11px;color:var(--text-3);text-transform:uppercase;letter-spacing:0.06em;font-weight:600;}
.emp-bar select{flex:1;padding:8px 10px;font-size:14px;border:1px solid var(--border-strong);border-radius:var(--radius-sm);background:var(--bg);color:var(--text);font-family:'DM Sans',sans-serif;}
.mgr-btn{padding:7px 12px;font-size:12px;font-weight:500;border:1px solid var(--border-strong);background:var(--surface);color:var(--text-2);border-radius:var(--radius-sm);cursor:pointer;font-family:'DM Sans',sans-serif;white-space:nowrap;}
.mgr-btn.unlocked{background:var(--green-light);color:var(--green-dark);border-color:var(--green-border);}
.notice{background:#FFF8E1;border-left:4px solid #F59E0B;padding:12px 16px;}
.notice p{font-size:12.5px;color:#78350F;line-height:1.5;text-align:center;font-weight:700;}
.tab-bar{display:grid;grid-template-columns:repeat(4,1fr);background:var(--surface);border-bottom:1px solid var(--border);}
.tab{padding:11px 4px;font-size:11px;font-weight:700;text-align:center;cursor:pointer;border:none;background:transparent;color:var(--text);font-family:'DM Sans',sans-serif;border-bottom:2px solid transparent;transition:all 0.15s;line-height:1.3;}
.tab.active{color:var(--green);border-bottom-color:var(--green);}
.tab:disabled{opacity:0.4;cursor:not-allowed;}
.content{padding:16px;}
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:16px;margin-bottom:12px;}
.card-title{font-size:11px;font-weight:600;color:var(--text-3);text-transform:uppercase;letter-spacing:0.06em;margin-bottom:12px;}
.field{margin-bottom:13px;}
.field:last-child{margin-bottom:0;}
.field label{display:block;font-size:12px;font-weight:500;color:var(--text-2);margin-bottom:5px;}
.field input[type=text],.field input[type=number],.field input[type=date],.field select{width:100%;padding:10px 12px;font-size:15px;border:1px solid var(--border-strong);border-radius:var(--radius-sm);background:var(--bg);color:var(--text);font-family:'DM Sans',sans-serif;-webkit-appearance:none;}
.field input:focus,.field select:focus{outline:none;border-color:var(--green);background:#fff;}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:13px;}
.field-row .field{margin-bottom:0;}
.field-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;margin-bottom:13px;}
.field-3 .field{margin-bottom:0;}
.type-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;}
.loc-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:7px;}
.sel-btn{padding:11px 4px;font-size:12px;font-weight:400;text-align:center;cursor:pointer;border:1px solid var(--border-strong);border-radius:var(--radius-sm);background:var(--bg);color:var(--text-2);font-family:'DM Sans',sans-serif;transition:all 0.1s;user-select:none;}
.sel-btn:active{transform:scale(0.96);}
.sel-btn.on-type{border-color:var(--green-border);background:var(--green-light);color:var(--green-dark);font-weight:500;}
.sel-btn.on-loc{border-color:var(--blue-border);background:var(--blue-light);color:var(--blue-dark);font-weight:500;}
.sel-btn.on-cond-good{border-color:var(--green-border);background:var(--green-light);color:var(--green-dark);font-weight:500;}
.sel-btn.on-cond-damaged{border-color:var(--red-border);background:var(--red-light);color:var(--red);font-weight:500;}
.sel-btn.on-cond-partial{border-color:var(--amber-border);background:var(--amber-light);color:var(--amber);font-weight:500;}
.sel-btn.on-pkg{border-color:var(--blue-border);background:var(--blue-light);color:var(--blue-dark);font-weight:500;}
.photo-upload{border:1.5px dashed var(--border-strong);border-radius:var(--radius-sm);padding:20px 16px;text-align:center;cursor:pointer;background:var(--bg);transition:all 0.15s;position:relative;}
.photo-upload:hover{border-color:var(--green);background:var(--green-light);}
.photo-upload input[type=file]{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;}
.photo-icon{width:38px;height:38px;margin:0 auto 8px;background:var(--surface);border:1px solid var(--border);border-radius:50%;display:flex;align-items:center;justify-content:center;}
.photo-icon svg{width:18px;height:18px;color:var(--text-3);}
.photo-upload p{font-size:13px;font-weight:500;color:var(--text);margin-bottom:2px;}
.photo-upload span{font-size:11px;color:var(--text-3);}
.photo-preview{position:relative;margin-top:10px;display:none;}
.photo-preview img{width:100%;border-radius:var(--radius-sm);border:1px solid var(--border);max-height:200px;object-fit:cover;display:block;}
.photo-remove{position:absolute;top:7px;right:7px;background:rgba(0,0,0,0.6);color:#fff;border:none;border-radius:99px;padding:4px 10px;font-size:11px;cursor:pointer;font-family:'DM Sans',sans-serif;}
.confirm-check{display:flex;align-items:flex-start;gap:10px;padding:12px;background:var(--green-light);border:1px solid var(--green-border);border-radius:var(--radius-sm);margin-bottom:10px;}
.confirm-check input[type=checkbox]{width:18px;height:18px;margin-top:1px;flex-shrink:0;accent-color:var(--green);cursor:pointer;}
.confirm-check label{font-size:13px;color:var(--green-dark);font-weight:500;cursor:pointer;line-height:1.4;}
.submit-btn{width:100%;padding:14px;font-size:15px;font-weight:600;background:var(--green);color:#fff;border:none;border-radius:var(--radius);cursor:pointer;font-family:'DM Sans',sans-serif;transition:opacity 0.15s;margin-top:4px;}
.submit-btn:active{opacity:0.85;}
.submit-btn:disabled{opacity:0.5;cursor:not-allowed;}
.toast{border-radius:var(--radius-sm);padding:11px 14px;font-size:13px;text-align:center;margin-bottom:14px;display:none;font-weight:500;}
.toast.success{background:var(--green-light);border:1px solid var(--green-border);color:var(--green-dark);}
.toast.error{background:var(--red-light);border:1px solid var(--red-border);color:var(--red);}
.stat-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-bottom:14px;}
.stat{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:12px;text-align:center;}
.stat-val{font-size:26px;font-weight:600;color:var(--text);line-height:1;margin-bottom:3px;}
.stat-lbl{font-size:10px;color:var(--text-3);text-transform:uppercase;letter-spacing:0.05em;}
.search-row{display:flex;gap:8px;margin-bottom:12px;}
.search-row input{flex:1;padding:9px 12px;font-size:14px;border:1px solid var(--border-strong);border-radius:var(--radius-sm);background:var(--surface);color:var(--text);font-family:'DM Sans',sans-serif;}
.search-row input:focus{outline:none;border-color:var(--green);}
.filter-row{display:flex;gap:8px;margin-bottom:12px;flex-wrap:wrap;}
.filter-row select{flex:1;min-width:120px;padding:8px 10px;font-size:13px;border:1px solid var(--border-strong);border-radius:var(--radius-sm);background:var(--surface);color:var(--text);font-family:'DM Sans',sans-serif;}
.export-btn{padding:9px 12px;font-size:12px;border:1px solid var(--border-strong);border-radius:var(--radius-sm);background:var(--surface);color:var(--text-2);cursor:pointer;white-space:nowrap;font-family:'DM Sans',sans-serif;font-weight:500;}
.print-btn{padding:9px 12px;font-size:12px;border:1px solid var(--border-strong);border-radius:var(--radius-sm);background:var(--surface);color:var(--text-2);cursor:pointer;white-space:nowrap;font-family:'DM Sans',sans-serif;font-weight:500;}
.bulk-del-bar{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:12px 14px;margin-bottom:12px;}
.bulk-del-bar .bd-title{font-size:10px;font-weight:600;color:var(--text-3);text-transform:uppercase;letter-spacing:0.06em;margin-bottom:10px;}
.bulk-del-bar .bd-row{display:flex;gap:8px;align-items:center;}
.bulk-del-bar select{flex:1;padding:8px 10px;font-size:13px;border:1px solid var(--border-strong);border-radius:var(--radius-sm);background:var(--bg);color:var(--text);font-family:'DM Sans',sans-serif;}
.del-btn{padding:8px 14px;font-size:12px;font-weight:500;background:var(--red-light);color:var(--red);border:1px solid var(--red-border);border-radius:var(--radius-sm);cursor:pointer;font-family:'DM Sans',sans-serif;white-space:nowrap;}
.log-item{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:13px 14px;margin-bottom:9px;}
.log-item.shipped{opacity:0.6;border-style:dashed;}
.log-top{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:9px;}
.log-customer{font-size:15px;font-weight:600;color:var(--text);}
.log-actions{display:flex;align-items:center;gap:6px;flex-shrink:0;margin-left:8px;}
.log-date{font-size:11px;color:var(--text-3);white-space:nowrap;}
.log-tags{display:flex;gap:5px;flex-wrap:wrap;margin-bottom:7px;}
.tag{font-size:11px;padding:3px 8px;border-radius:99px;font-weight:500;}
.tag-po{background:var(--green-light);color:var(--green-dark);font-family:'DM Mono',monospace;}
.tag-type{background:#EAF3DE;color:#3B6D11;}
.tag-loc{background:var(--blue-light);color:var(--blue-dark);}
.tag-emp{background:#F1EFE8;color:#5F5E5A;}
.tag-note{background:var(--amber-light);color:var(--amber);}
.tag-carrier{background:#EEEDFE;color:#534AB7;}
.tag-good{background:var(--green-light);color:var(--green-dark);}
.tag-damaged{background:var(--red-light);color:var(--red);}
.tag-partial{background:var(--amber-light);color:var(--amber);}
.tag-pkg{background:var(--blue-light);color:var(--blue-dark);}
.tag-dim{background:#F1EFE8;color:#5F5E5A;}
.tag-wt{background:var(--amber-light);color:var(--amber);}
.tag-shipped{background:var(--green-light);color:var(--green-dark);border:1px solid var(--green-border);}
.log-photo{width:100%;max-height:220px;object-fit:cover;border-radius:var(--radius-sm);border:1px solid var(--border);display:block;margin-top:4px;cursor:pointer;}
.logtab-bar{display:grid;grid-template-columns:1fr 1fr;gap:4px;background:var(--bg);border-radius:var(--radius-sm);padding:4px;margin-bottom:14px;border:1px solid var(--border);}
.logtab-btn{padding:8px 6px;font-size:12px;text-align:center;cursor:pointer;border:none;background:transparent;color:var(--text-3);border-radius:calc(var(--radius-sm) - 2px);font-family:'DM Sans',sans-serif;transition:all 0.15s;}
.logtab-btn.active{background:var(--surface);color:var(--text);font-weight:500;border:1px solid var(--border);}
.empty{text-align:center;padding:40px 20px;color:var(--text-3);font-size:14px;}
.sec-lbl{font-size:10px;font-weight:600;color:var(--text-3);text-transform:uppercase;letter-spacing:0.06em;margin-bottom:10px;}
.dash-row{display:flex;justify-content:space-between;align-items:center;padding:10px 0;border-bottom:1px solid var(--border);}
.dash-row:last-child{border-bottom:none;}
.dash-thumb{width:34px;height:34px;border-radius:6px;overflow:hidden;flex-shrink:0;}
.dash-thumb img{width:100%;height:100%;object-fit:cover;}
.ship-badge-new{background:var(--green-light);color:var(--green-dark);border:1px solid var(--green-border);font-size:10px;padding:2px 7px;border-radius:99px;font-weight:600;}
.cust-dropdown{display:none;position:absolute;left:0;right:0;background:var(--surface);border:1px solid var(--border-strong);border-radius:var(--radius-sm);z-index:100;max-height:200px;overflow-y:auto;box-shadow:0 4px 16px rgba(0,0,0,0.1);}
.cust-dropdown.show{display:block;}
.cust-option{padding:11px 14px;font-size:14px;cursor:pointer;color:var(--text);border-bottom:1px solid var(--border);}
.cust-option:last-child{border-bottom:none;}
.cust-option:hover{background:var(--green-light);}
.cust-wrap{position:relative;}
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.45);display:none;align-items:center;justify-content:center;z-index:1000;padding:16px;}
.modal-overlay.show{display:flex;}
.modal{background:var(--surface);border-radius:var(--radius);padding:20px;width:100%;max-width:320px;box-shadow:0 10px 40px rgba(0,0,0,0.2);}
.modal h3{font-size:15px;font-weight:600;margin-bottom:8px;}
.modal p{font-size:13px;color:var(--text-2);margin-bottom:14px;}
.modal input{width:100%;padding:11px;font-size:18px;text-align:center;letter-spacing:4px;border:1px solid var(--border-strong);border-radius:var(--radius-sm);background:var(--bg);font-family:'DM Mono',monospace;margin-bottom:12px;}
.modal input:focus{outline:none;border-color:var(--green);}
.modal-btns{display:flex;gap:8px;}
.modal-btns button{flex:1;padding:11px;font-size:14px;border:none;border-radius:var(--radius-sm);cursor:pointer;font-family:'DM Sans',sans-serif;font-weight:500;}
.modal-cancel{background:var(--bg);color:var(--text-2);border:1px solid var(--border-strong)!important;}
.modal-ok{background:var(--green);color:#fff;}
.modal-err{font-size:12px;color:var(--red);margin-bottom:10px;min-height:16px;}
@media print{
  .header,.notice,.tab-bar,.emp-bar,.submit-btn,.photo-upload,.del-btn,.export-btn,.print-btn,.logtab-bar,.bulk-del-bar,.search-row,.filter-row,.log-actions button,.tab,.modal-overlay{display:none!important;}
  .log-item{break-inside:avoid;border:1px solid #ccc;margin-bottom:8px;}
  body{background:white;}
}