:root {
  color-scheme: light;
  --ink: #16211f;
  --muted: #66736f;
  --line: #d9dfdc;
  --paper: #f6f8f7;
  --panel: #ffffff;
  --green: #0d7c66;
  --green-dark: #075846;
  --amber: #b56318;
  --red: #b42318;
  --blue: #255f99;
  --shadow: 0 12px 36px rgba(22, 33, 31, 0.08);
  font-family:
    "Microsoft YaHei UI", "Microsoft YaHei", "Noto Sans SC", system-ui,
    sans-serif;
}

/* Auth and administration surfaces */
.portal-user {
  display: inline-grid;
  min-width: 88px;
  gap: 1px;
  align-content: center;
  padding: 5px 10px;
  border-left: 1px solid #d9dee5;
  color: #20262e;
  letter-spacing: 0;
}

.portal-user strong {
  overflow: hidden;
  max-width: 140px;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
}

.portal-user small {
  color: #68727f;
  font-size: 11px;
}

.auth-page,
.admin-page {
  margin: 0;
  min-width: 320px;
  color: #20262e;
  background: #f2f4f7;
  font-family: "Microsoft YaHei", "PingFang SC", Arial, sans-serif;
  letter-spacing: 0;
}

.auth-page {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 32px;
}

.auth-shell {
  width: min(920px, 100%);
  min-height: 540px;
  display: grid;
  grid-template-columns: minmax(300px, 1fr) minmax(360px, 440px);
  overflow: hidden;
  border: 1px solid #d7dce3;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 18px 44px rgba(31, 39, 49, 0.12);
}

.auth-brand {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 64px 54px;
  color: #f7f9fb;
  background: #1f2933;
}

.auth-kicker,
.admin-kicker {
  margin: 0 0 12px;
  color: #4da3ff;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: uppercase;
}

.auth-brand h1 {
  margin: 0;
  max-width: 330px;
  font-size: 34px;
  line-height: 1.28;
  letter-spacing: 0;
}

.auth-brand p:last-child {
  max-width: 330px;
  margin: 22px 0 0;
  color: #b9c2cc;
  font-size: 15px;
  line-height: 1.8;
}

.auth-panel {
  padding: 36px 42px 42px;
}

.auth-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  height: 40px;
  padding: 3px;
  border: 1px solid #d8dde4;
  border-radius: 6px;
  background: #eef1f4;
}

.auth-tab {
  border: 0;
  border-radius: 4px;
  color: #5b6571;
  background: transparent;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.auth-tab.is-active {
  color: #1f2933;
  background: #fff;
  box-shadow: 0 1px 3px rgba(31, 39, 49, 0.12);
}

.auth-form {
  display: grid;
  gap: 18px;
  margin-top: 34px;
}

.auth-form-heading {
  margin-bottom: 4px;
}

.auth-form-heading h2 {
  margin: 0;
  font-size: 22px;
  letter-spacing: 0;
}

.auth-form-heading p {
  margin: 8px 0 0;
  color: #77818d;
  font-size: 13px;
}

.auth-form label,
.invite-form label,
.audit-filters label,
.admin-dialog label {
  display: grid;
  gap: 7px;
  color: #4f5965;
  font-size: 13px;
  font-weight: 700;
}

.auth-form input,
.invite-form input,
.audit-filters input,
.audit-filters select,
.admin-dialog input {
  box-sizing: border-box;
  width: 100%;
  height: 42px;
  border: 1px solid #cbd2da;
  border-radius: 5px;
  padding: 0 12px;
  color: #20262e;
  background: #fff;
  font: inherit;
  letter-spacing: 0;
  outline: 0;
}

.auth-form input:focus,
.invite-form input:focus,
.audit-filters input:focus,
.audit-filters select:focus,
.admin-dialog input:focus {
  border-color: #1769aa;
  box-shadow: 0 0 0 3px rgba(23, 105, 170, 0.13);
}

.auth-primary {
  height: 44px;
  border: 1px solid #1769aa;
  border-radius: 5px;
  color: #fff;
  background: #1769aa;
  font: inherit;
  font-weight: 800;
  cursor: pointer;
}

.auth-primary:hover {
  background: #135b95;
}

.auth-primary:disabled {
  cursor: wait;
  opacity: 0.65;
}

.auth-status {
  min-height: 20px;
  margin: -4px 0;
  color: #24734a;
  font-size: 13px;
}

.auth-status.is-error,
.dialog-status {
  color: #b42318;
}

.admin-header {
  min-height: 82px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 16px 28px;
  border-bottom: 1px solid #d8dde4;
  background: #fff;
}

.admin-header h1 {
  margin: 0;
  font-size: 24px;
  letter-spacing: 0;
}

.admin-header .admin-kicker {
  margin-bottom: 4px;
  color: #1769aa;
}

.admin-header-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.admin-main {
  width: min(1480px, calc(100% - 40px));
  margin: 24px auto 48px;
}

.admin-tabs {
  display: flex;
  gap: 2px;
  border-bottom: 1px solid #cfd5dc;
}

.admin-tab {
  min-width: 104px;
  height: 42px;
  border: 0;
  border-bottom: 3px solid transparent;
  color: #65707c;
  background: transparent;
  font: inherit;
  font-weight: 800;
  cursor: pointer;
}

.admin-tab.is-active {
  border-bottom-color: #1769aa;
  color: #1769aa;
}

.admin-section {
  padding-top: 24px;
}

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

.admin-section-heading h2 {
  margin: 0;
  font-size: 19px;
  letter-spacing: 0;
}

.admin-section-heading p,
.admin-count {
  margin: 5px 0 0;
  color: #727d89;
  font-size: 13px;
}

.admin-table-wrap {
  overflow: auto;
  border: 1px solid #d7dce3;
  border-radius: 6px;
  background: #fff;
}

.admin-table {
  width: 100%;
  min-width: 940px;
  border-collapse: collapse;
  table-layout: auto;
  font-size: 13px;
}

.admin-table th,
.admin-table td {
  padding: 11px 12px;
  border-bottom: 1px solid #e5e8ec;
  text-align: left;
  vertical-align: middle;
}

.admin-table th {
  position: sticky;
  top: 0;
  z-index: 1;
  color: #58626e;
  background: #f5f7f9;
  font-size: 12px;
  white-space: nowrap;
}

.admin-table tbody tr:last-child td {
  border-bottom: 0;
}

.admin-table tbody tr:hover {
  background: #f8fafc;
}

.admin-table td small {
  display: block;
  max-width: 520px;
  margin-top: 4px;
  overflow: hidden;
  color: #b42318;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-row-actions {
  display: flex;
  min-width: 240px;
  flex-wrap: wrap;
  gap: 6px;
}

.table-action {
  border: 0;
  padding: 3px 6px;
  color: #1769aa;
  background: transparent;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.table-action:hover {
  text-decoration: underline;
}

.table-action:disabled {
  cursor: wait;
  opacity: 0.5;
}

.status-badge {
  display: inline-flex;
  min-width: 48px;
  justify-content: center;
  padding: 3px 7px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 800;
}

.status-badge.is-success {
  color: #146c43;
  background: #e8f5ee;
}

.status-badge.is-muted {
  color: #7a4350;
  background: #f8e9ed;
}

.audit-failure-row {
  background: #fff9fa;
}

.invite-form,
.audit-filters {
  display: grid;
  grid-template-columns: repeat(3, minmax(130px, 180px)) auto;
  align-items: end;
  gap: 12px;
  margin-bottom: 16px;
  padding: 14px;
  border: 1px solid #d7dce3;
  border-radius: 6px;
  background: #fff;
}

.audit-filters {
  grid-template-columns: 180px 140px minmax(260px, 1fr) auto;
}

.admin-page .primary-button,
.admin-page .danger-button {
  min-height: 40px;
  border: 1px solid #1769aa;
  border-radius: 5px;
  padding: 0 14px;
  color: #fff;
  background: #1769aa;
  font: inherit;
  font-weight: 800;
  cursor: pointer;
}

.admin-page .danger-button {
  border-color: #b42318;
  background: #b42318;
}

.invite-results {
  display: grid;
  gap: 6px;
  margin: 0 0 16px;
  padding: 12px;
  border: 1px solid #a7d7bd;
  border-radius: 6px;
  background: #eef9f3;
}

.invite-results > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.invite-results code,
.admin-table code {
  color: #25313d;
  font-family: Consolas, monospace;
  font-size: 13px;
}

.admin-empty {
  padding: 30px !important;
  color: #78838f;
  text-align: center !important;
}

.admin-dialog {
  width: min(520px, calc(100vw - 32px));
  border: 1px solid #cdd3da;
  border-radius: 8px;
  padding: 0;
  color: #20262e;
  background: #fff;
  box-shadow: 0 20px 56px rgba(31, 39, 49, 0.22);
}

.admin-dialog::backdrop {
  background: rgba(23, 30, 38, 0.48);
}

.admin-dialog > form,
.admin-dialog > div {
  display: grid;
  gap: 18px;
  padding: 22px;
}

.admin-dialog header,
.admin-dialog footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.admin-dialog header h2 {
  margin: 0;
  font-size: 19px;
  letter-spacing: 0;
}

.admin-dialog header p,
.dialog-status {
  min-height: 18px;
  margin: 4px 0 0;
  color: #727d89;
  font-size: 13px;
}

.dialog-status {
  color: #b42318;
}

.icon-close {
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 4px;
  color: #53606d;
  background: #edf0f3;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}

.audit-dialog {
  width: min(720px, calc(100vw - 32px));
}

.audit-detail {
  display: grid;
  margin: 0;
  border-top: 1px solid #e1e5e9;
}

.audit-detail > div {
  display: grid;
  grid-template-columns: 110px minmax(0, 1fr);
  gap: 12px;
  padding: 9px 0;
  border-bottom: 1px solid #e8ebee;
}

.audit-detail dt {
  color: #707b87;
  font-weight: 700;
}

.audit-detail dd {
  margin: 0;
  overflow-wrap: anywhere;
}

.admin-toast {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 1000;
  max-width: min(440px, calc(100vw - 48px));
  padding: 11px 14px;
  border: 1px solid #217a4e;
  border-radius: 6px;
  color: #fff;
  background: #217a4e;
  box-shadow: 0 10px 28px rgba(31, 39, 49, 0.18);
  font-size: 13px;
  font-weight: 700;
}

.admin-toast.is-error {
  border-color: #b42318;
  background: #b42318;
}

@media (max-width: 900px) {
  .auth-page {
    padding: 18px;
  }

  .auth-shell {
    grid-template-columns: 1fr;
  }

  .auth-brand {
    padding: 30px;
  }

  .auth-brand h1 {
    font-size: 27px;
  }

  .auth-brand p:last-child {
    margin-top: 12px;
  }

  .admin-header {
    align-items: flex-start;
    flex-direction: column;
  }

  .admin-main {
    width: calc(100% - 24px);
  }

  .invite-form,
  .audit-filters {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 560px) {
  .auth-panel {
    padding: 28px 22px 32px;
  }

  .invite-form,
  .audit-filters {
    grid-template-columns: 1fr;
  }
}

.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* Customs declaration workspace */
.library-actions .library-customs-button {
  border-color: var(--blue);
  background: var(--blue);
  color: #fff;
}

.library-actions .library-customs-button:hover,
.library-actions .library-customs-button:focus-visible {
  border-color: #184d7d;
  background: #184d7d;
}

.customs-workspace {
  position: fixed;
  inset: 0;
  z-index: 40;
  padding: 14px;
  background: rgba(22, 33, 31, 0.28);
}

.customs-workspace[hidden] {
  display: none;
}

.customs-shell {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  width: min(1500px, 100%);
  height: calc(100vh - 28px);
  margin: 0 auto;
  overflow: hidden;
  border: 1px solid #d4dfe2;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 18px 52px rgba(28, 48, 54, 0.14);
}

.customs-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 78px;
  padding: 14px 20px 14px 22px;
  border-bottom: 1px solid #e0e7e9;
  background: #fff;
}

.customs-title-block {
  min-width: 0;
}

.customs-title-block > span {
  display: inline-flex;
  align-items: center;
  min-height: 23px;
  margin-bottom: 4px;
  padding: 0 7px;
  border-radius: 4px;
  background: #eef5f8;
  color: var(--blue);
  font-size: 11px;
  font-weight: 900;
}

.customs-title-block h2 {
  margin: 0;
  color: #17242d;
  font-size: 23px;
  line-height: 1.25;
}

.customs-title-block p {
  margin: 4px 0 0;
  color: #607078;
  font-size: 13px;
  font-weight: 650;
}

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

.customs-document-state {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 0 11px;
  border: 1px solid #d6dee2;
  border-radius: 6px;
  background: #f7f9fa;
  color: #596970;
  font-size: 12px;
  font-weight: 900;
}

.customs-document-state.ready {
  border-color: #a8d2c3;
  background: #eaf6f1;
  color: var(--green-dark);
}

.customs-document-state.warning {
  border-color: #e1bf90;
  background: #fff6e9;
  color: #824810;
}

.customs-document-state.loading,
.customs-document-state.pending {
  border-color: #b9cedf;
  background: #eef4f8;
  color: #255f99;
}

.customs-document-state.error {
  border-color: #e3b5b0;
  background: #fff0ee;
  color: var(--red);
}

.customs-close {
  position: relative;
  width: 38px;
  min-width: 38px;
  height: 38px;
  padding: 0;
  border-color: #d4dde1;
  background: #fff;
  color: #53636b;
}

.customs-close::before,
.customs-close::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 15px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
}

.customs-close::before {
  transform: translate(-50%, -50%) rotate(45deg);
}

.customs-close::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

.customs-close:hover,
.customs-close:focus-visible {
  border-color: #aebbc1;
  background: #f4f7f8;
  color: #263840;
}

.customs-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 350px;
  min-height: 0;
  overflow: hidden;
}

.customs-main,
.customs-review {
  min-height: 0;
  overflow-y: auto;
}

.customs-main {
  background: #fbfcfc;
}

.customs-review {
  border-left: 1px solid #e0e7e9;
  background: #f7f9fa;
}

.customs-section {
  padding: 22px 24px 24px;
  border-bottom: 1px solid #e3e9eb;
}

.customs-section-heading,
.customs-review-heading,
.customs-review-section-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}

.customs-section-heading > div {
  min-width: 0;
}

.customs-section-heading h3,
.customs-review-section h3,
.customs-check-panel h3,
.customs-review-heading h3 {
  margin: 0;
  color: #203039;
  font-size: 16px;
  line-height: 1.35;
}

.customs-section-heading p {
  margin: 4px 0 0;
  color: #6a777e;
  font-size: 13px;
  font-weight: 650;
}

.customs-section-heading > span {
  flex: none;
  padding: 5px 8px;
  border: 1px solid #dbe7ed;
  border-radius: 4px;
  background: #f3f7f9;
  color: #315f82;
  font-size: 11px;
  font-weight: 900;
}

.customs-import-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(150px, 0.7fr);
  align-items: center;
  gap: 12px;
  margin-top: 16px;
  padding: 12px 13px;
  border: 1px solid #bfd8e5;
  border-radius: 7px;
  background: #f2f8fb;
}

.customs-import-panel[hidden] {
  display: none;
}

.customs-import-panel > input[type="file"][hidden] {
  display: none;
}

.customs-import-copy,
.customs-import-copy strong,
.customs-import-copy span {
  display: block;
}

.customs-import-copy strong {
  color: #274b5d;
  font-size: 13px;
  font-weight: 900;
}

.customs-import-copy span {
  margin-top: 3px;
  color: #6d8089;
  font-size: 11px;
  font-weight: 650;
  line-height: 1.45;
}

.customs-import-button {
  min-height: 34px;
  border-color: #8bb7ca;
  background: #fff;
  color: #255f78;
  font-size: 12px;
  white-space: nowrap;
}

.customs-import-button:hover,
.customs-import-button:focus-visible {
  border-color: #4e91ad;
  background: #eaf5f9;
}

.customs-import-button:disabled {
  opacity: 0.55;
  cursor: default;
}

.customs-import-status {
  min-width: 0;
  overflow: hidden;
  color: #75858c;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.45;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.customs-import-status.success {
  color: var(--green-dark);
}

.customs-import-status.loading {
  color: var(--blue);
}

.customs-import-status.error {
  color: var(--red);
  white-space: normal;
}

.customs-shipment-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 13px;
  margin-top: 16px;
}

.customs-shipment-grid label,
.customs-line-fields label {
  min-width: 0;
  color: #35464d;
  font-size: 13px;
  font-weight: 900;
}

.customs-shipment-grid label em,
.customs-line-fields label em {
  color: #728087;
  font-size: 11px;
  font-style: normal;
  font-weight: 800;
}

.customs-shipment-grid input,
.customs-line-fields input,
.customs-line-fields select {
  width: 100%;
  min-height: 41px;
  margin-top: 6px;
  padding: 8px 10px;
  border: 1px solid #d1dde1;
  border-radius: 5px;
  background: #fff;
  color: #17272e;
  font-family: inherit;
  font-size: 14px;
  font-weight: 750;
  outline: 0;
  transition: border-color 150ms ease, background-color 150ms ease, box-shadow 150ms ease;
}

.customs-shipment-grid input:hover,
.customs-line-fields input:hover,
.customs-line-fields select:hover {
  border-color: #9eafb6;
}

.customs-shipment-grid input:focus,
.customs-line-fields input:focus,
.customs-line-fields select:focus {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(37, 95, 153, 0.12);
}

.customs-shipment-grid input[readonly] {
  border-color: #d7e0e4;
  background: #f3f6f7;
  color: #31505f;
  cursor: default;
  font-variant-numeric: tabular-nums;
}

.customs-shipment-grid input[readonly]:focus {
  border-color: #d7e0e4;
  box-shadow: none;
}

.customs-shipment-grid input.is-invalid,
.customs-line-fields input.is-invalid,
.customs-line-fields select.is-invalid {
  border-color: var(--red);
  background: #fff8f7;
  box-shadow: 0 0 0 3px rgba(180, 35, 24, 0.08);
}

.customs-add-line {
  flex: none;
  min-height: 36px;
  border-color: var(--blue);
  background: #fff;
  color: var(--blue);
  font-size: 13px;
}

.customs-add-line:hover,
.customs-add-line:focus-visible {
  background: #edf4f9;
}

.customs-lines {
  display: grid;
  gap: 12px;
  margin-top: 16px;
}

.customs-line-card {
  overflow: hidden;
  border: 1px solid #d9e3e6;
  border-radius: 7px;
  background: #fff;
  box-shadow: 0 3px 12px rgba(30, 56, 64, 0.035);
}

.customs-line-card.has-error {
  border-color: #d7a19b;
}

.customs-line-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-height: 46px;
  padding: 7px 12px 7px 14px;
  border-bottom: 1px solid #e5ebed;
  background: #fcfdfd;
}

.customs-shipment-badge {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 7px;
  min-width: 0;
  margin-left: auto;
  padding: 5px 8px;
  border: 1px solid #d9e7ee;
  border-radius: 5px;
  background: #f4f9fb;
}

.customs-shipment-badge span,
.customs-shipment-badge strong,
.customs-shipment-badge small {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.customs-shipment-badge span {
  color: #72848d;
  font-size: 10px;
  font-weight: 850;
}

.customs-shipment-badge strong {
  max-width: 220px;
  color: #315b70;
  font-size: 11px;
  font-weight: 900;
}

.customs-shipment-badge small {
  color: #657a84;
  font-size: 10px;
  font-weight: 750;
}

.customs-line-number {
  display: flex;
  align-items: center;
  min-width: 0;
  gap: 10px;
}

.customs-line-number > span {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 4px;
  background: #edf4f7;
  color: #275b82;
  font-size: 12px;
  font-weight: 950;
  font-variant-numeric: tabular-nums;
}

.customs-line-number strong,
.customs-line-number small {
  display: block;
}

.customs-line-number strong {
  color: #26373e;
  font-size: 13px;
}

.customs-line-readiness {
  margin-top: 1px;
  color: #758289;
  font-size: 12px;
  font-weight: 800;
}

.customs-line-readiness.ready {
  color: var(--green-dark);
}

.customs-line-readiness.error {
  color: var(--red);
}

.customs-remove-line {
  min-height: 31px;
  padding: 0 9px;
  border-color: transparent;
  background: transparent;
  color: #6e7c82;
  font-size: 12px;
}

.customs-remove-line:hover,
.customs-remove-line:focus-visible {
  border-color: #e2beb9;
  background: #fff1ef;
  color: var(--red);
}

.customs-remove-line:disabled {
  color: #b2bcc0;
  cursor: default;
}

.customs-line-fields {
  display: grid;
  grid-template-columns: minmax(170px, 1.2fr) repeat(3, minmax(120px, 1fr));
  gap: 12px;
  padding: 14px 15px 15px;
}

.customs-batch-select-field {
  grid-column: 1 / -1;
  min-width: 0;
}

.customs-batch-picker-selection {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 38px;
  gap: 7px;
  margin-top: 7px;
}

.customs-batch-picker-trigger {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 48px;
  margin-top: 7px;
  padding: 7px 10px;
  border: 1px solid #cbdbe1;
  border-radius: 6px;
  background: #f8fbfc;
  color: #20343d;
  font-family: inherit;
  text-align: left;
  outline: 0;
  transition: border-color 160ms cubic-bezier(0.22, 1, 0.36, 1), background-color 160ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 160ms cubic-bezier(0.22, 1, 0.36, 1);
}

.customs-batch-picker-selection .customs-batch-picker-trigger {
  margin-top: 0;
}

.customs-batch-picker-trigger:hover {
  border-color: #8fa6b0;
  background: #fff;
}

.customs-batch-picker-trigger:focus-visible,
.customs-batch-picker-trigger.is-open {
  border-color: var(--blue);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(37, 95, 153, 0.12);
}

.customs-batch-picker-trigger.is-invalid {
  border-color: var(--red);
  background: #fff8f7;
  box-shadow: 0 0 0 3px rgba(180, 35, 24, 0.08);
}

.customs-batch-picker-trigger.has-batch {
  border-color: #a8cdbd;
  background: #f1f8f5;
}

.customs-batch-picker-trigger.has-batch:hover,
.customs-batch-picker-trigger.has-batch:focus-visible,
.customs-batch-picker-trigger.has-batch.is-open {
  border-color: #5c9d84;
  background: #f7fcfa;
}

.customs-batch-search-icon {
  flex: none;
  width: 20px;
  height: 20px;
  color: #3f718e;
}

.customs-batch-picker-trigger.has-batch .customs-batch-search-icon {
  color: #18715b;
}

.customs-batch-picker-copy {
  display: block;
  flex: 1;
  min-width: 0;
  margin-left: 10px;
}

.customs-batch-picker-copy strong,
.customs-batch-picker-copy small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.customs-batch-picker-copy strong {
  color: #213740;
  font-size: 14px;
  font-weight: 900;
  line-height: 1.35;
}

.customs-batch-picker-copy small {
  margin-top: 2px;
  color: #60747c;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.35;
}

.customs-batch-linked {
  display: inline-flex;
  flex: none;
  align-items: center;
  height: 24px;
  margin-left: 10px;
  padding: 0 8px;
  border-radius: 999px;
  background: #dcefe7;
  color: #0b604d;
  font-size: 11px;
  font-weight: 900;
}

.customs-batch-picker-trigger .customs-product-picker-chevron {
  flex: none;
}

.customs-batch-picker-trigger.is-open .customs-product-picker-chevron {
  transform: rotate(180deg);
}

.customs-batch-clear {
  display: grid;
  width: 38px;
  height: 38px;
  align-self: center;
  place-items: center;
  padding: 0;
  border: 1px solid #cad7d2;
  border-radius: 6px;
  background: #fff;
  color: #5f716a;
  outline: 0;
  transition: border-color 150ms ease, background-color 150ms ease, color 150ms ease;
}

.customs-batch-clear svg {
  width: 18px;
  height: 18px;
}

.customs-batch-clear:hover,
.customs-batch-clear:focus-visible {
  border-color: #d09a92;
  background: #fff3f1;
  color: var(--red);
}

.customs-batch-clear:focus-visible {
  box-shadow: 0 0 0 3px rgba(180, 35, 24, 0.1);
}

.customs-batch-picker-menu {
  min-height: 240px;
}

.customs-batch-picker-list {
  padding: 6px;
}

.customs-batch-picker-option {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) 205px 118px;
  align-items: center;
  width: 100%;
  min-height: 66px;
  gap: 11px;
  padding: 8px;
  border: 0;
  border-radius: 6px;
  background: #fff;
  color: #17272e;
  font-family: inherit;
  text-align: left;
  outline: 0;
  transition: background-color 140ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 140ms cubic-bezier(0.22, 1, 0.36, 1);
}

