:root {
  --bg: #f4f6f8;
  --surface: #ffffff;
  --surface-soft: #f8fafb;
  --text: #17202a;
  --text-soft: #66717e;
  --text-faint: #929ba5;
  --line: #e2e7eb;
  --line-strong: #d3dae0;
  --primary: #1769e0;
  --primary-dark: #0f55bc;
  --primary-soft: #edf5ff;
  --success: #15805f;
  --success-soft: #e9f7f1;
  --warning: #a76207;
  --warning-soft: #fff5df;
  --danger: #c33a32;
  --danger-soft: #fff0ee;
  --teal: #117f89;
  --shadow: 0 1px 2px rgba(17, 24, 39, 0.04), 0 8px 24px rgba(17, 24, 39, 0.05);
  --sidebar-width: 236px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  color: var(--text);
  background: var(--bg);
  font-synthesis: none;
}

/* Demand collection and authoritative product pickers */
.demand-guidance {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin-bottom: 18px;
  padding: 14px 16px;
  border: 1px solid #bfdbfe;
  border-radius: 12px;
  background: #eff6ff;
  color: #1e40af;
}

.demand-guidance div { display: grid; gap: 3px; }
.demand-guidance span { color: #475569; font-size: 13px; }
.demand-card-list { display: grid; gap: 16px; }

.demand-card {
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
  box-shadow: var(--shadow);
}

.demand-card-head,
.demand-card-foot {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  justify-content: space-between;
}

.demand-card-head span { color: var(--primary); font-size: 12px; font-weight: 700; }
.demand-card-head h2 { margin: 5px 0 3px; font-size: 17px; }
.demand-card-head p { margin: 0; color: var(--text-soft); font-size: 13px; }

.demand-summary-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 18px 0;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #f8fafc;
}

.demand-summary-grid > div { display: grid; gap: 4px; padding: 13px 15px; border-right: 1px solid var(--line); }
.demand-summary-grid > div:last-child { border-right: 0; }
.demand-summary-grid span,
.own-contribution span { color: var(--text-soft); font-size: 12px; }
.demand-summary-grid strong { font-size: 14px; }

.own-contribution {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-bottom: 12px;
  padding: 10px 12px;
  border-radius: 9px;
  background: #ecfdf5;
}

