/* STL CARGO design reference 1.4. Shared tokens are authoritative.
   Page-specific layout belongs to the selected feature stylesheet, never a new palette. */
:root {
 --font-ui:"Cairo",system-ui,sans-serif;
 --brand:#FDB913;--brand-hover:#E6A700;--brand-pressed:#CC9300;--on-brand:#171A1F;
 --brand-soft:#FFF4CE;--brand-strong:#8A5A00;--charcoal:#252525;
 --canvas:#F6F7F9;--surface:#FFFFFF;--surface-raised:#FFFFFF;--surface-subtle:#F1F3F6;
 --text:#171A1F;--text-muted:#5B6472;--border:#D6DAE1;--control-border:#7B8493;
 --hover:#F1F3F6;--selected:#FFF4CE;--link:#8A5A00;--focus:#8A5A00;
 --disabled-bg:#E5E7EB;--disabled-text:#6B7280;
 --sidebar:#1E2024;--sidebar-text:#D1D5DB;--sidebar-muted:#AEB6C2;--sidebar-hover:#2B2F36;--logo-ink:#000000;
 --waiting-bg:#FFF4CE;--waiting-text:#8A5A00;
 --transit-bg:#DBEAFE;--transit-text:#1D4ED8;
 --arrived-bg:#CFFAFE;--arrived-text:#0E7490;
 --delivery-bg:#E0E7FF;--delivery-text:#4338CA;
 --success-bg:#DCFCE7;--success-text:#166534;
 --returned-bg:#F3E8FF;--returned-text:#7E22CE;
 --inactive-bg:#F1F3F6;--inactive-text:#475569;
 --danger-bg:#FEE2E2;--danger-text:#B91C1C;
 --information-bg:#DBEAFE;--information-text:#1D4ED8;
 --danger-button-bg:#B91C1C;--danger-button-text:#FFFFFF;
 --space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:20px;
 --space-6:24px;--space-8:32px;--space-10:40px;--space-12:48px;
 --radius-control:8px;--radius-card:12px;--radius-modal:16px;--radius-badge:6px;
 --control-height:44px;--control-small:36px;--icon-button-size:40px;
 --sidebar-width:248px;--sidebar-collapsed:72px;--topbar-height:64px;
 --motion-fast:150ms;--motion-panel:200ms;
 --shadow-menu:0 4px 16px rgba(23,26,31,.10);--shadow-modal:0 16px 48px rgba(0,0,0,.20);
 --z-content:0;--z-sticky:10;--z-dropdown:30;--z-overlay:40;--z-dialog:50;--z-toast:60;--z-tooltip:70;
}
html[data-theme="dark"] {
 color-scheme:dark;--brand-soft:#3A2C12;
 --canvas:#121418;--surface:#1B1E24;--surface-raised:#242832;--surface-subtle:#242832;
 --text:#F3F4F6;--text-muted:#B8C0CC;--border:#3A414D;--control-border:#7E899A;
 --hover:#2A303B;--selected:#3A2C12;--link:#FDB913;--focus:#FDB913;
 --disabled-bg:#2A303B;--disabled-text:#929BAB;--sidebar:#15171B;
 --sidebar-text:#F3F4F6;--sidebar-muted:#B8C0CC;--sidebar-hover:#2B2F36;--logo-ink:#FFFFFF;
 --waiting-bg:#3A2C12;--waiting-text:#FCD34D;
 --transit-bg:#152C49;--transit-text:#93C5FD;
 --arrived-bg:#10343D;--arrived-text:#67E8F9;
 --delivery-bg:#28234B;--delivery-text:#C7D2FE;
 --success-bg:#143323;--success-text:#86EFAC;
 --returned-bg:#322044;--returned-text:#D8B4FE;
 --inactive-bg:#2A303B;--inactive-text:#CBD5E1;
 --danger-bg:#401D23;--danger-text:#FCA5A5;
 --information-bg:#152C49;--information-text:#93C5FD;
 --danger-button-bg:#FCA5A5;--danger-button-text:#401D23;
}
html[data-theme="light"] {color-scheme:light}

