:root {
  color-scheme: light;
  --ink: #182522;
  --ink-soft: #364640;
  --muted: #7b8781;
  --line: #e5eae6;
  --canvas: #f5f7f5;
  --paper: #ffffff;
  --forest: #173c31;
  --forest-2: #245946;
  --mint: #e6f3eb;
  --mint-strong: #b8dfc6;
  --orange: #d67646;
  --orange-soft: #fff1e7;
  --yellow: #b78a2c;
  --yellow-soft: #fff8e7;
  --mono: 'IBM Plex Mono', Consolas, monospace;
  --sans: 'DM Sans', 'Segoe UI', sans-serif;
}

* { box-sizing: border-box; }
html { min-width: 360px; background: var(--canvas); }
body { margin: 0; color: var(--ink); font-family: var(--sans); font-size: 14px; -webkit-font-smoothing: antialiased; }
button, input, select { font: inherit; }
button { color: inherit; }
a { color: inherit; text-decoration: none; }
.workspace { min-height: 100vh; display: grid; grid-template-columns: 244px minmax(0, 1fr); }

.sidebar { position: sticky; top: 0; display: flex; flex-direction: column; height: 100vh; min-height: 720px; padding: 24px 15px 14px; background: #14221f; color: #f4f7f4; }
.brand { display: flex; align-items: center; gap: 11px; padding: 0 10px 30px; }
.brand-mark { display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid #789488; border-radius: 9px; color: #d8ece0; }
.brand-mark svg { width: 24px; height: 24px; }
.brand-copy { display: grid; gap: 3px; }
.brand-copy strong { font-size: 12px; letter-spacing: 1.35px; }
.brand-copy small { color: #94aaa0; font-family: var(--mono); font-size: 8px; letter-spacing: .85px; }
.workspace-label, .nav-label { padding: 0 11px; color: #8da29a; font-family: var(--mono); font-size: 9px; letter-spacing: 1.1px; }
.location-switch { display: flex; width: 100%; align-items: center; gap: 10px; margin: 10px 0 27px; padding: 11px 10px; border: 1px solid #31443d; border-radius: 7px; background: #1b2d27; text-align: left; }
.location-icon { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 6px; background: #28483b; color: #c4e2cf; font-size: 19px; }
.location-switch strong, .location-switch small { display: block; }
.location-switch strong { font-size: 12px; font-weight: 600; }
.location-switch small { margin-top: 3px; color: #a2b2aa; font-size: 10px; }
.chevron { margin-left: auto; color: #a2b2aa; }
.nav-label { margin: 0 0 9px; }
.side-nav { display: grid; gap: 3px; }
.side-link { position: relative; display: flex; height: 39px; align-items: center; gap: 12px; padding: 0 11px; border-radius: 6px; color: #b7c5bd; font-size: 12px; transition: background .18s, color .18s; }
.side-link:hover, .side-link.active { background: #28443a; color: #fff; }
.side-link.active::before { position: absolute; left: -15px; width: 3px; height: 21px; border-radius: 0 3px 3px 0; background: #8ac69f; content: ''; }
.nav-glyph { display: grid; width: 16px; place-items: center; color: #a4b7ac; font-size: 17px; }
.side-link.active .nav-glyph { color: #bbdfc7; }
.side-count { margin-left: auto; padding: 2px 6px; border: 1px solid #4a6257; border-radius: 9px; color: #d2dfd7; font-family: var(--mono); font-size: 9px; }
.finance-label { margin-top: 28px; }
.sidebar-bottom { display: grid; gap: 17px; margin-top: auto; }
.support-status { display: flex; gap: 9px; align-items: flex-start; padding: 13px 9px; border-top: 1px solid #31423c; border-bottom: 1px solid #31423c; }
.status-dot, .mini-dot, .order-ref-dot { display: inline-block; flex: 0 0 auto; width: 7px; height: 7px; margin-top: 4px; border-radius: 50%; background: #7cbd8d; }
.support-status strong, .support-status small, .user-profile strong, .user-profile small { display: block; }
.support-status strong { font-size: 10px; font-weight: 600; }
.support-status small { margin-top: 4px; color: #96a79e; font-size: 9px; }
.user-profile { display: flex; align-items: center; gap: 9px; padding: 0 5px; }
.user-avatar, .top-avatar { display: grid; flex: 0 0 auto; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: #d7a278; color: #39291e; font-size: 10px; font-weight: 700; }
.user-profile strong { font-size: 10px; }
.user-profile small { margin-top: 3px; color: #9cafa5; font-size: 9px; }
.profile-menu { margin-left: auto; color: #98aaa1; letter-spacing: 2px; }

.main-content { min-width: 0; }
.topbar { position: sticky; z-index: 2; top: 0; display: flex; height: 60px; align-items: center; justify-content: space-between; padding: 0 35px; border-bottom: 1px solid var(--line); background: rgba(255,255,255,.96); backdrop-filter: blur(12px); }
.breadcrumbs { display: flex; align-items: center; gap: 9px; color: #919a94; font-size: 11px; }
.breadcrumbs strong { color: #34463e; font-weight: 600; }
.crumb-slash { color: #c2c9c4; }
.topbar-actions { display: flex; align-items: center; gap: 20px; }
.demo-label { display: inline-flex; align-items: center; gap: 7px; padding: 6px 9px; border: 1px solid #f0d6c6; border-radius: 4px; background: #fff8f3; color: #9a5937; font-family: var(--mono); font-size: 8px; letter-spacing: .55px; }
.demo-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--orange); }
.icon-button { position: relative; display: grid; width: 30px; height: 30px; place-items: center; border: 0; background: transparent; color: #56645e; font-size: 17px; }
.icon-button i { position: absolute; top: 5px; right: 4px; width: 5px; height: 5px; border: 1px solid white; border-radius: 50%; background: var(--orange); }
.top-avatar { width: 29px; height: 29px; background: #dbe9df; color: #355847; }
.page-wrap { width: min(1500px, 100%); margin: 0 auto; padding: 28px 35px 20px; }
.page-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; margin-bottom: 23px; }
.eyebrow, .section-kicker { display: flex; align-items: center; gap: 7px; color: #728179; font-family: var(--mono); font-size: 9px; letter-spacing: .78px; }
.eyebrow-line { width: 16px; height: 1px; background: var(--orange); }
.eyebrow-separator { margin: 0 1px; color: #c2c9c4; }
h1 { margin: 10px 0 5px; font-size: 26px; font-weight: 600; letter-spacing: 0; line-height: 1.2; }
.page-heading p { margin: 0; color: #76827b; font-size: 12px; }
.reset-button { display: flex; align-items: center; gap: 7px; padding: 8px 10px; border: 1px solid #dce3de; border-radius: 5px; background: #fff; color: #56645d; font-size: 10px; cursor: pointer; }
.reset-button:hover { border-color: #a9c4b3; color: var(--forest); }
.reset-button span { font-size: 15px; }

.metric-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-bottom: 28px; border: 1px solid var(--line); border-radius: 7px; background: var(--paper); }
.metric { min-width: 0; padding: 14px 17px 13px; border-right: 1px solid var(--line); }
.metric:last-child { border-right: 0; }
.metric-label { color: #87928b; font-family: var(--mono); font-size: 8px; letter-spacing: .72px; }
.metric-value { margin: 7px 0 5px; color: #25362f; font-size: 23px; font-weight: 600; line-height: 1; }
.metric-value small { color: #79867e; font-size: 10px; font-weight: 500; }
.metric-trend { margin-left: 5px; color: #47825b; font-family: var(--mono); font-size: 9px; vertical-align: middle; }
.metric-foot { display: flex; align-items: center; gap: 6px; color: #818d86; font-size: 9px; }
.mini-dot { width: 6px; height: 6px; margin: 0; }
.mini-dot.amber { background: #d7a145; }
.metric-alert .metric-value { color: #b47632; }

.journey-section { overflow: hidden; border: 1px solid var(--line); border-radius: 7px; background: var(--paper); box-shadow: 0 4px 18px rgba(24,43,34,.035); }
.section-heading { display: flex; align-items: center; justify-content: space-between; gap: 15px; padding: 18px 20px 14px; }
.section-kicker { color: #8b968f; font-size: 8px; letter-spacing: .9px; }
h2 { margin: 5px 0 0; color: #25352f; font-size: 17px; font-weight: 600; }
.order-reference { display: flex; align-items: center; gap: 8px; color: #89948d; font-family: var(--mono); font-size: 8px; letter-spacing: .45px; }
.order-reference strong { margin-left: 1px; color: #33483d; font-size: 10px; font-weight: 600; }
.order-ref-dot { width: 6px; height: 6px; margin: 0; background: #93a599; }
.stepper { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); padding: 0 20px 16px; border-bottom: 1px solid var(--line); }
.journey-step { position: relative; display: grid; grid-template-columns: 24px 1fr; grid-template-rows: auto auto; align-items: center; column-gap: 7px; min-width: 0; padding: 8px; border: 1px solid transparent; border-radius: 5px; background: transparent; text-align: left; cursor: pointer; }
.journey-step:not(:last-child)::after { position: absolute; top: 19px; right: -10px; z-index: 1; width: 12px; height: 1px; background: #dce3de; content: ''; }
.step-index { display: grid; grid-row: span 2; width: 23px; height: 23px; place-items: center; border: 1px solid #dce4de; border-radius: 50%; color: #7b8980; font-family: var(--mono); font-size: 8px; }
.step-name { overflow: hidden; color: #65736b; font-size: 10px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.step-state { margin-top: 2px; color: #98a29c; font-family: var(--mono); font-size: 8px; }
.journey-step:hover { background: #f7faf7; }
.journey-step.active { border-color: #ccdfd2; background: #f2f8f4; }
.journey-step.active .step-index, .journey-step.complete .step-index { border-color: var(--forest-2); background: var(--forest-2); color: #fff; }
.journey-step.active .step-name { color: var(--forest); }
.journey-step.complete .step-index { border-color: #75a989; background: #e3f0e7; color: #326344; }
.journey-step.complete .step-state { color: #548366; }

.journey-layout { display: grid; grid-template-columns: minmax(0, 1fr) 260px; min-height: 415px; }
.stage-panel { min-width: 0; padding: 21px 20px 18px; border-right: 1px solid var(--line); }
.activity-panel { display: flex; min-width: 0; flex-direction: column; padding: 19px 16px 15px; background: #fbfcfb; }
.activity-head { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 14px; }
.activity-head h3 { margin: 4px 0 0; font-size: 13px; font-weight: 600; }
.live-pill { display: inline-flex; align-items: center; gap: 5px; padding: 4px 6px; border: 1px solid #deebe1; border-radius: 3px; color: #518260; font-family: var(--mono); font-size: 7px; }
.live-pill span { width: 5px; height: 5px; border-radius: 50%; background: #5eaa74; }
.activity-list { display: grid; gap: 0; }
.activity-item { position: relative; padding: 0 0 13px 15px; border-left: 1px solid #e1e8e3; }
.activity-item:last-child { padding-bottom: 4px; border-left-color: transparent; }
.activity-item::before { position: absolute; top: 3px; left: -3px; width: 5px; height: 5px; border: 1px solid #a8bcb0; border-radius: 50%; background: #fbfcfb; content: ''; }
.activity-item.newest::before { border-color: #478761; background: #71ad83; }
.activity-time { color: #9aa49d; font-family: var(--mono); font-size: 8px; }
.activity-message { margin-top: 3px; color: #5e6b63; font-size: 9px; line-height: 1.45; }
.record-card { margin-top: auto; padding: 12px 11px 9px; border: 1px solid #e5ebe6; border-radius: 5px; background: #fff; }
.record-top { display: flex; justify-content: space-between; color: #929d95; font-family: var(--mono); font-size: 7px; letter-spacing: .5px; }
.record-lock { color: #8a9f91; font-size: 10px; }
.record-id { margin: 8px 0 9px; color: #31483b; font-family: var(--mono); font-size: 12px; font-weight: 600; }
.record-line { display: flex; justify-content: space-between; gap: 5px; padding: 5px 0; border-top: 1px solid #f0f3f0; color: #929b95; font-size: 8px; }
.record-line strong { color: #536158; font-size: 8px; font-weight: 600; text-align: right; }
.data-note { display: flex; align-items: flex-start; gap: 7px; margin-top: 11px; color: #929b95; font-size: 8px; line-height: 1.45; }
.note-icon { display: grid; flex: 0 0 auto; width: 12px; height: 12px; place-items: center; border: 1px solid #aab7ae; border-radius: 50%; font-size: 8px; }
.page-footer { display: flex; justify-content: space-between; gap: 14px; padding: 15px 2px 0; color: #9aa49d; font-family: var(--mono); font-size: 7px; letter-spacing: .38px; }
.footer-divider { padding: 0 5px; color: #c3ccc6; }

.stage-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 15px; margin-bottom: 15px; }
.stage-overline { color: #849188; font-family: var(--mono); font-size: 8px; letter-spacing: .8px; }
.stage-title { margin: 5px 0 4px; color: #273830; font-size: 17px; font-weight: 600; }
.stage-description { max-width: 630px; margin: 0; color: #7a867e; font-size: 10px; line-height: 1.55; }
.stage-status { flex: 0 0 auto; padding: 5px 7px; border: 1px solid #dce8df; border-radius: 3px; background: #f5faf6; color: #538165; font-family: var(--mono); font-size: 7px; letter-spacing: .45px; }
.stage-status.pending { border-color: #ecdfc6; background: #fffbf1; color: #a57d35; }
.stage-content { animation: reveal .24s ease both; }
@keyframes reveal { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }
.split-content { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(210px, .8fr); gap: 13px; }
.info-surface { overflow: hidden; border: 1px solid #e6ebe7; border-radius: 5px; background: #fff; }
.surface-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; border-bottom: 1px solid #edf1ed; }
.surface-heading strong { color: #45544b; font-size: 10px; font-weight: 600; }
.surface-heading span { color: #929c95; font-family: var(--mono); font-size: 7px; }
.surface-body { padding: 12px; }
.shipment-photo { position: relative; min-height: 128px; overflow: hidden; border-radius: 4px; background: #243630; }
.shipment-photo img { display: block; width: 100%; height: 128px; object-fit: cover; object-position: center 53%; opacity: .82; }
.shipment-photo::after { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(17,35,28,.68), rgba(17,35,28,.08)); content: ''; }
.photo-caption { position: absolute; z-index: 1; top: 15px; left: 14px; color: #fff; }
.photo-caption small, .photo-caption strong { display: block; }
.photo-caption small { margin-bottom: 5px; color: #d5e2d9; font-family: var(--mono); font-size: 7px; letter-spacing: .55px; }
.photo-caption strong { font-size: 14px; font-weight: 600; }
.photo-caption span { display: inline-block; margin-top: 8px; padding: 4px 6px; border: 1px solid rgba(255,255,255,.35); border-radius: 3px; color: #f5fbf6; font-family: var(--mono); font-size: 7px; }
.data-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 0; margin-top: 10px; border: 1px solid #edf1ed; border-radius: 4px; }
.data-cell { padding: 9px; border-right: 1px solid #edf1ed; }
.data-cell:last-child { border-right: 0; }
.data-cell span, .data-cell strong { display: block; }
.data-cell span { color: #929d95; font-size: 8px; }
.data-cell strong { margin-top: 4px; color: #536159; font-family: var(--mono); font-size: 9px; font-weight: 500; }
.surface-note { margin-top: 9px; color: #87938a; font-size: 9px; line-height: 1.45; }
.control-list { display: grid; }
.control-row { display: flex; align-items: flex-start; gap: 9px; padding: 9px 0; border-bottom: 1px solid #eff2ef; }
.control-row:last-child { border-bottom: 0; }
.control-check { display: grid; flex: 0 0 auto; width: 15px; height: 15px; place-items: center; border: 1px solid #cbd9cf; border-radius: 50%; color: #4e8a61; font-size: 9px; }
.control-check.warn { border-color: #e5d4b1; color: #a98033; }
.control-row strong, .control-row small { display: block; }
.control-row strong { color: #56635b; font-size: 9px; font-weight: 600; }
.control-row small { margin-top: 3px; color: #919b94; font-size: 8px; line-height: 1.4; }
.field-label { display: block; margin: 10px 0 5px; color: #78857d; font-size: 8px; font-weight: 600; }
.text-field, .select-field { width: 100%; height: 33px; padding: 0 9px; border: 1px solid #dfe6e0; border-radius: 4px; outline: none; background: white; color: #45544b; font-size: 10px; }
.text-field:focus, .select-field:focus { border-color: #6c9c7c; box-shadow: 0 0 0 2px #e8f2eb; }
.text-field[readonly] { background: #f7f9f7; }
.primary-action, .secondary-action { display: inline-flex; min-height: 34px; align-items: center; justify-content: center; gap: 7px; padding: 0 12px; border: 1px solid var(--forest); border-radius: 4px; background: var(--forest); color: #fff; font-size: 9px; font-weight: 600; cursor: pointer; transition: background .16s, border .16s, transform .16s; }
.primary-action:hover { border-color: #245c43; background: #245c43; transform: translateY(-1px); }
.primary-action:disabled { border-color: #b9c9be; background: #b9c9be; cursor: not-allowed; transform: none; }
.secondary-action { border-color: #dce4de; background: white; color: #54635a; }
.secondary-action:hover { border-color: #adc4b4; background: #f8fbf8; }
.action-arrow { font-size: 13px; }
.action-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 13px; }
.action-hint { color: #87938a; font-size: 8px; }
.inline-alert { display: flex; gap: 8px; margin: 10px 0 0; padding: 9px; border: 1px solid #f0dfc2; border-radius: 4px; background: #fffbf3; color: #8d6d35; font-size: 8px; line-height: 1.45; }
.inline-alert strong { font-weight: 600; }
.success-alert { border-color: #dceade; background: #f4faf5; color: #4c7858; }
.customer-strip { display: flex; align-items: center; gap: 9px; margin-bottom: 11px; padding: 9px 10px; border: 1px solid #e6ebe7; border-radius: 4px; background: #fbfcfb; }
.store-avatar { display: grid; width: 29px; height: 29px; place-items: center; border-radius: 4px; background: #e5eee7; color: #4c7659; font-size: 11px; font-weight: 700; }
.customer-strip strong, .customer-strip small { display: block; }
.customer-strip strong { font-size: 10px; font-weight: 600; }
.customer-strip small { margin-top: 3px; color: #89948d; font-size: 8px; }
.customer-meta { margin-left: auto; text-align: right; }
.credit-meter { width: 98px; height: 4px; margin-top: 5px; overflow: hidden; border-radius: 4px; background: #e8ece8; }
.credit-meter span { display: block; width: 34%; height: 100%; border-radius: inherit; background: #63a376; }
.checkin-line { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; padding: 9px 10px; border: 1px solid #e7ece8; border-radius: 4px; }
.checkin-state { display: flex; align-items: center; gap: 7px; color: #79867e; font-size: 9px; }
.checkin-state.checked { color: #4e805e; }
.checkin-mark { display: grid; width: 15px; height: 15px; place-items: center; border: 1px solid #d7e0d9; border-radius: 50%; font-size: 8px; }
.checked .checkin-mark { border-color: #5c9a6d; background: #e7f3e9; }
.line-table { width: 100%; border-collapse: collapse; }
.line-table th { padding: 8px 7px; border-bottom: 1px solid #e9eeea; color: #929c95; font-family: var(--mono); font-size: 7px; font-weight: 500; letter-spacing: .3px; text-align: left; }
.line-table td { padding: 8px 7px; border-bottom: 1px solid #f0f3f0; color: #5e6a62; font-size: 9px; }
.line-table tr:last-child td { border-bottom: 0; }
.line-table td strong { color: #425149; font-weight: 600; }
.align-right { text-align: right !important; }
.sku-meta { display: block; margin-top: 3px; color: #98a29b; font-size: 7px; }
.totals { display: grid; gap: 6px; width: min(220px, 100%); margin: 11px 0 0 auto; }
.total-line { display: flex; justify-content: space-between; color: #849087; font-size: 8px; }
.total-line strong { color: #59665e; font-family: var(--mono); font-size: 8px; font-weight: 500; }
.total-line.grand { padding-top: 7px; border-top: 1px solid #e8ede9; color: #37483e; font-size: 9px; font-weight: 600; }
.total-line.grand strong { color: #2a4636; font-size: 11px; font-weight: 600; }
.stage-two-col { display: grid; grid-template-columns: minmax(0,1fr) minmax(190px,.68fr); gap: 12px; }
.batch-card { margin-top: 9px; padding: 9px; border: 1px solid #e8ede9; border-radius: 4px; background: #fbfcfb; }
.batch-card:first-child { margin-top: 0; }
.batch-head { display: flex; justify-content: space-between; gap: 8px; color: #637067; font-size: 8px; }
.batch-head strong { color: #44564b; font-weight: 600; }
.batch-tag { color: #568364; font-family: var(--mono); font-size: 7px; }
.batch-tag.ambient { color: #a4813b; }
.batch-meta { display: flex; gap: 13px; margin-top: 7px; color: #8c978f; font-family: var(--mono); font-size: 7px; }
.batch-meta strong { color: #6d7a71; font-weight: 500; }
.pick-scan { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 9px; padding: 9px; border: 1px dashed #cfdbd1; border-radius: 4px; background: #f8fbf8; }
.scan-copy { display: flex; align-items: center; gap: 8px; color: #6c7a70; font-size: 8px; }
.scan-icon { display: grid; width: 22px; height: 22px; place-items: center; border-radius: 4px; background: #e7f1e9; color: #4b805b; font-size: 12px; }
.scan-progress { color: #567f61; font-family: var(--mono); font-size: 8px; }
.dispatch-stats { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); margin: 11px 0; border: 1px solid #e7ece8; border-radius: 4px; }
.dispatch-stat { padding: 10px; border-right: 1px solid #e7ece8; }
.dispatch-stat:last-child { border-right: 0; }
.dispatch-stat span, .dispatch-stat strong { display: block; }
.dispatch-stat span { color: #929c95; font-size: 8px; }
.dispatch-stat strong { margin-top: 5px; color: #43544a; font-family: var(--mono); font-size: 10px; font-weight: 500; }
.signature-row { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-top: 10px; }
.signature-box { padding: 9px; border: 1px solid #e9eeea; border-radius: 4px; background: #fbfcfb; }
.signature-box strong, .signature-box small { display: block; }
.signature-box strong { color: #59665e; font-size: 8px; font-weight: 600; }
.signature-box small { margin-top: 4px; color: #8a968e; font-size: 7px; }
.signature-box.signed { border-color: #d7e8db; background: #f5faf6; }
.signature-box.signed small { color: #4e805d; }
.delivery-banner { display: flex; align-items: center; gap: 12px; margin-bottom: 11px; padding: 10px; border: 1px solid #e5ebe6; border-radius: 4px; background: #f9fbf9; }
.map-visual { position: relative; display: grid; flex: 0 0 auto; width: 76px; height: 49px; place-items: center; overflow: hidden; border: 1px solid #e1e8e2; border-radius: 4px; background-color: #edf2ed; background-image: linear-gradient(30deg, transparent 46%, #d4ded5 47%, #d4ded5 50%, transparent 51%), linear-gradient(120deg, transparent 46%, #dce5dc 47%, #dce5dc 50%, transparent 51%); background-size: 22px 19px; }
.map-visual::after { width: 8px; height: 8px; border: 2px solid white; border-radius: 50% 50% 50% 0; background: #dc7949; box-shadow: 0 1px 3px #839188; content: ''; transform: rotate(-45deg); }
.delivery-copy strong, .delivery-copy small { display: block; }
.delivery-copy strong { color: #45554b; font-size: 9px; font-weight: 600; }
.delivery-copy small { margin-top: 4px; color: #8a958e; font-size: 8px; }
.delivery-order { margin-left: auto; color: #6f7e74; font-family: var(--mono); font-size: 8px; text-align: right; }
.delivery-order strong { display: block; margin-top: 3px; color: #48614f; font-size: 9px; font-weight: 500; }
.scan-drop { display: flex; align-items: center; gap: 11px; margin-bottom: 10px; padding: 10px; border: 1px solid #e6ece7; border-radius: 4px; background: #fff; }
.scan-drop:last-of-type { margin-bottom: 0; }
.scan-product { flex: 1; min-width: 0; }
.scan-product strong, .scan-product small { display: block; }
.scan-product strong { color: #516057; font-size: 9px; font-weight: 600; }
.scan-product small { margin-top: 3px; color: #909b94; font-family: var(--mono); font-size: 7px; }
.scan-result { flex: 0 0 auto; color: #4f845f; font-family: var(--mono); font-size: 7px; }
.scan-result.rejected { color: #b06843; }
.rejection-panel { margin-top: 9px; padding: 10px; border: 1px solid #efdfd4; border-radius: 4px; background: #fffaf6; }
.rejection-panel .field-label { margin-top: 0; color: #986c53; }
.rejection-details { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-top: 8px; }
.photo-proof { display: flex; align-items: center; gap: 7px; min-height: 33px; padding: 6px 8px; border: 1px dashed #e2cbb9; border-radius: 4px; color: #9a7259; font-size: 8px; }
.signature-pad-wrap { margin-top: 10px; padding: 8px; border: 1px solid #e4eae5; border-radius: 4px; }
.signature-pad-head { display: flex; justify-content: space-between; color: #78857d; font-size: 8px; }
.signature-canvas { display: block; width: 100%; height: 57px; margin-top: 5px; touch-action: none; cursor: crosshair; }
.signature-hint { margin-top: -2px; color: #a1aaa4; font-size: 7px; }
.payment-total { display: flex; align-items: center; justify-content: space-between; margin-bottom: 11px; padding: 11px; border: 1px solid #dce9df; border-radius: 4px; background: #f4faf5; }
.payment-total span { color: #6f8075; font-size: 9px; }
.payment-total strong { color: #335d40; font-family: var(--mono); font-size: 14px; font-weight: 600; }
.payment-method { padding: 10px; border: 1px solid #e6ebe7; border-radius: 4px; }
.payment-method + .payment-method { margin-top: 8px; }
.payment-method-head { display: flex; align-items: center; gap: 7px; color: #56645b; font-size: 9px; font-weight: 600; }
.tender-icon { display: grid; width: 19px; height: 19px; place-items: center; border-radius: 4px; background: #edf3ee; color: #567b60; font-size: 10px; }
.payment-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 7px; }
.payment-fields .field-label { margin: 0 0 4px; }
.payment-fields .text-field { height: 29px; font-family: var(--mono); font-size: 9px; }
.payment-state { display: flex; justify-content: space-between; margin-top: 10px; color: #869188; font-size: 8px; }
.payment-state strong { color: #4e7c5a; font-family: var(--mono); font-weight: 500; }
.settlement-equation { display: grid; grid-template-columns: repeat(5,1fr); gap: 5px; align-items: center; margin: 9px 0 11px; padding: 12px 10px; border: 1px solid #e6ebe7; border-radius: 4px; background: #fbfcfb; text-align: center; }
.equation-cell span, .equation-cell strong { display: block; }
.equation-cell span { color: #87938a; font-size: 7px; }
.equation-cell strong { margin-top: 5px; color: #405248; font-family: var(--mono); font-size: 13px; font-weight: 500; }
.equation-op { color: #9aa49d; font-family: var(--mono); font-size: 12px; }
.variance-banner { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px; border: 1px solid #dceadd; border-radius: 4px; background: #f3f9f4; }
.variance-banner span { color: #5e7765; font-size: 8px; }
.variance-banner strong { color: #3d7850; font-family: var(--mono); font-size: 11px; font-weight: 600; }
.close-summary { padding: 17px; border: 1px solid #dceadd; border-radius: 5px; background: #f6fbf7; text-align: center; }
.close-check { display: grid; width: 35px; height: 35px; margin: 0 auto 9px; place-items: center; border-radius: 50%; background: #dcefe0; color: #3f8154; font-size: 17px; }
.close-summary h3 { margin: 0; color: #34533d; font-size: 15px; }
.close-summary p { margin: 5px auto 12px; color: #74857a; font-size: 9px; }
.close-grid { display: grid; grid-template-columns: repeat(3,1fr); border: 1px solid #e0ece2; border-radius: 4px; background: white; }
.close-grid div { padding: 9px; border-right: 1px solid #e8f0e9; }
.close-grid div:last-child { border: 0; }
.close-grid span, .close-grid strong { display: block; }
.close-grid span { color: #8b988e; font-size: 7px; }
.close-grid strong { margin-top: 4px; color: #426149; font-family: var(--mono); font-size: 10px; font-weight: 500; }
.toast { position: fixed; z-index: 5; right: 22px; bottom: 20px; max-width: min(340px, calc(100vw - 32px)); padding: 11px 14px; border: 1px solid #cce0d1; border-radius: 5px; background: #f5fbf6; box-shadow: 0 6px 24px rgba(25,48,34,.12); color: #456b4f; font-size: 10px; animation: reveal .2s ease both; }

@media (min-width: 1500px) { .page-wrap { padding-right: 48px; padding-left: 48px; } }
@media (max-width: 1120px) {
  .workspace { grid-template-columns: 205px minmax(0,1fr); }
  .page-wrap { padding-right: 22px; padding-left: 22px; }
  .topbar { padding: 0 22px; }
  .journey-layout { grid-template-columns: minmax(0,1fr) 225px; }
  .stepper { padding-right: 11px; padding-left: 11px; }
  .journey-step { grid-template-columns: 21px 1fr; column-gap: 5px; padding-right: 5px; padding-left: 5px; }
  .step-name { font-size: 9px; }
}
@media (max-width: 850px) {
  .workspace { grid-template-columns: 62px minmax(0,1fr); }
  .sidebar { min-height: 100vh; padding-right: 8px; padding-left: 8px; }
  .brand { justify-content: center; padding: 0 0 25px; }
  .brand-copy, .workspace-label, .location-switch span:not(.location-icon), .nav-label { display: none; }
  .location-switch { justify-content: center; padding: 8px 0; }
  .location-icon { font-size: 18px; }
  .side-link { justify-content: center; padding: 0; font-size: 0; }
  .side-link .nav-glyph { font-size: 17px; }
  .side-link.active::before { left: -8px; }
  .sidebar-bottom { align-items: center; }
  .support-status { justify-content: center; padding: 12px 0; }
  .support-status span:not(.status-dot), .user-profile > span:not(.profile-menu), .profile-menu { display: none; }
  .user-profile { justify-content: center; padding: 0; }
  .topbar { padding: 0 15px; }
  .page-wrap { padding: 22px 15px 17px; }
  .journey-layout { grid-template-columns: minmax(0,1fr); }
  .stage-panel { border-right: 0; }
  .activity-panel { display: grid; grid-template-columns: 1fr 1.1fr; gap: 12px; border-top: 1px solid var(--line); }
  .activity-head { grid-column: 1 / -1; margin-bottom: 0; }
  .activity-list { grid-column: 1; }
  .record-card { grid-column: 2; grid-row: 2; margin-top: 0; }
  .data-note { grid-column: 1 / -1; }
}
@media (max-width: 620px) {
  .topbar { height: 52px; }
  .demo-label { font-size: 7px; }
  .topbar-actions { gap: 10px; }
  .page-wrap { padding: 19px 11px 13px; }
  .page-heading { align-items: flex-start; margin-bottom: 16px; }
  .page-heading p { max-width: 360px; font-size: 10px; line-height: 1.5; }
  h1 { max-width: 330px; font-size: 21px; }
  .reset-button { flex: 0 0 auto; padding: 7px; font-size: 0; }
  .reset-button span { font-size: 16px; }
  .eyebrow { flex-wrap: wrap; font-size: 7px; }
  .metric-row { grid-template-columns: 1fr 1fr; margin-bottom: 17px; }
  .metric { padding: 11px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
  .metric:nth-child(2) { border-right: 0; }
  .metric:nth-child(n+3) { border-bottom: 0; }
  .metric-value { font-size: 20px; }
  .metric-foot { font-size: 8px; }
  .section-heading { align-items: flex-start; padding: 14px 12px 11px; }
  .order-reference { gap: 5px; font-size: 0; }
  .order-reference strong { font-size: 9px; }
  .stepper { display: flex; gap: 3px; overflow-x: auto; padding: 0 9px 11px; scrollbar-width: thin; }
  .journey-step { flex: 0 0 76px; grid-template-columns: 19px 1fr; column-gap: 4px; padding: 6px 4px; }
  .journey-step:not(:last-child)::after { display: none; }
  .step-index { width: 19px; height: 19px; font-size: 7px; }
  .step-name { font-size: 8px; }
  .step-state { font-size: 7px; }
  .stage-panel { padding: 16px 11px 14px; }
  .stage-title { font-size: 15px; }
  .stage-description { font-size: 9px; }
  .stage-top { margin-bottom: 11px; }
  .split-content, .stage-two-col { grid-template-columns: minmax(0,1fr); }
  .surface-body { padding: 9px; }
  .shipment-photo img { height: 110px; }
  .data-grid { grid-template-columns: 1fr 1fr; }
  .data-cell { border-bottom: 1px solid #edf1ed; }
  .data-cell:nth-child(2) { border-right: 0; }
  .data-cell:nth-child(3) { border-bottom: 0; }
  .data-cell:last-child { border-bottom: 0; }
  .line-table th { padding: 7px 4px; font-size: 6px; }
  .line-table td { padding: 7px 4px; font-size: 8px; }
  .journey-layout { min-height: auto; }
  .activity-panel { grid-template-columns: 1fr; padding: 14px 11px; }
  .activity-head, .activity-list, .record-card, .data-note { grid-column: auto; grid-row: auto; }
  .record-card { margin-top: 0; }
  .page-footer { flex-direction: column; font-size: 6px; line-height: 1.5; }
  .signature-row, .rejection-details { grid-template-columns: 1fr; }
  .dispatch-stat { padding: 8px 6px; }
  .dispatch-stat strong { font-size: 9px; }
  .settlement-equation { grid-template-columns: 1fr; gap: 7px; }
  .equation-op { line-height: 8px; }
  .close-grid div { padding: 8px 4px; }
  .close-grid span { font-size: 6px; }
  .close-grid strong { font-size: 9px; }
}