.tracking-redesign * {box-sizing: border-box;}
.tracking-redesign body {margin: 0px; background: rgb(7, 10, 17); color: rgb(229, 231, 235); font: 14px / 1.5 Inter, system-ui, sans-serif;}
.tracking-redesign a {color: inherit; text-decoration: none;}
.tracking-redesign button, .tracking-redesign  input {font: inherit;}
.tracking-redesign button {cursor: pointer;}
.tracking-redesign button:disabled {opacity: 0.55; cursor: wait;}
.tracking-redesign button:focus-visible, .tracking-redesign  a:focus-visible, .tracking-redesign  input:focus-visible {outline: rgb(52, 211, 153) solid 2px; outline-offset: 4px;}
.tracking-redesign h1, .tracking-redesign  h2, .tracking-redesign  h3, .tracking-redesign  p {margin: 0px;}
.tracking-redesign h2 {font-size: 20px; letter-spacing: -0.03em;}
.tracking-redesign h3 {font-size: 17px;}
.tracking-redesign small, .tracking-redesign  .muted {color: rgb(148, 163, 184);}
.tracking-redesign .mono {font-family: ui-monospace, Consolas, monospace;}
.tracking-redesign .shell {max-width: 1200px; margin: auto; padding: 0px 24px;}
.tracking-redesign .portal-header {background: rgba(17, 24, 39, 0.85); border-bottom: 1px solid rgb(31, 41, 55); backdrop-filter: blur(12px);}
.tracking-redesign .portal-header .shell {min-height: 78px; display: flex; align-items: center; justify-content: space-between; gap: 20px;}
.tracking-redesign .brand {display: flex; align-items: center; gap: 12px;}
.tracking-redesign .brand-mark {display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; background: linear-gradient(135deg, rgb(5, 150, 105), rgb(45, 212, 191)); color: rgb(255, 255, 255); font-size: 22px;}
.tracking-redesign .brand strong {display: block; font-size: 17px;}
.tracking-redesign .brand small {font-size: 11px;}
.tracking-redesign .quiet-link {border: 1px solid rgb(51, 65, 85); border-radius: 9px; padding: 8px 14px; font-size: 12px;}
.tracking-redesign .workspace {padding-top: 30px; padding-bottom: 36px;}
.tracking-redesign .search-row {display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-bottom: 25px;}
.tracking-redesign .eyebrow {font-size: 10px; letter-spacing: 0.17em; color: rgb(52, 211, 153); text-transform: uppercase; font-weight: 700; margin-bottom: 5px;}
.tracking-redesign .search-row h1 {font-size: 25px; letter-spacing: -0.04em; margin: 0px;}
.tracking-redesign .search-row p {font-size: 12px; color: rgb(148, 163, 184); margin-top: 5px;}
.tracking-redesign #trackingForm {display: flex; gap: 8px;}
.tracking-redesign #trackingInput {min-width: 0px; width: 230px; background: rgb(17, 24, 39); border: 1px solid rgb(51, 65, 85); border-radius: 10px; color: rgb(241, 245, 249); padding: 11px 14px; font-family: ui-monospace, monospace;}
.tracking-redesign #trackButton {border: 1px solid rgba(16, 185, 129, 0.333); background: rgba(16, 185, 129, 0.11); color: rgb(110, 231, 183); border-radius: 10px; padding: 10px 16px; white-space: nowrap;}
.tracking-redesign #trackButton:hover {background: rgba(16, 185, 129, 0.2);}
.tracking-redesign .glass {background: rgba(17, 24, 39, 0.75); border: 1px solid rgba(255, 255, 255, 0.07); border-radius: 20px; box-shadow: rgba(0, 0, 0, 0.133) 0px 16px 45px;}
.tracking-redesign .overview {display: grid; grid-template-columns: repeat(4, minmax(0px, 1fr)); gap: 14px; margin-bottom: 22px;}
.tracking-redesign .metric {display: flex; gap: 12px; align-items: center; padding: 18px; border-radius: 14px; min-width: 0px;}
.tracking-redesign .metric-icon {display: grid; place-items: center; flex-shrink: 0; width: 38px; height: 38px; background: rgb(31, 41, 55); border-radius: 11px; color: rgb(52, 211, 153);}
.tracking-redesign .metric small {display: block; font-size: 11px; margin-bottom: 4px;}
.tracking-redesign .metric strong {font-size: 12px; display: block; overflow-wrap: anywhere;}
.tracking-redesign .section-head {display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 24px;}
.tracking-redesign .section-head p {font-size: 12px; color: rgb(148, 163, 184); margin-top: 4px;}
.tracking-redesign .pill {display: inline-flex; align-items: center; gap: 7px; font-size: 11px; font-family: ui-monospace, monospace; padding: 7px 11px; border: 1px solid rgba(16, 185, 129, 0.25); border-radius: 8px; background: rgba(16, 185, 129, 0.07); color: rgb(110, 231, 183);}
.tracking-redesign .route-panel {position: relative; overflow: hidden; padding: 26px; background: radial-gradient(at 5% 5%, rgba(16, 185, 129, 0.06), transparent 60%), rgba(17, 24, 39, 0.75);}
.tracking-redesign .route-panel .section-head {border-bottom: 1px solid rgb(31, 41, 55); padding-bottom: 20px; margin: 0px;}
.tracking-redesign .route-panel .freight-route {border: 0px; border-radius: 0px; min-height: 245px; background: transparent; box-shadow: none; margin: 0px;}
.tracking-redesign .route-panel .freight-route::before {opacity: 0.55;}
.tracking-redesign .route-panel .route-title, .tracking-redesign  .route-panel .route-live, .tracking-redesign  .route-panel .route-caption {display: none;}
.tracking-redesign .route-panel .freight-route svg {top: 50px; height: 136px;}
.tracking-redesign .route-panel .route-origin, .tracking-redesign  .route-panel .route-destination {top: 116px;}
.tracking-redesign .route-panel .route-mid {top: 64px;}
.tracking-redesign .route-panel .route-node > span:first-child {width: 56px; height: 56px; border-radius: 16px; border-width: 1px; background: rgb(17, 24, 39); color: rgb(100, 116, 139); box-shadow: rgb(17, 24, 39) 0px 0px 0px 7px; font-size: 20px;}
.tracking-redesign .route-panel .route-node.active > span:first-child {border-color: rgb(16, 185, 129); color: rgb(52, 211, 153);}
.tracking-redesign .route-panel .route-node.current > span:first-child {margin: 0px; border-width: 2px; box-shadow: rgba(16, 185, 129, 0.19) 0px 0px 25px; color: rgb(110, 231, 183); animation: 2.8s ease-out 0s infinite normal none running freight-beacon;}
.tracking-redesign .route-panel .route-node > span:last-child {font-size: 12px; margin-top: 4px;}
.tracking-redesign .update-banner {display: flex; align-items: center; justify-content: space-between; gap: 20px; border: 1px solid rgb(38, 49, 67); border-radius: 13px; background: rgb(13, 20, 34); padding: 17px 20px;}
.tracking-redesign .update-banner p {font-size: 13px; margin-top: 4px; overflow-wrap: anywhere;}
.tracking-redesign .update-banner small {font-size: 10px; flex-shrink: 0;}
.tracking-redesign .update-banner.urgent {border-color: rgba(245, 158, 11, 0.5); background: rgba(245, 158, 11, 0.04);}
.tracking-redesign .update-banner.urgent .eyebrow {color: rgb(251, 191, 36);}
.tracking-redesign .milestones {padding: 26px; margin-top: 22px;}
.tracking-redesign .milestones .journey-timeline {margin: 0px; padding: 12px 0px 18px; border: 0px; background: none;}
.tracking-redesign .milestones .shipment-steps::before {background: rgb(38, 49, 67);}
.tracking-redesign .milestones .shipment-steps::after {background: linear-gradient(90deg, rgb(16, 185, 129), rgb(45, 212, 191));}
.tracking-redesign .milestones .shipment-step .dot {width: 44px; height: 44px; background: rgb(17, 24, 39); border-color: rgb(51, 65, 85); box-shadow: rgb(17, 24, 39) 0px 0px 0px 7px; color: rgb(100, 116, 139);}
.tracking-redesign .milestones .shipment-steps::before, .tracking-redesign  .milestones .shipment-steps::after {top: 21px;}
.tracking-redesign .milestones .shipment-step.done .dot, .tracking-redesign  .milestones .shipment-step.complete .dot {color: rgb(5, 46, 37); background: rgb(16, 185, 129); border-color: rgb(16, 185, 129); box-shadow: rgba(16, 185, 129, 0.15) 0px 0px 20px;}
.tracking-redesign .milestones .shipment-step.current .dot {background: rgb(245, 158, 11); color: rgb(28, 25, 23); border-color: rgb(251, 191, 36); box-shadow: rgba(245, 158, 11, 0.07) 0px 0px 0px 5px, rgba(245, 158, 11, 0.208) 0px 0px 24px;}
.tracking-redesign .milestones .shipment-step.done span:last-child, .tracking-redesign  .milestones .shipment-step.complete span:last-child {color: rgb(52, 211, 153);}
.tracking-redesign .milestones .shipment-step.current span:last-child {color: rgb(251, 191, 36);}
.tracking-redesign .history-panel {padding: 26px; margin-top: 22px;}
.tracking-redesign .history-row {display: grid; grid-template-columns: 12px 1fr auto; gap: 16px; padding: 18px 0px; border-top: 1px solid rgb(31, 41, 55);}
.tracking-redesign .history-dot {width: 8px; height: 8px; border-radius: 50%; background: rgb(16, 185, 129); margin-top: 7px; box-shadow: rgba(16, 185, 129, 0.086) 0px 0px 0px 4px;}
.tracking-redesign .history-row strong {font-size: 13px;}
.tracking-redesign .history-row p {font-size: 12px; color: rgb(148, 163, 184); margin-top: 5px; overflow-wrap: anywhere;}
.tracking-redesign .history-row time {font-size: 10px; color: rgb(148, 163, 184);}
.tracking-redesign .empty-state {padding: 48px; text-align: center;}
.tracking-redesign .empty-state p {color: rgb(148, 163, 184); margin-top: 10px;}
.tracking-redesign .empty-state.error {border-color: rgba(248, 113, 113, 0.333);}
.tracking-redesign .footer {text-align: center; color: rgb(100, 116, 139); font-size: 11px; padding: 20px; border-top: 1px solid rgb(31, 41, 55);}
.tracking-redesign .motion-button {background: rgba(16, 185, 129, 0.07); color: rgb(110, 231, 183); border: 1px solid rgba(16, 185, 129, 0.25); padding: 7px 11px; border-radius: 8px; font-size: 11px;}
.tracking-redesign .route-actions {display: flex; align-items: center; gap: 8px;}
.tracking-redesign .motion-paused .route-flow, .tracking-redesign  .motion-paused .route-node.current > span:first-child {animation-play-state: paused !important;}
@media (max-width: 760px){.tracking-redesign .shell {padding-left: 16px; padding-right: 16px;}
.tracking-redesign .search-row {align-items: stretch; flex-direction: column; gap: 16px;}
.tracking-redesign #trackingInput {width: 100%;}
.tracking-redesign #trackingForm {width: 100%;}
.tracking-redesign .overview {grid-template-columns: repeat(2, minmax(0px, 1fr));}
.tracking-redesign .metric {padding: 13px; gap: 9px;}
.tracking-redesign .section-head {align-items: flex-start; flex-direction: column; gap: 12px;}
.tracking-redesign .route-panel, .tracking-redesign  .milestones, .tracking-redesign  .history-panel {padding: 18px;}
.tracking-redesign .route-panel .freight-route {min-height: 225px;}
.tracking-redesign .route-panel .route-node > span:first-child {width: 40px; height: 40px; border-radius: 12px; font-size: 16px;}
.tracking-redesign .route-panel .route-node > span:last-child {font-size: 10px; max-width: 85px;}
.tracking-redesign .route-panel .route-origin, .tracking-redesign  .route-panel .route-destination {top: 130px;}
.tracking-redesign .route-panel .route-mid {top: 78px;}
.tracking-redesign .route-panel .freight-route svg {top: 66px; height: 122px;}
.tracking-redesign .update-banner {align-items: flex-start; flex-direction: column; padding: 14px; gap: 10px;}
.tracking-redesign .history-row {grid-template-columns: 10px 1fr;}
.tracking-redesign .history-row time {grid-column: 2;}
.tracking-redesign .milestones .shipment-step .dot {width: 32px; height: 32px;}
.tracking-redesign .milestones .shipment-steps::before, .tracking-redesign  .milestones .shipment-steps::after {top: 15px;}
.tracking-redesign .milestones .shipment-step span:last-child {font-size: 9px;}
.tracking-redesign .brand strong {font-size: 14px;}}
@media (prefers-reduced-motion: reduce){.tracking-redesign .route-panel .route-node.current > span:first-child {animation: auto ease 0s 1 normal none running none;}}
.tracking-redesign .route-panel .freight-route .ship-symbol {position: static; inset: auto; width: 38px; height: 38px; overflow: visible; flex-shrink: 0;}
.tracking-redesign .route-panel .route-mid > span:first-child {color: rgb(110, 231, 183); border-color: rgba(16, 185, 129, 0.4);}
.tracking-redesign .ship-hull {transform-origin: 24px 28px;}
.tracking-redesign .is-sailing .ship-hull {animation: 3.6s ease-in-out 0s infinite normal none running ship-sail;}
.tracking-redesign .is-sailing .ship-wave {animation: 2.4s ease-in-out 0s infinite normal none running ship-wake;}
.tracking-redesign .is-sailing .route-mid > span:first-child {background: radial-gradient(circle, rgba(16, 185, 129, 0.133), rgb(17, 24, 39) 75%);}
.tracking-redesign .motion-paused .ship-hull, .tracking-redesign  .motion-paused .ship-wave {animation-play-state: paused !important;}
@keyframes ship-sail { 
  0%, 100% { transform: translateY(0px) rotate(-4deg); }
  50% { transform: translateY(-2px) rotate(4deg); }
}
@keyframes ship-wake { 
  0%, 100% { transform: translateX(-2px); opacity: 0.45; }
  50% { transform: translateX(2px); opacity: 1; }
}
@media (max-width: 760px){.tracking-redesign .route-panel .freight-route .ship-symbol {width: 29px; height: 29px;}}
@media (prefers-reduced-motion: reduce){.tracking-redesign .is-sailing .ship-hull, .tracking-redesign  .is-sailing .ship-wave {animation: auto ease 0s 1 normal none running none;}}
.tracking-redesign{color:#e5e7eb;font-family:Inter,system-ui,sans-serif}.tracking-redesign .tracking-info{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:16px}.tracking-redesign .glass{background-color:#111827}.tracking-redesign .milestones .journey-timeline{background:transparent}@media(max-width:640px){.tracking-redesign .tracking-info{grid-template-columns:1fr}}
/* Keep the route dark; supporting shipment details use the normal light palette. */
.tracking-redesign .glass.milestones,
.tracking-redesign .tracking-info .glass { background:#f8fafc; color:#1e293b; border-color:#e2e8f0; box-shadow:none; }
.tracking-redesign .milestones .section-head p,
.tracking-redesign .tracking-info small { color:#64748b; }
.tracking-redesign .milestones .pill { color:#0f766e; background:#f0fdfa; border-color:#99f6e4; }
.tracking-redesign .milestones .shipment-steps::before { background:#e2e8f0; }
.tracking-redesign .milestones .shipment-step .dot { background:#fff; border-color:#cbd5e1; color:#64748b; box-shadow:0 0 0 7px #f8fafc; }
.tracking-redesign .milestones .shipment-step span:last-child { color:#64748b; }
.tracking-redesign .milestones .shipment-step.done .dot,
.tracking-redesign .milestones .shipment-step.complete .dot { background:#10b981; border-color:#10b981; color:#fff; box-shadow:0 0 0 7px #f8fafc; }
.tracking-redesign .milestones .shipment-step.done span:last-child,
.tracking-redesign .milestones .shipment-step.complete span:last-child { color:#047857; }
.tracking-redesign .milestones .shipment-step.current .dot { background:#f59e0b; border-color:#fbbf24; color:#fff; box-shadow:0 0 0 5px #ffedd5; }
.tracking-redesign .milestones .shipment-step.current span:last-child { color:#b45309; }
.tracking-redesign .milestones .shipment-step.current .dot { position:relative; animation:milestone-beacon 1.6s ease-in-out infinite; }
.tracking-redesign .milestones .shipment-step.current .dot::after { content:''; position:absolute; inset:-5px; border:2px solid #f59e0b; border-radius:50%; pointer-events:none; animation:milestone-ring 1.6s ease-out infinite; }
@keyframes milestone-beacon {
    0%,100% { background:#f59e0b; transform:scale(1); box-shadow:0 0 0 5px #ffedd5; }
    50% { background:#d97706; transform:scale(1.12); box-shadow:0 0 0 8px #fde68a99,0 0 22px #f59e0b99; }
}
@keyframes milestone-ring { from { transform:scale(1); opacity:.9; } to { transform:scale(1.55); opacity:0; } }
.tracking-redesign .route-panel .route-node > span:first-child:has(.ship-symbol) {
    position:relative; color:#99f6e4; border:2px solid #2dd4bf;
    background:linear-gradient(145deg,#134e4a,#10232d);
    animation:ship-icon-beacon 1.8s ease-in-out infinite;
}
.tracking-redesign .route-panel .route-node > span:first-child:has(.ship-symbol)::after {
    content:''; position:absolute; inset:-5px; border:2px solid #2dd4bf;
    border-radius:inherit; pointer-events:none; animation:ship-icon-ring 1.8s ease-out infinite;
}
@keyframes ship-icon-beacon {
    0%,100% { color:#5eead4; box-shadow:0 0 0 4px #14b8a61a,0 0 8px #14b8a633; }
    50% { color:#ecfdf5; box-shadow:0 0 0 8px #14b8a633,0 0 26px #2dd4bf88; }
}
@keyframes ship-icon-ring { from { transform:scale(1); opacity:.85; } to { transform:scale(1.35); opacity:0; } }
.tracking-redesign .motion-paused .route-node > span:first-child:has(.ship-symbol),
.tracking-redesign .motion-paused .route-node > span:first-child:has(.ship-symbol)::after { animation-play-state:paused!important; }
@media(prefers-reduced-motion:reduce) {
    .tracking-redesign .route-panel .route-node > span:first-child:has(.ship-symbol),
    .tracking-redesign .route-panel .route-node > span:first-child:has(.ship-symbol)::after { animation:none; }
}
.tracking-redesign .route-panel .freight-route { --voyage-top:50px; --voyage-height:136px; }
.tracking-redesign .route-panel .route-vessel { left:50%; top:calc(var(--voyage-top) + var(--voyage-height) * .30 - 28px); }
.tracking-redesign .route-panel .route-vessel > span:first-child { color:#6ee7b7; border-color:#10b981; background:#10232d; box-shadow:0 0 22px #10b98133; }
.tracking-redesign .route-panel .vessel-moving { animation:ship-voyage 14s linear infinite; }
.tracking-redesign .motion-paused .vessel-moving { animation-play-state:paused!important; }
@keyframes ship-voyage {
    0% { left:10%; top:calc(var(--voyage-top) + var(--voyage-height) * .68 - 28px); opacity:0; }
    5% { opacity:1; }
    25% { left:30%; top:calc(var(--voyage-top) + var(--voyage-height) * .395 - 28px); }
    50% { left:50%; top:calc(var(--voyage-top) + var(--voyage-height) * .30 - 28px); }
    75% { left:70%; top:calc(var(--voyage-top) + var(--voyage-height) * .395 - 28px); }
    95% { opacity:1; }
    100% { left:90%; top:calc(var(--voyage-top) + var(--voyage-height) * .68 - 28px); opacity:0; }
}
@media(max-width:760px) {
    .tracking-redesign .route-panel .freight-route { --voyage-top:74px; --voyage-height:122px; }
}
@media(prefers-reduced-motion:reduce) {
    .tracking-redesign .route-panel .vessel-moving { animation:none; }
}
@media(prefers-reduced-motion:reduce) {
    .tracking-redesign .milestones .shipment-step.current .dot,
    .tracking-redesign .milestones .shipment-step.current .dot::after { animation:none; }
}