/* Scoped foundation: legacy feature layouts can remain until their review. */
html :is(.design-reference,.shipments-reference,.dr-dialog) {
 --gold:var(--brand);--ink:var(--text);--muted:var(--text-muted);--line:var(--border);--bg:var(--canvas);
 font-family:var(--font-ui);font-synthesis:none;font-size:14px;line-height:24px;color:var(--text);
}
html :is(.design-reference,.shipments-reference,.dr-dialog) :is(button,input,select,textarea) {font-family:var(--font-ui);font-synthesis:none;letter-spacing:normal;text-transform:none}
html :is(.design-reference,.shipments-reference,.dr-dialog) :is(h1,h2,h3,h4,strong,b,.money,.code,.sub-text,.main-text) {font-family:var(--font-ui);letter-spacing:normal;text-transform:none}
html :is(.design-reference,.shipments-reference,.dr-dialog) h1 {font-size:28px;line-height:44px;font-weight:700;color:var(--text)}
html :is(.design-reference,.shipments-reference,.dr-dialog) h2 {font-size:20px;line-height:32px;font-weight:700;color:var(--text)}
html :is(.design-reference,.shipments-reference,.dr-dialog) h3 {font-size:18px;line-height:30px;font-weight:600;color:var(--text)}
html :is(.design-reference,.shipments-reference,.dr-dialog) :focus-visible {outline:2px solid var(--focus);outline-offset:2px}
html :is(.design-reference,.shipments-reference,.dr-dialog) [dir="ltr"] {unicode-bidi:isolate;letter-spacing:normal}
html :is(.design-reference,.shipments-reference,.dr-dialog) table :is(th,td,.row-number){font-family:var(--font-ui);font-synthesis:none}
html :is(.design-reference,.shipments-reference,.dr-dialog) .dr-tabs :is(.dr-tab-label,.dr-tab-count){font-family:var(--font-ui);font-synthesis:none}
.sr-only {position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* Buttons and controls have one shape in both themes. */
html :is(.design-reference,.shipments-reference,.dr-dialog) .dr-button.dr-button {
 min-height:var(--control-height);height:var(--control-height);padding:0 16px;gap:8px;
 display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;
 border:1px solid var(--control-border);border-radius:var(--radius-control);
 background:var(--surface);color:var(--text);font-size:14px;line-height:24px;font-weight:600;
 box-shadow:none;white-space:nowrap;transition:background var(--motion-fast),border-color var(--motion-fast);
}
html :is(.design-reference,.shipments-reference,.dr-dialog) .dr-button.primary {background:var(--brand);color:var(--on-brand);border-color:var(--brand-strong)}
html :is(.design-reference,.shipments-reference,.dr-dialog) .dr-button.primary:hover:not(:disabled) {background:var(--brand-hover)}
html :is(.design-reference,.shipments-reference,.dr-dialog) .dr-button.primary:active:not(:disabled) {background:var(--brand-pressed)}
html :is(.design-reference,.shipments-reference,.dr-dialog) .dr-button.secondary:hover:not(:disabled) {background:var(--hover)}
html :is(.design-reference,.shipments-reference,.dr-dialog) .dr-button.dr-button.secondary:not(:disabled) {background:var(--surface);color:var(--text);border-color:var(--control-border)}
html :is(.design-reference,.shipments-reference,.dr-dialog) .dr-button.dr-button.secondary:hover:not(:disabled) {background:var(--hover)}
html :is(.design-reference,.shipments-reference,.dr-dialog) .dr-button:is(.ghost,.link) {border-color:transparent;background:transparent;color:var(--text)}
html :is(.design-reference,.shipments-reference,.dr-dialog) .dr-button:is(.ghost,.link):hover:not(:disabled) {background:var(--hover)}
html :is(.design-reference,.shipments-reference,.dr-dialog) .dr-button.danger {background:var(--danger-button-bg);color:var(--danger-button-text);border-color:var(--danger-button-bg)}
html :is(.design-reference,.shipments-reference,.dr-dialog) .dr-button.danger-outline {background:var(--surface);color:var(--danger-text);border-color:var(--danger-text)}
html :is(.design-reference,.shipments-reference,.dr-dialog) .dr-button.blue {background:var(--information-bg);color:var(--information-text);border-color:var(--information-text)}
html :is(.design-reference,.shipments-reference,.dr-dialog) .dr-button.small {height:var(--control-small);min-height:var(--control-small);padding-inline:12px}
html :is(.design-reference,.shipments-reference,.dr-dialog) .dr-button:disabled {opacity:1;background:var(--disabled-bg);color:var(--disabled-text);border-color:var(--border);cursor:not-allowed}
html :is(.design-reference,.shipments-reference,.dr-dialog) .dr-icon-button.dr-icon-button {
 position:relative;width:var(--icon-button-size);height:var(--icon-button-size);min-width:var(--icon-button-size);
 padding:0;display:inline-flex;align-items:center;justify-content:center;flex:none;
 color:var(--text-muted);background:transparent;border:1px solid transparent;border-radius:var(--radius-control);box-shadow:none;
}
html :is(.design-reference,.shipments-reference,.dr-dialog) .dr-icon-button:hover:not(:disabled) {background:var(--hover);color:var(--text)}
html :is(.design-reference,.shipments-reference,.dr-dialog) .dr-icon-button:disabled {opacity:1;color:var(--disabled-text);cursor:not-allowed}
html :is(.design-reference,.shipments-reference,.dr-dialog) .dr-icon-button.danger {color:var(--danger-text)}
html :is(.design-reference,.shipments-reference,.dr-dialog) .dr-icon-button:is(.eye-action,.print-action,.appointment-action) {color:var(--text-muted);background:transparent;border-color:transparent}
.dr-tooltip {position:absolute;z-index:var(--z-tooltip);inset-block-end:calc(100% + 8px);inset-inline-start:50%;transform:translateX(50%);max-width:240px;width:max-content;padding:4px 8px;border:1px solid var(--border);border-radius:6px;background:var(--surface-raised);color:var(--text);font-size:12px;line-height:20px;box-shadow:var(--shadow-menu);visibility:hidden;opacity:0;pointer-events:none;white-space:normal}
.dr-icon-button:is(:hover,:focus-visible)>.dr-tooltip {visibility:visible;opacity:1}
.spin {animation:dr-spin 1s linear infinite}
@keyframes dr-spin {to {transform:rotate(360deg)}}

/* Semantics, never new domain states. */
html :is(.design-reference,.shipments-reference,.dr-dialog) .dr-badge.dr-badge {
 height:28px;min-height:28px;padding:0 10px;gap:6px;border:0;border-radius:var(--radius-badge);
 display:inline-flex;align-items:center;white-space:nowrap;max-width:none;font-size:12px;line-height:20px;font-weight:600;
 background:var(--inactive-bg);color:var(--inactive-text);
}
html :is(.design-reference,.shipments-reference,.dr-dialog) :is(.dr-badge.amber,.dr-badge.orange) {background:var(--waiting-bg);color:var(--waiting-text)}
html :is(.design-reference,.shipments-reference,.dr-dialog) .dr-badge.blue {background:var(--transit-bg);color:var(--transit-text)}
html :is(.design-reference,.shipments-reference,.dr-dialog) .dr-badge.cyan {background:var(--arrived-bg);color:var(--arrived-text)}
html :is(.design-reference,.shipments-reference,.dr-dialog) .dr-badge.indigo {background:var(--delivery-bg);color:var(--delivery-text)}
html :is(.design-reference,.shipments-reference,.dr-dialog) .dr-badge.green {background:var(--success-bg);color:var(--success-text)}
html :is(.design-reference,.shipments-reference,.dr-dialog) .dr-badge.purple {background:var(--returned-bg);color:var(--returned-text)}
html :is(.design-reference,.shipments-reference,.dr-dialog) .dr-badge.red {background:var(--danger-bg);color:var(--danger-text)}
html :is(.design-reference,.shipments-reference,.dr-dialog) .dr-badge>span {font:inherit;color:inherit}
html :is(.design-reference,.shipments-reference,.dr-dialog) .dr-money.dr-money {font-size:14px;line-height:22px;font-weight:600;text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap;unicode-bidi:isolate;color:var(--text)}
html :is(.design-reference,.shipments-reference,.dr-dialog) .dr-money.negative {color:var(--danger-text)}
html :is(.design-reference,.shipments-reference,.dr-dialog) .dr-money.positive {color:var(--success-text)}
html :is(.design-reference,.shipments-reference,.dr-dialog) .dr-money.zero {color:var(--text-muted)}
.dr-tracking {display:inline-flex;align-items:center;gap:4px;max-width:100%}
html :is(.design-reference,.shipments-reference,.dr-dialog) :is(.dr-tracking .code,.dr-tracking-link) {color:var(--link);font-size:14px;line-height:22px;font-weight:600;background:transparent;border:0;padding:0;cursor:pointer;white-space:nowrap}
html :is(.design-reference,.shipments-reference,.dr-dialog) .dr-tracking-link:hover {text-decoration:underline}
html :is(.design-reference,.shipments-reference,.dr-dialog) .dr-tracking.large :is(.code,.dr-tracking-link) {font-size:20px;line-height:32px;font-weight:700}
html :is(.design-reference,.shipments-reference,.dr-dialog) .dr-stat.dr-stat {padding:20px;border:1px solid var(--border);border-radius:var(--radius-card);background:var(--surface);box-shadow:none;display:flex;align-items:center;justify-content:space-between;gap:16px}
html :is(.design-reference,.shipments-reference,.dr-dialog) .dr-stat>div>span {font-size:13px;line-height:22px;color:var(--text-muted);font-weight:600}
html :is(.design-reference,.shipments-reference,.dr-dialog) .dr-stat strong {display:block;font-size:28px;line-height:40px;font-weight:700;color:var(--text);margin:4px 0 0}
html :is(.design-reference,.shipments-reference,.dr-dialog) .dr-stat small {font-size:12px;line-height:20px;color:var(--text-muted);margin:4px 0 0}
html :is(.design-reference,.shipments-reference,.dr-dialog) .dr-stat .tile-icon {width:40px;height:40px;border:0;border-radius:8px;background:var(--information-bg);color:var(--information-text);display:grid;place-items:center;flex:none}
html :is(.design-reference,.shipments-reference,.dr-dialog) .dr-stat .tile-icon.amber {background:var(--waiting-bg);color:var(--waiting-text)}
html :is(.design-reference,.shipments-reference,.dr-dialog) .dr-stat .tile-icon.green {background:var(--success-bg);color:var(--success-text)}
html :is(.design-reference,.shipments-reference,.dr-dialog) .dr-stat .tile-icon.purple {background:var(--returned-bg);color:var(--returned-text)}

/* FormField and searchable options. */
html :is(.design-reference,.shipments-reference,.dr-dialog) .dr-field.dr-field {display:flex;flex-direction:column;gap:6px;min-width:0}
html :is(.design-reference,.shipments-reference,.dr-dialog) .dr-field>label {font-size:13px;line-height:22px;font-weight:600;color:var(--text);display:block}
html :is(.design-reference,.shipments-reference,.dr-dialog) .dr-field em {font-style:normal;color:var(--danger-text);padding-inline:4px}
html :is(.design-reference,.shipments-reference,.dr-dialog) .dr-field :is(input:not([type=checkbox]):not([type=radio]),select,textarea) {
 width:100%;min-width:0;min-height:var(--control-height);height:var(--control-height);
 padding:8px 12px;border:1px solid var(--control-border);border-radius:var(--radius-control);
 color:var(--text);background:var(--surface);font-size:14px;line-height:24px;font-weight:400;box-shadow:none;
}
html :is(.design-reference,.shipments-reference,.dr-dialog) .dr-field :is(input,select,textarea)::placeholder {color:var(--text-muted);opacity:1}
html :is(.design-reference,.shipments-reference,.dr-dialog) .dr-field :is(input,select,textarea):focus {outline:2px solid var(--focus);outline-offset:2px;border-color:var(--control-border)}
html :is(.design-reference,.shipments-reference,.dr-dialog) .dr-field :is(input,select,textarea):disabled {background:var(--disabled-bg);color:var(--disabled-text);border-color:var(--border);opacity:1}
html :is(.design-reference,.shipments-reference,.dr-dialog) .dr-field :is(input,textarea):read-only {background:var(--surface-subtle);color:var(--text)}
html :is(.design-reference,.shipments-reference,.dr-dialog) .dr-field.dr-field textarea[aria-label] {height:112px;min-height:112px;resize:vertical}
html :is(.design-reference,.shipments-reference,.dr-dialog) .dr-field>small {font-size:12px;line-height:20px;color:var(--text-muted);margin-block-start:-2px}
html :is(.design-reference,.shipments-reference,.dr-dialog) .dr-field.has-error :is(input,select,textarea) {border-color:var(--danger-text)}
html :is(.design-reference,.shipments-reference,.dr-dialog) .dr-field .dr-field-error {display:flex;align-items:flex-start;gap:6px;color:var(--danger-text)}
.dr-select,.dr-combobox {position:relative;min-width:0}
html :is(.design-reference,.shipments-reference,.dr-dialog) .dr-select select {appearance:none;padding-inline-end:40px}
.dr-select>svg {position:absolute;inset-inline-end:12px;inset-block-start:13px;pointer-events:none;color:var(--text-muted)}
html :is(.design-reference,.shipments-reference,.dr-dialog) .dr-combobox input {padding-inline-end:44px}
.dr-combobox-toggle {position:absolute;inset-inline-end:0;inset-block-start:0;height:44px;width:40px;background:transparent;border:0;color:var(--text-muted);display:grid;place-items:center}
.dr-combobox-list {position:absolute;inset-inline:0;inset-block-start:calc(100% + 4px);max-height:320px;overflow-y:auto;background:var(--surface-raised);border:1px solid var(--border);border-radius:8px;box-shadow:var(--shadow-menu);z-index:var(--z-dropdown);padding:4px}
.dr-combobox-list>button {display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;min-height:44px;padding:8px 12px;background:transparent;color:var(--text);border:0;border-radius:4px;text-align:start;font-size:14px;line-height:24px;font-weight:400;white-space:normal}
.dr-combobox-list>button.active,.dr-combobox-list>button:hover {background:var(--hover)}
.dr-combobox-list>button.selected {background:var(--selected)}
.dr-combobox-list small {display:block;font-size:12px;line-height:20px;color:var(--text-muted)}
.dr-combobox-empty {padding:12px;color:var(--text-muted);font-size:14px}
html :is(.design-reference,.shipments-reference,.dr-dialog) input:is([type=checkbox],[type=radio]) {appearance:auto;inline-size:18px;block-size:18px;accent-color:var(--brand);border:1px solid var(--control-border);cursor:pointer}
html :is(.design-reference,.shipments-reference,.dr-dialog) .form-grid {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
html :is(.design-reference,.shipments-reference,.dr-dialog) .form-grid>.dr-field:has(textarea) {grid-column:1/-1}

/* Tabs do not become differently colored cards by feature. */
html :is(.design-reference,.shipments-reference,.dr-dialog) .dr-tabs.dr-tabs {display:flex;gap:16px;overflow:auto;max-width:100%;padding:0;margin:0 0 24px;border-block-end:1px solid var(--border);border-radius:0;background:transparent}
html :is(.design-reference,.shipments-reference,.dr-dialog) .dr-tabs>button {height:40px;min-height:40px;display:inline-flex;align-items:center;gap:8px;padding:0 12px;background:transparent;color:var(--text-muted);border:0;border-block-end:3px solid transparent;border-radius:0;box-shadow:none;font-size:14px;line-height:24px;font-weight:600;white-space:nowrap}
html :is(.design-reference,.shipments-reference,.dr-dialog) .dr-tabs>button.active:nth-child(n) {background:transparent;border:0;border-block-end:3px solid var(--brand);color:var(--text)}
html :is(.design-reference,.shipments-reference,.dr-dialog) .dr-tabs>button>.dr-tab-label {padding:0;background:transparent;font-size:14px;line-height:24px;color:inherit;border:0;border-radius:0}
html :is(.design-reference,.shipments-reference,.dr-dialog) .dr-tabs>button>.dr-tab-count {padding:0 6px;border-radius:6px;background:var(--surface-subtle);color:var(--text-muted);font-size:12px;line-height:20px;font-weight:600}
html :is(.design-reference,.shipments-reference,.dr-dialog) .dr-tabs>button.active>.dr-tab-count {background:var(--brand-soft);color:var(--text)}

/* Table text, spacing and selection are shared; calculations live elsewhere. */
html :is(.design-reference,.shipments-reference,.dr-dialog) .dr-table-scroll {width:100%;max-width:100%;overflow-x:auto;position:relative;background:var(--surface);scrollbar-width:thin}
html :is(.design-reference,.shipments-reference,.dr-dialog) .dr-table.dr-table {width:100%;border-collapse:collapse;color:var(--text);font-size:14px;line-height:22px;text-align:start;white-space:nowrap}
html :is(.design-reference,.shipments-reference,.dr-dialog) .dr-table th {height:44px;padding:11px 16px;border:0;border-block-end:1px solid var(--border);background:var(--surface-subtle);font-size:13px;line-height:22px;font-weight:600;color:var(--text-muted);text-align:start}
html :is(.design-reference,.shipments-reference,.dr-dialog) .dr-table td {height:56px;padding:12px 16px;border:0;border-block-end:1px solid var(--border);background:transparent;font-size:14px;line-height:22px;font-weight:400;color:var(--text);vertical-align:middle}
html :is(.design-reference,.shipments-reference,.dr-dialog) .dr-table tbody tr:nth-child(n) {background:var(--surface)}
html :is(.design-reference,.shipments-reference,.dr-dialog) .dr-table tbody tr:hover {background:var(--hover)}
html :is(.design-reference,.shipments-reference,.dr-dialog) .dr-table tbody tr.selected {background:var(--selected)}
html :is(.design-reference,.shipments-reference,.dr-dialog) .dr-table .check-cell {width:50px;padding-inline:16px!important}
html :is(.design-reference,.shipments-reference,.dr-dialog) .dr-table .row-number {width:40px;font-size:12px;color:var(--text-muted)}
html :is(.design-reference,.shipments-reference,.dr-dialog) .dr-table .main-text {font-size:14px;line-height:22px;font-weight:600;color:var(--text)}
html :is(.design-reference,.shipments-reference,.dr-dialog) .dr-table .sub-text {display:block;margin-block-start:4px;font-size:12px;line-height:20px;color:var(--text-muted);font-weight:400}
html :is(.design-reference,.shipments-reference,.dr-dialog) .dr-table :is(.money-cell,.financial-cell) {min-width:128px;text-align:right}
html :is(.design-reference,.shipments-reference,.dr-dialog) .dr-table .status-cell {min-width:136px}
html :is(.design-reference,.shipments-reference,.dr-dialog) .dr-table .quick-actions-cell {background:transparent;min-width:104px;position:static}
html :is(.design-reference,.shipments-reference,.dr-dialog) .dr-table .quick-actions {display:flex;gap:4px;align-items:center}
html :is(.design-reference,.shipments-reference,.dr-dialog) .dr-table-footer.dr-table-footer {display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 16px;background:var(--surface);border-block-start:1px solid var(--border);color:var(--text-muted);font-size:12px;line-height:20px}
html :is(.design-reference,.shipments-reference,.dr-dialog) .dr-pagination.dr-pagination {display:flex;align-items:center;gap:8px;font-family:var(--font-ui)}
html :is(.design-reference,.shipments-reference,.dr-dialog) .dr-pagination :is(select,button) {min-height:40px;border:1px solid var(--control-border);border-radius:8px;background:var(--surface);color:var(--text);font-size:12px;line-height:20px;padding:8px}
html :is(.design-reference,.shipments-reference,.dr-dialog) .dr-pagination button {width:40px;display:grid;place-items:center}
html :is(.design-reference,.shipments-reference,.dr-dialog) .dr-pagination button:disabled {opacity:1;background:var(--disabled-bg);color:var(--disabled-text);border-color:var(--border)}
html :is(.design-reference,.shipments-reference,.dr-dialog) .dr-pagination b {font-size:12px;font-weight:600;white-space:nowrap}
.dr-filter-chips {display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.dr-filter-chip {display:inline-flex;align-items:center;gap:4px;padding-inline-start:12px;min-height:36px;border:1px solid var(--border);border-radius:18px;background:var(--surface-subtle);color:var(--text);font-size:12px;line-height:20px}
.dr-filter-chip .dr-icon-button {width:36px;height:36px;min-width:36px}
.dr-dropdown {position:relative;display:inline-flex}
.dr-dropdown-panel {position:absolute;inset-block-start:calc(100% + 4px);inset-inline-end:0;width:max-content;min-width:200px;max-width:280px;z-index:var(--z-dropdown);background:var(--surface-raised);border:1px solid var(--border);border-radius:8px;box-shadow:var(--shadow-menu);padding:4px}
.dr-dropdown-panel>button {display:flex;align-items:center;gap:8px;width:100%;min-height:44px;padding:8px 12px;border:0;border-radius:4px;background:transparent;color:var(--text);font-size:14px;line-height:24px;text-align:start;font-weight:400}
.dr-dropdown-panel>button:hover {background:var(--hover)}
.dr-dropdown-panel>button:disabled {color:var(--disabled-text);opacity:1;cursor:not-allowed}
.dr-dropdown-panel>button.danger {color:var(--danger-text);border-block-start:1px solid var(--border);border-radius:0;margin-block-start:4px;padding-block-start:12px}
.dr-menu-portal {position:fixed;inset:auto;max-height:calc(100dvh - 32px);overflow-y:auto;font-family:var(--font-ui);font-synthesis:none}
.dr-menu-portal>button {font-family:var(--font-ui);font-synthesis:none}

/* Modal and Drawer share focus, headers and fixed actions. */
html .dr-overlay.dr-overlay {position:fixed;inset:0;z-index:var(--z-overlay);display:flex;align-items:center;justify-content:center;padding:16px;background:rgba(0,0,0,.45);backdrop-filter:none}
html .dr-dialog.dr-dialog {display:flex;flex-direction:column;width:min(640px,calc(100vw - 32px));max-width:calc(100vw - 32px);max-height:calc(100dvh - 32px);overflow:hidden;margin:0;border:1px solid var(--border);border-radius:var(--radius-modal);background:var(--surface-raised);color:var(--text);box-shadow:var(--shadow-modal);z-index:var(--z-dialog);font-family:var(--font-ui);font-synthesis:none}
html .dr-dialog:focus {outline:none}
html .dr-dialog.dr-size-confirm {width:min(480px,calc(100vw - 32px))}
html .dr-dialog.dr-size-large {width:min(880px,calc(100vw - 32px))}
html .dr-dialog>.dr-dialog-header {position:static;display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding:24px;flex:none;background:var(--surface-raised);border-block-end:1px solid var(--border)}
html .dr-dialog>.dr-dialog-header h2 {font-size:18px;line-height:30px;font-weight:600;color:var(--text);margin:0;overflow-wrap:anywhere}
html .dr-dialog>.dr-dialog-header p {font-size:12px;line-height:20px;color:var(--text-muted);margin:4px 0 0}
html .dr-dialog .dr-dialog-header .dr-icon-button {border:1px solid var(--control-border);background:var(--surface-raised);color:var(--text-muted);width:40px;height:40px;min-width:40px}
html .dr-dialog>.dr-dialog-body {min-height:0;padding:24px;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;scrollbar-gutter:stable;flex:1}
html .dr-dialog>.dr-dialog-footer {position:static;display:flex;align-items:center;justify-content:flex-end;gap:8px;padding:16px 24px;background:var(--surface-raised);border-block-start:1px solid var(--border);color:var(--text);font-size:14px;line-height:24px;flex:none}
html .dr-overlay.drawer-backdrop {justify-content:flex-start;padding:0}
html .dr-dialog.dr-drawer {width:640px;max-width:min(640px,100vw);height:100dvh;max-height:100dvh;border-radius:0;border-inline-end:1px solid var(--border);border-block:0;border-inline-start:0;animation:dr-enter var(--motion-panel) ease-out}
html .dr-dialog.dr-drawer.dr-size-filters {width:480px;max-width:min(480px,100vw)}
@keyframes dr-enter {from {transform:translateX(24px);opacity:0}to {transform:translateX(0);opacity:1}}
html :is(.design-reference,.shipments-reference,.dr-dialog) .form-error {padding:12px 16px;border:1px solid var(--danger-text);border-radius:8px;background:var(--danger-bg);color:var(--danger-text);font-size:14px;line-height:24px;margin-block-start:16px}
html :is(.design-reference,.shipments-reference,.dr-dialog) .info-strip {padding:12px 16px;border:1px solid var(--border);border-radius:8px;background:var(--surface-subtle);color:var(--text-muted);font-size:14px;line-height:24px;margin-block-end:16px}
html :is(.design-reference,.shipments-reference,.dr-dialog) .dr-empty.dr-empty {padding:40px 20px;text-align:center;color:var(--text-muted)}
.dr-empty-icon {width:80px;height:80px;display:grid;place-items:center;background:var(--surface-subtle);color:var(--text-muted);border-radius:12px;margin:0 auto 16px}
html :is(.design-reference,.shipments-reference,.dr-dialog) .dr-empty h3 {font-size:18px;line-height:30px;font-weight:600;color:var(--text);margin:0}
html :is(.design-reference,.shipments-reference,.dr-dialog) .dr-empty p {font-size:14px;line-height:24px;color:var(--text-muted);margin:8px auto 16px;max-width:480px}

/* Shipment form and detail layout: same neutral cards and shared fields. */
.sg-order-form,.sg-order-facts {display:grid;gap:24px;min-width:0}
.sg-form-section,.sg-detail-card {min-width:0;margin:0;padding:20px;border:1px solid var(--border);border-radius:12px;background:var(--surface);box-shadow:none}
.sg-form-section>h3,.sg-detail-card>h3 {margin:0 0 16px;padding:0;display:flex;align-items:center;gap:8px;font-size:18px;line-height:30px;font-weight:600;color:var(--text);border:0;background:transparent}
.sg-form-section>h3 svg,.sg-detail-card>h3 svg {color:var(--text-muted);flex:none}
.sg-form-section-body,.sg-detail-card-body {display:grid;gap:16px;min-width:0;padding:0}
.sg-field-grid,.sg-facts-grid {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;min-width:0}
.sg-field-full {grid-column:1/-1}
.sg-readonly {display:flex;flex-direction:column;gap:6px;min-height:44px;padding:12px;background:var(--surface-subtle);border:0;border-radius:8px;color:var(--text);overflow-wrap:anywhere}
.sg-readonly>span,.sg-readonly>small {font-size:13px;line-height:22px;font-weight:600;color:var(--text-muted)}
.sg-readonly>strong {font-size:14px;line-height:24px;font-weight:600;color:var(--text)}
.sg-form-required,.sg-form-hint {font-size:12px;line-height:20px;color:var(--text-muted);margin:0}
.sg-unsaved {font-size:12px;line-height:20px;color:var(--waiting-text);background:var(--waiting-bg);padding:4px 8px;border-radius:6px}
.sg-contacts {padding:12px;border:1px solid var(--border);border-radius:8px;background:var(--surface-subtle)}
.sg-contacts>p {display:flex;align-items:center;gap:8px;font-size:14px;line-height:24px;font-weight:600;color:var(--text);margin:0 0 8px}
.sg-contacts button {display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;text-align:start;width:100%;border:0;border-block-start:1px solid var(--border);background:transparent;padding:12px 0;color:var(--text);font-size:14px;line-height:24px}
.sg-contacts button small {display:block;font-size:12px;line-height:20px;color:var(--text-muted)}
.sg-line-items {display:grid;gap:16px}
.sg-line-item {display:grid;grid-template-columns:minmax(0,1fr) 96px 40px;gap:16px;align-items:end;min-width:0}
.sg-form-footer {width:100%;display:flex;align-items:center;justify-content:flex-end;gap:8px;flex-wrap:wrap}
.sg-party {min-width:0}
.sg-party+.sg-party {padding-block-start:16px;border-block-start:1px solid var(--border)}
.sg-party h4 {font-size:14px;line-height:24px;font-weight:600;margin:0 0 12px;color:var(--text)}
.sg-facts-grid {padding:0;margin:0}
.sg-fact {margin:0;padding:0;background:transparent;border:0;min-width:0}
.sg-fact dt {font-size:13px;line-height:22px;color:var(--text-muted);font-weight:600;margin:0 0 6px}
.sg-fact dd {font-size:14px;line-height:24px;color:var(--text);font-weight:400;margin:0;white-space:pre-wrap;overflow-wrap:anywhere}
.sg-detail-money {display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 0;border-block-end:1px solid var(--border);font-size:14px;line-height:24px}
.sg-detail-money:last-child {border-block-end:0}
.sg-detail-total {display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px;background:var(--surface-subtle);border-radius:8px;font-size:14px;line-height:24px;font-weight:600;color:var(--text)}
.sg-contents-list {display:grid;gap:0;padding:0;margin:0;list-style:none}
.sg-contents-list>li,.sg-contents-list>div {display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding:12px 0;border-block-end:1px solid var(--border);font-size:14px;line-height:24px;min-width:0}
.sg-contents-list>:first-child {padding-block-start:0}
.sg-contents-list>:last-child {border:0;padding-block-end:0}
.sg-contents-list strong {font-size:14px;line-height:24px;font-weight:600;overflow-wrap:anywhere}
.sg-content-description {margin:0;font-size:14px;line-height:24px;white-space:pre-wrap;overflow-wrap:anywhere;color:var(--text)}

@media (max-width:1023px) {html :is(.design-reference,.shipments-reference) .dr-stat {padding:16px}}
@media (max-width:767px) {
 html :is(.design-reference,.shipments-reference,.dr-dialog) h1 {font-size:24px;line-height:38px}
 html :is(.design-reference,.shipments-reference,.dr-dialog) .dr-field :is(input:not([type=checkbox]):not([type=radio]),select,textarea) {font-size:16px;line-height:26px}
 html :is(.design-reference,.shipments-reference,.dr-dialog) .dr-icon-button.dr-icon-button {width:44px;height:44px;min-width:44px}
 html :is(.design-reference,.shipments-reference,.dr-dialog) .dr-button.small {height:44px;min-height:44px}
 html :is(.design-reference,.shipments-reference,.dr-dialog) .form-grid,.sg-field-grid,.sg-facts-grid {grid-template-columns:1fr}
 .sg-field-full {grid-column:auto}
 html :is(.design-reference,.shipments-reference,.dr-dialog) .dr-tabs.dr-tabs {gap:4px}
 html :is(.design-reference,.shipments-reference,.dr-dialog) .dr-table-footer.dr-table-footer {align-items:flex-start;flex-direction:column;gap:12px}
 html :is(.design-reference,.shipments-reference,.dr-dialog) .dr-pagination :is(select,button) {min-height:44px}
 html :is(.design-reference,.shipments-reference,.dr-dialog) .dr-pagination button {width:44px}
 html .dr-dialog>.dr-dialog-header {padding:16px}
 html .dr-dialog>.dr-dialog-body {padding:16px}
 html .dr-dialog>.dr-dialog-footer {padding:16px}
 html .dr-dialog.dr-drawer,html .dr-dialog.dr-drawer.dr-size-filters {width:100vw;max-width:100vw}
 .sg-form-section,.sg-detail-card {padding:16px}
 .sg-line-item {grid-template-columns:minmax(0,1fr) 44px;gap:12px}
 .sg-line-item>.dr-field:first-child {grid-column:1/-1}
 .sg-line-item>.dr-field:nth-child(2) {max-width:128px}
 .sg-form-footer {gap:8px}
 .sg-form-footer .sg-unsaved {width:100%}
}
@media (prefers-reduced-motion:reduce) {
 html :is(.design-reference,.shipments-reference,.dr-dialog) *,html .dr-overlay * {animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}
@media print {
 .design-reference {color:#000;background:#fff}
 .design-reference :is(.sidebar,.topbar,.filters,.dr-filter-chips,.dr-icon-button,.heading-actions) {display:none!important}
 .design-reference :is(.dr-table,.dr-table th,.dr-table td) {background:#fff!important;color:#000!important}
}