/* Native system appearance updates immediately, including offline use. */
:root{color-scheme:light dark}
@media(prefers-color-scheme:dark){
 :root{color-scheme:dark;color:#e6edf5;background:#000000;--costco-red:#ff6b82;--costco-blue:#d6dce3;--line:#333333;--muted:#acbac9;--soft:#000000}
 body{background:#000000;color:#e6edf5}
 .panel,.lookup-card,.batch-result,.shortage-department,.stock-export-preview{background:#000000;color:#e6edf5}
 .tabs button{background:#000000;color:#c5d9ec}
 .tabs button.active,.primary{background:#e31837;border-color:#e31837;color:#fff}
 input,textarea,select{background:#000000;border-color:#444444;color:#e6edf5}
 input::placeholder,textarea::placeholder{color:#98a9ba;opacity:1}
 input:focus,textarea:focus,select:focus{outline-color:#80bfff66}
 .sales-preview b{color:#e6edf5}
 .shortage-note,.data-date-bar{color:#b8c8d9}
 .shortage-department-heading{background:var(--soft);color:#c5d9ec;border-color:var(--line)}
 .shortage-department-heading span:last-child,[data-request-match]{color:var(--muted)}
 .rule-settings fieldset,.batch-result,.status-upload,.shortage-department{border-color:var(--line)}
 .batch-box summary,.rule-settings summary,.replenish-quantity{color:var(--costco-blue)}
 .upload-tools-row>.file-picker>span{background:var(--soft);border-color:var(--line)}
 .upload-tools-row>.file-picker:active>span{background:#171717;border-color:#666666}
 .request-quantity{background:#3b2029}
 .request-kind-review .request-quantity{color:#f4c97e;background:#352d20}
 .new-product{color:#83dfac;border-color:#3a6650}
 .quick-shortage-button:disabled{color:#83dfac;background:#1b3227}
 .product-status-green,.arrival-safe{color:#83dfac}
 .danger,.upload-state.error,.data-warning,.status-upload .error,.product-status-red,.arrival-warning,.delivery-countdown{color:#ff8a9c}
 .date-stale,.past-orders>summary,.followup-age,.export-preview-warning{color:#f4c97e}
 .data-date-bar summary i{color:#718398}
 .stock-export-preview::backdrop{background:#0009}
 .export-preview-footer{background:#000000}
}

/* Full original artwork, with transparent paper and balanced header alignment. */
header{align-items:center}
.brand-heading{flex:0 0 auto}
.brand-logo{display:flex;align-items:center;width:140px;height:51px;background:transparent;overflow:visible}
.brand-logo img{position:static;display:block;width:100%;height:auto;max-width:100%;left:auto;top:auto}
#offline-status{align-self:center}
@media(max-width:700px){
 .brand-logo{width:112px;height:41px}
 .brand-logo img{position:static;width:100%;height:auto;left:auto;top:auto}
}