:root {
  --bg: #f3f5f7;
  --panel: #ffffff;
  --ink: #172033;
  --text: #172033;
  --muted: #667085;
  --line: #d8dee8;
  --line-strong: #c8d0dc;
  --blue: #2563d9;
  --primary: #2563d9;
  --blue-dark: #1d4fb8;
  --blue-soft: #edf4ff;
  --green: #16835d;
  --green-soft: #eaf8f2;
  --amber: #b66b12;
  --amber-soft: #fff6e7;
  --red: #c43d3d;
  --red-soft: #fff1f1;
  --sidebar: #151c28;
  --sidebar-line: #2a3443;
}

/* Unified compact workbars for the four high-frequency admin pages. */
#orders .topbar,
#statistics .topbar,
#funds .topbar,
#entry .topbar {
  min-height: 46px;
  margin-bottom: 8px;
  padding: 0 2px 8px;
}

#orders .topbar h1,
#statistics .topbar h1,
#funds .topbar h1,
#entry .topbar h1 {
  font-size: 21px;
}

#orders .topbar p,
#statistics .topbar p,
#funds .topbar p,
#entry .topbar p {
  margin-top: 2px;
  font-size: 12px;
}

#orders .top-actions,
#funds .topbar > button {
  align-self: center;
}

#orders .top-actions button,
#funds .topbar > button {
  height: 32px;
  padding: 0 13px;
}

.orders-control-panel {
  flex: 0 0 auto;
  overflow: hidden;
  margin-bottom: 8px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: #ffffff;
}

#orders .orders-utility-row {
  flex: 0 0 auto;
}

#orders .orders-control-panel .filters {
  display: grid;
  grid-template-columns: 204px 204px minmax(300px, 460px) 70px auto;
  align-items: center;
  justify-content: start;
  gap: 8px;
  margin: 0;
  padding: 7px 10px;
  overflow: visible;
  border-bottom: 1px solid var(--line);
}

#orders .orders-control-panel .filters > input,
#orders .orders-control-panel .filters #fQ {
  width: 100%;
  min-width: 0;
  height: 32px;
}

#orders .orders-control-panel .date-filter-label {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 7px;
  color: #586579;
  font-size: 12px;
}

#orders .orders-control-panel .date-filter-label input {
  width: 100%;
  min-width: 0;
  height: 32px;
  padding-right: 5px;
}

#orders .orders-control-panel #searchBtn {
  width: 70px;
  height: 32px;
  padding: 0;
}

#orders .orders-control-panel .toggle-label {
  justify-self: start;
  height: 32px;
  color: #586579;
  font-size: 12px;
}

#orders .orders-control-panel .toggle-label input {
  width: 16px;
  height: 16px;
}

#orders .orders-control-panel .order-edit-lockbar {
  min-height: 40px;
  margin: 0;
  padding: 5px 10px;
  overflow: hidden;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  background: #fbfcfe;
}

#orders .order-edit-lockbar strong {
  display: inline-flex;
  align-items: center;
  min-width: 116px;
  height: 26px;
  padding: 0 9px;
  border: 1px solid #efc3c3;
  border-radius: 5px;
  background: var(--red-soft);
  color: #ad3030;
  font-size: 12px;
}

#orders .order-edit-lockbar strong.unlocked {
  border-color: #b9dfd0;
  background: var(--green-soft);
  color: #0e6c4c;
}

#orders .order-edit-lockbar .password-chip {
  height: 28px;
  padding: 0 0 0 8px;
  overflow: hidden;
  border: 1px solid #cfd7e3;
  border-radius: 5px;
  background: #ffffff;
}

#orders .order-edit-lockbar .password-chip input {
  width: 138px;
  height: 26px;
  margin-left: 2px;
  border-left: 1px solid var(--line);
  border-radius: 0;
}

#orders .order-edit-lockbar > span {
  min-width: 0;
  overflow: hidden;
  color: #667085;
  text-overflow: ellipsis;
}

#orders .orders-logistics-panel {
  min-height: 44px;
  margin: 0;
  padding: 6px 10px;
  border: 0;
  border-radius: 0;
}

#orders .orders-logistics-panel .panel-title {
  min-width: 104px;
  margin: 0;
  padding-left: 8px;
}

#orders .orders-logistics-panel .order-count-summary {
  min-height: 28px;
  padding-right: 10px;
  border-right: 1px solid var(--line);
}

#orders .orders-logistics-panel p {
  font-size: 12px;
}

#orders .orders-logistics-panel .actions {
  gap: 7px;
}

#orders .orders-logistics-panel input[type="file"],
#entry .entry-import-inline input[type="file"] {
  height: 32px;
  padding: 0;
  overflow: hidden;
  border: 1px solid #cfd7e3;
  border-radius: 5px;
  background: #ffffff;
  color: #667085;
  font-size: 12px;
  line-height: 30px;
}

#orders .orders-logistics-panel input[type="file"] {
  width: 270px;
}

#orders .orders-logistics-panel input[type="file"]::file-selector-button,
#entry .entry-import-inline input[type="file"]::file-selector-button {
  height: 30px;
  margin-right: 9px;
  padding: 0 11px;
  border: 0;
  border-right: 1px solid #cfd7e3;
  background: #f5f7fa;
  color: #344054;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

#orders .orders-logistics-panel button,
#entry .entry-import-inline button {
  height: 32px;
}

#statistics .stats-search-panel {
  padding: 8px 10px;
}

.stats-toolbar-main,
.stats-toolbar-meta {
  display: grid;
  align-items: center;
  gap: 10px;
}

.stats-toolbar-main {
  grid-template-columns: minmax(340px, 620px);
  justify-content: start;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--line);
}

.stats-toolbar-meta {
  grid-template-columns: minmax(520px, 1fr) auto;
  padding-top: 8px;
}

#statistics .stats-field-row,
#statistics .stats-search-row,
#statistics .stats-date-row,
#statistics .stats-total-row {
  min-width: 0;
  margin: 0;
}

#statistics .stats-field-row,
#statistics .stats-date-row {
  flex-wrap: nowrap;
}

#statistics .stats-field-row > span,
#statistics .stats-date-row > span:first-child {
  min-width: 58px;
  color: #586579;
  font-size: 12px;
}

#statistics .stats-chip {
  height: 30px;
  padding: 0 11px;
}

#statistics .stats-search-row {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) 70px 88px;
  gap: 7px;
}

#statistics .stats-search-row input {
  width: 100%;
  min-width: 0;
  height: 32px;
}

#statistics .stats-search-row button,
#statistics .stats-date-row button,
#statistics .stats-total-row button {
  height: 32px;
  padding: 0 11px;
}

#statistics .stats-date-row input {
  width: 142px;
  height: 32px;
}

#statistics .stats-tip {
  color: #7a8699;
  white-space: nowrap;
}

#statistics .stats-total-row {
  justify-content: flex-end;
  flex-wrap: nowrap;
  gap: 10px;
  font-size: 12px;
  white-space: nowrap;
}

#statistics .stats-total-row b {
  font-size: 17px;
}

#statistics .stats-total-row button {
  margin-left: 2px;
}

#statistics #statsScope {
  min-height: 18px;
  margin-top: 5px;
  padding-top: 5px;
  border-top: 1px dashed #dbe1e9;
  font-size: 12px;
}

#funds .funds-finance-panel {
  overflow: hidden;
}

#funds .funds-panel-head {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 48px;
  padding: 6px 10px;
  border-bottom: 1px solid var(--line);
}

#funds .funds-panel-head .panel-title {
  flex: 0 0 auto;
  min-width: 112px;
  margin: 0;
}

#funds .finance-summary-row {
  flex: 1 1 auto;
  flex-wrap: nowrap;
  gap: 0;
  padding: 0;
  overflow-x: auto;
}

#funds .finance-summary-row span {
  min-height: 34px;
  padding: 4px 10px;
  font-size: 12px;
  white-space: nowrap;
}

#funds .finance-summary-row b {
  font-size: 16px;
}

#funds #paymentResult:empty {
  display: none;
}

#funds .funds-customer-toolbar {
  min-height: 40px;
  padding: 5px 10px;
  border-top: 0;
}

#funds .funds-customer-toolbar strong {
  min-width: 112px;
}

#funds .funds-customer-toolbar input {
  width: min(360px, 34vw);
  height: 30px;
}

#entry .entry-input-panel {
  padding: 8px 10px;
  border-radius: 7px;
}

#entry .entry-input-panel .archive-select-row {
  grid-template-columns: minmax(240px, 1fr) minmax(240px, 1fr) minmax(430px, .95fr);
  align-items: center;
  gap: 10px;
  margin-bottom: 7px;
}

#entry .entry-input-panel .archive-select-row label {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  color: #586579;
  font-size: 12px;
}

#entry .entry-input-panel .archive-select-row label input {
  width: 100%;
  height: 32px;
}

#entry .entry-import-inline {
  display: grid;
  grid-template-columns: auto minmax(210px, 1fr) auto;
  gap: 8px;
}

#entry .entry-import-inline span {
  color: #586579;
  font-size: 12px;
}

#entry .entry-import-inline input[type="file"] {
  width: 100%;
  min-width: 0;
}

#entry .entry-parse-row {
  gap: 10px;
}

#entry .entry-input-panel #rawInput {
  min-height: 48px;
  height: 48px;
  padding: 7px 10px;
  line-height: 1.35;
}

#entry .entry-inline-actions {
  gap: 7px;
}

#entry .entry-inline-actions button {
  height: 32px;
  padding: 0 13px;
}

#entry .entry-result-panel {
  margin-bottom: 8px;
}

@media (max-width: 1480px) {
  #orders .orders-control-panel .filters {
    grid-template-columns: 196px 196px minmax(280px, 420px) 66px auto;
  }

  .stats-toolbar-main {
    grid-template-columns: minmax(320px, 620px);
  }

  #statistics .stats-search-row {
    grid-template-columns: minmax(240px, 1fr) 70px 88px;
  }
}

@media (max-width: 1180px) {
  #orders .orders-control-panel .filters,
  #entry .entry-input-panel .archive-select-row {
    min-width: 1050px;
  }

  #orders .orders-control-panel {
    overflow-x: auto;
  }

  .stats-toolbar-meta {
    grid-template-columns: 1fr;
  }

  #statistics .stats-total-row {
    justify-content: flex-start;
  }

  #entry .entry-input-panel {
    overflow-x: auto;
  }
}

@media (max-width: 640px) {
  #orders .topbar,
  #statistics .topbar,
  #funds .topbar,
  #entry .topbar {
    min-height: 0;
  }

  #orders .orders-control-panel .order-edit-lockbar {
    overflow-x: auto;
  }

  #statistics .stats-toolbar-main,
  #statistics .stats-toolbar-meta {
    display: block;
  }

  #statistics .stats-field-row,
  #statistics .stats-search-row,
  #statistics .stats-date-row,
  #statistics .stats-total-row {
    margin-bottom: 7px;
  }

  #statistics .stats-search-row {
    display: grid;
    grid-template-columns: minmax(190px, 1fr) 64px 82px;
    min-width: 370px;
  }

  #funds .funds-panel-head {
    display: block;
  }

  #funds .funds-panel-head .panel-title {
    margin-bottom: 6px;
  }
}

* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif;
  display: flex;
  min-height: 100vh;
}

.login-screen {
  position: fixed;
  inset: 0;
  background: rgba(17, 24, 39, .72);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
}
.login-screen.hidden { display: none; }
.login-card {
  width: min(380px, calc(100vw - 28px));
  background: #fff;
  border-radius: 10px;
  padding: 22px;
  box-shadow: 0 18px 50px rgba(0,0,0,.24);
}
.login-card h1 { font-size: 22px; }
.login-card input, .login-card button {
  width: 100%;
  margin-top: 10px;
}
.login-tip {
  margin-top: 12px;
  color: var(--muted);
  font-size: 12px;
  text-align: center;
}
.login-link {
  display: block;
  margin-top: 12px;
  color: var(--blue);
  text-align: center;
  text-decoration: none;
  font-size: 14px;
  font-weight: 650;
}
.login-link:hover { text-decoration: underline; }

.side {
  width: 184px;
  background: #111827;
  color: #fff;
  padding: 18px 12px;
  flex: 0 0 auto;
}

.brand { margin: 0 0 18px 4px; }
.brand strong { display: block; font-size: 18px; }
.brand span { display: block; color: #aeb6c6; font-size: 12px; margin-top: 4px; }

.nav {
  width: 100%;
  display: block;
  border: 0;
  color: #d8dee9;
  background: transparent;
  text-align: left;
  padding: 11px 12px;
  border-radius: 6px;
  margin-bottom: 5px;
  font-size: 14px;
  cursor: pointer;
}
.nav.active, .nav:hover { background: #263244; color: #fff; }
.logout-nav {
  margin-top: 14px;
  color: #fecaca;
}
.logout-nav:hover { background: #3b1d24; color: #fff; }

.main {
  padding: 22px;
  width: calc(100vw - 184px);
}

.view { display: none; }
.view.active { display: block; }

.customer-portal, .supplier-portal {
  display: block;
  background: #f5f6f8;
}
.customer-portal .side,
.customer-portal #loginScreen,
.supplier-portal .side,
.supplier-portal #loginScreen {
  display: none;
}
.customer-portal .main,
.supplier-portal .main {
  width: min(1180px, calc(100vw - 28px));
  margin: 0 auto;
  padding: 12px 0;
}
.customer-portal #customer {
  display: block;
}
.supplier-portal #supplierPortal {
  display: block;
}
.customer-portal #customer .topbar,
.supplier-portal #supplierPortal .topbar {
  padding: 4px 0 0;
  margin-bottom: 6px;
}

.topbar {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 16px;
}
.portal-title-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
h1 { margin: 0; font-size: 24px; }
p { margin: 6px 0 0; color: var(--muted); font-size: 14px; }
#entry .topbar {
  margin-bottom: 5px;
}
#entry .topbar h1 {
  font-size: 19px;
}
#entry .topbar p {
  margin-top: 0;
  font-size: 12px;
}

.panel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 14px;
  margin-bottom: 14px;
}
.panel-title { font-weight: 700; margin-bottom: 12px; }
.result-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.result-title-left {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.result-count {
  flex: 0 0 auto;
  border-radius: 999px;
  background: var(--blue-soft);
  color: var(--blue);
  padding: 3px 10px;
  font-size: 12px;
  font-weight: 750;
}
.compact-panel { margin-top: 12px; padding: 12px; }
.compact-panel p { margin-bottom: 8px; }
.orders-logistics-panel {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: nowrap;
  overflow: hidden;
  margin-top: 6px;
  margin-bottom: 8px;
  padding: 7px 10px;
}
.orders-logistics-panel .panel-title {
  margin: 0;
  font-size: 14px;
  white-space: nowrap;
}
.orders-logistics-panel .order-count-summary {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  flex: 0 0 auto;
  min-height: 30px;
  width: max-content;
  white-space: nowrap;
  line-height: 1;
}
.orders-logistics-panel .order-count-summary b {
  font-size: 16px;
}
.orders-logistics-panel p {
  flex: 1 1 auto;
  min-width: 80px;
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.orders-logistics-panel .actions {
  flex: 0 0 auto;
  flex-wrap: nowrap;
  margin: 0;
}
.orders-logistics-panel input[type="file"] {
  width: 240px;
  height: 30px;
}
.orders-logistics-panel button {
  height: 30px;
}
.orders-logistics-panel .mini-result {
  flex: 0 1 220px;
  min-width: 0;
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.logistics-template-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 32px;
  padding: 0 13px;
  border: 1px solid #8dd9c1;
  border-radius: 6px;
  background: #e9f8f2;
  color: #087f5b;
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
  text-decoration: none;
}
.logistics-template-link:hover {
  border-color: #24a47b;
  background: #d9f3e9;
  color: #066c4d;
}
.logistics-import-modal-panel {
  width: min(1040px, calc(100vw - 48px));
  max-height: calc(100vh - 48px);
  overflow: hidden;
}
.logistics-import-modal-panel .modal-bar > div {
  display: grid;
  gap: 4px;
}
.logistics-import-modal-panel .modal-bar small {
  color: #8190a8;
  font-weight: 500;
}
.logistics-import-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  padding: 14px 18px;
  color: #94a0b4;
  border-bottom: 1px solid #e5eaf2;
}
.logistics-import-steps b {
  text-align: center;
  padding: 9px;
  border-radius: 9px;
  background: #f6f8fc;
}
.logistics-import-steps .active { color: #2f5be7; background: #edf3ff; }
.logistics-import-file,
.logistics-import-tip {
  margin: 14px 18px 0;
  padding: 12px 14px;
  border: 1px solid #dfe6f2;
  border-radius: 10px;
  background: #fafcff;
  display: flex;
  justify-content: space-between;
  gap: 16px;
}
.logistics-import-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin: 14px 18px 0;
}
.logistics-import-stats > div {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 13px 15px;
  border-radius: 10px;
  border: 1px solid;
}
.logistics-import-stats b { font-size: 24px; }
.logistics-import-stats .ok { color: #16825f; background: #effaf5; border-color: #bfe8d6; }
.logistics-import-stats .multi { color: #315fd7; background: #f0f4ff; border-color: #cbd8ff; }
.logistics-import-stats .warn { color: #b56b0c; background: #fff8e9; border-color: #f0d39c; }
.logistics-import-stats .error { color: #d84444; background: #fff1f1; border-color: #f3c4c4; }
.logistics-import-tip { color: #315fd7; background: #f4f7ff; }
.logistics-preview-wrap {
  margin: 12px 18px 0;
  max-height: 340px;
  overflow: auto;
  border: 1px solid #e1e7f0;
  border-radius: 10px;
}
.logistics-preview-table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.logistics-preview-table th,
.logistics-preview-table td {
  padding: 10px 12px;
  text-align: left;
  border-bottom: 1px solid #edf0f5;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.logistics-preview-table th { position: sticky; top: 0; background: #f7f9fc; z-index: 1; }
.logistics-check { display: inline-block; padding: 3px 8px; border-radius: 6px; font-size: 12px; }
.logistics-check.ok { color: #16825f; background: #e8f8f0; }
.logistics-check.warn { color: #b56b0c; background: #fff4dc; }
.logistics-check.error { color: #d84444; background: #ffeded; }
.logistics-import-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 14px 18px 18px;
}
.special-delivery-modal-panel {
  width: min(760px, calc(100vw - 40px));
  max-height: calc(100vh - 32px);
  overflow-y: auto;
  border-radius: 14px;
}
.special-delivery-head > div { display: grid; gap: 3px; }
.special-delivery-head small { color: #8793a7; font-size: 12px; font-weight: 500; }
.modal-close-icon {
  width: 36px;
  height: 36px;
  padding: 0;
  border: 0;
  color: #6e7a90;
  background: transparent;
  font-size: 27px;
}
.special-delivery-order-info {
  display: grid;
  grid-template-columns:
    minmax(150px, 1.25fr)
    minmax(70px, .55fr)
    minmax(105px, .8fr)
    62px
    minmax(86px, .65fr)
    minmax(118px, .82fr)
    minmax(210px, 1.7fr);
  margin: 16px 24px 0;
  overflow: hidden;
  border: 1px solid #dce4f1;
  border-radius: 9px;
  background: #f6f9ff;
}
.special-delivery-order-info > div {
  min-width: 0;
  padding: 9px 11px;
  border-right: 1px solid #e2e8f2;
}
.special-delivery-order-info > div:last-child { border-right: 0; }
.special-delivery-order-info small {
  display: block;
  margin-bottom: 4px;
  color: #8793a7;
  font-size: 11px;
}
.special-delivery-order-info strong {
  display: block;
  min-width: 0;
  overflow: hidden;
  color: #27344a;
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.special-delivery-order-info > div > span {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 22px;
  align-items: center;
  gap: 4px;
}
.special-delivery-order-info button {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  padding: 0;
  color: #61718c;
  border: 1px solid #d6dfed;
  border-radius: 5px;
  background: #fff;
  font-size: 11px;
}
.special-delivery-order-info button:hover {
  color: #315fd7;
  border-color: #aebff2;
  background: #edf2ff;
}
.special-delivery-types {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  margin: 10px 24px 20px;
  border: 1px solid #dce3ef;
  border-radius: 8px;
  overflow: hidden;
}
.special-delivery-types button {
  border: 0;
  border-right: 1px solid #dce3ef;
  border-radius: 0;
  background: #fff;
}
.special-delivery-types button:last-child { border-right: 0; }
.special-delivery-types button.active { color: #fff; background: #3b5fe3; border-color: #3b5fe3; }
.special-delivery-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 28px;
  padding: 0 24px 18px;
}
.special-delivery-form-grid label,
.delivery-sign-grid label,
.special-delivery-remark {
  display: grid;
  gap: 6px;
  color: #536077;
  font-weight: 600;
}
.delivery-proof-section,
.delivery-sign-section {
  margin: 0 24px;
  padding: 16px;
  border: 1px solid #e0e6f0;
  border-radius: 10px;
  background: #fbfcff;
}
.delivery-tab-page:not(.hidden) {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: 14px;
}
.delivery-tab-page:not(.hidden) > .special-delivery-form-grid {
  grid-column: 1 / -1;
  width: 100%;
}
.delivery-tab-page:not(.hidden) > .delivery-proof-section {
  margin-right: 0;
}
.delivery-tab-page:not(.hidden) > .delivery-sign-section {
  margin-left: 0;
}
.delivery-tab-page .delivery-sign-grid {
  grid-template-columns: minmax(145px, 190px) minmax(0, 1fr);
  gap: 12px;
}
.delivery-upload-row { display: flex; align-items: center; gap: 16px; margin-top: 12px; }
.delivery-upload-box {
  display: grid;
  place-items: center;
  min-width: 205px;
  min-height: 112px;
  padding: 12px;
  border: 1px dashed #bfcbe0;
  border-radius: 9px;
  color: #3b5fe3;
  cursor: pointer;
  background: #fff;
}
.delivery-upload-box span { font-size: 25px; line-height: 1; }
.delivery-upload-box small { color: #97a2b4; font-weight: 500; }
.delivery-upload-box input { display: none; }
.delivery-upload-name { color: #8995a8; }
.delivery-upload-previews {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 70px;
  margin-top: 10px;
  padding: 7px;
  overflow-x: auto;
  border-top: 1px solid #e5eaf2;
}
.delivery-preview-empty {
  color: #9aa5b6;
  font-size: 12px;
}
.delivery-thumb {
  position: relative;
  display: grid;
  flex: 0 0 68px;
  width: 68px;
  gap: 3px;
  justify-items: center;
  color: #647086;
}
.delivery-thumb > img,
.delivery-pdf-thumb {
  display: grid;
  place-items: center;
  width: 62px;
  height: 52px;
  object-fit: cover;
  border: 1px solid #d7dfec;
  border-radius: 6px;
  background: #fff;
}
.delivery-pdf-thumb {
  color: #d43d3d;
  font-size: 13px;
  font-weight: 800;
}
.delivery-thumb > small {
  width: 68px;
  overflow: hidden;
  font-size: 10px;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.delivery-thumb-remove {
  position: absolute;
  z-index: 3;
  top: -6px;
  right: -2px;
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  padding: 0;
  color: #fff;
  border: 2px solid #fff;
  border-radius: 50%;
  background: #e5484d;
  box-shadow: 0 2px 6px rgb(176 30 38 / 24%);
  font-size: 13px;
  font-weight: 800;
  line-height: 1;
}
.delivery-thumb-remove:hover {
  background: #c92a30;
  transform: scale(1.08);
}
.delivery-thumb-zoom {
  position: fixed;
  z-index: 5000;
  top: 50%;
  left: 50%;
  display: none;
  width: min(620px, 72vw);
  height: min(620px, 72vh);
  padding: 12px;
  transform: translate(-50%, -50%);
  border: 1px solid #cbd5e5;
  border-radius: 12px;
  background: rgba(255, 255, 255, .98);
  box-shadow: 0 20px 70px rgba(24, 37, 64, .28);
  pointer-events: none;
}
.delivery-thumb > img:hover + .delivery-thumb-zoom {
  display: grid;
  place-items: center;
}
.delivery-thumb-zoom img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.delivery-progress {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin: 20px 24px;
  padding: 15px 8px 4px;
  border-top: 1px solid #edf0f5;
  border-bottom: 1px solid #edf0f5;
}
.delivery-progress > div {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 5px;
  color: #9ba5b7;
}
.delivery-progress > div:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 15px;
  left: 62%;
  width: 76%;
  height: 2px;
  background: #dfe5ef;
}
.delivery-progress i {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  color: #7e899d;
  background: #edf0f6;
  font-style: normal;
}
.delivery-progress .done,
.delivery-progress .active { color: #315fd7; }
.delivery-progress .done i,
.delivery-progress .active i { color: #fff; background: #315fd7; }
.delivery-progress .done::after { background: #315fd7 !important; }
.delivery-progress small { min-height: 18px; font-size: 11px; font-weight: 500; }
.delivery-sign-section { margin-top: 0; }
.delivery-sign-grid {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 22px;
  margin-top: 12px;
}
.delivery-upload-box.compact { min-width: 0; min-height: 126px; }
.delivery-sign-grid > div { display: grid; gap: 12px; }
.special-delivery-remark { margin: 14px 24px 0; }
.special-delivery-modal-panel textarea { min-height: 64px; resize: vertical; }
.special-delivery-view-tag {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  max-width: 100%;
  padding: 6px 9px;
  color: #315fd7;
  border: 1px solid #c9d6ff;
  border-radius: 8px;
  background: #eef3ff;
  white-space: nowrap;
}
.special-delivery-view-tag:hover { background: #e2eaff; border-color: #9db3fb; }
.special-delivery-view-tag span { overflow: hidden; text-overflow: ellipsis; }
.customer-special-delivery-link {
  display: block;
  width: 100%;
  box-sizing: border-box;
  max-width: 100%;
  padding: 5px 9px;
  border: 1px solid #bfd0ff;
  border-radius: 8px;
  background: #eef3ff;
  color: #315bd8;
  font: inherit;
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
}
.customer-special-delivery-link:hover {
  border-color: #7e9bf3;
  background: #e2eaff;
}
.customer-logistics-display {
  display: flex;
  align-items: center;
  width: 100%;
  box-sizing: border-box;
  max-width: 100%;
  min-height: 27px;
  padding: 2px 7px 2px 4px;
  gap: 6px;
  border: 1px solid var(--line-strong);
  border-radius: 7px;
  background: #fff;
  vertical-align: middle;
}
.customer-logistics-text-only {
  padding-right: 9px;
  padding-left: 9px;
}
.customer-logistics-number {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  color: var(--text);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.customer-logistics-copy {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  padding: 0;
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: #71809b;
  font-size: 11px;
  line-height: 1;
  cursor: pointer;
}
.customer-logistics-copy:hover {
  background: #edf3ff;
  color: #315bd8;
}
.customer-logistics-copy.copied {
  background: #e8f7ef;
  color: #147447;
}
.special-delivery-cell {
  grid-template-columns: minmax(0, 1fr) 29px;
  gap: 5px;
}
.special-delivery-row-btn {
  flex: 0 0 29px;
  display: inline-grid;
  place-items: center;
  width: 29px;
  height: 29px;
  padding: 5px;
  color: #315fd7;
  border: 1px solid #c8d6ff;
  border-radius: 7px;
  background: #eef3ff;
}
.special-delivery-row-btn:hover:not(:disabled) {
  color: #fff;
  border-color: #315fd7;
  background: #315fd7;
  box-shadow: 0 3px 8px rgba(49, 95, 215, .2);
}
.special-delivery-row-btn:disabled { opacity: .4; cursor: not-allowed; }
.special-delivery-row-btn svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.special-delivery-view-panel { width: min(720px, calc(100vw - 40px)); }
.special-delivery-view-summary {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  padding: 18px 22px;
  background: #f7f9fd;
  border-bottom: 1px solid #e4e9f2;
}
.special-delivery-view-summary span {
  display: grid;
  gap: 6px;
  color: #8793a7;
  font-size: 12px;
}
.special-delivery-view-summary strong { color: #263247; font-size: 15px; }
.special-delivery-view-details {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 22px;
  padding: 20px 22px;
}
.special-delivery-view-details > div {
  min-width: 0;
  padding: 11px 13px;
  border: 1px solid #e1e7f1;
  border-radius: 8px;
  background: #fff;
}
.special-delivery-view-details small { display: block; margin-bottom: 5px; color: #8a96aa; }
.special-delivery-view-details strong { display: block; color: #2d384b; overflow-wrap: anywhere; }
.special-delivery-view-tip {
  margin: 0 22px;
  padding: 11px 13px;
  color: #687791;
  border-radius: 8px;
  background: #f4f6fa;
}
@media (max-width: 760px) {
  .special-delivery-order-info { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .special-delivery-order-info > div { border-bottom: 1px solid #e2e8f2; }
  .special-delivery-order-info .address { grid-column: 1 / -1; }
  .special-delivery-types { grid-template-columns: repeat(3, 1fr); }
  .special-delivery-form-grid { grid-template-columns: 1fr; }
  .delivery-sign-grid { grid-template-columns: 1fr; }
  .special-delivery-view-summary,
  .special-delivery-view-details { grid-template-columns: 1fr; }
}
.customer-portal h1,
.supplier-portal h1 {
  font-size: 21px;
}
.customer-portal p,
.supplier-portal p {
  margin-top: 1px;
  font-size: 12px;
}
.portal-compact-panel {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 6px;
  margin-bottom: 6px;
  padding: 7px 9px;
}
.portal-compact-panel .panel-title {
  flex: 0 0 auto;
  margin: 0 8px 0 0;
  font-size: 14px;
  white-space: nowrap;
}
.portal-compact-panel .actions {
  margin-top: 0;
  flex: 1 1 auto;
  min-width: 0;
}
.portal-compact-panel input {
  height: 30px;
}
.portal-compact-panel button {
  height: 30px;
}
.portal-compact-panel .mini-result {
  margin: 0;
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.portal-login-strip {
  justify-content: flex-start;
  max-width: fit-content;
}
.portal-login-strip .actions {
  flex: 0 1 auto;
}
.portal-login-strip input:not([type="file"]) {
  width: 142px;
}
.portal-login-strip button {
  padding: 0 10px;
}
.date-chip,
.password-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 32px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 750;
  white-space: nowrap;
}
.date-chip input {
  width: 128px;
  height: 32px;
}
.password-chip input {
  width: 142px;
  height: 32px;
}

.password-change-panel {
  width: min(520px, calc(100vw - 32px));
}

.password-change-body {
  display: grid;
  gap: 14px;
  padding: 22px;
}

.password-change-body p {
  margin: 0;
  color: var(--muted);
  line-height: 1.65;
}

.password-change-body label {
  display: grid;
  gap: 7px;
  font-weight: 700;
}

.password-change-body input {
  width: 100%;
}

.password-state {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 4px 9px;
  background: #e8f5ee;
  color: #17603a;
  font-size: 12px;
  white-space: nowrap;
}

.password-state.must-change {
  background: #fff3d6;
  color: #8a4d00;
}
.mini-result {
  margin-top: 8px;
  color: var(--muted);
  font-size: 13px;
}
.mini-result.warn { color: var(--red); }

textarea {
  width: 100%;
  min-height: 150px;
  resize: vertical;
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 12px;
  font: inherit;
  line-height: 1.55;
}

.entry-input-panel,
.entry-import-panel {
  padding: 7px 10px;
  margin-bottom: 6px;
}
.entry-input-panel .archive-select-row {
  grid-template-columns: minmax(190px, 1fr) minmax(190px, 1fr) minmax(360px, auto);
  align-items: end;
  gap: 8px;
  margin-bottom: 5px;
}
.entry-input-panel .archive-select-row input {
  height: 28px;
  margin-top: 0;
}
.entry-input-panel .archive-select-row label {
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}
.entry-input-panel .archive-select-row label input {
  flex: 1 1 auto;
  min-width: 0;
}
.entry-inline-actions {
  display: flex;
  align-items: center;
  gap: 7px;
  white-space: nowrap;
}
.entry-parse-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
}
.entry-import-inline {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  white-space: nowrap;
}
.entry-import-inline span {
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
}
.entry-import-inline input[type="file"] {
  width: 210px;
  height: 28px;
}
.entry-input-panel #rawInput {
  min-height: 42px;
  height: 44px;
  padding: 5px 9px;
  line-height: 1.25;
  resize: vertical;
}
.entry-input-panel .actions,
.entry-import-panel .actions {
  margin-top: 0;
}
.entry-input-panel button,
.entry-import-panel button {
  height: 30px;
  padding: 0 10px;
}
.entry-import-inline button {
  height: 30px;
  padding: 0 10px;
}
.entry-import-panel {
  display: grid;
  grid-template-columns: auto minmax(340px, 1fr) auto;
  align-items: center;
  gap: 8px;
}
.entry-import-panel .panel-title {
  margin: 0;
  white-space: nowrap;
}
.entry-import-panel p {
  margin: 0;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.entry-import-panel .actions {
  margin: 0;
  flex-wrap: nowrap;
}
.entry-import-panel input[type="file"] {
  width: 240px;
  height: 30px;
}
.entry-import-panel .mini-result {
  grid-column: 1 / -1;
  margin-top: 0;
  min-height: 0;
  font-size: 12px;
}

input, select {
  height: 36px;
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 0 10px;
  font: inherit;
  background: #fff;
}

textarea:focus, input:focus, select:focus {
  outline: 2px solid var(--blue-soft);
  border-color: var(--blue);
}

button {
  height: 36px;
  border: 0;
  border-radius: 7px;
  padding: 0 13px;
  font: inherit;
  font-weight: 650;
  cursor: pointer;
}
.primary { background: var(--blue); color: #fff; }
.ghost { background: #eceff4; color: #293142; }
.danger { background: var(--red-soft); color: var(--red); }
.compact-btn {
  height: 28px;
  padding: 0 10px;
  border-radius: 6px;
  font-size: 13px;
}
.login-company {
  min-height: 30px;
  display: inline-flex;
  align-items: center;
  max-width: 360px;
  padding: 0 10px;
  border: 1px solid #b7cdfc;
  border-radius: 7px;
  background: var(--blue-soft);
  color: #1f4ed8;
  font-size: 13px;
  font-weight: 800;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.login-company.hidden {
  display: none;
}
.login-finance {
  min-height: 30px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 0 9px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: #fff;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}
.login-finance strong {
  font-size: 14px;
  color: var(--text);
}
.login-finance.balance strong { color: #047857; }
.login-finance.due strong { color: var(--primary); }
.login-finance.hidden { display: none; }

.actions, .filters, .top-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 10px;
}
.customer-create-actions {
  flex-wrap: nowrap;
  overflow-x: auto;
  padding-bottom: 2px;
}
.customer-create-actions > input {
  flex: 1 1 320px;
  min-width: 240px;
}
.customer-create-actions > select {
  flex: 0 0 118px;
}

.customer-tools-panel {
  padding: 12px 16px;
}

.customer-tools {
  display: grid;
  grid-template-columns: minmax(360px, 1fr) auto;
  gap: 12px;
  align-items: center;
}

.customer-search-box,
.customer-import-box {
  display: flex;
  gap: 8px;
  align-items: center;
  min-width: 0;
}

.customer-search-box input {
  min-width: 0;
  flex: 1;
}

.customer-import-picker {
  display: inline-flex;
  align-items: center;
  max-width: 230px;
  min-height: 38px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
  cursor: pointer;
}

.customer-import-picker span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.customer-import-picker input {
  display: none;
}

.customer-import-picker.has-file {
  border-color: var(--primary);
}

.customer-import-result {
  margin-top: 8px;
}

.customer-import-result:empty {
  display: none;
}

@media (max-width: 900px) {
  .customer-tools {
    grid-template-columns: 1fr;
  }
}
.business-license-picker,
.customer-license-upload {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  height: 36px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #f3f5f8;
  color: var(--text);
  font-size: 13px;
  font-weight: 750;
  cursor: pointer;
  white-space: nowrap;
}
.business-license-picker:hover,
.customer-license-upload:hover {
  border-color: #b9c7e8;
  background: var(--blue-soft);
  color: var(--blue);
}
.business-license-picker input,
.customer-license-upload input {
  display: none;
}
.selected-file-name {
  flex: 0 1 190px;
  max-width: 190px;
  overflow: hidden;
  color: var(--muted);
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.customer-portal .customer-search {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 6px;
  margin-bottom: 6px;
}
.customer-search-main {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1 1 auto;
  min-width: 0;
  overflow-x: auto;
  padding-bottom: 2px;
}
.customer-portal .customer-search input,
.customer-portal .customer-search button {
  height: 30px;
}
.customer-portal .customer-search input {
  width: 190px;
}
.customer-portal .customer-search .date-chip input {
  width: 124px;
}
.customer-portal .customer-search .date-chip {
  flex: 0 0 auto;
}
.top-actions { margin-top: 0; justify-content: flex-end; }
#orders .topbar {
  align-items: center;
  margin-bottom: 6px;
}
#orders .topbar h1 {
  font-size: 22px;
}
#orders .topbar p {
  margin-top: 2px;
  font-size: 12px;
}
#orders .top-actions button {
  height: 30px;
  padding: 0 10px;
}
.orders-select-all-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 68px;
}
.orders-select-all-btn[aria-pressed="true"] {
  border-color: #4f6de8;
  background: #eef3ff;
  color: #3158d5;
}
.orders-select-all-icon {
  width: 15px;
  font-size: 15px;
  line-height: 1;
}
.orders-select-all-btn:disabled {
  opacity: .5;
  cursor: not-allowed;
}
.order-edit-lockbar {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 38px;
  margin: 0 0 7px;
  padding: 5px 8px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: #fff;
  white-space: nowrap;
  overflow-x: auto;
}
.order-edit-lockbar strong {
  color: var(--red);
  font-size: 13px;
}
.order-edit-lockbar strong.unlocked {
  color: #087f5b;
}
.order-edit-lockbar .password-chip {
  height: 28px;
  padding: 0 6px;
  font-size: 12px;
}
.order-edit-lockbar .password-chip input {
  width: 150px;
  height: 26px;
  padding: 0 5px;
  border: 0;
}
.order-edit-lockbar > span {
  color: var(--muted);
  font-size: 12px;
}
.orders-table input[readonly],
.orders-table textarea[readonly],
.orders-table input:disabled,
.orders-table textarea:disabled,
.orders-table select:disabled,
.orders-table button:disabled {
  color: var(--muted);
  background: #f5f6f8;
  cursor: not-allowed;
}
.orders-table input[data-field="logistics_no"] {
  color: var(--text);
  background: #fff;
  cursor: text;
}
#orders .filters {
  flex-wrap: nowrap;
  gap: 6px;
  margin-top: 6px;
  overflow-x: auto;
  padding-bottom: 2px;
}
#orders .filters input,
#orders .filters button {
  height: 30px;
}
#orders .filters > input {
  width: 150px;
  flex: 0 0 auto;
}
#orders .filters #fQ {
  width: 220px;
}
.date-filter-label {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
}
.date-filter-label input {
  width: 128px;
}
.toggle-label {
  height: 30px;
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
  flex: 0 0 auto;
  white-space: nowrap;
}
.toggle-label input {
  width: 16px;
  height: 16px;
  padding: 0;
}
.hidden-col { display: none; }
.order-count-summary {
  min-height: 30px;
  display: flex;
  align-items: center;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}
.order-count-summary b {
  color: var(--blue);
  font-size: 17px;
  margin: 0 3px;
}
.order-category-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 8px 0 12px;
}
.order-category-summary span {
  border-radius: 999px;
  background: #eceff4;
  color: #445066;
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 700;
}
.order-category-summary b {
  color: var(--blue);
}

.field-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 8px;
  margin-top: 12px;
}
.archive-select-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(220px, 1fr));
  gap: 10px;
  margin-bottom: 12px;
}
.archive-select-row label {
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}
.archive-select-row input {
  width: 100%;
  margin-top: 5px;
}
.field-option {
  min-height: 38px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: #fff;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  font-size: 13px;
}
.field-option input {
  width: 16px;
  height: 16px;
  padding: 0;
}

.stats-search-panel {
  margin-bottom: 12px;
}
.stats-field-row,
.stats-search-row,
.stats-date-row,
.stats-total-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.stats-field-row > span,
.stats-date-row > span {
  color: var(--muted);
  font-weight: 700;
}
.stats-chip {
  height: 34px;
  border-radius: 999px;
  background: #eceff4;
  color: #445066;
  padding: 0 16px;
}
.stats-chip.active {
  background: var(--blue);
  color: #fff;
}
.stats-search-row input {
  flex: 1 1 520px;
  min-width: 260px;
}
.stats-date-row input {
  width: 150px;
}
.stats-tip {
  font-size: 13px;
  font-weight: 400 !important;
}
.stats-total-row {
  font-size: 14px;
  margin-top: 14px;
}
.stats-total-row b {
  color: var(--blue);
  font-size: 22px;
  margin: 0 2px;
}
.stats-total-row button {
  margin-left: auto;
}
.stats-list {
  display: grid;
  gap: 0;
  max-height: 360px;
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 8px;
}
.compact-stats-list {
  max-height: 220px;
}
.stats-row {
  display: grid;
  grid-template-columns: minmax(120px, 1fr) repeat(3, minmax(90px, auto));
  gap: 10px;
  align-items: center;
  border-bottom: 1px solid var(--line);
  padding: 8px 12px;
  font-size: 13px;
}
.stats-row:last-child { border-bottom: 0; }
.stats-row span {
  white-space: nowrap;
}
.stats-row b {
  color: var(--ink);
}
.stats-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 750;
}
.stats-orders-panel {
  padding: 0;
  overflow: hidden;
}
.stats-orders-panel .panel-title {
  margin: 0;
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
}
.stats-orders-wrap {
  max-height: calc(100vh - 300px);
  min-height: 260px;
  overflow: auto;
  background: #fff;
}
.stats-orders-wrap.empty {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
}
.stats-orders-table {
  min-width: 0;
  table-layout: fixed;
}
.stats-orders-table th,
.stats-orders-table td {
  white-space: nowrap;
}
.stats-orders-table th {
  position: sticky;
  top: 0;
  z-index: 1;
}
.stats-orders-table td.clip {
  overflow: hidden;
  text-overflow: ellipsis;
}
.stats-orders-table td.stats-hover-2,
.stats-orders-table td.stats-hover-3 {
  position: relative;
  overflow: visible;
  z-index: 1;
}
.stats-orders-table td.stats-hover-2:hover,
.stats-orders-table td.stats-hover-3:hover {
  z-index: 8;
}
.stats-orders-table .stats-cell-text {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.stats-orders-table td.stats-hover-2:hover .stats-cell-text,
.stats-orders-table td.stats-hover-3:hover .stats-cell-text {
  position: absolute;
  top: 3px;
  left: 4px;
  display: -webkit-box;
  width: max(100%, 240px);
  padding: 3px 6px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.16);
  line-height: 18px;
  white-space: normal;
  word-break: break-all;
  overflow: hidden;
  -webkit-box-orient: vertical;
}
.stats-orders-table td.stats-hover-2:hover .stats-cell-text {
  max-height: 42px;
  -webkit-line-clamp: 2;
}
.stats-orders-table td.stats-hover-3:hover .stats-cell-text {
  width: max(100%, 360px);
  max-height: 60px;
  -webkit-line-clamp: 3;
}
.stats-orders-table .stats-qty {
  width: 58px;
  min-width: 58px;
  max-width: 58px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.stats-orders-table .stats-price {
  width: 76px;
  min-width: 76px;
  max-width: 76px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.stats-orders-table .stats-amount {
  width: 86px;
  min-width: 86px;
  max-width: 86px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.finance-panel {
  padding: 0;
}
.finance-summary-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  padding: 8px 12px 0;
}
.finance-summary-row span {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  padding: 5px 9px;
  color: var(--muted);
  font-weight: 700;
}
.finance-summary-row b {
  color: var(--primary);
  font-size: 18px;
}
.finance-payment-actions {
  padding: 8px 12px;
  margin: 0;
}
.finance-payment-actions input,
.finance-payment-actions select {
  min-width: 120px;
}
.finance-payment-actions #paymentCustomer {
  min-width: 220px;
}
.finance-payment-actions #paymentRemark {
  min-width: 220px;
}
.funds-customer-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 34px;
  padding: 4px 12px;
  border-top: 1px solid var(--line);
}
.funds-customer-toolbar strong {
  font-size: 14px;
}
.funds-customer-toolbar input {
  width: 230px;
  height: 28px;
}
.funds-customer-toolbar span {
  color: var(--muted);
  font-size: 12px;
}
.funds-smart-sort {
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  padding: 6px 9px;
  border: 1px solid #cbdcff;
  border-radius: 7px;
  background: #f2f6ff;
  color: #315fd4 !important;
  font-weight: 750;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.funds-customer-quick-filters {
  display: flex;
  flex: 0 0 auto;
  gap: 4px;
}
.funds-customer-quick-filters button {
  height: 30px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: #fff;
  color: #4d596d;
  font-size: 12px;
  font-weight: 750;
}
.funds-customer-quick-filters button.is-active {
  border-color: var(--primary);
  background: var(--primary);
  color: #fff;
}
.fund-customer-name { vertical-align: middle; }
.fund-customer-status {
  display: inline-flex;
  align-items: center;
  height: 21px;
  margin-left: 7px;
  padding: 0 7px;
  border: 1px solid transparent;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
  vertical-align: middle;
  white-space: nowrap;
}
.fund-customer-status.pending-recharge { border-color: #ddccfa; background: #f5efff; color: #7750c7; }
.fund-customer-status.pending-payment { border-color: #ffd9b7; background: #fff5eb; color: #dc6b0a; }
.fund-customer-status.today-due { border-color: #c9dcff; background: #eff5ff; color: #3167dc; }
.fund-customer-status.history-debt { border-color: #ffd0cf; background: #fff1f0; color: #d54440; }
.fund-customer-status.prepaid-change { border-color: #bfe8dc; background: #ebfaf5; color: #087c61; }
.fund-customer-status.processed { border-color: #ccebd8; background: #edf9f1; color: #27824b; }
.finance-customers-wrap {
  max-height: 230px;
  overflow: auto;
  border-top: 1px solid var(--line);
}
.finance-customers-table {
  width: 100%;
  min-width: 1080px;
  table-layout: fixed;
}
.finance-customers-table th {
  position: sticky;
  top: 0;
  z-index: 1;
}
.finance-customers-table th:first-child { width: 22%; }
.finance-customers-table th:nth-child(2) { width: 12%; }
.finance-customers-table th:nth-child(3) { width: 9%; }
.finance-customers-table th:nth-child(4),
.finance-customers-table th:nth-child(5),
.finance-customers-table th:nth-child(6),
.finance-customers-table th:nth-child(8) { width: 10%; }
.finance-customers-table th:nth-child(7) { width: 17%; }
.finance-customers-table td,
.finance-customers-table th {
  height: 30px;
  padding: 4px 10px;
}
.finance-customers-table td.clip {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.finance-customers-table .money-value {
  font-variant-numeric: tabular-nums;
  font-weight: 750;
}
.finance-customers-table .money-value.balance { color: #047857; }
.finance-customers-table .money-value.due { color: var(--primary); }
.finance-customers-table .money-value.received { color: #07884a; }
.finance-customers-table .money-value.debt { color: var(--red); }
.debt-trigger {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--red);
  padding: 0;
  font: inherit;
  font-weight: 800;
  cursor: pointer;
  text-align: left;
}
.debt-trigger:hover,
.debt-trigger:focus-visible { text-decoration: underline; }
.debt-trigger:disabled { cursor: default; text-decoration: none; opacity: .75; }
.debt-trigger small {
  display: block;
  margin-top: 1px;
  color: #8b5b5b;
  font-size: 10px;
  font-weight: 600;
  white-space: nowrap;
}
.debt-hover-card {
  position: fixed;
  z-index: 1200;
  width: 390px;
  max-width: calc(100vw - 24px);
  padding: 12px;
  border: 1px solid #fecaca;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 18px 44px rgba(15, 23, 42, .22);
  color: #273247;
}
.debt-hover-card.hidden { display: none; }
.debt-hover-head { display: flex; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.debt-hover-head strong { font-size: 14px; }
.debt-hover-head span { color: var(--red); font-weight: 800; white-space: nowrap; }
.debt-hover-meta { margin-bottom: 8px; color: #718096; font-size: 11px; }
.debt-hover-orders { display: grid; gap: 5px; }
.debt-hover-order { display: grid; grid-template-columns: 72px minmax(0, 1fr) auto; gap: 7px; align-items: center; padding: 6px 7px; border-radius: 7px; background: #f8fafc; font-size: 11px; }
.debt-hover-order span:nth-child(2) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.debt-hover-order b { color: var(--red); }
.debt-hover-more { display: flex; align-items: center; justify-content: flex-end; gap: 8px; margin-top: 8px; color: var(--muted); font-size: 11px; }
.debt-hover-more button { border: 0; background: transparent; color: var(--primary); padding: 2px 0; font: inherit; font-weight: 800; cursor: pointer; }
.debt-hover-more button:hover,
.debt-hover-more button:focus-visible { text-decoration: underline; }
.debt-drawer { position: fixed; inset: 0; z-index: 1150; }
.debt-drawer.hidden { display: none; }
.debt-drawer-mask { position: absolute; inset: 0; background: rgba(15, 23, 42, .4); backdrop-filter: blur(2px); }
.debt-drawer-panel { position: absolute; top: 0; right: 0; bottom: 0; width: min(1120px, 92vw); display: grid; grid-template-rows: auto auto auto minmax(0, 1fr) auto; background: #fff; box-shadow: -20px 0 55px rgba(15, 23, 42, .2); }
.debt-drawer-head { display: flex; align-items: center; justify-content: space-between; gap: 15px; padding: 16px 20px; border-bottom: 1px solid var(--line); }
.debt-drawer-head > div { display: flex; align-items: baseline; gap: 10px; }
.debt-drawer-head strong { font-size: 20px; }
.debt-drawer-head span { color: var(--muted); font-size: 12px; }
.debt-drawer-summary { display: grid; grid-template-columns: repeat(5, minmax(120px, 1fr)); border-bottom: 1px solid var(--line); }
.debt-summary-item { padding: 12px 16px; border-right: 1px solid var(--line); }
.debt-summary-item:last-child { border-right: 0; }
.debt-summary-item span { display: block; color: var(--muted); font-size: 11px; }
.debt-summary-item strong { display: block; margin-top: 5px; font-size: 18px; }
.debt-summary-item.danger strong { color: var(--red); }
.debt-drawer-toolbar { display: flex; align-items: center; gap: 8px; padding: 10px 16px; border-bottom: 1px solid var(--line); background: #f8fafc; }
.debt-drawer-toolbar input { flex: 1; min-width: 180px; }
.debt-drawer-toolbar label { display: flex; align-items: center; gap: 5px; white-space: nowrap; }
.debt-drawer-body { min-height: 0; overflow: auto; }
.debt-detail-table { width: 100%; min-width: 980px; border-collapse: collapse; }
.debt-detail-table th { position: sticky; top: 0; z-index: 1; background: #f3f6fb; }
.debt-detail-table th,
.debt-detail-table td { padding: 9px 10px; border-bottom: 1px solid var(--line); text-align: left; white-space: nowrap; font-size: 12px; }
.debt-detail-table td.debt-order-product { max-width: 230px; overflow: hidden; text-overflow: ellipsis; }
.debt-detail-table .debt-money { color: var(--red); font-weight: 800; }
.debt-age { display: inline-flex; padding: 2px 7px; border-radius: 999px; background: #e8f0ff; color: #315fd3; font-weight: 700; }
.debt-age.age-8 { background: #fff7d6; color: #a16207; }
.debt-age.age-16 { background: #ffedd5; color: #c2410c; }
.debt-age.age-31 { background: #fee2e2; color: #b91c1c; }
.debt-drawer-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 16px; border-top: 1px solid var(--line); }
#debtDrawerPager { display: flex; align-items: center; gap: 6px; }
#debtDrawerPager button { min-width: 34px; height: 30px; }
@media (max-width: 760px) {
  .debt-drawer-panel { width: 100vw; }
  .debt-drawer-summary { grid-template-columns: repeat(2, 1fr); }
  .debt-drawer-toolbar { flex-wrap: wrap; }
  .debt-drawer-toolbar input { flex-basis: 100%; }
}
.finance-customers-table .fund-action-cell {
  white-space: nowrap;
}
.finance-customers-table .fund-action-cell button {
  height: 25px;
  padding: 0 9px;
  font-size: 12px;
}
.funds-ledger-title {
  padding: 7px 12px;
  border-top: 1px solid var(--line);
  font-size: 14px;
  font-weight: 750;
}
.funds-ledger-filters {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  overflow-x: auto;
  white-space: nowrap;
}
.funds-ledger-filters input,
.funds-ledger-filters select {
  flex: 0 0 auto;
  width: 145px;
  height: 28px;
  padding: 0 7px;
  font-size: 12px;
}
.funds-ledger-filters #fundsLedgerKeyword { width: 220px; }
.funds-ledger-filters #fundsLedgerCount {
  color: var(--muted);
  font-size: 12px;
}
.finance-ledger-wrap {
  max-height: 220px;
  overflow: auto;
  border-top: 1px solid var(--line);
}
#funds .topbar {
  margin-bottom: 8px;
}
.funds-finance-panel {
  margin-bottom: 0;
}
.funds-finance-panel .finance-ledger-wrap {
  max-height: 240px;
  min-height: 160px;
}
.finance-ledger-table {
  min-width: 1740px;
}
.finance-ledger-table th {
  position: sticky;
  top: 0;
  z-index: 1;
}
.finance-ledger-table td.clip {
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.finance-ledger-table td,
.finance-ledger-table th {
  height: 30px;
  padding: 4px 8px;
  white-space: nowrap;
}
.finance-ledger-table th:first-child { min-width: 132px; }
.finance-ledger-table th:nth-child(2) { min-width: 180px; }
.finance-ledger-table th:nth-child(3) { min-width: 110px; }
.finance-ledger-table th:nth-child(11) { min-width: 150px; }
.finance-ledger-table th:nth-child(12) { min-width: 150px; }
.finance-ledger-table th:last-child { min-width: 180px; }
.receipt-view-btn {
  height: 24px;
  padding: 0 8px;
  font-size: 12px;
}
.finance-amount.in {
  color: #047857;
  font-weight: 800;
}
.finance-amount.out {
  color: #dc2626;
  font-weight: 800;
}
.money-cell,
.payment-status-cell {
  white-space: nowrap;
  font-weight: 750;
}
mark {
  background: #fff2a8;
  color: inherit;
  padding: 0 2px;
  border-radius: 2px;
}

.customer-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 8px;
  margin-top: 12px;
}
.customer-summary div {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  padding: 10px 12px;
}
.customer-summary span {
  display: block;
  color: var(--muted);
  font-size: 12px;
}
.customer-summary strong {
  display: block;
  margin-top: 3px;
  font-size: 20px;
}

.metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(140px, 1fr));
  gap: 12px;
  margin-bottom: 14px;
}
.metrics div {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 14px;
}
.metrics span { display: block; color: var(--muted); font-size: 13px; }
.metrics strong { display: block; font-size: 28px; margin-top: 6px; }

.list {
  display: grid;
  gap: 8px;
}
.entry-result-panel {
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - 168px);
  min-height: 0;
  margin-bottom: 0;
}
.entry-result-panel .list {
  flex: 1 1 auto;
  display: block;
  min-height: 0;
  max-height: calc(100vh - 205px);
  overflow: auto;
  padding-right: 0;
}
.entry-result-panel .list.empty {
  min-height: 150px;
  align-content: center;
}
.portal-orders-table.entry-result-table th,
.portal-orders-table.entry-result-table td {
  height: 24px;
  padding: 2px 5px;
  line-height: 1.1;
  vertical-align: middle;
}
.portal-orders-table.entry-result-table {
  height: auto;
  table-layout: fixed;
}
.portal-orders-table.entry-result-table tr {
  height: 24px;
}
.entry-result-table tr.warn td {
  background: #fffafa;
}
.entry-result-table td {
  max-width: 0;
  overflow: hidden;
  white-space: normal;
  cursor: text;
}
.entry-result-table .entry-edit-input {
  width: 100%;
  min-width: 0;
  height: 22px;
  border: 1px solid transparent;
  border-radius: 5px;
  padding: 0 4px;
  background: transparent;
  color: var(--text);
  font: inherit;
  line-height: 20px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.entry-result-table .entry-edit-input:hover,
.entry-result-table .entry-edit-input:focus {
  border-color: var(--line);
  background: #fff;
  outline: none;
}
.entry-result-table .entry-edit-input.saving {
  background: #eef4ff;
}
.entry-result-table .entry-edit-select {
  padding-right: 18px;
}
.entry-result-table .entry-row-check {
  width: 18px;
  height: 18px;
  min-width: 18px;
}
.entry-result-table .entry-delete-btn {
  height: 22px;
  min-height: 22px;
  padding: 0 6px;
  border-radius: 5px;
  font-size: 12px;
  line-height: 20px;
  white-space: nowrap;
}
.entry-result-table .cell-text {
  display: block;
  min-height: 16px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.entry-result-table td.expand-on-hover:hover {
  background: #fff;
  overflow: visible;
  position: relative;
  z-index: 15;
}
.entry-result-table tr.warn td.expand-on-hover:hover {
  background: #fffafa;
}
.entry-result-table .entry-hover-wrap {
  position: relative;
  display: block;
  width: 100%;
  min-width: 0;
}
.entry-floating-preview {
  display: none;
  position: fixed;
  z-index: 99999;
  padding: 5px 7px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
  box-shadow: 0 5px 14px rgba(31, 42, 68, 0.16);
  color: var(--text);
  font-size: 13px;
  text-align: left;
  pointer-events: none;
  overflow: hidden;
  word-break: break-all;
  white-space: normal;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-height: 1.2;
  max-height: 42px;
}
.entry-floating-preview.show {
  display: -webkit-box;
}
.entry-floating-preview.address {
  -webkit-line-clamp: 3;
  max-height: 58px;
}
.entry-result-panel .order-card {
  padding: 5px 8px;
  border-radius: 7px;
}
.entry-result-panel .compact-row {
  min-height: 34px;
  grid-template-columns: minmax(160px, 210px) minmax(0, 1fr);
}
.entry-result-panel .row-no {
  font-size: 13px;
}
.entry-result-panel .tag {
  padding: 1px 7px;
  font-size: 11px;
}
.entry-result-panel .row-cells {
  gap: 10px;
}
.entry-result-panel .row-cell {
  font-size: 12px;
  line-height: 1.2;
}
.order-card, .customer-card {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 8px 10px;
  background: #fff;
}
.order-card.warn { border-color: #f2b6ae; background: #fffafa; }
.compact-row {
  display: grid;
  grid-template-columns: minmax(190px, 230px) minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  min-height: 44px;
}
.row-main {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.row-no {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 15px;
  font-weight: 800;
}
.row-cells {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
  overflow: hidden;
  padding-bottom: 2px;
}
.row-cell {
  flex: 0 0 auto;
  max-width: 150px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--ink);
  font-size: 13px;
  line-height: 1.35;
}
.row-cell.wide {
  max-width: 280px;
}
.row-cell b {
  color: var(--muted);
  font-weight: 650;
}
.order-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
  font-weight: 700;
}
.tag {
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--blue-soft);
  color: var(--blue);
  font-size: 12px;
}
.tag.warn { background: var(--red-soft); color: var(--red); }
.meta {
  display: grid;
  grid-template-columns: repeat(4, minmax(120px, 1fr));
  gap: 8px;
  font-size: 13px;
}
.meta span { color: var(--muted); }
.meta .wide { grid-column: 1 / -1; }

.tablewrap {
  overflow: auto;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  max-height: calc(100vh - 145px);
}
table {
  border-collapse: collapse;
  width: 100%;
  min-width: 1680px;
  font-size: 12px;
}
.customer-table {
  width: 100%;
  min-width: 1230px;
  table-layout: fixed;
}
.customer-table th,
.customer-table td {
  padding: 4px 6px;
  vertical-align: middle;
}
.customer-table th:nth-child(1) { width: 210px; }
.customer-table th:nth-child(2) { width: 110px; }
.customer-table th:nth-child(3) { width: 100px; }
.customer-table th:nth-child(4) { width: 105px; }
.customer-table th:nth-child(5),
.customer-table th:nth-child(6),
.customer-table th:nth-child(7),
.customer-table th:nth-child(8) { width: 100px; }
.customer-table th:nth-child(9) { width: 130px; }
.customer-table th:nth-child(10) { width: 90px; }
.customer-table th:nth-child(11) { width: 150px; }
.customer-table th:nth-child(12) { width: 190px; }
.customer-license-cell {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 44px;
  white-space: nowrap;
}
.customer-license-thumb {
  width: 54px;
  height: 36px;
  border: 1px solid var(--line);
  border-radius: 4px;
  object-fit: cover;
  background: #f3f5f8;
  cursor: zoom-in;
}
.customer-license-upload {
  height: 28px;
  padding: 0 8px;
  font-size: 12px;
}
.customer-license-empty {
  color: var(--muted);
  font-size: 12px;
}
.orders-table {
  min-width: 0;
  width: var(--orders-table-width, 100%);
  table-layout: fixed;
}
.orders-table th,
.orders-table td {
  padding: 3px 5px;
  vertical-align: middle;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.orders-table .order-expand-cell {
  position: relative;
  overflow: visible;
  z-index: 2;
}
.orders-table .order-expand-cell:hover,
.orders-table .order-expand-cell:focus-within {
  z-index: 20;
}
.orders-table th {
  height: 26px;
}
.orders-table td input,
.orders-table td select,
.orders-table td textarea {
  height: 26px;
  min-height: 26px;
  padding: 0 7px;
  border-radius: 6px;
  font-size: 12px;
}
.orders-table input[type="number"] {
  appearance: textfield;
  -moz-appearance: textfield;
}
.orders-table input[type="number"]::-webkit-inner-spin-button,
.orders-table input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.orders-table td textarea.order-expand-input {
  display: block;
  width: 100%;
  resize: none;
  overflow: hidden;
  line-height: 18px;
  padding-top: 3px;
  padding-bottom: 3px;
  white-space: pre-wrap;
  word-break: break-all;
  cursor: text;
}
.orders-table td textarea.order-expand-input.expanded {
  overflow: auto;
  position: absolute;
  left: 5px;
  top: 3px;
  width: max(100%, 220px);
  max-height: 62px;
  z-index: 30;
  background: #fff;
  box-shadow: 0 8px 20px rgba(15, 23, 42, .16);
}
.orders-table td.addr textarea.order-expand-input.expanded {
  width: max(100%, 360px);
}
.supplier-orders-table {
  min-width: 0;
  width: var(--supplier-table-width, 100%);
  table-layout: fixed;
}
.supplier-orders-table th,
.supplier-orders-table td {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.supplier-orders-table .clip {
  max-width: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.supplier-orders-table input {
  min-width: 0;
}
th, td {
  border-bottom: 1px solid var(--line);
  padding: 5px 7px;
  text-align: left;
  vertical-align: top;
}
th {
  background: #f8fafc;
  position: sticky;
  top: 0;
  z-index: 1;
}
td input, td select {
  width: 100%;
  height: 28px;
  font-size: 12px;
}
td input {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.locked-field {
  background: #f3f5f8;
  color: #293142;
  cursor: default;
}
.row-actions {
  display: flex;
  gap: 6px;
  align-items: center;
  white-space: nowrap;
}
.order-no-cell {
  max-width: 170px;
}
.order-no-cell span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
  font-weight: 750;
}
.inline-inputs {
  display: grid;
  grid-template-columns: minmax(90px, 1fr) minmax(120px, 1fr);
  gap: 6px;
  align-items: center;
}
.logistics-cell {
  display: grid;
  grid-template-columns: minmax(150px, 1fr) 24px 29px;
  gap: 4px;
  align-items: center;
  min-width: 0;
  white-space: nowrap;
}
.logistics-input-shell {
  display: flex;
  align-items: center;
  width: 100%;
  min-width: 0;
  height: 28px;
  padding-left: 4px;
  border: 1px solid var(--line-strong);
  border-radius: 7px;
  background: #fff;
  overflow: hidden;
}
.logistics-input-shell:focus-within {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(52, 89, 220, .12);
}
.logistics-company-chip {
  flex: 0 0 auto;
  min-width: 34px;
  max-width: 38px;
  padding: 2px 4px;
  border-radius: 5px;
  background: #edf3ff;
  color: #315bd8;
  font-size: 10px;
  font-weight: 800;
  line-height: 18px;
  text-align: center;
  overflow: hidden;
  white-space: nowrap;
}
.logistics-input-shell > input[data-field="logistics_no"] {
  width: 100%;
  min-width: 0;
  height: 26px;
  padding: 2px 6px;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: transparent;
}
.logistics-input-shell > input[data-field="logistics_no"]:focus {
  outline: 0;
  box-shadow: none;
}
.tiny-btn {
  width: 24px;
  height: 24px;
  padding: 0;
  border-radius: 6px;
  background: var(--blue-soft);
  color: var(--blue);
  font-weight: 900;
}
.addr { max-width: none; white-space: normal; }

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

.hidden { display: none !important; }
.customer-result { margin-top: 14px; }
.customer-portal .customer-result,
.supplier-portal .supplier-orders-wrap {
  margin-top: 6px;
}
.customer-portal #customerResult:not(.empty) {
  max-height: calc(100vh - 214px);
  overflow: auto;
  padding: 0;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
}
.portal-orders-table {
  width: var(--portal-table-width, 100%);
  min-width: 0;
  table-layout: fixed;
  border-collapse: collapse;
  font-size: 12px;
}
.portal-orders-table th,
.portal-orders-table td,
.supplier-orders-table th,
.supplier-orders-table td {
  height: 26px;
  padding: 3px 6px;
  line-height: 1.15;
  vertical-align: middle;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.portal-orders-table th,
.supplier-orders-table th {
  font-weight: 800;
}
.portal-orders-table td,
.supplier-orders-table td {
  max-width: 0;
}
.supplier-orders-table input {
  height: 24px;
  padding: 0 6px;
  font-size: 12px;
}
.supplier-orders-table button {
  height: 24px;
  padding: 0 8px;
  font-size: 12px;
}
.supplier-portal .supplier-orders-wrap {
  overflow: auto;
  max-height: calc(100vh - 232px);
}
.customer-result-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 30px;
  margin: 2px 0 4px;
}
.customer-portal .customer-summary,
.supplier-portal .customer-summary {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: nowrap;
  margin-top: 4px;
  margin-bottom: 4px;
  overflow-x: auto;
  padding-bottom: 2px;
}
.customer-portal .customer-summary {
  justify-content: flex-end;
  flex: 1 1 auto;
}
.supplier-portal .customer-summary {
  justify-content: flex-start;
}
.customer-portal .customer-summary div,
.supplier-portal .customer-summary div {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  height: 28px;
  padding: 0 10px;
  border-radius: 7px;
}
.customer-portal .customer-summary span,
.supplier-portal .customer-summary span {
  display: inline;
  font-size: 12px;
  line-height: 1;
}
.customer-portal .customer-summary strong,
.supplier-portal .customer-summary strong {
  display: inline;
  margin: 0;
  font-size: 16px;
  line-height: 1;
}
.customer-result-actions {
  display: flex;
  justify-content: flex-start;
  gap: 8px;
  flex: 0 0 auto;
  margin: 0;
}
.customer-result-actions button {
  height: 30px;
  padding: 0 10px;
  font-size: 13px;
}
.customer-result-actions .customer-order-view-switch {
  height: 30px;
}
.customer-order-select-all {
  display: inline-flex;
  height: 30px;
  align-items: center;
  gap: 6px;
  padding: 0 10px;
  border: 1px solid #d5ddeb;
  border-radius: 8px;
  background: #fff;
  color: #4b5870;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}
.customer-order-select-all input,
.customer-order-select-cell input,
.customer-order-card-select input {
  width: 16px;
  height: 16px;
  accent-color: #3f61df;
  cursor: pointer;
}
.customer-orders-table .customer-order-select-column { width: 42px; }
.customer-orders-table .customer-order-select-cell {
  width: 42px;
  min-width: 42px;
  padding-right: 6px;
  padding-left: 10px;
  text-align: center;
}
.customer-order-card { position: relative; }
.customer-order-card-select {
  position: absolute;
  z-index: 3;
  top: 16px;
  left: 16px;
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border: 1px solid #d7deeb;
  border-radius: 8px;
  background: rgba(255, 255, 255, .95);
  box-shadow: 0 3px 10px rgba(31, 50, 94, .08);
}
.customer-order-card.is-selected {
  border-color: #6e88ed;
  box-shadow: 0 0 0 2px rgba(63, 97, 223, .12);
}
.project-invite-list-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.h5-invite-tools {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  min-width: 0;
}
.h5-invite-tools input,
.h5-invite-tools select,
.h5-invite-tools button {
  height: 32px;
  min-width: 0;
  font-size: 12px;
}
.h5-invite-tools input { width: 190px; }
.project-invite-list {
  max-height: 450px;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.h5-invite-pager {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 7px;
  min-height: 38px;
  padding-top: 8px;
  color: #71809a;
  font-size: 12px;
}
.h5-invite-pager button,
.h5-invite-pager select {
  height: 30px;
  padding: 0 9px;
  border: 1px solid #d8dfeb;
  border-radius: 7px;
  background: #fff;
}
.h5-invite-pager button:disabled { cursor: not-allowed; opacity: .45; }
@media (max-width: 760px) {
  .project-invite-list-head { align-items: stretch; flex-direction: column; }
  .h5-invite-tools { justify-content: flex-start; flex-wrap: wrap; }
  .h5-invite-tools input { width: 100%; }
}

.toast {
  position: fixed;
  z-index: 3000;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%);
  background: #1f2937;
  color: #fff;
  padding: 10px 18px;
  border-radius: 999px;
  opacity: 0;
  pointer-events: none;
  transition: .18s ease;
}
.toast.show { opacity: 1; }

.modal {
  position: fixed;
  inset: 0;
  background: rgba(17, 24, 39, .55);
  z-index: 8;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 18px;
}
.modal.hidden { display: none; }
.modal-panel {
  width: min(1120px, 96vw);
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 16px 50px rgba(0,0,0,.24);
  overflow: hidden;
}
.modal-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
}
.modal-bar > div { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.payment-modal-panel {
  width: min(920px, 96vw);
  margin-top: 4vh;
}
.payment-modal-panel.is-reviewing {
  width: min(720px, 92vw);
  max-height: calc(100vh - 64px);
  margin-top: 0;
  overflow-y: auto;
  border-radius: 14px;
}
.payment-modal-panel.is-reviewing .modal-bar { padding: 8px 10px; }
.payment-modal-panel.is-reviewing .payment-modal-heading > strong { font-size: 15px; }
.payment-modal-panel.is-reviewing .payment-modal-heading > span { font-size: 11px; }
.payment-modal-panel.is-reviewing .payment-review-header-status { padding: 5px 8px; font-size: 11px; }
.payment-modal-heading { display: flex; flex-direction: column; gap: 3px; }
.payment-modal-heading > strong { font-size: 18px; }
.payment-modal-heading > span { color: var(--muted); font-size: 12px; font-weight: 600; }
.payment-modal-head-actions { display: flex; align-items: center; gap: 9px; }
.payment-review-header-status {
  padding: 7px 11px;
  border: 1px solid #ffd7a9;
  border-radius: 7px;
  background: #fff8ed;
  color: #c56b08;
  font-size: 12px;
  font-weight: 800;
}
.payment-modal-panel.is-reviewing .payment-customer-summary,
.payment-modal-panel.is-reviewing .payment-smart-hint,
.payment-modal-panel.is-reviewing .payment-form-grid { display: none; }
.customer-license-modal-panel {
  width: min(920px, 94vw);
  margin-top: 2vh;
  border-radius: 8px;
}
.customer-license-preview-area {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 260px;
  max-height: 80vh;
  padding: 12px;
  overflow: auto;
  background: #eef1f5;
}
.customer-license-preview-area img {
  display: block;
  max-width: 100%;
  max-height: calc(80vh - 52px);
  object-fit: contain;
  background: #fff;
}
.payment-customer-summary {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr 1fr 1fr;
  gap: 0;
  border-bottom: 1px solid var(--line);
}
.payment-customer-summary span {
  min-width: 0;
  padding: 9px 10px;
  border-right: 1px solid var(--line);
  color: var(--muted);
  font-size: 12px;
}
.payment-customer-summary span:last-child { border-right: 0; }
.payment-customer-summary strong {
  display: block;
  margin-top: 3px;
  overflow: hidden;
  color: var(--text);
  font-size: 14px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.payment-smart-hint {
  margin: 12px 14px 0;
  padding: 9px 12px;
  border: 1px solid #c8d8ff;
  border-radius: 7px;
  color: #3159c8;
  background: #f3f7ff;
  font-size: 12px;
  font-weight: 700;
}
.payment-form-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  padding: 14px;
}
.payment-form-grid label {
  display: flex;
  flex-direction: column;
  gap: 5px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}
.payment-form-grid input,
.payment-form-grid select {
  width: 100%;
  height: 36px;
}
.payment-form-grid input[readonly] {
  color: var(--text);
  background: #f3f5f8;
}
.payment-receipt-field { grid-column: span 1; }
.payment-receipt-field input { padding: 5px 8px; }
.payment-receipt-field { position: relative; }
.payment-receipt-hover-preview {
  position: absolute;
  right: calc(100% + 16px);
  left: auto;
  top: -112px;
  z-index: 30;
  display: none;
  width: min(340px, 68vw);
  padding: 8px;
  border: 1px solid #bfd0fa;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 18px 44px rgba(22, 37, 72, .24);
  color: #25324a;
}
.payment-receipt-field:hover .payment-receipt-hover-preview:not(.hidden),
.payment-receipt-field:focus-within .payment-receipt-hover-preview:not(.hidden) { display: grid; gap: 6px; }
.payment-receipt-hover-preview img { display: block; width: 100%; max-height: 175px; object-fit: contain; border-radius: 6px; background: #f5f7fb; }
.payment-receipt-hover-preview em { color: #3159c8; font-size: 13px; font-style: normal; font-weight: 800; text-align: center; }
.payment-receipt-hover-preview em { overflow-wrap: anywhere; }
.payment-receipt-hover-preview small { color: var(--muted); font-size: 11px; font-weight: 600; text-align: center; }
.payment-remark-field { grid-column: 1 / -1; }
.payment-modal-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 14px 14px;
}
.payment-review-footer-actions { display: flex; align-items: center; gap: 8px; }
.payment-modal-panel:not(.is-reviewing) .payment-review-footer-actions #paymentNotReceivedBtn,
.payment-modal-panel:not(.is-reviewing) .payment-review-footer-actions #paymentReturnBtn { display: none; }
.payment-modal-panel.is-reviewing .payment-modal-actions {
  position: sticky;
  bottom: 0;
  z-index: 3;
  padding: 9px 12px;
  border-top: 1px solid var(--line);
  background: rgba(255, 255, 255, .97);
  box-shadow: 0 -8px 20px rgba(32, 48, 86, .05);
}
.payment-modal-actions span {
  color: var(--muted);
  font-size: 12px;
}
.payment-modal-actions button { flex: 0 0 auto; }
.payment-review-panel {
  display: grid;
  gap: 7px;
  margin: 0;
  padding: 8px;
  background: #f7f9fc;
}
.payment-review-panel.hidden { display: none; }
.payment-review-panel span { color: var(--muted); font-size: 12px; }
.payment-review-panel label { display: flex; flex-direction: column; gap: 5px; color: var(--muted); font-size: 12px; font-weight: 700; }
.payment-review-panel input { height: 36px; }
.payment-review-sheet {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px !important;
}
.payment-review-sheet > span {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  min-height: 52px;
  padding: 7px 9px;
  border: 1px solid #dfe6f2;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 3px 10px rgba(34, 57, 101, .035);
}
.payment-review-sheet > span i { color: var(--muted); font-size: 12px; font-style: normal; }
.payment-review-sheet > span strong {
  color: #1f2a44;
  font-size: 13px;
}
.payment-review-sheet .review-amount { border-color: #cbd9ff; background: #fbfcff; }
#paymentReviewAmount { color: #2458db; font-size: 18px; white-space: nowrap; }
.payment-review-main { display: grid; grid-template-columns: minmax(185px, .5fr) minmax(0, 1.1fr); gap: 7px; }
.payment-review-card { border: 1px solid #dfe6f2; border-radius: 11px; background: #fff; }
.payment-review-card h3 {
  margin: 0;
  padding: 8px 10px;
  color: #25324a;
  font-size: 14px;
}
.payment-review-card h3::before { content: ""; display: inline-block; width: 3px; height: 14px; margin-right: 8px; border-radius: 3px; background: #3765df; vertical-align: -2px; }
.payment-review-details dl { margin: 0; padding: 0 9px 6px; }
.payment-review-details dl > div { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 6px; padding: 6px 2px; border-top: 1px solid #edf1f7; }
.payment-review-details dt { color: var(--muted); font-size: 12px; }
.payment-review-details dd { margin: 0; color: #25324a; font-size: 13px; font-weight: 750; text-align: right; overflow-wrap: anywhere; }
#paymentReviewSubmittedAt {
  font-size: 11px;
  letter-spacing: -0.2px;
  white-space: nowrap;
  overflow-wrap: normal;
}
.payment-review-receipt-card { padding-bottom: 8px; }
.payment-review-receipt-preview { display: flex; align-items: center; justify-content: center; height: clamp(125px, 20vh, 165px); margin: 0 7px 5px; overflow: hidden; border: 1px dashed #cfd8e8; border-radius: 9px; background: #f8fafc; color: var(--muted); }
.payment-review-receipt-preview img { width: 100%; height: 100%; object-fit: contain; background: #fff; }
.payment-review-receipt-meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0 11px; }
.payment-review-receipt-meta small { min-width: 0; overflow: hidden; color: var(--muted); text-overflow: ellipsis; white-space: nowrap; }
.payment-review-audit { display: grid; grid-template-columns: minmax(190px, .6fr) minmax(0, 1.4fr); align-items: end; gap: 6px; padding: 0 9px 8px; }
.payment-review-audit h3 { grid-column: 1 / -1; margin: 0 -9px; }
.payment-review-check { flex-direction: row !important; align-items: center; color: #1f2a44 !important; font-size: 13px !important; }
.payment-review-check input { width: 18px; height: 18px; }
.payment-review-note-error {
  color: #d9363e !important;
  font-size: 12px !important;
  font-weight: 750;
}
.payment-review-audit input:focus {
  border-color: #4b70e2;
  box-shadow: 0 0 0 3px rgba(55, 101, 223, .12);
}
.payment-receipt-viewer-panel {
  width: min(1380px, 96vw);
  height: min(900px, 94vh);
  margin-top: 0;
  display: flex;
  flex-direction: column;
  border-radius: 14px;
}
.payment-receipt-viewer-body {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: auto;
  padding: 14px;
  background: #e9edf4;
  color: var(--muted);
}
.payment-receipt-viewer-body img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  background: #fff;
  box-shadow: 0 8px 30px rgba(20, 35, 68, .16);
}
.payment-receipt-viewer-body iframe {
  width: 100%;
  height: 100%;
  border: 0;
  background: #fff;
}
.role-access-panel {
  padding: 12px;
}
.role-access-panel > p {
  margin: 0 0 10px;
  color: var(--muted);
  font-size: 13px;
}
.role-create-row,
.system-user-create-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}
.role-create-row input { width: min(360px, 100%); }
.system-user-create-row input { min-width: 140px; }
.system-user-create-row input,
.system-user-create-row select { flex: 1 1 160px; }
.system-user-create-row button { flex: 0 0 auto; }
.settings-divider {
  height: 1px;
  margin: 14px 0;
  background: var(--line);
}
.role-access-wrap {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: 6px;
}
.role-access-table {
  width: 100%;
  min-width: 920px;
  table-layout: fixed;
  border-collapse: collapse;
}
.role-access-table th,
.role-access-table td {
  padding: 9px 10px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: middle;
}
.role-access-table tr:last-child td { border-bottom: 0; }
.role-access-table th:nth-child(1) { width: 130px; }
.role-access-table th:nth-child(2) { width: 72px; }
.role-access-table th:nth-child(4) { width: 72px; }
.role-access-table input:not([type="checkbox"]) {
  width: 100%;
  height: 34px;
}
.role-permission-options {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
}
.role-permission-option {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 26px;
  white-space: nowrap;
}
.role-permission-option input {
  width: 16px;
  height: 16px;
}
.system-user-table {
  width: 100%;
  min-width: 900px;
  table-layout: fixed;
  border-collapse: collapse;
}
.system-user-table th,
.system-user-table td {
  padding: 8px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: middle;
}
.system-user-table tr:last-child td { border-bottom: 0; }
.system-user-table th:nth-child(4) { width: 150px; }
.system-user-table th:nth-child(5) { width: 90px; }
.system-user-table th:nth-child(6) { width: 72px; }
.system-user-table input,
.system-user-table select {
  width: 100%;
  height: 34px;
}
@media (max-width: 760px) {
  .payment-receipt-hover-preview { right: auto; left: 0; top: calc(100% + 8px); width: 100%; }
  .payment-customer-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .payment-form-grid { grid-template-columns: 1fr; }
  .payment-review-sheet { grid-template-columns: 1fr 1fr; }
  .payment-review-main { grid-template-columns: 1fr; }
  .payment-review-audit { grid-template-columns: 1fr; }
  .payment-review-audit h3 { grid-column: 1; }
  .payment-modal-panel.is-reviewing .payment-modal-actions { align-items: flex-start; flex-direction: column; }
  .payment-review-footer-actions { width: 100%; justify-content: flex-end; flex-wrap: wrap; }
  .payment-receipt-field,
  .payment-remark-field { grid-column: auto; }
  .role-create-row,
  .system-user-create-row { flex-wrap: wrap; }
}
.doc-scroll {
  max-height: 78vh;
  overflow: auto;
  background: #f1f3f7;
  padding: 18px;
}
.doc-paper {
  width: 1000px;
  min-height: 0;
  background: #fff;
  color: #000;
  margin: 0 auto;
  padding: 22px;
  border: 1px solid #cfd4dc;
  font-family: "Microsoft YaHei", "PingFang SC", sans-serif;
}
.doc-company {
  text-align: center;
  font-size: 25px;
  font-weight: 800;
  letter-spacing: 2px;
  color: #b91c1c;
  margin-bottom: 3px;
}
.doc-subtitle {
  text-align: center;
  color: #b91c1c;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: .5px;
}
.doc-red-rule {
  height: 5px;
  margin: 8px 0 10px;
  border-top: 2px solid #b91c1c;
  border-bottom: 1px solid #b91c1c;
}
.doc-head {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  border: 1px solid #333;
  border-bottom: 0;
}
.doc-head-official {
  grid-template-columns: 1fr 2fr 1.25fr;
  border-top: 0;
}
.doc-head div {
  padding: 9px 10px;
  border-right: 1px solid #333;
}
.doc-head div:last-child { border-right: 0; }
.doc-head .title {
  text-align: center;
  font-size: 18px;
  font-weight: 800;
}
.doc-table {
  width: 100%;
  min-width: 0;
  border-collapse: collapse;
  font-size: 13px;
}
.doc-table th, .doc-table td {
  border: 1px solid #333;
  padding: 8px 9px;
  white-space: normal;
  color: #000;
}
.doc-table th {
  background: #f4f6fb;
  position: static;
  text-align: center;
}
.doc-table .left { text-align: left; }
.doc-total,
.doc-total-label,
.doc-total-amount,
.doc-total-uppercase {
  text-align: right;
  font-weight: 800;
}
.doc-total-label {
  text-align: center;
  font-size: 16px;
}
.doc-total-amount {
  text-align: center;
  font-size: 18px;
}
.doc-total-uppercase {
  text-align: center;
  font-size: 14px;
}
.doc-note {
  border: 1px solid #333;
  border-top: 0;
  min-height: 42px;
  padding: 10px;
}

/* Modern official sales document */
.sales-doc-paper {
  width: 1120px;
  padding: 34px 38px 30px;
  border: 0;
  border-radius: 14px;
  box-shadow: 0 14px 34px rgba(31, 41, 55, .13);
  color: #1d232d;
}
.sales-doc-brand {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
}
.sales-doc-logo {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 13px;
  background: linear-gradient(145deg, #d62832, #a90f1b);
  color: #fff;
  font-size: 29px;
  font-weight: 900;
  box-shadow: 0 7px 16px rgba(185, 28, 28, .2);
}
.sales-doc-company {
  font-size: 24px;
  line-height: 1.2;
  font-weight: 850;
  letter-spacing: .3px;
}
.sales-doc-subtitle {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 8px;
  color: #9aa0aa;
  font-size: 12px;
  letter-spacing: 1px;
}
.sales-doc-subtitle b { color: #c51e29; font-size: 14px; letter-spacing: 2px; }
.sales-doc-print-meta {
  display: grid;
  gap: 8px;
  text-align: right;
  color: #8b929c;
  font-size: 12px;
}
.sales-doc-print-meta b { color: #20252d; font-size: 13px; }
.sales-doc-red-rule {
  height: 3px;
  margin: 20px 0 22px;
  background: linear-gradient(90deg, #b71621 0%, #d7565e 70%, rgba(215, 86, 94, 0) 100%);
}
.sales-doc-meta {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 14px;
  margin-bottom: 22px;
}
.sales-doc-meta > div {
  display: grid;
  gap: 8px;
  min-width: 0;
  padding: 15px 18px;
  border: 1px solid #e5e1dd;
  border-radius: 11px;
  background: #fbfaf9;
}
.sales-doc-meta span { color: #9298a2; font-size: 12px; letter-spacing: .6px; }
.sales-doc-meta strong { overflow: hidden; text-overflow: ellipsis; font-size: 16px; white-space: nowrap; }
.sales-doc-table-wrap {
  overflow: hidden;
  border: 1px solid #e6e1dc;
  border-radius: 11px;
}
.sales-doc-table { table-layout: fixed; font-size: 12px; }
.sales-doc-table th,
.sales-doc-table td {
  border: 0;
  border-bottom: 1px solid #ece8e4;
  padding: 16px 10px;
  vertical-align: top;
}
.sales-doc-table th {
  background: #f5f2ef;
  color: #424852;
  font-weight: 750;
}
.sales-doc-table tbody tr:last-child td { border-bottom: 0; }
.sales-doc-table th:nth-child(1) { width: 48px; }
.sales-doc-table th:nth-child(2) { width: 120px; }
.sales-doc-table th:nth-child(3) { width: 105px; }
.sales-doc-table th:nth-child(4) { width: 130px; }
.sales-doc-table th:nth-child(5) { width: 48px; }
.sales-doc-table th:nth-child(6) { width: 68px; }
.sales-doc-table th:nth-child(7) { width: 78px; }
.sales-doc-table td { text-align: center; }
.sales-doc-table td.sales-doc-index { color: #929aa4; font-size: 14px; }
.sales-doc-table td.sales-doc-customer,
.sales-doc-table td.sales-doc-product,
.sales-doc-table td.sales-doc-model,
.sales-doc-table td.sales-doc-recipient { text-align: left; }
.sales-doc-customer,
.sales-doc-product,
.sales-doc-money { font-weight: 750; }
.sales-doc-recipient strong { color: #262b33; }
.sales-doc-recipient b { margin-left: 6px; color: #c5242f; letter-spacing: .6px; }
.sales-doc-recipient p { margin: 7px 0 0; color: #69717d; line-height: 1.55; }
.sales-doc-summary {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 30px;
  margin-top: 18px;
  padding: 18px 24px;
  border: 1px solid #f2cbce;
  border-radius: 11px;
  background: #fff7f7;
  color: #8b929c;
  font-size: 13px;
}
.sales-doc-summary-count b { margin-left: 6px; color: #20252d; font-size: 18px; }
.sales-doc-summary-money strong { margin-left: 8px; color: #bd1d28; font-size: 29px; letter-spacing: 1px; }
.sales-doc-summary-uppercase { color: #3f454e; text-align: right; }
.sales-doc-summary-uppercase b { color: #bd1d28; }
.sales-doc-footer {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin-top: 22px;
  padding-top: 20px;
  border-top: 1px dashed #e4dfda;
  font-size: 13px;
}
.sales-doc-footer > div:last-child { text-align: center; }
.sales-doc-footer span {
  display: inline-block;
  width: 150px;
  margin-left: 8px;
  border-bottom: 1px solid #cfd3d8;
}
.purchase-doc-paper .sales-doc-logo {
  background: linear-gradient(145deg, #4f6df0, #304bd0);
  box-shadow: 0 7px 16px rgba(63, 91, 222, .22);
}
.purchase-doc-paper .sales-doc-subtitle b,
.purchase-doc-paper .sales-doc-recipient b,
.purchase-doc-paper .sales-doc-summary-uppercase b { color: #365bd7; }
.purchase-doc-paper .sales-doc-red-rule {
  background: linear-gradient(90deg, #3f5fe5 0%, #7890f0 70%, rgba(120, 144, 240, 0) 100%);
}
.purchase-doc-paper .sales-doc-table th { background: #f1f4fc; }
.purchase-doc-paper .sales-doc-summary {
  border-color: #ccd7ff;
  background: #f6f8ff;
}
.purchase-doc-paper .sales-doc-summary-money strong { color: #3157d7; }
.purchase-doc-table th:nth-child(1) { width: 48px; }
.purchase-doc-table th:nth-child(2) { width: 180px; }
.purchase-doc-table th:nth-child(3) { width: 200px; }
.purchase-doc-table th:nth-child(4) { width: 85px; }
.purchase-doc-table th:nth-child(5) { width: 60px; }
.purchase-doc-table th:nth-child(6) { width: 90px; }
.purchase-doc-table th:nth-child(7) { width: auto; }
.purchase-doc-table .sales-doc-product p { margin: 5px 0 0; font-weight: 400; line-height: 1.4; }
.purchase-doc-footer { grid-template-columns: 1fr 1fr 1fr; }
.purchase-doc-footer > div:last-child { text-align: right; }

.logistics-doc-trigger {
  border-color: #97d4dc;
  color: #126f86;
}
.contract-doc-trigger {
  border-color: #d6bc86;
  color: #8a5a16;
}
.logistics-doc-paper .sales-doc-logo {
  background: linear-gradient(145deg, #1696ac, #126f9a);
  box-shadow: 0 7px 16px rgba(18, 111, 154, .22);
}
.logistics-doc-paper .sales-doc-subtitle b { color: #167792; }
.logistics-doc-paper .sales-doc-red-rule {
  background: linear-gradient(90deg, #167792 0%, #55acba 70%, rgba(85, 172, 186, 0) 100%);
}
.logistics-doc-paper .sales-doc-table-wrap { overflow-x: auto; }
.logistics-doc-table { min-width: 1040px; }
.logistics-doc-table th:nth-child(1) { width: 44px; }
.logistics-doc-table th:nth-child(2) { width: 115px; }
.logistics-doc-table th:nth-child(3) { width: 65px; }
.logistics-doc-table th:nth-child(4) { width: 105px; }
.logistics-doc-table th:nth-child(5) { width: 135px; }
.logistics-doc-table th:nth-child(6) { width: 48px; }
.logistics-doc-table th:nth-child(7) { width: 78px; }
.logistics-doc-table th:nth-child(8) { width: 92px; }
.logistics-doc-table th:nth-child(9) { width: 210px; }
.logistics-doc-table th:nth-child(10) { width: 152px; }
.logistics-doc-table th:last-child,
.logistics-doc-table td:last-child {
  border-left: 2px solid #b9e1e5;
  background: #f0fafb;
}
.logistics-doc-table .sales-doc-recipient p { margin-top: 0; }
.logistics-doc-number { text-align: left !important; overflow-wrap: anywhere; }

/* Official purchase contract */
.contract-doc-paper {
  width: min(100%, 1000px);
  max-width: 1000px;
  min-width: 0;
  padding: 36px 42px;
  border: 0;
  border-radius: 12px;
  box-shadow: 0 14px 34px rgba(31, 41, 55, .13);
  color: #20242b;
  font-size: 13px;
  line-height: 1.65;
}
.contract-doc-header {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: 30px;
}
.contract-doc-company { font-size: 24px; font-weight: 850; letter-spacing: 1px; }
.contract-doc-title { margin-top: 6px; color: #9a6b22; font-size: 18px; font-weight: 800; letter-spacing: 4px; }
.contract-doc-title span { margin-left: 8px; color: #a0a5ad; font-size: 11px; font-weight: 500; letter-spacing: 1px; }
.contract-doc-header dl { min-width: 250px; margin: 0; }
.contract-doc-header dl div { display: grid; grid-template-columns: 70px 1fr; gap: 12px; padding: 3px 0; }
.contract-doc-header dt { color: #8a9099; }
.contract-doc-header dd { margin: 0; font-weight: 750; }
.contract-doc-rule {
  height: 3px;
  margin: 18px 0;
  background: linear-gradient(90deg, #9a6b22, #d6bc86 72%, rgba(214, 188, 134, 0));
}
.contract-doc-parties {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border: 1px solid #d7d2ca;
  border-radius: 8px;
  overflow: hidden;
}
.contract-doc-parties > div { display: grid; gap: 4px; padding: 12px 16px; }
.contract-doc-parties > div + div { border-left: 1px solid #d7d2ca; }
.contract-doc-parties span { color: #858b94; font-size: 11px; }
.contract-doc-parties strong { font-size: 15px; }
.contract-doc-intro { margin: 16px 0; text-indent: 2em; color: #4e545d; }
.contract-doc-section {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
}
.contract-doc-section h3,
.contract-doc-terms h3 { margin: 0 0 7px; color: #78501b; font-size: 14px; }
.contract-doc-table {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  border-collapse: collapse;
  table-layout: fixed;
}
.contract-doc-table th,
.contract-doc-table td {
  min-width: 0;
  padding: 8px 7px;
  border: 1px solid #a9a59f;
  text-align: center;
  vertical-align: middle;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.contract-doc-table th { background: #f4f0e9; }
.contract-doc-table .contract-col-index { width: 5%; }
.contract-doc-table .contract-col-product { width: 19%; }
.contract-doc-table .contract-col-model { width: 18%; }
.contract-doc-table .contract-col-quantity { width: 7%; }
.contract-doc-table .contract-col-price { width: 11%; }
.contract-doc-table .contract-col-amount { width: 11%; }
.contract-doc-table .contract-col-note { width: 29%; }
.contract-doc-table tfoot td { background: #fbfaf7; font-weight: 800; }
.contract-doc-uppercase { padding: 10px 12px; border: 1px solid #a9a59f; border-top: 0; text-align: right; }
.contract-doc-uppercase strong { color: #8a5a16; }
.contract-doc-terms { display: grid; grid-template-columns: 1fr 1fr; gap: 0 24px; margin-top: 18px; }
.contract-doc-terms section { padding: 10px 0; border-bottom: 1px dashed #ddd6cc; break-inside: avoid; }
.contract-doc-terms p { margin: 3px 0; color: #444a53; }
.contract-doc-bank { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 12px; padding: 8px 10px; border-radius: 6px; background: #f8f6f2; }
.contract-doc-signatures { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; margin-top: 24px; padding-top: 18px; border-top: 2px solid #b69a6c; }
.contract-doc-signatures > div { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 12px; min-height: 92px; }
.contract-doc-signatures strong { grid-column: 1 / -1; font-size: 14px; }
.contract-doc-signatures span { color: #555b64; }
.logistics-doc-number.has-value strong { color: #087b6f; }
.logistics-doc-number.is-empty strong { color: #c17916; }
.logistics-doc-summary {
  grid-template-columns: auto 1fr auto;
  border-color: #b9e1e5;
  background: #f0fafb;
}
.logistics-doc-summary .sales-doc-summary-money strong { color: #167792; }

@media print {
  body.printing-document > * { display: none !important; }
  body.printing-document #docModal {
    position: static;
    display: block !important;
    padding: 0;
    background: #fff;
  }
  body.printing-document #docModal .modal-bar { display: none !important; }
  body.printing-document #docModal .modal-panel { box-shadow: none; width: 100%; border-radius: 0; }
  body.printing-document #docModal .doc-scroll { max-height: none; overflow: visible; padding: 0; background: #fff; }
  body.printing-document #docModal .doc-paper { width: 100%; border: 0; margin: 0; box-shadow: none; }
  body.printing-customer-result > * { display: none !important; }
  body.printing-customer-result .main,
  body.printing-customer-result #customer,
  body.printing-customer-result #customerResult {
    display: block !important;
  }
  body.printing-customer-result .main {
    width: 100%;
    padding: 0;
  }
  body.printing-customer-result #customer > *:not(#customerResult) {
    display: none !important;
  }
  body.printing-customer-result .customer-orders-table tr {
    break-inside: avoid;
    page-break-inside: avoid;
  }
}

@media (max-width: 900px) {
  body { display: block; }
  .side { width: 100%; display: flex; overflow-x: auto; gap: 6px; }
  .brand { min-width: 120px; margin-bottom: 0; }
  .nav { width: auto; white-space: nowrap; }
  .main { width: 100%; padding: 14px; }
  .metrics, .meta { grid-template-columns: 1fr 1fr; }
  .compact-row { grid-template-columns: minmax(170px, 210px) minmax(0, 1fr); }
  .entry-result-panel { max-height: 55vh; }
  .stats-row { grid-template-columns: 1fr 1fr; }
}

/* 2026 business linework refresh */
html {
  color-scheme: light;
}

body {
  background: var(--bg);
  color: var(--ink);
  font-size: 14px;
  letter-spacing: 0;
}

::selection {
  background: #dce9ff;
  color: #102a56;
}

* {
  scrollbar-color: #aeb8c7 transparent;
  scrollbar-width: thin;
}

*::-webkit-scrollbar {
  width: 9px;
  height: 9px;
}

*::-webkit-scrollbar-thumb {
  border: 2px solid transparent;
  border-radius: 8px;
  background: #aeb8c7;
  background-clip: padding-box;
}

*::-webkit-scrollbar-track {
  background: transparent;
}

.side {
  position: sticky;
  top: 0;
  width: 176px;
  height: 100vh;
  overflow-y: auto;
  padding: 14px 10px 12px;
  border-right: 1px solid var(--sidebar-line);
  background: var(--sidebar);
  scrollbar-width: none;
}

.side::-webkit-scrollbar {
  display: none;
}

.brand {
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 42px;
  margin: 0 2px 14px;
  padding: 0 4px 12px;
  border-bottom: 1px solid var(--sidebar-line);
}

.brand-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  border: 1px solid #6d9cff;
  border-radius: 5px;
  background: #1f3150;
  color: #f7faff;
  font-size: 12px;
  font-weight: 850;
  margin-top: 0;
}

.brand-copy {
  min-width: 0;
  margin-top: 0;
}

.brand-copy strong {
  overflow: hidden;
  color: #ffffff;
  font-size: 15px;
  font-weight: 760;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.brand-copy > span {
  overflow: hidden;
  margin-top: 2px;
  color: #9ba8ba;
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.nav-group-label {
  margin: 11px 8px 4px;
  color: #758297;
  font-size: 10px;
  font-weight: 750;
  line-height: 1;
}

.nav {
  position: relative;
  min-height: 34px;
  margin: 0 0 2px;
  padding: 7px 10px 7px 13px;
  border: 1px solid transparent;
  border-radius: 4px;
  color: #c4ccda;
  font-size: 13px;
  font-weight: 600;
  transition: background-color .14s ease, border-color .14s ease, color .14s ease;
}

.nav::before {
  content: "";
  position: absolute;
  top: 7px;
  bottom: 7px;
  left: 0;
  width: 3px;
  border-radius: 0 2px 2px 0;
  background: transparent;
}

.nav:hover {
  border-color: #303c4f;
  background: #1c2534;
  color: #ffffff;
}

.nav.active {
  border-color: #344258;
  background: #202b3c;
  color: #ffffff;
}

.nav.active::before {
  background: #4c82ee;
}

.logout-nav {
  margin-top: 12px;
  border-top: 1px solid var(--sidebar-line);
  color: #f0a4a4;
}

.logout-nav:hover {
  border-color: #5a3137;
  background: #352229;
}

.main {
  width: calc(100vw - 176px);
  min-width: 0;
  padding: 16px 18px;
}

.topbar {
  min-height: 42px;
  margin-bottom: 10px;
  padding: 0 0 9px;
  border-bottom: 1px solid var(--line);
  align-items: center;
}

h1 {
  color: #151d2d;
  font-size: 22px;
  font-weight: 760;
  line-height: 1.2;
}

p {
  margin-top: 3px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}

.panel,
.tablewrap,
.stats-search-panel,
.stats-orders-panel,
.order-edit-lockbar {
  border-color: var(--line);
  border-radius: 6px;
  box-shadow: none;
}

.panel {
  padding: 12px;
  margin-bottom: 10px;
}

.panel-title {
  margin-bottom: 9px;
  padding-left: 8px;
  border-left: 3px solid #9bbaf2;
  color: #222c3d;
  font-size: 14px;
  font-weight: 760;
}

.result-title {
  border-left-color: var(--blue);
}

.result-title,
.modal-bar {
  border-color: var(--line);
}

input,
select,
textarea {
  border-color: #cfd7e3;
  border-radius: 6px;
  background: #ffffff;
  color: var(--text);
  transition: border-color .14s ease, box-shadow .14s ease, background-color .14s ease;
}

input,
select {
  height: 32px;
}

textarea {
  padding: 9px 10px;
}

textarea:hover,
input:hover,
select:hover {
  border-color: #aeb9c8;
}

textarea:focus,
input:focus,
select:focus {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(37, 99, 217, .12);
}

button {
  height: 32px;
  border: 1px solid transparent;
  border-radius: 6px;
  padding: 0 12px;
  font-size: 13px;
  font-weight: 700;
  transition: border-color .14s ease, background-color .14s ease, color .14s ease;
}

button:focus-visible {
  outline: 3px solid rgba(37, 99, 217, .18);
  outline-offset: 1px;
}

.primary {
  border-color: var(--blue);
  background: var(--blue);
  color: #ffffff;
}

.primary:hover {
  border-color: var(--blue-dark);
  background: var(--blue-dark);
}

.ghost {
  border-color: var(--line-strong);
  background: #ffffff;
  color: #344054;
}

.ghost:hover {
  border-color: #aeb8c7;
  background: #f6f8fb;
  color: #172033;
}

.danger {
  border-color: #f0caca;
  background: var(--red-soft);
  color: var(--red);
}

.danger:hover {
  border-color: #e6aaaa;
  background: #ffe8e8;
}

button:disabled {
  opacity: .5;
  cursor: not-allowed;
}

.compact-btn {
  height: 28px;
  border-radius: 5px;
}

.metrics {
  grid-template-columns: repeat(4, minmax(120px, 1fr));
  gap: 0;
  overflow: hidden;
  margin-bottom: 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #ffffff;
}

.metrics div {
  min-height: 66px;
  padding: 10px 13px;
  border: 0;
  border-right: 1px solid var(--line);
  border-radius: 0;
}

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

.metrics span {
  font-size: 12px;
}

.metrics strong {
  margin-top: 3px;
  color: #172033;
  font-size: 24px;
  font-variant-numeric: tabular-nums;
}

#mToday { color: var(--blue); }
#mReview { color: var(--amber); }
#mSent { color: var(--green); }
#mIssue { color: var(--red); }

.customer-summary,
.finance-summary-row {
  gap: 0;
}

.customer-summary div,
.finance-summary-row span {
  border-radius: 0;
  border-right-width: 0;
  background: #ffffff;
}

.customer-summary div:first-child,
.finance-summary-row span:first-child {
  border-radius: 6px 0 0 6px;
}

.customer-summary div:last-child,
.finance-summary-row span:last-child {
  border-right-width: 1px;
  border-radius: 0 6px 6px 0;
}

.stats-search-panel {
  padding: 10px 12px;
  border: 1px solid var(--line);
  background: #ffffff;
}

.stats-field-row,
.stats-search-row,
.stats-date-row,
.stats-total-row {
  gap: 6px;
  margin-bottom: 7px;
}

.stats-chip {
  height: 30px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: #ffffff;
  color: #475467;
}

.stats-chip:hover {
  border-color: #aeb8c7;
  background: #f6f8fb;
}

.stats-chip.active {
  border-color: var(--blue);
  background: var(--blue-soft);
  color: #1f54bd;
}

.stats-total-row {
  margin-top: 9px;
}

.stats-total-row b {
  font-size: 19px;
  font-variant-numeric: tabular-nums;
}

.stats-list {
  border-radius: 6px;
}

.finance-summary-row {
  padding: 8px 10px 0;
}

.finance-summary-row span {
  min-height: 38px;
  padding: 5px 10px;
}

.finance-summary-row b {
  font-size: 17px;
  font-variant-numeric: tabular-nums;
}

.tablewrap,
.stats-orders-wrap,
.finance-customers-wrap,
.finance-ledger-wrap,
.supplier-orders-wrap,
.customer-portal #customerResult:not(.empty) {
  background: #ffffff;
}

table:not(.doc-table) {
  color: #202939;
  font-size: 12px;
}

table:not(.doc-table) th {
  height: 30px;
  padding: 5px 7px;
  border-bottom: 1px solid var(--line-strong);
  background: #f5f7fa;
  color: #344054;
  font-weight: 760;
}

table:not(.doc-table) td {
  border-bottom: 1px solid #e1e6ee;
}

table:not(.doc-table) td,
.order-count-summary,
.stats-total-row,
.finance-summary-row,
.customer-summary {
  font-variant-numeric: tabular-nums;
}

table:not(.doc-table) tbody tr:nth-child(even) td {
  background: #fbfcfe;
}

table:not(.doc-table) tbody tr:hover td {
  background: #f1f6ff;
}

table:not(.doc-table) tbody tr:has(input.row-check:checked) td,
table:not(.doc-table) tbody tr:has(input.entry-row-check:checked) td {
  background: #eaf2ff;
}

.orders-table th,
.orders-table td,
.portal-orders-table th,
.portal-orders-table td,
.supplier-orders-table th,
.supplier-orders-table td,
.entry-result-table th,
.entry-result-table td {
  height: 28px;
  padding: 3px 5px;
}

.orders-table td input,
.orders-table td select,
.orders-table td textarea,
.entry-result-table .entry-edit-input {
  border-radius: 5px;
}

.orders-table input[readonly],
.orders-table textarea[readonly],
.orders-table input:disabled,
.orders-table textarea:disabled,
.orders-table select:disabled {
  border-color: transparent;
  background: transparent;
  color: var(--text);
  cursor: not-allowed;
  opacity: 1;
}

.orders-table input[readonly]:hover,
.orders-table textarea[readonly]:hover {
  border-color: #cbd4e0;
  background: #ffffff;
}

.orders-table input:not([readonly]):not(:disabled),
.orders-table textarea:not([readonly]):not(:disabled),
.orders-table select:not(:disabled) {
  border-color: #b8c8df;
  background: #ffffff;
}

.orders-table input[data-field="logistics_no"] {
  border-color: #b8c8df;
  background: #ffffff;
}

.orders-table .amount-cell,
.money-cell,
.finance-amount,
.stats-qty,
.stats-price,
.stats-amount {
  font-variant-numeric: tabular-nums;
}

.entry-result-table .entry-edit-input:hover,
.entry-result-table .entry-edit-input:focus {
  border-color: #9fb5d5;
  box-shadow: 0 0 0 2px rgba(37, 99, 217, .1);
}

.entry-result-table tr.warn td {
  background: #fff8f7;
}

.status-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 58px;
  height: 22px;
  padding: 0 7px;
  border: 1px solid transparent;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 760;
  line-height: 1;
  white-space: nowrap;
}

.status-confirm {
  border-color: #c6d7f5;
  background: #edf4ff;
  color: #2457b6;
}

.status-pending {
  border-color: #efd5a7;
  background: var(--amber-soft);
  color: #99560a;
}

.status-shipped {
  border-color: #bdd1f8;
  background: #e8f1ff;
  color: #1758c7;
}

.status-complete {
  border-color: #b9dfd0;
  background: var(--green-soft);
  color: #0e6c4c;
}

.status-processing {
  border-color: #cbd3de;
  background: #f1f4f8;
  color: #46576e;
}

.status-cancelled {
  border-color: #efc3c3;
  background: var(--red-soft);
  color: #ad3030;
}

.status-select {
  font-weight: 700;
}

.order-status-stack {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 4px;
}

.order-readiness-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 20px;
  padding: 2px 6px;
  border: 1px solid #efb7a9;
  border-radius: 4px;
  background: #fff1ed;
  color: #b33c24;
  font-size: 10.5px;
  font-weight: 760;
  line-height: 1.2;
  white-space: nowrap;
  cursor: help;
}

.orders-table tr.order-not-ready td {
  background: #fffaf8;
}

.orders-table tr.order-not-ready:hover td {
  background: #fff4ef;
}

.payment-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 66px;
  height: 22px;
  padding: 0 7px;
  border: 1px solid transparent;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 760;
  line-height: 1;
  white-space: nowrap;
}

.payment-paid {
  border-color: #b9dfd0;
  background: var(--green-soft);
  color: #0e6c4c;
}

.payment-partial {
  border-color: #efd5a7;
  background: var(--amber-soft);
  color: #99560a;
}

.payment-refund {
  border-color: #c6d7f5;
  background: var(--blue-soft);
  color: #2457b6;
}

.payment-unpaid {
  border-color: #efc3c3;
  background: var(--red-soft);
  color: #ad3030;
}

.order-card,
.customer-card {
  border-radius: 6px;
  border-left: 3px solid #cbd5e1;
}

.order-card:hover,
.customer-card:hover {
  border-color: #9fb9e7;
  background: #f8fbff;
}

.order-card.warn {
  border-color: #edb6b0;
  border-left-color: var(--red);
  background: #fff9f8;
}

.tag,
.result-count {
  border: 1px solid #c9d9f5;
  border-radius: 4px;
  background: var(--blue-soft);
  color: #2457b6;
}

.order-edit-lockbar {
  min-height: 34px;
  padding: 4px 7px;
  background: #ffffff;
}

.login-company,
.login-finance {
  border-radius: 5px;
}

.login-screen,
.modal {
  background: rgba(19, 29, 44, .56);
  backdrop-filter: blur(2px);
}

.login-card,
.modal-panel {
  overflow: hidden;
  border: 1px solid #cfd7e3;
  border-radius: 8px;
  box-shadow: 0 18px 48px rgba(18, 30, 48, .2);
}

.login-card {
  border-top: 3px solid var(--blue);
}

.modal-bar {
  min-height: 48px;
  padding: 9px 12px;
  background: #f8fafc;
}

.role-access-wrap,
.customer-license-modal-panel,
.customer-license-thumb {
  border-radius: 5px;
}

.role-permission-option {
  padding: 3px 7px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: #f8fafc;
}

.field-option,
.business-license-picker,
.customer-license-upload {
  border-radius: 5px;
  background: #f8fafc;
}

.customer-portal,
.supplier-portal {
  background: var(--bg);
}

.customer-portal .main,
.supplier-portal .main {
  width: min(1240px, calc(100vw - 24px));
  padding: 10px 0;
}

.portal-compact-panel {
  border-radius: 6px;
}

@media (max-width: 900px) {
  body {
    display: block;
  }

  .side {
    position: sticky;
    top: 0;
    z-index: 50;
    display: flex;
    align-items: center;
    gap: 4px;
    width: 100%;
    height: 54px;
    padding: 7px 9px;
    overflow-x: auto;
    overflow-y: hidden;
    border-right: 0;
    border-bottom: 1px solid var(--sidebar-line);
  }

  .brand {
    flex: 0 0 auto;
    min-width: 150px;
    min-height: 38px;
    margin: 0 6px 0 0;
    padding: 0 10px 0 0;
    border-right: 1px solid var(--sidebar-line);
    border-bottom: 0;
  }

  .brand-mark {
    width: 28px;
    height: 28px;
    flex-basis: 28px;
  }

  .nav-group-label {
    display: none;
  }

  .nav {
    flex: 0 0 auto;
    width: auto;
    min-height: 34px;
    margin: 0;
    padding: 7px 10px;
  }

  .nav::before {
    top: auto;
    right: 7px;
    bottom: 0;
    left: 7px;
    width: auto;
    height: 3px;
  }

  .logout-nav {
    margin-top: 0;
    border-top: 1px solid transparent;
  }

  .main {
    width: 100%;
    padding: 12px;
  }

  .metrics {
    grid-template-columns: repeat(2, minmax(120px, 1fr));
  }

  .metrics div:nth-child(2) {
    border-right: 0;
  }

  .metrics div:nth-child(-n + 2) {
    border-bottom: 1px solid var(--line);
  }
}

@media (max-width: 640px) {
  .main {
    padding: 10px 8px;
  }

  .topbar {
    align-items: flex-start;
    flex-wrap: wrap;
  }

  h1 {
    font-size: 20px;
  }

  .panel {
    padding: 9px;
  }

  .stats-field-row,
  .stats-date-row,
  .stats-total-row {
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 3px;
  }

  .customer-summary,
  .finance-summary-row {
    overflow-x: auto;
    flex-wrap: nowrap;
  }

  .portal-login-strip {
    display: block;
    width: 100%;
    max-width: none;
  }

  .portal-login-strip .panel-title {
    width: 100%;
    margin: 0 0 7px;
  }

  .portal-login-strip .actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
    width: 100%;
    margin: 0;
  }

  .portal-login-strip .actions > input,
  .portal-login-strip .password-chip,
  .portal-login-strip .date-chip {
    width: 100%;
    min-width: 0;
  }

  .portal-login-strip .password-chip input,
  .portal-login-strip .date-chip input {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
  }

  .supplier-portal .portal-compact-panel:not(.portal-login-strip) {
    display: block;
  }

  .supplier-portal .portal-compact-panel:not(.portal-login-strip) .panel-title {
    margin: 0 0 7px;
  }

  .supplier-portal .portal-compact-panel:not(.portal-login-strip) .actions {
    width: 100%;
    margin: 0;
    flex-wrap: wrap;
  }

  .supplier-portal .portal-compact-panel:not(.portal-login-strip) input[type="file"] {
    width: 100%;
    min-width: 0;
  }
}

/* Reference-inspired operations console: light shell, teal search, blue actions. */
@media screen {
  :root {
    --bg: #eef2f7;
    --panel: #ffffff;
    --ink: #182033;
    --text: #182033;
    --muted: #778195;
    --line: #dfe5ee;
    --line-strong: #cfd8e5;
    --blue: #2f6fed;
    --primary: #2f6fed;
    --blue-dark: #245ed1;
    --blue-soft: #edf4ff;
    --teal: #14b8a6;
    --teal-dark: #0f9f91;
    --teal-soft: #e8f8f5;
    --green: #128265;
    --green-soft: #e9f8f2;
    --amber: #c5760b;
    --amber-soft: #fff6e5;
    --red: #c83d3d;
    --red-soft: #fff1f1;
    --sidebar: #ffffff;
    --sidebar-line: #e1e7ef;
  }

  body {
    background: var(--bg);
  }

  .sr-only {
    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;
  }

  .side {
    width: 184px;
    padding: 13px 11px 12px;
    border-right: 1px solid var(--sidebar-line);
    background: #ffffff;
    box-shadow: 4px 0 18px rgba(31, 47, 74, .05);
  }

  .brand {
    min-height: 46px;
    margin: 0 2px 12px;
    padding: 0 4px 12px;
    border-bottom-color: var(--sidebar-line);
  }

  .brand-mark {
    width: 32px;
    height: 32px;
    flex-basis: 32px;
    border: 0;
    border-radius: 8px;
    background: #14b8a6;
    color: #ffffff;
    font-size: 17px;
    box-shadow: 0 7px 16px rgba(20, 184, 166, .22);
  }

  .brand-copy strong {
    color: #1a2233;
    font-size: 14px;
  }

  .brand-copy > span {
    color: #8a94a6;
  }

  .nav-group-label {
    color: #9aa4b4;
    font-size: 10px;
  }

  .nav {
    min-height: 35px;
    border-radius: 7px;
    color: #5c687a;
    font-weight: 650;
  }

  .nav:hover {
    border-color: #d8eee9;
    background: #f1faf8;
    color: #167f75;
  }

  .nav.active {
    border-color: #cfece7;
    background: var(--teal-soft);
    color: #0e8e81;
  }

  .nav.active::before {
    background: var(--teal);
  }

  .logout-nav {
    border-top-color: var(--sidebar-line);
    color: #b05252;
  }

  .logout-nav:hover {
    border-color: #f2d6d6;
    background: #fff4f4;
    color: #b43838;
  }

  .main {
    width: calc(100vw - 184px);
    padding: 13px 15px;
  }

  .topbar,
  #orders .topbar,
  #statistics .topbar,
  #funds .topbar,
  #entry .topbar {
    min-height: 58px;
    margin-bottom: 10px;
    padding: 10px 13px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #ffffff;
    box-shadow: 0 3px 10px rgba(31, 47, 74, .05);
  }

  .topbar h1,
  #orders .topbar h1,
  #statistics .topbar h1,
  #funds .topbar h1,
  #entry .topbar h1 {
    color: #1a2233;
    font-size: 20px;
    font-weight: 800;
  }

  .topbar p,
  #orders .topbar p,
  #statistics .topbar p,
  #funds .topbar p,
  #entry .topbar p {
    margin-top: 3px;
    color: #818b9e;
    font-size: 12px;
  }

  .panel,
  .tablewrap,
  .stats-search-panel,
  .stats-orders-panel,
  .orders-control-panel {
    border-color: var(--line);
    border-radius: 8px;
    background: #ffffff;
    box-shadow: 0 3px 10px rgba(31, 47, 74, .045);
  }

  .panel-title {
    border-left-color: var(--teal);
    color: #232d40;
  }

  input,
  select,
  textarea {
    border-color: #d5dde8;
    border-radius: 7px;
    background: #ffffff;
  }

  input:hover,
  select:hover,
  textarea:hover {
    border-color: #b8c4d3;
  }

  input:focus,
  select:focus,
  textarea:focus {
    border-color: var(--teal);
    box-shadow: 0 0 0 3px rgba(20, 184, 166, .12);
  }

  button {
    border-radius: 7px;
  }

  .primary {
    border-color: var(--blue);
    background: var(--blue);
    box-shadow: 0 3px 7px rgba(47, 111, 237, .16);
  }

  .primary:hover {
    border-color: var(--blue-dark);
    background: var(--blue-dark);
  }

  .ghost {
    border-color: #d4dce7;
    background: #f7f9fc;
    color: #465166;
  }

  .ghost:hover {
    border-color: #c5d0de;
    background: #eef2f7;
  }

  #searchBtn,
  #statsSearchBtn {
    border-color: var(--teal);
    background: var(--teal);
    box-shadow: 0 3px 7px rgba(20, 184, 166, .18);
  }

  #searchBtn:hover,
  #statsSearchBtn:hover {
    border-color: var(--teal-dark);
    background: var(--teal-dark);
  }

  #exportBtn,
  #exportFundsLedgerBtn {
    border-color: var(--teal);
    background: var(--teal);
    color: #ffffff;
  }

  .metrics {
    gap: 9px;
    overflow: visible;
    border: 0;
    background: transparent;
  }

  .metrics div {
    min-height: 64px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #ffffff;
    box-shadow: 0 3px 9px rgba(31, 47, 74, .04);
  }

  .metrics div:nth-child(1) {
    border-color: #c7ece6;
    background: var(--teal-soft);
  }

  .metrics div:nth-child(2) {
    border-color: #f0ddba;
    background: #fff9ec;
  }

  .metrics div:nth-child(3) {
    border-color: #d3e1fb;
    background: #f2f6ff;
  }

  .metrics div:nth-child(4) {
    border-color: #eadfe4;
    background: #faf7f9;
  }

  .metrics strong {
    font-size: 23px;
  }

  #statistics .stats-search-panel {
    padding: 10px 12px;
  }

  #statistics .stats-search-row {
    display: grid;
    grid-template-columns: minmax(280px, 720px) 72px 88px;
    justify-content: start;
    gap: 8px;
  }

  #statistics .stats-search-row input,
  #statistics .stats-search-row button,
  #statistics .stats-date-row input,
  #statistics .stats-date-row button {
    height: 34px;
  }

  .stats-total-row b,
  .finance-summary-row b {
    color: #2f6fed;
  }

  .stats-total-row > span,
  .finance-summary-row span,
  .customer-summary div {
    border-color: var(--line);
    background: #f8fafc;
  }

  .finance-summary-row span:nth-child(2),
  .customer-summary div:nth-child(2) {
    border-color: #c7ece6;
    background: var(--teal-soft);
  }

  .finance-summary-row span:nth-child(3),
  .customer-summary div:nth-child(3) {
    border-color: #d4e1fb;
    background: #f1f6ff;
  }

  .finance-summary-row span:nth-child(4),
  .customer-summary div:nth-child(4) {
    border-color: #f0ddba;
    background: #fff9ec;
  }

  table:not(.doc-table) th {
    border-bottom-color: #d6dfeb;
    background: #f4f7fb;
    color: #3c485b;
  }

  table:not(.doc-table) td {
    border-bottom-color: #e3e8ef;
  }

  table:not(.doc-table) tbody tr:nth-child(even) td {
    background: #fbfcfe;
  }

  table:not(.doc-table) tbody tr:hover td {
    background: #ecf9f7;
  }

  table:not(.doc-table) tbody tr:has(input.row-check:checked) td,
  table:not(.doc-table) tbody tr:has(input.entry-row-check:checked) td {
    background: #eaf4ff;
  }

  .tag,
  .result-count {
    border-color: #cfece7;
    background: var(--teal-soft);
    color: #0e8e81;
  }

  .login-card {
    width: min(390px, calc(100vw - 28px));
    padding: 24px;
    border-top: 4px solid var(--teal);
    border-radius: 8px;
  }

  .login-card .primary {
    border-color: var(--teal);
    background: var(--teal);
  }

  #orderEditModal,
  #orderVoidModal {
    z-index: 30;
    align-items: center;
    padding: 18px;
    background: rgba(25, 35, 51, .48);
    backdrop-filter: blur(3px);
  }

  .order-edit-modal-panel {
    width: min(430px, calc(100vw - 28px));
    border: 1px solid var(--line);
    border-radius: 8px;
    box-shadow: 0 22px 60px rgba(23, 35, 55, .24);
  }

  .order-edit-modal-panel .modal-bar {
    min-height: 54px;
    padding: 10px 12px 10px 14px;
    background: #ffffff;
  }

  .order-edit-modal-panel .modal-bar > div {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 9px;
  }

  .modal-icon-lock {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 7px;
    background: var(--amber-soft);
    color: #a6680b;
    font-size: 12px;
    font-weight: 800;
  }

  .modal-icon-void {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 7px;
    background: #fff0f0;
    color: #b42318;
    font-size: 12px;
    font-weight: 800;
  }

  .order-edit-modal-body {
    padding: 18px;
  }

  .order-edit-modal-body > p {
    margin: 0 0 14px;
    color: #6f7a8d;
    line-height: 1.6;
  }

  .order-edit-password-field {
    display: grid;
    grid-template-columns: 74px minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    color: #475467;
    font-size: 13px;
    font-weight: 700;
  }

  .order-edit-password-field input {
    width: 100%;
    min-width: 0;
    height: 38px;
  }

  .order-edit-modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 18px;
  }

  .order-edit-modal-actions button {
    min-width: 92px;
  }

  .order-void-summary {
    display: grid;
    gap: 4px;
    margin-bottom: 14px;
    padding: 10px 12px;
    border: 1px solid #f1d0d0;
    border-radius: 7px;
    background: #fff8f7;
  }

  .order-void-summary strong {
    color: #9b1c1c;
  }

  .order-void-summary span {
    color: #667085;
    font-size: 12px;
    line-height: 1.5;
  }

  .order-void-reason-field {
    display: block;
    margin-bottom: 6px;
    color: #344054;
    font-size: 13px;
    font-weight: 700;
  }

  #orderVoidReason {
    width: 100%;
    min-height: 92px;
    resize: vertical;
  }

  #orderVoidReason[aria-invalid="true"] {
    border-color: #d92d20;
    box-shadow: 0 0 0 3px rgba(217, 45, 32, .12);
  }

  .order-void-error {
    min-height: 20px;
    padding-top: 5px;
    color: #b42318;
    font-size: 12px;
  }

  .order-voided-label {
    display: grid;
    gap: 2px;
    max-width: 108px;
    color: #b42318;
    line-height: 1.2;
  }

  .order-voided-label small {
    overflow: hidden;
    color: #7a4a4a;
    font-size: 10px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

@media screen and (max-width: 900px) {
  .side {
    width: 100%;
    background: #ffffff;
    box-shadow: 0 4px 14px rgba(31, 47, 74, .06);
  }

  .brand-copy strong {
    color: #1a2233;
  }

  .main {
    width: 100%;
    padding: 10px;
  }

  .nav {
    color: #5c687a;
  }

  #orders .orders-control-panel .filters {
    grid-template-columns: minmax(180px, 1fr) minmax(180px, 1fr) minmax(260px, 2fr) 70px auto;
    overflow-x: auto;
  }
}

@media screen and (max-width: 640px) {
  .topbar,
  #orders .topbar,
  #statistics .topbar,
  #funds .topbar,
  #entry .topbar {
    min-height: 0;
    padding: 9px 10px;
  }

  #orders .orders-control-panel .filters {
    grid-template-columns: 1fr 1fr;
    width: 100%;
    min-width: 0;
    overflow: visible;
  }

  #orders .orders-control-panel .date-filter-label {
    min-width: 0;
    grid-template-columns: auto minmax(0, 1fr);
  }

  #orders .orders-control-panel .date-filter-label input {
    width: 100%;
    min-width: 0;
  }

  #orders .orders-control-panel .filters #fQ {
    grid-column: 1 / -1;
  }

  #orders .orders-control-panel .toggle-label {
    justify-self: end;
  }

  .order-lock-help {
    display: none;
  }

  #entry .entry-input-panel .archive-select-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 6px;
    width: 100%;
    min-width: 0;
    overflow: visible;
  }

  #entry .entry-input-panel .archive-select-row > label,
  #entry .entry-input-panel .archive-select-row > label input {
    width: 100%;
    min-width: 0;
  }

  #entry .entry-import-inline {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 6px;
    width: 100%;
    min-width: 0;
  }

  #entry .entry-import-inline input[type="file"] {
    width: 100%;
    min-width: 0;
  }

  #entry .result-title,
  #entry .result-title-left {
    flex-wrap: nowrap;
  }

  #entry .result-title {
    overflow-x: auto;
  }

  #entry .result-title button,
  #entry .result-title-left > span,
  #entry .result-count {
    flex: 0 0 auto;
    white-space: nowrap;
  }

  #statistics .stats-search-row {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  #statistics .stats-search-row #statsShowAllBtn {
    grid-column: 1 / -1;
    justify-self: start;
  }

  .order-edit-password-field {
    grid-template-columns: 1fr;
    gap: 6px;
  }
}

/* Keep the customer result controls compact when summary data is present. */
@media screen {
  #customer .customer-result-bar {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    width: 100%;
    min-height: 38px;
    height: auto;
    margin: 6px 0;
  }

  #customer #customerResultActions {
    align-self: center;
    min-width: max-content;
  }

  #customer #customerSummary:not(.hidden) {
    display: grid !important;
    grid-template-columns: none !important;
    grid-auto-flow: column;
    grid-auto-columns: max-content;
    align-items: center;
    justify-content: end;
    gap: 6px;
    width: auto;
    max-width: 100%;
    min-width: 0;
    min-height: 0;
    height: auto;
    margin: 0;
    padding: 0 0 2px;
    overflow-x: auto;
    overflow-y: hidden;
  }

  #customer #customerSummary > div {
    display: inline-flex !important;
    align-items: center;
    gap: 7px;
    width: auto !important;
    min-width: 96px;
    max-width: none;
    min-height: 32px;
    height: 32px !important;
    margin: 0;
    padding: 0 10px;
    border: 1px solid var(--line);
    border-radius: 7px;
    background: #ffffff;
  }

  #customer #customerSummary > div:nth-child(2) {
    border-color: #c7ece6;
    background: var(--teal-soft);
  }

  #customer #customerSummary > div:nth-child(3) {
    border-color: #d4e1fb;
    background: #f1f6ff;
  }

  #customer #customerSummary > div:nth-child(4) {
    border-color: #f0ddba;
    background: #fff9ec;
  }

  #customer #customerSummary span,
  #customer #customerSummary strong {
    display: inline;
    margin: 0;
    line-height: 1;
    white-space: nowrap;
  }

  #customer #customerSummary span {
    font-size: 12px;
  }

  #customer #customerSummary strong {
    font-size: 16px;
  }

  #customer #customerResult {
    margin-top: 4px;
  }
}

@media screen and (max-width: 720px) {
  #customer .customer-result-bar {
    grid-template-columns: 1fr;
    gap: 6px;
  }

  #customer #customerSummary:not(.hidden) {
    justify-content: start;
  }
}
.backup-status {
  display: grid;
  gap: 6px;
  margin: 12px 0;
  padding: 12px 14px;
  border: 1px solid #dbe4ee;
  border-radius: 10px;
  background: #f8fafc;
  color: #475569;
  font-size: 13px;
}

.backup-status strong { color: #0f172a; }
.backup-status .backup-ok { color: #047857; }
.backup-status .backup-warning { color: #b45309; }
.backup-table td small { display: block; margin-top: 3px; color: #64748b; }
.backup-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.authorization-h5-button{border:1px solid #8b5cf6;background:#f5f3ff;color:#6d28d9;border-radius:10px;padding:10px 16px;font-weight:800;white-space:nowrap}
.authorization-workflow-tabs{display:flex;gap:8px;margin:0 0 14px;padding:5px;background:#eef2f9;border:1px solid #e0e6f0;border-radius:13px;width:max-content}.authorization-workflow-tabs button{height:42px;padding:0 20px;border:0;border-radius:9px;background:transparent;color:#64718a;font-weight:800}.authorization-workflow-tabs button.active{background:#fff;color:#3158d8;box-shadow:0 3px 10px rgba(38,61,120,.09)}.authorization-workflow-tabs b{display:inline-grid;place-items:center;min-width:23px;height:23px;margin-left:5px;padding:0 6px;border-radius:12px;background:#fff0ef;color:#e24a3e}.authorization-workflow-tabs button.active b{background:#eaf0ff;color:#3158d8}.authorization-alert.workflow-hidden{display:none!important}
.authorization-applications-panel{padding:18px}.authorization-applications-toolbar{display:grid;grid-template-columns:minmax(0,1fr) 170px auto;gap:14px;align-items:end;margin-bottom:16px}.authorization-applications-toolbar>div{display:grid;gap:4px}.authorization-applications-toolbar>div strong{font-size:18px}.authorization-applications-toolbar>div span{color:#7d8aa1}.authorization-applications-toolbar label{display:grid;gap:6px;color:#6e7b91}.authorization-applications-toolbar select{height:42px;border:1px solid #d9e0eb;border-radius:9px;background:#fff;padding:0 10px}
.authorization-h5-panel{width:min(1040px,94vw);max-height:88vh;overflow:auto;padding:0 22px 22px}
.authorization-h5-panel .modal-bar{position:sticky;top:0;z-index:3;background:#fff;padding:20px 0 14px}
.authorization-h5-panel .modal-bar div{display:grid;gap:4px}.authorization-h5-panel .modal-bar small{color:#8090aa;font-weight:500}
.authorization-h5-create{display:grid;grid-template-columns:minmax(280px,1fr) 150px 250px;gap:14px;align-items:end;padding:18px;background:#f7f8ff;border:1px solid #dfe5fb;border-radius:16px}
.authorization-h5-create label{display:grid;gap:8px;color:#65738d}.authorization-h5-create input,.authorization-h5-create select{width:100%;height:48px;border:1px solid #d8dfed;border-radius:10px;background:#fff;padding:0 14px;font-size:15px}
.authorization-h5-create button{height:48px}
.authorization-h5-result{display:grid;grid-template-columns:132px minmax(0,1fr) auto;align-items:center;gap:18px;margin-top:14px;padding:14px;border:1px solid #bdd2ff;border-radius:14px;background:#f5f9ff}
.authorization-h5-result img{width:132px;height:132px;border-radius:10px}.authorization-h5-result div{display:grid;gap:8px}.authorization-h5-result input{width:100%;height:42px;border:1px solid #d6deed;border-radius:8px;padding:0 10px}
.authorization-h5-result-actions{display:flex!important;flex-direction:column;gap:10px!important;min-width:170px}.authorization-h5-result-actions button{height:44px;white-space:nowrap}
.authorization-h5-links-heading{display:flex;align-items:center;gap:12px;margin:22px 0 12px;padding-bottom:11px;border-bottom:1px solid #e3e7ef}.authorization-h5-links-heading span{color:#8390a5}
.authorization-h5-tabs{display:flex;gap:8px;margin:22px 0 12px;border-bottom:1px solid #e4e8f0}.authorization-h5-tabs button{border:0;background:transparent;padding:12px 16px;color:#68758d;font-weight:800}.authorization-h5-tabs button.active{color:#3158d8;border-bottom:3px solid #3158d8}.authorization-h5-tabs b{display:inline-grid;place-items:center;min-width:22px;height:22px;border-radius:11px;background:#fff1f0;color:#e34b3f;margin-left:4px}
.authorization-application-list,.authorization-h5-links{display:grid;gap:12px;max-height:480px;overflow:auto}
.authorization-application-card,.authorization-h5-links article{border:1px solid #dfe4ee;border-radius:14px;background:#fff;padding:16px}
.authorization-application-head,.authorization-h5-links article{display:flex;align-items:center;gap:12px}.authorization-application-head>div,.authorization-h5-links article>div{display:grid;gap:4px;min-width:0;flex:1}.authorization-application-head span,.authorization-h5-links article span{color:#8190a8;font-size:13px}.authorization-application-head em,.authorization-h5-links em{font-style:normal;border-radius:999px;padding:6px 10px;background:#fff4d9;color:#b66e00;font-weight:800}.authorization-application-card.issued .authorization-application-head em,.authorization-h5-links em.active{background:#e8f8f0;color:#14835d}.authorization-application-card.rejected .authorization-application-head em,.authorization-application-card.failed .authorization-application-head em,.authorization-h5-links em.disabled,.authorization-h5-links em.expired{background:#fff0ef;color:#d6493d}.authorization-application-card.internally_approved .authorization-application-head em{background:#e9f0ff;color:#3158d8}.authorization-application-card.submitted_to_brand .authorization-application-head em,.authorization-application-card.brand_processing .authorization-application-head em{background:#f1ecff;color:#7546c8}.authorization-application-card.awaiting_document .authorization-application-head em,.authorization-application-card.ready_to_issue .authorization-application-head em{background:#fff1dd;color:#b86600}
.authorization-application-card{overflow-x:auto}.authorization-application-grid{display:grid;grid-template-columns:130px 260px 130px 210px 260px minmax(500px,1fr);gap:12px;min-width:1560px;margin-top:15px;padding:14px;background:#f8f9fc;border-radius:10px}.authorization-application-grid span{display:flex;align-items:center;gap:7px;min-width:0;white-space:nowrap}.authorization-application-grid small{flex:0 0 auto;color:#8996aa}.authorization-application-grid small::after{content:"："}.authorization-application-grid .authorization-attachment-link{flex:0 0 auto}.authorization-application-card p{color:#60708a}.authorization-application-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:12px}.authorization-attachment-link{border:0;background:transparent;color:#3158d8;padding:0;text-align:left;text-decoration:underline;cursor:pointer;white-space:nowrap}
.authorization-brand-progress{display:flex;gap:22px;flex-wrap:wrap;margin-top:10px;padding:10px 13px;border-radius:9px;background:#f4f1ff;color:#61527f}.authorization-final-document{display:flex;align-items:center;gap:6px;margin-top:10px;padding:10px 13px;border:1px solid #cce6d9;border-radius:9px;background:#f0fbf6;color:#176b50}.authorization-review-note{margin-top:10px;color:#748198}
.authorization-application-grid .authorization-application-files-cell{align-items:flex-start}.authorization-application-files{display:grid;gap:7px;min-width:0}.authorization-application-file-row{display:grid!important;grid-template-columns:82px minmax(0,1fr);gap:7px!important;align-items:start!important;white-space:normal!important}.authorization-application-file-row>b{color:#5f6f88;font-size:13px;line-height:22px}.authorization-application-file-row>span{display:flex;gap:10px;flex-wrap:wrap;min-width:0}.authorization-application-file-row em{color:#a0a9b8;font-style:normal;line-height:22px}.authorization-application-file-row .authorization-attachment-link{max-width:360px;overflow:hidden;text-overflow:ellipsis;line-height:22px}
@media(max-width:760px){.authorization-h5-create{grid-template-columns:1fr}.authorization-h5-result{grid-template-columns:90px 1fr}.authorization-h5-result img{width:90px;height:90px}.authorization-h5-result>button{grid-column:1/-1}.authorization-applications-toolbar{grid-template-columns:1fr}.authorization-workflow-tabs{width:100%}.authorization-workflow-tabs button{flex:1;padding:0 10px}}
.nav.nav-subitem{padding-left:30px;font-size:13px}
.railway-pass-view{--pass-teal:#0f8a80;--pass-blue:#315bd8;--pass-navy:#142746}
.railway-pass-topbar{align-items:flex-end;margin-bottom:18px}
.railway-pass-kicker{margin-bottom:5px;color:#71819a;font-size:12px;font-weight:700}
.railway-pass-topbar h1{margin:0;font-size:27px;letter-spacing:-.5px}
.railway-pass-topbar p{margin:6px 0 0;color:var(--muted)}
.railway-pass-topbar .top-actions{display:flex;gap:9px}
.railway-pass-stats{display:grid;grid-template-columns:1.05fr .9fr 1.05fr 1.05fr .9fr;gap:12px;margin-bottom:14px}
.railway-pass-stats button{position:relative;overflow:hidden;min-height:118px;border:1px solid #e0e6f0;background:#fff;border-radius:15px;padding:17px 18px;text-align:left;box-shadow:0 5px 16px rgba(24,43,77,.055);cursor:pointer;transition:.18s ease}
.railway-pass-stats button::before{content:"";position:absolute;inset:0 auto 0 0;width:4px;background:#7990b7}
.railway-pass-stats button:hover{transform:translateY(-2px);border-color:#b9c7e1;box-shadow:0 10px 24px rgba(24,43,77,.1)}
.railway-pass-stats button.is-primary::before{background:#315bd8}.railway-pass-stats button.is-review::before{background:#d48b18}.railway-pass-stats button.is-receipt::before{background:#0f8a80}.railway-pass-stats button.is-fee::before{background:#238554}.railway-pass-stats button.is-overdue::before{background:#d84c4c}
.railway-pass-stats span{display:block;color:#718098;font-size:13px;font-weight:700}
.railway-pass-stats strong{display:block;margin-top:7px;color:#17253b;font-size:26px;line-height:1.08;font-style:normal}
.railway-pass-stats strong b{font-size:30px}.railway-pass-stats strong small{color:#8290a5;font-size:12px;font-weight:600}
.railway-pass-stats em{display:block;margin-top:8px;color:#8996a9;font-size:12px;font-style:normal}
.railway-pass-view .railway-pass-flow{position:relative;flex:0 0 auto;overflow-x:auto;overflow-y:hidden;min-height:146px;padding:18px 20px 24px;margin-bottom:14px;border:1px solid #dce4ef;background:linear-gradient(180deg,#fff 0%,#fbfcfe 100%);box-shadow:0 8px 24px rgba(21,42,73,.06)}
.railway-pass-flow::before{content:"";position:absolute;inset:0 auto 0 0;width:4px;background:linear-gradient(180deg,#173b70,#0e938c)}
.railway-pass-flow-title{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-bottom:17px}
.railway-pass-flow-title>div{display:flex;align-items:baseline;gap:12px}.railway-pass-flow-title strong{font-size:16px;color:#142b4d}.railway-pass-flow-title span{color:#8996a9;font-size:12px}.railway-pass-flow-title em{padding:5px 10px;border:1px solid #d9e4f2;border-radius:999px;background:#f5f8fc;color:#687a94;font-size:11px;font-style:normal}
.railway-pass-flow-steps{display:flex;align-items:flex-start;width:100%;min-width:1120px;min-height:76px}
.railway-pass-flow-steps button{position:relative;display:grid;justify-items:center;align-content:start;gap:5px;min-width:86px;min-height:76px;padding:0 4px;border:0;background:transparent;color:#243550;cursor:pointer}
.railway-pass-flow-steps button b{position:relative;z-index:1;display:grid;place-items:center;width:34px;height:34px;border:2px solid #d6e2f1;border-radius:11px;background:linear-gradient(145deg,#f9fbff,#eaf1fb);box-shadow:0 4px 10px rgba(30,55,91,.1);color:#315bd8;font-size:12px;transition:.18s ease}
.railway-pass-flow-steps button span{font-size:12px;font-weight:800;white-space:nowrap}.railway-pass-flow-steps button small{max-width:128px;color:#8996a9;font-size:10px;line-height:1.3;text-align:center;white-space:normal}
.railway-pass-flow-steps button:hover b{transform:translateY(-2px);border-color:#6f91cb;background:linear-gradient(145deg,#244e89,#153666);box-shadow:0 7px 15px rgba(23,59,112,.24);color:#fff}
.railway-pass-flow-steps button.is-active b{border-color:#315bd8;background:linear-gradient(145deg,#315bd8,#173b70);box-shadow:0 7px 16px rgba(49,91,216,.26);color:#fff}
.railway-pass-flow-steps button.is-active span{color:#214ebd}.railway-pass-flow-steps button.is-active small{color:#536b94;font-weight:700}
.railway-pass-flow-steps i{position:relative;flex:1;height:2px;min-width:12px;margin-top:16px;background:linear-gradient(90deg,#cbd8e9,#e5ebf3)}
.railway-pass-flow-steps i::after{content:"";position:absolute;right:-1px;top:-3px;width:7px;height:7px;border-top:2px solid #cbd8e9;border-right:2px solid #cbd8e9;transform:rotate(45deg)}
.railway-pass-flow-steps button:nth-of-type(1) b{border-color:#bdd1ee;background:#eef5ff;color:#245da8}
.railway-pass-flow-steps button:nth-of-type(2) b,.railway-pass-flow-steps button:nth-of-type(4) b{border-color:#bfe6df;background:#effaf7;color:#087c70}
.railway-pass-flow-steps button:nth-of-type(3) b,.railway-pass-flow-steps button:nth-of-type(6) b,.railway-pass-flow-steps button:nth-of-type(7) b{border-color:#d5c9ee;background:#f7f2ff;color:#7251ad}
.railway-pass-flow-steps button:nth-of-type(4) b,.railway-pass-flow-steps button:nth-of-type(8) b,.railway-pass-flow-steps button:nth-of-type(9) b,.railway-pass-flow-steps button:nth-of-type(10) b{border-color:#f0d2a6;background:#fff8e9;color:#a86806}
.railway-pass-flow-steps button:nth-of-type(5) b{border-color:#b9dbe6;background:#eef9fc;color:#16708d}
.railway-pass-flow-legend{display:flex;justify-content:flex-end;gap:12px;margin-top:13px;color:#78879c;font-size:10px}.railway-pass-flow-legend span::before{content:"";display:inline-block;width:7px;height:7px;margin-right:5px;border-radius:2px;background:#9cb3d2}.railway-pass-flow-legend .is-customer::before{background:#47aa9e}.railway-pass-flow-legend .is-shop::before{background:#8a6ac1}.railway-pass-flow-legend .is-supply::before{background:#3d92aa}.railway-pass-flow-legend .is-money::before{background:#d49533}
.railway-pass-flow--portal{margin:0 0 14px}
.railway-pass-ledger{padding:0;overflow:hidden}
.railway-pass-ledger-head{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:16px 18px;border-bottom:1px solid #e8ecf3}
.railway-pass-ledger-head h2{margin:0;font-size:17px}.railway-pass-ledger-head p{margin:4px 0 0;color:#8a96a8;font-size:12px}.railway-pass-ledger-head p strong{color:#315bd8}
.railway-pass-toolbar{display:flex;flex:1;justify-content:flex-end;gap:8px;align-items:center}
.railway-pass-toolbar input{width:min(390px,40vw);min-width:210px}
.railway-pass-toolbar select{min-width:150px}
.railway-pass-table-wrap{overflow:auto}
.railway-pass-table{width:100%;border-collapse:collapse;min-width:1120px}
.railway-pass-table th,.railway-pass-table td{padding:13px 12px;border-bottom:1px solid #edf0f5;text-align:left;font-size:13px;vertical-align:middle}
.railway-pass-table th{color:#64738b;font-weight:700;background:#f7f9fc;white-space:nowrap}
.railway-pass-table tbody tr:hover{background:#fafcff}.railway-pass-table small{color:#8996aa}
.railway-pass-stage{display:inline-flex;border-radius:999px;padding:4px 9px;background:#e0f2fe;color:#075985;font-weight:600;white-space:nowrap}
.railway-pass-money{font-variant-numeric:tabular-nums;font-weight:600;white-space:nowrap}
.railway-pass-empty{text-align:center!important;color:var(--muted);padding:46px!important;background:linear-gradient(180deg,#fff,#fbfcfe)}
.railway-pass-shop-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:14px;margin-top:14px}.railway-pass-shop-grid .panel{padding:18px}
.railway-pass-card-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;margin-bottom:16px}.railway-pass-card-head h2{margin:0 0 5px;font-size:17px}.railway-pass-card-head p{margin:0;color:var(--muted);font-size:12px}.railway-pass-card-head>span{border-radius:999px;padding:5px 9px;background:#edf3ff;color:#315bd8;font-size:11px;font-weight:700;white-space:nowrap}.railway-pass-card-head>span.is-warning{background:#fff5dc;color:#a96508}
.railway-pass-bind-row{display:grid;grid-template-columns:minmax(180px,1fr) minmax(180px,1fr) auto;gap:9px}.railway-pass-bind-row select{min-width:0}.railway-pass-application-empty{display:grid;place-items:center;min-height:42px;color:#8a96a8;font-size:13px;background:#f8fafc;border-radius:9px}.pass-application{display:flex;gap:8px;align-items:center;padding:9px 0;border-bottom:1px solid var(--line)}.pass-application span{flex:1}
.railway-pass-modal-panel{width:min(720px,94vw)}
.railway-pass-form{display:grid;grid-template-columns:1fr 1fr;gap:14px;padding:18px}
.railway-pass-form label{display:grid;gap:6px;color:var(--muted);font-size:13px}
.railway-pass-form input,.railway-pass-form select,.railway-pass-form textarea{width:100%}
.railway-pass-product-summary{grid-column:1/-1;padding:12px;border-radius:9px;background:#ecfeff;color:#155e75;border:1px solid #a5f3fc}
.railway-pass-note,.railway-pass-form-actions{grid-column:1/-1}
.railway-pass-form-actions{display:flex;justify-content:flex-end}
.railway-pass-step-history{grid-column:1/-1;padding:12px;border:1px solid #dce5ec;border-radius:10px;background:#f7fafc}
.railway-pass-step-history p{margin:7px 0;color:var(--muted);font-size:12px}
.railway-pass-overdue{color:#c2410c;font-weight:700}.link-button{border:0;background:none;color:#087f77;padding:0;text-decoration:underline;cursor:pointer}
.railway-pass-qr{display:grid;justify-items:center;gap:14px;padding:24px}.railway-pass-qr img{width:260px;height:260px}.railway-pass-qr input{width:100%}
@media(max-width:760px){
  .railway-pass-stats{grid-template-columns:repeat(2,1fr)}
  .railway-pass-topbar{align-items:flex-start}.railway-pass-topbar .top-actions{flex-wrap:wrap}
  .railway-pass-flow{overflow:auto}.railway-pass-flow-steps{min-width:720px}
  .railway-pass-ledger-head{align-items:stretch;flex-direction:column}.railway-pass-toolbar{align-items:stretch;flex-direction:column}.railway-pass-toolbar input{width:100%}
  .railway-pass-shop-grid{grid-template-columns:1fr}.railway-pass-bind-row{grid-template-columns:1fr}
  .railway-pass-form{grid-template-columns:1fr}
  .railway-pass-product-summary,.railway-pass-note,.railway-pass-form-actions{grid-column:1}
}
.customer-business-heading{display:grid;gap:5px}.customer-business-switch{display:flex;align-items:center;gap:8px}.customer-business-switch button{border:0;background:transparent;color:#718096;padding:6px 12px;border-radius:9px;font-size:16px;font-weight:700;cursor:pointer}.customer-business-switch button.active{background:#12243f;color:#fff;font-size:24px}.customer-business-switch button:not(.active):hover{background:#e7edf8;color:#1f4fd6}
.customer-railway-step-button{min-width:58px;padding:7px 12px;white-space:nowrap}
.customer-railway-step-dialog{width:min(720px,94vw);max-height:90vh;border:0;border-radius:18px;padding:0;box-shadow:0 24px 70px rgba(15,31,54,.28)}
.customer-railway-step-dialog::backdrop{background:rgba(15,23,42,.55);backdrop-filter:blur(3px)}
.customer-railway-step-form>header{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:18px 22px;border-bottom:1px solid #e4e9f1}
.customer-railway-step-form>header>div{display:grid;gap:4px}.customer-railway-step-form>header strong{color:#152641;font-size:19px}.customer-railway-step-form>header span{color:#7c8aa0;font-size:12px}
.customer-railway-step-form>header button{border:0;border-radius:10px;padding:9px 14px;background:#f1f4f8;color:#26364e;cursor:pointer}
.customer-railway-step-body{display:grid;gap:14px;padding:18px 22px;overflow:auto;max-height:calc(90vh - 76px)}
.customer-railway-step-hint{margin:0;padding:12px 14px;border-radius:10px;background:#eaf7f6;color:#12645f;font-size:13px}
.customer-railway-step-fields{display:grid;grid-template-columns:1fr 1fr;gap:12px}.customer-railway-step-fields label,.customer-railway-step-file,.customer-railway-step-note{display:grid;gap:6px;color:#66758c;font-size:13px}
.customer-railway-step-fields input,.customer-railway-step-file input,.customer-railway-step-note textarea{width:100%}
.customer-railway-step-history{padding:13px;border:1px solid #e0e6ef;border-radius:11px;background:#fafbfd}.customer-railway-step-history>strong{display:block;margin-bottom:7px;color:#26364e}
.customer-railway-step-history>span{color:#8a97a9;font-size:12px}.customer-railway-step-history p{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin:6px 0;color:#536279;font-size:12px}.customer-railway-step-history p em{color:#8b97a8;font-style:normal}.customer-railway-step-history p button{border:0;background:transparent;color:#087f77;text-decoration:underline;cursor:pointer;padding:0}
@media(max-width:680px){.customer-railway-step-fields{grid-template-columns:1fr}}
.tablewrap tbody.is-loading {
  opacity: .55;
  pointer-events: none;
}

.tablewrap tbody {
  transition: opacity .12s ease;
}


/*
 * Order Workbench visual shell.
 * This file intentionally contains presentation only. Existing element IDs,
 * JavaScript event handlers, APIs and data flows remain in the original app.
 */

:root {
  --bg: #f4f6fa;
  --panel: #ffffff;
  --ink: #1f2733;
  --text: #1f2733;
  --muted: #697586;
  --line: #e4e9f1;
  --line-strong: #d5dce8;
  --blue: #3b5bdb;
  --primary: #3b5bdb;
  --blue-dark: #2f49b8;
  --blue-soft: #eef2ff;
  --teal: #0d9488;
  --teal-dark: #087d73;
  --teal-soft: #e6f6f4;
  --green: #16804b;
  --green-soft: #e9f7ee;
  --amber: #c47608;
  --amber-soft: #fdf3e5;
  --red: #d1433f;
  --red-soft: #fcecec;
  --sidebar: #ffffff;
  --sidebar-line: #e7ebf1;
  --wb-surface-2: #fafbfd;
  --wb-shadow: 0 1px 2px rgba(16, 24, 40, .035), 0 6px 18px rgba(16, 24, 40, .04);
  --wb-shadow-raised: 0 18px 48px rgba(23, 35, 55, .18);
}

/* Unified customer business portal */
.customer-portal .main {
  width: min(1480px, calc(100vw - 48px));
  padding-top: 0;
}

.customer-unified-header {
  display: grid;
  grid-template-columns: auto auto minmax(360px, 1fr) auto;
  align-items: center;
  gap: 30px;
  min-height: 76px;
  margin-bottom: 24px;
  border-bottom: 1px solid #e2e8f0;
  background: #ffffff;
}

.customer-unified-header.single-business {
  grid-template-columns: auto minmax(360px, 1fr) auto;
}

.customer-unified-brand {
  display: flex;
  align-items: center;
  gap: 12px;
}

.customer-unified-brand > span {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 11px;
  background: #087f77;
  color: #ffffff;
  font-size: 20px;
  font-weight: 800;
}

.customer-unified-brand strong,
.customer-unified-brand small {
  display: block;
}

.customer-unified-brand strong {
  color: #10233e;
  font-size: 20px;
}

.customer-unified-brand small {
  margin-top: 2px;
  color: #4aa69f;
  font-size: 10px;
  letter-spacing: .14em;
}

.customer-unified-header .customer-business-switch {
  display: flex;
  justify-self: start;
  gap: 0;
  overflow: hidden;
  border: 1px solid #d4ddea;
  border-radius: 10px;
  background: #f7f9fc;
}

.customer-unified-header .customer-business-switch.hidden {
  display: none;
}

.customer-unified-header .customer-business-switch button {
  min-width: 142px;
  min-height: 48px;
  padding: 12px 24px;
  border: 0;
  border-right: 1px solid #d4ddea;
  border-radius: 0;
  background: transparent;
  color: #66758b;
  font-size: 15px;
  font-weight: 700;
  transition: color .2s ease, background .25s ease, box-shadow .2s ease;
}

.customer-unified-header .customer-business-switch button:last-child {
  border-right: 0;
}

.customer-unified-header .customer-business-switch button.active {
  background: linear-gradient(135deg, #14284a, #294b87);
  color: #ffffff;
  font-size: 15px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.13);
}

.customer-unified-header .customer-business-switch button:not(.active):hover {
  background: linear-gradient(135deg, #e8efff, #d9f3f0);
  color: #0a716b;
  box-shadow: inset 0 0 0 1px rgba(13,148,136,.28);
}

.customer-unified-header .customer-business-switch button.active:hover {
  background: linear-gradient(135deg, #1a3560, #32756f);
}

.customer-header-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(105px, 1fr));
  justify-self: stretch;
  max-width: 500px;
  margin-left: auto;
}

.customer-header-metrics .login-finance {
  display: grid;
  grid-template-columns: auto auto;
  align-items: baseline;
  min-width: 0;
  min-height: 0;
  column-gap: 4px;
  padding: 1px 22px;
  border: 0;
  border-left: 1px solid #dce4ee;
  border-radius: 0;
  background: transparent;
}

.customer-header-metrics .login-finance.hidden {
  display: none;
}

.customer-header-metrics small {
  grid-column: 1 / -1;
  margin-bottom: 3px;
  color: #718096;
  font-size: 10px;
}

.customer-header-metrics strong {
  color: #14284a !important;
  font-size: 17px;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.customer-header-metrics em {
  color: #718096;
  font-size: 9px;
  font-style: normal;
}

.customer-unified-account {
  display: flex;
  align-items: center;
  justify-self: end;
  gap: 16px;
}

.customer-unified-account > div {
  display: grid;
  min-width: 0;
  padding-left: 16px;
  border-left: 1px solid #e2e8f0;
}

.customer-unified-account .login-company {
  max-width: 310px;
  overflow: hidden;
  color: #17253b;
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.customer-account-name {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
}

.customer-unified-account .customer-certified-badge {
  position: static;
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  min-height: 20px;
  margin: 0;
  padding: 2px 7px;
  border: 1px solid #e8c66b;
  border-radius: 999px;
  background: #fff8df;
  color: #a66c00;
  font-size: 10px;
  font-weight: 750;
  line-height: 1;
  white-space: nowrap;
}

.customer-unified-account .customer-certified-badge.hidden {
  display: none;
}

.customer-unified-account span {
  margin-top: 3px;
  color: #718096;
  font-size: 11px;
}

.customer-unified-account b {
  font-family: "SF Mono", Menlo, Consolas, monospace;
}

.customer-unified-account .ghost {
  min-height: 40px;
  padding: 0 15px;
  border-radius: 9px;
}

.customer-portal .customer-identity-hero {
  height: 72px !important;
  min-height: 72px !important;
  max-height: 72px !important;
  padding: 6px 22px;
  border-radius: 15px;
}

.customer-portal .customer-portal-title {
  padding-right: 54%;
}

.customer-portal .customer-portal-title strong {
  font-size: 18px;
}

.customer-portal .customer-portal-title > div > span {
  margin-top: 2px;
  font-size: 11px;
}

.customer-portal .portal-identity-stats {
  position: absolute;
  z-index: 2;
  top: 50%;
  right: 24px;
  width: 48%;
  justify-content: flex-end;
  gap: 0;
  margin: 0;
  transform: translateY(-50%);
}

.customer-portal .portal-identity-stats > span {
  min-width: 170px;
  padding-left: 20px;
  border-left: 1px solid rgba(255,255,255,.18);
}

.customer-portal .portal-identity-stats strong {
  font-size: 20px;
}

.customer-portal .customer-identity-hero .customer-certified-badge {
  top: 6px;
  right: 10px;
  padding-top: 3px;
  padding-bottom: 3px;
}

@media (max-width: 900px) {
  .customer-portal .main {
    width: calc(100vw - 28px);
  }
  .customer-unified-header {
    grid-template-columns: 1fr auto;
    gap: 12px;
    padding: 12px 0;
  }
  .customer-unified-header .customer-business-switch {
    grid-column: 1 / -1;
    grid-row: 2;
    width: 100%;
  }
  .customer-unified-header .customer-business-switch button {
    flex: 1;
  }
  .customer-header-metrics {
    grid-column: 1 / -1;
    grid-row: 3;
    width: 100%;
    max-width: none;
    margin: 0;
  }
  .customer-header-metrics .login-finance:first-child {
    padding-left: 0;
    border-left: 0;
  }
  .customer-unified-account > div {
    display: none;
  }
  .customer-portal .customer-identity-hero {
    min-height: 210px;
  }
  .customer-portal .customer-portal-title {
    padding-right: 0;
  }
  .customer-portal .portal-identity-stats {
    position: relative;
    top: auto;
    right: auto;
    width: 100%;
    justify-content: flex-start;
    margin-top: 28px;
    transform: none;
  }
  .customer-portal .portal-identity-stats > span {
    min-width: 0;
    padding: 0 16px;
  }
  .customer-portal .portal-identity-stats > span:first-child {
    padding-left: 0;
    border-left: 0;
  }
}

/* Independent railway marketplace selection library. */
.railway-products-view { width: 100%; min-width: 0; max-width: 100%; overflow: hidden; }
.railway-topbar { align-items: center; }
.railway-topbar > div { min-width: 0; }
.railway-topbar .top-actions { display: flex; align-items: center; justify-content: flex-end; gap: 9px; min-width: 0; flex-wrap: wrap; }
.railway-button { border: 1px solid transparent; border-radius: 10px; padding: 10px 18px; font-weight: 700; cursor: pointer; }
.railway-button-teal { color: #087d73; background: #e6f6f4; border-color: #a7ded8; }
.railway-summary { display: flex; align-items: center; gap: 7px; margin: 0 4px 0 0; }
.railway-summary button { display: grid; grid-template-columns: auto auto; align-items: center; gap: 7px; min-width: 105px; min-height: 42px; padding: 7px 11px; border: 1px solid #bfd0f2; border-radius: 10px; background: #edf3ff; color: #536783; cursor: pointer; box-shadow: none; }
.railway-summary button:nth-child(2) { min-width: 145px; border-color: #f0c4c2; background: #fff0ef; }
.railway-summary button:nth-child(3) { min-width: 82px; border-color: #efd2a1; background: #fff6e5; }
.railway-summary strong { font-size: 18px; line-height: 1; color: #294b9b; }
.railway-summary span { font-size: 12px; font-weight: 700; white-space: nowrap; }
.railway-summary button:nth-child(2) strong { color: #d1433f; }
.railway-summary button:nth-child(3) strong { color: #c47608; }
.railway-summary button:hover { filter: brightness(.97); transform: translateY(-1px); }
.railway-toolbar { display: grid; grid-template-columns: auto auto minmax(240px, 1fr) auto auto auto auto; align-items: center; gap: 10px; width: 100%; min-width: 0; max-width: 100%; padding: 14px; margin-bottom: 12px; }
.railway-selection-compact { color: #657187; font-size: 12px; white-space: nowrap; }
.railway-selection-compact strong { color: #243a70; font-size: 15px; font-variant-numeric: tabular-nums; }
#railwaySelectAllBtn { min-width: 62px; }
.railway-toolbar input, .railway-toolbar select, .railway-import-body textarea { width: 100%; border: 1px solid var(--line-strong); border-radius: 10px; background: #fff; padding: 11px 12px; color: var(--ink); }
.railway-batch-bar { display: flex; align-items: center; gap: 10px; padding: 10px 14px; margin-bottom: 12px; }
.railway-batch-bar small { margin-left: auto; color: var(--muted); }
.railway-view-switch { display: inline-flex; flex: 0 0 auto; overflow: hidden; border: 1px solid #c9d5eb; border-radius: 9px; background: #fff; }
.railway-view-switch button { min-width: 96px; padding: 8px 12px; border: 0; border-right: 1px solid #dbe2ee; border-radius: 0; background: #fff; color: #5b6880; font-weight: 700; cursor: pointer; }
.railway-view-switch button:last-child { border-right: 0; }
.railway-view-switch button.active { background: #3d5fe0; color: #fff; }
.railway-column-picker { position: relative; z-index: 22; }
.railway-column-picker .product-column-menu { right: 0; width: 310px; }
.railway-column-picker.hidden { display: none; }
.railway-table-wrap { width: 100%; min-width: 0; max-width: 100%; overflow: auto; max-height: calc(100vh - 385px); overscroll-behavior-x: contain; }
.railway-table { width: max(100%, var(--railway-table-live-width, 1450px)); min-width: 0; border-collapse: collapse; table-layout: fixed; }
.railway-table th { position: sticky; top: 0; z-index: 2; background: #f6f8fc; color: #5b6880; text-align: left; white-space: nowrap; }
.railway-table th, .railway-table td { padding: 9px clamp(5px, .55vw, 10px); border-bottom: 1px solid var(--line); vertical-align: middle; }
.railway-table th, .railway-table td { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.railway-table .railway-product-link-cell,
.railway-table .railway-product-note-cell,
.railway-table .railway-listing-cell,
.railway-table .railway-actions {
  overflow: visible;
  text-align: center;
}
.railway-table .railway-updated-cell {
  overflow: hidden;
  text-align: left;
  text-overflow: ellipsis;
}
.railway-table th { user-select: none; }
.railway-column-resizer {
  position: absolute;
  top: 5px;
  right: -4px;
  bottom: 5px;
  z-index: 5;
  width: 9px;
  border-radius: 5px;
  cursor: col-resize;
  touch-action: none;
}
.railway-column-resizer::after {
  content: "";
  position: absolute;
  top: 3px;
  right: 4px;
  bottom: 3px;
  width: 1px;
  background: #cfd5df;
  transition: width .15s ease, background .15s ease;
}
.railway-table th:hover .railway-column-resizer::after,
.railway-column-resizer:hover::after {
  width: 2px;
  background: #5d6878;
}
body.railway-column-resizing,
body.railway-column-resizing * {
  cursor: col-resize !important;
  user-select: none !important;
}
.railway-pagination { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 10px; padding: 9px 12px; color: #68758a; font-size: 12px; }
.railway-pagination > div { display: flex; align-items: center; gap: 8px; }
.railway-pagination select { height: 32px; border: 1px solid #d4ddea; border-radius: 7px; background: #fff; padding: 0 28px 0 9px; color: #334155; }
.railway-page-buttons { justify-content: flex-end; }
.railway-page-buttons button { min-width: 34px; height: 32px; padding: 0 9px; border: 1px solid #d4ddea; border-radius: 7px; background: #fff; color: #526178; cursor: pointer; }
.railway-page-buttons button.active { border-color: #3d5fe0; background: #3d5fe0; color: #fff; }
.railway-page-buttons button:disabled { opacity: .45; cursor: not-allowed; }
/* Compact deterministic widths keep the 16-column product row inside its own scroller. */
.railway-table { min-width: 0; }
.railway-table th:nth-child(1),.railway-table td:nth-child(1){width:36px}
.railway-table th:nth-child(2),.railway-table td:nth-child(2){width:48px}
.railway-table th:nth-child(3),.railway-table td:nth-child(3){width:112px}
.railway-table th:nth-child(4),.railway-table td:nth-child(4){width:72px}
.railway-table th:nth-child(5),.railway-table td:nth-child(5){width:230px}
.railway-table th:nth-child(6),.railway-table td:nth-child(6){width:110px}
.railway-table th:nth-child(7),.railway-table td:nth-child(7){width:76px}
.railway-table th:nth-child(8),.railway-table td:nth-child(8){width:76px}
.railway-table th:nth-child(9),.railway-table td:nth-child(9){width:82px}
.railway-table th:nth-child(10),.railway-table td:nth-child(10){width:180px}
.railway-table th:nth-child(11),.railway-table td:nth-child(11){width:125px}
.railway-table th:nth-child(12),.railway-table td:nth-child(12){width:58px}
.railway-table th:nth-child(13),.railway-table td:nth-child(13){width:58px}
.railway-table th:nth-child(14),.railway-table td:nth-child(14){width:72px}
.railway-table th:nth-child(15),.railway-table td:nth-child(15){width:125px}
.railway-table th:nth-child(16),.railway-table td:nth-child(16){width:90px}
.railway-inline-edit-row td { min-width: 0 !important; padding: 8px 5px; overflow: hidden !important; }
.railway-inline-edit-row input,.railway-inline-edit-row select { display: block; max-width: 100%; min-width: 0 !important; box-sizing: border-box; padding: 7px 5px; }
.railway-inline-edit-row .railway-actions { overflow: visible !important; }
.railway-inline-edit-row .railway-actions button { display: block; width: 100%; margin: 2px 0; padding: 5px 3px; font-size: 11px; }
.railway-inline-hint { display: block; overflow: hidden; font-size: 10px; text-overflow: ellipsis; }
.railway-table th:first-child, .railway-table td:first-child { width: 38px; min-width: 38px; padding-left: 10px; padding-right: 6px; text-align: center; }
.railway-table th:nth-child(2), .railway-table td:nth-child(2) { width: 52px; }
.railway-table th:nth-child(3), .railway-table td:nth-child(3) { width: clamp(100px, 8vw, 138px); }
.railway-table th:nth-child(4), .railway-table td:nth-child(4) { width: clamp(66px, 5vw, 96px); }
.railway-table th:nth-child(5), .railway-table td:nth-child(5) { width: clamp(220px, 22vw, 420px); }
.railway-table th:nth-child(6), .railway-table td:nth-child(6) { width: clamp(95px, 9vw, 160px); }
.railway-table th:nth-child(7), .railway-table td:nth-child(7) { width: clamp(68px, 6vw, 105px); }
.railway-table th:nth-child(8), .railway-table td:nth-child(8) { width: clamp(82px, 7vw, 115px); }
.railway-table th:nth-child(9), .railway-table td:nth-child(9) { width: clamp(150px, 15vw, 285px); }
.railway-table th:nth-child(10), .railway-table td:nth-child(10),
.railway-table th:nth-child(11), .railway-table td:nth-child(11) { width: 58px; text-align: center; overflow: visible; }
.railway-table th:nth-child(12), .railway-table td:nth-child(12) { width: 82px; text-align: center; }
.railway-table th:nth-child(13), .railway-table td:nth-child(13) { width: clamp(116px, 9vw, 155px); }
.railway-table th:nth-child(14), .railway-table td:nth-child(14) { width: 72px; text-align: center; overflow: visible; }
.railway-table #railwaySelectAll, .railway-table .railway-row-check {
  display: inline-block;
  width: 16px !important;
  min-width: 16px !important;
  height: 16px !important;
  margin: 0;
  padding: 0;
  vertical-align: middle;
  accent-color: #3b5bdb;
  cursor: pointer;
}
.railway-data-row { cursor: pointer; transition: background-color .15s ease; }
.railway-data-row:hover td { background: #f4f7ff; }
.railway-title-cell { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 650; }
.railway-company-cell { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.railway-price { overflow: visible !important; color: #e14b42; font-size: 14px; font-weight: 800; text-overflow: clip !important; white-space: nowrap; }
.railway-dropship-price { color: #176b55; font-weight: 800; white-space: nowrap; }
.railway-profit { color: #16804b; font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }
.railway-profit.negative { color: #d1433f; }
.railway-tag { display: inline-block; min-width: 58px; padding: 5px 9px; border-radius: 999px; background: #eef1f6; text-align: center; white-space: nowrap; font-size: 13px; }
.railway-tag.success { color: #16804b; background: #e9f7ee; }
.railway-tag.warning { color: #a86100; background: #fdf3e5; }
.railway-tag.danger { color: #d1433f; background: #fcecec; }
.railway-actions { white-space: nowrap; }
.railway-actions button { padding: 6px 9px; margin-right: 5px; }
.railway-empty { height: 240px; text-align: center; color: var(--muted); }
.railway-modal-panel { width: min(780px, calc(100vw - 40px)); }
.railway-inline-edit-row td { background: #f2f6ff; border-top: 2px solid #7292f5; border-bottom: 0; }
.railway-inline-edit-row input, .railway-inline-edit-row select { width: 100%; min-width: 0; border: 1px solid #aebff1; border-radius: 7px; background: #fff; padding: 8px 7px; color: var(--ink); }
.railway-inline-edit-row td:nth-child(5) input { min-width: 0; }
.railway-inline-edit-row td { border-bottom: 2px solid #7292f5; }
.railway-inline-edit-row td:nth-child(10) input, .railway-inline-edit-row td:nth-child(11) input { min-width: 0; }
.railway-edit-marker { display: inline-block; color: #3157cf; font-size: 12px; font-weight: 800; writing-mode: vertical-rl; }
.railway-inline-hint { color: #76839a; font-size: 12px; white-space: nowrap; }
.railway-thumb { width: 32px; height: 32px; object-fit: cover; border-radius: 6px; border: 1px solid #dbe2ee; background: #fff; }
.railway-image-upload img { width: 48px; height: 48px; object-fit: cover; border-radius: 8px; border: 1px solid #dbe2ee; background: #fff; }
.railway-thumb:not([src]), .railway-image-upload img:not([src]) { visibility: hidden; }
.railway-image-error { visibility: visible !important; color: #c6423d; font-size: 10px; }
.railway-no-image { color: #a0aabd; font-size: 12px; white-space: nowrap; }
.railway-direct-image-upload { position: relative; display: grid; place-items: center; width: 36px; min-height: 34px; border-radius: 7px; cursor: pointer; }
.railway-direct-image-upload:hover { background: #eef3ff; }
.railway-direct-image-upload input { position: absolute; inset: 0; width: 100% !important; height: 100% !important; min-width: 0 !important; margin: 0; opacity: 0; cursor: pointer; }
.railway-image-hover-preview { position: fixed; left: 0; top: 0; z-index: 3000; display: none; width: 224px; height: 224px; padding: 7px; border: 1px solid #ccd6e8; border-radius: 13px; background: #fff; box-shadow: 0 16px 42px rgba(30, 48, 84, .24); pointer-events: none; }
.railway-image-hover-preview img { width: 100%; height: 100%; object-fit: contain; border-radius: 8px; background: #f7f8fb; }
.railway-image-hover-preview.show { display: block; }
.railway-image-upload { position: relative; display: grid; place-items: center; width: 50px; height: 50px; border: 1px dashed #89a3ef; border-radius: 8px; color: #3157cf; background: #fff; cursor: pointer; overflow: hidden; }
.railway-image-upload input { position: absolute; inset: 0; opacity: 0; cursor: pointer; min-width: 0 !important; }
.railway-link-editor { position: relative; display: inline-flex; }
.railway-link-icon { display: grid; place-items: center; width: 30px; height: 30px; padding: 0; border: 1px solid #b8c8f4; border-radius: 8px; background: #f3f6ff; color: #3157cf; cursor: pointer; font-size: 14px; }
.railway-link-popover { position: absolute; left: 50%; bottom: calc(100% + 8px); z-index: 30; display: none; width: 330px; padding: 12px; border: 1px solid #cfd8e8; border-radius: 11px; background: #fff; box-shadow: 0 14px 36px rgba(30, 48, 84, .2); }
.railway-link-editor:hover .railway-link-popover, .railway-link-editor:focus-within .railway-link-popover { display: grid; gap: 9px; }
.railway-link-popover::after { content: ""; position: absolute; left: calc(50% - 7px); top: 100%; border: 7px solid transparent; border-top-color: #fff; }
.railway-link-popover input { width: 100%; border: 1px solid #b9c6de; border-radius: 7px; padding: 8px; }
.railway-link-popover > div { display: flex; align-items: center; gap: 8px; }
.railway-link-popover button, .railway-link-popover a { padding: 6px 10px; font-size: 12px; text-decoration: none; }
.railway-note-editor { position: relative; display: inline-flex; }
.railway-note-icon { display: grid; place-items: center; width: 30px; height: 30px; padding: 0; border: 1px solid #d4dbe8; border-radius: 8px; background: #f7f8fb; filter: grayscale(1); opacity: .65; cursor: pointer; font-size: 14px; }
.railway-note-icon.has-note { border-color: #e8bd72; background: #fff7e8; filter: none; opacity: 1; }
.railway-note-popover { position: absolute; left: 50%; bottom: calc(100% + 8px); z-index: 31; display: none; width: 320px; padding: 12px; border: 1px solid #cfd8e8; border-radius: 11px; background: #fff; box-shadow: 0 14px 36px rgba(30, 48, 84, .2); }
.railway-note-editor:hover .railway-note-popover, .railway-note-editor:focus-within .railway-note-popover { display: grid; gap: 9px; }
.railway-note-popover::after { content: ""; position: absolute; left: calc(50% - 7px); top: 100%; border: 7px solid transparent; border-top-color: #fff; }
.railway-note-popover textarea { width: 100%; min-height: 90px; resize: vertical; border: 1px solid #b9c6de; border-radius: 7px; padding: 8px; font: inherit; color: var(--ink); }
.railway-note-popover > div { display: flex; gap: 8px; }
.railway-note-popover button { padding: 6px 10px; font-size: 12px; }
.railway-card-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; width: 100%; min-width: 0; max-width: 100%; padding: 2px 0 14px; }
.railway-card-grid.hidden { display: none; }
.railway-product-card { position: relative; display: flex; min-width: 0; min-height: 300px; flex-direction: column; overflow: visible; border: 1px solid #e5e7eb; border-radius: 14px; background: #fff; box-shadow: 0 7px 18px rgba(26, 36, 55, .08); transition: transform .18s ease, box-shadow .18s ease; }
.railway-product-card:hover { transform: translateY(-3px); box-shadow: 0 16px 36px rgba(26, 36, 55, .14); }
.railway-card-topline { display: flex; align-items: center; justify-content: space-between; min-height: 34px; padding: 7px 13px 0; }
.railway-card-topline time { color: #7b879b; font-size: 10px; font-variant-numeric: tabular-nums; }
.railway-card-image { position: relative; display: flex; height: 142px; align-items: center; justify-content: center; overflow: hidden; margin: -5px 12px 0; padding: 5px; border-radius: 6px; background: #fff; }
#customerRailwayProductGrid .railway-card-image.is-loading::before { content: ""; position: absolute; inset: 10px 16%; border-radius: 8px; background: linear-gradient(100deg, #f3f6f9 20%, #e8eef3 38%, #f3f6f9 56%); background-size: 220% 100%; animation: railway-image-skeleton 1.15s ease-in-out infinite; }
.railway-card-image img { display: block; width: auto; max-width: 100%; height: auto; max-height: 100%; object-fit: contain; object-position: center center; padding: 0; transform: none; }
#customerRailwayProductGrid .railway-card-image img { opacity: 0; }
#customerRailwayProductGrid .railway-card-image img.is-ready { opacity: 1; }
@keyframes railway-image-skeleton { from { background-position: 100% 0; } to { background-position: -120% 0; } }
.railway-card-image .railway-no-image { font-size: 14px; }
.railway-card-brand { max-width: 65%; overflow: hidden; color: #e20d19; font-family: "PingFang SC", "Microsoft YaHei", "Noto Sans CJK SC", sans-serif; font-size: 16px; font-weight: 800; letter-spacing: .15px; line-height: 1.2; text-overflow: ellipsis; text-shadow: 0 1px 2px rgba(179, 9, 20, .1); white-space: nowrap; }
.railway-card-content { display: flex; min-height: 140px; flex: 1; flex-direction: column; padding: 5px 13px 9px; }
.railway-card-company { display: grid; gap: 1px; margin-bottom: 5px; overflow: hidden; }
.railway-card-company strong { overflow: hidden; color: #182237; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.railway-card-company a { overflow: hidden; color: #182237; font-size: 12px; font-weight: 700; text-decoration: none; text-overflow: ellipsis; white-space: nowrap; }
.railway-card-company a:hover { color: #174ea6; text-decoration: underline; text-underline-offset: 3px; }
.railway-card-company small { color: #9aa4b5; font-size: 9px; }
.railway-card-primary-code { display: grid; min-width: 0; gap: 0; margin-bottom: 4px; overflow: hidden; }
.railway-card-code-line { display: flex; min-width: 0; align-items: center; gap: 4px; }
.railway-card-primary-code strong { min-width: 0; overflow: hidden; color: #182237; font-size: 12px; font-weight: 750; text-overflow: ellipsis; white-space: nowrap; }
.railway-card-primary-code small { flex: 0 0 auto; color: #9aa4b5; font-size: 9px; white-space: nowrap; }
.railway-card-primary-code em { margin-top: 1px; color: #a0a9b8; font-size: 8px; font-style: normal; letter-spacing: .15px; }
.railway-card-code-copy { display: inline-grid !important; width: 17px !important; min-width: 17px !important; height: 17px !important; min-height: 17px !important; flex: 0 0 17px; place-items: center; padding: 0 !important; border: 1px solid #d8dee9 !important; border-radius: 4px !important; color: #6f7d91 !important; background: #f8fafc !important; box-shadow: none !important; cursor: pointer; }
.railway-card-code-copy svg { width: 10px; height: 10px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.railway-card-code-copy:hover { border-color: #aebbd0 !important; color: #234e9b !important; background: #eef4ff !important; }
.railway-card-commerce-row { display: flex; align-items: center; justify-content: flex-start; gap: 6px; margin-bottom: 4px; }
.railway-card-price { display: flex; align-items: baseline; margin: 0; color: #ff4b45; font-size: 19px; font-weight: 900; letter-spacing: -.3px; }
.railway-card-price small { margin-right: 2px; font-size: 10px; font-weight: 700; }
.railway-card-train { display: inline-flex; width: 16px; height: 16px; align-self: center; margin-right: 3px; color: #f13c3c; filter: drop-shadow(0 1px 1px rgba(180, 20, 20, .12)); }
.railway-card-train svg { width: 100%; height: 100%; overflow: visible; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.55; }
.railway-card-train .train-body { fill: #fff2f1; }
.railway-card-train .train-window { fill: #f13c3c; stroke-width: 1.35; }
.railway-card-train .train-roof,
.railway-card-train .train-detail { stroke-width: 1.7; }
.railway-card-badges { display: flex; gap: 7px; }
.railway-commerce-badge { padding: 5px 8px; border: 1px solid #ff9a96; border-radius: 6px; color: #fa514c; background: #fff; font-size: 11px; font-weight: 700; white-space: nowrap; }
.railway-commerce-badge.off { border-color: #cfd5df; color: #7b8492; background: #f5f6f8; }
.railway-card-title { display: -webkit-box; min-height: 34px; margin: 0 0 5px; overflow: hidden; color: #182237; font-size: 14px; font-weight: 850; line-height: 1.28; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.railway-card-title span { display: inline-block; margin-left: 5px; padding: 2px 5px; border-radius: 4px; color: #fff; background: #ff513c; font-size: 9px; font-weight: 700; vertical-align: 2px; }
.railway-card-meta { display: grid; gap: 2px; margin-top: auto; color: #778398; font-size: 10px; }
.railway-card-meta div { display: flex; min-width: 0; align-items: center; gap: 5px; }
.railway-card-meta b { min-width: 0; overflow: hidden; color: #657087; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.railway-card-meta .railway-card-dropship { color: #176b55; font-weight: 800; }
.railway-card-profit-label { margin-left: auto; }
.railway-card-meta .railway-card-profit { color: #d56a12; font-weight: 800; }
.railway-card-meta .railway-card-profit.negative { color: #d64545; }
.railway-card-company-footer { display: flex; min-width: 0; align-items: center; gap: 3px; margin-top: 4px; padding-top: 5px; border-top: 1px solid #e8ebf0; }
.railway-card-company-footer > span { flex: 0 0 auto; color: #9aa4b5; font-size: 9px; white-space: nowrap; }
.railway-card-company-footer strong,
.railway-card-company-footer a { color: #7b8595; font-size: 9px; font-weight: 600; }
.railway-card-company-footer strong { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.railway-card-company-footer .railway-card-company-link { display: inline-grid; width: 18px; min-width: 18px; height: 18px; flex: 0 0 18px; place-items: center; margin-left: 2px; border: 1px solid #8fd8ce; border-radius: 5px; color: #087f73; background: #e5faf6; box-shadow: 0 2px 6px rgba(8, 127, 115, .14); }
.railway-card-company-link svg { width: 11px; height: 11px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2; }
.railway-card-company-footer .railway-card-company-link:hover { border-color: #0c9487; color: #fff; background: linear-gradient(135deg, #10a99a, #08766e); box-shadow: 0 4px 10px rgba(8, 127, 115, .28); transform: translateY(-1px); }
.railway-card-company-footer button.railway-card-company-link { padding: 0; cursor: pointer; }
.railway-card-company-footer .railway-card-company-link.missing { border-color: #f1bd6c; color: #b66b00; background: #fff5df; box-shadow: 0 2px 6px rgba(182, 107, 0, .12); }
.railway-card-company-footer .railway-card-company-link.missing:hover { border-color: #d98509; color: #fff; background: linear-gradient(135deg, #f4aa32, #d57900); box-shadow: 0 4px 10px rgba(182, 107, 0, .25); }
.railway-card-actions { display: grid; grid-template-columns: 1fr; gap: 6px; margin-top: 7px; }
.railway-card-actions .railway-link-editor, .railway-card-actions .railway-note-editor { display: flex; }
.railway-card-actions .railway-link-icon, .railway-card-actions .railway-note-icon { width: 100%; height: 32px; border-color: #e1e5ec; background: #fafbfc; filter: none; opacity: 1; color: #647084; font-size: 11px; }
.railway-card-actions .railway-link-icon::after { content: " 商品链接"; }
.railway-card-actions .railway-note-icon::after { content: " 备注"; }
@media (max-width: 1600px) { .railway-card-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
@media (max-width: 1350px) { .railway-card-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 1050px) { .railway-card-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 780px) { .railway-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 540px) { .railway-card-grid { grid-template-columns: 1fr; } }

/* 客户查单端 · 国铁选品（与管理端共用商品卡视觉） */
.customer-railway-products-view { min-width: 0; padding-top: 10px; }
.customer-railway-filter {
  display: grid;
  gap: 10px;
  margin-bottom: 12px;
  padding: 12px 14px;
  border-color: #dfe5ed;
  background: #fff;
}
.customer-railway-filter-main {
  display: grid;
  grid-template-columns: minmax(270px, 1fr) minmax(250px, .58fr) minmax(250px, .58fr) 140px auto auto auto;
  gap: 8px;
  align-items: center;
}
.customer-railway-filter-main > input,
.customer-railway-filter-main > select,
.customer-railway-range {
  height: 42px;
  min-width: 0;
  border: 1px solid #d8e0eb;
  border-radius: 9px;
  background: #fbfcfe;
}
.customer-railway-filter-main > input,
.customer-railway-filter-main > select { padding: 0 12px; }
.customer-railway-range { display: flex; align-items: center; overflow: hidden; }
.customer-railway-range > span { flex: 0 0 auto; padding-left: 11px; color: #536178; font-size: 12px; font-weight: 750; }
.customer-railway-range > input { width: 72px; min-width: 0; height: 100%; padding: 0 5px; border: 0; outline: 0; background: transparent; font-size: 12px; }
.customer-railway-range > i { color: #a0a9b8; font-size: 11px; font-style: normal; }
.customer-railway-order { display: grid; grid-template-columns: 1fr 1fr; height: 42px; overflow: hidden; border: 1px solid #d8e0eb; border-radius: 9px; background: #f7f9fc; }
.customer-railway-order button { min-width: 62px; padding: 0 9px; border: 0; border-radius: 0; color: #647087; background: transparent; box-shadow: none; font-size: 12px; }
.customer-railway-order button.active { color: #fff; background: linear-gradient(135deg, #173966, #087f73); }
.customer-railway-filter-summary { display: flex; align-items: center; justify-content: space-between; padding-top: 7px; border-top: 1px solid #edf0f4; color: #637087; font-size: 12px; }
.customer-railway-filter-summary span { color: #17243a; font-weight: 750; }
.customer-railway-filter-summary em { color: #8a95a7; font-style: normal; }
.customer-railway-card-grid { align-items: stretch; padding: 0 0 12px; }
.customer-railway-card { cursor: default; }
.customer-railway-card-loading { min-height: 470px; pointer-events: none; overflow: hidden; }
.customer-railway-card-skeleton { width: 100%; height: 100%; min-height: 470px; border-radius: inherit; background: linear-gradient(100deg, #f7f9fc 18%, #edf2f7 36%, #f7f9fc 54%); background-size: 220% 100%; animation: railway-image-skeleton 1.05s ease-in-out infinite; }
.customer-railway-card .railway-card-company-footer strong { flex: 1; }
.customer-railway-pager {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 2px;
  padding: 10px 13px;
  color: #647087;
  font-size: 12px;
}
.customer-railway-pager > div { display: flex; align-items: center; gap: 6px; }
.customer-railway-pager label { display: flex; align-items: center; gap: 5px; }
.customer-railway-pager input { width: 50px; height: 34px; padding: 0 6px; text-align: center; }
.customer-railway-page-numbers { display: flex; gap: 4px; }
.customer-railway-page-numbers button {
  width: 34px;
  min-width: 34px;
  height: 34px;
  padding: 0;
  border: 1px solid #d8e0eb;
  border-radius: 7px;
  color: #506078;
  background: #fff;
  box-shadow: none;
}
.customer-railway-page-numbers button.active { border-color: #173d72; color: #fff; background: #173d72; }
@media (max-width: 1500px) {
  .customer-railway-filter-main { grid-template-columns: minmax(260px, 1fr) minmax(230px, .7fr) minmax(230px, .7fr) 130px auto; }
  .customer-railway-filter-main > .primary,
  .customer-railway-filter-main > .ghost { min-width: 70px; }
}
@media (max-width: 1100px) {
  .customer-railway-filter-main { grid-template-columns: 1fr 1fr; }
  .customer-railway-filter-main > input:first-child { grid-column: 1 / -1; }
}
@media (max-width: 680px) {
  .customer-railway-filter-main { grid-template-columns: 1fr; }
  .customer-railway-filter-main > input:first-child { grid-column: auto; }
  .customer-railway-filter-summary, .customer-railway-pager { align-items: flex-start; flex-direction: column; gap: 8px; }
  .customer-railway-pager > div { flex-wrap: wrap; }
}
.railway-table th:nth-child(7), .railway-table td:nth-child(7) { width: 88px; }
.railway-table th:nth-child(8), .railway-table td:nth-child(8) { width: clamp(68px, 6vw, 105px); }
.railway-table th:nth-child(9), .railway-table td:nth-child(9) { width: clamp(82px, 7vw, 115px); }
.railway-table th:nth-child(10), .railway-table td:nth-child(10) { width: clamp(150px, 15vw, 285px); text-align: left; overflow: hidden; }
.railway-table th:nth-child(11), .railway-table td:nth-child(11),
.railway-table th:nth-child(12), .railway-table td:nth-child(12) { width: 58px; text-align: center; overflow: visible; }
.railway-table th:nth-child(13), .railway-table td:nth-child(13) { width: 82px; text-align: center; }
.railway-table th:nth-child(14), .railway-table td:nth-child(14) { width: clamp(116px, 9vw, 155px); text-align: left; overflow: hidden; }
.railway-table th:nth-child(15), .railway-table td:nth-child(15) { width: 72px; text-align: center; overflow: visible; }
.railway-import-body { display: grid; gap: 14px; padding: 20px; }
.railway-import-body p { margin: 0; color: var(--muted); }
.railway-import-body textarea { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; resize: vertical; }

.railway-shop-directory-panel {
  width: min(1080px, calc(100vw - 40px));
  max-height: calc(100vh - 36px);
  margin-top: 0;
  border: 1px solid #c9d4e5;
  border-radius: 16px;
  box-shadow: 0 24px 70px rgba(16, 37, 70, .28);
}
.railway-shop-directory-heading { display: grid !important; gap: 2px !important; justify-content: start !important; }
.railway-shop-directory-heading strong { color: #10294e; font-size: 20px; }
.railway-shop-directory-heading small { color: #7a879b; }
.railway-shop-directory-body {
  display: grid;
  gap: 14px;
  max-height: calc(100vh - 110px);
  padding: 18px;
  overflow: auto;
  background: #f5f7fa;
}
.railway-shop-directory-toolbar {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) auto auto auto;
  gap: 10px;
}
.railway-shop-directory-toolbar input,
.railway-shop-directory-editor input,
.railway-shop-directory-editor select,
.railway-shop-directory-editor textarea,
.railway-shop-directory-import textarea {
  width: 100%;
  min-width: 0;
  border: 1px solid #cbd5e3;
  border-radius: 10px;
  background: #fff;
  padding: 10px 12px;
  color: #17243a;
}
.railway-shop-directory-editor,
.railway-shop-directory-import {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  padding: 15px;
  border: 1px solid #cad6e7;
  border-radius: 13px;
  background: #fff;
}
.railway-shop-directory-editor.hidden,
.railway-shop-directory-import.hidden { display: none; }
.railway-shop-directory-editor label { display: grid; gap: 6px; color: #52647f; font-weight: 700; }
.railway-shop-directory-editor em { color: #d43f3a; font-style: normal; }
.railway-shop-directory-editor .hidden { display: none; }
.railway-shop-field-title {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 3px;
}
.railway-shop-field-title small { color: #7b899c; font-size: 12px; font-weight: 500; }
.railway-shop-field-title strong { color: #173d72; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-weight: 800; }
.railway-shop-directory-invoice { grid-column: 1 / -1; }
.railway-shop-directory-editor .actions,
.railway-shop-directory-import .actions { grid-column: 1 / -1; display: flex; gap: 9px; }
.railway-shop-directory-import { grid-template-columns: 1fr; }
.railway-shop-directory-import p { margin: 0; color: #6f7d92; }
.railway-shop-import-guide { display: flex; align-items: baseline; gap: 14px; color: #6f7d92; }
.railway-shop-import-guide strong { color: #132c50; font-size: 16px; white-space: nowrap; }
.railway-shop-import-summary { display: flex; align-items: center; gap: 18px; color: #65758d; }
.railway-shop-import-summary .is-valid strong { color: #15805f; }
.railway-shop-import-summary .is-error strong { color: #d33f3f; }
.railway-shop-import-summary button { margin-left: auto; }
.railway-shop-import-summary button.active { border-color: #e49b9b; background: #fff2f2; color: #bd3030; }
.railway-shop-import-paste { padding: 12px 15px; border: 1px dashed #9eacc0; border-radius: 10px; background: #f8fafc; color: #66758b; text-align: center; cursor: text; }
.railway-shop-import-paste:focus { outline: 2px solid rgba(54, 89, 230, .22); border-color: #3659e6; background: #fff; }
.railway-shop-import-grid-wrap { max-height: 390px; overflow: auto; border: 1px solid #d9e1ec; border-radius: 12px; background: #fff; }
.railway-shop-import-grid { width: 100%; border-collapse: separate; border-spacing: 0; table-layout: fixed; }
.railway-shop-import-grid th { position: sticky; top: 0; z-index: 2; padding: 10px 12px; border-bottom: 1px solid #d9e1ec; background: #f4f6f9; color: #53627a; text-align: left; }
.railway-shop-import-grid th small { display: inline-block; margin-right: 6px; color: #3659e6; }
.railway-shop-import-grid th.row-number, .railway-shop-import-grid td.row-number { width: 64px; text-align: center; }
.railway-shop-import-grid th:nth-child(4) { width: 250px; }
.railway-shop-import-grid th:last-child { width: 82px; }
.railway-shop-import-grid td { padding: 6px 8px; border-bottom: 1px solid #edf0f4; color: #33435b; }
.railway-shop-import-grid td.row-number { position: sticky; left: 0; background: #f8fafc; color: #78869a; font-variant-numeric: tabular-nums; }
.railway-shop-import-grid input { width: 100%; min-width: 0; padding: 8px 9px; border: 1px solid transparent; border-radius: 7px; background: transparent; color: #17243a; }
.railway-shop-import-grid input:focus { outline: none; border-color: #92a8ef; background: #fff; }
.railway-shop-import-grid tr.has-error td { background: #fff8f8; }
.railway-shop-import-grid tr.has-error td.row-number { background: #ffeded; color: #c43131; font-weight: 800; }
.railway-shop-import-grid tr.has-error input { border-color: #efb5b5; background: #fff; }
.railway-shop-import-grid .validation { font-size: 13px; }
.railway-shop-import-grid .error-mark, .railway-shop-import-grid .valid-mark { display: inline-flex; margin-right: 7px; padding: 2px 7px; border-radius: 999px; font-weight: 700; }
.railway-shop-import-grid .error-mark { background: #ffe3e3; color: #c43131; }
.railway-shop-import-grid .valid-mark { background: #e3f5ec; color: #167253; }
.railway-shop-import-empty { height: 150px; color: #8794a8; text-align: center; }
.railway-shop-directory-table-wrap {
  overflow: auto;
  border: 1px solid #d6deea;
  border-radius: 13px;
  background: #fff;
}
.railway-shop-directory-table { width: 100%; min-width: 1260px; border-collapse: collapse; table-layout: fixed; }
.railway-shop-directory-table th,
.railway-shop-directory-table td { padding: 11px 12px; border-bottom: 1px solid #e5eaf1; text-align: left; vertical-align: middle; }
.railway-shop-directory-table th { color: #52647f; background: #f1f4f8; font-size: 13px; }
.railway-shop-directory-table th:nth-child(1) { width: 15%; }
.railway-shop-directory-table th:nth-child(2) { width: 20%; }
.railway-shop-directory-table th:nth-child(3) { width: 16%; }
.railway-shop-directory-table th:nth-child(4) { width: 9%; }
.railway-shop-directory-table th:nth-child(5) { width: 15%; }
.railway-shop-directory-table th:nth-child(6) { width: 10%; }
.railway-shop-directory-table th:nth-child(7) { width: 15%; }
.railway-shop-directory-table td small { display: block; margin-top: 4px; color: #8290a3; }
.railway-shop-role { display: inline-flex; padding: 4px 8px; border-radius: 999px; color: #315b86; background: #e8f0fa; font-weight: 800; }
.railway-shop-role.is-main { color: #075f55; background: #dff5ef; }
.railway-shop-rating { display: inline-flex; min-width: 48px; justify-content: center; padding: 5px 9px; border-radius: 999px; font-weight: 800; color: #35506f; background: #eef2f7; }
.railway-shop-rating.rating-aaa { color: #8a5700; background: #fff1c9; }
.railway-shop-rating.rating-aa { color: #176044; background: #dff5e9; }
.railway-shop-rating.rating-a { color: #174b8a; background: #e3edff; }
.railway-shop-rating.rating-b { color: #6b4b16; background: #f7eddc; }
.railway-shop-rating.rating-c { color: #9f3333; background: #fbe5e5; }
.railway-shop-directory-invoice-cell { color: #637187; white-space: pre-line; overflow-wrap: anywhere; }
.railway-shop-directory-actions { white-space: nowrap; }
.railway-shop-directory-actions button { padding: 6px 9px; }
.railway-shop-directory-empty { height: 150px; color: #8a96a8; text-align: center !important; }
.railway-shop-directory-footer { color: #728096; text-align: right; }
.railway-shop-customer-binding-panel { width: min(720px, calc(100vw - 36px)); border-radius: 16px; }
.railway-shop-customer-binding-body { display: grid; gap: 14px; padding: 18px; }
.railway-shop-customer-binding-body > input[type="search"] {
  width: 100%; border: 1px solid #cbd5e3; border-radius: 10px; padding: 11px 13px;
}
.railway-shop-customer-binding-list {
  display: grid; gap: 8px; max-height: min(460px, 55vh); padding: 4px; overflow: auto;
}
.railway-shop-customer-binding-list label {
  display: flex; align-items: center; gap: 12px; padding: 11px 12px;
  border: 1px solid #dbe2ec; border-radius: 10px; background: #fff; cursor: pointer;
}
.railway-shop-customer-binding-list label:has(input:checked) { border-color: #72cbbf; background: #effaf8; }
.railway-shop-customer-binding-list input { width: 18px; height: 18px; }
.railway-shop-customer-binding-list span { display: grid; gap: 3px; }
.railway-shop-customer-binding-list small { color: #7a879b; }
.railway-shop-customer-binding-body .actions { display: flex; align-items: center; gap: 12px; color: #718098; }
@media (max-width: 820px) {
  .railway-shop-directory-toolbar { grid-template-columns: 1fr 1fr; }
  .railway-shop-directory-toolbar input { grid-column: 1 / -1; }
  .railway-shop-directory-editor { grid-template-columns: 1fr; }
  .railway-shop-directory-invoice { grid-column: auto; }
  .railway-shop-directory-table { min-width: 820px; }
}

/* Customer portal: independent teal technology login screen. */
#customer.portal-locked > .customer-tech-login { display: flex !important; }
#customer.portal-locked > .topbar { display: none !important; }
#customer:not(.portal-locked) > .customer-tech-login { display: none !important; }
.customer-portal #customer > .customer-tech-login { margin: 0 !important; }
#customer .customer-login-card .customer-login-button {
  border-color: transparent;
  color: #032521;
  background: linear-gradient(100deg, #2adac2, #24e5d8);
  box-shadow: 0 9px 28px rgba(30, 218, 188, .3), inset 0 1px rgba(255,255,255,.35);
}

/* Keep the standalone supplier login visible under the legacy portal lock rule. */
#supplierPortal.portal-locked > .supplier-tech-login { display: flex !important; }
#supplierPortal.portal-locked > .topbar { display: none !important; }
#supplierPortal:not(.portal-locked) > .supplier-tech-login { display: none !important; }
.supplier-portal #supplierPortal > .supplier-tech-login { margin: 0 !important; }
#supplierPortal .supplier-login-card .supplier-login-button {
  border-color: transparent;
  color: #2b1900;
  background: linear-gradient(100deg, #ffbb35, #ff946b);
  box-shadow: 0 9px 28px rgba(239,157,27,.34), inset 0 1px rgba(255,255,255,.35);
}

/* Customer funds smart sorting and pagination. No extra data columns. */
#funds .funds-customer-toolbar { flex-wrap: wrap; }
#funds .funds-smart-sort {
  padding: 5px 9px;
  border: 1px solid #cbdcff;
  border-radius: 6px;
  color: #2f63cf;
  background: #f4f7ff;
  font-weight: 650;
  white-space: nowrap;
}
#funds .funds-customer-page-size {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
  color: var(--muted);
  font-size: 12px;
  white-space: nowrap;
}
#funds .funds-customer-page-size select { width: 82px; height: 30px; padding: 0 8px; }
#funds .finance-customers-wrap { height: clamp(360px, 52vh, 620px); max-height: none; }
.funds-customer-pager {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 48px;
  padding: 8px 14px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 12px;
}
.funds-customer-pager > div { display: flex; align-items: center; gap: 6px; }
.funds-customer-pager button { min-width: 34px; height: 30px; padding: 0 10px; }
@media (max-width: 760px) {
  #funds .funds-customer-page-size { margin-left: 0; }
  .funds-customer-pager { align-items: flex-start; flex-direction: column; }
  .funds-customer-pager > div { flex-wrap: wrap; }
}

/* Supplier portal: independent amber-gold technology login screen. */
#supplierPortal.portal-locked > .supplier-tech-login { display: flex !important; }
#supplierPortal.portal-locked > .topbar { display: none !important; }
#supplierPortal:not(.portal-locked) > .supplier-tech-login { display: none !important; }
.supplier-portal #supplierPortal > .supplier-tech-login { margin: 0 !important; }
.supplier-tech-login { position:fixed; inset:0; z-index:1000; align-items:center; justify-content:center; min-height:100vh; overflow:hidden; color:#fff2d0; background:radial-gradient(circle at 12% 24%,rgba(172,82,0,.48),transparent 32%),radial-gradient(circle at 89% 14%,rgba(93,36,184,.48),transparent 34%),radial-gradient(circle at 82% 94%,rgba(152,14,61,.34),transparent 39%),linear-gradient(116deg,#120b02 0%,#0b0805 47%,#19091c 100%); }
.supplier-tech-login::before { content:""; position:absolute; inset:0; pointer-events:none; opacity:.2; background:repeating-linear-gradient(0deg,transparent 0 3px,rgba(255,181,35,.14) 3px 4px); }
.supplier-login-grid { position:absolute; left:-8%; right:-8%; bottom:-31%; height:72%; opacity:.43; transform:perspective(360px) rotateX(61deg); transform-origin:center bottom; background-image:linear-gradient(rgba(237,164,20,.36) 1px,transparent 1px),linear-gradient(90deg,rgba(237,164,20,.31) 1px,transparent 1px); background-size:72px 46px; mask-image:linear-gradient(to bottom,transparent 0,#000 24%,#000 88%,transparent 100%); }
.supplier-login-network { position:absolute; width:34vw; height:34vw; min-width:360px; min-height:360px; opacity:.55; background:radial-gradient(circle at 9% 20%,#ffb71f 0 2px,transparent 3px),radial-gradient(circle at 26% 47%,#ffb71f 0 2px,transparent 3px),radial-gradient(circle at 53% 16%,#ffb71f 0 2px,transparent 3px),radial-gradient(circle at 76% 35%,#ffb71f 0 2px,transparent 3px),radial-gradient(circle at 88% 71%,#ffb71f 0 2px,transparent 3px),linear-gradient(31deg,transparent 41%,rgba(244,171,28,.34) 42% 42.5%,transparent 43%),linear-gradient(143deg,transparent 48%,rgba(244,171,28,.28) 49% 49.5%,transparent 50%); filter:drop-shadow(0 0 7px rgba(255,177,25,.43)); pointer-events:none; }
.supplier-network-left { left:-3%; top:-6%; transform:rotate(-8deg); } .supplier-network-right { right:-4%; top:23%; transform:rotate(164deg); }
.supplier-login-brandbar { position:absolute; top:clamp(24px,4.2vh,58px); left:clamp(24px,3.8vw,72px); right:clamp(24px,4vw,78px); display:flex; align-items:flex-start; justify-content:space-between; z-index:2; }
.supplier-login-brand { display:flex; align-items:center; gap:14px; }
.supplier-login-brandmark { display:grid; place-items:center; width:62px; height:62px; border:1px solid rgba(255,195,70,.58); border-radius:17px; color:#291700; background:linear-gradient(145deg,#ffc342,#f4a713); box-shadow:0 0 25px rgba(244,166,19,.42),inset 0 1px rgba(255,255,255,.45); font-size:30px; font-weight:900; }
.supplier-login-brand strong { display:block; font-size:24px; letter-spacing:.03em; text-shadow:0 0 13px rgba(255,197,82,.34); }
.supplier-login-brand small { display:block; margin-top:3px; color:#e4b554; font:13px/1.2 ui-monospace,SFMono-Regular,Menlo,monospace; letter-spacing:.34em; }
.supplier-login-online { display:flex; align-items:center; gap:10px; margin-top:12px; color:#e1b557; font-size:14px; letter-spacing:.06em; }
.supplier-login-online i { width:9px; height:9px; border-radius:50%; background:#ffb51d; box-shadow:0 0 12px #ffb51d; } .supplier-login-online span { font-family:ui-monospace,SFMono-Regular,Menlo,monospace; letter-spacing:.2em; } .supplier-login-online em { font-style:normal; }
.supplier-login-card { position:relative; width:min(510px,calc(100vw - 32px)); margin-top:2vh; padding:54px 50px 46px; border:1px solid rgba(240,168,26,.38); border-radius:2px; color:#fff1cb; background:linear-gradient(145deg,rgba(30,17,3,.96),rgba(19,11,4,.93)); box-shadow:0 28px 80px rgba(12,5,0,.66),inset 0 0 34px rgba(235,158,15,.06); z-index:3; }
.supplier-tech-corner { position:absolute; width:28px; height:28px; border-color:#efad1c; filter:drop-shadow(0 0 5px rgba(239,173,28,.8)); }
.supplier-corner-tl { left:-3px; top:-3px; border-left:3px solid; border-top:3px solid; border-radius:9px 0 0; } .supplier-corner-tr { right:-3px; top:-3px; border-right:3px solid; border-top:3px solid; border-radius:0 9px 0 0; } .supplier-corner-bl { left:-3px; bottom:-3px; border-left:3px solid; border-bottom:3px solid; border-radius:0 0 0 9px; } .supplier-corner-br { right:-3px; bottom:-3px; border-right:3px solid; border-bottom:3px solid; border-radius:0 0 9px; }
.supplier-login-console { margin-bottom:20px; color:#efad1c; font:13px/1 ui-monospace,SFMono-Regular,Menlo,monospace; letter-spacing:.38em; }
.supplier-login-card h1 { margin:0; color:#fff1cb; font-size:38px; line-height:1.2; letter-spacing:.04em; }
.supplier-login-card > p { margin:11px 0 35px; color:#c5a669; font-size:16px; letter-spacing:.05em; }
.supplier-login-field { display:block; margin-top:20px; color:#c5a669; font-size:14px; letter-spacing:.08em; }
.supplier-login-input { position:relative; display:block; margin-top:9px; }
.supplier-login-input input { width:100%; height:56px; margin:0; padding:0 18px 0 52px; border:2px solid rgba(220,148,14,.72); border-radius:13px; outline:none; color:#4b2d00; -webkit-text-fill-color:#4b2d00; caret-color:#4b2d00; background:#fff8e7; box-shadow:inset 0 0 18px rgba(169,100,8,.06),0 0 18px rgba(220,148,14,.12); font-size:18px; font-weight:700; }
.supplier-login-input input:focus { border-color:#f1ae1c; box-shadow:0 0 0 3px rgba(241,174,28,.12),0 0 22px rgba(241,174,28,.15); } .supplier-login-input input::placeholder { color:#796440; }
.supplier-login-input input:-webkit-autofill,
.supplier-login-input input:-webkit-autofill:hover,
.supplier-login-input input:-webkit-autofill:focus {
  color:#4b2d00 !important;
  -webkit-text-fill-color:#4b2d00 !important;
  caret-color:#4b2d00 !important;
  background:#fff8e7 !important;
  border-color:rgba(220,148,14,.78) !important;
  box-shadow:0 0 0 1000px #fff8e7 inset,0 0 0 3px rgba(241,174,28,.1) !important;
  font-weight:700 !important;
  transition:background-color 9999s ease-out 0s;
}
.supplier-account-icon,.supplier-password-icon { position:absolute; left:20px; top:50%; z-index:1; transform:translateY(-50%); }
.supplier-account-icon { width:15px; height:15px; border-radius:50% 50% 42% 42%; background:#168bd1; box-shadow:0 8px 0 3px #168bd1; transform:translateY(-67%) scale(.72); }
.supplier-password-icon { width:14px; height:13px; border:2px solid #c9a934; border-radius:3px; } .supplier-password-icon::before { content:""; position:absolute; left:2px; top:-10px; width:6px; height:8px; border:2px solid #c9a934; border-bottom:0; border-radius:6px 6px 0 0; }
.supplier-login-assist { display:flex; justify-content:space-between; align-items:center; margin:18px 0 25px; color:#e6a914; font-size:13px; }
.supplier-login-assist label { display:inline-flex; align-items:center; gap:7px; color:#c7aa71; cursor:pointer; } .supplier-login-assist input { width:16px; height:16px; margin:0; accent-color:#f1ad1c; }
#supplierPortal .supplier-login-card .supplier-login-button { width:100%; height:60px; margin:0; border:0; border-radius:13px; color:#2b1900; background:linear-gradient(100deg,#ffbb35,#ff946b); box-shadow:0 9px 28px rgba(239,157,27,.34),inset 0 1px rgba(255,255,255,.35); font-size:18px; font-weight:800; letter-spacing:.26em; }
.supplier-login-button:hover { transform:translateY(-1px); filter:brightness(1.07); } .supplier-login-button:active { transform:translateY(1px); }
.supplier-login-footer { position:absolute; bottom:24px; left:0; right:0; color:#91722f; text-align:center; font:12px/1.2 ui-monospace,SFMono-Regular,Menlo,monospace; letter-spacing:.08em; z-index:2; } .supplier-login-footer b { margin:0 9px; }
@media (max-width:720px) { .supplier-login-brandbar { top:18px; left:18px; right:18px; } .supplier-login-brandmark { width:48px; height:48px; border-radius:13px; font-size:24px; } .supplier-login-brand strong { font-size:17px; } .supplier-login-brand small { font-size:9px; letter-spacing:.2em; } .supplier-login-online { display:none; } .supplier-login-card { margin-top:45px; padding:38px 26px 32px; } .supplier-login-card h1 { font-size:31px; } .supplier-login-card > p { margin-bottom:25px; font-size:14px; } .supplier-login-assist { align-items:flex-start; gap:12px; font-size:12px; } .supplier-login-footer { bottom:12px; font-size:10px; } }

.customer-tech-login {
  position: fixed;
  inset: 0;
  z-index: 1000;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  overflow: hidden;
  color: #ddfff9;
  background:
    radial-gradient(circle at 12% 28%, rgba(0, 135, 102, .38), transparent 31%),
    radial-gradient(circle at 90% 18%, rgba(0, 116, 148, .34), transparent 34%),
    radial-gradient(circle at 83% 94%, rgba(0, 108, 119, .3), transparent 39%),
    linear-gradient(116deg, #020f10 0%, #020d10 47%, #03151a 100%);
}
.customer-tech-login::before { content:""; position:absolute; inset:0; pointer-events:none; opacity:.2; background:repeating-linear-gradient(0deg,transparent 0 3px,rgba(49,224,196,.14) 3px 4px); }
.customer-login-grid { position:absolute; left:-8%; right:-8%; bottom:-31%; height:72%; opacity:.43; transform:perspective(360px) rotateX(61deg); transform-origin:center bottom; background-image:linear-gradient(rgba(25,210,180,.35) 1px,transparent 1px),linear-gradient(90deg,rgba(25,210,180,.31) 1px,transparent 1px); background-size:72px 46px; mask-image:linear-gradient(to bottom,transparent 0,#000 24%,#000 88%,transparent 100%); }
.customer-login-network { position:absolute; width:34vw; height:34vw; min-width:360px; min-height:360px; opacity:.55; background:radial-gradient(circle at 9% 20%,#25e7ca 0 2px,transparent 3px),radial-gradient(circle at 26% 47%,#25e7ca 0 2px,transparent 3px),radial-gradient(circle at 53% 16%,#25e7ca 0 2px,transparent 3px),radial-gradient(circle at 76% 35%,#25e7ca 0 2px,transparent 3px),radial-gradient(circle at 88% 71%,#25e7ca 0 2px,transparent 3px),linear-gradient(31deg,transparent 41%,rgba(25,210,180,.33) 42% 42.5%,transparent 43%),linear-gradient(143deg,transparent 48%,rgba(25,210,180,.28) 49% 49.5%,transparent 50%); filter:drop-shadow(0 0 7px rgba(34,228,196,.45)); pointer-events:none; }
.customer-network-left { left:-3%; top:-6%; transform:rotate(-8deg); } .customer-network-right { right:-4%; top:23%; transform:rotate(164deg); }
.customer-login-brandbar { position:absolute; top:clamp(24px,4.2vh,58px); left:clamp(24px,3.8vw,72px); right:clamp(24px,4vw,78px); display:flex; align-items:flex-start; justify-content:space-between; z-index:2; }
.customer-login-brand { display:flex; align-items:center; gap:14px; }
.customer-login-brandmark { display:grid; place-items:center; width:62px; height:62px; border:1px solid rgba(89,242,218,.55); border-radius:17px; color:#042522; background:linear-gradient(145deg,#3de2cc,#11bca9); box-shadow:0 0 25px rgba(24,218,188,.4),inset 0 1px rgba(255,255,255,.45); font-size:30px; font-weight:900; }
.customer-login-brand strong { display:block; font-size:24px; letter-spacing:.03em; text-shadow:0 0 13px rgba(62,235,207,.35); }
.customer-login-brand small { display:block; margin-top:3px; color:#77d8c9; font:13px/1.2 ui-monospace,SFMono-Regular,Menlo,monospace; letter-spacing:.34em; }
.customer-login-online { display:flex; align-items:center; gap:10px; margin-top:12px; color:#6ed7ca; font-size:14px; letter-spacing:.06em; }
.customer-login-online i { width:9px; height:9px; border-radius:50%; background:#29e1c7; box-shadow:0 0 12px #29e1c7; } .customer-login-online span { font-family:ui-monospace,SFMono-Regular,Menlo,monospace; letter-spacing:.2em; } .customer-login-online em { font-style:normal; }
.customer-login-card { position:relative; width:min(510px,calc(100vw - 32px)); margin-top:2vh; padding:54px 50px 46px; border:1px solid rgba(35,214,184,.34); border-radius:2px; color:#e2fff9; background:linear-gradient(145deg,rgba(2,25,25,.95),rgba(2,17,20,.92)); box-shadow:0 28px 80px rgba(0,10,10,.65),inset 0 0 34px rgba(25,210,180,.05); z-index:3; }
.customer-tech-corner { position:absolute; width:28px; height:28px; border-color:#31e0c3; filter:drop-shadow(0 0 5px rgba(49,224,195,.8)); }
.customer-corner-tl { left:-3px; top:-3px; border-left:3px solid; border-top:3px solid; border-radius:9px 0 0; } .customer-corner-tr { right:-3px; top:-3px; border-right:3px solid; border-top:3px solid; border-radius:0 9px 0 0; } .customer-corner-bl { left:-3px; bottom:-3px; border-left:3px solid; border-bottom:3px solid; border-radius:0 0 0 9px; } .customer-corner-br { right:-3px; bottom:-3px; border-right:3px solid; border-bottom:3px solid; border-radius:0 0 9px; }
.customer-login-console { margin-bottom:20px; color:#2be1c6; font:13px/1 ui-monospace,SFMono-Regular,Menlo,monospace; letter-spacing:.38em; }
.customer-login-card h1 { margin:0; color:#e8fff9; font-size:38px; line-height:1.2; letter-spacing:.04em; }
.customer-login-card > p { margin:11px 0 35px; color:#75c9bd; font-size:16px; letter-spacing:.05em; }
.customer-login-field { display:block; margin-top:20px; color:#75c9bd; font-size:14px; letter-spacing:.08em; }
.customer-login-input { position:relative; display:block; margin-top:9px; }
.customer-login-input input { width:100%; height:56px; margin:0; padding:0 18px 0 52px; border:2px solid rgba(30,202,173,.72); border-radius:13px; outline:none; color:#073f39; -webkit-text-fill-color:#073f39; caret-color:#073f39; background:#effffb; box-shadow:inset 0 0 18px rgba(22,133,116,.06),0 0 18px rgba(30,202,173,.12); font-size:18px; font-weight:700; }
.customer-login-input input:focus { border-color:#2be1c6; box-shadow:0 0 0 3px rgba(43,225,198,.12),0 0 22px rgba(43,225,198,.15); } .customer-login-input input::placeholder { color:#47746e; }
.customer-login-input input:-webkit-autofill,
.customer-login-input input:-webkit-autofill:hover,
.customer-login-input input:-webkit-autofill:focus {
  color:#073f39 !important;
  -webkit-text-fill-color:#073f39 !important;
  caret-color:#073f39 !important;
  background:#effffb !important;
  border-color:rgba(30,202,173,.78) !important;
  box-shadow:0 0 0 1000px #effffb inset,0 0 0 3px rgba(43,225,198,.1) !important;
  font-weight:700 !important;
  transition:background-color 9999s ease-out 0s;
}
.customer-account-icon,.customer-password-icon { position:absolute; left:20px; top:50%; z-index:1; transform:translateY(-50%); }
.customer-account-icon { width:15px; height:15px; border-radius:50% 50% 42% 42%; background:#168bd1; box-shadow:0 8px 0 3px #168bd1; transform:translateY(-67%) scale(.72); }
.customer-password-icon { width:14px; height:13px; border:2px solid #c9a934; border-radius:3px; } .customer-password-icon::before { content:""; position:absolute; left:2px; top:-10px; width:6px; height:8px; border:2px solid #c9a934; border-bottom:0; border-radius:6px 6px 0 0; }
.customer-login-assist { display:flex; justify-content:space-between; align-items:center; margin:18px 0 25px; color:#40d8c1; font-size:13px; }
.customer-login-assist label { display:inline-flex; align-items:center; gap:7px; color:#82bdb5; cursor:pointer; } .customer-login-assist input { width:16px; height:16px; margin:0; accent-color:#20cfb7; }
.customer-login-button { width:100%; height:60px; margin:0; border:0; border-radius:13px; color:#032521; background:linear-gradient(100deg,#2adac2,#24e5d8); box-shadow:0 9px 28px rgba(30,218,188,.3),inset 0 1px rgba(255,255,255,.35); font-size:18px; font-weight:800; letter-spacing:.26em; }
.customer-login-button:hover { transform:translateY(-1px); filter:brightness(1.07); } .customer-login-button:active { transform:translateY(1px); }
.customer-login-footer { position:absolute; bottom:24px; left:0; right:0; color:#3b887e; text-align:center; font:12px/1.2 ui-monospace,SFMono-Regular,Menlo,monospace; letter-spacing:.08em; z-index:2; } .customer-login-footer b { margin:0 9px; }
@media (max-width:720px) { .customer-login-brandbar { top:18px; left:18px; right:18px; } .customer-login-brandmark { width:48px; height:48px; border-radius:13px; font-size:24px; } .customer-login-brand strong { font-size:17px; } .customer-login-brand small { font-size:9px; letter-spacing:.2em; } .customer-login-online { display:none; } .customer-login-card { margin-top:45px; padding:38px 26px 32px; } .customer-login-card h1 { font-size:31px; } .customer-login-card > p { margin-bottom:25px; font-size:14px; } .customer-login-assist { align-items:flex-start; gap:12px; font-size:12px; } .customer-login-footer { bottom:12px; font-size:10px; } }

/* Independent management login: approved futuristic single-entry design. */
#loginScreen.admin-login-screen {
  --login-violet: #8c78ff; position: fixed; inset: 0; display: flex; align-items: center;
  justify-content: center; min-height: 100vh; overflow: hidden; color: #edf1ff;
  background: radial-gradient(circle at 13% 24%, rgba(52,64,190,.55), transparent 31%), radial-gradient(circle at 89% 13%, rgba(104,37,181,.55), transparent 33%), radial-gradient(circle at 80% 93%, rgba(55,56,178,.4), transparent 38%), linear-gradient(115deg,#05071d 0%,#08091f 45%,#10072b 100%);
  backdrop-filter: none; z-index: 1000;
}
#loginScreen.admin-login-screen.hidden { display: none; }
.admin-login-screen::before { content:""; position:absolute; inset:0; pointer-events:none; opacity:.18; background:repeating-linear-gradient(0deg,transparent 0 3px,rgba(142,151,255,.18) 3px 4px); }
.login-tech-grid { position:absolute; left:-8%; right:-8%; bottom:-31%; height:72%; opacity:.42; transform:perspective(360px) rotateX(61deg); transform-origin:center bottom; background-image:linear-gradient(rgba(102,119,255,.38) 1px,transparent 1px),linear-gradient(90deg,rgba(102,119,255,.34) 1px,transparent 1px); background-size:72px 46px; mask-image:linear-gradient(to bottom,transparent 0,#000 24%,#000 88%,transparent 100%); }
.login-network { position:absolute; width:34vw; height:34vw; min-width:360px; min-height:360px; opacity:.55; background:radial-gradient(circle at 9% 20%,#91a2ff 0 2px,transparent 3px),radial-gradient(circle at 26% 47%,#91a2ff 0 2px,transparent 3px),radial-gradient(circle at 53% 16%,#91a2ff 0 2px,transparent 3px),radial-gradient(circle at 76% 35%,#91a2ff 0 2px,transparent 3px),radial-gradient(circle at 88% 71%,#91a2ff 0 2px,transparent 3px),linear-gradient(31deg,transparent 41%,rgba(112,128,255,.38) 42% 42.5%,transparent 43%),linear-gradient(143deg,transparent 48%,rgba(112,128,255,.3) 49% 49.5%,transparent 50%); filter:drop-shadow(0 0 7px rgba(100,115,255,.5)); pointer-events:none; }
.login-network-left { left:-3%; top:-6%; transform:rotate(-8deg); } .login-network-right { right:-4%; top:23%; transform:rotate(164deg); }
.login-brandbar { position:absolute; top:clamp(24px,4.2vh,58px); left:clamp(24px,3.8vw,72px); right:clamp(24px,4vw,78px); display:flex; align-items:flex-start; justify-content:space-between; z-index:2; }
.login-brand-lockup { display:flex; align-items:center; gap:14px; }
.login-brand-mark { display:grid; place-items:center; width:62px; height:62px; border:1px solid rgba(167,175,255,.55); border-radius:17px; color:#101741; background:linear-gradient(145deg,#9da7ff,#6875e9); box-shadow:0 0 25px rgba(104,119,245,.5),inset 0 1px rgba(255,255,255,.5); font-size:30px; font-weight:900; }
.login-brand-copy strong { display:block; font-size:24px; letter-spacing:.03em; text-shadow:0 0 13px rgba(160,171,255,.45); }
.login-brand-copy small { display:block; margin-top:3px; color:#aab1df; font:13px/1.2 ui-monospace,SFMono-Regular,Menlo,monospace; letter-spacing:.34em; }
.login-online { display:flex; align-items:center; gap:10px; margin-top:12px; color:#b9b8dd; font-size:14px; letter-spacing:.06em; }
.login-online i { width:9px; height:9px; border-radius:50%; background:#8984ff; box-shadow:0 0 12px #9c91ff; } .login-online span { font-family:ui-monospace,SFMono-Regular,Menlo,monospace; letter-spacing:.2em; } .login-online em { font-style:normal; }
#loginScreen .tech-login-card { position:relative; width:min(510px,calc(100vw - 32px)); margin-top:2vh; padding:54px 50px 46px; overflow:visible; border:1px solid rgba(130,144,255,.34); border-top:1px solid rgba(130,144,255,.52); border-radius:2px; color:#edf1ff; background:linear-gradient(145deg,rgba(10,12,39,.94),rgba(8,8,30,.91)); box-shadow:0 28px 80px rgba(0,0,15,.55),inset 0 0 34px rgba(82,76,180,.06); z-index:3; }
.tech-corner { position:absolute; width:28px; height:28px; border-color:#8391ff; filter:drop-shadow(0 0 5px rgba(124,139,255,.8)); }
.corner-tl { left:-3px; top:-3px; border-left:3px solid; border-top:3px solid; border-radius:9px 0 0; } .corner-tr { right:-3px; top:-3px; border-right:3px solid; border-top:3px solid; border-radius:0 9px 0 0; } .corner-bl { left:-3px; bottom:-3px; border-left:3px solid; border-bottom:3px solid; border-radius:0 0 0 9px; } .corner-br { right:-3px; bottom:-3px; border-right:3px solid; border-bottom:3px solid; border-radius:0 0 9px; }
.login-console-label { margin-bottom:20px; color:#8e96ef; font:13px/1 ui-monospace,SFMono-Regular,Menlo,monospace; letter-spacing:.38em; }
#loginScreen .tech-login-card h1 { margin:0; color:#f0f2ff; font-size:38px; line-height:1.2; letter-spacing:.04em; }
.login-scope { margin:11px 0 35px; color:#aaaed0; font-size:16px; letter-spacing:.05em; }
.tech-login-field { display:block; margin-top:20px; color:#9ea5cf; font-size:14px; letter-spacing:.08em; }
.tech-input-wrap { position:relative; display:block; margin-top:9px; }
#loginScreen .tech-input-wrap input { width:100%; height:56px; margin:0; padding:0 18px 0 52px; border:1px solid rgba(137,148,245,.62); border-radius:13px; outline:none; color:#f5f6ff; -webkit-text-fill-color:#f5f6ff; caret-color:#f5f6ff; background:#1b1f52; box-shadow:inset 0 0 20px rgba(77,83,176,.14),0 0 18px rgba(105,100,220,.1); font-size:18px; }
#loginScreen .tech-input-wrap input:focus { border-color:#8a87ff; box-shadow:0 0 0 3px rgba(119,111,255,.14),0 0 22px rgba(109,90,255,.16); } #loginScreen .tech-input-wrap input::placeholder { color:#62688c; }
#loginScreen .tech-input-wrap input:-webkit-autofill,
#loginScreen .tech-input-wrap input:-webkit-autofill:hover,
#loginScreen .tech-input-wrap input:-webkit-autofill:focus {
  color:#f5f6ff !important;
  -webkit-text-fill-color:#f5f6ff !important;
  caret-color:#f5f6ff !important;
  background:#1b1f52 !important;
  border-color:rgba(137,148,245,.72) !important;
  box-shadow:0 0 0 1000px #1b1f52 inset,0 0 0 3px rgba(119,111,255,.1) !important;
  transition:background-color 9999s ease-out 0s;
}
.account-icon,.password-icon { position:absolute; left:20px; top:50%; z-index:1; transform:translateY(-50%); }
.account-icon { width:15px; height:15px; border-radius:50% 50% 42% 42%; background:#2582d4; box-shadow:0 8px 0 3px #2582d4; transform:translateY(-67%) scale(.72); }
.password-icon { width:14px; height:13px; border:2px solid #c9a934; border-radius:3px; } .password-icon::before { content:""; position:absolute; left:2px; top:-10px; width:6px; height:8px; border:2px solid #c9a934; border-bottom:0; border-radius:6px 6px 0 0; }
#loginPass, #customerPassword, #supplierPassword { padding-right:58px; }
.password-visibility-toggle {
  position:absolute; right:10px; top:50%; z-index:3; width:38px; height:38px; margin:0; padding:0;
  transform:translateY(-50%); border:0; border-radius:10px; color:#9ca7d8; background:transparent;
  box-shadow:none; cursor:pointer;
}
#loginScreen .tech-input-wrap > .password-visibility-toggle {
  position:absolute;
  right:10px;
  left:auto;
  top:50%;
  width:38px;
  min-width:38px;
  height:38px;
  margin:0;
  padding:0;
  transform:translateY(-50%);
}
.password-visibility-toggle:hover { background:rgba(125,137,255,.12); }
.password-visibility-toggle:focus-visible { outline:2px solid currentColor; outline-offset:1px; }
.password-visibility-toggle i {
  position:absolute; left:9px; top:12px; width:18px; height:12px; border:2px solid currentColor;
  border-radius:55% 45% 55% 45%; transform:rotate(45deg);
}
.password-visibility-toggle i::before {
  content:""; position:absolute; left:50%; top:50%; width:5px; height:5px; border-radius:50%;
  background:currentColor; transform:translate(-50%,-50%);
}
.password-visibility-toggle.is-visible i::after {
  content:""; position:absolute; left:7px; top:-6px; width:2px; height:22px; border-radius:2px;
  background:currentColor;
}
.customer-login-input .password-visibility-toggle { color:#45dbc4; }
.supplier-login-input .password-visibility-toggle { color:#e9ad2f; }
.login-assist-row { display:flex; justify-content:space-between; align-items:center; margin:18px 0 25px; color:#8f95c8; font-size:13px; }
.login-remember { display:inline-flex; align-items:center; gap:7px; cursor:pointer; } .login-remember input { width:16px; height:16px; margin:0; accent-color:#557eff; }
#loginScreen .tech-login-button { width:100%; height:60px; margin:0; border:0; border-radius:13px; color:#11152f; background:linear-gradient(100deg,#7c83ff,#a168f5); box-shadow:0 9px 28px rgba(104,87,245,.38),inset 0 1px rgba(255,255,255,.35); font-size:18px; font-weight:800; letter-spacing:.26em; }
#loginScreen .tech-login-button:hover { transform:translateY(-1px); filter:brightness(1.08); } #loginScreen .tech-login-button:active { transform:translateY(1px); }
.login-footer { position:absolute; bottom:24px; left:0; right:0; color:#7077a6; text-align:center; font:12px/1.2 ui-monospace,SFMono-Regular,Menlo,monospace; letter-spacing:.08em; z-index:2; } .login-footer b { margin:0 9px; }
@media (max-width:720px) { .login-brandbar { top:18px; left:18px; right:18px; } .login-brand-mark { width:48px; height:48px; border-radius:13px; font-size:24px; } .login-brand-copy strong { font-size:17px; } .login-brand-copy small { font-size:9px; letter-spacing:.2em; } .login-online { display:none; } #loginScreen .tech-login-card { margin-top:45px; padding:38px 26px 32px; } #loginScreen .tech-login-card h1 { font-size:31px; } .login-scope { margin-bottom:25px; font-size:14px; } .login-assist-row { align-items:flex-start; gap:12px; font-size:12px; } .login-footer { bottom:12px; font-size:10px; } }

/* Authorization management */
.authorization-topbar {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) auto;
  align-items: center;
  margin-bottom: 12px;
}

.authorization-heading {
  min-width: 0;
}

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

.authorization-alert {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 48px;
  margin-bottom: 12px;
  padding: 10px 16px;
  border: 1px solid #f1d29a;
  border-left: 4px solid #d88a13;
  border-radius: 8px;
  color: #80510a;
  background: #fff8eb;
}

.authorization-alert span {
  flex: 1;
}

.text-button {
  padding: 0;
  border: 0;
  color: #3155c6;
  background: transparent;
  font-weight: 700;
  cursor: pointer;
}

.authorization-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(118px, 138px));
  gap: 8px;
  margin: 0;
}

.authorization-metric {
  position: relative;
  display: grid;
  gap: 4px;
  min-height: 60px;
  padding: 9px 12px 9px 15px;
  overflow: hidden;
  border: 1px solid #dfe5ef;
  border-radius: 8px;
  color: #172033;
  text-align: left;
  background: #fff;
  cursor: pointer;
}

.authorization-metric::before {
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: #3155c6;
  content: "";
}

.authorization-metric strong {
  font-size: 22px;
  line-height: 1;
}

.authorization-metric span {
  color: #778197;
  font-size: 11px;
  white-space: nowrap;
}

.authorization-metric.valid::before { background: #1d9b5f; }
.authorization-metric.soon::before { background: #d88a13; }
.authorization-metric.expired::before { background: #d5483f; }
.authorization-metric.active {
  border-color: #7693f0;
  box-shadow: 0 0 0 2px rgb(49 85 198 / 10%);
}

.authorization-filter-panel {
  display: grid;
  grid-template-columns: minmax(320px, 1fr) 190px auto auto;
  align-items: end;
  gap: 12px;
  margin-bottom: 12px;
  padding: 14px 16px;
}

.authorization-filter-panel label,
.authorization-form-grid label {
  display: grid;
  gap: 6px;
}

.authorization-filter-panel label > span,
.authorization-form-grid label > span {
  color: #657087;
  font-size: 13px;
  font-weight: 700;
}

.authorization-filter-panel input,
.authorization-filter-panel select,
.authorization-form-grid input,
.authorization-form-grid select {
  width: 100%;
  height: 42px;
  min-width: 0;
}

.authorization-list-panel {
  padding: 0;
  overflow: hidden;
}

.authorization-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 58px;
  padding: 10px 14px;
  border-bottom: 1px solid #e2e7f0;
}

.authorization-toolbar-actions,
.authorization-view-tools,
.authorization-view-switch,
.authorization-pager,
.authorization-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.authorization-view-tools > span {
  color: #717c91;
  font-size: 13px;
}

.authorization-view-switch {
  padding: 3px;
  border: 1px solid #dfe5ef;
  border-radius: 7px;
  background: #f4f6fa;
}

.authorization-view-switch button {
  height: 34px;
  padding: 0 14px;
  border: 0;
  border-radius: 5px;
  color: #657087;
  background: transparent;
  cursor: pointer;
}

.authorization-view-switch button.active {
  color: #fff;
  background: #3155c6;
}

.authorization-table-wrap {
  max-height: calc(100vh - 390px);
  min-height: 310px;
  overflow: auto;
}

.authorization-table {
  width: 100%;
  min-width: 1410px;
  border-collapse: collapse;
  table-layout: fixed;
}

.authorization-table th,
.authorization-table td {
  height: 52px;
  padding: 7px 10px;
  border-bottom: 1px solid #e4e8f0;
  text-align: left;
  vertical-align: middle;
}

.authorization-table th {
  position: sticky;
  z-index: 2;
  top: 0;
  height: 42px;
  color: #4e5b73;
  background: #f5f7fb;
  font-size: 13px;
  white-space: nowrap;
}

.authorization-table th:nth-child(1) { width: 72px; }
.authorization-table th:nth-child(2) { width: 120px; }
.authorization-table th:nth-child(3) { width: 90px; }
.authorization-table th:nth-child(4) { width: 160px; }
.authorization-table th:nth-child(5) { width: 210px; }
.authorization-table th:nth-child(6) { width: 95px; }
.authorization-table th:nth-child(7) { width: 115px; }
.authorization-table th:nth-child(8) { width: 130px; }
.authorization-table th:nth-child(9) { width: 210px; }
.authorization-table th:nth-child(10) { width: 145px; }
.authorization-table th:nth-child(11) { width: 126px; }

.authorization-row.soon { background: #fffaf0; }
.authorization-row.expired { background: #fff4f3; }
.authorization-row:hover { background: #edf3ff; }

.authorization-table .clip {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mono-cell {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.authorization-table td small {
  display: block;
  margin-top: 3px;
  color: #8a94a7;
  font-size: 11px;
  white-space: nowrap;
}
.authorization-inline-row td { height: auto; padding: 7px 5px; background: #f7f9ff; vertical-align: top; }
.authorization-inline-row.is-new td { background: #f1f6ff; }
.authorization-inline-row input,
.authorization-inline-row select { width: 100%; min-width: 82px; height: 34px; padding: 0 7px; border: 1px solid var(--line-strong); border-radius: 6px; background: #fff; font-size: 11px; }
.authorization-inline-row input:focus,
.authorization-inline-row select:focus { border-color: var(--blue); box-shadow: 0 0 0 2px rgba(62, 94, 224, .12); outline: none; }
.authorization-inline-row input.invalid { border-color: var(--red); background: #fff5f4; }
.authorization-inline-file { display: grid; place-items: center; min-height: 34px; padding: 4px; border: 1px dashed #aeb9cb; border-radius: 6px; background: #fff; color: var(--blue); font-size: 10px; cursor: pointer; overflow: hidden; }
.authorization-inline-file span { display: block; width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: center; }
.authorization-inline-file input { display: none; }
.authorization-inline-remove { width: 100%; margin-top: 4px; border: 0; background: transparent; color: var(--red); font-size: 10px; cursor: pointer; }
.authorization-inline-actions { display: flex; flex-wrap: wrap; gap: 5px; min-width: 126px; }
.authorization-inline-actions button { flex: 1 1 52px; }
.authorization-inline-actions span { flex-basis: 100%; color: var(--red); font-size: 10px; }
.authorization-inline-hint { display: inline-flex; min-height: 34px; align-items: center; color: var(--muted); font-size: 10px; }
.authorization-customer-picker { position: relative; min-width: 150px; }
.authorization-customer-picker > input[type="hidden"] { display: none; }
.authorization-customer-results { position: absolute; z-index: 80; top: calc(100% + 4px); left: 0; width: max(100%, 280px); max-height: 270px; overflow-y: auto; border: 1px solid #cfd7e6; border-radius: 8px; background: #fff; box-shadow: 0 12px 28px rgba(31, 42, 68, .18); }
.authorization-customer-results button { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; width: 100%; padding: 8px 10px; border: 0; border-bottom: 1px solid #edf0f5; background: #fff; text-align: left; cursor: pointer; }
.authorization-customer-results button:last-child { border-bottom: 0; }
.authorization-customer-results button:hover,
.authorization-customer-results button.active { background: var(--blue-soft); }
.authorization-customer-results strong { overflow: hidden; color: var(--text); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.authorization-customer-results span { color: var(--muted); font-size: 11px; white-space: nowrap; }
.authorization-customer-search-tip { padding: 12px; color: var(--muted); font-size: 11px; text-align: center; }
.authorization-customer-relation { position: relative; display: inline-flex; max-width: 100%; align-items: center; gap: 5px; }
.authorization-customer-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.authorization-customer-relation > i { display: inline-grid; flex: 0 0 auto; width: 17px; height: 17px; place-items: center; border-radius: 50%; background: var(--blue-soft); color: var(--blue); font-size: 9px; font-style: normal; cursor: help; }
.authorization-main-customer-tip { position: absolute; z-index: 90; bottom: calc(100% + 8px); left: 0; display: none; width: 260px; padding: 10px 12px; border: 1px solid #cfd7e6; border-radius: 8px; background: #fff; box-shadow: 0 12px 28px rgba(31, 42, 68, .2); white-space: normal; }
.authorization-main-customer-tip strong,
.authorization-main-customer-tip span { display: block; }
.authorization-main-customer-tip strong { margin-bottom: 4px; color: var(--muted); font-size: 10px; }
.authorization-main-customer-tip span { color: var(--text); font-size: 12px; font-weight: 700; }
.authorization-customer-relation:hover .authorization-main-customer-tip { display: block; }
.customer-main-relation { display: flex; min-width: 180px; align-items: center; gap: 5px; }
.customer-main-relation input { min-width: 145px; }
.customer-main-relation button { height: 30px; padding: 0 7px; border: 1px solid #ffd4d1; border-radius: 6px; background: #fff5f4; color: var(--red); font-size: 10px; cursor: pointer; }
.customer-main-relation.is-main { display: grid; gap: 2px; padding: 5px 8px; border-radius: 7px; background: var(--blue-soft); }
.customer-main-relation.is-main strong { color: var(--blue); font-size: 11px; }
.customer-main-relation.is-main span { color: var(--muted); font-size: 10px; }

/* Customer table: 13-column responsive layout with stable edge columns. */
#customers > .tablewrap { position: relative; width: 100%; overflow: auto; }
#customers .customer-table { width: 100%; min-width: 1580px; table-layout: fixed; }
#customers .customer-table th,
#customers .customer-table td { box-sizing: border-box; min-width: 0; }
#customers .customer-table th:nth-child(1) { width: 210px; }
#customers .customer-table th:nth-child(2) { width: 235px; }
#customers .customer-table th:nth-child(3) { width: 105px; }
#customers .customer-table th:nth-child(4) { width: 88px; }
#customers .customer-table th:nth-child(5) { width: 88px; }
#customers .customer-table th:nth-child(6) { width: 92px; }
#customers .customer-table th:nth-child(7),
#customers .customer-table th:nth-child(8),
#customers .customer-table th:nth-child(9) { width: 84px; }
#customers .customer-table th:nth-child(10) { width: 108px; }
#customers .customer-table th:nth-child(11) { width: 96px; }
#customers .customer-table th:nth-child(12) { width: 165px; }
#customers .customer-table th:nth-child(13) { width: 150px; }
#customers .customer-table td input,
#customers .customer-table td select { width: 100%; min-width: 0; max-width: 100%; }
#customers .customer-table td:first-child,
#customers .customer-table th:first-child { position: sticky; left: 0; z-index: 4; background: #fff; }
#customers .customer-table th:first-child { z-index: 6; background: #f5f7fb; }
#customers .customer-table td:last-child,
#customers .customer-table th:last-child { position: sticky; right: 0; z-index: 4; background: #fff; box-shadow: -8px 0 14px rgba(31, 42, 68, .06); }
#customers .customer-table th:last-child { z-index: 6; background: #f5f7fb; }
#customers .customer-table .row-actions { justify-content: flex-start; }
#customers .customer-table .row-actions button { padding-right: 10px; padding-left: 10px; }
#customers .customer-main-relation { width: 100%; min-width: 0; }
#customers .customer-main-relation input { flex: 1 1 auto; width: 0; min-width: 0; }
#customers .customer-main-relation button { flex: 0 0 auto; }

@media (min-width: 1900px) {
  #customers .customer-table th:nth-child(1) { width: 15%; }
  #customers .customer-table th:nth-child(2) { width: 18%; }
  #customers .customer-table th:nth-child(12) { width: 12%; }
}

@media (max-width: 1200px) {
  #customers .customer-table { min-width: 1540px; }
  #customers .customer-table th:nth-child(1) { width: 190px; }
  #customers .customer-table th:nth-child(2) { width: 215px; }
  #customers .customer-table th:nth-child(12) { width: 145px; }
}

/* Authorization table: fluid 11-column layout with sticky edge actions. */
#authorizations .authorization-table-wrap { position: relative; width: 100%; overflow: auto; }
#authorizations .authorization-table { width: max-content; min-width: 100%; table-layout: auto; }
#authorizations .authorization-table th,
#authorizations .authorization-table td { box-sizing: border-box; min-width: 0; }
#authorizations .authorization-table th:nth-child(1) { width: clamp(52px, 4vw, 72px); }
#authorizations .authorization-table th:nth-child(2) { width: clamp(92px, 7vw, 140px); }
#authorizations .authorization-table th:nth-child(3) { width: clamp(72px, 6vw, 110px); }
#authorizations .authorization-table th:nth-child(4) { width: clamp(120px, 10vw, 190px); }
#authorizations .authorization-table th:nth-child(5) { width: clamp(190px, 18vw, 330px); }
#authorizations .authorization-table th:nth-child(6) { width: clamp(82px, 6vw, 105px); }
#authorizations .authorization-table th:nth-child(7) { width: clamp(104px, 7vw, 125px); }
#authorizations .authorization-table th:nth-child(8) { width: clamp(112px, 8vw, 145px); }
#authorizations .authorization-table th:nth-child(9) { width: clamp(110px, 9vw, 175px); }
#authorizations .authorization-table th:nth-child(10) { width: clamp(112px, 8vw, 145px); }
#authorizations .authorization-table th:nth-child(11) { width: 118px; }
#authorizations .authorization-table th,
#authorizations .authorization-table td {
  padding-left: clamp(7px, .75vw, 13px);
  padding-right: clamp(7px, .75vw, 13px);
}
#authorizations .authorization-table td:nth-child(4),
#authorizations .authorization-table td:nth-child(5),
#authorizations .authorization-table td:nth-child(9) {
  white-space: normal;
  overflow-wrap: anywhere;
}
#authorizations .authorization-table td input,
#authorizations .authorization-table td select { width: 100%; min-width: 0; max-width: 100%; }
#authorizations .authorization-table td:first-child,
#authorizations .authorization-table th:first-child { position: sticky; left: 0; z-index: 4; background: #fff; }
#authorizations .authorization-table th:first-child { z-index: 6; background: #f5f7fb; }
#authorizations .authorization-table td:last-child,
#authorizations .authorization-table th:last-child { position: sticky; right: 0; z-index: 4; background: #fff; box-shadow: -8px 0 14px rgba(31, 42, 68, .06); }
#authorizations .authorization-table th:last-child { z-index: 6; background: #f5f7fb; }
#authorizations .authorization-table .authorization-actions { justify-content: flex-start; }
#authorizations .authorization-table .authorization-actions button { padding-right: 8px; padding-left: 8px; }

@media (max-width: 1350px) {
  #authorizations .authorization-table { min-width: 1120px; }
}

.authorization-level,
.authorization-status {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

.authorization-level {
  color: #3155c6;
  background: #eaf0ff;
}

.authorization-status.valid {
  color: #137b49;
  background: #e6f7ef;
}

.authorization-status.soon {
  color: #a76706;
  background: #fff0d6;
}

.authorization-status.expired {
  color: #c2332d;
  background: #ffe8e6;
}

.authorization-status.application-pending,
.authorization-status.application-document,
.authorization-status.application-ready {
  color: #a76706;
  background: #fff0d6;
}

.authorization-status.application-approved {
  color: #3155c6;
  background: #eaf0ff;
}

.authorization-status.application-brand {
  color: #7048bf;
  background: #f3edff;
}

.authorization-status.application-rejected {
  color: #c2332d;
  background: #ffe8e6;
}

.authorization-document-button {
  position: relative;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  padding: 0;
  overflow: hidden;
  border: 1px solid #d6dfef;
  border-radius: 5px;
  color: #3155c6;
  background: #fff;
  cursor: pointer;
}

.authorization-document-count { position: absolute; right: -2px; top: -5px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 9px; color: #fff; background: #315bdc; font-size: 10px; line-height: 17px; box-shadow: 0 1px 3px #7384ad; }
.authorization-inline-documents { display: flex; flex-wrap: wrap; gap: 3px; margin-top: 3px; }
.authorization-inline-documents button { padding: 2px 4px; border: 1px solid #f1c7c4; border-radius: 4px; color: #b73530; background: #fff1f0; font-size: 9px; cursor: pointer; }
.authorization-hover-preview { position: fixed; z-index: 1200; width: 370px; padding: 8px; border: 1px solid #cad6eb; border-radius: 10px; background: #fff; box-shadow: 0 14px 40px rgba(29, 45, 79, .28); }
.authorization-hover-preview img { display: block; width: 100%; height: 400px; object-fit: contain; border-radius: 6px; background: #f3f6fb; }
.authorization-hover-footer { display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: 7px; min-height: 34px; padding-top: 7px; color: #526078; font-size: 12px; }
.authorization-hover-footer strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.authorization-hover-footer button { width: 28px; height: 26px; padding: 0; border: 1px solid #ccd7ec; border-radius: 5px; background: #f5f7fc; color: #3155c6; font-size: 20px; cursor: pointer; }
.authorization-hover-loading { display: grid; place-items: center; height: 220px; color: #7e899e; }

.authorization-document-button img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.authorization-document-placeholder {
  font-size: 11px;
  font-weight: 800;
}

.authorization-no-document {
  color: #a2aabd;
}

.icon-text-button {
  height: 30px;
  padding: 0 9px;
  border: 1px solid #ccdafc;
  border-radius: 5px;
  color: #3155c6;
  background: #edf2ff;
  cursor: pointer;
}

.icon-text-button.danger {
  border-color: #ffd5d2;
  color: #cf3e36;
  background: #fff0ef;
}

.authorization-customer-view {
  max-height: calc(100vh - 390px);
  min-height: 310px;
  padding: 12px;
  overflow: auto;
  background: #f6f8fc;
}

.authorization-customer-group {
  margin-bottom: 10px;
  border: 1px solid #e0e6f0;
  border-radius: 7px;
  background: #fff;
}

.authorization-customer-head {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 44px;
  padding: 8px 12px;
  border-bottom: 1px solid #e5eaf2;
}

.authorization-customer-head strong { flex: 1; }
.authorization-customer-head span { color: #778197; font-size: 12px; }
.authorization-customer-head .valid { color: #137b49; }
.authorization-customer-head .soon { color: #a76706; }
.authorization-customer-head .expired { color: #c2332d; }

.authorization-customer-rows {
  display: grid;
}

.authorization-customer-rows > button {
  display: grid;
  grid-template-columns: 100px minmax(220px, 1fr) 130px 100px 110px;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  padding: 7px 12px;
  border: 0;
  border-bottom: 1px solid #eef1f6;
  color: #293247;
  text-align: left;
  background: #fff;
  cursor: pointer;
}

.authorization-customer-rows > button:last-child { border-bottom: 0; }
.authorization-customer-rows > button:hover { background: #f2f6ff; }
.authorization-customer-rows em { color: #758096; font-style: normal; }
.authorization-customer-rows time { color: #566176; }

.authorization-pager {
  justify-content: flex-end;
  min-height: 50px;
  padding: 8px 14px;
  border-top: 1px solid #e2e7f0;
}

.authorization-pager span {
  margin-right: 8px;
  color: #778197;
  font-size: 13px;
}

.authorization-modal-panel {
  width: min(980px, calc(100vw - 40px));
  max-height: calc(100vh - 40px);
  overflow: auto;
}

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

.authorization-document-field {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 18px;
  padding: 12px;
  border: 1px solid #dfe5ef;
  border-radius: 7px;
  background: #f7f9fc;
}

.authorization-document-field > div {
  display: grid;
  gap: 3px;
  margin-right: auto;
}

.authorization-document-field > div span,
.authorization-document-field > span {
  color: #7a859a;
  font-size: 12px;
}

.authorization-file-picker {
  position: relative;
  display: inline-flex;
  align-items: center;
  height: 36px;
  padding: 0 12px;
  overflow: hidden;
  border: 1px solid #cad5e8;
  border-radius: 5px;
  color: #3155c6;
  background: #fff;
  font-weight: 700;
  cursor: pointer;
}

.authorization-file-picker input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.danger-soft {
  height: 34px;
  border: 1px solid #ffd5d2;
  border-radius: 5px;
  color: #cf3e36;
  background: #fff0ef;
  cursor: pointer;
}

.authorization-modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 14px 18px 18px;
}

.authorization-preview-panel {
  width: min(920px, calc(100vw - 40px));
  height: min(780px, calc(100vh - 40px));
}

.authorization-preview-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.authorization-preview-content {
  display: grid;
  place-items: center;
  height: calc(100% - 58px);
  overflow: auto;
  background: #eef1f6;
}

.authorization-preview-content img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.authorization-preview-content iframe {
  width: 100%;
  height: 100%;
  border: 0;
  background: #fff;
}

@media (max-width: 1100px) {
  .authorization-topbar { grid-template-columns: 1fr; }
  .authorization-top-actions { width: 100%; justify-content: space-between; }
  .authorization-metrics { grid-template-columns: repeat(4, minmax(118px, 1fr)); flex: 1; }
  .authorization-filter-panel { grid-template-columns: minmax(260px, 1fr) 170px auto auto; }
}

@media (max-width: 720px) {
  .authorization-alert,
  .authorization-toolbar,
  .authorization-document-field { align-items: stretch; flex-direction: column; }
  .authorization-top-actions { align-items: stretch; flex-direction: column; }
  .authorization-metrics {
    width: 100%;
    grid-template-columns: repeat(2, minmax(130px, 1fr));
  }
  .authorization-top-actions > #refreshAuthorizationsBtn { align-self: flex-end; }
  .authorization-filter-panel,
  .authorization-form-grid { grid-template-columns: 1fr; }
  .authorization-toolbar { align-items: flex-start; }
  .authorization-view-tools { width: 100%; justify-content: space-between; }
  .authorization-document-field > div { margin-right: 0; }
}

html,
body {
  width: 100%;
  height: 100%;
}

html {
  color-scheme: light;
  background: var(--bg);
}

body {
  display: flex;
  min-height: 100vh;
  overflow: hidden;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
  font-size: 13.5px;
  line-height: 1.5;
  letter-spacing: 0;
  -webkit-font-smoothing: antialiased;
}

::selection {
  background: #dfe6ff;
  color: #203b91;
}

* {
  scrollbar-color: #c1c9d6 transparent;
  scrollbar-width: thin;
}

*::-webkit-scrollbar {
  width: 9px;
  height: 9px;
}

*::-webkit-scrollbar-thumb {
  border: 2px solid transparent;
  border-radius: 8px;
  background: #c1c9d6;
  background-clip: padding-box;
}

*::-webkit-scrollbar-track {
  background: transparent;
}

/* App shell and navigation */
.side {
  position: relative;
  top: auto;
  z-index: 20;
  display: flex;
  flex: 0 0 222px;
  flex-direction: column;
  width: 222px;
  height: 100vh;
  padding: 0 12px 14px;
  overflow-x: hidden;
  overflow-y: auto;
  border-right: 1px solid var(--sidebar-line);
  background: #ffffff;
  box-shadow: none;
}

.side::-webkit-scrollbar {
  display: block;
  width: 6px;
}

.brand {
  position: relative;
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 11px;
  min-height: 72px;
  margin: 0;
  padding: 16px 8px;
  border-right: 0;
  border-bottom: 1px solid var(--sidebar-line);
}

.sidebar-toggle {
  display:inline-flex;
  flex:0 0 28px;
  align-items:center;
  justify-content:center;
  width:28px;
  height:28px;
  margin-left:auto;
  padding:0;
  border:1px solid #d9e0ec;
  border-radius:7px;
  background:#f7f9fc;
  color:#56657a;
  box-shadow:none;
  font-size:22px;
  line-height:1;
}
.sidebar-toggle:hover { border-color:#b9c7df; background:#edf3ff; color:#315fd5; }

.brand-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  margin: 0;
  border: 0;
  border-radius: 8px;
  background: linear-gradient(135deg, #3b5bdb, #5b73e8);
  color: #ffffff;
  box-shadow: 0 7px 18px rgba(59, 91, 219, .2);
  font-size: 16px;
  font-weight: 800;
}

.brand-copy {
  min-width: 0;
  margin: 0;
}

.brand-copy strong {
  display: block;
  overflow: hidden;
  color: var(--text);
  font-size: 15px;
  font-weight: 720;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.brand-copy > span {
  display: block;
  overflow: hidden;
  margin-top: 2px;
  color: #98a2b3;
  font-size: 11.5px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.nav-group-label {
  flex: 0 0 auto;
  margin: 15px 10px 6px;
  color: #98a2b3;
  font-size: 10.5px;
  font-weight: 650;
  line-height: 1;
  letter-spacing: 1px;
}

.nav {
  position: relative;
  display: block;
  flex: 0 0 auto;
  width: 100%;
  min-height: 36px;
  margin: 0 0 2px;
  padding: 8px 12px 8px 42px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  box-shadow: none;
  color: #5b6675;
  font-size: 13.5px;
  font-weight: 560;
  text-align: left;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}

.nav::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 14px;
  width: 18px;
  color: #8a96a7;
  font-size: 14px;
  font-weight: 650;
  line-height: 1;
  text-align: center;
  transform: translateY(-50%);
}

.nav[data-view="dashboard"]::after { content: "▤"; }
.nav[data-view="entry"]::after { content: "+"; }
.nav[data-view="customerOrderReview"]::after { content: "审"; font-size:12px; }
.nav[data-view="orders"]::after { content: "▦"; }
.nav[data-view="projectReports"]::after { content: "项"; font-size:12px; }
.nav[data-view="statistics"]::after { content: "¥"; }
.nav[data-view="funds"]::after { content: "◇"; }
.nav[data-view="authorizations"]::after { content: "授"; font-size:12px; }
.nav[data-view="customers"]::after { content: "◉"; }
.nav[data-view="suppliers"]::after { content: "▣"; }
.nav[data-view="products"]::after { content: "商"; font-size: 12px; }
.nav[data-view="customer"]::after { content: "⌑"; }
.nav[data-view="supplierPortal"]::after { content: "▢"; }
.nav[data-view="settings"]::after { content: "⚙"; }
.logout-nav::after { content: "↪"; }

@media (min-width:981px) {
  .side,
  .main { transition:width .2s ease, flex-basis .2s ease; }
  body.sidebar-collapsed .side { flex-basis:74px; width:74px; padding-right:8px; padding-left:8px; }
  body.sidebar-collapsed .main { width:calc(100vw - 74px); }
  body.sidebar-collapsed .brand { justify-content:center; min-height:72px; padding-right:0; padding-left:0; }
  body.sidebar-collapsed .brand-copy,
  body.sidebar-collapsed .nav-group-label { display:none; }
  body.sidebar-collapsed .brand-mark { width:34px; height:34px; flex-basis:34px; }
  body.sidebar-collapsed .sidebar-toggle { position:absolute; right:-7px; bottom:-13px; z-index:3; width:24px; height:24px; border-radius:50%; background:#fff; font-size:19px; }
  body.sidebar-collapsed .nav { min-height:42px; padding:8px; overflow:hidden; color:transparent; text-align:center; }
  body.sidebar-collapsed .nav::after { left:50%; color:#7d899b; transform:translate(-50%,-50%); }
  body.sidebar-collapsed .nav:hover::after,
  body.sidebar-collapsed .nav.active::after { color:currentColor; }
  body.sidebar-collapsed .nav.active { color:#315fd5; }
  body.sidebar-collapsed .logout-nav { margin-top:8px; color:transparent; }
  body.sidebar-collapsed .logout-nav::after { color:#c43d3d; }
}

.nav:hover::after,
.nav.active::after {
  color: currentColor;
}

/* Product management */
#products .product-topbar {
  align-items: center;
}

#products .product-topbar .top-actions {
  align-self: center;
  flex-wrap: nowrap;
}

.product-action-stack {
  display: grid;
  flex: 0 0 112px;
  width: 112px;
  height: 58px;
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: 5px;
}

.product-action-stack-wide {
  flex-basis: 154px;
  width: 154px;
}

.product-action-stack > button {
  width: 100%;
  min-width: 0;
  height: auto;
  min-height: 0;
  padding: 2px 10px;
  border-radius: 7px;
  font-size: 13px;
  line-height: 1.15;
  white-space: nowrap;
}

#productSelectAllBtn {
  border-color: #c9d4e6;
  background: #f6f8fc;
  color: #40516d;
}

#productTemplateBtn {
  border-color: #c9d4e6;
  background: #f6f8fc;
  color: #40516d;
}

#productBatchTitleBtn {
  border-color: #c9d4e6 !important;
  background: #f6f8fc !important;
  color: #40516d !important;
}

#productCatalogInviteBtn {
  border-color: #c9d4e6;
  background: #f6f8fc;
  color: #40516d;
}

#productSelectAllBtn:hover,
#productTemplateBtn:hover,
#productBatchTitleBtn:hover:not(:disabled),
#productCatalogInviteBtn:hover {
  filter: saturate(1.12) brightness(.97);
  border-color: #9fb2d1;
  background: #edf2fa;
  color: #294d91;
  box-shadow: 0 2px 7px rgba(35, 55, 94, .1);
}

#products #productSearchBtn,
#products #productExportBtn,
#products #newProductBtn {
  border-color: #3f61df;
  background: #3f61df;
  color: #fff;
}

#products #productSearchBtn:hover,
#products #productExportBtn:hover,
#products #newProductBtn:hover:not(:disabled) {
  border-color: #304fc8;
  background: #304fc8;
}

#products #productPriceSortBtn,
#products #productClearBtn,
#products #productImportBtn,
#products #productColumnMenuBtn {
  border-color: #d6deeb;
  background: #fff;
  color: #3d485b;
}

#products #productPriceSortBtn:hover,
#products #productClearBtn:hover,
#products #productImportBtn:hover,
#products #productColumnMenuBtn:hover {
  border-color: #aab8cf;
  background: #f6f8fc;
}

.product-summary-strip {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 8px;
}

.product-summary-strip > div,
.product-summary-strip > button {
  display: flex;
  flex: 0 0 112px;
  width: 112px;
  min-width: 112px;
  height: 58px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 6px 8px;
  border: 1px solid;
  border-radius: 8px;
  box-shadow: 0 2px 7px rgba(35, 49, 75, .05);
}

.product-summary-strip > button {
  cursor: pointer;
}

.product-summary-strip > :nth-child(1) { border-color: #bdd2ff; color: #285dc8; background: #eef4ff; }
.product-summary-strip > :nth-child(2) { border-color: #d5c6fb; color: #7048bf; background: #f5f0ff; }
.product-summary-strip > :nth-child(3) { border-color: #a9dfd5; color: #137c6a; background: #ecfaf7; }
.product-summary-strip > :nth-child(4) { border-color: #f2d29a; color: #b96a00; background: #fff7e8; }
.product-summary-strip > :nth-child(5) { border-color: #f2bfa9; color: #c65320; background: #fff3ed; }
.product-summary-strip > button:hover,
.product-summary-strip > button.active { filter: saturate(1.14) brightness(.98); box-shadow: 0 0 0 2px rgba(49, 95, 209, .12); }
.product-summary-strip strong {
  color: currentColor;
  font-size: 19px;
  line-height: 1.1;
}
.product-summary-strip span {
  margin-top: 3px;
  color: currentColor;
  font-size: 10px;
  line-height: 1.25;
  text-align: center;
  white-space: nowrap;
  opacity: .78;
}

.product-toolbar-panel {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-top: 12px;
  padding: 10px 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  box-shadow: var(--wb-shadow);
}

.product-search-group,
.product-action-group {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.product-search-group {
  flex: 1 1 620px;
}

.product-search-group input {
  flex: 1 1 auto;
  min-width: 260px;
}

.product-search-group .product-price-filter-input {
  flex: 0 0 104px;
  width: 104px;
  min-width: 104px;
}

.product-price-filter-separator {
  flex: 0 0 auto;
  color: #748095;
  font-weight: 800;
}

.product-price-sort-button {
  flex: 0 0 auto;
  min-width: 110px;
  border: 1px solid #cbd5e6;
  color: #536078;
  background: #fff;
  font-weight: 750;
}

.product-price-sort-button.is-active {
  border-color: #91adf4;
  color: #315bd1;
  background: #edf3ff;
}

.product-action-group {
  flex: 0 0 auto;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.product-lock-button {
  min-height: 36px;
  border: 1px solid #f0d49e;
  border-radius: 7px;
  background: #fff7e8;
  color: #b66a00;
  font-weight: 680;
  cursor: pointer;
}

.product-lock-button.unlocked {
  border-color: #a9ddd7;
  background: var(--teal-soft);
  color: var(--teal-dark);
}

.product-import-button {
  min-height: 36px;
  white-space: nowrap;
}

.product-import-button.has-file {
  border-color: #9bcfc8;
  background: var(--teal-soft);
  color: var(--teal-dark);
}
.product-import-result { margin: 5px 32px 0; }

.product-import-preview {
  position: fixed;
  z-index: 12000;
  inset: 0;
  display: grid;
  width: auto !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 24px;
  place-items: center;
  background: rgba(25, 36, 60, .48);
  backdrop-filter: blur(2px);
}
.product-import-preview-dialog {
  display: flex;
  flex-direction: column;
  width: min(1380px, calc(100vw - 48px));
  max-height: calc(100vh - 48px);
  min-height: min(720px, calc(100vh - 48px));
  overflow: hidden;
  border: 1px solid #dce4f2;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 24px 70px rgba(20, 31, 55, .28);
}
.product-import-preview-head,
.product-import-preview-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 18px;
}
.product-import-preview-head { border-bottom: 1px solid #e6ebf3; }
.product-import-preview-head h2 { margin: 0 0 4px; font-size: 18px; }
.product-import-preview-head p { margin: 0; color: #4968b8; font-size: 13px; }
.product-import-stats { display: grid; grid-template-columns: repeat(5, minmax(100px, 1fr)); gap: 10px; padding: 14px 18px; }
.product-import-stat { padding: 10px 12px; border: 1px solid #e4e9f2; border-radius: 9px; background: #f8faff; }
.product-import-stat strong { display: block; font-size: 22px; color: #304fbf; }
.product-import-stat span { color: #67738b; font-size: 12px; }
.product-import-table-wrap { flex: 1 1 auto; min-height: 220px; max-height: calc(100vh - 390px); overflow: auto; margin: 0 18px; border: 1px solid #e1e6ef; border-radius: 9px; scrollbar-gutter: stable; }
.product-import-preview-table thead { position: sticky; z-index: 2; top: 0; }
.product-import-preview-table { width: 100%; min-width: 980px; border-collapse: collapse; font-size: 13px; }
.product-import-preview-table td { height: 44px; padding: 8px 11px; border-bottom: 1px solid #e8ecf3; text-align: left; white-space: nowrap; }
.product-import-preview-table th { height: 42px; padding: 8px 11px; border-bottom: 1px solid #e8ecf3; text-align: left; white-space: nowrap; }
.product-import-preview-table th { background: #f6f8fc; color: #4f5d73; }
.product-import-cost-up { color: #e34b2f; font-weight: 700; }
.product-import-cost-down { color: #14965f; font-weight: 700; }
.product-import-action-tag { display: inline-flex; padding: 3px 9px; border-radius: 999px; border: 1px solid #d8deea; background: #f3f5f8; color: #596579; font-weight: 700; }
.product-import-action-tag.is-new { border-color: #b9c9ff; background: #edf2ff; color: #315ee7; }
.product-import-action-tag.is-update { border-color: #ffd0bf; background: #fff1eb; color: #dc4a2d; }
.product-import-errors { margin: 12px 18px 0; padding: 10px 12px; border-radius: 8px; background: #fff6e6; color: #a86100; font-size: 13px; }
.product-import-pager { display: flex; min-height: 52px; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 18px 0; color: #687489; font-size: 13px; }
.product-import-page-summary { display: flex; align-items: center; gap: 14px; }
.product-import-page-summary label { display: flex; align-items: center; gap: 7px; white-space: nowrap; }
.product-import-page-summary select { min-height: 34px; padding: 4px 28px 4px 9px; border: 1px solid #dce3ef; border-radius: 7px; background: #fff; color: #455168; }
.product-import-page-actions, .product-import-page-numbers { display: flex; align-items: center; gap: 6px; }
.product-import-page-actions button { min-height: 34px; }
.product-import-page-number { min-width: 34px; min-height: 34px; padding: 0 8px; border: 1px solid #dce3ef; border-radius: 7px; background: #fff; color: #536079; cursor: pointer; }
.product-import-page-number.active { border-color: #4968e8; background: #4968e8; color: #fff; font-weight: 700; }
.product-import-page-gap { padding: 0 2px; color: #8993a5; }
.product-import-preview-actions { margin-top: 14px; border-top: 1px solid #e6ebf3; background: #fbfcff; }
.product-import-preview-actions span { color: #5d687c; font-size: 13px; }
.product-import-preview-buttons { display: flex; gap: 10px; }
@media (max-width: 900px) {
  .product-import-preview { padding: 10px; }
  .product-import-preview-dialog { width: calc(100vw - 20px); max-height: calc(100vh - 20px); min-height: calc(100vh - 20px); }
  .product-import-stats { grid-template-columns: repeat(2, minmax(100px, 1fr)); }
  .product-import-preview-head, .product-import-preview-actions { align-items: flex-start; flex-direction: column; }
}

.product-table-controls {
  display: flex;
  min-height: 34px;
  align-items: center;
  justify-content: flex-end;
  margin: 6px 0 -6px;
}

.product-column-picker {
  position: relative;
  z-index: 12;
}

.product-column-menu-button {
  min-height: 36px;
  padding: 0 10px;
  border-color: var(--line-strong);
  background: #fff;
  font-size: 12px;
}

.product-column-menu-button.active {
  border-color: #94aaf9;
  background: var(--blue-soft);
  color: var(--blue);
}

.product-column-menu {
  position: absolute;
  z-index: 10030;
  top: calc(100% + 5px);
  right: 0;
  width: 292px;
  overflow: hidden;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 18px 44px rgba(27, 39, 71, .18);
}

.product-column-menu-head,
.product-column-menu-actions {
  display: flex;
  min-height: 36px;
  padding: 6px 10px;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--line);
}

.product-column-menu-head strong { font-size: 12px; }
.product-column-menu-head span { color: var(--muted); font-size: 10px; }

.product-column-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  max-height: 286px;
  padding: 6px;
  overflow-y: auto;
}

.product-column-option {
  display: flex;
  min-width: 0;
  min-height: 30px;
  padding: 5px 7px;
  align-items: center;
  gap: 7px;
  border-radius: 5px;
  color: #4d586a;
  cursor: pointer;
  font-size: 11.5px;
}

.product-column-option:hover { background: #f3f6fb; color: var(--text); }
.product-column-option input { width: 14px; height: 14px; margin: 0; accent-color: var(--blue); }
.product-column-option span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.product-column-menu-actions {
  justify-content: flex-end;
  gap: 6px;
  border-top: 1px solid var(--line);
  border-bottom: 0;
}

.product-column-menu-actions button {
  min-height: 27px;
  padding: 0 8px;
  font-size: 10.5px;
}

.product-table-wrap {
  position: relative;
  min-height: 260px;
  max-height: calc(100vh - 300px);
  margin-top: 12px;
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 8px 8px 0 0;
  background: #fff;
  box-shadow: var(--wb-shadow);
}

.product-table {
  width: 100%;
  min-width: 0;
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;
  font-size: 12.5px;
}

.product-table th,
.product-table td {
  height: 44px;
  padding: 5px 7px;
  overflow: hidden;
  border-bottom: 1px solid var(--line);
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.product-table th {
  position: sticky;
  top: 0;
  z-index: 4;
  background: #f5f7fb;
  color: #4b5565;
  font-weight: 700;
}

.product-table .product-select-column {
  width: 34px !important;
  min-width: 34px !important;
  max-width: 34px !important;
  padding-right: 5px !important;
  padding-left: 5px !important;
  text-align: center;
}

.product-select-checkbox {
  display: inline-block;
  width: 14px !important;
  min-width: 14px !important;
  height: 14px !important;
  margin: 0;
  padding: 0;
  vertical-align: middle;
  accent-color: var(--blue);
  cursor: pointer;
}

.product-select-checkbox:disabled {
  cursor: default;
  opacity: .45;
}

.product-select-all-button {
  min-width: 68px;
  white-space: nowrap;
}

.product-select-all-button.active {
  border-color: #9fb6ff;
  background: #edf2ff;
  color: #2757d7;
}

.product-column-hidden { display: none !important; }

.product-draft-row > td {
  background: #f7faff !important;
  border-top: 1px solid #bcd0ff;
  border-bottom: 1px solid #bcd0ff;
}

.product-draft-row .product-cell-input,
.product-draft-row .product-cell-select {
  border-color: #c9d5f8;
  background: #fff;
}

.product-save-first {
  display: inline-block;
  color: var(--muted);
  font-size: 10.5px;
  line-height: 1.25;
  white-space: normal;
}

.product-draft-actions {
  display: flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}

.product-draft-actions button {
  min-width: 52px;
  height: 28px;
  padding: 0 8px;
}

.product-table tr:hover > td { background: #fbfcff; }
.product-table .price-chain { background: #f3f0ff; color: #6846d8; font-weight: 680; }
.product-table .price-core { background: #eaf8f6; color: #0d887d; font-weight: 680; }
.product-table .price-agent { background: #edf3ff; color: #2d5fc9; font-weight: 680; }
.product-table .price-retail { background: #fff6e8; color: #bd710b; font-weight: 680; }
.product-table .numeric-cell { font-variant-numeric: tabular-nums; }

.product-copy-field {
  display: flex;
  align-items: center;
  min-width: 0;
  gap: 3px;
}

.product-copy-field > .product-cell-input {
  min-width: 0;
  flex: 1 1 auto;
}

.product-inline-copy {
  flex: 0 0 auto;
  display: inline-flex;
  width: 18px;
  height: 18px;
  padding: 0;
  align-items: center;
  justify-content: center;
  border: 1px solid transparent;
  border-radius: 5px;
  background: transparent;
  color: #8a96aa;
  cursor: pointer;
  transition: border-color .12s ease, background-color .12s ease, color .12s ease;
}

.product-inline-copy svg {
  width: 12px;
  height: 12px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.product-inline-copy:hover { border-color: #c7d6f7; background: #edf3ff; color: #315fd2; }
.product-inline-copy.copied { border-color: #b9e4d5; background: #eaf9f3; color: #087b5d; }
.product-supplier-cell .product-inline-copy { margin-left: 1px; }
.product-updated-column { color: #315fd2 !important; background: #edf3ff !important; }
.product-updated-cell { color: #315fd2; font-variant-numeric: tabular-nums; }

.product-fast-tooltip {
  position: fixed;
  z-index: 11020;
  max-width: min(460px, calc(100vw - 20px));
  padding: 7px 10px;
  border: 1px solid #d8e0ed;
  border-radius: 7px;
  background: #172033;
  color: #fff;
  box-shadow: 0 8px 24px rgba(15, 23, 42, .22);
  font-size: 12px;
  line-height: 1.4;
  pointer-events: none;
  white-space: normal;
  overflow-wrap: anywhere;
}

.product-fast-tooltip.hidden { display: none; }

.product-cost-cell {
  position: relative;
  display: inline-flex;
  width: 100%;
  min-width: 0;
  align-items: center;
  justify-content: flex-end;
  gap: 0;
  white-space: nowrap;
}

.product-cost-cell > .product-cell-input,
.product-cost-cell > .product-offers-cost {
  width: auto;
  min-width: 0;
  flex: 1 1 auto;
  box-sizing: border-box;
  padding-right: 18px;
}

.product-offers-popover-row .product-cost-cell { justify-content: flex-start; }

.product-cost-trend {
  position: absolute;
  top: 50%;
  right: 1px;
  display: inline-flex;
  width: 14px;
  height: 14px;
  align-items: center;
  justify-content: center;
  transform: translateY(-50%);
  padding: 0;
  border: 0;
  background: transparent;
  font-size: 14px;
  line-height: 14px;
  font-weight: 800;
  letter-spacing: 0;
  cursor: help;
}

.product-cost-trend.is-up { color: #e5484d; }
.product-cost-trend.is-down { color: #12a150; }
.product-cost-trend.is-mixed { color: #e8790c; }

.product-cost-tooltip {
  position: fixed;
  z-index: 11000;
  display: block;
  width: 340px;
  max-width: calc(100vw - 20px);
  padding: 13px 14px 10px;
  border: 1px solid #dbe2ee;
  border-radius: 10px;
  background: #fff;
  color: #263247;
  box-shadow: 0 14px 38px rgba(15, 23, 42, .18);
  font-size: 12px;
  line-height: 1.45;
  pointer-events: none;
}

.product-cost-tooltip.hidden { display: none; }
.product-cost-tooltip-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-bottom: 9px; border-bottom: 1px solid #e7ebf2; }
.product-cost-tooltip-head strong { font-size: 14px; }
.product-cost-tooltip-head > span { padding: 2px 7px; border-radius: 999px; font-weight: 700; }
.product-cost-tooltip-head > span.is-up { color: #cf3f39; background: #fff0ef; }
.product-cost-tooltip-head > span.is-down { color: #087b5d; background: #eaf9f3; }
.product-cost-tooltip-head > span.is-mixed { color: #a56808; background: #fff7e7; }
.product-cost-tooltip-summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; }
.product-cost-tooltip-summary span { color: #657186; white-space: nowrap; }
.product-cost-tooltip-summary b { color: #263247; font-size: 13px; }
.product-cost-tooltip-summary b.up { color: #cf3f39; }
.product-cost-tooltip-summary b.down { color: #087b5d; }
.product-cost-history-list { position: relative; display: grid; gap: 0; padding: 2px 0 4px; }
.product-cost-history-row { position: relative; display: grid; grid-template-columns: 14px 1fr auto 72px; align-items: center; gap: 7px; min-height: 32px; }
.product-cost-history-row:not(:last-child)::before { content: ""; position: absolute; top: 21px; bottom: -11px; left: 6px; width: 1px; background: #dfe5ef; }
.product-cost-history-row i { z-index: 1; width: 8px; height: 8px; border: 2px solid #fff; border-radius: 50%; background: #8792a4; box-shadow: 0 0 0 1px #cbd3df; }
.product-cost-history-row.is-up i { background: #e5484d; }
.product-cost-history-row.is-down i { background: #12a150; }
.product-cost-history-row time { color: #657186; white-space: nowrap; }
.product-cost-history-row b { font-variant-numeric: tabular-nums; white-space: nowrap; }
.product-cost-history-row em { color: #8792a4; font-style: normal; text-align: right; white-space: nowrap; }
.product-cost-history-row.is-up em { color: #cf3f39; }
.product-cost-history-row.is-down em { color: #087b5d; }
.product-cost-history-empty { padding: 16px; color: #8792a4; text-align: center; }
.product-cost-tooltip > small { display: block; padding-top: 8px; border-top: 1px solid #e7ebf2; color: #8792a4; }

.product-cell-input,
.product-cell-select,
.product-offer-panel input,
.product-offer-panel select {
  width: 100%;
  min-width: 0;
  height: 32px;
  padding: 5px 7px;
  border: 1px solid transparent;
  border-radius: 5px;
  background: transparent;
  color: var(--text);
  font: inherit;
  text-overflow: ellipsis;
}

.product-cell-input:not([readonly]):hover,
.product-cell-input:not([readonly]):focus,
.product-cell-select:not(:disabled):hover,
.product-cell-select:not(:disabled):focus,
.product-offer-panel input:not([readonly]):focus,
.product-offer-panel select:not(:disabled):focus {
  border-color: #a9baf8;
  background: #fff;
  outline: none;
  box-shadow: 0 0 0 2px rgba(59, 91, 219, .08);
}

.product-supplier-toggle {
  flex: 0 0 auto;
  max-width: 92px;
  padding: 3px 8px;
  border: 0;
  border-radius: 12px;
  background: var(--teal-soft);
  color: var(--teal-dark);
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
}

.product-supplier-toggle:hover {
  background: #d8f7f1;
  color: #087f73;
}

.product-supplier-cell {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

.product-primary-supplier {
  display: block;
  min-width: 0;
  max-width: 150px;
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.product-offers-popover {
  position: fixed;
  z-index: 10015;
  max-height: calc(100vh - 24px);
  overflow: hidden;
  border: 1px solid #d9e0ec;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 20px 55px rgba(27, 39, 71, .22);
}

.product-offers-popover-head {
  display: flex;
  min-height: 32px;
  padding: 3px 7px;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border-bottom: 1px solid var(--line);
}

.product-offers-popover-head > div {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 6px;
}

.product-offers-popover-head strong {
  overflow: hidden;
  color: #313b52;
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.product-offers-popover-head span {
  flex: 0 0 auto;
  padding: 2px 6px;
  border-radius: 12px;
  background: var(--teal-soft);
  color: var(--teal-dark);
  font-size: 9px;
  font-weight: 700;
}

.product-offers-add {
  flex: 0 0 auto;
  height: 23px;
  padding: 0 6px;
  border: 1px solid #bfd0fb;
  border-radius: 6px;
  background: #eef3ff;
  color: var(--blue);
  font-weight: 700;
  cursor: pointer;
}

.product-offers-popover-table {
  max-height: min(44vh, 300px);
  overflow: auto;
}

.product-offers-popover-header,
.product-offers-popover-row {
  display: grid;
  grid-template-columns:
    minmax(150px, 1.6fr)
    minmax(58px, .5fr)
    minmax(34px, .34fr)
    minmax(48px, .44fr)
    minmax(70px, .62fr);
  min-width: 420px;
  align-items: center;
}

.product-offers-popover-header {
  position: sticky;
  z-index: 2;
  top: 0;
  min-height: 22px;
  border-bottom: 1px solid var(--line);
  background: #f5f7fb;
  color: var(--muted);
  font-size: 9px;
  font-weight: 700;
}

.product-offers-popover-header > span,
.product-offers-popover-row > * {
  min-width: 0;
  margin: 0 2px;
}

.product-offers-popover-row {
  min-height: 28px;
  font-size: 10.5px;
  border-bottom: 1px solid var(--line);
  background: #fff;
}

.product-offers-popover-row:last-child { border-bottom: 0; }
.product-offers-popover-row:hover { background: #fbfcff; }
.product-offers-popover-row.is-primary { background: #effbf8; }

.product-offers-popover-row input,
.product-offers-popover-row select {
  width: calc(100% - 4px);
  height: 21px;
  padding: 1px 3px;
  border: 1px solid #d7dfec;
  border-radius: 5px;
  outline: none;
  background: #fff;
  color: var(--text);
  font: inherit;
  text-overflow: ellipsis;
}

.product-offers-popover-row input:not([readonly]):focus,
.product-offers-popover-row select:not(:disabled):focus {
  border-color: #11b8a5;
  box-shadow: 0 0 0 3px rgba(17, 184, 165, .1);
}

.product-offers-popover-row input[readonly],
.product-offers-popover-row select:disabled {
  border-color: transparent;
  background: transparent;
  opacity: 1;
}

.product-offers-supplier {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 2px;
}

.product-offers-supplier select { flex: 1 1 auto; width: auto; margin: 0; font-weight: 680; }
.product-offers-readonly-value {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.product-offers-supplier .product-offers-readonly-value { flex: 1 1 auto; font-weight: 680; }
.product-offers-star { flex: 0 0 auto; color: #f4a11a; font-size: 14px; }
.product-offers-cost { color: #0d887d !important; font-weight: 750 !important; font-variant-numeric: tabular-nums; }
.product-offers-tax { color: var(--text); text-align: center; }
.product-offers-status-text { color: #16915f; font-weight: 700; }

.product-offers-popover.is-readonly .product-offers-popover-header,
.product-offers-popover.is-readonly .product-offers-popover-row {
  grid-template-columns: minmax(135px, 1.65fr) 52px 30px 42px 62px;
  min-width: 380px;
}
.product-offers-popover.is-readonly .product-offers-popover-row {
  min-height: 26px;
  font-size: 10px;
}
.product-offers-popover.is-readonly .product-offers-popover-header { min-height: 21px; }
.product-offers-popover.is-readonly .product-offers-status-cell { display: block; }

.product-offers-status-cell {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 19px;
  align-items: center;
  gap: 2px;
}

.product-offers-status-cell select { width: 100%; margin: 0; color: #16915f; font-weight: 700; }
.product-offers-delete {
  width: 19px;
  height: 19px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  color: #c5cad4;
  font-size: 14px;
  cursor: pointer;
}
.product-offers-popover-row:hover .product-offers-delete { border-color: #ffd6d3; background: #fff0ef; color: var(--red); }

.product-offers-popover-foot {
  display: flex;
  min-height: 23px;
  padding: 2px 7px;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  border-top: 1px solid var(--line);
  background: #fbfcff;
  color: var(--muted);
  font-size: 8px;
  white-space: nowrap;
}

.product-offers-save-status[data-state="dirty"] { color: #c87808; font-weight: 700; }
.product-offers-empty { min-width: 380px; padding: 18px; color: var(--muted); text-align: center; }

.product-visible-toggle { display: inline-flex; align-items: center; gap: 5px; }
.product-jd-link-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: #aeb6c5;
  font-family: "Arial Unicode MS", "Helvetica Neue", sans-serif;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}
.product-jd-link-button:hover { background: #eef3ff; color: var(--blue); }
.product-jd-link-button.has-link { color: var(--blue); }
.product-link-popover {
  position: fixed;
  z-index: 10020;
  padding: 16px;
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 18px 45px rgba(27, 39, 71, .22);
}
.product-link-popover-head,
.product-link-popover-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.product-link-popover-head { margin-bottom: 10px; color: var(--text); font-size: 15px; }
.product-link-close {
  width: 26px;
  height: 26px;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--muted);
  font-size: 20px;
  cursor: pointer;
}
.product-link-close:hover { background: #f1f4f9; color: var(--text); }
.product-link-textarea {
  display: block;
  width: 100%;
  min-height: 92px;
  max-height: 180px;
  padding: 11px 12px;
  resize: vertical;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  outline: none;
  background: #fff;
  color: var(--text);
  font: inherit;
  line-height: 1.5;
}
.product-link-textarea:focus {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(59, 91, 219, .1);
}
.product-link-textarea[readonly] { background: #f7f8fb; color: var(--muted); }
.product-link-popover-foot { margin-top: 10px; }
.product-link-save-status { color: var(--muted); font-size: 11.5px; }
.product-link-save-status[data-state="saved"] { color: #138a5b; }
.product-link-save-status[data-state="error"] { color: var(--red); }
.product-link-open-action {
  height: 28px;
  padding: 0 10px;
  border: 1px solid #c9d5f8;
  border-radius: 6px;
  background: #eef3ff;
  color: var(--blue);
  font-size: 11.5px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}
.product-note-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 28px;
  padding: 0;
  border: 1px solid var(--line-strong);
  border-radius: 7px;
  background: #fff;
  color: #8b95a7;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
}
.product-note-button:hover,
.product-note-button.has-note {
  border-color: #11b8a5;
  background: #ecfbf8;
  color: #089989;
}
.product-note-popover {
  position: fixed;
  z-index: 10020;
  padding: 16px;
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 18px 45px rgba(27, 39, 71, .22);
}
.product-note-popover-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
  color: var(--text);
  font-size: 15px;
}
.product-note-close {
  width: 26px;
  height: 26px;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--muted);
  font-size: 20px;
  cursor: pointer;
}
.product-note-close:hover { background: #f1f4f9; color: var(--text); }
.product-note-textarea {
  display: block;
  width: 100%;
  min-height: 132px;
  max-height: 230px;
  padding: 11px 12px;
  resize: vertical;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  outline: none;
  background: #fff;
  color: var(--text);
  font: inherit;
  line-height: 1.55;
}
.product-note-textarea:focus {
  border-color: #11b8a5;
  box-shadow: 0 0 0 3px rgba(17, 184, 165, .1);
}
.product-note-textarea[readonly] { background: #f7f8fb; color: var(--muted); }
.product-note-save-status {
  margin-top: 9px;
  color: var(--muted);
  font-size: 11.5px;
}
.product-note-save-status[data-state="saved"] { color: #138a5b; }
.product-note-save-status[data-state="error"] { color: var(--red); }
.product-status-badge { display: inline-flex; padding: 3px 9px; border-radius: 12px; font-size: 11.5px; font-weight: 680; }
.product-status-readonly {
  min-width: 48px;
  justify-content: center;
  border: 1px solid transparent;
  cursor: default;
}
.product-status-readonly.status-unavailable {
  border-color: #ffc9c5;
  color: #d43b35;
  background: #fff0ef;
}
.product-status-control.status-in-stock,
.product-status-badge.status-in-stock { border-color: #bfe9d7 !important; background: #eaf9f2 !important; color: #138a5b !important; }
.product-status-control.status-producing,
.product-status-badge.status-producing { border-color: #c7d8ff !important; background: #eef4ff !important; color: #2f64d6 !important; }
.product-status-control.status-out-of-stock,
.product-status-badge.status-out-of-stock { border-color: #f7d7a2 !important; background: #fff6e7 !important; color: #c57508 !important; }
.product-status-control.status-off-market,
.product-status-badge.status-off-market { border-color: #d8dde6 !important; background: #f2f4f7 !important; color: #667085 !important; }
.product-status-control.status-discontinued,
.product-status-badge.status-discontinued { border-color: #ffc9c5 !important; background: #fff0ef !important; color: #d43b35 !important; }
.product-status-control option.status-in-stock { color: #138a5b; }
.product-status-control option.status-producing { color: #2f64d6; }
.product-status-control option.status-out-of-stock { color: #c57508; }
.product-status-control option.status-off-market { color: #667085; }
.product-status-control option.status-discontinued { color: #d43b35; }
.product-empty-value { color: #98a2b3; }
.product-link-cell,
.product-document-cell { display: flex; align-items: center; gap: 5px; min-width: 0; }
.product-image-cell { display: flex; align-items: center; gap: 4px; min-width: 0; }
.product-image-preview {
  width: 34px;
  height: 34px;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
  cursor: pointer;
}
.product-image-preview img { display: block; width: 100%; height: 100%; object-fit: contain; }
.product-image-preview.load-error::after { content: "图片"; color: var(--muted); font-size: 10px; }
.product-share-card-button {
  display: inline-flex;
  width: 24px;
  height: 24px;
  flex: 0 0 24px;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid #bfd0ff;
  border-radius: 6px;
  background: #edf3ff;
  color: #315bd5;
  font-size: 15px;
  font-weight: 800;
  cursor: pointer;
}
.product-share-card-button:hover { border-color: #7696f0; background: #dfe9ff; }
.product-share-card-button:disabled { border-color: #e4e7ec; background: #f4f5f7; color: #b4bac5; cursor: not-allowed; }
.product-image-upload,
.product-image-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 28px;
  padding: 0 6px;
  border: 1px dashed var(--line-strong);
  border-radius: 6px;
  background: #fff;
  color: var(--blue);
  font-size: 10.5px;
  font-weight: 650;
  white-space: nowrap;
  cursor: pointer;
}

.product-share-card-panel { width: min(1060px, calc(100vw - 32px)); max-height: calc(100vh - 32px); overflow: hidden; }
.product-share-card-panel .modal-bar > div { display: flex; min-width: 0; flex-direction: column; gap: 3px; }
.product-share-card-panel .modal-bar span { overflow: hidden; color: #7b8799; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.product-share-card-body { display: grid; min-height: 0; grid-template-columns: minmax(320px, 1fr) 300px; gap: 22px; padding: 20px 22px; overflow: auto; background: #f4f6fa; }
.product-share-card-preview { display: flex; min-height: 0; align-items: center; justify-content: center; padding: 16px; border: 1px solid #e3e8f1; border-radius: 14px; background: #e9edf4; }
.product-share-card-preview canvas { display: block; width: auto; max-width: 100%; height: min(62vh, 620px); max-height: 100%; border-radius: 12px; background: #fff; box-shadow: 0 12px 30px rgba(28, 42, 68, .12); }
.product-share-card-controls { align-self: start; padding: 20px; border: 1px solid #e0e6ef; border-radius: 14px; background: #fff; }
.product-share-card-controls h3 { margin: 0 0 18px; color: #24324a; font-size: 17px; }
.product-share-card-controls > label:not(.product-share-switch) { display: grid; gap: 7px; color: #667085; font-size: 13px; font-weight: 650; }
.product-share-card-controls select { height: 42px; border: 1px solid #d8dee9; border-radius: 9px; background: #fff; color: #263248; padding: 0 11px; }
.product-share-switch { display: flex; align-items: center; gap: 9px; margin-top: 17px; color: #354158; font-size: 14px; cursor: pointer; }
.product-share-switch input { width: 17px; height: 17px; accent-color: #3e60df; }
.product-share-security-note { margin-top: 22px; padding: 12px; border-radius: 9px; background: #eef8f3; color: #26805a; font-size: 12px; line-height: 1.6; }
.product-share-card-actions { display: flex; justify-content: flex-end; gap: 10px; padding: 14px 22px; border-top: 1px solid #e5e9f0; background: #fff; }
@media (max-width: 760px) {
  .product-share-card-body { grid-template-columns: 1fr; }
  .product-share-card-preview canvas { height: auto; max-height: 58vh; }
}
.product-image-upload input { display: none; }
.product-image-upload.disabled { color: var(--muted); opacity: .55; cursor: default; }
.product-image-remove { border-style: solid; border-color: #ffd4d1; background: var(--red-soft); color: var(--red); }
.product-image-remove {
  width: 18px;
  height: 18px;
  padding: 0;
  border-radius: 4px;
  font-size: 12px;
  line-height: 1;
}
.product-image-hover-preview {
  position: fixed;
  z-index: 10000;
  display: none;
  aspect-ratio: 1;
  padding: 8px;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 18px 48px rgba(15, 23, 42, .24);
  pointer-events: none;
}
.product-image-hover-preview.show { display: block; }
.product-image-hover-preview img { display: block; width: 100%; height: 100%; object-fit: contain; background: #fff; }
.product-image-hover-preview span {
  position: absolute;
  right: 12px;
  bottom: 12px;
  padding: 3px 7px;
  border-radius: 5px;
  background: rgba(15, 23, 42, .72);
  color: #fff;
  font-size: 10px;
}
.product-image-hover-preview.loading img { opacity: 0; }
.product-image-hover-preview.loading::before {
  content: "图片加载中";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: var(--muted);
  font-size: 12px;
}
.product-link-cell .product-link-input { min-width: 0; flex: 1 1 auto; }
.product-link-open,
.product-document-state,
.product-document-upload,
.product-document-remove {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  height: 28px;
  padding: 0 8px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
  color: var(--muted);
  font-size: 11px;
  font-weight: 650;
  white-space: nowrap;
}
.product-link-open:not(:disabled),
.product-document-state.has-file,
.product-document-upload:not(.disabled) { color: var(--blue); cursor: pointer; }
.product-document-state { min-width: 0; max-width: 86px; overflow: hidden; text-overflow: ellipsis; }
.product-document-upload input { display: none; }
.product-document-upload.disabled { opacity: .55; cursor: default; }
.product-document-remove { border-color: #ffd4d1; background: var(--red-soft); color: var(--red); cursor: pointer; }
.product-attachment-trigger { max-width: 118px; }
.product-attachment-popover { position: fixed; z-index: 120; overflow: hidden; border: 1px solid #cfd7e6; border-radius: 10px; background: #fff; box-shadow: 0 16px 42px rgba(31, 42, 68, .22); color: var(--text); }
.product-attachment-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 13px; border-bottom: 1px solid var(--line); background: #f7f9fc; }
.product-attachment-head > div { display: flex; align-items: baseline; gap: 9px; }
.product-attachment-head span { color: var(--muted); font-size: 11px; }
.product-attachment-add { display: inline-flex; align-items: center; min-height: 30px; padding: 0 10px; border: 1px solid #9db1f4; border-radius: 7px; background: var(--blue-soft); color: var(--blue); font-size: 12px; font-weight: 700; cursor: pointer; }
.product-attachment-add input { display: none; }
.product-attachment-add.disabled { opacity: .5; cursor: not-allowed; }
.product-attachment-list { max-height: 330px; overflow-y: auto; padding: 6px; }
.product-attachment-row { display: grid; grid-template-columns: 58px 46px minmax(140px, 1.3fr) 126px minmax(120px, 1fr) 46px; align-items: center; gap: 6px; padding: 6px; border-bottom: 1px solid #edf0f5; }
.product-attachment-row:last-child { border-bottom: 0; }
.product-attachment-row.is-current { border-radius: 7px; background: #f0f8f5; }
.product-attachment-row input:not([type="radio"]) { min-width: 0; height: 30px; padding: 0 7px; border: 1px solid var(--line); border-radius: 6px; font-size: 11px; }
.product-attachment-current { display: inline-flex; align-items: center; gap: 3px; color: var(--muted); font-size: 11px; white-space: nowrap; }
.product-attachment-open,
.product-attachment-delete { height: 28px; padding: 0 7px; border: 1px solid var(--line); border-radius: 6px; background: #fff; color: var(--blue); font-size: 11px; cursor: pointer; }
.product-attachment-delete { border-color: #ffd4d1; color: var(--red); }
.product-attachment-empty { padding: 28px 12px; color: var(--muted); text-align: center; }
.product-attachment-foot { display: flex; justify-content: space-between; gap: 14px; padding: 8px 13px; border-top: 1px solid var(--line); background: #fafbfc; color: var(--muted); font-size: 10px; }
@media (max-width: 760px) {
  .product-attachment-row { grid-template-columns: 54px 42px minmax(120px, 1fr); }
  .product-attachment-date, .product-attachment-note { grid-column: span 1; }
  .product-attachment-delete { grid-column: 3; justify-self: end; }
}
.product-offer-detail > td { height: auto; padding: 0 !important; background: #f8fafc !important; }
.product-offer-panel { padding: 12px 18px 14px; }
.product-offer-heading { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.product-offer-table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 7px; background: #fff; }
.product-offer-table-wrap table { width: 100%; min-width: 1050px; border-collapse: collapse; }
.product-offer-table-wrap th,
.product-offer-table-wrap td { position: static; height: 38px; background: #fff; }
.product-offer-table-wrap th { background: #eef2f7; }
.product-table-footer { display: grid; grid-template-columns: minmax(110px, 1fr) auto minmax(210px, 1fr); align-items: center; gap: 14px; min-height: 52px; padding: 6px 14px; border: 1px solid var(--line); border-top: 0; border-radius: 0 0 8px 8px; background: #fff; color: var(--muted); }
.product-pagination { display: flex; align-items: center; justify-content: center; gap: 8px; white-space: nowrap; }
.product-pagination label { display: flex; align-items: center; gap: 6px; }
.product-pagination select { min-height: 32px; padding: 0 26px 0 9px; border: 1px solid var(--line-strong); border-radius: 7px; background: #fff; color: var(--text); }
.product-pagination button { min-height: 32px; }
.product-pagination button:disabled { opacity: .45; cursor: not-allowed; }
.product-page-numbers { display: flex; align-items: center; gap: 4px; }
.product-page-button { min-width: 32px; min-height: 32px; padding: 0 7px; border: 1px solid var(--line-strong); border-radius: 7px; background: #fff; color: var(--text); cursor: pointer; }
.product-page-button:hover { border-color: #94aaf9; color: var(--blue); }
.product-page-button.active { border-color: var(--blue); background: var(--blue); color: #fff; }
.product-page-ellipsis { padding: 0 2px; }
.product-price-note { justify-self: end; }
@media (max-width: 900px) {
  .product-table-footer { grid-template-columns: 1fr auto; }
  .product-pagination { justify-content: flex-end; }
  .product-price-note { display: none; }
}

.product-edit-modal-panel { width: min(520px, calc(100vw - 28px)); }
.product-edit-modal-body { padding: 18px; }
.product-edit-modal-body p { margin: 0 0 14px; color: var(--muted); }
.product-edit-modal-body label { display: grid; grid-template-columns: 90px 1fr; align-items: center; gap: 10px; font-weight: 650; }
.product-edit-modal-body .actions { justify-content: flex-end; margin-top: 16px; }

.portal-product-result:not(.empty) {
  display: block;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}
.portal-product-table-wrap {
  position: relative;
  max-height: calc(100vh - 360px);
  overflow: auto;
  scrollbar-gutter: stable both-edges;
  overscroll-behavior: contain;
}
.portal-product-table-wrap::-webkit-scrollbar { width: 10px; height: 10px; }
.portal-product-table-wrap::-webkit-scrollbar-track { background: #eef1f6; }
.portal-product-table-wrap::-webkit-scrollbar-thumb { border: 2px solid #eef1f6; border-radius: 999px; background: #b4bdcb; }
.portal-product-table-wrap::-webkit-scrollbar-thumb:hover { background: #8f9aaa; }
.portal-product-table { width: max-content; min-width: 100%; border-collapse: collapse; table-layout: auto; }
#customer .portal-product-table {
  width: 100%;
  min-width: max(100%, var(--portal-product-min-width, 960px));
  table-layout: fixed;
}
#customer .portal-product-table th,
#customer .portal-product-table td {
  box-sizing: border-box;
  min-width: 0;
  max-width: none;
}
.portal-product-table th,
.portal-product-table td { height: 46px; padding: 8px 14px; border-bottom: 1px solid var(--line); text-align: left; white-space: nowrap; }
.portal-product-table.columns-medium th,
.portal-product-table.columns-medium td { padding-right: 11px; padding-left: 11px; }
.portal-product-table.columns-many th,
.portal-product-table.columns-many td { height: 44px; padding: 6px 9px; }
.portal-product-table th { position: sticky; top: 0; z-index: 2; background: #f5f7fb; color: var(--muted); }
.portal-product-image-cell { width: 62px; min-width: 62px; }
.portal-product-thumbnail { display: block; width: 42px; height: 42px; object-fit: cover; border: 1px solid var(--line); border-radius: 6px; background: #f8fafc; }
.portal-product-image-hover { display: inline-flex; align-items: center; justify-content: center; }
.portal-product-image-preview {
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  z-index: 3000;
  width: min(440px, 72vw);
  height: min(440px, 72vw);
  padding: 8px;
  border: 1px solid #d7deea;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 22px 60px rgba(20, 31, 50, .3);
  object-fit: contain;
  pointer-events: none;
  transform: translate(-50%, -50%);
}
.portal-product-image-hover:hover .portal-product-image-preview { display: block; }
.portal-product-text { overflow: hidden; text-overflow: ellipsis; }
.portal-product-field-brand { min-width: 76px; max-width: 150px; }
.portal-product-field-product_name { min-width: 210px; max-width: 380px; }
#customer .portal-product-field-product_name {
  width: 280px;
  min-width: 280px;
  max-width: 280px;
}
#customer .portal-product-name-cell > span {
  display: block;
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#customer .portal-product-field-model {
  overflow: visible;
  text-overflow: clip;
  white-space: nowrap;
}
#customer .portal-product-field-barcode {
  width: 154px;
  min-width: 154px;
  max-width: 154px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#customer .portal-product-barcode-cell > span {
  display: block;
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.portal-product-fast-tooltip {
  position: fixed;
  z-index: 12000;
  width: max-content;
  max-width: min(520px, calc(100vw - 20px));
  padding: 7px 10px;
  border: 1px solid #ccd6e6;
  border-radius: 7px;
  color: #25324a;
  background: #fff;
  box-shadow: 0 10px 28px rgba(28, 41, 70, .2);
  font-size: 12px;
  line-height: 1.55;
  white-space: normal;
  overflow-wrap: anywhere;
  pointer-events: none;
}
.portal-product-fast-tooltip.hidden { display: none; }
.portal-product-field-category { min-width: 90px; max-width: 160px; }
.portal-product-field-model { min-width: 128px; max-width: 230px; }
.portal-product-field-barcode { min-width: 126px; max-width: 165px; }
.portal-product-field-customer_price,
.portal-product-field-jd_price { min-width: 86px; }
.portal-product-field-tax_mode,
.portal-product-field-free_shipping,
.portal-product-field-status,
.portal-product-field-jd_link { min-width: 68px; }
.portal-product-note { max-width: 300px; overflow: hidden; text-overflow: ellipsis; }
.portal-product-price { color: var(--blue); font-weight: 750; font-variant-numeric: tabular-nums; }
.portal-product-link-icon {
  display: inline-grid;
  width: 26px;
  height: 26px;
  place-items: center;
  border: 1px solid #b9c9f4;
  border-radius: 7px;
  color: #315fe0;
  background: #eef3ff;
  transition: background-color .12s ease, transform .12s ease;
}
.portal-product-link-icon:hover {
  background: #dfe8ff;
  transform: translateY(-1px);
}
.portal-product-link-icon svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.portal-product-empty { padding: 52px; color: var(--muted); text-align: center; }

@media (max-width: 1560px) {
  #products .product-topbar { align-items: flex-start; flex-wrap: wrap; }
  #products .product-topbar .top-actions { width: 100%; overflow-x: auto; }
  .product-toolbar-panel { align-items: stretch; flex-direction: column; }
  .product-search-group { flex: 0 0 auto; }
  .product-action-group { overflow: visible; }
}

@media (max-width: 760px) {
  #products .product-topbar .top-actions { align-items: stretch; flex-wrap: wrap; overflow: visible; }
  .product-summary-strip { display: grid; flex: 1 1 100%; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; width: 100%; }
  .product-summary-strip > div,
  .product-summary-strip > button { width: auto; min-width: 0; }
  .product-summary-strip > :last-child { grid-column: 1 / -1; }
  .product-search-group { flex-wrap: wrap; }
  .product-search-group input { flex-basis: 100%; min-width: 0; }
  .product-search-group .product-price-filter-input { flex: 1 1 120px; width: auto; min-width: 0; }
}

#authorizations .authorization-list-panel {
  padding: 0;
}

.nav::before {
  content: "";
  position: absolute;
  top: 8px;
  bottom: 8px;
  left: 0;
  width: 3px;
  height: auto;
  border-radius: 0 3px 3px 0;
  background: transparent;
}

.nav:hover {
  border-color: transparent;
  background: #eef2f8;
  color: var(--text);
}

.nav.active {
  border-color: transparent;
  background: var(--blue-soft);
  color: var(--blue);
  font-weight: 680;
}

.nav.active::before {
  background: var(--blue);
}

.logout-nav {
  margin-top: 8px;
  border-top: 1px solid var(--sidebar-line);
  color: var(--red);
}

.logout-nav:hover {
  border-color: transparent;
  background: var(--red-soft);
  color: var(--red);
}

.main {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  width: calc(100vw - 222px);
  min-width: 0;
  height: 100vh;
  padding: 0;
  overflow: hidden;
}

.view {
  display: none;
  min-width: 0;
}

.view.active {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  height: 100%;
  padding-bottom: 26px;
  overflow-x: hidden;
  overflow-y: auto;
}

.view > :not(.topbar) {
  width: auto;
  max-width: none;
  margin-right: 30px;
  margin-left: 30px;
}

/* Page title bars */
.topbar,
#orders .topbar,
#statistics .topbar,
#funds .topbar,
#entry .topbar {
  display: flex;
  flex: 0 0 auto;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  width: 100%;
  min-height: 0;
  margin: 0;
  padding: 18px 30px 14px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

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

h1,
.topbar h1,
#orders .topbar h1,
#statistics .topbar h1,
#funds .topbar h1,
#entry .topbar h1 {
  margin: 0;
  color: var(--text);
  font-size: 21px;
  font-weight: 720;
  line-height: 1.25;
}

p,
.topbar p,
#orders .topbar p,
#statistics .topbar p,
#funds .topbar p,
#entry .topbar p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.45;
}

.top-actions,
.topbar .top-actions,
.topbar > button {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 8px;
  align-self: flex-start;
}

#orders .top-actions .doc-action-btn {
  border-width: 1px;
  border-style: solid;
  box-shadow: 0 2px 5px rgba(31, 42, 68, .06);
  transition: transform .15s ease, border-color .15s ease, background-color .15s ease, color .15s ease, box-shadow .15s ease;
}

#orders .top-actions .doc-action-sales {
  border-color: #9bd9bd;
  background: #eaf8f1;
  color: #147a50;
}

#orders .top-actions .doc-action-purchase {
  border-color: #adc2f5;
  background: #eef3ff;
  color: #315fcb;
}

#orders .top-actions .doc-action-logistics {
  border-color: #9bd5df;
  background: #ecf8fb;
  color: #14758a;
}

#orders .top-actions .doc-action-contract {
  border-color: #e3c27f;
  background: #fff6e6;
  color: #996315;
}

#orders .top-actions .order-h5-trigger {
  border-color: #c9b4ef;
  background: #f4efff;
  color: #7048b8;
}

#orders .top-actions .doc-action-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 5px 11px rgba(31, 42, 68, .11);
}

#orders .top-actions .doc-action-sales:hover {
  border-color: #68c292;
  background: #d9f3e6;
  color: #0d6741;
}

#orders .top-actions .doc-action-purchase:hover {
  border-color: #7899e8;
  background: #dfe8ff;
  color: #244eaf;
}

#orders .top-actions .doc-action-logistics:hover {
  border-color: #64bdca;
  background: #daf2f6;
  color: #0d6475;
}

#orders .top-actions .doc-action-contract:hover {
  border-color: #cfa451;
  background: #ffedcc;
  color: #7d4e0c;
}

#orders .top-actions .order-h5-trigger:hover {
  border-color: #a887df;
  background: #e9ddff;
  color: #59349c;
}

/* Shared controls */
input,
select,
textarea {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--wb-surface-2);
  color: var(--text);
  font-family: inherit;
  font-size: 13px;
  transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}

input,
select {
  height: 34px;
  padding: 0 11px;
}

textarea {
  padding: 9px 11px;
  line-height: 1.55;
}

input::placeholder,
textarea::placeholder {
  color: #98a2b3;
}

input:hover,
select:hover,
textarea:hover {
  border-color: #c7d0dd;
}

input:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: var(--blue);
  background: #ffffff;
  box-shadow: 0 0 0 3px rgba(59, 91, 219, .1);
}

button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 34px;
  padding: 0 14px;
  border: 1px solid transparent;
  border-radius: 8px;
  box-shadow: none;
  font-family: inherit;
  font-size: 13px;
  font-weight: 620;
  line-height: 1;
  white-space: nowrap;
  transition: border-color .15s ease, background-color .15s ease, color .15s ease, box-shadow .15s ease;
}

button:focus-visible {
  outline: 3px solid rgba(59, 91, 219, .16);
  outline-offset: 1px;
}

.primary {
  border-color: var(--blue);
  background: var(--blue);
  color: #ffffff;
}

.primary:hover {
  border-color: var(--blue-dark);
  background: var(--blue-dark);
  box-shadow: 0 4px 10px rgba(59, 91, 219, .16);
}

.ghost {
  border-color: var(--line);
  background: #ffffff;
  color: #3f4a5a;
}

.ghost:hover {
  border-color: #c9d2df;
  background: var(--wb-surface-2);
  color: var(--text);
}

.danger {
  border-color: #f3cecc;
  background: var(--red-soft);
  color: var(--red);
}

.danger:hover {
  border-color: #e8b4b1;
  background: #f9e2e0;
}

.compact-btn {
  height: 30px;
  padding: 0 11px;
  border-radius: 7px;
  font-size: 12.5px;
}

button:disabled {
  opacity: .48;
  cursor: not-allowed;
}

/* Cards and section headers */
.panel,
.tablewrap,
.stats-search-panel,
.stats-orders-panel,
.orders-control-panel,
.finance-customers-wrap,
.finance-ledger-wrap,
.stats-orders-wrap,
.supplier-orders-wrap,
.customer-result:not(.empty) {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
  box-shadow: var(--wb-shadow);
}

.panel {
  margin-bottom: 14px;
  padding: 14px 16px;
}

.panel + .panel {
  margin-top: 2px;
}

.panel-title {
  display: flex;
  align-items: center;
  min-height: 20px;
  margin: 0 0 11px;
  padding: 0;
  border: 0;
  color: var(--text);
  font-size: 14px;
  font-weight: 680;
}

.panel-title::before {
  content: "";
  width: 4px;
  height: 15px;
  flex: 0 0 4px;
  margin-right: 9px;
  border-radius: 3px;
  background: var(--blue);
}

.result-title {
  display: flex;
  justify-content: space-between;
  padding-bottom: 11px;
  border-bottom: 1px solid var(--line);
}

.result-title::before {
  display: none;
}

.result-title-left {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.result-count,
.tag {
  border: 1px solid #dbe2fb;
  border-radius: 7px;
  background: var(--blue-soft);
  color: var(--blue);
}

/* Dashboard */
.metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(128px, 1fr));
  gap: 14px;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.metrics div {
  min-height: 86px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
  box-shadow: var(--wb-shadow);
}

.metrics div:nth-child(1) {
  border-color: #caece7;
  background: #f1fbf9;
}

.metrics div:nth-child(2) {
  border-color: #f1deb9;
  background: #fffaf0;
}

.metrics div:nth-child(3) {
  border-color: #d6e1fa;
  background: #f3f6ff;
}

.metrics div:nth-child(4) {
  border-color: #eddadd;
  background: #fff7f7;
}

.metrics span {
  color: var(--muted);
  font-size: 12px;
}

.metrics strong {
  margin-top: 7px;
  color: var(--text);
  font-size: 25px;
  font-weight: 730;
  font-variant-numeric: tabular-nums;
}

#mToday { color: var(--teal); }
#mReview { color: var(--amber); }
#mSent { color: var(--blue); }
#mIssue { color: var(--red); }

/* Dense operational tables */
.tablewrap,
.stats-orders-wrap,
.finance-customers-wrap,
.finance-ledger-wrap,
.supplier-orders-wrap {
  overflow: auto;
}

table:not(.doc-table) {
  border-collapse: collapse;
  color: var(--text);
  font-size: 12.5px;
}

table:not(.doc-table) th {
  height: 34px;
  padding: 7px 9px;
  border-bottom: 1px solid var(--line);
  background: #f6f8fc;
  color: #566173;
  font-size: 12px;
  font-weight: 660;
  white-space: nowrap;
}

table:not(.doc-table) td {
  padding: 6px 9px;
  border-bottom: 1px solid #eef1f6;
  background: #ffffff;
  vertical-align: middle;
}

table:not(.doc-table) tbody tr:nth-child(even) td {
  background: #fcfdff;
}

table:not(.doc-table) tbody tr:hover td {
  background: #f7f9fe;
}

table:not(.doc-table) tbody tr:has(input.row-check:checked) td,
table:not(.doc-table) tbody tr:has(input.entry-row-check:checked) td {
  background: var(--blue-soft);
}

.orders-table th,
.orders-table td,
.entry-result-table th,
.entry-result-table td,
.supplier-orders-table th,
.supplier-orders-table td,
.portal-orders-table th,
.portal-orders-table td {
  height: 32px;
  padding: 4px 6px;
}

.orders-table td input,
.orders-table td select,
.orders-table td textarea,
.entry-result-table .entry-edit-input {
  border-radius: 7px;
}

.orders-table input[readonly],
.orders-table textarea[readonly],
.orders-table input:disabled,
.orders-table textarea:disabled,
.orders-table select:disabled {
  border-color: transparent;
  background: transparent;
  color: var(--text);
  opacity: 1;
}

/* Order entry */
#entry .entry-input-panel {
  padding: 12px 14px;
}

#entry .entry-input-panel .archive-select-row {
  display: grid;
  grid-template-columns: minmax(280px, 360px) minmax(280px, 360px) minmax(430px, 1fr);
  align-items: center;
  gap: 12px;
  margin-bottom: 9px;
}

#entry .entry-input-panel .archive-select-row > label {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  color: #5b6675;
  font-size: 12.5px;
  font-weight: 590;
  white-space: nowrap;
}

#entry .entry-input-panel .archive-select-row input {
  width: 100%;
  min-width: 0;
}

#entry .entry-import-inline {
  display: grid;
  grid-template-columns: auto minmax(180px, 1fr) auto auto;
  align-items: center;
  gap: 8px;
  justify-self: stretch;
  min-width: 0;
}

#entry .entry-template-download {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 34px;
  padding: 0 13px;
  border: 1px solid #cdd7ea;
  border-radius: 8px;
  background: #fff;
  color: #315fd6;
  font-size: 13px;
  font-weight: 650;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
}

#entry .entry-template-download:hover {
  border-color: #89a7f7;
  background: #f4f7ff;
}

#entry .entry-import-inline > span {
  color: #5b6675;
  font-weight: 590;
  white-space: nowrap;
}

#entry .entry-import-inline input[type="file"],
#orders .orders-logistics-panel input[type="file"] {
  width: 100%;
  min-width: 0;
  height: 34px;
  overflow: hidden;
  padding: 0;
  border-radius: 8px;
  background: var(--wb-surface-2);
  color: #697586;
  line-height: 32px;
}

#entry .entry-import-inline input[type="file"]::file-selector-button,
#orders .orders-logistics-panel input[type="file"]::file-selector-button {
  height: 32px;
  margin-right: 9px;
  padding: 0 12px;
  border: 0;
  border-right: 1px solid var(--line);
  background: #eef1f7;
  color: #465166;
  font: inherit;
  font-weight: 620;
}

#entry .entry-parse-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: stretch;
  gap: 10px;
}

#entry #rawInput {
  width: 100%;
  min-height: 62px;
  max-height: 116px;
  resize: vertical;
}

#entry .entry-inline-actions {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

#entry .entry-result-panel {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-height: 260px;
  max-height: none;
  overflow: hidden;
}

#entry #parseResult {
  flex: 1 1 auto;
  min-height: 180px;
  overflow: auto;
}

/* Order management */
.orders-overview {
  position: relative;
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  justify-content: center;
  min-height: 176px;
  margin-bottom: 16px !important;
  padding: 24px 36px;
  overflow: hidden;
  border: 1px solid rgba(61, 83, 167, .28);
  border-radius: 8px;
  background: linear-gradient(112deg, #222c4b 0%, #30437e 57%, #4965d9 100%);
  box-shadow: 0 14px 32px rgba(45, 63, 128, .18);
  color: #ffffff;
}

.orders-overview::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 31%;
  background: linear-gradient(135deg, transparent 0 34%, rgba(255, 255, 255, .055) 34% 60%, rgba(255, 255, 255, .025) 60%);
  pointer-events: none;
}

.orders-overview-heading {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 16px;
}

.orders-overview-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  flex: 0 0 54px;
  border-radius: 8px;
  background: rgba(255, 255, 255, .15);
  color: #ffffff;
  font-size: 20px;
}

.orders-overview-heading strong {
  display: block;
  color: #ffffff;
  font-size: 20px;
  font-weight: 700;
}

.orders-overview-heading > div > span {
  display: block;
  margin-top: 4px;
  color: rgba(255, 255, 255, .68);
  font-family: "SF Mono", Menlo, Consolas, monospace;
  font-size: 12.5px;
}

.orders-overview-stats {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-end;
  gap: 42px;
  margin-top: 22px;
}

.orders-overview-stats > span {
  display: grid;
  grid-template-columns: auto auto;
  align-items: baseline;
  column-gap: 4px;
}

.orders-overview-stats small {
  grid-column: 1 / -1;
  margin-bottom: 5px;
  color: rgba(255, 255, 255, .66);
  font-size: 12px;
}

.orders-overview-stats b {
  color: #ffffff;
  font-size: 26px;
  font-weight: 730;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.orders-overview-stats em {
  color: rgba(255, 255, 255, .72);
  font-size: 12px;
  font-style: normal;
}

#orders .orders-control-panel {
  overflow: hidden;
  margin-bottom: 12px;
}

#orders .orders-control-panel .filters {
  display: grid;
  grid-template-columns: 190px 190px minmax(280px, 600px) 74px auto auto;
  align-items: center;
  justify-content: start;
  gap: 9px;
  margin: 0;
  padding: 10px 14px;
  overflow: visible;
  border-bottom: 1px solid var(--line);
  background: #ffffff;
}

#orders .orders-control-panel .filters > input,
#orders .orders-control-panel .filters #fQ,
#orders .orders-control-panel .date-filter-label input,
#orders .orders-control-panel #searchBtn {
  height: 34px;
}

#orders .orders-control-panel .date-filter-label {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 7px;
  color: #5b6675;
  font-size: 12.5px;
  font-weight: 590;
  white-space: nowrap;
}

#orders .orders-control-panel .filters #fQ {
  width: 100%;
  min-width: 0;
}

#orders .orders-control-panel #searchBtn,
#statistics #statsSearchBtn {
  border-color: var(--teal);
  background: var(--teal);
  color: #ffffff;
}

#orders .orders-control-panel #searchBtn:hover,
#statistics #statsSearchBtn:hover {
  border-color: var(--teal-dark);
  background: var(--teal-dark);
}

#orders .orders-control-panel .toggle-label {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 34px;
  color: #697586;
  font-size: 12.5px;
  white-space: nowrap;
}

#orders .orders-control-panel .toggle-label input {
  width: 16px;
  height: 16px;
  accent-color: var(--blue);
}

#orders .orders-control-panel .order-edit-lockbar {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 46px;
  margin: 0;
  padding: 7px 14px;
  overflow: hidden;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  background: var(--wb-surface-2);
  box-shadow: none;
}

.order-lock-trigger {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 7px;
  height: 31px;
  padding: 0 11px;
  border: 1px solid #f0d39e;
  border-radius: 8px;
  background: var(--amber-soft);
  color: #9a6009;
  box-shadow: none;
}

.order-lock-trigger:hover {
  border-color: #e6bd72;
  background: #ffefcf;
}

.order-lock-trigger.unlocked {
  border-color: #bce1d9;
  background: var(--teal-soft);
  color: var(--teal-dark);
}

.order-lock-trigger.unlocked:hover {
  border-color: #91d6ca;
  background: #dff5f1;
}

.order-lock-dot {
  width: 7px;
  height: 7px;
  flex: 0 0 7px;
  border-radius: 50%;
  background: currentColor;
}

.order-lock-help {
  min-width: 0;
  overflow: hidden;
  color: #7b8697;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#orders .orders-logistics-panel {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr) minmax(340px, 440px);
  align-items: center;
  gap: 12px;
  min-height: 52px;
  margin: 0;
  padding: 8px 14px;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background: #ffffff;
  box-shadow: none;
}

#orders .orders-logistics-panel .panel-title {
  min-width: 0;
  margin: 0;
  padding: 0;
  border-left: 0;
  white-space: nowrap;
}

#orders .orders-logistics-panel .panel-title::before {
  background: var(--teal);
}

#orders .orders-logistics-panel .order-count-summary {
  min-width: max-content;
  padding-right: 12px;
  border-right: 1px solid var(--line);
}

#orders .orders-logistics-panel p {
  min-width: 0;
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#orders .orders-logistics-panel .actions {
  display: grid;
  grid-template-columns: 112px minmax(120px, 1fr) 112px;
  gap: 5px;
  min-width: 0;
  margin: 0;
}

#orders .orders-logistics-panel .actions input[type="file"] {
  width: 100%;
  min-width: 0;
}

#orders .orders-logistics-panel .actions .logistics-template-link,
#orders .orders-logistics-panel .actions #importLogisticsBtn {
  width: 100%;
  min-width: 0;
  padding-right: 8px;
  padding-left: 8px;
  white-space: nowrap;
}

#orders > .tablewrap {
  position: relative;
  isolation: isolate;
  flex: 1 1 auto;
  min-height: 220px;
  max-height: none;
  overscroll-behavior: contain;
}

#orders .orders-table thead {
  position: sticky;
  top: 0;
  z-index: 50;
}

#orders .orders-table thead th {
  position: relative;
  z-index: 1;
  background: #f3f5f8;
  box-shadow: inset 0 -1px 0 #d8dde6, 0 3px 8px rgba(24, 35, 53, .08);
  opacity: 1;
}

#orders .orders-table tbody {
  position: relative;
  z-index: 1;
}

#orders .orders-pager {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 52px;
  padding: 8px 14px;
  margin-top: 10px;
  border: 1px solid #d9dde4;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 5px 16px rgba(20, 29, 45, .05);
  color: #596273;
  font-size: 13px;
}
#orders .orders-pager-summary {
  white-space: nowrap;
  font-weight: 600;
  color: #4b5565;
}
#orders .orders-pager-controls,
#orders .orders-page-size,
#orders .orders-page-jump,
#orders .orders-page-numbers {
  display: flex;
  align-items: center;
  gap: 6px;
}
#orders .orders-pager button,
#orders .orders-pager select,
#orders .orders-pager input {
  height: 34px;
  min-height: 34px;
  border-color: #d7dce5;
  border-radius: 8px;
  background: #fff;
  box-shadow: none;
  font-size: 13px;
}
#orders .orders-pager button {
  min-width: 56px;
  padding: 0 12px;
}
#orders .orders-page-numbers button {
  min-width: 34px;
  padding: 0 9px;
}
#orders .orders-page-numbers button.active {
  border-color: #173f7a;
  background: #173f7a;
  color: #fff;
}
#orders .orders-pager select {
  min-width: 76px;
  padding: 0 26px 0 10px;
}
#orders .orders-page-jump input {
  width: 56px;
  padding: 0 7px;
  text-align: center;
}
#orders .orders-page-ellipsis {
  min-width: 18px;
  text-align: center;
  color: #8992a2;
}
@media (max-width: 980px) {
  #orders .orders-pager {
    align-items: flex-start;
    flex-direction: column;
  }
  #orders .orders-pager-controls {
    width: 100%;
    flex-wrap: wrap;
  }
}

/* Finance and funds */
#statistics .stats-search-panel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  padding: 12px 14px;
}

#statistics .stats-toolbar-main {
  flex: 1 1 760px;
  min-width: 0;
  margin-left: auto;
  padding: 0;
  border: 0;
}

#statistics .stats-search-row {
  display: grid;
  grid-template-columns: minmax(280px, 1fr) 76px repeat(3, 66px) 66px;
  gap: 8px;
}

#statistics .stats-quick-date {
  height: 36px;
  padding: 0 10px;
  border: 1px solid;
  border-radius: 7px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: filter .15s ease, transform .15s ease, box-shadow .15s ease;
}

#statistics .stats-quick-date:hover { filter: saturate(1.12) brightness(.98); transform: translateY(-1px); }
#statistics .stats-quick-today { border-color: #91d7ca; color: #157f6f; background: #eaf8f5; }
#statistics .stats-quick-yesterday { border-color: #a8c9f2; color: #2f70bd; background: #edf5ff; }
#statistics .stats-quick-before { border-color: #efc58e; color: #bc6a13; background: #fff5e8; }
#statistics .stats-quick-date.is-active { box-shadow: 0 0 0 2px rgba(27, 145, 126, .14), 0 4px 10px rgba(36, 52, 84, .08); filter: saturate(1.2); }

#statistics .stats-toolbar-meta {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 8px;
  padding: 0;
}

#statistics .stats-date-row,
#statistics .stats-total-row {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  margin: 0;
}

#statistics .stats-date-row input {
  width: 145px;
}

#statistics .stats-total-row {
  justify-content: flex-end;
  white-space: nowrap;
}

#statistics .stats-total-row b {
  color: var(--blue);
  font-size: 18px;
  font-variant-numeric: tabular-nums;
}

#statistics .stats-orders-panel {
  padding: 0;
  overflow: hidden;
}

#statistics .stats-orders-panel > .panel-title {
  margin: 0;
  padding: 13px 16px;
  border-bottom: 1px solid var(--line);
}

#statistics .stats-orders-panel > .panel-title::before {
  display: block;
}

#statistics .stats-orders-wrap {
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

#funds .funds-finance-panel {
  padding: 0;
  overflow: hidden;
}

#funds .funds-panel-head {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 58px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--line);
}

#funds .funds-panel-head .panel-title {
  flex: 0 0 auto;
  margin: 0;
}

.finance-summary-row,
.customer-summary {
  display: flex;
  flex-wrap: nowrap;
  gap: 8px;
  min-width: 0;
  padding: 0;
  overflow-x: auto;
}

.finance-summary-row span,
.customer-summary > div {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 36px;
  padding: 5px 11px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--wb-surface-2);
  white-space: nowrap;
}

.finance-summary-row span:nth-child(2),
.customer-summary > div:nth-child(2) {
  border-color: #caece7;
  background: #f1fbf9;
}

.finance-summary-row span:nth-child(3),
.customer-summary > div:nth-child(3) {
  border-color: #d6e1fa;
  background: #f3f6ff;
}

.finance-summary-row span:nth-child(4),
.customer-summary > div:nth-child(4) {
  border-color: #f1deb9;
  background: #fffaf0;
}

.finance-summary-row b,
.customer-summary strong {
  color: var(--blue);
  font-size: 17px;
  font-variant-numeric: tabular-nums;
}

#funds .funds-customer-toolbar {
  min-height: 48px;
  padding: 8px 14px;
  border-bottom: 1px solid var(--line);
}

#funds .funds-customer-toolbar input {
  width: min(380px, 38vw);
}

#funds .funds-smart-sort {
  padding: 6px 10px;
  border: 1px solid #cfe0ff;
  border-radius: 8px;
  background: #f2f6ff;
  color: #3568d4;
  white-space: nowrap;
}

#funds .funds-customer-workspace {
  display: grid;
  grid-template-columns: minmax(0, 72fr) minmax(310px, 28fr);
  height: clamp(520px, 64vh, 760px);
  min-height: 0;
  border-top: 1px solid var(--line);
}

#funds .funds-customer-master {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  min-width: 0;
  min-height: 0;
  border-right: 1px solid var(--line);
}

#funds .funds-customer-workspace .finance-customers-wrap {
  height: auto;
  max-height: none;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: scroll;
  scrollbar-gutter: stable;
  border-top: 0;
}

#funds .funds-customer-workspace .finance-customers-table {
  width: 100%;
  min-width: 0;
  table-layout: fixed;
}

#funds .funds-customer-workspace .finance-customers-table th,
#funds .funds-customer-workspace .finance-customers-table td {
  min-width: 0;
  padding-left: clamp(4px, .55vw, 10px);
  padding-right: clamp(4px, .55vw, 10px);
}

#funds .funds-customer-workspace .finance-customers-table th:nth-child(1) { width: 19%; }
#funds .funds-customer-workspace .finance-customers-table th:nth-child(2) { width: 12%; }
#funds .funds-customer-workspace .finance-customers-table th:nth-child(3) { width: 8%; }
#funds .funds-customer-workspace .finance-customers-table th:nth-child(4),
#funds .funds-customer-workspace .finance-customers-table th:nth-child(5),
#funds .funds-customer-workspace .finance-customers-table th:nth-child(6) { width: 10%; }
#funds .funds-customer-workspace .finance-customers-table th:nth-child(7) { width: 14%; }
#funds .funds-customer-workspace .finance-customers-table th:nth-child(8) { width: 17%; }

#funds .funds-customer-workspace .finance-customers-table td {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#funds .funds-customer-workspace .fund-customer-name {
  max-width: calc(100% - 72px);
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: middle;
}

#funds .funds-customer-workspace .fund-action-cell button {
  max-width: 100%;
  padding-left: clamp(7px, .7vw, 13px);
  padding-right: clamp(7px, .7vw, 13px);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#funds .funds-customer-workspace .debt-trigger {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#funds .funds-customer-workspace .debt-trigger small {
  display: inline;
  margin-left: 2px;
}

#funds .funds-customer-workspace .finance-customers-table th:nth-child(4) { color:#087b5d; background:#eaf9f3; }
#funds .funds-customer-workspace .finance-customers-table td:nth-child(4) { color:#087b5d; background:rgba(234,249,243,.58); }
#funds .funds-customer-workspace .finance-customers-table th:nth-child(5) { color:#315fd2; background:#edf3ff; }
#funds .funds-customer-workspace .finance-customers-table td:nth-child(5) { color:#315fd2; background:rgba(237,243,255,.68); }
#funds .funds-customer-workspace .finance-customers-table th:nth-child(6) { color:#087c89; background:#eaf8fa; }
#funds .funds-customer-workspace .finance-customers-table td:nth-child(6) { color:#087c89; background:rgba(234,248,250,.68); }
#funds .funds-customer-workspace .finance-customers-table th:nth-child(8) { color:#cf3f39; background:#fff0ef; }
#funds .funds-customer-workspace .finance-customers-table td:nth-child(8) { overflow:visible; color:#cf3f39; background:rgba(255,240,239,.58); text-overflow:clip; white-space:normal; }
#funds .funds-customer-workspace .finance-customers-table td:nth-child(8) .debt-trigger { max-width:none; overflow:visible; text-overflow:clip; white-space:normal; }

#funds .fund-settlement-tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  max-width: 100%;
  padding: 3px 8px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
}

#funds .fund-settlement-tag.is-daily {
  border-color: #bfd2ff;
  background: #edf3ff;
  color: #315fd2;
}

#funds .fund-settlement-tag.is-prepaid {
  border-color: #b9e4d5;
  background: #eaf9f3;
  color: #087b5d;
}

#funds .finance-customers-table tr[data-funds-select-customer] {
  cursor: pointer;
}

#funds .finance-customers-table tr[data-funds-select-customer]:hover td {
  background: #f7f9ff;
}

#funds .finance-customers-table tr.is-selected td {
  background: #eef3ff;
}

#funds .finance-customers-table tr.is-selected td:first-child {
  box-shadow: inset 3px 0 #3c63e6;
}

#funds .funds-customer-detail {
  min-width: 0;
  padding: 20px;
  background: linear-gradient(180deg, #f8faff 0, #fff 170px);
  overflow: auto;
}

#funds .funds-detail-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--line);
}

#funds .funds-detail-head small,
#funds .funds-detail-head p,
#funds .funds-detail-metrics small {
  color: var(--muted);
}

#funds .funds-detail-head h3 { margin: 5px 0; font-size: 17px; }
#funds .funds-detail-head p { margin: 0; font-size: 12px; }
#funds .funds-detail-pending { align-self: flex-start; padding: 5px 9px; border-radius: 999px; background: #fff2dc; color: #b86700; font-size: 12px; }
#funds .funds-detail-metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(5px, .55vw, 10px); margin: 16px 0; }
#funds .funds-detail-metrics > div { min-width: 0; padding: clamp(8px, .7vw, 12px); border: 1px solid var(--line); border-radius: 10px; background: #fff; }
#funds .funds-detail-metrics small { display: block; margin-bottom: 7px; }
#funds .funds-detail-metrics strong { display: block; overflow: hidden; font-size: clamp(14px, 1vw, 18px); font-variant-numeric: tabular-nums; text-overflow: ellipsis; white-space: nowrap; }
#funds .funds-detail-metrics .balance { color: #087c61; }
#funds .funds-detail-metrics .due { color: #3c63e6; }
#funds .funds-detail-metrics .received { color: #16854f; }
#funds .funds-detail-metrics .debt { color: #dc4b45; }
#funds .funds-detail-actions { display: flex; gap: 9px; margin-bottom: 18px; }
#funds .funds-detail-ledger { border-top: 1px solid var(--line); padding-top: 15px; }
#funds .funds-detail-ledger h4 { margin: 0 0 8px; }
#funds .funds-detail-ledger-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px dashed var(--line); }
#funds .funds-detail-ledger-row span { min-width: 0; }
#funds .funds-detail-ledger-row b, #funds .funds-detail-ledger-row small { display: block; }
#funds .funds-detail-ledger-row small { margin-top: 3px; color: var(--muted); }
#funds .funds-detail-ledger-row strong.in { color: #16854f; }
#funds .funds-detail-ledger-row strong.out { color: #dc4b45; }
#funds .funds-detail-empty { padding: 30px 10px; color: var(--muted); text-align: center; }

@media (max-width: 1180px) {
  #funds .funds-customer-workspace { grid-template-columns: 1fr; height: auto; }
  #funds .funds-customer-master { border-right: 0; }
  #funds .funds-customer-workspace .finance-customers-wrap { height: clamp(420px, 58vh, 680px); }
  #funds .funds-customer-detail { border-top: 1px solid var(--line); }
}

@media (max-width: 680px) {
  #funds .funds-detail-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

#funds .funds-ledger-title {
  margin: 0;
  padding: 12px 14px 8px;
  border-top: 1px solid var(--line);
}

#funds .funds-ledger-filters {
  padding: 0 14px 10px;
}

/* Archive and settings pages */
#customers .panel .actions,
#suppliers .panel .actions,
#settings .role-create-row,
#settings .system-user-create-row {
  display: flex;
  align-items: center;
  gap: 9px;
  flex-wrap: wrap;
}

#suppliers .supplier-create-row {
  display: grid;
  grid-template-columns: minmax(240px, 1.2fr) minmax(170px, .7fr) minmax(150px, .6fr) auto minmax(210px, 1fr) auto;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
}

#suppliers .supplier-create-row > input {
  width: 100%;
  min-width: 0;
}

#suppliers .supplier-create-row > input[readonly] {
  background: var(--wb-surface-2);
  color: var(--text);
  cursor: default;
}

.supplier-import-picker {
  display: inline-flex;
  align-items: center;
  min-width: 0;
  height: 36px;
  padding: 0 12px;
  border: 1px solid var(--line-strong);
  border-radius: 7px;
  background: var(--wb-surface-2);
  color: var(--muted);
  cursor: pointer;
}

.supplier-import-picker span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.supplier-import-picker.has-file {
  border-color: #9bcfc8;
  background: var(--teal-soft);
  color: var(--teal-dark);
}

.supplier-import-picker input { display: none; }

#suppliers .supplier-create-result {
  min-height: 22px;
  margin-top: 8px;
}

#suppliers .supplier-table {
  width: 100%;
  min-width: 760px;
  table-layout: fixed;
}

#suppliers .supplier-table th:nth-child(1) { width: 38%; }
#suppliers .supplier-table th:nth-child(2) { width: 20%; }
#suppliers .supplier-table th:nth-child(3) { width: 20%; }
#suppliers .supplier-table th:nth-child(4) { width: 22%; }

#customers .tablewrap,
#suppliers .tablewrap,
#settings .tablewrap {
  flex: 1 1 auto;
  min-height: 220px;
  max-height: none;
}

@media (max-width: 1100px) {
  #suppliers .supplier-create-row {
    grid-template-columns: minmax(240px, 1fr) auto;
  }
}

/* 订单录入输入区：B 版深海军蓝结构边。 */
#entry .entry-input-panel {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border: 1px solid #17365f;
  border-radius: 14px;
  background: linear-gradient(180deg, #fff 0%, #fbfcfe 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .98),
    inset 0 0 0 5px #fff,
    inset 0 0 0 6px #dce5f0,
    0 4px 9px rgba(20, 49, 87, .12),
    0 14px 30px rgba(20, 49, 87, .08);
}

#entry .entry-input-panel::after {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 5px;
  border: 1px solid rgba(59, 86, 124, .13);
  border-radius: 9px;
  pointer-events: none;
}

#entry .entry-input-panel > * {
  position: relative;
  z-index: 1;
}

/* 开票管理：标题、统计、筛选和刷新合并为单行工具栏。 */
#fundsInvoicePanel .invoice-page-head--combined {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 10px;
  min-height: 74px;
  overflow: hidden;
}

#fundsInvoicePanel .invoice-page-head--combined .invoice-page-title {
  flex: 0 1 270px;
  min-width: 210px;
  padding-right: 14px;
}

#fundsInvoicePanel .invoice-page-head--combined .invoice-stats--inline {
  flex: 0 1 420px;
  min-width: 300px;
}

#fundsInvoicePanel .invoice-page-head--combined .invoice-stats--inline > div {
  padding-right: 10px;
  padding-left: 10px;
}

#fundsInvoicePanel .invoice-page-head--combined .invoice-filter-bar {
  display: flex;
  flex: 1 1 540px;
  align-items: center;
  gap: 8px;
  min-width: 360px;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
}

#fundsInvoicePanel .invoice-page-head--combined .invoice-filter-bar input {
  min-width: 160px;
}

#fundsInvoicePanel .invoice-page-head--combined .invoice-filter-bar select {
  flex: 0 1 150px;
  min-width: 120px;
}

#fundsInvoicePanel .invoice-page-head--combined .invoice-filter-bar input,
#fundsInvoicePanel .invoice-page-head--combined .invoice-filter-bar select,
#fundsInvoicePanel .invoice-page-head--combined .invoice-filter-bar button,
#fundsInvoicePanel .invoice-page-head--combined > #refreshFundsInvoicesBtn {
  height: 38px;
  min-height: 38px;
  white-space: nowrap;
}

@media (max-width: 1380px) {
  #fundsInvoicePanel .invoice-page-head--combined {
    flex-wrap: wrap;
    overflow: visible;
  }

  #fundsInvoicePanel .invoice-page-head--combined .invoice-filter-bar {
    order: 3;
    flex-basis: calc(100% - 110px);
  }

  #fundsInvoicePanel .invoice-page-head--combined > #refreshFundsInvoicesBtn {
    order: 4;
  }
}

/* 客户订单审核：四项统计并入抬头右侧。 */
#customerOrderReview > .topbar {
  display: grid;
  grid-template-columns: minmax(300px, 1fr) minmax(600px, 1.45fr) auto;
  align-items: center;
  gap: 14px;
}

#customerOrderReview > .topbar .review-heading {
  min-width: 0;
}

#customerOrderReview > .topbar .review-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(112px, 1fr));
  gap: 8px;
  min-width: 0;
  margin: 0;
}

#customerOrderReview > .topbar .review-metric {
  min-height: 64px;
  padding: 10px 12px;
  border-radius: 9px;
}

#customerOrderReview > .topbar .review-metric span {
  font-size: 12px;
}

#customerOrderReview > .topbar .review-metric strong {
  font-size: 22px;
}

#customerOrderReview > .topbar > #refreshCustomerOrderReviewBtn {
  justify-self: end;
  white-space: nowrap;
}

@media (max-width: 1250px) {
  #customerOrderReview > .topbar {
    grid-template-columns: 1fr auto;
  }

  #customerOrderReview > .topbar .review-metrics {
    grid-column: 1 / -1;
    grid-row: 2;
  }
}

@media (max-width: 760px) {
  #customerOrderReview > .topbar .review-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* 订单录入底色面板按现有左右外边距收口，避免 100% 宽度叠加 margin。 */
#entry .entry-input-panel {
  width: auto;
  max-width: none;
  min-width: 0;
  margin-right: 16px;
  margin-left: 16px;
}

@media (max-width: 680px) {
  #entry .entry-input-panel {
    margin-right: 10px;
    margin-left: 10px;
  }
}

/* 订单录入最终防溢出：三组控件按行靠左，不参与剩余宽度挤压 */
#entry .entry-input-panel .archive-select-row {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center;
  justify-content: flex-start !important;
  gap: 10px;
  overflow: hidden;
}

#entry .entry-input-panel .archive-select-row > label {
  flex: 0 1 250px;
  width: 250px;
  max-width: 250px;
  min-width: 185px;
}

#entry .entry-input-panel .entry-import-inline {
  display: grid !important;
  flex: 1 1 560px;
  grid-template-columns: minmax(160px, 280px) auto auto !important;
  justify-content: start !important;
  width: auto;
  max-width: 100%;
}

#entry .entry-input-panel .entry-parse-row {
  display: flex !important;
  align-items: flex-start;
  justify-content: flex-start !important;
  width: 100%;
  max-width: 100%;
  overflow: hidden;
}

#entry .entry-input-panel .entry-parse-row #rawInput {
  flex: 0 1 720px;
  width: min(720px, calc(100% - 190px));
  max-width: 720px;
  min-width: 320px;
}

#entry .entry-input-panel .entry-inline-actions {
  flex: 0 0 auto;
}

@media (max-width: 760px) {
  #entry .entry-input-panel .archive-select-row > label {
    flex-basis: 100%;
    width: 100%;
    max-width: 100%;
  }

  #entry .entry-input-panel .entry-import-inline {
    grid-template-columns: 1fr !important;
  }

  #entry .entry-input-panel .entry-parse-row {
    flex-direction: column;
  }

  #entry .entry-input-panel .entry-parse-row #rawInput {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }
}

@media (max-width: 1100px) and (min-width: 761px) {
  #entry .entry-input-panel .archive-select-row {
    flex-wrap: wrap !important;
  }

  #entry .entry-input-panel .entry-import-inline {
    flex-basis: 100%;
  }
}

/* 授权管理：业务切换与搜索筛选合并为同一工具栏 */
.authorization-records-controls {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: stretch;
  gap: 10px;
  margin-bottom: 12px;
  min-width: 0;
}

.authorization-records-controls .authorization-workflow-tabs {
  align-items: center;
  width: auto;
  min-width: max-content;
  margin: 0;
  padding: 5px;
  border-color: #e0e4eb;
  background: #f1f3f6;
}

.authorization-records-controls .authorization-workflow-tabs button {
  height: 42px;
  padding: 0 14px;
}

.authorization-records-controls .authorization-filter-panel {
  grid-template-columns: minmax(260px, 1fr) 170px auto auto;
  align-items: center;
  gap: 10px;
  min-width: 0;
  margin: 0;
  padding: 5px 10px;
}

.authorization-records-controls .authorization-filter-panel label {
  min-width: 0;
  gap: 0;
}

.authorization-records-controls .authorization-filter-panel input,
.authorization-records-controls .authorization-filter-panel select,
.authorization-records-controls .authorization-filter-panel button {
  height: 42px;
  min-height: 42px;
}

@media (max-width: 1180px) {
  .authorization-records-controls {
    grid-template-columns: 1fr;
  }

  .authorization-records-controls .authorization-workflow-tabs {
    justify-self: start;
  }
}

@media (max-width: 720px) {
  .authorization-records-controls .authorization-workflow-tabs {
    width: 100%;
    min-width: 0;
  }

  .authorization-records-controls .authorization-filter-panel {
    grid-template-columns: 1fr;
  }
}

/* Approved customer-order review redesign */
.review-metrics { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; margin:0 16px 16px; }
.review-metric { display:flex; align-items:baseline; gap:7px; min-height:84px; padding:18px 20px; border:1px solid #e3e8f0; border-radius:10px; background:#fff; }
.review-metric span { margin-right:auto; color:#596579; font-weight:650; }
.review-metric strong { color:#172033; font-size:28px; line-height:1; }
.review-metric em { color:#8a95a7; font-size:11px; font-style:normal; }
.review-metric.pending { border-color:#f1d7ad; }.review-metric.approved { border-color:#cfe9da; }.review-metric.rejected { border-color:#f2d1d1; }
.review-toolbar { display:flex; align-items:center; justify-content:space-between; gap:12px; margin:0 16px; padding:12px 14px; border:1px solid #e3e8f0; border-bottom:0; border-radius:10px 10px 0 0; background:#fff; }
.review-tabs { display:flex; gap:4px; }.review-tabs button { padding:8px 12px; border:0; border-radius:7px; background:transparent; color:#657086; }.review-tabs button.active { background:#edf1ff; color:#3b5bdb; font-weight:700; }
.review-search { display:flex; align-items:center; gap:7px; color:#758095; font-size:11px; }.review-search input { width:min(280px,32vw); }
#customerOrderReviewList { margin-top:0; padding:0 16px 16px; }.review-table { min-width:1050px; }.review-table thead th { position:sticky; top:0; z-index:2; }
.review-table td { vertical-align:middle; }.review-product,.review-recipient { max-width:260px; }.review-product strong,.review-product small,.review-recipient strong,.review-recipient small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.review-product small,.review-recipient small { margin-top:4px; color:#8792a5; }.review-money { font-variant-numeric:tabular-nums; font-weight:650; }
.review-table th:last-child,.review-table td:last-child { position:sticky; right:0; z-index:1; background:#fff; box-shadow:-8px 0 12px -12px #60708c; }.review-table thead th:last-child { z-index:3; background:#f3f6fb; }
@media (max-width:760px) { .review-metrics{grid-template-columns:1fr 1fr}.review-toolbar{align-items:stretch;flex-direction:column}.review-search input{width:100%} }

.field-option,
.role-permission-option,
.business-license-picker,
.customer-license-upload {
  border-radius: 8px;
  background: var(--wb-surface-2);
}

/* Customer and supplier portals */
.customer-portal,
.supplier-portal {
  display: block;
  overflow: hidden;
  background: var(--bg);
}

.customer-portal .side,
.customer-portal #loginScreen,
.supplier-portal .side,
.supplier-portal #loginScreen {
  display: none;
}

.customer-portal .main,
.supplier-portal .main {
  width: 100%;
  max-width: none;
  height: 100vh;
  margin: 0;
  padding: 0;
}

.customer-portal .main {
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-gutter: stable;
}

.customer-portal #customer,
.supplier-portal #supplierPortal {
  display: flex;
}

.customer-portal #customer {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  min-height: 100%;
  height: auto;
  flex-direction: column;
  overflow: visible;
}

.customer-portal #customer > :not(.topbar),
.supplier-portal #supplierPortal > :not(.topbar) {
  margin-right: max(24px, calc((100vw - 1460px) / 2));
  margin-left: max(24px, calc((100vw - 1460px) / 2));
}

.customer-portal #customer .topbar,
.supplier-portal #supplierPortal .topbar {
  margin: 0;
  padding: 18px max(24px, calc((100vw - 1460px) / 2)) 12px;
}

.portal-login-strip {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 14px;
  min-height: 62px;
  margin-top: 18px;
  margin-bottom: 4px;
  padding: 10px 14px;
}

.portal-login-strip .panel-title {
  flex: 0 0 auto;
  margin: 0;
}

.portal-login-strip .actions {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  margin: 0;
  flex-wrap: wrap;
}

.portal-title-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.login-company,
.login-finance {
  min-height: 30px;
  padding: 5px 11px;
  border: 1px solid #dbe2fb;
  border-radius: 8px;
  background: var(--blue-soft);
  color: var(--blue);
}

.customer-search {
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
  box-shadow: var(--wb-shadow);
}

.customer-search-main {
  display: flex;
  align-items: center;
  gap: 9px;
  flex-wrap: wrap;
}

.customer-order-view-switch {
  display: inline-flex;
  height: 40px;
  overflow: hidden;
  border: 1px solid #cbd5e6;
  border-radius: 8px;
  background: #fff;
}

.customer-order-view-switch button {
  min-width: 76px;
  padding: 0 11px;
  border: 0;
  border-right: 1px solid #dce3ef;
  background: #fff;
  color: #5b6780;
  font-weight: 750;
  cursor: pointer;
}

.customer-order-view-switch button:last-child { border-right: 0; }
.customer-order-view-switch button:hover { background: #f2f5fb; color: #315fd4; }
.customer-order-view-switch button.active { background: #3f61df; color: #fff; }

#customer #customerResult.card-view {
  padding: 14px;
  background: #f4f6fa;
}

.customer-order-card-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 13px;
}

.customer-order-card {
  min-width: 0;
  padding: 16px;
  border: 1px solid #e2e6ed;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 5px 18px rgba(29, 45, 78, .055);
  color: #1d2940;
}

.customer-order-card > header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.customer-order-card > header div { min-width: 0; }
.customer-order-card > header small { display: block; color: #8b96a8; font-size: 11px; }
.customer-order-card > header strong {
  display: block;
  margin-top: 3px;
  overflow: hidden;
  font-size: 14px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.customer-order-card-status {
  flex: 0 0 auto;
  padding: 5px 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
}

.customer-order-card-status.is-pending { background: #fff0dc; color: #c27016; }
.customer-order-card-status.is-shipped { background: #e4f6ee; color: #12805a; }
.customer-order-card-product { margin: 15px 0 10px; }
.customer-order-card-product h3 {
  height: 44px;
  margin: 0;
  overflow: hidden;
  font-size: 15px;
  line-height: 1.48;
}
.customer-order-card-product p { margin: 5px 0 0; color: #7d899c; font-size: 12px; }
.customer-order-card-line {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding: 9px 0;
  border-top: 1px dashed #e3e7ee;
  font-size: 12px;
}
.customer-order-card-line span { color: #8994a6; }
.customer-order-card-line strong { overflow-wrap: anywhere; text-align: right; }
.customer-order-card-recipient { padding-top: 9px; border-top: 1px dashed #e3e7ee; font-size: 12px; }
.customer-order-card-recipient > span { margin-left: 8px; color: #69768a; }
.customer-order-card-recipient p { min-height: 35px; margin: 5px 0 0; color: #7e899b; line-height: 1.5; }
.customer-order-card-logistics {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 9px;
  margin-top: 10px;
  padding: 11px;
  border-radius: 11px;
  background: #f7f4ee;
}
.customer-order-card-logistics div { min-width: 0; }
.customer-order-card-logistics small { display: block; color: #8c8377; font-size: 10px; }
.customer-order-card-logistics strong { display: block; margin-top: 3px; overflow-wrap: anywhere; font-size: 12px; }
.customer-order-card-logistics button {
  flex: 0 0 auto;
  padding: 6px 9px;
  border: 1px solid #d8cdbb;
  border-radius: 7px;
  background: #fff;
  color: #6a5941;
  cursor: pointer;
}
.customer-order-card-progress {
  position: relative;
  display: flex;
  justify-content: space-between;
  margin: 13px 12px 0;
  color: #999286;
  font-size: 10px;
  text-align: center;
}
.customer-order-card-progress::before {
  content: "";
  position: absolute;
  top: 7px;
  right: 16px;
  left: 16px;
  height: 2px;
  background: #ded8ce;
}
.customer-order-card-progress span { position: relative; z-index: 1; }
.customer-order-card-progress i {
  display: block;
  width: 14px;
  height: 14px;
  margin: 0 auto 4px;
  border: 3px solid #fff;
  border-radius: 50%;
  background: #d2cabc;
  box-shadow: 0 0 0 1px #d2cabc;
}
.customer-order-card-progress .on { color: #11805a; font-weight: 750; }
.customer-order-card-progress .on i { background: #11805a; box-shadow: 0 0 0 1px #11805a; }

@media (max-width: 1100px) {
  .customer-order-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 680px) {
  #customer #customerResult.card-view { padding: 9px; }
  .customer-order-card-grid { grid-template-columns: 1fr; gap: 9px; }
}

.date-chip,
.password-chip {
  border-radius: 8px;
}

#customer .customer-result-bar {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  width: auto;
  min-height: 42px;
  margin-top: 8px;
  margin-bottom: 8px;
}

#customer .customer-orders-table {
  width: 100%;
  min-width: 0;
}

#customer .customer-orders-table th,
#customer .customer-orders-table td {
  min-width: 0;
}

#customer #customerSummary:not(.hidden) {
  display: grid !important;
  grid-template-columns: none !important;
  grid-auto-flow: column;
  grid-auto-columns: max-content;
  align-items: center;
  justify-content: end;
  gap: 7px;
  width: auto;
  max-width: 100%;
  min-width: 0;
  margin: 0;
  padding: 0;
  overflow-x: auto;
  overflow-y: hidden;
}

#customer #customerSummary > div {
  width: auto !important;
  min-width: 104px;
  max-width: none;
  height: 34px !important;
  min-height: 34px;
  margin: 0;
  padding: 0 10px;
}

#customer #customerSummary span,
#customer #customerSummary strong {
  display: inline;
  margin: 0;
  line-height: 1;
}

#customer #customerResult,
#supplierPortal .supplier-orders-wrap {
  flex: 1 1 auto;
  min-height: 220px;
  max-height: none;
  overflow: auto;
}

#supplierPortal .portal-compact-panel:not(.portal-login-strip) {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 14px;
}

#supplierPortal .portal-compact-panel:not(.portal-login-strip) .panel-title {
  flex: 0 0 auto;
  margin: 0;
}

/* Login and modal surfaces */
.login-screen,
.modal {
  background: rgba(24, 33, 49, .5);
  backdrop-filter: blur(3px);
}

.login-card,
.modal-panel {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
  box-shadow: var(--wb-shadow-raised);
}

.login-card {
  width: min(390px, calc(100vw - 28px));
  padding: 25px;
  border-top: 4px solid var(--blue);
}

.login-card h1 {
  font-size: 22px;
}

.modal-bar {
  min-height: 52px;
  padding: 9px 13px;
  border-bottom: 1px solid var(--line);
  background: var(--wb-surface-2);
}

.order-edit-modal-panel {
  width: min(440px, calc(100vw - 28px));
}

.order-edit-modal-body {
  padding: 18px;
}

.modal-icon-lock {
  border-radius: 8px;
}

/* Shared overview bands */
.workbench-hero,
.portal-identity-hero {
  position: relative;
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  justify-content: center;
  min-height: 176px;
  margin-bottom: 16px !important;
  padding: 24px 36px;
  overflow: hidden;
  border: 1px solid rgba(61, 83, 167, .28);
  border-radius: 8px;
  background: linear-gradient(112deg, #222c4b 0%, #30437e 57%, #4965d9 100%);
  box-shadow: 0 14px 32px rgba(45, 63, 128, .18);
  color: #ffffff;
}

.workbench-hero::after,
.portal-identity-hero::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 31%;
  background: linear-gradient(135deg, transparent 0 34%, rgba(255, 255, 255, .055) 34% 60%, rgba(255, 255, 255, .025) 60%);
  pointer-events: none;
}

.workbench-hero-heading,
.portal-identity-heading {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 16px;
}

.workbench-hero-icon,
.portal-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  flex: 0 0 54px;
  border-radius: 8px;
  background: rgba(255, 255, 255, .15);
  color: #ffffff;
  font-size: 20px;
  font-weight: 720;
}

.workbench-hero-heading strong,
.portal-identity-heading > div > strong {
  display: block;
  max-width: min(720px, 70vw);
  overflow: hidden;
  color: #ffffff;
  font-size: 20px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.workbench-hero-heading > div > span,
.portal-identity-heading > div > span {
  display: block;
  margin-top: 4px;
  color: rgba(255, 255, 255, .68);
  font-size: 12.5px;
}

.portal-identity-heading > div > span b {
  color: rgba(255, 255, 255, .82);
  font-family: "SF Mono", Menlo, Consolas, monospace;
  font-weight: 520;
}

.workbench-hero-stats,
.portal-identity-stats {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-end;
  gap: 42px;
  margin-top: 22px;
}

.workbench-hero-stats > span,
.workbench-hero-stats.metrics > div,
.portal-identity-stats > span,
.workbench-hero .finance-summary-row > span {
  display: grid;
  grid-template-columns: auto auto;
  align-items: baseline;
  min-width: 0;
  min-height: 0;
  margin: 0;
  padding: 0;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  column-gap: 4px;
  white-space: nowrap;
}

.workbench-hero-stats small,
.workbench-hero-stats.metrics span,
.portal-identity-stats small {
  grid-column: 1 / -1;
  margin-bottom: 5px;
  color: rgba(255, 255, 255, .66);
  font-size: 12px;
  font-weight: 500;
}

.workbench-hero-stats b,
.workbench-hero-stats.metrics strong,
.portal-identity-stats strong,
.workbench-hero .finance-summary-row b {
  margin: 0;
  color: #ffffff !important;
  font-size: 26px;
  font-weight: 730;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.workbench-hero-stats em,
.portal-identity-stats em {
  color: rgba(255, 255, 255, .72);
  font-size: 12px;
  font-style: normal;
}

.workbench-hero-stats.metrics {
  display: flex;
  grid-template-columns: none;
  gap: 42px;
  overflow: visible;
  border: 0;
  background: transparent;
}

#dashboard .panel {
  flex: 1 1 auto;
  min-height: 220px;
  overflow: auto;
}

#statistics .stats-toolbar-meta {
  grid-template-columns: minmax(480px, 1fr) auto;
}

#statistics #refreshStatsBtn {
  justify-self: end;
}

#statistics .stats-orders-panel,
#funds .funds-finance-panel {
  flex: 1 1 auto;
}

#funds .funds-panel-head {
  min-height: 48px;
}

#entry .entry-hero {
  min-height: 158px;
}

/* Portal workspaces */
.portal-page-topbar {
  align-items: center;
  padding-bottom: 10px;
}

.customer-portal #customer .portal-page-topbar {
  padding-top: 8px;
  padding-bottom: 6px;
}

.customer-portal #customer .portal-page-topbar p {
  margin-top: 2px;
}

.portal-header-login {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  margin-left: auto;
}

.portal-header-login #customerAccount,
.portal-header-login #supplierAccount {
  width: 170px;
}

.portal-header-login .password-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 34px;
  padding-left: 10px;
  border: 1px solid var(--line);
  background: #ffffff;
  color: var(--muted);
}

.portal-header-login .password-chip input {
  width: 150px;
  height: 32px;
  padding-left: 4px;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.portal-header-login .portal-remember { display: inline-flex; align-items: center; gap: 4px; color: #667188; font-size: 11px; white-space: nowrap; cursor: pointer; }
.portal-header-login .portal-remember input { width: 14px; height: 14px; margin: 0; accent-color: var(--blue); }

.portal-identity-hero {
  min-height: 190px;
  margin-top: 0 !important;
}

.supplier-identity-hero {
  border-color: rgba(16, 122, 111, .32);
  background: linear-gradient(112deg, #163d39 0%, #0d7067 57%, #159b8d 100%);
  box-shadow: 0 14px 32px rgba(8, 112, 101, .18);
}

.portal-identity-heading > div {
  min-width: 0;
}

.portal-identity-heading .login-company {
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.portal-identity-badge {
  margin-left: auto;
  padding: 6px 13px;
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: 999px;
  background: rgba(255, 255, 255, .1);
  color: rgba(255, 255, 255, .9);
  font-size: 12px;
  white-space: nowrap;
}

.customer-identity-hero .customer-certified-badge {
  position: absolute;
  z-index: 3;
  top: 16px;
  right: 20px;
  display: inline-flex;
  box-sizing: border-box;
  align-items: center;
  justify-content: center;
  margin: 0;
  /* Horizontal padding remains 26px in total, preserving the badge size. */
  padding: 6px 3px 6px 23px;
  border-color: rgba(255, 218, 112, .82);
  background: linear-gradient(180deg, rgba(255, 225, 139, .17), rgba(117, 75, 11, .16));
  color: #ffd76d;
  font-weight: 800;
  letter-spacing: .04em;
  box-shadow: inset 0 1px 0 rgba(255, 245, 198, .32), inset 0 -1px 0 rgba(107, 67, 7, .22), 0 0 10px rgba(255, 203, 72, .1);
  text-shadow: 0 1px 0 rgba(94, 57, 0, .7), 0 0 7px rgba(255, 218, 106, .25);
}

.customer-identity-hero .customer-certified-badge::before {
  content: "♛";
  position: absolute;
  left: 7px;
  color: #ffe69a;
  font-size: 12px;
  line-height: 1;
  text-shadow: 0 1px 0 #76500c, 0 0 5px rgba(255, 225, 120, .42);
}

.customer-identity-hero .customer-certified-badge::after {
  content: "◆";
  position: absolute;
  top: 4px;
  left: 15px;
  color: #fff1b5;
  font-size: 4px;
  line-height: 1;
}

.portal-identity-stats .login-finance {
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: inherit;
}

.portal-tabs {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 4px;
  margin-top: 0 !important;
  margin-bottom: 14px !important;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #e9edf5;
}

.portal-tab {
  min-width: 112px;
  border-color: transparent;
  background: transparent;
  color: #5e697a;
}

.portal-tab:hover {
  background: rgba(255, 255, 255, .72);
  color: var(--text);
}

.portal-tab.active {
  border-color: var(--line);
  background: #ffffff;
  color: var(--blue);
  box-shadow: 0 2px 8px rgba(31, 39, 51, .07);
}

#customer .portal-tabs {
  display: grid;
  grid-template-columns: repeat(9, minmax(0, 1fr));
  width: min(100%, 1200px);
}

.customer-portal-tabs-row {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 12px;
  min-width: 0;
  min-height: 54px;
  margin-bottom: 14px;
  flex-wrap: wrap;
  overflow: visible;
  scrollbar-width: thin;
}

.customer-portal-tabs-row .portal-tabs {
  flex: 0 0 auto;
  margin-bottom: 0 !important;
  white-space: nowrap;
}

.customer-product-inline-search {
  display: grid;
  grid-template-columns: minmax(280px, 1fr) 110px 18px 110px auto auto auto auto;
  align-items: center;
  gap: 9px;
  flex: 1 0 100%;
  width: 100%;
  min-width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: #fff;
  box-shadow: var(--wb-shadow);
}

.customer-product-inline-search input {
  width: 100%;
  min-width: 0;
}

.customer-product-price-separator {
  color: #6f7b8f;
  text-align: center;
  font-weight: 800;
}

.customer-product-price-sort {
  min-width: 112px;
  border: 1px solid #cbd5e6;
  color: #536078;
  background: #fff;
  font-weight: 750;
}

.customer-product-price-sort.is-active {
  border-color: #91adf4;
  color: #315bd1;
  background: #edf3ff;
}

.customer-product-view-switch {
  display: inline-flex;
  height: 40px;
  overflow: hidden;
  border: 1px solid #cbd5e6;
  border-radius: 8px;
  background: #fff;
}

.customer-product-view-switch button {
  min-width: 76px;
  padding: 0 11px;
  border: 0;
  border-right: 1px solid #dce3ef;
  background: #fff;
  color: #5b6780;
  font-weight: 750;
  cursor: pointer;
}

.customer-product-view-switch button:last-child { border-right: 0; }
.customer-product-view-switch button:hover { background: #f2f5fb; color: #315fd4; }
.customer-product-view-switch button.active { background: #3f61df; color: #fff; }

#customer #customerProductResult.card-view {
  max-height: calc(100vh - 350px);
  padding: 16px;
  overflow: auto;
  border-color: #e1e6ef;
  background: #f4f6fa;
}

.customer-product-card-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 10px;
  width: 100%;
  text-align: left;
}

.customer-product-card {
  min-width: 0;
  overflow: hidden;
  border: 1px solid #e0e5ee;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 5px 18px rgba(29, 45, 78, .06);
  transition: transform .16s ease, box-shadow .16s ease;
}

.customer-product-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 25px rgba(29, 45, 78, .1);
}

.customer-product-card-media {
  position: relative;
  display: grid;
  height: 155px;
  min-height: 0;
  padding: 30px 16px 12px;
  place-items: center;
  overflow: hidden;
  background: #fbfcfe;
}

.customer-product-card-media img {
  display: block;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.customer-product-card-brand {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 1;
  color: #e53f36 !important;
  font-size: 17px !important;
  font-weight: 850;
}

.customer-product-card-tags {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 1;
  display: grid;
  justify-items: end;
  gap: 5px;
}

.customer-product-card-tags span {
  padding: 4px 8px;
  border-radius: 7px;
  font-size: 11px;
  font-weight: 800;
}

.customer-product-card-tags .is-new { background: #e8efff; color: #315fd4; }
.customer-product-card-tags .is-out { background: #fff1c9; color: #af7300; }
.customer-product-card-placeholder { color: #a1aaba; font-size: 13px; }
.customer-product-card-body {
  position: relative;
  z-index: 2;
  width: 100%;
  padding: 12px 13px;
  background: #fff;
}
.customer-product-card-body h3 {
  display: block;
  width: 100%;
  height: 42px;
  margin: 0 0 9px;
  overflow: hidden;
  color: #17233a;
  font-size: 14px;
  line-height: 1.5;
}
.customer-product-card-price {
  display: block;
  width: 100%;
  min-height: 31px;
  overflow: visible;
  color: #ef463c;
  font-size: 22px;
  font-weight: 850;
  line-height: 1.25;
  white-space: nowrap;
}
.customer-product-card-price small { margin-right: 4px; font-size: 14px; }
.customer-product-card-labels { display: flex; min-height: 27px; gap: 6px; margin-top: 7px; }
.customer-product-card-labels span {
  align-self: flex-start;
  padding: 3px 7px;
  border: 1px solid #ffaaa4;
  border-radius: 6px;
  color: #e6453d;
  font-size: 11px;
}
.customer-product-card-meta {
  display: flex;
  justify-content: flex-start;
  gap: 8px;
  margin-top: 11px;
  padding-top: 10px;
  border-top: 1px solid #edf0f5;
  color: #8a96aa;
  font-size: 10px;
}

.customer-product-card-meta span {
  overflow-wrap: anywhere;
}

@media (max-width: 1100px) {
  .customer-product-card-grid { grid-template-columns: repeat(3, minmax(180px, 1fr)); }
}

@media (max-width: 900px) {
  .customer-product-card-grid { grid-template-columns: repeat(2, minmax(170px, 1fr)); }
  .customer-product-card-media { height: 175px; }
}

@media (max-width: 600px) {
  #customer #customerProductResult.card-view { padding: 9px; }
  .customer-product-card-grid { gap: 9px; }
  .customer-product-card-media { height: 150px; padding: 27px 10px 8px; }
  .customer-product-card-body { padding: 11px; }
  .customer-product-card-body h3 { min-height: 42px; font-size: 14px; }
  .customer-product-card-price { font-size: 21px; }
  .customer-product-card-meta { align-items: flex-start; flex-direction: column; }
}

.portal-tab-view {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-height: 0;
}

.portal-tab-view.hidden {
  display: none !important;
}

.customer-qualification-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 13px 16px; border: 1px solid var(--line); border-radius: 9px; background: #fff; }
.customer-qualification-toolbar > div:first-child { display: flex; align-items: baseline; gap: 10px; }
.customer-qualification-toolbar strong { font-size: 16px; }
.customer-qualification-toolbar span { color: #7c879a; font-size: 12px; }
.customer-qualification-scope { display: flex; padding: 3px; border: 1px solid #dbe3f0; border-radius: 7px; background: #f4f6fa; }
.customer-qualification-scope button { height: 30px; padding: 0 13px; border: 0; border-radius: 5px; color: #667187; background: transparent; cursor: pointer; }
.customer-qualification-scope button.active { color: #fff; background: var(--blue); box-shadow: 0 2px 6px rgba(49, 85, 198, .25); }
.customer-qualification-stats { display: grid; grid-template-columns: repeat(5, minmax(110px, 1fr)); gap: 10px; margin: 10px 0; }
.customer-qualification-stats div { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border: 1px solid var(--line); border-radius: 8px; background: #fff; }
.customer-qualification-stats span { color: #737f93; font-size: 12px; }
.customer-qualification-stats strong { font-size: 20px; }
.customer-qualification-result { display: grid; min-height: 180px; gap: 12px; overflow: auto; }
.customer-qualification-result.empty { place-items: center; align-content: center; color: #7d8799; border: 1px solid var(--line); border-radius: 9px; background: #fff; }
.customer-qualification-result.empty span { display: block; margin-top: 6px; font-size: 12px; }
.customer-qualification-company { border: 1px solid var(--line); border-radius: 9px; overflow: visible; background: #fff; }
.customer-qualification-company > header { display: flex; align-items: center; gap: 10px; padding: 11px 14px; border-bottom: 1px solid var(--line); background: #f7f9fd; }
.customer-qualification-company > header span { color: #7a8598; font-size: 11px; }
.customer-qualification-table-wrap { overflow: visible; }
.customer-qualification-company table { width: 100%; border-collapse: collapse; }
.customer-qualification-company th, .customer-qualification-company td { padding: 9px 12px; border-bottom: 1px solid #edf0f5; text-align: left; white-space: nowrap; font-size: 12px; }
.customer-qualification-company th { color: #667188; background: #fbfcfe; font-weight: 700; }
.customer-qualification-company td small { display: block; margin-top: 3px; color: #929bad; }
.customer-qualification-document { position: relative; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 1px solid #d4ddec; border-radius: 6px; color: #3155c6; background: #fff; cursor: pointer; }
.customer-qualification-document > img:first-child { width: 100%; height: 100%; border-radius: 5px; object-fit: cover; }
.customer-qualification-document > b { position: absolute; top: -6px; right: -6px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 9px; color: #fff; background: var(--blue); font-size: 10px; line-height: 17px; }
.customer-qualification-preview { display: none; position: absolute; z-index: 80; left: 52px; top: -80px; width: 360px; height: 420px; padding: 7px; border: 1px solid #cad5e8; border-radius: 9px; background: #fff; object-fit: contain; box-shadow: 0 14px 38px rgba(30, 44, 72, .25); }
.customer-qualification-document:hover .customer-qualification-preview { display: block; }
.customer-qualification-none { color: #a0a9b9; }
.authorization-application-row { background: #fffdf7; }

.project-report-topbar { align-items: center; }
.project-report-top-actions { display: flex; align-items: center; gap: 8px; min-width: 0; }
.project-report-stats { display: grid; grid-template-columns: repeat(5, 108px); gap: 8px; }
.customer-project-stats { display: grid; grid-template-columns: repeat(5, minmax(100px, 1fr)); gap: 10px; margin-bottom: 12px; }
.project-report-stats button, .customer-project-stats button { display: flex; align-items: center; justify-content: space-between; border: 1px solid var(--line); border-radius: 8px; background: #fff; cursor: pointer; text-align: left; }
.project-report-stats button { width: 108px; height: 54px; padding: 7px 10px; box-shadow: 0 2px 7px rgba(35, 49, 75, .05); }
.customer-project-stats button { padding: 13px 16px; }
.project-report-stats button:hover, .customer-project-stats button:hover { transform: translateY(-1px); box-shadow: 0 5px 16px rgba(36, 52, 84, .09); }
.project-report-stats .stat-total { border-color: #b9d1ff; color: #285dc8; background: #eef4ff; }
.project-report-stats .stat-pending { border-color: #f2d29a; color: #b96a00; background: #fff7e8; }
.project-report-stats .stat-protected { border-color: #d4c3f7; color: #7048bf; background: #f5f0ff; }
.project-report-stats .stat-expired { border-color: #efc1ca; color: #b7475d; background: #fff1f4; }
.project-report-stats .stat-done { border-color: #a9dfc1; color: #16804d; background: #edf9f2; }
.customer-project-stats .stat-pending { border-color: #f0c678; background: #fff8e9; }
.customer-project-stats .stat-protected { border-color: #9bb4f5; background: #f0f4ff; }
.customer-project-stats .stat-expired { border-color: #cbd1db; background: #f3f5f8; }
.customer-project-stats .stat-done { border-color: #94d4b2; background: #edf9f2; }
.project-report-stats span { color: currentColor; font-size: 10px; opacity: .78; }
.project-report-stats strong { color: currentColor; font-size: 19px; }
.customer-project-stats span { color: #748096; font-size: 12px; }
.customer-project-stats strong { font-size: 21px; }
.project-report-toolbar { display: grid; grid-template-columns: minmax(260px, 1fr) 160px 140px; gap: 10px; margin-bottom: 12px; }
.project-invite-modal { position: fixed; inset: 0; z-index: 1200; display: grid; place-items: center; padding: 20px; background: rgba(21, 31, 54, .52); backdrop-filter: blur(3px); }
.project-invite-modal.hidden { display: none; }
.project-invite-dialog { width: min(680px, 92vw); max-height: 90vh; overflow-x: hidden; overflow-y: auto; padding: 18px; border-radius: 14px; background: #fff; box-shadow: 0 24px 70px rgba(12, 25, 54, .28); }
.project-invite-head, .project-invite-list-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.project-invite-head > div { display: grid; gap: 4px; }.project-invite-head strong { color: #23385f; font-size: 20px; }.project-invite-head span { color: #7b879b; font-size: 12px; }
.project-invite-create { display: grid; grid-template-columns: minmax(260px, 1fr) 140px auto; align-items: end; gap: 12px; margin: 18px 0; padding: 15px; border: 1px solid #dce5f4; border-radius: 10px; background: #f7f9fd; }
.project-invite-create label { display: grid; gap: 6px; color: #66738a; font-size: 12px; }.project-invite-create select { height: 40px; }
.product-catalog-invite-create { grid-template-columns: minmax(190px, .85fr) minmax(280px, 1.35fr) 120px; }
.product-catalog-invite-create > button { grid-column: 1 / -1; width: 100%; }
.order-h5-invite-create { grid-template-columns: minmax(280px, 1fr) 120px; }
.order-h5-invite-create > button { grid-column: 1 / -1; width: 100%; }
.product-catalog-customer-field { min-width: 0; }
.product-catalog-customer-picker { position: relative; z-index: 25; min-width: 0; }
.product-catalog-customer-picker > input[type="search"] { width: 100%; height: 40px; }
.product-catalog-customer-results { position: absolute; z-index: 80; top: calc(100% + 5px); right: 0; left: 0; max-height: 236px; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; padding: 5px; border: 1px solid #cbd7ee; border-radius: 8px; background: #fff; box-shadow: 0 14px 35px rgba(24, 40, 72, .18); }
.product-catalog-customer-results button { display: block !important; width: 100%; min-height: 0; padding: 7px 9px; border: 0; border-radius: 6px; background: transparent; line-height: 1.25; text-align: left !important; cursor: pointer; }
.product-catalog-customer-results button:hover { background: #edf3ff; }
.product-catalog-customer-results strong { display: block !important; width: 100%; overflow: hidden; color: #263954; font-size: 12px; text-align: left !important; text-overflow: ellipsis; white-space: nowrap; }
.product-catalog-customer-results span { display: block !important; width: 100%; margin-top: 1px; color: #7b879b; font-size: 10px; text-align: left !important; }
.product-catalog-customer-empty { padding: 18px 10px; color: #8a94a6; text-align: center; }
.project-invite-result { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 16px; margin-bottom: 18px; padding: 14px; border: 1px solid #bcd0ff; border-radius: 12px; background: #f3f7ff; }
.project-invite-result.hidden { display: none; }.project-invite-qr { display: grid; justify-items: center; gap: 8px; }.project-invite-qr img { width: 140px; height: 140px; padding: 6px; border: 1px solid #d7deec; border-radius: 8px; background: #fff; image-rendering: pixelated; }
.project-invite-link { display: grid; align-content: center; gap: 9px; }.project-invite-link strong { color: #234caa; font-size: 17px; }.project-invite-link small { color: #66738a; }.project-invite-link textarea { width: 100%; min-height: 68px; resize: none; font: 12px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; }.project-invite-link > div { display: flex; gap: 8px; }
.project-invite-list-head { padding: 5px 0 10px; border-bottom: 1px solid #e4e9f2; }.project-invite-list { display: grid; gap: 7px; padding-top: 9px; }.project-invite-list.empty { min-height: 80px; place-items: center; color: #8a94a6; }
.project-invite-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 5px 12px; padding: 10px 12px; border: 1px solid #e0e6f0; border-radius: 8px; background: #fff; }.project-invite-row > div:first-child { display: grid; gap: 2px; }.project-invite-row strong { color: #2b3c5a; }.project-invite-row span, .project-invite-row small { color: #768197; font-size: 11px; }.project-invite-row > small { grid-column: 1; }.project-invite-row > div:last-child { grid-column: 2; grid-row: 1 / span 3; display: flex; justify-content: flex-end; gap: 5px; white-space: nowrap; }
.customer-h5-invite-btn { height: 36px; padding: 0 14px; border: 1px solid #58bcb5; border-radius: 7px; color: #087c74; background: #eafaf7; font-weight: 700; cursor: pointer; }.customer-h5-invite-btn:hover { background: #d9f5f1; }
.customer-invite-dialog { width: min(800px, calc(100vw - 40px)); max-height: min(760px, calc(100dvh - 48px)); overflow-x: hidden; overflow-y: auto; padding: 20px; border: 1px solid #e1e7f1; border-radius: 14px; background: #fff; box-shadow: 0 22px 65px rgba(20, 32, 58, .3); }.customer-invite-dialog .customer-project-dialog-head h3 { color: #253956; }.customer-invite-dialog .customer-project-dialog-head p { color: #6f7c91; }.customer-invite-create { display: grid; grid-template-columns: minmax(180px, 240px) 1fr; align-items: end; gap: 12px; margin-bottom: 16px; padding: 14px; border: 1px solid #dce5f4; border-radius: 10px; background: #f7f9fd; }.customer-invite-create label { display: grid; gap: 6px; color: #657188; font-size: 11px; }.customer-invite-create select { height: 38px; }.customer-invite-dialog .project-invite-list { overflow: visible; }.customer-invite-dialog .customer-invite-row { grid-template-columns: minmax(220px, 1fr) auto; gap: 8px 16px; }.customer-invite-dialog .customer-invite-row > small { grid-column: auto; }.customer-invite-dialog .customer-invite-row > div:last-child { grid-column: 2; grid-row: 1 / span 2; align-self: center; white-space: nowrap; }
.project-report-list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: stretch; gap: 10px; }
.project-report-list.empty { grid-template-columns: 1fr; place-items: center; min-height: 160px; color: #8791a3; }
.project-report-card { display: flex; flex-direction: column; height: 100%; padding: 9px 12px; border: 1px solid #dce3ef; border-left: 4px solid #8b96aa; border-radius: 7px; background: #fff; }
.project-report-card.status-pending { border-left-color: #d78a16; }.project-report-card.status-protected { border-left-color: #3564df; }.project-report-card.status-done { border-left-color: #1c9b58; }.project-report-card.status-rejected { border-left-color: #d34545; }
.project-report-card.status-change_pending { border-left-color: #7b4fd4; background: #fbf8ff; }.project-report-card.status-expired { border-left-color: #8a94a5; background: #f7f8fa; }.project-report-card.status-released { border-left-color: #81738f; background: #faf8fc; }
.project-report-card header, .project-report-card footer { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.project-report-card header > div { display: grid; gap: 1px; }.project-report-card header strong { font-size: 13px; }.project-card-name { color: #2859cf; }.project-card-customer { color: #7049b8; font-size: 10px; font-weight: 700; }.project-card-source { color: #758095; font-style: normal; font-weight: 400; }.project-report-card header span, .project-report-card footer { color: #758095; font-size: 10px; }
.project-status { padding: 3px 8px; border-radius: 13px; color: #596579; background: #edf1f7; font-size: 10px; font-style: normal; }.project-status.pending { color: #9b630d; background: #fff0d5; }.project-status.protected { color: #2855c6; background: #e9efff; }.project-status.done { color: #137a47; background: #e4f7ed; }
.project-status.change_pending { color: #6a3bc2; background: #eee5ff; }
.project-report-fields { display: grid; grid-template-columns: 1fr 1.35fr; gap: 8px 14px; margin: 7px 0; padding: 7px 0; border-top: 1px dashed #e2e7f0; border-bottom: 1px dashed #e2e7f0; }.project-report-fields span { display: grid; gap: 2px; min-width: 0; }.project-report-fields small { color: #8a94a6; font-size: 10px; }.project-report-fields b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; }.project-report-fields .field-company b { color: #243550; }.project-report-fields .field-products b { color: #315fd1; }.project-report-fields .field-budget b { color: #16834d; }.project-report-fields .field-quantity b { color: #c66a0a; }.project-protect-date { color: #2f63d8; font-weight: 700; }
.project-report-card footer { justify-content: flex-start; flex-wrap: wrap; margin-top: auto; }.project-report-actions { display: flex; gap: 4px; margin-left: auto; }.project-report-actions button { height: 25px; padding: 0 8px; border: 1px solid #cbd8f6; border-radius: 5px; color: #3155c6; background: #edf2ff; font-size: 10px; cursor: pointer; }.project-report-actions button.danger { color: #bd3934; border-color: #f0cac7; background: #fff0ef; }.project-report-card p { margin: 6px 0 0; color: #687489; font-size: 10px; }
.customer-project-layout { display: block; min-height: 0; }.customer-project-form, .customer-project-records { padding: 14px; border: 1px solid var(--line); border-radius: 9px; background: #fff; }.customer-project-form h3, .customer-project-records h3 { margin: 0; }.customer-project-form label { display: grid; gap: 5px; color: #5f6a7d; font-size: 11px; font-weight: 650; }.customer-project-form textarea { min-height: 76px; resize: vertical; }.customer-project-items { display: grid; gap: 6px; }.customer-project-item { display: grid; grid-template-columns: 1fr 1fr 30px; gap: 6px; }.customer-project-item .project-product-lookup { grid-column: 1 / -1; }.customer-project-item button { border: 1px solid #efceca; border-radius: 5px; color: #bd3934; background: #fff2f1; cursor: pointer; }.customer-project-record-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 12px; }.customer-project-record-head > div:first-child { display: grid; gap: 3px; }.customer-project-record-head span { color: #7b8698; font-size: 11px; }.customer-project-record-actions { display: flex; align-items: center; gap: 8px; margin-left: auto; }.customer-project-modal { position: fixed; z-index: 1250; inset: 0; display: grid; place-items: center; padding: 24px; background: rgba(24, 34, 54, .5); backdrop-filter: blur(2px); }.customer-project-dialog { width: min(760px, calc(100vw - 40px)); max-height: calc(100dvh - 48px); overflow-y: auto; padding: 20px; border-radius: 12px; box-shadow: 0 22px 60px rgba(20, 32, 58, .28); }.customer-project-dialog-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 16px; padding-bottom: 12px; border-bottom: 1px solid #e5eaf2; }.customer-project-dialog-head > div { display: grid; gap: 4px; }.customer-project-dialog-head p { margin: 0; color: #7b8698; font-size: 11px; }.customer-project-dialog-close { width: 32px; height: 32px; padding: 0; border: 0; border-radius: 7px; color: #657087; background: transparent; font-size: 22px; cursor: pointer; }.customer-project-dialog-close:hover { background: #f1f4f9; }.customer-project-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 14px; }.customer-project-products-field, .customer-project-note-field { grid-column: 1 / -1; }.customer-project-products-label { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 7px; color: #5f6a7d; font-size: 11px; font-weight: 650; }.customer-project-products-label button { height: 30px; }.customer-project-dialog-actions { display: flex; align-items: center; justify-content: flex-end; gap: 9px; margin-top: 16px; padding-top: 14px; border-top: 1px solid #e5eaf2; }.customer-project-dialog-actions > span { margin-right: auto; color: #66758c; font-size: 11px; }.customer-project-dialog-actions button { min-width: 104px; }
.admin-project-form { position: fixed; z-index: 1200; inset: 0; display: grid; place-items: center; padding: 24px; background: rgba(25, 35, 55, .48); backdrop-filter: blur(2px); }.admin-project-dialog { width: min(470px, 100%); max-height: calc(100vh - 48px); overflow-y: auto; padding: 18px; border: 1px solid #d8e0ee; border-radius: 12px; background: #fff; box-shadow: 0 20px 55px rgba(20, 32, 58, .24); }.admin-project-form-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 14px; padding-bottom: 12px; border-bottom: 1px solid #e8edf5; }.admin-project-form-head > div { display: grid; gap: 3px; }.admin-project-form-head strong { color: #202a3a; font-size: 16px; }.admin-project-form-head span { color: #7b8698; font-size: 11px; font-weight: 400; }.admin-project-grid { display: grid; grid-template-columns: 1fr; gap: 10px; }.admin-project-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }.admin-project-products { display: grid; gap: 6px; }.admin-project-products > span { color: #5f6a7d; font-size: 11px; font-weight: 650; }.admin-project-items { display: grid; gap: 6px; }.admin-project-item { display: grid; grid-template-columns: 1fr 1fr 30px; gap: 6px; }.admin-project-item .project-product-lookup { grid-column: 1 / -1; }.project-product-lookup { border-color: #b9c9ee; background: #f8faff; }.admin-project-item button { border: 1px solid #efceca; border-radius: 5px; color: #bd3934; background: #fff2f1; cursor: pointer; }.admin-project-products > button { justify-self: stretch; }.admin-project-form label { display: grid; gap: 5px; color: #5f6a7d; font-size: 11px; font-weight: 650; }.admin-project-form input, .admin-project-form select, .admin-project-form textarea { width: 100%; }.admin-project-form textarea { min-height: 78px; margin-top: 5px; resize: vertical; }.admin-project-form-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px; }.admin-project-form-actions button { width: 100%; }.admin-project-form-actions span { grid-column: 1 / -1; }
.project-revision-compare { margin-top: 12px; padding: 10px; border: 1px solid #dbcdf4; border-radius: 7px; background: #fff; }.project-revision-compare > strong { color: #6840b1; }.project-revision-compare > div { display: grid; grid-template-columns: 110px 1fr 1fr; gap: 8px; padding: 6px 8px; border-top: 1px solid #edf0f5; font-size: 11px; }.project-revision-compare .revision-head { margin-top: 7px; color: #778297; background: #f5f6fa; }.project-revision-compare .changed { background: #fff5cb; }.project-report-actions .revision-approve { color: #176e43; border-color: #a8d9bf; background: #eaf8f0; }.project-report-actions .revision-reset { color: #7147bd; border-color: #d3c2ef; background: #f2ecff; }
@media (max-width: 1500px) { .project-report-list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 1180px) { .project-report-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) { .project-report-list { grid-template-columns: 1fr; } }
.customer-submit-layout { display: grid; grid-template-columns: minmax(300px, 390px) 1fr; gap: 12px; }.customer-submit-form, .customer-submit-records { padding: 14px; border: 1px solid #dce3ef; border-radius: 9px; background: #fff; }.customer-submit-form > p { color: #7b8698; font-size: 11px; }.customer-submit-form label { display: grid; gap: 5px; margin: 9px 0; color: #5f6a7d; font-size: 11px; font-weight: 650; }.customer-submit-form textarea { resize: vertical; }.customer-submit-import { display: grid; gap: 7px; margin-top: 12px; padding: 12px; border: 1px dashed #b9c9ee; border-radius: 7px; background: #f8faff; }.customer-order-review-list { display: block; margin-top: 10px; }.customer-order-review-list.empty { display: grid; grid-template-columns: 1fr; place-items: center; min-height: 140px; color: #8791a3; }.customer-order-review-card { padding: 12px; border: 1px solid #dce3ef; border-left: 4px solid #e0a11a; border-radius: 8px; background: #fff; }.customer-order-review-card.status-approved { border-left-color: #1c9b58; }.customer-order-review-card.status-rejected { border-left-color: #d34545; }.customer-order-review-card header, .customer-order-review-card footer { display: flex; align-items: center; justify-content: space-between; gap: 8px; }.customer-order-review-card header em { color: #95620b; font-size: 11px; font-style: normal; }.customer-order-review-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 9px 0; padding: 8px 0; border-top: 1px dashed #e2e7f0; border-bottom: 1px dashed #e2e7f0; }.customer-order-review-fields span { display: grid; gap: 2px; color: #8993a5; font-size: 10px; }.customer-order-review-fields b { overflow: hidden; color: #26344c; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }.customer-order-review-card p { color: #bd3934; font-size: 11px; }
.customer-submit-preview { margin-bottom: 10px; }.customer-submit-table-wrap { overflow-x: auto; border: 1px solid #dce3ef; border-radius: 7px; }.customer-submit-table-wrap table { width: 100%; min-width: 920px; border-collapse: collapse; }.customer-submit-table-wrap th { padding: 8px 6px; color: #647086; background: #f3f6fb; font-size: 10px; text-align: left; white-space: nowrap; }.customer-submit-table-wrap td { padding: 5px; border-top: 1px solid #e8edf5; }.customer-submit-table-wrap input { width: 100%; min-width: 82px; }.customer-submit-table-wrap td:nth-child(8) input { min-width: 210px; }.review-supplier { display: grid; grid-template-columns: auto minmax(140px,1fr); align-items: center; gap: 8px; margin: 8px 0; color: #687489; font-size: 11px; }

/* Customer order entry: compact full-width input row above full-width split records. */
#customerSubmitView .customer-submit-layout {
  grid-template-columns: minmax(0, 1fr);
}
#customerSubmitView .customer-submit-form,
#customerSubmitView .customer-submit-records {
  min-width: 0;
}
#customerSubmitView .customer-submit-form {
  padding: 10px 12px;
}
#customerSubmitView .customer-submit-form > h3 {
  margin: 0;
}
#customerSubmitView .customer-submit-form > p {
  margin: 2px 0 5px;
}
#customerSubmitView .customer-submit-form-body {
  display: grid;
  grid-template-columns: minmax(420px, 2.6fr) minmax(300px, 1.05fr) minmax(520px, 1.65fr);
  grid-auto-rows: 58px;
  align-items: stretch;
  gap: 10px;
}
#customerSubmitView .customer-submit-form-body > label {
  display: grid;
  grid-template-rows: 1fr;
  gap: 0;
  margin: 0;
}
#customerSubmitView .customer-submit-form textarea {
  height: 58px;
  min-height: 58px;
  max-height: 58px;
  resize: none;
}
#customerSubmitView .customer-submit-split-panel {
  display: flex;
  min-width: 0;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 5px 10px;
  border: 1px solid #dce4f2;
  border-radius: 9px;
  background: linear-gradient(180deg, #fbfcff, #f5f8ff);
}
#customerSubmitView .customer-submit-split-panel > div {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 8px;
}
#customerSubmitView .customer-submit-split-panel strong {
  color: #26344c;
  font-size: 13px;
}
#customerSubmitView .customer-submit-split-panel span {
  overflow: hidden;
  color: #7b879b;
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#customerSubmitView .customer-submit-split-panel button {
  width: auto;
  min-width: 138px;
  flex: 0 0 auto;
  height: 34px;
}
#customerSubmitView .customer-submit-split-panel button b {
  margin-left: 10px;
  font-size: 15px;
}
#customerSubmitView .customer-submit-split-actions {
  display: flex;
  flex: 0 0 auto;
  gap: 6px;
}
#customerSubmitView .customer-submit-split-actions #clearCustomerSubmitRawBtn {
  width: 62px;
  min-width: 62px;
}
#customerSubmitView .customer-submit-import-row {
  display: grid;
  grid-template-columns: 145px minmax(165px, 1fr) 178px;
  align-items: center;
  gap: 9px;
  margin-top: 0;
  padding: 4px 9px;
  border: 1px solid #dce4f2;
  border-radius: 9px;
  background: #fbfcff;
}
#customerSubmitView .customer-submit-import-title {
  position: relative;
  display: grid;
  gap: 2px;
  padding-left: 29px;
}
#customerSubmitView .customer-submit-import-title::before {
  content: "X";
  position: absolute;
  top: 1px;
  left: 0;
  display: grid;
  width: 22px;
  height: 25px;
  place-items: center;
  border-radius: 4px;
  color: #fff;
  background: #1d9b5b;
  font-size: 11px;
  font-weight: 800;
}
#customerSubmitView .customer-submit-import-title strong {
  color: #26344c;
  font-size: 12px;
}
#customerSubmitView .customer-submit-import-title span {
  color: #7b879b;
  font-size: 10px;
}
#customerSubmitView .customer-submit-import-row input,
#customerSubmitView .customer-submit-import-row button {
  width: 100%;
  min-width: 0;
  height: 34px;
}
#customerSubmitView .customer-submit-side {
  display: flex;
  min-width: 0;
  flex-direction: column;
  justify-content: space-between;
  gap: 8px;
  padding-left: 16px;
  border-left: 1px solid #dfe5ef;
}
#customerSubmitView .customer-submit-import {
  gap: 6px;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
}
#customerSubmitView .customer-submit-import input,
#customerSubmitView .customer-submit-import button {
  width: 100%;
}
#customerSubmitView .customer-submit-side > .primary {
  align-self: flex-end;
  min-width: 108px;
}
#customerSubmitView .customer-submit-records {
  min-height: 310px;
}
#customerSubmitView .customer-submit-record-tabs {
  display: flex;
  align-items: center;
  gap: 5px;
  margin: -14px -14px 12px;
  padding: 7px 10px 0;
  border-bottom: 1px solid #dfe6f1;
  background: #f4f7fc;
}
#customerSubmitView .customer-submit-record-tabs button {
  height: 38px;
  padding: 0 18px;
  border: 0;
  border-bottom: 3px solid transparent;
  border-radius: 7px 7px 0 0;
  color: #66738a;
  background: transparent;
  font-weight: 700;
}
#customerSubmitView .customer-submit-record-tabs button.active {
  color: #315ed6;
  border-bottom-color: #3f63df;
  background: #fff;
}
#customerSubmitView .customer-submit-record-tabs button span {
  color: #8190aa;
  font-size: 11px;
}
#customerSubmitView .customer-submit-record-tabs button.active span {
  color: #315ed6;
}
#customerSubmitView .customer-submit-record-view {
  min-width: 0;
}
#customerSubmitView .customer-submit-record-empty {
  display: grid;
  min-height: 180px;
  place-items: center;
  color: #8a96aa;
  border: 1px dashed #dbe3ef;
  border-radius: 8px;
  background: #fbfcff;
}
#customerSubmitView .customer-submit-record-empty.hidden {
  display: none;
}
#customerSubmitView .customer-project-record-head h3 span {
  color: #3f61df;
}
#customerSubmitView .customer-submit-record-actions {
  display: flex;
  align-items: center;
  gap: 7px;
}
#customerSubmitView .customer-submit-record-actions button {
  height: 32px;
}
#customerSubmitView .customer-order-review-list.empty {
  min-height: 220px;
}
@media (max-width: 1380px) {
  #customerSubmitView .customer-submit-form-body {
    grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr);
  }
  #customerSubmitView .customer-submit-import-row {
    grid-column: 1 / -1;
    grid-template-columns: 220px minmax(260px, 1fr) 210px;
  }
}
@media (max-width: 820px) {
  #customerSubmitView .customer-submit-form-body {
    grid-template-columns: 1fr;
  }
  #customerSubmitView .customer-submit-import-row {
    grid-template-columns: 1fr;
  }
}

/* Customer draft table: fluid columns compact before horizontal scrolling. */
#customerSubmitView .customer-submit-table-wrap table {
  width: 100%;
  min-width: 720px;
  table-layout: fixed;
}
#customerSubmitView .customer-submit-table-wrap {
  max-height: clamp(260px, calc(100vh - 360px), 620px);
  overflow: auto;
  scrollbar-gutter: stable;
}
#customerSubmitView .customer-submit-table-wrap thead th {
  position: sticky;
  z-index: 2;
  top: 0;
}
#customerSubmitView .customer-submit-table-wrap th,
#customerSubmitView .customer-submit-table-wrap td {
  padding-right: clamp(3px, .45vw, 7px);
  padding-left: clamp(3px, .45vw, 7px);
}
#customerSubmitView .customer-submit-table-wrap input {
  width: 100%;
  min-width: 0;
}
#customerSubmitView .customer-submit-table-wrap th:nth-child(1) { width: 10%; }
#customerSubmitView .customer-submit-table-wrap th:nth-child(2) { width: 15%; }
#customerSubmitView .customer-submit-table-wrap th:nth-child(3) { width: 13%; }
#customerSubmitView .customer-submit-table-wrap th:nth-child(4) { width: 7%; }
#customerSubmitView .customer-submit-table-wrap th:nth-child(5) { width: 11%; }
#customerSubmitView .customer-submit-table-wrap th:nth-child(6) { width: 13%; }
#customerSubmitView .customer-submit-table-wrap th:nth-child(7) { width: auto; }
#customerSubmitView .customer-submit-table-wrap th:nth-child(8) { width: 72px; }
#customerSubmitView .customer-draft-pager {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 7px;
  padding-top: 9px;
  color: #748096;
  font-size: 11px;
}
#customerSubmitView .customer-draft-pager label {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
#customerSubmitView .customer-draft-pager select {
  width: 78px;
  height: 30px;
  padding: 0 7px;
}
#customerSubmitView .customer-draft-pager button {
  height: 30px;
}
.submission-table-wrap { max-height: 620px; overflow: auto; border: 1px solid #dce3ef; border-radius: 7px; background: #fff; }.submission-table { width: 100%; min-width: 1180px; border-collapse: separate; border-spacing: 0; table-layout: fixed; }.submission-table th { position: sticky; z-index: 2; top: 0; padding: 8px 7px; color: #627086; background: #edf2f9; font-size: 10px; text-align: left; white-space: nowrap; }.submission-table td { overflow: hidden; padding: 6px 7px; border-top: 1px solid #e8edf5; color: #27344b; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }.submission-table tbody tr:hover td { background: #f8faff; }.submission-table input { width: 100%; min-width: 120px; height: 28px; }.submission-table th:nth-child(10), .submission-table td:nth-child(10) { width: 220px; }.submission-status { display: inline-flex; padding: 3px 7px; border-radius: 12px; color: #94600a; background: #fff0d5; }.submission-status.approved { color: #137a47; background: #e4f7ed; }.submission-status.rejected { color: #b43838; background: #fde9e8; }.submission-actions { display: flex; gap: 4px; }.submission-actions button { height: 27px; padding: 0 7px; font-size: 10px; }.submission-pager { display: flex; align-items: center; justify-content: flex-end; gap: 7px; padding-top: 9px; color: #748096; font-size: 11px; }.submission-pager button { height: 28px; }
#customerSubmitView .submission-table th:last-child,
#customerSubmitView .submission-table td:last-child,
#customerOrderReviewList .submission-table th:last-child,
#customerOrderReviewList .submission-table td:last-child {
  width: 150px;
}
.submission-table .submission-time {
  color: #66738a;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.supplier-recommendation-popover { position: fixed; z-index: 2600; width: 380px; max-width: calc(100vw - 24px); max-height: 280px; overflow-y: auto; padding: 8px; border: 1px solid #cbd7eb; border-radius: 9px; background: #fff; box-shadow: 0 16px 45px rgba(27,42,72,.24); }.supplier-recommendation-popover header { display: flex; justify-content: space-between; padding: 6px 7px 9px; color: #27344b; }.supplier-recommendation-popover header span { color: #7b8698; font-size: 11px; }.supplier-recommendation-popover > button { display: grid; gap: 3px; width: 100%; margin: 3px 0; padding: 9px 10px; border: 1px solid #e1e7f1; border-radius: 7px; background: #fafcff; text-align: left; cursor: pointer; }.supplier-recommendation-popover > button:hover { border-color: #9eb6f2; background: #edf3ff; }.supplier-recommendation-popover > button b { color: #2859cf; font-size: 12px; }.supplier-recommendation-popover > button span { color: #687489; font-size: 10px; }.supplier-recommendation-loading,.supplier-recommendation-empty { padding: 24px 12px; color: #7b8698; text-align: center; }
.supplier-match-badge { display: inline-flex; align-items: center; height: 22px; margin-top: 3px; padding: 0 7px; border: 0; border-radius: 11px; font-size: 9px; white-space: nowrap; cursor: pointer; }.supplier-match-badge.unique { color: #147447; background: #e3f6eb; }.supplier-match-badge.multiple { color: #9a6208; background: #fff0d5; }.supplier-match-badge.none { color: #b43838; background: #fde9e8; }.supplier-match-badge.manual { color: #2859cf; background: #e9efff; }
.customer-price-level,.sale-price-source { display: inline-flex; align-items: center; width: max-content; height: 21px; margin-top: 3px; padding: 0 7px; border-radius: 11px; font-size: 9px; white-space: nowrap; }.customer-price-level.retail { color: #596579; background: #edf1f7; }.customer-price-level.core { color: #2859cf; background: #e9efff; }.customer-price-level.agent { color: #a35e08; background: #fff0d5; }.customer-price-level.chain { color: #7147bd; background: #f2ecff; }.sale-price-source.auto { color: #147447; background: #e3f6eb; }.sale-price-source.manual { color: #2859cf; background: #e9efff; }

/* Order management: company and metadata badges stay on one adaptive line. */
#orders .order-inline-meta { display:flex; align-items:center; width:100%; min-width:0; gap:clamp(4px,.55vw,9px); overflow:hidden; white-space:nowrap; }
#orders .order-inline-meta > .order-expand-input { flex:1 1 auto; width:auto; min-width:0; margin:0; overflow:hidden; white-space:nowrap; word-break:normal; }
#orders .order-inline-meta > .customer-price-level,
#orders .order-inline-meta > .supplier-match-badge { flex:0 0 auto; width:max-content; max-width:none; margin:0; }
#orders .order-inline-meta > .customer-price-level { height:20px; padding:0 6px; }
#orders .order-inline-meta > .supplier-match-badge { height:21px; padding:0 7px; }
#orders .order-inline-meta > .order-company-copy-btn { flex:0 0 auto; display:inline-flex; align-items:center; justify-content:center; width:22px; height:22px; padding:0; border:1px solid #d5deec; border-radius:6px; background:#fff; color:#65728a; font-size:12px; line-height:1; cursor:pointer; transition:border-color .15s ease,background-color .15s ease,color .15s ease; }
#orders .order-inline-meta > .order-company-copy-btn:hover { border-color:#8caaf3; background:#f3f7ff; color:#315fd6; }
#orders .order-inline-meta > .order-company-copy-btn.copied { border-color:#9edbb9; background:#e8f7ef; color:#147447; }
#orders .order-row-copy-cell { padding-left:4px; padding-right:4px; text-align:center; }
#orders .order-row-copy-btn { display:inline-flex; align-items:center; justify-content:center; width:24px; height:24px; padding:0; border:1px solid #d5deec; border-radius:6px; background:#fff; color:#65728a; font-size:12px; line-height:1; cursor:pointer; transition:border-color .15s ease,background-color .15s ease,color .15s ease; }
#orders .order-row-copy-btn:hover { border-color:#8caaf3; background:#f3f7ff; color:#315fd6; }
#orders .order-row-copy-btn.copied { border-color:#9edbb9; background:#e8f7ef; color:#147447; }
#orders .order-quick-dates { display:inline-flex; align-items:center; gap:5px; flex:0 0 auto; }
#orders .order-quick-dates button { min-width:48px; height:34px; padding:0 10px; border-radius:7px; font-size:12px; font-weight:600; white-space:nowrap; cursor:pointer; transition:filter .15s ease,transform .15s ease,box-shadow .15s ease; }
#orders .order-quick-dates button[data-order-date-offset="0"] { border:1px solid #8eabf5; background:#eaf0ff; color:#2859cf; }
#orders .order-quick-dates button[data-order-date-offset="1"] { border:1px solid #efbe76; background:#fff2df; color:#a35e08; }
#orders .order-quick-dates button[data-order-date-offset="2"] { border:1px solid #bea6ed; background:#f2ecff; color:#7147bd; }
#orders .order-quick-dates button:hover { filter:brightness(.97); transform:translateY(-1px); }
#orders .order-quick-dates button[data-order-date-offset="0"].active { border-color:#3564df; background:#3564df; color:#fff; box-shadow:0 3px 9px rgba(53,100,223,.24); }
#orders .order-quick-dates button[data-order-date-offset="1"].active { border-color:#d88416; background:#d88416; color:#fff; box-shadow:0 3px 9px rgba(216,132,22,.24); }
#orders .order-quick-dates button[data-order-date-offset="2"].active { border-color:#7b52c7; background:#7b52c7; color:#fff; box-shadow:0 3px 9px rgba(123,82,199,.24); }
#orders .orders-table td:has(.order-inline-meta) { min-width:0; }
#orders .orders-table .order-inline-meta > .order-expand-input.expanded { width:max(100%,220px); }
@media (max-width: 1100px) { .customer-submit-layout, .customer-order-review-list { grid-template-columns: 1fr; } }
.entry-result-pager { display: flex; align-items: center; justify-content: flex-end; gap: 9px; padding: 10px 12px; border-top: 1px solid #e2e7f0; color: #687489; font-size: 11px; }
.entry-result-pager label { display: flex; align-items: center; gap: 5px; }
.entry-result-pager select { width: 78px; height: 30px; padding: 0 7px; }
.entry-duplicate-badge { display: inline-flex; padding: 3px 7px; border-radius: 11px; font-size: 9px; white-space: nowrap; }
.entry-duplicate-badge.clear { color: #147447; background: #e3f6eb; }
.entry-duplicate-badge.batch { color: #b43838; background: #fde9e8; }
.entry-duplicate-badge.history { color: #9a6208; background: #fff0d5; }
.entry-result-table tr.duplicate-batch td { background: #fff5f4; }
.entry-result-table tr.duplicate-history td { background: #fffaf0; }

/* Order entry: keep customer/supplier status pills visible on one adaptive line. */
.entry-result-table .entry-cell-customer .entry-hover-wrap,
.entry-result-table .entry-cell-supplier .entry-hover-wrap {
  display: flex;
  align-items: center;
  gap: clamp(4px, .4vw, 7px);
  min-width: 0;
  overflow: visible;
  white-space: nowrap;
}
.entry-result-table .entry-cell-customer .entry-edit-input,
.entry-result-table .entry-cell-supplier .entry-edit-input {
  flex: 1 1 auto;
  width: auto;
  min-width: 0;
}
.entry-result-table .entry-cell-customer .customer-price-level,
.entry-result-table .entry-cell-supplier .supplier-match-badge {
  flex: 0 0 auto;
  width: max-content;
  max-width: none;
  height: 20px;
  margin: 0;
  padding: 0 6px;
}
@media (max-width: 1500px) { .project-report-topbar { align-items: flex-start; flex-wrap: wrap; }.project-report-top-actions { width: 100%; overflow-x: auto; } }
@media (max-width: 1000px) { .customer-project-layout { grid-template-columns: 1fr; }.project-report-fields { grid-template-columns: 1fr 1fr; }.customer-project-stats { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 760px) { .project-report-top-actions { flex-wrap: wrap; overflow: visible; }.project-report-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; }.project-report-stats button { width: 100%; }.project-report-stats button:last-child { grid-column: 1 / -1; } }
@media (max-width: 760px) { .project-invite-dialog { width: min(94vw, 520px); padding: 14px; }.project-invite-create, .project-invite-result, .project-invite-row { grid-template-columns: 1fr; }.project-invite-row > small, .project-invite-row > div:last-child { grid-column: 1; grid-row: auto; }.project-invite-row > div:last-child { justify-content: flex-start; }.project-invite-qr img { width: 132px; height: 132px; } }
@media (max-width: 760px) { .product-catalog-invite-create > button { grid-column: 1; }.product-catalog-customer-results { position: static; margin-top: 5px; max-height: 220px; } }
@media (max-width: 760px) { .customer-invite-dialog { width: calc(100vw - 20px); max-height: calc(100dvh - 20px); padding: 14px; }.customer-invite-create, .customer-invite-dialog .customer-invite-row { grid-template-columns: 1fr; }.customer-invite-dialog .customer-invite-row > div:last-child { grid-column: 1; grid-row: auto; }.customer-invite-dialog .project-invite-result { grid-template-columns: 1fr; }.customer-project-record-actions { flex-wrap: wrap; justify-content: flex-end; } }

@media (max-width: 900px) {
  .customer-qualification-stats { grid-template-columns: repeat(2, 1fr); }
  .customer-qualification-toolbar { align-items: stretch; flex-direction: column; }
  .customer-qualification-table-wrap { overflow-x: auto; }
  .customer-qualification-preview { position: fixed; left: 5vw; top: 15vh; width: 90vw; height: 70vh; }
}

.portal-field {
  display: grid;
  min-width: 0;
  gap: 5px;
  color: #5e697a;
  font-size: 11.5px;
  font-weight: 620;
}

.portal-field input {
  width: 100%;
  min-width: 0;
}

#customer .customer-search {
  padding: 14px 16px;
}

#customer .customer-search-main {
  display: grid;
  grid-template-columns: 170px 170px minmax(280px, 1fr) repeat(5, auto);
  align-items: end;
  flex-wrap: nowrap;
}

#customer .customer-quick-date {
  min-width: 58px;
  border-width: 1px;
  border-style: solid;
  font-weight: 750;
}

#customer .customer-quick-date.is-today {
  border-color: #85d9bd;
  color: #087c5d;
  background: #e8f8f2;
}

#customer .customer-quick-date.is-yesterday {
  border-color: #9eb5f8;
  color: #3155c6;
  background: #edf2ff;
}

#customer .customer-quick-date.is-before-yesterday {
  border-color: #f0c678;
  color: #a86000;
  background: #fff6e5;
}

#customer .customer-quick-date:hover {
  filter: brightness(.97);
  transform: translateY(-1px);
}

#supplierPortal .supplier-search {
  margin-bottom: 14px;
  padding: 14px 16px;
}

#supplierPortal .supplier-search-main {
  display: grid;
  grid-template-columns: 170px 170px minmax(320px, 1fr) auto auto;
  align-items: end;
  gap: 10px;
}

#customer .portal-field input,
#supplierPortal .portal-field input {
  width: 100%;
  min-width: 0;
}

#customer .portal-phone-search {
  align-self: end;
  width: 100%;
  min-width: 0;
}

#customer #customerResult,
#supplierPortal .supplier-orders-wrap {
  border-radius: 8px;
  background: #ffffff;
}

#supplierPortal .supplier-upload-panel {
  display: grid;
  grid-template-columns: auto minmax(260px, 560px) minmax(0, 1fr);
  align-items: center;
  gap: 14px;
}

#supplierPortal .supplier-upload-panel .panel-title {
  margin: 0;
}

#supplierPortal .supplier-upload-panel .actions {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) auto;
  gap: 8px;
  min-width: 0;
}

.project-name-library-modal { position: fixed; z-index: 1210; inset: 0; display: grid; place-items: center; padding: 24px; background: rgba(25, 35, 55, .48); backdrop-filter: blur(2px); }
.project-name-library-dialog { width: min(840px, 100%); max-height: calc(100vh - 48px); display: flex; flex-direction: column; overflow: hidden; padding: 20px; border: 1px solid #d8e0ee; border-radius: 14px; background: #fff; box-shadow: 0 20px 55px rgba(20, 32, 58, .24); }
.project-name-library-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding-bottom: 14px; border-bottom: 1px solid #e8edf5; }
.project-name-library-head > div { display: grid; gap: 4px; }.project-name-library-head strong { font-size: 20px; color: #202a3a; }.project-name-library-head span { color: #7b8698; font-size: 12px; }
.project-name-library-tools { display: grid; grid-template-columns: minmax(220px, 1fr) 180px 82px; gap: 10px; margin-top: 16px; }
.project-name-library-tools input { min-width: 0; }
.project-name-import { display: flex; align-items: center; min-width: 0; padding: 0 12px; border: 1px solid #d8e0ee; border-radius: 7px; background: #f8faff; cursor: pointer; }
.project-name-import span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }.project-name-import input { display: none; }
.project-name-library-tip { margin: 10px 0; color: #76839a; font-size: 12px; }
.project-name-import-status { min-height: 20px; margin: -4px 0 8px; color: #64748b; font-size: 12px; }
.project-name-import-status.success { color: #14804a; }
.project-name-import-status.error { color: #d13c3c; }
.project-name-library-list { min-height: 240px; max-height: 52vh; overflow: auto; border: 1px solid #e2e8f2; border-radius: 10px; }
.project-name-library-row { display: grid; grid-template-columns: minmax(180px, 1.1fr) minmax(180px, 1fr) 86px 86px; align-items: center; gap: 12px; min-height: 52px; padding: 8px 12px; border-bottom: 1px solid #edf1f7; }
.project-name-library-row:last-child { border-bottom: 0; }.project-name-library-row strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.project-name-library-row span { color: #69768b; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.project-name-library-row small { color: #909bad; text-align: right; }
.project-name-library-row button { white-space: nowrap; }.project-name-library-list.empty { display: grid; place-items: center; color: #8a96aa; }
@media (max-width: 720px) { .project-name-library-tools { grid-template-columns: 1fr 1fr; }.project-name-library-tools > input { grid-column: 1 / -1; }.project-name-library-row { grid-template-columns: 1fr auto; }.project-name-library-row span { grid-column: 1 / -1; grid-row: 2; }.project-name-library-row small { display: none; } }

#supplierPortal .supplier-upload-panel input[type="file"] {
  width: 100%;
  min-width: 0;
}

.portal-product-search {
  display: grid;
  grid-template-columns: minmax(280px, 1fr) auto auto;
  align-items: end;
  gap: 10px;
  margin-bottom: 14px;
}

.portal-product-result {
  display: flex;
  flex: 1 1 auto;
  min-height: 280px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
  box-shadow: var(--wb-shadow);
  color: var(--muted);
  text-align: center;
}

.portal-product-result strong {
  color: var(--text);
  font-size: 16px;
}

.portal-product-result span {
  max-width: 560px;
  font-size: 12.5px;
}

/* Responsive shell */
@media (max-width: 980px) {
  body { display: flex; overflow: hidden; }

  .side {
    position: relative;
    z-index: 50;
    display: flex;
    flex: 0 0 74px;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    width: 74px;
    height: 100vh;
    padding: 8px;
    overflow-x: hidden;
    overflow-y: auto;
    border-right: 1px solid var(--sidebar-line);
    border-bottom: 0;
    background: #ffffff;
  }

  .brand {
    flex: 0 0 auto;
    min-width: 0;
    min-height: 54px;
    padding: 8px;
    justify-content: center;
    border-right: 0;
    border-bottom: 0;
  }

  .brand-mark {
    width: 32px;
    height: 32px;
    flex-basis: 32px;
  }

  .brand-copy { display: none; }
  .sidebar-toggle { display:none; }

  .nav-group-label {
    display: none;
  }

  .nav {
    flex: 0 0 auto;
    width: 100%;
    min-height: 42px;
    margin: 0;
    padding: 8px;
    overflow: hidden;
    color: transparent;
  }

  .nav::after {
    left: 50%;
    transform: translate(-50%, -50%);
  }

  .nav::before {
    top: auto;
    right: 8px;
    bottom: 0;
    left: 8px;
    width: auto;
    height: 3px;
  }

  .logout-nav {
    margin-top: 0;
    border-top: 1px solid transparent;
  }

  .main {
    width: calc(100% - 74px);
    height: 100vh;
  }

  .view > :not(.topbar) {
    margin-right: 16px;
    margin-left: 16px;
  }

  .topbar,
  #orders .topbar,
  #statistics .topbar,
  #funds .topbar,
  #entry .topbar {
    padding-right: 16px;
    padding-left: 16px;
  }

  #entry .entry-input-panel .archive-select-row {
    grid-template-columns: 1fr 1fr;
  }

  #entry .entry-import-inline {
    grid-column: 1 / -1;
  }

  #orders .orders-control-panel .filters {
    grid-template-columns: 180px 180px minmax(260px, 1fr) 74px auto auto;
    overflow-x: auto;
  }

  #orders .orders-logistics-panel {
    grid-template-columns: auto auto minmax(190px, 1fr) minmax(240px, 330px);
  }

  #statistics .stats-toolbar-meta {
    grid-template-columns: 1fr;
  }

  #statistics .stats-total-row {
    justify-content: flex-start;
  }
}

/* 品牌字强制居中，避免旧侧栏规则造成字号和基线偏移。 */
.side .brand .brand-mark {
  box-sizing: border-box;
  display: grid !important;
  place-items: center !important;
  padding: 0 !important;
  overflow: hidden;
  color: #fff !important;
  font-size: 24px !important;
  font-weight: 850 !important;
  line-height: 1 !important;
  text-align: center !important;
  text-indent: 0 !important;
}

@media (min-width: 981px) {
  body.sidebar-collapsed .side .brand .brand-mark {
    font-size: 19px !important;
  }
}

@media (max-width: 680px) {
  .view > :not(.topbar) {
    margin-right: 10px;
    margin-left: 10px;
  }

  .topbar,
  #orders .topbar,
  #statistics .topbar,
  #funds .topbar,
  #entry .topbar {
    flex-wrap: wrap;
    gap: 10px;
    padding: 12px 10px 10px;
  }

  h1,
  .topbar h1 {
    font-size: 19px;
  }

  .panel {
    padding: 10px;
  }

  .metrics {
    grid-template-columns: repeat(2, minmax(120px, 1fr));
    gap: 8px;
  }

  .metrics div {
    min-height: 72px;
    padding: 10px 12px;
  }

  .orders-overview {
    min-height: 0;
    padding: 18px;
  }

  .orders-overview-icon {
    width: 44px;
    height: 44px;
    flex-basis: 44px;
  }

  .orders-overview-stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px 20px;
    margin-top: 18px;
  }

  .orders-overview-stats b {
    font-size: 22px;
  }

  #entry .entry-input-panel .archive-select-row {
    grid-template-columns: 1fr;
  }

  #entry .entry-import-inline {
    grid-column: auto;
    grid-template-columns: 1fr;
  }

  #entry .entry-parse-row {
    grid-template-columns: 1fr;
  }

  #entry .entry-inline-actions {
    justify-content: flex-end;
  }

  #orders .orders-control-panel .filters {
    grid-template-columns: 1fr 1fr;
    width: 100%;
    overflow: visible;
  }

  #orders .orders-control-panel .filters #fQ {
    grid-column: 1 / -1;
  }

  #orders .orders-control-panel .toggle-label {
    justify-self: end;
  }

  #orders .order-quick-dates {
    justify-self: start;
  }

  .order-lock-help {
    display: none;
  }

  #orders .orders-logistics-panel {
    grid-template-columns: 1fr auto;
  }

  #orders .orders-logistics-panel p {
    display: none;
  }

  #orders .orders-logistics-panel .actions {
    grid-column: 1 / -1;
  }

  #statistics .stats-search-row {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  #statistics .stats-date-row,
  #statistics .stats-total-row {
    flex-wrap: nowrap;
    padding-bottom: 3px;
    overflow-x: auto;
  }

  #funds .funds-panel-head {
    display: block;
  }

  #funds .funds-panel-head .panel-title {
    margin-bottom: 8px;
  }

  .portal-login-strip {
    display: block;
  }

  .portal-login-strip .panel-title {
    margin-bottom: 8px;
  }

  .portal-login-strip .actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .customer-search-main {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #customer .customer-result-bar {
    grid-template-columns: 1fr;
  }

  #customer #customerSummary:not(.hidden) {
    justify-content: start;
  }

  .order-edit-password-field {
    grid-template-columns: 1fr;
    gap: 6px;
  }

  .workbench-hero,
  .portal-identity-hero {
    min-height: 0;
    padding: 18px;
  }

  .workbench-hero-icon,
  .portal-avatar {
    width: 44px;
    height: 44px;
    flex-basis: 44px;
  }

  .workbench-hero-heading strong,
  .portal-identity-heading > div > strong {
    max-width: 185px;
    font-size: 17px;
  }

  .portal-identity-badge {
    padding: 5px 9px;
    font-size: 10.5px;
  }

  .workbench-hero-stats,
  .workbench-hero-stats.metrics,
  .portal-identity-stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px 20px;
    margin-top: 18px;
  }

  .workbench-hero-stats b,
  .workbench-hero-stats.metrics strong,
  .portal-identity-stats strong {
    font-size: 22px;
  }

  #customer .customer-search-main,
  #supplierPortal .supplier-search-main {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    overflow: visible;
  }

  #customer .customer-search-main .portal-search-field,
  #supplierPortal .supplier-search-main .portal-search-field {
    grid-column: 1 / -1;
  }

  #customer .customer-search-main > button,
  #supplierPortal .supplier-search-main > button {
    width: 100%;
  }

  .portal-header-login {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
    margin-left: 0;
  }

  .portal-header-login #customerAccount,
  .portal-header-login #supplierAccount,
  .portal-header-login .password-chip,
  .portal-header-login .password-chip input {
    width: 100%;
    min-width: 0;
  }

  #customer .portal-tabs {
    display: flex;
    width: max-content;
    min-width: 100%;
  }

  .customer-portal-tabs-row {
    align-items: stretch;
    flex-wrap: nowrap;
  }

  .customer-product-inline-search {
    grid-template-columns: minmax(0, 1fr) 92px 14px 92px;
    flex-basis: 100%;
  }

  .customer-product-inline-search > button {
    width: 100%;
  }

  #supplierPortal .supplier-upload-panel,
  .portal-product-search {
    grid-template-columns: 1fr;
  }

  #supplierPortal .supplier-upload-panel .actions {
    grid-template-columns: 1fr auto;
  }
}

/* Order management: keep edit lock and logistics import on one compact row. */
#orders .orders-control-panel .orders-utility-row {
  display: grid;
  grid-template-columns: minmax(290px, 0.8fr) minmax(0, 2.2fr);
  align-items: stretch;
  min-width: 0;
  border-bottom: 1px solid var(--line);
  background: #fff;
}

#orders .orders-control-panel .orders-utility-row .order-edit-lockbar {
  min-width: 0;
  min-height: 48px;
  padding: 6px 12px;
  border-right: 1px solid var(--line);
  border-bottom: 0;
}

#orders .orders-control-panel .orders-utility-row .orders-logistics-panel {
  grid-template-columns: auto auto minmax(0, 1fr) minmax(470px, 540px);
  min-width: 0;
  min-height: 48px;
  padding: 6px 12px;
  gap: 9px;
  border-bottom: 0;
}

#orders .orders-control-panel .orders-utility-row .orders-logistics-panel .actions {
  grid-template-columns: 124px minmax(210px, 1fr) 136px;
  width: 100%;
}

#orders .orders-control-panel .orders-utility-row .orders-logistics-panel input[type="file"] {
  width: 100%;
}

#orders .orders-utility-row .orders-logistics-panel .mini-result:empty {
  display: none;
}

#orders .orders-utility-row .orders-logistics-panel .mini-result:not(:empty) {
  grid-column: 1 / -1;
}

@media (max-width: 1100px) {
  #orders .orders-control-panel .orders-utility-row {
    grid-template-columns: 1fr;
  }

  #orders .orders-control-panel .orders-utility-row .order-edit-lockbar {
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  #orders .orders-control-panel .orders-utility-row .orders-logistics-panel {
    grid-template-columns: auto auto minmax(0, 1fr) minmax(440px, 520px);
  }
}

/* Compact overview bands: dashboard, entry, finance, funds and both portals. */
@media (min-width: 901px) {
  .workbench-hero,
  .portal-identity-hero,
  #orders .orders-overview {
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    min-height: 112px;
    height: 112px;
    padding: 18px 32px;
    column-gap: clamp(42px, 7vw, 120px);
  }

  #entry .entry-hero {
    min-height: 112px;
    height: 112px;
  }

  .workbench-hero-heading,
  .portal-identity-heading,
  #orders .orders-overview-heading {
    flex: 0 1 auto;
    min-width: 330px;
  }

  .workbench-hero-icon,
  .portal-avatar,
  #orders .orders-overview-icon {
    width: 50px;
    height: 50px;
    flex-basis: 50px;
  }

  .workbench-hero-stats,
  .workbench-hero-stats.metrics,
  .portal-identity-stats,
  #orders .orders-overview-stats {
    flex: 0 1 auto;
    align-items: center;
    gap: clamp(28px, 4vw, 58px);
    margin-top: 0;
  }

  .portal-identity-badge {
    position: absolute;
    z-index: 2;
    top: 14px;
    right: 18px;
  }
}

@media (max-width: 900px) {
  .workbench-hero,
  .portal-identity-hero,
  #orders .orders-overview {
    height: auto;
    min-height: 0;
  }
}

/* Before authentication, portals expose only their login header. */
#customer.portal-locked > :not(.topbar),
#supplierPortal.portal-locked > :not(.topbar) {
  display: none !important;
}

.customer-portal-pager {
  display: flex;
  flex: 0 0 auto;
  grid-column: 1 / -1;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  width: 100%;
  padding: 10px 12px;
  border-top: 1px solid #e2e7f0;
  color: #687489;
  background: #fff;
  font-size: 11px;
}
#customer #customerProductsView:not(.hidden) {
  display: flex;
  height: calc(100dvh - 230px);
  min-height: 360px;
  max-height: calc(100dvh - 230px);
  flex: 0 0 auto;
  overflow: hidden;
}
#customer #customerProductResult:not(.empty) {
  display: flex;
  height: 100%;
  min-height: 0;
  max-height: none;
  flex: 1 1 auto;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
}
#customer #customerProductResult:not(.empty) > .portal-product-table-wrap {
  flex: 1 1 auto;
  min-height: 0;
  max-height: none;
  overscroll-behavior: auto;
}
#customer #customerProductResult:not(.empty) > .customer-portal-pager {
  position: relative;
  bottom: auto;
  z-index: 4;
}
.customer-portal-pager label { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.customer-portal-pager select { width: 78px; height: 30px; padding: 0 7px; }
.customer-portal-pager input { width: 58px; height: 30px; padding: 0 7px; text-align: center; }
.supplier-portal-pager-host:empty { display: none; }
.supplier-portal-pager-host .supplier-portal-pager { min-height: 46px; margin-bottom: 6px; border: 1px solid #e2e7f0; border-radius: 8px; box-shadow: 0 4px 12px rgba(36, 52, 84, .05); }
.customer-qualification-result > .customer-portal-pager { position: sticky; bottom: 0; }
.submission-pager label { display: inline-flex; align-items: center; gap: 5px; }
.submission-pager select { width: 78px; height: 30px; padding: 0 7px; }
@media (max-width: 760px) { .customer-portal-pager { justify-content: flex-start; flex-wrap: wrap; } }
@media (max-height: 720px) {
  #customer #customerProductsView:not(.hidden) {
    height: calc(100dvh - 210px);
    min-height: 300px;
    max-height: calc(100dvh - 210px);
  }
  #customer #customerProductResult:not(.empty) {
    height: 100%;
    min-height: 0;
    max-height: none;
  }
}

@media (max-width: 900px) {
  .portal-identity-heading {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    align-items: center;
    gap: 0 14px;
    width: 100%;
  }
  .portal-identity-heading .portal-avatar {
    grid-row: 1 / span 2;
  }
  .portal-identity-heading > div {
    grid-column: 2;
    min-width: 0;
  }
  .portal-identity-heading > div > strong {
    display: block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .portal-identity-heading .portal-identity-badge {
    position: static;
    grid-column: 2;
    justify-self: start;
    width: max-content;
    margin: 7px 0 0;
  }
}

/* Keep the standalone customer login visible under the legacy portal lock rule. */
#customer.portal-locked > .customer-tech-login { display: flex !important; }
#customer.portal-locked > .topbar { display: none !important; }
#customer:not(.portal-locked) > .customer-tech-login { display: none !important; }
.customer-portal #customer > .customer-tech-login { margin: 0 !important; }
#customer .customer-login-card .customer-login-button {
  border-color: transparent;
  color: #032521;
  background: linear-gradient(100deg, #2adac2, #24e5d8);
  box-shadow: 0 9px 28px rgba(30, 218, 188, .3), inset 0 1px rgba(255,255,255,.35);
}

/* Keep the standalone supplier login visible under the legacy portal lock rule. */
#supplierPortal.portal-locked > .supplier-tech-login { display: flex !important; }
#supplierPortal.portal-locked > .topbar { display: none !important; }
#supplierPortal:not(.portal-locked) > .supplier-tech-login { display: none !important; }
.supplier-portal #supplierPortal > .supplier-tech-login { margin: 0 !important; }
#supplierPortal .supplier-login-card .supplier-login-button {
  border-color: transparent;
  color: #2b1900;
  background: linear-gradient(100deg, #ffbb35, #ff946b);
  box-shadow: 0 9px 28px rgba(239,157,27,.34), inset 0 1px rgba(255,255,255,.35);
}

/* Final customer-funds list controls: smart order, 35/60 rows and paging. */
#funds .funds-customer-toolbar { flex-wrap: wrap; }
#funds .funds-smart-sort { padding:5px 9px; border:1px solid #cbdcff; border-radius:6px; color:#2f63cf; background:#f4f7ff; font-weight:650; white-space:nowrap; }
#funds .funds-customer-page-size { display:inline-flex; align-items:center; gap:6px; margin-left:auto; color:var(--muted); font-size:12px; white-space:nowrap; }
#funds .funds-customer-page-size select { width:82px; height:30px; padding:0 8px; }
#funds .finance-customers-wrap { height:clamp(360px,52vh,620px); max-height:none; }
#funds .funds-customer-pager { display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:48px; padding:8px 14px; border-top:1px solid var(--line); color:var(--muted); font-size:12px; }
#funds .funds-customer-pager > div { display:flex; align-items:center; gap:6px; }
#funds .funds-customer-pager button { min-width:34px; height:30px; padding:0 10px; }
@media (max-width:760px) { #funds .funds-customer-page-size { margin-left:0; } #funds .funds-customer-pager { align-items:flex-start; flex-direction:column; } #funds .funds-customer-pager > div { flex-wrap:wrap; } }

/* Funds ledger: responsive columns, internal vertical scroll and paging. */
#funds .funds-ledger-filters { align-items:center; flex-wrap:wrap; }
#funds .funds-ledger-page-size { display:inline-flex; align-items:center; gap:6px; margin-left:auto; color:var(--muted); font-size:12px; white-space:nowrap; }
#funds .funds-ledger-page-size select { width:82px; height:30px; padding:0 8px; }
#funds .finance-ledger-wrap { width:100%; height:clamp(360px,52vh,620px); min-height:360px; max-height:none; overflow-x:hidden; overflow-y:auto; overscroll-behavior:contain; scrollbar-gutter:stable; }
#funds .finance-ledger-table { width:100%; min-width:0; table-layout:fixed; }
#funds .finance-ledger-table th,
#funds .finance-ledger-table td { min-width:0; padding-left:clamp(3px,.42vw,8px); padding-right:clamp(3px,.42vw,8px); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#funds .finance-ledger-table th:nth-child(1) { width:9%; }
#funds .finance-ledger-table th:nth-child(2) { width:14%; }
#funds .finance-ledger-table th:nth-child(3) { width:7%; }
#funds .finance-ledger-table th:nth-child(4) { width:6%; }
#funds .finance-ledger-table th:nth-child(5) { width:5%; }
#funds .finance-ledger-table th:nth-child(6) { width:6%; }
#funds .finance-ledger-table th:nth-child(7) { width:4%; }
#funds .finance-ledger-table th:nth-child(8) { width:6%; }
#funds .finance-ledger-table th:nth-child(9) { width:6%; }
#funds .finance-ledger-table th:nth-child(10) { width:4%; }
#funds .finance-ledger-table th:nth-child(11) { width:9%; }
#funds .finance-ledger-table th:nth-child(12) { width:5.5%; }
#funds .finance-ledger-table th:nth-child(13) { width:4%; }
#funds .finance-ledger-table th:nth-child(14) { width:4%; }
#funds .finance-ledger-table th:nth-child(15) { width:10.5%; }
#funds .finance-ledger-table td:nth-child(15) { overflow:visible; text-overflow:clip; white-space:normal; overflow-wrap:anywhere; line-height:1.35; }
#funds .finance-ledger-table th:nth-child(6) { color:#087b5d; background:#eaf9f3; }
#funds .finance-ledger-table td:nth-child(6) { color:#087b5d; background:rgba(234,249,243,.58); font-weight:750; }
#funds .finance-ledger-table th:nth-child(7) { color:#cf3f39; background:#fff0ef; }
#funds .finance-ledger-table td:nth-child(7) { color:#cf3f39; background:rgba(255,240,239,.58); font-weight:750; }
#funds .finance-ledger-table th:nth-child(8) { color:#a56808; background:#fff7e7; }
#funds .finance-ledger-table td:nth-child(8) { color:#a56808; background:rgba(255,247,231,.65); font-weight:750; }
#funds .finance-ledger-table th:nth-child(9) { color:#315fd2; background:#edf3ff; }
#funds .finance-ledger-table td:nth-child(9) { color:#315fd2; background:rgba(237,243,255,.68); font-weight:750; }
#funds .finance-ledger-table thead th { position:sticky; top:0; z-index:3; }
#funds .funds-ledger-customer { display:flex; align-items:center; min-width:0; gap:4px; }
#funds .funds-ledger-customer > span { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#funds .funds-ledger-copy { flex:0 0 auto; display:inline-flex; align-items:center; justify-content:center; width:18px; height:18px; padding:0; border:1px solid transparent; border-radius:5px; background:transparent; color:#8a96aa; cursor:pointer; transition:background-color .15s ease,color .15s ease,border-color .15s ease; }
#funds .funds-ledger-copy svg { width:12px; height:12px; fill:none; stroke:currentColor; stroke-width:1.4; stroke-linecap:round; stroke-linejoin:round; }
#funds .funds-ledger-copy:hover { border-color:#c7d6f7; background:#edf3ff; color:#315fd2; }
#funds .funds-ledger-copy.copied { border-color:#b9e4d5; background:#eaf9f3; color:#087b5d; }
#funds .funds-ledger-type { display:inline-flex; align-items:center; justify-content:center; max-width:100%; padding:3px 7px; border:1px solid transparent; border-radius:999px; font-size:11px; font-weight:700; line-height:1.2; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#funds .funds-ledger-type.is-prepaid { border-color:#b9e4d5; background:#eaf9f3; color:#087b5d; }
#funds .funds-ledger-type.is-deduction { border-color:#ffc8c5; background:#fff0ef; color:#cf3f39; }
#funds .funds-ledger-type.is-daily-payment { border-color:#bfd2ff; background:#edf3ff; color:#315fd2; }
#funds .funds-ledger-type.is-refund { border-color:#d9c8f5; background:#f5efff; color:#7650bd; }
#funds .funds-ledger-type.is-adjustment { border-color:#f1d49d; background:#fff7e7; color:#a56808; }
#funds .funds-ledger-type.is-other { border-color:#d7dee9; background:#f4f6f9; color:#667287; }
#funds .funds-ledger-status { display:inline-flex; align-items:center; justify-content:center; max-width:100%; padding:3px 7px; border:1px solid transparent; border-radius:999px; font-size:11px; font-weight:700; line-height:1.2; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#funds .funds-ledger-status.is-confirmed { border-color:#b9e4d5; background:#eaf9f3; color:#087b5d; }
#funds .funds-ledger-status.is-pending { border-color:#f1d49d; background:#fff7e7; color:#a56808; }
#funds .funds-ledger-status.is-rejected { border-color:#ffc8c5; background:#fff0ef; color:#cf3f39; }
#funds .funds-ledger-status.is-neutral { border-color:#d7dee9; background:#f4f6f9; color:#667287; }
#fundsLedgerType option[value="预存款"] { color:#087b5d; }
#fundsLedgerType option[value="订单扣款"] { color:#cf3f39; }
#fundsLedgerType option[value="日结收款"] { color:#315fd2; }
#fundsLedgerType option[value="退款"] { color:#7650bd; }
#fundsLedgerType option[value="手工调整"] { color:#a56808; }
#funds .funds-ledger-pager { display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:48px; padding:8px 14px; border-top:1px solid var(--line); color:var(--muted); font-size:12px; }
#funds .funds-ledger-pager > div { display:flex; align-items:center; gap:6px; }
#funds .funds-ledger-pager button { min-width:34px; height:30px; padding:0 10px; }
@media (max-width:760px) { #funds .funds-ledger-page-size { margin-left:0; } #funds .funds-ledger-pager { align-items:flex-start; flex-direction:column; } #funds .funds-ledger-pager > div { flex-wrap:wrap; } }

/* Finance order details: 40/80 rows, internal two-axis scroll and paging. */
#statistics .stats-view-panel { flex:1 1 auto; padding:0; overflow:hidden; }
#statistics .stats-view-head { display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:52px; padding:0 16px; border-bottom:1px solid var(--line); }
#statistics .stats-view-tabs { display:flex; align-self:stretch; gap:4px; }
#statistics .stats-view-tab { position:relative; min-width:104px; padding:0 18px; border:0; color:#526077; background:transparent; font-size:14px; font-weight:700; cursor:pointer; }
#statistics .stats-view-tab::after { content:""; position:absolute; right:12px; bottom:0; left:12px; height:3px; border-radius:3px 3px 0 0; background:transparent; }
#statistics .stats-view-tab:hover { color:#118575; background:#f4fbf9; }
#statistics .stats-view-tab.is-active { color:#118575; background:#edf9f6; }
#statistics .stats-view-tab.is-active::after { background:#149b88; }
#statistics .stats-view-tab:focus-visible { outline:2px solid #78cbbd; outline-offset:-3px; }
#statistics .stats-tab-panel { min-width:0; }
#statistics .stats-trend-panel { min-height:360px; padding:16px; }
#statistics .stats-trend-panel .stats-list { margin:0; }
#statistics .stats-charts-panel { min-height:520px; padding:14px; background:#f7f9fc; }
#statistics .stats-chart-grid { display:grid; gap:12px; }
#statistics .stats-chart-grid-top { grid-template-columns:minmax(0,2fr) minmax(280px,1fr); }
#statistics .stats-chart-grid-rank { grid-template-columns:repeat(3,minmax(0,1fr)); margin-top:12px; }
#statistics .stats-chart-card { min-width:0; overflow:hidden; border:1px solid #dfe6f0; border-radius:9px; background:#fff; box-shadow:0 3px 10px rgba(36,52,84,.04); }
#statistics .stats-chart-card > header { display:flex; align-items:center; justify-content:space-between; gap:10px; min-height:44px; padding:0 13px; border-bottom:1px solid #edf1f6; }
#statistics .stats-chart-card > header strong { color:#26344b; font-size:13px; }
#statistics .stats-chart-card > header span { color:#8a94a6; font-size:10px; }
#statistics .stats-chart-body { min-height:230px; padding:12px; }
#statistics .stats-chart-body.empty { display:grid; place-items:center; color:#8a94a6; }
#statistics .stats-trend-svg { display:block; width:100%; height:230px; overflow:visible; }
#statistics .stats-chart-axis { stroke:#dce4ee; stroke-width:1; }
#statistics .stats-trend-line { fill:none; stroke:#159b86; stroke-width:3; stroke-linecap:round; stroke-linejoin:round; }
#statistics .stats-trend-point { fill:#fff; stroke:#159b86; stroke-width:3; }
#statistics .stats-chart-label { fill:#8792a4; font-size:11px; }
#statistics .stats-donut-wrap { display:grid; grid-template-columns:150px minmax(0,1fr); align-items:center; gap:14px; height:100%; }
#statistics .stats-donut { display:grid; place-items:center; width:142px; height:142px; margin:auto; border-radius:50%; }
#statistics .stats-donut > span { display:grid; place-items:center; width:82px; height:82px; border-radius:50%; background:#fff; box-shadow:0 0 0 1px #edf1f6; }
#statistics .stats-donut > span b { color:#26344b; font-size:22px; }
#statistics .stats-donut > span small { color:#8a94a6; font-size:10px; }
#statistics .stats-donut-legend { display:grid; gap:8px; }
#statistics .stats-donut-legend span { display:grid; grid-template-columns:8px minmax(0,1fr) auto; align-items:center; gap:7px; color:#657187; font-size:10px; }
#statistics .stats-donut-legend i { width:8px; height:8px; border-radius:50%; }
#statistics .stats-donut-legend em { overflow:hidden; font-style:normal; text-overflow:ellipsis; white-space:nowrap; }
#statistics .stats-donut-legend b { color:#26344b; }
#statistics .stats-rank-chart { display:grid; gap:8px; }
#statistics .stats-rank-row { display:grid; grid-template-columns:20px minmax(72px,110px) minmax(70px,1fr) 78px; align-items:center; gap:7px; min-width:0; font-size:9px; }
#statistics .stats-rank-index { color:#9aa4b3; text-align:center; }
#statistics .stats-rank-name { overflow:hidden; color:#536077; text-overflow:ellipsis; white-space:nowrap; }
#statistics .stats-rank-track { height:8px; overflow:hidden; border-radius:6px; background:#edf2f6; }
#statistics .stats-rank-track i { display:block; height:100%; border-radius:6px; background:linear-gradient(90deg,#25b29c,#4385db); }
#statistics .stats-rank-row b { color:#26344b; font-size:9px; text-align:right; white-space:nowrap; }
#statistics .stats-page-size { display:inline-flex; align-items:center; gap:6px; color:var(--muted); font-size:12px; white-space:nowrap; }
#statistics .stats-page-size select { width:82px; height:30px; padding:0 8px; }
#statistics,
#statistics .stats-view-panel,
#statistics .stats-view-head { min-width:0; max-width:100%; box-sizing:border-box; }
#statistics .stats-orders-wrap { display:block; width:100%; max-width:100%; height:auto; min-height:0; max-height:clamp(400px,56vh,680px); overflow-x:auto; overflow-y:auto; overscroll-behavior:contain; scrollbar-gutter:stable; box-sizing:border-box; }
#statistics .stats-orders-wrap.empty { min-height:260px; }
#statistics .stats-orders-wrap::-webkit-scrollbar { width:12px; height:12px; }
#statistics .stats-orders-wrap::-webkit-scrollbar-track { background:#eef2f8; }
#statistics .stats-orders-wrap::-webkit-scrollbar-thumb { border:2px solid #eef2f8; border-radius:8px; background:#9aa8bd; }
#statistics .stats-orders-wrap::-webkit-scrollbar-thumb:hover { background:#74849c; }
#statistics .stats-orders-table thead th { position:sticky; top:0; z-index:3; }
#statistics .stats-orders-table th:first-child,
#statistics .stats-orders-table td:first-child { position:sticky; left:0; z-index:2; background:#fff; }
#statistics .stats-orders-table thead th:first-child { z-index:4; background:#f6f8fc; }
#statistics .stats-orders-table th,
#statistics .stats-orders-table td { padding-right:clamp(7px,.65vw,13px); padding-left:clamp(7px,.65vw,13px); }
#statistics .stats-orders-table td.stats-full-text-cell { overflow:hidden; text-overflow:ellipsis; }
#statistics .stats-orders-table td.stats-full-text-cell .stats-cell-text { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.stats-company-cell { display:flex; align-items:center; min-width:0; gap:4px; }
.stats-company-cell .stats-cell-text { min-width:0; flex:1 1 auto; }
.stats-company-copy { flex:0 0 auto; display:inline-flex; align-items:center; justify-content:center; width:18px; height:18px; padding:0; border:1px solid transparent; border-radius:5px; background:transparent; color:#8a96aa; cursor:pointer; transition:border-color .12s ease,background-color .12s ease,color .12s ease; }
.stats-company-copy svg { width:12px; height:12px; fill:none; stroke:currentColor; stroke-width:1.4; stroke-linecap:round; stroke-linejoin:round; }
.stats-company-copy:hover { border-color:#c7d6f7; background:#edf3ff; color:#315fd2; }
.stats-company-copy.copied { border-color:#b9e4d5; background:#eaf9f3; color:#087b5d; }
.stats-cell-tooltip { position:fixed; z-index:12000; max-height:min(240px,45vh); overflow:auto; padding:10px 12px; border:1px solid #cfd9e8; border-radius:8px; color:#26344b; background:#fff; box-shadow:0 14px 38px rgba(25,39,69,.24); font-size:12px; line-height:1.65; white-space:normal; overflow-wrap:anywhere; pointer-events:none; }
#statistics .stats-orders-pager { display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:48px; padding:8px 14px; border-top:1px solid var(--line); color:var(--muted); font-size:12px; }
#statistics .stats-orders-pager > div { display:flex; align-items:center; gap:6px; }
#statistics .stats-orders-pager button { min-width:34px; height:30px; padding:0 10px; }
@media (max-width:1100px) { #statistics .stats-chart-grid-top,#statistics .stats-chart-grid-rank { grid-template-columns:1fr; } }
@media (max-width:760px) { #statistics .stats-view-head { align-items:stretch; flex-direction:column; padding:8px 10px; } #statistics .stats-view-tabs { min-height:44px; overflow-x:auto; } #statistics .stats-view-tab { flex:0 0 auto; } #statistics .stats-page-size { align-self:flex-end; } #statistics .stats-orders-pager { align-items:flex-start; flex-direction:column; } #statistics .stats-orders-pager > div { flex-wrap:wrap; } #statistics .stats-donut-wrap { grid-template-columns:1fr; } }

/* Customer FAQ: compact list with a large creation/edit modal. */
.customer-faq-view { min-width:0; }
.customer-faq-topbar { margin-bottom:8px; }
.customer-faq-summary { display:flex; align-items:center; gap:14px; min-height:42px; color:var(--muted); }
.customer-faq-summary strong { color:#2563eb; font-size:18px; }
.customer-faq-summary i { width:1px; height:18px; background:var(--line); }
.customer-faq-panel { overflow:hidden; }
.customer-faq-toolbar { display:grid; grid-template-columns:minmax(260px,1fr) auto; gap:10px; padding:14px 16px; border-bottom:1px solid var(--line); }
.customer-faq-table-wrap { min-height:420px; max-height:58vh; overflow:auto; }
.customer-faq-table { width:100%; min-width:860px; table-layout:fixed; border-collapse:collapse; }
.customer-faq-table th,.customer-faq-table td { padding:14px 16px; border-bottom:1px solid var(--line); text-align:left; vertical-align:top; }
.customer-faq-table th { position:sticky; top:0; z-index:2; background:#f6f8fc; color:#334155; }
.customer-faq-table th:nth-child(1) { width:25%; }.customer-faq-table th:nth-child(2) { width:48%; }.customer-faq-table th:nth-child(3) { width:13%; }.customer-faq-table th:nth-child(4) { width:14%; }
.customer-faq-answer { color:#475569; line-height:1.6; white-space:pre-wrap; }
.customer-faq-category { display:inline-flex; padding:4px 9px; border-radius:999px; color:#315fbd; background:#eef4ff; white-space:nowrap; }
.customer-faq-actions { display:flex; gap:7px; white-space:nowrap; }
.customer-faq-pager { display:flex; align-items:center; justify-content:space-between; min-height:52px; padding:8px 16px; color:var(--muted); border-top:1px solid var(--line); }
.customer-faq-pager > div { display:flex; gap:6px; }
.customer-faq-modal-panel { width:min(760px,calc(100vw - 32px)); max-height:calc(100vh - 40px); overflow:auto; }
.customer-faq-form { display:grid; gap:18px; padding:22px 24px 12px; }
.customer-faq-form label { display:grid; gap:8px; color:#263449; font-weight:700; }
.customer-faq-form textarea { min-height:190px; resize:vertical; line-height:1.6; }
.customer-faq-form small { color:var(--muted); font-weight:400; }
.customer-faq-modal-actions { display:flex; justify-content:flex-end; gap:10px; padding:16px 24px 22px; border-top:1px solid var(--line); }
@media (max-width:760px) { .customer-faq-toolbar { grid-template-columns:1fr; } .customer-faq-pager { align-items:flex-start; flex-direction:column; gap:8px; } }

/* 商品价格列保持整列着色，不受斑马纹和行悬停背景覆盖 */
#products .product-table tbody tr > td.price-chain,
#products .product-table tbody tr:nth-child(even) > td.price-chain,
#products .product-table tbody tr:hover > td.price-chain {
  color: #6846d8;
  background: #fff;
}
#products .product-table tbody tr > td.price-core,
#products .product-table tbody tr:nth-child(even) > td.price-core,
#products .product-table tbody tr:hover > td.price-core {
  color: #0d887d;
  background: #eaf8f6;
}
#products .product-table tbody tr > td.price-agent,
#products .product-table tbody tr:nth-child(even) > td.price-agent,
#products .product-table tbody tr:hover > td.price-agent {
  color: #2d5fc9;
  background: #edf3ff;
}
#products .product-table tbody tr > td.price-retail,
#products .product-table tbody tr:nth-child(even) > td.price-retail,
#products .product-table tbody tr:hover > td.price-retail {
  color: #bd710b;
  background: #fff6e8;
}

.product-locked-text {
  display: inline-flex;
  min-height: 28px;
  align-items: center;
  color: #4f5b6e;
  font-weight: 680;
  white-space: nowrap;
}
/* Special delivery compact mode: keep the complete workflow visible in one screen. */
.special-delivery-modal-panel .special-delivery-head {
  min-height: 40px;
  padding: 5px 12px;
}
.special-delivery-modal-panel .modal-close-icon {
  width: 28px;
  height: 28px;
  font-size: 22px;
}
.special-delivery-modal-panel .special-delivery-order-info {
  margin-top: 7px;
}
.special-delivery-modal-panel .special-delivery-order-info > div {
  padding: 4px 7px;
}
.special-delivery-modal-panel .special-delivery-order-info small {
  margin-bottom: 1px;
  font-size: 9px;
}
.special-delivery-modal-panel .special-delivery-order-info strong {
  font-size: 11px;
}
.special-delivery-modal-panel .special-delivery-order-info button {
  width: 18px;
  height: 18px;
}
.special-delivery-modal-panel .special-delivery-order-info > div > span {
  grid-template-columns: minmax(0, 1fr) 18px;
}
.special-delivery-modal-panel .special-delivery-types {
  margin-top: 6px;
  margin-bottom: 8px;
}
.special-delivery-modal-panel .special-delivery-types button {
  min-height: 30px;
  height: 30px;
  padding: 0 7px;
  font-size: 12px;
}
.special-delivery-modal-panel .special-delivery-form-grid {
  gap: 6px 16px;
  padding-bottom: 8px;
}
.special-delivery-modal-panel .special-delivery-form-grid label,
.special-delivery-modal-panel .delivery-sign-grid label,
.special-delivery-modal-panel .special-delivery-remark {
  gap: 2px;
  font-size: 11px;
}
.special-delivery-modal-panel .special-delivery-form-grid input,
.special-delivery-modal-panel .special-delivery-form-grid select,
.special-delivery-modal-panel .delivery-sign-grid input {
  min-height: 30px;
  height: 30px;
  padding: 0 8px;
  font-size: 11px;
}
.special-delivery-modal-panel .delivery-tab-page:not(.hidden) {
  gap: 7px;
}
.special-delivery-modal-panel .delivery-proof-section,
.special-delivery-modal-panel .delivery-sign-section {
  padding: 8px;
}
.special-delivery-modal-panel .delivery-upload-row {
  gap: 8px;
  margin-top: 4px;
}
.special-delivery-modal-panel .delivery-upload-box,
.special-delivery-modal-panel .delivery-upload-box.compact {
  min-width: 130px;
  min-height: 62px;
  padding: 5px;
  font-size: 11px;
}
.special-delivery-modal-panel .delivery-upload-box span {
  font-size: 17px;
}
.special-delivery-modal-panel .delivery-upload-box small,
.special-delivery-modal-panel .delivery-upload-name {
  font-size: 9px;
}
.special-delivery-modal-panel .delivery-sign-grid {
  gap: 7px;
  margin-top: 4px;
}
.special-delivery-modal-panel .delivery-sign-grid > div {
  gap: 5px;
}
.special-delivery-modal-panel .delivery-upload-previews {
  min-height: 38px;
  margin-top: 4px;
  padding: 3px;
}
.special-delivery-modal-panel .delivery-thumb {
  flex-basis: 48px;
  width: 48px;
}
.special-delivery-modal-panel .delivery-thumb > img,
.special-delivery-modal-panel .delivery-pdf-thumb {
  width: 44px;
  height: 34px;
}
.special-delivery-modal-panel .delivery-thumb > small {
  width: 48px;
  font-size: 8px;
}
.special-delivery-modal-panel .special-delivery-remark {
  margin-top: 7px;
}
.special-delivery-modal-panel .special-delivery-remark textarea {
  min-height: 38px;
  height: 38px;
  padding: 6px 8px;
  font-size: 11px;
}
.special-delivery-modal-panel .logistics-import-actions {
  padding: 7px 18px 9px;
}
.special-delivery-modal-panel .logistics-import-actions button {
  height: 30px;
  padding: 0 12px;
  font-size: 11px;
}

/* Special delivery order summary: one-line, high-contrast information strip. */
.special-delivery-modal-panel .special-delivery-order-info {
  border-color: #c8d8f1;
  background: linear-gradient(90deg, #edf4ff 0%, #fff8e7 52%, #eef7ff 100%);
  box-shadow: 0 2px 8px rgb(44 83 145 / 8%);
}
.special-delivery-modal-panel .special-delivery-order-info > div {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 34px;
  border-right-color: #cfdbec;
}
.special-delivery-modal-panel .special-delivery-order-info small {
  display: inline;
  flex: 0 0 auto;
  margin: 0;
  color: #61728d;
  font-size: 10px;
  font-weight: 700;
  white-space: nowrap;
}
.special-delivery-modal-panel .special-delivery-order-info small::after {
  content: "：";
}
.special-delivery-modal-panel .special-delivery-order-info strong {
  display: inline;
  color: #17243a;
  font-size: 12px;
  font-weight: 800;
}
.special-delivery-modal-panel .special-delivery-order-info > div > span {
  flex: 1 1 auto;
  min-width: 0;
}
.special-delivery-modal-panel .special-delivery-head > div {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.special-delivery-modal-panel .special-delivery-head-customer {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
  padding-left: 10px;
  border-left: 1px solid #d8e0ed;
}
.special-delivery-modal-panel .special-delivery-head-customer small {
  flex: 0 0 auto;
  color: #687892;
  font-size: 10px;
  font-weight: 700;
}
.special-delivery-modal-panel .special-delivery-head-customer strong {
  max-width: 260px;
  overflow: hidden;
  color: #1f2d44;
  font-size: 12px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.special-delivery-modal-panel .special-delivery-head-customer button {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  padding: 0;
  color: #526a91;
  border: 1px solid #ced9ea;
  border-radius: 5px;
  background: #fff;
  font-size: 10px;
}
.special-delivery-modal-panel .special-delivery-order-info {
  grid-template-columns:
    minmax(90px, .7fr)
    minmax(145px, 1.1fr)
    70px
    minmax(110px, .8fr)
    minmax(155px, 1.1fr)
    minmax(430px, 3.2fr);
}
.special-delivery-modal-panel .special-delivery-order-info .address strong {
  overflow: visible;
  line-height: 1.35;
  text-overflow: clip;
  white-space: normal;
}
.special-delivery-modal-panel .special-delivery-order-info .address > span {
  align-items: center;
}

/* Read-only special-delivery details use a focused half-width dialog. */
#specialDeliveryViewModal .special-delivery-view-panel {
  width: min(420px, calc(100vw - 24px));
  max-height: calc(100vh - 36px);
  overflow-y: auto;
}
#specialDeliveryViewModal .special-delivery-view-summary,
#specialDeliveryViewModal .special-delivery-view-details {
  grid-template-columns: 1fr;
}
#specialDeliveryViewModal .special-delivery-view-summary {
  gap: 8px;
  padding: 12px 14px;
}
#specialDeliveryViewModal .special-delivery-view-details {
  gap: 8px;
  padding: 12px 14px;
}
#specialDeliveryViewModal .special-delivery-view-tip {
  margin: 0 14px;
}

/* Balanced read-only delivery card: compact, scannable, and attachment-aware. */
#specialDeliveryViewModal .special-delivery-view-panel {
  width: min(600px, calc(100vw - 24px));
}
#specialDeliveryViewModal .special-delivery-view-summary {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  padding: 12px 14px;
  background: linear-gradient(90deg, #f4f7ff, #f8fbff);
}
#specialDeliveryViewModal .special-delivery-view-summary span {
  gap: 4px;
  padding: 8px 10px;
  border: 1px solid #dce5f3;
  border-radius: 8px;
  background: #fff;
}
#specialDeliveryViewModal .special-delivery-view-summary strong {
  width: fit-content;
  padding: 3px 8px;
  color: #2858c9;
  border-radius: 999px;
  background: #eaf0ff;
  font-size: 13px;
}
#specialDeliveryViewModal #specialDeliveryViewStatus[data-status="已发货"],
#specialDeliveryViewModal #specialDeliveryViewStatus[data-status="已签收"],
#specialDeliveryViewModal #specialDeliveryViewStatus[data-status="已完成"] {
  color: #078451;
  background: #e5f7ef;
}
#specialDeliveryViewModal .special-delivery-view-details {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  padding: 12px 14px;
}
#specialDeliveryViewModal .special-delivery-view-details > div {
  padding: 9px 11px;
  background: #fbfcff;
}
#specialDeliveryViewModal .special-delivery-view-details small {
  margin-bottom: 3px;
  font-size: 11px;
}
#specialDeliveryViewModal .special-delivery-view-details strong {
  font-size: 13px;
  line-height: 1.45;
}
#specialDeliveryViewModal .special-delivery-view-wide {
  grid-column: 1 / -1;
}
#specialDeliveryViewModal .special-delivery-view-attachments {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
#specialDeliveryViewModal .special-delivery-view-attachments section {
  min-width: 0;
}
#specialDeliveryViewModal .special-delivery-view-attachments section > div {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  min-height: 42px;
  padding-top: 4px;
}
#specialDeliveryViewModal .special-delivery-view-file-empty,
#specialDeliveryViewModal .special-delivery-view-file-missing {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 7px 9px;
  color: #8491a6;
  border: 1px dashed #d7dfeb;
  border-radius: 7px;
  background: #f8fafc;
  font-size: 10px;
  line-height: 1.4;
}
#specialDeliveryViewModal .special-delivery-view-file-missing {
  color: #a46313;
  border-color: #efd39c;
  background: #fff8e9;
}
#specialDeliveryViewModal .special-delivery-view-tip {
  margin: 0 14px;
  padding: 8px 10px;
  font-size: 11px;
  line-height: 1.4;
}
#specialDeliveryViewModal .logistics-import-actions {
  justify-content: center;
  padding: 10px 14px 12px;
}
@media (max-width: 560px) {
  #specialDeliveryViewModal .special-delivery-view-summary,
  #specialDeliveryViewModal .special-delivery-view-details,
  #specialDeliveryViewModal .special-delivery-view-attachments {
    grid-template-columns: 1fr;
  }
}

/* Compact special-delivery editor with a full-width address row. */
#specialDeliveryModal .special-delivery-modal-panel {
  width: min(820px, calc(100vw - 24px));
  max-height: calc(100vh - 24px);
}
#specialDeliveryModal .special-delivery-order-info {
  grid-template-columns:
    minmax(85px, .7fr)
    minmax(130px, 1fr)
    60px
    minmax(90px, .8fr)
    minmax(150px, 1.1fr);
}
#specialDeliveryModal .special-delivery-order-info .address {
  grid-column: 1 / -1;
  border-top: 1px solid #cfdbec;
  border-right: 0;
}
#specialDeliveryModal .special-delivery-order-info .address strong {
  white-space: normal;
}
@media (max-width: 720px) {
  #specialDeliveryModal .special-delivery-order-info {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  #specialDeliveryModal .special-delivery-order-info .qty {
    grid-column: auto;
  }
  #specialDeliveryModal .special-delivery-order-info .address {
    grid-column: 1 / -1;
  }
}
.product-search-settings-panel textarea {
  width: 100%;
  min-height: 150px;
  box-sizing: border-box;
  resize: vertical;
  line-height: 1.7;
}

.product-search-settings-help {
  margin-top: 8px;
  color: var(--muted, #6b7280);
  font-size: 12px;
}

.product-title-field {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 26px;
  align-items: center;
  gap: 4px;
}

.product-title-field .product-cell-input {
  min-width: 0;
}

.product-title-magic {
  display: grid;
  width: 24px;
  height: 24px;
  padding: 0;
  place-items: center;
  border: 1px solid #cbd5ff;
  border-radius: 7px;
  background: #f4f6ff;
  color: #4561dc;
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
}

.product-title-magic:hover:not(:disabled) {
  border-color: #8094ed;
  background: #e9edff;
  transform: translateY(-1px);
}

.product-title-magic:disabled {
  cursor: not-allowed;
  opacity: .42;
}

.product-batch-title-button {
  border-color: #bdc9ff !important;
  color: #405bd2 !important;
  background: #f5f7ff !important;
}

.product-batch-title-button:disabled {
  opacity: .68;
}

.product-title-preview {
  position: fixed;
  z-index: 1200;
  inset: 0;
  display: grid;
  padding: 24px;
  place-items: center;
  background: rgba(18, 27, 49, .42);
  backdrop-filter: blur(2px);
}

.product-title-preview.hidden {
  display: none;
}

.product-title-preview-dialog {
  width: min(920px, calc(100vw - 32px));
  max-height: calc(100vh - 48px);
  overflow: hidden;
  border: 1px solid #dfe5f0;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 24px 70px rgba(31, 43, 78, .24);
}

.product-title-preview-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  padding: 18px 20px;
  border-bottom: 1px solid #e6ebf3;
}

.product-title-preview-head h2 {
  margin: 0 0 5px;
  font-size: 19px;
}

.product-title-preview-head p,
.product-title-preview-note {
  margin: 0;
  color: #657087;
  font-size: 13px;
}

.product-title-preview-table-wrap {
  max-height: min(55vh, 520px);
  overflow: auto;
}

.product-title-preview-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.product-title-preview-table th,
.product-title-preview-table td {
  padding: 10px 12px;
  border-bottom: 1px solid #e9edf4;
  text-align: left;
}

.product-title-preview-table th {
  position: sticky;
  z-index: 1;
  top: 0;
  background: #f7f9fc;
  color: #566278;
}

.product-title-preview-table th:nth-child(1) { width: 90px; }
.product-title-preview-table th:nth-child(2) { width: 220px; }
.product-title-preview-table th:nth-child(4) { width: 76px; }
.product-title-preview-table th:nth-child(5) { width: 64px; text-align: center; }
.product-title-preview-table td:nth-child(2) {
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.product-title-preview-table td:nth-child(5) { text-align: center; }

.product-title-preview-table input[type="text"],
.product-title-preview-table input:not([type]) {
  width: 100%;
  box-sizing: border-box;
}

.product-title-preview-table td > input[data-product-title-index] {
  width: 100%;
  min-width: 260px;
  box-sizing: border-box;
  padding: 8px 10px;
  border: 1px solid #ccd5e5;
  border-radius: 7px;
}

.product-title-preview-table tr.invalid {
  background: #fff7f6;
}

.product-title-count {
  color: #5f6c82;
  font-variant-numeric: tabular-nums;
}

.product-title-count.over {
  color: #d43f3a;
  font-weight: 750;
}

.product-title-preview-note {
  padding: 12px 20px 0;
}

.product-title-preview-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 16px 20px 20px;
}

.payment-ocr-panel {
  grid-column: 1 / -1;
  padding: 14px;
  border: 1px solid #c9d8f2;
  border-radius: 10px;
  background: #f7faff;
}
.payment-ocr-head { display: flex; justify-content: space-between; gap: 12px; }
.payment-ocr-head span, .payment-ocr-panel > small { color: #6c7890; }
.payment-ocr-fields { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; margin: 12px 0; }
.payment-ocr-fields span { padding: 9px; border-radius: 8px; background: white; }
.payment-ocr-fields i { display: block; color: #778196; font-size: 12px; font-style: normal; }
.payment-ocr-fields b { display: block; margin-top: 4px; overflow-wrap: anywhere; }
.payment-ocr-risks div { margin: 5px 0; padding: 8px 10px; border-radius: 7px; }
.payment-ocr-risks .success { color: #147a48; background: #eaf8f1; }
.payment-ocr-risks .warning { color: #9a6400; background: #fff6dc; }
.payment-ocr-risks .danger { color: #b42318; background: #ffebe9; font-weight: 700; }
@media (max-width: 900px) { .payment-ocr-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Use the available browser width while keeping a small safe edge. */
.customer-portal .main {
  width: calc(100vw - 32px);
  max-width: none;
  margin: 0 16px;
  padding-top: 0;
}
@media (max-width: 900px) {
  .customer-portal .main { width: calc(100vw - 20px); margin: 0 10px; }
}

/* Compact order-query controls: tabs, search and selection rows. */
#customer .customer-portal-tabs-row {
  min-height: 44px;
  margin-bottom: 6px;
}
#customer .portal-tabs {
  padding: 3px;
}
#customer .portal-tab {
  min-height: 36px;
  padding-top: 7px;
  padding-bottom: 7px;
}

/* 客户查单端 · 过单管理：与国铁选品同级，留在当前页面内切换。 */
#customer .customer-railway-management-view {
  min-width: 0;
}
#customer .customer-railway-management {
  padding: 18px;
  overflow: hidden;
}
#customer .customer-railway-management-head,
#customer .customer-railway-management-toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
}
#customer .customer-railway-management-head {
  justify-content: space-between;
  margin-bottom: 14px;
}
#customer .customer-railway-management-head > div:first-child {
  display: grid;
  gap: 3px;
}
#customer .customer-railway-management-head strong {
  color: #12213a;
  font-size: 22px;
}
#customer .customer-railway-management-head span {
  color: #7b8799;
}
#customer .customer-railway-management-stats {
  display: flex;
  gap: 8px;
}
#customer .customer-railway-management-stats span {
  min-width: 104px;
  padding: 10px 14px;
  border: 1px solid #d8e0ec;
  border-radius: 10px;
  background: #f8fafc;
  color: #64748b;
  white-space: nowrap;
}
#customer .customer-railway-management-stats b {
  margin-left: 8px;
  color: #163b73;
  font-size: 18px;
}
#customer .customer-railway-management-toolbar {
  margin-bottom: 14px;
}
#customer .customer-railway-management-toolbar input {
  flex: 1;
  min-width: 220px;
}
#customer .customer-railway-management-toolbar select {
  width: 180px;
}
#customer .customer-railway-management-table-wrap {
  width: 100%;
  overflow: auto;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
}
#customer .customer-railway-management-table {
  width: 100%;
  min-width: 1260px;
  border-collapse: collapse;
}
#customer .customer-railway-management-table th,
#customer .customer-railway-management-table td {
  padding: 13px 14px;
  border-bottom: 1px solid #e8edf4;
  text-align: left;
  white-space: nowrap;
}
#customer .customer-railway-management-table th {
  background: #f5f7fb;
  color: #5f6c80;
  font-weight: 700;
}
#customer .customer-railway-management-table td:nth-child(3) {
  max-width: 260px;
  overflow: hidden;
  text-overflow: ellipsis;
}
#customer .customer-railway-report-money {
  color: #0d765e;
  font-weight: 800;
}
#customer .customer-railway-report-stage,
#customer .customer-railway-report-status {
  display: inline-flex;
  padding: 5px 10px;
  border-radius: 999px;
  background: #edf3ff;
  color: #285ab4;
}
#customer .customer-railway-report-status.status-done {
  background: #e8f8ef;
  color: #168054;
}
#customer .customer-railway-report-status.status-cancelled {
  background: #fff0ef;
  color: #c7463f;
}
#customer .customer-railway-management-empty {
  height: 180px;
  color: #8793a6;
  text-align: center !important;
}
#customerOrdersView .customer-search {
  margin-top: 0;
  margin-bottom: 2px;
  padding: 8px 12px;
}
#customerOrdersView .portal-field {
  margin: 0;
}
#customerOrdersView .customer-result-bar {
  min-height: 36px;
  margin-top: 3px;
  margin-bottom: 4px;
}

/* 2026-07-27 · B 版统一抬头：深海军蓝结构边
 * 管理端各业务页与客户双业务顶部共用同一套边框、内高光和阴影语言。
 */
:root {
  --header-navy-950: #07172e;
  --header-navy-900: #0d2345;
  --header-navy-800: #163763;
  --header-teal-600: #0b8c86;
  --header-border: #b8c7dc;
  --header-inner: rgba(35, 67, 113, .09);
  --header-shadow-tight: rgba(7, 23, 46, .13);
  --header-shadow-soft: rgba(38, 73, 126, .12);
}

body:not(.customer-portal):not(.supplier-portal)
  .view:not(#customer):not(#supplierPortal) > .topbar {
  position: relative;
  isolation: isolate;
  align-items: center;
  width: auto;
  min-height: 88px;
  margin: 14px 30px 16px;
  padding: 17px 20px 17px 27px;
  overflow: visible;
  border: 1px solid var(--header-border);
  border-radius: 14px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.98), rgba(248,251,255,.98));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.98),
    inset 0 -1px 0 rgba(35,67,113,.04),
    0 3px 7px var(--header-shadow-tight),
    0 15px 34px var(--header-shadow-soft);
}

body:not(.customer-portal):not(.supplier-portal)
  .view:not(#customer):not(#supplierPortal) > .topbar::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: -1px;
  bottom: -1px;
  left: -1px;
  width: 8px;
  border-radius: 14px 0 0 14px;
  background:
    linear-gradient(180deg,
      var(--header-navy-950) 0%,
      var(--header-navy-800) 68%,
      var(--header-teal-600) 100%);
  box-shadow:
    2px 0 0 rgba(255,255,255,.72),
    5px 0 13px rgba(15,52,91,.13);
}

body:not(.customer-portal):not(.supplier-portal)
  .view:not(#customer):not(#supplierPortal) > .topbar::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 5px;
  border: 1px solid var(--header-inner);
  border-radius: 10px;
  pointer-events: none;
}

body:not(.customer-portal):not(.supplier-portal)
  .view:not(#customer):not(#supplierPortal) > .topbar h1 {
  color: var(--header-navy-900);
  font-size: 22px;
  font-weight: 780;
  letter-spacing: -.02em;
}

body:not(.customer-portal):not(.supplier-portal)
  .view:not(#customer):not(#supplierPortal) > .topbar p {
  color: #66758b;
}

body:not(.customer-portal):not(.supplier-portal)
  .view:not(#customer):not(#supplierPortal) > .topbar .primary {
  border-color: #173b77;
  background: linear-gradient(135deg, #1d4c9e 0%, #102a5c 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.18),
    0 5px 13px rgba(16,42,92,.22);
}

body:not(.customer-portal):not(.supplier-portal)
  .view:not(#customer):not(#supplierPortal) > .topbar .primary:hover {
  background: linear-gradient(135deg, #2861bd 0%, #153871 70%, #0b7775 130%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.22),
    0 8px 18px rgba(16,42,92,.28);
  transform: translateY(-1px);
}

body:not(.customer-portal):not(.supplier-portal)
  .view:not(#customer):not(#supplierPortal) > .topbar .ghost {
  border-color: #c6d1e1;
  background: linear-gradient(180deg, #fff, #f5f8fc);
  color: #31455f;
  box-shadow: inset 0 1px 0 #fff, 0 2px 5px rgba(20,43,77,.06);
}

body:not(.customer-portal):not(.supplier-portal)
  .view:not(#customer):not(#supplierPortal) > .topbar .ghost:hover {
  border-color: #718cb5;
  background: linear-gradient(135deg, #eef4ff, #e7f5f4);
  color: var(--header-navy-800);
}

/* 客户端订单查询 / 国铁过单共用顶部：保留原功能网格，只统一 B 版材质。 */
.customer-portal .customer-unified-header {
  position: relative;
  isolation: isolate;
  flex: 0 0 auto;
  min-height: 76px;
  margin: 12px 0 16px;
  padding: 10px 16px 10px 24px;
  border: 1px solid var(--header-border);
  border-radius: 14px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.99), rgba(248,251,255,.98));
  box-shadow:
    inset 0 1px 0 #fff,
    inset 0 -1px 0 rgba(35,67,113,.04),
    0 3px 7px var(--header-shadow-tight),
    0 15px 34px var(--header-shadow-soft);
}

.customer-portal .customer-unified-header::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: -1px;
  bottom: -1px;
  left: -1px;
  width: 8px;
  border-radius: 14px 0 0 14px;
  background:
    linear-gradient(180deg,
      var(--header-navy-950),
      var(--header-navy-800) 68%,
      var(--header-teal-600));
  box-shadow: 2px 0 0 rgba(255,255,255,.72), 5px 0 13px rgba(15,52,91,.13);
}

.customer-portal .customer-unified-header::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 5px;
  border: 1px solid var(--header-inner);
  border-radius: 10px;
  pointer-events: none;
}

.customer-portal .customer-unified-brand > span {
  background: linear-gradient(145deg, var(--header-navy-800), var(--header-teal-600));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.24), 0 5px 12px rgba(10,63,91,.2);
}

.customer-portal .customer-business-switch {
  border-color: #aebed4;
  box-shadow: inset 0 1px 0 #fff, 0 3px 9px rgba(15,43,82,.1);
}

.customer-portal .customer-unified-header .customer-business-switch button.active {
  background: linear-gradient(135deg, var(--header-navy-900), #214985 72%, #176e73 140%);
}

.customer-portal .customer-unified-header .customer-business-switch button.active:hover {
  background: linear-gradient(135deg, #173662, #28629d 68%, #0b8c86 125%);
}

.customer-portal .customer-unified-account #customerLogoutBtn {
  border-color: #b9c7da;
  background: linear-gradient(180deg, #fff, #f4f7fb);
  color: #2b405d;
  box-shadow: inset 0 1px 0 #fff, 0 2px 6px rgba(15,43,82,.08);
}

@media (max-width: 900px) {
  body:not(.customer-portal):not(.supplier-portal)
    .view:not(#customer):not(#supplierPortal) > .topbar {
    min-height: 0;
    margin: 10px 14px 12px;
    padding: 15px 15px 15px 22px;
  }

  .customer-portal .customer-unified-header {
    margin-top: 8px;
    padding: 10px 12px 10px 20px;
  }
}

/* 每日看板：经营数据并入 B 版页头，沿用原统计节点与刷新逻辑。 */
#dashboard > .topbar {
  display: grid;
  grid-template-columns: minmax(270px, 1.35fr) minmax(500px, 1.8fr) auto;
  align-items: center;
  column-gap: 24px;
}

#dashboard .dashboard-header-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(88px, 1fr));
  align-items: stretch;
  min-width: 0;
}

#dashboard .dashboard-header-metrics > div {
  display: grid;
  grid-template-columns: auto auto;
  align-content: center;
  align-items: baseline;
  min-width: 0;
  padding: 1px 20px;
  border-left: 1px solid #d5dfed;
}

#dashboard .dashboard-header-metrics span {
  grid-column: 1 / -1;
  margin-bottom: 4px;
  color: #6c7c92;
  font-size: 12px;
  font-weight: 650;
  white-space: nowrap;
}

#dashboard .dashboard-header-metrics strong {
  color: var(--header-navy-900);
  font-size: 24px;
  font-weight: 780;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

#dashboard .dashboard-header-metrics em {
  margin-left: 4px;
  color: #718096;
  font-size: 11px;
  font-style: normal;
}

#dashboard > .topbar > #refreshDashboard {
  align-self: center;
}

@media (max-width: 1180px) {
  #dashboard > .topbar {
    grid-template-columns: minmax(220px, 1fr) minmax(420px, 1.6fr) auto;
    column-gap: 14px;
  }

  #dashboard .dashboard-header-metrics > div {
    padding-right: 12px;
    padding-left: 12px;
  }
}

@media (max-width: 900px) {
  #dashboard > .topbar {
    grid-template-columns: 1fr auto;
  }

  #dashboard .dashboard-header-metrics {
    grid-column: 1 / -1;
    grid-row: 2;
    margin-top: 10px;
  }

  #dashboard .dashboard-header-metrics > div:first-child {
    border-left: 0;
  }
}

/* 订单录入、订单管理、财务管理、资金管理：概览数据统一并入 B 版抬头。 */
#entry > .topbar,
#statistics > .topbar {
  display: grid;
  grid-template-columns: minmax(360px, 1.3fr) minmax(560px, 1.8fr);
  align-items: center;
  column-gap: 28px;
}

#funds > .topbar {
  display: grid;
  grid-template-columns: minmax(360px, 1.25fr) minmax(560px, 1.8fr) auto;
  align-items: center;
  column-gap: 24px;
}

#orders > .topbar {
  display: grid;
  grid-template-columns: minmax(360px, 1.15fr) minmax(470px, 1.35fr) minmax(480px, 1.5fr);
  align-items: center;
  column-gap: 18px;
}

.integrated-header-context {
  display: none;
}

.integrated-header-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(92px, 1fr));
  align-items: stretch;
  min-width: 0;
}

.integrated-header-metrics > span {
  display: grid;
  grid-template-columns: auto auto;
  align-content: center;
  align-items: baseline;
  min-width: 0;
  padding: 1px 18px;
  border-left: 1px solid #d5dfed;
}

.integrated-header-metrics small {
  grid-column: 1 / -1;
  margin-bottom: 4px;
  color: #6c7c92;
  font-size: 12px;
  font-weight: 650;
  white-space: nowrap;
}

.integrated-header-metrics b {
  color: var(--header-navy-900);
  font-size: 24px;
  font-weight: 780;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.integrated-header-metrics em {
  margin-left: 4px;
  color: #718096;
  font-size: 11px;
  font-style: normal;
  white-space: nowrap;
}

#orders > .topbar .top-actions {
  display: grid;
  grid-template-columns: repeat(4, minmax(104px, 1fr));
  align-self: center;
  gap: 7px;
  min-width: 0;
}

#orders > .topbar .top-actions > button {
  justify-content: center;
  min-width: 0;
  min-height: 34px;
  padding: 7px 9px;
  white-space: nowrap;
}

#orders > .topbar .orders-select-all-btn {
  grid-column: auto;
}

#funds > .topbar > #refreshFundsBtn {
  align-self: center;
}

@media (max-width: 1500px) {
  #orders > .topbar {
    grid-template-columns: minmax(300px, .95fr) minmax(410px, 1.15fr) minmax(430px, 1.35fr);
    column-gap: 12px;
  }

  #orders .integrated-header-metrics > span {
    padding-right: 11px;
    padding-left: 11px;
  }

  #orders > .topbar .top-actions {
    grid-template-columns: repeat(3, minmax(108px, 1fr));
  }
}

@media (max-width: 1180px) {
  #entry > .topbar,
  #statistics > .topbar,
  #funds > .topbar {
    grid-template-columns: minmax(260px, 1fr) minmax(430px, 1.6fr) auto;
    column-gap: 14px;
  }

  #entry > .topbar,
  #statistics > .topbar {
    grid-template-columns: minmax(260px, 1fr) minmax(430px, 1.6fr);
  }

  #orders > .topbar {
    grid-template-columns: minmax(260px, .9fr) minmax(390px, 1.2fr);
  }

  #orders > .topbar .top-actions {
    grid-column: 1 / -1;
    grid-template-columns: repeat(7, minmax(100px, 1fr));
  }

  .integrated-header-metrics > span {
    padding-right: 11px;
    padding-left: 11px;
  }
}

@media (max-width: 900px) {
  #entry > .topbar,
  #statistics > .topbar,
  #funds > .topbar,
  #orders > .topbar {
    grid-template-columns: 1fr auto;
  }

  #entry .integrated-header-metrics,
  #statistics .integrated-header-metrics,
  #funds .integrated-header-metrics,
  #orders .integrated-header-metrics {
    grid-column: 1 / -1;
    grid-row: 2;
    margin-top: 10px;
  }

  #orders > .topbar .top-actions {
    grid-column: 1 / -1;
    grid-row: 3;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: 10px;
  }

  .integrated-header-metrics > span:first-child {
    border-left: 0;
  }
}

/* 全系统宽度修复：提前进入紧凑布局，避免中等桌面宽度出现页面级横向溢出。 */
@media (max-width: 1500px) {
  #orders > .topbar {
    grid-template-columns: minmax(300px, .9fr) minmax(500px, 1.5fr);
  }

  #orders > .topbar .top-actions {
    grid-column: 1 / -1;
    grid-row: 2;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    width: 100%;
  }
}

@media (max-width: 1280px) {
  #dashboard > .topbar,
  #funds > .topbar {
    grid-template-columns: 1fr auto;
  }

  #entry > .topbar,
  #statistics > .topbar {
    grid-template-columns: 1fr;
  }

  #dashboard .dashboard-header-metrics,
  #entry .integrated-header-metrics,
  #statistics .integrated-header-metrics,
  #funds .integrated-header-metrics {
    grid-column: 1 / -1;
    grid-row: 2;
    width: 100%;
    margin-top: 8px;
  }

  #dashboard .dashboard-header-metrics > div:first-child,
  #entry .integrated-header-metrics > span:first-child,
  #statistics .integrated-header-metrics > span:first-child,
  #funds .integrated-header-metrics > span:first-child {
    border-left: 0;
  }

  #orders > .topbar {
    grid-template-columns: 1fr;
  }

  #orders .orders-integrated-metrics {
    grid-column: 1;
    grid-row: 2;
    width: 100%;
    margin-top: 6px;
  }

  #orders .orders-integrated-metrics > span:first-child {
    border-left: 0;
  }

  #orders > .topbar .top-actions {
    grid-column: 1;
    grid-row: 3;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin-top: 6px;
  }
}

/* 客户端中间宽度：指标提前换到第二行，长主体名称不再撑宽顶部。 */
@media (max-width: 1450px) and (min-width: 901px) {
  .customer-portal .customer-unified-header {
    grid-template-columns: auto minmax(280px, 1fr) auto;
    gap: 12px 22px;
  }

  .customer-portal .customer-unified-header .customer-business-switch {
    justify-self: start;
  }

  .customer-portal .customer-header-metrics {
    grid-column: 1 / -1;
    grid-row: 2;
    width: 100%;
    max-width: none;
    margin: 0;
  }

  .customer-portal .customer-header-metrics .login-finance:first-child {
    padding-left: 0;
    border-left: 0;
  }

  .customer-portal .customer-unified-account {
    max-width: 360px;
  }
}

.customer-unified-account,
.customer-unified-account > div,
.customer-account-name {
  min-width: 0;
}

.customer-unified-account .login-company {
  display: block;
  max-width: min(310px, 24vw);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 宽表格继续在自身容器内滚动，禁止被静默裁掉。 */
#funds .finance-ledger-wrap {
  overflow-x: auto;
}

/* 实际内容区会被侧栏占用：订单管理和项目报备不再依赖浏览器总宽度硬塞一行。 */
@media (max-width: 1800px) {
  #orders > .topbar {
    grid-template-columns: minmax(300px, .9fr) minmax(480px, 1.35fr);
  }

  #orders > .topbar .top-actions {
    grid-column: 1 / -1;
    grid-row: 2;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    width: 100%;
  }

  #orders > .topbar .top-actions > button {
    width: 100%;
    max-width: none;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .project-report-topbar {
    display: grid;
    grid-template-columns: 1fr;
    align-items: start;
  }

  .project-report-top-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr) repeat(4, auto);
    width: 100%;
    min-width: 0;
    overflow: visible;
  }

  .project-report-stats {
    min-width: 0;
  }
}

@media (max-width: 1320px) {
  #orders > .topbar {
    grid-template-columns: 1fr;
  }

  #orders .orders-integrated-metrics {
    grid-column: 1;
    grid-row: 2;
  }

  #orders > .topbar .top-actions {
    grid-column: 1;
    grid-row: 3;
  }

  .project-report-top-actions {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .project-report-stats {
    grid-column: 1 / -1;
    width: 100%;
  }

  .project-report-top-actions > button {
    width: 100%;
    min-width: 0;
  }
}

@media (max-width: 760px) {
  #orders > .topbar .top-actions,
  .project-report-top-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

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

/* 宽桌面保持单行：标题、统计和操作按信息密度重新分配位置。 */
@media (min-width: 1501px) {
  #orders > .topbar {
    grid-template-columns: minmax(260px, 22fr) minmax(420px, 36fr) minmax(0, 42fr);
    column-gap: 18px;
  }

  #orders .orders-integrated-metrics {
    grid-column: 2;
    grid-row: 1;
    margin-top: 0;
  }

  #orders > .topbar .top-actions {
    display: grid;
    grid-column: 3;
    grid-row: 1;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 7px;
    width: 100%;
    margin-top: 0;
  }

  #orders > .topbar .top-actions > button {
    min-height: 36px;
    padding: 7px 8px;
    font-size: 12px;
    letter-spacing: 0;
  }

  .project-report-topbar {
    display: grid;
    grid-template-columns: minmax(230px, .7fr) minmax(900px, 2.3fr);
    align-items: center;
    column-gap: 22px;
  }

  .project-report-top-actions {
    display: grid;
    grid-template-columns: minmax(430px, 1fr) repeat(4, auto);
    align-items: center;
    gap: 7px;
    width: 100%;
  }

  .project-report-stats {
    grid-template-columns: repeat(5, minmax(78px, 1fr));
    gap: 6px;
    width: 100%;
  }

  .project-report-stats button {
    width: 100%;
    min-width: 0;
    height: 46px;
    padding: 6px 8px;
  }

  .project-report-top-actions > button {
    min-height: 38px;
    padding-right: 12px;
    padding-left: 12px;
    white-space: nowrap;
  }
}

/* 客户问答：白灰高对比展示区 */
#customerFaqs .customer-faq-summary {
  min-height: 38px;
  color: #666;
}

#customerFaqs .customer-faq-summary strong {
  color: #171717;
}

#customerFaqs .customer-faq-summary i {
  background: #d8d8d5;
}

#customerFaqs .customer-faq-panel {
  border: 1px solid #d8d8d4;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 8px 22px rgba(24, 24, 22, .06);
}

#customerFaqs .customer-faq-toolbar {
  grid-template-columns: minmax(260px, 1fr) auto;
  gap: 10px;
  padding: 12px 14px;
  border-bottom: 1px solid #dededb;
  background: #fff;
}

#customerFaqs .customer-faq-toolbar input {
  height: 38px;
  border-color: #d7d7d3;
  background: #fafaf8;
  color: #242424;
  box-shadow: none;
}

#customerFaqs .customer-faq-toolbar input:focus {
  border-color: #7f7f7a;
  background: #fff;
  box-shadow: 0 0 0 3px rgba(32, 32, 30, .08);
}

#customerFaqs .customer-faq-toolbar .primary,
#customerFaqs .customer-faq-pager .primary {
  border-color: #222;
  background: #222;
  color: #fff;
  box-shadow: 0 4px 10px rgba(0, 0, 0, .12);
}

#customerFaqs .customer-faq-table-wrap {
  min-height: 420px;
  max-height: 58vh;
  overflow: auto;
  background: #fff;
  scrollbar-width: thin;
  scrollbar-color: #999995 #e8e8e5;
}

#customerFaqs .customer-faq-table-wrap::-webkit-scrollbar {
  width: 7px;
  height: 7px;
}

#customerFaqs .customer-faq-table-wrap::-webkit-scrollbar-track {
  background: #e8e8e5;
}

#customerFaqs .customer-faq-table-wrap::-webkit-scrollbar-thumb {
  border: 1px solid #e8e8e5;
  border-radius: 999px;
  background: #999995;
}

#customerFaqs .customer-faq-table {
  min-width: 980px;
}

#customerFaqs .customer-faq-table th,
#customerFaqs .customer-faq-table td {
  padding: 12px 14px;
  border-bottom: 1px solid #e3e3e0;
  color: #282826;
}

#customerFaqs .customer-faq-table th {
  background: #f0f0ed;
  color: #252523;
  box-shadow: inset 0 -1px 0 #d2d2ce;
}

#customerFaqs .customer-faq-table tbody tr:nth-child(even) {
  background: #f7f7f5;
}

#customerFaqs .customer-faq-table tbody tr:hover {
  background: #ececea;
}

#customerFaqs .customer-faq-answer {
  color: #555552;
}

#customerFaqs .customer-faq-category {
  border: 1px solid #d9ded5;
  background: #f0f3ed;
  color: #53604f;
}

#customerFaqs .customer-faq-actions .ghost {
  min-height: 32px;
  border-color: #d2d2ce;
  background: #fff;
  color: #343432;
  box-shadow: none;
}

#customerFaqs .customer-faq-actions .ghost:hover {
  border-color: #777773;
  background: #f0f0ed;
  color: #171717;
}

#customerFaqs .customer-faq-pager {
  min-height: 48px;
  padding: 7px 14px;
  border-top: 1px solid #d8d8d4;
  background: #fff;
  color: #666;
}

#customerFaqs .customer-faq-pager .ghost {
  border-color: #d2d2ce;
  background: #fff;
  color: #3d3d3a;
  box-shadow: none;
}

#customerFaqs .customer-faq-pager button:disabled {
  color: #aaa;
  background: #f7f7f5;
  opacity: 1;
}

/* 订单录入：批量导入区始终收在面板内部 */
#entry .entry-input-panel,
#entry .entry-input-panel .archive-select-row,
#entry .entry-import-inline {
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

#entry .entry-input-panel .archive-select-row {
  grid-template-columns:
    minmax(210px, 280px)
    minmax(210px, 280px);
  justify-content: start;
}

#entry .entry-import-inline {
  grid-column: 1 / -1;
  grid-template-columns: clamp(210px, 24vw, 330px) auto auto;
  justify-content: start;
  overflow: hidden;
}

#entry .entry-import-inline input[type="file"] {
  max-width: 100%;
}

#entry .entry-import-inline .entry-template-download,
#entry .entry-import-inline #importBtn {
  flex: 0 0 auto;
  min-width: 0;
  white-space: nowrap;
}

#entry .entry-parse-row {
  grid-template-columns: minmax(420px, 760px) auto;
  justify-content: start;
  width: 100%;
}

#entry .entry-parse-row #rawInput {
  width: 100%;
}

#entry .entry-inline-actions {
  justify-content: flex-start;
}

@media (max-width: 1400px) {
  #entry .entry-input-panel .archive-select-row {
    grid-template-columns: repeat(2, minmax(210px, 280px));
    justify-content: start;
  }

  #entry .entry-import-inline {
    grid-column: 1 / -1;
    grid-template-columns: clamp(210px, 34vw, 330px) auto auto;
    justify-content: start;
  }

  #entry .entry-parse-row {
    grid-template-columns: minmax(360px, 68vw) auto;
  }
}

@media (max-width: 760px) {
  #entry .entry-input-panel .archive-select-row,
  #entry .entry-import-inline {
    grid-template-columns: 1fr;
  }

  #entry .entry-parse-row {
    grid-template-columns: 1fr;
  }

  #entry .entry-import-inline .entry-template-download,
  #entry .entry-import-inline #importBtn {
    width: 100%;
  }
}

#orders .orders-integrated-metrics > span {
  padding-right: 12px;
  padding-left: 12px;
}

#orders .orders-integrated-metrics small {
  font-size: 10px;
}

#orders .orders-integrated-metrics b {
  font-size: 17px;
}

#orders .orders-integrated-metrics em {
  font-size: 9px;
}

#orders .orders-lockbar-select-all {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: 72px;
  min-width: 72px;
  height: 31px;
  min-height: 31px;
  padding: 0 9px;
  border-color: #c8d3e3;
  border-radius: 8px;
  background: #fff;
  font-size: 11px;
  white-space: nowrap;
}

@media (min-width: 761px) {
  #orders > .topbar .top-actions {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* 订单筛选与物流工具台：B 版深海军蓝结构边。 */
#orders .orders-control-panel {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border: 1px solid var(--header-border);
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(255,255,255,.99), rgba(248,251,255,.98));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.98),
    inset 0 -1px 0 rgba(35,67,113,.04),
    0 3px 7px var(--header-shadow-tight),
    0 13px 30px rgba(38,73,126,.10);
}

#orders .orders-control-panel::before {
  display: none;
}

#orders .orders-control-panel::after {
  content: "";
  position: absolute;
  z-index: 3;
  inset: 5px;
  border: 1px solid var(--header-inner);
  border-radius: 10px;
  pointer-events: none;
}

#orders .orders-control-panel > * {
  position: relative;
  z-index: 2;
}

/* 订单工具台统一控件系统：同高度、同圆角、同边框与克制配色。 */
#orders .orders-control-panel {
  --order-control-height: 38px;
  --order-control-radius: 9px;
  --order-control-line: #cbd6e6;
  --order-control-text: #31455f;
}

#orders .orders-control-panel .filters > input,
#orders .orders-control-panel .filters #fQ,
#orders .orders-control-panel .date-filter-label input,
#orders .orders-control-panel #searchBtn,
#orders .orders-control-panel .toggle-label,
#orders .orders-lockbar-select-all,
#orders .order-lock-trigger,
#orders .orders-logistics-panel .actions > * {
  height: var(--order-control-height);
  min-height: var(--order-control-height);
  border-radius: var(--order-control-radius);
  font-size: 13px;
}

#orders .orders-control-panel input[type="date"],
#orders .orders-control-panel input[type="text"],
#orders .orders-control-panel input[type="search"],
#orders .orders-control-panel #fQ {
  border: 1px solid var(--order-control-line);
  background: #fbfcfe;
  color: #23364f;
  box-shadow: inset 0 1px 0 #fff;
}

#orders .orders-control-panel #searchBtn,
#orders .orders-logistics-panel #importLogisticsBtn {
  border: 1px solid #173b77;
  background: linear-gradient(135deg, #1d4c9e 0%, #102a5c 100%);
  color: #fff;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 4px 10px rgba(16,42,92,.18);
}

#orders .orders-control-panel #searchBtn:hover,
#orders .orders-logistics-panel #importLogisticsBtn:hover {
  border-color: #1d4c9e;
  background: linear-gradient(135deg, #2861bd 0%, #153871 100%);
}

#orders .order-quick-dates {
  display: inline-flex;
  gap: 0;
  height: var(--order-control-height);
  overflow: hidden;
  border: 1px solid var(--order-control-line);
  border-radius: var(--order-control-radius);
  background: #f7f9fc;
}

#orders .order-quick-dates button,
#orders .order-quick-dates button[data-order-date-offset="0"],
#orders .order-quick-dates button[data-order-date-offset="1"],
#orders .order-quick-dates button[data-order-date-offset="2"] {
  min-width: 54px;
  height: 100%;
  padding: 0 12px;
  border: 0;
  border-right: 1px solid var(--order-control-line);
  border-radius: 0;
  background: linear-gradient(180deg, #fff, #f3f6fa);
  color: #31455f;
  font-size: 13px;
  font-weight: 650;
  box-shadow: none;
}

#orders .order-quick-dates button:last-child {
  border-right: 0;
}

#orders .order-quick-dates button.active,
#orders .order-quick-dates button[data-order-date-offset="0"].active,
#orders .order-quick-dates button[data-order-date-offset="1"].active,
#orders .order-quick-dates button[data-order-date-offset="2"].active {
  background: linear-gradient(135deg, #e9f0ff, #dfe9fb);
  color: #173b77;
  box-shadow: inset 0 0 0 1px rgba(29,76,158,.18);
}

#orders .orders-lockbar-select-all {
  width: 76px;
  min-width: 76px;
  border: 1px solid var(--order-control-line);
  background: linear-gradient(180deg, #fff, #f5f8fc);
  color: var(--order-control-text);
}

#orders .order-lock-trigger {
  border: 1px solid #e7c98f;
  background: #fff7e8;
  color: #9a6009;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.8);
}

#orders .orders-logistics-panel .actions .logistics-template-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--order-control-line);
  background: linear-gradient(180deg, #fff, #f5f8fc);
  color: #31455f;
  box-shadow: inset 0 1px 0 #fff;
}

#orders .orders-logistics-panel .actions input[type="file"] {
  height: var(--order-control-height);
  min-height: var(--order-control-height);
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--order-control-line);
  border-radius: var(--order-control-radius);
  background: #fbfcfe;
  color: #6f7c90;
  font-size: 12px;
}

#orders .orders-logistics-panel .actions input[type="file"]::file-selector-button {
  height: 100%;
  margin: 0 10px 0 0;
  padding: 0 13px;
  border: 0;
  border-right: 1px solid var(--order-control-line);
  background: linear-gradient(180deg, #fff, #f1f4f8);
  color: #31455f;
  font: inherit;
  font-weight: 650;
}

#orders .orders-control-panel input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: #1d4c9e;
}

@media (min-width: 1501px) {
  #orders > .topbar .top-actions {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    margin-right: 0;
    overflow: hidden;
    gap: 5px;
  }

  #orders > .topbar .top-actions > button {
    width: 100%;
    max-width: 100%;
    min-width: 0 !important;
    min-height: 32px;
    padding: 5px 6px;
    font-size: 11px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

/* 最终宽度约束：B 版订单录入大框不得越过主内容边界。 */
#entry > .entry-input-panel {
  box-sizing: border-box !important;
  width: calc(100% - 32px) !important;
  max-width: calc(100% - 32px) !important;
  min-width: 0 !important;
  margin-right: 16px !important;
  margin-left: 16px !important;
}

@media (max-width: 680px) {
  #entry > .entry-input-panel {
    width: calc(100% - 20px) !important;
    max-width: calc(100% - 20px) !important;
    margin-right: 10px !important;
    margin-left: 10px !important;
  }
}

/* 侧栏最终版：统一线性图标与科技渐变悬停。 */
.side {
  border-right-color: #d8dde5;
  box-shadow: 5px 0 20px rgba(22, 34, 53, .045);
}

.brand {
  min-height: 78px;
  padding: 17px 10px;
}

.brand-mark {
  width: 44px;
  height: 44px;
  flex-basis: 44px;
  border: 1px solid rgba(78, 228, 229, .58);
  border-radius: 10px;
  background:
    radial-gradient(circle at 22% 18%, rgba(46, 232, 222, .68), transparent 34%),
    linear-gradient(135deg, #086c96 0%, #1747a2 48%, #172b79 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .42),
    inset 0 0 14px rgba(19, 220, 219, .18),
    0 0 0 1px rgba(42, 205, 211, .12),
    0 7px 17px rgba(24, 65, 142, .22);
  font-size: 22px;
  font-weight: 820;
}

.brand-copy strong {
  font-size: 16px;
  font-weight: 760;
}

.nav-group-label {
  margin: 17px 12px 7px;
  color: #909caf;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 1.2px;
}

.nav {
  display: flex;
  min-height: 42px;
  align-items: center;
  gap: 11px;
  margin-bottom: 2px;
  padding: 6px 12px;
  border-radius: 9px;
  color: #465267;
  font-size: 13.5px;
  font-weight: 590;
  line-height: 1;
  transition:
    color .18s ease,
    background .18s ease,
    box-shadow .18s ease,
    transform .18s ease;
}

.nav::after {
  display: none !important;
  content: none !important;
}

.nav > span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.nav-icon {
  box-sizing: border-box;
  display: block;
  flex: 0 0 30px;
  width: 30px;
  height: 30px;
  padding: 5px;
  overflow: visible;
  border: 1px solid transparent;
  border-radius: 8px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition:
    color .18s ease,
    border-color .18s ease,
    background .18s ease,
    box-shadow .18s ease,
    transform .18s ease;
}

.nav:hover {
  border-color: transparent;
  background: linear-gradient(90deg, rgba(21, 188, 174, .105), rgba(54, 108, 224, .075) 64%, rgba(255, 255, 255, 0));
  color: #153873;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .76);
  transform: translateX(1px);
}

.nav:hover .nav-icon {
  border-color: rgba(94, 223, 230, .72);
  color: #fff;
  background:
    radial-gradient(circle at 20% 18%, rgba(57, 240, 222, .9), transparent 36%),
    linear-gradient(135deg, #11b7a3 0%, #3b6eea 55%, #263b90 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .45),
    inset 0 0 9px rgba(255, 255, 255, .12),
    0 0 0 1px rgba(32, 205, 209, .14),
    0 5px 13px rgba(40, 90, 201, .26),
    0 0 14px rgba(29, 201, 211, .19);
  transform: translateY(-1px);
}

.nav.active {
  background: transparent;
  color: #173f9b;
  font-weight: 720;
  box-shadow: none;
}

.nav.active:hover {
  background: linear-gradient(90deg, rgba(21, 188, 174, .105), rgba(54, 108, 224, .075) 64%, rgba(255, 255, 255, 0));
}

.nav.active::before {
  top: 8px;
  bottom: 8px;
  width: 3px;
  border-radius: 0 4px 4px 0;
  background: linear-gradient(180deg, #1740a5, #315fd8);
  box-shadow: 0 0 8px rgba(40, 86, 207, .24);
}

.nav.active .nav-icon {
  color: #1743a7;
}

.nav-external {
  flex: 0 0 auto;
  margin-left: auto;
  color: #64748b;
  font-size: 14px;
  font-style: normal;
}

.nav:hover .nav-external {
  color: #10bfc3;
}

.nav.nav-subitem {
  padding-left: 12px;
  font-size: 13.5px;
}

.logout-nav {
  margin-top: auto;
  padding-top: 8px;
  border-top: 1px solid #e0e4ea;
  border-radius: 0;
  color: #d8322b;
}

.logout-nav:hover {
  background: linear-gradient(90deg, rgba(218, 52, 46, .09), rgba(255, 255, 255, 0));
  color: #c92c27;
}

.logout-nav:hover .nav-icon {
  border-color: rgba(242, 139, 132, .65);
  background: linear-gradient(135deg, #f05a50, #c92c27);
  box-shadow: 0 5px 12px rgba(201, 44, 39, .2);
}

@media (min-width: 981px) {
  .side {
    flex-basis: 250px;
    width: 250px;
    padding-right: 14px;
    padding-left: 14px;
  }

  .main {
    width: calc(100vw - 250px);
  }

  body.sidebar-collapsed .side {
    flex-basis: 74px;
    width: 74px;
  }

  body.sidebar-collapsed .main {
    width: calc(100vw - 74px);
  }

  body.sidebar-collapsed .nav {
    justify-content: center;
    padding: 6px;
    color: #657187;
  }

  body.sidebar-collapsed .nav > span,
  body.sidebar-collapsed .nav-external {
    display: none;
  }

  body.sidebar-collapsed .nav-icon {
    flex-basis: 30px;
    margin: 0;
  }

  body.sidebar-collapsed .nav.active {
    color: #1743a7;
  }
}

@media (max-width: 980px) {
  .nav {
    justify-content: center;
    padding: 6px;
    color: #657187;
  }

  .nav > span,
  .nav-external {
    display: none;
  }
}
.customer-railway-report-button {
  margin-left: 3px;
  min-width: 52px;
  height: 22px;
  padding: 0 7px;
  border: 1px solid #0e7f78;
  border-radius: 6px;
  background: linear-gradient(135deg, #159b91, #087069);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 4px 10px rgba(8, 112, 105, .16);
}
.customer-railway-report-button:hover {
  background: linear-gradient(135deg, #19aaa0, #075f5a);
  transform: translateY(-1px);
}
.customer-railway-report-dialog {
  width: min(700px, calc(100vw - 28px));
  max-height: calc(100vh - 20px);
  padding: 0;
  border: 0;
  border-radius: 18px;
  color: #17233a;
  box-shadow: 0 24px 70px rgba(15, 31, 55, .28);
}
.customer-railway-report-dialog::backdrop { background: rgba(12, 22, 38, .58); }
.customer-railway-report-form > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 18px;
  border-bottom: 1px solid #e4e9f1;
}
.customer-railway-report-form > header strong { font-size: 18px; }
.customer-railway-report-form > header button {
  padding: 7px 13px;
  border: 0;
  border-radius: 10px;
  background: #f1f3f6;
  color: #17233a;
  font-size: 15px;
}
.customer-railway-report-body {
  max-height: calc(100vh - 76px);
  overflow: auto;
  padding: 10px 18px 16px;
}
.customer-railway-report-body fieldset { margin: 0 0 8px; padding: 0; border: 0; }
.customer-railway-report-body legend,
.customer-railway-report-body label > span { display: block; margin-bottom: 6px; color: #62708a; font-size: 14px; }
.customer-railway-report-body em { color: #d92d20; font-style: normal; }
.customer-report-modes,
.customer-report-party,
.customer-report-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 10px; }
.customer-report-modes button {
  display: flex;
  min-height: 48px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 6px 10px;
  line-height: 1.2;
  border: 1px solid #d5deea;
  border-radius: 12px;
  background: #fff;
  color: #17233a;
}
.customer-report-modes button.active { border-color: #0b6970; background: #e5f3f4; color: #075a61; }
.customer-report-modes button strong { font-size: 15px; line-height: 1.2; }
.customer-report-modes button span { color: #6d7a91; font-size: 12px; line-height: 1.2; }
.customer-report-party { margin-bottom: 6px; }
.customer-report-calculation-grid {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px 10px;
}
.customer-report-calculation-grid:has(#queryReportRefundMethodRow:not([hidden])) {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.customer-report-calculation-grid > label[hidden] { display: none; }
.customer-railway-report-body input,
.customer-railway-report-body select,
.customer-railway-report-body textarea {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid #d5deea;
  border-radius: 10px;
  background: #fbfcfe;
  color: #17233a;
  font: inherit;
}
.customer-railway-report-body input,
.customer-railway-report-body select { height: 34px; padding: 0 11px; font-size: 14px; }
.customer-railway-report-body input[readonly] { background: #f5f7fa; color: #59677d; }
.customer-railway-report-body textarea { min-height: 54px; padding: 8px 11px; resize: vertical; }
.customer-report-summary {
  margin: 8px 0;
  padding: 7px 12px;
  border-radius: 12px;
  background: #e3f2f4;
  color: #075a68;
}
.customer-report-summary div { display: flex; justify-content: space-between; gap: 20px; padding: 3px 0; }
.customer-report-error { margin: 10px 0; color: #c62828; font-weight: 600; }
.customer-report-submit {
  width: 100%;
  height: 38px;
  margin-top: 8px;
  border: 0;
  border-radius: 11px;
  background: #0d6271;
  color: #fff;
  font-size: 15px;
  font-weight: 700;
}
@media (max-width: 720px) {
  .customer-report-party,
  .customer-report-grid { grid-template-columns: 1fr; }
  .customer-report-calculation-grid { grid-template-columns: 1fr; }
  .customer-railway-report-body { padding: 16px; }
}


.funds-view-tabs {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin: 0 0 12px;
  padding: 4px;
  border: 1px solid #dbe3f0;
  border-radius: 8px;
  background: #eef2f8;
}

.funds-view-tab {
  min-height: 36px;
  padding: 0 18px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: #667085;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}

.funds-view-tab:hover {
  color: #315bd8;
}

.funds-view-tab.is-active {
  background: #fff;
  color: #315bd8;
  box-shadow: 0 1px 3px rgba(16, 24, 40, 0.12);
}

.funds-view-tab:focus-visible {
  outline: 2px solid #315bd8;
  outline-offset: 2px;
}

.funds-tab-pane[hidden] {
  display: none !important;
}

#funds.view.active.statement-page-scroll { overflow-y: scroll !important; scrollbar-gutter: stable; }
#funds .funds-finance-panel.statement-mode { flex: 0 0 auto !important; min-height: 0; overflow: visible !important; }
#funds .funds-finance-panel.statement-mode #fundsStatementPanel { min-height: 0; overflow: visible; }

.statement-filter-bar,
.customer-statement-toolbar {
  display: flex;
  align-items: end;
  gap: 10px;
  flex-wrap: wrap;
  padding: 14px;
  border: 1px solid #dce3ef;
  border-radius: 9px;
  background: #f8faff;
}
.statement-filter-bar label,
.customer-statement-toolbar label { display: grid; min-width: 170px; gap: 5px; color: #667085; font-size: 12px; }
.customer-statement-title { display: grid; flex: 0 0 auto; gap: 3px; }.customer-statement-title span { color: #7b8799; font-size: 11px; }
#customerStatementView { box-sizing: border-box; width: auto; max-width: none; min-width: 0; min-height: calc(100vh - 360px); flex: 0 0 auto; align-self: stretch; height: auto; overflow: visible; padding-bottom: 32px; }
#customerStatementResult { flex: 0 0 auto; width: 100%; min-width: 0; }
#customerStatementView .customer-statement-toolbar { box-sizing: border-box; width: 100%; min-width: 0; align-items: center; flex-wrap: nowrap; }
#customerStatementView .customer-statement-toolbar > div { min-width: 0; }
#customerStatementView .customer-statement-toolbar > button { flex: 0 0 auto; white-space: nowrap; }
.customer-statement-current { display: flex !important; flex: 1 1 auto; align-items: center; gap: 12px; min-width: 0; margin-left: 8px; padding-left: 18px; border-left: 1px solid #dce3ef; }.customer-statement-current[hidden] { display: none !important; }.customer-statement-current select { width: clamp(190px, 24vw, 310px); min-width: 0; border: 0; color: #315fd8; background: transparent; font-size: 13px; font-weight: 800; cursor: pointer; }.customer-statement-current > span { overflow: hidden; color: #68758b; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }.customer-statement-current > em { flex: 0 0 auto; padding: 4px 9px; border-radius: 999px; font-size: 10px; font-style: normal; font-weight: 700; white-space: nowrap; }.customer-statement-current > em.done { color: #138653; background: #eaf7ef; }.customer-statement-current > em.pending { color: #315fd8; background: #edf2ff; }.customer-statement-current > em.disputed { color: #d85e1d; background: #fff1e7; }
.statement-filter-bar label:first-child { min-width: 300px; flex: 1; }
.statement-customer-picker { position: relative; display: block; }
.statement-customer-picker > input[type="text"] { width: 100%; padding-right: 34px; }
.statement-customer-clear { position: absolute; z-index: 3; top: 50%; right: 7px; width: 24px; height: 24px; padding: 0; border: 0; border-radius: 50%; color: #7a8598; background: transparent; font-size: 18px; line-height: 24px; transform: translateY(-50%); cursor: pointer; }
.statement-customer-clear:hover { color: #315bd8; background: #edf2ff; }
.statement-customer-results { position: absolute; z-index: 20; top: calc(100% + 5px); right: 0; left: 0; max-height: 320px; overflow-y: auto; padding: 5px; border: 1px solid #cfd8e7; border-radius: 8px; background: #fff; box-shadow: 0 12px 28px rgba(31, 48, 77, .16); }
.statement-customer-results[hidden] { display: none; }
.statement-customer-results button { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; padding: 9px 10px; border: 0; border-radius: 6px; color: #29364d; background: transparent; text-align: left; cursor: pointer; }
.statement-customer-results button:hover, .statement-customer-results button.active { color: #244fc4; background: #edf3ff; }
.statement-customer-results button strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.statement-customer-results button span { flex: 0 0 auto; color: #7b8799; font-variant-numeric: tabular-nums; }
.statement-customer-no-result { display: block; padding: 16px 10px; color: #8a94a6; text-align: center; }
.statement-company-workspace { display: grid; gap: 10px; margin-top: 12px; padding: 12px; border: 1px solid #dce3ef; border-radius: 9px; background: #f8faff; }.statement-company-workspace.hidden { display: none; }.statement-company-head { display: flex; align-items: center; justify-content: space-between; }.statement-company-head > div { display: grid; gap: 3px; }.statement-company-head strong { font-size: 15px; }.statement-company-head span { color: #7b8799; font-size: 10px; }.statement-period-candidate { display: grid; grid-template-columns: minmax(0, 1fr) 150px auto; align-items: center; gap: 16px; padding: 12px 14px; border: 1px solid #dce3ef; border-left: 4px solid #315fd8; border-radius: 8px; background: #fff; }.statement-period-candidate.warning { border-left-color: #df8b24; }.statement-period-candidate.query { border-left-color: #138653; }.statement-period-candidate > div:first-child { display: grid; gap: 4px; }.statement-period-candidate span,.statement-period-candidate small { color: #7b8799; font-size: 10px; }.statement-period-candidate strong { font-size: 13px; }.statement-period-money { display: grid; gap: 4px; }.statement-period-money b { color: #315fd8; }.statement-history { display: grid; grid-template-columns: 150px minmax(0, 1fr); align-items: start; gap: 12px; }.statement-history > div:first-child { display: grid; gap: 3px; padding: 8px 2px; }.statement-history > div:first-child span { color: #7b8799; font-size: 10px; }.statement-history-list { display: flex; gap: 7px; overflow-x: auto; padding-bottom: 3px; }.statement-history-item { display: grid; flex: 0 0 235px; gap: 3px; padding: 8px 10px; border: 1px solid #dce3ef; border-radius: 7px; color: #344158; background: #fff; text-align: left; cursor: pointer; }.statement-history-item span,.statement-history-item em { color: #7b8799; font-size: 9px; font-style: normal; }.statement-history-item strong { overflow: hidden; color: #315fd8; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }.statement-history-empty { padding: 10px; color: #8a94a6; font-size: 10px; }
.statement-advanced-filters { display: flex; align-items: end; gap: 8px; }.statement-advanced-filters.hidden { display: none; }.statement-advanced-filters label { display: grid; min-width: 150px; gap: 4px; }.statement-company-head > label { display: flex; align-items: center; gap: 6px; color: #68758b; font-size: 11px; white-space: nowrap; }.statement-company-head select { min-width: 88px; padding: 6px 8px; }.statement-list-wrap { width: 100%; max-height: 470px; overflow: auto; border: 1px solid #dce3ef; border-radius: 8px; background: #fff; scrollbar-gutter: stable; }.statement-list-table { width: 100%; min-width: 920px; border-collapse: collapse; font-size: 11px; }.statement-list-table th { position: sticky; z-index: 2; top: 0; padding: 10px 12px; color: #657187; background: #f2f5fa; text-align: left; white-space: nowrap; }.statement-list-table td { padding: 10px 12px; border-top: 1px solid #e8edf5; white-space: nowrap; }.statement-current-period-row { background: #f7f9ff; }.statement-current-period-row em { margin-left: 6px; padding: 3px 7px; border-radius: 999px; color: #315fd8; background: #e9efff; font-size: 9px; font-style: normal; font-weight: 700; }.statement-list-status { display: inline-block; padding: 3px 7px; border-radius: 999px; color: #138653; background: #eaf7ef; }.statement-list-status.generate { color: #a56212; background: #fff4df; }.statement-list-status.new_version { color: #d85e1d; background: #fff1e7; }.statement-list-status.query { color: #138653; background: #eaf7ef; }
.statement-empty { min-height: 220px; margin-top: 12px; display: grid; place-items: center; color: #8a94a6; }
.statement-detail-collapsed { display: none !important; }.statement-detail-toolbar { box-sizing: border-box; display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 12px; margin: 12px 0 10px; padding: 10px 14px; border: 1px solid #dce3ef; border-radius: 9px; background: #fff; }.statement-detail-toolbar > div { display: flex; min-width: 0; align-items: center; gap: 10px; }.statement-detail-toolbar strong { white-space: nowrap; }.statement-detail-toolbar span { overflow: hidden; color: #7b8799; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }.statement-detail-toolbar button { flex: 0 0 auto; }
.statement-empty-message { display: grid; gap: 7px; text-align: center; }.statement-empty-message span { font-size: 12px; }
.statement-sheet { margin-top: 12px; color: #27344b; }
.statement-workflow { display: flex; align-items: center; gap: 14px; margin-bottom: 12px; padding: 11px 14px; border: 1px solid #cfdcf7; border-radius: 9px; color: #315fd8; background: #f3f6ff; }.statement-workflow span { flex: 1; color: #6f7d94; font-size: 11px; }.statement-workflow button { padding: 7px 12px; border: 0; border-radius: 6px; color: #8490a3; background: #e7ebf1; font-weight: 700; }.statement-workflow.done { color: #138653; border-color: #bde4cf; background: #eef9f3; }.statement-workflow.disputed { color: #d85e1d; border-color: #f2c4a8; background: #fff7f0; }.statement-workflow .invoice-ready { color: #fff; background: #138653; }
.statement-summary-cards { display: grid; width: 100%; max-width: 100%; min-width: 0; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; margin-bottom: 12px; }
.statement-card { min-width: 0; padding: 14px; border: 1px solid #e0e6f0; border-radius: 9px; background: #fff; }
.statement-card span { display: block; margin-bottom: 8px; color: #7b8698; font-size: 11px; }
.statement-card strong { font-size: 18px; font-variant-numeric: tabular-nums; }
.statement-card.blue strong { color: #315fd8; }.statement-card.green strong, .statement-total .green { color: #138653; }.statement-card.orange strong, .statement-total .orange { color: #df5d24; }
.statement-sheet-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 15px 16px; border: 1px solid #e0e6f0; border-bottom: 0; border-radius: 9px 9px 0 0; background: #fff; }
.statement-sheet-head h2 { margin: 0 0 5px; font-size: 18px; }.statement-sheet-head p { margin: 0; color: #707c91; font-size: 11px; }
.statement-confirm-status { padding: 5px 10px; border-radius: 999px; color: #315fd8; background: #edf2ff; font-size: 11px; font-weight: 700; }
.statement-confirm-status.done { color: #138653; background: #eaf7ef; }.statement-confirm-status.disputed { color: #d85e1d; background: #fff1e7; }
.statement-overview-bar { box-sizing: border-box; display: flex; width: 100%; min-width: 0; min-height: 102px; align-items: stretch; margin-bottom: 12px; padding: 12px 14px; border: 1px solid #e0e6f0; border-radius: 9px; background: #fff; box-shadow: 0 4px 12px rgba(31,48,77,.04); }.statement-overview-bar .statement-sheet-head { box-sizing: border-box; min-width: 280px; flex: 0 1 420px; align-items: center; padding: 4px 20px 4px 2px; border: 0; border-right: 1px solid #dce3ef; border-radius: 0; }.statement-overview-bar .statement-sheet-head h2 { font-size: 17px; }.statement-overview-bar .statement-sheet-head p { line-height: 1.8; }.statement-overview-bar .statement-summary-cards { display: grid; flex: 1 1 auto; min-width: 0; grid-template-columns: repeat(6, minmax(76px, 1fr)); gap: 0; margin: 0; }.statement-overview-bar .statement-card { min-width: 0; align-content: center; padding: 4px 13px; border: 0; border-right: 1px solid #e1e7f0; border-radius: 0; background: transparent; }.statement-overview-bar .statement-card span { overflow: hidden; margin-bottom: 7px; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }.statement-overview-bar .statement-card strong { font-size: 16px; white-space: nowrap; }.statement-overview-actions { display: grid; flex: 0 0 auto; min-width: 128px; align-content: center; justify-items: center; gap: 8px; padding-left: 14px; }.statement-overview-actions button { white-space: nowrap; }
.statement-table-wrap { max-height: 470px; overflow: auto; border: 1px solid #e0e6f0; background: #fff; }
.statement-table { width: 100%; min-width: 1160px; border-collapse: collapse; font-size: 11px; }
.statement-table th { position: sticky; z-index: 2; top: 0; padding: 9px 8px; color: #657187; background: #f2f5fa; text-align: left; white-space: nowrap; }
.statement-table td { padding: 9px 8px; border-top: 1px solid #e8edf5; white-space: nowrap; }
.statement-table .clip { max-width: 260px; overflow: hidden; text-overflow: ellipsis; }
.statement-status { padding: 3px 7px; border-radius: 999px; color: #287a50; background: #eaf7ef; }
.statement-voided { color: #9aa2b1; text-decoration: line-through; background: #fafafa; }
.statement-total { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; padding: 13px 16px; border: 1px solid #e0e6f0; border-top: 0; border-radius: 0 0 9px 9px; background: #fff; }
.statement-total span { color: #687489; }.statement-total b { color: #315fd8; font-variant-numeric: tabular-nums; }.statement-total button:first-of-type { margin-left: auto; }
.statement-final-state { margin-left: auto; padding: 7px 11px; border-radius: 7px; font-weight: 700; }.statement-final-state.done { color: #138653; background: #eaf7ef; }.statement-final-state.disputed { color: #d85e1d; background: #fff1e7; }.statement-dispute-btn { color: #d85e1d !important; border-color: #ef9a68 !important; }
.portal-statement-workspace { display: grid; grid-template-columns: minmax(0, 1fr); align-items: start; gap: 12px; width: 100%; max-width: 100%; min-width: 0; margin-top: 12px; overflow: hidden; }
.portal-statement-list { position: static; display: flex; width: 100%; max-width: 100%; flex-direction: row; gap: 8px; overflow-x: auto; overflow-y: hidden; padding: 2px 2px 9px; scrollbar-gutter: stable; }.portal-statement-list button { display: grid; flex: 0 0 290px; min-width: 0; min-height: 72px; align-content: center; gap: 7px; padding: 11px 13px; border: 1px solid #dce3ef; border-radius: 8px; color: #344158; background: #fff; line-height: 1.35; text-align: left; cursor: pointer; }.portal-statement-list button.active { color: #315fd8; border-color: #8da8f2; background: #f4f7ff; box-shadow: 0 4px 12px rgba(49,95,216,.08); }.portal-statement-list button strong,.portal-statement-list button span { display: block; overflow: hidden; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; }.portal-statement-list button strong { font-size: 13px; }.portal-statement-list button span { color: #7b8799; font-size: 10px; }
#portalStatementDetail { box-sizing: border-box; width: 100%; max-width: 100%; min-width: 0; overflow: hidden; }.portal-statement-workspace .statement-sheet { box-sizing: border-box; width: 100%; max-width: 100%; min-width: 0; margin-top: 0; overflow: hidden; }.portal-statement-workspace .statement-total { position: sticky; z-index: 5; bottom: 0; box-shadow: 0 -5px 16px rgba(31,48,77,.08); }
.statement-payment-list { display: grid; gap: 8px; padding: 10px 0; }
.statement-payment-card { box-sizing: border-box; display: grid; width: 100%; max-width: 100%; min-width: 0; grid-template-columns: 150px minmax(0, 1fr) auto; align-items: center; gap: 16px; padding: 13px 15px; border: 1px solid #d9e3f4; border-radius: 9px; background: #f8faff; }
.statement-payment-card > div > span { display: block; color: #68758b; font-size: 11px; }.statement-payment-card > div > strong { display: block; margin-top: 5px; color: #315fd8; font-size: 20px; }
.statement-payment-card dl { display: grid; min-width: 0; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; margin: 0; }
.statement-payment-card dl div { min-width: 0; }.statement-payment-card dt { color: #8a94a6; font-size: 10px; }.statement-payment-card dd { overflow: hidden; margin: 4px 0 0; color: #37445a; text-overflow: ellipsis; white-space: nowrap; }
.statement-payment-empty { padding: 12px; border-radius: 8px; color: #7b8799; background: #f7f8fb; }
.statement-allocation-badge { display: inline-block; padding: 3px 8px; border-radius: 999px; color: #7d8795; background: #f0f1f3; font-size: 10px; font-weight: 700; white-space: nowrap; }.statement-allocation-badge.done { color: #138653; background: #eaf7ef; }.statement-allocation-badge.partial { color: #d85e1d; background: #fff1e7; }.statement-allocation-badge.none { color: #b23a3a; background: #fcebec; }
.statement-orders-panel { overflow: hidden; border: 1px solid #dfe6f1; border-radius: 9px 9px 0 0; background: #fff; }
.statement-orders-toolbar { box-sizing: border-box; display: flex; width: 100%; min-width: 0; align-items: center; gap: 8px; flex-wrap: wrap; padding: 10px; background: #f8faff; }.statement-orders-toolbar > input { min-width: min(280px, 100%); flex: 1 1 420px; }.statement-orders-toolbar > select { flex: 0 1 130px; min-width: 105px; }.statement-orders-toolbar > label { display: flex; flex: 0 0 auto; align-items: center; gap: 6px; color: #68758b; white-space: nowrap; }.statement-orders-toolbar > small { flex: 0 0 auto; color: #7b8799; white-space: nowrap; }
.statement-orders-panel .statement-table-wrap { height: clamp(300px, 44vh, 520px); max-height: none; overflow: scroll; border: 0; border-top: 1px solid #e1e7f0; border-radius: 0; scrollbar-gutter: stable both-edges; overscroll-behavior: contain; }
.statement-orders-panel .statement-table-wrap::-webkit-scrollbar-track { background: #edf1f6; }.statement-orders-panel .statement-table-wrap::-webkit-scrollbar-thumb { border: 2px solid #edf1f6; background: #8f9bad; background-clip: padding-box; }
.statement-orders-table { min-width: 1120px; }.statement-orders-table td.green { color: #138653; }
.statement-address-cell { display: flex; align-items: center; gap: 6px; }.statement-address-cell span { max-width: 140px; overflow: hidden; color: #66758d; text-overflow: ellipsis; white-space: nowrap; }.statement-address-cell button { padding: 2px 5px; border: 0; color: #315fd8; background: transparent; cursor: pointer; }
.statement-address-detail td { padding: 9px 16px !important; color: #53647e; background: #f3f7ff; text-decoration: none !important; }.statement-address-detail td strong { margin-right: 20px; color: #315fd8; }.statement-address-detail td span { margin-right: 24px; }
.statement-pagination { position: sticky; z-index: 3; bottom: 0; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; border-top: 1px solid #e4e9f1; color: #778398; background: #fff; }.statement-pagination div { display: flex; gap: 5px; }.statement-pagination button { min-width: 30px; padding: 5px 8px; border: 1px solid #d8e0ec; border-radius: 5px; color: #536077; background: #fff; cursor: pointer; }.statement-pagination button.active { color: #fff; border-color: #315fd8; background: #315fd8; }

.invoice-page-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; padding: 14px 16px; border: 1px solid #dce3ef; border-radius: 9px; background: #fff; }.invoice-page-head > div { display: grid; gap: 4px; }.invoice-page-head strong { font-size: 16px; }.invoice-page-head span { color: #7b8799; font-size: 11px; }
.invoice-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-bottom: 12px; }.invoice-stats > div { display: grid; gap: 8px; padding: 14px 16px; border: 1px solid #dce3ef; border-radius: 9px; background: #fff; }.invoice-stats span { color: #7b8799; font-size: 11px; }.invoice-stats strong { color: #315fd8; font-size: 22px; }
.invoice-page-head--combined { box-sizing: border-box; display: flex; width: 100%; min-width: 0; min-height: 82px; padding: 12px 16px; }.invoice-page-head--combined .invoice-page-title { min-width: 245px; flex: 0 1 360px; padding-right: 18px; border-right: 1px solid #dce3ef; }.invoice-page-head--combined > button { flex: 0 0 auto; white-space: nowrap; }.invoice-stats--inline { display: grid; flex: 1 1 auto; min-width: 0; grid-template-columns: repeat(4, minmax(90px, 1fr)); gap: 0; margin: 0; }.invoice-stats--inline > div { min-width: 0; align-content: center; gap: 4px; padding: 2px 18px; border: 0; border-right: 1px solid #e1e7f0; border-radius: 0; background: transparent; }.invoice-stats--inline > div:last-child { border-right: 0; }.invoice-stats--inline span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.invoice-stats--inline strong { line-height: 1; }
.invoice-filter-bar { box-sizing: border-box; display: flex; width: 100%; gap: 9px; margin-bottom: 12px; padding: 12px; border: 1px solid #dce3ef; border-radius: 9px; background: #f8faff; }.invoice-filter-bar input { min-width: 0; flex: 1; }.invoice-filter-bar select { min-width: 150px; }
.invoice-result { min-width: 0; border: 1px solid #dce3ef; border-radius: 9px; background: #fff; overflow: hidden; }.invoice-result.empty { min-height: 180px; display: grid; place-items: center; color: #8a94a6; }.invoice-table-wrap { width: 100%; overflow: auto; }.invoice-table { width: 100%; min-width: 1120px; border-collapse: collapse; font-size: 11px; }.invoice-table th { padding: 10px; color: #657187; background: #f2f5fa; text-align: left; white-space: nowrap; }.invoice-table td { padding: 11px 10px; border-top: 1px solid #e8edf5; vertical-align: middle; }.invoice-table td small { display: block; margin-top: 4px; color: #7b8799; }.invoice-status { display: inline-block; padding: 4px 8px; border-radius: 999px; white-space: nowrap; }.invoice-status.pending { color: #d85e1d; background: #fff1e7; }.invoice-status.ready { color: #315fd8; background: #edf2ff; }.invoice-status.sent { color: #7d4bd1; background: #f3edff; }.invoice-status.done { color: #138653; background: #eaf7ef; }.invoice-upload-btn { display: inline-flex; padding: 6px 10px; border: 1px solid #8da8f2; border-radius: 6px; color: #315fd8; cursor: pointer; }.invoice-upload-btn input { display: none; }.invoice-note { margin: 0; padding: 10px 14px; border-top: 1px solid #e8edf5; color: #7b8799; font-size: 10px; }.invoice-table .green { color: #138653; }.invoice-request-message { color: #68758b; font-size: 11px; }.invoice-request-message.success { color: #138653; }.invoice-request-message.error { color: #c43f36; }
#customerInvoiceView { box-sizing: border-box; width: auto; max-width: none; min-width: 0; align-self: stretch; padding-bottom: 32px; }
.invoice-row-actions { display: flex; align-items: center; gap: 7px; white-space: nowrap; }
#invoiceDetailModal { z-index: 1300; align-items: center; }
.invoice-detail-modal-panel { box-sizing: border-box; display: grid; width: min(1420px, calc(100vw - 36px)); height: min(850px, calc(100vh - 36px)); grid-template-rows: auto minmax(0, 1fr) auto; overflow: hidden; }
.invoice-detail-modal-panel .modal-bar > div { display: flex; min-width: 0; align-items: center; gap: 10px; }.invoice-detail-modal-panel .modal-bar span { overflow: hidden; color: #7b8799; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.invoice-detail-body { display: grid; min-height: 0; grid-template-rows: auto auto auto minmax(0, 1fr); gap: 10px; overflow: hidden; padding: 14px; }
.invoice-detail-lock { display: grid; gap: 4px; padding: 10px 13px; border: 1px solid #bde4cf; border-radius: 8px; color: #138653; background: #eef9f3; }.invoice-detail-lock span { font-size: 10px; }
.invoice-detail-meta { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border: 1px solid #dfe6f1; border-radius: 8px; background: #fff; }.invoice-detail-meta > div { display: grid; min-width: 0; gap: 5px; padding: 10px 13px; border-right: 1px solid #e5eaf2; }.invoice-detail-meta > div:last-child { border-right: 0; }.invoice-detail-meta span { color: #7b8799; font-size: 10px; }.invoice-detail-meta strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.invoice-detail-controls { display: flex; align-items: center; justify-content: space-between; gap: 10px; }.invoice-detail-controls label { display: flex; align-items: center; gap: 6px; color: #68758b; }
.invoice-detail-table-wrap { min-width: 0; min-height: 0; overflow-x: scroll; overflow-y: scroll; border: 1px solid #dfe6f1; border-radius: 8px; scrollbar-gutter: stable both-edges; }.invoice-detail-table { width: 100%; min-width: 1250px; border-collapse: collapse; font-size: 11px; }.invoice-detail-table th { position: sticky; z-index: 2; top: 0; padding: 10px; color: #657187; background: #f2f5fa; text-align: left; white-space: nowrap; }.invoice-detail-table td { padding: 10px; border-top: 1px solid #e8edf5; white-space: nowrap; }.invoice-detail-table td:nth-child(8) { max-width: 300px; overflow: hidden; text-overflow: ellipsis; }
.invoice-detail-table tr.invoice-detail-voided td { color: #9aa2b1; background: #fafafa; text-decoration: line-through; }.invoice-detail-voided-status { display: inline-block; padding: 3px 7px; border-radius: 999px; color: #b23a3a; background: #fcebec; font-weight: 700; text-decoration: none; }
.invoice-detail-footer { display: flex; align-items: center; gap: 12px; padding: 11px 14px; border-top: 1px solid #e1e7f0; background: #fff; }.invoice-detail-footer > span { color: #68758b; }.invoice-detail-footer > button { margin-left: auto; }.invoice-detail-pages { display: flex; gap: 5px; }.invoice-detail-pages button { padding: 6px 10px; border: 1px solid #d8e0ec; border-radius: 5px; color: #536077; background: #fff; cursor: pointer; }.invoice-detail-pages button.active { color: #fff; border-color: #315fd8; background: #315fd8; }.invoice-detail-pages button:disabled { cursor: not-allowed; opacity: .45; }

@media (max-width: 1280px) {
  .statement-summary-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .statement-overview-bar .statement-summary-cards { grid-template-columns: repeat(6, minmax(70px, 1fr)); }.statement-overview-bar .statement-sheet-head { min-width: 235px; flex-basis: 300px; }.statement-overview-bar .statement-card { padding-inline: 8px; }.statement-overview-bar .statement-card strong { font-size: 14px; }
  .portal-statement-list button { flex: 0 0 250px; }
  .statement-payment-card dl { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .invoice-page-head--combined .invoice-page-title { min-width: 210px; flex-basis: 280px; }.invoice-stats--inline > div { padding-inline: 12px; }
}

@media (max-width: 720px) {
  .funds-view-tabs {
    display: flex;
    width: 100%;
  }

  .funds-view-tab {
    flex: 1;
    padding-inline: 10px;
  }
  .statement-summary-cards { grid-template-columns: repeat(2, minmax(120px, 1fr)); }
  .statement-total { gap: 10px; align-items: flex-start; flex-direction: column; }
  .statement-total button { width: 100%; margin-left: 0; }
  .statement-payment-card { grid-template-columns: 1fr; }.statement-payment-card dl { grid-template-columns: repeat(2, minmax(100px, 1fr)); }.statement-orders-toolbar { align-items: stretch; flex-direction: column; }.statement-orders-toolbar > input { min-width: 0; width: 100%; }.statement-orders-panel .statement-table-wrap { height: 52vh; min-height: 280px; }
  #customerStatementView .customer-statement-toolbar { align-items: stretch; flex-wrap: wrap; }
  #customerStatementView .customer-statement-toolbar > .customer-statement-title { flex-basis: 100%; }
  .customer-statement-current { order: 2; flex-basis: 100%; margin-left: 0; padding: 8px 0 0; border-top: 1px solid #dce3ef; border-left: 0; }
  .statement-overview-bar { flex-wrap: wrap; }.statement-overview-bar .statement-sheet-head { flex: 1 1 calc(100% - 140px); border-right: 0; }.statement-overview-actions { min-width: 120px; }.statement-overview-bar .statement-summary-cards { order: 3; flex-basis: 100%; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid #e1e7f0; }.statement-overview-bar .statement-card { padding: 10px; border-bottom: 1px solid #e1e7f0; }.statement-overview-bar .statement-card:nth-child(2n) { border-right: 0; }
  .invoice-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }.invoice-filter-bar { flex-direction: column; }.invoice-filter-bar select { width: 100%; }
  .invoice-page-head--combined { align-items: stretch; flex-wrap: wrap; }.invoice-page-head--combined .invoice-page-title { flex: 1 1 auto; min-width: 0; border-right: 0; }.invoice-stats--inline { order: 3; flex-basis: 100%; grid-template-columns: repeat(2, minmax(0, 1fr)); }.invoice-stats--inline > div { padding: 10px; border-top: 1px solid #e1e7f0; }.invoice-stats--inline > div:nth-child(2) { border-right: 0; }
  .statement-period-candidate { grid-template-columns: 1fr; }.statement-period-candidate button { width: 100%; }.statement-history { grid-template-columns: 1fr; }
}