.customs-batch-picker-option + .customs-batch-picker-option {
  margin-top: 2px;
}

.customs-batch-picker-option:hover,
.customs-batch-picker-option:focus-visible {
  background: #edf4f8;
}

.customs-batch-picker-option:focus-visible {
  box-shadow: inset 0 0 0 2px #5b8bb3;
}

.customs-batch-picker-option:active {
  background: #e4eef4;
}

.customs-batch-picker-option.is-selected {
  background: #edf7f2;
  box-shadow: inset 0 0 0 1px #a8cdbd;
}

.customs-batch-picker-option.has-error:disabled {
  background: #fff8f7;
  color: #6d3b35;
  cursor: not-allowed;
  opacity: 1;
}

.customs-batch-option-main {
  min-width: 0;
}

.customs-batch-option-main strong,
.customs-batch-option-main small,
.customs-batch-option-main em {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.customs-batch-option-main strong {
  color: #173842;
  font-size: 14px;
  font-weight: 950;
  line-height: 1.35;
}

.customs-batch-option-main small {
  margin-top: 3px;
  color: #5e7078;
  font-size: 12px;
  font-weight: 750;
}

.customs-batch-option-main em {
  margin-top: 4px;
  color: #9c2f24;
  font-size: 11px;
  font-style: normal;
  font-weight: 850;
}

.customs-batch-option-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  min-width: 0;
}

.customs-batch-option-metrics span {
  display: block;
  min-width: 0;
  padding: 0 8px;
  border-left: 1px solid #dce4e7;
  color: #66777f;
  font-size: 11px;
  font-weight: 750;
  text-align: center;
  white-space: nowrap;
}

.customs-batch-option-metrics b {
  display: block;
  overflow: hidden;
  color: #233b45;
  font-size: 13px;
  font-weight: 950;
  line-height: 1.35;
  text-overflow: ellipsis;
}

.customs-batch-option-meta {
  display: block;
  overflow: hidden;
  color: #3f555e;
  font-size: 12px;
  font-weight: 850;
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.customs-batch-option-meta small {
  display: block;
  margin-top: 3px;
  color: #7a878c;
  font-size: 11px;
  font-weight: 750;
}

.customs-field-label {
  display: block;
  color: #35464d;
  font-size: 13px;
  font-weight: 900;
}

.customs-product-picker-trigger {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 58px;
  margin-top: 7px;
  padding: 6px 10px 6px 7px;
  border: 1px solid #cfd9dd;
  border-radius: 7px;
  background: #fff;
  color: #17272e;
  font-family: inherit;
  text-align: left;
  outline: 0;
  transition: border-color 160ms cubic-bezier(0.22, 1, 0.36, 1), background-color 160ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 160ms cubic-bezier(0.22, 1, 0.36, 1);
}

.customs-product-picker-trigger:hover {
  border-color: #91a7b1;
  background: #fbfcfd;
}

.customs-product-picker-trigger:focus-visible,
.customs-product-picker-trigger.is-open {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(37, 95, 153, 0.12);
}

.customs-product-picker-trigger:active {
  background: #f4f8fb;
}

.customs-product-thumb {
  position: relative;
  display: grid;
  flex: none;
  place-items: center;
  overflow: hidden;
  border-radius: 6px;
  background: #f1f4f5;
  color: #47616d;
  font-weight: 900;
  line-height: 1;
}

.customs-product-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #fff;
}

.customs-product-thumb.is-empty {
  background: #e9f0f4;
  color: #315f82;
}

.customs-product-thumb-trigger {
  width: 44px;
  height: 44px;
  font-size: 17px;
}

.customs-product-thumb-option {
  width: 48px;
  height: 48px;
  font-size: 18px;
}

.customs-product-picker-copy,
.customs-product-option-copy {
  min-width: 0;
}

.customs-product-picker-copy {
  display: block;
  flex: 1;
  margin-left: 10px;
}

.customs-product-picker-copy strong,
.customs-product-picker-copy small,
.customs-product-option-copy strong,
.customs-product-option-copy small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.customs-product-picker-copy strong {
  color: #1d2f37;
  font-size: 14px;
  font-weight: 900;
  line-height: 1.35;
}

.customs-product-picker-copy small {
  margin-top: 2px;
  color: #66777f;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.35;
}

.customs-product-picker-trigger:not(.has-product) .customs-product-picker-copy strong {
  color: #364b54;
}

.customs-product-status {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 24px;
  margin-left: 9px;
  padding: 0 7px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 900;
  line-height: 1;
}

.customs-product-status.on-sale {
  background: #e8f5ef;
  color: #09614e;
}

.customs-product-status.not-listed {
  background: #edf0f1;
  color: #56656c;
}

.customs-product-picker-chevron {
  width: 20px;
  height: 20px;
  margin-left: 6px;
  color: #61737b;
  transition: transform 160ms cubic-bezier(0.22, 1, 0.36, 1);
}

.customs-product-picker-trigger.is-open .customs-product-picker-chevron {
  transform: rotate(180deg);
}

.customs-product-picker-menu {
  position: fixed;
  z-index: 70;
  display: flex;
  flex-direction: column;
  min-height: 210px;
  overflow: hidden;
  border: 1px solid #bfcdd3;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 4px 8px rgba(20, 42, 53, 0.14);
  color: #17272e;
  transform-origin: top center;
  animation: customs-picker-in 150ms cubic-bezier(0.22, 1, 0.36, 1);
}

.customs-product-picker-menu[data-placement="top"] {
  transform-origin: bottom center;
}

