:root { --control-height:40px; --control-height-compact:32px; --control-radius:8px; --control-border:#d8dce0; --control-text:#243744; --control-muted:#64717c; --control-accent:#ad4918; --control-accent-hover:#903b11; --control-focus:0 0 0 3px rgb(173 73 24 / 18%); }
.up-button { display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:var(--control-height); padding:9px 15px; border:1px solid var(--control-border); border-radius:var(--control-radius); background:#fff; color:var(--control-text); font:600 14px/20px var(--up-font,system-ui); white-space:nowrap; cursor:pointer; transition:background .15s,border-color .15s,box-shadow .15s; }
.up-button:hover:not(:disabled){background:#f5f6f7;border-color:#b8c0c6}.up-button:active:not(:disabled){background:#eceff1}
.up-button--primary {background:var(--control-accent);color:white;border-color:var(--control-accent)}.up-button--primary:hover:not(:disabled){background:var(--control-accent-hover);border-color:var(--control-accent-hover)}
.up-button--ghost {border-color:transparent;background:transparent}.up-button--ghost:hover:not(:disabled){border-color:transparent;background:#f1f3f4}
.up-button--danger {color:#ab3535;border-color:#e9c2c2;background:#fff7f6}.up-button--danger:hover:not(:disabled){background:#fbeae8;border-color:#ce9191}
.up-button--compact {min-height:var(--control-height-compact);padding:5px 10px;font-size:13px;font-weight:550;gap:6px}
.up-button:disabled {background:#f0f1f2;color:#939aa1;border-color:#e4e6e8;cursor:not-allowed;box-shadow:none}
.up-button:focus-visible,.up-select-trigger:focus-visible{outline:2px solid var(--control-accent);outline-offset:2px;box-shadow:var(--control-focus)}
.up-button svg {flex-shrink:0}.up-spinner {animation:up-spin .8s linear infinite}@keyframes up-spin{to{transform:rotate(360deg)}}
.up-select {display:block;min-width:0}.up-select .up-select-trigger {min-height:var(--control-height);padding:9px 12px;border:1px solid var(--control-border);border-radius:var(--control-radius);background:#fff;color:var(--control-text);font:400 14px/20px var(--up-font,system-ui);box-shadow:none}
.up-select .up-select-trigger:hover{border-color:#a8b3bc;background:#fff}.up-select .up-select-trigger[data-state=open]{border-color:var(--control-accent);box-shadow:var(--control-focus)}
.up-select--compact .up-select-trigger{min-height:var(--control-height-compact);padding:5px 10px;font-size:13px}.up-select .up-select-trigger[data-disabled]{opacity:1;background:#f1f2f3;color:#9098a0;cursor:not-allowed}
.up-file-upload {position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;border:1.5px dashed #b9c4cd;border-radius:12px;background:#fafbfc;min-height:245px;padding:28px;gap:12px;transition:background .15s,border-color .15s}
.up-file-upload.is-dragging{background:#fff3e9;border-color:var(--control-accent);box-shadow:var(--control-focus)}
.up-file-input {position:absolute!important;width:1px!important;height:1px!important;min-height:0!important;padding:0!important;opacity:0;overflow:hidden;pointer-events:none}
.up-file-icon {display:grid;place-items:center;flex-shrink:0;width:56px;height:56px;border-radius:12px;background:#f2e9df;color:var(--control-accent)}
.up-file-upload h3{margin:0;font-size:18px;font-weight:650}.up-file-upload p,.up-file-upload small{margin:0;font-size:13px;color:var(--control-muted)}
.up-file-upload--selected{flex-direction:row;min-height:94px;padding:18px;text-align:left;border-style:solid;gap:14px;background:#fff}
.up-file-copy{flex:1;min-width:0;display:grid;gap:8px}.up-file-copy strong{font-size:14px;overflow-wrap:anywhere}.up-file-copy>span{display:flex;align-items:center;gap:6px;font-size:12px;color:#287459}
.up-stepper {display:flex;list-style:none;margin:0;padding:0;gap:0}.up-stepper li{position:relative;flex:1;display:flex;align-items:center;gap:10px;font-size:13px;color:#7b838c;padding-right:24px}.up-stepper li:not(:last-child)::after{content:'';height:1px;flex:1;background:#e1e4e7;margin-left:6px}
.up-stepper li>span{display:grid;place-items:center;flex-shrink:0;width:28px;height:28px;border:1px solid #dce0e3;border-radius:50%;background:#fff;font-weight:650}.up-stepper li strong{font-weight:500;white-space:nowrap}
.up-stepper li[aria-current=step]{color:var(--control-accent)}.up-stepper li[aria-current=step]>span{color:#fff;background:var(--control-accent);border-color:var(--control-accent)}.up-stepper li[aria-current=step] strong{font-weight:650}
.up-stepper li[data-complete=true]>span{color:#287459;background:#edf7f2;border-color:#d5e8dd}
@media(max-width:600px){.up-stepper li{gap:6px;padding-right:10px;font-size:12px}.up-stepper li:not(:last-child)::after{margin-left:0}.up-file-upload{padding:22px 14px}.up-file-upload--selected{flex-wrap:wrap}.up-file-upload--selected>.up-button{margin-left:70px}.up-stepper li>span{width:24px;height:24px}}
@media(prefers-reduced-motion:reduce){.up-spinner{animation:none}}
.up-input {width:100%;min-width:0;min-height:var(--field-height,40px);padding:var(--field-padding,9px 12px);border:1px solid var(--control-border);border-radius:var(--control-radius);background:#fff;color:var(--control-text);font:400 var(--field-font,14px)/20px var(--up-font,system-ui);transition:border-color .15s,box-shadow .15s}
.up-input:hover:not(:disabled){border-color:#a8b3bc}.up-input:focus-visible{outline:2px solid var(--control-accent);outline-offset:1px;box-shadow:var(--control-focus)}.up-input:disabled{background:#f1f2f3;color:#9098a0;cursor:not-allowed}.up-input::placeholder{color:#89939c}.up-textarea{min-height:88px;resize:vertical}
.app-select {
  display: block;
  width: 100%;
  min-width: 0;
}

.app-select-trigger {
  display: flex;
  width: 100%;
  min-width: 0;
  min-height: 40px;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 11px;
  overflow: hidden;
  color: var(--ink, #20251f);
  border: 1px solid var(--line-strong, #cbc7b8);
  border-radius: 5px;
  background: var(--paper, #fffdf7);
  font-size: 12px;
  font-weight: 650;
  line-height: 1.3;
  text-align: left;
}

.app-select-trigger > span:first-child {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.app-select-trigger:hover {
  border-color: #b7aa9d;
  background: #fffaf2;
}

.app-select-trigger[data-state="open"] {
  border-color: var(--orange, #bb5a21);
  box-shadow: 0 0 0 3px rgb(187 90 33 / 11%);
}

.app-select-trigger[data-placeholder] { color: var(--faint, #95978f); }
.app-select-trigger[data-disabled] { cursor: not-allowed; opacity: .52; }
.app-select-trigger[aria-invalid="true"] { border-color: var(--red, #a23f37); }

.app-select-icon {
  display: grid;
  flex: 0 0 auto;
  color: var(--muted, #6e7169);
  place-items: center;
  transition: transform var(--motion-fast, 130ms) var(--ease-standard, ease);
}

.app-select-trigger[data-state="open"] .app-select-icon { transform: rotate(180deg); }

.app-select-content {
  z-index: 220;
  width: var(--radix-select-trigger-width);
  min-width: min(220px, calc(100vw - 24px));
  max-width: min(430px, calc(100vw - 24px));
  max-height: min(360px, var(--radix-select-content-available-height));
  overflow: hidden;
  color: var(--ink, #20251f);
  border: 1px solid var(--line-strong, #cbc7b8);
  border-radius: 7px;
  background: var(--paper, #fffdf7);
  box-shadow: 0 20px 56px rgb(24 31 25 / 18%);
  animation: app-select-content-in var(--motion-fast, 130ms) var(--ease-enter, ease-out) both;
}

.app-select-viewport { padding: 5px; }

.app-select-item {
  position: relative;
  display: flex;
  min-height: 40px;
  align-items: center;
  padding: 8px 36px 8px 10px;
  border-radius: 4px;
  outline: 0;
  font-size: 12px;
  line-height: 1.35;
  user-select: none;
}

.app-select-item[data-highlighted] {
  color: var(--navy, #172936);
  background: var(--orange-soft, #fff0e4);
}

.app-select-item[data-state="checked"] { font-weight: 750; }
.app-select-item[data-disabled] { opacity: .42; }

.app-select-item-copy {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 2px;
}

.app-select-item-copy > span:first-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.app-select-item-description {
  overflow: hidden;
  color: var(--muted, #6e7169);
  font-size: 12px;
  font-weight: 500;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.app-select-indicator {
  position: absolute;
  top: 50%;
  right: 10px;
  display: grid;
  color: var(--orange, #bb5a21);
  transform: translateY(-50%);
  place-items: center;
}

.app-select-scroll-button {
  display: grid;
  height: 28px;
  color: var(--muted, #6e7169);
  background: #f8f5ec;
  place-items: center;
}

@keyframes app-select-content-in {
  from { opacity: 0; transform: translateY(-4px) scale(.985); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .app-select-content,
  .app-select-icon { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}
.container-capacity-table{width:100%;min-width:740px;border-collapse:collapse;font-size:12px;line-height:1.5;text-align:left}
.container-capacity-table th,.container-capacity-table td{padding:10px;border-bottom:1px solid #dedbcf;vertical-align:top}
.container-capacity-table th{background:#f5f3ea;font-weight:600}
.container-capacity-table small{display:block;color:#6e7169;margin-top:4px}
[data-testid="container-capacity"] .shipment-sku-controls label{display:flex;flex-direction:column;gap:6px;min-width:170px;font-size:12px}
[data-testid="container-capacity"] .shipment-sku-controls{flex-wrap:wrap}
.shipment-workspace-backdrop { position: fixed; inset: 0; z-index: 160; display: grid; padding: 24px; place-items: center; background: rgb(12 22 28 / 58%); backdrop-filter: blur(6px); animation: shipment-fade-in var(--motion-base, 190ms) ease both; }
.shipment-workspace { display: grid; grid-template-rows: auto auto minmax(0, 1fr) auto; width: min(1320px, 100%); height: min(850px, calc(100dvh - 48px)); min-height: 0; overflow: hidden; color: var(--ink, #20251f); border: 1px solid var(--line-strong, #cbc7b8); border-radius: 12px; background: var(--paper, #fffdf7); box-shadow: 0 28px 90px rgb(0 0 0 / 24%); animation: shipment-enter var(--motion-base, 190ms) var(--ease-enter, ease-out) both; }
.shipment-workspace-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; padding: 22px 26px 17px; border-bottom: 1px solid var(--line, #dedbcf); }
.shipment-workspace-kicker { color: var(--muted, #6e7169); font-size: 12px; }
.shipment-workspace-header h2 { margin: 6px 0; color: var(--navy, #172936); font-size: 23px; }
.shipment-workspace-header p { margin: 0; color: var(--muted, #6e7169); font-size: 13px; line-height: 1.5; }
.shipment-icon-button { display: inline-grid; width: 34px; height: 34px; flex: 0 0 auto; border: 1px solid transparent; border-radius: 6px; background: transparent; color: var(--muted, #6e7169); place-items: center; }
.shipment-icon-button:hover { background: var(--canvas, #f2f0e7); border-color: var(--line, #dedbcf); }
.shipment-workspace-toolbar { display: flex; justify-content: space-between; gap: 24px; align-items: end; padding: 14px 26px 0; border-bottom: 1px solid var(--line, #dedbcf); background: #faf9f3; }
.shipment-name-field { display: flex; flex: 1; max-width: 500px; align-items: center; gap: 12px; padding-bottom: 13px; font-size: 12px; color: var(--muted, #6e7169); white-space: nowrap; }
.shipment-workspace input:not([type="checkbox"]), .shipment-workspace textarea { width: 100%; min-width: 0; min-height: 38px; padding: 8px 10px; border: 1px solid var(--line-strong, #cbc7b8); border-radius: 6px; background: white; font-size: 13px; }
.shipment-workspace input[type="checkbox"] { width: 16px; height: 16px; flex: 0 0 16px; accent-color: var(--orange, #bb5a21); }
.shipment-tabs { display: flex; gap: 8px; flex: 0 0 auto; }
.shipment-tabs button { padding: 15px 14px; border: 0; border-bottom: 3px solid transparent; background: transparent; font-size: 14px; font-weight: 650; }
.shipment-tabs button[aria-selected="true"] { border-bottom-color: var(--orange, #bb5a21); color: var(--orange, #bb5a21); }
.shipment-workspace-body { min-height: 0; overflow: auto; overscroll-behavior: contain; padding: 20px 26px 26px; scrollbar-gutter: stable; }
.shipment-sku-selection { margin-bottom: 15px; border: 1px solid var(--line, #dedbcf); border-radius: 7px; background: #faf9f3; }
.shipment-sku-selection > summary { padding: 13px 15px; cursor: pointer; font-size: 14px; font-weight: 650; }
.shipment-sku-selection > summary > span { margin-left: 15px; color: var(--orange, #bb5a21); font-size: 12px; font-weight: 500; }
.shipment-sku-controls { display: flex; gap: 10px; padding: 0 14px 12px; }
.shipment-sku-controls input { flex: 1; }
.shipment-sku-controls button { flex: 0 0 auto; padding: 8px; border: 1px solid var(--line-strong, #cbc7b8); border-radius: 5px; background: white; font-size: 12px; }
.shipment-sku-list { max-height: 320px; overflow: auto; overscroll-behavior: contain; border-top: 1px solid var(--line, #dedbcf); }
.shipment-sku-row { display: grid; grid-template-columns: minmax(220px, 1fr) 115px 175px; gap: 16px; align-items: center; padding: 10px 14px; border-bottom: 1px solid var(--line, #dedbcf); background: var(--paper, #fffdf7); }
.shipment-sku-row > label:first-child { display: flex; gap: 10px; align-items: center; min-width: 0; }
.shipment-sku-row strong { display: block; font-size: 12px; line-height: 1.5; font-weight: 600; }
.shipment-sku-row small { display: block; color: var(--muted, #6e7169); font-size: 11px; line-height: 1.5; }
.shipment-cartons-field { display: flex; gap: 7px; align-items: center; font-size: 12px; }
.shipment-workspace-note { margin: 12px 0 16px; color: var(--muted, #6e7169); font-size: 12px; line-height: 1.6; }
.shipment-table-scroll { overflow: auto; border: 1px solid var(--line, #dedbcf); border-radius: 7px; }
.shipment-workspace table { width: 100%; border-collapse: collapse; text-align: left; font-size: 13px; }
.shipment-fees-table { min-width: 1010px; table-layout: fixed; }
.shipment-fees-table th:nth-child(1) { width: 30%; }
.shipment-fees-table th:nth-child(2) { width: 14%; }
.shipment-fees-table th:nth-child(3) { width: 19%; }
.shipment-fees-table th:nth-child(4) { width: 19%; }
.shipment-fees-table th:nth-child(5) { width: 14%; }
.shipment-fees-table th:nth-child(6) { width: 4%; }
.shipment-workspace th { padding: 12px 10px; color: var(--muted, #6e7169); background: #f4f2e9; font-size: 12px; font-weight: 650; border-bottom: 1px solid var(--line, #dedbcf); }
.shipment-workspace td { padding: 12px 10px; vertical-align: top; border-bottom: 1px solid var(--line, #dedbcf); }
.shipment-workspace tbody tr:last-child td { border-bottom: 0; }
.shipment-workspace td .app-select { display: block; margin-bottom: 7px; }
.shipment-workspace td .app-select-trigger { width: 100%; min-height: 38px; font-size: 12px; }
.shipment-workspace .shipment-line-name { font-weight: 600; background: transparent; border-color: transparent; padding-left: 0; }
.shipment-workspace .shipment-line-name:hover, .shipment-workspace .shipment-line-name:focus { padding-left: 8px; border-color: var(--line-strong, #cbc7b8); background: white; }
.shipment-source-details > summary { cursor: pointer; color: var(--muted, #6e7169); font-size: 11px; padding: 5px 0; }
.shipment-source-details[open] .app-select { margin-top: 5px; }
.shipment-source-details textarea { min-height: 82px; resize: vertical; line-height: 1.5; }
.shipment-source-scope { display: block; color: var(--muted, #6e7169); font-size: 11px; line-height: 1.5; }
.shipment-source-conflict { padding: 9px; margin-top: 7px; border: 1px solid #deb38b; border-radius: 5px; background: #fff5e8; font-size: 11px; line-height: 1.5; }
.shipment-source-conflict p { margin: 4px 0 7px; }
.shipment-source-conflict button, .shipment-source-candidates button, .shipment-review-cost { padding: 6px 8px; border: 1px solid var(--line-strong, #cbc7b8); border-radius: 4px; background: white; color: var(--orange, #bb5a21); font-size: 11px; line-height: 1.4; }
.shipment-source-candidates { max-height: 230px; overflow: auto; overscroll-behavior: contain; margin: 7px 0; padding: 0; list-style: none; border: 1px solid var(--line, #dedbcf); border-radius: 5px; background: #faf9f3; }
.shipment-source-candidates li { padding: 9px; border-bottom: 1px solid var(--line, #dedbcf); font-size: 11px; line-height: 1.5; }
.shipment-source-candidates li:last-child { border-bottom: 0; }
.shipment-source-candidates strong, .shipment-source-candidates span, .shipment-source-candidates small { display: block; }
.shipment-source-candidates p { margin: 5px 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.shipment-source-candidates button { margin-top: 6px; }
.shipment-review-cost { width: 100%; margin: 6px 0; }
.shipment-current-scope { margin: 8px 0 2px; padding: 8px; border-radius: 4px; background: #f4f2e9; font-size: 11px; line-height: 1.6; }
.shipment-current-scope strong, .shipment-current-scope span { display: block; }
.shipment-workspace [data-source-conflict="true"] > td:first-child { border-left: 3px solid #ca873f; }
.shipment-close-confirmation { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.shipment-workspace button:focus-visible { outline: 3px solid var(--orange, #bb5a21); outline-offset: 2px; }
.shipment-included { display: flex; align-items: center; gap: 7px; min-height: 30px; color: var(--muted, #6e7169); font-size: 11px; }
.shipment-numeric { font-variant-numeric: tabular-nums; white-space: nowrap; }
.shipment-numeric > strong { display: block; line-height: 38px; }
.shipment-numeric small, .shipment-preview-table td > small { display: block; color: var(--muted, #6e7169); font-size: 11px; margin-top: 5px; white-space: normal; }
.shipment-numeric[data-negative="true"] { color: var(--red, #a23f37); }
.shipment-primary-button, .shipment-secondary-button { display: inline-flex; justify-content: center; align-items: center; gap: 7px; min-height: 40px; padding: 9px 15px; border: 1px solid var(--line-strong, #cbc7b8); border-radius: 6px; background: white; font-size: 13px; font-weight: 650; white-space: nowrap; }
.shipment-primary-button { background: var(--orange, #bb5a21); border-color: var(--orange, #bb5a21); color: white; }
.shipment-add-cost { margin-top: 12px; }
.shipment-preview-summary { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border: 1px solid var(--line, #dedbcf); border-radius: 7px; background: #faf9f3; }
.shipment-preview-summary > div { padding: 15px; border-right: 1px solid var(--line, #dedbcf); }
.shipment-preview-summary > div:last-child { border-right: 0; }
.shipment-preview-summary span { display: block; margin-bottom: 8px; font-size: 11px; color: var(--muted, #6e7169); }
.shipment-preview-summary strong { display: block; font-size: 18px; font-variant-numeric: tabular-nums; color: var(--navy, #172936); }
.shipment-preview-table { min-width: 1000px; }
.shipment-preview-table th:first-child { width: 30%; }
.shipment-preview-table td > strong { font-weight: 600; line-height: 1.55; }
.shipment-preview-table .shipment-numeric > strong { line-height: 1.5; }
.shipment-formula-details > summary { display: flex; align-items: center; gap: 4px; cursor: pointer; list-style: none; color: var(--orange, #bb5a21); white-space: nowrap; font-size: 12px; }
.shipment-formula-details[open] { min-width: 330px; }
.shipment-formula-details > div { max-width: 470px; padding: 13px; margin-top: 9px; border: 1px solid var(--line, #dedbcf); border-radius: 5px; background: #faf9f3; font-size: 12px; line-height: 1.6; }
.shipment-formula-details > div > div { padding: 10px 0; border-top: 1px solid var(--line, #dedbcf); }
.shipment-formula-details p { margin: 6px 0; }
.shipment-formula-details small { color: var(--muted, #6e7169); }
.shipment-invalid-preview { padding: 35px 20px; text-align: center; color: var(--muted, #6e7169); }
.shipment-invalid-preview h3 { margin: 12px 0 8px; font-size: 17px; color: var(--ink, #20251f); }
.shipment-invalid-preview p { font-size: 13px; }
.shipment-validation { margin-top: 18px; padding: 14px 18px; border: 1px solid #e2b7ab; border-radius: 6px; color: var(--red, #a23f37); background: var(--red-soft, #fae8e5); font-size: 12px; line-height: 1.65; }
.shipment-validation ul { margin: 8px 0 0; padding-left: 18px; }
.shipment-workspace-footer { display: flex; gap: 10px; align-items: center; padding: 14px 26px; border-top: 1px solid var(--line, #dedbcf); background: var(--paper, #fffdf7); box-shadow: 0 -8px 24px rgb(29 35 29 / 3%); }
.shipment-footer-state { flex: 1; min-width: 0; }
.shipment-footer-state p { margin: 0; font-size: 12px; line-height: 1.6; color: var(--muted, #6e7169); }
.shipment-footer-state button { margin-left: 8px; padding: 5px 6px; border: 0; border-radius: 4px; background: var(--canvas, #f2f0e7); font-size: 12px; }
.shipment-footer-state .shipment-error { color: var(--red, #a23f37); }
.shipment-empty { padding: 15px; margin: 0; font-size: 13px; color: var(--muted, #6e7169); }
.shipment-visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.shipment-workspace-backdrop[data-motion-state="exit"] { animation: shipment-fade-out var(--motion-base, 190ms) ease both; }
.shipment-workspace-backdrop[data-motion-state="exit"] .shipment-workspace { animation: shipment-exit var(--motion-base, 190ms) ease both; }
@keyframes shipment-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes shipment-fade-out { to { opacity: 0; } }
@keyframes shipment-enter { from { opacity: 0; transform: translateY(9px) scale(.995); } to { opacity: 1; transform: none; } }
@keyframes shipment-exit { to { opacity: 0; transform: translateY(6px); } }
@media (max-width: 800px) { .shipment-workspace-backdrop { padding: 8px; } .shipment-workspace { height: calc(100dvh - 16px); border-radius: 8px; } .shipment-workspace-header { padding: 16px; } .shipment-workspace-toolbar { flex-direction: column; align-items: stretch; gap: 0; padding: 12px 16px 0; } .shipment-name-field { max-width: none; } .shipment-tabs button { flex: 1; } .shipment-workspace-body { padding: 15px; } .shipment-workspace-footer { padding: 12px 15px; flex-wrap: wrap; } .shipment-footer-state { flex-basis: 100%; } .shipment-preview-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); } .shipment-preview-summary > div { border-bottom: 1px solid var(--line, #dedbcf); } .shipment-sku-row { grid-template-columns: minmax(150px, 1fr) 90px; gap: 10px; } .shipment-sku-row > small { grid-column: 1 / -1; padding-left: 26px; } .shipment-sku-controls { flex-wrap: wrap; } .shipment-sku-controls input { flex-basis: 100%; } }
@media (prefers-reduced-motion: reduce) { .shipment-workspace-backdrop, .shipment-workspace, .shipment-workspace-backdrop[data-motion-state="exit"], .shipment-workspace-backdrop[data-motion-state="exit"] .shipment-workspace { animation: none; } .shipment-workspace *, .shipment-workspace *::before, .shipment-workspace *::after { transition: none !important; scroll-behavior: auto !important; } }
.cn-workbench{--cn-ink:#14273c;--cn-muted:#647084;--cn-line:#e4e2df;--cn-accent:#c64414;color:var(--cn-ink);background:#fff;border:1px solid var(--cn-line);border-radius:8px;min-width:0;display:flex;flex-direction:column;height:calc(100dvh - 225px);min-height:620px;overflow:hidden;font-size:15px}.cn-workbench *{box-sizing:border-box}.cn-identity{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:18px 24px;border-bottom:1px solid var(--cn-line);flex-shrink:0}.cn-identity h2{font:700 23px Georgia,'Songti SC',serif;margin:5px 0}.cn-identity small,.cn-identity span{color:var(--cn-muted);font-size:13px}.cn-sku-actions{display:flex;gap:8px;flex-shrink:0}.cn-steps{display:grid;grid-template-columns:repeat(5,1fr);padding:0 20px;border-bottom:1px solid var(--cn-line);flex-shrink:0}.cn-steps button{border:0;border-radius:0;min-height:52px;display:flex;align-items:center;justify-content:center;gap:8px;font-size:14px}.cn-steps button[aria-current=step]{border-bottom:3px solid var(--cn-accent);color:var(--cn-accent);font-weight:700}.cn-steps span{border-radius:100%;background:#e8eaec;width:24px;height:24px;display:grid;place-content:center}.cn-steps button[aria-current=step] span{color:#fff;background:var(--cn-accent)}.cn-body{display:grid;grid-template-columns:minmax(0,1fr) 275px;min-height:0;flex:1;overflow:hidden}.cn-main{padding:24px;overflow:auto;min-width:0}.cn-main>h2{font:700 26px Georgia,'Songti SC',serif;margin:0 0 18px}.cn-procurement{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:24px;font-size:14px}.cn-procurement strong{margin-left:10px}.cn-procurement>.cn-muted{margin-left:auto}.cn-fields{border:0;padding:0;margin:0;min-width:0}.cn-price-table{border-top:1px solid var(--cn-line)}.cn-price-row,.cn-table-head{display:grid;grid-template-columns:145px minmax(0,1fr);gap:18px;align-items:center;padding:20px 10px;border-bottom:1px solid var(--cn-line)}.cn-with-baseline .cn-price-row,.cn-with-baseline .cn-table-head{grid-template-columns:130px minmax(90px,.6fr) minmax(0,1.4fr)}.cn-table-head{padding-block:12px;font-size:13px;color:var(--cn-muted)}.cn-price-row>strong{display:flex;gap:5px;align-items:center}.cn-price-row>label{max-width:190px}.cn-workbench label{display:grid;gap:8px;font-size:13px;color:#4a5766}.cn-price-pair{display:grid;grid-template-columns:1fr 1fr;gap:16px}.cn-price-pair input{font-size:21px;text-align:center;background:#fffcf8}.cn-read-prices{line-height:1.9;font-size:15px}.cn-muted{color:var(--cn-muted);font-size:13px;line-height:1.7}.cn-results{padding:24px;border-left:1px solid var(--cn-line);overflow:auto;background:#fcfcfb;min-width:0}.cn-results h3{margin:0 0 20px;font:700 20px Georgia,'Songti SC',serif}.cn-results>.cn-hero{display:block;font:700 47px Georgia,serif;margin:12px 0}.cn-results>div{border-top:1px solid var(--cn-line);padding:18px 0;display:grid;gap:9px}.cn-results>div>strong{font:700 27px Georgia,serif}.cn-results p,.cn-results small{font-size:13px;line-height:1.65}.cn-blocker{background:#fff0d8;color:#7e4c00;padding:12px;border-radius:5px}.cn-workbench .cn-help{width:30px;min-width:30px;height:30px;min-height:30px;padding:0;border-radius:50%;font-size:14px;background:transparent}.cn-help-bubble{position:fixed;z-index:1000;width:330px;max-width:calc(100vw - 24px);max-height:calc(100dvh - 24px);overflow:auto;background:#fff;color:#1c2b3e;border:1px solid #cdd1d8;padding:18px;border-radius:8px;box-shadow:0 8px 32px #00152d2a;font-size:14px;line-height:1.6}.cn-footer{border-top:1px solid var(--cn-line);display:flex;justify-content:space-between;gap:16px;padding:16px 20px;background:#fff;flex-shrink:0}.cn-footer>div:first-child{min-width:0;display:grid;gap:5px;max-width:340px;font-size:13px}.cn-footer small{color:var(--cn-muted);font-size:12px}.cn-footer-actions{display:flex;align-items:center;gap:10px;flex-shrink:0}.cn-choice{display:flex;gap:10px;margin:20px 0}.cn-choice [aria-pressed=true]{color:var(--cn-accent);border-color:var(--cn-accent);background:#fff7ed}.cn-promo-form{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px 18px;padding:20px 0}.cn-term{display:grid;grid-template-columns:140px 1fr;gap:10px;padding:26px 0;border-bottom:1px solid var(--cn-line)}.cn-term small{grid-column:2;color:var(--cn-muted)}.cn-summary{display:grid;grid-template-columns:1fr 1fr;gap:14px;line-height:1.7}.cn-summary dd{margin:0}.cn-review h3{display:flex;justify-content:space-between;align-items:center;font-size:17px;margin:16px 0 6px}.cn-review button{font-size:13px;color:#2267b2;padding:6px 10px;min-height:34px}.cn-entry{height:auto;min-height:300px;padding:30px;gap:12px}.cn-entry button{align-self:flex-start}.cn-entry h2{margin:0}.cn-entry p{margin:6px 0}
@media(max-width:1400px){.cn-body{grid-template-columns:minmax(0,1fr) 230px}.cn-main,.cn-results{padding:18px}.cn-with-baseline .cn-price-row,.cn-with-baseline .cn-table-head{grid-template-columns:105px minmax(70px,.5fr) minmax(0,1.5fr);gap:10px}.cn-price-pair{gap:8px}.cn-price-pair input{font-size:18px}.cn-footer{flex-wrap:wrap}.cn-footer>div:first-child{max-width:none}.cn-steps{padding:0 8px}}
@media(max-width:1100px){.cn-workbench{height:auto;min-height:620px;overflow:visible}.cn-body{grid-template-columns:1fr;overflow:visible}.cn-main,.cn-results{overflow:visible}.cn-results{border-left:0;border-top:1px solid var(--cn-line)}.cn-footer{position:sticky;bottom:0;z-index:10}.cn-footer-actions{flex-wrap:wrap;flex-shrink:1}.cn-identity{flex-wrap:wrap}.cn-steps{overflow:auto}.cn-steps button{min-width:112px}.cn-promo-form{grid-template-columns:1fr 1fr}}
@media(max-width:620px){.cn-price-row,.cn-with-baseline .cn-price-row{grid-template-columns:1fr;padding:18px 0}.cn-table-head{display:none}.cn-with-baseline .cn-table-head{display:none}.cn-read-prices{font-size:13px;color:var(--cn-muted)}.cn-identity{padding:16px}.cn-identity h2{font-size:21px}.cn-promo-form{grid-template-columns:1fr}.cn-footer-actions button{flex:1}.cn-term{grid-template-columns:1fr}.cn-term small{grid-column:1}.cn-choice{flex-wrap:wrap}.cn-summary{grid-template-columns:1fr}.cn-review h3{gap:10px}.cn-sku-actions{flex-wrap:wrap}}
.cn-host .cn-workbench{height:100%;min-height:0}.cn-host .negotiation-workbench-body{grid-template-columns:185px minmax(0,1fr)}
@media(max-width:1100px){.negotiation-workbench.cn-host{height:auto}.cn-host .cn-workbench{height:auto}.cn-host .negotiation-workbench-body{grid-template-columns:1fr}.cn-host .negotiation-nav-list{max-height:180px}}
@media(max-width:1100px){html:has(.cn-workbench){scroll-padding-bottom:180px}.cn-workbench input,.cn-workbench select,}
.cq-board {
  --cq-check-width: 36px; --field-height:32px; --field-font:13px; --field-padding:5px 9px;
  --cq-product-width: 210px;
  background: #fff; color: #172c44; border: 1px solid #dedfdc; border-radius: 6px;
  display: flex; flex-direction: column; min-width: 0; min-height: 0; height: 100%;
  overflow: hidden; font-size: 13px; font-variant-numeric: tabular-nums;
}
.cq-header { padding: 4px 12px; display: flex; justify-content: space-between; align-items: center; gap: 12px; border-bottom: 1px solid #e4e4df; flex-shrink: 0; }
.cq-identity { min-width: 100px; flex: 1; }
.cq-header h2 { font-size: 16px; line-height: 22px; margin: 0; white-space: nowrap; }
.cq-header h2 span { font-size: 12px; font-weight: 400; color: #687589; margin-left: 5px; }
.cq-board small { display: block; color: #617084; font-size: 12px; line-height: 17px; }
.cq-identity small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cq-tools { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.cq-board .cq-help { border-radius: 50%; width: 28px; min-height: 28px; padding: 2px; }
.cq-table-scroll:focus-visible { outline: 2px solid #3972b5; outline-offset: 1px; }
.cq-totals { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 18px; background: #f7f8f6; border-bottom: 1px solid #e5e5df; padding: 6px 12px; flex-shrink: 0; }
.cq-totals > div { display: flex; align-items: baseline; gap: 6px; white-space: nowrap; line-height: 20px; }
.cq-totals span { color: #617084; font-size: 12px; }
.cq-totals strong { font-size: 13px; }
.cq-warning { display: flex; align-items: center; gap: 10px; margin: 0; padding: 3px 12px; background: #fff3de; color: #774b04; font-size: 12px; flex-shrink: 0; }
.cq-warning > span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.cq-board .cq-warning button { border: 0; background: none; color: inherit; padding: 0; min-height: 24px; text-decoration: underline; flex-shrink: 0; }
/* One sheet scrolls; the identity, totals and actions remain outside it. */
.cq-table-scroll { overflow: auto; overscroll-behavior: contain; min-height: 0; flex: 1; scroll-padding-top: 44px; scroll-padding-left: calc(var(--cq-check-width) + var(--cq-product-width) + 8px); }
.cq-board table { border-collapse: separate; border-spacing: 0; min-width: 956px; width: 100%; table-layout: fixed; }
.cq-board th, .cq-board td { padding: 4px 8px; height: 48px; border-bottom: 1px solid #e6e7e6; border-right: 1px solid #eef0f1; text-align: left; vertical-align: middle; background: #fff; }
.cq-board thead th { height: 44px; background: #f3f4f1; font-size: 12px; position: sticky; top: 0; z-index: 3; color: #5d697b; white-space: nowrap; }
.cq-board thead .cq-editable { background: #f8f0e7; color: #71482c; }
.cq-board th:first-child { width: var(--cq-check-width); }
.cq-board th:nth-child(2) { width: auto; }
.cq-board tr > :first-child { position: sticky; left: 0; z-index: 1; padding: 4px 8px; text-align: center; }
.cq-board tr > :nth-child(2) { position: sticky; left: var(--cq-check-width); z-index: 1; box-shadow: 1px 0 #d8dde0; }
.cq-board thead tr > :nth-child(-n+2) { z-index: 4; }
.cq-board tbody th button { display: block; width: 100%; overflow: hidden; text-overflow: ellipsis; padding: 0; text-align: left; line-height: 18px; min-height: 0; border: 0; background: none; font-weight: 600; }
.cq-board tbody th small { margin-top: 1px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-weight: 400; }
.cq-board td input:not([type=checkbox]) { width: 100%; min-width: 0; text-align: right; }
.cq-board input[type=checkbox] { width: 16px; height: 16px; margin: 0; accent-color: #bc460c; vertical-align: middle; }
.cq-board .cq-numeric { text-align: right; white-space: nowrap; }
.cq-board .cq-budget > div { display: flex; align-items: center; gap: 6px; line-height: 18px; }
.cq-board .cq-alert { color: #9b4316; border: 0; border-radius: 3px; background: #fff0df; font-size: 12px; min-height: 20px; line-height: 18px; padding: 1px 4px; }
.cq-board .cq-row-issue { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cq-board tbody tr:hover > *, .cq-board tbody tr:focus-within > * { background: #f8fafc; }
.cq-excluded > * { color: #617084; }
.cq-footer { border-top: 1px solid #dedfdc; padding: 6px 12px; display: flex; align-items: center; justify-content: flex-end; gap: 12px; background: white; flex-shrink: 0; }
.cq-save-status { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.cq-save-actions { display: flex; gap: 6px; align-items: center; flex-shrink: 0; }
.cq-board .cq-version { font-size: 12px; color: #617084; border-color: transparent; padding: 4px; }
.cq-empty { padding: 28px; gap: 14px; height: auto; }
.cq-empty button { align-self: flex-start; }
.cq-dialog-backdrop { position: fixed; inset: 0; z-index: 180; background: #172c4455; display: grid; place-items: center; padding: 20px; }
.cq-dialog { width:min(620px,100%); max-height:calc(100dvh - 40px); display:flex; flex-direction:column; overflow:hidden; background:var(--up-surface,#fffdf9); color:var(--control-text); border:1px solid #e2e3e1; border-radius:16px; box-shadow:0 24px 80px #172c4433; font-size:14px; }
.cq-dialog > header { flex-shrink:0; padding:20px 24px; display: flex; align-items: center; justify-content: space-between; gap: 12px; border-bottom: 1px solid #e4e4df; }
.cq-dialog h2 { font-size:20px; margin: 0; }
.cq-dialog-content { padding:24px; overflow:auto; min-height:0; line-height:1.6; }
.cq-dialog > header p { margin:5px 0 0; color:var(--control-muted); font-size:13px; }
.cq-dialog-close { width:36px; min-height:36px; padding:6px; align-self:flex-start; }
.cq-dialog label { color:var(--control-text); font-weight:550; }
.cq-tools>.up-select { width:112px;flex-shrink:0; }
.cq-filterbar>.up-select { width:138px; flex-shrink:0; }
.cq-dialog label { display: grid; gap: 6px; font-size: 13px; }
.cq-cost-tools { display: grid; gap: 12px; }
.cq-cost-tools > button { justify-self: start; }
.cq-bulk { margin-top: 20px; border-top: 1px solid #e4e4df; }
.cq-paste textarea { width: 100%; min-height: 150px; margin-top: 6px; font-family: monospace; resize: vertical; }
.cq-dialog-actions { display: flex; gap: 8px; }
.cq-explanation { white-space: pre-line; overflow-wrap: anywhere; }
.cq-detail { height: 100%; min-height: 0; display: flex; flex-direction: column; gap: 8px; }
.cq-detail > header { display: flex; align-items: center; gap: 14px; }
.cq-detail > header button { padding: 8px 12px; cursor: pointer; }
.cq-detail > .cn-workbench { flex: 1; }
.negotiation-workbench-body:has(>.cq-board), .negotiation-workbench-body:has(>.cq-detail) { grid-template-columns: minmax(0,1fr); }
@media(max-width:700px) {
  .cq-header { flex-wrap: wrap; gap: 5px; }
  .cq-identity { display: flex; align-items: baseline; gap: 10px; flex-basis: 100%; }
  .cq-tools { flex-wrap: wrap; }
  .cq-totals { gap: 3px 14px; }
  .cq-footer { flex-wrap: wrap; gap: 4px; }
  .cq-save-actions { flex-wrap: wrap; width: 100%; }
  .cq-save-actions .cq-version { margin-right: auto; }
  .cq-board { --cq-product-width: 160px; }
  .cq-board table { min-width: 906px; }
  .cq-detail { height: auto; }
  .cq-detail > header { flex-wrap: wrap; }
  .negotiation-workbench:has(.cq-board) { height: calc(100dvh - 120px); min-height: 400px; }
}
@media(max-height:550px) { .cq-board:not(.cq-empty) { min-height: 360px; } }
/* Keep all digits visible in the compact carton column. Arrow keys still step. */
.cq-board input[type=number] { appearance: textfield; -moz-appearance: textfield; }
.cq-board input[type=number]::-webkit-inner-spin-button,
.cq-board input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
/* Allocate remaining App height from its real header; no desktop-only offset. */
.app-shell:has(.cq-board) { height: 100dvh; min-height: 550px; }
.app-main:has(.cq-board) { height: 100%; min-height: 0; display: flex; flex-direction: column; }
.app-main:has(.cq-board) > .app-header { flex-shrink: 0; }
.view-negotiation:has(.cq-board) { flex: 1; min-height: 0; padding: 8px 12px; }
.view-negotiation:has(.cq-board) > .view-motion-layer { height: 100%; min-height: 0; }
.negotiation-workbench:has(.cq-board) { height: 100%; min-height: 0; gap: 6px; }
.negotiation-workbench:has(.cq-board) > .negotiation-project-tools { justify-content: flex-end; }
.negotiation-workbench:has(.cq-board) > .negotiation-project-tools > :is(span,button) { display: none; }
@media(max-width:1000px) { .app-main:has(.cq-board) { height: calc(100% - 62px); } }
@media(max-width:700px) {
  .cq-tools { flex: 1 1 100%; min-width: 0; gap: 4px; font-size: 12px; }
  .cq-tools > button { padding-left: 7px; padding-right: 7px; }
  .cq-tools > .cq-help { padding: 2px; }
}

/* The sheet stays dense; complex values open the same editors as SKU detail. */
.cq-filterbar { display:flex; align-items:center; gap:6px; padding:2px 12px; flex-shrink:0; border-bottom:1px solid #e4e4df; }
.cq-filterbar input { flex:1; min-width:120px; max-width:420px!important; }
.cq-filterbar > span:not(.app-select) { margin-left:auto; white-space:nowrap; color:#617084; font-size:12px; }
.cq-board td { overflow:hidden; }
.cq-board td > strong { display:block; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; font-size:12px; }
.cq-board td small { overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.cq-board td select { width:100%; min-width:0; padding:4px; }
.cq-board .cq-readout { display:block; width:100%; padding:0; min-height:0; background:transparent; border:0; text-align:left; line-height:18px; overflow:hidden; text-overflow:ellipsis; }
.cq-board .cq-readout small { font-size:12px; }
.cq-board input[type=date] { font-size:12px; padding:3px; }
.cq-dialog:has(.cq-form-grid), .cq-dialog:has(.cq-cost-detail) { width:min(780px,100%); }
.cq-form-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin:12px 0; }
.cq-form-grid input, .cq-form-grid textarea, .cq-term-form textarea { width:100%; }
.cq-term-form { min-width:0; margin:16px 0; padding:12px; border:1px solid #dee2e4; border-radius:10px; }
.cq-term-form legend { font-weight:600; padding:0 5px; }
.cq-term-form > label { margin-bottom:10px; }
.cq-term-form textarea { min-height:66px; resize:vertical; }
.cq-dialog .cq-checkbox-label { display:flex; flex-direction:row; align-items:center; gap:8px; margin:12px 0; }
.cq-checkbox-label input[type=checkbox] { min-height:16px; width:16px; flex-shrink:0; }
.cq-muted { color:#617084; font-size:12px; }
.cq-column-presets, .cq-dialog-actions, .cn-edit-links { display:flex; flex-wrap:wrap; gap:8px; margin:12px 0; }
.cq-cost-scroll { overflow:auto; }
.cq-board .cq-column-handle { background:transparent; border:0; border-radius:0; padding:0; min-height:20px; font:inherit; font-weight:inherit; color:inherit; text-align:left; white-space:normal; cursor:grab; }
.cq-board th.cq-dragging { opacity:.55; outline:2px solid #c64e0b; outline-offset:-2px; }
.cq-column-list { display:grid; gap:4px; border-top:1px solid #e2e5e7; margin-top:14px; padding-top:8px; }
.cq-column-list > div { display:grid; grid-template-columns:minmax(120px,1fr) 34px 34px 76px; gap:6px; align-items:center; min-height:40px; }
.cq-column-list label { display:flex; align-items:center; gap:6px; }
.cq-column-list input[type=checkbox], .cq-batch-preview input[type=checkbox] { width:16px; height:16px; min-height:16px; accent-color:#b94a0a; }
.cq-column-list input[type=number] { width:100%; min-width:0; }
.cq-dialog:has(.cq-promotion-form) { width:min(800px,100%); display:flex; flex-direction:column; overflow:hidden; }
.cq-dialog:has(.cq-promotion-form) > header, .cq-dialog-footer { flex-shrink:0; }
.cq-dialog:has(.cq-promotion-form) > .cq-dialog-content { min-height:0; overflow:auto; }
.cq-dialog-footer { border-top:1px solid #e2e5e7; padding:12px 18px; background:#fffcf8; }
.cq-dialog-footer .cq-dialog-actions { margin:8px 0 0; }
.cq-promotion-form { display:grid; gap:12px; padding-top:12px; }
.cq-batch-heading { display:flex; flex-wrap:wrap; align-items:center; gap:8px; border-top:1px solid #e2e5e7; padding-top:12px; }
.cq-batch-heading strong { flex:1; }
.cq-batch-preview { overflow:auto; max-height:260px; }
.cq-batch-preview table { width:100%; min-width:560px; border-collapse:collapse; font-size:13px; }
.cq-batch-preview td, .cq-batch-preview th { text-align:left; padding:6px; border-bottom:1px solid #e2e5e7; }
.cq-batch-preview th small { display:block; color:#657284; font-weight:400; }
.cq-batch-preview thead th { position:sticky; top:0; background:#f4f4f0; }
.cq-data-check { display:grid; gap:8px; }
.cq-data-check > div { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:4px 12px; border-bottom:1px solid #e2e5e7; padding:8px 0; }
.cq-data-check span { grid-column:1; }
.cq-data-check button { grid-column:2; grid-row:1/3; align-self:center; }
.cq-cost-detail table { width:100%; min-width:660px; border-collapse:collapse; font-size:13px; }
.cq-cost-detail th, .cq-cost-detail td { text-align:left; padding:8px; border-bottom:1px solid #e1e5e8; }
.cq-cost-detail th { background:#f5f6f4; }
.cq-cost-detail small { display:block; font-size:12px; font-weight:400; color:#617084; }
.cq-cost-detail p { margin:8px 0; }
@media(max-width:700px) {
  .cq-filterbar { flex-wrap:wrap; padding:4px 8px; }
  .cq-filterbar input { max-width:none!important; }
  .cq-filterbar > span:not(.app-select) { font-size:12px; }
  .cq-form-grid { grid-template-columns:1fr; }
}

.cq-board thead th { overflow:hidden; text-overflow:ellipsis; }
.cq-board thead th small { overflow:hidden; text-overflow:ellipsis; }
.cq-board .cq-total-issue { min-height:20px; padding:0; border:0; border-bottom:1px dotted #9b4316; border-radius:0; color:#9b4316; background:transparent; font-size:13px; font-weight:600; }

.cq-board thead tr > :first-child { padding-left:4px; padding-right:4px; }
.cq-column-heading { display:flex; align-items:center; gap:4px; min-width:0; }
.cq-selection-heading { display:flex; flex-direction:column; align-items:center; line-height:16px; }
:root .cq-board .cq-column-help { flex:0 0 18px; width:18px; height:18px; min-height:18px; padding:0; border:1px solid #aeb8bf; border-radius:50%; background:transparent; color:inherit; font-size:11px; line-height:16px; font-weight:500; cursor:help; }
:root .cq-board .cq-column-heading .cq-column-handle { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cq-dialog:has(.cq-column-explanation) { width:min(520px,100%); }
.cq-column-explanation p { margin:12px 0; }
.cq-column-explanation button { margin:0 8px 8px 0; }
.cq-column-context { padding:10px 12px; border-radius:8px; background:#fff4e7; white-space:pre-line; }
.cq-expense-lines { display:grid; gap:12px; margin:16px 0; }
.cq-expense-line { display:grid; grid-template-columns:minmax(160px,1.5fr) minmax(130px,1fr) minmax(120px,1fr) auto; align-items:end; gap:10px; }
.cq-expense-line label,.cq-expense-source { display:grid; gap:5px; font-size:13px; }
.cq-expense-line input,.cq-expense-line select { width:100%; min-width:0; }
.cq-expense-source textarea { min-height:64px; resize:vertical; }
.cq-expense-summary { display:flex; gap:40px; padding:16px 0; margin-top:12px; border-block:1px solid #e5e3df; }
.cq-expense-summary strong { display:block; font-size:22px; color:#253e4b; }
.cq-budget-notice { background:#fff3e5; color:#85431c; padding:10px 12px; border-radius:10px; }
.cq-board .cq-budget-changed { color:#98451c; border-color:#e7b18e; }
@media(max-width:650px) { .cq-expense-line { grid-template-columns:1fr 1fr; } .cq-expense-summary { gap:20px; } }

/* The existing expense dialog now includes a reusable, amount-free checklist. */
.cq-dialog:has(.cq-expense-checklist) { width:min(780px,100%); display:flex; flex-direction:column; overflow:hidden; }
.cq-dialog:has(.cq-expense-checklist) > .cq-dialog-content { min-height:0; overflow:auto; }
.cq-dialog:has(.cq-expense-checklist) > header { flex-shrink:0; }
.cq-expense-checklist fieldset { margin:12px 0; padding:0; border:0; min-width:0; }
.cq-expense-checklist legend { padding:8px 0; font-weight:650; }
.cq-expense-slots { display:grid; grid-template-columns:1fr 1fr; gap:0 24px; }
.cq-dialog .cq-expense-slot { display:grid; grid-template-columns:minmax(0,1fr) 110px; gap:10px; align-items:center; min-height:46px; border-top:1px solid #eceae5; }
.cq-expense-slot input { width:100%; min-width:0; text-align:right; }
.cq-expense-footer { flex-shrink:0; padding:0 18px 10px; border-top:1px solid #e5e3df; background:#fffdfa; }
.cq-expense-footer .cq-expense-summary { margin:0; padding:10px 0 0; border:0; }
.cq-expense-footer p { margin:4px 0; }
.cq-expense-footer .cq-dialog-actions { margin:8px 0 0; }
@media(max-width:650px) { .cq-expense-slots { grid-template-columns:1fr; } }

/* Import layout only. Controls own color, sizes, states and radii in ui/controls.css. */
.cq-dialog:has(.cq-import){width:min(900px,calc(100vw - 32px))}
.cq-import {display:grid;gap:24px}.cq-import .up-stepper{padding-bottom:22px;border-bottom:1px solid #e6e8ea}
.cq-import-intro h3 {margin:0 0 7px;font-size:19px;font-weight:650;line-height:1.4}.cq-import-intro p{margin:0;color:var(--control-muted);font-size:13px;line-height:1.6}
.cq-import-template{display:flex;align-items:center;gap:14px;padding:18px 0;border-top:1px solid #e6e8ea}.cq-import-template>svg{color:#3c775a;flex-shrink:0}.cq-import-template>div{flex:1;min-width:0}.cq-import-template strong{font-size:14px;font-weight:600}.cq-import-template p{margin:5px 0 0;color:var(--control-muted);font-size:12px}
.cq-import-note{display:flex;align-items:flex-start;gap:9px;color:var(--control-muted);font-size:12px;line-height:1.7}.cq-import-note>svg{flex-shrink:0;margin-top:2px}
.cq-import-source {display:grid;grid-template-columns:1fr 1.2fr;gap:16px}.cq-import-source label{min-width:0}
.cq-import-mapping{border:1px solid #e0e4e7;border-radius:10px;overflow:hidden}.cq-import-map-heading,.cq-import-map-row{display:grid;grid-template-columns:minmax(0,1.4fr) 20px minmax(0,1fr) 76px;gap:16px;align-items:center;padding:16px}
.cq-import-map-heading{background:#f5f6f7;padding-block:12px;color:var(--control-muted);font-size:11px;letter-spacing:.035em;font-weight:600}.cq-import-map-row+.cq-import-map-row{border-top:1px solid #e6e8ea}.cq-import-map-row small{display:block;margin-top:6px;color:var(--control-muted);font-size:12px;line-height:1.5;overflow-wrap:anywhere}.cq-map-arrow{color:#8d979f}.cq-import-target strong{font-size:14px;font-weight:600}.cq-import-target em{font-style:normal;font-size:10px;margin-left:8px;padding:2px 5px;border-radius:4px;background:#f2f3f4;color:#6e7680}
.cq-match-status{display:flex;align-items:center;gap:5px;color:#287459;font-size:12px;white-space:nowrap}.cq-match-status.is-error{color:#b23b30}
.cq-import-notice{display:flex;align-items:flex-start;gap:9px;padding:12px 14px;font-size:13px;border-radius:8px}.cq-import-notice.is-error{color:#a9372e;background:#fff1ef;border:1px solid #f0ceca}.cq-import-notice svg{flex-shrink:0;margin-top:2px}
.cq-import-footer{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 24px;border-top:1px solid #e3e6e8;background:#fafbfc;flex-shrink:0}.cq-import-footer>span{display:flex;align-items:center;gap:6px;color:var(--control-muted);font-size:12px}.cq-import-footer>div{display:flex;gap:8px}
.cq-import-summary{display:flex;gap:6px}.cq-import-summary b{border-radius:5px;padding:0 6px;background:#eff1f3;font-size:12px}.cq-import-summary [aria-pressed=true]{border-color:#cfd6dc;background:#fff;box-shadow:0 1px 3px #172c440d}
.cq-import-preview{overflow:auto;max-height:320px;border:1px solid #dfe4e7;border-radius:9px}.cq-import-preview table{border-collapse:collapse;width:100%;min-width:620px;font-size:12px}.cq-import-preview td,.cq-import-preview th{padding:14px 12px;text-align:left;border-bottom:1px solid #e6e9eb;vertical-align:top}.cq-import-preview thead th{position:sticky;top:0;background:#f5f6f7;color:#65727d;font-size:11px}.cq-import-preview tbody th{font-weight:600;white-space:nowrap}
.cq-import-change{display:flex;align-items:center;gap:7px;margin-bottom:8px}.cq-import-change>span{min-width:142px;color:#64717c;font-size:11px}.cq-import-change del{text-decoration:none;color:#89929b}.cq-import-change b{color:#226d50;background:#edf7f1;border-radius:4px;padding:1px 5px}
.cq-preview-status{color:#7d8690;font-size:11px}.cq-preview-status.is-error{color:#ac3d30}.cq-preview-status.is-ready{color:#226d50}.cq-import-empty{display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center;padding:40px 20px;background:#f7faf8;border-radius:12px;border:1px solid #e0ebe4}.cq-import-empty svg{color:#287459}.cq-import-empty strong{font-size:17px}.cq-import-empty span{color:var(--control-muted);font-size:13px}.cq-import-filter-empty{padding:20px;color:var(--control-muted);text-align:center}
@media(max-width:650px){.cq-dialog-content{padding:18px}.cq-dialog>header{padding:18px}.cq-import{gap:20px}.cq-import-source{grid-template-columns:1fr}.cq-import-template{flex-wrap:wrap}.cq-import-template>.up-button{margin-left:40px}.cq-import-map-heading{display:none}.cq-import-map-row{grid-template-columns:minmax(0,1fr) 18px minmax(0,.8fr);gap:10px;padding:12px}.cq-import-map-row>.cq-match-status{grid-column:3}.cq-import-target em{display:none}.cq-import-footer{flex-direction:column;align-items:stretch;padding:14px 18px}.cq-import-footer>div{justify-content:flex-end}.cq-import-change>span{min-width:122px}}

.cq-promotion-form>.cq-form-grid { margin:0; }

.cq-sync-status { max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cq-sync-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.cq-sync-table th, .cq-sync-table td { text-align: left; padding: 8px; border-bottom: 1px solid #e2e5e9; }

.cq-saved-summary{padding:14px 20px}.cq-saved-summary>p{margin:0 0 12px}.cq-saved-metrics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px 24px;margin:0}.cq-saved-summary dt{color:var(--text-muted,#69717a);font-size:12px}.cq-saved-summary dd{margin:5px 0 0;font-weight:650}

.cq-sync-content{display:flex;flex-direction:column;gap:16px}.cq-sync-content>p,.cq-sync-content>.cq-dialog-actions{margin:0}.cq-sync-table th{white-space:nowrap}.cq-sync-table td:first-child{overflow-wrap:anywhere}.cq-sync-table td:nth-child(n+3){white-space:nowrap;font-variant-numeric:tabular-nums}.cq-saved-empty{padding:20px}.cq-saved-metrics>div{min-width:0}.cq-saved-metrics dd{font-variant-numeric:tabular-nums}
@media(max-width:650px){.cq-saved-metrics{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 16px}.cq-sync-table th,.cq-sync-table td{padding:8px 6px;font-size:12px}}
.channel-pricing-panel { min-width: 0; }
.channel-pricing-panel > header { gap: 12px; flex-wrap: wrap; }
.channel-pricing-panel > header .app-select { min-width: 150px; }
.channel-price-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; padding: 18px; }
.channel-price-field { display: flex; min-width: 0; flex-direction: column; gap: 8px; color: var(--muted); font-size: 12px; font-weight: 600; }
.channel-price-field > div { display: flex; gap: 7px; align-items: center; border: 1px solid var(--line); padding: 8px 10px; background: #fffefb; border-radius: 6px; }
.channel-price-field input { width: 100%; min-width: 0; padding: 2px; border: 0; background: transparent; color: var(--ink); font-size: 20px; font-variant-numeric: tabular-nums; }
.channel-price-field small { white-space: nowrap; }
.channel-margin-summary { display: grid; grid-template-columns: repeat(auto-fit,minmax(110px,1fr)); gap: 12px; padding: 14px 18px; border-block: 1px solid var(--line); background: #f3f5f2; }
.channel-margin-summary > div { display: flex; flex-direction: column; gap: 6px; }
.channel-margin-summary span { color: var(--muted); font-size: 11px; }
.channel-margin-summary strong { font-size: 21px; font-variant-numeric: tabular-nums; transition: color 160ms ease; }
.channel-price-notice { margin: 0; padding: 10px 18px; color: #875529; font-size: 12px; line-height: 1.6; }
.channel-assumptions,.channel-formulas { padding: 12px 18px; border-top: 1px solid var(--line); }
.channel-assumptions > summary,.channel-formulas > summary { cursor: pointer; font-size: 12px; color: var(--muted); }
.channel-formulas > summary svg { vertical-align: middle; }
.channel-formulas article { padding: 12px 0; border-bottom: 1px solid var(--line); font-size: 12px; line-height: 1.6; }
.channel-formulas output { display: block; font-variant-numeric: tabular-nums; color: var(--ink); }
.channel-formulas small { display: block; color: var(--muted); }
@media (max-width: 650px) { .channel-price-grid { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .channel-margin-summary strong { transition: none; } }
.version-history{display:grid;gap:10px;color:var(--ink,#20251f)}
.version-history-caption,.version-history-empty{margin:0;color:var(--muted,#6e7169);font-size:12px;line-height:1.65}
.version-history-caption{padding:0 1px 6px}
.version-history-empty{padding:22px 16px;border:1px dashed var(--line-strong,#d5d0c4);border-radius:8px;background:var(--paper,#fffdf7)}
.version-history-entry{min-width:0;border:1px solid var(--line,#e2ded2);border-radius:9px;background:var(--paper,#fffdf7);overflow:clip}
.version-history-entry[data-status="current_final"]{border-color:#d79a73;box-shadow:inset 3px 0 0 var(--orange,#bb5a21)}
.version-history-summary{display:grid;grid-template-columns:minmax(0,1fr) auto 16px;align-items:center;gap:14px;min-height:88px;padding:15px 16px;cursor:pointer;list-style:none;transition:background-color 140ms ease}
.version-history-summary::-webkit-details-marker{display:none}
.version-history-summary:hover{background:#faf6ed}
.version-history-summary:focus-visible{outline:3px solid var(--orange,#bb5a21);outline-offset:-3px;border-radius:8px}
.version-history-identity{display:grid;gap:7px;min-width:0}
.version-history-identity>span{display:flex;align-items:center;flex-wrap:wrap;gap:7px}
.version-history-identity strong{font-size:16px}
.version-history-identity time{color:var(--muted,#6e7169);font-size:11px;line-height:1.4}
.version-history-badge{padding:2px 6px;border-radius:4px;background:#f0ece2;color:#716044;font-size:10px;font-weight:650;white-space:nowrap}
.version-history-entry[data-status="current_final"] .version-history-badge{background:var(--orange-soft,#fff0e4);color:var(--orange,#bb5a21)}
.version-history-quote{display:grid;gap:3px;text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.version-history-quote small{font-size:10px;color:var(--muted,#6e7169)}
.version-history-quote strong{font-size:13px;font-weight:750}
.version-history-quote>span{font-size:11px;color:var(--muted,#6e7169)}
.version-history-chevron{color:var(--muted,#6e7169);transition:transform 140ms ease}
.version-history-entry[open]>.version-history-summary .version-history-chevron{transform:rotate(180deg)}
.version-history-entry[open]>.version-history-summary{border-bottom:1px solid var(--line,#e2ded2)}
.version-history-content{display:grid;gap:18px;padding:18px 16px}
.version-history-content h3{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin:0 0 12px;font-size:13px;line-height:1.5;font-weight:750}
.version-history-content h3>span{font-size:10px;color:var(--muted,#6e7169);font-weight:500}
.version-history-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:13px 20px;margin:0}
.version-history-fields>div{min-width:0}
.version-history-fields dt{margin:0 0 4px;color:var(--muted,#6e7169);font-size:11px;line-height:1.4}
.version-history-fields dd{margin:0;font-size:12px;line-height:1.6;white-space:pre-wrap;overflow-wrap:anywhere;font-variant-numeric:tabular-nums}
.version-history-note{margin:0;font-size:12px;line-height:1.75;white-space:pre-wrap;overflow-wrap:anywhere}
.version-history-internal{padding:15px;border:1px solid #e0dbce;border-radius:7px;background:#f6f3eb}
.version-history-internal h4{margin:18px 0 7px;font-size:11px;color:var(--muted,#6e7169);font-weight:650}
@media(max-width:480px){.version-history-summary{gap:9px;padding:13px 12px;grid-template-columns:minmax(0,1fr) auto 14px}.version-history-content{padding:15px 12px}.version-history-fields{gap:12px 14px}.version-history-quote strong{font-size:12px}.version-history-internal{padding:12px}}
@media(prefers-reduced-motion:reduce){.version-history-summary,.version-history-chevron{transition:none}}
.channel-terms-editor .project-section-heading { gap: 1rem; align-items: center; }
.channel-terms-copy-note, .channel-terms-help { color: var(--muted, #73766d); font-size: .82rem; line-height: 1.6; margin: .25rem 0 1.1rem; }
.channel-terms-fields { border: 0; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.channel-terms-channel { grid-column: 1 / -1; }
.channel-terms-percent-input { display: flex; align-items: center; border: 1px solid var(--line, #d4d0c3); border-radius: 6px; background: var(--surface, #fffdf7); overflow: hidden; }
.channel-terms-percent-input input { border: 0 !important; background: transparent !important; min-width: 0; flex: 1; }
.channel-terms-percent-input:focus-within { outline: 2px solid var(--accent, #c16738); outline-offset: 2px; }
.channel-terms-percent-input input:focus { outline: none; }
.channel-terms-percent-input > span { padding: 0 .8rem; color: var(--muted, #73766d); }
.channel-terms-editor form > .channel-terms-help { margin-top: .9rem; }
.channel-terms-summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: .75rem; margin: 0; }
.channel-terms-summary > div { padding: .8rem 0; border-top: 1px solid var(--line, #d4d0c3); }
.channel-terms-summary dt { color: var(--muted, #73766d); font-size: .8rem; margin-bottom: .35rem; }
.channel-terms-summary dd { font-size: 1rem; font-weight: 650; margin: 0; font-variant-numeric: tabular-nums; }
@media (max-width: 640px) { .channel-terms-fields { grid-template-columns: minmax(0, 1fr); } .channel-terms-editor .project-section-heading { align-items: flex-start; flex-wrap: wrap; } }
.supplier-confirmation-backdrop{position:fixed;inset:0;z-index:160;display:grid;place-items:center;padding:24px;background:rgb(15 32 41 / .48);backdrop-filter:blur(4px);transition:opacity 180ms ease}
.supplier-confirmation-dialog{width:min(1180px,100%);max-height:calc(100dvh - 48px);display:flex;flex-direction:column;overflow:hidden;border:1px solid #d9d9d0;border-radius:18px;background:#fffdf8;color:#173447;box-shadow:0 28px 100px rgb(0 0 0 / .25);transition:transform 180ms ease,opacity 180ms ease}
.supplier-confirmation-backdrop[data-motion="enter"],.supplier-confirmation-backdrop[data-motion="exit"]{opacity:0}
.supplier-confirmation-backdrop[data-motion="enter"] .supplier-confirmation-dialog,.supplier-confirmation-backdrop[data-motion="exit"] .supplier-confirmation-dialog{transform:translateY(10px);opacity:0}
.supplier-confirmation-header{display:flex;justify-content:space-between;gap:24px;padding:24px 28px 20px;border-bottom:1px solid #e4e1d8;flex:none}
.supplier-confirmation-eyebrow{font-size:12px;font-weight:700;color:#98603f;letter-spacing:.04em}
.supplier-confirmation-header h2{margin:5px 0 7px;font-size:25px;line-height:1.25}
.supplier-confirmation-header p,.supplier-confirmation-footer p{margin:0;font-size:13px;line-height:1.6;color:#62717a}
.supplier-confirmation-close{flex:none;width:38px;height:38px;display:grid;place-items:center;border:1px solid #deded7;border-radius:9px;background:white;color:#173447;cursor:pointer}
.supplier-confirmation-content{padding:20px 28px 28px;overflow:auto;min-height:0;overscroll-behavior:contain}
.supplier-confirmation-summary{display:flex;align-items:center;flex-wrap:wrap;gap:10px 20px;font-size:13px;margin-bottom:20px;color:#62717a}
.supplier-confirmation-summary strong{font-size:15px;color:#236343}
.supplier-confirmation-summary>span:last-child{margin-left:auto;font-variant-numeric:tabular-nums}
.supplier-confirmation-select{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:7px 12px;margin-bottom:20px;font-size:13px;font-weight:700}
.supplier-confirmation-select .app-select-trigger{width:100%;min-height:42px;border:1px solid #cdcfc8;border-radius:8px;padding:8px 12px;background:white;color:#173447;font:inherit}
.supplier-confirmation-select small{grid-column:2;font-weight:400;color:#62717a}
.supplier-confirmation-recipient{display:grid;grid-template-columns:1fr 1fr auto;gap:16px;padding:15px 18px;background:#f5f0e6;border-radius:10px;margin-bottom:18px}
.supplier-confirmation-recipient div{min-width:0;display:grid;gap:4px}
.supplier-confirmation-recipient span{font-size:11px;color:#62717a}
.supplier-confirmation-recipient strong{font-size:14px;overflow-wrap:anywhere}
.supplier-confirmation-table-wrap{border:1px solid #deded6;border-radius:10px;overflow:auto}
.supplier-confirmation-table{width:100%;min-width:900px;border-collapse:collapse;font-size:13px;line-height:1.5}
.supplier-confirmation-table th{text-align:left;background:#173447;color:white;padding:12px;white-space:nowrap;font-size:12px;font-weight:600}
.supplier-confirmation-table td{padding:14px 12px;vertical-align:top;border-bottom:1px solid #e5e3dc}
.supplier-confirmation-table tr:last-child td{border-bottom:0}
.supplier-confirmation-table tbody tr:nth-child(even){background:#faf7ef}
.supplier-confirmation-table td:first-child{width:30%;min-width:260px}
.supplier-confirmation-table td:nth-child(2){width:20%}
.supplier-confirmation-coverage{padding:14px 16px;border:1px solid #deded6;border-radius:10px;margin-bottom:16px;font-size:13px;line-height:1.6;background:#f3f6f3}
.supplier-confirmation-coverage.partial{background:#fff3e5;border-color:#ddb98e}
.supplier-confirmation-coverage p{margin:5px 0}.supplier-confirmation-coverage small{color:#62717a}
.supplier-confirmation-totals{display:flex;flex-wrap:wrap;gap:8px 24px;margin:0 0 14px;font-size:13px}.supplier-confirmation-totals strong{font-variant-numeric:tabular-nums}
.supplier-confirmation-footer>.supplier-confirmation-agreement{display:grid;flex:1;gap:5px}
.supplier-confirmation-agreement label{display:flex;gap:9px;align-items:flex-start;font-size:13px;line-height:1.5;cursor:pointer}
.supplier-confirmation-agreement input{width:17px;height:17px;accent-color:#b95428;flex:none;margin:2px 0 0}
.supplier-confirmation-table td strong{display:block;font-size:13px;font-weight:600}
.supplier-confirmation-table td small{display:block;color:#65737c;font-size:11px;margin-top:4px}
.supplier-confirmation-table .number{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.supplier-confirmation-details{margin-top:18px;border-top:1px solid #e4e1d8;padding-top:16px;font-size:13px}
.supplier-confirmation-details summary{font-weight:600;cursor:pointer;padding:4px 0;color:#173447}
.supplier-confirmation-terms-list{display:grid;gap:16px;margin-top:14px}
.supplier-confirmation-terms-list article{border:1px solid #e2dfd7;border-radius:10px;padding:16px}
.supplier-confirmation-terms-list h3{font-size:14px;margin:0 0 12px;line-height:1.5}
.supplier-confirmation-terms-list h3 span{color:#697983;font-size:11px;margin-left:8px}
.supplier-confirmation-terms-list dl{display:grid;grid-template-columns:1fr 1fr;gap:10px 24px;margin:0}
.supplier-confirmation-terms-list dl>div{display:grid;grid-template-columns:92px 1fr;gap:10px}
.supplier-confirmation-terms-list dt{color:#62717a;font-size:12px}
.supplier-confirmation-terms-list dd{margin:0;white-space:pre-wrap;overflow-wrap:anywhere}
.supplier-confirmation-missing summary{color:#856124}
.supplier-confirmation-missing p{color:#62717a;line-height:1.6}
.supplier-confirmation-missing ul{padding-left:20px;display:grid;gap:6px}
.supplier-confirmation-empty{padding:48px 24px;border:1px dashed #d4d5ca;border-radius:12px;text-align:center;background:#faf8f1}
.supplier-confirmation-empty h3{font-size:17px;margin:0 0 10px}
.supplier-confirmation-empty p{max-width:480px;margin:auto;color:#62717a;font-size:14px;line-height:1.7}
.supplier-confirmation-feedback{font-size:13px;padding:12px 14px;border-radius:8px;line-height:1.6;margin-bottom:0}
.supplier-confirmation-feedback.error{background:#fff0e9;color:#934028}
.supplier-confirmation-feedback.success{background:#edf6ef;color:#236343}
.supplier-confirmation-footer{flex:none;border-top:1px solid #e4e1d8;padding:17px 28px;display:flex;align-items:center;justify-content:space-between;gap:16px;background:#fffdf8}
.supplier-confirmation-footer>p{max-width:430px;font-size:12px}
.supplier-confirmation-footer>div{display:flex;gap:10px;flex:none}
.supplier-confirmation-footer button{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:1px solid #cbd0cc;border-radius:9px;background:white;color:#173447;padding:11px 16px;font:inherit;font-size:13px;font-weight:650;cursor:pointer;white-space:nowrap;min-height:42px}
.supplier-confirmation-footer button.primary{border-color:#ad4d23;background:#b95428;color:white}
.supplier-confirmation-footer button:disabled{opacity:.5;cursor:not-allowed}
.supplier-confirmation-dialog :focus-visible{outline:3px solid #da8b55;outline-offset:3px}
@media(max-width:760px){.supplier-confirmation-backdrop{padding:10px}.supplier-confirmation-dialog{max-height:calc(100dvh - 20px);border-radius:12px}.supplier-confirmation-header{padding:18px}.supplier-confirmation-header h2{font-size:21px}.supplier-confirmation-content{padding:16px 18px 22px}.supplier-confirmation-recipient{grid-template-columns:1fr;gap:12px}.supplier-confirmation-summary>span:last-child{margin-left:0}.supplier-confirmation-footer{padding:14px 18px;align-items:stretch;flex-direction:column}.supplier-confirmation-footer>div{display:grid;grid-template-columns:1fr 1fr}.supplier-confirmation-footer button{padding:10px 8px}.supplier-confirmation-terms-list dl{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){.supplier-confirmation-backdrop,.supplier-confirmation-dialog{transition:none!important;transform:none!important}}
@media(max-width:760px){.supplier-confirmation-footer>.supplier-confirmation-agreement{grid-template-columns:1fr}}
.op-workspace{display:flex;flex-direction:column;gap:12px;min-width:0}.op-workspace h2,.op-workspace p{margin:0}.op-workspace .section-heading p{margin-top:6px;color:var(--text-muted,#69717a)}.op-filters{display:flex;align-items:end;flex-wrap:wrap;gap:12px}.op-filters label{display:flex;flex-direction:column;gap:5px;font-size:12px}.op-filters input{min-height:34px;border:1px solid var(--border,#ddd);border-radius:6px;padding:6px 8px}.op-table-scroll{overflow:auto;border:1px solid var(--border,#ddd);border-radius:8px;background:var(--surface,#fff)}.op-table{width:100%;border-collapse:collapse;font-size:13px}.op-table th,.op-table td{text-align:left;vertical-align:top;border-bottom:1px solid var(--border,#ddd);padding:11px 12px}.op-table th{background:var(--surface-muted,#f5f6f7);white-space:nowrap}.op-table td small{display:block;margin-top:5px;color:var(--text-muted,#69717a)}.op-table code{font-size:10px;color:var(--text-muted,#69717a)}.op-table pre{max-height:300px;max-width:500px;overflow:auto;white-space:pre-wrap;font-size:11px}.op-table summary{cursor:pointer}.op-table button{background:transparent;border:0;color:var(--accent,#19714c);text-align:left;cursor:pointer}

.op-table-scroll{max-height:calc(100dvh - 405px);min-height:230px}.op-table thead th{position:sticky;top:0;z-index:1}.op-table th:first-child{min-width:155px}.op-table th:nth-child(2){min-width:110px}.op-table th:nth-child(3){min-width:220px}

@media(max-width:650px){.op-table-scroll{max-height:calc(100dvh - 530px)}}
.entity-picker {
  display: grid;
  min-width: 0;
  grid-template-columns: minmax(0, 1fr);
  gap: 7px;
}

.entity-picker-with-create {
  grid-template-columns: minmax(0, 1fr) auto;
}

.entity-picker-trigger,
.entity-picker-create {
  min-height: 40px;
  color: var(--ink, #20251f);
  border: 1px solid var(--line-strong, #cbc7b8);
  border-radius: 5px;
  background: var(--paper, #fffdf7);
  font-size: 12px;
  font-weight: 700;
}

.entity-picker-trigger {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 11px;
  text-align: left;
}

.entity-picker-trigger > span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.entity-picker-trigger > svg {
  flex: 0 0 auto;
  color: var(--muted, #6e7169);
  transition: transform var(--motion-fast, 130ms) var(--ease-standard, ease);
}

.entity-picker-trigger[aria-expanded="true"] {
  border-color: var(--orange, #bb5a21);
  box-shadow: 0 0 0 3px rgb(187 90 33 / 11%);
}

.entity-picker-trigger[aria-expanded="true"] > svg { transform: rotate(180deg); }
.entity-picker-trigger[aria-invalid="true"] { border-color: var(--red, #a23f37); }
.entity-picker-placeholder { color: var(--faint, #95978f); font-weight: 600; }

.entity-picker-create {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 11px;
  color: var(--orange, #bb5a21);
  border-color: #dfb697;
  background: #fff6ed;
}

.entity-picker-trigger:hover:not(:disabled),
.entity-picker-create:hover:not(:disabled) {
  border-color: var(--orange, #bb5a21);
}

.entity-picker-create:hover:not(:disabled) {
  color: #fff;
  background: var(--orange, #bb5a21);
}

.entity-picker-trigger:disabled,
.entity-picker-create:disabled { cursor: not-allowed; opacity: .52; }

.entity-picker-trigger:focus-visible,
.entity-picker-create:focus-visible,
.entity-picker-header button:focus-visible,
.entity-picker-search input:focus-visible,
.entity-picker-option:focus-visible {
  outline: 3px solid rgb(187 90 33 / 22%);
  outline-offset: 2px;
}

.entity-picker-error {
  grid-column: 1 / -1;
  color: var(--red, #a23f37);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.4;
}

.entity-picker-backdrop {
  position: fixed;
  z-index: 260;
  display: grid;
  inset: 0;
  overflow-y: auto;
  padding: 24px;
  background: rgb(12 22 28 / 64%);
  backdrop-filter: blur(6px);
  place-items: center;
  animation: entity-picker-overlay-in var(--motion-base, 190ms) var(--ease-enter, ease-out) both;
}

.entity-picker-dialog {
  display: flex;
  width: min(560px, 100%);
  max-height: min(620px, calc(100dvh - 48px));
  flex-direction: column;
  overflow: hidden;
  color: var(--ink, #20251f);
  border: 1px solid rgb(255 255 255 / 28%);
  border-radius: 7px;
  background: var(--paper, #fffdf7);
  box-shadow: 0 30px 90px rgb(4 12 17 / 36%);
  animation: entity-picker-dialog-in var(--motion-slow, 240ms) var(--ease-enter, ease-out) both;
}

.entity-picker-backdrop[data-motion-state="exit"] {
  animation: entity-picker-overlay-out var(--motion-base, 190ms) var(--ease-exit, ease-in) both;
}

.entity-picker-backdrop[data-motion-state="exit"] .entity-picker-dialog {
  animation: entity-picker-dialog-out var(--motion-base, 190ms) var(--ease-exit, ease-in) both;
}

.entity-picker-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  padding: 19px 20px;
  color: #fff;
  background: var(--navy, #172936);
}

.entity-picker-header > div { min-width: 0; }
.entity-picker-header span { color: #f2c761; font-size: 11px; font-weight: 800; letter-spacing: .12em; }
.entity-picker-header h2 { margin: 4px 0 0; font-family: Georgia, "Songti SC", serif; font-size: 21px; }

.entity-picker-header button {
  display: grid;
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  padding: 0;
  color: rgb(255 255 255 / 74%);
  border: 1px solid rgb(255 255 255 / 18%);
  border-radius: 50%;
  background: transparent;
  place-items: center;
}

.entity-picker-header button:hover { color: #fff; background: rgb(255 255 255 / 9%); }

.entity-picker-search {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 16px 16px 10px;
  padding: 0 11px;
  color: var(--muted, #6e7169);
  border: 1px solid var(--line-strong, #cbc7b8);
  border-radius: 5px;
  background: #fff;
}

.entity-picker-search:focus-within {
  color: var(--orange, #bb5a21);
  border-color: var(--orange, #bb5a21);
  box-shadow: 0 0 0 3px rgb(187 90 33 / 11%);
}

.entity-picker-search input {
  width: 100%;
  min-width: 0;
  min-height: 42px;
  padding: 0;
  color: var(--ink, #20251f);
  border: 0;
  outline: 0;
  background: transparent;
  font: inherit;
  font-size: 13px;
}

.entity-picker-list {
  min-height: 120px;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 4px 10px 14px;
  scrollbar-gutter: stable;
}

.entity-picker-option {
  display: grid;
  width: 100%;
  min-width: 0;
  grid-template-columns: minmax(0, 1fr) 24px;
  align-items: center;
  gap: 12px;
  padding: 11px 10px;
  color: var(--ink, #20251f);
  border: 0;
  border-bottom: 1px solid var(--line, #dedbcf);
  border-radius: 4px;
  background: transparent;
  text-align: left;
}

.entity-picker-option[data-active="true"],
.entity-picker-option:hover:not(:disabled) { background: var(--orange-soft, #fff0e4); }
.entity-picker-option[aria-selected="true"] { box-shadow: inset 3px 0 0 var(--orange, #bb5a21); }
.entity-picker-option:disabled { cursor: not-allowed; opacity: .45; }

.entity-picker-option-copy {
  display: grid;
  min-width: 0;
  grid-template-columns: minmax(0, auto) minmax(0, 1fr);
  align-items: baseline;
  gap: 3px 9px;
}

.entity-picker-option-copy strong {
  overflow: hidden;
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.entity-picker-option-copy code {
  overflow: hidden;
  color: var(--muted, #6e7169);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.entity-picker-option-copy small {
  grid-column: 1 / -1;
  color: var(--muted, #6e7169);
  font-size: 12px;
  line-height: 1.45;
}

.entity-picker-option-check { display: grid; color: var(--orange, #bb5a21); place-items: center; }

.entity-picker-empty {
  display: flex;
  min-height: 180px;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 7px;
  padding: 24px;
  color: var(--muted, #6e7169);
  text-align: center;
}

.entity-picker-empty strong { color: var(--ink, #20251f); font-size: 13px; }
.entity-picker-empty span { max-width: 330px; font-size: 12px; line-height: 1.5; }

.entity-picker-footer {
  display: flex;
  justify-content: flex-end;
  padding: 12px 18px 15px;
  border-top: 1px solid var(--line, #dedbcf);
  background: #fbfaf5;
}

.entity-picker-footer button {
  display: inline-flex;
  min-height: 42px;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 0 15px;
  color: white;
  border: 1px solid var(--orange, #bb5a21);
  border-radius: 6px;
  background: var(--orange, #bb5a21);
  font-size: 12px;
  font-weight: 800;
}

@keyframes entity-picker-overlay-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes entity-picker-overlay-out { from { opacity: 1; } to { opacity: 0; } }
@keyframes entity-picker-dialog-in { from { opacity: 0; transform: translateY(8px) scale(.985); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes entity-picker-dialog-out { from { opacity: 1; transform: translateY(0) scale(1); } to { opacity: 0; transform: translateY(6px) scale(.99); } }

@media (max-width: 560px) {
  .entity-picker-backdrop { padding: 12px; }
  .entity-picker-dialog { max-height: calc(100dvh - 24px); }
  .entity-picker-header { padding: 17px 16px; }
  .entity-picker-create span { display: none; }
  .entity-picker-create { width: 40px; padding-inline: 0; }
  .entity-picker-option-copy { grid-template-columns: minmax(0, 1fr); }
  .entity-picker-option-copy code,
  .entity-picker-option-copy small { grid-column: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .entity-picker-trigger > svg,
  .entity-picker-backdrop,
  .entity-picker-dialog {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}
/* Project-first workspace shared by ProjectCenterView and CounterpartyDirectoryView. */

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

.project-kicker {
  display: block;
  color: var(--orange, #bb5a21);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .12em;
  line-height: 1.25;
  text-transform: uppercase;
}

.project-primary-button,
.project-secondary-button,
.project-outline-button,
.project-icon-button,
.project-modal-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 38px;
  padding: 0 13px;
  color: var(--ink, #20251f);
  border: 1px solid transparent;
  border-radius: 5px;
  background: transparent;
  font-size: 12px;
  font-weight: 750;
  line-height: 1.2;
  white-space: nowrap;
}

.project-primary-button {
  color: #fff;
  border-color: var(--orange, #bb5a21);
  background: var(--orange, #bb5a21);
  box-shadow: 0 8px 20px rgb(187 90 33 / 17%);
}

.project-primary-button:hover { border-color: #a74d1b; background: #a74d1b; }
.project-primary-button:disabled { cursor: not-allowed; opacity: .48; box-shadow: none; }

.project-primary-button-navy {
  border-color: var(--navy, #172936);
  background: var(--navy, #172936);
  box-shadow: 0 8px 20px rgb(23 41 54 / 18%);
}

.project-primary-button-navy:hover { border-color: #0e202b; background: #0e202b; }

.project-secondary-button {
  color: var(--navy, #172936);
  border-color: var(--line-strong, #cbc7b8);
  background: var(--paper, #fffdf7);
}

.project-secondary-button:hover {
  border-color: #a9a594;
  background: #f7f4eb;
}

.project-outline-button {
  color: var(--navy, #172936);
  border-color: #aeb7b8;
  background: transparent;
}

.project-outline-button:hover { border-color: var(--navy, #172936); background: #eef2f2; }

.project-icon-button,
.project-modal-close {
  width: 36px;
  min-width: 36px;
  height: 36px;
  min-height: 36px;
  padding: 0;
  color: var(--muted, #6e7169);
  border-color: var(--line, #dedbcf);
  border-radius: 50%;
  background: transparent;
}

.project-icon-button:hover,
.project-modal-close:hover {
  color: var(--navy, #172936);
  border-color: var(--line-strong, #cbc7b8);
  background: #f3f1e9;
}

.project-primary-button:focus-visible,
.project-secondary-button:focus-visible,
.project-outline-button:focus-visible,
.project-icon-button:focus-visible,
.project-modal-close:focus-visible,
.project-search:focus-within,
.counterparty-search:focus-within,
.project-form-field input:focus-visible,
.project-form-field select:focus-visible,
.project-form-field textarea:focus-visible,
.project-stage-track:focus-visible,
.project-table-wrap:focus-visible,
.project-results-metrics:focus-visible,
.counterparty-table-wrap:focus-visible {
  outline: 3px solid rgb(187 90 33 / 22%);
  outline-offset: 2px;
}

.project-status-pill,
.project-status,
.project-sku-status {
  display: inline-flex;
  width: fit-content;
  min-height: 23px;
  align-items: center;
  justify-content: center;
  padding: 4px 8px;
  color: #64675f;
  border: 1px solid var(--line, #dedbcf);
  border-radius: 999px;
  background: #f5f3ec;
  font-size: 12px;
  font-weight: 750;
  line-height: 1;
  white-space: nowrap;
}

.project-status-good {
  color: var(--green, #286454);
  border-color: #bcd8cc;
  background: var(--green-soft, #e5f1eb);
}

.project-status-warning,
.project-sku-status-warning {
  color: #98501b;
  border-color: #e7c397;
  background: #fff3de;
}

.project-status-ink {
  color: #fff;
  border-color: var(--navy, #172936);
  background: var(--navy, #172936);
}

.project-status-active {
  color: var(--green, #286454);
  border-color: #bcd8cc;
  background: var(--green-soft, #e5f1eb);
}

.project-status-on_hold {
  color: #8a561b;
  border-color: #ead2a3;
  background: #fff4dc;
}

.project-status-completed {
  color: #fff;
  border-color: var(--navy, #172936);
  background: var(--navy, #172936);
}

.project-status-archived { color: var(--faint, #95978f); background: #efede6; }

.project-workspace {
  display: grid;
  grid-template-columns: 232px minmax(0, 1fr) 252px;
  min-width: 0;
  overflow: hidden;
  background: var(--paper, #fffdf7);
  border: 1px solid var(--line, #dedbcf);
  box-shadow: 0 14px 42px rgb(33 40 34 / 5%);
}

.project-rail,
.project-detail,
.project-results-rail { min-width: 0; }

.project-rail {
  display: flex;
  min-height: 700px;
  flex-direction: column;
  border-right: 1px solid var(--line, #dedbcf);
  background: #faf8f1;
}

.project-rail-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 17px 13px 13px;
  border-bottom: 1px solid var(--line, #dedbcf);
}

.project-rail-header > div {
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
}

.project-rail > .project-search { margin: 12px 13px; }

.project-rail-header h2,
.project-rail-header h3 {
  margin: 0;
  font-family: Georgia, "Songti SC", serif;
  font-size: 18px;
  letter-spacing: -.025em;
}

.project-search,
.counterparty-search {
  display: flex;
  min-height: 40px;
  align-items: center;
  gap: 8px;
  padding: 0 10px;
  color: var(--faint, #95978f);
  border: 1px solid var(--line-strong, #cbc7b8);
  border-radius: 5px;
  background: var(--paper, #fffdf7);
}

.project-search input,
.counterparty-search input {
  width: 100%;
  min-width: 0;
  padding: 0;
  color: var(--ink, #20251f);
  border: 0;
  outline: 0;
  background: transparent;
  font-size: 12px;
}

.project-list {
  display: flex;
  min-height: 0;
  overflow-y: auto;
  flex: 1;
  flex-direction: column;
}

.project-list-item {
  position: relative;
  display: flex;
  min-height: 134px;
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
  padding: 15px 14px;
  color: var(--ink, #20251f);
  text-align: left;
  border: 0;
  border-bottom: 1px solid var(--line, #dedbcf);
  background: transparent;
}

.project-list-item::before {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 3px;
  background: var(--orange, #bb5a21);
  content: "";
  opacity: 0;
  transform: scaleY(.35);
  transition: opacity var(--motion-base, 190ms) ease, transform var(--motion-base, 190ms) var(--ease-enter, ease-out);
}

.project-list-item:hover { background: #fff9f0; }

.project-list-item-active { background: #fff6ec; }

.project-list-item-active::before { opacity: 1; transform: scaleY(1); }

.project-list-code {
  color: var(--orange, #bb5a21);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .04em;
}

.project-list-title {
  overflow: hidden;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.4;
  text-overflow: ellipsis;
}

.project-list-supplier,
.project-list-meta {
  overflow: hidden;
  color: var(--muted, #6e7169);
  font-size: 12px;
  line-height: 1.45;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.project-list-status { margin-top: auto; }

.project-list-empty,
.project-empty-state {
  display: flex;
  min-height: 220px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 24px;
  color: var(--muted, #6e7169);
  text-align: center;
}

.project-list-empty strong,
.project-empty-state strong { color: var(--ink, #20251f); font-size: 12px; }

.project-list-empty span,
.project-empty-state span { max-width: 320px; font-size: 12px; line-height: 1.5; }

.project-list-footer {
  padding: 13px;
  border-top: 1px solid var(--line, #dedbcf);
  background: var(--paper, #fffdf7);
}

.project-list-footer > button { width: 100%; }

.project-detail { background: var(--paper, #fffdf7); }

.project-hero {
  padding: 15px 20px 12px;
  border-bottom: 1px solid var(--line, #dedbcf);
}

.project-heading {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

.project-heading h2 {
  margin: 0;
  font-family: Georgia, "Songti SC", serif;
  font-size: 25px;
  font-weight: 650;
  letter-spacing: -.035em;
}

.project-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 11px 24px;
  margin-top: 9px;
}

.project-meta-item {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--muted, #6e7169);
  font-size: 12px;
}

.project-meta-item strong { color: var(--ink, #20251f); font-weight: 700; }

.project-stage-track {
  display: grid;
  grid-template-columns: repeat(6, minmax(88px, 1fr));
  overflow-x: auto;
  padding: 13px 14px 8px;
  border-bottom: 1px solid var(--line, #dedbcf);
  scrollbar-width: thin;
}

.project-stage-step {
  position: relative;
  display: flex;
  min-width: 88px;
  min-height: 72px;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  color: var(--faint, #95978f);
  text-align: center;
}

.project-stage-step::after {
  position: absolute;
  top: 19px;
  left: calc(50% + 23px);
  width: calc(100% - 46px);
  height: 1px;
  background: var(--line-strong, #cbc7b8);
  content: "";
}

.project-stage-step:last-child::after { display: none; }

.project-stage-icon {
  z-index: 1;
  display: grid;
  width: 36px;
  height: 36px;
  color: inherit;
  border: 1px solid var(--line-strong, #cbc7b8);
  border-radius: 50%;
  background: var(--paper, #fffdf7);
  place-items: center;
}

.project-stage-copy { display: flex; flex-direction: column; gap: 3px; }
.project-stage-copy strong { color: var(--ink, #20251f); font-size: 12px; }
.project-stage-copy span { color: inherit; font-size: 12px; }
.project-stage-step-done,
.project-stage-done { color: var(--green, #286454); }
.project-stage-step-done::after,
.project-stage-done::after { background: #9fc9ba; }
.project-stage-step-done .project-stage-icon,
.project-stage-done .project-stage-icon { border-color: #b9d7cb; background: var(--green-soft, #e5f1eb); }
.project-stage-step-active,
.project-stage-active { color: var(--orange, #bb5a21); }
.project-stage-step-active .project-stage-icon,
.project-stage-active .project-stage-icon { border-color: #db8a59; box-shadow: 0 0 0 5px rgb(187 90 33 / 8%); }
.project-stage-step-pending,
.project-stage-pending { color: var(--faint, #95978f); }

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

.project-participant-item {
  display: grid;
  grid-template-columns: 27px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  min-height: 66px;
  padding: 9px 14px;
  border-right: 1px solid var(--line, #dedbcf);
}

.project-participant-item:last-child { border-right: 0; }
.project-participant-item > span { color: var(--orange, #bb5a21); }
.project-participant-item > div { min-width: 0; }
.project-participant-item > div span { display: block; color: var(--muted, #6e7169); font-size: 12px; }
.project-participant-item strong { display: block; margin-top: 5px; overflow: hidden; font-size: 12px; line-height: 1.45; text-overflow: ellipsis; white-space: nowrap; }

.project-terms-card,
.project-sku-section {
  margin: 12px;
  border: 1px solid var(--line, #dedbcf);
  background: var(--paper, #fffdf7);
  box-shadow: 0 9px 28px rgb(34 40 34 / 4%);
}

.project-section-heading,
.project-sku-header,
.project-results-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  padding: 15px 17px 13px;
  border-bottom: 1px solid var(--line, #dedbcf);
}

.project-section-heading h3,
.project-sku-header h3,
.project-results-header h3 {
  margin: 4px 0 0;
  font-family: Georgia, "Songti SC", serif;
  font-size: 17px;
  letter-spacing: -.025em;
}

.project-section-heading p,
.project-sku-header p {
  margin: 6px 0 0;
  color: var(--muted, #6e7169);
  font-size: 12px;
  line-height: 1.5;
}

.project-inherited-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 8px;
  color: var(--green, #286454);
  border: 1px solid #bdd7cd;
  border-radius: 4px;
  background: var(--green-soft, #e5f1eb);
  font-size: 12px;
  font-weight: 750;
  white-space: nowrap;
}

.project-inherited-badge-overridden {
  color: #91501e;
  border-color: #e4be97;
  background: #fff3df;
}

.project-terms-grid {
  display: grid;
  grid-template-columns: .7fr 1.35fr .65fr 1.3fr;
}

.project-term-item {
  position: relative;
  display: grid;
  min-width: 0;
  min-height: 64px;
  grid-template-columns: 24px minmax(0, 1fr);
  align-content: center;
  gap: 4px 8px;
  padding: 8px 11px;
  border-right: 1px solid var(--line, #dedbcf);
}

.project-term-item:last-child { border-right: 0; }
.project-term-item > svg { grid-row: 1 / span 2; color: var(--orange, #bb5a21); }
.project-term-item span { color: var(--muted, #6e7169); font-size: 12px; }
.project-term-item strong { overflow-wrap: anywhere; font-size: 12px; line-height: 1.45; }

.project-terms-editor {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 13px;
  padding: 15px 16px;
  border-top: 1px solid var(--line, #dedbcf);
  background: #fbfaf5;
}

.project-terms-actions,
.project-sku-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px;
}

.project-terms-actions { margin-top: 14px; }
.project-terms-actions > span { margin-right: auto; color: var(--muted, #6e7169); font-size: 12px; }
.project-terms-card > .project-section-heading { padding: 11px 15px 9px; }
.project-terms-card > .project-terms-actions { margin-top: 0; padding: 8px 12px; border-top: 1px solid var(--line, #dedbcf); }
.project-terms-card > .project-terms-actions .project-secondary-button,
.project-terms-card > .project-terms-actions .project-outline-button { min-height: 32px; }
.project-terms-editor-actions { display: flex; grid-column: 1 / -1; justify-content: flex-end; gap: 8px; }

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

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

.project-form-field > span {
  color: var(--muted, #6e7169);
  font-size: 12px;
  font-weight: 700;
}

.project-form-field input,
.project-form-field select,
.project-form-field textarea {
  width: 100%;
  min-width: 0;
  min-height: 40px;
  padding: 8px 10px;
  color: var(--ink, #20251f);
  border: 1px solid var(--line-strong, #cbc7b8);
  border-radius: 4px;
  outline: 0;
  background: var(--paper, #fffdf7);
  font-size: 12px;
}

.project-form-field textarea { min-height: 88px; resize: vertical; }
.project-form-field-wide { grid-column: span 2; }

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

.project-sku-table,
.counterparty-table {
  width: 100%;
  min-width: 790px;
  border-collapse: collapse;
  font-size: 12px;
}
.project-sku-table { min-width: 930px; }

.project-sku-table th,
.counterparty-table th {
  padding: 10px 12px;
  color: var(--muted, #6e7169);
  text-align: left;
  border-bottom: 1px solid var(--line, #dedbcf);
  background: #f6f4ed;
  font-size: 12px;
  font-weight: 750;
  line-height: 1.35;
}
.project-sku-table th { padding-inline: 8px; }

.project-sku-table td,
.counterparty-table td {
  padding: 11px 12px;
  color: var(--ink, #20251f);
  border-bottom: 1px solid #ebe8de;
  line-height: 1.4;
  vertical-align: middle;
}
.project-sku-table td { padding-inline: 8px; }

.project-sku-table tbody tr:last-child td,
.counterparty-table tbody tr:last-child td { border-bottom: 0; }
.project-sku-table tbody tr:hover,
.counterparty-table tbody tr:hover { background: #fcf8f1; }
.project-sku-name { display: flex; flex-direction: column; gap: 3px; }
.project-sku-name strong { font-size: 12px; }
.project-sku-name span { color: var(--muted, #6e7169); font-size: 12px; }
.project-sku-warning-row { background: #fff8ec; }
.project-sku-cartons-input { width: 72px; min-height: 34px; padding: 5px 7px; border: 1px solid var(--line-strong, #cbc7b8); border-radius: 4px; background: #fffdf7; font-size: 12px; }

.project-sku-code-button {
  padding: 4px 0;
  color: var(--orange, #bb5a21);
  border: 0;
  background: transparent;
  font-size: 12px;
  font-weight: 800;
}

.project-sku-code-button:hover { color: #9f4515; text-decoration: underline; text-underline-offset: 3px; }

.project-sku-remove-button {
  display: inline-flex;
  min-height: 30px;
  align-items: center;
  gap: 5px;
  padding: 4px 7px;
  color: var(--red, #a23f37);
  border: 1px solid #e2b9b4;
  border-radius: 4px;
  background: #fff8f6;
  font-size: 12px;
  font-weight: 750;
  white-space: nowrap;
}
.project-sku-remove-button:hover { color: #fff; border-color: var(--red, #a23f37); background: var(--red, #a23f37); }
.project-sku-remove-button:focus-visible { outline: 3px solid rgb(162 63 55 / 20%); outline-offset: 2px; }

.project-sku-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 11px 13px;
  color: var(--muted, #6e7169);
  border-top: 1px solid var(--line, #dedbcf);
  background: #faf8f1;
  font-size: 12px;
}

.project-results-rail {
  border-left: 1px solid var(--line, #dedbcf);
  background: #fcfaf4;
}

.project-results-header { align-items: center; }

.project-results-metrics { padding: 0 17px; }

.project-result-metric {
  padding: 18px 0;
  border-bottom: 1px solid var(--line, #dedbcf);
}

.project-result-label,
.project-result-context { display: block; color: var(--muted, #6e7169); font-size: 12px; }

.project-result-value {
  display: block;
  margin: 7px 0 4px;
  font-family: Georgia, "Songti SC", serif;
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -.035em;
}

.project-result-metric-primary .project-result-value,
.project-result-primary .project-result-value {
  color: var(--orange, #bb5a21);
  font-size: 36px;
}

.project-result-metric-warning .project-result-value,
.project-result-warning .project-result-value { color: var(--red, #a23f37); }

.project-results-action { width: calc(100% - 34px); margin: 14px 17px 0; }

.project-floor-control {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  padding: 13px 17px;
  border-bottom: 1px solid var(--line, #dedbcf);
  background: #f8f5ec;
}
.project-floor-control > label { display: flex; min-width: 0; flex-direction: column; gap: 6px; color: var(--muted, #6e7169); font-size: 12px; font-weight: 700; }
.project-floor-input { display: flex; width: 86px; align-items: baseline; gap: 4px; border-bottom: 1px solid var(--line-strong, #cbc7b8); }
.project-floor-input input { width: 100%; min-width: 0; padding: 2px 0; color: var(--ink, #20251f); border: 0; outline: 0; background: transparent; font-family: Georgia, serif; font-size: 18px; font-weight: 700; }
.project-floor-input b { color: var(--muted, #6e7169); font-size: 12px; }
.project-floor-control > button { min-height: 32px; align-self: end; padding-inline: 9px; }
.project-floor-control > small,
.project-floor-error { grid-column: 1 / -1; color: var(--faint, #95978f); font-size: 12px; line-height: 1.4; }
.project-floor-error { color: var(--red, #a23f37); font-weight: 700; }

.project-help { position: relative; }
.project-help-trigger { display: grid; width: 32px; height: 32px; padding: 0; color: var(--muted, #6e7169); border: 1px solid var(--line, #dedbcf); border-radius: 50%; background: transparent; place-items: center; }
.project-help-trigger:hover,
.project-help-trigger[aria-expanded="true"] { color: #fff; border-color: var(--orange, #bb5a21); background: var(--orange, #bb5a21); }
.project-help-popover { position: absolute; top: calc(100% + 8px); right: 0; z-index: 4; width: 230px; padding: 11px 12px; color: #fff; border-radius: 5px; background: var(--navy, #172936); box-shadow: 0 14px 34px rgb(12 22 28 / 22%); font-size: 12px; font-weight: 500; line-height: 1.5; animation: project-popover-enter 120ms var(--ease-enter, ease-out) both; }
.project-formula-popover { box-sizing: border-box; width: min(390px, calc(100vw - 32px)); max-height: min(470px, calc(100dvh - 190px)); overflow: auto; overscroll-behavior: contain; }
.project-formula-popover section { padding-block: 10px; border-top: 1px solid rgb(255 255 255 / 20%); }
.project-formula-popover section:first-child { padding-top: 0; border-top: 0; }
.project-formula-popover section:last-child { padding-bottom: 0; }
.project-formula-popover p { margin: 0; font-size: 13px; white-space: normal; overflow-wrap: anywhere; }

.project-floor-alert {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin: 17px;
  padding: 13px;
  color: #91501e;
  border: 1px solid #e5bd96;
  border-radius: 5px;
  background: #fff6e9;
  font-size: 12px;
  line-height: 1.5;
}

.project-floor-alert > svg { flex: 0 0 auto; margin-top: 1px; }
.project-floor-alert > div { display: flex; min-width: 0; flex-direction: column; gap: 4px; }
.project-floor-alert strong,
.project-floor-alert span { font-size: 12px; }
.project-floor-alert-clear { color: var(--green, #286454); border-color: #bdd7cd; background: #f0f8f4; }
.project-floor-alert-empty { color: var(--muted, #6e7169); border-color: var(--line, #dedbcf); background: #f6f4ed; }
.project-results-updated { display: block; padding: 4px 17px 18px; color: var(--faint, #95978f); font-size: 12px; }

.project-modal-backdrop {
  position: fixed;
  z-index: 120;
  display: grid;
  inset: 0;
  overflow-y: auto;
  padding: 24px;
  background: rgb(12 22 28 / 64%);
  backdrop-filter: blur(6px);
  place-items: center;
  animation: project-overlay-enter var(--motion-base, 190ms) ease-out both;
}

.project-modal-backdrop[data-motion-state="exit"] { animation: project-overlay-exit var(--motion-base, 190ms) var(--ease-exit, ease-in) both; }
.project-modal-backdrop[data-motion-state="exit"] .project-modal { animation: project-dialog-exit var(--motion-base, 190ms) var(--ease-exit, ease-in) both; }

.project-modal {
  display: flex;
  width: min(620px, 100%);
  max-height: calc(100dvh - 48px);
  flex-direction: column;
  overflow: hidden;
  color: var(--ink, #20251f);
  border: 1px solid rgb(255 255 255 / 28%);
  border-radius: 7px;
  background: var(--paper, #fffdf7);
  box-shadow: 0 30px 90px rgb(4 12 17 / 36%);
  animation: project-dialog-enter var(--motion-slow, 240ms) var(--ease-enter, ease-out) both;
}

.project-modal-wide { width: min(820px, 100%); }

.project-modal-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  padding: 20px 22px;
  color: #fff;
  background: var(--navy, #172936);
}

.project-modal-header .project-kicker { color: #f2c761; }
.project-modal-header h2 { margin: 4px 0 0; font-family: Georgia, "Songti SC", serif; font-size: 22px; }
.project-modal-header p { max-width: 520px; margin: 7px 0 0; color: rgb(255 255 255 / 60%); font-size: 12px; line-height: 1.5; }
.project-modal-header .project-modal-close { color: rgb(255 255 255 / 72%); border-color: rgb(255 255 255 / 18%); }
.project-modal-header .project-modal-close:hover { color: #fff; background: rgb(255 255 255 / 9%); }
.project-modal-form { display: flex; min-height: 0; flex: 1; flex-direction: column; overflow-y: auto; overscroll-behavior: contain; }
.project-modal-form > p { margin: 0; padding: 17px 22px 0; color: var(--muted, #6e7169); font-size: 12px; line-height: 1.5; }
.project-modal-body { padding: 20px 22px; }

.project-modal-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 13px; padding: 17px 22px 20px; }
.project-modal-form > .project-modal-error { margin-inline: 22px; }
.project-modal-form > .project-sku-picker-search { margin-inline: 22px; }
.project-modal-form > .project-sku-readiness-summary { margin-inline: 22px; }
.project-modal-form > .project-sku-picker-toolbar { margin-inline: 22px; }
.project-modal-form > .project-sku-picker-hint { margin-inline: 22px; }
.project-modal-form > .project-sku-picker-list { margin-inline: 22px; }

.project-modal-footer {
  position: sticky;
  bottom: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  padding: 14px 22px 18px;
  border-top: 1px solid var(--line, #dedbcf);
  background: #faf8f1;
}

.project-select-with-add { display: grid; min-width: 0; max-width: 100%; grid-template-columns: minmax(0, 1fr) 40px; gap: 9px; }
.project-select-with-add > * { min-width: 0; }
.project-select-add-button { display: grid; width: 40px; min-height: 40px; color: var(--orange, #bb5a21); border: 1px solid #dfb697; border-radius: 5px; background: #fff6ed; place-items: center; }
.project-select-add-button:hover { color: #fff; border-color: var(--orange, #bb5a21); background: var(--orange, #bb5a21); }
.project-select-add-button:focus-visible { outline: 3px solid rgb(187 90 33 / 22%); outline-offset: 2px; }

.project-quick-party { padding: 15px; border: 1px solid #e4c5ad; border-radius: 6px; background: #fff8ef; box-shadow: inset 3px 0 0 var(--orange, #bb5a21); }
.project-quick-party > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; margin-bottom: 13px; }
.project-quick-party > header > div { display: flex; flex-direction: column; gap: 3px; }
.project-quick-party > header strong { font-size: 13px; }
.project-quick-party > header span, .project-quick-party > p { color: var(--muted, #6e7169); font-size: 12px; line-height: 1.45; }
.project-quick-party > header button { display: grid; width: 30px; height: 30px; flex: 0 0 auto; color: var(--muted, #6e7169); border: 1px solid var(--line, #dedbcf); border-radius: 50%; background: transparent; place-items: center; }
.project-quick-party-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 11px; }
.project-quick-party > p { margin: 12px 0 0; }
.project-quick-party .project-modal-error { display: flex; align-items: flex-start; gap: 7px; }
.project-quick-party-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 13px; }

.sku-editor-body { display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 20px; }
.sku-editor-image-panel { display: flex; min-width: 0; flex-direction: column; align-items: center; gap: 10px; }
.sku-editor-image-panel > img, .sku-editor-no-image { width: 100%; aspect-ratio: 1; object-fit: contain; border: 1px solid var(--line, #dedbcf); border-radius: 6px; background: #fff; }
.sku-editor-no-image { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; color: var(--faint, #95978f); font-size: 12px; }
.sku-image-upload { width: 100%; cursor: pointer; }
.sku-image-upload input { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.sku-editor-image-panel > small { color: var(--faint, #95978f); font-size: 11px; line-height: 1.45; text-align: center; }
.project-link-button { padding: 3px 6px; color: var(--orange, #bb5a21); border: 0; background: transparent; font-size: 12px; font-weight: 700; }
.sku-editor-form-grid { min-width: 0; align-content: start; gap: 16px 14px; }
.sku-editor-form-grid > .project-form-field-wide:first-child { padding-bottom: 3px; }

.project-modal-error {
  margin: 13px 0 0;
  padding: 9px 11px;
  color: var(--red, #a23f37);
  border: 1px solid #e5bbb5;
  border-radius: 4px;
  background: var(--red-soft, #fae8e5);
  font-size: 12px;
  font-weight: 650;
  line-height: 1.45;
}

.project-sku-picker-search {
  display: flex;
  min-height: 40px;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  padding: 0 10px;
  color: var(--faint, #95978f);
  border: 1px solid var(--line-strong, #cbc7b8);
  border-radius: 5px;
  background: var(--paper, #fffdf7);
}
.project-sku-picker-search:focus-within { outline: 3px solid rgb(187 90 33 / 22%); outline-offset: 2px; }
.project-sku-picker-search input { width: 100%; min-width: 0; color: var(--ink, #20251f); border: 0; outline: 0; background: transparent; font-size: 12px; }
.project-sku-picker-toolbar { display: flex; align-items: center; justify-content: flex-start; flex-wrap: wrap; gap: 9px 12px; margin-bottom: 9px; }
.project-sku-picker-toolbar button { display: inline-flex; min-height: 32px; align-items: center; gap: 6px; padding: 5px 9px; color: var(--navy, #172936); border: 1px solid #aeb7b8; border-radius: 4px; background: #f8faf9; font-size: 12px; font-weight: 750; }
.project-sku-picker-toolbar button:hover:not(:disabled):not([aria-pressed="true"]) { border-color: var(--navy, #172936); background: #eef2f2; }
.project-sku-picker-toolbar button[aria-pressed="true"] { color: #fff; border-color: var(--green, #286454); background: var(--green, #286454); }
.project-sku-picker-toolbar button:disabled { cursor: not-allowed; opacity: .5; }
.project-sku-picker-toolbar button:focus-visible { outline: 3px solid rgb(187 90 33 / 22%); outline-offset: 2px; }
.project-sku-picker-toolbar > span { margin-left: auto; color: var(--muted, #6e7169); font-size: 12px; }
.project-sku-picker-mode { display: inline-flex; padding: 2px; border: 1px solid var(--line-strong, #cbc7b8); border-radius: 5px; background: #f1efe8; }
.project-sku-picker-mode button { min-height: 28px; border: 0; background: transparent; }
.project-sku-picker-toolbar .project-sku-picker-mode button[aria-pressed="true"] { color: #fff; background: var(--navy, #172936); }
.project-sku-picker-hint { margin-bottom: 9px; padding: 8px 10px; color: var(--muted, #6e7169); border-left: 3px solid #d7ae72; background: #fbf6e9; font-size: 11px; line-height: 1.5; }
.project-sku-readiness-summary { display: flex; align-items: flex-start; gap: 9px; margin-bottom: 11px; padding: 10px 11px; color: var(--red, #a23f37); border: 1px solid #e5bbb5; border-radius: 5px; background: var(--red-soft, #fae8e5); }
.project-sku-readiness-summary > div { display: flex; min-width: 0; flex-direction: column; gap: 3px; }
.project-sku-readiness-summary strong { font-size: 12px; }
.project-sku-readiness-summary span { font-size: 11px; line-height: 1.5; }
.project-sku-picker-list { position: relative; display: flex; max-height: min(48dvh, 460px); overflow-y: auto; flex-direction: column; border: 1px solid var(--line, #dedbcf); scrollbar-gutter: stable; }
.project-sku-picker-group + .project-sku-picker-group { border-top: 1px solid var(--line-strong, #cbc7b8); }
.project-sku-picker-group-header { position: sticky; top: 0; z-index: 2; display: flex; min-height: 47px; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 11px; border-bottom: 1px solid var(--line, #dedbcf); background: #f5f2e9; box-shadow: 0 2px 8px rgb(23 41 54 / 6%); }
.project-sku-picker-group-header > div { display: flex; min-width: 0; align-items: center; gap: 8px; }
.project-sku-picker-group-header > div:first-child { align-items: flex-start; flex-direction: column; gap: 1px; }
.project-sku-picker-group-header span { color: var(--muted, #6e7169); font-size: 11px; line-height: 1.35; }
.project-sku-picker-group-header strong { overflow: hidden; max-width: 440px; color: var(--ink, #20251f); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.project-sku-picker-group-header button { min-height: 29px; padding: 4px 8px; color: var(--navy, #172936); border: 1px solid #aeb7b8; border-radius: 4px; background: var(--paper, #fffdf7); font-size: 11px; font-weight: 750; }
.project-sku-picker-group-header button[aria-pressed="true"] { color: #fff; border-color: var(--green, #286454); background: var(--green, #286454); }
.project-sku-picker-group-header button:focus-visible { outline: 3px solid rgb(187 90 33 / 22%); outline-offset: 2px; }
.project-sku-picker-item { position: relative; display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: 10px; align-items: center; min-height: 72px; padding: 10px 12px; border-bottom: 1px solid var(--line, #dedbcf); background: transparent; }
.project-sku-picker-group-items > .project-sku-picker-item:last-child { border-bottom: 0; }
.project-sku-picker-item:hover { background: #fcf8f1; }
.project-sku-picker-item-selected { background: #fff4e7; box-shadow: inset 3px 0 0 var(--orange, #bb5a21); }
.project-sku-picker-item-blocked { background: #fffafa; box-shadow: inset 3px 0 0 var(--red, #a23f37); }
.project-sku-picker-item-blocked:hover { background: #fff5f3; }
.project-sku-picker-item > input { position: absolute; top: 50%; left: 12px; z-index: 1; width: 22px; height: 22px; margin: 0; opacity: 0; transform: translateY(-50%); cursor: pointer; }
.project-sku-picker-item > input:disabled { cursor: not-allowed; }
.project-sku-picker-item:has(> input:focus-visible) { outline: 3px solid rgb(187 90 33 / 22%); outline-offset: -3px; }
.project-sku-picker-check { display: grid; width: 22px; height: 22px; color: transparent; border: 1px solid #aeb7b8; border-radius: 4px; background: #fff; pointer-events: none; place-items: center; }
.project-sku-picker-check[data-checked="true"] { color: #fff; border-color: var(--green, #286454); background: var(--green, #286454); }
.project-sku-picker-list[data-batch-mode="true"] { user-select: none; }
.project-sku-picker-list[data-batch-mode="true"] .project-sku-picker-meta { cursor: crosshair; }
.project-sku-picker-marquee { position: absolute; z-index: 3; box-sizing: border-box; border: 1px solid var(--orange, #bb5a21); border-radius: 2px; background: rgb(187 90 33 / 12%); pointer-events: none; }
.project-sku-picker-list[data-dragging="true"],
.project-sku-picker-list[data-dragging="true"] * { cursor: crosshair !important; user-select: none; }
.project-sku-picker-meta { display: flex; min-width: 0; flex-direction: column; gap: 3px; cursor: pointer; }
.project-sku-picker-item-blocked .project-sku-picker-meta { cursor: not-allowed; }
.project-sku-picker-meta strong { overflow: hidden; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.project-sku-picker-meta span { color: var(--muted, #6e7169); font-size: 12px; }
.project-sku-picker-meta small { display: flex; min-width: 0; align-items: center; gap: 7px; color: var(--faint, #95978f); font-size: 11px; }
.project-sku-picker-meta small > span { overflow: hidden; color: inherit; font-size: inherit; text-overflow: ellipsis; white-space: nowrap; }
.project-sku-recommendation { flex: 0 0 auto; padding: 2px 5px; color: #8b4519; border: 1px solid #e2bd8d; border-radius: 999px; background: #fff1dd; font-size: 10px; font-weight: 800; }
.project-sku-picker-meta em { color: var(--red, #a23f37); font-size: 11px; font-style: normal; font-weight: 750; }
.project-sku-fix-button { min-height: 32px; padding: 0 9px; color: var(--orange, #bb5a21); border: 1px solid #dfb697; border-radius: 4px; background: #fff6ed; font-size: 11px; font-weight: 750; }
.project-sku-fix-button:hover { color: #fff; border-color: var(--orange, #bb5a21); background: var(--orange, #bb5a21); }
.project-sku-picker-empty { padding: 30px; color: var(--muted, #6e7169); text-align: center; font-size: 12px; }
.project-sku-picker-empty { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.project-sku-picker-empty strong,
.project-sku-picker-empty span { font-size: 12px; }

.project-workspace-empty { display: grid; min-height: 520px; grid-template-columns: 1fr; place-items: center; }
.project-workspace-empty .project-empty-state h2 { margin: 2px 0; font-family: Georgia, "Songti SC", serif; font-size: 23px; }
.project-workspace-empty .project-empty-state p { max-width: 460px; margin: 0 0 9px; color: var(--muted, #6e7169); font-size: 12px; line-height: 1.55; }

/* Company and counterparty directory. */

.counterparty-directory { display: flex; min-width: 0; flex-direction: column; gap: 16px; }

.counterparty-command-bar {
  display: flex;
  min-height: 108px;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 18px 22px;
  color: #fff;
  border: 1px solid #10222d;
  background: var(--navy, #172936);
  box-shadow: 0 13px 38px rgb(23 41 54 / 12%);
}

.counterparty-command-bar .project-kicker { color: #f2c761; }
.counterparty-command-bar h2 { margin: 4px 0 3px; font-family: Georgia, "Songti SC", serif; font-size: 25px; font-weight: 650; letter-spacing: -.035em; }
.counterparty-command-bar p { margin: 0; color: rgb(255 255 255 / 57%); font-size: 12px; line-height: 1.5; }

.counterparty-layout {
  display: grid;
  grid-template-columns: 304px minmax(0, 1fr);
  min-width: 0;
  overflow: hidden;
  background: var(--paper, #fffdf7);
  border: 1px solid var(--line, #dedbcf);
  box-shadow: 0 14px 42px rgb(33 40 34 / 5%);
}

.counterparty-rail {
  display: flex;
  min-width: 0;
  min-height: 690px;
  flex-direction: column;
  border-right: 1px solid var(--line, #dedbcf);
  background: #faf8f1;
}

.counterparty-rail-header { padding: 16px 14px 13px; border-bottom: 1px solid var(--line, #dedbcf); }
.counterparty-rail-header > div { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 11px; }
.counterparty-rail-header > div span { font-family: Georgia, "Songti SC", serif; font-size: 18px; font-weight: 700; }
.counterparty-rail-header > div strong,
.counterparty-section-count { color: var(--orange, #bb5a21); font-size: 12px; font-weight: 800; }

.counterparty-filter-block { padding: 11px 12px 8px; border-bottom: 1px solid var(--line, #dedbcf); }

.counterparty-role-filters { display: flex; flex-wrap: wrap; gap: 5px; }

.counterparty-role-filters button {
  min-height: 30px;
  padding: 0 9px;
  color: var(--muted, #6e7169);
  border: 1px solid var(--line, #dedbcf);
  border-radius: 999px;
  background: var(--paper, #fffdf7);
  font-size: 12px;
  font-weight: 700;
}

.counterparty-role-filters button:hover { color: var(--ink, #20251f); border-color: var(--line-strong, #cbc7b8); }
.counterparty-role-filters .counterparty-filter-active { color: #fff; border-color: var(--navy, #172936); background: var(--navy, #172936); }

.counterparty-result-summary {
  min-height: 34px;
  padding: 9px 14px;
  color: var(--green, #286454);
  border-bottom: 1px solid var(--line, #dedbcf);
  background: #f0f7f3;
  font-size: 12px;
  font-weight: 700;
}

.counterparty-list { display: flex; min-height: 0; overflow-y: auto; flex: 1; flex-direction: column; }

.counterparty-list-item {
  position: relative;
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  min-height: 98px;
  padding: 12px 12px;
  color: var(--ink, #20251f);
  text-align: left;
  border: 0;
  border-bottom: 1px solid var(--line, #dedbcf);
  background: transparent;
}

.counterparty-list-item::before {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 3px;
  background: var(--orange, #bb5a21);
  content: "";
  opacity: 0;
  transform: scaleY(.4);
  transition: opacity var(--motion-base, 190ms) ease, transform var(--motion-base, 190ms) var(--ease-enter, ease-out);
}

.counterparty-list-item:hover { background: #fff9f0; }
.counterparty-list-item-active { background: #fff5e9; }
.counterparty-list-item-active::before { opacity: 1; transform: scaleY(1); }

.counterparty-list-icon,
.counterparty-hero-icon {
  display: grid;
  width: 38px;
  height: 38px;
  color: var(--orange, #bb5a21);
  border: 1px solid #ead8c5;
  border-radius: 50%;
  background: var(--orange-soft, #fff0e4);
  place-items: center;
}

.counterparty-list-copy { display: flex; min-width: 0; flex-direction: column; gap: 3px; }
.counterparty-list-copy strong,
.counterparty-list-copy span,
.counterparty-list-copy small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.counterparty-list-copy strong { font-size: 12px; }
.counterparty-list-copy span { color: var(--muted, #6e7169); font-size: 12px; }
.counterparty-list-copy small { color: var(--faint, #95978f); font-size: 12px; }

.counterparty-activity { color: var(--faint, #95978f); font-size: 12px; font-weight: 750; }
.counterparty-activity-active { color: var(--green, #286454); }

.counterparty-list-empty { display: flex; min-height: 220px; flex-direction: column; align-items: center; justify-content: center; gap: 7px; padding: 24px; color: var(--muted, #6e7169); text-align: center; }
.counterparty-list-empty strong { color: var(--ink, #20251f); font-size: 12px; }
.counterparty-list-empty span { font-size: 12px; }

.counterparty-detail { min-width: 0; background: var(--paper, #fffdf7); }

.counterparty-detail-empty {
  display: flex;
  min-height: 600px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: var(--muted, #6e7169);
  text-align: center;
}

.counterparty-detail-empty h2 { margin: 3px 0 0; color: var(--ink, #20251f); font-family: Georgia, "Songti SC", serif; font-size: 21px; }
.counterparty-detail-empty p { margin: 0; font-size: 12px; }

.counterparty-hero {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  min-height: 116px;
  padding: 20px 22px;
  border-bottom: 1px solid var(--line, #dedbcf);
}

.counterparty-hero-icon { width: 50px; height: 50px; color: #f2c761; border-color: rgb(255 255 255 / 10%); background: var(--navy, #172936); }
.counterparty-hero-copy { min-width: 0; }
.counterparty-title-row { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; }
.counterparty-title-row > span:first-child { color: var(--orange, #bb5a21); font-size: 12px; font-weight: 800; letter-spacing: .05em; }
.counterparty-hero h2 { margin: 7px 0 0; font-family: Georgia, "Songti SC", serif; font-size: 25px; font-weight: 650; letter-spacing: -.035em; }
.counterparty-hero p { margin: 5px 0 0; color: var(--muted, #6e7169); font-size: 12px; }

.counterparty-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-bottom: 1px solid var(--line, #dedbcf); }
.counterparty-facts > div { display: grid; min-width: 0; min-height: 76px; grid-template-columns: 24px minmax(0, 1fr); align-content: center; gap: 3px 7px; padding: 12px 16px; border-right: 1px solid var(--line, #dedbcf); }
.counterparty-facts > div:last-child { border-right: 0; }
.counterparty-facts svg { grid-row: 1 / span 2; color: var(--green, #286454); }
.counterparty-facts span { color: var(--muted, #6e7169); font-size: 12px; }
.counterparty-facts strong { overflow: hidden; font-size: 12px; line-height: 1.4; text-overflow: ellipsis; white-space: nowrap; }

.counterparty-section {
  min-width: 0;
  margin: 16px;
  border: 1px solid var(--line, #dedbcf);
  background: var(--paper, #fffdf7);
  box-shadow: 0 9px 28px rgb(34 40 34 / 4%);
}

.counterparty-terms-section { margin-bottom: 0; }
.counterparty-terms-editor { padding: 15px 16px; background: #fbfaf5; }
.counterparty-terms-section .project-terms-grid { grid-template-columns: .65fr 1.4fr .7fr 1.25fr; }
.counterparty-terms-section .project-term-item-wide { min-width: 0; }

.counterparty-non-supplier-note {
  display: flex;
  min-height: 92px;
  align-items: center;
  gap: 11px;
  padding: 16px;
  color: var(--muted, #6e7169);
  background: #faf8f1;
}
.counterparty-non-supplier-note > svg { flex: 0 0 auto; color: var(--green, #286454); }
.counterparty-non-supplier-note > div { display: flex; flex-direction: column; gap: 5px; }
.counterparty-non-supplier-note strong { color: var(--ink, #20251f); font-size: 12px; }
.counterparty-non-supplier-note span { font-size: 12px; line-height: 1.5; }

.counterparty-save-note {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 10px 15px;
  color: var(--green, #286454);
  border-top: 1px solid #c9ded5;
  background: #f1f8f4;
  font-size: 12px;
  line-height: 1.45;
}

.counterparty-detail-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.counterparty-detail-grid > .counterparty-section:first-child { margin-right: 8px; }
.counterparty-detail-grid > .counterparty-section:last-child { margin-left: 8px; }
.counterparty-compact-heading { align-items: center; }
.counterparty-table { min-width: 610px; }
.counterparty-table td:first-child { color: var(--orange, #bb5a21); }
.counterparty-table td:last-child { width: 48px; }
.counterparty-mini-empty { min-height: 190px; }

.counterparty-project-list { display: flex; max-height: 300px; overflow-y: auto; flex-direction: column; }
.counterparty-project-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  gap: 10px;
  align-items: center;
  min-height: 70px;
  padding: 10px 12px;
  color: var(--ink, #20251f);
  text-align: left;
  border: 0;
  border-bottom: 1px solid var(--line, #dedbcf);
  background: transparent;
}

button.counterparty-project-item:hover { background: #fcf8f1; }
.counterparty-project-item:last-child { border-bottom: 0; }
.counterparty-project-code { color: var(--orange, #bb5a21); font-size: 12px; font-weight: 800; }
.counterparty-project-copy { display: flex; min-width: 0; flex-direction: column; gap: 4px; }
.counterparty-project-copy strong { overflow: hidden; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.counterparty-project-copy small { color: var(--muted, #6e7169); font-size: 12px; }
.counterparty-project-item > svg { color: var(--faint, #95978f); }

@keyframes project-overlay-enter {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes project-overlay-exit {
  from { opacity: 1; }
  to { opacity: 0; }
}

@keyframes project-dialog-enter {
  from { opacity: 0; transform: translateY(13px) scale(.985); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes project-dialog-exit {
  from { opacity: 1; transform: translateY(0) scale(1); }
  to { opacity: 0; transform: translateY(8px) scale(.99); }
}

@keyframes project-popover-enter {
  from { opacity: 0; transform: translateY(-5px) scale(.985); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@media (max-width: 1300px) {
  .project-workspace { grid-template-columns: 212px minmax(0, 1fr) 230px; }
  .project-hero { padding-inline: 19px; }
  .project-heading h2 { font-size: 23px; }
  .project-terms-card, .project-sku-section { margin: 13px; }
  .counterparty-layout { grid-template-columns: 278px minmax(0, 1fr); }
  .counterparty-detail-grid { grid-template-columns: 1fr; }
  .counterparty-detail-grid > .counterparty-section:first-child,
  .counterparty-detail-grid > .counterparty-section:last-child { margin: 16px; }
  .counterparty-detail-grid > .counterparty-section:last-child { margin-top: 0; }
}

@media (max-width: 1100px) {
  .project-workspace { grid-template-columns: 220px minmax(0, 1fr); }
  .project-results-rail { grid-column: 1 / -1; display: grid; grid-template-areas: "header action" "metrics metrics" "floor floor" "alert alert" "updated updated"; grid-template-columns: 220px minmax(0, 1fr); border-top: 1px solid var(--line, #dedbcf); border-left: 0; }
  .project-results-header { grid-area: header; border-right: 1px solid var(--line, #dedbcf); border-bottom: 0; }
  .project-results-action { grid-area: action; width: auto; min-width: 140px; align-self: center; justify-self: end; margin: 10px 16px; }
  .project-results-metrics { grid-area: metrics; display: grid; grid-template-columns: repeat(5, minmax(120px, 1fr)); overflow-x: auto; padding: 0; }
  .project-floor-control { grid-area: floor; }
  .project-result-metric { min-width: 120px; padding: 15px; border-right: 1px solid var(--line, #dedbcf); border-bottom: 0; }
  .project-result-metric-primary .project-result-value { font-size: 29px; }
  .project-floor-alert { grid-area: alert; }
  .project-results-updated { grid-area: updated; }
  .project-participants { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .project-participant-item:nth-child(2n) { border-right: 0; }
  .project-participant-item:nth-child(-n+2) { border-bottom: 1px solid var(--line, #dedbcf); }
  .project-terms-grid,
  .counterparty-terms-section .project-terms-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .project-term-item:nth-child(2n) { border-right: 0; }
  .project-term-item:nth-child(-n+2) { border-bottom: 1px solid var(--line, #dedbcf); }
  .counterparty-facts { grid-template-columns: 1fr; }
  .counterparty-facts > div { border-right: 0; border-bottom: 1px solid var(--line, #dedbcf); }
  .counterparty-facts > div:last-child { border-bottom: 0; }
}

@media (max-width: 760px) {
  .project-workspace,
  .counterparty-layout { grid-template-columns: minmax(0, 1fr); overflow: visible; }
  .project-rail,
  .counterparty-rail { min-height: 0; max-height: none; border-right: 0; border-bottom: 1px solid var(--line, #dedbcf); }
  .project-list,
  .counterparty-list { max-height: 310px; }
  .project-list-item { min-height: 116px; }
  .project-results-rail { display: block; grid-column: auto; }
  .project-results-header { border-right: 0; border-bottom: 1px solid var(--line, #dedbcf); }
  .project-results-metrics { grid-template-columns: repeat(5, minmax(150px, 1fr)); }
  .project-stage-track { grid-template-columns: repeat(6, minmax(112px, 1fr)); }
  .project-section-heading,
  .project-sku-header { align-items: stretch; flex-direction: column; }
  .project-sku-actions,
  .project-terms-actions { justify-content: flex-start; }
  .project-terms-editor { grid-template-columns: 1fr; }
  .project-terms-card > .project-terms-actions .project-secondary-button,
  .project-terms-card > .project-terms-actions .project-outline-button { min-height: 44px; }
  .counterparty-command-bar { min-height: 0; align-items: flex-start; flex-direction: column; padding: 19px; }
  .counterparty-command-bar .project-primary-button { width: 100%; }
  .counterparty-hero { padding-inline: 16px; }
  .counterparty-section { margin-inline: 12px; }
  .counterparty-detail-grid > .counterparty-section:first-child,
  .counterparty-detail-grid > .counterparty-section:last-child { margin-inline: 12px; }
  .project-modal-backdrop { padding: 12px; place-items: center; }
  .project-modal { width: 100%; max-height: calc(100dvh - 24px); }
  .sku-editor-body { grid-template-columns: 150px minmax(0, 1fr); }
}

@media (max-width: 560px) {
  .project-heading { align-items: flex-start; flex-direction: column; }
  .project-meta { align-items: flex-start; flex-direction: column; gap: 8px; }
  .project-participants,
  .project-terms-grid,
  .counterparty-terms-section .project-terms-grid,
  .project-form-grid,
  .project-modal-form-grid,
  .project-quick-party-grid,
  .project-terms-editor { grid-template-columns: 1fr; }
  .project-participant-item,
  .project-participant-item:nth-child(2n) { border-right: 0; border-bottom: 1px solid var(--line, #dedbcf); }
  .project-participant-item:last-child { border-bottom: 0; }
  .project-term-item,
  .project-term-item:nth-child(2n) { border-right: 0; border-bottom: 1px solid var(--line, #dedbcf); }
  .project-term-item:last-child { border-bottom: 0; }
  .project-form-field-wide { grid-column: auto; }
  .sku-editor-body { grid-template-columns: 1fr; }
  .sku-editor-image-panel { width: min(240px, 100%); margin-inline: auto; }
  .counterparty-hero { grid-template-columns: 42px minmax(0, 1fr); }
  .counterparty-hero-icon { width: 42px; height: 42px; }
  .counterparty-hero h2 { font-size: 21px; }
  .counterparty-title-row { align-items: flex-start; }
  .counterparty-project-item { grid-template-columns: minmax(0, 1fr) auto; }
  .counterparty-project-code { grid-column: 1 / -1; }
  .counterparty-project-item > svg { display: none; }
  .project-modal-header,
  .project-modal-body,
  .project-modal-footer { padding-inline: 16px; }
  .project-modal-form > .project-modal-error,
  .project-modal-form > .project-sku-picker-search,
  .project-modal-form > .project-sku-readiness-summary,
  .project-modal-form > .project-sku-picker-toolbar,
  .project-modal-form > .project-sku-picker-hint,
  .project-modal-form > .project-sku-picker-list { margin-inline: 16px; }
  .project-sku-picker-toolbar { align-items: stretch; flex-direction: column; }
  .project-sku-picker-mode { width: 100%; }
  .project-sku-picker-mode button { min-height: 40px; flex: 1; justify-content: center; }
  .project-sku-picker-toolbar > button { min-height: 40px; justify-content: center; }
  .project-sku-picker-toolbar > span { width: 100%; margin-left: 0; }
  .project-sku-picker-list { max-height: min(46dvh, 430px); }
  .project-sku-picker-group-header { align-items: flex-start; flex-direction: column; }
  .project-sku-picker-group-header > div { width: 100%; justify-content: space-between; }
  .project-sku-picker-group-header strong { max-width: 100%; white-space: normal; }
  .project-sku-picker-item { grid-template-columns: 22px minmax(0, 1fr); }
  .project-sku-fix-button { grid-column: 2; width: fit-content; min-height: 36px; }
  .project-modal-footer { flex-wrap: wrap; }
  .project-modal-footer > span { width: 100%; }
  .project-modal-footer > button { flex: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .project-modal-backdrop,
  .project-modal,
  .project-list-item::before,
  .counterparty-list-item::before {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}
.member-management-view { display: flex; flex-direction: column; gap: 16px; }
.member-command-bar { display: flex; min-height: 126px; align-items: center; justify-content: space-between; gap: 24px; padding: 20px 24px; color: #fff; border: 1px solid #10222d; background: var(--navy, #172936); box-shadow: 0 13px 38px rgb(23 41 54 / 12%); }
.member-command-bar .section-kicker { color: #f2c761; }
.member-command-bar h2 { margin: 4px 0 3px; font-family: Georgia, "Songti SC", serif; font-size: 26px; letter-spacing: -.035em; }
.member-command-bar p { margin: 0; color: rgb(255 255 255 / 60%); font-size: 12px; line-height: 1.5; }
.member-count-chip { display: inline-flex; min-height: 38px; flex: 0 0 auto; align-items: center; gap: 8px; padding: 0 12px; color: #fff; border: 1px solid rgb(255 255 255 / 20%); border-radius: 999px; background: rgb(255 255 255 / 7%); font-size: 12px; font-weight: 750; }
.member-management-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(360px, .9fr); gap: 16px; align-items: start; }
.member-panel { min-width: 0; border: 1px solid var(--line, #dedbcf); background: var(--paper, #fffdf7); box-shadow: 0 14px 42px rgb(33 40 34 / 5%); }
.member-panel > header { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 18px; color: var(--navy, #172936); border-bottom: 1px solid var(--line, #dedbcf); }
.member-panel > header > div { display: flex; flex-direction: column; gap: 2px; }
.member-panel > header span { color: var(--orange, #bb5a21); font-size: 10px; font-weight: 850; letter-spacing: .14em; }
.member-panel > header h3 { margin: 0; font-family: Georgia, "Songti SC", serif; font-size: 20px; }
.member-list { display: flex; flex-direction: column; }
.member-list article { display: grid; min-height: 76px; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 11px; align-items: center; padding: 12px 16px; border-bottom: 1px solid var(--line, #dedbcf); }
.member-list article:last-child { border-bottom: 0; }
.member-avatar { display: grid; width: 38px; height: 38px; color: #fff; border-radius: 50%; background: var(--green, #286454); font-family: Georgia, serif; font-size: 17px; font-weight: 800; place-items: center; }
.member-list article > div { display: flex; min-width: 0; flex-direction: column; gap: 3px; }
.member-list article strong { font-size: 13px; }
.member-list article > div span { color: var(--muted, #6e7169); font-size: 12px; }
.member-active { display: inline-flex; align-items: center; gap: 5px; color: var(--green, #286454); font-size: 11px; font-weight: 750; }
.member-invite-panel form { display: flex; flex-direction: column; gap: 13px; padding: 18px; }
.member-invite-panel label, .member-role-field { display: flex; min-width: 0; flex-direction: column; gap: 6px; }
.member-invite-panel label > span, .member-role-field > span { color: var(--muted, #6e7169); font-size: 11px; font-weight: 750; }
.member-invite-panel input { min-height: 42px; padding: 0 12px; color: var(--ink, #20251f); border: 1px solid var(--line-strong, #cbc7b8); border-radius: 5px; background: #fff; font: inherit; font-size: 12px; }
.member-invite-panel input:focus { outline: 3px solid rgb(187 90 33 / 18%); outline-offset: 1px; border-color: var(--orange, #bb5a21); }
.member-admin-warning, .member-invite-help { display: flex; align-items: flex-start; gap: 7px; margin: 0; font-size: 11px; line-height: 1.5; }
.member-admin-warning { padding: 9px 10px; color: #8a4c19; border: 1px solid #e7c9a9; border-radius: 4px; background: #fff4e7; }
.member-invite-help { color: var(--muted, #6e7169); }
.member-invite-notice { padding: 9px 10px; border-radius: 4px; font-size: 12px; line-height: 1.45; }
.member-invite-notice-success { color: var(--green, #286454); border: 1px solid #b9d5c8; background: #edf7f1; }
.member-invite-notice-error { color: var(--red, #a23f37); border: 1px solid #e5bbb5; background: var(--red-soft, #fae8e5); }
.member-invite-submit { align-self: flex-end; }
.member-invite-locked { display: flex; min-height: 240px; flex-direction: column; align-items: center; justify-content: center; gap: 7px; padding: 24px; color: var(--muted, #6e7169); text-align: center; }
.member-invite-locked strong { color: var(--ink, #20251f); }
.member-invite-locked span { max-width: 340px; font-size: 12px; line-height: 1.5; }
@media (max-width: 920px) { .member-management-grid { grid-template-columns: 1fr; } }
@media (max-width: 640px) { .member-command-bar { align-items: flex-start; flex-direction: column; } .member-count-chip { align-self: flex-start; } }

.member-access-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.member-access-heading > span { display:flex; align-items:center; gap:8px; color:var(--green); font-size:13px; font-weight:650; }
.member-access-heading button { display:flex; align-items:center; gap:6px; }
.member-filters { display:flex; flex-wrap:wrap; gap:6px; padding:14px 16px; border-bottom:1px solid var(--line); }
.member-filters button,.member-row-actions button { padding:7px 10px; border:1px solid var(--line); border-radius:8px; background:transparent; color:var(--ink); font:inherit; font-size:12px; cursor:pointer; }
.member-filters button[aria-pressed=true] { color:var(--orange); background:#fff2e8; border-color:#e6bca1; }
.member-list .member-row-actions { grid-column:2 / -1; flex-direction:row; align-items:center; justify-content:flex-end; flex-wrap:wrap; gap:8px; }
.member-list .member-row-actions .member-danger-link { color:#a23f37; }
.member-person strong,.member-email { overflow-wrap:anywhere; }
.member-protected { font-size:12px; color:var(--muted); }
.member-status-pending { color:#9a6a13; }
.member-status-disabled { color:var(--muted); }
.member-empty,.member-permissions-help { padding:16px; font-size:12px; line-height:1.65; color:var(--muted); }
.member-permissions-help { border-top:1px solid var(--line); }
.member-permissions-help summary { cursor:pointer; color:var(--ink); font-weight:650; }
.member-invite-fields { display:flex; flex-direction:column; gap:13px; padding:0; margin:0; border:0; min-width:0; }
.member-management-view .member-invite-help,.member-management-view .member-invite-panel label > span { font-size:12px; }
.member-warning { margin:0; padding:12px; border-radius:10px; background:#fff4e7; color:#875028; font-size:13px; line-height:1.6; }
.member-dialog-backdrop { position:fixed; inset:0; z-index:1500; display:grid; place-items:center; padding:16px; background:rgb(20 30 30 / 32%); backdrop-filter:blur(5px); }
.member-access-dialog { width:min(580px,100%); max-height:calc(100dvh - 32px); overflow:auto; border:1px solid var(--line); border-radius:20px; background:var(--paper,#fffdf7); color:var(--ink); box-shadow:0 25px 70px #17293640; }
.member-access-dialog > header { display:flex; align-items:center; justify-content:space-between; padding:18px 22px; border-bottom:1px solid var(--line); }
.member-access-dialog h3 { margin:0; font-size:20px; }
.member-access-dialog > header button { background:transparent; border:0; padding:6px; cursor:pointer; }
.member-access-dialog form { display:flex; flex-direction:column; gap:16px; padding:20px 22px; }
.member-dialog-person { display:flex; flex-direction:column; gap:4px; overflow-wrap:anywhere; }
.member-dialog-person span { color:var(--muted); font-size:13px; }
.member-access-dialog fieldset { border:0; margin:0; padding:0; display:flex; flex-direction:column; gap:8px; min-width:0; }
.member-access-dialog legend { font-size:13px; margin-bottom:10px; }
.member-role-option { display:flex; align-items:flex-start; gap:10px; padding:10px 12px; border:1px solid var(--line); border-radius:10px; cursor:pointer; }
.member-role-option input { width:17px; height:17px; flex-shrink:0; accent-color:var(--orange); margin-top:2px; }
.member-role-option span { display:flex; flex-direction:column; gap:4px; }
.member-role-option strong { font-size:13px; }
.member-role-option small { font-size:12px; color:var(--muted); line-height:1.45; }
.member-change-summary { display:flex; flex-direction:column; gap:6px; padding:12px; border-radius:10px; background:#eeeae2; font-size:13px; line-height:1.5; }
.member-access-dialog footer { display:flex; justify-content:flex-end; gap:10px; }
.member-danger-button { border:1px solid #a23f37; border-radius:10px; background:#a23f37; color:#fff; font:inherit; padding:10px 14px; cursor:pointer; }
.member-access-dialog button:disabled { opacity:.5; cursor:not-allowed; }
.member-access-dialog .member-invite-help { font-size:12px; }
@media (max-width:540px) { .member-access-heading { align-items:flex-start; } .member-access-heading > span { max-width:65%; line-height:1.5; } .member-access-dialog form { padding:16px; } .member-list article { gap:8px; padding:12px; } }
.member-delete-confirmation { display:flex; flex-direction:column; gap:8px; font-size:13px; }
.member-delete-confirmation input { padding:10px 12px; border:1px solid var(--line); border-radius:8px; font:inherit; background:white; }
.member-status-deleting { color:#9a6a13; }
.member-status-deleted { color:var(--muted); }
.member-delete-dialog .member-warning { color:#923f31; background:#fff0e9; }
/* Shared Uncle Pop surfaces. Anatomy follows LEXO's Mineral Atelier shell;
   the brand palette and every business component remain Uncle Pop's. */
:root {
  --up-radius-shell: 24px;
  --up-radius-panel: 20px;
  --up-radius-control: 11px;
  --up-radius-cell: 7px;
  --up-surface: #fffdf9;
  --up-surface-soft: #f6f3ec;
  --up-edge: rgb(73 66 51 / 14%);
  --up-edge-light: rgb(255 255 255 / 82%);
  --up-glass: linear-gradient(135deg, rgb(255 255 255 / 80%), rgb(248 242 231 / 66%));
  --up-shadow-panel: inset 0 1px 0 rgb(255 255 255 / 94%), 0 14px 36px rgb(34 43 49 / 6%), 0 2px 6px rgb(34 43 49 / 3%);
  --up-shadow-shell: inset 0 1px 0 rgb(255 255 255 / 95%), 0 18px 46px rgb(34 43 49 / 10%);
  --up-shadow-overlay: inset 0 1px 0 rgb(255 255 255 / 95%), 0 26px 74px rgb(23 41 54 / 19%);
  --up-font: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', sans-serif;
  --up-shell-gap: 14px;
}
:root body { font-family: var(--up-font); background: linear-gradient(130deg,#f3f0e7,#eeeae1); }
:root .app-shell { grid-template-columns: 216px minmax(0,1fr); gap: var(--up-shell-gap); padding: var(--up-shell-gap); }
:root .app-shell > .sidebar {
  top: var(--up-shell-gap); height: calc(100dvh - 2 * var(--up-shell-gap)); padding: 18px 12px 14px;
  border: 1px solid var(--up-edge-light); border-radius: var(--up-radius-shell);
  color: var(--navy); background: var(--up-glass); box-shadow: var(--up-shadow-shell);
  backdrop-filter: blur(28px) saturate(125%); -webkit-backdrop-filter: blur(28px) saturate(125%);
}
:root .sidebar .brand { padding: 3px 5px 18px; border-color: var(--up-edge); gap: 8px; }
:root .sidebar .brand strong { color: var(--navy); font: 700 16px var(--up-font); letter-spacing: -.025em; }
:root .sidebar .brand span { color: var(--muted); }
:root .sidebar .brand > img { filter: none; width: 46px; }
:root .sidebar .nav-item { min-height: 42px; color: #59636a; border: 1px solid transparent; border-radius: 12px; }
:root .sidebar .nav-item > span:first-child { color: #68737b; }
:root .sidebar .nav-item:hover { color: var(--navy); background: rgb(255 255 255 / 75%); border-color: var(--up-edge); }
:root .sidebar .nav-active { color: var(--orange); border-color: rgb(187 90 33 / 18%); background: linear-gradient(110deg,#fcebdc,rgb(255 255 255 / 80%)); box-shadow: inset 0 1px 0 #fff, 0 4px 12px rgb(187 90 33 / 7%); }
:root .sidebar .nav-active > span:first-child { color: var(--orange); transform: none; }
:root .sidebar .nav-item::before { background: var(--orange); height: 22px; }
:root .sidebar .nav-item small { color: var(--muted); }
:root .sidebar .nav-item b { color: var(--orange); background: var(--orange-soft); border-color: var(--up-edge); }
:root .sidebar :is(.nav-separator,.sidebar-bottom,.brand) { border-color: var(--up-edge); }
:root .sidebar .nav-separator { background: var(--up-edge); }
:root .sidebar :is(.nav-section,.sidebar-bottom p,.system-status small,.account-session-copy span) { color: var(--muted); }
:root .sidebar :is(.account-session,.account-login) { color: var(--navy); background: rgb(255 255 255 / 55%); border-color: var(--up-edge); border-radius: 12px; }
:root .sidebar .account-session button { color: var(--muted); }
:root .sidebar .account-session button:hover { color: var(--orange); background: var(--orange-soft); }
:root .sidebar .guide-launch { color: #88531c; border-color: rgb(172 124 46 / 22%); background: var(--gold-soft); border-radius: 11px; }
:root .app-main > .app-header {
  top: var(--up-shell-gap); min-height: 64px; padding: 10px 16px; gap: 16px;
  grid-template-columns: minmax(125px,.45fr) minmax(210px,1fr) minmax(250px,1fr);
  border: 1px solid var(--up-edge-light); border-radius: 20px; background: var(--up-glass);
  box-shadow: var(--up-shadow-shell); backdrop-filter: blur(28px) saturate(125%); -webkit-backdrop-filter: blur(28px) saturate(125%);
}
:root .app-header .page-title h1 { font: 650 21px var(--up-font); letter-spacing: -.03em; }
:root .app-header .search-box { border-radius: 12px; background: rgb(255 255 255 / 64%); border-color: var(--up-edge); box-shadow: inset 0 1px 0 #fff; }
:root .app-header .header-project-switch .app-select-trigger { border: 1px solid var(--up-edge); border-radius: 9px; padding: 3px 8px; background: rgb(255 255 255 / 60%); }
:root .app-main .view-container { width: 100%; padding: 16px 0 24px; }
:root .app-main .view-negotiation { padding: 10px 0 0; }
:root body :is(h1,h2,h3) { font-family: var(--up-font); letter-spacing: -.025em; }
/* Opaque work surfaces keep small operational text crisp. */
:root :is(.project-workspace,.counterparty-workspace,.panel,.data-panel,.member-panel,.section-panel,.catalog-table,.formal-catalog-table,.journey-overview,.channel-terms-panel,.channel-pricing-panel,.negotiation-navigator,.decision-rail,.negotiation-start,.cq-board,.cn-workbench,.login-card) {
  border-color: var(--up-edge); border-radius: var(--up-radius-panel); background: var(--up-surface); box-shadow: var(--up-shadow-panel);
}
:root :is(.project-workspace,.counterparty-workspace,.catalog-table,.member-panel,.journey-overview) { overflow: hidden; }
:root :is(.ledger-panel,.overview-panel,.step-panel,.project-command-bar,.project-drawer,.counterparty-drawer) { border: 1px solid var(--up-edge); border-radius: var(--up-radius-panel); background: var(--up-surface); box-shadow: var(--up-shadow-panel); overflow: hidden; }
:root :is(.counterparty-layout,.counterparty-section,.metric-ledger,.member-invite-panel,.match-panel,.approval-detail,.route-flow,.compliance-panel) { border: 1px solid var(--up-edge); border-radius: var(--up-radius-panel); background: var(--up-surface); box-shadow: var(--up-shadow-panel); overflow: hidden; }
:root .counterparty-command-bar { min-height: 86px; padding: 14px 20px; border: 1px solid var(--up-edge); border-radius: var(--up-radius-panel); background: var(--up-surface); color: var(--navy); box-shadow: var(--up-shadow-panel); }
:root .counterparty-command-bar .project-kicker { color: var(--orange); }
:root .counterparty-command-bar p { color: var(--muted); }
:root :is(.counterparty-rail-header > div > span,.project-list-title,.project-floor-input input) { font-family: var(--up-font); }
:root :is(.project-sku-cartons-input,.project-select-add-button,.project-sku-picker-toolbar button,.project-sku-picker-mode,.project-sku-fix-button,.catalog-row-visual > img) { border-radius: 8px; }
:root .catalog-table { border-radius: 0; box-shadow: none; }
:root :is(.project-rail,.counterparty-rail,.project-results-rail,.cn-results) { background: var(--up-surface-soft); border-color: var(--up-edge); }
:root :is(.project-detail,.counterparty-detail) { background: var(--up-surface); }
:root :is(.project-hero,.project-participants,.project-terms-card,.project-sku-section,.counterparty-section,.counterparty-facts) { border-color: var(--up-edge); }
:root :is(.project-list-item,.counterparty-list-item) { border-color: var(--up-edge); }
:root :is(.project-list-item-active,.counterparty-list-item-active) { background: var(--orange-soft); }
:root :is(.command-hero,.member-command-bar) { color: var(--navy); border: 1px solid var(--up-edge); border-radius: var(--up-radius-panel); background: var(--up-surface); box-shadow: var(--up-shadow-panel); }
:root :is(.command-hero,.member-command-bar) p { color: var(--muted); }
:root :is(.command-hero .eyebrow,.member-command-bar .section-kicker) { color: var(--orange); }
:root .member-count-chip { color: var(--orange); background: var(--orange-soft); border-color: rgb(187 90 33 / 18%); }
:root :is(.metric-card,.route-card,.network-node,.compliance-readiness > div,.compliance-readiness > span,.service-network article,.customer-network > button) { border-radius: 14px; }
:root :is(.project-heading h2,.project-rail-header h2,.counterparty-hero h2,.panel h2,.panel h3,.member-panel h3,.command-hero h2,.member-command-bar h2,.login-card h1,.login-brand-lockup strong,.cn-identity h2,.cn-main > h2,.cn-results h3) { font-family: var(--up-font); font-weight: 650; letter-spacing: -.025em; }
/* One control family, retaining compact spreadsheet editors. */
:root :is(.primary-button,.secondary-button,.outline-button,.header-create-project,.project-primary-button,.project-secondary-button,.project-outline-button,.project-icon-button,.project-modal-close,.app-select-trigger:not(.up-select-trigger),.searchable-entity-trigger,.version-save-button,.final-save-button,.shipment-icon-button) { border-radius: var(--up-radius-control); }
:root :is(.primary-button,.project-primary-button,.header-create-project) { box-shadow: inset 0 1px 0 rgb(255 255 255 / 20%), 0 5px 14px rgb(187 90 33 / 15%); }
:root :is(.secondary-button,.project-secondary-button,.project-outline-button,.outline-button) { border-color: var(--up-edge); background: rgb(255 255 255 / 74%); box-shadow: inset 0 1px 0 #fff,0 1px 3px rgb(23 41 54 / 4%); }
:root :is(.project-form-field,.compact-field,.member-invite-panel,.shipment-workspace,.channel-terms-fields) :is(input:not([type=checkbox]),textarea,select),
:root :is(.app-select-trigger:not(.up-select-trigger),.searchable-entity-picker-trigger,.auth-input,.project-search,.counterparty-search) { border-radius: var(--up-radius-control); border-color: var(--up-edge); background-color: var(--up-surface); }



:root .cq-board :is(.cq-help,.cq-row-issue) { border-radius: 7px; }
:root .cq-board .cq-help, :root .cn-workbench .cn-help { border-radius: 50%; }

:root .cn-workbench { --cn-accent: var(--orange); --cn-ink: var(--navy); --cn-line: var(--up-edge); }
:root :is(.cq-totals,.cq-board thead th,.cn-table-head) { background: var(--up-surface-soft); }
:root .cq-board thead .cq-editable { background: var(--orange-soft); }
:root .cq-board :is(.cq-header,.cq-footer) { background: var(--up-surface); }
:root .cn-steps { display: flex; gap: 4px; padding: 5px 8px; background: var(--up-surface-soft); }
:root .cn-steps button { flex: 1; min-height: 40px; border: 1px solid transparent; border-radius: 10px; background: transparent; }
:root .cn-steps button[aria-current=step] { border-color: rgb(187 90 33 / 18%); background: var(--up-surface); box-shadow: 0 2px 6px rgb(23 41 54 / 5%); }
:root .cn-results :is(.cn-hero,div > strong) { font-family: var(--up-font); font-weight: 680; font-variant-numeric: tabular-nums; letter-spacing: -.035em; }
/* Shared overlay materials. Existing portal, focus, scroll locks and layer order remain authoritative. */
:root :is(.project-modal-backdrop,.shipment-workspace-backdrop,.auth-backdrop,.supplier-confirmation-backdrop,.negotiation-picker-backdrop,.negotiation-drawer-backdrop) { background: rgb(23 41 54 / 24%); backdrop-filter: blur(12px) saturate(112%); -webkit-backdrop-filter: blur(12px) saturate(112%); }
:root :is(.project-modal,.shipment-workspace,.auth-dialog,.negotiation-category-picker,.negotiation-category-compare,.tour-card) { border: 1px solid var(--up-edge-light); border-radius: 24px; background: var(--up-surface); box-shadow: var(--up-shadow-overlay); }
:root :is(.project-modal-header,.shipment-workspace-header,.auth-dialog > header) { color: var(--navy); background: var(--up-glass); border-bottom: 1px solid var(--up-edge); }
:root :is(.project-modal-header,.auth-dialog > header) :is(h2,.project-modal-close,.auth-close) { color: var(--navy); font-family: var(--up-font); }
:root :is(.project-modal-header,.auth-dialog > header) p { color: var(--muted); }
:root :is(.project-modal-header .project-kicker,.auth-dialog .section-kicker) { color: var(--orange); }
:root :is(.project-modal-header .project-modal-close,.auth-close) { border-radius: 11px; border-color: var(--up-edge); background: rgb(255 255 255 / 65%); }
:root :is(.project-modal-actions,.shipment-workspace-footer,.drawer-actions) { background: var(--up-surface-soft); border-color: var(--up-edge); }
:root :is(.app-select-content,.searchable-entity-popover,.searchable-entity-dialog,.cn-help-bubble,.help-panel.help-panel-portal,.app-notice) { border-radius: 14px; box-shadow: var(--up-shadow-overlay); }
:root .app-select-content { background: var(--up-surface); border-color: var(--up-edge); }
:root .app-select-item { border-radius: 7px; }

/* Board stays dense: changing the material does not add a hero or enlarge rows. */
:root .app-shell:has(.cq-board) { height: 100dvh; min-height: 550px; }
:root .app-main:has(.cq-board) { height: 100%; min-height: 0; }
:root .app-main .view-negotiation:has(.cq-board) { padding: 10px 0 0; }
:root .negotiation-workbench:has(>.negotiation-workbench-body>.cq-board),
:root .negotiation-workbench:has(>.negotiation-workbench-body>.cq-detail) { grid-template-rows: minmax(0,1fr); }
:root .negotiation-workbench:not(:has(.cq-board)) { height: calc(100dvh - 114px); }
@media(max-width:1180px) {
  :root .app-main > .app-header { grid-template-columns: minmax(115px,.5fr) minmax(190px,1fr); }
  :root .app-header .header-context { display: none; }
}
@media(max-width:1000px) {
  :root { --up-shell-gap: 8px; }
  :root .app-shell { display: flex; flex-direction: column; gap: 8px; }
  :root .app-shell > .sidebar { top: 8px; height: 54px; flex: 0 0 54px; flex-direction: row; align-items: center; padding: 5px 8px; border-radius: 16px; }
  :root .sidebar .brand { padding: 0 8px 0 0; border-bottom: 0; min-width: 145px; flex-basis: 145px; }
  :root .sidebar .brand > img { width: 40px; height: 30px; }
  :root .sidebar .brand strong { font-size: 14px; }
  :root .sidebar .nav-item { min-height: 40px; }
  :root .sidebar .nav-item::before { height: 2px; }
  :root .sidebar nav { scroll-snap-type: none; }
  :root .sidebar .sidebar-bottom { margin: 0; padding: 0; }
  :root .sidebar .account-session { margin: 0; min-height: 40px; }
  :root .app-main > .app-header { top: 70px; min-height: 58px; padding: 8px 12px; border-radius: 16px; }
  :root .app-main:has(.cq-board) { flex: 1; height: auto; min-height: 0; }
  :root .app-main .view-container { padding: 12px 0 20px; }
  :root .app-main .view-negotiation:has(.cq-board) { padding: 8px 0 0; }
  :root .negotiation-workbench:not(:has(.cq-board)) { height: auto; }
}
@media(max-width:600px) {
  :root .app-main > .app-header { grid-template-columns: minmax(0,1fr); gap: 7px; }
  :root .app-header .page-title h1 { font-size: 18px; }
  :root .app-header .search-box { min-height: 32px; }
  :root .sidebar .brand { min-width: 128px; flex-basis: 128px; }
  :root :is(.project-workspace,.counterparty-workspace,.member-panel,.cq-board,.cn-workbench) { border-radius: 16px; }
  :root .app-main .view-container { padding-top: 10px; }
}
@media(prefers-reduced-transparency:reduce) {
  :root .app-shell > .sidebar, :root .app-main > .app-header { background: var(--up-surface-soft); backdrop-filter: none; -webkit-backdrop-filter: none; }
  :root :is(.project-modal-backdrop,.shipment-workspace-backdrop,.auth-backdrop) { backdrop-filter: none; -webkit-backdrop-filter: none; background: rgb(23 41 54 / 35%); }
}
@media(prefers-reduced-motion:reduce) { :root .app-shell * { scroll-behavior: auto; } }
:root {
  color: #22251f;
  background: #f1efe6;
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  --ink: #20251f;
  --muted: #6e7169;
  --faint: #6e7169;
  --paper: #fffdf7;
  --canvas: #f2f0e7;
  --line: #dedbcf;
  --line-strong: #cbc7b8;
  --navy: #172936;
  --navy-2: #213c4d;
  --orange: #bb5a21;
  --orange-soft: #fff0e4;
  --green: #286454;
  --green-soft: #e5f1eb;
  --gold: #efbd43;
  --gold-soft: #fff7d9;
  --red: #a23f37;
  --red-soft: #fae8e5;
  --shadow: 0 18px 50px rgb(29 35 29 / 7%);
  --motion-fast: 130ms;
  --motion-base: 190ms;
  --motion-slow: 240ms;
  --ease-enter: cubic-bezier(.16, 1, .3, 1);
  --ease-standard: cubic-bezier(.2, .75, .25, 1);
  --ease-exit: cubic-bezier(.4, 0, 1, 1);
}

* { box-sizing: border-box; }
html { background: var(--canvas); }
body { margin: 0; min-width: 0; min-height: 100vh; overflow-x: hidden; background: var(--canvas); }
button, input, select, textarea { color: inherit; font: inherit; }
button, select, input[type="checkbox"] { cursor: pointer; }
button { transition: color var(--motion-fast) ease, background-color var(--motion-fast) ease, border-color var(--motion-fast) ease, box-shadow var(--motion-fast) ease, transform var(--motion-fast) var(--ease-standard); }
input, select, textarea { transition: border-color var(--motion-fast) ease, box-shadow var(--motion-fast) ease, background-color var(--motion-fast) ease; }
button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid rgb(187 90 33 / 22%); outline-offset: 2px; }
button:disabled { cursor: not-allowed; opacity: .5; }
button:not(:disabled):active { transform: translateY(1px) scale(.985); }
h1, h2, h3, p { margin-top: 0; }
.skip-link { position: fixed; top: 10px; left: 10px; z-index: 2000; padding: 10px 13px; color: white; background: var(--orange); border-radius: 5px; font-size: 13px; font-weight: 750; transform: translateY(-160%); transition: transform .16s ease; }
.skip-link:focus { transform: translateY(0); }

.app-shell { display: grid; grid-template-columns: 218px minmax(0, 1fr); min-height: 100vh; }
.sidebar { position: sticky; top: 0; z-index: 20; display: flex; height: 100vh; flex-direction: column; padding: 24px 14px 18px; color: #f7f4e8; background: radial-gradient(circle at 30% 8%, rgb(255 255 255 / 8%), transparent 24%), linear-gradient(165deg, var(--navy-2), var(--navy) 55%); border-right: 1px solid rgb(0 0 0 / 15%); }
.brand { display: flex; align-items: center; gap: 12px; padding: 0 7px 24px; border-bottom: 1px solid rgb(255 255 255 / 9%); }
.brand > img { width: 54px; height: 37px; object-fit: contain; filter: drop-shadow(0 5px 10px rgb(0 0 0 / 30%)); }
.brand > div { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.brand strong { color: white; font-family: Georgia, "Songti SC", serif; font-size: 16px; letter-spacing: -.02em; }
.brand span { color: rgb(255 255 255 / 48%); font-size: 12px; }
.sidebar nav { display: flex; min-height: 0; overflow-y: auto; flex-direction: column; gap: 4px; padding-top: 15px; scrollbar-width: thin; }
.nav-separator { height: 1px; margin: 10px 9px 8px; background: rgb(255 255 255 / 9%); }
.nav-section { padding: 0 10px 7px; color: rgb(255 255 255 / 28%); font-size: 12px; font-weight: 800; letter-spacing: .16em; }
.nav-item { position: relative; display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 9px; align-items: center; min-height: 48px; padding: 8px 10px; color: rgb(255 255 255 / 59%); text-align: left; border: 0; border-radius: 7px; background: transparent; transition: background-color var(--motion-base) ease, color var(--motion-base) ease, transform var(--motion-fast) var(--ease-standard); }
.nav-item::before { position: absolute; top: 50%; left: 0; width: 3px; height: 26px; border-radius: 99px; background: var(--gold); content: ""; opacity: 0; transform: translateY(-50%) scaleY(.35); transition: opacity var(--motion-base) ease, transform var(--motion-base) var(--ease-enter); }
.nav-item:hover { color: white; background: rgb(255 255 255 / 6%); }
.nav-item > span:first-child { display: grid; color: rgb(255 255 255 / 42%); place-items: center; transition: color var(--motion-base) ease, transform var(--motion-base) var(--ease-enter); }
.nav-item > span:nth-child(2) { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.nav-item strong { overflow: hidden; font-size: 12px; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
.nav-item small { min-height: 11px; overflow: hidden; color: rgb(255 255 255 / 32%); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.nav-item b { min-width: 21px; padding: 3px 5px; color: rgb(255 255 255 / 48%); text-align: center; border: 1px solid rgb(255 255 255 / 8%); border-radius: 999px; background: rgb(255 255 255 / 5%); font-size: 12px; }
.nav-active { color: white; background: rgb(255 255 255 / 9%); }
.nav-active::before { opacity: 1; transform: translateY(-50%) scaleY(1); }
.nav-active > span:first-child { color: var(--gold); transform: scale(1.08); }
.nav-active b { color: var(--navy); background: var(--gold); border-color: var(--gold); }
.sidebar-bottom { margin-top: auto; padding: 13px 11px 4px; border-top: 1px solid rgb(255 255 255 / 9%); }
.sidebar-bottom p { margin: 11px 0 0; color: rgb(255 255 255 / 32%); font-size: 12px; line-height: 1.55; }
.system-status { display: flex; align-items: center; gap: 9px; }
.system-status > div { display: flex; flex-direction: column; gap: 2px; }
.system-status strong { font-size: 12px; }
.system-status small { color: rgb(255 255 255 / 38%); font-size: 12px; }
.account-login, .account-session { display: flex; width: 100%; min-height: 42px; align-items: center; gap: 9px; margin-top: 12px; padding: 0 10px; color: rgb(255 255 255 / 78%); border: 1px solid rgb(255 255 255 / 12%); border-radius: 7px; background: rgb(255 255 255 / 6%); }
.account-login { justify-content: center; font-size: 13px; font-weight: 700; }
.account-login:hover { color: white; border-color: rgb(255 255 255 / 24%); background: rgb(255 255 255 / 10%); }
.account-session-copy { display: flex; min-width: 0; flex: 1; flex-direction: column; gap: 2px; }
.account-session-copy strong, .account-session-copy span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account-session-copy strong { font-size: 13px; }
.account-session-copy span { color: rgb(255 255 255 / 45%); font-size: 11px; }
.account-session button { display: grid; width: 30px; height: 30px; color: rgb(255 255 255 / 65%); border: 0; border-radius: 50%; background: transparent; place-items: center; }
.account-session button:hover { color: white; background: rgb(255 255 255 / 10%); }
.status-dot { width: 7px; height: 7px; flex: 0 0 auto; border-radius: 50%; background: #68bea2; box-shadow: 0 0 0 4px rgb(104 190 162 / 12%); }
.system-status[data-state="checking"] .status-dot { background: #e8b86a; box-shadow: 0 0 0 4px rgb(232 184 106 / 14%); }
.system-status[data-state="unconfigured"] .status-dot,
.system-status[data-state="wrong-project"] .status-dot,
.system-status[data-state="invalid"] .status-dot,
.system-status[data-state="unreachable"] .status-dot,
.system-status[data-state="permission-denied"] .status-dot { background: #e98670; box-shadow: 0 0 0 4px rgb(233 134 112 / 14%); }

.app-main { min-width: 0; }
.app-header { position: sticky; top: 0; z-index: 15; display: grid; grid-template-columns: minmax(160px, .45fr) minmax(260px, 1fr) minmax(420px, 1.25fr); gap: 22px; align-items: center; min-height: 78px; padding: 14px 30px; background: rgb(255 253 247 / 94%); border-bottom: 1px solid var(--line); backdrop-filter: blur(18px); }
.page-title span, .eyebrow, .section-kicker { color: var(--orange); font-size: 12px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.page-title h1 { margin: 0; font-family: Georgia, "Songti SC", serif; font-size: 23px; letter-spacing: -.03em; }
.page-title-motion[data-motion-direction="forward"] { animation: title-enter-forward var(--motion-base) var(--ease-enter); }
.page-title-motion[data-motion-direction="backward"] { animation: title-enter-backward var(--motion-base) var(--ease-enter); }
.search-box { display: flex; align-items: center; gap: 8px; min-height: 37px; padding: 0 10px; color: var(--faint); border: 1px solid var(--line); border-radius: 6px; background: #faf9f3; }
.search-box input { width: 100%; min-width: 0; color: var(--ink); border: 0; outline: 0; background: transparent; font-size: 12px; }
.search-box button { display: grid; padding: 4px; color: var(--muted); border: 0; background: transparent; place-items: center; }
.header-context { display: flex; align-items: center; justify-content: flex-end; gap: 14px; min-width: 0; }
.header-context > div { display: flex; min-width: 0; flex-direction: column; gap: 2px; text-align: right; }
.header-context small { color: var(--faint); font-size: 12px; }
.header-context strong { overflow: hidden; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.header-project, .header-sku { display: flex; min-width: 0; flex-direction: column; gap: 2px; text-align: right; }
.header-project > span, .header-sku > span { color: var(--faint); font-size: 12px; }
.header-project-switch { width: min(260px, 100%); max-width: 260px; align-items: flex-end; }
.header-project-switch .app-select { min-width: 112px; }
.header-project-switch .app-select-trigger { min-height: 28px; padding: 2px 3px 3px; color: var(--ink); border: 0; border-bottom: 1px solid var(--line-strong); border-radius: 0; background: transparent; font-size: 12px; font-weight: 750; text-align: right; }
.header-project-switch .app-select-trigger > span:first-child { text-align: right; }
.header-project-switch .app-select-trigger:hover { border-bottom-color: var(--orange); background: transparent; }
.header-context > span { padding: 4px 7px; color: var(--orange); border: 1px solid #ecc7af; border-radius: 4px; background: var(--orange-soft); font-size: 12px; font-weight: 700; }
.header-create-project { display: inline-flex; min-height: 42px; align-items: center; justify-content: center; gap: 7px; padding: 0 16px; color: white; border: 1px solid var(--orange); border-radius: 5px; background: var(--orange); box-shadow: 0 8px 20px rgb(187 90 33 / 18%); font-size: 12px; font-weight: 800; white-space: nowrap; }
.header-create-project:hover { border-color: #a74d1b; background: #a74d1b; }
.header-create-project:focus-visible { outline: 3px solid rgb(187 90 33 / 24%); outline-offset: 2px; }
.save-state { display: flex; align-items: center; gap: 9px; padding-left: 15px; border-left: 1px solid var(--line); }
.save-state > div { display: flex; flex-direction: column; gap: 2px; }
.save-state strong { font-size: 12px; }
.save-state small { color: var(--faint); font-size: 12px; }
.save-state > svg { color: var(--green); }
.save-state-dirty > svg, .save-state-dirty strong { color: var(--orange); }
.header-master-context { display: flex; min-width: 150px; flex-direction: column; gap: 2px; text-align: right; }
.header-master-context strong { color: var(--navy); font-size: 12px; }
.header-master-context span { color: var(--faint); font-size: 12px; }
.auth-backdrop { position: fixed; z-index: 80; display: grid; inset: 0; overflow-y: auto; padding: 24px; background: rgb(12 22 28 / 62%); backdrop-filter: blur(8px); place-items: center; }
.auth-dialog { width: min(440px, 100%); max-height: calc(100dvh - 48px); overflow-y: auto; background: var(--paper); border: 1px solid rgb(255 255 255 / 28%); box-shadow: 0 28px 90px rgb(6 14 18 / 36%); }
.auth-dialog > header { display: grid; grid-template-columns: 48px minmax(0, 1fr) 36px; gap: 14px; align-items: center; padding: 22px 24px; color: white; background: linear-gradient(125deg, var(--navy-2), var(--navy)); }
.auth-dialog h2 { margin: 4px 0 0; font-family: Georgia, "Songti SC", serif; font-size: 22px; font-weight: 600; }
.auth-dialog .section-kicker { color: #f2c761; }
.auth-mark { display: grid; width: 48px; height: 48px; color: var(--gold); border: 1px solid rgb(255 255 255 / 12%); border-radius: 50%; background: rgb(255 255 255 / 7%); place-items: center; }
.auth-close { display: grid; width: 36px; height: 36px; color: rgb(255 255 255 / 68%); border: 0; border-radius: 50%; background: transparent; place-items: center; }
.auth-close:hover { color: white; background: rgb(255 255 255 / 9%); }
.auth-dialog form { display: flex; flex-direction: column; gap: 18px; padding: 26px 24px 24px; }
.auth-dialog-help { margin: -6px 0 0; color: var(--muted); font-size: 12px; line-height: 1.55; }
.auth-field { display: flex; flex-direction: column; gap: 9px; font-size: 13px; font-weight: 700; }
.auth-input { display: flex; min-height: 48px; align-items: center; gap: 10px; padding: 0 13px; color: var(--muted); border: 1px solid var(--line-strong); border-radius: 6px; background: white; }
.auth-input:focus-within { border-color: var(--orange); box-shadow: 0 0 0 3px rgb(187 90 33 / 12%); }
.auth-input input { width: 100%; min-width: 0; border: 0; outline: 0; background: transparent; font-size: 15px; }
.auth-notice { padding: 12px 13px; border: 1px solid; border-radius: 6px; font-size: 13px; font-weight: 650; line-height: 1.45; }
.auth-notice-good { color: var(--green); border-color: #bcd8cc; background: var(--green-soft); }
.auth-notice-error { color: var(--red); border-color: #e7bcb6; background: var(--red-soft); }
.auth-submit { width: 100%; min-height: 46px; font-size: 14px; }
.auth-backdrop[data-motion-state="enter"] { animation: overlay-enter var(--motion-base) ease-out both; }
.auth-backdrop[data-motion-state="exit"] { animation: overlay-exit var(--motion-base) var(--ease-exit) both; }
.auth-backdrop[data-motion-state="enter"] .auth-dialog { animation: dialog-enter var(--motion-slow) var(--ease-enter) both; }
.auth-backdrop[data-motion-state="exit"] .auth-dialog { animation: dialog-exit var(--motion-base) var(--ease-exit) both; }

.login-shell { display: grid; min-height: 100dvh; padding: clamp(20px, 5vw, 56px); background: radial-gradient(circle at 50% 0, rgb(255 255 255 / 78%), transparent 34%), var(--canvas); place-items: center; }
.login-brand-panel { display: flex; min-width: 0; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 26px; padding-bottom: 20px; border-bottom: 1px solid var(--line); }
.login-brand-lockup { display: flex; min-width: 0; align-items: center; gap: 13px; }
.login-brand-lockup img { width: 104px; height: 58px; flex: 0 0 auto; object-fit: contain; }
.login-brand-lockup strong { color: var(--navy); font-family: Georgia, "Songti SC", serif; font-size: 16px; font-weight: 650; letter-spacing: -.025em; white-space: nowrap; }
.login-connection { display: flex; min-width: 0; align-items: center; gap: 8px; color: var(--muted); }
.login-connection strong { overflow: hidden; font-size: 11px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.login-connection[data-state="checking"] .status-dot { background: #e8b86a; box-shadow: 0 0 0 4px rgb(232 184 106 / 14%); }
.login-connection[data-state="unconfigured"] .status-dot,
.login-connection[data-state="wrong-project"] .status-dot,
.login-connection[data-state="invalid"] .status-dot,
.login-connection[data-state="unreachable"] .status-dot,
.login-connection[data-state="permission-denied"] .status-dot { background: #e98670; box-shadow: 0 0 0 4px rgb(233 134 112 / 14%); }
.login-form-panel { display: grid; width: 100%; min-width: 0; place-items: center; }
.login-card { width: min(430px, 100%); padding: clamp(24px, 4vw, 36px); border: 1px solid var(--line); border-radius: 12px; background: rgb(255 253 247 / 96%); box-shadow: 0 24px 70px rgb(25 34 28 / 9%); }
.login-card > header { padding: 0; }
.login-card > header h1, .login-state-card h1 { margin: 0; font-family: Georgia, "Songti SC", serif; font-size: 28px; font-weight: 590; letter-spacing: -.04em; }
.login-card > header p, .login-state-card p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.65; }
.login-card > header p { margin-top: 9px; }
.login-card form { display: flex; flex-direction: column; gap: 18px; padding-top: 23px; }
.login-card .auth-field > span:first-child { font-size: 12px; font-weight: 750; }
.login-card .auth-input { min-height: 52px; }
.password-visibility { display: grid; width: 34px; height: 34px; flex: 0 0 auto; color: var(--muted); border: 0; border-radius: 50%; background: transparent; place-items: center; }
.password-visibility:hover { color: var(--ink); background: var(--canvas); }
.login-form-options { display: flex; justify-content: flex-end; margin-top: -6px; }
.login-form-options button, .login-cancel { padding: 4px 0; color: var(--orange); border: 0; background: transparent; font-size: 12px; font-weight: 750; }
.login-form-options button:hover, .login-cancel:hover { color: #934314; text-decoration: underline; text-underline-offset: 3px; }
.login-card .auth-submit { min-height: 50px; margin-top: 2px; }
.login-state-content { display: flex; min-height: 240px; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.login-state-content .secondary-button { margin-top: 24px; }
.login-state-icon { display: grid; width: 60px; height: 60px; margin-bottom: 14px; color: var(--green); border: 1px solid #c7ddd3; border-radius: 50%; background: var(--green-soft); place-items: center; }
.login-state-icon.is-loading svg { animation: login-pulse 1.4s ease-in-out infinite; }

@keyframes login-pulse {
  0%, 100% { opacity: .45; transform: scale(.88); }
  50% { opacity: 1; transform: scale(1); }
}
.review-banner { display: flex; align-items: center; gap: 8px; min-height: 34px; padding: 7px 30px; color: #69521f; background: #fff8d8; border-bottom: 1px solid #eadb9d; font-size: 12px; }
.review-banner svg { color: #a87818; }
.view-container { width: min(1600px, 100%); overflow-x: clip; padding: 22px 30px 54px; }
.view-container:focus { outline: 0; }
.view-motion-layer { min-height: calc(100vh - 154px); transform-origin: 50% 18%; will-change: opacity, transform; }
.view-motion-layer[data-motion-state="exit"] { pointer-events: none; }
.view-motion-layer[data-motion-state="exit"][data-motion-direction="forward"] { animation: view-exit-forward 90ms var(--ease-exit) both; }
.view-motion-layer[data-motion-state="exit"][data-motion-direction="backward"] { animation: view-exit-backward 90ms var(--ease-exit) both; }
.view-motion-layer[data-motion-state="enter"][data-motion-direction="forward"] { animation: view-enter-forward var(--motion-base) var(--ease-enter) both; }
.view-motion-layer[data-motion-state="enter"][data-motion-direction="backward"] { animation: view-enter-backward var(--motion-base) var(--ease-enter) both; }
.view-negotiation { padding: 18px 22px 44px; }
.view-stack { display: flex; flex-direction: column; gap: 16px; }

.primary-button, .secondary-button, .outline-button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 36px; padding: 0 13px; border-radius: 5px; font-size: 12px; font-weight: 700; white-space: nowrap; }
.primary-button { color: white; background: var(--orange); border: 1px solid var(--orange); box-shadow: 0 8px 20px rgb(187 90 33 / 18%); }
.primary-button:hover { background: #a94c18; }
.primary-button:active, .secondary-button:active, .outline-button:active, .section-action:active { transform: translateY(1px); }
.secondary-button { color: var(--ink); background: var(--paper); border: 1px solid var(--line-strong); }
.secondary-button:hover, .outline-button:hover { border-color: #aaa694; background: #f8f6ee; }
.outline-button { width: 100%; color: var(--navy); background: transparent; border: 1px solid #b8bcb7; }
.status-pill { display: inline-flex; width: fit-content; align-items: center; justify-content: center; padding: 4px 7px; color: #6b6c64; border: 1px solid var(--line); border-radius: 999px; background: #f7f5ed; font-size: 12px; font-weight: 750; line-height: 1; white-space: nowrap; }
.status-good { color: var(--green); border-color: #bcd8cc; background: var(--green-soft); }
.status-warning { color: #8a561b; border-color: #ead2a3; background: #fff4dc; }
.status-ink { color: white; border-color: var(--navy); background: var(--navy); }

.command-hero { display: flex; align-items: flex-end; justify-content: space-between; gap: 30px; padding: 26px 28px; color: white; background: linear-gradient(115deg, #1c3443, #152631 70%); border: 1px solid #10202a; box-shadow: var(--shadow); }
.command-hero h2 { max-width: 740px; margin: 0; font-family: Georgia, "Songti SC", serif; font-size: 27px; font-weight: 600; letter-spacing: -.035em; }
.command-hero p { max-width: 720px; margin: 0; color: rgb(255 255 255 / 56%); font-size: 12px; line-height: 1.6; }
.command-hero .eyebrow { color: #f2c761; }
.compact-hero { min-height: 116px; }
.compact-hero h2 { font-size: 24px; }
.compact-hero .secondary-button { color: white; border-color: rgb(255 255 255 / 25%); background: rgb(255 255 255 / 7%); }
.metric-ledger { display: grid; overflow: hidden; background: var(--paper); border: 1px solid var(--line); box-shadow: 0 10px 30px rgb(40 45 37 / 4%); }
.metric-ledger-four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.metric-ledger article { min-width: 0; padding: 15px 18px; border-right: 1px solid var(--line); }
.metric-ledger article:last-child { border-right: 0; }
.metric-ledger article > span, .decision-metric > span { display: block; color: var(--muted); font-size: 12px; }
.metric-ledger strong { display: block; margin: 7px 0 3px; font-family: Georgia, serif; font-size: 23px; letter-spacing: -.03em; }
.metric-ledger small { color: var(--faint); font-size: 12px; }
.ledger-panel { background: var(--paper); border: 1px solid var(--line); box-shadow: 0 12px 36px rgb(38 43 36 / 4%); }
.section-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; padding: 17px 19px 14px; border-bottom: 1px solid var(--line); }
.section-heading h2, .section-heading h3 { margin: 5px 0 0; font-family: Georgia, "Songti SC", serif; letter-spacing: -.025em; }
.section-heading h2 { font-size: 22px; }
.section-heading h3 { font-size: 17px; }
.section-heading p { margin: 7px 0 0; color: var(--muted); font-size: 12px; }
.dashboard-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.product-summary { display: grid; grid-template-columns: 134px 1fr; min-height: 178px; }
.product-packshot { display: grid; overflow: hidden; background: #f6ead8; border-right: 1px solid var(--line); place-items: center; }
.product-packshot img { width: 92px; height: 142px; object-fit: contain; filter: drop-shadow(0 12px 18px rgb(53 38 20 / 18%)); }
.product-packshot img.pack-art { width: 134px; height: 154px; transform: scale(1.25); }
.product-packshot img.brand-art { width: 104px; height: 70px; }
.fact-list { margin: 0; padding: 11px 18px; }
.fact-list > div, .rail-facts > div { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; padding: 9px 0; border-bottom: 1px solid #ece9df; }
.fact-list > div:last-child, .rail-facts > div:last-child { border-bottom: 0; }
.fact-list dt, .rail-facts dt { color: var(--muted); font-size: 12px; }
.fact-list dd, .rail-facts dd { margin: 0; max-width: 68%; text-align: right; font-size: 12px; font-weight: 650; }
.count-badge { display: grid; width: 24px; height: 24px; color: white; border-radius: 50%; background: var(--orange); font-size: 12px; font-weight: 700; place-items: center; }
.work-list { display: flex; flex-direction: column; padding: 6px 16px 10px; }
.work-list button { display: grid; grid-template-columns: 28px 1fr 16px; gap: 10px; align-items: center; min-height: 52px; padding: 7px 3px; text-align: left; border: 0; border-bottom: 1px solid #ece9df; background: transparent; }
.work-list button:last-child { border-bottom: 0; }
.work-list button > span:nth-child(2) { display: flex; flex-direction: column; gap: 3px; }
.work-list strong { font-size: 12px; }
.work-list small { color: var(--muted); font-size: 12px; }
.work-list button > svg { color: var(--faint); }
.work-index { display: grid; width: 24px; height: 24px; border-radius: 50%; font-size: 12px; font-weight: 700; place-items: center; }
.work-good { color: var(--green); background: var(--green-soft); }.work-warning { color: #995a15; background: #fff0d3; }.work-neutral { color: var(--navy); background: #e6ecef; }
.process-panel { overflow: hidden; }
.process-line { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); }
.process-step { position: relative; display: flex; min-height: 108px; flex-direction: column; align-items: center; justify-content: center; gap: 6px; border-right: 1px solid var(--line); }
.process-step:last-child { border-right: 0; }
.process-step > span { display: grid; width: 34px; height: 34px; color: var(--orange); border-radius: 50%; background: var(--orange-soft); place-items: center; }
.process-step strong { font-size: 12px; }.process-step small { color: var(--faint); font-size: 12px; }
.process-arrow { position: absolute; top: 46px; right: -7px; z-index: 2; color: #b9b6aa; background: var(--paper); }

.catalog-panel { min-height: 760px; }
.catalog-heading { align-items: flex-start; padding: 21px 22px; }
.heading-with-help { display: flex; align-items: center; gap: 8px; }
.heading-with-help h2 { margin: 0; }
.heading-with-help > div { display: flex; flex-direction: column; gap: 4px; }
.heading-with-help p { max-width: 600px; margin: 0; color: var(--muted); font-size: 12px; line-height: 1.5; }
.catalog-search { width: 300px; flex: 0 0 auto; }
.catalog-result-count { padding: 9px 20px; color: var(--green); background: #f1f7f3; border-bottom: 1px solid var(--line); font-size: 12px; font-weight: 700; }
.catalog-supplier-summary { color: var(--navy); background: #f4f1e8; }
.catalog-supplier-select { display: flex; min-width: min(480px, 48vw); flex-direction: column; gap: 5px; }
.catalog-supplier-select > span { color: var(--muted); font-size: 12px; font-weight: 700; }
.catalog-supplier-select-row { display: grid; grid-template-columns: minmax(220px, 1fr) auto; gap: 7px; }
.catalog-supplier-select-row .secondary-button { white-space: nowrap; }
.catalog-table-scroll:focus-visible, .table-scroll:focus-visible { outline: 3px solid rgb(187 90 33 / 22%); outline-offset: -3px; }
.catalog-source { display: flex; align-items: center; gap: 8px; min-height: 37px; padding: 7px 20px; color: var(--muted); background: #f7f5ed; border-bottom: 1px solid var(--line); font-size: 12px; }
.catalog-source .status-pill { margin-left: auto; }
.data-table { width: 100%; }
.table-row { display: grid; align-items: center; min-height: 45px; padding: 0 14px; border-bottom: 1px solid #ebe8de; background: transparent; font-size: 12px; }
.table-row:last-child { border-bottom: 0; }
.table-row > span { min-width: 0; padding: 8px 8px; }
.table-row > span > strong, .table-row > span > b { display: block; overflow: hidden; text-overflow: ellipsis; }
.table-row > span > small { display: block; margin-top: 3px; overflow: hidden; color: var(--faint); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.table-header { min-height: 32px; color: var(--muted); background: #f7f5ee; font-size: 12px; font-weight: 750; letter-spacing: .02em; }
.catalog-table .table-row { grid-template-columns: 118px minmax(250px, 1.8fr) minmax(110px, .7fr) 70px 80px 98px 72px; }
.catalog-table .table-row { min-width: 980px; }
.catalog-row { width: 100%; color: var(--ink); text-align: left; border: 0; border-bottom: 1px solid #ebe8de; }
.catalog-row:hover { background: #fcf7ef; }
.catalog-row.row-selected { background: #fff2e7; box-shadow: inset 3px 0 0 var(--orange); }
.catalog-row { content-visibility: auto; contain-intrinsic-size: 45px; }
.catalog-row-visual { display: flex; align-items: center; gap: 8px; }
.catalog-row-visual > img { width: 38px; height: 38px; flex: 0 0 auto; object-fit: contain; border: 1px solid var(--line); border-radius: 4px; background: #fff; }
.catalog-row-visual > span { display: flex; min-width: 0; flex-direction: column; gap: 2px; }
.formal-catalog-table-scroll { overflow-x: auto; }
.formal-catalog-table .table-row {
  min-width: 1040px;
  grid-template-columns: 120px minmax(270px, 1.55fr) minmax(230px, 1.25fr) minmax(170px, .9fr) 86px 74px;
}
.formal-catalog-table .table-row:not(.table-header) { content-visibility: auto; contain-intrinsic-size: 56px; }
.formal-catalog-table .table-row:not(.table-header):hover { background: #fcf7ef; }
.formal-catalog-table .table-row > span { overflow-wrap: anywhere; }
.formal-catalog-status { display: inline-flex; min-height: 26px; align-items: center; padding: 3px 8px; color: #80501c; border: 1px solid #ead1a4; border-radius: 999px; background: #fff3dc; font-size: 12px; font-weight: 750; white-space: nowrap; }
.formal-catalog-status[data-status="approved"] { color: var(--green); border-color: #b9d6ca; background: var(--green-soft); }
.formal-catalog-edit { min-height: 31px; padding-inline: 11px; white-space: nowrap; }
.empty-state { display: flex; min-height: 300px; flex-direction: column; align-items: center; justify-content: center; color: var(--muted); }
.empty-state strong { margin-top: 10px; font-size: 12px; }.empty-state p { margin: 5px 0 0; font-size: 12px; }

.negotiation-queue { position: sticky; top: 98px; z-index: 18; margin-bottom: 16px; border: 1px solid var(--line); background: var(--paper); box-shadow: 0 12px 34px rgb(35 41 34 / 8%); }
.negotiation-workbar-header { display: grid; grid-template-columns: minmax(260px, 1fr) 240px auto; align-items: center; gap: 18px; min-height: 86px; padding: 13px 14px 12px 17px; }
.negotiation-current-context { min-width: 0; }
.negotiation-current-context h2 { margin: 3px 0 2px; overflow: hidden; font-family: Georgia, "Songti SC", serif; font-size: 18px; text-overflow: ellipsis; white-space: nowrap; }
.negotiation-current-context p { margin: 0; overflow: hidden; color: var(--muted); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.negotiation-workbar-progress { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: 1px solid var(--line); background: #faf8f2; }
.negotiation-workbar-progress span { display: flex; min-height: 54px; flex-direction: column; align-items: center; justify-content: center; gap: 1px; color: var(--muted); border-right: 1px solid var(--line); font-size: 10px; }
.negotiation-workbar-progress span:last-child { border-right: 0; }
.negotiation-workbar-progress b { color: var(--ink); font-family: Georgia, serif; font-size: 17px; }
.negotiation-workbar-progress .queue-summary-complete b { color: var(--green); }
.negotiation-workbar-actions { display: flex; align-items: center; gap: 6px; }
.negotiation-workbar-actions button { white-space: nowrap; }
.negotiation-workbar-actions svg { transition: transform var(--motion-base) var(--ease-enter); }
.queue-caret-open { transform: rotate(180deg); }
.negotiation-active-category { display: grid; grid-template-columns: minmax(220px, .62fr) minmax(0, 1.38fr); align-items: center; gap: 16px; padding: 9px 14px; border-top: 1px solid var(--line); background: #fbfaf5; }
.negotiation-active-category > div:first-child { display: grid; min-width: 0; grid-template-columns: auto 1fr auto; align-items: center; gap: 8px; }
.negotiation-active-category > div:first-child > span { color: var(--orange); font-size: 10px; font-weight: 800; letter-spacing: .06em; white-space: nowrap; }
.negotiation-active-category > div:first-child > strong { overflow: hidden; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.negotiation-active-category > div:first-child > small { color: var(--muted); font-size: 10px; white-space: nowrap; }
.negotiation-queue-panel { position: absolute; top: calc(100% + 7px); right: -1px; left: -1px; overflow: hidden; border: 1px solid var(--line-strong); background: var(--paper); box-shadow: 0 22px 60px rgb(25 34 28 / 18%); }
.negotiation-queue-toolbar { display: grid; grid-template-columns: minmax(260px, 1fr) auto; align-items: center; gap: 12px; padding: 10px 12px; border-bottom: 1px solid var(--line); background: #fbfaf5; }
.negotiation-queue-toolbar > label { display: flex; min-height: 38px; align-items: center; gap: 8px; padding: 0 11px; border: 1px solid var(--line); background: var(--paper); }
.negotiation-queue-toolbar input { width: 100%; min-width: 0; border: 0; outline: 0; background: transparent; font-size: 12px; }
.negotiation-queue-filters { display: flex; gap: 6px; }
.negotiation-queue-filters button { min-height: 32px; padding: 0 12px; color: var(--muted); border: 1px solid transparent; border-radius: 4px; background: transparent; font-size: 12px; font-weight: 700; }
.negotiation-queue-filters button[aria-pressed="true"] { color: #fff; border-color: var(--navy); background: var(--navy); }
.negotiation-category-list { display: grid; max-height: min(54vh, 520px); overflow-y: auto; gap: 8px; padding: 12px 14px 14px; overscroll-behavior: contain; }
.negotiation-category { display: grid; grid-template-columns: minmax(190px, .65fr) minmax(0, 1.35fr); align-items: center; gap: 14px; padding: 10px 12px; border: 1px solid var(--line); background: #fffefa; }
.negotiation-category[data-complete="true"] { border-color: #bdd7cb; background: var(--green-soft); }
.negotiation-category-heading { display: grid; gap: 2px; min-width: 0; }
.negotiation-category-heading > span { color: var(--orange); font-size: 10px; font-weight: 800; letter-spacing: .08em; }
.negotiation-category-heading strong { overflow: hidden; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.negotiation-category-heading small { color: var(--muted); font-size: 11px; }
.negotiation-sku-strip { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
.negotiation-sku-strip button { display: flex; min-width: 0; min-height: 48px; align-items: center; gap: 8px; padding: 7px 9px; color: var(--ink); border: 1px solid var(--line); border-radius: 4px; background: var(--paper); text-align: left; }
.negotiation-sku-strip button[aria-pressed="true"] { border-color: var(--orange); box-shadow: inset 3px 0 0 var(--orange); background: var(--orange-soft); }
.negotiation-sku-strip button[data-complete="true"] > svg { color: var(--green); }
.negotiation-sku-strip button > span { display: grid; min-width: 0; gap: 2px; }
.negotiation-sku-strip strong, .negotiation-sku-strip small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.negotiation-sku-strip strong { font-size: 11px; }.negotiation-sku-strip small { color: var(--muted); font-size: 10px; }
.negotiation-queue-empty { display: flex; min-height: 80px; align-items: center; justify-content: center; gap: 8px; color: var(--muted); font-size: 12px; }
.negotiation-layout { display: grid; grid-template-columns: 214px minmax(0, 1fr) 236px; gap: 16px; align-items: start; }
.negotiation-lockable { min-inline-size: 0; margin: 0; padding: 0; border: 0; }
.negotiation-lockable[aria-busy="true"] { cursor: progress; }
.scenario-rail, .decision-rail { position: sticky; top: 132px; background: var(--paper); border: 1px solid var(--line); box-shadow: 0 14px 38px rgb(35 42 34 / 5%); }
.scenario-rail { padding: 16px; }
.rail-title, .decision-title { padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.rail-title h3, .decision-title h3 { margin: 5px 0 0; font-family: Georgia, "Songti SC", serif; font-size: 16px; }
.plain-field { display: flex; flex-direction: column; gap: 5px; margin-top: 13px; }
.plain-field > span, .number-field > span { color: var(--muted); font-size: 12px; font-weight: 650; }
.plain-field input, .plain-field textarea { width: 100%; padding: 8px 9px; border: 1px solid var(--line); border-radius: 4px; outline: none; background: #fbfaf5; font-size: 12px; resize: vertical; }
.mode-switch { display: grid; grid-template-columns: repeat(2, 1fr); margin-top: 10px; padding: 2px; border: 1px solid var(--line); border-radius: 5px; background: #f1efe7; }
.mode-switch button { min-height: 28px; color: var(--muted); border: 0; border-radius: 3px; background: transparent; font-size: 12px; font-weight: 700; }
.mode-switch .selected { color: white; background: var(--navy); box-shadow: 0 3px 8px rgb(24 42 56 / 18%); }
.selected-product { display: flex; flex-direction: column; gap: 4px; margin-top: 14px; padding: 12px; background: #f7f0e3; border: 1px solid #eadfcd; }
.mini-packshot { display: grid; height: 96px; margin-bottom: 3px; place-items: center; }
.mini-packshot img { width: 65px; height: 96px; object-fit: contain; filter: drop-shadow(0 8px 10px rgb(64 43 20 / 16%)); }
.mini-packshot img.pack-art { width: 138px; height: 102px; transform: scale(1.25); }
.mini-packshot img.brand-art { width: 92px; height: 58px; }
.selected-product strong { font-size: 12px; line-height: 1.35; }.selected-product > span { color: var(--muted); font-size: 12px; }
.rail-facts { margin: 9px 0 0; }.rail-facts > div { padding: 6px 0; }.rail-facts dd { max-width: 60%; font-size: 12px; }
.note-field { margin-top: 8px; }
.source-note { display: flex; gap: 7px; margin-top: 10px; padding: 9px; color: var(--green); background: var(--green-soft); font-size: 12px; line-height: 1.5; }
.source-note svg { flex: 0 0 auto; }
.negotiation-main { display: flex; min-width: 0; flex-direction: column; gap: 13px; }
.negotiation-main:focus-visible { outline: 3px solid rgb(187 90 33 / 22%); outline-offset: 4px; }
.negotiation-heading { display: flex; min-height: 72px; align-items: flex-start; justify-content: space-between; gap: 15px; padding: 2px 1px 0; }
.negotiation-heading h2 { margin: 5px 0 4px; font-family: Georgia, "Songti SC", serif; font-size: 25px; letter-spacing: -.04em; }
.negotiation-heading p { margin: 0; color: var(--muted); font-size: 12px; }
.negotiation-heading > div:first-child { display: flex; align-items: baseline; gap: 10px; }
.mode-label { color: var(--muted); font-size: 12px; font-weight: 650; }
.heading-actions { display: flex; gap: 7px; }
.error-banner { display: flex; align-items: center; gap: 8px; padding: 10px 12px; color: var(--red); background: var(--red-soft); border: 1px solid #e6bab5; font-size: 12px; }
.formula-ledger, .input-ledger, .cost-ledger, .terms-ledger, .route-ledger { background: var(--paper); border: 1px solid var(--line); box-shadow: 0 12px 34px rgb(35 41 34 / 4%); }
.formula-ledger > header, .input-ledger > header, .cost-ledger > header, .terms-ledger > header, .route-ledger > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; padding: 13px 15px 11px; border-bottom: 1px solid var(--line); }
.formula-ledger h3, .input-ledger h3, .cost-ledger h3, .terms-ledger h3, .route-ledger h3 { margin: 4px 0 0; font-family: Georgia, "Songti SC", serif; font-size: 14px; }
.section-caption { max-width: 680px; margin: 5px 0 0; color: var(--muted); font-size: 12px; line-height: 1.5; }
.terms-warning, .route-assumption-note { display: flex; align-items: flex-start; gap: 8px; padding: 11px 14px; color: #76501e; border-top: 1px solid #ead6b9; background: #fff8e9; font-size: 12px; line-height: 1.55; }
.terms-warning svg, .route-assumption-note svg { flex: 0 0 auto; margin-top: 1px; }
.formula-chain { display: flex; align-items: stretch; justify-content: space-between; gap: 5px; padding: 15px; }
.formula-chain > div { display: flex; min-width: 77px; flex: 1 1 auto; flex-direction: column; justify-content: center; gap: 5px; padding: 9px 8px; border-left: 2px solid #dad7ca; background: #f8f6ef; }
.formula-chain > span, .formula-chain > svg { align-self: center; flex: 0 0 auto; color: #a3a39b; }
.formula-chain small { color: var(--muted); font-size: 12px; }.formula-chain strong { font-family: Georgia, serif; font-size: 13px; white-space: nowrap; }
.formula-chain .formula-result { border-left-color: var(--orange); background: var(--orange-soft); }
.formula-chain .formula-result strong { color: #8f3f13; }
.formula-caption { margin: 0; padding: 0 15px 13px; color: var(--faint); font-size: 12px; line-height: 1.5; }
.formula-audit-note { display: flex; align-items: flex-start; gap: 8px; padding: 10px 14px; color: #76501e; border-top: 1px solid #ead6b9; background: #fff8e9; font-size: 12px; line-height: 1.5; }
.formula-audit-note svg { flex: 0 0 auto; margin-top: 1px; }
.formula-audit-note strong { color: #603d13; }
.revision-tag { padding: 5px 8px; color: var(--orange); border: 1px solid #e7bfa7; background: var(--orange-soft); font-size: 12px; font-weight: 700; }
.input-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.number-field { display: flex; min-width: 0; flex-direction: column; gap: 6px; min-height: 91px; padding: 12px 14px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.number-field:nth-child(3n) { border-right: 0; }.number-field:nth-last-child(-n+3) { border-bottom: 0; }
.number-field > div { display: flex; align-items: baseline; gap: 5px; }
.number-field input { width: 100%; min-width: 0; padding: 2px 0; border: 0; border-bottom: 1px solid #c8c4b7; outline: 0; background: transparent; font-family: Georgia, serif; font-size: 18px; font-weight: 650; }
.number-field small { color: var(--muted); font-size: 12px; white-space: nowrap; }.number-field em { color: var(--faint); font-size: 12px; font-style: normal; }
.number-field .number-conversion { overflow: hidden; color: var(--muted); text-overflow: ellipsis; white-space: nowrap; }
.supplier-unit-conversion { display: grid; gap: 3px; white-space: normal; }
.supplier-unit-conversion b { color: var(--green); font-size: 12px; }
.supplier-unit-conversion span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.number-field-prominent { background: #fff7ee; box-shadow: inset 3px 0 0 var(--orange); }
.number-field-prominent input { color: var(--orange); }
.pricing-mode-row { display: grid; grid-template-columns: minmax(240px, .75fr) minmax(320px, 1.25fr); gap: 14px; align-items: center; padding: 12px 14px; border-bottom: 1px solid var(--line); background: #fbfaf5; }
.pricing-mode-switch, .route-path-switch { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 3px; border: 1px solid var(--line); border-radius: 5px; background: #f1efe7; }
.pricing-mode-switch button, .route-path-switch button { min-height: 34px; padding: 0 10px; color: var(--muted); border: 0; border-radius: 3px; background: transparent; font-size: 12px; font-weight: 700; }
.pricing-mode-switch .selected, .route-path-switch .selected { color: white; background: var(--navy); box-shadow: 0 3px 8px rgb(24 42 56 / 18%); }
.fx-reference { display: flex; min-width: 0; flex-direction: column; gap: 3px; }
.fx-reference strong { font-size: 12px; }.fx-reference span, .fx-reference small { color: var(--muted); font-size: 12px; line-height: 1.4; }
.fx-reference small { color: var(--faint); }
.route-path-row { display: grid; grid-template-columns: 150px minmax(280px, 430px); align-items: center; gap: 14px; padding: 12px 14px; border-bottom: 1px solid var(--line); }
.route-path-row > span { color: var(--muted); font-size: 12px; font-weight: 700; }
.route-master-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--line); background: #fbfaf5; }
.route-master-grid .compact-field { padding: 0; border: 0; }
.route-master-wide { grid-column: 1 / -1; }
.route-readiness, .master-data-readiness { display: flex; align-items: flex-start; gap: 7px; padding: 9px 14px; color: #76501e; border-bottom: 1px solid #ead6b9; background: #fff8e9; font-size: 12px; line-height: 1.45; }
.master-data-readiness { border-top: 1px solid #ead6b9; border-bottom: 0; }
.route-readiness svg, .master-data-readiness svg { flex: 0 0 auto; margin-top: 1px; }
.route-readiness-ready { color: var(--green); border-color: #bdd7cb; background: var(--green-soft); }
.route-comparison-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; padding: 12px; }
.route-comparison-grid article { display: flex; min-width: 0; flex-direction: column; padding: 12px; border: 1px solid var(--line); background: #faf8f2; }
.route-comparison-grid .route-comparison-active { border-color: #d99a72; background: var(--orange-soft); box-shadow: inset 3px 0 0 var(--orange); }
.route-card-title { display: flex; min-height: 48px; align-items: flex-start; justify-content: space-between; gap: 8px; padding-bottom: 9px; border-bottom: 1px solid var(--line); }
.route-card-title > div { display: flex; min-width: 0; flex-direction: column; gap: 4px; }
.route-card-title strong { font-size: 12px; }.route-card-title span { color: var(--muted); font-size: 12px; line-height: 1.35; }
.route-comparison-grid dl { margin: 8px 0 10px; }
.route-comparison-grid dl > div { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 5px 0; }
.route-comparison-grid dt { color: var(--muted); font-size: 12px; }.route-comparison-grid dd { margin: 0; font-size: 12px; font-weight: 750; text-align: right; }
.route-comparison-grid button { width: 100%; min-height: 34px; margin-top: auto; }
.cost-table { overflow-x: auto; }
.cost-table-compact .table-row { min-width: 680px; grid-template-columns: minmax(210px, 1.8fr) 135px 135px 76px 110px; }
.cost-table-advanced .table-row { min-width: 1040px; grid-template-columns: minmax(180px, 1.45fr) 120px 110px 110px 110px 64px 105px; }
.cost-table input[type="number"] { width: 100%; padding: 6px 7px; border: 1px solid var(--line); border-radius: 3px; background: #fbfaf5; font-size: 12px; }
.cost-table .app-select-trigger { min-height: 34px; padding: 6px 7px; border-color: var(--line); border-radius: 3px; background: #fbfaf5; }
.cost-table input[type="checkbox"] { width: 14px; height: 14px; accent-color: var(--orange); }
.section-action { display: inline-flex; min-height: 32px; align-items: center; gap: 7px; padding: 0 9px; color: var(--muted); border: 1px solid var(--line); border-radius: 5px; background: #faf8f2; font-size: 12px; font-weight: 650; }
.section-action:hover { color: var(--ink); border-color: var(--line-strong); background: white; }
.muted-value { color: var(--faint); text-decoration: line-through; }
.cost-phase-label { display: block; width: max-content; max-width: 100%; margin-bottom: 4px; padding: 2px 5px; overflow: hidden; color: var(--muted); border: 1px solid #ddd9cc; background: #f5f3ec; font-size: 10px; font-weight: 750; letter-spacing: .02em; text-overflow: ellipsis; white-space: nowrap; }
.decision-rail { padding: 15px; }
.decision-title > div { display: flex; align-items: baseline; gap: 7px; }
.decision-title > div > span { color: var(--orange); font-size: 10px; font-weight: 800; letter-spacing: .08em; }
.decision-metric { margin: 0; padding: 13px 0; border-bottom: 1px solid var(--line); }
.decision-metric strong { display: block; margin: 5px 0 3px; font-family: Georgia, serif; font-size: 21px; letter-spacing: -.03em; }
.decision-metric small { color: var(--faint); font-size: 12px; }
.decision-good strong { color: var(--green); }.decision-warning strong { color: var(--red); }
.decision-breakdown { margin: 12px 0; padding: 9px 10px; background: #f5f3ec; }
.decision-breakdown > div { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 5px 0; font-size: 12px; }
.decision-breakdown span { color: var(--muted); }.decision-breakdown strong { font-size: 12px; }
.rail-disclaimer { display: flex; gap: 6px; margin: 10px 0 0; color: var(--faint); font-size: 12px; line-height: 1.4; }.rail-disclaimer svg { flex: 0 0 auto; }
.empty-metric { color: var(--faint); }

.drawer-backdrop { position: fixed; inset: 0; z-index: 50; background: rgb(14 20 24 / 32%); backdrop-filter: blur(3px); }
.comparison-drawer { position: absolute; top: 0; right: 0; width: min(430px, 92vw); height: 100%; overflow-y: auto; padding: 22px; background: var(--paper); box-shadow: -20px 0 60px rgb(0 0 0 / 18%); }
.drawer-backdrop[data-motion-state="enter"] { animation: overlay-enter var(--motion-base) ease-out both; }
.drawer-backdrop[data-motion-state="exit"] { animation: overlay-exit var(--motion-base) var(--ease-exit) both; }
.drawer-backdrop[data-motion-state="enter"] .comparison-drawer { animation: drawer-enter 220ms var(--ease-enter) both; }
.drawer-backdrop[data-motion-state="exit"] .comparison-drawer { animation: drawer-exit 200ms var(--ease-exit) both; }
.comparison-drawer > header { display: flex; align-items: flex-start; justify-content: space-between; padding-bottom: 15px; border-bottom: 1px solid var(--line); }
.comparison-drawer h2 { margin: 5px 0 0; font-family: Georgia, "Songti SC", serif; font-size: 22px; }
.comparison-drawer header button { display: grid; width: 32px; height: 32px; border: 1px solid var(--line); border-radius: 50%; background: transparent; place-items: center; }
.drawer-copy { width: 100%; margin: 16px 0 12px; }
.revision-list { display: flex; flex-direction: column; gap: 7px; }
.revision-list button { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 13px; text-align: left; border: 1px solid var(--line); background: #faf8f2; }
.revision-list button > span { display: flex; flex-direction: column; gap: 4px; }.revision-list button > span:last-child { text-align: right; }
.revision-list strong, .revision-list b { font-size: 12px; }.revision-list small { color: var(--muted); font-size: 12px; }
.revision-list .revision-active { border-color: #da9c75; background: var(--orange-soft); box-shadow: inset 3px 0 0 var(--orange); }

.order-progress { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); padding: 20px 18px 14px; }
.order-progress > div { position: relative; display: flex; min-height: 86px; flex-direction: column; align-items: center; gap: 5px; text-align: center; }
.order-progress > div::after { position: absolute; top: 15px; left: calc(50% + 18px); width: calc(100% - 36px); height: 1px; background: #d7d4c8; content: ""; }
.order-progress > div:last-child::after { display: none; }
.order-progress > div > span { display: grid; z-index: 2; width: 30px; height: 30px; color: var(--faint); border: 1px solid var(--line); border-radius: 50%; background: var(--paper); place-items: center; }
.order-progress svg { width: 16px; height: 16px; }.order-progress strong { font-size: 12px; }.order-progress small { color: var(--faint); font-size: 12px; }
.order-progress .progress-done > span { color: var(--green); border-color: #b9d6ca; background: var(--green-soft); }.order-progress .progress-done::after { background: #9dc7b7; }
.operation-message { display: flex; align-items: center; gap: 7px; margin: 0 18px 18px; padding: 9px 11px; font-size: 12px; }
.operation-message-warning { color: #80501c; background: #fff3dc; }
.operation-message-success { color: var(--green); background: var(--green-soft); }
.procurement-table .table-row { grid-template-columns: minmax(240px, 1.6fr) 130px 80px 90px 100px 90px; }
.trace-chain { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr; gap: 12px; align-items: center; padding: 16px; color: var(--navy); background: #e9eff1; border: 1px solid #cad6da; }
.trace-chain > div { display: flex; align-items: center; gap: 9px; min-width: 0; padding: 9px; background: rgb(255 255 255 / 58%); }
.trace-chain > div > span { display: flex; min-width: 0; flex-direction: column; gap: 3px; }.trace-chain strong { font-size: 12px; }.trace-chain small { color: var(--muted); font-size: 12px; }
.batch-table .table-row { grid-template-columns: minmax(160px, 1.4fr) 95px 95px 70px 70px 70px 90px; }
.legend { display: flex; gap: 13px; color: var(--muted); font-size: 12px; }
.legend span::before { display: inline-block; width: 7px; height: 7px; margin-right: 5px; border-radius: 50%; content: ""; }.legend-out::before { background: var(--red); }.legend-in::before { background: var(--green); }.legend-gst::before { background: #3f7890; }
.cash-timeline { padding: 6px 20px 18px; }
.cash-event { position: relative; display: grid; grid-template-columns: 46px 16px minmax(280px, 1fr) 120px 120px; gap: 10px; align-items: center; min-height: 90px; border-bottom: 1px solid #e9e6dc; }
.cash-event:last-child { border-bottom: 0; }
.cash-day { font-family: Georgia, serif; font-size: 13px; font-weight: 700; }
.cash-marker { position: relative; width: 10px; height: 10px; border-radius: 50%; background: var(--red); }
.cash-marker::after { position: absolute; top: 10px; left: 4px; width: 1px; height: 80px; background: #d7d4c9; content: ""; }.cash-event:last-child .cash-marker::after { display: none; }
.cash-inflow .cash-marker { background: var(--green); }.cash-gst_settlement .cash-marker { background: #3f7890; }
.cash-event > div { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }.cash-event strong { font-size: 12px; }.cash-event p { margin: 0; color: var(--muted); font-size: 12px; }.cash-event > small { color: var(--muted); font-size: 12px; text-align: right; }
.amount-positive, .amount-negative { font-family: Georgia, serif; font-size: 14px; font-weight: 700; text-align: right; }.amount-positive { color: var(--green); }.amount-negative { color: var(--red); }

/* Information hierarchy: explanations live behind a consistent help affordance. */
.label-with-help { display: inline-flex !important; min-width: 0; align-items: center; gap: 5px; color: inherit; font-size: inherit; }
.help-popover { position: relative; display: inline-flex; flex: 0 0 auto; align-items: center; font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif; }
.help-trigger { display: grid; width: 24px; height: 24px; padding: 0; color: #8b8d86; border: 0; border-radius: 50%; background: transparent; place-items: center; }
.help-trigger:hover, .help-trigger[aria-expanded="true"] { color: white; border-color: var(--orange); background: var(--orange); }
.help-panel { position: absolute; top: calc(100% + 8px); left: -8px; z-index: 80; width: 270px; padding: 12px 13px; color: #f8f4e9; text-align: left; white-space: normal; background: #182c39; border: 1px solid rgb(255 255 255 / 10%); border-radius: 7px; box-shadow: 0 16px 40px rgb(13 24 31 / 26%); font-size: 12px; font-weight: 500; letter-spacing: 0; line-height: 1.55; transform-origin: 18px 0; text-transform: none; }
.help-panel[data-motion-state="enter"] { animation: popover-enter 120ms var(--ease-enter) both; }
.help-panel[data-motion-state="exit"] { animation: popover-exit 100ms var(--ease-exit) both; }
.help-panel::before { position: absolute; top: -5px; left: 12px; width: 9px; height: 9px; background: #182c39; border-top: 1px solid rgb(255 255 255 / 10%); border-left: 1px solid rgb(255 255 255 / 10%); content: ""; transform: rotate(45deg); }
.help-panel-end { right: -8px; left: auto; }
.help-panel-end::before { right: 12px; left: auto; }
.secondary-data { display: block; margin-top: 3px; color: var(--muted); font-size: 12px; line-height: 1.35; }
.field-label-row { display: flex; align-items: center !important; gap: 6px !important; }
.metric-context { display: block !important; color: var(--muted) !important; font-size: 12px !important; font-weight: 600; line-height: 1.35; }
.input-affix { color: var(--muted); font-size: 12px; white-space: nowrap; }
.formula-label { color: var(--muted); font-size: 12px; line-height: 1.25; }
.table-help-cell { display: flex; align-items: center; gap: 6px; }
.cumulative-amount { color: var(--muted); font-size: 12px; text-align: right; }

.brand span, .nav-section, .nav-item b, .system-status strong,
.page-title span, .eyebrow, .section-kicker, .header-context strong, .header-context > span,
.save-state strong, .primary-button, .secondary-button, .outline-button, .status-pill,
.command-hero p, .metric-ledger article > span, .decision-metric > span,
.fact-list dt, .rail-facts dt, .fact-list dd, .rail-facts dd,
.work-list strong, .work-index, .process-step strong, .catalog-source,
.table-row, .table-header, .plain-field > span, .plain-field input, .plain-field textarea,
.mode-switch button, .selected-product strong, .selected-product > span, .rail-facts dd,
.negotiation-heading p, .error-banner, .revision-tag,
.cost-table input[type="number"], .cost-table select,
.decision-breakdown > div, .decision-breakdown strong,
.revision-list strong, .revision-list b,
.order-progress strong, .operation-message, .trace-chain strong,
.legend, .cash-event strong, .cash-event p {
  font-size: 12px;
}

.nav-section, .page-title span, .eyebrow, .section-kicker { line-height: 1.25; }
.nav-item { min-height: 50px; }
.nav-item strong { font-size: 13px; }
.nav-item b { min-width: 25px; padding: 4px 6px; }
.sidebar-bottom { padding-inline: 8px; }
.system-status { gap: 8px; }
.system-status .help-trigger { color: rgb(255 255 255 / 70%); border-color: rgb(255 255 255 / 25%); background: transparent; }
.app-header { min-height: 82px; grid-template-columns: minmax(160px, .45fr) minmax(260px, 1fr) minmax(420px, 1.25fr); }
.header-context strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.search-box input, .empty-state p { font-size: 12px; }
.save-state { justify-content: flex-end; }
.save-state strong { white-space: nowrap; }
.primary-button, .secondary-button, .outline-button { min-height: 38px; }
.status-pill { min-height: 23px; padding: 5px 8px; }
.metric-ledger { overflow: visible; }
.metric-ledger article { min-height: 94px; padding: 17px 18px; }
.metric-ledger article > .label-with-help { display: flex !important; color: var(--muted); font-size: 12px; font-weight: 650; }
.section-heading p { font-size: 12px; line-height: 1.5; }
.fact-list dt, .fact-list dd, .rail-facts dt, .rail-facts dd { line-height: 1.4; }
.count-badge { width: 26px; height: 26px; font-size: 12px; }
.work-list button { min-height: 62px; }
.work-list button > span:nth-child(2) { gap: 2px; }
.work-index { width: 27px; height: 27px; }
.process-step { min-height: 120px; }
.process-step .secondary-data { color: var(--faint); text-align: center; }
.catalog-source { min-height: 48px; }
.table-row { min-height: 54px; line-height: 1.35; }
.table-header { min-height: 42px; }
.table-row > span > .secondary-data { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.catalog-row { cursor: pointer; }
.catalog-row:focus-visible { outline: 3px solid rgb(187 90 33 / 22%); outline-offset: -3px; }
.scenario-rail, .decision-rail { top: 98px; }
.rail-title, .decision-title { position: relative; }
.rail-title > .help-popover, .decision-title > .help-popover { position: absolute; right: 0; bottom: 12px; }
.plain-field { gap: 7px; }
.plain-field > span, .field-label-row > label { color: var(--muted); font-size: 12px; font-weight: 650; }
.plain-field input, .plain-field textarea { padding: 9px 10px; }
.mode-switch button { min-height: 34px; }
.selected-product { gap: 6px; }
.selected-product > .secondary-data { color: var(--muted); }
.rail-facts > div { padding: 8px 0; }
.negotiation-heading { min-height: 68px; }
.formula-chain > div { min-height: 74px; }
.formula-chain strong { font-size: 15px; }
.number-field { min-height: 100px; gap: 9px; }
.number-field > div { gap: 6px; }
.cost-table input[type="number"], .cost-table select { min-height: 34px; }
.decision-metric > .label-with-help { display: flex !important; color: var(--muted); font-size: 12px; font-weight: 650; }
.decision-breakdown > div { padding: 7px 0; }
.revision-list button { min-height: 68px; }
.order-progress > div { min-height: 96px; }
.order-progress .secondary-data, .trace-chain .secondary-data { color: var(--muted); text-align: center; }
.operation-message { min-height: 42px; }
.trace-chain > div { min-height: 58px; }
.cash-event { min-height: 104px; }
.cash-event p { line-height: 1.45; }

/* Structured commercial terms and source confidence. */
body { min-width: 0; }
.trade-terms-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.compact-field { display: flex; min-width: 0; flex-direction: column; gap: 7px; padding: 12px 13px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.compact-field > span { color: var(--muted); font-size: 12px; font-weight: 650; }
.compact-field input { width: 100%; min-width: 0; min-height: 36px; padding: 7px 8px; border: 1px solid var(--line); border-radius: 4px; background: #fbfaf5; font-size: 12px; }
.compact-field .app-select-trigger { min-height: 36px; padding: 7px 8px; border-color: var(--line); background: #fbfaf5; }
.compact-field > div { display: flex; align-items: center; gap: 7px; }
.compact-field-wide { grid-column: span 2; }
.stacked-inputs { display: grid !important; gap: 5px; }
.table-row > .stacked-inputs > small { margin: 0; overflow: visible; color: var(--muted); font-size: 10px; line-height: 1.35; text-overflow: clip; white-space: normal; }
.stacked-inputs input:first-of-type { border-left: 3px solid #df9d72; }
.stacked-inputs input:last-child { border-left: 3px solid var(--green); }

/* Item master data stays compact while formalisation gaps remain visible. */
.master-data-strip { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); border-bottom: 1px solid var(--line); background: #fffdf7; }
.master-data-strip > div { min-height: 86px; padding: 13px 15px; border-right: 1px solid var(--line); }
.master-data-strip > div:last-child { border-right: 0; }
.master-data-strip > div > span:first-child { display: block; margin-bottom: 7px; color: var(--muted); font-size: 12px; font-weight: 650; }
.master-data-strip strong { font-size: 12px; line-height: 1.35; }
.catalog-table { overflow-x: auto; }
.catalog-table .table-row { min-width: 1030px; }

/* Procurement document controls. */
.document-facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-bottom: 1px solid var(--line); }
.document-facts > div { min-height: 74px; padding: 12px 15px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.document-facts > div:nth-child(4n) { border-right: 0; }
.document-facts span { display: block; margin-bottom: 6px; color: var(--muted); font-size: 12px; }
.document-facts strong { font-size: 12px; line-height: 1.4; }
.document-flow { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; padding: 18px; }
.document-card { position: relative; display: grid; grid-template-columns: 38px minmax(0, 1fr); gap: 10px; min-height: 102px; align-items: start; padding: 14px; border: 1px solid var(--line); background: #faf8f2; }
.document-card > .status-pill { grid-column: 2; }
.document-card > div:nth-child(2) { min-width: 0; }
.document-card > div:nth-child(2) > span:first-child { display: block; margin-bottom: 4px; color: var(--muted); font-size: 12px; }
.document-card strong { font-size: 12px; }
.document-icon { display: grid; width: 36px; height: 36px; color: var(--orange); border-radius: 50%; background: var(--orange-soft); place-items: center; }
.document-arrow { position: absolute; top: 43px; right: -14px; z-index: 2; color: var(--faint); background: var(--paper); }
.match-panel { border: 1px solid var(--line); background: var(--paper); box-shadow: var(--shadow); }
.match-panel > header, .fefo-plan > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; padding: 16px 18px; border-bottom: 1px solid var(--line); }
.match-panel h3, .fefo-plan h3, .reorder-banner h3 { margin: 5px 0 0; font-family: Georgia, "Songti SC", serif; font-size: 17px; }
.match-exception { border-color: #e1bf94; box-shadow: inset 4px 0 0 #d98b2b, var(--shadow); }
.match-ready { border-color: #b8d3c7; box-shadow: inset 4px 0 0 var(--green), var(--shadow); }
.match-grid { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; gap: 18px; align-items: center; padding: 18px; }
.match-grid > div { min-height: 82px; padding: 14px; background: #f7f5ed; }
.match-grid > div > span:first-child { display: block; margin-bottom: 8px; color: var(--muted); font-size: 12px; }
.match-grid strong { font-family: Georgia, serif; font-size: 19px; }
.match-grid > svg { color: var(--faint); }
.exception-list { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 18px 18px; }
.exception-list > span { display: inline-flex; align-items: center; gap: 7px; min-height: 36px; padding: 8px 10px; color: #80501c; background: #fff3dc; border: 1px solid #ead1a4; font-size: 12px; }
.two-panel-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(300px, .8fr); gap: 16px; }
.landed-cost-table { overflow-x: auto; }
.landed-cost-table .table-row { min-width: 680px; grid-template-columns: minmax(150px, 1.4fr) 92px 90px 82px 82px 82px; }
.supplier-scorecard .section-heading { align-items: center; }
.score-grade { display: grid; width: 46px; height: 46px; color: white; border-radius: 50%; background: var(--green); font-family: Georgia, serif; font-size: 22px; place-items: center; }
.score-total { display: flex; align-items: baseline; gap: 7px; padding: 20px 20px 10px; }
.score-total strong { font-family: Georgia, serif; font-size: 38px; }
.score-total span { color: var(--muted); font-size: 12px; }
.score-dimensions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 0 12px 16px; }
.score-dimensions > div { display: flex; justify-content: space-between; gap: 10px; padding: 11px 8px; border-bottom: 1px solid var(--line); font-size: 12px; }
.score-dimensions span { color: var(--muted); }
.receipt-drawer { overflow-y: auto; }
.drawer-boundary { margin: 14px 0 0; padding: 10px 11px; color: var(--muted); background: #f4f2ea; border-left: 3px solid var(--orange); font-size: 12px; line-height: 1.5; }
.drawer-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 16px; border: 1px solid var(--line); }
.drawer-validation { display: flex; align-items: center; gap: 8px; padding: 10px; color: var(--red); background: var(--red-soft); font-size: 12px; }
.drawer-ready { display: flex; align-items: center; gap: 8px; padding: 10px; color: var(--green); background: var(--green-soft); font-size: 12px; }

/* Food inventory, FEFO and projected stock. */
.reorder-banner { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 16px 18px; color: #633f18; background: #fff4dd; border: 1px solid #e6c995; }
.reorder-icon { display: grid; width: 44px; height: 44px; border-radius: 50%; background: #f7dfae; place-items: center; }
.reorder-status { display: flex; align-items: flex-end; flex-direction: column; gap: 7px; }
.reorder-status strong { font-size: 12px; white-space: nowrap; }
.fefo-plan { border: 1px solid #b9d3c8; background: var(--paper); box-shadow: inset 4px 0 0 var(--green); }
.fefo-allocations { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; padding: 16px; }
.fefo-allocations > div { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 12px; border: 1px solid var(--line); background: #f7faf7; }
.fefo-rank { display: grid; width: 28px; height: 28px; color: white; border-radius: 50%; background: var(--green); font-weight: 800; place-items: center; }
.table-scroll { overflow-x: auto; }
.batch-table .table-row { min-width: 1320px; grid-template-columns: minmax(190px, 1.4fr) minmax(180px, 1.2fr) 90px 105px minmax(250px, 1.5fr) 72px 72px 72px 100px; }
.projection-table .table-row { grid-template-columns: 112px minmax(180px, 1.5fr) 90px 90px 100px 125px; }

/* Cash event source and reconciliation. */
.cash-day { display: flex; flex-direction: column; gap: 4px; }
.cash-day b { color: var(--muted); font-family: Inter, ui-sans-serif, sans-serif; font-size: 12px; font-weight: 600; }
.cash-title { display: inline-flex; align-items: center; gap: 5px; }
.reconciliation-table { overflow-x: auto; }
.reconciliation-table .table-row { min-width: 700px; grid-template-columns: minmax(150px, 1.3fr) 125px 105px 90px 80px 90px; }
.cash-scope .section-heading { align-items: center; }
.control-list { padding: 8px 18px 16px; }
.control-list > div { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 9px; align-items: start; padding: 11px 0; border-bottom: 1px solid var(--line); }
.control-list > div:last-child { border-bottom: 0; }
.control-list svg { margin-top: 1px; color: var(--green); }
.control-list > div:last-child svg { color: var(--orange); }
.control-list strong { font-size: 12px; }
.control-label { display: inline-flex; align-items: center; gap: 7px; min-height: 32px; }

.app-notice { position: fixed; top: 96px; right: 24px; z-index: 70; display: flex; width: min(480px, calc(100vw - 32px)); align-items: flex-start; gap: 10px; padding: 13px 14px; border: 1px solid; border-radius: 7px; box-shadow: 0 18px 48px rgb(16 28 34 / 18%); font-size: 13px; line-height: 1.45; animation: notice-in .18s ease-out; }
.app-notice > svg { margin-top: 1px; flex: 0 0 auto; }
.app-notice > span { flex: 1; }
.app-notice-success { color: var(--green); border-color: #b9d5ca; background: #f1faf5; }
.app-notice-error { color: var(--red); border-color: #e5b9b3; background: #fff3f1; }
.app-notice-info { color: var(--navy); border-color: #bdccd4; background: #f1f6f8; }
.app-notice button { display: grid; width: 28px; height: 28px; margin-left: auto; color: inherit; border: 0; border-radius: 50%; background: transparent; place-items: center; }
.app-notice button:hover { background: rgb(162 63 55 / 8%); }
@keyframes notice-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } }

/* Motion system: short, directional and tied to hierarchy. */
.motion-content-swap { animation: content-enter-forward var(--motion-base) var(--ease-enter) both; }
.motion-content-swap[data-motion-direction="backward"] { animation-name: content-enter-backward; }
.motion-value { animation: value-change var(--motion-base) var(--ease-enter) both; }
.motion-reveal { overflow: hidden; transform-origin: top; }
.motion-reveal[data-motion-state="enter"] { animation: reveal-enter var(--motion-base) var(--ease-enter) both; }
.motion-reveal[data-motion-state="exit"] { pointer-events: none; animation: reveal-exit 170ms var(--ease-exit) both; }
.status-pill, .readiness-checks > span, .revision-tag, .mode-label { transition: color var(--motion-base) ease, background-color var(--motion-base) ease, border-color var(--motion-base) ease, transform var(--motion-base) var(--ease-enter); }
.catalog-row, .approval-list > button, .journey-stage, .customer-network > button, .work-list > button, .revision-list button { transition: color var(--motion-fast) ease, background-color var(--motion-fast) ease, border-color var(--motion-fast) ease, box-shadow var(--motion-fast) ease, transform var(--motion-fast) var(--ease-standard); }
.catalog-row:hover, .approval-list > button:hover, .customer-network > button:hover, .work-list > button:hover, .revision-list button:hover { transform: translateX(2px); }
.journey-stage:hover { transform: translateY(-2px); }
.journey-stage-selected { transform: translateY(-2px); }

@keyframes view-exit-forward { from { opacity: 1; transform: translateX(0) scale(1); } to { opacity: 0; transform: translateX(-12px) scale(.996); } }
@keyframes view-exit-backward { from { opacity: 1; transform: translateX(0) scale(1); } to { opacity: 0; transform: translateX(12px) scale(.996); } }
@keyframes view-enter-forward { from { opacity: 0; transform: translateX(18px) scale(.996); } to { opacity: 1; transform: translateX(0) scale(1); } }
@keyframes view-enter-backward { from { opacity: 0; transform: translateX(-18px) scale(.996); } to { opacity: 1; transform: translateX(0) scale(1); } }
@keyframes title-enter-forward { from { opacity: 0; transform: translateX(8px); } to { opacity: 1; transform: translateX(0); } }
@keyframes title-enter-backward { from { opacity: 0; transform: translateX(-8px); } to { opacity: 1; transform: translateX(0); } }
@keyframes content-enter-forward { from { opacity: 0; transform: translateX(8px); } to { opacity: 1; transform: translateX(0); } }
@keyframes content-enter-backward { from { opacity: 0; transform: translateX(-8px); } to { opacity: 1; transform: translateX(0); } }
@keyframes value-change { 0% { opacity: .28; transform: translateY(5px); } 100% { opacity: 1; transform: translateY(0); } }
@keyframes reveal-enter { from { max-height: 0; opacity: 0; transform: translateY(-8px); } to { max-height: 900px; opacity: 1; transform: translateY(0); } }
@keyframes reveal-exit { from { max-height: 900px; opacity: 1; transform: translateY(0); } to { max-height: 0; opacity: 0; transform: translateY(-6px); } }
@keyframes overlay-enter { from { opacity: 0; } to { opacity: 1; } }
@keyframes overlay-exit { from { opacity: 1; } to { opacity: 0; } }
@keyframes drawer-enter { from { opacity: .65; transform: translateX(42px); } to { opacity: 1; transform: translateX(0); } }
@keyframes drawer-exit { from { opacity: 1; transform: translateX(0); } to { opacity: 0; transform: translateX(34px); } }
@keyframes dialog-enter { from { opacity: 0; transform: translateY(12px) scale(.985); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes dialog-exit { from { opacity: 1; transform: translateY(0) scale(1); } to { opacity: 0; transform: translateY(8px) scale(.99); } }
@keyframes popover-enter { from { opacity: 0; transform: translateY(-4px) scale(.97); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes popover-exit { from { opacity: 1; transform: translateY(0) scale(1); } to { opacity: 0; transform: translateY(-3px) scale(.98); } }

.nav-item { grid-template-columns: 22px minmax(0, 1fr) auto; }
.nav-badge { justify-self: end; }
.guide-launch { display: flex; width: 100%; min-height: 38px; align-items: center; justify-content: center; gap: 8px; margin-bottom: 12px; color: #f5d27a; border: 1px solid rgb(239 189 67 / 24%); border-radius: 7px; background: rgb(239 189 67 / 8%); font-size: 12px; font-weight: 750; }
.guide-launch:hover { color: #ffe39a; border-color: rgb(239 189 67 / 42%); background: rgb(239 189 67 / 13%); }

.catalog-heading-actions { display: flex; align-items: flex-end; justify-content: flex-end; flex-wrap: wrap; gap: 9px; }
.sku-readiness { display: grid; grid-template-columns: minmax(220px, .75fr) minmax(420px, 1.5fr) auto; gap: 20px; align-items: center; padding: 17px 20px; background: linear-gradient(105deg, #f8f4e8, #fffaf1); border-bottom: 1px solid var(--line); }
.readiness-intro h3 { margin: 5px 0 4px; font-family: Georgia, "Songti SC", serif; font-size: 18px; }
.readiness-intro p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.5; }
.readiness-checks { display: flex; flex-wrap: wrap; gap: 7px; }
.readiness-checks > span { display: inline-flex; min-height: 31px; align-items: center; gap: 6px; padding: 5px 8px; border: 1px solid; border-radius: 999px; font-size: 12px; font-weight: 650; }
.readiness-ready { color: var(--green); border-color: #bfd9ce !important; background: var(--green-soft); }
.readiness-missing { color: #8a561b; border-color: #ead2a3 !important; background: #fff4dc; }
.readiness-actions { display: flex; align-items: flex-end; flex-direction: column; gap: 8px; }

.quick-adjustments { align-items: center !important; gap: 4px !important; margin-top: 1px; }
.quick-adjustments button { min-width: 38px; min-height: 25px; padding: 0 7px; color: var(--orange); border: 1px solid #ecc7af; border-radius: 4px; background: #fffaf4; font-size: 12px; font-weight: 750; }
.quick-adjustments button:hover { color: white; border-color: var(--orange); background: var(--orange); }

.approval-hero { align-items: center; }
.approval-hero .section-kicker { color: #f2c761; }
.approval-layout { display: grid; grid-template-columns: minmax(300px, .7fr) minmax(520px, 1.3fr); gap: 16px; align-items: start; }
.approval-list-panel { overflow: hidden; }
.approval-filters { display: flex; gap: 6px; overflow-x: auto; padding: 10px 12px; border-bottom: 1px solid var(--line); scrollbar-width: thin; }
.approval-filters button { min-height: 34px; flex: 0 0 auto; padding: 0 10px; color: var(--muted); border: 1px solid var(--line); border-radius: 999px; background: #f8f6ef; font-size: 12px; font-weight: 700; }
.approval-filters button[aria-pressed="true"] { color: white; border-color: var(--navy); background: var(--navy); }
.approval-list { display: flex; flex-direction: column; }
.approval-list > button { display: grid; grid-template-columns: 5px minmax(0, 1fr) auto; gap: 12px; align-items: center; min-height: 78px; padding: 10px 13px; text-align: left; border: 0; border-bottom: 1px solid var(--line); background: transparent; }
.approval-list > button:last-child { border-bottom: 0; }
.approval-list > button:hover, .approval-list > .approval-item-selected { background: #fff8ef; }
.approval-list > .approval-item-selected { box-shadow: inset 3px 0 0 var(--orange); }
.approval-list button > span:nth-child(2) { display: flex; min-width: 0; flex-direction: column; gap: 4px; }
.approval-list small { color: var(--orange); font-size: 12px; font-weight: 750; }
.approval-list strong { overflow: hidden; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.approval-empty { display: flex; min-height: 180px; align-items: center; justify-content: center; flex-direction: column; gap: 7px; padding: 20px; color: var(--muted); text-align: center; }
.approval-empty svg { color: var(--green); }
.approval-empty strong { color: var(--ink); }
.approval-empty span { font-size: 12px; }
.approval-risk { width: 5px; height: 42px; border-radius: 99px; background: #b8bbb3; }
.approval-risk-normal { background: var(--green); }.approval-risk-important { background: #ce8d27; }.approval-risk-high { background: var(--red); }
.approval-detail { overflow: hidden; }
.approval-summary { padding: 18px 20px; border-bottom: 1px solid var(--line); }
.approval-summary > p { margin-bottom: 16px; font-size: 14px; line-height: 1.6; }
.approval-summary dl { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0; border: 1px solid var(--line); }
.approval-summary dl > div { min-width: 0; padding: 10px 11px; border-right: 1px solid var(--line); }
.approval-summary dl > div:last-child { border-right: 0; }
.approval-summary dt { color: var(--muted); font-size: 12px; }.approval-summary dd { margin: 5px 0 0; font-size: 12px; font-weight: 700; line-height: 1.4; }
.approval-blocker { display: flex; gap: 11px; margin: 17px 20px 0; padding: 13px; color: var(--red); border: 1px solid #e8beb9; background: var(--red-soft); }
.approval-blocker svg { flex: 0 0 auto; }.approval-blocker div { display: flex; flex-direction: column; gap: 4px; }.approval-blocker span { font-size: 12px; line-height: 1.5; }
.approval-actions { display: flex; align-items: flex-start; flex-direction: column; gap: 12px; padding: 17px 20px; border-bottom: 1px solid var(--line); }
.approval-actions > div { display: flex; gap: 8px; }
.approval-note { display: flex; width: 100%; flex-direction: column; gap: 6px; color: var(--muted); font-size: 12px; font-weight: 700; }
.approval-note textarea { width: 100%; padding: 10px; border: 1px solid var(--line-strong); border-radius: 5px; background: #fbfaf5; font-size: 13px; resize: vertical; }
.approval-notice { padding: 9px 11px; color: var(--green); border: 1px solid #bfd9ce; background: var(--green-soft); font-size: 12px; font-weight: 650; }
.approval-notice-error { color: var(--red); border-color: #e7bcb6; background: var(--red-soft); }
.approval-history { padding: 18px 20px 22px; }
.approval-history h4 { margin: 0 0 14px; font-family: Georgia, "Songti SC", serif; font-size: 16px; }
.approval-history > div { display: grid; grid-template-columns: 12px minmax(0, 1fr); gap: 9px; padding: 0 0 16px; }
.approval-history > div:last-child { padding-bottom: 0; }
.history-dot { width: 9px; height: 9px; margin-top: 5px; border: 2px solid white; border-radius: 50%; background: var(--orange); box-shadow: 0 0 0 1px var(--orange); }
.approval-history > div > div { display: flex; flex-direction: column; gap: 4px; }
.approval-history strong { font-size: 12px; }.approval-history span { color: var(--muted); font-size: 12px; line-height: 1.5; }.approval-history small { color: var(--faint); font-size: 12px; }

/* Customer-led import route and dynamic supply-chain relationships. */
.journey-hero { align-items: center; }
.journey-hero > div:first-child { display: flex; flex-direction: column; gap: 8px; }
.journey-hero-status { display: flex; min-width: 150px; align-items: flex-end; flex-direction: column; gap: 5px; }
.journey-hero-status strong { color: #f2c761; font-family: Georgia, serif; font-size: 31px; }
.journey-hero-status span { color: rgb(255 255 255 / 66%); font-size: 12px; font-weight: 700; }
.journey-overview { display: grid; grid-template-columns: 1.2fr .75fr .9fr .95fr 1.05fr .9fr; overflow: hidden; background: var(--paper); border: 1px solid var(--line); box-shadow: 0 10px 30px rgb(40 45 37 / 4%); }
.journey-overview > label, .journey-select-field, .journey-quote-compare { display: flex; min-width: 0; min-height: 86px; justify-content: center; flex-direction: column; gap: 7px; padding: 12px 14px; border-right: 1px solid var(--line); }
.journey-overview > *:last-child { border-right: 0; }
.journey-overview label > span, .journey-select-field > span, .journey-quote-compare > span { color: var(--muted); font-size: 12px; font-weight: 650; }
.journey-overview label > div { display: flex; align-items: center; gap: 5px; }
.journey-overview input { width: 100%; min-width: 0; min-height: 34px; padding: 0 8px; border: 1px solid var(--line-strong); border-radius: 4px; background: #fbfaf5; font-size: 12px; }
.journey-overview .app-select-trigger { min-height: 34px; padding-block: 0; background: #fbfaf5; }
.journey-overview label > div input { flex: 1; }
.journey-overview label b { color: var(--muted); font-size: 12px; white-space: nowrap; }
.journey-quote-compare strong { font-family: Georgia, serif; font-size: 18px; }
.journey-route-panel { overflow: hidden; }
.journey-phases { display: grid; grid-template-columns: 1.25fr .9fr 1.7fr 1.15fr .72fr; overflow-x: auto; border-bottom: 1px solid var(--line); }
.journey-phase { min-width: 0; border-right: 1px solid var(--line); background: #fbfaf5; }
.journey-phase:last-child { border-right: 0; }
.journey-phase-title { display: block; padding: 10px 11px; color: var(--muted); background: #f1efe7; border-bottom: 1px solid var(--line); font-size: 12px; letter-spacing: .08em; }
.journey-phase > div { display: flex; min-height: 118px; }
.journey-stage { display: flex; min-width: 0; flex: 1; align-items: center; justify-content: flex-start; flex-direction: column; gap: 7px; padding: 14px 7px 12px; color: var(--muted); text-align: center; border: 0; border-right: 1px solid var(--line); background: transparent; }
.journey-stage:last-child { border-right: 0; }
.journey-stage:hover, .journey-stage-selected { background: #fff7ec; }
.journey-stage > span { display: grid; width: 27px; height: 27px; color: var(--faint); border: 1px solid var(--line-strong); border-radius: 50%; background: var(--paper); font-size: 12px; font-weight: 800; place-items: center; }
.journey-stage strong { max-width: 92px; font-size: 12px; line-height: 1.35; }
.journey-stage-done { color: var(--green); }
.journey-stage-done > span { color: white; border-color: var(--green); background: var(--green); }
.journey-stage-current { color: var(--orange); box-shadow: inset 0 -3px 0 var(--orange); }
.journey-stage-current > span { color: white; border-color: var(--orange); background: var(--orange); }
.journey-stage-detail { display: grid; grid-template-columns: minmax(190px, .7fr) minmax(360px, 1.25fr) minmax(300px, .9fr); gap: 20px; align-items: center; padding: 17px 19px; }
.journey-stage-detail h3 { margin: 5px 0 6px; font-family: Georgia, "Songti SC", serif; font-size: 19px; }
.journey-stage-detail p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.5; }
.journey-stage-detail dl { display: grid; grid-template-columns: .7fr 1.4fr; margin: 0; border: 1px solid var(--line); }
.journey-stage-detail dl > div { min-width: 0; padding: 10px 11px; border-right: 1px solid var(--line); }
.journey-stage-detail dl > div:last-child { border-right: 0; }
.journey-stage-detail dt { color: var(--muted); font-size: 12px; }
.journey-stage-detail dd { margin: 5px 0 0; font-size: 12px; font-weight: 700; line-height: 1.45; }
.journey-stage-actions { display: flex; align-items: flex-start; flex-wrap: wrap; gap: 7px; }
.journey-stage-actions small { width: 100%; color: var(--faint); font-size: 12px; line-height: 1.45; }
.compliance-readiness { display: grid; grid-template-columns: minmax(230px, 1.1fr) repeat(4, minmax(150px, 1fr)); gap: 8px; padding: 14px 19px 17px; background: #f5f7f2; border-top: 1px solid var(--line); }
.compliance-readiness > div, .compliance-readiness > span { display: flex; min-width: 0; min-height: 68px; justify-content: center; flex-direction: column; gap: 5px; padding: 10px 11px; border: 1px solid #d7dfd5; background: var(--paper); }
.compliance-readiness > div strong { font-family: Georgia, "Songti SC", serif; font-size: 15px; }
.compliance-readiness > div small { color: var(--muted); font-size: 11px; line-height: 1.45; }
.compliance-readiness > span { position: relative; padding-left: 37px; color: var(--ink); font-size: 12px; font-weight: 700; line-height: 1.4; }
.compliance-readiness > span svg { position: absolute; top: 12px; left: 12px; color: var(--green); }
.compliance-readiness > span em { color: #8a561b; font-size: 11px; font-style: normal; }
.supply-network-panel { overflow: hidden; }
.customer-create-form { display: grid; grid-template-columns: 1.2fr 1fr 1fr auto; gap: 9px; align-items: end; padding: 13px 18px; background: #fff8ee; border-bottom: 1px solid var(--line); }
.customer-create-form label { display: flex; flex-direction: column; gap: 5px; }
.customer-create-form label span { color: var(--muted); font-size: 12px; font-weight: 650; }
.customer-create-form input { min-height: 36px; padding: 0 9px; border: 1px solid var(--line-strong); border-radius: 4px; background: var(--paper); font-size: 12px; }
.customer-form-error { grid-column: 1 / -1; color: var(--red); font-size: 12px; font-weight: 650; }
.supply-network { display: grid; grid-template-columns: minmax(220px, .85fr) 30px minmax(220px, .85fr) 30px minmax(280px, 1.25fr); gap: 10px; align-items: center; padding: 20px 22px 16px; }
.network-arrow { color: var(--faint); justify-self: center; }
.network-node { display: grid; min-height: 122px; grid-template-columns: 42px minmax(0, 1fr); gap: 3px 10px; align-content: center; padding: 14px; border: 1px solid var(--line); background: #f9f7ef; }
.network-node > span { display: grid; width: 40px; height: 40px; grid-row: 1 / span 3; color: var(--orange); border-radius: 50%; background: var(--orange-soft); place-items: center; }
.network-node small { color: var(--muted); font-size: 12px; }
.network-node strong { font-size: 13px; line-height: 1.4; }
.network-node em { color: var(--faint); font-size: 12px; font-style: normal; }
.network-node-core { color: white; border-color: #10202a; background: var(--navy); }
.network-node-core > span { color: #f2c761; background: rgb(242 199 97 / 12%); }
.network-node-core small, .network-node-core em { color: rgb(255 255 255 / 56%); }
.customer-network { display: flex; max-height: 188px; overflow-y: auto; flex-direction: column; gap: 7px; }
.customer-network > button { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; gap: 9px; align-items: center; min-height: 58px; padding: 8px 10px; text-align: left; border: 1px solid var(--line); background: #fbfaf5; }
.customer-network > button:hover, .customer-network > .customer-node-active { border-color: #d3a679; background: #fff5e7; box-shadow: inset 3px 0 0 var(--orange); }
.customer-network > button > svg { color: var(--orange); }
.customer-network > button > span { display: flex; min-width: 0; flex-direction: column; gap: 3px; }
.customer-network strong { overflow: hidden; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.customer-network small { color: var(--muted); font-size: 12px; }
.customer-network em { color: var(--green); font-size: 12px; font-style: normal; font-weight: 700; white-space: nowrap; }
.service-network { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; padding: 0 22px 16px; }
.service-network article { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: 8px; align-items: center; min-height: 62px; padding: 9px 10px; border: 1px solid var(--line); background: #f6f4ec; }
.service-network svg { color: var(--green); }
.service-network span { display: flex; min-width: 0; flex-direction: column; gap: 3px; }
.service-network strong, .service-network small, .service-network em { font-size: 12px; }
.service-network small { color: var(--muted); }
.service-network em { color: var(--faint); font-style: normal; white-space: nowrap; }
.network-location { display: flex; align-items: center; gap: 7px; padding: 11px 22px; color: var(--muted); background: #f1efe7; border-top: 1px solid var(--line); font-size: 12px; font-weight: 650; }

.tour-layer { position: fixed; z-index: 1000; inset: 0; pointer-events: none; }
.tour-backdrop { position: absolute; inset: 0; background: rgb(8 18 24 / 68%); backdrop-filter: blur(3px); }
.tour-spotlight { position: fixed; z-index: 1001; border: 3px solid var(--gold); border-radius: 9px; box-shadow: 0 0 0 9999px rgb(8 18 24 / 68%), 0 0 0 6px rgb(239 189 67 / 18%); pointer-events: none; transition: width var(--motion-base) var(--ease-enter), height var(--motion-base) var(--ease-enter); will-change: top, left, width, height; }
.tour-card { position: fixed; z-index: 1002; display: grid; width: 420px; max-height: calc(100dvh - 36px); grid-template-rows: auto auto minmax(0, 1fr) auto; overflow: hidden; padding: 20px; color: var(--ink); border: 1px solid #cfc5ad; border-radius: 10px; background: var(--paper); box-shadow: 0 28px 80px rgb(0 0 0 / 32%); pointer-events: auto; overscroll-behavior: contain; transition: top 260ms var(--ease-enter), left 260ms var(--ease-enter); will-change: top, left; }
.tour-card-center { top: 50%; left: 50%; width: min(520px, calc(100vw - 36px)); padding: 26px; transform: translate(-50%, -50%); }
.tour-layer[data-motion-state="enter"] .tour-backdrop { animation: overlay-enter var(--motion-base) ease-out both; }
.tour-layer[data-motion-state="exit"] .tour-backdrop { animation: overlay-exit 180ms var(--ease-exit) both; }
.tour-layer[data-motion-state="enter"] .tour-card:not(.tour-card-center) { animation: dialog-enter var(--motion-slow) var(--ease-enter) both; }
.tour-layer[data-motion-state="exit"] .tour-card:not(.tour-card-center) { animation: dialog-exit 180ms var(--ease-exit) both; }
.tour-layer[data-motion-state="enter"] .tour-card-center { animation: tour-center-enter var(--motion-slow) var(--ease-enter) both; }
.tour-layer[data-motion-state="exit"] .tour-card-center { animation: tour-center-exit 180ms var(--ease-exit) both; }
.tour-card > header { display: flex; align-items: center; justify-content: space-between; gap: 15px; }
.tour-card > header > span { color: var(--orange); font-size: 12px; font-weight: 800; letter-spacing: .11em; }
.tour-card > header button { display: grid; width: 32px; height: 32px; color: var(--muted); border: 0; border-radius: 50%; background: transparent; place-items: center; }
.tour-card > header button:hover { color: var(--ink); background: #f0eee6; }
.tour-progress { display: flex; gap: 4px; margin: 15px 0 18px; }
.tour-progress span { height: 4px; flex: 1; border-radius: 99px; background: #dfddd3; transform: scaleX(.86); transition: background-color var(--motion-base) ease, transform var(--motion-base) var(--ease-enter); }
.tour-progress .tour-progress-active { background: var(--orange); transform: scaleX(1); }
.tour-step-content { min-height: 112px; overflow-y: auto; overscroll-behavior: contain; }
.tour-step-content[data-motion-direction="forward"] { animation: content-enter-forward var(--motion-base) var(--ease-enter) both; }
.tour-step-content[data-motion-direction="backward"] { animation: content-enter-backward var(--motion-base) var(--ease-enter) both; }
.tour-card h2 { margin: 0 0 10px; font-family: Georgia, "Songti SC", serif; font-size: 23px; line-height: 1.25; }
.tour-step-content > p { margin: 0; color: #565b54; font-size: 14px; line-height: 1.7; }
.tour-tip { display: flex; align-items: flex-start; gap: 8px; margin-top: 14px; padding: 10px 11px; color: var(--green); border: 1px solid #c9ddd5; border-radius: 5px; background: var(--green-soft); font-size: 12px; line-height: 1.5; }
.tour-tip svg { flex: 0 0 auto; margin-top: 1px; }
.tour-card > footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 20px; }
.tour-card > footer > div { display: flex; gap: 7px; }
.tour-skip { min-height: 36px; padding: 0 6px; color: var(--muted); border: 0; background: transparent; font-size: 12px; font-weight: 700; }
.tour-skip:hover { color: var(--ink); }

@keyframes tour-center-enter { from { opacity: 0; transform: translate(-50%, calc(-50% + 12px)) scale(.985); } to { opacity: 1; transform: translate(-50%, -50%) scale(1); } }
@keyframes tour-center-exit { from { opacity: 1; transform: translate(-50%, -50%) scale(1); } to { opacity: 0; transform: translate(-50%, calc(-50% + 8px)) scale(.99); } }

@media (max-width: 1300px) {
  .app-shell { grid-template-columns: 194px minmax(0, 1fr); }
  .negotiation-layout { grid-template-columns: 190px minmax(0, 1fr) 210px; gap: 12px; }
  .negotiation-workbar-header { grid-template-columns: minmax(220px, 1fr) 210px; }
  .negotiation-workbar-actions { grid-column: 1 / -1; justify-content: flex-end; }
  .view-negotiation { padding-inline: 15px; }
  .formula-chain > div { min-width: 64px; padding-inline: 6px; }.formula-chain strong { font-size: 13px; }
  .app-header { grid-template-columns: minmax(140px, .45fr) minmax(220px, 1fr) minmax(360px, 1.15fr); gap: 14px; padding-inline: 22px; }
  .trade-terms-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .route-comparison-grid { grid-template-columns: 1fr; }
  .route-comparison-grid article { display: grid; grid-template-columns: minmax(150px, .8fr) minmax(280px, 1.4fr) 128px; align-items: center; gap: 12px; }
  .route-card-title { min-height: 0; padding: 0; border: 0; }
  .route-comparison-grid dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px 12px; margin: 0; }
  .route-comparison-grid button { margin-top: 0; }
  .master-data-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .master-data-strip > div:nth-child(3n) { border-right: 0; }
  .sku-readiness { grid-template-columns: minmax(220px, .8fr) minmax(420px, 1.4fr); }
  .readiness-actions { grid-column: 1 / -1; align-items: center; flex-direction: row; justify-content: flex-end; }
  .journey-overview { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .journey-overview > * { border-bottom: 1px solid var(--line); }
  .journey-overview > *:nth-child(3n) { border-right: 0; }
  .journey-overview > *:nth-last-child(-n+3) { border-bottom: 0; }
  .journey-stage-detail { grid-template-columns: minmax(180px, .7fr) minmax(340px, 1.3fr); }
  .journey-stage-actions { grid-column: 1 / -1; }
  .compliance-readiness { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .compliance-readiness > div { grid-column: 1 / -1; }
}

@media (max-width: 1000px) {
  .app-shell { display: block; }
  .sidebar { position: sticky; top: 0; z-index: 40; height: 62px; flex-direction: row; align-items: center; gap: 10px; padding: 7px 10px; }
  .brand { min-width: 154px; flex: 0 0 154px; padding: 0 9px 0 0; border-right: 1px solid rgb(255 255 255 / 9%); border-bottom: 0; }
  .brand > img { width: 44px; height: 31px; }
  .brand strong { font-size: 14px; }
  .brand span { display: none; }
  .sidebar nav { display: flex; min-width: 0; overflow-x: auto; flex: 1; flex-direction: row; gap: 5px; padding: 0 2px; scrollbar-width: thin; scroll-snap-type: x proximity; }
  .nav-item { min-width: 122px; min-height: 46px; flex: 0 0 auto; scroll-snap-align: start; }
  .nav-item::before { top: auto; bottom: 0; left: 50%; width: 70%; height: 2px; transform: translateX(-50%) scaleX(.35); }
  .nav-active::before { transform: translateX(-50%) scaleX(1); }
  .sidebar-bottom { margin: 0; padding: 0; border: 0; }
  .guide-launch, .system-status { display: none; }
  .account-login { width: 44px; min-height: 44px; margin: 0; padding: 0; font-size: 0; }
  .account-session { width: 48px; min-height: 44px; margin: 0; padding: 0 7px; }
  .account-session-copy { display: none; }
  .app-header { position: sticky; top: 62px; grid-template-columns: minmax(150px, .7fr) minmax(220px, 1fr); min-height: 70px; padding: 10px 18px; }
  .header-context, .save-state { display: none; }
  .view-container, .view-negotiation { padding: 16px 18px 40px; }
  .negotiation-queue { top: 132px; }
  .negotiation-workbar-header { grid-template-columns: minmax(220px, 1fr) 210px; }
  .negotiation-workbar-actions { grid-column: 1 / -1; }
  .negotiation-active-category { grid-template-columns: 1fr; }
  .negotiation-queue-panel { position: fixed; top: 132px; right: 18px; bottom: 18px; left: 18px; display: flex; flex-direction: column; }
  .negotiation-category-list { max-height: none; flex: 1; }
  .negotiation-layout { grid-template-columns: 1fr; }
  .scenario-rail, .decision-rail { position: static; }
  .scenario-rail { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 16px; }
  .rail-title, .selected-product, .rail-facts, .note-field { grid-column: 1 / -1; }
  .selected-product { display: grid; grid-template-columns: 120px minmax(0, 1fr); align-items: center; }
  .mini-packshot { grid-row: span 2; }
  .decision-rail { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 18px; }
  .decision-title, .decision-breakdown, .decision-rail > .outline-button { grid-column: 1 / -1; }
  .formula-chain { overflow-x: auto; }
  .formula-chain > div { min-width: 130px; }
  .metric-ledger-four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .metric-ledger article:nth-child(2) { border-right: 0; }
  .metric-ledger article:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .dashboard-grid, .two-panel-grid { grid-template-columns: 1fr; }
  .approval-layout { grid-template-columns: 1fr; }
  .journey-phases { grid-template-columns: repeat(5, minmax(230px, 1fr)); }
  .journey-stage-detail { grid-template-columns: 1fr; }
  .journey-stage-actions { grid-column: auto; }
  .supply-network { grid-template-columns: 1fr; }
  .network-arrow { transform: rotate(90deg); }
  .service-network { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .customer-create-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sku-readiness { grid-template-columns: 1fr; }
  .readiness-actions { grid-column: auto; justify-content: flex-start; }
  .catalog-heading-actions { align-items: stretch; flex-direction: column; }
  .process-line { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .process-step:nth-child(3n) { border-right: 0; }
  .document-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .document-facts > div:nth-child(2n) { border-right: 0; }
  .document-flow { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .document-card:nth-child(2n) .document-arrow { display: none; }
  .match-grid { grid-template-columns: 1fr; }
  .match-grid > svg { transform: rotate(90deg); justify-self: center; }
  .cash-event { grid-template-columns: 80px 16px minmax(210px, 1fr) 110px; }
  .cumulative-amount { grid-column: 3 / -1; padding-bottom: 12px; }
}

@media (max-width: 720px) {
  .login-shell { padding: 14px; }
  .login-card { padding: 24px 20px; box-shadow: 0 18px 50px rgb(25 34 28 / 8%); }
  .login-brand-panel { align-items: flex-start; flex-direction: column; gap: 12px; margin-bottom: 23px; padding-bottom: 18px; }
  .login-brand-lockup img { width: 96px; height: 54px; }
  .login-brand-lockup strong { font-size: 15px; }
  .login-form-options button, .password-visibility { min-width: 44px; min-height: 44px; }
  .sidebar { height: 58px; padding: 6px 8px; }
  .brand { display: none; }
  .nav-item { min-width: 116px; min-height: 44px; }
  .nav-item strong { font-size: 12px; }
  .app-header { top: 58px; grid-template-columns: 1fr; min-height: 112px; }
  .page-title { display: flex; align-items: baseline; gap: 10px; }
  .page-title h1 { margin: 0; }
  .view-container, .view-negotiation { padding: 12px 12px 32px; }
  .negotiation-queue { top: 170px; }
  .negotiation-workbar-header { grid-template-columns: 1fr; gap: 10px; padding: 12px; }
  .negotiation-workbar-progress { grid-row: 2; }
  .negotiation-workbar-actions { grid-column: auto; justify-content: stretch; }
  .negotiation-workbar-actions button { flex: 1 1 0; padding-inline: 7px; }
  .negotiation-active-category { gap: 9px; padding: 10px 12px; }
  .negotiation-active-category > div:first-child { grid-template-columns: auto 1fr; }
  .negotiation-active-category > div:first-child > small { grid-column: 1 / -1; }
  .negotiation-queue-panel { top: 170px; right: 8px; bottom: 8px; left: 8px; }
  .negotiation-queue-toolbar { grid-template-columns: 1fr; }
  .negotiation-category { grid-template-columns: 1fr; }
  .negotiation-sku-strip { grid-template-columns: 1fr; }
  .negotiation-queue-filters { overflow-x: auto; padding-bottom: 2px; }
  .negotiation-main { scroll-margin-top: 182px; }
  .command-hero { min-height: 0; align-items: flex-start; flex-direction: column; padding: 20px; }
  .command-hero h2 { font-size: 22px; }
  .heading-actions { width: 100%; flex-wrap: wrap; }
  .heading-actions > button { flex: 1 1 auto; }
  .input-grid, .trade-terms-grid, .master-data-strip, .scenario-rail, .decision-rail, .document-facts, .document-flow, .fefo-allocations, .drawer-form { grid-template-columns: 1fr; }
  .pricing-mode-row, .route-path-row, .route-master-grid { grid-template-columns: 1fr; }
  .route-master-wide { grid-column: auto; }
  .route-comparison-grid article { display: flex; }
  .route-card-title { min-height: 48px; padding-bottom: 9px; border-bottom: 1px solid var(--line); }
  .route-comparison-grid dl { display: block; margin: 8px 0 10px; }
  .number-field, .compact-field, .master-data-strip > div, .document-facts > div { border-right: 0; }
  .input-grid .number-field { border-bottom: 1px solid var(--line) !important; }
  .compact-field-wide { grid-column: auto; }
  .metric-ledger-four { grid-template-columns: 1fr; }
  .metric-ledger article { border-right: 0; border-bottom: 1px solid var(--line); }
  .metric-ledger article:last-child { border-bottom: 0; }
  .product-summary { grid-template-columns: 100px minmax(0, 1fr); }
  .process-line { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .process-step:nth-child(3n) { border-right: 1px solid var(--line); }
  .process-step:nth-child(2n) { border-right: 0; }
  .document-card .document-arrow { display: none; }
  .reorder-banner { grid-template-columns: 42px minmax(0, 1fr); }
  .reorder-status { grid-column: 2; align-items: flex-start; }
  .cash-event { grid-template-columns: 72px 12px minmax(170px, 1fr); padding-block: 12px; }
  .cash-event > .amount-positive, .cash-event > .amount-negative, .cumulative-amount { grid-column: 3; text-align: left; }
  .help-trigger { width: 44px; height: 44px; }
  .help-panel, .help-panel-end { position: fixed; inset: auto 12px 12px; width: auto; }
  .help-panel::before { display: none; }
  .catalog-heading { align-items: stretch; flex-direction: column; }
  .catalog-search { width: 100%; }
  .approval-summary dl { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .journey-overview { grid-template-columns: 1fr; }
  .journey-overview > * { border-right: 0; border-bottom: 1px solid var(--line) !important; }
  .journey-overview > *:last-child { border-bottom: 0 !important; }
  .journey-hero-status { align-items: flex-start; }
  .journey-stage-detail dl { grid-template-columns: 1fr; }
  .journey-stage-detail dl > div { border-right: 0; border-bottom: 1px solid var(--line); }
  .journey-stage-detail dl > div:last-child { border-bottom: 0; }
  .service-network, .customer-create-form { grid-template-columns: 1fr; }
  .compliance-readiness { grid-template-columns: 1fr; }
  .compliance-readiness > div { grid-column: auto; }
  .approval-summary dl > div:nth-child(2n) { border-right: 0; }
  .tour-card, .tour-card-center { top: auto !important; right: 12px; bottom: 12px; left: 12px !important; width: auto; max-height: min(48dvh, 360px); padding: 16px; transform: none; }
  .tour-card > footer { align-items: stretch; flex-direction: column; }
  .tour-card > footer > div { width: 100%; }
  .tour-card > footer > div > button { flex: 1; }
  .app-notice { top: auto; right: 12px; bottom: 12px; width: calc(100vw - 24px); }
}

/* Negotiation workbench v2: one focused SKU, an on-demand flavor queue, and one
   fixed decision/action frame. These late rules intentionally replace the
   earlier three-column queue prototype without disturbing other modules. */
.view-negotiation { padding-bottom: 106px; }
.view-negotiation .view-motion-layer { will-change: auto; }
.view-negotiation .view-motion-layer[data-motion-state="idle"] { transform: none; }
.negotiation-queue { top: 94px; margin-bottom: 14px; border-color: #d5d1c3; box-shadow: 0 12px 30px rgb(31 38 32 / 7%); }
.negotiation-queue:has(.negotiation-picker-backdrop), .negotiation-queue:has(.negotiation-drawer-backdrop) { z-index: 80; }
.negotiation-workbar-header { grid-template-columns: minmax(360px, 1fr) 286px auto; min-height: 82px; padding: 12px 14px 12px 18px; }
.negotiation-current-context > span { color: var(--orange); font-size: 10px; font-weight: 800; letter-spacing: .11em; }
.negotiation-current-context h2 { margin: 4px 0 3px; font-size: 19px; }
.negotiation-current-context p { color: #5f655d; font-size: 12px; }
.negotiation-workbar-progress { grid-template-columns: repeat(3, minmax(74px, 1fr)); }
.negotiation-workbar-progress span { min-height: 52px; font-size: 10px; }
.negotiation-workbar-actions { justify-content: flex-end; }
.negotiation-workbar-actions .primary-button { min-height: 42px; }
.negotiation-layout { grid-template-columns: minmax(0, 1fr) minmax(320px, 356px); gap: 14px; }
.negotiation-main { gap: 12px; }
/* NegotiationSections owns visual, keyboard and reading order together. */
.negotiation-heading { min-height: 62px; align-items: center; padding: 4px 2px; }
.negotiation-heading h2 { margin: 3px 0; font-size: 20px; }
.negotiation-heading p { font-size: 11px; }
.negotiation-draft-controls { display: flex; align-items: center; gap: 9px; }
.negotiation-draft-controls .mode-switch { width: 206px; margin: 0; }
.decision-rail { top: 190px; max-height: calc(100dvh - 296px); overflow-y: auto; padding: 18px 20px; overscroll-behavior: contain; }
.decision-title > div { flex-wrap: wrap; }
.decision-title > div > span { flex-basis: 100%; }
.decision-metric { padding: 15px 0; }
.decision-metric strong { font-size: 24px; }
.final-readiness { display: flex; align-items: flex-start; gap: 10px; margin: 13px 0; padding: 12px; color: #7f4d19; border: 1px solid #ead1a7; background: #fff6df; }
.final-readiness > svg { flex: 0 0 auto; margin-top: 1px; }
.final-readiness > div { display: grid; gap: 4px; }
.final-readiness strong { font-size: 12px; }
.final-readiness span { color: inherit; font-size: 11px; line-height: 1.45; }
.final-readiness-ready { color: var(--green); border-color: #b8d3c6; background: var(--green-soft); }
.visibility-label { display: inline-flex; width: max-content; align-items: center; gap: 5px; margin-bottom: 5px; padding: 3px 6px; border: 1px solid; border-radius: 3px; font-size: 10px; font-weight: 800; letter-spacing: .04em; }
.visibility-export { color: #96501d; border-color: #e5b891; background: #fff3e7; }
.visibility-internal { color: #315565; border-color: #bdd0d7; background: #edf4f6; }
.supplier-confirmation-ledger, .supplier-quote-ledger { border-top: 3px solid #d4743d; }
.internal-ledger, .internal-input-ledger, .internal-notes-ledger { border-top: 3px solid #355768; }
.terms-ledger > header > div, .formula-ledger > header > div, .input-ledger > header > div, .route-ledger > header > div, .cost-ledger > header > div, .internal-notes-ledger > header > div { min-width: 0; }
.supplier-input-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.internal-input-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.supplier-input-grid .number-field, .internal-input-grid .number-field { border-bottom: 0; }
.supplier-input-grid .number-field:nth-child(3n), .internal-input-grid .number-field:nth-child(3n) { border-right: 1px solid var(--line); }
.supplier-input-grid > :last-child, .internal-input-grid > :last-child { border-right: 0; }
.readonly-number { display: flex; min-width: 0; min-height: 104px; flex-direction: column; justify-content: center; gap: 6px; padding: 12px 14px; border-right: 1px solid var(--line); background: #faf8f2; }
.readonly-number > span { color: var(--muted); font-size: 12px; font-weight: 650; }
.readonly-number strong { overflow: hidden; font-family: Georgia, serif; font-size: 19px; text-overflow: ellipsis; white-space: nowrap; }
.readonly-number small { color: var(--faint); font-size: 11px; }
.export-note-field { display: grid; gap: 7px; padding: 13px 14px 15px; border-top: 1px solid var(--line); }
.export-note-field > span { color: var(--muted); font-size: 12px; font-weight: 700; }
.export-note-field b { margin-left: 5px; color: var(--orange); font-size: 10px; }
.export-note-field textarea, .internal-notes-ledger textarea { width: 100%; padding: 10px 11px; border: 1px solid var(--line); border-radius: 4px; outline: 0; background: #fbfaf5; font-size: 12px; line-height: 1.55; resize: vertical; }
.internal-notes-ledger { background: var(--paper); border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); border-left: 1px solid var(--line); box-shadow: 0 12px 34px rgb(35 41 34 / 4%); }
.internal-notes-ledger > header { padding: 13px 15px 10px; border-bottom: 1px solid var(--line); }
.internal-notes-ledger h3 { margin: 0; font-family: Georgia, "Songti SC", serif; font-size: 14px; }
.internal-notes-ledger textarea { margin: 13px 14px 15px; width: calc(100% - 28px); }
.negotiation-action-bar { position: fixed; right: 0; bottom: 0; left: 218px; z-index: 35; display: grid; grid-template-columns: minmax(220px, .72fr) minmax(360px, 1fr) auto; align-items: center; gap: 16px; min-height: 82px; padding: 12px 24px; background: rgb(255 253 247 / 97%); border-top: 1px solid var(--line-strong); box-shadow: 0 -12px 34px rgb(31 38 32 / 8%); backdrop-filter: blur(16px); }
.draft-save-indicator { display: flex; align-items: center; gap: 9px; color: var(--green); }
.draft-save-indicator > span { display: grid; gap: 2px; }
.draft-save-indicator strong { font-size: 12px; }
.draft-save-indicator small { color: var(--muted); font-size: 10px; }
.draft-save-dirty { color: var(--orange); }
.negotiation-step-actions, .negotiation-save-actions { display: flex; align-items: center; gap: 8px; }
.negotiation-step-actions { justify-content: center; }
.negotiation-save-actions { justify-content: flex-end; }
.version-save-wrap { position: relative; }
.version-save-button, .final-save-button { display: inline-flex; min-height: 48px; align-items: center; justify-content: center; gap: 7px; padding: 0 17px; border-radius: 5px; font-size: 12px; font-weight: 800; white-space: nowrap; }
.version-save-button { color: #9b471a; border: 1px solid #db9a71; background: #fffaf4; }
.version-save-button:hover { color: white; border-color: var(--orange); background: var(--orange); }
.final-save-button { color: white; border: 1px solid #b74e16; background: #c95514; box-shadow: 0 9px 22px rgb(187 90 33 / 20%); }
.final-save-button:hover { border-color: #a74612; background: #a74612; }
.version-save-popover { position: absolute; right: 0; bottom: calc(100% + 12px); z-index: 2; display: grid; width: 310px; gap: 8px; padding: 15px; color: var(--ink); border: 1px solid #d8b69e; border-radius: 6px; background: #fffdf8; box-shadow: 0 18px 46px rgb(31 38 32 / 18%); }
.version-save-popover::after { position: absolute; right: 28px; bottom: -7px; width: 12px; height: 12px; content: ""; background: #fffdf8; border-right: 1px solid #d8b69e; border-bottom: 1px solid #d8b69e; transform: rotate(45deg); }
.version-save-popover > strong { font-family: Georgia, "Songti SC", serif; font-size: 15px; }
.version-save-popover > p { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.55; }
.version-save-popover > div { display: flex; justify-content: flex-end; gap: 8px; margin-top: 3px; }
.version-save-popover button { min-height: 38px; }
.negotiation-final-backdrop { z-index: 90; }
.negotiation-final-dialog { width: min(520px, 100%); }
.negotiation-final-copy { display: grid; gap: 12px; padding: 19px 22px 6px; }
.negotiation-final-copy > p { margin: 0 0 3px; color: var(--ink); font-size: 13px; line-height: 1.6; }
.negotiation-final-copy > div { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: 9px; padding: 10px 11px; color: #315565; border: 1px solid #ccdadd; background: #f1f6f7; font-size: 11px; line-height: 1.5; }
.negotiation-final-copy > div > svg { margin-top: 1px; }
.negotiation-picker-backdrop, .negotiation-drawer-backdrop { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 70; background: rgb(15 23 27 / 42%); backdrop-filter: blur(3px); }
.negotiation-picker-backdrop { display: grid; overflow-y: auto; padding: 28px; place-items: center; }
.negotiation-category-picker, .negotiation-category-compare { width: min(940px, 100%); max-height: calc(100dvh - 56px); overflow: hidden; background: var(--paper); border: 1px solid #c9c3b3; box-shadow: 0 28px 90px rgb(8 18 23 / 24%); }
.negotiation-category-picker > header, .negotiation-category-compare > header { display: flex; align-items: center; justify-content: space-between; gap: 22px; padding: 22px 24px; border-bottom: 1px solid var(--line); }
.negotiation-category-picker h2, .negotiation-category-compare h2 { margin: 4px 0; font-family: Georgia, "Songti SC", serif; font-size: 25px; }
.negotiation-category-picker header p, .negotiation-category-compare header p { margin: 0; color: var(--muted); font-size: 12px; }
.category-progress { display: flex; align-items: baseline; gap: 7px; padding: 10px 13px; border: 1px solid var(--line); background: #faf8f2; }
.category-progress strong { color: var(--orange); font-family: Georgia, serif; font-size: 24px; }
.category-progress span { color: var(--muted); font-size: 11px; }
.category-header-actions { display: flex; align-items: center; gap: 10px; }
.category-picker-close { display: grid; width: 38px; height: 38px; border: 1px solid var(--line); border-radius: 50%; background: var(--paper); place-items: center; }
.negotiation-category-grid { display: grid; max-height: calc(100dvh - 180px); overflow-y: auto; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; padding: 16px; overscroll-behavior: contain; }
.negotiation-category-grid button { display: grid; min-height: 112px; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 10px; padding: 14px; text-align: left; border: 1px solid var(--line); background: #fffefa; }
.negotiation-category-grid button:hover { border-color: #d59b77; background: var(--orange-soft); transform: translateY(-1px); }
.negotiation-category-grid button > span { color: var(--orange); font-size: 10px; font-weight: 800; letter-spacing: .08em; }
.negotiation-category-grid button > strong, .negotiation-category-grid button > small { grid-column: 1; }
.negotiation-category-grid button > strong { font-size: 13px; line-height: 1.4; }
.negotiation-category-grid button > small { color: var(--muted); font-size: 11px; }
.negotiation-category-grid button > svg { grid-row: 1 / 4; grid-column: 2; align-self: center; color: var(--orange); }
.negotiation-flavor-drawer { position: absolute; top: 0; bottom: 0; left: 218px; display: flex; width: 320px; flex-direction: column; overflow: hidden; background: var(--paper); border-right: 1px solid #c9c3b3; box-shadow: 20px 0 60px rgb(8 18 23 / 22%); }
.negotiation-flavor-drawer > header { display: flex; min-height: 58px; align-items: center; justify-content: space-between; padding: 9px 12px; border-bottom: 1px solid var(--line); }
.negotiation-flavor-drawer > header > button:last-child { display: grid; width: 34px; height: 34px; border: 0; border-radius: 50%; background: transparent; place-items: center; }
.drawer-back-link { display: inline-flex; min-height: 36px; align-items: center; gap: 4px; padding: 0 6px; color: var(--ink); border: 0; background: transparent; font-size: 12px; font-weight: 750; }
.flavor-drawer-title { padding: 17px 16px 13px; border-bottom: 1px solid var(--line); }
.flavor-drawer-title > span { color: var(--orange); font-size: 10px; font-weight: 800; letter-spacing: .08em; }
.flavor-drawer-title h2 { margin: 5px 0 7px; font-family: Georgia, "Songti SC", serif; font-size: 20px; line-height: 1.3; }
.flavor-drawer-title p { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.5; }
.flavor-search { display: flex; min-height: 40px; align-items: center; gap: 8px; margin: 12px 12px 8px; padding: 0 10px; border: 1px solid var(--line); background: #faf8f2; }
.flavor-search input { width: 100%; min-width: 0; border: 0; outline: 0; background: transparent; font-size: 11px; }
.category-compare-entry { display: grid; min-height: 39px; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 8px; margin: 0 12px 9px; padding: 0 10px; color: #17405a; text-align: left; border: 1px solid #c8d5db; background: #eef4f6; font-size: 11px; font-weight: 750; }
.flavor-queue-list { min-height: 0; overflow-y: auto; flex: 1; overscroll-behavior: contain; }
.flavor-queue-list > button { display: grid; width: 100%; min-height: 74px; grid-template-columns: 28px minmax(0, 1fr); gap: 5px 8px; padding: 10px 13px; text-align: left; border: 0; border-bottom: 1px solid var(--line); background: transparent; }
.flavor-queue-list > button:hover { background: #faf7ee; }
.flavor-queue-list > button[aria-current="true"] { background: var(--orange-soft); box-shadow: inset 4px 0 0 var(--orange); }
.flavor-queue-list > button > b { grid-row: 1 / 3; color: var(--muted); font-family: Georgia, serif; font-size: 13px; }
.flavor-queue-list > button > span { display: grid; min-width: 0; gap: 4px; }
.flavor-queue-list strong { overflow: hidden; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.flavor-queue-list small { overflow: hidden; color: var(--muted); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.flavor-queue-list em { grid-column: 2; width: max-content; color: var(--muted); font-size: 10px; font-style: normal; font-weight: 750; }
.flavor-queue-list em[data-status="completed"] { color: var(--green); }
.flavor-queue-list em[data-status="in_progress"] { color: var(--orange); }
.negotiation-category-compare { width: min(1040px, 100%); }
.category-compare-table { max-height: calc(100dvh - 176px); overflow: auto; }
.category-compare-table > * { display: grid; min-width: 820px; grid-template-columns: minmax(250px, 1.5fr) minmax(150px, .8fr) 120px 130px minmax(150px, .8fr); align-items: center; gap: 12px; padding: 11px 16px; border: 0; border-bottom: 1px solid var(--line); background: transparent; text-align: left; }
.category-compare-table > div { position: sticky; top: 0; z-index: 1; color: var(--muted); background: #f2f0e8; font-size: 10px; font-weight: 800; letter-spacing: .04em; }
.category-compare-table > button { width: 100%; font-size: 11px; }
.category-compare-table > button:hover { background: var(--orange-soft); }
.category-compare-table strong, .category-compare-table small { display: block; }
.category-compare-table small { margin-top: 3px; color: var(--muted); font-size: 10px; }
.comparison-drawer header p { max-width: 300px; margin: 7px 0 0; color: var(--muted); font-size: 11px; line-height: 1.45; }
.revision-list article { display: flex; min-height: 68px; align-items: center; justify-content: space-between; gap: 16px; padding: 13px; text-align: left; border: 1px solid var(--line); background: #faf8f2; }
.revision-list article > span { display: flex; flex-direction: column; gap: 4px; }
.revision-list article > span:last-child { text-align: right; }
.revision-empty { padding: 18px 14px; color: var(--muted); text-align: center; border: 1px dashed var(--line-strong); background: #faf8f2; font-size: 11px; line-height: 1.55; }

@media (max-width: 1300px) {
  .negotiation-action-bar { left: 194px; grid-template-columns: minmax(190px, .6fr) minmax(330px, 1fr) auto; gap: 10px; padding-inline: 15px; }
  .negotiation-flavor-drawer { left: 194px; }
  .negotiation-workbar-header { grid-template-columns: minmax(300px, 1fr) 250px auto; }
  .negotiation-layout { grid-template-columns: minmax(0, 1fr) 320px; }
  .negotiation-step-actions button { padding-inline: 8px; }
  .version-save-button, .final-save-button { padding-inline: 12px; }
}

@media (max-width: 1100px) {
  .negotiation-layout { grid-template-columns: 1fr; }
  .decision-rail { position: static; display: grid; max-height: none; overflow: visible; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 18px; }
  .decision-title, .final-readiness, .decision-breakdown, .decision-rail > .outline-button { grid-column: 1 / -1; }
  .negotiation-workbar-header { grid-template-columns: minmax(280px, 1fr) auto; }
  .negotiation-workbar-progress { display: none; }
  .negotiation-action-bar { grid-template-columns: minmax(180px, .6fr) auto; }
  .negotiation-step-actions { display: none; }
}

@media (max-width: 1000px) {
  .negotiation-action-bar { left: 0; }
  .negotiation-flavor-drawer { left: 0; }
  .negotiation-queue { top: 140px; }
  .negotiation-category-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 720px) {
  .view-negotiation { padding-bottom: 142px; }
  .negotiation-queue { top: 178px; }
  .negotiation-workbar-header { grid-template-columns: 1fr; }
  .negotiation-workbar-actions { justify-content: stretch; }
  .negotiation-workbar-actions button { flex: 1 1 0; }
  .negotiation-heading { align-items: stretch; flex-direction: column; }
  .negotiation-draft-controls { justify-content: space-between; }
  .negotiation-draft-controls .mode-switch { width: min(210px, 62vw); }
  .supplier-input-grid, .internal-input-grid { grid-template-columns: 1fr; }
  .supplier-input-grid .number-field, .internal-input-grid .number-field, .readonly-number { min-height: 82px; border-right: 0; border-bottom: 1px solid var(--line) !important; }
  .supplier-input-grid > :last-child, .internal-input-grid > :last-child { border-bottom: 0 !important; }
  .negotiation-action-bar { grid-template-columns: 1fr; gap: 8px; min-height: 126px; padding: 9px 12px; }
  .draft-save-indicator { display: none; }
  .negotiation-save-actions { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); }
  .version-save-button, .final-save-button { min-height: 48px; padding-inline: 8px; white-space: normal; }
  .negotiation-picker-backdrop { padding: 10px; }
  .negotiation-category-picker, .negotiation-category-compare { max-height: calc(100dvh - 78px); }
  .negotiation-category-picker > header, .negotiation-category-compare > header { align-items: flex-start; flex-direction: column; padding: 16px; }
  .negotiation-category-grid { max-height: calc(100dvh - 205px); grid-template-columns: 1fr; }
  .negotiation-flavor-drawer { width: min(360px, 100vw); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; transition-delay: 0ms !important; }
}
/* Desktop has three independent scroll areas: SKU navigation, current form,
   decision summary. The title and primary actions never leave their frame. */
.view-negotiation { padding: 12px 18px; }
.view-negotiation .view-motion-layer { min-height: 0; }
.negotiation-workbench { height: calc(100dvh - 114px); min-height: 430px; display: grid; grid-template-rows: auto minmax(0,1fr); gap: 12px; }
.negotiation-project-tools { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.negotiation-project-tools > span { display: grid; gap: 3px; min-width: 100px; }
.negotiation-project-tools small { color: var(--muted); font-size: 10px; }
.negotiation-project-tools > div { display: flex; align-items: center; gap: 8px; min-width: 0; }
.negotiation-project-tools .app-select { max-width: 180px; }
.negotiation-workbench-body { display: grid; grid-template-columns: 224px minmax(0,1fr); gap: 14px; min-height: 0; }
.negotiation-navigator { min-height: 0; min-width: 0; display: flex; flex-direction: column; gap: 12px; padding: 15px 12px; background: var(--paper); border: 1px solid var(--line); }
.negotiation-navigator h2 { margin: 5px 0; font-size: 18px; }
.negotiation-navigator header small,.negotiation-navigation-empty { font-size: 11px; line-height: 1.6; color: var(--muted); }
.negotiation-nav-search { display: flex; align-items: center; gap: 5px; border: 1px solid var(--line); padding: 8px; background: white; border-radius: 5px; }
.negotiation-nav-search input { width: 100%; min-width: 0; border: 0; background: none; font-size: 12px; }
.negotiation-nav-filters { display: grid; grid-template-columns: .6fr 1fr 1fr; gap: 4px; }
.negotiation-nav-filters button { min-width: 0; padding: 7px 2px; font-size: 10.5px; white-space: nowrap; border: 1px solid var(--line); background: transparent; border-radius: 4px; }
.negotiation-nav-filters button[aria-pressed="true"] { color: var(--orange); background: var(--orange-soft); border-color: var(--orange); }
.negotiation-nav-list { overflow-y: auto; overscroll-behavior: contain; min-height: 0; display: flex; flex-direction: column; gap: 7px; padding-right: 3px; }
.negotiation-nav-list > button { flex: 0 0 auto; display: grid; gap: 5px; text-align: left; padding: 12px; border: 1px solid var(--line); border-radius: 5px; background: white; overflow-wrap: anywhere; }
.negotiation-nav-list strong { font-size: 12px; line-height: 1.5; }
.negotiation-nav-list span { font-size: 12px; color: var(--ink); }
.negotiation-nav-list small { color: var(--muted); font-size: 10px; line-height: 1.5; }
.negotiation-nav-list em { color: var(--orange); font-size: 10px; font-style: normal; }
.negotiation-nav-list > button[aria-current="true"] { background: #fff4e9; border-color: var(--orange); box-shadow: inset 3px 0 var(--orange); }
.negotiation-start { display: flex; flex-direction: column; gap: 12px; align-items: center; justify-content: center; text-align: center; color: var(--muted); background: var(--paper); border: 1px solid var(--line); }
.negotiation-start h2 { margin: 0; color: var(--ink); font-size: 21px; }
.negotiation-start p { font-size: 13px; }
.negotiation-workbench .negotiation-layout { height: 100%; min-height: 0; min-width: 0; grid-template-columns: minmax(0,1fr) 236px; grid-template-rows: minmax(0,1fr) auto; gap: 10px; align-items: stretch; margin: 0; padding: 0; }
.negotiation-workbench .negotiation-main { overflow-y: auto; overscroll-behavior: contain; min-height: 0; padding-right: 5px; gap: 12px; }
.negotiation-workbench .negotiation-heading { position: sticky; top: 0; z-index: 8; margin: 0; padding: 12px; border: 1px solid var(--line); background: var(--paper); box-shadow: 0 4px 12px #00000008; }
.negotiation-workbench .negotiation-heading h2 { font-size: 16px; line-height: 1.45; }
.negotiation-workbench .negotiation-heading p { line-height: 1.5; }
.negotiation-workbench .negotiation-draft-controls { flex-wrap: wrap; justify-content: flex-end; }
.negotiation-workbench .negotiation-draft-controls .mode-switch { width: auto; }
.negotiation-workbench .decision-rail { position: static; min-height: 0; max-height: none; overflow-y: auto; padding: 15px; }
.negotiation-workbench .decision-metric strong { font-size: 23px; }
.negotiation-workbench .negotiation-action-bar { position: static; grid-column: 1 / -1; min-width: 0; display: flex; flex-wrap: wrap; gap: 10px; padding: 12px; box-shadow: none; transform: none; }
.negotiation-workbench .negotiation-step-actions { margin-left: auto; }
.negotiation-workbench .negotiation-step-actions button:first-child,.negotiation-workbench .negotiation-step-actions button:nth-child(2) { display: none; }
.negotiation-workbench .draft-save-indicator small { display: none; }
.negotiation-workbench .draft-save-indicator strong { font-size: 11px; }
.negotiation-workbench .negotiation-save-actions { margin-left: auto; }
.negotiation-workbench .trade-terms-grid,.negotiation-workbench .supplier-input-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
.negotiation-workbench .negotiation-main > * { flex-shrink: 0; }
.negotiation-workbench .negotiation-heading > div:first-child { min-width: 0; display: block; }
.negotiation-workbench .negotiation-heading h2 { overflow-wrap: anywhere; }
.negotiation-workbench .channel-pricing-panel > header { display: flex; flex-wrap: nowrap; }
.negotiation-workbench .channel-pricing-panel > header .app-select { width: 160px; }
.negotiation-workbench .route-comparison-grid { grid-template-columns: 1fr; }
.negotiation-workbench .formula-chain { overflow-x: auto; }
.help-panel.help-panel-portal { position: fixed; right: auto; bottom: auto; z-index: 250; overflow-y: auto; overscroll-behavior: contain; transform: none; }
.formula-help-content { font-size: 13px; line-height: 1.65; }
.formula-help-content p { margin: 0; white-space: pre-line; }
.draft-conflict { padding: 16px; border: 1px solid #d49b50; background: #fff6df; font-size: 12px; line-height: 1.6; }
.draft-conflict > div,.draft-conflict dl { display: flex; flex-wrap: wrap; gap: 12px; }
.draft-conflict dd { margin: 0; font-weight: 700; }
@media (max-width: 1180px) {
  .negotiation-workbench-body { grid-template-columns: 205px minmax(0,1fr); }
  .negotiation-workbench .negotiation-layout { display: flex; flex-direction: column; overflow-y: auto; }
  .negotiation-workbench .negotiation-main { overflow: visible; flex: 0 0 auto; }
  .negotiation-workbench .decision-rail { display: block; overflow: visible; }
  .negotiation-workbench .negotiation-action-bar { position: sticky; bottom: 0; z-index: 12; }
  .negotiation-project-tools > span { display: none; }
}
@media (max-width: 760px) {
  .negotiation-workbench { height: auto; min-height: 0; }
  .negotiation-workbench-body { grid-template-columns: 1fr; }
  .negotiation-nav-list { max-height: 240px; }
  .negotiation-workbench .negotiation-main { overflow: visible; }
  .negotiation-workbench .negotiation-heading { top: 0; }
  .negotiation-workbench .negotiation-action-bar { position: sticky; bottom: 0; z-index: 12; }
  .negotiation-project-tools > div { flex-wrap: wrap; }
  .negotiation-project-tools .app-select { max-width: none; flex: 1 1 100%; }
  .negotiation-workbench .trade-terms-grid,.negotiation-workbench .supplier-input-grid { grid-template-columns: 1fr; }
  .negotiation-workbench .draft-save-indicator { display: none; }
}