:root{--sx-navy:#071426;--sx-navy-2:#0b203b;--sx-blue:#1060b3;--sx-cyan:#20b8d6;--sx-amber:#f08a24;--sx-ink:#152238;--sx-slate:#65748b;--sx-mist:#eef4f8;--sx-line:#d8e3ec}
body{font-family:Inter,"Segoe UI",Arial,sans-serif}
body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:-1;background:repeating-linear-gradient(118deg,transparent 0 92px,rgba(32,184,214,.035) 93px 94px)}
.topbar,.trk-header{background:linear-gradient(120deg,var(--sx-navy),var(--sx-navy-2))!important;border-bottom:1px solid rgba(255,255,255,.12)}
.stripe,.brand-stripe{background:linear-gradient(90deg,var(--sx-cyan),var(--sx-blue) 64%,var(--sx-amber))!important}
.card,.rpt-card,.shipment-search,.login-card{border-color:var(--sx-line)!important;box-shadow:0 14px 42px rgba(7,20,38,.08)}
.view-btn,.primary-btn,.btn-primary{background:linear-gradient(135deg,var(--sx-blue),#1676c9)!important}
input:focus,select:focus,textarea:focus{outline:3px solid rgba(32,184,214,.18)!important;border-color:var(--sx-cyan)!important}
.stage-pill,.count,.badge{letter-spacing:.01em}
@media(prefers-reduced-motion:reduce){body::after{background:none}}
body[data-surface="client-login"]{align-items:flex-start;background:var(--sx-navy)!important;padding-left:clamp(20px,9vw,150px)}
body[data-surface="client-login"]::before{z-index:0;background:linear-gradient(90deg,rgba(4,13,25,.56) 0,rgba(4,13,25,.20) 46%,rgba(4,13,25,.08) 100%),radial-gradient(circle,rgba(255,255,255,.06) 1px,transparent 1px);background-size:auto,28px 28px}
.freight-backdrop{position:fixed;inset:-18px;z-index:-1;background:center/cover no-repeat;transform:translate(var(--shift-x,0),var(--shift-y,0)) scale(1.035);transition:transform .18s ease-out;animation:freightBreathe 16s ease-in-out infinite alternate;will-change:transform}
body[data-surface="client-login"] .freight-backdrop{background-image:url('/images/connect-login-freight.png')}
body[data-surface="client-login"] .login-card{border:1px solid rgba(255,255,255,.22)!important;box-shadow:0 28px 90px rgba(0,0,0,.5)!important}
.surface-note{margin-top:10px;color:#35536c;font-size:11px;font-weight:700;letter-spacing:.02em}
@keyframes freightBreathe{from{filter:saturate(.92) brightness(.92)}to{filter:saturate(1.08) brightness(1.03)}}
@media(max-width:700px){body[data-surface="client-login"]{align-items:center;padding-left:12px}.freight-backdrop{background-position:65% center}}
@media(prefers-reduced-motion:reduce){.freight-backdrop{animation:none;transition:none;transform:none}}