@keyframes customs-picker-in {
  from {
    opacity: 0;
    transform: translateY(-3px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.customs-product-picker-search-row {
  display: flex;
  flex: none;
  align-items: center;
  gap: 10px;
  padding: 10px;
  border-bottom: 1px solid #dce4e7;
  background: #f7f9fa;
}

.customs-product-picker-search {
  position: relative;
  display: block;
  flex: 1;
  min-width: 0;
}

.customs-product-picker-search svg {
  position: absolute;
  top: 50%;
  left: 11px;
  width: 18px;
  height: 18px;
  color: #687a82;
  pointer-events: none;
  transform: translateY(-50%);
}

.customs-product-picker-search input {
  width: 100%;
  height: 38px;
  padding: 7px 10px 7px 36px;
  border: 1px solid #c8d3d8;
  border-radius: 6px;
  background: #fff;
  color: #17272e;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  outline: 0;
  transition: border-color 150ms ease, box-shadow 150ms ease;
}

.customs-product-picker-search input::placeholder {
  color: #60727a;
  opacity: 1;
}

.customs-product-picker-search input:focus {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(37, 95, 153, 0.12);
}

.customs-product-picker-count {
  flex: none;
  color: #5f7078;
  font-size: 11px;
  font-weight: 850;
  font-variant-numeric: tabular-nums;
}

.customs-product-picker-list {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 5px;
  background: #fff;
}

.customs-product-picker-option {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 60px;
  padding: 6px 9px 6px 6px;
  border: 0;
  border-radius: 6px;
  background: #fff;
  color: #17272e;
  font-family: inherit;
  text-align: left;
  outline: 0;
  transition: background-color 140ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 140ms cubic-bezier(0.22, 1, 0.36, 1);
}

.customs-product-picker-option + .customs-product-picker-option {
  margin-top: 2px;
}

.customs-product-picker-option:hover,
.customs-product-picker-option:focus-visible {
  background: #edf4f8;
}

.customs-product-picker-option:focus-visible {
  box-shadow: inset 0 0 0 2px #5b8bb3;
}

.customs-product-picker-option:active {
  background: #e4eef4;
}

.customs-product-picker-option.is-selected {
  background: #e8f1f7;
  box-shadow: inset 0 0 0 1px #a7c3d7;
}

.customs-product-option-copy {
  flex: 1;
  margin-left: 11px;
}

.customs-product-option-copy strong {
  color: #20343d;
  font-size: 14px;
  font-weight: 900;
  line-height: 1.35;
}

.customs-product-option-copy small {
  margin-top: 3px;
  color: #5c7079;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.35;
}

.customs-product-option-check {
  display: none;
  flex: none;
  width: 19px;
  height: 19px;
  margin-left: 7px;
  color: var(--blue);
}

.customs-product-picker-option.is-selected .customs-product-option-check {
  display: block;
}

.customs-product-picker-empty {
  display: grid;
  min-height: 150px;
  place-content: center;
  padding: 24px;
  text-align: center;
}

.customs-product-picker-empty strong,
.customs-product-picker-empty span {
  display: block;
}

.customs-product-picker-empty strong {
  color: #334850;
  font-size: 14px;
}

.customs-product-picker-empty span {
  margin-top: 5px;
  color: #66777f;
  font-size: 12px;
  font-weight: 650;
}

.customs-line-data {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  border-top: 1px solid #e0e6e8;
  background: #f8fafb;
}

.customs-line-data > div {
  min-width: 0;
  padding: 9px 10px;
  border-right: 1px solid #e1e7e9;
  border-bottom: 1px solid #e1e7e9;
}

.customs-line-data > div:nth-child(6n) {
  border-right: 0;
}

.customs-line-data > div:nth-last-child(-n + 6) {
  border-bottom: 0;
}

.customs-line-data .customs-line-data-wide {
  grid-column: span 2;
}

.customs-line-data span,
.customs-line-data strong {
  display: block;
}

.customs-line-data span {
  color: #748188;
  font-size: 11px;
  font-weight: 850;
}

.customs-line-data strong {
  margin-top: 3px;
  overflow: hidden;
  color: #28383f;
  font-size: 13px;
  font-weight: 850;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.customs-rate-panel {
  padding: 20px;
  background: #255f99;
  color: #fff;
}

.customs-review-heading {
  align-items: flex-start;
}

.customs-review-heading span {
  display: block;
  color: #cfdeeb;
  font-size: 12px;
  font-weight: 850;
}

.customs-review-heading h3 {
  margin-top: 4px;
  color: #fff;
  font-size: 20px;
  font-variant-numeric: tabular-nums;
}

.customs-review-heading button {
  min-height: 31px;
  padding: 0 10px;
  border-color: rgba(255, 255, 255, 0.48);
  background: transparent;
  color: #fff;
  font-size: 12px;
}

.customs-review-heading button:hover,
.customs-review-heading button:focus-visible {
  border-color: #fff;
  background: rgba(255, 255, 255, 0.12);
}

.customs-review-heading button:disabled {
  opacity: 0.65;
  cursor: default;
}

.customs-rate-panel > p {
  margin: 10px 0 0;
  color: #e2ebf3;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.55;
}

.customs-source-copy {
  min-height: 30px;
  margin-top: 10px;
  padding: 0;
  border: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: 0;
  background: transparent;
  color: #fff;
  font-size: 12px;
}

.customs-source-copy:hover,
.customs-source-copy:focus-visible {
  border-bottom-color: #fff;
  background: transparent;
}

.customs-source-copy:disabled {
  opacity: 0.5;
  cursor: default;
}

.customs-review-section,
.customs-check-panel {
  padding: 17px 18px;
  border-bottom: 1px solid #e1e8ea;
}

.customs-review-section-title > span {
  color: #66767e;
  font-size: 11px;
  font-weight: 850;
}

.customs-total-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 12px;
  overflow: hidden;
  border: 1px solid #dce5e8;
  border-radius: 6px;
  background: #fff;
}

.customs-total-grid > div {
  min-width: 0;
  padding: 10px 11px;
  border-right: 1px solid #e0e6e9;
  border-bottom: 1px solid #e0e6e9;
}

.customs-total-grid > div:nth-child(2n) {
  border-right: 0;
}

.customs-total-grid .customs-total-wide {
  grid-column: 1 / -1;
  border-right: 0;
  border-bottom: 0;
}

.customs-total-grid span,
.customs-total-grid strong {
  display: block;
}

.customs-total-grid span {
  color: #718087;
  font-size: 11px;
  font-weight: 850;
}

.customs-total-grid strong {
  margin-top: 3px;
  color: #20333d;
  font-size: 16px;
  font-variant-numeric: tabular-nums;
}

.customs-line-review {
  margin-top: 10px;
}

.customs-empty-review {
  margin: 0;
  color: #718087;
  font-size: 13px;
  font-weight: 650;
  line-height: 1.65;
}

.customs-line-review-item {
  padding: 11px 0;
  border-bottom: 1px solid #dfe5e8;
}

.customs-line-review-item:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.customs-line-review-item > div > strong,
.customs-line-review-item > div > span {
  display: block;
}

.customs-line-review-item > div > strong {
  color: #263940;
  font-size: 14px;
}

.customs-line-review-item > div > span {
  margin-top: 2px;
  overflow: hidden;
  color: #708087;
  font-size: 12px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.customs-line-review-item dl {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
  margin: 9px 0 0;
}

.customs-line-review-item dl > div {
  min-width: 0;
}

.customs-line-review-item dt {
  color: #7a878d;
  font-size: 10px;
  font-weight: 850;
}

.customs-line-review-item dd {
  margin: 2px 0 0;
  color: #30434c;
  font-size: 12px;
  font-weight: 850;
  font-variant-numeric: tabular-nums;
}

.customs-freight-review > strong {
  display: block;
  margin-top: 8px;
  color: var(--blue);
  font-size: 20px;
  font-variant-numeric: tabular-nums;
}

.customs-freight-review > p {
  margin: 5px 0 0;
  color: #6c7b82;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.55;
}

.customs-check-panel {
  border-bottom: 0;
}

.customs-check-panel ul {
  display: grid;
  gap: 8px;
  margin: 11px 0 0;
  padding: 0;
  list-style: none;
}

.customs-check-panel li {
  position: relative;
  padding-left: 22px;
  color: #586970;
  font-size: 12px;
  font-weight: 750;
  line-height: 1.5;
}

.customs-check-panel li::before {
  content: "·";
  position: absolute;
  left: 0;
  top: 0;
  display: grid;
  place-items: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #e5eaed;
  color: #64747b;
  font-size: 11px;
  font-weight: 950;
}

.customs-check-panel li.success::before {
  content: "✓";
  background: #dcefe7;
  color: var(--green-dark);
}

.customs-check-panel li.warning::before {
  content: "!";
  background: #f7e7ce;
  color: #8b4d0f;
}

.customs-check-panel li.error::before {
  content: "×";
  background: #f7dfdc;
  color: var(--red);
}

.customs-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  min-height: 62px;
  padding: 10px 18px 10px 22px;
  border-top: 1px solid #e0e7e9;
  background: #fff;
}

.customs-status {
  min-width: 0;
  margin: 0;
  overflow: hidden;
  color: #627279;
  font-size: 13px;
  font-weight: 750;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.customs-status.success {
  color: var(--green-dark);
}

.customs-status.warning {
  color: #8b4d0f;
}

.customs-status.error {
  color: var(--red);
}

.customs-status.loading {
  color: var(--blue);
}

.customs-footer-actions {
  display: flex;
  align-items: center;
  flex: none;
  gap: 9px;
}

.customs-footer-actions button {
  min-height: 40px;
  padding-inline: 15px;
  font-size: 13px;
}

.customs-footer-actions .customs-preview-button {
  border-color: #9fb5c5;
  background: #fff;
  color: #315f82;
}

.customs-footer-actions .customs-preview-button:hover,
.customs-footer-actions .customs-preview-button:focus-visible {
  border-color: #6f91aa;
  background: #edf4f8;
}

.customs-footer-actions #downloadCustomsDeclaration {
  min-width: 126px;
  border-color: var(--blue);
  background: var(--blue);
  color: #fff;
}

.customs-footer-actions #downloadCustomsDeclaration:hover,
.customs-footer-actions #downloadCustomsDeclaration:focus-visible {
  border-color: #184d7d;
  background: #184d7d;
}

.customs-footer-actions #downloadCustomsDeclaration:disabled {
  border-color: #cbd5da;
  background: #dfe5e8;
  color: #75838a;
  cursor: default;
}

@media (max-width: 1180px) {
  .customs-body {
    grid-template-columns: minmax(0, 1fr) 330px;
  }

  .customs-line-data {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .customs-line-data > div:nth-child(6n) {
    border-right: 1px solid #e1e7e9;
  }

  .customs-line-data > div:nth-child(4n) {
    border-right: 0;
  }

  .customs-line-data > div:nth-last-child(-n + 6) {
    border-bottom: 1px solid #e1e7e9;
  }

  .customs-line-data > div:nth-last-child(-n + 4) {
    border-bottom: 0;
  }

  .customs-batch-picker-option {
    grid-template-columns: 48px minmax(0, 1fr) 190px;
  }

  .customs-batch-option-meta {
    display: none;
  }
}

@media (max-width: 980px) {
  .customs-workspace {
    padding: 8px;
  }

  .customs-shell {
    height: calc(100vh - 16px);
  }

  .customs-body {
    display: block;
    overflow-y: auto;
  }

  .customs-main,
  .customs-review {
    overflow: visible;
  }

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

  .customs-import-panel {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .customs-import-status {
    grid-column: 1 / -1;
  }

  .customs-review {
    border-top: 1px solid #dce3e6;
    border-left: 0;
  }

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

  .customs-batch-picker-option {
    grid-template-columns: 48px minmax(0, 1fr);
  }

  .customs-batch-option-metrics {
    display: none;
  }
}

@media (max-width: 620px) {
  .customs-section {
    padding: 17px 14px 19px;
  }

  .customs-shipment-grid,
  .customs-line-fields {
    grid-template-columns: 1fr;
  }

  .customs-import-panel {
    grid-template-columns: 1fr;
  }

  .customs-import-button,
  .customs-import-status {
    width: 100%;
  }

  .customs-import-status {
    grid-column: auto;
  }

  .customs-shipment-badge {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .customs-shipment-grid input,
  .customs-line-fields input,
  .customs-line-fields select,
  .customs-product-picker-trigger,
  .customs-batch-picker-trigger,
  .customs-batch-clear,
  .customs-product-picker-chevron,
  .customs-product-picker-option,
  .customs-batch-picker-option {
    transition: none;
  }

  .customs-product-picker-menu {
    animation: none;
  }
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background:
    linear-gradient(90deg, rgba(13, 124, 102, 0.07) 0 1px, transparent 1px 100%),
    linear-gradient(180deg, rgba(13, 124, 102, 0.06) 0 1px, transparent 1px 100%),
    var(--paper);
  background-size: 36px 36px;
  color: var(--ink);
}

body.modal-open {
  overflow: hidden;
}

.app-header {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 28px;
  padding: 28px clamp(18px, 4vw, 48px) 24px;
  border-bottom: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.86);
}

.header-actions {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

.nav-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  padding: 0 14px;
  border: 1px solid var(--green);
  border-radius: 6px;
  background: var(--green);
  color: #fff;
  font-size: 14px;
  font-weight: 800;
  text-decoration: none;
}

.ghost-nav {
  background: #fff;
  color: var(--green-dark);
}

.eyebrow {
  margin: 0 0 8px;
  color: var(--green);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: uppercase;
}

h1,
h2 {
  margin: 0;
  letter-spacing: 0;
}

h1 {
  font-size: clamp(28px, 4vw, 48px);
  line-height: 1;
}

h2 {
  font-size: 16px;
  margin-bottom: 14px;
}

.header-copy {
  max-width: 720px;
  margin: 10px 0 0;
  color: var(--muted);
}

.header-note {
  min-width: 260px;
  padding-left: 18px;
  border-left: 4px solid var(--green);
}

.header-note span,
.kpi span {
  display: block;
  color: var(--muted);
  font-size: 12px;
}

.header-note strong {
  display: block;
  margin-top: 4px;
  font-size: 15px;
}

.layout {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(420px, 0.95fr);
  gap: 20px;
  align-items: start;
  padding: 20px clamp(14px, 3vw, 36px) 36px;
}

.input-pane,
.result-pane {
  min-width: 0;
}

.toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}

button {
  min-height: 38px;
  padding: 0 14px;
  border: 1px solid var(--green);
  border-radius: 6px;
  background: var(--green);
  color: #fff;
  font-weight: 700;
  cursor: pointer;
}

.fulfillment-control {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  gap: 10px;
  padding: 4px 5px 4px 12px;
  border: 1px solid #c9d8d3;
  border-radius: 8px;
  background: #fff;
  color: var(--green-dark);
  font-size: 13px;
  font-weight: 900;
  box-shadow: 0 1px 0 rgba(20, 37, 32, 0.04);
}

.fulfillment-control > span {
  white-space: nowrap;
}

.fulfillment-control select {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.fulfillment-tabs {
  display: inline-grid;
  grid-template-columns: repeat(2, minmax(96px, 1fr));
  gap: 2px;
  padding: 2px;
  border-radius: 7px;
  background: #edf4f1;
}

.fulfillment-tabs button {
  min-height: 30px;
  padding: 0 12px;
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: #52625d;
  font-size: 13px;
  font-weight: 900;
}

.fulfillment-tabs button.active {
  background: #fff;
  color: var(--green-dark);
  box-shadow: 0 1px 5px rgba(22, 33, 31, 0.12);
}

.fulfillment-tabs button:hover,
.fulfillment-tabs button:focus-visible {
  color: var(--green-dark);
}

.fulfillment-fbt .cbt-only {
  display: none;
}

.ghost-button,
button + button {
  background: #fff;
  color: var(--green-dark);
}

.danger-button {
  border-color: #efb5af;
  color: var(--red);
}

details,
.form-card,
.kpi-strip,
.status-panel,
.metrics-panel,
.breakdown-panel,
.knowledge-panel {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: var(--shadow);
}

details {
  margin-bottom: 12px;
  overflow: hidden;
}

.form-card {
  margin-bottom: 12px;
  padding-top: 14px;
}

.form-card h2 {
  padding: 0 16px;
}

.advanced-card {
  box-shadow: none;
}

summary {
  padding: 14px 16px;
  background: #ffffff;
  border-bottom: 1px solid var(--line);
  cursor: pointer;
  font-weight: 800;
}

.grid {
  display: grid;
  gap: 12px;
  padding: 14px 16px 8px;
}

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

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

.quote-grid label:nth-child(1),
.quote-grid label:nth-child(2) {
  grid-column: span 2;
}

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

.compact-grid {
  padding: 0;
}

label {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

input,
select {
  display: block;
  width: 100%;
  min-height: 38px;
  margin-top: 6px;
  padding: 8px 10px;
  border: 1px solid #c9d1cd;
  border-radius: 6px;
  background: #fff;
  color: var(--ink);
  font: inherit;
  font-size: 14px;
}

input[type="checkbox"] {
  display: inline-block;
  width: 16px;
  min-height: 16px;
  margin: 0 7px 0 0;
  vertical-align: -3px;
}

.calculated-cost-label small {
  display: block;
  margin-top: 5px;
  color: #60716b;
  font-size: 11px;
  font-weight: 800;
}

.carton-matcher {
  margin-top: 10px;
  padding: 20px 16px 18px;
  border-top: 1px solid var(--line);
  background: #fff;
}

.carton-match-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 15px;
}

.carton-match-top p {
  margin: 0 0 4px;
  color: var(--blue);
  font-size: 13px;
  font-weight: 900;
}

.carton-match-top > div:first-child {
  flex: 1 1 180px;
  min-width: 180px;
}

.carton-match-top h3 {
  margin: 0;
  font-size: 21px;
  line-height: 1.25;
  letter-spacing: 0;
  white-space: nowrap;
}

.carton-match-top > span {
  padding: 7px 10px;
  border: 1px solid #d5dfdb;
  border-radius: 4px;
  background: #f7f9f8;
  color: #52625d;
  font-size: 13px;
  font-weight: 800;
  white-space: nowrap;
}

.carton-match-tools {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 9px;
}

.carton-mode-tabs {
  display: inline-grid;
  grid-template-columns: repeat(2, minmax(92px, 1fr));
  gap: 2px;
  padding: 3px;
  border: 1px solid #cbd8d3;
  border-radius: 7px;
  background: #eef4f1;
}

.carton-mode-tabs button {
  min-height: 34px;
  padding: 0 12px;
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: #53625e;
  font-size: 13px;
  font-weight: 900;
}

.carton-mode-tabs button.active {
  background: #fff;
  color: var(--green-dark);
  box-shadow: 0 1px 5px rgba(22, 33, 31, 0.12);
}

.carton-mode-tabs button:hover,
.carton-mode-tabs button:focus-visible {
  color: var(--green-dark);
}

.custom-carton-qty {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}

.custom-carton-qty[hidden] {
  display: none;
}

.custom-carton-qty input {
  display: inline-block;
  width: 68px;
  min-height: 34px;
  margin: 0;
  padding: 6px 8px;
  text-align: center;
  font-size: 14px;
  font-weight: 900;
}

.custom-carton-qty em {
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
}

.carton-match-tools > span {
  padding: 7px 10px;
  border: 1px solid #d5dfdb;
  border-radius: 4px;
  background: #f7f9f8;
  color: #52625d;
  font-size: 13px;
  font-weight: 800;
  white-space: nowrap;
}

.carton-match-tools > span.error {
  border-color: #efb5af;
  background: #fff6f5;
  color: var(--red);
}

.carton-match-top > span.error {
  border-color: #efb5af;
  background: #fff6f5;
  color: var(--red);
}

.carton-match-results {
  display: grid;
  gap: 12px;
}

.carton-match-empty {
  min-height: 68px;
  margin: 0;
  padding: 22px 18px;
  border: 1px dashed #cbd5d1;
  border-radius: 6px;
  background: #fafcfb;
  color: var(--muted);
  font-size: 15px;
  font-weight: 700;
  text-align: center;
}

.carton-match-empty.error {
  border-color: #efb5af;
  background: #fff8f7;
  color: var(--red);
}

.carton-match-item {
  overflow: hidden;
  border: 1px solid #d6dfdc;
  border-radius: 6px;
  background: #fff;
  transition: border-color 140ms ease, box-shadow 140ms ease;
}

.carton-match-item:hover {
  border-color: #9fb8b0;
  box-shadow: 0 5px 16px rgba(22, 33, 31, 0.07);
}

.carton-match-item.selected {
  border-color: var(--green);
  box-shadow: 0 0 0 2px rgba(13, 124, 102, 0.1);
}

.carton-match-main {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  gap: 13px;
  align-items: center;
  padding: 14px 15px;
  border-bottom: 1px solid #e4e9e7;
}

.carton-rank {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border-radius: 4px;
  background: #e9f0f6;
  color: var(--blue);
  font-size: 17px;
  font-weight: 900;
}

.carton-match-title {
  min-width: 0;
}

.carton-match-title strong,
.carton-match-title small {
  display: block;
  overflow-wrap: anywhere;
}

.carton-match-title > div {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.carton-match-title strong {
  color: var(--ink);
  font-size: 17px;
  line-height: 1.4;
}

.carton-match-title small {
  margin-top: 5px;
  color: var(--muted);
  font-size: 13px;
}

.carton-selected-badge {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 2px 8px;
  border-radius: 5px;
  background: var(--green);
  color: #fff;
  font-size: 12px;
  font-weight: 900;
  line-height: 1;
}

.carton-match-main button {
  min-height: 40px;
  padding: 0 17px;
  font-size: 14px;
}

.carton-match-item.selected .carton-match-main button {
  border-color: #b8cec7;
  background: #edf7f3;
  color: var(--green-dark);
}

.carton-match-facts {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  background: #fbfcfc;
}

.carton-match-facts > div {
  min-width: 0;
  padding: 13px 15px 14px;
  border-right: 1px solid #e7ecea;
}

.carton-match-facts > div:last-child {
  border-right: 0;
}

.carton-match-facts span,
.carton-match-facts b,
.carton-match-facts small {
  display: block;
}

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

.carton-match-facts b {
  margin-top: 5px;
  color: #273532;
  font-size: 17px;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.carton-match-facts small {
  margin-top: 4px;
  color: var(--amber);
  font-size: 12px;
  font-weight: 800;
}

.custom-carton-result {
  overflow: hidden;
  border: 1px solid #b9d8ce;
  border-radius: 7px;
  background: #f9fcfb;
  box-shadow: 0 2px 8px rgba(13, 124, 102, 0.08);
}

.custom-carton-result.selected {
  border-color: var(--green);
  box-shadow: 0 0 0 2px rgba(13, 124, 102, 0.12);
}

.custom-carton-main {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 18px;
  align-items: center;
  padding: 18px 18px 16px;
  border-bottom: 1px solid #d9e8e2;
}

.custom-carton-main p {
  margin: 0 0 5px;
  color: var(--green-dark);
  font-size: 13px;
  font-weight: 900;
}

.custom-carton-main strong,
.custom-carton-main small {
  display: block;
}

.custom-carton-main strong {
  color: var(--ink);
  font-size: 25px;
  line-height: 1.25;
}

.custom-carton-main small {
  margin-top: 7px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.custom-carton-main button {
  min-height: 42px;
  padding: 0 17px;
  font-size: 14px;
}

.custom-carton-state {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 0 10px;
  border: 1px solid #d5dfdb;
  border-radius: 6px;
  background: #f4f7f6;
  color: #64726d;
  font-size: 12px;
  font-weight: 900;
  white-space: nowrap;
}

.custom-carton-state.saved {
  border-color: #a9d2c3;
  background: #e8f5f0;
  color: var(--green-dark);
}

.custom-carton-state.dirty {
  border-color: #e4c28a;
  background: #fff7e8;
  color: #8a580d;
}

.custom-carton-editor {
  background: #fff;
}

.custom-carton-editor-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 15px 18px 8px;
}

.custom-carton-editor-head strong,
.custom-carton-editor-head span {
  display: block;
}

.custom-carton-editor-head strong {
  color: var(--ink);
  font-size: 16px;
}

.custom-carton-editor-head span {
  margin-top: 3px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.custom-carton-fields {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  padding: 10px 18px 16px;
}

.custom-carton-fields label {
  display: grid;
  gap: 6px;
  min-width: 0;
  color: #354740;
  font-size: 12px;
  font-weight: 850;
}

.custom-carton-fields input {
  width: 100%;
  min-height: 42px;
  margin: 0;
  padding: 0 11px;
  border: 1px solid #cedbd6;
  border-radius: 6px;
  background: #fff;
  color: var(--ink);
  font: inherit;
  font-size: 14px;
  font-weight: 750;
  outline: 0;
  transition: border-color 140ms ease, box-shadow 140ms ease;
}

.custom-carton-fields input:hover {
  border-color: #a9bbb5;
}

.custom-carton-fields input:focus {
  border-color: var(--green);
  box-shadow: 0 0 0 3px rgba(13, 124, 102, 0.11);
}

.custom-carton-wide-field {
  grid-column: span 2;
}

.custom-carton-editor-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 13px 18px 15px;
  border-top: 1px solid #e1ebe7;
  background: #f8fbfa;
}

.custom-carton-editor-actions p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.custom-carton-editor-actions button {
  min-height: 42px;
  padding: 0 18px;
  border-color: var(--green);
  background: var(--green);
  color: #fff;
  font-size: 14px;
  font-weight: 900;
}

.custom-carton-editor-actions button:hover,
.custom-carton-editor-actions button:focus-visible {
  border-color: var(--green-dark);
  background: var(--green-dark);
}

.custom-carton-editor-actions button.dirty {
  border-color: #a96516;
  background: #a96516;
}

.custom-carton-result.selected .custom-carton-main button {
  border-color: #b8cec7;
  background: #edf7f3;
  color: var(--green-dark);
}

.custom-carton-identifiers {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  padding: 14px 18px;
  border-bottom: 1px solid #d9e8e2;
  background: #edf8f4;
}

.custom-carton-identifiers > div {
  min-width: 0;
}

.custom-carton-identifiers span {
  display: block;
  margin-bottom: 6px;
  color: var(--green-dark);
  font-size: 13px;
  font-weight: 900;
}

.custom-carton-identifiers input {
  width: 100%;
  min-height: 40px;
  margin: 0;
  background: #fff;
  font-size: 14px;
  font-weight: 800;
}

.custom-carton-facts {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  background: #fff;
}

.custom-carton-facts > div {
  min-width: 0;
  padding: 13px 15px 14px;
  border-right: 1px solid #e1ebe7;
}

.custom-carton-facts > div:last-child {
  border-right: 0;
}

.custom-carton-facts span,
.custom-carton-facts b,
.custom-carton-facts small {
  display: block;
}

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

.custom-carton-facts b {
  margin-top: 5px;
  color: #273532;
  font-size: 17px;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.custom-carton-facts small {
  margin-top: 4px;
  color: var(--green-dark);
  font-size: 12px;
  font-weight: 800;
}

.custom-carton-formula {
  margin: 0;
  padding: 10px 15px 12px;
  border-top: 1px solid #e1ebe7;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}

/* 定制纸箱只分析上方正式数据，不在这里重复录入尺寸和重量。 */
.carton-matcher {
  padding: 18px;
  background: #fbfdfc;
}

.carton-match-top {
  margin-bottom: 12px;
}

.carton-match-top p {
  color: var(--green-dark);
}

.carton-match-top h3 {
  font-size: 19px;
}

.carton-source-note {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 0 10px;
  border: 1px solid #d7e1dd;
  border-radius: 5px;
  background: #f5f8f7;
  color: #52625d;
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}

.custom-carton-result {
  border-color: #cedbd6;
  border-radius: 7px;
  background: #fff;
  box-shadow: none;
}

.custom-carton-result.selected {
  border-color: #9fcabc;
  box-shadow: none;
}

.custom-carton-result.has-error {
  border-color: #e0aaa4;
}

.custom-carton-entry {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 18px;
  align-items: end;
  padding: 16px 18px;
  border-bottom: 1px solid #e0e8e5;
}

.custom-carton-spec-field {
  display: grid;
  gap: 7px;
  min-width: 0;
  color: #354740;
  font-size: 13px;
  font-weight: 850;
}

.custom-carton-spec-field input {
  width: 100%;
  min-height: 42px;
  margin: 0;
  padding: 0 12px;
  border: 1px solid #c8d6d1;
  border-radius: 6px;
  background: #fff;
  color: var(--ink);
  font-size: 14px;
  font-weight: 750;
  outline: 0;
  transition: border-color 150ms ease, box-shadow 150ms ease;
}

.custom-carton-spec-field input:hover {
  border-color: #9fb4ad;
}

.custom-carton-spec-field input:focus {
  border-color: var(--green);
  box-shadow: 0 0 0 3px rgba(13, 124, 102, 0.11);
}

.custom-carton-save-area {
  display: flex;
  align-items: center;
  gap: 8px;
}

.custom-carton-save-area button {
  min-width: 126px;
  min-height: 42px;
  padding: 0 16px;
  border-color: var(--green);
  background: var(--green);
  color: #fff;
  font-size: 14px;
  font-weight: 900;
}

.custom-carton-save-area button:hover,
.custom-carton-save-area button:focus-visible {
  border-color: var(--green-dark);
  background: var(--green-dark);
}

.custom-carton-save-area button.dirty {
  border-color: #a96516;
  background: #a96516;
}

.custom-carton-state.error {
  border-color: #e0aaa4;
  background: #fff5f4;
  color: #a33931;
}

.custom-carton-analysis {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 0;
}

.custom-carton-analysis > div {
  min-width: 0;
  padding: 16px 18px;
  border-right: 1px solid #e0e8e5;
}

.custom-carton-analysis > div:nth-child(3) {
  border-right: 0;
}

.custom-carton-analysis dt {
  color: #63736e;
  font-size: 12px;
  font-weight: 800;
}

.custom-carton-analysis dd {
  margin: 6px 0 0;
  color: #263632;
  font-size: 19px;
  font-weight: 900;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.custom-carton-analysis .custom-carton-placement {
  grid-column: 1 / -1;
  padding-top: 14px;
  padding-bottom: 15px;
  border-top: 1px solid #e0e8e5;
  border-right: 0;
  background: #f7faf9;
}

.custom-carton-analysis .custom-carton-placement dd {
  color: #31433e;
  font-size: 14px;
  font-weight: 800;
  line-height: 1.55;
}

.custom-carton-analysis .custom-carton-placement.is-error {
  background: #fff7f6;
}

.custom-carton-analysis .custom-carton-placement.is-error dd {
  color: #a33931;
}

@media (max-width: 980px) {
  .custom-carton-entry {
    grid-template-columns: 1fr;
  }

  .custom-carton-save-area {
    justify-content: space-between;
  }
}

@media (max-width: 760px) {
  .carton-match-top {
    align-items: flex-start;
    flex-direction: column;
    gap: 8px;
  }

  .carton-match-top > span {
    white-space: normal;
  }

  .carton-match-tools {
    justify-content: flex-start;
  }

  .carton-match-tools > span {
    white-space: normal;
  }

  .carton-match-main {
    grid-template-columns: 38px minmax(0, 1fr);
  }

  .carton-match-main button {
    grid-column: 2;
    justify-self: start;
  }

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

  .carton-match-facts > div:nth-child(2n) {
    border-right: 0;
  }

  .carton-match-facts > div {
    border-bottom: 1px solid #e7ecea;
  }

  .carton-match-facts > div:last-child {
    grid-column: 1 / -1;
    border-right: 0;
    border-bottom: 0;
  }

  .custom-carton-main {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .custom-carton-main strong {
    font-size: 22px;
  }

  .custom-carton-main button {
    justify-self: start;
  }

  .custom-carton-state {
    justify-self: start;
  }

  .custom-carton-fields {
    grid-template-columns: 1fr;
  }

  .custom-carton-wide-field {
    grid-column: auto;
  }

  .custom-carton-editor-actions {
    align-items: stretch;
    flex-direction: column;
  }

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

  .custom-carton-identifiers {
    grid-template-columns: 1fr;
  }

  .custom-carton-facts > div {
    border-bottom: 1px solid #e1ebe7;
  }

  .custom-carton-facts > div:nth-child(2n) {
    border-right: 0;
  }

  .custom-carton-facts > div:last-child {
    grid-column: 1 / -1;
    border-right: 0;
    border-bottom: 0;
  }
}

.toggle-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 18px;
  padding: 8px 16px 16px;
}

.toggle-row label {
  color: var(--ink);
  font-size: 13px;
}

.help-list {
  padding: 0 16px 16px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.6;
}

.help-list p {
  margin: 8px 0 0;
}

.help-list strong {
  color: var(--ink);
}

.help-list a,
.source-link,
.inline-copy-link {
  color: var(--green-dark);
  font-weight: 800;
  text-decoration: none;
}

.help-list a:hover,
.source-link:hover,
.inline-copy-link:hover {
  text-decoration: underline;
}

.inline-copy-link {
  display: inline;
  min-height: 0;
  padding: 0;
  border: 0;
  background: transparent;
  font-size: inherit;
  cursor: pointer;
}

.paste-panel {
  display: grid;
  gap: 8px;
  align-content: start;
  min-width: 0;
}

.paste-panel:focus-visible {
  outline: 2px solid var(--green);
  outline-offset: 3px;
  border-radius: 8px;
}

.paste-panel p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
}

.paste-panel.disabled {
  opacity: 0.55;
  pointer-events: none;
}

.image-preview {
  display: grid;
  place-items: center;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border: 1px dashed #aab6b1;
  border-radius: 8px;
  background: #f8faf9;
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
}

.image-preview img,
.product-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.library-view {
  padding: 0 clamp(10px, 1.8vw, 24px) 36px;
}

.library-shell {
  min-width: 0;
  max-width: 1800px;
  margin: 0 auto;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.98);
  box-shadow: var(--shadow);
}

.library-topline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 22px 16px;
  border-bottom: 1px solid var(--line);
}

.library-topline h2 {
  margin-bottom: 0;
  font-size: 20px;
}

.library-topline p {
  margin: 5px 0 0;
  color: var(--green-dark);
  font-size: 13px;
  font-weight: 800;
}

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

.library-actions span {
  color: var(--muted);
  font-size: 14px;
  font-weight: 800;
}

.save-status {
  min-height: 18px;
  margin: -4px 0 10px;
  color: var(--green-dark);
  font-size: 12px;
  font-weight: 800;
}

.save-status.error {
  color: var(--red);
}

.top-save-status {
  margin: -2px 0 10px;
  font-size: 13px;
}

.empty-library {
  padding: 34px;
  color: var(--muted);
  text-align: center;
}

.section-empty {
  background: rgba(255, 255, 255, 0.58);
  font-size: 14px;
}

.library-table-wrap {
  overflow-x: auto;
  border-top: 1px solid var(--line);
  background: linear-gradient(180deg, #f7fbf9 0, #eef7f3 100%);
}

.product-thumb {
  display: grid;
  place-items: center;
  position: relative;
  width: 80px;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: 6px;
  background: #eef3f1;
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
}

.thumb-preview {
  width: 100%;
  height: 100%;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.thumb-preview:focus-visible {
  outline: 2px solid var(--green);
  outline-offset: -2px;
}

.product-thumb.pending-image {
  outline: 2px solid var(--green);
  outline-offset: 2px;
  background: #e1f4ee;
}

.thumb-replace {
  position: absolute;
  right: 4px;
  bottom: 4px;
  z-index: 2;
  min-height: 22px;
  padding: 0 6px;
  border-color: rgba(7, 88, 70, 0.2);
  border-radius: 4px;
  background: rgba(7, 88, 70, 0.92);
  color: #fff;
  font-size: 11px;
  line-height: 22px;
  opacity: 0.82;
  transform: translateY(0);
  transition: opacity 140ms ease, transform 140ms ease;
}

.product-thumb:hover .thumb-replace,
.thumb-replace:focus-visible,
.product-thumb.pending-image .thumb-replace {
  opacity: 1;
}

.product-table {
  width: 1780px;
  max-width: 1780px;
  margin: 0 auto;
  table-layout: fixed;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 16px;
  background: #f8fbfa;
}

.product-table thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  border-top: 0;
  border-bottom: 1px solid #d5e2de;
  background: #eaf3ef;
  color: #31413d;
  font-size: 13px;
  font-weight: 900;
  line-height: 1.2;
  white-space: nowrap;
}

.product-table td,
.product-table th {
  padding: 14px 12px;
  border-top: 1px solid #dde8e4;
  text-align: left;
  vertical-align: middle;
}

.product-table td:nth-child(1),
.product-table th:nth-child(1) {
  width: 450px;
}

.product-table td:nth-child(2),
.product-table th:nth-child(2) {
  width: 110px;
}

.product-table td:nth-child(3),
.product-table th:nth-child(3),
.product-table td:nth-child(4),
.product-table th:nth-child(4),
.product-table td:nth-child(5),
.product-table th:nth-child(5) {
  width: 104px;
}

.product-table td:nth-child(6),
.product-table th:nth-child(6) {
  width: 108px;
}

.product-table td:nth-child(7),
.product-table th:nth-child(7),
.product-table td:nth-child(8),
.product-table th:nth-child(8),
.product-table td:nth-child(9),
.product-table th:nth-child(9) {
  width: 96px;
}

.product-table td:nth-child(10),
.product-table th:nth-child(10) {
  width: 86px;
}

.product-table td:nth-child(11),
.product-table th:nth-child(11) {
  width: 190px;
}

.product-table td:nth-child(12),
.product-table th:nth-child(12) {
  width: 190px;
}

.product-table td:nth-child(n + 2):nth-child(-n + 9),
.product-table th:nth-child(n + 2):nth-child(-n + 9),
.product-table td:nth-child(12),
.product-table th:nth-child(12),
.product-table .amount {
  text-align: right;
  white-space: nowrap;
}

.product-table td:nth-child(10),
.product-table th:nth-child(10),
.product-table td:nth-child(11),
.product-table th:nth-child(11),
.date-cell {
  text-align: center;
  white-space: nowrap;
}

.product-table tbody tr {
  background: rgba(255, 255, 255, 0.72);
  transition: background 140ms ease, box-shadow 140ms ease;
}

.product-table .library-section-row {
  background: #f4f8f6;
}

.product-table .library-section-row td {
  padding: 16px 18px 10px;
  border-top: 1px solid #d7e4df;
}

.library-section-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 10px 12px;
  border: 1px solid #d6e5df;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 1px 0 rgba(20, 37, 32, 0.04);
}

.library-section-title span {
  color: var(--ink);
  font-size: 17px;
  font-weight: 950;
}

.library-section-title strong {
  color: var(--muted);
  font-size: 13px;
  font-weight: 900;
}

.product-table .library-section-row:hover {
  background: #f4f8f6;
  box-shadow: none;
  cursor: default;
}

.product-table tbody tr:hover {
  background: #f1faf6;
  box-shadow: inset 3px 0 0 var(--green);
  cursor: pointer;
}

.product-table .active {
  background: #eef8f5;
}

.product-table-product {
  display: grid;
  grid-template-columns: 54px 80px minmax(180px, 1fr);
  gap: 12px;
  align-items: center;
}

.group-toggle,
.group-indent,
.group-spacer {
  display: inline-grid;
  place-items: center;
  width: 54px;
  min-height: 30px;
}

.group-toggle {
  width: 34px;
  height: 34px;
  min-height: 34px;
  padding: 0;
  border-color: rgba(13, 124, 102, 0.16);
  border-radius: 50%;
  background: #f7fbf9;
  color: var(--green-dark);
  transition: transform 140ms ease, background 140ms ease, border-color 140ms ease, box-shadow 140ms ease;
}

.group-toggle:hover,
.group-toggle:focus-visible {
  border-color: rgba(13, 124, 102, 0.36);
  background: #e9f6f0;
  box-shadow: 0 4px 12px rgba(7, 88, 70, 0.12);
  transform: translateY(-1px);
}

.chevron {
  content: "";
  width: 9px;
  height: 9px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  transition: transform 140ms ease;
}

.group-toggle[aria-expanded="true"] .chevron {
  transform: rotate(225deg) translateY(-2px);
}

.group-indent {
  width: 54px;
}

.group-child-row .group-indent {
  opacity: 0;
}

.group-spacer {
  width: 54px;
}

.group-parent-row {
  background: #f1faf6;
}

.group-parent-row:hover {
  background: #e8f6f0;
}

.group-child-row {
  background: #fbfdfc;
}

.group-child-row .product-main-cell {
  padding-left: 34px;
}

.grouping-source-row {
  box-shadow: inset 4px 0 0 var(--amber);
}

.group-collapsed-row {
  border-bottom: 1px solid #cbded6;
}

.dragging-row {
  opacity: 0.56;
}

.drop-target-row {
  background: #e2f5ed;
  box-shadow: inset 0 0 0 2px rgba(13, 124, 102, 0.34);
}

.drop-target-row .product-main-cell {
  position: relative;
}

.drop-target-row .product-main-cell::after {
  content: "松手加入此父体";
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  padding: 5px 8px;
  border-radius: 5px;
  background: var(--green-dark);
  color: #fff;
  font-size: 12px;
  font-weight: 900;
}

.product-meta {
  min-width: 0;
}

.product-name-line {
  display: flex;
  min-width: 0;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.variant-badge {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  flex: 0 0 auto;
  padding: 0 8px;
  border-radius: 5px;
  font-size: 12px;
  font-weight: 900;
  white-space: nowrap;
}

.parent-badge {
  background: #dbf0e7;
  color: var(--green-dark);
}

.picking-badge {
  background: #fff4df;
  color: #8a4b07;
}

.inline-name-button {
  display: block;
  max-width: 240px;
  min-width: 0;
  flex: 1 1 auto;
  min-height: auto;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  overflow: hidden;
  color: var(--ink);
  font: inherit;
  font-size: 18px;
  font-weight: 900;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.inline-name-button:hover,
.inline-name-button:focus-visible {
  color: var(--green-dark);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.inline-name-input {
  width: min(240px, 100%);
  min-height: 38px;
  margin: 0;
  padding: 6px 8px;
  font-size: 17px;
  font-weight: 800;
}

.inline-code-button {
  display: inline-flex;
  align-items: center;
  max-width: 260px;
  min-height: 28px;
  margin-top: 7px;
  padding: 0 9px;
  border: 1px solid #d8e5df;
  border-radius: 6px;
  background: #f8fbfa;
  overflow: hidden;
  color: #41514c;
  font-size: 13px;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.inline-code-button.is-empty {
  border-color: #dce8e2;
  color: #6a7a74;
}

.inline-code-button:hover,
.inline-code-button:focus-visible {
  border-color: rgba(13, 124, 102, 0.42);
  background: #eef8f4;
  color: var(--green-dark);
}

.inline-code-input {
  width: min(180px, 100%);
  min-height: 30px;
  margin-top: 6px;
  padding: 5px 8px;
  font-size: 13px;
  font-weight: 900;
}

.product-code-cell {
  color: #41514c;
  font-weight: 900;
}

.cost-cell {
  color: #4a5954;
}

.product-table .amount {
  font-variant-numeric: tabular-nums;
}

.purchase-order-dialog {
  position: fixed;
  inset: 0;
  z-index: 24;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(20, 31, 27, 0.36);
  backdrop-filter: blur(3px);
}

.purchase-order-dialog[hidden] {
  display: none;
}

.purchase-order-panel {
  width: min(calc(100vw - 48px), 1040px);
  max-height: 94vh;
  overflow: auto;
  border: 0;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 12px 32px rgba(8, 20, 17, 0.2);
}

.purchase-order-top {
  position: sticky;
  top: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 68px;
  padding: 14px 24px;
  border-bottom: 1px solid #e3e9e6;
  background: rgba(255, 255, 255, 0.97);
}

.purchase-order-top p {
  margin: 0 0 2px;
  color: #687772;
  font-size: 11px;
  font-weight: 900;
}

.purchase-order-top strong {
  color: #20332c;
  font-size: 20px;
  line-height: 1.2;
}

.purchase-order-top-actions {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.jackyun-sample-entry {
  min-height: 36px;
  padding: 0 14px;
  border-color: #cbd9d4;
  background: #fff;
  color: #315d4c;
  font-size: 13px;
}

.jackyun-sample-entry:hover,
.jackyun-sample-entry:focus-visible,
.jackyun-sample-entry[aria-expanded="true"] {
  border-color: #5f927d;
  background: #edf6f2;
  color: #174d37;
}

.purchase-order-close {
  position: relative;
  flex: none;
  width: 36px;
  min-height: 36px;
  padding: 0;
  border: 0;
  border-radius: 7px;
  background: #f1f5f3;
  color: #52615c;
}

.purchase-order-close::before,
.purchase-order-close::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 14px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
}

.purchase-order-close::before {
  transform: translate(-50%, -50%) rotate(45deg);
}

.purchase-order-close::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

.jackyun-sample-order {
  border-bottom: 1px solid #e4e9e7;
  background: #fbfcfc;
}

.jackyun-sample-order[hidden] {
  display: none;
}

.jackyun-sample-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 18px 24px 14px;
  border-top: 1px solid #e4e9e7;
}

.jackyun-sample-head > div {
  min-width: 0;
}

.jackyun-sample-head span:first-child {
  display: block;
  margin-bottom: 2px;
  color: #527268;
  font-size: 11px;
  font-weight: 900;
}

.jackyun-sample-head strong {
  display: block;
  color: var(--ink);
  font-size: 18px;
  line-height: 1.3;
}

.jackyun-sample-head p {
  margin: 3px 0 0;
  color: #67756f;
  font-size: 12px;
  font-weight: 750;
}

.jackyun-sample-form {
  display: grid;
  grid-template-columns: minmax(320px, 1.35fr) minmax(230px, 0.85fr) minmax(130px, 0.42fr);
  gap: 14px;
  align-items: start;
  padding: 0 24px 16px;
}

.jackyun-sample-form > label,
.jackyun-sample-form .jackyun-sample-address,
.jackyun-sample-form .purchase-order-field {
  display: grid;
  gap: 7px;
  min-width: 0;
  color: #2a3c36;
  font-size: 12px;
  font-weight: 850;
}

.jackyun-sample-form textarea,
.jackyun-sample-form input,
.jackyun-address-fields input {
  width: 100%;
  min-height: 42px;
  border: 1px solid #cfdad6;
  border-radius: 7px;
  background: #fff;
  color: var(--ink);
  font: inherit;
  font-size: 13px;
  font-weight: 650;
  outline: 0;
}

.jackyun-sample-form textarea {
  min-height: 74px;
  padding: 10px 12px;
  line-height: 1.55;
  resize: vertical;
}

.jackyun-sample-form input {
  padding: 0 12px;
}

.jackyun-sample-warehouse-field > .purchase-order-field-label,
.jackyun-sample-quantity-field > span {
  display: flex;
  align-items: center;
  min-height: 28px;
}

.jackyun-sample-warehouse-field > .purchase-order-select,
.jackyun-sample-quantity-field > input {
  margin-top: 0;
}

.jackyun-address-source-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 28px;
}

.jackyun-address-source-head > span {
  color: #2a3c36;
  font-size: 12px;
  font-weight: 850;
}

.jackyun-address-source-head button {
  min-height: 28px;
  padding: 0 10px;
  border: 1px solid #b9cbc4;
  border-radius: 6px;
  background: #fff;
  color: #245744;
  font-size: 12px;
  font-weight: 850;
  cursor: pointer;
  transition: border-color 160ms ease, background-color 160ms ease, color 160ms ease;
}

.jackyun-address-source-head button:hover,
.jackyun-address-source-head button:focus-visible {
  border-color: #367a60;
  background: #edf7f2;
  color: #174936;
}

.jackyun-address-source-head button:active {
  background: #dfeee7;
}

.jackyun-address-parse-status {
  min-height: 18px;
  color: #687772;
  font-size: 11px;
  font-weight: 750;
}

.jackyun-address-parse-status.ready {
  color: #147a4b;
}

.jackyun-address-parse-status.error {
  color: #b42318;
}

.jackyun-address-fields {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(110px, 0.55fr) minmax(145px, 0.72fr) minmax(240px, 1.25fr) minmax(250px, 1.4fr);
  gap: 12px;
  padding: 13px 0 1px;
  border-top: 1px solid #e1e8e5;
}

.jackyun-address-fields label {
  display: grid;
  gap: 7px;
  min-width: 0;
  color: #2a3c36;
  font-size: 12px;
  font-weight: 850;
}

.jackyun-address-fields input {
  min-height: 42px;
  padding: 0 11px;
}

.jackyun-sample-form textarea:focus,
.jackyun-sample-form input:focus,
.jackyun-address-fields input:focus {
  border-color: #a65f1d;
  box-shadow: 0 0 0 3px rgba(166, 95, 29, 0.12);
}

.jackyun-sample-form textarea::placeholder,
.jackyun-sample-form input::placeholder,
.jackyun-address-fields input::placeholder {
  color: #6d7b76;
  opacity: 1;
}

.jackyun-sample-warehouse-field {
  align-self: start;
}

.jackyun-sample-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 0 22px 14px;
  overflow: hidden;
  border: 1px solid #dce4e1;
  border-radius: 8px;
  background: #f8faf9;
}

.jackyun-sample-summary > div {
  min-width: 0;
  padding: 10px 12px;
  border-right: 1px solid #dfe6e3;
}

.jackyun-sample-summary > div:last-child {
  border-right: 0;
}

.jackyun-sample-summary span {
  display: block;
  color: #687772;
  font-size: 11px;
  font-weight: 850;
}

.jackyun-sample-summary strong {
  display: block;
  margin-top: 3px;
  color: #263a33;
  font-size: 13px;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.jackyun-sample-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 14px;
  min-height: 54px;
  padding: 0 22px 14px;
}

.jackyun-sample-footer .purchase-order-status {
  flex: 1;
  margin: 0;
}

.jackyun-sample-create-button {
  flex: none;
  border-color: #b96920;
  background: #b96920;
  color: #fff;
}

.jackyun-sample-create-button:hover,
.jackyun-sample-create-button:focus-visible {
  border-color: #8c4c13;
  background: #8c4c13;
}

.jackyun-sample-create-button:disabled {
  border-color: #d3d9d7;
  background: #e5e9e7;
  color: #75817d;
  cursor: default;
}

.jackyun-sample-history {
  border-top: 1px solid #e5eae8;
}

.jackyun-sample-history:empty {
  display: none;
}

.jackyun-sample-history-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  min-height: 62px;
  padding: 10px 22px;
  background: #f7f9f8;
}

.jackyun-sample-history-head > div {
  min-width: 0;
}

.jackyun-sample-history-head .jackyun-sales-history-title {
  margin: 0;
  color: #263a33;
  font-size: 14px;
  font-weight: 850;
}

.jackyun-sample-history-head span {
  display: block;
  margin-top: 2px;
  color: #5f6f69;
  font-size: 12px;
  font-weight: 650;
}

.jackyun-sample-history-list {
  border-top: 1px solid #e5eae8;
}

.jackyun-sample-history-item {
  display: grid;
  grid-template-columns: minmax(205px, 0.9fr) minmax(180px, 1fr) minmax(190px, 0.9fr) 126px;
  align-items: center;
  gap: 18px;
  min-height: 64px;
  padding: 10px 22px;
  border-top: 1px solid #edf1ef;
  color: #4c5e57;
  font-size: 12px;
  font-weight: 700;
}

.jackyun-sample-history-item:first-child {
  border-top: 0;
}

.jackyun-sample-order-id {
  min-width: 0;
}

.jackyun-sample-order-id > strong {
  display: block;
  color: #9a5516;
  font-size: 14px;
  line-height: 1.35;
  font-variant-numeric: tabular-nums;
}

.jackyun-sample-order-id > span {
  display: block;
  margin-top: 2px;
  color: #687772;
  font-size: 11px;
  font-weight: 700;
}

.jackyun-sample-order-meta {
  min-width: 0;
  overflow-wrap: anywhere;
}

.jackyun-logistics-number {
  min-width: 0;
}

.jackyun-logistics-number > span {
  display: block;
  color: #687772;
  font-size: 11px;
  font-weight: 750;
}

.jackyun-logistics-number > strong {
  display: block;
  margin-top: 2px;
  overflow-wrap: anywhere;
  color: #35473f;
  font-size: 13px;
  line-height: 1.35;
  font-variant-numeric: tabular-nums;
}

.jackyun-logistics-number.ready > strong {
  color: #147a4b;
}

.jackyun-logistics-number.empty > strong {
  color: #a14e28;
}

.jackyun-logistics-number.pending > strong {
  color: #65746f;
}

.jackyun-logistics-query-button,
.jackyun-logistics-bulk-button {
  min-height: 34px;
  border: 1px solid #c8d5cf;
  border-radius: 6px;
  background: #fff;
  color: #2f5f4c;
  font: inherit;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
  transition: border-color 160ms ease, background-color 160ms ease, color 160ms ease, transform 160ms ease;
}

.jackyun-logistics-query-button {
  width: 126px;
  padding: 0 12px;
}

.jackyun-logistics-bulk-button {
  flex: none;
  min-width: 148px;
  padding: 0 14px;
  border-color: #2f6e56;
  color: #245943;
}

.jackyun-logistics-query-button:hover,
.jackyun-logistics-query-button:focus-visible,
.jackyun-logistics-bulk-button:hover,
.jackyun-logistics-bulk-button:focus-visible {
  border-color: #2f6e56;
  background: #edf6f1;
  color: #174d37;
  outline: 0;
}

.jackyun-logistics-query-button:focus-visible,
.jackyun-logistics-bulk-button:focus-visible {
  box-shadow: 0 0 0 3px rgba(47, 110, 86, 0.16);
}

.jackyun-logistics-query-button:active,
.jackyun-logistics-bulk-button:active {
  transform: translateY(1px);
}

.jackyun-logistics-query-button:disabled,
.jackyun-logistics-bulk-button:disabled {
  border-color: #d8dfdc;
  background: #eef1f0;
  color: #75817d;
  cursor: default;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .jackyun-logistics-query-button,
  .jackyun-logistics-bulk-button {
    transition: none;
  }
}

.purchase-order-close:hover,
.purchase-order-close:focus-visible {
  background: #e6eeea;
  color: var(--green-dark);
}

.purchase-order-product {
  display: grid;
  grid-template-columns: minmax(170px, 0.9fr) minmax(260px, 1.5fr) minmax(150px, 0.7fr);
  margin: 0;
  border-bottom: 1px solid #e3e9e6;
  background: #fbfcfc;
}

.purchase-order-product > div,
.purchase-order-calculation > div {
  min-width: 0;
  padding: 12px 18px;
  border-right: 1px solid #e2e8e5;
}

.purchase-order-product > div:last-child,
.purchase-order-calculation > div:last-child {
  border-right: 0;
}

.purchase-order-product span,
.purchase-order-calculation span {
  display: block;
  color: #6b7974;
  font-size: 11px;
  font-weight: 800;
}

.purchase-order-product strong,
.purchase-order-calculation strong {
  display: block;
  margin-top: 4px;
  color: var(--ink);
  font-size: 14px;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.purchase-order-section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  padding: 22px 24px 4px;
}

.purchase-order-section-head > div {
  min-width: 0;
}

.purchase-order-section-head span {
  display: block;
  margin-bottom: 2px;
  color: #6b7974;
  font-size: 11px;
  font-weight: 850;
}

.purchase-order-section-head strong {
  display: block;
  color: #24372f;
  font-size: 17px;
  line-height: 1.35;
}

.purchase-order-section-head p {
  margin: 0 0 2px;
  color: #718079;
  font-size: 12px;
  font-weight: 700;
}

.purchase-order-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 16px;
  padding: 14px 24px 18px;
}

.purchase-order-form label,
.purchase-order-field-label {
  display: block;
  color: #40504b;
  font-size: 13px;
  font-weight: 900;
}

.purchase-order-number-field {
  grid-column: 1 / -1;
}

.purchase-order-carton-choice {
  grid-column: 1 / -1;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.purchase-order-carton-choice legend {
  margin-bottom: 7px;
  padding: 0;
  color: #40504b;
  font-size: 13px;
  font-weight: 900;
}

.purchase-order-carton-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.purchase-order-carton-option {
  display: flex;
  align-items: center;
  gap: 11px;
  min-height: 62px;
  padding: 10px 13px;
  border: 1px solid #d5dfdb;
  border-radius: 8px;
  background: #fff;
  cursor: pointer;
  transition: border-color 150ms ease, background-color 150ms ease;
}

.purchase-order-carton-option:hover {
  border-color: #9db8af;
  background: #fbfdfc;
}

.purchase-order-carton-option:has(input:checked) {
  border-color: #4d8a72;
  background: #eef7f3;
}

.purchase-order-carton-option:has(input:focus-visible) {
  outline: 3px solid rgba(13, 124, 102, 0.11);
  outline-offset: 1px;
}

.purchase-order-carton-option input {
  flex: none;
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: var(--green);
}

.purchase-order-carton-option span,
.purchase-order-carton-option strong,
.purchase-order-carton-option small {
  display: block;
}

.purchase-order-carton-option strong {
  color: var(--ink);
  font-size: 14px;
}

.purchase-order-carton-option small {
  margin-top: 3px;
  color: #6a7873;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.45;
}

.purchase-order-carton-source {
  display: block;
  min-width: 0;
  margin: 8px 0 0;
  padding: 7px 10px;
  border-radius: 6px;
  background: #f5f8f7;
  color: #3d4f49;
  font-size: 11px;
  font-weight: 800;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.purchase-order-carton-source[hidden] {
  display: none;
}

.purchase-order-carton-source.stock {
  background: #edf7f3;
  color: var(--green-dark);
}

.purchase-order-carton-source.custom {
  background: #f0f5f9;
  color: #1f5689;
}

.purchase-order-carton-source.missing {
  background: #fff6eb;
  color: #8a4b07;
}

.purchase-order-number-field input {
  min-height: 44px;
  border-color: #cfdad6;
  background: #fff;
  font-weight: 800;
}

.purchase-order-form input:focus,
.purchase-order-select-trigger:focus-visible {
  border-color: var(--green);
  background: #fff;
  outline: 3px solid rgba(13, 124, 102, 0.1);
  outline-offset: 1px;
}

.purchase-order-form input {
  min-height: 44px;
  margin-top: 7px;
  padding: 9px 11px;
  border-color: #d3ddd9;
  background: #fff;
  font-size: 14px;
  transition: border-color 140ms ease, outline-color 140ms ease, background 140ms ease;
}

.purchase-order-form input:hover {
  border-color: #adbfba;
}

.purchase-order-field[hidden],
.purchase-order-native-select {
  display: none;
}

.purchase-order-select {
  position: relative;
  margin-top: 7px;
}

.purchase-order-select-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  min-height: 44px;
  padding: 0 12px;
  border: 1px solid #d3ddd9;
  border-radius: 7px;
  background: #fff;
  color: var(--ink);
  font-size: 14px;
  font-weight: 800;
  text-align: left;
  transition: border-color 140ms ease, background 140ms ease, outline-color 140ms ease;
}

.purchase-order-select-trigger:hover,
.purchase-order-select-trigger[aria-expanded="true"] {
  border-color: #9db8af;
  background: #fbfdfc;
}

.purchase-order-select-chevron {
  flex: none;
  width: 8px;
  height: 8px;
  margin-top: -3px;
  border-right: 2px solid #60706b;
  border-bottom: 2px solid #60706b;
  transform: rotate(45deg);
  transition: transform 150ms ease;
}

.purchase-order-select-trigger[aria-expanded="true"] .purchase-order-select-chevron {
  margin-top: 3px;
  transform: rotate(225deg);
}

.purchase-order-select-menu {
  position: fixed;
  z-index: 28;
  display: grid;
  gap: 3px;
  padding: 5px;
  border: 1px solid #cfdbd6;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 10px 26px rgba(20, 36, 31, 0.16);
}

.purchase-order-select-menu[hidden] {
  display: none;
}

.purchase-order-select-menu button {
  position: relative;
  justify-content: flex-start;
  min-height: 39px;
  padding: 0 36px 0 11px;
  border: 0;
  border-radius: 5px;
  background: #fff;
  color: #31413d;
  font-size: 14px;
  font-weight: 800;
  text-align: left;
}

.purchase-order-select-menu button:hover,
.purchase-order-select-menu button:focus-visible {
  background: #f1f6f4;
  color: var(--green-dark);
  outline: 0;
}

.purchase-order-select-menu button.selected {
  background: #e7f4ef;
  color: var(--green-dark);
}

.purchase-order-select-menu button.selected::after {
  content: "";
  position: absolute;
  right: 14px;
  top: 50%;
  width: 7px;
  height: 11px;
  border-right: 2px solid var(--green);
  border-bottom: 2px solid var(--green);
  transform: translateY(-62%) rotate(45deg);
}

.purchase-order-calculation {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 0 24px;
  overflow: hidden;
  border: 1px solid #e0e7e4;
  border-radius: 8px;
  background: #f8faf9;
}

.purchase-order-paper-preview {
  margin: 14px 22px 0;
  padding: 14px 15px;
  border: 1px solid #dce6e2;
  border-radius: 8px;
  background: #f7faf9;
  color: #243730;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.75;
  white-space: pre-line;
}

.jackyun-sales-order {
  margin-top: 22px;
  border-top: 1px solid #dfe6e3;
  border-bottom: 1px solid #dfe6e3;
  background: #fff;
}

.jackyun-sales-order-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 18px 24px 12px;
}

.jackyun-sales-order-head > div {
  min-width: 0;
}

.jackyun-sales-order-heading-group {
  display: flex;
  align-items: flex-end;
  gap: 14px;
}

.jackyun-sales-order-title-copy {
  min-width: 0;
}

.jackyun-sales-order-head span {
  display: block;
  margin-bottom: 3px;
  color: #5e746b;
  font-size: 11px;
  font-weight: 900;
}

.jackyun-sales-order-head strong {
  display: block;
  color: var(--ink);
  font-size: 17px;
  line-height: 1.3;
}

.jackyun-agent-download {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 32px;
  margin-bottom: 1px;
  padding: 0 11px;
  border: 1px solid #c6d8d1;
  border-radius: 6px;
  background: #fff;
  color: #256754;
  font-size: 12px;
  font-weight: 850;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  transition: border-color 160ms ease, background-color 160ms ease, color 160ms ease;
}

.jackyun-sales-order-head .jackyun-agent-download span {
  display: inline;
  margin: 0;
  color: inherit;
  font-size: inherit;
  font-weight: inherit;
}

.jackyun-agent-download .jackyun-agent-download-icon {
  font-size: 15px;
  line-height: 1;
}

.jackyun-agent-download:hover {
  border-color: #78a994;
  background: #edf7f3;
  color: #135d48;
}

.jackyun-agent-download:focus-visible {
  outline: 3px solid rgba(31, 139, 105, 0.2);
  outline-offset: 2px;
}

.jackyun-agent-download:active {
  background: #e1f1eb;
}

.jackyun-sales-order-head p {
  margin: 0 0 2px;
  color: #718079;
  font-size: 12px;
  font-weight: 800;
  text-align: right;
}

.jackyun-sales-order-meta {
  display: grid;
  justify-items: end;
  gap: 6px;
}

.jackyun-desktop-status {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  margin: 0;
  padding: 0 9px;
  border: 1px solid #d5dfdb;
  border-radius: 6px;
  background: #f5f8f7;
  color: #5c6c66;
  font-size: 11px;
  font-weight: 900;
  line-height: 1;
}

.jackyun-desktop-status.ready {
  border-color: #b7dccd;
  background: #eaf6f1;
  color: #11664f;
}

.jackyun-desktop-status.error {
  max-width: 360px;
  border-color: #edc8c3;
  background: #fff1ef;
  color: #a33a2f;
  text-align: right;
}

.jackyun-desktop-status.checking {
  border-color: #cbd9e5;
  background: #f0f5f9;
  color: #376889;
}

.jackyun-sales-order-body {
  display: grid;
  grid-template-columns: repeat(2, minmax(300px, 440px));
  gap: 14px;
  padding: 0 24px 20px;
}

.jackyun-warehouse-field {
  align-self: start;
}

.jackyun-custom-carton-spec-field {
  display: grid;
  align-content: start;
  color: #40504b;
  font-size: 13px;
  font-weight: 900;
}

.jackyun-custom-carton-spec-field[hidden] {
  display: none;
}

.jackyun-custom-carton-spec-field input {
  min-height: 44px;
  margin-top: 7px;
  padding: 9px 11px;
  border: 1px solid #d3ddd9;
  border-radius: 7px;
  background: #fff;
  color: var(--ink);
  font: inherit;
  font-size: 14px;
  outline: none;
  transition: border-color 140ms ease, outline-color 140ms ease;
}

.jackyun-custom-carton-spec-field input:hover {
  border-color: #adbfba;
}

.jackyun-custom-carton-spec-field input:focus {
  border-color: var(--green);
  outline: 3px solid rgba(13, 124, 102, 0.1);
  outline-offset: 1px;
}

.jackyun-custom-carton-spec-field small {
  margin-top: 5px;
  color: #6a7873;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.45;
}

.jackyun-warehouse-menu {
  max-height: min(420px, 60vh);
  overflow-y: auto;
}

.jackyun-sales-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  overflow: hidden;
  border: 1px solid #dce4e1;
  border-radius: 8px;
  background: #f8faf9;
}

.jackyun-sales-summary > div {
  min-width: 0;
  padding: 10px 12px;
  border-right: 1px solid #dfe6e3;
}

.jackyun-sales-summary > div:last-child {
  border-right: 0;
}

.jackyun-sales-summary span,
.jackyun-sales-memo > span {
  display: block;
  color: #6a7873;
  font-size: 11px;
  font-weight: 900;
}

.jackyun-sales-summary strong {
  display: block;
  margin-top: 4px;
  color: #263a33;
  font-size: 14px;
  font-variant-numeric: tabular-nums;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.jackyun-sales-memo {
  grid-column: 1 / -1;
  padding: 12px 14px;
  border-left: 3px solid #4f86bd;
  background: #f7f9fb;
}

.jackyun-sales-memo p {
  margin: 4px 0 0;
  color: #344842;
  font-size: 12px;
  font-weight: 750;
  line-height: 1.65;
  white-space: pre-line;
}

.jackyun-sales-history {
  border-top: 1px solid #e3e9e6;
}

.jackyun-sales-history:empty {
  display: none;
}

.jackyun-sales-history-title {
  margin: 0;
  padding: 12px 24px 8px;
  color: #64736d;
  font-size: 11px;
  font-weight: 900;
}

.jackyun-sales-history-list {
  display: grid;
}

.jackyun-sales-history-item {
  display: grid;
  grid-template-columns: minmax(180px, 0.7fr) minmax(110px, 0.45fr) minmax(180px, 1fr) 72px;
  align-items: center;
  gap: 12px;
  min-height: 49px;
  padding: 9px 24px;
  border-top: 1px solid #edf1ef;
}

.jackyun-sales-history-item strong {
  color: #1f5e91;
  font-size: 14px;
  font-variant-numeric: tabular-nums;
}

.jackyun-sales-history-item span {
  color: #566760;
  font-size: 12px;
  font-weight: 750;
  line-height: 1.45;
}

.jackyun-sales-history-item .jackyun-sales-warning {
  color: #9a5a08;
}

.jackyun-sales-history-delete {
  min-height: 32px;
  padding: 0 12px;
  border: 1px solid #e4b6b0;
  border-radius: 6px;
  background: #fff;
  color: #a33a2f;
  font-size: 12px;
  font-weight: 850;
}

.jackyun-sales-history-delete:hover,
.jackyun-sales-history-delete:focus-visible {
  border-color: #c66559;
  background: #fff1ef;
  color: #842a22;
}

.purchase-order-note,
.purchase-order-status {
  min-height: 0;
  margin: 9px 24px 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.purchase-order-note:empty,
.purchase-order-status:empty {
  display: none;
}

.purchase-order-status {
  color: var(--green-dark);
}

.purchase-order-status.error {
  color: var(--red);
}

.purchase-order-actions {
  position: sticky;
  bottom: 0;
  z-index: 3;
  display: flex;
  justify-content: flex-end;
  gap: 9px;
  margin-top: 18px;
  padding: 13px 24px 15px;
  border-top: 1px solid #e4eae7;
  background: rgba(255, 255, 255, 0.97);
}

.purchase-order-actions button {
  min-height: 40px;
  padding-inline: 15px;
  font-size: 13px;
}

.purchase-order-download {
  position: relative;
}

.purchase-order-actions #downloadPurchaseOrder {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  border-color: var(--green);
  background: var(--green);
  color: #fff;
}

.purchase-order-download-chevron {
  width: 7px;
  height: 7px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform 140ms ease;
}

#downloadPurchaseOrder[aria-expanded="true"] .purchase-order-download-chevron {
  transform: translateY(2px) rotate(225deg);
}

.purchase-order-download-menu {
  position: absolute;
  right: 0;
  bottom: calc(100% + 7px);
  z-index: 8;
  width: 176px;
  padding: 5px;
  border: 1px solid #d8e2de;
  border-radius: 7px;
  background: #fff;
  box-shadow: 0 12px 28px rgba(32, 57, 48, 0.15);
}

.purchase-order-download-menu[hidden] {
  display: none;
}

.purchase-order-actions .purchase-order-download-menu button {
  display: grid;
  width: 100%;
  min-height: 48px;
  padding: 7px 10px;
  border: 0;
  border-radius: 5px;
  background: #fff;
  color: #31443d;
  text-align: left;
}

.purchase-order-actions .purchase-order-download-menu button:hover,
.purchase-order-actions .purchase-order-download-menu button:focus-visible {
  background: #eef7f3;
}

.purchase-order-download-menu strong,
.purchase-order-download-menu span {
  display: block;
}

.purchase-order-download-menu strong {
  font-size: 13px;
  line-height: 1.35;
}

.purchase-order-download-menu span {
  margin-top: 2px;
  color: #718078;
  font-size: 11px;
  font-weight: 700;
}

.purchase-order-actions #downloadPurchaseOrder:hover,
.purchase-order-actions #downloadPurchaseOrder:focus-visible {
  border-color: var(--green-dark);
  background: var(--green-dark);
}

.purchase-order-actions #downloadPurchaseOrder:disabled {
  border-color: #cbd6d2;
  background: #dfe7e4;
  color: #788680;
  cursor: default;
}

.purchase-order-actions .jackyun-create-button {
  border-color: #2f6fa9;
  background: #2f6fa9;
  color: #fff;
}

.purchase-order-actions .jackyun-create-button:hover,
.purchase-order-actions .jackyun-create-button:focus-visible {
  border-color: #235783;
  background: #235783;
}

.purchase-order-actions .jackyun-create-button:disabled {
  border-color: #ccd6dc;
  background: #dfe6ea;
  color: #75838b;
  cursor: default;
}

.purchase-order-actions .jackyun-resume-button {
  border-color: #d8a24d;
  background: #fff8ec;
  color: #75470b;
  font-weight: 850;
  transition: border-color 160ms ease, background-color 160ms ease, color 160ms ease;
}

.purchase-order-actions .jackyun-resume-button:hover,
.purchase-order-actions .jackyun-resume-button:focus-visible {
  border-color: #b8791f;
  background: #ffefd1;
  color: #5f3705;
}

.purchase-order-actions .jackyun-resume-button:focus-visible {
  outline: 3px solid rgba(184, 121, 31, 0.18);
  outline-offset: 2px;
}

.purchase-order-actions .jackyun-resume-button:disabled {
  border-color: #d8d4cb;
  background: #eeeae2;
  color: #827d74;
  cursor: default;
}

.purchase-order-actions .jackyun-resume-button[hidden] {
  display: none;
}

@media (max-width: 700px) {
  .purchase-order-dialog {
    padding: 8px;
  }

  .purchase-order-panel {
    width: 100%;
    max-height: 96vh;
    border-radius: 8px;
  }

  .purchase-order-top {
    min-height: 64px;
    padding-inline: 16px;
  }

  .purchase-order-product,
  .purchase-order-calculation {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .purchase-order-product > div,
  .purchase-order-calculation > div {
    border-bottom: 1px solid var(--line);
  }

  .purchase-order-product > div:nth-child(2n),
  .purchase-order-calculation > div:nth-child(2n) {
    border-right: 0;
  }

  .purchase-order-product > div:last-child {
    grid-column: 1 / -1;
    border-bottom: 0;
  }

  .purchase-order-calculation > div:nth-last-child(-n + 2) {
    border-bottom: 0;
  }

  .purchase-order-form {
    grid-template-columns: 1fr;
    padding: 16px;
  }

  .purchase-order-carton-choice {
    grid-template-columns: 1fr;
  }

  .purchase-order-carton-source {
    border-top: 1px solid #d8e3df;
    border-left: 0;
  }

  .purchase-order-calculation {
    margin-inline: 16px;
  }

  .purchase-order-paper-preview,
  .jackyun-sales-order-head,
  .jackyun-sales-order-body,
  .purchase-order-note,
  .purchase-order-status {
    margin-inline: 16px;
  }


  .jackyun-sales-order-head {
    align-items: flex-start;
    margin-inline: 0;
    padding-inline: 16px;
  }

  .jackyun-sales-order-heading-group {
    align-items: flex-start;
    flex-direction: column;
    gap: 9px;
  }

  .jackyun-sales-order-head p {
    max-width: 48%;
  }

  .jackyun-sales-order-body {
    grid-template-columns: 1fr;
    margin-inline: 0;
    padding-inline: 16px;
  }

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

  .jackyun-sales-summary > div:nth-child(2) {
    border-right: 0;
  }

  .jackyun-sales-summary > div:nth-child(-n + 2) {
    border-bottom: 1px solid #dfe6e3;
  }

  .jackyun-sales-history-title,
  .jackyun-sales-history-item {
    padding-inline: 16px;
  }

  .jackyun-sales-history-item {
    grid-template-columns: 1fr 1fr;
  }

  .jackyun-sales-history-item span:last-child {
    grid-column: 1 / -1;
  }

  .purchase-order-actions {
    flex-wrap: wrap;
    padding-inline: 16px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .purchase-order-select-trigger,
  .purchase-order-select-chevron,
  .purchase-order-form input {
    transition: none;
  }
}

.image-preview-dialog {
  position: fixed;
  inset: 0;
  z-index: 20;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(8, 20, 17, 0.72);
}

.image-preview-dialog[hidden] {
  display: none;
}

.image-preview-panel {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  width: min(92vw, 980px);
  max-height: 92vh;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 8px;
  background: #f8fbfa;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.32);
}

.image-preview-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--line);
  background: #fff;
}

.image-preview-top strong {
  min-width: 0;
  overflow: hidden;
  font-size: 17px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.image-preview-actions {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 8px;
}

.image-preview-stage {
  display: grid;
  place-items: center;
  min-height: 320px;
  padding: 18px;
  overflow: auto;
  background:
    linear-gradient(90deg, rgba(13, 124, 102, 0.06) 0 1px, transparent 1px 100%),
    linear-gradient(180deg, rgba(13, 124, 102, 0.05) 0 1px, transparent 1px 100%),
    #f3f7f5;
  background-size: 28px 28px;
}

.image-preview-stage img {
  display: block;
  max-width: 100%;
  max-height: calc(92vh - 96px);
  object-fit: contain;
  border-radius: 6px;
  box-shadow: 0 10px 34px rgba(22, 33, 31, 0.18);
}

.history-detail-dialog {
  position: fixed;
  inset: 0;
  z-index: 18;
  display: grid;
  place-items: center;
  padding: 22px;
  background: rgba(8, 20, 17, 0.66);
}

.history-detail-dialog[hidden] {
  display: none;
}

.history-detail-panel {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  width: min(94vw, 1180px);
  max-height: 92vh;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 8px;
  background: #f6f8f7;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.34);
}

.history-detail-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 16px;
  border-bottom: 1px solid #d8e3de;
  background: #fff;
}

.history-detail-top strong {
  min-width: 0;
  overflow: hidden;
  color: #10211d;
  font-size: 18px;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.history-detail-body {
  display: grid;
  gap: 14px;
  padding: 16px;
  overflow: auto;
}

.history-detail-edit-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 14px;
  border: 1px solid #cfe1d9;
  border-radius: 8px;
  background: #eef8f3;
}

.history-detail-edit-bar > div:first-child {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.history-detail-edit-bar > div:first-child strong {
  color: #173d31;
  font-size: 14px;
}

.history-detail-edit-bar > div:first-child span {
  color: #5d7068;
  font-size: 12px;
}

.history-detail-edit-controls {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  min-width: 0;
}

.history-detail-edit-controls input {
  width: min(260px, 28vw);
  min-height: 36px;
  padding: 7px 10px;
  border: 1px solid #b9d1c6;
  border-radius: 6px;
  background: #fff;
  color: #173d31;
  font: inherit;
}

.history-detail-edit-controls input:focus {
  outline: 2px solid rgba(13, 124, 102, 0.2);
  border-color: #0d7c66;
}

.history-fbt-value {
  max-width: 260px;
  overflow-wrap: anywhere;
  color: #173d31;
  font-size: 14px;
  font-weight: 900;
}

.goodcang-history-bar {
  align-items: stretch;
  border-color: #bfd4e1;
  background: #f1f6f9;
}

.goodcang-history-title {
  display: flex !important;
  align-items: center;
  gap: 10px !important;
}

.goodcang-history-title > div {
  display: grid;
  gap: 3px;
}

.goodcang-draft-status {
  display: inline-flex;
  flex: none;
  align-items: center;
  min-height: 24px;
  padding: 2px 7px;
  border: 1px solid #9fc1d4;
  border-radius: 4px;
  background: #fff;
  color: #175a7e !important;
  font-size: 12px !important;
  font-weight: 900;
}

.goodcang-history-values {
  display: grid;
  grid-template-columns: minmax(120px, auto) minmax(180px, auto) auto;
  align-items: center;
  gap: 12px;
}

.goodcang-history-values > span {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.goodcang-history-values small {
  color: #61737d;
  font-size: 11px;
  font-weight: 800;
}

.goodcang-history-values strong {
  overflow-wrap: anywhere;
  color: #173344;
  font-size: 14px;
}

.goodcang-history-edit-grid {
  display: grid;
  grid-template-columns: minmax(170px, 0.7fr) minmax(240px, 1fr) auto;
  align-items: end;
  gap: 10px;
  min-width: min(100%, 680px);
}

.goodcang-history-edit-grid label {
  display: grid;
  gap: 5px;
  color: #425962;
  font-size: 12px;
  font-weight: 900;
}

.goodcang-history-edit-grid input {
  width: 100%;
  min-height: 38px;
  padding: 7px 10px;
  border: 1px solid #afc8d6;
  border-radius: 6px;
  background: #fff;
  color: #173344;
  font: inherit;
}

.goodcang-history-edit-grid input:focus {
  border-color: #276f96;
  outline: 2px solid rgba(39, 111, 150, 0.16);
}

.history-product-strip,
.history-detail-summary,
.history-shipping-grid {
  display: grid;
  gap: 10px;
}

.history-product-strip {
  grid-template-columns: 92px minmax(0, 1.2fr) minmax(180px, 0.8fr);
}

.history-detail-summary,
.history-shipping-grid {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.history-product-strip > div,
.history-detail-summary > div,
.history-shipping-grid > div {
  min-width: 0;
  padding: 12px;
  border: 1px solid #d8e5df;
  border-radius: 8px;
  background: #fff;
}

.history-product-image {
  display: grid;
  place-items: center;
  width: 92px;
  min-height: 92px;
  padding: 0;
  overflow: hidden;
  border: 1px solid #d8e5df;
  border-radius: 8px;
  background: #fff;
  color: #6b7874;
  font-size: 12px;
  font-weight: 900;
}

.history-product-image img {
  width: 100%;
  height: 92px;
  object-fit: cover;
}

.history-product-image.empty {
  background: #f4f8f6;
}

.history-product-strip span,
.history-detail-summary span,
.history-shipping-grid span {
  display: block;
  color: #5f6f69;
  font-size: 12px;
  font-weight: 900;
}

.history-product-strip strong,
.history-detail-summary strong,
.history-shipping-grid strong {
  display: block;
  min-width: 0;
  margin-top: 5px;
  overflow-wrap: anywhere;
  color: #12211d;
  font-size: 15px;
  line-height: 1.35;
}

.history-product-strip strong {
  font-size: 18px;
}

.history-detail-section {
  padding: 14px;
  border: 1px solid #d8e5df;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.95);
}

.history-detail-section h3 {
  margin: 0 0 12px;
  color: #10211d;
  font-size: 17px;
}

.history-muted {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
}

.history-competitor-list {
  display: grid;
  gap: 10px;
}

.history-competitor-card {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
  padding: 12px;
  border: 1px solid #e0e9e5;
  border-radius: 8px;
  background: #fbfdfc;
}

.history-competitor-media {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.history-competitor-media button,
.history-competitor-media span {
  display: grid;
  place-items: center;
  width: 100%;
  min-height: 112px;
  padding: 0;
  overflow: hidden;
  border: 1px solid #d8e5df;
  border-radius: 8px;
  background: #f4f8f6;
  color: #6b7874;
  font-size: 12px;
  font-weight: 900;
}

.history-competitor-media button:hover,
.history-competitor-media button:focus-visible {
  border-color: rgba(13, 124, 102, 0.5);
  box-shadow: 0 0 0 3px rgba(13, 124, 102, 0.1);
}

.history-competitor-media img {
  width: 100%;
  height: 112px;
  object-fit: cover;
}

.history-competitor-card > div:last-child {
  min-width: 0;
}

.history-competitor-card > div:last-child > strong {
  display: block;
  overflow-wrap: anywhere;
  color: #10211d;
  font-size: 17px;
}

.history-competitor-card p {
  margin: 7px 0 0;
  color: #52615c;
  font-size: 14px;
  line-height: 1.55;
}

.history-competitor-category,
.history-competitor-title {
  overflow-wrap: anywhere;
}

.history-competitor-category {
  color: var(--green-dark) !important;
  font-weight: 900;
}

.history-competitor-title {
  color: #65746f !important;
  font-size: 13px !important;
}

.history-channel-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 10px;
}

.history-channel-tags span {
  padding: 5px 8px;
  border: 1px solid #dbe6e1;
  border-radius: 6px;
  background: #fff;
  color: #60706b;
  font-size: 12px;
  font-weight: 900;
}

.history-channel-tags span.active {
  border-color: #b9d9ce;
  background: #eaf6f2;
  color: var(--green-dark);
}

.history-analysis-box {
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid #c5ded5;
  border-radius: 8px;
  background: #eef8f4;
}

.history-analysis-hero {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px 12px;
}

.history-analysis-hero span {
  color: var(--green-dark);
  font-size: 13px;
  font-weight: 900;
}

.history-analysis-hero strong {
  color: #071b16;
  font-size: 28px;
  line-height: 1.08;
}

.history-analysis-summary {
  margin: 0;
  color: #20312c;
  font-size: 16px;
  line-height: 1.7;
}

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

.history-analysis-columns > div,
.history-next-actions {
  display: grid;
  gap: 8px;
  align-content: start;
  padding: 12px;
  border: 1px solid #cfe1db;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.8);
}

.history-analysis-columns > div.risk {
  border-color: #f1c7a8;
  background: #fff7ed;
}

.history-analysis-columns span,
.history-next-actions span {
  color: var(--green-dark);
  font-size: 14px;
  font-weight: 900;
}

.history-analysis-columns .risk span {
  color: #8a4b07;
}

.history-analysis-columns p,
.history-next-actions p {
  margin: 0;
  color: #243730;
  font-size: 15px;
  line-height: 1.65;
}

.row-actions {
  display: inline-flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 3px;
  padding: 3px;
  border: 1px solid #d5e0dc;
  border-radius: 7px;
  background: #f3f7f5;
  white-space: nowrap;
}

.row-actions button {
  min-height: 31px;
  padding-inline: 11px;
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: #42534d;
  font-size: 13px;
  font-weight: 900;
}

.row-actions button:hover,
.row-actions button:focus-visible {
  background: #fff;
  color: var(--green-dark);
  box-shadow: 0 1px 4px rgba(22, 33, 31, 0.1);
}

.row-actions .row-action-purchase {
  background: #eaf2f8;
  color: #255f99;
}

.row-actions .row-action-edit {
  background: #e5f4ee;
  color: var(--green-dark);
}

.row-actions .row-action-purchase:hover,
.row-actions .row-action-purchase:focus-visible {
  background: #dcebf6;
  color: #184d7d;
}

.row-actions .row-action-edit:hover,
.row-actions .row-action-edit:focus-visible {
  background: #d8eee5;
  color: var(--green-dark);
}

.row-actions-cell {
  text-align: right;
  white-space: nowrap;
}

.row-actions button:disabled {
  cursor: default;
  opacity: 0.64;
}

.join-button {
  border-color: var(--green-dark);
  background: var(--green-dark);
  color: #fff;
}

.join-button:hover,
.join-button:focus-visible {
  background: #0b6a55;
}

.product-context-menu {
  position: fixed;
  z-index: 30;
  display: grid;
  min-width: 132px;
  overflow: hidden;
  border: 1px solid #cddbd6;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 18px 44px rgba(22, 33, 31, 0.18);
}

.product-context-menu[hidden] {
  display: none;
}

.product-context-menu button {
  justify-content: flex-start;
  min-height: 38px;
  padding: 0 14px;
  border: 0;
  border-radius: 0;
  background: #fff;
  color: var(--ink);
  font-size: 14px;
  font-weight: 800;
  text-align: left;
}

.product-context-menu button[hidden] {
  display: none;
}

.product-context-menu button + button {
  border-top: 1px solid #edf3f0;
}

.product-context-menu button:hover,
.product-context-menu button:focus-visible {
  background: #edf7f2;
  color: var(--green-dark);
}

.product-context-menu .danger-item {
  color: var(--red);
}

.product-context-menu .danger-item:hover,
.product-context-menu .danger-item:focus-visible {
  background: #fff1f0;
  color: var(--red);
}

.result-pane {
  position: sticky;
  top: 12px;
}

.kpi-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 1px;
  overflow: hidden;
}

.kpi {
  min-height: 92px;
  padding: 18px;
  background: #fff;
}

.kpi strong {
  display: block;
  margin-top: 8px;
  font-size: clamp(22px, 3vw, 34px);
  line-height: 1;
}

.comparison-kpi strong {
  font-size: clamp(21px, 2.4vw, 30px);
}

.kpi strong.negative,
.amount.negative {
  color: var(--red);
}

.kpi strong.positive,
.amount.positive {
  color: var(--green-dark);
}

.status-panel,
.metrics-panel,
.breakdown-panel,
.knowledge-panel {
  margin-top: 12px;
  padding: 16px;
}

.metrics-panel summary {
  margin: -16px -16px 14px;
  border-bottom: 1px solid var(--line);
}

.status-panel:empty {
  display: none;
}

.warning {
  margin: 0 0 8px;
  padding: 10px 12px;
  border-left: 4px solid var(--amber);
  background: #fff7ed;
  color: #693606;
  font-size: 13px;
}

.warning.critical {
  border-left-color: var(--red);
  background: #fff1f0;
  color: #7a271a;
}

.cbt-lookup-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  margin-top: 10px;
  padding: 14px;
  border: 1px solid #f2c9b8;
  border-radius: 8px;
  background: #fffaf7;
}

.cbt-lookup-card strong {
  display: block;
  color: #7a271a;
  font-size: 14px;
}

.cbt-lookup-card p {
  margin: 6px 0 0;
  color: #693606;
  font-size: 13px;
  line-height: 1.55;
}

.cbt-lookup-main {
  min-width: 0;
}

.lookup-copy-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-top: 10px;
}

.lookup-copy-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 4px 8px;
  align-items: center;
  min-width: 0;
  padding: 9px 10px;
  border: 1px solid #f0d4c7;
  border-radius: 8px;
  background: #fff;
}

