:root {
  color-scheme: light;
  --blue: #2f5f9f;
  --blue-dark: #244b80;
  --line: #cfd9e2;
  --line-soft: #e6edf2;
  --paper: #eef3f7;
  --panel: #ffffff;
  --ink: #1c2733;
  --muted: #667586;
  --label: #f2f6f9;
  --green: #1f8a70;
  --orange: #9a621c;
}

* {
  box-sizing: border-box;
}

/* Let the native picker respond across the full input, including browsers
   that expose its calendar control only as a small trailing icon by default. */
input[type="date"],
input[type="time"],
input[type="datetime-local"] {
  position: relative;
  cursor: pointer;
  color-scheme: light;
}

input[type="date"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator,
input[type="datetime-local"]::-webkit-calendar-picker-indicator {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

/* Safari can visually substitute the current date/time for an empty native
   field.  The class is added only when input.value is empty, so this changes
   neither defaults nor submitted data. */
input.native-date-time-empty,
input.native-date-time-empty::-webkit-datetime-edit,
input.native-date-time-empty::-webkit-datetime-edit-fields-wrapper,
input.native-date-time-empty::-webkit-datetime-edit-text,
input.native-date-time-empty::-webkit-datetime-edit-month-field,
input.native-date-time-empty::-webkit-datetime-edit-day-field,
input.native-date-time-empty::-webkit-datetime-edit-year-field,
input.native-date-time-empty::-webkit-datetime-edit-hour-field,
input.native-date-time-empty::-webkit-datetime-edit-minute-field,
input.native-date-time-empty::-webkit-datetime-edit-ampm-field {
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
}

/* On Safari, an empty native time control must reveal its editable segments
   on focus; otherwise the cursor and typed time remain visually invisible. */
input[type="time"].native-date-time-empty:focus,
input[type="datetime-local"].native-date-time-empty:focus,
input[type="time"].native-date-time-empty:focus::-webkit-datetime-edit,
input[type="datetime-local"].native-date-time-empty:focus::-webkit-datetime-edit,
input[type="time"].native-date-time-empty:focus::-webkit-datetime-edit-fields-wrapper,
input[type="datetime-local"].native-date-time-empty:focus::-webkit-datetime-edit-fields-wrapper,
input[type="time"].native-date-time-empty:focus::-webkit-datetime-edit-text,
input[type="datetime-local"].native-date-time-empty:focus::-webkit-datetime-edit-text,
input[type="time"].native-date-time-empty:focus::-webkit-datetime-edit-hour-field,
input[type="datetime-local"].native-date-time-empty:focus::-webkit-datetime-edit-hour-field,
input[type="time"].native-date-time-empty:focus::-webkit-datetime-edit-minute-field,
input[type="datetime-local"].native-date-time-empty:focus::-webkit-datetime-edit-minute-field {
  color: var(--ink) !important;
  -webkit-text-fill-color: var(--ink) !important;
}

/* Same compact HH:mm editor used by the ship-schedule edit modal. */
.shared-time-input-control {
  position: relative;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
  display: inline-grid;
  grid-template-columns: minmax(0, 84px);
  gap: 4px;
  vertical-align: top;
}

.shared-date-time-input-control {
  grid-template-columns: minmax(0, 1fr) minmax(0, 84px);
  width: min(100%, 286px);
  column-gap: 8px;
}

.shared-time-input-date {
  min-width: 0;
  width: 100%;
}

.shared-time-input-segments {
  width: 84px;
  max-width: 100%;
  box-sizing: border-box;
  height: var(--shared-time-height, 44px);
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 29px) 8px minmax(0, 29px);
  justify-content: center;
  align-items: center;
  gap: 0;
  padding: 0 4px;
  border: 1px solid #b8ccdc;
  border-radius: 10px;
  background: linear-gradient(180deg, #fff 0%, #fbfdff 56%, #f0f5f9 100%);
  box-shadow: inset 0 1px 1px rgba(30, 59, 82, .045), 0 2px 0 rgba(164, 185, 200, .42), 0 6px 12px rgba(42, 76, 102, .055);
}

.shared-time-input-control:focus-within .shared-time-input-segments {
  border-color: #397dad;
  background: #fff;
  box-shadow: 0 0 0 3px rgba(57, 125, 173, .13), 0 3px 0 rgba(57, 105, 139, .25), 0 9px 18px rgba(42, 89, 123, .1);
  transform: translateY(-1px);
}

.shared-time-input-control.invalid .shared-time-input-segments,
.shared-time-input-control.invalid:focus-within .shared-time-input-segments {
  border-color: #cc5148;
  background: linear-gradient(180deg, #fff 0%, #fff5f3 100%);
  box-shadow: 0 0 0 3px rgba(204, 81, 72, .13), 0 3px 0 rgba(174, 62, 53, .22), 0 9px 18px rgba(151, 52, 46, .09);
}

.shared-time-input-control .shared-time-input-segments > input.shared-time-input-segment {
  width: 100%;
  min-width: 0;
  height: 100%;
  box-sizing: border-box;
  font-variant-numeric: tabular-nums;
  -webkit-appearance: none;
  appearance: none;
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  background: transparent;
  box-shadow: none;
  color: var(--ink);
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0;
  text-align: center;
}

.shared-time-input-segments .shared-time-input-segment::placeholder {
  color: #9cacb8;
  font-weight: 700;
}

.shared-time-input-segments i {
  color: #4e718b;
  font-size: 15px;
  font-style: normal;
  font-weight: 900;
  text-align: center;
}

.shared-time-input-source {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  margin: -1px !important;
  padding: 0 !important;
  opacity: 0 !important;
  pointer-events: none !important;
  clip-path: inset(50%) !important;
}

.shared-time-input-error {
  grid-column: 1 / -1;
  color: #ba413a;
  font-size: 12px;
  line-height: 1.35;
}

.native-date-picker-fallback {
  position: fixed;
  z-index: 24000;
  width: 280px;
  padding: 12px;
  border: 1px solid #a9c4d8;
  border-radius: 8px;
  background: #ffffff;
  box-shadow: 0 14px 30px rgba(35, 79, 111, 0.22), 0 2px 7px rgba(35, 79, 111, 0.14);
  color: #21445f;
}

.native-date-picker-fallback.hidden { display: none; }

.native-date-picker-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 9px;
}

.native-date-picker-header strong {
  color: #214d70;
  font-size: 14px;
  font-weight: 850;
}

.native-date-picker-header button {
  display: grid;
  width: 30px;
  height: 28px;
  place-items: center;
  border: 1px solid #b8cddd;
  border-radius: 6px;
  background: #f7fbfe;
  color: #276187;
  font-size: 20px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
}

.native-date-picker-header button:hover {
  border-color: #6d9fc1;
  background: #eaf4fb;
}

.native-date-picker-weekdays,
.native-date-picker-days {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 4px;
}

.native-date-picker-weekdays { margin-bottom: 5px; }

.native-date-picker-weekdays span {
  color: #71879a;
  font-size: 11px;
  font-weight: 750;
  text-align: center;
}

.native-date-picker-empty,
.native-date-picker-day { height: 30px; }

.native-date-picker-day {
  border: 1px solid transparent;
  border-radius: 6px;
  background: #f5f9fc;
  color: #25445d;
  font-size: 12px;
  font-weight: 750;
  cursor: pointer;
}

.native-date-picker-day:hover {
  border-color: #80b0cf;
  background: #e8f4fb;
}

.native-date-picker-day.today {
  border-color: #6ca8cd;
  color: #1b6e9f;
}

.native-date-picker-day.selected {
  border-color: #176da3;
  background: #2d79ad;
  color: #ffffff;
}

.native-date-picker-day:disabled,
.native-date-picker-day.disabled {
  background: #f3f5f7;
  color: #b1bec8;
  cursor: not-allowed;
}

body {
  margin: 0;
  min-width: 1280px;
  background: var(--paper);
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "Hiragino Kaku Gothic ProN", "Yu Gothic", YuGothic, Meiryo, "Noto Sans JP", Arial, sans-serif;
  letter-spacing: 0;
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
  font-synthesis-weight: none;
}

body.order-detail-page {
  min-width: 0;
}

body.auth-loading .topbar,
body.auth-loading .page,
body.auth-loading .login-screen,
body.auth-login .topbar,
body.auth-login .page,
body.auth-ready .login-screen {
  display: none;
}

.login-screen {
  position: relative;
  min-height: 100vh;
  min-width: 1280px;
  display: grid;
  place-items: center;
  padding: 32px;
  background:
    linear-gradient(115deg, #dfeaf1 0%, #f9fbfd 48%, #e9f0f6 100%);
  background-size: auto;
  overflow: hidden;
}

.login-screen::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 58% 48%, rgba(255, 255, 255, .42), transparent 28%),
    linear-gradient(90deg, rgba(242, 246, 249, .08), rgba(245, 249, 252, .84) 56%, rgba(245, 249, 252, .94));
  pointer-events: none;
  z-index: 0;
}

.login-screen::after {
  content: "CHAMSHINE CLIENT PORTAL";
  position: absolute;
  left: 34px;
  bottom: 26px;
  color: rgba(72, 95, 120, .26);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .10em;
  pointer-events: none;
}

.sakura-scene {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.sakura-scene::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, .02), rgba(255, 255, 255, .52) 55%, rgba(255, 255, 255, .68)),
    url("images/login-sakura-real.png") left center / cover no-repeat;
  transform: scale(1.03);
  filter: saturate(.98) contrast(1.02);
}

.sakura-scene::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(0deg, rgba(29, 48, 68, .14), transparent 30%),
    radial-gradient(circle at 76% 42%, rgba(255, 255, 255, .76), transparent 24%);
}

.sakura-moon,
.sakura-tree {
  display: none;
}

.sakura-petals span {
  position: absolute;
  top: -36px;
  left: 50%;
  width: 14px;
  height: 9px;
  border-radius: 70% 30% 70% 30%;
  background: linear-gradient(135deg, rgba(255, 244, 248, .96), rgba(236, 154, 189, .82));
  box-shadow: 0 5px 14px rgba(197, 115, 150, .14);
  animation: sakura-fall 14s linear infinite;
}

.sakura-petals span:nth-child(1) { left: 8%; animation-duration: 17s; animation-delay: -2s; }
.sakura-petals span:nth-child(2) { left: 18%; width: 10px; height: 7px; animation-duration: 13s; animation-delay: -8s; }
.sakura-petals span:nth-child(3) { left: 29%; animation-duration: 18s; animation-delay: -5s; }
.sakura-petals span:nth-child(4) { left: 41%; width: 12px; height: 8px; animation-duration: 15s; animation-delay: -11s; }
.sakura-petals span:nth-child(5) { left: 52%; animation-duration: 19s; animation-delay: -4s; }
.sakura-petals span:nth-child(6) { left: 63%; width: 11px; height: 7px; animation-duration: 16s; animation-delay: -9s; }
.sakura-petals span:nth-child(7) { left: 71%; animation-duration: 14s; animation-delay: -6s; }
.sakura-petals span:nth-child(8) { left: 79%; width: 10px; height: 7px; animation-duration: 20s; animation-delay: -12s; }
.sakura-petals span:nth-child(9) { left: 87%; animation-duration: 16s; animation-delay: -3s; }
.sakura-petals span:nth-child(10) { left: 94%; width: 12px; height: 8px; animation-duration: 18s; animation-delay: -10s; }
.sakura-petals span:nth-child(11) { left: 36%; width: 9px; height: 6px; animation-duration: 12s; animation-delay: -7s; }
.sakura-petals span:nth-child(12) { left: 58%; width: 13px; height: 8px; animation-duration: 21s; animation-delay: -14s; }

@keyframes sakura-fall {
  0% {
    transform: translate3d(0, -40px, 0) rotate(0deg);
    opacity: 0;
  }
  8% {
    opacity: .9;
  }
  54% {
    transform: translate3d(86px, 54vh, 0) rotate(190deg);
  }
  100% {
    transform: translate3d(-74px, 106vh, 0) rotate(420deg);
    opacity: 0;
  }
}

.login-card {
  position: relative;
  z-index: 1;
}

.login-card {
  width: 420px;
  border: 1px solid rgba(133, 160, 184, .86);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .98), rgba(248, 251, 253, .94));
  padding: 34px 34px 30px;
  box-shadow:
    0 34px 82px rgba(28, 48, 70, .28),
    0 0 0 7px rgba(255, 255, 255, .48),
    inset 0 1px 0 rgba(255, 255, 255, 1);
  backdrop-filter: blur(8px);
}

.login-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 18px;
  right: 18px;
  height: 3px;
  border-radius: 0 0 999px 999px;
  background: linear-gradient(90deg, transparent, #2f65a0 22%, #dbb6c4 52%, #2f65a0 78%, transparent);
  opacity: .9;
}

.login-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--blue-dark);
}

.login-brand::before {
  content: "CMS";
  width: 44px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #8da8c2;
  border-bottom-color: #607e9b;
  border-radius: 8px;
  background:
    linear-gradient(145deg, #ffffff 0%, #e3edf5 48%, #b5c8d9 100%);
  color: #21486f;
  font-size: 13px;
  font-weight: 900;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .98),
    inset 0 -1px 0 rgba(63, 91, 120, .18),
    0 3px 0 #7089a1,
    0 12px 22px rgba(35, 61, 88, .18);
}

.login-brand strong {
  display: block;
  color: #183d62;
  font-size: 23px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: .055em;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .88);
}

.login-brand span {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  margin-top: 8px;
  border: 1px solid rgba(126, 152, 178, .62);
  border-bottom-color: rgba(93, 119, 145, .72);
  border-radius: 999px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .96) 0%, rgba(235, 243, 249, .90) 52%, rgba(216, 229, 239, .82) 100%);
  color: #31577c;
  padding: 0 10px;
  font-size: 11px;
  font-weight: 900;
  line-height: 1;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .95),
    inset 0 -1px 0 rgba(74, 105, 134, .12),
    0 1px 0 rgba(93, 119, 145, .42),
    0 4px 9px rgba(35, 61, 88, .10);
  text-shadow: 0 1px 0 rgba(255, 255, 255, .9);
}

.login-card h1 {
  position: relative;
  margin: 28px 0 24px;
  padding: 0 0 14px;
  color: #1d334b;
  font-size: 25px;
  font-weight: 900;
  line-height: 1.15;
}

.login-card h1::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 46px;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, #2f65a0, #d7a6bb);
  box-shadow: 0 1px 4px rgba(47, 101, 160, .24);
}

.login-card label,
.password-modal label {
  display: grid;
  gap: 8px;
  margin-bottom: 15px;
  color: #445a70;
  font-size: 12px;
  font-weight: 900;
}

.login-card label span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.login-card label span::before {
  content: "";
  width: 4px;
  height: 13px;
  border-radius: 999px;
  background: linear-gradient(180deg, #2f65a0, #9bb9d4);
  box-shadow: 0 1px 3px rgba(47, 101, 160, .18);
}

.login-card input,
.password-modal input {
  height: 41px;
  border: 1px solid #aebfd0;
  border-bottom-color: #91a7bb;
  border-radius: 6px;
  background: linear-gradient(180deg, #ffffff, #f8fbfd);
  padding: 0 12px;
  color: #17283b;
  font-size: 14px;
  outline: none;
  box-shadow:
    inset 0 1px 3px rgba(37, 59, 82, .08),
    0 1px 0 rgba(255, 255, 255, .9);
}

.login-card input:focus,
.password-modal input:focus {
  border-color: #2f65a7;
  box-shadow:
    0 0 0 3px rgba(47, 101, 167, .14),
    inset 0 1px 3px rgba(37, 59, 82, .08);
}

.login-card button,
.password-modal button.primary {
  width: 100%;
  height: 40px;
  border: 1px solid #245489;
  border-bottom-color: #163b63;
  border-radius: 5px;
  background: linear-gradient(#3c78b9, #245f9e);
  color: #fff;
  font-size: 14px;
  font-weight: 900;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .28),
    0 3px 0 #183d66,
    0 11px 20px rgba(30, 63, 98, .22);
  cursor: pointer;
  transition: transform .14s ease, box-shadow .14s ease, background .14s ease;
}

.login-card button:hover,
.password-modal button.primary:hover {
  background: linear-gradient(#4a86c6, #2a69ab);
  transform: translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .32),
    0 4px 0 #183d66,
    0 15px 25px rgba(30, 63, 98, .27);
}

.login-card button:disabled,
.password-modal button:disabled {
  opacity: .62;
  cursor: default;
  transform: none;
}

.login-message,
.password-message {
  min-height: 18px;
  margin: 14px 0 0;
  color: #9b3d3d;
  font-size: 12px;
  font-weight: 800;
}

.password-modal-backdrop {
  position: fixed;
  z-index: 150;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(16, 29, 45, .46);
  backdrop-filter: blur(3px);
}

.password-modal {
  width: min(460px, 100%);
  border: 1px solid #8faac2;
  border-radius: 8px;
  background: #f8fbff;
  padding: 24px 26px 22px;
  box-shadow:
    0 30px 76px rgba(14, 29, 46, .36),
    0 0 0 6px rgba(255, 255, 255, .50),
    inset 0 1px 0 rgba(255, 255, 255, .96);
}

.password-modal header {
  margin-bottom: 18px;
}

.password-modal header span {
  color: #2f65a7;
  font-size: 11px;
  font-weight: 900;
}

.password-modal h2 {
  margin: 4px 0 0;
  color: #1e3854;
  font-size: 21px;
}

.password-modal footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 18px;
}

.password-modal button {
  min-width: 112px;
  height: 38px;
}

.password-modal button.ghost {
  border: 1px solid #b8c8d7;
  border-radius: 5px;
  background: linear-gradient(#fff, #edf3f8);
  color: #52677c;
  font-weight: 900;
}

.password-modal button.primary {
  width: auto;
  padding: 0 24px;
}

button,
input,
select,
textarea {
  font: inherit;
}

button {
  cursor: pointer;
}

/* Low-specificity safety net for legacy text actions without a component class. */
:where(button:not([class])) {
  min-height: 32px;
  padding: 0 12px;
  border: 1px solid #a9c0d3;
  border-bottom-color: #7f9db6;
  border-radius: 5px;
  background: linear-gradient(#ffffff 0%, #f1f6fa 55%, #dbe9f3 100%);
  color: #294f6d;
  font-weight: 850;
  line-height: 1;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .96), 0 2px 0 #aac0d1, 0 6px 12px rgba(41, 79, 109, .1);
  transition: transform .16s ease, box-shadow .16s ease, filter .16s ease;
}

:where(button:not([class]):not(:disabled):hover) {
  filter: brightness(1.03);
  transform: translateY(-1px);
}

:where(button:not([class]):disabled) {
  cursor: not-allowed;
  filter: grayscale(.25);
  opacity: .56;
}

.topbar {
  background: #ffffff;
  border-bottom: 1px solid var(--line);
}

.topbar-inner {
  height: 58px;
  max-width: 1500px;
  margin: 0 auto;
  padding: 0 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.brand {
  display: flex;
  align-items: baseline;
  gap: 12px;
}

.brand strong {
  color: var(--blue-dark);
  font-size: 22px;
  letter-spacing: .04em;
}

.brand span {
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}

.detail-close-button {
  min-width: 96px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #9eb2c4;
  border-top-color: #cad8e4;
  border-bottom-color: #6f8aa2;
  border-radius: 999px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .96) 0%, rgba(255, 255, 255, .28) 42%, rgba(0, 0, 0, .045) 100%),
    linear-gradient(180deg, #f8fbfd, #dfe9f2);
  color: #274562;
  font-size: 14px;
  font-weight: 900;
  letter-spacing: .04em;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .82);
  box-shadow:
    0 8px 18px rgba(32, 56, 82, .14),
    inset 0 1px 0 rgba(255, 255, 255, .96),
    inset 0 -1px 0 rgba(78, 105, 130, .14);
  transition:
    transform .16s ease,
    border-color .16s ease,
    background .16s ease,
    color .16s ease,
    box-shadow .16s ease;
}

.detail-close-button:hover {
  transform: translateY(-1px);
  border-color: #6f94bd;
  border-bottom-color: #4d7297;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .98) 0%, rgba(255, 255, 255, .32) 42%, rgba(0, 0, 0, .035) 100%),
    linear-gradient(180deg, #ffffff, #d8e7f3);
  color: #1f3b58;
  box-shadow:
    0 12px 24px rgba(47, 95, 159, .20),
    inset 0 1px 0 rgba(255, 255, 255, .98),
    inset 0 -1px 0 rgba(78, 105, 130, .12);
}

.detail-close-button:active {
  transform: translateY(0);
  box-shadow:
    0 5px 12px rgba(32, 56, 82, .12),
    inset 0 2px 4px rgba(47, 68, 90, .14);
}

.account-menu {
  position: relative;
}

.account-menu-button {
  min-width: 168px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border: 1px solid #9eb2c4;
  border-top-color: #cad8e4;
  border-bottom-color: #6f8aa2;
  border-radius: 6px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.95) 0%, rgba(255,255,255,.18) 38%, rgba(0,0,0,.035) 100%),
    linear-gradient(180deg, #ffffff 0%, #f0f6fa 48%, #dce8f1 100%);
  color: var(--blue-dark);
  padding: 0 13px;
  font-weight: 900;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .8);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .98),
    inset 0 -1px 0 rgba(70, 96, 120, .16),
    0 3px 0 #9eb3c6,
    0 10px 18px rgba(37, 61, 84, .15);
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease, filter .16s ease;
}

.account-menu-button:hover {
  border-color: #819cb5;
  border-top-color: #c3d3e0;
  background:
    linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(255,255,255,.2) 38%, rgba(0,0,0,.025) 100%),
    linear-gradient(180deg, #ffffff 0%, #f5f9fc 46%, #e2edf5 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 1),
    inset 0 -1px 0 rgba(70, 96, 120, .14),
    0 4px 0 #8ea8bf,
    0 14px 24px rgba(37, 61, 84, .18);
  transform: translateY(-2px);
}

.account-menu-button:active {
  box-shadow:
    inset 0 2px 5px rgba(57, 82, 106, .14),
    inset 0 1px 0 rgba(255, 255, 255, .74),
    0 1px 0 #8ea8bf,
    0 5px 10px rgba(37, 61, 84, .12);
  transform: translateY(1px);
}

.account-menu-button b {
  color: #6b7f93;
  font-size: 12px;
}

.account-menu-panel {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  z-index: 90;
  width: 206px;
  border: 1px solid #9fb4c7;
  border-radius: 8px;
  background: linear-gradient(180deg, #ffffff 0%, #f7fafc 100%);
  padding: 7px;
  box-shadow: 0 20px 48px rgba(22, 44, 68, .22), 0 5px 12px rgba(22, 44, 68, .11);
}

.account-menu-panel.hidden {
  display: none;
}

.account-menu-panel > button {
  width: 100%;
  height: 42px;
  position: relative;
  border: 1px solid #b8c9d9;
  border-top-color: #d8e4ee;
  border-bottom-color: #7893aa;
  border-radius: 7px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.98) 0%, rgba(255,255,255,.20) 38%, rgba(0,0,0,.04) 100%),
    linear-gradient(180deg, #ffffff 0%, #f3f8fb 45%, #dce9f2 100%);
  color: #243a52;
  text-align: left;
  padding: 0 32px 0 16px;
  font-size: 13px;
  font-weight: 900;
  text-shadow: 0 1px 0 rgba(255,255,255,.8);
  box-shadow:
    inset 3px 0 0 #7fa1c0,
    inset 0 1px 0 rgba(255,255,255,1),
    inset 0 -1px 0 rgba(65, 91, 116, .14),
    0 4px 0 #8fa8bf,
    0 11px 18px rgba(37, 61, 84, .16);
  transition: transform .14s ease, background .14s ease, border-color .14s ease, box-shadow .14s ease;
}

.account-menu-panel > button::after {
  content: "›";
  position: absolute;
  right: 13px;
  top: 50%;
  transform: translateY(-52%);
  color: #60778d;
  font-size: 18px;
  font-weight: 900;
  text-shadow: 0 1px 0 rgba(255,255,255,.82);
}

.account-menu-panel > button + button {
  margin-top: 8px;
}

.account-menu-panel > button:hover {
  border-color: #8ea7bd;
  border-top-color: #d0dee9;
  border-bottom-color: #667f96;
  background:
    linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(255,255,255,.22) 38%, rgba(0,0,0,.025) 100%),
    linear-gradient(180deg, #ffffff 0%, #f7fbfd 44%, #e5f0f7 100%);
  color: var(--blue-dark);
  box-shadow:
    inset 3px 0 0 #2f6db0,
    inset 0 1px 0 rgba(255,255,255,1),
    inset 0 -1px 0 rgba(65, 91, 116, .12),
    0 5px 0 #7894ad,
    0 15px 24px rgba(37, 61, 84, .20);
  transform: translateY(-3px);
}

.account-menu-panel > button:active {
  box-shadow:
    inset 3px 0 0 #2f6db0,
    inset 0 3px 7px rgba(57, 82, 106, .18),
    inset 0 1px 0 rgba(255,255,255,.64),
    0 1px 0 #7894ad,
    0 5px 9px rgba(37, 61, 84, .12);
  transform: translateY(1px);
}

.account-menu-panel > button.logout {
  color: #8b3f37;
  border-color: #d8bfbc;
  border-top-color: #ead8d5;
  border-bottom-color: #ad746d;
  background:
    linear-gradient(180deg, rgba(255,255,255,.98) 0%, rgba(255,255,255,.20) 38%, rgba(0,0,0,.035) 100%),
    linear-gradient(180deg, #ffffff 0%, #fff7f6 45%, #f2dedb 100%);
  box-shadow:
    inset 3px 0 0 #c9857d,
    inset 0 1px 0 rgba(255,255,255,1),
    inset 0 -1px 0 rgba(120, 58, 52, .12),
    0 4px 0 #c99a94,
    0 11px 18px rgba(107, 49, 43, .13);
}

.account-menu-panel > button.logout::after {
  color: #9c5a53;
}

.account-menu-panel > button.logout:hover {
  border-color: #c99089;
  border-top-color: #e7c9c6;
  border-bottom-color: #9e625b;
  background:
    linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(255,255,255,.22) 38%, rgba(0,0,0,.02) 100%),
    linear-gradient(180deg, #ffffff 0%, #fff9f8 44%, #f7e4e1 100%);
  color: #7c2f28;
  box-shadow:
    inset 3px 0 0 #b9665c,
    inset 0 1px 0 rgba(255,255,255,1),
    inset 0 -1px 0 rgba(120, 58, 52, .10),
    0 5px 0 #b9817a,
    0 15px 24px rgba(107, 49, 43, .17);
}

.account-menu-panel > button.logout:active {
  box-shadow:
    inset 3px 0 0 #b9665c,
    inset 0 3px 7px rgba(120, 58, 52, .17),
    inset 0 1px 0 rgba(255,255,255,.64),
    0 1px 0 #b9817a,
    0 5px 9px rgba(107, 49, 43, .10);
  transform: translateY(1px);
}

.page {
  max-width: 1500px;
  margin: 0 auto;
  padding: 18px 22px 28px;
}

.menu-row {
  min-height: 48px;
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}

.menu-btn {
  min-width: 156px;
  height: 40px;
  border: 1px solid #8aa3bc;
  border-bottom-color: #627d98;
  border-radius: 6px;
  background: linear-gradient(180deg, #f8fbfd 0%, #dce7f0 48%, #bacbd9 100%);
  color: #233f5e;
  padding: 0 18px;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .96),
    inset 0 -1px 0 rgba(82, 112, 142, .22),
    0 3px 0 #6e879f,
    0 9px 18px rgba(29, 53, 77, .18);
  cursor: pointer;
  transform: translateY(0);
  transition:
    transform .14s ease,
    box-shadow .14s ease,
    border-color .14s ease,
    background .14s ease,
    color .14s ease;
}

.menu-btn:not(.export-menu-btn):hover {
  border-color: #6688aa;
  border-bottom-color: #4e6f90;
  background: linear-gradient(180deg, #ffffff 0%, #e4edf5 46%, #a9c0d2 100%);
  color: #173657;
  transform: translateY(-2px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 1),
    inset 0 -1px 0 rgba(82, 112, 142, .25),
    0 5px 0 #5d7892,
    0 14px 24px rgba(29, 53, 77, .24);
}

.menu-btn:not(.export-menu-btn):active {
  transform: translateY(1px);
  box-shadow:
    inset 0 2px 5px rgba(31, 59, 88, .20),
    0 1px 0 #5d7892,
    0 6px 13px rgba(29, 53, 77, .20);
}

.menu-btn.active:not(.export-menu-btn) {
  border-color: #6f8eaa;
  border-bottom-color: #536f89;
  background: linear-gradient(180deg, #eef5fa 0%, #cad9e5 50%, #9fb6ca 100%);
  color: #183b5d;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .92),
    inset 0 -1px 0 rgba(57, 84, 112, .25),
    0 3px 0 #5f7891,
    0 9px 18px rgba(29, 53, 77, .20);
}

.menu-btn.active-soft:not(.export-menu-btn) {
  border-color: var(--blue);
  background: linear-gradient(180deg, #f8fbfd 0%, #dce7f0 48%, #bacbd9 100%);
  color: var(--blue-dark);
}

.menu-btn.right {
  margin-left: auto;
  min-width: 178px;
}

.menu-btn.export-menu-btn {
  align-self: flex-start;
  min-width: 128px;
  height: 34px;
  border-color: #245b93;
  border-bottom-color: #173f6a;
  background: linear-gradient(180deg, #4f83bd 0%, #3472ad 48%, #265f99 100%);
  color: #ffffff;
  font-size: 13px;
  font-weight: 800;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28), 0 3px 0 #1e4f85, 0 11px 20px rgba(37, 87, 143, .22);
  transition: transform .16s ease, box-shadow .16s ease, filter .16s ease, background .16s ease, border-color .16s ease;
}

.menu-btn.export-menu-btn:hover {
  border-color: #1f5185;
  border-bottom-color: #15375d;
  background: linear-gradient(180deg, #5b8fc7 0%, #3f7db8 48%, #2c67a0 100%);
  color: #ffffff;
  filter: none;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .32), 0 4px 0 #1d4b7b, 0 14px 24px rgba(37, 87, 143, .26);
  transform: translateY(-2px);
}

.menu-btn.export-menu-btn:active {
  box-shadow: inset 0 2px 6px rgba(12, 47, 84, .25), 0 1px 0 #1e4f85, 0 5px 10px rgba(37, 87, 143, .18);
  transform: translateY(1px);
}

.client-row {
  display: flex;
  align-items: end;
  justify-content: space-between;
  margin-bottom: 12px;
}

.client-row label {
  display: grid;
  gap: 5px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.client-row select {
  width: 320px;
  height: 36px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: #fff;
  padding: 0 10px;
}

.health {
  min-height: 30px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  color: var(--muted);
  padding: 0 12px;
  font-size: 13px;
}

.workarea {
  position: relative;
  --detail-width: min(980px, calc(100vw - 44px));
}

.workarea.detail-open::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 18;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(238, 243, 247, .36), rgba(204, 216, 228, .58)),
    rgba(31, 45, 61, .08);
}

.list-pane,
.detail-pane {
  border: 1px solid var(--line);
  background: var(--panel);
}

.list-pane {
  min-height: calc(100vh - 156px);
  min-width: 0;
  width: 100%;
}

.detail-pane {
  display: none;
  position: fixed;
  z-index: 24;
  top: 86px;
  right: 22px;
  bottom: 22px;
  width: var(--detail-width);
  min-height: 0;
  height: auto;
  overflow: hidden auto;
  border: 1px solid #7f98b2;
  background: #f5f8fb;
  box-shadow:
    0 30px 72px rgba(18, 34, 52, .30),
    0 12px 24px rgba(31, 48, 68, .16),
    0 0 0 4px rgba(255, 255, 255, .72);
}

.workarea.detail-open .detail-pane {
  display: block;
}

.search-form {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  align-items: center;
  padding: 12px;
  border-bottom: 1px solid var(--line);
  background: #f8fbfd;
}

.search-form select,
.search-form input,
textarea {
  height: 34px;
  border: 1px solid var(--line);
  border-radius: 3px;
  background: #fff;
  padding: 0 9px;
  outline: 0;
}

.search-form select {
  width: 154px;
  flex: 0 0 auto;
  border-color: #b8c8d7;
  border-radius: 6px;
  background: linear-gradient(180deg, #ffffff 0%, #f7fafc 100%);
  color: #2d435a;
  padding: 0 10px;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .88),
    0 1px 2px rgba(38, 61, 84, .08);
  transition: border-color .14s ease, box-shadow .14s ease, background .14s ease;
}

.search-form select:hover {
  border-color: #98afc3;
  background: linear-gradient(180deg, #ffffff 0%, #f2f7fb 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .94),
    0 2px 5px rgba(38, 61, 84, .10);
}

.search-form select:focus {
  border-color: #6f9ac2;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .94),
    0 0 0 3px rgba(47, 109, 176, .10),
    0 2px 5px rgba(38, 61, 84, .10);
}

.search-form #searchInput {
  width: 300px;
  flex: 0 0 auto;
  border-color: #b8c8d7;
  border-radius: 6px;
  background: linear-gradient(180deg, #ffffff 0%, #fbfdfe 100%);
  color: #22394f;
  padding: 0 12px;
  font-size: 15px;
  font-weight: 500;
  box-shadow:
    inset 0 1px 2px rgba(34, 55, 76, .05),
    0 1px 2px rgba(38, 61, 84, .06);
  transition: border-color .14s ease, box-shadow .14s ease, background .14s ease;
}

.search-form #searchInput::placeholder {
  color: #8a9aac;
  font-weight: 500;
}

.search-form #searchInput:hover {
  border-color: #98afc3;
  background: linear-gradient(180deg, #ffffff 0%, #f6fafc 100%);
  box-shadow:
    inset 0 1px 2px rgba(34, 55, 76, .04),
    0 2px 5px rgba(38, 61, 84, .08);
}

.search-form #searchInput:focus {
  border-color: #6f9ac2;
  background: #ffffff;
  box-shadow:
    inset 0 1px 2px rgba(34, 55, 76, .04),
    0 0 0 3px rgba(47, 109, 176, .10),
    0 2px 5px rgba(38, 61, 84, .09);
}

.search-form button,
.save-btn {
  height: 34px;
  border: 1px solid var(--blue-dark);
  border-radius: 3px;
  background: var(--blue);
  color: #fff;
  font-weight: 800;
}

.search-form #reloadButton {
  min-width: 76px;
  height: 34px;
  box-sizing: border-box;
  border: 1px solid var(--blue-dark);
  border-radius: 999px;
  border-top-color: #5f95ca;
  border-bottom-color: #174d83;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .24) 0%, rgba(255, 255, 255, .08) 42%, rgba(0, 0, 0, .10) 100%),
    linear-gradient(180deg, #3f7fbd 0%, var(--blue) 54%, #2863a2 100%);
  color: #fff;
  padding: 0 14px;
  font-size: inherit;
  font-weight: 900;
  letter-spacing: normal;
  text-shadow: none;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .38),
    inset 0 -1px 0 rgba(14, 48, 83, .22),
    0 2px 0 #1a568f,
    0 6px 12px rgba(31, 61, 92, .18);
  transition: border-color .14s ease, background .14s ease, box-shadow .14s ease, transform .14s ease;
}

.search-form #reloadButton:hover {
  border: 1px solid var(--blue-dark);
  border-top-color: #73a6d5;
  border-bottom-color: #174d83;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .30) 0%, rgba(255, 255, 255, .10) 42%, rgba(0, 0, 0, .08) 100%),
    linear-gradient(180deg, #4a8bc7 0%, #3678ba 54%, #2b6aac 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .46),
    inset 0 -1px 0 rgba(14, 48, 83, .20),
    0 3px 0 #1a568f,
    0 9px 16px rgba(31, 61, 92, .22);
  transform: translateY(-1px);
}

.search-form #reloadButton:active {
  box-shadow:
    inset 0 2px 6px rgba(15, 45, 78, .30),
    inset 0 1px 0 rgba(255, 255, 255, .18),
    0 1px 0 #1a568f,
    0 4px 8px rgba(31, 61, 92, .14);
  transform: translateY(1px);
}

.switches {
  min-height: 42px;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 0 12px;
  border-bottom: 1px solid var(--line);
  color: #1f3044;
  font-size: 15px;
  font-weight: 700;
}

.switches label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.switches .list-field-toggle {
  position: relative;
  width: auto;
  height: auto;
  flex: 0 0 auto;
  border: 1.5px solid #b8cadd;
  border-radius: 999px;
  background: linear-gradient(180deg, #ffffff 0%, #f7fafc 100%);
  color: #53677c;
  padding: 4px 7px 4px 10px;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .94),
    0 1px 3px rgba(38, 61, 84, .10);
  transition: color .14s ease, border-color .14s ease, background .14s ease, box-shadow .14s ease, transform .14s ease;
}

.switches .list-field-toggle .ios-switch {
  pointer-events: none;
}

.switches .list-field-toggle input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.switches .list-field-toggle:nth-of-type(1) {
  width: auto;
}

.switches .list-field-toggle:nth-of-type(2) {
  width: auto;
}

.switches .list-field-toggle:nth-of-type(3) {
  width: auto;
}

.switches .list-field-toggle:nth-of-type(4) {
  width: auto;
}

.switches .list-field-toggle:nth-of-type(5) {
  width: auto;
}

.switches .list-field-toggle:nth-of-type(6) {
  width: auto;
}

.switches .list-field-toggle:nth-of-type(7) {
  width: auto;
}

.switches .list-field-toggle:nth-of-type(8) {
  width: auto;
}

.switches .list-field-toggle:hover {
  border-color: #97b3cb;
  background: linear-gradient(180deg, #ffffff 0%, #f2f7fb 100%);
  color: #2e4861;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .94),
    0 2px 6px rgba(38, 61, 84, .13);
  transform: translateY(-1px);
}

.switches .list-field-toggle:has(input:checked) {
  border-color: #7fa8cc;
  background: linear-gradient(180deg, #ffffff 0%, #eef6fb 100%);
  color: #2d435a;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .94),
    0 2px 6px rgba(47, 109, 176, .16);
}

.switches .list-field-toggle > span {
  position: static;
  display: inline;
  min-width: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: inherit;
  padding: 0;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0;
  box-shadow: none;
  transition: color .14s ease;
}

.switches .list-field-toggle:has(input:checked) > span {
  color: inherit;
  text-shadow: none;
  box-shadow: none;
}

.switches .list-field-toggle input:checked + .ios-switch {
  background: #2f6db0;
  box-shadow:
    inset 0 1px 3px rgba(20, 52, 86, .26),
    0 0 0 2px rgba(47, 109, 176, .14);
}

.switches .list-field-toggle input:checked + .ios-switch::after {
  transform: translateX(18px);
}

.order-count-tools {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  white-space: nowrap;
}

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

.ios-switch-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #53677c;
  font-size: 12px;
  font-weight: 700;
  user-select: none;
}

.ios-switch-label input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.ios-switch {
  position: relative;
  width: 42px;
  height: 24px;
  flex: 0 0 auto;
  border-radius: 999px;
  background: #c9d3df;
  box-shadow:
    inset 0 1px 3px rgba(26, 42, 58, .24),
    0 1px 0 rgba(255, 255, 255, .82);
  transition: background .18s ease, box-shadow .18s ease;
}

.ios-switch::after {
  content: "";
  position: absolute;
  left: 2px;
  top: 2px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
  box-shadow:
    0 2px 6px rgba(17, 34, 51, .28),
    0 0 0 1px rgba(76, 98, 120, .10);
  transition: transform .18s ease;
}

.ios-switch-label input:checked + .ios-switch {
  background: #2f6db0;
  box-shadow:
    inset 0 1px 3px rgba(20, 52, 86, .26),
    0 0 0 2px rgba(47, 109, 176, .14);
}

.ios-switch-label input:checked + .ios-switch::after {
  transform: translateX(18px);
}

.legacy-table-wrap {
  width: 100%;
  overflow: auto;
}

.order-pager {
  min-height: 46px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  padding: 8px 12px;
  border-top: 1px solid #c7d3df;
  background: #f6f9fc;
  color: #53677c;
  font-size: 12px;
  font-weight: 700;
}

.order-pager span {
  color: #354960;
}

.order-pager strong {
  min-width: 54px;
  text-align: center;
  color: var(--blue-dark);
  font-size: 12px;
}

.order-pager button {
  min-width: 58px;
  height: 28px;
  border: 1px solid #b9c8d7;
  border-radius: 4px;
  background: linear-gradient(#fff, #edf3f8);
  color: #2f5f93;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(35, 60, 86, .08);
}

.order-pager button:hover:not(:disabled) {
  border-color: #8fb0cd;
  background: #fff;
}

.order-pager button:disabled {
  cursor: default;
  opacity: .45;
}

.legacy-order-table {
  width: 100%;
  min-width: 1240px;
  border-collapse: collapse;
  table-layout: fixed;
}

.legacy-order-table.remark-mode {
  min-width: 1390px;
}

.legacy-order-table th {
  height: 36px;
  background: var(--blue);
  color: #fff;
  border-left: 1px solid rgba(255, 255, 255, .22);
  padding: 0 9px;
  text-align: left;
  font-size: 14px;
  font-weight: 900;
  transition: background .16s ease, box-shadow .16s ease;
}

.legacy-order-table th:hover {
  background: #3b72ad;
  box-shadow: inset 0 -3px 0 rgba(255, 255, 255, .26);
}

.legacy-order-table th:first-child {
  border-left: 0;
}

.legacy-order-table th:nth-child(2) {
  width: 166px;
}

.legacy-order-table th:nth-child(3) {
  width: 178px;
}

.legacy-order-table th:nth-child(4) {
  width: 138px;
}

.legacy-order-table th:nth-child(5),
.legacy-order-table th:nth-child(6) {
  width: 110px;
}

.legacy-order-table th:nth-child(7),
.legacy-order-table th:nth-child(8) {
  width: 98px;
}

.legacy-order-table th:nth-child(9) {
  width: 110px;
}

.legacy-order-table th:last-child {
  width: 132px;
}

.legacy-order-table.documents-mode th:last-child,
.legacy-order-table.documents-mode td:last-child {
  width: 104px;
}

.legacy-order-table.documents-mode .bill-doc-head,
.legacy-order-table.documents-mode .bill-doc-td {
  width: 104px;
}

.legacy-order-table.documents-mode .customs-doc-head,
.legacy-order-table.documents-mode .customs-doc-td {
  width: 104px;
}

.legacy-order-table.remark-mode th:last-child,
.legacy-order-table.remark-mode td:last-child {
  width: 260px;
}

.legacy-order-table th.port-col,
.legacy-order-table td.port-col {
  width: 122px;
}

.legacy-order-table th.cargo-type-col,
.legacy-order-table td.cargo-type-col {
  width: 150px;
}

.legacy-order-table td {
  position: relative;
  min-height: 58px;
  border-right: 1px solid var(--line-soft);
  border-bottom: 1px solid #cbd9e6;
  padding: 0;
  vertical-align: top;
  overflow: hidden;
  transition: border-color .16s ease;
}

.legacy-order-table td::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(90deg, rgba(225, 236, 246, .74), rgba(239, 246, 252, .64));
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .18s ease;
  pointer-events: none;
}

.legacy-order-table td > * {
  position: relative;
  z-index: 1;
}

.legacy-order-table tr {
  background: #fff;
  cursor: pointer;
  transition: background .16s ease, box-shadow .16s ease;
}

.legacy-order-table tr:nth-child(even) {
  background: #fbfdfe;
}

.legacy-order-table tr:hover {
  background: linear-gradient(90deg, rgba(207, 225, 240, .98), rgba(229, 240, 249, .94));
}

.legacy-order-table tr:not(.active):has(.bill-no-td:hover),
.legacy-order-table tr:not(.active):has(.cargo-track-td:hover),
.legacy-order-table tr:not(.active):has(.remark-td:hover) {
  background: #fff;
}

.legacy-order-table tr:nth-child(even):not(.active):has(.bill-no-td:hover),
.legacy-order-table tr:nth-child(even):not(.active):has(.cargo-track-td:hover),
.legacy-order-table tr:nth-child(even):not(.active):has(.remark-td:hover) {
  background: #fbfdfe;
}

.legacy-order-table .bill-no-td:hover::before,
.legacy-order-table .cargo-track-td:hover::before,
.legacy-order-table .remark-td:hover::before {
  transform: scaleX(1);
}

.legacy-order-table tr:hover td {
  border-right-color: transparent;
}

.legacy-order-table tr:has(.bill-no-td:hover) td,
.legacy-order-table tr:has(.cargo-track-td:hover) td,
.legacy-order-table tr:has(.remark-td:hover) td {
  border-right-color: var(--line-soft);
}

.legacy-order-table tr:hover .select-col,
.legacy-order-table tr:hover .bill-no-td,
.legacy-order-table tr:hover .cargo-track-td,
.legacy-order-table tr:hover .remark-td {
  border-right-color: var(--line-soft);
}

.legacy-order-table .bill-no-td:hover::before {
  background: linear-gradient(90deg, rgba(188, 218, 250, .98), rgba(211, 232, 252, .95));
}

.legacy-order-table .cargo-track-td:hover::before {
  background: linear-gradient(90deg, rgba(188, 218, 250, .98), rgba(211, 232, 252, .95));
}

.legacy-order-table .remark-td:hover::before {
  background: linear-gradient(90deg, rgba(255, 239, 196, .96), rgba(255, 249, 232, .9));
}

.legacy-order-table .bill-no-td:hover .bill-no-link {
  color: #0b4f96;
  text-decoration-thickness: 2px;
}

.legacy-order-table .cargo-track-td:hover .cargo-step-badge {
  border-color: #6ea8df;
  background: #d4e9ff;
  color: #0b4f96;
}

.legacy-order-table .cargo-track-td:hover .cargo-status-label {
  border-color: #86b5e3;
  background: #e3f1ff;
  color: #0b4f96;
}

.legacy-order-table .cargo-track-td:hover .cargo-track-link {
  border-color: #6ea8df;
  background: #d4e9ff;
  color: #0b4f96;
  box-shadow: 0 3px 8px rgba(11, 79, 150, .14);
}

.legacy-order-table tr.active {
  background: #fff1bf;
  box-shadow: inset 5px 0 0 #c88718;
}

.legacy-order-table tr.active td::before {
  background: #fff1bf;
  transform: scaleX(1);
}

.legacy-order-table tr.client-locked-row {
  background: #eef2f5;
}

.legacy-order-table tr.client-locked-row:nth-child(even) {
  background: #e9eef3;
}

.legacy-order-table tr.client-locked-row td::before {
  background: linear-gradient(90deg, rgba(219, 229, 238, .95), rgba(232, 238, 244, .82));
}

.legacy-order-table tr.client-locked-row .bill-no-td:hover::before {
  background: linear-gradient(90deg, rgba(210, 221, 234, .98), rgba(229, 236, 243, .88));
}

.legacy-order-table tr.client-locked-row .cargo-track-td:hover::before {
  background: linear-gradient(90deg, rgba(207, 226, 224, .95), rgba(226, 237, 236, .86));
}

.legacy-order-table tr.client-locked-row .bill-no-link {
  color: #697789;
  text-decoration-color: #aab5c2;
}

.legacy-order-table tr.client-locked-row .bill-no-link:hover {
  color: #4f5d6f;
}

.legacy-order-table tr.client-locked-row .factory-primary,
.legacy-order-table tr.client-locked-row .consignee-primary {
  color: #697789;
  font-weight: 700;
}

.legacy-order-table tr.client-locked-row .factory-more {
  border-color: #c4ced8;
  border-bottom-color: #aebac6;
  background: linear-gradient(180deg, #f7f9fb 0%, #e8edf2 52%, #d9e0e7 100%);
  color: #6d7b8d;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .9),
    0 1px 0 #b7c2cc,
    0 5px 10px rgba(65, 78, 92, .10);
}

.legacy-order-table tr.client-locked-row .legacy-marks {
  opacity: .62;
}

.locked-divider td {
  height: 34px;
  border-top: 2px solid #c9d5e0;
  border-bottom: 1px solid #c9d5e0;
  background: #dfe7ef;
  color: #506174;
  padding: 0 12px;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0;
}

.locked-divider span {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  border-radius: 999px;
  background: #f7fafc;
  border: 1px solid #c7d4df;
  padding: 0 10px;
}

.select-col {
  width: 48px;
  text-align: left;
  cursor: pointer;
}

.select-col input {
  margin: 10px 5px 0 8px;
  cursor: pointer;
}

.thdxxdiv {
  min-height: 58px;
  width: 100%;
  color: #1d2c3a;
  padding: 10px 9px;
  font-size: 13px;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.remark-td .thdxxdiv {
  padding: 7px 8px;
}

.timeline-text-td .thdxxdiv,
.documents-td .thdxxdiv,
.remark-td .thdxxdiv {
  font-family: "Hiragino Sans", "Yu Gothic", Meiryo, Arial, sans-serif;
  -webkit-font-smoothing: auto;
  text-rendering: auto;
  font-synthesis-weight: auto;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.55;
  color: #40566f;
}

.documents-head {
  padding: 0 6px !important;
  text-align: center !important;
}

.document-head-grid,
.document-download-cell {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: stretch;
  flex-wrap: nowrap;
  gap: 6px;
  width: 100%;
  min-width: 168px;
  max-width: 100%;
}

.document-head-grid > span,
.document-download-cell > span {
  flex: 1 1 0;
  min-width: 0;
}

.document-head-grid > span {
  display: flex;
  align-items: center;
  min-height: 36px;
  color: #fff;
  font-size: 13px;
  font-weight: 900;
  white-space: nowrap;
}

.document-download-cell {
  overflow: visible;
}

.document-download-cell.single {
  display: flex;
  justify-content: center;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  gap: 0;
}

.doc-cloud-btn {
  box-sizing: border-box;
  flex: 0 0 96px;
  width: 96px;
  min-width: 96px;
  max-width: 96px;
  height: 28px;
  min-height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  border: 1px solid #9fb5ca;
  border-bottom-color: #718aa3;
  border-radius: 999px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.82) 0%, rgba(255,255,255,.24) 42%, rgba(67, 99, 128, .10) 100%),
    linear-gradient(180deg, #ffffff 0%, #e6eff6 50%, #c9d8e4 100%);
  color: #20384f;
  padding: 0 6px;
  font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, Arial, sans-serif;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.25;
  text-decoration: none;
  white-space: nowrap;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .96),
    inset 0 -1px 0 rgba(72, 101, 128, .18),
    0 2px 0 rgba(103, 128, 151, .76),
    0 6px 12px rgba(34, 63, 91, .14);
  transition: transform .14s ease, background .14s ease, border-color .14s ease, box-shadow .14s ease, color .14s ease;
}

.doc-cloud-btn:hover {
  border-color: #829eb8;
  border-bottom-color: #5e7892;
  background:
    linear-gradient(180deg, rgba(255,255,255,.9) 0%, rgba(255,255,255,.28) 42%, rgba(67, 99, 128, .12) 100%),
    linear-gradient(180deg, #ffffff 0%, #edf5fb 48%, #bfd1df 100%);
  color: #123a5c;
  transform: translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .96),
    inset 0 -1px 0 rgba(72, 101, 128, .18),
    0 3px 0 rgba(93, 116, 138, .78),
    0 9px 16px rgba(34, 63, 91, .18);
}

.doc-cloud-btn.disabled {
  border-color: #c6d1dc;
  border-bottom-color: #a9b7c4;
  background:
    linear-gradient(180deg, rgba(255,255,255,.72) 0%, rgba(255,255,255,.22) 44%, rgba(82, 98, 112, .06) 100%),
    linear-gradient(180deg, #f9fbfd 0%, #eef3f7 52%, #dce4eb 100%);
  color: #7d8b9a;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.9),
    inset 0 -1px 0 rgba(95,111,126,.10),
    0 1px 0 rgba(161,174,186,.58),
    0 4px 9px rgba(65,78,92,.08);
  cursor: default;
}

.doc-cloud-btn.disabled:hover {
  transform: none;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.9),
    inset 0 -1px 0 rgba(95,111,126,.10),
    0 1px 0 rgba(161,174,186,.58),
    0 4px 9px rgba(65,78,92,.08);
}

.doc-cloud {
  font-size: 13px;
  line-height: 1;
  transform: translateY(-1px);
}

.doc-cloud-btn b {
  min-width: 16px;
  min-height: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: inherit;
  font-size: 11px;
  font-weight: 700;
}

.doc-bill-name {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0;
}

.doc-bill-name.doc-bill-copy {
  border-color: #8faac3;
  border-bottom-color: #62809d;
  background:
    linear-gradient(180deg, rgba(255,255,255,.86) 0%, rgba(255,255,255,.24) 42%, rgba(55, 87, 117, .12) 100%),
    linear-gradient(180deg, #ffffff 0%, #e6f0f7 50%, #bfd2e1 100%);
  color: #1d3f5e;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.96),
    inset 0 -1px 0 rgba(57,85,113,.18),
    0 2px 0 rgba(86,113,139,.78),
    0 6px 12px rgba(34,63,91,.14);
}

.doc-bill-name.doc-bill-surrender {
  border-color: #245b93;
  border-bottom-color: #173f6a;
  background:
    linear-gradient(180deg, rgba(255,255,255,.24) 0%, rgba(255,255,255,.08) 42%, rgba(8,43,80,.12) 100%),
    linear-gradient(180deg, #4f83bd 0%, #3472ad 50%, #265f99 100%);
  color: #ffffff;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.28),
    inset 0 -1px 0 rgba(9,45,82,.22),
    0 2px 0 #1e4f85,
    0 8px 15px rgba(37,87,143,.20);
}

.doc-bill-name.doc-bill-air {
  border-color: #78b9c7;
  border-bottom-color: #4d8c9c;
  background:
    linear-gradient(180deg, rgba(255,255,255,.78) 0%, rgba(255,255,255,.18) 42%, rgba(28, 111, 129, .12) 100%),
    linear-gradient(180deg, #f3fdff 0%, #ccecf3 50%, #9ed0dc 100%);
  color: #155269;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.92),
    inset 0 -1px 0 rgba(31,104,122,.16),
    0 2px 0 rgba(65,132,150,.76),
    0 6px 12px rgba(31,91,108,.14);
}

.doc-bill-name.doc-bill-copy:hover {
  border-color: #7899b8;
  border-bottom-color: #4f7190;
  background:
    linear-gradient(180deg, rgba(255,255,255,.92) 0%, rgba(255,255,255,.28) 42%, rgba(55, 87, 117, .15) 100%),
    linear-gradient(180deg, #ffffff 0%, #edf6fb 48%, #b8cede 100%);
  color: #163957;
}

.doc-bill-name.doc-bill-surrender:hover {
  border-color: #1f5185;
  border-bottom-color: #15375d;
  background:
    linear-gradient(180deg, rgba(255,255,255,.30) 0%, rgba(255,255,255,.10) 42%, rgba(8,43,80,.10) 100%),
    linear-gradient(180deg, #5b8fc7 0%, #3f7db8 48%, #2c67a0 100%);
  color: #ffffff;
}

.doc-bill-name.doc-bill-air:hover {
  border-color: #62a9b9;
  border-bottom-color: #3e7e8e;
  background:
    linear-gradient(180deg, rgba(255,255,255,.86) 0%, rgba(255,255,255,.22) 42%, rgba(28,111,129,.14) 100%),
    linear-gradient(180deg, #ffffff 0%, #d7f2f7 48%, #94cad7 100%);
  color: #0f4b61;
}

.doc-customs-empty {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0;
}

.doc-customs-progress {
  position: relative;
  overflow: hidden;
  justify-content: center;
  padding: 0 4px;
  gap: 4px;
  font-size: 13px;
  border-color: #8faac3;
  border-bottom-color: #62809d;
  background:
    linear-gradient(180deg, rgba(255,255,255,.86) 0%, rgba(255,255,255,.24) 42%, rgba(55, 87, 117, .12) 100%),
    linear-gradient(180deg, #ffffff 0%, #e6f0f7 50%, #bfd2e1 100%);
  color: #1d3f5e;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.96),
    inset 0 -1px 0 rgba(57,85,113,.18),
    0 2px 0 rgba(86,113,139,.78),
    0 6px 12px rgba(34,63,91,.14);
}

.doc-customs-progress > span {
  flex: 0 0 auto;
  min-width: 42px;
  text-align: center;
  color: #1d3f5e;
  font-size: 13px;
  font-weight: 650;
  letter-spacing: 0;
  line-height: 1;
  -webkit-font-smoothing: auto;
  text-rendering: auto;
}

.doc-customs-progress b {
  min-width: 32px;
  height: 18px;
  border: 1px solid #8faac3;
  border-radius: 999px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.86) 0%, rgba(255,255,255,.24) 100%),
    linear-gradient(180deg, #ffffff 0%, #e6f0f7 100%);
  color: #1d3f5e;
  font-family: Arial, sans-serif;
  font-size: 12px;
  font-weight: 700;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.92),
    0 1px 2px rgba(34,63,91,.10);
  text-shadow: none;
}

.doc-customs-progress.complete {
  border-color: #245b93;
  border-bottom-color: #173f6a;
  background:
    linear-gradient(180deg, rgba(255,255,255,.24) 0%, rgba(255,255,255,.08) 42%, rgba(8,43,80,.12) 100%),
    linear-gradient(180deg, #4f83bd 0%, #3472ad 50%, #265f99 100%);
  color: #ffffff;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.28),
    inset 0 -1px 0 rgba(9,45,82,.22),
    0 2px 0 #1e4f85,
    0 8px 15px rgba(37,87,143,.20);
}

.doc-customs-progress.complete > span {
  color: #ffffff;
  font-size: 13px;
  font-weight: 650;
  line-height: 1;
  text-shadow: none;
}

.doc-customs-progress.disabled > span {
  color: #7f8f9f;
}

.doc-customs-progress.complete:hover {
  border-color: #1f5185;
  border-bottom-color: #15375d;
  background:
    linear-gradient(180deg, rgba(255,255,255,.30) 0%, rgba(255,255,255,.10) 42%, rgba(8,43,80,.10) 100%),
    linear-gradient(180deg, #5b8fc7 0%, #3f7db8 48%, #2c67a0 100%);
  color: #ffffff;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.32),
    inset 0 -1px 0 rgba(9,45,82,.20),
    0 3px 0 #1d4b7b,
    0 10px 18px rgba(37,87,143,.24);
}

.doc-customs-progress.complete b {
  border-color: rgba(255,255,255,.42);
  background:
    linear-gradient(180deg, rgba(255,255,255,.22) 0%, rgba(255,255,255,.08) 100%),
    rgba(18,71,118,.28);
  color: #ffffff;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.24),
    0 1px 2px rgba(9,45,82,.16);
  text-shadow: none;
}

.doc-customs-progress.disabled b {
  border-color: #9eacb7;
  background:
    linear-gradient(180deg, rgba(255,255,255,.24), rgba(255,255,255,0)),
    linear-gradient(180deg, #c4ced7 0%, #95a3af 100%);
  color: #ffffff;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.22),
    inset 0 -1px 0 rgba(55,70,85,.16);
}

.doc-progress-badge.zero {
  border-color: #9eacb7;
  background:
    linear-gradient(180deg, rgba(255,255,255,.24), rgba(255,255,255,0)),
    linear-gradient(180deg, #c4ced7 0%, #95a3af 100%);
  color: #ffffff;
}

.doc-progress-badge.complete {
  border-color: rgba(255,255,255,.42);
  background:
    linear-gradient(180deg, rgba(255,255,255,.22) 0%, rgba(255,255,255,.08) 100%),
    rgba(18,71,118,.28);
  color: #ffffff;
}

.document-empty {
  color: #8a9aac;
}

.inline-remark-view {
  display: block;
  width: 100%;
  min-height: 48px;
  max-height: 58px;
  border: 0;
  border-left: 3px solid transparent;
  border-radius: 0 5px 5px 0;
  background: transparent;
  color: #25384d;
  padding: 1px 7px 3px 8px;
  text-align: left;
  font: inherit;
  cursor: text;
  white-space: normal;
  overflow: hidden;
  overflow-wrap: break-word;
  word-break: normal;
}

.memo-placeholder {
  color: #7a8b9e;
  font-weight: 700;
}

.remark-td:hover .inline-remark-view {
  border-left-color: #d6a43b;
  background: rgba(255, 249, 232, .62);
}

.inline-remark-editor {
  display: grid;
  gap: 6px;
}

.inline-remark-editor textarea {
  width: 100%;
  min-height: 58px;
  resize: vertical;
  border: 1px solid #c9d8e6;
  border-radius: 6px;
  background: #fff;
  color: #22364b;
  padding: 7px 8px;
  font: inherit;
  line-height: 1.45;
  outline: none;
  box-shadow: inset 0 1px 2px rgba(31, 54, 79, .08);
}

.inline-remark-editor textarea:focus {
  border-color: #d6a43b;
  box-shadow:
    0 0 0 3px rgba(214, 164, 59, .16),
    inset 0 1px 2px rgba(31, 54, 79, .08);
}

.inline-remark-editor span {
  display: flex;
  gap: 6px;
}

.inline-remark-editor button {
  min-width: 58px;
  height: 28px;
  border: 1px solid #245b93;
  border-radius: 5px;
  background: linear-gradient(180deg, #4f83bd 0%, #3472ad 48%, #265f99 100%);
  color: #ffffff;
  font-size: 12px;
  font-weight: 900;
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28), 0 2px 0 #1e4f85, 0 7px 13px rgba(37, 87, 143, .16);
}

.inline-remark-editor button:hover {
  transform: translateY(-1px);
  filter: brightness(1.03);
}

.inline-remark-editor button[data-remark-cancel] {
  border-color: #c6d1dd;
  background: linear-gradient(180deg, #fff 0%, #eef3f7 100%);
  color: #53677c;
}

.detail-remark-view {
  display: grid;
  gap: 6px;
  max-width: 760px;
}

.detail-remark-text {
  min-height: 52px;
  padding: 9px 10px;
  border: 1px solid #d6e0ea;
  border-radius: 5px;
  background: linear-gradient(180deg, #fbfdff 0%, #f4f8fb 100%);
  color: #334a62;
  font-size: 13px;
  line-height: 1.55;
  white-space: pre-wrap;
  word-break: break-word;
}

.detail-remark-view .save-btn {
  margin-top: 0;
  justify-self: start;
  min-width: 58px;
  height: 28px;
  border: 1px solid #245b93;
  border-radius: 5px;
  background: linear-gradient(180deg, #4f83bd 0%, #3472ad 48%, #265f99 100%);
  color: #ffffff;
  font-size: 12px;
  font-weight: 900;
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28), 0 2px 0 #1e4f85, 0 7px 13px rgba(37, 87, 143, .16);
}

.detail-remark-view .save-btn:hover {
  transform: translateY(-1px);
  filter: brightness(1.03);
}

.detail-remark-editor {
  max-width: 760px;
}

.search-hit {
  display: inline;
  border-radius: 3px;
  background: linear-gradient(180deg, rgba(255, 234, 160, .55), rgba(245, 190, 80, .42));
  color: inherit;
  padding: 0 2px;
  box-shadow: inset 0 -1px 0 rgba(174, 124, 28, .34);
}

.factory-cell,
.consignee-cell {
  padding-top: 8px;
  padding-bottom: 8px;
}

.factory-summary {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  align-content: flex-start;
  gap: 5px;
  min-width: 0;
}

.factory-primary,
.consignee-primary {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  max-width: 100%;
  min-width: 0;
  border: 1px solid #b7cadd;
  border-bottom-color: #98b1ca;
  border-radius: 4px;
  background: linear-gradient(#ffffff, #edf4fa);
  color: #24384e;
  padding: 2px 9px;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.25;
  overflow: visible;
  overflow-wrap: break-word;
  white-space: normal;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .95), 0 1px 2px rgba(35, 61, 88, .12);
}

.consignee-primary {
  white-space: normal;
}

.factory-more {
  min-height: 23px;
  display: inline-flex;
  align-items: center;
  flex: 0 0 100%;
  width: fit-content;
  max-width: fit-content;
  margin-top: 2px;
  border: 1px solid #91abc5;
  border-bottom-color: #66829f;
  border-radius: 999px;
  background:
    linear-gradient(180deg, #fbfdff 0%, #e2ebf3 50%, #c0d0df 100%);
  color: #24486c;
  padding: 0 9px 0 10px;
  font-size: 11px;
  font-weight: 900;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .96),
    inset 0 -1px 0 rgba(82, 112, 142, .18),
    0 2px 0 #7089a1,
    0 7px 13px rgba(29, 53, 77, .16);
  transform: translateY(0);
  transition:
    transform .14s ease,
    box-shadow .14s ease,
    border-color .14s ease,
    background .14s ease,
    color .14s ease;
}

.factory-more:hover {
  border-color: #6f90af;
  border-bottom-color: #557694;
  background:
    linear-gradient(180deg, #ffffff 0%, #e9f1f7 46%, #aec3d5 100%);
  color: #173b5e;
  transform: translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 1),
    inset 0 -1px 0 rgba(82, 112, 142, .22),
    0 3px 0 #617d96,
    0 11px 18px rgba(29, 53, 77, .22);
}

.factory-more:active {
  transform: translateY(1px);
  box-shadow:
    inset 0 2px 5px rgba(31, 59, 88, .18),
    0 1px 0 #617d96,
    0 5px 10px rgba(29, 53, 77, .18);
}

.factory-popover {
  position: absolute;
  z-index: 40;
  min-width: 270px;
  max-width: 340px;
  border: 1px solid #a9bdcf;
  border-bottom-color: #8da4bb;
  border-radius: 7px;
  background:
    linear-gradient(180deg, #f8fbfd 0%, #ffffff 34%, #ffffff 100%);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, .9) inset,
    0 14px 30px rgba(25, 48, 72, .22),
    0 2px 0 rgba(99, 125, 151, .22);
  padding: 10px;
}

.factory-popover::before {
  content: "";
  position: absolute;
  top: -7px;
  left: 22px;
  width: 12px;
  height: 12px;
  border-left: 1px solid #a9bdcf;
  border-top: 1px solid #a9bdcf;
  background: #f8fbfd;
  transform: rotate(45deg);
}

.factory-popover-title {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 7px;
  margin-bottom: 8px;
  padding: 2px 2px 8px 10px;
  border-bottom: 1px solid #d9e4ee;
}

.factory-popover-title::before {
  content: "";
  position: absolute;
  left: 0;
  top: 3px;
  bottom: 9px;
  width: 3px;
  border-radius: 999px;
  background: linear-gradient(180deg, #2f65a0, #8db0d1);
  box-shadow: 0 1px 2px rgba(47, 101, 160, .22);
}

.factory-popover-title strong {
  color: #253f5a;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0;
  line-height: 1;
}

.factory-popover-title span {
  min-height: 19px;
  display: inline-flex;
  align-items: center;
  border: 1px solid #b4c9dd;
  border-bottom-color: #9bb5cf;
  border-radius: 999px;
  background: linear-gradient(180deg, #ffffff, #eef5fa);
  color: #285d97;
  padding: 0 7px;
  font-size: 11px;
  font-weight: 900;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.95), 0 1px 2px rgba(35,61,88,.08);
}

.factory-popover-list {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 6px;
  max-height: 270px;
  overflow: auto;
}

.factory-popover-item {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  min-height: 34px;
  border: 1px solid #d4e0eb;
  border-radius: 6px;
  background: linear-gradient(180deg, #ffffff 0%, #f5f8fb 100%);
  padding: 5px 8px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.94), 0 1px 2px rgba(35,61,88,.06);
  transition: background .14s ease, border-color .14s ease, transform .14s ease, box-shadow .14s ease;
}

.factory-popover-item:hover {
  border-color: #b8cce0;
  background: linear-gradient(180deg, #ffffff 0%, #edf5fb 100%);
  transform: translateY(-1px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.96), 0 4px 10px rgba(35,61,88,.10);
}

.factory-popover-item i {
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #a9bfd4;
  border-bottom-color: #829bb4;
  border-radius: 6px;
  background: linear-gradient(180deg, #fbfdff 0%, #dfe9f2 52%, #c2d2df 100%);
  color: #2d5278;
  font-size: 10px;
  font-style: normal;
  font-weight: 900;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.95), 0 1px 0 #8fa5ba;
}

.factory-popover-item b {
  min-width: 0;
  overflow: hidden;
  color: #21384f;
  font-size: 13px;
  font-weight: 900;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.port-cell {
  font-size: 15px;
  font-weight: 700;
}

.port-chip,
.list-value-chip {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  max-width: 100%;
  padding: 2px 9px;
  border: 1px solid #c7d5e3;
  border-radius: 4px;
  background: linear-gradient(180deg, #ffffff 0%, #f3f7fb 100%);
  color: #20384f;
  font-weight: 700;
  line-height: 1.25;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), 0 1px 2px rgba(42, 71, 99, .06);
}

.list-value-cell {
  font-size: 15px;
  font-weight: 700;
}

.date-text {
  color: #223c55;
  white-space: nowrap;
}

.date-text.date-alert {
  color: #c45252;
  font-weight: 700;
}

.cargo-chip {
  color: #27384b;
  white-space: nowrap;
  max-width: none;
}

.cargo-type-cell {
  white-space: nowrap;
  overflow: visible;
}

.client-locked-row .port-chip,
.client-locked-row .list-value-chip {
  border-color: #d5dde5;
  background: linear-gradient(180deg, #f8fafc 0%, #eef2f5 100%);
  color: #748294;
}

.bill-no-cell {
  position: relative;
  color: #000;
  font-size: 15px;
  font-weight: 800;
}

.bill-no-td {
  cursor: pointer;
}

.bill-no-link {
  color: #174f91;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
  white-space: nowrap;
}

.bill-no-link:hover {
  color: #0f3767;
}

.locked-badge {
  display: inline-flex;
  align-items: center;
  min-height: 18px;
  margin-left: 6px;
  border: 1px solid #b6c3cf;
  border-radius: 999px;
  background: #fff;
  color: #5f6c79;
  padding: 0 7px;
  font-size: 11px;
  font-weight: 900;
  vertical-align: 1px;
  gap: 5px;
}

.lock-icon {
  position: relative;
  display: inline-block;
  width: 9px;
  height: 7px;
  border-radius: 2px;
  background: currentColor;
}

.lock-icon::before {
  position: absolute;
  left: 2px;
  top: -6px;
  width: 5px;
  height: 7px;
  border: 2px solid currentColor;
  border-bottom: 0;
  border-radius: 5px 5px 0 0;
  box-sizing: border-box;
  content: "";
}

.status-locked {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 7px;
  background: #edf1f5 !important;
  color: #526173 !important;
}

body.agent-portal #preOrderButton,
body.agent-portal #remarkModeLabel,
body.agent-portal .customer-task-quick-open,
body.agent-portal .customer-task-launcher,
body.agent-portal #pageCustomerTaskButton {
  display: none !important;
}

.legacy-marks {
  display: flex;
  gap: 4px;
  margin-top: 5px;
}

.legacy-marks img {
  display: block;
  width: 24px;
  height: 14px;
}

.event-step-client {
  min-width: 28px;
  height: 22px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  margin-right: 6px;
  border-radius: 11px;
  background: #e4edf7;
  color: var(--blue-dark);
  font-size: 12px;
  font-weight: 900;
}

.event-text {
  margin-left: 4px;
}

.cargo-track-cell {
  min-width: 0;
  cursor: pointer;
}

.cargo-track-top,
.cargo-track-bottom {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: nowrap;
  white-space: nowrap;
}

.cargo-step-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 22px;
  border: 1px solid #9db9d3;
  border-radius: 999px;
  background: #e3eef8;
  color: #245b95;
  padding: 0 5px;
  font-size: 11px;
  font-weight: 900;
  line-height: 20px;
}

.cargo-step-badge.complete {
  min-width: 32px;
  border-color: #a9cdbd;
  background: #e7f5ef;
  color: #2f6a58;
}

.cargo-status-label {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  flex: 0 0 auto;
  white-space: nowrap;
  border: 1px solid #b8cce0;
  border-radius: 999px;
  background: #eef6fc;
  color: #245b95;
  padding: 0 7px;
  color: #263c54;
  font-size: 12px;
  font-weight: 900;
  line-height: 20px;
}

.cargo-status-label.complete {
  border-color: #b8d2c8;
  background: #eef8f4;
  color: #2f6a58;
}

.cargo-track-cell {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  min-width: 82px;
}

.cargo-track-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-height: 25px;
  padding: 0 10px;
  border: 1px solid #b8cce0;
  border-radius: 999px;
  background: #f6f9fc;
  color: #315a82;
  font-size: 13px;
  font-weight: 800;
  line-height: 23px;
  white-space: nowrap;
  transition: background .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease;
}

.cargo-track-link b {
  font-size: 15px;
  line-height: 1;
  transform: translateY(-1px);
}

.track-update-badge {
  display: inline-flex;
  align-items: center;
  min-height: 17px;
  border: 1px solid #d99292;
  border-radius: 999px;
  background: #fff4f2;
  color: #bd3f3b;
  padding: 0 6px;
  font-size: 10px;
  font-weight: 900;
  line-height: 15px;
}

.timeline-item .track-update-badge {
  margin-right: 6px;
}

.date-alert {
  color: #e16f6f;
  font-weight: 900;
}

.order-locked .thdxxdiv,
.order-locked {
  color: #65717e;
  background: transparent;
}

.thdxxdiv font {
  color: #2b4fbc;
}

.order-locked font {
  color: #000 !important;
}

.empty {
  min-height: 360px;
  display: grid;
  place-content: center;
  text-align: center;
  color: var(--muted);
}

.empty strong {
  color: var(--ink);
  font-size: 20px;
}

.hidden {
  display: none !important;
}

.modal-layer {
  position: fixed;
  z-index: 80;
  inset: 0;
  background: rgba(31, 45, 61, .08);
}

.modal-backdrop {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(238, 243, 247, .22), rgba(203, 216, 229, .34)),
    rgba(20, 31, 43, .42);
  backdrop-filter: blur(1px);
}

.preorder-modal {
  position: absolute;
  inset: 24px 26px 22px;
  display: flex;
  flex-direction: column;
  min-width: 1180px;
  overflow: hidden;
  border: 1px solid #7896b1;
  border-radius: 6px;
  background: #edf3f8;
  box-shadow:
    0 34px 86px rgba(12, 28, 46, .4),
    0 14px 30px rgba(12, 28, 46, .2),
    0 0 0 4px rgba(255, 255, 255, .66);
}

.ship-schedule-modal {
  background: #edf3f8;
}

.ship-schedule-status:not([hidden]) {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 20px;
  color: #28435b;
  background: #f4f8fc;
  border-bottom: 1px solid #cbd9e6;
}

.ship-schedule-status .menu-btn {
  flex-shrink: 0;
}

.ship-schedule-modal .modal-head {
  min-height: 70px;
  border-bottom-color: #c3d2df;
  background: linear-gradient(180deg, #fbfdff 0%, #edf4f9 100%);
}

.ship-schedule-frame-shell {
  min-height: 0;
  flex: 1;
  border-top: 1px solid rgba(255, 255, 255, .88);
  background: #edf3f8;
  padding: 10px;
}

#shipScheduleFrame {
  width: 100%;
  height: 100%;
  display: block;
  border: 1px solid #c2d2df;
  border-radius: 4px;
  background: #f8fbfd;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .90);
}

.track-modal {
  position: absolute;
  top: 56px;
  left: 50%;
  width: min(760px, calc(100vw - 54px));
  max-height: calc(100vh - 96px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transform: translateX(-50%);
  border: 1px solid #6f8da9;
  border-radius: 6px;
  background: #f3f7fa;
  box-shadow:
    0 34px 84px rgba(12, 28, 46, .46),
    0 13px 28px rgba(12, 28, 46, .24),
    0 0 0 4px rgba(255, 255, 255, .68),
    0 0 0 1px rgba(255, 255, 255, .72) inset;
}

.client-export-modal {
  position: absolute;
  top: 72px;
  left: 50%;
  width: min(780px, calc(100vw - 64px));
  max-height: calc(100vh - 120px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transform: translateX(-50%);
  border: 1px solid #7896b1;
  border-radius: 6px;
  background: #f7fafc;
  box-shadow:
    0 30px 78px rgba(12, 28, 46, .38),
    0 12px 24px rgba(12, 28, 46, .2),
    0 0 0 4px rgba(255, 255, 255, .7);
}

.preorder-crm-modal {
  position: absolute;
  top: 74px;
  left: 50%;
  width: min(1080px, calc(100vw - 84px));
  max-height: calc(100vh - 128px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transform: translateX(-50%);
  border: 1px solid #6f8ca7;
  border-radius: 8px;
  background: linear-gradient(180deg, #f8fbfd 0%, #eef4f8 100%);
  box-shadow:
    0 34px 90px rgba(12, 28, 46, .42),
    0 14px 30px rgba(12, 28, 46, .22),
    0 0 0 4px rgba(255, 255, 255, .72);
}

.vessel-motion-modal {
  position: absolute;
  top: 64px;
  left: 50%;
  width: min(1120px, calc(100vw - 80px));
  height: min(680px, calc(100vh - 112px));
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid #6f8ca7;
  border-radius: 8px;
  background: #f3f7fa;
  box-shadow:
    0 34px 90px rgba(12, 28, 46, .42),
    0 14px 30px rgba(12, 28, 46, .22),
    0 0 0 4px rgba(255, 255, 255, .72);
}

.vessel-motion-body {
  flex: 1;
  min-height: 0;
  overflow: auto;
  background: #f4f8fb;
  padding: 14px 16px 16px;
}

.vessel-detail {
  display: grid;
  gap: 12px;
}

.vessel-detail-hero {
  display: grid;
  grid-template-columns: minmax(260px, .72fr) minmax(540px, 1.28fr);
  gap: 14px;
  align-items: stretch;
  border: 1px solid #b8cadb;
  border-radius: 8px;
  background: linear-gradient(135deg, #ffffff 0%, #eef6fb 100%);
  padding: 14px 16px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.95), 0 8px 18px rgba(33, 62, 91, .08);
}

.vessel-detail-title {
  display: grid;
  align-content: center;
  gap: 5px;
  min-width: 0;
}

.vessel-detail-title .vessel-detail-kicker {
  display: block;
  color: #2d6da7;
  font-size: 11px;
  font-weight: 900;
}

.vessel-detail-hero strong {
  display: block;
  margin-top: 5px;
  color: #15334f;
  font-size: 22px;
  line-height: 1.18;
}

.vessel-detail-hero em {
  display: block;
  margin-top: 5px;
  color: #536f86;
  font-size: 13px;
  font-style: normal;
  font-weight: 800;
}

.vessel-detail-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.vessel-detail-summary span {
  border: 1px solid #c9d8e5;
  border-radius: 7px;
  background: rgba(255,255,255,.78);
  color: #304b64;
  padding: 8px 10px;
  font-size: 12px;
  font-weight: 800;
}

.vessel-detail-motion {
  min-width: 0;
}

.vessel-motion-status {
  display: block;
  border: 1px solid rgba(169, 199, 222, .9);
  border-radius: 8px;
  background: linear-gradient(135deg, rgba(240, 248, 253, .98) 0%, rgba(255, 255, 255, .98) 100%);
  padding: 14px 16px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,1),
    0 10px 24px rgba(31, 65, 96, .09);
}

.vessel-motion-visual {
  position: relative;
  display: grid;
  grid-template-columns: minmax(172px, 1fr) minmax(150px, .8fr) minmax(190px, 1.08fr);
  gap: 12px;
  align-items: center;
  min-height: 108px;
  width: 100%;
}

.vessel-motion-port {
  position: relative;
  z-index: 4;
  display: inline-grid;
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  place-items: center;
  gap: 4px;
  min-height: 50px;
  border: 1px solid rgba(54, 134, 190, .30);
  border-radius: 8px;
  background: linear-gradient(135deg, rgba(255,255,255,.98) 0%, rgba(229,243,252,.96) 100%);
  color: #102d46;
  padding: 10px 14px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,1),
    0 10px 22px rgba(31, 91, 136, .12);
}

.vessel-motion-port strong {
  display: block;
  color: inherit;
  font-size: 20px;
  font-weight: 950;
  line-height: 1.12;
  white-space: nowrap;
}

.vessel-motion-port small {
  display: grid;
  justify-items: center;
  gap: 2px;
  width: 100%;
  min-width: 0;
  color: #5f778d;
  font-size: 11px;
  font-weight: 850;
  line-height: 1.2;
  white-space: normal;
}

.vessel-motion-port small b {
  color: #71899c;
  font-size: 9px;
  font-weight: 950;
}

.vessel-motion-port small time {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2px 5px;
  color: #4f6f87;
  font-size: 11px;
  font-style: normal;
  font-variant-numeric: tabular-nums;
  font-weight: 900;
  letter-spacing: 0;
}

.vessel-motion-port small time span {
  white-space: nowrap;
}

.vessel-motion-line {
  position: relative;
  z-index: 1;
  height: 10px;
  border-radius: 999px;
  background: repeating-linear-gradient(90deg, rgba(90, 150, 192, .62) 0 12px, rgba(90, 150, 192, .2) 12px 20px);
  overflow: hidden;
}

.vessel-motion-line i {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,.9) 45%, transparent 75%);
  animation: vessel-route-glint 2.2s linear infinite;
}

.vessel-motion-ship {
  position: absolute;
  top: 31px;
  left: 36%;
  z-index: 3;
  width: 68px;
  height: 29px;
  border-radius: 5px 22px 13px 18px;
  background:
    linear-gradient(138deg, transparent 0 11%, #0b5c8b 11.5% 100%),
    linear-gradient(180deg, #2b8fc7 0%, #0a5d91 58%, #073e65 100%);
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.55),
    inset 0 -4px 0 rgba(4, 47, 80, .38),
    0 9px 16px rgba(20, 83, 125, .2);
}

.vessel-motion-ship::before {
  content: "";
  position: absolute;
  left: 15px;
  top: -16px;
  width: 38px;
  height: 20px;
  border-radius: 3px 4px 2px 2px;
  background:
    linear-gradient(90deg, #eaf7ff 0 28%, #c7e8f6 28% 34%, #eaf7ff 34% 62%, #c7e8f6 62% 68%, #eaf7ff 68% 100%),
    linear-gradient(180deg, #f9fdff 0%, #cfe8f4 100%);
  box-shadow:
    -9px 10px 0 -4px #f06d4f,
    3px 10px 0 -4px #f8bb4c,
    15px 10px 0 -4px #4aa7ce,
    28px 16px 0 -10px #dff1fb;
}

.vessel-motion-ship::after {
  content: "";
  position: absolute;
  left: -8px;
  right: 8px;
  bottom: -7px;
  height: 4px;
  border-radius: 999px;
  background: repeating-linear-gradient(90deg, rgba(45, 127, 184, .32) 0 12px, rgba(45, 127, 184, .1) 12px 20px);
}

.vessel-motion-anchor {
  display: none;
}

.vessel-motion-label {
  position: absolute;
  left: 50%;
  top: 4px;
  z-index: 5;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 92px;
  border: 1px solid rgba(52, 134, 190, .28);
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(226,244,255,.95));
  color: #0b5c8b;
  font-size: 12px;
  font-weight: 950;
  line-height: 1;
  padding: 7px 13px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,1),
    0 8px 16px rgba(27, 93, 140, .13);
}

.vessel-motion-status.moving .vessel-motion-ship {
  animation: vessel-sail-across 7.2s cubic-bezier(.45, .05, .55, .95) infinite;
}

.vessel-motion-status.moving .vessel-motion-line {
  background-size: 40px 10px;
  animation: vessel-route-current 1.4s linear infinite;
}

.vessel-motion-status.moored .vessel-motion-line,
.vessel-motion-status.waiting .vessel-motion-line {
  opacity: .28;
}

.vessel-motion-status.moored .vessel-motion-ship {
  left: auto;
  right: 232px;
  animation: vessel-float 2.4s ease-in-out infinite;
}

.vessel-motion-status.waiting .vessel-motion-ship {
  left: auto;
  right: 242px;
  animation: vessel-float 2.8s ease-in-out infinite;
  opacity: .72;
}

.vessel-motion-status.waiting .vessel-motion-line {
  background: repeating-linear-gradient(90deg, rgba(137, 152, 164, .36) 0 10px, rgba(137, 152, 164, .12) 10px 18px);
}

.vessel-motion-status.waiting .vessel-motion-line i {
  animation-duration: 3.4s;
  opacity: .48;
}

.vessel-motion-status.waiting .vessel-motion-label {
  border-color: rgba(186, 145, 55, .34);
  background: linear-gradient(180deg, rgba(255,255,255,.97), rgba(255, 245, 216, .96));
  color: #8a6120;
}

.vessel-motion-status.moored .vessel-motion-label {
  border-color: rgba(54, 154, 131, .32);
  background: linear-gradient(180deg, rgba(255,255,255,.97), rgba(221, 247, 240, .96));
  color: #176f61;
}

@keyframes vessel-sail-across {
  0%, 8% { left: 28%; transform: translateY(0); }
  42% { left: 48%; transform: translateY(-5px); }
  84%, 100% { left: 66%; transform: translateY(0); }
}

@keyframes vessel-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}

@keyframes vessel-route-current {
  from { background-position: 0 0; }
  to { background-position: 40px 0; }
}

@keyframes vessel-route-glint {
  from { transform: translateX(-100%); }
  to { transform: translateX(100%); }
}

@media (prefers-reduced-motion: reduce) {
  .vessel-motion-line,
  .vessel-motion-line i,
  .vessel-motion-ship {
    animation: none !important;
  }
}

@media (max-width: 900px) {
  .vessel-motion-modal {
    top: 58px;
    width: min(760px, calc(100vw - 32px));
    height: min(720px, calc(100vh - 88px));
  }

  .vessel-motion-body {
    padding: 12px;
  }

  .vessel-detail-hero {
    grid-template-columns: 1fr;
    padding: 12px;
  }

  .vessel-detail-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .vessel-motion-visual {
    grid-template-columns: minmax(160px, 1fr) minmax(116px, .72fr) minmax(180px, 1.08fr);
    gap: 10px;
  }

  .vessel-motion-port {
    padding: 8px 10px;
  }

  .vessel-motion-port strong {
    max-width: 128px;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 17px;
  }

  .vessel-motion-port small {
    max-width: none;
  }

  .vessel-motion-status.moored .vessel-motion-ship,
  .vessel-motion-status.waiting .vessel-motion-ship {
    right: 154px;
  }
}

.detail-download-link.is-pending,
.detail-download-link.is-pending:hover,
.detail-download-link.is-pending:active {
  border-color: #aab6bf;
  background: linear-gradient(#f8fafb, #e8edf1);
  color: #667887;
  text-shadow: none;
  box-shadow: inset 0 1px 0 #fff, 0 1px 2px rgba(36, 58, 75, .10);
  cursor: default;
  pointer-events: none;
  transform: none;
}

.vessel-detail-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  border: 1px solid #c2d2e0;
  border-radius: 8px;
  background: linear-gradient(#fff, #eef5fa);
  padding: 8px;
}

.vessel-detail-tabs button {
  min-height: 34px;
  border: 1px solid #8faecc;
  border-bottom-color: #6486a6;
  border-radius: 6px;
  background: linear-gradient(180deg, #ffffff 0%, #edf5fb 48%, #d4e2ed 100%);
  color: #203f5c;
  padding: 0 14px;
  font-size: 12px;
  font-weight: 900;
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255,255,255,1), 0 3px 0 rgba(92, 126, 155, .68), 0 8px 14px rgba(29, 53, 77, .12);
}

.vessel-detail-tabs button.active,
.vessel-detail-tabs button:hover {
  border-color: #1d6c9f;
  border-bottom-color: #0d4f7e;
  background: linear-gradient(180deg, #3b9ed0 0%, #1977ad 48%, #0c5b91 100%);
  color: #fff;
  transform: translateY(-1px);
}

.vessel-detail-panel {
  display: none;
  min-height: 360px;
  overflow: auto;
  border: 1px solid #c7d5e2;
  border-radius: 8px;
  background: #fff;
  padding: 12px;
}

.vessel-detail-panel.active {
  display: block;
}

.vessel-coordinate-map {
  position: relative;
  min-height: 420px;
  overflow: hidden;
  isolation: isolate;
  border: 1px solid #a9c3d6;
  border-radius: 8px;
  background: #eaf4f8;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.95), 0 12px 28px rgba(32, 74, 104, .13);
}

.vessel-coordinate-grid {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-color: #eaf4f8;
  background-image:
    linear-gradient(rgba(69, 132, 173, .15) 1px, transparent 1px),
    linear-gradient(90deg, rgba(69, 132, 173, .15) 1px, transparent 1px);
  background-size: 40px 40px;
}

.vessel-coordinate-grid::before {
  content: "AIS COORDINATE GRID";
  position: absolute;
  top: 14px;
  right: 16px;
  color: rgba(40, 92, 128, .46);
  font-size: 10px;
  font-weight: 950;
  letter-spacing: 1px;
}

.vessel-coordinate-marker {
  position: absolute;
  z-index: 2;
  left: var(--vessel-map-x);
  top: var(--vessel-map-y);
  width: 22px;
  height: 22px;
  transform: translate(-50%, -50%);
}

.vessel-coordinate-marker::before {
  content: "";
  position: absolute;
  inset: -11px;
  border: 2px solid rgba(35, 126, 180, .52);
  border-radius: 50%;
  animation: vessel-coordinate-pulse 2.2s ease-out infinite;
}

.vessel-coordinate-marker i { position: absolute; inset: 2px; display: block; border: 3px solid #fff; border-radius: 50%; background: #197daf; box-shadow: 0 5px 12px rgba(20, 91, 135, .32); }
.vessel-coordinate-marker b { position: absolute; top: -26px; left: 50%; transform: translateX(-50%); border: 1px solid rgba(20, 102, 151, .55); border-radius: 4px; background: #fff; color: #125b88; padding: 3px 5px; font-size: 9px; font-weight: 950; line-height: 1; box-shadow: 0 4px 10px rgba(24, 80, 116, .16); }

.vessel-coordinate-info {
  position: absolute;
  z-index: 1;
  right: 16px;
  bottom: 16px;
  left: 16px;
  display: grid;
  gap: 5px;
  max-width: 440px;
  border: 1px solid #a9c3d6;
  border-left: 4px solid #2785ba;
  border-radius: 6px;
  background: rgba(255,255,255,.96);
  padding: 12px 14px;
  box-shadow: 0 10px 24px rgba(31, 73, 105, .15), inset 0 1px 0 #fff;
}

.vessel-coordinate-info > span { color: #2f79a5; font-size: 10px; font-weight: 950; letter-spacing: 1px; }
.vessel-coordinate-info strong { color: #153e5d; font-size: 19px; font-weight: 950; line-height: 1.2; }
.vessel-coordinate-info p { margin: 0; color: #3c6079; font-size: 12px; font-weight: 850; line-height: 1.5; }
.vessel-coordinate-info small { color: #678094; font-size: 11px; font-weight: 800; line-height: 1.4; }

.vessel-coordinate-link {
  position: absolute;
  z-index: 2;
  right: 16px;
  bottom: 16px;
  border: 1px solid #2f82b3;
  border-radius: 5px;
  background: #fff;
  color: #1b6f9f;
  padding: 8px 11px;
  font-size: 12px;
  font-weight: 900;
  text-decoration: none;
  box-shadow: inset 0 1px 0 #fff, 0 4px 10px rgba(22, 92, 137, .16);
  transition: transform .14s ease, border-color .14s ease, box-shadow .14s ease, background .14s ease;
}

.vessel-coordinate-link:hover { transform: translateY(-1px); border-color: #145f8e; background: #f8fcff; box-shadow: inset 0 1px 0 #fff, 0 7px 14px rgba(22, 92, 137, .22); }
.vessel-coordinate-map.unavailable .vessel-coordinate-info { border-left-color: #8a9aab; }

@keyframes vessel-coordinate-pulse {
  0% { transform: scale(.55); opacity: .88; }
  75%, 100% { transform: scale(1.35); opacity: 0; }
}

@media (max-width: 700px) {
  .vessel-coordinate-map { min-height: 350px; }
  .vessel-coordinate-info { right: 12px; bottom: 56px; left: 12px; }
  .vessel-coordinate-link { right: 12px; bottom: 12px; }
}

.vessel-map-stage { display: grid; gap: 12px; }
.vessel-fast-map { position: relative; overflow: hidden; border: 1px solid #a9c3d6; border-radius: 8px; background: #edf6fa; box-shadow: inset 0 1px 0 #fff, 0 12px 28px rgba(32,74,104,.13); }
.vessel-fast-map-head { display: grid; gap: 3px; min-height: 68px; border-bottom: 1px solid rgba(117,158,188,.52); background: rgba(255,255,255,.9); padding: 13px 16px; }
.vessel-fast-map-head span { color: #2d7ca8; font-size: 10px; font-weight: 950; letter-spacing: 1px; }
.vessel-fast-map-head strong { color: #143c5b; font-size: 20px; font-weight: 950; line-height: 1.15; }
.vessel-fast-map-head small { color: #668095; font-size: 12px; font-weight: 800; }
.vessel-fast-map-canvas { position: relative; min-height: 520px; overflow: hidden; background: #dbeaf1; }
.vessel-fast-map-canvas::after { content: "AIS 実航跡"; position: absolute; z-index: 460; top: 14px; right: 16px; color: #245d7d; font-size: 10px; font-weight: 950; letter-spacing: 1px; text-shadow: 0 1px 0 rgba(255,255,255,.8); pointer-events: none; }
.vessel-fast-map-layer { position: absolute; inset: 0; z-index: 1; background: #dbeaf1; }
.vessel-fast-map-loading { position: absolute; z-index: 470; top: 50%; left: 50%; transform: translate(-50%, -50%); border: 1px solid rgba(92,139,168,.7); border-radius: 4px; background: rgba(255,255,255,.92); color: #2a678e; padding: 6px 9px; font-size: 11px; font-weight: 900; box-shadow: 0 4px 12px rgba(25,75,109,.18); }
.vessel-fast-map-attribution { position: absolute; z-index: 460; right: 8px; bottom: 7px; border-radius: 3px; background: rgba(255,255,255,.86); color: #55758a; padding: 2px 5px; font-size: 9px; font-weight: 800; pointer-events: none; }
.vessel-fast-map-vessel { border: 0 !important; background: transparent !important; }
.vessel-fast-map-vessel span { display: grid; width: 34px; height: 34px; place-items: center; border: 3px solid #fff; border-radius: 50%; background: #086b9f; color: #fff; font-family: "Apple Color Emoji", "Segoe UI Emoji", sans-serif; font-size: 18px; line-height: 1; text-shadow: 0 1px 1px rgba(0,0,0,.28); box-shadow: 0 0 0 7px rgba(21,126,180,.19), 0 5px 12px rgba(17,73,107,.42); animation: vessel-fast-live-ship 2.1s ease-in-out infinite; }
.vessel-fast-map-vessel.stale span { background: #9b6e34; box-shadow: 0 0 0 7px rgba(155,110,52,.17), 0 5px 12px rgba(91,63,29,.34); animation: none; }
.vessel-route-map-port { border: 0 !important; background: transparent !important; }
.vessel-route-map-port span { display: grid; width: 25px; height: 25px; place-items: center; border: 3px solid #fff; border-radius: 50%; background: #1877b7; color: #fff; font-size: 10px; font-weight: 950; box-shadow: 0 3px 8px rgba(18,86,129,.35); }
.vessel-route-map-port.current span { width: 29px; height: 29px; background: #2f8a69; box-shadow: 0 0 0 5px rgba(47,138,105,.18), 0 4px 10px rgba(28,91,66,.34); }
.vessel-route-map-port.planned span { background: #de6e91; font-size: 11px; box-shadow: 0 3px 8px rgba(165,60,95,.34); }
.vessel-route-map-label { border: 1px solid rgba(55,99,128,.35) !important; border-radius: 3px !important; background: rgba(255,255,255,.94) !important; color: #244f6a !important; padding: 2px 5px !important; font-family: inherit !important; font-size: 10px !important; font-weight: 900 !important; box-shadow: 0 2px 6px rgba(22,68,96,.18) !important; }
.vessel-route-map-label::before { border-top-color: rgba(255,255,255,.94) !important; }
.vessel-route-map-popup { display: grid; gap: 6px; min-width: 168px; color: #28516c; font-family: inherit; }
.vessel-route-map-popup em { color: #6b8798; font-size: 10px; font-style: normal; font-weight: 950; letter-spacing: .5px; }
.vessel-route-map-popup strong { color: #173f5d; font-size: 14px; }
.vessel-route-map-popup span { display: flex; justify-content: space-between; gap: 14px; border-top: 1px solid #dbe8ef; padding-top: 5px; font-size: 11px; font-weight: 800; }
.vessel-route-map-popup b { color: #6b8798; font-size: 10px; }
.vessel-route-map-legend { position: absolute; z-index: 460; right: 15px; bottom: 14px; display: flex; flex-wrap: wrap; gap: 7px; max-width: calc(100% - 30px); pointer-events: none; }
.vessel-route-map-legend span { display: inline-flex; align-items: center; gap: 4px; border: 1px solid rgba(97,135,159,.42); border-radius: 3px; background: rgba(255,255,255,.94); color: #42697f; padding: 4px 6px; font-size: 9px; font-weight: 950; box-shadow: 0 3px 8px rgba(25,71,99,.12); }
.vessel-route-map-legend span::before { width: 16px; height: 3px; background: #1877b7; content: ""; }
.vessel-route-map-legend .planned::before { background: repeating-linear-gradient(90deg, #de6e91 0 5px, transparent 5px 8px); }
.vessel-route-map-legend .active::before { height: 4px; background: #075f99; }
.vessel-route-map-legend .ship::before { width: 8px; height: 8px; border-radius: 50%; background: #086b9f; box-shadow: 0 0 0 2px rgba(8,107,159,.18); }
.vessel-fast-map-grid { position: absolute; inset: 0; background-color: #e6f2f8; background-image: linear-gradient(rgba(73,132,171,.18) 1px, transparent 1px), linear-gradient(90deg, rgba(73,132,171,.18) 1px, transparent 1px); background-size: 48px 48px; }
.vessel-fast-map-svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.vessel-fast-map-route { fill: none; stroke: #2385b7; stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 9 8; filter: drop-shadow(0 3px 3px rgba(20,96,143,.24)); animation: vessel-fast-route-flow 4s linear infinite; }
.vessel-fast-map-point { fill: #b9dceb; stroke: #fff; stroke-width: 2; }
.vessel-fast-map-pulse { fill: rgba(33,126,181,.2); stroke: rgba(33,126,181,.42); stroke-width: 2; animation: vessel-fast-map-pulse 2.3s ease-out infinite; transform-origin: center; }
.vessel-fast-map-ship { fill: #0a659c; stroke: #fff; stroke-width: 4; filter: drop-shadow(0 5px 8px rgba(11,75,115,.28)); }
.vessel-fast-map-ship-mark { fill: #f6fbfe; }
.vessel-fast-map-live { position: absolute; z-index: 470; top: 16px; left: 16px; border: 1px solid rgba(18,100,150,.52); border-radius: 4px; background: rgba(255,255,255,.94); color: #12608d; padding: 4px 6px; font-size: 9px; font-weight: 950; box-shadow: 0 4px 10px rgba(22,79,112,.16); }
.vessel-fast-map-empty { position: absolute; inset: 0; display: grid; place-items: center; color: #5e788d; font-size: 13px; font-weight: 850; }
.vessel-route-rail { overflow: hidden; border-bottom: 1px solid rgba(117,158,188,.52); background: #f8fbfd; }
.vessel-route-rail header { display: flex; align-items: end; justify-content: space-between; gap: 14px; border-bottom: 1px solid rgba(184,207,221,.74); background: #fff; padding: 10px 16px; }
.vessel-route-rail header > div { display: grid; gap: 2px; }
.vessel-route-rail header span { color: #357da8; font-size: 9px; font-weight: 950; letter-spacing: 1px; }
.vessel-route-rail header strong { color: #1d4865; font-size: 13px; font-weight: 950; }
.vessel-route-rail header p { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; margin: 0; color: #3a637d; font-size: 11px; font-weight: 850; text-align: right; }
.vessel-route-rail header p b { color: #6a8395; font-weight: 950; }
.vessel-route-rail header p i { width: 1px; height: 11px; margin: 0 4px; background: #b7cad8; }
.vessel-route-scroll { overflow-x: auto; overscroll-behavior-x: contain; }
.vessel-route-scroll ol { display: flex; min-width: max-content; margin: 0; padding: 24px 16px 16px; list-style: none; }
.vessel-route-scroll li { position: relative; flex: 0 0 198px; min-width: 0; padding-top: 15px; padding-right: 18px; }
.vessel-route-scroll li:not(:last-child)::after { content: ""; position: absolute; z-index: 0; top: 21px; left: 20px; right: -2px; height: 2px; background: repeating-linear-gradient(90deg, #b8cad8 0 8px, transparent 8px 12px); }
.vessel-route-dot { position: absolute; z-index: 1; top: 15px; left: 11px; width: 12px; height: 12px; border: 3px solid #fff; border-radius: 50%; background: #3a86b3; box-shadow: 0 0 0 1px #7ea9c1; }
.vessel-route-scroll li.departed .vessel-route-dot { background: #427a9a; }
.vessel-route-scroll li.planned .vessel-route-dot { background: #d48c37; box-shadow: 0 0 0 1px #c28a4b; }
.vessel-route-scroll li.current .vessel-route-dot { background: #3c9370; box-shadow: 0 0 0 1px #4f9d7c, 0 0 0 5px rgba(60,147,112,.12); }
.vessel-route-stop { display: grid; gap: 5px; min-height: 108px; border: 1px solid #c5d9e6; border-radius: 5px; background: #fff; padding: 10px 11px; box-shadow: 0 3px 8px rgba(35,75,103,.06); }
.vessel-route-scroll li.current .vessel-route-stop { border-color: #77b89d; background: #f5fbf8; }
.vessel-route-scroll li.planned .vessel-route-stop { border-color: #e0bb87; background: #fffbf4; }
.vessel-route-scroll li.planned { flex-basis: 222px; }
.vessel-route-stop em { width: fit-content; border-radius: 3px; background: #e5f1f7; color: #2f6e93; padding: 2px 5px; font-size: 9px; font-style: normal; font-weight: 950; }
.vessel-route-scroll li.current em { background: #e2f4eb; color: #287156; }
.vessel-route-scroll li.planned em { background: #fff0db; color: #9a631d; }
.vessel-route-stop strong { overflow: hidden; color: #1b4563; font-size: 14px; font-weight: 950; text-overflow: ellipsis; white-space: nowrap; }
.vessel-route-times { display: grid; gap: 3px; }
.vessel-route-times small { display: grid; grid-template-columns: 35px minmax(0,1fr); gap: 4px; overflow: hidden; color: #5e778a; font-size: 10px; font-weight: 800; line-height: 1.35; overflow-wrap: anywhere; }
.vessel-route-scroll li.planned .vessel-route-times small { grid-template-columns: max-content max-content; overflow: visible; overflow-wrap: normal; white-space: nowrap; }
.vessel-route-times small b { color: #496a80; font-weight: 950; }
.vessel-route-leg { position: absolute; z-index: 2; top: -3px; left: 50px; max-width: 136px; overflow: hidden; border: 1px solid #c7d7e2; border-radius: 3px; background: #f8fbfd; color: #55758a; padding: 2px 5px; font-size: 9px; font-style: normal; font-weight: 900; text-overflow: ellipsis; white-space: nowrap; }
.vessel-fast-map .vessel-coordinate-link { top: 16px; right: 16px; bottom: auto; font-family: inherit; cursor: pointer; }
.vessel-coordinate-link:disabled { cursor: wait; opacity: .68; transform: none; }
.vessel-sea-timeline { display: grid; grid-template-columns: repeat(auto-fit, minmax(126px, 1fr)); gap: 0; margin: 0; padding: 0; list-style: none; overflow: hidden; border: 1px solid #b7cddd; border-radius: 7px; background: #fff; box-shadow: inset 0 1px 0 #fff, 0 8px 18px rgba(29,67,94,.09); }
.vessel-sea-timeline li { position: relative; display: grid; gap: 4px; min-width: 0; border-right: 1px solid #d6e3ec; padding: 12px 12px 12px 27px; }
.vessel-sea-timeline li:last-child { border-right: 0; }
.vessel-sea-timeline li > span { position: absolute; top: 18px; left: 12px; width: 8px; height: 8px; border: 2px solid #fff; border-radius: 50%; background: #2e86b8; box-shadow: 0 0 0 1px rgba(47,124,169,.42); }
.vessel-sea-timeline li.departed > span { background: #287a9e; }
.vessel-sea-timeline li.planned { background: #f8fbfd; }
.vessel-sea-timeline li.planned > span { background: #e19942; box-shadow: 0 0 0 1px rgba(185,128,45,.42); }
.vessel-sea-timeline li > div { display: grid; gap: 5px; min-width: 0; }
.vessel-sea-timeline em { width: fit-content; border-radius: 3px; background: #e4f3fa; color: #176d9c; padding: 2px 5px; font-size: 9px; font-style: normal; font-weight: 950; letter-spacing: .4px; }
.vessel-sea-timeline li.departed em { background: #e5f0f5; color: #28627f; }
.vessel-sea-timeline li.planned em { background: #fff2dc; color: #9b631d; }
.vessel-sea-timeline strong, .vessel-sea-timeline small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vessel-sea-timeline strong { color: #1d425f; font-size: 13px; font-weight: 950; }
.vessel-sea-times { display: grid; gap: 3px; }
.vessel-sea-timeline small { display: flex; gap: 5px; color: #637d91; font-size: 11px; font-weight: 800; }
.vessel-sea-timeline small b { flex: 0 0 auto; color: #4a6d85; font-weight: 950; }
.vessel-supplier-map { position: relative; min-height: 470px; overflow: hidden; border: 1px solid #a9c3d6; border-radius: 8px; background: #edf6fa; box-shadow: inset 0 1px 0 #fff, 0 12px 28px rgba(32,74,104,.13); }
.vessel-supplier-map iframe { display: block; width: 100%; min-height: 470px; border: 0; background: #eef5f9; }
.vessel-supplier-back { position: absolute; z-index: 2; top: 14px; left: 14px; border: 1px solid #2f82b3; border-radius: 5px; background: rgba(255,255,255,.96); color: #1b6f9f; padding: 8px 11px; font-family: inherit; font-size: 12px; font-weight: 900; box-shadow: 0 4px 10px rgba(22,92,137,.16); cursor: pointer; }
.vessel-supplier-loading, .vessel-supplier-error { min-height: 470px; display: grid; place-content: center; justify-items: center; gap: 10px; color: #557289; font-size: 13px; font-weight: 850; text-align: center; }
.vessel-supplier-loading i { width: 28px; height: 28px; border: 3px solid rgba(40,125,179,.2); border-top-color: #287fb4; border-radius: 50%; animation: vessel-fast-map-spin .8s linear infinite; }
.vessel-supplier-error strong { color: #1a4666; font-size: 15px; }
.vessel-supplier-error button { border: 1px solid #2f82b3; border-radius: 5px; background: #fff; color: #1b6f9f; padding: 8px 11px; font-family: inherit; font-size: 12px; font-weight: 900; cursor: pointer; }
@keyframes vessel-fast-route-flow { to { stroke-dashoffset: -68; } }
@keyframes vessel-fast-map-pulse { 0% { opacity: .9; transform: scale(.45); } 75%,100% { opacity: 0; transform: scale(1.45); } }
@keyframes vessel-fast-live-ship { 0%, 100% { transform: translateY(0); box-shadow: 0 0 0 7px rgba(21,126,180,.19), 0 5px 12px rgba(17,73,107,.42); } 50% { transform: translateY(-3px); box-shadow: 0 0 0 10px rgba(21,126,180,.1), 0 8px 15px rgba(17,73,107,.34); } }
@keyframes vessel-fast-map-spin { to { transform: rotate(360deg); } }
@media (max-width: 700px) { .vessel-fast-map-canvas { min-height: 380px; } .vessel-fast-map .vessel-coordinate-link { top: auto; right: 12px; bottom: 12px; } .vessel-fast-map-head { padding-bottom: 56px; } .vessel-sea-timeline { grid-template-columns: repeat(2, minmax(0, 1fr)); } .vessel-sea-timeline li:nth-child(2n) { border-right: 0; } .vessel-supplier-map, .vessel-supplier-map iframe, .vessel-supplier-loading, .vessel-supplier-error { min-height: 400px; } }

.vessel-detail-table {
  width: 100%;
  border-collapse: collapse;
  color: #1d3349;
  font-size: 12px;
}

.vessel-detail-table th {
  border: 1px solid #b8cada;
  background: #2f65a0;
  color: #fff;
  padding: 8px 9px;
  text-align: left;
  white-space: nowrap;
}

.vessel-detail-table td {
  border: 1px solid #d4e0ea;
  background: #fff;
  padding: 8px 9px;
  vertical-align: top;
}

.vessel-detail-table tr:nth-child(even) td {
  background: #f8fbfd;
}

.vessel-detail-table span {
  color: #63788c;
  font-size: 11px;
}

.vessel-log-row td {
  color: #687d90;
  background: #f5f8fb !important;
}

.vessel-delay-summary {
  display: flex;
  gap: 10px;
  margin-bottom: 10px;
}

.vessel-delay-summary span {
  border: 1px solid #c2d2e0;
  border-radius: 999px;
  background: #f8fbfd;
  color: #244361;
  padding: 6px 11px;
  font-size: 12px;
  font-weight: 900;
}

.preorder-crm-modal .modal-head {
  border-bottom: 1px solid #214f84;
  background: linear-gradient(180deg, #3169a6, #285c96);
}

.preorder-crm-modal .modal-head span {
  color: rgba(255,255,255,.72);
}

.preorder-crm-modal .modal-head h1 {
  color: #fff;
}

.preorder-crm-modal .modal-head button {
  border-color: rgba(255,255,255,.38);
  background: rgba(255,255,255,.12);
  color: #fff;
}

.preorder-crm-body {
  overflow: auto;
  padding: 0;
}

.preorder-crm-layout {
  display: grid;
  grid-template-columns: 350px minmax(0, 1fr);
  min-height: 560px;
}

.preorder-crm-info {
  border-right: 1px solid #cbd8e4;
  background: #f3f8fc;
  padding: 18px 16px;
  overflow: auto;
}

.preorder-crm-client-head {
  display: grid;
  gap: 4px;
  margin-bottom: 12px;
}

.preorder-crm-client-head > span {
  color: #6b7e92;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .08em;
}

.preorder-crm-client-head > strong {
  color: #173a61;
  font-size: 21px;
  font-weight: 900;
  line-height: 1.2;
}

.preorder-crm-client-head > em {
  color: #5c7086;
  font-size: 12px;
  font-style: normal;
  font-weight: 900;
  line-height: 1.4;
}

.preorder-crm-info-card {
  display: grid;
  margin-bottom: 12px;
  border: 1px solid #c8d6e3;
  border-radius: 7px;
  background: #fff;
  padding: 10px 12px;
}

.preorder-info-row {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  min-height: 36px;
  border-bottom: 1px solid #d9e3ec;
  padding: 8px 0;
}

.preorder-info-row:last-child {
  border-bottom: 0;
}

.preorder-info-row span {
  color: #6c7f93;
  font-size: 12px;
  font-weight: 900;
}

.preorder-info-row strong {
  min-width: 0;
  color: #173a61;
  font-size: 14px;
  font-weight: 900;
  line-height: 1.45;
  word-break: break-word;
}

.preorder-crm-remark {
  border-radius: 6px;
  background: #eaf1f7;
  padding: 10px 12px;
}

.preorder-crm-remark span {
  display: block;
  color: #6c7f93;
  font-size: 12px;
  font-weight: 900;
}

.preorder-crm-remark strong {
  display: block;
  margin-top: 4px;
  color: #173a61;
  font-size: 14px;
  font-weight: 900;
  line-height: 1.55;
  white-space: pre-wrap;
}

.preorder-crm-records {
  min-width: 0;
  background: #fff;
  overflow: auto;
  padding: 18px 20px 22px;
}

.preorder-crm-record-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #d7e2ec;
  margin-bottom: 14px;
  padding-bottom: 10px;
}

.preorder-crm-record-head strong {
  color: #173a61;
  font-size: 18px;
  font-weight: 900;
}

.preorder-crm-record-head span {
  min-height: 24px;
  display: inline-flex;
  align-items: center;
  border: 1px solid #c4d5e5;
  border-radius: 999px;
  background: #f3f8fc;
  color: #285d97;
  padding: 0 10px;
  font-size: 12px;
  font-weight: 900;
}

.preorder-record-list.readonly {
  display: grid;
  gap: 11px;
}

.preorder-record-item.readonly {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  border: 1px solid #c8d8e8;
  border-left: 4px solid #3b76af;
  border-radius: 7px;
  background: linear-gradient(180deg, #fff, #fbfdff);
  padding: 14px 14px 14px 12px;
  box-shadow: 0 3px 12px rgba(30, 58, 84, .08);
}

.preorder-record-item.readonly.pending {
  border-left-color: #ba7b22;
  background: linear-gradient(180deg, #fffdf8, #fbfdff);
}

.preorder-record-index {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: #edf4fb;
  color: #285d97;
  font-size: 13px;
  font-weight: 900;
}

.preorder-record-main {
  min-width: 0;
  display: grid;
  gap: 8px;
}

.preorder-record-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
  min-width: 0;
}

.preorder-record-meta strong {
  color: #173a61;
  font-size: 17px;
  font-weight: 900;
  line-height: 1.2;
}

.preorder-record-meta span,
.preorder-record-meta em {
  min-height: 24px;
  display: inline-flex;
  align-items: center;
  border: 1px solid #b7cbe0;
  border-radius: 999px;
  background: #f2f7fb;
  color: #285d97;
  padding: 0 10px;
  font-size: 12px;
  font-style: normal;
  font-weight: 900;
  white-space: nowrap;
}

.preorder-record-meta em {
  border-color: #c9d6e3;
  background: #f8fbfd;
  color: #546b82;
}

.preorder-record-main p {
  margin: 0;
  color: #1f3852;
  font-size: 14px;
  font-weight: 850;
  line-height: 1.68;
}

.preorder-record-foot {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  align-items: center;
}

.preorder-record-foot > span {
  min-height: 24px;
  display: inline-flex;
  align-items: center;
  border: 1px solid #d2dee9;
  border-radius: 6px;
  background: #f7fafc;
  color: #546b82;
  padding: 0 9px;
  font-size: 12px;
  font-weight: 900;
}

.preorder-crm-overview {
  display: grid;
  grid-template-columns: 136px minmax(0, 1fr);
  gap: 12px;
  align-items: stretch;
  margin-bottom: 12px;
}

.preorder-crm-overview > div {
  border: 1px solid #b9ccde;
  border-radius: 7px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .92), rgba(240, 246, 251, .92)),
    linear-gradient(90deg, rgba(49, 105, 166, .12), rgba(49, 105, 166, 0));
  padding: 11px 13px;
  box-shadow: inset 3px 0 0 #3169a6, 0 2px 8px rgba(37, 61, 84, .07);
}

.preorder-crm-overview span {
  display: block;
  color: #6c7e91;
  font-size: 11px;
  font-weight: 900;
}

.preorder-crm-overview strong {
  display: block;
  margin-top: 3px;
  color: #20364e;
  font-size: 19px;
  font-weight: 900;
}

.preorder-crm-overview p {
  margin: 0;
  border: 1px solid #d1dde8;
  border-radius: 7px;
  background: rgba(255, 255, 255, .78);
  color: #465d75;
  padding: 13px 14px;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.55;
}

.preorder-crm-summary {
  display: grid;
  grid-template-columns: 1fr 1.4fr .9fr;
  gap: 10px;
  margin-bottom: 14px;
}

.preorder-crm-summary > div {
  border: 1px solid #c8d5e2;
  border-radius: 7px;
  background: linear-gradient(180deg, #fff, #f8fbfd);
  padding: 10px 12px;
  box-shadow: 0 2px 8px rgba(37, 61, 84, .07);
}

.preorder-crm-summary span {
  display: block;
  color: #718194;
  font-size: 11px;
  font-weight: 900;
}

.preorder-crm-summary strong {
  display: block;
  margin-top: 4px;
  color: #20364e;
  font-size: 14px;
  font-weight: 900;
  line-height: 1.35;
}

.preorder-crm-timeline {
  position: relative;
  display: grid;
  gap: 10px;
  border: 1px solid #cbd8e4;
  border-radius: 8px;
  background: rgba(255, 255, 255, .72);
  padding: 14px 14px 14px 36px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9);
}

.preorder-crm-files {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 10px;
}

.preorder-crm-files a {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  border: 1px solid #b8cbe0;
  border-radius: 999px;
  background: linear-gradient(180deg, #fff, #edf5fb);
  color: #285d97;
  padding: 0 10px;
  font-size: 12px;
  font-weight: 900;
  text-decoration: none;
}

.preorder-crm-no-files {
  margin-top: 10px;
  color: #8191a2;
  font-size: 12px;
  font-weight: 800;
}

.preorder-crm-timeline::before {
  content: "";
  position: absolute;
  top: 22px;
  bottom: 22px;
  left: 21px;
  width: 2px;
  border-radius: 999px;
  background: linear-gradient(180deg, #9fb8d0, #d4e0ea);
}

.preorder-crm-item {
  position: relative;
  display: grid;
  grid-template-columns: 116px minmax(0, 1fr);
  gap: 12px;
}

.preorder-crm-item::before {
  content: "";
  position: absolute;
  top: 13px;
  left: -19px;
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: #2f66a0;
  box-shadow: 0 0 0 4px #dfeaf4;
}

.preorder-crm-item.ready::before {
  background: #2f66a0;
  box-shadow: 0 0 0 4px #dfeaf4;
}

.preorder-crm-item.pending::before {
  background: #7a90a7;
  box-shadow: 0 0 0 4px #e6edf3;
}

.preorder-crm-date {
  border: 1px solid #d2dde7;
  border-radius: 6px;
  background: linear-gradient(180deg, #fff, #f3f7fa);
  color: #546a80;
  font-size: 13px;
  font-weight: 900;
  padding: 8px 9px;
  align-self: start;
  box-shadow: 0 1px 3px rgba(37, 61, 84, .05);
}

.preorder-crm-card {
  border: 1px solid #cbd8e4;
  border-radius: 7px;
  background: linear-gradient(180deg, #fff, #fbfdff);
  padding: 11px 13px 12px;
  box-shadow: 0 3px 10px rgba(37, 61, 84, .08);
}

.preorder-crm-item.ready .preorder-crm-card {
  border-color: #bfd0df;
  background: linear-gradient(#fff, #f8fbfd);
}

.preorder-crm-item.pending .preorder-crm-card {
  border-color: #cbd8e4;
  background: linear-gradient(#fff, #f7fafc);
}

.preorder-crm-card-head {
  display: flex;
  justify-content: flex-start;
  margin-bottom: 7px;
}

.preorder-crm-card-head span {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  border-radius: 999px;
  border: 1px solid #cbd8e4;
  background: #eef4f8;
  color: #465d75;
  padding: 0 9px;
  font-size: 11px;
  font-weight: 900;
}

.preorder-crm-item.ready .preorder-crm-card-head span {
  border-color: #aec4d8;
  background: #e8f1f9;
  color: #2d5f97;
}

.preorder-crm-item.pending .preorder-crm-card-head span {
  border-color: #cbd8e4;
  background: #f2f6fa;
  color: #5f7287;
}

.preorder-crm-card p {
  margin: 0;
  color: #21364c;
  font-size: 13px;
  font-weight: 900;
  line-height: 1.65;
}

.preorder-crm-card dl {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin: 9px 0 0;
}

.preorder-crm-card dl div {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  border: 1px solid #d5e0ea;
  border-radius: 5px;
  background: #f6f9fb;
  padding: 0 9px;
}

.preorder-crm-card dt,
.preorder-crm-card dd {
  margin: 0;
  font-size: 11px;
  font-weight: 900;
}

.preorder-crm-card dt {
  color: #6d7d90;
}

.preorder-crm-card dd {
  margin-left: 6px;
  color: #29435f;
}

.client-export-body {
  padding: 18px 22px 20px;
  overflow: auto;
  background: #fff;
}

.client-export-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 12px;
  color: #41627e;
  font-size: 13px;
  font-weight: 900;
}

.client-export-summary button {
  border: 0;
  background: transparent;
  color: #17649d;
  font-size: 12px;
  font-weight: 900;
  cursor: pointer;
}

.client-export-summary button:hover {
  color: #0d4d7d;
  text-decoration: underline;
}

.client-export-fields {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.client-export-field {
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 40px;
  padding: 0 11px;
  border: 1px solid #bed0df;
  border-radius: 4px;
  background: #fff;
  color: #315675;
  font-size: 12px;
  font-weight: 850;
  cursor: pointer;
}

.client-export-field:has(input:checked) {
  border-color: #72a4cc;
  background: #eef8ff;
  color: #195d90;
}

.client-export-field input {
  width: 15px;
  height: 15px;
  accent-color: #c89124;
}

.client-export-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 15px 22px 18px;
  border-top: 1px solid #d2e0eb;
  background: linear-gradient(#f9fbfd, #eef4f8);
}

.client-export-footer button {
  min-width: 112px;
  height: 38px;
  border: 1px solid #b6c5d3;
  border-radius: 4px;
  background: linear-gradient(#fff, #edf3f8);
  color: #33485f;
  font-weight: 900;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(30, 48, 66, .08);
}

.client-export-footer button.primary {
  min-width: 148px;
  border-color: #245b93;
  border-bottom-color: #173f6a;
  background: linear-gradient(180deg, #4f83bd 0%, #3472ad 48%, #265f99 100%);
  color: #ffffff;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .28),
    0 3px 0 #1e4f85,
    0 11px 20px rgba(37, 87, 143, .22);
}

.client-export-footer button:hover {
  transform: translateY(-1px);
  box-shadow: 0 3px 8px rgba(32, 54, 76, .14);
}

.client-export-footer button.primary:hover {
  filter: brightness(1.03);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .82),
    0 5px 12px rgba(129, 91, 24, .26);
}

.track-modal .modal-head {
  border-bottom: 1px solid #214f84;
  background: linear-gradient(180deg, #3169a6, #285c96);
}

.track-modal .modal-head span {
  color: rgba(255,255,255,.72);
}

.track-modal .modal-head h1 {
  color: #fff;
}

.track-modal .modal-head button {
  border-color: rgba(255,255,255,.38);
  background: rgba(255,255,255,.12);
  color: #fff;
}

.track-modal .modal-head button:hover {
  background: rgba(255,255,255,.2);
}

.modal-head {
  height: 70px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  border-bottom: 1px solid var(--line);
  padding: 0 18px 0 20px;
  background: #f8fbfd;
}

.modal-head span {
  display: block;
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
}

.modal-head h1 {
  margin: 3px 0 0;
  color: var(--blue-dark);
  font-size: 24px;
  line-height: 1.1;
}

.preorder-head-summary {
  margin-left: auto;
  min-width: 220px;
  border: 1px solid #c5d4e1;
  border-radius: 5px;
  background: linear-gradient(#fff, #f0f5f9);
  padding: 8px 12px;
  text-align: right;
}

.preorder-head-summary strong {
  display: block;
  color: var(--blue);
  font-size: 18px;
  font-weight: 900;
  line-height: 1.1;
}

.preorder-head-summary span {
  display: block;
  margin-top: 3px;
  color: #617289;
  font-size: 12px;
  font-weight: 800;
}

.modal-head button {
  width: 34px;
  height: 32px;
  border: 1px solid var(--line);
  border-radius: 3px;
  background: #fff;
  color: var(--muted);
  font-size: 22px;
  font-weight: 900;
  line-height: 1;
}

.track-body {
  overflow: auto;
  padding: 16px 18px 18px;
  background: #f3f7fa;
}

.track-summary {
  display: grid;
  grid-template-columns: minmax(150px, 1fr) auto;
  gap: 12px;
  align-items: center;
  margin-bottom: 12px;
  border: 1px solid #c3d0dc;
  background: #fff;
  padding: 12px 14px;
  box-shadow: 0 2px 6px rgba(37, 61, 84, .08);
}

.track-summary span {
  display: block;
  color: #748294;
  font-size: 11px;
  font-weight: 900;
}

.track-summary strong {
  display: block;
  margin-top: 3px;
  color: #20364e;
  font-size: 17px;
  font-weight: 900;
}

.track-summary em {
  grid-column: 1 / -1;
  justify-self: start;
  border: 1px solid #e1aaa8;
  border-radius: 999px;
  background: #fff6f4;
  color: #ad3b37;
  padding: 3px 9px;
  font-size: 12px;
  font-style: normal;
  font-weight: 900;
}

.track-summary-dots span {
  width: 9px;
  height: 9px;
}

.track-summary-dots span.current {
  width: 12px;
  height: 12px;
}

.track-timeline {
  padding: 12px 12px 12px 24px;
  border-color: #c3d0dc;
  background: #f9fbfd;
  box-shadow: 0 2px 8px rgba(37, 61, 84, .08);
}

.track-loading {
  border: 1px solid #d5e0ea;
  background: #fff;
  color: #66778a;
  padding: 18px;
  font-size: 13px;
  font-weight: 800;
}

.preorder-toolbar {
  display: grid;
  grid-template-columns: 172px 300px 76px auto;
  justify-content: start;
  gap: 8px;
  align-items: center;
  border-bottom: 1px solid var(--line);
  padding: 12px 16px;
  background: #fff;
}

.preorder-display-options {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
  min-height: 34px;
  margin-top: 0;
  border: 1px solid #d4e0eb;
  border-radius: 7px;
  background: linear-gradient(180deg, #ffffff 0%, #f7fafc 100%);
  padding: 0 10px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .92),
    0 1px 2px rgba(38, 61, 84, .06);
}

.preorder-display-title {
  color: #6b7d90;
  font-size: 13px;
  font-weight: 800;
  white-space: nowrap;
}

.preorder-toolbar select,
.preorder-toolbar input {
  height: 34px;
  border: 1px solid var(--line);
  border-radius: 3px;
  background: #fff;
  padding: 0 9px;
  outline: 0;
}

.preorder-toolbar select {
  border-color: #b8c8d7;
  border-radius: 6px;
  background: linear-gradient(180deg, #ffffff 0%, #f7fafc 100%);
  color: #2d435a;
  padding: 0 10px;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .88),
    0 1px 2px rgba(38, 61, 84, .08);
  transition: border-color .14s ease, box-shadow .14s ease, background .14s ease;
}

.preorder-toolbar select:hover {
  border-color: #98afc3;
  background: linear-gradient(180deg, #ffffff 0%, #f2f7fb 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .94),
    0 2px 5px rgba(38, 61, 84, .10);
}

.preorder-toolbar select:focus {
  border-color: #6f9ac2;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .94),
    0 0 0 3px rgba(47, 109, 176, .10),
    0 2px 5px rgba(38, 61, 84, .10);
}

.preorder-toolbar input {
  border-color: #b8c8d7;
  border-radius: 6px;
  background: linear-gradient(180deg, #ffffff 0%, #fbfdfe 100%);
  color: #22394f;
  padding: 0 12px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  box-shadow:
    inset 0 1px 2px rgba(34, 55, 76, .05),
    0 1px 2px rgba(38, 61, 84, .06);
  transition: border-color .14s ease, box-shadow .14s ease, background .14s ease;
}

.preorder-toolbar input::placeholder {
  color: #71849a;
  font-family: inherit;
  font-weight: 700;
  opacity: 1;
}

.preorder-toolbar input:hover {
  border-color: #98afc3;
  background: linear-gradient(180deg, #ffffff 0%, #f6fafc 100%);
  box-shadow:
    inset 0 1px 2px rgba(34, 55, 76, .04),
    0 2px 5px rgba(38, 61, 84, .08);
}

.preorder-toolbar input:focus {
  border-color: #6f9ac2;
  background: #ffffff;
  box-shadow:
    inset 0 1px 2px rgba(34, 55, 76, .04),
    0 0 0 3px rgba(47, 109, 176, .10),
    0 2px 5px rgba(38, 61, 84, .09);
}

.preorder-toolbar button {
  height: 34px;
  border: 1px solid var(--blue-dark);
  border-radius: 999px;
  border-top-color: #5f95ca;
  border-bottom-color: #174d83;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .24) 0%, rgba(255, 255, 255, .08) 42%, rgba(0, 0, 0, .10) 100%),
    linear-gradient(180deg, #3f7fbd 0%, var(--blue) 54%, #2863a2 100%);
  color: #fff;
  padding: 0 14px;
  font-weight: 900;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .38),
    inset 0 -1px 0 rgba(14, 48, 83, .22),
    0 2px 0 #1a568f,
    0 6px 12px rgba(31, 61, 92, .18);
  transition: border-color .14s ease, background .14s ease, box-shadow .14s ease, transform .14s ease;
}

.preorder-toolbar button:hover {
  border-top-color: #73a6d5;
  border-bottom-color: #174d83;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .30) 0%, rgba(255, 255, 255, .10) 42%, rgba(0, 0, 0, .08) 100%),
    linear-gradient(180deg, #4a8bc7 0%, #3678ba 54%, #2b6aac 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .46),
    inset 0 -1px 0 rgba(14, 48, 83, .20),
    0 3px 0 #1a568f,
    0 9px 16px rgba(31, 61, 92, .22);
  transform: translateY(-1px);
}

.preorder-toolbar button:active {
  box-shadow:
    inset 0 2px 6px rgba(15, 45, 78, .30),
    inset 0 1px 0 rgba(255, 255, 255, .18),
    0 1px 0 #1a568f,
    0 4px 8px rgba(31, 61, 92, .14);
  transform: translateY(1px);
}

.preorder-toolbar strong {
  min-width: 74px;
  justify-self: end;
  color: var(--blue);
  text-align: right;
}

.preorder-consignee-switch {
  justify-self: start;
  min-height: 28px;
  width: fit-content;
  border: 1px solid #c6d5e3;
  border-radius: 999px;
  background: linear-gradient(180deg, #ffffff 0%, #f6fafc 100%);
  color: #314960;
  padding: 0 10px 0 12px;
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .92),
    0 1px 2px rgba(38, 61, 84, .07);
  transition: border-color .14s ease, background .14s ease, box-shadow .14s ease, color .14s ease;
}

.preorder-consignee-switch > span {
  display: inline-flex;
  align-items: center;
  min-height: 25px;
  border: 1px solid #9fb8cf;
  border-top-color: #d7e4ee;
  border-bottom-color: #7793ad;
  border-radius: 999px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .98) 0%, rgba(255, 255, 255, .40) 40%, rgba(33, 72, 108, .06) 100%),
    linear-gradient(180deg, #ffffff 0%, #edf5fb 48%, #dbe9f4 100%);
  color: #20364f;
  padding: 0 10px;
  font-size: 15px;
  font-weight: 900;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .95);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 1),
    inset 0 -1px 0 rgba(67, 96, 124, .16),
    0 2px 0 rgba(126, 151, 174, .70),
    0 5px 10px rgba(38, 61, 84, .13);
}

.preorder-consignee-switch:hover {
  border-color: #98afc3;
  background: linear-gradient(180deg, #ffffff 0%, #f1f7fb 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .96),
    0 2px 6px rgba(38, 61, 84, .10);
}

.preorder-consignee-switch:has(input:checked) {
  border-color: #7ea7cc;
  background: linear-gradient(180deg, #f8fcff 0%, #eaf3fb 100%);
  color: #174f91;
}

.preorder-workbench {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: 250px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 12px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .72), rgba(239, 245, 250, .86)),
    #edf3f8;
}

.preorder-case-panel,
.preorder-main-panel {
  min-height: 0;
  border: 1px solid #c3d1de;
  border-radius: 6px;
  background: #fff;
  box-shadow: 0 3px 12px rgba(33, 58, 82, .08);
  overflow: visible;
}

.preorder-case-panel {
  display: flex;
  flex-direction: column;
  align-self: start;
}

.preorder-case-title {
  min-height: 54px;
  border-bottom: 1px solid #d6e1ea;
  background: linear-gradient(#fbfdff, #eef5fa);
  padding: 11px 14px;
}

.preorder-case-title span,
.preorder-panel-head span {
  display: block;
  color: #6a7b8f;
  font-size: 11px;
  font-weight: 900;
}

.preorder-panel-head .preorder-consignee-switch > span {
  display: inline-flex !important;
  align-items: center !important;
  min-height: 25px !important;
  border: 1px solid #9fb8cf !important;
  border-top-color: #d7e4ee !important;
  border-bottom-color: #7793ad !important;
  border-radius: 999px !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .98) 0%, rgba(255, 255, 255, .40) 40%, rgba(33, 72, 108, .06) 100%),
    linear-gradient(180deg, #ffffff 0%, #edf5fb 48%, #dbe9f4 100%) !important;
  color: #20364f !important;
  padding: 0 10px !important;
  font-size: 15px !important;
  font-weight: 900 !important;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .95) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 1),
    inset 0 -1px 0 rgba(67, 96, 124, .16),
    0 2px 0 rgba(126, 151, 174, .70),
    0 5px 10px rgba(38, 61, 84, .13) !important;
}

.preorder-case-title em {
  display: block;
  margin-top: 4px;
  color: #20364f;
  font-size: 15px;
  font-style: normal;
  font-weight: 900;
}

.preorder-folder-filters {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 9px;
  min-width: 0;
  overflow: visible;
  padding: 11px 10px;
}

.preorder-folder-filters button {
  min-height: 44px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 8px;
  border: 1px solid #bfd2e4;
  border-radius: 999px;
  background: linear-gradient(180deg, #ffffff 0%, #f2f7fb 100%);
  color: #263c53;
  padding: 8px 10px 8px 13px;
  font-size: 13px;
  font-weight: 900;
  text-align: left;
  cursor: pointer;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .95),
    0 2px 0 rgba(148, 174, 198, .38),
    0 7px 14px rgba(38, 69, 96, .08);
  transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease, background .16s ease;
}

.preorder-folder-filters .preorder-all-filter {
  min-height: 50px;
  border-color: #9eb9d3;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .98), rgba(232, 242, 250, .98));
  color: #1f3852;
  font-size: 14px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .95),
    inset 4px 0 0 #2f65a0,
    0 2px 0 rgba(120, 154, 184, .34),
    0 9px 18px rgba(40, 92, 150, .12);
}

.preorder-folder-filters button:hover {
  border-color: #a9bfd4;
  background: linear-gradient(#fff, #edf4fa);
  transform: translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .95),
    0 3px 0 rgba(134, 163, 190, .34),
    0 10px 18px rgba(38, 69, 96, .12);
}

.preorder-folder-filters button span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.preorder-folder-filters button.active {
  border-color: #245b93;
  background: linear-gradient(180deg, #3479b5 0%, #28649e 100%);
  color: #fff;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .22),
    inset 0 -1px 0 rgba(13, 54, 91, .32),
    0 3px 0 rgba(25, 78, 126, .36),
    0 12px 22px rgba(40, 92, 150, .24);
}

.preorder-current-badge {
  display: inline-grid;
  place-items: center;
  min-width: 48px;
  height: 22px;
  padding: 0 9px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .94);
  color: #235b91;
  font-size: 10px;
  font-style: normal;
  font-weight: 900;
  line-height: 1;
  box-shadow: inset 0 0 0 1px rgba(35, 91, 145, .12);
}

.preorder-folder-filters i {
  min-width: 18px;
  height: 18px;
  display: inline-grid;
  place-items: center;
  margin-left: 5px;
  border-radius: 999px;
  background: #e6edf2;
  color: var(--blue-dark);
  font-style: normal;
  font-size: 11px;
}

.preorder-folder-filters button.active i {
  background: #fff;
  color: var(--blue-dark);
}

.preorder-folder-section-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 7px 2px 0;
  color: #6d7e91;
  font-size: 11px;
  font-weight: 900;
}

.preorder-folder-section-title::before {
  content: "";
  width: 3px;
  height: 14px;
  border-radius: 999px;
  background: #c99a35;
}

.preorder-main-panel {
  display: flex;
  flex-direction: column;
  align-self: start;
}

.preorder-panel-head {
  min-height: 58px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  border-bottom: 1px solid #d6e1ea;
  background: #fff;
  padding: 11px 14px;
}

.preorder-panel-head strong {
  display: block;
  margin-top: 4px;
  color: #20364f;
  font-size: 17px;
  font-weight: 900;
}

.preorder-panel-head p {
  margin: 0;
  color: #6c7d91;
  font-size: 12px;
  font-weight: 700;
}

.preorder-summary-strip {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
  border-bottom: 1px solid #d6e1ea;
  background: linear-gradient(180deg, #f8fbfd, #eef5fa);
  padding: 10px 12px;
}

.preorder-summary-card {
  min-width: 0;
  min-height: 72px;
  border: 1px solid #cadbe9;
  border-radius: 8px;
  background: linear-gradient(180deg, #ffffff 0%, #f4f8fb 100%);
  padding: 9px 12px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .94),
    0 2px 0 rgba(142, 168, 192, .26),
    0 8px 16px rgba(39, 70, 98, .07);
  text-align: left;
  cursor: pointer;
  transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease, background .16s ease;
}

.preorder-summary-card:first-child {
  padding-left: 12px;
}

.preorder-summary-card:last-child {
  padding-right: 12px;
}

.preorder-summary-card:hover {
  border-color: #9fbad2;
  background: linear-gradient(180deg, #ffffff 0%, #edf5fb 100%);
  transform: translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .96),
    0 3px 0 rgba(128, 158, 187, .3),
    0 11px 20px rgba(39, 70, 98, .1);
}

.preorder-summary-card span {
  display: block;
  color: #6d7e91;
  font-size: 11px;
  font-weight: 900;
}

.preorder-summary-card strong {
  display: block;
  min-height: 20px;
  margin-top: 3px;
  color: #20364e;
  font-size: 15px;
  font-weight: 900;
  line-height: 1.25;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.preorder-summary-card em {
  display: block;
  margin-top: 3px;
  color: #778699;
  font-size: 11px;
  font-style: normal;
  font-weight: 800;
}

.preorder-summary-card.active {
  border-color: #2f6fa5;
  background: linear-gradient(180deg, #eaf5ff 0%, #f8fcff 100%);
  box-shadow:
    inset 0 -4px 0 #2f6fa5,
    inset 0 1px 0 rgba(255, 255, 255, .95),
    0 3px 0 rgba(71, 119, 161, .24),
    0 12px 22px rgba(47, 111, 165, .15);
}

.preorder-summary-card.ok {
  background: transparent;
}

.preorder-summary-card.warn {
  background: transparent;
}

.preorder-table-wrap {
  flex: 0 0 auto;
  min-height: auto;
  overflow: visible;
}

.preorder-client-list {
  display: grid;
  gap: 10px;
  padding: 10px;
}

.preorder-client-list-head,
.preorder-client-card {
  grid-template-columns: 34px minmax(190px, 1.08fr) minmax(96px, .4fr) minmax(326px, 1.28fr) 142px;
}

.preorder-client-list-head {
  position: sticky;
  top: 0;
  z-index: 3;
  display: grid;
  gap: 10px;
  align-items: center;
  min-height: 46px;
  border: 1px solid #d2e0eb;
  border-radius: 5px;
  background: #edf5fa;
  color: #5d748c;
  padding: 6px 11px;
  box-shadow: 0 3px 8px rgba(38, 72, 102, .08);
  font-size: 14px;
  font-weight: 900;
}

.preorder-client-list-head > span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.preorder-client-date-head {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
}

.preorder-client-date-head i {
  min-width: 0;
  border-left: 1px solid #d4e1eb;
  color: inherit;
  font-size: 13px;
  font-style: normal;
  font-weight: 900;
  overflow: visible;
  padding: 0 5px;
  text-align: center;
  white-space: normal;
  line-height: 1.2;
}

.preorder-client-date-head i:first-child {
  border-left: 0;
}

.preorder-client-group {
  overflow: hidden;
  border: 1px solid #c6d5e3;
  border-radius: 6px;
  background:
    linear-gradient(90deg, rgba(45, 101, 160, .10), rgba(45, 101, 160, 0) 240px),
    linear-gradient(180deg, #fbfdff, #f1f6fa);
  background-color: #fff;
}

.preorder-client-group .preorder-group-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  border-left: 4px solid #2f65a0;
  padding: 9px 12px 9px 10px;
}

.preorder-client-group.preorder-folder-group {
  border-color: #e2c68f;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .94), 0 4px 11px rgba(117, 82, 28, .08);
}

.preorder-client-group.preorder-folder-group .preorder-group-head {
  border-left-color: #c58e2a;
  background: linear-gradient(90deg, #fff7e7 0%, #fffaf1 74%, #ffffff 100%);
}

.preorder-group-inquiry-button {
  min-height: 30px;
  padding: 0 10px 0 6px;
  border: 1px solid #9dbbd2;
  border-radius: 16px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: linear-gradient(180deg, #fff 0%, #edf5fa 100%);
  color: #245f91;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .95), 0 2px 5px rgba(37, 87, 126, .10);
  cursor: pointer;
}

.preorder-client-group .preorder-group-inquiry-button span {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #2f6fa5;
  color: #fff;
  font-size: 10px;
  font-weight: 900;
  padding: 0;
  border: 0;
}

.preorder-group-inquiry-button b { font-size: 10px; font-weight: 800; white-space: nowrap; }
.preorder-group-inquiry-button:hover { border-color: #719bbe; background: #fff; box-shadow: inset 0 1px 0 #fff, 0 4px 9px rgba(37, 87, 126, .16); transform: translateY(-1px); }

.preorder-group-label {
  min-width: 0;
  display: grid;
  align-items: center;
  gap: 2px;
}

.preorder-folder-title-row {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
}

.preorder-folder-title-key {
  flex: 0 0 auto;
  color: #9b773d;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0;
}

.preorder-client-group .preorder-group-label > span {
  color: #65788c;
  font-size: 11px;
  font-weight: 900;
}

.preorder-client-group .preorder-group-label > strong {
  min-width: 0;
  overflow: hidden;
  color: #20364e;
  font-size: 15px;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.preorder-client-group.preorder-folder-group .preorder-group-label > strong {
  color: #774d09;
  font-size: 17px;
  font-weight: 950;
}

.preorder-folder-group-meta {
  min-width: 0;
  overflow: hidden;
  color: #927246;
  font-size: 11px;
  font-weight: 850;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.preorder-folder-head-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.preorder-folder-head-actions > em {
  color: #927246;
  font-size: 11px;
  font-style: normal;
  font-weight: 900;
  white-space: nowrap;
}

.preorder-client-group-rows {
  background: #fff;
}

.preorder-client-card {
  display: grid;
  gap: 10px;
  align-items: center;
  min-height: 76px;
  border: 0;
  border-top: 1px solid #e0e8ef;
  border-radius: 0;
  background: #fff;
  padding: 10px 11px;
  box-shadow: none;
}

.preorder-client-card.date-pending {
  box-shadow: inset 3px 0 0 #d3a35c;
  background: #fffdf8;
}

.preorder-client-card.date-range {
  box-shadow: inset 3px 0 0 #c6914e;
  background: #fffdf8;
}

.preorder-client-card.date-ready {
  box-shadow: inset 3px 0 0 #83af91;
  background: #fbfefb;
}

.preorder-client-card.locked {
  box-shadow: inset 3px 0 0 #d7c88e;
  background: #fffdf4;
}

.preorder-client-card.attention {
  box-shadow: inset 3px 0 0 #df8f87;
  background: #fffafa;
}

.preorder-card-index {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border: 1px solid #cddce8;
  border-radius: 7px;
  background: #edf4fa;
  color: #58708a;
  font-size: 12px;
  font-weight: 900;
}

.preorder-card-main {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.preorder-card-title {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.preorder-card-title > strong {
  min-width: 0;
  overflow: hidden;
  color: #173a61;
  font-size: 16px;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.preorder-card-tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px;
  min-width: 0;
}

.preorder-status-chip {
  min-height: 22px;
  display: inline-flex;
  align-items: center;
  border: 1px solid #cad7e3;
  border-radius: 999px;
  background: #f3f7fb;
  color: #4e647a;
  padding: 0 8px;
  font-size: 11px;
  font-weight: 900;
  white-space: nowrap;
}

.preorder-status-chip.urgent {
  border-color: #e8b3ae;
  background: #fff0ef;
  color: #b4443e;
}

.preorder-status-chip.locked {
  border-color: #d9bf75;
  background: #fff7df;
  color: #805915;
}

.preorder-status-chip.pending,
.preorder-status-chip.range {
  border-color: #e0bd79;
  background: #fff5e3;
  color: #94611a;
}

.preorder-status-chip.ready {
  border-color: #b8d4bd;
  background: #eef8f0;
  color: #2f7440;
}

.preorder-status-chip.files {
  border-color: #b7cbe0;
  background: #eef5fb;
  color: #285d97;
}

.preorder-card-route {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  color: #50677e;
  font-size: 12px;
  font-weight: 900;
}

.preorder-card-route b {
  color: #8799ab;
}

.preorder-card-product {
  min-width: 0;
}

.preorder-search-match {
  min-width: 0;
  color: #65798e;
  font-size: 11px;
  font-weight: 750;
  line-height: 1.35;
}

.preorder-search-match span {
  color: #5b748e;
  font-weight: 900;
}

.preorder-search-match b {
  color: #9aabba;
  font-weight: 700;
  padding: 0 3px;
}

.preorder-card-dates {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
}

.preorder-mini-field {
  min-width: 0;
  border: 1px solid #d6e1eb;
  border-radius: 5px;
  background: #f9fbfd;
  padding: 7px 7px;
}

.preorder-mini-field span {
  display: block;
  overflow: hidden;
  color: #6e8195;
  font-size: 10px;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.preorder-mini-field strong {
  display: block;
  min-width: 0;
  overflow: hidden;
  color: #173a61;
  font-size: 12px;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.preorder-mini-field.pending strong {
  color: #94611a;
}

.preorder-card-dates.has-range .preorder-mini-field.range strong {
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
  line-height: 1.25;
}

.preorder-card-cargo {
  display: grid;
  gap: 2px;
  justify-items: start;
  min-width: 0;
}

.preorder-client-list .preorder-card-cargo {
  align-self: center;
  gap: 0;
}

/* Container rows prioritize the equipment type and keep CBM as supporting detail. */
.preorder-client-list .preorder-card-cargo.preorder-container-cargo {
  gap: 2px;
}

.preorder-client-list .preorder-card-cargo.preorder-container-cargo strong {
  color: #173a61;
  font-size: 14px;
  font-weight: 950;
}

.preorder-client-list .preorder-card-cargo.preorder-container-cargo span {
  color: #71869a;
  font-size: 10px;
  font-weight: 850;
  line-height: 1.15;
}

.preorder-client-list .preorder-card-cargo small,
.preorder-client-list .preorder-mini-field span {
  display: none;
}

.preorder-client-list .preorder-card-dates {
  align-self: center;
  gap: 5px;
}

.preorder-client-list .preorder-mini-field {
  min-height: 34px;
  display: grid;
  align-content: center;
  border: 1px solid #d6e2eb;
  border-radius: 7px;
  background: linear-gradient(180deg, #ffffff 0%, #f5f9fc 100%);
  padding: 3px 6px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .88);
}

.preorder-client-list .preorder-mini-field strong {
  color: #1f405f;
  font-size: 12px;
  text-align: center;
}

.preorder-client-list .preorder-mini-field.pending {
  border-color: #ebd0a0;
  background: linear-gradient(180deg, #fffdf8 0%, #fff6e7 100%);
}

.preorder-client-list .preorder-mini-field.pending strong {
  color: #94611a;
}

.preorder-client-list .preorder-mini-field.range {
  border-color: #ead1a3;
  background: linear-gradient(180deg, #fffdf8 0%, #fff5e5 100%);
}

.preorder-client-list .preorder-mini-field.ready {
  border-color: #c3ddc8;
  background: linear-gradient(180deg, #ffffff 0%, #f0f9f2 100%);
}

.preorder-card-cargo small {
  color: #6e8195;
  font-size: 10px;
  font-weight: 900;
}

.preorder-card-cargo strong,
.preorder-card-cargo span {
  color: #173a61;
  font-size: 13px;
  font-weight: 900;
  white-space: nowrap;
}

.preorder-card-cargo strong:empty {
  display: none;
}

.preorder-card-cargo span {
  color: #31506f;
}

.preorder-table {
  min-width: 960px;
}

.preorder-table th:nth-child(2) {
  width: 260px;
}

.preorder-table th:nth-child(3) {
  width: 112px;
}

.preorder-table th:nth-child(4) {
  width: 92px;
}

.preorder-table th:nth-child(5) {
  width: 92px;
}

.preorder-table th:nth-child(6) {
  width: 126px;
}

.preorder-table th:nth-child(7) {
  width: 88px;
}

.preorder-table th:nth-child(8) {
  width: 126px;
}

.preorder-table th:nth-child(9) {
  width: 148px;
}

.preorder-table tr {
  cursor: default;
}

.preorder-table tr:hover {
  background: #f5f9fc;
}

.preorder-table td {
  vertical-align: middle;
}

.preorder-table .select-col {
  text-align: center;
  vertical-align: middle;
  padding-top: 0;
  padding-bottom: 0;
}

.preorder-row-badge {
  min-width: 30px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #9fb6cc;
  border-bottom-color: #718aa3;
  border-radius: 7px;
  background:
    linear-gradient(180deg, #f8fbfd 0%, #dce7f0 50%, #bdcedc 100%);
  color: #244260;
  font-size: 11px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: .02em;
  margin-top: 0;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .95),
    inset 0 -1px 0 rgba(76, 107, 137, .18),
    0 2px 0 #7b93aa,
    0 7px 13px rgba(34, 58, 82, .14);
}

.preorder-group-row td {
  border-top: 1px solid #c4d2df;
  border-bottom: 1px solid #d7e2ec;
  background:
    linear-gradient(90deg, rgba(45, 101, 160, .1), rgba(45, 101, 160, 0) 170px),
    linear-gradient(180deg, #fbfdff, #f1f6fa);
  padding: 9px 12px;
}

.preorder-group-row .select-col {
  padding: 0;
}

.preorder-group-product-cell {
  padding-left: 0 !important;
}

.preorder-group-head {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  border-left: 4px solid #2f65a0;
  padding-left: 10px;
}

.preorder-group-head strong {
  color: #20364e;
  font-size: 15px;
  font-weight: 900;
  line-height: 1.25;
}

.preorder-group-head span {
  display: inline-flex;
  align-items: center;
  min-height: 20px;
  border: 1px solid #adc4da;
  border-radius: 999px;
  background: #fff;
  color: #285d97;
  padding: 0 8px;
  font-size: 11px;
  font-weight: 800;
}

.preorder-locked {
  background: #fffdf3;
}

.preorder-grouped-detail {
  background: #fffefe;
}

.preorder-optional-hidden {
  display: none;
}

.preorder-main-cell {
  position: relative;
  display: grid;
  gap: 5px;
  min-width: 0;
}

.preorder-product-td .preorder-main-cell {
  min-height: 42px;
  align-content: center;
}

.preorder-product-td {
  display: flex;
  align-items: center;
  min-height: 58px;
  text-align: left;
}

.preorder-product-td .preorder-main-cell {
  width: 100%;
}

.preorder-main-cell.detail-only {
  padding-left: 12px;
}

.preorder-main-cell.detail-only::before {
  content: "";
  position: absolute;
  top: 4px;
  bottom: 4px;
  left: 1px;
  width: 2px;
  border-radius: 999px;
  background: #d8e3ec;
}

.preorder-main-cell > strong {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  max-width: 100%;
  color: #20364e;
  font-size: 14px;
  font-weight: 900;
  line-height: 1.25;
}

.preorder-product-line {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 8px;
  max-width: 100%;
  min-height: 22px;
  min-width: 0;
}

.preorder-product {
  max-width: 100%;
  min-width: 0;
  color: #50677e;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.45;
}

.preorder-product.collapsed {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.preorder-product.expanded {
  white-space: normal;
  overflow-wrap: anywhere;
}

.preorder-product-more {
  flex: 0 0 auto;
  justify-self: end;
  min-height: 22px;
  border: 1px solid #bfd0df;
  border-radius: 999px;
  background: linear-gradient(180deg, #ffffff 0%, #eef5f9 100%);
  box-shadow: 0 1px 2px rgba(38, 86, 130, 0.12);
  color: #2d5f97;
  padding: 0 9px;
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
  transition: transform 0.14s ease, box-shadow 0.14s ease, border-color 0.14s ease;
}

.preorder-product-more[hidden] {
  display: none;
}

.preorder-product-more:hover {
  border-color: #8fb4d7;
  box-shadow: 0 4px 10px rgba(38, 86, 130, 0.14);
  transform: translateY(-1px);
}

.preorder-inline-tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px;
  min-height: 20px;
  max-width: 100%;
  min-width: 0;
}

.preorder-inline-tags:empty {
  display: none;
  min-height: 0;
}

.preorder-soft-chip,
.preorder-muted,
.preorder-folder-chip {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  border: 1px solid #d1dce7;
  border-radius: 999px;
  background: #f7fafc;
  color: #627387;
  padding: 0 8px;
  font-size: 12px;
  font-weight: 900;
}

.preorder-folder-chip {
  max-width: 100%;
  min-width: 0;
  min-height: 20px;
  border-color: #d7e3ee;
  background: linear-gradient(180deg, #f7fbfe 0%, #eef4f9 100%);
  color: #65788c;
  padding: 0 8px;
  font-size: 11px;
  font-weight: 600;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .82);
}

.preorder-folder-chip b {
  flex: 0 0 auto;
  margin-right: 6px;
  color: #54708b;
  font-size: 11px;
  font-weight: 700;
}

.preorder-folder-chip em {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-style: normal;
}

.preorder-date-cell {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  min-height: 24px;
  text-align: left;
}

.preorder-date-cell strong {
  color: #20364e;
  font-size: 13px;
  font-weight: 800;
}

.preorder-date-cell.pending strong {
  min-height: 21px;
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  background: #fff4df;
  color: #94611a;
  padding: 0 8px;
  font-size: 12px;
  font-weight: 900;
}

.preorder-schedule-cell {
  display: grid;
  gap: 4px;
}

.preorder-schedule-cell div {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 5px;
  align-items: center;
}

.preorder-schedule-cell span {
  color: #718194;
  font-size: 11px;
  font-weight: 900;
}

.preorder-schedule-cell strong {
  color: #24384e;
  font-size: 13px;
  font-weight: 900;
}

.preorder-schedule-cell em {
  justify-self: start;
  min-height: 19px;
  border-radius: 999px;
  background: #eef2f6;
  color: var(--blue-dark);
  padding: 1px 8px;
  font-size: 11px;
  font-style: normal;
  font-weight: 900;
}

.preorder-route-cell {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  color: #263d54;
  font-size: 13px;
  font-weight: 900;
  line-height: 1.45;
}

.preorder-route-cell b {
  color: #7790a9;
  font-weight: 900;
}

.preorder-single-value {
  color: #20364e;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.45;
  white-space: nowrap;
}

.preorder-single-value.cargo {
  font-weight: 900;
}

.preorder-cargo-cell {
  display: grid;
  gap: 4px;
}

.preorder-cargo-cell strong {
  color: #20364e;
  font-size: 13px;
  font-weight: 900;
}

.preorder-cargo-cell span {
  color: #65778c;
  font-size: 12px;
  font-weight: 800;
}

.preorder-action-cell {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 7px;
  align-items: center;
}

.preorder-contact-action {
  display: grid;
  justify-items: start;
  gap: 5px;
  min-width: 0;
}

.preorder-contact-buttons {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.preorder-next-action {
  color: #60758a;
  font-size: 10px;
  font-style: normal;
  font-weight: 850;
  line-height: 1.2;
  white-space: nowrap;
}

.crm-pill {
  width: 100px;
  min-width: 100px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-height: 34px;
  border: 1px solid #2f78ad;
  border-bottom-color: #1f5d8c;
  border-radius: 999px;
  background: linear-gradient(180deg, #6dafdd 0%, #3f89c0 48%, #2b6da3 100%);
  color: #fff;
  padding: 0 12px;
  font-size: 13px;
  font-weight: 950;
  line-height: 1;
  white-space: nowrap;
  text-shadow: 0 -1px 0 rgba(25, 74, 113, .45);
  cursor: pointer;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .38),
    inset 0 -1px 0 rgba(16, 72, 116, .24),
    0 2px 0 #1f5d8c,
    0 7px 14px rgba(47, 115, 168, .25);
  transition: transform .16s ease, box-shadow .16s ease, filter .16s ease;
}

.crm-pill:hover {
  filter: brightness(1.04);
  transform: translateY(-1px);
}

.crm-pill:active {
  transform: translateY(1px);
  box-shadow:
    inset 0 2px 4px rgba(18, 70, 112, .28),
    0 1px 0 #1f5d8c;
}

.crm-pill.ready {
  border-color: #2f78ad;
  border-bottom-color: #1f5d8c;
  background: linear-gradient(180deg, #6dafdd 0%, #3f89c0 48%, #2b6da3 100%);
}

.crm-pill.pending {
  border-color: #2f78ad;
  border-bottom-color: #1f5d8c;
  background: linear-gradient(180deg, #6dafdd 0%, #3f89c0 48%, #2b6da3 100%);
  color: #fff;
}

.crm-pill.empty i {
  background: rgba(255, 255, 255, .88);
  color: #2b6da3;
}

.crm-pill i {
  min-width: 21px;
  height: 21px;
  display: grid;
  place-items: center;
  margin-left: 5px;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, .90);
  color: #2b6da3;
  padding: 0 6px;
  font-size: 12px;
  font-weight: 950;
  font-style: normal;
  line-height: 1;
}

.preorder-mark,
.attention-mark {
  display: inline-flex;
  align-items: center;
  min-height: 20px;
  margin-left: 6px;
  border-radius: 3px;
  padding: 0 6px;
  font-size: 11px;
  font-weight: 900;
}

.preorder-mark {
  background: #eef2f6;
  color: var(--blue-dark);
}

.attention-mark {
  background: #fff0da;
  color: #9a621c;
}

.preorder-file {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  border: 1px solid #cf9630;
  border-bottom-color: #9e6c18;
  border-radius: 4px;
  background: linear-gradient(#fff6df 0%, #f3cf7b 50%, #dfa83a 100%);
  color: #5e3f0d;
  padding: 0 10px;
  font-size: 12px;
  font-weight: 900;
  text-decoration: none;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .92), 0 2px 0 #c28d2b, 0 7px 14px rgba(124, 82, 18, .13);
  transition: transform .16s ease, box-shadow .16s ease, filter .16s ease, background .16s ease, border-color .16s ease;
}

.preorder-file:hover {
  border-color: #c48723;
  border-bottom-color: #9e6c18;
  background: linear-gradient(#fffdf7 0%, #f9e4b6 46%, #eabf5e 100%);
  color: #5e3f0d;
  filter: brightness(1.02);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .96), 0 3px 0 #b97f23, 0 10px 18px rgba(124, 82, 18, .18);
  transform: translateY(-2px);
}

.modal-empty-row {
  height: 120px;
  color: var(--muted);
  text-align: center;
  vertical-align: middle !important;
  font-weight: 900;
}

.detail-body {
  padding: 14px;
}

.old-detail-body {
  padding: 12px;
  background: #f5f8fb;
}

.detail-window-actions {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin: -12px -12px 10px;
  padding: 10px 12px;
  border-bottom: 1px solid #c8d6e3;
  background: linear-gradient(#ffffff, #eef4f9);
  box-shadow: 0 2px 8px rgba(39, 63, 87, .08);
}

.detail-window-actions em {
  min-width: 72px;
  min-height: 30px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: #e8f5f1;
  color: var(--green);
  font-style: normal;
  font-weight: 900;
}

.detail-window-actions button:not(.copy-info-button) {
  width: 32px;
  height: 30px;
  border: 1px solid var(--line);
  border-radius: 3px;
  background: #fff;
  color: var(--muted);
  font-size: 20px;
  font-weight: 800;
  line-height: 1;
}

.old-detail-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  background: #fff;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .9), 0 0 0 1px #dbe5ee;
}

.old-label-col {
  width: 120px;
}

.old-value-col {
  width: 140px;
}

.old-gap-col {
  width: 28px;
}

.old-detail-table td {
  min-height: 34px;
  border-bottom: 1px dashed #e4e9ee;
  padding: 7px 8px;
  vertical-align: middle;
  font-size: 14px;
  line-height: 1.45;
  overflow-wrap: normal;
}

.old-section {
  min-height: 34px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
  border-radius: 2px;
  background: #2f5f9f;
  color: #fff;
  padding: 0 10px;
  font-weight: 900;
}

.old-section span {
  justify-self: start;
}

.old-section strong {
  justify-self: end;
  font-size: 14px;
}

.old-section button {
  min-width: 100px;
  height: 26px;
  border: 1px solid #d7e5f3;
  border-radius: 5px;
  background: #fff;
  color: var(--blue-dark);
  font-size: 12px;
  font-weight: 900;
}

.copy-info-button,
.old-section .copy-info-button,
.detail-page-status .copy-info-button {
  min-width: 132px;
  height: 30px;
  border: 1px solid #8aa3bc;
  border-bottom-color: #627d98;
  border-radius: 6px;
  background:
    linear-gradient(180deg, #f8fbfd 0%, #dce7f0 48%, #bacbd9 100%);
  color: #233f5e;
  padding: 0 14px;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .96),
    inset 0 -1px 0 rgba(82, 112, 142, .22),
    0 3px 0 #6e879f,
    0 9px 18px rgba(29, 53, 77, .20);
  cursor: pointer;
  transform: translateY(0);
  transition:
    transform .14s ease,
    box-shadow .14s ease,
    border-color .14s ease,
    background .14s ease,
    color .14s ease;
}

.copy-info-button:hover,
.old-section .copy-info-button:hover,
.detail-page-status .copy-info-button:hover {
  border-color: #6688aa;
  border-bottom-color: #4e6f90;
  background:
    linear-gradient(180deg, #ffffff 0%, #e4edf5 46%, #a9c0d2 100%);
  color: #173657;
  transform: translateY(-2px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 1),
    inset 0 -1px 0 rgba(82, 112, 142, .25),
    0 5px 0 #5d7892,
    0 14px 24px rgba(29, 53, 77, .27);
}

.copy-info-button:active,
.old-section .copy-info-button:active,
.detail-page-status .copy-info-button:active {
  transform: translateY(1px);
  box-shadow:
    inset 0 2px 5px rgba(31, 59, 88, .20),
    0 1px 0 #5d7892,
    0 6px 13px rgba(29, 53, 77, .22);
}

.old-dotted-divider {
  border-top: 1px dotted #b7c0cf;
  height: 1px;
  margin: 4px 6%;
}

.old-leg-divider {
  position: relative;
  height: 1px;
  margin: 8px 6%;
  background: linear-gradient(90deg, #7aa6d9 0 72px, #d8e4f1 72px 100%);
}

.old-leg-divider::after {
  content: "";
  position: absolute;
  left: 0;
  top: -2px;
  width: 72px;
  height: 5px;
  border-radius: 999px;
  background: #4f83bf;
}

.old-leg-divider-final {
  margin-top: 10px;
  margin-bottom: 10px;
}

.old-label {
  color: #667586;
  text-align: right;
  font-weight: 700;
  white-space: nowrap;
}

.old-label-long {
  padding-right: 3px;
  font-size: 13px;
}

.old-detail-table .old-label-long {
  font-size: 13px;
}

.old-label.old-left {
  text-align: left;
  padding-left: 24px;
}

.old-value {
  color: #1d2c3a;
  font-weight: 700;
  overflow-wrap: break-word;
}

.old-value-nowrap {
  white-space: nowrap;
  overflow-wrap: normal;
}

.old-port-value {
  color: #17283b;
  font-size: 15px;
  font-weight: 700;
  white-space: nowrap;
  overflow-wrap: normal;
}

.old-detail-table .old-port-value {
  font-size: 15px;
  font-weight: 700;
}

.old-ship-name {
  white-space: nowrap;
  overflow-wrap: normal;
  word-break: keep-all;
}

.old-leg-ship-name {
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.old-leg-ship-name .vessel-motion-button {
  display: inline-flex;
  width: auto;
  margin: 0 0 0 9px;
  vertical-align: middle;
}

.vessel-motion-button {
  min-height: 26px;
  margin-left: 10px;
  padding: 0 11px;
  border: 1px solid #86a4bf;
  border-bottom-color: #5f7f9c;
  border-radius: 6px;
  background:
    linear-gradient(180deg, #fbfdff 0%, #e1ebf3 48%, #bdd0df 100%);
  color: #203f60;
  font-size: 12px;
  font-weight: 900;
  line-height: 24px;
  cursor: pointer;
  vertical-align: 1px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .96),
    inset 0 -1px 0 rgba(76, 107, 137, .18),
    0 2px 0 #6e879f,
    0 7px 14px rgba(29, 53, 77, .18);
  transition:
    transform .14s ease,
    box-shadow .14s ease,
    border-color .14s ease,
    background .14s ease,
    color .14s ease;
}

.vessel-motion-button:hover {
  border-color: #6688aa;
  border-bottom-color: #4e6f90;
  background:
    linear-gradient(180deg, #ffffff 0%, #e7eff6 46%, #aec4d5 100%);
  color: #173657;
  transform: translateY(-2px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 1),
    inset 0 -1px 0 rgba(76, 107, 137, .22),
    0 4px 0 #5d7892,
    0 12px 20px rgba(29, 53, 77, .24);
}

.vessel-motion-button:active {
  transform: translateY(1px);
  box-shadow:
    inset 0 2px 5px rgba(31, 59, 88, .20),
    0 1px 0 #5d7892,
    0 5px 10px rgba(29, 53, 77, .20);
}

.old-add {
  color: #9aa8b6;
  padding: 0 6px;
}

.factory-cargo-metric {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  white-space: nowrap;
}

.factory-cargo-metric b {
  color: #1d2c3a;
  font-size: inherit;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.factory-cargo-metric small {
  color: #697e90;
  font-size: 12px;
  font-weight: 700;
}

.factory-total-row > td {
  padding: 7px 8px;
  border-bottom: 1px solid #dbe5ed;
  background: #fff;
}

.factory-total-band {
  display: grid;
  justify-items: center;
  gap: 5px;
  min-height: 38px;
  padding: 4px 10px;
  background: linear-gradient(90deg, rgba(241, 247, 251, 0), rgba(241, 247, 251, .78) 50%, rgba(241, 247, 251, 0));
}

.factory-total-heading {
  display: flex;
  align-items: baseline;
  width: min(100%, 560px);
  gap: 7px;
  color: #2a4b65;
  white-space: nowrap;
}

.factory-total-heading::before,
.factory-total-heading::after {
  content: "";
  flex: 1 1 36px;
  min-width: 18px;
  height: 1px;
  align-self: center;
  background: #d1dfe9;
}

.factory-total-heading span {
  font-size: 12px;
  font-weight: 850;
}

.factory-total-heading small {
  color: #718496;
  font-size: 11px;
  font-weight: 700;
}

.factory-total-metrics {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  min-width: 0;
}

.factory-total-metric {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  color: #233b50;
  white-space: nowrap;
}

.factory-total-metric b {
  color: #1d2c3a;
  font-size: 14px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.factory-total-metric small {
  color: #697e90;
  font-size: 12px;
  font-weight: 700;
}

.factory-total-separator {
  width: 1px;
  height: 18px;
  margin: 0 12px;
  background: #cbd8e2;
}

.old-value-strong {
  color: #15375d;
  font-weight: 900;
}

.old-inline-list {
  border: 0;
  padding: 0;
}

.old-timeline {
  border-top: 1px solid var(--line);
  padding: 8px 0 8px 18px;
}

.detail-title {
  min-height: 58px;
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 2px solid var(--blue);
  margin-bottom: 12px;
}

.detail-title > div:first-child {
  min-width: 0;
}

.detail-title span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.detail-title h1 {
  margin: 3px 0 10px;
  font-size: 28px;
  line-height: 1.08;
  overflow-wrap: anywhere;
}

.detail-title em {
  min-width: 72px;
  min-height: 30px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: #e8f5f1;
  color: var(--green);
  font-style: normal;
  font-weight: 900;
}

.detail-title-actions {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 8px;
}

.detail-title-actions button {
  width: 32px;
  height: 30px;
  border: 1px solid var(--line);
  border-radius: 3px;
  background: #fff;
  color: var(--muted);
  font-size: 20px;
  font-weight: 800;
  line-height: 1;
}

.detail-title-actions button:hover {
  color: var(--blue-dark);
  border-color: var(--blue);
}

.summary-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 12px;
  table-layout: fixed;
}

.summary-table th,
.summary-table td {
  border: 1px solid var(--line);
  padding: 9px 10px;
  text-align: left;
}

.summary-table th {
  width: 120px;
  background: var(--label);
  color: #526273;
  font-size: 12px;
}

.summary-table td {
  font-weight: 900;
  overflow-wrap: anywhere;
  font-size: 15px;
}

@media (max-width: 900px) {
  .detail-pane {
    width: min(760px, calc(100vw - 44px));
  }

  .summary-table,
  .summary-table tbody,
  .summary-table tr,
  .summary-table th,
  .summary-table td {
    display: block;
    width: 100%;
  }

  .summary-table tr {
    display: grid;
    grid-template-columns: 126px minmax(0, 1fr);
  }

  .summary-table th,
  .summary-table td {
    min-height: 40px;
  }

  .field-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Order detail command band and grouped history. */
.detail-latest-summary {
  position: sticky;
  top: 8px;
  z-index: 30;
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  min-height: 42px;
  margin-top: 10px;
  border: 1px solid #b9ccdc;
  border-left: 4px solid #2f679d;
  border-radius: 4px;
  background: rgba(250, 252, 254, .98);
  padding: 7px 12px;
  box-shadow:
    inset 0 1px 0 #ffffff,
    0 5px 14px rgba(36, 67, 96, .11);
  backdrop-filter: blur(8px);
}

.detail-latest-summary.hidden {
  display: none;
}

.detail-latest-heading {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  white-space: nowrap;
}

.detail-latest-heading > span {
  color: #315e87;
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}

.detail-latest-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  height: 18px;
  border: 1px solid #b94343;
  border-radius: 999px;
  background: #c9544f;
  color: #ffffff;
  padding: 0 7px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .34),
    0 1px 3px rgba(115, 42, 42, .18);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 10px;
  font-weight: 700;
  line-height: 16px;
  letter-spacing: 0;
}

.detail-latest-summary > strong {
  min-width: 0;
  color: #20384f;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.45;
}

.detail-latest-summary > time {
  color: #67798a;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

.detail-latest-summary-pane {
  position: static;
  z-index: auto;
  margin: 4px 10px 9px;
  box-shadow:
    inset 0 1px 0 #ffffff,
    0 2px 6px rgba(36, 67, 96, .08);
  backdrop-filter: none;
}

.operation-menu.detail-operation-menu {
  display: block;
}

.operation-command-band {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(310px, 1fr));
  overflow: hidden;
  width: 100%;
  border: 1px solid #c8d6e2;
  border-radius: 6px;
  background: #f8fafc;
  box-shadow:
    inset 0 1px 0 #ffffff,
    0 3px 9px rgba(39, 65, 90, .08);
}

.operation-command-group {
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  min-height: 62px;
  padding: 10px 12px;
  border-right: 1px solid #d7e1e9;
  border-bottom: 1px solid #d7e1e9;
  background: rgba(255, 255, 255, .74);
}

.operation-command-group:nth-child(even) {
  background: rgba(247, 250, 252, .88);
}

.operation-command-label {
  align-self: stretch;
  display: flex;
  align-items: center;
  border-right: 3px solid #7195b6;
  color: #355875;
  padding-right: 9px;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.3;
  white-space: nowrap;
}

.operation-command-download .operation-command-label {
  border-right-color: #3c73a7;
  color: #234f77;
}

.operation-command-band .downloads,
.operation-command-band .actions,
.detail-side-section .operation-command-band .downloads,
.detail-side-section .operation-command-band .actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  border: 0;
  padding: 0;
}

.operation-command-band .downloads a,
.operation-command-band .actions button,
.operation-command-band .operation-command-group .downloads a,
.operation-command-band .operation-command-group .actions button,
.detail-side-section .operation-command-band .downloads a,
.detail-side-section .operation-command-band .actions button,
.detail-side-section .operation-command-band .operation-command-group .downloads a,
.detail-side-section .operation-command-band .operation-command-group .actions button,
.old-menu-cell .operation-command-band .downloads a,
.old-menu-cell .operation-command-band .actions button,
.old-menu-cell .operation-command-band .operation-command-group .downloads a,
.old-menu-cell .operation-command-band .operation-command-group .actions button {
  width: 196px;
  max-width: 100%;
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #d3b77d;
  border-top-color: #ead7ad;
  border-bottom-color: #ae8b4c;
  border-radius: 6px;
  background: linear-gradient(180deg, #fffefa 0%, #faf2de 52%, #efddb6 100%);
  color: #60471d;
  padding: 0 13px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: 0;
  text-align: center;
  white-space: nowrap;
  overflow: visible;
  text-overflow: clip;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .72);
  box-shadow:
    inset 0 1px 0 #ffffff,
    0 2px 0 #c3a263,
    0 6px 12px rgba(102, 76, 31, .11);
  transition:
    transform .14s ease,
    box-shadow .14s ease,
    border-color .14s ease,
    background .14s ease,
    color .14s ease;
}

.operation-command-band .downloads a:hover,
.operation-command-band .actions button:hover,
.operation-command-band .operation-command-group .downloads a:hover,
.operation-command-band .operation-command-group .actions button:hover,
.detail-side-section .operation-command-band .downloads a:hover,
.detail-side-section .operation-command-band .actions button:hover,
.detail-side-section .operation-command-band .operation-command-group .downloads a:hover,
.detail-side-section .operation-command-band .operation-command-group .actions button:hover,
.old-menu-cell .operation-command-band .downloads a:hover,
.old-menu-cell .operation-command-band .actions button:hover,
.old-menu-cell .operation-command-band .operation-command-group .downloads a:hover,
.old-menu-cell .operation-command-band .operation-command-group .actions button:hover {
  border-color: #c5a566;
  border-top-color: #eeddb7;
  border-bottom-color: #9c783c;
  background: linear-gradient(180deg, #ffffff 0%, #fcf6e9 50%, #f2e4c6 100%);
  color: #503811;
  filter: none;
  box-shadow:
    inset 0 1px 0 #ffffff,
    0 3px 0 #b89555,
    0 9px 16px rgba(102, 76, 31, .15);
  transform: translateY(-1px);
}

.operation-command-band .downloads a:active,
.operation-command-band .actions button:active,
.operation-command-band .operation-command-group .downloads a:active,
.operation-command-band .operation-command-group .actions button:active,
.detail-side-section .operation-command-band .downloads a:active,
.detail-side-section .operation-command-band .actions button:active,
.detail-side-section .operation-command-band .operation-command-group .downloads a:active,
.detail-side-section .operation-command-band .operation-command-group .actions button:active,
.old-menu-cell .operation-command-band .downloads a:active,
.old-menu-cell .operation-command-band .actions button:active,
.old-menu-cell .operation-command-band .operation-command-group .downloads a:active,
.old-menu-cell .operation-command-band .operation-command-group .actions button:active {
  box-shadow:
    inset 0 2px 4px rgba(102, 76, 31, .12),
    0 1px 0 #b89555,
    0 4px 8px rgba(102, 76, 31, .10);
  transform: translateY(1px);
}

.timeline-history-block {
  display: none;
  border-bottom: 1px solid #d4e0ea;
  margin-bottom: 6px;
  padding-bottom: 6px;
}

.compact-timeline.is-expanded .timeline-history-block {
  display: block;
}

.compact-timeline-list,
.timeline-history-block {
  width: 100%;
}

.timeline-date-group {
  display: grid;
  grid-template-columns: 126px minmax(0, 1fr);
  gap: 12px;
  padding: 4px 8px 4px 2px;
}

.timeline-date-group + .timeline-date-group {
  border-top: 1px solid #dfe8f0;
}

.timeline-date-group > header {
  display: flex;
  justify-content: flex-end;
  padding-top: 10px;
}

.timeline-date-group > header time {
  color: #526c83;
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}

.timeline-date-events {
  position: relative;
  display: grid;
  gap: 3px;
  min-width: 0;
}

.compact-timeline .timeline-date-events .timeline-item {
  grid-template-columns: 54px minmax(0, 1fr);
  gap: 10px;
  min-height: 36px;
  margin: 0;
  border: 0;
  border-bottom: 1px solid #e1e8ef;
  border-radius: 0;
  background: transparent;
  padding: 6px 9px 6px 17px;
  box-shadow: none;
}

.compact-timeline .timeline-date-events .timeline-item:last-child {
  border-bottom: 0;
}

.compact-timeline .timeline-date-events .timeline-item::before {
  top: 13px;
  left: 2px;
  width: 6px;
  height: 6px;
}

.compact-timeline .timeline-date-events .timeline-item::after {
  top: 21px;
  bottom: -10px;
  left: 5px;
}

.compact-timeline .timeline-date-events .timeline-item > time {
  padding-top: 1px;
  color: #6d7f91;
  font-size: 12px;
  font-weight: 700;
}

.timeline-ship-departed-date {
  color: #c83d3d;
  font-weight: 800;
}

.timeline-subscription {
  display: inline;
}

.timeline-subscription > button {
  display: inline-flex;
  align-items: center;
  min-height: 21px;
  margin: 0 0 0 6px;
  padding: 0 7px;
  border: 1px solid #b4c9dc;
  border-radius: 999px;
  background: #f7fbfe;
  color: #2f648e;
  font: inherit;
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
  vertical-align: 1px;
  transition: border-color 160ms ease, background-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.timeline-subscription > button:hover,
.timeline-subscription > button:focus-visible {
  border-color: #6e9fca;
  background: #edf6fc;
  box-shadow: 0 2px 5px rgba(48, 98, 142, .15);
  outline: 0;
  transform: translateY(-1px);
}

.timeline-subscription-list {
  display: none;
  width: min(100%, 560px);
  margin: 6px 0 1px 10px;
  padding: 1px 0 1px 2px;
  background: transparent;
  color: #405b75;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.45;
}

.timeline-subscription-item {
  position: relative;
  display: block;
  min-height: 29px;
  padding: 5px 10px 5px 21px;
}

.timeline-subscription-item::before {
  position: absolute;
  z-index: 1;
  top: 10px;
  left: 3px;
  width: 7px;
  height: 7px;
  border: 2px solid #f8fbfe;
  border-radius: 50%;
  background: #4e82b5;
  box-shadow: 0 0 0 1px #93b5d3;
  content: "";
}

.timeline-subscription-item::after {
  position: absolute;
  top: 18px;
  bottom: -1px;
  left: 7px;
  width: 1px;
  background: #c9dbea;
  content: "";
}

.timeline-subscription-item:last-child::after {
  display: none;
}

.timeline-subscription.is-expanded .timeline-subscription-list {
  display: block;
}

.compact-timeline .timeline-date-events .timeline-item > div {
  min-width: 0;
  color: #243a50;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.55;
  overflow-wrap: anywhere;
}

.timeline-photo-pill {
  display: inline-flex;
  align-items: center;
  min-height: 25px;
  margin: 4px 0 0 8px;
  padding: 0 10px;
  border: 1px solid #a6c0d3;
  border-radius: 999px;
  background: linear-gradient(180deg, #ffffff 0%, #edf5fa 100%);
  color: #285b7e;
  font-size: 12px;
  font-weight: 800;
  line-height: 23px;
  text-decoration: none;
  vertical-align: middle;
  white-space: nowrap;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.95), 0 1px 2px rgba(43,80,106,.12);
  transition: border-color .15s ease, background .15s ease, color .15s ease, transform .15s ease;
}

.timeline-photo-pill:hover {
  border-color: #729fbd;
  background: linear-gradient(180deg, #ffffff 0%, #e4f1f8 100%);
  color: #1f4e70;
  transform: translateY(-1px);
}

.detail-download-link.doc-bill-photo {
  border-color: #5d91ad;
  border-top-color: #8fb8cc;
  border-bottom-color: #447991;
  background: linear-gradient(180deg, #edf8fc 0%, #d7edf7 52%, #c3e1ef 100%);
  color: #205775;
  text-shadow: 0 1px 0 rgba(255,255,255,.72);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.86), inset 0 -1px 0 rgba(55,112,140,.12), 0 2px 0 #82b0c6, 0 7px 13px rgba(37,91,118,.14);
}

.detail-download-link.doc-bill-photo:hover {
  border-color: #427f9e;
  border-top-color: #a4c8d8;
  border-bottom-color: #326c88;
  background: linear-gradient(180deg, #f8fdff 0%, #dff1f8 52%, #c8e7f2 100%);
  color: #174967;
}

.compact-timeline .timeline-date-events .timeline-client-item,
.compact-timeline .timeline-date-events .timeline-client-sub-item {
  margin: 3px 0 3px 10px;
  border: 1px solid #ead5aa;
  border-left: 3px solid #c49336;
  border-radius: 4px;
  background: #fffaf0;
  box-shadow: inset 0 1px 0 #ffffff;
}

.compact-timeline .timeline-date-events .timeline-client-item::before,
.compact-timeline .timeline-date-events .timeline-client-sub-item::before {
  left: -9px;
  background: #b98216;
}

.compact-timeline .timeline-date-events .timeline-client-item::after,
.compact-timeline .timeline-date-events .timeline-client-sub-item::after {
  left: -6px;
  background: #e3c989;
}

.timeline-toggle-button {
  min-width: 166px;
  margin-top: 9px;
}

@media (max-width: 900px) {
  .detail-latest-summary {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .detail-latest-summary > time {
    justify-self: start;
  }

  .detail-latest-summary > strong {
    grid-column: 1 / -1;
  }

  .operation-command-band {
    grid-template-columns: 1fr;
  }

  .operation-command-group {
    border-right: 0;
  }

  .timeline-date-group {
    grid-template-columns: 1fr;
    gap: 2px;
  }

  .timeline-date-group > header {
    justify-content: flex-start;
    padding: 5px 0 0 17px;
  }
}

.detail-section {
  margin-top: 12px;
}

.detail-section h2 {
  height: 30px;
  display: flex;
  align-items: center;
  margin: 0;
  padding: 0 10px;
  background: var(--blue);
  color: #fff;
  font-size: 14px;
}

.field-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-left: 1px solid var(--line);
  border-top: 1px solid var(--line);
}

.field-grid div {
  min-height: 64px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 8px;
  background: #fff;
}

.field-grid span {
  display: block;
  color: var(--muted);
  font-size: 12px;
  margin-bottom: 5px;
}

.field-grid strong {
  font-size: 14px;
  line-height: 1.4;
}

.factory-list {
  border: 1px solid var(--line);
  border-top: 0;
}

.factory-card {
  min-height: 42px;
  display: grid;
  grid-template-columns: 170px 1fr 120px 100px;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-top: 1px solid var(--line-soft);
}

.factory-card:first-child {
  border-top: 0;
}

.actions,
.downloads {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  border: 1px solid var(--line);
  border-top: 0;
  padding: 10px;
}

.actions {
  display: block;
}

.old-menu-cell {
  padding: 10px 12px !important;
}

.operation-menu {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  width: 100%;
  align-items: stretch;
  grid-auto-rows: minmax(128px, auto);
}

.operation-menu-block {
  min-height: 128px;
  border: 1px solid #d4dee8;
  border-radius: 6px;
  background: linear-gradient(180deg, #ffffff 0%, #f8fbfd 100%);
  padding: 9px 10px 10px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9);
}

.operation-menu-download {
  border-color: #e1c887;
  background: linear-gradient(180deg, #fffdf7 0%, #fff8e8 100%);
}

.operation-menu-urge {
  border-color: #e1c887;
  background: linear-gradient(180deg, #fffdf7 0%, #fff8e8 100%);
}

.operation-menu-request {
  border-color: #cdddeb;
  background: linear-gradient(180deg, #ffffff 0%, #f7fbff 100%);
}

.operation-menu-notice {
  border-color: #cfe1e7;
  background: linear-gradient(180deg, #ffffff 0%, #f6fbfc 100%);
}

.operation-menu-title {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  margin-bottom: 7px;
  padding-left: 9px;
  border-left: 3px solid #3b6fa9;
  color: #486277;
  font-size: 13px;
  font-weight: 900;
  line-height: 1.2;
}

.operation-menu-download .operation-menu-title,
.operation-menu-urge .operation-menu-title {
  border-left-color: #245b93;
  color: #1d4e82;
}

.operation-menu-notice .operation-menu-title {
  border-left-color: #558ca8;
}

.operation-menu .downloads,
.operation-menu .actions {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  border: 0;
  padding: 0;
}

.operation-menu .downloads a,
.operation-menu .actions button {
  width: 168px;
  min-height: 36px;
  border-color: #245b93;
  border-bottom-color: #173f6a;
  background: linear-gradient(180deg, #4f83bd 0%, #3472ad 48%, #265f99 100%);
  color: #ffffff;
  justify-content: center;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.operation-menu .downloads a:hover,
.operation-menu .actions button:hover {
  border-color: #1f5185;
  border-bottom-color: #15375d;
  background: linear-gradient(180deg, #5b8fc7 0%, #3f7db8 48%, #2c67a0 100%);
  color: #ffffff;
  filter: none;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .32), 0 4px 0 #1d4b7b, 0 14px 24px rgba(37, 87, 143, .26);
  transform: translateY(-2px);
}

.operation-menu .downloads a:active,
.operation-menu .actions button:active {
  box-shadow: inset 0 2px 6px rgba(12, 47, 84, .25), 0 1px 0 #1e4f85, 0 5px 10px rgba(37, 87, 143, .18);
  transform: translateY(1px);
}

.action-groups {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 10px;
  width: 100%;
}

.action-group {
  border: 1px solid #d4dee8;
  border-radius: 6px;
  background: linear-gradient(180deg, #ffffff 0%, #f8fbfd 100%);
  padding: 9px 10px 10px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9);
}

.action-group-title {
  display: inline-flex;
  align-items: center;
  min-height: 20px;
  margin-bottom: 7px;
  padding-left: 9px;
  border-left: 3px solid #3b6fa9;
  color: #486277;
  font-size: 12px;
  font-weight: 900;
  line-height: 1.2;
}

.action-group-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.action-group-urge {
  border-color: #e1c887;
  background: linear-gradient(180deg, #fffdf7 0%, #fff8e8 100%);
}

.action-group-urge .action-group-title {
  border-left-color: #245b93;
  color: #1d4e82;
}

.action-group-notice .action-group-title {
  border-left-color: #558ca8;
}

.action-group-service .action-group-title,
.action-group-other .action-group-title {
  border-left-color: #8798a8;
}

.actions button,
.downloads a {
  min-height: 34px;
  border: 1px solid #245b93;
  border-bottom-color: #173f6a;
  border-radius: 5px;
  background: linear-gradient(180deg, #4f83bd 0%, #3472ad 48%, #265f99 100%);
  color: #ffffff;
  padding: 0 12px;
  font-weight: 800;
  text-decoration: none;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28), 0 3px 0 #1e4f85, 0 11px 20px rgba(37, 87, 143, .22);
  transition: transform .16s ease, box-shadow .16s ease, filter .16s ease, background .16s ease, border-color .16s ease;
}

.actions button {
  cursor: pointer;
}

.actions button[data-urge="true"] {
  border-color: #245b93;
  border-bottom-color: #173f6a;
  background: linear-gradient(180deg, #4f83bd 0%, #3472ad 48%, #265f99 100%);
  color: #ffffff;
}

.actions button:hover,
.downloads a:hover {
  border-color: #1f5185;
  background: linear-gradient(180deg, #5b8fc7 0%, #3f7db8 48%, #2c67a0 100%);
  filter: none;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .32), 0 4px 0 #1d4b7b, 0 14px 24px rgba(37, 87, 143, .26);
  transform: translateY(-2px);
}

.actions button:active,
.downloads a:active {
  box-shadow: inset 0 2px 6px rgba(12, 47, 84, .25), 0 1px 0 #1e4f85, 0 5px 10px rgba(37, 87, 143, .18);
  transform: translateY(1px);
}

.downloads a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.actions button.disabled {
  background: #f3f5f7;
  color: #7d8791;
  border-color: #d5dde5;
  cursor: default;
}

.actions button small {
  display: inline-block;
  margin-left: 6px;
  color: #9a621c;
  font-size: 11px;
  font-weight: 800;
}

.action-notice {
  position: fixed;
  z-index: 140;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background:
    linear-gradient(rgba(232, 239, 247, .22), rgba(208, 220, 233, .32)),
    rgba(16, 29, 45, .46);
  backdrop-filter: blur(3px);
  color: #203852;
  font-weight: 800;
  line-height: 1.55;
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease;
}

.action-notice-card {
  position: relative;
  width: min(620px, 100%);
  border: 1px solid #8faac2;
  border-left: 6px solid #2f65a7;
  border-radius: 8px;
  background:
    linear-gradient(90deg, rgba(47, 101, 167, .08), rgba(255, 255, 255, .96)),
    #f8fbff;
  padding: 24px 28px 24px 26px;
  text-align: left;
  box-shadow:
    0 30px 76px rgba(14, 29, 46, .36),
    0 0 0 6px rgba(255, 255, 255, .50),
    inset 0 1px 0 rgba(255, 255, 255, .96);
  transform: translateY(8px);
  transition: transform .18s ease;
}

.action-notice-card button {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 30px;
  height: 30px;
  border: 1px solid #bfd0df;
  border-radius: 4px;
  background: linear-gradient(#fff, #eef4f8);
  color: #617389;
  font-size: 19px;
  line-height: 1;
  cursor: pointer;
}

.action-notice-card strong {
  display: block;
  padding-right: 34px;
  color: #1e3854;
  font-size: 22px;
  font-weight: 900;
  line-height: 1.35;
}

.action-notice-card span {
  display: block;
  margin-top: 7px;
  color: #5d6f84;
  font-size: 14px;
  font-weight: 800;
}

.action-notice.success .action-notice-card {
  border-color: #8fafc2;
  border-left-color: #2f65a7;
}

.action-notice.error .action-notice-card {
  border-color: #c9a2a2;
  border-left-color: #a75757;
  background:
    linear-gradient(90deg, rgba(167, 87, 87, .08), rgba(255, 255, 255, .96)),
    #fffafa;
}

.action-notice.error .action-notice-card strong {
  color: #6f2f2f;
}

.action-notice.show {
  opacity: 1;
  pointer-events: auto;
}

.action-notice.show .action-notice-card {
  transform: translateY(0);
}

.action-modal-backdrop {
  position: fixed;
  z-index: 120;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
  background:
    linear-gradient(rgba(232, 239, 247, .22), rgba(208, 220, 233, .32)),
    rgba(16, 29, 45, .55);
  backdrop-filter: blur(3px);
}

.action-modal {
  position: relative;
  width: min(760px, 100%);
  max-height: calc(100vh - 36px);
  display: flex;
  flex-direction: column;
  border: 1px solid #7894ad;
  border-radius: 8px;
  background: linear-gradient(#ffffff, #f8fbfd);
  box-shadow:
    0 34px 86px rgba(14, 29, 46, .42),
    0 13px 28px rgba(28, 48, 68, .22),
    0 0 0 6px rgba(255, 255, 255, .50),
    inset 0 1px 0 rgba(255, 255, 255, .96);
  overflow: hidden;
}

.action-modal::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 5px;
  background: linear-gradient(90deg, #254f86, #3670ad 56%, #86a9c9);
}

.action-modal header {
  min-height: 64px;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 18px 14px;
  border-bottom: 1px solid #cbd9e6;
  background:
    linear-gradient(90deg, rgba(47, 95, 159, .10), rgba(255, 255, 255, 0) 58%),
    linear-gradient(#fbfdff, #eef5fa);
  color: #1f354c;
}

.action-modal header strong {
  display: block;
  margin-top: 3px;
  font-size: 18px;
  line-height: 1.25;
  letter-spacing: 0;
}

.action-modal-order-no {
  display: block;
  margin-top: 5px;
  color: #667b90;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.2;
}

.action-modal-eyebrow {
  display: block;
  color: #6b7d90;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0;
}

.action-modal header button {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border: 1px solid #b8c9d8;
  border-radius: 4px;
  background: linear-gradient(#ffffff, #edf3f8);
  color: #5c7085;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(28, 46, 64, .10);
}

.action-modal header button:hover {
  border-color: #8fa8bf;
  color: #263e56;
  background: #fff;
}

.action-modal-body {
  display: grid;
  gap: 13px;
  padding: 18px;
  overflow: auto;
  background:
    linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
  color: #25384d;
}

.action-modal-body p {
  margin: 0;
  font-weight: 800;
  line-height: 1.6;
}

.action-modal-body label {
  display: grid;
  gap: 6px;
  font-size: 13px;
  font-weight: 800;
}

.action-modal-body input,
.action-modal-body select {
  height: 38px;
  border: 1px solid #b6c7d6;
  border-radius: 4px;
  background: #fbfdff;
  color: #21354c;
  padding: 0 11px;
  box-shadow: inset 0 1px 2px rgba(26, 44, 62, .05);
}

.action-modal-body input:focus,
.action-modal-body select:focus {
  outline: 2px solid rgba(47, 95, 159, .18);
  border-color: #6f94bd;
  background: #fff;
}

.action-modal-arrival {
  width: min(680px, 100%);
}

.action-modal-arrival .action-modal-body {
  gap: 0;
  padding: 20px 22px;
  background: #fbfdff;
}

.arrival-reminder-layout {
  display: grid;
  gap: 16px;
}

.arrival-reminder-guidance {
  display: grid;
  gap: 5px;
  border: 1px solid #c9d9e7;
  border-left: 4px solid #3f6f9f;
  border-radius: 5px;
  background: linear-gradient(90deg, #f0f6fb, #f9fcfe 72%);
  padding: 11px 13px;
}

.arrival-reminder-guidance span {
  color: #6b7e92;
  font-size: 11px;
  font-weight: 800;
}

.arrival-reminder-guidance strong {
  color: #243b52;
  font-size: 14px;
  font-weight: 800;
  line-height: 1.55;
}

.arrival-reminder-primary {
  border-top: 1px solid #d7e2eb;
  border-bottom: 1px solid #d7e2eb;
  padding: 2px 0;
}

.arrival-reminder-primary dl,
.arrival-reminder-order dl,
.arrival-reminder-recipients dl {
  margin: 0;
}

.arrival-reminder-primary dl > div {
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr);
  align-items: center;
  min-height: 48px;
  border-bottom: 1px dashed #dbe5ed;
}

.arrival-reminder-primary dl > div:last-child {
  border-bottom: 0;
}

.arrival-reminder-primary dt,
.arrival-reminder-order dt,
.arrival-reminder-recipients dt {
  color: #6a7d91;
  font-size: 12px;
  font-weight: 800;
}

.arrival-reminder-primary dd,
.arrival-reminder-order dd,
.arrival-reminder-recipients dd {
  min-width: 0;
  margin: 0;
  overflow-wrap: anywhere;
  color: #20364d;
  font-size: 14px;
  font-weight: 800;
  line-height: 1.45;
}

.arrival-reminder-agent {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  border: 1px solid #a9bfd2;
  border-radius: 999px;
  background: linear-gradient(#ffffff, #edf4f9);
  padding: 4px 12px;
  color: #28547f;
  box-shadow: 0 2px 5px rgba(37, 76, 111, .12), inset 0 1px 0 #fff;
}

.arrival-reminder-order {
  display: grid;
  gap: 8px;
  border: 1px solid #d5e1eb;
  border-radius: 6px;
  background: #fff;
  padding: 12px 13px 13px;
  box-shadow: 0 3px 10px rgba(34, 58, 80, .05);
}

.arrival-reminder-order h3 {
  margin: 0;
  color: #335f8d;
  font-size: 12px;
  font-weight: 900;
}

.arrival-reminder-order dl {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 22px;
}

.arrival-reminder-order dl > div {
  display: grid;
  grid-template-columns: 86px minmax(0, 1fr);
  align-items: baseline;
  min-height: 35px;
  border-top: 1px solid #edf2f6;
  padding: 8px 0 5px;
}

.arrival-reminder-recipients {
  border-top: 1px solid #d9e3eb;
  padding-top: 11px;
}

.arrival-reminder-recipients summary {
  width: fit-content;
  color: #376792;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
  user-select: none;
}

.arrival-reminder-recipients dl {
  display: grid;
  gap: 6px;
  margin-top: 10px;
  border-radius: 5px;
  background: #f2f6f9;
  padding: 10px 12px;
}

.arrival-reminder-recipients dl > div {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 8px;
}

.arrival-reminder-recipients dd {
  font-size: 12px;
  font-weight: 700;
}

.action-modal-arrival footer button.primary {
  min-width: 164px;
}

.action-radio,
.action-checks {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 16px;
}

.action-radio label,
.action-checks label {
  display: inline-flex;
  grid-template-columns: none;
  align-items: center;
  gap: 6px;
  min-height: 34px;
  border: 1px solid #d7e2eb;
  border-radius: 5px;
  background: #f8fbfd;
  padding: 0 10px;
}

.action-radio input,
.action-checks input {
  height: auto;
}

.subscribe-card {
  gap: 16px;
}

.subscribe-intro {
  display: grid;
  gap: 4px;
  border: 1px solid #d6e2ec;
  border-radius: 7px;
  background:
    linear-gradient(90deg, rgba(47, 95, 159, .09), rgba(255, 255, 255, .90)),
    #ffffff;
  padding: 12px 14px;
}

.subscribe-intro b {
  color: #203852;
  font-size: 14px;
  font-weight: 900;
  line-height: 1.35;
}

.subscribe-intro span {
  color: #607187;
  font-size: 12px;
  font-weight: 800;
}

.subscribe-timeline {
  position: relative;
  display: grid;
  gap: 9px;
  padding: 2px 0 2px 1px;
}

.subscribe-timeline::before {
  content: "";
  position: absolute;
  top: 22px;
  bottom: 22px;
  left: 22px;
  width: 2px;
  background: linear-gradient(#9fb8cf, #d9e4ee);
  border-radius: 999px;
}

.subscribe-option {
  position: relative;
  display: grid !important;
  grid-template-columns: 44px minmax(0, 1fr);
  align-items: stretch !important;
  gap: 12px !important;
  min-height: 72px;
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: 0 !important;
  cursor: pointer;
  box-shadow: none;
  transition: transform .16s ease;
}

.subscribe-node {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  padding-top: 12px;
}

.subscribe-option input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.subscribe-step {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1px solid #9fb5c8;
  border-radius: 50%;
  background:
    linear-gradient(#ffffff, #eef4f8);
  color: #40576f;
  font-size: 13px;
  font-weight: 900;
  box-shadow:
    0 4px 10px rgba(32, 56, 82, .11),
    0 0 0 5px rgba(255, 255, 255, .92);
  transition:
    transform .16s ease,
    border-color .16s ease,
    background .16s ease,
    color .16s ease,
    box-shadow .16s ease;
}

.subscribe-check {
  position: absolute;
  right: 1px;
  top: 37px;
  display: grid;
  place-items: center;
  width: 16px;
  height: 16px;
  border: 1px solid #b8c8d6;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 2px 5px rgba(28, 46, 64, .12);
  transition:
    transform .16s ease,
    border-color .16s ease,
    background .16s ease;
}

.subscribe-check::after {
  content: "";
  width: 5px;
  height: 8px;
  border-right: 2px solid transparent;
  border-bottom: 2px solid transparent;
  transform: rotate(38deg) translateY(-1px);
}

.subscribe-option input:checked + .subscribe-node .subscribe-step {
  border-color: #2f5f9f;
  background: linear-gradient(#4f83bd, #2f5f9f);
  color: #ffffff;
  transform: scale(1.08);
  box-shadow:
    0 10px 22px rgba(47, 95, 159, .34),
    0 0 0 6px rgba(217, 233, 247, .98),
    inset 0 1px 0 rgba(255, 255, 255, .25);
}

.subscribe-option input:checked + .subscribe-node .subscribe-check {
  border-color: #2f5f9f;
  background: #ffffff;
  transform: scale(1.08);
}

.subscribe-option input:checked + .subscribe-node .subscribe-check::after {
  border-color: #2f5f9f;
}

.subscribe-copy {
  position: relative;
  display: grid;
  align-content: center;
  gap: 5px;
  min-width: 0;
  border: 1px solid #cfdde8;
  border-radius: 8px;
  background:
    linear-gradient(180deg, #ffffff, #f7fafc);
  padding: 13px 15px;
  box-shadow:
    0 7px 18px rgba(32, 56, 82, .08),
    inset 0 1px 0 rgba(255, 255, 255, .95);
  transition:
    transform .16s ease,
    border-color .16s ease,
    background .16s ease,
    box-shadow .16s ease;
}

.subscribe-copy::before {
  content: "";
  position: absolute;
  left: -7px;
  top: 24px;
  width: 12px;
  height: 12px;
  border-left: 1px solid #cfdde8;
  border-bottom: 1px solid #cfdde8;
  background: #ffffff;
  transform: rotate(45deg);
}

.subscribe-option:hover .subscribe-copy {
  border-color: #9fb8cf;
  background:
    linear-gradient(90deg, rgba(47, 95, 159, .06), rgba(255, 255, 255, .95)),
    #ffffff;
}

.subscribe-option input:checked ~ .subscribe-copy {
  transform: translateX(4px);
  border-color: #2f5f9f;
  background:
    linear-gradient(90deg, rgba(47, 95, 159, .16), rgba(255, 255, 255, .96)),
    #ffffff;
  box-shadow:
    0 13px 28px rgba(47, 95, 159, .20),
    inset 7px 0 0 #2f5f9f,
    inset 0 1px 0 rgba(255, 255, 255, .96);
}

.subscribe-status {
  position: absolute;
  top: 10px;
  right: 12px;
  display: none;
  border: 1px solid #2f5f9f;
  border-radius: 999px;
  background: #2f5f9f;
  color: #ffffff;
  padding: 2px 9px;
  font-size: 10px;
  font-weight: 900;
  line-height: 1.2;
}

.subscribe-option input:checked ~ .subscribe-copy .subscribe-status {
  display: inline-flex;
}

.subscribe-copy b {
  color: #203852;
  font-size: 14px;
  font-weight: 900;
  line-height: 1.35;
}

.subscribe-option input:checked ~ .subscribe-copy b {
  color: #18324d;
  padding-right: 64px;
}

.subscribe-copy em {
  color: #607187;
  font-size: 12px;
  font-style: normal;
  font-weight: 800;
  line-height: 1.45;
}

.subscribe-option input:checked ~ .subscribe-copy em {
  color: #425d76;
}

.subscribe-option.is-disabled {
  cursor: not-allowed;
  opacity: 1;
}

.subscribe-option.is-disabled .subscribe-step,
.subscribe-option.is-disabled .subscribe-check {
  border-color: #c4d0da;
  background: #e5ebf0;
  color: #8a98a7;
}

.subscribe-option.is-disabled .subscribe-copy {
  border-color: #d9e2ea;
  background: #f1f5f8;
  box-shadow: none;
}

.subscribe-option.is-disabled .subscribe-status {
  display: inline-flex;
  border-color: #c6d1db;
  background: #e4ebf1;
  color: #788898;
}

.subscribe-option.is-disabled .subscribe-copy::before {
  border-color: #d9e2ea;
  background: #f1f5f8;
}

.subscribe-option.is-disabled .subscribe-copy b {
  color: #6f7f8f;
}

.subscribe-option.is-disabled .subscribe-copy em {
  color: #8190a0;
}

.action-modal-body input:disabled {
  border-color: #d9e1e8;
  background: #eef3f7;
  color: #94a3b2;
  cursor: not-allowed;
}

.origin-certificate-editor {
  display: grid;
  gap: 8px;
}

.origin-certificate-head,
.origin-certificate-row {
  display: grid;
  grid-template-columns: minmax(150px, 1.15fr) minmax(92px, .7fr) minmax(180px, 1.45fr) 64px;
  gap: 8px;
  align-items: center;
}

.origin-certificate-head {
  color: #6d7f93;
  font-size: 11px;
  font-weight: 900;
}

.origin-certificate-row {
  border: 1px solid #d8e4ee;
  border-radius: 6px;
  background: #ffffff;
  padding: 8px;
}

.origin-certificate-row select,
.origin-certificate-row input {
  min-width: 0;
}

.origin-certificate-row button,
.origin-add-button {
  height: 34px;
  border: 1px solid #c7d8e6;
  border-radius: 5px;
  background: #f7fafc;
  color: #52677d;
  font-weight: 900;
  cursor: pointer;
}

.origin-certificate-row button:disabled,
.origin-add-button:disabled {
  opacity: .42;
  cursor: not-allowed;
}

.origin-add-button {
  justify-self: start;
  padding: 0 14px;
  color: #2f5f9f;
}

.action-confirm-unified > label,
.client-action-editor > label,
.action-confirm-unified .customs-deadline-field {
  position: relative;
  gap: 8px;
  color: #4c6178;
  font-size: 12px;
  font-weight: 900;
}

.action-confirm-unified > label select,
.action-confirm-unified > label input,
.client-action-editor > label select,
.client-action-editor > label input,
.origin-certificate-row select,
.origin-certificate-row input {
  min-height: 42px;
  border: 1px solid #a9bfd3;
  border-radius: 999px;
  background:
    linear-gradient(180deg, #ffffff 0%, #f1f6fa 100%);
  color: #203852;
  font-size: 14px;
  font-weight: 900;
  box-shadow:
    0 7px 16px rgba(32, 56, 82, .10),
    inset 0 1px 0 rgba(255, 255, 255, .95),
    inset 0 -1px 0 rgba(136, 160, 181, .14);
  transition:
    border-color .16s ease,
    box-shadow .16s ease,
    background .16s ease,
    transform .16s ease;
}

.action-confirm-unified > label select,
.client-action-editor > label select,
.origin-certificate-row select {
  height: 42px;
}

.action-confirm-unified > label select,
.client-action-editor > label select,
.origin-certificate-row select {
  cursor: pointer;
}

.action-confirm-unified > label select:hover,
.action-confirm-unified > label input:hover,
.client-action-editor > label select:hover,
.client-action-editor > label input:hover,
.origin-certificate-row select:hover,
.origin-certificate-row input:hover {
  border-color: #6f94bd;
  background:
    linear-gradient(180deg, #ffffff 0%, #eaf3fb 100%);
  box-shadow:
    0 10px 22px rgba(47, 95, 159, .15),
    inset 0 1px 0 rgba(255, 255, 255, .98),
    inset 0 -1px 0 rgba(111, 148, 189, .18);
}

.action-confirm-unified > label select:focus,
.action-confirm-unified > label input:focus,
.client-action-editor > label select:focus,
.client-action-editor > label input:focus,
.origin-certificate-row select:focus,
.origin-certificate-row input:focus {
  outline: none;
  border-color: #2f5f9f;
  background: #ffffff;
  box-shadow:
    0 0 0 4px rgba(47, 95, 159, .13),
    0 12px 24px rgba(47, 95, 159, .18),
    inset 0 1px 0 rgba(255, 255, 255, .98);
}

.customs-time-options {
  gap: 9px;
}

.customs-time-options label {
  min-width: 92px;
  justify-content: center;
  min-height: 40px;
  border: 1px solid #a9bfd3;
  border-radius: 999px;
  background:
    linear-gradient(180deg, #ffffff, #edf4f9);
  color: #304861;
  font-size: 13px;
  font-weight: 900;
  cursor: pointer;
  box-shadow:
    0 7px 15px rgba(32, 56, 82, .09),
    inset 0 1px 0 rgba(255, 255, 255, .95);
  transition:
    transform .16s ease,
    border-color .16s ease,
    background .16s ease,
    color .16s ease,
    box-shadow .16s ease;
}

.customs-time-options label:hover {
  transform: translateY(-1px);
  border-color: #6f94bd;
  box-shadow:
    0 11px 21px rgba(47, 95, 159, .16),
    inset 0 1px 0 rgba(255, 255, 255, .98);
}

.customs-time-options label:has(input:checked) {
  border-color: #2f5f9f;
  background:
    linear-gradient(180deg, #4f83bd, #2f5f9f);
  color: #ffffff;
  box-shadow:
    0 12px 24px rgba(47, 95, 159, .25),
    inset 0 1px 0 rgba(255, 255, 255, .24);
}

.customs-time-options input {
  width: 0;
  height: 0;
  margin: 0;
  opacity: 0;
}

.action-modal-customs {
  width: min(700px, 100%);
}

.action-modal-customs .action-modal-body {
  gap: 0;
  padding: 20px 22px;
  background: #fbfdff;
}

.customs-request-layout {
  display: grid;
  gap: 15px;
}

.customs-request-guidance {
  display: grid;
  gap: 5px;
  border: 1px solid #c9d9e7;
  border-left: 4px solid #3f6f9f;
  border-radius: 5px;
  background: linear-gradient(90deg, #f0f6fb, #f9fcfe 72%);
  padding: 11px 13px;
}

.customs-request-guidance span {
  color: #6b7e92;
  font-size: 11px;
  font-weight: 800;
}

.customs-request-guidance strong {
  color: #243b52;
  font-size: 14px;
  font-weight: 800;
  line-height: 1.55;
}

.customs-request-editor {
  display: grid;
  gap: 11px;
  border-top: 1px solid #d7e2eb;
  border-bottom: 1px solid #d7e2eb;
  padding: 12px 0 14px;
}

.customs-request-editor > h3,
.customs-request-order > h3 {
  margin: 0;
  color: #335f8d;
  font-size: 12px;
  font-weight: 900;
}

.customs-request-factory {
  display: grid !important;
  grid-template-columns: 102px minmax(0, 1fr);
  align-items: center;
  gap: 12px !important;
  color: #61758a;
  font-size: 12px !important;
  font-weight: 800 !important;
}

.customs-request-factory select {
  width: 100%;
  height: 42px;
  border: 1px solid #a9bfd2;
  border-radius: 6px;
  background: linear-gradient(#ffffff, #edf4f9);
  color: #244561;
  padding: 0 12px;
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 3px 8px rgba(37, 76, 111, .09), inset 0 1px 0 #fff;
}

.customs-request-deadline {
  display: grid;
  gap: 10px;
  border: 1px solid #d5e1eb;
  border-radius: 6px;
  background: #ffffff;
  padding: 12px 13px 13px;
  box-shadow: 0 3px 10px rgba(34, 58, 80, .05);
}

.customs-request-deadline-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
}

.customs-request-deadline-head strong {
  color: #314f6c;
  font-size: 13px;
  font-weight: 900;
}

.customs-request-deadline-head span {
  color: #728397;
  font-size: 11px;
  font-weight: 700;
}

.customs-request-deadline-controls {
  display: grid;
  grid-template-columns: minmax(190px, .8fr) minmax(286px, 1.2fr);
  align-items: end;
  gap: 12px;
}

.customs-request-deadline .customs-deadline-field {
  display: grid;
  gap: 6px;
  color: #61758a;
  font-size: 11px;
  font-weight: 800;
}

.customs-request-deadline .customs-deadline-field input {
  width: 100%;
  height: 40px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 800;
}

.customs-deadline-control {
  display: block;
  width: 100%;
  min-height: 40px;
}

.customs-deadline-immediate-text {
  display: none;
  width: 100%;
  min-height: 40px;
  align-items: center;
  padding: 0 13px;
  border: 1px solid #b8c9d8;
  border-radius: 6px;
  background: linear-gradient(180deg, #ffffff, #f2f6f9);
  color: #405a73;
  font-size: 13px;
  font-weight: 800;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .98);
}

.customs-deadline-field.is-immediate input {
  display: none;
}

.customs-deadline-field.is-immediate .customs-deadline-immediate-text {
  display: flex;
}

.customs-request-deadline .customs-time-options {
  display: grid;
  grid-template-columns: repeat(3, minmax(78px, 1fr));
  gap: 8px;
}

.customs-request-deadline .customs-time-options label {
  min-width: 0;
  width: 100%;
  min-height: 40px;
  border-radius: 6px;
  box-shadow: 0 3px 8px rgba(32, 56, 82, .08), inset 0 1px 0 rgba(255, 255, 255, .95);
}

.customs-request-order {
  display: grid;
  gap: 8px;
  border: 1px solid #d5e1eb;
  border-radius: 6px;
  background: #fff;
  padding: 12px 13px 13px;
  box-shadow: 0 3px 10px rgba(34, 58, 80, .05);
}

.customs-request-order dl,
.customs-request-recipients dl {
  margin: 0;
}

.customs-request-order dl {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 22px;
}

.customs-request-order dl > div {
  display: grid;
  grid-template-columns: 86px minmax(0, 1fr);
  align-items: baseline;
  min-height: 35px;
  border-top: 1px solid #edf2f6;
  padding: 8px 0 5px;
}

.customs-request-order dt,
.customs-request-recipients dt {
  color: #6a7d91;
  font-size: 12px;
  font-weight: 800;
}

.customs-request-order dd,
.customs-request-recipients dd {
  min-width: 0;
  margin: 0;
  overflow-wrap: anywhere;
  color: #20364d;
  font-size: 14px;
  font-weight: 800;
  line-height: 1.45;
}

.customs-request-recipients {
  border-top: 1px solid #d9e3eb;
  padding-top: 11px;
}

.customs-request-recipients summary {
  width: fit-content;
  color: #376792;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
  user-select: none;
}

.customs-request-recipients dl {
  display: grid;
  gap: 6px;
  margin-top: 10px;
  border-radius: 5px;
  background: #f2f6f9;
  padding: 10px 12px;
}

.customs-request-recipients dl > div {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 8px;
}

.customs-request-recipients dd {
  font-size: 12px;
  font-weight: 700;
}

.action-modal-customs footer button.primary {
  min-width: 164px;
}

.action-modal-unified {
  width: min(700px, 100%);
}

.action-modal-unified .action-modal-body {
  gap: 0;
  padding: 20px 22px;
  background: #fbfdff;
}

.action-modal-unified footer button.primary {
  min-width: 164px;
}

.client-action-layout {
  display: grid;
  gap: 15px;
}

.client-action-guidance {
  display: grid;
  gap: 5px;
  border: 1px solid #c9d9e7;
  border-left: 4px solid #3f6f9f;
  border-radius: 5px;
  background: linear-gradient(90deg, #f0f6fb, #f9fcfe 72%);
  padding: 11px 13px;
}

.client-action-guidance span {
  color: #6b7e92;
  font-size: 11px;
  font-weight: 800;
}

.client-action-guidance strong {
  color: #243b52;
  font-size: 14px;
  font-weight: 800;
  line-height: 1.55;
}

.client-action-guidance strong [data-customs-recipient-name] {
  color: inherit;
  font-size: inherit;
  font-weight: inherit;
}

.client-action-editor {
  display: grid;
  gap: 11px;
  border-top: 1px solid #d7e2eb;
  border-bottom: 1px solid #d7e2eb;
  padding: 12px 0 14px;
}

.client-action-editor > h3,
.client-action-order > h3 {
  margin: 0;
  color: #335f8d;
  font-size: 12px;
  font-weight: 900;
}

.client-action-primary,
.client-action-order dl,
.client-action-recipients dl {
  margin: 0;
}

.client-action-primary {
  display: grid;
  border: 1px solid #d5e1eb;
  border-radius: 6px;
  background: #fff;
  padding: 2px 12px;
  box-shadow: 0 3px 10px rgba(34, 58, 80, .05);
}

.client-action-primary > div {
  display: grid;
  grid-template-columns: 108px minmax(0, 1fr);
  align-items: center;
  min-height: 43px;
  border-bottom: 1px dashed #dbe5ed;
}

.client-action-primary > div:last-child {
  border-bottom: 0;
}

.client-action-primary dt,
.client-action-order dt,
.client-action-recipients dt {
  color: #6a7d91;
  font-size: 12px;
  font-weight: 800;
}

.client-action-primary dd,
.client-action-order dd,
.client-action-recipients dd {
  min-width: 0;
  margin: 0;
  overflow-wrap: anywhere;
  color: #20364d;
  font-size: 14px;
  font-weight: 800;
  line-height: 1.45;
}

.client-action-order {
  display: grid;
  gap: 8px;
  border: 1px solid #d5e1eb;
  border-radius: 6px;
  background: #fff;
  padding: 12px 13px 13px;
  box-shadow: 0 3px 10px rgba(34, 58, 80, .05);
}

.client-action-order dl {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 22px;
}

.client-action-order dl > div {
  display: grid;
  grid-template-columns: 86px minmax(0, 1fr);
  align-items: baseline;
  min-height: 35px;
  border-top: 1px solid #edf2f6;
  padding: 8px 0 5px;
}

.client-action-recipients {
  border-top: 1px solid #d9e3eb;
  padding-top: 11px;
}

.client-action-recipients summary {
  width: fit-content;
  color: #376792;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
  user-select: none;
}

.client-action-recipients dl {
  display: grid;
  gap: 6px;
  margin-top: 10px;
  border-radius: 5px;
  background: #f2f6f9;
  padding: 10px 12px;
}

.client-action-recipients dl > div {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 8px;
}

.client-action-recipients dd {
  font-size: 12px;
  font-weight: 700;
}

.client-action-note {
  margin: 0;
  border-left: 3px solid #9bb3c9;
  background: #f3f7fa;
  color: #607187;
  padding: 8px 10px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.55;
}

.client-action-editor > label input,
.client-action-editor > label select,
.client-action-editor .origin-certificate-row,
.client-action-editor .origin-certificate-row input,
.client-action-editor .origin-certificate-row select {
  border-radius: 6px;
}

.client-action-editor .origin-certificate-row {
  box-shadow: 0 3px 10px rgba(34, 58, 80, .05), inset 0 1px 0 rgba(255, 255, 255, .95);
}

.origin-certificate-row {
  border-color: #c7d8e6;
  border-radius: 12px;
  background:
    linear-gradient(180deg, #ffffff, #f7fafc);
  box-shadow:
    0 8px 18px rgba(32, 56, 82, .08),
    inset 0 1px 0 rgba(255, 255, 255, .95);
}

.action-modal-body small {
  color: var(--muted);
  line-height: 1.55;
}

.action-status-card {
  display: grid;
  gap: 8px;
  border: 1px solid #d6e2ec;
  border-left: 4px solid #6f94bd;
  border-radius: 6px;
  background: #f8fbfd;
  padding: 14px 15px;
}

.action-confirm-card {
  position: relative;
  display: grid;
  gap: 12px;
  border: 1px solid #c4d5e3;
  border-radius: 8px;
  background:
    linear-gradient(180deg, #ffffff, #f4f8fb);
  padding: 15px 15px 14px;
  box-shadow:
    0 10px 24px rgba(32, 56, 82, .10),
    inset 0 1px 0 rgba(255, 255, 255, .95);
}

.action-confirm-card::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 5px;
  background: linear-gradient(#2f5f9f, #6f94bd);
}

.action-confirm-badge {
  width: fit-content;
  border: 1px solid #b9cce0;
  border-radius: 999px;
  background: #eef5fb;
  color: #2f5f9f;
  padding: 4px 11px;
  font-size: 11px;
  font-weight: 900;
  line-height: 1;
}

.action-confirm-unified {
  gap: 13px;
}

.action-confirm-headline {
  display: grid;
  gap: 7px;
}

.action-confirm-section {
  display: grid;
  gap: 7px;
  min-width: 0;
}

.action-confirm-section h3 {
  margin: 0;
  color: #2f5f9f;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0;
}

.action-request-box {
  border: 1px solid #d8e4ee;
  border-left: 4px solid #6f94bd;
  border-radius: 7px;
  background: linear-gradient(90deg, rgba(47, 95, 159, .07), rgba(255, 255, 255, .95));
  color: #263b52;
  padding: 10px 12px;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.65;
}

.action-final-confirm {
  border: 1px solid #e3c274;
  border-radius: 7px;
  background:
    linear-gradient(180deg, #fffaf0, #fff3d6);
  color: #775316;
  padding: 10px 12px;
  font-size: 13px;
  font-weight: 900;
  line-height: 1.55;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .88);
}

.action-mail-route {
  display: grid;
  gap: 5px;
  border: 1px solid #c7d8e6;
  border-radius: 6px;
  background:
    linear-gradient(90deg, rgba(47, 95, 159, .08), rgba(255, 255, 255, .88)),
    #ffffff;
  padding: 12px 13px;
}

.action-mail-route span {
  color: #6d7f93;
  font-size: 11px;
  font-weight: 900;
}

.action-mail-route b {
  color: #203852;
  font-size: 16px;
  font-weight: 900;
  line-height: 1.35;
}

.action-mail-route em {
  color: #607187;
  font-size: 12px;
  font-style: normal;
  font-weight: 800;
  line-height: 1.45;
}

.action-status-card strong {
  color: #203852;
  font-size: 15px;
}

.action-confirm-card strong {
  color: #203852;
  font-size: 17px;
}

.bill-date-card {
  gap: 15px;
}

.bill-date-guidance {
  display: grid;
  gap: 8px;
  border: 1px solid #d8e4ee;
  border-radius: 6px;
  background:
    linear-gradient(90deg, rgba(47, 95, 159, .07), rgba(255, 255, 255, .88)),
    #ffffff;
  padding: 12px 13px;
}

.bill-date-guidance p {
  color: #41566d;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.55;
}

.action-status-card p,
.action-confirm-card p {
  color: #42566c;
  font-size: 13px;
  font-weight: 700;
}

.action-confirm-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
}

.action-confirm-summary-two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.action-confirm-summary-unified {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.action-confirm-summary div {
  min-width: 0;
  border: 1px solid #d8e4ee;
  border-radius: 6px;
  background: #ffffff;
  padding: 8px 10px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .90);
}

.action-confirm-summary dt {
  margin: 0 0 5px;
  color: #708196;
  font-size: 11px;
  font-weight: 900;
}

.action-confirm-summary dd {
  margin: 0;
  overflow-wrap: anywhere;
  color: #203852;
  font-size: 14px;
  font-weight: 900;
  line-height: 1.35;
  white-space: normal;
}

.action-modal-note {
  border: 1px solid #d8e4ee;
  border-radius: 6px;
  background: #f7fafc;
  color: #607187;
  padding: 9px 11px;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.55;
}

.action-status-card span {
  width: fit-content;
  border: 1px solid #d8bd72;
  border-radius: 999px;
  background: #fff8e5;
  color: #805d18;
  padding: 3px 10px;
  font-size: 12px;
  font-weight: 900;
}

.action-modal footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  flex: 0 0 auto;
  padding: 13px 18px 15px;
  border-top: 1px solid #d2e0eb;
  background:
    linear-gradient(#f9fbfd, #eef4f8);
}

.action-modal footer button {
  min-width: 112px;
  height: 38px;
  border: 1px solid #b6c5d3;
  border-radius: 4px;
  background: linear-gradient(#fff, #edf3f8);
  color: #33485f;
  font-weight: 900;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(30, 48, 66, .08);
}

.action-modal footer button.primary {
  border-color: var(--blue-dark);
  background: linear-gradient(#467bbd, #2f5f9f);
  color: #fff;
  box-shadow:
    0 3px 8px rgba(47, 95, 159, .24),
    inset 0 1px 0 rgba(255, 255, 255, .22);
}

.action-modal footer button:hover {
  transform: translateY(-1px);
  box-shadow: 0 3px 8px rgba(32, 54, 76, .14);
}

.action-modal footer button.primary:hover {
  box-shadow:
    0 5px 12px rgba(47, 95, 159, .28),
    inset 0 1px 0 rgba(255, 255, 255, .24);
}

@media (max-width: 760px) {
  .action-confirm-summary {
    grid-template-columns: 1fr;
  }

  .subscribe-timeline {
    grid-template-columns: 1fr;
  }

  .action-confirm-summary dd {
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .arrival-reminder-order dl {
    grid-template-columns: 1fr;
  }

  .arrival-reminder-primary dl > div {
    grid-template-columns: 92px minmax(0, 1fr);
  }

  .customs-request-deadline-controls,
  .customs-request-order dl,
  .client-action-order dl {
    grid-template-columns: 1fr;
  }

  .client-action-primary > div {
    grid-template-columns: 92px minmax(0, 1fr);
  }

  .customs-request-factory {
    grid-template-columns: 86px minmax(0, 1fr);
  }

  .customs-request-deadline-head {
    align-items: flex-start;
    flex-direction: column;
    gap: 3px;
  }
}

.legacy-flags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 8px 10px 10px;
  border: 1px solid var(--line);
  border-top: 0;
  background: #fbfcfd;
}

.legacy-flags span {
  min-height: 22px;
  display: inline-flex;
  align-items: center;
  border: 1px solid #d8e1e8;
  border-radius: 3px;
  background: #fff;
  color: var(--muted);
  padding: 0 7px;
  font-size: 12px;
  font-weight: 700;
}

textarea {
  width: 100%;
  min-height: 74px;
  padding: 8px;
  resize: vertical;
  border-radius: 0;
  border-top: 0;
}

.save-btn {
  min-width: 86px;
  margin-top: 8px;
}

.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.timeline {
  display: grid;
  gap: 8px;
  border: 1px solid var(--line);
  border-top: 0;
  background: #fbfdff;
  font-family: "Hiragino Sans", "Yu Gothic", Meiryo, Arial, sans-serif;
  -webkit-font-smoothing: auto;
  text-rendering: auto;
  font-synthesis-weight: auto;
}

.timeline-item {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  gap: 3px;
  min-height: 52px;
  margin: 0 10px 0 0;
  padding: 8px 12px 9px 16px;
  border: 1px solid #d9e4ee;
  border-radius: 6px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(38, 64, 91, 0.06);
}

.timeline-item::before {
  content: "";
  position: absolute;
  left: -12px;
  top: 16px;
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: var(--blue);
  box-shadow: 0 0 0 3px #e8f0f8;
}

.timeline-item::after {
  content: "";
  position: absolute;
  left: -9px;
  top: 26px;
  bottom: -17px;
  width: 1px;
  background: #d6e2ee;
}

.timeline-item:last-child::after {
  display: none;
}

.timeline-client-item {
  margin-left: 18px;
  border-color: #e7ca82;
  border-left: 3px solid #c89122;
  background: #fff7e6;
  box-shadow:
    0 1px 4px rgba(161, 111, 22, .15),
    inset 0 1px 0 rgba(255, 255, 255, .78);
}

.timeline-client-item::before {
  left: -22px;
  width: 6px;
  height: 6px;
  background: #b98216;
  box-shadow: 0 0 0 3px #f7e8c3;
}

.timeline-client-item::after {
  left: -19px;
  background: #e3c989;
}

.timeline-client-sub-item {
  margin-left: 18px;
  border-color: #e7ca82;
  border-left: 3px solid #c89122;
  background: #fff7e6;
  box-shadow: 0 1px 4px rgba(161, 111, 22, .15);
}

.timeline-client-sub-item::before {
  left: -22px;
  width: 6px;
  height: 6px;
  background: #b98216;
  box-shadow: 0 0 0 3px #f7e8c3;
}

.timeline-client-sub-item::after {
  left: -19px;
  background: #e3c989;
}

.timeline-item time {
  display: block;
  font-size: 12px;
  font-weight: 800;
  color: var(--muted);
  white-space: nowrap;
}

.timeline-item div {
  font-size: 13px;
  font-weight: 700;
  line-height: 1.55;
  color: #25384d;
}

.detail-page {
  max-width: 1420px;
  margin: 0 auto;
  padding: 18px 22px 34px;
}

.detail-page-header {
  display: flex;
  align-items: end;
  justify-content: space-between;
  border: 1px solid var(--line);
  background: #fff;
  padding: 18px 20px;
}

.detail-page-header span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
}

.detail-page-header h1 {
  margin: 5px 0 0;
  color: #13263a;
  font-size: 28px;
  line-height: 1.15;
}

.detail-page-header em {
  min-width: 72px;
  min-height: 28px;
  display: inline-grid;
  place-items: center;
  border-radius: 999px;
  background: #edf5ee;
  color: var(--green);
  font-style: normal;
  font-weight: 900;
}

.detail-page-status {
  display: flex;
  align-items: center;
  gap: 10px;
}

.detail-page-status button {
  height: 30px;
  border: 1px solid var(--blue);
  border-radius: 4px;
  background: #fff;
  color: var(--blue-dark);
  padding: 0 12px;
  font-size: 12px;
  font-weight: 900;
}

.page-summary {
  margin-top: 12px;
  background: #fff;
}

.detail-page-shell {
  display: grid;
  gap: 12px;
  margin-top: 12px;
}

.detail-page-main,
.detail-side-section {
  border: 1px solid var(--line);
  background: #fff;
}

.detail-page-main,
.detail-side-section {
  padding: 12px;
}

.full-detail-table .old-section {
  margin-top: 2px;
}

.detail-side {
  display: grid;
  gap: 12px;
}

.detail-side-section h2 {
  height: 32px;
  display: flex;
  align-items: center;
  margin: 0 8px;
  padding: 0 10px;
  background: var(--blue);
  color: #fff;
  font-size: 14px;
}

.detail-side-section .old-inline-list {
  padding: 10px 18px;
}

.detail-side-section .actions,
.detail-side-section .downloads {
  gap: 8px;
}

.detail-side-section .actions {
  display: block;
}

.detail-side-section .downloads {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

.detail-side-section .actions button,
.detail-side-section .downloads a {
  min-width: 150px;
}

.order-detail-page .detail-side-section .actions button {
  width: auto;
  max-width: 100%;
  justify-content: center;
  white-space: normal;
}

.detail-side-section .downloads a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  width: auto;
  max-width: 100%;
  border: 1px solid #245b93;
  border-bottom-color: #173f6a;
  border-radius: 5px;
  background: linear-gradient(180deg, #4f83bd 0%, #3472ad 48%, #265f99 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28), 0 3px 0 #1e4f85, 0 11px 20px rgba(37, 87, 143, .22);
  color: #ffffff;
  padding: 0 14px;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0;
  transition: transform .16s ease, box-shadow .16s ease, filter .16s ease, background .16s ease, border-color .16s ease;
}

.detail-side-section .downloads a:hover {
  border-color: #1f5185;
  background: linear-gradient(180deg, #5b8fc7 0%, #3f7db8 48%, #2c67a0 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .32), 0 4px 0 #1d4b7b, 0 14px 24px rgba(37, 87, 143, .26);
  transform: translateY(-2px);
}

.detail-side-section .downloads a:active {
  box-shadow: inset 0 2px 6px rgba(12, 47, 84, .25), 0 1px 0 #1e4f85, 0 5px 10px rgba(37, 87, 143, .18);
  transform: translateY(1px);
}

.detail-side-section .operation-menu .downloads,
.detail-side-section .operation-menu .actions {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.detail-side-section .operation-menu .operation-menu-title,
.operation-menu .operation-menu-title {
  font-size: 13px;
  font-weight: 900;
  line-height: 1.2;
  letter-spacing: 0;
}

.order-detail-page .detail-side-section .operation-menu .actions button,
.detail-side-section .operation-menu .downloads a {
  width: 168px;
  max-width: 100%;
  min-height: 36px;
  border-color: #245b93;
  border-bottom-color: #173f6a;
  background: linear-gradient(180deg, #4f83bd 0%, #3472ad 48%, #265f99 100%);
  color: #ffffff;
  justify-content: center;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.detail-side-section .operation-menu .downloads a,
.detail-side-section .operation-menu .actions button,
.operation-menu .downloads a,
.operation-menu .actions button {
  border-color: #245b93;
  border-bottom-color: #173f6a;
  background: linear-gradient(180deg, #4f83bd 0%, #3472ad 48%, #265f99 100%);
  color: #ffffff;
  font-family: inherit;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: 0;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28), 0 3px 0 #1e4f85, 0 11px 20px rgba(37, 87, 143, .22);
  transition: transform .16s ease, box-shadow .16s ease, filter .16s ease, background .16s ease, border-color .16s ease;
}

.detail-side-section .operation-menu .downloads a:hover,
.detail-side-section .operation-menu .actions button:hover,
.operation-menu .downloads a:hover,
.operation-menu .actions button:hover {
  border-color: #1f5185;
  border-bottom-color: #15375d;
  background: linear-gradient(180deg, #5b8fc7 0%, #3f7db8 48%, #2c67a0 100%);
  color: #ffffff;
  filter: none;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .32), 0 4px 0 #1d4b7b, 0 14px 24px rgba(37, 87, 143, .26);
  transform: translateY(-2px);
}

.detail-side-section .operation-menu .downloads a:active,
.detail-side-section .operation-menu .actions button:active,
.operation-menu .downloads a:active,
.operation-menu .actions button:active {
  box-shadow: inset 0 2px 6px rgba(12, 47, 84, .25), 0 1px 0 #1e4f85, 0 5px 10px rgba(37, 87, 143, .18);
  transform: translateY(1px);
}

.detail-side-section .legacy-flags {
  border-left: 0;
  border-right: 0;
  border-bottom: 0;
}

@media (max-width: 640px) {
  .detail-side-section .actions button {
    width: 100%;
    justify-content: center;
  }
}

/* Pre-shipment visual polish: visual hierarchy only, with no field or layout changes. */
#preOrderModal .preorder-workbench {
  background: #eef4f8;
}

#preOrderModal .preorder-case-panel,
#preOrderModal .preorder-main-panel {
  border-color: #cbd9e5;
  background: #fcfdff;
  box-shadow: 0 8px 22px rgba(37, 66, 93, .07);
}

#preOrderModal .preorder-case-title {
  background: #f5f9fc;
}

#preOrderModal .preorder-folder-filters button {
  border-color: #bfd2e4;
  background: linear-gradient(180deg, #ffffff 0%, #f2f7fb 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .95),
    0 2px 0 rgba(148, 174, 198, .38),
    0 7px 14px rgba(38, 69, 96, .08);
  transition: transform .16s ease, border-color .16s ease, background .16s ease, box-shadow .16s ease;
}

#preOrderModal .preorder-folder-filters .preorder-all-filter {
  border-color: #b8cfe1;
  background: linear-gradient(180deg, rgba(255, 255, 255, .98), rgba(232, 242, 250, .98));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .95),
    inset 4px 0 0 #4e86b1,
    0 2px 0 rgba(120, 154, 184, .34),
    0 9px 18px rgba(40, 92, 150, .12);
}

#preOrderModal .preorder-folder-filters button:hover {
  border-color: #9ebbd3;
  background: linear-gradient(#fff, #edf4fa);
  transform: translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .95),
    0 3px 0 rgba(134, 163, 190, .34),
    0 10px 18px rgba(38, 69, 96, .12);
}

#preOrderModal .preorder-folder-filters button.active {
  border-color: #245b93;
  background: linear-gradient(180deg, #3479b5 0%, #28649e 100%);
  color: #ffffff;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .22),
    inset 0 -1px 0 rgba(13, 54, 91, .32),
    0 3px 0 rgba(25, 78, 126, .36),
    0 12px 22px rgba(40, 92, 150, .24);
}

#preOrderModal .preorder-folder-filters button.active i {
  background: #ffffff;
  color: var(--blue-dark);
}

#preOrderModal .preorder-summary-strip {
  background: linear-gradient(180deg, #f8fbfd, #eef5fa);
  padding-top: 10px;
  padding-bottom: 10px;
}

#preOrderModal .preorder-summary-card {
  border: 1px solid #cadbe9;
  background: linear-gradient(180deg, #ffffff 0%, #f4f8fb 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .94),
    0 2px 0 rgba(142, 168, 192, .26),
    0 8px 16px rgba(39, 70, 98, .07);
  transition: transform .16s ease, border-color .16s ease, background .16s ease, box-shadow .16s ease;
}

#preOrderModal .preorder-summary-card:hover {
  border-color: #9fbad2;
  background: linear-gradient(180deg, #ffffff 0%, #edf5fb 100%);
  transform: translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .96),
    0 3px 0 rgba(128, 158, 187, .3),
    0 11px 20px rgba(39, 70, 98, .1);
}

#preOrderModal .preorder-summary-card.active {
  border-color: #2f6fa5;
  background: linear-gradient(180deg, #eaf5ff 0%, #f8fcff 100%);
  box-shadow:
    inset 0 -4px 0 #2f6fa5,
    inset 0 1px 0 rgba(255, 255, 255, .95),
    0 3px 0 rgba(71, 119, 161, .24),
    0 12px 22px rgba(47, 111, 165, .15);
}

#preOrderModal .preorder-client-list-head {
  border-color: #cadce8;
  background: #edf4f9;
  box-shadow: 0 2px 6px rgba(38, 72, 102, .05);
}

#preOrderModal .preorder-client-group {
  border-color: #c9d9e5;
  background: #ffffff;
  box-shadow: 0 4px 12px rgba(38, 69, 96, .04);
}

#preOrderModal .preorder-client-group .preorder-group-head {
  border-left-color: #4e86b1;
  background: #f5f9fc;
}

#preOrderModal .preorder-client-group.preorder-folder-group .preorder-group-head {
  border-left-color: #c58e2a;
  background: linear-gradient(90deg, #fff7e7 0%, #fffaf1 74%, #ffffff 100%);
}

#preOrderModal .preorder-client-group.preorder-folder-group .preorder-folder-title-key {
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #9b773d;
  font-size: 11px;
  font-weight: 900;
}

#preOrderModal .preorder-client-card {
  border-top-color: #e1e9f0;
  transition: background-color .16s ease, box-shadow .16s ease;
}

#preOrderModal .preorder-client-card:hover {
  background: #fbfdff;
  box-shadow: inset 3px 0 0 #9ec2dc;
}

#preOrderModal .preorder-client-card.date-pending {
  box-shadow: inset 3px 0 0 #d3a35c;
  background: #fffdf8;
}

#preOrderModal .preorder-client-card.date-range {
  box-shadow: inset 3px 0 0 #c6914e;
  background: #fffdf8;
}

#preOrderModal .preorder-client-card.date-ready {
  box-shadow: inset 3px 0 0 #83af91;
  background: #fbfefb;
}

#preOrderModal .preorder-client-card.locked {
  box-shadow: inset 3px 0 0 #c9ad64;
  background: #fffdf5;
}

#preOrderModal .preorder-client-card.attention {
  box-shadow: inset 3px 0 0 #cf7871;
  background: #fffafa;
}

#preOrderModal .preorder-client-list .preorder-mini-field {
  border-color: #d6e2eb;
  background: linear-gradient(180deg, #ffffff 0%, #f5f9fc 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .88);
}

#preOrderModal .preorder-client-list .preorder-mini-field.pending {
  border-color: #ebd0a0;
  background: linear-gradient(180deg, #fffdf8 0%, #fff6e7 100%);
}

#preOrderModal .preorder-client-list .preorder-mini-field.range {
  border-color: #ead1a3;
  background: linear-gradient(180deg, #fffdf8 0%, #fff5e5 100%);
}

#preOrderModal .preorder-client-list .preorder-mini-field.ready {
  border-color: #c3ddc8;
  background: linear-gradient(180deg, #ffffff 0%, #f0f9f2 100%);
}

#preOrderModal .preorder-status-chip {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7);
}

#preOrderCrmModal .preorder-crm-modal,
#preOrderCrmModal .preorder-crm-layout {
  background: #fcfdff;
}

/* Align the client contact-history shell with the employee pre-order dialog. */
#preOrderCrmModal .preorder-crm-modal {
  top: 46px;
  width: min(1120px, calc(100vw - 48px));
  max-height: calc(100vh - 92px);
  border-color: #9fb8d0;
  border-radius: 8px;
  background: linear-gradient(180deg, #ffffff 0%, #f4f8fc 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .98),
    0 22px 52px rgba(10, 30, 50, .28);
}

#preOrderCrmModal .preorder-crm-modal .modal-head {
  min-height: 76px;
  height: auto;
  border-bottom-color: #c6d7e5;
  background: linear-gradient(180deg, #fafdff 0%, #eaf4fb 100%);
  padding: 15px 18px 14px 22px;
}

#preOrderCrmModal .preorder-crm-modal .modal-head span {
  color: #5f7487;
  font-size: 12px;
  letter-spacing: .08em;
}

#preOrderCrmModal .preorder-crm-modal .modal-head h1 {
  margin-top: 3px;
  color: #173f63;
  font-size: 21px;
  font-weight: 950;
}

#preOrderCrmModal .preorder-crm-modal .modal-head button {
  width: 34px;
  height: 34px;
  border-color: #abc2d7;
  border-radius: 5px;
  background: linear-gradient(#ffffff, #edf5fb);
  color: #204b70;
  box-shadow: 0 4px 12px rgba(36, 66, 94, .12);
}

#preOrderCrmModal .preorder-crm-body {
  background: #fcfdff;
}

#preOrderCrmModal .preorder-record-item.readonly {
  border-color: #d0deea;
  box-shadow: 0 4px 12px rgba(38, 69, 96, .04);
}

#preOrderCrmModal .preorder-record-item.readonly.pending {
  border-color: #e4bf79;
  background: #fffaf0;
}

/* Keep the client pre-order filter selection consistent with the employee portal. */
#preOrderModal .preorder-summary-card.active {
  border-color: #245b93;
  background: linear-gradient(180deg, #3479b5 0%, #28649e 100%);
  color: #ffffff;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .24),
    inset 0 -2px 0 rgba(13, 54, 91, .32),
    0 3px 0 rgba(25, 78, 126, .36),
    0 12px 22px rgba(40, 92, 150, .24);
}

#preOrderModal .preorder-summary-card.active span,
#preOrderModal .preorder-summary-card.active strong,
#preOrderModal .preorder-summary-card.active em {
  color: #ffffff;
}

/* Client portal operation buttons: remove the old muddy gold palette. */
.operation-menu-download,
.detail-side-section .operation-menu-download {
  border-color: #c7d8e7;
  background: linear-gradient(180deg, #ffffff 0%, #f4f8fc 100%);
}

.operation-menu-urge,
.detail-side-section .operation-menu-urge,
.action-group-urge {
  border-color: #b8cde1;
  background:
    linear-gradient(90deg, rgba(47, 95, 159, .08), rgba(255, 255, 255, 0) 52%),
    linear-gradient(180deg, #ffffff 0%, #f1f7fc 100%);
}

.operation-menu-request,
.detail-side-section .operation-menu-request {
  border-color: #c9d9e6;
  background: linear-gradient(180deg, #ffffff 0%, #f6f9fc 100%);
}

.operation-menu-notice,
.detail-side-section .operation-menu-notice {
  border-color: #c4dce5;
  background: linear-gradient(180deg, #ffffff 0%, #f3fafc 100%);
}

.operation-menu-download .operation-menu-title,
.detail-side-section .operation-menu-download .operation-menu-title {
  border-left-color: #3f77ad;
  color: #2f587f;
}

.operation-menu-urge .operation-menu-title,
.detail-side-section .operation-menu-urge .operation-menu-title,
.action-group-urge .action-group-title {
  border-left-color: #245b93;
  color: #1d4e82;
}

.operation-menu-request .operation-menu-title,
.detail-side-section .operation-menu-request .operation-menu-title {
  border-left-color: #678ba8;
  color: #435f78;
}

.operation-menu-notice .operation-menu-title,
.detail-side-section .operation-menu-notice .operation-menu-title {
  border-left-color: #3f8fa4;
  color: #356f80;
}

.downloads a,
.detail-side-section .downloads a,
.operation-menu .downloads a,
.detail-side-section .operation-menu .downloads a {
  border-color: #9db8d1;
  border-bottom-color: #7d9bb7;
  background: linear-gradient(180deg, #ffffff 0%, #eef5fb 52%, #dbe8f3 100%);
  color: #244d74;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .96),
    0 2px 0 #b7cadb,
    0 8px 15px rgba(38, 76, 112, .12);
}

.downloads a:hover,
.detail-side-section .downloads a:hover,
.operation-menu .downloads a:hover,
.detail-side-section .operation-menu .downloads a:hover {
  border-color: #7fa3c4;
  border-bottom-color: #678cad;
  background: linear-gradient(180deg, #ffffff 0%, #f5faff 45%, #e3eff9 100%);
  color: #173f63;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .98),
    0 3px 0 #a8bfd4,
    0 11px 20px rgba(38, 76, 112, .16);
  transform: translateY(-2px);
}

.downloads a:active,
.detail-side-section .downloads a:active,
.operation-menu .downloads a:active,
.detail-side-section .operation-menu .downloads a:active {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .94),
    0 1px 0 #9db4c8,
    0 5px 10px rgba(38, 76, 112, .12);
  transform: translateY(1px);
}

.actions button,
.operation-menu .actions button,
.detail-side-section .actions button,
.detail-side-section .operation-menu .actions button {
  border-color: #9fb6ca;
  border-bottom-color: #7f9bb5;
  background: linear-gradient(180deg, #ffffff 0%, #edf4fa 52%, #d7e5f1 100%);
  color: #294c69;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .96),
    0 2px 0 #b6c8d8,
    0 8px 15px rgba(38, 76, 112, .11);
}

.actions button:hover,
.operation-menu .actions button:hover,
.detail-side-section .actions button:hover,
.detail-side-section .operation-menu .actions button:hover {
  border-color: #7fa3c4;
  border-bottom-color: #6689a9;
  background: linear-gradient(180deg, #ffffff 0%, #f4faff 45%, #e0edf8 100%);
  color: #193e5d;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .98),
    0 3px 0 #a7bfd3,
    0 11px 20px rgba(38, 76, 112, .15);
  transform: translateY(-2px);
}

.actions button:active,
.operation-menu .actions button:active,
.detail-side-section .actions button:active,
.detail-side-section .operation-menu .actions button:active {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .94),
    0 1px 0 #9eb5c9,
    0 5px 10px rgba(38, 76, 112, .12);
  transform: translateY(1px);
}

.operation-menu-urge .actions button,
.detail-side-section .operation-menu-urge .actions button,
.action-group-urge .actions button,
.action-group-urge .action-group-buttons button,
.actions button[data-urge="true"] {
  border-color: #245b93;
  border-bottom-color: #173f6a;
  background: linear-gradient(180deg, #4f83bd 0%, #3472ad 48%, #265f99 100%);
  color: #ffffff;
  text-shadow: 0 1px 0 rgba(7, 42, 78, .32);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .24),
    0 3px 0 #1e4f85,
    0 12px 22px rgba(37, 87, 143, .24);
}

.operation-menu-urge .actions button:hover,
.detail-side-section .operation-menu-urge .actions button:hover,
.action-group-urge .actions button:hover,
.action-group-urge .action-group-buttons button:hover,
.actions button[data-urge="true"]:hover {
  border-color: #1f5185;
  border-bottom-color: #15375d;
  background: linear-gradient(180deg, #5d90c7 0%, #3d7db8 48%, #2b669f 100%);
  color: #ffffff;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .28),
    0 4px 0 #1d4b7b,
    0 14px 24px rgba(37, 87, 143, .28);
}

.operation-menu-request .actions button,
.detail-side-section .operation-menu-request .actions button {
  border-color: #88a5bd;
  border-bottom-color: #6c879f;
  background: linear-gradient(180deg, #fafdff 0%, #e6f0f8 48%, #cdddea 100%);
  color: #254a66;
}

.operation-menu-notice .actions button,
.detail-side-section .operation-menu-notice .actions button {
  border-color: #4f98ad;
  border-bottom-color: #36798c;
  background: linear-gradient(180deg, #62a9bd 0%, #458fa6 48%, #32798f 100%);
  color: #ffffff;
  text-shadow: 0 1px 0 rgba(10, 66, 82, .28);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .24),
    0 3px 0 #2c6f82,
    0 12px 22px rgba(48, 119, 142, .22);
}

.operation-menu-notice .actions button:hover,
.detail-side-section .operation-menu-notice .actions button:hover {
  border-color: #43889d;
  border-bottom-color: #2e6c7d;
  background: linear-gradient(180deg, #70b6c8 0%, #509bb1 48%, #398298 100%);
  color: #ffffff;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .28),
    0 4px 0 #2d6f82,
    0 14px 24px rgba(48, 119, 142, .26);
}

/* Client portal button system: one blue business-button language.
   Pre-order shipment buttons keep their existing style intentionally. */
.menu-btn.export-menu-btn,
.client-export-footer button.primary,
.inline-remark-editor button:not([data-remark-cancel]),
.detail-remark-view .save-btn,
.downloads a,
.operation-menu .downloads a,
.detail-side-section .downloads a,
.detail-side-section .operation-menu .downloads a,
.actions button,
.operation-menu .actions button,
.detail-side-section .actions button,
.detail-side-section .operation-menu .actions button,
.operation-menu-urge .actions button,
.operation-menu-request .actions button,
.operation-menu-notice .actions button,
.action-group-urge .actions button,
.action-group-urge .action-group-buttons button {
  border-color: #245b93;
  border-bottom-color: #173f6a;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .24) 0%, rgba(255, 255, 255, .08) 43%, rgba(8, 43, 80, .12) 100%),
    linear-gradient(180deg, #4f83bd 0%, #3472ad 48%, #265f99 100%);
  color: #ffffff;
  text-shadow: 0 1px 0 rgba(7, 42, 78, .30);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .28),
    inset 0 -1px 0 rgba(9, 45, 82, .22),
    0 3px 0 #1e4f85,
    0 11px 20px rgba(37, 87, 143, .22);
}

.menu-btn.export-menu-btn:hover,
.client-export-footer button.primary:hover,
.inline-remark-editor button:not([data-remark-cancel]):hover,
.detail-remark-view .save-btn:hover,
.downloads a:hover,
.operation-menu .downloads a:hover,
.detail-side-section .downloads a:hover,
.detail-side-section .operation-menu .downloads a:hover,
.actions button:hover,
.operation-menu .actions button:hover,
.detail-side-section .actions button:hover,
.detail-side-section .operation-menu .actions button:hover,
.operation-menu-urge .actions button:hover,
.operation-menu-request .actions button:hover,
.operation-menu-notice .actions button:hover,
.action-group-urge .actions button:hover,
.action-group-urge .action-group-buttons button:hover {
  border-color: #1f5185;
  border-bottom-color: #15375d;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .30) 0%, rgba(255, 255, 255, .10) 43%, rgba(8, 43, 80, .10) 100%),
    linear-gradient(180deg, #5b8fc7 0%, #3f7db8 48%, #2c67a0 100%);
  color: #ffffff;
  filter: none;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .32),
    inset 0 -1px 0 rgba(9, 45, 82, .20),
    0 4px 0 #1d4b7b,
    0 14px 24px rgba(37, 87, 143, .26);
  transform: translateY(-2px);
}

.menu-btn.export-menu-btn:active,
.client-export-footer button.primary:active,
.inline-remark-editor button:not([data-remark-cancel]):active,
.detail-remark-view .save-btn:active,
.downloads a:active,
.operation-menu .downloads a:active,
.detail-side-section .downloads a:active,
.detail-side-section .operation-menu .downloads a:active,
.actions button:active,
.operation-menu .actions button:active,
.detail-side-section .actions button:active,
.detail-side-section .operation-menu .actions button:active,
.operation-menu-urge .actions button:active,
.operation-menu-request .actions button:active,
.operation-menu-notice .actions button:active,
.action-group-urge .actions button:active,
.action-group-urge .action-group-buttons button:active {
  box-shadow:
    inset 0 2px 6px rgba(12, 47, 84, .25),
    inset 0 1px 0 rgba(255, 255, 255, .18),
    0 1px 0 #1e4f85,
    0 5px 10px rgba(37, 87, 143, .18);
  transform: translateY(1px);
}

.doc-cloud-btn:not(.disabled),
.doc-bill-name.doc-bill-copy,
.doc-bill-name.doc-bill-surrender,
.doc-bill-name.doc-bill-air,
.doc-customs-progress,
.doc-customs-progress.complete {
  border-color: #245b93;
  border-bottom-color: #173f6a;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .24) 0%, rgba(255, 255, 255, .08) 43%, rgba(8, 43, 80, .12) 100%),
    linear-gradient(180deg, #4f83bd 0%, #3472ad 48%, #265f99 100%);
  color: #ffffff;
  text-shadow: 0 1px 0 rgba(7, 42, 78, .28);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .28),
    inset 0 -1px 0 rgba(9, 45, 82, .22),
    0 2px 0 #1e4f85,
    0 8px 15px rgba(37, 87, 143, .20);
}

.doc-cloud-btn:not(.disabled):hover,
.doc-bill-name.doc-bill-copy:hover,
.doc-bill-name.doc-bill-surrender:hover,
.doc-bill-name.doc-bill-air:hover,
.doc-customs-progress:hover,
.doc-customs-progress.complete:hover {
  border-color: #1f5185;
  border-bottom-color: #15375d;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .30) 0%, rgba(255, 255, 255, .10) 43%, rgba(8, 43, 80, .10) 100%),
    linear-gradient(180deg, #5b8fc7 0%, #3f7db8 48%, #2c67a0 100%);
  color: #ffffff;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .32),
    inset 0 -1px 0 rgba(9, 45, 82, .20),
    0 3px 0 #1d4b7b,
    0 10px 18px rgba(37, 87, 143, .24);
}

.doc-customs-progress > span,
.doc-customs-progress.complete > span {
  color: #ffffff;
  text-shadow: 0 1px 0 rgba(7, 42, 78, .24);
}

.doc-customs-progress b,
.doc-customs-progress.complete b,
.doc-progress-badge.complete {
  border-color: rgba(255, 255, 255, .42);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .22) 0%, rgba(255, 255, 255, .08) 100%),
    rgba(18, 71, 118, .28);
  color: #ffffff;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .24),
    0 1px 2px rgba(9, 45, 82, .16);
}

.client-export-field input {
  accent-color: #2f6fb0;
}

/* Refined client portal palette: subdued, freight-forwarding business tone. */
.search-form #reloadButton,
.menu-btn.export-menu-btn,
.client-export-footer button.primary,
.inline-remark-editor button:not([data-remark-cancel]),
.detail-remark-view .save-btn,
.downloads a,
.operation-menu .downloads a,
.detail-side-section .downloads a,
.detail-side-section .operation-menu .downloads a,
.actions button,
.operation-menu .actions button,
.detail-side-section .actions button,
.detail-side-section .operation-menu .actions button,
.operation-menu-urge .actions button,
.operation-menu-request .actions button,
.operation-menu-notice .actions button,
.action-group-urge .actions button,
.action-group-urge .action-group-buttons button {
  border-color: #2b4154;
  border-top-color: #51697d;
  border-bottom-color: #1d2f3f;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .18) 0%, rgba(255, 255, 255, .06) 45%, rgba(8, 22, 35, .12) 100%),
    linear-gradient(180deg, #536c80 0%, #3e586d 48%, #30485b 100%);
  color: #ffffff;
  text-shadow: 0 1px 0 rgba(9, 25, 39, .32);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .22),
    inset 0 -1px 0 rgba(9, 25, 39, .18),
    0 2px 0 #223749,
    0 9px 18px rgba(28, 50, 69, .18);
}

.search-form #reloadButton:hover,
.menu-btn.export-menu-btn:hover,
.client-export-footer button.primary:hover,
.inline-remark-editor button:not([data-remark-cancel]):hover,
.detail-remark-view .save-btn:hover,
.downloads a:hover,
.operation-menu .downloads a:hover,
.detail-side-section .downloads a:hover,
.detail-side-section .operation-menu .downloads a:hover,
.actions button:hover,
.operation-menu .actions button:hover,
.detail-side-section .actions button:hover,
.detail-side-section .operation-menu .actions button:hover,
.operation-menu-urge .actions button:hover,
.operation-menu-request .actions button:hover,
.operation-menu-notice .actions button:hover,
.action-group-urge .actions button:hover,
.action-group-urge .action-group-buttons button:hover {
  border-color: #263c4f;
  border-top-color: #5c7589;
  border-bottom-color: #172838;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .22) 0%, rgba(255, 255, 255, .07) 45%, rgba(8, 22, 35, .10) 100%),
    linear-gradient(180deg, #60788d 0%, #496377 48%, #385266 100%);
  color: #ffffff;
  filter: none;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .26),
    inset 0 -1px 0 rgba(9, 25, 39, .16),
    0 3px 0 #213649,
    0 12px 22px rgba(28, 50, 69, .22);
  transform: translateY(-1px);
}

.search-form #reloadButton:active,
.menu-btn.export-menu-btn:active,
.client-export-footer button.primary:active,
.inline-remark-editor button:not([data-remark-cancel]):active,
.detail-remark-view .save-btn:active,
.downloads a:active,
.operation-menu .downloads a:active,
.detail-side-section .downloads a:active,
.detail-side-section .operation-menu .downloads a:active,
.actions button:active,
.operation-menu .actions button:active,
.detail-side-section .actions button:active,
.detail-side-section .operation-menu .actions button:active,
.operation-menu-urge .actions button:active,
.operation-menu-request .actions button:active,
.operation-menu-notice .actions button:active,
.action-group-urge .actions button:active,
.action-group-urge .action-group-buttons button:active {
  box-shadow:
    inset 0 2px 6px rgba(8, 23, 37, .26),
    inset 0 1px 0 rgba(255, 255, 255, .14),
    0 1px 0 #223749,
    0 5px 10px rgba(28, 50, 69, .14);
  transform: translateY(1px);
}

.doc-bill-name.doc-bill-copy,
.detail-download-link.doc-bill-copy {
  border-color: #365a74;
  border-top-color: #63839a;
  border-bottom-color: #25435a;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .20) 0%, rgba(255, 255, 255, .07) 44%, rgba(16, 43, 64, .12) 100%),
    linear-gradient(180deg, #66859b 0%, #4d7089 49%, #3d627c 100%);
  color: #ffffff;
  text-shadow: 0 1px 0 rgba(13, 39, 61, .30);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .24),
    inset 0 -1px 0 rgba(13, 39, 61, .18),
    0 2px 0 #2e4f68,
    0 8px 15px rgba(37, 72, 98, .18);
}

.doc-bill-name.doc-bill-surrender,
.detail-download-link.doc-bill-surrender {
  border-color: #23625f;
  border-top-color: #57918d;
  border-bottom-color: #174846;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .18) 0%, rgba(255, 255, 255, .06) 44%, rgba(4, 50, 48, .12) 100%),
    linear-gradient(180deg, #5a958f 0%, #3f7d78 48%, #2f6a66 100%);
  color: #ffffff;
  text-shadow: 0 1px 0 rgba(6, 45, 43, .32);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .23),
    inset 0 -1px 0 rgba(6, 45, 43, .18),
    0 2px 0 #245b58,
    0 8px 15px rgba(31, 94, 90, .18);
}

.doc-bill-name.doc-bill-air,
.detail-download-link.doc-bill-air {
  border-color: #434a68;
  border-top-color: #707895;
  border-bottom-color: #313852;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .18) 0%, rgba(255, 255, 255, .06) 44%, rgba(24, 28, 52, .12) 100%),
    linear-gradient(180deg, #737b99 0%, #5d6685 48%, #4d5575 100%);
  color: #ffffff;
  text-shadow: 0 1px 0 rgba(24, 28, 52, .32);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .23),
    inset 0 -1px 0 rgba(24, 28, 52, .18),
    0 2px 0 #404761,
    0 8px 15px rgba(63, 70, 101, .18);
}

.doc-bill-name.doc-bill-copy:hover,
.detail-download-link.doc-bill-copy:hover {
  border-color: #2f536c;
  border-top-color: #6f90a8;
  border-bottom-color: #203c52;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .24) 0%, rgba(255, 255, 255, .08) 44%, rgba(16, 43, 64, .10) 100%),
    linear-gradient(180deg, #7190a7 0%, #577a94 49%, #426983 100%);
  color: #ffffff;
}

.doc-bill-name.doc-bill-surrender:hover,
.detail-download-link.doc-bill-surrender:hover {
  border-color: #1e5855;
  border-top-color: #66a09c;
  border-bottom-color: #123f3d;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .22) 0%, rgba(255, 255, 255, .08) 44%, rgba(4, 50, 48, .10) 100%),
    linear-gradient(180deg, #67a19c 0%, #478782 48%, #35736f 100%);
  color: #ffffff;
}

.doc-bill-name.doc-bill-air:hover,
.detail-download-link.doc-bill-air:hover {
  border-color: #3b435f;
  border-top-color: #7d86a3;
  border-bottom-color: #2a3148;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .22) 0%, rgba(255, 255, 255, .08) 44%, rgba(24, 28, 52, .10) 100%),
    linear-gradient(180deg, #7f88a5 0%, #66708f 48%, #545d7d 100%);
  color: #ffffff;
}

.doc-customs-progress,
.doc-customs-progress.complete {
  border-color: #314759;
  border-top-color: #627a8e;
  border-bottom-color: #223647;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .17) 0%, rgba(255, 255, 255, .06) 44%, rgba(10, 30, 47, .12) 100%),
    linear-gradient(180deg, #617a8f 0%, #4a6579 48%, #3a5366 100%);
  color: #ffffff;
  text-shadow: 0 1px 0 rgba(10, 30, 47, .30);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .22),
    inset 0 -1px 0 rgba(10, 30, 47, .18),
    0 2px 0 #2b4355,
    0 8px 15px rgba(40, 69, 92, .17);
}

.doc-customs-progress:hover,
.doc-customs-progress.complete:hover {
  border-color: #2a4052;
  border-top-color: #6f879a;
  border-bottom-color: #1d3040;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .21) 0%, rgba(255, 255, 255, .08) 44%, rgba(10, 30, 47, .10) 100%),
    linear-gradient(180deg, #6d869a 0%, #536f84 48%, #405b70 100%);
  color: #ffffff;
}

.doc-customs-progress b,
.doc-customs-progress.complete b,
.doc-progress-badge.complete {
  border-color: rgba(255, 255, 255, .46);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .26) 0%, rgba(255, 255, 255, .10) 100%),
    rgba(24, 55, 79, .30);
  color: #ffffff;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .24),
    0 1px 2px rgba(10, 30, 47, .16);
}

/* Match employee portal order-center special-event amber buttons. */
.search-form #reloadButton,
.menu-btn.export-menu-btn,
.client-export-footer button.primary,
.inline-remark-editor button:not([data-remark-cancel]),
.detail-remark-view .save-btn,
.downloads a,
.operation-menu .downloads a,
.detail-side-section .downloads a,
.detail-side-section .operation-menu .downloads a,
.actions button,
.operation-menu .actions button,
.detail-side-section .actions button,
.detail-side-section .operation-menu .actions button,
.operation-menu-urge .actions button,
.operation-menu-request .actions button,
.operation-menu-notice .actions button,
.action-group-urge .actions button,
.action-group-urge .action-group-buttons button,
.doc-cloud-btn:not(.disabled),
.doc-bill-name.doc-bill-copy,
.doc-bill-name.doc-bill-surrender,
.doc-bill-name.doc-bill-air,
.detail-download-link.doc-bill-copy,
.detail-download-link.doc-bill-surrender,
.detail-download-link.doc-bill-air,
.doc-customs-progress,
.doc-customs-progress.complete {
  border-color: #bc8c45;
  border-top-color: #d8b571;
  border-bottom-color: #8d642c;
  background: linear-gradient(#fffdf7 0%, #f9eed7 52%, #ecd7ad 100%);
  color: #69491f;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .58);
  box-shadow:
    inset 0 1px 0 #ffffff,
    0 2px 0 #b58b51,
    0 7px 14px rgba(111, 77, 30, .14);
}

.search-form #reloadButton:hover,
.menu-btn.export-menu-btn:hover,
.client-export-footer button.primary:hover,
.inline-remark-editor button:not([data-remark-cancel]):hover,
.detail-remark-view .save-btn:hover,
.downloads a:hover,
.operation-menu .downloads a:hover,
.detail-side-section .downloads a:hover,
.detail-side-section .operation-menu .downloads a:hover,
.actions button:hover,
.operation-menu .actions button:hover,
.detail-side-section .actions button:hover,
.detail-side-section .operation-menu .actions button:hover,
.operation-menu-urge .actions button:hover,
.operation-menu-request .actions button:hover,
.operation-menu-notice .actions button:hover,
.action-group-urge .actions button:hover,
.action-group-urge .action-group-buttons button:hover,
.doc-cloud-btn:not(.disabled):hover,
.doc-bill-name.doc-bill-copy:hover,
.doc-bill-name.doc-bill-surrender:hover,
.doc-bill-name.doc-bill-air:hover,
.detail-download-link.doc-bill-copy:hover,
.detail-download-link.doc-bill-surrender:hover,
.detail-download-link.doc-bill-air:hover,
.doc-customs-progress:hover,
.doc-customs-progress.complete:hover {
  border-color: #ad7f3f;
  border-top-color: #e0bf7d;
  border-bottom-color: #7e5726;
  background: linear-gradient(#fffffb 0%, #fbf2df 50%, #efdcb7 100%);
  color: #5d3f19;
  filter: brightness(1.01);
  box-shadow:
    inset 0 1px 0 #ffffff,
    0 3px 0 #a87d47,
    0 10px 17px rgba(111, 77, 30, .18);
  transform: translateY(-1px);
}

.search-form #reloadButton:active,
.menu-btn.export-menu-btn:active,
.client-export-footer button.primary:active,
.inline-remark-editor button:not([data-remark-cancel]):active,
.detail-remark-view .save-btn:active,
.downloads a:active,
.operation-menu .downloads a:active,
.detail-side-section .downloads a:active,
.detail-side-section .operation-menu .downloads a:active,
.actions button:active,
.operation-menu .actions button:active,
.detail-side-section .actions button:active,
.detail-side-section .operation-menu .actions button:active,
.operation-menu-urge .actions button:active,
.operation-menu-request .actions button:active,
.operation-menu-notice .actions button:active,
.action-group-urge .actions button:active,
.action-group-urge .action-group-buttons button:active,
.doc-cloud-btn:not(.disabled):active,
.doc-bill-name.doc-bill-copy:active,
.doc-bill-name.doc-bill-surrender:active,
.doc-bill-name.doc-bill-air:active,
.detail-download-link.doc-bill-copy:active,
.detail-download-link.doc-bill-surrender:active,
.detail-download-link.doc-bill-air:active,
.doc-customs-progress:active,
.doc-customs-progress.complete:active {
  box-shadow:
    inset 0 2px 5px rgba(111, 77, 30, .18),
    inset 0 1px 0 rgba(255, 255, 255, .82),
    0 1px 0 #a87d47,
    0 5px 10px rgba(111, 77, 30, .12);
  transform: translateY(1px);
}

.doc-customs-progress > span,
.doc-customs-progress.complete > span {
  color: #69491f;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .58);
}

.doc-customs-progress b,
.doc-customs-progress.complete b,
.doc-progress-badge.complete {
  border-color: #caa463;
  background: #fffaf0;
  color: #98671f;
  box-shadow:
    inset 0 1px 0 #ffffff,
    0 1px 2px rgba(111, 77, 30, .12);
  text-shadow: none;
}

.client-export-field input {
  accent-color: #bc8c45;
}

/* Operation menu: urge/request/notice buttons must exactly match document download buttons. */
.operation-menu-download .downloads a,
.operation-menu-urge .actions button,
.operation-menu-request .actions button,
.operation-menu-notice .actions button,
.detail-side-section .operation-menu-download .downloads a,
.detail-side-section .operation-menu-urge .actions button,
.detail-side-section .operation-menu-request .actions button,
.detail-side-section .operation-menu-notice .actions button,
#pageDownloadList.downloads a,
#pageUrgeActionList.actions button,
#pageRequestActionList.actions button,
#pageNoticeActionList.actions button {
  border-color: #bc8c45;
  border-top-color: #d8b571;
  border-bottom-color: #8d642c;
  background: linear-gradient(#fffdf7 0%, #f9eed7 52%, #ecd7ad 100%);
  color: #69491f;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .58);
  box-shadow:
    inset 0 1px 0 #ffffff,
    0 2px 0 #b58b51,
    0 7px 14px rgba(111, 77, 30, .14);
}

.operation-menu-download .downloads a:hover,
.operation-menu-urge .actions button:hover,
.operation-menu-request .actions button:hover,
.operation-menu-notice .actions button:hover,
.detail-side-section .operation-menu-download .downloads a:hover,
.detail-side-section .operation-menu-urge .actions button:hover,
.detail-side-section .operation-menu-request .actions button:hover,
.detail-side-section .operation-menu-notice .actions button:hover,
#pageDownloadList.downloads a:hover,
#pageUrgeActionList.actions button:hover,
#pageRequestActionList.actions button:hover,
#pageNoticeActionList.actions button:hover {
  border-color: #ad7f3f;
  border-top-color: #e0bf7d;
  border-bottom-color: #7e5726;
  background: linear-gradient(#fffffb 0%, #fbf2df 50%, #efdcb7 100%);
  color: #5d3f19;
  filter: brightness(1.01);
  box-shadow:
    inset 0 1px 0 #ffffff,
    0 3px 0 #a87d47,
    0 10px 17px rgba(111, 77, 30, .18);
  transform: translateY(-1px);
}

.operation-menu-download .downloads a:active,
.operation-menu-urge .actions button:active,
.operation-menu-request .actions button:active,
.operation-menu-notice .actions button:active,
.detail-side-section .operation-menu-download .downloads a:active,
.detail-side-section .operation-menu-urge .actions button:active,
.detail-side-section .operation-menu-request .actions button:active,
.detail-side-section .operation-menu-notice .actions button:active,
#pageDownloadList.downloads a:active,
#pageUrgeActionList.actions button:active,
#pageRequestActionList.actions button:active,
#pageNoticeActionList.actions button:active {
  box-shadow:
    inset 0 2px 5px rgba(111, 77, 30, .18),
    inset 0 1px 0 rgba(255, 255, 255, .82),
    0 1px 0 #a87d47,
    0 5px 10px rgba(111, 77, 30, .12);
  transform: translateY(1px);
}

/* Order list: search/export stay as deep-blue command buttons. */
.search-form #reloadButton,
.menu-row .menu-btn.export-menu-btn {
  border-color: #17456f;
  border-top-color: #4f7fa9;
  border-bottom-color: #0f3151;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .22) 0%, rgba(255, 255, 255, .07) 44%, rgba(5, 28, 50, .14) 100%),
    linear-gradient(180deg, #3d719d 0%, #285b88 52%, #1b4770 100%);
  color: #ffffff;
  text-shadow: 0 1px 0 rgba(5, 28, 50, .35);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .28),
    0 2px 0 #12395e,
    0 8px 15px rgba(20, 62, 98, .18);
}

.search-form #reloadButton:hover,
.menu-row .menu-btn.export-menu-btn:hover {
  border-color: #123d64;
  border-top-color: #5d8db6;
  border-bottom-color: #0d2b47;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .28) 0%, rgba(255, 255, 255, .09) 44%, rgba(5, 28, 50, .12) 100%),
    linear-gradient(180deg, #4b7fa9 0%, #316895 52%, #20527d 100%);
  color: #ffffff;
  filter: none;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .32),
    0 3px 0 #12395e,
    0 11px 19px rgba(20, 62, 98, .22);
  transform: translateY(-1px);
}

.search-form #reloadButton:active,
.menu-row .menu-btn.export-menu-btn:active {
  box-shadow:
    inset 0 2px 5px rgba(5, 28, 50, .26),
    inset 0 1px 0 rgba(255, 255, 255, .16),
    0 1px 0 #12395e,
    0 5px 10px rgba(20, 62, 98, .14);
  transform: translateY(1px);
}

/* Order list document column: B/L copy uses a white-blue outline style. */
.legacy-order-table .doc-bill-name.doc-bill-copy {
  border-color: #8faeca;
  border-top-color: #bfd1e2;
  border-bottom-color: #6d91b0;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .96) 0%, rgba(255, 255, 255, .72) 48%, rgba(221, 234, 245, .84) 100%),
    linear-gradient(180deg, #ffffff 0%, #f2f7fb 54%, #e4eef7 100%);
  color: #235475;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .78);
  box-shadow:
    inset 0 1px 0 #ffffff,
    0 2px 0 #9ab5cc,
    0 7px 13px rgba(47, 88, 124, .12);
}

.legacy-order-table .doc-bill-name.doc-bill-copy:hover {
  border-color: #779fbe;
  border-top-color: #c9d9e7;
  border-bottom-color: #5c85a5;
  background:
    linear-gradient(180deg, #ffffff 0%, #f7fbfe 48%, #eaf3fa 100%);
  color: #174766;
  filter: none;
  box-shadow:
    inset 0 1px 0 #ffffff,
    0 3px 0 #8caac4,
    0 10px 17px rgba(47, 88, 124, .16);
  transform: translateY(-1px);
}

.legacy-order-table .doc-bill-name.doc-bill-copy:active {
  box-shadow:
    inset 0 2px 5px rgba(47, 88, 124, .14),
    inset 0 1px 0 rgba(255, 255, 255, .88),
    0 1px 0 #8caac4,
    0 5px 10px rgba(47, 88, 124, .10);
  transform: translateY(1px);
}

/* Order list customs documents: partial upload uses white-blue, complete keeps amber. */
.legacy-order-table .doc-customs-progress.partial {
  border-color: #8faeca;
  border-top-color: #bfd1e2;
  border-bottom-color: #6d91b0;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .96) 0%, rgba(255, 255, 255, .72) 48%, rgba(221, 234, 245, .84) 100%),
    linear-gradient(180deg, #ffffff 0%, #f2f7fb 54%, #e4eef7 100%);
  color: #235475;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .78);
  box-shadow:
    inset 0 1px 0 #ffffff,
    0 2px 0 #9ab5cc,
    0 7px 13px rgba(47, 88, 124, .12);
}

.legacy-order-table .doc-customs-progress.partial:hover {
  border-color: #779fbe;
  border-top-color: #c9d9e7;
  border-bottom-color: #5c85a5;
  background:
    linear-gradient(180deg, #ffffff 0%, #f7fbfe 48%, #eaf3fa 100%);
  color: #174766;
  filter: none;
  box-shadow:
    inset 0 1px 0 #ffffff,
    0 3px 0 #8caac4,
    0 10px 17px rgba(47, 88, 124, .16);
  transform: translateY(-1px);
}

.legacy-order-table .doc-customs-progress.partial:active {
  box-shadow:
    inset 0 2px 5px rgba(47, 88, 124, .14),
    inset 0 1px 0 rgba(255, 255, 255, .88),
    0 1px 0 #8caac4,
    0 5px 10px rgba(47, 88, 124, .10);
  transform: translateY(1px);
}

.legacy-order-table .doc-customs-progress.partial > span {
  color: #235475;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .78);
}

.legacy-order-table .doc-customs-progress.partial b,
.legacy-order-table .doc-progress-badge.partial {
  border-color: #9ebbd4;
  background: #f7fbfe;
  color: #235475;
  box-shadow:
    inset 0 1px 0 #ffffff,
    0 1px 2px rgba(47, 88, 124, .10);
}

/* Order list: match the softer pale-yellow detail buttons, not the old strong gold. */
.menu-row .menu-btn.export-menu-btn,
.legacy-order-table .doc-bill-name.doc-bill-surrender,
.legacy-order-table .doc-customs-progress.complete {
  border-color: #d6bc82;
  border-top-color: #ead6a6;
  border-bottom-color: #b3904e;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .96) 0%, rgba(255, 255, 255, .62) 48%, rgba(241, 226, 191, .86) 100%),
    linear-gradient(180deg, #fffef9 0%, #fbf3df 54%, #f1e0ba 100%);
  color: #654a1c;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .72);
  box-shadow:
    inset 0 1px 0 #ffffff,
    0 2px 0 #c9aa68,
    0 7px 13px rgba(104, 78, 31, .12);
}

.menu-row .menu-btn.export-menu-btn:hover,
.legacy-order-table .doc-bill-name.doc-bill-surrender:hover,
.legacy-order-table .doc-customs-progress.complete:hover {
  border-color: #c9aa6d;
  border-top-color: #efddb2;
  border-bottom-color: #a98243;
  background:
    linear-gradient(180deg, #ffffff 0%, #fcf6e8 48%, #f4e6c5 100%);
  color: #5d4216;
  filter: none;
  box-shadow:
    inset 0 1px 0 #ffffff,
    0 3px 0 #bd9e5d,
    0 10px 17px rgba(104, 78, 31, .16);
  transform: translateY(-1px);
}

.menu-row .menu-btn.export-menu-btn:active,
.legacy-order-table .doc-bill-name.doc-bill-surrender:active,
.legacy-order-table .doc-customs-progress.complete:active {
  box-shadow:
    inset 0 2px 5px rgba(104, 78, 31, .14),
    inset 0 1px 0 rgba(255, 255, 255, .88),
    0 1px 0 #bd9e5d,
    0 5px 10px rgba(104, 78, 31, .10);
  transform: translateY(1px);
}

.legacy-order-table .doc-customs-progress.complete > span {
  color: #654a1c;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .72);
}

.legacy-order-table .doc-customs-progress.complete b,
.legacy-order-table .doc-progress-badge.complete {
  border-color: #d8bd80;
  background: #fffaf0;
  color: #806020;
  box-shadow:
    inset 0 1px 0 #ffffff,
    0 1px 2px rgba(104, 78, 31, .10);
}

/* Customer-visible destination delivery is rendered only after the employee portal has actually sent a plan. */
.client-destination-delivery {
  margin: 3px 0; padding: 12px; border: 1px solid #b8d4e7; border-radius: 6px;
  background: linear-gradient(180deg, #fbfeff, #eef8fc); color: #214867;
  box-shadow: inset 0 1px 0 #fff;
}
.client-destination-delivery > header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-bottom: 9px; border-bottom: 1px solid #d4e6f1; }
.client-destination-delivery > header > div { display: flex; align-items: baseline; gap: 10px; }
.client-destination-delivery > header b { color: #1f5c89; font-size: 14px; }
.client-destination-delivery > header span, .client-destination-delivery > header em { color: #6b8294; font-size: 12px; font-style: normal; }
.client-destination-delivery-list { display: grid; gap: 6px; margin-top: 9px; }
.client-destination-delivery-item { display: grid; grid-template-columns: minmax(135px, .8fr) 135px minmax(230px, 1.45fr) minmax(135px, .7fr) 60px; gap: 8px; align-items: center; padding: 8px 9px; border: 1px solid #d5e5ef; border-radius: 4px; background: #fff; font-size: 12px; }
.client-destination-delivery-item b { color: #245d89; }
.client-destination-delivery-item span, .client-destination-delivery-item em { color: #4f7087; font-style: normal; }
.client-destination-delivery-item i { color: #85642c; font-style: normal; font-weight: 700; }
.client-destination-delivery.cancelled { border-color: #e0b8b8; background: #fff6f6; color: #8b5555; }
.client-destination-delivery.cancelled > header { border-color: #efd3d3; }
.client-destination-delivery.cancelled > header b { color: #9b5252; }
.client-destination-delivery.cancelled > p { margin: 10px 0 0; font-size: 12px; line-height: 1.65; }
@media (max-width: 760px) {
  .client-destination-delivery > header, .client-destination-delivery > header > div { align-items: flex-start; flex-direction: column; gap: 4px; }
  .client-destination-delivery-item { grid-template-columns: 1fr 1fr; }
}

/* Compact customer order detail: preserve the section order while reducing vertical travel. */
.old-detail-body .old-detail-table td,
.order-detail-page .full-detail-table td {
  min-height: 30px;
  padding-top: 4px;
  padding-bottom: 4px;
  line-height: 1.35;
}

.old-detail-body .old-detail-table .old-section-row > td,
.order-detail-page .full-detail-table .old-section-row > td {
  padding-top: 6px;
  padding-bottom: 4px;
  border-bottom: 0;
}

.old-detail-body .old-section,
.order-detail-page .old-section {
  min-height: 30px;
  border-radius: 3px;
  padding: 0 11px;
  font-size: 13px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12);
}

.old-detail-body .old-leg-divider,
.order-detail-page .old-leg-divider {
  margin-top: 6px;
  margin-bottom: 6px;
}

.old-detail-body .old-leg-divider-final,
.order-detail-page .old-leg-divider-final {
  margin-top: 7px;
  margin-bottom: 7px;
}

.operation-menu.detail-operation-menu {
  display: block;
  width: 100%;
  grid-auto-rows: auto;
}

.operation-menu-empty {
  color: #738293;
  font-size: 12px;
  font-weight: 600;
}

.compact-timeline {
  width: 100%;
}

.compact-timeline-list {
  display: grid;
  gap: 0;
}

.compact-timeline:not(.is-expanded) .timeline-overflow-item {
  display: none;
}

.compact-timeline .timeline-item {
  grid-template-columns: 132px minmax(0, 1fr);
  align-items: start;
  gap: 12px;
  min-height: 40px;
  margin-right: 8px;
  padding: 7px 11px 7px 16px;
  border: 0;
  border-bottom: 1px solid #dce6ef;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.compact-timeline .timeline-item::before {
  top: 16px;
  width: 6px;
  height: 6px;
}

.compact-timeline .timeline-item::after {
  top: 24px;
  bottom: -16px;
}

.compact-timeline .timeline-item time {
  padding-top: 1px;
  color: #687b8f;
  font-size: 12px;
  font-weight: 700;
}

.compact-timeline .timeline-item > div {
  color: #243a50;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.55;
}

.compact-timeline .timeline-client-item,
.compact-timeline .timeline-client-sub-item {
  margin-top: 4px;
  margin-bottom: 4px;
  margin-left: 14px;
  border: 1px solid #ead4a6;
  border-left: 3px solid #c49336;
  border-radius: 5px;
  background: #fffaf0;
  box-shadow: inset 0 1px 0 #ffffff;
}

.compact-timeline .timeline-latest-item {
  background: linear-gradient(90deg, rgba(47, 105, 163, .07), rgba(47, 105, 163, 0) 70%);
}

.timeline-toggle-button {
  display: block;
  min-width: 152px;
  height: 32px;
  margin: 10px auto 2px;
  border: 1px solid #9eb5ca;
  border-radius: 6px;
  background: linear-gradient(180deg, #ffffff 0%, #edf3f8 100%);
  color: #2c5b84;
  padding: 0 16px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
  box-shadow:
    inset 0 1px 0 #ffffff,
    0 2px 5px rgba(40, 76, 110, .10);
  transition: background .14s ease, border-color .14s ease, box-shadow .14s ease, transform .14s ease;
}

.timeline-toggle-button:hover {
  border-color: #789dbd;
  background: linear-gradient(180deg, #ffffff 0%, #e5eef6 100%);
  box-shadow:
    inset 0 1px 0 #ffffff,
    0 4px 9px rgba(40, 76, 110, .14);
  transform: translateY(-1px);
}

.timeline-toggle-button:active {
  box-shadow: inset 0 2px 4px rgba(40, 76, 110, .12);
  transform: translateY(1px);
}

.timeline-empty {
  min-height: 42px;
  display: grid;
  place-items: center;
  color: #7a8998;
  font-size: 12px;
}

.old-detail-body .vessel-motion-button,
.order-detail-page .vessel-motion-button {
  min-height: 25px;
  margin-left: 9px;
  border-color: #8ea9c0;
  border-bottom-color: #6f8ca6;
  border-radius: 6px;
  background: linear-gradient(180deg, #ffffff 0%, #e9f0f6 52%, #d6e2ec 100%);
  color: #234b70;
  font-size: 12px;
  line-height: 23px;
  box-shadow:
    inset 0 1px 0 #ffffff,
    0 2px 0 #9aafc1,
    0 5px 10px rgba(36, 70, 102, .11);
}

.old-detail-body .vessel-motion-button:hover,
.order-detail-page .vessel-motion-button:hover {
  border-color: #6e91af;
  border-bottom-color: #537796;
  background: linear-gradient(180deg, #ffffff 0%, #edf4f9 48%, #cadbe8 100%);
  color: #173f64;
  transform: translateY(-1px);
  box-shadow:
    inset 0 1px 0 #ffffff,
    0 3px 0 #879eb2,
    0 8px 14px rgba(36, 70, 102, .15);
}

@media (max-width: 700px) {
  .factory-total-band {
    gap: 5px;
  }

  .factory-total-separator {
    display: none;
  }

  .factory-total-metrics {
    gap: 4px 12px;
  }

  .compact-timeline .timeline-item {
    grid-template-columns: 1fr;
    gap: 2px;
  }
}

.operation-command-band .actions button[data-code] {
  border-color: #d3b77d;
  border-top-color: #ead7ad;
  border-bottom-color: #ae8b4c;
  background: linear-gradient(180deg, #fffefa 0%, #faf2de 52%, #efddb6 100%);
  color: #60471d;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .72);
  box-shadow:
    inset 0 1px 0 #ffffff,
    0 2px 0 #c3a263,
    0 6px 12px rgba(102, 76, 31, .11);
}

.operation-command-band .actions button[data-code]:hover {
  border-color: #c5a566;
  border-top-color: #eeddb7;
  border-bottom-color: #9c783c;
  background: linear-gradient(180deg, #ffffff 0%, #fcf6e9 50%, #f2e4c6 100%);
  color: #503811;
  box-shadow:
    inset 0 1px 0 #ffffff,
    0 3px 0 #b89555,
    0 9px 16px rgba(102, 76, 31, .15);
  transform: translateY(-1px);
}

.operation-command-band .actions button[data-code]:active {
  box-shadow:
    inset 0 2px 4px rgba(102, 76, 31, .12),
    0 1px 0 #b89555,
    0 4px 8px rgba(102, 76, 31, .10);
  transform: translateY(1px);
}

.order-detail-page .detail-side-section .operation-command-band .operation-command-group .actions button[data-code],
.old-detail-body .old-menu-cell .operation-command-band .operation-command-group .actions button[data-code] {
  width: 196px;
  max-width: 100%;
  min-height: 38px;
  border-color: #d3b77d;
  border-top-color: #ead7ad;
  border-bottom-color: #ae8b4c;
  background: linear-gradient(180deg, #fffefa 0%, #faf2de 52%, #efddb6 100%);
  color: #60471d;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.2;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .72);
  box-shadow:
    inset 0 1px 0 #ffffff,
    0 2px 0 #c3a263,
    0 6px 12px rgba(102, 76, 31, .11);
}

.order-detail-page .detail-side-section .operation-command-band .operation-command-group .actions button[data-code]:hover,
.old-detail-body .old-menu-cell .operation-command-band .operation-command-group .actions button[data-code]:hover {
  border-color: #c5a566;
  border-top-color: #eeddb7;
  border-bottom-color: #9c783c;
  background: linear-gradient(180deg, #ffffff 0%, #fcf6e9 50%, #f2e4c6 100%);
  color: #503811;
  box-shadow:
    inset 0 1px 0 #ffffff,
    0 3px 0 #b89555,
    0 9px 16px rgba(102, 76, 31, .15);
  transform: translateY(-1px);
}

.order-detail-page .detail-side-section .operation-command-band .operation-command-group .actions button[data-code]:active,
.old-detail-body .old-menu-cell .operation-command-band .operation-command-group .actions button[data-code]:active {
  box-shadow:
    inset 0 2px 4px rgba(102, 76, 31, .12),
    0 1px 0 #b89555,
    0 4px 8px rgba(102, 76, 31, .10);
  transform: translateY(1px);
}

.order-detail-page .full-detail-table .old-label.old-left,
.old-detail-body .old-detail-table .old-label.old-left {
  white-space: normal;
  overflow-wrap: anywhere;
}

/* Refined client-portal blue hierarchy: ink blue for structure, mist blue for surfaces. */
.legacy-order-table th {
  border-top: 1px solid #496e8b;
  border-left-color: rgba(230, 238, 244, .22);
  border-bottom: 1px solid #203f59;
  background: #315875;
  color: #f8fbfd;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .10),
    inset 0 -1px 0 rgba(19, 45, 65, .20);
  text-shadow: 0 1px 0 rgba(16, 38, 55, .24);
}

.legacy-order-table th:hover {
  background: #3a6684;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .14),
    inset 0 -3px 0 #8eabc0;
}

.legacy-order-table td::before {
  background: #e9f1f6;
}

.legacy-order-table tr:hover {
  background: #edf4f8;
}

.legacy-order-table .bill-no-td:hover::before,
.legacy-order-table .cargo-track-td:hover::before {
  background: #dceaf3;
}

.legacy-order-table .bill-no-td:hover .bill-no-link,
.legacy-order-table .cargo-track-td:hover .cargo-status-label,
.legacy-order-table .cargo-track-td:hover .cargo-track-link {
  color: #214f72;
}

.old-detail-body .old-section,
.order-detail-page .old-section {
  position: relative;
  min-height: 31px;
  overflow: hidden;
  border: 1px solid #c8d5df;
  border-left: 4px solid #315a7d;
  border-radius: 4px;
  background: #f1f5f8;
  color: #29465d;
  padding: 0 11px 0 10px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .96),
    0 1px 2px rgba(38, 65, 87, .06);
  text-shadow: none;
}

.old-detail-body .old-section::after,
.order-detail-page .old-section::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 1px;
  background: #dbe4eb;
  pointer-events: none;
}

.old-detail-body .old-section span,
.order-detail-page .old-section span {
  color: #29465d;
  font-weight: 850;
}

.old-detail-body .old-section strong,
.order-detail-page .old-section strong {
  position: relative;
  z-index: 1;
  color: #315a78;
  font-weight: 850;
}

.old-detail-body .old-section > div,
.order-detail-page .old-section > div {
  position: relative;
  z-index: 1;
}

.old-detail-body .old-leg-divider,
.order-detail-page .old-leg-divider {
  background: #d7e2ea;
}

.old-detail-body .old-leg-divider::after,
.order-detail-page .old-leg-divider::after {
  height: 4px;
  background: #6f94b0;
  box-shadow: 0 1px 2px rgba(42, 75, 100, .10);
}

.detail-side-section h2,
.detail-section h2 {
  min-height: 32px;
  height: auto;
  border: 1px solid #c8d5df;
  border-left: 4px solid #315a7d;
  border-radius: 4px;
  background: #f1f5f8;
  color: #29465d;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .96),
    0 1px 2px rgba(38, 65, 87, .06);
  text-shadow: none;
}

.detail-latest-summary {
  border-color: #c1d0db;
  border-left-color: #315a7d;
  background: rgba(249, 251, 252, .98);
}

.detail-latest-heading > span {
  color: #315a78;
}

/* Company notice center: restrained index on the left, formal stationery on the right. */
.company-notice-button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
}

.company-notice-button > b {
  min-width: 21px;
  height: 21px;
  display: inline-grid;
  place-items: center;
  border: 1px solid #8d3f3b;
  border-radius: 11px;
  background: #a95750;
  color: #fff;
  padding: 0 6px;
  font-size: 11px;
  line-height: 1;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .28),
    0 2px 5px rgba(83, 31, 28, .22);
}

.company-notice-button > b[hidden] {
  display: none;
}

.company-notice-layer {
  z-index: 190;
  background: rgba(19, 34, 48, .20);
}

.company-notice-layer .modal-backdrop {
  background: rgba(25, 42, 57, .52);
  backdrop-filter: blur(4px) saturate(.88);
}

.company-notice-modal {
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(1080px, calc(100vw - 72px));
  height: min(720px, calc(100vh - 88px));
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transform: translate(-50%, -50%);
  border: 1px solid #6f889d;
  border-radius: 7px;
  background: #edf2f6;
  box-shadow:
    0 36px 92px rgba(8, 25, 39, .46),
    0 14px 32px rgba(8, 25, 39, .24),
    0 0 0 4px rgba(255, 255, 255, .64);
}

.company-notice-head {
  min-height: 78px;
  display: grid;
  grid-template-columns: 1fr auto 42px;
  align-items: center;
  gap: 18px;
  border-bottom: 1px solid #b8c8d4;
  background: #f8fafc;
  padding: 12px 18px 12px 24px;
  box-shadow:
    inset 0 -1px 0 rgba(255, 255, 255, .9),
    0 3px 10px rgba(37, 62, 83, .07);
}

.company-notice-head > div > span {
  display: block;
  color: #6c8192;
  font-size: 10px;
  font-weight: 800;
  line-height: 1.2;
}

.company-notice-head h1 {
  margin: 4px 0 0;
  color: #1f405c;
  font-family: "Yu Gothic UI", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
  font-size: 21px;
  font-weight: 760;
  letter-spacing: 0;
}

.company-notice-head > p {
  margin: 0;
  border-right: 1px solid #cbd6de;
  color: #536b7e;
  padding-right: 18px;
  font-size: 12px;
  font-weight: 700;
}

.company-notice-head > button {
  width: 38px;
  height: 38px;
  border: 1px solid #9fb2c1;
  border-radius: 5px;
  background: #f8fafb;
  color: #536c80;
  font-size: 25px;
  line-height: 1;
  box-shadow:
    inset 0 1px 0 #fff,
    0 2px 0 #8ba0b1,
    0 6px 11px rgba(43, 67, 87, .13);
  cursor: pointer;
  transition: transform .14s ease, border-color .14s ease, color .14s ease, box-shadow .14s ease;
}

.company-notice-head > button:hover {
  border-color: #748fa5;
  color: #234d6e;
  transform: translateY(-1px);
  box-shadow:
    inset 0 1px 0 #fff,
    0 3px 0 #7e96a9,
    0 8px 15px rgba(43, 67, 87, .17);
}

.company-notice-workbench {
  min-height: 0;
  flex: 1;
  display: grid;
  grid-template-columns: 318px minmax(0, 1fr);
  background-color: #dfe8ef;
  background-image:
    linear-gradient(rgba(59, 86, 108, .04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(59, 86, 108, .032) 1px, transparent 1px),
    linear-gradient(180deg, #eef3f7 0%, #e2eaf0 100%);
  background-size: 28px 28px, 28px 28px, 100% 100%;
}

.company-notice-sidebar {
  min-height: 0;
  display: flex;
  flex-direction: column;
  border-right: 1px solid #b8c8d4;
  background: #f5f8fa;
}

.company-notice-filters {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid #cbd6de;
  padding: 13px 14px 11px;
}

.company-notice-filters button {
  height: 31px;
  min-width: 72px;
  border: 1px solid transparent;
  border-radius: 4px;
  background: transparent;
  color: #657b8d;
  padding: 0 14px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}

.company-notice-filters button:hover {
  border-color: #c3d0da;
  background: #fff;
  color: #315675;
}

.company-notice-filters button.active {
  border-color: #8da6ba;
  background: #e5edf3;
  color: #234e70;
  box-shadow:
    inset 3px 0 0 #315f82,
    inset 0 1px 0 rgba(255, 255, 255, .9);
}

.company-notice-list {
  min-height: 0;
  flex: 1;
  overflow: auto;
  padding: 10px 10px 16px;
}

.company-notice-list-item {
  position: relative;
  width: 100%;
  min-height: 104px;
  display: block;
  margin-bottom: 8px;
  border: 1px solid #d4e0e8;
  border-radius: 6px;
  background: #ffffff;
  color: #294053;
  padding: 14px 17px 14px 20px;
  text-align: left;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(45, 70, 91, .035);
  transition: background .16s ease, border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}

.company-notice-list-item::before {
  content: "";
  position: absolute;
  top: 14px;
  bottom: 14px;
  left: 0;
  width: 4px;
  border-radius: 0 3px 3px 0;
  background: #245b87;
  opacity: 0;
  transition: opacity .16s ease;
}

.company-notice-list-item:hover {
  border-color: #adc4d5;
  background: #f7fafc;
  box-shadow: 0 5px 12px rgba(42, 71, 95, .10);
  transform: translateY(-1px);
}

.company-notice-list-item.active {
  border-color: #86a9c2;
  background: #eaf3f9;
  box-shadow:
    0 6px 15px rgba(36, 67, 94, .14),
    inset 0 1px 0 rgba(255, 255, 255, .90);
}

.company-notice-list-item.active::before {
  opacity: 1;
}

.company-notice-list-item.is-read {
  color: #536a7b;
}

.company-notice-list-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #6d8191;
  font-size: 10px;
  font-weight: 650;
}

.company-notice-list-meta b,
.company-notice-list-meta i {
  min-width: 37px;
  height: 17px;
  display: inline-grid;
  place-items: center;
  border-radius: 3px;
  padding: 0 6px;
  font-size: 8px;
  font-style: normal;
  font-weight: 800;
}

.company-notice-list-meta b {
  border: 1px solid #d7a3a0;
  background: #f5e3e1;
  color: #96494b;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .72);
}

.company-notice-list-meta i {
  border: 1px solid #d5e0e7;
  background: #eef3f6;
  color: #667b8c;
}

.company-notice-list-item > strong {
  display: -webkit-box;
  overflow: hidden;
  margin-top: 9px;
  font-family: "Yu Gothic UI", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
  font-size: 13px;
  font-weight: 680;
  line-height: 1.58;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.company-notice-list-item.is-unread > strong {
  color: #23435e;
  font-weight: 720;
}

.company-notice-list-item.active > strong {
  color: #183d5d;
  font-weight: 760;
}

.company-notice-list-item > em {
  display: block;
  margin-top: 8px;
  color: #60778a;
  font-size: 9px;
  font-style: normal;
  font-weight: 650;
}

.company-notice-list-state {
  color: #738594;
  padding: 46px 20px;
  font-size: 12px;
  text-align: center;
}

.company-notice-reader {
  min-width: 0;
  min-height: 0;
  overflow: auto;
  background-color: #e6edf2;
  background-image:
    linear-gradient(rgba(59, 86, 108, .04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(59, 86, 108, .032) 1px, transparent 1px),
    linear-gradient(180deg, rgba(243, 247, 250, .84) 0%, rgba(222, 232, 239, .92) 100%);
  background-size: 28px 28px, 28px 28px, 100% 100%;
  padding: 26px 32px 38px;
  box-shadow:
    inset 12px 0 24px rgba(48, 73, 92, .055),
    inset 0 1px 0 rgba(255, 255, 255, .74);
}

.company-notice-empty {
  min-height: 100%;
  display: grid;
  place-content: center;
  gap: 7px;
  color: #7a8d9b;
  text-align: center;
}

.company-notice-empty span {
  color: #9aabb7;
  font-size: 11px;
  font-weight: 800;
}

.company-notice-empty strong {
  color: #5a7183;
  font-size: 14px;
}

.company-notice-paper {
  position: relative;
  width: min(680px, 100%);
  min-height: 530px;
  margin: 0 auto;
  overflow: hidden;
  border: 1px solid #c8c9c6;
  border-top: 4px solid #315a7d;
  border-radius: 2px;
  background-color: #fffdfa;
  background-image:
    linear-gradient(90deg, rgba(190, 201, 207, .07) 0%, rgba(255, 255, 255, 0) 11%, rgba(255, 255, 255, 0) 89%, rgba(190, 201, 207, .06) 100%),
    repeating-linear-gradient(0deg, rgba(72, 88, 99, .018) 0, rgba(72, 88, 99, .018) 1px, transparent 1px, transparent 6px),
    linear-gradient(180deg, rgba(255, 255, 255, .74) 0%, rgba(252, 249, 244, .46) 100%);
  color: #243746;
  padding: 42px 52px 32px;
  box-shadow:
    0 24px 52px rgba(28, 48, 63, .16),
    0 7px 18px rgba(38, 53, 64, .08),
    0 0 0 6px rgba(255, 255, 255, .27),
    inset 0 0 0 1px rgba(255, 255, 255, .9);
}

.company-notice-paper::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 30px;
  width: 1px;
  background: #e5d7d5;
  opacity: .72;
}

.company-notice-paper.is-loading {
  opacity: .74;
}

.company-notice-letterhead {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  border-bottom: 1px solid #b9c5ce;
  padding-bottom: 15px;
}

.company-notice-letterhead > div {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.company-notice-letterhead strong {
  color: #244f72;
  font-family: Arial, sans-serif;
  font-size: 17px;
  font-weight: 800;
}

.company-notice-letterhead span {
  color: #768894;
  font-size: 9px;
  font-weight: 700;
}

.company-notice-letterhead time {
  color: #667b8b;
  font-size: 11px;
  font-weight: 650;
  white-space: nowrap;
}

.company-notice-paper > h2 {
  margin: 28px 0 12px;
  color: #1f3548;
  font-family: "Yu Mincho", "Hiragino Mincho ProN", "Yu Gothic UI", Meiryo, serif;
  font-size: 21px;
  font-weight: 700;
  line-height: 1.6;
  text-align: center;
}

.company-notice-paper-rule {
  width: 48px;
  height: 2px;
  margin: 0 auto 27px;
  background: #6686a0;
}

.company-notice-content {
  min-height: 260px;
  color: #293b49;
  font-family: "Yu Mincho", "Hiragino Mincho ProN", "Yu Gothic", Meiryo, serif;
  font-size: 14px;
  font-weight: 450;
  line-height: 1.88;
  overflow-wrap: anywhere;
}

.company-notice-content div,
.company-notice-content p {
  margin: 0;
}

.company-notice-content table {
  width: 100%;
  margin: 18px 0;
  border-collapse: collapse;
}

.company-notice-content th,
.company-notice-content td {
  border: 1px solid #cbd3d9;
  padding: 7px 9px;
  text-align: left;
}

.company-notice-content img {
  max-width: 100%;
  height: auto;
}

.company-notice-content a {
  color: #245e88;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

.company-notice-attachments {
  margin-top: 28px;
  border-top: 1px solid #ccd5dc;
  padding-top: 18px;
}

.company-notice-attachments h3 {
  margin: 0 0 10px;
  color: #526a7c;
  font-size: 11px;
  font-weight: 800;
}

.company-notice-attachments > div {
  display: grid;
  gap: 8px;
}

.company-notice-attachments a {
  min-height: 38px;
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid #aebfcb;
  border-radius: 4px;
  background: #f4f7f9;
  color: #294d69;
  padding: 7px 11px;
  text-decoration: none;
  box-shadow:
    inset 0 1px 0 #fff,
    0 2px 4px rgba(43, 67, 85, .08);
}

.company-notice-attachments a:hover {
  border-color: #7f9aaf;
  background: #edf3f7;
  transform: translateY(-1px);
}

.company-notice-attachments a > span {
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #315f82;
  color: #fff;
  font-size: 13px;
}

.company-notice-attachments a > strong {
  font-size: 12px;
  overflow-wrap: anywhere;
}

@media (max-width: 900px) {
  .company-notice-modal {
    width: calc(100vw - 32px);
    height: calc(100vh - 48px);
  }

  .company-notice-workbench {
    grid-template-columns: 270px minmax(0, 1fr);
  }

  .company-notice-reader {
    padding: 20px;
  }

  .company-notice-paper {
    padding: 34px 34px 28px 43px;
  }
}

/* Client pre-shipment contact history: keep the case facts quiet and make the
   latest contact plus chronological record the visual focus. */
#preOrderCrmModal .preorder-crm-body {
  background: #f5f8fb;
}

#preOrderCrmModal .preorder-crm-layout {
  grid-template-columns: 304px minmax(0, 1fr);
  min-height: 594px;
  background: #f5f8fb;
}

#preOrderCrmModal .preorder-crm-info {
  border-right-color: #d5e0e8;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .72), rgba(239, 246, 251, .9)),
    #edf4f9;
  padding: 21px 17px;
}

#preOrderCrmModal .preorder-crm-client-head {
  gap: 5px;
  margin-bottom: 15px;
}

#preOrderCrmModal .preorder-crm-client-head > span {
  color: #708295;
  font-size: 10px;
  letter-spacing: .12em;
}

#preOrderCrmModal .preorder-crm-client-head > strong {
  color: #173a5d;
  font-size: 19px;
  line-height: 1.3;
}

#preOrderCrmModal .preorder-crm-client-head > em {
  color: #667c91;
  font-size: 11px;
  font-weight: 800;
}

#preOrderCrmModal .preorder-crm-info-card {
  margin-bottom: 10px;
  border-color: #d5e0e8;
  border-radius: 6px;
  background: rgba(255, 255, 255, .88);
  padding: 8px 11px;
  box-shadow: 0 3px 9px rgba(33, 60, 82, .035);
}

#preOrderCrmModal .preorder-info-row {
  grid-template-columns: 82px minmax(0, 1fr);
  gap: 8px;
  min-height: 32px;
  border-bottom-color: #e2e9ef;
  padding: 7px 0;
}

#preOrderCrmModal .preorder-info-row span {
  color: #74879a;
  font-size: 11px;
  font-weight: 800;
}

#preOrderCrmModal .preorder-info-row strong {
  color: #26425e;
  font-size: 12px;
  font-weight: 850;
}

#preOrderCrmModal .preorder-crm-records {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .96), rgba(248, 251, 253, .96));
  padding: 22px 25px 26px;
}

#preOrderCrmModal .preorder-crm-record-head {
  align-items: end;
  border-bottom: 0;
  margin: 0 0 14px;
  padding: 0;
}

#preOrderCrmModal .preorder-crm-record-head > div {
  display: grid;
  gap: 2px;
}

#preOrderCrmModal .preorder-crm-record-head span {
  min-height: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #718498;
  padding: 0;
  font-size: 10px;
  letter-spacing: .11em;
}

#preOrderCrmModal .preorder-crm-record-head strong {
  color: #193b5e;
  font-size: 20px;
  line-height: 1.2;
}

#preOrderCrmModal .preorder-crm-record-head em {
  min-height: 25px;
  display: inline-flex;
  align-items: center;
  border: 1px solid #cbd9e5;
  border-radius: 999px;
  background: #f8fbfd;
  color: #4d6982;
  padding: 0 10px;
  font-size: 11px;
  font-style: normal;
  font-weight: 850;
}

#preOrderCrmModal .preorder-record-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
  min-width: 0;
}

#preOrderCrmModal .preorder-record-meta span {
  min-height: 22px;
  display: inline-flex;
  align-items: center;
  border: 1px solid #c2d5e6;
  border-radius: 999px;
  background: #eff6fc;
  color: #2f6397;
  padding: 0 9px;
  font-size: 11px;
  font-weight: 850;
  white-space: nowrap;
}

#preOrderCrmModal .preorder-record-item.pending .preorder-record-meta span {
  border-color: #e3ca9b;
  background: #fff8eb;
  color: #986a2a;
}

#preOrderCrmModal .preorder-record-meta em {
  min-height: 22px;
  display: inline-flex;
  align-items: center;
  border: 0;
  background: transparent;
  color: #6b7f92;
  padding: 0;
  font-size: 11px;
  font-style: normal;
  font-weight: 800;
  white-space: nowrap;
}

#preOrderCrmModal .preorder-record-list.readonly {
  position: relative;
  gap: 0;
  padding: 1px 0 0;
}

#preOrderCrmModal .preorder-record-list.readonly::before {
  content: "";
  position: absolute;
  top: 16px;
  bottom: 22px;
  left: 111px;
  width: 1px;
  background: linear-gradient(180deg, #bfd1e1 0%, #dce7ef 100%);
}

#preOrderCrmModal .preorder-record-item.readonly {
  position: relative;
  grid-template-columns: 118px minmax(0, 1fr);
  gap: 16px;
  align-items: stretch;
  border: 0;
  border-left: 0;
  border-radius: 0;
  background: transparent;
  padding: 0 0 16px;
  box-shadow: none;
}

#preOrderCrmModal .preorder-record-item.readonly::before {
  content: "";
  position: absolute;
  z-index: 1;
  top: 15px;
  left: 106px;
  width: 9px;
  height: 9px;
  border: 2px solid #ffffff;
  border-radius: 50%;
  background: #4e83b6;
  box-shadow: 0 0 0 1px #9ebbd4;
}

#preOrderCrmModal .preorder-record-item.readonly.pending::before {
  background: #bf8b3d;
  box-shadow: 0 0 0 1px #d9bc89;
}

#preOrderCrmModal .preorder-record-item.readonly.latest::before {
  background: #2d6da7;
  box-shadow: 0 0 0 4px #dbeaf6;
}

#preOrderCrmModal .preorder-record-rail {
  display: grid;
  align-content: start;
  justify-items: end;
  gap: 4px;
  min-width: 0;
  padding: 7px 20px 0 0;
}

#preOrderCrmModal .preorder-record-index {
  width: auto;
  height: auto;
  display: block;
  border-radius: 0;
  background: transparent;
  color: #8ba0b3;
  font-size: 10px;
  font-weight: 850;
  letter-spacing: .06em;
  line-height: 1;
}

#preOrderCrmModal .preorder-record-rail time {
  color: #4f6981;
  font-size: 12px;
  font-weight: 900;
  line-height: 1.35;
  white-space: nowrap;
}

#preOrderCrmModal .preorder-record-main {
  gap: 8px;
  border: 1px solid #d5e0e9;
  border-radius: 6px;
  background: rgba(255, 255, 255, .92);
  padding: 13px 15px;
  box-shadow: 0 3px 10px rgba(35, 65, 91, .035);
}

#preOrderCrmModal .preorder-record-item.readonly.pending .preorder-record-main {
  border-color: #e6d3b1;
  background: #fffdf9;
}

#preOrderCrmModal .preorder-record-item.readonly.latest .preorder-record-main {
  border-color: #b9d0e3;
  background: linear-gradient(100deg, #f2f8fc, #ffffff 72%);
  box-shadow: 0 7px 16px rgba(32, 71, 104, .09);
}

#preOrderCrmModal .preorder-record-main p {
  color: #263f59;
  font-size: 13px;
  font-weight: 780;
  line-height: 1.68;
}

#preOrderCrmModal .preorder-record-foot {
  gap: 7px;
  padding-top: 2px;
}

#preOrderCrmModal .preorder-record-foot > span {
  min-height: 21px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #718497;
  padding: 0;
  font-size: 11px;
  font-weight: 800;
}

#preOrderCrmModal .preorder-crm-files {
  gap: 6px;
  margin-top: 0;
}

#preOrderCrmModal .preorder-crm-files a {
  min-height: 23px;
  border-color: #c6d7e6;
  background: #f7fbfe;
  color: #356a9d;
  font-size: 11px;
}

@media (max-width: 900px) {
  #preOrderCrmModal .preorder-crm-layout {
    grid-template-columns: 1fr;
  }

  #preOrderCrmModal .preorder-crm-info {
    border-right: 0;
    border-bottom: 1px solid #d5e0e8;
  }
}

/* Order detail workbench: actions stay secondary to the reading flow. */
.order-detail-page .detail-side {
  grid-template-columns: minmax(360px, 38fr) minmax(0, 62fr);
  align-items: start;
  gap: 16px;
}

.order-detail-page .detail-history-column {
  display: grid;
  align-content: start;
  gap: 14px;
  min-width: 0;
}

.order-detail-page .detail-side-section {
  min-width: 0;
  overflow: hidden;
  border-color: #c7d5df;
  border-radius: 6px;
  background: #fbfcfd;
  padding: 10px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .96),
    0 5px 16px rgba(37, 66, 90, .06);
}

.order-detail-page .detail-side-section h2 {
  min-height: 36px;
  margin: 0;
  border-color: #c5d4df;
  border-left-color: #315a7d;
  border-radius: 4px;
  background: linear-gradient(90deg, #f1f5f8 0%, #f8fafb 100%);
  color: #29465d;
  padding: 0 13px;
  font-size: 14px;
  font-weight: 850;
}

.order-detail-page .detail-operation-workspace .operation-command-band {
  grid-template-columns: 1fr;
  overflow: visible;
  margin-top: 9px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.order-detail-page .detail-operation-workspace .operation-command-group {
  grid-template-columns: 76px minmax(0, 1fr);
  min-height: 68px;
  padding: 11px 8px;
  border: 0;
  border-bottom: 1px solid #dbe4eb;
  background: transparent;
}

.order-detail-page .detail-operation-workspace .operation-command-group:nth-child(even) {
  background: rgba(242, 247, 250, .52);
}

.order-detail-page .detail-operation-workspace .operation-command-group:last-child {
  border-bottom: 0;
}

.order-detail-page .detail-operation-workspace .operation-command-label {
  justify-content: center;
  min-height: 38px;
  align-self: center;
  border-right-width: 2px;
  color: #48667d;
  font-size: 12px;
}

.order-detail-page .detail-operation-workspace .operation-command-band .downloads,
.order-detail-page .detail-operation-workspace .operation-command-band .actions {
  gap: 8px;
}

.order-detail-page .detail-operation-workspace .operation-command-band .downloads a,
.order-detail-page .detail-operation-workspace .operation-command-band .actions button {
  width: 196px;
  max-width: 100%;
}

.order-detail-page .detail-timeline-workspace .old-timeline {
  margin-top: 8px;
  padding: 1px 2px 4px;
}

.order-detail-page .detail-timeline-workspace .timeline-date-group {
  grid-template-columns: 118px minmax(0, 1fr);
  gap: 14px;
  padding: 7px 8px 7px 2px;
}

.order-detail-page .detail-timeline-workspace .timeline-date-group > header {
  padding-top: 11px;
}

.order-detail-page .detail-timeline-workspace .timeline-date-group > header time {
  color: #47647b;
  font-size: 12px;
}

.order-detail-page .detail-timeline-workspace .compact-timeline .timeline-item {
  grid-template-columns: 56px minmax(0, 1fr);
  min-height: 42px;
  margin-right: 0;
  padding: 8px 10px 8px 19px;
}

.order-detail-page .detail-timeline-workspace .compact-timeline .timeline-item > div {
  color: #243b50;
  font-size: 13px;
  line-height: 1.6;
}

.order-detail-page .detail-timeline-workspace .compact-timeline .timeline-client-item,
.order-detail-page .detail-timeline-workspace .compact-timeline .timeline-client-sub-item {
  margin-left: 12px;
}

.order-detail-page .detail-timeline-workspace .timeline-toggle-button {
  margin-top: 12px;
}

.client-request-list {
  min-width: 0;
  padding: 8px 12px 2px;
}

.client-request-row {
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr);
  gap: 12px;
  padding: 12px 4px;
  border-bottom: 1px solid #dbe5ec;
}

.client-request-row:last-child {
  border-bottom: 0;
}

.client-request-row > time {
  padding-top: 2px;
  color: #61778b;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

.client-request-content {
  min-width: 0;
  padding-left: 12px;
  border-left: 3px solid #c49b57;
  color: #2b4052;
  font-size: 13px;
  line-height: 1.55;
  overflow-wrap: anywhere;
}

.client-request-summary {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 9px;
}

.client-request-summary strong,
.client-request-label {
  font-weight: 700;
}

.client-request-summary > span:nth-child(2) {
  color: #9a6a2b;
  font-size: 12px;
  font-weight: 700;
}

.client-request-deadline {
  color: #60778b;
  font-size: 12px;
}

.client-request-details {
  margin-top: 5px;
}

.client-request-details summary {
  width: fit-content;
  padding: 1px 2px;
  color: #345f7f;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}

.client-request-details summary:hover,
.client-request-details summary:focus-visible {
  color: #1f4c70;
  text-decoration: underline;
}

.client-request-details ol,
.client-request-details ul {
  display: grid;
  gap: 7px;
  margin: 8px 0 2px;
  padding-left: 22px;
  color: #40576b;
  font-size: 12px;
}

@media (max-width: 680px) {
  .order-detail-page .detail-timeline-workspace .timeline-date-group {
    grid-template-columns: minmax(0, 1fr);
    gap: 4px;
  }

  .order-detail-page .detail-timeline-workspace .timeline-date-group > header {
    padding-top: 0;
  }

  .client-request-row {
    grid-template-columns: 1fr;
    gap: 5px;
  }

}

@media (max-width: 1040px) {
  .order-detail-page .detail-side {
    grid-template-columns: 1fr;
  }
}

/* Client validation: show the exact incomplete field only after a failed submit. */
.client-form-error {
  flex: 0 0 auto;
  grid-column: 1 / -1;
  min-width: 0;
  margin: 10px 18px;
  padding: 10px 12px;
  border: 1px solid #edc7c5;
  border-left: 3px solid #b42318;
  border-radius: 6px;
  background: #fff6f5;
  color: #9b2921;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.6;
  white-space: pre-line;
  overflow-wrap: anywhere;
}
.customer-task-form > .client-form-error,
.customer-task-reply-form > .client-form-error { margin-inline: 0; }
.field-required {
  display: inline-block;
  margin-left: 4px;
  color: #b64b55;
  font-size: 10px;
  font-style: normal;
  font-weight: 800;
  letter-spacing: 0;
  vertical-align: 1px;
  white-space: nowrap;
}

.login-field.is-invalid input,
.password-field.is-invalid input,
.action-modal .validation-field.is-invalid input,
.action-modal .validation-field.is-invalid select,
.action-modal input.is-invalid,
.action-modal select.is-invalid {
  border-color: #bd5962 !important;
  background-color: #fff8f8 !important;
  box-shadow: 0 0 0 3px rgba(189, 89, 98, .12) !important;
}

.login-field.is-invalid > span,
.password-field.is-invalid > span,
.action-modal .validation-field.is-invalid > span:first-child {
  color: #a83e49;
}

.action-modal .customs-time-options.is-invalid,
.action-modal .validation-group.is-invalid,
.client-export-fields.is-invalid {
  outline: 2px solid rgba(189, 89, 98, .72);
  outline-offset: 3px;
  border-radius: 7px;
  background-color: #fff8f8;
}

.action-modal .customs-time-options.is-invalid label {
  border-color: #d38a91;
}

.action-modal .subscribe-required-label {
  margin-bottom: -3px;
  color: #587088;
  font-size: 12px;
  font-weight: 800;
}

.action-modal .bill-date-field > span,
.action-modal .customs-request-deadline-head strong {
  color: #445d75;
}

/* Keep the certificate request focused on the recipient rows, not duplicated order context. */
.action-modal:has(.origin-certificate-request) {
  width: min(740px, 100%);
}

.origin-certificate-request {
  gap: 0;
}

.origin-certificate-request .client-action-editor {
  gap: 10px;
  border: 0;
  padding: 0;
}

.origin-certificate-request .client-action-editor > h3 {
  display: flex;
  align-items: center;
  gap: 9px;
  color: #264f7d;
  font-size: 13px;
}

.origin-certificate-request .client-action-editor > h3::before {
  width: 3px;
  height: 17px;
  border-radius: 2px;
  background: #316aa5;
  content: "";
}

.origin-certificate-request .origin-certificate-editor {
  display: grid;
  gap: 0;
  overflow: hidden;
  border: 1px solid #c5d6e5;
  border-top: 2px solid #4779ac;
  border-radius: 6px;
  background: #fff;
  box-shadow: 0 8px 22px rgba(28, 57, 85, .07);
}

.origin-certificate-request .origin-certificate-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-height: 44px;
  padding: 0 13px;
  border-bottom: 1px solid #d9e4ed;
  background: linear-gradient(180deg, #fbfdff, #f2f7fb);
}

.origin-certificate-request .origin-certificate-toolbar > span {
  color: #355b7d;
  font-size: 13px;
  font-weight: 900;
}

.origin-certificate-request .origin-certificate-toolbar > b {
  flex: 0 0 auto;
  border: 1px solid #c7d8e7;
  border-radius: 999px;
  background: #fff;
  color: #53708a;
  padding: 3px 9px;
  font-size: 11px;
  font-weight: 900;
  white-space: nowrap;
}

.origin-certificate-request .origin-certificate-head,
.origin-certificate-request .origin-certificate-row {
  grid-template-columns: minmax(164px, 1.15fr) minmax(92px, .66fr) minmax(185px, 1.45fr) 52px;
  gap: 8px;
}

.origin-certificate-request .origin-certificate-head {
  padding: 10px 13px 7px;
  background: #f9fbfd;
  color: #62788f;
  font-size: 11px;
  font-weight: 900;
}

.origin-certificate-request [data-origin-rows] {
  display: grid;
}

.origin-certificate-request .origin-certificate-row {
  border: 0;
  border-radius: 0;
  border-top: 1px solid #e2eaf1;
  background: #fff;
  box-shadow: none;
  padding: 10px 13px 11px;
}

.origin-certificate-request .origin-certificate-row + .origin-certificate-row {
  border-top-color: #ccdbe7;
}

.origin-certificate-request .origin-certificate-row select,
.origin-certificate-request .origin-certificate-row input {
  min-height: 38px;
  border-radius: 4px;
  font-size: 13px;
}

.origin-certificate-request .origin-certificate-row select {
  height: 38px;
}

.origin-certificate-request .origin-certificate-row [name="originType"] {
  color: #476884;
  font-weight: 900;
  text-align: center;
}

.origin-certificate-request .origin-certificate-row button,
.origin-certificate-request .origin-add-button {
  min-height: 36px;
  border-radius: 4px;
  font-size: 12px;
}

.origin-certificate-request .origin-certificate-row button {
  min-width: 52px;
  border-color: #d0dce7;
  background: #f8fafc;
  color: #63778b;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .96);
}

.origin-certificate-request .origin-certificate-row button:disabled {
  visibility: hidden;
}

.origin-certificate-request .origin-add-button {
  justify-self: start;
  margin: 10px 13px 13px;
  border-color: #b6cbde;
  background: linear-gradient(#fff, #edf4f9);
  color: #2f5f92;
  padding: 0 14px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .94), 0 2px 4px rgba(36, 74, 110, .10);
}

.origin-certificate-request .origin-add-button:hover {
  border-color: #7598b8;
  background: #fff;
  color: #1f5287;
  transform: translateY(-1px);
}

/* Client order action dialogs share one quiet request-sheet language. */
.action-modal:has(.action-request-sheet) {
  width: min(740px, 100%);
}

.action-request-sheet {
  gap: 0;
}

.action-request-sheet .client-action-editor {
  display: grid;
  gap: 10px;
  border: 0;
  padding: 0;
}

.action-request-sheet .client-action-editor > h3 {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0;
  color: #264f7d;
  font-size: 13px;
  font-weight: 900;
}

.action-request-sheet .client-action-editor > h3::before {
  width: 3px;
  height: 17px;
  border-radius: 2px;
  background: #316aa5;
  content: "";
}

.action-request-sheet .client-action-primary {
  overflow: hidden;
  border: 1px solid #c5d6e5;
  border-top: 2px solid #4779ac;
  border-radius: 6px;
  background: #fff;
  padding: 0;
  box-shadow: 0 8px 22px rgba(28, 57, 85, .07);
}

.action-request-sheet .client-action-primary > div {
  grid-template-columns: 116px minmax(0, 1fr);
  min-height: 50px;
  border-bottom: 1px solid #dfe8ef;
  padding: 0 13px;
}

.action-request-sheet .client-action-primary dt {
  color: #667b90;
  font-size: 12px;
  font-weight: 800;
}

.action-request-sheet .client-action-primary dd {
  color: #203852;
  font-size: 14px;
  font-weight: 800;
}

.customs-clearance-request .customs-request-factories {
  overflow: hidden;
  border: 1px solid #c5d6e5;
  border-top: 2px solid #4779ac;
  border-bottom-color: #dfe8ef;
  border-radius: 6px 6px 0 0;
  background: #fff;
  box-shadow: 0 8px 22px rgba(28, 57, 85, .07);
}

.customs-clearance-request .customs-factory-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 42px;
  border-bottom: 1px solid #dfe8ef;
  background: linear-gradient(180deg, #fbfdff, #f2f7fb);
  padding: 0 13px;
}

.customs-clearance-request .customs-factory-toolbar > span,
.customs-clearance-request .customs-request-deadline-head strong,
.customs-clearance-request .customs-deadline-field > span {
  color: #667b90;
  font-size: 12px;
  font-weight: 800;
}

.customs-clearance-request .customs-factory-toolbar > b {
  border: 1px solid #c7d8e7;
  border-radius: 999px;
  background: #fff;
  color: #53708a;
  padding: 3px 9px;
  font-size: 11px;
  font-weight: 900;
  white-space: nowrap;
}

.customs-clearance-request .customs-factory-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  padding: 11px 13px 20px;
}

.customs-clearance-request .customs-factory-option {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
  min-height: 38px;
  border: 1px solid #cbd9e5;
  border-radius: 5px;
  background: #fbfdff;
  color: #29455f;
  padding: 0 11px;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
  box-shadow: inset 0 1px 0 #fff;
  transition: border-color .16s ease, background-color .16s ease, box-shadow .16s ease;
}

.customs-clearance-request .customs-factory-option:hover {
  border-color: #88a9c5;
  background: #f5f9fc;
}

.customs-clearance-request .customs-factory-option:has(input:checked) {
  border-color: #5f8eb9;
  background: #eef5fb;
  box-shadow: inset 3px 0 0 #3973aa, inset 0 1px 0 #fff;
}

.customs-clearance-request .customs-factory-option input {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: #2f69a4;
}

.customs-clearance-request .customs-factory-option span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.customs-clearance-request .customs-factory-empty {
  grid-column: 1 / -1;
  margin: 0;
  color: #8a5b5b;
  font-size: 12px;
  font-weight: 700;
}

.customs-clearance-request .customs-request-factories.is-invalid {
  border-color: #d45c5c;
  box-shadow: 0 0 0 2px rgba(196, 58, 58, .12), 0 8px 22px rgba(28, 57, 85, .07);
}

.customs-clearance-request .customs-request-deadline input {
  height: 38px;
  min-height: 38px;
  border-radius: 4px;
  font-size: 13px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .95), 0 2px 5px rgba(32, 56, 82, .06);
}

.customs-clearance-request .customs-request-deadline {
  gap: 9px;
  margin-top: -10px;
  border: 1px solid #c5d6e5;
  border-top: 0;
  border-radius: 0 0 6px 6px;
  background: #fff;
  padding: 10px 13px 13px;
  box-shadow: 0 8px 22px rgba(28, 57, 85, .07);
}

.customs-clearance-request .customs-request-deadline-head {
  justify-content: flex-start;
  min-height: 20px;
}

.customs-clearance-request .customs-request-deadline-controls {
  grid-template-columns: minmax(190px, .8fr) minmax(286px, 1.2fr);
}

.customs-clearance-request .customs-time-options label {
  min-height: 38px;
  border-radius: 4px;
  font-size: 12px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .95), 0 2px 5px rgba(32, 56, 82, .07);
}

.origin-certificate-request .origin-certificate-deadline {
  gap: 9px;
  margin: 10px 0 0;
  border: 1px solid #c5d6e5;
  border-top: 2px solid #4779ac;
  border-radius: 6px;
  background: #fff;
  padding: 10px 13px 13px;
  box-shadow: 0 8px 22px rgba(28, 57, 85, .07);
}

.origin-certificate-request .customs-request-deadline-head {
  justify-content: flex-start;
  min-height: 20px;
}

.origin-certificate-request .customs-request-deadline-head strong,
.origin-certificate-request .customs-deadline-field > span {
  color: #667b90;
  font-size: 12px;
  font-weight: 800;
}

.origin-certificate-request .customs-request-deadline-controls {
  grid-template-columns: minmax(190px, .8fr) minmax(286px, 1.2fr);
}

.origin-certificate-request .customs-request-deadline input {
  height: 38px;
  min-height: 38px;
  border-radius: 4px;
  font-size: 13px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .95), 0 2px 5px rgba(32, 56, 82, .06);
}

.origin-certificate-request .customs-time-options label {
  min-height: 38px;
  border-radius: 4px;
  font-size: 12px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .95), 0 2px 5px rgba(32, 56, 82, .07);
}

.arrival-reminder-request .arrival-reminder-deadline {
  gap: 9px;
  margin: 10px 0 0;
  border: 1px solid #c5d6e5;
  border-top: 2px solid #4779ac;
  border-radius: 6px;
  background: #fff;
  padding: 10px 13px 13px;
  box-shadow: 0 8px 22px rgba(28, 57, 85, .07);
}

.arrival-reminder-request .customs-request-deadline-head {
  justify-content: flex-start;
  min-height: 20px;
}

.arrival-reminder-request .customs-request-deadline-head strong,
.arrival-reminder-request .customs-deadline-field > span {
  color: #667b90;
  font-size: 12px;
  font-weight: 800;
}

.arrival-reminder-request .customs-request-deadline-controls {
  grid-template-columns: minmax(190px, .8fr) minmax(286px, 1.2fr);
}

.arrival-reminder-request .customs-request-deadline input {
  height: 38px;
  min-height: 38px;
  border-radius: 4px;
  font-size: 13px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .95), 0 2px 5px rgba(32, 56, 82, .06);
}

.arrival-reminder-request .customs-time-options label {
  min-height: 38px;
  border-radius: 4px;
  font-size: 12px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .95), 0 2px 5px rgba(32, 56, 82, .07);
}

.subscription-request .subscribe-required-label {
  display: grid;
  grid-template-columns: minmax(0, 1fr) max-content;
  align-items: center;
  gap: 4px 12px;
  margin: 0;
  color: #667b90;
}

.subscription-request .subscribe-required-label > span {
  color: #4779ac;
  font-size: 10px;
  font-weight: 950;
  letter-spacing: .08em;
}

.subscription-request .subscribe-required-label > b {
  color: #2d4e6d;
  font-size: 13px;
  font-weight: 900;
}

.subscription-request .subscribe-required-label > strong {
  grid-row: 1 / span 2;
  grid-column: 2;
  border: 1px solid #85a9c9;
  border-radius: 999px;
  background: #f7fbfe;
  color: #2f5f9f;
  padding: 5px 10px;
  font-size: 11px;
  font-weight: 950;
  white-space: nowrap;
}

.subscription-request .subscribe-timeline {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: 0;
  box-shadow: none;
}

.subscription-request .subscribe-timeline::before {
  display: none;
}

.subscription-request .subscribe-option {
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 8px !important;
  min-height: 88px;
  border: 1px solid #c5d6e5;
  border-radius: 8px;
  background: #fff;
  padding: 10px !important;
  box-shadow: 0 5px 12px rgba(28, 57, 85, .06);
}

.subscription-request .subscribe-option:last-child {
  border-bottom: 1px solid #c5d6e5;
}

.subscription-request .subscribe-node {
  padding: 0;
}

.subscription-request .subscribe-step {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  font-size: 12px;
  box-shadow: none;
}

.subscription-request .subscribe-check {
  right: -1px;
  top: 30px;
  width: 14px;
  height: 14px;
}

.subscription-request .subscribe-copy,
.subscription-request .subscribe-option input:checked ~ .subscribe-copy,
.subscription-request .subscribe-option.is-disabled .subscribe-copy {
  min-height: 66px;
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: 6px 70px 6px 2px;
  box-shadow: none;
  transform: none;
}

.subscription-request .subscribe-copy::before {
  display: none;
}

.subscription-request .subscribe-option:hover {
  border-color: #86afcf;
  background: #f7fbfe;
}

.subscription-request .subscribe-option.is-selected {
  border-color: #2f5f9f;
  background: linear-gradient(135deg, #eaf4fb, #fff);
  box-shadow: inset 4px 0 0 #2f5f9f, 0 8px 16px rgba(47, 95, 159, .14);
}

.subscription-request .subscribe-option input:checked ~ .subscribe-copy b {
  padding-right: 0;
}

.subscription-request .subscribe-copy b {
  font-size: 13px;
}

.subscription-request .subscribe-copy em {
  font-size: 11px;
  font-weight: 700;
}

.subscription-request .subscribe-status {
  top: 10px;
  right: 10px;
  display: inline-flex;
  border-color: #a8bac9;
  background: #f8fbfd;
  color: #5c7287;
}

.subscription-request .subscribe-option.is-selected .subscribe-status {
  border-color: #2f5f9f;
  background: #2f5f9f;
  color: #fff;
}

.subscription-request .subscribe-option.is-disabled .subscribe-status {
  border-color: #c6d1db;
  background: #e4ebf1;
  color: #788898;
}

@media (max-width: 680px) {
  .subscription-request .subscribe-timeline { grid-template-columns: 1fr; }
}

.bill-date-request .bill-date-field {
  display: grid;
  grid-template-columns: 116px minmax(220px, 300px);
  align-items: center;
  min-height: 60px;
  border: 1px solid #c5d6e5;
  border-top: 2px solid #4779ac;
  border-radius: 6px 6px 0 0;
  background: #fff;
  padding: 9px 13px;
  box-shadow: 0 8px 22px rgba(28, 57, 85, .07);
}

.bill-date-request .bill-date-field input {
  width: 100%;
  min-height: 38px;
  border-radius: 4px;
  font-size: 13px;
}

.action-sheet-note {
  margin: -10px 0 0;
  border: 1px solid #c5d6e5;
  border-top: 0;
  border-radius: 0 0 6px 6px;
  background: #f8fbfd;
  color: #667b90;
  padding: 10px 13px;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.55;
  box-shadow: 0 8px 22px rgba(28, 57, 85, .07);
}

@media (max-width: 680px) {
  .bill-date-request .bill-date-field {
    grid-template-columns: 1fr;
  }

  .customs-clearance-request .customs-factory-list {
    grid-template-columns: 1fr;
  }

  .customs-clearance-request .customs-request-deadline-controls {
    grid-template-columns: 1fr;
  }

  .origin-certificate-request .customs-request-deadline-controls {
    grid-template-columns: 1fr;
  }

  .arrival-reminder-request .customs-request-deadline-controls {
    grid-template-columns: 1fr;
  }

  .customs-clearance-request .customs-request-deadline .customs-time-options {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .origin-certificate-request .customs-request-deadline .customs-time-options {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .arrival-reminder-request .customs-request-deadline .customs-time-options {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Final confirmation is a separate decision point; action forms stay focused on input. */
.action-final-confirmation-backdrop {
  position: fixed;
  z-index: 1300;
  inset: 0;
  display: grid;
  place-items: center;
  box-sizing: border-box;
  padding: 24px;
  background: rgba(28, 49, 70, .38);
  backdrop-filter: blur(3px);
}

.action-final-confirmation {
  width: min(580px, 100%);
  overflow: hidden;
  border: 1px solid #bfd0df;
  border-radius: 7px;
  background: #fff;
  box-shadow: 0 22px 52px rgba(19, 41, 63, .28);
}

.action-final-confirmation > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 72px;
  border-bottom: 1px solid #d7e2eb;
  background: #f7fafc;
  padding: 0 20px 0 23px;
}

.action-final-confirmation > header > div {
  display: grid;
  gap: 3px;
}

.action-final-confirmation > header span {
  color: #647b90;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .06em;
}

.action-final-confirmation > header strong {
  color: #203e5d;
  font-size: 17px;
  font-weight: 800;
}

.action-final-confirmation > header button {
  display: grid;
  width: 32px;
  height: 32px;
  place-items: center;
  border: 1px solid #b9cddd;
  border-radius: 5px;
  background: #fff;
  color: #61788d;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}

.action-final-confirmation > header button:hover {
  border-color: #7f9fba;
  color: #244d72;
}

.action-final-confirmation-body {
  padding: 20px 23px 22px;
}

.action-final-confirmation-body > p {
  margin: 0 0 13px;
  color: #526d84;
  font-size: 13px;
  line-height: 1.65;
}

.action-final-confirmation-body dl {
  margin: 0;
  overflow: hidden;
  border: 1px solid #d5e0e9;
  border-radius: 5px;
  background: #fff;
}

.action-final-confirmation-body dl > div {
  display: grid;
  grid-template-columns: 122px minmax(0, 1fr);
  align-items: stretch;
  border-bottom: 1px solid #e1e9ef;
}

.action-final-confirmation-body dl > div:last-child {
  border-bottom: 0;
}

.action-final-confirmation-body dt {
  display: flex;
  align-items: center;
  background: #f5f8fb;
  padding: 11px 12px;
  color: #5a7288;
  font-size: 12px;
  font-weight: 800;
}

.action-final-confirmation-body dd {
  min-width: 0;
  margin: 0;
  padding: 11px 14px;
  color: #273f56;
  font-size: 13px;
  font-weight: 650;
  line-height: 1.6;
  overflow-wrap: anywhere;
}

.action-final-confirmation > footer {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  border-top: 1px solid #dce6ed;
  background: #f8fafc;
  padding: 14px 20px;
}

.action-final-confirmation > footer button {
  min-width: 82px;
  min-height: 34px;
  border: 1px solid #b7cad9;
  border-radius: 5px;
  background: #fff;
  color: #405f78;
  font-size: 13px;
  font-weight: 750;
  cursor: pointer;
}

.action-final-confirmation > footer button:hover {
  border-color: #7e9fbc;
  background: #f3f8fc;
}

.action-final-confirmation > footer button.primary {
  border-color: #285f92;
  background: #316fa9;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28), 0 2px 3px rgba(30, 67, 103, .18);
  color: #fff;
}

.action-final-confirmation > footer button.primary:hover {
  border-color: #1f527f;
  background: #285f94;
}

@media (max-width: 680px) {
  .action-final-confirmation-backdrop {
    align-items: end;
    padding: 12px;
  }

  .action-final-confirmation > header {
    min-height: 64px;
    padding: 0 16px 0 18px;
  }

  .action-final-confirmation-body {
    max-height: min(58vh, 520px);
    overflow: auto;
    padding: 16px 18px 18px;
  }

  .action-final-confirmation-body dl > div {
    grid-template-columns: 1fr;
  }

  .action-final-confirmation-body dt {
    padding: 8px 11px 3px;
  }

  .action-final-confirmation-body dd {
    padding: 3px 11px 10px;
  }

  .action-final-confirmation > footer {
    gap: 6px;
    padding: 11px 13px;
  }

  .action-final-confirmation > footer button {
    min-width: 0;
    flex: 1;
  }
}
.legacy-order-table a.doc-bill-name.doc-bill-copy,
.legacy-order-table a.doc-bill-name.doc-bill-air,
.operation-command-band .operation-command-group .downloads a.detail-download-link.detail-primary-bill-air,
.legacy-order-table a.doc-bill-name.doc-bill-surrender,
.operation-command-band .operation-command-group .downloads a.detail-download-link.detail-primary-bill-copy,
.operation-command-band .operation-command-group .downloads a.detail-download-link.detail-primary-bill-surrender {
  --bill-top: #f5f9fd;
  --bill-bottom: #deebf6;
  --bill-edge: #9bb5cb;
  --bill-ink: #284d6c;
  --bill-highlight: #d2e1ed;
  border-radius: 999px;
  border-color: var(--bill-edge);
  border-top-color: var(--bill-highlight);
  background: linear-gradient(var(--bill-top), var(--bill-bottom));
  color: var(--bill-ink);
  text-shadow: none;
  box-shadow: inset 0 2px 0 #ffffffdd, inset 0 -2px 3px #173f6010, 0 3px 0 var(--bill-edge), 0 5px 9px #173f6022;
  transition: transform 150ms ease, box-shadow 150ms ease, filter 150ms ease;
}

.legacy-order-table a.doc-bill-name.doc-bill-surrender,
.operation-command-band .operation-command-group .downloads a.detail-download-link.detail-primary-bill-surrender {
  --bill-top: #f0faf6;
  --bill-bottom: #cde7dd;
  --bill-edge: #83b29f;
  --bill-ink: #235646;
  --bill-highlight: #c3e2d6;
}

.legacy-order-table a.doc-bill-name.doc-bill-copy:hover,
.legacy-order-table a.doc-bill-name.doc-bill-air:hover,
.operation-command-band .operation-command-group .downloads a.detail-download-link.detail-primary-bill-air:hover,
.legacy-order-table a.doc-bill-name.doc-bill-surrender:hover,
.operation-command-band .operation-command-group .downloads a.detail-download-link.detail-primary-bill-copy:hover,
.operation-command-band .operation-command-group .downloads a.detail-download-link.detail-primary-bill-surrender:hover {
  background: linear-gradient(var(--bill-top), var(--bill-bottom));
  color: var(--bill-ink);
  border-color: var(--bill-edge);
  text-shadow: none;
  filter: brightness(1.025);
  transform: translateY(-1px);
  box-shadow: inset 0 2px 0 #fffffff0, inset 0 -2px 3px #173f6010, 0 4px 0 var(--bill-edge), 0 7px 11px #173f6026;
}

.legacy-order-table a.doc-bill-name.doc-bill-copy:active,
.legacy-order-table a.doc-bill-name.doc-bill-air:active,
.operation-command-band .operation-command-group .downloads a.detail-download-link.detail-primary-bill-air:active,
.legacy-order-table a.doc-bill-name.doc-bill-surrender:active,
.operation-command-band .operation-command-group .downloads a.detail-download-link.detail-primary-bill-copy:active,
.operation-command-band .operation-command-group .downloads a.detail-download-link.detail-primary-bill-surrender:active {
  background: linear-gradient(var(--bill-top), var(--bill-bottom));
  color: var(--bill-ink);
  transform: translateY(1px);
  box-shadow: inset 0 1px 2px #12304a30, 0 1px 0 var(--bill-edge);
}

.legacy-order-table a.doc-bill-name.doc-bill-copy:focus-visible,
.legacy-order-table a.doc-bill-name.doc-bill-air:focus-visible,
.operation-command-band .operation-command-group .downloads a.detail-download-link.detail-primary-bill-air:focus-visible,
.legacy-order-table a.doc-bill-name.doc-bill-surrender:focus-visible,
.operation-command-band .operation-command-group .downloads a.detail-download-link.detail-primary-bill-copy:focus-visible,
.operation-command-band .operation-command-group .downloads a.detail-download-link.detail-primary-bill-surrender:focus-visible {
  outline: 2px solid #3979ac;
  outline-offset: 3px;
}
/* Keep full vessel names and their leg-specific action separate on both screen sizes. */
.old-detail-table .old-ship-name,
.old-detail-table .old-leg-ship-name {
  white-space: normal;
  overflow-wrap: anywhere;
}
.ship-tracking-layout {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  min-width: 0;
  max-width: 100%;
  white-space: normal;
}
.ship-tracking-layout > .ship-tracking-name {
  flex: 0 1 auto;
  min-width: 0;
  max-width: 100%;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: normal;
}
.old-detail-table .ship-tracking-layout > button {
  flex: 0 0 auto;
  margin: 0;
  white-space: nowrap;
}
@media (max-width: 640px) {
  .old-detail-table .ship-tracking-layout > button { min-height: 36px; }
}