:root{font:15px/1.55 system-ui,-apple-system,"Segoe UI",sans-serif;color:#0b192c;background:#f4f6f8;font-synthesis:none}
*{box-sizing:border-box}
[hidden]{display:none!important}
body{margin:0}
header{background:#0b192c;color:white;padding:20px max(24px,calc((100vw - 1200px)/2));display:flex;justify-content:space-between;align-items:center;border-bottom:4px solid #e2b659;gap:16px;flex-wrap:wrap}
h1{margin:4px 0;font-size:28px;letter-spacing:-.6px;line-height:1.25;color:#ffffff}
h2{font-size:20px;margin:0 0 14px;letter-spacing:-.3px;color:#0b192c}
h3{font-size:16px;margin:20px 0 10px;color:#0b192c}
header p{color:#b0c4de;margin:8px 0 0;font-size:14px}
.header-actions{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.lang-picker{display:flex;gap:4px;background:#1e3e62;padding:4px;border-radius:24px;border:1px solid #e2b65980}
.lang-btn{background:transparent;color:#b0c4de;border:0;border-radius:20px;padding:6px 14px;font-size:13px;font-weight:600;margin:0;cursor:pointer;transition:all .15s ease}
.lang-btn:hover{background:#0b192c;color:white}
.lang-btn.active,.lang-btn[aria-selected=true]{background:#e2b659;color:#0b192c;font-weight:700;box-shadow:0 2px 6px #00000040}
.brand{letter-spacing:4px;font-size:11px;font-weight:700;color:#e2b659}
main{max-width:1248px;padding:24px;margin:auto}
section{background:white;border:1px solid #d0d7de;padding:24px;border-radius:14px;margin-bottom:20px;box-shadow:0 2px 6px #0b192c0a}
#app{background:none;border:0;padding:0;box-shadow:none}
#auth{max-width:480px;margin:40px auto}
.banner{background:#fff8e6;border:1px solid #e2b65980;color:#5a4310;border-radius:10px;padding:12px 16px;margin-bottom:16px;font-size:14px}
.admin-tabs{display:flex;gap:6px;position:sticky;top:0;z-index:5;background:#f4f6f8;padding:10px 0 14px;overflow-x:auto;scrollbar-width:thin;border-bottom:1px solid #d0d7de;margin:0 0 24px;isolation:isolate}
.admin-tabs button{flex:0 0 auto;margin:0;background:white;color:#334155;border:1px solid #cbd5e1;border-radius:24px;padding:10px 20px;font-weight:600;white-space:nowrap;transition:all .15s ease}
.admin-tabs button:hover{background:#e2e8f0;color:#0b192c}
.admin-tabs button[aria-selected=true]{background:#0b192c;color:white;border-color:#e2b659;box-shadow:0 3px 10px #0b192c30}
.panel-heading{margin:0 0 22px}
.panel-heading h2{font-size:25px;margin:0 0 5px;color:#0b192c}
.panel-heading p{margin:0;color:#475569}
.admin-panel{outline:none}
.metrics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-bottom:20px}
.metric{background:white;border:1px solid #d0d7de;padding:20px;border-radius:13px;min-width:0}
.metric strong{display:block;font-size:30px;line-height:1.3;letter-spacing:-.8px;color:#0b192c;font-variant-numeric:tabular-nums}
.metric span{display:block;color:#64748b;margin-top:5px}
.metric:last-child{grid-column:1/-1;background:#f0f4f8;border-color:#cbd5e1;display:grid;grid-template-columns:1fr 1fr;gap:0 24px}
.metric:last-child strong{font-size:32px;grid-column:1;color:#0b192c}
.metric:last-child span{grid-column:1}
.metric:last-child p{grid-column:2;grid-row:1/3;margin:auto 0;color:#334155}
.quick-actions h3{margin-top:0}
button,a{cursor:pointer}
button{border:1px solid transparent;background:#0b192c;color:white;border-radius:8px;padding:10px 16px;margin:4px;font:inherit;font-weight:600;transition:all .15s ease}
button:hover{background:#1e3e62;border-color:#e2b65980}
button.secondary{background:#f1f5f9;color:#0b192c;border-color:#cbd5e1}
button.secondary:hover{background:#e2e8f0;border-color:#94a3b8}
button.danger{background:#991b1b}
button:disabled{cursor:default;opacity:.48}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,.admin-panel:focus-visible{outline:3px solid #e2b659;outline-offset:3px}
a{color:#1e3e62;text-underline-offset:3px;font-weight:600}
input,textarea,select{font:inherit;border:1px solid #cbd5e1;border-radius:8px;padding:10px 12px;max-width:100%;background:#fff;color:#0b192c}
input[type=checkbox]{accent-color:#0b192c;width:16px;height:16px;vertical-align:middle;margin-right:6px}
label{display:block;margin:12px 0;color:#334155;font-size:14px}
label input:not([type=checkbox]),label textarea,label select{display:block;width:100%;margin-top:6px}
.password-control{position:relative}
.password-control input{padding-right:52px}
.password-control .password-eye{position:absolute;right:3px;bottom:3px;width:40px;height:40px;padding:8px;margin:0;display:grid;place-items:center;border:0}
form{margin:16px 0}
#staffForm,#payoutPolicy,#payoutTest,#assignmentForm,#workRequestForm{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 24px;align-items:start}
#staffForm label:has(input[type=checkbox]),#payoutPolicy label:has(input[type=checkbox]),#payoutPolicy label:has(textarea){grid-column:1/-1}
#staffForm button,#payoutPolicy button,#payoutTest button,#assignmentForm button,#workRequestForm button{justify-self:start;align-self:end}
#assignmentForm button{grid-column:1/-1}
#addDevice label{max-width:420px}
#searchForm{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
#searchForm>input{flex:1;min-width:200px}
#searchForm>label{flex-basis:100%;margin:4px}
.toolbar{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.toolbar h2{margin:0;margin-right:auto}
.case{border-top:1px solid #e2e8f0;padding:18px 0;display:flex;justify-content:space-between;gap:16px;align-items:start}
.case>div:first-child{min-width:0;flex:1}
.case p{margin:6px 0;color:#475569;overflow-wrap:anywhere}
.case>button{flex-shrink:0}
.badge{font-size:12px;font-weight:600;padding:4px 10px;background:#f1f5f9;border:1px solid #cbd5e1;border-radius:20px;display:inline-block;color:#0b192c}
.warning{background:#fff8e6;border-color:#e2b65980;color:#78350f}
.error,#notice,#staffNotice,#workNotice{color:#991b1b}
dialog{width:min(850px,95vw);max-height:90vh;border:1px solid #cbd5e1;border-radius:16px;padding:24px;box-shadow:0 12px 80px #0005}
dialog::backdrop{background:#0b192ccc}
#closeDetail{float:right}
pre{white-space:pre-wrap;word-break:break-word;background:#f8fafc;padding:14px;border:1px solid #e2e8f0;border-radius:8px;font-size:13px}
small{color:#64748b}
#notice:empty{display:none}
#devices>div{border-bottom:1px solid #e2e8f0;padding:14px 0}
#pairing{margin-top:18px;padding:18px;background:#f1f5f9;border-radius:10px}
@media(max-width:800px){.admin-tabs button{padding:10px 14px}.metrics{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){header{padding:20px}h1{font-size:23px}header p{font-size:12px}main{padding:12px}section{padding:18px}.case{flex-wrap:wrap}.metrics{gap:10px}.metric{padding:15px}.metric strong{font-size:26px}.metric:last-child{display:block}.metric:last-child p{margin-top:12px}.admin-tabs{margin-bottom:18px}.panel-heading h2{font-size:22px}#staffForm,#payoutPolicy,#payoutTest,#assignmentForm,#workRequestForm{grid-template-columns:1fr;gap:0}.toolbar{gap:8px}.toolbar h2{flex-basis:100%}button{min-height:44px}#auth{margin:20px auto}}

/* ZQ order overview */
#zqPanel{background:transparent;border:0;padding:0;box-shadow:none}
.zq-toolbar{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:12px}
.zq-toolbar button{margin:0}
.zq-connection{color:#475569;font-size:13px}
.zq-notice{color:#991b1b}
.zq-notice:empty{display:none}
.zq-metrics{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin:18px 0 24px}
.zq-metric{background:white;border:1px solid #d0d7de;border-radius:14px;padding:20px}
.zq-metric strong{display:block;font-size:32px;font-variant-numeric:tabular-nums;line-height:1.3;letter-spacing:-1px;color:#0b192c}
.zq-metric span{font-size:13px;color:#64748b}
.zq-controls{display:flex;flex-direction:column;gap:14px;margin-bottom:20px}
.zq-controls input{max-width:460px;min-height:46px}
.zq-filters{display:flex;gap:8px;flex-wrap:wrap}
.zq-filters button{margin:0;font-size:13px;border-radius:24px}
.zq-filters button[aria-pressed=true]{background:#0b192c;color:white;border-color:#e2b659}
.zq-date-controls{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.zq-date-controls label,.zq-custom-dates label{margin:0}
.zq-custom-dates{display:flex;flex-wrap:wrap;gap:16px}
.zq-date-hint{font-size:12px;color:#64748b;margin:0}
.zq-pagination{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:10px;margin:24px 0}
.zq-pagination span{font-size:13px;font-variant-numeric:tabular-nums}
.zq-order-date{margin-top:5px!important}
@media(max-width:650px){.zq-date-controls{grid-template-columns:1fr}.zq-pagination{gap:5px}.zq-pagination button{padding:9px 12px}}
.zq-order-list{display:grid;gap:18px}
.zq-order-card{background:white;border:1px solid #d0d7de;border-radius:16px;padding:24px;box-shadow:0 3px 12px #0b192c0a}
.zq-order-heading{display:flex;justify-content:space-between;align-items:start;gap:12px}
.zq-order-heading h3{font-size:22px;margin:0 0 3px;letter-spacing:-.5px;color:#0b192c}
.zq-order-heading p{font-size:13px;margin:0;color:#64748b}
.zq-pill{display:inline-block;border-radius:20px;padding:5px 10px;font-size:12px;font-weight:600;line-height:1.5}
.zq-green{background:#dcfce7;color:#15803d}
.zq-amber{background:#fef3c7;color:#b45309}
.zq-neutral{background:#f1f5f9;color:#475569}
.zq-states{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;padding:22px 0 18px;margin-top:8px}
.zq-label{display:block;color:#64748b;font-size:12px;margin-bottom:8px}
.zq-product-preview{color:#334155;margin:0 0 18px;font-size:14px;overflow-wrap:anywhere}
#zqPanel summary{cursor:pointer;font-weight:600;border-radius:6px}
#zqPanel summary:focus-visible{outline:3px solid #e2b659;outline-offset:4px}
.zq-order-details{border-top:1px solid #e2e8f0;padding-top:14px;font-size:14px}
.zq-part{padding:16px 0;border-bottom:1px solid #e2e8f0}
.zq-part h4{display:inline-block;margin:0 12px 12px 0}
.zq-product-line{display:flex;justify-content:space-between;gap:18px;padding:10px 0}
.zq-product-line>div{min-width:0}
.zq-product-line strong{font-weight:600;overflow-wrap:anywhere}

/* Dropsom Brand Pill Button Collapsible Cards */
details{background:transparent;border:0;margin-bottom:14px;box-shadow:none;overflow:visible}
details summary{display:inline-flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 24px;font-size:14px;font-weight:700;color:white;background:#0b192c;border:2px solid #0b192c;border-radius:24px;cursor:pointer;list-style:none;box-shadow:0 3px 10px #0b192c25;transition:all .15s ease;user-select:none}
details summary::-webkit-details-marker{display:none}
details summary::after{content:'＋';font-size:15px;font-weight:bold;color:#e2b659;margin-left:8px;transition:transform .2s ease}
details[open] summary::after{content:'－'}
details summary:hover{background:#1e3e62;border-color:#e2b659;transform:translateY(-1px);box-shadow:0 4px 14px #0b192c35}
details[open] summary{background:#0b192c;border-color:#e2b659;color:white}
details>div,details>section,details>form{margin-top:14px;background:white;border:1px solid #d0d7de;border-radius:16px;padding:22px;box-shadow:0 4px 18px #0b192c0d}
.zq-product-line small{display:block;margin-top:2px}
.zq-quantity{flex-shrink:0;font-variant-numeric:tabular-nums;color:#475569}
.zq-tracks{display:grid;grid-template-columns:180px 1fr;gap:8px;font-size:13px;background:#f8fafc;padding:14px;border-radius:8px}
.zq-tracks dt{color:#64748b}
.zq-tracks dd{margin:0;overflow-wrap:anywhere}
.zq-order-footer{display:flex;justify-content:space-between;align-items:start;gap:14px;margin-top:16px;font-size:12px}
.zq-order-footer details{text-align:right;max-width:65%;overflow-wrap:anywhere}
.zq-order-footer p{margin:5px 0;font-family:ui-monospace,monospace}
.zq-warning{background:#fff8e6;border-left:3px solid #e2b659;border-radius:5px;padding:12px;font-size:13px;color:#78350f}
.zq-help,.zq-add{margin-top:20px;background:white;border:1px solid #d0d7de;border-radius:12px;padding:18px 22px;font-size:14px}
.zq-help p,.zq-add p{color:#64748b;max-width:800px}
.zq-link-form{display:grid;grid-template-columns:1fr 1fr;gap:12px 24px}
.zq-link-form label small{display:block;margin-top:5px;font-size:12px}
.zq-link-form button{justify-self:start;grid-column:1/-1;margin:0}
.zq-empty{padding:36px 24px;text-align:center;border:1px dashed #cbd5e1;border-radius:14px;background:#fff}
.zq-empty h3{margin-top:0}
@media(max-width:650px){
 .zq-metrics{gap:8px}.zq-metric{padding:14px 10px}.zq-metric strong{font-size:26px}.zq-metric span{font-size:11px}
 .zq-order-card{padding:18px}.zq-states{grid-template-columns:1fr;gap:14px}.zq-states>div{display:flex;justify-content:space-between;align-items:center;gap:10px}
 .zq-label{margin:0}.zq-order-heading{flex-wrap:wrap}.zq-tracks{grid-template-columns:1fr;gap:4px}.zq-tracks dd{margin-bottom:8px}
 .zq-order-footer{flex-direction:column}.zq-order-footer details{max-width:100%;text-align:left}.zq-link-form{grid-template-columns:1fr}
 .zq-toolbar{align-items:start}.zq-connection{max-width:55%}.zq-controls input{width:100%}
}
.warehouse-scan{display:grid;grid-template-columns:240px 1fr auto;gap:16px;align-items:end;background:#f0f4f8;padding:20px;border-radius:12px}
.warehouse-scan label{margin:0}.warehouse-scan button{margin:0}.warehouse-filter{display:grid;grid-template-columns:1fr 240px auto;gap:16px;align-items:end}
.warehouse-item{display:grid;grid-template-columns:2fr 1fr 100px auto;gap:12px;align-items:end;border-bottom:1px solid #e2e8f0;padding-bottom:14px}
.warehouse-item label{margin-bottom:0}.warehouse-detail>section{border-left:4px solid #0b192c}.warehouse-detail strong{overflow-wrap:anywhere}
@media(max-width:800px){.warehouse-scan,.warehouse-filter{grid-template-columns:1fr}.warehouse-item{grid-template-columns:1fr 1fr}.warehouse-item label:first-child{grid-column:1/-1}}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}