.lookup-copy-item span {
  color: #8a4b1b;
  font-size: 12px;
  font-weight: 800;
}

.lookup-copy-item strong {
  min-width: 0;
  color: var(--ink);
  font-size: 18px;
  line-height: 1.1;
  word-break: break-word;
}

.lookup-copy-item small {
  color: var(--muted);
  font-size: 11px;
}

.mini-copy-button {
  grid-row: span 2;
  align-self: center;
  min-height: 30px;
  padding: 0 10px;
  border: 1px solid #bfd7ca;
  border-radius: 6px;
  background: #eef7f2;
  color: var(--green-dark);
  font-size: 12px;
  font-weight: 900;
  cursor: pointer;
}

.mini-copy-button:hover,
.mini-copy-button:focus-visible,
.mini-copy-button.copied {
  border-color: var(--green);
  background: #dff0e7;
}

.cbt-lookup-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  white-space: nowrap;
}

.lookup-rate-input {
  display: grid;
  gap: 6px;
  width: 180px;
  color: #7a271a;
  font-size: 12px;
  font-weight: 900;
}

.lookup-rate-input input {
  width: 100%;
  height: 40px;
  padding: 0 10px;
  border: 1px solid #f0c7b5;
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
  font-size: 18px;
  font-weight: 900;
  outline: none;
}

