:root {
      --ink: #101828;
      --muted: #667085;
      --line: #d9e2ef;
      --panel: #ffffff;
      --page: #f5f8fc;
      --nav: #061d35;
      --nav-2: #0b2d51;
      --blue: #2d7ff9;
      --green: #2fb969;
      --amber: #f6a63a;
      --violet: #8b5cf6;
      --red: #e55353;
      --shadow: 0 16px 36px rgba(16, 24, 40, .08);
    }

    * { box-sizing: border-box; }

    body {
      margin: 0;
      min-height: 100vh;
      font-family: Inter, Arial, sans-serif;
      color: var(--ink);
      background: var(--page);
    }

    button, input { font: inherit; }

    .app {
      display: grid;
      grid-template-columns: 248px minmax(0, 1fr);
      min-height: 100vh;
    }

    .sidebar {
      position: sticky;
      top: 0;
      height: 100vh;
      display: flex;
      flex-direction: column;
      gap: 26px;
      padding: 30px 18px;
      background:
        radial-gradient(circle at 10% 0%, rgba(45, 127, 249, .18), transparent 26%),
        linear-gradient(180deg, var(--nav), #02101f 92%);
      color: #d8e6f7;
    }

    .brand {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 0 14px 14px;
    }

    .brand-mark {
      width: 44px;
      height: 44px;
      border-radius: 8px;
      display: grid;
      place-items: center;
      background: linear-gradient(145deg, #59a7ff, #1e64d9);
      font-weight: 800;
      font-size: 24px;
      color: white;
      box-shadow: 0 14px 30px rgba(45, 127, 249, .35);
    }

    .brand strong {
      display: block;
      color: #fff;
      font-size: 18px;
      letter-spacing: 0;
    }

    .brand span {
      display: block;
      color: #9fb6d1;
      font-size: 12px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 1.2px;
    }

    .nav {
      display: grid;
      gap: 7px;
    }

    .nav a {
      display: flex;
      align-items: center;
      gap: 12px;
      min-height: 46px;
      padding: 0 14px;
      border-radius: 8px;
      color: #d7e5f8;
      text-decoration: none;
      font-size: 14px;
      font-weight: 650;
    }

    .nav a.active {
      color: white;
      background: linear-gradient(90deg, #155fc7, #124b94);
      box-shadow: inset 3px 0 0 #6fb5ff;
    }

    .nav i { width: 19px; height: 19px; }

    .login-panel {
      margin-top: auto;
      padding: 14px;
      border: 1px solid rgba(151, 187, 225, .24);
      border-radius: 8px;
      background: rgba(255, 255, 255, .05);
      display: grid;
      gap: 12px;
    }

    .login-summary {
      display: flex;
      align-items: center;
      gap: 11px;
    }

    .login-icon {
      width: 36px;
      height: 36px;
      border-radius: 50%;
      display: grid;
      place-items: center;
      background: #2d7ff9;
      color: white;
      font-size: 12px;
      font-weight: 800;
    }

    .login-panel strong {
      display: block;
      color: white;
      font-size: 13px;
    }

    .login-panel span {
      display: block;
      color: #a9bdd5;
      font-size: 11px;
      margin-top: 2px;
    }

    .login-button {
      width: 100%;
      min-height: 38px;
      border: 1px solid rgba(151, 187, 225, .3);
      border-radius: 8px;
      background: #2d7ff9;
      color: white;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      font-size: 12px;
      font-weight: 850;
      cursor: pointer;
    }

    .login-modal {
      position: fixed;
      inset: 0;
      z-index: 20;
      display: none;
      place-items: center;
      padding: 24px;
      background: rgba(6, 29, 53, .56);
      backdrop-filter: blur(8px);
    }

    .login-modal.open {
      display: grid;
    }

    .login-box {
      width: min(420px, 100%);
      border: 1px solid #d9e2ef;
      border-radius: 8px;
      background: white;
      box-shadow: 0 24px 70px rgba(16, 24, 40, .25);
      overflow: hidden;
    }

    .login-box-header {
      padding: 22px 24px 16px;
      border-bottom: 1px solid #e8eef6;
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 16px;
    }

    .login-box-header h2 {
      margin: 0;
      font-size: 22px;
      letter-spacing: 0;
    }

    .login-box-header p {
      margin: 7px 0 0;
      color: var(--muted);
      font-size: 13px;
      line-height: 1.45;
    }

    .close-login {
      width: 36px;
      height: 36px;
      border: 1px solid #d8e2ef;
      border-radius: 8px;
      background: white;
      color: #24425f;
      display: grid;
      place-items: center;
      cursor: pointer;
      flex: 0 0 auto;
    }

    .login-form {
      padding: 20px 24px 24px;
      display: grid;
      gap: 14px;
    }

    .field {
      display: grid;
      gap: 7px;
    }

    .field label {
      color: #26374b;
      font-size: 12px;
      font-weight: 850;
    }

    .field input,
    .field select {
      width: 100%;
      min-height: 42px;
      border: 1px solid #cfdbea;
      border-radius: 8px;
      background: #fbfdff;
      color: var(--ink);
      padding: 0 12px;
      outline: none;
    }

    .field input:focus,
    .field select:focus {
      border-color: var(--blue);
      box-shadow: 0 0 0 3px rgba(45, 127, 249, .14);
    }

    .login-submit {
      min-height: 44px;
      border: 0;
      border-radius: 8px;
      background: #07264a;
      color: white;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 9px;
      font-size: 13px;
      font-weight: 900;
      cursor: pointer;
      margin-top: 4px;
    }

    .login-help {
      color: var(--muted);
      font-size: 12px;
      text-align: center;
    }

    main {
      padding: 26px 24px 22px;
      overflow: hidden;
    }

    .topbar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      margin-bottom: 22px;
    }

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

    h1 {
      margin: 0;
      font-size: 25px;
      line-height: 1.1;
      letter-spacing: 0;
    }

    .title-row p {
      margin: 0 0 3px;
      color: var(--muted);
      font-size: 13px;
      white-space: nowrap;
    }

    .actions {
      display: flex;
      align-items: center;
      gap: 12px;
    }

    .icon-btn {
      width: 38px;
      height: 38px;
      border: 1px solid transparent;
      border-radius: 8px;
      display: grid;
      place-items: center;
      background: transparent;
      color: #24425f;
      cursor: pointer;
      position: relative;
    }

    .icon-btn .dot {
      position: absolute;
      top: 6px;
      right: 6px;
      width: 9px;
      height: 9px;
      border-radius: 50%;
      background: var(--blue);
      border: 2px solid white;
    }

    .primary-btn {
      height: 40px;
      border: 0;
      border-radius: 8px;
      background: #07264a;
      color: white;
      padding: 0 16px;
      display: inline-flex;
      align-items: center;
      gap: 9px;
      font-size: 13px;
      font-weight: 800;
      cursor: pointer;
      box-shadow: 0 12px 22px rgba(7, 38, 74, .18);
      text-decoration: none;
    }

    .dashboard-account {
      height: 40px;
      border: 0;
      background: transparent;
      color: #12233a;
      display: inline-flex;
      align-items: center;
      gap: 9px;
      font-size: 12px;
      font-weight: 850;
      cursor: pointer;
      white-space: nowrap;
      text-decoration: none;
    }

    .avatar {
      width: 31px;
      height: 31px;
      border-radius: 50%;
      background: #08294e;
      color: white;
      display: grid;
      place-items: center;
      font-size: 11px;
      font-weight: 900;
      flex: 0 0 auto;
    }

    .grid {
      display: grid;
      grid-template-columns: minmax(0, 2.35fr) minmax(305px, .95fr);
      gap: 20px;
    }

    .left {
      display: grid;
      gap: 18px;
      min-width: 0;
    }

    .right {
      display: grid;
      gap: 18px;
      align-content: start;
      min-width: 0;
    }

    .card {
      background: var(--panel);
      border: 1px solid var(--line);
      border-radius: 8px;
      box-shadow: var(--shadow);
    }

    .shipment-card {
      padding: 22px;
    }

    .shipment-head {
      display: grid;
      grid-template-columns: 76px minmax(0, 1fr);
      gap: 18px;
      align-items: center;
    }

    .ship-icon {
      width: 64px;
      height: 64px;
      border-radius: 50%;
      display: grid;
      place-items: center;
      background: #eef5ff;
      color: var(--blue);
    }

    .eyebrow {
      margin: 0 0 6px;
      color: #667085;
      font-size: 11px;
      font-weight: 800;
      text-transform: uppercase;
    }

    .route {
      margin: 0 0 14px;
      font-size: 25px;
      line-height: 1.15;
      letter-spacing: 0;
    }

    .route span { color: var(--blue); }

    .shipment-meta {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 15px;
    }

    .meta-label {
      margin: 0 0 5px;
      color: var(--muted);
      font-size: 11px;
      font-weight: 700;
    }

    .meta-value {
      margin: 0;
      color: #132238;
      font-size: 13px;
      font-weight: 800;
    }

    .status {
      width: fit-content;
      border-radius: 6px;
      padding: 5px 10px;
      background: #dff7e8;
      color: #168b49;
      font-size: 12px;
      font-weight: 800;
    }

    .metrics {
      margin-top: 21px;
      padding-top: 19px;
      border-top: 1px solid #e8eef6;
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .metric {
      min-height: 63px;
      padding: 0 17px;
      border-right: 1px solid #e8eef6;
      display: flex;
      gap: 13px;
      align-items: center;
    }

    .metric:first-child { padding-left: 0; }
    .metric:last-child { border-right: 0; padding-right: 0; }

    .metric i {
      width: 38px;
      height: 38px;
      border-radius: 50%;
      display: grid;
      place-items: center;
      background: #eef5ff;
      color: var(--blue);
      flex: 0 0 auto;
    }

    .metric p {
      margin: 0 0 3px;
      color: var(--muted);
      font-size: 12px;
      font-weight: 700;
    }

    .metric strong {
      display: block;
      font-size: 20px;
      line-height: 1;
    }

    .metric small {
      display: block;
      margin-top: 4px;
      color: var(--muted);
      font-size: 11px;
      font-weight: 600;
    }

    .operations {
      display: grid;
      grid-template-columns: 248px minmax(0, 1fr);
      min-height: 420px;
      overflow: hidden;
    }

    .timeline {
      padding: 20px 22px;
      border-right: 1px solid #e8eef6;
    }

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

    .section-head h2 {
      margin: 0;
      font-size: 13px;
      text-transform: uppercase;
      letter-spacing: 0;
    }

    .link-btn {
      border: 1px solid #d8e2ef;
      border-radius: 8px;
      background: white;
      min-height: 34px;
      padding: 0 12px;
      color: #24425f;
      font-size: 12px;
      font-weight: 800;
      display: inline-flex;
      align-items: center;
      gap: 7px;
      cursor: pointer;
    }

    .steps {
      display: grid;
      gap: 0;
      margin-top: 3px;
    }

    .step {
      position: relative;
      display: grid;
      grid-template-columns: 32px minmax(0, 1fr);
      gap: 12px;
      min-height: 58px;
    }

    .step:not(:last-child)::before {
      content: "";
      position: absolute;
      left: 15px;
      top: 31px;
      bottom: -4px;
      width: 2px;
      background: #cdd8e6;
    }

    .step.done:not(:last-child)::before { background: var(--green); }

    .step-mark {
      width: 31px;
      height: 31px;
      border-radius: 50%;
      display: grid;
      place-items: center;
      background: #f8fbff;
      border: 2px solid #cdd8e6;
      color: #9aa8ba;
      z-index: 1;
    }

    .step.done .step-mark {
      background: var(--green);
      border-color: var(--green);
      color: white;
    }

    .step.active .step-mark {
      background: var(--blue);
      border-color: var(--blue);
      color: white;
    }

    .step strong {
      display: block;
      font-size: 12px;
      line-height: 1.3;
    }

    .step span {
      display: block;
      margin-top: 4px;
      color: var(--muted);
      font-size: 11px;
      font-weight: 600;
    }

    .step.active strong { color: var(--blue); }

    .map-pane {
      padding: 20px 18px 18px;
      min-width: 0;
    }

    .map-card {
      position: relative;
      height: 300px;
      border: 1px solid #d8e4f0;
      border-radius: 8px;
      overflow: hidden;
      background:
        linear-gradient(rgba(255,255,255,.22), rgba(255,255,255,.22)),
        url("https://upload.wikimedia.org/wikipedia/commons/8/83/Equirectangular_projection_SW.jpg") center / cover;
    }

    .map-card::after {
      content: "";
      position: absolute;
      inset: 0;
      background: rgba(237, 245, 255, .56);
      pointer-events: none;
    }

    .route-line {
      position: absolute;
      left: 10%;
      right: 8%;
      top: 45%;
      height: 80px;
      z-index: 2;
      border-top: 3px dashed rgba(45, 127, 249, .78);
      border-radius: 50% 50% 0 0;
      transform: rotate(-6deg);
    }

    .pin {
      position: absolute;
      z-index: 3;
      display: grid;
      gap: 7px;
      justify-items: center;
      color: #0b4aa0;
      font-size: 10px;
      font-weight: 900;
      text-transform: uppercase;
    }

    .pin .point {
      width: 16px;
      height: 16px;
      border-radius: 50%;
      border: 4px solid #2d7ff9;
      background: white;
      box-shadow: 0 6px 14px rgba(45, 127, 249, .22);
    }

    .pin em {
      font-style: normal;
      border-radius: 5px;
      padding: 4px 7px;
      background: #2d7ff9;
      color: white;
    }

    .pin.manzanillo { left: 6%; top: 43%; }
    .pin.shanghai { right: 3%; top: 34%; }

    .vessel {
      position: absolute;
      z-index: 4;
      top: 38%;
      left: 47%;
      width: 54px;
      height: 54px;
      border-radius: 50%;
      display: grid;
      place-items: center;
      background: white;
      color: var(--blue);
      box-shadow: 0 10px 26px rgba(45, 127, 249, .25);
    }

    .map-progress {
      position: absolute;
      left: 28px;
      right: 28px;
      bottom: 17px;
      z-index: 4;
      padding: 17px 19px;
      border-radius: 8px;
      background: rgba(255, 255, 255, .92);
      backdrop-filter: blur(10px);
      box-shadow: 0 10px 22px rgba(16, 24, 40, .1);
    }

    .rail {
      height: 6px;
      border-radius: 999px;
      display: grid;
      grid-template-columns: 21% 25% 20% 17% 17%;
      background: #dce6f3;
      overflow: hidden;
      margin-bottom: 12px;
    }

    .rail span:nth-child(1) { background: var(--green); }
    .rail span:nth-child(2) { background: var(--blue); }

    .ports {
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      gap: 8px;
    }

    .ports strong {
      display: block;
      font-size: 11px;
      line-height: 1.25;
    }

    .ports span {
      display: block;
      margin-top: 4px;
      color: var(--muted);
      font-size: 10px;
      font-weight: 650;
    }

    .stat-grid {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 12px;
    }

    .stat {
      min-height: 92px;
      padding: 16px;
      display: grid;
      grid-template-columns: 42px minmax(0, 1fr);
      align-items: center;
      gap: 13px;
    }

    .stat i {
      width: 42px;
      height: 42px;
      border-radius: 50%;
      display: grid;
      place-items: center;
      background: #eef5ff;
      color: var(--blue);
    }

    .stat:nth-child(2) i { background: #e8f8ef; color: var(--green); }
    .stat:nth-child(3) i { background: #fff2dd; color: var(--amber); }
    .stat:nth-child(4) i { background: #f1eaff; color: var(--violet); }

    .stat strong {
      display: block;
      font-size: 25px;
      line-height: 1;
    }

    .stat span {
      display: block;
      margin-top: 6px;
      color: #26374b;
      font-size: 12px;
      font-weight: 750;
    }

    .stat small {
      display: block;
      margin-top: 6px;
      color: var(--muted);
      font-size: 11px;
      font-weight: 650;
    }

    .side-card {
      padding: 18px;
    }

    .profile-card {
      padding: 18px;
      display: grid;
      gap: 16px;
      overflow: hidden;
    }

    .profile-head {
      display: grid;
      grid-template-columns: 48px minmax(0, 1fr) 34px;
      gap: 12px;
      align-items: center;
    }

    .profile-avatar {
      width: 48px;
      height: 48px;
      border-radius: 50%;
      display: grid;
      place-items: center;
      background: linear-gradient(145deg, #0c3866, #2d7ff9);
      color: white;
      font-size: 14px;
      font-weight: 900;
      box-shadow: 0 12px 24px rgba(45, 127, 249, .22);
    }

    .profile-head h2 {
      margin: 0;
      font-size: 17px;
      line-height: 1.1;
    }

    .profile-head span {
      display: block;
      margin-top: 4px;
      color: var(--muted);
      font-size: 12px;
      font-weight: 700;
    }

    .profile-action {
      width: 34px;
      height: 34px;
      border: 1px solid #d8e2ef;
      border-radius: 8px;
      background: #fbfdff;
      color: #24425f;
      display: grid;
      place-items: center;
      cursor: pointer;
      text-decoration: none;
    }

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

    .profile-meta div {
      min-width: 0;
      border: 1px solid #e6edf6;
      border-radius: 8px;
      background: #f8fbff;
      padding: 10px;
    }

    .profile-meta span,
    .profile-stats span {
      display: block;
      color: var(--muted);
      font-size: 10px;
      font-weight: 800;
      text-transform: uppercase;
    }

    .profile-meta strong {
      display: block;
      margin-top: 5px;
      color: #182a40;
      font-size: 12px;
      line-height: 1.25;
      font-weight: 850;
    }

    .profile-stats {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      border: 1px solid #e6edf6;
      border-radius: 8px;
      overflow: hidden;
    }

    .profile-stats div {
      min-width: 0;
      padding: 12px 10px;
      text-align: center;
      border-right: 1px solid #e6edf6;
    }

    .profile-stats div:last-child {
      border-right: 0;
    }

    .profile-stats strong {
      display: block;
      color: #0b4aa0;
      font-size: 18px;
      line-height: 1;
    }

    .profile-stats span {
      margin-top: 6px;
      text-transform: none;
    }

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

    .profile-contact a {
      min-height: 36px;
      border: 1px solid #d8e2ef;
      border-radius: 8px;
      color: #24425f;
      text-decoration: none;
      font-size: 12px;
      font-weight: 850;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 7px;
      background: white;
    }

    .side-title {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 14px;
    }

    .side-title h2 {
      margin: 0;
      font-size: 13px;
      text-transform: uppercase;
    }

    .side-title a {
      color: var(--blue);
      font-size: 12px;
      text-decoration: none;
      font-weight: 850;
    }

    .alert-list,
    .doc-list {
      display: grid;
      gap: 15px;
    }

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

    .alert i {
      width: 24px;
      height: 24px;
      border-radius: 50%;
      display: grid;
      place-items: center;
      background: #e8f8ef;
      color: var(--green);
    }

    .alert.info i { background: #eef5ff; color: var(--blue); }
    .alert.warn i { background: #fff2dd; color: var(--amber); }
    .alert.neutral i { background: #f1f4f8; color: #7b8aa0; }

    .alert strong {
      display: block;
      font-size: 12px;
      line-height: 1.3;
    }

    .alert span {
      display: block;
      margin-top: 3px;
      color: var(--muted);
      font-size: 11px;
      font-weight: 650;
    }

    .alert time {
      color: var(--muted);
      font-size: 10px;
      line-height: 1.45;
      text-align: right;
      white-space: nowrap;
    }

    .detail-list {
      display: grid;
      gap: 12px;
      font-size: 12px;
    }

    .detail-row {
      display: flex;
      justify-content: space-between;
      gap: 12px;
      color: var(--muted);
      font-weight: 700;
    }

    .detail-row strong {
      color: #182a40;
      text-align: right;
      font-weight: 850;
    }

    .doc {
      display: grid;
      grid-template-columns: 24px minmax(0, 1fr) auto;
      align-items: center;
      gap: 10px;
      font-size: 12px;
      font-weight: 800;
    }

    .doc i { color: var(--blue); }

    .pill {
      border-radius: 6px;
      padding: 5px 8px;
      background: #dff7e8;
      color: #168b49;
      font-size: 10px;
      font-weight: 900;
    }

    @media (max-width: 1180px) {
      .app { grid-template-columns: 86px minmax(0, 1fr); }
      .sidebar { padding: 22px 12px; align-items: center; }
      .brand { padding: 0; }
      .brand div:not(.brand-mark), .nav span, .login-panel div:not(.login-summary), .login-summary div { display: none; }
      .nav a { width: 52px; justify-content: center; padding: 0; }
      .login-panel { padding: 10px; }
      .grid { grid-template-columns: 1fr; }
      .right { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    }

    @media (max-width: 900px) {
      main { padding: 18px; }
      .topbar { align-items: flex-start; }
      .title-row { display: block; }
      .title-row p { margin-top: 6px; white-space: normal; }
      .shipment-meta, .metrics, .stat-grid, .right { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .operations { grid-template-columns: 1fr; }
      .timeline { border-right: 0; border-bottom: 1px solid #e8eef6; }
    }

    @media (max-width: 640px) {
      .app { display: block; }
      .sidebar {
        position: static;
        height: auto;
        display: block;
        padding: 16px;
      }
      .brand div:not(.brand-mark), .nav span, .login-panel div:not(.login-summary), .login-summary div { display: block; }
      .nav {
        grid-template-columns: repeat(4, 1fr);
        margin-top: 14px;
      }
      .nav a {
        width: auto;
        min-height: 44px;
        justify-content: center;
      }
      .nav a span { display: none; }
      .login-panel { display: none; }
      .topbar, .actions { align-items: stretch; }
      .topbar { display: grid; }
      .actions { justify-content: space-between; }
      .primary-btn { flex: 1; justify-content: center; }
      h1 { font-size: 22px; }
      .route { font-size: 21px; }
      .shipment-head { grid-template-columns: 1fr; }
      .shipment-meta, .metrics, .stat-grid, .right { grid-template-columns: 1fr; }
      .metric { border-right: 0; border-bottom: 1px solid #e8eef6; padding: 13px 0; }
      .metric:last-child { border-bottom: 0; }
      .map-card { height: 360px; }
      .map-progress { left: 14px; right: 14px; padding: 14px; }
      .ports { grid-template-columns: repeat(2, 1fr); }
    }