: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}
*{box-sizing:border-box}
body{font-family:Inter,"Segoe UI",Arial,sans-serif!important;color:var(--sx-ink)!important;background:linear-gradient(180deg,#edf4f8 0,#f7f9fb 320px)!important;min-height:100vh}
body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:-1;background:radial-gradient(circle at 8% 3%,rgba(32,184,214,.10),transparent 26%),repeating-linear-gradient(118deg,transparent 0 100px,rgba(16,96,179,.025) 101px 102px)}
header{background:linear-gradient(115deg,var(--sx-navy),var(--sx-navy-2) 68%,#10395f)!important;border-bottom:3px solid var(--sx-cyan);box-shadow:0 8px 24px rgba(7,20,38,.16);min-height:62px}
header h1{letter-spacing:-.015em!important}header a{color:#bfeaf2!important}header a:hover{color:#fff!important}
main{position:relative}
.card,.mod,.stat,details,.summary{border-color:var(--sx-line)!important;box-shadow:0 10px 30px rgba(7,20,38,.055);border-radius:13px!important}
.mod{transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;background:linear-gradient(145deg,#fff,#f8fbfd)!important}
.mod:hover{transform:translateY(-2px);box-shadow:0 16px 36px rgba(7,20,38,.11);border-color:#9bcde2!important}.mod strong{color:var(--sx-blue)!important}
button.primary,.primary,button[type="submit"]{background:linear-gradient(135deg,var(--sx-blue),#1676c9)!important;color:#fff!important;box-shadow:0 8px 20px rgba(16,96,179,.18)}
button:hover{filter:brightness(1.04)}input:focus,select:focus,textarea:focus{outline:3px solid rgba(32,184,214,.18)!important;border-color:var(--sx-cyan)!important}
th{background:#eaf2f7!important;color:#16324a}.badge{background:#e7f2f8!important}.progress span{background:linear-gradient(90deg,var(--sx-cyan),#16835a)!important}
.shadow-notice,.notice{border-left:5px solid var(--sx-amber)!important;background:#fff8df!important;border-color:#efcd74!important}
body[data-surface="migration"] header{border-bottom-color:var(--sx-amber)}
body[data-surface="migration"] .shadow-notice:before,body[data-surface="migration"] .notice:before{content:"MIGRATION UAT \00B7  LOCAL REVIEW";display:block;color:#9a5a05;font-size:10px;font-weight:900;letter-spacing:.14em;margin-bottom:5px}
body[data-surface="staff-login"]{display:grid!important;place-items:center;background:radial-gradient(circle at 15% 15%,#123f68 0,var(--sx-navy) 45%,#040b14 100%)!important}
body[data-surface="staff-login"]::before{z-index:0;background:repeating-linear-gradient(118deg,transparent 0 92px,rgba(32,184,214,.07) 93px 94px)}
body[data-surface="staff-login"] main{position:relative;z-index:1;border:1px solid rgba(255,255,255,.14)!important;box-shadow:0 30px 90px rgba(0,0,0,.42)!important}
body[data-surface="staff-login"] header{display:block;min-height:0;border-bottom-color:var(--sx-cyan)}
@media(prefers-reduced-motion:reduce){.mod{transition:none}}
body[data-surface="staff-login"]{place-items:center start!important;padding-left:clamp(20px,9vw,150px)!important}
body[data-surface="staff-login"]::before{z-index:2;background:linear-gradient(90deg,rgba(4,13,25,.60),rgba(4,13,25,.18) 58%,rgba(4,13,25,.08)),radial-gradient(circle,rgba(255,255,255,.055) 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="staff-login"] .freight-backdrop{background-image:url('/operations/images/ops-login-freight.png')}
body[data-surface="staff-login"] .freight-backdrop{z-index:1}
body[data-surface="staff-login"] main.login-card{z-index:3;width:min(420px,100%);background:rgba(255,255,255,.975);border:1px solid rgba(255,255,255,.22)!important;border-radius:14px!important;overflow:hidden;box-shadow:0 28px 90px rgba(0,0,0,.52)!important}
body[data-surface="staff-login"] header.card-top{display:block;background:#fff!important;color:var(--sx-ink)!important;text-align:center;padding:28px 40px 18px;border:0;box-shadow:none;min-height:0}
.logo-wrap{display:flex;justify-content:center;margin-bottom:12px}.logo-wrap img{height:72px;width:auto}.brand-name{display:block!important;color:var(--sx-blue);font-size:22px!important}.brand-sub{display:block!important;margin-top:4px!important;color:#65748b!important;font-size:11px!important;font-weight:700;letter-spacing:1.5px;text-transform:uppercase}.surface-note{display:block!important;margin-top:10px!important;color:#35536c!important;font-size:11px!important;font-weight:700;letter-spacing:.02em}.brand-stripe{height:4px;background:linear-gradient(90deg,var(--sx-blue),var(--sx-cyan) 65%,var(--sx-amber))}.card-body{padding:28px 40px 22px!important}.card-footer{padding:0 40px 26px!important;text-align:center}
@keyframes freightBreathe{from{filter:saturate(.92) brightness(.88)}to{filter:saturate(1.08) brightness(1.01)}}
@media(max-width:700px){body[data-surface="staff-login"]{place-items:center!important;padding:12px!important}.freight-backdrop{background-position:66% center}.card-body{padding:24px!important}body[data-surface="staff-login"] header.card-top{padding:22px 24px 16px}.card-footer{padding:0 24px 24px!important}}
@media(prefers-reduced-motion:reduce){.freight-backdrop{animation:none;transition:none;transform:none}}