.own-contribution strong { margin-left: auto; color: #047857; }
.own-contribution small { color: #64748b; }

.demand-participant-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 8px;
  margin-bottom: 16px;
}

.demand-participant-list > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 9px 11px;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.demand-participant-list span { display: grid; font-size: 13px; }
.demand-participant-list small { color: var(--text-soft); font-size: 11px; }
.demand-participant-list strong { font-size: 12px; }
.demand-card-foot { align-items: center; padding-top: 14px; border-top: 1px solid var(--line); }
.demand-card-foot > span { color: var(--text-soft); font-size: 12px; }
.demand-card-foot > div { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }

.catalog-picker { position: relative; }
.catalog-search-input { position: relative; display: flex; align-items: center; }
.catalog-search-input > svg { position: absolute; left: 12px; z-index: 1; color: #94a3b8; }
.catalog-search-input input { width: 100%; padding-left: 38px; }

.catalog-results {
  position: absolute;
  z-index: 30;
  top: calc(100% - 18px);
  right: 0;
  left: 0;
  max-height: 300px;
  overflow: auto;
  border: 1px solid #cbd5e1;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 16px 38px rgba(15, 23, 42, .16);
}

.catalog-result {
  display: flex;
  width: 100%;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  padding: 11px 13px;
  border: 0;
  border-bottom: 1px solid #eef2f7;
  background: #fff;
  color: var(--text);
  text-align: left;
  cursor: pointer;
}

.catalog-result:hover { background: #eff6ff; }
.catalog-result span { display: grid; gap: 3px; }
.catalog-result small { color: var(--text-soft); }
.demand-invite-field { display: grid; gap: 9px; }

.department-user-options {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  max-height: 180px;
  overflow: auto;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: #f8fafc;
}

.participant-option {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  padding: 7px 9px;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  background: #fff;
  color: #334155;
  cursor: pointer;
}

.participant-option.selected { border-color: #60a5fa; background: #eff6ff; color: #1d4ed8; }
.participant-empty { display: block; padding: 10px; color: var(--text-soft); font-size: 12px; }
.selected-participants { display: flex; flex-wrap: wrap; gap: 7px; }

.participant-chip {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  padding: 6px 8px;
  border-radius: 999px;
  background: #e0f2fe;
  color: #075985;
  font-size: 12px;
}

.participant-chip small { color: #64748b; }
.participant-chip button { border: 0; background: transparent; color: #0369a1; cursor: pointer; font-size: 16px; }

.demand-contribution-summary {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px;
  border-radius: 10px;
  background: #eff6ff;
}

.demand-contribution-summary strong { margin-left: auto; color: #1d4ed8; }
.demand-contribution-summary small { color: var(--text-soft); }

@media (max-width: 760px) {
  .demand-summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .demand-summary-grid > div:nth-child(2) { border-right: 0; }
  .demand-summary-grid > div:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .demand-card-head,
  .demand-card-foot { align-items: stretch; flex-direction: column; }
  .demand-card-foot > div { justify-content: flex-start; }
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  min-width: 320px;
  min-height: 100%;
  background: var(--bg);
}

body {
  min-height: 100vh;
  font-size: 14px;
  line-height: 1.45;
}

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

button {
  color: inherit;
}

button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 3px solid rgba(23, 105, 224, 0.18);
  outline-offset: 1px;
}

button:disabled {
  cursor: not-allowed;
  opacity: 0.48;
}

.app-shell {
  min-height: 100vh;
}

.sidebar {
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 30;
  display: flex;
  width: var(--sidebar-width);
  flex-direction: column;
  border-right: 1px solid var(--line);
  background: #fbfcfd;
}

.brand {
  display: flex;
  align-items: center;
  height: 68px;
  padding: 0 18px;
  border-bottom: 1px solid var(--line);
  gap: 11px;
}

.brand-mark {
  display: grid;
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  place-items: center;
  border-radius: 7px;
  color: #fff;
  background: var(--primary);
  font-size: 17px;
  font-weight: 750;
  box-shadow: 0 4px 12px rgba(23, 105, 224, 0.22);
}

.brand-copy {
  display: flex;
  min-width: 0;
  flex: 1;
  flex-direction: column;
}

.brand-copy strong {
  font-size: 15px;
  font-weight: 720;
}

.brand-copy span {
  margin-top: 1px;
  color: var(--text-faint);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0;
}

.main-nav {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 3px;
  overflow-y: auto;
  padding: 16px 10px;
}

.nav-item {
  display: grid;
  min-height: 42px;
  grid-template-columns: 22px 1fr auto;
  align-items: center;
  padding: 0 12px;
  border: 0;
  border-radius: 6px;
  color: #56616e;
  background: transparent;
  cursor: pointer;
  text-align: left;
  transition: background 140ms ease, color 140ms ease;
}

.nav-item:hover {
  color: var(--text);
  background: #f0f3f6;
}

.nav-item.active {
  color: var(--primary);
  background: var(--primary-soft);
  font-weight: 700;
}

.nav-item b {
  display: grid;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  place-items: center;
  border-radius: 10px;
  color: #fff;
  background: var(--primary);
  font-size: 11px;
}

.sidebar-policy {
  display: flex;
  margin: 10px;
  padding: 11px;
  border: 1px solid #dbe8f8;
  border-radius: 7px;
  background: #f4f8fd;
  gap: 9px;
}

.policy-icon {
  color: var(--primary);
}

.sidebar-policy div:last-child {
  display: flex;
  min-width: 0;
  flex-direction: column;
}

.sidebar-policy strong {
  font-size: 12px;
}

.sidebar-policy span {
  margin-top: 3px;
  color: var(--text-soft);
  font-size: 10px;
  line-height: 1.4;
}

.sidebar-footer {
  padding: 10px;
  border-top: 1px solid var(--line);
}

.user-card {
  display: grid;
  width: 100%;
  min-height: 48px;
  grid-template-columns: 32px 1fr 16px;
  align-items: center;
  padding: 5px 7px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  cursor: pointer;
  gap: 9px;
  text-align: left;
}

.user-card:hover {
  background: #f0f3f6;
}

.user-card:not([data-action]) {
  cursor: default;
}

.user-card > span:nth-child(2) {
  display: flex;
  min-width: 0;
  flex-direction: column;
}

.user-card strong,
.user-card small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.user-card small {
  color: var(--text-soft);
  font-size: 11px;
}

.avatar {
  display: grid;
  width: 32px;
  height: 32px;
  place-items: center;
  border-radius: 50%;
  color: #0c5cc8;
  background: #dcecff;
  font-weight: 750;
}

.main-content {
  min-width: 0;
  min-height: 100vh;
  margin-left: var(--sidebar-width);
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  height: 68px;
  align-items: center;
  justify-content: space-between;
  padding: 0 28px;
  border-bottom: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(12px);
}

.topbar-title,
.topbar-title > div {
  display: flex;
  align-items: center;
}

.topbar-title > div {
  gap: 8px;
}

.topbar-title span {
  color: var(--text-faint);
  font-size: 12px;
}

.topbar-title span::after {
  margin-left: 8px;
  color: #c0c6cc;
  content: "/";
}

.topbar-title strong {
  font-size: 14px;
}

.topbar-actions,
.page-actions,
.detail-actions,
.approval-actions > div:last-child {
  display: flex;
  align-items: center;
  gap: 8px;
}

.role-switcher {
  display: flex;
  height: 36px;
  align-items: center;
  padding: 0 8px 0 10px;
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  color: var(--text-soft);
  background: #fff;
  gap: 6px;
}

.role-switcher select {
  border: 0;
  outline: 0;
  color: var(--text);
  background: transparent;
  font-size: 13px;
  font-weight: 650;
}

.identity-chip {
  display: flex;
  min-height: 36px;
  align-items: center;
  padding: 0 11px;
  border: 1px solid #b7d8c4;
  border-radius: 6px;
  color: #17613b;
  background: #f2faf5;
  gap: 7px;
  font-size: 12px;
}

.identity-chip span {
  color: #4c6b59;
}

.identity-chip strong {
  font-size: 13px;
}

.sync-chip {
  border-color: #cbd5e1;
  color: #334155;
  background: #f8fafc;
}

.sync-chip span {
  color: #64748b;
}

.test-environment .brand-mark {
  background: #a8382f;
  box-shadow: 0 4px 12px rgba(168, 56, 47, 0.2);
}

.test-environment .sidebar-policy {
  border-color: #efcf9c;
  background: #fff8e8;
}

.test-environment .policy-icon {
  color: #9b5a08;
}

.test-role-switcher {
  border-color: #e4bd7c;
  color: #85510f;
  background: #fffaf0;
}

.test-clear-button {
  color: var(--danger);
  border-color: #edc3bf;
  background: #fff8f7;
}

.test-exit-button {
  border-color: #d39a91;
  color: #8f2f29;
}

.test-environment-banner {
  display: flex;
  min-height: 48px;
  align-items: center;
  padding: 8px 28px;
  border-bottom: 1px solid #e8c783;
  color: #6e4008;
  background: #fff6df;
  gap: 10px;
}

.test-environment-banner > div {
  display: flex;
  min-width: 0;
  flex-direction: column;
}

.test-environment-banner strong {
  font-size: 12px;
}

.test-environment-banner span {
  margin-top: 2px;
  overflow-wrap: anywhere;
  font-size: 11px;
}

.test-reset-copy > span {
  color: var(--danger);
  background: var(--danger-soft);
}

.auth-gate {
  display: flex;
  min-height: 100vh;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  padding: 32px;
  color: var(--text);
  background: #f6f8fa;
  text-align: center;
}

.auth-gate-mark {
  display: grid;
  width: 48px;
  height: 48px;
  margin-bottom: 18px;
  place-items: center;
  border: 1px solid #b8d5f4;
  border-radius: 8px;
  color: #0c5cc8;
  background: #eaf4ff;
}

.auth-gate h1 {
  margin: 0;
  font-size: 22px;
}

.auth-gate p {
  max-width: 30em;
  margin: 8px 0 18px;
  color: var(--text-soft);
  font-size: 14px;
  /* 中文说明只在标点处换行，「重新连接」「威仕达采购中心」不被拆开；实在放不下才在字中间断 */
  word-break: keep-all;
  overflow-wrap: anywhere;
}

.page-content {
  width: 100%;
  max-width: 1620px;
  margin: 0 auto;
  padding: 25px 28px 48px;
}

.page-header {
  display: flex;
  min-height: 54px;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 20px;
  gap: 20px;
}

.page-header h1 {
  margin: 0;
  font-size: 24px;
  line-height: 1.25;
}

.page-header p,
.panel-heading p,
.section-heading p {
  margin: 5px 0 0;
  color: var(--text-soft);
  font-size: 13px;
}

.btn {
  display: inline-flex;
  min-height: 36px;
  align-items: center;
  justify-content: center;
  padding: 0 13px;
  border: 1px solid transparent;
  border-radius: 6px;
  cursor: pointer;
  gap: 6px;
  font-size: 13px;
  font-weight: 680;
  white-space: nowrap;
}

.btn-primary {
  color: #fff;
  border-color: var(--primary);
  background: var(--primary);
  box-shadow: 0 3px 8px rgba(23, 105, 224, 0.16);
}

.btn-primary:hover:not(:disabled) {
  border-color: var(--primary-dark);
  background: var(--primary-dark);
}

.btn-secondary {
  color: #394553;
  border-color: var(--line-strong);
  background: #fff;
}

.btn-secondary:hover:not(:disabled) {
  border-color: #b9c2cb;
  background: var(--surface-soft);
}

.btn-danger,
.btn-danger-ghost:hover:not(:disabled) {
  color: #fff;
  border-color: var(--danger);
  background: var(--danger);
}

.btn-danger-ghost {
  color: var(--danger);
  border-color: #f0c7c3;
  background: #fff;
}

.btn-small {
  min-height: 30px;
  padding: 0 10px;
  font-size: 12px;
}

.icon-btn {
  display: inline-grid;
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  place-items: center;
  padding: 0;
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  color: #56616e;
  background: #fff;
  cursor: pointer;
}

.icon-btn:hover {
  color: var(--text);
  background: var(--surface-soft);
}

.text-btn,
.table-link {
  display: inline-flex;
  align-items: center;
  padding: 0;
  border: 0;
  color: var(--primary);
  background: transparent;
  cursor: pointer;
  font-weight: 650;
  gap: 4px;
}

.mobile-menu,
.sidebar-close,
.sidebar-scrim {
  display: none;
}

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

.metric-card {
  display: flex;
  min-height: 112px;
  align-items: flex-start;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  box-shadow: 0 1px 1px rgba(17, 24, 39, 0.02);
  gap: 13px;
}

.metric-icon {
  display: grid;
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  place-items: center;
  border-radius: 7px;
}

.metric-blue { color: var(--primary); background: var(--primary-soft); }
.metric-amber { color: var(--warning); background: var(--warning-soft); }
.metric-teal { color: var(--teal); background: #e7f6f6; }
.metric-green { color: var(--success); background: var(--success-soft); }

.metric-card > div:last-child {
  display: flex;
  min-width: 0;
  flex-direction: column;
}

.metric-card span {
  color: var(--text-soft);
  font-size: 12px;
}

.metric-card strong {
  margin-top: 4px;
  font-size: 23px;
  line-height: 1.1;
}

.metric-card small {
  margin-top: 7px;
  overflow: hidden;
  color: var(--text-faint);
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.panel {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  box-shadow: 0 1px 1px rgba(17, 24, 39, 0.02);
}

.panel-heading {
  display: flex;
  min-height: 66px;
  align-items: center;
  justify-content: space-between;
  padding: 0 18px;
  border-bottom: 1px solid var(--line);
  gap: 14px;
}

.panel-heading h2,
.section-heading h3 {
  margin: 0;
  font-size: 15px;
}

.overview-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  margin-bottom: 16px;
  gap: 16px;
}

.task-list,
.risk-list {
  padding: 6px 18px 10px;
}

.task-item,
.risk-item {
  display: grid;
  width: 100%;
  min-height: 60px;
  align-items: center;
  padding: 8px 0;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: transparent;
  cursor: pointer;
  gap: 10px;
  text-align: left;
}

.task-item:last-child,
.risk-item:last-child {
  border-bottom: 0;
}

.task-item {
  grid-template-columns: 25px 1fr 18px;
}

.task-item > span:nth-child(2),
.risk-item > span:nth-child(2) {
  display: flex;
  min-width: 0;
  flex-direction: column;
}

.task-item strong,
.risk-item strong {
  overflow: hidden;
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.task-item small,
.risk-item small {
  margin-top: 4px;
  color: var(--text-soft);
  font-size: 11px;
}

.task-check {
  color: #aeb7c0;
}

.risk-item {
  grid-template-columns: 9px 1fr 18px;
}

.risk-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #e39a30;
}

.flow-strip {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  padding: 20px 18px;
  overflow-x: auto;
}

.flow-item {
  display: grid;
  min-width: 130px;
  grid-template-columns: 36px 1fr 18px;
  align-items: center;
  gap: 9px;
}

.flow-item > span {
  display: grid;
  width: 36px;
  height: 36px;
  place-items: center;
  border-radius: 7px;
  color: var(--primary);
  background: var(--primary-soft);
}

.flow-item div {
  display: flex;
  flex-direction: column;
}

.flow-item div strong {
  font-size: 17px;
}

.flow-item small {
  color: var(--text-soft);
  font-size: 11px;
  white-space: nowrap;
}

.flow-item > svg:last-child {
  color: #c7cdd3;
}

.table-panel {
  overflow: hidden;
}

.hzz-history-search-panel,
.hzz-history-detail {
  margin-top: 16px;
}

.order-history-panel,
.order-history-detail {
  margin-top: 16px;
}

.order-history-embedded-heading {
  margin-top: 28px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
}

.order-history-embedded-heading h2 {
  margin: 0;
  font-size: 20px;
}

.order-history-embedded-heading p {
  margin: 5px 0 14px;
  color: var(--text-soft);
  font-size: 12px;
}

.order-history-toolbar > div:first-child {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 3px;
}

.order-history-toolbar > div:first-child small {
  color: var(--text-soft);
  font-size: 11px;
}

.order-history-toolbar {
  align-items: stretch;
  flex-direction: column;
  gap: 14px;
}

.order-history-filter-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.order-history-filter-grid label {
  display: grid;
  min-width: 0;
  gap: 5px;
}

.order-history-filter-grid label > span {
  color: var(--text-soft);
  font-size: 10px;
  font-weight: 650;
}

.order-history-filter-grid input,
.order-history-filter-grid select {
  width: 100%;
  min-width: 0;
}

.order-history-filter-wide {
  grid-column: span 2;
}

.order-history-filter-actions,
.order-history-pagination,
.order-history-pagination > div {
  display: flex;
  align-items: center;
  gap: 8px;
}

.order-history-filter-actions {
  justify-content: flex-end;
}

.order-history-pagination {
  min-height: 58px;
  justify-content: space-between;
  padding: 10px 18px;
  border-top: 1px solid var(--line);
}

.order-history-pagination > span {
  color: var(--text-soft);
  font-size: 11px;
}

.order-history-search-controls {
  display: flex;
  min-width: min(560px, 62%);
  justify-content: flex-end;
  gap: 8px;
}

.order-history-search-controls .search-box {
  width: min(440px, 100%);
}

.order-history-document-summary {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  border-bottom: 1px solid var(--line);
}

.order-history-panel .order-history-table table {
  min-width: 920px;
}

.order-history-detail .order-history-table table {
  min-width: 1040px;
}

.order-history-document-summary > div {
  display: flex;
  min-width: 0;
  min-height: 72px;
  justify-content: center;
  flex-direction: column;
  padding: 12px 18px;
  border-right: 1px solid var(--line);
  gap: 4px;
}

.order-history-document-summary > div:last-child {
  border-right: 0;
}

.order-history-document-summary span {
  color: var(--text-soft);
  font-size: 10px;
}

.order-history-document-summary strong {
  overflow: hidden;
  color: var(--text);
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hzz-history-search > div:first-child {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.hzz-history-search > div:first-child small {
  color: var(--text-soft);
  font-size: 11px;
}

.hzz-history-search-controls {
  display: flex;
  min-width: min(540px, 60%);
  justify-content: flex-end;
  gap: 8px;
}

.hzz-history-search-controls .search-box {
  width: min(420px, 100%);
}

.hzz-document-summary,
.hzz-flow-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-bottom: 1px solid var(--line);
}

.hzz-document-summary > div,
.hzz-flow-stage {
  display: flex;
  min-width: 0;
  min-height: 72px;
  justify-content: center;
  flex-direction: column;
  padding: 12px 18px;
  border-right: 1px solid var(--line);
  gap: 4px;
}

.hzz-document-summary > div:last-child,
.hzz-flow-stage:last-child {
  border-right: 0;
}

.hzz-document-summary span,
.hzz-flow-stage span,
.hzz-flow-stage small {
  overflow: hidden;
  color: var(--text-soft);
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hzz-document-summary strong,
.hzz-flow-stage strong {
  overflow: hidden;
  color: var(--text);
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hzz-flow-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  background: var(--surface-soft);
}

.hzz-history-detail > .form-alert {
  margin: 12px 18px;
}

.hzz-history-detail > .form-alert > div {
  display: grid;
  gap: 3px;
}

.hzz-history-detail > .form-alert > div small {
  display: block;
  font-weight: 500;
}

.table-toolbar,
.audit-toolbar {
  display: flex;
  min-height: 58px;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  border-bottom: 1px solid var(--line);
  gap: 12px;
}

.segmented {
  display: inline-flex;
  padding: 3px;
  border-radius: 6px;
  background: #f0f3f5;
  gap: 2px;
}

.segmented button {
  min-height: 28px;
  padding: 0 10px;
  border: 0;
  border-radius: 4px;
  color: var(--text-soft);
  background: transparent;
  cursor: pointer;
  font-size: 12px;
}

.segmented button.active {
  color: var(--text);
  background: #fff;
  box-shadow: 0 1px 3px rgba(17, 24, 39, 0.09);
  font-weight: 650;
}

.search-box,
.list-search {
  display: flex;
  height: 34px;
  align-items: center;
  padding: 0 10px;
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  color: var(--text-faint);
  background: #fff;
  gap: 6px;
}

.search-box {
  width: min(290px, 45%);
}

.search-box input,
.list-search input {
  width: 100%;
  min-width: 0;
  border: 0;
  outline: 0;
  color: var(--text);
  background: transparent;
  font-size: 12px;
}

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

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}

th {
  height: 42px;
  padding: 0 12px;
  color: #6f7984;
  background: #fafbfc;
  font-size: 11px;
  font-weight: 680;
  text-align: left;
  white-space: nowrap;
}

td {
  height: 66px;
  padding: 9px 12px;
  border-top: 1px solid var(--line);
  color: #3f4a56;
  vertical-align: middle;
}

tbody tr:hover {
  background: #fbfcfd;
}

td strong,
td small {
  display: block;
}

td strong {
  color: var(--text);
  font-size: 12px;
  font-weight: 680;
}

td small {
  margin-top: 3px;
  color: var(--text-faint);
  font-size: 10px;
  line-height: 1.35;
}

.num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.row-actions {
  width: 1%;
  text-align: right;
  white-space: nowrap;
}

.row-actions .btn + .btn {
  margin-left: 5px;
}

.row-actions .icon-btn + .icon-btn,
.row-actions .btn + .icon-btn { margin-left: 5px; }
.danger-icon { color: var(--danger); }
.danger-icon:hover { border-color: #efc4c0; background: var(--danger-soft); }

.status {
  display: inline-flex;
  min-height: 22px;
  align-items: center;
  padding: 0 7px;
  border: 1px solid transparent;
  border-radius: 11px;
  font-size: 10px;
  font-weight: 680;
  line-height: 1;
  white-space: nowrap;
}

.status-success { color: var(--success); border-color: #cde9dd; background: var(--success-soft); }
.status-warning { color: var(--warning); border-color: #f2dfb6; background: var(--warning-soft); }
.status-danger { color: var(--danger); border-color: #f0cbc7; background: var(--danger-soft); }
.status-neutral { color: #65717d; border-color: #e0e5e9; background: #f4f6f7; }

.rfq-workspace {
  display: grid;
  min-height: 680px;
  grid-template-columns: 284px minmax(0, 1fr);
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  box-shadow: var(--shadow);
}

.rfq-list-panel {
  min-width: 0;
  border-right: 1px solid var(--line);
  background: #fafbfc;
}

.list-search {
  margin: 13px 12px;
}

.rfq-list {
  height: calc(100% - 62px);
  max-height: 860px;
  overflow-y: auto;
  padding: 0 7px 12px;
}

.rfq-list-item {
  display: flex;
  width: 100%;
  min-height: 108px;
  flex-direction: column;
  justify-content: center;
  padding: 12px;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  cursor: pointer;
  gap: 7px;
  text-align: left;
}

.rfq-list-item:hover {
  background: #f3f5f7;
}

.rfq-list-item.active {
  border-color: #cfe1fa;
  background: #edf5ff;
}

.rfq-list-item > strong {
  display: -webkit-box;
  overflow: hidden;
  color: var(--text);
  font-size: 13px;
  line-height: 1.4;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.rfq-list-top,
.rfq-list-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--text-faint);
}

.rfq-list-top small,
.rfq-list-meta small {
  font-size: 10px;
}

.rfq-list-meta b {
  display: flex;
  align-items: center;
  color: var(--warning);
  font-size: 10px;
  gap: 3px;
}

.rfq-detail-panel {
  min-width: 0;
  padding-bottom: 20px;
}

.rfq-detail-header {
  display: flex;
  min-height: 104px;
  align-items: center;
  justify-content: space-between;
  padding: 18px 22px;
  border-bottom: 1px solid var(--line);
  gap: 20px;
}

.rfq-detail-header h2 {
  margin: 5px 0 3px;
  font-size: 18px;
  line-height: 1.35;
}

.rfq-detail-header p {
  margin: 0;
  color: var(--text-soft);
  font-size: 11px;
}

.eyebrow {
  display: flex;
  align-items: center;
  gap: 8px;
}

.eyebrow > span:first-child {
  color: var(--primary);
  font-size: 10px;
  font-weight: 750;
}

.fact-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 16px 22px 0;
  padding: 12px 0;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--surface-soft);
}

.fact-strip div {
  display: flex;
  min-width: 0;
  flex-direction: column;
  padding: 0 15px;
  border-right: 1px solid var(--line);
}

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

.fact-strip span {
  color: var(--text-faint);
  font-size: 10px;
}

.fact-strip strong {
  margin-top: 4px;
  overflow: hidden;
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.alert-banner {
  display: flex;
  min-height: 53px;
  align-items: center;
  margin: 12px 22px 0;
  padding: 9px 12px;
  border: 1px solid #efd9aa;
  border-radius: 6px;
  color: var(--warning);
  background: #fff9ec;
  gap: 10px;
}

.alert-banner div {
  display: flex;
  flex-direction: column;
}

.alert-banner strong {
  font-size: 11px;
}

.alert-banner p {
  margin: 2px 0 0;
  color: #815b22;
  font-size: 11px;
}

.route-banner {
  display: flex;
  align-items: flex-start;
  margin: 12px 22px 0;
  padding: 11px 13px;
  border: 1px solid #ecc8c8;
  border-radius: 6px;
  color: #8d3333;
  background: #fff6f6;
  gap: 9px;
}

.route-banner strong { font-size: 11px; }
.route-banner p { margin: 3px 0 0; color: #8a5353; font-size: 10px; line-height: 1.5; }

.section-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 22px 11px;
}

.quote-table {
  padding: 0 22px;
}

.quote-table table {
  min-width: 1040px;
  border: 1px solid var(--line);
}

.quote-table th,
.quote-table td {
  border-right: 1px solid var(--line);
}

.quote-table th:last-child,
.quote-table td:last-child {
  border-right: 0;
}

.quote-table th {
  background: #f5f7f9;
}

.quote-table td {
  height: 82px;
}

.quote-table tr.recommended-row {
  background: #f3f8ff;
}

.recommend-col {
  width: 48px;
  text-align: center;
}

.recommend-radio {
  display: inline-grid;
  width: 23px;
  height: 23px;
  place-items: center;
  padding: 0;
  border: 1px solid #b8c2cc;
  border-radius: 50%;
  color: #fff;
  background: #fff;
  cursor: pointer;
}

.recommend-radio.selected {
  border-color: var(--primary);
  background: var(--primary);
}

.recommend-choice {
  display: inline-flex;
  align-items: center;
  flex-direction: column;
  gap: 4px;
}

.recommend-choice small {
  color: var(--text-faint);
  font-size: 9px;
}

.recommend-radio:disabled { cursor: not-allowed; opacity: 0.46; }

.best-label {
  color: var(--success);
  font-weight: 680;
}

.negotiated-label {
  color: var(--primary);
  font-weight: 680;
}

.inline-action {
  display: inline-flex;
  min-height: 24px;
  align-items: center;
  margin-top: 5px;
  padding: 0;
  border: 0;
  color: var(--primary);
  background: transparent;
  cursor: pointer;
  font-size: 10px;
  font-weight: 680;
  gap: 3px;
}

.quote-inline-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0 9px;
}

.warning-action { color: var(--warning); }

.correction-state {
  display: inline-flex;
  min-height: 20px;
  align-items: center;
  margin-top: 4px;
  padding: 0 6px;
  border-radius: 4px;
  font-size: 9px;
}

.correction-state.pending { color: var(--warning); background: var(--warning-soft); }
.correction-state.approved { color: var(--success); background: var(--success-soft); }
.correction-state.rejected { color: var(--danger); background: var(--danger-soft); }

.correction-panel {
  margin-top: 18px;
  padding: 18px 22px 0;
  border-top: 1px solid var(--line);
}

.correction-panel-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.correction-panel-head h3 {
  display: flex;
  align-items: center;
  margin: 0;
  font-size: 13px;
  gap: 6px;
}

.correction-panel-head p { margin: 4px 0 0; color: var(--text-soft); font-size: 10px; }
.correction-panel-head > span { color: var(--primary); font-size: 10px; font-weight: 700; }
.correction-list { margin-top: 10px; border-top: 1px solid var(--line); }
.correction-record { padding: 12px 0; border-bottom: 1px solid var(--line); }
.correction-record-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.correction-record-top strong,
.correction-record-top small { display: block; }
.correction-record-top strong { font-size: 11px; }
.correction-record-top small { margin-top: 3px; color: var(--text-soft); font-size: 9px; }
.correction-diff { display: flex; align-items: center; flex-wrap: wrap; margin-top: 9px; gap: 6px; }
.correction-diff > span { display: inline-flex; min-height: 27px; align-items: center; padding: 0 8px; border: 1px solid var(--line); border-radius: 4px; color: var(--text-soft); background: var(--surface-soft); font-size: 9px; gap: 5px; }
.correction-diff b { color: var(--text); }
.correction-diff i { display: inline-flex; color: var(--primary); }
.correction-record p { margin: 7px 0 0; color: var(--text-soft); font-size: 10px; line-height: 1.55; }
.correction-record p b { margin-right: 6px; color: var(--text); }
.correction-record .pending-review { color: var(--warning); }

.award-history-panel {
  margin: 12px 18px 0;
  padding: 14px 16px;
  border: 1px solid #efcbc7;
  border-radius: 6px;
  background: #fffafa;
}

.award-history-list { margin-top: 10px; border-top: 1px solid #f0d7d4; }
.award-history-record { padding: 11px 0; border-bottom: 1px solid #f0d7d4; }
.award-history-record:last-child { border-bottom: 0; }
.award-history-record > div { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.award-history-record strong { font-size: 10px; }
.award-history-record p { margin: 6px 0 0; color: var(--text-soft); font-size: 9px; line-height: 1.55; }

.price-confirmation-strip,
.price-confirmation-card,
.cancelled-order-notice {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.price-confirmation-strip {
  margin: 12px 16px 0;
  padding: 11px 13px;
  border: 1px solid #c9e6d9;
  border-radius: 6px;
  color: var(--success);
  background: var(--success-soft);
}

.price-confirmation-strip.legacy { color: var(--warning); border-color: #ecd9ad; background: var(--warning-soft); }
.price-confirmation-strip strong,
.price-confirmation-strip p,
.price-confirmation-card strong,
.price-confirmation-card p,
.cancelled-order-notice strong,
.cancelled-order-notice p { display: block; margin: 0; }
.price-confirmation-strip strong,
.price-confirmation-card strong,
.cancelled-order-notice strong { font-size: 10px; }
.price-confirmation-strip p,
.price-confirmation-card p,
.cancelled-order-notice p { margin-top: 4px; color: var(--text-soft); font-size: 9px; line-height: 1.5; }

.price-confirmation-card {
  padding: 12px;
  border: 1px solid #c9e6d9;
  border-radius: 6px;
  color: var(--success);
  background: var(--success-soft);
}
.price-confirmation-card.initial { color: var(--warning); border-color: #ecd9ad; background: var(--warning-soft); }

.approval-revoke-row { display: flex; justify-content: flex-end; padding: 10px 16px 16px; }

.revoke-summary {
  display: grid;
  overflow: hidden;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border: 1px solid var(--line);
  border-radius: 6px;
}
.revoke-summary > div { min-height: 66px; padding: 12px; border-right: 1px solid var(--line); }
.revoke-summary > div:last-child { border-right: 0; }
.revoke-summary span,
.revoke-summary strong { display: block; }
.revoke-summary span { color: var(--text-faint); font-size: 9px; }
.revoke-summary strong { margin-top: 6px; font-size: 12px; }
.danger-alert { color: var(--danger); border-color: #efc5c1; background: var(--danger-soft); }

.cancelled-order-notice {
  padding: 12px;
  border: 1px solid #efc5c1;
  border-radius: 6px;
  color: var(--danger);
  background: var(--danger-soft);
}
.void-order-row { color: var(--text-soft); background: #fbfbfb; }
.void-order-row .progress i { width: 0 !important; background: var(--text-faint); }

.correction-review-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface-soft);
}

.correction-review-summary > div { min-height: 64px; padding: 11px; border-right: 1px solid var(--line); }
.correction-review-summary > div:last-child { border-right: 0; }
.correction-review-summary span,
.correction-review-summary strong { display: block; }
.correction-review-summary span { color: var(--text-faint); font-size: 9px; }
.correction-review-summary strong { margin-top: 5px; font-size: 10px; line-height: 1.45; }
.correction-review-diff { overflow: hidden; border: 1px solid var(--line); border-radius: 6px; }
.correction-review-diff > div { display: grid; min-height: 40px; grid-template-columns: 118px 1fr 18px 1fr; align-items: center; padding: 0 10px; border-bottom: 1px solid var(--line); font-size: 10px; gap: 8px; }
.correction-review-diff > div:last-child { border-bottom: 0; }
.correction-review-diff span { color: var(--text-soft); }
.correction-review-diff svg { color: var(--primary); }

.muted-best {
  color: var(--teal);
}

.wrap-cell {
  display: block;
  max-width: 135px;
  line-height: 1.35;
}

.attachment {
  display: flex;
  max-width: 170px;
  align-items: center;
  overflow: hidden;
  color: var(--primary);
  text-overflow: ellipsis;
  white-space: nowrap;
  gap: 4px;
}

.attachment-link,
.evidence-attachment {
  color: var(--primary);
  text-decoration: none;
}

.attachment-link:hover,
.evidence-attachment:hover {
  text-decoration: underline;
}

.evidence-attachment {
  display: inline-flex;
  max-width: 100%;
  align-items: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  gap: 4px;
}

.decision-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(270px, 0.8fr);
  margin: 18px 22px 0;
  gap: 12px;
}

.decision-card {
  min-height: 154px;
  padding: 15px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: #fff;
}

.decision-title {
  display: flex;
  align-items: center;
  gap: 10px;
}

.decision-title > div:last-child {
  display: flex;
  flex-direction: column;
}

.decision-title small {
  color: var(--text-faint);
  font-size: 10px;
}

.decision-title strong {
  margin-top: 2px;
  font-size: 14px;
}

.decision-icon {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 7px;
  color: var(--primary);
  background: var(--primary-soft);
}

.decision-card > p {
  margin: 12px 0 0;
  color: #56616d;
  font-size: 12px;
  line-height: 1.65;
}

.source-reason {
  display: flex;
  margin-top: 11px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
  gap: 8px;
}

.source-reason strong {
  flex: 0 0 auto;
  font-size: 11px;
}

.source-reason span {
  color: var(--text-soft);
  font-size: 11px;
}

.approval-line {
  display: grid;
  grid-template-columns: 63px 1fr;
  margin-top: 9px;
  font-size: 11px;
  gap: 8px;
}

.approval-line span {
  color: var(--text-faint);
}

.approval-line strong {
  overflow: hidden;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.approval-layout {
  display: grid;
  grid-template-columns: 330px minmax(0, 1fr);
  gap: 16px;
}

.approval-queue {
  align-self: start;
  overflow: hidden;
}

.approval-list {
  padding: 7px;
}

.approval-item {
  display: flex;
  width: 100%;
  min-height: 106px;
  flex-direction: column;
  justify-content: center;
  padding: 12px;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  cursor: pointer;
  gap: 7px;
  text-align: left;
}

.approval-item:hover {
  background: var(--surface-soft);
}

.approval-item.active {
  border-color: #cae0fb;
  background: var(--primary-soft);
}

.approval-item > span {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.approval-item > span small {
  color: var(--text-faint);
  font-size: 10px;
}

.approval-item > strong {
  display: -webkit-box;
  overflow: hidden;
  font-size: 13px;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.approval-item p {
  margin: 0;
  color: var(--text-soft);
  font-size: 10px;
}

.approval-detail {
  align-self: start;
  overflow: hidden;
}

.approval-detail-head {
  display: flex;
  min-height: 105px;
  align-items: flex-start;
  justify-content: space-between;
  padding: 20px;
  border-bottom: 1px solid var(--line);
  gap: 20px;
}

.approval-detail-head span:first-child {
  color: var(--primary);
  font-size: 10px;
  font-weight: 700;
}

.approval-detail-head h2 {
  margin: 6px 0 3px;
  font-size: 18px;
}

.approval-detail-head p {
  margin: 0;
  color: var(--text-soft);
  font-size: 11px;
}

.approval-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-bottom: 1px solid var(--line);
}

.approval-summary div {
  display: flex;
  min-height: 81px;
  flex-direction: column;
  justify-content: center;
  padding: 12px 16px;
  border-right: 1px solid var(--line);
}

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

.approval-summary span,
.reason-block > span {
  color: var(--text-faint);
  font-size: 10px;
}

.approval-summary strong {
  display: -webkit-box;
  margin-top: 5px;
  overflow: hidden;
  font-size: 12px;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.approval-risks,
.reason-block,
.evidence-list {
  margin: 16px 20px 0;
}

.approval-risks {
  padding: 12px;
  border: 1px solid #efdcb6;
  border-radius: 6px;
  background: var(--warning-soft);
}

.approval-risks.clear {
  color: var(--success);
  border-color: #cce7db;
  background: var(--success-soft);
}

.approval-risks h3 {
  display: flex;
  align-items: center;
  margin: 0 0 9px;
  color: #79511b;
  font-size: 12px;
  gap: 6px;
}

.approval-risks.clear h3 {
  margin: 0;
  color: var(--success);
}

.risk-chip {
  display: inline-flex;
  min-height: 24px;
  align-items: center;
  margin: 0 5px 3px 0;
  padding: 0 8px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 650;
}

.risk-warning { color: var(--warning); background: #fff; }
.risk-danger { color: var(--danger); background: var(--danger-soft); }

.reason-block {
  padding: 13px 14px;
  border-left: 3px solid var(--primary);
  background: #f7f9fb;
}

.reason-block p {
  margin: 5px 0 0;
  color: #3e4954;
  font-size: 12px;
  line-height: 1.65;
}

.evidence-list {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 6px;
}

.evidence-list > div,
.evidence-list p {
  display: grid;
  min-height: 42px;
  grid-template-columns: 120px 1fr 135px;
  align-items: center;
  margin: 0;
  padding: 0 12px;
  border-bottom: 1px solid var(--line);
  gap: 10px;
}

.evidence-list > div {
  grid-template-columns: 20px 1fr auto;
  background: var(--surface-soft);
}

.evidence-list p:last-child {
  border-bottom: 0;
}

.evidence-list span,
.evidence-list strong,
.evidence-list small {
  overflow: hidden;
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.evidence-list span,
.evidence-list small {
  color: var(--text-soft);
}

.approval-actions {
  display: flex;
  min-height: 72px;
  align-items: center;
  justify-content: space-between;
  margin-top: 18px;
  padding: 0 20px;
  border-top: 1px solid var(--line);
  gap: 16px;
}

.permission-note {
  display: flex;
  align-items: center;
  color: var(--text-soft);
  font-size: 11px;
  gap: 5px;
}

.decision-result {
  display: flex;
  align-items: flex-start;
  margin: 18px 20px 20px;
  padding: 14px;
  border: 1px solid;
  border-radius: 6px;
  gap: 10px;
}

.decision-result.approved { color: var(--success); border-color: #c7e7da; background: var(--success-soft); }
.decision-result.rejected { color: var(--danger); border-color: #efc5c1; background: var(--danger-soft); }

.decision-result > div {
  display: flex;
  flex-direction: column;
}

.decision-result span,
.decision-result p {
  color: #63706d;
  font-size: 11px;
}

.decision-result p {
  margin: 5px 0 0;
}

.inline-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-bottom: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.inline-metrics > div {
  display: flex;
  min-height: 70px;
  align-items: center;
  justify-content: space-between;
  padding: 0 22px;
  border-right: 1px solid var(--line);
}

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

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

.inline-metrics strong {
  font-size: 18px;
}

.dijun-goods-panel {
  margin-bottom: 16px;
}

.dijun-metrics {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 0;
  border-width: 0 0 1px;
  border-radius: 0;
  background: var(--surface-soft);
}

.detail-stack {
  display: grid;
  gap: 16px;
}

.detail-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.detail-grid > div {
  display: flex;
  min-height: 72px;
  justify-content: center;
  flex-direction: column;
  padding: 12px 16px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  gap: 4px;
}

.detail-grid > div:nth-child(3n) { border-right: 0; }
.detail-grid > div:nth-last-child(-n + 3) { border-bottom: 0; }
.detail-grid span,
.detail-grid small { color: var(--text-soft); font-size: 11px; }
.detail-grid strong { font-size: 13px; }

.section-label {
  color: var(--text);
  font-size: 13px;
  font-weight: 700;
}

.progress {
  display: inline-block;
  width: 58px;
  height: 4px;
  margin: 0 5px 2px 8px;
  overflow: hidden;
  border-radius: 2px;
  background: #e9edf0;
}

.progress i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--primary);
}

.qualified { color: var(--success); font-weight: 680; }
.unqualified { color: var(--danger); font-weight: 680; }

.two-panels {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 14px;
  gap: 14px;
}

.compact-records {
  padding: 5px 16px 10px;
}

.compact-record {
  display: grid;
  min-height: 58px;
  grid-template-columns: 32px 1fr auto;
  align-items: center;
  border-bottom: 1px solid var(--line);
  gap: 9px;
}

.compact-record:last-child {
  border-bottom: 0;
}

.compact-record > div {
  display: flex;
  min-width: 0;
  flex-direction: column;
}

.compact-record strong,
.compact-record small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.compact-record small {
  margin-top: 3px;
  color: var(--text-soft);
  font-size: 10px;
}

.compact-record b {
  font-size: 12px;
}

.record-icon {
  display: grid;
  width: 29px;
  height: 29px;
  place-items: center;
  border-radius: 6px;
  color: var(--success);
  background: var(--success-soft);
}

.record-icon.danger { color: var(--danger); background: var(--danger-soft); }

.empty-state {
  display: flex;
  min-height: 280px;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  color: var(--text-soft);
  gap: 7px;
  text-align: center;
}

.empty-state.compact {
  min-height: 128px;
}

.empty-state strong {
  color: var(--text);
  font-size: 13px;
}

.empty-state span {
  font-size: 11px;
}

.empty-compact {
  display: grid;
  min-height: 72px;
  place-items: center;
  color: var(--text-faint);
  font-size: 11px;
}

.supplier-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.supplier-card {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.supplier-card-head {
  display: grid;
  min-height: 78px;
  grid-template-columns: 38px 1fr auto;
  align-items: center;
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
  gap: 9px;
}

.supplier-logo {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border-radius: 7px;
  color: var(--primary);
  background: var(--primary-soft);
  font-weight: 750;
}

.supplier-card-head > div {
  display: flex;
  min-width: 0;
  flex-direction: column;
}

.supplier-card-head strong,
.supplier-card-head small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.supplier-card-head strong {
  font-size: 12px;
}

.supplier-card-head small {
  margin-top: 4px;
  color: var(--text-soft);
  font-size: 10px;
}

.supplier-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  padding: 14px 10px;
}

.supplier-stats div {
  display: flex;
  align-items: center;
  flex-direction: column;
  border-right: 1px solid var(--line);
}

.supplier-stats div:last-child { border-right: 0; }
.supplier-stats span { color: var(--text-faint); font-size: 10px; }
.supplier-stats strong { margin-top: 4px; font-size: 14px; }

.supplier-foot {
  display: flex;
  min-height: 40px;
  align-items: center;
  justify-content: space-between;
  padding: 0 14px;
  border-top: 1px solid var(--line);
  color: var(--text-soft);
  font-size: 10px;
}

.supplier-foot span {
  display: flex;
  align-items: center;
  gap: 5px;
}

.success-text { color: var(--success); }
.warning-text { color: var(--warning); }
.danger-text { color: var(--danger); }

.order-control-detail {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.control-summary-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 7px;
}

.control-summary-grid > div {
  display: flex;
  min-height: 72px;
  flex-direction: column;
  justify-content: center;
  padding: 11px;
  border-right: 1px solid var(--line);
  background: var(--surface-soft);
}

.control-summary-grid > div:last-child {
  border-right: 0;
}

.control-summary-grid span,
.price-dual span,
.payment-control-summary span {
  color: var(--text-faint);
  font-size: 10px;
}

.control-summary-grid strong,
.price-dual strong,
.payment-control-summary strong {
  margin-top: 5px;
  font-size: 13px;
}

.price-dual,
.payment-control-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  overflow: hidden;
  border: 1px solid #d6e4f6;
  border-radius: 7px;
  background: #f4f8fd;
}

.price-dual > div,
.payment-control-summary > div {
  display: flex;
  min-height: 76px;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  padding: 10px;
  border-right: 1px solid #d6e4f6;
  text-align: center;
}

.price-dual > div:last-child,
.payment-control-summary > div:last-child {
  border-right: 0;
}

.price-dual small,
.payment-control-summary small {
  margin-top: 4px;
  color: var(--text-soft);
  font-size: 10px;
}

.contract-control-list {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 7px;
}

.contract-control-list > div {
  display: grid;
  min-height: 54px;
  grid-template-columns: 24px 100px 1fr;
  align-items: center;
  padding: 8px 12px;
  border-bottom: 1px solid var(--line);
  gap: 7px;
}

.contract-control-list > div:last-child {
  border-bottom: 0;
}

.contract-control-list > div > span {
  color: var(--primary);
}

.contract-control-list strong {
  font-size: 11px;
}

.contract-control-list p {
  margin: 0;
  color: var(--text-soft);
  font-size: 11px;
}

.order-control-actions {
  padding-top: 0;
}

.rule-panel {
  margin-top: 14px;
}

.control-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  padding: 18px;
  gap: 14px;
}

.control-grid > div {
  display: grid;
  grid-template-columns: 26px 1fr;
  align-items: center;
  gap: 3px 6px;
}

.control-grid svg {
  grid-row: 1 / 3;
  color: var(--primary);
}

.control-grid strong {
  font-size: 12px;
}

.control-grid span {
  color: var(--text-soft);
  font-size: 10px;
}

.audit-panel {
  overflow: hidden;
}

.audit-toolbar span {
  color: var(--text-soft);
  font-size: 11px;
}

.audit-list {
  padding: 4px 20px 16px;
}

.audit-row {
  position: relative;
  display: grid;
  min-height: 72px;
  grid-template-columns: 12px 142px 1fr 90px;
  align-items: center;
  border-bottom: 1px solid var(--line);
  gap: 12px;
}

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

.audit-row::before {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 5px;
  width: 1px;
  background: #dbe1e6;
  content: "";
}

.audit-row:first-child::before { top: 50%; }
.audit-row:last-child::before { bottom: 50%; }

.audit-node {
  position: relative;
  z-index: 1;
  width: 11px;
  height: 11px;
  border: 3px solid #d5e6fc;
  border-radius: 50%;
  background: var(--primary);
}

.audit-time,
.audit-body {
  display: flex;
  min-width: 0;
  flex-direction: column;
}

.audit-time { color: #4f5b67; font-size: 11px; }
.audit-time small { margin-top: 3px; color: var(--text-faint); font-size: 10px; }
.audit-body strong { font-size: 12px; }
.audit-body span { margin-top: 2px; color: var(--primary); font-size: 10px; }
.audit-body p { margin: 3px 0 0; overflow: hidden; color: var(--text-soft); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.audit-actor { overflow: hidden; color: var(--text-soft); font-size: 11px; text-align: right; text-overflow: ellipsis; white-space: nowrap; }

.modal-layer {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  padding: 20px;
}

.modal-backdrop {
  position: absolute;
  inset: 0;
  border: 0;
  background: rgba(21, 28, 36, 0.48);
  backdrop-filter: blur(2px);
  cursor: default;
}

.modal-card {
  position: relative;
  z-index: 1;
  display: flex;
  width: min(680px, 100%);
  max-height: min(760px, calc(100vh - 40px));
  overflow: hidden;
  flex-direction: column;
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 24px 70px rgba(17, 24, 39, 0.25);
}

.modal-head {
  display: flex;
  flex: 0 0 auto;
  min-height: 72px;
  align-items: center;
  justify-content: space-between;
  padding: 12px 18px;
  border-bottom: 1px solid var(--line);
  gap: 14px;
}

.modal-head h2 {
  margin: 0;
  font-size: 17px;
}

.modal-head p {
  margin: 4px 0 0;
  color: var(--text-soft);
  font-size: 11px;
}

.modal-body {
  min-height: 0;
  flex: 1 1 auto;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 18px;
}

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

.request-single-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.prepayment-input-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: end;
  gap: 14px;
}

.prepayment-input-grid > .formula-note {
  min-height: 58px;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 3px;
}

.component-editor {
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--surface-soft);
}

.component-editor-head,
.component-row-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.component-editor-head > div {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.component-editor-head strong,
.component-row-head strong { font-size: 12px; }
.component-editor-head small { color: var(--text-soft); font-size: 10px; }
.component-list { display: grid; margin-top: 10px; gap: 10px; }

.component-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  padding: 11px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
  gap: 10px;
}

.component-row-head,
.component-name { grid-column: 1 / -1; }

.monthly-backfill-boundary { margin-top: 10px; }

.flow-journey-panel { overflow: hidden; }

.flow-journey-list {
  display: grid;
  padding: 14px;
  gap: 12px;
}

.flow-journey-card {
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.flow-journey-title,
.flow-journey-next {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.flow-journey-title > div {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 4px;
}

.flow-journey-title span,
.flow-journey-title small,
.flow-journey-next { color: var(--text-soft); font-size: 11px; }
.flow-journey-title strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.flow-journey-steps {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  margin: 12px 0;
  border: 1px solid var(--line);
  border-radius: 7px;
  overflow: hidden;
}

.flow-journey-steps > div {
  display: flex;
  min-height: 58px;
  padding: 10px;
  border-right: 1px solid var(--line);
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  background: var(--surface-soft);
}

.flow-journey-steps > div:last-child { border-right: 0; }
.flow-journey-steps > div.done { background: #f1faf6; }
.flow-journey-steps span { color: var(--text-soft); font-size: 10px; }
.flow-journey-steps strong { font-size: 12px; }
.flow-journey-next strong { color: var(--text); }

.quantity-feedback-banner,
.next-step-banner {
  display: flex;
  align-items: flex-start;
  margin: 12px 22px 0;
  padding: 11px 12px;
  border: 1px solid #cfe0f5;
  border-radius: 7px;
  color: #245b98;
  background: #f1f7ff;
  gap: 9px;
}

.next-step-banner { margin: 12px 0 0; border-color: #eed8ab; color: #82591d; background: var(--warning-soft); }
.quantity-feedback-banner svg,
.next-step-banner svg { flex: 0 0 auto; margin-top: 1px; }
.quantity-feedback-banner strong,
.next-step-banner strong { display: block; font-size: 11px; }
.quantity-feedback-banner p,
.next-step-banner p { margin: 4px 0 0; font-size: 10px; line-height: 1.5; }

.field {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 6px;
}

.field.full,
.full {
  grid-column: 1 / -1;
}

.field > span {
  color: #4f5a66;
  font-size: 11px;
  font-weight: 650;
}

.field input,
.field select,
.field textarea {
  width: 100%;
  min-width: 0;
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  color: var(--text);
  background: #fff;
}

.field input,
.field select {
  height: 38px;
  padding: 0 10px;
}

.field textarea {
  min-height: 78px;
  padding: 9px 10px;
  line-height: 1.5;
  resize: vertical;
}

.field input::placeholder,
.field textarea::placeholder {
  color: #adb5bd;
}

.localized-date-control {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 44px auto;
  align-items: center;
  gap: 6px;
}

.field .native-date-proxy {
  width: 44px;
  padding: 0 8px;
  color: transparent;
  cursor: pointer;
}

.native-date-proxy::-webkit-datetime-edit {
  display: none;
}

.date-today-button {
  height: 38px;
  padding: 0 10px;
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  color: var(--brand);
  background: var(--surface-soft);
  font-size: 11px;
  font-weight: 650;
  cursor: pointer;
}

.date-today-button:hover {
  border-color: var(--brand);
  background: var(--brand-soft);
}

.field-help {
  color: var(--text-faint);
  font-size: 10px;
  line-height: 1.45;
}

.supplier-search-input {
  position: relative;
}

.supplier-search-input > svg {
  position: absolute;
  top: 11px;
  left: 11px;
  z-index: 1;
  color: var(--text-faint);
  pointer-events: none;
}

.supplier-search-input input[type="search"] {
  padding-left: 34px;
}

.supplier-results {
  display: flex;
  max-height: 218px;
  overflow-y: auto;
  flex-direction: column;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
}

.supplier-result {
  display: grid;
  min-height: 56px;
  grid-template-columns: 28px minmax(0, 1fr) auto;
  align-items: center;
  padding: 8px 10px;
  border: 0;
  border-bottom: 1px solid var(--line);
  color: var(--text);
  background: #fff;
  text-align: left;
  cursor: pointer;
  gap: 8px;
}

.supplier-result:last-of-type { border-bottom: 0; }
.supplier-result:hover,
.supplier-result:focus-visible { background: var(--surface-soft); outline: 0; }
.supplier-result-icon { display: grid; width: 28px; height: 28px; place-items: center; border-radius: 6px; color: var(--primary); background: var(--primary-soft); }
.supplier-result strong,
.supplier-result small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.supplier-result strong { font-size: 11px; }
.supplier-result small { margin-top: 3px; color: var(--text-soft); font-size: 10px; }
.supplier-result em { color: var(--text-soft); font-size: 10px; font-style: normal; }
.supplier-no-result { margin: 0; padding: 18px 12px; color: var(--text-soft); font-size: 11px; text-align: center; }

.quote-payment-field {
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--surface-soft);
}

.payment-percent-field {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(150px, 0.7fr);
  align-items: center;
  gap: 10px;
}

.payment-percent-field > span {
  color: var(--text-soft);
  font-size: 10px;
  font-weight: 650;
}

.quote-payment-summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  min-height: 46px;
  gap: 12px;
}

.quote-payment-summary strong { font-size: 12px; }
.quote-payment-summary small { color: var(--text-soft); }

.file-picker {
  position: relative;
  display: flex;
  min-height: 42px;
  align-items: center;
  justify-content: center;
  border: 1px dashed #aab7c4;
  border-radius: 6px;
  color: var(--primary);
  background: #f8fbff;
  cursor: pointer;
  gap: 7px;
}

.file-picker:hover,
.file-picker:focus-visible,
.file-picker.drag-active {
  border-color: var(--primary);
  background: var(--primary-soft);
  outline: 0;
}
.file-picker.drag-active { border-style: solid; box-shadow: 0 0 0 3px rgba(22, 112, 221, 0.12); }
.file-picker input { position: absolute; width: 1px; height: 1px; overflow: hidden; opacity: 0; }
.file-selection { display: flex; min-height: 34px; align-items: center; padding: 7px 9px; border-radius: 5px; color: var(--text-soft); background: var(--surface-soft); font-size: 10px; gap: 6px; }
.file-selection span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file-selection.selected { color: var(--success); background: var(--success-soft); }

.modal-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-top: 5px;
  gap: 8px;
}

.form-grid > .modal-actions {
  position: sticky;
  bottom: -18px;
  z-index: 3;
  min-height: 64px;
  margin: 0 -18px -18px;
  padding: 12px 18px;
  border-top: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 -8px 18px rgba(27, 39, 51, 0.06);
}

.check-field {
  display: flex;
  align-items: flex-start;
  padding: 11px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface-soft);
  color: #4d5864;
  font-size: 11px;
  gap: 8px;
}

.check-field input {
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  margin: 0;
  accent-color: var(--primary);
}

.form-alert,
.formula-note {
  display: flex;
  min-height: 42px;
  align-items: center;
  padding: 9px 11px;
  border: 1px solid #eed8ab;
  border-radius: 6px;
  color: #82591d;
  background: var(--warning-soft);
  font-size: 11px;
  gap: 7px;
}

.formula-note {
  color: var(--primary);
  border-color: #d5e5fa;
  background: var(--primary-soft);
}

.award-preview {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface-soft);
}

.award-preview div {
  display: flex;
  min-height: 64px;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  border-right: 1px solid var(--line);
}

.award-preview div:last-child { border-right: 0; }
.award-preview span { color: var(--text-faint); font-size: 10px; }
.award-preview strong { margin-top: 4px; font-size: 13px; }

.role-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.role-option {
  display: grid;
  min-height: 66px;
  grid-template-columns: 34px 1fr 18px;
  align-items: center;
  padding: 9px 11px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: #fff;
  cursor: pointer;
  gap: 9px;
  text-align: left;
}

.role-option:hover,
.role-option.active {
  border-color: #bcd6f7;
  background: var(--primary-soft);
}

.role-option > span {
  display: grid;
  width: 32px;
  height: 32px;
  place-items: center;
  border-radius: 6px;
  color: var(--primary);
  background: #fff;
}

.role-option > div {
  display: flex;
  min-width: 0;
  flex-direction: column;
}

.role-option strong { font-size: 12px; }
.role-option small { margin-top: 3px; overflow: hidden; color: var(--text-soft); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }

.confirm-copy {
  display: flex;
  align-items: flex-start;
  padding: 14px;
  border: 1px solid #f0c9c5;
  border-radius: 6px;
  color: var(--danger);
  background: var(--danger-soft);
  gap: 10px;
}

.confirm-copy p {
  margin: 1px 0 0;
  color: #704641;
  font-size: 12px;
  line-height: 1.6;
}

.toast-region {
  position: fixed;
  z-index: 200;
  top: 18px;
  right: 18px;
  display: flex;
  width: min(360px, calc(100vw - 36px));
  flex-direction: column;
  gap: 8px;
  /* 提示条只给人看，不接点按：盖在按钮上时手指照样点到下面的按钮。 */
  pointer-events: none;
}

.toast {
  display: flex;
  min-height: 46px;
  align-items: center;
  padding: 10px 13px;
  border: 1px solid;
  border-radius: 7px;
  background: #fff;
  box-shadow: 0 12px 30px rgba(17, 24, 39, 0.16);
  gap: 8px;
  animation: toast-in 180ms ease-out;
}

.toast-success { color: var(--success); border-color: #bcdccc; }
.toast-danger { color: var(--danger); border-color: #ebbbb6; }
.toast span { color: var(--text); font-size: 12px; }

@keyframes toast-in {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: translateY(0); }
}

[hidden] {
  display: none !important;
}

@media (max-width: 1180px) {
  .metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .supplier-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .approval-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .approval-summary div:nth-child(2) { border-right: 0; }
  .approval-summary div:nth-child(-n + 2) { border-bottom: 1px solid var(--line); }
  /* 10-12：采购执行条窄屏不再横着拖，换成三列两行。 */
  .flow-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 18px; overflow-x: visible; }
  .flow-item { min-width: 0; }
  .flow-item:nth-child(3) > svg:last-child { visibility: hidden; }
  .detail-actions { flex-wrap: wrap; justify-content: flex-end; }
}

@media (max-width: 900px) {
  .sidebar {
    transform: translateX(-100%);
    transition: transform 180ms ease;
  }

  .sidebar.sidebar-open { transform: translateX(0); }
  .sidebar-close { display: inline-grid; border: 0; background: transparent; }
  .sidebar-scrim { position: fixed; inset: 0; z-index: 25; border: 0; background: rgba(17, 24, 39, 0.38); }
  .sidebar-scrim.show { display: block; }
  .main-content { margin-left: 0; }
  .mobile-menu { display: inline-grid; margin-right: 10px; }
  .page-content { padding: 22px 18px 42px; }
  .topbar { padding: 0 18px; }
  .test-environment .topbar-actions { min-width: 0; overflow-x: auto; padding: 8px 0; }
  .test-environment-banner { padding-right: 18px; padding-left: 18px; }
  .overview-grid,
  .approval-layout { grid-template-columns: 1fr; }
  .approval-queue { max-height: 340px; overflow-y: auto; }
  .rfq-workspace { grid-template-columns: 230px minmax(0, 1fr); }
  .rfq-detail-header { align-items: flex-start; flex-direction: column; }
  .fact-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fact-strip div:nth-child(2) { border-right: 0; }
  .fact-strip div:nth-child(-n + 2) { margin-bottom: 10px; padding-bottom: 10px; border-bottom: 1px solid var(--line); }
  .decision-grid { grid-template-columns: 1fr; }
  .control-grid { grid-template-columns: 1fr; }
  .order-history-filter-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 680px) {
  .topbar { height: 60px; padding: 0 12px; }
  .topbar-title > div { display: none; }
  .role-switcher { max-width: 150px; }
  .role-switcher select { min-width: 0; max-width: 112px; }
  /* 手机上不放「共享 R版本号」：版本号一长，总经理那一栏就挤出屏幕、整页要横着拖。 */
  .sync-chip { display: none; }
  /* 提示条放到顶栏下面，不盖左上角菜单。 */
  .toast-region { top: 68px; right: 12px; left: 12px; width: auto; }
  .test-role-switcher { max-width: 180px; }
  .test-role-switcher select { max-width: 142px; }
  .test-exit-button { width: 36px; padding: 0; }
  .test-exit-button span { display: none; }
  .test-environment-banner { padding: 8px 12px; }
  .page-content { padding: 18px 12px 36px; }
  .page-header { min-height: auto; align-items: stretch; flex-direction: column; margin-bottom: 16px; gap: 12px; }
  .page-header h1 { font-size: 21px; }
  .page-actions { align-self: flex-start; }
  .metric-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
  .metric-card { min-height: 105px; padding: 13px; gap: 9px; }
  .metric-card strong { font-size: 18px; }
  .metric-card small { display: none; }
  .overview-grid { gap: 10px; }
  .flow-strip { padding: 15px 12px; }
  .table-toolbar { align-items: stretch; flex-direction: column; }
  .search-box { width: 100%; }
  .order-history-search-controls { width: 100%; min-width: 0; justify-content: stretch; }
  .order-history-search-controls .search-box { width: 100%; }
  .order-history-filter-wide { grid-column: 1 / -1; }
  .order-history-document-summary { grid-template-columns: 1fr; }
  .order-history-document-summary > div { min-height: 56px; border-right: 0; border-bottom: 1px solid var(--line); }
  .order-history-document-summary > div:last-child { border-bottom: 0; }
  .hzz-history-search-controls { min-width: 0; justify-content: stretch; }
  .hzz-history-search-controls .search-box { width: 100%; }
  .hzz-document-summary { grid-template-columns: 1fr 1fr; }
  .hzz-document-summary > div:nth-child(2) { border-right: 0; }
  .hzz-document-summary > div:nth-child(-n + 2) { border-bottom: 1px solid var(--line); }
  .hzz-flow-grid { grid-template-columns: 1fr; }
  .hzz-flow-stage { border-right: 0; border-bottom: 1px solid var(--line); }
  .hzz-flow-stage:last-child { border-bottom: 0; }
  .segmented { align-self: flex-start; max-width: 100%; overflow-x: auto; }
  .rfq-workspace { display: block; overflow: visible; border: 0; background: transparent; box-shadow: none; }
  .rfq-list-panel { margin-bottom: 10px; overflow: hidden; border: 1px solid var(--line); border-radius: 8px; background: #fff; }
  .rfq-list { display: flex; height: auto; padding: 0 8px 10px; overflow-x: auto; }
  .rfq-list-item { width: 235px; min-width: 235px; min-height: 100px; }
  .rfq-detail-panel { overflow: hidden; border: 1px solid var(--line); border-radius: 8px; background: #fff; }
  .rfq-detail-header { min-height: auto; padding: 16px; }
  .rfq-detail-header h2 { font-size: 16px; }
  /* 询价详情顶上的按钮在手机上也带字（录入报价、提交总经理确认），两个一行。 */
  .detail-actions { display: grid; width: 100%; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .detail-actions .btn { min-width: 0; min-height: 40px; padding: 0 10px; }
  .detail-actions .btn span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .fact-strip,
  .alert-banner,
  .route-banner,
  .quantity-feedback-banner,
  .decision-grid { margin-right: 12px; margin-left: 12px; }
  .section-heading { padding-right: 12px; padding-left: 12px; }
  .quote-table { padding: 0 12px; }
  .decision-grid { margin-bottom: 12px; }
  .approval-detail-head { min-height: auto; padding: 16px; }
  .approval-detail-head h2 { font-size: 16px; }
  .approval-summary { grid-template-columns: 1fr; }
  .approval-summary div { min-height: 64px; border-right: 0; border-bottom: 1px solid var(--line); }
  .approval-summary div:last-child { border-bottom: 0; }
  .evidence-list > div,
  .evidence-list p { grid-template-columns: 86px 1fr; }
  .evidence-list > div { grid-template-columns: 20px 1fr auto; }
  .evidence-list p small { display: none; }
  .approval-actions { align-items: stretch; flex-direction: column; padding: 12px 16px; }
  .approval-actions > div:last-child { justify-content: flex-end; }
  .inline-metrics { grid-template-columns: 1fr; }
  .inline-metrics > div { min-height: 56px; border-right: 0; border-bottom: 1px solid var(--line); }
  .inline-metrics > div:last-child { border-bottom: 0; }
  .dijun-metrics { grid-template-columns: 1fr 1fr; }
  .dijun-metrics > div:nth-child(2) { border-right: 0; }
  .detail-grid { grid-template-columns: 1fr; }
  .detail-grid > div { border-right: 0; }
  .detail-grid > div:nth-last-child(-n + 3) { border-bottom: 1px solid var(--line); }
  .detail-grid > div:last-child { border-bottom: 0; }
  .two-panels,
  .supplier-grid { grid-template-columns: 1fr; }
  .audit-toolbar { align-items: stretch; flex-direction: column; }
  .audit-toolbar .search-box { width: 100%; }
  .audit-row { grid-template-columns: 12px 1fr auto; padding: 10px 0; }
  .audit-time { grid-column: 2; grid-row: 1; }
  .audit-body { grid-column: 2 / 4; grid-row: 2; }
  .audit-actor { grid-column: 3; grid-row: 1; }
  .audit-node { grid-row: 1 / 3; }
  .form-grid { grid-template-columns: 1fr; }
  .payment-percent-field,
  .quote-payment-summary { grid-template-columns: 1fr; }
  .request-single-fields,
  .prepayment-input-grid,
  .component-row { grid-template-columns: 1fr; }
  .component-row-head,
  .component-name { grid-column: 1; }
  .flow-journey-steps { grid-template-columns: 1fr; }
  .flow-journey-steps > div { min-height: 48px; border-right: 0; border-bottom: 1px solid var(--line); }
  .flow-journey-steps > div:last-child { border-bottom: 0; }
  .flow-journey-title,
  .flow-journey-next { align-items: flex-start; }
  .field.full,
  .full { grid-column: 1; }
  .role-options { grid-template-columns: 1fr; }
  .award-preview { grid-template-columns: 1fr; }
  .award-preview div { min-height: 50px; border-right: 0; border-bottom: 1px solid var(--line); }
  .award-preview div:last-child { border-bottom: 0; }
  .control-summary-grid,
  .price-dual,
  .payment-control-summary,
  .correction-review-summary { grid-template-columns: 1fr; }
  .control-summary-grid > div,
  .price-dual > div,
  .payment-control-summary > div,
  .correction-review-summary > div { min-height: 58px; border-right: 0; border-bottom: 1px solid var(--line); }
  .control-summary-grid > div:last-child,
  .price-dual > div:last-child,
  .payment-control-summary > div:last-child,
  .correction-review-summary > div:last-child { border-bottom: 0; }
  .correction-panel,
  .award-history-panel { margin-right: 12px; margin-left: 12px; padding-right: 12px; padding-left: 12px; }
  .revoke-summary { grid-template-columns: 1fr; }
  .revoke-summary > div { min-height: 56px; border-right: 0; border-bottom: 1px solid var(--line); }
  .revoke-summary > div:last-child { border-bottom: 0; }
  .correction-review-diff > div { grid-template-columns: 92px minmax(0, 1fr) 16px minmax(0, 1fr); }
  .contract-control-list > div { grid-template-columns: 24px 1fr; }
  .contract-control-list p { grid-column: 2; }
  .modal-layer { align-items: end; padding: 0; }
  .modal-card { width: 100%; max-height: 92dvh; border-radius: 8px 8px 0 0; }
  .modal-head { min-height: 64px; }
  .modal-body { padding: 14px; }
  .form-grid > .modal-actions { bottom: -14px; margin: 0 -14px -14px; padding: 11px 14px; }
}

/* 采购订单主表在手机上改成一张张卡片：登记合同、登记到货、合同与付款这些按钮不用再横着拖表格去找。
   沿用历史采购表的手机卡片写法（左边小字标题、右边内容）。 */
@media (max-width: 680px) {
  .mobile-card-table { overflow: visible; }
  .mobile-card-table table,
  .mobile-card-table tbody,
  .mobile-card-table tr,
  .mobile-card-table td { display: block; width: 100%; }
  .mobile-card-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }
  .mobile-card-table tbody { padding: 10px; }
  .mobile-card-table tr { margin-bottom: 10px; overflow: hidden; border: 1px solid var(--line); border-radius: 7px; }
  .mobile-card-table tr:last-child { margin-bottom: 0; }
  .mobile-card-table td {
    position: relative;
    height: auto;
    min-height: 44px;
    padding: 9px 10px 9px 38%;
    text-align: right;
    white-space: normal;
  }
  .mobile-card-table tr td:first-child { border-top: 0; }
  .mobile-card-table td::before {
    position: absolute;
    top: 11px;
    left: 10px;
    width: calc(38% - 20px);
    color: var(--text-soft);
    content: attr(data-label);
    font-size: 10px;
    font-weight: 650;
    text-align: left;
  }
  .mobile-card-table td .progress { margin-right: 0; }
  .mobile-card-table td.row-actions { display: flex; width: 100%; flex-wrap: wrap; justify-content: flex-end; padding-left: 10px; gap: 8px; }
  .mobile-card-table td.row-actions:empty { display: none; }
  .mobile-card-table td.row-actions::before { display: none; }
  .mobile-card-table td.row-actions .btn { min-height: 40px; margin-left: 0; flex: 1 1 auto; }
}

@media (max-width: 420px) {
  .metric-grid { grid-template-columns: 1fr; }
  .metric-card { min-height: 92px; }
  .metric-card small { display: block; }
  .order-history-search-controls { flex-direction: column; }
  .order-history-search-controls .btn { width: 100%; }
  .order-history-filter-grid { grid-template-columns: 1fr; }
  .order-history-filter-wide { grid-column: auto; }
  .order-history-filter-actions { align-items: stretch; flex-direction: column; }
  .order-history-filter-actions .btn { width: 100%; }
  .order-history-pagination { align-items: stretch; flex-direction: column; }
  .order-history-pagination > div { display: grid; grid-template-columns: 1fr 1fr; }
  .order-history-table { overflow: visible; }
  .order-history-table table,
  .order-history-table tbody,
  .order-history-table tr,
  .order-history-table td { display: block; width: 100%; }
  .order-history-panel .order-history-table table,
  .order-history-detail .order-history-table table { min-width: 0; }
  .order-history-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }
  .order-history-table tbody { padding: 10px; }
  .order-history-table tr { margin-bottom: 10px; overflow: hidden; border: 1px solid var(--line); border-radius: 7px; }
  .order-history-table tr:last-child { margin-bottom: 0; }
  .order-history-table td {
    display: grid;
    height: auto;
    min-height: 44px;
    grid-template-columns: minmax(86px, 36%) minmax(0, 1fr);
    align-items: center;
    padding: 8px 10px;
    text-align: right;
    gap: 8px;
  }
  .order-history-table td::before {
    color: var(--text-soft);
    content: attr(data-label);
    font-size: 10px;
    font-weight: 650;
    text-align: left;
  }
  .order-history-table td.num { text-align: right; }
  .order-history-table td .btn { justify-self: end; }
  .order-history-table td[colspan] { display: block; padding: 0; border: 0; text-align: left; }
  .order-history-table td[colspan]::before { display: none; }
  .fact-strip { grid-template-columns: 1fr; }
  .fact-strip div { border-right: 0; }
  .fact-strip div:nth-child(-n + 3) { margin-bottom: 8px; padding-bottom: 8px; border-bottom: 1px solid var(--line); }
}
.sampling-history-notice {
  margin-bottom: 14px;
}

.sampling-history-notice span {
  display: inline;
}

.sampling-history-targets {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-bottom: 14px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
}

.sampling-history-targets > div {
  display: flex;
  min-height: 92px;
  flex-direction: column;
  justify-content: center;
  padding: 15px 18px;
  border-right: 1px solid var(--line);
}

.sampling-history-targets > div:last-child {
  border-right: 0;
}

.sampling-history-targets span,
.sampling-history-card-head span,
.sampling-history-facts span,
.sampling-history-supplier span,
.sampling-history-tier span {
  color: var(--text-soft);
  font-size: 11px;
}

.sampling-history-targets strong {
  margin-top: 5px;
  font-size: 18px;
}

.sampling-history-targets small {
  margin-top: 5px;
  color: var(--text-faint);
  font-size: 11px;
}

.sampling-history-panel {
  overflow: hidden;
}

.sampling-history-toolbar {
  border-bottom: 1px solid var(--line);
}

.sampling-history-list {
  display: grid;
  padding: 14px;
  gap: 12px;
}

.sampling-history-card {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.sampling-history-card-head {
  display: flex;
  min-height: 67px;
  align-items: center;
  justify-content: space-between;
  padding: 13px 16px;
  border-bottom: 1px solid var(--line);
  gap: 12px;
}

.sampling-history-card-head h2 {
  margin: 4px 0 0;
  font-size: 16px;
}

.readonly-chip,
.supplier-match {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  padding: 5px 8px;
  border-radius: 999px;
  gap: 4px;
  font-size: 11px;
  font-weight: 700;
}

.readonly-chip {
  color: var(--primary) !important;
  background: var(--primary-soft);
}

.sampling-history-facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-bottom: 1px solid var(--line);
  background: var(--surface-soft);
}

.sampling-history-facts > div {
  display: flex;
  min-height: 66px;
  flex-direction: column;
  justify-content: center;
  padding: 10px 16px;
  border-right: 1px solid var(--line);
}

.sampling-history-facts > div:last-child {
  border-right: 0;
}

.sampling-history-facts strong {
  margin-top: 4px;
  font-size: 12px;
  line-height: 1.55;
}

.sampling-history-quotes {
  display: grid;
  gap: 0;
}

.sampling-history-quote {
  display: grid;
  grid-template-columns: minmax(220px, 0.8fr) minmax(0, 2.2fr);
  border-bottom: 1px solid var(--line);
}

.sampling-history-quote:last-child {
  border-bottom: 0;
}

.sampling-history-supplier {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border-right: 1px solid var(--line);
  gap: 10px;
}

.sampling-history-supplier > div {
  display: flex;
  min-width: 0;
  flex-direction: column;
}

.sampling-history-supplier strong {
  margin-top: 4px;
  font-size: 12px;
  line-height: 1.45;
}

.supplier-match.matched {
  color: var(--success);
  background: var(--success-soft);
}

.supplier-match.unmatched {
  color: #8a5a11;
  background: var(--warning-soft);
}

.sampling-history-tier-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

.sampling-history-tier {
  display: flex;
  min-height: 74px;
  flex-direction: column;
  justify-content: center;
  padding: 10px 14px;
  border-right: 1px solid var(--line);
}

.sampling-history-tier:last-child {
  border-right: 0;
}

.sampling-history-tier strong {
  margin-top: 4px;
  color: var(--text);
  font-size: 13px;
}

.sampling-history-tier small {
  margin-top: 3px;
  color: var(--text-faint);
  font-size: 10px;
}

.sampling-history-tier.mould-fee {
  background: #fafbfc;
}

.sampling-history-empty {
  display: flex;
  min-height: 150px;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  color: var(--text-soft);
  gap: 6px;
}

.sampling-history-empty strong {
  color: var(--text);
  font-size: 14px;
}

.sampling-history-empty span {
  font-size: 12px;
}

  .sampling-history-targets { grid-template-columns: 1fr; }
  .sampling-history-targets > div { min-height: 72px; border-right: 0; border-bottom: 1px solid var(--line); }
  .sampling-history-targets > div:last-child { border-bottom: 0; }
  .sampling-history-quote { grid-template-columns: 1fr; }
  .sampling-history-supplier { border-right: 0; border-bottom: 1px solid var(--line); }
  .sampling-history-list { padding: 8px; }
  .sampling-history-facts { grid-template-columns: 1fr; }
  .sampling-history-facts > div { border-right: 0; border-bottom: 1px solid var(--line); }
  .sampling-history-facts > div:last-child { border-bottom: 0; }
  .sampling-history-supplier { align-items: flex-start; flex-direction: column; }
  .sampling-history-tier-list { grid-template-columns: 1fr 1fr; }
  .sampling-history-tier { border-bottom: 1px solid var(--line); }

/* 经手记录：沿用审计记录的时间线语汇，压成一行一步（几点 · 哪一步 · 谁）。 */
.handling-trail {
  margin-top: 18px;
  padding: 18px 22px 20px;
  border-top: 1px solid var(--line);
}

.handling-trail-list {
  margin: 10px 0 0;
  padding: 0;
  border-top: 1px solid var(--line);
  list-style: none;
}

.handling-trail-list li {
  display: grid;
  min-height: 44px;
  grid-template-columns: 132px minmax(0, 1fr) minmax(96px, auto);
  align-items: center;
  padding: 7px 0;
  border-bottom: 1px solid var(--line);
  gap: 12px;
}

.handling-trail-list time {
  color: #4f5b67;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}

.handling-trail-list strong,
.handling-trail-list small { display: block; }
.handling-trail-list strong { font-size: 12px; }
.handling-trail-list small { margin-top: 2px; overflow: hidden; color: var(--text-soft); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.handling-trail-actor { min-width: 0; text-align: right; }
.handling-trail-empty { margin: 10px 0 0; color: var(--text-soft); font-size: 11px; }
.order-control-detail .handling-trail { margin: 0; padding: 0; border-top: 0; }

/* 定标审批里一起看这张单子的需求：谁发起、为什么买、数量、要货日期。 */
.approval-request-facts { margin: 16px 20px 0; }
.approval-request-facts small { margin-top: 2px; color: var(--text-soft); font-size: 10px; }

@media (max-width: 680px) {
  .handling-trail { padding: 16px 12px; }
  .handling-trail-list li { grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; }
  .handling-trail-list time { grid-column: 1 / -1; }
  .approval-request-facts { margin: 12px 12px 0; }
}

/* 三家总表（第三步）：沿用工作台的浅色面板、蓝色选中、系统字体；金额右对齐等宽数字。手机飞书 390 宽一列排下。 */
.summary-month-bar {
  display: flex;
  align-items: center;
  margin-bottom: 14px;
  gap: 8px;
}

.summary-month-select {
  display: flex;
  height: 36px;
  min-width: 0;
  align-items: center;
  padding: 0 8px 0 10px;
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  color: var(--text-soft);
  background: #fff;
  gap: 6px;
}

.summary-month-select select {
  min-width: 0;
  border: 0;
  color: var(--text);
  background: transparent;
  font-size: 14px;
  font-weight: 700;
}

.summary-month-select select:focus-visible { outline: 0; }
.summary-month-select:focus-within { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); }

.summary-company-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: start;
  margin-bottom: 16px;
  gap: 12px;
}

.summary-company {
  display: grid;
  padding: 16px 18px;
  gap: 10px;
}

.summary-company-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.summary-company-head h2 {
  margin: 0;
  font-size: 15px;
}

.summary-amount {
  font-size: 24px;
  line-height: 1.15;
}

.summary-company-meta {
  margin: 0;
  color: var(--text-soft);
  font-size: 12px;
  line-height: 1.5;
}

.summary-unmarked .summary-amount { color: var(--warning); }

.summary-sub-rows {
  display: grid;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-soft);
}

.summary-sub-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  border-top: 1px solid var(--line);
  gap: 12px;
}

.summary-sub-row:first-child { border-top: 0; }
.summary-sub-row > span { display: grid; gap: 2px; font-size: 13px; font-weight: 680; }
.summary-sub-row small { color: var(--text-soft); font-size: 11px; font-weight: 400; line-height: 1.4; }
.summary-sub-row > strong { font-size: 15px; }

.summary-details > summary {
  display: flex;
  min-height: 36px;
  align-items: center;
  color: var(--primary);
  cursor: pointer;
  font-size: 12px;
  font-weight: 650;
  list-style: none;
  gap: 4px;
}

.summary-details > summary::-webkit-details-marker { display: none; }
.summary-details[open] > summary svg { transform: rotate(90deg); }
.summary-uni-details { padding: 0 12px 4px; border-top: 1px solid var(--line); }

.summary-order-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.summary-order-list li,
.summary-uni-company li {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 8px 0;
  border-top: 1px solid var(--line);
  font-size: 12px;
  gap: 12px;
}

.summary-order-list li > div { display: grid; min-width: 0; gap: 2px; }
.summary-order-list small { color: var(--text-faint); font-size: 11px; line-height: 1.4; }
.summary-uni-company { padding: 6px 0 8px; border-top: 1px solid var(--line); }
.summary-uni-company ul { margin: 4px 0 0; padding: 0 0 0 12px; list-style: none; }
.summary-uni-company li { color: var(--text-soft); }
.summary-uni-head { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; }

.summary-overdue .panel-heading { padding-top: 12px; padding-bottom: 12px; }
.summary-overdue .panel-heading .status { flex: 0 0 auto; }

.summary-footnote {
  display: flex;
  align-items: flex-start;
  margin: 14px 0 0;
  color: var(--text-soft);
  font-size: 12px;
  line-height: 1.6;
  gap: 8px;
}

.summary-footnote svg { flex: 0 0 auto; margin-top: 3px; }

@media (max-width: 1180px) {
  .summary-company-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 680px) {
  .summary-company-grid { grid-template-columns: 1fr; gap: 10px; }
  .summary-company { padding: 14px; }
  .summary-amount { font-size: 22px; }
  .summary-month-select { flex: 1 1 auto; }
  .summary-month-select select { width: 100%; }
}

/* 第四步「旧记录比价」：沿用工作台的浅色面板、蓝色、系统字体和等宽数字。
   一页三块：搜索框 + 四种来源接没接上；每样东西一块（最近一次下单价和涨跌放最上面、每家供应商、每一条）；页底一行口径。
   手机（约 390 宽）一列，每一条压成两三行，不横着拖。 */
.price-search-panel { margin-bottom: 14px; }

.price-search {
  display: flex;
  padding: 14px 16px;
  gap: 8px;
}

.price-search .search-box {
  width: auto;
  height: 40px;
  flex: 1 1 auto;
}

.price-search .search-box input { font-size: 14px; }
.price-search .search-box:focus-within { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); }
.price-search .btn { height: 40px; flex: 0 0 auto; }

.price-sources {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 0;
  padding: 0 16px 6px;
  list-style: none;
  column-gap: 28px;
}

.price-source {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  padding: 10px 0;
  border-top: 1px solid var(--line);
  gap: 4px 10px;
}

.price-source > strong { font-size: 13px; }
.price-source > small { grid-column: 1 / -1; color: var(--text-soft); font-size: 11px; line-height: 1.55; }
.price-source-unavailable > strong { color: var(--text-soft); }

.price-groups { display: grid; gap: 14px; }

.price-source-line {
  display: flex;
  align-items: flex-start;
  margin: 0;
  padding: 10px 16px 12px;
  border-top: 1px solid var(--line);
  color: var(--success);
  font-size: 12px;
  font-weight: 650;
  line-height: 1.5;
  gap: 6px;
}

.price-source-line svg { flex: 0 0 auto; margin-top: 2px; }
.price-source-line-warn { color: var(--warning); }
/* 采购部的表格式变了：比「没接上」更醒目（红字浅红底），沿用页面里已有的红色。 */
.price-source-line-changed { color: var(--danger); background: var(--danger-soft); }
.price-sources-panel { margin-top: 14px; }
.price-sources-panel .price-subhead { padding-bottom: 2px; }

.price-group-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid var(--line);
  gap: 12px;
}

.price-group-head h2 { margin: 0; font-size: 16px; line-height: 1.35; overflow-wrap: anywhere; }
.price-group-head p { margin: 3px 0 0; color: var(--text-soft); font-size: 12px; }
.price-group-head .status { flex: 0 0 auto; margin-top: 1px; white-space: normal; text-align: right; line-height: 1.3; padding-top: 3px; padding-bottom: 3px; }

.price-latest {
  display: grid;
  padding: 14px 16px;
  border-bottom: 1px solid var(--line);
  background: var(--surface-soft);
  gap: 6px;
}

.price-latest-main { display: grid; gap: 2px; }
.price-latest-main span { color: var(--text-soft); font-size: 13px; font-weight: 650; }
.price-latest-main strong { font-size: 24px; line-height: 1.15; text-align: left; }
.price-latest-none .price-latest-main strong { color: var(--text-soft); font-size: 15px; }
.price-latest p { margin: 0; color: var(--text-soft); font-size: 12px; line-height: 1.55; }
.price-latest .price-trend { font-size: 14px; }

.price-trend {
  display: inline-flex;
  align-items: flex-start;
  color: var(--text-soft);
  font-size: 12px;
  font-weight: 680;
  line-height: 1.45;
  gap: 5px;
}

.price-trend svg { flex: 0 0 auto; margin-top: 2px; }
.price-trend-up { color: var(--danger); }
.price-trend-down { color: var(--success); }

.price-subhead {
  margin: 0;
  padding: 14px 16px 6px;
  font-size: 13px;
}

.price-supplier-list,
.price-record-list {
  margin: 0;
  padding: 0 16px 6px;
  list-style: none;
}

.price-supplier-list li {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) minmax(0, 1.3fr) minmax(0, 1fr);
  align-items: start;
  padding: 10px 0;
  border-top: 1px solid var(--line);
  font-size: 12px;
  gap: 4px 16px;
}

.price-supplier-list li > div,
.price-record-list li > div { display: grid; min-width: 0; gap: 2px; }
.price-supplier-list small,
.price-record-list small { color: var(--text-faint); font-size: 11px; line-height: 1.45; overflow-wrap: anywhere; }
.price-supplier-name strong,
.price-record-who strong { overflow-wrap: anywhere; }
.price-supplier-order strong { font-size: 14px; }
.price-supplier-list .num,
.price-record-list .num { text-align: left; white-space: normal; }

.price-record-list li {
  display: grid;
  grid-template-columns: 132px minmax(0, 0.9fr) minmax(0, 1fr) minmax(0, 1.6fr);
  align-items: start;
  padding: 9px 0;
  border-top: 1px solid var(--line);
  font-size: 12px;
  gap: 4px 16px;
}

.price-record-list .price-record-price { grid-auto-flow: column; justify-content: start; align-items: center; column-gap: 8px; }
.price-record-price strong { font-size: 13px; }
.price-kind-order { color: var(--primary); border-color: #cfe0fb; background: var(--primary-soft); }

.price-more {
  margin: 0;
  padding: 4px 16px 14px;
  color: var(--text-soft);
  font-size: 12px;
}

.price-groups + .price-more { padding: 12px 0 0; }

.price-more-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  padding: 4px 16px 14px;
  gap: 6px 12px;
}

.price-more-row small { color: var(--text-soft); font-size: 12px; }

.price-candidates {
  display: grid;
  margin: 0;
  padding: 0 0 0 18px;
  color: var(--text);
  font-size: 12px;
  line-height: 1.55;
  gap: 2px;
}

.price-latest-unsure .price-latest-main strong { color: var(--warning); font-size: 18px; }

@media (max-width: 900px) {
  .price-sources { grid-template-columns: 1fr; }
}

@media (max-width: 680px) {
  .price-search { padding: 12px; }
  .price-search .search-box input { font-size: 16px; }
  .price-search .btn span { display: none; }
  .price-search .btn { width: 44px; padding: 0; justify-content: center; }
  .price-sources { padding: 0 12px 4px; }
  .price-source-line { padding: 10px 12px 12px; }
  .price-group-head,
  .price-latest { padding: 12px; }
  .price-group-head { flex-direction: column; gap: 8px; }
  .price-group-head .status { text-align: left; }
  .price-latest-main strong { font-size: 26px; }
  .price-subhead { padding: 12px 12px 4px; }
  .price-supplier-list,
  .price-record-list { padding: 0 12px 4px; }
  .price-supplier-list li { grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; }
  .price-supplier-list .price-supplier-order { justify-items: end; text-align: right; }
  .price-supplier-trend,
  .price-supplier-quote { grid-column: 1 / -1; }
  .price-supplier-list .price-supplier-quote { grid-auto-flow: column; justify-content: start; align-items: baseline; column-gap: 6px; }
  .price-record-list li { grid-template-columns: minmax(0, 1fr) auto; gap: 3px 12px; }
  .price-record-list .price-record-price { justify-content: end; }
  .price-record-who,
  .price-record-what { grid-column: 1 / -1; }
  .price-more { padding: 4px 12px 12px; }
  .price-more-row { padding: 4px 12px 12px; }
}

/* 第六步 6a「原料包材看板」、原料试点、包材下单：沿用三家总表和旧记录比价的浅色面板、月份条、卡片表格，不另起一套。
   看板桌面两张卡并排（原料、包材），手机一列；询价、审批页里的旧记录价钱直接套旧记录比价那一块，去掉阴影免得卡里套卡。 */
.raw-pack-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.raw-pack-section + .raw-pack-section { margin-top: 14px; }
.raw-pack-earlier { padding: 0 16px 6px; border-top: 1px solid var(--line); }
.raw-pack-earlier .table-wrap { margin: 0 -16px; }
.request-source-block { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
/* 搜索框左边留出放大镜的位置（.field input 的内边距会盖掉 .catalog-search-input 那条，这里只给慧致造包材这个框）。 */
[data-hzz-product-picker] .catalog-search-input input { padding-left: 38px; }
.hzz-price-heading { gap: 12px; }
.hzz-price-embed { padding: 0 22px; }
.hzz-price-embed .price-group { box-shadow: none; }
.hzz-price-more { margin: 8px 22px 0; color: var(--text-soft); font-size: 12px; line-height: 1.5; }
.hzz-price-panel .price-source-line { padding: 8px 0 0; border-top: 0; }

@media (max-width: 680px) {
  .raw-pack-grid { grid-template-columns: 1fr; }
  .hzz-price-heading { flex-direction: column; align-items: flex-start; padding: 16px 12px 10px; }
  .hzz-price-embed { padding: 0 12px; }
  .hzz-price-more { margin: 8px 12px 0; }
}

/* 10-12 界面优化·常用四页（采购总览、原料包材看板、旧记录比价、采购订单）：沿用工作台原样的浅色面板、蓝色、系统中文字体、
   等宽数字和状态小标，只改摆放——关键数字和要办的事放进第一屏，手机（约 390 宽）不横着拖、卡片更紧凑。
   选择器都挂在这几页自己的类上（overview-*、raw-pack-*、orders-*、dijun-*、card-grid），别的页面不受影响。 */
.overview-tasks .panel-heading .status { flex: 0 0 auto; }

/* 原料包材看板：卡里那行「没到齐几张、还没录进慧致造几张」。 */
.raw-pack-todo {
  display: flex;
  flex-wrap: wrap;
  margin: 0;
  gap: 6px;
}

/* 采购订单：威仕达订单表在最上面，蒂俊两块接在它下面；搜索框照旧在表头右边。 */
.orders-main-panel .table-toolbar { justify-content: flex-end; }
.orders-main-panel + .dijun-goods-panel { margin-top: 16px; }
/* 蒂俊「到货 / 已分 / 现货」三段太长：只在两段之间折行（原来一行写完，1366 宽的电脑上整张表要横着拖）。 */
.dijun-goods-table td[data-label="到货 / 已分 / 现货"] { white-space: normal; }
.dijun-progress-part { white-space: nowrap; }

/* 窄一点的电脑窗口（侧栏还在、内容区不到 950 宽）：订单表、蒂俊表的按钮上下叠，数字下面那行小字可以折行，少横着拖。 */
@media (min-width: 681px) and (max-width: 1180px) {
  .orders-main-panel .row-actions,
  .dijun-goods-table .row-actions { white-space: normal; }
  .orders-main-panel .row-actions .btn,
  .dijun-goods-table .row-actions .btn { margin: 3px 0 3px 5px; }
  .orders-main-panel td.num small,
  .dijun-goods-table td.num small { white-space: normal; }
}

@media (max-width: 680px) {
  /* 采购总览：四个数两两一排（原来手机上一个一排，四张卡占满第一屏，「我的待办」被挤到下面）。 */
  .metric-grid.overview-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .overview-metrics .metric-card {
    display: grid;
    min-height: 0;
    grid-template-columns: 26px minmax(0, 1fr);
    align-items: center;
    align-content: start;
    padding: 11px 12px 12px;
    gap: 4px 8px;
  }
  .overview-metrics .metric-card > div:last-child { display: contents; }
  .overview-metrics .metric-icon { width: 26px; height: 26px; flex-basis: 26px; border-radius: 6px; }
  .overview-metrics .metric-icon svg { width: 15px; height: 15px; }
  .overview-metrics .metric-card span { grid-column: 2; }
  .overview-metrics .metric-card strong { grid-column: 1 / -1; margin-top: 2px; font-size: 20px; overflow-wrap: anywhere; }
  .overview-metrics .metric-card small { display: block; grid-column: 1 / -1; margin-top: 0; overflow: visible; line-height: 1.45; white-space: normal; text-wrap: pretty; }
  /* 采购执行：三列两行，图标缩小，字可以折行。 */
  .flow-strip { gap: 16px 8px; padding: 14px 12px; }
  .flow-item { grid-template-columns: 30px minmax(0, 1fr) 12px; gap: 6px; }
  .flow-item > span { width: 30px; height: 30px; }
  .flow-item small { white-space: normal; }

  /* 采购订单：上面几个数两两一排，字在上、数在下。 */
  .inline-metrics.orders-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .inline-metrics.orders-metrics > div {
    min-height: 0;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    padding: 10px 14px;
    border-right: 1px solid var(--line);
    border-bottom: 0;
    gap: 3px;
  }
  .inline-metrics.orders-metrics > div:nth-child(2n) { border-right: 0; }
  .inline-metrics.orders-metrics > div:last-child:nth-child(odd) { grid-column: 1 / -1; border-top: 1px solid var(--line); border-right: 0; }
  .orders-metrics strong { font-size: 18px; overflow-wrap: anywhere; }
  .orders-main-panel .table-toolbar { padding: 10px 12px; }

  /* 这几页的表在手机上排成紧凑卡片：卡头一条浅底（单号 + 状态），下面两列「小字标题在上、内容在下」，按钮占满一行。
     叠在 10-08 那套手机卡片（.mobile-card-table）上，只对挂了 card-grid 的几张表生效。 */
  .card-grid .mobile-card-table tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .card-grid .mobile-card-table td {
    min-height: 0;
    padding: 8px 12px;
    border-top: 0;
    text-align: left;
  }
  .card-grid .mobile-card-table td::before { position: static; display: block; width: auto; margin-bottom: 3px; }
  .card-grid .mobile-card-table td.num { text-align: left; }
  .card-grid .mobile-card-table td .progress { margin: 6px 0 2px; }
  .card-grid .mobile-card-table td.row-actions { order: 20; grid-column: 1 / -1; padding: 10px 12px 12px; border-top: 1px solid var(--line); }
  .card-grid .mobile-card-table td[colspan] { grid-column: 1 / -1; padding: 0; }
  .card-grid .mobile-card-table td[colspan]::before,
  .card-grid .mobile-card-table td.row-actions::before { display: none; }
  /* 蒂俊那块：标题、说明在上，「新建蒂俊成品采购」按钮另起一行；四个数两两一排，最后一排不画底线。 */
  .dijun-goods-panel .panel-heading { align-items: flex-start; flex-direction: column; padding-top: 14px; padding-bottom: 14px; gap: 10px; }
  .dijun-metrics > div:nth-last-child(-n + 2) { border-bottom: 0; }

  /* 卡头。 */
  .orders-main-panel .mobile-card-table td:is([data-label="订单号"], [data-label="状态"]),
  .raw-pack-arrival-table td:is([data-label="单号"], [data-label="状态"]),
  .raw-pack-hzz-table td[data-label="单号"],
  .dijun-goods-table td:is([data-label="蒂俊采购单"], [data-label="状态"]),
  .dijun-monthly-table td:is([data-label="月份"], [data-label="销售公司"]) {
    padding-top: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--line);
    background: var(--surface-soft);
  }
  .orders-main-panel .mobile-card-table td:is([data-label="订单号"], [data-label="状态"])::before,
  .raw-pack-arrival-table td:is([data-label="单号"], [data-label="状态"])::before,
  .raw-pack-hzz-table td[data-label="单号"]::before,
  .dijun-goods-table td:is([data-label="蒂俊采购单"], [data-label="状态"])::before,
  .dijun-monthly-table td:is([data-label="月份"], [data-label="销售公司"])::before { display: none; }
  .orders-main-panel .mobile-card-table td[data-label="状态"],
  .raw-pack-arrival-table td[data-label="状态"],
  .dijun-goods-table td[data-label="状态"],
  .dijun-monthly-table td[data-label="销售公司"] { text-align: right; }

  /* 每张表卡里的先后：卡头 → 品名 → 两两一排的数 → 按钮。 */
  .orders-main-panel .mobile-card-table td[data-label="订单号"] { order: 1; }
  .orders-main-panel .mobile-card-table td[data-label="状态"] { order: 2; }
  .orders-main-panel .mobile-card-table td[data-label="品名 / 供应商"] { order: 3; grid-column: 1 / -1; }
  .orders-main-panel .mobile-card-table td[data-label="订单数量"] { order: 4; }
  .orders-main-panel .mobile-card-table td[data-label="交期"] { order: 5; }
  .orders-main-panel .mobile-card-table td[data-label="累计到货 / 入库"] { order: 6; }
  .orders-main-panel .mobile-card-table td[data-label="结算金额"] { order: 7; }
  /* 跟单那一版没有金额那一格：到货进度占满一行。 */
  .orders-main-panel .mobile-card-table tr:not(:has(td[data-label="结算金额"])) td[data-label="累计到货 / 入库"] { grid-column: 1 / -1; }

  .raw-pack-arrival-table td[data-label="单号"] { order: 1; }
  .raw-pack-arrival-table td[data-label="状态"] { order: 2; }
  .raw-pack-arrival-table td[data-label="品名 / 供应商"] { order: 3; grid-column: 1 / -1; }
  .raw-pack-arrival-table td[data-label="下单"] { order: 4; }
  .raw-pack-arrival-table td[data-label="要货日期"] { order: 5; }
  .raw-pack-arrival-table td[data-label="到了几件 / 共几件"] { order: 6; grid-column: 1 / -1; }

  .raw-pack-hzz-table td[data-label="单号"],
  .raw-pack-hzz-table td[data-label="品名 / 供应商"] { grid-column: 1 / -1; }

  .dijun-goods-table td[data-label="蒂俊采购单"] { order: 1; }
  .dijun-goods-table td[data-label="状态"] { order: 2; }
  .dijun-goods-table td:is([data-label="成品 / 供应商"], [data-label="采购数量"], [data-label="到货 / 已分 / 现货"]) { order: 3; grid-column: 1 / -1; }
  .dijun-goods-table td:is([data-label="采购金额"], [data-label="计划到货"]) { order: 4; }

  .dijun-monthly-table td[data-label="应结合计"] { grid-column: 1 / -1; }
}