:root {
  --bg: #07090d;
  --panel: #10141b;
  --panel-soft: #171d26;
  --line: rgba(255, 255, 255, 0.12);
  --text: #f3f5f8;
  --muted: #a7b0bd;
  --red: #ff2b2b;
  --red-dark: #a80f17;
  --steel: #728092;
  --good: #32d583;
  --warn: #f9b24e;
  color-scheme: dark;
  font-family:
    Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
    sans-serif;
}

/* Shipment Plus public marketing site - 2026 refresh */
.marketing-body {
  --sp-navy: #081426;
  --sp-navy-2: #0d1c32;
  --sp-ink: #10223b;
  --sp-copy: #5d6d81;
  --sp-blue: #1769e8;
  --sp-blue-dark: #0d55c7;
  --sp-teal: #16b8a6;
  --sp-mist: #f4f7fb;
  --sp-line: #dce5ef;
  --sp-amber: #f2a51a;
  margin: 0;
  overflow-x: hidden;
  background: #fff;
  color: var(--sp-ink);
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 16px;
  line-height: 1.5;
}

.marketing-body *, .marketing-body *::before, .marketing-body *::after { box-sizing: border-box; }
.marketing-body button, .marketing-body a { -webkit-tap-highlight-color: transparent; }
.marketing-body a:focus-visible, .marketing-body button:focus-visible, .marketing-body summary:focus-visible, .sp-role-copy:focus-visible {
  outline: 3px solid #56c8ff;
  outline-offset: 3px;
}
.sp-skip { position: fixed; z-index: 1000; top: 10px; left: 12px; padding: 10px 16px; border-radius: 8px; background: #fff; color: var(--sp-navy); font-weight: 800; transform: translateY(-150%); }
.sp-skip:focus { transform: none; }

.sp-header {
  position: sticky;
  z-index: 100;
  top: 0;
  display: flex;
  width: 100%;
  min-height: 74px;
  padding: 0 clamp(22px, 5vw, 78px);
  align-items: center;
  justify-content: space-between;
  gap: 36px;
  border-bottom: 1px solid rgba(220, 229, 239, 0.88);
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(16px);
}
.sp-brand { display: inline-flex; flex: 0 0 auto; align-items: center; gap: 11px; color: var(--sp-navy); text-decoration: none; }
.sp-brand-mark { display: grid; width: 38px; height: 38px; place-items: center; border-radius: 11px; background: var(--sp-blue); color: #fff; font-size: 0.68rem; font-weight: 950; letter-spacing: -0.03em; box-shadow: 0 8px 20px rgba(23, 105, 232, 0.24); }
.sp-brand-mark span { color: #7ff2de; }
.sp-brand-name { font-size: 0.92rem; font-weight: 900; letter-spacing: -0.02em; }
.sp-nav-wrap { display: flex; flex: 1; align-items: center; justify-content: flex-end; gap: clamp(24px, 4vw, 58px); }
.sp-nav { display: flex; align-items: center; gap: clamp(20px, 2.4vw, 36px); }
.sp-nav a, .sp-login { color: #42536a; font-size: 0.76rem; font-weight: 800; text-decoration: none; transition: color 160ms ease; }
.sp-nav a:hover, .sp-login:hover { color: var(--sp-blue); }
.sp-header-actions { display: flex; align-items: center; gap: 22px; }
.sp-menu-button { display: none; min-width: 48px; min-height: 48px; padding: 0; border: 0; background: transparent; color: var(--sp-ink); }

.sp-button, .sp-secondary-button { display: inline-flex; min-height: 52px; padding: 0 21px; align-items: center; justify-content: center; gap: 17px; border: 1px solid transparent; border-radius: 10px; font-size: 0.78rem; font-weight: 900; text-decoration: none; transition: transform 160ms ease, background 160ms ease, border-color 160ms ease, box-shadow 160ms ease; }
.sp-button { background: var(--sp-blue); color: #fff; box-shadow: 0 12px 28px rgba(23, 105, 232, 0.23); }
.sp-button:hover { background: var(--sp-blue-dark); transform: translateY(-1px); box-shadow: 0 15px 34px rgba(23, 105, 232, 0.3); }
.sp-secondary-button { border-color: #ccd8e6; background: #fff; color: var(--sp-ink); }
.sp-secondary-button:hover { border-color: #9cb1ca; background: #f9fbfd; transform: translateY(-1px); }
.sp-button-small { min-height: 42px; padding: 0 17px; border-radius: 8px; font-size: 0.7rem; }

.sp-hero { position: relative; min-height: 780px; padding: 98px clamp(22px, 5vw, 78px) 90px; overflow: hidden; background: var(--sp-navy); color: #fff; }
.sp-hero::before { content: ""; position: absolute; inset: 0; opacity: 0.22; background-image: linear-gradient(rgba(255,255,255,.055) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.055) 1px, transparent 1px); background-size: 56px 56px; mask-image: linear-gradient(to right, #000, transparent 82%); }
.sp-hero-glow { position: absolute; width: 700px; height: 700px; right: -160px; top: -250px; border-radius: 50%; background: radial-gradient(circle, rgba(23,105,232,.28), rgba(15,185,166,.08) 44%, transparent 70%); }
.sp-hero-copy { position: relative; z-index: 2; max-width: 665px; }
.sp-eyebrow { display: flex; margin: 0 0 22px; align-items: center; gap: 10px; color: var(--sp-blue); font-size: 0.64rem; font-weight: 950; letter-spacing: 0.14em; text-transform: uppercase; }
.sp-hero .sp-eyebrow, .sp-eyebrow.light { color: #77d9cf; }
.sp-eyebrow > span { width: 22px; height: 1px; background: currentColor; }
.sp-hero h1 { max-width: 760px; margin: 0; color: #fff; font-size: clamp(3.15rem, 5.9vw, 6.25rem); line-height: 0.94; letter-spacing: -0.066em; }
.sp-hero h1 em { color: #75a9ff; font-style: normal; }
.sp-lede { max-width: 610px; margin: 28px 0 0; color: #b7c5d8; font-size: clamp(1rem, 1.45vw, 1.2rem); line-height: 1.72; }
.sp-actions { display: flex; margin-top: 34px; flex-wrap: wrap; gap: 12px; }
.sp-hero .sp-secondary-button { border-color: rgba(255,255,255,.2); background: rgba(255,255,255,.06); color: #fff; }
.sp-hero .sp-secondary-button:hover { border-color: rgba(255,255,255,.38); background: rgba(255,255,255,.1); }
.sp-pilot-note { display: flex; margin: 22px 0 0; align-items: center; gap: 8px; color: #8fa1b8; font-size: 0.7rem; font-weight: 700; }
.sp-pilot-note > span { color: #59d9bf; }

.sp-command { position: relative; z-index: 3; width: min(1180px, 92vw); margin: 84px auto 0; overflow: hidden; border: 1px solid rgba(255,255,255,.15); border-radius: 18px; background: #f8fafc; color: var(--sp-ink); box-shadow: 0 42px 95px rgba(0,0,0,.4); }
.sp-command-bar { display: flex; min-height: 58px; padding: 0 19px; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--sp-line); background: #fff; }
.sp-command-bar > div { display: flex; align-items: center; gap: 10px; font-size: 0.74rem; }
.sp-mini-mark { display: grid; width: 30px; height: 30px; place-items: center; border-radius: 8px; background: var(--sp-blue); color: #fff; font-size: 0.55rem; font-weight: 950; }
.sp-sample-label { padding: 6px 9px; border: 1px solid #dce5ef; border-radius: 99px; color: #6c7d92; font-size: 0.55rem; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.sp-command-body { display: grid; min-height: 460px; grid-template-columns: 310px 1fr; }
.sp-load-list { padding: 18px; border-right: 1px solid var(--sp-line); background: #f4f7fb; }
.sp-list-heading { display: flex; margin: 0 2px 13px; align-items: center; justify-content: space-between; color: #687a91; font-size: 0.67rem; font-weight: 850; }
.sp-list-heading strong { display: grid; width: 22px; height: 22px; place-items: center; border-radius: 6px; background: #e4ebf4; color: var(--sp-ink); font-size: .6rem; }
.sp-load { margin-bottom: 10px; padding: 15px; border: 1px solid #dfe7f1; border-radius: 11px; background: #fff; }
.sp-load.active { border-color: #8db8fa; box-shadow: inset 3px 0 var(--sp-blue), 0 7px 18px rgba(31,69,121,.07); }
.sp-load-top, .sp-load-meta { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.sp-load-top strong { font-size: .72rem; }
.sp-load p { margin: 12px 0; color: #445872; font-size: .65rem; font-weight: 780; }
.sp-load-meta { color: #8190a2; font-size: .56rem; }
.sp-status { display: inline-flex; padding: 5px 7px; align-items: center; border-radius: 99px; font-size: .5rem; font-weight: 900; }
.sp-status.transit { background: #e7f0ff; color: #1769e8; }
.sp-status.warning { background: #fff4d9; color: #a66700; }
.sp-status.ready { background: #def7f1; color: #127e70; }
.sp-route-card { padding: 21px 22px 17px; background: #fff; }
.sp-route-head { display: flex; align-items: flex-start; justify-content: space-between; }
.sp-overline { color: #74869d; font-size: .54rem; font-weight: 950; letter-spacing: .11em; text-transform: uppercase; }
.sp-route-head h2 { margin: 5px 0 0; font-size: 1.18rem; letter-spacing: -.03em; }
.sp-tracking { display: inline-flex; padding: 6px 9px; align-items: center; gap: 7px; border-radius: 99px; background: #def7f1; color: #127e70; font-size: .54rem; font-weight: 900; }
.sp-tracking i { width: 6px; height: 6px; border-radius: 50%; background: #1bc7a8; box-shadow: 0 0 0 4px rgba(27,199,168,.12); }
.sp-route-map { position: relative; height: 205px; margin-top: 16px; overflow: hidden; border: 1px solid #dbe5ef; border-radius: 11px; background: #eff4f8; }
.sp-map-grid { position: absolute; inset: 0; opacity: .54; background-image: linear-gradient(28deg, transparent 48%, #d7e0e9 49%, #d7e0e9 51%, transparent 52%), linear-gradient(-27deg, transparent 48%, #dce5ed 49%, #dce5ed 51%, transparent 52%); background-size: 86px 59px, 113px 71px; }
.sp-route-line { position: absolute; width: 70%; height: 70px; left: 12%; top: 40%; border-top: 4px dashed #31bba6; border-radius: 50%; transform: rotate(-12deg); }
.sp-route-start, .sp-route-progress, .sp-route-end { position: absolute; z-index: 2; width: 16px; height: 16px; border: 4px solid #fff; border-radius: 50%; background: var(--sp-blue); box-shadow: 0 0 0 2px var(--sp-blue); }
.sp-route-start { left: 11%; bottom: 23%; }.sp-route-progress { left: 48%; top: 44%; background: var(--sp-teal); box-shadow: 0 0 0 2px var(--sp-teal); }.sp-route-end { right: 16%; top: 25%; }
.sp-route-truck { position: absolute; z-index: 3; left: 48%; top: 41%; display: grid; width: 28px; height: 28px; place-items: center; border: 4px solid #fff; border-radius: 50%; background: var(--sp-teal); color: #fff; font-size: .65rem; font-weight: 950; transform: translate(-6px,-6px) rotate(-15deg); box-shadow: 0 6px 15px rgba(18,126,112,.28); }
.sp-city { position: absolute; color: #60738b; font-size: .54rem; font-weight: 850; }.sp-city.start { left: 8%; bottom: 11%; }.sp-city.end { right: 12%; top: 12%; }
.sp-exception-card { position: absolute; z-index: 4; right: 13px; bottom: 12px; display: flex; min-width: 230px; padding: 10px 12px; align-items: center; gap: 10px; border: 1px solid #efd8a5; border-radius: 9px; background: rgba(255,255,255,.96); box-shadow: 0 10px 25px rgba(45,61,82,.13); }
.sp-exception-icon { display: grid; width: 29px; height: 29px; place-items: center; border-radius: 8px; background: #fff2d2; color: #a66700; font-weight: 950; }
.sp-exception-card small,.sp-exception-card strong,.sp-exception-card div > span { display: block; }.sp-exception-card small { color: #a66700; font-size: .45rem; font-weight: 950; letter-spacing: .08em; }.sp-exception-card strong { margin: 2px 0; font-size: .61rem; }.sp-exception-card div > span { color: #77889b; font-size: .52rem; }
.sp-timeline { display: grid; margin: 16px 4px 14px; grid-template-columns: repeat(3, 1fr); }
.sp-timeline > div { position: relative; display: flex; align-items: flex-start; gap: 9px; }
.sp-timeline > div::before { content: ""; position: absolute; top: 6px; left: 6px; width: 100%; border-top: 1px solid #cfdae6; }.sp-timeline > div:last-child::before { display: none; }
.sp-timeline i { position: relative; z-index: 2; width: 13px; height: 13px; flex: 0 0 auto; border: 3px solid #fff; border-radius: 50%; background: #c6d1de; box-shadow: 0 0 0 1px #c6d1de; }.sp-timeline .complete i { background: var(--sp-teal); box-shadow: 0 0 0 1px var(--sp-teal); }.sp-timeline .current i { background: var(--sp-amber); box-shadow: 0 0 0 1px var(--sp-amber); }
.sp-timeline small,.sp-timeline strong { display: block; }.sp-timeline small { color: #91a0b1; font-size: .48rem; }.sp-timeline strong { margin-top: 2px; font-size: .57rem; }
.sp-doc-bar { display: flex; padding: 11px 13px; align-items: center; gap: 10px; border: 1px solid var(--sp-line); border-radius: 9px; background: #f8fafc; }.sp-doc-icon { display: grid; width: 31px; height: 31px; place-items: center; border-radius: 7px; background: #e7f0ff; color: var(--sp-blue); font-size: .46rem; font-weight: 950; }.sp-doc-bar div { flex: 1; }.sp-doc-bar small,.sp-doc-bar strong { display: block; }.sp-doc-bar small { color: #8796a8; font-size: .44rem; font-weight: 950; letter-spacing: .1em; }.sp-doc-bar strong { margin-top: 2px; font-size: .58rem; }.sp-doc-bar strong span { color: #aab5c1; }.sp-doc-count { color: var(--sp-blue); font-size: .62rem; font-weight: 900; }

.sp-value-strip { display: grid; min-height: 105px; padding: 0 clamp(22px, 5vw, 78px); grid-template-columns: repeat(4, 1fr); border-bottom: 1px solid var(--sp-line); background: #fff; }
.sp-value-strip > div { display: flex; padding: 24px; align-items: center; justify-content: center; gap: 12px; border-right: 1px solid var(--sp-line); }
.sp-value-strip > div:first-child { border-left: 1px solid var(--sp-line); }
.sp-value-strip span { color: var(--sp-teal); font-size: .56rem; font-weight: 950; }.sp-value-strip strong { color: #32465f; font-size: .7rem; }

.sp-section { padding: 118px clamp(22px, 6vw, 94px); }
.sp-section-heading { max-width: 1220px; margin: 0 auto 58px; }
.sp-section-heading.centered { max-width: 720px; text-align: center; }.sp-section-heading.centered .sp-eyebrow { justify-content: center; }
.sp-section-heading.split { display: grid; grid-template-columns: minmax(0,1fr) minmax(320px,.56fr); align-items: end; gap: 70px; }
.sp-section-heading h2,.sp-security h2,.sp-pilot h2,.sp-contact h2,.sp-faq-intro h2 { margin: 0; color: inherit; font-size: clamp(2.4rem, 4.3vw, 4.45rem); line-height: 1.02; letter-spacing: -.057em; }
.sp-section-heading > p,.sp-section-heading.split > p { margin: 21px 0 0; color: var(--sp-copy); font-size: .92rem; line-height: 1.75; }
.sp-section-heading.split > p { margin: 0 0 5px; }

.sp-workflow { background: var(--sp-mist); }
.sp-steps { position: relative; display: grid; max-width: 1220px; margin: 0 auto; padding: 0; grid-template-columns: repeat(3, 1fr); gap: 20px; list-style: none; counter-reset: steps; }
.sp-steps::before { content: ""; position: absolute; z-index: 0; top: 118px; left: 28%; right: 28%; border-top: 2px dashed #b8c8da; }
.sp-steps li { position: relative; z-index: 1; min-width: 0; padding: 14px; border: 1px solid var(--sp-line); border-radius: 16px; background: #fff; box-shadow: 0 16px 40px rgba(28,53,86,.06); }
.sp-step-visual { position: relative; display: grid; height: 210px; overflow: hidden; place-items: center; border-radius: 11px; background: #eef3f8; }
.sp-step-copy { padding: 26px 18px 19px; }.sp-step-copy > span { color: var(--sp-blue); font-size: .58rem; font-weight: 950; }.sp-step-copy h3 { margin: 8px 0 10px; font-size: 1.13rem; letter-spacing: -.025em; }.sp-step-copy p { margin: 0; color: var(--sp-copy); font-size: .74rem; line-height: 1.65; }
.sp-step-visual.upload { background: linear-gradient(145deg,#e8f0fb,#f7f9fc); }.sp-file { display: grid; width: 74px; height: 92px; place-items: center; border: 1px solid #b9cbe1; border-radius: 8px; background: #fff; color: var(--sp-blue); font-size: .7rem; font-weight: 950; box-shadow: 0 16px 28px rgba(30,64,105,.13); transform: rotate(-5deg); }.sp-file::after { content: ""; position: absolute; width: 19px; height: 19px; margin: -85px -65px 0 0; border-radius: 0 8px 0 5px; background: #d8e5f6; }.sp-input-line { position: absolute; right: 34px; width: 92px; height: 9px; border-radius: 99px; background: #cbd8e7; }.sp-input-line.short { margin-top: 32px; width: 66px; }
.sp-step-visual.phone { background: #0d1d34; }.sp-step-visual.phone > div { width: 176px; min-height: 174px; padding: 30px 18px 18px; border: 5px solid #31425b; border-bottom: 0; border-radius: 23px 23px 0 0; background: #fff; }.sp-step-visual.phone small,.sp-step-visual.phone strong { display: block; }.sp-step-visual.phone small { color: var(--sp-blue); font-size: .46rem; font-weight: 950; letter-spacing: .08em; }.sp-step-visual.phone strong { margin: 9px 0 18px; font-size: .85rem; }.sp-step-visual.phone span { display: grid; min-height: 37px; place-items: center; border-radius: 7px; background: var(--sp-blue); color: #fff; font-size: .55rem; font-weight: 900; }
.sp-step-visual.flow { grid-template-columns: repeat(3,52px); align-content: center; gap: 9px; background: linear-gradient(145deg,#eaf4ff,#eaf9f6); }.sp-flow-origin { grid-column: 1 / -1; justify-self: center; display: grid; width: 56px; height: 56px; place-items: center; border-radius: 15px; background: var(--sp-blue); color: #fff; font-size: .68rem; font-weight: 950; box-shadow: 0 12px 25px rgba(23,105,232,.24); }.sp-step-visual.flow i { grid-column: 1 / -1; justify-self: center; height: 25px; border-left: 2px dashed #9bb4ce; }.sp-step-visual.flow > span:not(.sp-flow-origin) { display: grid; min-height: 35px; place-items: center; border: 1px solid #c9d8e7; border-radius: 7px; background: #fff; color: #435973; font-size: .5rem; font-weight: 900; }

.sp-product { background: var(--sp-navy); color: #fff; }
.sp-product .sp-section-heading > p { color: #a8b7ca; }
.sp-role-shell { max-width: 1220px; margin: 0 auto; border: 1px solid rgba(255,255,255,.13); border-radius: 19px; background: #0d1c32; box-shadow: 0 35px 80px rgba(0,0,0,.24); }
.sp-role-tabs { display: grid; grid-template-columns: repeat(3,1fr); border-bottom: 1px solid rgba(255,255,255,.12); }
.sp-role-tabs button { min-height: 73px; padding: 0 24px; border: 0; border-right: 1px solid rgba(255,255,255,.1); background: transparent; color: #8394aa; text-align: left; font: inherit; font-size: .72rem; font-weight: 850; cursor: pointer; }.sp-role-tabs button:last-child { border-right: 0; }.sp-role-tabs button span { margin-right: 10px; color: #53657d; font-size: .55rem; }.sp-role-tabs button[aria-selected="true"] { box-shadow: inset 0 -3px #4f91ff; color: #fff; }.sp-role-tabs button[aria-selected="true"] span { color: #77aaff; }
.sp-role-content { display: grid; min-height: 540px; padding: clamp(25px,4.3vw,58px); grid-template-columns: .67fr 1.33fr; align-items: center; gap: 65px; }
.sp-role-copy h3 { margin: 11px 0 17px; font-size: clamp(1.85rem,3vw,3rem); line-height: 1.07; letter-spacing: -.045em; }.sp-role-copy > p:not(.sp-overline) { margin: 0; color: #aebdce; font-size: .84rem; line-height: 1.75; }.sp-role-copy ul { display: grid; margin: 28px 0 0; padding: 0; gap: 11px; list-style: none; }.sp-role-copy li { position: relative; padding-left: 23px; color: #d7e1ee; font-size: .7rem; font-weight: 750; }.sp-role-copy li::before { content: ""; position: absolute; top: 5px; left: 0; width: 9px; height: 9px; border: 2px solid #6be0cd; border-radius: 50%; }
.sp-role-preview { min-width: 0; min-height: 390px; overflow: hidden; border: 1px solid #34445b; border-radius: 14px; background: #f5f8fb; color: var(--sp-ink); box-shadow: 0 24px 55px rgba(0,0,0,.3); }
.sp-preview-toolbar { display: flex; height: 38px; padding: 0 13px; align-items: center; justify-content: space-between; border-bottom: 1px solid #d9e2ec; background: #fff; }.sp-preview-toolbar > div { display: flex; gap: 5px; }.sp-preview-toolbar > div span { width: 7px; height: 7px; border-radius: 50%; background: #d4dde8; }.sp-preview-toolbar small { color: #73849a; font-size: .5rem; font-weight: 850; }
.role-view { display: none; min-height: 352px; }.role-view.active { display: flex; }
.sp-owner-view { background: #f3f6fa; }.sp-preview-sidebar { width: 50px; padding: 22px 13px; background: var(--sp-navy); }.sp-preview-sidebar span { display: block; width: 24px; height: 24px; margin-bottom: 15px; border-radius: 7px; background: #1c2d45; }.sp-preview-sidebar span.active { background: var(--sp-blue); }.sp-preview-main { flex: 1; min-width: 0; padding: 25px; }.sp-preview-title { display: flex; align-items: center; justify-content: space-between; gap: 15px; }.sp-preview-title small,.sp-preview-title strong { display: block; }.sp-preview-title small { color: #8a99ab; font-size: .44rem; font-weight: 900; letter-spacing: .1em; }.sp-preview-title strong { margin-top: 4px; font-size: .88rem; }.sp-preview-title > span { padding: 8px 10px; border-radius: 6px; background: var(--sp-blue); color: #fff; font-size: .5rem; font-weight: 900; }.sp-stat-row { display: grid; margin-top: 22px; grid-template-columns: repeat(3,1fr); gap: 9px; }.sp-stat-row > div { padding: 13px; border: 1px solid #dde5ee; border-radius: 8px; background: #fff; }.sp-stat-row small,.sp-stat-row strong { display: block; }.sp-stat-row small { color: #8998aa; font-size: .42rem; font-weight: 900; }.sp-stat-row strong { margin-top: 5px; font-size: 1.05rem; }.sp-stat-row strong.amber { color: #b47508; }.sp-queue { margin-top: 12px; overflow: hidden; border: 1px solid #dde5ee; border-radius: 8px; background: #fff; }.sp-queue-head { display: flex; padding: 11px 13px; justify-content: space-between; border-bottom: 1px solid #e5ebf2; font-size: .57rem; font-weight: 900; }.sp-queue-head span { color: var(--sp-blue); }.sp-queue p { display: grid; margin: 0; padding: 12px 13px; grid-template-columns: 8px 60px 1fr auto; align-items: center; gap: 8px; border-bottom: 1px solid #edf1f5; font-size: .52rem; }.sp-queue p:last-child { border: 0; }.sp-queue p i { width: 7px; height: 7px; border-radius: 50%; background: var(--sp-teal); }.sp-queue p i.amber { background: var(--sp-amber); }.sp-queue p span { color: #687a91; }.sp-queue p b { color: var(--sp-blue); }
.sp-driver-view { align-items: flex-end; justify-content: center; background: radial-gradient(circle at 50% 100%,#cfe2ff,#e8eff8 55%,#f6f8fb); }.sp-mobile-preview { width: 225px; min-height: 330px; margin-top: 22px; padding: 17px; border: 7px solid var(--sp-navy); border-bottom: 0; border-radius: 25px 25px 0 0; background: #fff; box-shadow: 0 16px 35px rgba(16,34,59,.2); }.sp-mobile-top { display: flex; padding-bottom: 13px; align-items: center; justify-content: space-between; border-bottom: 1px solid #e7ecf2; font-size: .55rem; font-weight: 900; }.sp-mobile-top small { color: #8696aa; font-size: .39rem; letter-spacing: .08em; }.sp-mobile-preview > .sp-overline { display: block; margin-top: 20px; color: var(--sp-blue); }.sp-mobile-preview h4 { margin: 7px 0; font-size: 1.05rem; }.sp-mobile-preview > p:not(.sp-overline) { margin: 0 0 17px; color: #73849a; font-size: .58rem; }.sp-mobile-preview > button { width: 100%; min-height: 40px; border: 0; border-radius: 7px; background: var(--sp-blue); color: #fff; font-size: .56rem; font-weight: 900; }.sp-driver-tools { display: grid; margin-top: 9px; grid-template-columns: repeat(2,1fr); gap: 7px; }.sp-driver-tools span { display: grid; min-height: 33px; place-items: center; border: 1px solid #dbe4ee; border-radius: 6px; color: #5f7187; font-size: .48rem; font-weight: 800; }.sp-location-note { display: flex; margin-top: 15px; align-items: center; gap: 8px; }.sp-location-note i { width: 7px; height: 7px; flex: 0 0 auto; border-radius: 50%; background: var(--sp-teal); }.sp-location-note span,.sp-location-note strong { display: block; }.sp-location-note strong { font-size: .48rem; }.sp-location-note span { color: #8997a8; font-size: .4rem; }
.sp-customer-view { padding: 35px; align-items: center; background: #eaf0f6; }.sp-viewer-card { width: 100%; overflow: hidden; border: 1px solid #d8e2ec; border-radius: 12px; background: #fff; box-shadow: 0 15px 35px rgba(23,50,85,.12); }.sp-viewer-top { display: grid; padding: 18px; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; border-bottom: 1px solid #e4eaf1; }.sp-viewer-top small,.sp-viewer-top strong { display: block; }.sp-viewer-top small { color: #8594a6; font-size: .45rem; font-weight: 900; letter-spacing: .08em; }.sp-viewer-top strong { margin-top: 3px; font-size: .82rem; }.sp-viewer-route { display: grid; padding: 32px 28px; grid-template-columns: 1fr 80px 1fr; align-items: center; }.sp-viewer-route > div:last-child { text-align: right; }.sp-viewer-route i { border-top: 2px dashed #a9bad0; }.sp-viewer-route small,.sp-viewer-route strong,.sp-viewer-route span { display: block; }.sp-viewer-route small { color: #8a99aa; font-size: .43rem; font-weight: 900; }.sp-viewer-route strong { margin: 5px 0; font-size: .75rem; }.sp-viewer-route span { color: #718298; font-size: .48rem; }.sp-privacy-note { display: flex; margin: 0 18px 18px; padding: 13px; align-items: flex-start; gap: 10px; border-radius: 8px; background: #edf8f5; }.sp-privacy-note > span { display: grid; width: 23px; height: 23px; flex: 0 0 auto; place-items: center; border-radius: 50%; background: #c9eee5; color: #147e70; font-size: .56rem; font-weight: 950; }.sp-privacy-note strong { display: block; font-size: .58rem; }.sp-privacy-note p { margin: 3px 0 0; color: #668078; font-size: .48rem; line-height: 1.45; }

.sp-outcomes { background: #fff; }
.sp-outcome-grid { display: grid; max-width: 1220px; margin: 0 auto; grid-template-columns: repeat(3,1fr); gap: 18px; }
.sp-outcome-grid article { position: relative; min-height: 310px; padding: 30px; overflow: hidden; border: 1px solid var(--sp-line); border-radius: 15px; background: var(--sp-mist); }
.sp-outcome-grid article.featured { grid-row: span 2; min-height: 638px; background: var(--sp-navy); color: #fff; }.sp-outcome-grid article h3 { margin: 28px 0 12px; font-size: 1.25rem; line-height: 1.15; letter-spacing: -.025em; }.sp-outcome-grid article p { margin: 0; color: var(--sp-copy); font-size: .73rem; line-height: 1.65; }.sp-outcome-grid article.featured p { color: #aebdce; }.sp-card-number { color: #8595a9; font-size: .52rem; font-weight: 950; }.sp-outcome-icon { display: grid; width: 48px; height: 48px; margin-top: 35px; place-items: center; border-radius: 13px; background: #e2edfd; color: var(--sp-blue); font-size: .64rem; font-weight: 950; }.sp-outcome-icon.warning { background: #fff1d1; color: #a86a00; font-size: 1rem; }.sp-call-stack { display: grid; margin: 55px 0 80px; gap: 10px; }.sp-call-stack span,.sp-call-stack strong { display: block; padding: 13px 15px; border: 1px solid rgba(255,255,255,.1); border-radius: 9px; background: rgba(255,255,255,.06); color: #b6c4d6; font-size: .65rem; }.sp-call-stack span:nth-child(2) { margin-left: 20px; }.sp-call-stack span:nth-child(3) { margin-left: 40px; }.sp-call-stack strong { margin-top: 5px; border-color: rgba(91,151,255,.45); background: rgba(23,105,232,.22); color: #fff; text-align: center; }

.sp-security { display: grid; padding: 118px clamp(22px,6vw,94px); grid-template-columns: minmax(0,.8fr) minmax(480px,1.2fr); align-items: center; gap: 90px; background: #0a1729; color: #fff; }
.sp-security-copy { max-width: 590px; }.sp-security-copy > p:not(.sp-eyebrow) { margin: 25px 0; color: #acbbcc; font-size: .86rem; line-height: 1.78; }.sp-text-link { display: inline-flex; align-items: center; gap: 10px; color: var(--sp-blue); font-size: .7rem; font-weight: 900; text-decoration: none; }.sp-text-link.light { color: #7ec1ff; }
.sp-security-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 12px; }.sp-security-grid article { display: flex; min-height: 172px; padding: 25px; align-items: flex-start; gap: 18px; border: 1px solid rgba(255,255,255,.1); border-radius: 13px; background: rgba(255,255,255,.035); }.sp-security-grid article > span { display: grid; width: 34px; height: 34px; flex: 0 0 auto; place-items: center; border: 1px solid #375276; border-radius: 9px; color: #71a8f6; font-size: .5rem; font-weight: 950; }.sp-security-grid h3 { margin: 5px 0 9px; font-size: .92rem; }.sp-security-grid p { margin: 0; color: #95a6ba; font-size: .68rem; line-height: 1.6; }

.sp-pilot { display: grid; padding: 80px clamp(22px,6vw,94px); grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 65px; border-bottom: 1px solid var(--sp-line); background: #eaf3ff; }.sp-pilot > div:first-child { max-width: 760px; }.sp-pilot p:not(.sp-eyebrow) { max-width: 700px; margin: 20px 0 0; color: var(--sp-copy); font-size: .82rem; line-height: 1.7; }.sp-pilot-actions { display: flex; gap: 10px; }

.sp-faq { display: grid; max-width: 1410px; margin: 0 auto; grid-template-columns: minmax(300px,.68fr) minmax(450px,1.32fr); gap: 100px; }.sp-faq-intro { position: sticky; top: 120px; align-self: start; }.sp-faq-intro > p:not(.sp-eyebrow) { margin: 20px 0 0; color: var(--sp-copy); font-size: .82rem; line-height: 1.7; }.sp-faq-list { border-top: 1px solid var(--sp-line); }.sp-faq-list details { border-bottom: 1px solid var(--sp-line); }.sp-faq-list summary { display: flex; min-height: 78px; padding: 22px 4px; align-items: center; justify-content: space-between; gap: 20px; color: var(--sp-ink); font-size: .86rem; font-weight: 850; cursor: pointer; list-style: none; }.sp-faq-list summary::-webkit-details-marker { display: none; }.sp-faq-list summary span { color: var(--sp-blue); font-size: 1.2rem; font-weight: 400; transition: transform 160ms ease; }.sp-faq-list details[open] summary span { transform: rotate(45deg); }.sp-faq-list details p { max-width: 680px; margin: -5px 0 25px; color: var(--sp-copy); font-size: .76rem; line-height: 1.7; }

.sp-contact { display: grid; padding: 100px clamp(22px,6vw,94px); grid-template-columns: minmax(0,1fr) minmax(330px,.6fr); align-items: end; gap: 85px; background: var(--sp-blue); color: #fff; }.sp-contact .sp-eyebrow { color: #bfe9ff; }.sp-contact > div:last-child p { margin: 0 0 26px; color: #d7e9ff; font-size: .84rem; line-height: 1.75; }.sp-button-light { background: #fff; color: var(--sp-blue); box-shadow: 0 13px 28px rgba(4,43,101,.2); }.sp-button-light:hover { background: #f1f7ff; color: var(--sp-blue-dark); }

.sp-footer { padding: 65px clamp(22px,6vw,94px) 25px; background: #06101f; color: #fff; }.sp-footer-top { display: grid; padding-bottom: 56px; grid-template-columns: 1fr auto; gap: 70px; border-bottom: 1px solid rgba(255,255,255,.1); }.footer-brand { align-self: start; color: #fff; }.footer-brand strong,.footer-brand small { display: block; }.footer-brand strong { font-size: .86rem; }.footer-brand small { margin-top: 3px; color: #7f91a9; font-size: .58rem; }.sp-footer nav { display: grid; grid-template-columns: repeat(3,130px); gap: 30px; }.sp-footer nav div { display: grid; align-content: start; gap: 11px; }.sp-footer nav strong { margin-bottom: 5px; color: #fff; font-size: .62rem; }.sp-footer nav a,.sp-footer nav div > span { color: #8596ad; font-size: .63rem; font-weight: 700; text-decoration: none; }.sp-footer nav div > span { color: #65778f; }.sp-footer nav a:hover { color: #fff; }.sp-footer-bottom { display: flex; padding-top: 22px; justify-content: space-between; color: #65778f; font-size: .55rem; font-weight: 700; letter-spacing: .04em; }

@media (min-width: 1100px) {
  .sp-hero { display: grid; min-height: 835px; grid-template-columns: minmax(470px,.82fr) minmax(650px,1.18fr); align-items: center; gap: 55px; }
  .sp-command { width: 820px; margin: 0 -230px 0 0; }
}

@media (max-width: 1099px) {
  .sp-command { width: 100%; }
  .sp-outcome-grid { grid-template-columns: repeat(2,1fr); }.sp-outcome-grid article.featured { grid-row: span 2; }
  .sp-security { grid-template-columns: 1fr; gap: 55px; }.sp-security-copy { max-width: 760px; }
}

@media (max-width: 860px) {
  .sp-header { min-height: 68px; padding: 0 20px; }.sp-menu-button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; }.sp-menu-label { font-size: .68rem; font-weight: 850; }.sp-menu-icon,.sp-menu-icon::before,.sp-menu-icon::after { display: block; width: 18px; height: 2px; border-radius: 2px; background: var(--sp-ink); }.sp-menu-icon { position: relative; }.sp-menu-icon::before,.sp-menu-icon::after { content: ""; position: absolute; left: 0; }.sp-menu-icon::before { top: -6px; }.sp-menu-icon::after { top: 6px; }.sp-menu-button[aria-expanded="true"] .sp-menu-icon { background: transparent; }.sp-menu-button[aria-expanded="true"] .sp-menu-icon::before { top: 0; transform: rotate(45deg); }.sp-menu-button[aria-expanded="true"] .sp-menu-icon::after { top: 0; transform: rotate(-45deg); }
  .sp-nav-wrap { position: absolute; top: 67px; left: 0; right: 0; display: none; padding: 20px; border-bottom: 1px solid var(--sp-line); background: #fff; box-shadow: 0 18px 35px rgba(17,42,73,.14); }.sp-nav-wrap.open { display: grid; }.sp-nav { display: grid; gap: 0; }.sp-nav a { display: flex; min-height: 48px; align-items: center; border-bottom: 1px solid #edf1f5; font-size: .78rem; }.sp-header-actions { padding-top: 16px; justify-content: space-between; }.menu-open { overflow: hidden; }
  .sp-command-body { grid-template-columns: 240px 1fr; }.sp-route-card { padding: 17px; }
  .sp-value-strip { grid-template-columns: repeat(2,1fr); }.sp-value-strip > div:nth-child(3) { border-left: 1px solid var(--sp-line); }.sp-value-strip > div { border-bottom: 1px solid var(--sp-line); }
  .sp-section { padding-top: 90px; padding-bottom: 90px; }.sp-section-heading.split { grid-template-columns: 1fr; gap: 25px; }.sp-section-heading.split > p { max-width: 660px; }
  .sp-steps { grid-template-columns: 1fr; max-width: 580px; }.sp-steps::before { display: none; }
  .sp-role-content { grid-template-columns: 1fr; gap: 38px; }.sp-role-copy { max-width: 620px; }
  .sp-pilot { grid-template-columns: 1fr; gap: 30px; }.sp-pilot-actions { flex-wrap: wrap; }
  .sp-faq { grid-template-columns: 1fr; gap: 50px; }.sp-faq-intro { position: static; }
  .sp-contact { grid-template-columns: 1fr; gap: 35px; }.sp-contact > div:last-child { max-width: 680px; }
}

@media (max-width: 620px) {
  .sp-brand-name { font-size: .8rem; }.sp-menu-label { display: none; }
  .sp-hero { min-height: 0; padding: 70px 17px 58px; }.sp-hero h1 { font-size: clamp(3rem,14vw,4.1rem); }.sp-hero h1 br { display: none; }.sp-lede { font-size: .96rem; }.sp-actions { display: grid; }.sp-actions a { width: 100%; }.sp-pilot-note { align-items: flex-start; }
  .sp-command { margin-top: 55px; border-radius: 13px; }.sp-command-body { display: block; }.sp-load-list { display: none; }.sp-route-card { padding: 14px; }.sp-route-map { height: 190px; }.sp-route-head h2 { font-size: .98rem; }.sp-exception-card { right: 8px; bottom: 8px; min-width: 202px; }.sp-timeline { margin-left: 0; margin-right: 0; }.sp-timeline > div { gap: 6px; }.sp-timeline strong { font-size: .49rem; }.sp-timeline small { font-size: .42rem; }.sp-doc-bar { padding: 9px; }.sp-doc-bar strong { max-width: 190px; line-height: 1.35; }
  .sp-value-strip { padding: 0; }.sp-value-strip > div { min-height: 82px; padding: 16px 10px; justify-content: flex-start; }.sp-value-strip > div:first-child,.sp-value-strip > div:nth-child(3) { border-left: 0; }.sp-value-strip strong { font-size: .62rem; }
  .sp-section { padding: 68px 17px; }.sp-section-heading { margin-bottom: 32px; }.sp-section-heading h2,.sp-security h2,.sp-pilot h2,.sp-contact h2,.sp-faq-intro h2 { font-size: 2.3rem; }
  .sp-workflow { padding-top: 54px; padding-bottom: 58px; }.sp-workflow .sp-section-heading { margin-bottom: 25px; }.sp-workflow .sp-section-heading h2 { font-size: 2.05rem; line-height: 1.05; }.sp-workflow .sp-section-heading > p { margin-top: 14px; font-size: .78rem; line-height: 1.55; }.sp-steps { gap: 12px; }.sp-steps li { display: grid; padding: 9px; grid-template-columns: 104px minmax(0,1fr); align-items: stretch; border-radius: 13px; }.sp-step-visual { height: auto; min-height: 150px; }.sp-step-copy { align-self: center; padding: 14px 12px; }.sp-step-copy h3 { margin: 5px 0 7px; font-size: .96rem; }.sp-step-copy p { font-size: .66rem; line-height: 1.48; }.sp-file { width: 48px; height: 61px; font-size: .54rem; }.sp-file::after { width: 13px; height: 13px; margin: -57px -42px 0 0; }.sp-input-line { right: 8px; width: 32px; height: 6px; }.sp-input-line.short { width: 23px; margin-top: 20px; }.sp-step-visual.phone > div { width: 91px; min-height: 112px; padding: 17px 9px 10px; border-width: 4px; border-radius: 15px 15px 0 0; }.sp-step-visual.phone small { font-size: .35rem; }.sp-step-visual.phone strong { margin: 6px 0 9px; font-size: .58rem; }.sp-step-visual.phone span { min-height: 27px; padding: 0 4px; text-align: center; }.sp-step-visual.flow { grid-template-columns: repeat(3,27px); gap: 4px; }.sp-flow-origin { width: 40px; height: 40px; border-radius: 11px; }.sp-step-visual.flow i { height: 13px; }.sp-step-visual.flow > span:not(.sp-flow-origin) { min-height: 25px; font-size: .4rem; }
  .sp-role-shell { margin: 0 -2px; }.sp-role-tabs { grid-template-columns: 1fr; }.sp-role-tabs button { min-height: 56px; border-right: 0; border-bottom: 1px solid rgba(255,255,255,.1); }.sp-role-tabs button[aria-selected="true"] { box-shadow: inset 3px 0 #4f91ff; }.sp-role-content { min-height: 0; padding: 24px 14px 14px; }.sp-role-preview { min-height: 340px; }.role-view { min-height: 302px; }.sp-preview-main { padding: 16px 12px; }.sp-preview-sidebar { width: 38px; padding: 17px 9px; }.sp-preview-sidebar span { width: 20px; height: 20px; }.sp-preview-title > span { display: none; }.sp-stat-row { gap: 5px; }.sp-stat-row > div { padding: 9px 7px; }.sp-queue p { grid-template-columns: 7px 53px 1fr; }.sp-queue p b { display: none; }.sp-driver-view { min-height: 330px; }.sp-customer-view { padding: 19px 10px; }.sp-viewer-route { padding: 25px 14px; grid-template-columns: 1fr 35px 1fr; }
  .sp-outcomes { padding-top: 62px; padding-bottom: 62px; }.sp-outcomes .sp-section-heading { margin-bottom: 28px; }.sp-outcome-grid { grid-template-columns: 1fr; gap: 11px; }.sp-outcome-grid article,.sp-outcome-grid article.featured { min-height: 0; grid-row: auto; border-radius: 13px; }.sp-outcome-grid article:not(.featured) { display: grid; padding: 20px; grid-template-columns: 42px minmax(0,1fr); grid-template-areas: "number number" "icon title" "icon copy"; align-items: start; column-gap: 14px; row-gap: 5px; }.sp-outcome-grid article:not(.featured) .sp-card-number { grid-area: number; margin-bottom: 7px; }.sp-outcome-grid article:not(.featured) .sp-outcome-icon { grid-area: icon; width: 40px; height: 40px; margin: 0; border-radius: 10px; }.sp-outcome-grid article:not(.featured) h3 { grid-area: title; margin: 1px 0 0; align-self: end; font-size: 1.02rem; }.sp-outcome-grid article:not(.featured) p { grid-area: copy; font-size: .68rem; line-height: 1.5; }.sp-outcome-grid article.featured { min-height: 0; padding: 24px; }.sp-outcome-grid article.featured h3 { margin-top: 24px; font-size: 1.12rem; }.sp-call-stack { margin: 28px 0 26px; gap: 7px; }.sp-call-stack span,.sp-call-stack strong { padding: 10px 12px; font-size: .58rem; }.sp-call-stack span:nth-child(2) { margin-left: 12px; }.sp-call-stack span:nth-child(3) { margin-left: 24px; }
  .sp-security { padding: 78px 17px; grid-template-columns: 1fr; }.sp-security-grid { grid-template-columns: 1fr; }.sp-security-grid article { min-height: 145px; }
  .sp-pilot { padding: 67px 17px; }.sp-pilot-actions { display: grid; }.sp-pilot-actions a { width: 100%; }
  .sp-faq { padding-left: 17px; padding-right: 17px; }.sp-faq-list summary { font-size: .78rem; }
  .sp-contact { padding: 75px 17px; }.sp-contact h2 br { display: none; }
  .sp-footer { padding: 50px 17px 22px; }.sp-footer-top { grid-template-columns: 1fr; gap: 45px; }.sp-footer nav { grid-template-columns: repeat(3,1fr); gap: 15px; }.sp-footer-bottom { align-items: flex-start; flex-direction: column; gap: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  .marketing-body *, .marketing-body *::before, .marketing-body *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}

/* Shipment Plus operations dashboard */
.dashboard-body {
  --dash-ink: #16283f;
  --dash-muted: #66758a;
  --dash-border: #e5eaf0;
  --dash-blue: #246bfe;
  --dash-blue-dark: #174fc3;
  --dash-green: #21a179;
  --dash-amber: #ee9b3a;
  --dash-red: #dd4b54;
  margin: 0;
  background: #f6f8fb;
  color: var(--dash-ink);
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.dashboard-shell {
  min-height: 100vh;
  padding: 0 28px 40px;
}

.dashboard-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  max-width: 1440px;
  min-height: 76px;
  margin: 0 auto;
  border-bottom: 1px solid var(--dash-border);
}

.dashboard-brand,
.dashboard-actions,
.dashboard-readiness,
.shipment-identity,
.shipment-progress-row,
.dashboard-queue-heading,
.panel-heading {
  display: flex;
  align-items: center;
}

.dashboard-brand { gap: 12px; width: fit-content; color: inherit; text-decoration: none; cursor: pointer; border-radius: 12px; }

.dashboard-logo {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border-radius: 12px;
  background: var(--dash-blue);
  color: #fff;
  font-size: 0.95rem;
  font-weight: 950;
  letter-spacing: -0.05em;
  text-decoration: none;
  box-shadow: 0 8px 22px rgba(36, 107, 254, 0.2);
}

.dashboard-logo span { color: #b9d2ff; }

.dashboard-eyebrow {
  margin: 0 0 3px;
  color: #77859a;
  font-size: 0.69rem;
  font-weight: 900;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.dashboard-brand strong { font-size: 0.98rem; }

.dashboard-brand:hover .dashboard-eyebrow,
.dashboard-brand:focus-visible .dashboard-eyebrow { color: var(--dash-blue); }

.dashboard-actions { gap: 8px; }

.dashboard-actions a,
.dashboard-actions button,
.dashboard-secondary-link {
  display: inline-flex;
  min-height: 40px;
  padding: 0 14px;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--dash-border);
  border-radius: 10px;
  background: #fff;
  color: #44536a;
  font: inherit;
  font-size: 0.85rem;
  font-weight: 800;
  text-decoration: none;
  cursor: pointer;
  transition: transform 150ms ease, border-color 150ms ease, box-shadow 150ms ease;
}

.dashboard-actions a:hover,
.dashboard-actions button:hover,
.dashboard-secondary-link:hover,
.shipment-work-actions a:hover,
.shipment-work-actions button:hover { transform: translateY(-1px); }

.dashboard-actions .dashboard-primary-action {
  gap: 7px;
  border-color: var(--dash-blue);
  background: var(--dash-blue);
  color: #fff;
  box-shadow: 0 8px 18px rgba(36, 107, 254, 0.17);
}

.dashboard-primary-action span { font-size: 1.25rem; font-weight: 500; }

.dashboard-welcome {
  display: flex;
  max-width: 1440px;
  margin: 0 auto;
  padding: 34px 0 24px;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.dashboard-welcome h1 {
  margin: 0;
  color: var(--dash-ink);
  font-size: clamp(2rem, 3.4vw, 3.1rem);
  line-height: 1.05;
  letter-spacing: -0.045em;
}

.dashboard-welcome > div > p:last-child {
  margin: 10px 0 0;
  color: var(--dash-muted);
  font-size: 1rem;
}

.dashboard-readiness {
  min-width: 235px;
  gap: 12px;
  padding: 12px 16px;
  border: 1px solid #dceee8;
  border-radius: 14px;
  background: #f4fbf8;
}

.dashboard-readiness > span {
  display: grid;
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 50%;
  background: var(--dash-green);
  color: #fff;
  font-weight: 950;
}

.dashboard-readiness strong,
.dashboard-readiness small { display: block; }
.dashboard-readiness strong { font-size: 0.88rem; }
.dashboard-readiness small { margin-top: 2px; color: var(--dash-muted); font-size: 0.76rem; }
.dashboard-readiness.is-attention { border-color: #f4e0c6; background: #fff9f1; }
.dashboard-readiness.is-attention > span { background: var(--dash-amber); }
.dashboard-readiness.is-critical { border-color: #f0d4d6; background: #fff6f6; }
.dashboard-readiness.is-critical > span { background: var(--dash-red); }

.dashboard-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  max-width: 1440px;
  margin: 0 auto 18px;
  gap: 12px;
}

.dashboard-metric {
  display: grid;
  min-height: 112px;
  padding: 17px 18px;
  align-content: center;
  justify-items: start;
  border: 1px solid var(--dash-border);
  border-radius: 14px;
  background: #fff;
  color: var(--dash-ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
  box-shadow: 0 7px 22px rgba(40, 62, 91, 0.035);
}

.dashboard-metric:hover,
.dashboard-metric.is-active { border-color: #b8cdfb; box-shadow: 0 9px 25px rgba(36, 107, 254, 0.09); }
.dashboard-metric.is-active { box-shadow: inset 0 3px 0 var(--dash-blue), 0 9px 25px rgba(36, 107, 254, 0.09); }
.dashboard-metric > span { color: var(--dash-muted); font-size: 0.75rem; font-weight: 850; text-transform: uppercase; letter-spacing: 0.055em; }
.dashboard-metric strong { margin-top: 5px; font-size: 2rem; line-height: 1; }
.dashboard-metric small { margin-top: 6px; color: #8b97a8; font-size: 0.75rem; }

.dashboard-workspace {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 330px;
  max-width: 1440px;
  margin: 0 auto;
  align-items: start;
  gap: 14px;
}

.dashboard-panel {
  min-width: 0;
  padding: 18px;
  border: 1px solid var(--dash-border);
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 8px 24px rgba(40, 62, 91, 0.035);
}

.dashboard-queue-panel { padding: 0; overflow: hidden; }

.dashboard-queue-heading {
  justify-content: space-between;
  gap: 18px;
  padding: 20px 20px 15px;
}

.dashboard-queue-heading h2,
.panel-heading h2 {
  margin: 0;
  color: var(--dash-ink);
  font-size: 1.06rem;
}

.dashboard-search {
  display: flex;
  width: min(310px, 42vw);
  min-height: 40px;
  padding: 0 12px;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--dash-border);
  border-radius: 10px;
  background: #f8fafc;
  color: #8190a4;
}

.dashboard-search input {
  width: 100%;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--dash-ink);
  font: inherit;
  font-size: 0.83rem;
}

.dashboard-filter-row {
  display: flex;
  padding: 0 20px;
  gap: 4px;
  overflow-x: auto;
  border-bottom: 1px solid var(--dash-border);
}

.dashboard-filter-row button {
  display: flex;
  min-height: 43px;
  padding: 0 10px;
  align-items: center;
  gap: 6px;
  border: 0;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: #78869a;
  font: inherit;
  font-size: 0.78rem;
  font-weight: 800;
  white-space: nowrap;
  cursor: pointer;
}

.dashboard-filter-row button span {
  min-width: 20px;
  padding: 2px 6px;
  border-radius: 999px;
  background: #edf1f5;
  color: #66758a;
  font-size: 0.67rem;
  text-align: center;
}

.dashboard-filter-row button.is-active { border-bottom-color: var(--dash-blue); color: var(--dash-blue); }
.dashboard-filter-row button.is-active span { background: #eaf1ff; color: var(--dash-blue); }

.shipment-queue { display: grid; gap: 10px; padding: 14px; }

.shipment-work-card {
  display: grid;
  grid-template-columns: 4px minmax(0, 1fr) auto;
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--dash-border);
  border-radius: 12px;
  background: #fff;
}

.shipment-work-accent { background: #9eabbc; }
.tone-critical .shipment-work-accent { background: var(--dash-red); }
.tone-attention .shipment-work-accent,
.tone-documents .shipment-work-accent,
.tone-waiting .shipment-work-accent { background: var(--dash-amber); }
.tone-ready .shipment-work-accent,
.tone-on-track .shipment-work-accent { background: var(--dash-green); }

.shipment-work-main { min-width: 0; padding: 15px 16px; }
.shipment-work-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.shipment-identity { gap: 10px; min-width: 0; }
.shipment-identity h3 { margin: 0; color: var(--dash-ink); font-size: 0.98rem; }
.shipment-identity p { margin: 3px 0 0; color: var(--dash-muted); font-size: 0.76rem; }
.state-badge { padding: 5px 8px; border-radius: 999px; background: #eef1f5; color: #627086; font-size: 0.65rem; font-weight: 900; white-space: nowrap; }
.tone-critical .state-badge { background: #ffeaeb; color: #bd2f39; }
.tone-attention .state-badge,
.tone-documents .state-badge,
.tone-waiting .state-badge { background: #fff1db; color: #a96410; }
.tone-ready .state-badge,
.tone-on-track .state-badge { background: #e5f6ef; color: #177a5b; }
.shipment-updated { flex: 0 0 auto; color: #8b97a8; font-size: 0.7rem; }

.shipment-route-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) minmax(130px, 0.7fr);
  margin-top: 15px;
  padding: 12px 0;
  align-items: center;
  gap: 10px;
  border-top: 1px solid #eef1f5;
  border-bottom: 1px solid #eef1f5;
}

.shipment-route-row div { min-width: 0; }
.shipment-route-row span:not(.route-arrow),
.shipment-progress-row span { display: block; margin-bottom: 3px; color: #8a97a8; font-size: 0.65rem; font-weight: 850; text-transform: uppercase; letter-spacing: 0.045em; }
.shipment-route-row strong { display: block; overflow: hidden; color: #3c4c62; font-size: 0.77rem; text-overflow: ellipsis; white-space: nowrap; }
.route-arrow { color: #9dabbc; }
.shipment-driver { padding-left: 12px; border-left: 1px solid #eef1f5; }

.shipment-progress-row { margin-top: 12px; gap: 10px; }
.shipment-progress-row > div:first-child { min-width: 105px; }
.shipment-progress-row strong { display: block; color: #45556b; font-size: 0.73rem; }
.shipment-progress-row small { min-width: 145px; color: #748196; font-size: 0.69rem; text-align: right; }
.mini-progress { flex: 1; height: 5px; overflow: hidden; border-radius: 99px; background: #e9edf2; }
.mini-progress span { display: block; height: 100%; border-radius: inherit; background: var(--dash-blue); }

.shipment-next-step {
  display: flex;
  margin-top: 12px;
  padding: 10px;
  align-items: center;
  gap: 9px;
  border-radius: 9px;
  background: #f7f9fb;
}

.shipment-next-step > span { display: grid; width: 25px; height: 25px; flex: 0 0 auto; place-items: center; border-radius: 50%; background: #e7edf4; color: #607086; font-size: 0.72rem; font-weight: 950; }
.tone-critical .shipment-next-step { background: #fff6f6; }
.tone-critical .shipment-next-step > span { background: #ffe1e3; color: #bd2f39; }
.tone-ready .shipment-next-step { background: #f1faf6; }
.tone-ready .shipment-next-step > span { background: #dff3ea; color: #177a5b; }
.shipment-next-step strong { display: block; color: #34445a; font-size: 0.76rem; }
.shipment-next-step p { margin: 2px 0 0; color: #738096; font-size: 0.69rem; line-height: 1.35; }

.shipment-work-actions {
  display: grid;
  width: 142px;
  padding: 16px;
  align-content: center;
  gap: 8px;
  border-left: 1px solid var(--dash-border);
  background: #fbfcfd;
}

.shipment-work-actions button,
.shipment-work-actions a {
  display: inline-flex;
  min-height: 38px;
  padding: 0 10px;
  align-items: center;
  justify-content: center;
  border: 1px solid #dce3eb;
  border-radius: 9px;
  background: #fff;
  color: #526177;
  font: inherit;
  font-size: 0.72rem;
  font-weight: 850;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: transform 150ms ease, box-shadow 150ms ease;
}

.shipment-work-actions .shipment-primary-button { border-color: var(--dash-blue); background: var(--dash-blue); color: #fff; box-shadow: 0 6px 14px rgba(36, 107, 254, 0.15); }

.dashboard-sidebar { display: grid; gap: 14px; }
.dashboard-sidebar .dashboard-panel { display: grid; gap: 12px; }
.panel-heading { justify-content: space-between; gap: 12px; }
.panel-heading > span,
.panel-heading > strong { color: var(--dash-blue); font-size: 0.9rem; }
.dashboard-progress-track { height: 8px; overflow: hidden; border-radius: 99px; background: #edf1f5; }
.dashboard-progress-track span { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--dash-blue), #5d92ff); transition: width 350ms ease; }
.dashboard-progress-panel > p { margin: 0; color: var(--dash-muted); font-size: 0.76rem; line-height: 1.5; }

.compact-list { display: grid; gap: 7px; }
.dashboard-list-item {
  display: flex;
  gap: 9px;
  padding: 10px 0;
  border: 0;
  border-bottom: 1px solid #eef1f5;
  border-radius: 0;
  background: transparent;
}
.dashboard-list-item:last-child { border-bottom: 0; }
.list-dot { width: 7px; height: 7px; margin-top: 5px; flex: 0 0 auto; border-radius: 50%; background: #9aa7b7; }
.dashboard-list-item.tone-ready .list-dot { background: var(--dash-green); }
.dashboard-list-item.tone-attention .list-dot { background: var(--dash-amber); }
.dashboard-list-item > div { display: grid; min-width: 0; gap: 2px; }
.dashboard-list-item strong { overflow: hidden; color: #34445a; font-size: 0.76rem; text-overflow: ellipsis; white-space: nowrap; }
.dashboard-list-item div > span { overflow: hidden; color: #718095; font-size: 0.71rem; text-overflow: ellipsis; white-space: nowrap; }
.dashboard-list-item small { color: #9aa5b4; font-size: 0.66rem; }

.dashboard-empty {
  display: flex;
  min-height: 94px;
  padding: 18px;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border: 1px dashed #dbe2e9;
  border-radius: 11px;
  background: #fafcfd;
  color: var(--dash-muted);
  text-align: left;
}
.dashboard-empty > span { display: grid; width: 30px; height: 30px; place-items: center; border-radius: 50%; background: #e4f5ed; color: var(--dash-green); font-weight: 950; }
.dashboard-empty strong,
.dashboard-empty small { display: block; }
.dashboard-empty strong { color: #425268; font-size: 0.82rem; }
.dashboard-empty small { margin-top: 3px; color: #8995a5; font-size: 0.71rem; }

.dashboard-settings-panel summary { color: #536278; font-size: 0.8rem; font-weight: 850; cursor: pointer; }
.dashboard-settings-panel[open] summary { margin-bottom: 14px; }
.settings-list { display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: 8px; margin: 0 0 14px; }
.settings-list dt { color: #8a97a8; font-size: 0.68rem; font-weight: 850; text-transform: uppercase; }
.settings-list dd { margin: 0; overflow-wrap: anywhere; color: #44536a; font-size: 0.74rem; font-weight: 750; }
.dashboard-settings-panel .dashboard-secondary-link { width: 100%; }

.dashboard-toast {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 10;
  max-width: min(360px, calc(100vw - 32px));
  padding: 12px 15px;
  border-radius: 10px;
  background: #18304d;
  color: #fff;
  font-size: 0.8rem;
  font-weight: 750;
  box-shadow: 0 14px 34px rgba(13, 32, 56, 0.24);
}

.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;
}

@media (max-width: 980px) {
  .dashboard-workspace { grid-template-columns: 1fr; }
  .dashboard-sidebar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dashboard-settings-panel { grid-column: 1 / -1; }
}

@media (max-width: 720px) {
  .dashboard-shell { padding: 0 12px 28px; }
  .dashboard-header { min-height: 68px; }
  .dashboard-brand .dashboard-eyebrow { display: none; }
  .dashboard-brand strong { max-width: 135px; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .dashboard-actions a:not(.dashboard-primary-action) { display: none; }
  .dashboard-actions a,
  .dashboard-actions button { min-height: 38px; padding: 0 10px; }
  .dashboard-welcome { align-items: stretch; flex-direction: column; padding: 26px 2px 20px; }
  .dashboard-welcome h1 { font-size: 2rem; }
  .dashboard-readiness { min-width: 0; }
  .dashboard-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dashboard-metric { min-height: 96px; padding: 14px; }
  .dashboard-metric strong { font-size: 1.7rem; }
  .dashboard-queue-heading { align-items: stretch; flex-direction: column; }
  .dashboard-search { width: auto; }
  .shipment-work-card { grid-template-columns: 4px minmax(0, 1fr); }
  .shipment-work-actions { grid-column: 2; grid-template-columns: repeat(2, minmax(0, 1fr)); width: auto; padding: 0 16px 15px; border: 0; background: #fff; }
  .shipment-route-row { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); }
  .shipment-driver { grid-column: 1 / -1; padding: 9px 0 0; border-top: 1px solid #eef1f5; border-left: 0; }
  .shipment-progress-row { align-items: flex-start; flex-wrap: wrap; }
  .shipment-progress-row .mini-progress { min-width: 100px; margin-top: 7px; }
  .shipment-progress-row small { width: 100%; text-align: left; }
  .dashboard-sidebar { grid-template-columns: 1fr; }
  .dashboard-settings-panel { grid-column: auto; }
}

@media (prefers-reduced-motion: reduce) {
  .dashboard-body * { scroll-behavior: auto !important; transition: none !important; }
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  background:
    radial-gradient(circle at top right, rgba(255, 43, 43, 0.18), transparent 32rem),
    linear-gradient(155deg, #050608, #10141b 58%, #07090d);
  color: var(--text);
}

button,
input,
select,
textarea {
  font: inherit;
}

button {
  border: 0;
  border-radius: 8px;
  color: var(--text);
  cursor: pointer;
}

::view-transition-group(*),
::view-transition-old(*),
::view-transition-new(*) {
  animation-duration: 0.25s;
  animation-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
}

.platform-shell {
  width: min(100%, 1180px);
  min-height: 100vh;
  margin: 0 auto;
  background: var(--bg);
  box-shadow: 0 0 50px rgba(0, 0, 0, 0.45);
  position: relative;
  overflow-x: hidden;
}

.hero {
  min-height: 320px;
  position: relative;
  padding: 18px 16px 16px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
}

.hero-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 68% center;
  opacity: 0.62;
}

.hero-shade {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(4, 5, 8, 0.5), rgba(4, 5, 8, 0.72) 52%, #07090d),
    linear-gradient(90deg, rgba(4, 5, 8, 0.94), transparent);
}

.topbar,
.load-card {
  position: relative;
  z-index: 1;
}

.topbar {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
}

.eyebrow,
.label {
  margin: 0 0 4px;
  color: var(--red);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: uppercase;
}

h1,
h2,
h3,
p {
  margin-top: 0;
}

h1 {
  margin-bottom: 0;
  font-size: 1.48rem;
  line-height: 1.05;
}

h2 {
  margin-bottom: 4px;
  font-size: 1.85rem;
}

h3 {
  margin-bottom: 6px;
  font-size: 1.05rem;
}

.muted {
  margin-bottom: 0;
  color: var(--muted);
  font-size: 0.84rem;
  line-height: 1.35;
}

.icon-button {
  width: 86px;
  height: 40px;
  border: 1px solid var(--line);
  background: rgba(9, 12, 17, 0.76);
  font-weight: 800;
}

.ref-button {
  color: #ffd8d8;
  border-color: rgba(255, 43, 43, 0.36);
  background: rgba(255, 43, 43, 0.13);
  font-size: 0.78rem;
}

.load-card {
  padding: 14px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-left: 3px solid var(--red);
  border-radius: 8px;
  background: rgba(9, 12, 17, 0.84);
  backdrop-filter: blur(10px);
}

.owner-load-card {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 16px;
}

.hero-status-stack {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.status-pill {
  display: inline-flex;
  min-height: 30px;
  align-items: center;
  margin-top: 10px;
  padding: 6px 10px;
  border: 1px solid rgba(255, 43, 43, 0.42);
  border-radius: 999px;
  background: rgba(255, 43, 43, 0.14);
  color: #ffd8d8;
  font-size: 0.74rem;
  font-weight: 800;
}

.status-pill.quiet {
  border-color: rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.08);
  color: var(--text);
}

.status-pill.small {
  margin-top: 0;
  font-size: 0.68rem;
}

.workspace {
  padding: 0 14px 26px;
}

.privacy-strip,
.verification-card,
.next-action,
.hos-card,
.owner-card {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(23, 29, 38, 0.94), rgba(13, 17, 24, 0.94));
}

.privacy-strip {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 13px;
  margin-top: -18px;
  position: relative;
  z-index: 2;
}

.privacy-strip p {
  margin: 3px 0 0;
  color: var(--muted);
  font-size: 0.76rem;
  line-height: 1.35;
}

.role-switch {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  margin: 14px 0;
  padding: 5px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #0b0f15;
}

.role-tab {
  min-height: 42px;
  background: transparent;
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 850;
}

.role-tab.active {
  background: #202734;
  color: var(--text);
}

.platform-shell.solo-mode .role-switch,
.platform-shell.solo-mode .driver-phone-row,
.platform-shell.solo-mode .dispatcher-card,
.platform-shell.solo-mode #driverView {
  display: none;
}

.platform-shell.solo-mode #ownerView {
  display: block;
}

.pulse-dot {
  width: 11px;
  height: 11px;
  margin-top: 5px;
  border-radius: 50%;
  background: var(--warn);
  box-shadow: 0 0 0 6px rgba(249, 178, 78, 0.13);
  flex: 0 0 auto;
}

.pulse-dot.live {
  background: var(--good);
  box-shadow: 0 0 0 6px rgba(50, 213, 131, 0.13);
}

.summary-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 14px 0;
}

.summary-grid div {
  min-height: 74px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #0d1118;
}

.summary-grid span {
  display: block;
  margin-bottom: 6px;
  color: var(--steel);
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
}

.summary-grid strong {
  font-size: 0.94rem;
}

.verification-card {
  display: grid;
  gap: 12px;
  padding: 14px;
  margin-bottom: 14px;
}

input,
select,
textarea {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #080b10;
  color: var(--text);
}

input,
select {
  height: 44px;
  padding: 0 12px;
}

textarea {
  width: 100%;
  min-height: 92px;
  padding: 12px;
  resize: vertical;
}

.chip-entry {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
}

.chip-entry button {
  min-width: 68px;
  background: #202734;
  color: var(--text);
  font-size: 0.78rem;
  font-weight: 850;
}

.view-panel {
  display: none;
}

.view-panel.active {
  display: block;
}

.owner-grid {
  display: grid;
  gap: 12px;
}

.owner-card {
  padding: 14px;
}

.owner-form {
  display: grid;
  gap: 12px;
}

.owner-form label {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 800;
}

.owner-form button,
.cockpit-grid button {
  min-height: 42px;
  background: linear-gradient(180deg, var(--red), var(--red-dark));
  font-weight: 850;
}

.viewer-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  min-height: 32px;
}

.owner-form .chip-entry button {
  min-height: 44px;
  background: #202734;
  color: var(--text);
}

.viewer-empty {
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.35;
}

.viewer-chip {
  display: inline-flex;
  min-width: 0;
  max-width: 100%;
  align-items: center;
  gap: 8px;
  padding: 7px 8px 7px 10px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 999px;
  background: #202734;
  color: var(--text);
  font-size: 0.76rem;
  font-weight: 800;
}

.viewer-chip span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.viewer-chip button {
  display: grid;
  width: 20px;
  height: 20px;
  min-height: 0;
  place-items: center;
  padding: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1;
}

.cockpit-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.cockpit-grid button {
  padding: 0 10px;
  border: 1px solid rgba(255, 43, 43, 0.36);
  font-size: 0.76rem;
}

.owner-operator-note {
  display: grid;
  gap: 4px;
  margin-top: 12px;
  padding: 12px;
  border: 1px solid rgba(50, 213, 131, 0.24);
  border-radius: 8px;
  background: rgba(50, 213, 131, 0.09);
}

.owner-operator-note span {
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.35;
}

.owner-operator-note.off {
  border-color: rgba(255, 255, 255, 0.14);
  background: #0d1118;
}

.health-list {
  display: grid;
  gap: 8px;
}

.health-list div {
  display: flex;
  min-height: 44px;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #0d1118;
}

.health-list span {
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 800;
}

.health-list strong {
  font-size: 0.82rem;
  text-align: right;
}

.health-strip {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #0d1118;
}

.health-strip div {
  display: grid;
  min-height: 58px;
  align-content: center;
  border: 0;
  border-right: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
}

.health-strip div:last-child {
  border-right: 0;
}

.section-heading button,
.hos-card button,
.modal-actions button:last-child,
.doc-upload {
  background: linear-gradient(180deg, var(--red), var(--red-dark));
  font-weight: 850;
}

.tabs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  margin-bottom: 12px;
  padding: 5px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #0b0f15;
}

.tab {
  min-height: 38px;
  background: transparent;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 800;
}

.tab.active {
  background: #202734;
  color: var(--text);
}

.tab-panel {
  display: none;
}

.tab-panel.active {
  display: block;
}

.next-action {
  padding: 14px;
  margin-bottom: 12px;
}

.action-list,
.doc-list,
.timeline {
  display: grid;
  gap: 10px;
  padding: 0;
  margin: 0;
}

.action-card,
.doc-card,
.timeline li {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
}

.action-card {
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: 12px;
  width: 100%;
  min-height: 78px;
  padding: 13px;
  text-align: left;
}

.step-number {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #252d3a;
  color: var(--muted);
  font-weight: 900;
}

.action-card.current {
  border-color: rgba(255, 43, 43, 0.5);
  background: linear-gradient(135deg, rgba(255, 43, 43, 0.2), #111720);
}

.action-card.current .step-number {
  background: var(--red);
  color: white;
}

.action-card.complete {
  min-height: 52px;
  padding: 9px 11px;
  opacity: 0.76;
  grid-template-columns: 30px 1fr;
}

.action-card.complete .step-number {
  width: 30px;
  height: 30px;
  background: rgba(50, 213, 131, 0.18);
  color: var(--good);
  font-size: 0.68rem;
}

.action-card.complete span span {
  display: none;
}

.action-card strong,
.doc-card strong {
  display: block;
  margin-bottom: 4px;
}

.action-card span,
.doc-card span {
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.35;
}

.secondary-actions {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-top: 12px;
}

.secondary-actions button,
.modal-actions button:first-child,
.undo-button {
  min-height: 42px;
  border: 1px solid var(--line);
  background: #111720;
  color: var(--text);
  font-size: 0.76rem;
  font-weight: 800;
}

.undo-button {
  width: 100%;
  margin-top: 10px;
  color: #ffd8d8;
  border-color: rgba(255, 43, 43, 0.26);
}

.undo-button[hidden] {
  display: none;
}

.section-heading {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.section-heading button,
.hos-card button {
  min-height: 40px;
  padding: 0 14px;
}

.doc-card {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 13px;
}

.submitted-docs {
  margin-top: 12px;
  padding: 13px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #0d1118;
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.35;
}

.doc-status {
  display: inline-flex;
  min-width: 86px;
  justify-content: center;
  padding: 7px 9px;
  border-radius: 999px;
  background: #222a36;
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 900;
}

.doc-status.sent {
  background: rgba(50, 213, 131, 0.15);
  color: var(--good);
}

.hos-card {
  display: grid;
  gap: 12px;
  padding: 14px;
}

.hos-card label {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 800;
}

.toggle-row {
  grid-template-columns: 1fr auto;
  align-items: center;
}

.toggle-row input {
  width: 22px;
  height: 22px;
  accent-color: var(--red);
}

.timeline {
  list-style: none;
}

.timeline li {
  padding: 12px 12px 12px 38px;
  position: relative;
}

.timeline li::before {
  content: "";
  position: absolute;
  left: 14px;
  top: 17px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--red);
  box-shadow: 0 0 0 5px rgba(255, 43, 43, 0.14);
}

.timeline time {
  display: block;
  color: var(--steel);
  font-size: 0.7rem;
  font-weight: 850;
  text-transform: uppercase;
}

.timeline strong {
  display: block;
  margin: 3px 0;
}

.timeline span {
  color: var(--muted);
  font-size: 0.78rem;
}

.timeline.compact {
  max-height: 320px;
  overflow: auto;
}

.modal {
  position: fixed;
  inset: 0;
  display: none;
  place-items: end center;
  padding: 16px;
  background: rgba(0, 0, 0, 0.66);
  z-index: 20;
}

.modal.open {
  display: grid;
}

.modal-card {
  width: min(100%, 398px);
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #10141b;
  box-shadow: 0 -20px 50px rgba(0, 0, 0, 0.45);
}

.reason-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  margin: 14px 0;
}

.reason-grid button {
  min-height: 38px;
  border: 1px solid var(--line);
  background: #171d26;
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 800;
}

.reason-grid button.selected {
  border-color: rgba(255, 43, 43, 0.62);
  background: rgba(255, 43, 43, 0.14);
  color: #ffd8d8;
}

.modal-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 12px;
}

.modal-actions button {
  min-height: 44px;
}

@media (min-width: 740px) {
  body {
    padding: 28px 0;
  }

  .platform-shell {
    min-height: calc(100vh - 56px);
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 18px;
    overflow: hidden;
  }

  .platform-hero {
    min-height: 360px;
    padding: 24px;
  }

  .workspace {
    padding: 0 24px 28px;
  }

  .summary-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .owner-grid {
    grid-template-columns: minmax(280px, 0.9fr) minmax(280px, 1fr);
    align-items: start;
  }

  .solo-mode .owner-grid {
    grid-template-columns: minmax(320px, 0.85fr) minmax(320px, 1.15fr);
  }

  .activity-card {
    grid-column: 1 / -1;
  }

  #driverView {
    max-width: 430px;
    margin: 0 auto;
  }
}

@media (min-width: 1040px) {
  .owner-grid {
    grid-template-columns: 1fr 1fr 1fr;
  }

  .solo-mode .owner-grid {
    grid-template-columns: minmax(340px, 0.78fr) minmax(460px, 1fr);
  }

  .dispatch-card {
    grid-row: span 2;
  }

  .activity-card {
    grid-column: span 2;
  }
}

@media (max-width: 520px) {
  .owner-load-card {
    display: block;
  }

  .hero-status-stack {
    justify-content: flex-start;
  }

  .cockpit-grid {
    grid-template-columns: 1fr;
  }

  .health-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .health-strip div:nth-child(2) {
    border-right: 0;
  }

  .health-strip div:nth-child(-n + 2) {
    border-bottom: 1px solid var(--line);
  }
}

/* Condensed shipment setup screen */
:root {
  --simple-bg: #111211;
  --simple-card: #151615;
  --simple-field: #292a28;
  --simple-tile: #292a28;
  --simple-line: rgba(255, 255, 255, 0.12);
  --simple-text: #f7f7f5;
  --simple-muted: #a7a29b;
  --simple-red: #d8413b;
  --simple-red-dark: #52100f;
}

body {
  background: #0c0d0c;
}

.setup-shell {
  width: min(100%, 756px);
  min-height: 100vh;
  margin: 0 auto;
  padding: 6px;
  background: #0c0d0c;
  color: var(--simple-text);
}

.setup-card {
  min-height: calc(100vh - 12px);
  padding: 34px 32px 30px;
  border-radius: 18px;
  background: var(--simple-card);
}

.setup-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 34px;
}

.title-row {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 14px;
}

.truck-icon {
  color: #ff7770;
  font-size: 2rem;
  line-height: 1;
}

.setup-header h1 {
  margin: 0;
  font-size: clamp(1.75rem, 5vw, 2.12rem);
  line-height: 1.05;
}

.setup-header .ref-button {
  width: auto;
  height: auto;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--simple-muted);
  font-size: 1.42rem;
  font-weight: 500;
}

.driver-toggle-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 18px;
  min-height: 112px;
  margin-bottom: 34px;
  padding: 24px 24px 24px 26px;
  border-radius: 14px;
  background: var(--simple-red-dark);
  cursor: pointer;
}

.driver-toggle-card strong,
.driver-toggle-card em {
  display: block;
  font-style: normal;
}

.driver-toggle-card strong {
  margin-bottom: 4px;
  color: #ff8c86;
  font-size: clamp(1.48rem, 4.4vw, 1.78rem);
  line-height: 1.05;
}

.driver-toggle-card em {
  color: #ff8c86;
  font-size: clamp(1.08rem, 3.5vw, 1.46rem);
}

.switch {
  position: relative;
  display: block;
  width: 84px;
  height: 48px;
  border-radius: 999px;
  background: var(--simple-red);
}

.switch input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.switch span {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: white;
  transition: transform 0.2s ease;
}

.switch input:not(:checked) + span {
  transform: translateX(-36px);
}

.setup-shell:not(.solo-mode) .driver-toggle-card {
  background: #242524;
}

.setup-shell:not(.solo-mode) .driver-toggle-card strong,
.setup-shell:not(.solo-mode) .driver-toggle-card em {
  color: var(--simple-text);
}

.setup-shell:not(.solo-mode) .switch {
  background: #4a4b48;
}

.field-stack {
  display: grid;
  gap: 8px;
  margin-bottom: 26px;
}

.field-stack label,
.share-section h2 {
  color: var(--simple-muted);
  font-size: clamp(1.12rem, 3.4vw, 1.48rem);
  font-weight: 500;
}

.field-stack label span {
  display: block;
  margin-bottom: 8px;
}

.field-stack input,
.add-viewer-row input {
  width: 100%;
  height: 72px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 10px;
  background: var(--simple-field);
  color: var(--simple-text);
  font-size: clamp(1.35rem, 4.8vw, 2rem);
}

.driver-phone-row {
  margin-top: 16px;
}

.solo-mode .driver-phone-row {
  display: none;
}

.field-note {
  margin: 0;
  color: var(--simple-muted);
  font-size: clamp(1rem, 3.2vw, 1.32rem);
}

.share-section {
  margin: 26px 0 32px;
}

.share-section h2 {
  margin: 0 0 12px;
}

.viewer-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  min-height: 54px;
}

.viewer-chip {
  display: inline-flex;
  min-height: 54px;
  align-items: center;
  gap: 10px;
  padding: 0 24px;
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 999px;
  background: #2a2b29;
  color: var(--simple-text);
  font-size: clamp(1.02rem, 3.6vw, 1.5rem);
  font-weight: 500;
}

.viewer-chip span {
  color: var(--simple-text);
  font-size: 1.35rem;
}

.add-chip {
  background: transparent;
}

.add-viewer-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  margin-top: 12px;
}

.add-viewer-row[hidden] {
  display: none;
}

.add-viewer-row input {
  height: 52px;
  font-size: 1.05rem;
}

.add-viewer-row button {
  min-width: 86px;
  border: 1px solid rgba(255, 255, 255, 0.13);
  background: #2a2b29;
  font-weight: 800;
}

.primary-action {
  width: 100%;
  min-height: 84px;
  margin-bottom: 18px;
  background: var(--simple-red);
  color: white;
  font-size: clamp(1.3rem, 4vw, 1.75rem);
  font-weight: 850;
}

.primary-action:disabled {
  cursor: default;
  background: #343532;
  color: var(--simple-muted);
}

.status-line {
  min-height: 22px;
  margin-bottom: 12px;
  color: var(--simple-muted);
  font-size: 1rem;
  text-align: center;
}

.completed-steps {
  display: flex;
  min-height: 34px;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-bottom: 24px;
}

.completed-steps span {
  padding: 6px 10px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  color: var(--simple-muted);
  font-size: 0.78rem;
  font-weight: 800;
}

.health-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  padding-top: 32px;
  border: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.11);
  border-radius: 0;
  background: transparent;
}

.health-strip div {
  display: grid;
  min-height: 104px;
  place-items: center;
  align-content: center;
  gap: 12px;
  padding: 12px;
  border: 0;
  border-radius: 12px;
  background: var(--simple-tile);
}

.health-icon {
  color: var(--simple-muted);
  font-size: 1.75rem;
  line-height: 1;
}

.health-strip strong {
  color: var(--simple-muted);
  font-size: clamp(0.95rem, 3.2vw, 1.35rem);
  font-weight: 500;
  text-align: center;
}

.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;
}

@media (max-width: 560px) {
  .setup-shell {
    padding: 0;
  }

  .setup-card {
    min-height: 100vh;
    padding: 24px 18px;
    border-radius: 0;
  }

  .setup-header {
    margin-bottom: 24px;
  }

  .driver-toggle-card {
    min-height: 96px;
    padding: 18px;
  }

  .switch {
    width: 68px;
    height: 40px;
  }

  .switch span {
    top: 7px;
    right: 7px;
    width: 26px;
    height: 26px;
  }

  .switch input:not(:checked) + span {
    transform: translateX(-28px);
  }

  .field-stack input {
    height: 58px;
  }

  .primary-action {
    min-height: 72px;
  }

  .health-strip {
    gap: 10px;
  }
}

/* Compact single-card mobile pass */
.setup-shell {
  width: min(100%, 430px);
  min-height: 100vh;
  padding: 8px;
  display: grid;
  align-items: stretch;
}

.setup-card {
  min-height: calc(100vh - 16px);
  padding: 16px;
  border: 1px solid rgba(255, 255, 255, 0.11);
  border-radius: 16px;
  display: grid;
  grid-template-rows: auto auto auto auto auto auto auto;
  align-content: start;
}

.setup-header {
  gap: 10px;
  margin-bottom: 14px;
}

.title-row {
  gap: 9px;
}

.truck-icon {
  font-size: 1.24rem;
}

.setup-header h1 {
  font-size: 1.34rem;
}

.setup-header .ref-button {
  font-size: 0.92rem;
}

.driver-toggle-card {
  min-height: 66px;
  margin-bottom: 12px;
  padding: 12px;
  gap: 10px;
}

.driver-toggle-card strong {
  margin-bottom: 2px;
  font-size: 1.02rem;
}

.driver-toggle-card em {
  font-size: 0.82rem;
}

.switch {
  width: 54px;
  height: 32px;
}

.switch span {
  top: 5px;
  right: 5px;
  width: 22px;
  height: 22px;
}

.switch input:not(:checked) + span {
  transform: translateX(-22px);
}

.field-stack {
  gap: 5px;
  margin-bottom: 12px;
}

.field-stack label,
.share-section h2 {
  font-size: 0.88rem;
}

.field-stack label span {
  margin-bottom: 5px;
}

.field-stack input,
.add-viewer-row input {
  height: 44px;
  font-size: 1rem;
}

.rate-confirm-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  margin: 6px 0;
  padding: 10px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  background: #242522;
}

.rate-confirm-card strong,
.rate-confirm-card span {
  display: block;
}

.rate-confirm-card strong {
  color: var(--simple-text);
  font-size: 0.88rem;
}

.rate-confirm-card span {
  margin-top: 2px;
  color: var(--simple-muted);
  font-size: 0.74rem;
  line-height: 1.25;
}

.rate-confirm-actions {
  display: flex;
  gap: 6px;
}

.rate-confirm-actions button {
  min-height: 34px;
  padding: 0 10px;
  border: 1px solid rgba(255, 255, 255, 0.13);
  background: #30312e;
  color: var(--simple-text);
  font-size: 0.76rem;
  font-weight: 800;
}

.address-confirm-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  margin: 5px 0;
  padding: 10px;
  border: 1px solid rgba(216, 65, 59, 0.34);
  border-radius: 10px;
  background: rgba(216, 65, 59, 0.1);
}

.address-confirm-card[hidden] {
  display: none;
}

.address-confirm-card strong,
.address-confirm-card span {
  display: block;
}

.address-confirm-card strong {
  color: #ff8c86;
  font-size: 0.88rem;
}

.address-confirm-card span {
  margin-top: 2px;
  color: var(--simple-muted);
  font-size: 0.74rem;
  line-height: 1.25;
}

.address-confirm-actions {
  display: flex;
  gap: 6px;
}

.address-confirm-actions button {
  min-height: 34px;
  padding: 0 10px;
  border: 1px solid rgba(255, 255, 255, 0.13);
  background: #30312e;
  color: var(--simple-text);
  font-size: 0.76rem;
  font-weight: 800;
}

.driver-phone-row {
  margin-top: 8px;
}

.field-note {
  font-size: 0.76rem;
}

.share-section {
  margin: 10px 0 12px;
}

.share-section h2 {
  margin-bottom: 7px;
}

.viewer-chips {
  gap: 7px;
  min-height: 36px;
}

.viewer-chip {
  min-height: 34px;
  padding: 0 11px;
  gap: 6px;
  font-size: 0.78rem;
}

.viewer-chip span {
  font-size: 0.68rem;
  color: var(--simple-muted);
}

.add-viewer-row {
  gap: 7px;
  margin-top: 8px;
}

.add-viewer-row input {
  height: 40px;
  font-size: 0.9rem;
}

.add-viewer-row button {
  min-width: 68px;
}

.primary-action {
  min-height: 58px;
  margin-bottom: 9px;
  font-size: 1.12rem;
}

.status-line {
  min-height: 18px;
  margin-bottom: 8px;
  font-size: 0.82rem;
}

.completed-steps {
  min-height: 28px;
  max-height: 62px;
  overflow: auto;
  gap: 6px;
  margin-bottom: 10px;
}

.completed-steps:empty {
  display: none;
}

.completed-steps span {
  padding: 5px 8px;
  font-size: 0.66rem;
}

.health-strip {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
  padding-top: 10px;
}

.health-strip div {
  min-height: 58px;
  gap: 5px;
  padding: 8px 5px;
}

.health-icon {
  font-size: 0.82rem;
}

.health-strip strong {
  font-size: 0.72rem;
}

@media (max-width: 380px) {
  .setup-shell {
    padding: 5px;
  }

  .setup-card {
    min-height: calc(100vh - 10px);
    padding: 12px;
  }

  .setup-header h1 {
    font-size: 1.18rem;
  }

  .driver-toggle-card {
    min-height: 58px;
  }

  .health-strip strong {
    font-size: 0.66rem;
  }
}

/* Driver-only secure link screen */
.driver-link-shell {
  width: min(100%, 430px);
  min-height: 100vh;
  margin: 0 auto;
  padding: 8px;
  display: grid;
  align-items: stretch;
  background:
    radial-gradient(circle at top right, rgba(255, 43, 43, 0.18), transparent 18rem),
    #07090d;
  color: var(--text);
}

.driver-card {
  min-height: calc(100vh - 16px);
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 16px;
  overflow: hidden;
  background: #0b0f15;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.34);
}

.driver-hero {
  position: relative;
  min-height: 150px;
  padding: 14px;
  display: grid;
  align-content: space-between;
  overflow: hidden;
}

.driver-hero img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 69% center;
  opacity: 0.52;
}

.driver-hero-shade {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(4, 5, 8, 0.42), rgba(4, 5, 8, 0.72)),
    linear-gradient(90deg, rgba(4, 5, 8, 0.94), rgba(4, 5, 8, 0.24));
}

.driver-topbar,
.driver-status-row {
  position: relative;
  z-index: 1;
}

.driver-topbar {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.driver-eyebrow {
  margin: 0 0 3px;
  color: var(--red);
  font-size: 0.68rem;
  font-weight: 900;
  text-transform: uppercase;
}

.driver-topbar h1 {
  margin: 0;
  font-size: 1.34rem;
}

.driver-topbar > span {
  height: 34px;
  display: inline-flex;
  align-items: center;
  padding: 0 10px;
  border: 1px solid rgba(255, 43, 43, 0.42);
  border-radius: 999px;
  background: rgba(255, 43, 43, 0.14);
  color: #ffd8d8;
  font-size: 0.78rem;
  font-weight: 900;
}

.driver-status-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.driver-status-row span {
  min-height: 28px;
  display: inline-flex;
  align-items: center;
  padding: 0 9px;
  border-radius: 999px;
  background: rgba(12, 16, 23, 0.82);
  color: var(--text);
  font-size: 0.75rem;
  font-weight: 850;
}

.route-card {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  padding: 10px;
}

.route-card div,
.driver-privacy-card,
.next-driver-action,
.driver-health-strip div {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(23, 29, 38, 0.94), rgba(13, 17, 24, 0.94));
}

.route-card div {
  min-height: 78px;
  padding: 10px;
}

.route-card span,
.driver-health-strip span {
  display: block;
  margin-bottom: 4px;
  color: var(--steel);
  font-size: 0.68rem;
  font-weight: 900;
  text-transform: uppercase;
}

.route-card strong {
  display: block;
  margin-bottom: 3px;
  font-size: 0.98rem;
}

.route-card small {
  color: var(--muted);
  font-size: 0.72rem;
  line-height: 1.25;
}

.driver-privacy-card {
  display: flex;
  gap: 11px;
  align-items: flex-start;
  margin: 0 10px 8px;
  padding: 10px;
}

.driver-privacy-card p {
  margin: 2px 0 0;
  color: var(--muted);
  font-size: 0.74rem;
  line-height: 1.3;
}

.next-driver-action {
  margin: 0 10px 8px;
  padding: 11px;
}

.next-driver-action h2 {
  margin: 0 0 4px;
  font-size: 1.24rem;
}

.next-driver-action p:not(.driver-eyebrow) {
  margin: 0 0 10px;
  color: var(--muted);
  font-size: 0.8rem;
  line-height: 1.32;
}

#primaryDriverAction {
  width: 100%;
  min-height: 54px;
  background: linear-gradient(180deg, var(--red), var(--red-dark));
  font-size: 1.02rem;
  font-weight: 900;
}

#primaryDriverAction:disabled {
  background: #252b35;
  color: var(--muted);
}

#undoStep {
  width: 100%;
  min-height: 36px;
  margin-top: 7px;
  border: 1px solid rgba(255, 43, 43, 0.28);
  background: #111720;
  color: #ffd8d8;
  font-size: 0.76rem;
  font-weight: 850;
}

#undoStep[hidden] {
  display: none;
}

.driver-tools {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
  padding: 0 10px 8px;
}

.driver-tools button {
  min-height: 38px;
  border: 1px solid var(--line);
  background: #111720;
  color: var(--text);
  font-size: 0.74rem;
  font-weight: 850;
}

.driver-card .completed-steps {
  min-height: 0;
  max-height: 48px;
  justify-content: flex-start;
  margin: 0 10px 8px;
  overflow: auto;
}

.driver-card .completed-steps span {
  background: rgba(50, 213, 131, 0.1);
  color: #b8f5d2;
}

.driver-health-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
  padding: 0 10px 10px;
}

.driver-health-strip div {
  min-height: 58px;
  padding: 9px 7px;
}

.driver-health-strip strong {
  display: block;
  font-size: 0.76rem;
  line-height: 1.18;
}

@media (max-width: 380px) {
  .driver-link-shell {
    padding: 5px;
  }

  .driver-card {
    min-height: calc(100vh - 10px);
  }

  .driver-hero {
    min-height: 132px;
    padding: 12px;
  }

  .route-card div {
    min-height: 70px;
    padding: 8px;
  }

  .next-driver-action h2 {
    font-size: 1.1rem;
  }

  #primaryDriverAction {
    min-height: 50px;
  }
}

/* Driver link visual refresh */
.driver-link-shell {
  width: min(100%, 430px);
  padding: 0;
  background: #05080d;
}

.driver-card {
  min-height: 100vh;
  border-color: rgba(255, 255, 255, 0.18);
  border-radius: 18px 18px 0 0;
  background: #080d14;
  box-shadow: none;
}

.driver-hero {
  min-height: 158px;
  padding: 24px 16px 14px;
}

.driver-hero img {
  object-position: 72% center;
  opacity: 0.46;
}

.driver-hero-shade {
  background:
    linear-gradient(180deg, rgba(2, 4, 8, 0.3), rgba(2, 4, 8, 0.76) 72%, #080d14),
    linear-gradient(90deg, rgba(2, 4, 8, 0.98), rgba(2, 4, 8, 0.5) 54%, rgba(2, 4, 8, 0.18));
}

.driver-eyebrow {
  margin-bottom: 5px;
  color: #ff382f;
  font-size: 0.76rem;
  letter-spacing: 0;
}

.driver-topbar h1 {
  font-size: 1.56rem;
  line-height: 1;
  letter-spacing: 0;
}

.driver-topbar > span {
  height: 48px;
  padding: 0 18px;
  border-color: rgba(255, 56, 47, 0.66);
  border-radius: 999px;
  background: rgba(96, 24, 24, 0.52);
  color: #ffe1de;
  font-size: 1.02rem;
}

.driver-status-row {
  gap: 10px;
}

.driver-status-row span {
  min-height: 40px;
  padding: 0 16px;
  background: #0e1420;
  color: #f7f9fc;
  font-size: 0.98rem;
  font-weight: 900;
}

.route-card {
  gap: 8px;
  padding: 10px 11px;
  background: #080d14;
}

.route-card div,
.driver-privacy-card,
.next-driver-action,
.driver-tools button,
.driver-health-strip div {
  border-color: rgba(154, 166, 184, 0.28);
  border-radius: 8px;
  background: #111821;
}

.route-card div {
  min-height: 86px;
  padding: 14px 12px;
}

.route-card span,
.driver-health-strip span {
  margin-bottom: 9px;
  color: #8f9cad;
  font-size: 0.82rem;
  letter-spacing: 0;
}

.route-card strong {
  margin-bottom: 12px;
  color: #f5f7fb;
  font-size: 1.25rem;
  line-height: 1.05;
}

.route-card small {
  color: #b8c0cd;
  font-size: 0.9rem;
}

.driver-privacy-card {
  margin: 0 11px 8px;
  padding: 18px 13px;
  gap: 14px;
}

.driver-privacy-card .pulse-dot {
  width: 12px;
  height: 12px;
  margin-top: 8px;
  background: #f6b049;
  box-shadow: 0 0 0 10px rgba(246, 176, 73, 0.13);
}

.driver-privacy-card strong {
  display: block;
  color: #f5f7fb;
  font-size: 1.16rem;
  line-height: 1.14;
}

.driver-privacy-card p {
  margin-top: 8px;
  color: #b8c0cd;
  font-size: 0.94rem;
  line-height: 1.38;
}

.next-driver-action {
  margin: 0 11px 8px;
  padding: 17px 12px 12px;
}

.next-driver-action .driver-eyebrow {
  margin-bottom: 12px;
  font-size: 0.86rem;
}

.next-driver-action h2 {
  margin-bottom: 12px;
  font-size: 1.52rem;
  line-height: 1.1;
}

.next-driver-action p:not(.driver-eyebrow) {
  margin-bottom: 18px;
  color: #b8c0cd;
  font-size: 1rem;
  line-height: 1.42;
}

#primaryDriverAction {
  min-height: 58px;
  border-radius: 8px;
  background: #252c36;
  color: #bfc7d3;
  font-size: 1.08rem;
  font-weight: 900;
}

#primaryDriverAction:not(:disabled) {
  background: linear-gradient(180deg, #ff3c33, #b51e22);
  color: #ffffff;
}

#primaryDriverAction:disabled {
  background: #252c36;
  color: #bfc7d3;
}

#undoStep {
  min-height: 38px;
  margin-top: 8px;
  border-color: rgba(255, 56, 47, 0.42);
  border-radius: 8px;
  background: #0d131c;
  color: #ffd8d8;
  font-size: 0.82rem;
}

.driver-tools {
  gap: 8px;
  padding: 10px 11px 8px;
}

.driver-tools button {
  min-height: 39px;
  color: #f3f5f8;
  font-size: 0.86rem;
  font-weight: 900;
}

.driver-card .completed-steps {
  max-height: 80px;
  gap: 8px;
  margin: 0 11px 8px;
  padding-bottom: 0;
}

.driver-card .completed-steps span {
  padding: 6px 10px;
  border-color: rgba(111, 214, 158, 0.22);
  background: #112a24;
  color: #bdf4d3;
  font-size: 0.78rem;
}

.driver-health-strip {
  gap: 8px;
  padding: 0 11px 12px;
}

.driver-health-strip div {
  min-height: 64px;
}

.driver-health-strip strong {
  color: #f3f5f8;
  font-size: 0.82rem;
}

@media (min-width: 700px) {
  .driver-link-shell {
    width: min(100%, 810px);
  }

  .driver-card {
    border-radius: 28px 28px 0 0;
  }

  .driver-hero {
    min-height: 296px;
    padding: 31px 29px 27px;
  }

  .driver-eyebrow {
    font-size: 1.4rem;
  }

  .driver-topbar h1 {
    font-size: 2.6rem;
  }

  .driver-topbar > span {
    height: 68px;
    padding: 0 24px;
    font-size: 1.55rem;
  }

  .driver-status-row span {
    min-height: 56px;
    padding: 0 18px;
    font-size: 1.5rem;
  }

  .route-card {
    gap: 16px;
    padding: 20px 21px;
  }

  .route-card div {
    min-height: 172px;
    padding: 25px 21px;
  }

  .route-card span {
    font-size: 1.32rem;
  }

  .route-card strong {
    font-size: 2rem;
  }

  .route-card small {
    font-size: 1.44rem;
  }

  .driver-privacy-card {
    margin: 0 21px 16px;
    padding: 29px 24px;
  }

  .driver-privacy-card strong {
    font-size: 2rem;
  }

  .driver-privacy-card p {
    font-size: 1.48rem;
  }

  .next-driver-action {
    margin: 0 21px 16px;
    padding: 26px 23px 23px;
  }

  .next-driver-action .driver-eyebrow {
    font-size: 1.32rem;
  }

  .next-driver-action h2 {
    font-size: 2.5rem;
  }

  .next-driver-action p:not(.driver-eyebrow) {
    font-size: 1.46rem;
  }

  #primaryDriverAction {
    min-height: 108px;
    font-size: 2rem;
  }

  #undoStep {
    min-height: 72px;
    margin-top: 16px;
    font-size: 1.38rem;
  }

  .driver-tools {
    gap: 14px;
    padding: 2px 21px 16px;
  }

  .driver-tools button {
    min-height: 76px;
    font-size: 1.38rem;
  }

  .driver-card .completed-steps {
    gap: 12px;
    margin: 0 21px 16px;
  }

  .driver-card .completed-steps span {
    padding: 9px 16px;
    font-size: 1.16rem;
  }
}

/* Shipment Owner build page */
.owner-shell {
  width: min(100%, 920px);
  min-height: 100vh;
  margin: 0 auto;
  padding: 8px;
  background: #05080d;
  color: var(--text);
}

.owner-page-card {
  min-height: calc(100vh - 16px);
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 18px;
  background: #080d14;
}

.owner-hero {
  position: relative;
  min-height: 220px;
  display: grid;
  align-content: space-between;
  gap: 20px;
  padding: 24px;
  overflow: hidden;
}

.owner-hero img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 72% center;
  opacity: 0.43;
}

.owner-hero-shade {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(2, 4, 8, 0.2), rgba(2, 4, 8, 0.8) 72%, #080d14),
    linear-gradient(90deg, rgba(2, 4, 8, 0.98), rgba(2, 4, 8, 0.46) 58%, rgba(2, 4, 8, 0.18));
}

.owner-topbar,
.owner-driver-toggle {
  position: relative;
  z-index: 1;
}

.owner-topbar {
  display: flex;
  justify-content: space-between;
  gap: 18px;
}

.owner-brand,
.owner-label {
  margin: 0 0 5px;
  color: #ff382f;
  font-size: 0.78rem;
  font-weight: 900;
  text-transform: uppercase;
}

.owner-topbar h1 {
  margin: 0;
  font-size: clamp(2rem, 6vw, 3.4rem);
  line-height: 1;
}

.owner-topbar > span {
  height: 46px;
  display: inline-flex;
  align-items: center;
  padding: 0 16px;
  border: 1px solid rgba(255, 56, 47, 0.62);
  border-radius: 999px;
  background: rgba(96, 24, 24, 0.5);
  color: #ffe1de;
  font-size: 1rem;
  font-weight: 900;
}

.owner-driver-toggle {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  max-width: 660px;
  padding: 16px;
  border: 1px solid rgba(255, 56, 47, 0.34);
  border-radius: 10px;
  background: rgba(75, 13, 16, 0.72);
  cursor: pointer;
}

.owner-driver-toggle strong,
.owner-driver-toggle em {
  display: block;
  font-style: normal;
}

.owner-driver-toggle strong {
  color: #ffdfdc;
  font-size: 1.02rem;
}

.owner-driver-toggle em {
  margin-top: 4px;
  color: #ffaaa4;
  font-size: 0.82rem;
}

.owner-build-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(300px, 0.92fr);
  gap: 12px;
  padding: 12px;
}

.owner-panel,
.owner-driver-cockpit {
  border: 1px solid rgba(154, 166, 184, 0.26);
  border-radius: 10px;
  background: #111821;
}

.owner-panel {
  display: grid;
  align-content: start;
  gap: 12px;
  padding: 14px;
}

.panel-heading strong {
  display: block;
  color: #f5f7fb;
  font-size: 1.28rem;
}

.field-grid,
.route-input-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.owner-panel label,
.contact-heading {
  display: grid;
  gap: 6px;
  color: #97a3b4;
  font-size: 0.78rem;
  font-weight: 900;
}

.owner-panel input {
  width: 100%;
  height: 44px;
  border-color: rgba(154, 166, 184, 0.24);
  background: #0b111a;
  color: #f5f7fb;
  font-size: 0.95rem;
}

.field-grid select,
.admin-actions input,
.admin-create-form input {
  width: 100%;
  height: 44px;
  border: 1px solid rgba(154, 166, 184, 0.24);
  border-radius: 8px;
  background: #0b111a;
  color: #f5f7fb;
  font: inherit;
}

.field-grid select {
  padding: 0 12px;
}

.auth-body {
  background: #05080d;
}

.auth-shell {
  width: min(100%, 920px);
  min-height: 100vh;
  margin: 0 auto;
  padding: 8px;
  color: var(--text);
}

.auth-page-card {
  min-height: calc(100vh - 16px);
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 18px;
  background: #080d14;
}

.auth-hero {
  position: relative;
  min-height: 250px;
  display: grid;
  align-content: space-between;
  gap: 20px;
  padding: 24px;
  overflow: hidden;
}

.auth-hero img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 72% center;
  opacity: 0.43;
}

.auth-hero-shade {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(2, 4, 8, 0.2), rgba(2, 4, 8, 0.8) 72%, #080d14),
    linear-gradient(90deg, rgba(2, 4, 8, 0.98), rgba(2, 4, 8, 0.46) 58%, rgba(2, 4, 8, 0.18));
}

.auth-topbar,
.auth-status-card {
  position: relative;
  z-index: 1;
}

.auth-topbar {
  display: flex;
  justify-content: space-between;
  gap: 18px;
}

.auth-topbar h1 {
  margin: 0;
  font-size: clamp(2rem, 6vw, 3.4rem);
  line-height: 1;
}

.auth-topbar > span {
  height: 46px;
  display: inline-flex;
  align-items: center;
  padding: 0 16px;
  border: 1px solid rgba(255, 56, 47, 0.62);
  border-radius: 999px;
  background: rgba(96, 24, 24, 0.5);
  color: #ffe1de;
  font-size: 0.96rem;
  font-weight: 900;
}

.auth-status-card {
  display: grid;
  gap: 4px;
  max-width: 660px;
  padding: 16px;
  border: 1px solid rgba(255, 56, 47, 0.34);
  border-radius: 10px;
  background: rgba(75, 13, 16, 0.72);
}

.auth-status-card strong {
  color: #ffdfdc;
  font-size: 1.02rem;
}

.auth-status-card span {
  color: #ffaaa4;
  font-size: 0.84rem;
}

.auth-content {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
  padding: 12px;
}

.auth-card {
  display: grid;
  align-content: start;
  gap: 12px;
  width: min(100%, 640px);
  margin: 0 auto;
  padding: 14px;
  border: 1px solid rgba(154, 166, 184, 0.26);
  border-radius: 10px;
  background: #111821;
}

.auth-card-wide {
  width: min(100%, 820px);
}

.auth-form {
  display: grid;
  gap: 12px;
}

.auth-form-two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.auth-form label {
  display: grid;
  gap: 6px;
  color: #97a3b4;
  font-size: 0.78rem;
  font-weight: 900;
}

.auth-form input,
.auth-form select {
  width: 100%;
  height: 44px;
  border: 1px solid rgba(154, 166, 184, 0.24);
  border-radius: 8px;
  background: #0b111a;
  color: #f5f7fb;
  padding: 0 12px;
}

.auth-check {
  display: flex !important;
  grid-column: 1 / -1;
  align-items: center;
  gap: 10px;
}

.auth-check input {
  width: 18px;
  min-height: 18px;
}

.auth-form button {
  grid-column: 1 / -1;
  min-height: 58px;
  border-radius: 8px;
  background: var(--red);
  color: white;
  font-size: 1.12rem;
  font-weight: 900;
}

.auth-form button:disabled {
  cursor: default;
  opacity: 0.7;
}

.auth-link {
  display: inline-flex;
  color: #ffaaa4;
  font-weight: 800;
  text-decoration: none;
}

.auth-text-button {
  width: fit-content;
  border: 0;
  padding: 0;
  background: transparent;
  color: #ffaaa4;
  font: inherit;
  font-weight: 800;
}

.admin-shell {
  min-height: 100vh;
  padding: 22px;
  background: #0b111a;
  color: #f5f7fb;
}

.admin-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 16px;
  align-items: end;
  margin: 0 auto 14px;
  max-width: 1280px;
}

.admin-header h1 {
  margin: 0;
  font-size: clamp(2rem, 4vw, 3.6rem);
  line-height: 0.95;
}

.admin-actions {
  display: grid;
  grid-template-columns: minmax(190px, 1fr) auto auto;
  gap: 8px;
  align-items: center;
}

.admin-actions button,
.admin-create-form button {
  min-height: 44px;
  border: 0;
  border-radius: 8px;
  background: #f2c35b;
  color: #111821;
  font-weight: 900;
}

.admin-actions button:last-child {
  background: #243145;
  color: #f5f7fb;
}

.admin-metrics,
.admin-layout {
  max-width: 1280px;
  margin: 0 auto;
}

.admin-metrics {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 10px;
}

.admin-metrics div,
.admin-panel {
  border: 1px solid rgba(154, 166, 184, 0.24);
  border-radius: 8px;
  background: #111821;
}

.admin-metrics div {
  min-height: 84px;
  padding: 14px;
}

.admin-metrics span {
  display: block;
  color: #97a3b4;
  font-size: 0.78rem;
  font-weight: 900;
  text-transform: uppercase;
}

.admin-metrics strong {
  display: block;
  margin-top: 8px;
  font-size: 2rem;
}

.admin-layout {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.admin-panel {
  display: grid;
  align-content: start;
  gap: 12px;
  min-height: 290px;
  padding: 14px;
}

.admin-create-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr)) auto;
  gap: 8px;
}

.admin-create-form button {
  padding: 0 16px;
}

.admin-list {
  display: grid;
  gap: 8px;
  max-height: 380px;
  overflow: auto;
}

.admin-list.compact {
  max-height: 290px;
}

.admin-list-item {
  display: grid;
  gap: 4px;
  padding: 10px;
  border: 1px solid rgba(154, 166, 184, 0.18);
  border-radius: 8px;
  background: #0d141f;
}

.admin-list-item strong {
  color: #f5f7fb;
  font-size: 0.98rem;
}

.admin-list-item span,
.admin-list-item small {
  color: #aab5c3;
  overflow-wrap: anywhere;
}

.admin-list-item small {
  font-size: 0.78rem;
}

.dashboard-body {
  margin: 0;
  background: #f4f6f8;
  color: #17202c;
}

.dashboard-shell {
  min-height: 100vh;
  padding: 22px;
}

.dashboard-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 16px;
  align-items: end;
  max-width: 1280px;
  margin: 0 auto 14px;
}

.dashboard-header h1 {
  margin: 0;
  color: #101823;
  font-size: clamp(2rem, 4vw, 3.4rem);
  line-height: 0.98;
}

.dashboard-header span {
  display: block;
  margin-top: 6px;
  color: #667487;
  font-weight: 800;
}

.dashboard-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

.dashboard-actions a,
.dashboard-actions button,
.dashboard-secondary-link {
  min-height: 42px;
  padding: 0 14px;
  border: 0;
  border-radius: 8px;
  background: #122033;
  color: #fff;
  font: inherit;
  font-weight: 900;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.dashboard-actions button,
.dashboard-secondary-link {
  background: #dfe6ee;
  color: #17202c;
}

.dashboard-metrics,
.dashboard-grid {
  max-width: 1280px;
  margin: 0 auto;
}

.dashboard-metrics {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 10px;
}

.dashboard-metrics div,
.dashboard-panel {
  border: 1px solid #dbe2ea;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 10px 24px rgba(31, 42, 55, 0.06);
}

.dashboard-metrics div {
  min-height: 82px;
  padding: 14px;
}

.dashboard-metrics span {
  display: block;
  color: #6c7888;
  font-size: 0.78rem;
  font-weight: 900;
  text-transform: uppercase;
}

.dashboard-metrics strong {
  display: block;
  margin-top: 8px;
  color: #101823;
  font-size: 2rem;
}

.dashboard-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(320px, 0.65fr);
  gap: 10px;
}

.dashboard-panel {
  display: grid;
  align-content: start;
  gap: 12px;
  min-width: 0;
  padding: 14px;
}

.dashboard-panel-wide {
  grid-row: span 3;
}

.shipment-list,
.compact-list {
  display: grid;
  gap: 10px;
}

.shipment-card,
.dashboard-list-item,
.dashboard-empty {
  border: 1px solid #e0e6ee;
  border-radius: 8px;
  background: #f9fbfd;
}

.shipment-card {
  display: grid;
  gap: 12px;
  padding: 14px;
}

.shipment-card-top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: start;
}

.shipment-card-top strong,
.dashboard-list-item strong {
  display: block;
  color: #101823;
  overflow-wrap: anywhere;
}

.shipment-card-top span,
.dashboard-list-item span,
.dashboard-list-item small,
.shipment-detail-grid span,
.shipment-detail-grid em,
.settings-list dt,
.settings-list dd {
  color: #687588;
  overflow-wrap: anywhere;
}

.shipment-card mark {
  padding: 6px 8px;
  border-radius: 999px;
  background: #e9f7ee;
  color: #1f7a43;
  font-size: 0.78rem;
  font-weight: 900;
}

.shipment-detail-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.shipment-detail-grid div {
  display: grid;
  gap: 4px;
  min-height: 92px;
  padding: 10px;
  border-radius: 8px;
  background: #fff;
}

.shipment-detail-grid span {
  font-size: 0.76rem;
  font-weight: 900;
  text-transform: uppercase;
}

.shipment-detail-grid strong {
  color: #17202c;
  font-size: 0.96rem;
  overflow-wrap: anywhere;
}

.shipment-detail-grid em {
  font-style: normal;
  font-size: 0.82rem;
}

.shipment-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.shipment-links a {
  min-height: 36px;
  padding: 0 12px;
  border-radius: 8px;
  background: #edf2f7;
  color: #123255;
  font-weight: 900;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
}

.dashboard-list-item,
.dashboard-empty {
  display: grid;
  gap: 4px;
  padding: 10px;
}

.dashboard-empty {
  color: #687588;
  font-weight: 800;
}

.settings-list {
  display: grid;
  grid-template-columns: minmax(110px, 0.36fr) minmax(0, 1fr);
  gap: 8px 12px;
  margin: 0;
}

.settings-list dt {
  font-size: 0.78rem;
  font-weight: 900;
  text-transform: uppercase;
}

.settings-list dd {
  margin: 0;
  color: #17202c;
  font-weight: 800;
}

.owner-upload-card {
  grid-template-columns: minmax(0, 1fr) auto;
  margin: 0;
  background: #0d141f;
}

.contact-group {
  display: grid;
  gap: 8px;
}

.recipient-attestation {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  border: 1px solid #dbe6f4;
  border-radius: 10px;
  background: #f8fbff;
  color: #334155;
  font-size: 13px;
  line-height: 1.45;
}

.recipient-attestation input {
  margin-top: 2px;
  flex: 0 0 auto;
}

.contacts-panel .viewer-chips {
  min-height: 36px;
}

.contacts-panel .viewer-chip {
  min-height: 34px;
  padding: 0 12px;
  background: #182231;
}

.contacts-panel .viewer-chip span {
  font-size: 0.68rem;
}

.owner-primary {
  min-height: 54px;
  margin: 2px 0 0;
}

.status-line.status-error {
  padding: 12px 14px;
  border: 1px solid #ef4444;
  border-radius: 10px;
  background: #fef2f2;
  color: #991b1b;
  font-weight: 700;
}

.owner-driver-cockpit {
  display: grid;
  gap: 10px;
  margin: 0 12px 12px;
  padding: 12px;
}

.owner-shell:not(.solo-mode) .owner-driver-cockpit {
  display: none;
}

.owner-shell.solo-mode .driver-phone-row {
  display: none;
}

.driver-mini-route {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.driver-mini-route div {
  min-height: 86px;
  padding: 14px 12px;
  border: 1px solid rgba(154, 166, 184, 0.28);
  border-radius: 8px;
  background: #0d141f;
}

.driver-mini-route span {
  display: block;
  margin-bottom: 8px;
  color: #8f9cad;
  font-size: 0.78rem;
  font-weight: 900;
  text-transform: uppercase;
}

.driver-mini-route strong {
  display: block;
  margin-bottom: 8px;
  color: #f5f7fb;
  font-size: 1.18rem;
  line-height: 1.1;
}

.driver-mini-route small {
  color: #b8c0cd;
  font-size: 0.86rem;
}

.owner-driver-status,
.owner-next-action {
  margin: 0;
}

.owner-health-strip {
  padding: 0;
}

.owner-health-strip div {
  min-height: 62px;
}

.external-view-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 12px;
  border: 1px solid rgba(154, 166, 184, 0.24);
  border-radius: 8px;
  background: #0d141f;
}

.link-actions {
  display: flex;
  gap: 7px;
}

.link-actions button {
  min-height: 34px;
  padding: 0 10px;
  border: 1px solid rgba(255, 255, 255, 0.13);
  background: #30312e;
  color: var(--simple-text);
  font-size: 0.76rem;
  font-weight: 800;
}

.driver-link-card span {
  word-break: break-word;
}

.external-view-card strong,
.external-view-card span {
  display: block;
}

.external-view-card strong {
  color: #f5f7fb;
  font-size: 0.92rem;
}

.external-view-card span {
  margin-top: 3px;
  color: #97a3b4;
  font-size: 0.76rem;
  line-height: 1.3;
}

.external-view-card a {
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 14px;
  border: 1px solid rgba(255, 56, 47, 0.42);
  border-radius: 8px;
  background: rgba(255, 56, 47, 0.14);
  color: #ffe1de;
  font-size: 0.78rem;
  font-weight: 900;
  text-decoration: none;
}

/* Read-only external company status link */
.viewer-shell {
  width: min(100%, 1180px);
  min-height: 100vh;
  margin: 0 auto;
  padding: 8px;
  background: #05080d;
  color: var(--text);
}

.viewer-card {
  min-height: calc(100vh - 16px);
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 18px;
  background: #080d14;
}

.viewer-hero {
  position: relative;
  min-height: 245px;
  display: grid;
  align-content: space-between;
  gap: 20px;
  padding: 24px;
  overflow: hidden;
}

.viewer-hero img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 72% center;
  opacity: 0.42;
}

.viewer-hero-shade {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(2, 4, 8, 0.18), rgba(2, 4, 8, 0.78) 72%, #080d14),
    linear-gradient(90deg, rgba(2, 4, 8, 0.98), rgba(2, 4, 8, 0.46) 58%, rgba(2, 4, 8, 0.18));
}

.viewer-topbar,
.viewer-status-card {
  position: relative;
  z-index: 1;
}

.viewer-topbar {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 18px;
}

.viewer-topbar > div {
  min-width: 0;
}

.viewer-brand,
.viewer-label {
  margin: 0 0 5px;
  color: #ff382f;
  font-size: 0.78rem;
  font-weight: 900;
  text-transform: uppercase;
}

.viewer-topbar h1 {
  margin: 0;
  font-size: clamp(2rem, 6vw, 3.3rem);
  line-height: 1;
  overflow-wrap: anywhere;
}

.viewer-topbar > span {
  height: 46px;
  display: inline-flex;
  align-items: center;
  padding: 0 16px;
  border: 1px solid rgba(255, 56, 47, 0.62);
  border-radius: 999px;
  background: rgba(96, 24, 24, 0.5);
  color: #ffe1de;
  font-size: 1rem;
  font-weight: 900;
}

.viewer-status-card {
  width: min(100%, 620px);
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 16px;
  border: 1px solid rgba(154, 166, 184, 0.28);
  border-radius: 10px;
  background: rgba(13, 20, 31, 0.84);
  overflow-wrap: anywhere;
}

.viewer-status-card strong,
.viewer-status-card span {
  display: block;
}

.viewer-status-card strong {
  color: #f5f7fb;
  font-size: clamp(1.48rem, 4vw, 2.2rem);
  line-height: 1.05;
}

.viewer-status-card span {
  margin-top: 8px;
  color: #b8c0cd;
  font-size: 0.92rem;
  line-height: 1.35;
}

.viewer-content {
  display: grid;
  gap: 12px;
  padding: 12px;
}

.viewer-route,
.viewer-metrics {
  display: grid;
  gap: 10px;
}

.viewer-route {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.viewer-metrics {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.viewer-route div,
.viewer-metrics div,
.viewer-panel,
.viewer-limits {
  border: 1px solid rgba(154, 166, 184, 0.26);
  border-radius: 10px;
  background: #111821;
}

.viewer-route div,
.viewer-metrics div {
  min-height: 86px;
  padding: 14px 12px;
}

.viewer-route span,
.viewer-metrics span {
  display: block;
  margin-bottom: 8px;
  color: #8f9cad;
  font-size: 0.78rem;
  font-weight: 900;
  text-transform: uppercase;
}

.viewer-route strong,
.viewer-metrics strong {
  display: block;
  color: #f5f7fb;
  font-size: 1.18rem;
  line-height: 1.1;
  overflow-wrap: anywhere;
}

.viewer-route small {
  display: block;
  margin-top: 8px;
  color: #b8c0cd;
  font-size: 0.86rem;
  overflow-wrap: anywhere;
}

.viewer-panel {
  padding: 14px;
}

.pricing-intake {
  display: grid;
  gap: 12px;
}

.pricing-intake-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.pricing-intake-form label {
  display: grid;
  gap: 6px;
  color: #97a3b4;
  font-size: 0.78rem;
  font-weight: 900;
}

.pricing-intake-form button {
  grid-column: 1 / -1;
}

.pricing-capacity-list {
  display: grid;
  gap: 8px;
  min-height: 162px;
  padding: 0;
  margin: 0 0 14px;
  list-style: none;
}

.pricing-capacity-list li {
  padding: 9px 10px;
  border: 1px solid rgba(154, 166, 184, 0.18);
  border-radius: 8px;
  background: #0d141f;
  color: #b8c0cd;
  font-size: 0.84rem;
  line-height: 1.3;
}

.pricing-plan-card.recommended {
  border-color: rgba(50, 213, 131, 0.46);
  box-shadow: 0 0 0 1px rgba(50, 213, 131, 0.16);
}

.pricing-plan-card.recommended .viewer-label {
  color: #32d583;
}

.pricing-recommendation {
  background: rgba(50, 213, 131, 0.09);
  border-color: rgba(50, 213, 131, 0.28);
}

.viewer-section-heading {
  margin-bottom: 12px;
}

.viewer-section-heading strong {
  color: #f5f7fb;
  font-size: 1.24rem;
}

.viewer-timeline {
  display: grid;
  gap: 9px;
  padding: 0;
  margin: 0;
  list-style: none;
}

.viewer-timeline li {
  position: relative;
  min-height: 66px;
  padding: 11px 12px 11px 36px;
  border: 1px solid rgba(154, 166, 184, 0.22);
  border-radius: 8px;
  background: #0d141f;
}

.viewer-timeline li::before {
  content: "";
  position: absolute;
  top: 17px;
  left: 14px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #ff382f;
  box-shadow: 0 0 0 5px rgba(255, 56, 47, 0.13);
}

.viewer-timeline time,
.viewer-timeline strong,
.viewer-timeline span {
  display: block;
}

.viewer-timeline time {
  color: #8f9cad;
  font-size: 0.7rem;
  font-weight: 900;
  text-transform: uppercase;
}

.viewer-timeline strong {
  margin: 3px 0;
  color: #f5f7fb;
}

.viewer-timeline span {
  color: #b8c0cd;
  font-size: 0.82rem;
  line-height: 1.32;
}

.viewer-docs {
  display: grid;
  gap: 9px;
}

.viewer-doc {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  min-height: 62px;
  padding: 11px 12px;
  border: 1px solid rgba(154, 166, 184, 0.22);
  border-radius: 8px;
  background: #0d141f;
}

.viewer-doc.selected {
  border-color: rgba(255, 56, 47, 0.42);
  background: rgba(255, 56, 47, 0.08);
}

.viewer-doc strong,
.viewer-doc span {
  display: block;
}

.viewer-doc strong {
  color: #f5f7fb;
}

.viewer-doc span {
  margin-top: 3px;
  color: #8f9cad;
  font-size: 0.78rem;
  font-weight: 900;
}

.viewer-doc button {
  min-height: 34px;
  padding: 0 11px;
  border: 1px solid rgba(50, 213, 131, 0.28);
  background: rgba(50, 213, 131, 0.12);
  color: #b8f5d2;
  font-size: 0.74rem;
  font-weight: 900;
}

.viewer-doc button:disabled {
  border-color: rgba(154, 166, 184, 0.2);
  background: #202734;
  color: #8f9cad;
  cursor: default;
}

.viewer-doc-preview {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  margin-top: 10px;
  padding: 12px;
  border: 1px solid rgba(154, 166, 184, 0.22);
  border-radius: 8px;
  background: #0b111a;
}

.viewer-doc-preview span,
.viewer-doc-preview strong,
.viewer-doc-preview p {
  display: block;
}

.viewer-doc-preview span {
  margin-bottom: 4px;
  color: #8f9cad;
  font-size: 0.7rem;
  font-weight: 900;
  text-transform: uppercase;
}

.viewer-doc-preview strong {
  color: #f5f7fb;
}

.viewer-doc-preview p {
  margin: 4px 0 0;
  color: #b8c0cd;
  font-size: 0.82rem;
  line-height: 1.32;
}

.viewer-doc-preview button {
  min-height: 36px;
  padding: 0 12px;
  border: 1px solid rgba(154, 166, 184, 0.24);
  background: #202734;
  color: #f5f7fb;
  font-size: 0.76rem;
  font-weight: 900;
  cursor: default;
}

.viewer-limits {
  display: grid;
  gap: 4px;
  padding: 13px 14px;
}

.viewer-limits strong {
  color: #f5f7fb;
}

.viewer-limits span {
  color: #b8c0cd;
  font-size: 0.84rem;
  line-height: 1.35;
}

@media (min-width: 900px) {
  .viewer-content {
    grid-template-columns: minmax(0, 1.1fr) minmax(340px, 0.9fr);
    align-items: start;
  }

  .viewer-route,
  .viewer-metrics,
  .viewer-limits {
    grid-column: 1 / -1;
  }

  .viewer-panel {
    min-width: 0;
  }
}

@media (max-width: 760px) {
  .auth-shell {
    padding: 0;
  }

  .auth-page-card {
    min-height: 100vh;
    border-radius: 0;
  }

  .auth-hero {
    min-height: 214px;
    padding: 22px 16px 14px;
  }

  .auth-content {
    padding: 10px;
  }

  .auth-form-two {
    grid-template-columns: 1fr;
  }

  .admin-shell {
    padding: 12px;
  }

  .admin-header,
  .admin-actions,
  .admin-metrics,
  .admin-layout,
  .admin-create-form,
  .dashboard-header,
  .dashboard-metrics,
  .dashboard-grid,
  .shipment-detail-grid {
    grid-template-columns: 1fr;
  }

  .admin-header {
    align-items: stretch;
  }

  .dashboard-shell {
    padding: 12px;
  }

  .dashboard-header {
    align-items: stretch;
  }

  .dashboard-actions {
    justify-content: stretch;
  }

  .dashboard-actions a,
  .dashboard-actions button {
    flex: 1 1 150px;
  }

  .dashboard-panel-wide {
    grid-row: auto;
  }

  .owner-shell {
    padding: 0;
  }

  .owner-page-card {
    min-height: 100vh;
    border-radius: 0;
  }

  .owner-hero {
    min-height: 214px;
    padding: 22px 16px 14px;
  }

  .owner-build-grid {
    grid-template-columns: 1fr;
    padding: 10px;
  }

  .owner-driver-cockpit {
    margin: 0 10px 10px;
    padding: 10px;
  }

  .field-grid,
  .route-input-grid {
    grid-template-columns: 1fr;
  }

  .viewer-shell {
    padding: 0;
  }

  .viewer-card {
    min-height: 100vh;
    border-radius: 0;
  }

  .viewer-hero {
    min-height: 230px;
    padding: 22px 16px 14px;
  }

  .viewer-content {
    padding: 10px;
  }

  .viewer-route,
  .viewer-metrics {
    grid-template-columns: 1fr;
  }

  .pricing-intake-form {
    grid-template-columns: 1fr;
  }

  .viewer-topbar {
    display: grid;
  }
}

@media (max-width: 430px) {
  .auth-topbar h1 {
    font-size: 2rem;
  }

  .auth-topbar > span {
    height: 38px;
    padding: 0 12px;
    font-size: 0.84rem;
  }

  .auth-status-card {
    padding: 12px;
  }

  .owner-topbar h1 {
    font-size: 2rem;
  }

  .owner-topbar > span {
    height: 38px;
    padding: 0 12px;
    font-size: 0.84rem;
  }

  .owner-driver-toggle {
    padding: 12px;
  }

  .driver-mini-route {
    grid-template-columns: 1fr;
  }

  .viewer-topbar h1 {
    font-size: 1.78rem;
  }

  .viewer-topbar > span {
    height: 38px;
    padding: 0 12px;
    font-size: 0.84rem;
  }

  .viewer-status-card {
    padding: 12px;
  }

  .viewer-doc-preview {
    grid-template-columns: 1fr;
  }
}

/* Keep the operations dashboard overrides after legacy page styles. */
.dashboard-body .dashboard-shell { padding: 0 28px 40px; }
.dashboard-body .dashboard-header {
  display: flex;
  max-width: 1440px;
  min-height: 76px;
  margin: 0 auto;
  align-items: center;
  justify-content: space-between;
}
.dashboard-body .dashboard-actions a,
.dashboard-body .dashboard-actions button,
.dashboard-body .dashboard-secondary-link {
  border: 1px solid var(--dash-border);
  border-radius: 10px;
  background: #fff;
  color: #44536a;
}
.dashboard-body .dashboard-actions .dashboard-primary-action {
  border-color: var(--dash-blue);
  background: var(--dash-blue);
  color: #fff;
}
.dashboard-body .dashboard-logo span {
  display: inline;
  margin: 0;
  color: #b9d2ff;
}
.dashboard-body .dashboard-metrics {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  max-width: 1440px;
  margin: 0 auto 18px;
  gap: 12px;
}
.dashboard-body .dashboard-panel {
  padding: 18px;
  border-radius: 14px;
  box-shadow: 0 8px 24px rgba(40, 62, 91, 0.035);
}
.dashboard-body .dashboard-queue-panel { padding: 0; }
.dashboard-body .dashboard-list-item {
  padding: 10px 0;
  border: 0;
  border-bottom: 1px solid #eef1f5;
  border-radius: 0;
  background: transparent;
}
.dashboard-body .dashboard-list-item:last-child { border-bottom: 0; }
.dashboard-body .dashboard-empty {
  display: flex;
  padding: 18px;
  border: 1px dashed #dbe2e9;
  border-radius: 11px;
  background: #fafcfd;
}
.dashboard-body .settings-list {
  grid-template-columns: 88px minmax(0, 1fr);
  gap: 8px;
}

@media (max-width: 720px) {
  .dashboard-body .dashboard-shell { padding: 0 12px 28px; }
  .dashboard-body .dashboard-header { display: flex; min-height: 68px; }
  .dashboard-body .dashboard-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dashboard-body .dashboard-actions { justify-content: flex-end; }
  .dashboard-body .dashboard-actions a,
  .dashboard-body .dashboard-actions button { flex: 0 0 auto; }
}

/* Shipment Plus shared application theme */
:root {
  --sp-bg: #f6f8fb;
  --sp-surface: #ffffff;
  --sp-surface-soft: #f8fafc;
  --sp-ink: #16283f;
  --sp-copy: #44536a;
  --sp-muted: #718095;
  --sp-border: #e2e8ef;
  --sp-blue: #246bfe;
  --sp-blue-dark: #174fc3;
  --sp-blue-soft: #eaf1ff;
  --sp-green: #21a179;
  --sp-green-soft: #e7f7f1;
  --sp-amber: #d88926;
  --sp-amber-soft: #fff2df;
  --sp-red: #dd4b54;
  --sp-red-soft: #fff0f1;
  color-scheme: light;
}

html { background: var(--sp-bg); }

body {
  margin: 0;
  padding: 0 !important;
  background: var(--sp-bg);
  color: var(--sp-ink);
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
}

button,
input,
select,
textarea { font: inherit; }

button,
a { -webkit-tap-highlight-color: transparent; }

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 3px solid rgba(36, 107, 254, 0.2);
  outline-offset: 2px;
}

.owner-shell,
.auth-shell,
.viewer-shell,
.driver-link-shell,
.billing-shell {
  box-sizing: border-box;
  min-height: 100vh;
  margin: 0 auto;
  padding: 28px;
  background: var(--sp-bg);
  color: var(--sp-ink);
}

.owner-shell { width: min(100%, 1180px); }
.auth-shell { width: min(100%, 1000px); }
.viewer-shell { width: min(100%, 1120px); }
.driver-link-shell { width: min(100%, 560px); }
.billing-shell { width: min(100%, 700px); display: grid; place-items: center; }

.owner-page-card,
.auth-page-card,
.viewer-card,
.driver-card,
.billing-card {
  min-height: 0;
  overflow: hidden;
  border: 1px solid var(--sp-border);
  border-radius: 18px;
  background: var(--sp-surface);
  color: var(--sp-ink);
  box-shadow: 0 14px 38px rgba(40, 62, 91, 0.075);
}

.owner-hero,
.auth-hero,
.viewer-hero,
.driver-hero {
  position: relative;
  min-height: 0;
  padding: 22px;
  display: grid;
  align-content: start;
  gap: 16px;
  overflow: visible;
  border-bottom: 1px solid var(--sp-border);
  background: var(--sp-surface);
  color: var(--sp-ink);
}

.owner-hero img,
.auth-hero img,
.viewer-hero img,
.driver-hero img,
.owner-hero-shade,
.auth-hero-shade,
.viewer-hero-shade,
.driver-hero-shade { display: none; }

.owner-topbar,
.auth-topbar,
.viewer-topbar,
.driver-topbar {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  color: var(--sp-ink);
}

.owner-topbar::before,
.auth-topbar::before,
.viewer-topbar::before,
.driver-topbar::before {
  content: "SP+";
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  border-radius: 12px;
  background: var(--sp-blue);
  color: #fff;
  font-size: 0.78rem;
  font-weight: 950;
  letter-spacing: -0.04em;
  box-shadow: 0 8px 20px rgba(36, 107, 254, 0.18);
}

.owner-brand,
.owner-label,
.driver-eyebrow,
.viewer-brand,
.viewer-label {
  margin: 0 0 3px;
  color: #77859a;
  font-size: 0.69rem;
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.owner-topbar h1,
.auth-topbar h1,
.viewer-topbar h1,
.driver-topbar h1 {
  margin: 0;
  color: var(--sp-ink);
  font-size: clamp(1.35rem, 3vw, 1.75rem);
  line-height: 1.05;
  letter-spacing: -0.03em;
}

.owner-topbar > span,
.auth-topbar > span,
.viewer-topbar > span,
.driver-topbar > span {
  display: inline-flex;
  width: auto;
  height: 38px;
  min-height: 38px;
  margin: 0;
  padding: 0 12px;
  align-items: center;
  border: 1px solid #cddcfb;
  border-radius: 999px;
  background: var(--sp-blue-soft);
  color: var(--sp-blue-dark);
  font-size: 0.76rem;
  font-weight: 900;
}

.owner-driver-toggle,
.auth-status-card,
.viewer-status-card,
.driver-status-row {
  position: relative;
  z-index: 1;
  border: 1px solid #dce6f4;
  border-radius: 12px;
  background: var(--sp-surface-soft);
  color: var(--sp-ink);
}

.owner-driver-toggle {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  max-width: none;
  padding: 13px 14px;
  align-items: center;
  gap: 14px;
}

.owner-driver-toggle strong,
.auth-status-card strong { color: var(--sp-ink); font-size: 0.9rem; }
.owner-driver-toggle em,
.auth-status-card span { margin-top: 3px; color: var(--sp-muted); font-size: 0.76rem; }

.switch span { background: #ced7e2; }
.switch input:checked + span { background: var(--sp-blue); }

.auth-status-card {
  display: grid;
  max-width: none;
  padding: 13px 14px;
  gap: 3px;
}

.driver-status-row {
  display: flex;
  width: fit-content;
  padding: 6px;
  gap: 6px;
}

.driver-status-row span {
  min-height: 30px;
  padding: 0 10px;
  border-radius: 8px;
  background: #fff;
  color: var(--sp-copy);
  font-size: 0.75rem;
}

.owner-build-grid,
.auth-content,
.viewer-content {
  padding: 14px;
  gap: 14px;
  background: var(--sp-bg);
}

.owner-build-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(320px, 0.92fr);
}

.owner-panel,
.owner-driver-cockpit,
.auth-card,
.viewer-route div,
.viewer-metrics div,
.viewer-panel,
.viewer-limits,
.route-card div,
.driver-privacy-card,
.next-driver-action,
.driver-health-strip div,
.admin-panel,
.admin-metrics div {
  border: 1px solid var(--sp-border);
  border-radius: 12px;
  background: var(--sp-surface);
  color: var(--sp-ink);
  box-shadow: 0 5px 16px rgba(40, 62, 91, 0.025);
}

.owner-panel { padding: 16px; gap: 14px; }
.owner-panel .panel-heading strong,
.admin-panel .panel-heading strong,
.viewer-section-heading strong { color: var(--sp-ink); font-size: 1.08rem; }

.owner-panel label,
.contact-heading,
.auth-form label,
.pricing-intake-form label {
  color: var(--sp-muted);
  font-size: 0.73rem;
  font-weight: 850;
}

.owner-panel input,
.owner-panel select,
.auth-form input,
.auth-form select,
.pricing-intake-form input,
.pricing-intake-form select,
.admin-actions input,
.admin-create-form input,
.next-driver-action select,
.modal-card input,
.modal-card textarea {
  width: 100%;
  height: 44px;
  padding: 0 12px;
  border: 1px solid #d7dfe8;
  border-radius: 9px;
  background: #fff;
  color: var(--sp-ink);
  box-shadow: inset 0 1px 2px rgba(26, 45, 70, 0.025);
}

.modal-card textarea { height: auto; min-height: 96px; padding: 12px; }

.owner-panel input::placeholder,
.auth-form input::placeholder,
.admin-actions input::placeholder,
.admin-create-form input::placeholder,
.modal-card textarea::placeholder { color: #9aa6b5; }

.owner-panel input:focus,
.owner-panel select:focus,
.auth-form input:focus,
.auth-form select:focus,
.pricing-intake-form input:focus,
.admin-actions input:focus,
.admin-create-form input:focus {
  border-color: #8fb0f7;
  outline: 3px solid rgba(36, 107, 254, 0.1);
}

.rate-confirm-card,
.address-confirm-card,
.external-view-card,
.owner-upload-card {
  border: 1px solid var(--sp-border);
  border-radius: 10px;
  background: var(--sp-surface-soft);
  color: var(--sp-ink);
}

.rate-confirm-card strong,
.address-confirm-card strong,
.external-view-card strong { color: var(--sp-ink); }
.rate-confirm-card span,
.address-confirm-card span,
.external-view-card span { color: var(--sp-muted); }

.viewer-chips { gap: 6px; }
.viewer-chip {
  border: 1px solid #d9e2ec;
  background: #eef3f8;
  color: var(--sp-copy);
}
.viewer-chip button { background: #dfe7ef; color: #64748a; }

.primary-action,
.owner-primary,
.auth-form button,
.pricing-intake-form button,
.admin-create-form button,
#primaryDriverAction:not(:disabled),
.next-driver-action > button:not(#undoStep),
.modal-actions button:last-child {
  min-height: 44px;
  border: 1px solid var(--sp-blue);
  border-radius: 9px;
  background: var(--sp-blue);
  color: #fff;
  font-weight: 850;
  box-shadow: 0 7px 16px rgba(36, 107, 254, 0.15);
}

.primary-action:hover,
.owner-primary:hover,
.auth-form button:hover,
.admin-create-form button:hover,
#primaryDriverAction:not(:disabled):hover { background: var(--sp-blue-dark); }

.secondary-action,
#undoStep,
.driver-tools button,
.rate-confirm-actions button,
.address-confirm-actions button,
.link-actions button,
.external-view-card a,
.viewer-doc button,
.modal-actions button:first-child {
  border: 1px solid #d7e0e9;
  border-radius: 9px;
  background: #fff;
  color: var(--sp-copy);
  font-weight: 800;
}

.owner-driver-cockpit { margin: 0 14px 14px; padding: 14px; }
.driver-mini-route div { border: 1px solid var(--sp-border); background: var(--sp-surface-soft); }
.driver-mini-route span,
.driver-health-strip span { color: var(--sp-muted); }
.driver-mini-route strong,
.driver-health-strip strong { color: var(--sp-ink); }
.driver-mini-route small { color: var(--sp-muted); }

.route-card {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  padding: 14px;
  background: var(--sp-bg);
}

.route-card div { min-height: 82px; padding: 14px; }
.route-card span { margin-bottom: 6px; color: var(--sp-muted); font-size: 0.7rem; letter-spacing: 0.06em; }
.route-card strong { margin-bottom: 5px; color: var(--sp-ink); font-size: 1rem; }
.route-card small { color: var(--sp-muted); font-size: 0.76rem; }

.driver-privacy-card,
.next-driver-action { margin: 0 14px 10px; padding: 15px; }
.driver-privacy-card { gap: 12px; }
.driver-privacy-card .pulse-dot { margin-top: 5px; background: var(--sp-amber); box-shadow: 0 0 0 6px rgba(216, 137, 38, 0.12); }
.driver-privacy-card strong { color: var(--sp-ink); font-size: 1rem; }
.driver-privacy-card p,
.next-driver-action p:not(.driver-eyebrow) { color: var(--sp-muted); font-size: 0.8rem; line-height: 1.4; }
.next-driver-action .driver-eyebrow { margin-bottom: 6px; color: var(--sp-blue); font-size: 0.68rem; }
.next-driver-action h2 { margin-bottom: 6px; color: var(--sp-ink); font-size: 1.3rem; }
#primaryDriverAction { min-height: 50px; font-size: 0.95rem; }
#primaryDriverAction:disabled { border-color: #dce3eb; background: #e9edf2; color: #8b97a8; box-shadow: none; }
#undoStep { color: var(--sp-copy); }

.driver-tools { gap: 8px; padding: 0 14px 10px; }
.driver-tools button { min-height: 40px; color: var(--sp-copy); font-size: 0.78rem; }
.driver-card .completed-steps { margin: 0 14px 10px; }
.driver-card .completed-steps span { border-color: #cce9dd; background: var(--sp-green-soft); color: #177a5b; }
.driver-health-strip { gap: 8px; padding: 0 14px 14px; }
.driver-health-strip div { min-height: 62px; padding: 11px; }

.viewer-content { display: grid; }
.viewer-status-card {
  width: 100%;
  max-width: none;
  display: flex;
  padding: 14px;
  align-items: flex-start;
  gap: 12px;
}
.viewer-status-card strong { color: var(--sp-ink); font-size: 1.35rem; }
.viewer-status-card span { margin-top: 4px; color: var(--sp-muted); font-size: 0.8rem; }
.pulse-dot.live { background: var(--sp-green); box-shadow: 0 0 0 6px rgba(33, 161, 121, 0.12); }
.viewer-route,
.viewer-metrics { gap: 10px; }
.viewer-route div,
.viewer-metrics div { min-height: 84px; padding: 14px; }
.viewer-route span,
.viewer-metrics span { margin-bottom: 6px; color: var(--sp-muted); font-size: 0.69rem; letter-spacing: 0.06em; }
.viewer-route strong,
.viewer-metrics strong { color: var(--sp-ink); font-size: 1rem; }
.viewer-route small { margin-top: 5px; color: var(--sp-muted); font-size: 0.76rem; }
.viewer-panel { padding: 16px; }
.viewer-limits { padding: 14px; background: #f3f7fd; border-color: #dbe6f4; }
.viewer-limits strong { color: var(--sp-ink); }
.viewer-limits span { color: var(--sp-muted); }
.viewer-timeline li,
.viewer-doc,
.viewer-doc-preview,
.pricing-capacity-list li {
  border: 1px solid var(--sp-border);
  border-radius: 9px;
  background: var(--sp-surface-soft);
  color: var(--sp-copy);
}
.viewer-timeline li::before { background: var(--sp-blue); box-shadow: 0 0 0 5px rgba(36, 107, 254, 0.1); }
.viewer-timeline time,
.viewer-doc span,
.viewer-doc-preview span { color: var(--sp-muted); }
.viewer-timeline strong,
.viewer-doc strong,
.viewer-doc-preview strong { color: var(--sp-ink); }
.viewer-timeline span,
.viewer-doc-preview p { color: var(--sp-muted); }
.viewer-doc.selected { border-color: #9bb8f5; background: var(--sp-blue-soft); }
.viewer-doc button { color: var(--sp-blue-dark); border-color: #bfd1f8; background: var(--sp-blue-soft); }
.viewer-doc-preview button { border-color: #d7e0e9; background: #fff; color: var(--sp-copy); }

.pricing-capacity-list li { color: var(--sp-copy); }
.pricing-plan-card.recommended { border-color: #8ab1ff; box-shadow: 0 0 0 2px rgba(36, 107, 254, 0.08); }
.pricing-plan-card.recommended .viewer-label { color: var(--sp-blue); }
.pricing-recommendation { border-color: #c6e8dc; background: var(--sp-green-soft); }
.pricing-enterprise-action { display: flex; align-items: center; justify-content: center; text-align: center; text-decoration: none; }
.pricing-plan-card.enterprise-fit { border-color: #e5bb73; box-shadow: 0 0 0 2px rgba(229, 187, 115, 0.16); }
.pricing-plan-card.enterprise-fit .viewer-label { color: #a86612; }

.auth-content { min-height: 380px; align-content: center; }
.auth-card { width: min(100%, 650px); margin: 0 auto; padding: 20px; }
.auth-card-wide { width: min(100%, 840px); }
.auth-body { background: var(--sp-bg); }
.auth-card .panel-heading strong { color: var(--sp-ink); font-size: 1.08rem; }
.auth-form { gap: 14px; }
.auth-form button { min-height: 50px; font-size: 0.96rem; }
.auth-link,
.auth-text-button { color: var(--sp-blue); }
.auth-form .auth-check {
  display: flex !important;
  width: fit-content;
  align-items: center;
  justify-content: flex-start;
  gap: 9px;
  color: var(--sp-copy);
}
.auth-form .auth-check input {
  width: 18px;
  height: 18px;
  min-height: 18px;
  flex: 0 0 auto;
  padding: 0;
  accent-color: var(--sp-blue);
}

.switch { background: var(--sp-blue); }
.switch span { background: #fff; }
.switch:has(input:not(:checked)) { background: #cbd5e1; }

.contacts-panel .viewer-chip {
  border-color: #d9e2ec;
  background: #eef3f8;
  color: var(--sp-copy);
}
.contacts-panel .viewer-chip span { color: var(--sp-copy); }
.contacts-panel .viewer-chip button { background: #dfe7ef; color: #64748a; }

.next-driver-action #driverUploadDocument { width: 100%; margin-top: 8px; }

.admin-shell {
  min-height: 100vh;
  padding: 28px;
  background: var(--sp-bg);
  color: var(--sp-ink);
}
.admin-header { max-width: 1440px; margin-bottom: 18px; align-items: center; }
.admin-header > div:first-child {
  position: relative;
  min-height: 48px;
  padding-left: 58px;
}
.admin-header > div:first-child::before {
  content: "SP+";
  position: absolute;
  left: 0;
  top: 0;
  display: grid;
  width: 46px;
  height: 46px;
  place-items: center;
  border-radius: 12px;
  background: var(--sp-blue);
  color: #fff;
  font-size: 0.78rem;
  font-weight: 950;
  box-shadow: 0 8px 20px rgba(36, 107, 254, 0.18);
}
.admin-header h1 { color: var(--sp-ink); font-size: clamp(2rem, 4vw, 3rem); letter-spacing: -0.04em; }
.admin-actions { grid-template-columns: minmax(190px, 1fr) auto auto; }
.admin-actions button { min-height: 44px; border: 1px solid #d7e0e9; border-radius: 9px; background: #fff; color: var(--sp-copy); }
.admin-actions button:first-of-type { border-color: var(--sp-blue); background: var(--sp-blue); color: #fff; }
.admin-actions button:last-child { background: #fff; color: var(--sp-copy); }
.admin-metrics,
.admin-layout { max-width: 1440px; }
.admin-metrics { gap: 10px; margin-bottom: 14px; }
.admin-metrics div { min-height: 94px; padding: 16px; }
.admin-metrics span { color: var(--sp-muted); font-size: 0.7rem; letter-spacing: 0.06em; }
.admin-metrics strong { color: var(--sp-ink); font-size: 1.8rem; }
.admin-layout { gap: 14px; }
.admin-panel { min-height: 280px; padding: 16px; }
.admin-create-form button { padding: 0 15px; }
.admin-list-item { border: 1px solid var(--sp-border); border-radius: 9px; background: var(--sp-surface-soft); }
.admin-list-item strong { color: var(--sp-ink); }
.admin-list-item span,
.admin-list-item small { color: var(--sp-muted); }

.billing-card {
  width: 100%;
  padding: 30px;
  text-align: center;
}
.billing-card::before {
  content: "SP+";
  display: grid;
  width: 48px;
  height: 48px;
  margin: 0 auto 18px;
  place-items: center;
  border-radius: 13px;
  background: var(--sp-blue);
  color: #fff;
  font-size: 0.82rem;
  font-weight: 950;
  box-shadow: 0 8px 20px rgba(36, 107, 254, 0.18);
}
.billing-card h1 { margin-bottom: 10px; color: var(--sp-ink); font-size: 2rem; letter-spacing: -0.04em; }
.billing-card p:not(.owner-label) { color: var(--sp-muted); line-height: 1.55; }
.billing-card a {
  display: inline-flex;
  min-height: 44px;
  margin-top: 8px;
  padding: 0 18px;
  align-items: center;
  justify-content: center;
  border-radius: 9px;
  background: var(--sp-blue);
  color: #fff;
  font-weight: 850;
  text-decoration: none;
}

[data-billing-status-page] .viewer-content > .primary-action {
  grid-column: 1 / -1;
  width: 100%;
}

.modal { background: rgba(22, 40, 63, 0.45); backdrop-filter: blur(3px); }
.modal-card { border: 1px solid var(--sp-border); border-radius: 14px; background: #fff; color: var(--sp-ink); box-shadow: 0 24px 60px rgba(22, 40, 63, 0.2); }
.modal-card .muted { color: var(--sp-muted); }
.reason-grid button { border: 1px solid var(--sp-border); border-radius: 9px; background: var(--sp-surface-soft); color: var(--sp-copy); }
.reason-grid button.selected { border-color: #91b2f8; background: var(--sp-blue-soft); color: var(--sp-blue-dark); }

@media (min-width: 900px) {
  .viewer-content { grid-template-columns: minmax(0, 1.08fr) minmax(340px, 0.92fr); }
  .viewer-route,
  .viewer-metrics,
  .viewer-limits { grid-column: 1 / -1; }
  .pricing-intake,
  .pricing-feature-note { grid-column: 1 / -1; }
}

@media (max-width: 800px) {
  .owner-shell,
  .auth-shell,
  .viewer-shell,
  .driver-link-shell,
  .billing-shell { padding: 14px; }
  .owner-build-grid,
  .auth-form-two,
  .admin-layout { grid-template-columns: 1fr; }
  .admin-shell { padding: 14px; }
  .admin-header { grid-template-columns: 1fr; align-items: stretch; }
  .admin-metrics { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .admin-create-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .admin-create-form button { grid-column: 1 / -1; }
}

@media (max-width: 560px) {
  .owner-shell,
  .auth-shell,
  .viewer-shell,
  .driver-link-shell,
  .billing-shell,
  .admin-shell { padding: 0; }
  .owner-page-card,
  .auth-page-card,
  .viewer-card,
  .driver-card,
  .billing-card { min-height: 100vh; border: 0; border-radius: 0; box-shadow: none; }
  .owner-hero,
  .auth-hero,
  .viewer-hero,
  .driver-hero { padding: 16px; }
  .owner-topbar,
  .auth-topbar,
  .viewer-topbar,
  .driver-topbar { grid-template-columns: 40px minmax(0, 1fr) auto; gap: 10px; }
  .owner-topbar::before,
  .auth-topbar::before,
  .viewer-topbar::before,
  .driver-topbar::before { width: 40px; height: 40px; border-radius: 11px; }
  .owner-topbar h1,
  .auth-topbar h1,
  .viewer-topbar h1,
  .driver-topbar h1 { font-size: 1.25rem; }
  .owner-topbar > span,
  .auth-topbar > span,
  .viewer-topbar > span,
  .driver-topbar > span { height: 34px; min-height: 34px; padding: 0 9px; font-size: 0.68rem; }
  .owner-build-grid,
  .auth-content,
  .viewer-content { padding: 10px; }
  .field-grid,
  .route-input-grid,
  .viewer-route,
  .viewer-metrics,
  .pricing-intake-form { grid-template-columns: 1fr; }
  .route-card { padding: 10px; }
  .driver-privacy-card,
  .next-driver-action { margin: 0 10px 8px; }
  .driver-tools { padding: 0 10px 8px; }
  .driver-health-strip { padding: 0 10px 10px; }
  .admin-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 10px; }
  .admin-header { padding: 16px 14px 0; }
  .admin-layout { padding: 0 10px 10px; }
  .admin-actions { grid-template-columns: 1fr 1fr; }
  .admin-actions input { grid-column: 1 / -1; }
  .admin-create-form { grid-template-columns: 1fr; }
  .admin-panel { min-height: 0; }
  .external-view-card:has(#ownerDocumentType) { grid-template-columns: 1fr; }
  .external-view-card:has(#ownerDocumentType) .link-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; }
}

/* Shipment Plus public home */
.home-body {
  --home-navy: #0b1730;
  --home-navy-soft: #142443;
  --home-blue: #246bfe;
  --home-blue-dark: #174fc3;
  --home-sky: #eaf1ff;
  --home-mint: #34d399;
  --home-ink: #12243d;
  --home-copy: #53657c;
  --home-line: #dfe7f1;
  --home-bg: #f7f9fc;
  margin: 0;
  overflow-x: hidden;
  background: #fff;
  color: var(--home-ink);
  color-scheme: light;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.home-body *,
.home-body *::before,
.home-body *::after { box-sizing: border-box; }

.home-body a { color: inherit; }

.home-header {
  position: sticky;
  z-index: 50;
  top: 0;
  display: grid;
  grid-template-columns: minmax(220px, 1fr) auto minmax(220px, 1fr);
  min-height: 78px;
  padding: 0 clamp(20px, 5vw, 76px);
  align-items: center;
  gap: 32px;
  border-bottom: 1px solid rgba(217, 226, 239, 0.8);
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(18px);
}

.home-brand { display: inline-flex; width: fit-content; align-items: center; gap: 11px; text-decoration: none; }
.home-brand-mark {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  flex: 0 0 auto;
  border-radius: 12px;
  background: var(--home-blue);
  color: #fff;
  font-size: 0.88rem;
  font-weight: 950;
  letter-spacing: -0.06em;
  box-shadow: 0 8px 22px rgba(36, 107, 254, 0.2);
}
.home-brand-mark span { color: #c2d6ff; }
.home-brand > span:last-child { display: grid; gap: 1px; }
.home-brand strong { font-size: 0.94rem; letter-spacing: -0.01em; }
.home-brand small { color: #76869a; font-size: 0.65rem; }
.home-nav { display: flex; align-items: center; justify-content: center; gap: clamp(20px, 2.4vw, 38px); }
.home-nav a,
.home-header-actions a { font-size: 0.82rem; font-weight: 800; text-decoration: none; }
.home-nav a { color: #526279; }
.home-nav a:hover,
.home-login:hover { color: var(--home-blue); }
.home-header-actions { display: flex; align-items: center; justify-content: flex-end; gap: 20px; }
.home-button {
  display: inline-flex;
  min-height: 54px;
  padding: 0 23px;
  align-items: center;
  justify-content: center;
  gap: 14px;
  border: 1px solid var(--home-blue);
  border-radius: 12px;
  background: var(--home-blue);
  color: #fff !important;
  font-size: 0.88rem;
  font-weight: 900;
  text-decoration: none;
  box-shadow: 0 13px 28px rgba(36, 107, 254, 0.22);
  transition: transform 160ms ease, background 160ms ease, box-shadow 160ms ease;
}
.home-button:hover { transform: translateY(-2px); background: var(--home-blue-dark); box-shadow: 0 16px 34px rgba(36, 107, 254, 0.27); }
.home-button-small { min-height: 42px; padding: 0 17px; border-radius: 10px; box-shadow: none; }

.home-hero {
  position: relative;
  display: grid;
  min-height: 730px;
  padding: clamp(70px, 8vw, 118px) clamp(20px, 6vw, 96px) 92px;
  grid-template-columns: minmax(0, 0.83fr) minmax(540px, 1.17fr);
  align-items: center;
  gap: clamp(38px, 6vw, 100px);
  overflow: hidden;
  background:
    radial-gradient(circle at 88% 14%, rgba(80, 137, 255, 0.13), transparent 30%),
    radial-gradient(circle at 8% 70%, rgba(52, 211, 153, 0.07), transparent 28%),
    linear-gradient(180deg, #fff, #f8faff);
}
.home-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.46;
  pointer-events: none;
  background-image: linear-gradient(rgba(20, 50, 90, 0.035) 1px, transparent 1px), linear-gradient(90deg, rgba(20, 50, 90, 0.035) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: linear-gradient(90deg, transparent 4%, #000 48%, transparent 100%);
}
.home-hero-copy { position: relative; z-index: 2; max-width: 650px; }
.home-kicker { margin: 0 0 16px; color: var(--home-blue); font-size: 0.7rem; font-weight: 950; letter-spacing: 0.14em; text-transform: uppercase; }
.home-kicker > span { display: inline-block; width: 24px; height: 2px; margin: 0 8px 3px 0; background: var(--home-mint); }
.home-hero h1 { max-width: 700px; margin: 0; color: var(--home-navy); font-size: clamp(3.6rem, 6vw, 6.7rem); line-height: 0.93; letter-spacing: -0.066em; }
.home-hero h1 em { display: block; color: var(--home-blue); font-style: normal; }
.home-lede { max-width: 630px; margin: 28px 0 0; color: var(--home-copy); font-size: clamp(1rem, 1.35vw, 1.16rem); line-height: 1.75; }
.home-hero-actions { display: flex; margin-top: 34px; align-items: center; gap: 27px; }
.home-text-link { display: inline-flex; align-items: center; gap: 10px; color: var(--home-ink); font-size: 0.86rem; font-weight: 900; text-decoration: none; }
.home-text-link:hover { color: var(--home-blue); }
.home-play { display: grid; width: 35px; height: 35px; place-items: center; border: 1px solid #d5dfec; border-radius: 50%; background: #fff; color: var(--home-blue); font-size: 0.62rem; box-shadow: 0 7px 20px rgba(28, 58, 97, 0.09); }
.home-trust-list { display: flex; margin: 30px 0 0; padding: 0; flex-wrap: wrap; gap: 12px 23px; color: #66778d; font-size: 0.71rem; font-weight: 750; list-style: none; }
.home-trust-list span { display: inline-grid; width: 19px; height: 19px; margin-right: 5px; place-items: center; border-radius: 50%; background: #dff8ee; color: #11805b; font-size: 0.65rem; }

.home-hero-visual { position: relative; z-index: 2; min-height: 550px; }
.home-orbit { position: absolute; border: 1px solid rgba(36, 107, 254, 0.12); border-radius: 50%; }
.home-orbit-one { width: 620px; height: 620px; left: 8%; top: -12%; }
.home-orbit-two { width: 450px; height: 450px; left: 20%; top: 3%; border-style: dashed; }
.home-command-card {
  position: absolute;
  z-index: 2;
  top: 24px;
  left: 2%;
  width: min(100%, 700px);
  overflow: hidden;
  border: 1px solid rgba(147, 165, 190, 0.28);
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 35px 80px rgba(23, 49, 86, 0.19);
  transform: perspective(1100px) rotateY(-4deg) rotateX(1deg);
}
.home-command-topbar { display: flex; min-height: 64px; padding: 0 18px; align-items: center; justify-content: space-between; border-bottom: 1px solid #e4eaf2; }
.home-command-topbar > div { display: flex; align-items: center; gap: 11px; font-size: 0.82rem; }
.home-mini-logo { display: grid; width: 34px; height: 34px; place-items: center; border-radius: 9px; background: var(--home-blue); color: #fff; font-size: 0.64rem; font-weight: 950; }
.home-live-pill { display: inline-flex; padding: 7px 10px; align-items: center; gap: 7px; border-radius: 999px; background: #e6f8f1; color: #14835f; font-size: 0.66rem; font-weight: 900; }
.home-live-pill i { width: 7px; height: 7px; border-radius: 50%; background: var(--home-mint); box-shadow: 0 0 0 4px rgba(52, 211, 153, 0.15); }
.home-route-row { display: grid; min-height: 96px; padding: 15px 19px; grid-template-columns: minmax(0, 1fr) 90px minmax(0, 1fr); align-items: center; gap: 12px; }
.home-route-row > div:last-child { text-align: right; }
.home-route-row small,
.home-command-metrics small { display: block; margin-bottom: 5px; color: #8795a8; font-size: 0.56rem; font-weight: 900; letter-spacing: 0.1em; text-transform: uppercase; }
.home-route-row strong { display: block; color: var(--home-ink); font-size: 0.9rem; }
.home-route-row span { color: #8090a5; font-size: 0.62rem; }
.home-route-line { position: relative; display: flex; justify-content: space-between; }
.home-route-line::before { content: ""; position: absolute; top: 4px; left: 4px; right: 4px; border-top: 2px dotted #adbed5; }
.home-route-line i { position: relative; width: 9px; height: 9px; border: 2px solid var(--home-blue); border-radius: 50%; background: #fff; }
.home-route-line i:nth-child(2) { border-color: var(--home-mint); background: var(--home-mint); }
.home-map-panel { position: relative; height: 245px; overflow: hidden; background: #eef3f8; }
.home-map-panel::before { content: ""; position: absolute; inset: 0; opacity: 0.46; background-image: linear-gradient(25deg, transparent 48%, #d4dde8 49%, #d4dde8 51%, transparent 52%), linear-gradient(-30deg, transparent 48%, #dbe3ec 49%, #dbe3ec 51%, transparent 52%); background-size: 84px 64px, 112px 82px; }
.home-map-panel svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.home-route-shadow { fill: none; stroke: rgba(36, 107, 254, 0.18); stroke-width: 12; stroke-linecap: round; }
.home-route-path { fill: none; stroke: url(#routeGradient); stroke-width: 4; stroke-linecap: round; stroke-dasharray: 7 7; }
.home-route-dot { fill: #fff; stroke: #246bfe; stroke-width: 5; }
.home-map-city { position: absolute; z-index: 2; color: #73849a; font-size: 0.57rem; font-weight: 800; }
.city-dallas { left: 8%; bottom: 12%; }.city-shreveport { left: 45%; bottom: 39%; }.city-atlanta { right: 6%; top: 12%; }
.home-truck-marker { position: absolute; z-index: 4; left: 52%; top: 44%; display: grid; width: 34px; height: 34px; place-items: center; border: 4px solid #fff; border-radius: 50%; background: var(--home-blue); color: #fff; font-weight: 950; box-shadow: 0 7px 18px rgba(36, 107, 254, 0.32); transform: rotate(-27deg); }
.home-eta-card { position: absolute; z-index: 3; right: 15px; bottom: 14px; min-width: 154px; padding: 12px; border: 1px solid rgba(214, 225, 237, 0.9); border-radius: 11px; background: rgba(255,255,255,0.94); box-shadow: 0 10px 24px rgba(37, 56, 84, 0.13); }
.home-eta-card small { display: block; margin-bottom: 4px; color: #15906a; font-size: 0.54rem; font-weight: 950; letter-spacing: 0.11em; }
.home-eta-card strong { display: block; font-size: 0.72rem; }.home-eta-card span { color: #7b8a9e; font-size: 0.57rem; }
.home-command-metrics { display: grid; padding: 14px 18px 17px; grid-template-columns: repeat(3, 1fr); gap: 9px; background: #fff; }
.home-command-metrics > div { min-height: 62px; padding: 11px; border: 1px solid #e5ebf2; border-radius: 10px; background: #fbfcfe; }
.home-command-metrics strong { color: #31465f; font-size: 0.67rem; }.home-command-metrics strong i { display: inline-block; width: 7px; height: 7px; margin-right: 4px; border-radius: 50%; }.home-command-metrics .green { background: var(--home-mint); }
.home-phone-card { position: absolute; z-index: 5; right: -3%; bottom: -8px; width: 215px; min-height: 365px; padding: 24px 14px 15px; border: 7px solid var(--home-navy); border-radius: 28px; background: #fff; box-shadow: 0 28px 55px rgba(12, 29, 58, 0.28); transform: rotate(3deg); }
.home-phone-speaker { position: absolute; top: 7px; left: 50%; width: 54px; height: 5px; border-radius: 99px; background: #26344a; transform: translateX(-50%); }
.home-phone-bar { display: flex; min-height: 42px; margin: 0 -2px 20px; align-items: center; justify-content: space-between; border-bottom: 1px solid #e9edf3; color: var(--home-ink); font-size: 0.67rem; font-weight: 900; }
.home-phone-bar i { color: #8492a5; font-style: normal; letter-spacing: 1px; }.home-phone-label { color: var(--home-blue); font-size: 0.52rem; font-weight: 950; letter-spacing: 0.12em; }.home-phone-card h2 { margin: 7px 0 6px; color: var(--home-ink); font-size: 1.1rem; letter-spacing: -0.03em; }.home-phone-card p { margin: 0 0 19px; color: #718096; font-size: 0.65rem; line-height: 1.45; }.home-phone-card button { width: 100%; min-height: 42px; border: 0; border-radius: 9px; background: var(--home-blue); color: #fff; font-size: 0.65rem; font-weight: 900; }.home-phone-tools { display: grid; margin-top: 11px; grid-template-columns: repeat(3, 1fr); gap: 5px; }.home-phone-tools span { display: grid; min-height: 43px; place-items: center; border: 1px solid #e2e8f0; border-radius: 8px; background: #f8fafc; color: #68788e; font-size: 0.55rem; font-weight: 800; }
.home-alert-card { position: absolute; z-index: 6; left: -5%; bottom: 16px; display: flex; min-width: 225px; padding: 12px 15px; align-items: center; gap: 11px; border: 1px solid #d8e8e1; border-radius: 13px; background: rgba(255,255,255,0.96); box-shadow: 0 16px 35px rgba(29, 62, 82, 0.16); }.home-alert-card > span { display: grid; width: 32px; height: 32px; place-items: center; border-radius: 10px; background: #dff8ee; color: #15845f; font-weight: 950; }.home-alert-card small,.home-alert-card strong { display: block; }.home-alert-card small { margin-bottom: 2px; color: #178863; font-size: 0.5rem; font-weight: 950; letter-spacing: 0.1em; }.home-alert-card strong { color: #31445c; font-size: 0.65rem; }

.home-proof { display: grid; min-height: 126px; padding: 25px clamp(20px, 7vw, 110px); grid-template-columns: auto 1fr; align-items: center; gap: 50px; border-top: 1px solid #e7ecf3; border-bottom: 1px solid #e7ecf3; background: #fff; }.home-proof p { margin: 0; color: #92a0b0; font-size: 0.66rem; font-weight: 900; letter-spacing: 0.11em; text-transform: uppercase; }.home-proof div { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px 30px; color: #78879a; font-size: clamp(0.78rem, 1.2vw, 0.92rem); font-weight: 900; }

.home-section { padding: 120px clamp(20px, 7vw, 110px); }.home-product { background: var(--home-bg); }.home-section-heading { display: grid; max-width: 1260px; margin: 0 auto 62px; grid-template-columns: minmax(0, 1fr) minmax(300px, 0.54fr); align-items: end; gap: 55px; }.home-section-heading h2,.home-how h2,.home-cta h2 { margin: 0; color: var(--home-navy); font-size: clamp(2.4rem, 4.2vw, 4.4rem); line-height: 1.02; letter-spacing: -0.055em; }.home-section-heading > p,.home-how-intro > p:not(.home-kicker) { margin: 0; color: var(--home-copy); font-size: 0.93rem; line-height: 1.75; }
.home-feature { position: relative; max-width: 1260px; margin: 0 auto; overflow: hidden; border: 1px solid var(--home-line); border-radius: 24px; background: #fff; box-shadow: 0 20px 55px rgba(36, 59, 91, 0.07); }.home-feature-dashboard { display: grid; min-height: 560px; grid-template-columns: minmax(330px, 0.67fr) minmax(540px, 1.33fr); align-items: center; }.home-feature-copy { position: relative; z-index: 2; padding: clamp(32px, 5vw, 68px); }.home-feature-number { display: grid; width: 38px; height: 38px; margin-bottom: 34px; place-items: center; border: 1px solid #cbd9f6; border-radius: 10px; background: var(--home-sky); color: var(--home-blue); font-size: 0.67rem; font-weight: 950; }.home-feature-copy h3 { margin: 0 0 18px; color: var(--home-navy); font-size: clamp(1.9rem, 3vw, 3rem); line-height: 1.05; letter-spacing: -0.045em; }.home-feature-copy > p:not(.home-kicker) { margin: 0; color: var(--home-copy); font-size: 0.88rem; line-height: 1.7; }.home-feature-copy ul { display: grid; margin: 28px 0 0; padding: 0; gap: 12px; list-style: none; }.home-feature-copy li { position: relative; padding-left: 25px; color: #40536c; font-size: 0.76rem; font-weight: 800; }.home-feature-copy li::before { content: "✓"; position: absolute; left: 0; display: grid; width: 17px; height: 17px; place-items: center; border-radius: 50%; background: #e0f8ef; color: #17855f; font-size: 0.57rem; }
.home-product-shot { margin: 0; overflow: hidden; border: 1px solid #d9e2ed; background: #fff; box-shadow: 0 24px 55px rgba(27, 52, 86, 0.14); }.home-product-shot img { display: block; width: 100%; height: auto; object-fit: cover; object-position: top; }.home-product-shot figcaption { display: flex; min-height: 44px; padding: 0 14px; align-items: center; justify-content: space-between; gap: 10px; color: #7b899b; font-size: 0.62rem; }.home-product-shot figcaption span { display: inline-flex; align-items: center; gap: 7px; color: #40546f; font-weight: 850; }.home-product-shot figcaption i { width: 7px; height: 7px; border-radius: 50%; background: var(--home-mint); }.home-product-shot-wide { margin: 60px -80px 50px 0; border-radius: 17px; transform: rotate(-1deg); }.home-product-shot-wide img { aspect-ratio: 16 / 9; }.home-feature-pair { display: grid; max-width: 1260px; margin: 26px auto 0; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px; }.home-feature-pair .home-feature { min-height: 720px; margin: 0; }.home-feature-pair .home-feature-copy { padding-bottom: 32px; }.home-feature-pair .home-feature-copy h3 { font-size: clamp(1.8rem, 2.8vw, 2.65rem); }.home-product-shot-phone { width: 46%; max-height: 410px; margin: 0 auto -18px; border: 7px solid var(--home-navy); border-bottom: 0; border-radius: 26px 26px 0 0; }.home-product-shot-phone img { min-height: 350px; aspect-ratio: 0.62; object-position: top; }.home-product-shot-phone figcaption { display: none; }.home-feature-mobile { background: radial-gradient(circle at 50% 110%, rgba(36,107,254,0.12), transparent 40%), #fff; }.home-feature-share { background: #eef4ff; }.home-product-shot-viewer { margin: 0 35px -30px; border-radius: 16px 16px 0 0; }.home-product-shot-viewer img { min-height: 330px; aspect-ratio: 1.25; object-fit: cover; object-position: top; }

.home-stories { padding: 120px clamp(20px, 7vw, 110px); background: var(--home-navy); color: #fff; }.home-section-heading-light h2 { color: #fff; }.home-section-heading-light > p { color: #aebbd0; }.home-story-grid { display: grid; max-width: 1260px; margin: 0 auto; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }.home-story-card { display: flex; min-height: 570px; padding: clamp(27px, 3vw, 39px); flex-direction: column; border: 1px solid rgba(255,255,255,0.11); border-radius: 20px; background: rgba(255,255,255,0.045); }.home-story-card-featured { border-color: rgba(91,140,255,0.5); background: linear-gradient(150deg, rgba(36,107,254,0.26), rgba(255,255,255,0.045) 60%); transform: translateY(-16px); }.home-story-meta { display: flex; justify-content: space-between; color: #91a2ba; font-size: 0.58rem; font-weight: 900; letter-spacing: 0.1em; text-transform: uppercase; }.home-story-icon { display: grid; width: 48px; height: 48px; margin: 36px 0 28px; place-items: center; border: 1px solid rgba(255,255,255,0.13); border-radius: 13px; background: rgba(255,255,255,0.06); font-size: 1.1rem; }.home-story-card h3 { margin: 0 0 17px; font-size: clamp(1.45rem, 2.2vw, 2rem); line-height: 1.13; letter-spacing: -0.035em; }.home-story-card > p { margin: 0; color: #b8c4d6; font-size: 0.79rem; line-height: 1.75; }.home-story-card blockquote { margin: 28px 0 30px; padding-left: 15px; border-left: 2px solid var(--home-mint); color: #edf4ff; font-size: 0.75rem; font-style: italic; line-height: 1.55; }.home-story-person { display: flex; margin-top: auto; align-items: center; gap: 11px; }.home-story-person > span { display: grid; width: 39px; height: 39px; place-items: center; border-radius: 50%; background: #26426d; color: #cfe0ff; font-size: 0.62rem; font-weight: 950; }.home-story-person strong,.home-story-person small { display: block; }.home-story-person strong { font-size: 0.73rem; }.home-story-person small { margin-top: 2px; color: #8fa0b7; font-size: 0.59rem; }

.home-how { display: grid; max-width: 1478px; margin: 0 auto; grid-template-columns: minmax(0, 0.83fr) minmax(460px, 1.17fr); align-items: center; gap: 100px; }.home-how-intro > p:not(.home-kicker) { max-width: 530px; margin: 25px 0; }.home-how .home-text-link { color: var(--home-blue); }.home-steps { position: relative; display: grid; margin: 0; padding: 0; gap: 15px; list-style: none; }.home-steps::before { content: ""; position: absolute; top: 50px; bottom: 50px; left: 32px; border-left: 2px dotted #c5d3e7; }.home-steps li { position: relative; display: grid; min-height: 122px; padding: 23px 25px; grid-template-columns: 64px 1fr; align-items: center; gap: 20px; border: 1px solid var(--home-line); border-radius: 16px; background: #fff; box-shadow: 0 10px 30px rgba(32, 57, 91, 0.05); }.home-steps li > span { position: relative; z-index: 2; display: grid; width: 46px; height: 46px; place-items: center; border: 7px solid #fff; border-radius: 50%; background: var(--home-sky); color: var(--home-blue); font-size: 0.75rem; font-weight: 950; box-shadow: 0 0 0 1px #d6e1f4; }.home-steps strong { display: block; margin-bottom: 6px; color: var(--home-ink); font-size: 1rem; }.home-steps p { margin: 0; color: var(--home-copy); font-size: 0.76rem; line-height: 1.55; }

.home-cta { position: relative; min-height: 520px; display: grid; overflow: hidden; place-items: center; text-align: center; }.home-cta > img,.home-cta-overlay { position: absolute; inset: 0; width: 100%; height: 100%; }.home-cta > img { object-fit: cover; object-position: 67% center; }.home-cta-overlay { background: linear-gradient(90deg, rgba(5,12,25,0.96), rgba(9,22,44,0.76) 55%, rgba(7,15,30,0.64)); }.home-cta-copy { position: relative; z-index: 2; max-width: 850px; padding: 70px 24px; }.home-cta h2 { color: #fff; }.home-cta-copy > p:not(.home-kicker) { max-width: 600px; margin: 22px auto 28px; color: #c5d0df; font-size: 0.93rem; line-height: 1.7; }.home-cta-copy > div { display: flex; align-items: center; justify-content: center; gap: 25px; }.home-button-light { border-color: #fff; background: #fff; color: var(--home-navy) !important; box-shadow: 0 15px 30px rgba(0,0,0,0.2); }.home-button-light:hover { background: #eef4ff; }.home-cta-copy > div > a:last-child { color: #fff; font-size: 0.82rem; font-weight: 900; text-underline-offset: 4px; }
.home-footer { display: grid; min-height: 150px; padding: 35px clamp(20px, 7vw, 110px); grid-template-columns: 1fr auto 1fr; align-items: center; gap: 35px; background: #071125; color: #fff; }.home-footer .home-brand small { color: #8291a9; }.home-footer > p { color: #71829d; font-size: 0.62rem; font-weight: 800; letter-spacing: 0.09em; text-transform: uppercase; }.home-footer nav { display: flex; justify-content: flex-end; gap: 25px; }.home-footer nav a { color: #aebacf; font-size: 0.7rem; font-weight: 800; text-decoration: none; }

@media (max-width: 1180px) {
  .home-header { grid-template-columns: 1fr auto; }.home-nav { display: none; }.home-hero { grid-template-columns: minmax(0, 0.85fr) minmax(470px, 1.15fr); gap: 32px; }.home-hero h1 { font-size: clamp(3.3rem, 6vw, 5.3rem); }.home-command-card { left: 0; }.home-phone-card { right: -7%; }.home-feature-dashboard { grid-template-columns: minmax(290px, 0.72fr) minmax(480px, 1.28fr); }.home-feature-copy { padding: 45px; }
}

@media (max-width: 920px) {
  .home-hero { padding-top: 80px; grid-template-columns: 1fr; text-align: center; }.home-hero-copy { margin: 0 auto; }.home-lede { margin-left: auto; margin-right: auto; }.home-hero-actions,.home-trust-list { justify-content: center; }.home-hero-visual { width: min(100%, 720px); min-height: 570px; margin: 0 auto; }.home-proof { grid-template-columns: 1fr; gap: 22px; text-align: center; }.home-section-heading { grid-template-columns: 1fr; gap: 22px; }.home-section-heading > p { max-width: 620px; }.home-feature-dashboard { padding-top: 20px; grid-template-columns: 1fr; }.home-product-shot-wide { margin: 0 -50px 50px 55px; }.home-feature-pair { grid-template-columns: 1fr; }.home-feature-pair .home-feature { min-height: 680px; }.home-product-shot-phone { width: min(42%, 245px); }.home-story-grid { grid-template-columns: 1fr; }.home-story-card { min-height: 0; }.home-story-card-featured { transform: none; }.home-how { grid-template-columns: 1fr; gap: 55px; }.home-footer { grid-template-columns: 1fr auto; }.home-footer > p { display: none; }
}

@media (max-width: 620px) {
  .home-header { min-height: 68px; padding: 0 15px; gap: 10px; }.home-header .home-brand > span:last-child,.home-login { display: none; }.home-header-actions { gap: 8px; }.home-button-small { min-height: 39px; padding: 0 13px; font-size: 0.72rem; }.home-hero { min-height: 0; padding: 68px 16px 62px; }.home-kicker { font-size: 0.62rem; }.home-hero h1 { font-size: clamp(3rem, 14vw, 4.3rem); }.home-lede { font-size: 0.95rem; line-height: 1.65; }.home-hero-actions { display: grid; gap: 18px; }.home-trust-list { display: grid; justify-content: start; width: fit-content; margin-left: auto; margin-right: auto; text-align: left; }.home-hero-visual { min-height: 420px; margin-top: 25px; }.home-command-card { top: 20px; width: 108%; left: -4%; border-radius: 16px; transform: none; }.home-map-panel { height: 175px; }.home-command-metrics { padding: 10px; }.home-command-metrics > div { min-height: 55px; padding: 8px; }.home-route-row { grid-template-columns: 1fr 52px 1fr; padding: 12px; }.home-phone-card { right: -1%; bottom: -36px; width: 150px; min-height: 244px; padding: 18px 9px 9px; border-width: 5px; border-radius: 21px; }.home-phone-bar { min-height: 28px; margin-bottom: 10px; }.home-phone-card h2 { font-size: 0.78rem; }.home-phone-card p { margin-bottom: 10px; font-size: 0.52rem; }.home-phone-card button { min-height: 34px; font-size: 0.52rem; }.home-phone-tools span { min-height: 30px; font-size: 0.46rem; }.home-alert-card { left: -3%; bottom: -2px; min-width: 177px; padding: 8px; }.home-orbit { display: none; }.home-proof { padding: 30px 18px; }.home-proof div { justify-content: center; }.home-section,.home-stories { padding: 80px 16px; }.home-section-heading { margin-bottom: 38px; }.home-section-heading h2,.home-how h2,.home-cta h2 { font-size: 2.55rem; }.home-feature { border-radius: 18px; }.home-feature-copy { padding: 30px 24px; }.home-feature-number { margin-bottom: 24px; }.home-feature-copy h3 { font-size: 2rem; }.home-feature-copy ul { margin-top: 22px; }.home-product-shot-wide { margin: 0 -70px 30px 25px; }.home-feature-pair .home-feature { min-height: 620px; }.home-product-shot-phone { width: 55%; }.home-product-shot-viewer { margin: 0 15px -20px; }.home-story-card { padding: 28px 23px; }.home-story-icon { margin: 28px 0 22px; }.home-how { gap: 40px; }.home-steps li { min-height: 118px; padding: 18px 15px; grid-template-columns: 50px 1fr; gap: 12px; }.home-steps::before { left: 28px; }.home-cta { min-height: 500px; }.home-cta-copy > div { flex-direction: column; }.home-footer { min-height: 210px; padding: 30px 18px; grid-template-columns: 1fr; justify-items: center; text-align: center; }.home-footer nav { justify-content: center; }
}
/* Team and permission management */
.team-shell {
  width: min(1180px, calc(100% - 32px));
  margin: 0 auto;
  padding: 32px 0 64px;
}

.team-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  padding: 30px;
  color: #fff;
  background: linear-gradient(135deg, #0c2345 0%, #123f73 64%, #17668c 100%);
  border-radius: 24px;
  box-shadow: 0 22px 55px rgba(12, 35, 69, 0.18);
}

.team-header h1 { margin: 4px 0 8px; font-size: clamp(2rem, 5vw, 3.5rem); }
.team-header p { margin: 0; max-width: 650px; color: rgba(255,255,255,.78); }
.team-header .dashboard-eyebrow { color: #8ed8ff; }
.team-header .dashboard-secondary-link { color: #fff; background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.35); white-space: nowrap; }

.team-summary {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin: 20px 0;
}

.team-summary > div,
.team-panel {
  background: #fff;
  border: 1px solid #dbe5f0;
  border-radius: 20px;
  box-shadow: 0 14px 38px rgba(29, 57, 91, .08);
}

.team-summary > div { display: grid; gap: 4px; padding: 20px 24px; }
.team-summary span, .team-summary small { color: #6b7c93; }
.team-summary strong { color: #102640; font-size: 1.35rem; }
.team-grid { display: grid; grid-template-columns: minmax(280px, .75fr) minmax(480px, 1.45fr); gap: 20px; align-items: start; }
.team-panel { padding: 24px; }
.team-panel h2 { margin: 2px 0 0; }
.team-invite-form { display: grid; gap: 16px; margin-top: 22px; }
.team-invite-form label { display: grid; gap: 7px; color: #536780; font-weight: 700; }
.team-invite-form input, .team-invite-form select, .team-person select {
  width: 100%;
  min-height: 48px;
  padding: 0 13px;
  color: #102640;
  background: #f9fbfd;
  border: 1px solid #ccd9e7;
  border-radius: 12px;
  font: inherit;
}
.team-role-help { padding: 14px; color: #526981; background: #eff7ff; border: 1px solid #cce5fb; border-radius: 12px; line-height: 1.5; }
.team-list { display: grid; gap: 12px; margin-top: 18px; }
.team-person { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 16px; background: #f8fafc; border: 1px solid #e1e9f2; border-radius: 15px; }
.team-person-identity { display: flex; align-items: center; gap: 12px; min-width: 0; }
.team-person-identity > span { display: grid; place-items: center; width: 42px; height: 42px; flex: 0 0 auto; color: #fff; background: #1b6ef3; border-radius: 13px; font-weight: 800; }
.team-person-identity div { display: grid; gap: 2px; min-width: 0; }
.team-person-identity strong, .team-person-identity span, .team-person-identity small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.team-person-identity span, .team-person-identity small { color: #6b7c93; }
.team-person-identity small { text-transform: capitalize; }
.team-person-controls { display: flex; align-items: center; gap: 8px; flex: 0 0 280px; }
.team-person-controls select { min-height: 42px; }
.team-person-controls button { min-height: 42px; padding: 0 12px; color: #a03333; background: #fff; border: 1px solid #efcaca; border-radius: 10px; font-weight: 700; cursor: pointer; }

@media (max-width: 820px) {
  .team-header { align-items: flex-start; flex-direction: column; }
  .team-summary, .team-grid { grid-template-columns: 1fr; }
  .team-person { align-items: stretch; flex-direction: column; }
  .team-person-controls { flex: 0 0 auto; width: 100%; }
}

@media (max-width: 520px) {
  .team-shell { width: min(100% - 20px, 1180px); padding-top: 10px; }
  .team-header, .team-panel { padding: 20px; border-radius: 17px; }
  .team-summary { grid-template-columns: 1fr; }
  .team-person-controls { align-items: stretch; flex-direction: column; }
}
.mfa-page-card {
  max-width: 980px;
}

.mfa-page-card [hidden] {
  display: none !important;
}

.mfa-qr {
  display: block;
  width: min(256px, 100%);
  margin: 1rem auto;
  border-radius: 12px;
  background: #fff;
}

.mfa-manual-key,
.mfa-recovery-codes {
  display: block;
  overflow-wrap: anywhere;
  padding: 0.9rem;
  border-radius: 10px;
  background: #f3f6f8;
  color: #14222b;
  font: 600 0.9rem/1.6 ui-monospace, SFMono-Regular, Consolas, monospace;
}

.mfa-recovery-toggle {
  display: flex !important;
  flex-direction: row !important;
  align-items: center;
  gap: 0.6rem;
}

.mfa-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
  margin-top: 1rem;
}

.mfa-actions button {
  min-height: 48px;
  padding: 0.75rem 1rem;
  border: 1px solid #bfd1f8;
  border-radius: 9px;
  background: var(--sp-blue-soft);
  color: var(--sp-blue-dark);
  font-weight: 850;
  cursor: pointer;
}

.mfa-actions button:hover {
  border-color: var(--sp-blue);
  background: #e3edff;
}

.mfa-actions button:focus-visible {
  outline: 3px solid rgba(36, 107, 254, 0.24);
  outline-offset: 2px;
}

.mfa-actions #finishMfa {
  grid-column: 1 / -1;
  min-height: 56px;
  border-color: var(--sp-blue);
  background: var(--sp-blue);
  color: #fff;
  font-size: 1rem;
  font-weight: 900;
  box-shadow: 0 9px 20px rgba(36, 107, 254, 0.22);
}

.mfa-actions #finishMfa:hover {
  background: var(--sp-blue-dark);
}

@media (max-width: 560px) {
  .mfa-actions {
    grid-template-columns: 1fr;
  }

  .mfa-actions #finishMfa {
    grid-column: 1;
  }
}

/* Task 12 legal, consent, and privacy request surfaces */
.legal-body {
  margin: 0;
  background: #f3f6fa;
  color: #172638;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.legal-shell {
  width: min(100% - 32px, 920px);
  margin: 32px auto;
}

.legal-header,
.legal-document {
  margin-bottom: 18px;
  padding: clamp(20px, 4vw, 36px);
  border: 1px solid #dbe3ec;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 12px 30px rgba(29, 48, 70, 0.06);
}

.legal-header h1,
.legal-document h2,
.legal-document h3 {
  color: #172638;
}

.legal-document section {
  padding-block: 10px;
  border-top: 1px solid #e8edf3;
}

.legal-document p {
  line-height: 1.65;
}

.legal-navigation {
  display: flex;
  gap: 8px;
  margin-bottom: 18px;
  overflow-x: auto;
  padding-bottom: 6px;
}

.legal-navigation button {
  flex: 0 0 auto;
  min-height: 42px;
  border: 1px solid #cbd8e6;
  border-radius: 999px;
  background: #fff;
  color: #1d4e89;
  padding: 8px 14px;
  cursor: pointer;
}

.legal-navigation button:hover,
.legal-navigation button:focus-visible,
.legal-navigation button.selected {
  border-color: #1d4e89;
  background: #1d4e89;
  color: #fff;
}

.legal-home-link {
  display: inline-block;
  color: #1d4e89;
  text-decoration: none;
}

.legal-home-link:hover,
.legal-home-link:focus-visible {
  text-decoration: underline;
}

.legal-draft-banner {
  padding: 12px 14px;
  border: 1px solid #e1b762;
  border-radius: 10px;
  background: #fff7e6;
  color: #744d00;
  font-weight: 700;
}

.legal-draft-banner.approved {
  border-color: #8bc8a8;
  background: #eaf8f0;
  color: #16613b;
}

.legal-metadata,
.legal-hash {
  color: #5e6e80;
  font-size: 0.86rem;
  overflow-wrap: anywhere;
}

.legal-footer {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  padding: 12px 4px 32px;
}

.legal-footer a {
  color: #1d4e89;
  font-weight: 700;
}

.legal-acceptance-group {
  display: grid;
  gap: 12px;
  grid-column: 1 / -1;
  margin: 0;
  padding: 16px;
  border: 1px solid #dbe3ec;
  border-radius: 12px;
}

.legal-acceptance-group legend {
  padding: 0 6px;
  font-weight: 800;
}

.legal-acceptance-group .auth-check {
  align-items: flex-start;
}

.legal-acceptance-group a,
.driver-consent-card a {
  color: #155aa8;
  text-decoration: underline;
}

.driver-consent-card {
  border-color: #d7b56a;
  background: #fffbf2;
}

.driver-consent-card .auth-check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 12px 0;
}

#withdrawDriverConsent {
  border: 1px solid #b44b4b;
  background: #fff;
  color: #8d2929;
}

/* Driver next-action interface */
.driver-link-shell {
  width: min(100%, 560px);
  padding: 20px;
}

.driver-card {
  overflow: visible;
}

.driver-compact-header {
  padding: 18px;
  border-bottom: 1px solid var(--sp-border);
  background: var(--sp-surface);
}

.driver-reference-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.driver-reference-row h1 {
  margin: 0;
  color: var(--sp-ink);
  font-size: 1.45rem;
  line-height: 1.1;
  letter-spacing: -0.03em;
}

.driver-status-pill {
  display: inline-flex;
  min-height: 30px;
  padding: 5px 10px;
  align-items: center;
  border: 1px solid #cddcfb;
  border-radius: 999px;
  background: var(--sp-blue-soft);
  color: var(--sp-blue-dark);
  font-size: 0.7rem;
  font-weight: 900;
  text-align: center;
}

.driver-route-summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  margin: 15px 0 12px;
  align-items: center;
  gap: 9px;
  color: var(--sp-ink);
  font-size: 0.9rem;
}

.driver-route-summary strong:last-child { text-align: right; }
.driver-route-summary span { color: var(--sp-blue); font-size: 1.15rem; }

.driver-header-meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 6px 12px;
  color: var(--sp-muted);
  font-size: 0.72rem;
}

.driver-header-meta strong { color: var(--sp-copy); }

.driver-message {
  display: none;
  margin: 12px 14px 0;
  padding: 11px 12px;
  border-radius: 10px;
  font-size: 0.78rem;
  font-weight: 750;
  line-height: 1.4;
}

.driver-message:not(:empty) { display: block; }
.driver-message.info { background: var(--sp-blue-soft); color: var(--sp-blue-dark); }
.driver-message.success { background: var(--sp-green-soft); color: #126a50; }
.driver-message.error { border: 1px solid #edc6c6; background: #fff1f1; color: #902d2d; }

.driver-primary-card {
  margin: 14px;
  padding: 18px;
  border: 1px solid #cddcfb;
  border-radius: 14px;
  background: linear-gradient(155deg, #fff, var(--sp-blue-soft));
  box-shadow: 0 8px 24px rgba(36, 107, 254, 0.08);
}

.driver-primary-card h2 {
  margin: 3px 0 7px;
  color: var(--sp-ink);
  font-size: 1.48rem;
  line-height: 1.15;
}

.driver-primary-card > p:not(.driver-eyebrow) {
  margin: 0 0 16px;
  color: var(--sp-muted);
  font-size: 0.84rem;
  line-height: 1.5;
}

.driver-primary-card #primaryDriverAction {
  width: 100%;
  min-height: 56px;
  border: 1px solid var(--sp-blue);
  border-radius: 11px;
  background: var(--sp-blue);
  color: #fff;
  font-size: 1rem;
  font-weight: 900;
  box-shadow: 0 8px 18px rgba(36, 107, 254, 0.18);
}

.driver-primary-card #primaryDriverAction:disabled {
  border-color: #dce3eb;
  background: #e9edf2;
  color: #7c899a;
  box-shadow: none;
}

.driver-consent-inline {
  margin: 14px 0;
  padding: 12px;
  border: 1px solid #e4cb91;
  border-radius: 10px;
  background: #fffaf0;
}

.driver-consent-inline[hidden] { display: none; }
.driver-consent-inline label { display: flex; align-items: flex-start; gap: 10px; color: var(--sp-copy); font-size: 0.76rem; line-height: 1.45; }
.driver-consent-inline input { width: 22px; height: 22px; flex: 0 0 auto; accent-color: var(--sp-blue); }
.driver-consent-inline a { color: #155aa8; text-decoration: underline; }
.driver-consent-inline p { margin: 8px 0 0; color: var(--sp-muted); font-size: 0.7rem; }

.driver-secondary-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
  padding: 0 14px 14px;
}

.driver-secondary-actions button,
.driver-text-action {
  min-height: 48px;
  padding: 8px 10px;
  border: 1px solid #d7e0e9;
  border-radius: 10px;
  background: #fff;
  color: var(--sp-copy);
  font-size: 0.78rem;
  font-weight: 850;
}

.driver-more-details {
  margin: 0 14px 14px;
  border: 1px solid var(--sp-border);
  border-radius: 12px;
  background: var(--sp-surface);
}

.driver-more-details summary {
  min-height: 48px;
  padding: 0 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  color: var(--sp-copy);
  font-size: 0.82rem;
  font-weight: 900;
  list-style: none;
}

.driver-more-details summary::-webkit-details-marker { display: none; }
.driver-more-details summary::after { content: "+"; color: var(--sp-blue); font-size: 1.25rem; }
.driver-more-details[open] summary::after { content: "−"; }

.driver-detail-stack {
  display: grid;
  gap: 10px;
  padding: 0 10px 10px;
}

.driver-detail-stack section {
  padding: 13px;
  border: 1px solid var(--sp-border);
  border-radius: 10px;
  background: var(--sp-surface-soft);
}

.driver-detail-stack h2 {
  margin: 0 0 10px;
  color: var(--sp-ink);
  font-size: 0.88rem;
}

.driver-detail-stack dl { margin: 0; }
.driver-detail-stack dl div { display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: 10px; padding: 7px 0; border-top: 1px solid var(--sp-border); }
.driver-detail-stack dl div:first-child { padding-top: 0; border-top: 0; }
.driver-detail-stack dt { color: var(--sp-muted); font-size: 0.7rem; font-weight: 800; }
.driver-detail-stack dd { margin: 0; color: var(--sp-copy); font-size: 0.76rem; overflow-wrap: anywhere; }
.driver-detail-stack p { margin: 0; color: var(--sp-muted); font-size: 0.76rem; line-height: 1.45; }

.driver-tracking-row { display: flex; align-items: flex-start; gap: 11px; }
.driver-tracking-row .pulse-dot { width: 10px; height: 10px; margin-top: 5px; flex: 0 0 auto; border-radius: 50%; background: var(--sp-amber); box-shadow: 0 0 0 5px rgba(216, 137, 38, 0.12); }
.driver-tracking-row .pulse-dot.live { background: #20a779; box-shadow: 0 0 0 5px rgba(32, 167, 121, 0.13); }
.driver-tracking-row strong { display: block; margin-bottom: 3px; color: var(--sp-ink); font-size: 0.78rem; }
.driver-text-action { width: 100%; margin-top: 11px; color: #8d2929; }

.completed-steps { display: grid; gap: 7px; }
.completed-steps > div { display: flex; min-height: 34px; padding: 7px 0; align-items: center; justify-content: space-between; gap: 10px; border-top: 1px solid var(--sp-border); }
.completed-steps > div:first-child { border-top: 0; }
.completed-steps strong { color: var(--sp-copy); font-size: 0.74rem; }
.completed-steps time { color: var(--sp-muted); font-size: 0.66rem; text-align: right; }

.driver-link-shell .modal-card {
  max-height: calc(100vh - 32px);
  overflow-y: auto;
  border-color: var(--sp-border);
  border-radius: 14px 14px 8px 8px;
  background: #fff;
  color: var(--sp-ink);
}

.driver-link-shell .modal-card h2 { margin: 0 0 7px; font-size: 1.25rem; }
.driver-link-shell .modal-card > p { margin: 0 0 12px; color: var(--sp-muted); font-size: 0.78rem; line-height: 1.45; }
.driver-link-shell .modal-card > label:not(.driver-file-picker) { display: block; margin: 10px 0 6px; color: var(--sp-copy); font-size: 0.74rem; font-weight: 850; }
.driver-link-shell .modal-card select,
.driver-link-shell .modal-card textarea {
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid #d7dfe8;
  border-radius: 9px;
  background: #fff;
  color: var(--sp-ink);
  font: inherit;
}

.driver-link-shell .reason-grid button { min-height: 46px; border-color: #d7e0e9; border-radius: 9px; background: #fff; color: var(--sp-copy); }
.driver-link-shell .reason-grid button.selected { border-color: var(--sp-blue); background: var(--sp-blue-soft); color: var(--sp-blue-dark); }
.driver-link-shell .modal-actions button { min-height: 48px; }

.driver-file-picker {
  display: flex;
  min-height: 52px;
  margin-top: 12px;
  padding: 10px 12px;
  align-items: center;
  justify-content: center;
  border: 1px dashed #9fb4d1;
  border-radius: 10px;
  background: var(--sp-surface-soft);
  color: var(--sp-blue-dark);
  font-size: 0.78rem;
  font-weight: 850;
  text-align: center;
  cursor: pointer;
}

.driver-file-picker input { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }

@media (max-width: 430px) {
  .driver-link-shell { padding: 10px; }
  .driver-card { border-radius: 14px; }
  .driver-compact-header { padding: 15px; }
  .driver-primary-card { margin: 10px; padding: 15px; }
  .driver-secondary-actions { padding: 0 10px 10px; }
  .driver-more-details { margin: 0 10px 10px; }
}

@media (max-width: 340px) {
  .driver-reference-row { display: grid; }
  .driver-status-pill { justify-self: start; }
  .driver-route-summary { font-size: 0.8rem; }
  .driver-secondary-actions { grid-template-columns: 1fr; }
  .driver-link-shell .reason-grid { grid-template-columns: 1fr; }
}

@media (max-width: 600px) {
  .legal-shell {
    width: min(100% - 20px, 920px);
    margin: 10px auto;
  }

  .legal-header,
  .legal-document {
    padding: 18px;
    border-radius: 12px;
  }
}
.shipment-home-link { color: inherit; text-decoration: none; display: inline-flex; align-items: center; min-height: 44px; }
.shipment-home-link:focus-visible { outline: 3px solid #4d90fe; outline-offset: 4px; }
.owner-topbar .owner-brand .shipment-home-link,
.auth-topbar .owner-brand .shipment-home-link,
.viewer-topbar .viewer-brand .shipment-home-link,
.driver-topbar .driver-eyebrow .shipment-home-link { position: relative; min-height: 20px; cursor: pointer; }
.owner-topbar .owner-brand .shipment-home-link::before,
.auth-topbar .owner-brand .shipment-home-link::before,
.viewer-topbar .viewer-brand .shipment-home-link::before,
.driver-topbar .driver-eyebrow .shipment-home-link::before {
  content: "";
  position: absolute;
  z-index: 2;
  top: -12px;
  left: -56px;
  width: calc(100% + 56px);
  min-width: 138px;
  height: 44px;
  border-radius: 12px;
  cursor: pointer;
}
.owner-topbar .owner-brand .shipment-home-link:focus-visible::before,
.auth-topbar .owner-brand .shipment-home-link:focus-visible::before,
.viewer-topbar .viewer-brand .shipment-home-link:focus-visible::before,
.driver-topbar .driver-eyebrow .shipment-home-link:focus-visible::before { box-shadow: 0 0 0 3px rgba(36,107,254,.25); }
.address-suggestions { background: white; color: #182a40; border: 1px solid #b7c9df; border-radius: 8px; overflow: hidden; margin-top: 4px; }
.address-suggestions[hidden] { display: none; }
.address-suggestions [role="option"] { min-height: 44px; padding: 12px; cursor: pointer; }
.address-suggestions [aria-selected="true"], .address-suggestions [role="option"]:hover { background: #e7f0ff; }
.recipient-attestation, .driver-consent-inline label, .auth-check { display: flex; gap: 12px; align-items: flex-start; padding: 14px; min-height: 48px; border: 1px solid #c7d4e4; border-radius: 10px; line-height: 1.5; }
.recipient-attestation input[type="checkbox"], .driver-consent-inline input[type="checkbox"], .auth-check input[type="checkbox"] { flex: 0 0 22px; width: 22px; height: 22px; margin: 2px 0 0; accent-color: #175cc5; }
.recipient-attestation:has(input:checked), .driver-consent-inline label:has(input:checked), .auth-check:has(input:checked) { border-color: #175cc5; background: #eef5ff; }
.recipient-attestation:focus-within, .driver-consent-inline label:focus-within, .auth-check:focus-within { outline: 3px solid #81adf5; outline-offset: 3px; }
@media (hover: hover) { .recipient-attestation:hover, .driver-consent-inline label:hover, .auth-check:hover { border-color: #175cc5; } }
.modal-card { position: relative; max-height: 90dvh; overflow-y: auto; }
.modal-close { position: absolute; top: 8px; right: 8px; width: 44px; height: 44px; font-size: 26px; }
.shipment-management { max-width: 1100px; margin: auto; padding: 24px; color: #18314f; }
.shipment-management header { display: flex; flex-wrap: wrap; align-items: center; gap: 24px; }
.shipment-management h1 { width: 100%; }
.management-panel { background: #fff; border: 1px solid #d0dbea; border-radius: 16px; margin: 20px 0; padding: 24px; }
.tracking-facts { display: flex; gap: 24px; flex-wrap: wrap; }
.tracking-facts dd { margin: 8px 0; font-weight: 600; }
.shipment-map { width: 100%; height: auto; border-radius: 10px; }
.shipment-management form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.shipment-management label { display: flex; flex-direction: column; gap: 8px; }
.shipment-management input { width: 100%; min-height: 44px; padding: 10px; border: 1px solid #aabbd1; border-radius: 6px; }
.shipment-management button { min-height: 44px; padding: 10px 18px; border-radius: 8px; }
@media (max-width: 600px) { .shipment-management { padding: 12px; } .management-panel { padding: 16px; } .shipment-management form { grid-template-columns: 1fr; } }
/* Authenticated shipment workspace */
.management-body { background: #f3f6fb; }
.management-nav,.management-actions { display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.management-nav { justify-content:space-between; padding:12px 0 28px; }
.management-nav a { color:#244a73; text-decoration:none; font-weight:650; }
.shipment-management .management-header { justify-content:space-between; align-items:flex-start; gap:16px; }
.shipment-management .management-header h1 { margin:8px 0; font-size:clamp(26px,4vw,38px); overflow-wrap:anywhere; }
.management-eyebrow { font-size:12px; letter-spacing:.12em; color:#60748c; font-weight:700; }
.management-header p { margin:8px 0; }
.management-header small,.shipment-management dt,.shipment-management small { color:#61748c; }
.management-grid { display:grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap:20px; }
.management-grid .management-panel { margin-bottom:0; }
.shipment-management h2 { font-size:20px; margin:0 0 20px; }
.shipment-management dd { margin:6px 0 0; font-weight:600; overflow-wrap:anywhere; }
.shipment-management .tracking-facts { gap:20px; }
.shipment-management select,.shipment-management textarea { width:100%; padding:12px; border:1px solid #aabbd1; border-radius:8px; font:inherit; background:white; color:inherit; }
.shipment-management button { background:white; border:1px solid #b8c9da; color:#18314f; font-weight:650; cursor:pointer; }
.shipment-management button[type=submit] { background:#244e7a; color:white; border-color:#244e7a; }
.shipment-management button:disabled { opacity:.5; cursor:not-allowed; }
.shipment-management :focus-visible { outline:3px solid #5398df; outline-offset:3px; }
.full-width { grid-column:1/-1; }
.shipment-management .management-checkbox { flex-direction:row; align-items:center; }
.shipment-management .management-checkbox input { width:20px; min-height:20px; }
.management-progress { display:flex; flex-wrap:wrap; gap:8px; padding:0; list-style:none; }
.management-progress li { background:#edf2f7; border-radius:6px; padding:8px; font-size:12px; }
.management-progress li[aria-current=step] { background:#d9eee7; color:#17624e; font-weight:700; }
.management-timeline { padding-left:20px; max-height:480px; overflow:auto; }
.management-timeline li { padding:0 0 18px 8px; border-left:2px solid #e0e8f1; overflow-wrap:anywhere; }
.management-danger { border-color:#e6c9c9; }
.management-danger p { line-height:1.6; }
.shipment-management dialog { width:min(540px,90vw); border:1px solid #c5d1df; border-radius:16px; padding:28px; color:#18314f; }
.shipment-management dialog::backdrop { background:#13283c99; }
.shipment-management dialog form { display:flex; flex-direction:column; }
#managementStatus { padding:12px 0; min-height:24px; }
#mapStatus { padding:20px; background:#f3f6fa; border-radius:10px; }
#mapStatus:empty { display:none; }
@media(max-width:760px) { .management-grid { grid-template-columns:1fr; gap:0; } .management-actions>* { flex:1; text-align:center; } .shipment-management form { grid-template-columns:1fr; } }
.shipment-management .management-actions a { display:inline-flex; justify-content:center; align-items:center; min-height:44px; padding:10px 18px; border:1px solid #b8c9da; border-radius:8px; background:white; color:#244e7a; text-decoration:none; font-weight:650; box-sizing:border-box; }
.shipment-management .management-actions a.shipment-primary-button { background:#244e7a; color:white; border-color:#244e7a; }
.shipment-management .management-actions a[hidden] { display:none; }
.shipment-management .tracking-facts { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); }
.shipment-management .tracking-facts>div { min-width:0; }
.shipment-management .management-header .state-badge { padding:8px 12px; border-radius:20px; background:#e0ebf6; color:#244e7a; font-size:13px; font-weight:700; }
@media(max-width:480px) { .shipment-management .tracking-facts { grid-template-columns:1fr; } }
.shipment-management input { background:#fff; color:#18314f; color-scheme:light; }
.management-grid { align-items:start; }

/* Shipment map experience */
.tracking-map-panel,
.viewer-map-panel {
  overflow: hidden;
  border-color: #cbd9ea;
  box-shadow: 0 12px 30px rgba(28, 52, 82, 0.08);
}

.map-panel-heading {
  display: flex;
  margin-bottom: 18px;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.map-panel-heading h2,
.map-panel-heading .viewer-label { margin-bottom: 0; }

.map-state-badge {
  display: inline-flex;
  min-height: 34px;
  padding: 7px 11px;
  align-items: center;
  border: 1px solid #d7e1ec;
  border-radius: 999px;
  background: #f1f5f9;
  color: #52657a;
  font-size: 0.78rem;
  font-weight: 850;
  white-space: nowrap;
}

.map-state-badge.live { border-color: #a9decf; background: #eaf8f3; color: #147258; }
.map-state-badge.waiting { border-color: #f0d69e; background: #fff8e8; color: #8a5a0a; }
.map-state-badge.stale { border-color: #cbd8e6; background: #f1f5f9; color: #50647a; }
.map-state-badge.stopped { border-color: #d8dce3; background: #f4f5f7; color: #5f6672; }
.map-state-badge.unavailable { border-color: #e1d6d6; background: #faf4f4; color: #7d5555; }

.shipment-map-frame {
  position: relative;
  min-height: 290px;
  overflow: hidden;
  border: 1px solid #d6e0eb;
  border-radius: 14px;
  background:
    radial-gradient(circle at 18% 24%, rgba(36, 107, 254, 0.08), transparent 26%),
    linear-gradient(135deg, #f5f8fc, #eaf0f7);
  isolation: isolate;
}

.shipment-map-frame::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 0.38;
  background-image:
    linear-gradient(28deg, transparent 48%, #ced9e6 49%, #ced9e6 51%, transparent 52%),
    linear-gradient(-27deg, transparent 48%, #d5dfeb 49%, #d5dfeb 51%, transparent 52%);
  background-size: 94px 68px, 126px 82px;
}

.shipment-map-frame .shipment-map {
  display: block;
  width: 100%;
  aspect-ratio: 5 / 3;
  min-height: 290px;
  border-radius: 13px;
}

.shipment-map-frame .maplibregl-canvas { outline: none; }
.shipment-map-frame .maplibregl-canvas:focus-visible { box-shadow: inset 0 0 0 3px rgba(36, 107, 254, 0.5); }
.shipment-map-frame .maplibregl-ctrl-top-right { top: 12px; right: 12px; }
.shipment-map-frame .maplibregl-ctrl-group {
  overflow: hidden;
  border: 1px solid rgba(205, 216, 229, 0.96);
  border-radius: 10px;
  box-shadow: 0 7px 20px rgba(24, 46, 74, 0.16);
}
.shipment-map-frame .maplibregl-ctrl-group button { width: 38px; height: 38px; background-color: rgba(255, 255, 255, 0.97); }
.shipment-map-frame .maplibregl-ctrl-attrib { font-size: 10px; }

.shipment-map-fit {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 4;
  min-height: 38px;
  padding: 8px 13px;
  border: 1px solid rgba(205, 216, 229, 0.96);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.97);
  color: #173653;
  box-shadow: 0 7px 20px rgba(24, 46, 74, 0.16);
  font: inherit;
  font-size: 0.8125rem;
  font-weight: 850;
  cursor: pointer;
}
.shipment-map-fit:hover { background: #f7faff; border-color: #aebfd2; }
.shipment-map-fit:focus-visible { outline: 3px solid rgba(36, 107, 254, 0.32); outline-offset: 2px; }

.shipment-map-marker {
  position: absolute;
  display: grid;
  width: 34px;
  height: 42px;
  margin: 0;
  padding: 0 0 8px;
  place-items: center;
  border: 0;
  background: none;
  color: #fff;
  cursor: pointer;
  filter: drop-shadow(0 5px 7px rgba(20, 42, 66, 0.25));
}
.shipment-map-marker::before {
  content: "";
  position: absolute;
  inset: 0 0 8px;
  border: 3px solid #fff;
  border-radius: 50% 50% 50% 8px;
  background: #246bfe;
  transform: rotate(-45deg);
}
.shipment-map-marker span { position: relative; z-index: 1; font-size: 0.68rem; font-weight: 950; letter-spacing: -0.03em; }
.shipment-map-marker.delivery::before { background: #ed7a16; }
.shipment-map-marker.driver { width: 42px; height: 42px; padding: 0; }
.shipment-map-marker.driver::before {
  inset: 3px;
  border-radius: 12px;
  background: #12966b;
  transform: none;
  box-shadow: 0 0 0 5px rgba(18, 150, 107, 0.18);
}
.shipment-map-marker:focus-visible { outline: 3px solid rgba(36, 107, 254, 0.42); outline-offset: 3px; border-radius: 12px; }

.shipment-map-frame .maplibregl-popup-content {
  min-width: 170px;
  padding: 13px 34px 13px 14px;
  border: 1px solid #d6e0eb;
  border-radius: 12px;
  box-shadow: 0 14px 36px rgba(22, 44, 70, 0.2);
}
.shipment-map-frame .maplibregl-popup-close-button { width: 30px; height: 30px; color: #52657a; font-size: 20px; }
.shipment-map-popup { display: grid; gap: 4px; color: #173653; }
.shipment-map-popup strong { font-size: 0.9rem; }
.shipment-map-popup span { color: #52657a; font-size: 0.8rem; line-height: 1.4; }

.shipment-map-frame p {
  position: absolute;
  left: 50%;
  bottom: 16px;
  z-index: 2;
  width: max-content;
  max-width: calc(100% - 32px);
  margin: 0;
  padding: 10px 13px;
  transform: translateX(-50%);
  border: 1px solid rgba(204, 216, 231, 0.92);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.94);
  color: #40566e;
  box-shadow: 0 8px 24px rgba(27, 51, 80, 0.12);
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1.45;
  text-align: center;
}

.shipment-map-frame #mapStatus,
.shipment-map-frame #viewerMapStatus {
  padding: 10px 13px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.94);
}

.shipment-map-frame.loading p { bottom: 50%; transform: translate(-50%, 50%); }
.shipment-map-frame.ready p:empty { display: none; }
.shipment-map-frame.ready p { pointer-events: none; }

.shipment-map-legend {
  display: flex;
  padding-top: 13px;
  flex-wrap: wrap;
  gap: 10px 18px;
  color: #52657a;
  font-size: 0.8125rem;
  font-weight: 750;
}

.shipment-map-legend span { display: inline-flex; align-items: center; gap: 7px; }
.shipment-map-legend i { width: 10px; height: 10px; border-radius: 50%; box-shadow: 0 0 0 3px rgba(100, 116, 139, 0.12); }
.shipment-map-legend i.pickup { background: #246bfe; box-shadow: 0 0 0 3px rgba(36, 107, 254, 0.12); }
.shipment-map-legend i.delivery { background: #f08a24; box-shadow: 0 0 0 3px rgba(240, 138, 36, 0.14); }
.shipment-map-legend i.driver { background: #18a875; box-shadow: 0 0 0 3px rgba(24, 168, 117, 0.14); }
.shipment-map-legend i.last-known { background: #64748b; }

.viewer-map-panel { grid-column: 1 / -1; padding: 16px; }
.viewer-map-panel .viewer-section-heading { align-items: flex-start; }

@media (max-width: 600px) {
  .map-panel-heading { display: grid; gap: 10px; }
  .map-state-badge { justify-self: start; }
  .shipment-map-frame,
  .shipment-map-frame .shipment-map { min-height: 230px; }
  .shipment-map-frame .shipment-map { aspect-ratio: 4 / 3; }
  .shipment-map-frame p { bottom: 10px; max-width: calc(100% - 20px); font-size: 0.8125rem; }
  .shipment-map-legend { gap: 9px 14px; }
  .shipment-map-fit { top: 10px; left: 10px; min-height: 42px; }
  .shipment-map-frame .maplibregl-ctrl-top-right { top: 8px; right: 8px; }
  .shipment-map-frame .maplibregl-ctrl-group button { width: 42px; height: 42px; }
  .shipment-map-frame .maplibregl-popup-content { max-width: min(250px, calc(100vw - 64px)); }
}

@media (prefers-reduced-motion: reduce) {
  .shipment-map-marker { transition: none; }
}