:root {
    --ink: #12342c;
    --muted: #789088;
    --line: #e2e9e3;
    --paper: #f7f8f5;
    --white: #fff;
    --green: #175443;
    --lime: #d2f363;
    --coral: #f8a89c;
    --blue: #c9d1ff;
    --amber: #efb65f;
}

* { box-sizing: border-box; }
html { min-width: 320px; background: #eff1f0; scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: #eff1f0; font-family: Arial, Helvetica, sans-serif; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
button, input { font: inherit; }
button { cursor: pointer; }

.app-shell { width: min(100%, 590px); min-height: 100vh; margin: 0 auto; background: var(--paper); }
.app-header { position: sticky; z-index: 10; top: 0; display: flex; align-items: center; gap: 10px; min-height: 74px; padding: 11px 18px; border-bottom: 1px solid rgba(223, 231, 225, .78); background: rgba(247, 248, 245, .92); backdrop-filter: blur(16px); }
.app-brand { display: inline-flex; align-items: center; gap: 8px; color: var(--ink); font-size: 19px; font-weight: 850; letter-spacing: -1px; white-space: nowrap; }.app-brand > span:last-child > span { color: #78ad72; }.brand-mark { display: inline-flex; align-items: flex-end; gap: 3px; height: 20px; transform: skewX(-15deg); }.brand-mark i { display: block; width: 5px; border-radius: 5px 5px 1px 1px; background: var(--green); }.brand-mark i:nth-child(1) { height: 9px; opacity: .55; }.brand-mark i:nth-child(2) { height: 15px; }.brand-mark i:nth-child(3) { height: 20px; opacity: .85; }
.header-back { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; padding: 0 0 4px; border: 0; border-radius: 12px; color: #52776b; background: #e9f0ea; font-size: 29px; line-height: 1; }.header-title { flex: 1; margin: 0; color: var(--ink); font-size: 16px; letter-spacing: -.4px; }.header-actions { display: flex; align-items: center; gap: 7px; margin-left: auto; }.network-switch { display: grid; gap: 2px; padding: 3px 7px; border: 0; color: #42665a; background: transparent; text-align: left; }.network-switch span { color: #9aa9a1; font-size: 7px; font-weight: 850; letter-spacing: .1em; }.network-switch b { font-size: 10px; }.header-icon { display: inline-flex; align-items: center; justify-content: center; width: 35px; height: 35px; border: 0; border-radius: 11px; background: transparent; }.avatar-button { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border: 0; border-radius: 12px; color: #613e2d; background: #f4d071; font-size: 10px; font-weight: 850; }.search-glyph { position: relative; display: inline-block; width: 15px; height: 15px; border: 2px solid currentColor; border-radius: 50%; color: #63907b; }.search-glyph:after { position: absolute; right: -5px; bottom: -4px; width: 7px; height: 2px; border-radius: 2px; background: currentColor; content: ''; transform: rotate(-48deg); }

.screen-panel { min-height: calc(100vh - 74px); padding: 29px 22px 42px; animation: screen-in .2s ease-out; }.screen-panel[hidden] { display: none; }.screen-intro { padding: 1px 1px 22px; }.eyebrow, .section-kicker { display: flex; align-items: center; gap: 7px; color: #789084; font-size: 8px; font-weight: 850; letter-spacing: .14em; text-transform: uppercase; }.eyebrow i { width: 6px; height: 6px; border-radius: 50%; background: #66c991; box-shadow: 0 0 0 4px rgba(102, 201, 145, .13); }.screen-intro h2 { margin: 11px 0 5px; color: var(--ink); font-size: 31px; letter-spacing: -1.8px; line-height: .98; }.screen-intro p { margin: 0; color: var(--muted); font-size: 10px; }

.home-hero { padding: 1px 1px 22px; }.home-hero h2 { margin: 11px 0 0; color: var(--ink); font-size: 37px; letter-spacing: -2.3px; line-height: .94; }.home-hero h2 em { color: var(--green); font-style: normal; }.message { display: flex; align-items: center; gap: 9px; margin: 0 0 14px; padding: 11px 12px; border: 1px solid var(--line); border-radius: 14px; background: var(--white); }.message > span { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; color: var(--green); background: var(--lime); font-size: 10px; font-weight: 850; }.message-error > span { color: #fff; background: var(--coral); }.message b { flex: 1; color: #506c60; font-size: 9px; }.message button { padding: 2px; border: 0; color: #9aa8a1; background: transparent; font-size: 17px; }
.track-search-card { display: flex; align-items: center; gap: 11px; width: 100%; padding: 13px; border: 1px solid var(--line); border-radius: 19px; color: var(--ink); background: var(--white); box-shadow: 0 8px 18px rgba(35, 63, 52, .06); text-align: left; }.search-tile { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 13px; color: #5c8c75; background: #eaf6ed; }.track-search-card > span:nth-child(2) { display: grid; flex: 1; gap: 4px; }.track-search-card b { font-size: 11px; }.track-search-card small { color: #9aa8a1; font-size: 8px; }.track-search-card > strong { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 12px; color: var(--green); background: var(--lime); font-size: 18px; font-weight: 400; }
.trust-card { display: flex; gap: 11px; margin-top: 14px; padding: 14px; border: 1px solid #d9ece2; border-radius: 17px; background: #e8f6ef; }.trust-card > span { display: inline-flex; align-items: center; justify-content: center; width: 29px; height: 29px; border-radius: 10px; color: #5f886f; background: #d7f07a; font-size: 12px; font-weight: 850; }.trust-card div { display: grid; gap: 4px; }.trust-card b { color: #315c4d; font-size: 10px; }.trust-card p { margin: 0; color: #6d8a7c; font-size: 8px; line-height: 1.45; }
.shortcut-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; margin: 18px 0 31px; }.shortcut-grid button { display: grid; align-content: start; gap: 6px; min-height: 126px; padding: 13px 11px; border: 1px solid var(--line); border-radius: 18px; color: var(--ink); background: var(--white); text-align: left; box-shadow: 0 5px 13px rgba(35, 63, 52, .035); }.shortcut-grid b { font-size: 10px; line-height: 1.2; }.shortcut-grid small { color: #95a49c; font-size: 8px; line-height: 1.3; }.shortcut-icon { display: inline-flex; align-items: center; justify-content: center; width: 31px; height: 31px; margin-bottom: 4px; border-radius: 11px; font-size: 19px; }.shortcut-icon.lime { color: #50764c; background: #eaf6d4; }.shortcut-icon.coral { color: #bb6559; background: #fff0ed; }.shortcut-icon.blue { color: #5d6ed0; background: #eef0ff; }
.section-heading { display: flex; align-items: end; justify-content: space-between; gap: 12px; margin-bottom: 11px; }.section-heading > div { display: grid; gap: 6px; }.section-heading h3 { margin: 0; font-size: 19px; letter-spacing: -.7px; }.section-heading button { padding: 0 0 2px; border: 0; color: #628276; background: transparent; font-size: 9px; font-weight: 800; }.section-heading button span { margin-left: 3px; color: #87aa96; font-size: 14px; }.moving-list { display: grid; gap: 9px; }.moving-card { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; align-items: center; gap: 10px; width: 100%; min-height: 68px; padding: 11px 13px; border: 1px solid var(--line); border-radius: 16px; color: var(--ink); background: var(--white); text-align: left; }.parcel-box { position: relative; display: inline-block; width: 33px; height: 33px; border-radius: 10px; }.parcel-box:before { position: absolute; top: 10px; left: 10px; width: 13px; height: 11px; border: 1.5px solid currentColor; border-radius: 2px; content: ''; transform: rotate(30deg); }.parcel-box:after { position: absolute; top: 10px; left: 16px; width: 1px; height: 13px; background: currentColor; content: ''; transform: rotate(30deg); }.parcel-box.lime { color: #709a5b; background: #eef7e3; }.parcel-box.coral { color: #c66d5e; background: #fff0eb; }.parcel-box.blue { color: #6371d8; background: #eef0ff; }.parcel-box.amber { color: #b78142; background: #fff4dc; }.moving-card-copy { display: grid; gap: 5px; min-width: 0; }.moving-card-copy b { overflow: hidden; color: #315448; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }.moving-card-copy b i { color: #83a494; font-style: normal; }.moving-card-copy small { overflow: hidden; color: #99a79f; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }.moving-status { display: inline-flex; align-items: center; gap: 5px; color: #71857b; font-size: 8px; font-weight: 800; white-space: nowrap; }.moving-status i, .row-status i, .status-pill i { width: 6px; height: 6px; border-radius: 50%; background: #9ba8a0; }.moving-status.in-transit, .row-status.in-transit, .status-pill.in-transit { color: #9a743b; }.moving-status.in-transit i, .row-status.in-transit i, .status-pill.in-transit i { background: var(--amber); }.moving-status.ready-for-pickup, .row-status.ready-for-pickup, .status-pill.ready-for-pickup { color: #bd6257; }.moving-status.ready-for-pickup i, .row-status.ready-for-pickup i, .status-pill.ready-for-pickup i { background: var(--coral); }.moving-status.delivered, .row-status.delivered, .status-pill.delivered { color: #538865; }.moving-status.delivered i, .row-status.delivered i, .status-pill.delivered i { background: #62b87b; }

.filter-row { display: flex; gap: 18px; margin: -3px 0 15px; border-bottom: 1px solid var(--line); }.filter-row button { position: relative; padding: 0 0 10px; border: 0; color: #9aa7a0; background: transparent; font-size: 9px; font-weight: 750; white-space: nowrap; }.filter-row button:after { position: absolute; right: 0; bottom: -1px; left: 0; height: 2px; border-radius: 2px; background: transparent; content: ''; }.filter-row button.selected { color: var(--ink); }.filter-row button.selected:after { background: var(--green); }.parcel-list, .agent-list, .settings-list { display: grid; gap: 1px; overflow: hidden; border: 1px solid var(--line); border-radius: 17px; background: var(--white); }.parcel-row { display: grid; grid-template-columns: 33px minmax(0, 1fr) auto 10px; align-items: center; gap: 9px; min-height: 72px; padding: 11px 12px; border: 0; border-bottom: 1px solid #edf2ed; color: var(--ink); background: var(--white); text-align: left; }.parcel-row:last-child, .agent-row:last-child, .settings-list button:last-child { border-bottom: 0; }.parcel-row[hidden] { display: none; }.row-main { display: grid; gap: 5px; min-width: 0; }.row-main b { overflow: hidden; color: #365448; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }.row-main small { overflow: hidden; color: #9ba8a1; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }.row-main small i { color: #bdc9c1; font-style: normal; }.row-status { display: grid; grid-template-columns: 6px auto; align-items: center; gap: 5px; font-size: 8px; font-weight: 750; white-space: nowrap; }.row-status small { grid-column: 2; margin-top: 2px; color: #a0aca5; font-size: 7px; font-weight: 400; }.row-arrow { color: #9bb2a5; font-size: 18px; }.screen-link { display: flex; align-items: center; gap: 7px; margin-top: 14px; padding: 0; border: 0; color: #628276; background: transparent; font-size: 10px; font-weight: 800; }.screen-link > span { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 7px; color: var(--green); background: var(--lime); font-size: 16px; }.centered-link { justify-content: center; width: 100%; margin-top: 22px; }

.progress-line { display: flex; align-items: center; gap: 7px; margin: -3px 0 30px; }.progress-line b, .progress-line span { width: 9px; height: 9px; border-radius: 50%; background: #dfe8db; }.progress-line b { background: var(--green); box-shadow: 0 0 0 4px #dcebcf; }.progress-line i { flex: 1; height: 1px; background: #dfe8db; }.task-form { display: grid; gap: 18px; }.task-form label { display: grid; gap: 8px; color: #587267; font-size: 10px; font-weight: 800; }.form-input { display: flex; align-items: center; gap: 9px; height: 51px; padding: 0 12px; border: 1px solid #dfe8dc; border-radius: 14px; background: var(--white); }.form-input:focus-within, .place-search:focus-within { border-color: #8db486; box-shadow: 0 0 0 3px rgba(141, 180, 134, .14); }.form-input > i { color: #7aa070; font-size: 19px; font-style: normal; }.form-input input, .place-search input { min-width: 0; flex: 1; border: 0; outline: 0; color: var(--ink); background: transparent; font-size: 12px; }.form-input input::placeholder, .place-search input::placeholder { color: #aeb8b1; }.screen-submit { display: flex; align-items: center; justify-content: space-between; width: 100%; margin-top: 5px; padding: 16px; border: 0; border-radius: 14px; color: var(--green); background: var(--lime); font-size: 11px; font-weight: 850; }.screen-submit span { font-size: 18px; }.track-task { margin-top: 3px; }.form-input-large { height: 56px; }.form-input-large > i { font-size: 22px; }.recent-code { display: flex; align-items: center; gap: 10px; width: 100%; margin-top: 21px; padding: 13px; border: 1px solid var(--line); border-radius: 14px; color: var(--ink); background: var(--white); text-align: left; }.recent-code > span:first-child { display: inline-flex; align-items: center; justify-content: center; width: 29px; height: 29px; border-radius: 9px; color: #63846e; background: #edf6e5; font-size: 16px; }.recent-code > span:nth-child(2) { display: grid; flex: 1; gap: 4px; }.recent-code small { color: #9aa89f; font-size: 7px; letter-spacing: .11em; }.recent-code b { color: #4b675c; font-size: 10px; }.recent-code strong { color: #698c76; font-size: 8px; }.track-result { margin-top: 21px; padding: 15px; border: 1px solid #d5e8c0; border-radius: 17px; background: #f2f9e8; }.track-result-top { display: flex; align-items: center; justify-content: space-between; }.status-pill { display: inline-flex; align-items: center; gap: 6px; padding: 6px 8px; border-radius: 8px; color: #6c8277; background: #f1f5ee; font-size: 8px; font-weight: 800; }.track-result-top .status-pill { margin: 0; }.track-result-top > b { color: #88a08e; font-size: 8px; letter-spacing: .06em; }.track-route { display: flex; align-items: center; gap: 10px; margin: 25px 2px 20px; }.track-route > b { color: #36594b; font-size: 14px; }.track-route > span { display: flex; align-items: center; flex: 1; gap: 3px; }.track-route > span i { flex: 1; height: 1px; background: #cfe0c6; }.track-route > span b { width: 7px; height: 7px; border-radius: 50%; background: #77b56c; box-shadow: 0 0 0 3px #dff0d7; }.track-result > small { color: #7d9486; font-size: 9px; }

.place-search { display: flex; align-items: center; gap: 9px; height: 48px; padding: 0 12px; border: 1px solid var(--line); border-radius: 14px; background: var(--white); }.place-search input { font-size: 11px; }.agent-list { margin-top: 16px; }.agent-row { display: flex; align-items: center; gap: 10px; min-height: 68px; padding: 11px 13px; border: 0; border-bottom: 1px solid #edf2ed; color: var(--ink); background: var(--white); text-align: left; }.agent-mark { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 34px; width: 34px; height: 34px; border-radius: 11px; color: #a76c39; background: #fff0dd; font-size: 10px; font-weight: 850; }.agent-mark.green { color: #4c8b68; background: #e6f4e4; }.agent-mark.blue { color: #5a6dd8; background: #eceeff; }.agent-row > span:nth-child(2) { display: grid; flex: 1; gap: 4px; }.agent-row b { font-size: 10px; }.agent-row small { color: #9aa79f; font-size: 8px; }.agent-row strong { color: #99b3a4; font-size: 19px; font-weight: 400; }
.profile-card { display: flex; align-items: center; gap: 10px; padding: 15px; border: 1px solid var(--line); border-radius: 17px; background: var(--white); }.profile-avatar { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 15px; color: #643f2d; background: #f4d071; font-size: 12px; font-weight: 850; }.profile-card > span:nth-child(2) { display: grid; flex: 1; gap: 5px; }.profile-card b { font-size: 12px; }.profile-card small { color: #99a79f; font-size: 9px; }.profile-card button { padding: 7px 9px; border: 0; border-radius: 8px; color: #658579; background: #eff5e9; font-size: 9px; font-weight: 800; }.settings-list { margin-top: 17px; }.settings-list button { display: flex; align-items: center; gap: 10px; min-height: 54px; padding: 10px 13px; border: 0; border-bottom: 1px solid #edf2ed; color: var(--ink); background: var(--white); text-align: left; }.settings-list button > span { display: inline-flex; align-items: center; justify-content: center; width: 27px; height: 27px; border-radius: 9px; color: #6b9270; background: #edf6e5; font-size: 16px; }.settings-list b { flex: 1; font-size: 10px; }.settings-list strong { color: #a0b5a9; font-size: 19px; font-weight: 400; }
.detail-status { display: flex; align-items: center; justify-content: space-between; color: #8a9b91; font-size: 10px; }.detail-route { display: flex; align-items: center; justify-content: space-between; margin: 42px 8px 34px; }.detail-route > div { display: grid; justify-items: center; gap: 7px; }.detail-route > div > b { display: flex; align-items: center; justify-content: center; width: 61px; height: 61px; border-radius: 19px; color: var(--green); background: #eaf5df; font-size: 19px; }.detail-route small { color: #98a79e; font-size: 9px; }.detail-route > span { display: flex; align-items: center; flex: 1; gap: 3px; margin: 0 12px; }.detail-route > span i { flex: 1; height: 1px; background: #d7e4d3; }.detail-route > span b { width: 7px; height: 7px; border-radius: 50%; background: #77b56c; box-shadow: 0 0 0 3px #dff0d7; }.detail-info { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 23px; padding: 15px 0; border-top: 1px solid #ebf0e9; border-bottom: 1px solid #ebf0e9; }.detail-info span { display: grid; gap: 5px; }.detail-info small { color: #9aa79f; font-size: 9px; }.detail-info b { overflow: hidden; color: #4d6c5d; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }

@keyframes screen-in { from { opacity: .35; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
@media (max-width: 420px) { .app-header { padding-right: 14px; padding-left: 14px; }.screen-panel { padding-right: 18px; padding-left: 18px; }.network-switch span { display: none; }.network-switch { padding-right: 2px; padding-left: 2px; }.shortcut-grid { gap: 7px; }.shortcut-grid button { min-height: 116px; padding: 11px 9px; }.moving-card { padding-right: 11px; padding-left: 11px; }.moving-status { font-size: 7px; } }

/* Ziza360 dispatch surface: intentionally separate from marketplace and discovery UI patterns. */
:root { --ink: #111b2e; --navy: #10192b; --slate: #182742; --slate-soft: #223556; --canvas: #edf1f7; --white: #fff; --line: #d5dce8; --muted: #71809a; --blue: #4774ff; --aqua: #50ddcb; --orange: #ff9a66; --amber: #efbd64; --coral: #ef7272; --violet: #9195ff; }
html, body { background: var(--navy); }
.app-shell { width: min(100%, 640px); background: var(--canvas); }
.app-header { min-height: 76px; padding: 13px 21px; color: var(--white); border: 0; background: rgba(16, 25, 43, .96); backdrop-filter: blur(18px); }
.app-brand { color: var(--white); font-size: 20px; letter-spacing: -1.15px; }.app-brand > span:last-child > span { color: var(--aqua); }.brand-mark i { background: var(--aqua); }.brand-mark i:nth-child(3) { background: var(--blue); }
.header-back { width: 37px; height: 37px; border: 1px solid rgba(255,255,255,.14); border-radius: 8px; color: var(--white); background: rgba(255,255,255,.06); }.header-title { color: var(--white); font-size: 15px; }.header-actions { gap: 8px; }.dispatch-count { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 9px; border: 1px solid rgba(80,221,203,.38); border-radius: 7px; color: var(--aqua); background: rgba(80,221,203,.06); font-size: 10px; font-weight: 850; }.dispatch-count i { width: 6px; height: 6px; border-radius: 50%; background: var(--aqua); box-shadow: 0 0 0 4px rgba(80,221,203,.12); }.header-icon { color: var(--white); }.avatar-button { border-radius: 7px; color: #1d2640; background: var(--orange); }.search-glyph { color: inherit; }
.screen-panel { min-height: calc(100vh - 76px); padding: 31px 23px 45px; background: var(--canvas); }.screen-intro { padding: 2px 0 25px; border-bottom: 1px solid var(--line); }.eyebrow, .section-kicker { color: #73819a; }.eyebrow i { border-radius: 1px; background: var(--blue); transform: rotate(45deg); }.screen-intro h2 { color: var(--ink); font-size: 32px; }
.home-panel { min-height: calc(100vh - 76px); padding-top: 29px; color: var(--white); background: var(--navy); }.dispatch-heading { padding: 2px 0 22px; }.home-panel .eyebrow { color: #92a4c4; }.home-panel .eyebrow i { background: var(--aqua); box-shadow: 0 0 0 4px rgba(80,221,203,.13); }.dispatch-heading h2 { margin: 13px 0 8px; color: var(--white); font-size: 43px; letter-spacing: -2.8px; line-height: .84; }.dispatch-heading h2 em { color: var(--aqua); font-style: normal; }.dispatch-heading p { margin: 0; color: #8fa0bd; font-size: 11px; }
.message { border: 1px solid rgba(255,255,255,.13); border-left: 3px solid var(--aqua); border-radius: 7px; color: var(--white); background: rgba(255,255,255,.07); }.message > span { color: var(--navy); background: var(--aqua); }.message-error { border-left-color: var(--coral); color: var(--ink); background: var(--white); }.message-error > span { color: var(--white); background: var(--coral); }
.action-rail { display: grid; grid-template-columns: repeat(3, 1fr); margin: 0 0 18px; border: 1px solid rgba(174,194,228,.18); border-radius: 8px; background: rgba(255,255,255,.035); }.action-rail button { display: flex; align-items: center; justify-content: center; gap: 7px; min-height: 54px; padding: 8px; border: 0; border-right: 1px solid rgba(174,194,228,.18); color: #dce7fb; background: transparent; font-size: 9px; font-weight: 800; }.action-rail button:last-child { border-right: 0; }.action-rail button:hover { color: var(--aqua); background: rgba(80,221,203,.06); }.action-rail span { color: var(--aqua); font-size: 19px; font-weight: 400; }
.shipment-board { position: relative; display: block; width: 100%; min-height: 262px; padding: 18px 18px 16px; overflow: hidden; border: 1px solid #354b72; border-radius: 12px; color: var(--white); background: var(--slate); text-align: left; box-shadow: 0 18px 35px rgba(0,0,0,.22); }.shipment-board:before { position: absolute; top: 0; right: -36px; width: 158px; height: 158px; border: 1px solid rgba(80,221,203,.22); border-radius: 50%; content: ''; box-shadow: 0 0 0 26px rgba(80,221,203,.035), 0 0 0 56px rgba(80,221,203,.025); }.shipment-board:after { position: absolute; top: 0; bottom: 0; left: 0; width: 4px; background: var(--blue); content: ''; }.board-top, .board-route, .board-cities, .board-meta, .board-footer { position: relative; z-index: 1; display: flex; }.board-top { align-items: center; justify-content: space-between; }.board-top small { color: #a8bad7; font-size: 8px; font-weight: 850; letter-spacing: .14em; }.board-top b { display: inline-flex; align-items: center; gap: 5px; color: var(--aqua); font-size: 8px; letter-spacing: .1em; }.board-top b i { width: 6px; height: 6px; border-radius: 50%; background: var(--aqua); box-shadow: 0 0 0 4px rgba(80,221,203,.13); }.board-route { align-items: center; gap: 11px; margin-top: 35px; }.board-route > strong { color: var(--white); font-size: 32px; letter-spacing: -2px; }.route-vector { display: flex; align-items: center; flex: 1; gap: 4px; }.route-vector i { flex: 1; height: 1px; background: #5b6f91; }.route-vector b { width: 10px; height: 10px; border: 2px solid var(--aqua); border-radius: 50%; background: var(--slate); box-shadow: 0 0 0 5px rgba(80,221,203,.11); }.board-cities { justify-content: space-between; margin: 6px 1px 0; color: #91a4c3; font-size: 9px; }.board-meta { align-items: center; justify-content: space-between; margin-top: 34px; }.board-meta > b { color: #dce7fb; font-size: 11px; letter-spacing: .08em; }.board-barcode { width: 86px; height: 21px; opacity: .67; background: repeating-linear-gradient(90deg, #c7d4ea 0 2px, transparent 2px 4px, #c7d4ea 4px 5px, transparent 5px 8px, #c7d4ea 8px 11px, transparent 11px 13px); }.board-footer { align-items: center; justify-content: space-between; margin-top: 15px; padding-top: 14px; border-top: 1px solid rgba(186,203,231,.18); color: #dce7fb; font-size: 9px; }.board-footer > span { display: inline-flex; align-items: center; gap: 6px; }.status-dot { width: 7px; height: 7px; border-radius: 50%; background: #9ba8a0; }.status-dot.in-transit { background: var(--amber); }.status-dot.ready-for-pickup { background: var(--coral); }.status-dot.delivered { background: var(--aqua); }.board-footer b { color: #acbdd9; font-size: 8px; }.board-footer em { margin-left: 4px; color: var(--aqua); font-size: 14px; font-style: normal; }
.section-heading { margin: 31px 0 14px; }.section-heading h3 { font-size: 21px; }.activity-heading .section-kicker { color: #8294b4; }.section-heading button { color: #9fb1d0; }.section-heading button span { color: var(--aqua); }.event-stream { position: relative; display: grid; gap: 0; }.event-stream:before { position: absolute; top: 22px; bottom: 22px; left: 45px; width: 1px; background: #334666; content: ''; }.event-row { position: relative; z-index: 1; display: grid; grid-template-columns: 34px 11px minmax(0,1fr); align-items: center; gap: 10px; min-height: 59px; padding: 8px 0; border: 0; color: inherit; background: transparent; text-align: left; }.event-row time { color: #8294b4; font-size: 8px; font-weight: 800; }.event-mark { width: 9px; height: 9px; border: 2px solid var(--navy); border-radius: 50%; background: var(--blue); box-shadow: 0 0 0 2px #53698d; }.event-mark.scan { background: var(--orange); }.event-mark.node { background: var(--aqua); }.event-row > span:last-child { display: grid; gap: 4px; }.event-row b { color: #eff5ff; font-size: 10px; }.event-row small { overflow: hidden; color: #8fa0bd; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.filter-row { gap: 19px; margin: 16px 0 15px; }.filter-row button { color: #8a97ad; }.filter-row button.selected { color: var(--ink); }.filter-row button.selected:after { height: 3px; background: var(--blue); }.parcel-list { display: grid; gap: 8px; overflow: visible; border: 0; border-radius: 0; background: transparent; }.parcel-row { min-height: 76px; padding: 12px 12px 12px 14px; border: 1px solid var(--line); border-left: 3px solid var(--blue); border-radius: 7px; box-shadow: 0 5px 12px rgba(28,41,66,.035); }.parcel-row:nth-child(2n) { border-left-color: var(--orange); }.parcel-row:last-child { border-bottom: 1px solid var(--line); }.parcel-box { border-radius: 7px; }.parcel-box.lime { color: #3d75d7; background: #e6edff; }.parcel-box.coral { color: #d76157; background: #fff0ed; }.parcel-box.blue { color: #686be0; background: #edecff; }.parcel-box.amber { color: #c38b38; background: #fff4df; }.row-main b { color: #23304a; }.row-main small { color: #8693a9; }.row-status { color: #77859c; }.row-status.in-transit, .status-pill.in-transit { color: #9a743b; }.row-status.in-transit i, .status-pill.in-transit i { background: var(--amber); }.row-status.ready-for-pickup, .status-pill.ready-for-pickup { color: #c15c55; }.row-status.ready-for-pickup i, .status-pill.ready-for-pickup i { background: var(--coral); }.row-status.delivered, .status-pill.delivered { color: #328b7c; }.row-status.delivered i, .status-pill.delivered i { background: var(--aqua); }.row-arrow { color: var(--blue); }.screen-link { color: #456bbf; }.screen-link > span { border-radius: 5px; color: var(--white); background: var(--blue); }
.progress-line { margin: 19px 0 30px; }.progress-line b, .progress-line span { border-radius: 1px; background: #d7dfeb; transform: rotate(45deg); }.progress-line b { background: var(--blue); box-shadow: 0 0 0 4px #dce6ff; }.progress-line i { background: #ccd6e5; }.task-form { gap: 19px; }.task-form label { color: #52627c; }.form-input { height: 52px; border-color: #cad4e4; border-radius: 7px; }.form-input:focus-within, .place-search:focus-within { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(71,116,255,.12); }.form-input > i { color: var(--blue); }.screen-submit { border-radius: 7px; color: var(--white); background: var(--blue); box-shadow: 0 10px 18px rgba(71,116,255,.18); }.screen-submit span { color: var(--aqua); }.track-task { margin-top: 21px; }.form-input-large { height: 58px; }.recent-code { border-color: #afbdd2; border-style: dashed; border-radius: 7px; background: transparent; }.recent-code > span:first-child { border-radius: 5px; color: var(--white); background: var(--slate); }.recent-code b { color: #36445e; }.recent-code strong { color: #456bbf; }.track-result { border: 0; border-radius: 9px; color: var(--white); background: var(--slate); box-shadow: 0 12px 25px rgba(26,42,68,.14); }.track-result-top > b { color: #b1c2df; }.track-route > b { color: var(--white); }.track-route > span i { background: #506689; }.track-route > span b { background: var(--aqua); box-shadow: 0 0 0 3px rgba(80,221,203,.16); }.track-result > small { color: #aebddb; }
.place-search { height: 50px; margin-top: 19px; border-color: #cad4e4; border-radius: 7px; }.agent-list, .settings-list { gap: 8px; overflow: visible; border: 0; border-radius: 0; background: transparent; }.agent-row { min-height: 70px; border: 1px solid var(--line); border-radius: 7px; }.agent-mark { border-radius: 5px; }.agent-mark.green { color: #1f8b83; background: #dff9f2; }.agent-mark.blue { color: #4969d6; background: #e7ecff; }.agent-row strong { color: var(--blue); }.profile-card { margin-top: 20px; border-radius: 8px; }.profile-avatar { border-radius: 7px; color: var(--white); background: var(--slate); }.profile-card button { border: 1px solid #cbd6e7; border-radius: 5px; color: #456bbf; background: #f5f8ff; }.settings-list button { border: 1px solid var(--line); border-radius: 7px; }.settings-list button > span { border-radius: 5px; color: var(--white); background: var(--slate); }.settings-list strong { color: var(--blue); }.detail-status { margin-top: 20px; }.detail-route > div > b { border: 2px solid #c7d4f7; border-radius: 8px; color: var(--blue); background: var(--white); }.detail-route > span i { background: #b9c8df; }.detail-route > span b { background: var(--aqua); box-shadow: 0 0 0 3px #d8f6f0; }.detail-info { border-color: #d7dfeb; }.detail-info b { color: #3b4960; }
@media (max-width: 420px) { .app-header { padding-right: 16px; padding-left: 16px; }.screen-panel { padding-right: 19px; padding-left: 19px; }.dispatch-heading h2 { font-size: 40px; }.shipment-board { min-height: 250px; padding-right: 15px; padding-left: 15px; }.board-route > strong { font-size: 29px; }.board-meta { margin-top: 31px; }.parcel-row { grid-template-columns: 33px minmax(0,1fr) auto 8px; gap: 8px; }.row-status { font-size: 7px; } }

/* Header consistency and accessible type scale. */
[hidden] { display: none !important; }
.app-header { min-height: 80px; }
.app-brand { font-size: 21px; }
.header-title { font-size: 17px; }
.header-track { display: inline-flex; align-items: center; gap: 8px; min-height: 39px; padding: 0 11px; border: 1px solid rgba(80,221,203,.38); border-radius: 7px; color: var(--aqua); background: rgba(80,221,203,.07); font-size: 12px; font-weight: 850; }
.header-track .search-glyph { width: 14px; height: 14px; }
.avatar-button { width: 39px; height: 39px; font-size: 11px; }
.screen-panel, .home-panel { min-height: calc(100vh - 80px); }
.eyebrow, .section-kicker { font-size: 10px; letter-spacing: .13em; }
.dispatch-heading h2 { font-size: 47px; }
.dispatch-heading p { font-size: 13px; }
.action-rail button { min-height: 59px; font-size: 11px; }
.action-rail span { font-size: 22px; }
.shipment-board { min-height: 278px; }
.board-top small, .board-top b { font-size: 10px; }
.board-route > strong { font-size: 35px; }
.board-cities { font-size: 11px; }
.board-meta > b { font-size: 13px; }
.board-footer { font-size: 11px; }
.board-footer b { font-size: 10px; }
.section-heading h3 { font-size: 24px; }
.section-heading button { font-size: 11px; }
.event-row { grid-template-columns: 39px 12px minmax(0,1fr); min-height: 65px; }
.event-stream:before { left: 52px; }
.event-row time { font-size: 10px; }
.event-mark { width: 10px; height: 10px; }
.event-row b { font-size: 13px; }
.event-row small { font-size: 10px; }
.screen-intro h2 { font-size: 35px; }
.filter-row button { font-size: 12px; }
.parcel-row { min-height: 82px; }
.row-main b { font-size: 13px; }
.row-main small { font-size: 10px; }
.row-status { font-size: 10px; }
.row-status small { font-size: 8px; }
.screen-link { font-size: 12px; }
.task-form label { font-size: 12px; }
.form-input { height: 57px; }
.form-input input, .place-search input { font-size: 16px; }
.screen-submit { padding: 18px; font-size: 15px; }
.form-input-large { height: 63px; }
.recent-code small { font-size: 9px; }
.recent-code b { font-size: 13px; }
.recent-code strong { font-size: 10px; }
.status-pill { font-size: 10px; }
.track-result-top > b { font-size: 10px; }
.track-route > b { font-size: 17px; }
.track-result > small { font-size: 11px; }
.agent-row { min-height: 76px; }
.agent-row b { font-size: 13px; }
.agent-row small { font-size: 10px; }
.profile-card b { font-size: 14px; }
.profile-card small { font-size: 11px; }
.profile-card button { font-size: 11px; }
.settings-list b { font-size: 12px; }
.detail-status { font-size: 12px; }
.detail-route small, .detail-info small { font-size: 11px; }
.detail-info b { font-size: 12px; }
@media (max-width: 420px) { .app-header { padding-right: 15px; padding-left: 15px; }.app-brand { font-size: 20px; }.header-track { gap: 6px; padding: 0 9px; font-size: 11px; }.screen-panel { padding-right: 19px; padding-left: 19px; }.dispatch-heading h2 { font-size: 43px; }.shipment-board { min-height: 268px; }.board-route > strong { font-size: 31px; }.row-status { font-size: 9px; } }