.lookup-rate-input input:focus {
  border-color: var(--green);
  box-shadow: 0 0 0 3px rgba(0, 117, 93, 0.12);
}

.lookup-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  padding: 0 13px;
  border: 1px solid var(--green);
  border-radius: 6px;
  background: var(--green);
  color: #fff;
  font-size: 13px;
  font-weight: 900;
  text-decoration: none;
}

.lookup-button:hover,
.lookup-button:focus-visible,
.lookup-button.copied {
  background: var(--green-dark);
}

.lookup-button.secondary {
  border-color: #bfd7ca;
  background: #eef7f2;
  color: var(--green-dark);
}

.lookup-button.secondary:hover,
.lookup-button.secondary:focus-visible,
.lookup-button.secondary.copied {
  border-color: var(--green);
  background: #dff0e7;
}

.source-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  padding: 0 6px;
  border: 0;
  background: transparent;
  font-size: 13px;
  cursor: pointer;
}

.source-link.copied {
  color: var(--green);
  text-decoration: none;
}

.lookup-note {
  font-weight: 800;
}

dl {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 16px;
  margin: 0;
}

dt {
  color: var(--muted);
  font-size: 12px;
}

dd {
  margin: 4px 0 0;
  font-weight: 800;
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.detail-table {
  margin-top: 14px;
}

th,
td {
  padding: 10px 8px;
  border-top: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}

thead th {
  border-top: 0;
  color: var(--muted);
  font-size: 12px;
}

td:nth-child(2),
th:nth-child(2) {
  width: 96px;
  text-align: right;
  white-space: nowrap;
}

.breakdown-panel td:nth-child(3),
.breakdown-panel th:nth-child(3) {
  width: 76px;
  text-align: right;
  white-space: nowrap;
}

.share-cell {
  color: #52625d;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.group-row td {
  padding-top: 14px;
  color: var(--blue);
  font-weight: 900;
  background: #f8faf9;
}

.knowledge-panel ul {
  margin: 0;
  padding-left: 18px;
  color: var(--muted);
  font-size: 13px;
}

.knowledge-panel li + li {
  margin-top: 8px;
}

@media (max-width: 1120px) {
  .layout {
    grid-template-columns: 1fr;
  }

  .result-pane {
    position: static;
  }
}

@media (max-width: 760px) {
  .app-header {
    display: block;
  }

  .header-note {
    margin-top: 18px;
  }

  .header-actions {
    margin-top: 16px;
  }

  .grid.two,
  .grid.three,
  .quote-grid,
  .cbt-lookup-card,
  .lookup-copy-grid,
  .kpi-strip,
  dl {
    grid-template-columns: 1fr;
  }

  .quote-grid label:nth-child(1),
  .quote-grid label:nth-child(2) {
    grid-column: auto;
  }

  .cbt-lookup-actions {
    align-items: stretch;
    flex-direction: column;
    white-space: normal;
  }

  .lookup-rate-input {
    width: 100%;
  }

  .product-thumb {
    width: 58px;
  }

  .library-topline,
  .library-actions {
    align-items: flex-start;
    flex-direction: column;
  }

  .layout {
    padding-inline: 12px;
  }

  .library-view {
    padding-inline: 12px;
  }
}

.stock-page {
  min-height: 100vh;
}

.stock-header {
  align-items: center;
}

.stock-main {
  display: grid;
  gap: 18px;
  padding: 20px clamp(12px, 3vw, 36px) 36px;
}

.stock-summary {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(260px, 0.65fr);
  gap: 10px;
}

.stock-kpi {
  position: relative;
  min-height: 92px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: var(--shadow);
}

.stock-kpi span,
.stock-profit-chip span,
.shipping-timeline span,
.arrival-box span {
  display: block;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.stock-kpi strong {
  display: block;
  margin-top: 6px;
  font-size: 34px;
  line-height: 1;
}

.stock-kpi.attention strong {
  color: var(--red);
}

.stock-plan-kpi {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px 18px;
  align-items: center;
}

.stock-plan-kpi > span {
  grid-column: 1 / -1;
}

.stock-plan-kpi > strong {
  margin-top: 0;
}

.stock-plan-filter {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  min-width: 0;
}

.stock-plan-window {
  display: grid;
  grid-template-columns: auto minmax(126px, 160px);
  align-items: center;
  gap: 8px;
  padding: 6px 8px 6px 10px;
  border: 1px solid #dce7e2;
  border-radius: 8px;
  background: #f8fbfa;
}

.stock-plan-window span {
  color: #51615c;
  font-size: 12px;
  font-weight: 900;
  white-space: nowrap;
}

.stock-plan-window select {
  min-height: 34px;
  margin-top: 0;
  border-color: transparent;
  background: #fff;
  font-size: 13px;
  font-weight: 900;
}

.stock-range-label {
  padding: 8px 10px;
  border: 1px solid #dce7e2;
  border-radius: 8px;
  background: #fff;
  color: #263732;
  font-size: 14px;
  font-weight: 900;
  white-space: nowrap;
}

.stock-plan-filter button {
  min-height: 34px;
}

.stock-custom-range {
  position: relative;
  grid-column: 1 / -1;
  width: min(360px, 100%);
}

.stock-custom-range[hidden] {
  display: none;
}

.stock-range-picker {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 3px 12px;
  width: 100%;
  min-height: 58px;
  padding: 10px 12px;
  border-color: #cfe1db;
  background: #fff;
  color: var(--ink);
  text-align: left;
}

.stock-range-picker span {
  color: #51615c;
  font-size: 12px;
  font-weight: 900;
}

.stock-range-picker strong {
  grid-column: 1;
  margin: 0;
  color: #10211d;
  font-size: 16px;
  line-height: 1.2;
}

.stock-range-picker small {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: center;
  color: var(--green-dark);
  font-size: 12px;
  font-weight: 900;
  white-space: nowrap;
}

.stock-calendar-panel {
  position: absolute;
  z-index: 12;
  top: calc(100% + 8px);
  left: 0;
  width: min(340px, calc(100vw - 32px));
  padding: 12px;
  border: 1px solid #cfe1db;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 18px 46px rgba(22, 33, 31, 0.16);
}

.stock-calendar-panel[hidden] {
  display: none;
}

.stock-calendar-top {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) 34px;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.stock-calendar-top strong {
  color: #10211d;
  font-size: 15px;
  text-align: center;
}

.calendar-nav-button {
  min-height: 34px;
  padding: 0;
  border-color: #dce7e2;
  background: #f8fbfa;
  color: var(--green-dark);
  font-size: 22px;
  line-height: 1;
}

.stock-calendar-weekdays,
.stock-calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 4px;
}

.stock-calendar-weekdays {
  margin-bottom: 5px;
}

.stock-calendar-weekdays span {
  color: #687671;
  font-size: 12px;
  font-weight: 900;
  text-align: center;
}

.stock-calendar-day {
  min-height: 34px;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: #fff;
  color: #172722;
  font-size: 13px;
  font-weight: 900;
}

.stock-calendar-day:hover,
.stock-calendar-day:focus-visible {
  background: #eaf6f2;
  color: var(--green-dark);
}

.stock-calendar-day.muted {
  color: #a4afab;
}

.stock-calendar-day.in-range {
  background: #eef8f4;
  color: var(--green-dark);
}

.stock-calendar-day.selected {
  background: var(--green);
  color: #fff;
}

.stock-calendar-day.today {
  box-shadow: inset 0 0 0 2px rgba(13, 124, 102, 0.26);
}

.stock-calendar-actions {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  margin-top: 10px;
}

.stock-calendar-actions button {
  min-height: 30px;
  padding-inline: 10px;
  font-size: 12px;
}

.saved-plan-details {
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.97);
  box-shadow: var(--shadow);
}

