:root{--green:#29ce9b;--ink:#edf3f7;--muted:#9caab7;--border:#303d48;--surface:#182129;--canvas:#10171d;--raised:#24313b;--bg-primary:var(--surface);--bg-secondary:var(--canvas);--bg-accent:var(--raised);--text-primary:var(--ink);--text-secondary:var(--muted);--border-color:var(--border);color-scheme:dark}
:root[data-theme=light]{--green:#09885b;--ink:#182029;--muted:#657180;--border:#dfe4ea;--surface:#fff;--canvas:#f4f6f8;--raised:#eaf0f3;color-scheme:light}
body{background:var(--canvas);color:var(--ink);font-family:Arial,sans-serif}body>header{background:var(--surface);border-bottom:1px solid var(--border);padding:20px max(18px,calc((100vw - 1160px)/2));gap:12px;flex-wrap:wrap}
.brand{color:var(--ink);text-decoration:none;letter-spacing:-1px}.brand small{color:var(--muted)}main{padding:24px 18px}.page-title{font-size:clamp(28px,5vw,40px);letter-spacing:-1px;color:var(--ink)}.heading{margin:22px 0;align-items:center}.eyebrow,.muted,.note,.meta,.track,footer{color:var(--muted)!important}
.panel,.search-panel,#resultArea,.card,.receipt,.selected,.notice,.stats>div,.stat{background:var(--surface)!important;color:var(--ink);border:1px solid var(--border);border-radius:18px;box-shadow:none;padding:18px}
#resultArea{margin:20px 0 0;padding:18px}.cards{gap:14px}.card{transition:border-color .2s,transform .2s}.card:hover{border-color:var(--green)}.card-body h3,.result-head h2,.metrics b,.receipt .numbers b{color:var(--ink)!important}
input,select,textarea,.unit input{background:var(--canvas)!important;color:var(--ink)!important;border:1px solid var(--border)!important;border-radius:12px;padding:12px!important;box-sizing:border-box}
.unit input{font-size:27px!important;height:60px}.unit{border:0}.grid2 input{font-size:19px!important}button,.filebtn,.today-pill{background:var(--raised);color:var(--ink);border-color:var(--border);border-radius:11px;min-height:42px;transition:background .18s,transform .18s}button:active{transform:scale(.98)}button.primary,.card button,.search-form button{background:var(--green)!important;color:var(--canvas)!important;border-color:var(--green)!important}.total{background:var(--raised);border-radius:12px;padding:14px;color:var(--muted)}.total b{color:var(--green)}
dialog{background:var(--surface);color:var(--ink);border:1px solid var(--border);border-radius:20px}dialog[open]{animation:weightReveal .2s ease-out}dialog::backdrop{background:#0009;backdrop-filter:blur(3px)}.visual,.photo-preview{background:var(--raised)}.tabs{display:flex;gap:8px;overflow-x:auto}.tabs button{white-space:nowrap}.tabs button.active{background:var(--green);color:var(--canvas)}
#serverPanel{margin-bottom:18px;padding:14px 18px}#serverPanel h2{font-size:15px}#serverStatus{font-size:12px;color:var(--muted);margin-top:5px}#serverLogin[hidden],#serverLogout[hidden]{display:none!important}
#serverLogin:not([hidden]){display:flex;gap:12px;align-items:end;flex-wrap:wrap;margin-top:12px}
@keyframes weightReveal{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:600px){.heading{flex-wrap:wrap}.card{padding:14px;grid-template-columns:76px minmax(0,1fr)}.visual{width:76px;height:90px}#resultArea{padding:12px}.grid2{grid-template-columns:1fr 1fr;gap:12px}.search-form{gap:15px}.panel{padding:15px}.page-title{font-size:30px}.stats{display:flex;flex-wrap:wrap;gap:8px}.stats>div{padding:10px}.receipt .numbers{padding-left:0}input,textarea,select{font-size:16px}.heading{gap:10px}main{padding:16px 12px}}
@media(prefers-reduced-motion:reduce){dialog[open]{animation:none}button,.card{transition:none}}

/* Keep receiving cards and their text in the same colour theme. */
#zonePanel{background:var(--canvas);color:var(--ink)}
.zone-order,.zone-table{background:var(--surface);color:var(--ink);border-color:var(--border)}
.zone-order-name,.zone-order dd{color:var(--ink);opacity:1}
.zone-order-name{font-weight:700}
.zone-order dt,.zone-received-time,.zone-caption,.barcode-missing{color:var(--muted)}
.zone-quantities{border-color:var(--border)}
.zone-order .zone-photo{background:var(--raised);color:var(--muted)}
.zone-table th{background:var(--raised);color:var(--ink)}
.zone-table td{color:var(--ink);border-color:var(--border)}
.zone-actions .barcode-link{color:var(--green);border-color:var(--border);background:var(--surface)}