/* UMI Brand Identity V1.0 — Container Tracking / Global Delivery.
   Black + Concrete White + Engineering Grey; Tech Blue is a restrained accent.
   The supplied official symbol is displayed without geometric alterations. */
:root {
  --brand-black: #050505;
  --concrete-white: #f5f5f2;
  --engineering-grey: #9a9a96;
  --tech-blue: #246bfd;
  --navy: var(--brand-black);
  --ink: var(--brand-black);
  --bg: var(--concrete-white);
  --muted: #70706b;
  --line: #dfdfda;
  --teal: var(--tech-blue);
}
body { font-family: Inter, "Helvetica Neue", Helvetica, "Noto Sans SC", "Microsoft YaHei", Arial, sans-serif; }
h1, h2, h3 { font-family: inherit; }
button, .button, input, select, textarea { border-radius: 2px; }
.primary { background: var(--brand-black); border-color: var(--brand-black); color: white; }
.primary:hover { background: var(--tech-blue); border-color: var(--tech-blue); filter: none; }
button:focus-visible, a:focus-visible, input:focus, select:focus, textarea:focus { outline-color: var(--tech-blue); }
aside { background: var(--brand-black); border-right: 1px solid #262626; }
.brand { gap: 12px; }
.brandmark { width: 46px; height: 46px; flex: 0 0 46px; background: #fff; border-radius: 0; padding: 3px; }
.brandmark img { display: block; width: 100%; height: 100%; object-fit: contain; }
.brand strong { font-family: Inter, Helvetica, Arial, sans-serif; font-size: 31px; font-weight: 750; letter-spacing: -.8px; }
.brand strong span { font-family: inherit; font-size: 7px; letter-spacing: 1.2px; font-weight: 500; color: #a8a8a3; margin-top: 8px; }
.workspace { color: #90908b; letter-spacing: 1.3px; margin-top: 52px; }
nav a { color: #bcbcb6; }
nav a:hover { background: #151515; color: white; }
nav a.active { background: #202020; color: white; }
nav a.active:before { background: var(--tech-blue); width: 2px; }
.side-card { border: 1px solid #30302e; background: transparent; padding: 20px 14px; }
.side-card strong { display: block; font-size: 9px; letter-spacing: 1px; font-weight: 500; color: #f5f5f2; }
.side-card p { color: #92928d; font-size: 11px; margin-top: 11px; }
.node-strip { display: flex; align-items: center; gap: 0; margin: 0 0 20px; }
.node-strip i { width: 7px; height: 7px; border: 1px solid #777772; border-radius: 0; background: transparent; margin: 0; }
.node-strip i:nth-of-type(2) { border-color: var(--tech-blue); background: var(--tech-blue); }
.node-strip span { width: 35px; border-top: 1px solid #575752; }
.avatar { font-size: 11px; background: #292929; color: #e2e2dc; }
.side-bottom small { color: #969690; }
.signout { color: #a4a49e; }
header { background: var(--concrete-white); font-size: 11px; }
.header-right { font-size: 9px; letter-spacing: 1.35px; color: #666660; }
main { padding-top: 24px; }
.notice { border: 1px solid #deded7; border-left: 2px solid #7b7b73; background: #eeeee8; color: #50504b; padding: 11px 15px; margin-bottom: 29px; }
.notice.error { border-left-color: #a24734; }
.live-note { font-size: 11px; }
.eyebrow { font-size: 9px; letter-spacing: 1.55px; font-weight: 600; color: #656560; display: flex; align-items: center; gap: 9px; }
.eyebrow:before { content: ""; width: 5px; height: 5px; background: var(--tech-blue); flex: 0 0 5px; }
.page-heading { margin-bottom: 32px; }
h1 { letter-spacing: -1.3px; font-weight: 650; }
.page-heading p { color: #787872; font-size: 12px; }
.metrics { gap: 16px; }
.metrics article { border-top: 2px solid var(--brand-black); background: transparent; padding: 20px 21px; position: relative; }
.metrics article:after { position: absolute; right: 19px; top: 17px; font: 9px Inter, Arial, sans-serif; color: #a5a59e; }
.metrics article:nth-child(1):after { content: "01"; }
.metrics article:nth-child(2):after { content: "02"; }
.metrics article:nth-child(3):after { content: "03"; }
.metrics article:nth-child(4):after { content: "04"; }
.metrics article > span { font-size: 11px; color: #65655f; padding-right: 19px; }
.metrics strong { font: 550 38px Inter, Helvetica, Arial, sans-serif; letter-spacing: -1.8px; margin-top: 14px; }
.metrics article:nth-child(2) strong { color: var(--tech-blue); }
.metrics .dot { display: none; }
.metrics small { font-size: 10px; }
.panel { border-color: #deded8; background: #fff; }
.panel-heading { padding: 23px 24px; }
.panel-heading h2 { font-size: 16px; font-weight: 600; letter-spacing: -.35px; }
.panel-heading .muted { color: #84847e; }
.count { background: #f0f0eb; color: #777770; border-radius: 0; }
.tabs .selected { background: transparent; box-shadow: inset 0 -2px var(--tech-blue); color: var(--brand-black); }
.tabs button { font-size: 11px; }
.search input { background: var(--concrete-white); border-color: #e0e0da; }
th { background: #f6f6f2; color: #75756e; font-size: 9px; }
td .ref { font-weight: 600; }
td .ref:hover { color: var(--tech-blue); }
td small { color: #83837d; }
td:nth-child(2), td:nth-child(3), td:nth-child(5) { white-space: normal; }
td:nth-child(2) { min-width: 130px; }
td:nth-child(3) { min-width: 140px; }
td:nth-child(5) { min-width: 108px; }
.badge { background: #f1f4fb; border-color: #e1e6f0; color: #1b51b9; border-radius: 2px; }
.badge.delivered { background: #f0f0eb; border-color: #dfdfd6; color: #50504b; }
.route-inline span { color: #96968f; }
.arrow { border-color: #dfdfd8; color: #676760; }
.arrow:hover { color: var(--tech-blue); border-color: var(--tech-blue); }
.table-footer { color: #787872; }
.bottom-note { gap: 15px; }
.bottom-note > span { color: var(--tech-blue); font-size: 20px; }
.bottom-note strong { font-weight: 500; font-size: 11px; }
.bottom-note p { font-size: 10px; }
footer { color: #898982; font-size: 9px; letter-spacing: .2px; }
footer > span { font-size: 8px; letter-spacing: .6px; }
.share-bar { background: #eaeae4; border: 1px solid #deded6; }
.share-bar a, .text-button, .inline-link { color: #1a56c9; }
.container-number { font-family: Inter, Helvetica, Arial, sans-serif; font-weight: 600; }
.container-card .panel-heading { border-top: 2px solid var(--brand-black); }
.journey { background: var(--concrete-white); position: relative; }
.journey:after { content: ""; position: absolute; width: 8px; height: 8px; right: 10px; bottom: 10px; border-right: 1px solid #b7b7b0; border-bottom: 1px solid #b7b7b0; }
.journey span { color: #7b7b73; }
.journey h3 { font-weight: 550; }
.sea-line span, .sea-line b { color: var(--tech-blue); }
.sea-line div { border-top: 1px solid #bfc3cc; }
.latest { background: var(--concrete-white); border-color: #deded7; border-left: 2px solid var(--tech-blue); }
.latest > span { color: #66665f; }
.facts strong { font-weight: 450; font-variant-numeric: tabular-nums; }
.event i { border-radius: 0; border: 2px solid #dce6fa; background: var(--tech-blue); }
.event:before { border-color: #dbdbd4; }
.event.estimated i { border-color: #aaa9a2; background: white; }
.event-type { color: #77776f; }
.sync-footer { background: #fafaf7; color: #75756e; }
.bill-form { background: var(--concrete-white); }
.info-card { background: var(--brand-black); border-radius: 2px; border: 1px solid #252525; }
.info-card .info-icon { color: var(--tech-blue); }
.info-card p { color: #b0b0a9; }
.info-card ol { color: #d7d7cf; }
.avatar.light { background: #f0f0eb; color: var(--brand-black); }
.login-brand { background: var(--brand-black); padding: 48px 56px; position: relative; }
.login-brand:after { content: ""; position: absolute; right: 0; top: 0; bottom: 0; width: 1px; background: #272727; }
.login-message h1 { font-weight: 600; letter-spacing: -2.6px; font-size: 53px; }
.login-message .eyebrow { color: #a9a9a2; }
.login-message p { color: #b2b2a9; font-size: 12px; }
.ocean-art { margin: 38px 0 30px; }
.ocean-art > img { width: 100%; max-width: 440px; height: auto; display: block; }
.ocean-art .connection-labels { display: flex; justify-content: space-between; max-width: 440px; margin: 15px 0 0; letter-spacing: 0; white-space: normal; }
.connection-labels span { color: #9a9a96; font-size: 8px; letter-spacing: .8px; }
.login-brand > small { font-size: 8px; letter-spacing: 1px; color: #9a9a96; }
.login-form { background: var(--concrete-white); }
.login-form h2 { font-weight: 600; letter-spacing: -1px; }
.login-form small { color: #72726a; }
.public-header { background: var(--concrete-white); }
.public-header .brand strong, .public-header .brand strong span { color: var(--brand-black); }
.public-header .brand strong span { color: #73736c; }
.public-header > span { color: #696962; font-size: 8px; letter-spacing: 1.2px; }
.public-title { padding: 8px 0 26px; border-bottom: 1px solid #ccccc4; position: relative; }
.public-title:after { content: ""; width: 7px; height: 7px; border: 1px solid var(--tech-blue); position: absolute; bottom: -4px; right: 0; background: var(--concrete-white); }
.public-title h1 { font-weight: 600; letter-spacing: -1.5px; }
.public-foot { border-top: 1px solid var(--line); padding-top: 30px; }
.public-foot > strong { display: block; font: 700 24px Inter, Helvetica, Arial, sans-serif; letter-spacing: -.7px; }
.public-foot > strong span { display: block; font-size: 8px; font-weight: 450; letter-spacing: 1.5px; margin-top: 8px; }
.public-foot .brand-statement { color: #42423d; font-size: 11px; margin: 20px 0; }
#toast { background: var(--brand-black); border-left: 2px solid var(--tech-blue); box-shadow: none; }
@media (min-width: 761px) and (max-width: 1350px) {
  td, th { padding-left: 15px; padding-right: 15px; }
  td { font-size: 11px; }
  td .ref { font-size: 12px; }
  th { font-size: 8px; letter-spacing: .4px; }
  .route-inline span { margin: 0 7px; }
}
@media (max-width: 1150px) {
  .brand { gap: 9px; }
  .brandmark { width: 40px; height: 40px; flex-basis: 40px; }
  .brand strong { font-size: 28px; }
  .brand strong span { font-size: 6px; letter-spacing: .9px; }
  .metrics article { padding-inline: 16px; }
  .metrics article > span { font-size: 10px; }
  .metrics article:after { right: 12px; }
  .login-brand { padding: 40px; }
  .login-message h1 { font-size: 44px; }
}
@media (max-width: 760px) {
  .brandmark { width: 36px; height: 36px; flex-basis: 36px; }
  .brand strong { font-size: 26px; }
  .brand strong span { font-size: 6px; margin-top: 6px; }
  aside { border-right: 0; border-bottom: 1px solid #292929; }
  nav a.active { box-shadow: inset 0 -2px var(--tech-blue); }
  main { padding: 20px 16px; }
  h1 { font-size: 27px; letter-spacing: -1.15px; }
  .eyebrow { font-size: 8px; letter-spacing: 1.1px; }
  .metrics { gap: 10px; }
  .metrics article { padding: 17px 13px; }
  .metrics strong { font-size: 32px; }
  .metrics small { font-size: 9px; }
  .metrics article:after { top: 15px; right: 11px; font-size: 8px; }
  .panel-heading { padding: 19px 16px; }
  .tabs button { font-size: 10px; }
  .login-brand { padding: 25px; }
  .login-message h1 { font-size: 37px; letter-spacing: -1.7px; }
  .journey h3 { font-size: 20px; }
  .public-title { padding-top: 0; }
  .public-title h1 { font-size: 29px; }
  .public-header > span { font-size: 7px; max-width: 108px; }
  footer { display: block; font-size: 9px; }
  footer > span { display: block; margin-top: 10px; font-size: 8px; }
}