.saved-plan-details[hidden] {
  display: none;
}

.saved-plan-list {
  display: grid;
  gap: 8px;
}

.saved-plan-empty {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
}

.saved-plan-item {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) minmax(140px, auto) minmax(120px, auto);
  gap: 12px;
  align-items: center;
  min-height: 64px;
  padding: 10px 12px;
  border-color: #d8e5df;
  background: #fff;
  color: var(--ink);
  text-align: left;
}

.saved-plan-item:hover,
.saved-plan-item:focus-visible {
  background: #f1faf6;
  color: var(--ink);
}

.saved-plan-item strong,
.saved-plan-item em,
.saved-plan-item small {
  display: block;
}

.saved-plan-item strong,
.saved-plan-item em {
  font-size: 14px;
  font-style: normal;
  font-weight: 900;
}

.saved-plan-item small {
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.stock-layout {
  display: grid;
  grid-template-columns: minmax(280px, 340px) minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}

.stock-product-panel,
.stock-card,
.stock-workbench-top {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.97);
  box-shadow: var(--shadow);
}

.stock-product-panel {
  position: sticky;
  top: 12px;
  overflow: hidden;
}

.stock-panel-top {
  display: grid;
  gap: 12px;
  padding: 16px;
  border-bottom: 1px solid var(--line);
  background: #fff;
}

.stock-panel-top h2,
.stock-section-top h2,
.stock-product-heading h2 {
  margin-bottom: 4px;
}

.stock-panel-top p,
.stock-section-top p,
.stock-product-heading p,
.shipping-note {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.55;
}

.stock-panel-top p.error,
.error-text {
  color: var(--red);
}

