:root {
    --dispatch-ink: #17211f;
    --dispatch-muted: #68736f;
    --dispatch-line: #dce5df;
    --dispatch-surface: #ffffff;
    --dispatch-bg: #f1f5f1;
    --dispatch-accent: #176b57;
    --dispatch-accent-dark: #0e4c3e;
    --dispatch-warm: #c99545;
    --dispatch-danger: #a7473d;
}

* { box-sizing: border-box; }
html, body { max-width: 100%; overflow-x: clip; }
@supports not (overflow: clip) {
    html, body { overflow-x: hidden; }
}
img, svg, video, canvas, iframe { max-width: 100%; height: auto; }
input, select, textarea, button { max-width: 100%; }
*, *::before, *::after { min-width: 0; }
body.dispatch-page { margin: 0; min-height: 100vh; background: var(--dispatch-bg); color: var(--dispatch-ink); font-family: "Figtree", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
.dispatch-header { min-height: 74px; padding: 0 5vw; display: flex; align-items: center; justify-content: space-between; gap: 20px; background: #14211e; color: #fff; }
.dispatch-brand { display: flex; align-items: center; gap: 12px; letter-spacing: .02em; }
.dispatch-brand strong { display: block; font-size: .98rem; letter-spacing: .08em; }
.dispatch-brand small { display: block; margin-top: 3px; color: #b9c9c1; font-size: .72rem; }
.dispatch-mark { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 11px; background: var(--dispatch-warm); color: #14211e; }
.dispatch-mark svg { width: 19px; height: 19px; }
.dispatch-header-status { display: inline-flex; align-items: center; gap: 8px; color: #b9c9c1; font-size: .8rem; }
.dispatch-header-status span { width: 8px; height: 8px; border-radius: 50%; background: #69c68f; box-shadow: 0 0 0 4px rgba(105,198,143,.14); }
.dispatch-main { width: min(1180px, calc(100% - 32px)); margin: 0 auto; padding: clamp(28px, 5vw, 52px) 0 64px; }
.dispatch-home-wrap { min-height: calc(100vh - 210px); display: grid; place-items: center; }
.dispatch-lookup-card { width: min(720px, 100%); }
.dispatch-order-lookup { margin-top: 24px; }
.dispatch-order-lookup > label { display: block; margin-bottom: 8px; color: var(--dispatch-muted); font-size: .76rem; font-weight: 800; }
.dispatch-lookup-row { display: flex; gap: 10px; }
.dispatch-lookup-row .dispatch-form-control { flex: 1; min-height: 48px; }
.dispatch-home-actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 18px; }
.dispatch-home-actions .dispatch-clear { margin-left: auto; }
.dispatch-hero { margin-bottom: 26px; }
.dispatch-hero h1 { margin: 0 0 8px; font-family: Georgia, serif; font-size: clamp(1.8rem, 4vw, 2.8rem); font-weight: 500; }
.dispatch-hero p { margin: 0; color: var(--dispatch-muted); }
.dispatch-card { background: var(--dispatch-surface); border: 1px solid var(--dispatch-line); border-radius: 18px; padding: clamp(18px, 3vw, 30px); box-shadow: 0 12px 28px rgba(23,33,31,.06); }
.dispatch-card h2, .dispatch-card h3 { margin: 0 0 16px; font-family: Georgia, serif; font-weight: 500; }
.dispatch-login-wrap { min-height: calc(100vh - 160px); display: grid; place-items: center; }
.dispatch-login-card { width: min(460px, 100%); }
.dispatch-login-card .dispatch-logo { margin-bottom: 28px; }
.dispatch-logo { color: var(--dispatch-accent); font-family: Georgia, serif; font-size: 1.35rem; }
.dispatch-logo small { display: block; margin-top: 5px; color: var(--dispatch-muted); font-family: inherit; font-size: .78rem; }
.dispatch-form-group { margin-bottom: 16px; }
.dispatch-form-group label { display: block; margin-bottom: 7px; font-size: .78rem; font-weight: 700; color: var(--dispatch-muted); }
.dispatch-form-control { width: 100%; min-height: 44px; padding: 11px 13px; border: 1px solid var(--dispatch-line); border-radius: 10px; background: #fbfdfb; color: var(--dispatch-ink); font: inherit; }
.dispatch-form-control:focus { outline: 3px solid rgba(23,107,87,.14); border-color: var(--dispatch-accent); }
.dispatch-btn { min-height: 42px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 17px; border: 0; border-radius: 10px; background: var(--dispatch-accent); color: #fff; font: inherit; font-weight: 700; cursor: pointer; text-decoration: none; }
.dispatch-btn:hover { background: var(--dispatch-accent-dark); }
.dispatch-btn-secondary { background: #fff; color: var(--dispatch-ink); border: 1px solid var(--dispatch-line); }
.dispatch-btn-secondary:hover { background: #f3f7f3; }
.dispatch-btn svg { width: 16px; height: 16px; }
.dispatch-alert { margin-bottom: 20px; padding: 13px 15px; border: 1px solid #e6c8a5; border-radius: 10px; background: #fff8ec; color: #744e24; }
.dispatch-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 20px; flex-wrap: wrap; }
.dispatch-toolbar h2 { margin: 0; }
.dispatch-filter { display: flex; align-items: end; gap: 12px; flex-wrap: wrap; padding: 14px; margin-bottom: 20px; border: 1px solid var(--dispatch-line); border-radius: 12px; background: #f7faf7; }
.dispatch-filter label { display: grid; gap: 6px; min-width: 190px; color: var(--dispatch-muted); font-size: .75rem; font-weight: 700; }
.dispatch-filter label:first-child { flex: 1 1 280px; }
.dispatch-filter .dispatch-form-control { min-height: 40px; background: #fff; }
.dispatch-clear { padding: 11px 4px; color: var(--dispatch-accent); font-size: .8rem; font-weight: 700; text-decoration: none; }
.dispatch-list { display: grid; gap: 14px; }
.dispatch-order { display: grid; gap: 0; overflow: hidden; border: 1px solid var(--dispatch-line); border-radius: 14px; background: #fff; box-shadow: 0 5px 15px rgba(23,33,31,.04); }
.dispatch-order-head, .dispatch-order-meta, .dispatch-order-actions { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.dispatch-order-head { padding: 17px 20px; background: #f8fbf8; }
.dispatch-order-id { display: block; margin-top: 3px; font-weight: 800; letter-spacing: .03em; }
.dispatch-order-date { color: var(--dispatch-muted); font-size: .77rem; }
.dispatch-kicker { display: block; margin-bottom: 4px; color: var(--dispatch-muted); font-size: .67rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.dispatch-order-meta { justify-content: flex-start; padding: 14px 20px; color: var(--dispatch-muted); font-size: .86rem; border-top: 1px solid var(--dispatch-line); border-bottom: 1px solid var(--dispatch-line); }
.dispatch-order-meta span, .dispatch-order-meta strong { display: grid; gap: 3px; min-width: 90px; }
.dispatch-order-meta small { color: var(--dispatch-muted); font-size: .65rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.dispatch-history { padding: 13px 20px; border-bottom: 1px solid var(--dispatch-line); background: #fcfefc; }
.dispatch-history-list { display: flex; flex-wrap: wrap; gap: 8px 18px; }
.dispatch-history-item { display: inline-flex; align-items: flex-start; gap: 7px; font-size: .78rem; }
.dispatch-history-dot { width: 7px; height: 7px; flex: 0 0 7px; margin-top: 4px; border-radius: 50%; background: var(--dispatch-warm); }
.dispatch-history-item strong, .dispatch-history-item small { display: block; }
.dispatch-history-item small { margin-top: 2px; color: var(--dispatch-muted); font-size: .7rem; }
.dispatch-status { display: inline-flex; padding: 5px 10px; border-radius: 999px; background: #e7f3ed; color: var(--dispatch-accent-dark); font-size: .73rem; font-weight: 800; }
.dispatch-status-failed { background: #fde8e5; color: var(--dispatch-danger); }
.dispatch-status-rescheduled { background: #fff3d9; color: #815b1e; }
.dispatch-status-en_route, .dispatch-status-arrived { background: #e7eefb; color: #31568d; }
.dispatch-status-complete { align-items: center; gap: 6px; background: #e4f3e8; color: #2f7545; }
.dispatch-status-complete svg { width: 14px; height: 14px; }
.dispatch-order-actions { align-items: flex-end; padding: 17px 20px; }
.dispatch-customer { flex: 1 1 230px; color: var(--dispatch-muted); font-size: .86rem; line-height: 1.55; }
.dispatch-contact-actions { display: inline-flex; flex-wrap: wrap; gap: 8px; }
.dispatch-contact-actions a { color: var(--dispatch-accent); font-weight: 700; text-decoration: none; }
.dispatch-contact-actions svg { width: 14px; height: 14px; vertical-align: -2px; }
.dispatch-address-label { display: block; margin-top: 10px; color: var(--dispatch-accent-dark); font-size: .68rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.dispatch-address { display: block; max-width: 480px; margin-top: 3px; padding: 9px 11px; border-left: 3px solid var(--dispatch-warm); border-radius: 4px 8px 8px 4px; background: #fff9ed; color: #1d2925; font-size: .98rem; line-height: 1.5; }
.dispatch-code-label { display: grid; gap: 6px; color: var(--dispatch-muted); font-size: .76rem; font-weight: 700; }
.dispatch-code-input { width: 120px; text-transform: uppercase; letter-spacing: .14em; }
.dispatch-delivery-form { display: flex; align-items: end; gap: 10px; flex-wrap: wrap; margin: 0; }
.dispatch-empty { padding: 42px 20px; text-align: center; color: var(--dispatch-muted); }
.dispatch-metrics { width: min(1180px, calc(100% - 32px)); margin: 0 auto 28px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.dispatch-metric { padding: 16px; border: 1px solid var(--dispatch-line); border-radius: 14px; background: #fff; box-shadow: 0 5px 15px rgba(23,33,31,.04); }
.dispatch-metric span { display: block; color: var(--dispatch-muted); font-size: .72rem; font-weight: 700; }
.dispatch-metric strong { display: block; margin-top: 7px; font-size: 1.65rem; }
.dispatch-footer { width: min(1120px, calc(100% - 32px)); margin: 0 auto; padding: 18px 0 26px; display: flex; justify-content: space-between; gap: 12px; color: var(--dispatch-muted); font-size: .75rem; border-top: 1px solid var(--dispatch-line); }
@media (max-width: 640px) { .dispatch-header { padding: 0 16px; } .dispatch-header-status { display: none; } .dispatch-main { padding-top: 28px; } .dispatch-card { padding: 18px; } .dispatch-footer { flex-direction: column; } .dispatch-order-head, .dispatch-order-meta, .dispatch-order-actions { padding-left: 15px; padding-right: 15px; } .dispatch-delivery-form { width: 100%; } .dispatch-delivery-form .dispatch-code-label, .dispatch-delivery-form .dispatch-form-control, .dispatch-delivery-form .dispatch-btn { width: 100%; } }
@media (max-width: 700px) { .dispatch-metrics { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .dispatch-lookup-row { flex-direction: column; } .dispatch-lookup-row .dispatch-btn { width: 100%; } .dispatch-home-actions .dispatch-clear { margin-left: 0; } }
@media (max-width: 420px) {
    .dispatch-header { min-height: 64px; }
    .dispatch-brand { gap: 8px; }
    .dispatch-brand strong { font-size: .86rem; }
    .dispatch-main { width: min(100% - 20px, 1180px); }
    .dispatch-order-id { font-size: .9rem; }
    .dispatch-order-date { width: 100%; }
    .dispatch-order-meta span, .dispatch-order-meta strong { min-width: 0; }
    .dispatch-address { max-width: 100%; font-size: .9rem; }
}