.stock-search span {
  display: block;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.stock-product-list {
  display: grid;
  max-height: calc(100vh - 270px);
  overflow: auto;
  padding: 8px;
  background: #f7fbf9;
}

.stock-product-item {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  width: 100%;
  min-height: 78px;
  padding: 8px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: var(--ink);
  text-align: left;
}

.stock-product-item:hover,
.stock-product-item.active {
  border-color: #cce0da;
  background: #fff;
  box-shadow: 0 6px 16px rgba(22, 33, 31, 0.08);
}

.stock-product-thumb,
.stock-main-image,
.competitor-image-slot {
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px dashed #b7c5c0;
  border-radius: 8px;
  background: #eef4f1;
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
}

.stock-product-thumb {
  width: 58px;
  aspect-ratio: 1 / 1;
}

.stock-product-thumb img,
.stock-main-image img,
.competitor-image-slot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.stock-product-copy {
  display: grid;
  min-width: 0;
  gap: 4px;
}

.stock-product-copy strong,
.stock-product-copy small {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.stock-product-copy strong {
  font-size: 15px;
  font-weight: 900;
}

.stock-product-copy small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.stock-age-badge {
  width: max-content;
  max-width: 100%;
  padding: 3px 7px;
  border-radius: 5px;
  background: #edf3f0;
  color: #52625d;
  font-size: 12px;
  font-weight: 900;
  line-height: 1.25;
}

.stock-age-badge.danger {
  background: #fff1f0;
  color: var(--red);
}

.stock-workbench {
  display: grid;
  gap: 14px;
  min-width: 0;
}

.stock-workbench-top {
  display: grid;
  grid-template-columns: 132px minmax(0, 1fr);
  gap: 16px;
  padding: 16px;
}

.stock-main-image {
  width: 132px;
  aspect-ratio: 1 / 1;
  padding: 0;
  border-style: solid;
  cursor: pointer;
}

.stock-main-image.empty {
  cursor: default;
}

.stock-product-heading {
  display: grid;
  gap: 14px;
  min-width: 0;
}

.stock-heading-line {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.stock-heading-line h2 {
  font-size: 24px;
}

.stock-profit-chip {
  min-width: 230px;
  padding: 10px 12px;
  border: 1px solid #d8e5df;
  border-radius: 8px;
  background: #f8fbfa;
}

.stock-profit-chip strong {
  display: block;
  margin-top: 4px;
  font-size: 16px;
  white-space: nowrap;
}

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

.positioning-control button {
  display: grid;
  min-height: 56px;
  gap: 2px;
  padding: 8px 10px;
  border-color: #cddbd6;
  background: #fff;
  color: #31413d;
  text-align: left;
}

.positioning-control button.active {
  border-color: var(--green);
  background: #e8f6f0;
  color: var(--green-dark);
  box-shadow: inset 3px 0 0 var(--green);
}

.positioning-control strong,
.positioning-control span {
  display: block;
}

.positioning-control span {
  color: var(--muted);
  font-size: 12px;
}

.stock-card {
  min-width: 0;
  padding: 16px;
}

.stock-section-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
}

.stock-action-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.shipping-actions {
  flex: none;
  align-items: center;
}

.shipping-actions .goodcang-create-button {
  border-color: #236b92;
  background: #236b92;
  color: #fff;
}

.shipping-actions .goodcang-create-button:hover,
.shipping-actions .goodcang-create-button:focus-visible {
  border-color: #174f6e;
  background: #174f6e;
}

.shipping-actions .goodcang-product-create-button {
  border-color: #9b6d2c;
  background: #fffaf1;
  color: #704c1c;
}

.shipping-actions .goodcang-product-create-button:hover,
.shipping-actions .goodcang-product-create-button:focus-visible {
  border-color: #7d5319;
  background: #fff1d8;
  color: #5e3c0c;
}

.shipping-actions > button[data-action="save-history"] {
  border-color: var(--green);
  background: var(--green);
  color: #fff;
}

.competitor-table-wrap {
  max-width: 100%;
  overflow-x: auto;
  border: 1px solid #dce7e2;
  border-radius: 8px;
  background: #fff;
}

.competitor-table {
  min-width: 1210px;
  table-layout: fixed;
}

.competitor-table th:nth-child(1),
.competitor-table td:nth-child(1),
.competitor-table th:nth-child(2),
.competitor-table td:nth-child(2) {
  width: 90px;
  text-align: center;
}

.competitor-table th:nth-child(3),
.competitor-table td:nth-child(3) {
  width: 210px;
}

.competitor-table th:nth-child(4),
.competitor-table td:nth-child(4),
.competitor-table th:nth-child(5),
.competitor-table td:nth-child(5) {
  width: 110px;
}

.competitor-table th:nth-child(6),
.competitor-table td:nth-child(6) {
  width: 250px;
}

.competitor-table th:nth-child(7),
.competitor-table td:nth-child(7) {
  width: 150px;
}

.competitor-table th:nth-child(8),
.competitor-table td:nth-child(8) {
  width: 150px;
  text-align: right;
}

.competitor-table input {
  margin-top: 0;
}

.competitor-table small {
  display: block;
  min-height: 18px;
  margin-top: 4px;
  color: var(--green-dark);
  font-size: 12px;
  font-weight: 800;
}

.competitor-image-slot {
  width: 64px;
  aspect-ratio: 1 / 1;
  min-height: 0;
  margin: 0 auto;
  padding: 0;
  border-color: #c7d5d0;
  background: #f3f8f6;
  color: #60716b;
}

.competitor-image-slot:has(img) {
  position: relative;
}

.competitor-image-slot:has(img)::after {
  content: "右键删";
  position: absolute;
  right: 2px;
  bottom: 2px;
  padding: 2px 4px;
  border-radius: 4px;
  background: rgba(7, 88, 70, 0.9);
  color: #fff;
  font-size: 10px;
  font-weight: 900;
  opacity: 0;
  pointer-events: none;
}

.competitor-image-slot:has(img):hover::after {
  opacity: 1;
}

.competitor-image-slot.active {
  border: 2px solid var(--green);
  background: #e2f5ed;
}

.kalodata-slot {
  background: #eef6fb;
}

.image-cell-tools {
  display: grid;
  justify-items: center;
  gap: 5px;
}

.mini-upload-button {
  min-height: 24px;
  padding: 0 7px;
  border-color: #d8e5df;
  background: #fff;
  color: var(--green-dark);
  font-size: 11px;
  font-weight: 900;
}

.competitor-category-path,
.competitor-product-title {
  display: block;
  margin-top: 5px;
  max-width: 220px;
  overflow: hidden;
  color: #52645e;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.45;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.competitor-category-path {
  color: var(--green-dark);
}

.channel-checks {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.channel-checks label {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 30px;
  padding: 0 8px;
  border: 1px solid #d8e5df;
  border-radius: 6px;
  background: #f8fbfa;
  color: #31413d;
  font-size: 13px;
  font-weight: 800;
}

.channel-checks span {
  color: #0f766e;
  font-size: 12px;
}

.competitor-actions {
  white-space: nowrap;
}

.competitor-actions button {
  min-height: 32px;
  padding-inline: 8px;
}

.shipping-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.goodcang-draft-strip {
  display: grid;
  grid-template-columns: minmax(150px, 0.65fr) minmax(0, 4fr);
  gap: 16px;
  margin-top: 16px;
  padding: 14px 0;
  border-top: 1px solid #cbdce5;
  border-bottom: 1px solid #cbdce5;
  background: #f4f8fa;
}

.goodcang-draft-heading {
  display: grid;
  align-content: center;
  gap: 5px;
  padding-left: 14px;
  border-left: 3px solid #236b92;
}

.goodcang-draft-heading span,
.goodcang-draft-facts span {
  color: #58707c;
  font-size: 11px;
  font-weight: 900;
}

.goodcang-draft-heading strong {
  overflow-wrap: anywhere;
  color: #173344;
  font-size: 14px;
  line-height: 1.4;
}

.goodcang-draft-facts {
  display: grid;
  grid-template-columns: 0.7fr 1.1fr 1.35fr 0.85fr 0.75fr;
  gap: 8px;
}

.goodcang-draft-facts > div {
  min-width: 0;
  padding: 2px 10px;
  border-left: 1px solid #d6e3e9;
}

.goodcang-draft-facts strong,
.goodcang-draft-facts small {
  display: block;
  min-width: 0;
  margin-top: 4px;
  overflow-wrap: anywhere;
}

.goodcang-draft-facts strong {
  color: #1b302b;
  font-size: 14px;
  line-height: 1.35;
}

.goodcang-draft-facts small {
  color: #6b7b75;
  font-size: 11px;
  font-weight: 700;
}

.goodcang-draft-facts > div:last-child strong {
  white-space: nowrap;
}

.ai-analysis,
.arrival-box {
  min-height: 142px;
  padding: 16px;
  border: 1px solid #d8e5df;
  border-radius: 8px;
  background: #f8fbfa;
}

.ai-analysis span,
.arrival-box span {
  color: #43534e;
  font-size: 13px;
  font-weight: 900;
}

.ai-analysis strong,
.arrival-box strong {
  display: block;
  margin-top: 6px;
  font-size: 22px;
  line-height: 1.15;
}

.ai-analysis p,
.arrival-box p {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.7;
}

.ai-analysis {
  display: grid;
  gap: 16px;
  padding: 18px;
  border-color: #c5ded5;
  background: #f2faf6;
}

.ai-analysis.empty {
  border-color: #d8e5df;
  background: #fbfdfc;
}

.analysis-empty-state {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 116px;
  padding: 18px;
  border: 1px solid #d9e7e1;
  border-radius: 8px;
  background:
    linear-gradient(90deg, rgba(13, 124, 102, 0.06) 0 1px, transparent 1px 100%),
    #fff;
  background-size: 32px 32px;
}

.analysis-empty-state > div {
  display: grid;
  gap: 7px;
}

.analysis-empty-state span {
  color: var(--green-dark);
  font-size: 13px;
  font-weight: 900;
}

.analysis-empty-state strong {
  margin: 0;
  color: #152621;
  font-size: clamp(22px, 2vw, 30px);
  line-height: 1.18;
}

.analysis-empty-state p {
  max-width: 620px;
  margin: 0;
  color: #5e6d68;
  font-size: 15px;
  line-height: 1.75;
}

.analysis-empty-state em {
  flex: none;
  padding: 8px 11px;
  border: 1px solid #cfe1db;
  border-radius: 6px;
  background: #eef8f4;
  color: var(--green-dark);
  font-size: 13px;
  font-style: normal;
  font-weight: 900;
}

.analysis-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px 18px;
  padding: 14px 16px;
  border: 1px solid #c8ded5;
  border-radius: 8px;
  background: #fff;
}

.analysis-hero > div {
  display: grid;
  gap: 5px;
}

.analysis-hero strong {
  margin-top: 0;
  color: #071b16;
  font-size: clamp(30px, 3vw, 42px);
  line-height: 1.05;
}

.ai-analysis .analysis-summary {
  margin: 0;
  max-width: 980px;
  color: #20312c;
  font-size: 17px;
  line-height: 1.9;
}

.category-recommendation {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px 14px;
  align-items: start;
  padding: 14px;
  border: 1px solid #cfe1db;
  border-radius: 8px;
  background: #fff;
}

.category-recommendation.empty {
  align-items: center;
  background: #fbfdfc;
}

.category-recommendation-main {
  min-width: 0;
}

.category-recommendation span {
  display: block;
  color: var(--green-dark);
  font-size: 13px;
  font-weight: 900;
}

.category-recommendation strong {
  margin-top: 5px;
  color: #10211d;
  font-size: 20px;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.category-recommendation p {
  margin: 7px 0 0;
  color: #52645e;
  font-size: 14px;
  line-height: 1.65;
}

.category-recommendation button {
  justify-self: end;
  min-height: 34px;
  padding-inline: 10px;
}

.category-refresh-button {
  grid-column: 2;
  grid-row: 1;
  align-self: start;
}

.category-alternatives {
  grid-column: 1 / -1;
  margin-top: 2px;
  color: #52645e;
  font-size: 13px;
  line-height: 1.55;
}

.analysis-calculation {
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid #cfe1db;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.86);
}

.analysis-calculation > span {
  color: var(--green-dark);
  font-size: 15px;
}

.analysis-calculation > div {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 10px;
}

.analysis-calculation p {
  min-height: 76px;
  margin: 0;
  padding: 12px;
  border: 1px solid #dce9e4;
  border-radius: 7px;
  background: #fff;
}

.analysis-calculation b,
.analysis-calculation strong {
  display: block;
}

.analysis-calculation b {
  margin-bottom: 7px;
  color: #61716c;
  font-size: 13px;
}

.analysis-calculation strong {
  color: #14241f;
  font-size: 15px;
  line-height: 1.65;
}

.analysis-sections {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.analysis-section {
  display: grid;
  gap: 12px;
  align-content: start;
  padding: 16px;
  border: 1px solid #cfe1db;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.9);
}

.analysis-section.risk {
  border-color: #f1c7a8;
  background: #fff7ed;
}

.analysis-section span {
  color: var(--green-dark);
  font-size: 16px;
  font-weight: 900;
}

.analysis-section.risk span {
  color: #8a4b07;
}

.analysis-section p {
  position: relative;
  margin: 0;
  padding-left: 14px;
  color: #243730;
  font-size: 16px;
  line-height: 1.9;
}

.analysis-section p::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.82em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #8db8aa;
}

.analysis-section.risk p::before {
  background: #d38a45;
}

.ai-analysis > button {
  width: max-content;
  min-height: 40px;
  font-size: 14px;
}

.arrival-box.arrived {
  border-color: #f0a59c;
  background: #fff1f0;
}

.arrival-box.arrived strong {
  color: var(--red);
}

.arrival-box.muted {
  opacity: 0.72;
}

.shipping-grid label {
  font-size: 13px;
  font-weight: 800;
}

.latest-tracking {
  display: grid;
  gap: 6px;
  margin-top: -2px;
  padding: 13px 15px;
  border: 1px solid #d6e5df;
  border-radius: 7px;
  background: #f7fbf9;
}

.history-tracking-query-button {
  border-color: #76b7a4;
  color: #075846;
  white-space: nowrap;
}

.history-tracking-query-button:hover,
.history-tracking-query-button:focus-visible {
  border-color: #0d7c66;
  background: #e7f5ef;
}

.latest-tracking-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.latest-tracking-list {
  display: grid;
  gap: 0;
}

.latest-tracking-item {
  display: grid;
  gap: 3px;
  padding: 10px 0;
  border-top: 1px solid #dce8e3;
}

.latest-tracking-item:first-child {
  padding-top: 5px;
  border-top: 0;
}

.latest-tracking-item:last-child {
  padding-bottom: 2px;
}

.latest-tracking-item.newest strong {
  color: #0a5f4e;
}

.latest-tracking span,
.latest-tracking small {
  color: #60716b;
  font-size: 12px;
  font-weight: 800;
}

.latest-tracking-item strong {
  color: #152621;
  font-size: 15px;
  line-height: 1.55;
}

.latest-tracking em {
  padding: 3px 7px;
  border-radius: 5px;
  background: #e5f4ee;
  color: #0b6b58;
  font-size: 12px;
  font-style: normal;
  font-weight: 900;
}

.latest-tracking.empty {
  border-color: #d8e3de;
  background: #fafcfb;
}

.latest-tracking.empty strong {
  color: #6a7974;
}

.latest-tracking.error {
  border-color: #efc3bf;
  background: #fff7f6;
}

.latest-tracking.error strong {
  color: #9f261c;
}

.shipping-grid .arrival-box {
  grid-column: 1 / -1;
}

.shipping-timeline {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
  margin-top: 12px;
}

.shipping-timeline div {
  min-height: 74px;
  padding: 12px;
  border: 1px solid #d8e5df;
  border-radius: 8px;
  background: #fff;
}

.shipping-timeline strong {
  display: block;
  margin-top: 6px;
  font-size: 15px;
}

.shipping-note {
  margin-top: 10px;
}

.stock-history-list {
  display: grid;
  gap: 8px;
}

.stock-history-list > p {
  margin: 0;
  color: var(--muted);
}

.history-item {
  position: relative;
  display: block;
  width: 100%;
  border: 1px solid #dce7e2;
  border-radius: 8px;
  background: #fff;
}

.history-open-button {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 6px 18px;
  width: 100%;
  min-height: auto;
  padding: 14px 12px;
  border: 0;
  border-radius: inherit;
  background: transparent;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}

.history-item:hover,
.history-item:focus-within {
  border-color: rgba(13, 124, 102, 0.46);
  background: #f6fbf9;
  box-shadow: 0 0 0 3px rgba(13, 124, 102, 0.08);
}

.history-delete-button {
  position: absolute;
  right: 10px;
  bottom: 8px;
  display: none;
  min-height: 26px;
  padding: 3px 10px;
  border: 1px solid #d46a62;
  border-radius: 5px;
  background: #fff5f4;
  color: #b42318;
  font-size: 12px;
  font-weight: 900;
  cursor: pointer;
}

.history-item.delete-ready .history-delete-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.history-delete-button:hover,
.history-delete-button:focus-visible {
  border-color: #b42318;
  background: #b42318;
  color: #fff;
}

.history-item.delete-ready {
  border-color: rgba(180, 35, 24, 0.56);
  background: #fffafa;
  box-shadow: 0 0 0 3px rgba(180, 35, 24, 0.08);
}

.history-item-main {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.history-item strong {
  min-width: 0;
  overflow: hidden;
  color: var(--ink);
  font-size: 16px;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.history-item em {
  flex: none;
  color: var(--ink);
  font-size: 16px;
  font-style: normal;
  font-weight: 900;
}

.history-carton-badge {
  flex: none;
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 2px 8px;
  border: 1px solid #d6e5df;
  border-radius: 5px;
  background: #f3f8f6;
  color: #42554f;
  font-size: 14px;
  font-weight: 900;
  line-height: 1.2;
}

.history-item-sub {
  grid-column: 1;
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
  line-height: 1.35;
}

.history-item time {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: center;
  color: var(--muted);
  font-size: 14px;
  font-weight: 900;
  white-space: nowrap;
}

.stock-empty {
  display: grid;
  place-items: center;
  min-height: 320px;
  padding: 28px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.95);
  color: var(--muted);
  text-align: center;
  box-shadow: var(--shadow);
}

.stock-empty.compact {
  min-height: 160px;
  border: 0;
  box-shadow: none;
}

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

.stock-empty p {
  max-width: 360px;
  margin: 8px 0 0;
  line-height: 1.6;
}

@media (max-width: 1180px) {
  .stock-layout {
    grid-template-columns: 1fr;
  }

  .stock-product-panel {
    position: static;
  }

  .stock-product-list {
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    max-height: none;
  }

  .history-detail-summary,
  .history-shipping-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .goodcang-draft-facts {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .goodcang-history-bar {
    flex-direction: column;
  }
}

@media (max-width: 860px) {
  .stock-product-list {
    grid-template-columns: 1fr;
    max-height: 340px;
    overflow: auto;
  }

  .stock-summary,
  .analysis-sections,
  .shipping-grid,
  .shipping-timeline,
  .positioning-control,
  .history-product-strip,
  .history-detail-summary,
  .history-shipping-grid,
  .history-analysis-columns {
    grid-template-columns: 1fr;
  }

  .stock-workbench-top {
    grid-template-columns: 1fr;
  }

  .stock-heading-line,
  .stock-section-top {
    align-items: stretch;
    flex-direction: column;
  }

  .shipping-actions,
  .shipping-actions > button {
    width: 100%;
  }

  .goodcang-draft-strip,
  .goodcang-draft-facts,
  .goodcang-history-values,
  .goodcang-history-edit-grid {
    grid-template-columns: 1fr;
  }

  .goodcang-draft-facts > div {
    padding: 8px 14px;
    border-top: 1px solid #d6e3e9;
    border-left: 0;
  }

  .goodcang-history-edit-grid .history-detail-edit-controls {
    justify-content: flex-start;
  }

  .history-item {
    grid-template-columns: 1fr;
  }

  .history-item-main {
    align-items: flex-start;
    flex-direction: column;
    gap: 4px;
  }

  .history-item strong {
    white-space: normal;
  }

  .history-item time {
    grid-column: 1;
    grid-row: auto;
    align-self: start;
  }

  .stock-main-image {
    width: min(180px, 100%);
  }

  .stock-plan-kpi,
  .stock-plan-window,
  .stock-custom-range label,
  .saved-plan-item {
    grid-template-columns: 1fr;
  }

  .stock-plan-filter {
    align-items: stretch;
    flex-direction: column;
  }

  .stock-range-label {
    white-space: normal;
  }

  .analysis-hero {
    align-items: stretch;
    flex-direction: column;
  }

  .analysis-empty-state {
    align-items: flex-start;
    flex-direction: column;
  }

  .analysis-calculation > div {
    grid-template-columns: 1fr;
  }

  .history-detail-dialog {
    padding: 10px;
  }

  .history-detail-top {
    align-items: stretch;
    flex-direction: column;
  }

  .history-detail-edit-bar,
  .history-detail-edit-controls {
    align-items: stretch;
    flex-direction: column;
  }

  .history-detail-edit-controls input {
    width: 100%;
  }

  .history-detail-top strong {
    white-space: normal;
  }

  .history-detail-body {
    padding: 10px;
  }

  .history-product-image {
    width: 120px;
    min-height: 120px;
  }

  .history-product-image img {
    height: 120px;
  }

  .history-competitor-card {
    grid-template-columns: 1fr;
  }
}

/* Goodcang product builder */
.goodcang-product-dialog {
  position: fixed;
  inset: 0;
  z-index: 43;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(8, 20, 17, 0.68);
}

.goodcang-product-dialog[hidden] {
  display: none;
}

.goodcang-product-panel {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  width: min(900px, 100%);
  max-height: 94vh;
  overflow: hidden;
  border: 1px solid #d7ded9;
  border-radius: 12px;
  background: #f5f8f6;
  box-shadow: 0 26px 80px rgba(0, 0, 0, 0.3);
}

.goodcang-product-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  padding: 18px 22px 16px;
  border-bottom: 1px solid #dce5df;
  background: #fff;
}

.goodcang-product-title-block {
  min-width: 0;
}

.goodcang-product-title-block > span {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  margin-bottom: 4px;
  padding: 0 7px;
  border-radius: 4px;
  background: #fff2dd;
  color: #8a5b19;
  font-size: 11px;
  font-weight: 900;
}

.goodcang-product-title-block h2 {
  margin: 0;
  color: #14231f;
  font-size: 24px;
  line-height: 1.25;
}

.goodcang-product-title-block p {
  margin: 5px 0 0;
  color: #60716b;
  font-size: 13px;
  line-height: 1.5;
}

.goodcang-product-close {
  position: relative;
  flex: 0 0 38px;
  width: 38px;
  min-height: 38px;
  padding: 0;
  border-color: #d2dfe4;
  background: #fff;
  color: #53636b;
  font-size: 25px;
  font-weight: 500;
  line-height: 1;
}

.goodcang-product-close:hover,
.goodcang-product-close:focus-visible {
  border-color: #b7c7c0;
  background: #f2f8f5;
  color: var(--green-dark);
}

.goodcang-product-body {
  min-height: 0;
  overflow: auto;
  padding: 16px;
}

.goodcang-product-form {
  display: grid;
  gap: 14px;
}

.goodcang-product-section.goodcang-product-default-section,
.goodcang-product-entry-section .goodcang-product-field.readonly,
.goodcang-product-check-section .goodcang-product-field.readonly {
  display: none;
}

.goodcang-product-entry-section .goodcang-product-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.goodcang-product-check-section .goodcang-product-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.goodcang-product-check-section .goodcang-product-field.readonly:nth-child(-n + 4) {
  display: grid;
  min-height: 74px;
  align-content: center;
  text-align: center;
}

.goodcang-product-check-section .goodcang-product-field.readonly:nth-child(-n + 4) > span {
  justify-content: center;
}

.goodcang-product-check-section .goodcang-product-field.readonly:nth-child(-n + 4) strong {
  font-size: 18px;
}

.goodcang-product-check-section .goodcang-product-field.required {
  grid-column: 1 / 3;
}

.goodcang-product-section {
  display: grid;
  gap: 12px;
  min-width: 0;
  padding: 16px;
  border: 1px solid #d8e4df;
  border-radius: 9px;
  background: #fff;
}

.goodcang-product-section-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

.goodcang-product-section-head > div:first-child {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  min-width: 0;
}

.goodcang-product-section-head h3 {
  margin: 0;
  color: #14231f;
  font-size: 16px;
  line-height: 1.3;
}

.goodcang-product-section-head p {
  margin: 4px 0 0;
  color: #687873;
  font-size: 12px;
  line-height: 1.5;
}

.goodcang-product-step {
  display: inline-grid;
  flex: 0 0 30px;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 6px;
  background: #fff2dd;
  color: #8a5b19;
  font-size: 11px;
  font-weight: 900;
}

.goodcang-product-readonly-tag {
  flex: 0 0 auto;
  padding: 6px 9px;
  border: 1px solid #dbe7e2;
  border-radius: 6px;
  background: #f8fbfa;
  color: #52625d;
  font-size: 11px;
  font-weight: 900;
  white-space: nowrap;
}

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

.goodcang-product-field {
  display: grid;
  align-content: start;
  gap: 5px;
  min-width: 0;
  min-height: 68px;
  padding: 10px 11px;
  border: 1px solid #c7dad0;
  border-radius: 7px;
  background: #fbfdfc;
}

.goodcang-product-field.required {
  border-color: #a9cbbd;
  background: #f7fcf9;
}

.goodcang-product-field.full {
  grid-column: 1 / -1;
}

.goodcang-product-field > span {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  color: #53645e;
  font-size: 11px;
  font-weight: 900;
  line-height: 1.35;
}

.goodcang-product-field > span em {
  color: #a1661e;
  font-size: 10px;
  font-style: normal;
  font-weight: 800;
  text-align: right;
}

.goodcang-product-field strong {
  overflow-wrap: anywhere;
  color: #173d31;
  font-size: 14px;
  line-height: 1.35;
}

.goodcang-product-field small {
  color: #71817b;
  font-size: 10px;
  line-height: 1.35;
}

.goodcang-product-field.readonly {
  border-color: #d8e5df;
  background: #f8fbfa;
}

.goodcang-product-field.emphasis {
  border-color: #b7d4c7;
  background: #effaf4;
}

.goodcang-product-field input {
  width: 100%;
  min-width: 0;
  min-height: 32px;
  margin: 0;
  border-color: #b9d1c5;
  background: #fff;
  font-size: 13px;
}

.goodcang-product-field input:focus {
  border-color: var(--green);
  box-shadow: 0 0 0 3px rgba(47, 137, 101, 0.12);
}

.goodcang-product-input-action {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 6px;
  min-width: 0;
}

.goodcang-product-input-action button {
  min-height: 32px;
  padding-inline: 10px;
  border-color: #b9d7c8;
  background: #edf8f2;
  color: var(--green-dark);
  font-size: 11px;
  font-weight: 900;
  white-space: nowrap;
}

.goodcang-product-input-action button:hover,
.goodcang-product-input-action button:focus-visible {
  border-color: var(--green);
  background: #e0f2e9;
}

.goodcang-product-input-action button:disabled {
  cursor: wait;
  opacity: 0.62;
}

.goodcang-product-input-suffix {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 7px;
}

.goodcang-product-input-suffix > span {
  color: #65766f;
  font-size: 11px;
  font-weight: 900;
}

.goodcang-product-certificate {
  display: grid;
  gap: 4px;
  padding: 11px 13px;
  border: 1px solid #bdd9ca;
  border-radius: 7px;
  background: #effaf4;
}

.goodcang-product-certificate strong {
  color: var(--green-dark);
  font-size: 13px;
}

.goodcang-product-certificate span,
.goodcang-product-certificate small {
  color: #5e7168;
  font-size: 11px;
  line-height: 1.45;
}

.goodcang-product-certificate.error {
  border-color: #e5bcb6;
  background: #fff5f3;
}

.goodcang-product-certificate.error strong {
  color: var(--red);
}

.goodcang-product-result {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 12px 14px;
  border: 1px solid #b6d8c6;
  border-radius: 8px;
  background: #edf9f2;
}

.goodcang-product-result > div {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.goodcang-product-result strong {
  color: var(--green-dark);
  font-size: 14px;
}

.goodcang-product-result span {
  overflow-wrap: anywhere;
  color: #5f7269;
  font-size: 11px;
}

.goodcang-product-result a {
  flex: 0 0 auto;
  min-height: 34px;
  padding: 8px 12px;
  border: 1px solid var(--green);
  border-radius: 6px;
  background: var(--green);
  color: #fff;
  font-size: 12px;
  font-weight: 900;
  text-decoration: none;
}

.goodcang-product-result a:hover,
.goodcang-product-result a:focus-visible {
  border-color: var(--green-dark);
  background: var(--green-dark);
}

.goodcang-product-draft-list {
  display: grid;
  gap: 7px;
}

.goodcang-product-draft-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
  padding: 9px 11px;
  border: 1px solid #d9e6e0;
  border-radius: 7px;
  background: #fbfdfc;
}

.goodcang-product-draft-item > div {
  display: grid;
  min-width: 0;
  gap: 3px;
}

.goodcang-product-draft-item strong {
  overflow-wrap: anywhere;
  color: #173d31;
  font-size: 12px;
}

.goodcang-product-draft-item small {
  color: #71817b;
  font-size: 10px;
}

.goodcang-product-draft-item > span {
  flex: 0 0 auto;
  color: var(--green-dark);
  font-size: 11px;
  font-weight: 900;
}

.goodcang-product-draft-item.error > span {
  color: var(--red);
}

.goodcang-product-empty,
.goodcang-product-loading,
.goodcang-product-error {
  margin: 0;
  padding: 30px 14px;
  color: #687873;
  font-size: 13px;
  text-align: center;
}

.goodcang-product-error {
  color: var(--red);
  font-weight: 800;
}

.goodcang-product-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 13px 18px;
  border-top: 1px solid #dbe5e1;
  background: #fff;
}

.goodcang-product-footer-status {
  min-width: 0;
  color: #60716b;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.4;
}

.goodcang-product-footer-status.success {
  color: var(--green-dark);
}

.goodcang-product-footer-status.info {
  color: var(--blue);
}

.goodcang-product-footer-status.error {
  color: var(--red);
}

.goodcang-product-footer-actions {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 8px;
}

.goodcang-product-save {
  border-color: var(--green);
  background: var(--green);
  color: #fff;
}

.goodcang-product-save:hover,
.goodcang-product-save:focus-visible {
  border-color: var(--green-dark);
  background: var(--green-dark);
}

.goodcang-product-save:disabled {
  cursor: wait;
  opacity: 0.62;
}

@media (max-width: 980px) {
  .goodcang-product-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .goodcang-product-dialog {
    padding: 8px;
  }

  .goodcang-product-panel {
    max-height: 97vh;
    border-radius: 9px;
  }

  .goodcang-product-header,
  .goodcang-product-body,
  .goodcang-product-footer {
    padding-inline: 12px;
  }

  .goodcang-product-section {
    padding: 12px;
  }

  .goodcang-product-section-head,
  .goodcang-product-footer,
  .goodcang-product-result {
    align-items: stretch;
    flex-direction: column;
  }

  .goodcang-product-grid {
    grid-template-columns: 1fr;
  }

  .goodcang-product-field.full {
    grid-column: auto;
  }

  .goodcang-product-footer-actions,
  .goodcang-product-footer-actions > button,
  .goodcang-product-result a {
    width: 100%;
  }

  .goodcang-product-footer-actions {
    display: grid;
    grid-template-columns: 1fr 1.5fr;
  }
}

/* Stock tracking states and Goodcang inbound confirmation */
.saved-plan-item {
  grid-template-columns: minmax(220px, 1fr) minmax(180px, auto);
}

.history-tracking-badge {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  min-height: 24px;
  padding: 2px 8px;
  border-radius: 5px;
  font-size: 11px;
  font-weight: 900;
  white-space: nowrap;
}

.history-tracking-badge.signed {
  border: 1px solid #78b69f;
  background: #e4f5ed;
  color: #0c654b;
}

.history-tracking-badge.at-port {
  border: 1px solid #d7a058;
  background: #fff4df;
  color: #81470b;
}

.latest-tracking.signed {
  border-color: #9bcdb9;
  background: #eef9f4;
}

.latest-tracking.signed em {
  background: #d7f0e4;
  color: #0c654b;
}

.latest-tracking.at-port {
  border-color: #e0bd85;
  background: #fff9ee;
}

.latest-tracking.at-port em {
  background: #f9e5bf;
  color: #81470b;
}

.latest-tracking.at-port .latest-tracking-item.newest strong {
  color: #7c450e;
}

.goodcang-inbound-confirm-dialog {
  position: fixed;
  inset: 0;
  z-index: 44;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(8, 20, 17, 0.7);
}

.goodcang-inbound-confirm-dialog[hidden] {
  display: none;
}

.goodcang-inbound-confirm-panel {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto auto;
  width: min(620px, 100%);
  max-height: 92vh;
  overflow: hidden;
  border-radius: 8px;
  background: #f5f8f7;
  box-shadow: 0 18px 46px rgba(0, 0, 0, 0.32);
}

.goodcang-inbound-confirm-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  padding: 18px 20px 16px;
  border-bottom: 1px solid #d8e3de;
  background: #fff;
}

.goodcang-inbound-confirm-header > div {
  min-width: 0;
}

.goodcang-inbound-confirm-header span {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  margin-bottom: 5px;
  padding: 0 7px;
  border-radius: 4px;
  background: #eaf2f7;
  color: #245f7e;
  font-size: 11px;
  font-weight: 900;
}

.goodcang-inbound-confirm-header h2 {
  margin: 0;
  color: #10211d;
  font-size: 22px;
  line-height: 1.25;
}

.goodcang-inbound-confirm-header p {
  max-width: 58ch;
  margin: 5px 0 0;
  color: #53655f;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.55;
}

.goodcang-inbound-confirm-close {
  flex: 0 0 36px;
  width: 36px;
  min-height: 36px;
  padding: 0;
  border-color: #d6e0dc;
  background: #fff;
  color: #52635d;
  font-size: 24px;
  line-height: 1;
}

.goodcang-inbound-confirm-close:hover,
.goodcang-inbound-confirm-close:focus-visible {
  border-color: #9db5ac;
  background: #f1f6f4;
  color: #173d31;
}

.goodcang-inbound-confirm-body {
  padding: 18px 20px;
  overflow: auto;
}

.goodcang-inbound-confirm-product {
  display: flex;
  align-items: center;
  gap: 13px;
  padding-bottom: 15px;
  border-bottom: 1px solid #d7e2de;
}

.goodcang-inbound-confirm-product img,
.goodcang-inbound-confirm-product > .empty {
  flex: 0 0 64px;
  width: 64px;
  height: 64px;
  border-radius: 6px;
  background: #edf2f0;
  object-fit: contain;
}

.goodcang-inbound-confirm-product > .empty {
  display: grid;
  place-items: center;
  color: #677772;
  font-size: 12px;
  font-weight: 900;
}

.goodcang-inbound-confirm-product > div {
  display: grid;
  min-width: 0;
  gap: 3px;
}

.goodcang-inbound-confirm-product span,
.goodcang-inbound-confirm-product small {
  color: #60716b;
  font-size: 12px;
  font-weight: 800;
}

.goodcang-inbound-confirm-product strong {
  overflow-wrap: anywhere;
  color: #14231f;
  font-size: 18px;
  line-height: 1.35;
}

.goodcang-inbound-confirm-facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 24px;
  margin: 8px 0 0;
}

.goodcang-inbound-confirm-facts > div {
  display: grid;
  grid-template-columns: minmax(90px, 0.7fr) minmax(0, 1.3fr);
  gap: 12px;
  align-items: center;
  min-height: 46px;
  border-bottom: 1px solid #e0e8e4;
}

.goodcang-inbound-confirm-facts dt {
  color: #60716b;
  font-size: 12px;
  font-weight: 800;
}

.goodcang-inbound-confirm-facts dd {
  margin: 0;
  overflow-wrap: anywhere;
  color: #14231f;
  font-size: 14px;
  font-weight: 900;
  text-align: right;
}

.goodcang-inbound-confirm-note {
  margin: 14px 0 0;
  padding: 11px 12px;
  border-radius: 6px;
  background: #eaf2f7;
  color: #244e64;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.55;
}

.goodcang-inbound-confirm-status {
  min-height: 38px;
  padding: 8px 20px 10px;
  color: #245f7e;
  font-size: 12px;
  font-weight: 900;
}

.goodcang-inbound-confirm-status.error {
  color: #a13c33;
}

.goodcang-inbound-confirm-footer {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 13px 20px;
  border-top: 1px solid #d7e2de;
  background: #fff;
}

.goodcang-inbound-confirm-submit {
  min-width: 158px;
  border-color: #236b92;
  background: #236b92;
  color: #fff;
}

.goodcang-inbound-confirm-submit:hover,
.goodcang-inbound-confirm-submit:focus-visible {
  border-color: #174f6e;
  background: #174f6e;
}

.goodcang-inbound-confirm-submit:disabled,
.goodcang-inbound-confirm-close:disabled {
  cursor: wait;
  border-color: #b8c8d0;
  background: #dce5e9;
  color: #60717a;
  opacity: 1;
}

@media (max-width: 720px) {
  .goodcang-inbound-confirm-dialog {
    padding: 8px;
  }

  .goodcang-inbound-confirm-facts {
    grid-template-columns: 1fr;
  }

  .goodcang-inbound-confirm-footer {
    display: grid;
    grid-template-columns: 1fr 1.35fr;
  }
}

/* Freight invoice builder */
.freight-invoice-button {
  border-color: #255f99;
  background: #255f99;
  color: #fff;
}

.freight-invoice-button:hover,
.freight-invoice-button:focus-visible {
  border-color: #184d7d;
  background: #184d7d;
}

.freight-invoice-dialog {
  position: fixed;
  inset: 0;
  z-index: 42;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(8, 20, 17, 0.68);
}

.freight-invoice-dialog[hidden] {
  display: none;
}

.freight-invoice-panel {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  width: min(1240px, 100%);
  max-height: 94vh;
  overflow: hidden;
  border: 1px solid #d4dfe2;
  border-radius: 12px;
  background: #f3f7f5;
  box-shadow: 0 26px 80px rgba(0, 0, 0, 0.3);
}

.freight-invoice-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  padding: 18px 22px 16px;
  border-bottom: 1px solid #dbe5e1;
  background: #fff;
}

.freight-invoice-title-block {
  min-width: 0;
}

.freight-invoice-title-block > span {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  margin-bottom: 4px;
  padding: 0 7px;
  border-radius: 4px;
  background: #eef4f8;
  color: var(--blue);
  font-size: 11px;
  font-weight: 900;
}

.freight-invoice-title-block h2 {
  margin: 0;
  color: #14231f;
  font-size: 24px;
  line-height: 1.25;
}

.freight-invoice-title-block p {
  margin: 5px 0 0;
  color: #60716b;
  font-size: 13px;
  line-height: 1.5;
}

.freight-invoice-close {
  position: relative;
  flex: 0 0 38px;
  width: 38px;
  min-height: 38px;
  padding: 0;
  border-color: #d2dfe4;
  background: #fff;
  color: #53636b;
  font-size: 25px;
  font-weight: 500;
  line-height: 1;
}

.freight-invoice-close:hover,
.freight-invoice-close:focus-visible {
  border-color: #a9c2d0;
  background: #eef4f8;
  color: var(--blue);
}

.freight-invoice-body {
  display: grid;
  gap: 14px;
  padding: 16px;
  overflow: auto;
}

.freight-invoice-section {
  display: grid;
  gap: 12px;
  min-width: 0;
  padding: 16px;
  border: 1px solid #d8e4df;
  border-radius: 9px;
  background: #fff;
}

.freight-invoice-section-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

.freight-invoice-section-head > div:first-child {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  min-width: 0;
}

.freight-invoice-section-head h3 {
  margin: 0;
  color: #14231f;
  font-size: 16px;
  line-height: 1.3;
}

.freight-invoice-section-head p {
  margin: 4px 0 0;
  color: #687873;
  font-size: 12px;
  line-height: 1.5;
}

.freight-invoice-step {
  display: inline-grid;
  flex: 0 0 30px;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 6px;
  background: #e9f5f0;
  color: var(--green-dark);
  font-size: 11px;
  font-weight: 900;
}

.freight-invoice-count,
.freight-invoice-selection {
  flex: 0 0 auto;
  padding: 6px 9px;
  border: 1px solid #dbe7e2;
  border-radius: 6px;
  background: #f8fbfa;
  color: #52625d;
  font-size: 12px;
  font-weight: 900;
  white-space: nowrap;
}

.freight-invoice-search {
  display: grid;
  gap: 5px;
  color: #53645e;
  font-size: 12px;
  font-weight: 900;
}

.freight-invoice-search input {
  max-width: 520px;
  margin-top: 0;
  border-color: #cbdad4;
}

.freight-invoice-batch-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 8px;
  max-height: 220px;
  overflow: auto;
  padding: 2px;
}

.freight-invoice-batch {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
  min-height: 66px;
  padding: 10px 11px;
  border: 1px solid #d8e5df;
  border-radius: 8px;
  background: #fbfdfc;
  color: var(--ink);
  text-align: left;
}

.freight-invoice-batch:hover,
.freight-invoice-batch:focus-visible {
  border-color: #a8d2c3;
  background: #f2faf6;
}

.freight-invoice-batch.active {
  border-color: var(--green);
  background: #eaf7f2;
  box-shadow: inset 3px 0 0 var(--green);
}

.freight-invoice-batch.warning {
  border-color: #e4c89d;
  background: #fffaf2;
}

.freight-invoice-batch-main {
  display: grid;
  min-width: 0;
  gap: 4px;
}

.freight-invoice-batch-main strong {
  overflow-wrap: anywhere;
  color: #14231f;
  font-size: 14px;
  line-height: 1.25;
}

.freight-invoice-batch-main small {
  color: #6a7974;
  font-size: 11px;
  font-weight: 800;
}

.freight-invoice-batch-state {
  flex: 0 0 auto;
  color: var(--green-dark);
  font-size: 12px;
  font-weight: 900;
}

.freight-invoice-batch.warning .freight-invoice-batch-state {
  color: #925414;
}

.freight-invoice-selected-batch {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px;
}

.freight-invoice-selected-batch > div {
  display: grid;
  gap: 4px;
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid #d8e5df;
  border-radius: 7px;
  background: #f8fbfa;
}

.freight-invoice-selected-batch span,
.freight-invoice-recipient-grid span,
.freight-invoice-line-facts small {
  color: #687873;
  font-size: 11px;
  font-weight: 800;
}

.freight-invoice-selected-batch strong {
  overflow-wrap: anywhere;
  color: #153c31;
  font-size: 14px;
}

.freight-invoice-selected-batch small {
  color: #687873;
  font-size: 11px;
  font-weight: 800;
}

.freight-invoice-line-list {
  display: grid;
  gap: 8px;
}

.freight-invoice-line {
  display: grid;
  grid-template-columns: 18px 54px minmax(150px, 1fr) minmax(330px, 1.3fr) minmax(110px, 0.45fr);
  gap: 10px;
  align-items: center;
  min-width: 0;
  padding: 9px 10px;
  border: 1px solid #d8e5df;
  border-radius: 8px;
  background: #fff;
}

.freight-invoice-line.warning {
  border-color: #e4c89d;
  background: #fffaf2;
}

.freight-invoice-line > input[type="checkbox"] {
  margin: 0;
}

.freight-invoice-line-image {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  overflow: hidden;
  border: 1px solid #d8e5df;
  border-radius: 6px;
  background: #f3f8f6;
  color: #70807a;
  font-size: 10px;
  font-weight: 900;
}

.freight-invoice-line-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.freight-invoice-line-copy {
  display: grid;
  min-width: 0;
  gap: 4px;
}

.freight-invoice-line-copy strong {
  overflow-wrap: anywhere;
  color: #172822;
  font-size: 13px;
  line-height: 1.3;
}

.freight-invoice-line-copy small {
  color: #687873;
  font-size: 11px;
  font-weight: 800;
}

.freight-invoice-line-facts {
  display: grid;
  grid-template-columns: repeat(4, minmax(58px, 1fr));
  gap: 8px;
}

.freight-invoice-line-facts > span {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.freight-invoice-line-facts strong {
  color: #173d31;
  font-size: 13px;
  white-space: nowrap;
}

.freight-invoice-line-status {
  overflow-wrap: anywhere;
  color: var(--green-dark);
  font-size: 11px;
  font-weight: 900;
  line-height: 1.35;
}

.freight-invoice-line.warning .freight-invoice-line-status {
  color: #925414;
}

.freight-invoice-recipient-tabs {
  display: inline-grid;
  grid-template-columns: repeat(2, minmax(190px, 1fr));
  width: min(520px, 100%);
  gap: 2px;
  padding: 2px;
  border-radius: 7px;
  background: #edf4f1;
}

.freight-invoice-recipient-tabs button {
  min-height: 34px;
  padding-inline: 12px;
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: #52625d;
  font-size: 12px;
  font-weight: 900;
}

.freight-invoice-recipient-tabs button.active {
  background: #fff;
  color: var(--green-dark);
  box-shadow: 0 1px 5px rgba(22, 33, 31, 0.12);
}

.freight-invoice-recipient-tabs button:hover,
.freight-invoice-recipient-tabs button:focus-visible {
  color: var(--green-dark);
}

.freight-invoice-recipient-panel[hidden] {
  display: none;
}

.freight-invoice-recipient-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.freight-invoice-recipient-grid > div {
  display: grid;
  gap: 4px;
  min-width: 0;
  padding: 9px 10px;
  border: 1px solid #d8e5df;
  border-radius: 7px;
  background: #fbfdfc;
}

.freight-invoice-recipient-grid > div:nth-child(5) {
  grid-column: span 2;
}

.freight-invoice-recipient-grid strong {
  overflow-wrap: anywhere;
  color: #173d31;
  font-size: 13px;
  line-height: 1.35;
}

.freight-invoice-manual-recipient {
  display: grid;
  gap: 10px;
}

.freight-invoice-recipient-panel > label {
  display: grid;
  gap: 5px;
  color: #53645e;
  font-size: 12px;
  font-weight: 900;
}

.freight-invoice-recipient-panel textarea {
  width: 100%;
  min-height: 82px;
  margin-top: 0;
  resize: vertical;
  border-color: #cbdad4;
  font: inherit;
  line-height: 1.5;
}

.freight-invoice-address-preview {
  padding: 10px 12px;
  border: 1px dashed #cbdad4;
  border-radius: 7px;
  background: #f8fbfa;
  color: #687873;
  font-size: 12px;
}

.freight-invoice-address-preview.error {
  border-style: solid;
  border-color: #e4b8b2;
  background: #fff4f2;
  color: var(--red);
  font-weight: 800;
}

.freight-invoice-address-preview.ready {
  border-style: solid;
  border-color: #b9d9cc;
  background: #f0faf5;
}

.freight-invoice-address-preview-head {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 8px;
}

.freight-invoice-address-preview-head strong {
  color: var(--green-dark);
  font-size: 13px;
}

.freight-invoice-address-preview-head span {
  color: #687873;
  font-size: 11px;
}

.freight-invoice-status {
  min-height: 20px;
  color: #60716b;
  font-size: 12px;
  font-weight: 800;
}

.freight-invoice-status.ready {
  color: var(--green-dark);
}

.freight-invoice-status.warning {
  color: #925414;
}

.freight-invoice-status.error {
  color: var(--red);
}

.freight-invoice-empty {
  margin: 0;
  padding: 12px;
  color: #687873;
  font-size: 12px;
}

.freight-invoice-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 13px 18px;
  border-top: 1px solid #dbe5e1;
  background: #fff;
}

.freight-invoice-footer > div:first-child {
  display: grid;
  min-width: 0;
  gap: 3px;
}

.freight-invoice-footer strong {
  overflow-wrap: anywhere;
  color: #173d31;
  font-size: 13px;
}

.freight-invoice-footer span {
  color: #687873;
  font-size: 11px;
}

.freight-invoice-footer-actions {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 8px;
}

.freight-invoice-generate {
  border-color: var(--green);
  background: var(--green);
  color: #fff;
}

.freight-invoice-generate:hover,
.freight-invoice-generate:focus-visible {
  border-color: var(--green-dark);
  background: var(--green-dark);
}

.freight-invoice-generate:disabled {
  cursor: wait;
  opacity: 0.62;
}

@media (max-width: 980px) {
  .freight-invoice-line {
    grid-template-columns: 18px 54px minmax(0, 1fr) minmax(220px, 1fr);
  }

  .freight-invoice-line-status {
    grid-column: 3 / -1;
  }

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

@media (max-width: 720px) {
  .freight-invoice-dialog {
    padding: 8px;
  }

  .freight-invoice-panel {
    max-height: 97vh;
    border-radius: 9px;
  }

  .freight-invoice-header,
  .freight-invoice-body,
  .freight-invoice-footer {
    padding-inline: 12px;
  }

  .freight-invoice-section {
    padding: 12px;
  }

  .freight-invoice-section-head,
  .freight-invoice-footer {
    align-items: stretch;
    flex-direction: column;
  }

  .freight-invoice-selected-batch,
  .freight-invoice-recipient-grid {
    grid-template-columns: 1fr;
  }

  .freight-invoice-recipient-grid > div:nth-child(5) {
    grid-column: auto;
  }

  .freight-invoice-line {
    grid-template-columns: 18px 54px minmax(0, 1fr);
  }

  .freight-invoice-line-facts,
  .freight-invoice-line-status {
    grid-column: 2 / -1;
  }

  .freight-invoice-line-facts {
    grid-template-columns: repeat(4, minmax(54px, 1fr));
  }

  .freight-invoice-footer-actions,
  .freight-invoice-footer-actions > button {
    width: 100%;
  }

  .freight-invoice-footer-actions {
    display: grid;
    grid-template-columns: 1fr 1.5fr;
  }
}

/* Goodcang inbound booking */
.goodcang-booking-button {
  border-color: #187a5a;
  background: #187a5a;
  color: #fff;
}

.goodcang-booking-button:hover,
.goodcang-booking-button:focus-visible {
  border-color: #0f5f45;
  background: #0f5f45;
}

.goodcang-booking-dialog {
  position: fixed;
  inset: 0;
  z-index: 43;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(8, 20, 17, 0.7);
}

.goodcang-booking-dialog[hidden] {
  display: none;
}

.goodcang-booking-panel {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  width: min(1040px, 100%);
  max-height: 94vh;
  overflow: hidden;
  border: 1px solid #cad9d3;
  border-radius: 10px;
  background: #f4f7f5;
  box-shadow: 0 26px 80px rgba(0, 0, 0, 0.32);
}

.goodcang-booking-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  padding: 18px 22px 16px;
  border-bottom: 1px solid #d7e2de;
  background: #fff;
}

.goodcang-booking-title-block {
  min-width: 0;
}

.goodcang-booking-title-block > span {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  margin-bottom: 4px;
  padding: 0 7px;
  border-radius: 4px;
  background: #e9f5f0;
  color: #116247;
  font-size: 11px;
  font-weight: 900;
}

.goodcang-booking-title-block h2 {
  margin: 0;
  color: #14231f;
  font-size: 24px;
  line-height: 1.25;
}

.goodcang-booking-title-block p {
  margin: 5px 0 0;
  color: #596b65;
  font-size: 13px;
  line-height: 1.5;
}

.goodcang-booking-close {
  flex: 0 0 38px;
  width: 38px;
  min-height: 38px;
  padding: 0;
  border-color: #d2ded9;
  background: #fff;
  color: #53635e;
  font-size: 25px;
  font-weight: 500;
  line-height: 1;
}

.goodcang-booking-close:hover,
.goodcang-booking-close:focus-visible {
  border-color: #9fc7b8;
  background: #edf7f2;
  color: #116247;
}

.goodcang-booking-body {
  display: grid;
  align-content: start;
  overflow: auto;
  background: #f4f7f5;
}

.goodcang-booking-defaults {
  display: grid;
  grid-template-columns: 1.05fr 1.55fr 0.8fr 1.35fr;
  gap: 1px;
  background: #31584c;
}

.goodcang-booking-defaults > div {
  display: grid;
  align-content: center;
  min-width: 0;
  min-height: 66px;
  padding: 10px 14px;
  background: #173d31;
}

.goodcang-booking-defaults span {
  color: #b9d2c9;
  font-size: 11px;
  font-weight: 800;
}

.goodcang-booking-defaults strong {
  margin-top: 4px;
  overflow-wrap: anywhere;
  color: #fff;
  font-size: 13px;
  line-height: 1.35;
}

.goodcang-booking-selection,
.goodcang-booking-selected-section {
  display: grid;
  gap: 12px;
  padding: 16px 20px;
  border-bottom: 1px solid #d9e3df;
  background: #fff;
}

.goodcang-booking-section-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

.goodcang-booking-section-head > div {
  min-width: 0;
}

.goodcang-booking-section-head h3 {
  margin: 0;
  color: #14231f;
  font-size: 16px;
  line-height: 1.3;
}

.goodcang-booking-section-head p {
  margin: 4px 0 0;
  color: #61716c;
  font-size: 12px;
  line-height: 1.5;
}

.goodcang-booking-section-head > span {
  flex: 0 0 auto;
  padding: 6px 9px;
  border: 1px solid #d4e2dc;
  border-radius: 6px;
  background: #f5faf8;
  color: #31584c;
  font-size: 12px;
  font-weight: 900;
  white-space: nowrap;
}

.goodcang-booking-search {
  display: grid;
  gap: 5px;
  color: #4f625b;
  font-size: 12px;
  font-weight: 900;
}

.goodcang-booking-search input {
  width: min(560px, 100%);
  margin-top: 0;
  border-color: #c8d8d2;
}

.goodcang-booking-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
  gap: 8px;
  max-height: 260px;
  overflow: auto;
  padding: 2px;
}

.goodcang-booking-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
  min-height: 70px;
  padding: 10px 12px;
  border: 1px solid #d6e2dd;
  border-radius: 7px;
  background: #fbfdfc;
  color: #172822;
  text-align: left;
}

.goodcang-booking-item:hover,
.goodcang-booking-item:focus-visible {
  border-color: #91c7b2;
  background: #f1faf6;
}

.goodcang-booking-item.active {
  border-color: #187a5a;
  background: #e9f6f1;
  box-shadow: inset 3px 0 0 #187a5a;
}

.goodcang-booking-item.booked,
.goodcang-booking-item:disabled {
  cursor: default;
  opacity: 1;
}

.goodcang-booking-item.booked {
  border-color: #b9d9cc;
  background: #f1f8f5;
}

.goodcang-booking-item-copy {
  display: grid;
  min-width: 0;
  gap: 5px;
}

.goodcang-booking-item-copy strong {
  overflow-wrap: anywhere;
  color: #14231f;
  font-size: 14px;
  line-height: 1.25;
}

.goodcang-booking-item-copy small {
  overflow: hidden;
  color: #60716b;
  font-size: 11px;
  font-weight: 800;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.goodcang-booking-item-state {
  flex: 0 0 auto;
  max-width: 180px;
  color: #116247;
  font-size: 12px;
  font-weight: 900;
  line-height: 1.35;
  text-align: right;
}

.goodcang-booking-selected {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  min-height: 42px;
}

.goodcang-booking-selected-item {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: min(300px, 100%);
  padding: 8px 8px 8px 11px;
  border: 1px solid #b9d9cc;
  border-radius: 7px;
  background: #edf8f3;
}

.goodcang-booking-selected-item > div {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.goodcang-booking-selected-item strong {
  overflow-wrap: anywhere;
  color: #153c31;
  font-size: 13px;
}

.goodcang-booking-selected-item span {
  overflow: hidden;
  color: #566a63;
  font-size: 11px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.goodcang-booking-selected-item button {
  flex: 0 0 30px;
  width: 30px;
  min-height: 30px;
  margin-left: auto;
  padding: 0;
  border-color: transparent;
  background: transparent;
  color: #416158;
  font-size: 20px;
  line-height: 1;
}

.goodcang-booking-selected-item button:hover,
.goodcang-booking-selected-item button:focus-visible {
  border-color: #9dc7b7;
  background: #fff;
  color: #a13c33;
}

.goodcang-booking-result {
  display: grid;
  gap: 10px;
  margin: 14px 20px 0;
  padding: 14px 16px;
  border: 1px solid #9bcab7;
  border-radius: 8px;
  background: #edf8f3;
}

.goodcang-booking-result[hidden] {
  display: none;
}

.goodcang-booking-result-head {
  display: flex;
  align-items: center;
  gap: 9px;
}

.goodcang-booking-result-head > span,
.history-booking-heading > span,
.history-booking-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 24px;
  padding: 0 8px;
  border: 1px solid #9bcab7;
  border-radius: 5px;
  background: #dff3ea;
  color: #0f5f45;
  font-size: 11px;
  font-style: normal;
  font-weight: 900;
  white-space: nowrap;
}

.goodcang-booking-result-head strong {
  color: #153c31;
  font-size: 15px;
}

.goodcang-booking-result-facts {
  display: grid;
  grid-template-columns: 1fr 0.85fr 1.7fr auto;
  gap: 10px;
  align-items: center;
}

.goodcang-booking-result-facts > div {
  display: grid;
  min-width: 0;
  gap: 3px;
}

.goodcang-booking-result-facts span {
  color: #5d716a;
  font-size: 11px;
  font-weight: 800;
}

.goodcang-booking-result-facts strong {
  overflow-wrap: anywhere;
  color: #143b30;
  font-size: 13px;
}

.goodcang-booking-result-facts [data-action="copy-goodcang-booking-link"],
.history-booking-values [data-action="copy-goodcang-booking-link"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  padding: 0 13px;
  border: 1px solid #187a5a;
  border-radius: 6px;
  background: #187a5a;
  color: #fff;
  font-size: 12px;
  font-weight: 900;
  font-family: inherit;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}

.goodcang-booking-result-facts [data-action="copy-goodcang-booking-link"]:hover,
.goodcang-booking-result-facts [data-action="copy-goodcang-booking-link"]:focus-visible,
.history-booking-values [data-action="copy-goodcang-booking-link"]:hover,
.history-booking-values [data-action="copy-goodcang-booking-link"]:focus-visible {
  border-color: #0f5f45;
  background: #0f5f45;
}

.goodcang-booking-status {
  min-height: 22px;
  padding: 9px 20px 12px;
  color: #586b64;
  font-size: 12px;
  font-weight: 800;
}

.goodcang-booking-status.ready {
  color: #0f5f45;
}

.goodcang-booking-status.warning {
  color: #8a4d10;
}

.goodcang-booking-status.error {
  color: #a13c33;
}

.goodcang-booking-empty {
  margin: 0;
  padding: 12px;
  color: #60716b;
  font-size: 12px;
  font-weight: 700;
}

.goodcang-booking-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 13px 18px;
  border-top: 1px solid #d7e2de;
  background: #fff;
}

.goodcang-booking-footer > div:first-child {
  display: grid;
  min-width: 0;
  gap: 3px;
}

.goodcang-booking-footer strong {
  overflow-wrap: anywhere;
  color: #173d31;
  font-size: 13px;
}

.goodcang-booking-footer span {
  color: #60716b;
  font-size: 11px;
}

.goodcang-booking-footer-actions {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 8px;
}

.goodcang-booking-submit {
  min-width: 132px;
  border-color: #187a5a;
  background: #187a5a;
  color: #fff;
}

.goodcang-booking-submit:hover,
.goodcang-booking-submit:focus-visible {
  border-color: #0f5f45;
  background: #0f5f45;
}

.goodcang-booking-submit:disabled {
  cursor: not-allowed;
  border-color: #b8c9c2;
  background: #d8e2de;
  color: #65756f;
  opacity: 1;
}

.history-booking-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 13px 15px;
  border: 1px solid #a9d1c1;
  border-radius: 8px;
  background: #edf8f3;
}

.history-booking-heading {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.history-booking-heading > div {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.history-booking-heading strong {
  overflow-wrap: anywhere;
  color: #143b30;
  font-size: 14px;
}

.history-booking-heading small {
  color: #5d716a;
  font-size: 11px;
  font-weight: 800;
}

.history-booking-values {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 16px;
  min-width: 0;
}

.history-booking-values > div {
  display: grid;
  min-width: 90px;
  gap: 2px;
}

.history-booking-values span {
  color: #5d716a;
  font-size: 10px;
  font-weight: 800;
}

.history-booking-values strong {
  overflow-wrap: anywhere;
  color: #143b30;
  font-size: 12px;
}

@media (max-width: 980px) {
  .goodcang-booking-defaults {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .goodcang-booking-result-facts {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .goodcang-booking-result-facts [data-action="copy-goodcang-booking-link"] {
    grid-column: 1 / -1;
  }

  .history-booking-bar,
  .history-booking-values {
    align-items: flex-start;
    flex-direction: column;
  }

  .history-booking-values {
    width: 100%;
  }
}

@media (max-width: 720px) {
  .goodcang-booking-dialog {
    padding: 8px;
  }

  .goodcang-booking-panel {
    max-height: 97vh;
    border-radius: 8px;
  }

  .goodcang-booking-header,
  .goodcang-booking-selection,
  .goodcang-booking-selected-section,
  .goodcang-booking-footer {
    padding-inline: 12px;
  }

  .goodcang-booking-defaults,
  .goodcang-booking-result-facts {
    grid-template-columns: 1fr;
  }

  .goodcang-booking-section-head,
  .goodcang-booking-footer {
    align-items: stretch;
    flex-direction: column;
  }

  .goodcang-booking-list {
    grid-template-columns: 1fr;
  }

  .goodcang-booking-item {
    align-items: flex-start;
  }

  .goodcang-booking-item-copy small {
    white-space: normal;
  }

  .goodcang-booking-result {
    margin-inline: 12px;
  }

  .goodcang-booking-footer-actions,
  .goodcang-booking-footer-actions > button {
    width: 100%;
  }

  .goodcang-booking-footer-actions {
    display: grid;
    grid-template-columns: 1fr 1.5fr;
  }
}